/*
 * 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: 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
   ========================================================================== */

/* Success/Primary buttons - GREEN background with WHITE text (Indian Green) */
.black.theme-dark .mud-button-root.mud-button-filled-success,
.black.theme-dark .mud-button-filled-success {
	background: #138808 !important;
	background-color: #138808 !important;
	color: #FFFFFF !important;
	border: none !important;
}

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

/* Primary buttons - Keep white with green accent */
.black.theme-dark .mud-button-root.mud-button-filled-primary,
.black.theme-dark .mud-button-filled-primary {
	background: #138808 !important;
	background-color: #138808 !important;
	color: #FFFFFF !important;
	border: none !important;
}

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

/* Secondary buttons - SAFFRON background with white text (Indian Saffron) */
.black.theme-dark .mud-button-root.mud-button-filled-secondary,
.black.theme-dark .mud-button-filled-secondary {
	background: #FF9933 !important;
	background-color: #FF9933 !important;
	color: #FFFFFF !important;
	border: none !important;
}

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

/* Warning buttons - SAFFRON */
.black.theme-dark .mud-button-root.mud-button-filled-warning,
.black.theme-dark .mud-button-filled-warning {
	background: #FF9933 !important;
	background-color: #FF9933 !important;
	color: #FFFFFF !important;
}

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

/* Info buttons - ASHOKA BLUE */
.black.theme-dark .mud-button-root.mud-button-filled-info,
.black.theme-dark .mud-button-filled-info {
	background: #1565C0 !important;
	background-color: #1565C0 !important;
	color: #FFFFFF !important;
}

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

/* Default/outlined buttons - white background with black text */
.black.theme-dark .mud-button-root,
.black.theme-dark .mud-button-filled,
.black.theme-dark .mud-button-outlined,
.black.theme-dark .mud-button-text {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #000000 !important;
	border: 1px solid #138808 !important;
}

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

/* Active/pressed buttons - GREEN background 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: #138808 !important;
	background-color: #138808 !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;
}

/* FAB (Floating Action Button) - GREEN */
.black.theme-dark .mud-fab,
.black.theme-dark .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;
}

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

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

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

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

.black.theme-dark .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 {
	color: #666666 !important;
}

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

.black.theme-dark .mud-shrink,
.black.theme-dark .mud-input-label.mud-shrink {
	color: #aaaaaa !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: #1a1a1a !important;
	background-color: #1a1a1a !important;
	color: #ffffff !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;
	border: 1px solid #138808 !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: #e8f5e9 !important;
	background-color: #e8f5e9 !important;
	color: #138808 !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-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 {
	background: #1a1a1a !important;
	background-color: #1a1a1a !important;
	color: #ffffff !important;
	border: 1px solid #138808 !important;
}

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

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

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

/* Default typography on black backgrounds - WHITE text */
.black.theme-dark .mud-typography {
	color: #ffffff !important;
}

/* Typography INSIDE white controls - BLACK text */
.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,
.black.theme-dark .mud-menu-paper .mud-typography {
	color: #000000 !important;
}

/* Secondary text color - gray on black */
.black.theme-dark .mud-typography.mud-secondary-text,
.black.theme-dark .mud-text-secondary {
	color: #FF9933 !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 {
	color: #ffffff !important;
}

.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
   ========================================================================== */

/* Social/Contact icons */
.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 {
	color: #FF9933 !important;
}

/* MudIcon styling for contacts */
.black.theme-dark .mud-icon-root.contact-icon {
	color: #FF9933 !important;
}

