/* 
* dark-theme.css
* Dark theme styles for the Demo Architecture Lab Portal
*/

/* Only apply these styles when dark-theme class is present */
.dark-theme {
    --text-color: #E9E9E9;
    --bg-color: #1A1A1A;
    --card-bg: #2A2A2A;
    --navbar-bg: #252525;
    --border-color: #444444;
    --input-bg: #333333;
    --link-color: #60A5FA;
    --link-hover-color: #93C5FD;
    --gitlab-orange: #FC6D26;
    --gitlab-purple: #8E74D8;
    --gitlab-yellow: #FCA326;
    --gitlab-red: #E24329;
    --gitlab-indigo: #8677B5;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --text-muted: #BBBBBB;  /* Lighter muted text for better contrast */
    --form-card-header-bg: var(--gitlab-orange);
    --form-card-header-text: #FFFFFF;
    --alert-success-bg: #1A3329;
    --alert-success-color: #69C97A;
    --alert-warning-bg: #332C16;
    --alert-warning-color: #E0BB4B;
    --alert-danger-bg: #3B1C1C;
    --alert-danger-color: #E05C5C;
    --flatpickr-bg: #2F2F2F;
    --flatpickr-text: #E9E9E9;
    --dropdown-bg: #333333;
    --hover-bg: rgba(252, 109, 38, 0.2);
  }
  
  /* Basic elements */
  .dark-theme body {
    background-color: var(--bg-color);
    color: var(--text-color);
  }
  
  /* Navbar */
  .dark-theme .navbar {
    background-color: var(--navbar-bg) !important;
  }
  
  .dark-theme .navbar-brand,
  .dark-theme .nav-link {
    color: var(--text-color) !important;
  }
  
  .dark-theme .nav-link:hover {
    background-color: var(--hover-bg);
  }
  
  /* Cards */
  .dark-theme .card,
  .dark-theme .form-card,
  .dark-theme .feature-card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
  }
  
  /* Form Card Headers - Fix visibility issue */
  .dark-theme .form-card-header {
    background-color: var(--form-card-header-bg);
    color: var(--form-card-header-text) !important;
  }
  
  .dark-theme .form-card-title {
    color: var(--form-card-header-text) !important;
  }
  
  .dark-theme .card-header {
    background-color: #333333;
    border-color: var(--border-color);
  }
  
  .dark-theme .card-body {
    color: var(--text-color);
  }
  
  .dark-theme .card-title,
  .dark-theme .feature-title {
    color: var(--text-color);
  }
  
  /* Fix form section titles specifically */
  .dark-theme .form-section-title,
  .dark-theme h3.form-section-title {
    color: #FC6D26 !important;
    border-bottom-color: #FC6D26 !important;
    font-weight: bold !important;
  }
  
  /* Fix text-muted class */
  .dark-theme .text-muted,
  .dark-theme .form-text,
  .dark-theme .card-text,
  .dark-theme small.text-muted,
  .dark-theme p.text-muted,
  .dark-theme span.text-muted {
    color: #BBBBBB !important;
  }
  
  .dark-theme .feature-description {
    color: var(--text-muted);
  }
  
  /* Form controls */
  .dark-theme .form-control {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
  }
  
  .dark-theme .form-control:focus {
    border-color: var(--gitlab-orange);
    box-shadow: 0 0 0 0.2rem rgba(252, 109, 38, 0.25);
  }
  
  .dark-theme .form-label {
    color: var(--text-color);
  }
  
  .dark-theme select.form-control option {
    background-color: var(--dropdown-bg);
    color: var(--text-color);
  }
  
  /* Buttons */
  .dark-theme .btn-primary {
    background-color: var(--gitlab-orange);
    border-color: var(--gitlab-orange);
  }
  
  .dark-theme .btn-primary:hover {
    background-color: var(--gitlab-red);
    border-color: var(--gitlab-red);
  }
  
  .dark-theme .btn-secondary {
    background-color: #555555;
    border-color: #666666;
  }
  
  /* Alerts */
  .dark-theme .alert-success {
    background-color: var(--alert-success-bg);
    color: var(--alert-success-color);
    border-left: 4px solid #2da160;
  }
  
  .dark-theme .alert-warning {
    background-color: var(--alert-warning-bg);
    color: var(--alert-warning-color);
    border-left: 4px solid var(--gitlab-yellow);
  }
  
  .dark-theme .alert-danger {
    background-color: var(--alert-danger-bg);
    color: var(--alert-danger-color);
    border-left: 4px solid var(--gitlab-red);
  }
  
  /* Table styling */
  .dark-theme table {
    color: var(--text-color);
  }
  
  .dark-theme .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.075);
  }
  
  .dark-theme .table thead th {
    border-bottom-color: var(--border-color);
  }
  
  .dark-theme .table td, 
  .dark-theme .table th {
    border-top-color: var(--border-color);
  }
  
  /* Calendar elements */
  .dark-theme #calendar {
    background-color: var(--card-bg) !important;
  }
  
  .dark-theme .fc-theme-standard .fc-scrollgrid,
  .dark-theme .fc-theme-standard td,
  .dark-theme .fc-theme-standard th {
    border-color: var(--border-color);
  }
  
  .dark-theme .fc-col-header-cell-cushion,
  .dark-theme .fc-daygrid-day-number {
    color: var(--text-color);
  }
  
  /* Flatpickr styling */
  .dark-theme .flatpickr-calendar {
    background-color: var(--flatpickr-bg);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    color: var(--flatpickr-text);
    border: 1px solid var(--border-color);
  }
  
  .dark-theme .flatpickr-months .flatpickr-month,
  .dark-theme .flatpickr-current-month .flatpickr-monthDropdown-months,
  .dark-theme .flatpickr-weekdays,
  .dark-theme span.flatpickr-weekday {
    background-color: var(--flatpickr-bg);
    color: var(--flatpickr-text);
  }
  
  .dark-theme .flatpickr-day {
    color: var(--flatpickr-text);
  }
  
  /* Info page specific styles */
  .dark-theme .info-page .card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
  }
  
  .dark-theme .info-page .card-title {
    color: var(--gitlab-orange);
    font-weight: 600;
  }
  
  .dark-theme .info-page .card-body {
    color: var(--text-color);
  }
  
  /* Make sure any code blocks in dark mode are readable */
  .dark-theme pre,
  .dark-theme code {
    background-color: #333333;
    color: #E9E9E9;
    border-color: #444444;
  }
  
  /* Ensure form header text is visible in forms */
  .dark-theme .form-card-header h3,
  .dark-theme .form-card-header .form-card-title {
    color: white !important;
  }
  
  /* Style links in dark mode */
  .dark-theme a {
    color: var(--link-color);
  }
  
  .dark-theme a:hover {
    color: var(--link-hover-color);
  }
  
  /* Fix image containers in dark mode */
  .dark-theme .image-container {
    background-color: #333333;
    border-color: #444444;
  }
  
  .dark-theme .image-container p {
    color: var(--text-muted);
  }
  
  /* Special handling for specific elements */
  .dark-theme .request-form h3,
  .dark-theme .info-form h3,
  .dark-theme #formCard h3 {
    color: white !important;
  }
  
  /* Fix any paragraphs or spans that might be hard to read */
  .dark-theme p, 
  .dark-theme span,
  .dark-theme label,
  .dark-theme li {
    color: var(--text-color);
  }
  
  /* Enforce visibility for any heading elements */
  .dark-theme h1, 
  .dark-theme h2, 
  .dark-theme h3, 
  .dark-theme h4, 
  .dark-theme h5, 
  .dark-theme h6 {
    color: var(--text-color);
  }
  
  /* Bootstrap overrides for dark theme */
  .dark-theme .form-check-label {
    color: var(--text-color);
  }
  
  .dark-theme .form-check-input {
    background-color: var(--input-bg);
    border-color: var(--border-color);
  }

  /* Add to dark-theme.css or append to an existing CSS file */

