/* =====================================================================
   Sisy Food — Dashboard UI
   Minimalist / neutral, with a subtle warm (amber) brand accent.
   ===================================================================== */

:root {
  /* Neutrals */
  --bg: #f7f7f8;
  --card: #ffffff;
  --line: #eceef1;
  --line-strong: #e2e5e9;

  /* Ink */
  --ink: #18181b;
  --ink-soft: #52525b;
  --ink-muted: #9a9aa3;

  /* Accent — SISY brand orange */
  --accent: #e8550a;
  --accent-strong: #c44508;
  --accent-soft: #fff2ec;
  --accent-ring: rgba(232, 85, 10, .18);

  /* Channel hints (muted) */
  --shopee: #ee4d2d;
  --tiktok: #1f1f23;

  --ok: #16895a;
  --danger: #c0392b;

  /* FX */
  --shadow-xs: 0 1px 2px rgba(24, 24, 27, .04);
  --shadow-sm: 0 1px 3px rgba(24, 24, 27, .06), 0 1px 2px rgba(24, 24, 27, .04);
  --shadow: 0 4px 16px rgba(24, 24, 27, .06);
  --shadow-lg: 0 16px 40px rgba(24, 24, 27, .16);

  --radius: 14px;
  --radius-sm: 10px;
  --sidebar-w: 248px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }

body {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--accent-ring); }

