/* public/assets/css/app.css (FULL — THEME 2026+ + PWA FIX + RESPONSIVE GLOBAL + CLEAN (NO DOUBLE)) */

:root{
  /* DARK (default) */
  --bg: 150 30% 6%;
  --fg: 150 10% 95%;
  --card: 150 25% 9%;
  --border: 150 20% 18%;
  --muted: 150 20% 15%;
  --muted-fg: 150 10% 60%;
  --primary: 160 70% 50%;
  --accent: 38 85% 55%;
  --danger: 0 70% 55%;
  --radius: 18px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.18);
  --shadow-md: 0 12px 26px rgba(0,0,0,.35);
  --shadow-glow: 0 0 40px rgba(16, 185, 129, 0.18);
  --shadow-accent: 0 0 40px rgba(245, 158, 11, 0.20);

  --grad-hero: linear-gradient(135deg, hsl(160 70% 50%) 0%, hsl(150 50% 40%) 50%, hsl(38 85% 55%) 100%);
  --grad-glass: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.06) 100%);

  /* background engine */
  --bg-solid: #05060a;
  --bg-solid-2: #070A12;
  --bg-1: rgba(16,185,129,.22);
  --bg-2: rgba(245,158,11,.18);
  --bg-3: rgba(99,102,241,.10);
  --fg-solid: hsl(var(--fg));

  /* PWA / Safe Areas */
  --ab-safe-top: env(safe-area-inset-top);
  --ab-safe-right: env(safe-area-inset-right);
  --ab-safe-bottom: env(safe-area-inset-bottom);
  --ab-safe-left: env(safe-area-inset-left);

  /* iOS/PWA vh fix (di-set di app.js) */
  --ab-vh: 1vh;

  /* app-like gutters + sidebar */
  --ab-gutter: 16px;
  --ab-sidebar-w: 320px;
  --ab-drawer-w: min(340px, 86vw);
}

/* LIGHT THEME */
html[data-theme="light"]{
  --bg: 210 40% 98%;
  --fg: 222 47% 12%;
  --card: 0 0% 100%;
  --border: 220 20% 85%;
  --muted: 220 18% 92%;
  --muted-fg: 222 12% 40%;
  --primary: 160 70% 40%;
  --accent: 38 85% 48%;
  --danger: 0 70% 50%;

  --shadow-sm: 0 1px 2px rgba(2,6,23,.10);
  --shadow-md: 0 14px 30px rgba(2,6,23,.12);
  --shadow-glow: 0 0 30px rgba(16, 185, 129, 0.16);
  --shadow-accent: 0 0 30px rgba(245, 158, 11, 0.14);

  --grad-hero: linear-gradient(135deg, hsl(160 70% 46%) 0%, hsl(150 55% 44%) 55%, hsl(38 85% 52%) 100%);
  --grad-glass: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);

  --bg-solid: #f6f7fb;
  --bg-solid-2: #eff3f9;
  --bg-1: rgba(16,185,129,.14);
  --bg-2: rgba(245,158,11,.12);
  --bg-3: rgba(99,102,241,.08);
  --fg-solid: hsl(var(--fg));
}

/* base */
*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html{
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  height: 100%;
}
body{
  margin:0;
  min-height: calc(var(--ab-vh) * 100);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  padding: var(--ab-safe-top) var(--ab-safe-right) var(--ab-safe-bottom) var(--ab-safe-left);
  background:
    radial-gradient(1400px 700px at 10% 5%, var(--bg-1), transparent 55%),
    radial-gradient(1200px 700px at 90% 15%, var(--bg-2), transparent 52%),
    radial-gradient(900px 600px at 55% 95%, var(--bg-3), transparent 55%),
    linear-gradient(180deg, var(--bg-solid), var(--bg-solid-2));
  color: var(--fg-solid);
}
a{ color: inherit; }
.no-print{}

/* prevent overflow in flex/grid children */
.ab-card, .ab-content, .ab-sidebar, .ab-topbar, .ab-toolbar, .ab-toolbar .left, .ab-toolbar .right,
.ab-d-card, .ab-d-stat, .ab-d-qcard, .ab-table-wrap{ min-width:0; }

