/* ===== Barevné proměnné: světlý (výchozí) + tmavý OLED režim ===== */
:root{
	--bg:#f3f4f6; --surface:#fff; --surface-2:#f7f8fa;
	--text:#1a1a1a; --muted:#999; --line:#dcdfe4;
	--topbar-bg:#1f2d3d; --topbar-text:#fff; --topbar-link:#cfe3ff;
	--primary:#2271b1; --primary-text:#fff; --link:#2271b1; --link-dash:#9bb7d4;
	--input-bg:#fff; --shadow:rgba(0,0,0,.04); --modal-ov:rgba(0,0,0,.45);
	--ok-bg:#e6f4ea; --ok-line:#b7e1c4; --err-bg:#fdecec; --err-line:#f4c7c7;
	--warn-bg:#fff6e5; --warn-line:#f0d9a6;
}
[data-theme="dark"]{
	--bg:#000; --surface:#0c0c0d; --surface-2:#161618;
	--text:#f2f2f2; --muted:#8c8c8c; --line:#2a2a2d;
	--topbar-bg:#000; --topbar-text:#fff; --topbar-link:#8ab4ff;
	--primary:#3a8ee6; --primary-text:#fff; --link:#6db3ff; --link-dash:#3a5a80;
	--input-bg:#161618; --shadow:rgba(0,0,0,.6); --modal-ov:rgba(0,0,0,.72);
	--ok-bg:#0f2417; --ok-line:#1f5136; --err-bg:#2a1214; --err-line:#5e2327;
	--warn-bg:#2a2210; --warn-line:#5e4d1c;
}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;font:15px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}

/* Horní lišta */
.topbar{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;background:var(--topbar-bg);color:var(--topbar-text);padding:.6rem 1rem;border-bottom:1px solid var(--line)}
.topbar nav{display:flex;gap:.4rem 1rem;flex-wrap:wrap;flex:1 1 100%;order:3;overflow-x:auto;-webkit-overflow-scrolling:touch}
.topbar nav a{color:var(--topbar-link);text-decoration:none;white-space:nowrap;padding:.15rem 0}
.topbar nav a:hover{color:var(--topbar-text)}
.topbar .spacer{display:none}
.topbar .user{opacity:.85;font-size:.85em;order:1;flex:1 1 auto}
.topbar > strong{order:0}
.topbar .btn{order:2}
.theme-toggle{order:2;background:transparent;border:1px solid rgba(255,255,255,.35);color:var(--topbar-text);border-radius:7px;padding:.3rem .6rem;cursor:pointer;font-size:.95em;line-height:1}

.wrap{max-width:1100px;margin:1.2rem auto;padding:0 1rem}
h1{font-size:1.4rem;margin:.2rem 0 1rem}
h2{font-size:1.12rem;margin:1.3rem 0 .6rem}h2 small{font-weight:400;color:var(--muted);margin-left:.4rem}

.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.1rem;margin-bottom:1.2rem;box-shadow:0 1px 2px var(--shadow)}
.form label{display:block;margin:.5rem 0;font-weight:600;font-size:.92em}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:.25rem;padding:.55rem;border:1px solid var(--line);border-radius:7px;font:inherit;font-weight:400;background:var(--input-bg);color:var(--text)}
.form .row{display:flex;gap:.8rem;flex-wrap:wrap}.form .row label{flex:1 1 140px}
.form .check{font-weight:600}.form .check input{display:inline;width:auto;margin-right:.4rem}
fieldset{border:1px solid var(--line);border-radius:8px;margin:.6rem 0;padding:.6rem}

.btn{display:inline-block;padding:.5rem .9rem;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text);text-decoration:none;cursor:pointer;font:inherit;white-space:nowrap}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-text)}
.btn-ghost{background:transparent}.btn-small{padding:.28rem .55rem;font-size:.85em}

