/* =========================================================================== Fleet Tracking — design system No frameworks, no external fonts. Layout uses CSS logical properties so the whole interface mirrors correctly when . =========================================================================== */ :root { /* neutrals */ --bg: #f4f6f9; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #eef2f7; --border: #dfe5ee; --border-strong: #c6d0de; --text: #16202e; --text-2: #5a6a80; --text-3: #8794a8; /* brand — deep teal, reads as freight/logistics without being generic blue */ --brand: #0f6f6a; --brand-2: #0b514d; --brand-soft: #e2f2f0; --brand-ring: rgba(15, 111, 106, .28); /* accents */ --accent: #b8722a; --accent-soft: #fbf0e2; --ok: #17795e; --ok-soft: #e3f4ee; --warn: #9a6b06; --warn-soft: #fdf3dc; --danger: #b3372f; --danger-soft: #fce9e7; --info: #2a5fa8; --info-soft: #e8f0fb; --radius: 10px; --radius-sm: 7px; --radius-lg: 16px; --shadow-1: 0 1px 2px rgba(16, 28, 44, .06), 0 1px 3px rgba(16, 28, 44, .05); --shadow-2: 0 4px 12px rgba(16, 28, 44, .08), 0 1px 3px rgba(16, 28, 44, .06); --shadow-3: 0 12px 32px rgba(16, 28, 44, .14); --sidebar-w: 264px; --header-h: 60px; --font: "Segoe UI", "Noto Sans Arabic", "Dubai", Tahoma, system-ui, -apple-system, sans-serif; --mono: "Cascadia Mono", "Consolas", "SF Mono", ui-monospace, monospace; } html[data-theme="dark"] { --bg: #10151d; --surface: #171e28; --surface-2: #1c2531; --surface-3: #222c3a; --border: #2a3543; --border-strong: #3a4859; --text: #e7edf5; --text-2: #9fadc0; --text-3: #74829a; --brand: #34a89f; --brand-2: #4dc0b6; --brand-soft: #14332f; --brand-ring: rgba(52, 168, 159, .32); --accent: #d99447; --accent-soft: #33261a; --ok: #46b98d; --ok-soft: #16302a; --warn: #d5a648; --warn-soft: #322914; --danger: #e4756c; --danger-soft: #351d1c; --info: #6ea3e8; --info-soft: #17273d; --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 4px 14px rgba(0, 0, 0, .45); --shadow-3: 0 16px 40px rgba(0, 0, 0, .55); } /* --- reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: 14.5px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; } h1 { font-size: 1.35rem; } h2 { font-size: 1.05rem; } h3 { font-size: .95rem; } p { margin: 0 0 .6rem; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } .icon { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.18em; } .icon-lg { width: 1.5em; height: 1.5em; } .icon-xl { width: 2.1em; height: 2.1em; } /* --- app shell ------------------------------------------------------------ */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex: none; background: var(--surface); border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40; } .sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; } .brand { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2; } .brand-mark { width: 36px; height: 36px; border-radius: 10px; flex: none; background: linear-gradient(140deg, var(--brand), var(--brand-2)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px var(--brand-ring); } .brand-mark .icon { width: 20px; height: 20px; stroke-width: 1.9; } .brand-name { font-weight: 700; letter-spacing: -.015em; line-height: 1.1; } .brand-sub { font-size: .72rem; color: var(--text-3); } .nav { padding: .6rem .6rem 1.4rem; } .nav-group { margin-top: .9rem; } .nav-group:first-child { margin-top: .2rem; } .nav-label { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); padding: .35rem .6rem; } .nav-item { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; margin-bottom: 1px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500; transition: background .12s, color .12s; } .nav-item:hover { background: var(--surface-3); color: var(--text); text-decoration: none; } .nav-item.is-active { background: var(--brand-soft); color: var(--brand); font-weight: 620; } .nav-item.is-active .icon { color: var(--brand); } .nav-item .icon { color: var(--text-3); } .nav-item:hover .icon { color: var(--text-2); } .nav-count { margin-inline-start: auto; font-size: .72rem; font-weight: 600; background: var(--surface-3); color: var(--text-2); padding: .05rem .4rem; border-radius: 99px; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: var(--header-h); display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; } .topbar-title { font-weight: 650; font-size: 1rem; } .topbar-spacer { flex: 1; } .menu-toggle { display: none; } .search-box { position: relative; width: min(340px, 40vw); } .search-box .icon { position: absolute; inset-inline-start: .6rem; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } .search-box input { padding-inline-start: 2.1rem; } .search-results { position: absolute; inset-inline: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-3); max-height: 60vh; overflow-y: auto; z-index: 60; padding: .3rem; } .search-results:empty { display: none; } .search-results a { display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem; border-radius: var(--radius-sm); color: var(--text); } .search-results a:hover, .search-results a.is-cursor { background: var(--surface-3); text-decoration: none; } .search-results .r-type { margin-inline-start: auto; font-size: .72rem; color: var(--text-3); } .search-empty { padding: .6rem; color: var(--text-3); font-size: .85rem; } .page { padding: 1.25rem; flex: 1; } .page-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .page-head .titles { min-width: 0; } .page-head .sub { color: var(--text-2); font-size: .88rem; margin-top: .15rem; } .page-head .actions { margin-inline-start: auto; display: flex; gap: .5rem; flex-wrap: wrap; } /* --- buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .48rem .85rem; font: inherit; font-weight: 570; font-size: .875rem; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s, transform .06s; white-space: nowrap; } .btn:hover { background: var(--surface-3); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 1px 2px var(--brand-ring); } .btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); } .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-danger:hover { filter: brightness(1.06); background: var(--danger); } .btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); } .btn-ghost:hover { background: var(--surface-3); color: var(--text); } .btn-sm { padding: .3rem .55rem; font-size: .8rem; } .btn-icon { padding: .38rem; } .btn-block { width: 100%; } .btn-group { display: inline-flex; gap: .35rem; } /* --- cards ---------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); margin-bottom: 1rem; } .card-head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); } .card-head h2, .card-head h3 { margin: 0; } .card-head .hint { color: var(--text-3); font-size: .8rem; font-weight: 400; } .card-head .spacer { flex: 1; } .card-body { padding: 1rem; } .card-body.tight { padding: .5rem; } .card-foot { padding: .75rem 1rem; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } /* --- stat tiles ----------------------------------------------------------- */ .stat-grid { display: grid; gap: .85rem; margin-bottom: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow-1); display: flex; gap: .8rem; align-items: flex-start; } .stat-icon { width: 38px; height: 38px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); } .stat-icon.tone-ok { background: var(--ok-soft); color: var(--ok); } .stat-icon.tone-warn { background: var(--warn-soft); color: var(--warn); } .stat-icon.tone-danger { background: var(--danger-soft); color: var(--danger); } .stat-icon.tone-info { background: var(--info-soft); color: var(--info); } .stat-label { font-size: .78rem; color: var(--text-2); font-weight: 550; } .stat-value { font-size: 1.35rem; font-weight: 680; letter-spacing: -.02em; margin-top: .1rem; font-variant-numeric: tabular-nums; } .stat-note { font-size: .75rem; color: var(--text-3); margin-top: .1rem; } /* --- tables --------------------------------------------------------------- */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: .875rem; } table.data th, table.data td { padding: .55rem .7rem; text-align: start; border-bottom: 1px solid var(--border); vertical-align: middle; } table.data thead th { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); background: var(--surface-2); position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--border); white-space: nowrap; } table.data tbody tr:hover { background: var(--surface-2); } table.data tbody tr:last-child td { border-bottom: 0; } table.data td.num, table.data th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } table.data td.actions { text-align: end; white-space: nowrap; width: 1%; } table.data tfoot td { font-weight: 680; background: var(--surface-2); border-top: 2px solid var(--border-strong); } table.data .muted { color: var(--text-3); } table.data.compact th, table.data.compact td { padding: .38rem .5rem; } .amt { font-variant-numeric: tabular-nums; } .amt-pos { color: var(--ok); } .amt-neg { color: var(--danger); } .amt-zero { color: var(--text-3); } .row-link { cursor: pointer; } /* --- badges & chips ------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: .3rem; padding: .13rem .5rem; border-radius: 99px; font-size: .74rem; font-weight: 620; white-space: nowrap; } .badge-ok { background: var(--ok-soft); color: var(--ok); } .badge-warn { background: var(--warn-soft); color: var(--warn); } .badge-danger { background: var(--danger-soft); color: var(--danger); } .badge-info { background: var(--info-soft); color: var(--info); } .badge-muted { background: var(--surface-3); color: var(--text-2); } .badge-brand { background: var(--brand-soft); color: var(--brand); } .chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border: 1px solid var(--border); border-radius: 99px; font-size: .78rem; background: var(--surface-2); } /* --- forms ---------------------------------------------------------------- */ .form-grid { display: grid; gap: .9rem 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .form-grid .span-2 { grid-column: span 2; } .form-grid .span-all { grid-column: 1 / -1; } @media (max-width: 640px) { .form-grid .span-2 { grid-column: span 1; } } .field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .field > label { font-size: .8rem; font-weight: 600; color: var(--text-2); } .field .req { color: var(--danger); } .field .hint { font-size: .75rem; color: var(--text-3); } input[type="text"], input[type="password"], input[type="date"], input[type="number"], input[type="email"], input[type="search"], select, textarea { width: 100%; padding: .45rem .6rem; font: inherit; font-size: .875rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: border-color .12s, box-shadow .12s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); } input[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--surface-3); color: var(--text-2); cursor: default; } textarea { min-height: 76px; resize: vertical; } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: right 1rem center, right .72rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-inline-end: 1.8rem; } html[dir="rtl"] select { background-position: left .72rem center, left 1rem center; background-image: linear-gradient(135deg, transparent 50%, var(--text-3) 50%), linear-gradient(45deg, var(--text-3) 50%, transparent 50%); padding-inline-end: .6rem; padding-inline-start: 1.8rem; } input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); } .field-error { color: var(--danger); font-size: .76rem; margin: 0; } .check { display: inline-flex; align-items: center; gap: .45rem; font-size: .875rem; cursor: pointer; } .check input { width: 16px; height: 16px; accent-color: var(--brand); margin: 0; } .switchbar { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); } .switchbar label { position: relative; } .switchbar input { position: absolute; opacity: 0; pointer-events: none; } .switchbar span { display: block; padding: .4rem .8rem; font-size: .82rem; font-weight: 570; cursor: pointer; color: var(--text-2); } .switchbar input:checked + span { background: var(--brand); color: #fff; } .filters { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; } .filters .field { min-width: 150px; } /* --- picker (typeahead) --------------------------------------------------- */ .picker { position: relative; } .picker-menu { position: absolute; inset-inline: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-3); max-height: 260px; overflow-y: auto; z-index: 70; padding: .25rem; } .picker-menu[hidden] { display: none; } .picker-menu button { display: flex; width: 100%; align-items: center; gap: .5rem; padding: .4rem .55rem; border: 0; background: none; font: inherit; color: var(--text); text-align: start; border-radius: var(--radius-sm); cursor: pointer; } .picker-menu button:hover, .picker-menu button.is-cursor { background: var(--brand-soft); } .picker-menu .p-meta { margin-inline-start: auto; font-size: .75rem; color: var(--text-3); } .picker-empty { padding: .5rem .6rem; color: var(--text-3); font-size: .82rem; } /* --- alerts --------------------------------------------------------------- */ .alerts { position: fixed; top: 12px; inset-inline-end: 12px; z-index: 200; display: flex; flex-direction: column; gap: .5rem; max-width: 380px; } .alert { display: flex; gap: .55rem; align-items: flex-start; padding: .65rem .8rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2); font-size: .875rem; animation: slide-in .2s ease-out; } @keyframes slide-in { from { opacity: 0; transform: translateY(-6px); } } .alert-success { border-inline-start: 3px solid var(--ok); } .alert-success .icon { color: var(--ok); } .alert-error { border-inline-start: 3px solid var(--danger); } .alert-error .icon { color: var(--danger); } .alert-warning { border-inline-start: 3px solid var(--warn); } .alert-warning .icon { color: var(--warn); } .alert-info { border-inline-start: 3px solid var(--info); } .alert-info .icon { color: var(--info); } .alert .close { margin-inline-start: auto; background: none; border: 0; cursor: pointer; color: var(--text-3); padding: 0; line-height: 1; } .notice { display: flex; gap: .6rem; padding: .7rem .85rem; border-radius: var(--radius); background: var(--info-soft); color: var(--info); font-size: .86rem; border: 1px solid color-mix(in srgb, var(--info) 22%, transparent); } .notice.tone-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 22%, transparent); } .notice.tone-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); } /* --- empty state ---------------------------------------------------------- */ .empty { text-align: center; padding: 2.5rem 1rem; color: var(--text-3); } .empty .icon-xl { color: var(--border-strong); margin-bottom: .5rem; } .empty h3 { color: var(--text-2); margin-bottom: .25rem; } /* --- pagination ----------------------------------------------------------- */ .pager { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; } .pager .info { color: var(--text-3); font-size: .82rem; margin-inline-end: auto; } .pager a, .pager span.gap, .pager span.cur { min-width: 30px; height: 30px; padding: 0 .45rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: .82rem; font-weight: 560; border: 1px solid var(--border); color: var(--text-2); background: var(--surface); } .pager a:hover { background: var(--surface-3); text-decoration: none; } .pager span.cur { background: var(--brand); border-color: var(--brand); color: #fff; } .pager span.gap { border-color: transparent; background: none; } /* --- tabs ----------------------------------------------------------------- */ .tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; overflow-x: auto; } .tabs a { padding: .5rem .8rem; font-size: .875rem; font-weight: 570; color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap; } .tabs a:hover { color: var(--text); text-decoration: none; } .tabs a.is-active { color: var(--brand); border-bottom-color: var(--brand); } /* --- line item editor ----------------------------------------------------- */ .lines { width: 100%; border-collapse: collapse; font-size: .85rem; } .lines th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 700; text-align: start; padding: .35rem .4rem; border-bottom: 1px solid var(--border); white-space: nowrap; } .lines td { padding: .25rem .3rem; border-bottom: 1px solid var(--border); vertical-align: top; } .lines input, .lines select { padding: .35rem .45rem; font-size: .84rem; } .lines td.num input { text-align: end; } .lines .line-del { color: var(--text-3); } .lines .line-del:hover { color: var(--danger); background: var(--danger-soft); } .lines tbody tr:last-child td { border-bottom: 0; } .lines-foot { padding: .5rem; } /* --- key/value list ------------------------------------------------------- */ .kv { display: grid; grid-template-columns: auto 1fr; gap: .4rem .9rem; font-size: .875rem; } .kv dt { color: var(--text-2); font-weight: 550; } .kv dd { margin: 0; font-weight: 560; } /* --- charts (inline svg) -------------------------------------------------- */ .bars { display: flex; align-items: flex-end; gap: .45rem; height: 130px; padding-top: .5rem; } .bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .3rem; min-width: 0; } .bar { width: 100%; max-width: 42px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--brand), var(--brand-2)); min-height: 3px; transition: filter .12s; } .bar-col:hover .bar { filter: brightness(1.15); } .bar-label { font-size: .68rem; color: var(--text-3); white-space: nowrap; } .bar-value { font-size: .7rem; color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; } .meter { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; } .meter > span { display: block; height: 100%; background: var(--brand); border-radius: 99px; } /* --- timeline (shipment progress) ---------------------------------------- */ .steps { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } .step { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--text-3); } .step .dot { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text-3); font-size: .68rem; font-weight: 700; } .step.done .dot { background: var(--ok-soft); color: var(--ok); } .step.done { color: var(--ok); } .step.current .dot { background: var(--brand); color: #fff; } .step.current { color: var(--brand); font-weight: 640; } .step-sep { width: 18px; height: 1px; background: var(--border-strong); } /* --- misc ----------------------------------------------------------------- */ .muted { color: var(--text-3); } .small { font-size: .8rem; } .mono { font-family: var(--mono); font-size: .85em; } .nowrap { white-space: nowrap; } .stack > * + * { margin-top: .75rem; } .row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .grow { flex: 1; } .text-end { text-align: end; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .two-col { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .inline-form { display: inline; } .dropdown { position: relative; } .dropdown-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 190px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-3); padding: .3rem; z-index: 80; } .dropdown-menu[hidden] { display: none; } .dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .42rem .55rem; border: 0; background: none; font: inherit; font-size: .86rem; color: var(--text); border-radius: var(--radius-sm); cursor: pointer; text-align: start; } .dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--surface-3); text-decoration: none; } .dropdown-sep { height: 1px; background: var(--border); margin: .25rem 0; } .dropdown-head { padding: .4rem .55rem; font-size: .75rem; color: var(--text-3); } .avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; } /* --- login ---------------------------------------------------------------- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: radial-gradient(1100px 500px at 15% -10%, var(--brand-soft), transparent 60%), radial-gradient(900px 420px at 100% 110%, var(--accent-soft), transparent 55%), var(--bg); } .login-card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: 1.75rem; } .login-brand { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-bottom: 1.25rem; text-align: center; } .login-brand .brand-mark { width: 48px; height: 48px; border-radius: 13px; } .login-brand .brand-mark .icon { width: 26px; height: 26px; } .login-foot { margin-top: 1rem; text-align: center; font-size: .8rem; color: var(--text-3); } /* --- print ---------------------------------------------------------------- */ @media print { .sidebar, .topbar, .no-print, .alerts, .pager { display: none !important; } body { background: #fff; } .page { padding: 0; } .card { border: 0; box-shadow: none; margin: 0 0 .5rem; } .card-head { border-bottom: 1px solid #999; } table.data th { background: #eee !important; color: #000 !important; } table.data th, table.data td { border-bottom: 1px solid #ccc; } a { color: #000; text-decoration: none; } .print-only { display: block !important; } } .print-only { display: none; } .print-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 2px solid var(--border-strong); } /* --- responsive ----------------------------------------------------------- */ @media (max-width: 980px) { .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; transform: translateX(calc(var(--sidebar-w) * -1)); transition: transform .2s ease; box-shadow: var(--shadow-3); } html[dir="rtl"] .sidebar { transform: translateX(var(--sidebar-w)); } body.nav-open .sidebar { transform: translateX(0); } body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(8, 14, 22, .45); z-index: 35; } .menu-toggle { display: inline-flex; } .search-box { width: auto; flex: 1; } } @media (max-width: 620px) { .page { padding: .85rem; } .page-head .actions { width: 100%; } .stat-grid { grid-template-columns: 1fr 1fr; } .stat { padding: .7rem; } .stat-value { font-size: 1.1rem; } .topbar-title { display: none; } }