/**
 * Central Hub Theme System
 * 4 themes: light, dark, doraemon-day, doraemon-night
 * Uses CSS custom properties for all color tokens.
 */

/* ===== LOCAL FONT FACES (Air-Gap Compliant) ===== */
@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/inter-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('/static/fonts/nunito-var.woff2') format('woff2');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

/* ===== LIGHT THEME (default) ===== */
:root,
[data-theme="light"] {
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --bg-body: #ffffff;
    --bg-card: #ffffff;
    --bg-header: rgba(255, 255, 255, 0.8);
    --bg-context-bar: #ffffff;
    --bg-input: #f8fafc;
    --bg-hover: #f1f5f9;
    --bg-dropdown: #ffffff;
    --bg-modal: #ffffff;
    --bg-modal-overlay: rgba(0, 0, 0, 0.5);

    --text-primary: #0A1929;
    --text-secondary: #64748B;
    --text-muted: #94a3b8;
    --text-heading: #0A1929;
    --text-on-accent: #ffffff;

    --border-primary: #E2E8F0;
    --border-card: #E2E8F0;
    --border-input: #e2e8f0;
    --border-header: #E2E8F0;
    --border-hover: #475569;

    --accent-primary: #475569;
    --accent-secondary: #64748B;
    --accent-blue: #3b82f6;
    --accent-indigo: #4f46e5;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --accent-amber: #f59e0b;
    --accent-teal: #14b8a6;

    --shadow-card: none;
    --shadow-card-hover: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-header: none;
    --shadow-dropdown: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

    --tile-accent-color: transparent;
    --tile-accent-hover: #475569;
    --tile-loading-bar: #475569;

    --section-line-color: #E2E8F0;
    --ledger-grid-color: rgba(71, 85, 111, 0.04);
    --lock-pattern-color: rgba(71, 85, 111, 0.03);

    --scrollbar-thumb: #CBD5E1;
    --scrollbar-thumb-hover: #94a3b8;
    --scrollbar-track: transparent;

    /* Status colors */
    --status-pending-text: #92400e;
    --status-pending-dot: #f59e0b;
    --status-locked-text: #0f766e;
    --status-locked-dot: #14b8a6;
    --status-draft-text: #1e40af;
    --status-draft-dot: #3b82f6;
    --status-overdue-text: #991b1b;

    /* Badge */
    --badge-prod-bg: transparent;
    --badge-prod-text: #475569;
    --badge-prod-border: #cbd5e1;

    /* Context bar */
    --context-bar-bg: #ffffff;
    --context-bar-border: #E2E8F0;
    --context-bar-text: #475569;
    --context-bar-accent: #475569;
    --context-bar-tab-bg: #f1f5f9;
    --context-bar-tab-text: #64748B;

    /* Login */
    --login-bg: #f8fafc;
    --login-card-bg: #ffffff;
    --login-card-border: #e2e8f0;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --bg-body: #000000;
    --bg-card: #1E293B;
    --bg-header: rgba(0, 0, 0, 0.8);
    --bg-context-bar: #000000;
    --bg-input: #0f172a;
    --bg-hover: #1e293b;
    --bg-dropdown: #1e293b;
    --bg-modal: #1e293b;
    --bg-modal-overlay: rgba(0, 0, 0, 0.7);

    --text-primary: #F8FAFC;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-heading: #f1f5f9;
    --text-on-accent: #ffffff;

    --border-primary: #334155;
    --border-card: #334155;
    --border-input: #334155;
    --border-header: #1E293B;
    --border-hover: #475569;

    --accent-primary: #94a3b8;
    --accent-secondary: #64748B;
    --accent-blue: #60a5fa;
    --accent-indigo: #818cf8;
    --accent-green: #34d399;
    --accent-red: #f87171;
    --accent-amber: #fbbf24;
    --accent-teal: #2dd4bf;

    --shadow-card: none;
    --shadow-card-hover: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-header: none;
    --shadow-dropdown: 0 4px 6px -1px rgba(0, 0, 0, 0.4);

    --tile-accent-color: transparent;
    --tile-accent-hover: #94a3b8;
    --tile-loading-bar: #94a3b8;

    --section-line-color: #1E293B;
    --ledger-grid-color: rgba(148, 163, 184, 0.03);
    --lock-pattern-color: rgba(71, 85, 111, 0.06);

    --scrollbar-thumb: #334155;
    --scrollbar-thumb-hover: #475569;
    --scrollbar-track: transparent;

    --status-pending-text: #fbbf24;
    --status-pending-dot: #f59e0b;
    --status-locked-text: #2dd4bf;
    --status-locked-dot: #14b8a6;
    --status-draft-text: #60a5fa;
    --status-draft-dot: #3b82f6;
    --status-overdue-text: #f87171;

    --badge-prod-bg: transparent;
    --badge-prod-text: #94a3b8;
    --badge-prod-border: #475569;

    --context-bar-bg: #000000;
    --context-bar-border: #1E293B;
    --context-bar-text: #94a3b8;
    --context-bar-accent: #f1f5f9;
    --context-bar-tab-bg: #1e293b;
    --context-bar-tab-text: #94a3b8;

    --login-bg: #0f172a;
    --login-card-bg: #1e293b;
    --login-card-border: #334155;
}

