/* Konzole PPC Pilot: vzhled podle brandbooku (docs/ui/brandbook). Barvy a písma výhradně z tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--line-height); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: var(--letter-spacing-display); margin: 0 0 var(--space-3); line-height: 1.2; }
h1 { font-size: var(--text-h1); margin-bottom: var(--space-4); }
h2 { font-size: var(--text-h2); }
a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-hover); text-decoration: underline; }
code, pre { font-family: var(--font-mono); font-size: .85em; } code { background: var(--color-bg); padding: 1px 5px; border-radius: 4px; }
pre { background: var(--color-bg); padding: var(--space-3); border-radius: var(--radius-control); overflow: auto; max-height: 360px; }
.muted { color: var(--color-muted); } .male { font-size: var(--text-small); } .stred { text-align: center; padding: var(--space-8); }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.topbar { display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6); height: 56px; background: var(--color-card); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 10; }
.topbar .logo img { display: block; height: 30px; width: auto; } .konzole-label { font-family: var(--font-display); font-weight: 800; color: var(--color-muted); padding-left: var(--space-3); border-left: 1px solid var(--color-border); }
.spacer { flex: 1; } .uzivatel { color: var(--color-ink); } .uzivatel:hover { text-decoration: none; color: var(--color-primary); }
.klient-volba { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); font-size: var(--text-small); margin-left: var(--space-4); }
.klient-volba select { min-width: 220px; }

.rozlozeni { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 56px); }
.rozlozeni.bez-menu { grid-template-columns: minmax(0, 1fr); }
.menu { background: var(--color-card); border-right: 1px solid var(--color-border); padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.menu a { padding: 9px var(--space-3); border-radius: var(--radius-control); color: var(--color-ink); font-weight: 500; }
.menu a:hover { background: var(--color-bg); text-decoration: none; }
.menu a.aktivni { background: var(--color-accent-bg); color: var(--color-primary); font-weight: 600; }
.menu-sekce { margin: var(--space-5) var(--space-3) var(--space-1); font-size: var(--text-small); text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
main { padding: var(--space-6); max-width: var(--content-max); width: 100%; }

.karta { background: var(--color-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-5); }
.karta > h2::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--color-primary); margin-bottom: var(--space-3); }
.mrizka { display: grid; gap: var(--space-5); margin-bottom: var(--space-5); } .mrizka > .karta { margin-bottom: 0; }
.mrizka.dva { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mrizka.ctyri { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { padding: var(--space-4) var(--space-5); } .kpi-nazev { color: var(--color-muted); font-size: var(--text-small); }
.kpi-hodnota { font-family: var(--font-display); font-weight: 800; font-size: var(--text-kpi); color: var(--color-ink); line-height: 1.2; } .kpi-hodnota.crit { color: var(--color-primary); }
.kpi-zmena { font-size: var(--text-small); font-weight: 600; color: var(--color-muted); } .kpi-zmena.dobre { color: var(--status-good); } .kpi-zmena.spatne { color: var(--status-crit); } .kpi-zmena .muted { font-weight: 400; }

table { width: 100%; border-collapse: collapse; font-size: var(--text-table); }
th { text-align: left; color: var(--color-muted); font-weight: 600; font-size: var(--text-small); padding: 8px 10px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--color-border); vertical-align: top; } tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--color-bg); } .cisla td:not(:first-child), .cisla th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.akce { white-space: nowrap; } .prazdny { color: var(--color-muted); padding: var(--space-4) 0; margin: 0; }
.seznam { padding-left: var(--space-5); line-height: 2; }
dl.detail { display: grid; grid-template-columns: 170px 1fr; gap: 6px var(--space-4); margin: 0 0 var(--space-3); } dl.detail dt { color: var(--color-muted); } dl.detail dd { margin: 0; }

.stitek { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: var(--text-small); font-weight: 700; background: var(--status-unknown-bg); color: var(--status-unknown); white-space: nowrap; }
.stitek.u1 { background: var(--status-info-bg); color: var(--status-info); } .stitek.u2 { background: var(--status-warn-bg); color: var(--status-warn); } .stitek.u3 { background: var(--status-crit-bg); color: var(--status-crit); }
.stitek.s-novy, .stitek.s-pending { background: var(--status-warn-bg); color: var(--status-warn); } .stitek.s-videno { background: var(--status-info-bg); color: var(--status-info); }
.stitek.s-potvrzeno, .stitek.s-executed, .stitek.s-aktivni, .stitek.s-implementovano { background: var(--status-good-bg); color: var(--status-good); }
.stitek.s-vyreseno, .stitek.s-rejected, .stitek.s-expired { background: var(--status-unknown-bg); color: var(--status-unknown); } .stitek.s-failed { background: var(--status-crit-bg); color: var(--status-crit); }

label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-small); color: var(--color-muted); font-weight: 500; }
input, select { font: inherit; color: var(--color-ink); background: var(--color-card); border: 1px solid var(--color-control-border); border-radius: var(--radius-control); height: var(--control-height); padding: 0 var(--space-3); }
input:focus, select:focus { border-color: var(--color-primary); outline: var(--focus-ring); outline-offset: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: var(--control-height); padding: 0 22px; font: inherit; font-weight: 700; color: var(--color-primary-foreground); background: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-btn); cursor: pointer; transition: background-color var(--transition); }
.btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); text-decoration: none; color: var(--color-primary-foreground); }
.btn.sekundarni { background: var(--color-card); color: var(--color-primary); } .btn.sekundarni:hover { background: var(--color-accent-bg); color: var(--color-primary-hover); }
.btn.nebezpecne { background: var(--color-card); color: var(--status-crit); border-color: var(--status-crit); } .btn.nebezpecne:hover { background: var(--status-crit-bg); color: var(--status-crit); }
.btn.male { height: var(--control-height-sm); padding: 0 12px; font-size: var(--text-small); }
.radek { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; } form.filtr { display: flex; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-4); flex-wrap: wrap; }
.rozhodnuti { margin-top: var(--space-3); }

.hlaska { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); margin-bottom: var(--space-4); border: 1px solid var(--color-border); background: var(--color-card); }
.hlaska.ok { background: var(--status-good-bg); border-color: var(--status-good); } .hlaska.chyba { background: var(--status-crit-bg); border-color: var(--status-crit); color: var(--color-ink); } .hlaska.varovani { background: var(--status-warn-bg); border-color: var(--status-warn); }
.kod .velky { font-size: 1.3rem; padding: 4px 10px; background: var(--color-card); user-select: all; }
.zasah.riziko { border-left: 4px solid var(--status-crit); }

.prihlaseni { max-width: 420px; margin: 8vh auto; text-align: center; padding: var(--space-8); }
.prihlaseni form { text-align: left; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); } .prihlaseni .btn { width: 100%; margin-top: var(--space-2); }
.velke-logo { height: 64px; width: auto; margin-bottom: var(--space-4); } .prihlaseni h1 { margin-bottom: var(--space-2); }
.qr svg { max-width: 220px; height: auto; display: block; margin: var(--space-3) 0; }
form:not(.radek):not(.filtr) > label + label, form:not(.radek):not(.filtr) > label + button { margin-top: var(--space-3); }
.grafy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } .graf h3 { font-size: var(--text-h3); margin-bottom: var(--space-1); }

@media (max-width: 960px) { .rozlozeni { grid-template-columns: 1fr; } .menu { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--color-border); } .menu-sekce { display: none; }
  .mrizka.dva, .mrizka.ctyri, .grafy { grid-template-columns: 1fr; } main { padding: var(--space-4); } .topbar { flex-wrap: wrap; height: auto; padding: var(--space-2) var(--space-4); } dl.detail { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }