/* Theme Colors */
:root {
    /* Primary colors */
    --primary-color: #6a1b9a;         /* Dark purple */
    --primary-light: #9c4dcc;         /* Light purple */
    --primary-dark: #38006b;          /* Very dark purple */

    /* Secondary colors */
    --secondary-color: #4a148c;       /* Another dark purple */
    --secondary-light: #7c43bd;       /* Medium purple */
    --secondary-dark: #12005e;        /* Deep purple */

    /* Accent colors */
    --accent-color: #aa00ff;          /* Bright purple */
    --accent-light: #e254ff;          /* Light accent */
    --accent-dark: #7200ca;           /* Dark accent */

    /* Status colors */
    --success-color: #4caf50;         /* Green */
    --warning-color: #ff9800;         /* Orange */
    --danger-color: #f44336;          /* Red */
    --info-color: #2196f3;            /* Blue */

    /* Background colors */
    --bg-dark: #1a1a1a;               /* Dark background */
    --bg-medium: #2a2a2a;             /* Medium background */
    --bg-light: #333333;              /* Light background */

    /* Text colors */
    --text-primary: #f8f9fa;          /* Primary text */
    --text-secondary: #aaaaaa;        /* Secondary text */
    --text-muted: #777777;            /* Muted text */

    /* Border colors */
    --border-color: #444444;          /* Border color */
    --border-light: #555555;          /* Light border */

    /* Chart colors */
    --chart-color-1: var(--primary-light);
    --chart-color-2: var(--accent-color);
    --chart-color-3: var(--secondary-light);
    --chart-color-4: var(--primary-dark);
    --chart-color-5: var(--accent-light);
}

/* Global Button styles - Exclude Django Admin */
body:not(.django-admin) .btn,
body:not(.django-admin) button[type="submit"],
body:not(.django-admin) input[type="submit"],
body:not(.django-admin) .button,
body:not(.django-admin) a.btn,
body:not(.django-admin) a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    min-height: 36px;
    line-height: 1.5;
    margin: 2px;
}

body:not(.django-admin) .btn:hover,
body:not(.django-admin) button[type="submit"]:hover,
body:not(.django-admin) input[type="submit"]:hover,
body:not(.django-admin) .button:hover,
body:not(.django-admin) a.btn:hover,
body:not(.django-admin) a.button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

body:not(.django-admin) .btn:active,
body:not(.django-admin) button[type="submit"]:active,
body:not(.django-admin) input[type="submit"]:active,
body:not(.django-admin) .button:active,
body:not(.django-admin) a.btn:active,
body:not(.django-admin) a.button:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

/* Button variants - Exclude Django Admin */
body:not(.django-admin) .btn-primary,
body:not(.django-admin) button[type="submit"],
body:not(.django-admin) input[type="submit"] {
    background-color: var(--primary-color);
    color: white;
}

body:not(.django-admin) .btn-primary:hover,
body:not(.django-admin) button[type="submit"]:hover,
body:not(.django-admin) input[type="submit"]:hover {
    background-color: var(--primary-light);
    color: white;
}

body:not(.django-admin) .btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}

body:not(.django-admin) .btn-secondary:hover {
    background-color: var(--secondary-light);
    color: white;
}

body:not(.django-admin) .btn-success {
    background-color: var(--success-color);
    color: white;
}

body:not(.django-admin) .btn-success:hover {
    background-color: #5cb85c;
    color: white;
}

body:not(.django-admin) .btn-info {
    background-color: var(--info-color);
    color: white;
}

body:not(.django-admin) .btn-info:hover {
    background-color: #39a3f4;
    color: white;
}

body:not(.django-admin) .btn-warning {
    background-color: var(--warning-color);
    color: white;
}

body:not(.django-admin) .btn-warning:hover {
    background-color: #ffac33;
    color: white;
}

body:not(.django-admin) .btn-danger {
    background-color: var(--danger-color);
    color: white;
}

body:not(.django-admin) .btn-danger:hover {
    background-color: #f55a4e;
    color: white;
}

body:not(.django-admin) .btn-accent {
    background-color: var(--accent-color);
    color: white;
}