.ab-money{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* glass */
.glass{
  background: var(--grad-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.10);
}
html[data-theme="light"] .glass{ border-color: rgba(2,6,23,.10); }

/* =========================================================
   LAYOUT (DESKTOP)
   ========================================================= */
.ab-topbar{
  position: sticky;
  top:0;
  z-index: 50;
  padding: 12px var(--ab-gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow: var(--shadow-sm);
}

.ab-main{
  display:flex;
  min-height: calc((var(--ab-vh) * 100) - 74px);
}

.ab-sidebar{
  width: var(--ab-sidebar-w);
  padding: 12px 10px;
  border-right: 1px solid rgba(255,255,255,.08);
}
html[data-theme="light"] .ab-sidebar{ border-right-color: rgba(2,6,23,.08); }

.ab-content{
  flex:1;
  padding: var(--ab-gutter);
}

/* =========================================================
   HEADER (CLEAN)
   ========================================================= */
.ab-hdr{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.ab-hdr-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.ab-hdr-title{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.ab-hdr-title .t1{
  font-weight: 950;
  letter-spacing: -.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ab-hdr-title .t2{
  font-size: 12px;
  color: hsl(var(--muted-fg));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ab-hdr-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

/* =========================================================
   CONTROLS
   ========================================================= */
.ab-pill{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
html[data-theme="light"] .ab-pill{
  border-color: rgba(2,6,23,.10);
  background: rgba(255,255,255,.70);
  color: rgba(2,6,23,.82);
}

.ab-btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  text-decoration:none;
  color: var(--fg-solid);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}
.ab-btn-ghost:hover{
  border-color: rgba(16,185,129,.35);
  background: rgba(16,185,129,.10);
}
html[data-theme="light"] .ab-btn-ghost{
  border-color: rgba(2,6,23,.12);
  background: rgba(255,255,255,.70);
  color: rgba(2,6,23,.88);
}
html[data-theme="light"] .ab-btn-ghost:hover{
  border-color: rgba(16,185,129,.26);
  background: rgba(16,185,129,.10);
}

.ab-btn{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--fg-solid);
  text-decoration:none;
  cursor:pointer;
}
.ab-btn:hover{ border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.09); }

html[data-theme="light"] .ab-btn{
  border-color: rgba(2,6,23,.12);
  background: rgba(255,255,255,.70);
  color: rgba(2,6,23,.88);
}
html[data-theme="light"] .ab-btn:hover{
  border-color: rgba(16,185,129,.26);
  background: rgba(16,185,129,.10);
}

.ab-btn-primary{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(16,185,129,.35);
  background: var(--grad-hero);
  color: #06110d;
  font-weight: 900;
  cursor:pointer;
  box-shadow: var(--shadow-glow);
}
.ab-btn-primary:hover{ filter: brightness(1.03); }

.ab-input{
  width: 100%;
  max-width: 320px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: var(--fg-solid);
  outline:none;
}
.ab-input:focus{
  border-color: rgba(16,185,129,.50);
  box-shadow: 0 0 0 6px rgba(16,185,129,.10);
}
.ab-select{ max-width: 220px; }

html[data-theme="light"] .ab-input{
  background: rgba(255,255,255,.86);
  border-color: rgba(2,6,23,.14);
  color: rgba(2,6,23,.88);
}
html[data-theme="light"] .ab-input:focus{
  border-color: rgba(16,185,129,.40);
  box-shadow: 0 0 0 6px rgba(16,185,129,.10);
}
html[data-theme="light"] .ab-input::placeholder{ color: rgba(2,6,23,.45); }

/* =========================================================
   SIDEBAR NAV
   ========================================================= */
.ab-navtitle{
  font-size: 12px;
  color: hsl(var(--muted-fg));
  margin: 14px 10px 6px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ab-navgroup{ display:flex; flex-direction:column; gap:8px; }

.ab-nav{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 11px 12px;
  border-radius: 16px;
  color: var(--fg-solid);
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  cursor:pointer;
}
.ab-nav:hover{
  transform: translateY(-1px);
  border-color: rgba(16,185,129,.30);
  background: rgba(16,185,129,.09);
}
.ab-nav.active{ background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.38); }

.ab-ic{ width:22px; text-align:center; opacity:.92; }

.ab-nav-parent{
  justify-content:space-between;
}
.ab-nav-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.ab-nav-caret{ opacity:.85; }

.ab-nav-children{
  display:none;
  flex-direction:column;
  gap:8px;
  padding-left: 10px;
}
.ab-nav-children.open{ display:flex; }

.ab-nav-child{
  padding: 10px 12px;
  border-radius: 14px;
}

.ab-sidefoot{
  margin-top: 12px;
  padding: 10px;
  color: hsl(var(--muted-fg));
  font-size: 12px;
}

html[data-theme="light"] .ab-nav{
  border-color: rgba(2,6,23,.10);
  background: rgba(255,255,255,.58);
  color: rgba(2,6,23,.88);
}
html[data-theme="light"] .ab-nav:hover{
  border-color: rgba(16,185,129,.26);
  background: rgba(16,185,129,.10);
}
html[data-theme="light"] .ab-nav.active{
  background: rgba(16,185,129,.14);
  border-color: rgba(16,185,129,.28);
}

/* =========================================================
   SIDEBAR USER (BOTTOM)
   ========================================================= */
.ab-sideuser{
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}
html[data-theme="light"] .ab-sideuser{ border-top-color: rgba(2,6,23,.10); }

.ab-userrow{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
}
.ab-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(245,158,11,.18);
  border: 1px solid rgba(245,158,11,.24);
  flex: 0 0 auto;
}
.ab-usercol{ min-width:0; flex: 1; }
.ab-usercol .t1{
  font-weight: 950;
  letter-spacing: -.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ab-usercol .t2{
  font-size: 12px;
  color: hsl(var(--muted-fg));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================================================
   CARDS / TEXT
   ========================================================= */
.ab-card{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow-md);
}
html[data-theme="light"] .ab-card{
  border-color: rgba(2,6,23,.10);
  background: rgba(255,255,255,.72);
}
.ab-card-pad{ padding: 16px; }

.ab-h4{ font-size: 18px; font-weight: 900; margin:0; }
.ab-muted{ color: hsl(var(--muted-fg)); }

/* toolbar */
.ab-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.ab-toolbar .left,
.ab-toolbar .right{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  min-width:0;
}

/* =========================================================
   TABLES (PWA-safe)
   ========================================================= */
.ab-table-wrap{
  width: 100%;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: rgba(0,0,0,.18);
}
html[data-theme="light"] .ab-table-wrap{
  border-color: rgba(2,6,23,.10);
  background: rgba(255,255,255,.72);
}
table{ width:100%; border-collapse: collapse; }
th{
  text-align:left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 12px 12px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.10);
  white-space: nowrap;
}
td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 14px;
  vertical-align: top;
}
tbody tr:hover td{ background: rgba(16,185,129,.06); }

html[data-theme="light"] th{
  color: rgba(2,6,23,.72);
  background: rgba(2,6,23,.04);
  border-bottom-color: rgba(2,6,23,.08);
}
html[data-theme="light"] td{ border-bottom-color: rgba(2,6,23,.06); }
html[data-theme="light"] tbody tr:hover td{ background: rgba(16,185,129,.08); }

/* =========================================================
   BADGE
   ========================================================= */
.badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.14);
  white-space: nowrap;
}
.badge.ok{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.25);
  color: rgba(210,255,236,.95);
}
.badge.off{
  background: rgba(148,163,184,.10);
  border-color: rgba(148,163,184,.18);
  color: rgba(225,233,244,.90);
}
html[data-theme="light"] .badge{ border-color: rgba(2,6,23,.10); }
html[data-theme="light"] .badge.ok{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.22);
  color: rgba(6,17,13,.85);
}
html[data-theme="light"] .badge.off{
  background: rgba(148,163,184,.14);
  border-color: rgba(2,6,23,.10);
  color: rgba(2,6,23,.72);
}

