/**
 * Theme System - Light & Dark Mode
 *
 * This file defines all CSS variables for light and dark modes.
 * All components should use these variables instead of hardcoded colors.
 *
 * Usage:
 * - Light Mode (default): prefers-color-scheme: light
 * - Dark Mode: prefers-color-scheme: dark
 * - User Override: html[data-theme="light"] or html[data-theme="dark"]
 *
 * Cache Buster: 2025-10-25-v2
 */

/* ============================================
   Light Mode (Default)
   ============================================ */

:root {
  /* Semantic Colors */
  --color-primary: #0d6efd;
  --color-secondary: #6c757d;
  --color-success: #198754;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #0dcaf0;

  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --admin-content-bg: #cacaca;

  /* Text Colors */
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #999999;

  /* Border Colors */
  --border-color: #dee2e6;
  --border-light: #e9ecef;

  /* Apple Glass Design - Glassmorphism */
  --glass-blur: 10px;
  --glass-blur-hover: 12px;
  --glass-saturation: 180%;
  --glass-saturation-hover: 200%;
  --glass-opacity: 0.8;
  --glass-border-opacity: 0.5;

  /* Bootstrap CSS Variables - Light Mode */
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
  --bs-secondary-bg: #f8f9fa;
  --bs-tertiary-bg: #e9ecef;
  --bs-border-color: #dee2e6;

  /* Component Specific - Sidebar */
  --sidebar-bg: #f8f9fa;
  --sidebar-border: #dee2e6;
  --sidebar-text: #212529;
  --sidebar-text-muted: #6c757d;
  --sidebar-hover-bg: rgba(13, 110, 253, 0.1);
  --sidebar-active-bg: rgba(13, 110, 253, 0.15);

  /* Component Specific - Header */
  --header-bg: #ffffff;
  --header-border: #dee2e6;
  --header-text: #212529;
  --header-shadow: rgba(0, 0, 0, 0.1);

  /* Component Specific - Cards */
  --card-bg: #ffffff;
  --card-border: #dee2e6;
  --card-shadow: rgba(0, 0, 0, 0.1);
  --card-hover-shadow: rgba(0, 0, 0, 0.15);

  /* Component Specific - Buttons */
  --btn-bg: #ffffff;
  --btn-border: #dee2e6;
  --btn-text: #212529;
  --btn-hover-bg: #f8f9fa;

  /* Component Specific - Forms */
  --form-bg: #ffffff;
  --form-border: #dee2e6;
  --form-text: #212529;
  --form-placeholder: #999999;

  /* Component Specific - Alerts */
  --alert-bg: #f8f9fa;
  --alert-border: #dee2e6;
  --alert-text: #212529;

  /* Component Specific - Tables */
  --table-bg: #ffffff;
  --table-border: #dee2e6;
  --table-text: #212529;
  --table-hover-bg: #f8f9fa;
  --table-stripe-bg: #f8f9fa;
  --table-selected-bg: #929EAB;
  --table-selected-text: #ffffff;

  /* Component Specific - Modals */
  --modal-bg: #ffffff;
  --modal-border: #dee2e6;
  --modal-text: #212529;
  --modal-backdrop: rgba(0, 0, 0, 0.5);

  /* Component Specific - Toasts */
  --toast-bg: #ffffff;
  --toast-border: #dee2e6;
  --toast-text: #212529;
  --toast-shadow: rgba(0, 0, 0, 0.1);

  /* Component Specific - Accordion (DetailView) */
  --accordion-header-bg: #737A82;
  --accordion-header-hover-bg: #5a6268;
  --accordion-header-text: #ffffff;
  --accordion-chevron-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

  /* Transitions */
  --transition-speed: 0.3s;
}

