/* ============================================================================
 * OmniPost skin — premium logistics / operations command-centre theme.
 *
 * Loaded after the base CSS (public/index.html) for the OmniPost app only, so it
 * restyles the shared three-column shell — AI Insights rail · view stage · chat
 * sidebar — into the OmniPost brand without touching the core or Park Bot.
 *
 * Brand language: deep emerald (#0A332E) dark panels, vibrant OmniPost green
 * (#29D48A), soft mint accents (#BEEFD9), lightly tinted card surfaces (#F7FBF9),
 * large rounded cards, near-invisible shadows, glass highlights, Inter type.
 * Colour TOKENS (--brand, --card, --text, …) come from config.json; this file
 * adds structure, the dark chrome, gradients, and OmniPost-only custom props.
 * ==========================================================================*/

:root {
  --op-sidebar: #0A332E;   /* deep brand green — dark panels / chrome        */
  --op-deep:    #1B423C;   /* deep emerald — gradient partners / hovers      */
  --op-brand:   #29D48A;   /* vibrant OmniPost green                          */
  --op-brand-2: #3FE39A;   /* lighter green for hover                         */
  --op-mint:    #BEEFD9;   /* mint accent                                     */
  --op-card:    #F7FBF9;   /* tinted card surface                             */
  --op-ink:     #122622;   /* heading / KPI ink                               */
  --op-sub:     #5D6F6A;   /* secondary label                                 */
  --op-line:    rgba(41,212,138,.12);  /* hairline emerald border            */
  --op-radius:  18px;
  --op-radius-lg: 24px;
  --op-shadow:    0 4px 12px rgba(0,0,0,.04);   /* near-invisible            */
  --op-shadow-md: 0 10px 30px rgba(10,51,46,.10);
  --op-glass:   radial-gradient(circle, rgba(255,255,255,.15), transparent 70%);
  /* Feed the shared shell's chrome tokens — the nav rail / drawer pick these up. */
  --side: var(--op-sidebar);
  --side-deep: var(--op-deep);
  --side-ink: #EAF7F1;
  --side-muted: rgba(56,214,149,.78);  /* nav items glow soft OmniPost green  */
}

