/**
 * WBN design tokens + a small shared component library.
 *
 * The app's colors were previously hardcoded as literal hex values in
 * dozens of places (~45 occurrences per major view), redefined slightly
 * differently in almost every file. This is the single source of truth —
 * loaded once from the layout, everything else should reference these
 * variables (or the Bootstrap classes they retheme) instead of hex
 * literals.
 *
 * Overriding Bootstrap 5.3's own root custom properties (--bs-primary,
 * --bs-success, ...) is deliberate: Bootstrap derives every subtle/
 * emphasis/border variant, every .btn-*, .badge.bg-*, .text-*, .border-*
 * class from these at runtime, so the whole app re-themes for free
 * without touching each component's markup.
 *
 * Loaded after AdminLTE's own compiled CSS (see layouts/app.blade.php's
 * @push('css')), so everything below wins the cascade over the stock
 * AdminLTE 4 look — this file is the "premium WBN skin" layer on top.
 */

:root {
  /* Brand palette (Tanzanian-flag-inspired blue/green/yellow, formerly
     retyped as #005eb8 / #0b7a31 / #fcd116 / #111111 in ~20 different
     files with drifting exact values). */
  --wbn-blue: #176cbb;
  --wbn-blue-dark: #0d3156;
  --wbn-blue-light: #eaf3fb;
  --wbn-green: #128454;
  --wbn-green-dark: #0b6241;
  --wbn-yellow: #f6c952;
  --wbn-yellow-dark: #9d741b;
  --wbn-black: #10243a;
  --wbn-red: #dc2626;

  /* Neutrals */
  --wbn-ink: #142b42;
  --wbn-muted: #697b8d;
  --wbn-muted-soft: #98a2b3;
  --wbn-border: #dfe7ef;
  --wbn-border-soft: #edf2f6;
  --wbn-surface: #ffffff;
  --wbn-surface-soft: #f8fafc;
  --wbn-bg: #f4f7fb;

  /* Scale */
  --wbn-radius-sm: 8px;
  --wbn-radius: 12px;
  --wbn-radius-lg: 18px;
  --wbn-radius-xl: 24px;
  --wbn-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* A softer, more layered shadow scale — two shadows stacked (a tight
     "contact" shadow + a broad "ambient" one) reads as more premium than
     one flat blur, at the same visual weight. */
  --wbn-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --wbn-shadow: 0 2px 4px rgba(16, 24, 40, 0.04), 0 12px 28px rgba(16, 24, 40, 0.08);
  --wbn-shadow-hover: 0 4px 8px rgba(16, 24, 40, 0.05), 0 20px 40px rgba(16, 24, 40, 0.14);
  --wbn-shadow-lg: 0 8px 16px rgba(16, 24, 40, 0.06), 0 28px 56px rgba(16, 24, 40, 0.16);

  /* Retheme Bootstrap 5.3 itself so .btn-primary, .badge.bg-success,
     .text-warning, .bg-primary-subtle, nav-pills, form focus rings, etc.
     all pick up the brand palette automatically. */
  --bs-primary: var(--wbn-blue);
  --bs-primary-rgb: 23, 108, 187;
  --bs-success: var(--wbn-green);
  --bs-success-rgb: 18, 132, 84;
  --bs-warning: var(--wbn-yellow);
  --bs-warning-rgb: 246, 201, 82;
  --bs-danger: var(--wbn-red);
  --bs-danger-rgb: 220, 38, 38;
  --bs-dark: var(--wbn-black);
  --bs-dark-rgb: 16, 36, 58;
  --bs-link-color: var(--wbn-blue);
  --bs-link-color-rgb: 23, 108, 187;
  --bs-link-hover-color: var(--wbn-blue-dark);
  --bs-link-hover-color-rgb: 13, 49, 86;
  --bs-body-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-body-color: var(--wbn-ink);
  --bs-border-radius: var(--wbn-radius-sm);
  --bs-border-radius-lg: var(--wbn-radius);
  --bs-border-radius-sm: 6px;
}

body {
  background: var(--wbn-bg);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--wbn-blue);
  color: #fff;
}

/* A visible, on-brand focus ring for keyboard users — accessible *and*
   reads as more deliberate/finished than the browser default. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--wbn-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Slim, unobtrusive scrollbar (webkit) — small detail, reads as polish. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(17, 17, 17, 0.15);
  border-radius: 999px;
  border: 2px solid var(--wbn-bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(17, 17, 17, 0.28); }

/* ---------- Buttons ---------- */
/* AdminLTE/Bootstrap bake .btn-primary's literal colours in compiled CSS
   (see config/adminlte.php's primary_color for the officially-supported
   fix to that); what's left to do here is the *feel* — weight, motion,
   depth — the same across every variant. */