/* Tabulky */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border-radius:10px}
.grid{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.grid th,.grid td{padding:.5rem .6rem;border-bottom:1px solid var(--line);text-align:left;font-size:.9em;white-space:nowrap}
.grid td.wrap,.grid th.wrap{white-space:normal}
.grid thead th{background:var(--surface-2)}.grid tfoot th{background:var(--surface-2);border-top:2px solid var(--line)}

/* Dvojsloupec */
.cols{display:flex;gap:1.2rem;flex-wrap:wrap}
.col-form{flex:1 1 300px}.col-list{flex:2 1 320px;min-width:0}

.flash{padding:.6rem .9rem;border-radius:8px;margin-bottom:1rem}
.flash-ok{background:var(--ok-bg);border:1px solid var(--ok-line)}
.flash-err{background:var(--err-bg);border:1px solid var(--err-line)}
.flash-warn{background:var(--warn-bg);border:1px solid var(--warn-line)}
.badge{padding:.1rem .5rem;border-radius:20px;font-size:.8em}
.badge-submitted{background:var(--warn-bg)}.badge-approved{background:var(--ok-bg)}.badge-rejected{background:var(--err-bg)}
.muted{color:var(--muted)}.inline{display:inline}.actions .btn{margin:.1rem .2rem .1rem 0}
em{color:var(--muted);font-style:normal}

/* Mobil */
@media (max-width:720px){
	.wrap{margin:.8rem auto}
	.card{padding:.9rem}
	h1{font-size:1.25rem}
	.col-form,.col-list{flex:1 1 100%}
	.btn{padding:.55rem 1rem}
	.btn-small{padding:.4rem .7rem}
	.grid th,.grid td{font-size:.88em;padding:.45rem .5rem}
}

/* Náhledové okno (modal) */
.peekbox{display:none}
.modal{position:fixed;inset:0;background:var(--modal-ov);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:100}
.modal[hidden]{display:none}
.modal-box{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:12px;max-width:520px;width:100%;max-height:85vh;overflow:auto;padding:1.3rem 1.4rem;position:relative;box-shadow:0 10px 40px var(--shadow)}
.modal-close{position:absolute;top:.5rem;right:.7rem;border:0;background:none;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--muted)}
.modal-box h3{margin:.1rem 0 .8rem;padding-right:1.5rem}
.modal-box .kv{width:100%;border-collapse:collapse;margin-bottom:1rem}
.modal-box .kv th{text-align:left;color:var(--muted);font-weight:600;padding:.25rem .5rem .25rem 0;vertical-align:top;white-space:nowrap}
.modal-box .kv td{padding:.25rem 0}
a.peek,a.peekbtn,a.peek-emp{cursor:pointer;text-decoration:none;color:var(--link);border-bottom:1px dashed var(--link-dash)}

/* Přepínač zobrazení hesla */
.pw-field{position:relative}
.pw-field input{padding-right:5.2rem}
.pw-toggle{position:absolute;right:.4rem;top:2.0rem;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:6px;padding:.2rem .5rem;font-size:.8em;cursor:pointer}

/* Patička */
.sitefoot{margin-top:2rem;padding:1rem;border-top:1px solid var(--line);text-align:center;background:var(--surface)}
.sitefoot h2{font-size:.8rem;font-weight:400;line-height:1.7;color:var(--muted);margin:0}
.sitefoot a{color:var(--link);text-decoration:none}
.sitefoot a:hover{text-decoration:underline}

/* Rozbalovací "Nový…" formulář */
.addbox{margin-bottom:1.2rem}
.addbox>summary{display:inline-block;list-style:none;user-select:none}
.addbox>summary::-webkit-details-marker{display:none}
.addbox>summary::before{content:"";margin:0}
.addbox[open]>summary{margin-bottom:.2rem}

/* Filtry a hromadné akce */
.filterbar{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end}
.filterbar label{font-weight:600;font-size:.9em}
.filterbar select{margin-top:.2rem;padding:.5rem;border:1px solid var(--line);border-radius:7px;font:inherit;background:var(--input-bg);color:var(--text)}
.bulkbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.6rem 0}
.bulkbar select{padding:.45rem;border:1px solid var(--line);border-radius:7px;font:inherit;background:var(--input-bg);color:var(--text)}