/* START OF FILE darktheme.css */

/* ========== Material Design 3 - Dark Theme ========== */

.dark-theme {
    /* === M3 Dark Theme Color Palette (Overrides from :root in styles.css) === */
    --md-sys-color-primary-dark: #4FD1C7;
    /* Brighter Teal for Dark */
    --md-sys-color-on-primary-dark: #003735;
    --md-sys-color-primary-container-dark: #00504C;
    --md-sys-color-on-primary-container-dark: #6FF7F0;
    --md-sys-color-primary-hover-dark: #5CDBCF;
    /* Custom lighter hover */

    --md-sys-color-secondary-dark: #B1CCC9;
    --md-sys-color-on-secondary-dark: #1C3533;
    --md-sys-color-secondary-container-dark: #334B49;
    --md-sys-color-on-secondary-container-dark: #CCE8E5;

    --md-sys-color-tertiary-dark: #B2C8E8;
    --md-sys-color-on-tertiary-dark: #1B324B;
    --md-sys-color-tertiary-container-dark: #334863;
    --md-sys-color-on-tertiary-container-dark: #D2E4FF;

    --md-sys-color-error-dark: #FFB4AB;
    --md-sys-color-on-error-dark: #690005;
    --md-sys-color-error-container-dark: #93000A;
    --md-sys-color-on-error-container-dark: #FFDAD6;

    --md-sys-color-background-dark: #0F1514;
    /* Very dark base */
    --md-sys-color-on-background-dark: #DEE4E3;
    --md-sys-color-surface-dark: #0F1514;
    /* Same as background */
    --md-sys-color-on-surface-dark: #DEE4E3;
    --md-sys-color-surface-variant-dark: #3F4947;
    --md-sys-color-on-surface-variant-dark: #BFC9C7;

    --md-sys-color-outline-variant-dark: #53635f;

    --md-sys-color-surface-dim-dark: #0F1514;
    --md-sys-color-surface-bright-dark: #353B3A;
    --md-sys-color-surface-container-lowest-dark: #0A0F0F;
    --md-sys-color-surface-container-low-dark: #171D1C;
    --md-sys-color-surface-container-dark: #1B2120;
    /* Use for Header/Footer */
    --md-sys-color-surface-container-high-dark: #252B2A;
    --md-sys-color-surface-container-highest-dark: #303635;
    /* Use for Inputs/Toasts */

    /* --- Legacy Variable Mapping Overrides --- */
    --primary-color: var(--md-sys-color-primary-dark);
    --primary-hover: var(--md-sys-color-primary-hover-dark);
    --surface-color: var(--md-sys-color-surface-dark);
    --background-color: var(--md-sys-color-background-dark);
    --divider-color: var(--md-sys-color-outline-dark);
    --text-primary: var(--md-sys-color-on-surface-dark);
    --text-on-primary: var(--md-sys-color-on-primary-dark);
    --error-color: var(--md-sys-color-error-dark);
    /* Success variables removed (unused) */

    /* --- Theme-Agnostic Aliases (Dark mappings) --- */
    --on-surface: var(--md-sys-color-on-surface-dark);
    --on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
    --outline: var(--md-sys-color-outline-dark);
    --outline-variant: var(--md-sys-color-outline-variant-dark);
    --surface-variant: var(--md-sys-color-surface-variant-dark);
    --surface-container-lowest: var(--md-sys-color-surface-container-lowest-dark);
    --surface-container-low: var(--md-sys-color-surface-container-low-dark);
    --surface-container: var(--md-sys-color-surface-container-dark);
    --surface-container-high: var(--md-sys-color-surface-container-high-dark);
    --surface-container-highest: var(--md-sys-color-surface-container-highest-dark);

    /* --- Shadows (Subtler for Dark) --- */
    /* Shadows removed — flat style across dark theme */

    /* --- Interaction States --- */
    /* Use On-Surface or Primary for state layers */
    --hover-bg: color-mix(in srgb, var(--primary-color) calc(var(--hover-opacity) * 100%), transparent);
    /* active-bg removed (unused) */

    /* --- Icon Color --- */
    /* icon-color alias removed (unused; icons use currentColor) */
}

/* ===== Global Dark Theme Adjustments ===== */
.dark-theme,
.dark-theme body {
    background-color: var(--background-color);
    color: var(--text-primary);
    scrollbar-color: var(--surface-container-high) var(--surface-color);
}

/* ===== Header ===== */
.dark-theme header {
    background: var(--surface-container);
    color: var(--on-surface);
    border-color: var(--outline-variant);
    box-shadow: none;
    /* Flat containers; no shadow */
}

/* ===== Main Content Area ===== */
.dark-theme main {
    background: var(--surface-color);
    border-color: var(--outline-variant);
    box-shadow: none;
    /* Flat containers; no shadow */
}

/* ===== File Upload Component ===== */
.dark-theme .file-upload {
    --highlight-color: var(--primary-color);
    --info-bg: var(--surface-container-low);
    background: transparent;
    border-color: var(--outline-variant);
    color: var(--on-surface-variant);
}

.dark-theme .file-upload:hover {
    border-color: var(--highlight-color);
    background: var(--hover-bg);
}

.dark-theme .highlight {
    color: var(--highlight-color);
}

.dark-theme .chunk-info {
    color: var(--on-surface-variant);
    background: var(--info-bg);
    border-color: var(--outline-variant);
}

/* ===== URL Input Field ===== */
.dark-theme #sjurl {
    border-color: var(--outline-variant);
    /* Match list header background (dark theme) */
    background: var(--surface-container);
    color: var(--text-primary);
}

.dark-theme #sjurl:focus {
    outline: none;
    border-color: var(--outline-variant);
    background-color: var(--hover-bg);
}