/* Fix alert heading and text visibility in dark mode */
.dark-theme .alert-info {
    background-color: rgba(0, 123, 255, 0.15);
    color: #e9e9e9;
    border-left: 4px solid var(--gitlab-orange);
  }
  
  .dark-theme .alert-info h5,
  .dark-theme .alert-info p,
  .dark-theme .alert-info .alert-heading {
    color: #e9e9e9 !important;
  }
  
  /* Ensure other alert types also have visible text */
  .dark-theme .alert-danger h5,
  .dark-theme .alert-danger p,
  .dark-theme .alert-warning h5,
  .dark-theme .alert-warning p,
  .dark-theme .alert-success h5,
  .dark-theme .alert-success p {
    color: inherit !important;
  }

  /* Additional fixes for dark mode input text and form control */

/* Fix text input visibility in dark mode */
.dark-theme .form-control,
.dark-theme input[type="text"],
.dark-theme input[type="password"],
.dark-theme input[type="email"],
.dark-theme input[type="number"],
.dark-theme input[type="search"],
.dark-theme input[type="tel"],
.dark-theme input[type="url"],
.dark-theme input[type="date"],
.dark-theme input[type="datetime-local"],
.dark-theme input[type="month"],
.dark-theme input[type="time"],
.dark-theme input[type="week"],
.dark-theme textarea,
.dark-theme select {
  color: #e9e9e9 !important;
  background-color: #333333 !important;
  border-color: #555555 !important;
}

/* Fix placeholder text color in dark mode */
.dark-theme .form-control::placeholder,
.dark-theme input::placeholder,
.dark-theme textarea::placeholder,
.dark-theme select::placeholder {
  color: #aaaaaa !important;
  opacity: 1;
}

/* Ensure form-text helper text is visible */
.dark-theme .form-text,
.dark-theme small.form-text,
.dark-theme .text-muted {
  color: #bbbbbb !important;
}

/* Add focus state highlighting */
.dark-theme .form-control:focus {
  border-color: var(--gitlab-orange) !important;
  box-shadow: 0 0 0 0.2rem rgba(252, 109, 38, 0.25) !important;
  color: #ffffff !important;
}

/* Specific fix for redemption-input class */
.dark-theme .redemption-input {
  color: #e9e9e9 !important;
  background-color: #333333 !important;
}

/* Fix text input visibility in dark mode */
.dark-theme .form-control,
.dark-theme input[type="text"] {
  color: #e9e9e9 !important;
  background-color: #333333 !important;
  border-color: #555555 !important;
}

/* Fix placeholder text color in dark mode */
.dark-theme .form-control::placeholder,
.dark-theme input::placeholder {
  color: #aaaaaa !important;
  opacity: 1;
}

/* Ensure form-text helper text is visible */
.dark-theme .form-text,
.dark-theme small.form-text,
.dark-theme .text-muted {
  color: #bbbbbb !important;
}

/* Specific fix for redemption-input class */
.dark-theme .redemption-input {
  color: #e9e9e9 !important;
  background-color: #333333 !important;
}