/* teta-reporty — the whole portal's stylesheet. Tokens live in tokens.css.
   Dense on purpose: this page replaces a spreadsheet, so a buyer must see the
   week in one screen. Everything scales down to a phone without a second layout. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.45 var(--font);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  accent-color:var(--accent)}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:2px}
button{font:inherit;color:inherit}
img{max-width:100%;height:auto}

/* --- browser surfaces ------------------------------------------------------
   The parts we did not draw still belong to the design: the selection, the
   focus ring and the scrollbar of a table that is wider than its card. */
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:3px}
.table-scroll,.viewtabs{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.table-scroll::-webkit-scrollbar,.viewtabs::-webkit-scrollbar{height:9px}
.table-scroll::-webkit-scrollbar-thumb,.viewtabs::-webkit-scrollbar-thumb{
  background:var(--line-strong);border-radius:5px}
.table-scroll::-webkit-scrollbar-track,.viewtabs::-webkit-scrollbar-track{background:transparent}

/* screen-reader-only: headings the layout does not show but the document needs */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* A caret drawn from two borders, never a ▾ glyph standing in for an icon. The
   rotation IS the open/closed state, so it is the one place motion is allowed. */
.caret{display:inline-block;flex:none;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transition:transform var(--tap),color var(--tap)}

/* --- shell ---------------------------------------------------------------- */
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  row-gap:8px;padding:8px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.hdr-left{display:flex;flex-wrap:wrap;align-items:center;gap:20px;row-gap:6px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{display:block;width:68px;height:48px}
.brand-sub{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.hdrlink{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;
  white-space:nowrap;transition:color var(--tap)}
.hdrlink:hover{color:var(--accent-ink)}
.account{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.account form{margin:0}
.linkbtn{background:none;border:0;padding:4px 0;color:var(--accent-ink);font-weight:600;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;transition:color var(--tap)}
.linkbtn:hover{color:var(--ink)}

main{display:block}
.container{max-width:1600px;margin:0 auto;padding:16px}
.foot{max-width:1600px;margin:0 auto;padding:28px 16px 32px;color:var(--muted);font-size:12px}

/* --- page + section headings ------------------------------------------------ */
.page-title{font-size:22px;font-weight:700;letter-spacing:-.01em;margin-bottom:14px}
.view-title{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:4px 0 12px}
.section-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;
  margin:22px 0 10px}
.section-title:first-child{margin-top:0}

/* --- week bar + mode toggle ----------------------------------------------- */
.weekbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.weekbar-right{display:flex;flex-wrap:wrap;align-items:center;gap:12px;row-gap:8px}
.weeknav{display:flex;align-items:center;gap:8px}
.wknav{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
  border:1px solid var(--line);border-radius:var(--radius-sm);font-size:13px;
  font-weight:600;text-decoration:none;white-space:nowrap;background:var(--card);
  transition:border-color var(--tap),color var(--tap)}
.wknav:hover{border-color:var(--accent);color:var(--accent-ink)}
.wknav .caret{width:7px;height:7px}
.wknav-prev .caret{transform:rotate(135deg)}
.wknav-next .caret{transform:rotate(-45deg)}
.wknav.is-off{color:var(--off);border-color:var(--line);background:var(--bg);cursor:default}
.wknav.is-off:hover{border-color:var(--line);color:var(--off)}
.wkpick select{padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--card);color:var(--ink);font:600 13px var(--font);max-width:16rem}
.modes{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.modes-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* a segmented control: two states of one switch, so they share one frame */
.modeset{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;background:var(--card)}
.mode{padding:6px 14px;font-size:13px;font-weight:600;text-decoration:none;color:var(--muted);
  white-space:nowrap;transition:background var(--tap),color var(--tap)}
.mode+.mode{border-left:1px solid var(--line)}
.mode:hover{background:var(--bg);color:var(--ink)}
.mode.is-active{background:var(--ink);color:#fff}
.export{padding:6px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--card);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:border-color var(--tap),color var(--tap)}
.export:hover{border-color:var(--accent);color:var(--accent-ink)}

/* --- view tabs ------------------------------------------------------------- */
.viewtabs{display:flex;gap:4px;padding:0 16px;background:var(--card);
  border-bottom:1px solid var(--line);overflow-x:auto}
.viewtab{display:flex;align-items:center;gap:6px;padding:11px 16px;font-size:13px;
  font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;
  border-bottom:3px solid transparent;margin-bottom:-1px;
  transition:color var(--tap),border-color var(--tap)}
.viewtab:hover{color:var(--ink);border-bottom-color:var(--line-strong)}
.viewtab.is-active{color:var(--accent-ink);border-bottom-color:var(--accent)}
.viewtab.is-active:hover{border-bottom-color:var(--accent)}
.tabbadge{padding:1px 7px;border-radius:9px;background:var(--bg);font-size:11px;
  font-weight:700;color:var(--muted)}
.viewtab.is-active .tabbadge{background:var(--accent);color:#fff}

/* --- network KPI strip ------------------------------------------------------ */
.kpi-header{display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--card);border-bottom:1px solid var(--line)}
.kh-item{padding:12px 16px;border-left:1px solid var(--line);min-width:0}
.kh-item:first-child{border-left:0}
.kh-item--pos{background:var(--pos-bg)}
.kh-item--neg{background:var(--neg-bg)}
.kh-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kh-val{margin-top:3px;font-size:20px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.kh-sub{margin-top:2px;font-size:12px;font-weight:600;white-space:nowrap}
.kh-sub.muted{color:var(--muted);font-weight:400}

.pos{color:var(--pos)}
.neg{color:var(--neg)}
.muted{color:var(--muted)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- buyer card ------------------------------------------------------------ */
.card{margin-bottom:10px;background:var(--card);border:1px solid var(--line);
  border-left:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.card--pos{border-left-color:var(--pos)}
.card--neg{border-left-color:var(--neg)}
.card-head{margin:0;font-size:inherit;font-weight:inherit}
.card-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:12px;width:100%;
  padding:10px 14px;background:none;border:0;text-align:left;cursor:pointer;
  transition:background var(--tap)}
.card-toggle:hover{background:var(--bg)}
.card-title{min-width:170px}
.badge{display:inline-block;padding:2px 8px;border-radius:5px;background:var(--ink);
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em}
.card-full{display:block;margin-top:3px;font-size:11px;color:var(--muted)}
.kpis{display:flex;flex:1;flex-wrap:wrap;gap:4px;align-items:center;justify-content:flex-end}
.kpi-box{display:block;min-width:104px;padding:3px 8px;text-align:right}
/* the Δ boxes are the two figures a buyer is measured on: framed, not filled */
.kpi-box--delta{border:1px solid var(--line);border-radius:var(--radius-sm)}
.kpi-label{display:block;font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.kpi-val{display:block;font-size:13px;font-weight:600;white-space:nowrap}
.kpi-pct{display:block;margin-top:3px}
.pill{display:inline-block;padding:1px 7px;border-radius:5px;background:var(--bg);
  font-size:11px;font-weight:700;color:var(--muted)}
.pill--pos{background:var(--pos-bg);color:var(--pos)}
.pill--neg{background:var(--neg-bg);color:var(--neg)}
.chev{width:9px;height:9px;margin:0 2px 3px 0;color:var(--muted);transform:rotate(45deg)}
.card-toggle[aria-expanded="true"] .chev{color:var(--accent-ink);transform:rotate(225deg)}
.card-body{padding:0 14px 14px;border-top:1px solid var(--line)}

/* --- tabs inside a card ----------------------------------------------------- */
.tabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 0}
.tab{padding:6px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--card);font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;
  transition:background var(--tap),color var(--tap),border-color var(--tap)}
.tab:hover{border-color:var(--line-strong);color:var(--ink)}
.tab.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.tab.is-active:hover{color:#fff}

/* --- TOP movers -------------------------------------------------------------- */
.movers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.mv{padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bg);
  min-width:0}
.mv-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.mv-head--up{color:var(--pos)}
.mv-head--down{color:var(--neg)}
.mv-list li{display:flex;align-items:baseline;gap:10px;padding:5px 0;
  border-bottom:1px solid var(--line);font-size:13px}
.mv-list li:last-child{border-bottom:0}
.mv-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-list .num{font-weight:600}
.mv-list .num:last-child{min-width:5.5rem}
.mv-empty{color:var(--muted);font-style:italic}

/* --- drill table -------------------------------------------------------------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:8px;
  background:var(--card)}
table.grid{width:100%;border-collapse:collapse;background:var(--card);font-size:13px}
table.grid th,table.grid td{padding:7px 10px;border-bottom:1px solid var(--line)}
table.grid thead th{position:sticky;top:0;background:var(--ink);color:#fff;font-size:11px;
  font-weight:600;letter-spacing:.03em;white-space:nowrap;text-align:left}
table.grid thead th.num{text-align:right}
/* a <th scope="row"> is centred by browser default — every row label needs this */
table.grid tbody th{text-align:left}
table.grid tbody tr:last-child th,table.grid tbody tr:last-child td{border-bottom:0}
/* Every row carries a tint, so the tint must whisper: the Δ figures are the signal.
   Matches the client's own report (.tr-pos #f5fff9 / .tr-neg #fff5f5). */
.row--pos{background:var(--pos-row)}
.row--neg{background:var(--neg-row)}
.name{font-weight:600;text-align:left;min-width:14rem;overflow-wrap:anywhere}
.name-plain{font-weight:600}
.drill{display:inline-flex;align-items:center;gap:7px;padding:0;background:none;border:0;
  font-weight:600;text-align:left;cursor:pointer;color:var(--ink);transition:color var(--tap)}
.drill:hover{color:var(--accent-ink)}
.drill-ico{width:6px;height:6px;color:var(--muted);transform:rotate(-45deg)}
.drill:hover .drill-ico{color:var(--accent-ink)}
.drill[aria-expanded="true"] .drill-ico{color:var(--accent-ink);transform:rotate(45deg)}
.sub{background:var(--bg);font-size:12px}
.sub .num{color:var(--muted)}
.name--sub{padding-left:30px!important;font-weight:400;color:var(--muted)}
.empty{padding:16px;color:var(--muted);font-style:italic;text-align:center}

/* --- observations --------------------------------------------------------------- */
.notes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* A panel on the page surface is white; the same panel inside a white card takes the
   page tint instead — either way it separates from what it sits on. */
.note{padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.card-body .note{background:var(--bg)}
.note+.note{margin-top:12px}
.notes .note+.note{margin-top:0}
.note h3{margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent-ink)}
.note .section-title{margin:0 0 8px}
.note-list li{padding:6px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.55}
.note-list li:last-child{border-bottom:0}
ol.note-list{counter-reset:step}
ol.note-list li{counter-increment:step;padding-left:26px;position:relative}
ol.note-list li::before{content:counter(step) ".";position:absolute;left:0;
  color:var(--accent-ink);font-weight:700}

/* --- network view (regály/výrobci) ------------------------------------------------ */
.card-pad{padding:14px}

/* --- week grade chip (Shrnutí pro ředitele) ---------------------------------------- */
.chip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;
  font-weight:700;vertical-align:middle}
.chip--dobry{background:var(--pos-bg);color:var(--pos)}
.chip--prumerny{background:var(--card);color:var(--muted);border:1px solid var(--line-strong)}
.chip--slaby{background:var(--neg-bg);color:var(--neg)}

/* --- empty state + buttons --------------------------------------------------------- */
.blank{max-width:44rem;padding:32px 0 8px}
.blank h1{font-size:24px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.blank p{margin-bottom:14px;color:var(--muted)}
.btn{display:inline-block;padding:10px 20px;border:1px solid var(--accent);
  border-radius:var(--radius-sm);background:var(--accent);color:#fff;font-weight:600;
  text-decoration:none;cursor:pointer;transition:background var(--tap),border-color var(--tap)}
.btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}

/* --- upload page: dropzone + progress ---------------------------------------------- */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 16px;
  border:2px dashed var(--line-strong);border-radius:var(--radius);background:var(--card);
  text-align:center;cursor:pointer;transition:border-color var(--tap),background var(--tap)}
.dropzone:hover,.dropzone.is-dragover{border-color:var(--accent);background:var(--accent-soft)}
.dropzone:focus-within{border-color:var(--accent);background:var(--accent-soft)}
.dropzone-text{color:var(--muted);font-size:13px;font-weight:600}
/* The native control is kept (it is the form field and the focus target) but hidden:
   its button says "Choose File" in the browser's language, not in ours. */
.dropzone-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dropzone-btn{padding:8px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--bg);font-size:13px;font-weight:600;
  transition:border-color var(--tap),color var(--tap)}
.dropzone:hover .dropzone-btn,.dropzone:focus-within .dropzone-btn{border-color:var(--accent);
  color:var(--accent-ink);background:var(--card)}
.dropzone-name{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.err{margin-top:10px;color:var(--neg);font-weight:600}
.progress{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;
  background:var(--card)}
.progress-msg{margin:0;font-weight:600}
.progress-msg.neg{color:var(--neg)}

/* --- sign-in + access-denied (no top bar: nobody is signed in yet) ------------------- */
/* 100vh minus the footer: the Solvent logo belongs in the first screen, not below it. */
.auth{min-height:calc(100vh - 152px);display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:40px 16px;text-align:center}
.auth-card{width:100%;max-width:26rem;padding:36px 28px 32px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius)}
.auth-logo{display:block;margin:0 auto 22px;width:91px;height:64px}
.auth-card h1{font-size:22px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.auth-card p{color:var(--muted);margin-bottom:20px;font-size:14px}
.auth-card p:last-child{margin-bottom:0}
.auth-card .btn{width:100%}
.auth-back{font-weight:600;color:var(--accent-ink);text-decoration:underline}
.auth-back:hover{color:var(--ink)}
.auth-foot{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:0 16px 40px;color:var(--muted);font-size:12px}
.auth-foot img{width:170px;height:57px;opacity:.9}

/* --- narrow screens ----------------------------------------------------------------- */
@media (max-width:1100px){
  .kpi-box{min-width:92px}
  .kpis{justify-content:flex-start}
}
/* Below 1024 the five network figures stop fitting on one line: they become two
   rows — the three absolute figures, then the two YoY deltas side by side. */
@media (max-width:1023px){
  .kpi-header{grid-template-columns:repeat(6,1fr)}
  .kh-item{border-left:0;border-top:1px solid var(--line)}
  .kh-item:nth-child(1){grid-area:1/1/2/3}
  .kh-item:nth-child(2){grid-area:1/3/2/5;border-left:1px solid var(--line)}
  .kh-item:nth-child(5){grid-area:1/5/2/7;border-left:1px solid var(--line)}
  .kh-item:nth-child(3){grid-area:2/1/3/4}
  .kh-item:nth-child(4){grid-area:2/4/3/7;border-left:1px solid var(--line)}
  .kh-item:nth-child(1),.kh-item:nth-child(2),.kh-item:nth-child(5){border-top:0}
}
@media (max-width:720px){
  .kh-item{padding:10px 12px}
  .kh-label{white-space:normal;overflow:visible}
  .kh-val{font-size:16px}
  .kh-sub{font-size:11px}
  .movers,.notes{grid-template-columns:1fr}
  .weekbar,.topbar{padding:8px 12px}
  .viewtabs{padding:0 12px}
  .viewtab{padding:11px 12px}
  .container{padding:12px}
  .card-title{min-width:100%}
  .kpis{gap:2px}
  .kpi-box{flex:1 0 30%;min-width:0}
  .chev{position:absolute;right:16px;top:16px}
  .card-head{position:relative}
  .brand-sub{display:none}
  .page-title{font-size:20px}
  .blank h1{font-size:21px}
  .blank{padding-top:24px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms!important;animation-duration:0ms!important}
}