/* ==========================================================================
   VFF Motors — Business Manager
   Design system: compact, modern, mobile-first, light/dark
   ========================================================================== */

/* Self-hosted Inter (variable, weights 100–900) — works fully offline in the PWA */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/InterVariable.woff2") format("woff2-variations"),
       url("../assets/fonts/InterVariable.woff2") format("woff2");
}

:root {
  --brand: #1f9d55;
  --brand-600: #17864a;
  --brand-700: #106b3b;
  --brand-050: #e8f7ee;
  --navy: #16233f;
  --navy-800: #1d2c4d;
  --navy-700: #24365c;
  --ink: #131a26;
  --ink-soft: #47546a;
  --muted: #7d8798;
  --line: #e7ebf1;
  --line-strong: #d8dee8;
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f4f9;
  --green: #1f9d55;
  --green-bg: #e8f7ee;
  --amber: #c77d00;
  --amber-bg: #fff3dd;
  --red: #d64545;
  --red-bg: #fdecec;
  --blue: #2f6fed;
  --blue-bg: #e9f0fe;
  --violet: #7a5af8;
  --violet-bg: #efeafe;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-md: 0 2px 6px rgba(16, 24, 40, .05), 0 8px 22px rgba(16, 24, 40, .06);
  --shadow-lg: 0 12px 40px rgba(16, 24, 40, .16);
  --radius: 13px;
  --radius-sm: 9px;
  --radius-xs: 7px;
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: "Inter", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --ink: #e9edf4;
  --ink-soft: #b7c1d1;
  --muted: #8b97a9;
  --line: #263144;
  --line-strong: #33415a;
  --bg: #0c1422;
  --surface: #141f31;
  --surface-2: #19263b;
  --surface-3: #1f2d45;
  --brand-050: #11301f;
  --amber-bg: #3a2c10;
  --red-bg: #3a1c1c;
  --blue-bg: #16294a;
  --violet-bg: #241d45;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  font-optical-sizing: auto;
  font-feature-settings: "cv05" 1, "cv08" 1, "calt" 1, "kern" 1;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;      /* fallback for older engines */
  overflow-x: clip;        /* modern: clips without creating a scroll container (keeps sticky topbar) */
  max-width: 100%;
}
/* Numbers line up cleanly in tables, money and KPI figures */
.tbl td.num, .tbl th.num, .amt-cur, .stat-hero__value, .kpi__value, .money, .mono { font-variant-numeric: tabular-nums; }
a { color: var(--brand); text-decoration: none; }
strong, b { font-weight: 600; }
button { font-family: inherit; }
::selection { background: var(--brand); color: #fff; }

/* Global icon sizing — prevents oversized inline SVGs */
svg { width: 16px; height: 16px; flex: 0 0 auto; display: block; }

/* Scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #c3ccda; border-radius: 20px; border: 2px solid transparent; background-clip: content-box; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #33415a; background-clip: content-box; }

/* ============================ Layout ============================ */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #16233f 0%, #131e37 100%);
  color: #cdd7e6;
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  z-index: 60;
  transition: transform .25s ease;
}
.sidebar__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar__brand img { height: 30px; width: auto; filter: brightness(1.06); }
.sidebar__brand .sub { font-size: 10px; color: #8ea0bd; letter-spacing: .07em; text-transform: uppercase; }

.nav { padding: 8px 10px 18px; overflow-y: auto; flex: 1; }
.nav__group-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em;
  color: #6f81a3; padding: 13px 12px 5px; font-weight: 500;
}
.nav__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: 9px;
  color: #c2cde0; cursor: pointer; font-size: 13px; font-weight: 500;
  border: none; background: none; width: 100%; text-align: left;
  transition: background .15s, color .15s;
}
.nav__item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav__item.active { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(31,157,85,.34); }
.nav__item .ic { width: 17px; height: 17px; flex: 0 0 17px; display: grid; place-items: center; }
.nav__item .ic svg { width: 17px; height: 17px; }
.nav__badge { margin-left: auto; background: var(--red); color: #fff; font-size: 10px; font-weight: 500; padding: 1px 7px; border-radius: 20px; }

.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }

