:root {
    --col_green: #53ad10;
    /* brand zelena */
    --col_green_rgb: 83, 173, 16;
    --col_red: #da272a;
    /* brand red */
    --col_grey: #474f59;
    /* brand grey */

    --col_green_h: #6db92e;
    --col_red_h: #e04745;
    --col_grey_h: #616973;

    /* === Theme: backgrounds === */
    --bg-page: #ffffff;
    --bg-surface: #f9fafb;
    --bg-raised: #f3f4f6;
    --bg-interactive: #ffffff;
    --bg-hover: #eaecf1;
    --bg-menu: #e8eef5;

    /* === Theme: borders === */
    --border: #e5e7eb;
    --border-strong: #d1d5db;

    /* === Theme: text === */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-on-dark: #ffffff;

    /* === Module notice banner === */
    --bg-notice: 234, 88, 12;

    /* === Timer state colors === */
    --timer-running: #22c55e;
    --timer-running-h: #16a34a;
    --timer-paused: #f59e0b;
    --timer-paused-h: #d97706;
}

.plan_bg_pro {
    background: linear-gradient(to right, #768afc, #5b65f8)
}

.plan_bg_pro:hover {
    background: linear-gradient(to right, #8597ff, #6973ff)
}

.plan_bg_basic {
    background: linear-gradient(to right, #d0d0d0, #a4afac);
}

.plan_bg_basic:hover {
    background: linear-gradient(to right, #d7d7d7, #afbab7);
}



.bg_col_green {
    background-color: var(--col_green);
}

.avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: #1e4c87;
    color: white;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    line-height: 1;
    vertical-align: middle;
}

.text_col_green {
    color: var(--col_green);
}

.bg_col_green_light {
    background-color: rgba(83, 173, 16, 0.1);
}

.bg_col_green_light:hover,
.bg_col_green_light_h:hover {
    background-color: rgba(83, 173, 16, 0.2) !important;
}

.focus\:ring-brand-green:focus {
    --tw-ring-color: var(--col_green);
    box-shadow: 0 0 0 2px var(--col_green);
}

.focus\:border_col_green:focus {
    border-color: var(--col_green) !important;
}

.focus\:ring_col_green:focus {
    --tw-ring-color: var(--col_green) !important;
    box-shadow: 0 0 0 3px rgba(83, 173, 16, 0.4) !important;
}

.border_col_green {
    border-color: var(--col_green) !important;
}

.hover\:text_col_green_hover:hover {
    color: var(--col_green_h) !important;
}

.hover\:bg-brand-green-h:hover {
    background-color: var(--col_green_h) !important;
}

.bg_col_red {
    background-color: var(--col_red);
}

.bg_col_grey {
    background-color: var(--col_grey);
}

button.bg_col_green:hover,
a.bg_col_green:hover {
    background-color: var(--col_green_h);
}

button.bg_col_red:hover,
a.bg_col_red:hover {
    background-color: var(--col_red_h);
}

button.bg_col_grey:hover,
a.bg_col_grey:hover {
    background-color: var(--col_grey_h);
}

.bg_col_green_h {
    background-color: var(--col_green_h);
}

.bg_col_red_h {
    background-color: var(--col_red_h);
}

.bg_col_grey_h {
    background-color: var(--col_grey_h);
}


.logo_green {
    fill: var(--col_green);
}

.logo_red {
    fill: #E03817;
}

.logo_border {
    fill: var(--col_green);
    opacity: 0.25;
    transition: opacity 0.3s ease;
}


.logo_link:hover .logo_border {
    opacity: 0.6;
}


.gradient-text {
    background: linear-gradient(90deg, var(--col_red), #efad4a, var(--col_green));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

h2 {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
    font-weight: 700 !important;
}

h3 {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
    font-weight: 600 !important;
}

/* Base style pre-sets to prevent transparent backgrounds bleeding on iOS/macOS Safari */
select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea {
    background-color: var(--bg-interactive);
}


#userMenuDropdown .userMenuButtons button,
#userMenuDropdown .userMenuButtons a {
    display: flex;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.25rem;
    padding-top: 0.58rem;
    padding-bottom: 0.58rem;
    padding-left: 1rem;
    padding-right: 1rem;
    align-items: center;
    cursor: pointer;
    text-align: left;
    transition-duration: 150ms;
}

#userMenuDropdown .userMenuButtons button:hover,
#userMenuDropdown .userMenuButtons a:hover {
    color: white;
    background-color: var(--text-secondary);
    transition-duration: 150ms;
}

#userMenuDropdown .userMenuButtons button svg,
#userMenuDropdown .userMenuButtons a svg {
    margin-right: 0.75rem;
    transition-duration: 150ms;
}

#userMenuDropdown .userMenuButtons button:hover svg,
#userMenuDropdown .userMenuButtons a:hover svg {
    color: white;
    transition-duration: 150ms;
}


#userMenuDropdown .section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #8591a9;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom-width: 1px;
    border-bottom-color: #F9FAFB;
}

/* --- USER MENU: Collapsible sections (chevron toggle) --- */
#userMenuDropdown .section-title.section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

#userMenuDropdown .section-title.section-toggle:hover {
    color: var(--text-secondary);
    background-color: var(--bg-hover);
}

#userMenuDropdown .section-chevron {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    transition: transform 0.18s ease;
    /* barvu dědí z .section-title (currentColor) → funguje i v dark módu */
}

#userMenuDropdown .userMenuButtons.collapsed .section-chevron {
    transform: rotate(-90deg);
}

/* Plynulé rozbalení/sbalení přes grid-template-rows (0fr ↔ 1fr) — animuje
   výšku bez znalosti obsahu a obsah neořezává */
#userMenuDropdown .um-collapsible {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.18s ease;
}

#userMenuDropdown .um-collapsible-inner {
    overflow: hidden;
    min-height: 0;
}

#userMenuDropdown .userMenuButtons.collapsed .um-collapsible {
    grid-template-rows: 0fr;
}

/* Oddělovače v sekci „Další funkce": každá položka má vodicí linku, ale u první
   VIDITELNÉ ji skryjeme (jinak by pod nadpisem vznikla dvojitá linka, když je
   první modul vypnutý). Řešeno přes ~ kombinátor → funguje i při skrytí položek. */
#userMenuDropdown .um-features-list > [data-module-nav] > .border-t {
    display: none;
}

#userMenuDropdown .um-features-list > [data-module-nav]:not(.hidden) ~ [data-module-nav]:not(.hidden) > .border-t {
    display: block;
}

/* Sbalený obsah vyřadit z tab orderu i z accessibility stromu (jinak by se na
   skryté odkazy dalo tabovat). visibility se přepne až PO doběhnutí výškové
   animace (delay = doba transitionu), aby obsah během sbalování nezmizel skokem.
   Při rozbalení je naopak viditelný okamžitě (base stav nemá žádný delay). */
#userMenuDropdown .userMenuButtons.collapsed .um-collapsible-inner {
    visibility: hidden;
    transition: visibility 0s linear 0.18s;
}

/* Na nízkých viewportech se .section-title skrývá (viz níže) — obsah pak vždy
   zobrazit a nechat fokusovatelný, aby sbalená sekce nezůstala nepřístupná */
@media (max-height: 760px) {
    #userMenuDropdown .userMenuButtons.collapsed .um-collapsible {
        grid-template-rows: 1fr;
    }

    #userMenuDropdown .userMenuButtons.collapsed .um-collapsible-inner {
        visibility: visible;
        transition: none;
    }
}

/* Společný styl pro prvky v hlavičce (Dashboard btn, Search, Add btn) */
.header-ctrl {
    height: 2.5rem;
    /* 40px */
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 9999px;

    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    /* gray-800 */

    background-color: var(--bg-raised);
    /* gray-100 */

    /* Border je vždy přítomen (aby se neměnila velikost), ale je průhledný */
    border: 2px solid transparent;

    transition: all 0.2s ease;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Defaultně na střed (Add btn) */
    gap: 0.5rem;
    white-space: nowrap;
}

/* --- 1. DROPDOWN & SEARCH (Světlé prvky) --- */

/* Hover efekt: Ztmavne pozadí a objeví se šedý border */
/* Aplikujeme na vše kromě .add-btn */
.header-search:hover {
    background-color: var(--border);
    border-color: var(--border-strong);
    /* gray-300 */
    text-decoration: none;
}

/* Specifika pro Search Input */
input.header-ctrl {
    outline: none;
    width: 100%;
    max-width: 200px;
    justify-content: flex-start;
    /* Text vlevo */
}

/* --- 2. ADD TASK BUTTON (Tmavé tlačítko) --- */

button.header-ctrl.add-btn {
    background-color: #1f2937;
    /* gray-800 */
    color: white;
    /* Border zůstává transparentní */
}

button.header-ctrl.add-btn:hover {
    background-color: #374151;
    /* gray-700 (světlejší černá) */
    border-color: transparent;
    /* ZDE JE ZMĚNA: Žádný border na hover */
}

#dashboardMenuBtn {
    font-weight: 700;
    font-size: 1rem;
    width: 230px;
}

/* Sort Menu */
.sort-menu-container .sort-item svg {
    transition: transform 0.2s ease;
}

.sort-menu-container .sort-item:hover svg {
    transform: scale(1.1);
}

.sort-menu-container button#sortMenuBtn:active {
    transform: scale(0.95);
}

/* Custom Scrollbar pro Dropdowny */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    border-radius: 20px;
}

.border_box {
    border-width: 2px;
    border-radius: 0.5rem;
    border-color: rgb(0 0 0 / 25%);
}

.edit-element {
    display: none !important;
}

.active-edit .edit-element {
    display: flex !important;
}

.calendar-header-row,
.calendar-task-row {
    display: contents;
}


hr {
    border-color: var(--border-strong);
}

/* Zajistí, že vložené SVG logo bude mít správnou velikost a bude vycentrované */
.logo_link svg {
    height: 100%;
    width: auto;
    margin: 0 auto;
    display: inline-block;
}

.header {
    padding-top: 1.3rem;
    /*margin-bottom: 1.3rem;*/
    width: 100%;
}

a.btn_header {
    -webkit-text-decoration-line: none;
    text-decoration-line: none;
}

.btn_header {
    color: white;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
    padding: 0.5rem 0.85rem 0.5rem 0.85rem;
    border-radius: 9999px;
    font-weight: 700;

    -webkit-text-decoration-line: none;
    text-decoration-line: none;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all 0.15s;
    /* odpovídá transition */
    white-space: nowrap;
}

.btn_header.addtask {
    background-color: #24272f;
}

.btn_header svg {
    margin: 0 -0.35rem 0 -0.35rem;
}

.btn_header:hover {
    background-color: #828ea5;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    background-color: var(--col_green);
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

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

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    background-color: var(--border-strong);
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

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

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    background-color: var(--col_red);
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.btn-danger:hover {
    background-color: var(--col_red_h);
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
}

.dashboard-selector {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--bg-raised);
    cursor: pointer;
    padding-left: 1rem;
    padding-right: 2.5rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.25rem;
    border-radius: 9999px;
    border-width: 0px;
    color: #24272f;
    overflow: hidden;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f535b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='3 9 12 17 21 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 1em;

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.dashboard-selector:hover {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353ad10' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='3 9 12 17 21 9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Dashboard settings accordion */
.dashboard-card-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.dashboard-card-body.expanded {
    grid-template-rows: 1fr;
}

.dashboard-card-body-inner {
    overflow: hidden;
}

.dashboard-card-header[aria-expanded="true"] .dashboard-chevron {
    transform: rotate(180deg);
}

#taskSearchInput,
#budgetTaskSearchInput {
    -webkit-appearance: none;
    appearance: none;

    font-weight: 600;
    font-size: 1rem;

    background-color: var(--bg-raised);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bfc2d5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z'%3e%3c/path%3e%3cpath d='M21 21L16.65 16.65'%3e%3c/path%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 1.1em;
    padding-left: 2.5rem !important;
}

#taskSearchInput:hover,
#budgetTaskSearchInput:hover {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f535b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z'%3e%3c/path%3e%3cpath d='M21 21L16.65 16.65'%3e%3c/path%3e%3c/svg%3e");
}

#taskSearchInput::placeholder,
#budgetTaskSearchInput::placeholder {
    color: #bdc1cd;
    opacity: 1;
    font-weight: 600;
    font-size: 1rem;
}

























/* --- NOVÉ STYLY PRO HLAVIČKU (Refactoring) --- */

/* Základní tlačítko v hlavičce (ikona nebo text) */
.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    /* h-10 */
    border-radius: 9999px;
    font-weight: 700;
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;

    /* Defaultní barvy (šedé) */
    background-color: var(--bg-raised);
    /* bg-gray-100 */
    color: #1f2937;
    /* text-gray-800 */
    border: 2px solid transparent;
}

.header-btn:hover {
    border-color: var(--border-strong);
    background-color: var(--border);
    color: var(--text-primary);
}

/* Active state for current view (dashboard/calendar/list) */
.header-btn.active {
    background-color: var(--bg-page);
    border-color: var(--col_green);
    color: var(--text-primary);
}

/* Tmavá varianta (např. Přidat úkol) */
.header-btn.dark {
    background-color: #1f2937;
    color: var(--text-on-dark);
}

.header-btn.dark:hover {
    background-color: #374151;
    /* hover:bg-gray-700 */
}

/* Search clear buttons — icon-only hover */
#taskSearchBtnIconClear svg,
#taskSearchDropdownClear svg {
    transition: transform 0.12s ease, opacity 0.12s ease;
}

#taskSearchBtnIconClear:hover svg,
#taskSearchDropdownClear:hover svg {
    transform: scale(1.2);
    opacity: 0.75;
}

/* Ikona uvnitř tlačítka */
.header-btn svg {
    width: 1.25rem;
    /* w-5 */
    height: 1.25rem;
    /* h-5 */
}

/* Unread count badge — absolute overlay on header buttons */
.header-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: var(--col_green);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    height: 1rem;
    min-width: 1rem;
    padding: 0 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border: 1px solid #fff;
    pointer-events: none;
}

/* Unread count badge — inline pill in dropdown lists */
.header-badge-inline {
    background-color: var(--col_green);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    height: 1.25rem;
    padding: 0 0.375rem;
    margin-left: 0.25rem;
    gap: 0.125rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Activity badge in pinned tabs and dropdown — clickable, same hover as task card badge */
.dashboard-activity-badge {
    cursor: pointer;
    transition: background-color 0.15s;
}

.dashboard-activity-badge:hover {
    background-color: rgba(var(--col_green_rgb), 0.4);
}

/* Icon-only buttons - keep circular shape */
.header-btn.w-10 {
    flex-shrink: 0;
    aspect-ratio: 1;
}

/* Reset aspect-ratio when button expands to show text (Firefox fix) */
@media (min-width: 768px) {

    .header-btn.w-10.md\:w-auto,
    .header-btn.w-10.md\:w-fit {
        aspect-ratio: auto;
    }
}

@media (min-width: 1024px) {

    .header-btn.w-10.lg\:w-auto,
    .header-btn.w-10.lg\:w-fit {
        aspect-ratio: auto;
    }
}

@media (min-width: 1280px) {

    .header-btn.w-10.xl\:w-auto,
    .header-btn.w-10.xl\:w-fit,
    .header-btn.w-10.xl\:w-full {
        aspect-ratio: auto;
    }
}

/* Progressive header layout — steps applied by JS when header overflows */
.header.hdr-s1 #userMenuName {
    display: none;
}