/* ===== DORAEMON DAY THEME ===== */
[data-theme="doraemon-day"] {
    --font-primary: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --bg-body: #F7FBFF;
    --bg-card: #ffffff;
    --bg-header: linear-gradient(180deg, #E53935 0%, #C62828 100%);
    --bg-context-bar: #F7FBFF;
    --bg-input: #ffffff;
    --bg-hover: #EAF4FF;
    --bg-dropdown: #ffffff;
    --bg-modal: #ffffff;
    --bg-modal-overlay: rgba(0, 0, 0, 0.4);

    --text-primary: #1F2933;
    --text-secondary: #5F6C7B;
    --text-muted: #9aa5b4;
    --text-heading: #1F2933;
    --text-on-accent: #ffffff;

    --border-primary: #E6EDF5;
    --border-card: #EAF4FF;
    --border-input: #E6EDF5;
    --border-header: #FFD54F;
    --border-hover: #1E90FF;

    --accent-primary: #1E90FF;
    --accent-secondary: #1565C0;
    --accent-blue: #1E90FF;
    --accent-indigo: #1565C0;
    --accent-green: #4CAF50;
    --accent-red: #E53935;
    --accent-amber: #FFD54F;
    --accent-teal: #4CAF50;

    --shadow-card: 0 6px 16px rgba(30, 144, 255, 0.12);
    --shadow-card-hover: 0 8px 24px rgba(30, 144, 255, 0.18);
    --shadow-header: 0 4px 12px rgba(229, 57, 53, 0.3);
    --shadow-dropdown: 0 4px 12px rgba(30, 144, 255, 0.15);

    --tile-accent-color: transparent;
    --tile-accent-hover: #1E90FF;
    --tile-loading-bar: linear-gradient(90deg, #1E90FF, #FFD54F);

    --section-line-color: #E6EDF5;
    --ledger-grid-color: rgba(30, 144, 255, 0.03);
    --lock-pattern-color: rgba(30, 144, 255, 0.03);

    --scrollbar-thumb: #EAF4FF;
    --scrollbar-thumb-hover: #1E90FF;
    --scrollbar-track: transparent;

    --status-pending-text: #1F2933;
    --status-pending-dot: #F9A825;
    --status-locked-text: #ffffff;
    --status-locked-dot: #4CAF50;
    --status-draft-text: #ffffff;
    --status-draft-dot: #1E90FF;
    --status-overdue-text: #ffffff;

    --badge-prod-bg: rgba(255, 255, 255, 0.1);
    --badge-prod-text: #ffffff;
    --badge-prod-border: rgba(255, 255, 255, 0.3);

    --context-bar-bg: #F7FBFF;
    --context-bar-border: #E6EDF5;
    --context-bar-text: #5F6C7B;
    --context-bar-accent: #1E90FF;
    --context-bar-tab-bg: #EAF4FF;
    --context-bar-tab-text: #1E90FF;

    --login-bg: #F7FBFF;
    --login-card-bg: #ffffff;
    --login-card-border: #EAF4FF;

    /* Doraemon-specific */
    --doraemon-blue: #1E90FF;
    --doraemon-blue-soft: #EAF4FF;
    --doraemon-blue-dark: #1565C0;
    --doraemon-red: #E53935;
    --doraemon-red-dark: #C62828;
    --doraemon-yellow: #FFD54F;
    --doraemon-yellow-dark: #F9A825;
    --doraemon-green: #4CAF50;
    --doraemon-pink: #F48FB1;
    --doraemon-pink-dark: #EC407A;
}

/* ===== DORAEMON NIGHT THEME ===== */
[data-theme="doraemon-night"] {
    --font-primary: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --bg-body: #0F1B3D;
    --bg-card: #16275A;
    --bg-header: linear-gradient(180deg, #0D47A1 0%, #0F1B3D 100%);
    --bg-context-bar: #0F1B3D;
    --bg-input: #16275A;
    --bg-hover: #1E3A8A;
    --bg-dropdown: #16275A;
    --bg-modal: #16275A;
    --bg-modal-overlay: rgba(0, 0, 0, 0.6);

    --text-primary: #F5F7FB;
    --text-secondary: #C7D2FE;
    --text-muted: #8B9AD8;
    --text-heading: #F5F7FB;
    --text-on-accent: #ffffff;

    --border-primary: #1E3A8A;
    --border-card: #1E3A8A;
    --border-input: #1E3A8A;
    --border-header: #FFD54F;
    --border-hover: #1E90FF;

    --accent-primary: #1E90FF;
    --accent-secondary: #1565C0;
    --accent-blue: #1E90FF;
    --accent-indigo: #818cf8;
    --accent-green: #4CAF50;
    --accent-red: #E53935;
    --accent-amber: #FFD54F;
    --accent-teal: #4CAF50;

    --shadow-card: 0 8px 20px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 8px 24px rgba(30, 144, 255, 0.25);
    --shadow-header: 0 4px 12px rgba(13, 71, 161, 0.5);
    --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.4);

    --tile-accent-color: transparent;
    --tile-accent-hover: #FFD54F;
    --tile-loading-bar: linear-gradient(90deg, #1E90FF, #FFD54F);

    --section-line-color: #1E3A8A;
    --ledger-grid-color: rgba(30, 144, 255, 0.03);
    --lock-pattern-color: rgba(30, 144, 255, 0.04);

    --scrollbar-thumb: #1E3A8A;
    --scrollbar-thumb-hover: #1E90FF;
    --scrollbar-track: transparent;

    --status-pending-text: #1F2933;
    --status-pending-dot: #F9A825;
    --status-locked-text: #ffffff;
    --status-locked-dot: #4CAF50;
    --status-draft-text: #ffffff;
    --status-draft-dot: #1E90FF;
    --status-overdue-text: #ffffff;

    --badge-prod-bg: rgba(255, 255, 255, 0.1);
    --badge-prod-text: #ffffff;
    --badge-prod-border: rgba(255, 255, 255, 0.3);

    --context-bar-bg: #0F1B3D;
    --context-bar-border: #16275A;
    --context-bar-text: #C7D2FE;
    --context-bar-accent: #FFD54F;
    --context-bar-tab-bg: #16275A;
    --context-bar-tab-text: #C7D2FE;

    --login-bg: #0F1B3D;
    --login-card-bg: #16275A;
    --login-card-border: #1E3A8A;

    /* Doraemon-specific */
    --doraemon-blue: #1E90FF;
    --doraemon-blue-soft: #EAF4FF;
    --doraemon-blue-dark: #1565C0;
    --doraemon-red: #E53935;
    --doraemon-red-dark: #C62828;
    --doraemon-yellow: #FFD54F;
    --doraemon-yellow-dark: #F9A825;
    --doraemon-green: #4CAF50;
    --doraemon-pink: #F48FB1;
    --doraemon-pink-dark: #EC407A;
}

/* ===== BASE STYLES ===== */
* {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    background-color: var(--bg-body);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== LEDGER GRID BACKGROUND ===== */
.ledger-grid::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 23px,
            var(--ledger-grid-color) 23px,
            var(--ledger-grid-color) 24px
        );
    z-index: 0;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ===== HEADER ===== */
.hub-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    z-index: 50;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.hub-header--normal {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-header);
}

.hub-header--doraemon {
    background: var(--bg-header);
    border-bottom: 4px solid var(--border-header);
    box-shadow: var(--shadow-header);
}

/* ===== CONTEXT BAR ===== */
.hub-context-bar {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    height: 48px;
    z-index: 40;
    background: var(--context-bar-bg);
    border-bottom: 1px solid var(--context-bar-border);
    color: var(--context-bar-text);
    display: flex;
    align-items: center;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ===== TILE STYLES ===== */
.tile-container {
    transition: all 150ms ease-out;
    transform: scale(1);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.tile-container:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-card-hover);
}

.tile-container:active {
    transform: scale(0.99);
    transition-duration: 50ms;
}

.tile-container:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Tile accent bar */
.tile-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--tile-accent-color);
    transition: all 150ms ease-out;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.tile-container:hover .tile-accent,
.tile-container:focus-within .tile-accent {
    background-color: var(--tile-accent-hover);
}

/* Tile loading bar */
.tile-loading-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--tile-loading-bar);
    width: 0%;
    transition: width 300ms ease-out;
}

