/* ============================================================
   HENNOPS MEWS — Modern Theme
   Light: Deep Space Blue · Baltic Blue · Cerulean · Blue Bell · Alice Blue
   Dark:  Indigo #5680E9 · Sky #84CEEB · Cerulean #5AB9EA · Lavender #C1C8E4 · Purple #8860D0
   ============================================================ */

/* --- Brand palette ------------------------------------------ */
:root {
  --deep-space-blue: #13293d;
  --baltic-blue:     #006494;
  --cerulean:        #247ba0;
  --blue-bell:       #1b98e0;
  --alice-blue:      #e8f1f2;
}

/* --- Semantic tokens --------------------------------------- */
:root {
  --primary:       #247ba0;   /* cerulean */
  --primary-dark:  #006494;   /* baltic-blue */
  --primary-rgb:   36, 123, 160;

  --success:       #006494;   /* baltic-blue — no green in palette */
  --success-dark:  #13293d;   /* deep-space-blue */
  --success-rgb:   0, 100, 148;

  --warning:       #f7a94b;
  --warning-dark:  #e08828;
  --warning-rgb:   247, 169, 75;

  --danger:        #e85563;
  --danger-dark:   #c73d4b;
  --danger-rgb:    232, 85, 99;

  --info:          #1b98e0;   /* blue-bell */
  --info-dark:     #247ba0;   /* cerulean */
  --info-rgb:      27, 152, 224;

  --body-bg:       #e8f1f2;   /* alice-blue */
  --card-bg:       #f3f8f9;   /* lighter tint — cards lift off the backdrop */
  --text-main:     #13293d;   /* deep-space-blue */
  --text-muted-c:  #247ba0;   /* cerulean */
  --border-col:    rgba(0, 100, 148, 0.18);

  --shadow-1: 0 2px 8px  rgba(19, 41, 61, 0.08);
  --shadow-2: 0 6px 24px rgba(19, 41, 61, 0.13);
  --shadow-3: 0 12px 40px rgba(19, 41, 61, 0.18);

  --radius:    14px;
  --radius-sm: 8px;
  --t-fast:    0.3s ease;
  --t-med:     0.5s ease;
}

/* --- Base --------------------------------------------------- */
body {
  background-color: var(--body-bg);
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--text-main);
}
.min-vh-100 { min-height: 100vh; }

