/* Midnight Mode - Pitch Black Cards with Dark Background */

/* Midnight mode variables */
:root {
    --midnight-bg: #1a1a1a;
    --midnight-card: #000000;
    --midnight-nav: #000000;
    --midnight-sidebar: #000000;
    --midnight-text: #ffffff;
    --midnight-text-secondary: #b0b0b0;
    --midnight-border: #2a2a2a;
    --midnight-hover: #1a1a1a;
}

/* Apply midnight mode when body has midnight class */
body.midnight {
    background-color: var(--midnight-bg) !important;
    color: var(--midnight-text) !important;
}

/* Main content area */
body.midnight .min-h-screen {
    background-color: var(--midnight-bg) !important;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(120, 119, 198, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
}

/* Cards - Pitch Black */
body.midnight .bg-white,
body.midnight .bg-white\/80,
body.midnight .bg-white\/90,
body.midnight .bg-gray-50,
body.midnight .bg-gray-100 {
    background-color: var(--midnight-card) !important;
    border-color: var(--midnight-border) !important;
}

/* Dark mode cards - also make pitch black in midnight mode */
body.midnight .dark\\:bg-dark-card,
body.midnight .dark\\:bg-dark-card\/80,
body.midnight .dark\\:bg-gray-800,
body.midnight .dark\\:bg-gray-700,
body.midnight .dark\\:bg-gray-900 {
    background-color: var(--midnight-card) !important;
    border-color: var(--midnight-border) !important;
}

/* Navigation - Pitch Black */
body.midnight nav,
body.midnight .bg-white\/80,
body.midnight .backdrop-blur-sm {
    background-color: var(--midnight-nav) !important;
    border-color: var(--midnight-border) !important;
}

/* Sidebar - Pitch Black */
body.midnight #sidebar {
    background-color: var(--midnight-sidebar) !important;
    border-color: var(--midnight-border) !important;
}

/* Text colors */
body.midnight .text-gray-800,
body.midnight .text-gray-900,
body.midnight .dark\\:text-dark-text {
    color: var(--midnight-text) !important;
}

body.midnight .text-gray-600,
body.midnight .text-gray-500,
body.midnight .text-gray-400,
body.midnight .dark\\:text-gray-400,
body.midnight .dark\\:text-gray-300 {
    color: var(--midnight-text-secondary) !important;
}

/* Borders */
body.midnight .border-gray-200,
body.midnight .border-gray-300,
body.midnight .dark\\:border-gray-700,
body.midnight .dark\\:border-gray-600 {
    border-color: var(--midnight-border) !important;
}

/* Hover effects */
body.midnight .hover\\:bg-gray-50:hover,
body.midnight .dark\\:hover\\:bg-gray-800:hover {
    background-color: var(--midnight-hover) !important;
}

/* Input fields */
body.midnight input,
body.midnight textarea,
body.midnight select {
    background-color: var(--midnight-card) !important;
    border-color: var(--midnight-border) !important;
    color: var(--midnight-text) !important;
}

body.midnight input:focus,
body.midnight textarea:focus,
body.midnight select:focus {
    background-color: var(--midnight-hover) !important;
    border-color: var(--midnight-border) !important;
}

/* Buttons */
body.midnight .bg-gray-100,
body.midnight .dark\\:bg-gray-700 {
    background-color: var(--midnight-hover) !important;
}

/* Call history specific */
body.midnight .call-item {
    background-color: var(--midnight-card) !important;
    border-color: var(--midnight-border) !important;
}

body.midnight .call-item:hover {
    background-color: var(--midnight-hover) !important;
}

/* Summary section */
body.midnight .bg-white.dark\\:bg-gray-800 {
    background-color: var(--midnight-card) !important;
    border-color: var(--midnight-border) !important;
}

/* Info cards */
body.midnight .bg-gray-50.dark\\:bg-gray-800 {
    background-color: var(--midnight-card) !important;
    border-color: var(--midnight-border) !important;
}

/* Dropdown menus */
body.midnight .dropdown-menu {
    background-color: var(--midnight-card) !important;
    border-color: var(--midnight-border) !important;
}

/* Modal backgrounds */
body.midnight .modal-content {
    background-color: var(--midnight-card) !important;
    border-color: var(--midnight-border) !important;
}

/* Form elements */
body.midnight .form-control {
    background-color: var(--midnight-card) !important;
    border-color: var(--midnight-border) !important;
    color: var(--midnight-text) !important;
}

/* Keep the nice gradient backgrounds and primary colors */
body.midnight .bg-gradient-to-r {
    /* Keep gradients as they are */
}

body.midnight .from-primary,
body.midnight .to-secondary {
    /* Keep primary/secondary colors */
}

/* Keep orange accent colors */
body.midnight .border-orange-200\/50,
body.midnight .border-orange-800\/30 {
    /* Keep orange borders */
}

/* Keep green status colors */
body.midnight .bg-green-100,
body.midnight .text-green-600,
body.midnight .bg-green-900\/30,
body.midnight .text-green-400 {
    /* Keep green status indicators */
}

/* Keep the main background gradient/pattern */
body.midnight {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%) !important;
}

/* Ensure proper contrast for readability */
body.midnight .text-gray-700 {
    color: var(--midnight-text-secondary) !important;
}

body.midnight .text-gray-300 {
    color: var(--midnight-text) !important;
}

/* Override any remaining light backgrounds */
body.midnight * {
    /* Ensure no light backgrounds leak through */
}

body.midnight .bg-white,
body.midnight .bg-gray-50,
body.midnight .bg-gray-100,
body.midnight .bg-gray-200 {
    background-color: var(--midnight-card) !important;
}

/* Special handling for backdrop blur elements */
body.midnight .backdrop-blur-sm {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

/* Ensure proper text contrast */
body.midnight h1,
body.midnight h2,
body.midnight h3,
body.midnight h4,
body.midnight h5,
body.midnight h6 {
    color: var(--midnight-text) !important;
}

body.midnight p,
body.midnight span,
body.midnight div {
    color: inherit;
}

/* Keep the nice dark background but make cards truly black */
body.midnight {
    background-color: var(--midnight-bg) !important;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(120, 119, 198, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
}