/* Vzhled podle vizuální identity „Světlá Pálava“ (Stomma Mikulov, říjen 2026):
   tmavě modrá #0C2340, zlatá #BD9B60, bílá plocha a papírová #F7F5F0, nadpisy Unbounded Light,
   texty Montserrat, oblý pravý horní roh karet, linka místo stínu, tlačítka ve tvaru pole „ma“
   (rovná levá strana, oblá pravá). Vrstevnice Pálavy jen jako jemný podkres, nikdy pod textem. */

@font-face { font-family: "Unbounded"; font-weight: 300; font-display: swap;
             src: local("Unbounded Light"), local("Unbounded-Light"), url("fonts/Unbounded-Light.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 100 900; font-display: swap;
             src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype"); }

:root {
  /* barvy identity */
  --modra: #0C2340;
  --zlata: #BD9B60;
  --zlata-tmava: #86693A;
  --zlata-svetla: #E6D3A3;
  --papir: #F7F5F0;
  --bila: #FFFFFF;

  --bg: var(--papir);                  /* plocha stránky */
  --card: var(--bila);
  --card-solid: var(--bila);
  --cell: var(--bila);                 /* rámečky uvnitř karet (faktury v seznamu) */
  --line: #E4E6EA;
  --line-soft: #EDEEF1;
  --text: #3E4D63;
  --strong: var(--modra);
  --head: #56637A;
  --muted: #6B7689;
  --link: var(--modra);
  --green: #1E6B43;
  --green-line: #3C8F5A;
  --green-bg: rgba(60, 143, 90, 0.11);
  --amber: #9A4A00;                    /* upozornění – sytě oranžová, ať se neplete se zlatou identity */
  --amber-bg: #FFF3E6;
  --red: #B42318;
  --red-bg: #FDEDEB;
  --blue: #2F5D9E;
  --orange: #E8892B;
  --input-bg: var(--bila);
  --input-line: #B9C0CA;
  --hover: rgba(12, 35, 64, 0.045);
  --selected: rgba(189, 155, 96, 0.18);
  --radius: 22px;                      /* oblý pravý horní roh karty */
  --font-nadpis: "Unbounded", "Montserrat", "Segoe UI", sans-serif;
  --font-text: "Montserrat", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 12.5px;
  line-height: 1.5;
  min-height: 100vh;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--zlata); text-underline-offset: 3px; }
h1 { font-family: var(--font-nadpis); font-size: 15px; font-weight: 300; margin: 0; color: var(--modra); }
h2 { font-size: 11px; font-weight: 600; margin: 0; color: var(--zlata-tmava); text-transform: uppercase;
     letter-spacing: 0.12em; }

.g { width: 1.2em; height: 1.2em; font-size: 13px; display: inline-block; vertical-align: -0.24em; flex: none;
     fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); }
.small { font-size: 11px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.right { text-align: right; }
.grow { flex: 1; }
.row-flex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }

/* --- rám stránky: tmavě modrá lišta se znakem, vpravo jemné zlaté vrstevnice Pálavy (doleva mizí) --- */
.top { position: sticky; top: 0; z-index: 10; background: var(--modra); }
.top::before { content: ""; position: absolute; inset: 0; pointer-events: none;
               background: url("brand/vrstevnice-zlata.svg") right 30% / 820px auto no-repeat; opacity: 0.55;
               -webkit-mask-image: linear-gradient(to right, transparent 55%, #000 85%);
               mask-image: linear-gradient(to right, transparent 55%, #000 85%); }
.top-inner { position: relative; display: flex; align-items: center; gap: 8px; max-width: 1320px; margin: 0 auto;
             padding: 10px 14px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--bila); white-space: nowrap; margin-right: 14px; }
.brand:hover { text-decoration: none; }
.brand img { height: 22px; width: auto; display: block; }
.brand b { font-family: var(--font-nadpis); font-weight: 300; font-size: 17px; letter-spacing: 0.01em; color: var(--bila); }
.nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.nav a { color: #D5DBE4; padding: 6px 9px; border-radius: 0 999px 999px 0; display: flex; gap: 6px;
         align-items: center; font-weight: 500; }
.nav a:hover { background: rgba(255, 255, 255, 0.08); color: var(--bila); text-decoration: none; }
.nav a.on { background: rgba(189, 155, 96, 0.22); color: var(--zlata-svetla); box-shadow: inset 2px 0 0 var(--zlata); }
.badge { min-width: 18px; padding: 0 6px; height: 17px; border-radius: 9px; font-size: 10.5px; line-height: 17px;
         text-align: center; background: rgba(255, 255, 255, 0.14); color: #D5DBE4; font-weight: 600; }
.badge.hot { background: var(--zlata); color: var(--modra); }
.mode { font-size: 11px; color: var(--zlata-svetla); border: 1px solid rgba(230, 211, 163, 0.55);
        border-radius: 0 999px 999px 0; padding: 2px 9px 2px 7px; white-space: nowrap; }
.top .btn.flat { color: #D5DBE4; }
.top .btn.flat:hover { background: rgba(255, 255, 255, 0.10); color: var(--bila); }
main { max-width: 1320px; margin: 0 auto; padding: 18px 14px 60px; }

/* --- karta: bílá, linka místo stínu, oblý pravý horní roh --- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 0 var(--radius) 0 0; }
.card-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px 10px; border-bottom: 1px solid var(--line-soft);
             color: var(--head); }
.card-head .title { font-family: var(--font-nadpis); font-weight: 300; font-size: 14px; color: var(--modra); }
.card-head > .g:first-child { color: var(--zlata); }
.card-body { padding: 12px 14px 14px; }
.card-foot { padding: 8px 14px 10px; border-top: 1px solid var(--line-soft); }

/* --- tlačítka ve tvaru pole „ma“ a pole formulářů --- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 0; box-shadow: inset 0 0 0 1px var(--zlata);
       border-radius: 0 999px 999px 0; padding: 5px 13px 5px 10px; color: var(--modra); background: var(--bila);
       font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
       transition: background 0.15s, color 0.15s; }
.btn:hover { background: var(--modra); color: var(--bila); box-shadow: none; text-decoration: none; }
.btn.ok { background: var(--modra); color: var(--bila); box-shadow: none; }
.btn.ok:hover { background: var(--zlata); color: var(--modra); }
.btn.danger { box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.55); color: var(--red); }
.btn.danger:hover { background: var(--red); color: var(--bila); }
.btn.flat { box-shadow: none; background: transparent; padding: 4px 6px; border-radius: 6px; font-weight: 500; }
.btn.flat:hover { background: var(--hover); color: var(--modra); }
.btn.big { padding: 8px 18px 8px 14px; font-size: 12.5px; }
input, select, textarea {
  font: inherit; color: var(--modra); background: var(--input-bg); border: 1px solid var(--input-line);
  border-radius: 2px; padding: 5px 8px; width: 100%; min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--zlata); outline-offset: 0; border-color: var(--zlata); }
input[type=checkbox] { width: auto; accent-color: var(--modra); }
select option { background: var(--bila); color: var(--text); }
label.f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); font-weight: 500; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 10px; }
.fields .wide { grid-column: 1 / -1; }
.fields > label.f { justify-content: flex-end; }   /* pole v řádku na stejné výšce, i když má popisek víc řádků */
.changed { border-color: var(--orange) !important; }

/* --- upozornění --- */
.warn { display: flex; gap: 8px; align-items: flex-start; border-radius: 4px; background: var(--amber-bg);
        color: var(--amber); padding: 6px 9px; font-size: 11.5px; }
.warn .g { margin-top: 2px; }
.okbox { display: flex; gap: 8px; align-items: center; border-radius: 4px; background: var(--green-bg);
         color: var(--green); padding: 6px 9px; font-size: 11.5px; }
.errbox { display: flex; gap: 8px; align-items: center; border-radius: 4px; background: var(--red-bg);
          color: var(--red); padding: 6px 9px; font-size: 11.5px; }
.flash { margin-bottom: 12px; }

/* --- řádky seznamu --- */
.list { display: flex; flex-direction: column; gap: 2px; }
.item { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 4px; color: inherit; }
.item:hover { background: var(--hover); text-decoration: none; }
.item .ico { color: var(--zlata); width: 16px; text-align: center; }
.item .main { flex: 1; min-width: 0; }
.item .name { color: var(--strong); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .sub { color: var(--muted); font-size: 11px; }
.item .why { color: var(--amber); font-size: 11px; margin-top: 1px; }
.item .amount { font-size: 13px; color: var(--strong); text-align: right; }
.chip { display: inline-block; font-size: 11px; padding: 0 7px; border-radius: 0 999px 999px 0; background: var(--papir);
        box-shadow: inset 0 0 0 1px var(--line); color: var(--head); margin-right: 3px; white-space: nowrap; }
.chip.blue { background: #EEF2F8; box-shadow: none; color: var(--blue); }
.empty { padding: 28px 10px; text-align: center; color: var(--muted); }

/* --- detail --- */
.detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.viewer { position: sticky; top: 66px; height: calc(100vh - 82px); overflow: hidden; }
.viewer iframe, .viewer .imgwrap { width: 100%; height: calc(100% - 42px); border: 0; display: block; background: #EEF1F4; }
.viewer .imgwrap { overflow: auto; }
.viewer .pdfpages { display: none; height: calc(100% - 42px); overflow: auto; background: #EEF1F4; padding: 8px; }
.viewer .pdfpages.on { display: grid; gap: 8px; align-content: start; }
.viewer .pdfpages img { width: 100%; display: block; background: #fff; box-shadow: 0 1px 3px rgba(12,35,64,.18); }
.viewer img { width: 100%; display: block; }
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; font-weight: 600; color: var(--muted); font-size: 10.5px; padding: 5px 6px;
             border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: 0.05em; }
table.t th.right { text-align: right; }
table.t td { padding: 6px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr.flag td { background: var(--amber-bg); }
table.t tr.flag td:first-child { box-shadow: inset 2px 0 0 var(--orange); }
table.t input { padding: 2px 6px; }
.alloc-row { display: grid; grid-template-columns: 1fr 130px 28px; gap: 6px; margin-bottom: 6px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.meta { display: grid; grid-template-columns: 110px 1fr; gap: 3px 10px; font-size: 12px; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; overflow-wrap: anywhere; }
details summary { cursor: pointer; color: var(--muted); }

/* --- statistika --- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi .label { color: var(--zlata-tmava); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
.kpi .value { font-family: var(--font-nadpis); font-size: clamp(15px, 1.55vw, 22px); font-weight: 300; color: var(--modra);
              margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .card-body { min-width: 0; }
.kpi .note { color: var(--muted); font-size: 11px; }
.bar { height: 6px; border-radius: 0 3px 3px 0; background: rgba(12, 35, 64, 0.07); overflow: hidden; min-width: 60px; }
.bar > span { display: block; height: 100%; border-radius: 0 3px 3px 0; background: var(--modra); }
.bar.child > span { background: var(--zlata); }
.months { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 10px; }
.months .mcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%;
                justify-content: flex-end; min-width: 0; }
.months .mbar { width: 100%; max-width: 46px; background: var(--modra); border-radius: 0 10px 0 0; min-height: 2px; }
.months .mbar:hover { background: var(--zlata); }
.months .mlab { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters label.f { min-width: 140px; }
.presets { display: flex; gap: 4px; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
tr.child td:first-child { padding-left: 22px; }
tr.child td { color: var(--head); }

/* --- nahrání --- */
.drop { border: 1.5px dashed var(--zlata); border-radius: 0 var(--radius) 0 0; padding: 34px 16px; text-align: center;
        color: var(--muted); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.drop.over, .drop:hover { background: rgba(189, 155, 96, 0.08); border-color: var(--zlata-tmava); color: var(--modra); }
.drop .g { font-size: 26px; display: block; margin-bottom: 8px; color: var(--zlata); }
.spin { display: inline-block; animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .detail, .grid2 { grid-template-columns: minmax(0, 1fr); }
  .viewer { position: static; height: 70vh; }
}

/* --- informace (srovnání cen) --- */
.info { display: flex; gap: 6px; align-items: flex-start; border-radius: 4px; background: #EEF2F8;
        color: #24456F; padding: 5px 9px; margin-top: 4px; }
.info .g { margin-top: 2px; }
.info a { color: var(--link); text-decoration: underline; text-decoration-color: var(--zlata); }
tr.best td { background: var(--green-bg); }
tr.best td:first-child { box-shadow: inset 2px 0 0 var(--green-line); }
.savings { color: var(--green); }

.chip.amber { background: var(--amber-bg); box-shadow: none; color: var(--amber); }
.chip.red { background: var(--red-bg); box-shadow: none; color: var(--red); }

/* --- seznam faktur: každá faktura jako samostatný rámeček --- */
.invlist { display: flex; flex-direction: column; gap: 6px; }
.inv { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 0 10px;
       align-items: start; padding: 11px 14px 11px 16px; border: 1px solid var(--line);
       border-radius: 0 14px 0 0; background: var(--cell); color: inherit; }
.inv:hover { border-color: var(--zlata); text-decoration: none; }
.inv::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px;
               background: var(--stripe, transparent); }
.inv.s-pending { --stripe: var(--orange); }
.inv.s-overdue { --stripe: #D9443A; border-color: rgba(217, 68, 58, 0.45); }
.inv.s-sent { --stripe: var(--green-line); }
.inv.s-rejected { --stripe: #B9C0CA; opacity: 0.75; }
.inv.s-processing { --stripe: var(--blue); }
.inv-ico { padding-top: 1px; color: var(--zlata-tmava); }
.inv-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.inv-name { color: var(--strong); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; color: var(--muted);
            font-size: 11px; }
.inv-why { display: flex; gap: 6px; align-items: flex-start; margin-top: 7px; padding: 5px 9px; border-radius: 4px;
           background: var(--amber-bg); color: var(--amber); font-size: 11px; }
.inv.s-overdue .inv-why { background: var(--red-bg); color: var(--red); }
.inv-why .g { margin-top: 1px; font-size: 11px; }
.inv-why .more { font-weight: 600; white-space: nowrap; }
.inv-side { text-align: right; min-width: 120px; }
.inv-amount { color: var(--strong); font-size: 14px; font-weight: 600; }
.inv-sub { margin-top: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.group-head { display: flex; align-items: baseline; gap: 8px; margin: 12px 2px 2px; padding-bottom: 4px;
              border-bottom: 1px solid var(--line); color: var(--head); font-size: 11px; }
.group-head:first-child { margin-top: 0; }
.group-head > span:first-child { color: var(--zlata-tmava); font-weight: 600; font-size: 11px; text-transform: uppercase;
                                 letter-spacing: 0.12em; }
.group-head b { color: var(--modra); font-weight: 600; }

/* --- drobnosti: rámečky upozornění --- */
.card .card { box-shadow: none; }
.okbox, .warn, .errbox { border: 1px solid transparent; }
.warn { border-color: #F5D2AE; }
.okbox { border-color: rgba(60, 143, 90, 0.25); }
.errbox { border-color: rgba(180, 35, 24, 0.22); }
.inv-why { border: 1px solid #F5D2AE; }
.inv.s-overdue .inv-why { border-color: rgba(180, 35, 24, 0.22); }
.flash.okbox { background: #EEF7F1; }
.flash.errbox { background: var(--red-bg); }

/* --- druh nákladu --- */
.cat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.cat-dot.cat-protetika, select.cat.cat-protetika { --c: #7B4FC2; }
.cat-dot.cat-zum, select.cat.cat-zum { --c: #2A9D8F; }
.cat-dot.cat-skoleni, select.cat.cat-skoleni { --c: #E08A1E; }
.cat-dot.cat-opravy, select.cat.cat-opravy { --c: #2F5D9E; }
.cat-dot.cat-prodej, select.cat.cat-prodej { --c: #BD9B60; }
.cat-dot.cat-ostatni, select.cat.cat-ostatni { --c: #9AA3B2; }
.cat-dot { background: var(--c); }
select.cat { padding: 2px 4px; border-left: 3px solid var(--c); }
.cat-line { display: flex; align-items: center; gap: 4px; font-size: 11.5px; margin-top: 3px; }
.supplier-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 4px 12px;
                 max-height: 200px; overflow: auto; }

/* --- řazení tabulky kliknutím na záhlaví --- */
table.sortable th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
table.sortable th[data-sort]:hover { color: var(--modra); }
table.sortable th.sorted { color: var(--zlata-tmava); }
table.sortable th[data-dir]:not([data-dir=""])::after { content: " " attr(data-dir); font-size: 9px; }

/* --- záloha bez daňového dokladu (Ke schválení) --- */
a.advance-warn { color: inherit; text-decoration: none; margin-bottom: 8px; align-items: center; }
a.advance-warn:hover { filter: brightness(0.97); }
.supplier-row { gap: 10px; }
.room-pick { gap: 12px; align-items: flex-end; margin-bottom: 10px; }

/* --- sklad (ve stejném jazyce jako zbytek: tvar pole „ma“, zlatá jako výběr, linky místo stínů) --- */
.cat-dot.cat-sklad, select.cat.cat-sklad { --c: #9A6A3A; }
.cat-dot.cat-spotreba { --c: #C2587E; }
.subnav { margin-bottom: 14px; }
.subtabs { display: flex; gap: 2px; flex-wrap: wrap; padding: 7px 10px; }
.subtabs a { color: var(--text); padding: 4px 11px 4px 9px; border-radius: 0 999px 999px 0; display: flex; gap: 6px;
             align-items: center; font-weight: 500; }
.subtabs a .g { color: var(--zlata); }
.subtabs a:hover { background: var(--hover); color: var(--modra); text-decoration: none; }
.subtabs a.on { background: var(--selected); color: var(--modra); font-weight: 600; box-shadow: inset 2px 0 0 var(--zlata); }
.subtabs .badge { background: rgba(12, 35, 64, 0.08); color: var(--head); }
.subtabs .badge.hot { background: var(--zlata); color: var(--modra); }
.chip.green { background: var(--green-bg); box-shadow: none; color: var(--green); }
table.t tr.rowlink { cursor: pointer; }
table.t tr.rowlink:hover td { background: var(--hover); }
table.t tr.buy td:first-child { box-shadow: inset 2px 0 0 #D9443A; }
table.t tr.ordered td:first-child { box-shadow: inset 2px 0 0 var(--blue); }
table.t tr.group-row td { background: var(--papir); border-top: 1px solid var(--line); padding-top: 9px; color: var(--modra); }
.late { color: var(--red); font-weight: 600; }
.meter { height: 5px; border-radius: 0 3px 3px 0; background: rgba(12, 35, 64, 0.07); overflow: hidden; min-width: 50px;
         margin-top: 4px; }
.meter > span { display: block; height: 100%; border-radius: 0 3px 3px 0; background: var(--green-line); }
.meter.low > span { background: #D9443A; }
.meter.mid > span { background: var(--orange); }
.thumb { width: 64px; height: 64px; border-radius: 0 12px 0 0; object-fit: cover; background: #EEF1F4; display: block; }
.photo-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0 12px; align-items: start; }
.people-today { display: flex; gap: 4px; flex-wrap: wrap; }
.qty-in { width: 70px; text-align: right; }
.matrix td, .matrix th { white-space: nowrap; }
/* Odběry: první sloupec (lékař / materiál) zůstává vidět při posunu tabulky do strany */
.matrix td:first-child, .matrix th:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: 1px 0 0 var(--line); }
.mail-preview { background: var(--papir); color: #222; border: 1px solid var(--line); border-radius: 0 var(--radius) 0 0;
                padding: 0; overflow-x: auto; }
.steps { margin: 4px 0 0 18px; padding: 0; }
.steps li { margin: 2px 0; }
@media (max-width: 700px) {
  .photo-row { grid-template-columns: 48px minmax(0, 1fr); }
  .photo-row .inv-side { grid-column: 2; text-align: left; margin-top: 6px; }
  .thumb { width: 48px; height: 48px; }
}
.warn.solid { background: var(--amber-bg); }   /* samostatný pruh nad kartami – na papírové ploše bez stínu */
label.learn { display: flex; gap: 5px; align-items: center; white-space: nowrap; font-size: 11px; color: var(--muted); margin-top: 3px; }.print-only { display: none; }
@media print {
  body { background: #ffffff; font-size: 10.5px; }
  .top, .subnav, .no-print, .flash { display: none !important; }
  .print-only { display: inline; margin-left: 24px; }
  main { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 0; background: #ffffff; backdrop-filter: none; }
  table.t td { padding: 3px 6px; border-bottom: 1px solid #bbbbbb; }
  table.t tr { break-inside: avoid; }
  .inventory input.qty-in { border: 1px solid #888888; width: 80px; }
  .inventory input.qty-in::placeholder { color: transparent; }
}

/* --- rozložení: moduly nahoře, záložky modulu ve světlém pruhu pod lištou --- */
.nav.modules a { font-size: 13px; padding: 7px 12px 7px 10px; }
.top .btn.flat.on { background: rgba(189, 155, 96, 0.22); color: var(--zlata-svetla); }
.subbar { position: relative; background: var(--bila); border-bottom: 1px solid var(--line);
          box-shadow: inset 0 3px 0 var(--zlata); }
.subbar-inner { display: flex; gap: 2px; flex-wrap: wrap; max-width: 1320px; margin: 0 auto; padding: 7px 14px 6px; }
.subbar a { color: var(--text); padding: 5px 12px 5px 10px; border-radius: 0 999px 999px 0; display: flex; gap: 6px;
            align-items: center; font-weight: 500; }
.subbar a .g { color: var(--zlata); }
.subbar a:hover { background: var(--hover); color: var(--modra); text-decoration: none; }
.subbar a.on { background: var(--selected); color: var(--modra); font-weight: 600; box-shadow: inset 2px 0 0 var(--zlata); }
.subbar .badge { background: rgba(12, 35, 64, 0.08); color: var(--head); }
.subbar .badge.hot { background: var(--zlata); color: var(--modra); }
[id] { scroll-margin-top: 110px; }

/* detail faktury: tlačítka schválit / zamítnout vždy po ruce */
.sticky-actions { position: sticky; bottom: 0; z-index: 4; box-shadow: 0 -6px 18px rgba(12, 35, 64, 0.08); }
.sticky-actions .card-body { padding-top: 10px; padding-bottom: 10px; gap: 8px; }
.sticky-actions .note-box textarea { width: 100%; }

/* --- Přehled (úvodní stránka) --- */
.todo { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; }
.todo a.card { display: block; color: inherit; text-decoration: none; }
.todo a.card:hover { border-color: var(--zlata); }
.todo .label { color: var(--zlata-tmava); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
.todo .value { font-family: var(--font-nadpis); font-weight: 300; font-size: 28px; color: var(--modra); margin: 4px 0 2px; }
.todo .value.zero { color: #9AA3B2; }
.todo .note { color: var(--muted); font-size: 11.5px; }
.todo .hot .value { color: var(--red); }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .cols3 { grid-template-columns: 1fr; } }
.delta.up { color: var(--red); }
.delta.down { color: var(--green); }

/* Nastavení: jedna sekce na záložku */
#settings-grid.one-sec { grid-template-columns: minmax(0, 960px); }
#settings-grid [data-sec][hidden] { display: none; }

/* Popisky tlačítek v horní liště; na úzké obrazovce zůstanou jen ikony */
@media (max-width: 1100px) { .top .lbl { display: none; } }

/* Přihlášení (server) */
.login-main { display: flex; justify-content: center; padding: 8vh 16px; }
.login-card { width: 100%; max-width: 380px; }
.login-card .btn.big { justify-content: center; }

/* --- Mobil (Ordo v telefonu): spodní lišta, dlaždice, Můj den --- */
.bottombar { display: none; }
.hello { margin: 4px 0 14px; display: grid; gap: 2px; }
.hello h2 { font-family: var(--font-nadpis); font-weight: 300; font-size: 22px; color: var(--modra); margin: 0;
            text-transform: none; letter-spacing: 0; }
.eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zlata-tmava); font-weight: 600; }
.today-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 14px; }
.today-cards .label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zlata-tmava); font-weight: 600; }
.today-cards .val { font-family: var(--font-nadpis); font-weight: 300; font-size: 18px; color: var(--modra); }
.m-only { display: none; }
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.tile { position: relative; display: grid; justify-items: center; gap: 6px; padding: 16px 8px 12px; background: var(--card);
        border: 1px solid var(--line); border-radius: 0 var(--radius) 0 0; color: var(--modra); text-decoration: none;
        font-weight: 600; font-size: 12px; }
.tile .g { font-size: 24px; color: var(--zlata); }
.tile:hover { border-color: var(--zlata); }
.dot { position: absolute; top: 6px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
       background: var(--red); color: #fff; font-size: 10px; line-height: 18px; text-align: center; }
.section-list { margin-bottom: 12px; }
.item.unread .name { font-weight: 700; }

@media (max-width: 760px) {
  /* Telefon podle návrhu: modrý pruh s nadpisem a zlatým podtitulem, menší zaoblení, dlaždice po třech */
  :root { --radius: 14px; }
  .m-only { display: block; }
  .top { position: relative; }
  .top-inner { justify-content: space-between; padding: 10px 16px 0; min-height: 0; }
  .top .brand { margin: 0; opacity: 0.85; }
  .top .brand img { height: 15px; }
  .top .brand b { font-size: 13px; }
  .m-head { position: relative; padding: 8px 16px 16px; }
  .m-title { font-family: var(--font-nadpis); font-weight: 300; font-size: 19px; line-height: 1.25; color: var(--bila);
             display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .m-sub { color: var(--zlata-svetla); font-size: 12px; margin-top: 3px; }
  .m-sub:empty { display: none; }
  .hello { display: none; }
  .today-cards { gap: 10px; }
  .today-cards .btn { justify-content: center; width: 100%; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tile { padding: 12px 4px 10px; font-size: 11px; gap: 5px; text-align: center; }
  .tile .g { font-size: 20px; color: var(--zlata-tmava); }
  .card-head { flex-wrap: wrap; row-gap: 6px; }
  .card-head form:has(input[name=q]) { width: 100% !important; }
  .top .nav.modules, .top .hide-mobile, .top .mode { display: none; }
  .subbar-inner { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .subbar-inner a { white-space: nowrap; }
  main { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .bottombar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
               background: var(--card); border-top: 1px solid var(--line);
               padding: 6px max(6px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-right, 0px)); }
  .bottombar a { position: relative; display: grid; justify-items: center; gap: 2px; color: var(--muted); text-decoration: none;
                 font-size: 10px; font-weight: 600; padding: 4px 0; }
  .bottombar a .g { font-size: 20px; }
  .bottombar a.on { color: var(--modra); }
  .bottombar a.on .g { color: var(--zlata); }
  .bottombar .dot { top: 0; right: calc(50% - 22px); }
  .sticky-actions { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .grid2 { grid-template-columns: 1fr; }
  .btn, input, select, textarea { min-height: 38px; }
}
.qr { background: #fff; padding: 10px; border: 1px solid var(--line); justify-self: center; }
.qr svg { width: 190px; height: 190px; display: block; }

/* Vyfotit výdej (telefon) */
.snap { max-width: 560px; }
.snap-btn { display: grid; justify-items: center; gap: 6px; padding: 26px 12px; border: 2px dashed var(--zlata);
            border-radius: 0 var(--radius) 0 0; background: var(--card); color: var(--modra); font-weight: 700;
            font-size: 15px; cursor: pointer; }
.snap-btn .g { font-size: 38px; color: var(--zlata); }
.snap-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.snap-previews { display: flex; flex-wrap: wrap; gap: 6px; }
.snap-previews img { width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--line); }
.snap-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.snap-previews figure { margin: 0; display: grid; gap: 2px; justify-items: center; }
.snap-previews figcaption { font-size: 11px; color: var(--muted); }
code { overflow-wrap: anywhere; }

/* Kartičky s přístupem do Orda (Vytvořit přístup) – na A4 po dvou vedle sebe */
.access-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.access-card { background: var(--card); border: 1px solid var(--line); border-radius: 0 var(--radius) 0 0; overflow: hidden;
               break-inside: avoid; }
.ac-head { display: flex; align-items: center; gap: 8px; background: var(--modra); color: var(--bila); padding: 10px 14px; }
.ac-head img { height: 16px; }
.ac-head b { font-family: var(--font-nadpis); font-weight: 300; font-size: 15px; }
.ac-head span { margin-left: auto; color: var(--zlata-svetla); font-size: 11px; }
.ac-body { padding: 12px 14px 14px; display: grid; gap: 8px; }
.ac-name { font-family: var(--font-nadpis); font-weight: 300; font-size: 16px; color: var(--modra); }
.ac-body dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 12px; }
.ac-body dt { color: var(--muted); }
.ac-body dd { margin: 0; overflow-wrap: anywhere; }
.ac-body .mono { font-family: Consolas, "Courier New", monospace; font-weight: 600; color: var(--modra); }
.ac-body .mono.big { font-size: 16px; letter-spacing: 0.02em; }
.ac-note { font-size: 10.5px; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: 7px; }
@media print {
  .bottombar, .m-head { display: none !important; }
  .access-cards { grid-template-columns: 1fr 1fr; gap: 8mm; }
  .access-card { border: 1px solid #999; }
  .ac-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}