/* SDO Sales Tracker */
:root{
  /* Simply Doughnuts brand */
  --pink:#e6007e; --pink-dk:#c00069; --pink-lt:#ffe7f3;
  --navy:#001f60; --navy-dk:#00174a; --navy-lt:#e8ecf6;
  --dough:#e4b490; --dough-dk:#b48448;
  --ink:#1b1d23; --ink-2:#4a5060; --ink-3:#7c8497;
  --line:#e6e8ef; --line-2:#f1f2f7;
  --bg:#f6f7fb; --card:#ffffff;
  --ok:#12855f; --ok-bg:#e6f6ef;
  --bad:#c62a3d; --bad-bg:#fdeaec;
  --warn:#a8690b; --warn-bg:#fdf3e2;
  --blue:#2f5fd0; --violet:#6b4bd6; --teal:#12867f; --amber:#d98014;
  --r:14px; --r-sm:9px;
  --sh:0 1px 2px rgba(20,25,40,.05), 0 6px 20px rgba(20,25,40,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
}
a{color:var(--pink-dk); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0; font-weight:650; letter-spacing:-.015em; color:var(--navy)}
h1{font-size:23px}
h2{font-size:16px}
h3{font-size:14px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px;
  height:58px; padding:0 18px; background:var(--navy); border-bottom:1px solid var(--navy-dk);
}
.brand{display:flex; align-items:center; gap:10px; color:#fff; font-size:15px}
.brand:hover{text-decoration:none}
.brand .mark{width:28px; height:28px; flex:none; display:block}
.brand-txt{line-height:1.1; white-space:nowrap}
.brand strong{font-weight:800; letter-spacing:-.01em}
.brand .brand-sub{display:block; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; opacity:.72; font-weight:600}
.topbar .whoami .uname{color:#fff}
.topbar .whoami .urole{color:rgba(255,255,255,.62)}
.topbar .btn.ghost{background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.30)}
.topbar .btn.ghost:hover{background:rgba(255,255,255,.20); color:#fff}
.topbar .burger span{background:#fff}
.spacer{flex:1}
.whoami{display:flex; flex-direction:column; align-items:flex-end; line-height:1.25}
.uname{font-weight:600; font-size:13px}
.urole{font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em}
.burger{display:none; flex-direction:column; gap:4px; background:none; border:0; padding:8px; cursor:pointer}
.burger span{display:block; width:18px; height:2px; background:#fff; border-radius:2px}

/* ---------- shell ---------- */
.shell{display:flex; align-items:flex-start}
.side{
  position:sticky; top:58px; width:212px; flex:none; height:calc(100vh - 58px);
  overflow-y:auto; padding:16px 12px 40px; background:#fff; border-right:1px solid var(--line);
}
.navgroup{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin:16px 10px 6px; font-weight:650}
.navgroup:first-child{margin-top:2px}
.navlink{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm);
  color:var(--ink-2); font-weight:520; font-size:13.5px; margin-bottom:1px;
}
.navlink:hover{background:var(--line-2); color:var(--ink); text-decoration:none}
.navlink.active{background:var(--pink-lt); color:var(--pink-dk); font-weight:620; box-shadow:inset 2px 0 0 var(--pink)}
.navlink svg{width:17px; height:17px; flex:none; opacity:.85}
.main{flex:1; min-width:0; padding:22px 26px 60px; max-width:1500px}

/* ---------- page head ---------- */
.pagehead{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap}
.pagehead .sub{margin:4px 0 0; color:var(--ink-3); font-size:13px}
.pagehead-actions{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- filters ---------- */
.filters{
  display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; margin-bottom:18px;
}
.filters label{display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--ink-3); font-weight:600; text-transform:uppercase; letter-spacing:.05em}
.range-note{margin-left:auto; color:var(--ink-3); font-size:12px}

input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  font:inherit; padding:7px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; color:var(--ink); min-height:34px;
}
select{min-width:120px; cursor:pointer}
textarea{min-height:90px; resize:vertical; width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pink); outline-offset:-1px; border-color:var(--pink)}
label.field{display:block; margin-bottom:12px; font-size:12px; color:var(--ink-2); font-weight:600}
label.field input,label.field select,label.field textarea{display:block; width:100%; margin-top:5px; font-weight:400; color:var(--ink)}
.hint{font-size:11.5px; color:var(--ink-3); font-weight:400; margin-top:3px}

.btn{
  display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:var(--r-sm);
  border:1px solid var(--pink); background:var(--pink); color:#fff; font:inherit; font-weight:600;
  cursor:pointer; white-space:nowrap;
}
.btn:hover{background:var(--pink-dk); border-color:var(--pink-dk); text-decoration:none; color:#fff}
.btn.ghost{background:#fff; color:var(--ink-2); border-color:var(--line)}
.btn.ghost:hover{background:var(--line-2); color:var(--ink)}
.btn.sm{padding:6px 11px; font-size:12.5px}
.btn.danger{background:var(--bad); border-color:var(--bad)}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---------- cards and grids ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; box-shadow:var(--sh)}
.card + .card{margin-top:16px}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.card-head h2{font-size:14.5px}
.card-head .muted{font-size:12px; color:var(--ink-3)}
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g23{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.g32{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.mb{margin-bottom:16px}

/* ---------- kpis ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin-bottom:18px}
.kpi{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; box-shadow:var(--sh)}
.kpi-label{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:650}
.kpi-value{font-size:25px; font-weight:700; letter-spacing:-.02em; margin:5px 0 4px; line-height:1.15}
.kpi-foot{display:flex; align-items:center; gap:8px; min-height:17px}
.kpi-note{font-size:11.5px; color:var(--ink-3)}
.delta{font-size:11.5px; font-weight:700; padding:2px 6px; border-radius:20px}
.delta.up{color:var(--ok); background:var(--ok-bg)}
.delta.down{color:var(--bad); background:var(--bad-bg)}
.delta.flat{color:var(--ink-3); background:var(--line-2)}
.kpi.accent{background:linear-gradient(135deg,#fff,var(--pink-lt))}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; margin:0 -18px -16px; padding:0 18px 16px}
table{width:100%; border-collapse:collapse; font-size:13px}
th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3);
  font-weight:700; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; background:#fff;
}
td{padding:9px 10px; border-bottom:1px solid var(--line-2); vertical-align:middle}
tbody tr:hover td{background:#fafbfe}
tbody tr:last-child td{border-bottom:0}
.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.strong{font-weight:650}
.tfoot td{border-top:2px solid var(--line); border-bottom:0; font-weight:700; background:#fbfcfe}
.mini{font-size:11.5px; color:var(--ink-3)}
.nowrap{white-space:nowrap}

/* bar inside a table cell */
.cellbar{position:relative; min-width:110px}
.cellbar i{position:absolute; left:0; top:50%; transform:translateY(-50%); height:18px; background:var(--pink-lt); border-radius:4px; z-index:0}
.cellbar span{position:relative; z-index:1}

/* ---------- badges ---------- */
.badge{display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:650; background:var(--line-2); color:var(--ink-2); white-space:nowrap}
.badge.ok{background:var(--ok-bg); color:var(--ok)}
.badge.bad{background:var(--bad-bg); color:var(--bad)}
.badge.warn{background:var(--warn-bg); color:var(--warn)}
.badge.info{background:#e8effc; color:var(--blue)}
.badge.pink{background:var(--pink-lt); color:var(--pink-dk)}
.badge.violet{background:#efe9fd; color:var(--violet)}

/* ---------- flash ---------- */
.flash{padding:11px 15px; border-radius:var(--r-sm); margin-bottom:16px; font-weight:560; border:1px solid}
.flash.ok{background:var(--ok-bg); border-color:#bfe6d5; color:#0c6146}
.flash.err{background:var(--bad-bg); border-color:#f6cdd3; color:#94212f}
.flash.warn{background:var(--warn-bg); border-color:#f2ddb6; color:#7f5008}

/* ---------- charts ---------- */
.chart{width:100%; display:block; overflow:visible}
.chart-legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:var(--ink-2)}
.chart-legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.chart-empty{padding:40px; text-align:center; color:var(--ink-3); font-size:13px}

/* ---------- pipeline board ---------- */
.board{display:grid; grid-template-columns:repeat(7,minmax(170px,1fr)); gap:12px;
        overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px;
        width:100%; max-width:100%; min-width:0}
.board > *{min-width:0}
.col{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:10px; min-height:120px}
.col h3{font-size:12px; display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:var(--ink-2)}
.col h3 b{font-size:11px; background:var(--line-2); border-radius:20px; padding:1px 7px; color:var(--ink-3)}
.pcard{display:block; border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 10px; margin-bottom:7px; background:#fff; color:var(--ink)}
.pcard:hover{border-color:var(--pink); text-decoration:none; box-shadow:var(--sh)}
.pcard b{display:block; font-size:12.5px; margin-bottom:3px}
.pcard .meta{font-size:11px; color:var(--ink-3); display:flex; justify-content:space-between; gap:6px}

/* ---------- misc ---------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; flex-wrap:wrap}
.tabs a{padding:8px 13px; font-size:13px; font-weight:600; color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px}
.tabs a:hover{color:var(--ink); text-decoration:none}
.tabs a.on{color:var(--pink-dk); border-bottom-color:var(--pink)}
.empty{padding:34px; text-align:center; color:var(--ink-3)}
.split{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap}
.stack>*+*{margin-top:10px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; max-width:100%}
.row>*{flex:1; min-width:150px}
.pill-list{display:flex; gap:6px; flex-wrap:wrap}
.progress{height:7px; background:var(--line-2); border-radius:9px; overflow:hidden}
.progress i{display:block; height:100%; background:var(--pink); border-radius:9px}
code{background:var(--line-2); padding:1px 5px; border-radius:4px; font-size:12.5px}
.checkline{display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:6px}
.checkline input{width:16px; height:16px; min-height:0}

/* ---------- login ---------- */
.authwrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:linear-gradient(165deg,var(--navy) 0%,var(--navy-dk) 55%,#3a0033 100%)}
.authbox .authlogo{display:block; width:210px; max-width:70%; height:auto; margin:0 auto 20px}
.authbox .authmark{display:block; width:64px; height:64px; margin:0 auto 14px}
.authbox h1,.authbox p.sub{text-align:center}
.authbox .authname{font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--navy)}
.authbox p.sub{letter-spacing:.14em; text-transform:uppercase; font-size:11px; font-weight:700; color:var(--pink-dk)}
.authbox{width:100%; max-width:390px; background:#fff; border:0; border-radius:20px; padding:32px; box-shadow:0 24px 70px rgba(0,10,40,.42)}
.authbox h1{font-size:20px; margin-bottom:5px}
.authbox p.sub{margin:0 0 22px; color:var(--ink-3); font-size:13px}
.authbox .btn{width:100%; justify-content:center; margin-top:6px; padding:11px}

@media (max-width:1100px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))} .g23,.g32{grid-template-columns:1fr} }
/* nothing may push the page sideways on a phone */
body{overflow-x:hidden}
.main,.card,.shell{min-width:0; max-width:100%}
.card table{min-width:0}

@media (max-width:820px){
  .burger{display:flex}
  .board{grid-template-columns:repeat(7,minmax(220px,220px))}
  h1{font-size:20px}
  .kpi-value{font-size:22px}
  .side{position:fixed; left:0; top:58px; z-index:40; transform:translateX(-100%); transition:transform .2s; box-shadow:0 10px 40px rgba(0,0,0,.12)}
  .side.open{transform:none}
  .main{padding:16px 14px 60px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .brand-txt{display:none}
  .tablewrap{margin:0 -18px; padding:0 18px}
  .row>*{min-width:110px}
  .filters label{flex:1 1 130px}
}
@media print{ .topbar,.side,.filters,.pagehead-actions,.btn{display:none!important} .main{padding:0} .card{break-inside:avoid; box-shadow:none} }

/* Confirmation dialog, used before anything is deleted anywhere in the app */
.confirmwrap{position:fixed; inset:0; background:rgba(0,15,50,.55); display:none;
  align-items:center; justify-content:center; padding:20px; z-index:900}
.confirmwrap.on{display:flex}
.confirmcard{background:#fff; border-radius:16px; padding:24px; width:100%; max-width:430px;
  box-shadow:0 24px 70px rgba(0,10,40,.35)}
.confirmcard h3{margin:0 0 8px; font-size:19px; color:var(--navy); letter-spacing:-.01em}
.confirmcard .cfmsg{margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-2)}
.confirmcard .cfdetail{margin-top:12px; padding:11px 13px; background:var(--line-2);
  border-radius:9px; font-size:13px; color:var(--ink); font-weight:600}
.confirmcard .cfrow{display:flex; gap:10px; margin-top:20px}
.confirmcard .cfrow .btn{flex:1; justify-content:center}
.navlink .navbadge{margin-left:auto; background:var(--pink); color:#fff; font-style:normal;
  font-size:11px; font-weight:800; min-width:19px; height:19px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 6px}

.pdfbusy{position:fixed; left:50%; top:22px; transform:translateX(-50%); z-index:950;
  background:var(--navy); color:#fff; padding:11px 20px; border-radius:24px; font-size:13.5px;
  font-weight:600; box-shadow:0 12px 34px rgba(0,10,40,.35); display:none}

/* Printing should look like the screen, colours and all */
@media print{
  *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
  .tablewrap{overflow:visible !important}
  .card{break-inside:avoid}
  table{font-size:10px}
}

/* Agent pages: stacked forms and two column rows */
.stack label{display:flex; flex-direction:column; gap:5px; font-size:11px; color:var(--ink-3); font-weight:600; text-transform:uppercase; letter-spacing:.05em}
.stack label input,.stack label select,.stack label textarea{font:inherit; font-size:13px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-1); padding:8px 10px; border:1px solid var(--line-1); border-radius:8px; background:#fff; width:100%}
.stack label textarea{resize:vertical; line-height:1.5}
.stack label input:focus,.stack label select:focus,.stack label textarea:focus{outline:2px solid var(--pink); outline-offset:-1px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.row2>*{min-width:0}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.stack button{align-self:flex-start}

/* Order entry: one date, then a box per product, the way the sheet is filled in */
label.field.bigdate input{font-size:17px; padding:11px 12px; max-width:230px}
h3.depothead{margin:22px 0 8px; font-size:14px; font-weight:700; color:#001f60;
  border-bottom:2px solid #e3e8f2; padding-bottom:6px}
.entrygrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:11px}
.entrygrid label.field{display:flex; flex-direction:column; gap:5px; background:#f8f9fc;
  border:1px solid #e3e8f2; border-radius:10px; padding:11px 12px}
.entrygrid .pname{font-size:12px; font-weight:700; color:#001f60; text-transform:none; letter-spacing:0; line-height:1.3}
input.bigbox{width:100%; font:inherit; font-size:19px; font-weight:700; text-align:right;
  padding:10px 12px; border:1px solid #d4d9e4; border-radius:8px; background:#fff; color:#1b1d23}
input.bigbox::placeholder{font-size:14px; font-weight:400; color:#9aa2b4}
input.bigbox:focus{outline:2px solid #e6007e; outline-offset:-1px; border-color:#e6007e}
input.bigbox.has{background:#eef1f9; border-color:#c9d0de}
input.bigbox.edited{background:#fff3d6; border-color:#c98a00}
input.bigbox.locked{background:#f1f1f4; color:#8a8a95; cursor:not-allowed}
.entrygrid .hint{font-size:11px; color:#6b7280; text-align:right}
@media (max-width:560px){
  .entrygrid{grid-template-columns:1fr 1fr; gap:9px}
  .entrygrid label.field{padding:9px 9px}
  input.bigbox{font-size:18px; padding:10px 8px}
}

/* Notes: recording box */
.recbox{border:1px solid var(--line-2);border-radius:12px;padding:14px;background:var(--bg-2,#fafbfd)}
.recbtn{min-width:150px}
.rectime{font-variant-numeric:tabular-nums;font-weight:700;font-size:16px;color:var(--ink-1)}
.note-item{padding:13px 0;border-top:1px solid var(--line-2)}
.note-item:first-child{border-top:0}
.note-said{margin-top:6px;padding:8px 10px;background:var(--line-3,#f3f5fa);border-radius:8px;line-height:1.5}
.note-done{margin-top:6px;padding:8px 10px;background:#eef7f0;border-radius:8px;line-height:1.5}

/* Delete sits under the box it belongs to, and never widens the column */
.delbox{display:block;margin-top:6px;min-width:0}
.dellink{
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;color:#c62a3d;
  text-decoration:underline;text-underline-offset:2px;
}
.delbox .delask{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.delbox .delq{flex:1 0 100%;font-size:12px;font-weight:600;color:var(--ink-1)}
.delbox .delask .btn{padding:5px 10px;font-size:12px;min-width:52px}
.entrygrid{min-width:0}
.entrygrid label.field{min-width:0}

/* Depots folded away, so a long sheet is short on a phone.
   Open the group, open the depot, fill it in. */
details.acc{border:1px solid var(--line,#e3e7f0); border-radius:9px; background:#fff; margin:10px 0}
details.acc>summary{display:flex; align-items:center; gap:9px; cursor:pointer; list-style:none;
  padding:11px 13px; font-size:14px; font-weight:700; color:#001f60; user-select:none}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::before{content:""; flex:0 0 auto; width:8px; height:8px; margin-right:2px;
  border-right:2px solid #8d97ad; border-bottom:2px solid #8d97ad;
  transform:rotate(-45deg); transition:transform .15s ease}
details.acc[open]>summary::before{transform:rotate(45deg)}
details.acc>summary:hover{background:#f6f8fd; border-radius:9px}
details.acc .accname{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
details.acc .accnote{flex:0 0 auto; font-size:11px; font-weight:600; color:#8d97ad}
details.acc .accbadge{flex:0 0 auto; font-size:11px; font-weight:700; color:#0a7a4a;
  background:#e6f6ee; border-radius:20px; padding:2px 9px}
details.accgroup{background:#f8f9fc; border-color:#d8deeb}
details.accgroup>summary{font-size:15px}
details.accdepot{margin:8px 11px; background:#fff}
details.accdepot>summary{font-size:13px; font-weight:600; color:#31405f; padding:9px 11px}
details.acc .entrygrid{padding:2px 11px 13px}
details.accgroup>.entrygrid{padding:2px 13px 13px}
.entrygrid label.field.seasonal{background:#fff7ec; border-color:#f0d9b5}
.entrygrid label.field.seasonal select.seasonpick{width:100%; font-size:13px; font-weight:600;
  padding:6px 7px; border:1px solid #e0c79c; border-radius:7px; background:#fff; color:#7a4b06}
@media (max-width:560px){
  details.accdepot{margin:8px 7px}
  details.acc .entrygrid{padding:2px 8px 11px}
  details.accgroup>.entrygrid{padding:2px 9px 11px}
}

/* An element marked hidden stays hidden, whatever else is set on it.
   Without this the Delete confirmation sits open on every filled box. */
[hidden]{display:none !important}

/* Tesco stocks more than one of our products, so every Tesco report opens with
   the same switch: all of Tesco, or one product on its own. */
.prodswitch{display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0 0 16px}
.prodswitch .pslabel{font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#8d97ad; margin-right:2px}
.prodswitch .psopt{display:inline-block; padding:6px 13px; border-radius:20px;
  border:1px solid var(--line,#e3e7f0); background:#fff; color:#31405f;
  font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap}
.prodswitch .psopt:hover{border-color:#b9c6ea; background:#f6f8fd}
.prodswitch .psopt.on{background:#001F60; border-color:#001F60; color:#fff}
@media (max-width:560px){
  .prodswitch{gap:6px}
  .prodswitch .psopt{padding:6px 11px; font-size:12px}
  .prodswitch .pslabel{flex:1 0 100%; margin:0 0 2px}
}

/* ======================================================================
   Colour theme, October 2026. Same look as the Production pages: a navy to
   magenta banner on every page, coloured tiles, cards and menu groups.
   Chart colours use the validated set: magenta, blue, orange, green,
   violet, amber, dark green.
   ====================================================================== */
:root{--c1:#e6007e;--c2:#2a78d6;--c3:#eb6834;--c4:#1baf7a;--c5:#6250d6;--c6:#eda100;--c7:#008300}
body{background:radial-gradient(1200px 500px at 100% -10%,rgba(230,0,126,.05),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(42,120,214,.06),transparent 60%),var(--bg);background-attachment:fixed}
.topbar{box-shadow:0 2px 0 0 transparent;border-bottom:0;background:linear-gradient(90deg,#001f60,#0b2f86 70%,#3a1a78)}
.topbar:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,var(--c1),var(--c5),var(--c2),var(--c4),var(--c6))}

/* menu: each group has its own colour */
.navgroup{display:flex;align-items:center;gap:7px;color:var(--gc,var(--ink-3))}
.navgroup:before{content:"";width:8px;height:8px;border-radius:3px;background:var(--gc,var(--ink-3))}
.navlink svg{color:var(--gc,currentColor);opacity:1}
.navlink:hover{background:color-mix(in srgb,var(--gc,#001f60) 8%,#fff)}
.navlink.active{background:linear-gradient(90deg,color-mix(in srgb,var(--gc,#e6007e) 16%,#fff),#fff);color:color-mix(in srgb,var(--gc,#e6007e) 80%,#000);box-shadow:inset 3px 0 0 var(--gc,var(--pink))}

/* page banner */
.pagehead{position:relative;overflow:hidden;align-items:flex-end;padding:22px 24px;margin-bottom:18px;border-radius:18px;color:#fff;
  background:radial-gradient(circle at 92% 10%,rgba(230,0,126,.55),transparent 42%),radial-gradient(circle at 70% 120%,rgba(42,120,214,.55),transparent 45%),linear-gradient(120deg,#001f60,#0b2f86 60%,#3a1a78);
  box-shadow:0 10px 30px rgba(0,31,96,.18)}
.pagehead h1{color:#fff;font-size:26px;letter-spacing:-.02em}
.pagehead .sub{color:rgba(255,255,255,.82);font-size:13.5px;max-width:720px}
.pagehead .eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#ffb3d9;font-weight:700;margin-bottom:2px}
.pagehead-actions .btn.ghost{background:#fff;color:#001f60;border-color:#fff}
.pagehead-actions .btn.ghost:hover{background:#ffe7f3;color:#001f60}
.pagehead-actions .btn:not(.ghost){background:#e6007e;border-color:#e6007e;color:#fff}
.pagehead a:not(.btn){color:#fff;text-decoration:underline}

/* figure tiles */
.kpis .kpi{position:relative;overflow:hidden;border-radius:16px;padding-left:20px}
.kpis .kpi:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--kc,var(--c1))}
.kpis .kpi:after{content:"";position:absolute;right:-28px;top:-28px;width:96px;height:96px;border-radius:50%;background:var(--kc,var(--c1));opacity:.09}
.kpis .kpi:nth-child(7n+1){--kc:var(--c1)} .kpis .kpi:nth-child(7n+2){--kc:var(--c2)} .kpis .kpi:nth-child(7n+3){--kc:var(--c3)}
.kpis .kpi:nth-child(7n+4){--kc:var(--c4)} .kpis .kpi:nth-child(7n+5){--kc:var(--c5)} .kpis .kpi:nth-child(7n+6){--kc:var(--c6)} .kpis .kpi:nth-child(7n+7){--kc:var(--c7)}
.kpis .kpi .kpi-label{color:color-mix(in srgb,var(--kc,#001f60) 70%,#4a5060)}

/* cards: coloured top edge and heading marker, cycling through the set */
.card{border-radius:16px;border-top:3px solid var(--cc,var(--c2))}
.card:nth-of-type(7n+1){--cc:var(--c2)} .card:nth-of-type(7n+2){--cc:var(--c1)} .card:nth-of-type(7n+3){--cc:var(--c4)}
.card:nth-of-type(7n+4){--cc:var(--c3)} .card:nth-of-type(7n+5){--cc:var(--c5)} .card:nth-of-type(7n+6){--cc:var(--c6)} .card:nth-of-type(7n+7){--cc:var(--c7)}
.card-head h2{display:flex;align-items:center;gap:8px}
.card-head h2:before{content:"";flex:0 0 9px;width:9px;height:9px;border-radius:3px;background:var(--cc,var(--c2))}

/* tables */
th{background:#f3f5fb;color:#001f60}
thead tr th:first-child{border-top-left-radius:10px} thead tr th:last-child{border-top-right-radius:10px}
tbody tr:nth-child(even) td{background:#fbfcfe}
tbody tr:hover td{background:#fff3f9}

/* filter bar and tabs */
.filters{border-radius:14px;border-left:4px solid var(--c1)}
.tabs a.on{background:linear-gradient(90deg,#e6007e,#b8006a);color:#fff;border-radius:10px 10px 0 0;border-bottom-color:#b8006a}
.tabs a.on:hover{color:#fff}

/* buttons */
.btn:not(.ghost):not(.danger){background:linear-gradient(135deg,#e6007e,#c00069);border-color:#d0006f}
.btn:not(.ghost):not(.danger):hover{background:linear-gradient(135deg,#f0168c,#c00069)}

@media (max-width:820px){.pagehead{padding:18px}.pagehead h1{font-size:21px}}
@media print{
  .pagehead{background:none!important;color:#001f60;box-shadow:none;padding:0}
  .pagehead h1,.pagehead .sub,.pagehead .eyebrow{color:#001f60}
  body{background:#fff}
}
/* A wide table must scroll inside its card, never push the page sideways */
@media (max-width:820px){.card{overflow:hidden}.main{min-width:0;max-width:100vw}}

/* Section buttons inside the page header box */
.navsec{font-weight:620;padding-top:10px;padding-bottom:10px}
.sectabs{flex:1 1 100%;order:-1;position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;padding:8px;margin:-6px -6px 16px;background:linear-gradient(120deg,#e6007e,#ff2d95);border:1px solid rgba(255,255,255,.35);border-radius:14px;box-shadow:0 6px 18px rgba(230,0,126,.35)}
.pagehead a.sectab,.phero a.sectab,.sectab{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;border:1px solid #fff;
  background:linear-gradient(#ffffff,#e9edf6);color:#001f60;font-size:14px;font-weight:650;text-decoration:none;cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.28),0 6px 14px rgba(0,0,0,.18);transition:transform .12s,box-shadow .12s}
.sectab svg{width:17px;height:17px;color:var(--gc)}
.pagehead a.sectab:hover,.phero a.sectab:hover,.sectab:hover{transform:translateY(-1px);box-shadow:0 3px 0 rgba(0,0,0,.28),0 8px 18px rgba(0,0,0,.22);text-decoration:none;color:#001f60}
.pagehead a.sectab.on,.phero a.sectab.on,.sectab.on{background:#001f60;color:#fff;border:2px solid #fff;box-shadow:inset 0 2px 6px rgba(0,0,0,.45);transform:none;cursor:default}
.sectab.on svg{color:#fff}
.sectab .navbadge{margin-left:2px}
.sectabs-solo .sectabs{margin:0 0 16px}
@media (max-width:820px){.pagehead a.sectab,.phero a.sectab,.sectab{padding:8px 12px;font-size:13px}}
@media print{.sectabs{display:none}}