/* ============================================
   Dark Mode
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Semantic Colors - adjusted for dark mode */
    --color-primary: #0d6efd;
    --color-secondary: #adb5bd;
    --color-success: #51cf66;
    --color-danger: #ff6b6b;
    --color-warning: #ffd43b;
    --color-info: #74c0fc;

    /* Background Colors */
    --bg-primary: #1f1f1f;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3d3d3d;
    --admin-content-bg: #2d2d2d;

    /* Text Colors */
    --text-primary: #e9ecef;
    --text-secondary: #adb5bd;
    --text-muted: #666666;

    /* Border Colors */
    --border-color: #495057;
    --border-light: #3d3d3d;

    /* Bootstrap CSS Variables - Dark Mode */
    --bs-body-bg: #1a1a1a;
    --bs-body-color: #e9ecef;
    --bs-secondary-bg: #2d2d2d;
    --bs-tertiary-bg: #3d3d3d;
    --bs-border-color: #495057;

    /* Component Specific - Sidebar */
    --sidebar-bg: #2d2d2d;
    --sidebar-border: #495057;
    --sidebar-text: #e9ecef;
    --sidebar-text-muted: #adb5bd;
    --sidebar-hover-bg: rgba(13, 110, 253, 0.2);
    --sidebar-active-bg: rgba(13, 110, 253, 0.3);

    /* Component Specific - Header */
    --header-bg: #1a1a1a;
    --header-border: #495057;
    --header-text: #e9ecef;
    --header-shadow: rgba(0, 0, 0, 0.3);

    /* Component Specific - Cards */
    --card-bg: #2d2d2d;
    --card-border: #495057;
    --card-shadow: rgba(0, 0, 0, 0.3);
    --card-hover-shadow: rgba(0, 0, 0, 0.5);

    /* Component Specific - Buttons */
    --btn-bg: #2d2d2d;
    --btn-border: #495057;
    --btn-text: #e9ecef;
    --btn-hover-bg: #3d3d3d;

    /* Component Specific - Forms */
    --form-bg: #2d2d2d;
    --form-border: #495057;
    --form-text: #e9ecef;
    --form-placeholder: #666666;

    /* Component Specific - Alerts */
    --alert-bg: #2d2d2d;
    --alert-border: #495057;
    --alert-text: #e9ecef;

    /* Component Specific - Tables */
    --table-bg: #2d2d2d;
    --table-border: #495057;
    --table-text: #e9ecef;
    --table-hover-bg: #3d3d3d;
    --table-stripe-bg: #3d3d3d;
    --table-selected-bg: #4a5568;
    --table-selected-text: #ffffff;

    /* Component Specific - Modals */
    --modal-bg: #2d2d2d;
    --modal-border: #495057;
    --modal-text: #e9ecef;
    --modal-backdrop: rgba(0, 0, 0, 0.7);

    /* Component Specific - Toasts */
    --toast-bg: #2d2d2d;
    --toast-border: #495057;
    --toast-text: #e9ecef;
    --toast-shadow: rgba(0, 0, 0, 0.5);

    /* Component Specific - Accordion (DetailView) */
    --accordion-header-bg: #343a40;
    --accordion-header-hover-bg: #23272b;
    --accordion-header-text: #ffffff;
    --accordion-chevron-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

    /* Transitions */
    --transition-speed: 0.3s;
  }
}

/* ============================================
   User Theme Override (data-theme attribute)
   ============================================ */

