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

@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-hover: #22428F;
    --secondary-color: #EFF0F5;
    --background-color: #FFF9FB;
    --text-color: #0D0D0D;
    --darker-table-line: #E7E8ED;
    --green: #32A053;
    --tm-green: #03862A;
    --light-green: #f4fdf2;
    --red: #C31616;
    --light-red: #fdefef;
    --yellow: #F2C14F;
    --yellow-circle: #F2C14F;
    --light-yellow: #fffcf3;
    --aqua: #0A938F;
    --light-aqua: #E8FCFD;
    --grey: #9CA3AF;
    --light-grey: #D1D5E0;
    --dark-grey: #1E1E1E;
    --placeholder-color: #70757c;
    --darker-grey: #E0E1E5;
    --orange: rgb(254, 150, 57);
    --tm-orange: #E46C00;
    --orange-light: rgb(255, 248, 241);
    --purple: #8e44ad;
    --light-purple: #fbf5fd;
    --medium-purple:#EDE2FF;
    --indigo: #6743DF;
    --modrofialova: #8767EF;
    --past-modrofialova: #AB92E0;
    --sky-blue: #30BCED;
    --dark-sky-blue: #279EC7;
    --light-sky-blue: #eaf9fe;
    --past-pink: #D99AC5;
    --tm-pink: #D76AB4;
    --levander: #7785CF;
    --light-levaner: #C6CDF3;

    --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-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, .switch, .dropdown-lg .calendar tbody tr, .size-base {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

h4, 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 
{ 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  {
    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, .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-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
{ background-color: var(--primary-hover); }

.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, .delete-btn:hover, .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
{ color: var(--background-color); }

.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, .delete-btn, .tertiary-btn, .event-date, .pagination button, .pagination .dots, .photo-container > div, .error-404 h1, .kontakt-card h3
{ 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
 { font-family: var(--font-family);}

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

.container { padding: 0px 40px; }

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

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

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

.alert-warning, .alert-yellow {
    background-color: var(--light-yellow);
    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(--orange-light);
}

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

.alert-blue { background-color: var(--light-primary); }
.alert-sky-blue {
    color: var(--dark-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); }
}

/* Spinner */
.spinner { 
    border: 4px solid transparent; /* Úplně neviditelný okraj */
    border-left-color: #182f66; /* Tmavě modrá pro točící se část */
    border-radius: 50%; 
    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;
    gap: 64px;
    position: static;
    flex: 0 0 256px;
    padding: 34px 0px 40px 0px;
    align-items: center;
}

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

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

.side-section:hover svg { transform: scale(1.2); }

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

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

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

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

#side-menu .divider { height: 2px; }

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

.menu-item { 
    display:block; 
    padding: 16px 20px;
}

/* 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: 50%;
  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, .text-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-section.active, .menu-item.active {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.top-menu-arrow {
    justify-content: center;
    width: 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 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-family: var(--font-family);
}

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

.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 { align-self: center; }

/* Base button class - shared properties */
.btn, input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button  {
    width: fit-content;
    justify-content: center;
    padding: 8px 24px;
    font-family: var(--font-family);
    text-decoration: none;
    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: 5px 13px;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
}

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

.primary-btn:hover {
    background-color: transparent;
    border-color: var(--primary-hover);
    color: 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-xs);
    line-height: var(--line-height-xs);
    font-weight: var(--font-weight-semibold);
}

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

.delete-btn:hover { 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;
}

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

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

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

.event-date { margin-bottom: 8px; }

.event-description {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    color: var(--text-color);
    margin-bottom: 8px;
}

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

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

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

.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 .action-buttons {
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

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

.scroll-table {overflow-x: auto;}

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


/* Circle */
.circle:not(.arrows-nav.circle) {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: 16px;
    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;
    flex-wrap: wrap;
    gap: 24px;       
    align-content: flex-start;
}

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

.form-2col > div { flex: 0 0 48%; }
form .form-100, form > h2, 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);
}

.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: 6px;
    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) {
    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);}

.select {
    min-height: 34px;
    width: 100%;
    padding: 6px 12px;
    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;
}

.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 {
  height: 60vh;
  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 40px;
    width: 400px;
    position: fixed;
    left: 50%;
    top: clamp(16px, 10vh, 96px);
    transform: translateX(-50%);
    max-height: calc(100vh - 64px);
    z-index: 1000;
}

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

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