.tile-container.loading .tile-loading-bar {
    width: 100%;
}

.tile-container.loading {
    opacity: 0.7;
}

/* Lock pattern */
.lock-pattern {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        var(--lock-pattern-color) 10px,
        var(--lock-pattern-color) 11px
    );
}

/* ===== SECTION DIVIDER ===== */
.section-line {
    height: 1px;
    background: linear-gradient(
        to right,
        var(--section-line-color) 0%,
        var(--section-line-color) 120px,
        transparent 120px
    );
}

/* ===== SEARCH INPUT ===== */
.hub-search-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.hub-search-input::placeholder {
    color: var(--text-muted);
}

/* ===== DORAEMON THEME OVERRIDES ===== */

/* Doraemon tiles get rounder corners and thicker borders */
[data-theme="doraemon-day"] .tile-container,
[data-theme="doraemon-night"] .tile-container {
    border-radius: 12px;
    border-width: 2px;
    font-family: var(--font-primary);
}

[data-theme="doraemon-day"] .tile-accent,
[data-theme="doraemon-night"] .tile-accent {
    width: 3px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

[data-theme="doraemon-day"] .tile-container:hover,
[data-theme="doraemon-night"] .tile-container:hover {
    transform: translateY(-1px) scale(1.01);
}

[data-theme="doraemon-day"] .section-line,
[data-theme="doraemon-night"] .section-line {
    height: 2px;
    border-radius: 1px;
}

[data-theme="doraemon-day"] .tile-loading-bar,
[data-theme="doraemon-night"] .tile-loading-bar {
    height: 3px;
}

/* Doraemon bell-shaped search */
.bell-search {
    background: #FFD54F;
    border: 2px solid #F9A825;
    border-radius: 50px;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-theme="doraemon-night"] .bell-search {
    background: #16275A;
    border-color: #1E90FF;
}

.bell-search input {
    color: #5D4037;
    font-weight: 600;
}

.bell-search input::placeholder {
    color: rgba(93, 64, 55, 0.6);
}

[data-theme="doraemon-night"] .bell-search input {
    color: #F5F7FB;
}

[data-theme="doraemon-night"] .bell-search input::placeholder {
    color: rgba(199, 210, 254, 0.6);
}

/* Doraemon avatar */
.doraemon-avatar {
    background: linear-gradient(135deg, #1E90FF 0%, #1565C0 100%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* ===== CANDY BADGES (Doraemon status badges) ===== */
.candy-badge {
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.candy-pending {
    background: linear-gradient(135deg, #FFD54F 0%, #F9A825 100%);
    color: #1F2933;
}

.candy-locked {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    color: white;
}

.candy-draft {
    background: linear-gradient(135deg, #1E90FF 0%, #1565C0 100%);
    color: white;
}

.candy-overdue {
    background: linear-gradient(135deg, #E53935 0%, #C62828 100%);
    color: white;
}

[data-theme="doraemon-night"] .candy-pending {
    box-shadow: 0 0 10px rgba(255, 213, 79, 0.3);
}

/* ===== DORAEMON WATERMARK ===== */
[data-theme="doraemon-day"] .doraemon-watermark,
[data-theme="doraemon-night"] .doraemon-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.03;
}

/* ===== STATUS PULSE ===== */
@keyframes ledgerPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.status-pulse {
    animation: ledgerPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ===== SPINNER ===== */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== DARK MODE TAILWIND CLASS OVERRIDES ===== */
/* These allow existing components (Settings, Security, Tasks, Login)
   to work in dark and Doraemon night themes without rewriting every class */

[data-theme="dark"] .bg-white,
[data-theme="doraemon-night"] .bg-white {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100,
[data-theme="doraemon-night"] .bg-gray-50,
[data-theme="doraemon-night"] .bg-gray-100 {
    background-color: var(--bg-hover) !important;
}

[data-theme="dark"] .bg-slate-50,
[data-theme="doraemon-night"] .bg-slate-50 {
    background-color: var(--bg-hover) !important;
}

[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-700,
[data-theme="doraemon-night"] .text-gray-800,
[data-theme="doraemon-night"] .text-gray-900,
[data-theme="doraemon-night"] .text-gray-700 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500,
[data-theme="doraemon-night"] .text-gray-600,
[data-theme="doraemon-night"] .text-gray-500 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-400,
[data-theme="doraemon-night"] .text-gray-400 {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300,
[data-theme="doraemon-night"] .border-gray-200,
[data-theme="doraemon-night"] .border-gray-300 {
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg,
[data-theme="doraemon-night"] .shadow-sm,
[data-theme="doraemon-night"] .shadow-md,
[data-theme="doraemon-night"] .shadow-lg {
    box-shadow: var(--shadow-card) !important;
}

/* Nav and dropdown overrides */
[data-theme="dark"] .bg-white.rounded-md.shadow-lg,
[data-theme="doraemon-night"] .bg-white.rounded-md.shadow-lg {
    background-color: var(--bg-dropdown) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .hover\:bg-gray-100:hover,
[data-theme="doraemon-night"] .hover\:bg-gray-100:hover {
    background-color: var(--bg-hover) !important;
}

[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="doraemon-night"] .hover\:bg-gray-50:hover {
    background-color: var(--bg-hover) !important;
}

/* Input overrides */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="doraemon-night"] input,
[data-theme="doraemon-night"] select,
[data-theme="doraemon-night"] textarea {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-input) !important;
}

/* Button overrides for standard Tailwind buttons */
[data-theme="dark"] .bg-indigo-50,
[data-theme="doraemon-night"] .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.15) !important;
}

[data-theme="dark"] .text-indigo-600,
[data-theme="doraemon-night"] .text-indigo-600 {
    color: var(--accent-indigo) !important;
}

/* Red button/badge overrides */
[data-theme="dark"] .bg-red-500,
[data-theme="doraemon-night"] .bg-red-500 {
    background-color: var(--accent-red) !important;
}

/* Nav button active state override */
[data-theme="dark"] .bg-indigo-50.text-indigo-600 {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: var(--accent-indigo) !important;
}

/* Make the body-level nav border adapt */
[data-theme="dark"] nav.border-b.border-gray-200,
[data-theme="doraemon-night"] nav.border-b.border-gray-200 {
    background-color: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
}

/* Doraemon day overrides for Tailwind classes */
[data-theme="doraemon-day"] .bg-white {
    background-color: var(--bg-card) !important;
}

[data-theme="doraemon-day"] nav.border-b.border-gray-200 {
    background: var(--bg-header) !important;
    border-color: var(--border-header) !important;
}

/* ===== COMPREHENSIVE TOOL PAGE DARK MODE OVERRIDES ===== */
/* These override hardcoded colors in tool pages that don't use CSS variables */

/* --- Body-level overrides --- */
[data-theme="dark"] body,
[data-theme="doraemon-night"] body {
    background: var(--bg-body) !important;
    color: var(--text-primary) !important;
}

/* --- Container / Card backgrounds --- */
[data-theme="dark"] .main-content,
[data-theme="dark"] .app-container,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .section,
[data-theme="dark"] .module-card,
[data-theme="dark"] .info-section,
[data-theme="dark"] .info-box,
[data-theme="dark"] .form-container,
[data-theme="dark"] .periods-container,
[data-theme="dark"] .tasks-container,
[data-theme="dark"] .amort-container,
[data-theme="dark"] .dashboard-container,
[data-theme="doraemon-night"] .main-content,
[data-theme="doraemon-night"] .app-container,
[data-theme="doraemon-night"] .stat-card,
[data-theme="doraemon-night"] .card,
[data-theme="doraemon-night"] .panel,
[data-theme="doraemon-night"] .section,
[data-theme="doraemon-night"] .module-card,
[data-theme="doraemon-night"] .info-section,
[data-theme="doraemon-night"] .info-box,
[data-theme="doraemon-night"] .form-container,
[data-theme="doraemon-night"] .periods-container,
[data-theme="doraemon-night"] .tasks-container,
[data-theme="doraemon-night"] .amort-container,
[data-theme="doraemon-night"] .dashboard-container {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

/* --- Page headers and app headers --- */
[data-theme="dark"] .page-header,
[data-theme="dark"] .app-header,
[data-theme="dark"] header.header,
[data-theme="doraemon-night"] .page-header,
[data-theme="doraemon-night"] .app-header,
[data-theme="doraemon-night"] header.header {
    background: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

/* --- Heading colors --- */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="doraemon-night"] h1,
[data-theme="doraemon-night"] h2,
[data-theme="doraemon-night"] h3,
[data-theme="doraemon-night"] h4,
[data-theme="doraemon-night"] h5 {
    color: var(--text-heading) !important;
}

/* --- Paragraph and label text --- */
[data-theme="dark"] p,
[data-theme="dark"] label,
[data-theme="dark"] span,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] .filter-group label,
[data-theme="doraemon-night"] p,
[data-theme="doraemon-night"] label,
[data-theme="doraemon-night"] span,
[data-theme="doraemon-night"] li,
[data-theme="doraemon-night"] td,
[data-theme="doraemon-night"] .filter-group label {
    color: var(--text-primary) !important;
}

/* --- Table dark mode --- */
[data-theme="dark"] table,
[data-theme="doraemon-night"] table {
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] table th,
[data-theme="dark"] table thead,
[data-theme="dark"] table thead th,
[data-theme="doraemon-night"] table th,
[data-theme="doraemon-night"] table thead,
[data-theme="doraemon-night"] table thead th {
    background: var(--bg-hover) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] table td,
[data-theme="doraemon-night"] table td {
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] table tbody tr,
[data-theme="doraemon-night"] table tbody tr {
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] table tbody tr:hover,
[data-theme="doraemon-night"] table tbody tr:hover {
    background: var(--bg-hover) !important;
}

[data-theme="dark"] table tbody tr:nth-child(even),
[data-theme="doraemon-night"] table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* --- Modal dark overrides --- */
[data-theme="dark"] .modal,
[data-theme="doraemon-night"] .modal {
    background: rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="doraemon-night"] .modal-content,
[data-theme="doraemon-night"] .modal-body,
[data-theme="doraemon-night"] .modal-header,
[data-theme="doraemon-night"] .modal-footer {
    background: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

/* --- Sidebar / Navigation --- */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .sidebar-nav,
[data-theme="dark"] .nav-menu,
[data-theme="doraemon-night"] .sidebar,
[data-theme="doraemon-night"] .sidebar-nav,
[data-theme="doraemon-night"] .nav-menu {
    background: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
}

/* --- Tabs --- */
[data-theme="dark"] .tabs,
[data-theme="dark"] .tab-btn,
[data-theme="dark"] .tab-button,
[data-theme="dark"] .report-tabs,
[data-theme="doraemon-night"] .tabs,
[data-theme="doraemon-night"] .tab-btn,
[data-theme="doraemon-night"] .tab-button,
[data-theme="doraemon-night"] .report-tabs {
    background: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-secondary) !important;
}

/* --- Filter / Toolbar areas --- */
[data-theme="dark"] .filter-panel,
[data-theme="dark"] .toolbar,
[data-theme="dark"] .filters,
[data-theme="dark"] .filter-group select,
[data-theme="doraemon-night"] .filter-panel,
[data-theme="doraemon-night"] .toolbar,
[data-theme="doraemon-night"] .filters,
[data-theme="doraemon-night"] .filter-group select {
    background: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

/* --- Glass card (calendar) --- */
[data-theme="dark"] .glass-card,
[data-theme="doraemon-night"] .glass-card {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

/* --- Info boxes --- */
[data-theme="dark"] .info-box h3,
[data-theme="dark"] .info-section h3,
[data-theme="doraemon-night"] .info-box h3,
[data-theme="doraemon-night"] .info-section h3 {
    color: var(--text-heading) !important;
}

/* --- Buttons --- */
[data-theme="dark"] .btn-secondary,
[data-theme="doraemon-night"] .btn-secondary {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

/* --- Code blocks --- */
[data-theme="dark"] code,
[data-theme="dark"] pre,
[data-theme="doraemon-night"] code,
[data-theme="doraemon-night"] pre {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

/* --- Additional Tailwind class overrides --- */
[data-theme="dark"] .bg-gray-200,
[data-theme="doraemon-night"] .bg-gray-200 {
    background-color: var(--border-primary) !important;
}

[data-theme="dark"] .bg-gray-300,
[data-theme="doraemon-night"] .bg-gray-300 {
    background-color: #475569 !important;
}

[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-blue-100,
[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-green-100,
[data-theme="dark"] .bg-red-50,
[data-theme="dark"] .bg-red-100,
[data-theme="dark"] .bg-yellow-50,
[data-theme="dark"] .bg-yellow-100,
[data-theme="dark"] .bg-purple-50,
[data-theme="dark"] .bg-purple-100,
[data-theme="dark"] .bg-orange-50,
[data-theme="dark"] .bg-orange-100,
[data-theme="dark"] .bg-indigo-100,
[data-theme="doraemon-night"] .bg-blue-50,
[data-theme="doraemon-night"] .bg-blue-100,
[data-theme="doraemon-night"] .bg-green-50,
[data-theme="doraemon-night"] .bg-green-100,
[data-theme="doraemon-night"] .bg-red-50,
[data-theme="doraemon-night"] .bg-red-100,
[data-theme="doraemon-night"] .bg-yellow-50,
[data-theme="doraemon-night"] .bg-yellow-100,
[data-theme="doraemon-night"] .bg-purple-50,
[data-theme="doraemon-night"] .bg-purple-100,
[data-theme="doraemon-night"] .bg-orange-50,
[data-theme="doraemon-night"] .bg-orange-100,
[data-theme="doraemon-night"] .bg-indigo-100 {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .text-blue-600,
[data-theme="dark"] .text-blue-700,
[data-theme="doraemon-night"] .text-blue-600,
[data-theme="doraemon-night"] .text-blue-700 {
    color: #60a5fa !important;
}

[data-theme="dark"] .text-green-600,
[data-theme="dark"] .text-green-700,
[data-theme="doraemon-night"] .text-green-600,
[data-theme="doraemon-night"] .text-green-700 {
    color: #4ade80 !important;
}

[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-red-700,
[data-theme="doraemon-night"] .text-red-600,
[data-theme="doraemon-night"] .text-red-700 {
    color: #f87171 !important;
}

[data-theme="dark"] .text-yellow-600,
[data-theme="dark"] .text-yellow-700,
[data-theme="doraemon-night"] .text-yellow-600,
[data-theme="doraemon-night"] .text-yellow-700 {
    color: #fbbf24 !important;
}

[data-theme="dark"] .text-purple-600,
[data-theme="dark"] .text-purple-700,
[data-theme="doraemon-night"] .text-purple-600,
[data-theme="doraemon-night"] .text-purple-700 {
    color: #a78bfa !important;
}

/* --- Border overrides --- */
[data-theme="dark"] .border-b,
[data-theme="dark"] .border-t,
[data-theme="dark"] .border,
[data-theme="doraemon-night"] .border-b,
[data-theme="doraemon-night"] .border-t,
[data-theme="doraemon-night"] .border {
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .divide-y > * + *,
[data-theme="doraemon-night"] .divide-y > * + * {
    border-color: var(--border-primary) !important;
}

/* --- Hover state overrides --- */
[data-theme="dark"] .hover\:bg-gray-200:hover,
[data-theme="doraemon-night"] .hover\:bg-gray-200:hover {
    background-color: var(--bg-hover) !important;
}

/* --- Quill editor dark mode --- */
[data-theme="dark"] .ql-toolbar,
[data-theme="dark"] .ql-container,
[data-theme="doraemon-night"] .ql-toolbar,
[data-theme="doraemon-night"] .ql-container {
    background: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ql-toolbar .ql-stroke,
[data-theme="doraemon-night"] .ql-toolbar .ql-stroke {
    stroke: var(--text-secondary) !important;
}

[data-theme="dark"] .ql-toolbar .ql-fill,
[data-theme="doraemon-night"] .ql-toolbar .ql-fill {
    fill: var(--text-secondary) !important;
}

[data-theme="dark"] .ql-toolbar .ql-picker-label,
[data-theme="doraemon-night"] .ql-toolbar .ql-picker-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .ql-editor.ql-blank::before,
[data-theme="doraemon-night"] .ql-editor.ql-blank::before {
    color: var(--text-muted) !important;
}

/* --- Placeholder text --- */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="doraemon-night"] input::placeholder,
[data-theme="doraemon-night"] textarea::placeholder {
    color: var(--text-muted) !important;
}

/* --- Status indicators (preserve semantic colors but adjust backgrounds) --- */
[data-theme="dark"] .status-indicator,
[data-theme="doraemon-night"] .status-indicator {
    border-color: var(--border-primary) !important;
}

/* --- Loading / empty states --- */
[data-theme="dark"] .loading,
[data-theme="dark"] .empty-state,
[data-theme="doraemon-night"] .loading,
[data-theme="doraemon-night"] .empty-state {
    color: var(--text-secondary) !important;
}

/* --- Error containers --- */
[data-theme="dark"] .error,
[data-theme="doraemon-night"] .error {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

/* --- Progress bars --- */
[data-theme="dark"] .progress-bar-container,
[data-theme="doraemon-night"] .progress-bar-container {
    background: var(--bg-hover) !important;
}

/* --- Calendar-specific overrides --- */
[data-theme="dark"] .view-tab,
[data-theme="doraemon-night"] .view-tab {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .view-tab:hover,
[data-theme="doraemon-night"] .view-tab:hover {
    background: rgba(99, 102, 241, 0.15) !important;
}

[data-theme="dark"] .view-tab.active,
[data-theme="doraemon-night"] .view-tab.active {
    background: var(--accent-indigo) !important;
    color: white !important;
}

/* --- Link colors in dark mode --- */
[data-theme="dark"] a:not(.btn):not(.hub-logo):not(.hub-sop-badge):not([class*="bg-"]),
[data-theme="doraemon-night"] a:not(.btn):not(.hub-logo):not(.hub-sop-badge):not([class*="bg-"]) {
    color: var(--accent-indigo) !important;
}

/* --- Period card styles --- */
[data-theme="dark"] .period-card,
[data-theme="dark"] .task-card,
[data-theme="dark"] .schedule-card,
[data-theme="doraemon-night"] .period-card,
[data-theme="doraemon-night"] .task-card,
[data-theme="doraemon-night"] .schedule-card {
    background: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

/* --- Autocomplete / dropdown results --- */
[data-theme="dark"] .autocomplete-results,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .preset-dropdown,
[data-theme="doraemon-night"] .autocomplete-results,
[data-theme="doraemon-night"] .dropdown-menu,
[data-theme="doraemon-night"] .preset-dropdown {
    background: var(--bg-dropdown) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .autocomplete-results li:hover,
[data-theme="dark"] .dropdown-menu li:hover,
[data-theme="doraemon-night"] .autocomplete-results li:hover,
[data-theme="doraemon-night"] .dropdown-menu li:hover {
    background: var(--bg-hover) !important;
}

/* --- Tooltip --- */
[data-theme="dark"] .tooltip,
[data-theme="doraemon-night"] .tooltip {
    background: var(--bg-card) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

/* --- Breadcrumbs --- */
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .breadcrumbs,
[data-theme="doraemon-night"] .breadcrumb,
[data-theme="doraemon-night"] .breadcrumbs {
    color: var(--text-secondary) !important;
}

/* --- Upload zones --- */
[data-theme="dark"] .upload-zone,
[data-theme="doraemon-night"] .upload-zone {
    background: var(--bg-input) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-secondary) !important;
}

/* --- Select dropdown options --- */
[data-theme="dark"] option,
[data-theme="doraemon-night"] option {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* --- HR dividers --- */
[data-theme="dark"] hr,
[data-theme="doraemon-night"] hr {
    border-color: var(--border-primary) !important;
}

/* --- Scrollbar dark mode (WebKit) --- */
[data-theme="dark"] ::-webkit-scrollbar-track,
[data-theme="doraemon-night"] ::-webkit-scrollbar-track {
    background: var(--bg-body);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb,
[data-theme="doraemon-night"] ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
[data-theme="doraemon-night"] ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}