:root {
    --ui-primary: #1d4ed8;
    --ui-primary-dark: #1e3a8a;
    --ui-primary-soft: #eff6ff;
    --ui-accent: #06b6d4;
    --ui-success: #15803d;
    --ui-warning: #b45309;
    --ui-danger: #b91c1c;
    --ui-bg: #f6f8fb;
    --ui-surface: rgba(255, 255, 255, 0.92);
    --ui-surface-solid: #ffffff;
    --ui-text: #0f172a;
    --ui-muted: #64748b;
    --ui-border: rgba(148, 163, 184, 0.26);
    --ui-border-strong: rgba(100, 116, 139, 0.34);
    --ui-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    --ui-shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.06);
    --ui-radius-xl: 24px;
    --ui-radius-lg: 18px;
    --ui-radius-md: 12px;
}

html {
    scroll-behavior: smooth;
}

body,
body.analytics-page {
    color: var(--ui-text) !important;
    background:
        linear-gradient(135deg, rgba(29, 78, 216, 0.08), transparent 28%),
        linear-gradient(225deg, rgba(6, 182, 212, 0.08), transparent 24%),
        var(--ui-bg) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(29, 78, 216, 0.16);
}

.sidebar,
.analytics-sidebar {
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 26px !important;
    box-shadow: var(--ui-shadow) !important;
    backdrop-filter: blur(22px) saturate(140%) !important;
}

.brand,
.analytics-brand {
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

.brand-mark,
.analytics-brand-mark {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 24px rgba(29, 78, 216, 0.16) !important;
}

.app-shell .sidebar .brand-mark {
    flex: 0 0 76px;
    width: 76px !important;
    height: 76px !important;
    padding: 4px;
}

.brand-copy strong,
.analytics-brand-copy strong {
    color: var(--ui-text);
    letter-spacing: -0.01em;
}

.brand-copy span,
.analytics-brand-copy span,
.sidebar-note,
.analytics-note {
    color: var(--ui-muted) !important;
}

.nav,
.analytics-nav {
    gap: 8px !important;
}

.nav a,
.analytics-nav a {
    position: relative;
    border-radius: 14px !important;
    color: #475569 !important;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
}

.nav a:hover,
.analytics-nav a:hover {
    background: rgba(29, 78, 216, 0.07) !important;
    color: var(--ui-primary-dark) !important;
    transform: translateX(2px) !important;
}

.nav a.active,
.analytics-nav a.active {
    background: linear-gradient(135deg, #ffffff, #eef5ff) !important;
    color: var(--ui-primary-dark) !important;
    box-shadow: inset 3px 0 0 var(--ui-primary), var(--ui-shadow-soft) !important;
}

.nav-icon,
.analytics-nav-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    background: #eaf2ff !important;
    color: var(--ui-primary-dark) !important;
    box-shadow: none !important;
}

.sidebar-note,
.analytics-note {
    background: #f8fafc !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 18px !important;
    line-height: 1.65 !important;
}

.header,
.analytics-topbar {
    background: var(--ui-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: var(--ui-radius-xl) !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

.eyebrow,
.analytics-eyebrow,
.panel-index,
.panel-chip,
.table-meta,
.analytics-filter-badge,
.status-badge,
.status-pill {
    border-radius: 999px !important;
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary-dark) !important;
    letter-spacing: 0.08em !important;
}

.header h1,
.analytics-topbar h1 {
    color: var(--ui-text) !important;
    letter-spacing: -0.03em;
}

.header p,
.analytics-topbar p,
.panel p,
.table-heading p,
.analytics-filter-top p,
.analytics-panel-header .copy,
.empty-state,
.analytics-empty {
    color: var(--ui-muted) !important;
}

.profile,
.analytics-profile {
    background: #ffffff !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--ui-shadow-soft) !important;
}

.avatar,
.analytics-avatar {
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-accent)) !important;
}

