:root{
  /* Brand */
  --accent: #0d6efd;
  --accent-2: #1e7bff;
  --accent2: var(--accent);
  --accent-soft: rgba(13,110,253,.12);
  --accent-hover: rgba(13,110,253,.08);
  --on-accent: rgba(255,255,255,.96);

  /* Surfaces */
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-2: rgba(255,255,255,.96);
  --panel-3: rgba(248,250,252,.90);

  /* Text */
  --text: rgba(16,24,40,.92);
  --muted: rgba(16,24,40,.60);

  /* Borders */
  --border-color: rgba(16,24,40,.10);

  /* Controls */
  --input-bg: rgba(255,255,255,.92);
  --input-border: rgba(16,24,40,.16);
  --input-text: rgba(16,24,40,.92);
  --ring: rgba(13,110,253,.16);

  /* Navbar */
  --nav-bg: linear-gradient(90deg, #0d6efd, #0b5ed7);
  --nav-border: rgba(255,255,255,.22);
  --nav-title: var(--on-accent);

  --nav-pill-bg: rgba(255,255,255,.14);
  --nav-pill-border: rgba(255,255,255,.22);
  --nav-pill-text: var(--on-accent);

  --nav-icon-bg: rgba(255,255,255,.12);
  --nav-icon-border: rgba(255,255,255,.25);
  --nav-icon-text: var(--on-accent);
  --nav-icon-hover: rgba(255,255,255,.18);

  /* Sidebar nav */
  --nav-item-text: rgba(16,24,40,.86);
  --nav-item-icon: rgba(16,24,40,.60);
  --nav-item-hover: var(--accent-hover);
  --nav-item-active-bg: rgba(13,110,253,.14);
  --nav-item-active-text: rgba(16,24,40,.96);

  /* DataTables */
  --dt-bg: var(--panel);
  --dt-head-bg: #cfe3ff;
  --dt-head-text: rgba(16,24,40,.92);
  --dt-row-hover: rgba(13,110,253,.06);
  --dt-border: rgba(16,24,40,.10);
  --dt-shadow: 0 10px 26px rgba(16,24,40,.10);

  /* Buttons */
  --btn-radius: 14px;
  --btn-shadow: 0 12px 26px rgba(16,24,40,.12);

  --btn-primary-bg: var(--accent);
  --btn-primary-text: var(--on-accent);
  --btn-primary-hover: color-mix(in srgb, var(--accent) 88%, #000);
  --btn-primary-soft: rgba(13,110,253,.12);

  --btn-secondary-bg: rgba(108,117,125,.10);
  --btn-secondary-text: rgba(16,24,40,.88);
  --btn-secondary-hover: rgba(108,117,125,.16);

  --btn-success-bg: #198754;
  --btn-success-hover: #157347;

  --btn-warning-bg: #ffc107;
  --btn-warning-hover: #e0a800;

  --btn-danger-bg: #dc3545;
  --btn-danger-hover: #bb2d3b;

  /* Badges */
  --badge-radius: 999px;
  --badge-font: 700;
  --badge-padding: 4px 10px;

  --badge-primary-bg: rgba(13,110,253,.14);
  --badge-primary-text: rgba(13,110,253,.92);

  --badge-success-bg: rgba(25,135,84,.14);
  --badge-success-text: rgba(15,122,52,.98);

  --badge-warning-bg: rgba(255,193,7,.20);
  --badge-warning-text: rgba(138,75,0,.98);

  --badge-danger-bg: rgba(220,53,69,.14);
  --badge-danger-text: rgba(160,24,24,.98);

  --badge-neutral-bg: rgba(16,24,40,.08);
  --badge-neutral-text: rgba(16,24,40,.80);

  /* Modals */
  --modal-bg: var(--panel);
  --modal-border: rgba(16,24,40,.14);
  --modal-shadow: 0 18px 50px rgba(16,24,40,.18);

  color-scheme: light;
}

/* =========================
   Settings tabs / nav hover visibility (Light theme)
   Prevent white-on-white hover causing unreadable text.
========================= */
.nav.nav-pills .nav-link,
.nav.nav-tabs .nav-link,
.nav-pills .nav-link,
.nav-tabs .nav-link{
  color: var(--text);
}

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

.nav.nav-pills .nav-link.active,
.nav.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active{
  background: var(--accent);
  color: var(--on-accent);
}

/* Checkbox / multi-select tick visibility */
.form-check-input:checked{
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}