/* ==========================================================================
   MSC FILE SERVICE - File Transfer & Tuning Portal
   Dark & Crimson Racing Aesthetics
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root, html.dark {
    color-scheme: dark;
    --bg-darker: #060709;
    --bg-card: #0e1015;
    --bg-card-hover: #151821;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-glow: rgba(239, 35, 60, 0.4);
    --msc-red: #ff1a2b;
    --msc-red-dark: #b80010;
    --msc-red-light: #ff4757;
    --text-muted: #94a3b8;
}

/* Base Form Styling for Dark Mode (Prevents browser white backgrounds & invisible text) */
html:not(.light) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html:not(.light) select,
html:not(.light) textarea {
    background-color: #0f1118 !important;
    color: #f1f5f9 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html:not(.light) select option {
    background-color: #0e1017 !important;
    color: #f1f5f9 !important;
}

html:not(.light) input:-webkit-autofill,
html:not(.light) input:-webkit-autofill:hover, 
html:not(.light) input:-webkit-autofill:focus,
html:not(.light) textarea:-webkit-autofill {
    -webkit-text-fill-color: #f1f5f9 !important;
    -webkit-box-shadow: 0 0 0px 1000px #0e1017 inset !important;
    box-shadow: 0 0 0px 1000px #0e1017 inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

body {
    background-color: var(--bg-darker);
    color: #e2e8f0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(229, 9, 20, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(229, 9, 20, 0.05) 0%, transparent 40%),
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
}

.font-heading {
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    letter-spacing: 0.03em;
}

.font-sport {
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.02em;
}

/* Carbon & Metallic Highlights */
.carbon-card {
    background: linear-gradient(145deg, #101218, #0a0b0e);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.carbon-card:hover {
    border-color: rgba(255, 26, 43, 0.3);
    box-shadow: 0 12px 35px -8px rgba(255, 26, 43, 0.15);
}

.red-glow {
    box-shadow: 0 0 25px rgba(255, 26, 43, 0.35);
}

.red-glow-border {
    border: 1px solid rgba(255, 26, 43, 0.6);
    box-shadow: 0 0 15px rgba(255, 26, 43, 0.2);
}

.btn-msc-primary {
    background: linear-gradient(135deg, #ff1a2b 0%, #b80010 100%);
    color: white;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(255, 26, 43, 0.35);
}

.btn-msc-primary:hover {
    background: linear-gradient(135deg, #ff3344 0%, #d60013 100%);
    box-shadow: 0 6px 20px rgba(255, 26, 43, 0.5);
    transform: translateY(-1px);
}

.btn-msc-primary:active {
    transform: translateY(1px);
}

.btn-msc-outline {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 26, 43, 0.4);
    color: #ff4d5a;
    transition: all 0.2s ease;
}

.btn-msc-outline:hover {
    background: rgba(255, 26, 43, 0.12);
    border-color: #ff1a2b;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(255, 26, 43, 0.25);
}

/* Service Card Checkbox style */
.service-option-card {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.service-option-card:hover {
    border-color: rgba(255, 26, 43, 0.4);
    background: rgba(255, 26, 43, 0.03);
}

.service-option-card.selected {
    border-color: #ff1a2b;
    background: linear-gradient(145deg, rgba(255, 26, 43, 0.12), rgba(255, 26, 43, 0.04));
    box-shadow: 0 0 18px rgba(255, 26, 43, 0.2);
}

/* Pulse animation for pending/processing */
@keyframes pulse-red {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.05);
    }
}

.animate-pulse-red {
    animation: pulse-red 2s infinite ease-in-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #08090c;
}

::-webkit-scrollbar-thumb {
    background: #252834;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff1a2b;
}

/* Status Badges */
.status-badge-pending {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.status-badge-processing {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.35);
}

.status-badge-completed {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.status-badge-revision {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

/* Modal backdrop animation */
.modal-overlay {
    background: rgba(3, 4, 6, 0.85);
    backdrop-filter: blur(10px);
}

/* Glass effect */
.glass-panel {
    background: rgba(16, 18, 25, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE RULES (TELEFON & TABLET OPTİMİZASYONU)
   ========================================================================== */
/* Touch Scrolling & No-Scrollbar Utility */
.no-scrollbar::-webkit-scrollbar,
.mobile-scroll-table::-webkit-scrollbar {
    display: none;
}
.no-scrollbar,
.mobile-scroll-table {
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

/* Tablet Optimizations (<= 1024px) */
@media (max-width: 1024px) {
    .main-nav-pill {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}

/* Mobile & Small Tablet Optimizations (<= 768px) */
@media (max-width: 768px) {
    /* Touch Target Heights for Form Controls */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        min-height: 42px;
        font-size: 14px !important; /* Prevents auto-zoom on iOS */
    }

    .btn-msc-primary,
    .btn-msc-outline {
        min-height: 42px;
    }

    /* Table columns don't crush into narrow unreadable stacks */
    .mobile-scroll-table table th,
    .mobile-scroll-table table td {
        white-space: nowrap;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Modal Cards responsive padding */
    .modal-overlay .carbon-card {
        padding: 1.25rem !important;
        border-radius: 1.25rem !important;
        max-height: 92vh !important;
    }

    /* Module and Service cards padding */
    .service-option-card {
        padding: 0.85rem !important;
    }
}

/* Smartphone Specific Optimizations (<= 640px) */
@media (max-width: 640px) {
    /* Floating Capsule Navbar on Phones */
    .main-nav-pill {
        height: 4.25rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Auth Screen adjustments on Mobile */
    #authScreen {
        min-height: auto !important;
        padding-top: 1rem !important;
        padding-bottom: 2rem !important;
    }
    #authScreen .carbon-card {
        padding: 1.25rem !important;
        border-radius: 1.5rem !important;
    }

    /* Toast Notifications on Mobile: centered/spanning width */
    #toastContainer {
        left: 1rem !important;
        right: 1rem !important;
        bottom: 1rem !important;
        max-width: none !important;
    }
    .app-toast {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Headings font sizes */
    .font-heading {
        letter-spacing: 0.01em;
    }

    /* Upload Screen sticky sidebar becomes natural block on mobile */
    #tabUploadSection .sticky {
        position: relative !important;
        top: 0 !important;
    }
}

/* ==========================================================================
   LIGHT THEME OVERRIDES (AÇIK TEMA - GÜNDÜZ MODU)
   ========================================================================== */
html.light {
    color-scheme: light;
    --bg-darker: #f4f6fb;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --border-color: #e2e8f0;
    --text-muted: #64748b;
}

html.light body {
    background-color: #f1f4f9 !important;
    color: #1e293b !important;
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(229, 9, 20, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(229, 9, 20, 0.03) 0%, transparent 40%),
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px) !important;
    background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px !important;
}

/* Header & Announcement: Header wrapper is always 100% transparent */
header,
html.light header {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

html.light .bg-gradient-to-r.from-red-950\/40 {
    background: linear-gradient(to right, #fee2e2, #fef2f2, #fee2e2) !important;
    border-bottom: 1px solid #fecaca !important;
}
html.light .bg-gradient-to-r.from-red-950\/40 span {
    color: #991b1b !important;
}
html.light .bg-gradient-to-r.from-red-950\/40 strong {
    color: #047857 !important;
}

/* Logo Text in Light Theme */
html.light header .font-heading.text-white {
    color: #0f172a !important;
}
html.light header p.text-slate-400 {
    color: #64748b !important;
}

/* Theme Toggle Button */
.theme-toggle-btn {
    transition: all 0.2s ease;
}
html.light .theme-toggle-btn {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}
html.light .theme-toggle-btn:hover {
    background: #e2e8f0 !important;
}

/* Navigation Switchers */
html.light #navPortalSwitcher,
html.light #navMobileSwitcher {
    background: #eef2f6 !important;
    border-color: #cbd5e1 !important;
}
html.light #navPortalSwitcher button:not(.bg-gradient-to-r),
html.light #navMobileSwitcher button:not(.bg-red-600) {
    color: #475569 !important;
    background: transparent !important;
}
html.light #navPortalSwitcher button:not(.bg-gradient-to-r):hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Wallet Pill & User Area in Light Mode */
html.light .nav-wallet-pill,
html.light #navLoggedInControls .bg-\[\#11131a\] {
    background: #ffffff !important;
    border-color: rgba(255, 26, 43, 0.25) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
html.light #navLoggedInControls #navUserName {
    color: #0f172a !important;
}
html.light #navLoggedInControls button[title="Güvenli Çıkış Yap"] {
    background: transparent !important;
    border: none !important;
    color: #dc2626 !important;
}
html.light #navLoggedInControls button[title="Güvenli Çıkış Yap"]:hover {
    background: transparent !important;
    color: #991b1b !important;
}

/* Cards & Panels */
html.light .carbon-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03) !important;
}
html.light .carbon-card:hover {
    border-color: rgba(255, 26, 43, 0.4) !important;
    box-shadow: 0 10px 25px -4px rgba(255, 26, 43, 0.12) !important;
}

