/**
 * Custom Color Scheme for PPA Handsup
 *
 * Color Palette:
 * - Cobalt Blue: #0240ab (primary actions, links)
 * - Cinnabar: #f4442e (danger/alerts, accents)
 * - Viridian: #417b5a (success, confirmation)
 * - Honeydew: #e0efde (muted/secondary backgrounds)
 * - White Smoke: #f6f4f3 (backgrounds, light elements)
 *
 * Typography:
 * - Headings & Primary: Comfortaa (Google Fonts)
 * - Body & UI: Arvo (Google Fonts)
 */

/* ===== Google Fonts Import ===== */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Solway&family=Solway:wght@300;400;500;700;800&display=swap');

/* ===== CSS Custom Properties ===== */
:root {
  /* Typography */
  --font-family-headings: 'Comfortaa', cursive;
  --font-family-base: 'Solway', seriff;
  --font-family-monospace: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Color Variables - CSS HEX */
  --cobalt-blue: #0240abff;
  --cinnabar: #f4442eff;
  --viridian: #417b5aff;
  --honeydew: #e0efdeff;
  --white-smoke: #f6f4f3ff;

  /* Backwards compatibility aliases */
  --color-cobalt-blue: #0240ab;
  --color-cinnabar: #f4442e;
  --color-sage: #e0efde;
  --color-cream: #f6f4f3;
  --color-viridian: #417b5a;

  /* Bootstrap Override Variables */
  --bs-body-font-family: 'Solway', seriff;
  --bs-font-monospace: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --bs-primary: #0240ab;
  --bs-primary-rgb: 2, 64, 171;
  --bs-danger: #f4442e;
  --bs-danger-rgb: 244, 68, 46;
  --bs-success: #417b5a;
  --bs-success-rgb: 65, 123, 90;
  --bs-secondary: #e0efde;
  --bs-secondary-rgb: 224, 239, 222;
  --bs-body-bg: #f6f4f3;
  --bs-body-bg-rgb: 246, 244, 243;
  --bs-body-color: #020202;
  --bs-body-color-rgb: 2, 2, 2;

  /* Link Colors */
  --bs-link-color: #0240ab;
  --bs-link-hover-color: #012d7a;

  /* Border and Divider Colors */
  --bs-border-color: rgba(224, 239, 222, 0.5);
}

/* ===== Dark Mode Variables ===== */
[data-bs-theme="dark"] {
  /* Typography (same as light mode) */
  --font-family-headings: 'Comfortaa', cursive;
  --font-family-base: 'Solway', seriff;
  --font-family-monospace: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Dark Mode Color Palette - Adjusted for contrast */
  --cobalt-blue: #5a8fff;
  --cinnabar: #ff6b5a;
  --viridian: #5dba82;
  --honeydew: #2d4a3e;
  --white-smoke: #1a1d23;

  /* Backwards compatibility aliases */
  --color-cobalt-blue: #5a8fff;
  --color-cinnabar: #ff6b5a;
  --color-sage: #2d4a3e;
  --color-cream: #1a1d23;
  --color-viridian: #5dba82;

  /* Bootstrap Override Variables for Dark Mode */
  --bs-body-font-family: 'Solway', seriff;
  --bs-font-monospace: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --bs-primary: #5a8fff;
  --bs-primary-rgb: 90, 143, 255;
  --bs-danger: #ff6b5a;
  --bs-danger-rgb: 255, 107, 90;
  --bs-success: #5dba82;
  --bs-success-rgb: 93, 186, 130;
  --bs-secondary: #2d4a3e;
  --bs-secondary-rgb: 45, 74, 62;
  --bs-body-bg: #1a1d23;
  --bs-body-bg-rgb: 26, 29, 35;
  --bs-body-color: #e8e9ea;
  --bs-body-color-rgb: 232, 233, 234;

  /* Link Colors for Dark Mode */
  --bs-link-color: #5a8fff;
  --bs-link-hover-color: #85abff;

  /* Border and Divider Colors for Dark Mode */
  --bs-border-color: rgba(93, 186, 130, 0.2);
}

