/* ==========================================================================
   Myne Cargo — Ops Station
   Design system for redesigned system pages (dashboard, login, and now the
   global topbar/sidebar chrome — see section 11).
   Loaded AFTER style.min.css / front.css — layers on top, does not replace
   the base Bootstrap admin theme. Section 11 is loaded from
   views/inc/topbar.php, so it reaches every page site-wide; the rest is
   opt-in per page as more pages get redesigned.

   See docs/dashboard-redesign-plan.md for the decision record. Reference:
   Prodigy's assets/css/station-ui.css ("Station UI").

   Sections:
     1. Tokens (light + dark)
     2. Station bar (page identity + search + live + theme toggle + clock)
     3. Stat rail / stat tile
     4. Segmented control (currency toggle etc.)
     5. Launchpad (quick actions)
     6. Panels
     7. Chips + status dot
     8. Trend chart bars
     9. Table
    10. Auth (login / forgot password)
    11. Global chrome (topbar + sidebar) — loaded site-wide
    12. Dark-mode support for not-yet-redesigned pages
    13. Responsive
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
/* Brand: blue (#0886ca) + pink (#e80d8d), sampled from the real Galeyr logo
   (assets/uploads/g-logo.png) — not an invented palette. Both are vivid
   enough to stay the SAME across light/dark, so --os-grad is defined once.
   Amber/green/red/violet remain as secondary utility tones for variety
   across tiles, chips and quick-action icons; they are not brand colors. */
:root {
  --os-canvas:#f3f1ec; --os-surface:#ffffff; --os-surface-2:#f8f6f0;
  --os-line:#e6e1d3; --os-line-soft:#eef4f3;
  --os-ink:#1c1a15; --os-ink-2:#6b6558; --os-ink-3:#a39c89;

  --os-blue:#0886ca; --os-blue-d:#066aa3; --os-pink:#e80d8d; --os-pink-d:#b80a70;
  --os-amber:#e08b1d; --os-amber-d:#b56d10; --os-green:#1a7350; --os-red:#c1432b; --os-violet:#7c69ef;
  --os-chrome:#12283a;
  --os-grad: linear-gradient(135deg, var(--os-blue) 0%, var(--os-pink) 100%);

  --os-sh-1: 0 1px 2px rgba(28,26,21,.05);
  --os-sh-2: 0 10px 26px rgba(28,26,21,.1);

  --os-blue-tint: rgba(8,134,202,.13); --os-pink-tint: rgba(232,13,141,.12);
  --os-amber-tint: rgba(224,139,29,.13); --os-green-tint: rgba(31,138,95,.12);
  --os-violet-tint: rgba(124,105,239,.12); --os-red-tint: rgba(193,67,43,.1);

  --os-chip-pending-bg: rgba(224,139,29,.14); --os-chip-pending-fg:#8f570c;
  --os-chip-transit-bg: rgba(8,134,202,.1);   --os-chip-transit-fg:#066aa3;
  --os-chip-delivered-bg: rgba(31,138,95,.12);--os-chip-delivered-fg:#1a7350;

  --os-delta-up-bg: rgba(31,138,95,.1);   --os-delta-up-fg:#1f8a5f;
  --os-delta-down-bg: rgba(193,67,43,.1); --os-delta-down-fg:#c1432b;

  --os-income-fg:#1a7350; --os-expense-fg:#c1432b; --os-net-fg:#066aa3;
}