/* Reusable text field in dark theme */
.dark-theme .text-field {
    border-color: var(--outline-variant);
    /* Match list header background (dark theme) */
    background: var(--surface-container);
    color: var(--text-primary);
}
.dark-theme .text-field:focus {
    outline: none;
    border-color: var(--outline-variant);
    background-color: var(--hover-bg);
}

/* Ensure #sjurl matches .text-field in dark theme */
/* Duplicate removed: #sjurl already styled above */

/* ===== Upload Mode Selector (Radio Buttons) Dark Theme ===== */
.dark-theme .radio-label {
    --active-color: var(--primary-color);
    --border-color: var(--outline-variant);
    --hover-bg: var(--hover-bg);
    color: var(--on-surface-variant);
    background-color: transparent;
    border-color: transparent;
}

.dark-theme .radio-label:hover {
    background-color: var(--hover-bg);
}

.dark-theme .radio-label::before {
    border-color: var(--border-color);
    background-color: transparent;
}

.dark-theme .radio-label input[type="radio"]:checked+.radio-text::before {
    border-color: var(--active-color);
}

.dark-theme .radio-label input[type="radio"]:checked+.radio-text::after {
    background-color: var(--active-color);
}

.dark-theme .radio-label input[type="radio"]:focus-visible+.radio-text {
    background-color: var(--hover-bg);
}


/* ===== M3 Style Checkbox Dark Theme ===== */
.dark-theme .chunk-toggle {
    --active-color: var(--primary-color);
    --border-color: var(--outline-variant);
    --hover-bg: var(--hover-bg);
    --text-color: var(--on-surface-variant);
    color: var(--text-color);
    background-color: transparent;
    border-color: transparent;
}

.dark-theme .chunk-toggle:hover {
    background: var(--hover-bg);
}

.dark-theme .chunk-toggle:focus-within {
    /* Dark theme: use highlight background without border */
    outline: none;
    background-color: var(--hover-bg);
}

.dark-theme .custom-checkbox {
    border-color: var(--border-color);
    background-color: transparent;
}

.dark-theme .toggle-input:checked+.custom-checkbox {
    border-color: var(--active-color);
    background-color: var(--active-color);
}

.dark-theme .toggle-input:checked+.custom-checkbox::after {
    border-color: var(--text-on-primary);
    /* Use dark theme on-primary */
}

.dark-theme .toggle-input:focus-visible+.custom-checkbox {
    outline: none;
    background-color: var(--focus-bg);
}

.dark-theme .toggle-input:disabled+.custom-checkbox {
    border-color: var(--outline);
    background-color: var(--surface-variant);
}

.dark-theme .chunk-toggle:has(input:disabled) {
    color: var(--on-surface-variant);
    opacity: 0.7;
    background-color: transparent;
}

.dark-theme .chunk-toggle:has(input:disabled):hover {
    background-color: transparent;
}


/* ===== Button System ===== */
.dark-theme button {
    background: var(--primary-color);
    color: var(--text-on-primary);
    box-shadow: none;
}

.dark-theme button:hover {
    background: var(--primary-hover);
    box-shadow: none;
}

.dark-theme button:active {
    box-shadow: none;
}

.dark-theme button:disabled {
    background-color: var(--surface-variant);
    color: var(--on-surface-variant);
    box-shadow: none;
}

/* ===== Table System ===== */
.dark-theme #uploadHistory {
    background: var(--surface-container-low);
    /* Slightly elevated table bg */
    border-color: var(--outline-variant);
    /* <<< 使用 outline 颜色 */
    box-shadow: none;
    /* Flat containers; no shadow */
}

.dark-theme .table-container {
    scrollbar-color: var(--surface-container-high) var(--surface-container-low);
    border-color: var(--outline-variant);
}

.dark-theme .upload-history-table th {
    background: var(--surface-container);
    /* Header slightly darker */
    color: var(--on-surface);
    border-bottom-color: var(--outline-variant);
    /* Use variant for internal lines */
}

.dark-theme .upload-history-table td {
    border-bottom-color: var(--outline-variant);
    /* Use variant for internal lines */
    color: var(--on-surface);
    /* Ensure text color is correct */
}

.dark-theme .upload-history-table tbody tr:hover td {
    background: var(--hover-bg);
}

.dark-theme .link-cell a {
    color: var(--primary-color);
}

.dark-theme .link-cell a:hover {
    background-color: var(--hover-bg);
}

/* ===== Debug Output ===== */
.dark-theme .debug-output {
    background: var(--surface-container-low);
    /* Match table body bg */
    border-color: var(--outline-variant);
    scrollbar-color: var(--surface-container-high) var(--surface-container-low);
}

.dark-theme .debug-output pre {
    color: var(--on-surface-variant);
}

/* ===== Footer ===== */
.dark-theme footer {
    background: var(--surface-container);
    border-color: var(--outline-variant);
    box-shadow: none;
    /* Flat containers; no shadow */
}

.dark-theme footer p {
    color: var(--on-surface-variant);
}

.dark-theme footer p:last-child {
    border-top-color: var(--outline-variant);
}

.dark-theme footer a {
    color: var(--primary-color);
}

.dark-theme footer a:hover {
    background-color: var(--hover-bg);
}

/* ===== Toast Notification Styling ===== */
/* Styles for .m3-toast are inherited from light theme and adjusted via CSS variables */
/* We only need to override specific things if the variable system isn't sufficient */
.dark-theme .m3-toast {
    background: var(--surface-container-highest) !important;
    color: var(--on-surface) !important;
    border-color: var(--outline-variant) !important;
    box-shadow: none !important;
}

.dark-theme .m3-toast a {
    color: var(--primary-color) !important;
}


/* END OF FILE darktheme.css */