/* ---- Page header (title + actions) ---- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head__t { min-width: 0; }
.page-head__title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.022em; line-height: 1.15; }
.page-head__sub { margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.topbar {
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; position: sticky; top: 0; z-index: 40;
}
.topbar__menu { display: none; }
.topbar__titles { min-width: 0; overflow: hidden; }
.topbar__title { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__crumb { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.content { padding: 16px; flex: 1; min-width: 0; max-width: 1400px; width: 100%; margin: 0 auto; }

/* ============================ Buttons ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: transform .05s, background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { border-color: #c3cddb; background: var(--surface-2); box-shadow: var(--shadow-xs); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(31,157,85,.3); }
.btn--primary:hover { background: var(--brand-600); border-color: var(--brand-600); box-shadow: 0 4px 12px rgba(31,157,85,.28); }
.btn--dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-800); }
.btn--danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn--danger:hover { filter: brightness(.95); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--surface-2); box-shadow: none; }
.btn--sm { padding: 5px 9px; font-size: 11.5px; border-radius: var(--radius-xs); gap: 5px; }
.btn--sm svg { width: 14px; height: 14px; }
.btn--icon { padding: 7px; width: 34px; height: 34px; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ============================ Cards ============================ */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card__head { padding: 11px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; row-gap: 9px; }
.card__head h3 { margin: 0; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.card__head h3 svg { width: 15px; height: 15px; color: var(--brand); }
.card__head .sub { font-size: 11px; color: var(--muted); }
.card__body { padding: 15px; }
.card__foot { padding: 11px 15px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }

.grid { display: grid; gap: 13px; }
.grid > * { min-width: 0; }
.grid--kpi { grid-template-columns: repeat(auto-fit, minmax(min(185px, 100%), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 9px; }
.spacer { flex: 1; }

/* ============================ KPI ============================ */
.kpi {
  padding: 12px 13px; display: flex; flex-direction: column; gap: 3px;
  position: relative; overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--kpi-accent, var(--brand)); opacity: .9;
}
.kpi__label { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 500; padding-right: 38px; }
.kpi__value { font-size: 15px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi__meta { font-size: 10.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 5px; }
.kpi__ic {
  position: absolute; top: 13px; right: 13px; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
}
.kpi__ic svg { width: 16px; height: 16px; }
.trend-up { color: var(--brand); font-weight: 600; }
.trend-down { color: var(--red); font-weight: 600; }

/* ============================ Alert list ============================ */
.alert-list { display: flex; flex-direction: column; }
.alert-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 4px; border-bottom: 1px solid var(--line);
}
.alert-row:last-child { border-bottom: none; }
.alert-ic {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 32px;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-soft);
}
.alert-ic svg { width: 16px; height: 16px; }
.alert-ic--red { background: var(--red-bg); color: var(--red); }
.alert-ic--amber { background: var(--amber-bg); color: var(--amber); }
.alert-ic--blue { background: var(--blue-bg); color: var(--blue); }
.alert-ic--green { background: var(--brand-050); color: var(--brand-700); }
.alert-ic--violet { background: var(--violet-bg); color: var(--violet); }
.alert-main { flex: 1; min-width: 0; }
.alert-main .t { font-size: 12.5px; font-weight: 500; }
.alert-main .s { font-size: 11px; color: var(--muted); }
.alert-count {
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  min-width: 26px; height: 24px; padding: 0 8px; border-radius: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--ink-soft);
}
.alert-count--red { background: var(--red-bg); color: var(--red); }
.alert-count--amber { background: var(--amber-bg); color: var(--amber); }
.alert-count--blue { background: var(--blue-bg); color: var(--blue); }
.alert-count--green { background: var(--brand-050); color: var(--brand-700); }

