/* ============================================================ RX AssetFlow — Design System Aesthetic: modern dark navy. Deep navy surfaces, refined sans type, a luminous sky/indigo accent, soft rounded corners, subtle borders, layered elevation. Polished SaaS dashboard feel. RTL-aware. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* navy surface ramp */ --navy-900: #0b1220; /* app background */ --navy-850: #0f1729; /* deep panels */ --navy-800: #131c30; /* sidebar */ --navy-750: #18233c; /* cards */ --navy-700: #1e2c49; /* raised / hover */ --navy-600: #273a5e; /* borders strong */ --navy-500: #36507f; /* subtle accents */ --line: #233149; /* hairline border */ --line-soft: #1c2740; --text: #eef2f9; /* primary text */ --text-soft: #aeb9cd; /* secondary */ --text-faint: #6f7d96; /* tertiary / hints */ /* accent — luminous sky→indigo */ --accent: #4f8cff; --accent-bright: #6ea3ff; --accent-press: #3d77e6; --accent-soft: rgba(79,140,255,.14); --accent-ring: rgba(79,140,255,.35); /* status hues (muted, jewel-toned for dark bg) */ --ok: #34d399; --ok-soft: rgba(52,211,153,.15); --info: #60a5fa; --info-soft: rgba(96,165,250,.15); --warn: #fbbf24; --warn-soft: rgba(251,191,36,.15); --danger: #f87171; --danger-soft: rgba(248,113,113,.15); --radius: 8px; --radius-lg: 14px; --radius-xl: 20px; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 24px 60px rgba(0,0,0,.5); --glow: 0 0 0 1px rgba(79,140,255,.25), 0 8px 30px rgba(79,140,255,.18); --display: 'Sora', system-ui, sans-serif; --body: 'Plus Jakarta Sans', system-ui, sans-serif; --mono: 'JetBrains Mono', monospace; --sidebar-w: 272px; } /* =========================================================== LIGHT THEME — overrides the surface/text/shadow variables. The "navy-*" names are kept (so no rules change); only their values flip to a light palette. Toggled via . =========================================================== */ [data-theme="light"] { --navy-900: #eef1f6; /* app background */ --navy-850: #ffffff; /* deep panels / inputs */ --navy-800: #f3f5f9; /* sidebar */ --navy-750: #ffffff; /* cards */ --navy-700: #eef1f6; /* raised / hover */ --navy-600: #d4dbe6; /* borders strong */ --navy-500: #aab4c4; /* subtle accents */ --line: #e2e7ef; /* hairline border */ --line-soft: #edf0f5; --text: #1a2233; /* primary text */ --text-soft: #4a5568; /* secondary */ --text-faint: #8a94a6; /* tertiary / hints */ --accent: #2f6fed; --accent-bright: #4f8cff; --accent-press: #2559c9; --accent-soft: rgba(47,111,237,.10); --accent-ring: rgba(47,111,237,.28); /* status hues tuned for light bg (darker text on soft tint) */ --ok: #0f9d58; --ok-soft: rgba(15,157,88,.12); --info: #2563eb; --info-soft: rgba(37,99,235,.12); --warn: #b7791f; --warn-soft: rgba(183,121,31,.14); --danger: #dc2626; --danger-soft: rgba(220,38,38,.10); --shadow-sm: 0 1px 2px rgba(20,30,55,.06); --shadow: 0 8px 24px rgba(20,30,55,.08); --shadow-lg: 0 24px 60px rgba(20,30,55,.16); --glow: 0 0 0 1px rgba(47,111,237,.2), 0 8px 30px rgba(47,111,237,.14); } /* Light theme: the sidebar follows the light palette. Its surface adapts via the navy-* variables; here we fix the few hardcoded-white text/logo spots so they stay legible on a light sidebar. */ [data-theme="light"] .sidebar__brand h1 { color: var(--text); } [data-theme="light"] .nav__item:hover { color: var(--text); } [data-theme="light"] .nav__item.active { color: var(--accent-press); } /* Lighten the ambient background gradients in light mode */ [data-theme="light"] body { background-image: radial-gradient(1100px 600px at 78% -8%, rgba(47,111,237,.07), transparent 60%), radial-gradient(900px 500px at -5% 8%, rgba(99,102,241,.05), transparent 55%); } /* Translucent topbar tuned for light */ [data-theme="light"] .topbar { background: rgba(255,255,255,.72); } /* Content-area hover states that previously used white text on a dark hover now sit on a light hover surface — switch their text to the theme color. */ [data-theme="light"] .pagination a:hover, [data-theme="light"] .combobox__opt:hover { color: var(--text); } /* Auth page background for light mode */ [data-theme="light"] .auth-wrap { background: radial-gradient(900px 500px at 20% 15%, rgba(47,111,237,.10), transparent 55%), radial-gradient(800px 500px at 85% 85%, rgba(99,102,241,.08), transparent 55%), var(--navy-900); } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--body); background: var(--navy-900); color: var(--text); line-height: 1.55; font-size: 15px; min-height: 100vh; -webkit-font-smoothing: antialiased; background-image: radial-gradient(1100px 600px at 78% -8%, rgba(79,140,255,.10), transparent 60%), radial-gradient(900px 500px at -5% 8%, rgba(99,102,241,.08), transparent 55%); background-attachment: fixed; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font-family: inherit; font-size: inherit; } ::selection { background: var(--accent-soft); color: #fff; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--navy-600); border-radius: 100px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--navy-500); background-clip: content-box; } /* ---------- Layout shell ---------- */ .shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: linear-gradient(180deg, var(--navy-800), var(--navy-850)); border-inline-end: 1px solid var(--line); position: fixed; inset-block: 0; inset-inline-start: 0; display: flex; flex-direction: column; z-index: 40; } .sidebar__brand { padding: 22px 22px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 13px; } .sidebar__logo { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #0a0a0a; box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); } .sidebar__logo img { width: 100%; height: 100%; object-fit: contain; padding: 7px; } .sidebar__brand h1 { font-family: var(--display); font-weight: 800; font-size: 19px; color: #fff; letter-spacing: -.02em; line-height: 1; } .sidebar__brand span { font-size: 10.5px; color: var(--text-faint); letter-spacing: .18em; text-transform: uppercase; font-weight: 600; } .nav { padding: 14px 14px; overflow-y: auto; flex: 1; } /* collapsible group header (button) */ .nav__group { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent; border: 0; cursor: pointer; padding: 16px 12px 8px; transition: color .15s; } .nav__group:hover .nav__label { color: var(--text-soft); } .nav__group .nav__chev { width: 14px; height: 14px; color: var(--text-faint); transition: transform .22s ease; transform: rotate(-90deg); } [dir="rtl"] .nav__group .nav__chev { transform: rotate(90deg); } .nav__group.open .nav__chev { transform: rotate(0deg); } .nav__label { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; pointer-events: none; } /* labels inside a group button shouldn't add their own padding */ .nav__group .nav__label { padding: 0; } /* collapsible items container */ .nav__items { max-height: 0; overflow: hidden; transition: max-height .26s ease, opacity .2s ease; opacity: 0; } .nav__items.open { max-height: 520px; /* generous; covers the largest group */ opacity: 1; } .nav__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); color: var(--text-soft); font-weight: 600; font-size: 14px; transition: background .16s, color .16s, transform .16s; margin-bottom: 2px; position: relative; } .nav__item:hover { background: var(--navy-700); color: #fff; } .nav__item.active { background: linear-gradient(90deg, var(--accent-soft), transparent); color: #fff; } .nav__item.active::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 12px var(--accent); } [dir="rtl"] .nav__item.active::before { border-radius: 3px 0 0 3px; } .nav__item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .9; } .nav__item.active svg { color: var(--accent-bright); opacity: 1; } .sidebar__foot { padding: 12px 14px; border-top: 1px solid var(--line); } .main { flex: 1; margin-inline-start: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; } /* ---------- Topbar ---------- */ .topbar { height: 70px; background: rgba(15,23,41,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 30px; position: sticky; top: 0; z-index: 30; } .topbar__title { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; } .topbar__actions { display: flex; align-items: center; gap: 12px; } .lang-toggle { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--navy-800); } .lang-toggle a { padding: 6px 13px; font-size: 12.5px; font-weight: 700; color: var(--text-soft); } .lang-toggle a.active { background: var(--accent); color: #fff; } .avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #6366f1); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 15px; box-shadow: 0 4px 14px rgba(79,140,255,.4); } .content { padding: 32px; flex: 1; } /* ---------- Page header ---------- */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; gap: 20px; flex-wrap: wrap; } .page-header h1 { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -.025em; line-height: 1.05; color: var(--text); } .page-header .eyebrow { font-family: var(--mono); font-size: 11.5px; color: var(--accent-bright); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 8px; display: block; font-weight: 500; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px; border: 1px solid var(--line); background: var(--navy-750); color: var(--text); border-radius: var(--radius); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s, transform .08s, box-shadow .15s; white-space: nowrap; } .btn:hover { background: var(--navy-700); border-color: var(--navy-600); } .btn:active { transform: translateY(1px); } .btn svg { width: 16px; height: 16px; } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-press)); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(79,140,255,.35); } .btn-primary:hover { background: linear-gradient(135deg, var(--accent-bright), var(--accent)); box-shadow: var(--glow); } .btn-dark { background: var(--navy-800); color: var(--text); } .btn-dark:hover { background: var(--navy-700); } .btn-danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(248,113,113,.3); } .btn-danger:hover { background: rgba(248,113,113,.22); } .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--navy-700); } .btn-sm { padding: 6px 12px; font-size: 12.5px; } /* ---------- Cards ---------- */ .card { background: var(--navy-750); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card-pad { padding: 24px; } .card h3 { font-family: var(--display); font-weight: 700; font-size: 15px; margin: 26px 0 16px; letter-spacing: -.01em; color: var(--text); padding-bottom: 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 9px; } .card h3:first-child { margin-top: 0; } .card h3::before { content: ''; width: 4px; height: 16px; border-radius: 100px; background: var(--accent); box-shadow: 0 0 10px var(--accent); } /* ---------- Stat cards ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 30px; } .stat { background: var(--navy-750); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; position: relative; overflow: hidden; transition: transform .18s, border-color .18s, box-shadow .18s; } .stat:hover { transform: translateY(-3px); border-color: var(--navy-600); box-shadow: var(--shadow); } .stat::after { content: ''; position: absolute; inset-block-start: -30px; inset-inline-end: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft), transparent 70%); } .stat__label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); font-weight: 500; } .stat__value { font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: -.03em; line-height: 1.1; margin-top: 8px; color: var(--text); } .stat__foot { font-size: 12.5px; color: var(--text-faint); margin-top: 6px; } /* Slim variant (asset status cards): ~half the height */ .stat-grid--slim .stat { padding: 11px 18px; } .stat-grid--slim .stat__value { font-size: 24px; margin-top: 2px; line-height: 1; } .stat-grid--slim .stat__foot { display: none; } .stat-grid--slim .stat__label { font-size: 10px; } /* ---------- Tables ---------- */ .table-wrap { background: var(--navy-750); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow-x: auto; } .table { width: 100%; border-collapse: collapse; } .table th { text-align: start; padding: 14px 18px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); font-weight: 500; background: var(--navy-800); border-bottom: 1px solid var(--line); white-space: nowrap; } .table td { padding: 15px 18px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--text-soft); white-space: nowrap; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr { transition: background .12s; } .table tbody tr:hover { background: var(--navy-700); } .table .mono { font-family: var(--mono); font-size: 12.5px; color: var(--text-soft); } .table .strong { font-weight: 700; color: var(--text); } .table .actions { display: flex; gap: 6px; justify-content: flex-end; } .empty { text-align: center; color: var(--text-faint); padding: 52px 20px !important; font-style: italic; } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 100px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; border: 1px solid transparent; } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } .badge-in_use { background: var(--ok-soft); color: var(--ok); border-color: rgba(52,211,153,.3); } .badge-storage { background: var(--info-soft); color: var(--info); border-color: rgba(96,165,250,.3); } .badge-maintenance { background: var(--warn-soft); color: var(--warn); border-color: rgba(251,191,36,.3); } .badge-retired { background: var(--danger-soft); color: var(--danger); border-color: rgba(248,113,113,.3); } .pill { background: var(--navy-700); color: var(--text-soft); padding: 3px 10px; border-radius: 100px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--line); } /* ---------- Forms ---------- */ .form { padding: 28px; } .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: 13px; font-weight: 600; color: var(--text-soft); } .field label .req { color: var(--accent-bright); } .field input, .field select, .field textarea { padding: 11px 14px; border: 1px solid var(--navy-600); border-radius: var(--radius); background: var(--navy-850); color: var(--text); transition: border-color .15s, box-shadow .15s, background .15s; width: 100%; } .field input::placeholder, .field textarea::placeholder { color: var(--text-faint); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--navy-800); } .field select { cursor: pointer; } .field select:disabled { background: var(--navy-850); color: var(--text-faint); cursor: not-allowed; opacity: .6; } .field select option { background: var(--navy-800); color: var(--text); } .field .error { color: var(--danger); font-size: 12.5px; font-weight: 600; } .field .hint { color: var(--text-faint); font-size: 12px; } .form-actions { display: flex; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); } .checkbox-row { display: flex; align-items: center; gap: 9px; } .checkbox-row input { width: 18px; height: 18px; accent-color: var(--accent); } /* ---------- Filters ---------- */ .filters { display: flex; gap: 10px; padding: 16px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; } .filters input, .filters select { padding: 9px 13px; border: 1px solid var(--navy-600); border-radius: var(--radius); background: var(--navy-850); color: var(--text); } .filters input[type="text"] { min-width: 240px; } .filters input::placeholder { color: var(--text-faint); } .filters select option { background: var(--navy-800); } /* Single-row variant: keep every control on one line, scroll if it overflows */ .filters--row { flex-wrap: nowrap; overflow-x: auto; gap: 8px; align-items: center; } .filters--row > * { flex: 0 0 auto; } .filters--row select { flex: 1 1 0; min-width: 120px; max-width: 170px; text-overflow: ellipsis; } .filters--row input[type="text"] { flex: 2 1 0; min-width: 180px; max-width: 260px; } .filters--row .btn { flex: 0 0 auto; } /* slim scrollbar for the filter row */ .filters--row::-webkit-scrollbar { height: 8px; } .filters--row::-webkit-scrollbar-thumb { background: var(--navy-600); border-radius: 100px; } /* ---------- Alerts ---------- */ .alert { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 24px; font-weight: 500; display: flex; align-items: center; gap: 11px; border: 1px solid transparent; backdrop-filter: blur(4px); } .alert::before { font-size: 16px; } .alert-success { background: var(--ok-soft); color: var(--ok); border-color: rgba(52,211,153,.3); } .alert-success::before { content: '✓'; } .alert-error { background: var(--danger-soft); color: var(--danger); border-color: rgba(248,113,113,.3); } .alert-error::before { content: '!'; font-weight: 800; } /* ---------- Pagination ---------- */ .pagination { display: flex; gap: 6px; list-style: none; margin-top: 24px; justify-content: center; flex-wrap: wrap; } .pagination a, .pagination span { padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--navy-750); font-size: 13.5px; font-weight: 600; color: var(--text-soft); transition: background .12s, border-color .12s; } .pagination a:hover { background: var(--navy-700); border-color: var(--navy-600); color: #fff; } .pagination .active span, .pagination span[aria-current] { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 14px rgba(79,140,255,.35); } .pagination [aria-disabled] span { opacity: .35; } /* ---------- Breadcrumb / location chip ---------- */ .loc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--text-soft); } .loc span { display: inline-flex; align-items: center; } .loc .sep { color: var(--navy-500); } /* ---------- Timeline (transfers) ---------- */ .timeline { position: relative; padding-inline-start: 28px; } .timeline::before { content: ''; position: absolute; inset-block: 6px 6px; inset-inline-start: 6px; width: 2px; background: var(--line); } .tl-item { position: relative; padding-bottom: 22px; } .tl-item::before { content: ''; position: absolute; inset-inline-start: -28px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--navy-750); box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--accent); } .tl-item__time { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); } .tl-item__body { font-size: 14px; margin-top: 4px; color: var(--text-soft); } .tl-item__body strong { color: var(--text); } /* ---------- Auth ---------- */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(900px 500px at 20% 15%, rgba(79,140,255,.18), transparent 55%), radial-gradient(800px 500px at 85% 85%, rgba(99,102,241,.16), transparent 55%), var(--navy-900); } .auth-card { width: 100%; max-width: 420px; background: var(--navy-750); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 40px 36px; position: relative; overflow: hidden; } .auth-card::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--accent), transparent); } .auth-card h1 { font-family: var(--display); font-weight: 800; font-size: 27px; letter-spacing: -.02em; color: var(--text); } .auth-card .sub { color: var(--text-faint); font-size: 13.5px; margin-top: 6px; margin-bottom: 28px; } .auth-logo { width: 60px; height: 60px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; margin-bottom: 22px; background: #0a0a0a; box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); } .auth-logo img { width: 100%; height: 100%; object-fit: contain; padding: 9px; } .auth-card .field { margin-bottom: 18px; } .cred-hint { margin-top: 22px; padding: 14px 16px; background: var(--navy-850); border-radius: var(--radius); font-size: 12.5px; color: var(--text-soft); border: 1px solid var(--line); } .cred-hint code { font-family: var(--mono); color: var(--accent-bright); } .cred-hint strong { color: var(--text); } /* ---------- Misc ---------- */ .spec-list { display: flex; flex-direction: column; gap: 8px; } .spec-row { display: flex; gap: 8px; } .spec-row input { flex: 1; } .dl { display: grid; grid-template-columns: 150px 1fr; gap: 12px 18px; font-size: 14px; } .dl dt { color: var(--text-faint); font-weight: 500; } .dl dd { font-weight: 500; color: var(--text); } .flex { display: flex; } .between { justify-content: space-between; } .center { align-items: center; } .gap-sm { gap: 8px; } .gap { gap: 14px; } .wrap { flex-wrap: wrap; } .mt { margin-top: 18px; } .mb { margin-bottom: 18px; } .muted { color: var(--text-faint); } .text-end { text-align: end; } /* ---------- Responsive ---------- */ .menu-btn { display: none; } @media (max-width: 980px) { .sidebar { transform: translateX(-100%); transition: transform .25s; } [dir="rtl"] .sidebar { transform: translateX(100%); } .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); } .main { margin-inline-start: 0 !important; } .menu-btn { display: inline-grid; } .grid-2, .grid-3 { grid-template-columns: 1fr; } .content { padding: 20px 16px; } .table-wrap { overflow-x: auto; } .stat-grid { grid-template-columns: 1fr 1fr; } } /* ---------- Searchable combobox ---------- */ .combobox { position: relative; } .combobox__input { padding: 11px 14px; border: 1px solid var(--navy-600); border-radius: var(--radius); background: var(--navy-850); color: var(--text); width: 100%; transition: border-color .15s, box-shadow .15s, background .15s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f7d96' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-inline-end: 36px; } [dir="rtl"] .combobox__input { background-position: left 12px center; } .combobox__input::placeholder { color: var(--text-faint); } .combobox__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--navy-800); } .combobox.is-open .combobox__input { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .combobox__panel { position: absolute; z-index: 20; top: calc(100% + 6px); inset-inline: 0; background: var(--navy-800); border: 1px solid var(--navy-600); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 240px; overflow-y: auto; padding: 6px; } .combobox__opt { padding: 9px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--text-soft); transition: background .1s, color .1s; } .combobox__opt:hover { background: var(--navy-700); color: #fff; } .combobox__opt[data-value=""] { color: var(--text-faint); font-style: italic; } /* ---------- Clickable status stat cards (assets filter) ---------- */ .stat-clickable { display: block; cursor: pointer; text-decoration: none; } .stat-clickable .stat__label { display: flex; align-items: center; min-height: 22px; } .stat-clickable:hover { transform: translateY(-3px); border-color: var(--navy-600); box-shadow: var(--shadow); } .stat-clickable.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(79,140,255,.18); } .stat-clickable.is-active::after { background: radial-gradient(circle, rgba(79,140,255,.28), transparent 70%); } /* ---------- Topbar icon button (theme toggle) ---------- */ .icon-btn { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; background: var(--navy-750); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text-soft); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .icon-btn:hover { background: var(--navy-700); color: var(--text); border-color: var(--navy-600); } .icon-btn svg { width: 18px; height: 18px; } /* Show moon in dark mode, sun in light mode */ .icon-btn .icon-sun { display: none; } .icon-btn .icon-moon { display: block; } [data-theme="light"] .icon-btn .icon-sun { display: block; } [data-theme="light"] .icon-btn .icon-moon { display: none; } /* ---------- Profile dropdown ---------- */ .profile { position: relative; } .avatar-btn { border: none; cursor: pointer; font: inherit; } .avatar-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .profile__dropdown { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; min-width: 220px; background: var(--navy-750); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 8px; z-index: 50; overflow: hidden; } .profile__head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .profile__name { font-weight: 700; font-size: 14px; color: var(--text); } .profile__email { font-size: 12.5px; color: var(--text-faint); font-family: var(--mono); margin-top: 2px; word-break: break-all; } .profile__item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: none; background: transparent; color: var(--text-soft); font: inherit; font-weight: 600; font-size: 14px; border-radius: var(--radius); cursor: pointer; text-align: start; transition: background .12s, color .12s; } .profile__item:hover { background: var(--danger-soft); color: var(--danger); } .profile__item--link:hover { background: var(--navy-700); color: var(--text); } .profile__item svg { width: 17px; height: 17px; } /* ---------- Notifications ---------- */ .notif { position: relative; } .notif #notif-toggle { position: relative; } .notif__badge { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 800; font-family: var(--body); border-radius: 100px; border: 2px solid var(--navy-900); line-height: 1; } .notif__dropdown { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 320px; max-width: 90vw; background: var(--navy-750); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 50; overflow: hidden; } .notif__head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; color: var(--text); } .notif__count { background: var(--accent-soft); color: var(--accent-bright); font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 100px; } .notif__list { max-height: 380px; overflow-y: auto; padding: 6px; } .notif__item { display: flex; gap: 11px; padding: 11px 12px; border-radius: var(--radius); transition: background .12s; cursor: pointer; align-items: flex-start; } .notif__item:hover { background: var(--navy-700); } .notif__item--static { cursor: default; } .notif__item--static:hover { background: transparent; } .notif__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; box-shadow: 0 0 8px currentColor; } .notif__dot--transfer { background: var(--info); color: var(--info); } .notif__dot--maintenance { background: var(--warn); color: var(--warn); } .notif__dot--ticket { background: var(--danger); color: var(--danger); } .notif__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .notif__title { font-weight: 700; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notif__text { font-size: 12.5px; color: var(--text-soft); } .notif__time { font-size: 11px; color: var(--text-faint); font-family: var(--mono); margin-top: 1px; } .notif__empty { padding: 36px 16px; text-align: center; color: var(--text-faint); font-style: italic; font-size: 13.5px; } /* ---------- Ticket badges ---------- */ .badge-tk-open { background: var(--info-soft); color: var(--info); } .badge-tk-in_progress { background: var(--warn-soft); color: var(--warn); } .badge-tk-resolved { background: var(--ok-soft); color: var(--ok); } .badge-tk-closed { background: var(--navy-700); color: var(--text-faint); } .badge-prio-low { background: var(--navy-700); color: var(--text-soft); } .badge-prio-medium { background: var(--info-soft); color: var(--info); } .badge-prio-high { background: var(--danger-soft); color: var(--danger); } /* ---------- Ticket meta + description ---------- */ .ticket-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .ticket-meta > div { display: flex; flex-direction: column; gap: 5px; } .ticket-meta__k { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); } .ticket-desc { color: var(--text-soft); line-height: 1.65; white-space: pre-wrap; } /* ---------- Comment thread ---------- */ .thread { display: flex; flex-direction: column; gap: 14px; } .thread__msg { display: flex; } .thread__msg--employee { justify-content: flex-start; } .thread__msg--admin { justify-content: flex-end; } .thread__bubble { max-width: 78%; padding: 12px 15px; border-radius: 14px; border: 1px solid var(--line); } .thread__msg--employee .thread__bubble { background: var(--navy-800); border-bottom-left-radius: 4px; } .thread__msg--admin .thread__bubble { background: var(--accent-soft); border-color: var(--accent-ring); border-bottom-right-radius: 4px; } .thread__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .thread__author { font-weight: 700; font-size: 13px; color: var(--text); } .thread__badge { font-size: 9.5px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: 100px; background: var(--navy-700); color: var(--text-faint); } .thread__msg--admin .thread__badge { background: var(--accent); color: #fff; } .thread__time { font-size: 11px; color: var(--text-faint); margin-inline-start: auto; } .thread__body { color: var(--text-soft); font-size: 14px; line-height: 1.6; } .thread__empty { color: var(--text-faint); font-style: italic; padding: 8px 0; } .filters textarea, .form textarea { padding: 11px 14px; border: 1px solid var(--navy-600); border-radius: var(--radius); background: var(--navy-850); color: var(--text); width: 100%; font-family: var(--body); resize: vertical; } /* ---------- Settings page controls ---------- */ .switch-row { display: flex; align-items: center; gap: 10px; cursor: pointer; } .switch-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; } .form input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; } /* ---------- Notification read/unread ---------- */ .notif__readall { background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; } .notif__readall:hover { text-decoration: underline; } .notif__item { position: relative; } .notif__item.is-unread { background: var(--accent-soft); } .notif__item.is-unread .notif__title { color: var(--text); } .notif__item:not(.is-unread) { opacity: .62; } .notif__item:not(.is-unread) .notif__dot { opacity: .5; } .notif__item.is-unread::after { content: ''; position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* ---------- Dashboard charts ---------- */ .charts-range { padding: 7px 12px; border: 1px solid var(--navy-600); border-radius: var(--radius); background: var(--navy-850); color: var(--text); font-size: 13px; } .chart-title { font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 10px; } .chart-box { background: var(--navy-850); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 8px 6px; } .chart-box svg { display: block; } /* ---------- Barcode printing builder ---------- */ .bc-results { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; } .bc-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; background: var(--navy-850); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; cursor: pointer; color: var(--text); } .bc-result:hover { border-color: var(--accent-ring); background: var(--navy-800); } .bc-result.is-added { opacity: .5; pointer-events: none; } .bc-result__name { font-size: 12px; color: var(--text-soft); } .bc-empty { color: var(--text-faint); font-size: 13px; padding: 8px 2px; } .bc-batch { display: flex; flex-direction: column; gap: 8px; min-height: 40px; } .bc-item { display: flex; align-items: center; gap: 10px; background: var(--navy-850); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; } .bc-item__info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .bc-item__name { font-size: 12px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bc-qty { width: 70px; padding: 7px 9px; border: 1px solid var(--navy-600); border-radius: var(--radius); background: var(--navy-900); color: var(--text); text-align: center; } .bc-remove { background: var(--danger-soft); color: var(--danger); border: none; width: 28px; height: 28px; border-radius: 7px; font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; } .bc-remove:hover { background: var(--danger); color: #fff; } /* ---------- Ticket attachment images ---------- */ .thread__images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .thread__images img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; transition: transform .12s ease; } .thread__images img:hover { transform: scale(1.04); border-color: var(--accent-ring); } .form input[type="file"] { color: var(--text-soft); font-size: 13px; padding: 8px 0; } .form input[type="file"]::file-selector-button { background: var(--navy-700); color: var(--text); border: 1px solid var(--navy-600); padding: 7px 12px; border-radius: var(--radius); margin-inline-end: 10px; cursor: pointer; } /* ---------- Photo upload widget (choose / camera) ---------- */ .photo-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .photo-upload__count { font-size: 12px; color: var(--text-soft); } .photo-upload__previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .photo-upload__previews img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); } /* ---------- Table row checkboxes ---------- */ .table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }