/* Design tokens — BRANDBOOK SIMPLY (Brandbook_SIMPLY.pdf) + layout z makety.
   Egyptian blue = akce (nikdy závažnost). Jedna červená na obrazovku. */
:root {
  --primarni: #0E34A0;      /* Egyptian blue */
  --primarni-tmava: #0A2778;
  --primarni-svetla: #e7edfb;
  --brand-tmava: #0c1a3a;   /* tmavý podklad appbaru vlevo */
  --ai: #2EB8C3;            /* Maxim blue green */
  --pozor: #F5BD20;         /* Golden lock */
  --purplex: #632383;
  --hotovo: #1E8E5A;
  --blokuje: #D93025;
  --text: #1a2330;
  --slabsi: #64748b;
  --linka: #e4e8f0;
  --board: #eef2f8;
  --plocha: #f5f7fb;
  --karta: #ffffff;
  --stin: 0 1px 2px rgba(14,52,160,.04), 0 4px 14px rgba(14,52,160,.05);
  font-family: "Avenir Next LT Pro", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--plocha); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--primarni); }

/* App bar (nahoře) */
.appbar {
  background: var(--primarni); color: #fff; padding: .55rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 2px 10px rgba(14,52,160,.2); position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: #fff; }
.brand .logo { height: 24px; width: auto; display: block; }
.brand-app { font-weight: 600; font-size: .92rem; opacity: .93;
  border-left: 1px solid rgba(255,255,255,.32); padding-left: .7rem; }
.appbar-right { display: flex; align-items: center; gap: .9rem; font-size: .85rem; }
.user-email { color: #cdd7f5; }
.appbar-right .badge.role { background: rgba(255,255,255,.16); color: #fff; }
.odhlasit { color: #fff; opacity: .9; text-decoration: none; }

/* Shell: sidebar + obsah */
.shell { display: flex; min-height: calc(100vh - 49px); }
.side { width: 216px; flex: none; background: #fff; border-right: 1px solid var(--linka); padding: .8rem .6rem; }
.side a {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .5rem .7rem; border-radius: 9px; font-size: .9rem; color: var(--text);
  text-decoration: none; margin-bottom: 1px; transition: background .12s;
}
.side a:hover { background: var(--board); }
.side a.active { background: var(--primarni-svetla); color: var(--primarni); font-weight: 700; }
.side-sep { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--slabsi);
  font-weight: 800; margin: 1rem .7rem .35rem; }
.cnt { background: var(--board); color: var(--slabsi); font-size: .72rem; font-weight: 700;
  border-radius: 999px; padding: .05rem .5rem; font-variant-numeric: tabular-nums; }
.cnt.hot { background: var(--blokuje); color: #fff; }
.cnt.warn { background: var(--pozor); color: #4a3900; }

.content { flex: 1; padding: 1.6rem 1.8rem; max-width: 1000px; }
.content-plain { max-width: 1000px; margin: 0 auto; padding: 0 1.25rem; }

/* Karty, typografie */
.card { background: var(--karta); border: 1px solid var(--linka); border-radius: 12px;
  padding: 1.25rem 1.4rem; margin-bottom: 1.1rem; box-shadow: var(--stin); }
h1 { font-size: 1.5rem; margin: 0 0 1rem; letter-spacing: -.01em; }
h2 { font-size: 1.12rem; margin: 0 0 .75rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
.lead { color: var(--slabsi); font-size: .95rem; margin: 0 0 1rem; }
label { display: block; font-weight: 600; margin-bottom: .35rem; }
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),
select, textarea {
  width: 100%; max-width: 100%; min-height: 2.6rem; padding: .55rem .8rem;
  border: 1px solid var(--linka); border-radius: 9px; font-size: 1rem;
  font-family: inherit; line-height: 1.4; background: #fff; color: var(--text);
  box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 5rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primarni); box-shadow: 0 0 0 3px rgba(14,52,160,.12); }

.btn { display: inline-block; background: var(--primarni); color: #fff; border: 0; padding: .6rem 1.25rem;
  border-radius: 9px; font-size: .95rem; font-weight: 700; font-family: inherit; cursor: pointer;
  text-decoration: none; transition: background .15s; }
.btn:hover { background: var(--primarni-tmava); }
.btn.ghost { background: #fff; color: var(--primarni); border: 1px solid var(--linka); }
.btn.block { background: #a2adbf; cursor: not-allowed; }
.btn:disabled { opacity: .55; cursor: default; }
.btn.sm { padding: .3rem .7rem; font-size: .82rem; }
.btn.danger { background: var(--blokuje); } .btn.danger:hover { background: #b3271c; }
/* Akční panel zpracovatele */
.actionbar { border-left: 4px solid var(--primarni); }
.ab-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ab-title { font-weight: 800; font-size: 1.02rem; }
.ab-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .9rem; }
.ab-actions form { margin: 0; }
.ab-nogo { display: flex; gap: .5rem; align-items: center; flex: 1 1 320px; }
.ab-nogo input { flex: 1 1 auto; }
/* Schvalovací fronta (G40) */
.sch-item { border-left: 4px solid var(--pozor); }
.sch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sch-kod { font-family: ui-monospace, Menlo, monospace; font-weight: 700; color: var(--primarni); text-decoration: none; margin-right: .4rem; }
.sch-duvod { margin: .7rem 0; padding: .55rem .7rem; background: var(--plocha); border-radius: 8px; }
.sch-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.sch-actions form { margin: 0; }
.sch-vratit { display: flex; gap: .5rem; align-items: center; flex: 1 1 320px; }
.sch-vratit input { flex: 1 1 auto; }
/* Provozní zdraví — vyřešená chyba ztlumená */
.chyba-vyr { opacity: .5; }
/* Flash hlášky */
.flash-wrap { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.flash { padding: .7rem 1rem; border-radius: 9px; border-left: 4px solid var(--primarni); background: var(--primarni-svetla); font-size: .9rem; }
.flash-chyba { border-left-color: var(--blokuje); background: #fdecea; }
.flash-uspech { border-left-color: var(--hotovo); background: #e7f6ee; }
.flash-pozor { border-left-color: var(--pozor); background: #fff8e9; }

.muted { color: var(--slabsi); } .ok { color: var(--hotovo); font-weight: 600; }
.bad { color: var(--blokuje); font-weight: 600; } .warn { color: #9a7400; font-weight: 600; }
.badge { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.badge.role { background: var(--primarni-svetla); color: var(--primarni); }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .55rem .65rem; border-bottom: 1px solid var(--linka); vertical-align: top; }
th { color: var(--slabsi); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
tbody tr:hover { background: #fafbff; }
td.num { font-variant-numeric: tabular-nums; }
pre { background: #0d1117; color: #c9d1d9; padding: 1rem; border-radius: 10px; overflow-x: auto; font-size: .85rem; }

/* Dnes — dlaždice */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 1.1rem; }
.tile { background: var(--karta); border: 1px solid var(--linka); border-radius: 12px; padding: 1.1rem 1.2rem;
  box-shadow: var(--stin); text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: .25rem;
  transition: transform .12s, box-shadow .12s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(14,52,160,.1); }
.tile .n { font-size: 1.9rem; font-weight: 800; color: var(--primarni); line-height: 1; font-variant-numeric: tabular-nums; }
.tile .l { font-size: .85rem; color: var(--slabsi); }
.tile.pozor .n { color: var(--blokuje); }

/* Řádek zakázky (seznam) */
.row-z { display: flex; align-items: center; gap: .8rem; padding: .65rem .8rem; border: 1px solid var(--linka);
  border-radius: 10px; margin: .45rem 0; background: #fff; text-decoration: none; color: var(--text);
  transition: border-color .12s, background .12s; }
.row-z:hover { border-color: var(--primarni); background: #f8fbff; }
.row-z .id { font-family: ui-monospace, Menlo, monospace; font-size: .74rem; color: var(--slabsi); width: 108px; flex: none; }
.row-z .nz { font-weight: 600; }
.row-z .zad { color: var(--slabsi); font-size: .82rem; }
.row-z .st { margin-left: auto; }
.row-z .lh { font-weight: 700; font-size: .8rem; font-variant-numeric: tabular-nums; }
.lh.crit { color: var(--blokuje); } .lh.soon { color: #9a7400; } .lh.ok { color: var(--hotovo); }
/* Tabule připravenosti — tečka stavu + počet podkladů */
.row-z .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.zeleny { background: var(--hotovo); } .dot.zluty { background: var(--pozor); } .dot.cerveny { background: var(--blokuje); }
.row-z .podk { font-size: .78rem; white-space: nowrap; }
.tiles.tiles-2 { grid-template-columns: repeat(2, minmax(0, 220px)); }
/* Prahy blokátorů — řádek = jeden formulář */
.prah-row { display: flex; align-items: center; gap: .8rem; padding: .55rem .2rem; border-bottom: 1px solid var(--linka); flex-wrap: wrap; }
.prah-row:last-of-type { border-bottom: none; }
.prah-meta { flex: 1 1 240px; display: flex; flex-direction: column; gap: .1rem; }
.prah-meta code { font-size: .82rem; color: var(--primarni); font-weight: 700; }
.prah-meta .muted { font-size: .78rem; }
.prah-row button { margin-left: auto; }

/* Stepper (detail) */
.stepper { display: flex; gap: .4rem; margin: .2rem 0 1.2rem; flex-wrap: wrap; }
.stepper .st { font-size: .78rem; padding: .3rem .8rem; border-radius: 999px; background: var(--board); color: var(--slabsi); font-weight: 600; }
.stepper .st.on { background: var(--primarni); color: #fff; }
.stepper .st.done { background: #dcf3e7; color: var(--hotovo); }
.stepper .st.block { background: #fdecea; color: var(--blokuje); }

/* Panelové taby (detail) */
.ptabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--linka); margin: -.3rem 0 1.1rem; flex-wrap: wrap; }
.ptabs button { background: none; border: 0; padding: .55rem .9rem; font-size: .92rem; font-family: inherit;
  cursor: pointer; color: var(--slabsi); border-bottom: 2px solid transparent; font-weight: 600; }
.ptabs button:hover { color: var(--text); }
.ptabs button.active { color: var(--primarni); border-bottom-color: var(--primarni); }
.ppanel { display: none; } .ppanel.active { display: block; }

/* Alert (nad taby) */
.alert { border-left: 4px solid var(--blokuje); background: #fdecea; padding: .8rem 1rem; border-radius: 8px;
  margin-bottom: .9rem; font-size: .92rem; }
.alert.warn { border-left-color: var(--pozor); background: #fff8e9; }
.alert a { color: var(--primarni); }

/* Panely / gate / prep */
.gate { border: 1px solid var(--pozor); background: #fff8e9; border-radius: 10px; padding: .9rem 1rem; margin-bottom: .9rem; }
.prep { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--linka);
  border-radius: 9px; margin: .4rem 0; font-size: .9rem; }
ul.tight { margin: .4rem 0 0; padding-left: 1.2rem; } ul.tight li { margin: .15rem 0; }

/* KPI (dohled) */
.kpi { display: flex; gap: .8rem; flex-wrap: wrap; margin: .3rem 0 1rem; }
.kpi > div { flex: 1 1 150px; background: #f8fafc; border: 1px solid var(--linka); border-radius: 10px; padding: .85rem 1rem; }
.kpi .n { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: .78rem; color: var(--slabsi); }

/* Formuláře: úzký sloupec + řádkový (inline) formulář */
.form-col { max-width: 420px; }
.form-col label { margin-top: .9rem; }
.form-col label:first-child { margin-top: 0; }
.formrow { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.formrow input:not([type=checkbox]), .formrow select { width: auto; flex: 1 1 130px; }
.formrow label { margin: 0; font-weight: 400; }

/* Listbar + Moje/Všechny toggle */
.listbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.toggle { display: inline-flex; background: var(--board); border-radius: 9px; padding: 3px; }
.toggle a { padding: .35rem .9rem; border-radius: 7px; font-size: .85rem; font-weight: 600; color: var(--slabsi); text-decoration: none; }
.toggle a.on { background: #fff; color: var(--primarni); box-shadow: var(--stin); }

/* Login (bez menu) */
.login-card { max-width: 420px; margin: 3.5rem auto; }
.login-logo { display: block; height: 40px; width: auto; margin: 0 0 1.5rem; }

@media (max-width: 820px) {
  .shell { flex-direction: column; }
  .side { width: 100%; border-right: 0; border-bottom: 1px solid var(--linka); display: flex; flex-wrap: wrap; gap: .3rem; }
  .side-sep { width: 100%; margin: .4rem .4rem 0; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}