/* ---------- Dark theme: tokens (palette taken from the dark design frames) ---------- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --color-secondary: #F3F4F6;        /* main text and headings */
    --color-accent: #8AB4FF;
    --color-gray-dark: #A3A9B4;        /* muted text */
    --color-gray-light: #6B7280;
    --color-background: #0E1111;       /* page background and inset boxes */
    --color-white: #1E1E1E;            /* panel / card surface */
    --color-border: #474747;
    --color-shadow: rgba(0, 0, 0, 0.45);
    --color-text: #F3F4F6;
    --color-link: #6EA8FF;
    --color-black-overlay: rgba(0, 0, 0, 0.7);
    --color-surface-hover: #2A2D30;
    --color-surface-inset: #161819;
}

:root[data-theme="dark"] body {
    color: var(--color-text);
}

:root[data-theme="dark"] .page-app,
:root[data-theme="dark"] .page-settings,
:root[data-theme="dark"] .page-login {
    background: var(--color-background);
}

:root[data-theme="dark"] .page-cover {
    background:
        radial-gradient(60rem 30rem at 85% 0%, rgba(0, 82, 204, 0.10), transparent 70%),
        radial-gradient(50rem 30rem at 10% 100%, rgba(120, 40, 160, 0.07), transparent 70%),
        #0F1013;
}

