/* =========================================================
   YOYA EKUB — Shared Stylesheet
   Designed By Leykun Advertising & Software PLC.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --forest: #0E332C;        /* darkest green (app bar / hero) */
  --panel: #17493F;         /* raised panel green */
  --panel-2: #1E574C;       /* lighter panel green */
  --lime: #CDEB63;          /* action / accent */
  --lime-soft: #E4F5AC;
  --mint: #EAF4E2;          /* tinted background chips */
  --paper: #F4F7F2;         /* page background */
  --ink: #10231F;           /* primary text on light */
  --ink-soft: #5A6E67;      /* secondary text */
  --line: #E2EAE2;          /* hairlines */
  --amber: #E8A33D;
  --red: #D9534F;
  --blue: #4A7DE2;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(14, 51, 44, .10);
  --shadow-sm: 0 4px 14px rgba(14, 51, 44, .08);
  --sidebar-w: 264px;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Manrope', system-ui, sans-serif;
  background: linear-gradient(135deg, var(--paper) 0%, #E9F0EA 100%);
  color: var(--ink);
  letter-spacing: .1px;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, .display-font { font-family: 'Sora', sans-serif; }

a { text-decoration: none; }

::selection { background: var(--lime); color: var(--forest); }

/* ------- Reusable bits ------- */
.eyebrow {
  font-family: 'Sora', sans-serif;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--panel-2);
  font-weight: 700;
}
.eyebrow .am { color: var(--amber); font-weight: 600; letter-spacing: 0; }

.text-soft { color: var(--ink-soft); }
.fw-750 { font-weight: 750; }

.btn { border-radius: 999px; font-weight: 700; padding-inline: 1.15rem; transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); }
.btn:hover { transform: translateY(-1.5px); box-shadow: 0 6px 16px rgba(14, 51, 44, 0.12); }
.btn:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(14, 51, 44, 0.08); }
.btn:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

