:root {
	--zluta: #FBC638;
	--zluta-tmava: #E0A800;
	--ink: #1F2933;
	--ink-2: #52606D;
	--ink-3: #7B8794;
	--linka: #E1E5EA;
	--plocha: #FFFFFF;
	--pozadi: #F6F7F9;
	--dobre: #1C7550;
	--dobre-svetla: #E4F3EB;
	--spatne: #B23127;
	--spatne-svetla: #FBE8E6;
	--ceka: #8A5A00;
	--ceka-svetla: #FDF1D8;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--pozadi);
	color: var(--ink);
	font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

.obal { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

/* hlavička */
.hlavicka { background: var(--plocha); border-bottom: 1px solid var(--linka); }
.hlavicka-obsah { display: flex; align-items: center; gap: 2rem; height: 56px; }
.znacka { font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none; }
.hlavicka nav { display: flex; gap: 1.25rem; flex: 1; }
.hlavicka nav a { color: var(--ink-2); text-decoration: none; padding: .3rem 0; border-bottom: 2px solid transparent; }
.hlavicka nav a:hover { color: var(--ink); }
.hlavicka nav a.aktivni { color: var(--ink); border-bottom-color: var(--zluta); font-weight: 600; }
.odhlasit { color: var(--ink-3); text-decoration: none; font-size: .875rem; }

main.obal { padding-top: 1.75rem; padding-bottom: 3rem; min-height: 60vh; }

h1 { font-size: 1.5rem; margin: 0 0 1.25rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .75rem; }
a { color: #1F5FA8; }

/* dlaždice */
.dlazdice { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px;
	background: var(--linka); border: 1px solid var(--linka); border-radius: 6px; overflow: hidden; margin-bottom: 1.5rem; }
.dlazdice a { background: var(--plocha); padding: .85rem 1rem; text-decoration: none; color: var(--ink); display: block; }
.dlazdice a:hover { background: #FAFBFC; }
.dlazdice a.aktivni { background: var(--ceka-svetla); }
.dlazdice .nazev { font-size: .78rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.dlazdice .castka { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dlazdice .pocet { font-size: .8rem; color: var(--ink-3); }

/* tabulky */
.karta { background: var(--plocha); border: 1px solid var(--linka); border-radius: 6px; overflow: hidden; }
.tabulka-obal { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--ink-3); padding: .6rem .9rem; border-bottom: 1px solid var(--linka); background: #FCFCFD; white-space: nowrap; }
td { padding: .65rem .9rem; border-bottom: 1px solid var(--linka); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.cislo, td.castka { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.castka, th.castka { text-align: right; }

/* stavy */
.stav { display: inline-block; font-size: .78rem; font-weight: 600; padding: .1rem .5rem; border-radius: 3px; white-space: nowrap; }
.stav-dobre { background: var(--dobre-svetla); color: var(--dobre); }
.stav-spatne { background: var(--spatne-svetla); color: var(--spatne); }
.stav-ceka { background: var(--ceka-svetla); color: var(--ceka); }
.stav-koncept { background: #EEF1F4; color: var(--ink-2); }
.stav-storno { background: #EEF1F4; color: var(--ink-3); text-decoration: line-through; }
/* Odkaz na zálohovku nese vzhled odznaku "Zaplacená" — faktura ze zálohy
   je zaplacená z podstaty a má to být vidět na první pohled. */
.ze-zalohy { text-decoration: none; }
.ze-zalohy:hover { text-decoration: underline; }
.stav + .ze-zalohy { margin-left: .35rem; }

/* formuláře */
form { margin: 0; }
.pole { margin-bottom: .9rem; }
.pole label { display: block; font-size: .82rem; color: var(--ink-2); margin-bottom: .2rem; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], textarea, select {
	width: 100%; padding: .45rem .6rem; border: 1px solid #CBD2D9; border-radius: 4px;
	font: inherit; background: var(--plocha); color: var(--ink); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--zluta); outline-offset: -1px; border-color: var(--zluta-tmava); }
textarea { min-height: 4.5rem; resize: vertical; }

button, .tlacitko {
	display: inline-block; background: var(--zluta); color: var(--ink); border: 1px solid var(--zluta-tmava);
	padding: .45rem 1.1rem; border-radius: 4px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
button:hover, .tlacitko:hover { background: var(--zluta-tmava); }
.tlacitko-tise { background: var(--plocha); border-color: #CBD2D9; font-weight: 500; }
.tlacitko-tise:hover { background: #F0F2F5; }
.tlacitko-nebezpecne { background: var(--plocha); border-color: #E0A9A3; color: var(--spatne); font-weight: 500; }
.tlacitko-nebezpecne:hover { background: var(--spatne-svetla); }

.akce { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: 1.25rem 0; }
.radek { display: flex; gap: 1rem; flex-wrap: wrap; }
.radek > * { flex: 1 1 12rem; }

/* hlášky */
.flash { padding: .65rem .9rem; border-radius: 4px; margin-bottom: 1rem; font-size: .9rem; }
.flash.success { background: var(--dobre-svetla); color: var(--dobre); }
.flash.error { background: var(--spatne-svetla); color: var(--spatne); }
.flash.info { background: var(--ceka-svetla); color: var(--ceka); }

.prazdno { padding: 2.5rem 1rem; text-align: center; color: var(--ink-3); }
.patka { color: var(--ink-3); font-size: .8rem; padding-bottom: 2rem; }
.tise { color: var(--ink-3); font-size: .85rem; }
.pravo { text-align: right; }

/* ---------- přehled ---------- */

/* Barvy grafu jsou vlastní: brandová žlutá #FBC638 má proti bílé kontrast 1,55:1
   a sloupce by mizely. Tahle dvojice prošla validací i pro barvoslepé (ΔE 31,5). */
:root {
	--serie-vystaveno: #2a78d6;
	--serie-uhrazeno: #eda100;
	--mrizka: #E4E7EB;
}

.graf-karta { padding: 1.25rem; }
.graf-hlava { display: flex; justify-content: space-between; align-items: baseline;
	flex-wrap: wrap; gap: .5rem; }
.graf-hlava h2 { margin: 0; font-size: 1rem; }

.legenda { display: flex; gap: 1rem; font-size: .85rem; color: var(--ink-2); }
.legenda-polozka { display: inline-flex; align-items: center; gap: .4rem; }
.znak { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.znak-sloupec { background: var(--serie-vystaveno); }
.znak-cara { height: 3px; border-radius: 2px; background: var(--serie-uhrazeno); }

.graf-obal { overflow-x: auto; margin-top: .75rem; }
.graf { width: 100%; min-width: 34rem; height: auto; display: block; }

.graf .mrizka line { stroke: var(--mrizka); stroke-width: 1; }
.graf .osa { fill: var(--ink-3); font-size: 11px; }
.graf .sloupec { fill: var(--serie-vystaveno); }
.graf .cara { fill: none; stroke: var(--serie-uhrazeno); stroke-width: 2;
	stroke-linejoin: round; stroke-linecap: round; }
/* prstenec v barvě podkladu, aby body zůstaly čitelné i přes čáru */
.graf .bod { fill: var(--serie-uhrazeno); stroke: var(--plocha); stroke-width: 2; }
.graf rect:hover { opacity: .82; }

.graf-tabulka { margin-top: 1rem; border-top: 1px solid var(--linka); padding-top: .75rem; }
.graf-tabulka summary { cursor: pointer; font-size: .85rem; color: var(--ink-2); }
.graf-tabulka summary:hover { color: var(--ink); }
.graf-tabulka table { margin-top: .5rem; }

.dlazdice a.zvyrazneno { background: var(--spatne-svetla); }

.upozorneni { padding: .35rem 0; }
.upozorneni-radek { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem;
	border-bottom: 1px solid var(--linka); font-size: .9rem; color: var(--ink-2); }
.upozorneni-radek:last-child { border-bottom: none; }
.upozorneni-radek.varovne { color: var(--ink); }

.novy-token { padding: 1.25rem; margin-bottom: 1rem; border-color: var(--dobre); background: var(--dobre-svetla); }
.token-radek { display: flex; gap: .5rem; margin-top: .75rem; }
.token-radek input { font-family: ui-monospace, monospace; font-size: .95rem; background: var(--plocha); }
.token-radek button { white-space: nowrap; }

.graf-podtitul { font-size: .82rem; color: var(--ink-3); margin: .25rem 0 0; max-width: 46rem; line-height: 1.45; }
.graf-podtitul b { color: var(--ink-2); font-weight: 600; }

/* očko: viděl / neviděl zákazník webfakturu */
.oko { display: inline-flex; vertical-align: middle; margin-left: .3rem; cursor: help; }
.oko.videno { color: var(--ink-3); }
.oko.nevideno { color: var(--linka); }
.oko.nevideno svg circle { fill: none; }

tr.vypnuta td { opacity: .55; }

/* ---------- platby z banky ---------- */

.platba { padding: 1rem; border-bottom: 1px solid var(--linka); }
.platba:last-child { border-bottom: none; }
.platba-hlava { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.platba-castka { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-right: .5rem; }
.platba-detail { margin-top: .3rem; font-size: .87rem; }
.platba-duvod { display: block; margin-top: .25rem; color: var(--ceka); }
.platba-syrovy { margin-top: .5rem; font-size: .85rem; }
.platba-syrovy pre { background: var(--pozadi); padding: .6rem; border-radius: 4px;
	overflow-x: auto; white-space: pre-wrap; font-size: .8rem; max-height: 18rem; }

.platba-kandidati { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .6rem; }
.kandidat { display: inline-flex; gap: .5rem; align-items: baseline; padding: .3rem .6rem;
	border: 1px solid var(--linka); border-radius: 4px; text-decoration: none; color: var(--ink);
	background: var(--plocha); font-size: .87rem; }
.kandidat:hover { border-color: var(--zluta-tmava); background: var(--ceka-svetla); }
.kandidat-castka { font-variant-numeric: tabular-nums; }
.kandidat-shoda { border-color: var(--dobre); background: var(--dobre-svetla); }

/* přepínač roků nad seznamem faktur */
.roky { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: 1.25rem 0 .75rem; }
.roky .tise { margin-right: .3rem; }
.roky .rok { display: inline-block; padding: .2rem .6rem; border-radius: 4px;
	text-decoration: none; color: var(--ink-2); font-size: .9rem; border: 1px solid transparent; }
.roky .rok:hover { background: var(--plocha); border-color: var(--linka); }
.roky .rok.aktivni { background: var(--zluta); color: var(--ink); font-weight: 600; border-color: var(--zluta-tmava); }
.hledani { margin-left: auto; display: flex; align-items: center; gap: .3rem; flex: 0 1 22rem; min-width: 12rem; }
.hledani input[type=search] { width: 100%; padding: .35rem .6rem; border: 1px solid #CBD2D9; border-radius: 4px;
	font: inherit; font-size: .9rem; background: var(--plocha); color: var(--ink); }
.hledani input[type=search]:focus { outline: 2px solid var(--zluta); outline-offset: -1px; border-color: var(--zluta-tmava); }
.hledani .zrusit { text-decoration: none; color: var(--ink-3); font-size: 1.2rem; line-height: 1; padding: 0 .2rem; }
.hledani .zrusit:hover { color: var(--ink); }

.odeslani-hlava { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.odeslani-hlava h1 { margin-bottom: .25rem; }

/* rozbalovací zápis úhrady na detailu faktury */
.zapsat-uhradu { margin-top: .75rem; }
.zapsat-uhradu summary { cursor: pointer; display: inline-block; font-size: .9rem; color: var(--ink-2); }
.zapsat-uhradu summary:hover { color: var(--ink); }

/* nabídka „Více“ v hlavičce detailu faktury */
.vice { position: relative; }
.vice summary { list-style: none; }
.vice summary::-webkit-details-marker { display: none; }
.vice-nabidka { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 10; min-width: 12rem;
	background: var(--plocha); border: 1px solid var(--linka); border-radius: 6px;
	box-shadow: 0 6px 20px rgba(31, 41, 51, .12); padding: .3rem 0; }
.vice-nabidka a { display: block; padding: .45rem .9rem; color: var(--ink); text-decoration: none; }
.vice-nabidka a:hover { background: var(--pozadi); }
.vice-nabidka a.nebezpecne { color: var(--spatne); border-top: 1px solid var(--linka); }
.storno-info { margin-top: 1.5rem; padding: 1rem; }

/* formulář dokladu — po vzoru Fakturoidu: jedna karta, popisky vlevo */
.doklad-karta { overflow: visible; }
.doklad-hlava { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--linka); }
.doklad-hlava h1 { margin: 0; flex: 1 1 auto; }
.doklad-hlava .zpet { font-weight: 500; padding: .35rem .8rem; }

.prepinac { display: inline-flex; border: 1px solid #CBD2D9; border-radius: 4px; overflow: hidden; }
.prepinac label { cursor: pointer; }
.prepinac input { position: absolute; opacity: 0; pointer-events: none; }
.prepinac span { display: block; padding: .4rem 1rem; color: var(--ink-2); background: var(--plocha); }
.prepinac label + label span { border-left: 1px solid #CBD2D9; }
.prepinac input:checked + span { background: var(--zluta); color: var(--ink); font-weight: 600; }
.prepinac input:focus-visible + span { outline: 2px solid var(--zluta-tmava); outline-offset: -2px; }

.doklad-telo { padding: 1.5rem; }
.doklad-radek { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: center; margin-bottom: .9rem; }
.doklad-radek > label, .doklad-popisek { text-align: right; color: var(--ink-2); font-size: .92rem; }
.doklad-pole { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.doklad-pole .siroke { width: auto; flex: 0 1 24rem; min-width: 14rem; }
.doklad-pole .uzke { width: 11rem; }
.odkaz-plus { text-decoration: none; font-weight: 500; }
.rychle-dny { display: inline-flex; gap: .25rem; }
.rychle-dny button { background: var(--plocha); border-color: #CBD2D9; font-weight: 500; padding: .3rem .6rem; font-size: .85rem; }
.rychle-dny button:hover { background: #F0F2F5; }

.dalsi-moznosti summary { cursor: pointer; display: inline-block; color: var(--ink-2); font-size: .9rem;
	border: 1px solid #CBD2D9; border-radius: 999px; padding: .3rem .9rem; }
.dalsi-moznosti[open] summary { margin-bottom: .6rem; }
.dalsi-moznosti textarea { margin-top: .2rem; min-width: min(36rem, 70vw); }

.polozky { margin-top: 1.5rem; }
.polozky-hlava, .polozka { display: grid; grid-template-columns: 5rem 5.5rem 1fr 9rem 2rem; gap: .5rem; align-items: center; }
.polozky-hlava { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: .3rem; }
.polozky-hlava .vpravo, .polozka .p-cena { text-align: right; }
.polozka { margin-bottom: .5rem; align-items: start; }
textarea.p-popis { min-height: 0; resize: none; overflow: hidden; }
.polozka[hidden] { display: none; }
.p-smazat { background: none; border: 1px solid #CBD2D9; border-radius: 50%; width: 1.8rem; height: 1.8rem;
	padding: 0; color: var(--ink-3); font-weight: 400; line-height: 1; }
.p-smazat:hover { background: var(--spatne-svetla); color: var(--spatne); border-color: #E0A9A3; }
.pridat-polozku { margin-top: .3rem; font-size: .9rem; }

.doklad-soucet { background: var(--pozadi); border-top: 1px solid var(--linka); border-bottom: 1px solid var(--linka);
	padding: 1.25rem 1.5rem; display: flex; justify-content: flex-end; }
.doklad-soucet > div { border-top: 3px solid var(--zluta); padding-top: .6rem; min-width: min(20rem, 100%); text-align: right; }
.doklad-soucet strong { font-size: 1.6rem; font-weight: 600; margin-left: .75rem; }
.soucet-radek { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; margin-bottom: .5rem;
	font-variant-numeric: tabular-nums; }
.soucet-radek[hidden] { display: none; }
.soucet-sleva input { width: 6rem; text-align: right; }
.soucet-sleva select { width: auto; }
.soucet-sleva #sleva-castka { min-width: 7rem; }
.soucet-chyba { color: var(--spatne); font-size: .9rem; margin-bottom: .5rem; }

.doklad-pata { display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem; padding: 1.25rem 1.5rem; flex-wrap: wrap; }
.doklad-pata #vystavit { font-size: 1.05rem; padding: .6rem 1.6rem; }
.odkaz-tlacitko { background: none; border: none; padding: 0; color: var(--ink); text-decoration: underline; font-weight: 500; }
.odkaz-tlacitko:hover { background: none; color: var(--ink-2); }

@media (max-width: 640px) {
	.doklad-radek { grid-template-columns: 1fr; gap: .25rem; }
	.doklad-radek > label, .doklad-popisek { text-align: left; }
	.doklad-telo, .doklad-hlava, .doklad-soucet, .doklad-pata { padding-left: 1rem; padding-right: 1rem; }
	.polozky-hlava { display: none; }
	.polozka { grid-template-columns: 4.5rem 4.5rem 1fr 2rem; border-bottom: 1px solid var(--linka); padding-bottom: .5rem; }
	.polozka .p-popis { grid-column: 1 / -1; grid-row: 1; }
	.polozka .p-cena { grid-column: 3; }
}

/* úprava vystaveného dokladu */
.upozorneni { background: var(--ceka-svetla); color: var(--ceka); border-radius: 4px;
	padding: .75rem 1rem; margin-bottom: 1.25rem; font-size: .9rem; line-height: 1.45; }
.upozorneni.varovani { background: var(--spatne-svetla); color: var(--spatne); }
.duvod-zmeny { display: flex; align-items: center; gap: .6rem; margin-right: auto; flex: 1 1 22rem; }
.duvod-zmeny input { flex: 1; }