/* ==========================================================================
   theme.css — "JDigital" palette override for Bootstrap 5.3
   --------------------------------------------------------------------------
   Brand palette:
     Brand cyan   #00F7EF   (sampled from static/images/jdigital-logo.png —
                              logo wordmark + small accent touches only;
                              too light for body text or button fills)
     Brand blue   #2563EB   (primary action color — buttons, links, active
                              nav/tab states — matching the reference UI)
     Ink          #111827   (near-black text / dark surfaces)
     Slate        #64748B   (secondary/muted UI)
     Mist         #F7F8FA   (page background)

   Semantic mapping:
     primary  -> Brand blue   (main CTAs, links, active nav, focus rings)
     secondary-> Slate        (secondary buttons, muted UI, outlines)
     success  -> Green        (standard "ok"/completed state)
     info     -> Brand cyan   (neutral/info notices — echoes the logo)
     warning  -> Amber        (standard warning/processing state)
     danger   -> Red          (destructive/alert actions)
     light    -> Pale slate   (light surfaces, subtle chrome)
     dark     -> Ink          (text, dark surfaces, dark buttons)

   Hover/active/subtle/emphasis shades below are pre-computed tints & shades
   of the base colors (no SASS build step needed since Bootstrap is loaded
   from the CDN as compiled CSS).
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  /* ---- Raw palette tokens (use these directly in custom markup) ---- */
  --palette-brand-cyan: #00F7EF;
  --palette-brand-blue: #2563EB;
  --palette-ink: #111827;
  --palette-slate: #64748B;
  --palette-mist: #F7F8FA;

  /* ---- Bootstrap theme colors ---- */
  --bs-primary: #2563EB;
  --bs-primary-rgb: 37, 99, 235;
  --bs-primary-text-emphasis: #1D4ED8;
  --bs-primary-bg-subtle: #EBF1FF;
  --bs-primary-border-subtle: #C7D9FF;

  --bs-secondary: #64748B;
  --bs-secondary-rgb: 100, 116, 139;
  --bs-secondary-text-emphasis: #334155;
  --bs-secondary-bg-subtle: #F1F5F9;
  --bs-secondary-border-subtle: #E2E8F0;

  --bs-success: #16A34A;
  --bs-success-rgb: 22, 163, 74;
  --bs-success-text-emphasis: #15803D;
  --bs-success-bg-subtle: #F0FDF4;
  --bs-success-border-subtle: #BBF7D0;

  --bs-info: #00E5DB;
  --bs-info-rgb: 0, 229, 219;
  --bs-info-text-emphasis: #0F766E;
  --bs-info-bg-subtle: #E5FFFD;
  --bs-info-border-subtle: #A6FFF6;

  --bs-warning: #F59E0B;
  --bs-warning-rgb: 245, 158, 11;
  --bs-warning-text-emphasis: #92400E;
  --bs-warning-bg-subtle: #FFFBEB;
  --bs-warning-border-subtle: #FDE68A;

  --bs-danger: #DC2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-text-emphasis: #B91C1C;
  --bs-danger-bg-subtle: #FEF2F2;
  --bs-danger-border-subtle: #FECACA;

  --bs-light: #F1F5F9;
  --bs-light-rgb: 241, 245, 249;
  --bs-light-text-emphasis: #475569;
  --bs-light-bg-subtle: #FBFCFD;
  --bs-light-border-subtle: #E9EDF2;

  --bs-dark: #111827;
  --bs-dark-rgb: 17, 24, 39;
  --bs-dark-text-emphasis: #111827;
  --bs-dark-bg-subtle: #E5E7EB;
  --bs-dark-border-subtle: #9CA3AF;

  /* ---- Body / links / borders / focus ring ---- */
  --bs-body-bg: #F7F8FA;
  --bs-body-bg-rgb: 247, 248, 250;
  --bs-body-color: #1E2430;
  --bs-body-color-rgb: 30, 36, 48;
  --bs-emphasis-color: #0F1115;
  --bs-secondary-color: rgba(30, 36, 48, 0.65);
  --bs-tertiary-bg: #F1F3F6;
  --bs-border-color: #E3E6EB;
  --bs-border-color-translucent: rgba(17, 24, 39, 0.12);
  --bs-link-color: #2563EB;
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: #1D4ED8;
  --bs-link-hover-color-rgb: 29, 78, 216;
  --bs-focus-ring-color: rgba(37, 99, 235, 0.35);
}

