/*
 * ============================================================
 *  SAUNG SERVATIUS — THEME STYLESHEET
 *  Palette: Deep Crimson · Burgundy · Old Gold
 *  Inspired by: Login Banner (Betawi-Catholic aesthetic)
 *
 *  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 {
  /* — Crimson family — */
  --ss-crimson-deep:    #7A0012;   /* Deep crimson — hero/navbar bg */
  --ss-crimson:         #8B0000;   /* Standard crimson — primary */
  --ss-crimson-mid:     #9B1B2A;   /* Mid crimson — hover states */
  --ss-crimson-light:   #B03040;   /* Light crimson — active badges */

  /* — Burgundy family — */
  --ss-burgundy-deep:   #4A0010;   /* Deepest burgundy — footer, sidebar deep bg */
  --ss-burgundy:        #5C0018;   /* Burgundy — sidebar bg */
  --ss-burgundy-mid:    #6B0020;   /* Mid burgundy — sidebar hover */

  /* — Gold family — */
  --ss-gold:            #CFB53B;   /* Old gold — primary accent */
  --ss-gold-bright:     #E8C84A;   /* Bright gold — hover/active links */
  --ss-gold-pale:       #F0DC8A;   /* Pale gold — subtle highlights, borders */
  --ss-gold-muted:      #9E8A28;   /* Muted gold — secondary text accents */

  /* — Neutral / Surface — */
  --ss-surface-dark:    #1A0005;   /* Near-black with red undertone */
  --ss-surface-mid:     #2E0010;   /* Dark surface */
  --ss-surface-warm:    #FFF8F0;   /* Warm off-white — body background */
  --ss-surface-card:    #FFFFFF;   /* Card / panel background */

  /* — Text — */
  --ss-text-on-dark:    #FFF0D0;   /* Warm cream — text on crimson/burgundy bg */
  --ss-text-gold:       var(--ss-gold);
  --ss-text-primary:    #1A0005;   /* Body text */
  --ss-text-muted:      #6B5060;   /* Muted body text */

  /* — Semantic — */
  --ss-link:            var(--ss-crimson);
  --ss-link-hover:      var(--ss-gold);
  --ss-border:          #D4A0A8;   /* Soft crimson-tinted border */
  --ss-border-gold:     var(--ss-gold-pale);
  --ss-focus-ring:      rgba(207, 181, 59, 0.5);  /* Gold focus ring */

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

  /* — Gradients — */
  --ss-gradient-hero:   linear-gradient(135deg, var(--ss-crimson-deep) 0%, var(--ss-burgundy) 100%);
  --ss-gradient-gold:   linear-gradient(90deg, var(--ss-gold-muted) 0%, var(--ss-gold) 50%, var(--ss-gold-muted) 100%);
  --ss-gradient-sidebar:linear-gradient(180deg, var(--ss-burgundy) 0%, var(--ss-burgundy-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-crimson);
  --bs-primary-rgb:         139, 0, 0;

  --bs-secondary:           var(--ss-gold-muted);
  --bs-secondary-rgb:       158, 138, 40;

  --bs-success:             #2E7D32;
  --bs-success-rgb:         46, 125, 50;

  --bs-warning:             var(--ss-gold);
  --bs-warning-rgb:         207, 181, 59;

  --bs-danger:              #C62828;
  --bs-danger-rgb:          198, 40, 40;

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

  --bs-link-color:          var(--ss-link);
  --bs-link-hover-color:    var(--ss-link-hover);

  --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-gold-muted);
}

.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 {
  color: var(--ss-gold-bright) !important;
  opacity: 1;
}

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


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

.sidebar,
#sidebar,
/*[id*="sidebar"],*/
.offcanvas-sidebar {
  background: var(--ss-gradient-sidebar) !important;
  border-right: 1px solid var(--ss-gold-muted);
  box-shadow: var(--ss-shadow-lg);
}

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

/* Sidebar nav links */
.sidebar .nav-link,
.sidebar a {
  color: var(--ss-text-on-dark) !important;
  opacity: 0.80;
  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: var(--ss-burgundy-mid);
  color: var(--ss-gold-bright) !important;
  opacity: 1;
  padding-left: 1.25rem;
}

.sidebar .nav-link.active,
.sidebar a.active {
  background-color: var(--ss-crimson);
  color: var(--ss-gold-bright) !important;
  opacity: 1;
  border-left: 3px solid var(--ss-gold);
}