/* =========================================================
   AUTH
   ========================================================= */
.ab-auth-wrap{
  min-height: calc(var(--ab-vh) * 100);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.ab-auth-card{
  width: min(520px, 100%);
  border-radius: 24px;
  padding: 18px;
  box-shadow: var(--shadow-md);
}
.ab-auth-head{ display:flex; align-items:center; gap:12px; }
.ab-auth-title{ font-weight: 900; font-size: 18px; }
.ab-auth-sub{ color: hsl(var(--muted-fg)); font-size: 12px; margin-top: 2px; }
.ab-form{ margin-top: 14px; }
.ab-label{ font-weight: 800; font-size: 12px; color: rgba(255,255,255,.82); }
.ab-help{ color: hsl(var(--muted-fg)); font-size: 12px; }
.ab-alert{
  padding: 10px 12px;
  border-radius: 14px;
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.ab-alert-danger{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); }

html[data-theme="light"] .ab-label{ color: rgba(2,6,23,.72); }
html[data-theme="light"] .ab-alert{
  border-color: rgba(2,6,23,.10);
  background: rgba(255,255,255,.70);
}
html[data-theme="light"] .ab-alert-danger{
  border-color: rgba(239,68,68,.26);
  background: rgba(239,68,68,.10);
}

/* =========================================================
   BOTTOM NAV (MOBILE)
   ========================================================= */
.ab-bottomnav{ display:none; }
.ab-bn-item{
  flex:1;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: rgba(255,255,255,.82);
  padding: 8px 6px;
  border-radius: 16px;
  border: 1px solid transparent;
  min-width: 0;
}
.ab-bn-item.active{
  background: rgba(16,185,129,.14);
  border-color: rgba(16,185,129,.32);
  color: rgba(255,255,255,.95);
}
.ab-bn-ic{ font-size: 16px; line-height: 1; }
.ab-bn-tx{
  font-size: 11px;
  margin-top: 4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
html[data-theme="light"] .ab-bn-item{ color: rgba(2,6,23,.68); }
html[data-theme="light"] .ab-bn-item.active{ color: rgba(2,6,23,.92); }

/* =========================================================
   DASHBOARD (ab-dash)
   ========================================================= */
.ab-dash{ display:flex; flex-direction:column; gap:16px; }

/* HERO */
.ab-d-hero{
  position:relative;
  overflow:hidden;
  border-radius: 26px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--grad-hero);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}
html[data-theme="light"] .ab-d-hero{ border-color: rgba(2,6,23,.10); }

.ab-d-hero:before,
.ab-d-hero:after{
  content:"";
  position:absolute;
  border-radius:999px;
  background: rgba(255,255,255,.16);
  pointer-events:none;
}
.ab-d-hero:before{ width:280px; height:280px; top:-120px; right:-120px; }
.ab-d-hero:after{ width:180px; height:180px; bottom:-90px; left:18%; background: rgba(255,255,255,.10); }
.ab-d-hero-inner{ position:relative; z-index:1; }

.ab-d-hero-title{
  color: rgba(255,255,255,.95);
  font-weight: 950;
  font-size: 22px;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.ab-d-hero-sub{
  margin-top: 8px;
  color: rgba(255,255,255,.84);
  max-width: 860px;
  line-height: 1.55;
}
.ab-d-hero-strong{ font-weight: 950; color: rgba(255,255,255,.96); margin: 0 4px; }
.ab-d-hero-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; }

.ab-d-btn-glass{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 16px;
  font-weight: 950;
  text-decoration:none;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ab-d-btn-glass:hover{ background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.26); }
.ab-d-ico{ display:inline-flex; align-items:center; justify-content:center; opacity: .95; }

/* STATS */
.ab-d-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.ab-d-stat{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow-md);
  padding: 14px;
}
html[data-theme="light"] .ab-d-stat{
  border-color: rgba(2,6,23,.10);
  background: rgba(255,255,255,.72);
}
.ab-d-stat-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ab-d-stat-title{ font-weight: 900; color: hsl(var(--muted-fg)); }
.ab-d-stat-ico{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
html[data-theme="light"] .ab-d-stat-ico{
  background: rgba(2,6,23,.04);
  border-color: rgba(2,6,23,.10);
}
.ab-d-stat-ico.primary{ background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.22); }
.ab-d-stat-ico.accent{ background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.22); }