/* ============================ Tables ============================ */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tbl th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 500; padding: 9px 12px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); position: sticky; top: 0; white-space: nowrap; z-index: 1;
}
table.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr { transition: background .12s; }
table.tbl tbody tr:hover td { background: var(--surface-2); }
table.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl strong { font-weight: 600; }
.tbl-actions { display: flex; gap: 5px; justify-content: flex-end; }

/* ============================ Badges & pills ============================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 500; padding: 2.5px 8px; border-radius: 20px;
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line);
  white-space: nowrap;
}
.badge--green { background: var(--brand-050); color: var(--brand-700); border-color: transparent; }
.badge--amber { background: var(--amber-bg); color: var(--amber); border-color: transparent; }
.badge--red { background: var(--red-bg); color: var(--red); border-color: transparent; }
.badge--blue { background: var(--blue-bg); color: var(--blue); border-color: transparent; }
.badge--violet { background: var(--violet-bg); color: var(--violet); border-color: transparent; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* ============================ Forms ============================ */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }
.field label { font-size: 11.5px; font-weight: 500; color: var(--ink-soft); }
.field .hint { font-size: 10.5px; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; min-width: 0; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: 13px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,157,85,.15);
}
.textarea { resize: vertical; min-height: 66px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 13px; }
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch .track { width: 38px; height: 21px; border-radius: 20px; background: #cfd8e5; position: relative; transition: background .2s; flex: 0 0 auto; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s; }
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { transform: translateX(17px); }

/* ============================ Modal ============================ */
.modal-back {
  position: fixed; inset: 0; background: rgba(12,20,34,.5); backdrop-filter: blur(4px);
  display: none; align-items: flex-start; justify-content: center; z-index: 100; padding: 20px; overflow-y: auto;
}
.modal-back.open { display: flex; }
.modal {
  background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 620px;
  box-shadow: var(--shadow-lg); margin: auto; animation: pop .18s ease;
  border: 1px solid var(--line);
}
.modal--wide { max-width: 880px; }
@keyframes pop { from { transform: translateY(10px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__head { padding: 14px 17px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.modal__head h3 { margin: 0; font-size: 14px; }
.modal__body { padding: 17px; }
.modal__foot { padding: 13px 17px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }

/* ============================ Misc ============================ */
.toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--navy); color: #fff; padding: 10px 14px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 9px;
  animation: slidein .2s ease; max-width: 340px;
}
.toast--ok { background: var(--brand-700); }
.toast--err { background: var(--red); }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

.empty { text-align: center; padding: 34px 20px; color: var(--muted); }
.empty svg { width: 38px; height: 38px; opacity: .45; margin: 0 auto 8px; }
.muted { color: var(--muted); }
.small { font-size: 11px; }
.mono { font-family: var(--mono); overflow-wrap: anywhere; word-break: break-word; }
.nowrap { white-space: nowrap; }
.divider { height: 1px; background: var(--line); margin: 13px 0; }
.search { position: relative; flex: 1 1 130px; min-width: 0; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); }
.search .input { padding-left: 33px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 5px 11px; border-radius: 20px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 11.5px; font-weight: 500; cursor: pointer; transition: all .12s; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Timeline */
.timeline { position: relative; padding-left: 24px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 5px; bottom: 5px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 14px; }
.tl-item::before { content: ""; position: absolute; left: -21px; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); }
.tl-item.done::before { background: var(--brand); border-color: var(--brand); }
.tl-item.active::before { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-bg); }
.tl-item h4 { margin: 0 0 1px; font-size: 12.5px; }
.tl-item p { margin: 0; font-size: 11.5px; color: var(--muted); }

/* Progress bar */
.bar { height: 7px; border-radius: 20px; background: var(--line); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); border-radius: 20px; }

/* Tabs */
.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line); margin-bottom: 15px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 8px 13px; font-size: 12.5px; font-weight: 500; color: var(--muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .12s; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); }