/* Add button: always circle below lg (text is hidden via Tailwind hidden lg:block) */
@media (max-width: 1023px) {
    .header-btn.hdr-add-btn {
        width: 2.5rem;
        padding-left: 0;
        padding-right: 0;
        aspect-ratio: 1;
        flex-shrink: 0;
    }

    .header-btn.hdr-add-btn svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* Suppress transitions during applyLayout() so offsetWidth reads are always final values */
.header.hdr-notransition .header-btn {
    transition: none;
}

.header.hdr-s5 #dashboardMenuBtn {
    width: 140px;
}

.header.hdr-s5 .hdr-dashboard-label {
    max-width: 85px;
}

.header.hdr-s3 #taskSearchBtn {
    width: 2.5rem;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
    justify-content: center;
    aspect-ratio: 1;
}

.header.hdr-s3 .hdr-search-text {
    display: none;
}

.header.hdr-s3 .search-menu-container {
    width: 2.5rem;
}

.header.hdr-s4 #headerTimeWidget {
    display: none;
}


.header.hdr-wrap {
    flex-wrap: wrap;
}

/* In 2-row mode, show user name unless hdr-s1 says it doesn't fit */
.header.hdr-wrap:not(.hdr-s1) #userMenuName {
    display: block;
}

/* Allow nav-group to shrink so header-right always fits on the same row */
.header.hdr-wrap .header-nav-group {
    flex-shrink: 1;
    min-width: 0;
}

/* Search expanded state — JS is the sole controller via hdr-s3.
   When hdr-s3 is absent the search is always expanded, regardless of viewport width. */
.header:not(.hdr-s3) .search-menu-container {
    width: 170px;
}

.header:not(.hdr-s3) #taskSearchBtn {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    aspect-ratio: auto;
    gap: 0.5rem;
    justify-content: space-between;
}

.header:not(.hdr-s3) .hdr-search-text {
    display: block;
}

/* User filter avatar indicator in taskSearchBtn */
.hdr-filter-user {
    display: none;
}

.header:not(.hdr-s3) .hdr-filter-user {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Wrapper: positions the X overlay, handles overlap and click cursor */
.hdr-filter-avatar-wrap {
    display: flex;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 9999px;
}

/* Overlap — second wrapper covers left edge of first (like task card assignee stack) */
.hdr-filter-user .hdr-filter-avatar-wrap+.hdr-filter-avatar-wrap {
    margin-left: -7px;
}

/* Ring separator matching button background — adapts automatically to dark mode */
.hdr-filter-user .hdr-filter-avatar {
    box-shadow: 0 0 0 1.5px var(--bg-interactive);
}

/* X overlay — fades in on hover */
.hdr-filter-avatar-x {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-interactive) 88%, transparent);
    color: var(--text-primary);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.hdr-filter-avatar-wrap:hover .hdr-filter-avatar-x {
    opacity: 1;
}

/* Make content div grow so avatar is pushed to the right edge */
.header:not(.hdr-s3) #taskSearchBtn .hdr-search-content {
    flex: 1;
    min-width: 0;
}

/* Reduce right padding when filter avatar is present — match the vertical gap (6px) */
.header:not(.hdr-s3) #taskSearchBtn:has(.hdr-filter-user) {
    padding-right: 8px;
}

.header.hdr-wrap .header-nav-icons-wrap {
    flex: 0 0 100%;
    order: 10;
    padding-top: 1rem;
    min-width: 0;
    overflow-x: clip;
    /* clip (not hidden) keeps overflow-y visible so badges aren't cut off */
    gap: 4px;
}

.header.hdr-wrap .header-nav-icons {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: clip;
    /* clip instead of hidden: doesn't force overflow-y:auto */
}

.header.hdr-nav-scroll .header-nav-icons {
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: 8px;
    /* vertical space for badge overflow */
    margin-top: -8px;
    /* compensate so visual position is unchanged */
}

.header.hdr-nav-scroll .header-nav-icons::-webkit-scrollbar {
    display: none;
}

.header.hdr-nav-scroll .header-nav-icons.nav-fade-right {
    -webkit-mask-image: linear-gradient(to left, transparent 0px, black 28px);
    mask-image: linear-gradient(to left, transparent 0px, black 28px);
}

.header.hdr-nav-scroll .header-nav-icons.nav-fade-left {
    -webkit-mask-image: linear-gradient(to right, transparent 0px, black 28px);
    mask-image: linear-gradient(to right, transparent 0px, black 28px);
}

.header.hdr-nav-scroll .header-nav-icons.nav-fade-left.nav-fade-right {
    -webkit-mask-image: linear-gradient(to right, transparent 0px, black 28px, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0px, black 28px, black calc(100% - 28px), transparent 100%);
}

.user-menu-dropdown {
    position: absolute;
    right: 0;
    z-index: 1060;
    margin-top: 0.5rem;
    width: 290px;
    transform-origin: top right;
    border-radius: 20px;
    color: #1f2937;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    transition: all 200ms ease-out;
    overflow: hidden;
    padding: 0.8rem 0.8rem 0.8rem;
    border: 1px solid var(--border);
}

@media (max-width: 768px) {
    .user-menu-dropdown {
        max-height: calc(100dvh - 5rem);
    }
}

/* Specifické pro input vyhledávání */
input.header-search {
    height: 2.5rem;
    padding-left: 2.5rem;
    /* místo pro ikonu lupy */
    padding-right: 1rem;
    border-radius: 9999px;
    background-color: var(--bg-raised);
    border: 2px solid transparent;
    font-weight: 700;
    font-size: 0.9rem;
    color: #1f2937;
    outline: none;
    transition: all 0.2s ease;
    width: 100%;
}

input.header-search:focus {
    background-color: #ffffff;
    border-color: var(--border-strong);
}

input.header-search::placeholder {
    color: var(--text-muted);
    font-weight: 600;
}





















.task-card {
    position: relative;
    display: flex;
    flex-direction: column;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.task-card-body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;

    font-size: 0.85rem;
    line-height: 1.2rem;

    padding: 1rem 1rem 0.7rem 1rem;

    border-radius: 0.75rem;
    border-bottom: 2px solid rgb(0 0 0 / 15%);

    --tw-shadow: 0 11px 8px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 11px 8px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.task-card-body h3 {
    font-size: 1.2rem !important;
    line-height: 1.65rem !important;
    font-weight: 600 !important;
}

.task-card.dragging .task-card-body {
    opacity: 0.3;
}

/* Visual feedback during touch hold (before drag activates) */
.task-card.sortable-chosen .task-card-body {
    filter: brightness(1.04);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.1s, filter 0.1s;
}

/* Drag clone following the cursor (forceFallback).
   transition: none on both root and descendants — task-bin has transition-all which would
   otherwise lag the SortableJS transform on every mousemove. */
.task-card-fallback,
.task-card-fallback * {
    transition: none !important;
}

.task-card-fallback {
    opacity: 1 !important;
    cursor: grabbing !important;
    pointer-events: none;
}

.task-card-fallback .task-card-body {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Prevent images inside cards from triggering native browser drag */
.task-card img,
.task-bin img {
    -webkit-user-drag: none;
    user-drag: none;
}





/* --- BARVY KARTY (TEXT & TLAČÍTKA) --- */

/* 1. TEXTY */
/* Světlá karta = Tmavý text */
.task-card-body.is-light {
    color: #1f2937;
    /* gray-800 */
}

.task-card-body.is-light h3 {
    color: #000000;
}

.task-card-body.is-light .opacity-70 {
    opacity: 0.7;
}

.task-card-body.is-light .opacity-90 {
    opacity: 0.9;
}


/* Tmavá karta = Bílý text */
.task-card-body.is-dark {
    color: var(--text-on-dark);
}

.task-card-body.is-dark h3 {
    color: var(--text-on-dark);
}

/* U tmavé karty můžeme texty trochu zprůhlednit, aby nebyly tak ostré */
.task-card-body.is-dark .opacity-70 {
    opacity: 0.8;
}

.task-card-body.is-dark .opacity-90 {
    opacity: 0.95;
}


/* 2. TLAČÍTKA (.action-btn a .quick-start-wrapper-footer) */
.task-card-body .action-btn {
    transition: background-color 0.2s, color 0.2s;
    border: none;
    /* Odstraníme případné bordery */
}

/* Tlačítka na SVĚTLÉ kartě (černá průhledná) */
.task-card-body.is-light .action-btn {
    background-color: rgba(0, 0, 0, 0.1);
    color: #000000;
}

.task-card-body.is-light .action-btn:hover {
    background-color: rgba(0, 0, 0, 0.25);
}

/* Tlačítka na TMAVÉ kartě (bílá průhledná) */
.task-card-body.is-dark .action-btn {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--text-on-dark);
}

.task-card-body.is-dark .action-btn:hover {
    background-color: rgba(255, 255, 255, 0.35);
}

/* --- AKTIVNÍ ČASOVAČ (Strong Pulse) --- */
/* .task-card-body .action-btn.* má 3 třídy — stejná specificita jako is-light/is-dark pravidla výše,
   cascade pořadí (pozdější) zajistí výhru. .quick-start-btn.* pokrývá editor a task detail stránku. */
.task-card-body .action-btn.active-timer,
.quick-start-btn.active-timer {
    background-color: var(--timer-running);
    color: white;
    animation: pulse-green 1.5s infinite;
    position: relative;
    z-index: 5;
}

.task-card-body .action-btn.timer-paused-btn,
.quick-start-btn.timer-paused-btn {
    background-color: var(--timer-paused);
    color: white;
    animation: none;
    position: relative;
    z-index: 5;
}

.nav-item-highlight {
    animation: pulse-col-green 1.5s 2;
}

@keyframes pulse-col-green {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--col_green_rgb), 0.8);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(var(--col_green_rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--col_green_rgb), 0);
    }
}

@keyframes pulse-green {
    0% {
        /* Začátek: Žádný kruh, ale silná barva stínu (80% viditelnost) */
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.8);
    }

    70% {
        /* Konec pulzu: Kruh se roztáhne až na 15px a zprůhledí do ztracena */
        box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}


.task-card.status-finished .task-card-body,
.task-card.status-stopped .task-card-body,
.task-card.status-paused .task-card-body {
    opacity: 0.5;
}

.task-card.status-finished .progress-summary {
    display: none;
}

/* Segmenty progress baru: na hover trochu povyrostou na výšku (transform-only,
   neovlivní layout sousedů). Kontejner segmentů nemá overflow:hidden, takže je
   přerůstání vidět. */
.progress-summary .progress-seg {
    transition: transform 0.15s ease, background-color 0.3s ease;
    transform-origin: center;
}

.progress-summary .progress-seg:hover {
    transform: scaleY(2.1);
    position: relative;
    z-index: 1;
}

/* Klikatelné dny / milníky (uživatel s edit právem): klik otevře editor
   s milníkem pro daný den (přidá nový / zaměří existující). Platí pro denní
   segmenty i pro kosočtverce milníků na spojitém baru. */
.progress-summary [data-date] {
    cursor: pointer;
}

.archive-section:hover .task-card.status-finished .task-card-body,
.stopped-section:hover .task-card.status-stopped .task-card-body,
.task-card.status-paused:hover .task-card-body {
    opacity: 1;
}

/* Collapsible sections */
.section-collapse-toggle {
    cursor: pointer;
    user-select: none;
    width: fit-content;
    padding: 0.35rem 0.6rem;
    border-radius: 9999px;
    transition: background-color 0.15s ease;
}

.section-collapse-toggle:hover {
    background-color: var(--bg-hover);
}

.section-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
    color: var(--text-muted, #9ca3af);
}

.is-collapsed .section-chevron {
    transform: rotate(-90deg);
}

.is-collapsed .collapsible-grid,
.is-collapsed .section-load-more {
    display: none;
}

.section-count {
    font-size: 0.875rem;
    font-weight: 400;
    opacity: 0.55;
    margin-left: 0.125rem;
}

.section-loading-indicator {
    grid-column: 1 / -1;
}

.section-load-more,
.search-history-bar {
    border-top: 1px solid var(--border-color, #e5e7eb);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

.dark .section-load-more,
.dark .search-history-bar {
    border-top-color: #374151;
}

/* Non-interactive status pill — same shape as .btn-secondary, but muted and without hover */
.section-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background-color: var(--bg-raised);
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: 0.5rem;
}



.task-tags-container {
    padding-top: 0.5rem;
    gap: 0.375rem;
    flex-wrap: wrap;
    display: flex;
    margin-left: -0.2rem;
    margin-bottom: 0.25rem;
    margin-top: auto;
}


.task-card-body:hover {
    transform: scale(1.015);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Při přesunování karet deaktivujeme hover scale, aby ostatní karty neskákaly */
body.dragging-active .task-card-body:hover {
    transform: none;
}

/* Plynulá změna výšky řádků gridu při přetahování karet mezi řádky různých výšek.
   Chrome interpoluje grid-template-rows mezi vypočítanými px hodnotami (platí i pro auto-fill). */
body.dragging-active #notesGrid {
    transition: grid-template-rows 300ms ease;
}

.task-card-body::after {
    content: "";
    position: absolute;
    inset: 0;
    /* vyplní celou kartu */
    border-radius: inherit;
    /* přesně kopíruje zaoblení karty */
    border: 4px solid transparent;
    /* "místo" pro border, ale neviditelný */
    pointer-events: none;
    /* neblokuje hover */
    transition: border-color 0.2s ease;
}

.task-card-body:hover::after {
    border-color: rgba(255, 255, 255, 0.40);
}

.task-card-header {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 10;

    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* --- CARD STATUS BAR --- */
/* Bar is the FIRST flex child inside .task-card.
   .task-card-body follows with margin-top: -0.6rem, overlapping the bar's bottom.
   The body's rounded top corners visually cover the bar's straight-bottom edge. */
.task-card-statusbar {
    color: var(--text-primary);
    padding: 0.4rem 0.8rem 1rem;
    height: 2.75rem;
    border-radius: 0.75rem 0.75rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.03);
}

.has-status-bar .task-card-body {
    margin-top: -0.6rem;
}

.task-card-statusbar--neutral {
    background: linear-gradient(to bottom, rgba(128, 128, 128, 0.1), rgba(128, 128, 128, 0.02));
}

.task-card-statusbar--neutral:has(.task-card-statusbar-activity) {
    background: linear-gradient(to bottom, rgba(83, 173, 16, 0.3), rgba(83, 173, 16, 0.02));
}

.task-card-statusbar--yellow {
    background: linear-gradient(to bottom, rgba(234, 179, 8, 0.3), rgba(234, 179, 8, 0.02));
}

.task-card-statusbar--red {
    background: linear-gradient(to bottom, rgba(220, 38, 38, 0.3), rgba(220, 38, 38, 0.02));
}

.task-card-statusbar--green {
    background: linear-gradient(to bottom, rgba(83, 173, 16, 0.5), rgba(83, 173, 16, 0.05));
}

.task-card-statusbar-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
    opacity: 0.7;
}