.btn {
  font-weight: 600;
  border-radius: var(--wbn-radius-sm);
  padding: 0.55rem 1.1rem;
  transition: transform 0.15s var(--wbn-ease), box-shadow 0.15s var(--wbn-ease), filter 0.15s var(--wbn-ease);
}

.btn-sm { border-radius: 7px; }

.btn-primary,
.btn-success,
.btn-danger {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 6px 14px rgba(16, 24, 40, 0.14);
}

.btn-primary:active,
.btn-success:active,
.btn-danger:active {
  transform: translateY(0);
}

.btn-outline-primary,
.btn-outline-secondary {
  border-width: 1.5px;
}

.btn-lg { border-radius: var(--wbn-radius-sm); }

/* ---------- Shared component classes ---------- */

/* Elevated card — the "gradient hero card" / "metric card" idea every
   page (dashboard, member/show, malipo, ripoti) previously hand-rolled
   its own slightly different version of. */
.wbn-card {
  background: var(--wbn-surface);
  border: 1px solid var(--wbn-border);
  border-radius: var(--wbn-radius-lg);
  box-shadow: var(--wbn-shadow-sm);
  transition: box-shadow 0.2s var(--wbn-ease);
}

.wbn-card-hero {
  background: linear-gradient(135deg, var(--wbn-blue) 0%, var(--wbn-blue-dark) 55%, var(--wbn-green-dark) 100%);
  color: #fff;
  border-radius: var(--wbn-radius-lg);
  box-shadow: var(--wbn-shadow);
  position: relative;
  overflow: hidden;
}

/* Soft radial highlight in the corner — the one flourish that separates a
   flat gradient from a "designed" one, without needing an image asset. */
.wbn-card-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.16), transparent 55%);
  pointer-events: none;
}

/* Stat / metric card, used across dashboard, malipo and ripoti */
.wbn-stat-card {
  background: var(--wbn-surface);
  border: 1px solid var(--wbn-border);
  border-radius: var(--wbn-radius-lg);
  box-shadow: var(--wbn-shadow-sm);
  padding: 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform 0.25s var(--wbn-ease), box-shadow 0.25s var(--wbn-ease), border-color 0.25s var(--wbn-ease);
}

.wbn-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--wbn-shadow-hover);
  border-color: transparent;
}

/* Solid gradient "action card" — same look as member/index.blade.php's
   .action-card/.card-blue/.card-green/... (Wanachama page), promoted here
   so other pages (Ripoti hub) can reuse the identical style instead of
   re-hardcoding the same gradient hex pairs again (see this file's own
   docblock on that exact anti-pattern). Icon + white text on a solid
   gradient, animated entrance + hover lift. */
.wbn-gradient-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 22px;
  color: #fff;
  min-height: 150px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s var(--wbn-ease), box-shadow 0.25s var(--wbn-ease);
  animation: wbn-card-in 0.4s var(--wbn-ease) both;
  animation-delay: var(--card-delay, 0s);
}

.wbn-gradient-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

.wbn-gradient-card i {
  font-size: 32px;
  margin-bottom: 15px;
  display: block;
  transition: transform 0.3s var(--wbn-ease);
}

.wbn-gradient-card:hover i {
  transform: scale(1.12) rotate(-4deg);
}

.wbn-gradient-card h6 {
  font-weight: 800;
  margin-bottom: 5px;
}

.wbn-gradient-card small {
  opacity: 0.9;
}