body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* ==========================================================================
   Buttons — solid variants
   ========================================================================== */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #2563EB;
  --bs-btn-border-color: #2563EB;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1D4ED8;
  --bs-btn-hover-border-color: #1E45C4;
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1E45C4;
  --bs-btn-active-border-color: #1C3FAF;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #2563EB;
  --bs-btn-disabled-border-color: #2563EB;
}
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #64748B;
  --bs-btn-border-color: #64748B;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #556173;
  --bs-btn-hover-border-color: #4C5766;
  --bs-btn-focus-shadow-rgb: 100, 116, 139;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4C5766;
  --bs-btn-active-border-color: #434D5A;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #64748B;
  --bs-btn-disabled-border-color: #64748B;
}
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #16A34A;
  --bs-btn-border-color: #16A34A;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #148A3F;
  --bs-btn-hover-border-color: #128139;
  --bs-btn-focus-shadow-rgb: 22, 163, 74;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #128139;
  --bs-btn-active-border-color: #107834;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #16A34A;
  --bs-btn-disabled-border-color: #16A34A;
}
.btn-info {
  --bs-btn-color: #063330;
  --bs-btn-bg: #00E5DB;
  --bs-btn-border-color: #00E5DB;
  --bs-btn-hover-color: #063330;
  --bs-btn-hover-bg: #1AECE2;
  --bs-btn-hover-border-color: #0DE9DE;
  --bs-btn-focus-shadow-rgb: 0, 229, 219;
  --bs-btn-active-color: #063330;
  --bs-btn-active-bg: #33EFE7;
  --bs-btn-active-border-color: #1AECE2;
  --bs-btn-disabled-color: #063330;
  --bs-btn-disabled-bg: #00E5DB;
  --bs-btn-disabled-border-color: #00E5DB;
}
.btn-warning {
  --bs-btn-color: #402100;
  --bs-btn-bg: #F59E0B;
  --bs-btn-border-color: #F59E0B;
  --bs-btn-hover-color: #402100;
  --bs-btn-hover-bg: #F7AC2C;
  --bs-btn-hover-border-color: #F6A61E;
  --bs-btn-focus-shadow-rgb: 245, 158, 11;
  --bs-btn-active-color: #402100;
  --bs-btn-active-bg: #F8B33D;
  --bs-btn-active-border-color: #F7AC2C;
  --bs-btn-disabled-color: #402100;
  --bs-btn-disabled-bg: #F59E0B;
  --bs-btn-disabled-border-color: #F59E0B;
}
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #DC2626;
  --bs-btn-border-color: #DC2626;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #BB1F1F;
  --bs-btn-hover-border-color: #B01D1D;
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #B01D1D;
  --bs-btn-active-border-color: #A51B1B;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #DC2626;
  --bs-btn-disabled-border-color: #DC2626;
}
.btn-light {
  --bs-btn-color: #1E2430;
  --bs-btn-bg: #F1F5F9;
  --bs-btn-border-color: #F1F5F9;
  --bs-btn-hover-color: #1E2430;
  --bs-btn-hover-bg: #E2E8F0;
  --bs-btn-hover-border-color: #DCE3EC;
  --bs-btn-active-color: #1E2430;
  --bs-btn-active-bg: #D6DEE8;
  --bs-btn-active-border-color: #CBD5E1;
}
.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #111827;
  --bs-btn-border-color: #111827;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2A3344;
  --bs-btn-hover-border-color: #1F2937;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #353F52;
  --bs-btn-active-border-color: #2A3344;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #111827;
  --bs-btn-disabled-border-color: #111827;
}

/* ---- Outline buttons ---- */
.btn-outline-primary {
  --bs-btn-color: #2563EB;
  --bs-btn-border-color: #2563EB;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2563EB;
  --bs-btn-hover-border-color: #2563EB;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1D4ED8;
  --bs-btn-active-border-color: #1E45C4;
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
  --bs-btn-disabled-color: #2563EB;
  --bs-btn-disabled-border-color: #2563EB;
}
.btn-outline-secondary {
  --bs-btn-color: #475569;
  --bs-btn-border-color: #CBD5E1;
  --bs-btn-hover-color: #1E2430;
  --bs-btn-hover-bg: #F1F5F9;
  --bs-btn-hover-border-color: #CBD5E1;
  --bs-btn-active-color: #1E2430;
  --bs-btn-active-bg: #E2E8F0;
  --bs-btn-active-border-color: #CBD5E1;
  --bs-btn-disabled-color: #64748B;
  --bs-btn-disabled-border-color: #CBD5E1;
}
.btn-outline-danger {
  --bs-btn-color: #DC2626;
  --bs-btn-border-color: #DC2626;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #DC2626;
  --bs-btn-hover-border-color: #DC2626;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #BB1F1F;
  --bs-btn-active-border-color: #B01D1D;
  --bs-btn-disabled-color: #DC2626;
  --bs-btn-disabled-border-color: #DC2626;
}

/* ==========================================================================
   Forms — inputs, textareas, selects, checks, switches
   ========================================================================== */
.form-control,
.form-select {
  background-color: #fff;
  border-color: #DCE1E8;
  color: #1E2430;
}
.form-control:focus,
.form-select:focus {
  border-color: #2563EB;
  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}
.form-control::placeholder {
  color: #94A3B8;
}
.form-check-input:checked {
  background-color: #2563EB;
  border-color: #1D4ED8;
}
.form-check-input:focus {
  border-color: #2563EB;
  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}