.task-card-statusbar-label {
    opacity: 0.85;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-card-statusbar svg {
    flex-shrink: 0;
    stroke-width: 2.5;
    fill: none;
}

.task-card-statusbar-activity {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    padding: 0.15rem 0.5rem 0.15rem 0.375rem;
    border-radius: 9999px;
    background: var(--col_green);
    color: white;
    transition: background 0.15s;
    flex-shrink: 0;
}

.task-card-statusbar-activity:hover {
    background: rgba(var(--col_green_rgb), 0.4);
}

/* Na telefonech skrýt prázdné (neutral bez activity badge) statusbary – zabírají zbytečně místo */
@media (max-width: 640px) {
    .task-card-statusbar--neutral:not(:has(.task-card-statusbar-activity)) {
        display: none;
    }

    .has-status-bar:has(.task-card-statusbar--neutral:not(:has(.task-card-statusbar-activity))) .task-card-body {
        margin-top: 0;
    }

    /* Bin droppable – přidat odsazení nahoře, aby první karta nebyla nalepená na header složky */
    .bin-droppable {
        padding-top: 0.5rem;
    }
}

.task-card-body:has(.task-card-gallery) .task-card-content {
    padding-top: 0.75rem;
}

.task-card-gallery {
    opacity: 0.7;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    overflow: hidden;
    gap: 0.125rem;
    display: grid;
    margin-bottom: 0;
    margin-top: -1rem;
    margin-left: -1rem;
    margin-right: -1rem;

    position: relative;
    transition: 0.2s ease;
}

.task-card-body:hover .task-card-gallery {
    opacity: 1;
}

/* Status note – clickable, opens comments */
.status-note-display {
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.status-note-display:hover {
    background-color: #eff6ff !important;
    box-shadow: 0 0 0 2px #93c5fd;
}

/* Footer action buttons (play, clock, options - NOT dropdown items) */
.task-card-footer .action-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-duration: 0.15s;
}

.task-card-footer p {
    white-space: nowrap;
}

.task-card-footer .action-btn svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke-width: 2px;
}

.task-card-footer .action-btn:hover svg {
    width: 1.1rem;
    height: 1.1rem;
}


/* --- UNIVERZÁLNÍ PILL (Sjednocení Tagů, Příloh a Odkazů) --- */

.task-pill {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    /* h-6 = 24px (stejné jako v PHP) */
    padding: 0 0.625rem;
    /* px-2.5 */
    border-radius: 9999px;
    /* rounded-full */

    font-size: 0.75rem;
    /* text-xs */
    font-weight: 600;
    /* font-semibold */
    line-height: 1;

    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;

    transition: background-color 0.2s, color 0.2s;
    cursor: pointer;
    border: none;
    gap: 4px;
    /* Mezera mezi ikonou a textem */
}

.task-pill.overflow-visible {
    overflow: visible !important;
}

/* Ikony uvnitř pillu */
.task-pill svg {
    width: 0.75rem;
    /* w-3 */
    height: 0.75rem;
    /* h-3 */
    flex-shrink: 0;
    display: block;
}

/* BARVY - Automaticky podle třídy na kartě (.task-card) */

/* Kontejner pro detekované odkazy v editoru */
.detected-links-container {
    display: flex;
    /* Seřadí prvky vedle sebe */
    flex-wrap: wrap;
    /* Zalomení na další řádek, když se nevejdou */
    gap: 6px;
    /* TOTO JE KLÍČOVÉ: Mezera mezi bublinami (horizontálně i vertikálně) */

    margin-top: 8px;
    /* Odstup od textového pole */
    min-height: 0;
}

/* Skrýt, pokud je prázdný (pro jistotu) */
.detected-links-container:empty {
    display: none;
}

/* --- CHECKLIST HOVER EFFECT --- */
.card-checklist-item {
    position: relative;
    z-index: 1;
    /* Aby byl text nad pseudoprvkem */
}

.card-checklist-item::before {
    content: "";
    position: absolute;
    /* Roztáhneme pozadí o kousek víc než je text */
    top: -3px;
    bottom: -3px;
    left: -6px;
    right: -6px;
    border-radius: 7px;
    z-index: -1;
    transition: background-color 0.15s ease;
    pointer-events: none;
}

/* Světlá karta -> černé průhledné pozadí */
.task-card-body.is-light .card-checklist.is-clickable .card-checklist-item:hover::before {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Tmavá karta -> bílé průhledné pozadí */
.task-card-body.is-dark .card-checklist.is-clickable .card-checklist-item:hover::before {
    background-color: rgba(255, 255, 255, 0.15);
}

/* 1. KDYŽ JE KARTA SVĚTLÁ (nebo jsme v editoru) */
/* Detected links v editoru — respektuje html.dark */
html:not(.dark) .detected-links-container .task-pill {
    background-color: rgba(0, 0, 0, 0.10);
    color: #000000;
}

html:not(.dark) .detected-links-container .task-pill:hover {
    background-color: var(--bg-hover) !important;
}

html.dark .detected-links-container .task-pill {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

html.dark .detected-links-container .task-pill:hover {
    background-color: rgba(255, 255, 255, 0.22) !important;
}

.task-card-body.is-light .task-pill {
    background-color: rgba(0, 0, 0, 0.10);
    color: #000000;
}

.task-card-body.is-light .task-pill:hover {
    background-color: var(--bg-hover) !important;
}

/* 2. Tmavá karta (text je bílý) -> Pill má tmavé pozadí s vyšší průhledností (aby vynikl na barvě) */
.task-card-body.is-dark .task-pill {
    background-color: rgba(0, 0, 0, 0.2);
    /* odpovídá bg-black/30 */
    color: #ffffff;
    /* text-white */
}

.task-card-body.is-dark .task-pill:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

/* Specifika pro Smart Link (aby vypadal klikatelně) */
a.task-pill:hover {
    text-decoration: none;
}

/* Tag Pill — clickable filter */
.tag-pill {
    cursor: pointer;
}

/* Budget Pill Specifics */
.task-pill.budget-pill {
    background-color: rgba(34, 197, 94, 0.2) !important;
    /* Tailwind green-500 with opacity */
}

.task-card-body.is-light .budget-pill {
    color: #15803d !important;
    /* green-700 */
}

.task-card-body.is-dark .budget-pill {
    color: #4ade80 !important;
    /* green-400 */
    background-color: rgba(34, 197, 94, 0.3) !important;
}

/* === DROPDOWN PORTAL === */
/* Zero-size fixed container that escapes all board-level stacking contexts */
#dropdown-portal {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 9999;
    pointer-events: none;
}

#dropdown-portal>* {
    pointer-events: auto;
}

@keyframes dropdown-portal-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes dropdown-portal-out {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

#dropdown-portal>.card-options-menu {
    animation: dropdown-portal-in 0.15s ease-out forwards;
}

#dropdown-portal>.card-options-menu.is-closing {
    pointer-events: none;
    animation: dropdown-portal-out 0.12s ease-in forwards;
}

/* === CARD OPTIONS MENU === */
.card-options-menu {
    min-width: 10rem;
}

/* Dropdown items - base layout (works for both button and a) */
.card-options-menu .custom-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: background-color 0.15s ease;
}

.card-options-menu .custom-dropdown-item svg {
    flex-shrink: 0;
}

/* Menu separators */
.card-options-menu .menu-separator {
    height: 2px;
}

/* === Light theme === */
.card-options-menu.is-light {
    border: 2px solid rgba(0, 0, 0, 0.15);
}

.card-options-menu.is-light .custom-dropdown-item,
.card-options-menu.is-light .custom-dropdown-label {
    color: #1f2937;
}

.card-options-menu.is-light .custom-dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.card-options-menu.is-light .menu-separator {
    background-color: rgba(0, 0, 0, 0.2);
}

/* === Dark theme === */
.card-options-menu.is-dark {
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.card-options-menu.is-dark .custom-dropdown-item,
.card-options-menu.is-dark .custom-dropdown-label {
    color: #ffffff;
}

.card-options-menu.is-dark .custom-dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.card-options-menu.is-dark .menu-separator {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Delete button hover (red) */
.card-options-menu .custom-dropdown-item.text-red:hover {
    background-color: rgba(239, 68, 68, 0.2) !important;
}

.label_info {
    display: inline-flex;
    color: black;
    background-color: rgb(255 255 255 / 0.4);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0.375rem;
}

/* Základní styl pro task-grid (přebíráme z view-tasks.php) */
.task-grid {
    display: grid;
    gap: 1rem;
}

/* Velikost 1: Malé karty (hodně sloupců vedle sebe) */
.grid-size-1 .task-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Malá karta: omezená celková výška */
.grid-size-1 .task-grid .task-card-body {
    max-height: 400px;
}

/* Obsah malé karty: scrollovatelný s tenkým posuvníkem */
/* min-height: 0 je nutné aby flex item mohl schrknout a overflow-y fungoval */
.grid-size-1 .task-grid .task-card-body .task-card-content {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}

.grid-size-1 .task-grid .task-card-body.is-dark .task-card-content {
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.grid-size-1 .task-grid .task-card-body.is-light .task-card-content {
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.grid-size-1 .task-grid .task-card-body .task-card-content::-webkit-scrollbar {
    width: 4px;
}

.grid-size-1 .task-grid .task-card-body .task-card-content::-webkit-scrollbar-track {
    background: transparent;
}

.grid-size-1 .task-grid .task-card-body.is-dark .task-card-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 4px;
}

.grid-size-1 .task-grid .task-card-body.is-light .task-card-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

/* Velikost 2: Střední karty (Výchozí, cca 3-4 sloupce) */
.grid-size-2 .task-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Velikost 3: Velké karty (Široké, cca 2-3 sloupce) */
.grid-size-3 .task-grid {
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
}

/* Velikost 4: SEZNAM (Vždy 1 sloupec přes celou šířku) */
.grid-size-4 .task-grid {
    grid-template-columns: 1fr !important;
    row-gap: 0.375rem !important;
}

/* ============================================
   GRID SIZE 4 - SEZNAM (List View)
   Horizontální řádkové zobrazení karet
   ============================================ */

/* Karta: horizontální flex řádek
   min-width: 0 – zabrání grid itemu se roztáhnout za 1fr (fixuje overflow dlouhých popisů) */
.grid-size-4 .task-grid .task-card-body {
    flex-direction: row !important;
    align-items: center;
    min-height: 3.25rem;
    min-width: 0;
    padding: 0.35rem 0.75rem 0.35rem 1rem !important;
    border-bottom-width: 1px;
    gap: 0;
}

/* Hover: žádné zvětšení v list view, pouze ring zůstane */
.grid-size-4 .task-grid .task-card-body:hover {
    transform: none !important;
}

/* Galerie: levé pozadí s gradientem mizejícím doprava
   margin: 0 !important – přebíjí base CSS margin-bottom: 0.75rem (způsobovalo posun)
   z-index: 0 !important – přebíjí Tailwind z-10 (jinak obrázek zakrýval text) */
.grid-size-4 .task-grid .task-card-body .task-card-gallery {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 220px !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0.22;
    border-radius: 0.75rem 0 0 0.75rem !important;
    overflow: hidden;
    pointer-events: none;
    z-index: 0 !important;
    grid-template-columns: 1fr !important;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 40%, transparent 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 40%, transparent 100%);
}

.grid-size-4 .task-grid .task-card-body .task-card-gallery>div {
    height: 100% !important;
}

/* Obsah: horizontální flex, roste
   overflow: hidden – zabraňuje přetečení dlouhých popisů do šířky */
.grid-size-4 .task-grid .task-card-body .task-card-content {
    flex-direction: row !important;
    align-items: center;
    padding-top: 0 !important;
    gap: 0.75rem;
    min-width: 0;
    flex-grow: 1;
    overflow: hidden;
    order: 1;
    position: relative;
    z-index: 1;
}

/* Nadpis: viewport-relativní šířka – stejná pro všechny karty bez ohledu na šířku flex kontextu */
.grid-size-4 .task-grid .task-card-body .task-card-content h3 {
    font-size: 1rem !important;
    line-height: 1.35rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: clamp(160px, 22vw, 270px);
    flex-shrink: 0;
    margin-bottom: 0 !important;
}

/* Popis: jeden řádek, oříznutý */
.grid-size-4 .task-grid .task-card-body .task-description-content {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    display: block !important;
    opacity: 0.6;
    font-size: 0.78rem;
    flex: 1;
    min-width: 0;
    max-height: 1.4rem;
}

/* Vnitřní HTML tagy popisu jako inline (aby oříznutí fungovalo) */
.grid-size-4 .task-grid .task-card-body .task-description-content * {
    display: inline !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Skrýt obrázky v popisu v pohledu seznam */
.grid-size-4 .task-grid .task-card-body .task-description-content img {
    display: none !important;
}

/* Skrýt: checklist, stavová poznámka, skrytý popis (pilly zůstávají viditelné) */
.grid-size-4 .task-grid .task-card-body .card-checklist,
.grid-size-4 .task-grid .task-card-body .full-description-hidden,
.grid-size-4 .task-grid .task-card-body .status-note-display {
    display: none !important;
}

/* Pills v list view: kompaktní jednořádkový blok napravo od popisu
   flex-shrink: 0 – nezmenšuje se na úkor popisu
   max-width: 140px – omezuje plochu pro tagy/ikony, přebytečné se oříznou
   flex-wrap: nowrap – všechny pilly na jednom řádku */
.grid-size-4 .task-grid .task-card-body .task-card-content>.flex {
    display: flex !important;
    flex-wrap: nowrap;
    flex-shrink: 0;
    align-items: center;
    gap: 0.25rem;
    max-width: 140px;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

/* Badge stavu: vycentrovaný na levý okraj karty, odsazený od názvu */
.grid-size-4 .task-grid .task-card-body>.absolute {
    top: 50% !important;
    transform: translateY(-50%);
    left: -1.5rem !important;
    margin-left: 0 !important;
}

/* Header (avatary): přesunout NA KONEC - order 8 = za datumy (5), před tlačítka (9) */
.grid-size-4 .task-grid .task-card-body .task-card-header {
    position: static !important;
    order: 8;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    margin-left: 0.5rem;
    z-index: 1;
}

/* Wrapper pro progress bary + footer:
   display:contents – wrapper zmizí z layoutu, jeho děti se stanou přímými flex dětmi karty */
.grid-size-4 .task-grid .task-card-body>div:last-child {
    display: contents;
}

/* Skrýt progress bary (selector stále funguje na DOM, display:contents nevadí) */
.grid-size-4 .task-grid .task-card-body>div:last-child>*:not(.task-card-footer) {
    display: none !important;
}

/* Footer: display:contents – datumy a tlačítka se stanou přímými flex dětmi karty */
.grid-size-4 .task-grid .task-card-body .task-card-footer {
    display: contents;
}

/* Datumový blok: order 5 = za obsahem (1), před avatary (8) */
.grid-size-4 .task-grid .task-card-body .task-dates {
    order: 5;
    flex-shrink: 0;
    margin-left: 0.75rem;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0.65 !important;
}

@media (max-width: 767px) {
    .grid-size-4 .task-grid .task-card-body .task-dates {
        display: none;
    }
}

/* Tlačítka (flex div v footer): order 9 = za avatary (8), vždy úplně vpravo */
.grid-size-4 .task-grid .task-card-body .task-card-footer>div:last-child {
    order: 9;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: 0.5rem;
}

/* Datumy na jeden řádek: "Start 12.03. · Konec 16.03." */
.grid-size-4 .task-grid .task-card-body .task-dates>.grid {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: nowrap;
}

.grid-size-4 .task-grid .task-card-body .task-dates>.grid>div:nth-child(3) {
    margin-left: 0.2rem;
}

.grid-size-4 .task-grid .task-card-body .task-dates>.grid>div:nth-child(3)::before {
    content: "·\00a0";
    opacity: 0.5;
}

/* Složky (bins): odsazení nahoře i dole
   !important nutné – element má inline style="margin: 0" */
.grid-size-4 .task-grid .task-bin {
    /*margin-top: 1.75rem !important;*/
    margin-bottom: 0.75rem !important;
}

/* --- STATUS BAR: vlevo místo nahoře (list view) --- */
.grid-size-4 .task-grid .task-card {
    flex-direction: row;
    min-width: 0;
}

.grid-size-4 .task-grid .task-card-statusbar {
    width: 2.4rem;
    height: auto;
    min-height: auto;
    flex-shrink: 0;
    align-self: stretch;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.6rem 0.35rem 0;
    border-radius: 0.75rem 0 0 0.75rem;
}

/* Reset top-overlap, přidat left-overlap */
.grid-size-4 .task-grid .has-status-bar .task-card-body {
    margin-top: 0 !important;
    margin-left: -0.6rem;
}

/* Skrýt text label – v úzkém pruhu není místo */
.grid-size-4 .task-grid .task-card-statusbar-label {
    display: none;
}

/* Ikona statusu vycentrovaná */
.grid-size-4 .task-grid .task-card-statusbar-status {
    justify-content: center;
    flex: none;
}

/* Activity badge: bez margin-left: auto (to fungovalo v row, tady jsme v column) */
.grid-size-4 .task-grid .task-card-statusbar-activity {
    margin-left: 0;
    justify-content: center;
    padding: 0.1rem 0.2rem;
}

/* Skrýt číslo aktivity – jen ikona */
.grid-size-4 .task-grid .task-card-statusbar-activity span {
    display: none;
}

.modal {
    display: none;
    position: fixed;
    inset: 0px;
    overflow-y: auto;
    backdrop-filter: blur(3px);
    /* 8px */
    background-color: rgb(0 0 0 / 0.2);
    z-index: 1100;
}

#confirmModal {
    z-index: 6000;
}

/* reminderModal se otevírá nad jinými modaly (úkol, event, aktivita nástěnky) –
   musí být nad základní vrstvou 1100, ale pod confirmModal (6000) kvůli potvrzení smazání */
#reminderModal {
    z-index: 4000;
}

#confirmModal .modal-content {
    border-color: var(--border);
}

#imagePreviewModal {
    z-index: 3000;
    background-color: rgb(0 0 0 / 0.75);
    backdrop-filter: blur(12px);
}

