/*
 * ============================================================
 *  SAUNG SERVATIUS — THEME STYLESHEET
 *  Palette: Deep Crimson · Burgundy · Old Gold
 *  Palette: Cobalt Blue · Red · Accent Blue
 *  Inspired by: Modern, clean UI with strong primary and accent colors
 *  Load this FIRST in base.html, before main.css
 *  <link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
 * ============================================================
 */


/* ============================================================
   1. BRAND COLOUR TOKENS
      All colours live here. Change once, apply everywhere.
   ============================================================ */

:root {
  /* — Red family — */
  --ss-red-deep:        #B00020;   /* Deep red — hero/navbar bg */
  --ss-red:             #DC3545;   /* Standard red — primary */
  --ss-red-mid:         #E65C6A;   /* Mid red — hover states */
  --ss-red-light:       #FFC1CC;   /* Light red — subtle backgrounds */

  /* — Blue family — */
  --ss-blue-deep:       #002147;   /* Deep navy — footer, sidebar deep bg */
  --ss-blue:            #0047AB;   /* Cobalt blue — Primary branding */
  --ss-blue-mid:        #0056D2;   /* Bright Cobalt — hover states */

  /* — Accent Blue family — */
  --ss-accent-blue:     #6495ED;   /* Cornflower Blue — primary accent */
  --ss-accent-blue-bright: #87CEEB;   /* Sky Blue — hover/active links */
  --ss-accent-blue-pale: #A7C7E7;   /* Light Blue — subtle highlights, borders */
  --ss-accent-blue-muted: #4682B4;   /* Steel Blue — secondary text accents */

  /* — Neutral / Surface — */
  --ss-surface-dark:    #001A33;   /* Near-black with blue undertone */
  --ss-surface-mid:     #F1F3F5;   /* Light surface */
  --ss-surface-warm:    #F8F9FA;   /* Light grey — body background */
  --ss-surface-card:    #FFFFFF;   /* Card / panel background */

  /* — Text — */
  --ss-text-on-dark:    #E0F2F7;   /* Light blue/grey — text on red/blue bg */
  --ss-text-accent:     var(--ss-accent-blue);
  --ss-text-primary:    #212529;   /* Body text */
  --ss-text-muted:      #6C757D;   /* Muted body text */

  /* — Semantic — */
  --ss-link:            var(--ss-blue);
  --ss-link-hover:      var(--ss-accent-blue);
  --ss-border:          #CED4DA;   /* Bootstrap default border */
  --ss-border-accent:   var(--ss-accent-blue-pale);
  --ss-focus-ring:      rgba(0, 71, 171, 0.5);  /* Cobalt Blue focus ring */

  /* — Shadows — */
  --ss-shadow-sm:       0 1px 4px rgba(0, 31, 77, 0.15);
  --ss-shadow-md:       0 4px 16px rgba(0, 31, 77, 0.20);
  --ss-shadow-lg:       0 8px 32px rgba(0, 31, 77, 0.25);

  /* — Gradients — */
  --ss-gradient-hero:   linear-gradient(135deg, var(--ss-blue) 0%, var(--ss-red) 100%);
  --ss-gradient-accent: linear-gradient(90deg, var(--ss-accent-blue-muted) 0%, var(--ss-accent-blue) 50%, var(--ss-accent-blue-muted) 100%);
  --ss-gradient-sidebar:linear-gradient(180deg, var(--ss-blue) 0%, var(--ss-blue-deep) 100%);

  /* — Sizing helpers — */
  --ss-sidebar-width:   260px;
  --ss-navbar-height:   56px;
  --ss-radius:          6px;
  --ss-radius-lg:       12px;
}


/* ============================================================
   2. BOOTSTRAP 5 VARIABLE OVERRIDES
      These remap BS5's CSS vars so all utility classes
      (bg-primary, text-primary, btn-primary, etc.) follow
      the new palette automatically.
   ============================================================ */

