:root{
  --sidebar-bg:#0f1117; --sidebar-border:#1c1f2a;
  --sidebar-text:#9aa1b1; --sidebar-text-active:#fff;
  --bg:#fff; --surface:#f7f8fa; --border:#e5e7eb;
  --text:#0f1117; --text-2:#4b5563; --muted:#6b7280;
  --accent:#D0021B; --accent-l:#fdecee; --accent-m:#f8c9cf;
  --green:#15803d; --green-l:#ecfdf3; --green-m:#bbf7d0;
  --warn:#b45309; --warn-l:#fffbeb; --warn-m:#fde68a;
  --sh:0 1px 2px rgba(15,17,23,.04); --sh-lg:0 8px 24px rgba(15,17,23,.08);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;min-height:100vh;font-size:14px;line-height:1.5;}

/* Visible keyboard focus on every interactive element (buttons, links, divs with onclick, inputs). */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;}

/* ===== LAYOUT SHELL ===== */
.app{display:flex;min-height:100vh;}
.sidebar{width:220px;flex-shrink:0;background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:200;}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:20px 18px;border-bottom:1px solid var(--sidebar-border);}
.sidebar-logo img{height:32px;display:block;background:#fff;border-radius:4px;padding:3px 6px;}
.sidebar-logo-text{font-weight:800;font-size:14px;color:var(--sidebar-text-active);line-height:1.25;}
.sidebar-logo-sub{font-size:10.5px;color:var(--sidebar-text);letter-spacing:.06em;font-weight:500;margin-top:1px;}
.sidebar-nav{flex:1;padding:14px 0;overflow-y:auto;}
.sidebar-footer{border-top:1px solid var(--sidebar-border);padding:14px 18px;font-size:11.5px;color:var(--sidebar-text);}
.sidebar-footer #syncStatus{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.sidebar-footer #syncStatus svg{width:14px;height:14px;flex-shrink:0;}
.sidebar-footer #dateBadge{color:var(--sidebar-text);font-size:11px;}

.content{flex:1;margin-left:220px;padding:32px 40px;max-width:1400px;}
.view-title{font-weight:800;font-size:22px;line-height:1.2;margin-bottom:4px;}

.nav-item{display:flex;align-items:center;gap:12px;padding:11px 18px;font-size:13px;font-weight:600;color:var(--sidebar-text);border-left:3px solid transparent;cursor:pointer;transition:all .15s;white-space:nowrap;}
.nav-item svg{width:18px;height:18px;flex-shrink:0;}
.nav-item:hover{color:var(--sidebar-text-active);}
.nav-item.active{color:var(--sidebar-text-active);border-left-color:var(--accent);background:rgba(208,2,27,.08);}

.view{display:none;animation:fadeUp .22s ease;}.view.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ===== CARDS ===== */
.card{background:var(--bg);border:1px solid var(--border);border-radius:10px;box-shadow:var(--sh);overflow:hidden;margin-bottom:20px;}
.card-header{padding:16px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.card-title{font-weight:700;font-size:15px;}.card-body{padding:22px;}

/* ===== STAT CARDS ===== */
.stat-row{display:grid;gap:12px;margin-bottom:24px;}.c2{grid-template-columns:repeat(2,1fr);}.c3{grid-template-columns:repeat(3,1fr);}.c4{grid-template-columns:repeat(4,1fr);}
.stat-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px 18px;box-shadow:var(--sh);display:flex;gap:14px;align-items:center;}
.stat-icon{width:38px;height:38px;border-radius:8px;background:var(--surface);color:var(--text-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.stat-icon svg{width:20px;height:20px;}
.stat-num{font-weight:800;font-size:28px;line-height:1;margin-bottom:4px;color:var(--text);font-variant-numeric:tabular-nums;}
.stat-label{font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;}

/* ===== BUTTONS ===== */
.btn{font-family:inherit;font-weight:600;font-size:13px;padding:10px 20px;border:none;border-radius:7px;cursor:pointer;transition:all .18s;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;}
.btn-primary{background:var(--accent);color:#fff;}.btn-primary:hover{background:#a30015;}
.btn-sec{background:var(--bg);color:var(--text-2);border:1.5px solid var(--border);}.btn-sec:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-l);}
.btn-ghost-red{background:transparent;color:var(--accent);border:1.5px solid var(--accent-m);}.btn-ghost-red:hover{background:var(--accent-l);}
.btn:disabled{opacity:.4;cursor:not-allowed;}.btn-sm{padding:7px 13px;font-size:12px;}
.btn svg{width:14px;height:14px;}

/* ===== UPLOAD ZONES ===== */
.upload-zone{border:2px dashed var(--border);padding:40px 20px;text-align:center;cursor:pointer;border-radius:10px;transition:all .2s;background:var(--surface);}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent);background:var(--accent-l);}
.upload-zone.loaded{border-color:var(--green);border-style:solid;background:var(--green-l);}
.upload-zone input{display:none;}
.upload-zone .upload-icon{display:block;margin:0 auto 10px;color:var(--text-2);}
.upload-zone .upload-icon svg{width:32px;height:32px;}
.upload-title{font-weight:700;font-size:15px;margin-bottom:6px;}.upload-sub{font-size:12.5px;color:var(--muted);line-height:1.8;}