/* ===== Dark Mode Specific Overrides ===== */
[data-bs-theme="dark"] body {
  background-color: var(--white-smoke);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .navbar-light {
  background-color: #23262d !important;
  border-bottom: 1px solid rgba(93, 186, 130, 0.2);
}

[data-bs-theme="dark"] .navbar-light .navbar-brand,
[data-bs-theme="dark"] .navbar-light .nav-link {
  color: #e8e9ea !important;
}

[data-bs-theme="dark"] .navbar-light .nav-link:hover,
[data-bs-theme="dark"] .navbar-light .nav-link:focus {
  color: #5a8fff !important;
}

[data-bs-theme="dark"] .card {
  background-color: #23262d;
  border-color: rgba(93, 186, 130, 0.2);
  color: #e8e9ea;
}

[data-bs-theme="dark"] .card-header {
  background-color: #2d4a3e;
  border-bottom-color: rgba(93, 186, 130, 0.2);
  color: #e8e9ea;
}

[data-bs-theme="dark"] .btn-primary {
  background-color: #5a8fff;
  border-color: #5a8fff;
  color: #1a1d23;
}

[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus {
  background-color: #85abff;
  border-color: #85abff;
  color: #1a1d23;
}

[data-bs-theme="dark"] .btn-secondary {
  background-color: #2d4a3e;
  border-color: #2d4a3e;
  color: #e8e9ea;
}

[data-bs-theme="dark"] .btn-secondary:hover,
[data-bs-theme="dark"] .btn-secondary:focus {
  background-color: #3a6150;
  border-color: #3a6150;
  color: #e8e9ea;
}

[data-bs-theme="dark"] .btn-danger {
  background-color: #ff6b5a;
  border-color: #ff6b5a;
  color: #1a1d23;
}

[data-bs-theme="dark"] .btn-danger:hover,
[data-bs-theme="dark"] .btn-danger:focus {
  background-color: #ff8e7f;
  border-color: #ff8e7f;
  color: #1a1d23;
}

[data-bs-theme="dark"] .btn-success {
  background-color: #5dba82;
  border-color: #5dba82;
  color: #1a1d23;
}

[data-bs-theme="dark"] .btn-success:hover,
[data-bs-theme="dark"] .btn-success:focus {
  background-color: #7ecb9d;
  border-color: #7ecb9d;
  color: #1a1d23;
}

[data-bs-theme="dark"] .btn-outline-primary {
  color: #5a8fff;
  border-color: #5a8fff;
}

[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus {
  background-color: #5a8fff;
  border-color: #5a8fff;
  color: #1a1d23;
}

[data-bs-theme="dark"] .btn-outline-danger {
  color: #ff6b5a;
  border-color: #ff6b5a;
}

[data-bs-theme="dark"] .btn-outline-danger:hover,
[data-bs-theme="dark"] .btn-outline-danger:focus {
  background-color: #ff6b5a;
  border-color: #ff6b5a;
  color: #1a1d23;
}

[data-bs-theme="dark"] .btn-outline-success {
  color: #5dba82;
  border-color: #5dba82;
}

[data-bs-theme="dark"] .btn-outline-success:hover,
[data-bs-theme="dark"] .btn-outline-success:focus {
  background-color: #5dba82;
  border-color: #5dba82;
  color: #1a1d23;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #23262d;
  border-color: rgba(93, 186, 130, 0.3);
  color: #e8e9ea;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #23262d;
  border-color: #5a8fff;
  box-shadow: 0 0 0 0.25rem rgba(90, 143, 255, 0.25);
  color: #e8e9ea;
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: #8a8d91;
}

[data-bs-theme="dark"] .form-check-input {
  background-color: #23262d;
  border-color: rgba(93, 186, 130, 0.3);
}

[data-bs-theme="dark"] .form-check-input:checked {
  background-color: #5a8fff;
  border-color: #5a8fff;
}

[data-bs-theme="dark"] .form-check-input:focus {
  border-color: #5a8fff;
  box-shadow: 0 0 0 0.25rem rgba(90, 143, 255, 0.25);
}

[data-bs-theme="dark"] .dropdown-menu {
  background-color: #23262d;
  border-color: rgba(93, 186, 130, 0.2);
}

[data-bs-theme="dark"] .dropdown-item {
  color: #e8e9ea;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: rgba(90, 143, 255, 0.15);
  color: #5a8fff;
}

[data-bs-theme="dark"] .dropdown-divider {
  border-top-color: rgba(93, 186, 130, 0.2);
}

[data-bs-theme="dark"] .modal-content {
  background-color: #23262d;
  border-color: rgba(93, 186, 130, 0.2);
  color: #e8e9ea;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  border-color: rgba(93, 186, 130, 0.2);
}

[data-bs-theme="dark"] .alert-primary {
  background-color: rgba(90, 143, 255, 0.15);
  border-color: #5a8fff;
  color: #85abff;
}

[data-bs-theme="dark"] .alert-danger {
  background-color: rgba(255, 107, 90, 0.15);
  border-color: #ff6b5a;
  color: #ff8e7f;
}

[data-bs-theme="dark"] .alert-success {
  background-color: rgba(93, 186, 130, 0.15);
  border-color: #5dba82;
  color: #7ecb9d;
}

[data-bs-theme="dark"] .alert-secondary {
  background-color: rgba(45, 74, 62, 0.3);
  border-color: #2d4a3e;
  color: #e8e9ea;
}

[data-bs-theme="dark"] .table {
  color: #e8e9ea;
  border-color: rgba(93, 186, 130, 0.2);
}

[data-bs-theme="dark"] .table-hover tbody tr:hover {
  background-color: rgba(93, 186, 130, 0.1);
}

[data-bs-theme="dark"] .bg-light {
  background-color: #2d4a3e !important;
  color: #e8e9ea !important;
}

[data-bs-theme="dark"] a {
  color: #5a8fff;
}

[data-bs-theme="dark"] a:hover,
[data-bs-theme="dark"] a:focus {
  color: #85abff;
}

[data-bs-theme="dark"] .list-group-item {
  background-color: #23262d;
  border-color: rgba(93, 186, 130, 0.2);
  color: #e8e9ea;
}

[data-bs-theme="dark"] .list-group-item-action:hover,
[data-bs-theme="dark"] .list-group-item-action:focus {
  background-color: rgba(90, 143, 255, 0.1);
  color: #5a8fff;
}

[data-bs-theme="dark"] .pagination .page-link {
  background-color: #23262d;
  border-color: rgba(93, 186, 130, 0.2);
  color: #5a8fff;
}

[data-bs-theme="dark"] .pagination .page-link:hover {
  background-color: rgba(90, 143, 255, 0.15);
  border-color: #5a8fff;
  color: #85abff;
}

[data-bs-theme="dark"] .pagination .page-item.active .page-link {
  background-color: #5a8fff;
  border-color: #5a8fff;
  color: #1a1d23;
}

[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end {
  border-color: rgba(93, 186, 130, 0.2) !important;
}

[data-bs-theme="dark"] .text-muted {
  color: #8a8d91 !important;
}

/* ===== Global Styles ===== */
body {
  font-family: var(--font-family-base);
  background-color: var(--white-smoke);
  color: var(--bs-body-color);
}

/* Apply Comfortaa font to headings and primary elements */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.btn, .badge, .nav-link, .navbar-brand, .dropdown-toggle,
.card-title, .modal-title, .alert-heading {
  font-family: var(--font-family-headings);
}

/* Apply Arvo font to body text and UI elements */
p, a, span, div, li, td, th,
input, textarea, select, label, option,
.card-text, .form-control, .form-label, .form-select, .form-check-label,
.alert, .breadcrumb, .pagination, .tooltip, .popover {
  font-family: var(--font-family-base);
}

/* Preserve monospace for code elements */
code, kbd, pre, samp, tt, var,
.font-monospace {
  font-family: var(--font-family-monospace);
}

/* Ensure input placeholders use Arvo */
::placeholder {
  font-family: var(--font-family-base);
}

::-webkit-input-placeholder {
  font-family: var(--font-family-base);
}

::-moz-placeholder {
  font-family: var(--font-family-base);
}

:-ms-input-placeholder {
  font-family: var(--font-family-base);
}

/* ===== Bootstrap Component Overrides ===== */

/* Primary Buttons */
.btn-primary {
  background-color: var(--color-cobalt-blue);
  border-color: var(--color-cobalt-blue);
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #012d7a;
  border-color: #012d7a;
  color: #ffffff;
}

.btn-primary:active,
.btn-primary.active {
  background-color: #011e52;
  border-color: #011e52;
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--color-cobalt-blue);
  border-color: var(--color-cobalt-blue);
  opacity: 0.65;
}

/* Primary Outline Buttons */
.btn-outline-primary {
  color: var(--color-cobalt-blue);
  border-color: var(--color-cobalt-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--color-cobalt-blue);
  border-color: var(--color-cobalt-blue);
  color: #ffffff;
}

/* Danger Buttons */
.btn-danger {
  background-color: var(--color-cinnabar);
  border-color: var(--color-cinnabar);
  color: #ffffff;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: #d33622;
  border-color: #d33622;
  color: #ffffff;
}

.btn-danger:active,
.btn-danger.active {
  background-color: #b02919;
  border-color: #b02919;
}

/* Danger Outline Buttons */
.btn-outline-danger {
  color: var(--color-cinnabar);
  border-color: var(--color-cinnabar);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: var(--color-cinnabar);
  border-color: var(--color-cinnabar);
  color: #ffffff;
}

/* Secondary Buttons */
.btn-secondary {
  background-color: var(--honeydew);
  border-color: var(--honeydew);
  color: #2c3e50;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #c8dfc5;
  border-color: #c8dfc5;
  color: #2c3e50;
}

/* Success Buttons */
.btn-success {
  background-color: var(--viridian);
  border-color: var(--viridian);
  color: #ffffff;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #356348;
  border-color: #356348;
  color: #ffffff;
}

.btn-success:active,
.btn-success.active {
  background-color: #2a4f39;
  border-color: #2a4f39;
}

/* Success Outline Buttons */
.btn-outline-success {
  color: var(--viridian);
  border-color: var(--viridian);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: var(--viridian);
  border-color: var(--viridian);
  color: #ffffff;
}

/* Badges */
.badge.bg-primary {
  background-color: var(--cobalt-blue) !important;
}

.badge.bg-danger {
  background-color: var(--cinnabar) !important;
}

.badge.bg-info {
  background-color: var(--cobalt-blue) !important;
}

.badge.bg-success {
  background-color: var(--viridian) !important;
}

.badge.bg-secondary {
  background-color: var(--honeydew) !important;
  color: #2c3e50 !important;
}

/* Alerts */
.alert-primary {
  background-color: rgba(2, 64, 171, 0.1);
  border-color: var(--cobalt-blue);
  color: #012d7a;
}

.alert-danger {
  background-color: rgba(244, 68, 46, 0.1);
  border-color: var(--cinnabar);
  color: #b02919;
}

.alert-info {
  background-color: rgba(2, 64, 171, 0.1);
  border-color: var(--cobalt-blue);
  color: #012d7a;
}

.alert-success {
  background-color: rgba(65, 123, 90, 0.1);
  border-color: var(--viridian);
  color: #2a4f39;
}

.alert-secondary {
  background-color: rgba(224, 239, 222, 0.3);
  border-color: var(--honeydew);
  color: #2c3e50;
}

/* Links */
a {
  color: var(--color-cobalt-blue);
}

a:hover,
a:focus {
  color: #012d7a;
}

/* Text Colors */
.text-primary {
  color: var(--cobalt-blue) !important;
}

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

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

.text-muted {
  color: #6c757d !important;
}

/* Backgrounds */
.bg-primary {
  background-color: var(--cobalt-blue) !important;
  color: #ffffff !important;
}

.bg-danger {
  background-color: var(--cinnabar) !important;
  color: #ffffff !important;
}

.bg-success {
  background-color: var(--viridian) !important;
  color: #ffffff !important;
}

.bg-light {
  background-color: var(--honeydew) !important;
  border-color: var(--honeydew);
}

/* Form Controls */
.form-control:focus {
  border-color: var(--cobalt-blue);
  box-shadow: 0 0 0 0.25rem rgba(2, 64, 171, 0.25);
}

.form-check-input:checked {
  background-color: var(--cobalt-blue);
  border-color: var(--cobalt-blue);
}

.form-check-input:focus {
  border-color: var(--cobalt-blue);
  box-shadow: 0 0 0 0.25rem rgba(2, 64, 171, 0.25);
}

/* Cards */
.card {
  background-color: #ffffff;
  border-color: rgba(224, 239, 222, 0.5);
}

.card-header {
  background-color: var(--honeydew);
  border-bottom-color: rgba(224, 239, 222, 0.5);
}

/* Borders */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: rgba(224, 239, 222, 0.5) !important;
}

/* Progress Bars */
.progress-bar {
  background-color: var(--cobalt-blue);
}

.progress-bar.bg-danger {
  background-color: var(--cinnabar) !important;
}

.progress-bar.bg-success {
  background-color: var(--viridian) !important;
}

/* Nav Tabs/Pills */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  background-color: var(--cobalt-blue);
  color: #ffffff;
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
  color: var(--cobalt-blue);
}

/* Tables */
.table-primary {
  background-color: rgba(2, 64, 171, 0.1);
}

.table-success {
  background-color: rgba(65, 123, 90, 0.1);
}

.table-hover tbody tr:hover {
  background-color: rgba(224, 239, 222, 0.3);
}

/* Pagination */
.pagination .page-link {
  color: var(--cobalt-blue);
}

.pagination .page-link:hover {
  color: #012d7a;
  background-color: var(--honeydew);
  border-color: var(--cobalt-blue);
}

.pagination .page-item.active .page-link {
  background-color: var(--cobalt-blue);
  border-color: var(--cobalt-blue);
}

/* Spinners */
.spinner-border.text-primary {
  color: var(--cobalt-blue) !important;
}

.spinner-border.text-success {
  color: var(--viridian) !important;
}

/* Dropdowns */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(2, 64, 171, 0.1);
  color: var(--cobalt-blue);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--cobalt-blue);
  color: #ffffff;
}