/* Login */
.login-screen { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 20% -10%, #1f9d55 0%, #16233f 55%, #0d1526 100%); padding: 20px; }
.login-card { width: 100%; max-width: 390px; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 28px; }
.pin-input { letter-spacing: .4em; text-align: center; font-size: 17px; font-weight: 600; }

/* ---- Animated login logo (lightweight: transform/opacity only, GPU-composited) ---- */
.login-brand { text-align: center; margin-bottom: 18px; }
.login-logo-wrap { position: relative; display: inline-block; height: 56px; animation: logoIn .6s cubic-bezier(.2,.8,.25,1) both; }
.login-logo-wrap img { height: 56px; width: auto; display: block; position: relative; z-index: 2; animation: logoFloat 3.6s ease-in-out .6s infinite; will-change: transform; }
/* soft pulsing halo behind the logo */
.login-logo-wrap::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 145%; height: 175%;
  transform: translate(-50%, -50%); border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(31,157,85,.5), rgba(31,157,85,0) 72%);
  animation: logoHalo 3.6s ease-in-out .6s infinite; will-change: transform, opacity;
}
/* subtle shine sweep, clipped to the logo shape via its alpha channel */
.login-logo-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.92) 50%, transparent 62%);
  background-size: 260% 100%; background-repeat: no-repeat; background-position: 160% 0;
  -webkit-mask: url(../assets/logo.png) center/contain no-repeat; mask: url(../assets/logo.png) center/contain no-repeat;
  animation: logoShine 4.8s ease-in-out 1.1s infinite;
}
.login-title { font-weight: 600; font-size: 16px; margin-top: 10px; }

