/* ==========================================================================
   STANFORD IDENTITY - CSS VARIABLES
   Official colors from identity.stanford.edu
   ========================================================================== */

:root {
  /* Primary Colors */
  --su-cardinal-red: #8C1515;
  --su-cardinal-red-rgb: 140, 21, 21;
  --su-cardinal-red-light: #B83A4B;
  --su-cardinal-red-dark: #820000;
  --su-white: #FFFFFF;
  --su-black: #2E2D29;
  --su-cool-grey: #53565A;

  /* Digital Colors - For UX/Interactive features */
  --su-digital-red: #B1040E;
  --su-digital-red-light: #E50808;
  --su-digital-red-dark: #820000;
  --su-digital-red-rgb: 177, 4, 14;

  --su-digital-blue: #006CB8;
  --su-digital-blue-light: #6FC3FF;
  --su-digital-blue-dark: #00548F;
  --su-digital-blue-rgb: 0, 108, 184;

  --su-digital-green: #008566;
  --su-digital-green-light: #1AECBA;
  --su-digital-green-dark: #006F54;
  --su-digital-green-rgb: 0, 133, 102;

  /* Black Tints */
  --su-black-90: #43423E;
  --su-black-80: #585754;
  --su-black-70: #6D6C69;
  --su-black-60: #767674;
  --su-black-50: #979694;
  --su-black-40: #ABABA9;
  --su-black-30: #C0C0BF;
  --su-black-20: #D5D5D4;
  --su-black-10: #EAEAEA;

  /* Accent - Stone */
  --su-stone: #7F7776;
  --su-stone-light: #D4D1D1;
  --su-stone-dark: #544948;

  /* Accent - Fog */
  --su-fog: #DAD7CB;
  --su-fog-light: #F4F4F4;
  --su-fog-dark: #B6B1A9;

  /* Accent - Palo Alto */
  --su-palo-alto: #175E54;
  --su-palo-alto-light: #2D716F;
  --su-palo-alto-dark: #014240;

  /* Accent - Bay */
  --su-bay: #6FA287;
  --su-bay-light: #8AB8A7;
  --su-bay-dark: #417865;

  /* Accent - Sky */
  --su-sky: #4298B5;
  --su-sky-light: #67AFD2;
  --su-sky-dark: #016895;

  /* Accent - Poppy */
  --su-poppy: #E98300;
  --su-poppy-light: #F9A44A;
  --su-poppy-dark: #D1660F;

  /* Accent - Illuminating */
  --su-illuminating: #FEDD5C;
  --su-illuminating-light: #FFE781;
  --su-illuminating-dark: #FEC51D;

  /* Accent - Lagunita */
  --su-lagunita: #007C92;
  --su-lagunita-light: #009AB4;
  --su-lagunita-dark: #006B81;
  --su-lagunita-rgb: 0, 107, 129; /* Default to Dark for Light Mode */
  --su-lagunita-light-rgb: 0, 154, 180;
  --su-lagunita-dark-rgb: 0, 107, 129;
  --su-heatmap-color-rgb: var(--su-lagunita-dark-rgb);

  /* Bootstrap Default Overrides */
  --bs-body-bg: var(--su-fog-light);
  --bs-body-color: var(--su-black);
  --bs-card-bg: var(--su-white);
  --bs-card-border-color: var(--su-black-20);

  /* Semantic Overrides */
  --bs-primary: var(--su-lagunita);
  --bs-primary-rgb: var(--su-lagunita-rgb);
  --bs-success: var(--su-digital-green);
  --bs-success-rgb: var(--su-digital-green-rgb);
  --bs-danger: var(--su-digital-red);
  --bs-danger-rgb: var(--su-digital-red-rgb);
}

[data-bs-theme=dark] {
  /* Bootstrap Dark Overrides */
  --bs-body-bg: var(--su-black-90);
  --bs-body-color: var(--su-black-10);
  --bs-card-bg: var(--su-black);
  --bs-card-border-color: var(--su-black-80);

  /* Semantic Overrides */
  --bs-primary: var(--su-lagunita-light);
  --bs-success: var(--su-digital-green-light);
  --bs-danger: var(--su-digital-red-light);

  /* Heatmap Dark Mode */
  --su-heatmap-color-rgb: var(--su-lagunita-light-rgb);
}

