/*
 * Accessible application theme
 * Palette designed for strong readability and WCAG 2.2 AA contrast targets.
 */

:root {
    color-scheme: light;

    --ui-bg: #f1f5f9;
    --ui-bg-soft: #f8fafc;
    --ui-surface: #ffffff;
    --ui-surface-muted: #e2e8f0;

    --ui-text: #0f172a;
    --ui-text-muted: #475569;
    --ui-text-on-dark: #ffffff;

    --ui-border: #cbd5e1;
    --ui-border-strong: #94a3b8;

    --ui-primary: #1d4ed8;
    --ui-primary-hover: #1e40af;
    --ui-primary-soft: #dbeafe;

    --ui-secondary: #0f766e;
    --ui-secondary-hover: #115e59;
    --ui-secondary-soft: #ccfbf1;

    --ui-accent: #7c3aed;
    --ui-accent-hover: #6d28d9;
    --ui-accent-soft: #ede9fe;

    --ui-success: #15803d;
    --ui-success-hover: #166534;
    --ui-success-soft: #dcfce7;
    --ui-success-text: #14532d;

    --ui-warning: #b45309;
    --ui-warning-soft: #fef3c7;
    --ui-warning-text: #78350f;

    --ui-danger: #b91c1c;
    --ui-danger-hover: #991b1b;
    --ui-danger-soft: #fee2e2;
    --ui-danger-text: #7f1d1d;

    --ui-info: #0369a1;
    --ui-info-soft: #e0f2fe;
    --ui-info-text: #0c4a6e;

    --ui-focus: #f59e0b;
    --ui-shadow-sm: 0 4px 14px rgba(15, 23, 42, .08);
    --ui-shadow-md: 0 14px 34px rgba(15, 23, 42, .12);
    --ui-shadow-lg: 0 24px 60px rgba(15, 23, 42, .16);
}

html {
    background: var(--ui-bg);
}

body,
.tasks-page,
.archived-tasks-page,
.panel-page,
.chart-page,
.timeline-page {
    background: var(--ui-bg) !important;
    color: var(--ui-text) !important;
}

::selection {
    background: var(--ui-primary);
    color: var(--ui-text-on-dark);
}

a {
    color: var(--ui-primary);
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 3px solid var(--ui-focus) !important;
    outline-offset: 3px;
}

/* Account bar and notices */
.auth-bar {
    background: var(--ui-text) !important;
    color: var(--ui-text-on-dark) !important;
    border: 1px solid #334155;
    box-shadow: var(--ui-shadow-sm);
}

.auth-logout-button {
    background: var(--ui-danger) !important;
    color: var(--ui-text-on-dark) !important;
}

.auth-logout-button:hover {
    background: var(--ui-danger-hover) !important;
}

.flash-message {
    border: 1px solid transparent;
    box-shadow: var(--ui-shadow-sm);
}

.flash-success {
    background: var(--ui-success-soft) !important;
    border-color: #86efac;
    color: var(--ui-success-text) !important;
}

.flash-error {
    background: var(--ui-danger-soft) !important;
    border-color: #fca5a5;
    color: var(--ui-danger-text) !important;
}

/* Shared floating page header */
.tasks-page .section,
.archived-tasks-page .section,
.chart-page .section,
.timeline-page .section {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-md) !important;
}

.tasks-page .section h1,
.archived-tasks-page .section h1,
.chart-page .section h1,
.timeline-page .section h1 {
    color: var(--ui-text) !important;
}

.tasks-page .section p,
.archived-tasks-page .section p,
.chart-page .section p,
.timeline-page .section p {
    color: var(--ui-text-muted) !important;
}

/* Navigation buttons */
.tasks-page .section button,
.archived-tasks-page .section button,
.chart-page .section button,
.timeline-page .section button {
    color: var(--ui-text-on-dark) !important;
    background: var(--ui-primary) !important;
    border: 1px solid transparent !important;
    box-shadow: 0 4px 10px rgba(29, 78, 216, .18);
}

.tasks-page .section button:hover,
.archived-tasks-page .section button:hover,
.chart-page .section button:hover,
.timeline-page .section button:hover {
    background: var(--ui-primary-hover) !important;
}

.tasks-page .section .timeline,
.archived-tasks-page .section .timeline,
.chart-page .section .timeline1,
.timeline-page .section .tasks {
    background: var(--ui-secondary) !important;
    box-shadow: 0 4px 10px rgba(15, 118, 110, .18);
}

.tasks-page .section .timeline:hover,
.archived-tasks-page .section .timeline:hover,
.chart-page .section .timeline1:hover,
.timeline-page .section .tasks:hover {
    background: var(--ui-secondary-hover) !important;
}

.tasks-page .section .archived_tasks,
.archived-tasks-page .section .archived_tasks,
.timeline-page .section .chart,
.chart-page .section .tasks {
    background: var(--ui-accent) !important;
    box-shadow: 0 4px 10px rgba(124, 58, 237, .18);
}

