/**
 * 🌙 DARK MODE PUBLIC CSS - FIXED
 * 
 * Properly sets NAVY BLUE background in dark mode
 * Works with helpdesk-navy-blue-theme.css
 * 
 * Dark Mode Background: Navy Blue Gradient (#001f3f)
 */
:root {
    --accent-primary: #2563eb;        /* blue-600 */
    --accent-primary-dark: #1d4ed8;   /* blue-700 */
    --accent-primary-soft: rgba(37, 99, 235, 0.15);
}

html.dark {
    --accent-primary: #60a5fa;        /* blue-400 */
    --accent-primary-dark: #3b82f6;   /* blue-500 */
    --accent-primary-soft: rgba(96, 165, 250, 0.18);
}

/* ============================================
   DARK MODE INITIALIZATION
   ============================================ */

html.dark1 {
   /* color-scheme: dark;*/
}

/* ============================================
   DARK MODE - BODY & MAIN BACKGROUNDS
   ============================================ */

html.dark body {
    background: linear-gradient(135deg, #0f172a 0%, #1a2942 50%, #0f1420 100%) !important;
    background-attachment: fixed !important;
    color: #f1f5f9 !important;
}

html.dark {
    background: linear-gradient(135deg, #0f172a 0%, #1a2942 50%, #0f1420 100%) !important;
    background-attachment: fixed !important;
}

/* ============================================
   DARK MODE - CONTAINER & CONTENT
   ============================================ */

html.dark .container {
    background: transparent !important;
}

html.dark .glass-effect {
    background: rgba(30, 41, 59, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(71, 85, 105, 0.3) !important;
}

html.dark main {
    background: transparent !important;
}

html.dark .content-area {
    background: transparent !important;
}

/* ============================================
   DARK MODE - CARDS & BOXES
   ============================================ */

html.dark .card,
html.dark .bg-white,
html.dark [class*="bg-white"] {
    background: rgba(30, 41, 59, 0.8) !important;
    border-color: rgba(71, 85, 105, 0.4) !important;
}

html.dark .rounded-lg,
html.dark .rounded-xl {
    background: rgba(30, 41, 59, 0.75) !important;
}

/* ============================================
   DARK MODE - HERO SECTION
   ============================================ */

html.dark .hero-section {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(26, 31, 58, 0.7) 100%) !important;
    border: 1px solid rgba(71, 85, 105, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}

html.dark .hero-section h1 {
    color: #ffffff !important;
    font-weight: 800 !important;
}

html.dark .hero-section p {
    color: #e2e8f0 !important;
    font-weight: 500 !important;
}

/* ============================================
   DARK MODE - ACTION CARDS
   ============================================ */

html.dark .action-card {
    background: linear-gradient(135deg, #1e293b 0%, #1a2942 100%) !important;
    border-color: rgba(71, 85, 105, 0.3) !important;
}

html.dark .action-card h2 {
    color: #ffffff !important;
    font-weight: 800 !important;
}

html.dark .action-card p {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
}

/* ============================================
   DARK MODE - TEXT COLORS
   ============================================ */

html.dark p,
html.dark span,
html.dark div {
    color: inherit !important;
}

html.dark .text-gray-600,
html.dark .text-gray-700,
html.dark .text-slate-600,
html.dark .text-slate-700 {
    color: #e2e8f0 !important;
    font-weight: 500 !important;
}

html.dark .text-gray-800,
html.dark .text-slate-800,
html.dark .text-slate-900 {
    color: #ffffff !important;
    font-weight: 600 !important;
}

html.dark .text-gray-500,
html.dark .text-slate-500 {
    color: #cbd5e1 !important;
}

/* ============================================
   DARK MODE - LINKS
   ============================================ */

html.dark a {
    color: #60a5fa !important;
    font-weight: 600 !important;
}

html.dark a:hover {
    color: #93c5fd !important;
}

/* ============================================
   DARK MODE - BORDERS
   ============================================ */

html.dark .border,
html.dark [class*="border"] {
    border-color: rgba(71, 85, 105, 0.3) !important;
}

html.dark .border-gray-200,
html.dark .border-slate-200 {
    border-color: rgba(71, 85, 105, 0.3) !important;
}

html.dark .border-gray-300,
html.dark .border-slate-300 {
    border-color: rgba(100, 116, 139, 0.3) !important;
}

/* ============================================
   DARK MODE - SHADOWS
   ============================================ */

html.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
}

html.dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6) !important;
}

/* ============================================
   DARK MODE - INPUTS & FORMS
   ============================================ */

html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark select,
html.dark textarea {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    background: #0f172a !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

/* ============================================
   DARK MODE - TABLES
   ============================================ */

html.dark table {
    background: rgba(30, 41, 59, 0.5) !important;
    border-color: rgba(71, 85, 105, 0.3) !important;
}

html.dark table thead {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(71, 85, 105, 0.3) !important;
}

html.dark table thead th {
    color: #cbd5e1 !important;
}

html.dark table tbody tr {
    border-color: rgba(71, 85, 105, 0.3) !important;
}

html.dark table tbody tr:hover {
    background: rgba(71, 85, 105, 0.2) !important;
}

html.dark table tbody td {
    color: #e2e8f0 !important;
}

/* ============================================
   DARK MODE - BUTTONS
   ============================================ */

html.dark button:not(.bg-gradient-to-r):not([class*="bg-blue"]):not([class*="bg-green"]) {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html.dark button:hover:not(.bg-gradient-to-r) {
    background: #475569 !important;
}

html.dark button:disabled {
    background: #1e293b !important;
    color: #64748b !important;
}

/* ============================================
   DARK MODE - SCROLLBAR
   ============================================ */

html.dark ::-webkit-scrollbar {
    width: 10px;
}

html.dark ::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
}

html.dark ::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.6);
    border-radius: 5px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.8);
}