#inviteUserModal,
#shareDashboardModal {
    z-index: 3000;
}

#permissionsTableModal {
    z-index: 3500;
}

#imagePreviewModal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Task assignment: top-aligned list modal */

.modal .modal-content {

    position: relative;

    color: var(--text-primary);
    background-color: var(--bg-surface);
    border-radius: 1rem;
    border: 10px solid var(--bg-surface);

    margin-top: calc(5rem + var(--banner-height, 0px));
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;

    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.modal .modal-padding {
    padding: 1.5rem;
}

.modal .modal-content h2 {
    margin-bottom: 0.75rem;
}

.modal .modal-content .close {
    color: var(--text-primary);
    position: absolute;
    top: 1rem;
    right: 1.75rem;
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.25s ease;
    transform: translateY(-2px);
}

.modal .modal-content .close:hover {
    color: var(--col_red);
    transition: 0.25s ease;
}

.modal .modal-content input,
.modal .modal-content textarea,
.modal .modal-content select {

    color: var(--text-primary);
    padding: 0.75rem;
    background-color: var(--bg-interactive);

    border-width: 2px;
    border-radius: 0.5rem;
    border-color: var(--border-strong);
}

.modal .modal-content input:focus,
.modal .modal-content textarea:focus,
.modal .modal-content select:focus {
    outline: none;
    border-color: var(--text-primary);
}

/* úprava výšky selektu */
.modal .modal-content select {
    height: 52px;
}

.modal .modal-content input.mini,
.modal .modal-content textarea.mini,
.modal .modal-content select.mini {

    color: var(--text-primary);
    padding: 0.3rem;
    background-color: var(--bg-interactive);

    border-width: 1px;
    border-radius: 0.5rem;
    border-color: var(--border);
}

/* Normalize comment/chat form textarea — same appearance in modal and on task page */
.comment-form-input {
    padding: 0.5rem 4rem 2rem 1rem !important;
    /* top pr-16 bottom(icon zone) pl-4 */
    border-width: 1px !important;
}

/* Úprava výšky selektu */
.modal .modal-content select.mini {
    height: 33px;
}

.modal_form_tagselector {
    color: var(--text-primary);
    padding: 0.25rem 0.75rem 0.25rem 0.75rem;
    background-color: var(--bg-interactive);
    border-width: 2px;
    border-radius: 0.5rem;
    border-color: var(--border);
}

.modal_form_tagselector:focus-within {
    border-color: var(--text-primary);
}

/* Tagify copies classes from the original input onto its generated <tags> wrapper.
   Target that wrapper directly — no sibling combinator needed. */
tags.tagify.modal_form_tagselector {
    background-color: var(--bg-interactive);
    border: 2px solid var(--border-strong) !important;
    border-radius: 0.5rem !important;
    padding: 0.3rem 0.35rem;
    min-height: 44px;
    box-shadow: none !important;
    width: 100%;
    align-items: center;
    /* Tagify CSS variables for individual tag chips */
    --tag-bg: var(--bg-raised, #e5e5e5);
    --tag-text-color: var(--text-primary);
    --tag-border-color: var(--border);
    --tag-remove-btn-color: var(--text-muted);
}

tags.tagify.modal_form_tagselector .tagify__tag {
    margin: 0.15rem 0.15rem;
}

tags.tagify.modal_form_tagselector .tagify__tag>div {
    padding: 0.45em 0.75em;
}

tags.tagify.modal_form_tagselector.tagify--focus {
    border-color: var(--text-primary) !important;
    outline: none;
}

tags.tagify.modal_form_tagselector .tagify__input {
    color: var(--text-primary);
    padding: 0.2rem 0.3rem;
}

tags.tagify.modal_form_tagselector .tagify__input::before {
    color: var(--text-muted);
}

.documents-section {
    padding: 0.75rem;
    border-width: 2px;
    border-radius: 0.5rem;
    border-color: var(--border);
}

.checklist-block {
    border: 2px solid var(--border-strong);
    border-radius: 0.5rem;
    background-color: var(--bg-interactive);
    margin-bottom: 0.5rem;
    transition: border-color 0.15s;
}

.checklist-block:focus-within {
    border-color: var(--text-primary);
}

ul#edit-checklist-list,
ul#add-checklist-list {
    padding: 0.75rem;
    background-color: transparent;
}

#edit-checklist-input,
#add-checklist-input {
    border-width: 2px 0 0 0;
    border-color: var(--border-strong);
    margin-bottom: 0;
}

#edit-checklist-input:focus,
#add-checklist-input:focus {
    outline: none;
    border-color: var(--border-strong);
}

.modal .formlabels label.block {
    background-color: transparent;
    padding: 6px 2px 2px 4px;
    border-radius: 0.5rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--text-secondary) 60%, transparent);
    margin-bottom: 4px;
}

.modal .formlabels label.labelbox {
    background-color: rgb(31 41 55 / 4%);
    padding: 4px 8px 4px 8px;
    border-radius: 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

/* Shared: selectable circles (colors + people) */
.color-option,
.person-option {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #0000003a;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: content-box;
}

.color-option:hover,
.person-option:hover,
.custom-color-wrapper:hover .custom-color-input {
    transform: scale(1.1);
}

.color-option.selected,
.person-option.selected {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--col_green);
}

.custom-color-wrapper {
    position: relative;
}



.custom-color-wrapper input[type="color"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}


/* --- NOVÁ SEKCE PRO KALENDÁŘE --- */

/* --- Velky kalendar (/calendar/): dnesni den --- */
.today-highlight-text {
    color: var(--col_green);
}

.calendar-day-tasks.calendar-today-cell {
    background-color: color-mix(in srgb, var(--col_green) 5%, var(--bg-page));
    border-color: var(--col_green);
}

/* --- Mini kalendar: dnesni den --- */
.today-highlight {
    border-color: var(--col_green) !important;
    background-color: color-mix(in srgb, var(--col_green) 8%, var(--bg-surface));
    color: var(--col_green);
}

/* --- Flatpickr: dnesni a vybrane datum --- */
.flatpickr-day.today {
    border-color: var(--col_green) !important;
    color: var(--col_green) !important;
}

.flatpickr-day.today:hover {
    background: var(--col_green) !important;
    color: white !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--col_green) !important;
    border-color: var(--col_green) !important;
    color: white !important;
}

.flatpickr-day.inRange {
    background: color-mix(in srgb, var(--col_green) 15%, white) !important;
    border-color: color-mix(in srgb, var(--col_green) 15%, white) !important;
    box-shadow: -5px 0 0 color-mix(in srgb, var(--col_green) 15%, white), 5px 0 0 color-mix(in srgb, var(--col_green) 15%, white) !important;
}

.calendar-grid {
    display: grid;
    gap: 0px 0px;
}

.calendar-header-row,
.calendar-task-row {
    display: contents;
}

#calendarViewFull .calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    transition: grid-template-columns 0.2s ease;
    align-items: stretch;
}

/* Week numbers visible - use 8 columns (narrow week col + 7 days) */
#calendarViewFull.show-week-numbers .calendar-grid {
    grid-template-columns: 2rem repeat(7, minmax(0, 1fr));
}

#calendarViewFull.show-week-numbers .calendar-week-number,
#calendarViewFull.show-week-numbers .calendar-week-number-header,
#calendarViewFull.show-week-numbers .calendar-week-number-spacer {
    display: block !important;
}

.calendar-week-row {
    display: contents;
}

/* Ve výchozím stavu skryjeme řádky s třídou .past-week */
#calendarViewFull .calendar-grid .past-week,
.calendar-view .calendar-grid .past-week {
    display: none !important;
}

/* Když JS přidá třídu .show-past, odhalíme je */
#calendarViewFull.show-past .calendar-grid .past-week,
.calendar-view.show-past .calendar-grid .past-week {
    display: contents !important;
    /* Musí být 'contents', protože to používáme pro řádky */
}

/* 1. Skryjeme rozdělovací tlačítko (to uprostřed) */
#calendar-toggle-top {
    display: block;
}

/* 2. Horní tlačítko je normálně vidět */
#calendar-toggle-divider {
    display: none;
}


/* Když je kalendář rozbalený (.show-past): */

/* 1. Zobrazíme rozdělovací tlačítko */
#calendarViewFull.show-past #calendar-toggle-top {
    display: block;
}

/* 2. A skryjeme to horní tlačítko */
#calendarViewFull.show-past #calendar-toggle-divider {
    display: block;
}


/* --- Nový styl pro přepínač týdnů v kalendáři --- */
.calendar-week-toggle {
    /* Roztáhne se přes všech 7 sloupců mřížky */
    grid-column: 1 / -1;

    width: 100%;
    text-align: center;
    padding: 0.5rem;
    /* 8px */
    font-weight: 600;
    /* font-semibold */
    font-size: 0.875rem;
    /* text-sm */
    color: #4B5563;
    /* text-gray-600 */
    background-color: var(--bg-raised);
    /* bg-gray-100 */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 4px;
    margin-bottom: 4px;
    border-radius: 8px;
}

.calendar-week-toggle:hover {
    background-color: #E5E7EB;
    /* bg-gray-200 */
}

/* * Optimalizace pro spodní lištu na /tasks
 * ID kontejneru je #calendarView (viz functions.php)
 */

/* Vzhled spodni listy (Glassmorphism) */
.calendar-view-bottom {
    border-top-color: var(--border);
}


/* === MOBIL (Výchozí stav): 7 sloupců === */
#calendarView .calendar-grid {
    grid-template-columns: repeat(7, minmax(30px, 1fr));
    gap: 2px 4px;
}

#calendarView .calendar-grid>.calendar-day-header-name:nth-child(n+8) {
    display: none;
}

#calendarView .calendar-header-row>*,
#calendarView .calendar-task-row>* {
    display: none;
}

#calendarView .calendar-header-row> :nth-child(-n+7),
#calendarView .calendar-task-row> :nth-child(-n+7) {
    display: flex;
}


/* === TABLET (min-width: 768px): 14 sloupců === */
@media (min-width: 768px) {
    #calendarView .calendar-grid {
        grid-template-columns: repeat(14, minmax(30px, 1fr));
    }

    #calendarView .calendar-grid>.calendar-day-header-name:nth-child(n+8) {
        display: block;
    }

    #calendarView .calendar-grid>.calendar-day-header-name:nth-child(n+15) {
        display: none;
    }

    #calendarView .calendar-header-row> :nth-child(-n+14),
    #calendarView .calendar-task-row> :nth-child(-n+14) {
        display: flex;
    }

    #calendarView .calendar-header-row> :nth-child(n+15),
    #calendarView .calendar-task-row> :nth-child(n+15) {
        display: none;
    }
}

/* === VELKÝ DESKTOP (min-width: 1920px): 28 sloupců === */
@media (min-width: 1920px) {
    #calendarView .calendar-grid {
        grid-template-columns: repeat(28, minmax(30px, 1fr));
    }

    #calendarView .calendar-grid>.calendar-day-header-name:nth-child(n+15) {
        display: block;
    }

    #calendarView .calendar-header-row> :nth-child(-n+28),
    #calendarView .calendar-task-row> :nth-child(-n+28) {
        display: flex;
    }
}


/* Jemný stín pro tasky ve velkém kalendáři */
#calendarViewFull .calendar-task-bar {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Na mobilu kompaktní tabulkový layout – bez paddingů a zaoblení */
@media (max-width: 640px) {
    #calendarViewFull .calendar-task-bar {
        font-size: 10px;
        padding: 2px 4px;
    }

    #calendarViewFull .calendar-day-container {
        padding: 0;
    }

    #calendarViewFull .calendar-day-tasks {
        border-radius: 0;
        border: none;
        box-shadow: none;
        padding: 0.1rem;
    }

    #calendarViewFull .calendar-day-num {
        padding: 3px 2px;
    }
}


/* --- NOVÉ: Styly pro globální plovoucí Widget --- */

@keyframes timerSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes timerSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.bg_overlay {
    background-color: color-mix(in srgb, var(--bg-menu) 70%, transparent);
    backdrop-filter: blur(16px);
    color: var(--text-primary);
}

/* --- Toast area: own stacking context so toasts appear above all modals --- */
/* Bottom is driven by --toast-area-bottom (set by JS syncToastPosition) so   */
/* toasts always stack above the hub widgets and respect the mini-calendar.   */
#toastArea {
    position: fixed;
    right: 1.5rem;
    bottom: var(--toast-area-bottom, 1.5rem);
    z-index: 9000;
    transition: bottom 0.3s ease-in-out;
}

.undo-toast-btn {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 6px;
    border: 1px solid var(--col_green);
    color: var(--col_green);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.undo-toast-btn:hover {
    background: var(--col_green);
    color: #fff;
}

/* --- Bottom-right hub: single container for all floating widgets + toasts --- */
.bottom-right-hub {
    position: fixed;
    right: 1.5rem;
    bottom: 0;
    padding-bottom: 1.5rem;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    transition: bottom 0.3s ease-in-out;
}

/* Fallback: when calendar is visible, push hub up (~9rem) until JS measures real height */
body.mini-calendar-open .bottom-right-hub {
    bottom: 9rem;
    /* Approx calendar height */
}

.global-timer-widget {
    border-radius: 0.75rem;
    /* rounded-xl */
    padding: 0.5rem 1rem;
    /* p-3 p-4 */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* gap-3 */
}

.global-timer-widget.timer-slide-in {
    animation: timerSlideIn 0.35s ease-out forwards;
}

.global-timer-widget.timer-slide-out {
    animation: timerSlideOut 0.25s ease-in forwards;
}

.global-timer-task-name {
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 600;
    /* font-semibold */
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid #4B5563;
    /* border-gray-600 */
    padding-right: 0.75rem;
}

.global-timer-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* gap-2 */
}

.global-timer-text {
    font-family: monospace;
    font-size: 1.5rem;
    line-height: 1.6rem;
    /* text-base */
    font-weight: 700;
}

.global-timer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    /* w-7 */
    height: 1.75rem;
    /* h-7 */
    border-radius: 9999px;
    background-color: #4B5563;
    /* bg-gray-600 */
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.global-timer-btn:hover {
    background-color: #6B7280;
    /* bg-gray-500 */
}

/* Ikony uvnitř tlačítek */
.global-timer-btn svg {
    width: 1rem;
    /* w-4 */
    height: 1rem;
    /* h-4 */
    stroke-width: 2.5;
}

#globalTimerPauseBtn {
    background-color: var(--timer-running);
}

#globalTimerPauseBtn:hover {
    background-color: var(--timer-running-h);
}

#globalTimerResumeBtn {
    background-color: var(--timer-paused);
}

#globalTimerResumeBtn:hover {
    background-color: var(--timer-paused-h);
}

/* --- Velká kulatá tlačítka v timeTrackerModal --- */
.timer-modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

#timer-start-btn,
#timer-pause-btn {
    background-color: var(--timer-running);
}

#timer-start-btn:hover,
#timer-pause-btn:hover {
    background-color: var(--timer-running-h);
}

#timer-pause-btn.timer-btn-paused {
    background-color: var(--timer-paused);
}

#timer-pause-btn.timer-btn-paused:hover {
    background-color: var(--timer-paused-h);
}

#timer-stop-btn {
    background-color: var(--col_red);
}

#timer-stop-btn:hover {
    background-color: var(--col_red_h);
}

#globalTimerStopBtn {
    background-color: var(--col_red);
}

#globalTimerStopBtn:hover {
    background-color: var(--col_red_h);
}

/* Ikona stop je menší */
#globalTimerStopBtn svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* --- Other Users' Active Timers --- */
.other-timers-container {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 0.375rem;
}

.other-timer-widget {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.625rem;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    min-width: 160px;
    max-width: 280px;
    min-height: 44px;
}

.other-timer-widget:not(.other-timer-presence) {
    border-left-color: #22c55e;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.other-timer-widget.timer-slide-in {
    animation: timerSlideIn 0.35s ease-out forwards;
}

.other-timer-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    flex-shrink: 0;
    object-fit: cover;
}

.other-timer-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #9ca3af;
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
}

.other-timer-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.2;
}

.other-timer-user {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.other-timer-task {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.other-timer-task-link {
    cursor: pointer;
    transition: color 0.15s;
}

.other-timer-task-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

.other-timer-time {
    font-family: monospace;
    font-size: 1rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.other-timer-pause-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background-color: #e5e7eb;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* .other-timer-paused {
    opacity: 0.75;
} */

/* Presence-only widget (user online but not timing) */
.other-timer-presence {
    padding: 0.375rem;
    min-width: auto;
    max-width: fit-content;
    gap: 0;
    border-left-width: 0;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.other-timer-presence .other-timer-avatar-initials {
    font-size: 0.75rem;
}

/* Presence → Timer expand animation */
.other-timer-widget.timer-expand {
    animation: timerExpand 0.35s ease-out forwards;
    overflow: hidden;
}

@keyframes timerExpand {
    from {
        max-width: 2.875rem;
        min-width: 0;
    }

    to {
        max-width: 280px;
        min-width: 160px;
    }
}

/* Timer → Presence shrink animation */
.other-timer-widget.timer-shrink {
    animation: timerShrink 0.35s ease-out forwards;
    overflow: hidden;
}

@keyframes timerShrink {
    from {
        max-width: 280px;
        min-width: 160px;
    }

    to {
        max-width: 2.875rem;
        min-width: 0;
    }
}

/* Aby hlavička tabulky zůstala vidět při skrolování */
#time-history-list {
    /* max-height: 400px; - REMOVED to fill modal height */
    position: relative;
    /* Nutné pro sticky header */
}

/* Prevent double scrollbar: overlay must not scroll, only #time-history-list inside does */
#timeTrackerModal {
    overflow-y: hidden;
}

/* Limit modal height so it fits within viewport (5rem top + 2rem bottom = default margins) */
/* overflow: hidden is required so flex-1 children respect max-height and #time-history-list scrolls internally */
#timeTrackerModal .modal-content {
    max-height: calc(100vh - 7rem - var(--banner-height, 0px));
    overflow: hidden;
}

@media (max-height: 600px) {
    #timeTrackerModal .modal-content {
        margin-top: calc(0.5rem + var(--banner-height, 0px));
        max-height: calc(100vh - 2.5rem - var(--banner-height, 0px));
        /* 0.5rem top + 2rem bottom */
    }
}

.time-tracker-live svg {
    width: 3rem;
    height: 1.75rem;
}

.time-history-table tr {
    border-style: none;

}

.time-history-table thead tr {
    position: sticky;
    top: -1px;
    /* Zarovná se přesně nahoru */
    z-index: 10;
}

/* Řádek se součtem za den */
.time-history-table tr.date-group-header td {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 0.5rem;
    border-top: 1px solid var(--border);
}

/* Řádek s celkovým součtem (Sticky Footer) */
.time-history-table tr.total-footer-row {
    position: sticky;
    /* <-- PŘIDÁNO */
    bottom: -1px;
    /* <-- PŘIDÁNO (zabrání mezeře) */
    z-index: 10;
    /* <-- PŘIDÁNO */

    background-color: #1F2937;
    /* bg-gray-800 */
    border-top: 2px solid #4B5563;
    /* border-gray-600 */
}

.time-history-table tr.total-footer-row td {
    font-weight: 700;
    /* Pozadí na TD je nutné, aby obsah při skrolování "prosvítal" */
    background-color: var(--bg-surface);
}



/* --- Styly pro Progress Bar na kartě úkolu --- */
.checklist-progress-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* 8px */
    margin-top: 0.5rem;
    /* 8px */
    padding-bottom: 0.25rem;
    /* 4px */
}

.checklist-progress-text {
    font-size: 0.75rem;
    /* 12px */
    font-weight: 600;
    /* semibold */
    white-space: nowrap;
}

.checklist-progress-bar {
    width: 100%;
    height: 6px;
    border-radius: 99px;
    overflow: hidden;
}

.checklist-progress-bar-inner {
    height: 100%;
    transition: width 0.3s ease;
}

/* --- Styly pro Checklist v Modálu --- */
.checklist-list {
    list-style: none;
    padding: 0;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* 8px */
    /* padding: 0.25rem; */
    border-radius: 6px;
}

.checklist-item.ghost-item {
    /* Pro SortableJS */
    opacity: 0.5;
    background: #555;
}

.checklist-item .checklist-item-checkbox {
    width: 1rem;
    /* 16px */
    height: 1rem;
    flex-shrink: 0;
}

.checklist-item .checklist-item-text {
    flex-grow: 1;
    font-size: 0.875rem;
    /* 14px */
    line-height: 1.25;
    outline: none;
    /* Skryje outline při editaci */
}

/* TaskEditor — non-input elements with border */
#task-dropzone,
#doc-file-dropzone,
#addDocumentBtn,
#task-share-container,
#notify-email-container label {
    border-color: var(--border);
}

#task-share-container {
    background-color: var(--bg-raised);
}

/* Read-only (tmavý modál) */
/* Read-only (tmavý modál) */
#taskEditorModal .checklist-item .checklist-item-text {
    background: transparent;
    border: 1px solid transparent;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    margin-left: -4px;
}

/* Editace (tmavý modál) */
#taskEditorModal.can-edit .checklist-item .checklist-item-text:focus {
    background: #C4D7FF;
    /* bg-gray-900 */
}

.checklist-item.done .checklist-item-text {
    opacity: 0.6;
}

.checklist-item-delete {
    background: none;
    border: none;
    color: #9CA3AF;
    /* text-gray-400 */
    cursor: pointer;
    padding: 4px;
    border-radius: 99px;
    display: none;
    /* Skryto defaultně */
    flex-shrink: 0;
}

.checklist-item-delete:hover {
    color: white;
    /* text-red-400 */
    background: #4B5563;
    /* bg-gray-600 */
}

/* Zobrazit delete jen při hoveru na položce (pokud není skrytý inline stylem z JS) */
.checklist-item:hover .checklist-item-delete {
    display: block;
}

/* Dropzone v modálu - menší verze */
#task-dropzone {
    min-height: 45px !important;
    padding: 0 !important;
    border-width: 2px;
    background-color: var(--bg-raised);
}

#task-dropzone:hover {
    background-color: var(--bg-hover);
}

/* Drag-over stav — sdílený pro task-dropzone (Dropzone.js přidává dz-drag-hover) i doc-file-dropzone */
#task-dropzone.dz-drag-hover,
#doc-file-dropzone.dz-drag-hover {
    border-color: var(--col_green) !important;
    background-color: rgba(var(--col_green_rgb), 0.07) !important;
}

#task-dropzone .dz-message {
    margin: 0 !important;
    /* Odstranit defaultní margin */
    padding: 0.5rem;
}

/* Aby se tlačítko "Vytvořit textový dokument" roztáhlo na výšku dropzone */
#addDocumentBtn {
    height: auto;
    display: inline-flex;
    align-items: center;
    background-color: var(--bg-interactive);
    color: var(--text-secondary);
}

#addDocumentBtn:hover {
    background-color: var(--bg-raised);
    color: var(--text-primary);
}

/* --- Image Preview Modal --- */

/* Přepisujeme defaultní chování .modal jen pro tento konkrétní */
#imagePreviewModal {
    display: none;
    /* Defaultně skryto */
    /* Ostatní flex/center vlastnosti jsou v Tailwind třídách v HTML */
}

.image-preview-close {
    top: calc(1rem + var(--banner-height, 0px));
}

/* Animace pro hezký nástup */
#imagePreviewModal.active {
    animation: fadeIn 0.2s ease-out;
}

/* Animace při zavírání */
#imagePreviewModal.closing {
    animation: fadeOut 0.18s ease-in forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Zajistíme, že obrázek se nikdy neroztáhne víc, než je okno */
#preview-image-element {
    display: block;
    /* max-height: 85vh a max-width: 100% řeší Tailwind */
}

/* Udělá výběrové okno v Cropperu kulaté */
.cropper-view-box,
.cropper-face {
    border-radius: 50%;
}


/* Disable animations/hover effects during drag to fix conflicts, but allow inline styles (Sortable) to work */
.task-grid.dragging-active .task-card-body,
.task-grid.dragging-active .task-card-body:hover {
    transform: none;
    transition: none;
}

/* Original rule commented out: 
.task-grid.dragging-active * {
    animation: none !important;
    transition: none !important;
} 
*/

/* During sorting: hide ALL drag handles to prevent visual glitches */
#group-list-pinned.is-sorting .pinned-drag-handle {
    display: none !important;
}

/* Smooth card appearance when added/moved */
@keyframes card-appear {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Cards added via JS get this animation */
.task-card[data-just-moved] .task-card-body {
    animation: card-appear 0.3s ease-out;
}

/* --- Image Preview Footer Theming --- */
.image-preview-footer {
    transition: background-color 0.3s, color 0.3s;
}

.image-preview-footer.is-dark span,
.image-preview-footer.is-dark a {
    color: #ffffff !important;
}

.image-preview-footer.is-dark a:hover {
    opacity: 0.8;
}

.image-preview-footer.is-light span,
.image-preview-footer.is-light a {
    color: #000000 !important;
}

.image-preview-footer.is-light a:hover {
    opacity: 0.7;
}

/* Edit button in preview */
#preview-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.editor-wrapper {
    border-width: 2px !important;
    border-radius: 0.5rem !important;
    border-color: var(--border-strong) !important;
    background-color: var(--bg-interactive);
}

.editor-wrapper:focus-within {
    border-color: var(--col_green) !important;
}

.editor-wrapper textarea {
    border: none !important;
    background: transparent;
    box-shadow: none;
    outline: none;
    resize: vertical;
}

.option-card {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.option-card:hover {
    border-color: var(--border-strong);
}

.option-card:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.45;
}

.option-card:has(input:disabled):hover {
    border-color: var(--border);
}

.option-card:has(input:checked) {
    border-color: var(--col_green);
    background-color: rgba(83, 173, 16, 0.1);
}

.option-card:has(input[type="radio"]:focus-visible) {
    outline: 2px solid var(--col_green);
    outline-offset: -1px;
}

.option-card input[type="radio"],
.option-card input[type="checkbox"] {
    accent-color: var(--col_green);
    flex-shrink: 0;
    outline: none;
}

/* Přílohy v task editoru */
.media-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem;
    border-radius: 0.25rem;
    margin-bottom: 0.25rem;
    background-color: var(--bg-interactive);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.media-item.renaming .media-click-area {
    overflow: visible;
    display: flex;
    align-items: center;
    min-width: 0;
}

.media-rename-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-interactive);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.875rem;
    outline: none;
}

.media-rename-input:focus {
    border-color: var(--col_green);
    box-shadow: 0 0 0 2px var(--col_green);
    box-shadow: 0 0 0 2px rgba(var(--col_green_rgb), 0.25);
}

.ql-toolbar.ql-snow {
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 6px;
}

.ql-toolbar .ql-stroke {
    stroke: var(--text-secondary) !important;
}

.ql-toolbar .ql-fill {
    fill: var(--text-secondary) !important;
}

.ql-toolbar .ql-picker-label {
    color: var(--text-secondary) !important;
}

.ql-toolbar button:hover .ql-stroke,
.ql-toolbar .ql-picker-label:hover .ql-stroke {
    stroke: var(--text-primary) !important;
}

.ql-toolbar button:hover .ql-fill,
.ql-toolbar .ql-picker-label:hover .ql-fill {
    fill: var(--text-primary) !important;
}

.ql-toolbar button:hover,
.ql-toolbar .ql-picker-label:hover {
    color: var(--text-primary) !important;
}

.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    background-color: var(--bg-interactive) !important;
}

.ql-editor {
    color: var(--text-primary);
}

.ql-container.ql-snow {
    border: none !important;
}

#add-description-editor,
#edit-description-editor {
    resize: vertical;
    overflow: auto;
    /* table context menus are appended to document.body, not clipped by this */
    min-height: 50px;
    max-height: 600px;
}

/* Inner editor content should scroll when needed */
#add-description-editor .ql-editor,
#edit-description-editor .ql-editor {
    overflow-y: auto;
    max-height: calc(600px - 42px);
    /* account for toolbar height */
}

/* Editor Embeds */
#add-description-editor img,
#edit-description-editor img,
.editor-image-embed {
    max-width: 120px;
    max-height: 120px;
    border-radius: 6px;
    cursor: pointer;
    margin: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: opacity 0.2s;
    vertical-align: middle;
}

.task-description-content img {
    max-width: 80px;
    max-height: 80px;
    border-radius: 6px;
    padding: 4px 0px;
    opacity: 0.75;
}

.line-clamp-10 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    line-clamp: 10;
}

#add-description-editor img:hover,
#edit-description-editor img:hover,
.editor-image-embed:hover {
    opacity: 0.9;
}