body:not(.django-admin) .btn-accent:hover {
    background-color: var(--accent-light);
    color: white;
}

/* Button sizes */
body:not(.django-admin) .btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    min-height: 28px;
}

body:not(.django-admin) .btn-lg {
    padding: 12px 20px;
    font-size: 16px;
    min-height: 44px;
}

/* Button with icon */
body:not(.django-admin) .btn i, 
body:not(.django-admin) .button i {
    margin-right: 6px;
}

/* Form elements */
body:not(.django-admin) input[type="text"],
body:not(.django-admin) input[type="email"],
body:not(.django-admin) input[type="password"],
body:not(.django-admin) input[type="date"],
body:not(.django-admin) input[type="datetime-local"],
body:not(.django-admin) input[type="file"],
body:not(.django-admin) select,
body:not(.django-admin) textarea {
    background-color: var(--bg-light);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px;
}

body:not(.django-admin) input[type="text"]:focus,
body:not(.django-admin) input[type="email"]:focus,
body:not(.django-admin) input[type="password"]:focus,
body:not(.django-admin) input[type="date"]:focus,
body:not(.django-admin) input[type="datetime-local"]:focus,
body:not(.django-admin) input[type="file"]:focus,
body:not(.django-admin) select:focus,
body:not(.django-admin) textarea:focus {
    border-color: var(--primary-light);
    outline: none;
    box-shadow: 0 0 0 2px rgba(156, 77, 204, 0.25);
}

/* Links */
body:not(.django-admin) a {
    color: var(--primary-light);
    text-decoration: none;
}

body:not(.django-admin) a:hover {
    color: var(--accent-light);
    text-decoration: underline;
}

/* Cards and containers */
body:not(.django-admin) .card, 
body:not(.django-admin) .form-section, 
body:not(.django-admin) .report-section {
    background-color: var(--bg-medium);
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

/* Tables */
body:not(.django-admin) table th {
    background-color: var(--secondary-dark);
}

body:not(.django-admin) table td, 
body:not(.django-admin) table th {
    border-bottom: 1px solid var(--border-color);
}

/* Status indicators */
body:not(.django-admin) .status-yes {
    color: var(--success-color);
}

body:not(.django-admin) .status-no {
    color: var(--danger-color);
}

/* Toolbar buttons */
body:not(.django-admin) .toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--secondary-color);
    color: white;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    min-height: 32px;
    margin: 2px;
}

body:not(.django-admin) .toolbar-btn:hover {
    background-color: var(--secondary-light);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.toolbar-btn:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

/* Tag buttons */
body:not(.django-admin) .tag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--primary-color);
    color: white;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    min-height: 32px;
    margin: 2px;
}

