/* ============================================
   THEME SYSTEM - Light & Dark Mode
   ============================================ */

/* Light Mode (Default) */
:root {
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8f9fa;
    --bg-dark-section: #3a3a3a;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --text-on-dark: #ffffff;
    --border-color: #dee2e6;
    --shadow: rgba(0,0,0,0.1);
    --shadow-hover: rgba(0,0,0,0.2);
    
    /* Header gradient - stays same in light mode */
    --header-gradient-start: #667eea;
    --header-gradient-end: #764ba2;
    --header-text: #ffffff;
    
    /* Component backgrounds */
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --table-bg: #ffffff;
    --table-hover: #f8f9fa;
    --modal-bg: #ffffff;
    --modal-overlay: rgba(0,0,0,0.5);
    
    /* Button colors */
    --btn-primary-bg: #667eea;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #6c757d;
    --btn-secondary-text: #ffffff;
    --btn-success-bg: #28a745;
    --btn-success-text: #ffffff;
    --btn-danger-bg: #dc3545;
    --btn-danger-text: #ffffff;
    --btn-warning-bg: #ffc107;
    --btn-warning-text: #212529;
    --btn-info-bg: #17a2b8;
    --btn-info-text: #ffffff;
    
    /* Status colors remain same in both modes */
    --success-bg: #d4edda;
    --success-text: #155724;
    --success-border: #28a745;
    
    --error-bg: #f8d7da;
    --error-text: #721c24;
    --error-border: #dc3545;
    
    --warning-bg: #fff3cd;
    --warning-text: #856404;
    --warning-border: #ffc107;
    
    --info-bg: #d1ecf1;
    --info-text: #0c5460;
    --info-border: #17a2b8;
    
    /* Bulk actions bar */
    --bulk-bar-bg: #f8f9fa;
    --bulk-bar-border: #dee2e6;
}

/* Dark Mode */
[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --bg-dark-section: #2d2d2d;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-tertiary: #808080;
    --text-on-dark: #e0e0e0;
    --border-color: #404040;
    --shadow: rgba(0,0,0,0.3);
    --shadow-hover: rgba(0,0,0,0.5);
    
    /* Header in dark mode - darker purple gradient */
    --header-gradient-start: #4a5ba8;
    --header-gradient-end: #5a3b7a;
    --header-text: #e0e0e0;
    
    /* Component backgrounds */
    --card-bg: #2d2d2d;
    --input-bg: #3a3a3a;
    --table-bg: #2d2d2d;
    --table-hover: #3a3a3a;
    --modal-bg: #2d2d2d;
    --modal-overlay: rgba(0,0,0,0.8);
    
    /* Button colors for dark mode */
    --btn-primary-bg: #5a6fd8;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #5a5a5a;
    --btn-secondary-text: #e0e0e0;
    --btn-success-bg: #2ecc71;
    --btn-success-text: #ffffff;
    --btn-danger-bg: #e74c3c;
    --btn-danger-text: #ffffff;
    --btn-warning-bg: #f39c12;
    --btn-warning-text: #000000;
    --btn-info-bg: #3498db;
    --btn-info-text: #ffffff;
    
    /* Status colors adjusted for dark mode */
    --success-bg: #1e4620;
    --success-text: #7dda82;
    --success-border: #28a745;
    
    --error-bg: #4a1f1f;
    --error-text: #f8a8a8;
    --error-border: #dc3545;
    
    --warning-bg: #4a3f1f;
    --warning-text: #ffd966;
    --warning-border: #ffc107;
    
    --info-bg: #1f3f4a;
    --info-text: #66d9f8;
    --info-border: #17a2b8;
    
    /* Bulk actions bar */
    --bulk-bar-bg: #3a3a3a;
    --bulk-bar-border: #404040;
}

/* ============================================
   APPLY THEME VARIABLES
   ============================================ */