:root[data-theme="dark"] .page-mobile {
    background: linear-gradient(180deg, #0F1013 0%, #11141A 40%, #0F1013 100%);
}

:root[data-theme="dark"] a:not([class]),
:root[data-theme="dark"] .cover-panel-info a,
:root[data-theme="dark"] .auth-switch,
:root[data-theme="dark"] .sidebar-links a,
:root[data-theme="dark"] .docs-article a {
    color: var(--color-link);
}

/* ---------- Dark theme: images and icons ---------- */
/* Icons are single-colour SVG files with a dark stroke, so they are turned light */
:root[data-theme="dark"] img[src*="icons/"] {
    filter: brightness(0) invert(0.93);
}

:root[data-theme="dark"] .auth-why-icon img {
    filter: brightness(1.7) saturate(1.3);
}

:root[data-theme="dark"] .cover-button.is-selected img,
:root[data-theme="dark"] .cover-button img,
:root[data-theme="dark"] .primary-icon img {
    filter: none;
}

/* Illustrations drawn for a white page: flip lightness but keep the hues (the logo has its own dark SVG) */
:root[data-theme="dark"] img[src*="mapa"],
:root[data-theme="dark"] img[src*="sc-logo"] {
    filter: invert(1) hue-rotate(180deg);
}

:root[data-theme="dark"] svg [stroke="#334155"],
:root[data-theme="dark"] svg [stroke="#6B7280"] {
    stroke: #CBD2DC;
}

/* ---------- Dark theme: text on filled blue stays white ---------- */
:root[data-theme="dark"] .auth-submit,
:root[data-theme="dark"] .auth-panel .auth-submit {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

:root[data-theme="dark"] .auth-submit:hover {
    background: #0A64E8;
}

/* Tooltips were navy with white text; keep them dark and readable */
:root[data-theme="dark"] .calendar-tooltip:hover::after,
:root[data-theme="dark"] .table-tooltip:hover::after,
:root[data-theme="dark"] .icon-box[data-tooltip]:hover::after,
:root[data-theme="dark"] .archive-button[data-tooltip]:hover::after,
:root[data-theme="dark"] .custom-select-tooltip {
    background: #3A3D41;
    color: #F3F4F6;
}

/* ---------- Dark theme: hover and inset surfaces ---------- */
:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] .archive-button:hover,
:root[data-theme="dark"] .save-changes-button:hover,
:root[data-theme="dark"] .unarchive-button:hover,
:root[data-theme="dark"] .cover-button:hover,
:root[data-theme="dark"] .dropdown:hover,
:root[data-theme="dark"] .icon-box:hover,
:root[data-theme="dark"] .modal-content .action-button:hover,
:root[data-theme="dark"] .cookies-buttons button:hover,
:root[data-theme="dark"] .update-buttons button:last-child:hover,
:root[data-theme="dark"] .sidebar .sidebar-item:hover,
:root[data-theme="dark"] .date-picker-header button:hover,
:root[data-theme="dark"] .date-picker-day:hover,
:root[data-theme="dark"] .custom-select-option.highlighted,
:root[data-theme="dark"] .main-content tbody tr:hover {
    background-color: var(--color-surface-hover);
}

:root[data-theme="dark"] .modal-popisek,
:root[data-theme="dark"] .user-preferences,
:root[data-theme="dark"] .user-info-display,
:root[data-theme="dark"] th,
:root[data-theme="dark"] tr:nth-child(even) {
    background: var(--color-surface-inset);
}

:root[data-theme="dark"] .task-card[data-anchored="true"],
:root[data-theme="dark"] .calendar-task[data-anchored="true"],
:root[data-theme="dark"] .no-date-task[data-anchored="true"] {
    background: #26292C;
}

:root[data-theme="dark"] .holiday-name { background-color: #2B2E31; color: var(--color-gray-dark); }
:root[data-theme="dark"] .today-circle { background-color: rgba(0, 91, 254, 0.28); color: #9CC0FF; }
:root[data-theme="dark"] .search-clear:hover { background-color: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .no-date-task.celorocni-task { border-left-color: #3A4350; }
/* Drop targets while dragging a task: dashed outline everywhere, soft blue fill on the hovered one */
:root[data-theme="dark"] .is-dragging .day:not(.other-month),
:root[data-theme="dark"] .is-dragging .kanban-column,
:root[data-theme="dark"] .is-dragging #calendar-view .no-date-tasks {
    outline-color: rgba(76, 141, 255, 0.4);
}

:root[data-theme="dark"] .is-dragging .day.drag-over,
:root[data-theme="dark"] .is-dragging .kanban-column.drag-over,
:root[data-theme="dark"] .is-dragging #calendar-view .no-date-tasks.drag-over {
    outline-color: #4C8DFF;
    background: rgba(76, 141, 255, 0.16);
}
:root[data-theme="dark"] .no-date-tasks.is-highlighted { animation-name: no-date-flash-dark; }
@keyframes no-date-flash-dark {
    0%, 35% {
        outline: 2px solid #4C8DFF;
        outline-offset: -2px;
        background: rgba(76, 141, 255, 0.16);
    }
    100% {
        outline: 2px solid transparent;
        outline-offset: -2px;
    }
}
:root[data-theme="dark"] .calendar-more { color: var(--color-link); }

/* Small blue text on the overview and holidays pages needs the lighter link blue on dark */
:root[data-theme="dark"] .ph-details > summary,
:root[data-theme="dark"] .ph-note a,
:root[data-theme="dark"] .ov-card-note a,
:root[data-theme="dark"] .ov-locked a:not(.ov-button),
:root[data-theme="dark"] .ph-status.is-now,
:root[data-theme="dark"] .ph-tag { color: var(--color-link); }
:root[data-theme="dark"] .ph-tag { border-color: var(--color-link); }
:root[data-theme="dark"] .ov-month.is-current .ov-month-label { color: var(--color-link); }

/* ---------- Dark theme: priority colours (tinted, not pastel) ---------- */
:root[data-theme="dark"] .calendar-task.zavazne,
:root[data-theme="dark"] .legend-item.zavazne { background: rgba(255, 184, 0, 0.16); }
:root[data-theme="dark"] .calendar-task.zavazne-doporucene,
:root[data-theme="dark"] .legend-item.zavazne-doporucene { background: rgba(180, 207, 26, 0.16); }
:root[data-theme="dark"] .calendar-task.doporucene,
:root[data-theme="dark"] .legend-item.doporucene { background: rgba(40, 203, 46, 0.14); }
:root[data-theme="dark"] .calendar-task.informativni,
:root[data-theme="dark"] .legend-item.informativni { background: rgba(0, 82, 204, 0.26); }
:root[data-theme="dark"] .calendar-task.vlastni,
:root[data-theme="dark"] .legend-item.vlastni { background: rgba(214, 67, 151, 0.18); }

:root[data-theme="dark"] .legend-item.zavazne { border-color: rgba(255, 184, 0, 0.35); }
:root[data-theme="dark"] .legend-item.zavazne-doporucene { border-color: rgba(180, 207, 26, 0.35); }
:root[data-theme="dark"] .legend-item.doporucene { border-color: rgba(40, 203, 46, 0.35); }
:root[data-theme="dark"] .legend-item.informativni { border-color: rgba(0, 82, 204, 0.55); }
:root[data-theme="dark"] .legend-item.vlastni { border-color: rgba(214, 67, 151, 0.4); }
:root[data-theme="dark"] .legend-item.informativni span,
:root[data-theme="dark"] .informativni-dot { color: #6EA8FF; }
:root[data-theme="dark"] .informativni-dot { background: #4C8DFF; }

:root[data-theme="dark"] .task-tag {
    background: rgba(0, 82, 204, 0.22);
    color: #9CC0FF;
    border-color: rgba(0, 82, 204, 0.55);
}

:root[data-theme="dark"] .update-badge { background: rgba(0, 82, 204, 0.25); color: #9CC0FF; }
:root[data-theme="dark"] .update-entry { border-left-color: var(--color-border); }
:root[data-theme="dark"] .docs-status,
:root[data-theme="dark"] .docs-article .update-notice { background: rgba(245, 158, 11, 0.14); color: #F5B54A; }

/* ---------- Dark theme: forms and dialogs ---------- */
:root[data-theme="dark"] .form-group input,
:root[data-theme="dark"] .auth-submit-transition,
:root[data-theme="dark"] .user-preferences .dropdown,
:root[data-theme="dark"] .custom-select-input,
:root[data-theme="dark"] .custom-select-dropdown {
    border-color: var(--color-border);
}

:root[data-theme="dark"] .form-group input:focus,
:root[data-theme="dark"] .custom-select-input:focus,
:root[data-theme="dark"] .user-preferences .dropdown:focus {
    border-color: var(--color-primary);
}

:root[data-theme="dark"] .date-picker-header { border-bottom-color: var(--color-border); }
:root[data-theme="dark"] .date-picker-day-header,
:root[data-theme="dark"] .anchored-date { color: var(--color-gray-dark); }
:root[data-theme="dark"] .custom-select-option.selected,
:root[data-theme="dark"] .custom-select-info-icon { background-color: rgba(0, 82, 204, 0.28); }
:root[data-theme="dark"] .custom-select-dropdown::-webkit-scrollbar-track { background: #1E1E1E; }
:root[data-theme="dark"] .custom-select-dropdown::-webkit-scrollbar-thumb { background: #555; }
:root[data-theme="dark"] .page-login input[type="checkbox"] { border-color: #666; }

:root[data-theme="dark"] .auth-message--success { background: rgba(40, 167, 69, 0.16); border-color: rgba(40, 167, 69, 0.45); color: #86E0A0; }
:root[data-theme="dark"] .auth-message--error { background: rgba(220, 53, 69, 0.16); border-color: rgba(220, 53, 69, 0.5); color: #F5A3AB; }

/* ---------- Dark theme: cover and login panels (glass over the dark background) ---------- */
:root[data-theme="dark"] .cover-panel-info { background: rgba(26, 26, 28, 0.78); }
:root[data-theme="dark"] .cover-panel-select,
:root[data-theme="dark"] .auth-stats,
:root[data-theme="dark"] .auth-why,
:root[data-theme="dark"] .auth-panel { background: rgba(20, 21, 23, 0.82); }
:root[data-theme="dark"] .page-mobile .cover-panel { background: rgba(26, 26, 28, 0.88); }
:root[data-theme="dark"] .auth-panel .form-group input:not([type="checkbox"]) { background: rgba(14, 17, 17, 0.85); }
:root[data-theme="dark"] .cover-page .header-center .vertical-stroke { background: #555; }
:root[data-theme="dark"] .project-info { border-left-color: #4C8DFF; }
:root[data-theme="dark"] .cover-select .cover-button:hover { border-color: #3C5A8A; }
:root[data-theme="dark"] .cover-select .cover-button.is-selected .cover-button-title,
:root[data-theme="dark"] .cover-select .cover-button.is-selected strong { color: var(--color-link); }
:root[data-theme="dark"] .auth-stats-label { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }

/* ---------- Dark theme: mobile ---------- */
:root[data-theme="dark"] .page-mobile .mobile-continuous-link,
:root[data-theme="dark"] .is-drawer-open .mobile-tab#mobile-tab-more { background: rgba(0, 82, 204, 0.22); border-color: rgba(0, 82, 204, 0.4); }
:root[data-theme="dark"] .page-mobile .mobile-tab.active,
:root[data-theme="dark"] .is-drawer-open .mobile-tab#mobile-tab-more { background: rgba(0, 82, 204, 0.28); color: #9CC0FF; }
:root[data-theme="dark"] .is-drawer-open .mobile-tab.active:not(#mobile-tab-more) { background: none; color: var(--color-gray-dark); }
:root[data-theme="dark"] .page-mobile .mobile-continuous-link:hover { background: rgba(0, 82, 204, 0.32); }
:root[data-theme="dark"] .page-mobile .mobile-task-check { border-color: #666; }
:root[data-theme="dark"] .page-mobile .mobile-task.zavazne .mobile-task-priority { background: rgba(255, 184, 0, 0.18); color: #FFC53D; }
:root[data-theme="dark"] .page-mobile .mobile-task.zavazne-doporucene .mobile-task-priority { background: rgba(180, 207, 26, 0.18); color: #C5DB4A; }
:root[data-theme="dark"] .page-mobile .mobile-task.doporucene .mobile-task-priority { background: rgba(40, 203, 46, 0.16); color: #52DB57; }
:root[data-theme="dark"] .page-mobile .mobile-task.informativni .mobile-task-priority { background: rgba(0, 82, 204, 0.28); color: #8AB4FF; }
:root[data-theme="dark"] .page-mobile .mobile-task.vlastni .mobile-task-priority { background: rgba(214, 67, 151, 0.2); color: #F089C4; }

/* ---------- Account menu (opened from the user button) ---------- */
.user-menu {
    z-index: 1000;
    padding: var(--spacing-xs);
}

.user-menu .filter-option {
    box-sizing: border-box;
    width: 100%;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    font: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: 0;
}

.user-menu .filter-option:hover {
    background: var(--color-background);
}

.user-menu .filter-option span {
    color: inherit;
}

/* Logout uses the same red as the danger buttons in settings */
.user-menu .user-menu-danger {
    color: var(--color-red);
}

.user-menu .user-menu-danger:hover {
    background: rgba(255, 86, 48, 0.1);
}

/* ---------- Dark theme: chevrons drawn as background images ---------- */
:root[data-theme="dark"] .faq-question::after,
:root[data-theme="dark"] .page-mobile #mobile-continuous h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23E5E7EB' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .dropdown {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C9CED6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ---------- Dark theme: task modal chips and buttons ---------- */
:root[data-theme="dark"] .task-chip--zavazne { background: rgba(255, 184, 0, 0.18); color: #FFC53D; }
:root[data-theme="dark"] .task-chip--zavazne-doporucene { background: rgba(180, 207, 26, 0.18); color: #C5DB4A; }
:root[data-theme="dark"] .task-chip--doporucene { background: rgba(40, 203, 46, 0.16); color: #52DB57; }
:root[data-theme="dark"] .task-chip--informativni { background: rgba(0, 82, 204, 0.28); color: #8AB4FF; }
:root[data-theme="dark"] .task-chip--vlastni { background: rgba(214, 67, 151, 0.2); color: #F089C4; }
:root[data-theme="dark"] .modal--task .action-buttons .unarchive-button { color: #52DB57; border-color: #52DB57; }
:root[data-theme="dark"] .modal--task .action-buttons .save-changes-button:hover { background-color: var(--color-primary); }

/* ---------- Dark theme: checkboxes and radios ---------- */
:root[data-theme="dark"] .page-app input[type="checkbox"],
:root[data-theme="dark"] .page-app input[type="radio"],
:root[data-theme="dark"] .page-login input[type="checkbox"] {
    border-color: #666;
}

:root[data-theme="dark"] .page-settings .choice-card:hover {
    border-color: #6B7280;
}

/* ---------- Content width ---------- */
/* "Na střed": from 1024px up the whole page (sidebar, content, footer) sits in a narrower column with
   larger LEFT and RIGHT margins that grow with the screen width. Top and bottom spacing is untouched,
   so nothing moves down. Phone layouts keep their own padding. */
@media (min-width: 64rem) {
    :root[data-width="centered"] .page-app:not(.page-mobile) {
        padding-left: clamp(2.5rem, 12vw, 18rem);
        padding-right: clamp(2.5rem, 12vw, 18rem);
    }

    :root[data-width="centered"] .page-cover:not(.page-mobile) .cover-page {
        --cover-px: clamp(2.5rem, 12vw, 18rem);
    }
}

/* ---------- Density ---------- */
/* Compact tightens the content and the spacing between sections. The sidebar items and their gaps
   stay exactly as they are. */

/* spacing between the parts of a page */
:root[data-density="compact"] .content-header,
:root[data-density="compact"] .content-controls,
:root[data-density="compact"] .main-content .breadcrumb { margin-bottom: 1rem; }
:root[data-density="compact"] .kanban-container { gap: 1rem; }
:root[data-density="compact"] .page-mobile .no-date-tasks { gap: 0.5rem 0.75rem; margin-top: 1.25rem; padding: 0.75rem; }
:root[data-density="compact"] .page-footer { margin-top: 1rem; }

/* tasks: list, board, calendar */
:root[data-density="compact"] .main-content td,
:root[data-density="compact"] .main-content th { padding-top: 0.35rem; padding-bottom: 0.35rem; }
:root[data-density="compact"] .main-content .table-container tbody tr { line-height: 1.3; }
:root[data-density="compact"] .kanban-column { gap: 0.4rem; padding: 0.75rem; }
:root[data-density="compact"] .task-card { padding: 0.4rem 0.6rem; }
:root[data-density="compact"] .page-mobile .no-date-task { padding-top: 0.35rem; padding-bottom: 0.35rem; }
:root[data-density="compact"] .day { min-height: 7.5rem; }
:root[data-density="compact"] .calendar-task { padding-top: 0.05rem; padding-bottom: 0.05rem; }
:root[data-density="compact"] .page-mobile .mobile-task { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* overview, holidays and settings pages */
:root[data-density="compact"] #overview-view,
:root[data-density="compact"] #holidays-view { gap: 1.25rem; }
:root[data-density="compact"] .ov-grid { gap: 1.25rem; }
:root[data-density="compact"] .ov-cards { gap: 0.75rem; }
:root[data-density="compact"] .ov-card { gap: 0.125rem; padding: 0.875rem 1.125rem; }
:root[data-density="compact"] .ov-card-icon { width: 2.5rem; height: 2.5rem; margin-bottom: 0.25rem; }
:root[data-density="compact"] .ov-card-value { font-size: 2.25rem; }
:root[data-density="compact"] .ph-value { font-size: 1.375rem; }
:root[data-density="compact"] .ov-panel { gap: 0.5rem; padding: 0.75rem 1rem; }
:root[data-density="compact"] .ph-tl-body { padding-top: 0.3125rem; padding-bottom: 0.3125rem; }
:root[data-density="compact"] .ph-tl-item.is-current .ph-tl-body { padding-top: 0.5rem; padding-bottom: 0.5rem; }
:root[data-density="compact"] .faq-question { padding-top: 0.4rem; padding-bottom: 0.4rem; }
:root[data-density="compact"] .settings-panel { gap: 0.75rem; }
:root[data-density="compact"] .settings-card { padding: 1rem 1.25rem; }
:root[data-density="compact"] .settings-group { margin-bottom: 1rem; }
:root[data-density="compact"] .settings-title { margin-bottom: 0.25rem; }
:root[data-density="compact"] .settings-hint { margin-bottom: 0.75rem; }
:root[data-density="compact"] .switch-row { padding: 0.5rem 0; }
:root[data-density="compact"] .choice-card { padding: 0.5rem; gap: 0.25rem; }
:root[data-density="compact"] .choice-preview { height: 3.25rem; }
/* ---------- Reduced motion (manual choice, or the system setting when "system") ---------- */
:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-motion="system"] *,
    :root[data-motion="system"] *::before,
    :root[data-motion="system"] *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- High contrast ---------- */
:root[data-contrast="high"] {
    --color-border: #5B6573;
    --color-gray-dark: #374151;
    --color-primary: #003F9E;
    --color-secondary: #0B1B36;
}

:root[data-contrast="high"] body { color: #000; }

:root[data-theme="dark"][data-contrast="high"] {
    --color-border: #A8A8A8;
    --color-gray-dark: #D5D9E0;
    --color-primary: #1A6BFF;
    --color-secondary: #FFFFFF;
    --color-text: #FFFFFF;
    --color-link: #9CC4FF;
}

:root[data-theme="dark"][data-contrast="high"] body { color: #fff; }

:root[data-contrast="high"] :focus-visible {
    outline: 3px solid #FFB800 !important;
    outline-offset: 2px !important;
}