.text-success {
    color: var(--bs-success) !important;
}

.text-danger {
    color: var(--bs-danger) !important;
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.bg-primary {
    background-color: var(--su-lagunita-light) !important;
    color: var(--su-black) !important;
    border: 1px solid var(--su-black) !important;
}

[data-bs-theme=dark] .bg-primary {
    background-color: var(--su-lagunita-dark) !important;
    color: white !important;
    border: 1px solid white !important;
}

.bg-su-illuminating {
    background-color: var(--su-illuminating-light) !important;
    color: var(--su-black) !important;
    border: 1px solid currentColor !important;
}

[data-bs-theme=dark] .bg-su-illuminating {
    background-color: var(--su-illuminating-dark) !important;
}

.badge-fixed-width {
    min-width: 90px;
    display: inline-block;
}

.text-primary {
    color: var(--su-lagunita-dark) !important;
}

[data-bs-theme=dark] .text-primary {
    color: var(--su-lagunita-light) !important;
}

.bg-su-cardinal-red {
    background-color: var(--su-cardinal-red) !important;
    color: white !important;
}

.text-su-cardinal-red {
    color: var(--su-cardinal-red) !important;
}

[data-bs-theme=dark] .text-su-cardinal-red {
    color: var(--su-cardinal-red-light) !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn-primary {
  --bs-btn-color: var(--su-black);
  --bs-btn-bg: var(--su-lagunita-light);
  --bs-btn-border-color: var(--su-black);
  /* Disable default color swap */
  --bs-btn-hover-color: var(--su-black);
  --bs-btn-hover-bg: var(--su-lagunita-light);
  --bs-btn-hover-border-color: var(--su-black);
  --bs-btn-active-color: var(--su-black);
  --bs-btn-active-bg: var(--su-lagunita-light);
  --bs-btn-active-border-color: var(--su-black);
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: var(--su-white);
  --bs-btn-bg: var(--su-lagunita-dark);
  --bs-btn-border-color: var(--su-white);
  border-color: var(--su-white) !important;
  /* Keep same colors on hover/active to avoid contrast issues */
  --bs-btn-hover-color: var(--su-white);
  --bs-btn-hover-bg: var(--su-lagunita-dark);
  --bs-btn-hover-border-color: var(--su-white);
  --bs-btn-active-color: var(--su-white);
  --bs-btn-active-bg: var(--su-lagunita-dark);
  --bs-btn-active-border-color: var(--su-white);
}

/* Unified Hover Effect */
.btn-primary:hover {
  filter: brightness(0.95);
  /* Light mode: darken slightly */
}

[data-bs-theme="dark"] .btn-primary:hover {
  box-shadow: none;
  filter: brightness(1.15);
  /* Dark mode: lighten slightly */
}

.btn-illuminating {
  --bs-btn-color: var(--su-black);
  --bs-btn-bg: var(--su-illuminating-light);
  --bs-btn-border-color: var(--su-black);
  /* Disable default color swap */
  --bs-btn-hover-color: var(--su-black);
  --bs-btn-hover-bg: var(--su-illuminating-light);
  --bs-btn-hover-border-color: var(--su-black);
  --bs-btn-active-color: var(--su-black);
  --bs-btn-active-bg: var(--su-illuminating-light);
  --bs-btn-active-border-color: var(--su-black);
}

[data-bs-theme="dark"] .btn-illuminating {
  --bs-btn-color: var(--su-black);
  --bs-btn-bg: var(--su-illuminating-dark);
  --bs-btn-border-color: var(--su-black);
  /* Exception: maintain black border for yellow for consistency with text */
  --bs-btn-hover-color: var(--su-black);
  --bs-btn-hover-bg: var(--su-illuminating-dark);
  --bs-btn-hover-border-color: var(--su-black);
  --bs-btn-active-color: var(--su-black);
  --bs-btn-active-bg: var(--su-illuminating-dark);
  --bs-btn-active-border-color: var(--su-black);
}

/* Unified Hover Effect */
.btn-illuminating:hover {
  filter: brightness(0.95);
}

[data-bs-theme="dark"] .btn-illuminating:hover {
  filter: brightness(1.15);
}

.btn-poppy {
  --bs-btn-color: var(--su-black);
  --bs-btn-bg: var(--su-poppy-light);
  --bs-btn-border-color: var(--su-black);
  /* Disable default color swap */
  --bs-btn-hover-color: var(--su-black);
  --bs-btn-hover-bg: var(--su-poppy-light);
  --bs-btn-hover-border-color: var(--su-black);
  --bs-btn-active-color: var(--su-black);
  --bs-btn-active-bg: var(--su-poppy-light);
  --bs-btn-active-border-color: var(--su-black);
}

/* Unified Hover Effect */
.btn-poppy:hover {
  filter: brightness(0.95);
}

[data-bs-theme="dark"] .btn-poppy:hover {
  filter: brightness(1.15);
}

[data-bs-theme="dark"] .btn-poppy {
  --bs-btn-color: var(--su-black);
  --bs-btn-bg: var(--su-poppy-dark);
  --bs-btn-border-color: var(--su-black);
  border-color: var(--su-black) !important;
  /* Keep same colors on hover/active to avoid contrast issues */
  --bs-btn-hover-color: var(--su-black);
  --bs-btn-hover-bg: var(--su-poppy-dark);
  --bs-btn-hover-border-color: var(--su-black);
  --bs-btn-active-color: var(--su-black);
  --bs-btn-active-bg: var(--su-poppy-dark);
  --bs-btn-active-border-color: var(--su-black);
}

/* Theme Toggle Buttons (High Contrast Semantic Scheme) */
/* Target specific classes to override Bootstrap .btn-outline-secondary */

/* Common Inactive State */
.theme-toggle .btn-check+.btn-outline-secondary {
  background-color: var(--su-black-50);
  /* 50% Black Background */
  color: var(--su-black-50);
  /* Hide icon by matching background */
  border-color: var(--su-black);
  /* Black Border in Light Mode */
  opacity: 1;
}

[data-bs-theme=dark] .theme-toggle .btn-check+.btn-outline-secondary {
  border-color: var(--su-white);
  /* White Border in Dark Mode */
}

/* Hover State */
.theme-toggle .btn-check+.btn-outline-secondary:hover {
  background-color: var(--su-black-50);
  /* Keep BG same */
  border-color: var(--su-black);
  color: var(--su-white);
  /* Reveal icon */
}

[data-bs-theme=dark] .theme-toggle .btn-check+.btn-outline-secondary:hover {
  border-color: var(--su-white);
}

/* Active State - LIGHT MODE (Sun) - Bright Yellow */
.theme-toggle #navThemeLight:checked+.btn-outline-secondary {
  background-color: var(--su-illuminating-light);
  color: var(--su-black);
  /* Black icon for contrast on Yellow */
  border-color: var(--su-black);
}

[data-bs-theme=dark] .theme-toggle #navThemeLight:checked+.btn-outline-secondary {
  background-color: var(--su-illuminating-dark);
  color: var(--su-black);
  border-color: var(--su-white);
}