/* --- KARTA S AKTIVNÍM ČASOVAČEM (Zelený stín) --- */
.task-card.timer-active .task-card-body {
    --tw-shadow: 0 4px 20px 3px #58cf00, 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 20px 3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Timer Visuals - Paused State */
.task-card.timer-active.timer-paused .task-card-body {
    --tw-shadow: 0 4px 20px 3px #f59e0b, 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 20px 3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    animation: none !important;
}


a.editor-attachment-link {
    display: inline-flex;
    align-items: center;
    background-color: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    margin: 0 4px;
    font-size: 0.9em;
    color: var(--text-primary) !important;
    /* Override quill link color */
    cursor: pointer;
    text-decoration: none !important;
    vertical-align: middle;
}

a.editor-attachment-link:hover {
    background-color: #e5e7eb;
}

a.editor-attachment-link::before {
    content: 'đź“„';
    margin-right: 4px;
    font-size: 1.1em;
}

/* --- BIN STYLES OVERRIDES --- */
.task-grid .task-bin {
    margin-bottom: 0.25rem !important;
}

.task-bin:hover {
    transform: none !important;
    box-shadow: var(--tw-shadow) !important;
}

/* --- BIN BACKGROUND EXPANSION FALLBACK --- */
.task-bin.bin-expanded>div.absolute.z-\[-1\] {
    /*top: -10px !important;*/
    bottom: -10px !important;
    left: -10px !important;
    right: -10px !important;
}

.task-bin.bin-collapsed>div.absolute.z-\[-1\] {
    inset: 0 !important;
}

/* --- BIN EDIT BUTTON --- */
/* Pro rozbalenou složku (světlé průhledné pozadí) - tlačítko s tmavým stylem */
.task-bin.bin-expanded .bin-edit-btn,
.task-bin.bin-expanded .bin-add-btn {
    background-color: rgba(0, 0, 0, 0.1);
    color: #000000;
}

.task-bin.bin-expanded .bin-edit-btn:hover,
.task-bin.bin-expanded .bin-add-btn:hover {
    background-color: rgba(0, 0, 0, 0.25);
}

/* Pro sbalenou složku - barva závisí na barvě pozadí složky (světlá/tmavá) */
/* Sbalená složka s tmavým textem (světlé pozadí) */
.task-bin.bin-collapsed .bin-edit-btn,
.task-bin.bin-collapsed .bin-add-btn {
    background-color: rgba(0, 0, 0, 0.15);
    color: var(--text-full);
}

.task-bin.bin-collapsed .bin-edit-btn:hover,
.task-bin.bin-collapsed .bin-add-btn:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

/* Sbalená složka s bílým textem (tmavé pozadí) */
.task-bin.bin-collapsed[style*="--text-full: #ffffff"] .bin-edit-btn {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.task-bin.bin-collapsed[style*="--text-full: #ffffff"] .bin-edit-btn:hover {
    background-color: rgba(255, 255, 255, 0.35);
}

/* Note: bin-options-menu styles are now handled by .card-options-menu */

/* ================================================
   CALENDAR COMPONENT STYLES
   ================================================ */

/* Empty day hover hint — only for users with create_task permission (.can-add-task set by JS) */
#calendarViewFull.can-add-task .calendar-day-tasks:not(:has(.calendar-task-bar)):hover::after,
#calendarView.can-add-task .calendar-day-tasks:not(:has(.calendar-task-bar)):hover::after {
    content: '+';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text-primary);
    pointer-events: none;
}

/* Mini calendar: limit + hint height to avoid triggering scrollbar */
#calendarView.can-add-task .calendar-day-tasks:not(:has(.calendar-task-bar)):hover::after {
    height: 15px;
    margin-top: auto;
    margin-bottom: auto;
}

/* Day cell container — cursor reset for users without create_task permission */
#calendarViewFull:not(.can-add-task) .calendar-day-tasks,
#calendarView:not(.can-add-task) .calendar-day-tasks {
    cursor: default;
}

/* Day cell container */
.calendar-day-tasks {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.3rem;
    min-height: 97px;
    overflow-y: auto;
    cursor: pointer;
    position: relative;
    border-radius: 8px;
    border: 0.1rem solid var(--bg-raised);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition: border-color .2s, box-shadow .2s;
}

.calendar-day-tasks:hover {
    border-color: var(--border-strong);
}

/* Dashboard mini calendar */
.calendar-day-tasks.mini {
    min-height: 20px;
    max-height: 51px;
    gap: 2px;
    border: none;
    box-shadow: none;
    background-color: color-mix(in srgb, var(--bg-surface) 20%, transparent);
    border-color: color-mix(in srgb, var(--text-primary) 20%, transparent);
    border-style: solid;
    border-width: 1px;
}

/* Day container (full calendar row cell) */
.calendar-day-container {
    display: flex;
    flex-direction: column;
    min-height: 110px;
    padding: 4px;
}

.calendar-day-container.today {
    position: relative;
    z-index: 10;
}

/* Day number (label above the cell) */
.calendar-day-num {
    text-align: center;
    font-size: 11px;
    padding-bottom: 4px;
    transition: color .2s;
    color: var(--text-muted);
}

.calendar-day-num.today {
    font-weight: 700;
    color: var(--col_green);
}

/* Filler cell (empty day at month boundaries) */
.calendar-day-filler {
    min-height: 100px;
}

/* Day name header row */
.calendar-day-header-name {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 0;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Year navigation bar */
.year-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    padding: 0.25rem 0;
}

/* Week number column (hidden by default) */
.calendar-week-number,
.calendar-week-number-header {
    display: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    padding: 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Task bar base styles */
.calendar-task-bar {
    flex-shrink: 0;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* Task bar in full calendar */
.calendar-task-bar.full {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: left;
    border-radius: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Task bar in mini calendar */
.calendar-task-bar.mini {
    height: 12px;
    border-radius: 2px;
    font-size: 10px;
    line-height: 1rem;
    text-align: center;
}

/* Task bar hover effects */
.calendar-task-bar:hover {
    filter: brightness(1.18);
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.calendar-event-bar:hover {
    filter: brightness(0.88);
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Event bar - smaller vertical padding */
.calendar-event-bar.full {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}


.calendar-recurring-bar:hover {
    filter: brightness(1.12);
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.calendar-recurring-bar.full {
    padding-top: 2px;
    padding-bottom: 2px;
}

.calendar-recurring-bar.line-through {
    text-decoration: line-through;
}

/* Holiday bar */
.calendar-holiday {
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    text-align: left;
    border-radius: 0.375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background-color: #ecfdf5;
    color: #047857;
    border: 1px solid #d1fae5;
    margin-bottom: 2px;
}

/* Reminder bells row — zobrazuje se pod ostatními položkami v buňce dne */
.calendar-reminder-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    margin-top: auto;
    padding-top: 2px;
    flex-shrink: 0;
}

.calendar-reminder-bell {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    cursor: pointer;
    border-radius: 4px;
    padding: 1px;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.calendar-reminder-bell:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

.calendar-reminder-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.calendar-reminder-bell.mini .calendar-reminder-icon {
    width: 11px;
    height: 11px;
}

.calendar-reminder-count {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

/* Year navigation buttons (calendar + timeline) */
.timeline-nav-btn {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.timeline-nav-btn:hover {
    background: var(--bg-raised);
}

/* Time tracking page */
.time-stat-box {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
}

.time-chart-box,
.time-table-box {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
}

.time-table-box thead,
.time-table-box tfoot {
    background-color: var(--bg-raised) !important;
}

html.dark .time-task-row:hover,
html.dark .time-task-row:hover td {
    background-color: var(--bg-raised) !important;
}

/* Dark mode overrides — calendar */
html.dark .calendar-event-bar {
    background-color: var(--bg-surface) !important;
}

html.dark .calendar-holiday {
    background-color: color-mix(in srgb, #047857 15%, var(--bg-surface));
    color: #6ee7b7;
    border-color: #047857;
}



/* ================================================
   Semantic theming utilities
   Use CSS variables directly — auto-adapt to any theme
   without needing html.dark overrides
   ================================================ */

/* --- Surface / panel --- */
.page-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dropdown-panel {
    background-color: var(--bg-menu);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    z-index: 1060;
}

html.dark .dropdown-panel {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Muted strip inside a panel (header/footer bars) */
.panel-muted {
    background-color: var(--bg-raised);
    border-color: var(--border);
}

/* --- Buttons --- */
/* Ghost / outline button */
.btn-ghost {
    background-color: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-ghost:hover {
    background-color: var(--bg-raised);
    color: var(--text-primary);
}

/* Muted button (e.g. ARES lookup, cancel) */
.btn-muted {
    background-color: var(--bg-raised);
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
}

.btn-muted:hover {
    background-color: var(--bg-interactive);
    color: var(--text-primary);
}

/* --- List item states --- */
.item-hover {
    color: var(--text-secondary);
}

.item-hover:hover {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

.item-active {
    background-color: var(--bg-raised);
    color: var(--text-primary);
}

/* --- Text levels --- */
.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-muted {
    color: var(--text-muted);
}

/* --- Background levels --- */
.bg-surface {
    background-color: var(--bg-surface);
}

.bg-raised {
    background-color: var(--bg-raised);
}

.bg-interactive {
    background-color: var(--bg-interactive);
}

/* --- Border --- */
.border-theme {
    border-color: var(--border);
}

/* --- Box containers --- */
.bg_box_01 {
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: 1px solid var(--border);
    padding: 1.25rem;
    margin-bottom: 2rem;
}

.bg_box_02 {
    background-color: var(--bg-raised);
    border-radius: 0.5rem;
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.08);
    border: 1px solid var(--border);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

html.dark .bg_box_02 {
    background-color: #1c2027;
    border-radius: 0.5rem;
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.5);
    border: 1px solid #272e37;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.divide-theme> :not([hidden])~ :not([hidden]) {
    border-color: var(--border);
}

/* --- Hover utilities (themeable counterparts to Tailwind hover:bg-gray-*) --- */
.hover\:text-primary:hover {
    color: var(--text-primary);
}

.hover\:text-secondary:hover {
    color: var(--text-secondary);
}

.hover\:bg-raised:hover {
    background-color: var(--bg-raised);
}

.hover\:bg-interactive:hover {
    background-color: var(--bg-interactive);
}

.hover\:bg-hover:hover {
    background-color: var(--bg-hover) !important;
}

/* --- Special: profit badge --- */
.badge-profit {
    background-color: #f0fdf4;
    border-color: rgba(74, 222, 128, 0.25);
}

html.dark .badge-profit {
    background-color: color-mix(in srgb, #16a34a 10%, var(--bg-surface));
    border-color: rgba(22, 163, 74, 0.25);
}

/* ================================================
   Dark mode — Tabulator library (budgets page)
   Higher specificity overrides inline <style> block
   ================================================ */

html.dark .tabulator {
    border-color: var(--border);
    background-color: var(--bg-page);
    color: var(--text-primary);
}

html.dark .tabulator .tabulator-header,
html.dark .tabulator .tabulator-header .tabulator-col {
    background-color: var(--bg-raised);
    border-color: var(--border);
    color: var(--text-secondary);
}

/* Header column hover — subtle */
html.dark .tabulator .tabulator-header .tabulator-col:hover {
    background-color: var(--bg-interactive) !important;
}

/* Cells — border + text only, no bg (inherits from row) */
html.dark .tabulator .tabulator-cell {
    border-right-color: var(--border);
    color: var(--text-primary);
}

/* Odd rows */
html.dark .tabulator .tabulator-row,
html.dark .tabulator .tabulator-row .tabulator-cell {
    background-color: var(--bg-surface) !important;
    border-bottom-color: var(--border);
}

/* Even rows — subtle alternating */
html.dark .tabulator .tabulator-row.tabulator-row-even,
html.dark .tabulator .tabulator-row.tabulator-row-even .tabulator-cell {
    background-color: color-mix(in srgb, var(--bg-raised) 30%, var(--bg-surface)) !important;
}

/* Hover — both row and cells must be overridden */
html.dark .tabulator .tabulator-row:hover,
html.dark .tabulator .tabulator-row:hover .tabulator-cell {
    background-color: var(--bg-raised) !important;
}

/* Inline editing inputs/selects */
html.dark .tabulator .tabulator-editing input,
html.dark .tabulator .tabulator-cell input,
html.dark .tabulator .tabulator-cell select {
    background-color: var(--bg-interactive) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* ================================================
   MOBILE RESPONSIVE STYLES
   ================================================ */

/* --- MODAL ACTION BUTTONS (Mobile) --- */
@media (max-width: 640px) {

    /* Stack modal action buttons vertically on mobile */
    #edit-modal-actions {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }

    /* Submit button - full width on mobile */
    #edit-modal-actions #taskEditorSubmitBtn {
        width: 100%;
        margin-left: 0;
    }

    /* Action buttons container - center align */
    #edit-modal-actions #edit-modal-left-actions {
        width: 100%;
        justify-content: center;
        gap: 0.5rem;
    }
}

/* --- MODAL BUTTON HEIGHTS (All screens) --- */
#edit-modal-actions {
    gap: 1rem;
}

/* Unified height for action icon buttons */
/* Note: Don't use display:flex !important as it overrides JS display:none */
#edit-modal-left-actions .btn {
    height: 3rem;
    width: 3rem;
    padding: 0 !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

/* Submit button consistent height */
#edit-modal-actions #taskEditorSubmitBtn {
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- MODAL MOBILE PADDING --- */
@media (max-width: 640px) {

    /* Modal content - reduce padding on mobile */
    .modal .modal-padding {
        padding: 1rem;
    }

    /* Modal border - thinner on mobile */
    .modal .modal-content {
        border-width: 6px;
        margin-top: calc(1rem + var(--banner-height, 0px));
    }
}

/* --- HEADER DASHBOARD SELECTOR (Mobile) --- */
@media (max-width: 480px) {

    /* Dashboard menu button - default styling preserved */

    /* Tighter truncation for dashboard name */
    #dashboardMenuBtn>span.truncate {
        max-width: 80px;
    }

    /* Hide owner label on small screens */
    #dashboardMenuBtn>span.text-xs {
        display: none;
    }
}

/* --- VERY SMALL SCREENS (under 400px) --- */
/* (no overrides needed — compact styles from ≤640px block handle narrow viewports) */

/* --- PINNED TABS BAR --- */
.pinned-tab-item {
    white-space: nowrap;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;

    /* Sortable styly */
    user-select: none;
    /* cursor: grab; - Volitelné, browser default je často ok, ale pro sortable se hodí */
}

.pinned-tab-item:active {
    cursor: pointer;
}

/* --- STAVY KARET --- */

/* 1. AktivnĂ­ karta */
.pinned-tab-item.is-active {
    color: var(--text-primary);
    /* text-gray-700 */
    background-color: var(--border);
    font-weight: 700;
}

.pinned-tab-item.is-active:hover {
    background-color: var(--border-strong);
}

/* 2. NeaktivnĂ­ karta */
.pinned-tab-item.is-inactive {
    color: var(--text-muted);
    /* text-gray-400 */
}

.pinned-tab-item.is-inactive:hover {
    color: var(--text-primary);
    /* hover:text-gray-700 */
    background-color: var(--bg-surface);
    /* hover:bg-gray-50 */
}

/* PrĹŻhlednost ikony (img) u neaktivnĂ­ karty */
.pinned-tab-item.is-inactive img,
.pinned-tab-item.is-inactive .dashboard-icon-div {
    /* Pokud je ikona jako div s iniciálami */
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

/* Při hoveru ikonu plně zobrazíme */
.pinned-tab-item.is-inactive:hover img,
.pinned-tab-item.is-inactive:hover .dashboard-icon-div {
    opacity: 1;
}


/* Při přetahování */
#pinned-tabs-bar nav.is-sorting .pinned-tab-item {
    cursor: grabbing;
}

/* Ghost element při přetahování */
#pinned-tabs-bar .sortable-ghost {
    opacity: 0.4;
}

/* --- USER MENU: Hide section titles on small viewport height --- */
@media (max-height: 760px) {
    #userMenuDropdown .section-title {
        display: none;
    }
}

/* --- REMINDER TOAST POSITIONING (left side, independent of hub) --- */
:root {
    --toast-safe-bottom: 1.5rem;
}

body.mini-calendar-open {
    --toast-safe-bottom: calc(9rem + 1.5rem);
    /* Fallback until JS measures real calendar height */
}

#reminderToastContainer {
    bottom: var(--toast-safe-bottom) !important;
    transition: bottom 0.3s ease-in-out;
}


/* Quill TableUp popup z-index fix (must be above modals) */
.ql-table-up-container,
.table-up-container,
.ql-table-creator,
.table-creator,
[class*="table-up"],
[class*="tableUp"] {
    z-index: 9999 !important;
}


/* quill-table-better popups z-index fix */
div[class*="ql-table-better"] {
    z-index: 10001 !important;
}

/* quill-table-better toolbar icon — SVG uses inline fill="#515151" on path elements */
.ql-toolbar button.ql-table-better svg path {
    fill: var(--text-secondary) !important;
}

.ql-toolbar button.ql-table-better:hover svg path {
    fill: var(--text-primary) !important;
}

/* Ensure Quill picker options are also visible above modals */
.ql-picker-options {
    z-index: 10001 !important;
}

/* Quill checklist styling for read-only document view (#doc-view-content)
   Mirrors .ql-editor rules from quill.snow.css, scoped to our read-only container */
#doc-view-content li[data-list="unchecked"],
#doc-view-content li[data-list="checked"] {
    list-style-type: none;
    pointer-events: none;
}

#doc-view-content li[data-list="unchecked"]>.ql-ui,
#doc-view-content li[data-list="checked"]>.ql-ui {
    pointer-events: all;
    cursor: pointer;
}

#doc-view-content li[data-list="unchecked"]>.ql-ui::before {
    content: '\2610';
    margin-right: 4px;
    font-size: 1.1em;
}

#doc-view-content li[data-list="checked"]>.ql-ui::before {
    content: '\2611';
    margin-right: 4px;
    font-size: 1.1em;
    color: #16a34a;
}

#doc-view-content li[data-list="checked"] {
    text-decoration: line-through;
    color: #9ca3af;
}