.tasks-page .section .archived_tasks:hover,
.archived-tasks-page .section .archived_tasks:hover,
.timeline-page .section .chart:hover,
.chart-page .section .tasks:hover {
    background: var(--ui-accent-hover) !important;
}

.tasks-page .section .panel,
.archived-tasks-page .section .panel,
.chart-page .section .panel,
.timeline-page .section .panel {
    background: var(--ui-text) !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
}

.tasks-page .section .panel:hover,
.archived-tasks-page .section .panel:hover,
.chart-page .section .panel:hover,
.timeline-page .section .panel:hover {
    background: #334155 !important;
}

/* Date filter and task form */
#date_from,
#start_time,
#deadline,
.tasks-page input,
.tasks-page textarea,
.login-page input {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

#date_from::placeholder,
#start_time::placeholder,
#deadline::placeholder,
.tasks-page input::placeholder,
.tasks-page textarea::placeholder,
.login-page input::placeholder {
    color: var(--ui-text-muted) !important;
    opacity: 1;
}

/* Requested: only right-align the start and deadline fields. */
#start_time,
#deadline {
    text-align: right !important;
    direction: rtl !important;
}

#date_from:focus,
#start_time:focus,
#deadline:focus,
.tasks-page input:focus,
.tasks-page textarea:focus,
.login-page input:focus {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, .16) !important;
}

.tasks-page > form {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-md) !important;
}

.tasks-page > form button[type="submit"] {
    background: var(--ui-primary) !important;
    color: var(--ui-text-on-dark) !important;
}

.tasks-page > form button[type="submit"]:hover {
    background: var(--ui-primary-hover) !important;
}

.datepicker-plot-area,
.datepicker-plot-area * {
    color: var(--ui-text) !important;
}

.datepicker-plot-area {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td span,
.datepicker-plot-area .datepicker-year-view .year-item,
.datepicker-plot-area .datepicker-month-view .month-item {
    color: var(--ui-text) !important;
}

.datepicker-plot-area .datepicker-day-view .table-days td.selected span,
.datepicker-plot-area .datepicker-day-view .table-days td span:hover,
.datepicker-plot-area .datepicker-year-view .year-item.selected,
.datepicker-plot-area .datepicker-month-view .month-item.selected {
    background: var(--ui-primary) !important;
    color: var(--ui-text-on-dark) !important;
}

/* Tables on wide screens */
.page-title {
    color: var(--ui-text) !important;
}

.table-responsive {
    background: transparent;
}

.table-responsive:focus-visible {
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .42) !important;
}

.tasks-table,
.students-table {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border-strong) !important;
    box-shadow: var(--ui-shadow-md);
}

.tasks-table th,
.students-table th {
    background: var(--ui-text) !important;
    color: var(--ui-text-on-dark) !important;
    border-color: #334155 !important;
}

.tasks-table td,
.students-table td {
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

.tasks-table tbody tr,
.students-table tbody tr {
    background: var(--ui-surface) !important;
}

.tasks-table tbody tr:nth-child(even),
.students-table tbody tr:nth-child(even) {
    background: var(--ui-bg-soft) !important;
}

.tasks-table tbody tr:hover,
.students-table tbody tr:hover {
    background: var(--ui-info-soft) !important;
}

.tasks-table tr.task-done,
.table-responsive .tasks-table tr.task-done {
    background: var(--ui-success-soft) !important;
    color: var(--ui-success-text) !important;
}

.tasks-table tr.task-done td,
.table-responsive .tasks-table tr.task-done td,
.tasks-table tr.task-done .cell-value {
    color: var(--ui-success-text) !important;
}

.tasks-table tr.task-overdue,
.table-responsive .tasks-table tr.task-overdue {
    background: var(--ui-danger-soft) !important;
    color: var(--ui-danger-text) !important;
    border-color: #fca5a5 !important;
}

.tasks-table tr.task-overdue td,
.table-responsive .tasks-table tr.task-overdue td,
.tasks-table tr.task-overdue .cell-value {
    color: var(--ui-danger-text) !important;
}

.btn-view,
.tasks-table .btn-view,
.students-table .btn-view {
    background: var(--ui-primary) !important;
    color: var(--ui-text-on-dark) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

.btn-view:hover,
.tasks-table .btn-view:hover,
.students-table .btn-view:hover {
    background: var(--ui-primary-hover) !important;
    color: var(--ui-text-on-dark) !important;
}

/* Cards used by responsive tables */
@media (max-width: 1280px) {
    .table-responsive .tasks-table tr,
    .table-responsive .students-table tr {
        background: var(--ui-surface) !important;
        color: var(--ui-text) !important;
        border-color: var(--ui-border) !important;
        box-shadow: var(--ui-shadow-sm) !important;
    }

    .table-responsive .tasks-table tr:nth-child(even),
    .table-responsive .students-table tr:nth-child(even) {
        background: var(--ui-bg-soft) !important;
    }

    .table-responsive .tasks-table td,
    .table-responsive .students-table td {
        color: var(--ui-text) !important;
        border-bottom-color: var(--ui-border) !important;
    }

    .table-responsive .tasks-table td::before,
    .table-responsive .students-table td::before {
        color: var(--ui-text-muted) !important;
    }

    .table-responsive .tasks-table tr.task-done,
    .table-responsive .tasks-table tr.task-done:nth-child(even) {
        background: var(--ui-success-soft) !important;
    }

    .table-responsive .tasks-table tr.task-done td::before {
        color: var(--ui-success-text) !important;
    }

    .table-responsive .tasks-table tr.task-overdue,
    .table-responsive .tasks-table tr.task-overdue:nth-child(even) {
        background: var(--ui-danger-soft) !important;
    }

    .table-responsive .tasks-table tr.task-overdue td::before {
        color: var(--ui-danger-text) !important;
    }
}

/* Chart page */
.chart-page .card {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-md) !important;
}

.chart-page .card-header {
    background: var(--ui-bg-soft) !important;
    color: var(--ui-text) !important;
    border-bottom: 1px solid var(--ui-border) !important;
}

.chart-page .card-body {
    background: var(--ui-surface) !important;
}

/* Timeline */
.timeline-page .timeline ol li {
    background: var(--ui-border-strong) !important;
}

.timeline-page .timeline ol li:not(:last-child)::after {
    background: var(--ui-primary) !important;
    box-shadow: 0 0 0 4px var(--ui-primary-soft);
}

.timeline-page .timeline ol li div {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-md);
}