/* --- Navbar ------------------------------------------------- */
.navbar {
  background: linear-gradient(120deg, #13293d, #006494, #1b98e0, #006494, #13293d) !important;
  background-size: 300% 300% !important;
  animation: navGradient 22s ease infinite;
  box-shadow: 0 4px 20px rgba(19, 41, 61, 0.45);
  padding: 0.6rem 1.5rem;
}
@keyframes navGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.navbar-brand {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.navbar .nav-link {
  position: relative;
  font-weight: 500;
  padding: 0.45rem 0.85rem;
  transition: color var(--t-fast);
}
.navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 0.85rem;
  right: 0.85rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
.navbar .nav-link:hover::after { transform: scaleX(1); }

/* --- Cards -------------------------------------------------- */
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-col);
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.card-header {
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0 !important;
  border-bottom: 1px solid var(--border-col);
}
/* Plain (unstyled) card headers — soft alice-blue tint */
.card-header:not([class*="bg-"]) {
  background-color: #c8dde0;
  color: #13293d;
}

/* Gradient stat cards */
.card.bg-primary {
  background: linear-gradient(135deg, #1b98e0 0%, #006494 100%) !important;
  border: none !important;
  box-shadow: 0 6px 28px rgba(27, 152, 224, 0.38) !important;
  animation: statCardIn 0.65s ease both 0.10s;
}
.card.bg-success {
  background: linear-gradient(135deg, #006494 0%, #13293d 100%) !important;
  border: none !important;
  box-shadow: 0 6px 28px rgba(0, 100, 148, 0.38) !important;
  animation: statCardIn 0.65s ease both 0.22s;
}
.card.bg-warning {
  background: linear-gradient(135deg, #f7a94b 0%, #e08828 100%) !important;
  border: none !important;
  box-shadow: 0 6px 28px rgba(var(--warning-rgb), 0.38) !important;
  animation: statCardIn 0.65s ease both 0.34s;
}
.card.bg-danger {
  background: linear-gradient(135deg, #e85563 0%, #c73d4b 100%) !important;
  border: none !important;
  box-shadow: 0 6px 28px rgba(var(--danger-rgb), 0.38) !important;
  animation: statCardIn 0.65s ease both 0.46s;
}
.card.bg-secondary {
  background: linear-gradient(135deg, #247ba0 0%, #006494 100%) !important;
  border: none !important;
  animation: statCardIn 0.65s ease both 0.46s;
}

/* Teal/cyan budget card (inline style override — remaining budget healthy) */
.card[style*="0dcaf0"],
.card[style*="background-color:#0dcaf0"] {
  background: linear-gradient(135deg, #1b98e0 0%, #247ba0 100%) !important;
  border: none !important;
  box-shadow: 0 6px 28px rgba(27, 152, 224, 0.38) !important;
  animation: statCardIn 0.65s ease both 0.46s;
}
/* Orange budget warning card */
.card[style*="fd7e14"],
.card[style*="background-color:#fd7e14"] {
  background: linear-gradient(135deg, #f7a94b 0%, #e67322 100%) !important;
  border: none !important;
  box-shadow: 0 6px 28px rgba(var(--warning-rgb), 0.38) !important;
  animation: statCardIn 0.65s ease both 0.46s;
}

/* Gradient card headers */
.card-header.bg-primary { background: linear-gradient(135deg, #1b98e0 0%, #006494 100%) !important; }
.card-header.bg-success { background: linear-gradient(135deg, #006494 0%, #13293d 100%) !important; }
.card-header.bg-danger  { background: linear-gradient(135deg, #e85563 0%, #c73d4b 100%) !important; }
.card-header.bg-warning { background: linear-gradient(135deg, #f7a94b 0%, #e08828 100%) !important; }
.card-header.bg-info    { background: linear-gradient(135deg, #1b98e0 0%, #247ba0 100%) !important; }

/* Unit cards */
.unit-card {
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  animation: fadeSlideUp 0.7s ease both;
  cursor: pointer;
}
.unit-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 40px rgba(19, 41, 61, 0.22) !important;
}

/* Added by JS animationend listener — clears fill-mode lock
   without touching element.style (which would re-serialize hex colours
   to rgb() and break [style*="0dcaf0"] attribute selectors) */
.entrance-done { animation: none !important; }

/* Stat card hover — lift + colour-matched glow */
.card.bg-primary:hover,
.card.bg-success:hover,
.card.bg-secondary:hover,
.card.bg-danger:hover,
.card.bg-warning:hover,
.card-unpaid-invoices:hover,
.card[style*="0dcaf0"]:hover,
.card[style*="fd7e14"]:hover {
  transform: translateY(-6px) scale(1.02);
  cursor: pointer;
}
.card.bg-primary:hover        { box-shadow: 0 16px 40px rgba(27, 152, 224, 0.60) !important; }
.card.bg-success:hover        { box-shadow: 0 16px 40px rgba(0, 100, 148, 0.60) !important; }
.card.bg-secondary:hover      { box-shadow: 0 16px 40px rgba(36, 123, 160, 0.60) !important; }
.card.bg-danger:hover         { box-shadow: 0 16px 40px rgba(232, 85, 99, 0.60) !important; }
.card.bg-warning:hover        { box-shadow: 0 16px 40px rgba(247, 169, 75, 0.60) !important; }
.card-unpaid-invoices:hover   { box-shadow: 0 16px 40px rgba(126, 92, 173, 0.65) !important; }
.card[style*="0dcaf0"]:hover  { box-shadow: 0 16px 40px rgba(13, 202, 240, 0.60) !important; }
.card[style*="fd7e14"]:hover  { box-shadow: 0 16px 40px rgba(253, 126, 20, 0.60) !important; }

/* Stat card typography */
.card.bg-primary h2, .card.bg-success h2,
.card.bg-warning h2, .card.bg-danger h2,
.card.bg-secondary h2, .card[style*="0dcaf0"] h2,
.card[style*="fd7e14"] h2 {
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.5px;
}

/* --- Buttons ----------------------------------------------- */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: all var(--t-fast);
}
.btn:active { transform: scale(0.96); }

.btn-primary {
  background: linear-gradient(135deg, #1b98e0 0%, #006494 100%);
  border: none;
  box-shadow: 0 3px 12px rgba(27, 152, 224, 0.35);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #36a8ed 0%, #0076ae 100%);
  box-shadow: 0 5px 18px rgba(27, 152, 224, 0.50);
  transform: translateY(-2px);
}
.btn-success {
  background: linear-gradient(135deg, #006494 0%, #13293d 100%);
  border: none;
  box-shadow: 0 3px 12px rgba(0, 100, 148, 0.30);
}
.btn-success:hover {
  background: linear-gradient(135deg, #0076ae 0%, #1d3d52 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(0, 100, 148, 0.45);
}
.btn-danger {
  background: linear-gradient(135deg, #e85563 0%, #c73d4b 100%);
  border: none;
  box-shadow: 0 3px 12px rgba(var(--danger-rgb), 0.30);
}
.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(var(--danger-rgb), 0.45);
}
.btn-warning {
  background: linear-gradient(135deg, #f7a94b 0%, #e08828 100%);
  border: none;
  color: #fff;
}
.btn-warning:hover {
  transform: translateY(-2px);
  color: #fff;
}

/* --- Forms -------------------------------------------------- */
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: rgba(0, 100, 148, 0.32);
  background-color: #edf5f6;
  color: #13293d;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary-dark);
  background-color: #f3f8f9;
  color: #13293d;
  box-shadow: 0 0 0 3px rgba(0, 100, 148, 0.18);
}
.form-label {
  font-weight: 600;
  color: #13293d;
}

/* --- Tables ------------------------------------------------- */
.table {
  background-color: var(--card-bg);
}
.table thead th {
  background-color: #247ba0;
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.6px;
  border-bottom: 2px solid #006494;
}
.table tbody tr {
  background-color: var(--card-bg);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #d8eaec;
  color: var(--text-main);
}
.table-hover > tbody > tr:hover > * {
  background-color: #c5dde0;
  color: var(--text-main);
}

/* --- Upload area -------------------------------------------- */
.upload-area {
  background-color: #d8eaec;
  border: 2px dashed #247ba0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--t-fast);
}
.upload-area:hover {
  background-color: #c5dde0;
  border-color: #006494;
}

/* --- Blue-bell accent — progress bars & inline highlights -- */
.progress-bar { background-color: var(--blue-bell) !important; }
.progress-bar.bg-info { background-color: var(--cerulean) !important; }

/* --- Nav tabs (light mode) ---------------------------------- */
.nav-tabs {
  border-bottom-color: #247ba0;
}
.nav-tabs .nav-link {
  color: #13293d;
  background-color: #cde0e3;
  border-color: #247ba0 #247ba0 transparent;
  margin-right: 4px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-weight: 500;
}
.nav-tabs .nav-link:hover {
  background-color: #b8d2d5;
  border-color: #006494 #006494 transparent;
  color: #13293d;
}
.nav-tabs .nav-link.active {
  background-color: var(--card-bg);
  border-color: #247ba0 #247ba0 var(--card-bg);
  color: #006494;
  font-weight: 600;
}
.tab-content.border {
  border-color: #247ba0 !important;
  background-color: var(--card-bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
}

/* --- Misc --------------------------------------------------- */
.badge        { font-weight: 500; border-radius: 6px; padding: 0.35em 0.65em; }
.alert        { border-radius: var(--radius); border: none; box-shadow: var(--shadow-1); }
.text-muted   { color: var(--text-muted-c) !important; }

/* --- Logo --------------------------------------------------- */
.navbar-logo {
  height: 38px;
  width: auto;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.navbar-brand:hover .navbar-logo { transform: rotate(-6deg) scale(1.1); }
.login-logo {
  height: 180px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  animation: fadeInZoom 1s ease-out;
}
.login-card   { animation: fadeIn 1s ease-out; }
.logo-container { margin-bottom: 0 !important; }

/* --- Theme picker button ------------------------------------ */
#themePicker {
  color: rgba(255, 255, 255, 0.85);
  border: none;
  background: none;
  padding: 0.5rem 1rem;
  transition: color var(--t-fast);
}
#themePicker:hover { color: #ffd700; }
#themePicker.dropdown-toggle::after { display: none; }

/* --- Theme picker dropdown ---------------------------------- */
.theme-picker-menu {
  padding: 0.75rem 1rem;
  min-width: auto;
}
.theme-picker-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  white-space: nowrap;
}
.theme-swatches {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}
.theme-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}
.theme-swatch:hover { transform: scale(1.2); }
.theme-swatch.active {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.theme-swatch[data-theme="default"] { background: #247ba0; }
.theme-swatch[data-theme="dark"]    { background: #27496D; }
.theme-swatch[data-theme="pink"]    { background: #b5607c; }
.theme-swatch[data-theme="green"]   { background: #3d7a57; }
.theme-swatch[data-theme="purple"]  { background: #6b5aad; }
.theme-swatch[data-theme="yellow"]  { background: #b09618; }
.theme-swatch[data-theme="orange"]  { background: #c07030; }

/* ============================================================
   CUSTOM CURSOR  (mouse/trackpad only — skipped on touch)
   ============================================================ */
@media (pointer: fine) {
  /* Hide the native cursor everywhere */
  html, body, * { cursor: none !important; }

  /* --- Dot: snaps instantly to cursor position --- */
  #cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 8px;
    height: 8px;
    background: #247ba0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: width 0.18s ease, height 0.18s ease,
                background 0.25s ease, opacity 0.3s ease;
    opacity: 0;
  }

  /* --- Ring: larger circle, follows with smooth lag via JS --- */
  #cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 36px;
    height: 36px;
    border: 2px solid rgba(36, 123, 160, 0.55);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease,
                border-color 0.25s ease, opacity 0.3s ease;
    opacity: 0;
  }

  /* Fade in once the mouse has moved */
  body.cursor-ready #cursor-dot,
  body.cursor-ready #cursor-ring { opacity: 1; }

  /* Expand ring when hovering over interactive elements */
  body.cursor-hover #cursor-dot  { width: 12px; height: 12px; }
  body.cursor-hover #cursor-ring {
    width: 52px; height: 52px;
    border-color: rgba(36, 123, 160, 0.28);
  }

  /* --- Theme-aware colours --- */
  body.dark-mode #cursor-dot                    { background: #4a9abe; }
  body.dark-mode #cursor-ring                   { border-color: rgba(74, 154, 190, 0.55); }
  body.dark-mode.cursor-hover #cursor-ring      { border-color: rgba(74, 154, 190, 0.28); }

  body.theme-pink #cursor-dot                   { background: #b5607c; }
  body.theme-pink #cursor-ring                  { border-color: rgba(181, 96, 124, 0.55); }
  body.theme-pink.cursor-hover #cursor-ring     { border-color: rgba(181, 96, 124, 0.28); }

  body.theme-green #cursor-dot                  { background: #3d7a57; }
  body.theme-green #cursor-ring                 { border-color: rgba(61, 122, 87, 0.55); }
  body.theme-green.cursor-hover #cursor-ring    { border-color: rgba(61, 122, 87, 0.28); }

  body.theme-purple #cursor-dot                 { background: #6b5aad; }
  body.theme-purple #cursor-ring                { border-color: rgba(107, 90, 173, 0.55); }
  body.theme-purple.cursor-hover #cursor-ring   { border-color: rgba(107, 90, 173, 0.28); }

  body.theme-yellow #cursor-dot                 { background: #b09618; }
  body.theme-yellow #cursor-ring                { border-color: rgba(176, 150, 24, 0.55); }
  body.theme-yellow.cursor-hover #cursor-ring   { border-color: rgba(176, 150, 24, 0.28); }

  body.theme-orange #cursor-dot                 { background: #c07030; }
  body.theme-orange #cursor-ring                { border-color: rgba(192, 112, 48, 0.55); }
  body.theme-orange.cursor-hover #cursor-ring   { border-color: rgba(192, 112, 48, 0.28); }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

/* Slide up from below — used by page content */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Scale + slide — used by stat cards */
@keyframes statCardIn {
  from { opacity: 0; transform: translateY(24px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Login page */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes fadeInZoom {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1);   }
}

/* ============================================================
   DARK MODE  —  Deep Navy · Steel Blue · Teal · Cyan palette
   #142850 · #27496D · #0C7B93 · #00A8CC
   ============================================================ */

body.dark-mode {
  background-color: #142850;
  color: #b8d4e8;
}

/* Navbar: vivid gradient using the palette */
body.dark-mode .navbar {
  background: linear-gradient(120deg, #142850, #27496D, #0C7B93, #27496D, #142850) !important;
  background-size: 300% 300% !important;
  animation: navGradient 22s ease infinite;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

/* General cards */
body.dark-mode .card {
  background-color: #1e3a5f;
  border-color: rgba(12, 123, 147, 0.20);
  color: #b8d4e8;
}
body.dark-mode .card-header {
  background-color: #27496D;
  border-color: rgba(12, 123, 147, 0.20);
  color: #b8d4e8;
}

/* Stat cards — vivid using the new palette */
body.dark-mode .card.bg-primary {
  background: linear-gradient(135deg, #0C7B93 0%, #0a6276 100%) !important;
  box-shadow: 0 6px 28px rgba(12, 123, 147, 0.50) !important;
}
body.dark-mode .card.bg-success {
  background: linear-gradient(135deg, #27496D 0%, #0C7B93 100%) !important;
  box-shadow: 0 6px 28px rgba(12, 123, 147, 0.45) !important;
}
body.dark-mode .card.bg-warning {
  background: linear-gradient(135deg, #d4892a 0%, #b56a15 100%) !important;
  box-shadow: 0 6px 28px rgba(181, 106, 21, 0.50) !important;
}
body.dark-mode .card.bg-danger {
  background: linear-gradient(135deg, #c23543 0%, #9e2631 100%) !important;
  box-shadow: 0 6px 28px rgba(158, 38, 49, 0.50) !important;
}
body.dark-mode .card.bg-secondary {
  background: linear-gradient(135deg, #27496D 0%, #1e3a5f 100%) !important;
}
body.dark-mode .card[style*="0dcaf0"] {
  background: linear-gradient(135deg, #00A8CC 0%, #0C7B93 100%) !important;
  box-shadow: 0 6px 28px rgba(0, 168, 204, 0.50) !important;
}
body.dark-mode .card[style*="fd7e14"] {
  background: linear-gradient(135deg, #c96c15 0%, #a35510 100%) !important;
}

/* Card headers in dark mode */
body.dark-mode .card-header.bg-success { background: linear-gradient(135deg, #27496D 0%, #0C7B93 100%) !important; }
body.dark-mode .card-header.bg-primary { background: linear-gradient(135deg, #0C7B93 0%, #0a6276 100%) !important; }
body.dark-mode .card-header.bg-danger  { background: linear-gradient(135deg, #c23543 0%, #9e2631 100%) !important; }
body.dark-mode .card-header.bg-warning { background: linear-gradient(135deg, #d4892a 0%, #b56a15 100%) !important; }

/* Forms */
body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: #27496D;
  border-color: rgba(12, 123, 147, 0.30);
  color: #b8d4e8;
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  background-color: #2e5580;
  border-color: #00A8CC;
  color: #b8d4e8;
  box-shadow: 0 0 0 3px rgba(0, 168, 204, 0.25);
}
body.dark-mode .form-control::placeholder { color: #5a7d9a; }
body.dark-mode .form-label { color: #00A8CC; }

/* Tables */
body.dark-mode .table { color: #b8d4e8; }
body.dark-mode .table thead th {
  background-color: #27496D;
  color: #00A8CC;
  border-color: rgba(12, 123, 147, 0.22);
}
body.dark-mode .table th {
  background-color: #2e5580;
  color: #b8d4e8;
  border-color: rgba(12, 123, 147, 0.22);
}
body.dark-mode .table td { border-color: rgba(12, 123, 147, 0.12); }
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #1e3a5f;
  color: #b8d4e8;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: #27496D;
  color: #b8d4e8;
}

/* Modals */
body.dark-mode .modal-content { background-color: #1e3a5f; color: #b8d4e8; }
body.dark-mode .modal-header,
body.dark-mode .modal-footer { border-color: rgba(12, 123, 147, 0.20); }
body.dark-mode .btn-close { filter: invert(1); }

/* Alerts */
body.dark-mode .alert { border-color: rgba(12, 123, 147, 0.20); }
body.dark-mode .alert-info    { background: linear-gradient(135deg, #0C7B93, #00A8CC); color: #fff; }
body.dark-mode .alert-success { background: linear-gradient(135deg, #27496D, #0C7B93); color: #fff; }
body.dark-mode .alert-warning { background: linear-gradient(135deg, #a05c10, #c07014); color: #fff; }
body.dark-mode .alert-danger  { background: linear-gradient(135deg, #8b2d31, #a8383f); color: #fff; }

/* Upload area */
body.dark-mode .upload-area { background-color: #27496D; border-color: rgba(12, 123, 147, 0.35); }
body.dark-mode .upload-area:hover { background-color: #2e5580; border-color: #00A8CC; }

/* Light/white bg overrides */
body.dark-mode .bg-light {
  background-color: #27496D !important;
  color: #b8d4e8 !important;
}
body.dark-mode .bg-white {
  background-color: #1e3a5f !important;
  color: #b8d4e8 !important;
}
body.dark-mode .card.bg-light { background-color: #27496D !important; border-color: rgba(12, 123, 147, 0.20); }
body.dark-mode .card.bg-light .card-title,
body.dark-mode .card.bg-light h6,
body.dark-mode .card.bg-light p,
body.dark-mode .card.bg-light li { color: #b8d4e8 !important; }
body.dark-mode .card.bg-light .small { color: #00A8CC !important; }
body.dark-mode .card-footer.bg-white { background-color: #1a3356 !important; border-color: rgba(12, 123, 147, 0.20); }
body.dark-mode .card-img-top.bg-light { background-color: #27496D !important; }
body.dark-mode pre.bg-light { background-color: #142850 !important; color: #b8d4e8 !important; border: 1px solid rgba(12, 123, 147, 0.20); }

/* List groups */
body.dark-mode .list-group-item { background-color: #1e3a5f; border-color: rgba(12, 123, 147, 0.15); color: #b8d4e8; }
body.dark-mode .list-group-item:hover { background-color: #27496D; }

/* Badges */
body.dark-mode .badge.bg-secondary { background-color: #27496D !important; }
body.dark-mode .badge.bg-success   { background-color: #0C7B93 !important; }
body.dark-mode .badge.bg-warning   { background-color: #f39c12 !important; }
body.dark-mode .badge.bg-danger    { background-color: #e74c3c !important; }
body.dark-mode .badge.bg-info      { background-color: #00A8CC !important; }
body.dark-mode .badge.bg-primary   { background-color: #0C7B93 !important; }

/* Text / misc */
body.dark-mode .text-muted { color: #00A8CC !important; }
body.dark-mode hr { border-color: rgba(12, 123, 147, 0.20); opacity: 1; }

/* Dropdowns */
body.dark-mode .dropdown-menu {
  background-color: #1e3a5f;
  border-color: rgba(12, 123, 147, 0.20);
  box-shadow: var(--shadow-2);
}
body.dark-mode .dropdown-item { color: #b8d4e8; }
body.dark-mode .dropdown-item:hover { background-color: #2e5580; color: #b8d4e8; }

/* Date pickers */
body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* Checkboxes */
body.dark-mode .form-check-input { background-color: #27496D; border-color: rgba(12, 123, 147, 0.35); }
body.dark-mode .form-check-input:checked { background-color: #0C7B93; border-color: #0C7B93; }

/* Input groups */
body.dark-mode .input-group-text { background-color: #27496D; border-color: rgba(12, 123, 147, 0.30); color: #b8d4e8; }

/* Outline buttons */
body.dark-mode .btn-outline-secondary { color: #b8d4e8; border-color: rgba(12, 123, 147, 0.35); }
body.dark-mode .btn-outline-secondary:hover { background-color: #2e5580; color: #b8d4e8; }
body.dark-mode .btn-outline-warning { color: #f39c12; border-color: #f39c12; }
body.dark-mode .btn-outline-warning:hover { background-color: #f39c12; color: #fff; }

/* Navbar toggler */
body.dark-mode .navbar-toggler-icon { filter: invert(1); }

/* Nav tabs — dark mode overrides */
body.dark-mode .nav-tabs {
  border-bottom-color: rgba(12, 123, 147, 0.30);
}
body.dark-mode .nav-tabs .nav-link {
  background-color: #27496D;
  border-color: rgba(12, 123, 147, 0.22) rgba(12, 123, 147, 0.22) transparent;
  color: #00A8CC;
}
body.dark-mode .nav-tabs .nav-link:hover {
  background-color: #2e5580;
  border-color: rgba(12, 123, 147, 0.35) rgba(12, 123, 147, 0.35) transparent;
  color: #b8d4e8;
}
body.dark-mode .nav-tabs .nav-link.active {
  background-color: #1e3a5f;
  border-color: rgba(12, 123, 147, 0.30) rgba(12, 123, 147, 0.30) #1e3a5f;
  color: #00A8CC;
}
body.dark-mode .tab-content.border {
  border-color: rgba(12, 123, 147, 0.25) !important;
  background-color: #1e3a5f;
}

/* Table overrides for dark mode (reset light-mode striping/hover) */
body.dark-mode .table {
  background-color: #1e3a5f;
}
body.dark-mode .table tbody tr {
  background-color: #1e3a5f;
}
body.dark-mode .table-hover > tbody > tr:hover > * {
  background-color: #2e5580;
  color: #b8d4e8;
}

/* Plain card-header override for dark mode */
body.dark-mode .card-header:not([class*="bg-"]) {
  background-color: #27496D;
  color: #b8d4e8;
}

/* Unpaid invoices stat card — purple when count > 0 */
.card-unpaid-invoices {
  background: linear-gradient(135deg, #7E5CAD 0%, #5e4082 100%) !important;
  box-shadow: 0 6px 28px rgba(126, 92, 173, 0.45) !important;
}
body.dark-mode .card-unpaid-invoices {
  background: linear-gradient(135deg, #7E5CAD 0%, #5e4082 100%) !important;
  box-shadow: 0 6px 28px rgba(126, 92, 173, 0.50) !important;
}

/* ============================================================
   DARK MODE — Supplemental contrast fixes
   Ensures every text/background pairing is WCAG-legible
   ============================================================ */

/* 1. Reverse .text-dark utility — near-black text is illegible on dark surfaces */
body.dark-mode .text-dark { color: #b8d4e8 !important; }

/* 2. Audit trail "Full Change Details" modal pre
      The element has an inline background:#f8f9fa that CSS !important can override */
body.dark-mode #detailsContent {
  background: #142850 !important;
  color: #b8d4e8 !important;
  border: 1px solid rgba(12, 123, 147, 0.30) !important;
}

/* 3. Card headers with bg-light (e.g. trustees list in estate info) */
body.dark-mode .card-header.bg-light {
  background-color: #27496D !important;
  color: #b8d4e8 !important;
}
body.dark-mode .card-header.bg-light h5,
body.dark-mode .card-header.bg-light h6,
body.dark-mode .card-header.bg-light .text-muted {
  color: #b8d4e8 !important;
}

/* 4. pre and code elements — dark surface, legible text */
body.dark-mode pre {
  background-color: #142850;
  color: #b8d4e8;
  border: 1px solid rgba(12, 123, 147, 0.20);
  border-radius: .375rem;
}
body.dark-mode code { color: #84CEEB; }
body.dark-mode pre code { color: #b8d4e8; }

/* 5. Inline-styled bg-light / bg-white containers not caught by class selectors */
body.dark-mode [style*="background:#f8f9fa"],
body.dark-mode [style*="background-color:#f8f9fa"],
body.dark-mode [style*="background: #f8f9fa"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background-color:#fff"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode [style*="background-color:#ffffff"] {
  background-color: #1e3a5f !important;
  color: #b8d4e8 !important;
}

/* 6. Sidebar / info cards using bg-light that may contain dark-coloured text */
body.dark-mode .card.bg-light .text-dark,
body.dark-mode .card.bg-light p,
body.dark-mode .card.bg-light li,
body.dark-mode .card.bg-light span:not(.badge) {
  color: #b8d4e8 !important;
}

/* 7. Bootstrap table CSS custom properties — td cells use var(--bs-table-bg) which defaults to
      #fff in Bootstrap; override here so every table cell renders on the dark surface */
body.dark-mode .table {
  --bs-table-bg:             #1e3a5f;
  --bs-table-striped-bg:     #142850;
  --bs-table-striped-color:  #b8d4e8;
  --bs-table-hover-bg:       #2e5580;
  --bs-table-hover-color:    #b8d4e8;
  --bs-table-color:          #b8d4e8;
  --bs-table-border-color:   rgba(12, 123, 147, 0.15);
  --bs-table-accent-bg:      transparent;
  color: #b8d4e8;
}

/* Table-dark header (Bootstrap utility) in dark mode */
body.dark-mode .table-dark th,
body.dark-mode .table-dark td {
  background-color: #1e3a5f !important;
  color: #b8d4e8 !important;
  border-color: rgba(12, 123, 147, 0.22) !important;
}

/* 8. Outline buttons in dark mode — Bootstrap 5.3 uses --bs-btn-* CSS vars; override both
      the variable AND the computed property so all specificity paths are covered */
body.dark-mode .btn-outline-primary {
  --bs-btn-color:          #00A8CC;
  --bs-btn-border-color:   #00A8CC;
  --bs-btn-hover-color:    #fff;
  --bs-btn-hover-bg:       #0C7B93;
  --bs-btn-hover-border-color: #0C7B93;
  --bs-btn-active-color:   #fff;
  --bs-btn-active-bg:      #0C7B93;
  color: #00A8CC !important;
  border-color: #00A8CC !important;
}
body.dark-mode .btn-outline-success {
  --bs-btn-color:          #84CEEB;
  --bs-btn-border-color:   #84CEEB;
  --bs-btn-hover-color:    #fff;
  --bs-btn-hover-bg:       #27496D;
  --bs-btn-hover-border-color: #27496D;
  color: #84CEEB !important;
  border-color: #84CEEB !important;
}
body.dark-mode .btn-outline-danger {
  --bs-btn-color:          #e85563;
  --bs-btn-border-color:   #e85563;
  --bs-btn-hover-color:    #fff;
  --bs-btn-hover-bg:       #c73d4b;
  --bs-btn-hover-border-color: #c73d4b;
  color: #e85563 !important;
  border-color: #e85563 !important;
}
body.dark-mode .btn-outline-info {
  --bs-btn-color:          #00A8CC;
  --bs-btn-border-color:   #00A8CC;
  --bs-btn-hover-color:    #fff;
  --bs-btn-hover-bg:       #0C7B93;
  color: #00A8CC !important;
  border-color: #00A8CC !important;
}
body.dark-mode .btn-outline-light {
  --bs-btn-color:          #b8d4e8;
  --bs-btn-border-color:   rgba(184, 212, 232, 0.40);
  --bs-btn-hover-bg:       #27496D;
  --bs-btn-hover-color:    #b8d4e8;
  color: #b8d4e8 !important;
  border-color: rgba(184, 212, 232, 0.40) !important;
}

/* 9. Modal body — ensure any dynamically injected content uses dark surface */
body.dark-mode .modal-body { background-color: #1e3a5f; color: #b8d4e8; }

/* 10. Small / muted text inside dark cards/modals */
body.dark-mode .modal-body .text-muted { color: #00A8CC !important; }
body.dark-mode .modal-body small { color: #84CEEB; }

/* Dark mode — theme picker dropdown */
body.dark-mode .theme-picker-menu { background-color: #1e3a5f; }
body.dark-mode .theme-picker-title { color: #5a7d9a; }
body.dark-mode .theme-swatch.active { border-color: #00A8CC; box-shadow: 0 0 0 2px rgba(0,168,204,0.45); }

/* ============================================================
   ROSE / PINK THEME
   #3a1e28 · #8d4460 · #b5607c · #d4899f · #f7eef1
   ============================================================ */

body.theme-pink {
  background-color: #f7eef1;
  color: #3a1e28;
}
body.theme-pink .navbar {
  background: linear-gradient(120deg, #3a1e28, #8d4460, #b5607c, #8d4460, #3a1e28) !important;
  background-size: 300% 300% !important;
  animation: navGradient 22s ease infinite;
  box-shadow: 0 4px 20px rgba(58, 30, 40, 0.45);
}
body.theme-pink .card {
  background-color: #fdf5f7;
  border-color: rgba(141, 68, 96, 0.18);
  color: #3a1e28;
}
body.theme-pink .card-header { border-color: rgba(141, 68, 96, 0.18); }
body.theme-pink .card-header:not([class*="bg-"]) { background-color: #e8cfd6; color: #3a1e28; }
body.theme-pink .card.bg-primary  { background: linear-gradient(135deg, #b5607c 0%, #8d4460 100%) !important; box-shadow: 0 6px 28px rgba(181, 96, 124, 0.38) !important; }
body.theme-pink .card.bg-success  { background: linear-gradient(135deg, #8d4460 0%, #3a1e28 100%) !important; box-shadow: 0 6px 28px rgba(141, 68, 96, 0.38) !important; }
body.theme-pink .card.bg-secondary{ background: linear-gradient(135deg, #b5607c 0%, #8d4460 100%) !important; }
body.theme-pink .card-header.bg-primary { background: linear-gradient(135deg, #b5607c 0%, #8d4460 100%) !important; }
body.theme-pink .card-header.bg-success { background: linear-gradient(135deg, #8d4460 0%, #3a1e28 100%) !important; }
body.theme-pink .card-header.bg-info    { background: linear-gradient(135deg, #b5607c 0%, #8d4460 100%) !important; }
body.theme-pink .btn-primary { background: linear-gradient(135deg, #b5607c 0%, #8d4460 100%); border: none; box-shadow: 0 3px 12px rgba(181, 96, 124, 0.35); }
body.theme-pink .btn-primary:hover { background: linear-gradient(135deg, #c27090 0%, #9d5070 100%); box-shadow: 0 5px 18px rgba(181, 96, 124, 0.50); transform: translateY(-2px); }
body.theme-pink .btn-success { background: linear-gradient(135deg, #8d4460 0%, #3a1e28 100%); border: none; box-shadow: 0 3px 12px rgba(141, 68, 96, 0.30); }
body.theme-pink .btn-success:hover { background: linear-gradient(135deg, #9d5070 0%, #4a2838 100%); transform: translateY(-2px); }
body.theme-pink .form-control, body.theme-pink .form-select { background-color: #f0e0e6; border-color: rgba(141, 68, 96, 0.32); color: #3a1e28; }
body.theme-pink .form-control:focus, body.theme-pink .form-select:focus { background-color: #fdf5f7; border-color: #8d4460; color: #3a1e28; box-shadow: 0 0 0 3px rgba(141, 68, 96, 0.18); }
body.theme-pink .form-label { color: #3a1e28; }
body.theme-pink .table thead th { background-color: #b5607c; color: #fff; border-bottom: 2px solid #8d4460; }
body.theme-pink .table tbody tr { background-color: #fdf5f7; }
body.theme-pink .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #ecdde2; color: #3a1e28; }
body.theme-pink .table-hover > tbody > tr:hover > * { background-color: #e3d0d6; color: #3a1e28; }
body.theme-pink .upload-area { background-color: #ecdde2; border-color: #b5607c; }
body.theme-pink .upload-area:hover { background-color: #e3d0d6; border-color: #8d4460; }
body.theme-pink .nav-tabs { border-bottom-color: #b5607c; }
body.theme-pink .nav-tabs .nav-link { color: #3a1e28; background-color: #e8cfd6; border-color: #b5607c #b5607c transparent; }
body.theme-pink .nav-tabs .nav-link:hover { background-color: #dcc0c8; border-color: #8d4460 #8d4460 transparent; }
body.theme-pink .nav-tabs .nav-link.active { background-color: #fdf5f7; border-color: #b5607c #b5607c #fdf5f7; color: #8d4460; font-weight: 600; }
body.theme-pink .tab-content.border { border-color: #b5607c !important; background-color: #fdf5f7; }
body.theme-pink .text-muted { color: #b5607c !important; }
body.theme-pink .progress-bar { background-color: #b5607c !important; }
body.theme-pink .dropdown-menu { background-color: #fdf5f7; border-color: rgba(141, 68, 96, 0.20); }
body.theme-pink .dropdown-item { color: #3a1e28; }
body.theme-pink .dropdown-item:hover { background-color: #f0e0e6; color: #3a1e28; }
body.theme-pink .list-group-item { background-color: #fdf5f7; border-color: rgba(141, 68, 96, 0.15); color: #3a1e28; }
body.theme-pink .list-group-item:hover { background-color: #f0e0e6; }
body.theme-pink .modal-content { background-color: #fdf5f7; color: #3a1e28; }
body.theme-pink .modal-header, body.theme-pink .modal-footer { border-color: rgba(141, 68, 96, 0.20); }
body.theme-pink .modal-body { background-color: #fdf5f7; color: #3a1e28; }
body.theme-pink .input-group-text { background-color: #f0e0e6; border-color: rgba(141, 68, 96, 0.32); color: #3a1e28; }
body.theme-pink .badge.bg-secondary { background-color: #c27090 !important; }
body.theme-pink hr { border-color: rgba(141, 68, 96, 0.20); opacity: 1; }
body.theme-pink .theme-picker-menu { background-color: #fdf5f7; }
body.theme-pink .theme-picker-title { color: #b5607c; }
body.theme-pink .theme-swatch.active { border-color: #8d4460; box-shadow: 0 0 0 2px rgba(141, 68, 96, 0.4); }

/* ============================================================
   SAGE / GREEN THEME
   #1a3322 · #2b5a3e · #3d7a57 · #6ea87e · #eaf2ed
   ============================================================ */

body.theme-green {
  background-color: #eaf2ed;
  color: #1a3322;
}
body.theme-green .navbar {
  background: linear-gradient(120deg, #1a3322, #2b5a3e, #3d7a57, #2b5a3e, #1a3322) !important;
  background-size: 300% 300% !important;
  animation: navGradient 22s ease infinite;
  box-shadow: 0 4px 20px rgba(26, 51, 34, 0.45);
}
body.theme-green .card {
  background-color: #f3f9f5;
  border-color: rgba(43, 90, 62, 0.18);
  color: #1a3322;
}
body.theme-green .card-header { border-color: rgba(43, 90, 62, 0.18); }
body.theme-green .card-header:not([class*="bg-"]) { background-color: #c8ddd0; color: #1a3322; }
body.theme-green .card.bg-primary  { background: linear-gradient(135deg, #3d7a57 0%, #2b5a3e 100%) !important; box-shadow: 0 6px 28px rgba(61, 122, 87, 0.38) !important; }
body.theme-green .card.bg-success  { background: linear-gradient(135deg, #2b5a3e 0%, #1a3322 100%) !important; box-shadow: 0 6px 28px rgba(43, 90, 62, 0.38) !important; }
body.theme-green .card.bg-secondary{ background: linear-gradient(135deg, #3d7a57 0%, #2b5a3e 100%) !important; }
body.theme-green .card-header.bg-primary { background: linear-gradient(135deg, #3d7a57 0%, #2b5a3e 100%) !important; }
body.theme-green .card-header.bg-success { background: linear-gradient(135deg, #2b5a3e 0%, #1a3322 100%) !important; }
body.theme-green .card-header.bg-info    { background: linear-gradient(135deg, #3d7a57 0%, #2b5a3e 100%) !important; }
body.theme-green .btn-primary { background: linear-gradient(135deg, #3d7a57 0%, #2b5a3e 100%); border: none; box-shadow: 0 3px 12px rgba(61, 122, 87, 0.35); }
body.theme-green .btn-primary:hover { background: linear-gradient(135deg, #4d8a67 0%, #3b6a4e 100%); box-shadow: 0 5px 18px rgba(61, 122, 87, 0.50); transform: translateY(-2px); }
body.theme-green .btn-success { background: linear-gradient(135deg, #2b5a3e 0%, #1a3322 100%); border: none; box-shadow: 0 3px 12px rgba(43, 90, 62, 0.30); }
body.theme-green .btn-success:hover { background: linear-gradient(135deg, #3b6a4e 0%, #2a4332 100%); transform: translateY(-2px); }
body.theme-green .form-control, body.theme-green .form-select { background-color: #daeee2; border-color: rgba(43, 90, 62, 0.32); color: #1a3322; }
body.theme-green .form-control:focus, body.theme-green .form-select:focus { background-color: #f3f9f5; border-color: #2b5a3e; color: #1a3322; box-shadow: 0 0 0 3px rgba(43, 90, 62, 0.18); }
body.theme-green .form-label { color: #1a3322; }
body.theme-green .table thead th { background-color: #3d7a57; color: #fff; border-bottom: 2px solid #2b5a3e; }
body.theme-green .table tbody tr { background-color: #f3f9f5; }
body.theme-green .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #d5e8dc; color: #1a3322; }
body.theme-green .table-hover > tbody > tr:hover > * { background-color: #c7dccf; color: #1a3322; }
body.theme-green .upload-area { background-color: #d5e8dc; border-color: #3d7a57; }
body.theme-green .upload-area:hover { background-color: #c7dccf; border-color: #2b5a3e; }
body.theme-green .nav-tabs { border-bottom-color: #3d7a57; }
body.theme-green .nav-tabs .nav-link { color: #1a3322; background-color: #c8ddd0; border-color: #3d7a57 #3d7a57 transparent; }
body.theme-green .nav-tabs .nav-link:hover { background-color: #bad2c3; border-color: #2b5a3e #2b5a3e transparent; }
body.theme-green .nav-tabs .nav-link.active { background-color: #f3f9f5; border-color: #3d7a57 #3d7a57 #f3f9f5; color: #2b5a3e; font-weight: 600; }
body.theme-green .tab-content.border { border-color: #3d7a57 !important; background-color: #f3f9f5; }
body.theme-green .text-muted { color: #3d7a57 !important; }
body.theme-green .progress-bar { background-color: #3d7a57 !important; }
body.theme-green .dropdown-menu { background-color: #f3f9f5; border-color: rgba(43, 90, 62, 0.20); }
body.theme-green .dropdown-item { color: #1a3322; }
body.theme-green .dropdown-item:hover { background-color: #daeee2; color: #1a3322; }
body.theme-green .list-group-item { background-color: #f3f9f5; border-color: rgba(43, 90, 62, 0.15); color: #1a3322; }
body.theme-green .list-group-item:hover { background-color: #daeee2; }
body.theme-green .modal-content { background-color: #f3f9f5; color: #1a3322; }
body.theme-green .modal-header, body.theme-green .modal-footer { border-color: rgba(43, 90, 62, 0.20); }
body.theme-green .modal-body { background-color: #f3f9f5; color: #1a3322; }
body.theme-green .input-group-text { background-color: #daeee2; border-color: rgba(43, 90, 62, 0.32); color: #1a3322; }
body.theme-green .badge.bg-secondary { background-color: #4d8a67 !important; }
body.theme-green hr { border-color: rgba(43, 90, 62, 0.20); opacity: 1; }
body.theme-green .theme-picker-menu { background-color: #f3f9f5; }
body.theme-green .theme-picker-title { color: #3d7a57; }
body.theme-green .theme-swatch.active { border-color: #2b5a3e; box-shadow: 0 0 0 2px rgba(43, 90, 62, 0.4); }

/* ============================================================
   LAVENDER / PURPLE THEME
   #2a1e4a · #4f4080 · #6b5aad · #9585c8 · #eeebf5
   ============================================================ */

body.theme-purple {
  background-color: #eeebf5;
  color: #2a1e4a;
}
body.theme-purple .navbar {
  background: linear-gradient(120deg, #2a1e4a, #4f4080, #6b5aad, #4f4080, #2a1e4a) !important;
  background-size: 300% 300% !important;
  animation: navGradient 22s ease infinite;
  box-shadow: 0 4px 20px rgba(42, 30, 74, 0.45);
}
body.theme-purple .card {
  background-color: #f5f3fa;
  border-color: rgba(79, 64, 128, 0.18);
  color: #2a1e4a;
}
body.theme-purple .card-header { border-color: rgba(79, 64, 128, 0.18); }
body.theme-purple .card-header:not([class*="bg-"]) { background-color: #d5ceea; color: #2a1e4a; }
body.theme-purple .card.bg-primary  { background: linear-gradient(135deg, #6b5aad 0%, #4f4080 100%) !important; box-shadow: 0 6px 28px rgba(107, 90, 173, 0.38) !important; }
body.theme-purple .card.bg-success  { background: linear-gradient(135deg, #4f4080 0%, #2a1e4a 100%) !important; box-shadow: 0 6px 28px rgba(79, 64, 128, 0.38) !important; }
body.theme-purple .card.bg-secondary{ background: linear-gradient(135deg, #6b5aad 0%, #4f4080 100%) !important; }
body.theme-purple .card-header.bg-primary { background: linear-gradient(135deg, #6b5aad 0%, #4f4080 100%) !important; }
body.theme-purple .card-header.bg-success { background: linear-gradient(135deg, #4f4080 0%, #2a1e4a 100%) !important; }
body.theme-purple .card-header.bg-info    { background: linear-gradient(135deg, #6b5aad 0%, #4f4080 100%) !important; }
body.theme-purple .btn-primary { background: linear-gradient(135deg, #6b5aad 0%, #4f4080 100%); border: none; box-shadow: 0 3px 12px rgba(107, 90, 173, 0.35); }
body.theme-purple .btn-primary:hover { background: linear-gradient(135deg, #7b6abd 0%, #5f5090 100%); box-shadow: 0 5px 18px rgba(107, 90, 173, 0.50); transform: translateY(-2px); }
body.theme-purple .btn-success { background: linear-gradient(135deg, #4f4080 0%, #2a1e4a 100%); border: none; box-shadow: 0 3px 12px rgba(79, 64, 128, 0.30); }
body.theme-purple .btn-success:hover { background: linear-gradient(135deg, #5f5090 0%, #3a2e5a 100%); transform: translateY(-2px); }
body.theme-purple .form-control, body.theme-purple .form-select { background-color: #e6e2f3; border-color: rgba(79, 64, 128, 0.32); color: #2a1e4a; }
body.theme-purple .form-control:focus, body.theme-purple .form-select:focus { background-color: #f5f3fa; border-color: #4f4080; color: #2a1e4a; box-shadow: 0 0 0 3px rgba(79, 64, 128, 0.18); }
body.theme-purple .form-label { color: #2a1e4a; }
body.theme-purple .table thead th { background-color: #6b5aad; color: #fff; border-bottom: 2px solid #4f4080; }
body.theme-purple .table tbody tr { background-color: #f5f3fa; }
body.theme-purple .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #dcd8ee; color: #2a1e4a; }
body.theme-purple .table-hover > tbody > tr:hover > * { background-color: #cfc9e5; color: #2a1e4a; }
body.theme-purple .upload-area { background-color: #dcd8ee; border-color: #6b5aad; }
body.theme-purple .upload-area:hover { background-color: #cfc9e5; border-color: #4f4080; }
body.theme-purple .nav-tabs { border-bottom-color: #6b5aad; }
body.theme-purple .nav-tabs .nav-link { color: #2a1e4a; background-color: #d5ceea; border-color: #6b5aad #6b5aad transparent; }
body.theme-purple .nav-tabs .nav-link:hover { background-color: #c8c0e0; border-color: #4f4080 #4f4080 transparent; }
body.theme-purple .nav-tabs .nav-link.active { background-color: #f5f3fa; border-color: #6b5aad #6b5aad #f5f3fa; color: #4f4080; font-weight: 600; }
body.theme-purple .tab-content.border { border-color: #6b5aad !important; background-color: #f5f3fa; }
body.theme-purple .text-muted { color: #6b5aad !important; }
body.theme-purple .progress-bar { background-color: #6b5aad !important; }
body.theme-purple .dropdown-menu { background-color: #f5f3fa; border-color: rgba(79, 64, 128, 0.20); }
body.theme-purple .dropdown-item { color: #2a1e4a; }
body.theme-purple .dropdown-item:hover { background-color: #e6e2f3; color: #2a1e4a; }
body.theme-purple .list-group-item { background-color: #f5f3fa; border-color: rgba(79, 64, 128, 0.15); color: #2a1e4a; }
body.theme-purple .list-group-item:hover { background-color: #e6e2f3; }
body.theme-purple .modal-content { background-color: #f5f3fa; color: #2a1e4a; }
body.theme-purple .modal-header, body.theme-purple .modal-footer { border-color: rgba(79, 64, 128, 0.20); }
body.theme-purple .modal-body { background-color: #f5f3fa; color: #2a1e4a; }
body.theme-purple .input-group-text { background-color: #e6e2f3; border-color: rgba(79, 64, 128, 0.32); color: #2a1e4a; }
body.theme-purple .badge.bg-secondary { background-color: #7b6abd !important; }
body.theme-purple hr { border-color: rgba(79, 64, 128, 0.20); opacity: 1; }
body.theme-purple .theme-picker-menu { background-color: #f5f3fa; }
body.theme-purple .theme-picker-title { color: #6b5aad; }
body.theme-purple .theme-swatch.active { border-color: #4f4080; box-shadow: 0 0 0 2px rgba(79, 64, 128, 0.4); }

/* ============================================================
   YELLOW / MUSTARD THEME
   #352e08 · #887210 · #b09618 · #d0b830 · #faf7e3
   ============================================================ */

body.theme-yellow {
  background-color: #faf7e3;
  color: #352e08;
}
body.theme-yellow .navbar {
  background: linear-gradient(120deg, #352e08, #887210, #b09618, #887210, #352e08) !important;
  background-size: 300% 300% !important;
  animation: navGradient 22s ease infinite;
  box-shadow: 0 4px 20px rgba(53, 46, 8, 0.45);
}
body.theme-yellow .card {
  background-color: #fdfcf0;
  border-color: rgba(136, 114, 16, 0.18);
  color: #352e08;
}
body.theme-yellow .card-header { border-color: rgba(136, 114, 16, 0.18); }
body.theme-yellow .card-header:not([class*="bg-"]) { background-color: #d8cf80; color: #352e08; }
body.theme-yellow .card.bg-primary  { background: linear-gradient(135deg, #b09618 0%, #887210 100%) !important; box-shadow: 0 6px 28px rgba(176, 150, 24, 0.38) !important; }
body.theme-yellow .card.bg-success  { background: linear-gradient(135deg, #887210 0%, #352e08 100%) !important; box-shadow: 0 6px 28px rgba(136, 114, 16, 0.38) !important; }
body.theme-yellow .card.bg-secondary{ background: linear-gradient(135deg, #b09618 0%, #887210 100%) !important; }
body.theme-yellow .card-header.bg-primary { background: linear-gradient(135deg, #b09618 0%, #887210 100%) !important; }
body.theme-yellow .card-header.bg-success { background: linear-gradient(135deg, #887210 0%, #352e08 100%) !important; }
body.theme-yellow .card-header.bg-info    { background: linear-gradient(135deg, #b09618 0%, #887210 100%) !important; }
body.theme-yellow .btn-primary { background: linear-gradient(135deg, #b09618 0%, #887210 100%); border: none; box-shadow: 0 3px 12px rgba(176, 150, 24, 0.35); }
body.theme-yellow .btn-primary:hover { background: linear-gradient(135deg, #c0a628 0%, #988220 100%); box-shadow: 0 5px 18px rgba(176, 150, 24, 0.50); transform: translateY(-2px); }
body.theme-yellow .btn-success { background: linear-gradient(135deg, #887210 0%, #352e08 100%); border: none; box-shadow: 0 3px 12px rgba(136, 114, 16, 0.30); }
body.theme-yellow .btn-success:hover { background: linear-gradient(135deg, #988220 0%, #453e18 100%); transform: translateY(-2px); }
body.theme-yellow .form-control, body.theme-yellow .form-select { background-color: #ece8b0; border-color: rgba(136, 114, 16, 0.32); color: #352e08; }
body.theme-yellow .form-control:focus, body.theme-yellow .form-select:focus { background-color: #fdfcf0; border-color: #887210; color: #352e08; box-shadow: 0 0 0 3px rgba(136, 114, 16, 0.18); }
body.theme-yellow .form-label { color: #352e08; }
body.theme-yellow .table thead th { background-color: #b09618; color: #fff; border-bottom: 2px solid #887210; }
body.theme-yellow .table tbody tr { background-color: #fdfcf0; }
body.theme-yellow .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #e8e0a8; color: #352e08; }
body.theme-yellow .table-hover > tbody > tr:hover > * { background-color: #ddd898; color: #352e08; }
body.theme-yellow .upload-area { background-color: #e8e0a8; border-color: #b09618; }
body.theme-yellow .upload-area:hover { background-color: #ddd898; border-color: #887210; }
body.theme-yellow .nav-tabs { border-bottom-color: #b09618; }
body.theme-yellow .nav-tabs .nav-link { color: #352e08; background-color: #d8cf80; border-color: #b09618 #b09618 transparent; }
body.theme-yellow .nav-tabs .nav-link:hover { background-color: #ccc470; border-color: #887210 #887210 transparent; }
body.theme-yellow .nav-tabs .nav-link.active { background-color: #fdfcf0; border-color: #b09618 #b09618 #fdfcf0; color: #887210; font-weight: 600; }
body.theme-yellow .tab-content.border { border-color: #b09618 !important; background-color: #fdfcf0; }
body.theme-yellow .text-muted { color: #b09618 !important; }
body.theme-yellow .progress-bar { background-color: #b09618 !important; }
body.theme-yellow .dropdown-menu { background-color: #fdfcf0; border-color: rgba(136, 114, 16, 0.20); }
body.theme-yellow .dropdown-item { color: #352e08; }
body.theme-yellow .dropdown-item:hover { background-color: #ece8b0; color: #352e08; }
body.theme-yellow .list-group-item { background-color: #fdfcf0; border-color: rgba(136, 114, 16, 0.15); color: #352e08; }
body.theme-yellow .list-group-item:hover { background-color: #ece8b0; }
body.theme-yellow .modal-content { background-color: #fdfcf0; color: #352e08; }
body.theme-yellow .modal-header, body.theme-yellow .modal-footer { border-color: rgba(136, 114, 16, 0.20); }
body.theme-yellow .modal-body { background-color: #fdfcf0; color: #352e08; }
body.theme-yellow .input-group-text { background-color: #ece8b0; border-color: rgba(136, 114, 16, 0.32); color: #352e08; }
body.theme-yellow .badge.bg-secondary { background-color: #c0a628 !important; }
body.theme-yellow hr { border-color: rgba(136, 114, 16, 0.20); opacity: 1; }
body.theme-yellow .theme-picker-menu { background-color: #fdfcf0; }
body.theme-yellow .theme-picker-title { color: #b09618; }
body.theme-yellow .theme-swatch.active { border-color: #887210; box-shadow: 0 0 0 2px rgba(136, 114, 16, 0.4); }

/* ============================================================
   ORANGE / TERRACOTTA THEME
   #3a1e08 · #985520 · #c07030 · #d89058 · #f8f0e8
   ============================================================ */

body.theme-orange {
  background-color: #f8f0e8;
  color: #3a1e08;
}
body.theme-orange .navbar {
  background: linear-gradient(120deg, #3a1e08, #985520, #c07030, #985520, #3a1e08) !important;
  background-size: 300% 300% !important;
  animation: navGradient 22s ease infinite;
  box-shadow: 0 4px 20px rgba(58, 30, 8, 0.45);
}
body.theme-orange .card {
  background-color: #fdf8f3;
  border-color: rgba(152, 85, 32, 0.18);
  color: #3a1e08;
}
body.theme-orange .card-header { border-color: rgba(152, 85, 32, 0.18); }
body.theme-orange .card-header:not([class*="bg-"]) { background-color: #e8c8a0; color: #3a1e08; }
body.theme-orange .card.bg-primary  { background: linear-gradient(135deg, #c07030 0%, #985520 100%) !important; box-shadow: 0 6px 28px rgba(192, 112, 48, 0.38) !important; }
body.theme-orange .card.bg-success  { background: linear-gradient(135deg, #985520 0%, #3a1e08 100%) !important; box-shadow: 0 6px 28px rgba(152, 85, 32, 0.38) !important; }
body.theme-orange .card.bg-secondary{ background: linear-gradient(135deg, #c07030 0%, #985520 100%) !important; }
body.theme-orange .card-header.bg-primary { background: linear-gradient(135deg, #c07030 0%, #985520 100%) !important; }
body.theme-orange .card-header.bg-success { background: linear-gradient(135deg, #985520 0%, #3a1e08 100%) !important; }
body.theme-orange .card-header.bg-info    { background: linear-gradient(135deg, #c07030 0%, #985520 100%) !important; }
body.theme-orange .btn-primary { background: linear-gradient(135deg, #c07030 0%, #985520 100%); border: none; box-shadow: 0 3px 12px rgba(192, 112, 48, 0.35); }
body.theme-orange .btn-primary:hover { background: linear-gradient(135deg, #d08040 0%, #a86530 100%); box-shadow: 0 5px 18px rgba(192, 112, 48, 0.50); transform: translateY(-2px); }
body.theme-orange .btn-success { background: linear-gradient(135deg, #985520 0%, #3a1e08 100%); border: none; box-shadow: 0 3px 12px rgba(152, 85, 32, 0.30); }
body.theme-orange .btn-success:hover { background: linear-gradient(135deg, #a86530 0%, #4a2e18 100%); transform: translateY(-2px); }
body.theme-orange .form-control, body.theme-orange .form-select { background-color: #eddcc0; border-color: rgba(152, 85, 32, 0.32); color: #3a1e08; }
body.theme-orange .form-control:focus, body.theme-orange .form-select:focus { background-color: #fdf8f3; border-color: #985520; color: #3a1e08; box-shadow: 0 0 0 3px rgba(152, 85, 32, 0.18); }
body.theme-orange .form-label { color: #3a1e08; }
body.theme-orange .table thead th { background-color: #c07030; color: #fff; border-bottom: 2px solid #985520; }
body.theme-orange .table tbody tr { background-color: #fdf8f3; }
body.theme-orange .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #e8d0b0; color: #3a1e08; }
body.theme-orange .table-hover > tbody > tr:hover > * { background-color: #ddc4a0; color: #3a1e08; }
body.theme-orange .upload-area { background-color: #e8d0b0; border-color: #c07030; }
body.theme-orange .upload-area:hover { background-color: #ddc4a0; border-color: #985520; }
body.theme-orange .nav-tabs { border-bottom-color: #c07030; }
body.theme-orange .nav-tabs .nav-link { color: #3a1e08; background-color: #e8c8a0; border-color: #c07030 #c07030 transparent; }
body.theme-orange .nav-tabs .nav-link:hover { background-color: #ddb888; border-color: #985520 #985520 transparent; }
body.theme-orange .nav-tabs .nav-link.active { background-color: #fdf8f3; border-color: #c07030 #c07030 #fdf8f3; color: #985520; font-weight: 600; }
body.theme-orange .tab-content.border { border-color: #c07030 !important; background-color: #fdf8f3; }
body.theme-orange .text-muted { color: #c07030 !important; }
body.theme-orange .progress-bar { background-color: #c07030 !important; }
body.theme-orange .dropdown-menu { background-color: #fdf8f3; border-color: rgba(152, 85, 32, 0.20); }
body.theme-orange .dropdown-item { color: #3a1e08; }
body.theme-orange .dropdown-item:hover { background-color: #eddcc0; color: #3a1e08; }
body.theme-orange .list-group-item { background-color: #fdf8f3; border-color: rgba(152, 85, 32, 0.15); color: #3a1e08; }
body.theme-orange .list-group-item:hover { background-color: #eddcc0; }
body.theme-orange .modal-content { background-color: #fdf8f3; color: #3a1e08; }
body.theme-orange .modal-header, body.theme-orange .modal-footer { border-color: rgba(152, 85, 32, 0.20); }
body.theme-orange .modal-body { background-color: #fdf8f3; color: #3a1e08; }
body.theme-orange .input-group-text { background-color: #eddcc0; border-color: rgba(152, 85, 32, 0.32); color: #3a1e08; }
body.theme-orange .badge.bg-secondary { background-color: #d08040 !important; }
body.theme-orange hr { border-color: rgba(152, 85, 32, 0.20); opacity: 1; }
body.theme-orange .theme-picker-menu { background-color: #fdf8f3; }
body.theme-orange .theme-picker-title { color: #c07030; }
body.theme-orange .theme-swatch.active { border-color: #985520; box-shadow: 0 0 0 2px rgba(152, 85, 32, 0.4); }