.wbn-gradient-blue   { background: linear-gradient(135deg, #005eb8, #003f7d); }
.wbn-gradient-green  { background: linear-gradient(135deg, #0b7a31, #07551f); }
.wbn-gradient-yellow { background: linear-gradient(135deg, #fcd116, #d6a900); color: #111; }
.wbn-gradient-dark   { background: linear-gradient(135deg, #111111, #333333); }
.wbn-gradient-purple { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.wbn-gradient-teal   { background: linear-gradient(135deg, #0891b2, #0e7490); }

@keyframes wbn-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .wbn-gradient-card {
    animation: none;
  }
  .wbn-gradient-card:hover,
  .wbn-gradient-card:hover i {
    transform: none;
  }
}

@media (max-width: 576px) {
  .wbn-gradient-card {
    min-height: auto;
  }
}

.wbn-stat-icon {
  width: 55px;
  height: 55px;
  min-width: 55px;
  border-radius: var(--wbn-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.wbn-stat-label {
  color: var(--wbn-muted);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 3px;
}

.wbn-stat-value {
  color: var(--wbn-ink);
  font-size: 27px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.wbn-stat-value.wbn-amount {
  font-size: 21px;
}

.wbn-stat-description {
  color: var(--wbn-muted-soft);
  font-size: 12px;
  margin-top: 6px;
}

@media (max-width: 576px) {
  .wbn-stat-value { font-size: 23px; }
  .wbn-stat-value.wbn-amount { font-size: 18px; }
}

/* Status badges — every page previously redefined "badge-status",
   ".status-badge", ".member-badge" separately. */
.wbn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.wbn-badge-success { background: rgba(11, 122, 49, 0.12); color: var(--wbn-green-dark); }
.wbn-badge-warning { background: rgba(252, 209, 22, 0.2); color: #8a6d00; }
.wbn-badge-danger  { background: rgba(220, 38, 38, 0.12); color: var(--wbn-red); }
.wbn-badge-info    { background: rgba(0, 94, 184, 0.1); color: var(--wbn-blue-dark); }
.wbn-badge-neutral { background: #eef0f3; color: var(--wbn-muted); }

/* Small solid dot, paired inside .wbn-badge for a "live status" feel
   (e.g. <span class="wbn-badge wbn-badge-success"><i class="wbn-dot"></i>Hai</span>). */
.wbn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* Empty state — the "Hakuna..." pattern reimplemented per-page */
.wbn-empty-state {
  text-align: center;
  padding: 56px 24px;
  color: var(--wbn-muted);
}

.wbn-empty-state .bi {
  font-size: 2.75rem;
  opacity: 0.28;
  margin-bottom: 14px;
  display: block;
}

.wbn-empty-state strong {
  display: block;
  color: var(--wbn-ink);
  font-size: 15px;
  margin-bottom: 4px;
}

/* Read-only label/value box (x-wbn-info-box), used throughout the member
   profile/edit pages — previously redefined locally in each view. */
.info-box {
  background: var(--wbn-surface-soft);
  border: 1px solid var(--wbn-border);
  border-radius: var(--wbn-radius);
  padding: 14px;
  height: 100%;
  transition: border-color 0.2s var(--wbn-ease), background 0.2s var(--wbn-ease);
}

.info-box:hover {
  border-color: #d8dee8;
  background: #f5f8fc;
}

.info-box label {
  display: block;
  font-size: 11.5px;
  color: var(--wbn-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.info-box div {
  font-weight: 700;
  color: var(--wbn-ink);
  word-break: break-word;
}

/* Page-header card ("topbar") used standalone by member/index and
   member/show — everywhere else that needs this now uses .wbn-card /
   .wbn-section-title instead, but these two still expect it bare. */
.topbar {
  background: var(--wbn-surface);
  border-radius: var(--wbn-radius-lg);
  padding: 20px 24px;
  box-shadow: var(--wbn-shadow-sm);
  margin-bottom: 25px;
  border: 1px solid var(--wbn-border);
}

.welcome h5 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--wbn-ink);
}

.welcome small {
  color: var(--wbn-muted);
}

/* Section heading with icon chip, used across dashboard/malipo/ripoti */
.wbn-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wbn-section-title h3,
.wbn-section-title h4,
.wbn-section-title h5 {
  letter-spacing: -0.01em;
  font-weight: 800;
}

.wbn-section-icon {
  width: 45px;
  height: 45px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
  border-color: var(--wbn-border);
  border-radius: var(--wbn-radius-sm);
  padding: 0.55rem 0.85rem;
  transition: border-color 0.15s var(--wbn-ease), box-shadow 0.15s var(--wbn-ease);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--wbn-blue);
  box-shadow: 0 0 0 3.5px rgba(0, 94, 184, 0.12);
}

.form-label {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--wbn-ink);
  margin-bottom: 0.4rem;
}

.form-check-input:checked {
  background-color: var(--wbn-blue);
  border-color: var(--wbn-blue);
}

.input-group-text {
  background: var(--wbn-surface-soft);
  border-color: var(--wbn-border);
  color: var(--wbn-muted);
}

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: transparent;
}

.table thead th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--wbn-muted);
  background: var(--wbn-surface-soft);
  border-bottom: 1px solid var(--wbn-border);
  padding: 12px 14px;
}

.table tbody td {
  padding: 12px 14px;
  vertical-align: middle;
  border-color: var(--wbn-border-soft);
}

.table tbody tr {
  transition: background 0.15s var(--wbn-ease);
}

.table-hover tbody tr:hover {
  background: var(--wbn-surface-soft);
}

/* ---------- Tabs / pills (member/show's "custom-tabs" and friends) ---------- */
.nav-pills .nav-link,
.custom-tabs .nav-link {
  border-radius: 999px;
  font-weight: 600;
  color: var(--wbn-muted);
  padding: 0.5rem 1.1rem;
  transition: all 0.2s var(--wbn-ease);
}

.nav-pills .nav-link.active,
.custom-tabs .nav-link.active {
  background: var(--wbn-blue);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 94, 184, 0.25);
}

/* ---------- Alerts (floating, animated toasts) ---------- */
/* Used by layouts/alert.blade.php (session-flashed success/error/info,
   server-rendered) and public/js/wizard-ajax.js's showAlert() (client-
   rendered, for the registration wizard's AJAX responses) — both emit this
   same markup so a flashed alert and a JS-injected one are indistinguishable.
   Deliberately NOT a modal: a blocking dialog would mean clicking it away
   after every single step of the AJAX wizard, trading a page-reload
   interruption for a click-to-dismiss one — a toast pops in with the same
   "modern, animated" feel but never blocks the page underneath it. */
.wbn-toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  width: 100%;
  max-width: 440px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none; /* clicks pass through the gaps around a toast */
}

.wbn-alert {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--wbn-radius);
  border: 1px solid transparent;
  box-shadow: var(--wbn-shadow-lg);
  pointer-events: auto;
  animation: wbn-toast-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.wbn-alert.wbn-alert-leaving {
  animation: wbn-toast-out 0.22s ease forwards;
}

@keyframes wbn-toast-in {
  0%   { opacity: 0; transform: translateY(-22px) scale(0.94); }
  60%  { opacity: 1; transform: translateY(3px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes wbn-toast-out {
  to { opacity: 0; transform: translateY(-14px) scale(0.96); }
}

/* Shrinking auto-dismiss timer bar along the bottom edge — layouts/alert.blade.php
   and wizard-ajax.js both start a matching JS timer, so a toast disappears
   right as this empties out. */
.wbn-alert-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: currentColor;
  opacity: 0.3;
  transform-origin: left;
  animation: wbn-toast-shrink 5s linear forwards;
}

@keyframes wbn-toast-shrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.wbn-alert-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.wbn-alert-message {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
}

.wbn-alert-close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  opacity: 0.45;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  color: inherit;
  transition: opacity 0.15s var(--wbn-ease);
}

.wbn-alert-close:hover { opacity: 0.85; }

.wbn-alert-success { background: #f0fdf4; border-color: #bbf7d0; color: var(--wbn-green-dark); }
.wbn-alert-success .wbn-alert-icon { color: var(--wbn-green); }

.wbn-alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.wbn-alert-danger .wbn-alert-icon { color: var(--wbn-red); }

.wbn-alert-info { background: var(--wbn-blue-light); border-color: #bfdbfe; color: var(--wbn-blue-dark); }
.wbn-alert-info .wbn-alert-icon { color: var(--wbn-blue); }

.wbn-alert-warning { background: #fffbeb; border-color: #fde68a; color: #854d0e; }
.wbn-alert-warning .wbn-alert-icon { color: var(--wbn-yellow-dark); }

@media (max-width: 576px) {
  .wbn-toast-container { top: 12px; max-width: none; }
}

/* ---------- Pagination ---------- */
/* Bootstrap 5's stock .pagination/.page-link, just softened to match the
   rest of the app (rounded pills, no touching borders, subtle lift on
   hover) — see AppServiceProvider::boot()'s Paginator::useBootstrapFive()
   for why every ->links() call renders these classes at all now. */
.pagination {
  gap: 6px;
}

.page-link {
  border: none;
  border-radius: var(--wbn-radius-sm) !important;
  color: var(--wbn-ink);
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  background: var(--wbn-surface);
  box-shadow: var(--wbn-shadow-sm);
  transition: background 0.15s var(--wbn-ease), color 0.15s var(--wbn-ease), transform 0.15s var(--wbn-ease);
}

.page-link:hover {
  background: var(--wbn-blue-light);
  color: var(--wbn-blue-dark);
  transform: translateY(-1px);
}

.page-item.active .page-link {
  background: var(--wbn-blue);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 94, 184, 0.25);
}

.page-item.disabled .page-link {
  background: var(--wbn-surface-soft);
  color: var(--wbn-muted-soft);
  box-shadow: none;
}

/* ---------- DataTables ---------- */
/* jQuery DataTables + Buttons (member/index.blade.php's #membersTable and
   malipo/bills.blade.php's #billsTable both load these from the DataTables
   CDN directly, not through a bundler) — previously restyled locally,
   identically, in member/index.blade.php alone; centralized here so a
   second table doesn't have to duplicate it and the two can't drift apart. */
.dt-buttons .btn {
  border-radius: var(--wbn-radius-sm);
  margin-right: 6px;
  font-weight: 600;
}

table.dataTable thead th {
  background: var(--wbn-blue) !important;
  color: #fff !important;
  font-size: 13px;
  vertical-align: middle;
}

table.dataTable tbody td {
  font-size: 13px;
  vertical-align: middle;
}

.dt-search input {
  border-radius: var(--wbn-radius-sm) !important;
  border: 1px solid var(--wbn-border) !important;
  padding: 6px 12px !important;
  margin-left: 8px;
}

.dt-length select {
  border-radius: var(--wbn-radius-sm) !important;
  padding: 6px 30px 6px 10px !important;
}

/* ---------- Misc utilities ---------- */
.wbn-divider {
  border: none;
  border-top: 1px solid var(--wbn-border);
  margin: 1.5rem 0;
}

.wbn-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 3px 10px;
  min-width: 2em; /* a full-radius pill with near-empty content (e.g. a
                      blank lookup value with no ?? '—' fallback — see
                      malipo/bills.blade.php's fee_type_name) collapses
                      into a near-circular blob otherwise, since a 999px
                      radius rounds however-small the box happens to be */
  border-radius: 999px;
  background: var(--wbn-surface-soft);
  border: 1px solid var(--wbn-border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wbn-muted);
  white-space: nowrap;
}

.wbn-avatar {
  border-radius: 50%;
  object-fit: cover;
  background: var(--wbn-surface-soft);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--wbn-border);
}

.wbn-fade-in {
  animation: wbn-fade-in 0.35s var(--wbn-ease) both;
}

/* opacity only — no transform. animation-fill-mode: both keeps this
   animation "in effect" on the element forever (that's the whole point:
   the page shouldn't flash unstyled before it runs once on load), and for
   as long as an animation targets `transform` at all, Chromium keeps
   reporting/treating the element as transformed even once it settles on
   an identity matrix — which makes it the containing block + a new
   stacking context for position:fixed descendants. Every page wrapped in
   .wbn-fade-in (settings, ripoti, malipo, profile, member pages, ...)
   nests its Bootstrap modals inside this element, while Bootstrap always
   appends .modal-backdrop straight to <body>, outside it — so the modal's
   z-index:1055 only wins locally inside this wrapper's stacking context,
   and the backdrop (z-index:1050, but in the root context) painted on top
   of the whole page, silently swallowing every click meant for the modal
   (and everything else). Dropping the translateY slide loses a 6px
   flourish; keeping it broke every modal on every page using this class. */
@keyframes wbn-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- AdminLTE chrome — brand the sidebar/topbar/footer beyond flat
   colour swaps (config/adminlte.php's *_color keys handle the base tones;
   this is the finish work on top). ---------- */
.app-sidebar {
  background: linear-gradient(195deg, var(--wbn-blue) 0%, var(--wbn-blue-dark) 45%, var(--wbn-black) 130%) !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
}

.app-sidebar .brand-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.app-sidebar .brand-image {
  background: #fff;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.app-sidebar .nav-sidebar > .nav-item > .nav-link {
  border-radius: var(--wbn-radius-sm);
  margin: 2px 8px;
  width: auto;
  transition: background 0.15s var(--wbn-ease), transform 0.15s var(--wbn-ease);
}

.app-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
}

.app-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  background: var(--wbn-yellow);
  color: var(--wbn-black) !important;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.app-sidebar .nav-sidebar > .nav-item > .nav-link.active .nav-icon {
  color: var(--wbn-black) !important;
}

.app-sidebar .nav-header {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.app-header {
  box-shadow: var(--wbn-shadow-sm);
  border-bottom: none !important;
}

.app-header .nav-link {
  border-radius: var(--wbn-radius-sm);
}

.dropdown-menu {
  border: 1px solid var(--wbn-border);
  border-radius: var(--wbn-radius);
  box-shadow: var(--wbn-shadow-lg);
  padding: 8px;
}

.dropdown-item {
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
}

.dropdown-item:active,
.dropdown-item.active {
  background: var(--wbn-blue-light);
  color: var(--wbn-blue-dark);
}

.app-footer {
  border-top: 1px solid var(--wbn-border) !important;
  color: var(--wbn-muted);
  font-size: 13px;
}

.card {
  border-radius: var(--wbn-radius-lg);
  border-color: var(--wbn-border);
}

.modal-content {
  border-radius: var(--wbn-radius-lg);
  border: none;
  box-shadow: var(--wbn-shadow-lg);
}

.modal-header {
  border-bottom: 1px solid var(--wbn-border-soft);
}

.modal-footer {
  border-top: 1px solid var(--wbn-border-soft);
}

/* Portal finish: carry the login page's navy, green and gold into every
   authenticated screen through the shared AdminLTE shell. */
.app-sidebar {
  background: radial-gradient(circle at 100% 12%, rgba(24, 122, 139, 0.23), transparent 38%),
    linear-gradient(165deg, #0d3156 0%, #091d36 55%, #071827 100%) !important;
  box-shadow: 8px 0 30px rgba(9, 29, 54, 0.13);
}

.app-sidebar .brand-link {
  min-height: 74px;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.app-sidebar .brand-text,
.app-sidebar .brand-link {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.app-sidebar .brand-image {
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}

.app-sidebar .nav-sidebar > .nav-item > .nav-link {
  border-radius: 11px;
  margin: 3px 9px;
  padding: 0.68rem 0.85rem;
  color: #c8d8e8;
}

.app-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.app-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  color: #fff !important;
  background: linear-gradient(110deg, #176cbb, #128454);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.19);
}

.app-sidebar .nav-sidebar > .nav-item > .nav-link.active .nav-icon {
  color: #f6c952 !important;
}

.app-sidebar .nav-header {
  color: #a9c5d5;
  font-size: 10px;
  letter-spacing: 0.16em;
  margin-top: 12px;
}

.app-header {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid #e5edf3 !important;
  box-shadow: 0 3px 18px rgba(16, 43, 66, 0.05);
}

.app-header .nav-link:hover {
  background: #eaf3fb;
  color: var(--wbn-blue-dark);
}

.app-header .user-menu .nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}

.app-header .user-menu .wbn-user-logo {
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 2px;
  object-fit: cover;
  background: #fff;
  border: 1px solid #dce8ef;
}

.app-main {
  background: radial-gradient(circle at 100% 0%, rgba(18, 132, 84, 0.055), transparent 35%),
    radial-gradient(circle at 0% 0%, rgba(23, 108, 187, 0.06), transparent 35%),
    var(--wbn-bg);
}

.app-content-header h1,
.app-content-header h2,
.content-header h1,
.content-header h2,
.wbn-section-title h3,
.wbn-section-title h4,
.wbn-section-title h5 {
  font-family: 'Manrope', sans-serif;
  letter-spacing: -0.035em;
}

.card,
.wbn-card,
.wbn-stat-card,
.topbar {
  border-color: var(--wbn-border);
  box-shadow: 0 3px 8px rgba(16, 43, 66, 0.035), 0 14px 35px rgba(16, 43, 66, 0.045);
}

.card-header {
  border-bottom-color: var(--wbn-border-soft);
}

.btn-primary {
  background: linear-gradient(110deg, #176cbb, #128454);
  border-color: #176cbb;
  box-shadow: 0 8px 20px rgba(20, 109, 132, 0.16);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(110deg, #135d9f, #0f7048);
  border-color: #135d9f;
}

.form-control,
.form-select {
  border-radius: 11px;
  background-color: #fff;
}

.form-control:focus,
.form-select:focus {
  border-color: #2789b5;
  box-shadow: 0 0 0 4px rgba(23, 108, 187, 0.12);
}

.table thead th {
  background: #f1f6fa;
  color: #526c81;
}

.table-hover tbody tr:hover {
  background: #f5f9fb;
}

.app-footer {
  background: #fff;
  border-top-color: #e5edf3 !important;
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar .nav-sidebar > .nav-item > .nav-link,
  .btn,
  .wbn-stat-card {
    transition: none;
  }
}

/* Keep Select2 dropdowns above Bootstrap modals and backdrops. */
.select2-container--open .select2-dropdown {
  z-index: 1075;
}