/* ===========================================================================
   Shop Analyst - one stylesheet for the whole application.

   Before this, all 21 templates carried their own <style> block. The same card
   was defined twenty different ways, a colour changed in one screen and not
   the next, and there was no way to add a dark mode at all. Everything visual
   now comes from the tokens at the top of this file, so a change here reaches
   every page.

   NO WEBFONTS ON PURPOSE. The app has to run on a rented server with no
   outbound internet, and nothing about a customer's session should reach
   another company. The system font stack is what every operating system
   already ships, and it looks native on each one.

   THREE THEME STATES, not two. A viewer who has chosen light or dark stamps
   data-theme on <html>. A viewer on "system" stamps nothing at all, and only
   prefers-color-scheme separates them. So: :root carries the complete light
   palette, the media query redefines tokens for an unstamped dark viewer, and
   [data-theme="dark"] redefines them again so an explicit choice wins either
   way. Never put a colour's only definition inside a media query.
   =========================================================================== */

:root {
  /* Ground and surfaces. The neutrals lean very slightly green so they sit
     with the accent rather than looking like unconsidered grey. */
  --ground:      #F4F7F5;
  --panel:       #FFFFFF;
  --sunk:        #EDF2EF;
  --line:        #DFE6E1;
  --rule:        #C8D3CC;

  /* Text */
  --ink:         #151917;
  --muted:       #59635E;
  --faint:       #8A938E;

  /* The accent. Two weights: one that carries text safely, one for fills. */
  --accent:      #0F7A57;
  --accent-lit:  #1D9E75;
  --accent-wash: #E4F2EC;
  --accent-edge: #A9D8C4;

  /* Semantic, kept separate from the accent so "good" never means "brand". */
  --good:        #2E7D32;
  --good-wash:   #EAF4EA;
  --warn:        #8A6110;
  --warn-wash:   #FAF1DE;
  --warn-edge:   #E8CE95;
  --bad:         #C0392B;
  --bad-wash:    #FBECEA;
  --bad-edge:    #EBB8B0;

  --shadow:      0 1px 2px rgba(20, 30, 25, .05), 0 8px 24px -18px rgba(20, 30, 25, .28);
  --radius:      12px;
  --radius-sm:   8px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* Chart colours.
     The SVG is generated on the server, which has no idea which theme the
     reader is in. It writes var(--series-1, #2a78d6) and so on, and because
     the SVG is inline in the page these reach it and the same markup comes out
     correct in either theme. The hex in the chart is only a fallback, for a
     chart detached from this stylesheet and mailed as an attachment.

     These eight are a fixed order, never cycled, and they are not a set of
     colours somebody liked: they were run through a colourblind-separation
     validator in both themes and pass every check. Do not reorder them.
     Leading with the product's own teal was tried and fails, because it puts
     yellow beside orange. */
  --chart-ink:   #1f1e1d;
  --chart-muted: #7b7a74;
  --chart-grid:  #E3E7E3;
  --chart-bad:   #C0392B;
  --chart-warn:  #8A6110;

  --series-1: #2a78d6;   /* blue    */
  --series-2: #eb6834;   /* orange  */
  --series-3: #1baf7a;   /* aqua    */
  --series-4: #eda100;   /* yellow  */
  --series-5: #e87ba4;   /* magenta */
  --series-6: #008300;   /* green   */
  --series-7: #4a3aa7;   /* violet  */
  --series-8: #e34948;   /* red     */
  --series-3-soft: #9FE1CB;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0E1312;
    --panel:       #161C1A;
    --sunk:        #121817;
    --line:        #232C29;
    --rule:        #313C37;

    --ink:         #E7EDEA;
    --muted:       #97A29C;
    --faint:       #6C7772;

    --accent:      #4ECFA0;
    --accent-lit:  #35B98A;
    --accent-wash: #10261F;
    --accent-edge: #235847;

    --good:        #6FC97C;
    --good-wash:   #12240F;
    --warn:        #DCB264;
    --warn-wash:   #241B0B;
    --warn-edge:   #4A3A16;
    --bad:         #EE8A7B;
    --bad-wash:    #2A1512;
    --bad-edge:    #5A2A24;

    --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -18px rgba(0, 0, 0, .8);
    --chart-ink: #E7EDEA;
    --chart-muted: #909A94;
    --chart-grid: #26302C;
    --chart-bad: #EE8A7B;
    --chart-warn: #DCB264;

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --series-3-soft: #2E6B57;
  }
}

