:root {
    color-scheme: light;
    font-size: 16px;
    --canvas: #f3f6fa;
    --surface: #ffffff;
    --surface-subtle: #f7f9fc;
    --surface-hover: #eaf1f7;
    --line: #d8e3ed;
    --ink: #20364d;
    --muted: #5c7084;
    --accent: #24618c;
    --accent-hover: #194c72;
    --accent-text: #245e88;
    --on-accent: #ffffff;
    --info-soft: #e7f1fa;
    --success: #26704b;
    --success-fill: #34845d;
    --success-soft: #eaf5ee;
    --warning: #8a5a12;
    --warning-fill: #97691f;
    --warning-soft: #fff4de;
    --danger: #aa3c4b;
    --danger-fill: #b74755;
    --danger-soft: #fbecee;
    --violet: #7952a0;
    --violet-fill: #8061a4;
    --violet-soft: #f1ebf7;
    --priority-critical-color: #8f2535;
    --priority-critical-background: #f5d1d7;
    --sidebar: #e7eff7;
    --sidebar-width: 16rem;
    --content-width: 100rem;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #101923;
    --surface: #192633;
    --surface-subtle: #1e2d3c;
    --surface-hover: #283c50;
    --line: #34495d;
    --ink: #e6eef7;
    --muted: #a9bbcd;
    --accent: #316d98;
    --accent-hover: #3c7fab;
    --accent-text: #90c6f0;
    --info-soft: #203d55;
    --success: #92d6ae;
    --success-fill: #2e7651;
    --success-soft: #203d31;
    --warning: #f0c77d;
    --warning-fill: #805e24;
    --warning-soft: #403523;
    --danger: #f2a0ab;
    --danger-fill: #a33f4d;
    --danger-soft: #432b34;
    --violet: #c8b0eb;
    --violet-fill: #70528f;
    --violet-soft: #352e48;
    --priority-critical-color: #ffc0cb;
    --priority-critical-background: #592a36;
    --sidebar: #162331;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--canvas); color: var(--ink); font-family: Arial, sans-serif; font-size: .9375rem; line-height: 1.5; }
button, input, select, textarea { font-family: inherit; }
input, select, textarea { color-scheme: inherit; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

.creation-attachments { margin: 20px 0; padding: 16px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-subtle); }
.creation-attachments label { display: grid; gap: 10px; color: var(--ink); font-size: .875rem; font-weight: 600; }
.creation-attachments input { max-width: 100%; color: var(--ink); }
.creation-attachments p { margin-top: 8px; font-size: .8125rem; color: var(--muted); }
.creation-attachments .creation-attachment-error { color: var(--danger); }
.attachment-preview { display: block; width: fit-content; max-width: 100%; margin: 12px 0; }
.attachment-preview img { display: block; width: auto; height: auto; max-width: 100%; max-height: 220px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); }
.attachment-name a { color: var(--accent-text); text-decoration: none; overflow-wrap: anywhere; }
.attachment-name a:hover { text-decoration: underline; }

/* One task-status palette for lists, selects, details and Kanban columns. */
.status-badge.todo, .status-select.status-todo, .task-status-todo, [data-board-status="todo"] { --task-status-color: var(--muted); --task-status-background: var(--surface-subtle); }
.status-badge.in_progress, .status-select.status-in_progress, .task-status-in_progress, [data-board-status="in_progress"] { --task-status-color: var(--accent-text); --task-status-background: var(--info-soft); }
.status-badge.blocked, .status-select.status-blocked, .task-status-blocked, [data-board-status="blocked"] { --task-status-color: var(--danger); --task-status-background: var(--danger-soft); }
.status-badge.review, .status-select.status-review, .task-status-review, [data-board-status="review"] { --task-status-color: var(--violet); --task-status-background: var(--violet-soft); }
.status-badge.done, .status-select.status-done, .task-status-done, [data-board-status="done"] { --task-status-color: var(--success); --task-status-background: var(--success-soft); }
.status-badge:is(.todo, .in_progress, .blocked, .review, .done),
.status-select:is(.status-todo, .status-in_progress, .status-blocked, .status-review, .status-done),
:is(.task-status-todo, .task-status-in_progress, .task-status-blocked, .task-status-review, .task-status-done) { background: var(--task-status-background); color: var(--task-status-color); border-color: var(--line); }