/* ===== NOTICES ===== */
.notice{padding:12px 16px;border-radius:8px;font-size:13px;line-height:1.6;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start;}
.notice-icon{width:16px;height:16px;flex-shrink:0;margin-top:1px;}
.notice-info{background:var(--surface);border:1px solid var(--border);color:var(--text-2);}
.notice-warn{background:var(--warn-l);border:1px solid var(--warn-m);color:var(--warn);}
.notice-green{background:var(--green-l);border:1px solid var(--green-m);color:var(--green);}

/* ===== BADGES / PILLS ===== */
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;}
.badge-green{background:var(--green-m);color:var(--green);}
.badge-red{background:var(--accent-m);color:var(--accent);}
.badge-warn{background:var(--warn-m);color:var(--warn);}
.badge-dark{background:#111827;color:#fff;}
.badge-muted{background:var(--surface);color:var(--muted);}

.acct-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;margin:2px;}
.pill-internal{background:#111827;color:#fff;border:1px solid #111827;}
.pill-partner{background:var(--warn-l);color:var(--warn);border:1px solid var(--warn-m);}
.pill-unknown{background:var(--surface);color:var(--muted);border:1px solid var(--border);}

/* ===== TABLES ===== */
.dt{width:100%;border-collapse:collapse;font-size:12.5px;}
.dt th{background:var(--surface);padding:6px 12px;text-align:left;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5;}
.dt td{padding:6px 12px;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums;}
.dt tr:last-child td{border-bottom:none;}
.dt tr:nth-child(even){background:var(--surface);}
.dt tr:hover td{background:var(--accent-l);}
.tbl-wrap{max-height:480px;overflow:auto;}
/* Group of status/phase-out badges in one cell: wrap as a row instead of one
   long unbreakable line (kept whole - never broken mid-badge). */
.badge-wrap{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}

/* ===== BAR CHARTS ===== */
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.bar-label{width:150px;text-align:right;color:var(--text-2);font-weight:500;flex-shrink:0;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-track{flex:1;background:var(--surface);border-radius:4px;height:22px;overflow:hidden;}
.bar-fill{height:100%;border-radius:4px;display:flex;align-items:center;padding-left:8px;font-size:10px;font-weight:600;color:#fff;min-width:2px;}
.bar-val{width:40px;text-align:right;font-weight:700;color:var(--text);font-size:12px;flex-shrink:0;}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}

/* ===== SNAPSHOT HISTORY ===== */
.snap-item{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--bg);border:1px solid var(--border);border-radius:10px;margin-bottom:9px;box-shadow:var(--sh);cursor:pointer;transition:all .18s;}
.snap-item:hover{border-color:var(--accent);box-shadow:var(--sh-lg);}
.snap-item.active-snap{border-color:var(--accent);background:var(--accent-l);}
.snap-date{font-weight:700;font-size:13px;}.snap-meta{font-size:11px;color:var(--muted);margin-top:2px;}

/* ===== EMPTY STATES ===== */
.empty-state{display:flex;align-items:center;gap:10px;padding:18px 0;color:var(--muted);font-size:13px;}
.empty-state .empty-icon{width:18px;height:18px;flex-shrink:0;}

/* ===== SPINNER ===== */
@keyframes spin{to{transform:rotate(360deg);}}
.spin{animation:spin .8s linear infinite;display:inline-block;}

/* ===== SKELETON (loading shimmer) ===== */
.skeleton{position:relative;overflow:hidden;background:var(--surface);border-radius:6px;}
.skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer 1.4s infinite;}
@keyframes shimmer{100%{transform:translateX(100%);}}
.skel-row{height:14px;margin:11px 0;}
.skel-row:first-child{margin-top:0;}

/* ===== FILTERS ===== */
.week-badge{font-size:12px;color:var(--text-2);background:var(--surface);padding:5px 14px;border-radius:20px;font-weight:500;}
.filter-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px;}
.filter-sel{font-family:inherit;font-size:12px;padding:7px 11px;border:1.5px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text);outline:none;}
.filter-sel:focus{border-color:var(--accent);}
.sect-hdr{font-size:11px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;margin-top:16px;}

/* Import drop zones: 3-up on desktop (was an inline style - moved here so the
   mobile breakpoint can collapse it to a single column). */
.drop-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px;}