/* Sidebar section labels */
.sidebar .sidebar-label,
.sidebar .nav-label,
.sidebar small {
  color: var(--ss-gold-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-burgundy-mid);
  color: var(--ss-gold-bright);
}
.sidebar .accordion-button::after {
  filter: brightness(2) sepia(1) hue-rotate(5deg);
}
.sidebar .accordion-body {
  background-color: var(--ss-burgundy-deep);
  padding-left: 1.5rem;
}

/* Sidebar footer strip — override bg-light */
.sidebar .mt-auto.bg-light {
    background-color: var(--ss-burgundy-deep) !important;
    border-top-color: var(--ss-gold-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-gold-bright);
}

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

.sidebar .mt-auto .btn-outline-danger:hover {
    background-color: var(--ss-crimson) !important;
    color: var(--ss-text-on-dark) !important;
    border-color: var(--ss-crimson) !important;
}

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

/* Primary — Crimson */
.btn-primary {
  background-color: var(--ss-crimson);
  border-color: var(--ss-crimson-deep);
  color: var(--ss-text-on-dark);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--ss-crimson-mid);
  border-color: var(--ss-crimson-deep);
  color: var(--ss-gold-pale);
  box-shadow: 0 0 0 0.2rem var(--ss-focus-ring);
}
.btn-primary:active {
  background-color: var(--ss-crimson-deep);
}

/* Secondary — Gold outline */
.btn-secondary {
  background-color: var(--ss-gold-muted);
  border-color: var(--ss-gold-muted);
  color: var(--ss-surface-dark);
}
.btn-secondary:hover {
  background-color: var(--ss-gold);
  border-color: var(--ss-gold);
  color: var(--ss-surface-dark);
}

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

/* Gold accent button — use class="btn btn-gold" */
.btn-gold {
  background: var(--ss-gradient-gold);
  border-color: var(--ss-gold-muted);
  color: var(--ss-surface-dark);
  font-weight: 600;
}
.btn-gold:hover {
  background: var(--ss-gold-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-crimson);
  color: var(--ss-text-on-dark);
  border-bottom: 2px solid var(--ss-gold-muted);
  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.gold {
  background: var(--ss-gradient-gold);
  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-crimson-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-crimson);
  border-color: var(--ss-crimson);
}

/* Disabled form fields */
.form-control:disabled,
.form-select:disabled {
  background-color: #f0ebe9de;
  color: var(--ss-text-muted);
  border-color: #d9c5c8;
  opacity: 0.65;
  cursor: not-allowed;
}

.form-check-input:disabled {
  background-color: #e8dfe0;
  border-color: #d9c5c8;
  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-crimson);
  color: var(--ss-text-on-dark);
  border-bottom: 2px solid var(--ss-gold-muted);
  font-weight: 600;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(139, 0, 0, 0.04);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: rgba(207, 181, 59, 0.10);
}

/* 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-gold-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-crimson) !important;
}

.badge.bg-secondary {
  background-color: var(--ss-gold-muted) !important;
  color: var(--ss-surface-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,
.badge.bg-secondary {
    color: var(--ss-surface-dark) !important;
}

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

.alert-primary {
  background-color: rgba(139, 0, 0, 0.08);
  border-color: var(--ss-crimson-mid);
  color: var(--ss-crimson-deep);
}

.alert-warning {
  background-color: rgba(207, 181, 59, 0.12);
  border-color: var(--ss-gold-muted);
  color: #5A4C00;
}


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

.page-link {
  color: var(--ss-crimson);
  border-color: var(--ss-border);
}
.page-link:hover {
  color: var(--ss-crimson-deep);
  background-color: rgba(207, 181, 59, 0.12);
  border-color: var(--ss-border);
}
.page-item.active .page-link {
  background-color: var(--ss-crimson);
  border-color: var(--ss-crimson);
  color: var(--ss-text-on-dark);
}


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

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


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

.progress-bar {
  background-color: var(--ss-crimson);
}
.progress-bar.gold {
  background: var(--ss-gradient-gold);
}


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

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


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

.modal-header {
  background: var(--ss-gradient-hero);
  color: var(--ss-text-on-dark);
  border-bottom: 2px solid var(--ss-gold-muted);
}
.modal-header .btn-close {
  filter: invert(1) brightness(1.5);
}

/* Default modal header — crimson */
.modal-header {
    background: var(--ss-gradient-hero);
    color: var(--ss-text-on-dark);
    border-bottom: 2px solid var(--ss-gold-muted);
}
.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-crimson);
  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-burgundy-deep); }
.sidebar::-webkit-scrollbar-thumb { background: var(--ss-gold-muted); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--ss-gold); }


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