* {
    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;

    --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, 
input[type="file"]::-webkit-file-upload-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, input[type="file"]::-webkit-file-upload-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, input[type="file"]::-webkit-file-upload-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, input[type="file"]::-webkit-file-upload-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, 
input[type="file"]::-webkit-file-upload-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);
}

.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: 64px;
    position: static;
    flex: 0 0 256px;
    padding: 32px 0px 40px 0px;
    align-items: center;
}

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

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

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

.side-section svg{
    width: 22px;
    min-width: 22px;
    height: 22px;
}

#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;}

.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-color);
    font-weight: var(--font-weight-semibold);
}

.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;
}

#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 20px;
    display: flex;
}

/* Top Header Bar */
#top-header {
    display: flex;
    gap: 12px;
    border-bottom: 4px solid var(--primary-color);
    padding: 32px 0px 16px 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;
}

.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;
}

#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; }

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

.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); }

.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;
    padding: 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;
}

.card:hover { border-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, input[type="file"]::-webkit-file-upload-button  {
    justify-content: center;
    padding: 8px 24px;
    text-align: center;
    border: 2px solid var(--primary-color);
}

/* Small button modifier */
.btn-sm, input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button  {
    padding: 3px 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 {
    background-color: transparent;
    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: 2px 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: 2px 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, input[type="file"]::-webkit-file-upload-button
{ background-color: transparent; }

.secondary-btn:hover, input[type="file"]::file-selector-button:hover, input[type="file"]::-webkit-file-upload-button: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);
}

.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;
    padding: 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(--secondary-color);}
.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);
    background-color: var(--darker-table-line);
    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 { 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;
}

.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(--light-grey);
    box-shadow: 0 0px 12px 0px rgba(24, 47, 102, 0.1);
    transition: all 0.3s ease;
}

.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;
    --hour-h: 52px;

    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;
}

.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;
}

.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); }

.form-sekce {
    padding: 8px 16px;
    border: 2px 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; }

.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);}

.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); }

.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;
}

/* 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; 
}

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

/* padding, margin, gap... */
.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; }
.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; }

.g12px { gap: 12px;}

.g16px { gap: 16px; }

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

.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-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);}

@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;}
}

/* ======================================================
   Personalistika (větev personalistika-update) — dev styly
   chybí v designer style.zip; znovu připojeno, aby nezmizely
   při náhradě CSS (issue #767). Cílově patří do template <style>.
====================================================== */
/* 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:7; 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; }