body { background: #f8f9fa; }
.kpi .card-body { padding: 1rem 1.25rem; }
.table input.form-control-sm { padding: .25rem .4rem; font-size: .8rem; }
.table-bordered th, .table-bordered td { vertical-align: middle; }
.navbar-text .badge { font-weight: 500; text-transform: uppercase; font-size: .65rem; }

/* ---- UI component library (ui_helper) ------------------------------------ */
.ui-stat .stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.ui-empty-icon { font-size: 2.25rem; line-height: 1; margin-bottom: .5rem; }
.ui-empty { color: #6c757d; }

/* keyboard users can scroll a wide table; show the focus ring on the region */
.ui-table-scroll:focus-visible { outline: 3px solid #0d6efd55; outline-offset: 2px; border-radius: .25rem; }

/* honour reduced-motion for the shimmer */
.ui-skeleton { display: block; }
.ui-skeleton-line {
  display: block; height: .8rem; margin: .5rem 0; border-radius: .3rem;
  background: linear-gradient(90deg, #e9ecef 25%, #f4f6f8 37%, #e9ecef 63%);
  background-size: 400% 100%; animation: ui-shimmer 1.3s ease-in-out infinite;
}
@keyframes ui-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ui-skeleton-line { animation: none; } }

/* consistent visible focus for interactive controls */
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
.nav-link:focus-visible { outline: 3px solid #0d6efd55; outline-offset: 2px; }

/* ---- password-policy checklist (pw-validate.js) ---- */
.pw-rules { line-height: 1.5; }
.pw-rule .pw-mark { display: inline-block; width: 1.1em; font-weight: 700; }
.pw-rule.text-success .pw-mark { color: #198754; }

/* ============================================================
   Modern auth screens (login / forgot / OTP) — sunrise split layout
   ============================================================ */
.sp-auth { min-height: 100vh; min-height: 100dvh; }
.sp-split { display: flex; min-height: 100vh; min-height: 100dvh; }
.sp-brand {
  flex: 1 1 46%; position: relative; overflow: hidden; color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 3.5rem;
  background: linear-gradient(160deg, #16244d 0%, #1e2f5f 55%, #24397a 100%);
}
/* soft cool highlight (top-left) */
.sp-brand::before {
  content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%;
  right: -160px; bottom: -200px;
  background: radial-gradient(circle at center, rgba(120,150,220,.22), rgba(120,150,220,.06) 45%, transparent 70%);
}
/* faint diagonal rays + soft glow */
.sp-brand::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.10), transparent 26%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 2px, transparent 2px 28px);
}
.sp-brand-inner { position: relative; z-index: 1; max-width: 430px; }
.sp-logo {
  display: block; width: -moz-fit-content; width: fit-content;
  margin: 0 auto 1.8rem;                       /* centered logo */
  border-radius: 14px; padding: 12px 18px;
  background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.22);
}
.sp-brand-inner { text-align: center; }        /* centre brand content under the logo */
.sp-brand ul { display: inline-block; text-align: left; }
.sp-logo img { display: block; height: 46px; width: auto; }
.sp-brand h1 { font-weight: 800; font-size: 2.5rem; letter-spacing: -.02em; margin: 0 0 .5rem; }
.sp-brand .sp-tag { font-size: 1.08rem; opacity: .92; margin: 0; }
.sp-brand ul { list-style: none; padding: 0; margin: 2.2rem 0 0; }
.sp-brand li { display: flex; align-items: center; gap: .65rem; margin: .7rem 0; opacity: .92; }
.sp-brand li::before {
  content: "✓"; flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: .8rem;
}
.sp-panel {
  flex: 1 1 54%; display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 1.25rem; background: #f6f7fb;
}
.sp-card { width: 100%; max-width: 400px; }
.sp-card .sp-head { font-weight: 700; letter-spacing: -.01em; }
.sp-card .form-control { padding-top: 1.1rem; }
.sp-card .form-floating > label { color: #6b7280; }
.sp-btn-sunrise {
  border: 0; color: #fff; font-weight: 600; padding: .72rem; border-radius: .6rem;
  background: linear-gradient(135deg, #24397a 0%, #16244d 100%);   /* matches the left panel navy */
  transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
  box-shadow: 0 6px 18px rgba(22,36,77,.32);
}
.sp-btn-sunrise:hover { filter: brightness(1.15); color: #fff; box-shadow: 0 8px 22px rgba(22,36,77,.42); }
.sp-btn-sunrise:active { transform: translateY(1px); }
.sp-btn-sunrise:focus { outline: 0; box-shadow: 0 0 0 .25rem rgba(36,57,122,.45); }
.sp-link { color: #24397a; text-decoration: none; font-weight: 500; }
.sp-link:hover { text-decoration: underline; color: #16244d; }
.sp-otp-input { letter-spacing: .6rem; font-size: 1.5rem; text-align: center; font-weight: 700; }
@media (max-width: 860px) {
  .sp-split { flex-direction: column; }
  /* slim brand header so the form is front-and-centre on phones */
  .sp-brand { flex: none; min-height: auto; padding: 1.75rem 1.5rem; }
  .sp-brand::before { width: 260px; height: 260px; right: -90px; bottom: -110px; }
  .sp-brand ul { display: none; }
  .sp-brand h1 { font-size: 1.55rem; margin-bottom: .25rem; }
  .sp-brand .sp-tag { font-size: .95rem; }
  .sp-logo { margin-bottom: 1rem; padding: 10px 14px; }
  .sp-logo img { height: 38px; }
  .sp-panel { flex: 1 1 auto; padding: 2rem 1.15rem; }
}

/* bootstrap-select: make the toggle look like a normal Bootstrap form control
   instead of a bordered button. */
.bootstrap-select > .dropdown-toggle.form-control {
  text-align: left;
  background-color: #fff;
  color: #212529;
  font-weight: 400;
  display: flex;
  align-items: center;
}
.bootstrap-select > .dropdown-toggle.form-control .filter-option { text-align: left; }
.bootstrap-select > .dropdown-toggle.form-control:focus,
.bootstrap-select > .dropdown-toggle.form-control.focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
  outline: 0;
}
.bootstrap-select > .dropdown-toggle.form-control:hover { background-color: #fff; }
/* single caret: keep bootstrap-select's own (.bs-caret) and drop the duplicate
   Bootstrap 5 ".dropdown-toggle::after" triangle + any native form-select SVG
   caret copied onto the wrapper. (Scoped so navbar dropdown carets stay.) */
.bootstrap-select > .dropdown-toggle::after { display: none !important; }
.bootstrap-select.form-select,
.bootstrap-select > .dropdown-toggle.form-select { background-image: none !important; }
/* the outer .bootstrap-select div inherits the field's form-control/form-select
   box (border/padding/height), producing a "box inside a box" around the actual
   field. Strip it so ONLY the inner select field shows. */
.bootstrap-select.form-control,
.bootstrap-select.form-select {
  padding: 0 !important;
  border: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* dropdown menu polish */
.bootstrap-select .dropdown-menu { border-color: #ced4da; }
.bootstrap-select .dropdown-menu li a.selected,
.bootstrap-select .dropdown-menu li a:active { background-color: #0d6efd; color: #fff; }

/* ============================================================
   Modern dashboard cards (scoped to .sp-dash)
   ============================================================ */
.sp-dash .card {
  border: 0; border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(16,36,77,.05), 0 6px 18px rgba(16,36,77,.06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.sp-dash .card:hover { box-shadow: 0 12px 30px rgba(16,36,77,.13); transform: translateY(-2px); }
.sp-dash .card-header {
  background: transparent; border-bottom: 1px solid #eef1f6;
  color: #16244d; font-weight: 600; padding: .9rem 1.15rem;
}
.sp-dash .card-body { padding: 1.1rem 1.25rem; }
/* KPI stat tiles: navy accent bar + bigger number */
.sp-dash .ui-stat { position: relative; overflow: hidden; }
.sp-dash .ui-stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(#24397a, #16244d);
}
.sp-dash .ui-stat .card-body { padding-left: 1.5rem; }
.sp-dash .ui-stat .stat-value { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.sp-dash .ui-stat .small.text-muted { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; font-weight: 600; padding-right: 2.4rem; }
/* category icon badge (top-right) */
.sp-dash .ui-stat-ic {
  position: absolute; top: .85rem; right: .85rem;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.05rem;
  background: rgba(36,57,122,.10); color: #24397a;
}
/* tab bar polish */
.sp-dash .nav-tabs { border-bottom: 2px solid #eef1f6; }
.sp-dash .nav-tabs .nav-link { border: 0; color: #6b7280; font-weight: 600; padding: .6rem 1rem; }
.sp-dash .nav-tabs .nav-link:hover { color: #16244d; }
.sp-dash .nav-tabs .nav-link.active {
  color: #16244d; background: transparent; border-bottom: 3px solid #24397a; margin-bottom: -2px;
}