/**
 * Custom Color Scheme for PPA Orgs
 *
 * Color Palette:
 * - Pacific Cyan: #2EB2CE (primary brand color, links, buttons, highlights)
 * - Mint: #6EB07E (success and positive action color)
 * - Flame: #E4572E (danger and warning color)
 * - Payne's Gray: #525B76 (secondary, neutral tone for contrast and text)
 * - Space Cadet: #1b2f33 (dark base for dark backgrounds and accents)
 *
 * Typography:
 * - Headings & Primary: Comfortaa (Google Fonts)
 * - Body & UI: Solway (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', serif;
  --font-family-monospace: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Color Variables - Brand Colors */
  --pacific-cyan: #2EB2CE;
  --mint: #6EB07E;
  --flame: #E4572E;
  --paynes-gray: #525B76;
  --space-cadet: #1b2f33;

  /* Backwards compatibility aliases */
  --color-pacific-cyan: #2EB2CE;
  --color-mint: #6EB07E;
  --color-flame: #E4572E;
  --color-paynes-gray: #525B76;
  --color-space-cadet: #1b2f33;

  /* Bootstrap Override Variables */
  --bs-body-font-family: 'Solway', serif;
  --bs-font-monospace: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --bs-primary: #2EB2CE;
  --bs-primary-rgb: 46, 178, 206;
  --bs-danger: #E4572E;
  --bs-danger-rgb: 228, 87, 46;
  --bs-success: #6EB07E;
  --bs-success-rgb: 110, 176, 126;
  --bs-secondary: #525B76;
  --bs-secondary-rgb: 82, 91, 118;
  --bs-dark: #1b2f33;
  --bs-dark-rgb: 32, 30, 80;
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: #1b2f33;
  --bs-body-color-rgb: 32, 30, 80;

  /* Link Colors */
  --bs-link-color: #2EB2CE;
  --bs-link-hover-color: #1f8aa3;

  /* Border and Divider Colors */
  --bs-border-color: rgba(82, 91, 118, 0.2);

  /* Sidebar Colors */
  --sidebar-bg-start: #335F68;
  --sidebar-bg-end: #4a6f7a;
  --sidebar-text: #ffffff;
  --sidebar-text-muted: rgba(255, 255, 255, 0.7);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
  --sidebar-active-bg: rgba(255, 255, 255, 0.2);
  --sidebar-active-accent: #ffc107;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-input-bg: rgba(255, 255, 255, 0.1);
  --sidebar-input-border: rgba(255, 255, 255, 0.2);
  --sidebar-input-focus-bg: rgba(255, 255, 255, 0.15);
  --sidebar-input-focus-border: rgba(255, 255, 255, 0.4);
  --sidebar-scrollbar-track: rgba(255, 255, 255, 0.05);
  --sidebar-scrollbar-thumb: rgba(255, 255, 255, 0.2);
  --sidebar-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
}

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

  /* Dark Mode Color Palette - Adjusted for contrast */
  --pacific-cyan: #5ac7df;
  --mint: #8dc99d;
  --flame: #ff7759;
  --paynes-gray: #7a8396;
  --space-cadet: #0f1a1c;

  /* Backwards compatibility aliases */
  --color-pacific-cyan: #5ac7df;
  --color-mint: #8dc99d;
  --color-flame: #ff7759;
  --color-paynes-gray: #7a8396;
  --color-space-cadet: #0f1a1c;

  /* Bootstrap Override Variables for Dark Mode */
  --bs-body-font-family: 'Solway', serif;
  --bs-font-monospace: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --bs-primary: #5ac7df;
  --bs-primary-rgb: 90, 199, 223;
  --bs-danger: #ff7759;
  --bs-danger-rgb: 255, 119, 89;
  --bs-success: #8dc99d;
  --bs-success-rgb: 141, 201, 157;
  --bs-secondary: #7a8396;
  --bs-secondary-rgb: 122, 131, 150;
  --bs-dark: #0f1a1c;
  --bs-dark-rgb: 15, 26, 28;
  --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: #5ac7df;
  --bs-link-hover-color: #85d7eb;

  /* Border and Divider Colors for Dark Mode */
  --bs-border-color: rgba(122, 131, 150, 0.3);

  /* Sidebar Colors for Dark Mode - Lighter for better contrast */
  --sidebar-bg-start: #5a8fa0;
  --sidebar-bg-end: #6aa5b8;
  --sidebar-text: #ffffff;
  --sidebar-text-muted: rgba(255, 255, 255, 0.7);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.15);
  --sidebar-active-bg: rgba(255, 255, 255, 0.25);
  --sidebar-active-accent: #ffd54f;
  --sidebar-border: rgba(255, 255, 255, 0.15);
  --sidebar-input-bg: rgba(255, 255, 255, 0.1);
  --sidebar-input-border: rgba(255, 255, 255, 0.25);
  --sidebar-input-focus-bg: rgba(255, 255, 255, 0.2);
  --sidebar-input-focus-border: rgba(255, 255, 255, 0.5);
  --sidebar-scrollbar-track: rgba(255, 255, 255, 0.1);
  --sidebar-scrollbar-thumb: rgba(255, 255, 255, 0.3);
  --sidebar-scrollbar-thumb-hover: rgba(255, 255, 255, 0.4);
}

