/*
 * Black Theme Styles with Indian Flag Colors
 * Comprehensive styling for all MudBlazor components and custom components
 * Design principle:
 * - Page background: BLACK (#000000)
 * - Page text: WHITE (#FFFFFF)
 * - Primary/Success buttons: GREEN (#138808 - Indian Flag Green)
 * - Warning/Alert: SAFFRON (#FF9933 - Indian Flag Saffron)
 * - Secondary/Info: ASHOKA BLUE (#1565C0 - Indian Flag Blue)
 * - Inputs/Surfaces: Dark gray (#1a1a1a) background with WHITE text
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES / TOKENS
   ========================================================================== */
.black.theme-dark,
.technical-shell.black.theme-dark {
    --ui-page-text: #FFFFFF;
    --ui-appbar-bg: #000000;
    --ui-content-bg: #000000;
    --ui-content-border: rgba(255, 255, 255, 0.12);
    --ui-content-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
    --ui-nav-drawer-bg: #000000;
    --ui-nav-drawer-border: rgba(255, 255, 255, 0.12);
    --ui-nav-link-bg: rgba(255, 255, 255, 0.08);
    --ui-nav-link-border: rgba(255, 255, 255, 0.12);
    --ui-nav-link-active-bg: rgba(255, 255, 255, 0.16);
    --ui-nav-link-active-border: rgba(255, 255, 255, 0.32);
    --ui-nav-link-active-shadow: inset 3px 0 0 rgba(19, 136, 8, 0.9);
    --ui-surface-soft: #0a0a0a;
    --ui-surface-media: #000000;
    --ui-border-soft: rgba(255, 255, 255, 0.16);
    --ui-border-muted: rgba(255, 255, 255, 0.12);
    --ui-input-bg: #1a1a1a;
    --ui-chat-user-bg: color-mix(in srgb, var(--mud-palette-primary) 24%, black 76%);
    --ui-hero-bg: #000000;
    --ui-hero-border: rgba(255, 255, 255, 0.12);
    --ui-placeholder-bg: #1a1a1a;
    --ui-placeholder-border: rgba(255, 255, 255, 0.12);
    --ui-placeholder-fg: #999999;
    --ui-town-card-preview-bg: #1a1a1a;
    --ui-town-card-preview-border: rgba(255, 255, 255, 0.12);
    --ui-town-row-even-border: rgba(255, 255, 255, 0.12);
    --ui-town-row-odd-border: rgba(255, 255, 255, 0.12);
    --ui-town-state-unverified-border: #138808;
    --ui-town-state-own-draft-border: #FF9933;
    /* Indian Flag Colors */
    --indian-green: #138808;
    --indian-saffron: #FF9933;
    --indian-blue: #1565C0;
    --indian-white: #FFFFFF;
}

    /* ==========================================================================
   BUTTONS - All variants with Indian Colors
   ========================================================================== */

    /* 1. BASE RULE: Ensure ALL text and icons in any button default to white */
    .black.theme-dark .mud-button-root,
    .mud-button-root {
        color: #FFFFFF !important;
    }

        .black.theme-dark .mud-button-root .mud-button-label,
        .black.theme-dark .mud-button-root .mud-icon-root,
        .black.theme-dark .mud-button-root .mud-button-icon-start,
        .black.theme-dark .mud-button-root .mud-button-icon-end,
        .mud-button-root .mud-button-label,
        .mud-button-root .mud-icon-root,
        .mud-button-root .mud-button-icon-start,
        .mud-button-root .mud-button-icon-end {
            color: #FFFFFF !important;
        }

    /* 2. DEFAULT FILLED BUTTONS: If no color is specified, use dark gray */
    .black.theme-dark .mud-button-filled,
    .mud-button-filled {
        background: #333333 !important;
        background-color: #333333 !important;
        border: none !important;
    }

        .black.theme-dark .mud-button-filled:hover,
        .mud-button-filled:hover {
            background: #444444 !important;
            background-color: #444444 !important;
        }

        /* 3. PRIMARY & SUCCESS FILLED BUTTONS (Indian Green) */
        .black.theme-dark .mud-button-filled.mud-button-filled-primary,
        .black.theme-dark .mud-button-filled.mud-button-filled-success,
        .mud-button-filled.mud-button-filled-primary,
        .mud-button-filled.mud-button-filled-success,
        .mud-button-filled-primary,
        .mud-button-filled-success {
            background: #138808 !important;
            background-color: #138808 !important;
        }

            .black.theme-dark .mud-button-filled.mud-button-filled-primary:hover,
            .black.theme-dark .mud-button-filled.mud-button-filled-success:hover,
            .mud-button-filled.mud-button-filled-primary:hover,
            .mud-button-filled.mud-button-filled-success:hover,
            .mud-button-filled-primary:hover,
            .mud-button-filled-success:hover {
                background: #0d6305 !important;
                background-color: #0d6305 !important;
            }

        /* 4. SECONDARY & WARNING FILLED BUTTONS (Indian Saffron) */
        .black.theme-dark .mud-button-filled.mud-button-filled-secondary,
        .black.theme-dark .mud-button-filled.mud-button-filled-warning,
        .mud-button-filled.mud-button-filled-secondary,
        .mud-button-filled.mud-button-filled-warning,
        .mud-button-filled-secondary,
        .mud-button-filled-warning {
            background: #FF9933 !important;
            background-color: #FF9933 !important;
        }

            .black.theme-dark .mud-button-filled.mud-button-filled-secondary:hover,
            .black.theme-dark .mud-button-filled.mud-button-filled-warning:hover,
            .mud-button-filled.mud-button-filled-secondary:hover,
            .mud-button-filled.mud-button-filled-warning:hover,
            .mud-button-filled-secondary:hover,
            .mud-button-filled-warning:hover {
                background: #e68a2e !important;
                background-color: #e68a2e !important;
            }

        /* 5. INFO FILLED BUTTONS (Ashoka Blue) */
        .black.theme-dark .mud-button-filled.mud-button-filled-info,
        .mud-button-filled.mud-button-filled-info,
        .mud-button-filled-info {
            background: #1565C0 !important;
            background-color: #1565C0 !important;
        }

            .black.theme-dark .mud-button-filled.mud-button-filled-info:hover,
            .mud-button-filled.mud-button-filled-info:hover,
            .mud-button-filled-info:hover {
                background: #0d47a1 !important;
                background-color: #0d47a1 !important;
            }

    /* 6. OUTLINED & TEXT BUTTONS (Transparent with Green Accents) */
    .black.theme-dark .mud-button-outlined,
    .black.theme-dark .mud-button-text,
    .mud-button-outlined,
    .mud-button-text {
        background: transparent !important;
        background-color: transparent !important;
        border: 1px solid #138808 !important;
    }

        .black.theme-dark .mud-button-outlined:hover,
        .black.theme-dark .mud-button-text:hover,
        .mud-button-outlined:hover,
        .mud-button-text:hover {
            background: rgba(19, 136, 8, 0.1) !important;
            background-color: rgba(19, 136, 8, 0.1) !important;
        }

    /* 7. ACTIVE / PRESSED STATES */
    .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,
    .mud-button-root[aria-pressed="true"],
    .mud-button-root.mud-button-active,
    .mud-button-root:active {
        filter: brightness(0.8) !important;
    }

    /* 8. FAB (Floating Action Button) - GREEN */
    .black.theme-dark .mud-fab,
    .black.theme-dark .mud-fab-primary,
    .mud-fab,
    .mud-fab-primary {
        background: #138808 !important;
        background-color: #138808 !important;
        color: #FFFFFF !important;
        box-shadow: 0 4px 12px rgba(19, 136, 8, 0.4) !important;
        border: none !important;
    }

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

    /* ==========================================================================
   ICON BUTTONS
   ========================================================================== */
    .black.theme-dark .mud-icon-button,
    .mud-icon-button {
        background: transparent !important;
        background-color: transparent !important;
        color: #FF9933 !important;
        border: 1px solid rgba(255, 153, 51, 0.5) !important;
    }

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

        .black.theme-dark .mud-icon-button:hover,
        .mud-icon-button:hover {
            background: rgba(255, 153, 51, 0.1) !important;
        }

    /* ==========================================================================
   CHIPS - Indian Colors
   ========================================================================== */
    .black.theme-dark .mud-chip,
    .black.theme-dark .mud-chip-root,
    .black.theme-dark .mud-chip-filled,
    .black.theme-dark .mud-chip-outlined {
        background: #1a1a1a !important;
        background-color: #1a1a1a !important;
        color: #FFFFFF !important;
        border: 1px solid #138808 !important;
    }

        .black.theme-dark .mud-chip .mud-chip-close-button {
            color: #FF9933 !important;
        }

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

    /* Status chips - semantic colors with Indian theme */
    .black.theme-dark .town-open-chip-manual,
    .black.theme-dark .town-open-chip-timing {
        background: #138808 !important;
        background-color: #138808 !important;
        color: #FFFFFF !important;
    }

    .black.theme-dark .town-open-chip-closed {
        background: #FF9933 !important;
        background-color: #FF9933 !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: #1a1a1a !important;
        background-color: #1a1a1a !important;
        color: #ffffff !important;
        border-radius: 4px !important;
    }

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

    .black.theme-dark .mud-input-outlined-border .mud-notched-outline-leading,
    .black.theme-dark .mud-input-outlined-border .mud-notched-outline-trailing,
    .black.theme-dark .mud-input-outlined-border .mud-notched-outline-notch {
        border-color: #138808 !important;
    }

    .black.theme-dark input::placeholder,
    .black.theme-dark textarea::placeholder {
        color: #999999 !important;
    }

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

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

    /* ==========================================================================
   AUTOCOMPLETE / SELECT & POPOVERS
   ========================================================================== */
    .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: #1a1a1a !important;
        background-color: #1a1a1a !important;
        color: #ffffff !important;
    }

    /* Dropdown popover/paper - FIXED to dark mode to prevent white-on-white text */
    .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: #1a1a1a !important;
        background-color: #1a1a1a !important;
        color: #ffffff !important;
        border: 1px solid #138808 !important;
    }

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

        .black.theme-dark .mud-list-item:hover {
            background: rgba(19, 136, 8, 0.2) !important;
            background-color: rgba(19, 136, 8, 0.2) !important;
            color: #ffffff !important;
        }

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

    /* ==========================================================================
   CARDS / PAPER / SURFACES
   ========================================================================== */
    .black.theme-dark .mud-card {
        background: #1a1a1a !important;
        background-color: #1a1a1a !important;
        color: #ffffff !important;
        border: 1px solid #138808 !important;
    }

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

        .black.theme-dark .mud-paper.mud-paper-outlined,
        .black.theme-dark .mud-card.mud-paper-outlined {
            border: 1px solid #138808 !important;
        }

    /* Card titles with colored background */
    .black.theme-dark .mud-card-header {
        background: #138808 !important;
        background-color: #138808 !important;
        color: #FFFFFF !important;
    }

        .black.theme-dark .mud-card-header .mud-typography,
        .black.theme-dark .mud-card-header-title {
            color: #FFFFFF !important;
        }

    /* Why cards on homepage */
    .black.theme-dark .why-card {
        background: #1a1a1a !important;
        color: #ffffff !important;
        border: 1px solid #138808 !important;
    }

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

    /* ==========================================================================
   SWITCHES / TOGGLES
   ========================================================================== */
    .black.theme-dark .mud-input-control .mud-switch.mud-typography,
    .black.theme-dark .mud-input-control .mud-switch .mud-typography,
    .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: transparent !important;
        background-color: transparent !important;
        border: 1px solid #138808 !important;
        box-shadow: none !important;
    }

        .black.theme-dark .mud-toggle-item,
        .black.theme-dark .mud-button-group .mud-button-root {
            background: transparent !important;
            background-color: transparent !important;
            color: #FFFFFF !important;
            border: 1px solid #138808 !important;
        }

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

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

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

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

    /* ==========================================================================
   DIALOGS
   ========================================================================== */
    .black.theme-dark .mud-dialog,
    .mud-dialog {
        background: #1a1a1a !important;
        background-color: #1a1a1a !important;
        color: #ffffff !important;
        border: 1px solid #138808 !important;
    }

    .black.theme-dark .mud-dialog-title,
    .mud-dialog-title {
        color: #138808 !important;
        font-weight: 700 !important;
    }

    .black.theme-dark .mud-dialog-content,
    .mud-dialog-content {
        color: #ffffff !important;
    }

    /* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

    /* Ensure all typography safely defaults to white in this dark theme */
    .black.theme-dark .mud-typography {
        color: #ffffff !important;
    }

        /* Secondary text color - Saffron on black */
        .black.theme-dark .mud-typography.mud-secondary-text,
        .black.theme-dark .mud-text-secondary {
            color: #FF9933 !important;
        }

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

        .black.theme-dark .mud-typography.mud-typo-caption {
            color: #CCCCCC !important;
        }

    /* ==========================================================================
   ALERTS
   ========================================================================== */
    .black.theme-dark .mud-alert {
        background: #1a1a1a !important;
        border: 1px solid #138808 !important;
        color: #ffffff !important;
    }

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

    .black.theme-dark .mud-alert-title {
        color: #138808 !important;
    }

    /* Alert severity colors */
    .black.theme-dark .mud-alert-filled-success {
        background: #138808 !important;
        color: #FFFFFF !important;
    }

    .black.theme-dark .mud-alert-filled-warning {
        background: #FF9933 !important;
        color: #FFFFFF !important;
    }

    .black.theme-dark .mud-alert-filled-info {
        background: #1565C0 !important;
        color: #FFFFFF !important;
    }

    /* ==========================================================================
   APPBAR & NAVIGATION
   ========================================================================== */
    .black.theme-dark .technical-appbar,
    .technical-shell.black.theme-dark .technical-appbar {
        color: #ffffff !important;
        background: #000000 !important;
        border-bottom: 2px solid #138808 !important;
    }

        .black.theme-dark .technical-appbar .mud-icon-button,
        .black.theme-dark .technical-appbar .mud-typography,
        .black.theme-dark .technical-appbar .brand-title,
        .black.theme-dark .technical-appbar .brand-subtitle,
        .technical-shell.black.theme-dark .technical-appbar .mud-icon-button,
        .technical-shell.black.theme-dark .technical-appbar .mud-typography,
        .technical-shell.black.theme-dark .technical-appbar .brand-title,
        .technical-shell.black.theme-dark .technical-appbar .brand-subtitle {
            color: #ffffff !important;
        }

    /* Nav menu styling */
    .black.theme-dark .app-nav-menu .mud-nav-link,
    .technical-shell.black.theme-dark .app-nav-menu .mud-nav-link {
        color: #ffffff !important;
    }

        .black.theme-dark .app-nav-menu .mud-nav-link .mud-nav-link-text,
        .black.theme-dark .app-nav-menu .mud-nav-link .mud-icon-root,
        .technical-shell.black.theme-dark .app-nav-menu .mud-nav-link .mud-nav-link-text,
        .technical-shell.black.theme-dark .app-nav-menu .mud-nav-link .mud-icon-root {
            color: #ffffff !important;
        }

    /* ==========================================================================
   BRAND ELEMENTS
   ========================================================================== */
    .black.theme-dark .brand-header,
    .black.theme-dark .brand-header .brand-name,
    .black.theme-dark .brand-title {
        color: #ffffff !important;
    }

    .black.theme-dark .brand-subtitle {
        color: #FF9933 !important;
    }

    /* Tricolor stripe - Indian Flag */
    .black.theme-dark .tricolor-stripe {
        height: 4px;
        background: linear-gradient(to right, #FF9933 33%, #FFFFFF 33%, #FFFFFF 66%, #138808 66%);
    }

    /* ==========================================================================
   DIVIDERS
   ========================================================================== */
    .black.theme-dark .mud-divider {
        border-color: #138808 !important;
    }

    /* ==========================================================================
   HEADINGS & TITLES
   ========================================================================== */
    .black.theme-dark .why-smarttown-heading,
    .black.theme-dark h1,
    .black.theme-dark h2,
    .black.theme-dark h3,
    .black.theme-dark h4,
    .black.theme-dark h5,
    .black.theme-dark h6 {
        color: #ffffff !important;
    }

    /* Page title with colored background */
    .black.theme-dark .page-title,
    .black.theme-dark .page-header {
        background: #138808 !important;
        background-color: #138808 !important;
        color: #FFFFFF !important;
        padding: 16px !important;
        border-radius: 4px !important;
    }

    /* ==========================================================================
   ICON COLORS - WhatsApp, Phone, Location symbols
   ========================================================================== */
    .black.theme-dark .icon-whatsapp,
    .black.theme-dark .icon-phone,
    .black.theme-dark .icon-location,
    .black.theme-dark .icon-email,
    .black.theme-dark .icon-website,
    .black.theme-dark .mud-icon-root.contact-icon {
        color: #FF9933 !important;
    }

    /* Links with color */
    .black.theme-dark a {
        color: #FF9933 !important;
        text-decoration: none !important;
    }

        .black.theme-dark a:hover {
            color: #FFB366 !important;
            text-decoration: underline !important;
        }

    /* ==========================================================================
   MISCELLANEOUS COMPONENTS
   ========================================================================== */
    .black.theme-dark .mud-progress-linear {
        background: #333333 !important;
    }

        .black.theme-dark .mud-progress-linear .mud-progress-bar {
            background: #138808 !important;
        }

    .black.theme-dark .mud-select-arrow {
        color: #138808 !important;
    }

    .black.theme-dark .mud-input-helper-text {
        color: #999999 !important;
    }

    .black.theme-dark .mud-badge {
        background: #138808 !important;
        color: #FFFFFF !important;
    }

    /* ==========================================================================
   LIFECYCLE COMPONENTS - Card Lifecycle Flow
   ========================================================================== */
    .black.theme-dark .lifecycle-card {
        background: #1a1a1a !important;
        border-color: #138808 !important;
        color: #FFFFFF !important;
    }

        .black.theme-dark .lifecycle-card:hover {
            box-shadow: 0 10px 24px rgba(19, 136, 8, 0.2) !important;
        }

    /* Stage elements */
    .black.theme-dark .stage-draft .stage-icon-wrap {
        color: #CCCCCC !important;
    }

    .black.theme-dark .stage-published .stage-icon-wrap {
        color: #138808 !important;
    }

    .black.theme-dark .stage-verified .stage-icon-wrap {
        color: #138808 !important;
    }

    .black.theme-dark .stage-premium .stage-icon-wrap {
        color: #FF9933 !important;
    }

    .black.theme-dark .stage-badge,
    .black.theme-dark .stage-badge-paid,
    .black.theme-dark .stage-inherits-badge {
        background: #138808 !important;
        background-color: #138808 !important;
        color: #FFFFFF !important;
    }

    .black.theme-dark .stage-badge-premium {
        background: #FF9933 !important;
        background-color: #FF9933 !important;
        color: #FFFFFF !important;
    }

    .black.theme-dark .stage-title,
    .black.theme-dark .stage-features,
    .black.theme-dark .feature-row,
    .black.theme-dark .lifecycle-header,
    .black.theme-dark .lifecycle-title {
        color: #FFFFFF !important;
    }

    .black.theme-dark .stage-desc,
    .black.theme-dark .lifecycle-subtitle {
        color: #CCCCCC !important;
    }

    .black.theme-dark .feature-icon,
    .black.theme-dark .emergency-title,
    .black.theme-dark .emergency-icon-col {
        color: #FF9933 !important;
    }

    .black.theme-dark .lifecycle-emergency-strip {
        background: #1a1a1a !important;
        background-color: #1a1a1a !important;
        border-color: #FF9933 !important;
        color: #FFFFFF !important;
    }

    .black.theme-dark .lifecycle-card-limit-note {
        background: #1a1a1a !important;
        background-color: #1a1a1a !important;
        border-color: #1565C0 !important;
        color: #FFFFFF !important;
    }

    .black.theme-dark .lifecycle-arrow {
        color: #138808 !important;
        opacity: 0.8 !important;
    }

    .black.theme-dark .stage-draft {
        border-color: #999999 !important;
    }

    .black.theme-dark .stage-published {
        border-color: #138808 !important;
    }

    .black.theme-dark .stage-verified {
        border-color: #138808 !important;
    }

    .black.theme-dark .stage-premium {
        border-color: #FF9933 !important;
        background: #1a1a1a !important;
    }

    /* ==========================================================================
   APP DIALOG HEADER
   ========================================================================== */
    .black.theme-dark .app-dialog-header {
        background: #1a1a1a !important;
        background-color: #1a1a1a !important;
        border-bottom: 2px solid #138808 !important;
        color: #FFFFFF !important;
    }

        .black.theme-dark .app-dialog-header .mud-typography {
            color: #FFFFFF !important;
        }

    .black.theme-dark .app-dialog-close-btn {
        background: #138808 !important;
        background-color: #138808 !important;
        color: #FFFFFF !important;
    }

        .black.theme-dark .app-dialog-close-btn .mud-icon-root {
            color: #FFFFFF !important;
        }

        .black.theme-dark .app-dialog-close-btn:hover {
            background: #0d6305 !important;
            background-color: #0d6305 !important;
        }

    /* ==========================================================================
   SOCIAL / CONTACT ICON BUTTONS - Allow inline color styles to show
   ========================================================================== */
    .black.theme-dark .town-card-bottom-row .card-link-icons-row .mud-icon-button,
    .black.theme-dark .card-link-icons-row .mud-icon-button {
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: inherit !important;
    }

        .black.theme-dark .town-card-bottom-row .card-link-icons-row .mud-icon-button .mud-icon-root,
        .black.theme-dark .card-link-icons-row .mud-icon-button .mud-icon-root {
            color: inherit !important;
        }

        .black.theme-dark .town-card-bottom-row .card-link-icons-row .mud-icon-button:hover,
        .black.theme-dark .card-link-icons-row .mud-icon-button:hover {
            background: rgba(255, 255, 255, 0.1) !important;
            border-color: rgba(255, 255, 255, 0.4) !important;
        }

        /* Specific social colors for inline styles to work */
        .black.theme-dark .card-link-icons-row .mud-icon-button[style*="color:#4CAF50"],
        .black.theme-dark .card-link-icons-row .mud-icon-button[style*="color:#25D366"] {
            color: #25D366 !important;
        }

        .black.theme-dark .card-link-icons-row .mud-icon-button[style*="color:#1877F2"] {
            color: #1877F2 !important;
        }

        .black.theme-dark .card-link-icons-row .mud-icon-button[style*="color:#E4405F"] {
            color: #E4405F !important;
        }

        .black.theme-dark .card-link-icons-row .mud-icon-button[style*="color:#FF0000"] {
            color: #FF0000 !important;
        }

        .black.theme-dark .card-link-icons-row .mud-icon-button[style*="color:#DB4437"] {
            color: #DB4437 !important;
        }

        .black.theme-dark .card-link-icons-row .mud-icon-button[style*="color:#000000"] {
            color: #1565C0 !important;
        }