[data-theme="dark"] {
  --os-canvas:#0b0f14; --os-surface:#121820; --os-surface-2:#171f27;
  --os-line:#242f3a; --os-line-soft:#1c2530;
  --os-ink:#eef3f6; --os-ink-2:#9fb0bb; --os-ink-3:#5c6c78;

  --os-blue:#0886ca; --os-blue-d:#5ec2ee; --os-pink:#e80d8d; --os-pink-d:#f24fb0;
  --os-amber:#e08b1d; --os-amber-d:#f2a93b; --os-green:#34d399; --os-red:#f0857a; --os-violet:#9d8cf0;
  --os-chrome:#12283a;

  --os-sh-1: 0 1px 2px rgba(0,0,0,.35);
  --os-sh-2: 0 14px 30px rgba(0,0,0,.4);

  --os-blue-tint: rgba(41,168,230,.22); --os-pink-tint: rgba(242,79,176,.2);
  --os-amber-tint: rgba(224,139,29,.22); --os-green-tint: rgba(52,211,153,.18);
  --os-violet-tint: rgba(157,140,240,.22); --os-red-tint: rgba(240,133,122,.18);

  --os-chip-pending-bg: rgba(224,139,29,.2);   --os-chip-pending-fg:#f2b25a;
  --os-chip-transit-bg: rgba(41,168,230,.18);  --os-chip-transit-fg:#7cd0f2;
  --os-chip-delivered-bg: rgba(52,211,153,.16);--os-chip-delivered-fg:#6fe0b0;

  --os-delta-up-bg: rgba(52,211,153,.14);  --os-delta-up-fg:#4fd39b;
  --os-delta-down-bg: rgba(240,133,122,.14); --os-delta-down-fg:#f0857a;

  --os-income-fg:#4fd39b; --os-expense-fg:#f0857a; --os-net-fg:#5ec2ee;
}

.os-scope { font-family: 'IBM Plex Sans', -apple-system, sans-serif; color: var(--os-ink); }
.os-scope .os-num { font-family: 'Space Grotesk', sans-serif; }
.os-scope .container-fluid { background: var(--os-canvas); }

/* ── 2. Station bar ────────────────────────────────────────────────────── */
.os-bar {
  position: relative;
  background: var(--os-surface); border: 1px solid var(--os-line);
  border-radius: 18px; padding: 18px 24px; margin-bottom: 18px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  box-shadow: var(--os-sh-1);
}
.os-bar::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: 18px 18px 0 0; background: var(--os-grad);
}
.os-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--os-blue-d); margin-bottom: 5px; }
.os-title { margin: 0 0 2px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--os-ink); line-height: 1.15; }
.os-meta { font-size: 13px; color: var(--os-ink-2); }

.os-search { display: flex; align-items: center; gap: 9px; background: var(--os-surface-2); border: 1px solid var(--os-line); border-radius: 30px; padding: 10px 16px; width: 270px; flex-shrink: 0; }
.os-search input { border: none; background: transparent; font-size: 13px; color: var(--os-ink); width: 100%; font-family: inherit; }
.os-search input::placeholder { color: var(--os-ink-3); }
.os-search input:focus { outline: none; }

.os-live { display: inline-flex; align-items: center; gap: 6px; background: var(--os-delta-up-bg); color: var(--os-delta-up-fg); border: 1px solid var(--os-line); border-radius: 30px; padding: 6px 12px; font-size: 11px; font-weight: 800; letter-spacing: .04em; flex-shrink: 0; }
.os-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--os-income-fg); animation: os-p 1.6s infinite; }
@keyframes os-p { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.6); opacity: .5 } }

.os-theme-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--os-line); background: var(--os-surface); display: flex; align-items: center; justify-content: center; color: var(--os-ink-2); cursor: pointer; flex-shrink: 0; transition: all .16s ease; }
.os-theme-btn:hover { border-color: var(--os-blue); color: var(--os-blue-d); }
.os-theme-btn svg { display: block; }
.os-theme-btn .os-icon-dark { display: none; }
[data-theme="dark"] .os-theme-btn .os-icon-light { display: none; }
[data-theme="dark"] .os-theme-btn .os-icon-dark { display: block; }

.os-clock { display: flex; flex-direction: column; align-items: flex-end; padding-right: 14px; border-right: 1px solid var(--os-line); line-height: 1.15; flex-shrink: 0; }
.os-clock .t { font-size: 16px; font-weight: 700; color: var(--os-ink); }
.os-clock .d { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--os-ink-3); }

.os-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--os-pink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }

/* ── 3. Stat rail / tile ──────────────────────────────────────────────── */
.os-stat-row { display: flex; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.os-tile { position: relative; overflow: hidden; flex: 1; min-width: 260px; background: var(--os-surface); border: 1px solid var(--os-line); border-radius: 16px; padding: 18px 22px; box-shadow: var(--os-sh-1); }
.os-tile::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tone, var(--os-blue)); }
.os-tile-head { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--os-ink-3); margin-bottom: 8px; }
.os-tile-val { font-size: 36px; font-weight: 700; letter-spacing: -.03em; }
.os-tile-sub { font-size: 12px; color: var(--os-ink-3); margin-top: 6px; }

