/*
 * Black Theme Overrides
 * This file MUST be loaded AFTER all other CSS (including MudBlazor) to ensure overrides work.
 * 
 * Design principle for Black theme:
 * - Page background: BLACK
 * - Page text: WHITE  
 * - Buttons/Controls: WHITE background with BLACK text (inverted for contrast)
 * - Selected/Active: BLUE background with WHITE text
 */

/* ==========================================================================
   BUTTONS - All variants
   ========================================================================== */

/* Target all button types with maximum specificity */
.black.theme-dark .mud-button-root,
.black.theme-dark button.mud-button-root,
.black.theme-dark .mud-button-filled,
.black.theme-dark .mud-button-filled-primary,
.black.theme-dark .mud-button-filled-secondary,
.black.theme-dark .mud-button-filled-tertiary,
.black.theme-dark .mud-button-filled-info,
.black.theme-dark .mud-button-filled-success,
.black.theme-dark .mud-button-filled-warning,
.black.theme-dark .mud-button-filled-error,
.black.theme-dark .mud-button-filled-dark,
.black.theme-dark .mud-button-filled-default,
.black.theme-dark .mud-button-outlined,
.black.theme-dark .mud-button-outlined-primary,
.black.theme-dark .mud-button-outlined-secondary,
.black.theme-dark .mud-button-outlined-info,
.black.theme-dark .mud-button-text,
.black.theme-dark .mud-button-text-primary,
.black.theme-dark .mud-button-text-secondary,
.black.theme-dark .mud-fab,
.black.theme-dark .mud-fab-primary {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 8px rgba(255,255,255,0.15) !important;
}

/* Button labels and icons must be black */
.black.theme-dark .mud-button-root .mud-button-label,
.black.theme-dark .mud-button-root .mud-icon-root,
.black.theme-dark .mud-button-filled .mud-button-label,
.black.theme-dark .mud-button-filled .mud-icon-root,
.black.theme-dark .mud-button-filled-primary .mud-button-label,
.black.theme-dark .mud-button-filled-primary .mud-icon-root {
    color: #000000 !important;
}

/* Selected/Active/Pressed buttons - blue with white text */
.black.theme-dark .mud-button-root[aria-pressed="true"],
.black.theme-dark .mud-button-root.mud-button-active,
.black.theme-dark .mud-button-root:active {
    background: #1976d2 !important;
    background-color: #1976d2 !important;
    color: #ffffff !important;
}

.black.theme-dark .mud-button-root[aria-pressed="true"] .mud-button-label,
.black.theme-dark .mud-button-root[aria-pressed="true"] .mud-icon-root {
    color: #ffffff !important;
}

/* ==========================================================================
   ICON BUTTONS
   ========================================================================== */

.black.theme-dark .mud-icon-button {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #e0e0e0 !important;
}

.black.theme-dark .mud-icon-button .mud-icon-root {
    color: #000000 !important;
}

/* ==========================================================================
   CHIPS
   ========================================================================== */

.black.theme-dark .mud-chip,
.black.theme-dark .mud-chip-root,
.black.theme-dark .mud-chip-filled,
.black.theme-dark .mud-chip-outlined {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #e0e0e0 !important;
}

