/* =========================================
   INSTADM - GLOBAL STYLE ENTRY
   ========================================= */

/* Global Contrast Fix - MUST be loaded early */
@import url("./core/contrast-fix.39cfa556190e.css");
/* =========================================
   DESIGN TOKENS - CORE SYSTEM (INLINED)
   ========================================= */

:root {
    /* === COLOR PALETTE (Midnight Violet Theme) === */

    /* Backgrounds */
    --bg-base: #08090c;
    --bg-surface: #0f111a;
    --bg-elevated: #161824;
    --bg-input: rgba(0, 0, 0, 0.3);

    /* Gray Scale (for Tailwind compatibility) */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --gray-950: #08090c;

    /* Primary / Accent Brand Colors */
    --primary-50: #f5f3ff;
    --primary-100: #ede9fe;
    --primary-200: #ddd6fe;
    --primary-300: #c4b5fd;
    --primary-400: #a78bfa;
    --primary-500: #8b5cf6;
    --primary-600: #7c3aed;
    --primary-700: #6d28d9;
    --primary-800: #5b21b6;
    --primary-900: #4c1d95;

    /* Secondary Accents */
    --accent-cyan: #06b6d4;
    --accent-teal: #14b8a6;
    --accent-pink: #ec4899;

    /* Text Colors */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-on-primary: #ffffff;

    /* Borders */
    --border-light: hsla(var(--theme-primary-h), var(--theme-primary-s), 90%, 0.1);
    --border-medium: hsla(var(--theme-primary-h), var(--theme-primary-s), 90%, 0.2);
    --border-focus: hsla(var(--theme-primary-h), var(--theme-primary-s), 60%, 0.5);

    /* Glassmorphism - Dynamic Tint */
    --glass-bg: hsla(var(--theme-primary-h), var(--theme-primary-s), 85%, 0.05);
    --glass-border: hsla(var(--theme-primary-h), var(--theme-primary-s), 80%, 0.15);
    --glass-blur: 16px;
    --glass-subtle: hsla(var(--theme-primary-h), var(--theme-primary-s), 90%, 0.02);
    --glass-medium: hsla(var(--theme-primary-h), var(--theme-primary-s), 85%, 0.08);
    --glass-heavy: hsla(var(--theme-primary-h), var(--theme-primary-s), 85%, 0.12);

    /* Glass Aliases (used by media_automation.css) */
    --surface-glass: rgba(255, 255, 255, 0.15);
    --border-glass: rgba(255, 255, 255, 0.25);
    --accent-purple: #a78bfa;

    /* Status Colors */
    --status-success: #10b981;
    --status-error: #ef4444;
    --status-warning: #f59e0b;
    --status-info: #3b82f6;

    /* Status Aliases (used by base.css and components.css) */
    --success: var(--status-success);
    --error: var(--status-error);
    --warning: var(--status-warning);
    --info: var(--status-info);

    /* Status RGB (for alpha/opacity usage) */
    --success-rgb: 16, 185, 129;
    --error-rgb: 239, 68, 68;
    --warning-rgb: 245, 158, 11;
    --info-rgb: 59, 130, 246;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px hsla(var(--theme-primary-h), var(--theme-primary-s), 60%, 0.15);

    /* Error Shades (used by btn-danger:hover) */
    --error-600: #dc2626;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;

    /* COMPATIBILITY LAYER (Legacy base.css mapping) */
    --bg-primary: var(--bg-base);
    --bg-secondary: var(--bg-surface);
    --surface: var(--bg-surface);
    --surface-elevated: var(--bg-elevated);
    --surface-hover: var(--bg-elevated);
    --surface-active: var(--bg-input);
    --text-tertiary: var(--text-muted);
    --text-inverse: var(--text-on-primary);
    --border-subtle: var(--border-light);
    --border-default: var(--border-medium);
    --border-strong: var(--border-focus);
    --border-input: rgba(255, 255, 255, 0.15);
    --primary: var(--primary-500);
    --primary-hover: var(--primary-600);
    --primary-active: var(--primary-700);
    --primary-500-rgb: 139, 92, 246;
    --bg-base-rgb: 8, 9, 12;
    --bg-surface-rgb: 15, 17, 26;
    --bg-elevated-rgb: 22, 24, 36;

    /* Transition Timing (used by layout.css and components.css) */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;

    /* === TYPOGRAPHY === */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-mono: 'Fira Code', 'Consolas', 'Monaco', monospace;

    /* === SPACING SCALE (4px base) === */
    --spacing-1: 0.25rem;
    /* 4px */
    --spacing-2: 0.5rem;
    /* 8px */
    --spacing-3: 0.75rem;
    /* 12px */
    --spacing-4: 1rem;
    /* 16px */
    --spacing-5: 1.25rem;
    /* 20px */
    --spacing-6: 1.5rem;
    /* 24px */
    --spacing-8: 2rem;
    /* 32px */
    --spacing-10: 2.5rem;
    /* 40px */
    --spacing-12: 3rem;
    /* 48px */

    /* === TYPOGRAPHY SCALE === */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */

    /* === LAYOUT DIMENSIONS === */
    --sidebar-width: 280px;
    --sidebar-collapsed: 88px;
    --topbar-height: 70px;
    --z-sidebar: 50;
    --z-topbar: 40;
    --z-modal: 100;
}