.os-delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.os-delta-up { color: var(--os-delta-up-fg); background: var(--os-delta-up-bg); }
.os-delta-down { color: var(--os-delta-down-fg); background: var(--os-delta-down-bg); }

.os-rail { display: flex; background: var(--os-surface); border: 1px solid var(--os-line); border-radius: 16px; box-shadow: var(--os-sh-1); overflow: hidden; margin-bottom: 18px; flex-wrap: wrap; }
.os-rail-cell { flex: 1; min-width: 140px; padding: 16px 20px; border-left: 1px solid var(--os-line-soft); }
.os-rail-cell:first-child { border-left: none; }
.os-rail-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--os-ink-3); margin-bottom: 6px; }
.os-rail-val { font-size: 24px; font-weight: 700; }

/* ── 4. Segmented control ─────────────────────────────────────────────── */
.os-seg { display: inline-flex; background: var(--os-surface); border: 1px solid var(--os-line); border-radius: 30px; padding: 3px; gap: 2px; }
.os-seg button { border: none; background: transparent; cursor: pointer; font-family: inherit; padding: 6px 16px; border-radius: 30px; font-size: 12px; font-weight: 700; color: var(--os-ink-2); transition: all .15s ease; }
.os-seg button.on { background: var(--os-grad); color: #fff; box-shadow: 0 2px 8px rgba(8,134,202,.3); }
.os-seg button:hover:not(.on) { color: var(--os-blue-d); }

/* ── 5. Launchpad ──────────────────────────────────────────────────────── */
.os-launchpad { padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.os-lp { display: flex; align-items: center; gap: 10px; background: var(--os-surface); border: 1px solid var(--os-line); border-radius: 12px; padding: 12px; text-decoration: none; transition: all .18s ease; }
.os-lp:hover { border-color: var(--tone, var(--os-blue)); box-shadow: var(--os-sh-2); transform: translateY(-2px); text-decoration: none; }
.os-lp:hover .os-lp-ic { background: var(--tone, var(--os-blue)); color: #fff; }
.os-lp:hover .os-lp-go { transform: translateX(3px); color: var(--tone, var(--os-blue)); }
.os-lp-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--tone-tint, var(--os-blue-tint)); color: var(--tone, var(--os-blue)); flex-shrink: 0; transition: all .18s ease; }
.os-lp-txt { min-width: 0; }
.os-lp-t { display: block; font-size: 12.5px; font-weight: 700; color: var(--os-ink); }
.os-lp-d { display: block; font-size: 10.5px; color: var(--os-ink-3); }
.os-lp-go { margin-left: auto; color: var(--os-ink-3); transition: all .18s ease; }

/* ── 6. Panels ─────────────────────────────────────────────────────────── */
.os-panel { background: var(--os-surface); border: 1px solid var(--os-line); border-radius: 16px; box-shadow: var(--os-sh-1); overflow: hidden; margin-bottom: 18px; }
.os-panel-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--os-surface-2); border-bottom: 1px solid var(--os-line); flex-wrap: wrap; }
.os-panel-title { margin: 0; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 7px; color: var(--os-ink); }
.os-panel-body { padding: 20px 22px; }
.os-panel-foot { padding: 10px 20px; border-top: 1px solid var(--os-line); background: var(--os-surface-2); font-size: 11px; color: var(--os-ink-3); }
.os-panel-foot a { color: var(--os-blue-d); text-decoration: none; }
.os-panel-foot a:hover { color: var(--os-blue); }

.os-filt { padding: 5px 13px; border-radius: 20px; font-size: 12px; font-weight: 700; border: 1px solid var(--os-line); background: var(--os-surface); color: var(--os-ink-2); }
.os-filt.on { background: var(--os-ink); color: var(--os-surface); border-color: var(--os-ink); }