/* Light Mode Override */
html[data-theme="light"] {
  --color-primary: #0d6efd;
  --color-secondary: #6c757d;
  --color-success: #198754;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #0dcaf0;

  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --admin-content-bg: #cacaca;

  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #999999;

  --border-color: #dee2e6;
  --border-light: #e9ecef;

  --sidebar-bg: #f8f9fa;
  --sidebar-border: #dee2e6;
  --sidebar-text: #212529;
  --sidebar-text-muted: #6c757d;
  --sidebar-hover-bg: rgba(13, 110, 253, 0.1);
  --sidebar-active-bg: rgba(13, 110, 253, 0.15);

  --header-bg: #ffffff;
  --header-border: #dee2e6;
  --header-text: #212529;
  --header-shadow: rgba(0, 0, 0, 0.1);

  --card-bg: #ffffff;
  --card-border: #dee2e6;
  --card-shadow: rgba(0, 0, 0, 0.1);
  --card-hover-shadow: rgba(0, 0, 0, 0.15);

  --btn-bg: #ffffff;
  --btn-border: #dee2e6;
  --btn-text: #212529;
  --btn-hover-bg: #f8f9fa;

  --form-bg: #ffffff;
  --form-border: #dee2e6;
  --form-text: #212529;
  --form-placeholder: #999999;

  --alert-bg: #f8f9fa;
  --alert-border: #dee2e6;
  --alert-text: #212529;

  --table-bg: #ffffff;
  --table-border: #dee2e6;
  --table-text: #212529;
  --table-hover-bg: #f8f9fa;
  --table-stripe-bg: #f8f9fa;
  --table-selected-bg: #929EAB;
  --table-selected-text: #ffffff;

  --modal-bg: #ffffff;
  --modal-border: #dee2e6;
  --modal-text: #212529;
  --modal-backdrop: rgba(0, 0, 0, 0.5);

  --toast-bg: #ffffff;
  --toast-border: #dee2e6;
  --toast-text: #212529;
  --toast-shadow: rgba(0, 0, 0, 0.1);

  /* Component Specific - Accordion (DetailView) */
  --accordion-header-bg: #737A82;
  --accordion-header-hover-bg: #5a6268;
  --accordion-header-text: #ffffff;
  --accordion-chevron-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Dark Mode Override - via data-theme attribute */
html[data-theme="dark"] {
  --color-primary: #0d6efd;
  --color-secondary: #adb5bd;
  --color-success: #51cf66;
  --color-danger: #ff6b6b;
  --color-warning: #ffd43b;
  --color-info: #74c0fc;

  --bg-primary: #1f1f1f;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3d3d3d;
  --admin-content-bg: #2d2d2d;

  --text-primary: #e9ecef;
  --text-secondary: #adb5bd;
  --text-muted: #666666;

  --border-color: #495057;
  --border-light: #3d3d3d;

  /* Bootstrap CSS Variables - Dark Mode */
  --bs-body-bg: #1a1a1a;
  --bs-body-color: #e9ecef;
  --bs-secondary-bg: #2d2d2d;
  --bs-tertiary-bg: #3d3d3d;
  --bs-border-color: #495057;

  --sidebar-bg: #2d2d2d;
  --sidebar-border: #495057;
  --sidebar-text: #e9ecef;
  --sidebar-text-muted: #adb5bd;
  --sidebar-hover-bg: rgba(13, 110, 253, 0.2);
  --sidebar-active-bg: rgba(13, 110, 253, 0.3);

  --header-bg: #1a1a1a;
  --header-border: #495057;
  --header-text: #e9ecef;
  --header-shadow: rgba(0, 0, 0, 0.3);

  --card-bg: #2d2d2d;
  --card-border: #495057;
  --card-shadow: rgba(0, 0, 0, 0.3);
  --card-hover-shadow: rgba(0, 0, 0, 0.5);

  --btn-bg: #2d2d2d;
  --btn-border: #495057;
  --btn-text: #e9ecef;
  --btn-hover-bg: #3d3d3d;

  --form-bg: #2d2d2d;
  --form-border: #495057;
  --form-text: #e9ecef;
  --form-placeholder: #666666;

  --alert-bg: #2d2d2d;
  --alert-border: #495057;
  --alert-text: #e9ecef;

  --table-bg: #2d2d2d;
  --table-border: #495057;
  --table-text: #e9ecef;
  --table-hover-bg: #3d3d3d;
  --table-stripe-bg: #3d3d3d;
  --table-selected-bg: #4a5568;
  --table-selected-text: #ffffff;

  --modal-bg: #2d2d2d;
  --modal-border: #495057;
  --modal-text: #e9ecef;
  --modal-backdrop: rgba(0, 0, 0, 0.7);

  --toast-bg: #2d2d2d;
  --toast-border: #495057;
  --toast-text: #e9ecef;
  --toast-shadow: rgba(0, 0, 0, 0.5);

  /* Component Specific - Accordion (DetailView) */
  --accordion-header-bg: #343a40;
  --accordion-header-hover-bg: #23272b;
  --accordion-header-text: #ffffff;
  --accordion-chevron-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Dark Mode Override - via system preference (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --color-primary: #0d6efd;
    --color-secondary: #adb5bd;
    --color-success: #198754;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #0dcaf0;
    --color-light: #f8f9fa;
    --color-dark: #212529;

    --bg-primary: #1f1f1f;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --bg-hover: #404040;
    --admin-content-bg: #2d2d2d;

    --text-primary: #e9ecef;
    --text-secondary: #adb5bd;
    --text-muted: #6c757d;

    --border-color: #495057;
    --border-light: #495057;

    /* Bootstrap CSS Variables - Dark Mode */
    --bs-body-bg: #1a1a1a;
    --bs-body-color: #e9ecef;
    --bs-secondary-bg: #2d2d2d;
    --bs-tertiary-bg: #3a3a3a;
    --bs-border-color: #495057;

    --card-bg: #2d2d2d;
    --card-border: #495057;
    --card-text: #e9ecef;
    --card-shadow: rgba(0, 0, 0, 0.3);

    --input-bg: #2d2d2d;
    --input-border: #495057;
    --input-text: #e9ecef;
    --input-placeholder: #6c757d;
    --input-focus-border: #0d6efd;
    --input-focus-shadow: rgba(13, 110, 253, 0.25);

    --btn-primary-bg: #0d6efd;
    --btn-primary-border: #0d6efd;
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: #0b5ed7;
    --btn-primary-hover-border: #0a58ca;

    --btn-secondary-bg: #6c757d;
    --btn-secondary-border: #6c757d;
    --btn-secondary-text: #ffffff;
    --btn-secondary-hover-bg: #5c636a;
    --btn-secondary-hover-border: #565e64;

    --btn-light-bg: #f8f9fa;
    --btn-light-border: #f8f9fa;
    --btn-light-text: #212529;
    --btn-light-hover-bg: #e2e6ea;
    --btn-light-hover-border: #dae0e5;

    --btn-dark-bg: #212529;
    --btn-dark-border: #212529;
    --btn-dark-text: #ffffff;
    --btn-dark-hover-bg: #1c1f23;
    --btn-dark-hover-border: #1a1e21;

    --badge-bg: #0d6efd;
    --badge-text: #ffffff;

    --alert-info-bg: #cfe2ff;
    --alert-info-border: #b6d4fe;
    --alert-info-text: #084298;

    --alert-success-bg: #d1e7dd;
    --alert-success-border: #badbcc;
    --alert-success-text: #0f5132;

    --alert-warning-bg: #fff3cd;
    --alert-warning-border: #ffecb5;
    --alert-warning-text: #664d03;

    --alert-danger-bg: #f8d7da;
    --alert-danger-border: #f5c2c7;
    --alert-danger-text: #842029;

    --table-bg: #2d2d2d;
    --table-border: #495057;
    --table-text: #e9ecef;
    --table-hover-bg: #3a3a3a;
    --table-stripe-bg: #3a3a3a;
    --table-selected-bg: #4a5568;
    --table-selected-text: #ffffff;

    --modal-bg: #2d2d2d;
    --modal-border: #495057;
    --modal-text: #e9ecef;
    --modal-backdrop: rgba(0, 0, 0, 0.5);

    --toast-bg: #2d2d2d;
    --toast-border: #495057;
    --toast-text: #e9ecef;
    --toast-shadow: rgba(0, 0, 0, 0.5);
  }
}

/* ============================================
   Global Styles using Theme Variables
   ============================================ */

html {
  color-scheme: light dark;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color var(--transition-speed) ease,
              color var(--transition-speed) ease;
}

/* Override Bootstrap's CSS variables for proper dark mode support */
:root {
  --bs-body-bg: var(--bg-primary);
  --bs-body-color: var(--text-primary);
  --bs-secondary-bg: var(--bg-secondary);
  --bs-tertiary-bg: var(--bg-tertiary);
  --bs-border-color: var(--border-color);
}

/* Smooth transitions for theme changes */
* {
  transition: background-color var(--transition-speed) ease,
              color var(--transition-speed) ease,
              border-color var(--transition-speed) ease;
}

/* ============================================
   Form Controls - Disabled State
   ============================================ */

/* Disabled inputs should have a gray background */
.form-control:disabled,
.form-select:disabled {
  background-color: #e9ecef;
  opacity: 1;
  cursor: not-allowed;
}

/* Dark mode disabled inputs */
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled {
  background-color: #2b3035;
  color: #6c757d;
}

/* Input group text styling */
.input-group-text {
  border-color: var(--border-color);
}

/* Remove border between icon and input */
.input-group .input-group-text.border-end-0 {
  border-right: 0;
}

.input-group .input-group-text.border-end-0 + .form-control {
  border-left: 0;
}

/* ============================================
   Group Cards - Collapsible Groups
   ============================================ */

/* Card styling */
.card {
  border-color: var(--border-color);
  background-color: var(--bg-primary);
  border-radius: 0.5rem;
  overflow: hidden;
}

.card-header {
  background-color: #e9ecef !important;
  border-bottom: 1px solid rgba(0, 0, 0, .125);
  padding: 0.75rem 1rem;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

/* When card is collapsed, header should have bottom radius too */
.card-header[aria-expanded="false"] {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  border-bottom: none;
}

/* Dark mode card header */
html[data-theme="dark"] .card-header {
  background-color: #2b3035 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .125);
}

html[data-theme="dark"] .card-header[aria-expanded="false"] {
  border-bottom: none;
}

.card-body {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}



/* Collapsible card header */
.card-header[data-bs-toggle="collapse"] {
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.card-header[data-bs-toggle="collapse"]:hover {
  background-color: #e9ecef !important;
}

/* Dark mode hover */
html[data-theme="dark"] .card-header[data-bs-toggle="collapse"]:hover {
  background-color: #343a40 !important;
}

/* Collapse icon animation */
.collapse-icon {
  transition: transform 0.3s ease;
}

.card-header[aria-expanded="true"] .collapse-icon {
  transform: rotate(180deg);
}