/* Active State - DARK MODE (Moon) - Deep Lagunita (Teal) */
.theme-toggle #navThemeDark:checked+.btn-outline-secondary {
  background-color: var(--su-lagunita-light);
  color: var(--su-black);
  /* Black icon for contrast on Light Teal */
  border-color: var(--su-black);
}

[data-bs-theme=dark] .theme-toggle #navThemeDark:checked+.btn-outline-secondary {
  background-color: var(--su-lagunita-dark);
  color: var(--su-white);
  /* White icon */
  border-color: var(--su-white);
}

/* Admin View Toggle Buttons (Matching Theme Toggle Style) */
/* Helper class for form display inside button group */
.d-contents {
  display: contents;
}

/* Common Inactive State - matches theme toggle */
.admin-view-toggle .btn-check+.btn-outline-secondary {
  background-color: var(--su-black-50);
  /* 50% Black Background */
  color: var(--su-black-50);
  /* Hide icon by matching background */
  border-color: var(--su-black);
  /* Black Border in Light Mode */
  opacity: 1;
}

[data-bs-theme=dark] .admin-view-toggle .btn-check+.btn-outline-secondary {
  border-color: var(--su-white);
  /* White Border in Dark Mode */
}

/* Hover State */
.admin-view-toggle .btn-check+.btn-outline-secondary:hover {
  background-color: var(--su-black-50);
  /* Keep BG same */
  border-color: var(--su-black);
  color: var(--su-white);
  /* Reveal icon */
}