/* Form controls (selects, primary/ghost buttons) used on restyled list pages */
.os-select { width: 100%; box-sizing: border-box; padding: 9px 34px 9px 14px; border: 1px solid var(--os-line); border-radius: 10px; background-color: var(--os-surface); color: var(--os-ink); font-size: 13px; font-family: inherit; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a39c89'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 11px; }
.os-select:focus { outline: none; border-color: var(--os-blue); }

.os-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; border: none; border-radius: 10px; background: var(--os-grad); color: #fff !important; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: none; box-shadow: 0 4px 12px rgba(8,134,202,.25); transition: filter .15s ease; }
.os-btn:hover { filter: brightness(1.05); color: #fff !important; text-decoration: none; }
.os-btn-ghost { background: var(--os-surface); color: var(--os-ink-2) !important; border: 1px solid var(--os-line); box-shadow: none; }
.os-btn-ghost:hover { border-color: var(--os-blue); color: var(--os-blue-d) !important; }

/* ── 7. Chips + status dot ────────────────────────────────────────────── */
.os-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.os-chip-pending { background: var(--os-chip-pending-bg); color: var(--os-chip-pending-fg); }
.os-chip-transit { background: var(--os-chip-transit-bg); color: var(--os-chip-transit-fg); }
.os-chip-delivered { background: var(--os-chip-delivered-bg); color: var(--os-chip-delivered-fg); }

.os-status-list { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.os-status-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--os-ink-2); }
.os-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── 8. Trend chart ────────────────────────────────────────────────────── */
.os-trend { padding: 20px 22px; display: flex; align-items: flex-end; gap: 6px; height: 140px; }
.os-trend-bar { flex: 1; background: var(--os-blue); border-radius: 5px 5px 0 0; min-height: 2px; }

/* ── 9. Table ──────────────────────────────────────────────────────────── */
.os-table { width: 100%; border-collapse: collapse; }
.os-table th { text-align: left; padding: 9px 20px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--os-ink-3); border-bottom: 1px solid var(--os-line); }
.os-table td { padding: 11px 20px; font-size: 12.5px; color: var(--os-ink-2); border-bottom: 1px solid var(--os-line-soft); }
.os-table tr:last-child td { border-bottom: none; }
.os-table tr:hover td { background: var(--os-surface-2); }
.os-table .strong { font-weight: 700; color: var(--os-ink); }

/* ── 10. Auth (login / forgot password) ───────────────────────────────── */
.os-auth { min-height: 100vh; display: flex; background: var(--os-canvas); }

.os-auth-visual {
  flex: 1.1; display: flex; flex-direction: column; justify-content: center;
  padding: 60px; background: var(--os-grad); color: #fff; position: relative; overflow: hidden;
}
.os-auth-visual::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,.12) 0, transparent 40%),
                     radial-gradient(circle at 85% 80%, rgba(255,255,255,.1) 0, transparent 45%);
}
.os-auth-mark { position: relative; width: 52px; height: 52px; border-radius: 15px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; margin-bottom: 34px; }
.os-auth-visual h2 { position: relative; font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; max-width: 420px; }
.os-auth-visual p.lead { position: relative; font-size: 14.5px; opacity: .88; max-width: 380px; margin: 0 0 34px; line-height: 1.6; }
.os-auth-feature { position: relative; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; max-width: 380px; }
.os-auth-feature .ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.os-auth-feature .t { font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.os-auth-feature .d { font-size: 12px; opacity: .8; line-height: 1.5; }

.os-auth-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; position: relative; }
.os-auth-form .os-theme-btn { position: absolute; top: 24px; right: 24px; }
.os-auth-card { width: 100%; max-width: 400px; }
.os-auth-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--os-blue-d); margin-bottom: 10px; }
.os-auth-title { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--os-ink); margin: 0 0 6px; }
.os-auth-sub { font-size: 13.5px; color: var(--os-ink-2); margin: 0 0 28px; }

.os-alert-error { display: flex; align-items: flex-start; gap: 10px; background: var(--os-red-tint); border: 1px solid var(--os-red); color: var(--os-red); border-radius: 12px; padding: 12px 14px; font-size: 12.5px; margin-bottom: 20px; }

