/* ==========================================================================
   Servisní systém – styly rozhraní
   ========================================================================== */

:root {
    --bg: #f4f6fa;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: #e3e8ef;
    --text: #1b2433;
    --muted: #697586;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-soft: #e8efff;

    --info: #2563eb;      --info-soft: #e8efff;
    --warning: #b45309;   --warning-soft: #fef3c7;
    --success: #15803d;   --success-soft: #dcfce7;
    --danger: #dc2626;    --danger-soft: #fee2e2;
    --neutral: #64748b;   --neutral-soft: #eef2f6;

    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 8%);
    --shadow-lg: 0 20px 40px rgb(16 24 40 / 18%);
    --sidebar-w: 248px;
    --btn-success: #16a34a;
    --btn-success-hover: #15803d;
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    color-scheme: light;
}

/* Tmavý režim – zapíná přepínač v menu (atribut data-theme na <html>) */
:root[data-theme="dark"] {
    --bg: #0f141c;
    --surface: #171d27;
    --surface-2: #1d2430;
    --border: #2a3342;
    --text: #e6eaf0;
    --muted: #8d99ab;
    --primary: #4f8bff;
    --primary-hover: #6b9dff;
    --primary-soft: #1c2b4a;
    --info: #6b9dff;      --info-soft: #1c2b4a;
    --warning: #f0b44c;   --warning-soft: #3a2e14;
    --success: #4ade80;   --success-soft: #133222;
    --danger: #f87171;    --danger-soft: #3b1a1a;
    --neutral: #94a3b8;   --neutral-soft: #232b38;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font: 14px/1.5 var(--font);
    color: var(--text);
    background: var(--bg);
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h2 { font-size: 15px; font-weight: 600; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.text-danger { color: var(--danger); font-weight: 600; }
.spacer { flex: 1; }

/* --- Layout -------------------------------------------------------------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-w);
    height: 100vh;
    padding: 18px 12px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    /* Celé menu se posouvá jako celek – uživatel a režim jsou až pod položkami, ne přilepené dole */
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sidebar > * { flex-shrink: 0; }

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 18px;
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}
.brand:hover { text-decoration: none; }
.brand--center { justify-content: center; padding-bottom: 4px; font-size: 18px; }
.brand__mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    color: #fff;
    font-weight: 800;
}

/* Menu vyplní volnou výšku, blok „Správa“ se tak přisune ke spodní hraně (nad režim a uživatele).
   Když se položky nevejdou (mobil, nízké okno), volné místo není a „Správa“ jen plynule následuje na konci. */
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1 0 auto; }
/* Blok „Správa“ – odsazený dolů a oddělený čarou od hlavních položek */
.nav__group { display: flex; flex-direction: column; gap: 2px; }
.nav__group--admin {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.nav__group--admin .nav__section { margin-top: 4px; }
.nav > .nav__link:last-of-type { margin-bottom: 32px; }
.nav__section {
    margin: 16px 10px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-weight: 500;
}
.nav__link:hover { background: var(--surface-2); text-decoration: none; }
.nav__link.is-active { background: var(--primary-soft); color: var(--primary); }
.nav__count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 20px 0 8px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--muted);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--text); }
.theme-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
.theme-toggle__dark, .theme-toggle__light { display: flex; align-items: center; gap: 10px; }
.theme-toggle__light,
:root[data-theme="dark"] .theme-toggle__dark { display: none; }
:root[data-theme="dark"] .theme-toggle__light { display: flex; }

.userbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 8px 0;
    border-top: 1px solid var(--border);
}
.userbox__meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.userbox__meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userbox__meta small { color: var(--muted); font-size: 12px; }

.avatar {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--avatar, var(--primary));
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}
.avatar--sm { width: 26px; height: 26px; font-size: 12px; margin-right: 8px; vertical-align: middle; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 5;
}
.topbar__title { font-size: 19px; font-weight: 650; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.topbar__title > span { min-width: 0; overflow-wrap: anywhere; }
.topbar__icon { width: 22px; height: 22px; flex: none; color: var(--primary); }
.topbar__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar__menu { flex: none; }
.sidebar__close, .sidebar-backdrop { display: none; }
@media (min-width: 801px) {
    :root[data-sidebar="hidden"] .sidebar { display: none; }
}

.content { padding: 24px 28px 48px; }

/* --- Komponenty ------------------------------------------------------------ */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
}
.card--flush { padding: 0; overflow: hidden; }
.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.card__header--padded { padding: 16px 20px 0; }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--main-side { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.grid--side-main { grid-template-columns: 360px minmax(0, 1fr); align-items: start; }
.stack { display: flex; flex-direction: column; gap: 20px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:disabled { opacity: .55; cursor: default; }
.btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-hover); }
.btn--success { background: var(--btn-success); border-color: var(--btn-success); color: #fff; }
.btn--success:hover { background: var(--btn-success-hover); }
.btn--danger { color: var(--danger); border-color: var(--danger); }
.btn--danger:not(.btn--ghost) { background: var(--danger); color: #fff; }
.btn--ghost { background: transparent; border-color: transparent; }
/* Výrazné, ale ne křiklavé tlačítko (opakované akce v seznamech) */
.btn--soft { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.btn--soft:hover { background: var(--primary); color: #fff; text-decoration: none; }
.btn__icon { width: 14px; height: 14px; flex: none; margin-right: 5px; }
.btn--sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn--block { width: 100%; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--neutral-soft);
    color: var(--neutral);
}
.badge--sm { padding: 0 7px; font-size: 11px; }
.badge--info { background: var(--info-soft); color: var(--info); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--muted { background: var(--neutral-soft); color: var(--neutral); }
.badge--outline { background: transparent; border: 1px solid currentColor; }

.dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dot, var(--neutral));
    margin-right: 6px;
    flex-shrink: 0;
}
.dot--info { --dot: var(--info); }
.dot--warning { --dot: var(--warning); }
.dot--success { --dot: var(--success); }
.dot--muted { --dot: var(--neutral); }

.alert {
    padding: 11px 14px;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-weight: 500;
}
.alert--success { background: var(--success-soft); color: var(--success); }
.alert--error { background: var(--danger-soft); color: var(--danger); }
.alert--info { background: var(--info-soft); color: var(--info); }
.alert--warning { background: var(--warning-soft); color: var(--warning); }

.empty { padding: 28px 20px; margin: 0; text-align: center; color: var(--muted); }

.link { font-size: 13px; font-weight: 500; }

/* --- Statistiky ------------------------------------------------------------ */

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--tone, var(--neutral));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--text);
}
.stat:hover { text-decoration: none; border-color: var(--tone); }
.stat__label { color: var(--muted); font-weight: 500; }
.stat__value { font-size: 28px; font-weight: 700; line-height: 1.1; }
.stat--info { --tone: var(--info); }
.stat--warning { --tone: var(--warning); }
.stat--success { --tone: var(--success); }
.stat--muted { --tone: var(--neutral); }

/* --- Seznamy --------------------------------------------------------------- */

.list { list-style: none; margin: 0; padding: 0; }
.list__item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
.list__item:first-child { border-top: 0; }
.list__item .dot { margin-top: 6px; }
.list__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.list--notifications .list__item { padding: 0; }
.list--notifications .list__item.is-unread { background: var(--primary-soft); }
.notification { width: 100%; }
.notification__btn {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 14px 20px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.notification__btn:hover { background: var(--surface-2); }
.is-unread .notification__btn strong::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--primary);
    vertical-align: middle;
}

.details { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; }
.details dt { color: var(--muted); }
.details dd { margin: 0; display: flex; align-items: center; }

/* --- Taby, filtry, stránkování ---------------------------------------------- */

.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}
.tabs__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 9px 14px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
}
.tabs__item:hover { color: var(--text); text-decoration: none; }
.tabs__item.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.tabs__count {
    padding: 0 7px;
    border-radius: 10px;
    background: var(--neutral-soft);
    font-size: 12px;
    color: var(--muted);
}

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.toolbar__search { flex: 1 1 280px; }

.pagination { display: flex; align-items: center; gap: 4px; margin-top: 16px; flex-wrap: wrap; }
.pagination .muted { margin-right: auto; }
.pagination__item {
    min-width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}
.pagination__item.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* --- Tabulky --------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 11px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
.table th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    background: var(--surface-2);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table__row-link { cursor: pointer; }
.table__row-link:hover td { background: var(--surface-2); }
.table__actions { text-align: right; white-space: nowrap; }
.table__actions form { display: inline; }
.table tr.is-inactive td { opacity: .55; }

/* --- Formuláře ------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: 14px; }
.form--narrow { max-width: 760px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.form__actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 6px; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-weight: 500; font-size: 13px; }
.field--check { flex-direction: row; align-items: center; gap: 8px; align-self: end; height: 38px; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"],
input[type="date"], input[type="datetime-local"], select, textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}
.toolbar select, .inline-field select { width: auto; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--primary-soft);
    border-color: var(--primary);
}
input[type="color"] { width: 64px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }

.fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 16px; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.fieldset legend { padding: 0 6px; font-weight: 600; }

.inline-field { display: flex; align-items: center; gap: 8px; }

.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.segmented label { flex: 1; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 8px 14px; text-align: center; cursor: pointer; font-weight: 500; }
.segmented label + label span { border-left: 1px solid var(--border); }
.segmented input:checked + span { background: var(--primary); color: #fff; }
.segmented input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: -2px; }

.role-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.role-picker__item { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.role-picker__item:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.role-picker__item span { display: flex; flex-direction: column; gap: 2px; }

/* --- Ticket ------------------------------------------------------------------ */

.ticket-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.prose { white-space: normal; line-height: 1.65; }
.status-switch { display: flex; flex-direction: column; gap: 6px; }
.status-switch__btn { justify-content: flex-start; }
.status-switch__btn.is-active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); opacity: 1; }

/* --- Správa ---------------------------------------------------------------- */

.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.tile { color: var(--text); display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, transform .15s; }
.tile:hover { text-decoration: none; border-color: var(--primary); transform: translateY(-1px); }
.tile p { margin: 0; }
.tile__stats { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); }
.tile__stats li { display: flex; justify-content: space-between; padding: 3px 0; }
.tile__stats li span { display: flex; align-items: center; }

/* --- Kalendář -------------------------------------------------------------- */

.calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.calendar-card { padding: 16px; }
.calendar-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 12px; font-size: 13px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { display: inline-block; width: 18px; height: 12px; border-radius: 3px; border: 2px solid var(--primary); }
.legend-swatch--onsite { background: var(--primary); }
.legend-swatch--remote { background: transparent; border-style: dashed; }

.occupancy { position: sticky; top: 84px; }
.occupancy__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.occupancy__table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 0 0 8px; }
.occupancy__table td { padding: 8px 0; border-top: 1px solid var(--border); vertical-align: top; }
.occupancy__table .num { text-align: right; white-space: nowrap; padding-left: 8px; }
.occupancy__name { display: flex; align-items: center; color: var(--text); font-weight: 500; }
.meter { height: 6px; margin-top: 6px; border-radius: 3px; background: var(--neutral-soft); overflow: hidden; }
.meter__bar { display: block; height: 100%; width: var(--value); background: var(--dot, var(--primary)); transition: width .3s; }
.meter__bar.is-over { background: var(--danger); }

/* FullCalendar – sladění s tématem */
.fc {
    --fc-border-color: var(--border);
    --fc-page-bg-color: var(--surface);
    --fc-neutral-bg-color: var(--surface-2);
    --fc-today-bg-color: var(--primary-soft);
    --fc-button-bg-color: var(--surface);
    --fc-button-border-color: var(--border);
    --fc-button-text-color: var(--text);
    --fc-button-hover-bg-color: var(--surface-2);
    --fc-button-hover-border-color: var(--border);
    --fc-button-active-bg-color: var(--primary);
    --fc-button-active-border-color: var(--primary);
    --fc-now-indicator-color: var(--danger);
    --fc-non-business-color: rgb(127 127 127 / 15%);
    font-size: 13px;
}
.fc .fc-toolbar-title { font-size: 18px; font-weight: 650; text-transform: capitalize; }
.fc .fc-button { font-weight: 500; text-transform: capitalize; box-shadow: none !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; }
/* Přepínače Víkend / Mimo prac. dobu: tečka = ve skryté části jsou servisy */
.fc .fc-weekends-button, .fc .fc-offHours-button { text-transform: none; position: relative; }
.fc .fc-button.has-hidden::after {
    content: ''; position: absolute; top: 3px; right: 3px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--warning);
}
.fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number { color: var(--text); }
.fc-event { cursor: pointer; border-width: 2px; }
.fc-event.event--vzdalene { border-style: dashed; background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgb(127 127 127 / 10%) 6px 12px); }
.fc-event-tech { font-size: 11px; opacity: .9; }
.fc .fc-multimonth-daygrid { background: var(--surface); }

.appointment-detail .details { margin: 0; }

/* --- Dialog a toast ---------------------------------------------------------- */