body:not(.django-admin) .tag-btn:hover {
    background-color: var(--primary-light);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

body:not(.django-admin) .tag-btn:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

body:not(.django-admin) .tracking-btn {
    background-color: var(--accent-color);
}

body:not(.django-admin) .tracking-btn:hover {
    background-color: var(--accent-light);
}

/* Dropdown menu */
body:not(.django-admin) .dropdown-content {
    background-color: var(--bg-medium);
    border: 1px solid var(--border-color);
}

body:not(.django-admin) .dropdown-content a:hover {
    background-color: var(--primary-dark);
}

body:not(.django-admin) .dropdown-divider {
    background-color: var(--border-color);
}

/* Overview cards */
body:not(.django-admin) .overview-card {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
}

body:not(.django-admin) .card-percentage {
    color: var(--accent-light);
}

/* Timeline */
body:not(.django-admin) .timeline-marker {
    background-color: var(--primary-color);
}

body:not(.django-admin) .timeline-marker.opened {
    background-color: var(--info-color);
}

body:not(.django-admin) .timeline-marker.clicked {
    background-color: var(--warning-color);
}

body:not(.django-admin) .timeline-marker.submitted {
    background-color: var(--success-color);
}

/* Modal */
body:not(.django-admin) .modal-content {
    background-color: var(--bg-medium);
    border: 1px solid var(--border-color);
}

/* Demo Status */
body:not(.django-admin) .demo-status {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    background-color: var(--bg-medium);
    border: 1px solid var(--border-color);
}

body:not(.django-admin) .demo-status.active {
    border-color: var(--accent-color);
}

body:not(.django-admin) .demo-status.inactive {
    border-color: var(--danger-color);
}

body:not(.django-admin) .demo-status-icon {
    font-size: 24px;
    margin-right: 15px;
    color: var(--accent-color);
}

body:not(.django-admin) .demo-status.inactive .demo-status-icon {
    color: var(--danger-color);
}

body:not(.django-admin) .demo-status-content {
    flex: 1;
}

body:not(.django-admin) .demo-status-content h4 {
    margin: 0 0 5px 0;
    color: var(--text-primary);
}

body:not(.django-admin) .demo-status-content p {
    margin: 0 0 10px 0;
    color: var(--text-secondary);
}

body:not(.django-admin) .demo-progress {
    height: 6px;
    background-color: var(--bg-light);
    border-radius: 3px;
    overflow: hidden;
}

body:not(.django-admin) .demo-progress-bar {
    height: 100%;
    background-color: var(--accent-color);
    border-radius: 3px;
}

/* Alerts */
body:not(.django-admin) .alert-success {
    background-color: rgba(76, 175, 80, 0.2);
    color: #81c784;
    border: 1px solid #81c784;
}

body:not(.django-admin) .alert-error, 
body:not(.django-admin) .alert-danger {
    background-color: rgba(244, 67, 54, 0.2);
    color: #e57373;
    border: 1px solid #e57373;
}

body:not(.django-admin) .alert-warning {
    background-color: rgba(255, 152, 0, 0.2);
    color: #ffb74d;
    border: 1px solid #ffb74d;
}

body:not(.django-admin) .alert-info {
    background-color: rgba(33, 150, 243, 0.2);
    color: #64b5f6;
    border: 1px solid #64b5f6;
}

/* Message toasts - positioned to not interfere with layout */
.messages-container {
    position: fixed;
    top: 20px;
    right: 180px;
    z-index: 1050;
    max-width: 400px;
}

.message-toast {
    padding-right: 40px !important;
    position: relative;
    word-wrap: break-word;
}

.message-toast .close {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.5;
    padding: 0;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    flex-shrink: 0;
}

.message-toast .close:hover {
    opacity: 0.75;
}

.message-toast {
    margin-bottom: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Global form element styling for dark theme */
body:not(.django-admin) select,
body:not(.django-admin) select option {
    background-color: #2a2a2a !important;
    color: #f8f9fa !important;
    border: 1px solid #444 !important;
}

body:not(.django-admin) select option:hover,
body:not(.django-admin) select option:checked {
    background-color: #6a1b9a !important;
    color: white !important;
}

body:not(.django-admin) input[type="text"],
body:not(.django-admin) input[type="email"],
body:not(.django-admin) input[type="date"],
body:not(.django-admin) input[type="number"],
body:not(.django-admin) input[type="password"],
body:not(.django-admin) textarea {
    background-color: rgba(255,255,255,0.1) !important;
    color: #f8f9fa !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}

body:not(.django-admin) input[type="text"]::placeholder,
body:not(.django-admin) input[type="email"]::placeholder,
body:not(.django-admin) input[type="password"]::placeholder,
body:not(.django-admin) textarea::placeholder {
    color: #aaa !important;
}

body:not(.django-admin) input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}


/* =============================================================
   LIGHT MODE
   Applied when <body> has class "light-mode"
   ============================================================= */

/* Override CSS custom properties */
body.light-mode {
    --bg-dark:        #f5f5f8;
    --bg-medium:      #ffffff;
    --bg-light:       #ebebf0;
    --text-primary:   #1a1a1a;
    --text-secondary: #555555;
    --text-muted:     #888888;
    --border-color:   #dddddd;
    --border-light:   #cccccc;
    --secondary-dark: #f0e8fa;
}

/* Body */
body.light-mode:not(.django-admin) {
    background-color: #f5f5f8;
    color: #1a1a1a;
}

/* Links */
body.light-mode:not(.django-admin) a:link,
body.light-mode:not(.django-admin) a:visited {
    color: #6a1b9a;
}
body.light-mode:not(.django-admin) a:hover {
    color: #38006b;
}

/* Nav bar — keep brand purple */
body.light-mode .mMenu {
    background-color: #6a1b9a;
}
body.light-mode .mMenu li a,
body.light-mode .mMenu li a:link,
body.light-mode .mMenu li a:visited {
    color: #ffffff !important;
}
body.light-mode .mMenu li a:hover,
body.light-mode .mMenu .dropbtn:hover {
    background-color: #4a0e7a;
    color: #ffffff !important;
}
body.light-mode .mobile-menu-toggle span {
    background-color: #ffffff;
}

/* Mobile expanded nav — white background only when open on mobile */
@media (max-width: 768px) {
    body.light-mode .nav-menu {
        background: #ffffff !important;
        border-bottom: 1px solid #dddddd;
    }

    /* Nav links must be dark on the white mobile nav background */
    body.light-mode .mMenu li a,
    body.light-mode .mMenu li a:link,
    body.light-mode .mMenu li a:visited,
    body.light-mode .mMenu .dropbtn {
        color: #1a1a1a !important;
    }

    body.light-mode .mMenu li a:hover,
    body.light-mode .mMenu .dropbtn:hover {
        background-color: #f5edff !important;
        color: #6a1b9a !important;
    }

    /* Mobile dropdown panels — light background in light mode */
    body.light-mode .dropdown-content {
        background-color: #f9f9fb !important;
    }

    body.light-mode .dropdown-content a,
    body.light-mode .dropdown-content a:link,
    body.light-mode .dropdown-content a:visited {
        color: #1a1a1a !important;
    }

    body.light-mode .dropdown-content a:hover {
        color: #6a1b9a !important;
        background-color: #f0e8fa !important;
    }
}
body.light-mode .mMenu li {
    border-bottom-color: #e0d0f0;
}

/* Footer */
body.light-mode #foot {
    background-color: #e8e8f0;
    color: #1a1a1a;
}
body.light-mode #foot a:link,
body.light-mode #foot a:visited {
    color: #6a1b9a;
}