/* Override default Quill table styles */
.ql-editor table {
    width: 100%;
    border-collapse: collapse;
}

.ql-editor td,
.ql-editor th {
    border: 1px solid #ccc;
    padding: 5px;
}

/* Budget Attachments */
.tabulator .tabulator-row {
    min-height: 40px;
}

.tabulator .tabulator-cell img.object-cover {
    display: block;
    max-width: 100%;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.tabulator-row.tabulator-selected {
    background-color: #f5f7ff !important;
}

.tabulator-row.tabulator-selected .tabulator-cell {
    background-color: transparent !important;
}

/* Budget Attachments Thumbnails */
.tabulator .tabulator-cell img.budget-thumb {
    display: block;
    max-width: 100%;
    transition: transform 0.15s ease-in-out;
}

.tabulator .tabulator-cell img.budget-thumb:hover {
    transform: scale(1.1);
}

/* --- PAGE TAB NAVIGATION --- */
.tab-nav-wrapper {
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
}

.tab-nav {
    margin-bottom: -1px;
    display: flex;
    gap: 1rem;
}

@media (min-width: 640px) {
    .tab-nav {
        gap: 2rem;
    }
}

.tab-nav-item {
    white-space: nowrap;
    padding: 0.8rem 0.25rem;
    border-bottom: 3px solid transparent;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    outline: none;
    transition: color 0.15s, border-color 0.15s;
}

.tab-nav-item:hover {
    color: var(--text-primary);
    border-bottom-color: var(--border-strong);
}

.tab-nav-item.active {
    color: var(--col_green);
    border-bottom-color: var(--col_green);
}

/* --- GANTT / PACKED TIMELINE --- */
.tab-nav-separator {
    width: 2px;
    background: var(--border);
    align-self: stretch;
    margin: 15px 0;
    flex-shrink: 0;
}

.gantt-wrap {
    position: relative;
    padding-bottom: 16px;
}

.gantt-axis {
    position: relative;
    height: 24px;
    margin-bottom: 6px;
}

.gantt-axis-label {
    position: absolute;
    font-size: 11px;
    color: var(--text-muted);
    transform: translateX(-50%);
    white-space: nowrap;
    user-select: none;
}

.gantt-grid-line {
    position: absolute;
    top: 28px;
    width: 1px;
    background: var(--border);
    opacity: 0.6;
    pointer-events: none;
}

.gantt-canvas {
    position: relative;
    width: 100%;
    overflow: visible;
}

.gantt-bar {
    position: absolute;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.85;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.12s, box-shadow 0.12s;
}

.gantt-bar:hover {
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    z-index: 10;
}

.gantt-bar-label {
    padding: 0 7px;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.gantt-today-line {
    position: absolute;
    top: 0;
    width: 2px;
    background: rgba(239, 68, 68, 0.65);
    pointer-events: none;
    z-index: 5;
}


.gantt-undated-section {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.gantt-undated-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gantt-undated-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gantt-undated-task {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.1s;
}

.gantt-undated-task:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.gantt-undated-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* File Group Card */
.file-group-card {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background-color: var(--bg-interactive);
    overflow: hidden;
    flex: 1 1 auto;
    max-width: 100%;
}

.file-group-header {
    background-color: var(--bg-surface);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--bg-raised);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-item-card {
    position: relative;
    background-color: var(--bg-interactive);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 7rem;
}

.file-item-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.file-item-delete-btn {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.file-item-delete-btn:hover {
    transform: scale(1.1);
}

.file-item-doc-badge {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--col_grey);
    color: #fff;
}

/* === TITLES ONLY MODE === */
/* When .titles-only-mode class is on body, hide task card content */
body.titles-only-mode .task-card-body .task-card-content>*:not(h3) {
    display: none !important;
}

body.titles-only-mode .task-card-body .task-card-content h3 {
    margin-bottom: 0;
}

/* === TITLES ONLY MODE === */

/* Base transitions for smooth toggling */
.task-card-body,
.task-card-body .task-card-gallery,
.task-card-body .task-card-content>*,
.task-card-body .task-card-footer {
    transition: all 0.15s ease-out;
}

/* When .titles-only-mode class is on body, hide task card content */
body.titles-only-mode .task-card-body .task-card-content>*:not(h3) {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

body.titles-only-mode .task-card-body .task-card-content h3 {
    margin-bottom: 0;
}

/* Reduce gallery height in titles only mode */
body.titles-only-mode .task-card-body .task-card-gallery {
    height: 5rem !important;
}

/* Hide progress bars in titles only mode */
body.titles-only-mode .task-card-body>div:last-child>*:not(.task-card-footer) {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

/* Keep footer visible but compact */
body.titles-only-mode .task-card-body .task-card-footer {
    margin-top: 0.25rem;
}

/* In list view (grid-size-4) + titles-only: let h3 fill the full available width */
body.titles-only-mode .grid-size-4 .task-grid .task-card-body .task-card-content h3 {
    width: auto !important;
    flex: 1 !important;
}

/* --- Reusable Tooltip --- */
.ui-tooltip-wrapper {
    isolation: isolate;
    position: relative;
}

.ui-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 420px;
    padding: 0.75rem;
    background-color: #1f2937;
    /* Tailwind gray-800 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f3f4f6;
    /* Tailwind gray-100 */
    font-size: 0.75rem;
    line-height: 1.25;
    text-align: left;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    transition: opacity 0.2s ease-out, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    font-weight: 400;
    transform: translateY(20px) scale(0.92);
    opacity: 0;
    visibility: hidden;
}

.ui-tooltip.ui-tooltip-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.ui-tooltip.tooltip-bottom {
    transform: translateY(-20px) scale(0.92);
}

.ui-tooltip.ui-tooltip-visible.tooltip-bottom {
    transform: translateY(0) scale(1);
}


.ui-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #1f2937 transparent transparent transparent;
}

/* Fix text escaping borders on hover */
.ui-tooltip-wrapper:hover .ui-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-8px);
}

.ui-tooltip-header {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.ui-tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    opacity: 0.9;
}

/* Green bullet points inside light tooltip - using ::before for reliability */
.ui-tooltip.ui-tooltip-light ul {
    list-style: none;
    padding-left: 0;
}

.ui-tooltip.ui-tooltip-light li {
    position: relative;
    padding-left: 0.85rem;
}

.ui-tooltip.ui-tooltip-light li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--col_green);
    font-size: 1em;
    line-height: inherit;
}


/* --- Tooltip Modifiers --- */
.ui-tooltip.ui-tooltip-light {
    background-color: #ffffff;
    color: var(--text-primary);
    /* Tailwind gray-700 */
    border: 1px solid var(--border-strong);
    /* Tailwind gray-300 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.ui-tooltip.ui-tooltip-light::after {
    border-color: #d1d5db transparent transparent transparent;
}

.ui-tooltip.ui-tooltip-light::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
    z-index: 210;
}

.ui-tooltip.ui-tooltip-light .ui-tooltip-header {
    color: #4b5563;
    /* gray-600 */
    border-bottom: 1px solid var(--border);
    /* gray-200 */
    opacity: 1;
}

/* Position mapping: Left-aligned (for elements cramped on the left edge) */
.ui-tooltip.align-left {
    left: 0;
}

.ui-tooltip.align-left::after {
    left: 20px;
    transform: none;
}

.ui-tooltip.align-left::before {
    left: 21px;
    transform: none;
}

/* --- Tooltip Bottom Modifier (Dynamically added by JS) --- */
.ui-tooltip.tooltip-bottom {
    bottom: auto;
    top: 100%;
}

.ui-tooltip.tooltip-bottom::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent #1f2937 transparent;
}

.ui-tooltip.ui-tooltip-light.tooltip-bottom::after {
    border-color: transparent transparent #d1d5db transparent;
}

.ui-tooltip.ui-tooltip-light.tooltip-bottom::before {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent #ffffff transparent;
}

/* --- Comments Modal: hover actions (same technique as task-detail.css) --- */
.comment-item .comment-actions {
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.comment-item:hover .comment-actions.can-show {
    opacity: 1;
    pointer-events: auto;
}

/* --- Task Notes: hover actions (modal) --- */
.task-note-item .note-actions {
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.task-note-item:hover .note-actions.can-show {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================================
   MODULE NOTICE BANNER
   ========================================================= */

.module-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: rgba(var(--bg-notice), 0.07);
    border: 1px solid rgba(var(--bg-notice), 0.22);
    font-size: 0.875rem;
    color: rgb(var(--bg-notice));
    line-height: 1.5;
}

.module-notice svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: rgb(var(--bg-notice));
}

.module-notice a {
    font-weight: 600;
    text-decoration: underline;
    color: inherit;
}

.module-notice a:hover {
    opacity: 0.75;
}

/* =========================================================
   DARK MODE OVERRIDES
   ========================================================= */

html.dark {
    color-scheme: dark;

    --bg-notice: 251, 146, 60;

    --bg-page: #121317;
    --bg-surface: #1f2937;
    --bg-raised: #2d3748;
    --bg-interactive: #374151;
    --bg-menu: #171e26;

    --bg-hover: #374151;

    --border: #374151;
    --border-strong: #4b5563;

    --text-primary: #f9fafb;
    --text-secondary: #aab6c8;
    --text-muted: #9ca3af;
}

/* --- Body & layout --- */
html.dark body {
    background: var(--bg-page);
    color: var(--text-primary);
}

html.dark #mainContainer {
    background: var(--bg-page);
}

/* --- Header --- */
html.dark .header-top {
    background: var(--bg-surface);
    border-color: var(--border);
    color: var(--text-muted);
}

html.dark #userMenuName {
    color: var(--text-muted);
}

html.dark .header-btn:not(.dark) {
    color: var(--text-muted);
    border-color: var(--border);
    background: transparent;
}

html.dark .header-btn:not(.dark):hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Active view button — restore green border in dark mode */
html.dark .header-btn.active {
    background-color: var(--bg-raised);
    border-color: var(--col_green);
    color: var(--text-primary);
}

/* Accent "Přidat" button — inverted in dark mode (light bg / dark text) */
html.dark .header-btn.dark {
    background-color: var(--text-primary);
    color: var(--bg-page);
    border-color: transparent;
}

html.dark .header-btn.dark:hover {
    background-color: #ffffff;
    color: var(--bg-page);
}

html.dark .header-search input {
    background: var(--bg-interactive);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

html.dark .header-search input::placeholder {
    color: #6b7280;
}

/* --- Task cards --- */
html.dark .task-card-body {
    background: var(--bg-surface);
    border-color: var(--border);
    /* color záměrně nepřepisujeme — řídí ho is-light / is-dark třídy */
}

html.dark .task-card-body:hover {
    background: #243448;
}

/* --- Section/column headers --- */
html.dark .section-header,
html.dark .column-header {
    background: var(--bg-surface);
    border-color: var(--border);
    color: var(--text-primary);
}

/* --- Modals --- */
html.dark .modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

html.dark .modal-content,
html.dark [class*="modal-box"],
html.dark [class*="modal-body"] {
    background: var(--bg-surface);
    color: var(--text-primary);
}

html.dark .modal-header,
html.dark .modal-footer {
    background: var(--bg-surface);
    border-color: var(--border);
}

/* --- Inputs, selects, textareas --- */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html.dark select,
html.dark textarea {
    background: var(--bg-interactive);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--text-muted);
}

html.dark select option {
    background: var(--bg-interactive);
    color: var(--text-primary);
}

/* --- Dropdowns & menus --- */
html.dark .dropdown-menu,
html.dark [class*="dropdown-content"] {
    background: var(--bg-surface);
    border-color: var(--border);
}

html.dark .dropdown-item,
html.dark [class*="dropdown-item"] {
    color: var(--text-secondary);
}

html.dark .dropdown-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

html.dark .userMenuButtons {
    background: var(--bg-surface) !important;
}

html.dark #userMenuDropdown .userMenuButtons a,
html.dark #userMenuDropdown .userMenuButtons button {
    color: var(--text-muted);
}

html.dark #userMenuDropdown .userMenuButtons a:hover,
html.dark #userMenuDropdown .userMenuButtons button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Bez nadbytečného .userMenuButtons v selektoru — drží nižší specificitu,
   aby ji běžné hover/stavové třídy (.section-toggle:hover) mohly přebít.
   background se nenastavuje: titulek dědí --bg-surface z rodiče .userMenuButtons */
html.dark #userMenuDropdown .section-title {
    color: #6b7280;
    border-bottom-color: var(--border);
}

html.dark .userMenuButtons .border-t {
    border-color: var(--border);
}


/* --- Sidebar & panels --- */
html.dark .sidebar,
html.dark [class*="side-panel"],
html.dark [class*="filter-panel"] {
    background: var(--bg-surface);
    border-color: var(--border);
}

/* --- Tables --- */
html.dark table {
    color: var(--text-primary);
}

html.dark th {
    color: var(--text-secondary);
    border-color: var(--border-strong);
}

html.dark tr:hover td {
    background: #243448;
}

/* Tabulky v popisu úkolu (karta, read-only view, detail) nejsou interaktivní
   — globální dark hover zvýraznění řádků se na ně nemá aplikovat */
html.dark .task-description-content tr:hover td,
html.dark .read-only-content tr:hover td,
html.dark .td-description tr:hover td {
    background: transparent;
}

/* --- Badges & pills --- */
html.dark .badge,
html.dark [class*="badge-"] {
    border-color: var(--border);
}

