/* =============================================================
   COLOURS — change these six lines to re-skin the whole app.
   ============================================================= */
:root{
  --ink:        #14141C;   /* text + counter slabs (toner black)  */
  --paper:      #F4F5FA;   /* page background                     */
  --violet:     #4B2EDB;   /* primary buttons, links, headers     */
  --violet-dk:  #2C169A;   /* gradient end / hover                */
  --cyan:       #00B4D8;   /* colour prints                       */
  --magenta:    #E5007E;   /* alerts + accents                    */
  --yellow:     #FFC400;   /* highlights                          */

  --card:       #FFFFFF;
  --line:       #E2E3EF;
  --muted:      #6B6C85;
  --ok:         #0E9F6E;
  --warn:       #C2410C;

  --r:          14px;      /* corner radius */
  --shadow:     0 1px 2px rgba(20,20,28,.06), 0 8px 24px rgba(20,20,28,.06);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.5;
}
h1,h2,h3{font-family:'Space Grotesk',Inter,sans-serif;letter-spacing:-.02em;margin:0}
h1{font-size:1.5rem;font-weight:700}
h2{font-size:1.15rem;font-weight:600}
h3{font-size:.95rem;font-weight:600}
a{color:var(--violet);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:6px}

/* ---------- layout ---------- */
.wrap{max-width:1060px;margin:0 auto;padding:0 16px 64px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.section{margin-top:28px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}

/* ---------- top bar ---------- */
.topbar{
  background:linear-gradient(115deg,var(--violet-dk),var(--violet) 55%,#6B46F2);
  color:#fff;padding:14px 0 22px;position:relative;overflow:hidden;margin-bottom:24px;
}
.topbar::after{ /* CMYK registration strip — the press-room signature */
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--cyan) 0 25%,var(--magenta) 25% 50%,var(--yellow) 50% 75%,rgba(255,255,255,.55) 75% 100%);
}
.topbar .wrap{padding-bottom:0}
.brand{display:flex;align-items:center;gap:12px;justify-content:space-between}
.brand-left{display:flex;align-items:center;gap:12px;min-width:0}
.mark{
  width:40px;height:40px;border-radius:11px;flex:0 0 auto;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;
}
.mark img{width:100%;height:100%;object-fit:contain;border-radius:10px}
.brand-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem;line-height:1.15}
.brand-sub{font-size:.78rem;opacity:.8}
.who{font-size:.8rem;opacity:.85;text-align:right;white-space:nowrap}
.who a{color:#fff;text-decoration:underline;opacity:.9}

nav.tabs{display:flex;gap:6px;margin-top:16px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{
  color:#fff;opacity:.82;padding:8px 14px;border-radius:999px;white-space:nowrap;
  font-size:.9rem;font-weight:500;text-decoration:none;border:1px solid transparent;
}
nav.tabs a:hover{opacity:1;background:rgba(255,255,255,.12);text-decoration:none}
nav.tabs a.on{opacity:1;background:#fff;color:var(--violet-dk);font-weight:600}

.page-head{margin-top:20px}
.page-head h1{color:#fff;font-size:1.6rem}
.page-head p{color:rgba(255,255,255,.85);margin:5px 0 0;font-size:.88rem}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.card-tight{padding:14px}
.machine-card .mc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.tag{
  display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}

/* counter slab — reads like the machine's own display */
.counter{display:flex;gap:3px;margin:12px 0 14px;flex-wrap:wrap}
.counter span{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:1.05rem;font-weight:600;
  background:var(--ink);color:#F6F6FF;padding:6px 7px;border-radius:5px;min-width:24px;text-align:center;
}
.counter span.sep{background:transparent;color:var(--muted);padding:6px 1px;min-width:0}
.counter-label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

.stat-row{display:flex;gap:10px}
.stat{flex:1;background:var(--paper);border-radius:10px;padding:10px 12px;border:1px solid var(--line)}
.stat b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.25rem;line-height:1.2}
.stat small{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;display:block;line-height:1.25}
.stat.c b{color:var(--cyan)}
.stat.k b{color:var(--ink)}
.stat.t b{color:var(--violet)}

.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.kpi b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.7rem;line-height:1.15}
.kpi small{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--violet);color:#fff;border:0;border-radius:11px;
  padding:12px 18px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;
  transition:transform .06s ease,background .15s ease;
}
.btn:hover{background:var(--violet-dk);text-decoration:none;color:#fff}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:16px 22px;font-size:1rem;width:100%}
.btn-ghost{background:#fff;color:var(--violet);border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--paper);color:var(--violet-dk)}
.btn-dark{background:var(--ink)}
.btn-dark:hover{background:#000}
.btn-sm{padding:7px 12px;font-size:.83rem;border-radius:9px}
.btn-danger{background:#fff;color:var(--magenta);border:1.5px solid var(--line)}
.btn-danger:hover{background:var(--magenta);color:#fff}

.quick{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.quick a{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;
  display:block;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);
  border-left:5px solid var(--violet);
}
.quick a:hover{text-decoration:none;transform:translateY(-2px);transition:transform .12s ease}
.quick a.c2{border-left-color:var(--cyan)}
.quick a.c3{border-left-color:var(--magenta)}
.quick a strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.02rem}
.quick a span{color:var(--muted);font-size:.83rem}

/* ---------- forms ---------- */
label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:5px}
input[type=text],input[type=number],input[type=date],input[type=password],select{
  width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:11px;
  font:inherit;background:#fff;color:var(--ink);
}
input:focus,select:focus{border-color:var(--violet);outline:none;box-shadow:0 0 0 3px rgba(75,46,219,.14)}
input[readonly]{background:var(--paper);color:var(--muted)}
.field{margin-bottom:14px}
.form-grid{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.hint{font-size:.78rem;color:var(--muted);margin-top:5px}
.calc{
  background:var(--ink);color:#fff;border-radius:11px;padding:14px 16px;margin:4px 0 16px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
.calc b{font-family:'JetBrains Mono',monospace;font-size:1.3rem}
.calc .warnline{color:var(--yellow);font-size:.8rem}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  background:var(--paper);position:sticky;top:0;
}
td.n,th.n{text-align:right;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
tbody tr:hover{background:#FAFAFF}
tfoot td{font-weight:700;background:var(--paper);border-top:2px solid var(--ink);border-bottom:0}
.empty{padding:36px 18px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-family:'Space Grotesk',sans-serif;margin-bottom:4px}

.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.75rem;font-weight:600;background:var(--paper);border:1px solid var(--line)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:-1px;border:1px solid rgba(0,0,0,.15)}

/* ---------- notices ---------- */
.notice{padding:12px 15px;border-radius:11px;margin-bottom:16px;font-size:.9rem;border:1px solid}
.notice.ok{background:#E9F9F1;border-color:#B7E8CE;color:#0A6B4A}
.notice.err{background:#FDEBF3;border-color:#F7C0DA;color:#9B0052}
.notice.warn{background:#FFF6E5;border-color:#FBE0A6;color:var(--warn)}

/* ---------- login ---------- */
.login-page{min-height:100dvh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(150deg,var(--violet-dk),var(--violet) 50%,#7C4DFF)}
.login-box{background:#fff;border-radius:20px;padding:30px;max-width:380px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.28)}
.login-box .mark{background:var(--violet);border:0;color:#fff;width:48px;height:48px;margin-bottom:14px}
.login-strip{height:5px;border-radius:99px;margin:18px 0 0;
  background:linear-gradient(90deg,var(--cyan) 0 25%,var(--magenta) 25% 50%,var(--yellow) 50% 75%,var(--ink) 75% 100%)}

/* ---------- bar chart (no library — plain CSS) ---------- */
.chart{--chart-h:230px}
.chart-scroll{overflow-x:auto;padding-bottom:4px}
.chart-plot{
  display:flex;align-items:flex-end;gap:10px;height:var(--chart-h);
  border-bottom:1.5px solid var(--line);padding:0 2px;min-width:100%;
}
.chart-day{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 0 26px;height:100%;justify-content:flex-end}
.chart-bars{display:flex;align-items:flex-end;gap:3px;height:100%;width:100%;justify-content:center}
.chart-bar{width:12px;border-radius:4px 4px 0 0;min-height:2px;background:var(--violet);position:relative}
.chart-bar[data-i="1"]{background:var(--cyan)}
.chart-bar[data-i="2"]{background:var(--magenta)}
.chart-bar[data-i="3"]{background:var(--yellow)}
.chart-bar[data-i="4"]{background:var(--ink)}
.chart-x{font-size:.68rem;color:var(--muted);white-space:nowrap;transform:rotate(-40deg);transform-origin:top center;height:26px}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px;font-size:.82rem;color:var(--muted)}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.chart-peak{font-size:.78rem;color:var(--muted);margin-top:2px}

/* ---------- print ---------- */
@media print{
  .topbar,nav.tabs,.no-print,.btn,form.filters{display:none !important}
  body{background:#fff;font-size:11pt}
  .wrap{max-width:100%;padding:0}
  .card{box-shadow:none;border:0;padding:0}
  .page-head{margin:0 0 12px}
  .page-head h1,.page-head p{color:#000}
  th{background:#eee !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  table{font-size:9.5pt}
  th,td{padding:5px 6px}
  .print-head{display:block !important;margin-bottom:14px;border-bottom:2px solid #000;padding-bottom:8px}
}
.print-head{display:none}