.scope-toggle-group {
    display: flex;
    flex-direction: row;
    gap: 8px;
    row-gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.scope-toggle-group form {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    width: auto;
    margin: 0;
}

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

/*.tab-panel form,*/ .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;
    padding-left: 24px;
    margin-bottom: 32px;
    border-left: 2px solid var(--darker-table-line);
    height: 320px;
    width: 400px;
    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 .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;
}

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

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

.project-card:hover, .db-card:hover:not(.db-card.no-hover), .db-card.active, .tl-item:has(.editable-user-section.hidden), .btns-grid button:hover,
.btns-column button.inv-dd-btn:hover, .toggle-btn:hover, .milnik-card-mini:hover {
    border-color: var(--primary-hover);
    box-shadow: 0 4px 10px rgba(24, 47, 102, 0.1);
    transition: all 0.3s ease;
}

.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á */

/* Tělo stránky */
.calendar-grid, .calendar-week, .calendar-day {
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    overflow: hidden;
}

/* řádky (týdny + hlavička) */
.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;
}

/* buňky */
.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 { 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);
}

/* seznam eventů v buňce */
.calendar-day-events {
    list-style: none;
    margin-top: 4px;
    max-height: 80%;
    overflow-y: auto;
}

/* event badge v kalendáři */
.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); }

/* --- All-day row --- */
.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;
}

/* --- Time grid --- */
.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;          /* Firefox */
    -ms-overflow-style: none;       /* starší Edge/IE */
}

.hide-scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0;                      /* Chrome/Safari */
    display: none;
}

/* Dashboard */
.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);
    outline: 1px solid rgba(0,0,0,.06);
}

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

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

.db-h-red { background-color: #FFE7E7; }

.db-h-orange { background-color: #FFF2E6; }

.db-h-green { background-color: #EBFFF1; }

.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 { 
    min-height: 10px;
    max-height: 12px;
}

.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: 1fr auto 1fr;
    gap: 4px;
    align-items: center;
}

.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-link { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; }
.dashboard-card-link:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 42, 99, 0.12); border-color: rgba(15, 42, 99, 0.12); }

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

/* swatche berou barvy z CSS proměnných, ať to ladí se systémem */
.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;
}

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

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

.milnik-arrow svg {
    transition: transform 0.2s ease;
}

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

/* Souhrn Detail */
.detail-card {
    padding: 24px 40px 32px 40px;
    background-color: var(--background-color);
    border-radius: 8px;
    height: 100%;
    flex: 1 1 0;
}

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

/* Horizontalni milniky */
.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-phase { z-index: 2;}

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

/* svislý oddělovač mezi fázema (to tvoje otočený “outline”) */
.milnik-sep {
    width: 4px;
    height: 100px;
    background-color: var(--darker-table-line);
}

/* mini kartička milníku */
.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
    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;
}

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

.input-suffix-wrap::after {
    content: "%";
    position: absolute;
    right: 24px;
    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"; }

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

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

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

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

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

.mt6px {margin-top: 6px;}
.mb6px { margin-bottom: 6px;}

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

.margin-top { margin-top: 24px; }
.mt40px {margin-top: 40px;}
.mt64px { margin-top: 64px;}

.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-564px { height: 564px;}
.h-fit-content { height: fit-content;}

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

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

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

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

.orange::before, .pozadi-orange { background-color: var(--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(--dark-sky-blue);}

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

.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(--medium-purple);}
.modrofialova::before, .pozadi-modrofialova { background-color: var(--past-modrofialova);}

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

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

.pink::before, .pozadi-pink { background-color: var(--past-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, .header-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);}
.border-right { border-right: solid 1px #D1D0DD }

@media (max-width: 1440px) {
    /*Scroll tabulky*/
    .table-container { overflow-x: visible; }

    /*.tab-panel form,*/ .filtr-form { grid-template-columns: repeat(4, 1fr); }



    .search-container { display: none; }

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

    .form-container, .detail-container .form-container{ max-width: none; }

    .tab-panel .form-sekce:not(.js-ia-accordion-body .form-sekce) {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 {
        flex: 0 0 calc(50% - 8px);
    }
}

@media (max-width: 832px) {
    .calendar-form form { grid-template-columns: repeat(2, 1fr); }

    /*.tab-panel form,*/ .filtr-form { grid-template-columns: repeat(3, 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 { 
        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;
    }

    /*.tab-panel form,*/ .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 { 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;}
}