/* theme.css — load AFTER the Bootstrap 5.3+ CDN stylesheet */

/* =============================
   1) Core palette (CSS variables)
   ============================= */
:root{
  --bs-primary:#64A7F5;  --bs-primary-rgb:100,167,245;
  --bs-secondary:#64748B;--bs-secondary-rgb:100,116,139;
  --bs-success:#FB9516;  --bs-success-rgb:251,149,22;
  --bs-danger:#D6293E;   --bs-danger-rgb:214,41,62;
  --bs-warning:#D6293E;  --bs-warning-rgb:214,41,62;
  --bs-info:#02367B;     --bs-info-rgb:2,54,123;
  --bs-light:#F5F5F5;    --bs-light-rgb:245,245,245;
  --bs-dark:#1E2945;     --bs-dark-rgb:30,41,69;
}

/* =====================================
   2) Background / badge / text-bg usage
   ===================================== */
.bg-warning{ --bs-bg-opacity:.7; } /* default 70% without extra class */

.text-bg-warning{
  background-color: rgba(var(--bs-warning-rgb), .7) !important;
  color:#fff !important;
}

/* Badges using bg-warning */
.badge.bg-warning{
  --bs-bg-opacity:.7;
  color:#fff;
}

/* =====================================
   3) Buttons (solid + outline) @ 70%
   ===================================== */
.btn-warning{
  --bs-btn-color:#fff;
  --bs-btn-bg: rgba(var(--bs-warning-rgb), .7);
  --bs-btn-border-color: rgba(var(--bs-warning-rgb), .7);

  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: rgba(var(--bs-warning-rgb), .85);
  --bs-btn-hover-border-color: rgba(var(--bs-warning-rgb), .85);

  --bs-btn-active-color:#fff;
  --bs-btn-active-bg: rgba(var(--bs-warning-rgb), .9);
  --bs-btn-active-border-color: rgba(var(--bs-warning-rgb), .9);

  --bs-btn-disabled-color:#fff;
  --bs-btn-disabled-bg: rgba(var(--bs-warning-rgb), .7);
  --bs-btn-disabled-border-color: rgba(var(--bs-warning-rgb), .7);

  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
}

.btn-outline-warning{
  --bs-btn-color: var(--bs-warning);
  --bs-btn-border-color: rgba(var(--bs-warning-rgb), .7);

  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: rgba(var(--bs-warning-rgb), .7);
  --bs-btn-hover-border-color: rgba(var(--bs-warning-rgb), .7);

  --bs-btn-active-color:#fff;
  --bs-btn-active-bg: rgba(var(--bs-warning-rgb), .85);
  --bs-btn-active-border-color: rgba(var(--bs-warning-rgb), .85);

  --bs-btn-disabled-color: rgba(var(--bs-warning-rgb), .7);
  --bs-btn-disabled-border-color: rgba(var(--bs-warning-rgb), .7);

  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
}

/* ==================
   4) Warning alerts
   ================== */
.alert-warning{
  --bs-alert-color:#fff;
  --bs-alert-bg: rgba(var(--bs-warning-rgb), .7);
  --bs-alert-border-color: rgba(var(--bs-warning-rgb), .85);
}
.alert-warning .alert-link{ color:#fff; text-decoration: underline; }

/* ==================
   5) Table variants
   ================== */
.table-warning{
  --bs-table-color: #fff;
  --bs-table-bg: rgba(var(--bs-warning-rgb), .7);
  --bs-table-border-color: rgba(var(--bs-warning-rgb), .85);
  --bs-table-striped-bg: rgba(var(--bs-warning-rgb), .75);
  --bs-table-striped-color: #fff;
  --bs-table-hover-bg: rgba(var(--bs-warning-rgb), .8);
  --bs-table-hover-color: #fff;
}
/* Ensure text stays readable in cells even if the class is on the <tr> */
.table > :not(caption) > * > .table-warning { color: #fff; }

/* ============================
   6) List group item variants
   ============================ */
.list-group-item-warning{
  color: #fff;
  background-color: rgba(var(--bs-warning-rgb), .7);
  border-color: rgba(var(--bs-warning-rgb), .85);
}
.list-group-item-warning.list-group-item-action:hover,
.list-group-item-warning.list-group-item-action:focus{
  color: #fff;
  background-color: rgba(var(--bs-warning-rgb), .75);
  border-color: rgba(var(--bs-warning-rgb), .85);
}
.list-group-item-warning.active{
  color: #fff;
  background-color: rgba(var(--bs-warning-rgb), .9);
  border-color: rgba(var(--bs-warning-rgb), .9);
}

/* ================================
   7) Progress bars (warning @ 70%)
   ================================ */
.progress-bar.bg-warning{
  background-color: rgba(var(--bs-warning-rgb), .7) !important;
}

/* ========================================
   8) Pagination: active uses warning @ 70%
   ======================================== */
.pagination{
  --bs-pagination-active-color:#fff;
  --bs-pagination-active-bg: rgba(var(--bs-warning-rgb), .7);
  --bs-pagination-active-border-color: rgba(var(--bs-warning-rgb), .7);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-warning-rgb), .25);
}