.os-field { margin-bottom: 18px; }
.os-field label { display: block; font-size: 12px; font-weight: 700; color: var(--os-ink-2); margin-bottom: 7px; }
.os-field-ic { position: relative; display: flex; align-items: center; }
.os-field-ic svg { position: absolute; left: 14px; color: var(--os-ink-3); pointer-events: none; }
.os-field-ic input { width: 100%; box-sizing: border-box; padding: 11px 14px 11px 42px; border: 1px solid var(--os-line); border-radius: 12px; background: var(--os-surface); color: var(--os-ink); font-size: 13.5px; font-family: inherit; transition: border-color .15s ease; }
.os-field-ic input:focus { outline: none; border-color: var(--os-blue); }
.os-field-ic input::placeholder { color: var(--os-ink-3); }

.os-row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 8px; }
.os-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--os-ink-2); }
.os-check input { accent-color: var(--os-blue); width: 15px; height: 15px; }
.os-row-between a { font-size: 12.5px; font-weight: 700; color: var(--os-blue-d); text-decoration: none; }
.os-row-between a:hover { color: var(--os-blue); }

.os-btn-block { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 12px 20px; border: none; border-radius: 12px; background: var(--os-grad); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px rgba(8,134,202,.28); transition: filter .15s ease; }
.os-btn-block:hover { filter: brightness(1.05); color: #fff; }

.os-divider { display: flex; align-items: center; gap: 12px; margin: 26px 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--os-ink-3); }
.os-divider::before, .os-divider::after { content: ''; flex: 1; height: 1px; background: var(--os-line); }

.os-btn-outline { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 11px 20px; border: 1px solid var(--os-line); border-radius: 12px; background: var(--os-surface); color: var(--os-ink-2); font-family: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; transition: all .15s ease; }
.os-btn-outline:hover { border-color: var(--os-blue); color: var(--os-blue-d); text-decoration: none; }

/* ── 11. Global chrome (topbar + sidebar) ─────────────────────────────────
   Loaded site-wide from views/inc/topbar.php, so these rules re-skin the
   EXISTING topbar/sidebar markup and classes in place (same structure,
   same hrefs, same collapse/expand JS from assets/js/sidebarmenu.js) —
   nothing here changes the menu tree or navigation behavior. Selectors are
   scoped under .topbar / .left-sidebar so they can never bleed into
   unrelated Bootstrap utility classes (.bg-primary, .dropdown-menu, etc.)
   used elsewhere across the app's other ~200 pages. ────────────────────── */
body { background: var(--os-canvas) !important; font-family: 'IBM Plex Sans', -apple-system, sans-serif; }

.topbar { background: var(--os-surface) !important; border-bottom: 1px solid var(--os-line); box-shadow: var(--os-sh-1); position: relative; }
.topbar::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--os-grad); z-index: 1; }
.topbar .top-navbar { background: transparent !important; min-height: 64px; }
.topbar .nav-toggler,
.topbar .sidebartoggler,
.topbar .topbartoggler { color: var(--os-ink-2) !important; }
.topbar .nav-toggler:hover,
.topbar .sidebartoggler:hover,
.topbar .topbartoggler:hover { color: var(--os-blue) !important; }
.topbar .navbar-brand { display: flex; align-items: center; }

.os-theme-btn.os-topbar-toggle { margin: 0 6px; }

.topbar .user-dd.bg-primary,
.topbar .dropdown-menu .bg-primary { background: var(--os-grad) !important; }
.topbar .dropdown-menu { background: var(--os-surface) !important; border: 1px solid var(--os-line); border-radius: 14px; box-shadow: var(--os-sh-2); }
.topbar .dropdown-item { color: var(--os-ink-2) !important; }
.topbar .dropdown-item:hover { background: var(--os-surface-2) !important; color: var(--os-blue-d) !important; }
.topbar .badge-notify { background: var(--os-pink) !important; }

/* Sidebar */
.left-sidebar { background: var(--os-surface) !important; border-right: 1px solid var(--os-line); }
.scroll-sidebar { background: var(--os-surface) !important; }

#sidebarnav .user-profile { padding: 0 16px 16px; }
#sidebarnav .user-profile .user-name { color: var(--os-ink); font-family: 'Space Grotesk', sans-serif; }
#sidebarnav .user-profile .user-email { color: var(--os-ink-3); }
#sidebarnav .user-pic img { border: 2px solid var(--os-line); }