/* Body and main elements - HIGHEST PRIORITY */
body,
body * {
    transition: background 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Override body background color no matter what */
[data-theme="dark"] body[style] {
    background: var(--bg-primary) !important;
}

/* Header - use gradient variables */
.header {
    background: linear-gradient(135deg, var(--header-gradient-start) 0%, var(--header-gradient-end) 100%) !important;
    color: var(--header-text) !important;
}

.header h1,
.header-content h1 {
    color: var(--header-text) !important;
}

.header-actions,
.nav-buttons {
    color: var(--header-text) !important;
}

/* Container with dark background section (file cards area) */
.container > div[style*="background: #3a3a3a"],
.container > div[style*="background:#3a3a3a"] {
    background: var(--bg-dark-section) !important;
}

/* Cards and containers */
.container,
.add-form,
.entries-container,
.file-card,
.result-item,
.search-box-container,
.results-container,
.detail-item {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* File card stats */
.file-stats,
.stat-label {
    color: var(--text-secondary) !important;
}

/* Inputs and selects */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select,
.search-box,
.search-input,
.bulk-action-select,
.bulk-input {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-tertiary) !important;
}

/* Tables */
table {
    background: var(--table-bg) !important;
    border-color: var(--border-color) !important;
}

thead {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

tbody tr {
    border-color: var(--border-color) !important;
    background: var(--table-bg) !important;
}

tbody tr:hover {
    background: var(--table-hover) !important;
}

td, th {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Modals */
.modal {
    background: var(--modal-overlay) !important;
}

.modal-content {
    background: var(--modal-bg) !important;
    color: var(--text-primary) !important;
}

.modal-header {
    border-color: var(--border-color) !important;
}

/* Buttons - apply theme colors */
.btn {
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border-color: var(--btn-primary-bg) !important;
}

.btn-secondary {
    background: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    border-color: var(--btn-secondary-bg) !important;
}

.btn-success {
    background: var(--btn-success-bg) !important;
    color: var(--btn-success-text) !important;
    border-color: var(--btn-success-bg) !important;
}

.btn-danger {
    background: var(--btn-danger-bg) !important;
    color: var(--btn-danger-text) !important;
    border-color: var(--btn-danger-bg) !important;
}

.btn-warning {
    background: var(--btn-warning-bg) !important;
    color: var(--btn-warning-text) !important;
    border-color: var(--btn-warning-bg) !important;
}

.btn-info {
    background: var(--btn-info-bg) !important;
    color: var(--btn-info-text) !important;
    border-color: var(--btn-info-bg) !important;
}

/* Shadows */
.file-card,
.add-form,
.search-box-container,
.results-container {
    box-shadow: 0 2px 5px var(--shadow) !important;
}

.file-card:hover {
    box-shadow: 0 5px 15px var(--shadow-hover) !important;
}

/* Bulk actions bar */
.bulk-actions-bar {
    background: var(--bulk-bar-bg) !important;
    border-color: var(--bulk-bar-border) !important;
}

/* Status messages */
.success-message {
    background: var(--success-bg) !important;
    color: var(--success-text) !important;
    border-left-color: var(--success-border) !important;
}

.error-message {
    background: var(--error-bg) !important;
    color: var(--error-text) !important;
    border-left-color: var(--error-border) !important;
}

.warning-box {
    background: var(--warning-bg) !important;
    color: var(--warning-text) !important;
    border-left-color: var(--warning-border) !important;
}

.info-box {
    background: var(--info-bg) !important;
    color: var(--info-text) !important;
    border-left-color: var(--info-border) !important;
}

/* Code blocks */
code {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Links */
a {
    color: var(--text-primary);
}

[data-theme="dark"] a:not(.btn) {
    color: #8ab4f8;
}

/* Empty states */
.empty-state {
    color: var(--text-secondary) !important;
}

/* Labels and form elements */
label {
    color: var(--text-primary) !important;
}

.form-group label {
    color: var(--text-primary) !important;
}

.detail-label {
    color: var(--text-secondary) !important;
}

.detail-value {
    color: var(--text-primary) !important;
}

/* Stats boxes */
.stats-box {
    background: var(--bg-tertiary) !important;
}

.stat-value {
    color: var(--btn-primary-bg) !important;
}

/* Selection count */
.selection-count {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .selection-count {
    background: #3a3a50 !important;
    color: #b8b8f8 !important;
}

/* UUID cells */
.uuid-cell {
    font-family: monospace;
    color: var(--text-primary) !important;
}

/* File name display */
.file-name {
    color: var(--btn-primary-bg) !important;
}

/* Line numbers */
.line-number {
    color: var(--text-secondary) !important;
}

/* Ban badges - keep their specific colors but adjust for dark mode */
.ban-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
}

/* Required/optional indicators */
.required {
    color: #dc3545 !important;
}

[data-theme="dark"] .required {
    color: #f88 !important;
}

.optional {
    color: var(--text-tertiary) !important;
}

/* Close modal button */
.close-modal {
    color: var(--text-tertiary) !important;
}

.close-modal:hover {
    color: var(--text-primary) !important;
}

/* ============================================
   SPECIFIC FIXES FOR DARK BACKGROUNDS
   ============================================ */

/* Form headings on dark backgrounds */
h2, h3, h4 {
    color: var(--text-primary) !important;
}

/* Headings inside colored boxes (blue/cyan borders) */
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
    color: var(--text-primary) !important;
}

/* Section banners and info boxes */
.info-section,
.permission-info,
.user-section {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Blue info boxes with cyan text */
[data-theme="dark"] .info-section,
[data-theme="dark"] .permission-info,
[data-theme="dark"] [style*="background: #d1ecf1"],
[data-theme="dark"] [style*="background:#d1ecf1"] {
    background: var(--info-bg) !important;
    color: var(--info-text) !important;
}

/* Text inside blue/info colored sections */
[data-theme="dark"] .info-section *,
[data-theme="dark"] .permission-info * {
    color: var(--info-text) !important;
}

/* Entries header banner */
.entries-header,
h2[style*="margin"],
h3[style*="margin"] {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* All white background divs/sections */
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:white"] {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Specifically target white sections in permissions/users pages */
[data-theme="dark"] .user-select-section,
[data-theme="dark"] .permission-matrix,
[data-theme="dark"] .user-list {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Text color fixes for dark backgrounds */
[data-theme="dark"] p,
[data-theme="dark"] span:not(.btn):not(.badge):not(.ban-badge),
[data-theme="dark"] div:not(.btn) {
    color: var(--text-primary);
}

/* Small text / helper text on dark backgrounds */
[data-theme="dark"] small {
    color: var(--text-secondary) !important;
}

/* Paragraphs inside info boxes */
[data-theme="dark"] .info-box p,
[data-theme="dark"] [style*="background: #d1ecf1"] p,
[data-theme="dark"] [style*="background:#d1ecf1"] p {
    color: var(--info-text) !important;
}

/* Strong/bold text */
[data-theme="dark"] strong {
    color: var(--text-primary) !important;
}

/* Lists */
[data-theme="dark"] ul,
[data-theme="dark"] ol,
[data-theme="dark"] li {
    color: var(--text-primary) !important;
}

/* ============================================
   AGGRESSIVE OVERRIDES FOR INLINE STYLES
   ============================================ */

/* Override ALL white backgrounds in dark mode */
[data-theme="dark"] *[style*="background: #fff"],
[data-theme="dark"] *[style*="background:#fff"],
[data-theme="dark"] *[style*="background: white"],
[data-theme="dark"] *[style*="background:white"],
[data-theme="dark"] *[style*="background-color: #fff"],
[data-theme="dark"] *[style*="background-color:#fff"],
[data-theme="dark"] *[style*="background-color: white"],
[data-theme="dark"] *[style*="background-color:white"] {
    background-color: var(--card-bg) !important;
}

/* Override ALL black/dark text in dark mode */
[data-theme="dark"] *[style*="color: #000"],
[data-theme="dark"] *[style*="color:#000"],
[data-theme="dark"] *[style*="color: black"],
[data-theme="dark"] *[style*="color:black"],
[data-theme="dark"] *[style*="color: #333"],
[data-theme="dark"] *[style*="color:#333"] {
    color: var(--text-primary) !important;
}

/* Specific element overrides */
[data-theme="dark"] .add-form,
[data-theme="dark"] .bulk-add-form,
[data-theme="dark"] .entries-container {
    background: var(--card-bg) !important;
}

/* Form backgrounds with borders */
[data-theme="dark"] form,
[data-theme="dark"] .form-container {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* All divs with padding (likely containers) */
[data-theme="dark"] div[style*="padding"] {
    color: var(--text-primary);
}

/* Text that appears on dark element backgrounds */
[data-theme="dark"] .add-form *:not(.btn):not(input):not(select):not(textarea),
[data-theme="dark"] .bulk-add-form *:not(.btn):not(input):not(select):not(textarea) {
    color: var(--text-primary) !important;
}

/* Specifically for the "Add new entry" and "Bulk add" headings */
[data-theme="dark"] .add-form h3,
[data-theme="dark"] .bulk-add-form h3,
[data-theme="dark"] .add-form strong,
[data-theme="dark"] .bulk-add-form strong {
    color: var(--text-primary) !important;
}

/* Icons/emojis next to headings */
[data-theme="dark"] .add-form h3::before,
[data-theme="dark"] .bulk-add-form h3::before {
    filter: brightness(1.2);
}

/* Force forms to use theme background */
[data-theme="dark"] .add-form {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .add-form * {
    color: var(--text-primary);
}

/* Bulk add form - blue background should become dark */
[data-theme="dark"] .bulk-add-form,
[data-theme="dark"] [style*="background: #e7f3ff"],
[data-theme="dark"] [style*="background:#e7f3ff"],
[data-theme="dark"] [style*="background: #e8f4f8"],
[data-theme="dark"] [style*="background:#e8f4f8"] {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Permission matrix table */
[data-theme="dark"] .permission-matrix,
[data-theme="dark"] .permission-matrix table,
[data-theme="dark"] .user-list {
    background: var(--card-bg) !important;
}

[data-theme="dark"] .permission-matrix th,
[data-theme="dark"] .permission-matrix td {
    background: var(--table-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .permission-matrix thead th {
    background: var(--bg-tertiary) !important;
}

/* User badges */
[data-theme="dark"] .badge,
[data-theme="dark"] [style*="badge"] {
    filter: brightness(0.8);
}

/* ============================================
   COMPREHENSIVE PAGE ELEMENT OVERRIDES
   ============================================ */

/* All containers, wrappers, sections */
[data-theme="dark"] .container,
[data-theme="dark"] .wrapper,
[data-theme="dark"] .section,
[data-theme="dark"] .content,
[data-theme="dark"] .main,
[data-theme="dark"] .page-content {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* All white/light background elements in dark mode */
[data-theme="dark"] .white-bg,
[data-theme="dark"] .light-bg,
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .box {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* User management page specific */
[data-theme="dark"] .user-card,
[data-theme="dark"] .user-item,
[data-theme="dark"] .user-row {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Permission page specific */
[data-theme="dark"] .permission-card,
[data-theme="dark"] .permission-row,
[data-theme="dark"] .permission-section {
    background: var(--card-bg) !important;
}

/* Login page specific */
[data-theme="dark"] .login-container,
[data-theme="dark"] .login-box,
[data-theme="dark"] .login-form {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Any element with display: flex or grid */
[data-theme="dark"] [style*="display: flex"],
[data-theme="dark"] [style*="display:flex"],
[data-theme="dark"] [style*="display: grid"],
[data-theme="dark"] [style*="display:grid"] {
    color: var(--text-primary);
}

/* Centered containers (likely login/form pages) */
[data-theme="dark"] [style*="max-width"],
[data-theme="dark"] [style*="margin: 0 auto"],
[data-theme="dark"] [style*="margin:0 auto"] {
    color: var(--text-primary);
}

/* Override padding containers that likely have white backgrounds */
[data-theme="dark"] [style*="padding: 20px"],
[data-theme="dark"] [style*="padding:20px"],
[data-theme="dark"] [style*="padding: 30px"],
[data-theme="dark"] [style*="padding:30px"] {
    background: var(--card-bg) !important;
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */

.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    box-shadow: 0 2px 10px var(--shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease;
    z-index: 9999;
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px var(--shadow-hover);
}

.theme-toggle:active {
    transform: scale(0.95);
}

/* Icons for theme toggle */
.theme-toggle .light-icon {
    display: none;
}

.theme-toggle .dark-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .light-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .dark-icon {
    display: none;
}