/* ===== Global Styles ===== */
body {
  font-family: var(--font-family-base);
  background-color: var(--bs-body-bg);
  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(--pacific-cyan);
  border-color: var(--pacific-cyan);
  color: #ffffff;
}

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

.btn-primary:active,
.btn-primary.active {
  background-color: #186a7f;
  border-color: #186a7f;
}

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

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

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

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

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

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

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

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

/* Secondary Buttons */
.btn-secondary {
  background-color: var(--paynes-gray);
  border-color: var(--paynes-gray);
  color: #ffffff;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #3f4760;
  border-color: #3f4760;
  color: #ffffff;
}

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

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

.btn-success:active,
.btn-success.active {
  background-color: #4a7c56;
  border-color: #4a7c56;
}

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

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

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

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

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

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

.badge.bg-secondary {
  background-color: var(--paynes-gray) !important;
  color: #ffffff !important;
}

.badge.bg-dark {
  background-color: var(--space-cadet) !important;
  color: #ffffff !important;
}

/* Alerts */
.alert-primary {
  background-color: rgba(46, 178, 206, 0.1);
  border-color: var(--pacific-cyan);
  color: #1f8aa3;
}

.alert-danger {
  background-color: rgba(228, 87, 46, 0.1);
  border-color: var(--flame);
  color: #a8371d;
}

.alert-info {
  background-color: rgba(46, 178, 206, 0.1);
  border-color: var(--pacific-cyan);
  color: #1f8aa3;
}

.alert-success {
  background-color: rgba(110, 176, 126, 0.1);
  border-color: var(--mint);
  color: #4a7c56;
}

.alert-secondary {
  background-color: rgba(82, 91, 118, 0.1);
  border-color: var(--paynes-gray);
  color: var(--paynes-gray);
}

/* Links */
a {
  color: var(--pacific-cyan);
}

a:hover,
a:focus {
  color: #1f8aa3;
}

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

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

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

.text-muted {
  color: var(--paynes-gray) !important;
}

.text-dark {
  color: var(--space-cadet) !important;
}

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

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

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

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

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

/* Form Controls */
.form-control:focus {
  border-color: var(--pacific-cyan);
  box-shadow: 0 0 0 0.25rem rgba(46, 178, 206, 0.25);
}

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

.form-check-input:focus {
  border-color: var(--pacific-cyan);
  box-shadow: 0 0 0 0.25rem rgba(46, 178, 206, 0.25);
}

/* Cards */
.card {
  background-color: #ffffff;
  border-color: rgba(82, 91, 118, 0.2);
}

.card-header {
  background-color: rgba(82, 91, 118, 0.05);
  border-bottom-color: rgba(82, 91, 118, 0.2);
}

/* Borders */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: rgba(82, 91, 118, 0.2) !important;
}

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

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

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

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

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

/* Tables */
.table-primary {
  background-color: rgba(46, 178, 206, 0.1);
}

.table-success {
  background-color: rgba(110, 176, 126, 0.1);
}

.table-hover tbody tr:hover {
  background-color: rgba(46, 178, 206, 0.05);
}

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

.pagination .page-link:hover {
  color: #1f8aa3;
  background-color: rgba(46, 178, 206, 0.1);
  border-color: var(--pacific-cyan);
}

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

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

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

/* Dropdowns */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(46, 178, 206, 0.1);
  color: var(--pacific-cyan);
}

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