.form-switch .form-check-input:checked {
  background-color: #2563EB;
  border-color: #1D4ED8;
}
.form-range::-webkit-slider-thumb {
  background-color: #2563EB;
}
.form-range::-moz-range-thumb {
  background-color: #2563EB;
}
.input-group-text {
  background-color: #F1F5F9;
  border-color: #DCE1E8;
  color: #334155;
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar-brand-theme {
  background-color: #2563EB;
}
.navbar-theme {
  background-color: #fff;
  border-bottom: 1px solid var(--bs-border-color);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
.navbar-theme .navbar-brand img {
  display: block;
}
.navbar-theme .nav-link {
  color: rgba(30, 36, 48, 0.72);
  border-bottom: 2px solid transparent;
}
.navbar-theme .nav-link.active,
.navbar-theme .nav-link:hover {
  color: #111827;
  font-weight: 600;
}
.navbar-theme .nav-link.active {
  color: #2563EB;
  border-bottom-color: #2563EB;
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: #F7F8FA;
  --bs-table-hover-bg: #F3F6FF;
  --bs-table-border-color: #E3E6EB;
  color: #1E2430;
}
.table-primary {
  --bs-table-bg: #EBF1FF;
  --bs-table-border-color: #C7D9FF;
  --bs-table-striped-bg: #E0EAFF;
  --bs-table-hover-bg: #D6E3FF;
  color: #1E2430;
}

/* ==========================================================================
   Dropdowns
   ========================================================================== */
.dropdown-menu {
  --bs-dropdown-border-color: #E3E6EB;
  --bs-dropdown-link-active-bg: #2563EB;
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-hover-bg: #F1F5F9;
  --bs-dropdown-link-hover-color: #1E2430;
}
/* Base styles for desktop */
.navbar-nav .dropdown-menu {
  width: 250px;
}
/* Mobile view adjustments */
@media (max-width: 767.98px) {
  .navbar-nav .dropdown-menu {
    width: 100%;
  }
}

/* ==========================================================================
   Text & badge contrast
   --------------------------------------------------------------------------
   The brand cyan (info) is a light, neon color, so Bootstrap's stock
   `.text-{color}` utilities (raw color as text on a light body bg) and
   `.text-bg-{color}` utilities (hardcoded text color on badges) can be too
   low-contrast to read. Route text usages to darker "-emphasis" shades
   instead, and pick readable badge/pill text per color. Loaded after
   bootstrap.min.css, so equal-specificity !important rules here win on
   source order; the .badge/.text-bg prefixes add specificity as extra
   insurance.
   ========================================================================== */
.text-primary { color: #1D4ED8 !important; }
.text-secondary { color: #334155 !important; }
.text-success { color: #15803D !important; }
.text-info { color: #0F766E !important; }
.text-warning { color: #92400E !important; }
.text-danger { color: #B91C1C !important; }
.text-light { color: #475569 !important; }

.text-bg-primary,
.badge.text-bg-primary { color: #fff !important; }
.text-bg-secondary,
.badge.text-bg-secondary { color: #fff !important; }
.text-bg-success,
.badge.text-bg-success { color: #fff !important; }
.text-bg-info,
.badge.text-bg-info { color: #063330 !important; }
.text-bg-warning,
.badge.text-bg-warning { color: #402100 !important; }
.text-bg-danger,
.badge.text-bg-danger { color: #fff !important; }
.text-bg-light,
.badge.text-bg-light { color: #1E2430 !important; }

.alert-primary {
  --bs-alert-color: #1D4ED8;
  --bs-alert-bg: #EBF1FF;
  --bs-alert-border-color: #C7D9FF;
}
.alert-success {
  --bs-alert-color: #15803D;
  --bs-alert-bg: #F0FDF4;
  --bs-alert-border-color: #BBF7D0;
}
.alert-info {
  --bs-alert-color: #0F766E;
  --bs-alert-bg: #E5FFFD;
  --bs-alert-border-color: #A6FFF6;
}
.alert-warning {
  --bs-alert-color: #92400E;
  --bs-alert-bg: #FFFBEB;
  --bs-alert-border-color: #FDE68A;
}
.alert-danger {
  --bs-alert-color: #B91C1C;
  --bs-alert-bg: #FEF2F2;
  --bs-alert-border-color: #FECACA;
}

/* ==========================================================================
   Nav pills / tabs / pagination / progress / list-group
   ========================================================================== */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #2563EB;
  color: #fff;
}
.nav-tabs .nav-link.active {
  color: #1E2430;
  border-color: #E3E6EB #E3E6EB #fff;
}
.page-link {
  color: #2563EB;
}
.page-item.active .page-link {
  background-color: #2563EB;
  border-color: #2563EB;
  color: #fff;
}
.progress-bar {
  background-color: #2563EB;
  color: #fff;
}
.list-group-item.active {
  background-color: #2563EB;
  border-color: #2563EB;
  color: #fff;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  border-color: #E3E6EB;
}
.card-header {
  background-color: #F7F8FA;
  border-color: #E3E6EB;
}

/* ==========================================================================
   Utility helpers for the /sample reference page
   ========================================================================== */
.swatch {
  display: inline-block;
  width: 100%;
  height: 4.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}