html.light .glass-panel {
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid #e2e8f0 !important;
    backdrop-filter: blur(12px) !important;
}

/* All Dark Container Overrides in Light Mode */
html.light .bg-\[\#08090c\],
html.light .bg-\[\#0a0b0e\],
html.light .bg-\[\#0b0c10\],
html.light .bg-\[\#0b0d11\],
html.light .bg-\[\#0b0d13\],
html.light .bg-\[\#0c0d12\],
html.light .bg-\[\#0c0e14\],
html.light .bg-\[\#0c0e15\],
html.light .bg-\[\#0d0f17\],
html.light .bg-\[\#0e1015\],
html.light .bg-\[\#0e1016\],
html.light .bg-\[\#0e1017\],
html.light .bg-\[\#0f1118\],
html.light .bg-\[\#101218\],
html.light .bg-\[\#10121a\],
html.light .bg-\[\#11131a\],
html.light .bg-\[\#11131c\],
html.light .bg-\[\#12141a\],
html.light .bg-\[\#12141c\],
html.light .bg-\[\#12141d\],
html.light .bg-\[\#12141e\],
html.light .bg-\[\#12141f\],
html.light .bg-\[\#13151d\],
html.light .bg-\[\#13151e\],
html.light .bg-\[\#131520\],
html.light .bg-\[\#141620\],
html.light .bg-\[\#141622\],
html.light .bg-\[\#141722\],
html.light .bg-\[\#151722\],
html.light .bg-\[\#151821\],
html.light .bg-\[\#151824\],
html.light .bg-\[\#161820\],
html.light .bg-\[\#161824\],
html.light .bg-\[\#171a26\],
html.light .bg-\[\#181a26\],
html.light .bg-\[\#181a28\],
html.light .bg-\[\#181b29\],
html.light .bg-\[\#1a1d28\],
html.light .bg-\[\#1b1e2c\],
html.light .bg-\[\#252833\] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Service Options */
html.light .service-option-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}
html.light .service-option-card:hover {
    border-color: rgba(255, 26, 43, 0.5) !important;
    background: #fff5f5 !important;
}
html.light .service-option-card.selected {
    border-color: #ff1a2b !important;
    background: #fff0f1 !important;
    box-shadow: 0 2px 12px rgba(255, 26, 43, 0.15) !important;
}

/* Inputs, Selects & Forms */
html.light input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.light select,
html.light textarea {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html.light input::placeholder,
html.light textarea::placeholder {
    color: #94a3b8 !important;
}
html.light input:focus,
html.light select:focus,
html.light textarea:focus {
    border-color: #ff1a2b !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255, 26, 43, 0.12) !important;
}

html.light input[readonly] {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #b45309 !important;
}

/* Tables */
html.light table thead {
    background-color: #f1f5f9 !important;
    border-bottom: 2px solid #e2e8f0 !important;
}
html.light table thead th {
    color: #475569 !important;
}
html.light table tbody {
    border-color: #e2e8f0 !important;
}
html.light table tbody tr {
    border-bottom: 1px solid #f1f5f9 !important;
}
html.light table tbody tr:hover {
    background-color: #f8fafc !important;
}

/* Badges & Status */
html.light .status-badge-pending {
    background: #fef3c7 !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
}
html.light .status-badge-processing {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
}
html.light .status-badge-completed {
    background: #dcfce7 !important;
    color: #15803d !important;
    border-color: #bbf7d0 !important;
}
html.light .status-badge-revision {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border-color: #fecaca !important;
}

/* Modals */
html.light .modal-overlay {
    background: rgba(15, 23, 42, 0.65) !important;
}
html.light .modal-overlay .carbon-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Black backgrounds & dark gradients inside components in Light Mode */
html.light .bg-black,
html.light .bg-black\/5,
html.light .bg-black\/10,
html.light .bg-black\/15,
html.light .bg-black\/20,
html.light .bg-black\/30,
html.light .bg-black\/40,
html.light .bg-black\/50,
html.light .bg-black\/60,
html.light .bg-black\/70,
html.light .bg-black\/80,
html.light .bg-black\/90 {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

html.light [class*="from-\[\#0"],
html.light [class*="from-\[\#1"],
html.light [class*="to-\[\#0"],
html.light [class*="to-\[\#1"],
html.light [class*="via-\[\#0"],
html.light [class*="via-\[\#1"],
html.light [class*="from-black"],
html.light [class*="to-black"] {
    background-image: none !important;
    background-color: #f8fafc !important;
}

html.light select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* Text Overrides in Light Theme */
html.light .text-white {
    color: #0f172a !important;
}
html.light .text-slate-100 {
    color: #1e293b !important;
}
html.light .text-slate-200 {
    color: #334155 !important;
}
html.light .text-slate-300 {
    color: #475569 !important;
}
html.light .text-slate-400 {
    color: #64748b !important;
}

/* Borders */
html.light .border-white\/5,
html.light .border-white\/10,
html.light .border-white\/15,
html.light .border-white\/20,
html.light .divide-white\/5,
html.light .divide-white\/10 {
    border-color: #e2e8f0 !important;
}

/* Subtle background overrides */
html.light .bg-white\/5,
html.light .bg-white\/10 {
    background-color: #f1f5f9 !important;
}

/* EXCEPTIONS: Preserve white text inside primary buttons and solid colored badges */
html.light .btn-msc-primary {
    background: linear-gradient(135deg, #e11d48, #dc2626) !important;
    color: #ffffff !important;
    border-color: rgba(220, 38, 38, 0.5) !important;
}
html.light .btn-msc-primary,
html.light .btn-msc-primary *,
html.light .bg-red-600,
html.light .bg-red-600 *,
html.light .bg-emerald-600,
html.light .bg-emerald-600 *,
html.light .bg-blue-600,
html.light .bg-blue-600 *,
html.light .bg-rose-600,
html.light .bg-rose-600 *,
html.light [class*="bg-gradient-to-r from-red-600"]:not(.carbon-card):not(.studio-cat-card),
html.light [class*="bg-gradient-to-r from-red-600"]:not(.carbon-card):not(.studio-cat-card) * {
    color: #ffffff !important;
}

/* Studio Category Cards - DARK MODE */
html.dark .studio-cat-card,
:root:not(.light) .studio-cat-card {
    background: #0e1017;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
html.dark .studio-cat-card:hover,
:root:not(.light) .studio-cat-card:hover {
    background: #13151f;
    border-color: rgba(239, 68, 68, 0.4);
}
html.dark .studio-cat-card .cat-title,
:root:not(.light) .studio-cat-card .cat-title {
    color: #f1f5f9;
}
html.dark .studio-cat-card .cat-subtitle,
:root:not(.light) .studio-cat-card .cat-subtitle {
    color: #94a3b8;
}
html.dark .studio-cat-card .cat-badge,
:root:not(.light) .studio-cat-card .cat-badge {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
html.dark .studio-cat-card.active,
:root:not(.light) .studio-cat-card.active {
    background: linear-gradient(to right, rgba(220, 38, 38, 0.22), #161824, #10121a) !important;
    border: 2px solid #ef4444 !important;
    box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.35) !important;
}
html.dark .studio-cat-card.active .cat-title,
:root:not(.light) .studio-cat-card.active .cat-title {
    color: #ffffff !important;
    font-weight: 900 !important;
}
html.dark .studio-cat-card.active .cat-subtitle,
:root:not(.light) .studio-cat-card.active .cat-subtitle {
    color: #cbd5e1 !important;
}
html.dark .studio-cat-card.active .cat-badge,
:root:not(.light) .studio-cat-card.active .cat-badge {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
}

/* Studio Category Cards - LIGHT MODE */
html.light .studio-cat-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
html.light .studio-cat-card:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}
html.light .studio-cat-card .cat-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}
html.light .studio-cat-card .cat-subtitle {
    color: #475569 !important;
}
html.light .studio-cat-card .cat-badge {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}
html.light .studio-cat-card.active {
    background-color: #fef2f2 !important;
    background-image: none !important;
    border: 2px solid #dc2626 !important;
    box-shadow: 0 6px 20px -2px rgba(220, 38, 38, 0.22) !important;
}
html.light .studio-cat-card.active .cat-title,
html.light .studio-cat-card.active span.cat-title {
    color: #b91c1c !important;
    font-weight: 900 !important;
}
html.light .studio-cat-card.active .cat-subtitle,
html.light .studio-cat-card.active span.cat-subtitle {
    color: #991b1b !important;
    font-weight: 600 !important;
}
html.light .studio-cat-card.active .cat-badge {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
}
html.light .studio-cat-card.active .w-10.h-10 {
    background-color: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}
html.light .studio-cat-card.active .w-10.h-10 * {
    color: #ffffff !important;
}

/* Accent text colors in light mode */
html.light .text-yellow-400 {
    color: #d97706 !important;
}
html.light .text-emerald-400 {
    color: #059669 !important;
}
html.light .text-blue-400 {
    color: #2563eb !important;
}

/* Light Scrollbar */
html.light ::-webkit-scrollbar-track {
    background: #f1f5f9;
}
html.light ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}
html.light ::-webkit-scrollbar-thumb:hover {
    background: #ff1a2b;
}

/* ==========================================================================
   ECU & TCU MODULE STUDIO LIGHT THEME OVERRIDES
   ========================================================================== */
html.light #tabStudioSection .bg-\[\#0b0d11\],
html.light #tabStudioSection .bg-\[\#0e1016\],
html.light #tabStudioSection .bg-\[\#10121a\],
html.light #tabStudioSection .bg-\[\#0c0e14\] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}

html.light #tabStudioSection .bg-\[\#12141a\],
html.light #tabStudioSection .bg-\[\#151722\],
html.light #tabStudioSection .bg-\[\#161820\] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light #tabStudioSection .group.bg-gradient-to-b {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}
html.light #tabStudioSection .group.bg-gradient-to-b:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 10px 25px -4px rgba(245, 158, 11, 0.15) !important;
}

html.light #tabStudioSection .bg-\[\#252833\] {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

/* ==========================================================================
   FLOATING OVAL NAVBAR PILL (FROSTED GLASS EFFECT)
   ========================================================================== */
.main-nav-pill {
    background-color: rgba(11, 12, 17, 0.72) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(239, 68, 68, 0.15) !important;
}

html.light .main-nav-pill {
    background-color: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 0 20px rgba(255, 26, 43, 0.12) !important;
}

/* ==========================================================================
   GLOBAL SITE WATERMARK PATTERN (mscfile service)
   ========================================================================== */
.site-watermark-bg,
.auth-watermark-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background-repeat: repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='220' height='100' viewBox='0 0 220 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='20' y='42' fill='%23ffffff' fill-opacity='0.07' font-family='Rajdhani, Orbitron, -apple-system, BlinkMacSystemFont, monospace, sans-serif' font-size='11' font-weight='700' letter-spacing='1.5' transform='rotate(-20 20 42)'%3Emscfile%20service%3C/text%3E%3Ctext x='130' y='92' fill='%23ffffff' fill-opacity='0.07' font-family='Rajdhani, Orbitron, -apple-system, BlinkMacSystemFont, monospace, sans-serif' font-size='11' font-weight='700' letter-spacing='1.5' transform='rotate(-20 130 92)'%3Emscfile%20service%3C/text%3E%3C/svg%3E") !important;
}

html.light .site-watermark-bg,
html.light .auth-watermark-bg {
    background-image: url("data:image/svg+xml,%3Csvg width='220' height='100' viewBox='0 0 220 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='20' y='42' fill='%230f172a' fill-opacity='0.12' font-family='Rajdhani, Orbitron, -apple-system, BlinkMacSystemFont, monospace, sans-serif' font-size='11' font-weight='700' letter-spacing='1.5' transform='rotate(-20 20 42)'%3Emscfile%20service%3C/text%3E%3Ctext x='130' y='92' fill='%230f172a' fill-opacity='0.12' font-family='Rajdhani, Orbitron, -apple-system, BlinkMacSystemFont, monospace, sans-serif' font-size='11' font-weight='700' letter-spacing='1.5' transform='rotate(-20 130 92)'%3Emscfile%20service%3C/text%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   STANDALONE TRANSPARENT AUTH LOGO (NO BOX, TRANSPARENT BG)
   ========================================================================== */
.auth-logo-dark {
    display: block !important;
}
.auth-logo-light {
    display: none !important;
}
html.light .auth-logo-dark {
    display: none !important;
}
html.light .auth-logo-light {
    display: block !important;
}

/* ==========================================================================
   AUTH SCREEN TRUST BADGES (Checksum, 7/24, Immo)
   ========================================================================== */
.auth-trust-box {
    background-color: #0e1017;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.auth-trust-box .trust-box-title {
    color: #ffffff;
}
.auth-trust-box .trust-box-sub {
    color: #94a3b8;
}

html.light .auth-trust-box {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
html.light .auth-trust-box:hover {
    border-color: rgba(255, 26, 43, 0.4) !important;
    box-shadow: 0 8px 24px -4px rgba(255, 26, 43, 0.12) !important;
}
html.light .auth-trust-box .trust-box-title {
    color: #0f172a !important;
}
html.light .auth-trust-box .trust-box-sub {
    color: #64748b !important;
}

/* ==========================================================================
   SITE FOOTER (TÜM HAKLARI SAKLIDIR ÇUBUĞU)
   ========================================================================== */
.site-footer {
    background-color: #07080a;
    border-color: rgba(255, 255, 255, 0.06);
}
.site-footer .footer-brand {
    color: #ffffff;
}
.site-footer .footer-copy {
    color: #64748b;
}

html.light .site-footer {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03) !important;
}
html.light .site-footer .footer-brand {
    color: #0f172a !important;
}
html.light .site-footer .footer-copy {
    color: #64748b !important;
}

/* Auth Tabs Inactive Button in Light Mode */
html.light #tabAuthLoginBtn:not(.bg-gradient-to-r),
html.light #tabAuthRegisterBtn:not(.bg-gradient-to-r) {
    color: #475569 !important;
}
html.light #tabAuthLoginBtn:not(.bg-gradient-to-r):hover,
html.light #tabAuthRegisterBtn:not(.bg-gradient-to-r):hover {
    color: #0f172a !important;
}

/* ==========================================================================
   TOAST NOTIFICATION SYSTEM (DARK & LIGHT THEME)
   ========================================================================== */
.app-toast {
    background-color: rgba(14, 17, 24, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 0, 0, 0.3);
}
.app-toast .toast-message {
    color: #f1f5f9;
}
.app-toast .toast-close {
    color: #94a3b8;
}
.app-toast .toast-close:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Dark: Success */
.app-toast-success {
    border-color: rgba(16, 185, 129, 0.45);
    background-color: rgba(13, 24, 18, 0.95);
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.2), 0 0 15px rgba(0, 0, 0, 0.5);
}
.app-toast-success .toast-icon-wrap {
    background-color: rgba(16, 185, 129, 0.18);
    color: #34d399;
}

/* Dark: Error */
.app-toast-error {
    border-color: rgba(239, 68, 68, 0.45);
    background-color: rgba(26, 13, 16, 0.95);
    box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.2), 0 0 15px rgba(0, 0, 0, 0.5);
}
.app-toast-error .toast-icon-wrap {
    background-color: rgba(239, 68, 68, 0.18);
    color: #f87171;
}

/* Dark: Info */
.app-toast-info {
    border-color: rgba(59, 130, 246, 0.45);
    background-color: rgba(13, 20, 32, 0.95);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.2), 0 0 15px rgba(0, 0, 0, 0.5);
}
.app-toast-info .toast-icon-wrap {
    background-color: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
}

/* Dark: Warning */
.app-toast-warning {
    border-color: rgba(245, 158, 11, 0.45);
    background-color: rgba(28, 22, 13, 0.95);
    box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.2), 0 0 15px rgba(0, 0, 0, 0.5);
}
.app-toast-warning .toast-icon-wrap {
    background-color: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}

/* --------------------------------------------------------------------------
   LIGHT THEME TOAST OVERRIDES (PURE WHITE CARD, CLEAN VIBRANT BORDERS)
   -------------------------------------------------------------------------- */
html.light .app-toast {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.06) !important;
}
html.light .app-toast .toast-message {
    color: #0f172a !important;
    font-weight: 500 !important;
}
html.light .app-toast .toast-close {
    color: #64748b !important;
}
html.light .app-toast .toast-close:hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

/* Light: Success */
html.light .app-toast-success {
    background-color: #ffffff !important;
    border-color: #a7f3d0 !important;
    border-left: 4px solid #10b981 !important;
    box-shadow: 0 10px 30px -5px rgba(16, 185, 129, 0.18), 0 4px 10px -2px rgba(0, 0, 0, 0.05) !important;
}
html.light .app-toast-success .toast-icon-wrap {
    background-color: #ecfdf5 !important;
    color: #059669 !important;
}

/* Light: Error */
html.light .app-toast-error {
    background-color: #ffffff !important;
    border-color: #fecaca !important;
    border-left: 4px solid #ef4444 !important;
    box-shadow: 0 10px 30px -5px rgba(239, 68, 68, 0.18), 0 4px 10px -2px rgba(0, 0, 0, 0.05) !important;
}
html.light .app-toast-error .toast-icon-wrap {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

/* Light: Info */
html.light .app-toast-info {
    background-color: #ffffff !important;
    border-color: #bfdbfe !important;
    border-left: 4px solid #3b82f6 !important;
    box-shadow: 0 10px 30px -5px rgba(59, 130, 246, 0.18), 0 4px 10px -2px rgba(0, 0, 0, 0.05) !important;
}
html.light .app-toast-info .toast-icon-wrap {
    background-color: #eff6ff !important;
    color: #2563eb !important;
}

/* Light: Warning */
html.light .app-toast-warning {
    background-color: #ffffff !important;
    border-color: #fde68a !important;
    border-left: 4px solid #f59e0b !important;
    box-shadow: 0 10px 30px -5px rgba(245, 158, 11, 0.18), 0 4px 10px -2px rgba(0, 0, 0, 0.05) !important;
}
html.light .app-toast-warning .toast-icon-wrap {
    background-color: #fffbeb !important;
    color: #d97706 !important;
}

/* ==========================================================================
   DYNAMIC AUTOMOTIVE & CYBER TUNING ANIMATION SUITE
   ========================================================================== */

/* 1. Ambient Background Glowing Orbs */
.ambient-glow-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.38;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.5s ease;
}

.ambient-glow-1 {
    top: -12%;
    right: -6%;
    width: 580px;
    height: 580px;
    background: radial-gradient(circle, rgba(255, 26, 43, 0.5) 0%, rgba(184, 0, 16, 0.22) 55%, transparent 80%);
    animation: orbFloat1 20s ease-in-out infinite alternate;
}

.ambient-glow-2 {
    bottom: -15%;
    left: -8%;
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.38) 0%, rgba(245, 158, 11, 0.16) 50%, transparent 80%);
    animation: orbFloat2 24s ease-in-out infinite alternate;
}

html.light .ambient-glow-orb {
    opacity: 0.14;
    filter: blur(140px);
}

@keyframes orbFloat1 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-50px, 70px) scale(1.12); }
    100% { transform: translate(35px, -35px) scale(0.95); }
}

@keyframes orbFloat2 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(70px, -50px) scale(1.08); }
    100% { transform: translate(-35px, 35px) scale(0.92); }
}

/* 2. Laser Scan Bar for ECU / File Dropzones */
.laser-scanner {
    position: absolute;
    left: 4px;
    right: 4px;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 26, 43, 0.6) 20%, 
        #ff1a2b 50%, 
        rgba(255, 26, 43, 0.6) 80%, 
        transparent 100%
    );
    box-shadow: 0 0 14px 2px rgba(255, 26, 43, 0.85), 0 0 4px rgba(255, 255, 255, 0.9);
    animation: laserScanSweep 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    pointer-events: none;
    z-index: 10;
}

@keyframes laserScanSweep {
    0% {
        top: 2%;
        opacity: 0;
    }
    12% {
        opacity: 0.95;
    }
    88% {
        opacity: 0.95;
    }
    100% {
        top: 96%;
        opacity: 0;
    }
}

/* 3. Smooth Tab Entrance Glide */
@keyframes tabEnterGlide {
    0% {
        opacity: 0;
        transform: translateY(14px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-enter {
    animation: tabEnterGlide 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* 4. Staggered Fade In Up for Cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.1s; }
.delay-3 { animation-delay: 0.15s; }
.delay-4 { animation-delay: 0.2s; }
.delay-5 { animation-delay: 0.25s; }

/* 5. Floating Animation for Logos & Trust Elements */
@keyframes floatingSmooth {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.animate-float {
    animation: floatingSmooth 4.5s ease-in-out infinite;
}

/* 6. Neon Breathing Pulse for Main Auth / Highlight Cards */
@keyframes neonPulseGlow {
    0%, 100% {
        border-color: rgba(255, 26, 43, 0.35);
        box-shadow: 0 0 25px rgba(255, 26, 43, 0.25), 0 10px 30px -10px rgba(0, 0, 0, 0.7);
    }
    50% {
        border-color: rgba(255, 71, 87, 0.65);
        box-shadow: 0 0 35px rgba(255, 26, 43, 0.4), 0 0 12px rgba(255, 71, 87, 0.3), 0 12px 35px -8px rgba(255, 26, 43, 0.25);
    }
}

.neon-pulse-card {
    animation: neonPulseGlow 3.6s ease-in-out infinite;
}

/* 7. Button Shimmer Sweep & Interactive Tap Ripple */
.btn-msc-primary,
.btn-msc-outline {
    position: relative;
    overflow: hidden;
    will-change: transform;
}

.btn-msc-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.28), 
        transparent
    );
    transform: skewX(-22deg);
    pointer-events: none;
    animation: buttonShimmer 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes buttonShimmer {
    0% { left: -120%; }
    22%, 100% { left: 220%; }
}

.btn-msc-primary:active,
.btn-msc-outline:active {
    transform: scale(0.97) !important;
}

/* 8. Radar Pulse Rings for Live Status */
.radar-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.radar-ring::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    animation: radarRipple 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    pointer-events: none;
}

.radar-ring-red::before {
    background-color: rgba(239, 68, 68, 0.6);
}

.radar-ring-green::before {
    background-color: rgba(34, 197, 94, 0.6);
}

.radar-ring-amber::before {
    background-color: rgba(245, 158, 11, 0.6);
}

@keyframes radarRipple {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(2.6);
        opacity: 0;
    }
}

/* 9. Card Lift Hover with Subtle Tilt */
.carbon-card {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.25s ease, 
                box-shadow 0.28s ease !important;
}

.carbon-card:hover {
    transform: translateY(-3px);
}

/* 10. High-End Spring Modal Entrance */
@keyframes modalSpringIn {
    0% {
        opacity: 0;
        transform: scale(0.93) translateY(16px);
    }
    65% {
        transform: scale(1.01) translateY(-2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-overlay:not(.hidden) .carbon-card {
    animation: modalSpringIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 11. Subtle Number Spin / Flash Effect */
@keyframes numberPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); color: #ff4757; }
    100% { transform: scale(1); }
}

.number-pop {
    animation: numberPop 0.35s ease-out;
}

/* 12. Glow Pill Hover on Main Nav */
.main-nav-pill {
    transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease !important;
}

.main-nav-pill:hover {
    border-color: rgba(255, 26, 43, 0.35) !important;
    box-shadow: 0 10px 30px -5px rgba(255, 26, 43, 0.15) !important;
}



/* GLOBAL MODAL & VISIBILITY ENFORCEMENT */
.hidden {
    display: none !important;
}

/* Field Validation Error & Shake Effects */
@keyframes fieldShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.animate-shake {
    animation: fieldShake 0.45s ease-in-out;
}

.field-error-highlight {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4) !important;
}

/* ==========================================================================
   7/24 CANLI DESTEK & LIVE CHAT WIDGET STYLES
   ========================================================================== */
#mscLiveSupportBtn {
    box-shadow: 0 10px 35px -5px rgba(220, 38, 38, 0.35), 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

#mscLiveChatDrawer {
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 40px -10px rgba(220, 38, 38, 0.25) !important;
}

/* Light Theme Overrides for Live Chat */
html.light #mscLiveSupportBtn {
    background: #ffffff !important;
    border-color: #f87171 !important;
    box-shadow: 0 10px 30px -5px rgba(220, 38, 38, 0.2), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

html.light #mscLiveSupportBtn span.text-white {
    color: #0f172a !important;
}

html.light #mscLiveChatDrawer {
    background: #ffffff !important;
    border-color: #fecaca !important;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.15), 0 0 30px -5px rgba(220, 38, 38, 0.1) !important;
}

html.light #mscLiveChatDrawer > div:first-child {
    background: linear-gradient(135deg, #fff1f2, #ffffff) !important;
    border-bottom: 1px solid #fee2e2 !important;
}

html.light #mscLiveChatDrawer h3 {
    color: #0f172a !important;
}

html.light #mscLiveChatDrawer .bg-\[\#12141f\] {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html.light #mscLiveChatDrawer .bg-\[\#181a28\] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
}

html.light #mscLiveChatDrawer .bg-\[\#181a28\]:hover {
    background-color: #fff1f2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}

html.light #liveChatMessagesArea {
    background-color: #f8fafc !important;
}

html.light #liveChatMessagesArea .bg-\[\#161824\] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light #liveChatMessagesArea .bg-\[\#161824\] p {
    color: #334155 !important;
}

html.light #liveChatMessagesArea .bg-\[\#1b1e2c\] {
    background-color: #ffffff !important;
    border: 1px solid #fee2e2 !important;
    box-shadow: 0 4px 15px -3px rgba(220, 38, 38, 0.08) !important;
}

html.light #liveChatMessagesArea .bg-\[\#1b1e2c\] p {
    color: #0f172a !important;
}

html.light #mscLiveChatDrawer .bg-\[\#11131c\] {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}

html.light #liveChatTextarea {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html.light #liveChatTextarea:focus {
    border-color: #ef4444 !important;
    background-color: #ffffff !important;
}

/* Light Theme Overrides for Admin Live Support Tab */
html.light #adminSectionSupport .carbon-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light #adminSectionSupport .bg-\[\#0e1017\],
html.light #adminSectionSupport .bg-\[\#0c0e15\] {
    background-color: #ffffff !important;
}

html.light #adminSectionSupport .bg-\[\#12141f\],
html.light #adminSectionSupport .bg-\[\#10121a\] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light #adminSectionSupport .bg-\[\#0b0d13\] {
    background-color: #f8fafc !important;
}

html.light #adminChatMessagesBody .bg-\[\#171a26\] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light #adminChatMessagesBody .bg-\[\#171a26\] p {
    color: #1e293b !important;
}

html.light #adminReplyInput {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Light Theme Overrides for User Profile Modal */
html.light #userProfileModal .carbon-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html.light #userProfileModal .bg-\[\#0b0c10\],
html.light #userProfileModal .bg-white\/\[0\.02\] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light #userProfileModal h3,
html.light #userProfileModal label,
html.light #userProfileModal .text-white {
    color: #0f172a !important;
}

html.light #userProfileModal .text-slate-400,
html.light #userProfileModal .text-slate-300 {
    color: #475569 !important;
}

/* Light Theme Overrides for Admin & Customer Audit Logs */
html.light #adminSectionLogs .carbon-card,
html.light #tabLogsSection .carbon-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light #adminSectionLogs .bg-\[\#0f1118\],
html.light #adminSectionLogs .bg-\[\#141722\],
html.light #tabLogsSection .bg-\[\#0f1118\],
html.light #tabLogsSection .bg-\[\#141722\] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html.light #adminSectionLogs table thead tr,
html.light #tabLogsSection table thead tr {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

html.light #adminSectionLogs table thead th,
html.light #tabLogsSection table thead th {
    color: #475569 !important;
}

html.light #adminSectionLogs table tbody tr,
html.light #tabLogsSection table tbody tr {
    border-color: #f1f5f9 !important;
}

html.light #adminSectionLogs table tbody tr:hover,
html.light #tabLogsSection table tbody tr:hover {
    background-color: #f8fafc !important;
}

html.light #adminSectionLogs td .text-white,
html.light #adminSectionLogs td .text-slate-100,
html.light #tabLogsSection td .text-white,
html.light #tabLogsSection td .text-slate-100 {
    color: #0f172a !important;
}

html.light #adminSectionLogs td .text-slate-400,
html.light #tabLogsSection td .text-slate-400 {
    color: #64748b !important;
}

html.light #adminLogDetailModal .carbon-card,
html.light #custLogDetailModal .carbon-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html.light #adminLogDetailModal .bg-white\/\[0\.02\],
html.light #custLogDetailModal .bg-white\/\[0\.02\] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light #adminLogDetailModal h3,
html.light #adminLogDetailModal h4,
html.light #adminLogDetailModal .text-white,
html.light #custLogDetailModal h3,
html.light #custLogDetailModal h4,
html.light #custLogDetailModal .text-white {
    color: #0f172a !important;
}

html.light #adminLogDetailModal .text-slate-300,
html.light #adminLogDetailModal .text-slate-400,
html.light #custLogDetailModal .text-slate-300,
html.light #custLogDetailModal .text-slate-400 {
    color: #475569 !important;
}

/* ==========================================================================
   PASSWORD VISIBILITY TOGGLE BUTTONS (Theme Compatible)
   ========================================================================== */
.password-toggle-btn {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}
.password-toggle-btn:hover {
    transform: translateY(-50%) scale(1.08);
}
.password-toggle-btn:active {
    transform: translateY(-50%) scale(0.95);
}
html.light .password-toggle-btn {
    color: #64748b !important;
}
html.light .password-toggle-btn:hover {
    color: #0f172a !important;
    background-color: #e2e8f0 !important;
}
html.light .password-toggle-btn.text-red-400 {
    color: #dc2626 !important;
    background-color: #fee2e2 !important;
}

/* ==========================================================================
   SUB-NAVIGATION SCROLLER ARROWS
   ========================================================================== */
.nav-scroll-btn {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    z-index: 10;
    cursor: pointer;
}
.nav-scroll-btn:hover {
    transform: scale(1.08);
}
.nav-scroll-btn:active {
    transform: scale(0.92);
}
html.dark .nav-scroll-btn {
    background-color: #151822;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
html.dark .nav-scroll-btn:hover {
    background-color: #dc2626 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.5) !important;
}
html.light .nav-scroll-btn {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}
html.light .nav-scroll-btn:hover {
    background-color: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4) !important;
}

/* ==========================================================================
   ANIMATED SUCCESS CHECKMARK (DOSYANIZ GÖNDERİLDİ MODAL)
   ========================================================================== */
@keyframes checkmarkPop {
    0% { transform: scale(0.7); opacity: 0; }
    60% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes checkmarkPulseRing {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.animate-checkmark-modal {
    animation: checkmarkPop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-checkmark-ring {
    animation: checkmarkPulseRing 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* ==========================================================================
   GOOGLE AUTHENTICATOR (2FA TOTP) MODAL & LIGHT THEME OVERRIDES
   ========================================================================== */
@keyframes mscOtpShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.animate-shake {
    animation: mscOtpShake 0.35s ease-in-out;
}

html.light #mscTotpAuthModal {
    background-color: rgba(15, 23, 42, 0.65) !important;
}

html.light #mscTotpAuthModal .msc-totp-card {
    background: #ffffff !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.18) !important;
}

html.light #mscTotpAuthModal .bg-\[\#0d0f17\],
html.light #mscTotpAuthModal .bg-\[\#0c0e15\] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light #mscTotpAuthModal .text-amber-400 {
    color: #b45309 !important;
}

html.light #mscTotpAuthModal .msc-otp-digit,
html.light #mscTotpAuthModal #mscBackupCodeInput {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html.light #mscTotpAuthModal .msc-otp-digit:focus,
html.light #mscTotpAuthModal #mscBackupCodeInput:focus {
    background-color: #ffffff !important;
    border-color: #dc2626 !important;
}