/* ============================================
   DARK MODE - FEATURE BADGES
   ============================================ */

html.dark .feature-badge {
    background: rgba(30, 41, 59, 0.7) !important;
    border-color: rgba(71, 85, 105, 0.4) !important;
    color: #e2e8f0 !important;
}

html.dark .feature-badge:hover {
    border-color: rgba(96, 165, 250, 0.5) !important;
    background: rgba(50, 64, 84, 0.5) !important;
}

html.dark .feature-badge i {
    color: #60a5fa !important;
}

html.dark .feature-badge span {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ============================================
   DARK MODE - FOOTER
   ============================================ */

html.dark footer {
    background: rgba(30, 41, 59, 0.4) !important;
    border-top-color: rgba(71, 85, 105, 0.2) !important;
    color: #94a3af !important;
}

/* ============================================
   DARK MODE - ANIMATIONS & TRANSITIONS
   ============================================ */

html.dark * {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ============================================
   DARK MODE - FOCUS STATES
   ============================================ */

html.dark a:focus-visible,
html.dark button:focus-visible,
html.dark input:focus-visible {
    outline: 2px solid #60a5fa !important;
    outline-offset: 2px;
}

/* ============================================
   ENSURE DARK MODE FIXES
   ============================================ */

html.dark {
    background-color: #0f172a !important;
}

html.dark body {
    background-color: transparent !important;
}

/* Prevent light backgrounds from showing through */
html.dark .bg-gray-50,
html.dark .bg-slate-50,
html.dark .bg-white\/50,
html.dark .bg-white\/30 {
    background: rgba(30, 41, 59, 0.5) !important;
}

html.dark .bg-gray-100,
html.dark .bg-slate-100 {
    background: rgba(50, 64, 84, 0.5) !important;
}

html.dark .bg-gray-200,
html.dark .bg-slate-200 {
    background: rgba(71, 85, 105, 0.4) !important;
}

/* Ensure gradients work in dark mode */
html.dark [class*="bg-gradient"] {
    background-attachment: fixed !important;
}


/* ============================= */
/* SUBMIT TICKET FORM FIX */
/* ============================= */

/* Light mode */
.form-control,
.form-select,
textarea {
    background: #ffffff;
    color: #111827;
    border: 1px solid #d1d5db;
}

/* Dark mode */
html.dark .form-control,
html.dark .form-select,
html.dark textarea {
    background: #0f172a;
    color: #e5e7eb;
    border: 1px solid #334155;
}

html.dark .form-control::placeholder {
    color: #94a3b8;
}

html.dark .form-label i {
   
    color: rgb(59 129 246);
    font-size: 0.75rem;
}
html.dark .logo-text{
    background: linear-gradient(135deg, #fffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 0.35rem;
}
/* ============================= */
/* TRACK TICKET FIX */
/* ============================= */

html.dark .ticket-detail-box,
html.dark .ticket-info {
    background: #020617;
    color: #e5e7eb;
    border: 1px solid #1e293b;
}

html.dark .badge {
    background: #1e293b;
    color: #e5e7eb;
}

/* ===================================== */
/* SUBMIT TICKET THEME (LIGHT + DARK) */
/* ===================================== */

/* PAGE BACKGROUND */
body {
    background: #f8fafc;
    color: #0f172a;
}
html.dark body {
    background: radial-gradient(1200px circle at 20% 0%, #0b1220, #05070e);
    color: #e5e7eb;
}

/* MAIN CARD */
.form-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}
html.dark .form-container {
    background: #0b1220;
    border-color: #1f2937;
}

/* STEP INDICATOR */
.step-indicator {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}
html.dark .step-indicator {
    background: #0f172a;
    border-color: #1f2937;
}

/* TEXT */
.step-title,
.form-label {
    color: #0f172a;
}
.step-subtitle {
    color: #64748b;
}
html.dark .step-title,
html.dark .form-label {
    color: #e5e7eb;
}
html.dark .step-subtitle {
    color: #94a3b8;
}

/* INPUTS */
.form-input,
.form-select,
.form-textarea {
    background: #ffffff;
    color: #0f172a;
    border: 1.5px solid #e5e7eb;
}
html.dark .form-input,
html.dark .form-select,
html.dark .form-textarea {
    background: #0f172a;
    color: #e5e7eb;
    border-color: #334155;
}

/* FILE UPLOAD */
.file-upload-area {
    background: #f8fafc;
    border: 2px dashed #cbd5f5;
}
html.dark .file-upload-area {
    background: rgba(255,255,255,0.04);
    border-color: #334155;
}

/* SECONDARY BUTTON */
.btn-secondary {
    background: #ffffff;
    color: #334155;
    border: 1.5px solid #e5e7eb;
}
html.dark .btn-secondary {
    background: #020617;
    color: #e5e7eb;
    border-color: #334155;
}

/* SELECT2 */
html.dark .select2-selection--single {
    background: #0f172a !important;
    border-color: #334155 !important;
}
html.dark .select2-selection__rendered {
    color: #e5e7eb !important;
}
html.dark .select2-dropdown {
    background: #020617 !important;
    border-color: #334155 !important;
}

/* ============================================
   END DARK MODE CSS
   ============================================ */