/* =========================================
   DARK THEME OVERRIDES
   ========================================= */
[data-theme="dark"] {
    --bg-base: #08090c;
    --bg-surface: #0f111a;
    --bg-elevated: #161824;
    --bg-input: rgba(0, 0, 0, 0.3);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-light: rgba(255, 255, 255, 0.05);
    --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.15);
}

/* =========================================
   LIGHT THEME OVERRIDES
   ========================================= */
[data-theme="light"] {
    --bg-base: #f8fafc;
    --bg-surface: #ffffff;
    --bg-elevated: #f1f5f9;
    --bg-input: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-on-primary: #ffffff;
    --border-light: #e2e8f0;
    --border-medium: #cbd5e1;
    --border-focus: rgba(139, 92, 246, 0.5);
    --border-input: #cbd5e1;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.05);
    --glass-blur: 8px;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-glow: 0 0 15px rgba(139, 92, 246, 0.15);
}

@import url("themes.214a9e49c9a6.css");

/* =========================================
   GLOBAL UTILITY STYLES
   ========================================= */
body {
    background-color: var(--bg-base) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

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

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

/* =========================================
   FORM VISIBILITY - ENSURE NO CAMOUFLAGE
   ========================================= */

/* All form inputs should have visible text */
input,
textarea,
select {
    color: var(--text-primary) !important;
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-medium) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

/* Light theme - ensure dark text on light background */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
    color: #0f172a !important;
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: #64748b !important;
}

/* Ensure labels are visible */
label {
    color: var(--text-secondary);
}

[data-theme="light"] label {
    color: #475569;
}

/* Buttons with text visibility */
button,
.btn {
    color: inherit;
}

/* Status badges visibility */
.status-badge {
    font-weight: 600;
}

.status-badge.active {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.status-badge.inactive,
.status-badge.paused {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* Light theme status badges */
[data-theme="light"] .status-badge.active {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
}

[data-theme="light"] .status-badge.inactive {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
}

/* Modal/Dialog content visibility */
.modal input,
.modal textarea,
.modal select,
#dialog-container input,
#dialog-container textarea,
#dialog-container select {
    color: var(--text-primary) !important;
}

[data-theme="light"] .modal input,
[data-theme="light"] .modal textarea,
[data-theme="light"] #dialog-container input,
[data-theme="light"] #dialog-container textarea {
    color: #0f172a !important;
    background: #ffffff !important;
}

/* Table text visibility */
table,
th,
td {
    color: var(--text-primary);
}