.ab-d-stat-val{
  margin-top: 10px;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.02em;
  overflow-wrap:anywhere;
}
.ab-d-stat-sub{ margin-top: 6px; color: hsl(var(--muted-fg)); font-weight: 800; }
.ab-d-stat.accent{ border-color: rgba(245,158,11,.22); box-shadow: var(--shadow-md), var(--shadow-accent); }

/* GRID */
.ab-d-grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ab-d-grid3 .span2{ grid-column: span 2; }

.ab-d-grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ab-d-card{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow-md);
  padding: 14px;
  min-width: 0;
}
html[data-theme="light"] .ab-d-card{
  border-color: rgba(2,6,23,.10);
  background: rgba(255,255,255,.72);
}
.ab-d-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }

/* CHART */
.ab-d-chart{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(14, minmax(0,1fr));
  gap: 8px;
  align-items:end;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  overflow:hidden;
}
html[data-theme="light"] .ab-d-chart{
  border-color: rgba(2,6,23,.10);
  background: rgba(2,6,23,.03);
}
.ab-d-bar{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.ab-d-bar-fill{
  width:100%;
  min-height: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(16,185,129,.82), rgba(245,158,11,.62));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-sm);
}
.ab-d-bar-lbl{ font-size: 11px; font-weight: 850; color: hsl(var(--muted-fg)); }