.dialog {
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.dialog::backdrop { background: rgb(15 20 28 / 50%); backdrop-filter: blur(2px); }
.dialog .form { padding: 20px 22px; }
.dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog__header h2 { font-size: 17px; }
.dialog__footer { display: flex; align-items: center; gap: 8px; padding-top: 6px; }

.toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 100;
    padding: 12px 18px;
    border-radius: var(--radius);
    background: var(--text);
    color: var(--surface);
    box-shadow: var(--shadow-lg);
    animation: toast-in .2s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* --- Přihlášení a chyby ------------------------------------------------------- */

.guest { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.guest__wrap { width: 100%; max-width: 400px; }
.login { padding: 32px 28px; }
.login .form { margin-top: 22px; }

.error-page { text-align: center; padding: 40px; max-width: 760px; margin: 40px auto; }
.error-page__code { font-size: 56px; font-weight: 800; color: var(--muted); line-height: 1; margin-bottom: 8px; }
.error-page__trace { text-align: left; margin-top: 24px; padding: 14px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 12px; overflow-x: auto; }

/* --- Responzivita -------------------------------------------------------------- */

@media (max-width: 1100px) {
    .calendar-layout, .grid--main-side, .grid--side-main { grid-template-columns: 1fr; }
    .occupancy { position: static; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
    .sidebar {
        position: fixed;
        z-index: 20;
        left: 0;
        transform: translateX(-100%);
        transition: transform .2s;
        box-shadow: var(--shadow-lg);
    }
    .sidebar-open .sidebar { transform: none; }
    .sidebar__close {
        display: grid; place-items: center;
        position: absolute; top: 12px; right: 10px;
        width: 34px; height: 34px;
        border: 0; border-radius: 8px; background: transparent;
        color: var(--muted); font-size: 18px; cursor: pointer;
    }
    .sidebar__close:hover { background: var(--surface-2); color: inherit; }
    .sidebar .brand { padding-right: 44px; }
    .sidebar-open .sidebar-backdrop {
        display: block; position: fixed; inset: 0; z-index: 19;
        background: rgba(15, 23, 42, .45);
    }
    .topbar { padding: 10px 16px; flex-wrap: wrap; }
    .content { padding: 16px; }
    .grid--2, .role-picker { grid-template-columns: 1fr; }
    .fc .fc-toolbar { flex-direction: column; gap: 8px; }
    /* Šipky a „Dnes“ až pod přepínač Den / Týden / Měsíc / Rok */
    .fc .fc-toolbar > .fc-toolbar-chunk:first-child { order: 3; }
}

/* --- Nadcházející servisy (přehled) ------------------------------------------- */

.upcoming .list__body { flex: 1; }
.upcoming__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.upcoming__when { font-weight: 600; white-space: nowrap; }
.upcoming__line a { font-weight: 600; }
.upcoming__note {
    margin: 4px 0 0;
    padding: 6px 10px;
    border-left: 3px solid var(--border);
    background: var(--surface-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 13px;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* --- Seznam ticketů: souhrn servisů ------------------------------------------- */

.table th.num, .table td.num { text-align: right; }
.table th small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.stat-pair { display: inline-flex; gap: 4px; font-variant-numeric: tabular-nums; }
.stat-pair__done { color: var(--success); font-weight: 600; }

/* --- Živé hledání ticketů ------------------------------------------------------- */

.toolbar__search { position: relative; display: flex; align-items: center; }
.toolbar__search input { padding-left: 36px; padding-right: 36px; }
.toolbar__search-icon { position: absolute; left: 11px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.toolbar__spinner {
    position: absolute;
    right: 12px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.toolbar__spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.results-info { margin: 0 0 8px; font-size: 13px; }
.table-wrap[hidden] { display: none; }

/* --- Ticket: číslo, adresa servisu, přílohy --------------------------------------- */

.form-page { display: flex; flex-direction: column; gap: 20px; }
.form__ticket-number {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.form__ticket-number strong { font-size: 20px; letter-spacing: .02em; }
.field small { font-size: 12px; }
input[type="file"] { font: inherit; color: var(--text); }

.service-address { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }

.attachments { list-style: none; margin: 0; padding: 0; }
.attachments__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}
.attachments__item:first-child { border-top: 0; }
.attachments__item form { display: inline; }
.attachments__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
    overflow: hidden;
}
.attachments__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.attachments__body a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }

.upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

/* --- Přehled techniků --------------------------------------------------------------- */

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.btn.is-active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); position: relative; }

.overview-range { margin: 0 0 12px; font-weight: 500; }

.tech-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; }
.tech-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; color: var(--text); }
.tech-card:hover { text-decoration: none; border-color: var(--primary); }
.tech-card__head { display: flex; align-items: center; gap: 10px; }
.tech-card__value { font-size: 24px; font-weight: 700; line-height: 1.1; }

.overview { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 100%; }
.overview th, .overview td { border-bottom: 1px solid var(--border); padding: 0; }
.overview__name {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 170px;
    padding: 8px 12px !important;
    background: var(--surface);
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    border-right: 1px solid var(--border);
}
.overview__name a { color: var(--text); display: inline-flex; align-items: center; }
.overview__day { min-width: 38px; padding: 6px 2px !important; text-align: center; font-weight: 600; background: var(--surface-2); }
.overview__day small { display: block; color: var(--muted); font-weight: 500; }
.overview__day.is-today { color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); }
.overview .is-monday { border-left: 2px solid var(--border); }
.overview__cell { text-align: center; }
.overview__cell a {
    display: grid;
    place-items: center;
    height: 36px;
    color: var(--text);
    font-weight: 600;
    background: color-mix(in srgb, var(--dot) calc(var(--load) * 55%), transparent);
}
.overview__cell a:hover { text-decoration: none; outline: 2px solid var(--primary); outline-offset: -2px; }
.overview .is-closed { background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--neutral-soft) 4px 8px); }
.overview__cell.is-today { box-shadow: inset 2px 0 0 var(--primary-soft), inset -2px 0 0 var(--primary-soft); }
.overview__cell.is-over a { color: var(--danger); }
.overview__cell.is-absent a { background: none; color: #fff; }
.is-absent--dovolena, .overview__cell.is-absent--dovolena { background: #0ea5e9; }
.is-absent--nemoc, .overview__cell.is-absent--nemoc { background: #e11d48; }
.is-absent--jine, .overview__cell.is-absent--jine { background: #8b5cf6; }

.overview-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; align-items: center; }
.overview-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-cell { display: inline-block; width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--border); }
.legend-cell--load { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 55%, transparent)); }
.legend-cell.is-closed { background: repeating-linear-gradient(135deg, var(--surface-2) 0 3px, var(--neutral-soft) 3px 6px); }

/* --- Firemní kalendář a absence --------------------------------------------------- */

.hours-table { border-collapse: collapse; }
.hours-table th, .hours-table td { padding: 4px 6px 4px 0; text-align: left; font-weight: 500; }
.hours-table th { min-width: 120px; }
.hours-table .field--check { height: auto; }
input[type="time"] {
    min-height: 34px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}
.holiday-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 20px 0;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--success-soft);
}
.holiday-hint div { display: flex; flex-direction: column; gap: 2px; }
.card__header--padded { flex-wrap: wrap; }

/* --- Kalendář: svátky, zavřeno a absence -------------------------------------------- */

.legend-swatch--absence { border-color: #0ea5e9; background: repeating-linear-gradient(135deg, #0ea5e9 0 3px, transparent 3px 6px); }
.legend-swatch--closed { border-color: var(--neutral); background: var(--neutral-soft); }
.fc .bg-closure { background: repeating-linear-gradient(135deg, rgb(100 116 139 / 16%) 0 6px, rgb(100 116 139 / 8%) 6px 12px); opacity: 1; }
.fc .bg-closure .fc-event-title { color: var(--muted); font-style: normal; font-weight: 600; font-size: 11px; margin: 2px 4px; }
.fc .fc-bg-event.bg-absence { opacity: 1; background: repeating-linear-gradient(135deg, rgb(14 165 233 / 22%) 0 6px, rgb(14 165 233 / 8%) 6px 12px); }
.fc .fc-bg-event.bg-absence--nemoc { background: repeating-linear-gradient(135deg, rgb(225 29 72 / 22%) 0 6px, rgb(225 29 72 / 8%) 6px 12px); }
.fc .fc-bg-event.bg-absence--jine { background: repeating-linear-gradient(135deg, rgb(139 92 246 / 22%) 0 6px, rgb(139 92 246 / 8%) 6px 12px); }
.fc .fc-bg-event.bg-absence .fc-event-title { color: var(--text); font-style: normal; font-weight: 600; font-size: 11px; margin: 2px 4px; }
.fc-event.bg-absence:not(.fc-bg-event) { cursor: default; border-style: dashed; font-weight: 600; }

/* --- Party techniků ---------------------------------------------------------------- */

.crew { display: inline-flex; flex-shrink: 0; padding-left: 6px; }
.crew__member {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-left: -6px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--avatar, var(--primary));
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.list__item > .crew { margin-top: 1px; }
.crew--event .crew__member { width: 16px; height: 16px; font-size: 8px; border-width: 1px; border-color: rgb(255 255 255 / 70%); margin-left: -4px; }
.crew--event { padding-left: 4px; vertical-align: middle; }
.fc-crew-line { display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; padding: 0 2px; }
.fc-crew-line .fc-event-title { overflow: hidden; text-overflow: ellipsis; }
.fc-event.event--crew { border-width: 2px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%); }

.crew-picker { border: 0; padding: 0; margin: 0; }
.crew-picker legend { font-weight: 500; font-size: 13px; padding: 0; margin-bottom: 6px; }
.crew-picker__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; max-height: 180px; overflow-y: auto; }
.crew-picker__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.crew-picker__item .avatar--sm { margin-right: 0; }
.crew-picker__item:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.crew-picker__hint { display: block; margin-top: 6px; color: var(--muted); }
.crew-picker__hint.is-crew { color: var(--success); font-weight: 600; }

/* --- Profilové fotky a skilly --------------------------------------------------------- */

.avatar { position: relative; }   /* bez overflow: hidden – bublinka s úrovní přesahuje okraj */
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.avatar--photo { background: var(--surface-2); }
.avatar--xs { width: 20px; height: 20px; font-size: 10px; margin-right: 6px; vertical-align: middle; }
.avatar--lg { width: 64px; height: 64px; font-size: 26px; }
.avatar--xl { width: 128px; height: 128px; font-size: 48px; }
.crew__member { overflow: hidden; }
.crew__member img { width: 100%; height: 100%; object-fit: cover; display: block; }

.userbox__profile { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--text); border-radius: var(--radius-sm); padding: 2px; }
.userbox__profile:hover, .userbox__profile.is-active { background: var(--surface-2); text-decoration: none; }

.user-cell { display: inline-flex; align-items: center; }

.skills { display: flex; flex-wrap: wrap; gap: 6px; }
.skills--compact { gap: 4px; }
.skill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.skills--compact .skill { padding: 1px 7px; font-size: 11px; }

.skill-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-picker__item { cursor: pointer; }
.skill-picker__item input { position: absolute; opacity: 0; pointer-events: none; }
.skill-picker__item span {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-weight: 500;
}
.skill-picker__item input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.skill-picker__item input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