#sidebarnav .create-btn { background: var(--os-grad) !important; border: none; border-radius: 12px; box-shadow: 0 6px 16px rgba(8,134,202,.28); font-weight: 700; }
#sidebarnav .create-btn:hover { filter: brightness(1.05); color: #fff; }

#sidebarnav .nav-small-cap { color: var(--os-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

#sidebarnav .sidebar-item > .sidebar-link { color: var(--os-ink-2) !important; border-radius: 10px; margin: 1px 10px; transition: all .15s ease; }
#sidebarnav .sidebar-item > .sidebar-link:hover { background: var(--os-surface-2); color: var(--os-blue-d) !important; }
#sidebarnav .sidebar-item > .sidebar-link i { color: var(--os-ink-3) !important; }
#sidebarnav .sidebar-item > .sidebar-link:hover i { color: var(--os-blue) !important; }
#sidebarnav .sidebar-item > .sidebar-link[aria-expanded="true"],
#sidebarnav .sidebar-item.selected > .sidebar-link { background: var(--os-blue-tint) !important; color: var(--os-blue-d) !important; font-weight: 700; }
#sidebarnav .sidebar-item > .sidebar-link[aria-expanded="true"] i,
#sidebarnav .sidebar-item.selected > .sidebar-link i { color: var(--os-blue) !important; }

#sidebarnav ul.collapse.first-level { border-left: 2px solid var(--os-line); margin-left: 26px; padding-left: 6px; }
#sidebarnav ul.collapse.first-level .sidebar-link { font-size: 13px; }

/* ── 12. Dark-mode support for not-yet-redesigned pages ───────────────────
   Pages outside this redesign (still ~200 of them) keep their original
   Bootstrap/Deprixa markup untouched — including AJAX-rendered tables like
   ajax/courier/courier_list_ajax.php. They never had a dark mode before
   (dark mode did not exist until this redesign), so these rules are pure
   ADDITION scoped entirely under [data-theme="dark"]: light mode (the
   default, and the only mode any of those ~200 pages showed before) is
   completely untouched by this section. This is a global compatibility
   layer rather than editing each legacy AJAX endpoint individually — it
   covers every such table/card/form across the app in one place. ───────── */
[data-theme="dark"] .card,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .page-breadcrumb { background: var(--os-surface) !important; color: var(--os-ink) !important; }
[data-theme="dark"] .table { color: var(--os-ink); border-color: var(--os-line); }
[data-theme="dark"] .table thead th { color: var(--os-ink); border-color: var(--os-line); background: var(--os-surface-2); }
[data-theme="dark"] .table td,
[data-theme="dark"] .table th { border-color: var(--os-line); }
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
[data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--os-surface-2); color: var(--os-ink); }
[data-theme="dark"] .table a { color: var(--os-blue-d); }
[data-theme="dark"] .dropdown-menu { background: var(--os-surface); border-color: var(--os-line); }
[data-theme="dark"] .dropdown-item { color: var(--os-ink-2); }
[data-theme="dark"] .dropdown-item:hover { background: var(--os-surface-2); color: var(--os-blue-d); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] .input-group-text { background-color: var(--os-surface) !important; border-color: var(--os-line) !important; color: var(--os-ink) !important; }
[data-theme="dark"] .form-control::placeholder { color: var(--os-ink-3); }
[data-theme="dark"] .pagination .page-link { background: var(--os-surface); border-color: var(--os-line); color: var(--os-ink-2); }
[data-theme="dark"] .pagination .page-item.active .page-link { background: var(--os-grad); border-color: transparent; color: #fff; }
[data-theme="dark"] .label,
[data-theme="dark"] .badge { color: #fff !important; }
[data-theme="dark"] .modal-content { background: var(--os-surface); color: var(--os-ink); }

/* ── 13. Responsive ────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .os-clock { display: none; }
  .os-launchpad { grid-template-columns: 1fr; }
  .os-auth-visual { display: none; }
}
@media (max-width: 575.98px) {
  .os-bar { padding: 14px 16px; }
  .os-search { width: 100%; order: 3; }
  .os-tile-val { font-size: 28px; }
  .os-auth-form { padding: 32px 18px; }
}