/* =========================================
   9) Link warning: accessible contrast + UX
   ========================================= */
.link-warning{
  color: var(--bs-warning) !important; /* full strength for contrast */
}
.link-warning:hover,
.link-warning:focus{
  color: var(--bs-warning) !important;
  text-decoration: underline;
}
a.link-warning:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(var(--bs-warning-rgb), .25);
  border-radius: .25rem;
}

/* =====================================================
   10) Buttons: focus/active shadows + contrast tuning
   ===================================================== */

/* Solid warning: clearer focus ring and active feedback */
.btn-warning:focus,
.btn-warning:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(var(--bs-warning-rgb), .25);
}
.btn-warning:active,
.btn-warning.active,
.show > .btn-warning.dropdown-toggle{
  box-shadow: 0 0 0 .2rem rgba(var(--bs-warning-rgb), .2);
}

/* Outline warning: stronger base contrast on light bg,
   consistent focus ring, clearer disabled look */
.btn-outline-warning{
  /* Full-strength border & text for better contrast on light surfaces */
  --bs-btn-color: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: rgba(var(--bs-warning-rgb), .7);
  --bs-btn-hover-border-color: rgba(var(--bs-warning-rgb), .7);

  --bs-btn-active-color:#fff;
  --bs-btn-active-bg: rgba(var(--bs-warning-rgb), .85);
  --bs-btn-active-border-color: rgba(var(--bs-warning-rgb), .85);

  --bs-btn-disabled-color: rgba(var(--bs-warning-rgb), .55);
  --bs-btn-disabled-border-color: rgba(var(--bs-warning-rgb), .4);
}

.btn-outline-warning:focus,
.btn-outline-warning:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(var(--bs-warning-rgb), .25);
}
.btn-outline-warning:active,
.btn-outline-warning.active,
.show > .btn-outline-warning.dropdown-toggle{
  box-shadow: 0 0 0 .2rem rgba(var(--bs-warning-rgb), .2);
}

/* =====================================================
   11) Ensure ALL variant buttons use your palette
       (Bootstrap's CDN CSS sets button vars per-variant;
        we override them here using your root color vars)
   ===================================================== */

/* Helper macro comment:
   For each variant V in {primary, secondary, success, danger, info, light, dark}
   we set the corresponding .btn-V and .btn-outline-V variables to use
   var(--bs-V) and var(--bs-V-rgb) so they follow your palette.
*/

/* Primary */
.btn-primary{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), .85);
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), .85);

  --bs-btn-active-color:#fff;
  --bs-btn-active-bg: rgba(var(--bs-primary-rgb), .9);
  --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), .9);

  --bs-btn-disabled-color:#fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);

  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary{
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg: rgba(var(--bs-primary-rgb), .85);
  --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), .85);
  --bs-btn-disabled-color: rgba(var(--bs-primary-rgb), .55);
  --bs-btn-disabled-border-color: rgba(var(--bs-primary-rgb), .4);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* Secondary */
.btn-secondary{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);

  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: rgba(var(--bs-secondary-rgb), .85);
  --bs-btn-hover-border-color: rgba(var(--bs-secondary-rgb), .85);

  --bs-btn-active-color:#fff;
  --bs-btn-active-bg: rgba(var(--bs-secondary-rgb), .9);
  --bs-btn-active-border-color: rgba(var(--bs-secondary-rgb), .9);

  --bs-btn-disabled-color:#fff;
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);

  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}
.btn-outline-secondary{
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg: rgba(var(--bs-secondary-rgb), .85);
  --bs-btn-active-border-color: rgba(var(--bs-secondary-rgb), .85);
  --bs-btn-disabled-color: rgba(var(--bs-secondary-rgb), .55);
  --bs-btn-disabled-border-color: rgba(var(--bs-secondary-rgb), .4);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}

/* Success Orange */
.btn-success{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);

  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: rgba(var(--bs-success-rgb), .85);
  --bs-btn-hover-border-color: rgba(var(--bs-success-rgb), .85);

  --bs-btn-active-color:#fff;
  --bs-btn-active-bg: rgba(var(--bs-success-rgb), .9);
  --bs-btn-active-border-color: rgba(var(--bs-success-rgb), .9);

  --bs-btn-disabled-color:#fff;
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);

  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}
.btn-outline-success{
  --bs-btn-color: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg: rgba(var(--bs-success-rgb), .85);
  --bs-btn-active-border-color: rgba(var(--bs-success-rgb), .85);
  --bs-btn-disabled-color: rgba(var(--bs-success-rgb), .55);
  --bs-btn-disabled-border-color: rgba(var(--bs-success-rgb), .4);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}