:root {
  --bs-primary:             var(--ss-blue);
  --bs-primary-rgb:         0, 71, 171;

  --bs-secondary:           var(--ss-red);
  --bs-secondary-rgb:       220, 53, 69;

  --bs-success:             #28A745; /* Keep standard green for success */
  --bs-success-rgb:         40, 167, 69;

  --bs-warning:             var(--ss-accent-blue); /* Use accent blue for warning */
  --bs-warning-rgb:         100, 149, 237;

  --bs-danger:              #DC3545; /* Keep standard red for danger */
  --bs-danger-rgb:          220, 53, 69;

  --bs-dark:                var(--ss-surface-dark);
  --bs-dark-rgb:            0, 26, 51;

  --bs-link-color:          var(--ss-link);
  --bs-link-hover-color:    var(--ss-link-hover); /* Changed from ss-link-hover to ss-accent-blue */

  --bs-border-color:        var(--ss-border);
  --bs-border-radius:       var(--ss-radius);
  --bs-border-radius-lg:    var(--ss-radius-lg);

  --bs-focus-ring-color:    var(--ss-focus-ring);

  --bs-body-bg:             var(--ss-surface-warm);
  --bs-body-color:          var(--ss-text-primary);
  --bs-body-font-family:    'Segoe UI', system-ui, sans-serif;
}


/* ============================================================
   3. NAVBAR
   ============================================================ */

.navbar {
  background: var(--ss-gradient-hero) !important;
  box-shadow: var(--ss-shadow-md);
  border-bottom: 2px solid var(--ss-red-deep);
}

.navbar-brand {
  color: var(--ss-text-on-dark) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.navbar-nav .nav-link {
  color: var(--ss-text-on-dark) !important;
  opacity: 0.85;
  transition: opacity 0.2s, color 0.2s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active { /* Changed from ss-gold-bright to ss-accent-blue-bright */
  color: var(--ss-accent-blue-bright) !important;
  opacity: 1;
}

.navbar-toggler {
  border-color: var(--ss-accent-blue-muted);
}
.navbar-toggler-icon {
  filter: brightness(2);
}


/* ============================================================
   4. SIDEBAR
   ============================================================ */

.sidebar,
#sidebar,
.offcanvas-sidebar {
  background: var(--ss-gradient-sidebar) !important; 
  border-right: 1px solid var(--ss-blue-deep);
  box-shadow: var(--ss-shadow-lg);
}

/* Sidebar heading / brand area */
.sidebar .sidebar-header,
.sidebar .offcanvas-header {
  background-color: var(--ss-blue-deep);
  border-bottom: 2px solid var(--ss-red);
  color: var(--ss-text-on-dark);
}

/* Sidebar nav links */
.sidebar .nav-link,
.sidebar a {
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: var(--ss-radius);
  transition: background-color 0.2s, opacity 0.2s, color 0.2s, padding-left 0.2s;
}

.sidebar .nav-link:hover,
.sidebar a:hover { 
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--ss-accent-blue-bright) !important;
  opacity: 1;
  padding-left: 1.25rem;
}

.sidebar .nav-link.active,
.sidebar a.active { /* Changed from ss-crimson to ss-blue-mid, ss-gold-bright to ss-accent-blue-bright, ss-gold to ss-accent-blue */
  background-color: var(--ss-blue-mid);
  color: var(--ss-accent-blue-bright) !important;
  opacity: 1;
  border-left: 3px solid var(--ss-accent-blue);
}

/* Sidebar section labels */
.sidebar .sidebar-label,
.sidebar .nav-label,
.sidebar small {
  color: var(--ss-accent-blue-pale);
  font-size: 0.70rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Accordion inside sidebar */
.sidebar .accordion-button {
  background-color: transparent;
  color: var(--ss-text-on-dark);
  box-shadow: none;
}
.sidebar .accordion-button:not(.collapsed) {
  background-color: var(--ss-blue-mid);
  color: var(--ss-accent-blue-bright);
}
.sidebar .accordion-button::after {
  filter: brightness(2) sepia(1) hue-rotate(5deg);
}
.sidebar .accordion-body {
  background-color: var(--ss-blue-deep);
  padding-left: 1.5rem;
}

/* Sidebar footer strip — override bg-light */
.sidebar .mt-auto.bg-light {
    background-color: var(--ss-blue-deep) !important;
    border-top-color: var(--ss-accent-blue-muted) !important;
}

/* "Halo, username" text */
.sidebar .mt-auto .nav-link.text-muted {
    color: var(--ss-text-on-dark) !important;
    opacity: 0.75;
}

.sidebar .mt-auto .nav-link strong {
    color: var(--ss-accent-blue-bright);
}

/* Logout button */
.sidebar .mt-auto .btn-outline-danger {
    color: var(--ss-text-on-dark) !important;
    border-color: var(--ss-red) !important;
}

.sidebar .mt-auto .btn-outline-danger:hover {
    background-color: var(--ss-red) !important;
    color: #fff !important;
}

/* ============================================================
   5. BUTTONS
   ============================================================ */

/* Primary — Cobalt */
.btn-primary {
  background-color: var(--ss-blue);
  border-color: var(--ss-blue-deep);
  color: var(--ss-text-on-dark);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--ss-red-mid);
  border-color: var(--ss-red-deep);
  color: var(--ss-text-on-dark); /* Changed from ss-gold-pale for better contrast */
  box-shadow: 0 0 0 0.2rem var(--ss-focus-ring);
}
.btn-primary:active {
  background-color: var(--ss-red-deep);
}

/* Secondary — Red */
.btn-secondary {
  background-color: var(--ss-red);
  border-color: var(--ss-red-deep);
  color: #fff;
}
.btn-secondary:hover {
  background-color: var(--ss-red-mid);
  border-color: var(--ss-red-deep);
  color: #fff;
}

/* Outline Primary */
.btn-outline-primary {
  color: var(--ss-red);
  border-color: var(--ss-red);
}
.btn-outline-primary:hover {
  background-color: var(--ss-red);
  color: var(--ss-text-on-dark);
}

/* Accent button — use class="btn btn-accent" */
.btn-accent { /* Renamed from btn-gold */
  background: var(--ss-gradient-accent);
  border-color: var(--ss-accent-blue-muted);
  color: var(--ss-surface-dark);
  font-weight: 600;
}
.btn-accent:hover { /* Renamed from btn-gold */
  background: var(--ss-accent-blue-bright);
  color: var(--ss-surface-dark);
}


/* ============================================================
   6. CARDS & PANELS
   ============================================================ */

.card {
  border-color: var(--ss-border);
  box-shadow: var(--ss-shadow-sm);
  border-radius: var(--ss-radius-lg);
}

.card-header {
  background-color: var(--ss-blue);
  color: var(--ss-text-on-dark);
  border-bottom: 2px solid var(--ss-red);
  font-weight: 600;
}

/* bg-light override — keep dark text */
.card-header.bg-light {
    background-color: #f8f9fa !important;
    color: var(--ss-text-primary) !important;
}

.card-header.accent { /* Renamed from .card-header.gold */
  background: var(--ss-gradient-accent);
  color: var(--ss-surface-dark);
}

.card-footer {
  background-color: #FAF0F2;
  border-top: 1px solid var(--ss-border);
}


/* ============================================================
   7. FORMS & INPUTS
   ============================================================ */

.form-control:focus,
.form-select:focus {
  border-color: var(--ss-blue-mid);
  box-shadow: 0 0 0 0.2rem var(--ss-focus-ring);
}

.form-label {
  color: var(--ss-text-primary);
  font-weight: 500;
} 

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

/* Disabled form fields */
.form-control:disabled,
.form-select:disabled { /* Changed from custom colors to Bootstrap defaults */
  background-color: #e9ecef;
  color: var(--ss-text-muted);
  border-color: #dee2e6;
  opacity: 0.65;
  cursor: not-allowed;
}

.form-check-input:disabled {
  background-color: #e9ecef;
  border-color: #dee2e6;
  cursor: not-allowed;
  opacity: 0.5;
}

.form-check-input:disabled + .form-check-label {
  color: var(--ss-text-muted);
  opacity: 0.65;
  cursor: not-allowed;
}


/* ============================================================
   8. TABLES
   ============================================================ */

.table thead th {
  background-color: var(--ss-blue);
  color: var(--ss-text-on-dark);
  border-bottom: 2px solid var(--ss-red);
  font-weight: 600;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(0, 71, 171, 0.03); /* Light cobalt tint */
} 

.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: rgba(100, 149, 237, 0.10); /* Light accent blue tint */
}