.timeline-page .timeline ol li:nth-child(odd) div::before {
    border-color: var(--ui-surface) transparent transparent transparent !important;
}

.timeline-page .timeline ol li:nth-child(even) div::before {
    border-color: transparent transparent transparent var(--ui-surface) !important;
}

.timeline-page .timeline .arrows {
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-md);
}

.timeline-page .section .prev-next-day,
.timeline-page .section .prev-next-week,
.timeline-page .section .prev-next-month {
    background: var(--ui-bg-soft) !important;
    border: 1px solid var(--ui-border);
}

/* Advisor panel */
.panel-page .page-title {
    color: var(--ui-text) !important;
}

/* Login */
.login-page {
    background:
        radial-gradient(circle at 10% 10%, rgba(29, 78, 216, .14), transparent 32%),
        radial-gradient(circle at 90% 90%, rgba(15, 118, 110, .12), transparent 34%),
        var(--ui-bg) !important;
    color: var(--ui-text) !important;
}

.login-card {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-lg) !important;
}

.login-card .subtitle,
.login-card .hint {
    color: var(--ui-text-muted) !important;
}

.login-card button {
    background: var(--ui-primary) !important;
    color: var(--ui-text-on-dark) !important;
}

.login-card button:hover {
    background: var(--ui-primary-hover) !important;
}

.login-card .alert {
    background: var(--ui-danger-soft) !important;
    color: var(--ui-danger-text) !important;
    border: 1px solid #fca5a5;
}

/* 404 */
.not-found-page {
    background:
        radial-gradient(circle at 15% 20%, rgba(29, 78, 216, .16), transparent 34%),
        radial-gradient(circle at 85% 80%, rgba(15, 118, 110, .14), transparent 32%),
        var(--ui-bg) !important;
    color: var(--ui-text) !important;
}

.not-found-card {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

.not-found-code {
    background: var(--ui-primary) !important;
    color: var(--ui-text-on-dark) !important;
}

.not-found-card p {
    color: var(--ui-text-muted) !important;
}

.not-found-path {
    background: var(--ui-bg-soft) !important;
    color: var(--ui-text-muted) !important;
    border: 1px solid var(--ui-border);
}

.not-found-action {
    background: var(--ui-primary) !important;
    color: var(--ui-text-on-dark) !important;
}

.not-found-action:hover {
    background: var(--ui-primary-hover) !important;
}

/* Scrollbars */
* {
    scrollbar-color: var(--ui-border-strong) var(--ui-bg-soft);
}

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--ui-bg-soft);
}

*::-webkit-scrollbar-thumb {
    background: var(--ui-border-strong);
    border: 3px solid var(--ui-bg-soft);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--ui-text-muted);
}

/* Timeline period navigation uses light icon buttons, not solid navigation buttons. */
.timeline-page .section .day-arrow {
    background: var(--ui-surface) !important;
    color: var(--ui-primary) !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

.timeline-page .section .day-arrow:hover {
    background: var(--ui-primary-soft) !important;
    border-color: #93c5fd !important;
}