/* ============================================================================
   ByteCraft POS — owner-dashboard theme: "Dabang" look & feel.
   Loaded AFTER tokens.css/ui.css/dash.css and scoped to body.shell-dash, so
   the cashier till keeps its own approved skin. Maps the reference design:
   light lavender canvas · WHITE sidebar with indigo active pill + gradient
   promo card · topstrip with pill search, alerts bell and avatar menu ·
   borderless white cards (r20, soft shadow, hover lift) · pastel KPI stat
   tiles with colored circle icons · blue/green/purple chart palette ·
   "Top Products" rows with rank + popularity bar + outlined % pill ·
   Poppins type · staggered entrance + microinteraction animations.
   ========================================================================== */

@font-face { font-family: "Poppins"; src: url("/static/core/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/core/fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/core/fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/static/core/fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

body.shell-dash {
  /* ---- theme tokens ---- */
  --db-ink: #151d48;
  --db-muted: #737791;
  --db-faint: #a3aed0;
  --db-bg: #fafbff;
  --db-indigo: #5d5fef;
  --db-indigo-2: #7879f1;
  --db-line: #eef1f8;
  --db-shadow: 0 4px 24px rgba(46, 45, 116, .06);
  --db-shadow-lift: 0 12px 32px rgba(46, 45, 116, .12);
  --db-r: 20px;
  /* pastel stat tiles (bg / icon-circle / delta-text) */
  --pa1-bg: #ffe2e5; --pa1-ic: #fa5a7d; --pa1-tx: #d4486b;
  --pa2-bg: #fff4de; --pa2-ic: #ff947a; --pa2-tx: #c97a28;
  --pa3-bg: #dcfce7; --pa3-ic: #3cd856; --pa3-tx: #15803d;
  --pa4-bg: #f3e8ff; --pa4-ic: #bf83ff; --pa4-tx: #7c3aed;
  /* chart palette consumed by charts.js (refreshPalette) */
  --ch-cash: #00e096;
  --ch-eco: #0095ff;
  --ch-inn: #884dff;
  --ch-line: #5d5fef;
  /* remap shared tokens used by ui.css components */
  --ink: var(--db-ink);
  --ink-2: #444a6d;
  --ink-3: var(--db-muted);
  --bg: var(--db-bg);
  --line: var(--db-line);
  --line-2: #e2e6f2;
  --surface-2: #f6f8fd;
  --photo-well: #f6f8fd;
  --navy-50: #f0f2fd;
  --r-lg: var(--db-r);
  --r-md: 12px;
  --shadow-1: var(--db-shadow);
  --ring: var(--db-indigo);
  font-family: "Poppins", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--db-bg);
  color: var(--db-ink);
}

/* ====== Sidebar: WHITE, indigo active pill, generous spacing ============= */
body.shell-dash .sidenav {
  background: #fff;
  border-right: 1px solid var(--db-line);
}
body.shell-dash .sidenav .brand { padding: 26px 22px 14px; }
body.shell-dash .sidenav .brand img { height: 30px; }
body.shell-dash .sidenav .mname { color: var(--db-ink); font: 600 .9375rem/1.3 inherit; }
body.shell-dash .sidenav .sectag { background: #f0f2fd; color: var(--db-indigo); }
body.shell-dash .snav { padding: 10px 16px; gap: 4px; }
body.shell-dash .snav .grp { color: var(--db-faint); margin: 18px 12px 6px; }
body.shell-dash .snav a, body.shell-dash .snav button {
  color: var(--db-muted); height: 44px; border-radius: 12px;
  font-weight: 500; transition: background .18s ease, color .18s ease, transform .18s ease;
}
body.shell-dash .snav a:hover, body.shell-dash .snav button:hover {
  background: #f4f5ff; color: var(--db-ink); transform: translateX(2px);
}
body.shell-dash .snav a.active {
  background: var(--db-indigo); color: #fff; font-weight: 600;
  box-shadow: 0 8px 18px rgba(93, 95, 239, .32);
}
body.shell-dash .snav a.active::before { display: none; } /* pill replaces the gold bar */
body.shell-dash .sidenav .foot { border-top: 0; padding: 14px 16px 18px; }

/* Promo-style card (reference: gradient card + white pill button) */
body.shell-dash .procard {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 20px 16px 18px; border-radius: 16px; text-decoration: none;
  background: linear-gradient(150deg, var(--db-indigo) 0%, var(--db-indigo-2) 100%);
  box-shadow: 0 10px 24px rgba(93, 95, 239, .35);
  transition: transform .18s ease, box-shadow .18s ease;
}
body.shell-dash .procard:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(93, 95, 239, .45); }
body.shell-dash .procard .pic {
  width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 4px;
}
body.shell-dash .procard .pic svg { width: 20px; height: 20px; }
body.shell-dash .procard .pt1 { color: #fff; font: 600 .9rem/1.3 inherit; }
body.shell-dash .procard .pt2 { color: rgba(255,255,255,.78); font: 400 .72rem/1.4 inherit; }
body.shell-dash .procard .pbtn {
  margin-top: 10px; background: #fff; color: var(--db-indigo);
  font: 600 .78rem/1 inherit; padding: 9px 18px; border-radius: 999px;
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  body.shell-dash .procard { padding: 10px 6px; border-radius: 12px; }
  body.shell-dash .procard .pt1, body.shell-dash .procard .pt2,
  body.shell-dash .procard .pbtn { display: none; }
  body.shell-dash .procard .pic { margin: 0; }
}

/* ====== Topstrip: title · search pill · mode/bell/avatar ================= */
body.shell-dash .topstrip {
  display: flex; align-items: center; gap: 18px; min-height: 52px;
}
body.shell-dash .topstrip h1 { font: 600 1.45rem/1.2 inherit; color: var(--db-ink); }
body.shell-dash .gsearch {
  position: relative; flex: 1; max-width: 420px; margin-left: auto;
}
body.shell-dash .gsearch input {
  width: 100%; min-height: 44px; border: 0; border-radius: 14px;
  background: #fff; box-shadow: var(--db-shadow);
  padding: 10px 16px 10px 44px; font: 400 .85rem/1.4 inherit; color: var(--db-ink);
  transition: box-shadow .18s ease;
}
body.shell-dash .gsearch input::placeholder { color: var(--db-faint); }
body.shell-dash .gsearch input:focus { outline: none; box-shadow: 0 0 0 3px rgba(93,95,239,.25), var(--db-shadow); }
body.shell-dash .gsearch .gsic {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--db-indigo); display: inline-flex;
}
body.shell-dash .gsearch .gsic svg { width: 18px; height: 18px; }
body.shell-dash .topright { display: flex; align-items: center; gap: 12px; }
body.shell-dash .chipbtn {
  display: inline-flex; align-items: center; gap: 6px; background: #fff;
  border: 0; border-radius: 12px; padding: 8px 12px; cursor: pointer;
  box-shadow: var(--db-shadow); color: var(--db-muted);
  transition: transform .15s ease, box-shadow .15s ease;
}
body.shell-dash .chipbtn:hover { transform: translateY(-1px); box-shadow: var(--db-shadow-lift); }
body.shell-dash .caret { display: inline-flex; color: var(--db-faint); transform: rotate(90deg); }
body.shell-dash .caret svg { width: 14px; height: 14px; }
body.shell-dash .bell {
  position: relative; width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: #fff; box-shadow: var(--db-shadow); color: var(--db-indigo);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.shell-dash .bell:hover { transform: translateY(-1px); box-shadow: var(--db-shadow-lift); }
body.shell-dash .bell svg { width: 20px; height: 20px; }
body.shell-dash .bell .bdot {
  position: absolute; top: 7px; right: 7px; min-width: 16px; height: 16px;
  border-radius: 999px; background: #f64e60; color: #fff;
  font: 700 .58rem/16px inherit; text-align: center; padding: 0 3px;
  border: 2px solid #fff; box-sizing: content-box;
  animation: belldot 2.4s ease-in-out infinite;
}
@keyframes belldot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
body.shell-dash .avatarbtn {
  display: inline-flex; align-items: center; gap: 10px; background: #fff;
  border: 0; border-radius: 14px; padding: 6px 12px 6px 6px; cursor: pointer;
  box-shadow: var(--db-shadow); transition: transform .15s ease, box-shadow .15s ease;
}
body.shell-dash .avatarbtn:hover { transform: translateY(-1px); box-shadow: var(--db-shadow-lift); }
body.shell-dash .avi {
  width: 36px; height: 36px; border-radius: 12px; color: #fff;
  background: linear-gradient(150deg, var(--db-indigo), var(--db-indigo-2));
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 .95rem/1 inherit;
}
body.shell-dash .avt { display: flex; flex-direction: column; align-items: flex-start; }
body.shell-dash .avn { font: 600 .78rem/1.25 inherit; color: var(--db-ink); max-width: 130px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.shell-dash .avr { font: 400 .68rem/1.2 inherit; color: var(--db-faint); }
body.shell-dash .topright { position: relative; }
body.shell-dash .avmenu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 80;
  background: #fff; border-radius: 14px; box-shadow: var(--db-shadow-lift);
  padding: 8px; min-width: 200px; animation: menuin .16s ease-out both;
}
@keyframes menuin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
body.shell-dash .avmenu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; border-radius: 10px; padding: 11px 12px;
  font: 500 .82rem/1.3 inherit; color: var(--db-ink); cursor: pointer;
}
body.shell-dash .avmenu button:hover { background: #f4f5ff; color: var(--db-indigo); }
body.shell-dash .avmenu button svg { width: 18px; height: 18px; }
@media (max-width: 899.98px) {
  body.shell-dash .gsearch { display: none; }
  body.shell-dash .avt, body.shell-dash .avatarbtn .caret { display: none; }
  body.shell-dash .avatarbtn { padding: 6px; }
}
@media (max-width: 767.98px) {
  body.shell-dash .topstrip { flex-wrap: wrap; gap: 10px; }
  body.shell-dash .chipbtn { display: none; } /* mobile topbar owns the pill */
}

/* live dot: indigo */
body.shell-dash .live .dot { background: var(--db-indigo); }
body.shell-dash .live { color: var(--db-faint); }

/* ====== Cards: borderless, r20, soft shadow, hover lift ================== */
body.shell-dash .card, body.shell-dash .chartcard, body.shell-dash .tablecard,
body.shell-dash .kpi {
  border: 0; border-radius: var(--db-r); box-shadow: var(--db-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
body.shell-dash .card:hover, body.shell-dash .chartcard:hover,
body.shell-dash .tablecard:hover { transform: translateY(-3px); box-shadow: var(--db-shadow-lift); }
body.shell-dash .cardhead { font: 600 1.02rem/1.3 inherit; color: var(--db-ink); }
body.shell-dash .ctitle { font: 600 1.02rem/1.3 inherit; color: var(--db-ink); }
body.shell-dash .headic { color: var(--db-faint); }

/* ====== KPI wrap ("Today's Sales" card) + pastel stat tiles ============== */
body.shell-dash .kpiwrap { padding: 0 0 22px; }
body.shell-dash .kpiwrap:hover { transform: none; box-shadow: var(--db-shadow); }
body.shell-dash .kpiwrap .cardhead { padding: 22px 22px 4px; align-items: flex-start; }
body.shell-dash .kpiwrap .kwt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.shell-dash .kpiwrap .kwt .t1 { font: 600 1.05rem/1.3 inherit; color: var(--db-ink); }
body.shell-dash .kpiwrap .kwt .t2 { font: 400 .76rem/1.4 inherit; color: var(--db-faint); }
body.shell-dash .btn-export {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #e2e6f2; border-radius: 12px;
  color: var(--db-muted); font: 500 .78rem/1 inherit; padding: 10px 16px;
}
body.shell-dash .btn-export:hover { border-color: var(--db-indigo); color: var(--db-indigo); background: #fff; }
body.shell-dash .btn-export svg { width: 16px; height: 16px; }
body.shell-dash .kpiwrap .kpis { padding: 16px 22px 0; margin: 0; }

/* the tiles themselves — pastel cycle, icon circle, big numerals */
body.shell-dash .kpi {
  position: relative; padding: 18px; border-radius: 16px; box-shadow: none;
  transition: transform .2s ease;
}
body.shell-dash .kpi:hover { transform: translateY(-3px) scale(1.01); }
body.shell-dash .kpis .kpi:nth-child(4n+1) { background: var(--pa1-bg); }
body.shell-dash .kpis .kpi:nth-child(4n+2) { background: var(--pa2-bg); }
body.shell-dash .kpis .kpi:nth-child(4n+3) { background: var(--pa3-bg); }
body.shell-dash .kpis .kpi:nth-child(4n+4) { background: var(--pa4-bg); }
body.shell-dash .kpi .kic {
  width: 40px; height: 40px; border-radius: 999px; color: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
body.shell-dash .kpi .kic svg { width: 20px; height: 20px; }
body.shell-dash .kpis .kpi:nth-child(4n+1) .kic { background: var(--pa1-ic); }
body.shell-dash .kpis .kpi:nth-child(4n+2) .kic { background: var(--pa2-ic); }
body.shell-dash .kpis .kpi:nth-child(4n+3) .kic { background: var(--pa3-ic); }
body.shell-dash .kpis .kpi:nth-child(4n+4) .kic { background: var(--pa4-ic); }
body.shell-dash .kpi .value { font: 700 1.45rem/1.15 inherit; color: var(--db-ink); letter-spacing: -.01em; }
body.shell-dash .kpi .label { font: 500 .8rem/1.35 inherit; color: #425166; margin-top: 4px;
  text-transform: none; letter-spacing: 0; }
body.shell-dash .kpi .sub { font: 400 .7rem/1.4 inherit; margin-top: 6px; }
body.shell-dash .kpis .kpi:nth-child(4n+1) .sub { color: var(--pa1-tx); }
body.shell-dash .kpis .kpi:nth-child(4n+2) .sub { color: var(--pa2-tx); }
body.shell-dash .kpis .kpi:nth-child(4n+3) .sub { color: var(--pa3-tx); }
body.shell-dash .kpis .kpi:nth-child(4n+4) .sub { color: var(--pa4-tx); }
body.shell-dash .kpi .value.neg { color: #d4486b; }
/* bare KPI strips (e.g. Inventory flow) get the same pastel cycle */

/* ====== Segmented period toggle ========================================== */
body.shell-dash .seg { background: #fff; border: 0; border-radius: 12px; box-shadow: var(--db-shadow); padding: 4px; }
body.shell-dash .seg button { color: var(--db-muted); border-radius: 9px; font-weight: 500; transition: background .18s ease, color .18s ease; }
body.shell-dash .seg button.active { background: var(--db-indigo); color: #fff; border: 0; box-shadow: 0 6px 14px rgba(93,95,239,.3); }

/* ====== Tables: airy, no heavy chrome ==================================== */
body.shell-dash table.data th {
  background: transparent; color: var(--db-faint);
  font: 500 .68rem/1.4 inherit; letter-spacing: .05em;
  border-bottom: 1px solid var(--db-line);
}
body.shell-dash table.data td { border-bottom: 1px solid #f3f5fb; color: #444a6d; }
body.shell-dash table.data tbody tr:hover td { background: #f8f9ff; }
body.shell-dash table.data tr.total td { border-top: 1px solid var(--db-line); color: var(--db-ink); }

/* ====== "Top Products" rows ============================================== */
body.shell-dash .tprow {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 26px 36px minmax(0, 1.1fr) minmax(60px, 1fr) 56px;
  padding: 11px 0; border-bottom: 1px solid #f3f5fb;
}
body.shell-dash .tprow:last-child { border-bottom: 0; }
body.shell-dash .tprank { color: var(--db-muted); font: 500 .8rem/1 inherit; }
body.shell-dash .tprow .thumb { width: 36px; height: 36px; border-radius: 10px; border: 0; }
body.shell-dash .tpname { font: 500 .82rem/1.35 inherit; color: var(--db-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.shell-dash .tptrack { height: 5px; border-radius: 999px; background: #f0f2fa; overflow: hidden; }
body.shell-dash .tpfill { display: block; height: 100%; border-radius: 999px; width: 0;
  animation: tpgrow .7s cubic-bezier(.22,.8,.36,1) both; animation-delay: .15s; }
@keyframes tpgrow { from { width: 0 !important; } }
body.shell-dash .tppill {
  justify-self: end; font: 500 .72rem/1 inherit; padding: 5px 10px;
  border: 1px solid; border-radius: 9px; background: #fff;
}
@media (max-width: 599.98px) {
  body.shell-dash .tprow { grid-template-columns: 22px 32px minmax(0,1fr) 52px; }
  body.shell-dash .tptrack { display: none; }
}

/* ====== Buttons & pills ================================================== */
body.shell-dash .btn-primary { background: var(--db-indigo); border-radius: 12px; box-shadow: 0 8px 18px rgba(93,95,239,.3); }
body.shell-dash .btn-primary:hover { background: #4b4ddc; }
body.shell-dash .btn-secondary { border-color: #e2e6f2; border-radius: 12px; color: var(--db-muted); }
body.shell-dash .btn-secondary:hover { background: #f4f5ff; color: var(--db-indigo); }
body.shell-dash .pill { border-radius: 9px; }
body.shell-dash .modepill { box-shadow: none; }

/* list rows + thumbs soften */
body.shell-dash .lrow .thumb { border: 0; border-radius: 10px; }
body.shell-dash .empty .eic { background: #f4f5ff; color: var(--db-indigo); }

/* h-bar category rows pick up the indigo family (leader = solid indigo) */
body.shell-dash .hbar .fill { background: var(--db-indigo-2); }
body.shell-dash .hbar .fill.max { background: var(--db-indigo); }
body.shell-dash .hbar .track, body.shell-dash .track { background: #f0f2fa; }

/* ====== Mobile chrome: white topbar + bottom nav ========================= */
body.shell-dash .topbar { background: #fff; color: var(--db-ink); box-shadow: var(--db-shadow); }
body.shell-dash .topbar .ttl { color: var(--db-ink); }
body.shell-dash .bnav { background: #fff; border-top: 1px solid var(--db-line); }
body.shell-dash .bnav button { color: var(--db-faint); }
body.shell-dash .bnav button.active { color: var(--db-indigo); }
body.shell-dash .bnav button.active::before { background: var(--db-indigo); }

/* ====== Login card ======================================================= */
body.shell-dash .logincard { border: 0; border-radius: var(--db-r); box-shadow: var(--db-shadow-lift); }

/* ====== Charts cosmetics ================================================= */
body.shell-dash .chartcard .hero { font: 700 1.3rem/1.2 inherit; color: var(--db-ink); }
body.shell-dash .legend { color: var(--db-muted); }
body.shell-dash .charttip { border-radius: 10px; }

/* Payment split: the card stretches to match its taller row-mate, so compose
   it VERTICALLY — donut centered with breathing room, legend as full-width
   divider rows beneath (the reference's "Target vs Reality" list pattern).
   No more content huddled top-left over a dead bottom half. */
body.shell-dash .donutcard { display: flex; flex-direction: column; }
body.shell-dash .donutcard .donutrow {
  flex: 1; flex-direction: column; justify-content: center;
  gap: 20px; padding: 10px 0 2px;
}
body.shell-dash .donutcard .donutsvg { width: 168px; height: 168px; margin: 0 auto; flex: none; }
body.shell-dash .donutcard .legend.col { width: 100%; flex: none; gap: 0; }
body.shell-dash .donutcard .legend.col .li {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 2px; border-bottom: 1px solid #f3f5fb;
  font: 500 .84rem/1.3 inherit; color: var(--db-muted);
  border-radius: 8px; transition: background .15s ease;
}
body.shell-dash .donutcard .legend.col .li:last-child { border-bottom: 0; }
body.shell-dash .donutcard .legend.col .li:hover { background: #f8f9ff; }
body.shell-dash .donutcard .legend.col .sw { width: 12px; height: 12px; border-radius: 4px; }
body.shell-dash .donutcard .legend.col .lv { margin-left: auto; color: var(--db-ink); font-weight: 600; }
body.shell-dash .donutcard .legend.col .lshare {
  color: var(--db-faint); min-width: 52px; text-align: right; font-weight: 500;
}

/* ====== Animations ======================================================= */
/* staggered block entrance on every fresh tab render */
body.shell-dash .blocks > .bin {
  animation: blockin .5s cubic-bezier(.22,.8,.36,1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes blockin {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
/* KPI tiles cascade inside their card */
body.shell-dash .bin .kpis .kpi { animation: tilein .45s cubic-bezier(.22,.8,.36,1) both; }
body.shell-dash .bin .kpis .kpi:nth-child(1) { animation-delay: .08s; }
body.shell-dash .bin .kpis .kpi:nth-child(2) { animation-delay: .16s; }
body.shell-dash .bin .kpis .kpi:nth-child(3) { animation-delay: .24s; }
body.shell-dash .bin .kpis .kpi:nth-child(4) { animation-delay: .32s; }
body.shell-dash .bin .kpis .kpi:nth-child(5) { animation-delay: .4s; }
@keyframes tilein {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: none; }
}
/* sidebar active pill micro-pop when it lands */
body.shell-dash .snav a.active { animation: pillpop .25s ease-out; }
@keyframes pillpop { 50% { transform: scale(1.03); } }

/* ===== Top-bar till button + notification center (bus fleet + all sectors) ===== */
.tillbtn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:11px;
  background:var(--brand,#5d5fef);color:#fff;font-weight:600;font-size:13.5px;text-decoration:none;border:none;cursor:pointer}
.tillbtn:hover{filter:brightness(1.05)}
.tillbtn [data-icon]{display:inline-flex;width:17px;height:17px}
@media(max-width:640px){.tillbtn .tilllbl{display:none}.tillbtn{padding:0 11px}}
.bellwrap{position:relative;display:inline-flex}
.bellmenu{position:absolute;top:48px;right:0;width:340px;max-width:88vw;background:#fff;border-radius:16px;
  box-shadow:0 16px 48px rgba(20,35,59,.18);border:1px solid #eef1f6;z-index:60;overflow:hidden;padding:6px}
.bellhead{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 8px;font-weight:700;color:#14233b;font-size:14px}
.bellclear{background:none;border:none;color:var(--brand,#5d5fef);font-weight:700;font-size:12.5px;cursor:pointer}
.bellempty{display:flex;flex-direction:column;align-items:center;gap:8px;color:#6b7890;font-size:13px;padding:26px 10px}
.bellempty [data-icon]{width:24px;height:24px;color:#1fa97a}
.belllist{max-height:60vh;overflow:auto}
.bellitem{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:11px}
.bellitem:hover{background:#f7f9fc}
.bellitem .bsev{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:none;background:#9aa6ba}
.bellitem.sev-warning .bsev{background:#f0a500}
.bellitem.sev-critical .bsev{background:#e2483d}
.bellitem.sev-info .bsev{background:#0095ff}
.bellitem .bbody{flex:1;min-width:0}
.bellitem .bmsg{font-size:13px;color:#14233b;font-weight:500;line-height:1.35}
.bellitem .bsub{font-size:11.5px;color:#6b7890;margin-top:2px}
.bellx{background:none;border:none;color:#1fa97a;cursor:pointer;padding:2px;flex:none;display:inline-flex}
.bellx [data-icon]{width:16px;height:16px}

/* ============ Dashboard UI pass 2026-06-14 ============ */
/* --- buttons: one consistent size everywhere; never wrap --- */
body.shell-dash .btn{min-height:38px;padding:0 15px;font-size:13.5px;font-weight:600;
  white-space:nowrap;border-radius:11px;gap:7px}
body.shell-dash .actions .btn,body.shell-dash .actions .input{min-height:38px}
body.shell-dash .btn-sm{min-height:30px;padding:0 11px;font-size:12.5px;border-radius:9px}
body.shell-dash .btn svg,body.shell-dash .btn [data-icon]{width:16px;height:16px;flex:none}
body.shell-dash .btn-danger{background:#e2483d;color:#fff;border-color:#e2483d}
body.shell-dash .btn-danger:hover{background:#cc3f35}
body.shell-dash .btn-dangerghost{color:#e2483d;background:#fdecea;border-color:transparent}
body.shell-dash .btn-dangerghost:hover{background:#fbdbd7}

/* --- segmented control (Tickets, Operations) --- */
body.shell-dash .fseg{display:inline-flex;background:#eef1f6;border-radius:11px;padding:3px;gap:2px}
body.shell-dash .fseg button{border:0;background:none;font:600 13px var(--font-ui);color:#6b7890;
  padding:7px 15px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:all .15s}
body.shell-dash .fseg button.on{background:#fff;color:var(--db-indigo);box-shadow:0 1px 3px rgba(20,35,59,.1)}

/* --- concept explainer banner (Operations) --- */
body.shell-dash .explain{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
body.shell-dash .explain .ex{flex:1;min-width:180px;background:#f7f8fc;border:1px solid #eef1f6;
  border-radius:12px;padding:11px 13px}
body.shell-dash .explain .ex b{display:block;font-size:12.5px;color:#14233b;margin-bottom:2px}
body.shell-dash .explain .ex span{font-size:12px;color:#6b7890;line-height:1.4}
body.shell-dash .explain .ex.on{border-color:var(--db-indigo);background:#f1f1ff}

/* --- modals: cleaner + shorter (2-col field grid, tighter rhythm) --- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.grid2 .field{margin-bottom:11px!important}
#dlg .field{margin-bottom:11px}
#dlg .dlg-foot{border-top:1px solid #eef1f6;padding-top:14px;margin-top:6px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}

/* --- live map: permanent bus labels + filter bar --- */
.busmk .blabel{position:absolute;left:18px;top:3px;background:#14233b;color:#fff;font:700 10.5px var(--font-ui);
  padding:2px 6px;border-radius:6px;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.3);pointer-events:none}
.busmk.dim{opacity:.2}
.mapbar{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border-bottom:1px solid #eef1f6;flex-wrap:wrap}
.mapbar .input{max-width:240px;min-height:34px}