/* Sort header links inside thead */
.table thead th a {
    color: var(--ss-text-on-dark);
    text-decoration: none;
    font-weight: 600;
}

.table thead th a:hover {
    color: var(--ss-accent-blue-bright);
    text-decoration: none;
}

/* Sort icon inherits the same colour */
.table thead th a .bi {
    color: inherit;
    font-size: 0.8em;
    margin-left: 3px;
    opacity: 0.85;
}

/* ============================================================
   9. BADGES & PILLS
   ============================================================ */

.badge.bg-primary {
  background-color: var(--ss-blue) !important;
  color: var(--ss-text-on-dark) !important;
}

.badge.bg-secondary {
  background-color: var(--ss-red) !important;
  color: var(--ss-text-on-dark) !important;
}

.badge.bg-gold {
  background: var(--ss-gold) !important;
  color: var(--ss-surface-dark) !important;
}

/* Gold-background badges need dark text to be readable */
.badge.bg-warning {
    color: var(--ss-surface-dark) !important;
}

/* ============================================================
   10. ALERTS
   ============================================================ */

.alert-primary {
  background-color: rgba(0, 71, 171, 0.08); /* Light cobalt tint */
  border-color: var(--ss-blue-mid);
  color: var(--ss-blue-deep);
}

.alert-warning {
  background-color: rgba(100, 149, 237, 0.12); /* Light accent blue tint */
  border-color: var(--ss-accent-blue);
  color: var(--ss-blue); /* Dark blue text for warning */
}