[data-theme="light"] table,
[data-theme="light"] th,
[data-theme="light"] td {
    color: #1e293b;
}

/* Card content visibility */
.card,
.glass-panel,
.settings-card {
    color: var(--text-primary);
}

/* Glass Panel Styling - Core Component (uses CSS variables) */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
}

[data-theme="light"] .glass-panel {
    background: rgba(255, 255, 255, 0.9);
    border-color: #e2e8f0;
}

/* Ensure help text is visible but muted */
.help-text,
.text-muted {
    color: var(--text-muted) !important;
}

[data-theme="light"] .help-text,
[data-theme="light"] .text-muted {
    color: #64748b !important;
}

/* =========================================
   SIDEBAR LIGHT THEME - HIGH CONTRAST
   ========================================= */

[data-theme="light"] .sidebar {
    background: #f8fafc !important;
    border-right-color: #e2e8f0 !important;
}

[data-theme="light"] .nav-item {
    color: #1e293b !important;
}

[data-theme="light"] .nav-item:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

[data-theme="light"] .nav-item.active {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #7c3aed !important;
}

[data-theme="light"] .nav-section-title {
    color: #64748b !important;
}

[data-theme="light"] .sidebar-header {
    border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .sidebar-footer {
    border-top-color: #e2e8f0 !important;
}

[data-theme="light"] .topbar {
    background: #ffffff !important;
    border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .hamburger-btn {
    color: #475569 !important;
}

[data-theme="light"] .topbar-breadcrumbs {
    color: #475569 !important;
}

/* =========================================
   LIGHT THEME - MODAL & PANEL TEXT VISIBILITY
   ========================================= */

[data-theme="light"] .glass-panel,
[data-theme="light"] .glass-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .text-white {
    color: #0f172a !important;
}

[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400 {
    color: #475569 !important;
}

[data-theme="light"] .text-gray-500 {
    color: #64748b !important;
}

[data-theme="light"] .bg-gray-800,
[data-theme="light"] .bg-gray-900 {
    background: #f1f5f9 !important;
}

[data-theme="light"] .bg-black\/20,
[data-theme="light"] .bg-white\/5 {
    background: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/5 {
    border-color: #e2e8f0 !important;
}

[data-theme="light"] .placeholder-gray-500::placeholder {
    color: #94a3b8 !important;
}

/* =========================================
   GLASS FORM ELEMENTS - CONTRAST FIXES
   ========================================= */

/* Glass Textarea/Input - Dark Mode */
.glass-textarea,
.glass-input,
.glass-select {
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.glass-textarea::placeholder,
.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.glass-textarea:focus,
.glass-input:focus,
.glass-select:focus {
    border-color: var(--primary-500, #8b5cf6) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2) !important;
}

/* Glass Textarea/Input - Light Mode */
[data-theme="light"] .glass-textarea,
[data-theme="light"] .glass-input,
[data-theme="light"] .glass-select {
    color: #0f172a !important;
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .glass-textarea::placeholder,
[data-theme="light"] .glass-input::placeholder {
    color: #94a3b8 !important;
}

[data-theme="light"] .glass-select option {
    background: #ffffff;
    color: #0f172a;
}

/* Ensure all modal form inputs are visible */
.fixed input,
.fixed textarea,
.fixed select {
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="light"] .fixed input,
[data-theme="light"] .fixed textarea,
[data-theme="light"] .fixed select {
    color: #0f172a !important;
}

/* =========================================
   LOW-CONTRAST TEXT OVERRIDES (DARK MODE)
   Make dark grays readable on dark backgrounds
   ========================================= */

/* Dark grays are invisible on dark backgrounds - lighten them */
.text-gray-600 {
    color: #9ca3af !important;
    /* Lighten from #4b5563 to gray-400 */
}

.text-gray-700 {
    color: #9ca3af !important;
}

.text-gray-800 {
    color: #d1d5db !important;
}

.text-slate-600 {
    color: #94a3b8 !important;
    /* Lighten to slate-400 */
}

.text-slate-700 {
    color: #94a3b8 !important;
}

.text-slate-800 {
    color: #cbd5e1 !important;
}

/* Light theme - these need to be darker */
[data-theme="light"] .text-gray-600 {
    color: #4b5563 !important;
}

[data-theme="light"] .text-gray-700 {
    color: #374151 !important;
}

[data-theme="light"] .text-gray-800 {
    color: #1f2937 !important;
}

[data-theme="light"] .text-slate-600 {
    color: #475569 !important;
}

[data-theme="light"] .text-slate-700 {
    color: #334155 !important;
}

[data-theme="light"] .text-slate-800 {
    color: #1e293b !important;
}

/* =========================================
   LABEL & FORM ELEMENT VISIBILITY
   ========================================= */

/* Ensure all labels are visible */
label,
.label,
.form-label {
    color: var(--text-secondary, #94a3b8) !important;
    font-weight: 500;
}

[data-theme="light"] label,
[data-theme="light"] .label,
[data-theme="light"] .form-label {
    color: #475569 !important;
}

/* Form hints and helper text */
.form-hint,
.help-text,
.hint-text,
.form-text {
    color: var(--text-muted, #64748b) !important;
}

[data-theme="light"] .form-hint,
[data-theme="light"] .help-text,
[data-theme="light"] .hint-text,
[data-theme="light"] .form-text {
    color: #64748b !important;
}

/* =========================================
   BUTTON TEXT VISIBILITY
   ========================================= */

/* Ensure all button variants have readable text */
.btn,
button {
    text-shadow: none;
}

.btn-primary,
.btn-accent {
    color: #ffffff !important;
}

.btn-secondary,
.btn-ghost,
.btn-outline {
    color: var(--text-primary, #f8fafc) !important;
}

[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-ghost,
[data-theme="light"] .btn-outline {
    color: #1e293b !important;
}

/* =========================================
   CARD & PANEL HEADINGS
   ========================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.card-header,
.panel-header,
.section-title {
    color: var(--text-primary, #f8fafc);
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .card-header,
[data-theme="light"] .panel-header,
[data-theme="light"] .section-title {
    color: #0f172a !important;
}

/* =========================================
   TAILWIND GRAY TEXT OVERRIDES
   Map Tailwind gray-400/500 to CSS variables for theme safety
   ========================================= */

/* Dark theme - Light gray text for contrast */
.text-gray-400 {
    color: var(--gray-400, #9ca3af) !important;
}

.text-gray-500 {
    color: var(--gray-500, #6b7280) !important;
}

.text-gray-600 {
    color: var(--gray-600, #4b5563) !important;
}

/* Light theme - Darker grays for readability */
[data-theme="light"] .text-gray-400 {
    color: #6b7280 !important;
    /* Darker for light bg */
}

[data-theme="light"] .text-gray-500 {
    color: #4b5563 !important;
}

[data-theme="light"] .text-gray-600 {
    color: #374151 !important;
}

/* Gray background overrides for theming */
.bg-gray-700 {
    background-color: var(--gray-700, #374151) !important;
}

.bg-gray-800 {
    background-color: var(--gray-800, #1f2937) !important;
}

.bg-gray-900 {
    background-color: var(--gray-900, #111827) !important;
}

[data-theme="light"] .bg-gray-700 {
    background-color: #e5e7eb !important;
}

[data-theme="light"] .bg-gray-800 {
    background-color: #f3f4f6 !important;
}

[data-theme="light"] .bg-gray-900 {
    background-color: #f9fafb !important;
}

/* Border gray overrides */
.border-gray-700 {
    border-color: var(--gray-700, #374151) !important;
}

[data-theme="light"] .border-gray-700 {
    border-color: #d1d5db !important;
}

/* =========================================
   ACCESSIBILITY - MINIMUM CONTRAST RATIOS
   ========================================= */

/* Ensure all secondary text has 4.5:1 contrast */
.text-secondary,
[class*="text-gray-"] {
    opacity: 1 !important;
}

/* Disabled states - still readable */
:disabled,
.disabled {
    opacity: 0.6 !important;
}

/* Focus states - high visibility */
:focus-visible {
    outline: 2px solid var(--primary-500) !important;
    outline-offset: 2px !important;
}

/* =========================================
   CAMOUFLAGE PREVENTION
   Ensure text never matches background
   ========================================= */

/* White text on dark backgrounds only */
.bg-gray-900 *,
.bg-gray-800 *,
.bg-black *,
[class*="bg-slate-9"] *,
[class*="bg-slate-8"] * {
    --tw-text-opacity: 1;
}

/* Ensure white/light bg has dark text */
[data-theme="light"] .card *,
[data-theme="light"] .modal *,
[data-theme="light"] .panel *,
[data-theme="light"] [class*="bg-white"] * {
    color: inherit;
}

/* =========================================
   WHITE GLASS THEME - HIGH CONTRAST OVERRIDES
   Forces dark text for white-glass modals
   ========================================= */
.white-glass-theme {
    background-color: #ffffff !important;
    color: #1e293b !important;
    /* Slate 800 */
}

/* Text Overrides */
.white-glass-theme .text-white,
.white-glass-theme .text-white\/90,
.white-glass-theme .text-white\/80 {
    color: #0f172a !important;
}

.white-glass-theme .text-white\/70,
.white-glass-theme .text-white\/60,
.white-glass-theme .text-gray-200,
.white-glass-theme .text-gray-300 {
    color: #475569 !important;
}

/* Slate 600 */

.white-glass-theme .text-white\/50,
.white-glass-theme .text-white\/40,
.white-glass-theme .text-gray-400,
.white-glass-theme .text-gray-500 {
    color: #64748b !important;
}

/* Slate 500 */

/* Background & Border Overrides */
.white-glass-theme .border-white\/5,
.white-glass-theme .border-white\/10,
.white-glass-theme .border-white\/20 {
    border-color: #e2e8f0 !important;
}

.white-glass-theme .bg-white\/5,
.white-glass-theme .bg-white\/10 {
    background-color: #f1f5f9 !important;
}

.white-glass-theme .bg-white\/20 {
    background-color: #e2e8f0 !important;
}

/* Input Overrides */
.white-glass-theme input,
.white-glass-theme textarea,
.white-glass-theme select,
.white-glass-theme .glass-input,
.white-glass-theme .glass-textarea,
.white-glass-theme .glass-select {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.white-glass-theme input:focus,
.white-glass-theme textarea:focus {
    border-color: #7c3aed !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1) !important;
}

.white-glass-theme ::placeholder {
    color: #94a3b8 !important;
}

/* Status/Accent Overrides */
.white-glass-theme .text-emerald-300,
.white-glass-theme .text-emerald-200 {
    color: #059669 !important;
}

.white-glass-theme .bg-emerald-500\/20,
.white-glass-theme .bg-emerald-500\/10 {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
}

.white-glass-theme .text-blue-300,
.white-glass-theme .text-blue-200 {
    color: #2563eb !important;
}

.white-glass-theme .bg-blue-500\/20,
.white-glass-theme .bg-blue-500\/10 {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
}

.white-glass-theme .text-pink-300,
.white-glass-theme .text-pink-200 {
    color: #db2777 !important;
}

.white-glass-theme .bg-pink-500\/20 {
    background-color: #fce7f3 !important;
    border-color: #fbcfe8 !important;
}

/* Close Button */
.white-glass-theme .fa-times,
.white-glass-theme .ri-close-line {
    color: #64748b !important;
}

.white-glass-theme button:hover .fa-times {
    color: #0f172a !important;
}