/* Shared priority colors for dashboard, projects, Kanban, details and forms. */
.priority.low, .priority-badge.low, .priority-low, .task-priority-low, select[name="priority"][data-priority="low"], #task-filter-priority[data-priority="low"], select[name="priority"] option[value="low"], #task-filter-priority option[value="low"] { --priority-color: var(--success); --priority-background: var(--success-soft); }
.priority.medium, .priority-badge.medium, .priority-medium, .task-priority-medium, select[name="priority"][data-priority="medium"], #task-filter-priority[data-priority="medium"], select[name="priority"] option[value="medium"], #task-filter-priority option[value="medium"] { --priority-color: var(--warning); --priority-background: var(--warning-soft); }
.priority.high, .priority-badge.high, .priority-high, .task-priority-high, select[name="priority"][data-priority="high"], #task-filter-priority[data-priority="high"], select[name="priority"] option[value="high"], #task-filter-priority option[value="high"] { --priority-color: var(--danger); --priority-background: var(--danger-soft); }
.priority.critical, .priority-badge.critical, .priority-critical, .task-priority-critical, select[name="priority"][data-priority="critical"], #task-filter-priority[data-priority="critical"], select[name="priority"] option[value="critical"], #task-filter-priority option[value="critical"] { --priority-color: var(--priority-critical-color); --priority-background: var(--priority-critical-background); }
.priority:is(.low, .medium, .high, .critical), .priority-badge:is(.low, .medium, .high, .critical),
:is(.priority-low, .priority-medium, .priority-high, .priority-critical, .task-priority-low, .task-priority-medium, .task-priority-high, .task-priority-critical),
select[name="priority"][data-priority]:not([data-priority=""]), #task-filter-priority[data-priority]:not([data-priority=""]),
body .entity-popup-body select[name="priority"][data-priority]:not([data-priority=""]), #task-filters select[name="priority"][data-priority]:not([data-priority=""]),
select[name="priority"] option:is([value="low"], [value="medium"], [value="high"], [value="critical"]), #task-filter-priority option:is([value="low"], [value="medium"], [value="high"], [value="critical"]) { background: var(--priority-background); color: var(--priority-color); border-color: var(--line); }

/* Limit line lengths on wide screens; rem units scale with the readable base size. */
body > main, body > main.main-content {
    width: calc(100% - var(--sidebar-width));
    max-width: var(--content-width);
    margin-left: calc(var(--sidebar-width) + max(0px, (100% - var(--sidebar-width) - var(--content-width)) / 2));
    margin-right: auto;
    padding: 2rem clamp(1.25rem, 2vw, 2.5rem);
    min-width: 0;
}
body > main.main-content { max-width: var(--content-width); }
body .sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar);
    border-right: 1px solid var(--line);
    box-shadow: none;
    padding: 1.5rem 1rem;
    z-index: 100;
}
body .sidebar-logo { margin-bottom: .5rem; }
body .sidebar-logo-link { background: transparent; border: 0; box-shadow: none; }
body .sidebar-logo img { max-width: 9rem; max-height: 3rem; }
[data-theme="dark"] body .sidebar-logo img,
[data-theme="dark"] :is(.login-container, .register-container) .logo img { filter: brightness(0) invert(1); opacity: .88; }
body .sidebar-title { font-size: .8125rem; color: var(--muted); margin-bottom: 1.75rem; letter-spacing: .04em; }
body .sidebar-menu > li > a, body .sidebar-tree-main-link { font-size: .9375rem; color: var(--ink); }
body .sidebar-folder-link, body .sidebar-project-link { font-size: .875rem; color: var(--muted); overflow-wrap: anywhere; }
body .sidebar-tree summary { color: var(--muted); }
body .sidebar-menu a:hover, body .sidebar-tree summary:hover { background: var(--surface-hover); color: var(--ink); }
body .sidebar .sidebar-menu a.active,
body .sidebar .sidebar-menu a.active:hover,
body .sidebar .sidebar-menu a.active:focus-visible { background: var(--accent); color: var(--on-accent); border-radius: .5rem; }
body .sidebar-menu > li > a, body .sidebar-tree-main-link { display: flex; align-items: center; gap: .625rem; }
body .logout-button { display: flex; align-items: center; justify-content: center; gap: .625rem; }
.ui-icon { display: inline-block; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; vertical-align: -.2em; }
#my-tasks, #dashboard-calendar { scroll-margin-top: 1.5rem; }
body .sidebar-tree > details[open] > .sidebar-main-summary { background: var(--surface-hover); }
body .sidebar-user { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: auto; }
body .sidebar-user-name { color: var(--ink); }
body .sidebar-user-role, body .sidebar-empty { color: var(--muted); }
body .logout-button { color: var(--ink); background: var(--surface); border: 1px solid var(--line); font-size: .875rem; }
body .logout-button:hover { background: var(--surface-hover); }