:root[data-theme="dark"] {
  --ground:      #0E1312;
  --panel:       #161C1A;
  --sunk:        #121817;
  --line:        #232C29;
  --rule:        #313C37;

  --ink:         #E7EDEA;
  --muted:       #97A29C;
  --faint:       #6C7772;

  --accent:      #4ECFA0;
  --accent-lit:  #35B98A;
  --accent-wash: #10261F;
  --accent-edge: #235847;

  --good:        #6FC97C;
  --good-wash:   #12240F;
  --warn:        #DCB264;
  --warn-wash:   #241B0B;
  --warn-edge:   #4A3A16;
  --bad:         #EE8A7B;
  --bad-wash:    #2A1512;
  --bad-edge:    #5A2A24;

  --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -18px rgba(0, 0, 0, .8);
  --chart-ink: #E7EDEA;
  --chart-muted: #909A94;
  --chart-grid: #26302C;
  --chart-bad: #EE8A7B;
  --chart-warn: #DCB264;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --series-3-soft: #2E6B57;
}

/* --------------------------------------------------------------- base ---- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent-lit);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Every figure that sits in a column lines up. */
.num, td, .metric-v, .money { font-variant-numeric: tabular-nums; }

.muted { color: var(--muted); font-size: 13px; }
.faint { color: var(--faint); }
.sec   { color: var(--muted); }
.up    { color: var(--good); }
.down  { color: var(--bad); }
.mono  { font-family: var(--mono); }

/* ------------------------------------------------------------ layout ---- */

.shell { display: flex; align-items: flex-start; min-height: 100vh; }

.side {
  position: sticky; top: 0; height: 100vh; flex: 0 0 232px; overflow-y: auto;
  background: var(--panel); border-right: 1px solid var(--line);
  padding: 20px 14px;
}
.main { flex: 1; min-width: 0; padding: 24px 28px 60px; }
.wrap { max-width: 1180px; margin: 0 auto; }
.wrap-narrow { max-width: 660px; margin: 0 auto; padding: 40px 22px 60px; }

.side-biz  { font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.side-code { font-size: 11.5px; color: var(--faint); margin-bottom: 16px; }
.side-h {
  font-size: 10px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--faint); font-weight: 700; margin: 18px 0 5px;
}
.side a {
  display: block; text-decoration: none; font-size: 13.5px; color: var(--muted);
  padding: 7px 10px; border-radius: var(--radius-sm); line-height: 1.3;
}
.side a:hover { background: var(--sunk); color: var(--ink); }
.side a.here  { background: var(--accent-wash); color: var(--accent); font-weight: 650; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.view-title { font-size: 21px; font-weight: 650; letter-spacing: -.2px; }

/* Horizontal tab row, for pages that are not the sidebar dashboard. */
.nav {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.nav a {
  text-decoration: none; font-size: 13.5px; color: var(--muted);
  padding: 9px 13px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nav a:hover { color: var(--ink); }
.nav a.here { color: var(--ink); font-weight: 650; border-bottom-color: var(--accent-lit); }

/* --------------------------------------------------------- components ---- */

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px;
}
.subcard {
  background: var(--sunk); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-top: 10px;
}
.card-h { font-size: 14.5px; font-weight: 650; margin-bottom: 6px; }

.pill {
  display: inline-block; font-size: 11px; padding: 2px 10px;
  border-radius: 20px; background: var(--sunk); color: var(--muted);
  margin-left: 8px;
}
.pill.accent { background: var(--accent-wash); color: var(--accent); }
.badge { font-size: 11px; padding: 2px 10px; border-radius: 6px; }
.chan {
  font-size: 10.5px; background: var(--accent-wash); color: var(--accent);
  border-radius: 4px; padding: 1px 7px; margin-left: 7px; text-transform: capitalize;
}

/* Figures across the top of a screen. */
.metrics-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px; margin-top: 8px;
}
.metric, .mini-metric {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 9px 12px;
}
.metric .k, .mini-metric p:first-child {
  font-size: 10px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--faint); font-weight: 650;
}
.metric .v, .mini-metric p:last-child {
  font-size: 17px; font-weight: 650; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Messages. Colour is never the only signal: each carries a word or a mark. */
.note, .saved, .error, .working, .coverage {
  border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 14px;
  font-size: 13.5px; line-height: 1.55;
}
.saved {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--accent-wash); border: 1px solid var(--accent-edge);
  color: var(--accent);
}
.saved-tick { font-weight: 700; font-size: 15px; line-height: 1.5; }
.error   { background: var(--bad-wash);  border: 1px solid var(--bad-edge);  color: var(--bad); }
.working,
.coverage { background: var(--warn-wash); border: 1px solid var(--warn-edge); color: var(--warn); }
.notif {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--good-wash); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 12px;
}
.notif-dot { color: var(--good); font-weight: 700; font-size: 15px; }
.notif p { font-size: 13.5px; line-height: 1.5; }

/* ------------------------------------------------------------- forms ---- */

input, select, textarea {
  box-sizing: border-box; padding: 9px 11px;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit;
  background: var(--panel); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type=file] {
  width: 100%; padding: 12px; border: 1px dashed var(--rule);
  background: var(--sunk); font-size: 13px; margin-bottom: 10px;
}
label { font-size: 13px; color: var(--muted); }