.black.theme-dark .mud-chip.mud-chip-active,
.black.theme-dark .mud-chip-root.mud-selected {
    background: #1976d2 !important;
    background-color: #1976d2 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   TEXT FIELDS / INPUTS
   ========================================================================== */

.black.theme-dark .mud-input-control,
.black.theme-dark .mud-input-root,
.black.theme-dark .mud-input-slot,
.black.theme-dark .mud-text-field,
.black.theme-dark .mud-input-root input,
.black.theme-dark .mud-input-root textarea {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border-radius: 4px !important;
}

.black.theme-dark .mud-input-outlined .mud-input-outlined-border {
    border-color: #e0e0e0 !important;
}

.black.theme-dark .mud-input-label,
.black.theme-dark .mud-input-root .mud-input-label {
    color: #666666 !important;
}

/* ==========================================================================
   AUTOCOMPLETE / SELECT
   ========================================================================== */

.black.theme-dark .mud-autocomplete,
.black.theme-dark .mud-select,
.black.theme-dark .mud-autocomplete .mud-input-control,
.black.theme-dark .mud-select .mud-input-control {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Dropdown popover/paper */
.black.theme-dark .mud-popover-paper,
.black.theme-dark .mud-autocomplete-paper,
.black.theme-dark .mud-select-paper,
.black.theme-dark .mud-menu-paper,
.black.theme-dark .mud-popover .mud-paper {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* List items in dropdowns */
.black.theme-dark .mud-list-item,
.black.theme-dark .mud-list-item-text {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

.black.theme-dark .mud-list-item:hover {
    background: #e3f2fd !important;
    background-color: #e3f2fd !important;
}

.black.theme-dark .mud-list-item.mud-selected,
.black.theme-dark .mud-list-item.mud-list-item-active {
    background: #1976d2 !important;
    background-color: #1976d2 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   CARDS / PAPER / SURFACES (should remain black with white text)
   ========================================================================== */

/* Keep cards/paper black - don't invert these */
.black.theme-dark .mud-card,
.black.theme-dark .mud-paper:not(.mud-popover-paper):not(.mud-autocomplete-paper):not(.mud-select-paper):not(.mud-menu-paper) {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

/* Outlined paper/cards should have visible border */
.black.theme-dark .mud-paper.mud-paper-outlined,
.black.theme-dark .mud-card.mud-paper-outlined {
    border: 1px solid #444444 !important;
}

/* Why cards on homepage - ensure text is white */
.black.theme-dark .why-card,
.black.theme-dark .why-card .mud-typography {
    color: #ffffff !important;
}

.black.theme-dark .why-card .why-card-title {
    color: #ffffff !important;
}

/* ==========================================================================
   SWITCHES / TOGGLES
   ========================================================================== */

.black.theme-dark .mud-switch .mud-typography {
    color: #ffffff !important;
}

/* Toggle button groups */
.black.theme-dark .mud-toggle-group,
.black.theme-dark .mud-button-group {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 8px rgba(255,255,255,0.15) !important;
}

.black.theme-dark .mud-toggle-item,
.black.theme-dark .mud-button-group .mud-button-root {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

.black.theme-dark .mud-toggle-item.mud-toggle-item-selected,
.black.theme-dark .mud-toggle-item[aria-pressed="true"] {
    background: #1976d2 !important;
    background-color: #1976d2 !important;
    color: #ffffff !important;
}

/* Switch track and thumb */
.black.theme-dark .mud-switch-track {
    background: #666666 !important;
}

.black.theme-dark .mud-switch-thumb {
    background: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.black.theme-dark .mud-switch-checked .mud-switch-track {
    background: #1976d2 !important;
}

/* ==========================================================================
   DIALOGS
   ========================================================================== */

.black.theme-dark .mud-dialog {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* ==========================================================================
   STATUS CHIPS (semantic colors)
   ========================================================================== */

.black.theme-dark .town-open-chip-manual,
.black.theme-dark .town-open-chip-timing {
    background: #e8f5e9 !important;
    background-color: #e8f5e9 !important;
    color: #2e7d32 !important;
}

.black.theme-dark .town-open-chip-closed {
    background: #ffebee !important;
    background-color: #ffebee !important;
    color: #c62828 !important;
}

/* ==========================================================================
   TYPOGRAPHY on black backgrounds (ensure white)
   ========================================================================== */

.black.theme-dark .mud-typography {
    color: #ffffff !important;
}

/* But typography INSIDE white controls should be black */
.black.theme-dark .mud-button-root .mud-typography,
.black.theme-dark .mud-chip .mud-typography,
.black.theme-dark .mud-input-control .mud-typography,
.black.theme-dark .mud-list-item .mud-typography,
.black.theme-dark .mud-popover-paper .mud-typography,
.black.theme-dark .mud-autocomplete-paper .mud-typography,
.black.theme-dark .mud-select-paper .mud-typography {
    color: #000000 !important;
}

/* Secondary text color should be visible gray on black */
.black.theme-dark .mud-typography.mud-secondary-text,
.black.theme-dark .mud-text-secondary {
    color: #aaaaaa !important;
}

/* ==========================================================================
   ALERTS
   ========================================================================== */

.black.theme-dark .mud-alert {
    border: 1px solid #444444 !important;
}

.black.theme-dark .mud-alert .mud-alert-message {
    color: #ffffff !important;
}

/* ==========================================================================
   FAB (Floating Action Button)
   ========================================================================== */

.black.theme-dark .mud-fab {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 4px 12px rgba(255,255,255,0.2) !important;
}

.black.theme-dark .mud-fab .mud-icon-root {
    color: #000000 !important;
}

/* ==========================================================================
   BRAND HEADER on homepage
   ========================================================================== */

.black.theme-dark .brand-header,
.black.theme-dark .brand-header .brand-name {
    color: #ffffff !important;
}

/* ==========================================================================
   DIVIDERS
   ========================================================================== */

.black.theme-dark .mud-divider {
    border-color: #444444 !important;
}

/* ==========================================================================
   HEADINGS on homepage
   ========================================================================== */

.black.theme-dark .why-smarttown-heading {
    color: #ffffff !important;
}