.theme-toggle { display: flex; align-items: center; justify-content: center; gap: .625rem; width: 100%; min-height: 2.75rem; padding: .625rem .875rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--surface); color: var(--ink); font-size: .875rem; font-weight: 600; cursor: pointer; }
.theme-toggle:hover { background: var(--surface-hover); }
.theme-toggle svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }
.theme-sun, [data-theme="dark"] .theme-moon { display: none; }
[data-theme="dark"] .theme-sun { display: block; }
[data-theme="dark"] .theme-toggle { border-color: var(--accent-text); }
.theme-toggle-floating { position: fixed; top: 1rem; right: 1rem; z-index: 2500; width: auto; box-shadow: 0 4px 18px #0001; }

/* Dashboard: the reference's quiet cards, blue accents and clearer hierarchy. */
.page-header h1 { color: var(--ink); letter-spacing: -.035em; line-height: 1.2; }
.page-header p { color: var(--muted); }
.welcome-card { border-left: 3px solid var(--accent); }
.stats-grid { gap: 1rem; }
.stat-card { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; column-gap: .875rem; border-radius: .75rem; padding: 1.25rem; border-top: 3px solid var(--accent); background: linear-gradient(120deg, var(--surface), var(--info-soft)); }
.stat-icon { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .625rem; color: var(--accent-text); background: var(--info-soft); }
.stat-icon .ui-icon { width: 1.5rem; height: 1.5rem; }
.stat-card .stat-label { grid-column: 2; grid-row: 2; margin: .25rem 0 0; }
.stat-card .stat-value { grid-column: 2; grid-row: 1; }
.stat-card.today .stat-icon { color: var(--warning); background: var(--warning-soft); }
.stat-card.overdue .stat-icon { color: var(--danger); background: var(--danger-soft); }
.stat-card.completed .stat-icon { color: var(--success); background: var(--success-soft); }
.stat-card.today { border-top-color: var(--warning); background: linear-gradient(120deg, var(--surface), var(--warning-soft)); }
.stat-card.overdue { border-top-color: var(--danger); background: linear-gradient(120deg, var(--surface), var(--danger-soft)); }
.stat-card.completed { border-top-color: var(--success); background: linear-gradient(120deg, var(--surface), var(--success-soft)); }
.stat-label { text-transform: none; letter-spacing: 0; font-size: .875rem; color: var(--muted); }
.stat-period { display: block; margin-top: .125rem; font-size: .75rem; font-weight: 400; }
.stat-value { font-size: 2rem; line-height: 1.2; font-weight: 700; }
.tasks-section, .calendar-card, .upcoming-card { border-radius: .875rem; }
.task-item { grid-template-columns: minmax(0, 1fr) 6rem 11.5rem 9rem; gap: 1rem; }
.task-item > * { min-width: 0; }
.task-title, .task-project { overflow-wrap: anywhere; }
.task-list .task-description { max-width: 65ch; }
.task-info-card > .task-description { width: 100%; max-width: none; }
.filter-form { grid-template-columns: minmax(10rem, 2fr) repeat(3, minmax(7rem, 1fr)) auto; }
.filter-form > *, .filter-form :is(input, select) { min-width: 0; max-width: 100%; }
.calendar-section { grid-template-columns: minmax(0, 2fr) minmax(19rem, .85fr); gap: 1.25rem; }
.calendar-day { min-width: 0; }
.calendar-event { overflow: hidden; text-overflow: ellipsis; }
.notification-dropdown { width: min(25rem, calc(100vw - 2rem)); }
.notification-dropdown .notification-dropdown-header { align-items: flex-start; background: var(--surface-subtle); }
.notification-dropdown .notification-dropdown-title { display: grid; gap: 4px; }
.notification-summary { font-size: .75rem; font-weight: 400; color: var(--muted); }
.notification-group-label { padding: 9px 16px; background: var(--surface-subtle); color: var(--muted); font-size: .6875rem; font-weight: 600; border-bottom: 1px solid var(--line); }
.notification-dropdown .notification-item { display: flex; align-items: flex-start; gap: 10px; padding: 15px 16px; }
.notification-kind-icon { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 9px; background: var(--surface-subtle); color: var(--muted); }
.notification-kind-icon[data-kind="mention"], .notification-kind-icon[data-kind="assignment"] { background: var(--info-soft); color: var(--accent-text); }
.notification-kind-icon svg { width: 17px; height: 17px; }
.notification-item-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.notification-item-category { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; color: var(--muted); font-size: .6875rem; font-weight: 600; }
.notification-unread-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.notification-dropdown .notification-item.unread { background: color-mix(in srgb, var(--info-soft) 40%, var(--surface)); }
.assignment-mail-warning { margin-bottom: 18px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--line)); border-radius: 10px; background: var(--warning-soft); color: var(--warning); font-size: .875rem; line-height: 1.5; }
.chat-popup-header :is(.chat-popup-task, .chat-popup-project) { color: var(--on-accent); opacity: .85; }
.table-wrapper { overflow-x: auto; }
.login-container, .register-container { width: min(28rem, calc(100% - 2rem)); max-width: none; }
.login-container input, .register-container input { background: var(--surface-subtle); color: var(--ink); }
.login-container .logo img, .register-container .logo img { width: 11rem; max-width: 100%; height: auto; background: transparent; }