/* ====================== Auto-save indicator ====================== */
.autosave-status {
  font-size: 12px; font-weight: 600; color: var(--ink-muted);
  display: flex; align-items: center; gap: 5px;
  opacity: 0; transition: opacity .25s ease; white-space: nowrap;
}
.autosave-status.show { opacity: 1; }
.autosave-status::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--ink-muted); display:inline-block; }
.autosave-status.saving { color:var(--accent); }
.autosave-status.saving::before { background:var(--accent); animation:pulse .8s infinite; }
.autosave-status.ok { color:var(--ok); }
.autosave-status.ok::before { background:var(--ok); }
.autosave-status.err { color:var(--danger); }
.autosave-status.err::before { background:var(--danger); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

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

/* ----------------------------- Sidebar ----------------------------- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 16px 14px;
  z-index: 50;
  transition: width .22s ease, padding .22s ease;
}

/* header: logo centered */
.sidebar-head {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 4px 6px 16px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.brand-logo { width: 124px; height: auto; display: block; }

/* collapse / expand button — pinned at the very bottom (icon only) */
.collapse-btn {
  margin-top: auto; margin-bottom: 6px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 0;
  padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink-soft); font-family: inherit;
  cursor: pointer; transition: background .14s ease, color .14s ease;
}
.collapse-btn:hover { background: #f4f4f5; color: var(--ink); }
.collapse-btn svg { width: 18px; height: 18px; transition: transform .22s ease; }

.nav-label {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted); margin: 14px 12px 6px; font-weight: 700;
  white-space: nowrap; overflow: hidden;
}

.nav { display: flex; flex-direction: column; gap: 2px; }

/* shared primitives */
.nav-ic { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; }
.nav-ic svg { width: 18px; height: 18px; stroke-width: 2; }
.nav-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-group { position: relative; }

.nav-trigger,
.nav-item {
  width: 100%;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--ink-soft); font-weight: 600; font-size: 13.5px;
  transition: background .14s ease, color .14s ease;
}
.nav-trigger { border: none; background: none; cursor: pointer; font-family: inherit; text-align: left; }
.nav-trigger:hover, .nav-item:not(.disabled):hover { background: #f4f4f5; color: var(--ink); }
.nav-trigger:hover .nav-ic svg, .nav-item:not(.disabled):hover .nav-ic svg { color: var(--ink); }

.nav-trigger .chev { margin-left: auto; width: 15px; height: 15px; color: var(--ink-muted); transition: transform .22s ease; }
.nav-group.open > .nav-trigger .chev { transform: rotate(90deg); }
.nav-trigger.active-parent { color: var(--accent); font-weight: 700; }
.nav-trigger.active-parent .nav-ic svg { color: var(--accent); }

.nav-item.active { background: var(--accent); color: #fff; }
.nav-item.active .nav-ic svg { color: #fff; }
.nav-item.disabled { opacity: .5; cursor: default; }

.soon {
  margin-left: auto; font-size: 9px; letter-spacing: .04em;
  background: #f1f1f3; color: var(--ink-muted);
  padding: 2px 7px; border-radius: 99px; font-weight: 700; text-transform: uppercase;
  flex-shrink: 0;
}

.nav-tag {
  margin-left: auto; font-size: 9px; letter-spacing: .04em;
  background: rgba(0,0,0,.06); color: var(--ink-muted);
  padding: 2px 7px; border-radius: 99px; font-weight: 700; text-transform: uppercase;
  flex-shrink: 0;
}
.nav-item.active .nav-tag { background: rgba(255,255,255,.25); color: rgba(255,255,255,.9); }

/* submenu — accordion (expanded) */
.nav-sub {
  overflow: hidden; max-height: 0;
  display: flex; flex-direction: column; gap: 2px;
  margin-left: 15px; padding-left: 11px; border-left: 1px solid var(--line-strong);
  transition: max-height .26s ease;
}
.nav-group.open > .nav-sub { max-height: 340px; margin-top: 3px; margin-bottom: 5px; }
.nav-sub .nav-item { padding: 8px 12px; font-size: 13px; }
.nav-sub-head { display: none; }

.sidebar-foot {
  padding: 12px 12px 2px;
  font-size: 11px; color: var(--ink-muted);
  border-top: 1px solid var(--line);
  white-space: nowrap; overflow: hidden;
}

/* ===== Collapsed (desktop only) ===== */
@media (min-width: 821px) {
  .sidebar.collapsed { width: 74px; padding-left: 10px; padding-right: 10px; }
  .sidebar.collapsed .brand-logo { display: none; }
  .sidebar.collapsed .collapse-btn { justify-content: center; gap: 0; padding: 10px; }
  .sidebar.collapsed .collapse-btn svg { transform: rotate(180deg); }
  .sidebar.collapsed .nav-label { color: transparent; margin-left: 0; margin-right: 0; }
  .sidebar.collapsed .nav-text,
  .sidebar.collapsed .nav-trigger .chev,
  .sidebar.collapsed .soon,
  .sidebar.collapsed .nav-tag,
  .sidebar.collapsed .sidebar-foot { display: none; }
  .sidebar.collapsed .nav-trigger,
  .sidebar.collapsed > .nav .nav-item { justify-content: center; gap: 0; padding: 10px; }

  /* flyout submenu on hover or click */
  .sidebar.collapsed .nav-sub {
    position: absolute; left: calc(100% + 10px); top: -4px;
    max-height: none; overflow: visible; width: 210px;
    margin: 0; padding: 8px; border-left: none;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateX(-6px);
    transition: opacity .16s ease, transform .16s ease; z-index: 70;
  }
  .sidebar.collapsed .nav-group:hover > .nav-sub,
  .sidebar.collapsed .nav-group.flyout-open > .nav-sub {
    opacity: 1; visibility: visible; transform: translateX(0);
  }
  .sidebar.collapsed .nav-sub-head {
    display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-muted); padding: 4px 10px 8px;
  }
  .sidebar.collapsed .nav-sub .nav-item { justify-content: flex-start; gap: 10px; padding: 8px 10px; }
  .sidebar.collapsed .nav-sub .nav-text { display: inline; }
  .sidebar.collapsed .nav-sub .soon { display: inline-block; }
}

/* off-canvas scrim (mobile) */
.scrim {
  position: fixed; inset: 0; background: rgba(24, 24, 27, .4);
  opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 45;
}
.scrim.show { opacity: 1; visibility: visible; }

/* ------------------------------ Main ------------------------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 64px;
  background: rgba(247, 247, 248, .8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 30;
}
.hamburger {
  display: none;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--card);
  align-items: center; justify-content: center; cursor: pointer; color: var(--ink);
}
.hamburger svg { width: 20px; height: 20px; }
.topbar .crumb { font-size: 11.5px; color: var(--ink-muted); font-weight: 600; letter-spacing: .02em; }
.topbar h1 { font-size: 18px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.topbar .spacer { flex: 1; }

.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-strong);
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
  border: 1px solid var(--line-strong);
}

/* ====================== Notification Bell ====================== */
.notif-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  cursor: pointer;
  border-radius: 10px;
  transition: background .14s ease;
  margin-right: 4px;
}
.notif-bell:hover { background: #f4f4f5; }
.notif-bell .bell-icon {
  width: 20px; height: 20px;
  color: var(--ink-soft);
  transition: color .2s ease;
}
.notif-bell .bell-icon.updated { color: var(--ok); }
.notif-bell .bell-icon.pending { color: var(--accent); }

/* Dot indicator */
.notif-dot {
  position: absolute;
  top: 5px; right: 5px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--card);
  transition: background .3s ease;
}
.notif-dot.ok { background: var(--ok); }
/* dot stays solid (never fades/shrinks — reads as "clear", not flickery);
   the visible blink comes from an expanding ring that radiates out and fades. */
.notif-dot.pending { background: var(--danger); animation: notifPulse 1.6s ease-out infinite; }
@keyframes notifPulse {
  0%   { box-shadow: 0 0 0 0 rgba(192, 57, 43, .6); }
  70%  { box-shadow: 0 0 0 8px rgba(192, 57, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
}

/* Dropdown */
.notif-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-height: 420px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  overflow: hidden;
}
.notif-dropdown.show { display: block; }
.notif-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}
.notif-dropdown-header .notif-date {
  font-weight: 600;
  font-size: 11.5px;
  color: var(--ink-muted);
}
.notif-dropdown-body {
  overflow-y: auto;
  max-height: 350px;
  padding: 6px 0;
}
.notif-loading {
  padding: 20px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}
.notif-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  transition: background .1s ease;
}
.notif-item:hover { background: #f9f9fa; }
.notif-item .notif-icon { font-size: 16px; width: 24px; text-align: center; }
.notif-item .notif-info { flex: 1; min-width: 0; }
.notif-item .notif-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.notif-item .notif-group {
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 500;
  margin-top: 1px;
}
.notif-item .notif-status {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.notif-item .notif-status.ok { background: var(--ok); }
.notif-item .notif-status.pending { background: var(--danger); }
.notif-item.pending { background: #fff8f6; }
.notif-all-ok {
  padding: 24px 16px;
  text-align: center;
  color: var(--ok);
  font-weight: 700;
  font-size: 14px;
}
.notif-all-ok .notif-big-icon { font-size: 32px; display: block; margin-bottom: 8px; }
.notif-all-ok .notif-sub { font-size: 12px; color: var(--ink-muted); font-weight: 500; margin-top: 4px; }

.content { padding: 30px 34px; width: 100%; display: flex; flex-direction: column; gap: 20px; }

/* ============================== Cards ============================== */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.card-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.card-head h2 { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.card-head .sub { font-size: 12px; color: var(--ink-muted); margin-top: 1px; }
/* force subtitle onto its own line when it's a direct sibling of h2 (no wrapper div) —
   otherwise two paired cards with different title+subtitle lengths can wrap at
   different breakpoints and throw their row content out of vertical alignment. */
.card-head > h2 + .sub { flex-basis: 100%; }
.card-body { padding: 20px; }

/* --------------------------- Stat cards ---------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 15px 18px 16px;
  box-shadow: var(--shadow-xs);
  transition: transform .16s ease, box-shadow .16s ease;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat .top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.stat .ic {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: #f4f4f5; color: var(--ink-soft);
}
.stat .ic svg { width: 17px; height: 17px; stroke-width: 2; }
.stat.accent { border-top-color: var(--accent); }
.stat.accent .ic { background: var(--accent-soft); color: var(--accent); }
.stat.shopee { border-top-color: var(--shopee); }
.stat.shopee .ic { background: #fff0ec; color: var(--shopee); }
.stat.tiktok { border-top-color: #5b6470; }
.stat.tiktok .ic { background: #eef1f4; color: #3a4452; }
.stat:not(.accent):not(.shopee):not(.tiktok) { border-top-color: var(--ok); }
.stat:not(.accent):not(.shopee):not(.tiktok) .ic { background: #e7f6ee; color: var(--ok); }
.stat .label { font-size: 12px; color: var(--ink-muted); font-weight: 600; }
.stat .value { font-size: 22px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.stat .value .cur { font-size: 12px; color: var(--ink-muted); font-weight: 700; margin-right: 3px; }

/* ============================ Buttons ============================= */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.month-nav { display: flex; align-items: center; gap: 6px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink);
  padding: 8px 13px; border-radius: 9px; font-weight: 700; font-size: 13px;
  cursor: pointer; transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: #f4f4f5; }
.btn.icon { padding: 8px; }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: var(--shadow-xs);
}
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.month-pill {
  font-weight: 700; font-size: 13.5px; padding: 8px 12px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 9px;
  color: var(--ink); font-family: inherit; cursor: pointer;
  min-width: 140px; text-align: center;
}
.month-pill:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ============================= Table ============================== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 520px; }

table.grid thead th {
  background: #fafafa;
  color: var(--ink-muted);
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 700; text-align: right; padding: 12px 18px;
  border-bottom: 1px solid var(--line-strong);
  position: sticky; top: 0; z-index: 1;
}
table.grid thead th:first-child { text-align: left; }

table.grid tbody td { padding: 5px 14px; border-bottom: 1px solid var(--line); text-align: right; }
table.grid tbody td.date-cell { text-align: left; font-weight: 600; white-space: nowrap; color: var(--ink); }
table.grid tbody tr:hover td { background: #fbfbfc; }
table.grid tbody tr.weekend td.date-cell { color: var(--ink-soft); }
table.grid tbody tr.today td { background: var(--accent-soft); }
table.grid tbody tr.today:hover td { background: #fde8dd; }
table.grid tbody tr.today .date-cell { color: var(--accent-strong); font-weight: 700; }
.wd { color: var(--ink-muted); font-weight: 500; margin-left: 6px; font-size: 12px; }

td .total-cell, td.total-cell { font-weight: 700; color: var(--ink); }

.amt {
  width: 128px; text-align: right; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  border: 1px solid transparent; background: #f6f6f7;
  border-radius: 8px; padding: 7px 10px; transition: background .12s, border-color .12s, box-shadow .12s;
}
.amt::placeholder { color: #c4c4cc; font-weight: 500; }
.amt:hover { background: #f0f0f2; }
.amt:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.amt.dirty { background: var(--accent-soft); border-color: #f5c4ad; }

table.grid tfoot td {
  padding: 13px 18px; text-align: right; font-weight: 800;
  background: #fafafa; border-top: 1px solid var(--line-strong); color: var(--ink);
}
table.grid tfoot td:first-child { text-align: left; color: var(--ink-soft); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.foot-grand { color: var(--accent-strong); }

/* Pill badge buat label toko/kategori di dalam sel tabel (mis. Forecasting kolom Toko) */
.pill { display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:99px; letter-spacing:.02em; }
.pill-runchise { background:rgba(232,85,10,.10); color:var(--accent-strong); }
.pill-iseller  { background:rgba(37,99,235,.10); color:#2563eb; }

/* Crosstab / pivot-style tables (mis. Metode Pembayaran x Alasan Pembatalan) */
table.grid.xtab thead th.xtab-col {
  text-align: center; text-transform: none; letter-spacing: normal;
  font-size: 10px; font-weight: 600; white-space: normal; line-height: 1.3;
  max-width: 100px; padding: 8px 6px;
}
table.grid.xtab tbody td { font-size: 12.5px; }

/* ============================ Charts ============================== */
.grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
.chart-box { position: relative; height: 270px; }

/* ============================= Toast ============================= */
.toast {
  position: fixed; bottom: 22px; right: 22px; z-index: 70;
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 11px; font-weight: 700; font-size: 13px;
  box-shadow: var(--shadow-lg);
  transform: translateY(140%); opacity: 0;
  transition: transform .32s cubic-bezier(.2,.9,.3,1), opacity .32s ease;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.ok { background: var(--ok); }
.toast.err { background: var(--danger); }

/* ============================ Banner ============================= */
.banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--accent-soft); border: 1px solid #f5c4ad; color: var(--accent-strong);
  padding: 11px 15px; border-radius: 11px; font-weight: 600; font-size: 13px;
  margin-bottom: 18px;
}
.banner svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ========================== Coming soon ========================== */
.empty { display: grid; place-items: center; text-align: center; min-height: 60vh; gap: 14px; }
.empty .ic { width: 64px; height: 64px; border-radius: 18px; background: var(--accent-soft);
  display: grid; place-items: center; color: var(--accent); border: 1px solid #f5c4ad; }
.empty .ic svg { width: 30px; height: 30px; }
.empty h2 { font-size: 20px; font-weight: 800; }
.empty p { color: var(--ink-soft); max-width: 360px; }

/* ============================ Insights =========================== */
.card { overflow: hidden; }
.insights .card-body { display: flex; flex-direction: column; gap: 18px; }

.ins-grid   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ins-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width:1080px) { .ins-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:600px)  { .ins-grid-5 { grid-template-columns: 1fr 1fr; } }
.ins {
  display: flex; flex-direction: column; gap: 3px;
  background: #fafafa; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 15px;
  transition: background .14s ease, border-color .14s ease;
}
.ins:hover { background: #fff; border-color: var(--line-strong); }
.ins-label { font-size: 11.5px; color: var(--ink-muted); font-weight: 600; }
.ins-val { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.25; }
.ins-val .cur { font-size: 11px; color: var(--ink-muted); font-weight: 700; margin-right: 3px; }
.ins-val small { font-size: 13px; color: var(--ink-muted); font-weight: 600; }
.ins-val.ins-empty { color: var(--ink-muted); }
.ins-meta { font-size: 11px; color: var(--ink-muted); font-weight: 500; }

.trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 16px; font-weight: 800; padding: 1px 9px; border-radius: 99px; letter-spacing: -.01em;
}
.trend.up { color: #0c7a48; background: #e3f6ec; }
.trend.down { color: #b3261e; background: #fbe7e6; }
.trend.flat { color: var(--ink-soft); background: #f1f1f3; }
.trend.new { color: var(--accent-strong); background: var(--accent-soft); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }

/* channel share bar */
.share { display: flex; flex-direction: column; gap: 9px; }
.share-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.share-title { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.share-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.share-legend b { color: var(--ink); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.dot.shopee { background: var(--shopee); }
.dot.tiktok { background: #475569; }
.share-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: #eceef1; }
.share-bar .seg { height: 100%; transition: width .4s cubic-bezier(.2,.9,.3,1); }
.share-bar .seg.shopee { background: linear-gradient(90deg, #ff7a5a, #ee4d2d); }
.share-bar .seg.tiktok { background: linear-gradient(90deg, #5b6b80, #3a4452); }

/* row transition */
table.grid tbody tr td { transition: background .12s ease; }

/* ============================ Tabs ============================== */
.page-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: #eef0f2; border-radius: 11px;
}
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 8px;
  font-weight: 700; font-size: 13px; color: var(--ink-soft);
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.tab svg { width: 16px; height: 16px; }
.tab:hover { color: var(--ink); }
.tab.active { background: var(--card); color: var(--accent-strong); box-shadow: var(--shadow-sm); }

/* ========================= Target input ========================= */
.target-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: end; }
.target-field { display: flex; flex-direction: column; gap: 7px; }
.target-field label { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); display: flex; align-items: center; gap: 7px; }
.inp-rp {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 12px;
  background: #fff; transition: border-color .12s ease, box-shadow .12s ease;
}
.inp-rp:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.inp-rp > span { color: var(--ink-muted); font-weight: 700; font-size: 13px; }
/* input inside inp-rp should be invisible — container provides the border */
.inp-rp .amt {
  border: none !important; background: none !important;
  border-radius: 0 !important; box-shadow: none !important;
  padding: 11px 0 !important; flex: 1; width: 100%;
}
.inp-rp input.target-input {
  border: none; background: none; outline: none; width: 100%;
  padding: 11px 0; font-family: inherit; font-size: 15px; font-weight: 700;
  text-align: right; color: var(--ink);
}
.inp-rp input.target-input.dirty { color: var(--accent-strong); }
.target-field.total { background: var(--accent-soft); border-radius: 10px; padding: 10px 14px; gap: 4px; }
.target-field.total label { color: var(--accent-strong); }
.target-total { display: flex; align-items: baseline; gap: 5px; font-size: 19px; font-weight: 800; color: var(--accent-strong); letter-spacing: -.02em; }
.target-total span:first-child { font-size: 12px; color: var(--accent); font-weight: 700; }

/* ====================== Target progress ======================== */
.target-empty { color: var(--ink-soft); font-size: 13.5px; padding: 4px 0; }
.prog { margin-bottom: 18px; }
.prog:last-child { margin-bottom: 0; }
.prog-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.prog-label { font-weight: 700; font-size: 13.5px; }
.prog-pct { font-weight: 800; font-size: 14px; color: var(--ink-soft); }
.prog-pct.done { color: var(--ok); }
.prog-bar { height: 10px; background: #eceef1; border-radius: 99px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 99px; transition: width .55s cubic-bezier(.2,.9,.3,1); }
.prog.accent .prog-fill { background: linear-gradient(90deg, #f07340, #e8550a); }
.prog.shopee .prog-fill { background: linear-gradient(90deg, #ff7a5a, #ee4d2d); }
.prog.tiktok .prog-fill { background: linear-gradient(90deg, #5b6b80, #3a4452); }
.prog-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 12px; font-weight: 600; color: var(--ink); flex-wrap: wrap; }
.prog-meta .muted { color: var(--ink-muted); font-weight: 500; }

/* ========================= Import Bar ========================= */
.import-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 0 2px; border-top:1px solid var(--line); }
.import-label { cursor:pointer; }
.import-label:hover { background:#f4f4f5; }

/* =================== Revenue toolbar ========================= */
.rev-toolbar-wrap { display:flex; flex-direction:column; gap:10px; }
.date-range-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 0 2px; border-top:1px solid var(--line); }
.range-label { font-size:12px; font-weight:700; color:var(--ink-muted); }

/* ==================== Revenue grid extras ==================== */
.rev-grid { min-width: 800px; }
.prog-cell { text-align: center !important; vertical-align: middle; padding: 4px 8px !important; }
.prog10-badge {
  display: inline-block; padding: 4px 10px; border-radius: 99px;
  font-weight: 800; font-size: 13px;
  background: var(--accent-soft); color: var(--accent-strong);
  white-space: nowrap;
}
.prog10-badge.done { background: #e3f6ec; color: #0c7a48; }
.prog10-label { font-size: 10px; color: var(--ink-muted); font-weight: 600; margin-top: 3px; }
.target-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; align-items: end; }

/* ===================== Product performance ===================== */
.prod-list { display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto; }
.prod-list-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; background:#fafafa; border:1px solid var(--line); }
.prod-list-item .prod-name { font-weight:600; font-size:13px; flex:1; }
.prod-list-item .prod-sku  { font-size:11px; color:var(--ink-muted); font-weight:600; }
.prod-del-btn { width:26px; height:26px; border-radius:6px; border:1px solid var(--line-strong); background:var(--card); color:var(--ink-muted); display:grid; place-items:center; cursor:pointer; flex-shrink:0; transition:all .14s; }
.prod-del-btn:hover { background:#fbe7e6; border-color:#f5a0a0; color:#c0392b; }
.addbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.addbar input { padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 9px; font-family: inherit; font-size: 13px; color: var(--ink); background: #fff; }
.addbar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.addbar input[name="name"] { flex: 1; min-width: 170px; }
.addbar input[name="sku"] { width: 150px; }

.pp-grid { min-width: 760px; }
.prod-cell { display: flex; flex-direction: column; gap: 1px; }
.prod-name { font-weight: 700; color: var(--ink); }
.prod-sku { font-size: 11px; color: var(--ink-muted); font-weight: 600; }

.rank-row { display: flex; align-items: center; gap: 10px; }
.rank-bar { flex: 1; height: 8px; background: #eceef1; border-radius: 99px; overflow: hidden; min-width: 80px; }
.rank-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f07340, #e8550a); transition: width .5s cubic-bezier(.2,.9,.3,1); }
.rank-pct { font-weight: 700; font-size: 12.5px; color: var(--ink-soft); min-width: 42px; text-align: right; }

/* grouped table header */
.th-group { text-align: center !important; border-bottom: 1px solid rgba(255,255,255,.15); }
.th-shopee { background: rgba(238,77,45,.15) !important; color: #b83218 !important; }
.th-tiktok { background: rgba(58,68,82,.12) !important; color: #3a4452 !important; }
.th-cancel { color: #c0392b !important; }

/* cancel columns tint */
.cancel-input { background: #fff5f5 !important; }
.cancel-input:focus { border-color: #e55b5b !important; box-shadow: 0 0 0 3px rgba(229,91,91,.18) !important; }
.cancel-input.dirty { background: #ffe8e8 !important; border-color: #f5a0a0 !important; }
.cancel-foot { color: #c0392b !important; }
.cancel-val { color: #c0392b; font-weight: 700; }

/* cancel rate badge */
.cancel-rate-badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-weight: 800; font-size: 12px; }
.cancel-rate-badge.ok   { background: #e3f6ec; color: #0c7a48; }
.cancel-rate-badge.warn { background: var(--accent-soft); color: var(--accent-strong); }
.cancel-rate-badge.bad  { background: #fbe7e6; color: #b3261e; }

/* ========================== Spent ============================= */
.spent-grid { min-width: 500px; }
.ch-badge { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: middle; flex-shrink: 0; }
.ch-shopee { background: #ee4d2d; }
.ch-tiktok { background: #3a4452; }
.ch-meta   { background: #16895a; }
.ch-fill-shopee { background: linear-gradient(90deg,#ff6a4d,#ee4d2d); }
.ch-fill-tiktok { background: linear-gradient(90deg,#5b6b80,#3a4452); }
.ch-fill-meta   { background: linear-gradient(90deg,#22c55e,#16895a); }

.roas-cell { font-weight: 800; }
.roas-good { color: #0c7a48; }
.roas-ok   { color: var(--accent-strong); }
.roas-bad  { color: #b3261e; }

.roas-channel-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 4px 0 2px; }
.roas-ch-card { display: flex; flex-direction: column; gap: 4px; background: #fafafa; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; }
.roas-ch-name { font-weight: 700; font-size: 13px; color: var(--ink-soft); }
.roas-ch-val  { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.roas-ch-sub  { font-size: 11.5px; color: var(--ink-muted); }

@media (max-width: 820px) { .roas-channel-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .roas-channel-grid { grid-template-columns: 1fr; } }

/* ======================== Spent input ========================= */
.spent-day-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.spent-form-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:end; }
.spent-field { display:flex; flex-direction:column; gap:7px; }
.spent-field label { font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.spent-derived .spent-total-val { font-size:17px; font-weight:800; color:var(--ink); padding:11px 0 2px; letter-spacing:-.01em; }
.spent-derived .spent-total-val.roas-cell { color:var(--accent); }
.spent-derived-row { display:flex; gap:20px; padding:12px 16px; background:#fafafa; border-radius:10px; border:1px solid var(--line); flex-wrap:wrap; }
.spent-derived-item { display:flex; flex-direction:column; gap:4px; flex:1; min-width:140px; }
.spent-derived-item.accent { border-left:2px solid var(--accent); padding-left:12px; }
.spent-derived-label { font-size:11.5px; font-weight:700; color:var(--ink-muted); }
.spent-derived-val { font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.spent-derived-val.roas-cell { color:var(--accent-strong); }
.ssb-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:10px; }
.ssb-item { display:flex; flex-direction:column; gap:3px; }
.ssb-item.accent .ssb-val { color:var(--accent-strong); font-weight:800; }
.ssb-label { font-size:11px; color:var(--ink-muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.ssb-val { font-size:14px; font-weight:800; color:var(--ink); }
.ch-meta { background:#16895a; }

@media (max-width:1080px) { .spent-form-grid { grid-template-columns:1fr 1fr; } .ssb-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:820px)  { .ssb-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:600px)  { .spent-form-grid { grid-template-columns:1fr; }    .ssb-grid { grid-template-columns:1fr 1fr; } }

/* ===================== Marketing Summary ====================== */
.sum-monthly-table { min-width: 1100px; }
.sum-monthly-table thead th { font-size:10.5px; padding:10px 10px; }
.sum-monthly-table tbody td { padding:7px 10px; font-size:13px; }
.sum-monthly-table tfoot td { padding:10px 10px; }
.sum-header-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.sum-platform-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
.sum-platform-grid > .card { display:flex; flex-direction:column; }
.sum-platform-grid > .card .card-body { flex:1; }
.sum-pf-card .card-head { gap:10px; }
.sum-section-label { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-muted); margin:4px 0 10px; }
.sum-field { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.sum-field label { font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.inp-pct input { text-align:right; font-size:15px; flex:1; }
.inp-pct .pct-sign { color:var(--ink-muted); font-weight:700; font-size:13px; }
.sum-divider { height:1px; background:var(--line); margin:14px 0; }
.sum-derived { display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.sum-derived-val { font-weight:800; color:var(--ink); }
.sum-derived-val.deduct { color:#c0392b; }
.sum-deduct { opacity:.85; }
.sum-net { display:flex; justify-content:space-between; align-items:center; background:var(--accent-soft); border-radius:10px; padding:12px 14px; }
.sum-net > span:first-child { font-weight:700; color:var(--accent-strong); font-size:13px; }
.sum-net-val { font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--ok); }
.sum-net-val.negative { color:var(--danger); }
.sum-amt, .sum-pct {
  width: 100%; font-family: inherit;
  border: none; background: none; outline: none;
  font-size: 15px; font-weight: 600; color: var(--ink);
  padding: 10px 0;
}

@media (max-width:820px) { .sum-platform-grid { grid-template-columns:1fr; } }

/* yearly top-product rows */
.year-rank { display: flex; flex-direction: column; gap: 9px; }
.year-rank-row { display: flex; align-items: center; gap: 11px; font-size: 13px; }
.yr-no { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 11px; }
.yr-name { font-weight: 700; color: var(--ink); min-width: 110px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yr-val { font-weight: 700; color: var(--ink-soft); min-width: 110px; text-align: right; flex-shrink: 0; }
@media (max-width: 600px) {
  .yr-val { display: none; }
  .yr-name { min-width: 80px; }
}

/* ========================== Unified Modal ========================= */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(24,24,27,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal-overlay.show .modal-box { transform: translateY(0); }
.modal-box {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 28px 28px 24px; max-width: 400px; width: 92%; text-align: center;
  transform: translateY(16px); transition: transform .22s cubic-bezier(.2,.9,.3,1);
}
.modal-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 16px;
}
.modal-icon svg { width: 26px; height: 26px; }
.modal-title { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.modal-desc  { font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 22px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }
.btn.danger { background: #c0392b; border-color: #c0392b; color: #fff; }
.btn.danger:hover { background: #a93226; border-color: #a93226; }

/* ============ Analytics dashboards (Finance / B2C / B2B / ========= */
/* ============ Product Analysis / Bussines Overview) =============== */
/* Shared by every "data rollup" page — kept in one place so every page
   looks and behaves identically instead of drifting via copy-pasted
   per-page <style> blocks. */
.section-header { font-size:16px; font-weight:800; color:var(--ink); margin:32px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--line); display:flex; align-items:baseline; gap:8px; }
.section-header.section-header-first { margin-top:4px; }
.section-header a { color:var(--accent); font-weight:600; }
.lbl-note { font-size:11px; font-weight:400; color:var(--ink-muted); text-transform:none; letter-spacing:0; }
.kpi-primary-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.kpi-secondary-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
@media(max-width:700px){ .kpi-primary-3{ grid-template-columns:1fr; } }
.card + .card { margin-top:12px; }
.section-header + .card, .section-header + .kpi-primary-3, .section-header + .aud-2col, .section-header + .kpi-secondary-2,
.kpi-group-lbl + .card, .kpi-group-lbl + .aud-2col { margin-top:0; }
.kpi-group-lbl { font-size:11px; font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.5px; margin:20px 0 8px; }
.kpi-group-lbl.kpi-group-lbl-first { margin-top:0; }
.kpi-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
.kpi-card-lg { padding:20px 22px; }
.kpi-card.kpi-accent { border-color:var(--accent); background:var(--accent-soft); }
.kpi-card.kpi-ok { border-color:var(--ok); background:#f0faf5; }
.kpi-card.kpi-danger { border-color:var(--danger); background:#fdf2f2; }
.kpi-card.kpi-danger .kpi-val { color:var(--danger); }
.kpi-ic { width:26px; height:26px; color:var(--ink-muted); }
.kpi-ic svg { width:100%; height:100%; }
.kpi-card.kpi-accent .kpi-ic { color:var(--accent); }
.kpi-card.kpi-ok .kpi-ic { color:var(--ok); }
.kpi-val { font-size:26px; font-weight:700; color:var(--ink); line-height:1; }
.kpi-secondary-2 .kpi-val { font-size:19px; }
.kpi-card.kpi-accent .kpi-val { color:var(--accent-strong); }
.kpi-card.kpi-ok .kpi-val { color:var(--ok); }
.kpi-lbl { font-size:11px; color:var(--ink-muted); font-weight:500; text-transform:uppercase; letter-spacing:.4px; }
.chart-wrap { position:relative; height:280px; }
.aud-2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch; margin-bottom:12px; }
/* .card + .card sets margin-top for STACKED cards elsewhere on the page — but as a
   sibling-combinator rule it also matches the 2nd card here even though grid places
   it beside the 1st, not below it. Cancel that leaked margin so both cards start flush. */
.aud-2col > .card + .card { margin-top:0 !important; }
.aud-2col > .card { display:flex; flex-direction:column; height:100%; }
.aud-2col > .card > .card-head { height:68px; flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; overflow:hidden; box-sizing:border-box; }
.aud-2col > .card > .card-head > h2 + .sub { flex-basis:auto; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.aud-2col > .card > .card-head h2 { line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.aud-2col > .card > .card-body { flex:1; display:flex; flex-direction:column; }
.aud-2col > .card > .table-wrap { flex:1; }
.card-body-center { display:flex; flex-direction:column; justify-content:center; }
@media(max-width:800px){ .aud-2col{ grid-template-columns:1fr; } }
.aud-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.aud-bar-row:last-child { margin-bottom:0; }
.aud-bar-lbl { font-size:12px; font-weight:600; color:var(--ink-soft); flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aud-bar-track { flex:1; height:8px; background:var(--line); border-radius:4px; overflow:hidden; }
.aud-bar-fill { height:100%; border-radius:4px; }
.aud-bar-pct { font-size:12px; font-weight:700; color:var(--ink); flex-shrink:0; white-space:nowrap; }
.filter-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:12px 20px; border-top:1px solid var(--line); }
.filter-chip { background:none; border:1px solid var(--line); border-radius:6px; padding:5px 12px; font-size:12px; font-weight:500; cursor:pointer; color:var(--ink-soft); transition:all .15s; }
.filter-chip:hover,.filter-chip.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.inp-date { border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:13px; background:var(--card); color:var(--ink); font-family:inherit; }
.inp-date:focus { outline:none; border-color:var(--accent); }
.inp-cred { border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:13px; background:var(--card); color:var(--ink); font-family:monospace; }
.inp-cred:focus { outline:none; border-color:var(--accent); }
.creds-form { border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px; }
.upload-form { border-top:1px solid var(--line); display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.badge-ok { display:inline-flex; align-items:center; gap:5px; background:#f0faf5; color:var(--ok); border:1px solid var(--ok); border-radius:20px; padding:4px 12px; font-size:12px; font-weight:600; }
.badge-warn { display:inline-flex; align-items:center; gap:5px; background:#fffbf0; color:#b45309; border:1px solid #d97706; border-radius:20px; padding:4px 12px; font-size:12px; font-weight:600; }
.hidden-tbl { display:none; }
.info-empty { display:flex; align-items:center; gap:12px; color:var(--ink-muted); font-size:13px; }
.info-empty .ic { font-size:20px; }
.num-ok { color:var(--ok); font-weight:600; }
.num-danger { color:var(--danger); font-weight:600; }
.pnl-table td { padding:9px 16px; font-size:13px; }
.pnl-table td:first-child { min-width:150px; }
.pnl-table td:last-child { text-align:right; font-weight:600; white-space:nowrap; width:1%; }
.pnl-table tr.pnl-subtotal td { border-top:1px solid var(--line); font-weight:700; }
.pnl-table tr.pnl-total td { border-top:2px solid var(--ink); font-weight:800; font-size:14px; }
.pct-badge { display:inline-flex; align-items:center; gap:2px; font-size:11px; font-weight:700; border-radius:10px; padding:1px 8px; margin-left:6px; }
.pct-badge.pct-up { background:#f0faf5; color:var(--ok); }
.pct-badge.pct-down { background:#fdf2f2; color:var(--danger); }

/* ===== Dense scorecard grid — packs 5–7 tiles/row, wraps responsively ===== */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:10px; }
.kpi-grid > .kpi-card { padding:12px 14px; gap:3px; }
.kpi-grid .kpi-val { font-size:19px; }
/* plain white/black scorecards — the sparkline (always brand orange) carries the
   accent, so no more per-card status tinting (green/orange/red) in this grid. */
.kpi-grid .kpi-card.kpi-accent,
.kpi-grid .kpi-card.kpi-ok,
.kpi-grid .kpi-card.kpi-danger { border-color:var(--line); background:var(--card); }
.kpi-grid .kpi-card.kpi-accent .kpi-val,
.kpi-grid .kpi-card.kpi-ok .kpi-val,
.kpi-grid .kpi-card.kpi-danger .kpi-val { color:var(--ink); }
/* mini trend line — only present on cards backed by a real daily series */
.kpi-spark-wrap { height:28px; margin-top:2px; }
.kpi-spark-wrap canvas { width:100% !important; height:28px !important; }
/* custom sparkline tooltip — real DOM node on <body>, not canvas-clipped */
.kpi-spark-tooltip {
  position:fixed; z-index:9999; pointer-events:none;
  background:var(--ink); color:#fff; padding:6px 10px; border-radius:7px;
  font-size:11px; line-height:1.35; white-space:nowrap;
  transform:translate(-50%,-120%);
  opacity:0; transition:opacity .1s ease;
  box-shadow:var(--shadow-sm);
}
.kpi-spark-tooltip-title { color:rgba(255,255,255,.6); font-size:10px; margin-bottom:2px; }
.kpi-spark-tooltip-val { font-weight:700; font-size:12.5px; }
.kpi-grid .kpi-lbl { font-size:10px; letter-spacing:.3px; }

/* ============ COMPACT mode (non-Marketing dashboards only) ============ */
/* Scoped to .content--compact so Marketing pages keep their original spacing. */
.content--compact { padding:18px 22px; gap:12px; }
.content--compact .card-head { padding:11px 15px; }
.content--compact .card-head h2 { font-size:13.5px; }
.content--compact .card-head .sub { font-size:11.5px; }
.content--compact .card-body { padding:14px 15px; }
.content--compact .card + .card { margin-top:10px; }
.content--compact .banner { padding:9px 13px; font-size:12.5px; margin-bottom:12px; }

.content--compact .section-header { font-size:14px; margin:20px 0 10px; padding-bottom:6px; }
.content--compact .section-header.section-header-first { margin-top:2px; }
.content--compact .kpi-group-lbl { margin:14px 0 6px; }

.content--compact .kpi-primary-3,
.content--compact .kpi-secondary-2 { gap:10px; margin-bottom:12px; }
.content--compact .kpi-card { padding:12px 14px; gap:3px; }
.content--compact .kpi-card-lg { padding:13px 15px; }
.content--compact .kpi-val { font-size:20px; }
.content--compact .kpi-card-lg .kpi-val { font-size:21px; }
.content--compact .kpi-secondary-2 .kpi-val { font-size:17px; }
.content--compact .kpi-lbl { font-size:10px; letter-spacing:.3px; }
.content--compact .kpi-ic { width:22px; height:22px; }

/* breakdown pairs size to their own content (no empty stretch bottom) */
.content--compact .aud-2col { gap:10px; margin-bottom:10px; }

.content--compact .aud-bar-row { margin-bottom:9px; }
.content--compact .aud-bar-track { height:9px; }
.content--compact .chart-wrap { height:230px; }
.content--compact .filter-row { padding:9px 14px; }
.content--compact .pnl-table td { padding:6px 14px; }
.content--compact table.grid tbody td { padding:5px 12px; }
.content--compact table.grid thead th { padding:9px 14px; }

/* ========================== Responsive =========================== */
@media (max-width: 1080px) {
  .grid-2 { grid-template-columns: 1fr; }
  .ins-grid { grid-template-columns: repeat(2, 1fr); }
  .target-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .target-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .stats { grid-template-columns: repeat(2, 1fr); }

  /* sidebar -> off-canvas drawer */
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.2,.9,.3,1);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .hamburger { display: inline-flex; }
  .collapse-btn { display: none; }
  .content { padding: 22px 20px; gap: 16px; }
  .topbar { padding: 0 18px; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 13px 14px; }
  .stat .value { font-size: 18px; }
  .topbar h1 { font-size: 16px; }
  .card-head { padding: 14px 16px; }
  .card-body { padding: 14px; }
  .toolbar { width: 100%; }
  .month-pill { flex: 1; min-width: 0; }
  .content { padding: 16px 14px; gap: 14px; }
  .ins-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .share-legend { gap: 12px; }
  .page-toolbar { gap: 10px; }
  .tabs { width: 100%; }
  .tab { flex: 1; justify-content: center; }
  .month-nav { width: 100%; }
  .month-nav .month-pill { flex: 1; }

  /* compact table so it fits without much side-scroll */
  table.grid { min-width: 0; }
  table.grid thead th,
  table.grid tbody td,
  table.grid tfoot td { padding-left: 10px; padding-right: 10px; }
  .amt { width: 88px; font-size: 13px; padding: 6px 8px; }
  table.grid tbody td.date-cell { font-size: 12.5px; }
  .wd { display: block; margin-left: 0; font-size: 11px; }
}