* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    color: var(--text-color);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
} 

html, body { 
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@supports (scrollbar-gutter: stable) {
  html { scrollbar-gutter: stable; }
}

:root {
    /* Colors */
    --primary-color: #182F66;
    --light-primary: #edf2ff;
    --primary-m: #A3ACC2;
    --primary-hover: #22428F;
    --primary-open-hover: #4665B2;
    /* Akční modrá pro potvrzovací tlačítka ve formulářích (Figma #3559D1) —
       světlejší a sytější než --primary-color. */
    --primary-action: #3559D1;

    --secondary-color: #EFF0F5;
    --background-color: #FFF9FB;

    --placeholder-color: #70757c;
    --text-color: #0D0D0D;
    --dark-grey: #1E1E1E;

    --light-grey: #D1D5E0;
    --darker-table-line: #E7E8ED;
    --grey: #9ca3af;

    --red: #C31616;
    --m-red: #F8CCCC;
    --light-red: #fdefef;  

    --green: #32A053;
    --tm-green: #03862A;
    --d-green: #2E581B;
    --dm-green: #8DB57A;
    --m-green: #E0F6DB;
    --light-green: #f5faf3;

    --purple: #8e44ad;
    --m-purple:#EDE2FF;
    --light-purple: #fbf5fd;
    --indigo: #6743DF;
    --modrofialova: #8767EF;
    --past-modrofialova: #AB92E0;

    --levander: #7785CF;
    --m-levander: #C6CDF3;
    --light-levander: #F8F9FF;
    
    --orange: #FE9639;
    --tm-orange: #E46C00;
    --m-orange: #FFE6CC;
    --light-orange: #FFF8F1;
    
    --yellow: #F2C14F;
    --sv-yellow: #F7DF53;
    --sv-yellow-m: #FFF7CD;
    --sv-yellow-light: #FFFFFD;

    --aqua: #0A938F;
    --m-aqua: #ADF1EF;
    --light-aqua: #E8FCFD;

    --sky-blue: #30BCED;
    --tm-sky-blue: #279EC7;
    --light-sky-blue: #f2f9fc;

    --pink: #D99AC5;
    --tm-pink: #D76AB4;


    --size-11: 0.6875rem;  /* 11px */
    --size-12: 0.75rem;    /* 12px */
    --size-13: 0.8125rem;  /* 13px */
    --size-14: 0.875rem;   /* 14px */
    --size-15: 0.950rem;   /* 15px */
    --size-16: 1rem;       /* 16px */
    --size-17: 1.0625rem;  /* 17px */
    --size-18: 1.125rem;   /* 18px */
    --size-20: 1.25rem;    /* 20px */
    --size-22: 1.375rem;   /* 22px */
    --size-24: 1.5rem;     /* 24px */
    --size-26: 1.625rem;   /* 26px */
    --size-28: 1.75rem;    /* 28px */
    --size-32: 2rem;       /* 32px */
    --size-36: 2.25rem;    /* 36px */
    --size-39: 2.4375rem;  /* 39px */
    --size-48: 3rem;       /*48 px*/

    /* Typography */
    --font-family: 'Source Sans 3', sans-serif;
    --font-inter: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Arial', sans-serif;
    --font-size-mini: var(--size-11);
    --font-size-xxs: var(--size-12);
    --font-size-xs: var(--size-13);
    --font-size-sm: var(--size-14);
    --font-size-base: var(--size-16);
    --font-size-lg: var(--size-20);
    --font-size-xl: var(--size-22);
    --font-size-2xl: var(--size-28);

    --line-height-xxs: var(--size-17);
    --line-height-xs: var(--size-20);
    --line-height-sm: var(--size-20);
    --line-height-base: var(--size-24);
    --line-height-lg: var(--size-28);
    --line-height-2xl: var(--size-36);
    --line-height-xl: var(--size-39);

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
}

h1 {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-2xl);
}

h2, .card, .db-sm-title, .h2 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-lg);
}

p, a { color: var(--text-color); }

a { text-decoration: none; }

.hidden, [hidden]  { display: none !important; }

/* Opakující se věci */
strong, h1, h2, .h2, h3, .h3, h4, .semibold, .progress-label, .alert, #sidebar, .menu-item, .notif-item.is-unread .notif-title, .top-menu-content, .card, .btn, input[type="file"]::file-selector-button, 
.tertiary-btn, .event-date, .pagination button, .pagination .dots, .required::after, .required, .error-404 h1, .error-404 p, .calendar-cell--weekday .date,
.db-heading p, .mini-donut--56 .mini-donut-label, .db-sm-title
{ font-weight: var(--font-weight-semibold); }

h3, .h3, .event-date, .dropdown-lg .calendar tbody tr, .size-base {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

p, ul, time, span, .faq-container button, .calendar table, .asset-table, label, textarea, input, .icon-toggle, .calendar-grid, .project-card-meta, .notif-title, option, select, .tl-item h4
{ font-family: var(--font-inter); }

.center, .side-section, #top-header-inside, #header-actions, .search-container, .top-section, .top-menu-arrow, .plus-btn, .secondary-plus-btn, .calendar-header, .three-containers ,
.arrows-nav, .action-buttons, .asset-table .action-buttons, .circle, .pagination, .pagination .arrow-btn, .faq-container button, .history-head, .tl-row, .switch, .chip, .btn, 
input[type="file"]::file-selector-button, .btns-grid button, .btns-column button, .tb-btn {
    display: flex;
    align-items: center;
}

.column, #sidebar, #side-menu, #main-content, #top-header, .dropdown-notification, #content, .column-container, .heading-center, .administrator-info, .calendar, .calendar-events,
.table-container,.notifikace-container, .circle-column, .form-container, form > div, .form >div, .room-row > div, .photo-container > div, .error-404, #filter-chips-bar, .switch-column, .db-heading, .podpora-card, 
.podpora-nazev, .kontakt-card, .faq-container, .tl-content, .task-detail-header, .task-description, .comment, .project-card, .db-card, .db-card > a, .g32px  {
    display: flex;
    flex-direction: column;
}

.search-container button, .header-icon, .menu-item, .action-menu-item, .side-section, .arrows-nav svg, .pagination .arrow-btn, .filter-group input, .filter-group select,
.top-section, .top-menu-arrow, .card, .btn, .plus-btn, .secondary-plus-btn, .tertiary-btn, .calendar table td, .pagination button, .pagination .dots,
input[type="checkbox"], .podpora-card, .faq-container button, .project-card, .db-card, .tag-color-option, .switch, .chip .remove, .icon-toggle,
.calendar-event, .calendar-allday-event, .calendar-time-event, .milnik-card-mini:hover, .vyber-item, .js-ia-accordion-toggle   {
    cursor: pointer;
    transition: background-color .25s ease, 
                color .25s ease,
                border-color .25s ease,
                transform 0.08s ease,
                box-shadow .25s ease;
}

body, .administrator-profile, .calendar-container, .table-container, .notifikace-container, .faq-container, .side-section.active, #side-menu .divider, #top-header-inside, .top-menu-arrow, .dropdown-menu, dialog, .div-dialog,  .calendar-grid, 
.calendar-week, .calendar-day, .calendar-time, .icon-toggle, .inv-dd-card input, .inv-dd-card textarea, .inv-dd-card select,
.podpora-card, .faq-container .faq-q > div, .comment, .project-board, .project-card, .db-card, .calendar-container-events, .task-description textarea, .form-container, input[type="checkbox"], .faq-container button 
{ background-color: var(--background-color); }

#top-menu .top-section:hover, .menu-item:hover, .filter-category:hover, .card:hover, .pagination button:hover:not(.active):not(.dots), .faq-container button:hover, .faq-container .faq-q:nth-of-type(odd) button:hover,
.secondary-btn:hover, input[type="file"]::file-selector-button:hover, .side-section:hover, .top-menu-arrow:hover, #top-menu.collapsed .top-menu-arrow:hover,
.filter-chip:hover, .podpora-card:hover, .komun-tpl-card:hover, .komun-metrika-card:hover, .komun-metrika-card.selected
{ background-color: var(--primary-hover); }

#top-menu .top-section:hover, .menu-item:hover, .filter-category:hover, .card:hover, .pagination button:hover:not(.active):not(.dots), .faq-container button:hover, .faq-container .faq-q:nth-of-type(odd) button:hover,
.secondary-btn:hover, input[type="file"]::file-selector-button:hover, .side-section:hover, .top-menu-arrow:hover, #top-menu.collapsed .top-menu-arrow:hover,
.filter-chip:hover, .podpora-card:hover, #sidebar, .side-item, .menu-item.logout:hover, .header-icon[data-badge]::after, 
.filter-chip[data-badge]::after, .primary-btn, .calendar td.event, .event-description a[href]:hover, .pozadi-datum, .pagination button.active, .faq-container .faq-q.active button, .calendar-row--weekdays,
.calendar-day-head, .calendar-event, .calendar-allday-event, .calendar-time-event, .tc-on-dark h3, .tc-on-dark h4, .tc-on-dark p, .komun-preview-card, .komun-tpl-card:hover, .komun-tpl-card.active, .komun-metrika-card:hover, .komun-metrika-card.selected
{ color: var(--background-color); }

.text-primary, .alert-blue, .event-description a[href], .kontakt-card p, .db-heading h2, .db-heading p, .top-section, .card, .heading-center h1, .secondary-btn, input[type="file"]::file-selector-button, 
.tertiary-btn, .event-date, .pagination button, .pagination .dots, .photo-container > div, .error-404 h1, .kontakt-card h3, .komun-prev-metric
{ color: var(--primary-color); }

header, .width-100, #side-menu, .divider, .top-menu-content, .calendar table, .calendar-container-events, .asset-table, .scroll-table, .scroll-p, .overlay-backdrop, form, .photo-container img, .row-strech, .faq-container button,
.calendar-event, .calendar-allday-event, .calendar-time-event, .profile-photo-wrap, .profile-photo, .width-tretina
{ width: 100%; }

.width-tretina, .overlay-backdrop, .photo-container img, .profile-photo-wrap, .profile-photo, .progress-fill 
{ height: 100%; }

.size-xxs {
    font-size: var(--font-size-xxs);
    line-height: var(--line-height-xxs);
}
.size-xs {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
}

.size-xxs {
    font-size: var(--font-size-xxs);
    line-height: var(--line-height-xxs);
}

.ff-source, .db-sm-title, .h2, .h3, h4, .h4
 { font-family: var(--font-family);}

/* Main Layout Container */
#app-container {
    display: flex;
    align-items: stretch;    
    min-height: 100vh;
}

.container { padding: 0px 40px; }

.container-center { margin: 0 auto; }


.btns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Login */
#login-form {
    align-items: center;
    padding: 40px 80px;
    width: 360px;
}

#login-form form { justify-content: center; }

#login-form form > div, .dropdown-menu form > div { flex: 0 0 100%; }

#login-form button {
    margin-top: 24px;
    margin-left: auto;
    margin-right: auto;
}

/* Messages */
#messages {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: fit-content;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* základní vzhled zpráv */
.alert {
    border-radius: 999px;
    border: 1.5px solid;
    animation: slideDown 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: fit-content;
    width: fit-content;
    font-size: var(--font-size-xxs);
    line-height: var(--line-height-xxs);
    padding: 4px 8px;
}

.alert-sm { padding: 2px 8px;}

#messages .alert { 
    padding: 12px 20px; 
    border-radius: 8px;
}

/* jednotlivé typy alertů */
.alert-success, .alert-green {
    background-color: var(--light-green);
    color: var(--green);
    border-color: var(--green);
}

.alert-tm-green {
    color: var(--d-green);
    border-color: var(--d-green);
    background-color: var(--light-green);
}

.alert-error, .alert-danger, .alert-red {
    background-color: var(--light-red);
    border-color: var(--red);
}

.alert-warning, .alert-yellow {
    background-color: var(--sv-yellow-light);
    color: var(--yellow);
    border-color: var(--yellow);
}

.alert-info, .alert-aqua {
    background-color: var(--light-aqua);
    color: var(--aqua);
    border-color: var(--aqua);
}

.alert-orange {
    color: var(--orange);
    background-color: var(--light-orange);
}

.alert-purple {
    color: var(--purple);
    background-color: var(--light-purple);
}
.alert-indigo {
    color: var(--indigo);
    background-color: var(--light-purple);
}

.alert-blue { 
    color: var(--primary-color);
    background-color: var(--light-primary); }
    
.alert-sky-blue {
    color: var(--tm-sky-blue);
    background-color: var(--light-sky-blue);
}

.alert-hoverblue { 
    background-color:  var(--light-primary);
    border-color: var(--primary-hover);
    color: var(--primary-hover);
}

.alert-pink {
    color: var(--tm-pink);
    background-color: var(--light-purple);
}

.alert-grey { 
    color: var(--grey);
    background-color: var(--darker-table-line);
}

/* Kategorie „Ostatní" v Dokumentech: šedé pozadí, ale text i rámeček černé.
   .alert-grey má šedý i text, a protože .alert má `border: 1.5px solid` bez barvy
   (dědí currentColor), byl šedý i rámeček. Figma: text #020202, výplň #E7E8ED.
   Autorizace uživatele 2026-07-26. */
.alert-black {
    color: var(--text-color);
    background-color: var(--darker-table-line);
}

.alert.hide { animation: slideUp 0.25s ease-in forwards; }

/* animace pro smooth vstup */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* animace pro smooth zmizení */
@keyframes slideUp {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-4px); }
}

/* ======================================================
   Informační bannery
====================================================== */
.information {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 16px;
  padding: 8px 8px;
  font-family: var(--font-inter);
  font-weight: var(--font-weight-semibold);
}

.information::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

.information-blue {
  background-color: var(--light-primary);
  color: var(--primary-color);
}
.information-green {
  background-color: var(--light-green);
  color: var(--tm-green);
}
.information-yellow {
  background-color: var(--sv-yellow-m);
  color: var(--yellow);
}
.information-orange {
  background-color: var(--light-orange);
  color: var(--tm-orange);
}
.information-red {
  background-color: var(--light-red);
  color: var(--red);
}

.danger-zone h2,
.danger-zone h2 svg path {
  color: var(--red);
  fill: var(--red);
}

/* Spinner */
.spinner { 
    border: 4px solid transparent; /* Úplně neviditelný okraj */
    border-left-color: #182f66; /* Tmavě modrá pro točící se část */
    border-radius: 999px; 
    width: 24px; 
    height: 24px; 
    animation: spin 1s linear infinite; 
    display: inline-block; 
    vertical-align: middle; 
    margin-right: 10px;
}

#loading-spinner-container {
    text-align: center;
    padding: 50px 20px;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@keyframes ring-animation {
    0% { transform: rotate(0); }
    15% { transform: rotate(20deg); }
    30% { transform: rotate(-18deg); }
    45% { transform: rotate(14deg); }
    60% { transform: rotate(-10deg); }
    80% { transform: rotate(5deg); }
    100% { transform: rotate(0); }
}

.is-ringing { animation: ring-animation 0.8s ease-in-out; }

/* Sidebar Navigation */
#sidebar {
    width: 256px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    position: static;
    flex: 0 0 256px;
    padding: 32px 0px 40px 0px;
    align-items: center;
}

/* Logo Area */
#logo-container {
    max-width: 104px;
    height: auto;
}

/* Bez tohoto je SVG inline a pod logem vzniká ~7px mezera na účaří (descender). */
#logo-container svg { display: block; }

/* Side navigation Menu */
#side-menu {
    flex: 1;
    padding: 0px;
    display: flex;
    gap: 15px;
}

.side-section { padding: 0px 20px 0px 40px; }

/* Figma: ikony kategorií 18×18, chevron 16×16. Dřív tu bylo 22px,
   což posouvalo text top-level položek o 4px doprava. */
.side-section svg{
    width: 18px;
    min-width: 18px;
    height: 18px;
}

.side-section .chevron-icon {
    width: 16px;
    min-width: 16px;
    height: 16px;
}

#dodavatele-icon { scale: 0.95; }

#dodavatele-icon:hover { overflow: visible;}

.side-section path { fill: var(--background-color); }

.side-section.row-8, .side-section .row-8 { gap: 16px; }

.side-section-budova {
    background-color: var(--primary-hover);
    display: flex;
    gap: 8px;
    align-items: center;
    transition: padding-left .28s cubic-bezier(.2,.9,.2,1); /* smooth */
}

.side-section-budova svg { 
    width: 13px; 
    height: 13px;
    margin-top: 3px;
}

.side-section-budova:hover {
    padding-left: 55px;
}

.side-item { 
    transition: background-color 0.3s;
    padding: 12px 0px;
    width: 100%;
}

.side-section:hover .chevron-icon path { stroke-width: 1.5px; }

.side-section.active { background-color: var(--background-color); }

.side-section.active .side-item { color: var(--primary-color); }

.side-section.active path { fill: var(--primary-color); }


/* Nové menu - funkční u školství zatím */
.side-submenu {
    display: none;
    background-color: var(--primary-hover);
}

.side-section-wrapper.is-open .side-submenu {
    display: flex;
    flex-direction: column;
}

.side-section-wrapper.is-open .chevron-icon {
    transform: rotate(180deg);
}

.chevron-icon { transition: transform 0.2s ease; }

.chevron-icon path { fill: none;}

/* Uvnitř formulářového řádku pravidlo výš prohrávalo: `.row-container path`
   (ř. 1239) má shodnou specificitu, ale leží níž, takže z obrysové šipky dělalo
   plný klín (past row-container-path-fill). Autorizace uživatele 2026-08-20. */
.row-container .chevron-icon path { fill: none; }

.side-submenu-item {
    display: block;
    padding: 12px 20px 12px 78px;
    color: var(--background-color);
    text-decoration: none;
    transition: background-color 0.2s;
    cursor: pointer;
}

.side-submenu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.side-submenu-item.active {
    background-color: var(--background-color);
    color: var(--primary-hover);
    font-weight: var(--font-weight-semibold);
}

/* Hover v levém menu: pozadí je vždy --light-primary, barva textu a ikon
   se liší podle toho, jestli je kategorie rozbalená (open) nebo sbalená (close).
   Chevron a větev jsou stroke="currentColor", takže barvu dědí samy. */
.side-section:hover,
.side-submenu-item:hover:not(.active) {
    background-color: var(--light-primary);
    color: var(--primary-hover);
}

.side-section:hover .side-item { color: var(--primary-hover); }

.side-section:hover svg:not(.chevron-icon) path { fill: var(--primary-hover); }

.side-section-wrapper.is-open .side-section:hover,
.side-section-wrapper.is-open .side-section:hover .side-item {
    color: var(--primary-open-hover);
}

.side-section-wrapper.is-open .side-section:hover svg:not(.chevron-icon) path {
    fill: var(--primary-open-hover);
}

.divider {
    background-color: var(--light-grey);
    min-height: 1px;
    height: 1px;
}

.ver-divider {
    background-color: var(--light-grey);
    width: 1px;
    max-width: 1px;
    height: 36px;
}

/* Nižší varianta pro drobečkovou navigaci (Figma: 1×20, primary/primary m). */
.ver-divider-sm {
    background-color: var(--primary-m);
    width: 1px;
    max-width: 1px;
    flex: 0 0 1px;
    height: 20px;
}

/* Drobečková navigace: šipky zpět/vpřed, oddělovač, cesta */
/* Figma text styl „milnik mensi": Source Sans 3, SemiBold, 14/16 */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0px 40px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
}

.breadcrumb-nav-btn {
    display: flex;
    align-items: center;
    padding: 0px;
    background: none;
    border: none;
    cursor: pointer;
}

/* Šipky zpět/vpřed nemají žádný hover stav. */
.breadcrumb-nav-btn path { fill: var(--primary-m); }

/* Figma: segment cesty je pilulka 24px s 8px vodorovným paddingem, výplň
   se ukáže až na hover. Záporné marginy ruší dopad paddingu na layout,
   takže text zůstane přesně tam, kde byl. */
.breadcrumb-item {
    color: var(--dark-grey);
    text-decoration: none;
    padding: 4px 8px;
    margin: -4px -8px;
}

.breadcrumb-item:hover {
    background-color: var(--light-primary);
    color: var(--primary-hover);
}

.breadcrumb-current { color: var(--primary-color); }

.breadcrumb-sep path { stroke: var(--dark-grey); }

#content > .divider { margin: 48px 0; }

#side-menu .divider { opacity: 0.5; }

/* Main Content Area */
#main-content {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0px 40px;
    display: flex;
}

/* Top Header Bar */
#top-header {
    display: flex;
    gap: 18px;
    border-bottom: 4px solid var(--primary-color);
    padding: 16px 0px 18px 0px;
}

#top-header-inside {
    padding: 0px 40px;
    justify-content: space-between;
}

/* Header Actions (Search, Icons) */
#header-actions {
    justify-content: flex-end;
    gap: 24px;
}

.relative, .search-container, .header-icon, .nazev-edit, .dropdown, input[type="checkbox"], .error-404, .timeline, .tl-item, .calendar-cell--day, .calendar-event, .calendar-allday-event, .calendar-time-event,
.calendar-time-grid, .calendar-time-col, .profile, .mini-donut--56, .scanner-frame
{ position: relative; }

.search-container input {
    padding: 12px;
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    width: 240px;
    height: 35px;
    background-color: var(--background-color);
    outline: none;
    transition: border-color 0.3s;
}

/* Globální pravidlo pro formulářové inputy (viz `input:not()…:not()` níže v souboru)
   má specificitu (0,0,6,2) a přebilo by šířku, padding i rámeček hledání.
   Scopování na #top-header dá (0,1,1,1), což vyhraje. Figma: 400×36. */
#top-header .search-container input {
    width: 400px;
    height: 35px;
    min-height: 35px;
    padding: 12px;
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    background-color: var(--background-color);
}

.search-container input:focus { border-color: var(--primary-color); }

.search-container input::placeholder { color: var(--placeholder-color); }

.search-container button {
    position: absolute;
    right: 12px;
    top: 6px;
    padding: 0px;
    background: none;
    border: none;
}

.header-icon {
    display: flex;
    align-items: center;
    width: 25px;
    height: 28px;
    padding: 0px;
    background-color: transparent;
    border: none;
}

.header-icon path, .tab-panel .header-icon path
{ fill: var(--primary-color); }
.header-icon:hover path, .asset-table .header-icon:hover path 
{ fill: var(--primary-hover); }

.header-icon-light { opacity: 0.3; }

.header-icon-sm {
    width: 22px;
    height: 25px;
}

.header-icon-delete:hover path, .asset-table .header-icon-delete:hover path { fill: var(--red); }

.header-icon-succes:hover path, .asset-table .header-icon-succes:hover path { fill: var(--green); }

.header-icon-default { 
    cursor: default; 
    opacity: 0.3;
}

span.header-icon {
    cursor: default;
    justify-content: center;
}

/* Edit názvu budovy */
.nazev-edit {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
  }

.nazev-input{
    display: inline-block;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;

    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin: 0;

    white-space: nowrap;
    min-width: 1ch;
    max-width: 100%;
}

.nazev-input:focus{
    outline: 0;
    box-shadow: none;
}

.nazev-edit .nazev-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 0;
    padding: 0;
    margin-left: 0;
    overflow: hidden;

    visibility: hidden;
    pointer-events: none;

    transform: translateX(-10px);
    transition:
        width .18s ease,
        margin-left .18s ease,
        padding .18s ease,
        opacity .18s ease,
        transform .18s ease;
    will-change: width, opacity, transform;
}

.nazev-edit:hover .nazev-edit-btn,
.nazev-edit:focus-within .nazev-edit-btn {
    width: 28px;
    margin-left: 6px;

    opacity: 0.3;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(0);
}

/* sizer = jen na měření šířky textu */
.nazev-sizer {
    position: absolute;
    visibility: hidden;
    white-space: pre;
    pointer-events: none;
    height: 0;
    overflow: hidden;
 }
  
.header-icon-light:hover, .nazev-edit:hover .nazev-edit-btn:hover,
.nazev-edit:focus-within .nazev-edit-btn:hover { opacity: 1; }

/* Dropdown menu */
.dropdown-menu {
    position: absolute; 
    top: 40px; 
    right: 0;
    min-width: 240px; 
    box-shadow: 0 10px 30px rgba(37,34,35,.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-16px);
    transition: opacity .15s ease, transform .15s ease;
    z-index: 1000;
}

.dropdown-menu-left { left: 0; }
.dropdown-sm { min-width: 288px; }

.dropdown-lg { 
    min-width: 480px; 
    padding: 24px;
}
.dropdown-lg .calendar { padding: 0px; }

.dropdown-menu.is-open { 
    opacity: 1; 
    transform: translateY(0); 
    pointer-events: auto; 
}

.dropdown-ai { 
    padding: 16px;
    width: 320px;
    border-radius: 4px;
}

.menu-item, .action-menu-item { 
    display:flex; 
    padding: 16px 20px;
    gap: 16px;
    align-items: center;
}

.menu-item:hover svg path { fill: var(--background-color);}

.action-menu-item { 
    background-color: var(--background-color);
    border: none;
    text-align: left;
    width: 100%;
    justify-content: flex-start;
}
.action-menu-item:hover {
    background-color: var(--light-primary);
}

/* NOTIF LIST */
.dropdown-notification {
    display: flex;
    gap: 24px;
}

.notif-list {
  max-height: 320px;
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.notif-list li:nth-child(odd) > a { background-color: var(--secondary-color); }

.notif-item > a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 10px;
}

.notif-item > a:hover, .notif-list li:nth-child(odd) > a:hover { background-color: var(--light-primary); }

.notif-meta {
  font-size: 12px;
  line-height: var(--line-height-xxs);
  color: var(--placeholder-color);
}

.notif-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  align-self: center;
}

.notif-item.is-read .notif-dot { background-color: transparent; }

.notif-item.is-unread .notif-title, .required::after, .menu-item.logout, .alert-error, .alert-danger, .alert-red 
{ color: var(--red); }

.notif-empty {
  padding: 12px;
  color: var(--placeholder-color);
  text-align: center;
}

/* Badge číslo na ikoně */
.header-icon[data-badge]::after, .filter-chip[data-badge]::after {
  content: attr(data-badge);
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

.header-icon:not([data-badge]), .filter-chip:not([data-badge]),
.header-icon[data-badge=""]::after, .filter-chip[data-badge=""]::after 
{ content: none; }

/* Top navigation Menu */
#top-menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    transition: max-height 0.4s cubic-bezier(.25,.9,.25,1);
    max-height: 44px;
    overflow: hidden;
    background-color: var(--primary-color);
    color: var(--background-color);
}

#top-menu.collapsed {
    max-height: 24px;
    background-color: var(--secondary-color);
}

.top-menu-content {
    display: flex;
    flex-wrap: nowrap;   
    min-width: 0; 
    text-align: center;
    transition:opacity .3s ease;
}

#top-menu.collapsed .top-menu-content { opacity: 0; }

.top-section {
    justify-content: center;
    padding: 12px;
    flex: 1 1 0;
    min-width: 160px;
}

#top-menu.collapsed .top-section {
    cursor: default;
    pointer-events: none;
}

.top-item, .menu-item { color: inherit; }

.menu-item.active {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

/* Tmavá lišta: aktivní tab má pozadí --background-color (ne světle modrou
   z hoveru) a modrý text — aktivní záložka tak splývá s obsahem pod lištou. */
#top-menu .top-section.active {
    background-color: var(--background-color);
    color: var(--primary-hover);
}

.top-menu-arrow {
    justify-content: center;
    width: 40px;
    height: 40px;
    max-height: 40px;
    color:var(--primary-color);
    border: none;
}

#top-menu.collapsed .top-menu-arrow { background-color: var(--secondary-color); }

/* Na tmavé liště je text tabů světlý — .top-section má vlastní barvu
   (skupina u --primary-color), takže dědičnost z #top-menu nestačí. */
#top-menu .top-section {
    color: var(--background-color);
    position: relative;
}

/* Hover tabu: světlé pozadí, modrý text a trojúhelníček u horní hrany
   (Figma Polygon 10×6). Skupina s --primary-hover je dřív v souboru,
   takže tato pravidla vyhrají pořadím. */
#top-menu .top-section:hover {
    background-color: var(--light-primary);
    color: var(--primary-hover);
}

#top-menu .top-section:hover::before,
#top-menu .top-section.active::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    width: 10px;
    height: 6px;
    margin-left: -5px;
    background-color: var(--primary-hover);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M5 6L0 0L10 0Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M5 6L0 0L10 0Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Šipka splývá s tmavou lištou a zůstává modrá i ve sbaleném stavu
   (proto i selektor s .collapsed — jinak by ji přebilo pravidlo výš). */
#top-menu .top-menu-arrow,
#top-menu.collapsed .top-menu-arrow {
    background-color: var(--primary-color);
    /* Původních 40px nechávalo 4px proužek pod tlačítkem, takže hover
       nesahal až dolů. Stretch ho roztáhne na výšku lišty v obou stavech. */
    align-self: stretch;
    height: auto;
    max-height: none;
}

#top-menu .top-menu-arrow path { fill: var(--background-color); }

/* Sbalený stav: lišta je světlá, šipka proto nemá mít modrý čtverec —
   splývá s pruhem a modrá zůstane jen samotná ikona.
   Musí stát PŘED hover pravidlem níž: obě mají specificitu (1,2,0),
   takže rozhoduje pořadí v souboru a hover má vyhrát. */
#top-menu.collapsed .top-menu-arrow { background-color: transparent; }

#top-menu.collapsed .top-menu-arrow path { fill: var(--primary-color); }

/* Hover šipky: světlejší modrá, ikona zůstává bílá. Musí mít ID specificitu,
   jinak by ho přebilo #top-menu .top-menu-arrow výš. */
#top-menu .top-menu-arrow:hover { background-color: var(--primary-hover); }

.top-menu-arrow:hover path { fill: var(--background-color); }

/* Ve sbaleném stavu je nutné bílou ikonu na hoveru vrátit explicitně:
   pravidlo výš má jen (0,2,1), kdežto sbalená modrá ikona (1,2,1) —
   bez tohoto by na tmavém hoveru zůstala modrá na modré. */
#top-menu.collapsed .top-menu-arrow:hover path { fill: var(--background-color); }

.top-menu-arrow svg {
  transition: transform 0.45s cubic-bezier(.19,1,.22,1);
  transform-origin: center;
}

.top-menu-arrow[aria-expanded="false"] svg { transform: rotate(180deg); }

/* Content Wrapper */
#content {
    flex: 1;
    display: flex;
    gap: 40px;
    /* Figma: mezi lištou tabů a akčním pruhem je 24px, ne 40. */
    padding: 24px 0px 40px 0px;
    background-color: var(--secondary-color);
    padding-bottom: 320px;
}

/* Card Grid Layout */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: start;
}

.card {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    padding: 36px 32px;
    display: flex;
    align-items: flex-end;
    width: 243.2px;
    height: 168px;
}

/* Redesign 2026-07: hover karet je světle modrý (#EDF2FF) s tmavým rámečkem
   i textem — globální nový hover, schválený uživatelem pro celou aplikaci. */
.card:hover {
    border-color: var(--primary-hover);
    background-color: var(--light-primary);
    color: var(--primary-hover);
}

/* Card Small */
.card-grid-sm { gap: 8px; }

.card-sm {
    border-width: 2px;
    width: 160px;
    height: 110px;
    padding: 18px;

    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.card-sm span, td .table-poznamka {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-family: var(--font-family);
}

td .table-poznamka { font-family: var(--font-inter);}

/* Rozložení divů */
.two-containers {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: stretch;
}

.two-containers > div { width: 50%; }
.two-containers .form-container { max-width: none; }

.nastaveni-row-2 { 
    display: flex; 
    align-items: stretch; 
}

.nastaveni-row-2 > .table-container { 
    flex: 1 1 0; 
    min-width: 0; 
}
.nastaveni-row-2 > .table-container.col-fixed { 
    flex: 0 0 400px; 
    max-width: 400px; 
}

.column-container {
    display: flex;
    gap: 40px;
}

.row-container, .db-cards {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

.row-container path { fill: var(--text-color); }

.heading-center h1 { 
    text-align: center;
    text-transform: uppercase;
}

.heading-center h2, .heading-center h1 {
    margin-bottom: 16px;
    text-align: center;
}

.heading-center p { text-align: center; }

/* Detail container */
.detail-container {
    display: flex;
    gap: 40px;
    height: fit-content;
}

.detail-container .form-container { max-width: 70%; }

.form-container svg, .as-center { align-self: center; }

/* Base button class - shared properties */
button {
    text-decoration: none;
    width: fit-content;
    height: max-content;
    justify-content: center;
    background-color: transparent;
    border: none;
    font-family: var(--font-family);
}

.btn, input[type="file"]::file-selector-button  {
    justify-content: center;
    padding: 8px 24px;
    text-align: center;
    /* Design: tlačítka mají obrys 1px (dřív 2px) — padding kompenzuje výšku. */
    border: 1px solid var(--primary-color);
}

/* Small button modifier */
/* Figma: padding 5/13. Dříve tu byly 4px, aby tlačítko vyšlo na 30 i s 1px
   rámečkem; s 5px vychází 32. Uživatel zvolil věrnost paddingu
   před výškou 30. Autorizoval uživatel 2026-09-02. */
.btn-sm, input[type="file"]::file-selector-button  {
    padding: 5px 13px;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
}

/* Primary button */
.primary-btn {
    background-color: var(--primary-color);
}

.primary-btn:hover {
    /* Redesign 2026-07: hover primary tlačítek je světle modrý (#EDF2FF),
       ne průhledný. Globální změna schválená uživatelem — platí pro celý
       systém, ne jen pro redesignované obrazovky. */
    background-color: var(--light-primary);
    border-color: var(--primary-hover);
    color: var(--primary-hover);
}

.primary-btn-full {
    background-color: var(--primary-color);
    color: var(--background-color);
    width: 100%;
    justify-content: center;
    border: 2px solid var(--primary-color);
}

.primary-btn-full:hover {
    background-color: transparent;
    border-color: var(--primary-hover);
    color: var(--primary-hover);
}

/* Secondary button full-width */
.secondary-btn-full {
    background-color: transparent;
    color: var(--primary-color);
    width: 100%;
    justify-content: center;
    border: 2px solid var(--primary-color);
}
.secondary-btn-full:hover {
    border-color: var(--primary-hover);
    color: var(--primary-hover);
}

/* Back button */
.back-btn {
    display: inline-flex;
    background-color: transparent;
    padding: 8px;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.back-btn svg path {fill: var(--primary-m);}

.back-btn:hover svg path {fill: var(--primary-hover);}

/* Plus button */
.plus-btn {
    justify-content: center;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 8px;
    width: fit-content;
    gap: 8px;
    color: var(--background-color);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-semibold);
}

.plus-btn span {font-family: var(--font-family);}
.plus-btn.delete-btn { border: none; }

.plus-btn svg { width: 19px; height: 19px;}
.plus-btn svg path {
    fill: var(--background-color);
    transition: fill 0.25s ease;
}

.plus-btn.delete-btn svg path {
    fill: var(--text-color);
    transition: fill 0.25s ease;
    opacity: 0.6;
}

.plus-btn:hover {
    background-color: transparent;
    border-color: var(--primary-hover);
    color: var(--primary-color);
}

.plus-btn:hover svg path { fill: var(--primary-color);}

.plus-btn.delete-btn:hover {
    background-color: transparent;
    border: none;
}

.plus-btn.delete-btn:hover svg path { opacity: 1; }

.secondary-plus-btn {
    justify-content: center;
    background-color: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 8px;
    width: fit-content;
}

.secondary-plus-btn:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--background-color);
}
.secondary-plus-btn svg path {fill: var(--primary-color);}
.secondary-plus-btn:hover svg path { fill: var(--background-color); }

.plus-btn-sm { padding: 6px; }

/* Secondary button */
.secondary-btn, input[type="file"]::file-selector-button
{ background-color: transparent; }

/* Redesign 2026-07: hover secondary tlačítek je světle modrý (#EDF2FF) s tmavě
   modrým textem — stejně jako u .primary-btn. Skupinová pravidla výše v souboru
   dávají .secondary-btn:hover tmavou výplň a bílý text; tady je přebíjíme
   (stejná specificita, pozdější pořadí). Globální změna schválená uživatelem. */
.secondary-btn:hover, input[type="file"]::file-selector-button:hover
{
    background-color: var(--light-primary);
    color: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* WebKit dvojče k ::file-selector-button. Musí zůstat samostatné pravidlo —
   Firefox zahodí celou skupinu selektorů, když je v ní jediný neplatný, takže
   vendorový pseudo-element nesmí do sdílených comma-listů výše v souboru
   (hlídá app/tests/unit/test_css_selektory.py). Deklarace odpovídají kaskádě,
   kterou ::file-selector-button dostane přes .btn / .btn-sm / .secondary-btn. */
input[type="file"]::-webkit-file-upload-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 13px;
    text-align: center;
    border: 1px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    font-weight: var(--font-weight-semibold);
}

input[type="file"]::-webkit-file-upload-button:hover {
    background-color: var(--light-primary);
    color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.secondary-btn-light {
    border-color: var(--background-color);
    color: var(--background-color);
}

/* Delete button */
.delete-btn { 
    background-color: var(--red);
    color: var(--background-color);
    border-color: var(--red);
}

.delete-btn:hover { 
    filter: brightness(1.1);
    border-color: var(--red); 
}

/* Tertiary button */
.tertiary-btn {
    display: flex;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--primary-color);
    opacity: 0.8;
    padding: 8px 12px;
    text-decoration: none;
    text-align: center;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
}

.tertiary-btn:hover {
    border-bottom-color: var(--primary-hover);
    color: var(--primary-hover);
    opacity: 1;
}

.link-underline { 
    text-decoration: underline; 
    color: var(--text-color); 
}

.link-underline:hover {
    color: var(--primary-hover);
}

/* Utilita: podtržení až na hover (doplněk k .link-underline, které podtrhává
   trvale). Záměrně nesahá na barvu ani velikost — ty se řeší zvlášť
   (.text-primary-hover, .text-aqua), aby šla utilita kombinovat kdekoliv.
   Pozor: uvnitř #settings-nav ji přebije `#settings-nav a` (selektor s id). */
.underline-hover:hover { text-decoration: underline; }

.action-buttons {
    gap: 16px;
    justify-content: flex-start;
    white-space: nowrap;
}


.btn-default, .btn-default:hover {
    color: var(--primary-m);
    border-color: var(--primary-m);
    background-color: transparent;
    cursor: default;
}

.btn-default svg path, .btn-default:hover svg path { fill: var(--primary-m)}

.view-toggle { 
    background-color: var(--background-color); 
    padding: 8px; 
}

.view-toggle-btn {
    background: transparent; 
    border: none; 
    padding: 4px; 
    cursor: pointer; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
}

.view-toggle-btn:hover { background-color: var(--primary-hover); }

.view-toggle-btn:hover svg path, .view-toggle-btn:hover svg rect {
    fill: var(--background-color);
    transition: fill 0.2s ease;
}

.view-toggle-btn.active svg path, .view-toggle-btn.active svg rect {
    fill: var(--primary-color);
}

.view-toggle-btn.active { background-color: var(--light-primary); }


/* --- Tag kontejner: jen tagy, žádný inline editor --- */
.tag-input {
    width: 100%;
    min-height: 48px;
    height: auto;
    padding: 10px;
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: flex-start;
}

.tag-input:empty::before {
    content: "Zatím žádná evidenční čísla.";
    color: var(--placeholder-color);
    font-family: var(--font-inter);
    font-size: var(--font-size-sm);
}

.tag-input .tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    flex: 0 0 auto;
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-family: var(--font-inter);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.tag-input .tag .tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 2px;
}

.tag-input .tag .tag-remove:hover path { stroke-width: 2.3; }
.tag-input .tag .tag-remove svg {
    display: block;
    align-self: initial;
}

.tag-input .tag-more {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-family: var(--font-inter);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* Řádek "zadávací input + tlačítko Vybrat z registru majetku" */
.id-entry-row {
    flex: 0 0 100%;
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.id-entry-row .tag-editor {
    flex: 1 1 240px;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--grey);
    border-radius: 8px;
    background-color: transparent;
    font-family: var(--font-inter);
    font-size: var(--font-size-sm);
}

.id-entry-row>[data-role-picker] { flex: 1 1 240px; }

/* Administrator Profile Section */
.administrator-profile {
    padding: 24px 40px;
    gap: 20px;
    max-width: 100%;
}

.administrator-info {
    display: flex;
    justify-content: start;
    gap: 12px;
}

.administrator-details {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 12px;
}

/* Calendar Container - Two Column Layout */
.calendar-container {
    display: flex;
    gap: 32px;
    justify-content: space-between;
    padding: 28px 40px;
}

/* Calendar Section (Left Side) */
.calendar {
    display: flex;
    gap: 32px;
    min-width: 480px;
    padding: 0 24px;
}

/* Calendar Header with Month/Year and Navigation */
.calendar-header {
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.arrows-nav { gap: 3px; }

.arrows-nav .arrow-up, .arrows-nav .arrow-up {
    display: flex;
    align-items: center;
}

.arrows-nav .arrow.active svg path { fill: var(--primary-hover); }

th[data-sort] { cursor: pointer; }

.calendar-header .arrows-nav{ gap: 12px; }

.calendar-header .arrows-nav a { height: 20px; }

.arrow:hover path { fill: var(--primary-hover); }

/* Calendar Table */
.calendar table {
    border-collapse: separate;
    border-spacing: 8px;
    margin: 0;
    align-self: center;
}

.calendar table th {
    background-color: transparent;
    font-weight: var(--font-weight-normal);
    text-align: center;
    border: none;
}

.calendar table td {
    text-align: center;
    background-color: var(--secondary-color);
    width: 52px;
    height: 52px;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
    font-weight: var(--font-weight-normal);
}

.calendar table td:hover {
    background-color: var(--darker-table-line);
    color: var(--text-color);
}

/* Empty cells */
.calendar table td:empty {
    background-color: transparent;
    border: none;
    cursor: default;
}

/* Events List Section (Right Side) */
.calendar-container-events {
    height: 414px;
    overflow: hidden;
}

.calendar-events {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    max-height: 354px;
    overflow-y: auto;
}

/* Individual Event Item */
.event-item {
    padding: 16px;
    border-radius: 8px;
    background-color: var(--secondary-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-description {
    color: var(--text-color);
}

.event-description p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.event-location {
    display: flex;
    flex-direction: row;
    gap: 3px;
}

/* Tables */
.table-container, .notifikace-container {
    display: flex;
    gap: 32px;
    /* Figma: karta má nahoře i dole 32px, po stranách 40px. */
    padding: 32px 40px;
}

.table-container .search-container input { width: 200px; }

.asset-table {
    border-collapse: collapse;
    background-color: transparent;
    table-layout: auto;
    height: fit-content;
}

.asset-table tr { vertical-align: middle; }

.asset-table td, .asset-table th {
    padding: 12px 8px;
    text-align: left;
    max-width: 300px;
    position: relative;
    overflow: visible;
}

.asset-table thead th { 
    vertical-align: bottom;
    font-weight: var(--font-weight-semibold) 
}

.asset-table tbody tr:nth-child(odd) { background-color: var(--darker-table-line); }
.asset-table tbody tr[data-href]:hover {
    cursor: pointer;
    background-color: var(--light-primary);
}

.asset-table .action-buttons {
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.asset-table td a:not(.action-menu-item) {
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.asset-table input[type="checkbox"] { margin-top: 8px; }

.col-wrap-200 {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
}

.col-wrap-200 span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.scroll-table:not(.scroll-table.form-100) {
    overflow-x: auto;
    overflow-y: hidden;
    /* prostor pro otevřený status dropdown */
    padding-bottom: 220px;
    margin-bottom: -220px;
}

dialog .scroll-table {
    padding-bottom: 24px;
    margin-bottom: 0;
}

.scroll-p {
    overflow-y: auto;
    max-height: 320px;
}

.scroll-table.form-100 {
    flex: 1 1 auto;   /* místo 0 0 100% */
    min-height: 0;    /* důležité u flexu */
    height: auto;     /* zruší fit-content efekt */
    max-height: 800px;
    overflow-y: auto;
}

.scroll-table.form-100.short { 
    max-height: 34vh; 
}

.scroll-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--background-color);
    box-shadow: inset 0 -1px 0 var(--light-grey);
    cursor: pointer;
}

/* Circle */
.circle:not(.arrows-nav.circle):not(.tag-input .tag) {gap: 8px;}

.circle-column { gap: 4px; }

.circle::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
}

.circle-sm::before {
    min-width: 10px;
    max-width: 10px;
    height: 10px;
}

.tag-color-option.circle::before {
    width: 24px;
    height: 24px;
}

.ramecek {
    display: flex;
    padding: 12px;
    background-color: var(--darker-table-line);
    gap: 16px;
}

.ramecek p, .text-xs {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
}

/* Pagination */
.pagination {
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 24px;
}

.pagination button, .pagination .dots {
    font-family: var(--font-family);
    padding: 8px 12px;
    border-radius: 999px;
    background-color: transparent;
    border: none;
}

.pagination .arrow-btn {
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background-color: transparent;
    border: none;
}

.pagination .arrow-btn:hover:not(:disabled) { background-color: transparent !important;}

.pagination .arrow-btn:hover:not(:disabled) svg path {
    fill: var(--primary-hover);
    transition: fill 0.2s ease;
}

.action-buttons path, .event-location path, .pagination .arrow-btn svg path
{ fill: var(--primary-color); }

.pagination .arrow-btn svg path { transition: fill 0.2s ease; }

.pagination .arrow-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination button.active {
    background-color: var(--primary-color);
    cursor: default;
}

.pagination .dots {
    border: none;
    cursor: default;
    color: var(--text-color);
    opacity: 0.8;
}

/* Overlay Background na formy */
.overlay-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(37, 34, 35, 0.32);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.overlay-backdrop.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

/* Form */
.form-container {
    max-width: 70%;
    padding: 40px;
    display: flex;
    gap: 24px;
}

form, .form {
    display: flex;
    gap: 24px;       
    align-content: flex-start;
    flex-wrap: wrap;
}

.form-btns {
    margin-top: 24px;
    flex: 0 0 100%;
    flex-direction: row;
}

form > div, .room-row > div, .form > div  {
    display: flex;
    gap: 8px;
    margin: 0;
    flex: 0 0 31%;
    max-width: 100%;
}

table form, .w-auto { width: auto;}

.form-2col > div { flex: 0 0 48%; }
form .form-100, form > h2, form h3, form .h3, form h4, form .row-container, form .divider, form .column.g8-8px, .form-sekce { 
    flex:  0 0 100%;
    height: fit-content;
}

form .space-between h3, .js-ia-accordion-toggle .row-container
{ flex:auto; }

label, .medium, .notif-title, .faq-container button, .calendar-allday-label, .pozadi-datum, .icon-toggle, .calendar-day-head, .calendar-cell--weekday,
.calendar-event, .calendar-allday-event, .calendar-time-event, .calendar-cell--day  {
    font-weight: var(--font-weight-medium);
}

.normal { font-weight: 500; }

.room-row {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 0 0 100%;
    gap: 24px;
}

.room-row > div {
    flex: 0 0 31%;
    align-content: center;
}

form :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
  select, textarea, .input), input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not(.filter-group input),
  textarea, .input, input[type="time"], select:not(.filter-group select) {
    width: 100%;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--grey);
    border-radius: 8px;
    background-color: transparent;
}

form input[type="file"] { width: 100%; }

form div:has(textarea):not(.room-row):not(.form):not(.form-sekce):not(.js-ia-accordion-body):not(form .column.g8-8px):not(form .column.g16px) {
    flex: 0 0 100%;
    max-height: 100px;
}

textarea { resize: vertical; }

form > h2 { margin: 24px 0px 8px 0px; }

form :where(input[type="date"]) {
  -webkit-appearance: none;
  appearance: none;
}

/* Checkbox */
.dropdown-menu form > div:has(input[type="checkbox"]), .calendar-side-filter {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

input[type="checkbox"] {
    appearance: none;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    border: 2px solid var(--light-grey);
    border-radius: 4px;
    display: inline-block;
}

input[type="checkbox"]:hover { border-color: var(--primary-hover); }
input[type="checkbox"].chb-green:hover { border-color: var(--green); }
input[type="checkbox"].chb-sky-blue:hover { border-color: var(--sky-blue); }
input[type="checkbox"].chb-indigo:hover { border-color: var(--indigo); }
input[type="checkbox"].chb-pink:hover { border-color: var(--tm-pink); }

/* Po zaškrtnutí */
input[type="checkbox"]:checked {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}
input[type="checkbox"].chb-blue:checked {   
    border-color: var(--primary-color); 
    background-color: var(--primary-color);
}
input[type="checkbox"].chb-green:checked {
    border-color: var(--green);
    background-color: var(--green);
}
input[type="checkbox"].chb-sky-blue:checked {
    border-color: var(--sky-blue);
    background-color: var(--sky-blue);
}
input[type="checkbox"].chb-indigo:checked {
    border-color: var(--indigo);
    background-color: var(--indigo);
}
input[type="checkbox"].chb-pink:checked {
    border-color: var(--tm-pink);
    background-color: var(--tm-pink);
}

/* Check */
input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid var(--background-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:focus-visible {border: 2px solid var(--primary-color);}

/* Custom select */
.custom-js-toggle svg {transition: transform 0.15s ease;}
.custom-js-toggle[aria-expanded="true"] svg {transform: rotate(180deg);}

.select {
    min-height: 34px;
    width: 100%;
    border: 1px solid var(--light-grey, rgba(24,47,102,.2));
    background-color: var(--background-color);
    z-index: 10;
    position: absolute;
    top: 36px;
    left: 0px;
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.select.is-open {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 6px;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);  
}

.select .row-8 {
    overflow-x: visible;
    padding: 4px 4px;
    cursor: pointer;
}

.select .row-8:hover {background-color: var(--light-primary);}
.select .row-8 label {cursor: pointer;}

.select .action-menu-item { padding: 8px 16px;}

/* Placeholder, když select je prazdný */
.select.is-open:empty::before {
    content: attr(data-empty-text); /* Bereme text z atributu pro případ, že by se mohl měnit */
    display: block;
    padding: 4px 0;
    color: var(--placeholder-color);
    font-family: var(--font-inter);
    font-size: var(--font-size-sm);
}

/* Status custom select */
.status-select {
    width: fit-content;
    position: relative;
    z-index: 1;
    width: fit-content;
}

.status-select:has(.status-select-menu.is-open) {
    z-index: 100;
}

.status-select-menu.select {
    top: calc(100% + 6px);
    left: 0;
    width: max-content;
    min-width: 140px;
    z-index: 9999;
}

.status-select-toggle {
    padding: 4px 10px;
    gap: 8px;
    justify-content: flex-start;

    border: 2px solid var(--darker-table-line);
    border-radius: 999px;
    background-color: var(--background-color);

    color: var(--text-color);
    font-family: var(--font-inter);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    cursor: pointer;
}

.status-select-toggle .status-select-label {
    flex: 1;
    text-align: left;
}

.status-select-toggle svg path {
    fill: none;
    stroke: var(--text-color);
}


.input-suffix-wrap {
    position: relative;
    display: inline-flex;
    width: 40%;
}

.input-suffix-wrap-lg {width: 100%;}

.input-suffix-wrap::after {
    content: "%";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    pointer-events: none;
}
.input-suffix-wrap.hod::after { content: "hod"; }
.input-suffix-wrap.kc::after { content: "Kč";}
.input-suffix-wrap.let::after { content: "let";}

/* Skrytí spin buttonů u number inputů */
.input-suffix-wrap input[type="number"]::-webkit-inner-spin-button,
.input-suffix-wrap input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.input-suffix-wrap input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
/* Dynamická přípona z data-suffix (přepisuje výchozí %) */
.input-suffix-wrap[data-suffix]::after {
  content: attr(data-suffix);
  color: var(--placeholder-color);
  right: 12px;
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.podpis-canvas-wrap {
    width: 100%;
}

.podpis-canvas {
    display: block;
    width: 100%;
    height: 234px;
    border: 2px solid var(--darker-table-line);
    border-radius: 8px;
    background-color: var(--background-color);
    touch-action: none;
    cursor: crosshair;
}

.input-eye {
    position: absolute;
    right: 12px;
    top: calc(50%);
    transform: translateY(-50%);
    display: flex;
}

.photo-container { gap: 24px;}

.photo-container > div {
    border-right: 1px solid var(--light-grey);
    padding-right: 24px;
    gap: 16px;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    white-space: normal;
    max-width: 200px;
}

.photo-container .photo, .photo-container svg{
    width: 160px;
    height: 200px;
}

.photo-container img  {
    object-fit: cover;
    display: block;
}

.required::after { content: " *"; } 

/* 404 Page */
.error-404 {
  align-items: center;
  justify-content: center;
}

.error-404 h1 {
  font-size: 8em;
  margin-bottom: 48px;
}

.error-404 p {
  color: var(--text-color);
  font-size: var(--font-size-lg);
  margin-bottom: 24px;
}

.graf { align-self: center; }

/* Dialog */
.dialog-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 99;
}

.dialog-backdrop.active {
    opacity: 1;
    pointer-events: all;
}

dialog, .div-dialog {
    border: none;
    padding: 24px 24px;
    width: 400px;

    margin-left: auto;
    margin-right: auto;
    margin-top: clamp(16px, 10vh, 96px);
    max-height: 80vh;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* div-dialog: umístěný přes celou šířku (left/right = 0) */
.div-dialog {
    left: 0;
    right: 0;
}

.wider-dialog {
    width: 90vw;
    max-width: 1200px;
}

.wider-dialog-sm {
    width: 50vw;
    max-width: 800px;
}

.fw-dialog { 
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
    width: fit-content; 
}

.fw-dialog p { line-height: var(--line-height-lg);}

dialog .asset-table { margin-top: 24px; }

dialog .actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.dialog-center { 
    inset: 0;
    margin: 240px auto auto auto; 
    transform: none;
}

dialog:not([open]) { display: none;}
/* dialog animace */
dialog[open] { animation: dialogSlideDown 0.2s ease-out; }
dialog.closing { animation: dialogSlideUp 0.2s ease-in forwards; }

@keyframes dialogSlideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes dialogSlideUp {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-4px); }
}

/* --- Filter bar --- */
#filter-bar, .filter-bar { 
    padding-top: 12px;
    display: flex; 
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

#top-header #filter-bar, #top-header .filter-bar { border-top: 1px solid var(--light-grey); }

#filter-bar .action-buttons, .filter-bar .action-buttons, .flex00a {
    flex: 0 0 auto;
    gap: 12px;
}

#filter-bar .top-menu-arrow, .filter-bar .top-menu-arrow { height: 40px; }

.filter-bar-categories, #filter-categories,.form #chips, .row-8, #dashboard-view-tabs  { 
    display: flex;
    flex-direction: row;
    gap: 8px;
    row-gap: 4px;
    justify-content: flex-start;
    align-items: center;
}

.filter-bar-categories form { width: auto;}

#top-header .filter-bar-categories { align-items: center; }

.filter-bar-categories, #filter-categories, #chips, .row-8, .project-board, .top-menu-content, .calendar-side-filter, .milnik-strip, #dashboard-view-tabs  {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.calendar-day-events, .calendar-events, .calendar-allday-col, .timeline, .column-container {
    overflow-y: auto;
    scrollbar-width: thin;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.filter-bar-categories::-webkit-scrollbar, .calendar-side-filter::-webkit-scrollbar,
#chips::-webkit-scrollbar, .timeline::-webkit-scrollbar,
.row-8::-webkit-scrollbar, .column-container::-webkit-scrollbar,
.project-board::-webkit-scrollbar,
.top-menu-content::-webkit-scrollbar,
.calendar-day-events::-webkit-scrollbar,
.calendar-events::-webkit-scrollbar,.calendar-allday-col::-webkit-scrollbar {
    height: 0;
    display: none;
}

.row-8 { row-gap: 8px; }

.fbc-border-btm { border-bottom: 2px solid var(--primary-color); }

.filter-group span {
    margin-right: 4px;
    cursor: default;
}

.filter-group input, .filter-group select {
    background-color: var(--darker-table-line);
    border: none;
    font-size: var(--font-size-xxs);
    line-height: var(--line-height-xxs);
    max-width: 120px;
    padding: 0;
    border: none;
    border-radius: 0;
}

.filter-group input:focus, .filter-group select:focus { outline: none; }

.filter-chip, .fc-nohover { 
    padding: 8px 16px; 
    border: none; 
    background-color: var(--darker-table-line); 
    white-space: nowrap;
}

.filter-chip.active {
    background-color: var(--primary-color);
    color: var(--background-color);
}

header .filter-chip:has(input, select):hover, .calendar-header .filter-chip:has(input, select):hover {
    background-color: var(--darker-table-line);
    color: var(--text-color);
}

.fc-purple:hover { background-color: var(--modrofialova) !important; }

.fc-purple.active { background-color: var(--purple)!important; }

/* Filter chip bar */
#filter-chips-bar { 
    border-top: 1px solid var(--light-grey);
    padding-top: 12px;
    align-items: start;
    justify-content: space-between;
    gap: 24px;
}

.chip {
    display: inline-flex; 
    align-items: center; 
    gap: 8px;
    padding: 6px 10px;
    background-color: var(--secondary-color); 
    color: var(--text-color);
    font-size: var(--font-size-xs); 
    line-height: var(--line-height-xs);
    font-weight: var(--font-weight-normal);
}

.chip .remove {
    background-color: transparent; 
    border: none; 
    display: grid; 
    place-items: center;
}

.chip .remove svg {  opacity: .5; }

.chip .remove:hover svg { opacity: 1; }

/* Tab panel filter */ 
.tab-panel .table-container { padding: 24px 40px 32px 40px; }

.tab-panel .form-container {
    max-width: none;
    padding: 0px;
}

.filtr-form {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    align-items: end;
}

.calendar-form {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    align-items: end;
}

.switch-column, .db-heading { gap: 8px; }

.sr-only{
    position:absolute!important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* Wrapper */
.switch {
    display:inline-flex;
    align-items:center;
    gap:12px;
    user-select:none;
    color:var(--text-color);
}

.switch-input{ display: none !important; }

.switch-track{
    --track-w:44px;
    --track-h:26px;
    --knob:20px;

    position:relative;
    display:inline-block;
    width:var(--track-w);
    min-width: var(--track-w);
    height:var(--track-h);
    /* Výplň vypnutého přepínače je `light grey` (#D1D5E0) podle Figmy. Původně
       tu byla `--darker-table-line` (#E7E8ED) — jenže přesně tou barvou zebruje
       .asset-table.zebra-even liché řádky (ř. 5682), takže přepínač v tabulce
       splynul s pozadím a zbyl z něj jen rámeček. Autorizoval uživatel 2026-09-01. */
    background-color: var(--light-grey);
    border:1px solid var(--light-grey);
    border-radius: calc(var(--track-h) / 2);
    transition: background .18s ease, border-color .18s ease;
}

/* Knoflík */
.switch-track::after{
    content:"";
    position:absolute;
    top:50%;
    left:3px;
    width:var(--knob);
    height:var(--knob);
    transform:translateY(-50%);
    background-color: var(--primary-color);
    border-radius:50%;
    transition: left .18s ease, transform .18s ease, background .18s ease;
}

/* Zapnuto */
.switch-input:checked + .switch-track{
    background-color: var(--green);
    border-color: var(--green);
}
.switch-input:checked + .switch-track::after{
    left: calc(var(--track-w) - var(--knob) - 3px);
    background-color: var(--background-color);
}

.switch:hover .switch-track{ border-color: var(--primary-hover); }

.switch-input:focus-visible + .switch-track{
    outline: 3px solid rgba(24,47,102,.18);
    outline-offset: 3px;
}

.row-strech {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 24px;
    margin-top: 24px;
    max-width: 800px;
}

@supports (width: -webkit-fill-available) {
  .row-strech { width: -webkit-fill-available; }
}
@supports (width: stretch) {
  .row-strech { width: stretch; }
}

/* Podpora */
.podpora-card {
    padding: 32px 16px;
    gap: 24px;
}

.podpora-card:hover path { fill: var(--background-color); }

.podpora-card h3 { text-align: center; }

.podpora-card ul {
    max-width: 75%;
    place-self: center;
}

.podpora-card ul li:not(:last-child) { margin-bottom: 8px; }

.podpora-nazev {
    gap: 8px;
    align-items: center;
}

.kontakt-card {
    border: 2px solid var(--primary-color);
    padding: 16px 32px;
    height: 136px;
    text-align: center;
    justify-content: center
}

.kontakt-card h3 { margin-bottom: 16px; }

.faq-container {
    gap: 0;
    padding: 24px 40px;
    width: 800px;
}

.faq-container button {
    border: none;
    border-top: 1px solid var(--darker-table-line);
    padding: 12px;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
}

.faq-container .faq-q:nth-of-type(odd) button { background-color: var(--darker-table-line); }

.faq-container button:hover path { fill: var(--background-color); }

.faq-container .faq-q.active button { background-color: var(--primary-color); }

.faq-container .faq-q.active path { fill: var(--background-color); }

.faq-container .faq-q > div {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 1rem;
}

.faq-container .faq-q > div p {
    margin: 1rem 0;
    text-align: left;
}

.faq-container .faq-q.active > div { max-height: 200px; }

.faq-container .faq-q.active button span:last-child { transform: rotate(180deg); }

#kontaktni-form > form { max-width: 720px; }

/* Timeline – Historie úprav */
.history-head {
    justify-content:space-between;
    gap:.5rem;
    margin-bottom: 16px;
}

.tl-count {
    font-size: var(--font-size-xs);
    opacity:.8;
}

/* vertikální osa */
.timeline {
    list-style: none;
    margin: 0 0 32px 0;
    padding-left: 24px;
    border-left: 2px solid var(--darker-table-line);
    width: 400px;

    flex: 1 1 auto;
    min-height: 0;
    height: 320px;
    overflow-y: auto;
}

.timeline-fh { height: 100%; }
.timeline-fw { width: 100%;}

.tl-content {
    padding: 1rem 1rem 1.3rem 1.3rem;
    gap: 8px;
}

.tl-item {
    margin-bottom: 16px;
    border: 2px solid var(--darker-table-line);
    border-radius: 8px;
}

.tl-item:last-child { margin-bottom: 0; }
.tl-item .row-8, .detail-card .row-8 { overflow: visible;}
.tl-item .space-between, .form-sekce .space-between { gap: 2px;}

/* tečka na ose */
.tl-pin {
    width: 16px;
    height: 16px;
    border: 3px solid var(--darker-table-line);
    position: absolute;
    left: -8px;
    top: 8px;
}

/* obsah */
.tl-row {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.tl-time {
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

.tl-content p, .tl-content form {
    margin-top: 4px;
    opacity: 0.9;
}

.tl-content a { margin-top: 12px; }

.mobil-icon, .tl-item--older { display: none;}

.edit-actions { margin-bottom: 24px; }

.history-wrap form > div { flex: 1 1 100%; }

/* Pravý panel – detail úkolu */
.task-detail {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(520px, 100%);
    max-width: 520px;
    height: 100vh;
    box-shadow: -12px 0px 80px rgba(34, 34, 37, 0.1);
    transform: translateX(100%);
    transition: transform .2s ease-out;
    z-index: 900;
}

.task-detail.is-open { transform: translateX(0);}

.task-detail-header { gap: 16px; }

.task-detail-header .space-between { flex-wrap: nowrap; }

.task-detail .column-container { overflow-y: auto; }

.task-meta p { line-height: var(--line-height-base); }

.task-description {
    background-color: var(--secondary-color);
    padding: 24px;
    gap: 12px;
    border-radius: 8px;
}

/* Komentáře */
.comments-list {
    padding-left: 0;
    border-left: none;
    width: 100%;
}

.comment { 
    gap: 8px;
    border-radius: 16px 16px 16px 0; 
}

/* PROJEKTY – BOARD LAYOUT   */
.project-board {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-wrap: nowrap;
}

.project-column {
    padding: 16px;
    flex: 0 0 320px;
    background-color: var(--secondary-color);
    gap: 16px;
}

.project-column .space-between { flex-direction: row;}

/* Jedna karta projektu */
.project-card, .db-card {
    margin-bottom: 8px;
    padding: 8px 16px;
}

/* Hover karty: modrý rámeček --primary-hover, ne šedomodrá --light-grey.
   Sjednocuje kartu se zbytkem migrovaných hoverů (.calendar-cell:hover,
   .zamestnanci-list li:hover, .switch:hover .switch-track, checkbox:hover),
   které stejnou hodnotu už mají. Pozadí i stín zůstávají.
   Autorizace uživatele 2026-08-03. */
.project-card:hover, .db-card:hover:not(.db-card.no-hover), .tl-item:has(.editable-user-section.hidden), .btns-grid button:hover,
.btns-column button.inv-dd-btn:hover, .toggle-btn:hover, .milnik-card-mini:hover {
    border-color: var(--primary-hover);
    box-shadow: 0 0px 12px 0px rgba(24, 47, 102, 0.1);
    transition: all 0.3s ease;
}

/* Výplň karty na hoveru: --light-primary (Figma „primary/light primary" —
   jemné aktivní plochy, zvýraznění, selected stavy). Dohromady s rámečkem výš
   dává hover dvojici light-primary / primary-hover, tedy stejnou kombinaci,
   jakou má migrovaný hover tlačítek (viz _cookbook.md).
   Záměrně SAMOSTATNÉ pravidlo, ne přidaná deklarace do skupiny výš: ta obsahuje
   i `.tl-item:has(.editable-user-section.hidden)`, což není hover, ale trvalý
   stav — modré pozadí by tam zůstalo napořád.
   Autorizace uživatele 2026-08-03. */
.project-card:hover, .db-card:hover:not(.db-card.no-hover), .btns-grid button:hover,
.btns-column button.inv-dd-btn:hover, .toggle-btn:hover, .milnik-card-mini:hover {
    background-color: var(--light-primary);
}

.db-card.is-active { 
    background-color: var(--light-primary);
    border-color: var(--light-primary);
}

.check-done { 
    opacity: 0.6;
    text-decoration: line-through;
}

.project-card-meta { color: var(--placeholder-color); }

.project-list-close {
    position: absolute;
    top: 8px;
    right: 8px;
}

.project-add-task { justify-content: center; }

/* Řádek s barvami */
.tag-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Jednotlivá barva (kolečko) */
.tag-color-option {
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
}

.tag-color-option:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.tag-color-option.is-active { box-shadow: 0 0 0 3px var(--light-grey); } /* Když je barva vybraná */

.calendar-grid, .calendar-week, .calendar-day {
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    overflow: hidden;
}

.calendar-row, .calendar-time-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-row.one-col, .calendar-time-grid.one-col { grid-template-columns: 1fr; }

.calendar-week-head {
    display: grid;
    grid-template-columns: 48px 1fr;
}

.calendar-cell--weekday {
    padding: 6px 8px;
    text-transform: uppercase;
    border-left: 1px solid rgba(255,255,255,0.18);
    font-size: var(--font-size-xs);
    line-height: var(--line-heigt-sm);
    text-align: center;
}

.calendar-cell--weekday .dow {
    display: block;
    text-transform: uppercase;
    opacity: 0.9;
}

.calendar-cell--weekday.is-today .date {
    background-color: rgba(255,255,255,0.18);
    padding: 2px 8px;
}

.calendar-day-head {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    align-items: baseline;
}

.calendar-day-head .dow {
    text-transform: uppercase;
    opacity: 0.9;
}

.calendar-cell {
    height: 136px;
    border: 1.5px solid var(--darker-table-line);
    padding: 4px 6px;
}

.calendar-cell:hover { border-color: var(--primary-hover); }

.calendar-cell:hover .calendar-day-number, .text-hover { color: var(--primary-hover); }

.calendar-cell--day { vertical-align: top; }

.calendar-day--other-month { opacity: 0.5; }

.calendar-day--today {
    box-shadow: inset 0 0 0 1px var(--cal-primary);
    background-color: var(--light-primary);
}

.calendar-day-events {
    list-style: none;
    margin-top: 4px;
    max-height: 80%;
    overflow-y: auto;
}

.calendar-event, .calendar-allday-event, .calendar-time-event {
    border-radius: 4px;
    padding: 4px 6px;
    margin-bottom: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.calendar-day .calendar-allday-event {
    width: fit-content;
    margin-right: 2px;
}

.calendar-event.pozadi-yellow, .calendar-event.pozadi-grey, .calendar-allday-event.pozadi-yellow,
.calendar-allday-event.pozadi-grey, .calendar-time-event.pozadi-yellow, .calendar-time-event.pozadi-grey 
{ color: var(--text-color); }

.calendar-allday {
    display: grid;
    grid-template-columns: 48px 1fr;
    border-bottom: 1px solid var(--darker-table-line);
    background-color: var(--secondary-color);
}

.calendar-allday-label, .calendar-time-labels .time {
    padding: 10px 8px;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    border-right: 1px solid var(--darker-table-line);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
}

.calendar-allday-col {
    list-style: none;
    margin: 0;
    max-height: 80px;
    padding: 6px;
    border-left: 1px solid var(--darker-table-line);
}

.calendar-day .calendar-allday-col {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.calendar-time {
    --time-col-w: 48px;
    /* Výška jedné hodiny. Odvozuje se z ní popisek hodiny, celková výška
       mřížky (24 x), vodorovné linky i pozice událostí - proto se mění jen tady.
       52px -> 56px, autorizace uživatele 2026-08-05. */
    --hour-h: 56px;

    display: grid;
    grid-template-columns: var(--time-col-w) 1fr;
    max-height: 70vh;
    overflow: auto;
}

.calendar-time-labels {
    border-right: 1px solid var(--darker-table-line);
    background-color: var(--secondary-color);
}

.calendar-time-labels .time {
    height: var(--hour-h);
    opacity: 0.8;
}

.calendar-time-grid {
    height: calc(24 * var(--hour-h));
    background:
        repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--hour-h) - 1px),
        var(--darker-table-line) calc(var(--hour-h) - 1px),
        var(--darker-table-line) var(--hour-h)
        );
}

.calendar-time-col { border-left: 1px solid var(--darker-table-line); }

/* event blocks in week/day grid */
.calendar-time-event {
    position: absolute;
    --indent: 0;
    --stack-step: 18px;  /* jak moc se to bude odsouvat */
    --edge: 6px;         /* odsazení od okraje sloupce */
    left:  calc(var(--edge) + (var(--indent) * var(--stack-step)));
    right: var(--edge);
    width: auto;
    z-index: calc(10 + var(--indent));
    top: calc(var(--start) * var(--hour-h));
    height: calc(var(--duration) * var(--hour-h));
    border: 1px solid var(--background-color);
    padding: 8px 10px;
    overflow: hidden;
}

/* filtr kalendar */
.calendar-side-filter, .calendar-form { margin-bottom: 16px; }

.icon-toggle {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 4px 10px;
    border: 1.5px solid var(--darker-table-line);
}

.icon-toggle:hover, .icon-toggle.is-active:hover {
    border-color: var(--primary-hover);
    color: var(--primary-hover);
}

.icon-toggle.is-active {
    border-color: var(--primary-color);
    background-color: var(--light-primary);
    color: var(--primary-color);
}

.hide-scrollbar {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.profile {
    width: 72px;
    height: 72px;
    flex: 0 0 72px ;
}

.profile-photo-wrap {
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(34, 34, 37, 0.08);
    border: 1px solid var(--primary-m);
}

.profile-photo{
    display: block;
    object-fit: cover;
}

.status-dot{
    position: absolute;
    width: 18px;
    height: 18px;
    z-index: 2;
    right: -2px;
    bottom: 2px;
    box-shadow: 0 8px 18px rgba(34, 34, 37,.06);
}

.profile[data-status="online"] .status-dot { background-color:#13C248; }

.profile[data-status="offline"] .status-dot { background-color: #3e3e3e; }

.profil-avatar-edit {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background-color: var(--primary-color);
    border: 1.5px solid var(--background-color);
    display: grid; place-items: center;
    padding: 0;
    cursor: pointer;
}

.db-heading h2 {
    font-size: 40px;
    line-height: 48px;
}

.db-heading p { padding-left: 3px; }

.tb { border-top: 2px solid; }

.tb-red { border-color: var(--red); }

.tb-orange { border-color: var(--orange); }

.tb-green { border-color: var(--green); }

.db-header {
    padding: 16px 20px;
    border-radius: 8px;
}

.event-item.db-card { padding: 16px 24px; }

.progress{
  flex: 1;
  height: 12px;
  width: 100%;
  background-color: var(--light-grey);
  overflow: hidden;
}

#content .progress, #content .progress-fill, .progress-fill { 
    min-height: 10px;
    height: 12px;
    max-height: 12px;
}

.tl-item .progress, .tl-item .progress-fill, .dashboard-card .progress, .dashboard-card .progress-fill {
    min-height: 8px !important;
    max-height: 8px !important;
}

.multi-progress {
    position: relative;
    height: 10px;
    background-color: var(--light-grey);
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}

.progress-layer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.mini-donut--56 {
  display: grid;
  place-items: center;
}

.mini-donut--56 canvas, .mini-donut--56{
  width: 56px;
  height: 56px;
}

.mini-donut--56 .mini-donut-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-family: var(--font-family);
}

.btns-grid { gap:8px; }

.btns-grid button, .btns-column button:not(.btn.btn-sm.primary-btn):not(.toggle-btn.active), .inv-his-card {
    border:2px solid var(--darker-table-line);
    background-color:var(--background-color);
    border-radius:8px;
    cursor: pointer;
}

.btns-grid button, .btns-column button:not(.btn.btn-sm.primary-btn) {
    padding: 12px 20px;
    gap:8px;
    justify-content:flex-start;
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-inter);
    text-align: left;
}

.btns-column button:not(.btn.btn-sm.primary-btn) { width: 100%; }

.notifikace-container {
    max-width: 800px;
    width: 100%;
    justify-self: center;
}

.notifikace-container .notif-list { max-height: 500px;}

#porucha-form > div:not(.form-btns), form#porucha-form div:has(textarea) { flex: 0 0 48% }

.new-task {
    position: absolute;
    background-color: var(--background-color);
    border-radius: 8px;
    box-shadow: 0px 0px 12px rgba(0, 6, 27, 0.10);
    z-index: 800;
    width: 480px;
    padding: 24px;
}

.new-task form > div:not(.form-btns, form div:has(textarea)) { flex: 0 0 47%; }

.range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 4px;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.range input {
    width: 100%;
    min-width: 0;
}

.range span { white-space: nowrap; }

.dashboard-card {
    padding: 16px 24px; 
    background-color: var(--background-color);
    border-radius: 8px; 
    border: 2px solid transparent; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 16px; 
    display: inline-flex;
}

/* Nadpis souhrnné karty je podle návrhu REGULAR, ne semibold. Skupinové
   pravidlo na ř. 158 (h1, h2, h3, .semibold …) dává elementu h3 váhu 600;
   selektor s třídou má (0,1,1) proti (0,0,1), takže vyhraje bez !important.
   Autorizace uživatele 2026-08-11, viz ZMENY-CSS.md záznam č. 37. */
.dashboard-card h3 {
    font-weight: var(--font-weight-normal);
}

.dashboard-card.flex110 { justify-content: space-between;}
.dashboard-card.flex110:hover:not(.dashboard-card.flex110.no-hover) {
    box-shadow: 0 0px 12px 0px rgba(24, 47, 102, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.db-card .progress { 
    max-width: 50%;
    min-width: 110px; 
}

.db-main-title {
    font-size: var(--size-36);
    line-height: var(--size-48);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family);
    color: var(--dark-grey);
}

.db-main-title-sm {
    font-size: var(--size-32);
    line-height: var(--size-39);
}

.db-graf { 
    width: 40%; 
    height: 100%;
}

.db-zamestnanci {
    width: 30%;
    height: 100%;
}

.donut-wrap {
  position: relative;
  width: 264px;
  height: 264px;
  margin-inline: auto;
  display: grid;
  place-items: center;
}

.donut-wrap.medium-donut, .donut-wrap.medium-donut .donut-canvas { 
    width: 112px; 
    height: 112px;
}

.donut-canvas{
  width: 264px;
  height: 264px;
  display: block;
}

.donut-center{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.legend-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.legend-swatch{
  width: 20px;
  height: 8px;
  display: inline-block;
}

.donut-swatch[data-swatch="paid"]{ background-color: var(--purple); }
.donut-swatch[data-swatch="unpaid"]{ background-color: var(--modrofialova); }
.donut-swatch[data-swatch="partial"]{ background-color: var(--darker-table-line); }

.sec-item {
    background-color: var(--secondary-color);
    padding: 14px 18px;
    border-radius: 8px;
    width: 100%;
}

.empty-item {
    padding: 6px 18px;
    border-radius: 8px;
    border: 2px solid var(--secondary-color);
}

.vyber-item {
    width: 90%; 
    padding: 2px 12px;
    margin-bottom: 8px;
    background-color: var(--background-color); 
    border-radius: 4px; 
    border: 2px transparent solid; 
    justify-content: space-between; 
    align-items: center; 
    display: inline-flex;
}

.vyber-item:last-child { margin-bottom: 0px;}

.vyber-item:hover, .vyber-item.active { border-color: var(--darker-table-line); }

.vyber-item.alert-row {
    background-color: var(--light-red, #fde8e8) !important;
}

.vyber-item.alert-row:nth-of-type(odd) {
    background-color: var(--light-red, #fde8e8) !important;
}

.form-sekce {
    padding: 8px 16px;
    /* Rámeček 1px globálně — 2px už se nikde nepoužívá.
       Autorizace uživatele 2026-09-06. */
    border: 1px solid var(--darker-table-line);
    border-radius: 8px;
}

.form-sekce.active { padding-bottom: 24px; }

.form-sekce.active.bc-hoverbl-50 { border-color: rgba(34, 66, 143, 0.5); }
.form-sekce.active.bc-purple-50 { border-color: rgba(138, 56, 245, 0.5); }
.form-sekce.active.bc-green-50 { border-color: rgba(50, 160, 83, 0.5); }
.form-sekce.active.bc-sky-blue-50 { border-color: rgba(48, 188, 237, 0.5); }
.form-sekce.active.bc-indigo-50 { border-color: rgba(103, 67, 223, 0.5); }
.form-sekce.active.bc-levander-50 { border-color: rgba(198, 205, 243, 0.5); }
.form-sekce.active.bc-pink-50 { border-color: rgba(215, 106, 180, 0.5); }
.form-sekce.active.bc-red-50 { border-color: rgba(195, 22, 22, 0.5); }
.form-sekce.active.bc-orange-50 { border-color: rgba(254, 150, 57, 0.5);}
.form-sekce.active.bc-grey-50 { border-color: rgba(156, 163, 175, 0.5);}

.tab-panel .form-sekce:not(.js-ia-accordion-body .form-sekce) { width: 70%;}

.milnik-nadpis {
    font-size: var(--size-18);
    line-height: var(--size-26);
    font-family: var(--font-family);
}

.milnik-arrow {
    height: 16px;
    width: 16px;
    border: none;
    background-color: transparent;
}

.js-ia-accordion.active .milnik-arrow svg {
    transform: rotate(180deg);
}

.udalost-dialog {
    width: fit-content;
    height: fit-content;
    background-color: var(--background-color);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-card {
    padding: 24px 40px 32px 40px;
    background-color: var(--background-color);
    border-radius: 8px;
    border: 2px solid transparent;
    height: stretch;
    flex: 1 1 0;
}

.detail-card:hover { border-color: transparent}

.v-item {
    border-bottom: 1px solid var(--light-grey);
    padding: 8px 0px 16px 0px;
}

.ratio-input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

.ratio-dot{
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border-radius:999px;
  position:relative;
  cursor:pointer;
  background:transparent;
}

.ratio-dot::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border: 2px solid var(--light-grey);
}

.ratio-dot::after{
  content:"";
  position:absolute;
  inset: 4px;
  border-radius:inherit;
  background: var(--green);
  transform: scale(0);
  transition: transform .14s ease;
}

.ratio-input:checked + .ratio-dot::after{transform: scale(1);}

.ratio-input:focus-visible + .ratio-dot{border: 2px solid var(--primary-color);}

.milnik-strip{
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
}

.milnik-rail{
    position: absolute;
    left: 132px;
    right: 132px;
    bottom: 37px;
    height: 4px;
    background: var(--darker-table-line);
    z-index: 0;
}

.milnik-rail-no-phase { bottom: 5px;}

.milnik-phase { z-index: 2;}

.milnik-row {
    position: relative;
    display: inline-flex;
    width: fit-content;
    gap: 32px;
    padding: 0 24px;
}

.milnik-sep {
    width: 4px;
    height: 100px;
    background-color: var(--darker-table-line);
}

.milnik-card-mini {
    width: 220px;
    padding: 8px 16px;
    background: var(--darker-table-line);
    border-radius: 8px;
    border: 2px solid transparent;
    justify-content: center;
}

.milnik-card-mini.active {
    border-color: var(--light-primary);
    background-color: var(--light-primary);
}

.milnik-title {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family);
    text-align: left;
}

.milnik-phase-label {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    font-weight: var(--font-weight-semibold);
}

.badge{
    padding: 1px 4px;
    border-radius: 999px;
    gap: 8px;
    font-size: var(--font-size-xxs);
    line-height: var(--line-height-xxs);
    font-weight: var(--font-weight-semibold);
    background: var(--red);
    border: 2px solid var(--red);
    color: var(--background-color);
}

.milnik-dot{
    width: 14px;
    height: 14px;
    border-radius: 999px;
    display: inline-block;
    border: 2px solid var(--darker-table-line);
}
.milnik-dot.aqua{ background: var(--aqua); }

.zamestnanci-list li { 
    background-color: var(--secondary-color); 
    width: 100%;
}
.zamestnanci-list li:nth-of-type(odd) { background-color: var(--levander); }
.zamestnanci-list li:nth-of-type(odd):hover { border-color: var(--primary-hover); }
.zamestnanci-list li:nth-of-type(odd) p { color: var(--background-color);}

.no-hover { cursor:default; }

.col-overtime-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.grid-auto-column {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 16px;
}

.sg-fixed-footer {
    position: fixed;
    bottom: 10px;
    left: 15px;
    z-index: 9999; /* Aby to bylo nad vším */
    font-family: 'Source Sans 3', sans-serif;
    pointer-events: none; /* Klikat lze jen na odkaz, ne na prázdné místo kolem */
}

.sg-footer-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: auto; /* Vrátí interaktivitu obsahu */
}

.sg-footer-link {
    color: var(--background-color); 
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.sg-footer-link:hover { opacity: 1; }

.sg-footer-meta {
    font-size: 9px;
    color: var(--background-color);
    opacity: 0.3;
    line-height: 1.2;
}

@keyframes ring-animation {
    0% { transform: rotate(0); }
    15% { transform: rotate(20deg); }
    30% { transform: rotate(-18deg); }
    45% { transform: rotate(14deg); }
    60% { transform: rotate(-10deg); }
    80% { transform: rotate(5deg); }
    100% { transform: rotate(0); }
}

.is-ringing { animation: ring-animation 0.8s ease-in-out; }

.loading-spinner-container {
    background: var(--background-color); 
    padding: 24px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); 
    border: 1px solid var(--darker-table-line);
    display: flex; 
    align-items: center;
    justify-content: center;
}

.progress-text { font-weight: var(--font-weight-semibold); }

/* ============================================================
   KOMUNIKACE MODULE
   PR a Komunikace — tvorba a správa příspěvků
   ============================================================ */
.komun-panel {
    padding: 16px;
}

.komun-tpl-card {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 8px 16px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.komun-tpl-card.active {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

.tb-btn {
    border: none;
    border-radius: 6px;
    padding: 4px;
    background-color: transparent;
    cursor: pointer;
    transition: background-color .2s ease;
}

.tb-btn:hover {
    background-color: var(--secondary-color);
}

.tb-color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

.tb-sep {
    width: 1px;
    height: 24px;
    background-color: var(--light-grey);
    margin: 0 2px;
    flex-shrink: 0;
}

.tb-align-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 1px);
    left: 0;
    border-radius: 8px;
    padding: 8px;
    z-index: 100;
}

.tb-align-wrapper:hover .tb-align-dropdown {
    display: flex;
}


/* --- Metrics grid --- */
.komun-metriky-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.tb-align-dropdown, .komun-metrika-card{
    background: var(--secondary-color);
}

.komun-metrika-card {
    padding: 8px;
    cursor: pointer;
    color: var(--primary-color);
}

.komun-metrika-card .m-val {
    font-family: var(--font-inter);
    font-size: var(--line-height-base);
    font-weight: var(--font-weight-semibold);
    display: block;
    padding: 4px;
}

.komun-metrika-card .m-lab {
    font-family: var(--font-inter);
    font-size: var(--size-14);
}

.komun-metrika-card.selected {
    background-color: var(--primary-color);
}

.komun-swatch-add {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px dashed var(--grey);
    justify-content: center;
    cursor: pointer;
    font-size: var(--size-18);
    color: var(--grey);
    flex-shrink: 0;
    transition: border-color .2s ease, color .2s ease;
}

/* --- Color Picker Popup --- */
.komun-swatch-add-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.kcp-popup {
    position: absolute;
    bottom: calc(100% + 4px);
    right: 0;
    width: 250px;
    background: #ebebeb;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 200;
}

.komun-swatch-add-wrapper:hover .kcp-popup {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.tb-color-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tb-color-wrapper:hover .kcp-popup {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.kcp-popup::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 7px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ebebeb;
}

.kcp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.kcp-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color, #1a1a2e);
}

.kcp-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    color: var(--grey, #9CA3AF);
    line-height: 1;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kcp-grid {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 2px;
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
}

.kcp-cell {
    width: 100%;
    aspect-ratio: 1;
    cursor: pointer;
    transition: transform .1s ease;
}

.kcp-cell:hover {
    transform: scale(1.15);
    position: relative;
    z-index: 1;
}

.kcp-bottom {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-top: 8px;
}

.kcp-preview-box {
    width: 40px;
    height: 40px;
    background: #000;
    border-radius: 12px;
    flex-shrink: 0;
}

.kcp-preset-swatches {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kcp-preset-row {
    display: flex;
    gap: 8px;
}

.kcp-preset-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .1s ease;
}

.kcp-preset-dot:hover {
    transform: scale(1.1);
}

.kcp-dot-selector {
    background: none;
    border: 2px solid #222;
    box-shadow: inset 0 0 0 4px #ebebeb;
}

.kcp-dot-plus {
    background: #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #6b7280;
    font-weight: 300;
}

/* --- Style selector buttons (Bez stylu / Kruhy / Gradient …) --- */
.komun-style-btn {
    padding: 16px 24px;
    border: none;
    min-width: 111px;
    font-family: var(--font-inter);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    background-color: var(--primary-color);
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    transition: opacity .2s ease, outline .1s ease;
}

.komun-style-btn:hover {
    opacity: 0.75;
}

.komun-style-btn.selected {
    border: 2px solid white;
    outline: 2px solid var(--primary-color);
    outline-offset: 0;
}

.komun-style-btn[data-style="kruhy"]    { background-image: url("img/KruhyBTN.a90e6407679d.svg"); }
.komun-style-btn[data-style="gradient"] {
    background-image: linear-gradient(135deg, #3a5a9e, var(--primary-color)); }
.komun-style-btn[data-style="linky"]    { background-image: url("img/linkyBTN.9b0fbb9bf46b.svg"); }
.komun-style-btn[data-style="pattern"]  { background-image: url("img/patternBTN.8e51d71acda5.svg"); }

/* --- Live preview card --- */
.komun-preview-card {
    background-color: var(--primary-color);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 40px;
    justify-content: space-between;
    overflow: hidden;
    width: 400px;
    height: 500px;
}

/* Style variants */
.komun-preview-card[data-style="bez-stylu"] { background-image: none; }
.komun-preview-card[data-style="gradient"]  { background-image: linear-gradient(to bottom, #305ECC, var(--primary-color)); }
.komun-preview-card[data-style="kruhy"]     { background-image: url("img/Kruhy.36c641501d54.svg"); }
.komun-preview-card[data-style="linky"]     { background-image: url("img/linky.23362c4b3faf.svg"); }
.komun-preview-card[data-style="pattern"]   { background-image: url("img/pattern.f909420da4c5.svg"); }

/* Hide CSS pseudo-circles when SVG provides decoration */
.komun-preview-card[data-style="kruhy"]::before,
.komun-preview-card[data-style="kruhy"]::after,
.komun-preview-card[data-style="linky"]::before,
.komun-preview-card[data-style="linky"]::after,
.komun-preview-card[data-style="pattern"]::before,
.komun-preview-card[data-style="pattern"]::after { display: none; }

.komun-preview-logo-box {
    border: 2px dashed rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 28px 16px;
    font-family: var(--font-inter);
    font-size: var(--font-size-xs);
    align-self: center;
}

.komun-preview-title {
    font-family: var(--font-family);
    font-size: var(--size-28);
    line-height: 1.2;
    text-align: center;
}

.komun-preview-desc {
    font-family: var(--font-inter);
    line-height: var(--line-height-base);
    text-align: center;
}

.komun-prev-metric {
    background-color: white;
    border-radius: 10px;
    padding: 10px;
}

.komun-prev-metric .pmet-val {
    font-size: var(--size-24);
}

/* --- Responsive breakpoints --- */

@media (max-width: 564px) {
    .komun-metriky-grid {
        grid-template-columns: 1fr 1fr;
    }
    .komun-preview-card {
        width: 300px;
        height: 375px;
    }
}

/* ======================================================
   Katalogové karty — mřížkový pohled
====================================================== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 24px;
}

.card-image-wrapper {
  position: relative;
  overflow: hidden;
}

.card-image-wrapper img {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.katalog-card {
  border: 2px solid var(--grey);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.katalog-card:hover {
  border: 2px solid var(--primary-color);
  box-shadow: 0 12px 32px rgba(24, 47, 102, 0.12);
}

.katalog-card-content {
  margin: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.katalog-card .row-8 > * {
  flex-shrink: 0;
}

.status-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--background-color);
  padding: 2px 6px;
  border-radius: 50px;
  z-index: 1;
}

/* ======================================================
   Katalogové karty — řádkový (list) pohled
====================================================== */
.katalog-card-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  border: 2px solid var(--grey);
  padding: 10px 16px 10px 10px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  overflow: hidden;
}

.katalog-card-row:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 16px rgba(24, 47, 102, 0.08);
}

.katalog-row-img {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 64px;
  overflow: hidden;
  display: block;
  text-decoration: none;
}

.katalog-row-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.katalog-row-img .status-tag {
  top: 4px;
  right: 4px;
}

.katalog-row-name {
  flex-shrink: 1;
  min-width: 120px;
}

.katalog-row-stats {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
}

.katalog-card-row > .btn {
  flex-shrink: 0;
  margin-left: auto;
}

.katalog-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

@media (max-width: 1080px) {
  .katalog-row-tags { display: none; }
}

@media (max-width: 768px) {
  .katalog-card-row > .btn { display: none; }
}

@media (max-width: 564px) {
  .katalog-card-row { gap: 12px; }
  .katalog-row-tags,
  .katalog-row-stats,
  .katalog-row-body > .btn { display: none; }
  .katalog-row-name { min-width: 0; flex: 1; }
  .cards-grid { gap: 12px; }
  .katalog-card-content .alert { display: none; }
}

/* ======================================================
   REZSYS — Nastavení: rozložení a navigace
====================================================== */
.settings-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: start;
}
.settings-layout > div {
  min-width: 0;
}

.mt80px { margin-top: 80px; }

.sticky-panel {
  position: sticky;
  top: 24px;
  align-self: start;
}

@media (max-width: 1080px) {
  .settings-layout { grid-template-columns: 1fr; }
  .sticky-panel { position: static; margin-top: 40px; }
}

#settings-nav a {
  font-size: 14px;
  color: var(--secondary-text-color, #555);
  text-decoration: none;
  padding: 4px 0 4px 12px;
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, font-weight 0.1s;
}
#settings-nav a:hover {
  color: var(--text-color, #0d0d0d);
}
#settings-nav a.active {
  color: var(--primary-color, #182f66);
  border-left-color: var(--primary-color, #182f66);
  font-weight: 600;
}

/* ======================================================
   Tabulka hodin a časové vstupy
====================================================== */
.form-100:has(.hours-table) {
  overflow-x: auto;
}

.hours-table {
  border-collapse: collapse;
}
.hours-table .input-suffix-wrap {
  flex: none;
  width: 100%;
  min-width: 90px;
}
.hours-table input[type="time"] {
  min-width: 68px;
}
.hours-table th,
.hours-table td {
  padding: 6px 12px;
  vertical-align: middle;
}
.hours-table .col-sep {
  padding-left: 4px;
  padding-right: 4px;
}
.hours-table .col-label {
  width: 110px;
  text-align: left;
}

form > div .input-suffix-wrap {
  width: 100%;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}
input[type="time"]::-webkit-datetime-edit {
  color: transparent;
}
input[type="time"]:focus::-webkit-datetime-edit,
input[type="time"].has-value::-webkit-datetime-edit {
  color: var(--text-color, #0d0d0d);
}
input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus {
  background: transparent;
}

/* ======================================================
   Iframe kód a kopírování
====================================================== */
.iframe-code-wrap,
form div:has(.iframe-code-wrap) {
  max-height: none !important;
  overflow: visible !important;
}
.iframe-code-wrap {
  position: relative;
  width: 100%;
}
.iframe-code-wrap textarea {
  width: 100%;
  resize: none;
  overflow-y: hidden;
  padding: 10px 44px 10px 12px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.5;
  background-color: var(--secondary-color);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 6px;
  color: var(--text-color, #0d0d0d);
  box-sizing: border-box;
}
.iframe-code-wrap .header-icon {
  position: absolute;
  top: 8px;
  right: 8px;
}

.copy-toast {
  position: absolute;
  top: -32px;
  right: 0;
  background: var(--dark-grey);
  color: var(--background-color);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
}
.copy-toast::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 10px;
  border: 5px solid transparent;
  border-top-color: var(--dark-grey);
}
.iframe-code-wrap.show-toast .copy-toast {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .iframe-code-wrap .header-icon { display: none; }
  .iframe-code-wrap textarea { padding-right: 12px; }
}

/* ======================================================
   Detail místnosti — Hlavička a fotografie
====================================================== */
.mistnost-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
  background-color: var(--background-color);
  padding: 24px;
}
.mistnost-foto {
  width: 200px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  display: block;
  text-decoration: none;
  align-self: stretch;
  min-height: 120px;
}
.mistnost-header .row-8 {
  flex-wrap: wrap;
}
.mistnost-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.25s;
}
.mistnost-foto::after {
  content: "Zobrazit vše";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.25s;
}
.mistnost-foto:hover img { filter: brightness(0.65); }
.mistnost-foto:hover::after { opacity: 1; }

@media (max-width: 768px) {
  .mistnost-header { flex-direction: column; }
  .mistnost-foto { width: 100%; height: 220px; align-self: auto; }
}

/* ======================================================
   Detail místnosti — Rozvržení kalendář + formulář
====================================================== */
.kal-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.kal-main {
  flex: 1;
  min-width: 0;
}
.kal-form-panel {
  width: 300px;
  flex-shrink: 0;
  background-color: var(--background-color);
  padding: 24px;
}
.kal-form-panel form input:not([type="checkbox"]),
.kal-form-panel form select,
.kal-form-panel form textarea {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1080px) {
  .kal-layout { flex-direction: column; }
  .kal-main { width: 100%; }
  .kal-form-panel { width: 100%; position: static; order: -1; }
}

@media (max-width: 564px) {
  .mistnost-calendar .calendar-time-grid {
    grid-template-columns: repeat(7, minmax(60px, 1fr));
  }
  .kal-main { overflow-x: auto; }
}

/* ======================================================
   Detail místnosti — Denní pohled
====================================================== */
#kal-denny { display: none; }

@media (max-width: 768px) {
  #kal-tydenny { display: none; }
  #kal-denny { display: block; }
}

/* ======================================================
   Detail místnosti — Kalendářová mřížka
====================================================== */
.mistnost-calendar .calendar-time {
  --hour-h: 96px;
  max-height: none !important;
  overflow: visible !important;
}

.mistnost-calendar .calendar-time-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(96px, 1fr));
  height: auto !important;
  background: none !important;
}

.kal-day-col {
  position: relative;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--darker-table-line);
}

.kal-cell {
  height: 48px;
  flex-shrink: 0;
  border-bottom: 1px dashed var(--darker-table-line);
  box-sizing: border-box;
}
.kal-cell:nth-child(even) {
  border-bottom: 1px solid var(--light-grey);
}
.kal-cell:hover {
  background-color: var(--light-primary);
  cursor: pointer;
}
.kal-cell.is-occupied {
  background-color: var(--secondary-color);
  cursor: default;
}
.kal-cell.is-occupied:hover { background-color: var(--secondary-color); }
.kal-cell.is-closed {
  background-color: var(--secondary-color);
  cursor: not-allowed;
  background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(0,0,0,0.04) 4px, rgba(0,0,0,0.04) 5px);
}
.kal-cell.is-closed:hover { background-color: var(--secondary-color); }

.mistnost-calendar .calendar-time-col:hover { background: none; }

.mistnost-calendar .calendar-time-event {
  --edge: 4px;
  padding: 6px 8px;
  border-radius: 5px;
  border-width: 0;
  border-left-width: 3px;
}

.rez-2rows .rez-meta { display: none; }
.rez-1row .rez-time { display: none; }

.mistnost-calendar .calendar-time-labels .time { height: 48px; }

.kal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 10px 0 6px;
}
.kal-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-xxs);
  color: var(--secondary-text-color);
  white-space: nowrap;
}
.kal-legend-swatch {
  display: inline-block;
  width: 22px;
  height: 13px;
  border-radius: 3px;
  border-style: solid;
  border-width: 0;
  border-left-width: 3px;
  flex-shrink: 0;
}

/* ======================================================
   Detail místnosti — Typy dlaždic rezervací
====================================================== */
.rez-schedule {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.rez-mine {
  background-color: var(--primary-color);
  color: var(--background-color);
  border-color: var(--sky-blue);
}
.rez-other-hidden {
  background-color: var(--secondary-color);
  color: var(--grey);
  border-color: var(--grey);
  font-style: italic;
}
.rez-other-school {
  background-color: var(--secondary-color);
  color: var(--indigo);
  border-color: var(--indigo);
}
.rez-other-external {
  background-color: var(--light-aqua);
  color: var(--aqua);
  border-color: var(--aqua);
}
.rez-draft {
  background-color: var(--background-color);
  color: var(--primary-color);
  border-width: 0 !important;
  outline: 2px dashed var(--primary-color);
  outline-offset: -2px;
}

.rez-time,
.rez-title,
.rez-meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
.rez-time  { opacity: 0.7; }
.rez-title { opacity: 1; }
.rez-meta  { opacity: 0.6; }

/* ======================================================
   Detail místnosti — Formuláře v dialozích
====================================================== */
.form-center { text-align: center; }
.form-center > svg { align-self: center; }

/* ======================================================
   Detail místnosti — Galerie
====================================================== */
.gallery-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 300;
  display: none;
  flex-direction: column;
}
.gallery-overlay.active { display: flex; }

.gallery-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  flex-shrink: 0;
}

.gallery-counter {
  color: var(--grey);
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}

.gallery-icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  flex-shrink: 0;
}
.gallery-icon-btn:hover svg path { fill: #fff; }

.gallery-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#gallery-prev { left: 24px; }
#gallery-next { right: 24px; }

.gallery-img {
  max-width: calc(100% - 160px);
  max-height: calc(100vh - 160px);
  object-fit: contain;
  display: block;
}

/* ======================================================
   Toast — oznámení (vpravo nahoře)
====================================================== */
.toast {
  position: fixed;
  top: 40px;
  right: 40px;
  width: 360px;
  max-width: calc(100vw - 80px);
  background-color: var(--background-color);
  box-shadow: 0 10px 30px rgba(37, 34, 35, 0.12);
  border-radius: 8px;
  padding: 16px 16px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 500;
  overflow: hidden;
}

.toast-bar {
  height: 5px;
  background-color: var(--secondary-color);
  margin: 0 -16px 0;
}

.toast-progress {
  height: 100%;
  width: 70%;
  transition: width linear;
}

.toast-green .toast-progress { background-color: var(--green); }
.toast-red   .toast-progress { background-color: var(--red); }

/* === Indikátor síly hesla (3 segmenty) — gap přes .g4px === */
.pwd-strength { display: flex; }
.pwd-strength > div { flex: 1; height: 4px; background-color: var(--light-grey); }

.pwd-strength > div.pozadi-red { background-color: var(--red); }
.pwd-strength > div.pozadi-orange { background-color: var(--orange); }
.pwd-strength > div.pozadi-green { background-color: var(--green); }

.list-bullets { 
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* === QR sekce (Figma 65:3590) === */
.qr-image-box {
    width: 145px; height: 145px;
    border: 2px solid var(--primary-m);
    background-color: var(--background-color);
    flex-shrink: 0;
    display: grid; 
    place-items: center;
}

.qr-key-box {
    flex: 1;
    background-color: var(--secondary-color);
    padding: 8px 16px;
    font-family: var(--font-family);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.qr-step-num {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    min-width: 25px;
    background-color: var(--primary-color);
    color: var(--background-color);
    border-radius: 50%;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    flex-shrink: 0;
}

/* Badge se skokem na detailní kartu v záložce Informace */
.js-badge-jump { cursor: pointer; text-decoration: none; }
#tab-pravni .detail-card.is-badge-target { outline: 2px solid var(--primary-m); outline-offset: 2px; transition: outline-color .6s ease; }

/* Informace – rovnoměrná mřížka karet (stejná šířka i v poslední řadě) */
.db-cards-vice {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* Kompaktní tabulka: hlavička + denní (primární) řádek = stejný grid */
.sch2 { width:100%; min-width:880px; }
.sch2-head, .sch-day {
    display:grid;
    grid-template-columns: 104px minmax(170px,210px) minmax(150px,1fr) 110px 44px;
    gap:16px; align-items:center; padding:8px 12px;
}
/* sloupec Výdělek dne – dopočítává se z mzdových polí formuláře (sekce „Mzda") */
.sch-day.is-absent { opacity:.7; }
.sch2-head {
    position:sticky; top:0; z-index:6; background: var(--background-color);
    box-shadow: inset 0 -1px 0 var(--light-grey);
    font-weight:600; font-size: var(--font-size-sm);
}

.sch-day { background: var(--background-color); border-bottom:1px solid var(--light-grey); }
/* zebra – liché dny šedé (jako .asset-table / .schedule-table v systému) */
/* víkend má vlastní systémový odstín a přebíjí zebru (pravidlo je níž) */
.sch-day.is-weekend { background: var(--secondary-color); }
.sch-day.is-weekend .sch-col-day { color: var(--red, #C31616); }
.sch-day.is-today { box-shadow: inset 3px 0 0 var(--primary-color); }

/* sticky sloupec Den (drží kontext při vodorovném scrollu na úzkém okně) – sloupec dělá .column */
.sch-col-day { position:sticky; left:0; z-index:2; background:inherit; line-height:1.15; }
.col-absence { display: flex; flex-direction: row; gap: 16px; flex-wrap: wrap;}

/* tlačítko rozbalení detailu dne + tečka „obsahuje data" */
.sch-expand { width: 32px; height: 32px;}
.sch-day.is-open { background: var(--light-primary); }
.sch-expand.has-data::after { content:""; position:absolute; top:-3px; right:-3px;
    width:8px; height:8px; border-radius:50%; background: var(--primary-color); }

/* rozbalený detail dne */
/* skrytí řeší atribut [hidden] (UA display:none) – kvůli Blink bugu s input[type=time] ve skrytém kontejneru */
.sch-detail { padding:16px; border-bottom:1px solid var(--light-grey); }
.sch-detail-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.sch-field.full { grid-column: 1 / -1; }
/* .sch-field: sloupcové rozložení dělají .column.g4px */
.btn-underline { align-self:flex-start; background:none; border:none; cursor:pointer; padding:0;
    color: var(--primary-color); font-size:14px; }
.btn-underline:hover { text-decoration:underline; }

/* uzamčení polí při celodenní absenci (poznámky zůstávají editovatelné) */
.sch2 input:disabled, .sch2 select:disabled {
    background: var(--darker-table-line, #f1f1f1); cursor:not-allowed; opacity:.7;
}

/* Nadúvazek / příplatky – víc příplatků na jeden den (kumulace dle ZP) */
.col-overtime-group { display:flex; flex-direction: column; align-items: stretch; gap: 6px; }
.ot-list { display: flex; flex-direction: column; gap: 6px; }
.ot-item { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ot-typ { flex: 1 1 100px;}
.ot-item .input-suffix-wrap { width: 72px; flex: 0 0 auto; }
.ot-del {
    border: none; background: none; cursor: pointer; padding: 0 4px;
    font-size: 18px; line-height: 1; color: var(--red, #C31616);
}

/* Sticky lišta uložení – rozložení dělá .space-between, zde sticky + rámeček + odsazení */
.doch-savebar { position:sticky; bottom:0; z-index:11; padding:16px 40px;
    background: var(--background-color)}
.doch-dirty { font-size: var(--font-size-sm); opacity:.7; }
.doch-dirty.is-dirty { color: var(--red, #C31616); opacity:1; font-weight:600; }

@media (max-width: 700px) {
    .doch-summary { grid-auto-flow:row; grid-template-columns: repeat(2, 1fr); }
    .sch-detail-grid { grid-template-columns: 1fr; }
}

    /* Stav výkazu jako barevný proužek vlevo: zelená = OK, oranžová = neúplný (mění se v detailu) */
    #doch-table tbody tr td:first-child { box-shadow: inset 4px 0 0 transparent; }
    #doch-table tbody tr.doch-neuplny td:first-child { box-shadow: inset 4px 0 0 var(--orange); }


    /* Odměny: dlouhý název odměny ořízni elipsou, částka zůstane vpravo */
    #doch-table .col-odmeny .space-between { max-width: 240px; gap: 12px; }
    #doch-table .col-odmeny .space-between > span:first-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #doch-table .col-odmeny .space-between > span:last-child { flex-shrink: 0; }

    #doch-table .col-absence { padding: 12px 40px}

        /* Dialog výběru sloupců */
        #zakladniColsDialog .col-picker-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 24px;
            text-align: left;
            margin-bottom: 4px;
        }
        #zakladniColsDialog .col-picker-grid label { cursor: pointer; }

      /* Moduly — checkbox list: single-col (subsections already in 3-col grid) */
      .checklist-col {
        column-count: 1;
      }
      .checklist-col label {
        break-inside: avoid;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .checklist-col--single {
        column-count: 1;
      }
      /* Moduly — override row-strech max-width so subsections fill card width */
      #sekce-moduly .row-strech {
        max-width: 100%;
        margin-top: 0;
      }

      #sekce-moduly .form-sekce .checklist-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        column-count: unset;
      }

      #sekce-moduly .row-strech > .form-sekce {
        height: 100%;
        box-sizing: border-box;
        padding: 20px 24px;
        border-width: 2px;
      }
    
      /* Přístup k modulům — 3 sloupcový layout */
      .checkbox-grid {
        column-count: 3;
        column-gap: 24px;
     }
     .checkbox-grid label {
        break-inside: avoid;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
     }

/* Flex */
.space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.flex-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.flex-start { align-items: flex-start; }

.ai-strech {align-items: stretch;}
.ai-center { align-items: center;}
.ai-flex-end { align-items: flex-end;}
.ac-center { align-content: center;}

.flex110 { flex: 1 1 0;}

.ws-nowrap { white-space: nowrap; }

.flex-row { flex-direction: row !important;}

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap;}

.jc-center { 
    display: flex;
    justify-content: center; 
}
.jc-flex-end { justify-content: flex-end;}

.align-text-right {text-align: right;}
.align-text-center {text-align: center;}

/* padding, margin, gap... */
.p24px { padding: 24px;}
/* Musí stát PŘED .pb32px níž — kombinace .p16px + .pb32px dává 16/16/32/16
   (termínové sloupce na Domů). Obráceně by zkratka přebila spodní hodnotu.
   Autorizace uživatele 2026-08-03. */
.p16px { padding: 16px;}

.pl12px { padding-left: 12px;}
.pr12px { padding-right: 12px;}

.pt24px { padding-top: 24px; }
.pb24px { padding-bottom: 24px; }
.pr24px { padding-right: 24px;}
.pl24px { padding-left:  24px;}

.pb32px {padding-bottom: 32px;}

.pl40px { padding-left: 40px;}
.pr40px { padding-right: 40px;}

.ml12px { margin-left: 12px;}
.ml48px { margin-left: 48px;}
.mr12px { margin-right: 12px;}

.mt-auto { margin-top: auto}
.mt6px {margin-top: 6px;}
.mt8px { margin-top: 8px;}
.mt12px { margin-top: 12px; }
/* Chybějící stupeň škály (byla 6, 8, 12, 40, 64). Autorizace uživatele 2026-08-19. */
.mt16px { margin-top: 16px; }
.margin-top { margin-top: 24px !important;}
.mt32px { margin-top: 64px;}
.mt40px {margin-top: 40px;}
.mt64px { margin-top: 64px;}

.mb6px { margin-bottom: 6px;}
.mb8px { margin-bottom: 8px;}
.mb16px { margin-bottom: 16px; }
.mb36px {margin-bottom: 36px;}

.g0px { gap: 0px ;}
.g2px { gap: 2px;}

.g4px, .project-card, .db-card, .db-card > a , .db-heading, .circle-column 
{ gap: 4px; }

.g6px { gap: 6px;}

.g8px { gap: 8px; row-gap: 0; }
.g8-8px { gap: 8px; }

/* Chybějící stupeň škály — Figma dává 10px mezi štítky oprávnění
   (Detail uživatele). Autorizace uživatele 2026-09-04. */
.g10px { gap: 10px; }

.g12px { gap: 12px;}

.g16px { gap: 16px; }

.g24px, .three-containers { gap: 24px; }

/* .g32px byla slepená s .g24px, takže pod svým jménem dávala 24px. V žádném
   HTML se nepoužívala (0 výskytů v repu), takže oprava nemá dosah na existující
   stránky. Autorizace uživatele 2026-08-19. */
.g32px { gap: 32px; }

/* Potvrzovací okno vyčítání je ve Figmě 480 široké („potvrzenní vycitani":
   480×206, padding 24). Systémový `dialog` (ř. 2344) má 400 a je to selektor
   elementu (0,0,1), takže ho přebije jakákoli třída.
   Autorizace uživatele 2026-08-19. */
.dialog-480 { width: 480px; }

.g40px { gap: 40px; }

.space-px { gap: 100px; }

.op50 { opacity: 50%;}

.h-42px { height: 42px; }
.h-144px { height: 144px; }
.h-564px { height: 564px;}
.h-fit-content { height: fit-content;}
.h-100 { height: 100%;}

.w-50pr { width: 50%;}
.w-320px { width: 320px;}

.mw-200px { max-width: 200px;}
.mw-400px { max-width: 400px;}

.dialog-rounded, .br8px { border-radius: 8px; }
.br-bottom-8 { border-radius: 0 0 8px 8px; }

/* Barvy */
.red::before, .pozadi-red, .menu-item.logout:hover, .header-icon[data-badge]::after, .filter-chip[data-badge]::after, .notif-dot, .menu-item.logout:hover 
{ background-color: var(--red); }
.pozadi-m-red, .db-h-red { background-color: var(--m-red); }

.green::before, .pozadi-green { background-color: var(--green); }
.pozadi-m-green, .db-h-green { background-color: var(--m-green); }
.tm-green::before, .pozadi-tm-green { background-color: var(--tm-green);}

.d-green::before, .pozadi-d-green { background-color: var(--d-green);}
.dm-green::before, .pozadi-dm-green { background-color: var(--dm-green);}

.orange::before, .pozadi-orange { background-color: var(--orange); }
.pozadi-m-orange, .db-h-orange { background-color: var(--m-orange);}
.tm-orange::before, .pozadi-tm-orange { background-color: var(--tm-orange);}

.blue::before, .pozadi-blue, #sidebar, .calendar td.event, .calendar-row--weekdays, .calendar-day-head 
{ background-color: var(--primary-color); }
.l-blue::before, .pozadi-l-blue { background-color: var(--light-primary);}
.hover-blue::before, .pozadi-hoverbl { background-color: var(--primary-hover); }
.sky-blue::before, .pozadi-sky-blue { background-color: var(--sky-blue);}
.tm-sky-blue::before, .pozadi-tm-sky-blue {background-color: var(--tm-sky-blue);}

.yellow::before, .pozadi-yellow { background-color: var(--yellow); }
.pozadi-sv-yellow { background-color: var(--sv-yellow);}
.pozadi-m-sv-yellow { background-color: var(--sv-yellow-m);}

.aqua::before, .pozadi-aqua, .tl-pin { background-color: var(--aqua); }

.grey::before, .pozadi-grey { background-color: var(--grey); }
.pozadi-d-grey { background-color: var(--dark-grey);}
.darker-tl { background-color: var(--darker-table-line);}

.purple::before, .pozadi-purple { background-color: var(--purple); }
.pozadi-m-purple { background-color: var(--m-purple);}
.modrofialova::before, .pozadi-modrofialova { background-color: var(--past-modrofialova);}

.levander::before, .pozadi-levander { background-color: var(--levander);}
.pozadi-m-levander { background-color: var(--m-levander);}
.pozadi-l-levander { background-color: var(--light-levander);}

.indigo::before, .pozadi-indigo { background-color: var(--indigo);}

.pink::before, .pozadi-pink { background-color: var(--pink);}
.tm-pink::before, .pozadi-tm-pink { background-color: var(--tm-pink);}

.black::before, .pozadi-black { background-color: var(--text-color); }

.pozadi-background { background-color: var(--background-color);}
.pozadi-sec { background-color: var(--secondary-color);}

.fill-purple path { fill: var(--purple); }

.fill-red path { fill: var(--red); }

.fill-red-hover:hover path { fill: var(--red); }

.fill-blue path, .header-icon-blue path { fill: var(--primary-hover);}

.fill-primary path, .header-icon-primary path { fill: var(--primary-color); }

.fill-aqua path, .header-icon-aqua path { fill: var(--aqua); }

.fill-green path { fill: var(--green); }

.fill-black path, .header-icon-black path { fill: var(--text-color); }

.fill-orange path, .header-icon-orange path { fill: var(--orange); }

.fill-yellow path, .he400ader-icon-yellow path { fill: var(--yellow);}

.fill-grey path, .header-icon-grey path { fill: var(--grey) !important;}

.br-999px, .progress-fill, .progress, .status-dot, .profile-photo-wrap, .icon-toggle , .calendar-cell--weekday.is-today .date, .tag-color-option, .tl-pin, .new-task .alert,
.timeline .alert, .task-detail .alert, .task-tags .alert, .event-date .alert, dialog .alert, table .alert, .circle::before, .header-icon[data-badge]::after, .filter-chip[data-badge]::after
{ border-radius: 999px; }

.borcol-dtl { border-color: var(--darker-table-line);}
.borcol-blue { border-color: var(--primary-color);}
.borcol-purple { border-color:  var(--purple);}
.borcol-levander { border-color: var(--levander);}
.borcol-green { border-color: var(--green);}
.borcol-grey { border-color: var(--darker-table-line);}
.border-right { border-right: solid 1px #D1D0DD }

.text-green { color: var(--green);}
.text-red { color: var(--red);}
.text-orange { color: var(--tm-orange);}
.white-text { color: var(--background-color); }
/* Doplněno 2026-07-25 (autorizace uživatele) kvůli panelům Majetku na detailu budovy:
   odkazy „Závada N" v Historii prověrek jsou barvené podle typu prověrky (kontrola
   tyrkysově, revize modře) a podtitulek u Odpisů je v barvě placeholderu. */
.text-aqua { color: var(--aqua);}
.text-primary-hover { color: var(--primary-hover);}
.text-placeholder { color: var(--placeholder-color);}

@media (max-width: 1440px) {
    /*Scroll tabulky*/
    .table-container { overflow-x: visible; }

    .filtr-form { grid-template-columns: repeat(3, 1fr); }

    .two-containers, .three-containers, .calendar-container, .detail-container  { flex-direction: column; }

    .two-containers > div, .three-containers > div, .timeline, .calendar-events
    { width: 100%; }

    .detail-container { gap: 32px; }

    .search-container:not(dialog) { display: none;}

    .form-container, .detail-container .form-container{ max-width: none; }

    form > div, .form > div, #porucha-form > div:not(.form-btns), form#porucha-form div:has(textarea) { 
        flex: 0 0 48%;
    }

    .form-2col > div { flex: 0 0 100%}

    .tab-panel .form-sekce:not(.js-ia-accordion-body .form-sekce) {width: 100%;}

    .w-50pr { width: 100%;}

    .nastaveni-row-2 {
         flex-direction: column;
      }
      .nastaveni-row-2 > .table-container,
      .nastaveni-row-2 > .table-container.col-fixed {
         flex: none;
         max-width: none;
         width: 100%;
      }
}

@media (max-width: 1440px) and (min-width: 832px) {
    .history-container {
        flex-direction: row;
        gap: 40px;
        max-width: none;
    }

    .history-wrap { width: 50%; }

    .history-container>.divider {
        width: 1px;
        height: 100%;
    }
}


@media (max-width: 1082px) {
    #main-content { margin: 0 20px; }

    .container, #top-header-inside { padding: 0 20px; }

    .table-container, .form-container, .calendar-container, .notifikace-container { padding: 20px; }

    .calendar { padding: 0;}

    #toggleSideBar, #oprava-btn, #registr-btn { display: flex; }

    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 950;
        box-shadow: 8px 0 24px rgba(0,0,0,0.15);
        transform: translateX(-100%);
        overflow-y: auto;
    }

    #sidebar.is-open { transform: translateX(0); }

    #sidebar:not(.is-open) #side-menu,
    #sidebar:not(.is-open) #logo {
        display: none;
    }

    #app-content {
        position: relative;
        z-index: 1;
    }

    .row-strech {
        display: flex;
        flex-direction: column;
    }

    .db-cards > div, .db-cards > a {
        flex: 0 0 calc(50% - 8px);
    }

    
}

@media (max-width: 832px) {
    .calendar-form form { grid-template-columns: repeat(2, 1fr); }

    .filtr-form { grid-template-columns: repeat(2, 1fr); }

    header #filter-bar, header .filter-bar, .space-between, .action-buttons {
        flex-wrap: wrap;
    }

    .calendar-events .space-between {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 3px
    }

    #top-menu {
        overflow: visible;
        max-height: none;
    }

    .faq-container {
        width: 100%;
        max-width: none;
        padding: 24px 20px;
    }

    .calendar-side-filter, .calendar-form  { margin-bottom: 24px; }

    .resp-div-100 { 
        flex-direction: column;
        gap: 40px;
    }
    .resp-div-100 > div:not(.qr-image-box) { 
        width: 100%; 
        height: auto;
    }
    .resp-div-100 .flex110, .resp-div-100 .flex110 { flex: none;}
    
    .db-graf.border-right, .db-zamestnanci.border-right { border: none;}
    .db-graf.pr24px, .db-zamestnanci.pr24px { padding-right: 0;}
    

}

@media (max-width: 768px) {
    #content {
        padding-bottom: 108px;
        gap: 32px;
    }

    form {
        max-width: none;
        gap: 16px;
    }
    
    form > div, .form > div, #porucha-form > div:not(.form-btns), form#porucha-form div:has(textarea)
    { flex: 1 1 100%; }

    #filter-btn, #calendar-btn, .dropdown:has(#filter-btn, #calendar-btn) 
    { display: none; }

    .mobil-icon { display: flex; }

    #header-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: none;
        overflow: visible;
        background-color: var(--primary-color);
        border-top: 2px solid var(--darker-table-line);
        z-index: 1100;
        margin: 0;
        min-height: 64px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
    }

    #top-header-inside .header-icon {
        padding: 6px;
        width: fit-content;
    }

    #top-header-inside .header-icon path { fill: var(--background-color); }

    
    #top-header-inside .header-icon-circle {
        padding: 12px;
        background-color: var(--background-color);
        height: fit-content;
        border-radius: 999px;
    }

    #top-header-inside .header-icon-circle path { fill: var(--primary-color); }

    .dropdown-menu {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 64px;
        margin: 0;
        box-shadow: none;
        transform: none;
        overflow-y: auto;
        z-index: 900;
    }

    .dropdown-lg {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .notif-list {
        max-height: none;
        height: 100%;
    }

    #sidebar { bottom: 64px; }

    .task-detail .column-container { margin-bottom: 64px; }

    .task-detail.drawer {
        inset: auto 0 0 0;
        width: 100%;
        max-width: 100%;
        padding: 24px 20px 32px 20px;
    }

    .project-board {
        padding-left: 0;
        padding-right: 0;
    }

    .project-column {
        min-width: 220px;
        max-width: 260px;
    }
}

@media (max-width:564px) {
    #content #filter-bar .action-buttons, #content .filter-bar .action-buttons,#filter-bar .filter-bar-categories, .filter-bar .filter-bar-categories,
    form .room-row, div:not(.dropdown-menu) .form-btns {
        flex-direction: column;
    }
    
    #content #filter-bar .action-buttons, #content .filter-bar .action-buttons {
        align-items: end;
        gap: 8px;
    }

    #filter-bar .filter-bar-categories, .filter-bar .filter-bar-categories { align-items: start; }

    .calendar { min-width: auto; }

    #main-content { margin: 0; }

    form .room-row {
        max-height: none;
        gap: 16px;
    }

    div:not(.dropdown-menu) .form-btns {
        gap: 24px;
        margin-top: 48px;
    }

    .filtr-form { grid-template-columns: repeat(1, 1fr); }

    .timeline {
        border-left: none;
        padding: 0 6px;    
    }

    .photo-container > div {
        width: 100%;
        border-bottom: 1px solid var(--light-grey);
        border-right: none;
        padding-bottom: 24px;
        padding-right: 0;
    }

    .photo-container .action-buttons { justify-content: center; }

    .db-cards > div, .db-cards > a { flex: 0 0 100%;}

    .dashboard-card { padding: 12px 16px}

    .donut-canvas, .donut-wrap {
        height: 200px !important;
        width: 200px !important;
    }

    .db-card .progress { max-width: 100%;}

    dialog { min-width: 320px;}
}

/* Vyhledávání se dřív skrývalo už pod 1440px (viz blok @media max-width: 1440px).
   Nový design s ním na 1440px počítá, takže se hranice posouvá na 1200px. */
@media (min-width: 1201px) {
    .search-container:not(dialog) { display: flex; }
}

/* ======================================================
   Obsah stránky Stavební dokumentace (dle Figmy)
====================================================== */

/* Akční pruh: Figma má tlačítka 36px, systémové .plus-btn je 40px.
   line-height explicitně — .secondary-plus-btn ho na rozdíl od .plus-btn nemá
   a vycházela o pixel níž. */
.plus-btn.btn-md,
.secondary-plus-btn.btn-md {
    /* 7px kvůli 1px obrysu: 20 + 14 + 2 = 36 */
    padding: 7px 12px;
    line-height: var(--line-height-sm);
    /* .secondary-plus-btn na rozdíl od .plus-btn gap nedefinuje vůbec. */
    gap: 8px;
}

/* Hover jako u zbytku redesignu: světle modrá, ne plná tmavá. */
.plus-btn.btn-md:hover,
.secondary-plus-btn.btn-md:hover {
    background-color: var(--light-primary);
    border-color: var(--primary-hover);
    color: var(--primary-hover);
}

.plus-btn.btn-md:hover svg path,
.secondary-plus-btn.btn-md:hover svg path { fill: var(--primary-hover); }

/* Filtr: 5 sloupců po ~186px s mezerou 24px. Grid je tu záměrně —
   ruší dopad pravidla `form > div { flex: 0 0 31% }`, protože flex
   vlastnosti se na grid položky neuplatní. */
.filter-panel {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

/* `form > div` dává sloupec s gap 8px; Figma má mezi popiskem a polem 2px. */
.filter-panel > div { gap: 2px; }

.filter-panel label { font-weight: var(--font-weight-normal); }

/* Globální pravidlo pro inputy (`input:not()`×6) má specificitu (0,0,7,1)
   a vnutilo by rámeček --grey. Figma chce --light-grey → scoping přes #content. */
#content .filter-panel input,
#content .filter-panel select {
    border-color: var(--light-grey);
    min-height: 35px;
}

/* Vlastní šipka selectu — nativní se vzhledově neshoduje s designem. */
#content .filter-panel select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.1748 5.87793L7.87793 9.8335L11.244 5.87793' stroke='%230D0D0D' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 32px;
}

/* Hover tlačítek filtru: světle modrá jako u ostatních prvků redesignu. */
.filter-panel .filter-actions .btn:hover {
    background-color: var(--light-primary);
    color: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* flex-direction musí být explicitně — `form > div` jinak tlačítka naskládá pod sebe. */
.filter-panel .filter-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

/* Modifikátor nese geometrii tabulky z Figmy — výšku řádků i šířky sloupců.
   Řádky 50px (obsah 40 + 5px svisle); systémové CSS má 12px. */
.asset-table.rows-compact td,
.asset-table.rows-compact th { padding: 5px 16px; }

/* Minimální výška řádku. Čistě textový řádek měřil 30px, zatímco řádek
   s kebabem (třemi tečkami) 41px — tabulky bez akcí působily zmáčknutě.
   `height` na <tr> se v tabulce chová jako minimum, delší obsah řádek
   dál roztáhne (dvouřádkový text i nadále 50px).
   Autorizace uživatele 2026-09-04. */
.asset-table.rows-compact tbody tr { height: 41px; }

/* Figma: záhlaví 50px, blok popisku (text + řadicí šipky) je vysoký 32px, začíná
   18px pod horní hranou a dosedá na spodní. Kontejner .arrows-nav má ale 20px,
   přestože šipky měří 12px — ten přebytek ukrajoval místo nad popiskem. */
.asset-table.rows-compact thead th {
    padding-top: 18px;
    /* Mezera mezi popiskem sloupce (resp. řadicími šipkami) a prvním řádkem je vždy
       8px — nezáleží na tom, jestli sloupec šipky má. Sjednoceno globálně, autorizace
       uživatele 2026-07-25. Předtím: 0px systémově (Stavební dokumentace) a 6px
       scopovaně u #view-list a #panel-mistnosti; obě scopovaná pravidla zrušena. */
    padding-bottom: 8px;
}

.asset-table.rows-compact thead .arrows-nav { height: 12px; }

/* Šířky sloupců vycházejí z Figmy (x 351 / 401 / 496 / 682 / 801 / 953 / 1054 / 1319),
   ale úzké sloupce dostaly víc místa — s 16px paddingem byly texty natěsno.
   Součet 1024 = vnitřní šířka .table-container, takže tabulka nepřetéká. */
.asset-table.rows-compact th:nth-child(1) { width: 50px; }
.asset-table.rows-compact th:nth-child(2) { width: 130px; }
.asset-table.rows-compact th:nth-child(3) { width: 190px; }
.asset-table.rows-compact th:nth-child(4) { width: 145px; }
.asset-table.rows-compact th:nth-child(5) { width: 175px; }
.asset-table.rows-compact th:nth-child(6) { width: 130px; }
.asset-table.rows-compact th:nth-child(7) { width: 148px; }

/* Figma nemá pod záhlavím linku ani oddělovače řádků. */
.scroll-table .asset-table.rows-compact thead th { box-shadow: none; }

/* Tabulka má jemný stín, aby se odlišila od filtru nad ní. */
.asset-table.rows-compact {
    background-color: var(--background-color);
    box-shadow: 0px 0px 10px rgba(37, 34, 35, 0.08);
}

/* Obalovač má overflow-x: auto + overflow-y: hidden, takže stín tabulky ořízne
   nahoře i po stranách — viditelný zůstal jen dole, kam sahá padding-bottom 220px.
   Doplníme padding i na zbylé strany a vyrušíme ho zápornou marginou, aby se
   layout neposunul. Scopováno přes :has(), ať to nezasáhne tabulky jinde. */
.scroll-table:not(.scroll-table.form-100):has(> .asset-table.rows-compact) {
    padding-top: 16px;
    margin-top: -16px;
    padding-left: 16px;
    padding-right: 16px;
    /* Bez dorovnání šířky by padding ukrojil 32px z tabulky (1024 → 992) a rozhodil
       zarovnání s filtrem nad ní. calc + záporná margina vrací obsah na původní místo. */
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
    /* Systémových 220px stačí na status dropdown, ale kebab má 390px a u posledního
       řádku přetekl o 157px. Rezerva musí pokrýt celou výšku menu i se stínem. */
    padding-bottom: 420px;
    margin-bottom: -420px;
}

/* Kebab menu v tabulce dle Figmy: obrys --primary-m, položky s ikonou
   vlevo a mezerou 8px; víceřádkové popisky se zalomí. */
/* Pevná šířka, ne min-width — jinak se dlouhé popisky nezalomí na dva řádky. */
/* Nabídka kebabu v sekci Moduly má vypadat stejně jako v tabulkách —
   proto sdílí deklarační blok, ne zkopírované hodnoty.
   Autorizace uživatele 2026-09-04. */
.asset-table .dropdown-menu,
#panel-moduly .dropdown-menu {
    width: 204px;
    min-width: 204px;
    border: 1px solid var(--primary-m);
}

.asset-table .action-menu-item,
#panel-moduly .action-menu-item {
    /* Figma „AKCE - registr": položky 51/64px, padding 12/16, gap 8, Inter 14/20. */
    padding: 12px 16px;
    gap: 8px;
    text-align: left;
    font-family: var(--font-inter);
    /* <button> má výchozí 13.33px — .action-menu-item font-size nenastavuje. */
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-sm);
    /* .action-buttons má white-space: nowrap a dědilo by se sem — dvouřádkové
       popisky („Zobrazit v Revizích a kontrolách") by se nezalomily. */
    white-space: normal;
    /* Ikona má být svisle na středu textu — i u dvouřádkových popisků,
       kde se vystředí přes obě řádky (Figma „AKCE - registr": ikona 27,37
       vycentrovaná v obsahové výšce položky). */
    align-items: center;
}

.asset-table .action-menu-item .header-icon,
#panel-moduly .action-menu-item .header-icon {
    flex: 0 0 25px;
    justify-content: center;
}

/* Hromadné akce: klikatelná je celá oblast včetně textu, ne jen ikona. */
#bulk-toolbar button,
.js-bulk-toolbar button {
    background: none;
    border: none;
    padding: 4px;
    margin: -4px;
    cursor: pointer;
    color: var(--text-color);
}

#bulk-toolbar button:hover,
.js-bulk-toolbar button:hover { color: var(--primary-hover); }

/* Zebra: Figma barví až druhý řádek, systémové pravidlo barví lichý. */
/* Tabulky vždy začínají ŠEDOU řádkou (Figma měla chybu s opačným pořadím). */
.asset-table.zebra-even tbody tr:nth-child(odd) { background-color: var(--darker-table-line); }
.asset-table.zebra-even tbody tr:nth-child(even) { background-color: transparent; }

/* ══ Zebra tabulky s rozbalovacím řádkem (autorizace uživatele 2026-08-15) ══ */
/* Skrytý detailní <tr> se do :nth-child počítá, takže .zebra-even obarvila šedě
   VŠECHNY datové řádky. Tady se barví dvojice (datový řádek + jeho detail), aby
   detail měl pozadí řádku, ze kterého vyjel (Figma „revize rozbalovaci bile/sede
   pozadi"). Podmínka: za každým datovým řádkem je právě jeden detailní. */
/* Kombinátor `>` je povinný: s descendant selektorem pravidlo chytalo i řádky
   VNOŘENÉ tabulky prověrek a přebilo jí `.zebra-even` (shodná specificita 0,3,2,
   rozhodovalo pořadí). Oprava po kompletní kontrole, autorizace uživatele 2026-08-16. */
.asset-table.zebra-pary > tbody > tr:nth-child(4n+1),
.asset-table.zebra-pary > tbody > tr:nth-child(4n+2) { background-color: var(--darker-table-line); }
.asset-table.zebra-pary > tbody > tr:nth-child(4n+3),
.asset-table.zebra-pary > tbody > tr:nth-child(4n+4) { background-color: transparent; }

/* Rozbaluje celý řádek, ne jen šipka, takže hover sedí na řádku (ne na
   [data-href], to už tyhle řádky nemají). Stejná specificita (0,3,2) jako zebra
   výše — vyhrává pořadím v souboru. */
.asset-table tbody tr.radek-rozbalovaci { cursor: pointer; }
.asset-table tbody tr.radek-rozbalovaci:hover { background-color: var(--light-primary); }

/* Odznak přílohy v tabulce (Figma: 69×26, obtažení primary, sponka + text). */
.file-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px;
    border: 1px solid var(--primary-color);
    background: none;
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

/* Panel „Nastavení tabulky" pod tužkou — dropdown se stínem, ale s odsazením
   a vlastním obsahem místo seznamu položek. */
.dropdown-panel {
    width: 400px;
    min-width: 400px;
    /* Figma „Uprava tabulky": 400×154, obsah odsazený 24px, dole 32px. */
    padding: 24px 24px 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background-color: var(--background-color);
}

/* Popisek a pole mají mezi sebou 2px jako ve filtru. */
.dropdown-panel > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Globální pravidlo pro inputy má specificitu (0,0,7,1) — scoping přes #content. */
#content .dropdown-panel select {
    border-color: var(--light-grey);
    height: 34px;
    min-height: 34px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.1748 5.87793L7.87793 9.8335L11.244 5.87793' stroke='%230D0D0D' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 32px;
}

/* Tužka u nadpisu karty: v klidu --primary-m, na hover primary blue. */
.header-icon.edit-icon path { fill: var(--primary-m); }
.header-icon.edit-icon:hover path { fill: var(--primary-color); }

/* Sponka je stroke ikona — barvu bere přes currentColor, fill by ji rozbil. */
.file-chip:hover { background-color: var(--light-primary); }

/* Neaktivní šipka stránkování má v designu vlastní šedou (Grey_left.svg);
   v paletě pro ni token není. */
#content .pagination .arrow-btn:disabled {
    opacity: 1;
    cursor: default;
}

#content .pagination .arrow-btn:disabled path { fill: #777E8E; }

/* Neaktivní šipka nesmí reagovat na hover — systémové pravidlo
   `.pagination button:hover:not(.active):not(.dots)` :disabled nevylučuje. */
#content .pagination .arrow-btn:disabled:hover {
    background-color: transparent;
}

#content .pagination .arrow-btn:disabled:hover path { fill: #777E8E; }

/* Stránkování: Figma má stránku 26×28 a 13px Medium. Zaoblení zůstává
   systémové (999px) — změřený profil odznaku je pilulka, ne obdélník. */
#content .pagination button:not(.arrow-btn) {
    padding: 5px 9px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* ── Karta „Přidat stavební dokumentaci — výběr objektu" ─────────────────
   Figma frame „přidat stabebni dokumentaci - vyber objektu": 800×224,
   vycentrovaná, 40px pod lištou tabů. #content má padding-top 24 (kvůli
   přehledu), zbylých 16 doplní margin. Šířka 800 nemá utility. */
#karta-vyber-objektu { width: 100%; max-width: 800px; margin: 16px auto 0; }

/* `form > h2` přidává margin 24/8 — Figma chce nadpis těsně na paddingu
   karty; mezeru 24px pod ním už dává gap formu. */
#karta-vyber-objektu > h2 { margin: 0; }

/* Figma: rámeček --light-grey (#D1D5E0) a text 8px od kraje. Globální
   pravidlo pro inputy má specificitu (0,0,7,1), proto scoping přes id.
   Vlastní šipka je stejná jako u filtru na přehledu. */
#karta-vyber-objektu select {
    border-color: var(--light-grey);
    padding-left: 8px;
    padding-right: 32px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.1748 5.87793L7.87793 9.8335L11.244 5.87793' stroke='%230D0D0D' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* Figma: tlačítko 75×36, text Source Sans 3 SemiBold 14/20.
   `<button>` má výchozí 13,33px a `.btn` font-size nenastavuje — bez toho
   vyjde text menší a výška 35 místo 36 (7 + 20 + 7 + 2×1px rámeček). */
#karta-vyber-objektu .btn {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
}

/* „Dále" je <a> kvůli prokliku — na rozdíl od <button> nemá width: fit-content
   (systémové pravidlo cílí jen na button), takže by se roztáhl přes celou kartu. */
#karta-vyber-objektu .btn { width: fit-content; }

/* Figma: mezi polem a tlačítkem 32px, gap formu dává 24. */
#karta-vyber-objektu > div:last-child { margin-top: 8px; }

/* ── Formulář „Přidat stavební dokumentaci" ──────────────────────────────
   Figma frame „Přidat stavební dokumentaci" + „form stavebni dokumentace". */

#karta-form-dokumentace { width: 100%; max-width: 800px; margin: 16px auto 0; }

/* Figma: mezi nadpisem a prvním řádkem 32px; gap karty je 16. */
#karta-form-dokumentace > h2 { margin: 0 0 16px; }

/* Stránka Nastavení systému má podle návrhu stejná pole, popisky, záložky
   i avatar jako Nastavení profilu, proto je její id přidáno do selektorů níže.
   Autorizoval uživatel 2026-09-04. */
/* Figma: pole 35px, rámeček --light-grey (#D1D5E0), text 8px od kraje.
   Globální pravidlo pro inputy má specificitu (0,0,7,1) → scoping přes id. */
#karta-form-dokumentace input,
#karta-form-dokumentace select {
    min-height: 35px;
    border-color: var(--light-grey);
    padding-left: 8px;
}

/* Nastavení profilu má mít pole stejná jako karta Přidat dokument (Figma: 35px,
   rámeček --light-grey #D1D5E0, text 8px od kraje). Globální pravidlo pro inputy
   (ř. 2027) má specificitu (0,0,7,1), proto scoping přes id obalu záložek.
   Zaškrtávatka a přepínače jsou vyjmuté — min-height 35 a padding by je rozbily
   (na kartě dokumentu to řeší vlastní pravidlo ř. 6654). Autorizoval uživatel 2026-09-02. */
#karta-nastaveni-profilu input:not([type="checkbox"]):not([type="radio"]),
#karta-nastaveni-profilu select,
#karta-nastaveni-systemu input:not([type="checkbox"]):not([type="radio"]),
#karta-nastaveni-systemu select {
    min-height: 35px;
    border-color: var(--light-grey);
    padding-left: 8px;
}

/* Figma: avatar na Nastavení profilu je 104×104. Systémová .profile (ř. 3165)
   je 72 a sdílí ji dashboard i horní lišta, proto scoping přes id stránky.
   Autorizoval uživatel 2026-09-02. */
#karta-nastaveni-profilu .profile,
#karta-nastaveni-systemu .profile {
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
}

/* Figma: mezi záložkami je 10px. Projekt má utility 8 a 12, 10 nikoli
   a zavádět kvůli jedné stránce novou .g10px by rozšířilo utility
   sadu. Autorizoval uživatel 2026-09-02. */
#karta-nastaveni-profilu [role="tablist"],
#karta-nastaveni-systemu [role="tablist"] {
    gap: 10px;
}

/* Figma: popisky nepovinných polí jsou text/text 14/20 Regular; systémový
   <label> (ř. 2008) má 500. Povinné zůstávají SemiBold přes .required.
   Stejné řešení jako #karta-form-dokumentace label:not(.semibold).
   Autorizoval uživatel 2026-09-02. */
#karta-nastaveni-profilu label:not(.required),
#karta-nastaveni-systemu label:not(.required) {
    font-weight: var(--font-weight-normal);
}

/* Figma text styl "nadpisy/H3" je 16/18; systémové h3 má 16/24,
   což odpovídá stylu "H3 - medium". Stejné řešení jako .mini-kalendar h3
   (ř. 7061) a .kalendar-info-nazev (ř. 7538). Autorizoval uživatel 2026-09-02. */
#karta-nastaveni-profilu h3,
#karta-nastaveni-systemu h3 {
    line-height: var(--size-18);
}

/* V Integraci má Figma odrážky i text u zámku v Source Sans 3 16/24,
   zatímco systémový styl text/text 14/20 je Inter (ř. 168) a platí
   dál. .size-base nese v tomhle panelu přesně ty prvky 16/24.
   Autorizoval uživatel 2026-09-02. */
#panel-integrace .size-base {
    font-family: var(--font-family);
}

/* Vlastní šipka selectu — nativní se designu neshoduje. Stejné řešení jako
   u filtru na přehledu a u karty výběru objektu. */
#karta-form-dokumentace select {
    padding-right: 32px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.1748 5.87793L7.87793 9.8335L11.244 5.87793' stroke='%230D0D0D' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* Figma: mřížka 3 sloupců po 240px s mezerou 16 (752 = 3×240 + 2×16).
   Pevná šířka je nutná — jinak by se osamocená buňka („Město") roztáhla
   na celý řádek. Pixelovou utilitu pro 240px projekt nemá. */
#karta-form-dokumentace .row-container > div { flex: 0 0 240px; }

/* Figma: před podnadpisem sekce („Adresa") je mezera 32px, gap karty dává 16. */
#karta-form-dokumentace > h3 { margin: 16px 0 0; }

/* Figma: popisky formuláře jsou Regular 14/20; systémový <label> má 500. SemiBold
   zůstává jen u povinného pole. Karta výběru objektu je má mít stejné; `:not(.btn)`
   je nutné, jinak by id (1,1,1) přebilo váhu tlačítka z .btn u <label class="btn">.
   `.porucha-karta` uz tady neni, pravidlo se presunulo do base.html.
   Autorizace uživatele 2026-08-20. */
#karta-form-dokumentace label:not(.semibold),
#karta-vyber-objektu label:not(.semibold):not(.btn) { font-weight: var(--font-weight-normal); }

/* ── Sekce Dodavatelé ───────────────────────────────────────────────────
   Figma komponenty „form podsekce - dodavatelé" a „termín form". */

/* Uvnitř sekce je kontejner užší než karta — sloupce po třetinách, ne pevných
   240px, jinak by přetekly. Pevná třetina (ne `flex: 1`), aby se osamocené
   pole („Hodnocení", „Město") neroztáhlo přes celý řádek. */
#karta-form-dokumentace .dod-mrizka > div { flex: 0 0 calc((100% - 32px) / 3); }

/* Sekce Rozšířené a Dodatky mají dvousloupcovou mřížku (Figma). */
#karta-form-dokumentace .dod-mrizka-2 > div { flex: 0 0 calc((100% - 16px) / 2); }

/* Systémové `form .row-container / h3 / .divider { flex: 0 0 100% }` je
   descendant selektor, takže platí i tady. Rodičem je ale SLOUPCOVÝ flex,
   kde se flex-basis vztahuje na výšku — obsah pak přeteče kontejner
   (viz cookbook „flex-basis: 100% ve sloupcovém flexu"). */
#karta-form-dokumentace .js-ia-accordion-body .row-container,
#karta-form-dokumentace .js-ia-accordion-body h3,
#karta-form-dokumentace .js-ia-accordion-body .divider { flex: 0 0 auto; }

/* `form div:has(textarea) { flex: 0 0 100%; max-height: 100px }` výše v souboru
   zasáhne KAŽDÝ obal, který textareu jen obsahuje — celá sekce se pak ořízne
   na 100px. Seznam výjimek v tom pravidle pokrývá jen .column.g8-8px
   a .column.g16px, naše obaly mají g24px a g2px. */
#karta-form-dokumentace .js-ia-accordion-body div:has(textarea) {
    flex: 0 0 auto;
    max-height: none;
}

/* Radio: pravidlo pro inputy výše mu vnutilo min-height 35px a padding.
   Figma: 18×18, rámeček --grey, po zaškrtnutí zelený bod 12px. */
#karta-form-dokumentace input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--grey);
    border-radius: 50%;
}

/* Po zaškrtnutí přibude jen zelený kotouč uvnitř — rámeček zůstává šedý.
   Zelená plocha + vnitřní bílý prstenec dají hladkou kružnici; radial-gradient
   by měl zubaté okraje. */
#karta-form-dokumentace input[type="radio"]:checked {
    background-color: var(--green);
    box-shadow: inset 0 0 0 2px var(--background-color);
}

.dod-radio { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* Figma: „Přiřadit dodavatele" je 256px v panelu širokém 528, tedy polovina.
   Náš kontejner je širší, takže půlku počítáme z něj — na pevných 256px se
   placeholder „Vyberte nebo vyhledejte dodavatele" (228px + padding) nevejde. */
.dod-uzke { max-width: calc((100% - 16px) / 2); }

/* Figma: textarea „Předmět činnosti" 100px vysoká. */
#dod-predmet { min-height: 100px; }

/* Lišta editoru pod textareou. Figma „Frame 861": výška 36, ikony v boxech
   20×20, mezi B/I/U/S 16px, mezi skupinami 24px. */
.editor-lista { align-items: center; min-height: 36px; }

/* `.row-container path { fill: var(--text-color) }` (ř. ~1210) vyplní každou
   cestu uvnitř řádku. Ikony editoru jsou ale obrysové — výplň je zesílí
   a z chevronů udělá plné trojúhelníky. */
.editor-lista path { fill: none; }

.editor-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    color: var(--primary-color);
    border-radius: 4px;
    cursor: pointer;
}

/* Figma: vzorek barvy je plný kotouč 16×16. */
.editor-barva {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

/* Figma: aktivní zarovnání má box 60×36 s pozadím --secondary-color. */
.editor-zarovnani {
    flex: 0 0 auto;
    width: auto;
    height: 36px;
    gap: 4px;
    padding: 8px;
    background-color: var(--secondary-color);
}

.editor-btn:hover { background-color: var(--light-primary); }

/* Figma: podnadpisy v sekci jsou Medium 16/24; <h3> má 600. */
#karta-form-dokumentace .js-ia-accordion-body h3 {
    font-weight: var(--font-weight-medium);
    margin: 0;
}

/* Figma: „Přidat dodavatele" 150×32, ikona 19×19 a mezi ní a textem 8px.
   `.btn` dává 37px (past s výchozími 13,33px u <button>) a gap vůbec nemá. */
#karta-form-dokumentace .secondary-plus-btn {
    padding: 5px 8px;
    gap: 8px;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
}

/* Systémové .js-ia-accordion.active .milnik-arrow svg je DESCENDANT selektor —
   u vnořených akordeonů otočí i šipky vnitřních sekcí bez ohledu na jejich stav.
   Nejdřív ho zresetujeme, pak otočíme jen šipku té sekce, která je otevřená. */
/* `.milnik-arrow` je 16×16, šipka 10×8. Inline <svg> sedí na účaří, takže by
   se nevystředila (viz cookbook „inline svg přidává mezeru pod sebou"). */
#karta-form-dokumentace .milnik-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

#karta-form-dokumentace .js-ia-accordion .milnik-arrow svg {
    transform: none;
    transition: transform 0.2s ease;
}

#karta-form-dokumentace .js-ia-accordion.active > .js-ia-accordion-toggle .milnik-arrow svg {
    transform: rotate(180deg);
}

/* Mezi sousedními podsekcemi (Rozšířené / Dodatky) je 8px, ne 24 z gapu
   rodiče — dorovná to záporná margina. */
#karta-form-dokumentace .form-sekce + .form-sekce { margin-top: -16px; }

/* Přidat budovu (Přehled objektů): mezi TOP-LEVEL akordeony formuláře 8px mezera
   (uživatelský požadavek 2026-07-23). Kombinátor `>` cílí jen přímé potomky formu,
   takže se NEDOTKNE vnořených akordeonů ani stav-dok formuláře (ten má jediný
   top-level akordeon, `+` tam nikdy nematchne). Stejná specificita jako pravidlo
   výše, ale pozdější v pořadí → u přímých sourozenců přebije -16px na -8px
   (16px gap formu − 8px = 8px výsledná mezera). */
#karta-form-dokumentace > .form-sekce + .form-sekce { margin-top: -8px; }

/* Rozbalený obsah podsekce potřebuje odsazení od záhlaví. */
#karta-form-dokumentace .js-ia-accordion-body { margin-top: 16px; }

/* Figma: pruh podsekce 752×40. Rámeček 1px už dává systémová .form-sekce
   (záznam 94), tady zbývá jen padding: 24px řádek + 2×7 + 2×1 rámeček = 40.
   Autorizace uživatele 2026-07-27, zjednodušeno 2026-09-06. */
#karta-form-dokumentace .form-sekce { padding: 7px 16px; }

/* Figma: pod tlačítkem v rozbalené podsekci je 24px. Systémové pravidlo
   .form-sekce.active dává tenhle padding, ale můj shorthand výše ho přebíjí. */
#karta-form-dokumentace .form-sekce.active { padding-bottom: 24px; }
#karta-form-dokumentace .form-sekce h3 { margin: 0; }

/* ── Ukládací lišta ──────────────────────────────────────────────────── */

/* Figma 84px = 24 + 36 + 24; .doch-savebar má 16px.
   Stín je stejný jako u tabulky na přehledu, aby se lišta oddělila od obsahu. */
#ulozit-lista {
    padding: 24px 40px;
    box-shadow: 0px 0px 10px rgba(37, 34, 35, 0.08);
    /* Sticky hlavička tabulky (.scroll-table thead th, ř. 1824) má z-index 10
       a přelézala přes ukládací lištu — ta má být vždy nejblíž uživateli.
       Systémová .doch-savebar dává jen 7. Autorizace uživatele 2026-07-27. */
    z-index: 11;
}

/* Systémová .doch-dirty má opacity .7 — po uložení pak text vypadá vybledle
   a opticky tenčeji. Figma chce běžný text (14/20, 400, --text-color). */
#ulozit-lista .doch-dirty { opacity: 1; }

/* Tlačítka 36px — <button> má výchozí 13,33px a .btn font-size nenastavuje. */
#ulozit-lista .btn {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
}

#ulozit-lista .akce-btn {
    background-color: var(--primary-action);
    border-color: var(--primary-action);
}

/* Detail: tlačítko „Upravit" je ve Figmě 92px, tedy podstatně těsnější než
   „Uložit a zavřít" na formuláři (127). Odlišuje je to, že tady je to odkaz. */
/* Figma: Nadpisy/H4 - medium, tedy 14/20 s váhou 500 (.btn dává 600).
   Odsazení zůstává systémové jako u ostatních tlačítek. */
#ulozit-lista a.akce-btn {
    font-weight: var(--font-weight-medium);
    /* Figma: tlačítko 92px, mezi ikonou a textem 8. Šířka je pevná, protože
       systémový padding 24 by ji roztáhl na 125. */
    width: 92px;
    padding-left: 0;
    padding-right: 0;
    gap: 8px;
}

#ulozit-lista .akce-btn:hover {
    background-color: var(--light-primary);
    color: var(--primary-action);
    border-color: var(--primary-action);
}

/* ── Spojovník ───────────────────────────────────────────────────────────
   Vede od aktivní záložky dolů k aktivní kategorii v levém menu. Kreslí se
   jen tam, kde je i ukládací lišta. Absolutní pozice, aby nevstupoval do
   toku #contentu (jinak by ho gap 40px odsunul). top 109 = top menu − 3. */
/* Spojovník se kreslí podle toho, jestli ho stránka v markupu má — dřív byl vázaný
   na přítomnost ukládací lišty (#ulozit-lista), ale Přehled objektů má spojovník
   a lištu ne. Autorizoval uživatel 2026-07-24. */
#main-content:has(.spojovnik) { position: relative; }

.spojovnik { display: none; }

#main-content .spojovnik {
    display: block;
    position: absolute;
    left: -21px;
    top: 108px;
    width: 4px;
    height: 150px;
    background-color: var(--primary-color);
}

.spojovnik::before,
.spojovnik::after {
    content: "";
    position: absolute;
    /* 4px, aby seděla na vodorovnou čáru, která zůstane po sbalení top menu */
    height: 4px;
    background-color: var(--primary-color);
}

/* odbočka k aktivní záložce */
.spojovnik::before { left: 0; top: 0; width: 22px; }
/* odbočka k aktivní kategorii v levém menu — musí dosednout na pravou hranu
   sidebaru bez mezery (sidebar končí na 256px, spojovník začíná na 275px) */
.spojovnik::after { left: -19px; top: 146px; width: 22px; }

/* Tužka u nadpisu objektu se objeví až při najetí na nadpis. */
.nadpis-objektu .edit-icon {
    opacity: 0;
    color: var(--primary-m);
    transition: opacity 0.2s ease, color 0.25s ease;
}

.nadpis-objektu .edit-icon:hover { color: var(--primary-color); }

.nadpis-objektu:hover .edit-icon,
.nadpis-objektu .edit-icon:focus-visible { opacity: 1; }

/* ── Detail stavební dokumentace ─────────────────────────────────────────
   Figma frame „detail stavební dokumentaci". */

/* Obsah 1025 = levý sloupec 563 + mezera 40 + panel 422. */
/* Figma: obsah 1025 vycentrovaný v ploše 1105 (40px po stranách). */
#detail-layout {
    /* stretch: panel poznámek dorovná výšku levého sloupce. Když obsahu
       přibude (příloha), poroste panel dál a vstup zůstane na místě. */
    align-items: stretch;
    justify-content: center;
    margin-top: 16px;
}
#detail-hlavni { flex: 0 1 563px; min-width: 0; }
#detail-panel { flex: 0 1 422px; min-width: 0; }

/* Na úzkém okně se sloupce zalomí pod sebe, ať obsah nepřetéká ven. */
@media (max-width: 1180px) {
    #detail-layout { flex-wrap: wrap; }
    #detail-hlavni,
    #detail-panel { flex: 1 1 100%; }
}

/* Bílé karty s obsahem (Figma: padding 24, radius 8). */
.detail-karta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 24px 16px;
    border-radius: 8px;
    background-color: var(--background-color);
}

.detail-karta h3 {
    margin: 0;
    font-weight: var(--font-weight-medium);
}

/* Tlačítko s tužkou je vyšší než nadpis — bez tohohle by řádek narostl
   a nadpis by se v něm vycentroval (2px navíc nahoře i pod ním). */
.detail-karta > .space-between { align-items: flex-start; }
.detail-karta > .space-between .header-icon { height: 24px; }

/* Meta řádek pod nadpisem (Figma 13/20). */
.detail-meta { font-size: var(--font-size-xs); }
.detail-meta-oddelovac { color: var(--primary-m); margin: 0 8px; }

/* Popisek 13/20 regular, hodnota 14/20 medium. */
/* Chip se šířkou podle délky názvu souboru, ne přes celou buňku. */
.detail-mrizka .file-chip {
    align-self: flex-start;
    width: fit-content;
    /* Figma: chip 26px; systémový má 28 (sdílíme ho s přehledem, proto scope). */
    min-height: 26px;
    height: auto;          /* 2026-08-12: bylo 26px — zalomený název vytékal ven o 34 px */
    padding-top: 2px;      /* 20 (řádek) + 4 + 2 (rámeček) = 26, jednořádkový stav sedí dál */
    padding-bottom: 2px;
}

/* Dvojice popisek+hodnota jsou zarovnané po řádcích (Figma), ne ve dvou
   nezávislých sloupcích — jinak se pravý sloupec vůči levému rozjede. */
.detail-mrizka .row-container > div { flex: 1 1 0; }
.detail-popisek { font-size: var(--font-size-xs); }
.detail-hodnota { font-weight: var(--font-weight-medium); }

/* Odkazy na dodavatele (Figma 16/24 medium). */
.detail-odkaz {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-weight: var(--font-weight-medium);
    color: var(--primary-color);
}

/* Jsou to odkazy — na hover je podtržení. */
.detail-odkaz:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Záložky Poznámky / Aktivita — aktivní světlá, neaktivní tmavě modrá. */
/* Figma: obě záložky jsou hranaté; aktivní je světlá a splývá s panelem. */
.detail-tab {
    padding: 6px 16px;
    border: none;
    border-radius: 0;
    background-color: var(--primary-color);
    color: var(--background-color);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.detail-tab.is-active {
    background-color: var(--background-color);
    color: var(--primary-color);
}

/* Neaktivní záložka má stejný hover jako zbytek redesignu:
   světle modré pozadí a tmavě modrý text. */
.detail-tab:not(.is-active):hover {
    background-color: var(--light-primary);
    color: var(--primary-hover);
}

.detail-panel-telo {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border-radius: 0 8px 8px 8px;
    background-color: var(--background-color);
    /* Bez pevné výšky: panel roste s obsahem, takže přidaná příloha
       nesebere volné místo a vstupní řádek zůstane na svém. */
}

/* Avatar je nahoře, svisle odsazený o 16px — zarovná se tak se jménem,
   které je uvnitř bubliny odsazené paddingem 16. */
.detail-poznamka { align-items: flex-start; }
.detail-poznamka > .detail-avatar { margin-top: 16px; }

/* Bublina poznámky */
.detail-bublina {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Figma: gap mezi jménem, textem a přílohou je 8. */
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--light-grey);
    border-radius: 16px;
}

/* Kebab patří k pravé hraně bubliny — bez plné šířky by se .space-between
   smrštil na obsah (rodič má align-items: flex-start). */
.detail-bublina .space-between { width: 100%; }

.detail-bublina h4 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.detail-bublina p { margin: 0; }
/* Časová značka je odsazená stejně jako text v bublině. */
.detail-cas { margin-left: 16px; font-size: var(--font-size-xs); color: var(--placeholder-color); }

/* Avatar: zástupná ikona osoby se stavovou tečkou (fotky doplní backend). */
.detail-avatar {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.detail-avatar svg { width: 22px; height: 24px; }

.detail-avatar::after {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--background-color);
    background-color: var(--green);
}

.detail-avatar[data-stav="pryc"]::after { background-color: var(--red); }

/* Pole pro novou poznámku */
/* Seznam poznámek vyplní volné místo, vstupní řádek zůstane pod ním —
   přidaná příloha pak roste dolů a vstupem nehne. */
/* #detail-panel se roztáhne na výšku řádku, tělo panelu uvnitř musí
   ten prostor vyplnit — jinak zůstane u horní hrany. */
#detail-panel .detail-panel-telo { flex: 1 1 auto; }

/* Seznam poznámek pohltí volné místo — mezera se tím zvětší mezi poslední
   zprávou a vstupním řádkem, který zůstane dole. */
.detail-poznamky {
    flex: 1 1 auto;
    /* min-height: auto by shrinku bránilo — bez tohohle by panel při přidání
       přílohy přerostl levý sloupec místo aby se vstup posunul nahoru. */
    min-height: 0;
}
.detail-vstup { align-items: center; }

.detail-vstup-pole {
    display: flex;
    align-items: center;
    gap: 16px;
    /* flex-basis 0, aby pole vyplnilo zbytek řádku — s auto se smrštilo na obsah */
    flex: 1 1 0;
    min-width: 0;
    padding: 0 16px;
    border: 1px solid var(--light-grey);
    /* Pole na novou poznámku patří do záložky Poznámky, takže stejné zaoblení
       jako bublina (.detail-bublina). Doplněno 2026-08-11, dřív mělo ostré rohy. */
    border-radius: 16px;
}

/* Globální pravidlo pro inputy má specificitu (0,0,7,1) a přebilo by
   výšku i šířku — scopování přes #detail-panel dá (0,1,2,1). */
#detail-panel .detail-vstup-pole input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    border: none;
    /* Klasický systémový input (34), jen s ikonami navíc — výšku řádku
       (Figma 42,37) určují ikony 25px plus svislý padding pole. */
    min-height: 40px;
    padding: 0;
}

/* Ikony sponky a odeslání jsou v poli výrazně větší než jinde. */
.detail-vstup-pole .header-icon { flex: 0 0 auto; }
/* 25×25 je rámeček komponenty, ne glyf — sponka i odeslání si drží
   přirozenou velikost, stejně jako ikony v kebabu. */
.detail-vstup-pole .header-icon { width: 25px; height: 25px; }

.detail-vstup-pole input:focus { outline: none; }

/* Pravidlo .row-container path (ř. ~1210) vyplní každou cestu uvnitř řádku —
   sponka je ale obrysová ikona a udělala by se z ní kaňka. */
.file-chip path,
.detail-vstup-pole button[aria-label="Přiložit soubor"] path { fill: none; }

/* Mezera mezi ikonou a textem v tlačítku spodní lišty (.btn gap nemá). */
#ulozit-lista .btn { gap: 8px; }

/* Chip přílohy pod polem; křížek je šedý, po najetí červený. */
/* Přílohy se řadí vedle sebe a zalamují se; odsazení kopíruje vstupní pole. */
.detail-prilohy {
    margin-left: 56px;
    /* Panel má gap 24, mezi vstupem a přílohami má být 10 → −14 to dorovná. */
    margin-top: -14px;
    flex-wrap: wrap;
    align-items: center;
    /* .g8px nuluje row-gap — zalomené chipy by se slepily na sebe. */
    gap: 10px;
}
.priloha-chip { gap: 8px; }

.priloha-zrusit {
    display: flex;
    padding: 0;
    border: none;
    background: none;
    color: var(--primary-m);
    cursor: pointer;
}

.priloha-zrusit:hover { color: var(--red); }

/* Kebab u poznámky má vlastní barvu --primary-m (#A3ACC2); stejná ikona
   se jinde v systému používá v tmavší barvě. */
.detail-bublina .js-dropdown-toggle path { fill: var(--primary-m); }
.detail-bublina .js-dropdown-toggle:hover path { fill: var(--primary-color); }

/* Kebab u poznámky: Upravit modře, Smazat červeně. */
.poznamka-menu {
    width: 176px;
    border: 1px solid var(--primary-m);
}

.poznamka-menu .action-menu-item {
    padding: 12px 16px;
    gap: 8px;
    text-align: left;
    /* Figma: běžný text 14/20. <button> má výchozích 13,33px a line-height
       normal, .action-menu-item font ani řádkování nenastavuje. */
    font-family: var(--font-inter);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-normal);
    white-space: normal;
}

/* Tužka v kebabu byla větší než koš vedle ní — sjednoceno na výšku koše. */
.poznamka-menu .action-menu-item:not(.je-smazat) .header-icon svg {
    width: 15px;
    height: 15px;
}

.poznamka-menu .action-menu-item:hover { background-color: var(--light-primary); }

.poznamka-menu .je-smazat:hover {
    background-color: var(--light-red);
    color: var(--red);
}

/* ── Záložka Aktivita ────────────────────────────────────────────────────
   Časová osa: svislá linka vlevo, barevný bod u každé události, karta s
   nadpisem, oddělovačem a metadaty. */
.aktivita-osa {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    /* vpravo místo pro posuvník, ať nepřekrývá karty */
    padding: 0 8px 0 32px;
    list-style: none;
    /* flex-basis 0 (ne auto): obsah osy se nezapočítá do přirozené výšky
       panelu, takže výšku určuje levý sloupec a osa se uvnitř roluje. */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

/* Linka patří na panel, ne na rolovací osu — uvnitř ní by se posouvala
   s obsahem a při odrolování skončila dřív než pole. Takhle zůstává stát
   a vyplňuje celou viditelnou výšku. 37 = padding panelu 24 + odsazení osy 13. */
#panel-aktivita { position: relative; }

#panel-aktivita::before {
    content: "";
    position: absolute;
    left: 37px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background-color: var(--darker-table-line);
}

.aktivita-polozka { position: relative; }

/* Bod leží na levé hraně karty (ne na lince) a má šedý prstenec. */
.aktivita-polozka::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 20px;
    width: 10px;
    height: 10px;
    box-sizing: content-box;
    border: 2px solid var(--light-grey);
    border-radius: 50%;
    background-color: var(--green);
}

.aktivita-polozka[data-typ="smazano"]::before { background-color: var(--red); }
.aktivita-polozka[data-typ="aktualizace"]::before { background-color: var(--tm-sky-blue); }

.aktivita-karta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--light-grey);
    /* Figma: karta v záložce Aktivita má 8, kdežto bublina poznámky 16
       (.detail-bublina). Doplněno 2026-08-11, dřív tu radius chyběl úplně. */
    border-radius: 8px;
}

.aktivita-karta h4 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.aktivita-karta .divider { margin: 0; }

.aktivita-zmena { margin: 0; }

.aktivita-meta {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--placeholder-color);
}

.aktivita-oddelovac { color: var(--primary-m); margin: 0 4px; }

/* ── Přehled objektů ──────────────────────────────────────────────────── */

/* Figma: text dlaždice SemiBold 14/20; systémová .card-sm má 16/24. */
#content .card-grid-sm .card-sm {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-semibold);
}

/* Přepínač zobrazení (Figma 122x42, rámeček --light-grey). Aktivní ikona má
   tmavé pozadí a bílou kresbu — systémový .view-toggle-btn.active to má opačně
   (světlé pozadí, tmavá ikona), proto scopováno přes .prehled-view-toggle. */
.prehled-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 6px;
    border: 1px solid var(--light-grey);
}
.prehled-view-toggle .view-toggle-btn { width: 34px; height: 30px; }

/* Ikona je vždy tmavá (--primary-color); aktivní pole má tmavé pozadí a bílou
   ikonu; hover mění POUZE pozadí (světle modrá), ikona zůstává tmavá. */
.prehled-view-toggle .view-toggle-btn svg path,
.prehled-view-toggle .view-toggle-btn svg rect { fill: var(--primary-color); }
.prehled-view-toggle .view-toggle-btn.active { background-color: var(--primary-color); }
.prehled-view-toggle .view-toggle-btn.active svg path,
.prehled-view-toggle .view-toggle-btn.active svg rect { fill: var(--background-color); }
.prehled-view-toggle .view-toggle-btn:hover:not(.active) { background-color: var(--light-primary); }


/* Mezera nad tabulkou: filtr → tabulka 32px (bez hromadných akcí),
   hromadné akce → tabulka 16px (když jsou vidět). Tabulka má margin-top -16
   kvůli stínu; base přepíšeme na 8 (→32), a když je bulk toolbar viditelný,
   stáhneme scroll o -8 (→16). Přes id kvůli specificitě stínového pravidla. */
#content .table-container > .scroll-table:has(> .asset-table.rows-compact) { margin-top: 0; }
#view-list .scroll-table { margin-top: 8px; }
#content .table-container > #bulk-toolbar:not([hidden]) + .scroll-table { margin-top: -16px; }
#view-list #bulk-toolbar:not([hidden]) + .scroll-table { margin-top: -8px; }

/* ── Přehled objektů, list view: šířky sloupců + žádný hover u řadicích šipek ── */
/* Inv. číslo úzký, ať Adresa není odsunutá doprava (Figma). */
#view-list .asset-table th:nth-child(1) { width: 48px; }
#view-list .asset-table th:nth-child(2) { width: 280px; }
#view-list .asset-table th:nth-child(3) { width: 130px; }
#view-list .asset-table th:nth-child(4) { width: auto; }
#view-list .asset-table th:nth-child(5) { width: 56px; }

/* Řadicí šipky nemají hover — barva zůstává jako default (currentColor). */
#view-list .arrows-nav .arrow:hover path { fill: currentColor; }

/* ══ Přehled objektů – Detail budovy (polish; autorizace uživatele 2026-07-23) ══ */
/* Neutrální zaoblený pill „B-001" (Figma: padding 4/10, radius 50, výplň background,
   rámeček 1.5px darker-table-line, text primary). Projekt neměl zaoblený neutrální pill. */
.detail-pill {
    padding: 4px 10px;
    border-radius: 50px;
    background: var(--background-color);
    border: 1.5px solid var(--darker-table-line);
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
}
/* Pravý panel Poznámky/Aktivita: LÍSUJE výšku s levým sloupcem (align-items:stretch
   #detail-layout), obsah nad 520px se v těle roluje a panel je sticky.
   Spodní mez = horní mez, tedy pevná výška: s původními 400 panel skákal, protože
   tam, kde je levý sloupec kratší, určoval výšku obsah právě aktivní záložky
   (Aktivita je kratší než Poznámky). Autorizace uživatele 2026-08-14. */
#detail-panel.detail-panel-lisujici {
    position: sticky;
    top: 24px;
    min-height: 520px;
    max-height: 520px;
}
#detail-panel.detail-panel-lisujici .detail-panel-telo { overflow-y: auto; }
/* Tužka (edit) se ukazuje jen u ROZBALENÉ sbalovací karty. */
.detail-karta.js-ia-accordion:not(.active) .edit-icon { display: none; }
/* Kebab v poznámkách má primary barvu (byl černý = currentColor). */
#detail-panel .detail-poznamka .js-dropdown-toggle svg path { fill: var(--primary-color); }
/* Zbylé ikony panelu Poznámky byly černé ze stejného důvodu: `.row-container path`
   (ř. 1239) přebíjí `.header-icon path` (ř. 783) pořadím. Sponka je obrysová, proto
   jí stačí `color` — fill zůstává none z pravidla o řádek výš (detail: vault § 4.28).
   Autorizace uživatele 2026-08-20. */
#detail-panel .detail-avatar path,
#detail-panel .poznamka-menu .action-menu-item .header-icon path,
#detail-panel .detail-vstup-pole button[aria-label="Odeslat poznámku"] path { fill: var(--primary-color); }
#detail-panel .detail-vstup-pole .header-icon { color: var(--primary-color); }
/* Detail budovy: podsekce vázané na konkrétní budovu (zanořené pod „ZŠ Prosek")
   mají odlišné pozadí — signalizují, že souvisí s danou budovou. Barva dle Figmy. */
#sidebar .side-budova-podsekce { background-color: #4665B2; color: var(--background-color); }
#sidebar .side-budova-podsekce:hover { background-color: var(--light-primary); color: var(--primary-hover); }
/* Detail budovy: spodní sekce (Podlaží/Místnosti/Matterport) se šířkou i pozicí
   srovná s horním 2-sloupcem (563 + 40 gap + 422 = 1025, ten je centrovaný),
   ať není přes celou šířku #content (byla ~2× širší než levý sloupec). */
#content > section { width: 100%; max-width: 1025px; margin: 0 auto; }
/* Sekční přepínač: první 4 taby primary (#182F66 default .detail-tab), 5. a další
   #22428F. :not(:hover) → hover zůstává systémový. */
#detail-sekce-taby .detail-tab:not(.is-active):not(:hover):nth-child(n+5) { background-color: var(--primary-hover); }
/* Spodní přepínač: neaktivní taby mají v KLIDU tmavší modrou (Figma #22428F = primary-hover).
   `:not(:hover)` – měníme jen default, hover zůstává systémový (.detail-tab:not(.is-active):hover). */
#content > section[aria-label^="Podlaží"] .detail-tab:not(.is-active):not(:hover) { background-color: var(--primary-hover); }
/* Detail Místnosti tabulka: hlavičky zarovnané nahoru, aby „QR" (bez šipek) bylo
   ve výšce ostatních titulků. Mezeru 8px pod záhlavím řeší od 2026-07-25 systémové
   pravidlo (ř. 5504); zdejších scopovaných 6px bylo proto zrušeno. */
#panel-mistnosti .asset-table.rows-compact thead th { vertical-align: top; }
/* Ukládací lišta: tlačítka mají podle Figmy 24px boční padding a 108px jako
   MINIMÁLNÍ šířku — delší popisek („Uložit do detailu") tlačítko roztáhne, místo
   aby se text mačkal do pevných 108px. Původní `width: 108px` + 6px padding
   vzniklo kvůli „Nápovědě" s ikonou v Detailu budovy; ta je po změně 141px.
   Svislý padding zůstává 7px (ř. 5961) — s 1px obrysem to dává výšku 36px,
   kterou Figma u rámečku uvádí (8px z Figmy by dalo 38px). Ikonu chráníme
   před scvrknutím. Autorizace uživatele 2026-07-27, globální rozsah. */
/* min-width 108 vypadl 2026-09-06 (autorizace uživatele): Figma má tlačítka
   v liště jako hug (84), krátký popisek se nemá roztahovat. */
#ulozit-lista .secondary-btn { padding-left: 24px; padding-right: 24px; }
#ulozit-lista .secondary-btn svg { flex-shrink: 0; }
/* ZŠ Prosek / Podlaží / Místnost toggle v sidebaru: chevron se otáčí podle VLASTNÍHO
   is-open. `#sidebar` scope (specificita 1,x,0) přebíjí systémové
   `.side-section-wrapper.is-open .chevron-icon` (0,3,0), které by jinak jako
   descendant selektor drželo vnořený chevron pořád otočený. */
#sidebar .js-object-toggle .chevron-icon { transform: rotate(0deg); }
#sidebar .js-object-toggle.is-open .chevron-icon { transform: rotate(180deg); }
/* Detail budovy „rolldowns" mají stejnou velikost jako formulářové akordeony
   (padding 7/16, active 24 dole), ale bez outlinu (.detail-karta border už nemá). */
.detail-karta.js-ia-accordion { padding: 7px 16px; }
.detail-karta.js-ia-accordion.active { padding-bottom: 24px; }
/* Detail rolldowns: chevron/tužka svisle vycentrované s nadpisem (hlavička je vždy
   jednořádková — tělo je samostatný sourozenec), v zavřeném i otevřeném stavu. */
.detail-karta.js-ia-accordion > .space-between { align-items: center; }
/* Detail budovy: mezera mezi kartami (dropdowns) 8px = g24px (#detail-hlavni) − 16px. */
.detail-karta.js-ia-accordion + .detail-karta.js-ia-accordion { margin-top: -16px; }
/* Detail Místnosti tabulka: Podlaží pohltí volné místo (obsah vlevo, mezera vpravo),
   QR + Akce se zúží k pravému konci (QR těsně před kebabem); „Místnost / Jednotka"
   se nezalamuje. */
#panel-mistnosti .asset-table th:nth-child(3), #panel-mistnosti .asset-table td:nth-child(3) { width: 100%; }
#panel-mistnosti .asset-table th:nth-child(2), #panel-mistnosti .asset-table td:nth-child(2) { white-space: nowrap; }
#panel-mistnosti .asset-table th:nth-child(4), #panel-mistnosti .asset-table td:nth-child(4),
#panel-mistnosti .asset-table th:nth-child(5), #panel-mistnosti .asset-table td:nth-child(5) { width: 1px; white-space: nowrap; }
/* Mezera QR ↔ kebab v Místnosti tabulce = 12px (Figma). */
#panel-mistnosti .asset-table td:nth-child(4) { padding-right: 12px; }
#panel-mistnosti .asset-table td:nth-child(5) { padding-left: 0; }

/* Zaškrtávátka ve formuláři „Přidat budovu" (sekce Revize a kontroly).
   Formulář znovupoužívá id #karta-form-dokumentace kvůli 240px mřížce, čímž si
   přitáhl i `#karta-form-dokumentace input { min-height: 35px; padding-left: 8px }`
   (ř. 5743) určené pro textová pole — checkboxům to dělá 18×35 místo 18×18.
   Autorizoval uživatel 2026-07-24. */
#karta-form-dokumentace input[type="checkbox"] { min-height: 18px; padding-left: 0; }
/* Zaškrtnutý stav: totéž pravidlo vnucuje i `border-color: var(--light-grey)`, takže
   checkbox měl v tabulkách plnou modrou plochu, ale ve formuláři šedý outline.
   Sjednoceno s `input[type="checkbox"]:checked` (ř. 2058). Autorizoval uživatel 2026-07-24. */
#karta-form-dokumentace input[type="checkbox"]:checked { border-color: var(--primary-color); }

/* ══ Detail budovy – sekční přepínač: panely Majetku (autorizace uživatele 2026-07-25) ══ */
/* Komponenty z návrhu „design/design_majetek/detail zarizeni - navazane sekce.png",
   které projekt zatím neměl. Záměrně BEZ scopování na id — tytéž prvky použije i sekce
   Majetek, až se k ní dostaneme (stejný princip jako u .file-chip a .detail-pill). */

/* Barevná pilulka s datem uvnitř buňky (Figma: padding 4/10, radius 6, bílý text).
   Bílý text a váhu medium dodává systémová .pozadi-datum, výplň .pozadi-<barva>;
   projekt neměl utilitu pro padding 4/10 px ani radius 6 px. Sloupcový flex drží
   dvouřádkovou variantu datum + čas. */
.datum-pill {
    display: inline-flex;
    flex-direction: column;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

/* Drobné části pilulky (čas, popisky „od:" / „do:") mají stejný řez jako čas
   ve sloupci Nahlášeno, tedy REGULAR — .size-xxs řeší jen velikost, váhu by
   jinak zdědily z .pozadi-datum (medium). Autorizace uživatele 2026-08-11,
   viz ZMENY-CSS.md záznam č. 36. Dědičnost prohrává s přímým pravidlem,
   takže (0,2,0) tady stačí. */
.datum-pill .size-xxs {
    font-weight: var(--font-weight-normal);
}

/* Výjimka z pravidla o řádek výš: u dvoudílného termínu (od–do) chce Figma
   popisky „od:" / „do:" v regular, ale samotný ČAS v Semi Bold. Jedno pravidlo
   dvě různé váhy uvnitř téže pilulky nepokryje, proto samostatná třída.
   Autorizace uživatele 2026-08-11, viz ZMENY-CSS.md záznam č. 38.

   Selektor musí mít (0,3,0): pravidlo nad ním má (0,2,0), takže samotná
   `.cas-semibold` (0,1,0) ani `.size-xxs.cas-semibold` (0,2,0) by neuspěly —
   u shodné specificity by rozhodovalo pořadí v souboru, což je křehké.
   Takhle vyhraje nezávisle na pořadí. Systémová utilita `.semibold` (0,1,0)
   z téhož důvodu na tomhle místě nefunguje. */
.datum-pill .size-xxs.cas-semibold {
    font-weight: var(--font-weight-semibold);
}

/* Pilulky v panelu Revize a kontroly mají mít všechny stejnou délku bez ohledu na
   délku data (přání šéfové). 148 = 128 (nejdelší možné české datum
   „30. července 2026", naměřeno 126,8px v Inter Medium 14) + 2×10 padding.
   Scopováno na #stab-revize — v Poruchách a Úkolech si pilulka dál drží šířku
   podle obsahu, tam se sjednocovat nemá. */
#stab-revize .datum-pill { width: 148px; }

/* Totéž přání i pro blok závad v Revizích a kontrolách — pilulky mají mít stejnou
   délku bez ohledu na datum (naměřeno 119 vs 136 px). Sedí i na už hotové panely
   Majetku, kde stejnou hodnotu dává pravidlo o řádek výš. Autorizace uživatele 2026-08-16. */
.zavada-radek .datum-pill { width: 148px; }

/* Mřížka bloku závad: pilulka je pevných 148px, takže prostřední sloupec dostane
   přesně ji a první si vezme zbytek. S `1fr 1fr auto` si sloupce místo rozdělily
   špatně (65 / 148 / 25) a pilulka začínala o 23px vlevo od své hlavičky. */
#stab-revize .detail-panel-telo .zavada-radek {
    grid-template-columns: 1fr 148px 25px;
}

/* Sloupec „Termín řešení" musí pojmout 148px pilulku i s mezerou. Měl jen 130px,
   což je míň než pilulka — zarovnat hlavičku s obsahem tedy geometricky nešlo. */
#stab-revize .detail-panel-telo .asset-table th:nth-child(7) {
    width: 196px;
}

/* Sloupec „Vyřešit": hlavička byla zarovnaná vlevo, ale ikona je blokový flex
   s pevnou šířkou 25px (.header-icon, ř. 773), takže na ni text-align nepůsobí —
   střed textu vycházel o 11,7px vpravo od středu ikon. Vycentrujeme obojí do
   buňky: text přes text-align, ikonu přes automatické marginy. Ve Figmě mají
   popisek i ikona společný střed. */
#stab-revize .detail-panel-telo .asset-table th:nth-child(5) {
    text-align: center;
}

#stab-revize .detail-panel-telo .asset-table td:nth-child(5) .header-icon {
    margin-left: auto;
    margin-right: auto;
}

/* Historie prověrek — blok závad. Dva problémy naráz:
   1) položky mřížky se ve výchozím stavu natahují na šířku sloupce, takže pilulka
      „Vyřešeno" byla 168px místo ~103 podle obsahu → justify-items: start;
   2) sloupce `1fr 1fr auto` neseděly pod hlavičkou (Stav +38, Příloha +30).
   Šířky odpovídají rozestupům hlaviček Závady / Stav / Příloha závady.
   POZOR: hodnoty jsou vázané na šířky sloupců téhle tabulky — když se změní
   obsah hlaviček, je potřeba je přeměřit. */
#stab-revize .karta-historie .zavada-radek,
#stab-revize .karta-historie .zavada-mrizka {
    justify-items: start;
    grid-template-columns: 130px 177px auto;
}

/* Tabulka Historie prověrek se při zužování okna smršťovala a obsah se v ní
   překrýval. Má se chovat jako tabulka Revizí nad ní — tu drží na 833px vlastní
   obsah (148px pilulka + 196px sloupec), takže se pod to nescvrkne a obalovač
   místo toho zapne vodorovné rolování. Historie takovou přirozenou spodní hranici
   nemá, proto se jí zadává ručně. 977 = šířka tabulky na návrhové šířce karty. */
#stab-revize .karta-historie .asset-table {
    min-width: 977px;
}

/* Bílá zaoblená pilulka kolem stavové tečky („Aktuální") i kolem výstražného
   trojúhelníku priority („Nízká"). Tečku dodává systémová .circle.circle-sm + barva,
   trojúhelník je inline SVG s .fill-<barva>. Nejbližší existující obal .icon-toggle
   je filtrační komponenta s cursor:pointer a stavem .is-active — sémanticky nesedí. */
.stav-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px solid var(--darker-table-line);
    border-radius: 999px;
    background-color: var(--background-color);
    white-space: nowrap;
    /* Řez medium podle Figmy (autorizace uživatele 2026-08-15) — pilulka
       nenastavovala font-weight a dědila 400 z <body>. */
    font-weight: var(--font-weight-medium);
}

/* Vnořený rámeček závad uvnitř buňky tabulky Revize a kontroly / Historie prověrek
   (Figma: bílý box, rámeček 1px light-grey, radius 8, mezi položkami vodorovná linka).
   Projekt neměl žádný pattern pro blok uvnitř <td>. */
.zavada-blok {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    background-color: var(--background-color);
}

.zavada-radek {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 6px 12px;
}

.zavada-radek + .zavada-radek { border-top: 1px solid var(--light-grey); }

/* Hlavička tabulky neznala mřížku bloku závad, takže popisky seděly jinde než obsah
   (naměřeno −39 až +465 px podle šířky okna). Hlavička i řádky bez závad teď mají
   sloučenou buňku se stejnými tracky jako blok. 13px odsazení = 12px padding
   .zavada-radek + 1px rámeček .zavada-blok. Autorizace uživatele 2026-08-16. */
.zavada-mrizka {
    display: grid;
    align-items: center;
    gap: 16px;
    padding: 0 13px;
    /* Mřížka je jen tak široká, jak potřebuje — na širokém okně se nenatahuje
       přes celou buňku, ale drží se u levé hrany sloupce. */
    width: fit-content;
}

/* Pevné minimum místo `auto`: auto se řídí délkou textu a hlavička („Závada") je
   kratší než obsah („Závada 1") — tracky by se rozešly o ~9 px. Strop 148px (šířka
   pilulky) drží název u termínu i na širokém okně, kde by `1fr` roztáhl sloupec
   přes celou buňku. */
.zavada-mrizka.dva-sloupce, .zavada-radek.dva-sloupce {
    grid-template-columns: minmax(64px, 148px) 148px;
}

.zavada-mrizka.tri-sloupce, .zavada-radek.tri-sloupce {
    grid-template-columns: minmax(64px, 148px) 148px 25px;
}

/* Popisek „Vyřešit" je širší než 25px sloupec s ikonou — vycentruje se na ni. */
.zavada-mrizka.tri-sloupce > :last-child {
    justify-self: center;
    white-space: nowrap;
}

/* Rámeček obepíná mřížku (na širokém okně se nenatahuje přes celou buňku) a nesmí
   být užší, než mřížka potřebuje — jinak by z něj obsah vylezl. Minima = tracky
   v nejužším stavu + mezery + 2×13 odsazení. */
.zavada-blok:has(> .zavada-radek.dva-sloupce),
.zavada-blok:has(> .zavada-radek.tri-sloupce) { width: fit-content; }

.zavada-blok:has(> .zavada-radek.dva-sloupce),
.zavada-mrizka.dva-sloupce { min-width: 254px; }

.zavada-blok:has(> .zavada-radek.tri-sloupce),
.zavada-mrizka.tri-sloupce { min-width: 295px; }

/* A buňka musí to minimum pojmout i s 16px odsazením z každé strany — bez toho jí
   tabulka na užším okně ubere šířku a rámeček vyleze za pravou hranu tabulky. */
td:has(> .zavada-blok > .zavada-radek.dva-sloupce),
td:has(> .zavada-mrizka.dva-sloupce),
th:has(> .zavada-mrizka.dva-sloupce) { min-width: 286px; }

td:has(> .zavada-blok > .zavada-radek.tri-sloupce),
td:has(> .zavada-mrizka.tri-sloupce),
th:has(> .zavada-mrizka.tri-sloupce) { min-width: 327px; }

/* Souhrnný box nad tabulkou Nákladů (Figma: 188×74, rámeček 1px darker-table-line,
   radius 8, padding 16, částka 22/28 semibold). Systémová .dashboard-card má rámeček
   2px a .db-main-title 36/48 — obojí je na tenhle pruh příliš velké. */
.souhrn-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--darker-table-line);
    border-radius: 8px;
    background-color: var(--background-color);
}

.souhrn-box .souhrn-castka {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--dark-grey);
}

/* Svislý oddělovač sloupců uvnitř tabulky (Revize a kontroly, Historie prověrek).
   Systémová .border-right (ř. 5109) má barvu natvrdo #D1D0DD a kreslí souvislou
   linku odshora dolů. Figma (ověřeno přes MCP na uzlu „tabulka rkz detailneji")
   chce --light-grey #D1D5E0 a v záhlaví jen krátký segment 18px, který končí
   12px nad prvním řádkem; v těle pak segmenty navazují řádek na řádek.
   Autorizace uživatele 2026-07-26. */
.asset-table th.oddelovac,
.asset-table td.oddelovac { position: relative; }

.asset-table th.oddelovac::after,
.asset-table td.oddelovac::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--light-grey);
}

/* Záhlaví: segment vysoký jako popisek a svisle vycentrovaný NA TEXT popisku.
   Kotví se shora (padding-top 18px z .rows-compact + 1px inset do řádky 20px),
   ne zdola — vázat ho na spodní hranu buňky ho posunulo o 2,5px nad text. */
.asset-table th.oddelovac::after {
    top: 19px;
    bottom: auto;
    height: 18px;
}

/* Dokumenty: „Název" se při zděděných šířkách .rows-compact (131px) lámal na tři
   řádky, zatímco „Číslo dokumentu" mělo 191px zbytečně. Přerozděleno. */
#stab-dokumenty .asset-table th:nth-child(2) { width: 260px; }
#stab-dokumenty .asset-table th:nth-child(3) { width: 110px; }

/* Vozidla (vozový park): tabulka má 10 sloupců, ale .rows-compact je počítaná
   na 7 — s jejími 16px vodorovného paddingu potřebuje 1036px proti 991px, které
   má karta, a sloupec QR + kebab se uťal. Figma má mezi sloupci 8px (datové
   sloupce 144px, pilulka s datem 125px), takže těch 16px je pro tuhle tabulku
   navíc. S 8px vychází tabulka přesně na 991px a šířky sedí s návrhem
   (STK 140 vs 144, Pov. ruč. 145 vs 145).
   Mění se VÝHRADNĚ vodorovný padding — svislý (5px, v thead 18px) i šířky
   sloupců zůstávají. Proto padding-left/right, ne zkratka `padding`: ta by kvůli
   vyšší specificitě (id) přebila .rows-compact thead th { padding-top: 18px }.
   Autorizace uživatele 2026-07-27. */
#panel-vozidla .asset-table.rows-compact td,
#panel-vozidla .asset-table.rows-compact th {
    padding-left: 8px;
    padding-right: 8px;
}

#content .sloupce-auto th { width: auto; }

.kod-pill {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border: 1px solid var(--primary-color);
    border-radius: 50px;
    background-color: var(--background-color);
    color: var(--primary-color);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

/* Plná varianta pilulky — Figma (detail nákladu) ji chce u ČÍSLA DOKUMENTU.
   Je to modifikátor, ne změna .kod-pill: ta samá třída nese v aplikaci pět
   různých významů (číslo dokumentu, kód majetku Z-025 / B-001, inventární
   číslo, kód položky #5, kód nákladu NAK-005) a přebarvení základní třídy
   by zmodralo i 43 kódů majetku napříč Poruchami, Dokumenty a Financemi.
   Autorizace uživatele 2026-08-14. */
.kod-pill-plna {
    /* Figma: Fill i Stroke = primary/primary hover, ne základní primary. */
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--background-color);
}

/* Ostré čtvercové ikonové tlačítko (Figma "kostky icon"): výchozí tmavě modré
   s bílou ikonou, aktivní bílé s modrou ikonou, hover jen na aktivním stavu.
   Projekt takový prvek neměl - .icon-toggle je filtrační pilulka (padding 4/10,
   border-radius 999px) a .detail-tab ma padding 6/16, takže ani jedno nedá
   čtverec 34x30. Ikona uvnitř kreslí jen samotný glyf s fill="currentColor",
   výplň čtverce dělá background-color tlačítka. Bez rámečku - v návrhu se stavy
   odlišují jen výplní.
   Autorizace uživatele 2026-08-05, barvy a rozsah hoveru upřesněny tamtéž. */
.icon-btn-sq {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    padding: 0;
    border: none;
    background-color: var(--primary-color);
    color: var(--background-color);
    cursor: pointer;
}

.icon-btn-sq.is-active {
    background-color: var(--background-color);
    color: var(--primary-color);
}

/* Hover má jen bílý (aktivní) stav - výchozí tmavé tlačítko se na najetí
   nemění. Hodnoty jsou stejné jako u .detail-tab:not(.is-active):hover,
   tedy jako u záložek Den/Týden/Měsíc. Specificita (0,3,0) přebíjí
   .icon-btn-sq.is-active (0,2,0) nezávisle na pořadí. */
.icon-btn-sq.is-active:hover {
    background-color: var(--light-primary);
    color: var(--primary-hover);
}

/* Mini přehled měsíce v levém panelu kalendáře. Systémová .calendar sem nejde:
   má buňky 52x52 px a border-spacing 8px, dohromady 428 px, zatímco panel je
   široký 320 px. Autorizace uživatele 2026-08-05, rozměry a typografie
   upřesněny z Figmy tamtéž.

   Šířka 210 px = 7 sloupců po 30 px, což je podle návrhu zároveň šířka celého
   levého panelu. Třída proto sedí na <aside> panelu, ne na tabulce: jedna
   deklarace tak drží šířku panelu, řádku s názvem měsíce i mřížky a všechno
   je automaticky zarovnané. Svislou mezeru 12 px mezi názvem a mřížkou drží
   systémová .g12px na obalu uvnitř. */
.mini-kalendar {
    width: 210px;
}

/* table-layout: fixed srovná sloupce na stejnou šířku - bez něj si buňky
   s "1 čvc" a "1 srp" braly 62 a 59 px proti 35 px u ostatních.
   border-collapse: collapse je nutný kvůli přesným 30 px: výchozí UA hodnota
   je "separate" s border-spacing 2px, což u 8 mezer sebere 16 px a sloupce
   vyjdou po 28 px místo 30. */
.mini-kalendar table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

/* Figma: Source Sans 3 SemiBold 11/20. <th> má z UA stylu bold (700). */
.mini-kalendar th {
    padding: 4px 0;
    font-size: var(--font-size-mini);
    line-height: var(--line-height-xs);
    font-weight: var(--font-weight-semibold);
}

/* Figma text styl "nadpisy/H3" je 16/18; systémové h3 má 16/24. */
.mini-kalendar h3 {
    line-height: var(--size-18);
}

.mini-kalendar td {
    padding: 2px 0;
}

/* Den je kolečko 32 px - kruh drží shodná šířka a výška, ne padding.
   Původní inline <span> obepínal text a vycházel jako elipsa 13x19 px.
   white-space: nowrap je nutný kvůli popiskům přelomu měsíce ("1 čvc"),
   které se do 32 px nevejdou a lámaly se na dva řádky; text se místo toho
   vycentrovaně přelije přes kolečko a zůstane uvnitř sloupce (43 px). */
.mini-kalendar .den {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
}

/* Stejný hover jako .detail-tab a .icon-btn-sq - světle modrá výplň
   a text v primary-hover. */
.mini-kalendar .den:hover {
    background-color: var(--light-primary);
    color: var(--primary-hover);
}

/* Vybraný den. Za :hover kvůli stejné specificitě (0,2,0) by prohrál,
   proto se scopuje přes .is-active:hover níž. */
.mini-kalendar .den.is-active {
    background-color: var(--primary-color);
    color: var(--background-color);
}

.mini-kalendar .den.is-active:hover {
    background-color: var(--light-primary);
    color: var(--primary-hover);
}

/* Hover nadpisu skupiny filtrů v kalendáři (Figma "navbar menu main"):
   text i šipka --primary-hover, šipka o něco tlustší (stroke 2 místo 1).
   Barvu stačí nastavit jednou na tlačítku - <h4> ji dědí a šipka má
   stroke="currentColor". Scopováno na data-atribut, protože tyhle buttony
   nemají vlastní třídu; .custom-js-toggle na nich sdílí i status-select
   widgety, tam by hover přetekl. Precedent: .header-icon[data-badge]::after.
   Autorizace uživatele 2026-08-05. */
[data-cal-filtr-skupina]:hover {
    color: var(--primary-hover);
}

/* Presentation atribut stroke-width="1" v SVG má nižší prioritu než CSS,
   takže ho tohle pravidlo přebije. Obdoba systémového
   .side-section:hover .chevron-icon path (1.5px), Figma tu chce 2. */
[data-cal-filtr-skupina]:hover .chevron-icon path {
    stroke-width: 2px;
}

/* ── Barevné checkboxy (Figma paleta 15 variant) ───────────────────
   Systémové .chb-* varianty barvily jen :checked (a čtyři z nich :hover) -
   NEZAŠKRTNUTÝ rámeček zůstával --light-grey. Návrh chce barevný rámeček
   i v klidu; barva odpovídá barvě události v mřížce kalendáře.

   Každá varianta proto nese tři stavy: klidový rámeček, :hover rámeček
   a výplň po zaškrtnutí. :hover musí být explicitní - obecné
   `input[type="checkbox"]:hover { border-color: var(--primary-hover) }`
   má stejnou specificitu (0,2,1) a přebarvilo by kategorii na modrou.

   Fajfku kreslí systémové input:checked::after v --background-color, takže
   je bílá u všech variant. Bez třídy zůstává výchozí kombinace
   šedý rámeček / modrá výplň.
   Autorizace uživatele 2026-08-05. */

/* tmavě modrá */
input[type="checkbox"].chb-blue,
input[type="checkbox"].chb-blue:hover { border-color: var(--primary-color); }
input[type="checkbox"].chb-blue:checked {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

/* zelená */
input[type="checkbox"].chb-green,
input[type="checkbox"].chb-green:hover { border-color: var(--green); }
input[type="checkbox"].chb-green:checked {
    border-color: var(--green);
    background-color: var(--green);
}

/* tmavě zelená – nová varianta */
input[type="checkbox"].chb-tm-green,
input[type="checkbox"].chb-tm-green:hover { border-color: var(--tm-green); }
input[type="checkbox"].chb-tm-green:checked {
    border-color: var(--tm-green);
    background-color: var(--tm-green);
}

/* tyrkysová – nová varianta */
input[type="checkbox"].chb-aqua,
input[type="checkbox"].chb-aqua:hover { border-color: var(--aqua); }
input[type="checkbox"].chb-aqua:checked {
    border-color: var(--aqua);
    background-color: var(--aqua);
}

/* světle modrá */
input[type="checkbox"].chb-sky-blue,
input[type="checkbox"].chb-sky-blue:hover { border-color: var(--sky-blue); }
input[type="checkbox"].chb-sky-blue:checked {
    border-color: var(--sky-blue);
    background-color: var(--sky-blue);
}

/* modrofialová sytá */
input[type="checkbox"].chb-indigo,
input[type="checkbox"].chb-indigo:hover { border-color: var(--indigo); }
input[type="checkbox"].chb-indigo:checked {
    border-color: var(--indigo);
    background-color: var(--indigo);
}

/* modrofialová – nová varianta */
input[type="checkbox"].chb-modrofialova,
input[type="checkbox"].chb-modrofialova:hover { border-color: var(--modrofialova); }
input[type="checkbox"].chb-modrofialova:checked {
    border-color: var(--modrofialova);
    background-color: var(--modrofialova);
}

/* levandulová – nová varianta */
input[type="checkbox"].chb-levander,
input[type="checkbox"].chb-levander:hover { border-color: var(--levander); }
input[type="checkbox"].chb-levander:checked {
    border-color: var(--levander);
    background-color: var(--levander);
}

/* fialová – nová varianta */
input[type="checkbox"].chb-purple,
input[type="checkbox"].chb-purple:hover { border-color: var(--purple); }
input[type="checkbox"].chb-purple:checked {
    border-color: var(--purple);
    background-color: var(--purple);
}

/* růžová */
input[type="checkbox"].chb-pink,
input[type="checkbox"].chb-pink:hover { border-color: var(--tm-pink); }
input[type="checkbox"].chb-pink:checked {
    border-color: var(--tm-pink);
    background-color: var(--tm-pink);
}

/* červená – nová varianta */
input[type="checkbox"].chb-red,
input[type="checkbox"].chb-red:hover { border-color: var(--red); }
input[type="checkbox"].chb-red:checked {
    border-color: var(--red);
    background-color: var(--red);
}

/* oranžová – nová varianta */
input[type="checkbox"].chb-orange,
input[type="checkbox"].chb-orange:hover { border-color: var(--tm-orange); }
input[type="checkbox"].chb-orange:checked {
    border-color: var(--tm-orange);
    background-color: var(--tm-orange);
}

/* žlutá – nová varianta */
input[type="checkbox"].chb-yellow,
input[type="checkbox"].chb-yellow:hover { border-color: var(--yellow); }
input[type="checkbox"].chb-yellow:checked {
    border-color: var(--yellow);
    background-color: var(--yellow);
}

/* černá – nová varianta */
input[type="checkbox"].chb-black,
input[type="checkbox"].chb-black:hover { border-color: var(--text-color); }
input[type="checkbox"].chb-black:checked {
    border-color: var(--text-color);
    background-color: var(--text-color);
}

/* ── Záhlaví kalendáře: barva a přišpendlení ────────────────────────────
   Figma "primary/další modra" #4665B2. Tenhle odstín už v paletě je jako
   --primary-open-hover (stejný hex), takže se nezavádí duplicitní proměnná.
   Skupinové pravidlo na ř. 5085 dává .calendar-row--weekdays a
   .calendar-day-head --primary-color; podle cookbooku se skupina nepřepisuje,
   ale přebíjí pozdějším pravidlem se stejnou specificitou (0,1,0).

   position: sticky drží záhlaví se dny vidět i po odrolování na 23:00.
   Váže se na nejbližší rolující předek - tím je díky .h-100 + .hide-scrollbar
   v markupu sám panel pohledu, ne obal vpravo. Bez toho by záhlaví odjelo.
   Autorizace uživatele 2026-08-05. */
.calendar-row--weekdays,
.calendar-day-head {
    background-color: var(--primary-open-hover);
}

.calendar-row--weekdays {
    position: sticky;
    top: 0;
    /* Musí být nad časovanými událostmi - ty mají z-index: calc(10 + --indent)
       (ř. 3114). S původní hodnotou 2 přejížděl blok začínající v 0:00 přes
       záhlaví a překryl číslo dne. */
    z-index: 20;
}

/* ── Kalendář: jedno rolování a šířka bez víkendů ───────────────────────
   Autorizace uživatele 2026-08-05.

   Rolovat má jen panel pohledu (v markupu .h-100 .hide-scrollbar) - jen tak
   drží sticky záhlaví. .calendar-time měla vlastní max-height: 70vh
   a overflow: auto, takže uvnitř kalendáře vznikla druhá, viditelná lišta
   (naměřeno 15px). */
.calendar-time {
    max-height: none;
    overflow: visible;
}

/* Skupina na ř. 2454 dává .calendar-day-events scrollbar-width: thin.
   Pravidla ::-webkit-scrollbar pod ní Chrome ignoruje, jakmile podporuje
   standardní scrollbar-width - tenká lišta proto v měsíčním pohledu zůstávala
   vidět (naměřeno 10px). */
.calendar-day-events {
    scrollbar-width: none;
}

/* Bez víkendů se zbylých pět dnů roztáhne přes celou šířku. Bez toho by grid
   držel sedm sloupců podle .calendar-row a dva zůstaly prázdné. Denní pohled
   (.one-col) je vynechaný, ten má sloupec jediný. */
.bez-vikendu .calendar-row:not(.one-col),
.bez-vikendu .calendar-time-grid:not(.one-col) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* ── Kalendář: sloupec s časy a záhlaví pohledů ─────────────────────────
   Autorizace uživatele 2026-08-05.

   Sloupec s časy má v návrhu stejné pozadí jako mřížka, ne šedé
   --secondary-color. */
.calendar-time-labels {
    background-color: var(--background-color);
}

/* Záhlaví je podle Figmy vysoké 70 px a skládá se přesně takto:
   padding 10 + název dne 20 + mezera 2 + číslo 28 + padding 10.
   Flex sloupec je tu kvůli té dvoupixelové mezeře; zarovnání dál řídí
   text-align, takže týden i měsíc zůstávají na střed.
   border-left kreslil mezi dny svislé čáry - návrh má pruh jednolitý,
   mřížka pod záhlavím si svoje linky ponechává. */
.calendar-cell--weekday {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 8px;
    border-left: none;
}

/* Typografie z Figmy: název dne "nadpisy/H4 - medium" 14/20,
   číslo "nadpisy/H2" 22/28, obojí Source Sans 3. Platí pro denní i týdenní
   záhlaví - měsíční má jen název dne, takže vyjde na 40 px.

   font-family je tu nutná: .dow i .date jsou <span> a ten je v selektoru
   na ř. 168, který přepíná na Inter. Číslo pak mělo viditelně jinou kresbu
   jedničky než návrh (past z _cookbook.md). Buňky měsíčního záhlaví jsou
   holé <div>, ty Source Sans 3 dědí samy. */
.calendar-cell--weekday .dow {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-medium);
}

.calendar-cell--weekday .date {
    font-family: var(--font-family);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-lg);
}

/* Denní pohled má název dne i číslo vlevo, za sloupcem s časy (odsazení drží
   .calendar-week-head v markupu). Týden a měsíc zůstávají na střed. */
.calendar-row.one-col .calendar-cell--weekday {
    text-align: left;
}

/* ── Měsíční pohled: číslo dne ──────────────────────────────────────────
   Figma: číslo je malé nahoře na středu buňky, styl "nadpisy/H4 - medium"
   14/20. Dosud nemělo vlastní pravidlo a dědilo velikost z buňky.
   Autorizace uživatele 2026-08-05. */
.calendar-day-number {
    /* .calendar-grid je taky v selektoru na ř. 168, takže celá mřížka jede
       v Interu; Figma tu chce Source Sans 3. */
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
}

/* Dnešek je modré kolečko s bílým číslem. Kruh vynutí shodná šířka a výška -
   původní <span class="pozadi-blue pozadi-datum br-999px"> obepínal text
   a vycházel jako elipsa (stejná past jako v mini kalendáři).
   font-family je nutná, protože <span> je v selektoru na ř. 168 (Inter). */
.calendar-day-number .je-dnes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background-color: var(--primary-color);
    color: var(--background-color);
    font-family: var(--font-family);
}

/* ── Měsíční pohled: celý měsíc bez rolování ────────────────────────────
   Řádky měly pevných 136 px (.calendar-cell), takže se pět týdnů do panelu
   nevešlo a měsíc se musel rolovat. Nově je mřížka sloupcový flex: záhlaví
   si drží svou výšku a týdenní řádky si rovným dílem rozdělí zbytek, takže
   je vidět celý měsíc bez ohledu na výšku kalendáře.
   Autorizace uživatele 2026-08-05. */
.calendar-grid {
    display: flex;
    flex-direction: column;
}

.calendar-grid > .calendar-row:not(.calendar-row--weekdays) {
    flex: 1 1 0;
    min-height: 0;
}

/* Buňka se roztáhne na výšku řádku; pevných 136 px by rozdělení přebilo. */
.calendar-grid .calendar-cell {
    height: auto;
    min-height: 0;
}

/* ── Časované události v denním a týdenním pohledu ──────────────────────
   .calendar-time-event se pozicuje přes --start (hodina začátku) a
   --duration (délka v hodinách):
       top:    calc(var(--start) * var(--hour-h))
       height: calc(var(--duration) * var(--hour-h))
   Obojí se v původním návrhu nastavovalo inline, jenže inline styly jsou
   v projektu zakázané (zlaté pravidlo). Proto jsou hodnoty vytažené do
   utilit - jedna třída pro začátek, jedna pro délku. Přidat další krok
   znamená dopsat jeden řádek.
   Autorizace uživatele 2026-08-05. */
.zacatek-0 { --start: 0; }
.zacatek-1 { --start: 1; }
.zacatek-2 { --start: 2; }
.zacatek-3 { --start: 3; }
.zacatek-4 { --start: 4; }
.zacatek-5 { --start: 5; }
.zacatek-6 { --start: 6; }
.zacatek-7 { --start: 7; }
.zacatek-8 { --start: 8; }
.zacatek-9 { --start: 9; }
.zacatek-10 { --start: 10; }
.zacatek-11 { --start: 11; }
.zacatek-12 { --start: 12; }
.zacatek-13 { --start: 13; }
.zacatek-14 { --start: 14; }
.zacatek-15 { --start: 15; }
.zacatek-16 { --start: 16; }
.zacatek-17 { --start: 17; }
.zacatek-18 { --start: 18; }
.zacatek-19 { --start: 19; }
.zacatek-20 { --start: 20; }
.zacatek-21 { --start: 21; }
.zacatek-22 { --start: 22; }
.zacatek-23 { --start: 23; }

.trvani-0-5 { --duration: 0.5; }
.trvani-1 { --duration: 1; }
.trvani-1-5 { --duration: 1.5; }
.trvani-2 { --duration: 2; }
.trvani-2-5 { --duration: 2.5; }
.trvani-3 { --duration: 3; }
.trvani-3-5 { --duration: 3.5; }
.trvani-4 { --duration: 4; }
.trvani-5 { --duration: 5; }
.trvani-6 { --duration: 6; }

/* Sdílené pravidlo .calendar-event/.calendar-allday-event/.calendar-time-event
   má white-space: nowrap kvůli jednořádkovým štítkům v měsíci. Blok v denním
   a týdenním rastru je ale vysoký na několik hodin a v návrhu se text láme
   na víc řádků. */
.calendar-time-event {
    white-space: normal;
}

/* ── Okno s událostmi dne (Figma "kalendar info") ───────────────────────
   Otevírá se klikem na buňku v měsíčním pohledu. Kotví se na
   .calendar-cell--day, která je position: relative už ze skupiny na ř. 732.
   Skrytí drží atribut [hidden] ([hidden] má display: none !important, takže
   přebije zdejší display: flex).
   Autorizace uživatele 2026-08-05. */
.kalendar-info {
    position: absolute;
    top: calc(100% - 8px);
    left: 8px;
    z-index: 20;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    background-color: var(--background-color);
    box-shadow: 0 10px 30px rgba(37, 34, 35, .16);
    cursor: default;
    text-align: left;
}

/* U dnů v posledních sloupcích se okno kotví doprava a rozvíjí se doleva -
   s výchozím left: 8px by 320px široké okno přeteklo pravý okraj mřížky
   a .calendar-grid (overflow) by ho oříznul. */
.kalendar-info--vpravo {
    left: auto;
    right: 8px;
}

/* U dnů v posledním řádku se okno rozvíjí nahoru, jinak by ho ořízl
   spodní okraj mřížky. */
.kalendar-info--nahoru {
    top: auto;
    bottom: calc(100% - 8px);
}

/* Datum v záhlaví okna: Figma text/text 14/20. */
.kalendar-info-datum {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
}

.kalendar-info-seznam {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.kalendar-info-radek {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Bez display: block sedí inline <svg> na účaří a pod ním zůstane místo na
   dolní dotah - ikona pak měřila 33px místo 28 a hnala řádek na 45px.
   (Past z _cookbook.md.) */
.kalendar-info-info svg {
    display: block;
}

/* Hover celého řádku: světle modré pozadí, název i ikona ztmavnou. */
.kalendar-info-radek:hover {
    background-color: var(--light-primary);
}

/* Barvu tečky dodává systémová .pozadi-<barva>, tady je jen tvar. */
.kalendar-info-tecka {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
}

/* Název události: Figma nadpisy/H3 16/18. font-family explicitně, protože
   <a> uvnitř .calendar-grid dědí Inter ze selektoru na ř. 168. */
.kalendar-info-nazev {
    flex: 1 1 auto;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--size-18);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
}

.kalendar-info-radek:hover .kalendar-info-nazev {
    color: var(--primary-hover);
}

/* Ikona "i": v klidu --primary-m (#A3ACC2 z návrhu), na hover řádku ztmavne. */
.kalendar-info-info {
    flex: 0 0 auto;
    color: var(--primary-m);
}

.kalendar-info-radek:hover .kalendar-info-info {
    color: var(--primary-color);
}

/* ── Dashboard: výška stránky, mezery a síla linek ──────────────────────
   Autorizace uživatele 2026-08-05.

   Scopováno přes třídu na #content, protože všechny tři hodnoty jsou jinde
   v systému záměrně jiné:
   - #content má padding-bottom 320px (rezerva pod rozbalené nabídky), tady
     má být stránka na výšku okna a dole 40px;
   - #content má gap 40px, návrh dashboardu chce mezi uvítacím panelem
     a sloupci 24px;
   - .tl-item má rámeček 2px a používá se i v ostatních modulech.
   Selektor #content.db-stranka má specificitu (1,1,0), takže samotné
   #content (1,0,0) přebije. */
#content.db-stranka {
    gap: 24px;
    padding-bottom: 40px;
}

#content.db-stranka .tl-item {
    border-width: 1px;
}

/* Sloupce vyplní zbylou výšku (ve Figmě "Fill"), takže se stránka vejde do
   okna a dole zůstane 40px z paddingu výš. Bez align-items: stretch by je
   skupinové pravidlo na ř. 171 (align-items: center) nechalo na výšce obsahu. */
#content.db-stranka .three-containers {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
}

/* Seznam úkolů roste a tlačí ukazatel splnění na spodek sloupce; když se
   položky nevejdou, roluje sám (overflow-y má ze skupiny na ř. 2454). */
#content.db-stranka .timeline {
    flex: 1 1 auto;
    min-height: 0;
    /* Skupina na ř. 2454 dává .timeline scrollbar-width: thin. Pravidla
       ::-webkit-scrollbar pod ní Chrome ignoruje, jakmile podporuje
       standardní scrollbar-width - lišta proto byla vidět. */
    scrollbar-width: none;
}

/* ── Kalendářová stránka na výšku okna ──────────────────────────────────
   Autorizace uživatele 2026-08-05.

   Systémové #app-container má jen min-height: 100vh, takže se stránka
   natahuje podle obsahu. Tady ji svážeme přesně na výšku okna - jinak
   by se kalendář neměl o co opřít a denní mřížka (24 h x 56 px = 1344 px)
   by roztáhla celou stránku. Rolují pak jen vnitřní panely, ne dokument.

   Scopováno třídou, protože ostatní stránky se natahovat mají. */
#app-container.kal-stranka {
    height: 100vh;
}

/* Systémové #content má padding-bottom 320px (rezerva pod rozbalené
   nabídky); tady zbývá dole 40px podle návrhu.

   gap: systémové #content má 40px; kalendář má mezi ovládacím pruhem
   a kartou 24px, aby zbylo co nejvíc výšky na mřížku. Scopováno přes
   .kal-stranka, takže se to na jiné stránky nepropíše.
   Autorizace uživatele 2026-08-06. */
#content.kal-stranka {
    padding-bottom: 40px;
    gap: 24px;
}

/* Vazba na výšku okna se musí propsat celým řetězcem. Flex položka má
   výchozí min-height: auto, takže by se nesměla zmenšit pod výšku obsahu
   a denní mřížka by stránku roztáhla i přes height: 100vh výš. */
#app-container.kal-stranka #main-content,
#content.kal-stranka {
    min-height: 0;
}

/* Kalendář dostane všechnu zbylou výšku. */
#content.kal-stranka > .table-container {
    flex: 1 1 auto;
    min-height: 0;
}

/* Dnešek v záhlaví týdne/dne je kolečko, ne pilulka přes celý sloupec.
   .calendar-cell--weekday je od změny č. 26 sloupcový flex, takže se
   <span class="date"> jako položka se stretch roztahoval na celou šířku
   sloupce a zaoblení 999px z ř. 5145 jen zakulatilo konce dlouhého pruhu.
   Kruh vynutí shodná šířka a výška - stejný postup jako .je-dnes (ř. 7165).
   align-self drží kolečko na střed i bez pomocné třídy v markupu.
   Výplň rgba(255,255,255,.18) a border-radius zůstávají z ř. 2976 a 5136.

   Kolečko je 36px, ale řádek si musí udržet výšku: záporný svislý margin
   -4px pohltí přesah, takže layout spotřebuje 36 - 8 = 28px = --line-height-lg
   a záhlaví zůstává vysoké 70px podle Figmy (10 + 20 + 2 + 28 + 10).
   Kruh přeteče do horního a dolního paddingu, kde je 10px místa - na název
   dne nedosáhne (účaří "PÁ" končí ~4px nad okrajem kruhu).
   Autorizace uživatele 2026-08-06. */
.calendar-cell--weekday.is-today .date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 36px;
    height: 36px;
    margin: -4px 0;
    padding: 0;
}

/* Zkrácení dlouhých názvů událostí v buňce měsíčního pohledu.
   Trojice overflow + white-space + text-overflow musí být pohromadě:
   .calendar-event má na ř. 3024 text-overflow bez overflow, takže tři tečky
   nikdy nevykreslil a název přetekl z buňky ven.

   Scopováno na .calendar-day-events, protože sdílené pravidlo na ř. 3019
   platí i pro .calendar-time-event a tomu ř. 7248 vrací white-space: normal
   (víceřádkový blok v denním rastru) - overflow: hidden by mu text ořízl.

   Řádek s puntíkem je flex kontejner, takže elipsu musí dostat vnitřní
   <span> s min-width: 0 (jinak se flex položka nesmrskne pod šířku textu).
   Stejný vzor jako #doch-table .col-odmeny (ř. 4889).
   Autorizace uživatele 2026-08-06. */
.calendar-day-events .calendar-event,
.calendar-day-events .kalendar-info-radek {
    overflow: hidden;
}

.calendar-day-events .kalendar-info-radek > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Názvy událostí v buňce měsíčního pohledu jsou o stupeň menší než text
   v okně dne - do 135px široké buňky se jich tak vejde víc a mřížka
   zklidní. 13/18 je na typové škále projektu (font-size-xs, size-18 jako
   u .kalendar-info-nazev).

   font-family musí být explicitně: .calendar-grid je v selektoru na ř. 168,
   který celou mřížku přepíná na Inter, a ten kreslí o ~12 % šířeji než
   Source Sans 3. Stejně to řeší .calendar-day-number (ř. 7188), takže
   názvy událostí teď sedí na stejné kresbě jako čísla dnů.
   Autorizace uživatele 2026-08-06. */
.calendar-day-events .calendar-event,
.calendar-day-events .kalendar-info-radek,
.calendar-day-events > li {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    line-height: var(--size-18);
}

/* Celodenní pruh se nesmí rolovat do šířky a dlouhý název se má oříznout.
   Skupina na ř. 2454 dává .calendar-allday-col overflow-y: auto; podle
   specifikace se pak protější osa nesmí chovat jako visible a spočítá se
   taky na auto - proto pruhu naskočila vodorovná lišta.

   .calendar-allday-event má nowrap i text-overflow ze skupiny na ř. 3019,
   ale bez overflow: hidden tři tečky nikdy nevykreslil (stejná past jako
   u .calendar-event, viz změna č. 28).

   V denním pohledu zabere celodenní událost celou šířku: ř. 3027 jí dává
   width: fit-content, protože se do řádku vejde víc událostí vedle sebe -
   návrh je ale chce pod sebou přes celý pruh.
   Autorizace uživatele 2026-08-06. */
.calendar-allday-col {
    overflow-x: hidden;
}

.calendar-allday-event {
    overflow: hidden;
}

.calendar-day .calendar-allday-event {
    width: 100%;
    margin-right: 0;
}

/* ── Buňka měsíce: jen jeden hover, ne dva ──────────────────────────────
   Řádek události v buňce nic vlastního neotevírá - kliknutí kamkoli do dne
   ukáže okno s celým souhrnem. Podsvícení jednotlivého řádku tak slibovalo
   akci, která neexistuje, a překrývalo se s hoverem celé buňky (ř. 2999:
   rámeček --primary-hover + zmodralé číslo dne).

   Scopováno na .calendar-day-events, protože v okně dne (.kalendar-info)
   hover zůstává - tam je řádek odkaz .kalendar-info-nazev s tlačítkem "i",
   takže zpětná vazba dává smysl. Specificita (0,3,0) proti (0,2,0)
   u pravidla na ř. 7319, plus pozdější pořadí.
   Autorizace uživatele 2026-08-06. */
.calendar-day-events .kalendar-info-radek:hover {
    background-color: transparent;
}

/* ── Kalendář pod 832px: panel nad mřížkou, roluje stránka ──────────────
   Do 832px se levý panel (210px) a pohled ještě vejdou vedle sebe, pod ním
   se mřížka mačká. 832px je projektová hranice - na téže šířce stackuje
   systémová .resp-div-100 (ř. 5304).

   flex-direction potřebuje !important: .flex-row (ř. 4990) má row !important,
   protože .column-container je ve skupině na ř. 2454 sloupcový a řádek se
   jinak vynutit nedá.

   Zámek výšky 100vh (ř. 7406) se pod tímto zlomem uvolňuje: nad sebou by
   dva samostatně rolující panely v malé výšce okna byly neovladatelné,
   rolovat má celá stránka. S tím musí jít i > * uvnitř řádku - .h-100
   a .flex110 (flex: 1 1 0) jsou psané pro řádek, ve sloupci by z basis 0
   dělaly výšku 0.
   Autorizace uživatele 2026-08-06. */
@media (max-width: 832px) {
    #app-container.kal-stranka {
        height: auto;
    }

    #content.kal-stranka > .table-container {
        flex: 0 0 auto;
    }

    #content.kal-stranka .column-container.flex-row {
        flex-direction: column !important;
    }

    #content.kal-stranka .column-container.flex-row > * {
        flex: 0 0 auto;
        height: auto;
    }

    /* Panel přes celou šířku; 210px = 7 sloupců mini kalendáře (ř. 6832)
       dává smysl jen vedle mřížky. */
    #content.kal-stranka .mini-kalendar {
        width: 100%;
    }

    /* Řádky měsíce si výšku dělily rovným dílem z pevné výšky panelu
       (ř. 7188: flex: 1 1 0 + min-height: 0). Bez zámku 100vh není co dělit
       a basis 0 srazila celou mřížku na nulovou výšku - naměřeno headless
       renderem. Řádky proto rostou podle obsahu a plochu jim dává min-height
       buňky (dvě události + "X dalších"). */
    #content.kal-stranka .calendar-grid > .calendar-row:not(.calendar-row--weekdays) {
        flex: 0 0 auto;
    }

    #content.kal-stranka .calendar-grid .calendar-cell {
        min-height: 96px;
    }
}

/* ======================================================
   Popisek ikony horního panelu (hover okénko)
   Autorizace uživatele 2026-08-11. Viz ZMENY-CSS.md záznam č. 32.
====================================================== */

/* Pseudoelement je ::before schválně - ::after už zabírá číselný badge
   (.header-icon[data-badge]::after, ř. 993). Takto mohou obě věci koexistovat.
   Okénko se ukáže jen tam, kde je atribut data-tooltip, takže se pravidlo
   nikde jinde v projektu neprojeví. */
.header-icon[data-tooltip]:hover::before,
.header-icon[data-tooltip]:focus-visible::before {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    /* Vzhled je schválně shodný s .breadcrumb-item:hover (ř. 692): stejná
       výplň, stejná barva textu, stejný padding, ostré rohy a žádný stín. */
    padding: 4px 8px;
    background-color: var(--light-primary);
    color: var(--primary-hover);
    /* Figma „header ikony": Source Sans 3 SemiBold 12/16, fill primary hover.
       Line-height je 16px, ne --line-height-xxs (to je 17px) - naměřeno:
       text „Upozornění" tak vychází 60,03x16,00 proti 61x16 z Figmy. */
    font-family: var(--font-family);
    font-size: var(--font-size-xxs);
    line-height: var(--size-16);
    font-weight: var(--font-weight-semibold);
    /* Bez nowrap by se dvouslovný popisek zalomil - okénko je jen tak široké,
       jak dovolí .header-icon (25px). */
    white-space: nowrap;
    /* Okénko nesmí chytat myš, jinak by hover blikal na jeho hraně. */
    pointer-events: none;
}

/* ======================================================
   Těsné tlačítko spodní lišty: .btn-tesny
   Autorizace uživatele 2026-08-11. Viz ZMENY-CSS.md záznam č. 33.
====================================================== */

/* „Upravit" (#ulozit-lista a.akce-btn, ř. 6017) má z Figmy pevných 92px
   a nulový vodorovný padding; při justify-content: center z .btn zbyde po
   stranách ~6,5px optického místa. Tahle třída dělá totéž pro tlačítko,
   jehož šířku zafixovat nejde, protože popisek je delší - místo pevné šířky
   dá 8px odsazení a šířku nechá na obsahu.

   Musí být scopované přes #ulozit-lista: 24px nedává .btn (0,1,0), ale
   #ulozit-lista .secondary-btn (ř. 6567) se specificitou (1,1,0). Zápis
   #ulozit-lista .btn.btn-tesny má (1,2,0), takže vyhraje nezávisle na pořadí
   v souboru - ne kvůli tomu, že je níž.

   Padding, ne width: #ulozit-lista .btn (ř. 6001) nastavuje svislé odsazení
   zvlášť, takže zkratka `padding` by přebila i padding-top/bottom 7px. */
#ulozit-lista .btn.btn-tesny {
    padding-left: 8px;
    padding-right: 8px;
}

/* ======================================================
   Světlejší varianta sekční záložky: .detail-tab-svetly
   Autorizace uživatele 2026-08-11. Viz ZMENY-CSS.md záznam č. 34.
====================================================== */

/* Figma (detail poruchy) chce tmavou navy jen u první záložky; „Úkoly"
   a „Fotografie" mají v klidu světlejší modrou. Řeší se třídou na KONKRÉTNÍM
   tabu, ne pořadím - sdílené pravidlo o řádek výš
   (#detail-sekce-taby ... :nth-child(n+5)) je psané pro osmi- a sedmitabové
   skupiny Majetku a Přehledu objektů; tady má skupina tři taby, takže by se
   nikdy netrefilo, a přepisovat ho globálně by rozhodilo ostatní moduly.

   `:not(.is-active)` nechává aktivní tab bílý (.detail-tab.is-active),
   `:not(:hover)` nechává systémový hover (.detail-tab:not(.is-active):hover) -
   obě pravidla mají (0,3,0) stejně jako tohle, ale vzájemně se vylučují,
   takže o vítězi nerozhoduje pořadí v souboru.

   Pozn.: uvnitř #detail-sekce-taby by od páté záložky dál pravidlo s `id`
   (1,4,0) tuhle třídu přebilo. Pro tříbodovou skupinu v poruchách to nenastane. */
.detail-tab-svetly:not(.is-active):not(:hover) {
    background-color: var(--primary-open-hover);
}

/* ══ Detaily objektu: boční odsazení na úzkém okně (autorizace uživatele 2026-07-26) ══ */
/* Jakmile se okno zúží pod 1400px, obsah se přiblíží k okrajům a bílé karty s nimi
   opticky splynou — pod 564px navíc systémové pravidlo (ř. 5424) dává
   #main-content { margin: 0 }, takže dosednou úplně na nulu. 16px z každé strany
   je drží odsazené a šedé pozadí #content zůstane vidět.
   Scopováno přes .detail-panel-lisujici — ta je POUZE na detailu budovy, podlaží
   a místnosti (6 souborů: 3 statické + 3 Django). Detail stavební dokumentace ji
   nemá, takže se ho tohle pravidlo nedotkne.

   AKTUALIZACE (autorizace uživatele 2026-08-15, § 4.23): druhý selektor rozšiřuje
   odsazení na VŠECHNY detailové stránky přes #detail-layout — ten je na 7 statických
   a 5 Django detailech (nadmnožina .detail-panel-lisujici). Bez něj dosedaly detaily
   Revizí a kontrol i Stavební dokumentace pod 1400px na okraj s mezerou 0px, zatímco
   Přehled objektů a Majetek měly 16px. Původní selektor zůstává kvůli případnému
   .detail-panel-lisujici mimo #detail-layout. */
@media (max-width: 1400px) {
    #main-content:has(.detail-panel-lisujici) #content,
    #main-content:has(#detail-layout) #content {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ══ Responzivita — pruh souhrnných karet (autorizace uživatele 2026-08-05) ══ */
/* .grid-auto-column drží KPI karty v jedné řadě vždy → místo zalomení se láme
   popisek (94 px výška na 1440 → 142 na 768). 188 px = Figma šířka .souhrn-box.
   Vzor minmax(min(X, 100%), 1fr) z .cards-grid (ř. 4120). Podrobně [[CSS-autorizace]] §4.18. */
.grid-auto-column.g8px:has(> .souhrn-box) {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(min(188px, 100%), 1fr));
}

/* ══ Responzivita — zalomení filtru (autorizace uživatele 2026-08-05) ══ */
/* .filter-panel je repeat(5, 1fr) → pole se jen zužovala (73 px na 500). Žebřík
   832 → 2 sloupce, 564 → 1 převzat z .filtr-form (ř. 2555).
   POZOR: musí zůstat ZA definicí .filter-panel (ř. 5512), jinak media query
   prohraje na pořadí při shodné specificitě. Viz cascade-order-stejna-specificita. */
@media (max-width: 832px) {
    .filter-panel { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 564px) {
    .filter-panel { grid-template-columns: repeat(1, 1fr); }
}

/* ══ Jednotná šířka pilulky s inv. číslem (autorizace uživatele 2026-08-05) ══ */
/* .alert má width: fit-content (ř. 299) → každé ID jinou šířku (53,7–64,1 px),
   pod 900 px se lámal text. 68 px = nejširší naměřená + rezerva, na 4px rastru.
   Platí ve všech tabulkách (Inventura i Majetek). */
td .alert.alert-sm {
    width: 68px;
}

/* ══ Zalomení dlouhého textu v poznámkách a aktivitě (autorizace uživatele 2026-08-12) ══ */
/* Nepřerušené slovo (vložený odkaz, „aaaa…") přetékalo z bubliny ven. `break-word`
   nestačí — nemění min-content šířku, takže .detail-bublina p jako shrink-to-fit flex
   položka zůstal 943 px široký v bublině 374 px. `anywhere` min-content mění.
   h4 (jméno autora) má tutéž vadu, .aktivita-zmena je blokový <p> a text z něj vytékal. */
.detail-bublina p,
.detail-bublina h4,
.aktivita-zmena {
    overflow-wrap: anywhere;
}

/* ══ Dlouhý název souboru v odznaku přílohy (autorizace uživatele 2026-08-12) ══ */
/* .file-chip je inline-flex bez stropu, takže dlouhý název roztáhl celý sloupec
   karty (naměřeno 509 px místo 246). Název se mezerami sice zalomí, ale sponka
   se přitom smrskla z 16 na 9 px — proto flex-shrink na ikoně.
   overflow-wrap sedí na .file-chip, ne na vnitřním <span> — 36 ze 43 chipů v projektu
   má text holý (`<button class="file-chip">[svg] URL</button>`), span má jen 7.
   Krátké názvy zůstávají beze změny, pravidla se zapnou až když se název nevejde. */
.file-chip { max-width: 100%; overflow-wrap: anywhere; }
.file-chip svg { flex-shrink: 0; }

/* ══ Hover klikatelného řádku tabulky (autorizace uživatele 2026-08-12) ══ */
/* Řádek s data-href je klikatelný (JS navigace) — na hover dostane --light-primary.
   Dvojí selektor kvůli specificitě: zebra `.asset-table.zebra-even tbody tr:nth-child(odd)`
   má (0,3,2), takže druhá varianta ji přebíjí (0,4,2) nezávisle na pořadí v souboru
   (viz past cascade-order-stejna-specificita). První pokrývá tabulky bez zebry. */
.asset-table tbody tr[data-href]:hover,
.asset-table.zebra-even tbody tr[data-href]:hover {
    background-color: var(--light-primary);
}

/* ══ Šipka rozbalení řádku tabulky (autorizace uživatele 2026-08-15) ══ */
/* Figma „revize rozbalovaci …": obrysový chevron ~16×10 se stopou 2 px, na hover
   o 1 px silnější. `fill: none` je povinný — .header-icon path { fill } (ř. 774)
   je v kaskádě pod .chevron-icon path { fill: none } (ř. 594) a udělalo by
   z obrysu plný klín (past row-container-path-fill). */
.row-toggle path {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 2px;
    transition: stroke-width 0.15s ease;
}

/* Rozbaluje celý řádek, proto sílí šipka i při najetí kamkoli na řádek.
   `fill: none` se musí zopakovat i tady — `.asset-table .header-icon:hover path`
   (ř. 785, 0-3-1) přebíjelo `.row-toggle path` (0-1-1) a na hover z obrysu dělalo
   plný klín. Druhý selektor má proto shodnou specificitu a vyhrává pořadím.
   Oprava po kompletní kontrole, autorizace uživatele 2026-08-16. */
.row-toggle:hover path,
.asset-table .row-toggle:hover path,
.asset-table tbody tr:hover .row-toggle path {
    fill: none;
    stroke: var(--primary-hover);
    stroke-width: 3px;
}

/* ══ Velikost odkazu .detail-odkaz v tabulce (autorizace uživatele 2026-08-15) ══ */
/* Jeden odkazový styl napříč aplikací, liší se jen velikostí: v detailu
   a formulářích 16/24, v tabulce velikost tabulky 14/20. */
.asset-table .detail-odkaz {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
}


/* ── Ořezání dlouhého textu (truncate) ─────────────────────────────────────
   Univerzální utilita: text zůstane na jednom řádku a přebytek se nahradí
   třemi tečkami. Funguje všude, kde má prvek omezenou šířku — buňka tabulky,
   flex položka, chip přílohy, položka seznamu.

   POUŽITÍ
   1) Ořez podle dostupného místa (šířku určí rodič — sloupec, bublina, karta):
        <span class="truncate">dlouhy nazev souboru.pdf</span>
   2) Pevný strop cca N znaků — přidej modifikátor:
        <td><span class="truncate truncate-15">Oprava klimatizace v kuchyni</span></td>
   3) Uvnitř .file-chip stačí .truncate na <span>, strop řeší sám chip:
        <a class="file-chip" href="#" title="cely nazev.pdf">
          <svg ...></svg><span class="truncate">cely nazev.pdf</span>
        </a>

   POZOR
   - .truncate patří na prvek s TEXTEM, ne na obal — jinak se ořeže obal
     a text z něj přeteče.
   - Celý text vždy zopakuj v atributu `title`, jinak je po ořezu nedostupný
     (týká se i čtečky obrazovky).
   - `min-width: 0` v utilitě je nutné: flex položka se defaultně nezmenší pod
     šířku obsahu, takže bez něj by se ellipsis nikdy neprojevila.
   - `ch` je šířka číslice, ne průměrného znaku. U proporcionálního písma je
     truncate-15 odhad — úzkých písmen (i, l, t) se vejde víc, širokých (m, w)
     míň. Pro přesný počet znaků by musel ořezávat backend.
   ────────────────────────────────────────────────────────────────────────── */
.truncate {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Ořez uvnitř FLEX ŘÁDKU nefunguje sám od sebe: flex položka má min-width: auto,
   takže se nezmenší pod šířku svého obsahu — a `white-space: nowrap` z .truncate
   udělá z obsahu jeden nekonečně dlouhý řádek, který roztáhne obal přes rodiče.
   Tuhle utilitu proto dej na KAŽDÝ obal mezi .truncate a prvkem s pevnou šířkou,
   pokud je ten obal položkou flex řádku (typicky sloupec vedle avataru/ikony):
        <div class="row-container">
          <span class="avatar">...</span>
          <div class="column min-w-0"> ... <span class="truncate">...</span> ... </div>
        </div>
   V buňce tabulky ani ve flex SLOUPCI potřeba není — tam .truncate funguje samo.
   dodatek k .truncate — bez tohoto řádku ořez
   v poznámkách nezabral a chip pořád přetékal z bubliny. */
.min-w-0 { min-width: 0; }

/* Volitelný strop šířky ~N znaků. Bez modifikátoru se ořez řídí rodičem. */
.truncate-10 { max-width: 10ch; }
.truncate-15 { max-width: 15ch; }
.truncate-20 { max-width: 20ch; }
.truncate-30 { max-width: 30ch; }
.truncate-40 { max-width: 40ch; }


/* Svislé rolování obsahu v bloku s omezenou výškou. Utilita dělá jen samotný
   scroll — výšku si musí prvek zařídit sám (.detail-poznamky má flex: 1 1 auto
   a min-height: 0). overflow-x: hidden je nutný: overflow-x se dopočítá na auto,
   jakmile druhá osa není visible, a naskočil by vodorovný posuvník. */
.scroll-y {
    overflow-y: auto;
    overflow-x: hidden;
}


/* ── Našeptávač: hybrid inputu a selectu (Figma „Našeptávač") ──────────────
   Uživatel do pole píše a seznam se filtruje; prázdné pole = všechny položky.
   Postavené na tom, co projekt už má — nové je jen umístění šipky a
   zvýraznění položky vybrané klávesnicí:
     .relative   kotva pro absolutně pozicovaný panel
     .select     panel (width 100%, top 36px, .is-open → scroll + stín)
     .row-8      položka včetně hoveru
     form input  rámeček, radius, padding, min-height 34px

   MARKUP (hodnotu pro odeslání nese hidden input, ne viditelné pole):
     <div class="relative js-naseptavac">
       <input class="naseptavac-input" type="text" id="X" role="combobox"
              aria-expanded="false" aria-controls="X-menu"
              aria-autocomplete="list" autocomplete="off" placeholder="…">
       <svg class="naseptavac-sipka" …>…</svg>
       <input type="hidden" name="X" value="">
       <ul class="select naseptavac-menu" id="X-menu" role="listbox">
         <li class="row-8" role="option" data-value="…">…</li>
         <li class="row-8 naseptavac-prazdno" hidden>Nic nenalezeno</li>
       </ul>
     </div>

   POZOR: prázdný stav NEJDE řešit přes `.select.is-open:empty::before`
   (data-empty-text) — filtrované položky se jen skrývají, takže `<ul>` nikdy
   prázdný není. Proto vlastní řádek `.naseptavac-prazdno`.

   Autorizace uživatele 2026-08-13. */

/* `!important` je tu nutné, ne pohodlné. Globální pravidlo pro inputy
   (`form :where(input:not(…)…), input:not(…):not(.filter-group input), …`)
   má kvůli řetězu `:not()` specificitu ~(0,6,2), takže tuhle třídu (0,1,0)
   i libovolnou utilitu typu .pr40px přebije a padding zůstane 12px.
   Text pak leze pod šipku, která sedí 12px od kraje.
   Autorizace uživatele 2026-08-14. */
.naseptavac-input { padding-right: 34px !important; }

.naseptavac-sipka {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Šipka je obrysová — skupinové `.row-container path { fill: … }` by z ní
   udělalo kaňku, stejně jako u .file-chip path. */
.naseptavac-sipka path { fill: none; stroke: var(--text-color); }

/* Položka vybraná šipkami musí vypadat stejně jako pod myší
   (.select .row-8:hover existuje, ale na klávesnici se neuplatní). */
.select .row-8.is-active { background-color: var(--light-primary); }


/* Bílý blok ohraničený jemným STÍNEM */
.blok-stin {
    background-color: var(--background-color);
    box-shadow: 0 0 12px rgba(0, 6, 27, 0.10);
}


/* Select bez psaní: stejný widget jako našeptávač, jen s `readonly` na vstupu.
   Bez tohohle by pole mělo textový kurzor a blikající caret, takže by se
   netvářilo jako select. `readonly` (ne `disabled`) proto, že disabled by pole
   vyřadil z odesílání formuláře i z pořadí tabulátoru.
   Autorizace uživatele 2026-08-13. */
.naseptavac-input[readonly] {
    cursor: pointer;
    caret-color: transparent;
}


/* Dnešek v DENNÍM pohledu: kolečko patří pod název dne, ne doprostřed sloupce.
   Denní záhlaví má jediný sloupec přes celou šířku a `text-align: left`
   (ř. 7198), takže „Pá" sedí vlevo — ale `align-self: center` z pravidla
   .calendar-cell--weekday.is-today .date (ř. 7505) odsunulo kolečko doprostřed
   toho širokého pruhu. Týdenní a měsíční pohled mají sloupce úzké, tam střed
   sedí, proto se přepíná jen uvnitř .one-col.
   Autorizace uživatele 2026-08-17. */
.calendar-row.one-col .calendar-cell--weekday.is-today .date {
    align-self: flex-start;
    /* Kolečko je 36px, zkratka dne (PÁ, ÚT, …) měří ~15px. Zarovnané na levý
       okraj by tedy číslo vyšlo o půlku rozdílu doprava; -10px (= 18 − 15/2)
       ho vrátí přesně pod název dne. Název dne se nehýbe. */
    margin-left: -10px;
}

/* ══ SEKCE ÚKOLY ══ autorizace 2026-08-26, detail v CSS-autorizace § 4.29. */

/* Paleta štítků má 17 odstínů, projekt měl 15. */
:root {
    --brown: #765D4F;
    --magenta: #7E0073;
}

.brown::before, .pozadi-brown { background-color: var(--brown); }
.magenta::before, .pozadi-magenta { background-color: var(--magenta); }

/* Záložky sekce; .filter-chip má barvy obráceně. */
.ukoly-zalozky {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
}

.zalozka {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    border: none;
    border-radius: 0;
    background-color: var(--primary-color);
    color: var(--background-color);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.zalozka:hover { background-color: var(--primary-hover); }

/* Aktivní záložka splývá s panelem pod sebou. */
.zalozka.is-active,
.zalozka.is-active:hover {
    padding: 8px 14px;
    background-color: var(--background-color);
    color: var(--primary-color);
}

/* Souhrnné karty: mezera 8, výška 106, číslo 24/32. */
.ukoly-souhrn { gap: 8px; }

.ukoly-souhrn .souhrn-box {
    padding: 12px 16px;
    gap: 4px;
}

.ukoly-souhrn .souhrn-castka {
    font-size: var(--size-24);
    line-height: var(--size-32);
}

/* Čísla u termínů drží svou barvu, .souhrn-castka je jinak přebije. */
.ukoly-souhrn .souhrn-castka.text-red { color: var(--red); }
.ukoly-souhrn .souhrn-castka.text-orange { color: var(--tm-orange); }

/* Jediné číslo dosedá na spodní hranu karty. */
.ukoly-souhrn .souhrn-rozlozene { justify-content: space-between; }

/* Štítek 25px, zaoblení 2; barvu dodá .pozadi-*. */
.stitek {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border: none;
    border-radius: 2px;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xxs);
    font-weight: var(--font-weight-medium);
    color: var(--background-color);
    white-space: nowrap;
}

/* Řádek v panelu Štítků: 36px, fajfka vpravo. */
.stitek-radek {
    width: 100%;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    cursor: pointer;
}

/* Hover je světlejší odstín; komponenta barvu nezná, proto filtr. */
.stitek-radek:hover { filter: brightness(1.15); }

/* Fajfka svítí jen u vybraného štítku. */
.stitek-radek[aria-pressed="false"] .stitek-fajfka { visibility: hidden; }

/* Chip Modul/Sekce: stejná oblá pilulka jako .stav-pill, jen bez tečky
   (přání uživatele 2026-08-26; do té doby mělo zaoblení 6). */
.chip-modul {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--darker-table-line);
    border-radius: 999px;
    background-color: var(--background-color);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xxs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

/* Paleta 5 × 48px; .tag-color-option je kolečko 24px. */
.barva-paleta {
    display: grid;
    grid-template-columns: repeat(5, 48px);
    gap: 8px;
}

.barva-volba {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

.barva-volba.is-active { box-shadow: 0 0 0 3px var(--light-grey); }

.barva-volba:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Šířky panelů; dvě třídy přebijí .dropdown-sm i .dropdown-panel. */
.dropdown-menu.panel-224 { width: 224px; min-width: 224px; }
.dropdown-menu.panel-304 { width: 304px; min-width: 304px; }
.dropdown-menu.panel-320 { width: 320px; min-width: 320px; }
.dropdown-menu.panel-416 { width: 416px; min-width: 416px; }

/* Řádky drží systémových 52px jako v Dokumentech; ve Figmě jsou 42, ale kód
   pod názvem pak lícuje se spodkem řádku. Volba uživatele 2026-08-26. */

/* Záhlaví: 20px shora, 12px nad prvním řádkem. */
.asset-table.ukoly-tabulka thead th {
    padding-top: 20px;
    padding-bottom: 12px;
}

/* Pilulky v řádku měří 26px, systémové 28. */
.asset-table.ukoly-tabulka .stav-pill,
.asset-table.ukoly-tabulka .datum-pill { padding: 3px 10px; }

/* Pevný layout: při `auto` je šířka jen doporučení a obsah ji přetlačí. */
.asset-table.ukoly-tabulka {
    table-layout: fixed;
    width: 100%;
}

/* Sloupec se zaškrtávátkem má 35px. */
.asset-table.ukoly-tabulka th:first-child,
.asset-table.ukoly-tabulka td:first-child { padding-right: 2px; }

.asset-table.ukoly-tabulka thead th:first-child { width: 35px; }
.asset-table.ukoly-tabulka thead th[data-sort="nazev"] { width: 111px; }
.asset-table.ukoly-tabulka thead th[data-sort="stitky"] { width: 150px; }
.asset-table.ukoly-tabulka thead th[data-sort="resitel"] { width: 91px; }
.asset-table.ukoly-tabulka thead th[data-sort="zadavatel"] { width: 127px; }
.asset-table.ukoly-tabulka thead th[data-sort="modul"] { width: 127px; }
.asset-table.ukoly-tabulka thead th[data-sort="sekce"] { width: 127px; }
/* Umístění 200 místo 181, jinak se text láme na tři řádky; 20px bere Zadavatel. */
.asset-table.ukoly-tabulka thead th[data-sort="umisteni"] { width: 200px; }
.asset-table.ukoly-tabulka.ukoly-dokoncene thead th[data-sort="zadavatel"] { width: 107px; }
.asset-table.ukoly-tabulka thead th[data-sort="polozka"] { width: 150px; }
.asset-table.ukoly-tabulka thead th[data-sort="projekt"] { width: 110px; }
.asset-table.ukoly-tabulka thead th[data-sort="stav"] { width: 130px; }
.asset-table.ukoly-tabulka thead th[data-sort="priorita"] { width: 118px; }
.asset-table.ukoly-tabulka thead th[data-sort="termin"] { width: 195px; }
.asset-table.ukoly-tabulka thead th:last-child { width: 93px; }

/* U dokončených je Termín užší. */
.asset-table.ukoly-tabulka.ukoly-dokoncene thead th[data-sort="termin"] { width: 145px; }

/* Pozadí seznamů; z palety se odvodit nedají. */
:root {
    --sl-grey: #D1D5E0;
    --sl-black: #BFBFBF;
    --sl-brown: #DECCC2;
    --sl-yellow: #FFF7CD;
    --sl-orange: #FFE6CC;
    --sl-modrofialova: #E2D7FA;
    --sl-purple: #EDE2FF;
    --sl-magenta: #E0B4DD;
    --sl-pink: #FBD7FD;
    --sl-red: #F8CCCC;
    --sl-indigo: #D4C8FA;
    --sl-levander: #B0C7FF;
    --sl-blue: #AABBE5;
    --sl-sky-blue: #B2EBFF;
    --sl-aqua: #ADF1EF;
    --sl-green: #D2E6CD;
    --sl-d-green: #85AA73;
}

.pozadi-sl-grey { background-color: var(--sl-grey); }
.pozadi-sl-black { background-color: var(--sl-black); }
.pozadi-sl-brown { background-color: var(--sl-brown); }
.pozadi-sl-yellow { background-color: var(--sl-yellow); }
.pozadi-sl-orange { background-color: var(--sl-orange); }
.pozadi-sl-modrofialova { background-color: var(--sl-modrofialova); }
.pozadi-sl-purple { background-color: var(--sl-purple); }
.pozadi-sl-magenta { background-color: var(--sl-magenta); }
.pozadi-sl-pink { background-color: var(--sl-pink); }
.pozadi-sl-red { background-color: var(--sl-red); }
.pozadi-sl-indigo { background-color: var(--sl-indigo); }
.pozadi-sl-levander { background-color: var(--sl-levander); }
.pozadi-sl-blue { background-color: var(--sl-blue); }
.pozadi-sl-sky-blue { background-color: var(--sl-sky-blue); }
.pozadi-sl-aqua { background-color: var(--sl-aqua); }
.pozadi-sl-green { background-color: var(--sl-green); }
.pozadi-sl-d-green { background-color: var(--sl-d-green); }

/* Nástěnka: seznam 296px, mezery 8; systémové má 16. */
#nastenka-projektu {
    gap: 8px;
    align-items: flex-start;
    /* Mezi seznamy prosvítá šedá plocha #content. */
    background-color: transparent;
}

/* Systémová .project-column nemá display, takže gap sám o sobě neplatí. */
#nastenka-projektu .project-column {
    display: flex;
    flex-direction: column;
    flex: 0 0 296px;
    padding: 8px;
    gap: 8px;
    border-radius: 8px;
}

/* Odstup drží gap seznamu, margin-bottom by ho zdvojil. */
#nastenka-projektu .project-card {
    margin-bottom: 0;
    /* Karta odsazená 10/12, řádky 8px od sebe. */
    padding: 10px 12px;
    gap: 8px;
    border-radius: 8px;
}

/* Titulek karty má 16/22, h4 by dědil 14. */
#nastenka-projektu .project-card h4 {
    font-size: var(--font-size-base);
    line-height: var(--size-22);
}

/* „Přidat úkol" má odsazení jako hlavička, ne líc se seznamem.
   width vrací roztažení na sloupec — .plus-btn dává fit-content a klikací
   plocha by se smrskla na text. */
#nastenka-projektu .project-add-task {
    justify-content: flex-start;
    height: 38px;
    padding: 0 8px;
    width: auto;
}

/* Hlavička seznamu měří 28px. */
#nastenka-projektu .project-column > .space-between {
    height: 28px;
    padding: 0 8px;
}

/* Tečka v hlavičce seznamu má 12px. */
#nastenka-projektu .project-column > .space-between .circle::before {
    width: 12px;
    height: 12px;
    min-width: 12px;
    max-width: 12px;
}

/* Tužka v hlavičce seznamu má 15px. */
#nastenka-projektu .project-column > .space-between .header-icon,
#nastenka-projektu .project-column > .space-between .header-icon svg {
    width: 15px;
    height: 15px;
}

/* Roluje se obsah seznamu, ne stránka — nástěnka se vejde do okna. */
#content.obsah-nastenka { padding-bottom: 24px; }

#nastenka-projektu .project-column { max-height: calc(100vh - 260px); }

.sloupec-ukoly {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Hover „Přidat úkol" mění jen barvu. */
#nastenka-projektu .project-add-task:hover { color: var(--primary-hover); }

/* Text v nabídce seznamu je 14px Inter. */
#nastenka-projektu .action-menu-item {
    font-family: var(--font-inter);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
}

/* Dokončený řádek tabulky má šedý termín. */
.asset-table.ukoly-tabulka tr.je-dokonceny .datum-pill {
    background-color: var(--grey);
}

/* Ikonky na kartě jsou šedé. */
.karta-ikony { color: var(--primary-m); }

.karta-ikony svg { flex-shrink: 0; }

/* Hotový úkol: přeškrtnutý název i termín, ztlumené štítky a ikony. */
.project-card.je-hotovy h4,
.project-card.je-hotovy .karta-termin { text-decoration: line-through; }

.project-card.je-hotovy .karta-termin { color: var(--placeholder-color); }

.project-card.je-hotovy .stitek,
.project-card.je-hotovy .karta-ikony { opacity: 0.5; }

/* Sloupec pro nový seznam má stejnou šířku jako ostatní, aby se nic nelámalo. */
#pridat-seznam {
    flex: 0 0 296px;
    white-space: nowrap;
}

/* Přidat seznam je průhledná varianta plus tlačítka. */
.plus-btn.plus-btn-svetly {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.plus-btn.plus-btn-svetly svg path { fill: var(--primary-color); }

.plus-btn.plus-btn-svetly:hover {
    background-color: var(--light-primary);
    border-color: var(--primary-hover);
    color: var(--primary-hover);
}

.plus-btn.plus-btn-svetly:hover svg path { fill: var(--primary-hover); }

/* Potvrzení nového seznamu je v akční modré. */
#pridat-seznam-pole .primary-btn {
    background-color: var(--primary-action);
    border-color: var(--primary-action);
}

/* Hover jako u „Upravit" (#ulozit-lista .akce-btn). Pravidlo musí být scopované
   na id: výplň i obrys drží #pridat-seznam-pole .primary-btn (1,1,0), takže
   systémové .primary-btn:hover (0,2,0) přebilo jen barvu textu — na hover pak
   bylo tmavě modré písmo na modré výplni. */
#pridat-seznam-pole .primary-btn:hover {
    background-color: var(--light-primary);
    border-color: var(--primary-action);
    color: var(--primary-action);
}

/* Šedá jednotka u pravé hrany pole. */
.pole-s-jednotkou { position: relative; }

.pole-s-jednotkou .jednotka {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--placeholder-color);
    pointer-events: none;
}

/* Mezi lištou tabů a akčním pruhem je 40px, systémových 24 zůstává jinde. */
#content.obsah-ukoly { padding-top: 40px; }

/* ── Druhé kolo připomínek k Úkolům (2026-08-26) ─────────────────────── */

/* Seznam štítků roluje uvnitř panelu, aby „Vytvořit nový štítek" zůstal
   po ruce — 17 štítků dělalo panel přes 900px vysoký.
   300 = 7 řádků po 36px + 6 mezer po 8px. */
#stitky-seznam {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Textová varianta plus tlačítka: geometrie i řez zůstávají z .plus-btn,
   mizí jen výplň a obrys (přání uživatele 2026-08-26). Průhledný obrys,
   ne `border: none` — jinak by tlačítko o 2px kleslo proti sousedům. */
.plus-btn.plus-btn-text {
    background-color: transparent;
    border-color: transparent;
    color: var(--primary-color);
}

.plus-btn.plus-btn-text svg path { fill: var(--primary-color); }

/* Hover mění jen barvu; .plus-btn:hover (0,2,0) by jinak obrys vrátil. */
.plus-btn.plus-btn-text:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--primary-hover);
}

.plus-btn.plus-btn-text:hover svg path { fill: var(--primary-hover); }

/* Třetí řádek termínu („od: …") je v návrhu světlejší než čas nad ním.
   Ztlumení průhledností — barvu textu nese .pozadi-datum, pilulka ji nezná.
   (0,3,0) kvůli pravidlu `.datum-pill .size-xxs` o pár set řádků výš. */
.datum-pill .size-xxs.termin-od { opacity: 0.75; }

/* ══ SJEDNOCENÍ S VALIHO VĚTVÍ (style-3.css) ══ autorizace 2026-09-01,
   detail v CSS-autorizace § 4.31. */

/* Křížek v hlavičce úpravy poznámky stojí nad fajkou v poli pod ním. */
.poznamka-hlavicka-radek { padding-right: 17px; }

/* Upravovaná poznámka má zvýrazněnou bublinu. */
.detail-poznamka[data-uprava="1"] .detail-bublina {
    background-color: var(--light-primary);
}

/* Na stránce výběru položek se ruší systémová rezerva pod tabulkou. */
#karta-vyber-polozek .scroll-table {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Panel se kotví pod dvouřádkovou hlavičku tabulky (16 + 58px). */
#karta-vyber-polozek .dropdown-panel { top: 74px; }

/* Pilulka typu drží šířku textu i v úzkém sloupci. */
#karta-vyber-polozek .asset-table .alert { width: max-content; }


/* ── Nastavení profilu ────────────────────────────────────────────────── */

/* Nastavení profilu má mít pole stejná jako karta Přidat dokument (Figma: 35px,
   rámeček --light-grey #D1D5E0, text 8px od kraje). Globální pravidlo pro inputy
   má specificitu (0,0,7,1), proto scoping přes id obalu záložek.
   Zaškrtávatka a přepínače jsou vyjmuté — min-height 35 a padding by je rozbily
   (na kartě dokumentu to řeší vlastní pravidlo). Autorizoval uživatel 2026-09-02. */
#karta-nastaveni-profilu input:not([type="checkbox"]):not([type="radio"]),
#karta-nastaveni-profilu select {
    min-height: 35px;
    border-color: var(--light-grey);
    padding-left: 8px;
}

/* Figma: avatar na Nastavení profilu je 104×104. Systémová .profile je 72
   a sdílí ji dashboard i horní lišta, proto scoping přes id stránky.
   Autorizoval uživatel 2026-09-02. */
#karta-nastaveni-profilu .profile {
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
}

/* Figma: mezi záložkami je 10px. Projekt má utility 8 a 12, 10 nikoli
   a zavádět kvůli jedné stránce novou .g10px by rozšířilo utility
   sadu. Autorizoval uživatel 2026-09-02. */
#karta-nastaveni-profilu [role="tablist"] {
    gap: 10px;
}

/* Figma: popisky nepovinných polí jsou text/text 14/20 Regular; systémový
   <label> má 500. Povinné zůstávají SemiBold přes .required.
   Stejné řešení jako #karta-form-dokumentace label:not(.semibold).
   Autorizoval uživatel 2026-09-02. */
#karta-nastaveni-profilu label:not(.required) {
    font-weight: var(--font-weight-normal);
}

/* Figma text styl „nadpisy/H3" je 16/18; systémové h3 má 16/24,
   což odpovídá stylu „H3 - medium". Stejné řešení jako .mini-kalendar h3
   a .kalendar-info-nazev. Autorizoval uživatel 2026-09-02. */
#karta-nastaveni-profilu h3 {
    line-height: var(--size-18);
}

/* V Integraci má Figma odrážky i text u zámku v Source Sans 3 16/24,
   zatímco systémový styl text/text 14/20 je Inter a platí dál.
   .size-base nese v tomhle panelu přesně ty prvky 16/24.
   Autorizoval uživatel 2026-09-02. */
#panel-integrace .size-base {
    font-family: var(--font-family);
}
/* Boční navigace v Nastavení systému (Figma „vyber perso item“) — podnabídka
   modulu i seznam schvalovacích procesů; uživatel chce oba stejné.
   Rozměry z Figmy: panel 204px, svislý padding 12px, gap 8px, položky
   přes celou šířku (vodorovný padding panelu je 0), 8/24px uvnitř.
   `overflow: hidden` ořízne pozadí položek do zaoblených rohů panelu.
   `text-align: left` je nutný navíc — <button> není flex kontejner, takže
   samotné `justify-content` by popisek nezarovnalo.
   Selektor je zúžený na <nav> — samotné `.event-item` je na té stránce
   ještě 5x (karta Tarif, karty schvalovacích rolí) a ty se stylovat nesmí.
   `:not(.btn)` drží stranou tlačítko „Přidat proces“, které je běžný .btn.
   Autorizace uživatele 2026-09-04. */
#karta-nastaveni-systemu nav.event-item {
    flex: 0 0 204px;
    padding: 12px 0;
    gap: 8px;
    overflow: hidden;
}

#karta-nastaveni-systemu nav.event-item button:not(.btn) {
    /* Polozky navigace jsou holy <button>, ktery neni v zadnem ze systemovych
       seznamu s `cursor: pointer` (r. 185-190). Bez tohohle radku nad nimi
       zustane sipka, zatimco .btn, kebab i zalozky pointer maji.
       Autorizace uzivatele 2026-09-06. */
    cursor: pointer;
    width: 100%;
    padding: 12px 16px 12px 24px;
    justify-content: flex-start;
    text-align: left;
    font-size: var(--font-size-base);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
}

/* Panel má vodorovný padding 0, aby pruh položky sahal od kraje ke kraji;
   nadpis, oddělovač a tlačítko „Přidat proces“ se proto odsazují samy. */
#karta-nastaveni-systemu nav.event-item > p,
#karta-nastaveni-systemu nav.event-item > .divider,
#karta-nastaveni-systemu nav.event-item > .btn {
    margin-left: 24px;
    margin-right: 24px;
}

/* Oddělovač dědí `width: 100%` (ř. 218), takže by mu marginy vlevo i vpravo
   nezúžily šířku, ale odsunuly ho za pravý okraj panelu. `width: auto` nechá
   šířku dopočítat z marginů; svislé marginy mu dají prostor podle návrhu.
   Autorizace uživatele 2026-09-04. */
#karta-nastaveni-systemu nav.event-item > .divider {
    width: auto;
    margin-left: 16px;
    margin-right: 16px;
}

#karta-nastaveni-systemu nav.event-item button:not(.btn):hover {
    background-color: var(--light-primary);
    color: var(--primary-hover);
}

#karta-nastaveni-systemu nav.event-item button:not(.btn)[aria-current="true"] {
    background-color: var(--background-color);
    color: var(--primary-color);
}

/* Mini přepínač z Figmy (32×17) — podle uživatele nový prvek designu, ne
   změna toho systémového. Varianta jen přepíše tři proměnné, které si
   .switch-track už drží; poloměr dráhy i poloha knoflíku se dopočítají samy.
   Autorizace uživatele 2026-09-04. */
.switch-mini .switch-track {
    --track-w: 32px;
    --track-h: 17px;
    --knob: 13px;
}

/* Název role v kartě schvalovacího kroku — Figma styl nadpisy/H3 (16/18)
   v barvě primary/primary blue; systémový odstavec dává 14/20 v text-color.
   Autorizace uživatele 2026-09-04. */
#karta-nastaveni-systemu .event-item.flex-row p.semibold {
    font-size: var(--font-size-base);
    line-height: var(--size-18);
    color: var(--primary-color);
}

/* Svislá spojnice mezi kroky schvalování (Figma). Kreslí se přes ::before do
   mezery nad kartou, takže nepotřebuje žádný nový markup ani se nezobrazí
   nad prvním krokem. Vodorovně sedí na střed kolečka s číslem kroku
   (padding karty 16 + polovina z 25px kolečka).
   Autorizace uživatele 2026-09-04. */
#karta-nastaveni-systemu .event-item.flex-row {
    position: relative;
}

#karta-nastaveni-systemu .event-item.flex-row + .event-item.flex-row::before {
    content: "";
    position: absolute;
    left: 37.5px;
    bottom: 100%;
    width: 3px;
    height: 16px;
    background-color: var(--primary-color);
}
/* Štítky oprávnění na Detailu uživatele — Figma styl text/text - semibold
   (Inter 14/20 SemiBold) a padding 12/6. Systémový .chip je 13/20 v normální
   váze s paddingem 6/10 a zůstává beze změny.
   Pozor: samotná utilita `.semibold` by nestačila — `.chip` má vlastní
   `font-weight: var(--font-weight-normal)` a v souboru stojí ZA skupinou se
   `.semibold`, takže při shodné specificitě vyhraje.
   Autorizace uživatele 2026-09-04. */
#detail-hlavni .chip {
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-semibold);
}

/* Panely a karty `.event-item` v Nastavení systému mají podle Figmy ostré rohy —
   systémová `.event-item` (ř. 1727) má 8px. Týká se všech sedmi na stránce:
   karta Tarif Premium, podnabídka modulu, seznam schvalovacích procesů a čtyři
   karty schvalovacích rolí; uživatel je vyjmenoval.
   Výjimka `:not(.br8px)` je tu proto, aby utilita `.br8px` měla dál slovo —
   karta schvalovací role má podle Figmy 8px (autorizace 2026-09-04).
   Autorizace uživatele 2026-09-04. */
#karta-nastaveni-systemu .event-item:not(.br8px) {
    border-radius: 0;
}

/* Nastavení systému — dolaďování schvalovacích procesů podle Figmy.
   Autorizace uživatele 2026-09-04 („vytvoř novou třídu, jestli je potřeba,
   nechci tam dávat svg, chci aby to bylo dynamicky"). */

/* „Přidat proces" je běžná položka seznamu (šířku a padding bere z pravidla výš),
   jen modrá — proto výjimka proti `color: var(--text-color)` u ostatních položek. */
/* Neaktivní proces je celý šedý — `.grey` barví jen tečku přes ::before.
   Autorizace uživatele 2026-09-04. */
#karta-nastaveni-systemu nav.event-item button.grey {
    color: var(--grey);
}

#karta-nastaveni-systemu nav.event-item button.text-primary {
    color: var(--primary-color);
    font-size: var(--font-size-sm);
}

/* Kolečko s číslem schvalovacího kroku: Figma 46x46, číslo 30/33 SemiBold.
   Systémová `.qr-step-num` (25px, 16/18) slouží krokům u QR kódu na Nastavení
   profilu a zůstává beze změny. */
#karta-nastaveni-systemu .qr-step-num {
    width: 46px;
    height: 46px;
    min-width: 46px;
    font-size: 30px;
    line-height: 33px;
}

/* Nadpis „Pořadí schvalování a role" je podle Figmy styl `form-sekce` 18/26.
   `.milnik-nadpis` (0,1,0) prohrávala s `#karta-nastaveni-systemu h3` (1,0,1)
   ze záznamu 73, které sráží proklad na 18. Autorizace uživatele 2026-09-04. */
#karta-nastaveni-systemu h3.milnik-nadpis {
    line-height: var(--size-26);
}

/* Info pruh v Nastavení systému: Figma dává výšku 44 (padding 12 + řádek 20)
   a vlastní ikonu. Systémová `.information` má padding 8 a jinou ikonu; kreslí
   ji maskou nad `background-color: currentColor`, takže výměnou masky si pruh
   drží barvu z `.information-blue`. Autorizace uživatele 2026-09-04. */
#karta-nastaveni-systemu .information {
    padding: 12px 8px;
}

#karta-nastaveni-systemu .information::before {
    margin-top: 0;
    -webkit-mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018%2018'%20fill='none'><path%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9%200C4.0293%200%200%204.0293%200%209C0%2013.9707%204.0293%2018%209%2018C13.9707%2018%2018%2013.9707%2018%209C18%204.0293%2013.9707%200%209%200ZM7.84686%2014.6418V6.87837H10.1477V14.6418H7.84686ZM8.05033%205.40706C8.29033%205.62619%208.60338%205.73576%208.98946%205.73576C9.37555%205.73576%209.6886%205.62619%209.9286%205.40706C10.1686%205.18793%2010.2886%204.89576%2010.2886%204.53054C10.2886%204.16532%2010.1686%203.87315%209.9286%203.65402C9.6886%203.43489%209.37555%203.32532%208.98946%203.32532C8.60338%203.32532%208.29033%203.43489%208.05033%203.65402C7.81033%203.87315%207.69033%204.16532%207.69033%204.53054C7.69033%204.89576%207.81033%205.18793%208.05033%205.40706Z'%20fill='black'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018%2018'%20fill='none'><path%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9%200C4.0293%200%200%204.0293%200%209C0%2013.9707%204.0293%2018%209%2018C13.9707%2018%2018%2013.9707%2018%209C18%204.0293%2013.9707%200%209%200ZM7.84686%2014.6418V6.87837H10.1477V14.6418H7.84686ZM8.05033%205.40706C8.29033%205.62619%208.60338%205.73576%208.98946%205.73576C9.37555%205.73576%209.6886%205.62619%209.9286%205.40706C10.1686%205.18793%2010.2886%204.89576%2010.2886%204.53054C10.2886%204.16532%2010.1686%203.87315%209.9286%203.65402C9.6886%203.43489%209.37555%203.32532%208.98946%203.32532C8.60338%203.32532%208.29033%203.43489%208.05033%203.65402C7.81033%203.87315%207.69033%204.16532%207.69033%204.53054C7.69033%204.89576%207.81033%205.18793%208.05033%205.40706Z'%20fill='black'/></svg>") center / contain no-repeat;
}

/* Sloupec se zaskrtavatkem: `#content .sloupce-auto th { width: auto }` (r. 7003)
   necha prohlizec rozdelit volne misto mezi sloupce pomerne, takze u uzkych
   tabulek vyroste i sloupec s checkboxem — u ctyrsloupcove tabulky sablon merilo
   166 px proti 60 px u sedmisloupcove tabulky uzivatelu. 60 px je sirka, kterou
   ma dnes prirozene ta sedmisloupcova, takze se nemeni.
   Trida je opt-in: tabulek se zaskrtavatky je v repu 52 a globalni pravidlo na
   `th:first-child` by zasahlo i tabulky, kde v prvnim sloupci checkbox neni.
   Autorizace uzivatele 2026-09-06. */
.asset-table th.sloupec-check,
.asset-table td.sloupec-check { width: 60px; }

/* Formulářová karta na úzkém okně: buňky mřížek pod sebe. Tři sloupce po ~170 px
   lámaly popisky („Cestovní příkazy“), dvousloupec byl nahňácaný a pevných
   240 px by z karty vylezlo. Stejná specificita
   (1,1,1) jako původní pravidla, vyhrává pořadím. Breakpoint 768 je v souboru
   nejčastější. Autorizace uživatele 2026-09-06. */
@media (max-width: 768px) {
  /* Řádky bez .flex-wrap (osobní údaje, Role · Uživatel · Limit) by jinak
     buňky 100 % postavily vedle sebe a přečnívaly kartu. */
  #karta-form-dokumentace .dod-mrizka,
  #karta-form-dokumentace .dod-mrizka-2 { flex-wrap: wrap; }
  #karta-form-dokumentace .dod-mrizka > div,
  #karta-form-dokumentace .dod-mrizka-2 > div { flex: 0 0 100%; }
}

/* Nastavení systému na úzkém okně: boční navigace modulu (Pozice · Příplatky ·
   Benefity) a seznam schvalovacích procesů stojí vedle obsahu (204 px + mezera
   40). Pod 768 px zbývá panelu méně než ~410 px a vstupy v tabulkách modulů
   klesají pod 150 px (naměřeno 147 px při 750, 65 px při 582). Navigace jde nad
   obsah, oba na celou šířku. `:has(> nav.event-item)` míří jen na dva obaly
   s navigací — ostatní `.flex-row` na stránce (přepínače, karty kroků) se
   nemění. `!important` je nutné, `.flex-row` (ř. 5004) má row !important;
   `flex: 0 0 auto` ruší 204px basis navigace (ve sloupci by to byla výška)
   a `flex: 1 1 0` panelu. Autorizace uživatele 2026-09-07. */
@media (max-width: 768px) {
  #karta-nastaveni-systemu .flex-row:has(> nav.event-item) {
    flex-direction: column !important;
  }
  #karta-nastaveni-systemu .flex-row:has(> nav.event-item) > nav.event-item,
  #karta-nastaveni-systemu .flex-row:has(> nav.event-item) > .flex110 {
    flex: 0 0 auto;
    width: 100%;
  }
}


/*
====================================
  Modul „Elektronické schvalování"
====================================
*/

/* detail.html — proces schvalování (stepper) */
.tab-switcher-hug {
  margin-bottom: -24px;
  z-index: 100;
}

.proces-scroller {
  overflow-x: auto;
  width: 100%;
}

.proces-kroky {
  display: flex;
  align-items: flex-start;
  gap: 140px;
  width: max-content;
}

.proces-krok {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 140px;
  flex: 0 0 140px;
  text-align: center;
  font-family: 'Source Sans 3', sans-serif;
}

/* Spojnice mezi kolečky kroků */
.proces-krok::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  width: calc(100% + 140px);
  height: 2px;
  background-color: #cecece;
  z-index: 0;
}

.proces-krok:last-child::after {
  display: none;
}

.proces-krok.spoj-hotovy::after {
  background-color: var(--primary-color);
}

.proces-circle {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 18px;
  line-height: 18px;
}

.proces-circle.hotovo {
  background-color: var(--tm-green);
  color: var(--background-color);
}

.proces-circle.aktualni {
  background-color: var(--primary-color);
  color: var(--background-color);
}

.proces-circle.cekajici {
  background-color: var(--background-color);
  border: 2px solid #cecece;
  color: var(--text-color);
}

.proces-circle.zamitnuto {
  background-color: var(--red);
  color: var(--background-color);
}

.proces-nazev {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proces-nazev strong {
  font-weight: 600;
  font-size: var(--font-size-sm);
  line-height: 18px;
  color: var(--text-color);
}

.proces-nazev span {
  font-weight: 400;
  font-size: var(--font-size-xs);
  line-height: 18px;
  color: var(--placeholder-color);
}

.proces-stav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  width: 140px;
}

.proces-stav .datum {
  font-weight: 400;
  font-size: var(--font-size-xs);
  line-height: 18px;
  color: var(--placeholder-color);
}

.proces-stav .stav {
  font-weight: 500;
  font-size: var(--font-size-sm);
  line-height: 24px;
}

.proces-stav.vytvoreno {
  background-color: var(--light-primary);
}

.proces-stav.vytvoreno .stav {
  color: var(--primary-hover);
}

.proces-stav.schvaleno {
  background-color: #f4fdf2;
}

.proces-stav.schvaleno .stav {
  color: var(--tm-green);
}

.proces-stav.zamitnuto {
  background-color: var(--light-red);
}

.proces-stav.zamitnuto .stav {
  color: var(--red);
}

.proces-stav.vraceno,
.proces-stav.upraveno {
  background-color: var(--light-orange);
}

.proces-stav.vraceno .stav,
.proces-stav.upraveno .stav {
  color: var(--tm-orange);
}

/* Informační pruh nad stepperem (barva se dědí na ikonu) */
.proces-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px;
  width: 100%;
}

.proces-info p {
  margin: 0;
  font-weight: 600;
  font-size: var(--font-size-sm);
  line-height: 20px;
}

.proces-info.schvaleno,
.proces-info.schvaleno p {
  color: var(--tm-green);
}

.proces-info.zamitnuto,
.proces-info.zamitnuto p {
  color: var(--red);
}

.proces-info.vraceno,
.proces-info.vraceno p {
  color: var(--tm-orange);
}

.proces-info.schvaleno {
  background-color: #f4fdf2;
}

.proces-info.zamitnuto {
  background-color: var(--light-red);
}

.proces-info.vraceno {
  background-color: var(--m-orange);
}

.kod-pill, .stav-pill { width: fit-content; }

@media (max-width: 768px) {
  .doch-savebar { bottom: 64px; }
}

/* form_ostatni.html — karta „Údaje žádosti" (Ostatní) */
#karta-udaje-ostatni {
  max-width: 800px;
}

/* Rozsahová pole (Období, Čas) v mřížce nesmí přetéct */
#karta-udaje-ostatni .center>input,
#karta-udaje-ostatni .center>.pole-s-jednotkou,
#karta-udaje-ostatni .pole-s-jednotkou input {
  min-width: 0;
}

/* Krokový přepínač (taby, space-between) */
.kroky {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Spojnice kroků (polohuje JS) */
.krok-cara,
.krok-cara-postup {
  position: absolute;
  height: 2px;
  z-index: 0;
}

.krok-cara {
  background-color: #cecece;
}

.krok-cara-postup {
  background-color: var(--primary-color);
}

.krok {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: 'Source Sans 3', sans-serif;
}

.krok-num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 18px;
  line-height: 18px;
  background-color: var(--background-color);
  border: 2px solid #cecece;
  color: var(--text-color);
}

.krok.hotovo .krok-num {
  background-color: var(--tm-green);
  border-color: var(--tm-green);
  color: var(--background-color);
}

.krok.aktualni .krok-num {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--background-color);
}

/* Aktuální krok — SemiBold popisek */
.krok.aktualni .milnik-nadpis {
  font-weight: 600;
}

.krok-panel[hidden] {
  display: none;
}

/* Ukládací lišta nad tabulkami kroků */
#ulozit-lista { z-index: 200; }

/* Ztmavení dialogů nad lištou */
#prekryv-sablona, #prekryv-upravit { z-index: 300; }

/* form_vyd_pri.html — zalomení dvou karet pod 1200px */
@media (max-width: 1200px) {
  #karty-zalozeni,
  #karty-rekapitulace {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
}

/* form_typ_zadosti_ai.html — karta „Převod PDF pomocí AI" (figma 23546-125155) */
#karta-prevod-pdf {
  max-width: 800px;
}

#btn-generovat {
  width: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* form_typ_zadosti_rucne.html — karta „Nový typ žádosti" (figma 23546-125362) */
#karta-novy-typ {
  max-width: 800px;
}

/* form_vyber_sekce.html — karta „Nová žádost" (figma 23203-123666) */
#karta-nova-zadost {
  max-width: 800px;
}

/* form_vyber_typu.html — mřížka karet typů žádosti */
.typ-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 800px) {
  .typ-grid { grid-template-columns: 1fr; }
}

/* Karta typu žádosti + stavy (figma 23228-130895) */
.typ-karta {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 16px 24px;
  background-color: var(--background-color);
  border: 1px solid var(--darker-table-line);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.typ-karta:hover {
  background-color: var(--light-primary);
  border-color: var(--primary-hover);
}

.typ-karta:active {
  border-color: var(--primary-hover);
  box-shadow: 0 5px 4px rgba(0, 0, 0, .15);
}

/* Ikona karty 40×40 + hover přepnutí na plus */
.typ-ikona-obal {
  flex: 0 0 40px;
}

.typ-ikona-hover {
  display: none;
}

.typ-karta:hover .typ-ikona {
  display: none;
}

.typ-karta:hover .typ-ikona-hover {
  display: block;
}

/* Kebab karty — zarovnání vpravo */
.typ-karta > .dropdown {
  margin-left: auto;
}

/* Kebab tlačítko (převzato z tabulkového .header-icon-sm) */
.typ-karta-kebab {
  display: flex;
  align-items: center;
  width: 22px;
  height: 25px;
  padding: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.typ-karta-kebab path { fill: var(--primary-color); }
.typ-karta-kebab:hover path { fill: var(--primary-hover); }

/* Nabídka kebabu (převzato z tabulkového .dropdown-menu / .action-menu-item) */
.typ-karta .dropdown-menu,
#menu-pridat-typ {
  width: 204px;
  min-width: 204px;
  border: 1px solid var(--primary-m);
}
.typ-karta .action-menu-item,
#menu-pridat-typ .action-menu-item {
  padding: 12px 16px;
  gap: 8px;
  text-align: left;
  font-family: var(--font-inter);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-sm);
  white-space: normal;
  align-items: center;
}
.typ-karta .action-menu-item .header-icon {
  flex: 0 0 25px;
  justify-content: center;
}

/* Nadpis a popis v kartě bez okrajů (django/form_vyber_typu.html) */
.typ-karta h2,
.typ-karta p {
  margin: 0;
}

/* form_zadost_approval_*.html — karta „Schválit žádost" (figma 21267-103914) */
#karta-schvaleni {
  max-width: 800px;
}

/* form_zastoupeni.html — karta „Přidat zastoupení" (figma 20926-92632) */
#karta-zastoupeni {
  max-width: 800px;
}

/* prehled.html — souhrnné karty (mřížka) */
.souhrn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
.souhrn-grid > .span-2 { grid-column: span 2; }
@media (max-width: 1350px) {
  .souhrn-grid { grid-template-columns: repeat(2, 1fr); }
  .souhrn-grid > .span-2 { grid-column: span 1; }
}
@media (max-width: 1200px) {
  .souhrn-grid { grid-template-columns: 1fr; }
  .souhrn-grid > .span-2 { grid-column: auto; }
}

/* django/django_base.html — částka (limit) se nesmí lámat */
.castka-sloupec span {
  white-space: nowrap;
}


[id*="bulk-toolbar"] button,
.js-bulk-toolbar button,
[data-bulk-lista] button {
    background: none;
    border: none;
    padding: 4px;
    margin: -4px;
    cursor: pointer;
    color: var(--text-color);
}

[id*="bulk-toolbar"] button:hover,
.js-bulk-toolbar button:hover,
[data-bulk-lista] button:hover { color: var(--primary-hover); }

.db-card-check {
    display: inline-flex;
}

.db-card-check input[type="checkbox"] {
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Prenaseno z puvodniho styles.css pri prevzeti designoveho CSS.
   Designova vetev tahle pravidla nema - kryje jen vozovy park a dokumenty.
   Bez nich prijde modul Dochazka (rozvrh smen) o cely rozvrzeni tabulky.
   Viz issue #767: pri drivejsi vymene CSS uz jednou takhle zmizely styly
   Personalistiky a musely se rucne vracet.
   --------------------------------------------------------------------------- */
.schedule-table {
  min-width: 1400px;
  width: max-content;
  margin: 0;
  padding: 0;
}
.schedule-row {
  display: grid;
  grid-template-columns:50px 260px 110px 96px 200px 260px 260px 120px 200px 200px;
  align-items: center;
  gap: 16px;
  padding: 12px;
}
.schedule-head {
  font-family: var(--font-inter);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-semibold);
  padding-top: 18px;
  padding-bottom: 4px;
}
.schedule-table .schedule-row:nth-child(even) {background: var(--darker-table-line);}
/* ======================================================
   Personalistika — komponenty sekce
   Autorizace uživatele 2026-09-04. Viz CSS-autorizace.md § 4.32.
   Jen přírůstky, 0 změněných existujících pravidel.
====================================================== */

/* Neutrální varianta kódové pilulky: chip počtu poměrů („3 poměry") a názvu
   pozice („HPP - Školník") v Přehledu zaměstnanců i Docházce.
   Figma: výška 21px, obrys --darker-table-line, text černý, výplň bílá.
   Modifikátor .kod-pill, ne nová pilulka — geometrie (20px, radius 50px) sedí,
   liší se jen barva obrysu a textu. .alert-grey použít nelze: má šedou výplň
   a `td .alert.alert-sm { width: 68px }` textu nedovolí vyjít z pilulky. */
.kod-pill-neutral {
    border-color: var(--darker-table-line);
    color: var(--text-color);
}

/* Segmentovaný přepínač Ne/Ano — osobní dotazník ho má u ~15 řádků.
   Systémová .switch je páčka (44×26 s knoflíkem), Figma chce dva segmenty.
   Naměřeno v „switch _ priloha.png": dráha 30px --secondary-color,
   vybraná pilulka 24px --background-color (odsazení 3px), text --grey → --text-color. */
.seg-switch {
    position: relative;
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background-color: var(--secondary-color);
}
/* Radio se schovává vizuálně, NE přes display:none — to by ho vyřadilo z tab
   pořadí i ze stromu přístupnosti a přepínač by nešel ovládat klávesnicí.
   `min-height: 0` přebíjí globální pravidlo pro inputy (vnucuje 35px). */
.seg-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}
.seg-switch input:focus-visible + span {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.seg-switch span {
    padding: 4px 16px;
    border-radius: 999px;
    color: var(--grey);
    cursor: pointer;
}
.seg-switch input:checked + span {
    background-color: var(--background-color);
    color: var(--text-color);
    font-weight: var(--font-weight-semibold);
}

/* Zelené radio mimo #karta-form-dokumentace. Hodnoty jsou převzaté beze změny
   z pravidla na ř. 5896–5915 — to je scopované na #id, takže se do exportního
   modalu ani do dotazníku nepřenese (past css-scopovane-na-id-se-neprenese).
   Scoping přes #content stejně jako u `#content .dropdown-panel select`:
   globální pravidlo pro inputy jinak vnutí min-height 35px a padding. */
#content .radio-zeleny {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--grey);
    border-radius: 50%;
}
#content .radio-zeleny:checked {
    background-color: var(--green);
    box-shadow: inset 0 0 0 2px var(--background-color);
}

/* Akcent na levé hraně rozbaleného řádku. Stejný vzor jako
   `#doch-table tbody tr.doch-neuplny td:first-child` (ř. 4898), jen modře. */
.asset-table tbody tr.radek-rozbalovaci.je-rozbaleny > td:first-child {
    box-shadow: inset 3px 0 0 var(--primary-hover);
}

/* ======================================================
   Personalistika — doplňky (§ 4.33)
   Autorizace uživatele 2026-09-04 (tatáž autorizace přírůstků jako § 4.32).
   Jen přírůstky, 0 změněných existujících pravidel.
====================================================== */

/* Šířka výplně ukazatele průběhu. Utility sada má jedinou procentní třídu
   .w-50pr (ř. 5089) a ta se navíc pod 1100px přepíná na 100 % (ř. 5219) —
   na ukazateli by to znamenalo, že se na užším okně vždy vyplní celý.
   Proto vlastní krokovaná sada scopovaná na .progress-fill: neleze do utility
   jmenného prostoru a mobilní přepis se jí netýká. Krok 5 %. */
.progress-fill.pct-5   { width: 5%; }
.progress-fill.pct-10  { width: 10%; }
.progress-fill.pct-15  { width: 15%; }
.progress-fill.pct-20  { width: 20%; }
.progress-fill.pct-25  { width: 25%; }
.progress-fill.pct-30  { width: 30%; }
.progress-fill.pct-35  { width: 35%; }
.progress-fill.pct-40  { width: 40%; }
.progress-fill.pct-45  { width: 45%; }
.progress-fill.pct-50  { width: 50%; }
.progress-fill.pct-55  { width: 55%; }
.progress-fill.pct-60  { width: 60%; }
.progress-fill.pct-65  { width: 65%; }
.progress-fill.pct-70  { width: 70%; }
.progress-fill.pct-75  { width: 75%; }
.progress-fill.pct-80  { width: 80%; }
.progress-fill.pct-85  { width: 85%; }
.progress-fill.pct-90  { width: 90%; }
.progress-fill.pct-95  { width: 95%; }
.progress-fill.pct-100 { width: 100%; }

/* Zelený akcent u dnešního dne v denní docházce. Stejný vzor jako
   `#doch-table … tr.doch-neuplny` (ř. 4898) a `.je-rozbaleny` (§ 4.32). */
.asset-table tbody tr.doch-dnes > td:first-child {
    box-shadow: inset 3px 0 0 var(--green);
}

/* ══ Personalistika – šířky sloupců tabulek (autorizace uživatele 2026-09-08, § 4.34) ══ */
/* Obě tabulky přetékaly `.scroll-table` a ořezávaly akční sloupec (kebab, šipka, tužka):
   docházka 1146,69 px do 1024 (regrese po sloupci „Pauza"), přehled 1122,45 px.
   Scopování na `#id.sloupce-auto` dá (1,2,1) a přebije `#content .sloupce-auto th` (ř. 6919, (1,1,1))
   nezávisle na pořadí v souboru — past [[cascade-order-stejna-specificita]]. */

/* Samotné `width` sloupec nezúží: `table-layout: auto` nikdy nejde pod min-content obsahu,
   a ten drží `ws-nowrap` na záhlaví (naměřeno: s nowrap 1063 px, bez něj 881 px).
   Zalomení popisků je proto nutná podmínka pevných šířek, ne kosmetika. */
#doch-table.sloupce-auto thead th { white-space: normal; }

/* Podtitulek „vč. příplatků 9 000 Kč" držel sloupec na 161 px. Uvolněn je jen on —
   částka nad ním zůstává na jednom řádku (`ws-nowrap` na rodiči platí dál). */
#doch-table.sloupce-auto td .size-xxs { white-space: normal; }

/* Součet 1024 = vnitřní šířka `.table-container`, stejný rozpočet jako `.rows-compact`
   (ř. 5596–5602). Figma (rám 19441:82968) má 1025 bez sloupce „Pauza"; těch 78 px pro
   Pauzu je ubráno sloupcům složek, kde bylo nejvíc bílého místa (161 → 114 a 106).
   Každá hodnota je ≥ naměřené min-content, jinak by se sloupec roztáhl zpět. */
#doch-table.sloupce-auto th:nth-child(1) { width: 50px; }
#doch-table.sloupce-auto th:nth-child(2) { width: 230px; }
#doch-table.sloupce-auto th:nth-child(3) { width: 124px; }
#doch-table.sloupce-auto th:nth-child(4) { width: 109px; }
#doch-table.sloupce-auto th:nth-child(5) { width: 126px; }
#doch-table.sloupce-auto th:nth-child(6) { width: 136px; }
#doch-table.sloupce-auto th:nth-child(7) { width: 162px; }
#doch-table.sloupce-auto th:nth-child(8) { width: 87px; }

/* Přehled má záhlaví bez `ws-nowrap`, šířku drží obsah buněk: řádek příznaků
   („Exekuce | ZTP/P | Důchod | Jiný zaměstnavatel") 300 px a podtitulek složek 157 px.
   Uvolněny jen tyhle dva sloupce — pilulky stavů zůstávají nezalomené. */
#tabulka-zamestnanci.sloupce-auto td:nth-child(2) .ws-nowrap,
#tabulka-zamestnanci.sloupce-auto td:nth-child(7) .ws-nowrap { white-space: normal; }

/* ══ Sloupcová parita hlavní tabulky a rozpisu poměrů (2026-09-10, připomínka Lucky) ══ */
/* Rozpis poměrů byl vnořená `<table>` uvnitř `td[colspan="15"]`. Dvě tabulky se
   s `table-layout: auto` nikdy netrefí (naměřeno až 175 px rozdílu), a berličky, které
   je srovnaly — `table-layout: fixed` + `max-width: max-content` na obou — je zároveň
   zafixovaly na součet sloupců 1024 px, takže tabulka nevyplnila kartu (na 1920 obal
   1536 px, tabulka 1024). Řádky poměrů jsou proto dnes běžné `<tr>` hlavní tabulky:
   lícování vzniká automaticky (tytéž sloupce) a obě berličky jsou zrušené — tabulka
   drží jen `width: 100%` (ř. 218) + `table-layout: auto` a roztáhne se jako #doch-table.
   Zrušená je i zrcadlová sada `#tabulka-zamestnanci .asset-table.pozadi-background
   td:nth-child(N)` — vnořená tabulka, kterou obsluhovala, už neexistuje. */

/* Šířky všech 15 sloupců. Součet osmi výchozích = 1024 = vnitřní šířka
   `.table-container`, takže výchozí stav se na 1440 vejde bez rolování a akční sloupec
   zůstává vidět (§ 4.34). Se všemi volitelnými je součet 2063 a tabulka roluje — záměr.
   Hodnoty 2/7/8/10/11/13 jsou dosavadní rendering na 1440 zaokrouhlený na celé px. */
#tabulka-zamestnanci.sloupce-auto th:nth-child(1)  { width: 50px; }
#tabulka-zamestnanci.sloupce-auto th:nth-child(2)  { width: 196px; }
#tabulka-zamestnanci.sloupce-auto th:nth-child(3)  { width: 138px; }
/* Kontakt 206 px: e-mail má `ws-nowrap` a nejdelší měří 173 px + 2×16 padding. */
#tabulka-zamestnanci.sloupce-auto th:nth-child(4)  { width: 206px; }
#tabulka-zamestnanci.sloupce-auto th:nth-child(5)  { width: 150px; }
#tabulka-zamestnanci.sloupce-auto th:nth-child(6)  { width: 90px; }
/* Jediný sloupec s `min-width`. `width` je s `table-layout: auto` jen návrh a jakmile
   součet přeteče obal (všech 15 sloupců = 2063 px proti 1504 na 1920), prohlížeč
   sloupce stlačí k min-content. Nárokové složky to sráží nejvíc, protože jim pravidlo
   níže povoluje zalomit podtitulek — naměřeno 100,84 px místo 175 a „vč. příplatků"
   na tři řádky. 163 px je podlaha, ne cíl: přesně na tolik se sloupec ustálí ve
   výchozím stavu na 1440 a podtitulek se na ni vejde na jeden řádek. Víc dát nejde —
   ostatní sloupce mají min-content nad svou návrhovou hodnotou (8/10/11/13 dohromady
   +9,45 px), takže při 175 px by výchozí stav vyšel na 1033,3 px a začal rolovat.
   Ostatní sloupce ztrácejí při všech volitelných do 15 px, těm `min-width` nedávám. */
#tabulka-zamestnanci.sloupce-auto th:nth-child(7)  { width: 175px; min-width: 163px; }
#tabulka-zamestnanci.sloupce-auto th:nth-child(8)  { width: 94px; }
/* Vybrat dovolenou do 165 px: pilulka data je 130,5 px + 2×16 padding. */
#tabulka-zamestnanci.sloupce-auto th:nth-child(9)  { width: 165px; }
#tabulka-zamestnanci.sloupce-auto th:nth-child(10) { width: 155px; }
#tabulka-zamestnanci.sloupce-auto th:nth-child(11) { width: 130px; }
#tabulka-zamestnanci.sloupce-auto th:nth-child(12) { width: 145px; }
#tabulka-zamestnanci.sloupce-auto th:nth-child(13) { width: 137px; }
#tabulka-zamestnanci.sloupce-auto th:nth-child(14) { width: 145px; }
#tabulka-zamestnanci.sloupce-auto th:nth-child(15) { width: 87px; }

/* ══ Zebra po zaměstnancích (2026-09-10, tatáž připomínka) ══ */
/* Zaměstnanec má proměnný počet poměrů (5 a 1 v prototypu), takže žádná zebra počítaná
   přes `:nth-child` sedět nemůže — `.zebra-even` (ř. 5682) barví po jednom řádku,
   `.zebra-pary` (ř. 5693) po přesných dvojicích. Každý zaměstnanec proto dostal vlastní
   `<tbody>` (svůj řádek + řádky poměrů) a střídají se celé skupiny. Třída `.zebra-pary`
   je z tabulky v HTML odebraná.
   Specificita (1,1,2) přebíjí systémovou zebru `.asset-table tbody tr:nth-child(odd)`
   (ř. 1782, (0,1,3)) i `.asset-table.rows-compact` — bez toho by se pruhovaly dvě zebry
   přes sebe. */
#tabulka-zamestnanci > tbody:nth-of-type(odd) > tr { background-color: var(--darker-table-line); }
#tabulka-zamestnanci > tbody:nth-of-type(even) > tr { background-color: transparent; }

/* Řádky rozpisu poměrů mají světlé pozadí bez ohledu na paritu tbody — je to tatáž
   barva, kterou jim dřív dávala `.pozadi-background` na buňkách vnořené tabulky
   (`--background-color`, ř. 5146), takže rozpis vypadá stejně jako před přestavbou.
   `.asset-table` je v selektoru kvůli specificitě: (1,2,2) proti zebře výše (1,1,2).
   Bez toho by byly obě na (1,1,2) a rozhodovalo by pořadí v souboru — přesně past
   [[cascade-order-stejna-specificita]]. */
#tabulka-zamestnanci.asset-table > tbody > tr.radek-pomer { background-color: var(--background-color); }

/* Spodní hranu rozbaleného rozpisu uzavírá stín, aby skupina poměrů opticky nesplynula
   s dalším zaměstnancem pod ní. Dřív ho rozpis měl „zadarmo": byl to vnořený
   `.asset-table.rows-compact`, a ten nese `box-shadow` kolem dokola (ř. 5610).
   `box-shadow` tady ale použít nejde: tabulka má `border-collapse: collapse` (ř. 220)
   a při něm Blink stín na `<tr>` ani na `<td>` nevykreslí — ověřeno, computed hodnota
   sedí, v pixelech nulová změna. Kreslí se proto pruhem přes `::after`; `.asset-table td`
   už má `position: relative` a `overflow: visible` (ř. 228), takže stačí ho zavěsit.
   Hodnota odpovídá stínu tabulky: `0 0 10px rgba(37,34,35,0.08)` má na hraně poloviční
   krytí (naměřeno #FFF9FB → #F7F1F3, tj. ~0,04) a doběhne na nulu po 10 px.
   `:last-child` sedí i u zaměstnance s jediným poměrem (poslední prvek `<tbody>`;
   komentář `/SKOLSTVI` za ním je uzel typu comment a `:last-child` neruší).
   Ve sbaleném stavu se nekreslí nic — `[hidden]` je `display: none` (ř. 155).
   `:not(:last-of-type)` na tbody: pod posledním zaměstnancem už žádný další není
   a spodní hranu tam kreslí stín tabulky. Bez té podmínky se oba stíny sečtou
   (naměřeno #EFE9EB proti #F7F1F3 u ostatních skupin) a spodek tabulky ztmavne. */
#tabulka-zamestnanci.asset-table > tbody:not(:last-of-type) > tr.radek-pomer:last-child > td::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(37, 34, 35, 0.04), rgba(37, 34, 35, 0));
}

/* Hover řádku zaměstnance. Systémový `.asset-table tbody tr.radek-rozbalovaci:hover`
   (ř. 5702) má (0,3,2) a proti zebře výše by prohrál — dorovnává se stejným scopem,
   barva i chování zůstávají systémové. Řádky poměrů hover nemají (nejsou klikací).
   Modrého akcentu `.je-rozbaleny` (ř. 8634) se to netýká: ten je `box-shadow`
   na první buňce řádku zaměstnance, ne pozadí řádku. */
#tabulka-zamestnanci.asset-table > tbody > tr.radek-rozbalovaci:hover { background-color: var(--light-primary); }

/* ══ Výška topheaderu 128 px (autorizace uživatele 2026-09-08, § 4.34) ══ */
/* Figma má hlavičku 128 px, implementace 112 — ověřily nezávisle tři větve review
   na docházce, přehledu zaměstnanců i přidat zaměstnance, jde tedy o sdílený shell.
   Zapsáno jako přírůstek se stejnou specificitou (0,1,0,0) jako pravidlo na ř. 719;
   vyhrává pozdějším pořadím v kaskádě, existující pravidlo zůstává nedotčené.
   Rozložení 16/18 px je zachované v poměru: +8 px nahoru, +8 px dolů. */
#top-header { padding-top: 24px; padding-bottom: 26px; }

/* ══════════════════════════════════════════════════════════════════════════
   ZAMĚSTNANECKÝ SHELL PERSONALISTIKY
   Autorizace uživatele 2026-09-08 — [[CSS-autorizace]] § 4.34, bod 3
   („nové třídy pro zaměstnanecký shell"). Zásah je čistý přírůstek na konec
   souboru; žádné existující pravidlo se nemění.
   ══════════════════════════════════════════════════════════════════════════ */

/* Tmavý pruh, který v zaměstnaneckém pohledu nahrazuje sidebar i topheader.
   Figma rám „sidemenu mesta" 21593:175651: 1360×72, výplň #182F66
   = --primary-color; logo + jméno vycentrované (změřeno 601–835, střed 718,5). */
.zam-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    flex-shrink: 0;
    background-color: var(--primary-color);
    color: var(--background-color);
}

/* Bez sidebaru chybí boční odsazení, které v admin shellu drží sám sidebar.
   Figma: šedá plocha 40–1399, karty od 80, první tab 40 px pod pruhem.
   Scopuje se přes #content — samotná třída (0,1,0) by na #content (1,0,0)
   nestačila. Spodní padding 320px z ř. 1155 zůstává (rezerva na dropdowny). */
#content.zam-obsah {
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
}


/* Docházka zaměstnance: pevné šířky sloupců. Bez nich `table-layout: auto`
   rozdělí místo podle obsahu — dvojice polí („Pracovní doba", „Čas absence")
   si vezmou 244 px a „Důvod absence" zbude 169, zatímco Figma je má stejné.
   Poměry jsou z rámu 21593:175161 (hranice sloupců 112/180/395/610/825/1040/1223/1345 —
   180 a 1223 jsou změřené `.oddelovac` linky),
   přepočtené na rozpočet 1024 px = vnitřní šířka `.table-container`.
   Scopování `#id.sloupce-auto` dá (1,2,1) a přebije `#content .sloupce-auto th`
   (ř. 6919, (1,1,1)) nezávisle na pořadí v souboru. */
#zam-doch-table.sloupce-auto th:nth-child(1) { width: 51px; }
#zam-doch-table.sloupce-auto th:nth-child(2) { width: 163px; }
#zam-doch-table.sloupce-auto th:nth-child(3) { width: 89px; }
#zam-doch-table.sloupce-auto th:nth-child(4) { width: 163px; }
#zam-doch-table.sloupce-auto th:nth-child(5) { width: 163px; }
#zam-doch-table.sloupce-auto th:nth-child(6) { width: 163px; }
#zam-doch-table.sloupce-auto th:nth-child(7) { width: 139px; }
#zam-doch-table.sloupce-auto th:nth-child(8) { width: 93px; }

/* ══ Šířky sloupců tabulky žádostí zaměstnance (autorizace § 4.34, stejný důvod) ══ */
/* Bez pevných šířek se sloupce roztáhly (naměřeno 96/268/238/268/221/0/109 na 1440)
   a tabulka přetekla stejně jako #doch-table. Hodnoty jsou přepočet návrhových
   proporcí z „vykaz x zadosti zamestnanec.png" (vnitřní šířka 1250) na rozpočet 1024.
   Volitelný sloupec 6 se do součtu nepočítá — ve výchozím stavu je skrytý. */
#zam-zadosti-table.sloupce-auto th:nth-child(1) { width: 55px; }
#zam-zadosti-table.sloupce-auto th:nth-child(2) { width: 125px; }
#zam-zadosti-table.sloupce-auto th:nth-child(3) { width: 114px; }
#zam-zadosti-table.sloupce-auto th:nth-child(4) { width: 131px; }
#zam-zadosti-table.sloupce-auto th:nth-child(5) { width: 517px; }
#zam-zadosti-table.sloupce-auto th:nth-child(6) { width: 120px; }
#zam-zadosti-table.sloupce-auto th:nth-child(7) { width: 82px; }

/* ══ Chybový rámeček pole ve formulářové kartě (autorizace § 4.34, chybový stav žádosti) ══ */
/* `#karta-form-dokumentace input, … select { border-color: var(--light-grey) }` (ř. 5833) má
   specificitu (1,0,1) a přebije každou utilitu — `.tb-red` na poli proto nic neudělalo.
   Scopováno stejně, aby šlo o dorovnání, ne o zvyšování specificity utility. */
#karta-form-dokumentace .tb-red { border-color: var(--red); }

/* ══ Přepínač Ano/Ne: text řezem Medium (připomínka Lucky č. 3, 2026-09-09) ══ */
/* Nezaškrtnutá volba dědila 400, zaškrtnutá měla 600 (ř. 8604). Obě mají mít 500.
   Nešlo to třídou v HTML — `.seg-switch input:checked + span` (0,3,1) přebije `.medium`. */
.seg-switch span,
.seg-switch input:checked + span { font-weight: var(--font-weight-medium); }

/* ══ Docházka: proužek stavu 3 px + aktivní stav (připomínka Lucky, 2026-09-10) ══ */
/* Pravidla na ř. 4897–4898 kreslí proužek 4 px a leží v chráněné projektové části,
   proto se přepisují přírůstkem se shodnou specificitou — vyhrává pozdější pořadí.
   Systémový modrý akcent `.asset-table … .je-rozbaleny` (0,3,1) na #doch-table nikdy
   nedosáhl, protože ho přebíjí `#doch-table tbody tr td:first-child` (1,0,3). */
#doch-table tbody tr td:first-child { box-shadow: inset 3px 0 0 transparent; }
#doch-table tbody tr.doch-neuplny td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
#doch-table tbody tr.radek-rozbalovaci.je-rozbaleny > td:first-child {
    box-shadow: inset 3px 0 0 var(--primary-hover);
}

/* ══ Docházka: výška řádku podle Figmy (připomínka Lucky — „řádek je moc stlačený") ══ */
/* `.rows-compact` má 5px svislý padding a je systémová napříč projektem — § 4.34 ji
   zakazuje měnit. Scopováno proto na #doch-table, stejným vzorem jako #panel-vozidla
   (ř. 6913). Naměřeno: 12 px dá třířádkovému řádku přesně figmových 92 px.
   Druhý selektor `#doch-table .asset-table.rows-compact …` obsluhoval vnořenou
   tabulku rozpisu, ta už neexistuje — řádky poměrů jsou dnes běžné `> tbody > tr`
   hlavní tabulky a trefí je selektor první. */
#doch-table.rows-compact > tbody > tr > td {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* ══ Detail zaměstnance — záložka Docházka (připomínky Lucky, 2026-09-10) ══ */
/* Šedé mají být jen víkendové řádky. Podbarvuje je systémová zebra
   `.asset-table tbody tr:nth-child(odd)` (ř. 1782, specificita 0-1-3), kterou
   utilita `.darker-tl` (0-1-0) nepřebije. `:not(.darker-tl)` je povinné — bez něj
   by pravidlo zrušilo i podbarvení víkendu. */
#tabulka-dochazka tbody tr:nth-child(odd):not(.darker-tl) { background-color: transparent; }

/* Sloupec „Odpracováno" oddělený mezerou 6 px. `border-collapse: collapse` z něj
   udělá jednu linku v barvě pozadí karty, tedy opticky mezeru — utilita na 6px odsazení
   v projektu není. */
#tabulka-dochazka th:last-child,
#tabulka-dochazka td:last-child { border-left: 6px solid var(--background-color); }

/* Pole hromadné akce mají držet shodnou šířku. `1fr` je zkratka za `minmax(auto, 1fr)`
   a dvojice `input[type="date"]` má min-content ~300 px, takže sloupec Datum vyjel
   dvojnásobný. `minmax(0, 1fr)` to sráží na rovný díl. */
#doch-hromadna .filter-panel { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Kategorie „Nárokové složky" má podle Figmy #7785CF, ne černou. Utilita chyběla,
   doplněna do stejné sady jako .text-red / .text-primary-hover (ř. 5184+). */
.text-levander { color: var(--levander); }

/* ══ Zaměstnanecká docházka — sjednocení s detailem (připomínky Lucky, 2026-09-10) ══ */
/* Šedé jen víkendové řádky — stejný důvod i zápis jako u #tabulka-dochazka výše. */
#zam-doch-table tbody tr:nth-child(odd):not(.darker-tl) { background-color: transparent; }

/* Mezera 6 px před sloupcem „Odpracováno". */
#zam-doch-table th:last-child,
#zam-doch-table td:last-child { border-left: 6px solid var(--background-color); }

/* Dvojice `input[type="date"]` v panelu hromadné akce přetékala do sousedního sloupce:
   nativní date má min-content ~150 px a `minmax(0, 1fr)` ho sám neuřízne. Pravidlo je
   scopované na #doch-hromadna, které mají OBĚ stránky — opravuje se tím detail
   zaměstnance i zaměstnanecká docházka naráz. */
#doch-hromadna input[type="date"] { min-width: 0; }

/* ══ Detail zaměstnance — tabulka žádostí (elektronické schvalování) ══ */
/* `#content .sloupce-auto th { width: auto }` (ř. 6919) má (1,1,1); scope
   `#tabulka-elf.sloupce-auto` dá (1,2,1) a přebije ji. Sloupec Typ žádosti zůstává
   pružný, `nth-child` počítá i skrytý sloupec, takže přepínání šířky nerozhodí. */
#tabulka-elf.sloupce-auto th:nth-child(1) { width: 50px; }
#tabulka-elf.sloupce-auto th:nth-child(2) { width: 152px; }
#tabulka-elf.sloupce-auto th:nth-child(3) { width: 140px; }
#tabulka-elf.sloupce-auto th:nth-child(4) { width: 162px; }
#tabulka-elf.sloupce-auto th:nth-child(5) { width: auto; }
#tabulka-elf.sloupce-auto th:nth-child(6) { width: 150px; }
#tabulka-elf.sloupce-auto th:nth-child(7) { width: 56px; }

/* Mezera lišta hromadných akcí ↔ tabulka. Pravidlo na ř. 6543 je scopované na
   #bulk-toolbar, takže lišty s vlastním id (#bulk-sverene, #bulk-dokumenty,
   #bulk-finance, #bulk-elf) z něj nedostanou nic a držely 32 px místo 16. */
#content .table-container > .js-bulk-toolbar:not([hidden]) + .scroll-table { margin-top: -16px; }

/* ══ Docházka: sloupcová parita hlavní tabulky a rozpisu poměrů (2026-09-10, § 4.36) ══ */
/* Zadání: „ať sedí ty sloupce, k čemu patří". V docházce jsou v buňkách čísla (hodiny,
   částky, procenta), takže posunutý sloupec nejde od správné hodnoty rozeznat.
   Rozpis byl vnořená `<table>` uvnitř `td[colspan="9"]`; dvě tabulky si šířky počítají
   zvlášť a s `table-layout: auto` se netrefí (naměřeno na 1920 odchylka až 157 px).
   Řádky poměrů jsou proto dnes běžné `<tr>` hlavní tabulky — lícování vzniká
   automaticky, protože jde o tytéž sloupce, a šířky dál drží
   `#doch-table.sloupce-auto th:nth-child(N)` (ř. 8695). Stejné řešení jako
   u #tabulka-zamestnanci (ř. 8710). */

/* ══ Zebra po zaměstnancích ══ */
/* Zaměstnanec má proměnný počet poměrů (3, 3 a 0 v prototypu), takže žádná zebra
   počítaná přes `:nth-child` sedět nemůže — `.zebra-even` (ř. 5682) barví po jednom
   řádku, `.zebra-pary` (ř. 5693) po přesných dvojicích. Každý zaměstnanec proto dostal
   vlastní `<tbody>` (svůj řádek + řádky poměrů) a střídají se celé skupiny; třída
   `.zebra-pary` je z tabulky v HTML odebraná.
   Specificita (1,1,2) přebíjí systémovou zebru `.asset-table tbody tr:nth-child(odd)`
   (ř. 1782, (0,2,2)) — bez toho by se pruhovaly dvě zebry přes sebe. */
#doch-table > tbody:nth-of-type(odd) > tr { background-color: var(--darker-table-line); }
#doch-table > tbody:nth-of-type(even) > tr { background-color: transparent; }

/* Řádky rozpisu mají světlé pozadí bez ohledu na paritu tbody — je to tatáž barva,
   kterou jim dřív dávala `.pozadi-background` na buňkách vnořené tabulky
   (`--background-color`, ř. 5146), takže rozpis vypadá stejně jako před přestavbou.
   `.asset-table` je v selektoru kvůli specificitě: (1,2,2) proti zebře výše (1,1,2).
   Bez toho by byly obě na (1,1,2) a rozhodovalo by pořadí v souboru — přesně past
   [[cascade-order-stejna-specificita]]. */
#doch-table.asset-table > tbody > tr.radek-pomer { background-color: var(--background-color); }

/* Spodní hranu rozbaleného rozpisu uzavírá stín, aby skupina poměrů opticky nesplynula
   s dalším zaměstnancem pod ní. Dřív ho rozpis měl „zadarmo": byl to vnořený
   `.asset-table.rows-compact` a ten nese `box-shadow` kolem dokola (ř. 5608).
   `box-shadow` tady ale použít nejde: tabulka má `border-collapse: collapse` (ř. 1761)
   a při něm Blink stín na `<tr>` ani na `<td>` nevykreslí. Kreslí se proto pruhem přes
   `::after`; `.asset-table td` už má `position: relative` a `overflow: visible`
   (ř. 1769), takže stačí ho zavěsit. Hodnota odpovídá stínu tabulky:
   `0 0 10px rgba(37,34,35,0.08)` má na hraně poloviční krytí a doběhne na nulu po 10 px.
   Ve sbaleném stavu se nekreslí nic — `[hidden]` je `display: none`.
   `:not(:last-of-type)` na tbody: pod posledním zaměstnancem (Felenda) už žádný další
   není a spodní hranu tam kreslí stín tabulky; bez té podmínky by se oba stíny sečetly
   a spodek tabulky ztmavl. */
#doch-table.asset-table > tbody:not(:last-of-type) > tr.radek-pomer:last-child > td::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(37, 34, 35, 0.04), rgba(37, 34, 35, 0));
}

/* Hover řádku zaměstnance. Systémový `.asset-table tbody tr.radek-rozbalovaci:hover`
   (ř. 5702) má (0,3,2) a proti zebře výše by prohrál — dorovnává se stejným scopem,
   barva i chování zůstávají systémové. Řádky poměrů hover nemají (nejsou klikací).
   Oranžového proužku `.doch-neuplny` ani modrého akcentu `.je-rozbaleny` (ř. 8891–8895)
   se to netýká: obojí je `box-shadow` na první buňce řádku, ne pozadí řádku. */
#doch-table.asset-table > tbody > tr.radek-rozbalovaci:hover { background-color: var(--light-primary); }

/* ══ Docházka: oddělovače mezi řádky rozpisu (připomínka zadavatele, 2026-09-10) ══ */
/* Deep review 2026-09-08 zapsalo jako rozdíl proti Figmě, že rozpis nemá vodorovné
   oddělovače řádků; tehdy na to nebyla autorizace, § 4.36 ji dává.
   Sousedský `+` místo `:last-child`: linka tak z principu vzniká jen MEZI dvěma
   poměry — nikdy nad prvním (tam navazuje řádek zaměstnance) ani pod posledním,
   kde skupinu uzavírá stín z pravidla výše a dvě čáry přes sebe by se bily.
   `:last-child` by to svedlo taky, ale záviselo by na tom, že za posledním řádkem
   nepřibude další element (dnes tam stojí jen komentář /SKOLSTVI).
   Barva `--light-grey` je tatáž, kterou mají `.divider` a `.ver-divider` (ř. 642, 648).
   `border-collapse: collapse` (ř. 1761) rámečky slévá, ale `border-top` na `<tr>`
   se v něm vykreslí — `.asset-table td` žádný vlastní `border` nemá, takže není
   s čím soupeřit (naměřeno 1 px přes celou šířku tabulky).
   Ve sbaleném stavu se nekreslí nic — `[hidden]` na řádku je `display: none`. */
#doch-table.asset-table > tbody > tr.radek-pomer + tr.radek-pomer {
    border-top: 1px solid var(--light-grey);
}

/* Oddělovač mezi řádky poměru i v přehledu zaměstnanců — zrcadlí pravidlo docházky.
   Sousedský `+` vyrobí linku jen MEZI dvěma poměry: nikdy nad prvním (tam navazuje
   řádek zaměstnance) ani pod posledním, kde skupinu uzavírá stín. */
#tabulka-zamestnanci.asset-table > tbody > tr.radek-pomer + tr.radek-pomer {
    border-top: 1px solid var(--light-grey);
}

/* ══════════════════════════════════════════════════════════════════════
   § 4.37  Sekční přepínač v detailu zaměstnance
   Autorizace uživatele 2026-09-10 („máme všechny taby kompletně špatně").
   Podrobnosti → Special1Vault/01-Pravidla/CSS-autorizace.md
   ══════════════════════════════════════════════════════════════════════ */

/* Figma má odstíny v jiném pořadí, než dává sdílené pravidlo na ř. 6602
   (to od páté záložky zesvětluje). Tady je to naopak: první čtyři --primary-hover,
   pátá až sedmá --primary-color a „Úkoly" nejsvětlejší --primary-open-hover.
   Proto má lišta vlastní id — sdílené `#detail-sekce-taby` (Majetek, Přehled
   objektů) zůstává nedotčené. */
#zam-sekce-taby .detail-tab:not(.is-active):not(:hover) {
    background-color: var(--primary-hover);
}

#zam-sekce-taby .detail-tab:not(.is-active):not(:hover):nth-child(n+5) {
    background-color: var(--primary-color);
}

/* Stejná specificita (1,4,0) jako pravidlo nad ním — vyhrává pořadím v souboru. */
#zam-sekce-taby .detail-tab.detail-tab-svetly:not(.is-active):not(:hover) {
    background-color: var(--primary-open-hover);
}

/* Aktivní záložka podle Figmy dosedá na kartu pod sebou (naměřeno 0 px).
   Rodičem je `column g24px`, jednu mezeru z flex gapu nejde vypnout — ruší ji
   proto záporný margin na liště. Skryté panely mají [hidden] = display:none,
   takže se do rozestupů nepočítají a odsazení sedí u každé záložky. */
#zam-sekce-taby { margin-bottom: -24px; }


/* Figma auto-layout těchhle karet: padding 24 do všech stran a gap 24.
   Systémové `.tab-panel .table-container` (ř. 2553) má 24/40/32 a gap 32 — je psané
   pro detail majetku, proto se přepisuje jen tady.
   Zaoblení je jen dole (zadání 2026-09-10: „vršek hranatý, pak dole zaoblené").
   Ověřeno i v návrhu: druhá karta v panelu má nahoře plnou šířku hned prvním
   řádkem, tedy hranatý roh — ne jen ta, na které sedí záložka. */
#zam-sekce-taby ~ .tab-panel .table-container {
    gap: 24px;
    padding: 24px;
    border-radius: 0 0 8px 8px;
}

/* Karta filtru v Docházce drží tentýž padding i zaoblení jako ostatní karty. */
#stab-dochazka > .detail-karta {
    padding: 24px;
    border-radius: 0 0 8px 8px;
}

/* Karta, na které záložka sedí, musí mít hranatý vršek i tehdy, když to není
   .table-container — v Informacích je první karta .detail-karta se zaoblením 8 px
   dokola. Stojí AŽ ZA pravidly výše: mají stejnou specificitu (1,2,0), takže
   rozhoduje pořadí. Druhá a další .detail-karta zůstávají zaoblené dokola,
   jak je má návrh. */
#zam-sekce-taby ~ .tab-panel > :first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   § 4.38  Aktivní stav přepínacích tlačítek nad tabulkou
   Autorizace uživatele 2026-09-10 („active mají tyto tlačítka tento stav").
   ══════════════════════════════════════════════════════════════════════ */

/* „Hromadná akce" a „Přehled" otevírají panel a po dobu, co je otevřený,
   mají podle Figmy plnou výplň --primary-open-hover s bílým textem.
   Stav se čte z aria-expanded, takže na to není potřeba zvláštní třída
   ani zásah do JS. Specificita (0,3,0) přebíjí .secondary-btn:hover (0,2,0),
   proto výplň nezmizí, když nad tlačítkem stojí myš. */
.btn.secondary-btn[aria-expanded="true"] {
    background-color: var(--primary-open-hover);
    border-color: var(--primary-open-hover);
    color: var(--background-color);
}

/* ══════════════════════════════════════════════════════════════════════
   § 4.39  Dlaždice panelu „Přehled" v docházce
   Autorizace uživatele 2026-09-10 („přehled máme špatně teďka").
   ══════════════════════════════════════════════════════════════════════ */

/* Figma: čtyři dlaždice s vlastním 1px rámečkem --light-grey a mezerou 12 px
   (odečteno z návrhu, měřítko dané šířkou karty). .dashboard-card má okraj
   2px průhledný — na bílé kartě by dlaždice splynuly s podkladem. */
#doch-prehled { gap: 12px; }

#doch-prehled .dashboard-card { border: 1px solid var(--light-grey); }

/* ══════════════════════════════════════════════════════════════════════
   § 4.40  Informační lišta — sytější oranžová a padding 12
   Autorizace uživatele 2026-09-10 („tento bar v hromadná akce je špatně").
   ══════════════════════════════════════════════════════════════════════ */

/* Návrh má výplň --m-orange (#FFE6CC), ne bledou --light-orange — odečteno ze
   snímku (#FBE7CF po převodu z P3). Padding je 12 px na všechny strany
   (ikona 12 px od levé hrany, 12 px nad textovým řádkem).
   Přepis místo editace ř. 412/445 — CSS se mění výhradně přírůstkem, aby
   `head -8674 | md5` držel projektovou baseline. */
.information { padding: 12px; }

.information-orange { background-color: var(--m-orange); }

/* ══════════════════════════════════════════════════════════════════════
   § 4.41  Karty v záložce Informace — výška 76 px
   Autorizace uživatele 2026-09-10 („ve Figmě jsou široké 76.11").
   ══════════════════════════════════════════════════════════════════════ */

/* Figma: sbalená karta je 76 px vysoká a má 24 px po stranách (naměřeno i v návrhu
   — všechny čtyři karty 122 px při měřítku snímku, tedy shodně 76).
   Výšku drží min-height se svislým centrováním, ne padding: řádek s pilulkami je
   o 3 px vyšší než ten bez nich a karty by si přestaly odpovídat. */
/* Výšku 76 px nese ZÁHLAVÍ karty, ne karta sama. Kdyby ji držela karta přes
   min-height, po rozbalení by min-height přestala platit (obsah je vyšší),
   záhlaví by se posunulo nahoru a nadpis by při otvírání poskočil.
   Takhle má pruh se záhlavím 76 px pořád stejně a nadpis se nehne.
   Svislé centrování uvnitř pruhu má systémové pravidlo na ř. 6631. */
#stab-informace .detail-karta.js-ia-accordion {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 0;
}

#stab-informace .detail-karta.js-ia-accordion > .space-between {
    min-height: 76px;
}

#stab-informace .detail-karta.js-ia-accordion:not(.active) {
    padding-bottom: 0;
}

/* Mezi dvěma poměry má návrh 16 px. Od 2026-09-10 to nese blok `.column.g16px`
   kolem nadpisu skupiny a jejích karet (§ 4.45 bod 6), takže systémové pravidlo
   (ř. 6633) se tu jen ruší — jinak by z 16 px udělalo 8. */
#stab-informace .detail-karta.js-ia-accordion + .detail-karta.js-ia-accordion {
    margin-top: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   § 4.42  Rozpis v rozbalených kartách záložky Informace
   Autorizace uživatele 2026-09-10 („udělej ty rozbalené karty").
   Předlohy: design/personalistika/{otevřený osobní dotazník, HPP Učitel,
   DPP, keramika}.png — exporty 1:1, měřeno přímo v pixelech.
   ══════════════════════════════════════════════════════════════════════ */

/* Dva rovnocenné sloupce, mezi nimi 32 px (naměřeno: sloupec 326 px,
   mezera 33). `align-items: start` — sloupce jsou nezávislé stohy sekcí
   a nesmí se roztahovat na výšku toho vyššího. */
.rozpis-mrizka {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
    align-items: start;
}

.rozpis-sloupec {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rozpis-sekce {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Záhlaví sekce: 14/20 semibold a pod ním linka přes šířku sloupce.
   `display: flex` je tu kvůli barevné odrážce — ta se dělá systémovou
   dvojicí .circle.circle-sm, která počítá s flexem a mezerou 8 px. */
.rozpis-nadpis {
    display: flex;
    align-items: center;
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--darker-table-line);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--dark-grey);
}

/* Modrý podnadpis uvnitř sekce (adresa, dítě, důchod, zaměstnavatel). */
.rozpis-podnadpis {
    font-weight: var(--font-weight-medium);
    color: var(--primary-hover);
}

/* Řádek popisek / hodnota / akce. Sloupec popisku má 169 px (naměřeno:
   popisek začíná na 25, hodnota na 194), padding drží hodnotu přesně na
   169 i u dvouřádkových popisků. Třetí sloupec je `auto`, takže u řádků
   bez akce nezabere nic. */
.rozpis-radek {
    display: grid;
    grid-template-columns: 169px minmax(0, 1fr) auto;
    align-items: start;
}

.rozpis-radek > :first-child { padding-right: 12px; }

.rozpis-akce { justify-self: end; }

/* Tenká linka uvnitř sekce i mezi skupinami sekcí. Světlejší než .divider
   (--light-grey) — návrh má #EDECF1, čemuž odpovídá --darker-table-line. */
.rozpis-delic {
    min-height: 1px;
    height: 1px;
    background-color: var(--darker-table-line);
}

/* Rozbalovač „Předchozí roky". Rámeček obepíná záhlaví i rozbalené řádky —
   návrh je má v jednom boxu, ne jen samotné záhlaví. */
.rozpis-rozbalovac-box {
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    padding: 0 8px;
}

/* Spodní vzduch patří až k rozbalenému obsahu. Kdyby ho nesl box, byl by
   padding ve sbaleném stavu nesouměrný a nadpis by seděl nad středem. */
.rozpis-rozbalovac-box .js-ia-accordion-body { padding-bottom: 8px; }

.rozpis-rozbalovac {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 28px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

/* Uvnitř boxu drží hodnoty stejnou svislici jako řádky nad ním:
   169 − 8 px padding − 1 px rámeček. */
.rozpis-rozbalovac-box .rozpis-radek {
    grid-template-columns: 160px minmax(0, 1fr) auto;
}

/* Odrážka #4665B2 u „Zkušební doby". Pojmenování drží řadu barevných teček
   (.sky-blue, .indigo, .levander) z ř. 5085 a dál. */
.open-blue::before, .pozadi-open-blue { background-color: var(--primary-open-hover); }

/* Systémové `.js-ia-accordion.active .milnik-arrow svg` (ř. 3515) je DESCENDANT
   selektor — rozbalená karta by otočila i šipku vnořeného rozbalovače
   „Předchozí roky". Stejná past je popsaná u #karta-form-dokumentace (ř. 5987).
   První pravidlo ji vrací do klidu (0,3,1 = shoda se systémovým, vyhrává
   pořadím), druhé ji otáčí až podle vlastního stavu rozbalovače. */
.rozpis-rozbalovac.js-ia-accordion-toggle .milnik-arrow svg { transform: none; }

.js-ia-accordion.active > .rozpis-rozbalovac .milnik-arrow svg { transform: rotate(180deg); }

/* ══════════════════════════════════════════════════════════════════════
   § 4.43  Odznak stavu bez rámečku
   Autorizace uživatele 2026-09-10 („toto je nový pill, takže nemá ten outline").
   ══════════════════════════════════════════════════════════════════════ */

/* Figma chce plnou pilulku bez obrysu: výplň --light-green / --light-orange,
   text --tm-green / --tm-orange, 13/20 medium, výška 28 px (4 + 20 + 4).
   V projektu ani ve Vojtově CSS elektronického schvalování nic takového není —
   `.alert.alert-green` má rámeček 1,5 px a světlejší zeleň, proto nová třída.
   Naměřeno ze snímků návrhu (#F6FDF3 / #FEF8F2 po převodu z P3). */
.odznak {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    font-weight: var(--font-weight-medium);
}

.odznak-zeleny {
    background-color: var(--light-green);
    color: var(--tm-green);
}

.odznak-oranzovy {
    background-color: var(--light-orange);
    color: var(--tm-orange);
}

/* ══════════════════════════════════════════════════════════════════════
   § 4.44  Zelená radia v kartě exportu
   Autorizace uživatele 2026-09-10 („barva toho toggles je špatně, má být ta zelená").
   ══════════════════════════════════════════════════════════════════════ */

/* Tatáž kresba jako u #karta-form-dokumentace (ř. 5896) — globální pravidlo pro
   inputy jinak radiu vnutí min-height 35px a padding. Rozepsané znovu místo
   rozšíření původního selektoru: CSS se mění výhradně přírůstkem, aby
   `head -8674 | md5` držel projektovou baseline. */
#karta-export input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--grey);
    border-radius: 50%;
}

/* Po zaškrtnutí přibude jen zelený kotouč uvnitř — rámeček zůstává šedý. */
#karta-export input[type="radio"]:checked {
    background-color: var(--green);
    box-shadow: inset 0 0 0 2px var(--background-color);
}

/* ══════════════════════════════════════════════════════════════════════
   § 4.45  Připomínky Lucky 2026-09-10 (druhá vlna)
   Autorizace uživatele 2026-09-10.
   ══════════════════════════════════════════════════════════════════════ */

/* 1) Řez Medium nepatří jen na Ano/Ne, ale i na popisek přepínače
   („Důchod", „Nárok na daňové zvýhodnění") — Figma text/medium 14/20. */
.js-prepinac-popisek { font-weight: var(--font-weight-medium); }

/* 9) `.souhrn-box` má vlastní gap 8px a stojí v souboru za `.g16px` (ř. 5062),
   takže ho při shodné specificitě (0,1,0) přebíjí. Dvojtřídní zápis (0,2,0)
   vrací utilitě slovo. */
.souhrn-box.g16px { gap: 16px; }

/* 7) „Nahrát" a „Doloženo" jsou odkazy — na dokument, který se má doložit.
   Podtržení až na hover, barvu si nese odkaz sám (.text-orange / .text-primary). */
.rozpis-akce { text-decoration: none; }

a.rozpis-akce:hover { text-decoration: underline; }

/* 10) Docházka se vyplňuje po hodinách, proto `type="time"` místo textu
   s placeholderem „hod". Projekt ale globálně schovává nativní UI hodin
   (ř. 4341–4345: `::-webkit-calendar-picker-indicator { display: none }`
   a `::-webkit-datetime-edit { color: transparent }`), takže by pole zůstala
   úplně prázdná — bez ikony i bez `--:--`. V docházkových mřížkách je proto
   vracíme zpět; jinde v projektu zůstává skryté chování beze změny. */
#tabulka-dochazka input[type="time"]::-webkit-datetime-edit,
#zam-doch-table input[type="time"]::-webkit-datetime-edit,
#doch-hromadna input[type="time"]::-webkit-datetime-edit {
    color: var(--placeholder-color);
}

#tabulka-dochazka input[type="time"]::-webkit-calendar-picker-indicator,
#zam-doch-table input[type="time"]::-webkit-calendar-picker-indicator,
#doch-hromadna input[type="time"]::-webkit-calendar-picker-indicator {
    display: block;
}

/* Vyplněný čas je čitelný text, ne placeholder. */
#tabulka-dochazka input[type="time"]:focus::-webkit-datetime-edit,
#zam-doch-table input[type="time"]:focus::-webkit-datetime-edit,
#doch-hromadna input[type="time"]:focus::-webkit-datetime-edit {
    color: var(--text-color);
}

/* Nativní pole času je o ikonu hodin širší než bývalý text — se systémovým
   paddingem 12px přeteče řádek docházky o 11px a ořízne Pauzu i Odpracováno.
   Užší vnitřní odsazení vrátí 32px na řádek, což bohatě stačí. */
#tabulka-dochazka input[type="time"],
#zam-doch-table input[type="time"] {
    padding-left: 8px;
    padding-right: 8px;
}

/* Pauza je „0:30" — atribut `size` tabulka s automatickým rozvržením ohýbá
   podle zbylého místa, proto pevná spodní hranice, aby se hodnota neořízla. */
#tabulka-dochazka input[aria-label^="Pauza"],
#zam-doch-table input[aria-label^="Pauza"] {
    min-width: 58px;
}

/* 8) Responzivita rozpisu. `1fr` je zkratka za `minmax(auto, 1fr)`, takže se
   sloupec nesmrskne pod šířku obsahu a mřížka na úzkém okně vyteče z karty
   (naměřeno 550px obsahu v 390px okně). `minmax(0, 1fr)` to dovolí. */
.rozpis-mrizka {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Pod 900px se dvousloupec rozpisu skládá pod sebe — dvě kolonky popisek/hodnota
   vedle sebe už nedávají čitelnou šířku. */
@media (max-width: 900px) {
    .rozpis-mrizka { grid-template-columns: minmax(0, 1fr); }
}

/* Na mobilu jde popisek nad hodnotu a akce („Nahrát") pod ni. */
@media (max-width: 560px) {
    .rozpis-radek { grid-template-columns: minmax(0, 1fr); }
    .rozpis-radek > :first-child { padding-right: 0; }
    .rozpis-akce { justify-self: start; }
    .rozpis-rozbalovac-box .rozpis-radek { grid-template-columns: minmax(0, 1fr); }
}

/* Formulářová mřížka má pevných 240px na sloupec (ř. 5854) — pod 832px se do
   řádku nevejdou ani dva, natož tři. Necháme je zalomit na plnou šířku. */
@media (max-width: 832px) {
    #karta-form-dokumentace .row-container { flex-wrap: wrap; }
    #karta-form-dokumentace .row-container > div { flex: 1 1 100%; }
}

/* Ukládací lišta drží tlačítka v jedné řadě; na mobilu se musí zalomit,
   jinak vyjedou z obrazovky. */
@media (max-width: 560px) {
    #ulozit-lista { flex-wrap: wrap; row-gap: 8px; }
    #ulozit-lista .center,
    #ulozit-lista .row-container { flex-wrap: wrap; row-gap: 8px; }
}

/* Drobečky drží řadu bez zalomení; delší cesta („… › Karel Starosta ›
   Upravit zaměstnance") pak na mobilu vytlačí stránku do vodorovného scrollu
   (naměřeno 479px obsahu v 390px okně). Pod 560px se proto zalomí. */
@media (max-width: 560px) {
    .breadcrumb { flex-wrap: wrap; row-gap: 4px; }

    /* Dvousloupcová mřížka karet (výběr typu žádosti, volby sloupců) se na
       mobilu skládá pod sebe — dvě karty vedle sebe se do řádku nevejdou. */
    .btns-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════
   § 4.46  Detail zaměstnance na plnou šířku
   Autorizace uživatele 2026-09-10 („ty detaily nejsou do celou šířku…
   klidně bych to dala na celou možnou šířku, 40px na okrajích jako u tabulek").
   ══════════════════════════════════════════════════════════════════════ */

/* Systémové `#content > section { max-width: 1025px; margin: 0 auto }` (ř. 6598)
   drží detaily Majetku i Přehledu objektů — proto se ruší jen tady, přes vlastní id.
   Do 1025px se tabulky v záložkách nevešly: schvalování s plnou sadou sloupců
   přetékalo o 288px a muselo rolovat. */
/* Zápis `#content > #detail-sekce` je nutný: systémové pravidlo má specificitu
   (1,0,1) kvůli selektoru elementu, samotné `#detail-sekce` (1,0,0) by prohrálo. */
#content > #detail-sekce {
    max-width: none;
    margin: 0;
    padding-left: 40px;
    padding-right: 40px;
}

/* Panel poznámek si drží návrhových 422px, zbytek řádku bere sloupec s kartami. */
#detail-sekce #detail-hlavni { flex: 1 1 0; }

/* Pole času se do pětiny řádku nevejdou. Nativní `input[type=time]` je s ikonou
   hodin široký ~95px, dvojice s oddělovačem potřebuje 240 — na 1440px měl sloupec
   169 a pole vytékalo z buňky o 44px. `auto-fit` řádek podle potřeby zalomí:
   1920 → pět sloupců jako v návrhu, 1440 → tři (pole 138px místo 97).
   Autorizace uživatele 2026-09-10 („u docházky v hromadných akcích se nevejde čas"). */
#doch-hromadna .filter-panel {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

#doch-hromadna input[type="time"] { min-width: 0; }

/* Karty výběru typu žádosti mají v návrhu hover (světlé pozadí, modrý rámeček)
   a ikona se přepne na plus — převzato z Vojtova `form_vyber_typu.html`
   (node 23228-130895). Scopováno na #karty-typu, aby ostatní .souhrn-box
   (souhrnné dlaždice) hover nedostaly.
   Autorizace uživatele 2026-09-10 („tady když najedeš na pole, nezobrazuje se hover"). */
#karty-typu > .souhrn-box {
    transition: background-color .2s ease, border-color .2s ease;
}

#karty-typu > .souhrn-box:hover {
    background-color: var(--light-primary);
    border-color: var(--primary-hover);
}

.typ-ikona-obal {
    display: inline-flex;
    flex: 0 0 40px;
}

.typ-ikona-hover { display: none; }

#karty-typu > .souhrn-box:hover .typ-ikona { display: none; }
#karty-typu > .souhrn-box:hover .typ-ikona-hover { display: block; }

#karta-form-dokumentace .tb-orange { border-color: var(--orange); }

.dod-mrizka,
.dod-mrizka-2 { align-items: flex-start; }