/* Shared return navigation for project, folder and task screens. */
.back-navigation .back-link { display: inline-flex; align-items: center; gap: .625rem; max-width: 100%; min-height: 2.75rem; padding: .375rem .875rem .375rem .375rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); color: var(--muted); font-size: .875rem; font-weight: 600; line-height: 1.4; text-decoration: none; box-shadow: 0 1px 3px rgb(0 0 0 / .04); transition: background .15s, border-color .15s, color .15s; }
.back-navigation .back-link-icon { display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: .5rem; background: var(--surface-subtle); color: var(--accent-text); }
.back-navigation .back-link-icon .ui-icon { width: 1.125rem; height: 1.125rem; }
.back-navigation .back-link-label { min-width: 0; overflow-wrap: anywhere; text-align: left; }
.back-navigation .back-link:hover { color: var(--accent-text); border-color: var(--accent); background: var(--surface-hover); transform: none; }
.back-navigation .back-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Keep daily work together; actions and upcoming deadlines form the side rail. */
.dashboard-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
.dashboard-primary { display: contents; }
.dashboard-primary, .dashboard-rail { min-width: 0; }
.dashboard-workspace > .dashboard-rail { grid-column: 2; grid-row: 1; }
.dashboard-rail { display: grid; gap: 1.25rem; }
.dashboard-primary .calendar-section { grid-column: 1 / -1; grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); margin-top: 0; margin-bottom: 0; }
.quick-action-package { grid-column: 1 / -1; }
.dashboard-stats { margin-bottom: 1.5rem; }
.quick-actions-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: .875rem; background: var(--surface); }
.quick-actions-card h2 { margin: 0 0 1rem; color: var(--ink); font-size: 1rem; }
.quick-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.button-primary, .button-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .625rem .875rem; border: 1px solid var(--line); border-radius: .625rem; font-size: .875rem; font-weight: 600; line-height: 1.35; text-decoration: none; cursor: pointer; }
.button-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button-primary:hover { background: var(--accent-hover); }
.button-secondary { background: var(--surface); color: var(--accent-text); }
.button-secondary:hover, #task-filter-toggle[aria-expanded="true"] { background: var(--surface-hover); }
.quick-actions-grid :is(a, button) { padding-inline: .5rem; font-size: .8125rem; }
.quick-actions-grid .ui-icon { width: 1.125rem; height: 1.125rem; }
.dashboard-primary .tasks-header { gap: 1rem; padding: 1.25rem 1.5rem; }
#task-filter-toggle { flex-shrink: 0; }
#task-filters { background: var(--surface-subtle); }
#task-filters .filter-form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 1rem; }
#task-filters .filter-field:first-of-type { grid-column: 1 / -1; }
.filter-field { display: grid; min-width: 0; gap: .375rem; font-size: .8125rem; font-weight: 600; color: var(--muted); }
#task-filters :is(input, select) { width: 100%; min-height: 2.75rem; background: var(--surface); color: var(--ink); font-size: .875rem; }
#task-filters .filter-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .625rem; }
.task-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .875rem 1.5rem; border-bottom: 1px solid var(--line); }
.task-count { color: var(--muted); font-size: .8125rem; }
.completed-control { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-size: .8125rem; cursor: pointer; }
.completed-control input { width: 1rem; height: 1rem; accent-color: var(--accent); cursor: pointer; }
.dashboard-rail .upcoming-header, .dashboard-rail .upcoming-body { padding: 1.25rem; }
.dashboard-rail .upcoming-header h2 { font-size: 1rem; }
.dashboard-rail .upcoming-body { max-height: 36rem; overflow-y: auto; }