/* Generic icon styling */
.black.theme-dark .mud-icon-root {
	color: inherit !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
   ========================================================================== */

/* Progress bar */
.black.theme-dark .mud-progress-linear {
	background: #333333 !important;
}

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

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

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

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

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

/* Primary buttons - white background with black text */
.black.theme-dark .mud-button-root.mud-button-filled-primary,
.black.theme-dark .mud-button-filled-primary {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #000000 !important;
	border: none !important;
}

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

/* Secondary buttons - light gray background with black text */
.black.theme-dark .mud-button-root.mud-button-filled-secondary,
.black.theme-dark .mud-button-filled-secondary {
	background: #cccccc !important;
	background-color: #cccccc !important;
	color: #000000 !important;
	border: none !important;
}

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

/* Default/outlined buttons - white background with black text */
.black.theme-dark .mud-button-root,
.black.theme-dark .mud-button-filled,
.black.theme-dark .mud-button-outlined,
.black.theme-dark .mud-button-text {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #000000 !important;
	border: 1px solid #e0e0e0 !important;
}

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

/* Active/pressed buttons - blue background 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;
}

/* FAB (Floating Action Button) */
.black.theme-dark .mud-fab,
.black.theme-dark .mud-fab-primary {
	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;
}

/* ==========================================================================
   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-close-button {
	color: #000000 !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;
}

/* 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;
}

/* ==========================================================================
   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: #444444 !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: #444444 !important;
}

.black.theme-dark input::placeholder {
	color: #666666 !important;
}

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

.black.theme-dark .mud-shrink,
.black.theme-dark .mud-input-label.mud-shrink {
	color: #aaaaaa !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: #1a1a1a !important;
	background-color: #1a1a1a !important;
	color: #ffffff !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;
	border: 1px solid #e0e0e0 !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;
	color: #000000 !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
   ========================================================================== */

.black.theme-dark .mud-card {
	background: #1a1a1a !important;
	background-color: #1a1a1a !important;
	color: #ffffff !important;
	border: 1px solid #333333 !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 #444444 !important;
}

/* Why cards on homepage */
.black.theme-dark .why-card {
	background: #1a1a1a !important;
	color: #ffffff !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-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;
	border: 1px solid #333333 !important;
}

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

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

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

/* Default typography on black backgrounds - WHITE text */
.black.theme-dark .mud-typography {
	color: #ffffff !important;
}

/* Typography INSIDE white controls - BLACK text */
.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,
.black.theme-dark .mud-menu-paper .mud-typography {
	color: #000000 !important;
}

/* Secondary text color - 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 {
	background: #1a1a1a !important;
	border: 1px solid #444444 !important;
	color: #ffffff !important;
}

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

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

/* ==========================================================================
   APPBAR & NAVIGATION
   ========================================================================== */

.black.theme-dark .technical-appbar,
.technical-shell.black.theme-dark .technical-appbar {
	color: #ffffff !important;
	background: #000000 !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 {
	color: #ffffff !important;
}

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

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

/* Tricolor stripe */
.black.theme-dark .tricolor-stripe {
	height: 4px;
	background: #ffffff;
}

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

.black.theme-dark .mud-divider {
	border-color: #444444 !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;
}

/* ==========================================================================
   MISCELLANEOUS COMPONENTS
   ========================================================================== */

/* Progress bar */
.black.theme-dark .mud-progress-linear {
	background: #333333 !important;
}

/* Links */
.black.theme-dark a {
	color: #64b5f6 !important;
}

.black.theme-dark a:hover {
	color: #90caf9 !important;
}

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

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

/* ==========================================================================
   LIFECYCLE COMPONENTS - Card Lifecycle Flow
   ========================================================================== */

/* Lifecycle card styling */
.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 icons */
.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;
}

/* Stage badges */
.black.theme-dark .stage-badge {
	background: #138808 !important;
	background-color: #138808 !important;
	color: #FFFFFF !important;
}

.black.theme-dark .stage-badge-paid {
	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;
}

/* Stage title */
.black.theme-dark .stage-title {
	color: #FFFFFF !important;
}

/* Stage description */
.black.theme-dark .stage-desc {
	color: #CCCCCC !important;
}

/* Feature list */
.black.theme-dark .stage-features {
	color: #FFFFFF !important;
}

.black.theme-dark .feature-row {
	color: #FFFFFF !important;
}

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

/* Stage inherits badge */
.black.theme-dark .stage-inherits-badge {
	background: #138808 !important;
	background-color: #138808 !important;
	color: #FFFFFF !important;
}

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

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

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

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

/* Lifecycle header */
.black.theme-dark .lifecycle-header {
	color: #FFFFFF !important;
}

.black.theme-dark .lifecycle-title {
	color: #FFFFFF !important;
}

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

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

/* Stage cards color accents */
.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;
}

/* ==========================================================================
   MUD-TYPOGRAPHY - Ensure all text is visible
   ========================================================================== */

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

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

.black.theme-dark .mud-typography.mud-typo-body1,
.black.theme-dark .mud-typography.mud-typo-body2 {
	color: #FFFFFF !important;
}

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

.black.theme-dark .mud-typography.mud-typo-h1,
.black.theme-dark .mud-typography.mud-typo-h2,
.black.theme-dark .mud-typography.mud-typo-h3,
.black.theme-dark .mud-typography.mud-typo-h4,
.black.theme-dark .mud-typography.mud-typo-h5,
.black.theme-dark .mud-typography.mud-typo-h6 {
	color: #FFFFFF !important;
}

/* ==========================================================================
   APP DIALOG HEADER
   ========================================================================== */

.black.theme-dark .app-dialog-header {
	background: #1a1a1a !important;
	background-color: #1a1a1a !important;
	border-bottom-color: #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
   ========================================================================== */

/* Override the town-cards.css rule that forces white color on icon buttons */
.black.theme-dark .town-card-bottom-row .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 {
	color: inherit !important;
}

.black.theme-dark .town-card-bottom-row .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;
}

/* Also style card-link-icons-row in other contexts */
.black.theme-dark .card-link-icons-row .mud-icon-button {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

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

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