/* --- Buttons --- */
html.dark [class*="btn-outline"] {
    background: var(--bg-interactive);
    border-color: var(--border-strong);
    color: var(--text-primary);
}


/* --- Tooltips --- */
html.dark .ui-tooltip.ui-tooltip-light {
    background-color: var(--bg-raised);
    border-color: var(--border);
}

html.dark .ui-tooltip.ui-tooltip-light::after {
    border-color: var(--border) transparent transparent transparent;
}

html.dark .ui-tooltip.ui-tooltip-light::before {
    border-color: var(--bg-raised) transparent transparent transparent;
}

html.dark .ui-tooltip.ui-tooltip-light.tooltip-bottom::after {
    border-color: transparent transparent var(--border) transparent;
}

html.dark .ui-tooltip.ui-tooltip-light.tooltip-bottom::before {
    border-color: transparent transparent var(--bg-raised) transparent;
}

html.dark .ui-tooltip.ui-tooltip-light .ui-tooltip-header {
    color: var(--text-muted);
}

/* --- Dividers --- */
html.dark hr,
html.dark .divider {
    border-color: var(--border);
}

/* --- Code blocks --- */
html.dark pre,
html.dark code {
    background: var(--bg-interactive);
    color: var(--text-primary);
}

html.dark .tab-nav-wrapper,
html.dark .tab-nav {
    border-color: var(--border);
}

html.dark .tab-nav-item {
    color: var(--text-muted);
}

html.dark .tab-nav-item.active,
html.dark .tab-nav-item:hover {
    color: var(--text-primary);
}

/* --- Pinned tabs --- */
html.dark #pinned-tabs-bar {
    border-color: var(--border);
}


/* --- Sticky header wrapper --- */
#sticky-header-wrap {
    position: sticky;
    top: var(--banner-height, 0px);
    z-index: 1060;
    background: var(--bg-page);
    min-width: 350px;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    will-change: transform;
    padding-bottom: 1rem;
    transition: transform 0.25s ease;
}

/* Eliptický stín pod headerem — jen při scrollu */
#sticky-header-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    width: 100%;
    height: 20px;
    background: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.18) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#sticky-header-wrap.is-scrolled::after {
    opacity: 1;
}


/* --- Scrollbar (Webkit) --- */
html.dark ::-webkit-scrollbar-track {
    background: var(--bg-surface);
}

html.dark ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* --- Expanded bin (folder) --- */
/* !important needed to override Tailwind's text-black on the wrapper */
html.dark .task-bin.bin-expanded .bin-header {
    color: var(--text-on-dark) !important;
}

html.dark .task-bin.bin-expanded .bin-edit-btn,
html.dark .task-bin.bin-expanded .bin-add-btn {
    color: var(--text-on-dark) !important;
    background-color: rgba(255, 255, 255, 0.15);
}

html.dark .task-bin.bin-expanded .bin-edit-btn:hover,
html.dark .task-bin.bin-expanded .bin-add-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* --- Tailwind gray utility overrides (text + border — bezpečné globálně) --- */
html.dark .text-gray-400 {
    color: var(--text-muted) !important;
}

html.dark .text-gray-500,
html.dark .text-gray-600 {
    color: var(--text-secondary) !important;
}

html.dark .text-gray-700,
html.dark .text-gray-800,
html.dark .text-gray-900 {
    color: var(--text-primary) !important;
}

html.dark .text-gray-900\/70,
html.dark .text-gray-900\/60,
html.dark .text-gray-900\/50 {
    color: var(--text-secondary) !important;
}

html.dark .divide-gray-100,
html.dark .divide-gray-200,
html.dark .divide-gray-300,
html.dark .divide-gray-100>*,
html.dark .divide-gray-200>*,
html.dark .divide-gray-300>*,
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 {
    border-color: var(--border) !important;
}

/* --- Background utility overrides --- */
html.dark .bg-gray-50 {
    background-color: var(--bg-surface) !important;
}

html.dark .bg-gray-100 {
    background-color: var(--bg-raised) !important;
}

html.dark .bg-gray-200 {
    background-color: var(--border) !important;
}

/* ============================================================
   Stop Timer Timeline (stopTimerConfirmModal)
   Reuses td-timeline-* classes from task-detail.css (copied
   here because task-detail.css is only loaded on /task/).
   ============================================================ */

/* Shared td-timeline primitives (subset needed outside /task/) */
.td-timeline-track {
    position: relative;
    height: 14px;
    background-color: var(--border);
    border-radius: 9999px;
    overflow: visible;
    margin: 8px 0 0;
}

.td-period-fill {
    position: absolute;
    top: 0;
    height: 100%;
    background-color: rgba(59, 130, 246, 0.3);
    border-radius: 9999px;
    pointer-events: none;
}

.td-date-marker {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid white;
    z-index: 10;
    cursor: default;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.td-date-marker[data-drag-type] {
    cursor: grab;
}

.td-date-marker.td-drag-active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 20;
}

.td-timeline-labels {
    position: relative;
    height: 1rem;
    margin-top: 0.5rem;
}

.td-timeline-label {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
    font-weight: 500;
    line-height: 1;
}

.td-timeline-tooltip {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 0;
    transform: translateX(-50%);
    background-color: #1f2937;
    color: #ffffff;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 30;
    opacity: 0;
    transition: opacity 0.1s ease;
    line-height: 1.5;
}

.td-timeline-tooltip.visible {
    opacity: 1;
}

.td-timeline-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #1f2937;
}

/* Stop-timer specific */
#stop-timer-tl-wrap,
.tl-box {
    padding: 8px 4px 4px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.stop-tl-track-row {
    padding: 0 20px 6px;
}

/* Other-entry row above the main track (single shared row) */
#stop-timer-tl-other {
    padding: 4px 20px 2px;
}

.stop-tl-other-row {
    position: relative;
    z-index: 20;
    height: 14px;
    background: var(--bg-interactive);
    border-radius: 9999px;
}

.stop-tl-other-fill {
    position: absolute;
    top: 0;
    height: 100%;
    min-width: 14px;
    border-radius: 9999px;
    opacity: 0.7;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.stop-tl-other-label {
    position: absolute;
    font-size: 0.6rem;
    color: var(--text-secondary);
    white-space: nowrap;
    top: -12px;
    transform: translateX(-50%);
    pointer-events: none;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hour dots — absolutely positioned to align with hour labels */
.stop-tl-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Break segment (grey, end of work period) */
#stop-tl-break-fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: #fdcf9da1;
    border-radius: 0 9999px 9999px 0;
    pointer-events: none;
}

/* Hour tick marks on main track */

/* Start handle — blue */
.stop-tl-handle-start {
    background-color: #3b82f6;
}

/* End handle — red */
.stop-tl-handle-end {
    background-color: #ef4444;
}

/* ── Tracker modal timeline ─────────────────────────────────────────────────── */
#tracker-tl-wrap {
    padding: 6px 20px 0px 20px;
}

.stop-tl-other-fill:hover,
.stop-tl-other-fill.tl-fill-hover {
    opacity: 1 !important;
    outline: 2px solid var(--col_green);
    outline-offset: 2px;
    z-index: 25;
}

#time-history-list tr[data-entry-id]:hover td,
tr.tl-row-hover td {
    background-color: rgba(var(--col_green_rgb), 0.08) !important;
}

/* ── Toggle switch ─────────────────────────────────────────────────────────── */
/* Usage:
   <div class="toggle-wrap">
     <input type="checkbox" class="toggle-input">
     <span class="toggle-track"></span>
   </div>
*/
.toggle-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.toggle-input {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.toggle-track {
    position: relative;
    display: inline-block;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 9999px;
    background-color: #d1d5db;
    transition: background-color 0.2s, box-shadow 0.15s;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle-track::after {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background-color: #fff;
    box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.toggle-wrap:hover .toggle-track {
    background-color: #b0b7c0;
}

.toggle-input:checked~.toggle-track,
.toggle-input:checked+.toggle-track {
    background-color: var(--col_green);
}

.toggle-wrap:hover .toggle-input:checked~.toggle-track,
.toggle-wrap:hover .toggle-input:checked+.toggle-track {
    background-color: #45941d;
}

.toggle-input:checked~.toggle-track::after,
.toggle-input:checked+.toggle-track::after {
    transform: translateX(1.25rem);
}

.toggle-input:focus-visible~.toggle-track,
.toggle-input:focus-visible+.toggle-track {
    outline: 0.125rem solid #93c5fd;
    outline-offset: 0.125rem;
}

/* Small size variant */
.toggle-track--sm {
    width: 2.25rem;
    height: 1.25rem;
}

.toggle-track--sm::after {
    width: 1rem;
    height: 1rem;
}

.toggle-input:checked~.toggle-track--sm::after,
.toggle-input:checked+.toggle-track--sm::after {
    transform: translateX(1rem);
}

/* =========================================================
   Chat — conversation list rows (direct + admin)
   Hover a aktivní stav přes CSS proměnné → funguje v dark theme
   ========================================================= */

.direct-conv-row,
.chat-conv-row,
.direct-picker-row {
    transition: background-color 0.15s ease;
}

.direct-conv-row:hover,
.chat-conv-row:hover,
.direct-picker-row:hover {
    background-color: var(--bg-hover);
}

.direct-conv-row.conv-row--active,
.chat-conv-row.conv-row--active {
    background-color: var(--bg-raised);
}

/* Texty uvnitř rows — přepsání hardcoded Tailwind šedé v dark mode */
html.dark .direct-conv-row .text-gray-800,
html.dark .chat-conv-row .text-gray-800,
html.dark .direct-picker-row .text-gray-800 {
    color: var(--text-primary);
}

html.dark .direct-conv-row .text-gray-400,
html.dark .chat-conv-row .text-gray-400,
html.dark .direct-picker-row .text-gray-400 {
    color: var(--text-secondary);
}

html.dark .direct-conv-row .text-gray-300,
html.dark .chat-conv-row .text-gray-300 {
    color: var(--text-muted);
}

/* AI Parse Button */
.ai-parse-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    white-space: nowrap;
}

.ai-parse-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.ai-parse-btn.ai-btn-active {
    color: var(--col_green);
    border-color: var(--col_green);
    opacity: 1;
}

.ai-parse-btn.ai-btn-active:hover {
    background: color-mix(in srgb, var(--col_green) 12%, transparent);
}

/* ===== COLOR PALETTE MODAL ===== */

.cpm-palette-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem 1rem;
}

.cpm-slot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    position: relative;
    background-color: var(--bg-raised);
    border-radius: 9999px;
}

.cpm-circle {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 1px solid #0000003a;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cpm-slot-filled:hover .cpm-circle,
.cpm-slot-empty:has(.cpm-plus-icon):hover .cpm-circle {
    transform: scale(1.1);
}

.cpm-slot-filled:hover,
.cpm-slot-empty:has(.cpm-plus-icon):hover {
    background-color: var(--bg-hover);
    cursor: pointer;
}

.cpm-circle-empty {
    background-color: var(--bg-interactive, #f3f4f6);
    border-style: dashed;
}


.cpm-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.cpm-label-auto {
    opacity: 0.6;
    font-style: italic;
}

.cpm-label-input {
    font-size: 0.75rem;
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-theme, #e5e7eb);
    border-radius: 0.25rem;
    background: var(--bg-interactive);
    color: var(--text-primary);
    outline: none;
}

.modal .modal-content .cpm-label-input {
    padding: 0.3rem 0.35rem;
}

.cpm-label-input:focus {
    border-color: var(--col_green);
}

.cpm-edit-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}

.cpm-slot:hover .cpm-edit-icon {
    opacity: 1;
}

.cpm-edit-icon svg {
    width: 1rem;
    height: 1rem;
}

.cpm-plus-icon {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--text-secondary);
    background: transparent;
}

.cpm-delete-btn {
    position: absolute;
    top: -4px;
    left: 22px;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: var(--col_red, #ef4444);
    color: #fff;
    font-size: 0.65rem;
    line-height: 1;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 1;
}

.cpm-delete-btn:hover {
    opacity: 0.85;
}

.cpm-hidden-picker {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    border: none;
    padding: 0;
}

/* Drag & drop */
.cpm-drag-handle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    cursor: grab;
    color: var(--text-muted, #9ca3af);
    padding: 0 2px;
    position: relative;
    left: -6px;
    opacity: 0.35;
    transition: opacity 0.15s;
}

.cpm-drag-handle:hover {
    opacity: 0.85;
}

.cpm-drag-handle:active {
    cursor: grabbing;
}

.cpm-slot-ghost .cpm-circle {
    opacity: 0.25;
    border-style: dashed;
    transform: none !important;
}

.cpm-slot-swap .cpm-circle {
    transform: scale(1.18) !important;
    box-shadow: 0 0 0 2px var(--col_green, #4caf50), 0 0 8px 2px rgba(76, 175, 80, 0.35);
}

.cpm-slot-active .cpm-circle {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--col_green);
}

/* ============================================================
   Task Status Badge — globally available.
   task-detail.css previously held a copy; this is canonical.
   ============================================================ */
.td-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.6rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.td-status-badge.status-active {
    background-color: rgba(83, 173, 16, 0.12);
    color: #3d8c0e;
}

.td-status-badge.status-paused {
    background-color: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.td-status-badge.status-stopped {
    background-color: rgba(107, 114, 128, 0.12);
    color: #4b5563;
}

.td-status-badge.status-cancelled {
    background-color: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.td-status-badge.status-completed {
    background-color: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.td-status-badge.status-draft {
    background-color: rgba(107, 114, 128, 0.08);
    color: #6b7280;
}

/* Cancel the h2 bottom margin so flex centering isn't skewed by the margin box */
#taskEditorTitle {
    margin-bottom: 0;
}

#taskDetailLink {
    display: none;
    background-color: var(--bg-raised);
}

/* ===== Externí kalendáře — výběr barvy v modalu ===== */
#extcal_form_colors input:checked+.extcal-color-swatch {
    border-color: var(--text-primary, #111827);
    transform: scale(1.15);
}

#extcal_form_colors .extcal-color-swatch:hover {
    transform: scale(1.1);
}

/* ===== ActivityModal — fixní filtry, scroluje se jen seznam aktivit ===== */
/* ID selektor přebije utility .block, kterou přidává JS při přepínání tabů */
#tab-content-activity:not(.hidden) {
    display: flex;
    flex-direction: column;
}

/* ===== taskSearchDropdown — zvýraznění nastavení odlišných od výchozího stavu ===== */
/* Kulaté zelené pozadí pod checkboxem, jehož stav se liší od defaultu.
   Kruh přes ::before na labelu — box-shadow na inputu by kopíroval jeho hranatý tvar. */
#taskSearchDropdown label:has(> input.checkbox-nondefault) {
    position: relative;
}

#taskSearchDropdown label:has(> input.checkbox-nondefault)::before {
    content: '';
    position: absolute;
    left: 0.375rem;
    /* střed checkboxu (px-3 + půlka w-4) minus poloměr kruhu */
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background-color: rgba(83, 173, 16, 0.18);
    pointer-events: none;
}

/* Symetrické místo kolem kolečka ikony řazení (px-3 nechává vlevo víc místa než svisle) */
#taskSearchDropdown .sort-item {
    padding-left: 0.3rem;
}

/* Kulaté zelené pozadí pod ikonou aktivního ne-defaultního řazení */
.sort-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    margin: -0.25rem 0;
    flex-shrink: 0;
}

.sort-icon-badge.sort-icon-nondefault {
    background-color: rgba(83, 173, 16, 0.18);
}

.sort-icon-badge.sort-icon-nondefault svg {
    color: var(--col_green);
}