@media (max-width: 1350px) {
    .dashboard-workspace { display: flex; flex-direction: column; gap: 1.25rem; }
    .dashboard-primary, .dashboard-rail { display: contents; }
    .dashboard-workspace > *, .dashboard-primary > *, .dashboard-rail > * { width: 100%; }
    .dashboard-workspace .quick-actions-card { order: -1; }
    .quick-actions-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dashboard-primary .calendar-section { margin-top: 0; }
    .dashboard-rail .upcoming-body { max-height: none; }
}
@media (max-width: 850px) {
    #task-filters .filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1800px) { :root { font-size: 18px; } }
@media (min-width: 2400px) { :root { font-size: 20px; } }
@media (min-width: 3200px) { :root { font-size: 22px; } }
@media (max-width: 1250px) {
    .dashboard-primary .calendar-section { grid-template-columns: minmax(0, 1fr); }
    .filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calendar-section { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 701px) and (max-width: 1100px) {
    .task-item { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    body .sidebar { position: relative; width: 100%; min-height: auto; padding: 1rem; }
    body .sidebar-user { margin-top: 1rem; }
    body > main, body > main.main-content { width: 100%; margin-left: 0; padding: 1.5rem 1rem; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-card { padding: 1rem; }
    .stat-card { grid-template-columns: 2rem minmax(0, 1fr); column-gap: .5rem; }
    .stat-icon { width: 2rem; height: 2rem; }
    .stat-icon .ui-icon { width: 1.25rem; height: 1.25rem; }
    .task-item, .filter-form { grid-template-columns: minmax(0, 1fr); }
    #task-filters .filter-form { grid-template-columns: minmax(0, 1fr); }
    .dashboard-primary .tasks-header, .task-toolbar { padding: 1rem; }
    .theme-toggle-floating span { display: none; }
    .theme-toggle-floating { top: .75rem; right: .75rem; padding: .625rem; }
}