/* List Groups */
.list-group-item-primary {
  background-color: rgba(2, 64, 171, 0.1);
  color: #012d7a;
}

.list-group-item-danger {
  background-color: rgba(244, 68, 46, 0.1);
  color: #b02919;
}

.list-group-item-success {
  background-color: rgba(65, 123, 90, 0.1);
  color: #2a4f39;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: rgba(224, 239, 222, 0.3);
  color: var(--cobalt-blue);
}

/* Modals */
.modal-header {
  border-bottom-color: rgba(224, 239, 222, 0.5);
}

.modal-footer {
  border-top-color: rgba(224, 239, 222, 0.5);
}

/* Tooltips and Popovers */
.tooltip-inner {
  background-color: var(--color-black);
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--color-black);
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: var(--color-black);
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: var(--color-black);
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: var(--color-black);
}

/* ===== Logo Theme Switching ===== */
/* Light mode: show blue logo, hide white logo */
.logo-light {
  display: inline-block !important;
}

.logo-dark {
  display: none !important;
}

/* Dark mode: hide blue logo, show white logo */
[data-bs-theme="dark"] .logo-light {
  display: none !important;
}

[data-bs-theme="dark"] .logo-dark {
  display: inline-block !important;
}

/* ===== Custom Utility Classes ===== */

