/**
 * Dark Mode Override CSS
 * Converts all white/light elements to dark theme
 */

/* Override all Tailwind white/gray backgrounds */
.bg-white,
.bg-gray-50,
.bg-gray-100,
.bg-gray-200,
.bg-gray-300 {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%) !important;
}

/* Navigation specific overrides */
nav.bg-white,
.bg-white.shadow-md {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Override all text colors */
.text-black,
.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-gray-600,
.text-gray-500 {
    color: #FFFFFF !important;
}

.text-gray-400,
.text-gray-300 {
    color: #B8BCC8 !important;
}

/* Links in navigation */
nav a {
    color: #FFFFFF !important;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #8B5CF6 !important;
}

/* Buttons in navigation */
nav button {
    color: #FFFFFF !important;
}

/* Dropdown menus */
.bg-white.shadow-lg {
    background: linear-gradient(135deg, #16213E 0%, #0f0f1a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Mobile menu */
.mobile-menu {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%) !important;
}

/* Override any remaining white backgrounds in controls */
.controls .control-group {
    background: transparent !important;
}

.controls .collapsible {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.controls .collapsible-header {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #FFFFFF !important;
}

.controls .collapsible-content {
    background: transparent !important;
    color: #FFFFFF !important;
}

/* Form elements in controls */
.controls input[type="text"],
.controls input[type="number"],
.controls textarea,
.controls select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}

.controls input[type="text"]:focus,
.controls input[type="number"]:focus,
.controls textarea:focus,
.controls select:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #8B5CF6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important;
}

/* Labels in controls */
.controls label {
    color: #B8BCC8 !important;
}

/* Color picker wrapper */
.color-input-group {
    background: rgba(255, 255, 255, 0.03) !important;
    padding: 0.5rem !important;
    border-radius: 4px !important;
}

/* Style selector buttons */
.style-toggles {
    background: rgba(255, 255, 255, 0.02) !important;
}

.style-toggle {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #B8BCC8 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.style-toggle:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
}

.style-toggle.active {
    background: #8B5CF6 !important;
    color: #FFFFFF !important;
    border-color: #8B5CF6 !important;
}

/* Typography section */
.typography-controls {
    background: transparent !important;
}

/* Item sections */
.item-section {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Background section */
.bg-tab {
    background: transparent !important;
    color: #B8BCC8 !important;
}

.bg-tab.active {
    background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%) !important;
    color: #FFFFFF !important;
}

/* Ensure all buttons have proper styling */
button {
    color: #FFFFFF !important;
}

/* Override any SVG icons to be white */
svg {
    color: #FFFFFF !important;
    fill: currentColor !important;
}

/* Footer dark mode */
footer {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%) !important;
    color: #FFFFFF !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

footer a {
    color: #B8BCC8 !important;
}

footer a:hover {
    color: #8B5CF6 !important;
}

/* Flash messages */
.flash-message {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Modals */
.fixed.inset-0.bg-gray-500 {
    background: rgba(0, 0, 0, 0.8) !important;
}

.bg-white.rounded-lg {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Ensure all text is readable */
p, span, div, h1, h2, h3, h4, h5, h6, label, a {
    color: inherit;
}

/* Override specific white text on white background issues */
.controls .control-group > label {
    color: #B8BCC8 !important;
    font-weight: 500;
}

/* Range inputs */
input[type="range"] {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Checkboxes and radio buttons */
input[type="checkbox"],
input[type="radio"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: #8B5CF6 !important;
    border-color: #8B5CF6 !important;
}

/* Select dropdowns - ensure dark theme */
select {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #FFFFFF !important;
}

select option {
    background: #1a1a2e !important;
    color: #FFFFFF !important;
}

/* Override any inline styles that might have white backgrounds */
[style*="background: white"],
[style*="background:white"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#fff"] {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%) !important;
}

/* Additional dark mode styles for page components */
.page-header {
    text-align: center !important;
    margin-bottom: 40px !important;
    padding: 12px 20px !important;
    background: linear-gradient(135deg, #152259 0%, #2c292f 100%) !important;
    border-radius: 16px !important;
    color: white !important;
}

/* Override white card backgrounds */
.card, .bg-white, [class*="bg-white"] {
    background: linear-gradient(135deg, #1a1a2e 0%, #252525 100%) !important;
    color: #ffffff !important;
}

/* Template cards */
.template-card, .rounded-lg {
    background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Override any purple/blue gradient headers */
[style*="background: linear-gradient"], 
[style*="background:linear-gradient"],
.bg-gradient-to-r {
    background: linear-gradient(135deg, #192b7b 0%, #343137 100%) !important;
}

/* Ensure text is visible on dark backgrounds */
h1, h2, h3, h4, h5, h6, p, span, div {
    color: #ffffff !important;
}

/* Subdued text */
.text-gray-500, .text-gray-600, .text-gray-700 {
    color: #cdcdcd !important;
}

/* Buttons */
.bg-blue-500, .bg-blue-600, [class*="bg-blue"] {
    background: #112545 !important;
    color: white !important;
}

.bg-red-500, .bg-red-600, [class*="bg-red"] {
    background: #6d1010 !important;
    color: white !important;
}

.action-card {
    background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%) !important;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid rgba(255,255,255,0.05);
}

.action-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #f9f9f9;
}

.action-description {
    color: #cdcdcd;
    margin-bottom: 25px;
    line-height: 1.6;
}

.template-info {
    padding: 20px;
    background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%) !important;
}

.template-name {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
}

.btn-edit {
    background: linear-gradient(135deg, #1e3a8a 0%, #000000 100%) !important;
    color: white !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    transition: all 0.3s ease;
}

.btn-edit:hover {
    background: linear-gradient(135deg, #2563eb 0%, #0a0a0a 100%) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-delete {
    background: linear-gradient(135deg, #7f1d1d 0%, #000000 100%) !important;
    color: white !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    transition: all 0.3s ease;
}

.btn-delete:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #0a0a0a 100%) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Global border color override */
*, ::after, ::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #3b3b3b;
}

/* Ensure body and main backgrounds are dark */
body {
    background: #0a0a0a !important;
    color: #ffffff !important;
}

main {
    background: transparent !important;
}

/* Override Tailwind gradient classes */
.bg-gradient-to-br, .from-purple-400, .to-purple-600 {
    background: linear-gradient(135deg, #192b7b 0%, #343137 100%) !important;
}

/* Fix date/time text visibility */
.text-sm {
    color: #9ca3af !important;
}