/* SPLIT */
.ab-d-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.ab-d-split-item{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
html[data-theme="light"] .ab-d-split-item{
  border-color: rgba(2,6,23,.10);
  background: rgba(255,255,255,.70);
}
.ab-d-mini{ margin-top: 6px; font-size: 16px; font-weight: 950; overflow-wrap:anywhere; }

/* LIST */
.ab-d-list{ margin-top: 12px; display:flex; flex-direction:column; gap:10px; }
.ab-d-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
html[data-theme="light"] .ab-d-row{
  border-color: rgba(2,6,23,.10);
  background: rgba(255,255,255,.70);
}
.ab-d-row .name{ font-weight: 950; letter-spacing: -.01em; }
.ab-d-row .meta{ margin-top: 2px; }
.ab-d-row .right{ text-align:right; }
.ab-d-row .amt{ font-weight: 950; }

.ab-d-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
html[data-theme="light"] .ab-d-badge{
  border-color: rgba(2,6,23,.10);
  background: rgba(2,6,23,.04);
}
.ab-d-badge.danger{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.24);
  color: rgba(255,220,220,.95);
}
html[data-theme="light"] .ab-d-badge.danger{ color: rgba(120,10,10,.90); }

/* QUICK FOOTER */
.ab-d-quick{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.ab-d-qcard{
  border-radius: 22px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow-md);
}
html[data-theme="light"] .ab-d-qcard{
  border-color: rgba(2,6,23,.10);
  background: rgba(255,255,255,.72);
}
.ab-d-qtop{ display:flex; align-items:center; gap:8px; margin-bottom: 6px; }
.ab-d-qt{ font-weight: 900; font-size: 13px; color: hsl(var(--muted-fg)); }
.ab-d-qv{ font-weight: 950; font-size: 18px; letter-spacing: -.02em; overflow-wrap:anywhere; }

.ab-d-qcard.ok{ background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.22); }
.ab-d-qcard.bad{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.22); }
.ab-d-qcard.info{ background: rgba(255,255,255,.04); }
html[data-theme="light"] .ab-d-qcard.info{ background: rgba(2,6,23,.03); }
.ab-d-qcard.accent{ background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.22); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .ab-d-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ab-d-grid3{ grid-template-columns: 1fr; }
  .ab-d-grid3 .span2{ grid-column: auto; }
  .ab-d-grid2{ grid-template-columns: 1fr; }
  .ab-d-quick{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  :root{ --ab-gutter: 12px; }
  .ab-card-pad{ padding: 14px; }
  th, td{ padding: 10px 10px; }
}
@media (max-width: 480px){
  .ab-d-hero{ padding: 14px; border-radius: 22px; }
  .ab-d-hero-title{ font-size: 18px; }
  .ab-d-chart{ gap: 6px; padding: 8px; }
  .ab-d-bar-lbl{ font-size: 10px; }
}

/* =========================================================
   MOBILE DRAWER + MOBILE APP LAYOUT
   ========================================================= */

/* menu btn (support: class .ab-menu-btn / id #abMenuBtn) */
.ab-menu-btn, #abMenuBtn{ display:none; }

/* sidehead default (desktop hidden) */
.ab-sidehead{ display:none; }
.ab-sidehead-title{ font-weight: 950; letter-spacing: -.01em; }

/* overlay default */
#abOverlay{ display:none; }

@media (max-width: 992px){
  /* enable menu btn */
  .ab-menu-btn, #abMenuBtn{ display:inline-flex; }

  /* main becomes single-column */
  .ab-main{ display:block; }

  /* bottom nav visible */
  .ab-content{ padding-bottom: calc(98px + env(safe-area-inset-bottom)); }
  .ab-bottomnav{
    display:flex;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 70;
    border-radius: 22px;
    padding: 10px 8px;
    gap: 6px;
    box-shadow: var(--shadow-md);
  }

  /* drawer behavior */
  body.ab-nav-open{ overflow:hidden; }

  #abOverlay{
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  body.ab-nav-open #abOverlay{ display:block; }

  #abSidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: var(--ab-drawer-w);
    transform: translateX(-105%);
    transition: transform .25s ease;
    z-index: 90;

    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  body.ab-nav-open #abSidebar{ transform: translateX(0); }

  .ab-sidehead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding: 10px 8px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--grad-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  html[data-theme="light"] .ab-sidehead{ border-bottom-color: rgba(2,6,23,.10); }

  .ab-sideuser{
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--grad-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  /* header tighter */
  .ab-topbar{ padding: 10px var(--ab-gutter); }
  .ab-hdr-title .t2{ display:none; }
}

/* =========================================================
   PRINT
   ========================================================= */
@media print {
  .ab-topbar, .ab-sidebar, .ab-bottomnav, .no-print { display:none !important; }
  body{ background:#fff !important; color:#000 !important; padding:0 !important; }
  .ab-card, .ab-table-wrap{ box-shadow:none !important; border:1px solid #ddd !important; background:#fff !important; }
}