button, .btn {
  display: inline-block; text-decoration: none; text-align: center;
  background: var(--ink); color: var(--ground); border: none;
  border-radius: var(--radius-sm); padding: 10px 18px;
  font-size: 13.5px; font-weight: 650; font-family: inherit; cursor: pointer;
}
button:hover, .btn:hover { opacity: .9; }
.btn-ghost, button.ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--rule);
}
/* The small x that removes one row. */
.rm {
  background: none; border: none; color: var(--faint); font-size: 19px;
  line-height: 1; cursor: pointer; padding: 2px 6px; width: auto; margin: 0;
  border-radius: 6px; font-weight: 400;
}
.rm:hover { background: var(--bad-wash); color: var(--bad); opacity: 1; }

details summary { cursor: pointer; font-size: 13.5px; color: var(--muted); }

/* ------------------------------------------------------------ tables ---- */

.tbl-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: right; font-size: 10px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--faint); font-weight: 650;
  padding: 0 0 7px 10px; white-space: nowrap;
}
th:first-child { text-align: left; padding-left: 0; }
td {
  text-align: right; padding: 8px 0 8px 10px;
  border-top: 1px solid var(--line); white-space: nowrap;
}
td:first-child { text-align: left; padding-left: 0; white-space: normal; }
tr.total td { border-top: 2px solid var(--ink); font-weight: 700; padding-top: 10px; }

/* ------------------------------------------------------------ charts ---- */

.charts { margin-top: 16px; }
.chart-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px; margin-top: 14px;
}
.chart-grid > * { min-width: 0; }
.chart-box, .chart-full {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px;
}
.chart-title { font-size: 12.5px; font-weight: 650; margin-bottom: 10px; }
.chart-note { font-size: 11px; color: var(--faint); line-height: 1.5; margin-top: 8px; }
.chart-full .chart-note { margin-top: 0; margin-bottom: 10px; }

/* Charts settle into place when a screen opens. Confined to @media screen on
   purpose: a printed page or an email has no running stylesheet, so the same
   SVG is simply drawn finished. Nothing depends on the animation. Anyone who
   has asked their system to reduce motion gets the static version too. */
@media screen and (prefers-reduced-motion: no-preference) {
  .grow {
    transform-origin: center bottom;
    animation: grow .5s cubic-bezier(.2, .8, .3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
  .stretch {
    transform-origin: left center;
    animation: stretch .55s cubic-bezier(.2, .8, .3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 55ms);
  }
  .draw {
    stroke-dasharray: 2000; stroke-dashoffset: 2000;
    animation: draw 1.1s ease-out forwards;
  }
  @keyframes grow    { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes stretch { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes draw    { to { stroke-dashoffset: 0; } }

  /* A page arriving. One movement, not thirty. */
  .card, .chart-box, .chart-full {
    animation: rise .32s cubic-bezier(.2, .8, .3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 30ms);
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ------------------------------------------------------ theme switch ---- */

.theme-toggle {
  background: transparent; border: 1px solid var(--rule); color: var(--muted);
  border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--accent-lit); }

/* --------------------------------------------------------- responsive ---- */

/* Tablet and small laptop: the sidebar becomes a scrolling row of chips. */
@media (max-width: 900px) {
  .shell { display: block; }
  .side {
    position: static; height: auto; border-right: none;
    border-bottom: 1px solid var(--line); padding: 12px 14px;
    display: flex; gap: 6px; overflow-x: auto; align-items: center;
    -webkit-overflow-scrolling: touch;
  }
  .side-biz, .side-code, .side-h { display: none; }
  .side a { white-space: nowrap; padding: 7px 12px; background: var(--sunk); }
  .main { padding: 18px 16px 48px; }
}

/* Phone. Touch targets grow, grids collapse, 16px inputs stop iOS zooming. */
@media (max-width: 620px) {
  body { font-size: 15px; }
  .chart-grid { grid-template-columns: 1fr; }
  .metrics-row { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }
  .card { padding: 14px 15px; border-radius: 10px; }
  .main { padding: 14px 12px 44px; }
  .wrap-narrow { padding: 26px 16px 44px; }
  .view-title { font-size: 18px; }
  input, select, textarea { font-size: 16px; }
  button, .btn { padding: 11px 18px; }
  .rm { font-size: 22px; padding: 6px 10px; }
  th, td { padding-left: 8px; }
}

/* Installed as an app: pay out the phone's notch and home indicator. */
@media (display-mode: standalone) {
  .side { padding-top: max(20px, env(safe-area-inset-top)); }
  .main { padding-bottom: max(60px, env(safe-area-inset-bottom)); }
}

@media print {
  body { background: #fff; color: #000; }
  .side, .nav, .theme-toggle, .rm, .no-print { display: none !important; }
  .main { padding: 0; }
  .card, .chart-box, .chart-full { box-shadow: none; break-inside: avoid; }
}