/* Auth links (in header — stay white since header bg is dark purple on mobile / white on desktop) */
body.light-mode .top-left {
    color: #1a1a1a;
}
body.light-mode .auth-links a,
body.light-mode .auth-links a:link,
body.light-mode .auth-links a:visited {
    color: #1a1a1a !important;
}
body.light-mode .auth-links p {
    color: #1a1a1a;
}

/* Header background */
body.light-mode header {
    background-color: #f5f5f8;
}

/* Dropdown menus */
body.light-mode .dropdown-content {
    background-color: #ffffff !important;
    border: 1px solid #dddddd;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
body.light-mode .dropdown-content a,
body.light-mode .dropdown-content a:link,
body.light-mode .dropdown-content a:visited {
    color: #1a1a1a !important;
    border-bottom-color: #f0f0f0;
}
body.light-mode .dropdown-content a:hover {
    background-color: #f5edff;
    color: #6a1b9a !important;
    text-decoration: none;
}
body.light-mode .dropdown-divider {
    background-color: #dddddd;
}
body.light-mode .dropdown-section {
    color: #888888;
}

/* Mobile dropdown content */
body.light-mode .dropdown-content {
    background-color: #f9f9fb !important;
}

/* sMenu (secondary menu) */
body.light-mode:not(.django-admin) .sMenu {
    background-color: #f5f5f8 !important;
    color: #1a1a1a !important;
}

/* whiteLink utility class */
body.light-mode .whiteLink {
    background-color: transparent;
    color: #6a1b9a !important;
}

/* Cards and containers */
body.light-mode:not(.django-admin) .card,
body.light-mode:not(.django-admin) .form-section,
body.light-mode:not(.django-admin) .report-section {
    background-color: #ffffff;
    border-color: #dddddd;
    color: #1a1a1a;
}
body.light-mode:not(.django-admin) .overview-card {
    background-color: #ffffff;
    border-color: #dddddd;
    color: #1a1a1a;
}

/* Tables */
body.light-mode:not(.django-admin) table {
    color: #1a1a1a;
}
body.light-mode:not(.django-admin) table th {
    background-color: #6a1b9a;
    color: #ffffff;
}
body.light-mode:not(.django-admin) table td,
body.light-mode:not(.django-admin) table th {
    border-bottom-color: #dddddd;
}
body.light-mode:not(.django-admin) table tr {
    background-color: #ffffff;
    color: #1a1a1a;
}
body.light-mode:not(.django-admin) table tr:nth-child(even) {
    background-color: #f5f0fa;
}
body.light-mode:not(.django-admin) table tr:hover {
    background-color: #ede0f8;
}

/* Forms */
body.light-mode:not(.django-admin) select,
body.light-mode:not(.django-admin) select option {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #cccccc !important;
}
body.light-mode:not(.django-admin) select option:hover,
body.light-mode:not(.django-admin) select option:checked {
    background-color: #6a1b9a !important;
    color: #ffffff !important;
}
body.light-mode:not(.django-admin) input[type="text"],
body.light-mode:not(.django-admin) input[type="email"],
body.light-mode:not(.django-admin) input[type="date"],
body.light-mode:not(.django-admin) input[type="number"],
body.light-mode:not(.django-admin) input[type="password"],
body.light-mode:not(.django-admin) textarea {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #cccccc !important;
}
body.light-mode:not(.django-admin) input::placeholder,
body.light-mode:not(.django-admin) textarea::placeholder {
    color: #999999 !important;
}
body.light-mode:not(.django-admin) input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
}
body.light-mode:not(.django-admin) input[type="text"]:focus,
body.light-mode:not(.django-admin) input[type="email"]:focus,
body.light-mode:not(.django-admin) input[type="password"]:focus,
body.light-mode:not(.django-admin) textarea:focus {
    border-color: #6a1b9a !important;
    box-shadow: 0 0 0 2px rgba(106, 27, 154, 0.2) !important;
}