[data-bs-theme=dark] .admin-view-toggle .btn-check+.btn-outline-secondary:hover {
  border-color: var(--su-white);
}

/* Active State - ADMIN VIEW (Shield) - Lagunita Blue-Green */
.admin-view-toggle #adminViewAdmin:checked+.btn-outline-secondary {
  background-color: var(--su-lagunita-light);
  color: var(--su-black);
  /* Black icon for contrast on Light Lagunita */
  border-color: var(--su-black);
}

[data-bs-theme=dark] .admin-view-toggle #adminViewAdmin:checked+.btn-outline-secondary {
  background-color: var(--su-lagunita-dark);
  color: var(--su-white);
  /* White icon */
  border-color: var(--su-white);
}

/* Active State - USER VIEW (Person) - Illuminating Yellow */
.admin-view-toggle #adminViewUser:checked+.btn-outline-secondary {
  background-color: var(--su-illuminating-light);
  color: var(--su-black);
  /* Black icon for contrast on Yellow */
  border-color: var(--su-black);
}

[data-bs-theme=dark] .admin-view-toggle #adminViewUser:checked+.btn-outline-secondary {
  background-color: var(--su-illuminating-dark);
  color: var(--su-black);
  border-color: var(--su-white);
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  background-color: var(--su-white);
  border-color: var(--su-black-20);
  transition: background-color 0.3s ease;
}

[data-bs-theme=dark] .card {
  background-color: var(--su-black);
  border-color: var(--su-black-80);
  color: var(--su-black-10);
}

.card-header {
  color: var(--su-white);
  background-color: var(--su-cardinal-red);
}

.card-body {
  color: var(--su-black);
}

[data-bs-theme=dark] .card-body {
  color: var(--su-black-10);
  background-color: var(--su-black);
}

.card-footer {
  color: var(--su-black);
  background-color: var(--su-white);
}

[data-bs-theme=dark] .card-footer {
  color: var(--su-black-10);
  background-color: var(--su-black);
}

/* ==========================================================================
   ACCORDION
   ========================================================================== */

.accordion-item {
  color: var(--su-black);
  background-color: var(--su-white);
  border: 1px solid var(--su-black-20);
}

[data-bs-theme=dark] .accordion-item {
  background-color: var(--su-black);
  color: var(--su-black-10);
  border: none;
  margin-bottom: 0.5rem;
  border-radius: 0.375rem;
}

.accordion-button {
  background-color: var(--su-fog);
  color: var(--su-black);
}

[data-bs-theme=dark] .accordion-button {
  background-color: var(--su-stone-dark);
  color: var(--su-white);
}

.accordion-button:not(.collapsed) {
  background-color: var(--su-fog);
  color: var(--su-black);
}

[data-bs-theme=dark] .accordion-button:not(.collapsed) {
  background-color: var(--su-stone-dark);
  color: var(--su-white);
}

.accordion-button:focus {
  box-shadow: 0 0 0 0rem var(--su-fog-dark);
}

[data-bs-theme=dark] .accordion-button::after,
[data-bs-theme=dark] .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  filter: none;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */

.navbar {
  background-color: var(--su-cardinal-red) !important;
  transition: background-color 0.3s ease;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.text-muted {
  color: var(--su-black-50) !important;
}

[data-bs-theme=dark] .text-muted {
  color: var(--su-black-40) !important;
}

.active-session-row {
  background-color: var(--su-fog-light);
}

[data-bs-theme=dark] .active-session-row {
  background-color: var(--su-black-80);
  border-color: var(--su-black-70);
}

[data-bs-theme=dark] .active-session-row .btn {
  border-color: var(--su-black);
}

/* ==========================================================================
   HTMX SPINNER LOGIC
   ========================================================================== */

.spinner {
  display: none;
}

.htmx-request .spinner {
  display: inline-block;
}

.htmx-request .button-text {
  display: none;
}

/* HTMX indicator support (hx-indicator) */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-block;
}

