:root{
  --bg:#f6f7f9; --fg:#1c2430; --muted:#6b7683; --line:#e3e7ec;
  --head:#0f1b2d; --accent:#2b6cb0;
  --red:#fde2e1; --red-fg:#b42318;
  --orange:#fdeccf; --orange-fg:#8a5a00;
  --green:#d9f2e2; --green-fg:#0f6b3d;
}
*{box-sizing:border-box}
body{margin:0;font:13px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--fg)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* top bar */
.topbar{display:flex;align-items:center;gap:1.5rem;background:var(--head);color:#fff;
  padding:.6rem 1rem}
.topbar .brand{display:flex;align-items:center;gap:.5rem;font-weight:600}
.topbar .brand a{color:#fff;font-weight:600}
.topbar .brand-suffix{color:#c7d2e0;font-weight:400}
.topbar .store-select{background:rgba(255,255,255,.12);color:#fff;font-weight:600;
  border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:.2rem 1.6rem .2rem .5rem;
  font-size:.95rem;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='white' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .5rem center}
.topbar .store-select option{color:#000}
.topbar nav{display:flex;gap:1rem}
.topbar nav a{color:#c7d2e0}
.topbar nav a:hover{color:#fff}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:1rem}
.topbar .logout{color:#c7d2e0}
main{padding:1rem}

/* sync pill */
.sync{font-size:11px;padding:.15rem .5rem;border-radius:999px;background:#334}
.sync.ok{background:var(--green);color:var(--green-fg)}
.sync.bad{background:var(--red);color:var(--red-fg)}
.sync.run{background:var(--orange);color:var(--orange-fg)}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.6rem}
.filters input,.filters select{padding:.35rem .5rem;border:1px solid var(--line);border-radius:6px;background:#fff}
.filters label{display:flex;align-items:center;gap:.3rem;color:var(--muted)}
.filters button{padding:.35rem .8rem;border:0;border-radius:6px;background:var(--accent);color:#fff;cursor:pointer}
.filters .reset{color:var(--muted)}
.filters .rng{display:inline-flex;align-items:center;gap:.3rem;color:var(--muted)}
.filters .rng input{color:var(--fg)}
.filters .dash{color:var(--muted)}
.count{color:var(--muted);margin:.2rem 0 .6rem}
.count .country-note{color:var(--green-fg);background:var(--green);border-radius:6px;padding:.05rem .35rem}
.matrix-filter{margin:.4rem 0 .5rem;color:var(--muted)}
.matrix-filter select{padding:.35rem .5rem;border:1px solid var(--line);border-radius:6px;background:#fff}
.ads{display:inline-block;padding:.1rem .45rem;border-radius:6px;font-size:.78rem;font-weight:600;white-space:nowrap}
.ads-running{background:#e6f4ea;color:#137333}
.ads-stopped{background:#f1f3f4;color:#5f6368}
.ads-excluded{background:#fce8e6;color:#c5221f}

/* tables */
.tablewrap{overflow:auto;max-height:calc(100vh - 160px);border:1px solid var(--line);border-radius:8px;background:#fff}
table.grid{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.grid th,.grid td{padding:.4rem .55rem;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left}
/* sticky header rows (two stacked rows for period tables) */
.grid thead th{position:sticky;top:0;background:#fff;z-index:7}
.grid thead .periodrow th{top:0;z-index:7}
.grid thead .periodrow ~ tr th{top:var(--ph, 31px);z-index:7}
.grid .periodrow th{background:#f0f2f5;color:var(--muted);font-weight:600;text-align:center;border-bottom:1px solid var(--line)}
.num{text-align:right !important}
.cen{text-align:center !important}
.muted{color:var(--muted)}
/* supplier badges */
.sup{display:inline-block;padding:.05rem .35rem;border-radius:4px;font-size:11px;font-weight:700;margin-right:.2rem}
.sup-servicepoints{background:#dbeafe;color:#1e40af}
.sup-cj{background:#fde9d3;color:#9a4a00}
.sup-noquote{background:var(--red);color:var(--red-fg)}
.sup-cell{white-space:nowrap}

/* Period timeframe cues: each of ytd/30d/14d/7d gets its own accent colour, shown
   as a thick coloured divider running down the left of the group + a coloured
   group header, so you can see at a glance which timeframe a column belongs to. */
.grid .period-ytd{--pc:#2563eb}   /* This year — blue   */
.grid .period-30d{--pc:#0d9488}   /* 30 days   — teal   */
.grid .period-14d{--pc:#c2410c}   /* 14 days   — orange */
.grid .period-7d {--pc:#7c3aed}   /* 7 days    — purple */
.grid td.pstart,.grid th.pstart{border-left:3px solid var(--pc,#9aa7b5)}
.grid .periodrow th.period-h{
  border-left:3px solid var(--pc,#9aa7b5);
  border-bottom:3px solid var(--pc,#9aa7b5);
  color:var(--pc,#334)}
.title a{font-weight:600}
.pid{color:var(--muted);font-size:11px;margin-right:.4rem;font-variant-numeric:tabular-nums}
.ext{color:var(--muted);margin-left:.25rem}
.grid tbody tr:hover{background:#fafbfc}
/* sticky sum footer */
.grid tfoot .sumrow td{position:sticky;bottom:0;background:#eef1f5;font-weight:700;
  border-top:2px solid var(--head);z-index:6}
.grid tfoot .sumrow td.sticky{left:0;z-index:7}
/* wasted-spend highlight + export button */
.wasted{margin:.4rem 0 1rem;padding:.5rem .8rem;background:var(--red);color:var(--red-fg);
  border-radius:6px;display:inline-block;font-size:14px}
.wasted b{font-size:16px}
.btn-export{margin-left:.6rem;padding:.35rem .7rem;background:var(--head);color:#fff;
  border-radius:6px;font-weight:600;white-space:nowrap}
.btn-export:hover{text-decoration:none;opacity:.9}
.sticky{position:sticky;left:0;background:#fff;z-index:6;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.grid tbody tr:hover .sticky{background:#fafbfc}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}
.small{font-size:11px}
.empty{color:var(--muted);text-align:center;padding:1rem}
.grid.narrow{width:auto;min-width:420px}

/* roas colour coding */
.roas-red{background:var(--red);color:var(--red-fg);font-weight:600}
.roas-orange{background:var(--orange);color:var(--orange-fg);font-weight:600}
.roas-green{background:var(--green);color:var(--green-fg);font-weight:600}

/* status chips */
.status{font-size:11px;padding:.1rem .45rem;border-radius:999px;background:#eef1f4;color:var(--muted)}
.s-active{background:var(--green);color:var(--green-fg)}
.s-archived{background:#eceff3;color:#5b6673}
.s-draft{background:var(--orange);color:var(--orange-fg)}

/* headings */
h1{font-size:1.3rem;margin:.2rem 0 .3rem}
h2{font-size:1.05rem;margin:1.3rem 0 .5rem}
.sub,.crumbs{color:var(--muted);margin:.1rem 0 .4rem}

/* dashboard cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.7rem;margin:.6rem 0}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:.7rem .9rem;display:flex;flex-direction:column}
.card .k{color:var(--muted);font-size:12px}
.card .v{font-size:1.4rem;font-weight:700}

/* nav badge + critical pill */
.badge{background:var(--red);color:var(--red-fg);border-radius:999px;padding:.05rem .4rem;
  font-size:11px;font-weight:700;margin-left:.15rem}
.badge[hidden]{display:none}
.pill{background:var(--red);color:var(--red-fg);border-radius:999px;padding:.1rem .55rem;
  font-size:.8rem;font-weight:700;vertical-align:middle}
.pill.sm{font-size:.7rem;padding:.05rem .45rem;background:#eef1f4;color:var(--muted)}
.pill.amber{background:var(--orange);color:var(--orange-fg)}
.badge.amber{background:var(--orange);color:var(--orange-fg)}
.pill.green{background:var(--green);color:var(--green-fg)}
.badge.green{background:var(--green);color:var(--green-fg)}
.wasted.green{background:var(--green);color:var(--green-fg)}
.badge.grey{background:#eef1f4;color:var(--muted)}
.changes{max-width:22em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.85rem}
.daysoff{color:var(--muted)}
.daysoff.long{color:var(--red-fg);font-weight:600}
.fix{display:inline-block;padding:.1rem .45rem;border-radius:6px;font-size:.8rem;font-weight:600;white-space:nowrap}
.fix-seo{background:#e8f0fe;color:#1967d2}
.fix-price{background:var(--orange);color:var(--orange-fg)}
.fix-clicks{background:var(--green);color:var(--green-fg)}

/* action flags / checkboxes */
.filters .chk{gap:.35rem;color:var(--fg)}
.act, .actflag input{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}
.actflag{text-align:center}
.actflag.on{background:var(--green)}
.actflag.supply.on{background:var(--red)}
.act-h{text-align:center;font-size:11px;line-height:1.15}
.act-h .who{color:var(--muted);font-weight:400;font-size:10px}
.note-input{width:100%;padding:.25rem .4rem;border:1px solid var(--line);border-radius:5px;font-size:12px}

/* product-page action bar */
.actionbar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:.7rem .9rem;margin:.6rem 0}
.actionbar label{display:flex;align-items:center;gap:.4rem}
.actionbar .sep{color:var(--line)}
.actitem{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.actitem .note-input{width:auto;min-width:220px}

/* login */
.login-body{display:grid;place-items:center;min-height:100vh}
.login-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:2rem;
  width:320px;display:flex;flex-direction:column;gap:.7rem;box-shadow:0 6px 24px rgba(0,0,0,.06)}
.login-card h1{font-size:1.1rem;text-align:center;margin-bottom:.4rem}
.login-card input{padding:.6rem;border:1px solid var(--line);border-radius:8px}
.login-card button{padding:.6rem;border:0;border-radius:8px;background:var(--accent);color:#fff;cursor:pointer}
.login-card .err{color:var(--red-fg);background:var(--red);padding:.5rem;border-radius:6px;text-align:center}