@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); /* ============================================================ SummitTrace — theme.css v1.0 Single source of truth for all design tokens and base component overrides. Load this LAST in the so it wins over Bootstrap + vendor CSS without !important spam. ============================================================ */ /* ══════════════════════════════════════════════════════════ 1. DESIGN TOKENS ══════════════════════════════════════════════════════════ */ :root { /* ── Brand palette ───────────────────────────────────── */ /* Primary — SummitTrace indigo-blue (buttons, links, interactive) */ --color-primary: #1e31a1; /* bright indigo — resting state */ --color-primary-dark: #1a1b7c; /* deep indigo — hover */ --color-primary-darker: #14156a; /* darkest — active/pressed */ --color-primary-light: #eef0fd; /* very light tint — hover bg, chips */ --color-primary-rgb: 30, 49, 161; /* Sidebar — gradient from deep indigo to bright indigo */ --color-sidebar: #1a1b7c; /* gradient start (top) */ --color-sidebar-end: #1e31a1; /* gradient end (bottom) */ --color-sidebar-dark: #13146a; /* border, shadow, divider */ --color-sidebar-light: #2a3db8; /* hover item bg */ --color-sidebar-rgb: 26, 27, 124; /* Secondary / Accent — teal (btn-secondary, active states) */ --color-accent: #0891b2; --color-accent-dark: #0e7490; --color-accent-light: #ecfeff; --color-accent-rgb: 8, 145, 178; /* ── Neutrals ────────────────────────────────────────── */ --color-surface: #ffffff; --color-bg: #f5f8fa; --color-bg-subtle: #eef3f7; --color-border: #dde4eb; --color-border-subtle: #eef2f6; --color-text: #1a2b38; --color-text-secondary: #4b6278; --color-text-muted: #8299ab; --color-text-disabled: #b0bec9; /* ── Status ──────────────────────────────────────────── */ --color-success: #10b981; --color-success-rgb: 16, 185, 129; --color-success-bg: #ecfdf5; --color-success-text: #065f46; --color-warning: #f59e0b; --color-warning-rgb: 245, 158, 11; --color-warning-bg: #fffbeb; --color-warning-text: #92400e; --color-danger: #ef4444; --color-danger-rgb: 239, 68, 68; --color-danger-bg: #fef2f2; --color-danger-text: #991b1b; --color-info: #3b82f6; --color-info-rgb: 59, 130, 246; --color-info-bg: #eff6ff; --color-info-text: #1d4ed8; /* ── Typography ──────────────────────────────────────── */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 20px; --text-3xl: 24px; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ── Spacing (4px base grid) ─────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ── Radii ───────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ── Shadows ─────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(30, 49, 161, 0.06); --shadow-sm: 0 1px 4px rgba(30, 49, 161, 0.08), 0 0 0 1px rgba(30, 49, 161, 0.04); --shadow-md: 0 4px 12px rgba(30, 49, 161, 0.1), 0 0 0 1px rgba(30, 49, 161, 0.04); --shadow-lg: 0 8px 28px rgba(30, 49, 161, 0.14); --shadow-xl: 0 16px 48px rgba(30, 49, 161, 0.18); /* ── Motion ──────────────────────────────────────────── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --duration: 150ms; --duration-md: 200ms; --duration-lg: 300ms; /* ── Bootstrap overrides (applied to Bootstrap components) */ --bs-primary: #1e31a1; --bs-primary-rgb: 30, 49, 161; --bs-secondary: #0891b2; --bs-secondary-rgb: 8, 145, 178; --bs-border-color: #dde4eb; --bs-border-radius: 6px; --bs-border-radius-sm: 4px; --bs-border-radius-lg: 10px; --bs-body-font-family: var(--font-sans); --bs-body-font-size: 13px; --bs-body-color: #1a2b38; /* ── Extended semantic ──────────────────────────────────── */ --color-purple: #7c3aed; --color-purple-rgb: 124, 58, 237; --color-purple-bg: #f5f3ff; --color-purple-text: #5b21b6; --color-cyan: #0891b2; --color-cyan-rgb: 8, 145, 178; --color-cyan-bg: #ecfeff; --color-cyan-text: #0e7490; /* ── Role badge colors ───────────────────────────────────── */ --role-superadmin: #7c3aed; --role-operations: #2563eb; --role-qc: #0891b2; --role-support: #d97706; --role-accounts: #16a34a; --role-mailroom: #6b7280; /* ── Z-index scale ───────────────────────────────────────── */ --z-sidebar: 90; --z-header: 100; --z-dropdown: 200; --z-modal: 500; --z-toast: 999; /* ── Datatable token bridge ──────────────────────────── */ --dt-primary: var(--color-primary); --dt-primary-rgb: var(--color-primary-rgb); --dt-hover: rgba(8, 145, 178, 0.07); --dt-border: var(--color-border); --dt-bg: var(--color-surface); --dt-bg-subtle: var(--color-bg); --dt-text: var(--color-text); --dt-muted: var(--color-text-muted); --dt-radius: var(--radius-sm); --dt-radius-pill: var(--radius-pill); --dt-shadow: var(--shadow-sm); --dt-shadow-lg: var(--shadow-md); --dt-ease: var(--ease); --dt-dur: var(--duration); /* ── Animation helpers (keep existing custom.css classes working) */ --anim-fast: 0.15s; --anim-base: 0.2s; --anim-slow: 0.3s; --ease-out: ease-out; --ease-in: ease-in; --hover-lift: -3px; --hover-lift-sm: -2px; --hover-scale: 1.04; --hover-zoom: 1.06; --shadow-hover: 0 6px 16px rgba(30, 49, 161, 0.1); --shadow-hover-lg: 0 16px 40px rgba(30, 49, 161, 0.14); /* ── Legacy aliases used by older admin shell rules ──── */ --color-navy: var(--color-sidebar); --color-navy-dark: var(--color-sidebar-dark); --color-navy-rgb: var(--color-sidebar-rgb); } /* ══════════════════════════════════════════════════════════ 2. BASE RESETS ══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { background: var(--color-bg); } a { color: inherit; } main { display: block; } /* ══════════════════════════════════════════════════════════ 2A. ADMIN SHELL Primary admin layout previously inherited from theme.min.css. Keep the existing nxl-* markup so vendor JS hooks remain stable. ══════════════════════════════════════════════════════════ */ :root { --admin-nav-width: 260px; --admin-nav-collapsed: 72px; --admin-header-height: 56px; --admin-content-max: 1680px; } body { min-height: 100vh; } body.modal-open { overflow: hidden; } .nxl-header { position: fixed; top: 0; right: 0; left: var(--admin-nav-width); z-index: 1030; height: var(--admin-header-height); border-bottom: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(18px); box-shadow: 0 10px 30px rgba(var(--color-primary-rgb), 0.08); transition: left var(--duration) var(--ease), width var(--duration) var(--ease); } .smt-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 5px; width: 100%; height: 100%; padding: 0 5px; } .header-wrapper { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); width: 100%; height: 100%; padding: 0 var(--space-6); } .header-left, .header-right, .smt-header-left, .smt-header-right { display: flex; align-items: center; } .header-right, .smt-header-right { margin-left: auto; gap: var(--space-3); } .smt-nav-toggle { display: flex; align-items: center; gap: var(--space-2); } .smt-nav-toggle a, .smt-mob-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-md); color: var(--color-text-secondary); text-decoration: none; transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .smt-nav-toggle a:hover, .smt-nav-toggle a:focus-visible, .smt-mob-toggle:hover, .smt-mob-toggle:focus-visible { color: var(--color-primary); background: var(--color-primary-light); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1); outline: none; } .smt-h-item { position: relative; } .smt-user-trigger { min-height: var(--admin-header-height); min-width: calc(36px + (var(--space-4) * 2)); padding: 0 var(--space-4); border: none; border-left: 1px solid var(--color-border); border-radius: 0; background: transparent; box-shadow: none; color: var(--color-text); transition: background var(--duration) var(--ease); } .smt-user-trigger:hover, .smt-user-trigger:focus-visible { background: var(--color-bg-subtle); outline: none; } .smt-user-avatar { width: 36px; height: 36px; object-fit: cover; flex-shrink: 0; border: 2px solid var(--color-border-subtle); } .smt-dropdown { min-width: 220px; max-width: min(92vw, 260px); font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-text); padding: var(--space-1) 0 !important; } .smt-dropdown-header { padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-1); border-bottom: 1px solid var(--color-border-subtle); background: linear-gradient(180deg, rgba(238, 240, 253, 0.5), rgba(255, 255, 255, 0)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .smt-dropdown-header p, .smt-dropdown .dropdown-item, .smt-dropdown .dropdown-item span { font-family: var(--font-sans); } .smt-dropdown .dropdown-item { font-size: var(--text-base); font-weight: var(--weight-medium); padding: 6px var(--space-3); } .smt-dropdown .dropdown-item i { font-size: 14px; } .smt-dropdown .dropdown-item i.feather, .smt-dropdown .dropdown-item i[class^="feather-"], .smt-dropdown .dropdown-item i[class*=" feather-"] { font-family: feather !important; font-style: normal; font-weight: 400; speak: none; } .smt-dropdown .text-muted { color: var(--color-text-muted) !important; } .nxl-head-mobile-toggler, .nxl-navigation-toggle a, .nxl-head-link { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-md); color: var(--color-text-secondary); text-decoration: none; transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .nxl-head-mobile-toggler:hover, .nxl-navigation-toggle a:hover, .nxl-head-link:hover, .nxl-head-mobile-toggler:focus-visible, .nxl-navigation-toggle a:focus-visible, .nxl-head-link:focus-visible { color: var(--color-primary); background: var(--color-primary-light); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1); outline: none; } .nxl-navigation-toggle { display: flex; align-items: center; gap: var(--space-2); } .nxl-h-item { position: relative; } .nxl-h-dropdown, .dropdown-menu { border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 24px 48px rgba(var(--color-primary-rgb), 0.12); padding: var(--space-3); } .dropdown-menu-end { right: 0; left: auto; } .dropdown-header { padding: var(--space-3); margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3); border-bottom: 1px solid var(--color-border-subtle); } .dropdown-item { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; border-radius: var(--radius-sm); color: var(--color-text-secondary); transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease); } .dropdown-item:hover, .dropdown-item:focus { background: var(--color-primary-light); color: var(--color-primary); } .dropdown-divider { border-color: var(--color-border-subtle); } /* ── Bulk action button + dropdown ───────────────────────────────── */ .smt-bulk-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; height: 28px; font-size: 13px; line-height: 1; } .smt-bulk-btn .bulk-count { display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; line-height: 1; } .smt-bulk-dropdown { min-width: 160px; padding: 4px; border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); } .smt-bulk-dropdown .smt-bulk-item { display: flex; align-items: center; gap: 7px; min-height: 0; padding: 6px 10px; border-radius: var(--radius-xs, 4px); font-size: 12.5px; font-weight: 500; } .smt-bulk-dropdown .smt-bulk-item i { font-size: 13px; flex-shrink: 0; } .nxl-container { min-height: 100vh; margin-left: var(--admin-nav-width); padding-top: var(--admin-header-height); transition: margin-left var(--duration) var(--ease); } .nxl-content { min-height: calc(100vh - var(--admin-header-height)); padding: var(--space-6); } .smt-container { min-height: 100vh; margin-left: var(--admin-nav-width); padding-top: var(--admin-header-height); transition: margin-left var(--duration) var(--ease); } .smt-content { min-height: calc(100vh - var(--admin-header-height)); padding: var(--space-5) var(--space-5) var(--space-4); } .main-content { width: 100%; max-width: var(--admin-content-max); margin: 0 auto; } .smt-page-card, .smt-container .footer, .smt-container footer { width: 100%; max-width: var(--admin-content-max); margin-left: auto; margin-right: auto; } .smt-page-card { background: var(--color-surface); border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04); overflow: hidden; margin-bottom: var(--space-4); } .smt-page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .smt-page-header-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .smt-page-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--color-text); line-height: 1.2; } .smt-page-breadcrumb { font-size: 13px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; } .smt-page-breadcrumb p { margin: 0; font-size: inherit; color: inherit; } .smt-page-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .smt-page-content { background: var(--color-surface); padding: 0px var(--space-1); } .breadcrumb-header { width: 100%; max-width: var(--admin-content-max); margin: 0 auto; } .breadcrumb-header h4, .breadcrumb-header h5 { margin: 0; } /* ── App footer ───────────────────────────────────────────────────── */ .smt-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); width: 100%; max-width: var(--admin-content-max); margin: 0 auto; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-subtle); font-size: 11.5px; color: var(--color-text-muted); } .smt-footer-copy { font-weight: 500; color: var(--color-text-muted); letter-spacing: 0.01em; } .smt-footer-credit { color: var(--color-text-muted); } .smt-footer-credit a { color: var(--color-primary); text-decoration: none; font-weight: 500; transition: opacity 150ms ease; } .smt-footer-credit a:hover { opacity: 0.75; text-decoration: underline; } .nxl-container .footer, .nxl-container footer { margin-left: auto; margin-right: auto; max-width: var(--admin-content-max); } html.minimenu .nxl-header { left: var(--admin-nav-collapsed); } html.minimenu .nxl-container { margin-left: var(--admin-nav-collapsed); } html.minimenu .smt-container { margin-left: var(--admin-nav-collapsed); } html.minimenu .smt-header-inner { padding: 0 var(--space-4); } @media (max-width: 991.98px) { .nxl-header { left: 0; } .nxl-container, .smt-container { margin-left: 0; } .header-wrapper, .smt-header-inner { padding: 0 var(--space-4); } .nxl-content, .smt-content { padding: var(--space-4); } .smt-page-header { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) 0; } .smt-page-header-left { gap: 2px; } } /* ══════════════════════════════════════════════════════════ 2B. LEGACY NXL HEADER COMPAT Covers remaining admin layout/header classes previously inherited from theme.min.css so the Blade layout can rely on theme.css only. ══════════════════════════════════════════════════════════ */ .nxl-user-dropdown { min-width: 280px; max-width: min(92vw, 320px); } .nxl-search-dropdown, .nxl-notifications-menu { min-width: min(92vw, 360px); max-width: min(92vw, 420px); } .nxl-head-link .nxl-h-badge, .nxl-h-badge { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-danger); color: #fff; font-size: 10px; font-weight: var(--weight-bold); line-height: 1; } .nxl-head-link .nxl-h-badge.dots, .nxl-h-badge.dots { min-width: 10px; width: 10px; height: 10px; padding: 0; border: 2px solid #fff; } .nxl-level-menu { position: relative; } .nxl-level-menu > .dropdown-menu, .nxl-level-menu > .nxl-h-dropdown { top: 0; left: calc(100% - 6px); margin-top: 0; } .nxl-level-menu:hover > .dropdown-menu, .nxl-level-menu:hover > .nxl-h-dropdown { display: block; } .nxl-drp-link, .nxl-lavel-mega-menu, .nxl-lavel-menu, .nxl-mega-menu, .nxl-header-search { position: relative; } .nxl-lavel-mega-menu-toggle, .nxl-lavel-mega-menu-open, .nxl-lavel-mega-menu-hide { display: inline-flex; align-items: center; justify-content: center; } .nxl-lavel-mega-menu-wrapper { display: flex; align-items: stretch; gap: var(--space-4); } .nxl-lavel-menu > .nxl-h-dropdown, .nxl-mega-menu > .nxl-h-dropdown { min-width: 280px; } .nxl-mega-menu > .nxl-h-dropdown { width: min(1100px, calc(100vw - 80px)); max-width: calc(100vw - 80px); } .nxl-mega-menu-sm > .nxl-h-dropdown, .nxl-h-dropdown.nxl-mega-menu-sm { width: min(420px, calc(100vw - 40px)); } .nxl-mega-menu-md > .nxl-h-dropdown, .nxl-h-dropdown.nxl-mega-menu-md { width: min(560px, calc(100vw - 40px)); } .nxl-mega-menu-lg > .nxl-h-dropdown, .nxl-h-dropdown.nxl-mega-menu-lg { width: min(760px, calc(100vw - 40px)); } .nxl-mega-menu-xl > .nxl-h-dropdown, .nxl-h-dropdown.nxl-mega-menu-xl { width: min(920px, calc(100vw - 40px)); } .nxl-mega-menu-xxl > .nxl-h-dropdown, .nxl-h-dropdown.nxl-mega-menu-xxl, .nxl-mega-menu-full > .nxl-h-dropdown, .nxl-h-dropdown.nxl-mega-menu-full { width: min(1200px, calc(100vw - 40px)); } .nxl-mega-menu-tabs { display: flex; flex-direction: column; gap: var(--space-2); min-width: 220px; padding-right: var(--space-4); border-right: 1px solid var(--color-border-subtle); } .nxl-mega-menu-tabs .nav-link { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); min-height: 42px; padding: 10px 14px; border: 0; border-radius: var(--radius-md); color: var(--color-text-secondary); background: transparent; } .nxl-mega-menu-tabs .nav-link:hover, .nxl-mega-menu-tabs .nav-link.active { color: var(--color-primary); background: var(--color-primary-light); } .nxl-mega-menu-tabs-content { flex: 1; min-width: 0; padding-left: var(--space-5); } .nxl-mega-menu-image { overflow: hidden; border-radius: var(--radius-lg); } .nxl-mega-menu-image img { display: block; width: 100%; height: auto; } .nxl-mega-menu-integrations, .nxl-mega-menu-authentication, .nxl-mega-menu-miscellaneous-features, .nxl-mega-menu-miscellaneous-services { row-gap: var(--space-4); } .nxl-mega-menu-miscellaneous { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--space-5); } .nxl-mega-menu-miscellaneous-tabs { display: flex; flex-direction: column; gap: var(--space-2); } .nxl-mega-menu-miscellaneous-tabs .nav-link { border-radius: var(--radius-md); color: var(--color-text-secondary); } .nxl-mega-menu-miscellaneous-tabs .nav-link:hover, .nxl-mega-menu-miscellaneous-tabs .nav-link.active { color: var(--color-primary); background: var(--color-primary-light); } .nxl-mega-menu-miscellaneous-content { min-width: 0; } @media (max-width: 1199.98px) { .nxl-mega-menu > .nxl-h-dropdown { width: min(960px, calc(100vw - 40px)); max-width: calc(100vw - 40px); } } @media (max-width: 991.98px) { .nxl-lavel-mega-menu-wrapper, .nxl-mega-menu-miscellaneous { display: block; } .nxl-mega-menu-tabs, .nxl-mega-menu-tabs-content, .nxl-mega-menu-miscellaneous-tabs, .nxl-mega-menu-miscellaneous-content { padding: 0; border: 0; } .nxl-mega-menu > .nxl-h-dropdown, .nxl-lavel-menu > .nxl-h-dropdown, .nxl-mega-menu-sm > .nxl-h-dropdown, .nxl-mega-menu-md > .nxl-h-dropdown, .nxl-mega-menu-lg > .nxl-h-dropdown, .nxl-mega-menu-xl > .nxl-h-dropdown, .nxl-mega-menu-xxl > .nxl-h-dropdown, .nxl-mega-menu-full > .nxl-h-dropdown, .nxl-h-dropdown.nxl-mega-menu-sm, .nxl-h-dropdown.nxl-mega-menu-md, .nxl-h-dropdown.nxl-mega-menu-lg, .nxl-h-dropdown.nxl-mega-menu-xl, .nxl-h-dropdown.nxl-mega-menu-xxl, .nxl-h-dropdown.nxl-mega-menu-full, .nxl-user-dropdown, .nxl-search-dropdown, .nxl-notifications-menu { width: min(calc(100vw - 24px), 560px); min-width: 0; max-width: min(calc(100vw - 24px), 560px); } .nxl-level-menu > .dropdown-menu, .nxl-level-menu > .nxl-h-dropdown { position: static; left: auto; } } /* Suppress number input spinners globally */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } /* Required field indicator */ label.required::after, span.required::after { content: "*"; color: var(--color-danger); margin-left: 2px; } /* Clickable helper */ .toggler { cursor: pointer; } span.toggler:hover { text-decoration: underline; } /* ══════════════════════════════════════════════════════════ 3. BUTTONS ══════════════════════════════════════════════════════════ */ /* ── Base ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-4); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-medium); line-height: 1; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; vertical-align: middle; user-select: none; transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); outline: none; } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* ── Sizes ──────────────────────────────────────────────── */ .btn-sm { height: 26px; padding: 0 var(--space-2); font-size: 11px; border-radius: var(--radius-xs); gap: 4px; } .btn-lg { height: 44px; padding: 0 var(--space-6); font-size: var(--text-md); border-radius: var(--radius-md); } .btn-icon { width: 36px; height: 36px; padding: 0; flex-shrink: 0; } .btn-icon.btn-sm { width: 30px; height: 30px; } .btn-icon.btn-lg { width: 44px; height: 44px; } /* ── Primary ────────────────────────────────────────────── */ .btn-primary { background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); border-color: var(--color-primary-dark); color: #fff; box-shadow: 0 1px 3px rgba(var(--color-primary-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, var(--color-primary-darker) 0%, var(--color-primary-dark) 100%); border-color: var(--color-primary-darker); color: #fff; box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-primary:active { background: var(--color-primary-darker); border-color: var(--color-primary-darker); box-shadow: none; } /* ── Secondary (teal) ──────────────────────────────────── */ .btn-secondary { background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 100%); border-color: var(--color-accent-dark); color: #fff; box-shadow: 0 1px 3px rgba(var(--color-accent-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-secondary:hover, .btn-secondary:focus { background: linear-gradient(135deg, #0c6480 0%, var(--color-accent-dark) 100%); border-color: #0c6480; color: #fff; box-shadow: 0 4px 10px rgba(var(--color-accent-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-secondary:active { background: #0c6480; border-color: #0c6480; box-shadow: none; } /* ── Outline primary ───────────────────────────────────── */ .btn-outline-primary { background: linear-gradient(180deg, #fff 0%, var(--color-primary-light) 100%); border-color: rgba(var(--color-primary-rgb), 0.35); color: var(--color-primary); box-shadow: 0 1px 2px rgba(var(--color-primary-rgb), 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary-dark); box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8); } /* ── Outline secondary ─────────────────────────────────── */ .btn-outline-secondary { background: linear-gradient(180deg, #fff 0%, var(--color-accent-light) 100%); border-color: rgba(var(--color-accent-rgb), 0.35); color: var(--color-accent); box-shadow: 0 1px 2px rgba(var(--color-accent-rgb), 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .btn-outline-secondary:hover, .btn-outline-secondary:focus { background: var(--color-accent-light); border-color: var(--color-accent-dark); color: var(--color-accent-dark); box-shadow: 0 2px 6px rgba(var(--color-accent-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8); } /* ── Outline danger ─────────────────────────────────────── */ .btn-outline-danger { background: linear-gradient(180deg, #fff 0%, var(--color-danger-bg) 100%); border-color: rgba(var(--color-danger-rgb), 0.35); color: var(--color-danger); box-shadow: 0 1px 2px rgba(var(--color-danger-rgb), 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .btn-outline-danger:hover, .btn-outline-danger:focus { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger-text); box-shadow: 0 2px 6px rgba(var(--color-danger-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8); } /* ── Ghost ─────────────────────────────────────────────── */ .btn-ghost { background: transparent; border-color: transparent; color: var(--color-text-secondary); } .btn-ghost:hover, .btn-ghost:focus { background: var(--color-bg-subtle); color: var(--color-text); } /* ── Danger ────────────────────────────────────────────── */ .btn-danger { background: linear-gradient(135deg, #dc2626 0%, var(--color-danger) 100%); border-color: #dc2626; color: #fff; box-shadow: 0 1px 3px rgba(var(--color-danger-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-danger:hover, .btn-danger:focus { background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%); border-color: #b91c1c; color: #fff; box-shadow: 0 4px 10px rgba(var(--color-danger-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); } /* ── Success ───────────────────────────────────────────── */ .btn-success { background: linear-gradient(135deg, #059669 0%, var(--color-success) 100%); border-color: #059669; color: #fff; box-shadow: 0 1px 3px rgba(var(--color-success-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-success:hover, .btn-success:focus { background: linear-gradient(135deg, #047857 0%, #059669 100%); border-color: #047857; color: #fff; box-shadow: 0 4px 10px rgba(var(--color-success-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); } /* ── Warning ───────────────────────────────────────────── */ .btn-warning { background: linear-gradient(135deg, #d97706 0%, var(--color-warning) 100%); border-color: #d97706; color: #fff; box-shadow: 0 1px 3px rgba(var(--color-warning-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .btn-warning:hover, .btn-warning:focus { background: linear-gradient(135deg, #b45309 0%, #d97706 100%); border-color: #b45309; color: #fff; box-shadow: 0 4px 10px rgba(var(--color-warning-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18); } /* ── Light ─────────────────────────────────────────────── */ .btn-light { background: var(--color-bg-subtle); border-color: var(--color-border); color: var(--color-text-secondary); } .btn-light:hover, .btn-light:focus { background: var(--color-border-subtle); border-color: var(--color-border); color: var(--color-text); } /* ══════════════════════════════════════════════════════════ 4. FORM CONTROLS ══════════════════════════════════════════════════════════ */ .form-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); margin-bottom: var(--space-1); text-transform: uppercase; letter-spacing: 0.04em; } /* ── Shared base for input + select ───────────────────── */ .form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select { width: 100%; height: 38px; padding: 0 var(--space-3); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-normal); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); outline: none; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); appearance: none; -webkit-appearance: none; } .form-control::placeholder, input::placeholder { color: var(--color-text-muted); } .form-control:hover, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover, select:hover { border-color: rgba(var(--color-primary-rgb), 0.5); } .form-control:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.14); outline: none; } /* Disabled */ .form-control:disabled, input:disabled, select:disabled { background: var(--color-bg-subtle); color: var(--color-text-disabled); cursor: not-allowed; opacity: 1; border-color: var(--color-border-subtle); } /* Select chevron */ select { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%238299AB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; } select option { background: var(--color-navy); color: #fff; } /* Textarea */ textarea.form-control { height: auto; min-height: 90px; padding: var(--space-3); resize: vertical; line-height: 1.6; } /* Validation states */ input:invalid:not(:placeholder-shown):not(:focus) { border-color: var(--color-danger); } input:valid:not(:placeholder-shown):not([type="password"]) { border-color: var(--color-success); } .validation-error { border-color: var(--color-danger) !important; } .validation-success { border-color: var(--color-success) !important; } /* Input group */ .input-group .form-control, .input-group input { border-radius: 0; } .input-group .form-control:first-child, .input-group input:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .input-group .form-control:last-child, .input-group input:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .input-group-text { background: var(--color-bg-subtle); border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-base); padding: 0 var(--space-3); display: flex; align-items: center; } /* ── Checkboxes & Radios ────────────────────────────────── */ input[type="checkbox"], input[type="radio"] { width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; } /* ══════════════════════════════════════════════════════════ 5. CARDS ══════════════════════════════════════════════════════════ */ .card { background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; } .card-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface); gap: var(--space-3); } .card-header-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text); margin: 0; } .card-body { padding: var(--space-5); } .card-footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border-subtle); background: var(--color-bg); } /* Hover lift */ .card-hover { transition: transform var(--anim-base) var(--ease), box-shadow var(--anim-base) var(--ease); } .card-hover:hover { transform: translateY(var(--hover-lift)); box-shadow: var(--shadow-hover); } /* ══════════════════════════════════════════════════════════ 6. BADGES & STATUS PILLS ══════════════════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: var(--text-xs); font-weight: var(--weight-semibold); border-radius: var(--radius-pill); line-height: 1.5; white-space: nowrap; letter-spacing: 0.02em; } /* Bootstrap .badge overrides — map to our tokens */ .badge.bg-primary, .badge-primary { background: rgba(var(--color-primary-rgb), 0.12) !important; color: var(--color-primary-dark) !important; } .badge.bg-success, .badge-success { background: var(--color-success-bg) !important; color: var(--color-success-text) !important; } .badge.bg-warning, .badge-warning { background: var(--color-warning-bg) !important; color: var(--color-warning-text) !important; } .badge.bg-danger, .badge-danger { background: var(--color-danger-bg) !important; color: var(--color-danger-text) !important; } .badge.bg-info, .badge-info { background: var(--color-info-bg) !important; color: var(--color-info-text) !important; } .badge.bg-secondary, .badge-secondary { background: rgba(var(--color-navy-rgb), 0.1) !important; color: var(--color-navy) !important; } .badge.bg-light, .badge-light { background: var(--color-bg-subtle) !important; color: var(--color-text-secondary) !important; } /* Solid filled variants */ .badge-solid-primary { background: var(--color-primary) !important; color: #fff !important; } .badge-solid-success { background: var(--color-success) !important; color: #fff !important; } .badge-solid-warning { background: var(--color-warning) !important; color: #fff !important; } .badge-solid-danger { background: var(--color-danger) !important; color: #fff !important; } .badge-solid-navy { background: var(--color-navy) !important; color: #fff !important; } /* ── Workflow status badges ─────────────────────────────── */ /* Use these consistently across ALL tables and detail views */ .badge-assigned { background: var(--color-info-bg) !important; color: var(--color-info-text) !important; } .badge-in-progress { background: var(--color-purple-bg) !important; color: var(--color-purple-text) !important; } .badge-waiting { background: var(--color-warning-bg) !important; color: var(--color-warning-text) !important; } .badge-ready-qc { background: var(--color-cyan-bg) !important; color: var(--color-cyan-text) !important; } .badge-approved { background: var(--color-success-bg) !important; color: var(--color-success-text) !important; } .badge-rejected { background: var(--color-danger-bg) !important; color: var(--color-danger-text) !important; } .badge-completed { background: var(--color-success-bg) !important; color: var(--color-success-text) !important; font-weight: var(--weight-bold) !important; } .badge-pending { background: var(--color-warning-bg) !important; color: var(--color-warning-text) !important; } .badge-paid { background: var(--color-success-bg) !important; color: var(--color-success-text) !important; } .badge-overdue { background: var(--color-danger-bg) !important; color: var(--color-danger-text) !important; } .badge-resolved { background: var(--color-success-bg) !important; color: var(--color-success-text) !important; } .badge-inactive { background: var(--color-bg-subtle) !important; color: var(--color-text-muted) !important; } /* ── Role badges ────────────────────────────────────────── */ .badge-role-superadmin { background: rgba(124, 58, 237, 0.12) !important; color: #5b21b6 !important; } .badge-role-operations { background: rgba(37, 99, 235, 0.12) !important; color: #1d4ed8 !important; } .badge-role-qc { background: rgba(8, 145, 178, 0.12) !important; color: #0e7490 !important; } .badge-role-support { background: rgba(217, 119, 6, 0.12) !important; color: #92400e !important; } .badge-role-accounts { background: rgba(22, 163, 74, 0.12) !important; color: #065f46 !important; } .badge-role-mailroom { background: rgba(107, 114, 128, 0.12) !important; color: #374151 !important; } /* ══════════════════════════════════════════════════════════ 7. PAGE HEADER ══════════════════════════════════════════════════════════ */ .page-header-area { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--color-surface); border-bottom: 1px solid var(--color-border-subtle); margin-bottom: var(--space-5); } .page-header-area h4, .page-header-area h5 { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--color-text); margin: 0; } .page-header-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } /* Breadcrumb */ .breadcrumb { margin: 0; padding: 0; font-size: var(--text-sm); color: var(--color-text-muted); } .breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-muted); } .breadcrumb-item.active { color: var(--color-text-secondary); } .breadcrumb-item a { color: var(--color-primary); text-decoration: none; } .breadcrumb-item a:hover { color: var(--color-primary-dark); } /* ══════════════════════════════════════════════════════════ 8. TABLES (generic — supplement to datatable.css) ══════════════════════════════════════════════════════════ */ .table { font-size: var(--text-base); color: var(--color-text); } .table th { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-bg-subtle); border-color: var(--color-border); padding: 10px 14px; } .table td { border-color: var(--color-border-subtle); padding: 10px 14px; vertical-align: middle; } .table tbody tr:hover td { background: rgba(var(--color-primary-rgb), 0.04); } /* ══════════════════════════════════════════════════════════ 9. MODALS ══════════════════════════════════════════════════════════ */ .modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; } .modal-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface); } .modal-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text); } .modal-body { padding: var(--space-5); } .modal-footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border-subtle); background: var(--color-bg); gap: var(--space-2); } .btn-close { opacity: 0.4; transition: opacity var(--duration) var(--ease); } .btn-close:hover { opacity: 0.8; } /* ══════════════════════════════════════════════════════════ 10. SELECT2 THEMING ══════════════════════════════════════════════════════════ */ .select2-container--default .select2-selection--single { height: 38px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .select2-container--default .select2-selection--single:hover { border-color: rgba(var(--color-primary-rgb), 0.5); } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.14); outline: none; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; padding-left: var(--space-3); color: var(--color-text); font-size: var(--text-base); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; } .select2-dropdown { border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); font-size: var(--text-base); } .select2-container--default .select2-results__option--highlighted { background: var(--color-primary); } .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--color-primary-light); color: var(--color-primary-dark); } .select2-search--dropdown .select2-search__field { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 10px; font-size: var(--text-sm); } .select2-search--dropdown .select2-search__field:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.14); outline: none; } /* Multiple select */ .select2-container--default .select2-selection--multiple { min-height: 38px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); } .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--color-primary-light); border: 1px solid rgba(var(--color-primary-rgb), 0.2); border-radius: var(--radius-xs); color: var(--color-primary-dark); font-size: var(--text-xs); font-weight: var(--weight-medium); padding: 2px 8px; } /* ══════════════════════════════════════════════════════════ 11. TOASTR THEMING ══════════════════════════════════════════════════════════ */ .toast-container .ngx-toastr, #toast-container > div { border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-md) !important; font-family: var(--font-sans); font-size: var(--text-sm); padding: 12px 16px 12px 52px; } #toast-container > .toast-success { background-color: var(--color-success) !important; } #toast-container > .toast-error { background-color: var(--color-danger) !important; } #toast-container > .toast-warning { background-color: var(--color-warning) !important; } #toast-container > .toast-info { background-color: var(--color-primary) !important; } /* ══════════════════════════════════════════════════════════ 12. SWEETALERT2 THEMING ══════════════════════════════════════════════════════════ */ .swal2-popup { border-radius: var(--radius-lg) !important; font-family: var(--font-sans) !important; box-shadow: var(--shadow-xl) !important; } .swal2-title { font-size: var(--text-2xl) !important; font-weight: var(--weight-semibold) !important; color: var(--color-text) !important; } .swal2-html-container { font-size: var(--text-md) !important; color: var(--color-text-secondary) !important; } .swal2-confirm.swal2-styled { background: var(--color-primary) !important; border-radius: var(--radius-sm) !important; font-size: var(--text-base) !important; font-weight: var(--weight-medium) !important; padding: 9px 22px !important; box-shadow: 0 1px 3px rgba(var(--color-primary-rgb), 0.3) !important; } .swal2-confirm.swal2-styled:hover { background: var(--color-primary-dark) !important; } .swal2-cancel.swal2-styled { background: var(--color-bg-subtle) !important; color: var(--color-text-secondary) !important; border-radius: var(--radius-sm) !important; font-size: var(--text-base) !important; font-weight: var(--weight-medium) !important; padding: 9px 22px !important; } .swal2-cancel.swal2-styled:hover { background: var(--color-border) !important; color: var(--color-text) !important; } .swal2-deny.swal2-styled { background: var(--color-danger) !important; border-radius: var(--radius-sm) !important; font-size: var(--text-base) !important; padding: 9px 22px !important; } /* ══════════════════════════════════════════════════════════ 13. NAVIGATION — sidebar + header Overrides nxl-* classes from theme.min.css via cascade. Scoped under .app-navigation-dark to match vendor specificity. DO NOT rename nxl-* class names — vendors.min.js depends on them. ══════════════════════════════════════════════════════════ */ /* ── Sidebar container ──────────────────────────────────── */ .nxl-navigation { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: var(--admin-nav-width) !important; z-index: var(--z-sidebar) !important; background: var(--color-navy) !important; border-right: 1px solid var(--color-navy-dark) !important; box-shadow: 0 18px 42px rgba(var(--color-navy-rgb), 0.18) !important; overflow: hidden !important; transition: width var(--duration) var(--ease), transform var(--duration) var(--ease) !important; } .nxl-navigation .navbar-wrapper { display: flex !important; flex-direction: column !important; height: 100% !important; } /* ── Logo header area ───────────────────────────────────── */ .nxl-navigation .m-header { display: flex !important; align-items: center !important; justify-content: center !important; height: 64px !important; padding: 0 16px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)) !important; position: relative !important; z-index: 3 !important; flex-shrink: 0 !important; overflow: hidden !important; } .nxl-navigation .m-header .b-brand { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-height: 100% !important; padding: 0 !important; text-decoration: none !important; position: relative !important; z-index: 1 !important; } .nxl-navigation .m-header .b-brand::after { content: ""; position: absolute; inset: auto 18px 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); pointer-events: none; } html:not(.minimenu) .nxl-navigation .m-header .logo-lg { height: 80px !important; width: auto !important; max-width: 180px !important; display: block !important; object-fit: contain !important; filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18)); } /* ── Scrollable nav area ────────────────────────────────── */ .nxl-navigation .navbar-content { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; padding: var(--space-3) 0 var(--space-4) !important; background: transparent !important; scrollbar-width: none !important; } .nxl-navigation .navbar-content::-webkit-scrollbar { display: none !important; } /* ── Nav list ───────────────────────────────────────────── */ .nxl-navigation .nxl-navbar { padding: 0 !important; margin: 0 !important; list-style: none !important; } /* ── Nav item base ──────────────────────────────────────── */ .nxl-navigation .nxl-item { display: block !important; margin: 1px 0 !important; } /* ── Nav link ───────────────────────────────────────────── */ .nxl-navigation .nxl-link { display: flex !important; align-items: center !important; gap: var(--space-2) !important; margin: 0 var(--space-2) !important; padding: 9px var(--space-3) !important; border-radius: var(--radius-sm) !important; color: #fff !important; font-size: var(--text-base) !important; font-weight: var(--weight-normal) !important; text-decoration: none !important; transition: background var(--duration) var(--ease), color var(--duration) var(--ease) !important; white-space: nowrap !important; overflow: hidden !important; border-left: 2px solid transparent !important; } .nxl-navigation .nxl-link:hover { background: rgba(255, 255, 255, 0.07) !important; color: #fff !important; } /* Active link — teal accent on navy sidebar */ .nxl-navigation .nxl-item.active > .nxl-link, .nxl-navigation .nxl-link.active { background: rgba(255, 255, 255, 0.10) !important; color: #fff !important; border-left-color: var(--color-accent) !important; font-weight: var(--weight-medium) !important; } /* Active icon — full brightness */ .nxl-navigation .nxl-item.active > .nxl-link .nxl-micon i, .nxl-navigation .nxl-link.active .nxl-micon i { opacity: 1 !important; color: #fff !important; } /* ── Icons ──────────────────────────────────────────────── */ .nxl-navigation .nxl-micon { display: flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; flex-shrink: 0 !important; } .nxl-navigation .nxl-micon i { font-size: 15px !important; line-height: 1 !important; } /* ── Chevron ────────────────────────────────────────────── */ .nxl-navigation .nxl-arrow { margin-left: auto !important; transition: transform var(--duration) var(--ease) !important; opacity: 0.5 !important; } .nxl-navigation .nxl-item.nxl-trigger > .nxl-link .nxl-arrow { transform: rotate(90deg) !important; opacity: 1 !important; } /* ── Section label items (QC, Support) ─────────────────── */ .nxl-navigation .nxl-item .nxl-mtext.text-uppercase, .nxl-navigation .nxl-nav-label .nxl-mtext { font-size: var(--text-xs) !important; font-weight: var(--weight-semibold) !important; color: rgba(255, 255, 255, 0.3) !important; letter-spacing: 0.08em !important; padding: var(--space-4) var(--space-4) var(--space-1) !important; display: block !important; cursor: default !important; pointer-events: none !important; } /* ── Submenu ────────────────────────────────────────────── */ .nxl-navigation .nxl-submenu { background: transparent !important; border-radius: 0 !important; margin: 0 !important; padding: 2px 0 4px !important; list-style: none !important; overflow: visible !important; } .nxl-navigation .nxl-submenu .nxl-link { padding: 7px var(--space-3) 7px 42px !important; font-size: var(--text-sm) !important; color: rgba(255, 255, 255, 0.5) !important; border-left: 2px solid transparent !important; margin: 1px var(--space-2) !important; border-radius: var(--radius-sm) !important; background: transparent !important; } .nxl-navigation .nxl-submenu .nxl-link:hover { background: transparent !important; color: rgba(255, 255, 255, 0.85) !important; border-left-color: transparent !important; } .nxl-navigation .nxl-submenu .nxl-item.active > .nxl-link, .nxl-navigation .nxl-submenu .nxl-link.active { background: transparent !important; color: var(--color-accent) !important; border-left-color: var(--color-accent) !important; } /* ── User strip ─────────────────────────────────────────── */ .nxl-navigation .sidebar-user-card { display: flex !important; align-items: center !important; flex-shrink: 0 !important; gap: var(--space-2) !important; padding: var(--space-3) var(--space-3) !important; margin: var(--space-2) var(--space-2) var(--space-3) !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: var(--radius-md) !important; } .nxl-navigation .sidebar-user-avatar { width: 34px !important; height: 34px !important; flex-shrink: 0 !important; object-fit: cover !important; border-radius: 50% !important; } .nxl-navigation .sidebar-user-info { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } .nxl-navigation .sidebar-user-name { font-size: var(--text-sm) !important; font-weight: var(--weight-semibold) !important; color: rgba(255, 255, 255, 0.90) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; } .nxl-navigation .sidebar-user-role { font-size: var(--text-xs) !important; color: var(--color-accent) !important; display: block !important; } .nxl-navigation .sidebar-logout-btn { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; width: 30px !important; height: 30px !important; border-radius: var(--radius-sm) !important; color: rgba(255, 255, 255, 0.35) !important; text-decoration: none !important; transition: background var(--duration) var(--ease), color var(--duration) var(--ease) !important; } .nxl-navigation .sidebar-logout-btn:hover { background: rgba(239, 68, 68, 0.15) !important; color: var(--color-danger) !important; } .nxl-navigation .sidebar-logout-btn i { font-size: 15px !important; line-height: 1 !important; } /* ── Mini mode (sidebar collapsed to icons) ─────────────── */ html.minimenu .nxl-navigation .nxl-mtext, html.minimenu .nxl-navigation .nxl-arrow { display: none !important; } html.minimenu .nxl-navigation { width: var(--admin-nav-collapsed) !important; overflow: visible !important; } html.minimenu .nxl-navigation:hover { width: var(--admin-nav-collapsed) !important; } html.minimenu .nxl-navigation .nxl-submenu, html.minimenu .nxl-navigation .nxl-item.nxl-trigger > .nxl-submenu, html.minimenu .nxl-navigation:hover .nxl-submenu, html.minimenu .nxl-navigation:hover .nxl-item.nxl-trigger > .nxl-submenu { display: none !important; } html.minimenu .nxl-navigation .nxl-link { justify-content: center !important; padding: 9px 0 !important; margin: 1px var(--space-1) !important; } html.minimenu .nxl-navigation .nxl-micon { width: auto !important; } html.minimenu .nxl-navigation .sidebar-user-card { display: none !important; } /* Logo in mini mode — smaller fixed height, centred */ html.minimenu .nxl-navigation .m-header .logo-lg { display: block !important; height: 24px !important; width: auto !important; max-width: 42px !important; object-fit: contain !important; margin: 0 auto !important; filter: brightness(0) invert(1) !important; } html.minimenu .nxl-navigation .m-header { height: 48px !important; padding: 0 4px !important; flex-shrink: 0 !important; position: relative !important; z-index: 3 !important; transform: none !important; background: var(--color-navy) !important; } html.minimenu .nxl-navigation .m-header .b-brand { padding: 0 !important; } html.minimenu .nxl-navigation .m-header .b-brand::after { display: none !important; } /* Suppress vendor's full-panel hover expansion — mini-nav.js handles tooltips */ html.minimenu .nxl-navigation:hover .navbar-content { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; background: transparent !important; border: none !important; box-shadow: none !important; margin-top: 0 !important; padding-top: var(--space-3) !important; z-index: 1 !important; inset: auto !important; transform: none !important; } /* Keep text/arrows hidden even on hover — tooltip shows them */ html.minimenu .nxl-navigation:hover .nxl-mtext, html.minimenu .nxl-navigation:hover .nxl-arrow, html.minimenu .nxl-navigation:hover .sidebar-user-card { display: none !important; } html.minimenu .nxl-navigation:hover .nxl-link { justify-content: center !important; } @media (max-width: 991.98px) { .nxl-navigation { transform: translateX(-100%) !important; width: min(86vw, 320px) !important; box-shadow: none !important; z-index: 1050 !important; /* above header (1030) and Bootstrap dropdowns */ } /* Vendor JS (vendors.min.js) adds this class on #mobile-collapse click */ .nxl-navigation.mob-navigation-active { transform: translateX(0) !important; box-shadow: 8px 0 32px rgba(0, 0, 0, 0.28) !important; } /* Suppress the vendor's injected overlay inside the sidebar — our JS adds a body-level backdrop instead */ .nxl-navigation .nxl-menu-overlay { display: none !important; } /* Show the mobile close button + fix header alignment */ .nxl-navigation .mob-close-btn { display: flex !important; } .nxl-navigation .m-header { justify-content: space-between !important; } } /* Body-level mobile backdrop (added/removed by velox-init.js) */ .smt-mob-backdrop { display: none; } @media (max-width: 991.98px) { .smt-mob-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1040; /* between header(1030) and sidebar(1050) */ cursor: pointer; animation: smt-backdrop-in 180ms var(--ease) forwards; } } @keyframes smt-backdrop-in { from { opacity: 0; } to { opacity: 1; } } /* Mobile close button — hidden on desktop, shown via media query above */ .nxl-navigation .mob-close-btn { display: none; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); color: rgba(255, 255, 255, 0.65); cursor: pointer; flex-shrink: 0; transition: background var(--duration) var(--ease), color var(--duration) var(--ease); } .nxl-navigation .mob-close-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } /* ── Mini nav tooltip (mini-nav.js) ─────────────────────── */ .mini-nav-tooltip { position: fixed; z-index: 9999; background: var(--color-navy); border: 1px solid var(--color-navy-dark); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 160px; padding: var(--space-2) 0; pointer-events: auto; opacity: 0; visibility: hidden; transform: translateX(-4px); transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), visibility var(--duration) var(--ease); } .mini-nav-tooltip.visible { opacity: 1; visibility: visible; transform: translateX(0); } .mnt-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: rgba(255, 255, 255, 0.90); padding: var(--space-2) var(--space-3) var(--space-1); white-space: nowrap; } .mnt-list { list-style: none; margin: var(--space-1) 0 0; padding: var(--space-1) 0 0; border-top: 1px solid rgba(255, 255, 255, 0.07); } .mnt-sub-link { display: block; padding: 7px var(--space-4); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.60); text-decoration: none; white-space: nowrap; transition: background var(--duration) var(--ease), color var(--duration) var(--ease); } .mnt-sub-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; } .mnt-sub-link.active { color: var(--color-accent); } /* ══════════════════════════════════════════════════════════ 14. UTILITY CLASSES ══════════════════════════════════════════════════════════ */ /* Colors */ .text-primary { color: var(--color-primary) !important; } .text-navy { color: var(--color-navy) !important; } .text-muted { color: var(--color-text-muted) !important; } .text-secondary { color: var(--color-text-secondary) !important; } .text-success { color: var(--color-success) !important; } .text-warning { color: var(--color-warning) !important; } .text-danger { color: var(--color-danger) !important; } .bg-primary-light { background: var(--color-primary-light) !important; } .bg-surface { background: var(--color-surface) !important; } .bg-subtle { background: var(--color-bg-subtle) !important; } /* Brand helper (replaces old .bg-theme) */ .bg-theme { background: var(--color-primary) !important; } .bg-theme-soft { background: var(--color-primary-light) !important; } .text-theme { color: var(--color-primary) !important; } /* Dividers */ .divider { border: none; border-top: 1px solid var(--color-border-subtle); margin: var(--space-4) 0; } /* Focus ring */ .focus-ring:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Profile */ /* ═══════════════════════════════════════════════════ 15. PROFILE PAGE ═══════════════════════════════════════════════════ */ .profile-page { display: flex; flex-direction: column; gap: var(--space-5); } /* ── Hero ───────────────────────────────────────── */ .profile-hero { border: 1px solid rgba(var(--color-primary-rgb), 0.08); background: radial-gradient(ellipse at top right, rgba(var(--color-primary-rgb), 0.08) 0%, transparent 55%), linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%); overflow: hidden; } .profile-hero__inner { display: flex; align-items: center; gap: 28px; padding: clamp(20px, 3vw, 36px); } /* Avatar */ .profile-avatar-wrap { flex-shrink: 0; } .profile-avatar { position: relative; width: 100px; height: 100px; border-radius: 24px; background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.14), rgba(var(--color-accent-rgb), 0.12)); padding: 3px; box-shadow: 0 4px 20px rgba(var(--color-primary-rgb), 0.18); } .profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 21px; display: block; } .profile-avatar-overlay { position: absolute; inset: 3px; border-radius: 21px; background: rgba(15, 23, 60, 0.58); backdrop-filter: blur(2px); border: none; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; opacity: 0; transition: opacity 0.18s ease; cursor: pointer; } .profile-avatar-overlay i { font-size: 20px; } .profile-avatar:hover .profile-avatar-overlay { opacity: 1; } /* Hero meta */ .profile-hero__meta { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .profile-hero__eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); font-weight: var(--weight-semibold); margin: 0; } .profile-hero__name { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 700; color: var(--color-text); line-height: 1.1; } .profile-hero__email { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); } .profile-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .profile-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary); font-size: 12px; font-weight: var(--weight-medium); } .profile-chip i { font-size: 13px; } .profile-chip.chip--success { background: var(--color-success-bg); color: var(--color-success-text); } .profile-chip.chip--warning { background: var(--color-warning-bg); color: var(--color-warning-text); } .profile-chip.chip--muted { background: var(--color-bg-subtle); color: var(--color-text-muted); } /* ── pcard (sidebar + right panel) ─────────────── */ .pcard { border-radius: var(--radius-lg); border: 1px solid var(--color-border-subtle); background: var(--color-surface); overflow: hidden; } .pcard__head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 0; } .pcard__head-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 17px; } .pcard__head-icon--accent { background: rgba(var(--color-accent-rgb), 0.10); color: var(--color-accent); } .pcard__head h3 { margin: 0 0 3px; font-size: 14px; font-weight: var(--weight-semibold); color: var(--color-text); } .pcard__head p { margin: 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.4; } /* Row list */ .pcard__rows { display: flex; flex-direction: column; padding: 14px 20px 16px; gap: 0; } .pcard__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--color-border-subtle); font-size: 13px; } .pcard__row:last-child { border-bottom: none; } .pcard__row span { color: var(--color-text-muted); flex-shrink: 0; } .pcard__row strong { color: var(--color-text); font-weight: var(--weight-medium); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Address block */ .pcard__address { display: flex; align-items: flex-start; gap: 8px; margin: 0 20px 18px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-bg-subtle); font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; } .pcard__address i { color: var(--color-text-muted); font-size: 15px; margin-top: 2px; flex-shrink: 0; } /* Security list */ .pcard__security-list { display: flex; flex-direction: column; padding: 10px 20px 18px; gap: 0; } .psec-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border-subtle); } .psec-item:last-child { border-bottom: none; } .psec-item__info { display: flex; flex-direction: column; gap: 2px; } .psec-item__label { font-size: 13px; font-weight: var(--weight-medium); color: var(--color-text); } .psec-item__desc { font-size: 11px; color: var(--color-text-muted); } /* Toggle switch */ .psec-toggle { background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0; } .psec-toggle__track { display: flex; align-items: center; width: 42px; height: 24px; border-radius: 999px; background: var(--color-border); padding: 2px; transition: background 0.2s ease; } .psec-toggle__track.is-on { background: var(--color-primary); } .psec-toggle__thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.18); transition: transform 0.2s ease; } .psec-toggle__track.is-on .psec-toggle__thumb { transform: translateX(18px); } /* Form body */ .pcard__form-body { padding: 20px 20px 0; flex: 1; } .pcard__notice { display: flex; align-items: flex-start; gap: 8px; padding: 11px 14px; border-radius: var(--radius-md); background: rgba(var(--color-primary-rgb), 0.04); border: 1px solid rgba(var(--color-primary-rgb), 0.09); color: var(--color-text-secondary); font-size: 12.5px; line-height: 1.55; margin-bottom: 20px; } .pcard__notice i { color: var(--color-primary); font-size: 15px; margin-top: 1px; flex-shrink: 0; } .pcard__section-label { font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 10px; } .pcard__form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; margin-top: 24px; border-top: 1px solid var(--color-border-subtle); background: rgba(var(--color-primary-rgb), 0.02); } .pcard__form-footer p { margin: 0; font-size: 12px; color: var(--color-text-muted); } @media (max-width: 991.98px) { .profile-hero__inner { flex-direction: column; align-items: flex-start; } .pcard__form-footer { flex-direction: column; align-items: stretch; } .pcard__form-footer .btn { width: 100%; } } /* Transitions */ .transition-base { transition: all var(--anim-base) var(--ease); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn var(--anim-slow) var(--ease-out); } /* Icon hover */ .icon-hover { transition: transform var(--anim-base) var(--ease); } .icon-hover:hover, .card-hover:hover .icon-hover { transform: scale(var(--hover-zoom)); } /* Scrollbar (webkit) */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-pill); } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--color-navy-rgb), 0.25); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } /* ── AjaxDrawer offcanvas z-index fix ──────────────────────── Bootstrap modal-backdrop is 1050; the offcanvas default is 1045. Pin the drawer above the modal-backdrop so it never looks dull behind a stale or concurrent modal overlay. ────────────────────────────────────────────────────────────── */ #AjaxDrawer { z-index: 1056 !important; } /* ── Outlined badges (site-wide) ────────────────────────────── All badges get a border matching their text color for the clean outlined look across admin, client and provider. ────────────────────────────────────────────────────────────── */ .badge { border: 1.5px solid currentColor !important; font-weight: 600; letter-spacing: 0.01em; }