/* Hide button text when indicator is active (sibling selector) */
.htmx-request.htmx-indicator~.button-text {
  display: none;
}

/* ==========================================================================
   TIMESLOT PREFERENCES MATRIX
   ========================================================================== */

.timeslot-matrix {
  border-collapse: separate;
  border-spacing: 4px;
  width: 100%;
}

.timeslot-matrix th {
  text-align: center;
  padding: 0.75rem 0.5rem;
  font-weight: 600;
  color: var(--su-black);
  font-size: 0.9rem;
}

.timeslot-matrix th.day-header {
  background: var(--su-fog);
  border-radius: 8px;
  min-width: 100px;
}

[data-bs-theme=dark] .timeslot-matrix th.day-header,
[data-bs-theme=dark] .timeslot-matrix th.time-header {
  background: var(--su-stone-dark);
  color: var(--su-white);
}

.timeslot-matrix th.time-header {
  background: var(--su-fog);
  border-radius: 8px;
}

.timeslot-matrix td {
  text-align: center;
  padding: 0;
}

.timeslot-cell {
  width: 100%;
  height: 50px;
  background: var(--su-fog-light);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.timeslot-cell:hover {
  background: var(--su-lagunita-light);
  color: var(--su-black);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.timeslot-cell.selected {
  background: var(--su-lagunita-dark);
  color: var(--su-white);
}

.timeslot-cell.selected:hover {
  background: var(--su-lagunita-dark);
  color: var(--su-white);
}

.timeslot-cell.selected::after {
  content: "✓";
  color: var(--su-white);
  font-weight: bold;
}

[data-bs-theme=dark] .timeslot-cell {
  background: var(--su-stone);
  color: var(--su-black);
}

[data-bs-theme=dark] .timeslot-cell:hover {
  background: var(--su-lagunita-light);
  color: var(--su-black);
}

[data-bs-theme=dark] .timeslot-cell.selected {
  background: var(--su-lagunita-dark);
  color: var(--su-white);
}

[data-bs-theme=dark] .timeslot-cell.selected:hover {
  background: var(--su-lagunita-dark);
}

.matrix-container {
  overflow-x: auto;
}

@media (max-width: 768px) {
  .timeslot-matrix th.day-header {
    min-width: 70px;
    font-size: 0.8rem;
  }

  .timeslot-cell {
    height: 40px;
  }
}

/* ==========================================================================
   OTHER DARK OVERRIDES
   ========================================================================== */

/* Modal */
[data-bs-theme=dark] .modal-content {
  background-color: var(--su-black);
  color: var(--su-black-10);
}

/* Tables */
[data-bs-theme=dark] .table {
  --bs-table-bg: var(--su-black-90);
  --bs-table-color: var(--su-black-10);
  --bs-table-border-color: var(--su-black-80);
  color: var(--su-black-10);
}

/* ==========================================================================
   HEATMAP
   ========================================================================== */

.heatmap .heatmap-cell {
  width: 100%;
  height: 50px;
  background-color: var(--su-white);
  background-image: linear-gradient(rgba(var(--su-heatmap-color-rgb), var(--opacity, 0)), rgba(var(--su-heatmap-color-rgb), var(--opacity, 0)));
  border-radius: 4px;
  /* Slightly less rounded than timeslot buttons */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--su-white);
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

[data-bs-theme=dark] .heatmap .heatmap-cell {
  background-color: var(--su-black-90);
}

.heatmap .heatmap-cell:hover {
  background: var(--su-lagunita-light);
  color: var(--su-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.heatmap-cell-wrapper {
  background-color: transparent;
  border-radius: 4px;
  padding: 0;
}

[data-bs-theme=dark] .heatmap-cell-wrapper {
  background-color: transparent;
}



[data-bs-theme=dark] th,
[data-bs-theme=dark] td {
  border-color: var(--su-black-80);
}

/* Form Controls */
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select {
  background-color: var(--su-black-80);
  border-color: var(--su-black-70);
  color: var(--su-black-10);
}

[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
  background-color: var(--su-black-70);
  border-color: var(--su-bay);
  color: var(--su-white);
}

/* Labels and Text */
[data-bs-theme=dark] label,
[data-bs-theme=dark] .form-label,
[data-bs-theme=dark] .form-check-label {
  color: var(--su-black-10);
}

/* ==========================================================================
   SELECT2 DARK OVERRIDES
   ========================================================================== */

/* Main Selection Box */
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection {
  background-color: var(--su-black-80);
  border-color: var(--su-black-70);
  color: var(--su-black-10);
}

[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: var(--su-black-10);
}

[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection__placeholder {
  color: var(--su-black-10);
}

/* Dropdown Menu */
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-dropdown {
  background-color: var(--su-black-80);
  border-color: var(--su-black-70);
  color: var(--su-black-10);
}

/* Search input inside dropdown */
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-search__field {
  background-color: var(--su-black-70) !important;
  border-color: var(--su-black-60);
  color: var(--su-white);
}

/* Results */
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-results__option {
  color: var(--su-black-10);
}

/* Hover/Focus State */
/* Hover/Focus State */
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: var(--su-digital-red) !important;
  color: var(--su-white) !important;
}

/* Focus State of Selection Box */
[data-bs-theme=dark] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
[data-bs-theme=dark] .select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--su-bay);
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
  /* Bootstrap focus shadow */
}

/* ==========================================================================
   GLOBAL UTILITIES
   ========================================================================== */

/* Ensure spinners inside buttons inherit the button text color (e.g. white) */
.btn .spinner-border,
.btn .spinner-grow {
  color: inherit !important;
}

/* ==========================================================================
   FORM SWITCHES - Admin Toggle Styling (matches .btn-primary)
   ========================================================================== */

/* Checked state - Lagunita Light (light mode) */
.form-check-input:checked {
  background-color: var(--su-lagunita-light);
  border-color: var(--su-black);
}

/* Override the switch background image (the toggle knob) - dark knob for contrast */
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%232E2D29'/%3e%3c/svg%3e");
}

/* Focus ring */
.form-check-input:focus {
  border-color: var(--su-lagunita);
  box-shadow: 0 0 0 0.25rem rgba(var(--su-lagunita-rgb), 0.25);
}

/* Dark mode - Lagunita Dark */
[data-bs-theme=dark] .form-check-input:checked {
  background-color: var(--su-lagunita-dark);
  border-color: var(--su-white);
}

/* Dark mode knob - white for contrast on dark green */
/* ==========================================================================
   ALERTS / NOTIFICATIONS
   ========================================================================== */

.alert {
  border: none;
  color: var(--su-black);
  border-radius: 4px;
}

.alert-success {
  background-color: var(--su-bay-light);
}

.alert-warning {
  background-color: var(--su-illuminating-light);
}

.alert-danger {
  background-color: var(--su-cardinal-red-light);
}

.alert-info {
  background-color: var(--su-sky-light);
}

/* Dark Mode Overrides */
[data-bs-theme=dark] .alert {
  color: var(--su-white);
}

[data-bs-theme=dark] .alert-success {
  background-color: var(--su-bay-dark);
}

[data-bs-theme=dark] .alert-warning {
  background-color: var(--su-illuminating-dark);
  color: var(--su-black); /* Keep black text for visibility on gold */
}

[data-bs-theme=dark] .alert-danger {
  background-color: var(--su-cardinal-red-dark);
}

[data-bs-theme=dark] .alert-info {
  background-color: var(--su-sky-dark);
}

/* Fix close button visibility in dark mode colored alerts */
[data-bs-theme=dark] .alert .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Exception: Warning alert uses black text, so keep black close button */
[data-bs-theme=dark] .alert-warning .btn-close {
  filter: none;
}

/* Enhanced Radio Button for Tables (Light & Dark Theme support) */
.table-radio-btn {
  border-color: var(--su-black-60) !important;
  border-width: 2px;
}

[data-bs-theme=dark] .table-radio-btn {
  border-color: var(--su-black-30) !important;
}

/* Standardized Button Widths */
.btn-w-sm { min-width: 120px; }
.btn-w-md { min-width: 240px; }