/* Background Utilities */
.bg-white-smoke {
  background-color: var(--white-smoke) !important;
}

.bg-honeydew {
  background-color: var(--honeydew) !important;
  color: #2c3e50;
}

.bg-cobalt {
  background-color: var(--cobalt-blue) !important;
  color: #ffffff;
}

.bg-cinnabar {
  background-color: var(--cinnabar) !important;
  color: #ffffff;
}

.bg-viridian {
  background-color: var(--viridian) !important;
  color: #ffffff;
}

/* Legacy aliases for backwards compatibility */
.bg-cream {
  background-color: var(--white-smoke) !important;
}

.bg-sage {
  background-color: var(--honeydew) !important;
  color: #2c3e50;
}

/* Text Color Utilities */
.text-honeydew {
  color: var(--honeydew) !important;
}

.text-cobalt {
  color: var(--cobalt-blue) !important;
}

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

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

.text-white-smoke {
  color: var(--white-smoke) !important;
}

/* Legacy aliases */
.text-sage {
  color: var(--honeydew) !important;
}

.text-cream {
  color: var(--white-smoke) !important;
}

/* Border Utilities */
.border-primary {
  border-color: var(--cobalt-blue) !important;
}

.border-danger {
  border-color: var(--cinnabar) !important;
}

.border-success {
  border-color: var(--viridian) !important;
}

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

/* Legacy alias */
.border-sage {
  border-color: var(--honeydew) !important;
}