/* Labels and form text */
body.light-mode:not(.django-admin) label {
    color: #1a1a1a;
}
body.light-mode:not(.django-admin) p {
    color: #1a1a1a;
}
body.light-mode:not(.django-admin) h1,
body.light-mode:not(.django-admin) h2,
body.light-mode:not(.django-admin) h3,
body.light-mode:not(.django-admin) h4,
body.light-mode:not(.django-admin) h5,
body.light-mode:not(.django-admin) h6 {
    color: #1a1a1a;
}
body.light-mode:not(.django-admin) span {
    color: inherit;
}

/* Alerts */
body.light-mode:not(.django-admin) .alert-success {
    background-color: rgba(76, 175, 80, 0.1);
    color: #2e7d32;
    border-color: #4caf50;
}
body.light-mode:not(.django-admin) .alert-error,
body.light-mode:not(.django-admin) .alert-danger {
    background-color: rgba(244, 67, 54, 0.1);
    color: #c62828;
    border-color: #f44336;
}
body.light-mode:not(.django-admin) .alert-warning {
    background-color: rgba(255, 152, 0, 0.1);
    color: #e65100;
    border-color: #ff9800;
}
body.light-mode:not(.django-admin) .alert-info {
    background-color: rgba(33, 150, 243, 0.1);
    color: #1565c0;
    border-color: #2196f3;
}

/* News ticker */
body.light-mode .news-ticker {
    background: linear-gradient(135deg, #f0e8fa 0%, #e8d5f5 100%) !important;
    border-bottom: 2px solid #6a1b9a;
}
body.light-mode .news-item {
    color: #1a1a1a !important;
}
body.light-mode .news-item:hover {
    color: #6a1b9a !important;
}
body.light-mode .news-source {
    color: #6a1b9a;
}
body.light-mode .news-separator {
    color: #6a1b9a;
}

/* Demo status */
body.light-mode:not(.django-admin) .demo-status {
    background-color: #ffffff;
    border-color: #dddddd;
    color: #1a1a1a;
}
body.light-mode:not(.django-admin) .demo-status-content h4 {
    color: #1a1a1a;
}
body.light-mode:not(.django-admin) .demo-status-content p {
    color: #555555;
}
body.light-mode:not(.django-admin) .demo-progress {
    background-color: #ebebf0;
}

/* Modal */
body.light-mode:not(.django-admin) .modal-content {
    background-color: #ffffff;
    border-color: #dddddd;
    color: #1a1a1a;
}

/* Theme toggle button */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #ffffff;
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s ease, border-color 0.2s ease;
    text-decoration: none !important;
    vertical-align: middle;
    line-height: 1.6;
}
.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    text-decoration: none !important;
}
body.light-mode .theme-toggle-btn {
    border-color: rgba(0, 0, 0, 0.25);
    color: #1a1a1a;
}
body.light-mode .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.07);
}