@keyframes logoIn { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes logoHalo { 0%, 100% { opacity: .4; transform: translate(-50%, -50%) scale(.94); } 50% { opacity: .85; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes logoShine { 0% { background-position: 160% 0; } 40% { background-position: -70% 0; } 100% { background-position: -70% 0; } }

@media (prefers-reduced-motion: reduce) {
  .login-logo-wrap, .login-logo-wrap img, .login-logo-wrap::before, .login-logo-wrap::after { animation: none !important; }
  .login-logo-wrap::after { display: none; }
}

/* Bottom nav (mobile) */
.bottom-nav { display: none; }

/* Print */
@media print {
  .sidebar, .topbar, .bottom-nav, .no-print, .toast-wrap { display: none !important; }
  .main { margin-left: 0 !important; }
  .content { padding: 0 !important; }
  body { background: #fff; }
  .print-area { display: block !important; }
}

/* ===================== Modern components (compact refresh) ===================== */

/* Avatar */
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 600; font-size: 11px;
  background: var(--brand-050); color: var(--brand-700); letter-spacing: .02em;
}
.avatar--blue { background: var(--blue-bg); color: var(--blue); }
.avatar--violet { background: var(--violet-bg); color: var(--violet); }
.avatar--amber { background: var(--amber-bg); color: var(--amber); }
.avatar--red { background: var(--red-bg); color: var(--red); }
.av--sm { width: 28px; height: 28px; font-size: 10px; }
.av--lg { width: 46px; height: 46px; font-size: 13px; }

/* Segmented pill control */
.seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-3); border-radius: 20px; border: 1px solid var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { border: none; background: none; padding: 5px 12px; border-radius: 16px; font-size: 11.5px; font-weight: 500; color: var(--muted); cursor: pointer; transition: all .14s; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }

/* Hero stat card (compact, modern) */
.stat-hero {
  border-radius: var(--radius); padding: 12px 13px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1f9d55 0%, #157347 100%); box-shadow: var(--shadow-sm);
}
.stat-hero::after { content: ""; position: absolute; right: -20px; top: -22px; width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.10); pointer-events: none; }
.stat-hero--navy { background: linear-gradient(135deg, #26385f 0%, #16233f 100%); }
.stat-hero--violet { background: linear-gradient(135deg, #7c5cff 0%, #5b3fd6 100%); }
.stat-hero--amber { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.stat-hero--red { background: linear-gradient(135deg, #ef4444 0%, #c81e1e 100%); }
.stat-hero__label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; opacity: .9; font-weight: 500; display: flex; align-items: center; gap: 5px; }
.stat-hero__label svg { width: 13px; height: 13px; }
.stat-hero__value { font-size: 15px; font-weight: 600; letter-spacing: -.02em; margin-top: 3px; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-hero__meta { font-size: 10px; opacity: .9; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amt-cur { font-size: .6em; font-weight: 500; opacity: .82; margin-right: 3px; letter-spacing: .03em; vertical-align: .06em; }

/* Ring (circular progress) */
.ring { --p: 0; --sz: 92px; width: var(--sz); height: var(--sz); border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--ring-c, var(--brand)) calc(var(--p) * 1%), var(--line) 0);
  display: grid; place-items: center; position: relative; }
.ring::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); }
.ring__in { position: relative; z-index: 1; text-align: center; }
.ring__in b { font-size: 15px; font-weight: 600; display: block; letter-spacing: -.02em; }
.ring__in span { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ring-row { display: flex; align-items: center; gap: 16px; }

/* Product / entity card list */
.pcards { display: grid; gap: 9px; }
.pcards--2 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.pcard {
  display: flex; gap: 12px; align-items: center; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); transition: border-color .14s, box-shadow .14s;
}
.pcard:hover { border-color: var(--line-strong); box-shadow: var(--shadow-xs); }
.pcard__thumb {
  width: 46px; height: 46px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-soft); overflow: hidden;
}
.pcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pcard__thumb svg { width: 22px; height: 22px; }
.pcard__body { flex: 1; min-width: 0; }
.pcard__title { font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.pcard__sub { font-size: 10.5px; color: var(--muted); }
.pcard__chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.pcard__right { text-align: right; flex: 0 0 auto; }
.pcard__amt { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pcard__note { font-size: 10px; color: var(--muted); }
.chip-mini { font-size: 9.5px; font-weight: 500; padding: 2px 7px; border-radius: 20px; background: var(--surface-3); color: var(--ink-soft); }

/* Info note (blue) */
.wh-note { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--blue-bg); color: #1e40af; font-size: 11.5px; line-height: 1.5; }
.wh-note svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.wh-note > span { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
[data-theme="dark"] .wh-note { color: #cfe0ff; }

/* Subscriber list */
.wh-subs { display: flex; flex-direction: column; max-height: 230px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.wh-sub { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-bottom: 1px solid var(--line); }
.wh-sub:last-child { border-bottom: none; }
.wh-sub__m { flex: 1; min-width: 0; }
.wh-sub__m .t { font-size: 12.5px; font-weight: 500; }
.wh-sub__m .s { font-size: 10.5px; color: var(--muted); overflow-wrap: anywhere; }

/* ============================ Responsive ============================ */
@media (max-width: 980px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .main { margin-left: 0; }
  .topbar__menu { display: inline-flex; }
  .content { padding: 13px 11px 88px; }
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around; gap: 2px;
  }
  .bottom-nav button {
    flex: 1; border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; color: var(--muted); font-size: 9.5px; font-weight: 500; cursor: pointer;
    border-radius: 11px; transition: color .15s, background .15s;
  }
  .bottom-nav button svg { width: 20px; height: 20px; }
  .bottom-nav button.active { color: var(--brand); background: var(--brand-050); }
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 55; display: none; }
  .scrim.open { display: block; }
}

@media (max-width: 640px) {
  /* Card-based responsive tables */
  .table-wrap--cards table.tbl thead { display: none; }
  .table-wrap--cards table.tbl, .table-wrap--cards table.tbl tbody, .table-wrap--cards table.tbl tr, .table-wrap--cards table.tbl td { display: block; width: 100%; }
  .table-wrap--cards table.tbl tr {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    margin-bottom: 9px; padding: 4px 10px; background: var(--surface);
  }
  .table-wrap--cards table.tbl td { border: none; padding: 6px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .table-wrap--cards table.tbl td::before {
    content: attr(data-label); font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); font-weight: 500; flex: 0 0 auto;
  }
  .table-wrap--cards table.tbl td.num { text-align: right; }
  .table-wrap--cards table.tbl td .tbl-actions { justify-content: flex-end; }
}

@media (max-width: 520px) {
  .kpi__value { font-size: 14px; }
  .stat-hero__value { font-size: 14px; }
  .modal { border-radius: 15px; }
  .modal-back { padding: 8px; }
  .content { padding: 12px 10px 88px; }
  .grid--kpi { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
  .topbar__crumb { display: none; }
  .card__body { padding: 13px; }
  .card__head { padding: 10px 12px; }
  .page-head { margin-bottom: 13px; gap: 10px; }
  .page-head__title { font-size: 15px; }
}

/* Very small phones: keep the top bar uncluttered and icon-first */
@media (max-width: 440px) {
  .topbar { padding: 0 10px; gap: 8px; }
  .topbar__actions { gap: 4px; }
  .topbar__actions .btn--primary .nowrap { display: none; }
  .topbar__actions .btn--primary { padding-left: 9px; padding-right: 9px; }
  .topbar__title { font-size: 13px; }
  .content { padding: 11px 9px 86px; }
  .grid { gap: 11px; }
  .card__head { padding: 9px 11px; gap: 7px; row-gap: 7px; }
  .seg { padding: 2px; }
  .seg button { padding: 5px 10px; font-size: 11px; }
}

@media (max-width: 380px) {
  .stat-hero { padding: 10px 11px; }
  .stat-hero__value { font-size: 13.5px; }
  .stat-hero__label { font-size: 9px; }
}

/* ---- Mobile bottom-sheet modals (modern mobile pattern) ---- */
@media (max-width: 640px) {
  .modal-back { align-items: flex-end; padding: 0; }
  .modal {
    max-width: 100%; width: 100%; margin: 0; border-radius: 20px 20px 0 0; border-bottom: none;
    max-height: 93vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    animation: sheetUp .26s cubic-bezier(.22,.61,.36,1);
    box-shadow: 0 -12px 40px rgba(16,24,40,.22);
  }
  .modal__head {
    position: sticky; top: 0; z-index: 3; background: var(--surface);
    border-radius: 20px 20px 0 0; padding: 20px 16px 12px;
  }
  .modal__head::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 4px; background: var(--line-strong);
  }
  .modal__body { padding: 15px 16px; }
  .modal__foot {
    position: sticky; bottom: 0; z-index: 3; background: var(--surface);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 18px rgba(16,24,40,.06);
  }
  .modal__foot .btn { flex: 1; }
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---- Invoice document viewer (compact, mobile-fit, no horizontal scroll) ---- */
.invoice-doc {
  background: #eef1f5; padding: 12px; border-radius: 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.invoice-doc > div { box-shadow: 0 1px 3px rgba(16,24,40,.08); border-radius: 8px; }
@media (max-width: 640px) {
  /* Full-bleed the invoice inside the bottom-sheet modal so it fits phone width */
  .invoice-doc { margin: -15px -16px; padding: 0; border-radius: 0; background: #fff; }
  .invoice-doc > div { box-shadow: none; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .modal { animation: none; } }

/* ---- Product photo picker (inventory) ---- */
.photo-field { display: flex; gap: 13px; align-items: center; flex-wrap: wrap; }
.photo-field__prev {
  width: 74px; height: 74px; border-radius: 13px; flex: 0 0 auto; overflow: hidden;
  background: var(--surface-3); color: var(--ink-soft); display: grid; place-items: center;
  border: 1px dashed var(--line-strong);
}
.photo-field__prev img { width: 100%; height: 100%; object-fit: cover; }
.photo-field__prev svg { width: 26px; height: 26px; opacity: .7; }
.photo-field__ctl { display: flex; flex-direction: column; gap: 6px; }
.photo-field__ctl .row { gap: 7px; }
label.btn { cursor: pointer; }