
:root{
  --bg:#f5f7fb;
  --panel:#fff;
  --ink:#172033;
  --muted:#65708a;
  --line:#dfe5ef;
  --accent:#206a5d;
  --accent-dark:#155046;
  --danger:#a22a2a;
  --shadow:0 12px 35px rgba(23,32,51,.08);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}
button,input,select,textarea{font:inherit}
button{min-height:42px;border:0;border-radius:6px;background:var(--accent);color:#fff;cursor:pointer;font-weight:700;padding:0 16px;line-height:1.2;white-space:normal}
.secondary{border:1px solid var(--line);background:#fff;color:var(--ink)}
.danger{color:var(--danger)}
button:hover{background:var(--accent-dark)}
.secondary:hover{background:#eef3f7}
nav{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;min-height:72px;padding:12px clamp(16px,4vw,42px);background:#fff;border-bottom:1px solid var(--line)}
.nav-links,.nav-actions{display:flex;align-items:center;gap:14px}
.nav-actions{justify-content:flex-end;margin:0}
nav a{color:var(--ink);font-weight:700;text-decoration:none}
.nav-brand{display:grid;place-items:center;justify-self:center}
.nav-brand img{display:block;width:min(270px,34vw);height:auto;max-height:48px;object-fit:contain}
.dashboard{width:min(1280px,calc(100% - 28px));margin:24px auto 42px;display:grid;gap:18px}
.page-head,.panel,.controls,.login-panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:18px}
.page-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,48%);align-items:center;gap:22px;min-height:132px}
.store-logo{display:block;justify-self:end;width:min(100%,520px);max-height:112px;object-fit:contain}
.login-panel{width:min(92vw,420px);margin:12vh auto;padding:34px}
.login-logo{display:block;width:min(260px,100%);height:auto;margin:0 auto 18px;object-fit:contain}.logo-preview{display:grid;place-items:center;min-height:150px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:18px}.logo-preview img{display:block;max-width:100%;max-height:170px;object-fit:contain}
.brand-mark{width:52px;height:52px;display:grid;place-items:center;border-radius:8px;background:var(--accent);color:#fff;font-weight:800}
.eyebrow{color:var(--accent);font-size:.8rem;font-weight:800;text-transform:uppercase}
.page-head h1,.panel h1,.panel h2,.login-panel h1{margin:8px 0;letter-spacing:0}
.page-head p,.login-panel p{margin:0;color:var(--muted)}
.controls{display:grid;grid-template-columns:minmax(280px,1.2fr) minmax(170px,.75fr) minmax(170px,.75fr) minmax(156px,.55fr);grid-template-areas:"range start end generate" "reports reports reports reports";align-items:end;gap:14px}
.report-picker,.range-picker,label,.stack{display:grid;gap:8px}.range-picker{grid-area:range}.report-picker{grid-area:reports}.controls>label:nth-of-type(1){grid-area:start}.controls>label:nth-of-type(2){grid-area:end}#generateReport{grid-area:generate}
label,.report-picker>span,.range-picker>span{color:var(--muted);font-size:.9rem;font-weight:700}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);padding:10px 12px}
.report-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.range-buttons{display:grid;grid-template-columns:repeat(4,minmax(72px,1fr));gap:8px}
.report-option,.range-option{border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 10px;min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;overflow-wrap:break-word;word-break:normal}
.report-option{min-height:74px;font-size:1rem}
.report-option:hover,.report-option.is-active,.range-option:hover,.range-option.is-active{border-color:var(--accent);background:var(--accent);color:#fff}
#generateReport{min-height:44px;padding:8px 14px;text-align:center}
.summary-grid{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:12px}
.summary-card{min-height:92px;display:grid;gap:9px;align-content:center;background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px}
.summary-card span{color:var(--muted);font-size:.82rem;font-weight:800;text-transform:uppercase}
.summary-card strong{font-size:1.35rem}
.report-header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.actions{display:flex;gap:8px}
.table-wrap{width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:720px}
th,td{border-bottom:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
th{background:#eef3f7;color:#344056;font-size:.82rem;text-transform:uppercase}
.numeric{text-align:right;font-variant-numeric:tabular-nums}
.alert{border:1px solid #efcaca;border-radius:6px;background:#fff4f4;color:var(--danger);padding:12px 14px}
.success,.message{border:1px solid #b9dfca;border-radius:6px;background:#f1fbf5;color:#155046;padding:12px 14px}
.narrow{max-width:720px}
.user-form{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:end;margin-bottom:18px}
.check{display:block;color:var(--ink);font-weight:600}
pre{white-space:pre-wrap;background:#f6f8fb;border:1px solid var(--line);border-radius:8px;padding:14px}
@media(max-width:1180px){
  .controls{grid-template-columns:1fr 1fr;grid-template-areas:"range range" "start end" "generate generate" "reports reports"}.summary-grid{grid-template-columns:repeat(3,minmax(140px,1fr))}
}
@media(max-width:760px){
  nav{grid-template-columns:1fr;justify-items:center}.nav-links,.nav-actions{justify-content:center;flex-wrap:wrap}.nav-brand{grid-row:1}.nav-brand img{width:min(260px,80vw)}
  .page-head{grid-template-columns:1fr;text-align:left}.store-logo{justify-self:start;width:min(100%,420px);max-height:96px}
  .controls,.summary-grid,.report-buttons,.range-buttons,.user-form{grid-template-columns:1fr}.controls{grid-template-areas:"range" "start" "end" "generate" "reports"}.report-option{min-height:54px}
  .report-header{align-items:stretch;flex-direction:column}.actions button,nav button,.controls button{width:100%}
}
@media print{nav,.controls,.actions,.message{display:none!important}.dashboard{width:100%;margin:0}.panel,.summary-card{box-shadow:none}table{min-width:0;font-size:12px}.store-logo{max-height:70px}}