/* ============================================================
   11. PAGINATION
   ============================================================ */

.page-link {
  color: var(--ss-blue);
  border-color: var(--ss-border);
}
.page-link:hover {
  color: var(--ss-blue-deep);
  background-color: rgba(100, 149, 237, 0.12); /* Light accent blue tint */
  border-color: var(--ss-border);
}
.page-item.active .page-link {
  background-color: var(--ss-blue);
  border-color: var(--ss-blue);
  color: var(--ss-text-on-dark);
}


/* ============================================================
   12. BREADCRUMBS
   ============================================================ */

.breadcrumb-item a {
  color: var(--ss-blue);
}
.breadcrumb-item.active {
  color: var(--ss-text-muted);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--ss-accent-blue-muted);
}


/* ============================================================
   13. PROGRESS BARS
   ============================================================ */

.progress-bar {
  background-color: var(--ss-blue);
}
.progress-bar.accent { /* Renamed from .progress-bar.gold */
  background: var(--ss-gradient-accent);
}


/* ============================================================
   14. TABS & PILLS NAV
   ============================================================ */

.nav-tabs .nav-link.active {
  color: var(--ss-blue);
  border-bottom-color: var(--ss-blue);
  border-top: 2px solid var(--ss-red);
}
.nav-tabs .nav-link:hover {
  color: var(--ss-blue-mid);
}
.nav-pills .nav-link.active {
  background-color: var(--ss-blue);
  color: var(--ss-text-on-dark);
}


/* ============================================================
   15. MODALS
   ============================================================ */

.modal-header {
  background: var(--ss-gradient-hero); /* Red to Blue gradient */
  color: var(--ss-text-on-dark);
  border-bottom: 2px solid var(--ss-red-deep);
}
.modal-header .btn-close {
  filter: invert(1) brightness(1.5);
}

/* Transparent modal — preserve floating overlay style */
.modal-content.bg-transparent .modal-header {
    background: transparent !important;
    border-bottom: none !important;
}

/* ============================================================
   16. TOASTS & FLASH MESSAGES
   ============================================================ */

.toast-header {
  background-color: var(--ss-blue);
  color: var(--ss-text-on-dark);
}


/* ============================================================
   17. DECORATIVE UTILITIES
      Custom helper classes for consistent brand expressions.
   ============================================================ */

/* Gold divider line */
.ss-divider {
  border: none;
  height: 2px;
  background: var(--ss-gradient-gold);
  margin: 1.5rem 0;
  opacity: 0.6;
}

/* Crimson top-border accent on cards */
.ss-card-accent {
  border-top: 4px solid var(--ss-crimson);
}

/* Gold top-border accent */
.ss-card-gold {
  border-top: 4px solid var(--ss-gold);
}

/* Page section heading with gold underline */
.ss-heading {
  color: var(--ss-crimson-deep);
  font-weight: 700;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--ss-gold-pale);
  margin-bottom: 1.25rem;
}

/* Full crimson hero banner block */
.ss-hero {
  background: var(--ss-gradient-hero);
  color: var(--ss-text-on-dark);
  padding: 2rem;
  border-bottom: 3px solid var(--ss-gold);
  border-radius: var(--ss-radius-lg);
}

/* Crimson text shorthand */
.text-crimson  { color: var(--ss-crimson) !important; }
.text-burgundy { color: var(--ss-burgundy) !important; }
.text-gold     { color: var(--ss-gold) !important; }
.bg-crimson    { background-color: var(--ss-crimson) !important; }
.bg-burgundy   { background-color: var(--ss-burgundy) !important; }
.bg-gold       { background-color: var(--ss-gold) !important; }


/* ============================================================
   18. SCROLLBAR (WebKit — Chrome/Edge sidebar scrollbar)
   ============================================================ */

.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-track { background: var(--ss-blue-deep); }
.sidebar::-webkit-scrollbar-thumb { background: var(--ss-accent-blue-muted); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--ss-accent-blue); }


/* ============================================================
   END OF THEME.CSS
   ============================================================ */