/* Additional light mode fixes for text visibility */
body.light-mode:not(.django-admin) div,
body.light-mode:not(.django-admin) li,
body.light-mode:not(.django-admin) td,
body.light-mode:not(.django-admin) th,
body.light-mode:not(.django-admin) dt,
body.light-mode:not(.django-admin) dd {
    color: inherit;
}

/* Ensure all text in light mode is dark */
body.light-mode:not(.django-admin) * {
    color: inherit;
}

/* Reset body text color with higher specificity */
body.light-mode:not(.django-admin) {
    color: #1a1a1a !important;
}

/* Fix auth-links and other link colors for light mode */
body.light-mode .auth-links a,
body.light-mode .auth-links a:link,
body.light-mode .auth-links a:visited {
    color: #1a1a1a !important;
}

body.light-mode .auth-links a:hover {
    color: #6a1b9a !important;
}

/* Override .whiteLink for light mode */
body.light-mode .whiteLink {
    background-color: transparent !important;
    color: #6a1b9a !important;
}

body.light-mode .whiteLink:hover {
    color: #38006b !important;
    text-decoration: underline;
}

/* Ensure buttons remain visible */
body.light-mode:not(.django-admin) .btn-primary,
body.light-mode:not(.django-admin) button[type="submit"],
body.light-mode:not(.django-admin) input[type="submit"] {
    background-color: #6a1b9a !important;
    color: #ffffff !important;
}

body.light-mode:not(.django-admin) .btn-secondary {
    background-color: #f5f5f8 !important;
    color: #6a1b9a !important;
    border: 1px solid #6a1b9a !important;
}

/* Override base link colors from styles.css for light mode */
body.light-mode:not(.django-admin) a:link {
    color: #6a1b9a !important;
}

body.light-mode:not(.django-admin) a:visited {
    color: #6a1b9a !important;
}

body.light-mode:not(.django-admin) a:hover {
    color: #38006b !important;
}

/* Override navigation links specifically — desktop only (mobile handled separately) */
@media (min-width: 769px) {
    body.light-mode .mMenu li a,
    body.light-mode .mMenu li a:link,
    body.light-mode .mMenu li a:visited {
        color: #ffffff !important;
    }
}

body.light-mode .dropdown-content a {
    color: #1a1a1a !important;
}

/* Auth link styling for both modes */
.auth-link {
    color: #ffffff !important;
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
}

body.light-mode .auth-link {
    color: #1a1a1a !important;
}

body.light-mode .auth-link:hover {
    color: #6a1b9a !important;
}

/* Stronger dropdown link override for light mode */
body.light-mode .dropdown-content a,
body.light-mode .dropdown-content a:link,
body.light-mode .dropdown-content a:visited,
body.light-mode .dropdown a {
    color: #1a1a1a !important;
}

body.light-mode .dropdown-content a:hover {
    color: #6a1b9a !important;
    background-color: #f5edff !important;
}

/* Footer link overrides for light mode */
body.light-mode #foot {
    background-color: #f5f5f8;
    color: #1a1a1a;
    border-top: 1px solid #dddddd;
}

body.light-mode #foot a {
    color: #6a1b9a !important;
}

body.light-mode #foot a:hover {
    color: #38006b !important;
}

body.light-mode #foot p {
    color: #555555 !important;
}

/* ULTRA-specific fix for dropdown menu links in nav */
body.light-mode nav.mMenu .dropdown-content a,
body.light-mode .mMenu .dropdown-content a,
body.light-mode .mMenu li .dropdown-content a {
    color: #1a1a1a !important;
}

