/* Control centrum — dashboard (datová tabulka).
   Serif + krémová identita jen v hlavičce; zbytek hustá data, sticky
   hlavičky, řaditelné tabulky, mono tabulární číslice.
   Stylesheet je linkovaný POUZE z index.html (plan/stream mají styles.css). */

:root {
  --green: #1C3B2D;
  --green-soft: #2E5743;
  --cream: #F2EAD8;
  --bg: #F4F3EE;
  --paper: #FFFFFF;
  --line: #E2DFD4;
  --line-soft: #EDEBE2;
  --ink: #22301F;
  --muted: #837D6C;
  --faint: #A5A08F;
  --danger: #A4452F;
  --danger-bg: #F6E4DE;
  --ok: #3C6E47;
  --ok-bg: #E4EDE2;
  --amber: #9A7B2F;
  --amber-bg: #F5ECD4;
  --serif: ui-serif, "Iowan Old Style", "Palatino", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 13px;
       line-height: 1.4; overflow-x: clip; }
b { font-weight: 600; }

/* ---------- hlavička: jediné místo se serif/cream identitou ---------- */
.hdr { background: var(--green); color: var(--cream); }
.hdr-in { max-width: 1360px; margin: 0 auto; padding: .7rem 1.2rem;
          display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hdr .logo { height: 42px; flex: none; }
.hdr-id .kicker { font-family: var(--mono); font-size: .62rem; letter-spacing: .22em;
                  text-transform: uppercase; opacity: .65; }
.hdr-id h1 { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1.15;
             letter-spacing: .01em; }
.hdr-nav { margin-left: auto; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.hdr-nav a { font-family: var(--mono); font-size: .72rem; color: var(--cream); text-decoration: none;
             padding: .34rem .7rem; border-radius: 7px; border: 1px solid transparent; opacity: .8; }
.hdr-nav a:hover { opacity: 1; border-color: rgba(242,234,216,.35); }
.hdr-nav a.on { background: var(--cream); color: var(--green); opacity: 1; font-weight: 700; }
.hdr-meta { flex-basis: 100%; font-family: var(--mono); font-size: .66rem; opacity: .55;
            letter-spacing: .04em; padding-top: .15rem; }

/* ---------- persistentní toolbar (sticky) ---------- */
.toolbar { position: sticky; top: 0; z-index: 40; background: var(--bg);
           border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; }
.toolbar-in { max-width: 1360px; margin: 0 auto; padding: .45rem 1.2rem;
              display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.mpick { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px;
         background: var(--paper); overflow: hidden; }
.mpick button { border: 0; background: none; font: inherit; color: var(--green);
                padding: .3rem .55rem; cursor: pointer; }
.mpick button:hover { background: var(--line-soft); }
.mpick .mlabel { font-family: var(--mono); font-size: .76rem; font-weight: 700; color: var(--green);
                 padding: 0 .35rem; min-width: 8.2rem; text-align: center; text-transform: capitalize; }
.tb-sep { width: 1px; height: 1.35rem; background: var(--line); }
.tb-field { display: flex; align-items: center; gap: .35rem; }
.tb-field label { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em;
                  text-transform: uppercase; color: var(--muted); }
.tb-field select, .tb-field input[type="search"] {
  font-family: var(--sans); font-size: .78rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 7px; padding: .28rem .45rem; }
.tb-field select:focus, .tb-field input:focus { outline: 2px solid var(--green-soft); outline-offset: 0; }
.tb-field input[type="search"] { width: 11rem; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
.tb-meta { font-family: var(--mono); font-size: .66rem; color: var(--muted); white-space: nowrap; }
.tb-btn { font-family: var(--mono); font-size: .7rem; background: var(--paper); color: var(--green);
          border: 1px solid var(--line); border-radius: 7px; padding: .3rem .6rem;
          cursor: pointer; text-decoration: none; white-space: nowrap; }
.tb-btn:hover { background: var(--line-soft); }

/* ---------- layout ---------- */
main { max-width: 1360px; margin: 0 auto; padding: .9rem 1.2rem 2.2rem; }
.grid2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem;
         align-items: start; margin-top: 1rem; }
section.block { margin-top: 1rem; }
.sec-h { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .35rem; flex-wrap: wrap; }
.sec-title { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .16em;
             text-transform: uppercase; color: var(--green); }
.sec-count { font-family: var(--mono); font-size: .68rem; color: var(--faint); }
.sec-hint { font-family: var(--mono); font-size: .64rem; color: var(--muted); margin-left: auto; }

.err { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger);
       border-radius: 8px; padding: .6rem .9rem; margin-top: .9rem; font-family: var(--mono);
       font-size: .74rem; }

/* ---------- KPI lišta ---------- */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: .5rem; margin-top: .2rem; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
       padding: .5rem .65rem .45rem; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.kpi .l { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
          color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .n { font-family: var(--mono); font-size: 1.22rem; font-weight: 700; color: var(--green);
          letter-spacing: -.02em; white-space: nowrap; }
.kpi .n .u { font-size: .68rem; font-weight: 400; color: var(--muted); margin-left: .1rem; }
.kpi .n.bad { color: var(--danger); }
.kpi .sub { font-family: var(--mono); font-size: .6rem; color: var(--faint); white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; min-height: .9em; }
.kpi .sub .pend { color: var(--amber); font-weight: 700; }
.kpi .sub .neg { color: var(--danger); font-weight: 700; }

/* ---------- tabulky ---------- */
.tcard { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tscroll { overflow: auto; max-height: 66vh; }
.tscroll.short { max-height: 340px; }
table.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8rem; min-width: 100%; }
.dt thead th { position: sticky; top: 0; z-index: 5; background: #FBFAF6;
               font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .09em;
               text-transform: uppercase; color: var(--muted); text-align: left;
               padding: .42rem .55rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt thead th.num { text-align: right; }
.dt thead th[data-key] { cursor: pointer; user-select: none; }
.dt thead th[data-key]:hover { color: var(--green); background: var(--line-soft); }
.dt thead th[data-key]::after { content: "↕"; margin-left: .3rem; opacity: .35; }
.dt thead th[data-key].asc::after { content: "↑"; opacity: 1; color: var(--green); }
.dt thead th[data-key].desc::after { content: "↓"; opacity: 1; color: var(--green); }
.dt tbody td { padding: .38rem .55rem; border-bottom: 1px solid var(--line-soft);
               vertical-align: middle; white-space: nowrap; }
.dt tbody tr:last-child td { border-bottom: 0; }
.dt tbody tr.master:hover td { background: #F7F5EC; }
.dt td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dt td.num b { font-weight: 700; }
.dt td .dim { color: var(--faint); }
.dt td.c-muted { color: var(--muted); font-family: var(--mono); font-size: .72rem; }
.dt .bad { color: var(--danger); font-weight: 700; }
.dt .okc { color: var(--ok); font-weight: 700; }
.dt .pend { color: var(--amber); font-weight: 700; }
.dt .zero { color: var(--faint); font-weight: 400; }
.dt a { color: var(--green); }
.mini-pend { font-family: var(--mono); font-size: .62rem; }
.tnote { font-family: var(--mono); font-size: .68rem; color: var(--muted);
         padding: .4rem .55rem; border-top: 1px solid var(--line-soft); }

/* řádky zakázek — rozbalování */
tr.master { cursor: pointer; }
.exp { display: inline-flex; width: 1.15rem; height: 1.15rem; align-items: center; justify-content: center;
       border: 1px solid var(--line); border-radius: 5px; background: var(--paper);
       font-family: var(--mono); font-size: .68rem; color: var(--green); transition: transform .12s; }
tr.master.open .exp { transform: rotate(90deg); background: var(--green); color: var(--cream);
                      border-color: var(--green); }
tr.detail { display: none; }
tr.detail.show { display: table-row; }
tr.detail > td { background: #FAF9F3; padding: 0 !important; border-bottom: 1px solid var(--line); }
.dbox { border-left: 3px solid var(--green); padding: .55rem .8rem .7rem; }
.miles { font-family: var(--mono); font-size: .68rem; color: var(--muted); margin-bottom: .45rem; }
.miles b { color: var(--ink); }
.miles .sep { color: var(--faint); padding: 0 .3rem; }
table.sub { width: 100%; border-collapse: collapse; font-size: .74rem; }
.sub th { font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase;
          color: var(--faint); text-align: left; padding: .2rem .45rem;
          border-bottom: 1px solid var(--line-soft); }
.sub th.num { text-align: right; }
.sub td { padding: .26rem .45rem; border-bottom: 1px dashed var(--line-soft); white-space: nowrap; }
.sub tr:last-child td { border-bottom: 0; }
.sub td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* mini-bary v buňkách */
.cellbar { display: inline-flex; width: 54px; height: 6px; background: var(--line-soft);
           border-radius: 99px; overflow: hidden; vertical-align: middle; margin-right: .4rem; }
.cellbar i { display: block; height: 100%; background: var(--green-soft); }
.cellbar i.warn { background: var(--danger); }
.cellbar i.done { background: var(--ok); }
.cellbar i.mid { background: #C9A94E; }
.cellbar i.pendfill { background: repeating-linear-gradient(45deg, #C9A94E 0 3px, #EFE5C8 3px 6px); }
.segbar { display: flex; width: 120px; height: 7px; background: var(--line-soft);
          border-radius: 99px; overflow: hidden; }
.segbar i { display: block; height: 100%; }
.segbar i.done { background: var(--ok); }
.segbar i.mid { background: #C9A94E; }
.segbar i.run { background: var(--green-soft); }
.segbar i.pendfill { background: repeating-linear-gradient(45deg, #C9A94E 0 3px, #EFE5C8 3px 6px); }
.pctcell { display: inline-flex; align-items: center; }
.pct { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* stavové štítky */
.tag { display: inline-block; font-family: var(--mono); font-size: .58rem; font-weight: 700;
       letter-spacing: .07em; text-transform: uppercase; padding: .1rem .42rem;
       border-radius: 99px; border: 1px solid; white-space: nowrap; }
.tag.run { color: var(--green-soft); border-color: #BFD0BE; background: var(--ok-bg); }
.tag.soon { color: var(--amber); border-color: #D4BC7A; background: var(--amber-bg); }
.tag.late { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.tag.done { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.tag.wait { color: var(--muted); border-color: var(--line); background: var(--bg); }

/* skupinové řádky (Linky) */
tr.group td { background: #F3F1E7; font-family: var(--mono); font-size: .6rem; font-weight: 700;
              letter-spacing: .14em; text-transform: uppercase; color: var(--green);
              padding: .3rem .55rem; border-bottom: 1px solid var(--line); }

footer { max-width: 1360px; margin: 0 auto; padding: .4rem 1.2rem 1.6rem;
         font-family: var(--mono); font-size: .64rem; color: var(--faint); }
footer b { color: var(--muted); }

/* ---------- demo panel (plovoucí nástroj pro předvádění) ---------- */
.demo-panel { position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
              display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.demo-pill { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
             color: var(--muted); background: var(--paper); border: 1px dashed var(--muted);
             border-radius: 99px; padding: .32rem .85rem; cursor: pointer; }
.demo-pill:hover { color: var(--green); border-color: var(--green); }
.demo-body { background: var(--paper); border: 1px dashed var(--muted); border-radius: 10px;
             padding: .7rem .8rem; display: flex; flex-direction: column; gap: .5rem;
             max-width: 16rem; box-shadow: 0 4px 14px rgba(34, 48, 31, .12); }
.demo-panel.collapsed .demo-body { display: none; }
.demo-body .btn { font-family: var(--mono); font-size: .72rem; background: var(--paper);
                  color: var(--green); border: 1px solid var(--line); border-radius: 8px;
                  padding: .4rem .8rem; cursor: pointer; }
.demo-body .btn:hover { background: var(--line-soft); }
.demo-body .btn:disabled { opacity: .45; cursor: default; }
.demo-msg { font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.demo-msg:empty { display: none; }
.demo-msg.err-msg { color: var(--danger); }

/* ---------- responsivita ---------- */
@media (max-width: 1080px) {
  .kpis { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body { font-size: 12.5px; }
  .kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hide-sm { display: none; }
  .tb-field input[type="search"] { width: 8rem; }
  .hdr-id h1 { font-size: 1.2rem; }
  .sec-hint { display: none; }
}