/* Mobile chrome: top bar + drawer overlay. Hidden on desktop; the media query
   below switches them on. The hamburger button shows the off-canvas sidebar. */
.mobile-bar{display:none;position:fixed;top:0;left:0;right:0;height:52px;z-index:150;
  background:var(--sidebar-bg);border-bottom:1px solid var(--sidebar-border);
  align-items:center;gap:12px;padding:0 14px;}
.mobile-bar-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:none;background:transparent;color:#fff;cursor:pointer;border-radius:8px;padding:0;}
.mobile-bar-btn:active{background:rgba(255,255,255,.08);}
.mobile-bar-title{color:#fff;font-weight:700;font-size:14px;}
.nav-overlay{display:none;position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.5);}
body.nav-open .nav-overlay{display:block;}
/* "Show more months" button: only a thing on the phone card view (CSS below). */
.show-more-btn{display:none;}

/* ===== RESPONSIVE ===== */
@media(max-width:960px){.content{padding:20px;}.grid2,.c4{grid-template-columns:1fr 1fr;}.c3{grid-template-columns:1fr 1fr 1fr;}}

/* Phone/tablet: sidebar becomes an off-canvas drawer toggled by the top bar. */
@media(max-width:760px){
  .mobile-bar{display:flex;}
  .sidebar{transform:translateX(-100%);transition:transform .25s ease;z-index:300;width:260px;}
  .sidebar.open{transform:none;box-shadow:4px 0 24px rgba(0,0,0,.4);}
  body.nav-open{overflow:hidden;}
  .sidebar-footer{display:block;}
  .content{margin-left:0;padding:16px;padding-top:68px;}
  .grid2,.c2,.c3,.c4{grid-template-columns:1fr;}
}

/* Phone: stack filters, card-ify wide tables, enforce 44px touch targets. */
@media(max-width:640px){
  .drop-grid{grid-template-columns:1fr;}
  .view-title{font-size:20px;}
  .card-header{padding:14px 16px;}
  .card-body{padding:16px;}
  /* Filters full-width and stacked so they're tappable. */
  .filter-row{gap:8px;}
  .filter-row .filter-sel,.filter-row input.filter-sel{width:100%;min-width:0;flex:1 1 100%;}
  .filter-sel{padding:11px 12px;font-size:14px;}
  .btn{padding:12px 18px;}
  .nav-item{padding:13px 18px;}
  .snap-item{padding:16px 16px;}
  /* Wide data tables -> stacked cards. thead hidden; each row is a card; each
     cell shows its column name from data-label (stamped in helpers.js). */
  .tbl-wrap{max-height:none;overflow:visible;}
  table.dt{font-size:13px;}
  table.dt thead{display:none;}
  table.dt,table.dt tbody,table.dt tr,table.dt td{display:block;width:100%;}
  table.dt tr{border:1px solid var(--border);border-radius:10px;margin-bottom:10px;padding:4px 0;background:var(--bg);}
  table.dt tr:nth-child(even){background:var(--bg);}
  table.dt tr:hover td{background:transparent;}
  table.dt td{display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:9px 14px;border-bottom:1px solid var(--surface);text-align:right;
    /* min-width:0 lets long values (e.g. Items "Breakdown") wrap/shrink instead of
       forcing the row wider than the screen (that overflow zoomed the page out). */
    min-width:0;}
  /* Cells holding several badges (e.g. Items "Status per warehouse") stack the
     label above and let the badges flow in a wrapping row below, full width. */
  table.dt td.cell-stack{flex-direction:column;align-items:flex-start;text-align:left;gap:7px;}
  table.dt tr td:last-child{border-bottom:none;}
  table.dt td::before{content:attr(data-label);font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);text-align:left;flex-shrink:0;}
  /* Cells with no label (no matching th) keep normal layout. */
  table.dt td:not([data-label]){display:block;text-align:left;}
  /* Collapsible detail: hide the older rows until "Show more" expands them.
     Selector must out-specify the card rule (table.dt tr{display:block}). */
  table.dt tr.detail-extra{display:none;}
  .detail-expanded table.dt tr.detail-extra{display:block;}
  .show-more-btn{display:block;width:calc(100% - 32px);margin:16px;padding:11px;
    background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--accent);
    font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;}
  /* Trends bar rows (Monthly Stock Movement): the 150px label + inline 110px
     value crush the track to a sliver on phones. Shrink label, free the track,
     override the inline min-width so the rand value only takes what it needs. */
  .bar-label{width:58px;font-size:11px;}
  .bar-track{height:24px;}
  .bar-val{min-width:0 !important;width:auto;font-size:12px;}
}

/* ===== REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
  .view{animation:none;}
  .spin{animation:none;}
  .skeleton::after{animation:none;}
  *{transition-duration:.01ms !important;}
}