.card,
.table-card,
.print-card,
.analytics-card {
    background: var(--ui-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: var(--ui-radius-xl) !important;
    box-shadow: var(--ui-shadow-soft) !important;
    backdrop-filter: blur(16px) !important;
}

.stat-card,
.analytics-stat-card {
    align-items: center !important;
    min-height: 132px;
}

.stat-card:hover,
.analytics-stat-card:hover,
.card:hover,
.table-card:hover,
.print-card:hover {
    box-shadow: var(--ui-shadow) !important;
}

.stat-icon,
.analytics-stat-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    background: #eaf2ff !important;
    color: var(--ui-primary-dark) !important;
}

.stat-copy span,
.analytics-stat-copy p {
    color: var(--ui-muted) !important;
    letter-spacing: 0.06em !important;
}

.stat-copy strong,
.analytics-stat-copy h2 {
    color: var(--ui-text) !important;
    letter-spacing: -0.03em;
}

.panel,
.analytics-filter-card {
    padding: 24px !important;
}

.panel-grid,
.analytics-panel-grid,
.analytics-stats,
.stats {
    gap: 18px !important;
}

.primary-btn,
.analytics-btn,
.action-btn {
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--ui-primary), #2563eb) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(29, 78, 216, 0.22) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

.primary-btn:hover,
.analytics-btn:hover,
.action-btn:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(29, 78, 216, 0.28) !important;
}

.secondary-btn,
.analytics-btn-secondary,
.logout-btn,
.analytics-logout {
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #334155 !important;
    box-shadow: none !important;
}

.secondary-btn:hover,
.analytics-btn-secondary:hover,
.logout-btn:hover,
.analytics-logout:hover {
    border-color: rgba(29, 78, 216, 0.38) !important;
    color: var(--ui-primary-dark) !important;
}

input,
select,
textarea {
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: var(--ui-text) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: rgba(29, 78, 216, 0.72) !important;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.12) !important;
}

.absent-teacher-checkbox-list {
    max-height: 260px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 14px;
    background: #ffffff;
    scrollbar-width: thin;
}

.absent-teacher-checkbox-list .absent-teacher-checkbox-option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--ui-text);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
}

.absent-teacher-checkbox-list .absent-teacher-checkbox-option:hover {
    background: var(--ui-primary-soft);
}

.absent-teacher-checkbox-list .absent-teacher-checkbox-option input[type="checkbox"] {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin: 0;
    padding: 0;
    accent-color: var(--ui-primary);
    cursor: pointer;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.absent-teacher-checkbox-list .absent-teacher-checkbox-option input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--ui-primary) !important;
    outline-offset: 2px;
}

.notice,
.status-banner,
.locked-panel {
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

.notice.success,
.status-banner.official,
.locked-panel {
    background: #ecfdf3 !important;
    border-color: rgba(21, 128, 61, 0.16) !important;
    color: var(--ui-success) !important;
}

.notice.error {
    background: #fef2f2 !important;
    border-color: rgba(185, 28, 28, 0.16) !important;
    color: var(--ui-danger) !important;
}

.notice.info {
    background: #eff6ff !important;
    border-color: rgba(29, 78, 216, 0.16) !important;
    color: var(--ui-primary-dark) !important;
}

.table-card {
    overflow: hidden;
}

.table-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
}

.table-scroll::-webkit-scrollbar {
    height: 10px;
}

.table-scroll::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 999px;
}

table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc !important;
    color: #475569 !important;
    border-bottom: 1px solid var(--ui-border) !important;
}

.archive-preview-table thead th {
    position: static !important;
    top: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.2;
}

.archive-table-scroll {
    max-width: 100%;
    overflow-x: visible !important;
    overflow-y: visible !important;
    display: block;
    width: 100%;
}

.archive-preview-table {
    width: 100%;
    table-layout: fixed;
    font-size: clamp(0.62rem, 0.68vw, 0.78rem);
}

.archive-preview-table th:nth-child(1),
.archive-preview-table td:nth-child(1) {
    width: 5%;
}

.archive-preview-table th:nth-child(2),
.archive-preview-table td:nth-child(2) {
    width: 9%;
}

.archive-preview-table th:nth-child(3),
.archive-preview-table td:nth-child(3) {
    width: 8%;
}

.archive-preview-table th:nth-child(4),
.archive-preview-table td:nth-child(4) {
    width: 13%;
}

.archive-preview-table th:nth-child(5),
.archive-preview-table td:nth-child(5) {
    width: 6%;
}

