/* YIELD-AF eCRF - minimalni sdilene styly, bez frameworku */
:root {
    --color-bg: #f4f6f8;
    --color-card: #ffffff;
    --color-border: #d9dee3;
    --color-text: #1f2933;
    --color-muted: #616e7c;
    --color-primary: #1c5f8a;
    --color-primary-dark: #144a6b;
    --color-error: #b3261e;
    --color-error-bg: #fdecea;
    --radius: 6px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.5;
}

.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 32px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.card h1 {
    font-size: 20px;
    margin: 0 0 4px;
}

.card .subtitle {
    color: var(--color-muted);
    font-size: 13px;
    margin: 0 0 24px;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    margin-top: 16px;
}

input[type=text], input[type=email], input[type=password] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 15px;
}

button, .btn {
    display: inline-block;
    margin-top: 24px;
    width: 100%;
    padding: 11px 16px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

button:hover, .btn:hover { background: var(--color-primary-dark); }

.error-box {
    background: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid #f5c6c3;
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

.hint {
    font-size: 12px;
    color: var(--color-muted);
    margin-top: 6px;
}

.secret-box {
    font-family: "SF Mono", Consolas, monospace;
    letter-spacing: 2px;
    background: #f0f2f5;
    border: 1px dashed var(--color-border);
    padding: 12px;
    border-radius: var(--radius);
    text-align: center;
    font-size: 16px;
    margin: 12px 0;
    word-break: break-all;
}

table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--color-card);
}
table.data-table th, table.data-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #eef0f3;
}
table.data-table th {
    background: #f8f9fb;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover { background: #f8fafc; }

/* Vizualni oddeleni skupiny formularu F10-F13 v hlavni tabulce patient.php
   od F00-F06 (zadani: "budou oddeleny carou, mozna mirne sede pozadi") -
   opravdovy <hr> nejde vlozit do <table>, takze se pouziva silnejsi horni
   okraj na prvnim radku skupiny a jemne sede pozadi na vsech radcich
   skupiny (viz forms/patient.php). */
table.data-table tr.form-group-start td { border-top: 2px solid var(--color-border); }
table.data-table tr.form-group-shaded td { background: #f4f6f8; }
table.data-table tr.form-group-shaded:hover td { background: #eceff2; }

/* Bílá zaoblená "karta" kolem tabulky (napr. public/index.php) - misto
   ostrych rohu a plneho mrizkovani pusobi tabulka modernejsim, klidnejsim
   dojmem (inspirace: konsignacni sklad na meditime.cz/new_warehouse). */
.table-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.table-card table.data-table { border: none; }

.empty-row { color: var(--color-muted); padding: 20px 14px !important; }

/* Odkaz pro razeni v hlavicce (viz sort_link() v public/index.php) - text
   dedi barvu hlavicky (tmava, ne modra jako obycejny <a>), ikona vedle
   nazvu je jemna sedá, u aktivne razeneho sloupce zbarvena primary barvou. */
a.sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
a.sort-link:hover { color: var(--color-primary); }
.sort-arrow { display: inline-flex; color: #c2c9d1; }
.sort-arrow.active { color: var(--color-primary); }
a.sort-link:hover .sort-arrow { color: var(--color-primary); }

/* Nenapadne tlacitko pro otevreni radku v hustych seznamech (napr.
   "Otevřít" v public/index.php) - misto holeho modreho odkazu. */
.btn-open {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.btn-open:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.badge-active { background: #e3f5e8; color: #1e7b3c; }
.badge-locked { background: #fdecea; color: #b3261e; }
.badge-disabled { background: #eceff1; color: #616e7c; }
/* Rozpracovanost=draft (napr. patient.php) - stejna cervena jako badge-locked,
   ale vlastni trida, aby nazev nemátl (nejde o zamek zaznamu). */
.badge-draft { background: #fdecea; color: #b3261e; }

/* Mensi tlacitko pro akcni sloupce v hustych tabulkach (napr. patient.php
   "Založit/Editovat formulář"), aby radky mohly byt tencí. */
.btn-sm {
    display: inline-block;
    width: auto;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 0;
}

/* Ikona zamku ve sloupci Stav (patient.php) misto textu "Zamčeno"/"Odemčeno"
   - cervena zamcena/zelena odemcena, nazev zustava jen v title tooltipu. */
.lock-badge { display: inline-flex; align-items: center; }
.lock-badge-locked { color: var(--color-error); }
.lock-badge-unlocked { color: #1e7b3c; }

/* Hustejsi varianta .data-table - mensi padding a pismo, pro tabulky s
   vice sloupci (napr. patient.php - Stav/Rozpracovanost/Založil/atd).
   Hlavicka (th) si drzi stejny font jako v public/index.php (viz
   table.data-table th vyse) - jen padding se zmensi spolu s telem tabulky. */
table.data-table-compact th, table.data-table-compact td {
    padding: 5px 8px;
}
table.data-table-compact td {
    font-size: 12.5px;
}

/* Filtrovaci lista nad seznamem (napr. public/index.php - Pracoviště/Stav) -
   oba filtry vedle sebe (flex-radek), kompaktni vyska, sladeno se stylem
   .table-card pod ni. */
.filter-bar {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 10px 16px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}
.filter-bar label {
    display: block;
    margin: 0 0 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-muted);
}
.filter-bar select {
    padding: 7px 30px 7px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    color: var(--color-text);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23616e7c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    min-width: 150px;
}
.filter-bar select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(28, 95, 138, 0.12);
}
.filter-bar .filter-clear {
    display: inline-block;
    padding: 7px 2px;
    font-size: 12.5px;
    color: var(--color-muted);
    text-decoration: none;
}
.filter-bar .filter-clear:hover { color: var(--color-primary); text-decoration: underline; }

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 14px 24px;
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
}
.top-bar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.top-bar-brand { font-weight: 700; color: var(--color-text); text-decoration: none; }
.top-bar-nav-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-muted);
    text-decoration: none;
    padding: 4px 9px;
    border-radius: 999px;
}
.top-bar-nav-link:hover { background: #eef1f4; }
.top-bar-nav-link.active { background: var(--color-primary); color: #fff; }
.top-bar-extra { font-size: 13px; color: var(--color-muted); }

.top-bar-right { display: flex; align-items: center; gap: 14px; }
.top-bar-user { font-size: 12px; color: var(--color-muted); white-space: nowrap; }

.top-bar-menu { position: relative; }
.top-bar-menu summary {
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: var(--radius);
    color: var(--color-text);
}
.top-bar-menu summary::-webkit-details-marker { display: none; }
.top-bar-menu summary::marker { content: ''; }
.top-bar-menu summary:hover, .top-bar-menu[open] summary { background: #eef1f4; }
.top-bar-menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 6px 0;
    min-width: 200px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    z-index: 30;
}
.top-bar-menu-list a { display: block; padding: 8px 14px; color: var(--color-text); text-decoration: none; font-size: 14px; }
.top-bar-menu-list a:hover { background: #f2f4f7; }

.container { max-width: 1000px; margin: 24px auto; padding: 0 24px; }

/* Sirsi varianta .container pro seznamy s vice sloupci (napr. public/index.php),
   aby se posledni sloupec (akce) nemuselo orezavat uvnitr .table-card. */
.container-wide { max-width: 1280px; }

/* Sdilene styly pro editacni formulare klinickych zaznamu (f00_edit.php,
   f01_edit.php, a stejnym vzorem i budouci F02-F13) - drive kazda stranka
   mela vlastni <style> blok a jinou sirku (F00 640px, F01 900px), coz
   pusobilo nesourode; ted obe sdili stejnou sirku a fieldsety maji bile
   pozadi (misto pruhledneho, kdy splyvaly se sedym pozadim stranky). */
.form-edit { max-width: 900px; }
.form-edit fieldset, fieldset.form-edit {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 16px;
    margin-top: 20px;
}
.form-edit legend, fieldset.form-edit legend { font-weight: 600; padding: 0 6px; }
.form-edit .radio-group label { display: inline-block; font-weight: 400; margin-right: 16px; margin-top: 0; }
.form-edit .radio-group { margin-top: 6px; }
.form-edit .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media (max-width: 640px) {
    .form-edit .grid2 { grid-template-columns: 1fr; }
}

/* --- Přihlašovací stránka (login.php) ------------------------------------
   Samostatný, o něco výraznější vzhled jen pro login (ikona + dvoubarevný
   název nad kartou, zaoblenější karta, jemně podbarvená pole) - záměrně
   oddělené třídy od obecné .auth-wrap/.card, aby se beze změny nechal
   zbytek přihlašovacího flow (2FA enrollment/ověření, změna hesla). */
.login-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(180deg, #e8f2fb 0%, #f6fafc 55%, #ffffff 100%);
}

.login-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e8f2fb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.login-brand {
    font-size: 30px;
    font-weight: 800;
    margin: 0;
    text-align: center;
    letter-spacing: -0.5px;
    color: var(--color-text);
}
.login-brand .accent { color: var(--color-primary); }

.login-subtitle {
    color: var(--color-muted);
    font-size: 14px;
    margin: 4px 0 28px;
    text-align: center;
}

.login-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px 32px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 10px 30px rgba(28, 95, 138, 0.10), 0 2px 8px rgba(28, 95, 138, 0.06);
}

.login-card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin: 18px 0 6px;
}
.login-card label:first-of-type { margin-top: 0; }

.login-card input[type=email],
.login-card input[type=password] {
    width: 100%;
    padding: 12px 14px;
    background: #f0f6fb;
    border: 1px solid #e8f2fb;
    border-radius: 10px;
    font-size: 15px;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.login-card input[type=email]:focus,
.login-card input[type=password]:focus {
    outline: none;
    background: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(28, 95, 138, 0.14);
}

.login-card button {
    display: block;
    margin-top: 26px;
    width: 100%;
    padding: 13px 16px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}
.login-card button:hover { background: var(--color-primary-dark); }

.login-card .hint {
    text-align: center;
    margin-top: 18px;
}

.login-back-link {
    display: block;
    margin-top: 22px;
    font-size: 13px;
    color: var(--color-muted);
    text-decoration: none;
    text-align: center;
}
.login-back-link:hover { color: var(--color-primary); text-decoration: underline; }