.skill-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.skill-edit input[type="text"] { width: auto; flex: 1 1 200px; }
.holders { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.holders a { display: inline-flex; align-items: center; color: var(--text); }

.crew-picker__name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.crew-picker__name small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar-field { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.avatar-field__controls { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

.tabs--section { margin-bottom: 20px; }
.tabs--section .tabs__item { font-size: 15px; font-weight: 600; }

.profile-page { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.profile-card { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.profile-card__body { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.profile-card__body h2 { font-size: 20px; }
.profile-card__body p { margin: 0; }
.avatar-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tech-card .skills { margin-top: -2px; }

/* --- Potvrzení provedení servisu ------------------------------------------------------ */

.visit { align-items: center; }
.visit .list__body { flex: 1; }
.visit__action { flex-shrink: 0; }
.visit--pending { background: linear-gradient(90deg, var(--danger-soft), transparent 60%); border-radius: var(--radius-sm); padding-left: 6px; }
.fc-event.event--pending { box-shadow: inset 4px 0 0 var(--danger); }

.upcoming .list__item { align-items: flex-start; }
.upcoming__action { flex-shrink: 0; margin-left: auto; }

/* --- Přílohy: miniatury, ikony souborů, prohlížeč obrázků ------------------------------ */

.attachment-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.attachment {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    min-width: 0;
}
.attachment__preview {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: var(--surface-2);
    overflow: hidden;
}
.attachment__preview img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.attachment__preview:hover img { transform: scale(1.04); }
.attachment__zoom {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgb(15 20 28 / 60%);
    color: #fff;
    opacity: 0;
    transition: opacity .15s;
}
.attachment__zoom svg { width: 16px; height: 16px; }
.attachment__preview:hover .attachment__zoom, .attachment__preview:focus-visible .attachment__zoom { opacity: 1; }
.attachment__preview--icon:hover { background: var(--primary-soft); text-decoration: none; }
.attachment__meta { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 6px; min-width: 0; }
.attachment__name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.attachment__meta small { font-size: 11px; }
.attachment__actions { display: flex; gap: 2px; margin: 4px -6px 0; }
.attachment__actions form { display: inline; }

.file-icon { position: relative; display: inline-block; width: 56px; height: 68px; --tone: #64748b; }
.file-icon svg { width: 100%; height: 100%; display: block; }
.file-icon__page { fill: var(--surface); stroke: var(--tone); stroke-width: 2; }
.file-icon__fold { fill: none; stroke: var(--tone); stroke-width: 2; }
.file-icon__label {
    position: absolute;
    left: -6px;
    right: 6px;
    bottom: 12px;
    padding: 2px 4px;
    border-radius: 4px;
    background: var(--tone);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-align: center;
}
.file-icon--pdf { --tone: #dc2626; }
.file-icon--word { --tone: #2563eb; }
.file-icon--excel { --tone: #16a34a; }
.file-icon--powerpoint { --tone: #ea580c; }
.file-icon--archive { --tone: #a16207; }
.file-icon--cad { --tone: #7c3aed; }
.file-icon--text { --tone: #475569; }
.file-icon--image { --tone: #0891b2; }

.lightbox {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(10 12 16 / 92%);
    color: #fff;
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox__bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgb(0 0 0 / 35%); }
.lightbox__title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox__count { color: rgb(255 255 255 / 70%); }
.lightbox .btn { background: rgb(255 255 255 / 12%); border-color: transparent; color: #fff; }
.lightbox .btn:hover { background: rgb(255 255 255 / 22%); }
.lightbox__stage { position: relative; flex: 1; display: grid; place-items: center; padding: 16px 64px; min-height: 0; }
.lightbox__img { max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; opacity: 0; transition: opacity .2s; border-radius: 4px; box-shadow: 0 20px 60px rgb(0 0 0 / 50%); }
.lightbox__img.is-loaded { opacity: 1; }
.lightbox__loading { position: absolute; color: rgb(255 255 255 / 70%); }
.lightbox__loading[hidden] { display: none; }
.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 14%);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}
.lightbox__nav:hover { background: rgb(255 255 255 / 28%); }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
.lightbox__nav[hidden] { display: none; }
@media (max-width: 800px) {
    .lightbox__stage { padding: 8px; }
    .lightbox__bar .btn[data-lb-open] { display: none; }
}

/* --- Vedoucí, který jezdí jako technik --- */
.technician-toggle { align-items: flex-start; gap: 10px; padding: 12px; border: 1px dashed var(--border); border-radius: var(--radius); height: auto; }
.technician-toggle[hidden] { display: none; }
.technician-toggle input[type="checkbox"] { margin-top: 3px; }
.technician-toggle span { display: flex; flex-direction: column; gap: 2px; }

/* --- Ticket: interní poznámka, požadované skilly, soubory ze servisu --- */
.field--internal textarea { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); }
.internal-note { border-left: 4px solid var(--warning); }
.internal-note .card__header { justify-content: flex-start; }
.ticket-skills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.service-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.service-upload form { display: inline; }
.service-upload label.btn { cursor: pointer; }

/* --- Kalendář: shoda skillů technika s ticketem --- */
.crew-picker__skills { display: block; margin-top: 4px; color: var(--muted); }

/* --- Diskuze k ticketu ----------------------------------------------------------------- */

.comment-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.comment { display: flex; gap: 10px; align-items: flex-start; scroll-margin-top: 90px; }
.comment__avatar { width: 34px; height: 34px; flex-shrink: 0; }
.comment__bubble {
    flex: 1;
    min-width: 0;
    padding: 10px 14px 12px;
    border: 1px solid var(--border);
    border-radius: 4px var(--radius) var(--radius) var(--radius);
    background: var(--surface-2);
}
.comment--mine .comment__bubble { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); }
.comment:target .comment__bubble { box-shadow: 0 0 0 2px var(--primary); }
.comment__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.comment__head time { font-size: 12px; }
.comment__head form { margin-left: auto; }
.comment__delete { opacity: 0; transition: opacity .15s; }
.comment:hover .comment__delete, .comment__delete:focus-visible { opacity: 1; }
.comment__body { line-height: 1.55; overflow-wrap: anywhere; }
.comment__files { margin-top: 10px; }
.attachment-grid--compact { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.attachment-grid--compact .attachment__actions .btn { padding: 0 6px; font-size: 12px; }

.comment-form { display: flex; gap: 10px; align-items: flex-start; padding-top: 14px; border-top: 1px solid var(--border); }
.comment-form__body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.comment-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.comment-form__actions label.btn { cursor: pointer; }
.comment-form__actions [data-comment-files-label] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
@media (max-width: 800px) { .comment-form__hint { display: none; } .comment__delete { opacity: 1; } }

/* --- Přehled: proběhlé servisy --- */
.dashboard-notifications { margin-top: 20px; }
.upcoming .list__body small + small { display: block; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.btn.is-disabled { opacity: .45; cursor: default; pointer-events: none; }
[data-done-list] { transition: opacity .15s; }
[data-done-list].is-loading { opacity: .5; }

/* --- Menu: Moje servisy --- */
.nav__link--primary { font-weight: 700; }
.nav__link--primary:not(.is-active) { background: var(--success-soft); color: var(--success); }
.nav__count--info { background: var(--success); }

/* --- Moje servisy (technik na cestě) ------------------------------------------------------ */

.my-services { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.my-services__pending { border-top: 4px solid var(--danger); }
.my-services__pending > .muted { margin: 0 0 10px; }
.agenda-item--link { cursor: pointer; }
.agenda-item--link:hover { background: var(--surface-2); }

.visit-page { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.visit-hero { border-top: 4px solid var(--warning); display: flex; flex-direction: column; gap: 10px; }
.visit-hero--pending { border-top-color: var(--danger); }
.visit-hero--dokonceno, .visit-hero--dalsi_servis { border-top-color: var(--success); }
.visit-hero--zruseno_zakaznikem, .visit-hero--nezastizen { border-top-color: var(--neutral); }
.visit-hero__when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.visit-hero__when strong { font-size: 18px; }
.visit-hero__title { font-size: 20px; }
.visit-hero__crew { display: flex; align-items: center; gap: 8px; }
.visit-hero__customer { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); line-height: 1.6; }
.visit-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.visit-hero__actions .btn { height: 44px; padding: 0 18px; font-size: 15px; }

.outcome-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.outcome-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}
.outcome-option input { position: absolute; opacity: 0; pointer-events: none; }
.outcome-option__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 800;
    background: var(--tone-soft, var(--neutral-soft));
    color: var(--tone, var(--neutral));
}
.outcome-option__text { display: flex; flex-direction: column; gap: 2px; }
.outcome-option__text small { color: var(--muted); }
.outcome-option--dokonceno { --tone: var(--success); --tone-soft: var(--success-soft); }
.outcome-option--dalsi_servis { --tone: var(--info); --tone-soft: var(--info-soft); }
.outcome-option--zruseno_zakaznikem { --tone: var(--neutral); --tone-soft: var(--neutral-soft); }
.outcome-option--nezastizen { --tone: var(--danger); --tone-soft: var(--danger-soft); }
.outcome-option:has(input:checked) { border-color: var(--tone); background: var(--tone-soft); }
.outcome-option:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.outcome-option.is-disabled { opacity: .45; cursor: not-allowed; }
.outcome-form { display: flex; flex-direction: column; gap: 12px; }

.outcome-result { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radius); background: var(--surface-2); margin-bottom: 10px; }
.outcome-result div { display: flex; flex-direction: column; gap: 2px; }
.outcome-result p { margin: 6px 0 0; }
.outcome-result__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; font-weight: 800; background: var(--success-soft); color: var(--success); flex-shrink: 0; }
.outcome-result--zruseno_zakaznikem .outcome-result__icon { background: var(--neutral-soft); color: var(--neutral); }
.outcome-result--nezastizen .outcome-result__icon { background: var(--danger-soft); color: var(--danger); }
.outcome-result--dalsi_servis .outcome-result__icon { background: var(--info-soft); color: var(--info); }
.upcoming__note--outcome { border-left-color: var(--success); }
.visit__action { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.visit--zruseno_zakaznikem, .visit--nezastizen { opacity: .8; }
.fc-event.event--dokonceno, .fc-event.event--dalsi_servis { opacity: .7; }
.fc-event.event--zruseno_zakaznikem, .fc-event.event--nezastizen { opacity: .45; text-decoration: line-through; }

@media (max-width: 800px) {
    .outcome-options { grid-template-columns: 1fr; }
    .visit-hero__actions .btn { flex: 1 1 140px; }
}

/* --- Materiál a poznámky k servisu --- */
.table--compact th, .table--compact td { padding: 7px 10px; }
.material-form {
    display: grid;
    grid-template-columns: minmax(0, 3fr) 90px 90px minmax(0, 2fr) auto;
    gap: 8px;
    align-items: end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}
.visit-notes { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.visit-note-item { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 3px solid var(--primary); scroll-margin-top: 90px; }
.visit-note-item:target { box-shadow: 0 0 0 2px var(--primary); }
.visit-note-item__head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.visit-note-item__head form { margin-left: auto; }
.visit-note-item__body { line-height: 1.55; overflow-wrap: anywhere; }
.visit-note-form { display: flex; flex-direction: column; gap: 8px; }
.visit__notes { margin-top: 6px; }
.visit__notes summary { cursor: pointer; color: var(--primary); font-weight: 500; }
.visit__note { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid var(--border); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 13px; }
.materials-detail { margin-top: 10px; }
.materials-detail summary { cursor: pointer; }
@media (max-width: 800px) {
    .material-form { grid-template-columns: 1fr 1fr; }
    .material-form__name, .material-form__note { grid-column: 1 / -1; }
    .material-form .btn { grid-column: 1 / -1; height: 44px; }
}

/* --- Předávací protokol a šablony --- */
.steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.steps li { flex: 1; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 13px; text-align: center; }
.steps li.is-active { background: var(--primary); color: #fff; }
.steps li.is-done { background: var(--success-soft); color: var(--success); }
.protocol-meta { padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.doc-preview { overflow-x: auto; padding: 6px 2px 10px; }
.doc-preview .doc-a4 { min-height: auto; }
.signature-card { border-top: 4px solid var(--success); }
.signature-pad { position: relative; height: 220px; border: 2px dashed var(--border); border-radius: var(--radius); background: #fff; }
.signature-pad canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; border-radius: var(--radius); }
.signature-pad__hint { position: absolute; inset: auto 0 14px; text-align: center; color: #9ca3af; pointer-events: none; }
.signature-pad__hint[hidden] { display: none; }
.signature-pad::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 44px; border-bottom: 1px solid #d1d5db; pointer-events: none; }

.template-editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.code-input { font: 12.5px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; tab-size: 4; }
.placeholder-help { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow-y: auto; }
.placeholder-help h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 0 6px; }
.placeholder-help ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.placeholder-chip { border: 1px solid var(--border); background: var(--surface-2); border-radius: 4px; padding: 1px 6px; cursor: pointer; color: var(--primary); }
.placeholder-chip:hover { border-color: var(--primary); }
@media (max-width: 1100px) { .template-editor { grid-template-columns: 1fr; } .placeholder-help { position: static; max-height: none; } }

.enable-technician { max-width: 640px; display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--success); }
.enable-technician p { margin: 0; }

/* --- Předávací protokol mezi přílohami a na přehledu --- */
.file-icon--protocol { --tone: #15803d; }
.attachment--protocol { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.attachment--protocol .attachment__preview { background: var(--success-soft); }
.upcoming__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* --- Log aktivit ------------------------------------------------------------------------ */
.log-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 16px; margin-bottom: 12px; }
.log-filters .toolbar__search { flex: 1 1 260px; }
.log-filters select, .log-filters input[type="date"] { width: auto; }
.log-filters__ticket { width: 130px !important; }
.log { display: flex; flex-direction: column; gap: 12px; }
.log-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.log-group__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.log-group__avatar { width: 36px; height: 36px; }
.log-group__who { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.log-entries { list-style: none; margin: 0; padding: 4px 0; }
.log-entry { display: grid; grid-template-columns: 44px 26px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 14px; }
.log-entry + .log-entry { border-top: 1px dashed var(--border); }
.log-entry__time { font-size: 12px; padding-top: 2px; font-variant-numeric: tabular-nums; }
.log-entry__icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    background: var(--neutral-soft);
    color: var(--neutral);
}
.log-entry--created .log-entry__icon { background: var(--success-soft); color: var(--success); }
.log-entry--updated .log-entry__icon { background: var(--info-soft); color: var(--info); }
.log-entry--deleted .log-entry__icon { background: var(--danger-soft); color: var(--danger); }
.log-entry__body { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.log-entry__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* --- Přehled: budoucí servisy jako agenda (osa dnů, týdny, měsíce) ----------------------- */
.agenda { display: flex; flex-direction: column; gap: 16px; }
.agenda-group__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.agenda-group__head h3 { font-size: 14px; margin: 0; }
.agenda-group--today .agenda-group__head { background: var(--primary); color: #fff; }
.agenda-group--today .agenda-group__head .muted { color: rgb(255 255 255 / 85%); }
.agenda-group--tomorrow .agenda-group__head { background: var(--primary-soft); color: var(--primary); }

/* Den: vlevo osa (den v týdnu + číslo), vpravo servisy */
.agenda-day { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; position: relative; }
.agenda-day + .agenda-day { border-top: 1px dashed var(--border); }
.agenda-day__axis {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    border-right: 3px solid var(--border);
    line-height: 1.1;
}
.agenda-day__axis span { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--muted); }
.agenda-day__axis strong { font-size: 18px; }
.agenda-day.is-weekend .agenda-day__axis { background: var(--neutral-soft); border-right-color: var(--neutral); }
.agenda-day.is-weekend .agenda-day__axis span { color: var(--danger); }
.agenda-day.is-today .agenda-day__axis { border-right-color: var(--primary); color: var(--primary); }
.agenda-day__items { min-width: 0; }
.agenda-day__items .list__item:first-child { border-top: 0; }

/* Předěl týdne – silná čára se štítkem */
.agenda-week {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 2px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
.agenda-week::after { content: ""; flex: 1; border-top: 3px solid var(--primary-soft); }
.agenda-week span { padding: 2px 8px; border-radius: 999px; background: var(--primary-soft); white-space: nowrap; }

/* Předěl měsíce – výrazný pruh s názvem */
.agenda-month {
    margin: 16px 0 4px;
    padding: 6px 12px;
    border-left: 5px solid var(--warning);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: linear-gradient(90deg, var(--warning-soft), transparent);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.agenda-group--later .agenda-month:first-of-type { margin-top: 4px; }
.agenda-more { margin: 12px 0 0; }

/* --- Zákazníci --- */
.ticket-count { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.ticket-count:hover { text-decoration: none; color: var(--primary); }
.customer-danger { margin-top: 16px; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 6px 8px 6px 12px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
}
.filter-chip a { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--primary); }
.filter-chip a:hover { background: var(--surface); text-decoration: none; }

/* --- Menu: Můj kalendář (modře) --- */
/* Levandulově fialová */
:root { --lavender: #6d4fc2; --lavender-soft: #ede7fb; --lavender-strong: #8b6fd6; }
:root[data-theme="dark"] { --lavender: #c4b5fd; --lavender-soft: #2e2648; --lavender-strong: #7c5cd6; }
.nav__link--calendar { font-weight: 600; }
.nav__link--calendar:not(.is-active) { background: var(--lavender-soft); color: var(--lavender); }
.nav__link--calendar:not(.is-active):hover { background: color-mix(in srgb, var(--lavender-soft) 70%, var(--lavender-strong)); }
.nav__link--calendar.is-active { background: var(--lavender-strong); color: #fff; }
.nav__link--primary + .nav__link--calendar { margin-top: 2px; }

/* --- Menu: ikony --- */
.nav__link { justify-content: flex-start; gap: 10px; }
.nav__icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.nav__link.is-active .nav__icon, .nav__link--primary .nav__icon, .nav__link--calendar .nav__icon { opacity: 1; }
.nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__count { margin-left: auto; }

/* --- Logo firmy --- */
.brand--logo { padding-bottom: 14px; }
.brand__logo { display: block; max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; }
.brand--center .brand__logo { max-height: 80px; margin: 0 auto; }
:root[data-theme="dark"] .brand__logo { background: #fff; padding: 4px 8px; border-radius: var(--radius-sm); }
.logo-settings { margin-bottom: 20px; }
.logo-settings__row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.logo-settings__preview { display: grid; place-items: center; width: 240px; height: 100px; padding: 10px; border: 1px dashed var(--border); border-radius: var(--radius); background: #fff; }
.logo-settings__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-settings__preview.is-empty { background: var(--surface-2); }
.logo-settings__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1; min-width: 220px; }
.logo-settings__actions label.btn { cursor: pointer; }

/* --- Nastavení: karty a podkarty --- */
.tabs--settings .tabs__item { gap: 8px; }
.tabs__icon { width: 16px; height: 16px; flex-shrink: 0; }
.tabs--sub { margin: -8px 0 18px; border-bottom: 0; gap: 6px; }
.tabs--sub .tabs__item { padding: 5px 14px; margin: 0; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; }
.tabs--sub .tabs__item.is-active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

/* --- Editace ticketu: úprava zákazníka --- */
.customer-picker { display: flex; gap: 8px; align-items: flex-end; }
.customer-picker .field { flex: 1; min-width: 0; }
.customer-picker__edit { height: 38px; flex-shrink: 0; }
.customer-picker__edit[hidden] { display: none; }
.customer-saved { margin: 0; }
@media (max-width: 800px) { .customer-picker { flex-direction: column; align-items: stretch; } }

/* --- Ticket: historie změn (z logu aktivit) ---------------------------------------------- */
.ticket-history .log { display: flex; flex-direction: column; gap: 10px; }
.ticket-history .log-group { box-shadow: none; }
.ticket-history__more { margin: 12px 0 0; }

/* --- Číslo servisu S-00012 ---------------------------------------------------------------- */
.visit-no { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.upcoming__line a.visit-no { font-weight: 700; }
span.visit-no { color: var(--muted); }
.visit-no__icon { width: 14px; height: 14px; flex: none; }
.ticket-ref { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.upcoming__line .ticket-ref a { display: inline-flex; align-items: center; gap: 3px; font-weight: 500; color: var(--muted); }
.ticket-ref a:hover { color: var(--primary); }
.ticket-ref__icon { width: 12px; height: 12px; flex: none; }
.visit-no--hero { padding: 2px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }

/* --- Uzavření servisu: kontrola materiálu a práce, odemknutí ---------------------------- */
.close-check { margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.close-check ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.close-check .is-ok { color: var(--success); }
.close-check .is-missing { color: var(--warning); font-weight: 600; }
.outcome-reopen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }

/* --- Ceník prací a předběžná cena servisu ------------------------------------------------- */
.pricing-intro { max-width: 900px; margin: 0 0 16px; }
.pricing-table .num { text-align: right; }
.pricing-table tr.is-inactive td { opacity: .6; }
.pricing-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pricing-edit input[name="name"] { flex: 1 1 220px; }
.pricing-edit input[name="description"] { flex: 1 1 200px; }
.pricing-edit__price { width: 110px !important; }
.pricing-edit select { width: auto; }
.pricing-bottom { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.pricing-rates { max-width: none; }
.pricing-travel__rate { max-width: 280px; }
.input-suffix { display: flex; align-items: center; gap: 8px; }
.input-suffix input { flex: 1; min-width: 0; }
@media (max-width: 1100px) { .pricing-bottom { grid-template-columns: 1fr; } }
.pricing-rates__default { max-width: 280px; }
.pricing-rates__input { max-width: 160px; }

.billing { display: flex; flex-direction: column; gap: 14px; }
.billing select[data-price-select] { width: 100%; }
/* Podsekce Úkony z ceníku / Doprava */
.billing__part { display: flex; flex-direction: column; gap: 8px; }
.billing__part + .billing__part { padding-top: 14px; border-top: 1px solid var(--border); }
.billing__part[hidden] { display: none; }
.billing__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.billing__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 650; }
.billing__icon { width: 18px; height: 18px; flex: none; color: var(--info); }

/* Doprava: odkud + nájezd + čas v jednom řádku */
.travel__row { display: grid; grid-template-columns: minmax(0, 1fr) 124px 116px; gap: 8px; align-items: end; }
.travel__row label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.travel__label { font-size: 12px; font-weight: 500; color: var(--muted); }
.travel__input { position: relative; display: flex; align-items: center; gap: 6px; }
.travel__input input { padding-left: 32px; min-width: 0; font-variant-numeric: tabular-nums; }
.travel__input-icon { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.travel__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.travel__summary:has(> [data-travel-total]:empty):has(> [data-travel-source][hidden]) { display: none; }
.travel__source { padding: 1px 8px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.travel__source--manual { background: var(--warning-soft); color: var(--warning); }
[data-travel-info]:empty { display: none; }
@media (max-width: 480px) {
    .travel__row { grid-template-columns: 1fr 1fr; }
    .travel__origin { grid-column: 1 / -1; }
}
.price-picker__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.price-picker__list:empty { display: none; }
.price-picker__item { display: grid; grid-template-columns: minmax(0, 1fr) 76px auto auto auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.price-picker__item input { width: 76px; padding: 4px 6px; }
.price-picker__name { min-width: 0; overflow-wrap: anywhere; }
.price-picker__sum { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Předběžná cena: rozpis práce / dopravy a celkem */
.price-estimate { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px; background: var(--primary-soft); }
.price-estimate__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.price-estimate__table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.price-estimate__table th, .price-estimate__table td { padding: 3px 0; text-align: left; vertical-align: baseline; }
.price-estimate__table th { font-weight: 500; padding-right: 10px; white-space: nowrap; }
.price-estimate__table td.muted { font-size: 12px; }
.price-estimate__table .num { text-align: right; white-space: nowrap; padding-left: 10px; }
.price-estimate__table tfoot th, .price-estimate__table tfoot td { padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); font-size: 15px; font-weight: 700; }
.price-estimate__pending { margin: 0; font-size: 13px; color: var(--muted); }
.price-estimate__warn { margin: 0; color: var(--warning); font-weight: 600; font-size: 13px; }
@media (max-width: 560px) {
    .price-picker__item { grid-template-columns: minmax(0, 1fr) 70px auto; }
    .price-picker__item .muted { grid-column: 1 / -1; }
}

.visit-price { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--primary); background: var(--surface-2); border-radius: 0 6px 6px 0; }
.visit-price__items { margin: 2px 0 0; padding-left: 18px; font-size: 13px; }
.visit-price__total { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }
.visit-tasks__list { list-style: none; margin: 0; padding: 0; }
.visit-tasks__list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.visit-tasks__total { margin: 10px 0 2px; }

/* --- Log aktivit: proklik na předmět změny ------------------------------------------------ */
.log-entry__link { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.log-entry__link:hover { color: var(--primary); text-decoration-color: currentColor; }
.log-entry__link::after { content: " ›"; color: var(--muted); }

/* --- Vyúčtování a cena ticketu ------------------------------------------------------------ */
.stats--invoicing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats--invoicing .stat.is-active { outline: 2px solid var(--primary); outline-offset: -2px; }
.invoicing { display: flex; flex-direction: column; gap: 16px; }
.invoicing-group__total { font-size: 17px; white-space: nowrap; }
.invoicing-table .num { text-align: right; }
.invoicing-table tr.is-invoiced td { background: var(--success-soft); }
.invoicing-table__state { min-width: 200px; }
.invoicing-table__state form { margin-top: 4px; }
.invoicing-table__state small { display: block; }
@media (max-width: 800px) { .stats--invoicing { grid-template-columns: 1fr; } }

.visit-price--void { opacity: .7; border-left-color: var(--neutral); }
.visit-price__invoice { margin-top: 6px; }
.ticket-price { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.ticket-price h3 { margin: 0 0 8px; font-size: 15px; }
.ticket-price__rows { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; margin: 0 0 8px; }
.ticket-price__rows dt { margin: 0; }
.ticket-price__rows dd { margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ticket-price__sub { padding-left: 14px; color: var(--muted); font-size: 13px; }
.ticket-price__total { padding-top: 6px; border-top: 1px solid var(--border); font-weight: 700; font-size: 16px; }

/* --- Vyúčtování: upozornění na materiál ---------------------------------------------------- */
.invoicing-material-alert { margin-bottom: 12px; }
.invoicing-table tr.has-material td { border-bottom: 0; }
.invoicing-table__material td { padding-top: 0; font-size: 13px; background: var(--warning-soft); }
.invoicing-table__material.is-invoiced td { background: var(--success-soft); color: var(--muted); }
.invoicing-table__material-label { font-weight: 600; color: var(--warning); }
.invoicing-table__material.is-invoiced .invoicing-table__material-label { color: inherit; }

/* --- Technici: profilovka přímo u jména --------------------------------------------------- */
.tech-name { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; vertical-align: middle; }
.tech-name__avatar { width: 18px; height: 18px; font-size: 9px; flex: none; }
a.tech-name:hover { text-decoration: underline; }

/* --- Skutečný čas na servisu ---------------------------------------------------------------- */
.visit-time__summary { margin: 0 0 10px; }
.visit-time__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 8px; }
.visit-time__form .field { margin: 0; }
.visit-time__form input[type="time"] { width: 120px; }

/* --- Typ servisu s piktogramem (auto / vzdáleně) ----------------------------------------- */
.visit-type { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; vertical-align: middle; }
.visit-type__icon { width: 15px; height: 15px; flex: none; }
.visit-type--vyjezd .visit-type__icon { color: var(--info); }
.visit-type--vzdalene .visit-type__icon { color: var(--lavender, var(--primary)); }
.badge .visit-type__icon { color: inherit; }

/* --- Přehled servisů: předběžná částka u servisu -------------------------------------------- */
.dash-price { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; margin-left: auto; padding: 0 4px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.25; }
.dash-price small { font-weight: 400; font-size: 11px; color: var(--muted); }
.dash-price--void { color: var(--muted); font-weight: 400; }
.dash-price + .upcoming__action { margin-left: 8px; }
.dash-price .dash-price__label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }

/* --- Výpisy servisů: při nedostatku místa se cena a tlačítka přesunou pod obsah ------------- */
.upcoming .list__item { flex-wrap: wrap; column-gap: 12px; row-gap: 6px; }
.upcoming .list__body { flex: 1 1 260px; }
.upcoming .list__item > .dash-price { margin-left: auto; }
.upcoming .list__item > .dash-price + .upcoming__action { margin-left: 0; }
.upcoming__line > * { min-width: 0; }

/* Zrušit vedle Upravit (Přehled servisů) */
.upcoming__cancel { display: flex; margin: 0; }

/* Upravit a pod ním Zrušit – stejně široká tlačítka ve sloupci */
.upcoming__actions--stack { align-items: stretch; }
.upcoming__actions--stack .btn, .upcoming__actions--stack .upcoming__cancel { width: 100%; }
.btn--outline-danger { background: var(--surface); border-color: var(--danger); color: var(--danger); font-weight: 600; }
.btn--outline-danger:hover { background: var(--danger); color: #fff; }

/* Čas servisu na samostatném řádku, větším písmem; číslo servisu, ticket a zákazník pod ním */
.upcoming__line > .upcoming__when { flex-basis: 100%; font-size: 16px; font-weight: 700; line-height: 1.3; }

/* --- Doprava: provozovny a nájezd ----------------------------------------------------------- */
.branches { margin-top: 16px; }
.branches__list { list-style: none; margin: 0 0 12px; padding: 0; }
.branches__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.branches__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.branches__actions { display: flex; gap: 6px; }
.branches__form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.branches__form input[name="name"] { flex: 1 1 160px; }
.branches__form input[name="address"] { flex: 2 1 240px; }
.branches__form--new { margin-bottom: 8px; }
.visit-price__travel { color: var(--text); }

/* Materiál: ukládání na pozadí */
[data-materials].is-saving { opacity: .7; transition: opacity .15s; }
.material-msg { margin: 0 0 10px; padding: 8px 12px; font-size: 14px; }
.material-pending { list-style: none; margin: 0; padding: 0; }
.material-pending li { padding: 6px 10px; margin-bottom: 4px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 14px; }
.material-pending:empty { display: none; }
tr.is-removing { opacity: .4; }

/* Nájezd v kartě času servisu */
.visit-travel { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.visit-travel h3 { margin: 0 0 6px; font-size: 15px; }
.visit-travel .input-suffix input { max-width: 110px; }

.profile-branch { max-width: 520px; }
.branches__info strong { display: inline-flex; align-items: center; gap: 6px; }

/* --- Zahájení servisu ---------------------------------------------------------------------- */
.start-service { position: relative; }
.start-service > summary { list-style: none; cursor: pointer; }
.start-service > summary::-webkit-details-marker { display: none; }
.start-service[open] > summary { box-shadow: 0 0 0 3px var(--success-soft); }
.start-service__form { margin-top: 8px; padding: 12px; min-width: 260px; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 10px; text-align: left; }
.upcoming__actions .start-service__form { position: absolute; right: 0; z-index: 10; }
.start-service__origins { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.start-service__origins legend { font-weight: 600; margin-bottom: 6px; }
.start-service__origin { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.start-service__origin:has(input:checked) { border-color: var(--success); background: var(--success-soft); }
.start-service__origin span { display: flex; flex-direction: column; }
.start-service__done { white-space: nowrap; }

/* --- Mapa pod adresou zákazníka ------------------------------------------------------------ */
.address-map { position: relative; margin: -4px 0 4px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.address-map__frame { display: block; width: 100%; height: 220px; border: 0; }
.address-map__empty { margin: 0; padding: 24px 12px; text-align: center; }
.address-map__open { position: absolute; right: 10px; bottom: 10px; box-shadow: var(--shadow); background: var(--surface); }

.address-distances { margin: 4px 0 8px; }
.address-distances h3 { margin: 0 0 6px; font-size: 14px; }
.distances .num { text-align: right; }
.distances tr.is-nearest td { background: var(--success-soft); }
.distances .tech-name__avatar { vertical-align: middle; margin-right: 4px; }

/* Fakturační údaje zákazníka */
.billing-info { margin: 4px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; gap: 10px; }
.billing-info legend { padding: 0 6px; font-weight: 600; }
.invoicing-group__billing { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Tickety a servisy zákazníka (úprava zákazníka) */
.customer-tickets td { vertical-align: top; }
.customer-tickets__visits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.customer-tickets__visits li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

/* --- Tickety: podbarvení řádku podle stavu, přepínač Seznam / Kanban, kanban ------------------ */
.row-tone--info td { background: color-mix(in srgb, var(--info-soft) 55%, transparent); }
.row-tone--warning td { background: color-mix(in srgb, var(--warning-soft) 55%, transparent); }
.row-tone--success td { background: color-mix(in srgb, var(--success-soft) 55%, transparent); }
.row-tone--muted td { background: color-mix(in srgb, var(--neutral-soft) 70%, transparent); }
.row-tone td:first-child { box-shadow: inset 3px 0 0 var(--row-tone, transparent); }
.row-tone--info { --row-tone: var(--info); }
.row-tone--warning { --row-tone: var(--warning); }
.row-tone--success { --row-tone: var(--success); }
.row-tone--muted { --row-tone: var(--neutral); }
.table__row-link.row-tone:hover td { filter: brightness(.97); }

.view-switch { display: inline-flex; margin-bottom: 12px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.view-switch__item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: 14px; }
.view-switch__item:hover { text-decoration: none; color: var(--text); }
.view-switch__item.is-active { background: var(--primary-soft); color: var(--primary); }
.view-switch__icon { width: 16px; height: 16px; }

.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.kanban__column { background: var(--surface-2); border: 1px solid var(--border); border-top: 4px solid var(--neutral); border-radius: var(--radius); padding: 10px; min-height: 160px; transition: background .15s, box-shadow .15s; }
.kanban__column--info { border-top-color: var(--info); }
.kanban__column--warning { border-top-color: var(--warning); }
.kanban__column--success { border-top-color: var(--success); }
.kanban__column.is-over { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }
.kanban__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.kanban__head h2 { margin: 0; font-size: 14px; flex: 1; }
.kanban__cards { display: flex; flex-direction: column; gap: 8px; }
.kanban__card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.kanban__card[draggable="true"] { cursor: grab; }
.kanban__card:hover { border-color: var(--primary); }
.kanban__card.is-dragging { opacity: .45; }
.kanban__card.is-saving { opacity: .6; }
.kanban__card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kanban__title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.kanban__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.kanban__price { margin-left: auto; font-weight: 700; white-space: nowrap; }
.kanban__empty { margin: 4px 0; text-align: center; }
@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(4, minmax(240px, 80vw)); } }
.distances__skills { display: inline-flex; margin-left: 6px; vertical-align: middle; }

/* Zákazník: výrazné nadpisy sekcí (Fakturační údaje, Vzdálenost od zákazníka), ať formulář nesplývá */
.billing-info legend,
.address-distances h3 { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--text); }
.billing-info { margin-top: 16px; padding-top: 6px; }
.billing-info legend { padding: 0 8px; }
.address-distances { margin-top: 16px; }
.address-distances h3 { margin: 0 0 10px; }

/* --- Tickety: filtr stavů zaškrtávátky -------------------------------------------------------- */
.status-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 100%; margin: 0; padding: 0; border: 0; }
.status-filter__legend { float: left; margin-right: 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.status-filter__item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: 14px; user-select: none; }
.status-filter__item input { margin: 0; accent-color: var(--primary); }
.status-filter__item:has(input:not(:checked)) { opacity: .55; background: transparent; }
.status-filter__item:has(input:checked) { border-color: var(--primary); }
.kanban { grid-template-columns: repeat(var(--kanban-columns, 4), minmax(220px, 1fr)); }
@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(var(--kanban-columns, 4), minmax(240px, 80vw)); } }

/* =========================================================================================
   Přehled servisů – přehlednější výpis (A–G)
   ========================================================================================= */
/* A) Řádek: čas · zákazník · obec · technici; pod tím čísla a typ */
.service-row { cursor: pointer; align-items: center; }
.service-row:hover { background: var(--surface-2); }
.service-row__main { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.service-row__main .upcoming__when { flex-basis: auto; font-size: 15px; }
.service-row__customer { font-size: 15px; overflow-wrap: anywhere; }
.service-row__city { white-space: nowrap; }
.service-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 2px; }
.service-row__meta .visit-no { font-weight: 600; }
.crew-faces { display: inline-flex; align-items: center; margin-left: 4px; }
.crew-faces__item { width: 22px; height: 22px; font-size: 10px; border: 2px solid var(--surface); margin-left: -6px; flex: none; }
.crew-faces__item:first-child { margin-left: 0; }
.crew-faces--single { gap: 5px; }
.crew-faces__name { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* B) Akce v nabídce „⋯“ */
.row-menu { position: relative; flex-shrink: 0; }
.row-menu__toggle { list-style: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 20px; line-height: 1; color: var(--muted); }
.row-menu__toggle::-webkit-details-marker { display: none; }
.row-menu__toggle:hover, .row-menu[open] .row-menu__toggle { background: var(--surface-2); color: var(--text); }
.row-menu__list { position: absolute; right: 0; top: 34px; z-index: 20; min-width: 210px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.row-menu__list a, .row-menu__list button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.row-menu__list a:hover, .row-menu__list button:hover { background: var(--surface-2); text-decoration: none; }
.row-menu__list form { margin: 0; }
.row-menu__danger { color: var(--danger) !important; }
.row-menu__icon { width: 16px; height: 16px; flex: none; }

/* C) Cena jako tichý sloupec – jen částka */
.service-row .dash-price { font-size: 15px; min-width: 84px; }
.service-row .dash-price small { font-size: 11px; }
.hide-prices .dash-price { display: none; }

/* E) Poznámka na jeden řádek, kliknutím celá */
.service-row__note { display: block; max-width: 100%; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--muted); font: italic 13px/1.4 var(--font); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.service-row__note.is-open { white-space: normal; color: var(--text); }

/* F) Kompaktní zobrazení – jeden řádek na servis */
.dash-list.is-compact .service-row__meta,
.dash-list.is-compact .service-row__note { display: none; }
.dash-list.is-compact .service-row { padding-top: 6px; padding-bottom: 6px; }
.dash-list.is-compact .service-row .dash-price small { display: none; }

/* G) Nástroje a filtry */
.service-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.service-tools__group { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.service-tools__toggle { padding: 5px 12px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 600 13px var(--font); cursor: pointer; }
.service-tools__toggle.is-active { background: var(--primary-soft); color: var(--primary); }
.service-tools__check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.service-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.service-filter__types { display: inline-flex; gap: 4px; }
.service-filter__type { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font: 13px var(--font); cursor: pointer; }
.service-filter__type.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.service-filter__techs { display: inline-flex; gap: 4px; }
.service-filter__tech { padding: 2px; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.service-filter__tech .crew-faces__item { width: 28px; height: 28px; margin: 0; border: 0; font-size: 12px; }
.service-filter.has-tech .service-filter__tech:not(.is-active) { opacity: .4; }
.service-filter__tech.is-active { border-color: var(--primary); }

/* D) Klidnější členění – měsíc jako nadpis, týden tenkou čarou */
.agenda-month { margin: 18px 0 2px; padding: 0; border: 0; background: none; color: var(--text); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.agenda-month::first-letter { text-transform: uppercase; }
.agenda-week { margin: 8px 0 0; color: var(--muted); font-size: 11px; font-weight: 600; }
.agenda-week::after { border-top: 1px solid var(--border); }
.agenda-week span { padding: 0; background: none; }

@media (max-width: 560px) {
    .service-row { align-items: flex-start; }
    .service-row .dash-price { min-width: 0; }
}

/* Potvrzení uzavření ticketu s naplánovanými servisy */
.close-confirm__visits { margin: 8px 0 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.close-confirm__visits .list__item { padding: 10px 12px; }
.close-confirm__actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* Větší nadpisy H2 v celém systému (karty, dialogy, profil, kanban) */
h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.dialog__header h2 { font-size: 22px; }
.profile-card__body h2 { font-size: 26px; }
.kanban__head h2 { font-size: 17px; }
.card__header { gap: 12px; }
.card__header h2 small { font-size: 14px; font-weight: 500; }

/* =========================================================================================
   Přehled servisů: souhrnný pruh, blok Dnes, 60 : 40, stav servisu, časová osa techniků
   ========================================================================================= */
.summary-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.summary-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--neutral); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--text); }
.summary-tile:hover { text-decoration: none; border-color: var(--primary); }
.summary-tile__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.summary-tile__value { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.summary-tile__sub { font-size: 12px; color: var(--muted); }
.summary-tile--primary { border-left-color: var(--primary); }
.summary-tile--info { border-left-color: var(--info); background: var(--info-soft); }
.summary-tile--danger { border-left-color: var(--danger); background: var(--danger-soft); }
.summary-tile--danger .summary-tile__sub { color: var(--danger); font-weight: 600; }
.summary-tile--warning { border-left-color: var(--warning); }

.today-card { margin-bottom: 16px; border-top: 4px solid var(--primary); }
.today-card__date { font-size: 15px; font-weight: 500; margin-left: 6px; }
.today-card__pending { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius); background: var(--danger-soft); }
.today-card__pending h3 { margin: 0 0 2px; font-size: 16px; color: var(--danger); display: flex; align-items: center; gap: 8px; }
.today-card__pending .list { background: var(--surface); border-radius: var(--radius-sm); margin-top: 8px; }

/* Stav servisu: barevný proužek vlevo */
.service-row { border-left: 4px solid transparent; padding-left: 10px; }
.service-row--planned { border-left-color: var(--border); }
.service-row--started { border-left-color: var(--info); background: var(--info-soft); }
.service-row--pending { border-left-color: var(--danger); }
.service-row--dokonceno, .service-row--dalsi_servis { border-left-color: var(--success); }
.service-row--zruseno_zakaznikem, .service-row--nezastizen { border-left-color: var(--neutral); }
.service-row__live { font-weight: 700; }

/* 60 : 40 */
@media (min-width: 1101px) { .dash-services { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }

/* Časová osa techniků */
.timeline-wrap { overflow-x: auto; }
.timeline { display: grid; grid-template-columns: 170px repeat(var(--timeline-days, 7), minmax(130px, 1fr)); min-width: 1000px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.timeline__corner, .timeline__day { padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.timeline__day { display: flex; flex-direction: column; border-left: 1px solid var(--border); font-size: 13px; }
.timeline__day.is-today { background: var(--primary-soft); color: var(--primary); }
.timeline__day.is-weekend, .timeline__cell.is-weekend { background-color: var(--neutral-soft); }
.timeline__tech { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; min-width: 0; }
.timeline__tech span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline__tech .crew-faces__item { margin: 0; }
.timeline__cell { position: relative; min-height: 46px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 7 - 1px), var(--border) calc(100% / 7 - 1px), var(--border) calc(100% / 7)); background-size: 100% 100%; }
.timeline__cell.is-today { background-color: color-mix(in srgb, var(--primary-soft) 45%, transparent); }
.timeline__bar { position: absolute; top: 6px; bottom: 6px; display: flex; flex-direction: column; justify-content: center; padding: 0 5px; border-radius: 6px; overflow: hidden; font-size: 11px; line-height: 1.2; color: #fff; background: var(--primary); box-shadow: var(--shadow); white-space: nowrap; }
.timeline__bar:hover { text-decoration: none; filter: brightness(1.08); z-index: 2; }
.timeline__bar--vzdalene { background: var(--surface); color: var(--lavender, #6d4fc2); border: 2px solid var(--lavender, #6d4fc2); }
.timeline__bar--started { background: var(--info); box-shadow: 0 0 0 2px var(--info-soft); }
.timeline__bar--pending { background: var(--danger); }
.timeline__bar--dokonceno, .timeline__bar--dalsi_servis { background: var(--success); }
.timeline__bar--nezastizen { background: var(--neutral); }
.timeline__time { font-weight: 700; }
.timeline__label { overflow: hidden; text-overflow: ellipsis; }
.timeline-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.timeline-legend__item { display: inline-block; width: 14px; height: 10px; border-radius: 3px; position: static; }
.timeline-legend__item.timeline__bar--vyjezd { background: var(--primary); }

/* Oranžová – „Dokončeno, nutný další servis“ */
:root { --orange: #c2410c; --orange-soft: #ffedd5; }
:root[data-theme="dark"] { --orange: #fb923c; --orange-soft: #3d2410; }
.badge--orange { background: var(--orange-soft); color: var(--orange); }
.dot--orange { background: var(--orange); }
.outcome-option--dalsi_servis { --tone: var(--orange); --tone-soft: var(--orange-soft); }
.outcome-result--dalsi_servis .outcome-result__icon { background: var(--orange-soft); color: var(--orange); }
.visit-hero--dalsi_servis { border-top-color: var(--orange); }
.service-row--dalsi_servis { border-left-color: var(--orange); }
.timeline__bar--dalsi_servis { background: var(--orange); }

/* Atribut hidden skryje prvek vždy – i když má třída vlastní display (flex, grid…).
   Bez toho nefungovalo skrývání filtrem v Přehledu servisů, přepínání pohledů apod. */
[hidden] { display: none !important; }

/* =========================================================================================
   Servisy v ticketu – souhrn, skupiny, kompaktní řádek s rozbalitelnými podrobnostmi
   ========================================================================================= */
.summary-strip--ticket { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 10px; }
.summary-strip--ticket .summary-tile { box-shadow: none; }
.summary-strip--ticket .summary-tile__value { font-size: 20px; }
.ticket-visits__invoice-all { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; }
.ticket-visits__group { margin: 18px 0 6px; font-size: 15px; }
.ticket-visits { border-top: 1px solid var(--border); }
.ticket-visit { border-bottom: 1px solid var(--border); border-left: 4px solid var(--border); }
.ticket-visit--started { border-left-color: var(--info); }
.ticket-visit--pending { border-left-color: var(--danger); }
.ticket-visit--dokonceno { border-left-color: var(--success); }
.ticket-visit--dalsi_servis { border-left-color: var(--orange, #c2410c); }
.ticket-visit--zruseno_zakaznikem, .ticket-visit--nezastizen { border-left-color: var(--neutral); }
.ticket-visit__row { display: flex; align-items: center; gap: 10px 14px; padding: 10px 8px 10px 12px; cursor: pointer; flex-wrap: wrap; }
.ticket-visit__row:hover, .ticket-visit.is-open .ticket-visit__row { background: var(--surface-2); }
.ticket-visit__main { flex: 1 1 260px; min-width: 0; }
.ticket-visit__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ticket-visit__row .dash-price { font-size: 15px; min-width: 84px; }
.ticket-visit__chevron { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 16px; cursor: pointer; transition: transform .15s; }
.ticket-visit__chevron:hover { background: var(--surface-2); color: var(--text); }
.ticket-visit.is-open .ticket-visit__chevron { transform: rotate(180deg); }
.ticket-visit__detail { padding: 4px 14px 14px 16px; background: var(--surface-2); }
.ticket-visit__texts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-bottom: 10px; }
.ticket-visit__texts h4, .ticket-visit__notes h4 { margin: 8px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ticket-visit__texts p { margin: 0; }
.ticket-visit__facts { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 14px; margin: 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 14px; }
.ticket-visit__facts dt { color: var(--muted); }
.ticket-visit__facts dd { margin: 0; }
.ticket-visit__notes p { margin: 0 0 4px; font-size: 14px; }
.hide-prices .ticket-visit .dash-price { display: inline-flex; }
@media (max-width: 700px) {
    .ticket-visit__texts { grid-template-columns: 1fr; }
    .ticket-visit__facts { grid-template-columns: 1fr; gap: 2px; }
    .ticket-visit__facts dt { margin-top: 6px; }
}
.branches__test { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 10px; }

/* Kalendář: technici v bloku s profilovkou */
.fc-event-tech { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 2px; }
.fc-tech { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.fc-tech__avatar { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; overflow: hidden;
    background: var(--avatar, var(--primary)); color: #fff; font-size: 9px; font-weight: 700; box-shadow: 0 0 0 1.5px rgb(255 255 255 / 80%); }
.fc-tech__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-tech__type { opacity: .85; }
.fc-v-event .fc-event-main-frame > .fc-event-time,
.fc-v-event .fc-event-main-frame > .fc-event-title { flex-shrink: 0; overflow: visible; max-height: none; }
.fc-v-event .fc-event-main-frame > .fc-event-tech { flex-shrink: 1; min-height: 0; overflow: hidden; }

/* Svátek / zavřeno / absence: název jen v řádku „Celý den“, v časové mřížce jen šrafování (bez zdvojení) */
.fc .fc-timegrid-col-bg .fc-bg-event .fc-event-title { display: none; }
/* Řádek „Celý den“ v týdnu / dni: místo na celý název svátku (menší písmo) */
.fc .fc-timegrid .fc-daygrid-body .fc-daygrid-day-frame { min-height: 4.9em; }
.fc .fc-timegrid .fc-daygrid-body .fc-bg-event .fc-event-title { font-size: 11px; line-height: 1.25; margin: 2px 4px; white-space: normal; }

/* Kalendář: čísla servisu a ticketu tučně, předpokládané km */
.fc-event-title b { font-weight: 700; }
.fc-event-kmline { flex-shrink: 0; font-size: 11px; opacity: .9; }
.fc-event-km { white-space: nowrap; font-size: 11px; }
.fc-crew-line .fc-event-km { margin-left: 4px; opacity: .85; }
.fc-crew-line .fc-event-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Kalendář: průběh načítání servisů */
#calendar { position: relative; }
#calendar.is-loading::before { content: ""; position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: cal-loading 1s linear infinite; }
#calendar.is-loading::after { content: "Načítám servisy…"; position: absolute; z-index: 5; top: 10px; right: 12px; padding: 3px 10px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 600; }
@keyframes cal-loading { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* --- Nastavení: režim rozesílání e-mailů, testy, log e-mailů, stav systému ---- */
.debug-modes { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.debug-mode { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.debug-mode:has(input:checked) { border-color: var(--primary); background: var(--primary-soft, var(--surface-2)); }
.debug-mode--running:has(input:checked) { border-color: var(--success); background: var(--success-soft); }
.debug-mode--log:has(input:checked) { border-color: var(--warning); background: var(--warning-soft); }
.debug-mode--stopped:has(input:checked) { border-color: var(--danger); background: var(--danger-soft); }
.debug-test { display: flex; gap: 8px; }
.debug-test input { flex: 1; min-width: 0; }
.debug-system { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: .875rem; }
.debug-system dt { color: var(--muted); }
.debug-system dd { margin: 0; word-break: break-word; }
.debug-emails__body pre { white-space: pre-wrap; font-size: .8rem; margin: 4px 0 0; max-width: 60ch; }

/* --- Detail ticketu: fotky a přílohy vedle sebe; na úzké obrazovce pořadí bloků ---- */
.ticket-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: stretch; }
.ticket-files > .card { margin: 0; min-width: 0; }
@media (max-width: 1279px) {
    /* jeden sloupec: popis → stav, místo, zákazník → servisy … → údaje ticketu → historie změn */
    .ticket-layout { display: flex; flex-direction: column; align-items: stretch; }
    .ticket-layout > .stack { display: contents; }
    .ticket-layout__top { order: -2; }
    .ticket-layout__side { order: -1; }
    .ticket-layout__meta { order: 1; }
    .ticket-layout .ticket-history { order: 2; }
}

/* --- Topbar: na užší obrazovce tlačítka pod „⋯“ (detail ticketu) --------------- */
.topbar-more { display: none; }
.topbar-more .row-menu__toggle { width: 40px; height: 40px; font-size: 24px; border: 1px solid var(--border); background: var(--surface); }
.topbar-more .row-menu__list { top: 46px; z-index: 40; }
@media (max-width: 1100px) {
    .topbar-wide { display: none; }
    .topbar-more { display: block; }
}

/* --- Mapa místa servisu (detail ticketu): úzký pruh se zvětšením -------------- */
.address-map--strip { margin: 10px 0 0; }
.address-map--strip .address-map__frame { height: 130px; transition: height .2s ease; }
.address-map--strip.is-expanded .address-map__frame { height: min(420px, 60vh); }
.address-map__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; padding: 6px; border-top: 1px solid var(--border); }
.address-map__actions .btn { background: var(--surface); }
.address-distances--ticket { margin: 14px 0 0; }
.address-distances--ticket h3 { font-size: 16px; margin: 0 0 8px; }
.address-distances--ticket .distances { font-size: 13px; }
.address-distances--ticket .distances td, .address-distances--ticket .distances th { padding-left: 4px; padding-right: 4px; }
.address-distances--ticket [data-distances-body] { overflow-x: auto; }
.address-distances--ticket .distances th:nth-child(2), .address-distances--ticket .distances td:nth-child(2) { display: none; }
.address-distances--ticket .distances th { font-size: 11px; }
@media (min-width: 1280px) {
    /* detail ticketu: širší pravý sloupec (mapa, vzdálenosti, zákazník) */
    .ticket-layout { grid-template-columns: minmax(0, 1fr) minmax(400px, 30%); }
}
/* větší nadpis v horní liště (detail ticketu) */
.topbar__title--large { font-size: 29px; font-weight: 700; line-height: 1.2; }
.topbar__title--large .topbar__icon { width: 30px; height: 30px; }
@media (max-width: 800px) { .topbar__title--large { font-size: 24px; } .topbar__title--large .topbar__icon { width: 24px; height: 24px; } }

/* Skilly technika ve vzdálenostech: požadované zvýrazněné, zbytek pod „+N“ */
.skill--match { background: var(--success-soft); color: var(--success); }
.skill--more { border: 1px dashed var(--primary); background: transparent; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; line-height: inherit; }
.skill--more:hover { background: var(--primary-soft); }
.distances__skills { flex-wrap: wrap; max-width: 100%; }
.distances__skills-rest { display: contents; }

/* Stav ticketu v hlavičce detailu: přepínač (aktuální stav vybarvený) */
.status-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.status-pill:hover:not(:disabled) { background: var(--surface); color: var(--text); }
.status-pill .dot { opacity: .6; }
.status-pill.is-active { cursor: default; color: var(--text); background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.status-pill.is-active .dot { opacity: 1; }
.status-pill--success.is-active { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.status-pill--warning.is-active { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.status-pill--info.is-active { background: var(--info-soft); color: var(--info); border-color: var(--info); }
.status-pill--danger.is-active { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.status-pill--muted.is-active { background: var(--surface); color: var(--text); border-color: var(--muted); }

/* Sbalitelná karta: trojúhelník v pravém rohu hlavičky se otáčí */
[data-collapsible] > .card__header { align-items: center; }
[data-collapsible] > .card__header .card__header-link { margin-left: auto; }
.card__toggle { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-left: 8px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.card__toggle:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.card__toggle svg { width: 20px; height: 20px; fill: currentColor; transition: transform .2s ease; transform: rotate(180deg); }
.is-collapsed .card__toggle svg { transform: rotate(0deg); }
[data-collapsible].is-collapsed > .card__header { margin-bottom: 0; }
[data-collapsible].is-collapsed > .card__header h2 { cursor: pointer; }

/* Požadované skilly ticketu: zeleně + kdo je má (seznam po kliknutí) */
.required-skill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.required-skill__none { font-size: 12px; font-weight: 600; color: var(--danger); padding-right: 6px; }
.required-skill__techs { position: relative; }
.required-skill__techs summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px 1px 2px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; }
.required-skill__techs summary::-webkit-details-marker { display: none; }
.required-skill__techs summary:hover, .required-skill__techs[open] summary { background: var(--surface-2); }
.required-skill__faces { display: inline-flex; }
.required-skill__faces .required-skill__avatar + .required-skill__avatar { margin-left: -6px; }
.required-skill__avatar { width: 20px; height: 20px; font-size: 10px; box-shadow: 0 0 0 2px var(--surface); }
.required-skill__list { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 2px; }
.required-skill__list strong { padding: 2px 6px 6px; }
.required-skill__list a { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; color: var(--text); }
.required-skill__list a:hover { background: var(--surface-2); text-decoration: none; }
.ticket-skills__label { font-size: 13px; font-weight: 700; color: var(--text); }
.ticket-request { padding-top: 12px; border-top: 1px solid var(--border); }
.ticket-request > .ticket-skills__label { display: block; margin-bottom: 4px; }
.ticket-request > .prose, .ticket-request > p { margin: 0; }

/* Požadované skilly: odebrání (×) a přidání (+) přímo v ticketu */
.required-skill__remove { display: inline-flex; margin: 0; }
.required-skill__remove button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0 0 2px; border: 1px dashed var(--danger); border-radius: 50%; background: var(--surface); color: var(--danger); font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; }
.required-skill__remove button:hover { background: var(--danger-soft); border-style: solid; }
.required-skill__add { position: relative; }
.required-skill__add summary { list-style: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1px dashed var(--success); border-radius: 50%; color: var(--success); font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; }
.required-skill__add summary::-webkit-details-marker { display: none; }
.required-skill__add summary:hover, .required-skill__add[open] summary { background: var(--success-soft); border-style: solid; }
.required-skill__add .required-skill__list { max-height: 320px; overflow-y: auto; margin: 0; }
.required-skill__list button { display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.required-skill__list button:hover { background: var(--surface-2); }

/* Úprava textu přímo v detailu ticketu (tužka) */
.inline-edit__head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.ticket-request > .inline-edit__head > .ticket-skills__label { display: inline; margin: 0; }
.inline-edit__btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.inline-edit__btn svg { width: 15px; height: 15px; }
.inline-edit__btn:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.internal-note .card__header .inline-edit__btn { margin-left: auto; }
.inline-edit__form textarea { width: 100%; min-height: 110px; resize: vertical; }
.inline-edit__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.empty__text { margin: 0 0 14px; }

/* Nastavení → Doprava */
.travel-settings__short { max-width: 280px; }
.travel-settings__section { margin: 22px 0 6px; font-size: 1.05rem; }
.travel-settings__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 16px; }
.travel-settings__grid input { max-width: 110px; }
.travel-settings__examples { margin-top: 14px; padding: 10px 14px; border-radius: 8px; background: var(--surface-2); }
.travel-settings__examples ul { margin: 6px 0 0; padding-left: 18px; }

/* Kalendář: pruhy cesty před a po výjezdu (méně sytá barva, šrafování) */
.fc .event--travel { border-style: dashed; background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, currentColor 7%, transparent) 6px 12px); box-shadow: none; opacity: .95; }
.fc .event--travel .fc-event-main { color: var(--text); }
.fc-travel { padding: 1px 4px; font-size: 11px; font-weight: 600; line-height: 1.25; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); }
.fc .event--travel-clash .fc-travel { color: var(--danger); }

/* --- Nastavení → E-mail a SMS ------------------------------------------------------------------ */
.messaging { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 16px; align-items: start; }
.messaging__title { display: flex; align-items: center; gap: 8px; }
.messaging__icon { width: 20px; height: 20px; flex: none; color: var(--primary); }
.messaging__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.messaging__wide { grid-column: 1 / -1; }
.messaging__section { margin: 14px 0 0; font-size: 15px; }
.messaging .field > label:first-child { font-weight: 500; font-size: 13px; }
.messaging__sms-test { margin-top: 12px; }
@media (max-width: 1100px) { .messaging { grid-template-columns: 1fr; } }
.messaging__url { display: block; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.messaging__log { margin-top: 16px; }
/* Tajné hodnoty (klíče, hesla) – skryté znaky bez type="password", aby je prohlížeč nevyplňoval uloženým heslem */
.secret-input { -webkit-text-security: disc; text-security: disc; font-family: monospace; }
.secret-input:placeholder-shown { font-family: inherit; }
/* Uložená tajná hodnota: hvězdičky v poli, zelené ✓ uvnitř vpravo a potvrzení pod polem */
.secret-field { position: relative; display: block; }
.secret-field.is-saved .secret-input { padding-right: 38px; border-color: color-mix(in srgb, var(--success) 55%, var(--border)); }
.secret-field.is-saved .secret-input::placeholder { color: var(--success); letter-spacing: .15em; opacity: .8; }
.secret-field__ok { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: grid; place-items: center;
    width: 20px; height: 20px; border-radius: 50%; background: var(--success); color: #fff; pointer-events: none; }
.secret-field__icon { width: 13px; height: 13px; stroke-width: 3; }
.secret-field__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--success); font-size: 12px; }
.secret-field__hint .checkbox { color: var(--muted); font-size: 12px; }
/* SMS: produkční / testovací sada klíčů */
.sms-mode__hint--test { color: var(--warning); font-weight: 500; }
.sms-keys { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 10px 14px 14px; border: 1px solid var(--border); border-radius: var(--radius); opacity: .75; }
.sms-keys.is-active { opacity: 1; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary-soft); }
.sms-keys[data-sms-keys="test"].is-active { border-color: var(--warning); box-shadow: 0 0 0 1px var(--warning-soft); }
.sms-keys legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-weight: 600; }
/* Produkční a testovací klíče vedle sebe, na mobilu pod sebou */
.sms-keys-grid > .sms-keys { min-width: 0; }
.sms-keys-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 760px) { .sms-keys-grid { grid-template-columns: 1fr; } }

/* --- Šablony SMS (Nastavení) a SMS o výjezdu (panel technika) ---------------------------------- */
.sms-templates { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.sms-templates__help dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0; }
.sms-templates__help dd { margin: 0; color: var(--muted); }
.sms-template { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr) auto; gap: 10px 14px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.sms-template--new { border-style: dashed; }
.sms-template--new > strong { grid-column: 1 / -1; }
.sms-template__actions { display: flex; flex-direction: column; gap: 6px; padding-top: 22px; }
@media (max-width: 900px) {
    .sms-template { grid-template-columns: 1fr; }
    .sms-template__actions { flex-direction: row; padding-top: 0; }
}

.btn--sms { background: var(--lavender-soft, var(--surface-2)); color: var(--lavender, var(--text)); border-color: transparent; font-weight: 600; }
.btn--sms:disabled { opacity: .55; cursor: not-allowed; }
.visit-sms-status { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.sms-dialog__to { margin: 0; }
.sms-dialog__templates { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.sms-dialog__templates legend { font-weight: 500; font-size: 13px; margin-bottom: 4px; }
.sms-preview { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.sms-preview__time { width: auto !important; min-height: 0; padding: 2px 6px; margin: 0 2px; border: 2px solid var(--primary); border-radius: 6px; font: inherit; font-weight: 700; color: var(--primary); background: var(--surface); }
/* Odeslané SMS u servisu: prvních 5 slov, celý text po kliknutí */
.visit-sms-status__item summary { cursor: pointer; list-style: none; }
.visit-sms-status__item summary::-webkit-details-marker { display: none; }
.visit-sms-status__item summary::before { content: '▸'; display: inline-block; width: 1em; color: var(--muted); transition: transform .15s; }
.visit-sms-status__item[open] summary::before { transform: rotate(90deg); }
.visit-sms-status__item[open] .visit-sms-status__teaser { display: none; }
.visit-sms-status__teaser { font-style: italic; }
.visit-sms-status__body { margin: 6px 0 4px 1em; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); white-space: normal; overflow-wrap: anywhere; }
/* Panel servisu: stav ticketu vpravo od názvu; Plánované úkony = služba, popis servisu, skilly */
.visit-hero__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.visit-hero__head .visit-hero__title { flex: 1 1 240px; min-width: 0; margin: 0; }
.visit-hero__head > .badge { flex: none; margin-top: 3px; }
.visit-tasks { display: flex; flex-direction: column; gap: 12px; }
.visit-tasks .card__header { margin-bottom: 0; }
.visit-tasks__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.visit-tasks__row > .visit-tasks__list { flex: 1 1 260px; }
.visit-tasks__label { font-size: 13px; font-weight: 700; color: var(--text); }
.visit-tasks__desc { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.visit-tasks__desc .prose, .visit-tasks__desc p { margin: 0; }
.visit-tasks__price { padding-top: 10px; border-top: 1px solid var(--border); }
.visit-tasks__list li:last-child { border-bottom: 0; }
/* Zadání pro technika uvnitř Plánovaných úkonů – světle žlutě */
:root { --note-bg: #fef9c3; --note-border: #facc15; }
:root[data-theme="dark"] { --note-bg: #3a3415; --note-border: #a16207; }
.visit-tasks__note { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--note-bg); border-left: 4px solid var(--note-border); }
.visit-tasks__note .prose { margin: 0; overflow-wrap: anywhere; }
/* Předávací protokol na konci bloku Výsledek servisu */
.outcome-protocol { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.outcome-protocol .btn { min-height: 44px; }
/* Předávací protokol: výhrady objednatele před podpisem */
.signature-steps { display: flex; flex-direction: column; gap: 16px; }
.remarks-card { border-top: 4px solid var(--warning); }
.remarks-card__choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.remarks-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.remarks-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.remarks-option input { width: 20px; height: 20px; flex: none; }
.remarks-card [data-remarks-field][hidden] { display: none; }
/* SMS: zvolené produkční klíče zeleně (tlačítko i rámeček sady) */
.sms-mode input[value="live"]:checked + span { background: var(--success); }
.sms-keys[data-sms-keys="live"].is-active { border-color: var(--success); box-shadow: 0 0 0 1px var(--success-soft); }
/* Stav systému: karty se statistikami */
.system-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px; align-items: start; }
.system-status .card { display: flex; flex-direction: column; gap: 10px; }
.system-status .card p { margin: 0; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.stat-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.stat-tile strong { font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-tile span { font-size: 12px; color: var(--muted); }
.stat-tile small { font-size: 11px; color: var(--muted); }
.stat-tile--success strong { color: var(--success); }
.stat-tile--danger { background: var(--danger-soft); }
.stat-tile--danger strong { color: var(--danger); }
.system-db__tables summary { cursor: pointer; }
.system-db__tables .table-wrap { margin-top: 8px; max-height: 360px; overflow: auto; }
/* Přehled servisů: širší pruh stavu vlevo (8 px) a mezery mezi servisy, aby pruhy nesplývaly */
.list__item.service-row { border-left-width: 8px; border-top: 0; border-radius: 4px; }
.list__item.service-row + .list__item.service-row { margin-top: 6px; }
/* Přihlášení: nadpis nad formulářem a odkaz na zapomenuté heslo */
.login__title { margin: 22px 0 0; font-size: 17px; font-weight: 650; text-align: center; }
.login .login__title + .form { margin-top: 14px; }
.login .login__title + p { margin: 8px 0 0; text-align: center; }
.login__links { margin: 16px 0 0; text-align: center; font-size: 14px; }
/* Přehled servisů: větší nadpisy měsíců („Říjen 2026“) a víc místa mezi nadpisy a servisy */
.agenda-month { margin: 32px 0 10px; font-size: 22px; font-weight: 750; }
.agenda-group--later .agenda-month:first-of-type { margin-top: 8px; }
.agenda-week { margin: 14px 0 10px; }
/* Dialog servisu: požadované skilly ticketu jako štítky */
.crew-picker__skills { line-height: 1.9; }
.crew-picker__skills .skill { margin: 0 2px; vertical-align: baseline; }
/* Typ zásahu v dialogu: stejné ikony jako v přehledu servisů (auto = výjezd, monitor = vzdáleně) */
.segmented .segmented__icon-label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.segmented__icon { width: 17px; height: 17px; flex: none; }
/* Vzdálený zásah fialově – jako ikona monitoru v přehledu servisů */
.segmented input[name="type"][value="vzdalene"]:checked + span { background: var(--lavender, var(--primary)); color: #fff; }
.segmented input[name="type"][value="vzdalene"]:not(:checked) + span .segmented__icon { color: var(--lavender, var(--primary)); }
.segmented input[name="type"][value="vzdalene"]:focus-visible + span { outline-color: var(--lavender, var(--primary)); }
/* Výjezd k zákazníkovi tyrkysově (modrá = hlavní barva aplikace, oranžová / zelená / červená = stavy servisu) */
:root { --onsite: #0d9488; }
:root[data-theme="dark"] { --onsite: #2dd4bf; }
.visit-type--vyjezd .visit-type__icon { color: var(--onsite); }
.segmented input[name="type"][value="vyjezd"]:checked + span { background: var(--onsite); color: #fff; }
.segmented input[name="type"][value="vyjezd"]:not(:checked) + span .segmented__icon { color: var(--onsite); }
.segmented input[name="type"][value="vyjezd"]:focus-visible + span { outline-color: var(--onsite); }
:root[data-theme="dark"] .segmented input[name="type"]:checked + span { color: #0f141c; }

/* --- Dialog servisu: časová osa pod Začátkem a Koncem ------------------------------------------ */
.time-axis { margin: -4px 0 4px; user-select: none; touch-action: none; }
.time-axis[hidden] { display: none; }
.time-axis__track {
    position: relative; height: 36px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border);
    /* pracovní doba světlejší, mimo ni šedé šrafování */
    background:
        linear-gradient(to right, transparent var(--open-from, 0%), var(--surface) var(--open-from, 0%), var(--surface) var(--open-to, 100%), transparent var(--open-to, 100%)),
        repeating-linear-gradient(135deg, var(--surface-2) 0 6px, transparent 6px 12px), var(--surface-2);
}
.time-axis__range {
    position: absolute; top: 3px; bottom: 3px; min-width: 6px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; background: var(--primary); color: #fff; cursor: grab;
    box-shadow: 0 1px 3px rgb(16 24 40 / 25%);
}
.time-axis.is-dragging .time-axis__range { cursor: grabbing; }
.time-axis__label { padding: 0 14px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.time-axis__handle {
    position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize;
    display: flex; align-items: center; justify-content: center;
}
.time-axis__handle::after { content: ''; width: 3px; height: 14px; border-radius: 2px; background: rgb(255 255 255 / 80%); }
.time-axis__handle--start { left: 0; }
.time-axis__handle--end { right: 0; }
.time-axis__hours { position: relative; height: 16px; margin-top: 2px; font-size: 11px; color: var(--muted); }
.time-axis__hours span { position: absolute; transform: translateX(-50%); }
.time-axis__hours span:first-child { transform: none; }
.time-axis__hours span:last-child { transform: translateX(-100%); }
@media (pointer: coarse) {
    .time-axis__track { height: 44px; }
    .time-axis__handle { width: 20px; }
}
/* Zadání pro technika v dialogu servisu – světle žlutě jako v panelu technika */
textarea.note-input { background: var(--note-bg); border-color: var(--note-border); }
textarea.note-input:focus { border-color: var(--note-border); outline-color: color-mix(in srgb, var(--note-border) 35%, transparent); }

/* --- Tickety: vlastní malinová barva (čísla T-…, ikona ticketu) ------------------------------- */
:root { --ticket: #be185d; --ticket-soft: #fce7f3; }
:root[data-theme="dark"] { --ticket: #f472b6; --ticket-soft: #3d1a2c; }
.ticket-no, a.ticket-no, .ticket-no strong { color: var(--ticket); }
a.ticket-no:hover { color: var(--ticket); text-decoration: underline; }
.ticket-ref a, .upcoming__line .ticket-ref a { color: var(--ticket); }
.ticket-ref a:hover { color: var(--ticket); text-decoration: underline; }
.ticket-ref__icon { color: var(--ticket); }
.topbar__icon--ticket { color: var(--ticket); }
.nav__link--tickets .nav__icon { color: var(--ticket); opacity: 1; }
.nav__link--tickets.is-active { background: var(--ticket-soft); color: var(--ticket); }
.btn--ticket .btn__icon { color: var(--ticket); }
.btn--ticket:hover { border-color: var(--ticket); }
/* Tickety v menu a tlačítko Přejít na ticket: světle malinové (jako Můj kalendář fialově) */
.nav__link--tickets { font-weight: 600; }
.nav__link--tickets:not(.is-active) { background: var(--ticket-soft); color: var(--ticket); }
.nav__link--tickets:not(.is-active):hover { background: color-mix(in srgb, var(--ticket-soft) 75%, var(--ticket)); }
.nav__link--tickets.is-active { background: var(--ticket); color: #fff; }
.nav__link--tickets.is-active .nav__icon { color: #fff; }
.btn--ticket { background: var(--ticket-soft); color: var(--ticket); border-color: transparent; font-weight: 600; }
.btn--ticket:hover { background: color-mix(in srgb, var(--ticket-soft) 75%, var(--ticket)); color: var(--ticket); border-color: transparent; text-decoration: none; }
:root[data-theme="dark"] .nav__link--tickets.is-active { color: #1a0d14; }
:root[data-theme="dark"] .nav__link--tickets.is-active .nav__icon { color: #1a0d14; }
/* Dialog servisu: požadované skilly ticketu a kdo z vybraných techniků je pokrývá */
.crew-picker__skills { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--text); line-height: 1.4; }
.crew-picker__skills.is-complete { background: var(--success-soft); }
.crew-picker__skills[hidden] { display: none; }
.skill-need__head { font-size: 12px; font-weight: 600; color: var(--muted); }
.skill-need { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.skill-need .skill { margin: 0; }
.skill-need__who { display: inline-flex; align-items: center; gap: 3px; }
.skill-need .skill-need__avatar { width: 22px; height: 22px; margin: 0; font-size: 10px; box-shadow: 0 0 0 2px var(--surface); }
.skill-need__state { font-size: 12px; font-weight: 600; color: var(--warning); }
.skill-need.is-covered .skill-need__state { color: var(--success); }
/* Karta technika: čím pomůže partě se skilly ticketu */
.crew-picker__fit { display: block; font-size: 11px; font-weight: 700; white-space: normal; line-height: 1.3; }
.crew-picker__fit[data-tone="ok"] { color: var(--success); }
.crew-picker__fit[data-tone="add"] { color: var(--success); }
.crew-picker__fit[data-tone="muted"] { color: var(--muted); font-weight: 500; }
.crew-picker__item.is-candidate { border-color: var(--success); box-shadow: inset 4px 0 0 var(--success); background: color-mix(in srgb, var(--success-soft) 55%, transparent); }
/* Žlutý box: kandidáti na nepokrytý skill – kliknutím přidat do party */
.skill-need__pick { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; transition: transform .1s; }
.skill-need__pick:hover { transform: scale(1.12); }
.skill-need__pick:hover .skill-need__avatar { box-shadow: 0 0 0 2px var(--success); }
/* Předběžná cena: řádky práce jednotlivých techniků party – dlouhé jméno se zalomí */
.price-estimate__table tbody th { white-space: normal; }
/* Přehled servisů: souhrn jako jeden kompaktní pruh (dlaždice oddělené čarou, šířka podle obsahu) */
.summary-strip--dash { display: flex; flex-wrap: wrap; gap: 0; width: fit-content; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.summary-strip--dash .summary-tile { min-width: 170px; padding: 10px 22px 10px 16px; border: 0; border-left: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.summary-strip--dash .summary-tile:first-child { border-left: 0; }
.summary-strip--dash .summary-tile:hover { background: var(--surface-2); }
.summary-strip--dash .summary-tile__value { font-size: 22px; }
.summary-strip--dash .summary-tile--info .summary-tile__value { color: var(--info); }
.summary-strip--dash .summary-tile--danger .summary-tile__value { color: var(--danger); }
.summary-strip--dash .summary-tile--warning .summary-tile__value { color: var(--warning); }
/* Karta Dnes: servisy jako dlaždice vedle sebe, aby cena zůstala u servisu a ne na konci dlouhého řádku */
.today-card .upcoming { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 10px; }
.today-card .upcoming > .list__item.service-row { margin-top: 0; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: var(--radius-sm); }
/* Proběhlé servisy: odkaz na podepsaný předávací protokol – zelená ikona se štítkem, aby byl vidět */
.protocol-ref { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--success); }
.protocol-ref:hover { text-decoration: underline; }
.protocol-ref__icon { width: 15px; height: 15px; flex-shrink: 0; }
/* Náhled předávacího protokolu v překryvném okně (Přehled servisů) */
.protocol-dialog { width: min(960px, 100vw - 24px); height: calc(100vh - 24px); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgb(0 0 0 / 40%); overflow: hidden; }
.protocol-dialog[open] { display: flex; flex-direction: column; }
.protocol-dialog::backdrop { background: rgb(10 12 16 / 60%); }
.protocol-dialog__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border); }
.protocol-dialog__title { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.protocol-dialog__frame { flex: 1; width: 100%; border: 0; background: #e5e7eb; }
/* --- Odznaky a úrovně ------------------------------------------------------------------ */
/* Barevná pásma úrovní (po desítkách): šedá, zelená, tyrkysová, modrá, fialová, růžová, oranžová, červená, stříbrná, zlatá, 100 = černá se zlatou */
.level-bubble--0 { background: #8a94a6; color: #fff; }
.level-bubble--1 { background: #22a35a; color: #fff; }
.level-bubble--2 { background: #0e9aa7; color: #fff; }
.level-bubble--3 { background: #2f6fe4; color: #fff; }
.level-bubble--4 { background: #7c4ddb; color: #fff; }
.level-bubble--5 { background: #e0479e; color: #fff; }
.level-bubble--6 { background: #f08a24; color: #fff; }
.level-bubble--7 { background: #d93636; color: #fff; }
.level-bubble--8 { background: linear-gradient(135deg, #e5e9ef, #9aa4b2); color: #1f2937; }
.level-bubble--9 { background: linear-gradient(135deg, #fde68a, #d4a017); color: #3b2a00; }
.level-bubble--10 { background: linear-gradient(135deg, #1f2937, #000); color: #f5c542; box-shadow: inset 0 0 0 1.5px #f5c542; }

/* Bublinka u profilovky */
.level-bubble { position: absolute; right: -5px; bottom: -4px; min-width: 16px; height: 16px; padding: 0 3px; border: 2px solid var(--surface); border-radius: 9px; font: 700 9.5px/12px var(--font); text-align: center; box-sizing: border-box; pointer-events: none; }
.avatar--sm .level-bubble { min-width: 14px; height: 14px; font-size: 8.5px; line-height: 10px; right: -4px; bottom: -3px; }
.avatar--lg .level-bubble { min-width: 24px; height: 24px; font-size: 12px; line-height: 20px; border-radius: 12px; right: -4px; bottom: -2px; }
.avatar--xl .level-bubble { min-width: 38px; height: 38px; font-size: 17px; line-height: 32px; border-width: 3px; border-radius: 19px; right: 0; bottom: 2px; }
/* U drobných profilovek (parta, jména techniků) bez bublinky */
.crew-faces__item .level-bubble, .tech-name__avatar .level-bubble, .avatar--xs .level-bubble, .required-skill__avatar .level-bubble { display: none; }

.level-chip { display: inline-block; padding: 3px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.level-progress { height: 10px; margin: 8px 0 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.level-progress--sm { height: 6px; margin: 0; flex: 1 1 140px; }
.level-progress__bar { display: block; height: 100%; border-radius: inherit; background: var(--primary); }

/* Medaile odznaku (barva podle vzácnosti) */
.medal { position: relative; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; box-shadow: inset 0 0 0 3px rgb(255 255 255 / 35%), 0 2px 6px rgb(0 0 0 / 18%); flex: none; }
.medal--bronze { background: linear-gradient(135deg, #e3a670, #9a5a26); }
.medal--silver { background: linear-gradient(135deg, #cfd6e0, #77839a); }
.medal--gold { background: linear-gradient(135deg, #fcd34d, #d97706); }
.medal--platinum { background: linear-gradient(135deg, #8ee6d6, #0f766e); }
.medal--diamond { background: linear-gradient(135deg, #7dd3fc, #6366f1 55%, #c084fc); }
.medal--master { box-shadow: inset 0 0 0 3px rgb(255 255 255 / 35%), 0 0 0 3px #f5c542, 0 2px 8px rgb(0 0 0 / 25%); }
.medal__icon { width: 24px; height: 24px; }
.medal__points { position: absolute; right: -4px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 4px; border: 2px solid var(--surface); border-radius: 10px; background: #111827; color: #fff; font: 700 10.5px/16px var(--font); text-align: center; box-sizing: border-box; }
.medal--locked { background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 2px var(--border); }
.medal--locked .medal__points { background: var(--border); color: var(--muted); }
.medal--sm { width: 30px; height: 30px; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 35%); }
.medal--sm .medal__icon { width: 15px; height: 15px; }
.medal--sm .medal__points { display: none; }
.medal--lg { width: 104px; height: 104px; box-shadow: inset 0 0 0 5px rgb(255 255 255 / 35%), 0 8px 24px rgb(0 0 0 / 25%); }
.medal--lg.medal--master { box-shadow: inset 0 0 0 5px rgb(255 255 255 / 35%), 0 0 0 4px #f5c542, 0 8px 24px rgb(0 0 0 / 25%); }
.medal--lg .medal__icon { width: 48px; height: 48px; }
.medal--lg .medal__points { min-width: 32px; height: 32px; border-width: 3px; border-radius: 16px; font-size: 15px; line-height: 26px; right: 0; bottom: 0; }

/* Stránka odznaků */
.level-card { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.level-card__body { flex: 1; min-width: 0; }
.level-card__body h2 { margin: 0 0 6px; }
.level-card__level { margin: 0; }
.badge-series { margin-bottom: 16px; }
.badge-series .card__header h2 { display: flex; align-items: center; gap: 8px; }
.badge-series__icon { width: 20px; height: 20px; color: var(--muted); }
.badge-series__tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 16px 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.badge-tier { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.badge-tier .medal { margin-bottom: 6px; }
.badge-tier__name { font-size: 13px; line-height: 1.25; }
.badge-tier__req { font-size: 12px; color: var(--muted); }
.badge-tier__date { font-size: 11px; color: var(--success); font-weight: 600; }
.badge-tier.is-locked .badge-tier__name { color: var(--muted); font-weight: 600; }
.badge-series__next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; }
.profile-level p { display: flex; align-items: center; gap: 14px; margin: 0; }

/* Žebříček */
.leaderboard__hint { margin: 0 0 8px; }
.leaderboard__list { margin: 0; padding: 0; list-style: none; }
.leaderboard__row { display: grid; grid-template-columns: 40px 34px minmax(0, 1fr) minmax(0, 240px) 90px 70px; align-items: center; gap: 12px; padding: 10px 8px; border-top: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.leaderboard__row:first-child { border-top: 0; }
.leaderboard__row:hover { background: var(--surface-2); }
.leaderboard__row.is-me { background: var(--primary-soft); }
.leaderboard__rank { font-weight: 700; font-size: 15px; text-align: center; font-variant-numeric: tabular-nums; }
.leaderboard__row--top .leaderboard__rank { font-size: 24px; }
.leaderboard__who { display: flex; flex-direction: column; min-width: 0; }
.leaderboard__who a { color: var(--text); }
.leaderboard__latest { display: flex; align-items: center; gap: 8px; min-width: 0; }
.leaderboard__latest-text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard__latest-text small { font-size: 11px; }
.leaderboard__badges, .leaderboard__points { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.leaderboard__points { font-size: 18px; font-weight: 700; }
@media (max-width: 760px) {
    .leaderboard__row { grid-template-columns: 32px 34px minmax(0, 1fr) auto; gap: 10px; }
    .leaderboard__latest, .leaderboard__badges { display: none; }
}

/* Gratulace k odznaku */
.award-dialog { width: min(460px, 100vw - 32px); padding: 28px 24px 20px; border: 0; border-radius: 16px; background: var(--surface); color: var(--text); text-align: center; box-shadow: 0 24px 64px rgb(0 0 0 / 35%); }
.award-dialog::backdrop { background: rgb(10 12 16 / 55%); }
.award-slide > * { margin-left: auto; margin-right: auto; }
.award-slide__kicker { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }
.award-slide .medal--lg, .award-slide__level { animation: award-pop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.award-slide__title { margin: 16px 0 6px; font-size: 22px; line-height: 1.25; }
.award-slide__points { margin: 10px 0 0; font-size: 18px; font-weight: 700; color: var(--success); }
.award-slide__points .level-chip { font-size: 13px; vertical-align: middle; }
.award-slide__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-height: 42vh; overflow: auto; padding: 8px 4px; }
.award-slide__level { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; font-size: 44px; font-weight: 800; box-shadow: 0 8px 24px rgb(0 0 0 / 25%); }
.award-slide__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; }
.award-slide__count { margin-right: auto; }
@keyframes award-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .award-slide .medal--lg, .award-slide__level { animation: none; } }