.btn-lime {
  background: var(--lime); color: var(--forest); border: none;
}
.btn-lime:hover, .btn-lime:focus { background: #bfe14e; color: var(--forest); }

.btn-forest { background: var(--forest); color: #fff; border: none; }
.btn-forest:hover { background: var(--panel); color: #fff; }

.btn-ghost {
  background: transparent; border: 1.5px solid rgba(255,255,255,.35); color: #fff;
}
.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

.btn-outline-forest { border: 1.5px solid var(--forest); color: var(--forest); background: #fff; }
.btn-outline-forest:hover { background: var(--forest); color: #fff; }

.badge-soft {
  background: var(--mint); color: var(--panel);
  border-radius: 999px; font-weight: 700; padding: .38em .8em;
}
.badge-lime { background: var(--lime); color: var(--forest); border-radius: 999px; font-weight: 700; padding: .38em .8em; }
.badge-amber { background: #FBEBD2; color: #9A6414; border-radius: 999px; font-weight: 700; padding: .38em .8em; }
.badge-red { background: #FBE3E2; color: #A33330; border-radius: 999px; font-weight: 700; padding: .38em .8em; }
.badge-blue { background: #E3EBFB; color: #2F55A8; border-radius: 999px; font-weight: 700; padding: .38em .8em; }

.card { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card .card-header { background: transparent; border-bottom: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }

.table > :not(caption) > * > * { padding: .85rem .9rem; }
.table thead th {
  font-family: 'Sora', sans-serif; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--line);
}
.table tbody td { border-color: #EEF3EC; vertical-align: middle; }

.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mint); color: var(--panel);
  font-weight: 800; font-family: 'Sora', sans-serif; font-size: .85rem;
  flex: 0 0 auto;
}
.avatar.lg { width: 64px; height: 64px; font-size: 1.15rem; }
.avatar.dark { background: var(--panel-2); color: var(--lime); }

.icon-tile {
  width: 44px; height: 44px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex: 0 0 auto;
}
.tile-mint  { background: var(--mint); color: var(--panel); }
.tile-lime  { background: var(--lime-soft); color: var(--panel); }
.tile-amber { background: #FBEBD2; color: #9A6414; }
.tile-red   { background: #FBE3E2; color: #A33330; }
.tile-blue  { background: #E3EBFB; color: #2F55A8; }

.progress { height: 8px; border-radius: 999px; background: #E7EFE5; }
.progress-bar { background: var(--panel-2); border-radius: 999px; }
.progress-bar.lime { background: var(--lime); }

.form-control, .form-select {
  border-radius: var(--radius-sm); border-color: var(--line);
  padding: .65rem .9rem; background: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--panel-2); box-shadow: 0 0 0 .2rem rgba(30, 87, 76, .12);
}
.form-label { font-weight: 700; font-size: .85rem; }

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

/* =========================================================
   LANDING PAGE
   ========================================================= */
.landing-nav {
  background: rgba(244, 247, 242, .85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px; background: var(--forest);
  color: var(--lime); display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-weight: 800;
}
.brand-name { font-family: 'Sora', sans-serif; font-weight: 800; color: var(--forest); }

.hero {
  background:
    radial-gradient(900px 500px at 85% -10%, #2A6A5B 0%, transparent 60%),
    linear-gradient(160deg, #123B33 0%, var(--forest) 65%);
  color: #fff;
  border-radius: 0 0 36px 36px;
  overflow: hidden;
  position: relative;
}
.hero .lead { color: #C9DCCF; max-width: 34rem; }
.hero-stat { border-left: 2px solid rgba(205, 235, 99, .5); padding-left: 1rem; }
.hero-stat .num { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--lime); }
.hero-stat .lbl { color: #A9C4B3; font-size: .8rem; }

/* phone mock on the hero */
.phone-mock {
  width: min(340px, 88vw); margin-inline: auto;
  background: var(--forest); border: 6px solid #0A2620; border-radius: 40px;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.phone-screen-top { background: linear-gradient(180deg, #133F36, var(--forest)); padding: 1.2rem 1.2rem 1.4rem; color: #fff; }
.phone-screen-body { background: #fff; padding: 1rem 1.2rem 1.4rem; border-radius: 24px 24px 0 0; }
.wallet-balance { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.9rem; }
.chip {
  border: 1.4px solid rgba(255,255,255,.25); color: #DFEDE2;
  border-radius: 999px; padding: .35rem .9rem; font-size: .8rem; font-weight: 700;
}
.chip.active { background: var(--lime); color: var(--forest); border-color: var(--lime); }

.feature-card { height: 100%; transition: transform .25s ease, box-shadow .25s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.step-num {
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 2.4rem;
  color: transparent; -webkit-text-stroke: 1.6px var(--panel-2);
}

.landing-footer { background: var(--forest); color: #B9CDBF; border-radius: 36px 36px 0 0; }
.landing-footer a { color: #DCEBDD; }
.landing-footer a:hover { color: var(--lime); }

/* =========================================================
   APP SHELL (dashboards)
   ========================================================= */
.app-body { min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  background: var(--forest); color: #CFE1D4; z-index: 1040;
  display: flex; flex-direction: column;
  transform: translateX(0); transition: transform .28s ease;
}
/* Sidebar nav item visuals now live directly on the Tailwind markup in
   resources/views/partials/sidebar.blade.php (translucent emerald active
   state + left-border accent). .sidebar above still handles shell
   positioning (fixed, width, flex column, mobile transform). */

.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(10, 30, 25, .5);
  z-index: 1035; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}

.app-main { margin-left: var(--sidebar-w); padding-bottom: 2.5rem; }

.topbar {
  background: rgba(244, 247, 242, .75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(226, 234, 226, .6);
  padding: .9rem 1.5rem; position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: 1rem;
}
.topbar .page-title { font-family: 'Sora', sans-serif; font-weight: 800; margin: 0; font-size: 1.15rem; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--forest); display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.icon-btn:hover { background: var(--mint); }
.icon-btn .dot {
  position: absolute; top: 9px; right: 10px; width: 8px; height: 8px;
  background: var(--amber); border-radius: 50%; border: 2px solid #fff;
}

.content-wrap { animation: fadeUp 0.5s ease-out forwards; opacity: 0; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero wallet card inside dashboards (mirrors reference app) */
.wallet-hero {
  background:
    radial-gradient(600px 300px at 100% 0%, #245D50 0%, transparent 55%),
    linear-gradient(150deg, #134037, var(--forest));
  color: #fff; border-radius: var(--radius-lg); padding: 1.6rem;
  box-shadow: var(--shadow);
}
.wallet-hero .label { color: var(--lime); font-weight: 700; letter-spacing: .04em; }
.wallet-hero .amount { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.wallet-hero .sub { color: #A9C4B3; }
.eye-toggle { background: none; border: none; color: var(--lime); font-size: 1.2rem; }

.stat-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); height: 100%; }
.stat-card .num { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.45rem; }
.stat-card .delta-up { color: #2F7A4D; font-weight: 700; font-size: .8rem; }
.stat-card .delta-down { color: var(--red); font-weight: 700; font-size: .8rem; }

.quick-action { text-align: center; color: var(--ink); display: block; }
.quick-action .ring {
  width: 62px; height: 62px; border-radius: 50%; margin-inline: auto;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  border: 1.8px solid; transition: transform .2s ease, background .2s ease;
}
.quick-action:hover .ring { transform: translateY(-3px); }
.qa-green .ring { color: #2F7A4D; border-color: #7FC79B; } .qa-green:hover .ring { background: #EAF6EE; }
.qa-red .ring { color: #C0443F; border-color: #E9A19E; } .qa-red:hover .ring { background: #FBEDEC; }
.qa-blue .ring { color: #2F55A8; border-color: #9AB4E8; } .qa-blue:hover .ring { background: #EEF3FC; }
.qa-amber .ring { color: #9A6414; border-color: #ECC183; } .qa-amber:hover .ring { background: #FCF3E4; }
.quick-action .lbl { font-weight: 700; font-size: .85rem; margin-top: .5rem; }

.list-tx { display: flex; align-items: center; gap: .9rem; padding: .8rem 0; border-bottom: 1px solid #EEF3EC; }
.list-tx:last-child { border-bottom: 0; }
.list-tx .t-title { font-weight: 800; font-size: .95rem; }
.list-tx .t-sub { color: var(--ink-soft); font-size: .8rem; }
.list-tx .t-amount { font-family: 'Sora', sans-serif; font-weight: 800; white-space: nowrap; }
.amt-in { color: #2F7A4D; } .amt-out { color: var(--ink); }

.round-pill {
  width: 34px; height: 34px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: .8rem;
  background: var(--mint); color: var(--panel); font-family: 'Sora', sans-serif;
}
.round-pill.won { background: var(--lime); color: var(--forest); }
.round-pill.missed { background: #FBE3E2; color: #A33330; }

/* Countdown */
.count-cell {
  background: var(--panel); color: #fff; border-radius: var(--radius-md);
  padding: .7rem .4rem; text-align: center; min-width: 64px;
}
.count-cell .v { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--lime); }
.count-cell .l { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #A9C4B3; }

/* Lottery drum */
.draw-drum {
  background:
    radial-gradient(500px 260px at 50% -20%, #2A6A5B 0%, transparent 60%),
    linear-gradient(160deg, #123B33, var(--forest));
  border-radius: var(--radius-lg); color: #fff; padding: 2rem 1.5rem; text-align: center;
}
.draw-name {
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--lime); min-height: 3.2rem;
}
.draw-drum.spinning .draw-name { animation: flick .12s linear infinite; }
@keyframes flick { 0% { opacity: .55; } 50% { opacity: 1; } 100% { opacity: .55; } }

.confetti { position: relative; overflow: hidden; }

/* Winner "You!" congrats badge */
.congrats-badge {
  display: inline-flex; align-items: center; gap: .25em;
  font-size: .68rem; padding: .18em .6em;
  animation: congratsPulse 1.4s ease-in-out infinite;
}
@keyframes congratsPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(205, 235, 99, .55); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(205, 235, 99, 0); }
}

/* Chart canvases */
.chart-box { width: 100%; height: 240px; }

/* Auth modal tabs */
.role-pick { border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 1rem; cursor: pointer; transition: all .15s ease; }
.role-pick:hover, .role-pick.selected { border-color: var(--panel-2); background: var(--mint); }

/* Timeline (member journey) */
.tl { list-style: none; padding-left: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl li { position: relative; padding-left: 44px; padding-bottom: 1.1rem; }
.tl .dot-tl {
  position: absolute; left: 7px; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 4px solid var(--panel-2);
}
.tl li.done .dot-tl { background: var(--lime); border-color: var(--panel-2); }

/* Mobile bottom navigation — mirrors the reference app */
.bottom-nav {
  display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1030;
  background: var(--forest); border-radius: 26px; padding: .55rem .9rem;
  box-shadow: 0 14px 34px rgba(10, 30, 25, .4);
}
.bottom-nav .bn-link { color: #9FBCA8; text-align: center; font-size: .66rem; font-weight: 700; flex: 1; }
.bottom-nav .bn-link i { display: block; font-size: 1.25rem; margin-bottom: 2px; }
.bottom-nav .bn-link.active { color: var(--lime); }
.bottom-nav .bn-cta {
  width: 56px; height: 56px; border-radius: 50%; background: var(--lime); color: var(--forest);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  margin-top: -26px; border: 5px solid var(--paper); flex: 0 0 auto;
}

/* ------- Responsive ------- */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-105%); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .app-main { margin-left: 0; padding-bottom: 6.5rem; }
  .bottom-nav { display: flex; align-items: center; }
  .content-wrap { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* print for reports */
@media print {
  .sidebar, .bottom-nav, .topbar, .no-print { display: none !important; }
  .app-main { margin: 0; }
}

/* =========================================================
   ENHANCED UI v2 — Mobile-first app + SaaS dashboard polish
   Reference: Cashly, TalentaSync, AeuxGlobal, Salesforce
   ========================================================= */

/* --- Stat card hover lift --- */
.stat-card {
  transition: transform .22s ease, box-shadow .22s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 54px rgba(14, 51, 44, .12);
  border-color: rgba(205, 235, 99, 0.4);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 4px; bottom: 0;
  background: var(--lime);
  border-radius: 4px 0 0 4px;
  opacity: 0;
  transition: opacity .2s ease;
}
.stat-card:hover::before { opacity: 1; }

/* Stat card number override (bigger on desktop) */
.stat-card .num {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

/* Trend badges */
.sc-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .2em .55em;
  margin-top: .3rem;
}
.sc-trend.up     { color: #1E6B3C; background: #D9F2E6; }
.sc-trend.down   { color: #A33330; background: #FBE3E2; }
.sc-trend.neutral{ color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); }

/* Page stats bar — responsive grid */
.page-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 991.98px) { .page-stats-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .page-stats-bar { gap: .6rem; } }

/* --- Gradient icon tiles --- */
.tile-gradient-mint  { background: linear-gradient(135deg, #CCF2DC 0%, #A3E4C0 100%); color: var(--panel); }
.tile-gradient-blue  { background: linear-gradient(135deg, #C3D9FC 0%, #94B6F5 100%); color: #1E3D8A; }
.tile-gradient-lime  { background: linear-gradient(135deg, var(--lime-soft) 0%, #C5E053 100%); color: var(--panel); }
.tile-gradient-amber { background: linear-gradient(135deg, #FCECD2 0%, #F3C268 100%); color: #7A4A00; }
.tile-gradient-red   { background: linear-gradient(135deg, #FDE8E7 0%, #F4A9A7 100%); color: #8A1F1C; }

/* --- Data card (table container) --- */
.data-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 8px 24px rgba(14, 51, 44, .04);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.data-card:hover {
  box-shadow: 0 16px 40px rgba(14, 51, 44, .08);
}
.data-card .dc-header {
  padding: .8rem 1.25rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  background: #fafcfa;
}
.dc-title {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.dc-count {
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  padding: .12em .58em;
  border: 1px solid var(--line);
}

/* Search inside card header */
.dc-search-wrap { position: relative; }
.dc-search-wrap .bi-search {
  position: absolute;
  left: .75rem; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  font-size: .84rem;
  pointer-events: none;
  z-index: 1;
}
.dc-search-input {
  padding-left: 2.1rem !important;
  border-radius: 999px !important;
  font-size: .84rem !important;
  height: 36px !important;
  width: 175px;
  background: var(--paper) !important;
  border: 1.5px solid var(--line) !important;
  transition: all .22s ease;
  outline: none;
}
.dc-search-input:focus {
  width: 210px;
  background: #fff !important;
  border-color: var(--panel-2) !important;
  box-shadow: 0 0 0 3px rgba(30, 87, 76, .1) !important;
}

/* --- Filter chips --- */
.filter-chips {
  display: flex;
  gap: .3rem;
  align-items: center;
  flex-wrap: wrap;
}
.filter-chip {
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: .26rem .78rem;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .14s ease;
  line-height: 1.4;
  white-space: nowrap;
}
.filter-chip:hover  { border-color: var(--panel); color: var(--panel); background: var(--mint); }
.filter-chip.active { background: var(--forest); color: #fff; border-color: var(--forest); }
.filter-chip:focus  { outline: 2px solid var(--lime); outline-offset: 2px; }

/* --- Modal improvements --- */
.modal-section-label {
  font-family: 'Sora', sans-serif;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .1rem 0 .7rem;
  margin-top: .4rem;
}
.modal-section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.modal-content {
  border-radius: var(--radius-lg) !important;
  border: none !important;
  box-shadow: 0 32px 80px rgba(10, 30, 25, .22) !important;
}
.modal-header {
  padding: 1.25rem 1.5rem .5rem !important;
  border-bottom: none !important;
}
.modal-body {
  padding: .5rem 1.5rem 1.5rem !important;
}
.modal-title {
  font-family: 'Sora', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
}
.modal-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  padding-top: 1.1rem;
  margin-top: .5rem;
  border-top: 1px solid var(--line);
}

/* --- Avatar cells in tables --- */
.tbl-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: 'Sora', sans-serif;
  font-size: .73rem;
  flex: 0 0 auto;
}
.tbl-cell-person { display: flex; align-items: center; gap: .62rem; min-width: 0; }
.tbl-cell-person .pname { font-weight: 700; font-size: .88rem; line-height: 1.2; white-space: nowrap; }
.tbl-cell-person .psub  { color: var(--ink-soft); font-size: .76rem; white-space: nowrap; }

/* Table row hover */
.table tbody tr { transition: background .1s ease; }
.table tbody tr:hover { background: #F5FAF4 !important; }

/* Amount display */
.tbl-amount {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: .88rem;
  color: #1E6B3C;
  white-space: nowrap;
}
.tbl-amount.neutral { color: var(--ink); }

/* --- Status badge system --- */
.bs-active   { background: #D9F2E6; color: #1E6B3C; border-radius: 999px; padding: .28em .82em; font-weight: 700; font-size: .76rem; white-space: nowrap; }
.bs-inactive { background: #FBE3E2; color: #A33330; border-radius: 999px; padding: .28em .82em; font-weight: 700; font-size: .76rem; white-space: nowrap; }
.bs-pending  { background: #FBEBD2; color: #9A6414; border-radius: 999px; padding: .28em .82em; font-weight: 700; font-size: .76rem; white-space: nowrap; }
.bs-closed   { background: var(--paper); color: var(--ink-soft); border-radius: 999px; padding: .28em .82em; font-weight: 700; font-size: .76rem; border: 1px solid var(--line); white-space: nowrap; }
.bs-bank     { background: #E3EBFB; color: #2F55A8; border-radius: 999px; padding: .28em .82em; font-weight: 700; font-size: .76rem; white-space: nowrap; }
.bs-cash     { background: var(--lime-soft); color: var(--panel); border-radius: 999px; padding: .28em .82em; font-weight: 700; font-size: .76rem; white-space: nowrap; }
.bs-default  { background: var(--mint); color: var(--panel); border-radius: 999px; padding: .28em .82em; font-weight: 700; font-size: .76rem; white-space: nowrap; }

/* --- Page eyebrow in topbar --- */
.page-eyebrow {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-soft);
  line-height: 1;
  margin-bottom: .08rem;
}

/* --- Bottom nav active pill glow --- */
.bottom-nav .bn-link {
  border-radius: 14px;
  padding: .4rem .3rem;
  transition: color .2s ease;
  position: relative;
}
.bottom-nav .bn-link.active::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(205, 235, 99, .15);
  border-radius: 14px;
  pointer-events: none;
}

/* --- DataTable overrides --- */
div.dataTables_wrapper { font-size: .875rem; }
div.dataTables_wrapper div.dataTables_filter label { display: flex; align-items: center; gap: .4rem; color: var(--ink-soft); font-weight: 600; }
div.dataTables_wrapper div.dataTables_filter input {
  border-radius: 999px !important;
  border: 1.5px solid var(--line) !important;
  padding: .32rem .9rem .32rem 1rem !important;
  font-size: .84rem !important;
  background: var(--paper) !important;
  margin-left: .4rem;
  transition: all .2s;
}
div.dataTables_wrapper div.dataTables_filter input:focus {
  border-color: var(--panel-2) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(30, 87, 76, .1) !important;
  background: #fff !important;
}
div.dataTables_wrapper div.dataTables_length select {
  border-radius: var(--radius-sm) !important;
  border-color: var(--line) !important;
  padding: .28rem .6rem !important;
  font-size: .84rem !important;
}
div.dataTables_wrapper div.dataTables_length label { color: var(--ink-soft); font-weight: 600; display: flex; align-items: center; gap: .4rem; }
div.dataTables_wrapper .dataTables_info { color: var(--ink-soft); font-size: .82rem; padding-top: .8rem; }

.dt-buttons { display: flex; gap: .35rem; flex-wrap: wrap; }
.dt-buttons .btn {
  border-radius: 999px !important;
  font-size: .77rem !important;
  padding: .3rem .85rem !important;
  font-weight: 700 !important;
}

div.dataTables_wrapper div.dataTables_paginate { padding-top: .5rem; }
div.dataTables_wrapper div.dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  font-size: .82rem !important;
  padding: .3rem .65rem !important;
}
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current:hover {
  background: var(--forest) !important;
  color: #fff !important;
  border-color: var(--forest) !important;
}
div.dataTables_wrapper div.dataTables_paginate .paginate_button:not(.disabled):hover {
  background: var(--mint) !important;
  color: var(--forest) !important;
  border-color: var(--line) !important;
}
table.dataTable > thead > tr > th {
  background: #fafcfa !important;
}
table.dataTable tbody tr:hover > * {
  background-color: #F5FAF4 !important;
  box-shadow: none !important;
}

/* --- Custom scrollbar --- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CDD8CC; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #B5C5B3; }

/* --- Responsive enhancements --- */
@media (max-width: 767.98px) {
  .data-card .dc-header { flex-direction: column; align-items: stretch; }
  .dc-search-wrap { width: 100%; }
  .dc-search-input, .dc-search-input:focus { width: 100% !important; }
  .filter-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .15rem; -webkit-overflow-scrolling: touch; }
  .page-stats-bar { gap: .55rem; }
  .dt-buttons { gap: .25rem; }
  .wallet-hero .amount { font-size: 1.9rem; }
}
@media (max-width: 479.98px) {
  .stat-card { padding: .85rem 1rem; }
  .stat-card .num { font-size: 1.35rem; }
  .icon-tile { width: 38px; height: 38px; font-size: 1rem; border-radius: 11px; }
}