.archive-preview-table th:nth-child(6),
.archive-preview-table td:nth-child(6) {
    width: 10%;
}

.archive-preview-table th:nth-child(7),
.archive-preview-table td:nth-child(7) {
    width: 14%;
}

.archive-preview-table th:nth-child(8),
.archive-preview-table td:nth-child(8) {
    width: 10%;
}

.archive-preview-table th:nth-child(9),
.archive-preview-table td:nth-child(9) {
    width: 12%;
}

.archive-preview-table th:nth-child(10),
.archive-preview-table td:nth-child(10) {
    width: 7%;
}

.archive-preview-table th:nth-child(11),
.archive-preview-table td:nth-child(11) {
    width: 6%;
}

.archive-preview-table th,
.archive-preview-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 8px 5px;
    vertical-align: top;
}

.archive-filter-card {
    display: flex;
    justify-content: center;
}

.archive-date-filter {
    display: flex;
    align-items: end;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

.archive-date-filter label {
    display: grid;
    gap: 4px;
    margin-right: 8px;
}

.archive-date-filter label span {
    color: var(--ui-muted);
    font-size: 0.82rem;
}

.archive-date-filter input[type="date"] {
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 12px;
    color: var(--ui-text);
    background: #fff;
}

.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 12px;
    color: var(--ui-text);
    background: #fff;
    font-weight: 700;
    text-decoration: none;
}

tbody td {
    color: #1e293b !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
}

tbody tr:hover td {
    background: #f8fbff !important;
}

.empty-state {
    border: 1px dashed var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: rgba(255, 255, 255, 0.62) !important;
}

.empty-state strong {
    color: var(--ui-text) !important;
}

.status-pill.official,
.status-badge.final,
.action-badge {
    background: #ecfdf3 !important;
    color: var(--ui-success) !important;
}

.print-card {
    background: #ffffff !important;
}

.print-header {
    border-bottom: 1px solid var(--ui-border);
    padding-bottom: 18px;
}

.print-title {
    color: var(--ui-text) !important;
    letter-spacing: 0.06em !important;
}

.doris-assistant,
.doris-widget {
    filter: drop-shadow(0 18px 35px rgba(15, 23, 42, 0.14));
}

.nav-toggle {
    display: none;
}