body.light-mode nav.mMenu .dropdown-content a:hover,
body.light-mode .mMenu .dropdown-content a:hover,
body.light-mode .mMenu li .dropdown-content a:hover {
    color: #6a1b9a !important;
    background-color: #f5edff !important;
}

/* -------------------------------------------------------
   Fix: button text color in light mode
   a:link overrides colour — re-assert button text colours
   with higher specificity + after the a:link rules
   ------------------------------------------------------- */
body.light-mode:not(.django-admin) a.btn,
body.light-mode:not(.django-admin) a.btn:link,
body.light-mode:not(.django-admin) a.btn:visited,
body.light-mode:not(.django-admin) a.button,
body.light-mode:not(.django-admin) a.button:link,
body.light-mode:not(.django-admin) a.button:visited {
    text-decoration: none !important;
}

body.light-mode:not(.django-admin) a.btn-primary,
body.light-mode:not(.django-admin) a.btn-primary:link,
body.light-mode:not(.django-admin) a.btn-primary:visited,
body.light-mode:not(.django-admin) a.btn-primary:hover {
    color: #ffffff !important;
    background-color: #6a1b9a !important;
}

body.light-mode:not(.django-admin) a.btn-secondary,
body.light-mode:not(.django-admin) a.btn-secondary:link,
body.light-mode:not(.django-admin) a.btn-secondary:visited {
    color: #6a1b9a !important;
    background-color: #f5f5f8 !important;
    border: 1px solid #6a1b9a !important;
}

body.light-mode:not(.django-admin) a.btn-secondary:hover {
    color: #ffffff !important;
    background-color: #6a1b9a !important;
}

/* -------------------------------------------------------
   Social footer icons (Font Awesome)
   Dark mode: neon glow  |  Light mode: brand colours
   ------------------------------------------------------- */
.social-footer-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 12px;
    text-decoration: none !important;
    transition: transform 0.2s ease;
}

.social-footer-link:hover {
    transform: scale(1.1);
    text-decoration: none !important;
}

.social-footer-icon {
    font-size: 50px;
    line-height: 1;
}

/* Dark mode — neon purple/cyan glow */
.social-footer-link .fa-facebook-f,
.social-footer-link .fa-facebook {
    color: #c084fc;
    text-shadow: 0 0 8px #a855f7, 0 0 18px #a855f7;
}

.social-footer-link .fa-discord {
    color: #818cf8;
    text-shadow: 0 0 8px #6366f1, 0 0 18px #6366f1;
}

.social-footer-link .fa-whatsapp {
    color: #34d399;
    text-shadow: 0 0 8px #10b981, 0 0 18px #10b981;
}

/* Light mode — standard brand colours, no glow */
body.light-mode .social-footer-link .fa-facebook-f,
body.light-mode .social-footer-link .fa-facebook {
    color: #1877F2;
    text-shadow: none;
}

body.light-mode .social-footer-link .fa-discord {
    color: #5865F2;
    text-shadow: none;
}

body.light-mode .social-footer-link .fa-whatsapp {
    color: #25D366;
    text-shadow: none;
}

/* ============================================================
   MOBILE FOOTER & MISC FIXES
   ============================================================ */
@media (max-width: 768px) {
    /* Shrink social footer icons so 3 fit nicely */
    .social-footer-link {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }

    .social-footer-icon {
        font-size: 28px;
    }

    /* Footer: stack social icons + privacy links on narrow screens */
    .footer-top-row {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }

    .footer-top-row > div:first-child {
        justify-content: center;
    }

    .footer-top-row > div:last-child {
        justify-content: center;
    }

    /* Messages container safe zone */
    .messages-container {
        right: 10px !important;
        left: 10px !important;
        max-width: calc(100% - 20px) !important;
        top: 10px !important;
    }

    /* Dropdown section labels */
    .dropdown-section {
        padding: 8px 20px 4px 20px !important;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #888888 !important;
        pointer-events: none;
    }
}

/* Light mode override for dropdown section labels */
body.light-mode .dropdown-section {
    color: #999999 !important;
}