/* List Groups */
.list-group-item-primary {
  background-color: rgba(46, 178, 206, 0.1);
  color: #1f8aa3;
}

.list-group-item-danger {
  background-color: rgba(228, 87, 46, 0.1);
  color: #a8371d;
}

.list-group-item-success {
  background-color: rgba(110, 176, 126, 0.1);
  color: #4a7c56;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: rgba(46, 178, 206, 0.1);
  color: var(--pacific-cyan);
}

/* Modals */
.modal-header {
  border-bottom-color: rgba(82, 91, 118, 0.2);
}

.modal-footer {
  border-top-color: rgba(82, 91, 118, 0.2);
}

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

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

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

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

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

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

/* Background Utilities */
.bg-pacific-cyan {
  background-color: var(--pacific-cyan) !important;
  color: #ffffff;
}

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

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

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

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

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

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

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

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

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

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

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

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

.border-secondary {
  border-color: var(--paynes-gray) !important;
}

.border-dark {
  border-color: var(--space-cadet) !important;
}

/* Gradient Utilities */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--pacific-cyan) 0%, var(--mint) 100%) !important;
  color: #ffffff !important;
}

.bg-gradient-dark {
  background: linear-gradient(135deg, var(--space-cadet) 0%, var(--paynes-gray) 100%) !important;
  color: #ffffff !important;
}

.bg-gradient-warm {
  background: linear-gradient(135deg, var(--flame) 0%, var(--paynes-gray) 100%) !important;
  color: #ffffff !important;
}

.bg-gradient-full {
  background: linear-gradient(135deg,
    var(--pacific-cyan) 0%,
    var(--mint) 25%,
    var(--flame) 50%,
    var(--paynes-gray) 75%,
    var(--space-cadet) 100%) !important;
  color: #ffffff !important;
}

/* ===== PPA Orgs Specific Styles ===== */

/* Organization Tiles (from existing index.css) */
.organization-tile {
    transition: all 0.3s ease;
    cursor: pointer;
}

.organization-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    border-color: var(--pacific-cyan) !important;
}

.organization-tile .card-body {
    padding: 2rem;
}

.organization-tile .fa-building {
    transition: color 0.3s ease;
}

.organization-tile:hover .fa-building {
    color: var(--pacific-cyan) !important;
}

#organization-tiles .spinner-border {
    margin: 2rem auto;
}

/* ===== Sticky Footer Layout ===== */
/* Note: Sticky footer is now handled by Bootstrap classes in base.html:
 * - body: d-flex flex-column min-vh-100
 * - #main-content: flex-grow-1
 * No custom CSS needed! */

/* ===== Context Help System ===== */
/* Minimal custom styles - leveraging Bootstrap for most styling */

/* Info icon hover effect - in breadcrumbs */
.context-help-info-trigger {
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.context-help-info-trigger:hover {
  opacity: 1;
  transform: scale(1.1);
}

.context-help-info-trigger:active {
  transform: scale(0.95);
}

/* Popover max-width for better readability */
.context-help-popover {
  max-width: 400px;
}

/* Responsive adjustments for popover */
@media (max-width: 768px) {
  .context-help-popover {
    max-width: 300px;
  }
}

/* Page-level help banner - positioned below content by JS */
.page-help-banner {
  margin-top: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.page-help-banner.show {
  opacity: 1;
}

/* Special styling for "On this page" section */
.page-help-banner .border-start.border-3 {
  border-left-width: 3px !important;
}

/* Responsive adjustments for page help */
@media (max-width: 768px) {
  .page-help-banner {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .page-help-banner .fa-2x {
    font-size: 1.5em;
  }

  .page-help-banner h6 {
    font-size: 0.95rem;
  }
}

/* Animation for dismiss action */
.page-help-banner.fade:not(.show) {
  opacity: 0;
  transition: opacity 0.15s linear;
}

/* ===== Command Palette ===== */
/* Keyboard shortcut styling */
#commandPaletteTrigger kbd {
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

/* Command palette search input focus */
#commandPaletteSearch:focus {
  outline: none;
  box-shadow: none;
}

/* Results keyboard navigation highlight */
#commandPaletteResults .list-group-item.active {
  background-color: var(--pacific-cyan);
  border-color: var(--pacific-cyan);
  color: #ffffff;
}

#commandPaletteResults .list-group-item.active .text-muted {
  color: rgba(255, 255, 255, 0.8) !important;
}