@media (max-width: 1100px) {
    .app-shell {
        display: block;
        min-width: 0;
    }

    .app-shell .sidebar {
        position: sticky;
        top: 0;
        left: auto;
        z-index: 20;
        width: 100%;
        height: auto;
        max-height: none;
        margin: 0 0 14px;
        padding: 12px clamp(14px, 3vw, 24px);
        overflow: visible;
        border-radius: 0 0 20px 20px !important;
    }

    .app-shell .brand {
        max-width: 100%;
        padding: 10px 12px;
    }

    .app-shell .nav {
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 8px;
        margin-top: 12px;
        padding: 0 0 6px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .app-shell .nav a {
        flex: 0 0 auto;
        min-width: max-content;
    }

    .app-shell .sidebar-note {
        display: none;
    }

    .app-shell .main {
        width: 100%;
        margin-left: 0;
        padding: 0 clamp(14px, 3vw, 28px) 24px;
    }

    .app-shell .header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .app-shell .header > div:first-child {
        flex: 1 1 100%;
    }

    .app-shell .profile {
        max-width: 100%;
    }

    .app-shell .content,
    .app-shell .canvas {
        width: 100%;
        min-width: 0;
    }

    .app-shell .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-shell .stats > .card:last-child {
        grid-column: auto;
    }

    .app-shell .workflow-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-shell .panel-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-shell .table-scroll {
        max-width: 100%;
        overscroll-behavior-inline: contain;
    }
}

@media (max-width: 980px) {
    .sidebar,
    .analytics-sidebar {
        border-radius: 0 0 22px 22px !important;
    }

    .nav,
    .analytics-nav {
        padding-bottom: 6px;
    }

    .nav a,
    .analytics-nav a {
        min-width: max-content;
    }
}

@media (max-width: 720px) {
    .sidebar,
    .analytics-sidebar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0 8px;
        padding: 10px 12px !important;
    }

    .sidebar .brand,
    .analytics-sidebar .analytics-brand {
        grid-column: 1;
        min-width: 0;
        margin: 0 !important;
    }

    .sidebar .nav-toggle,
    .analytics-sidebar .nav-toggle {
        grid-column: 2;
        grid-row: 1;
    }

    .nav-toggle {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--ui-border);
        border-radius: 14px;
        background: #ffffff;
        color: var(--ui-primary-dark);
        box-shadow: var(--ui-shadow-soft);
        cursor: pointer;
    }

    .nav-toggle:focus-visible {
        outline: 3px solid rgba(29, 78, 216, 0.35);
        outline-offset: 2px;
    }

    .nav-toggle svg {
        width: 22px;
        height: 22px;
    }

    .sidebar:not(.is-nav-open) > .nav,
    .analytics-sidebar:not(.is-nav-open) > .analytics-nav {
        display: none !important;
    }

    .sidebar.is-nav-open > .nav,
    .analytics-sidebar.is-nav-open > .analytics-nav {
        display: grid !important;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        margin-top: 10px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .app-shell .sidebar {
        padding: 10px 12px 12px;
    }

    .app-shell .brand {
        gap: 10px;
        padding: 8px;
        border-radius: 16px !important;
    }

    .app-shell .sidebar .brand-mark {
        flex: 0 0 54px;
        width: 54px !important;
        height: 54px !important;
    }

    .app-shell .brand-copy strong {
        font-size: 0.9rem;
    }

    .app-shell .brand-copy span {
        font-size: 0.76rem;
    }

    .app-shell .nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-shell .sidebar:not(.is-nav-open) > .nav {
        display: none !important;
    }

    .app-shell .sidebar.is-nav-open > .nav {
        display: grid !important;
    }

    .app-shell .nav a {
        min-width: 0;
        min-height: 44px;
        gap: 8px;
        padding: 6px 8px;
        font-size: 0.84rem;
        line-height: 1.2;
    }

    .app-shell .nav-icon {
        flex: 0 0 30px;
        width: 30px !important;
        height: 30px !important;
    }

    .app-shell .header {
        gap: 14px;
        padding: 18px;
    }

    .app-shell .header h1 {
        font-size: clamp(1.35rem, 6vw, 1.65rem);
        overflow-wrap: anywhere;
    }

    .app-shell .header p,
    .app-shell .panel p,
    .app-shell .notice {
        overflow-wrap: anywhere;
    }

    .app-shell .profile {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 8px;
    }

    .app-shell .profile-copy {
        min-width: 0;
    }

    .app-shell .profile-copy strong {
        overflow-wrap: anywhere;
    }

    .app-shell .logout-form,
    .app-shell .logout-btn {
        width: auto;
    }

    .app-shell .logout-btn {
        min-height: 42px;
        padding: 9px 12px;
        white-space: nowrap;
    }

    .app-shell .stats,
    .app-shell .workflow-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-shell .card,
    .app-shell .table-card,
    .app-shell .print-card {
        min-width: 0;
        padding: 18px;
    }

    .app-shell .dropzone {
        padding: 22px 14px;
    }

    .header,
    .analytics-topbar,
    .card,
    .table-card,
    .print-card,
    .analytics-card {
        border-radius: 18px !important;
    }

    .stats,
    .analytics-stats {
        grid-template-columns: 1fr !important;
    }

    .archive-date-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .archive-date-filter label {
        margin-right: 0;
    }
}

@media print {
    .no-print,
    .archive-filter-card,
    .sidebar,
    .header,
    .stats,
    .file-browser {
        display: none !important;
    }

    .archives-grid,
    .preview-stack {
        display: block !important;
    }

    .archive-table-scroll {
        overflow: visible !important;
    }

    body,
    body.analytics-page {
        background: #ffffff !important;
        color: #111827 !important;
    }

    .print-card,
    .card {
        box-shadow: none !important;
        border-color: #d1d5db !important;
        background: #ffffff !important;
    }

    thead th {
        position: static !important;
        background: #f3f4f6 !important;
        color: #111827 !important;
    }

    tbody td {
        color: #111827 !important;
    }
}