/* Danger */
.btn-danger{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);

  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: rgba(var(--bs-danger-rgb), .85);
  --bs-btn-hover-border-color: rgba(var(--bs-danger-rgb), .85);

  --bs-btn-active-color:#fff;
  --bs-btn-active-bg: rgba(var(--bs-danger-rgb), .9);
  --bs-btn-active-border-color: rgba(var(--bs-danger-rgb), .9);

  --bs-btn-disabled-color:#fff;
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);

  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}
.btn-outline-danger{
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg: rgba(var(--bs-danger-rgb), .85);
  --bs-btn-active-border-color: rgba(var(--bs-danger-rgb), .85);
  --bs-btn-disabled-color: rgba(var(--bs-danger-rgb), .55);
  --bs-btn-disabled-border-color: rgba(var(--bs-danger-rgb), .4);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}

/* Info */
.btn-info{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);

  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: rgba(var(--bs-info-rgb), .85);
  --bs-btn-hover-border-color: rgba(var(--bs-info-rgb), .85);

  --bs-btn-active-color:#fff;
  --bs-btn-active-bg: rgba(var(--bs-info-rgb), .9);
  --bs-btn-active-border-color: rgba(var(--bs-info-rgb), .9);

  --bs-btn-disabled-color:#fff;
  --bs-btn-disabled-bg: var(--bs-info);
  --bs-btn-disabled-border-color: var(--bs-info);

  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
}
.btn-outline-info{
  --bs-btn-color: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: var(--bs-info);
  --bs-btn-hover-border-color: var(--bs-info);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg: rgba(var(--bs-info-rgb), .85);
  --bs-btn-active-border-color: rgba(var(--bs-info-rgb), .85);
  --bs-btn-disabled-color: rgba(var(--bs-info-rgb), .55);
  --bs-btn-disabled-border-color: rgba(var(--bs-info-rgb), .4);
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
}

/* Dark */
.btn-dark{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--bs-dark);
  --bs-btn-border-color: var(--bs-dark);

  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: rgba(var(--bs-dark-rgb), .85);
  --bs-btn-hover-border-color: rgba(var(--bs-dark-rgb), .85);

  --bs-btn-active-color:#fff;
  --bs-btn-active-bg: rgba(var(--bs-dark-rgb), .9);
  --bs-btn-active-border-color: rgba(var(--bs-dark-rgb), .9);

  --bs-btn-disabled-color:#fff;
  --bs-btn-disabled-bg: var(--bs-dark);
  --bs-btn-disabled-border-color: var(--bs-dark);

  --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
}
.btn-outline-dark{
  --bs-btn-color: var(--bs-dark);
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: var(--bs-dark);
  --bs-btn-hover-border-color: var(--bs-dark);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg: rgba(var(--bs-dark-rgb), .85);
  --bs-btn-active-border-color: rgba(var(--bs-dark-rgb), .85);
  --bs-btn-disabled-color: rgba(var(--bs-dark-rgb), .55);
  --bs-btn-disabled-border-color: rgba(var(--bs-dark-rgb), .4);
  --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
}

/* Light */
.btn-light{
  --bs-btn-color: var(--bs-dark);
  --bs-btn-bg: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);

  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: rgba(var(--bs-light-rgb), .9);
  --bs-btn-hover-border-color: rgba(var(--bs-light-rgb), .9);

  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-bg: rgba(var(--bs-light-rgb), .95);
  --bs-btn-active-border-color: rgba(var(--bs-light-rgb), .95);

  --bs-btn-disabled-color: var(--bs-dark);
  --bs-btn-disabled-bg: var(--bs-light);
  --bs-btn-disabled-border-color: var(--bs-light);

  --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
}
.btn-outline-light{
  --bs-btn-color: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: var(--bs-light);
  --bs-btn-hover-border-color: var(--bs-light);
  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-bg: rgba(var(--bs-light-rgb), .95);
  --bs-btn-active-border-color: rgba(var(--bs-light-rgb), .95);
  --bs-btn-disabled-color: rgba(var(--bs-light-rgb), .7);
  --bs-btn-disabled-border-color: rgba(var(--bs-light-rgb), .55);
  --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
}

/* ==================================
   12) Badge text contrast for 'info'
   ================================== */
/* Applies to both <span class="badge text-bg-info"> and <span class="badge bg-info"> */
.text-bg-info,
.badge.bg-info{
  color:#fff !important;
}


/* ==================================
   13) Override baked in alert color
   ================================== */
/* Alert variants have their own baked in colors so changing the root palette won't affect alert alert-info by default */

.alert-info{
  --bs-alert-color:#fff;
  --bs-alert-bg: var(--bs-info);
  --bs-alert-border-color: rgb(var(--bs-info-rgb), .85);
}

.alert-info .alert-link{
  color: #fff;
  text-decoration: underline;
}