/* ==========================================================================
   Pantheon (elementary OS) — Bootstrap 5 Theme
   Inspired by elementary OS Pantheon desktop environment.
   Include AFTER bootstrap.min.css.
   ========================================================================== */

:root {
  /* Pantheon Light Palette */
  --pan-primary: #3880ff;
  --pan-primary-rgb: 56, 128, 255;
  --pan-primary-hover: #1c68e3;
  --pan-on-primary: #ffffff;

  --pan-bg: #f4f5f7;
  --pan-surface: #ffffff;
  --pan-surface-alt: #fafafa;
  --pan-border: #d0d3d8;

  --pan-foreground: #22272c;
  --pan-foreground-muted: #6b7280;

  --pan-radius: 6px;

  /* Bootstrap Core Overrides */
  --bs-primary: var(--pan-primary);
  --bs-primary-rgb: var(--pan-primary-rgb);
  --bs-secondary: #6b7280;
  --bs-secondary-rgb: 107, 114, 128;
  --bs-success: #3a9104;
  --bs-success-rgb: 58, 145, 4;
  --bs-info: #0073e6;
  --bs-info-rgb: 0, 115, 230;
  --bs-warning: #f57c00;
  --bs-warning-rgb: 245, 124, 0;
  --bs-danger: #e53935;
  --bs-danger-rgb: 229, 57, 53;
  --bs-light: var(--pan-surface-alt);
  --bs-light-rgb: 250, 250, 250;
  --bs-dark: var(--pan-foreground);
  --bs-dark-rgb: 34, 39, 44;

  --bs-body-bg: var(--pan-bg);
  --bs-body-color: var(--pan-foreground);
  --bs-emphasis-color: #000000;
  --bs-secondary-color: var(--pan-foreground-muted);
  --bs-tertiary-color: var(--pan-foreground-muted);
  --bs-secondary-bg: var(--pan-surface-alt);
  --bs-tertiary-bg: var(--pan-surface);
  --bs-border-color: var(--pan-border);

  --bs-font-sans-serif: "Inter", "Open Sans", system-ui, -apple-system, sans-serif;
  --bs-font-monospace: "Roboto Mono", monospace;

  --bs-border-radius: var(--pan-radius);
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 8px;

  --bs-focus-ring-width: 2px;
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color: var(--pan-primary);
}

[data-bs-theme="dark"] {
  --pan-primary: #3880ff;
  --pan-primary-rgb: 56, 128, 255;
  --pan-primary-hover: #5896ff;
  --pan-on-primary: #ffffff;

  --pan-bg: #1e2227;
  --pan-surface: #282d34;
  --pan-surface-alt: #21252b;
  --pan-border: #3b424d;

  --pan-foreground: #f0f2f5;
  --pan-foreground-muted: #9da5b4;

  --bs-primary: var(--pan-primary);
  --bs-primary-rgb: var(--pan-primary-rgb);
  --bs-secondary: #9da5b4;
  --bs-secondary-rgb: 157, 165, 180;
  --bs-success: #4caf50;
  --bs-success-rgb: 76, 175, 80;
  --bs-info: #64b5f6;
  --bs-info-rgb: 100, 181, 246;
  --bs-warning: #ffb74d;
  --bs-warning-rgb: 255, 183, 77;
  --bs-danger: #e57373;
  --bs-danger-rgb: 229, 115, 115;
  --bs-light: var(--pan-surface-alt);
  --bs-light-rgb: 33, 37, 43;
  --bs-dark: var(--pan-foreground);
  --bs-dark-rgb: 240, 242, 245;

  --bs-body-bg: var(--pan-bg);
  --bs-body-color: var(--pan-foreground);
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: var(--pan-foreground-muted);
  --bs-tertiary-color: var(--pan-foreground-muted);
  --bs-secondary-bg: var(--pan-surface-alt);
  --bs-tertiary-bg: var(--pan-surface);
  --bs-border-color: var(--pan-border);
}

body {
  font-family: var(--bs-font-sans-serif);
  background-color: var(--pan-bg);
  color: var(--pan-foreground);
}

.card {
  background-color: var(--pan-surface);
  border: 1px solid var(--pan-border);
  border-radius: var(--pan-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn {
  border-radius: var(--pan-radius);
  font-weight: 500;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--pan-border);
}

.btn-primary {
  background-color: var(--pan-primary);
  border-color: var(--pan-primary);
  color: var(--pan-on-primary);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--pan-primary-hover);
  border-color: var(--pan-primary-hover);
}

.form-control, .form-select {
  background-color: var(--pan-surface);
  border: 1px solid var(--pan-border);
  border-radius: var(--pan-radius);
  color: var(--pan-foreground);
}

.form-control:focus, .form-select:focus {
  border-color: var(--pan-primary);
  box-shadow: 0 0 0 2px rgba(56, 128, 255, 0.25);
}

.navbar {
  background-color: var(--pan-surface) !important;
  border-bottom: 1px solid var(--pan-border);
}

.dropdown-menu {
  background-color: var(--pan-surface);
  border: 1px solid var(--pan-border);
  border-radius: var(--pan-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-content {
  background-color: var(--pan-surface);
  border: 1px solid var(--pan-border);
  border-radius: 8px;
}