body { background: #fff; }

/* ---- Stage (centre): tinted operating surface --------------------------- */
.stage { background: linear-gradient(180deg, #F4FAF7 0%, #FBFEFD 100%); border-right: none; }

/* ============================================================================
 * NAV RAIL — deep emerald command column (drawer on mobile)
 * ==========================================================================*/
.navrail { background: var(--op-sidebar); }
.rail-brand .brand-logo { height: 38px; border-radius: 8px; }
.rail-title { display: none; } /* the OmniPost mark already carries the wordmark */
.nav-btn { color: var(--side-muted); }
.nav-btn:hover { background: rgba(41,212,138,.08); color: var(--op-brand-2); }
/* Active = a softly illuminated strip, no hard borders (per the brand brief). */
.nav-btn.active { background: rgba(41,212,138,.15); color: #fff; }
.nav-btn.active .nav-ico { filter: none; }
.nav-btn.accent { background: var(--op-brand); color: #06302a; box-shadow: 0 10px 24px rgba(41,212,138,.35); }
.nav-btn.accent:hover { background: var(--op-brand-2); color: #06302a; }
.nav-btn.accent .nav-ico { filter: none; }
.rail-foot { color: rgba(255,255,255,.38); border-top: 1px solid rgba(255,255,255,.07); padding-top: 12px; }

/* ---- Header bar: solid OmniPost green, compact -------------------------- */
.stage-head {
  background: var(--op-brand);
  border-bottom: none;
  box-shadow: 0 4px 18px rgba(41,212,138,.22);
}
.stage-head h1 { color: #06302a; font-weight: 600; letter-spacing: .005em; }
/* The mobile header logo keeps its branded dark container (the mark is built
   for dark green); on desktop the logo lives on the dark rail instead. */
.stage-head .head-logo {
  height: 22px; background: var(--op-sidebar);
  padding: 5px 9px; border-radius: 9px; box-shadow: 0 2px 8px rgba(6,48,42,.25);
  box-sizing: content-box;
}
.stage-head .pill {
  background: rgba(255,255,255,.20); color: #06302a; border: none; font-weight: 600;
}
.stage-head .dot { background: rgba(6,48,42,.35); }
.stage-head .dot.ok { background: #06302a; }
.stage-head .dot.bad { background: #fff; }
.stage-head .menu-btn { background: rgba(255,255,255,.18); border: none; color: #06302a; }
.stage-head .menu-btn:hover { background: rgba(255,255,255,.32); color: #06302a; }
.stage-head .userchip { background: rgba(255,255,255,.20); border: none; color: #06302a; font-weight: 600; }
.stage-head .userchip .ava { background: var(--op-sidebar); color: var(--op-brand); }

/* ---- Mobile tab bar + drawer: dark emerald to bookend the screen -------- */
.tabbar { background: var(--op-sidebar); border-top: none; box-shadow: 0 -6px 24px rgba(6,48,42,.25); }
.tab-btn { color: rgba(255,255,255,.5); }
.tab-btn.active { color: var(--op-brand); background: rgba(41,212,138,.14); }
.tab-badge { background: var(--op-brand); color: #06302a; }
.drawer-backdrop { background: rgba(6,48,42,.55); }

/* ============================================================================
 * HOME DASHBOARD — emerald command centre
 * ==========================================================================*/
/* Lead story hero — the deep-emerald briefing panel from the brand brief */
.dash-hero {
  background: linear-gradient(135deg, #082F2A 0%, #0F453C 100%);
  box-shadow: var(--op-shadow-md);
}
.dash-live { color: var(--op-mint); background: rgba(41,212,138,.12); }
.dash-live-dot { background: var(--op-brand); }
.dash-read { color: rgba(255,255,255,.78); }
.dash-chip:hover { background: rgba(41,212,138,.30); }
.dash-hero-ico { background: linear-gradient(135deg, rgba(41,212,138,.35), rgba(255,255,255,.05)); }
.dash-hero-ico svg { color: var(--op-mint); }

/* KPI cards — soft tinted surfaces, deep-ink numbers */
.kpi { background: var(--op-card); border-color: var(--op-line); box-shadow: var(--op-shadow); }
.kpi:hover { box-shadow: 0 12px 28px rgba(10,51,46,.10); }
.kpi-ico { background: rgba(41,212,138,.10); color: #0c8a5c; }
.kpi-n { color: var(--op-ink); }
.kpi-k { color: var(--op-sub); }
.kpi-badge.good { background: #E7F9F0; color: #0c8a5c; }
.kpi-bar { background: rgba(41,212,138,.12); }
.kpi-bar > span { background: var(--op-brand); }

/* Scanner feature card — the vibrant green gradient hero from the brief */
.feat-scan {
  background: linear-gradient(135deg, #1BC486 0%, #2BD995 100%);
  box-shadow: 0 18px 44px rgba(41,212,138,.35);
  color: #06302a;
}
.feat-scan .feat-ico { background: rgba(255,255,255,.30); }
.feat-scan:hover { box-shadow: 0 26px 56px rgba(41,212,138,.45); }
.feat-ask { background: var(--op-card); border-color: var(--op-line); box-shadow: var(--op-shadow); }
.feat-ask .feat-ico { background: rgba(41,212,138,.10); color: #0c8a5c; }
.feat-ask .feat-title { color: var(--op-ink); }
.feat-ask .feat-sub { color: var(--op-sub); }
.ask-chip { background: rgba(41,212,138,.06); color: var(--op-ink); }
.ask-chip:hover { border-color: rgba(41,212,138,.40); background: rgba(41,212,138,.10); }
.ask-chip svg { color: #0c8a5c; }

/* Attention + quick access panels */
.dash-panel { background: var(--op-card); border-color: var(--op-line); box-shadow: var(--op-shadow); }
.dash-panel-head svg { color: #0c8a5c; }
.dash-panel-title { color: var(--op-ink); }
.attn { background: #fff; border-color: var(--op-line); }
.attn.sev-good { background: #EAF9F1; }
.attn-title { color: var(--op-ink); }
.attn-detail { color: var(--op-sub); }
.attn-act { color: #0c8a5c; }
.quick { background: rgba(41,212,138,.05); }
.quick:hover { border-color: rgba(41,212,138,.38); background: rgba(41,212,138,.10); }
.quick-ico { background: rgba(41,212,138,.12); color: #0c8a5c; }
.quick-lab { color: var(--op-ink); }

/* ============================================================================
 * CHAT sidebar (right) — dark emerald assistant panel
 * ==========================================================================*/
.sidebar { background: var(--op-sidebar); }
.side-head { background: var(--op-sidebar); border-bottom: 1px solid rgba(255,255,255,.08); }
.side-head .t { color: #fff; }
#chat { background: var(--op-sidebar); }

/* Message bubbles float as light cards on the dark panel */
.msg .body {
  background: #fff; border: none; color: var(--op-ink);
  border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.msg.user .body { background: var(--op-mint); color: #0A332E; }
.msg.assistant .avatar { background: var(--op-brand); color: #06302a; }
.msg.user .avatar { background: var(--op-mint); color: #0A332E; }
/* The role caption sits inside the light message bubble (white / mint), so it
   needs dark ink, not the white used elsewhere on the dark chat panel. */
.role { color: var(--op-ink); }
.typing { color: rgba(255,255,255,.6); }
.md strong { color: var(--op-ink); }
.md code { background: rgba(41,212,138,.14); color: #0c6e49; }

/* Tool + error cards inside the dark chat */
.toolcard { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.toolcard .t-title { color: var(--op-mint); }
.toolcard .t-ms { color: var(--op-mint); }
.toolcard pre { background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.10); color: #d6f3e6; }

/* Performance footer on the dark chat panel */
.perf-seg { color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); }
.perf-seg.perf-total { color: var(--op-brand); background: rgba(41,212,138,.16); }
.perf-item { color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }

/* Composer — dark with a mint-green send */
.composer { background: var(--op-sidebar); border-top: 1px solid rgba(255,255,255,.08); }
.composer-box { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.14); }
.composer-box textarea { color: #fff; }
.composer-box textarea::placeholder { color: rgba(255,255,255,.5); }
.composer-box:focus-within {
  border-color: var(--op-brand); box-shadow: 0 0 0 4px rgba(41,212,138,.22);
}
.send-btn { background: var(--op-brand); color: #06302a; }
.send-btn:hover { background: var(--op-brand-2); }
.send-btn:disabled { background: rgba(255,255,255,.18); color: rgba(255,255,255,.4); }
.cam-btn {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.8);
}
.cam-btn:hover { border-color: var(--op-brand); color: var(--op-brand); background: rgba(255,255,255,.12); }
.composer-foot .hint { color: rgba(255,255,255,.45); }
.ghost { color: rgba(255,255,255,.55); }
.ghost:hover { color: #fff; background: rgba(255,255,255,.10); }
/* The `.ghost` styling above is for the DARK chat composer. The same class is
   reused for secondary buttons inside the LIGHT modals (signature pad, diff
   viewer, security) — there, white-on-white is unreadable, so keep ghost dark. */
.modal .ghost { color: var(--op-sub); }
.modal .ghost:hover { color: var(--op-ink); background: rgba(41,212,138,.12); }

/* ============================================================================
 * View cards on the stage (detail / list / tree / form / report)
 * ==========================================================================*/
.v-card-title { color: var(--op-ink); }

/* Barcode badge — OmniPost uses `type:badge` only for tracking BARCODES, so render
   it as a scan-code chip (mono text + stripes), not the yellow number-plate the
   base style gives (that look is for Park Bot's vehicle reg plates). */
.v-badge {
  display: inline-flex; align-items: center; gap: 8px; vertical-align: middle;
  font-family: ui-monospace, Consolas, monospace; font-weight: 600; letter-spacing: .14em;
  font-size: 13px; color: var(--op-ink);
  background: #fff; border: 1px solid var(--op-line); border-radius: 8px;
  padding: 5px 11px 5px 8px; box-shadow: var(--op-shadow);
}
.v-badge::before {
  content: ""; flex: 0 0 22px; height: 17px; border-radius: 2px;
  background-image: repeating-linear-gradient(90deg,
    #122622 0 1px, #fff 1px 3px, #122622 3px 4px, #fff 4px 7px,
    #122622 7px 9px, #fff 9px 10px, #122622 10px 11px, #fff 11px 14px);
}
.notch {
  background: var(--op-card); border: 1px solid var(--op-line);
  border-radius: var(--op-radius); box-shadow: var(--op-shadow); padding: 22px;
}
.notch-label { background: var(--op-card); color: var(--op-brand); }
.v-value, .v-list-title, .v-node > .v-node-label { color: var(--op-ink); }
.v-label, .v-list-sub, .v-form-label { color: var(--op-sub); }
.v-actbtn.primary { background: var(--op-brand); color: #06302a; }
.v-actbtn.primary:hover { background: #1fb377; color: #fff; }
.v-input:focus { border-color: var(--op-brand); box-shadow: 0 0 0 3px rgba(41,212,138,.16); }
.v-toggle { accent-color: var(--op-brand); }
.v-bar-fill { background: var(--op-brand); }
.v-children > .v-node { background: #fff; border-color: var(--op-line); border-radius: 12px; }

/* Suggested-action rows (scan / call results) */
.sa { background: var(--op-card); border: 1px solid var(--op-line); border-radius: 14px; }
.sa:hover { border-color: rgba(41,212,138,.42); box-shadow: 0 8px 20px rgba(10,51,46,.10); }
.sa.primary { background: rgba(41,212,138,.08); border-color: rgba(41,212,138,.28); }
.sa-label { color: var(--op-ink); }

/* ---- Login screen — now a full-bleed dark stage (see base CSS). The green
   wordmark sits straight on the dark glass; the old light-card logo pill and
   dark ink title would be invisible here, so they're dropped. --------------- */
.login-title { color: #fff; }