/* 🔒 IRON CAGE LOCKED — DO NOT DELETE OR MODIFY   JAYABINA — Admin Modern Polish Layer (v1, 2026-07-31)
   ⛔ ADDITIVE ONLY — never override theme.css / portal-shared.css
   Loaded AFTER admin-modern.css. Scoped to .admin-app.

   Modern UI enhancements (7 layers):
   1. Empty states with illustration + CTA
   2. Skeleton loaders with shimmer
   3. Modern toast notifications (top-right, slide-in)
   4. iOS-style toggle switches
   5. Sticky table headers + zebra rows
   6. Modern modal entrance + backdrop blur
   7. Stat cards with trend indicators
   ═══════════════════════════════════════════════════════════════════ */

/* ───── 1. EMPTY STATES — Illustration + CTA ───── */
.admin-app .empty{
  text-align:center;
  padding:64px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.admin-app .empty .eicon{
  width:64px;height:64px;
  border-radius:var(--r-4xl);
  background:var(--card-muted);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:6px;
  position:relative;
  overflow:hidden;
}
.admin-app .empty .eicon::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--accent-light) 0%,transparent 100%);
  opacity:.6;
}
.admin-app .empty .eicon i{
  width:28px;height:28px;
  color:var(--text3);
  position:relative;z-index:1;
}
.admin-app .empty h2{
  font-size:1.05rem;font-weight:700;
  letter-spacing:-.3px;
  color:var(--text);
  margin:0;
}
.admin-app .empty p{
  color:var(--text3);
  font-size:.82rem;
  margin:0;
  max-width:320px;
  line-height:1.5;
}
.admin-app .empty .empty-cta{
  margin-top:12px;
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 18px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:11px;
  font-weight:700;font-size:.78rem;
  cursor:pointer;
  font-family:var(--font);
  transition:all .18s;
  box-shadow:0 4px 14px var(--accent-glow);
}
.admin-app .empty .empty-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(22,101,52,.28);
}
.admin-app .empty .empty-cta:active{transform:scale(.97)}

/* ───── 2. SKELETON LOADERS — Shimmer ───── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.admin-app .skeleton{
  background:linear-gradient(90deg,
    var(--card-muted) 25%,
    var(--border) 50%,
    var(--card-muted) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s ease-in-out infinite;
  border-radius:var(--r-md);
  color:transparent !important;
  user-select:none;
  pointer-events:none;
}
.admin-app .skeleton-line{
  height:12px;
  margin:8px 0;
}
.admin-app .skeleton-line.short{width:40%}
.admin-app .skeleton-line.medium{width:60%}
.admin-app .skeleton-line.long{width:90%}
.admin-app .skeleton-line.thick{height:18px}
.admin-app .skeleton-circle{
  width:44px;height:44px;
  border-radius:50%;
  flex-shrink:0;
}
.admin-app .skeleton-card{
  height:120px;
  border-radius:var(--card-radius);
  background:linear-gradient(90deg,
    var(--card-muted) 25%,
    var(--border) 50%,
    var(--card-muted) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s ease-in-out infinite;
  border:1px solid var(--card-border);
}
.admin-app .skeleton-row{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}

/* ───── 3. MODERN TOAST NOTIFICATIONS (top-right, slide-in) ───── */
.admin-app .toast{
  position:fixed;
  top:80px;right:20px;
  left:auto;bottom:auto;
  transform:translateX(120%);
  background:var(--card-bg);
  color:var(--text);
  padding:14px 20px 14px 16px;
  border-radius:var(--r-2xl);
  font-size:.82rem;
  font-weight:500;
  z-index:200;
  transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s;
  opacity:0;
  pointer-events:none;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 12px 40px rgba(5,46,34,.15),0 0 0 1px var(--card-border);
  max-width:380px;
  border-left:4px solid var(--accent);
  font-family:var(--font);
}
.admin-app .toast.show{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}
.admin-app .toast i{
  width:20px;height:20px;
  flex-shrink:0;
  color:var(--accent);
}
.admin-app .toast .toast-msg{
  flex:1;
  line-height:1.4;
}
.admin-app .toast .toast-close{
  width:24px;height:24px;
  border:none;background:transparent;
  color:var(--text3);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);
  transition:background .15s;
}
.admin-app .toast .toast-close:hover{background:var(--card-muted)}
.admin-app .toast.success{border-left-color:var(--accent)}
.admin-app .toast.success i{color:var(--accent)}
.admin-app .toast.error{border-left-color:var(--danger)}
.admin-app .toast.error i{color:var(--danger)}
.admin-app .toast.warning{border-left-color:var(--warning)}
.admin-app .toast.warning i{color:var(--warning)}
.admin-app .toast.info{border-left-color:var(--accent2)}
.admin-app .toast.info i{color:var(--accent2)}
@media(max-width:767px){
  .admin-app .toast{top:auto;bottom:90px;right:16px;left:16px;max-width:none}
}

/* ───── 4. iOS-STYLE TOGGLE SWITCHES ───── */
.admin-app .ios-tgl{
  position:relative;
  display:inline-block;
  width:46px;height:26px;
  flex-shrink:0;
  vertical-align:middle;
}
.admin-app .ios-tgl input{
  opacity:0;
  width:100%;height:100%;
  margin:0;cursor:pointer;
  position:absolute;z-index:2;
}
.admin-app .ios-tgl .slider{
  position:absolute;inset:0;
  background:var(--border-strong);
  border-radius:999px;
  transition:background .25s cubic-bezier(.4,0,.2,1);
}
.admin-app .ios-tgl .slider::before{
  content:"";
  position:absolute;
  height:20px;width:20px;
  left:3px;top:3px;
  background:#fff;
  border-radius:50%;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 3px rgba(0,0,0,.2),0 4px 8px rgba(0,0,0,.1);
}
.admin-app .ios-tgl input:checked + .slider{
  background:var(--accent);
}
.admin-app .ios-tgl input:checked + .slider::before{
  transform:translateX(20px);
}
.admin-app .ios-tgl input:focus-visible + .slider{
  box-shadow:0 0 0 3px var(--accent-glow);
}
.admin-app .ios-tgl.success input:checked + .slider{background:var(--accent)}
.admin-app .ios-tgl.danger input:checked + .slider{background:var(--danger)}
.admin-app .ios-tgl.warning input:checked + .slider{background:var(--warning)}
.admin-app .ios-tgl-label{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.78rem;
  color:var(--text2);
  cursor:pointer;
  font-weight:500;
}

/* ───── 5. STICKY TABLE HEADERS + ZEBRA ROWS ───── */
.admin-app table thead th{
  position:sticky;top:0;
  z-index:2;
  background:var(--card-muted);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--border);
}
.admin-app table tbody tr:nth-child(even){
  background:rgba(0,0,0,.012);
}
.admin-app table tbody tr:nth-child(even):hover{
  background:var(--card-muted);
}
.admin-app .table-wrap{
  position:relative;
  max-height:70vh;
  overflow:auto;
  border-radius:var(--card-radius);
}

/* ───── 6. MODERN MODAL ENHANCEMENTS ───── */
.admin-app .modal{
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(10px) saturate(180%);
  -webkit-backdrop-filter:blur(10px) saturate(180%);
}
.admin-app .modal.show .m-sheet{
  animation:mdSpring .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mdSpring{
  0%{transform:scale(.92) translateY(10px);opacity:0}
  60%{transform:scale(1.02) translateY(0);opacity:1}
  100%{transform:scale(1) translateY(0);opacity:1}
}
.admin-app .m-sheet{
  position:relative;
}
.admin-app .m-sheet::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.5;
}

/* ───── 7. STAT CARDS — Trend Indicators + Sparkline ───── */
.admin-app .stat{
  position:relative;
  overflow:hidden;
}
.admin-app .stat::after{
  content:"";
  position:absolute;
  top:0;right:0;
  width:120px;height:120px;
  background:radial-gradient(circle at top right,var(--card-tint,var(--accent-light)) 0%,transparent 70%);
  opacity:.5;
  pointer-events:none;
}
.admin-app .stat .stat-trend{
  display:inline-flex;align-items:center;gap:3px;
  margin-top:4px;
  padding:2px 7px;
  border-radius:var(--r-base);
  font-size:.62rem;
  font-weight:800;
  background:var(--accent-light);
  color:var(--accent);
}
.admin-app .stat .stat-trend i{width:10px;height:10px}
.admin-app .stat .stat-trend.down{background:var(--danger-light);color:var(--danger)}
.admin-app .stat .stat-trend.flat{background:var(--card-muted);color:var(--text3)}
.admin-app .stat .stat-spark{
  position:absolute;
  bottom:0;left:0;right:0;
  height:32px;
  opacity:.4;
  pointer-events:none;
}
.admin-app .stat .stat-spark svg{width:100%;height:100%}
.admin-app .stat .stat-spark path{
  fill:none;
  stroke:var(--card-accent,var(--accent));
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ───── BONUS: Premium gradient card variant ───── */
.admin-app .stat.premium{
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-hover) 100%);
  color:#fff;
  border-color:transparent;
}
.admin-app .stat.premium::before{background:rgba(255,255,255,.2)}
.admin-app .stat.premium .stat-icon{background:rgba(255,255,255,.18);color:#fff}
.admin-app .stat.premium .stat-val{color:#fff}
.admin-app .stat.premium .stat-lbl{color:rgba(255,255,255,.75)}
.admin-app .stat.premium::after{
  background:radial-gradient(circle at top right,rgba(255,255,255,.18) 0%,transparent 70%);
}
.admin-app .stat.premium .stat-trend{
  background:rgba(255,255,255,.18);
  color:#fff;
}
.admin-app .stat.premium .stat-spark path{stroke:#fff}

/* ───── BONUS: Pulse for live indicators ───── */
@keyframes livePulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.6);opacity:0}
}
.admin-app .live-dot{
  position:relative;
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--accent);
}
.admin-app .live-dot::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--accent);
  animation:livePulse 1.8s ease-in-out infinite;
}

/* ───── BONUS: Better focus glow on inputs ───── */
.admin-app .sInp:focus,
.admin-app .mv-sel:focus,
.admin-app input[type="text"]:focus,
.admin-app input[type="email"]:focus,
.admin-app input[type="tel"]:focus,
.admin-app input[type="number"]:focus,
.admin-app input[type="search"]:focus,
.admin-app textarea:focus,
.admin-app select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-glow);
  background:var(--card-bg);
}

/* ───── BONUS: Hover lift for clickable cards ───── */
.admin-app .d-card.clickable{
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.admin-app .d-card.clickable:hover{
  transform:translateY(-2px);
  border-color:var(--card-border-hover);
  box-shadow:var(--card-shadow-hover);
}
.admin-app .d-card.clickable:active{transform:scale(.985)}

/* ───── BONUS: Section headers with underline accent ───── */
.admin-app .section-title{
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.3px;
  color:var(--text);
  margin:0 0 14px;
  display:flex;align-items:center;gap:10px;
}
.admin-app .section-title::before{
  content:"";
  width:4px;height:18px;
  background:linear-gradient(180deg,var(--accent),var(--accent-hover));
  border-radius:var(--r-pill);
}

/* ───── BONUS: Modern pill tags ───── */
.admin-app .pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;
  border-radius:var(--r-pill);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.2px;
  background:var(--card-muted);
  color:var(--text2);
  border:1px solid var(--border);
}
.admin-app .pill.accent{background:var(--accent-light);color:var(--accent);border-color:transparent}
.admin-app .pill.success{background:var(--accent-light);color:var(--accent);border-color:transparent}
.admin-app .pill.danger{background:var(--danger-light);color:var(--danger);border-color:transparent}
.admin-app .pill.warning{background:var(--warning-light);color:var(--warning);border-color:transparent}
.admin-app .pill.info{background:var(--accent2-light);color:var(--accent2);border-color:transparent}

/* ───── BONUS: Field success/error states ───── */
.admin-app .field-wrap{position:relative}
.admin-app .field-wrap.has-success .sInp,
.admin-app .field-wrap.has-success input{
  border-color:var(--accent);
  background:linear-gradient(180deg,var(--accent-light) 0%,transparent 50%);
}
.admin-app .field-wrap.has-error .sInp,
.admin-app .field-wrap.has-error input{
  border-color:var(--danger);
  background:linear-gradient(180deg,var(--danger-light) 0%,transparent 50%);
}
.admin-app .field-msg{
  display:flex;align-items:center;gap:5px;
  font-size:.7rem;font-weight:600;
  margin-top:4px;
}
.admin-app .field-msg.success{color:var(--accent)}
.admin-app .field-msg.error{color:var(--danger)}
.admin-app .field-msg i{width:13px;height:13px}

/* ───── BONUS: Toolbar with subtle bg ───── */
.admin-app .toolbar{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--r-2xl);
  margin-bottom:16px;
  flex-wrap:wrap;
}
.admin-app .toolbar .toolbar-spacer{flex:1}

/* ───── BONUS: Modern chip filter (better than .fpill) ───── */
.admin-app .chips{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:6px;
  background:var(--card-muted);
  border-radius:var(--r-2xl);
  margin-bottom:14px;
  width:fit-content;
}
.admin-app .chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;
  border-radius:var(--r-lg);
  background:transparent;
  color:var(--text2);
  font-size:.76rem;font-weight:700;
  cursor:pointer;
  border:none;
  font-family:var(--font);
  transition:all .15s;
  letter-spacing:-.1px;
}
.admin-app .chip:hover{color:var(--text);background:rgba(0,0,0,.04)}
.admin-app .chip.active{
  background:var(--card-bg);
  color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.04);
}
.admin-app .chip i{width:14px;height:14px}
.admin-app .chip .chip-count{
  padding:1px 6px;
  border-radius:var(--r-pill);
  background:var(--bg);
  color:var(--text3);
  font-size:.6rem;
  font-weight:800;
}
.admin-app .chip.active .chip-count{
  background:var(--accent-light);
  color:var(--accent);
}

/* ───── MOBILE POLISH ───── */
@media(max-width:767px){
  .admin-app .empty{padding:48px 16px}
  .admin-app .empty .eicon{width:56px;height:56px}
  .admin-app .empty .eicon i{width:24px;height:24px}
  .admin-app .empty h2{font-size:.95rem}
  .admin-app .empty p{font-size:.76rem}
  .admin-app .table-wrap{max-height:60vh}
  .admin-app .stat::after{width:80px;height:80px}
}


/* ═══════════════════════════════════════════════════════════════════
   POLISH v2 (2026-07-31) — .admin-app
   Comprehensive micro-interactions:
   A. Form field patterns (prefix/suffix, validation, focus)
   B. Stepper component (booking/progress flows)
   C. Notification badge (dot, count, pulse)
   D. Drag handle (reorder)
   E. Button variants (icon-only, loading, sizes)
   F. Badge variants (solid, outline)
   G. Table cell density (compact/comfortable/striped/hover)
   H. Avatar (initials, sm/lg/xl, group)
   I. Tabs (animated underline)
   J. Inline alert (info/success/warning/error)
   K. Progress bars (linear, circle, shine)
   L. Pagination (numbered with ellipsis)
   M. Filter dropdown (with checkboxes)
   N. Breadcrumbs
   O. Code block (with copy)
   P. KPI variants (icon backgrounds)
   Q. Action menu (dropdown)
   R. Search input variants (with kbd hint)
   S. Inline edit (click to edit)
   T. Animations (fade-up, scale, stagger)
   U. Dark mode contrast refinement
   V. Mobile polish (touch targets, swipe)
   W. Touch ripple effect
   X. Misc refinements (glass, gradient text, depth)
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   JAYABINA — Modern Polish v2 (2026-07-31)
   Specific & refined micro-interactions.
   Append to admin-modern-polish / worker-modern-polish / customer-modern-polish.
   ⛔ ADDITIVE — never override existing rules. Scope: replace PORTAL with .admin-app/.staff-app/.cust-app
   ═══════════════════════════════════════════════════════════════════ */

/* ───── A. FORM FIELD PATTERNS ───── */
/* Field wrapper (icon prefix/suffix, validation) */
.admin-app .field-wrap{position:relative;display:flex;flex-direction:column;gap:5px}
.admin-app .field-wrap label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3)}
.admin-app .field-input{position:relative;display:flex;align-items:center}
.admin-app .field-input input,
.admin-app .field-input textarea,
.admin-app .field-input select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card-muted);color:var(--text);font-family:var(--font);font-size:.82rem;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.admin-app .field-input input:focus,
.admin-app .field-input textarea:focus,
.admin-app .field-input select:focus{border-color:var(--accent);background:var(--card-bg);box-shadow:0 0 0 3px var(--accent-glow)}
.admin-app .field-prefix,
.admin-app .field-suffix{position:absolute;color:var(--text3);font-size:.78rem;font-weight:600;pointer-events:none;display:flex;align-items:center}
.admin-app .field-prefix{left:12px}
.admin-app .field-suffix{right:12px}
.admin-app .field-input.has-prefix input,
.admin-app .field-input.has-prefix select{padding-left:34px}
.admin-app .field-input.has-suffix input,
.admin-app .field-input.has-suffix select{padding-right:34px}
.admin-app .field-input.has-prefix-suffix input,
.admin-app .field-input.has-prefix-suffix select{padding-left:34px;padding-right:34px}
.admin-app .field-icon{width:14px;height:14px}
.admin-app .field-clear{position:absolute;right:8px;width:20px;height:20px;border:none;background:var(--card-muted);color:var(--text3);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.admin-app .field-input:hover .field-clear{opacity:1}
.admin-app .field-clear:hover{background:var(--border);color:var(--text)}
.admin-app .field-helper{font-size:.66rem;color:var(--text3);margin-top:2px;display:flex;align-items:center;gap:4px}
.admin-app .field-helper i{width:11px;height:11px}
.admin-app .field-helper.success{color:var(--accent)}
.admin-app .field-helper.error{color:var(--danger)}

/* Inline validation state on focus/blur */
.admin-app .field-wrap.has-success .field-input input,
.admin-app .field-wrap.has-success .field-input select{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.admin-app .field-wrap.has-error .field-input input,
.admin-app .field-wrap.has-error .field-input select{border-color:var(--danger);box-shadow:0 0 0 3px rgba(229,72,77,.18)}

/* ───── B. STEPPER COMPONENT ───── */
.admin-app .stepper{display:flex;align-items:center;gap:0;padding:6px 0;overflow-x:auto;scrollbar-width:none}
.admin-app .stepper::-webkit-scrollbar{display:none}
.admin-app .stepper-step{display:flex;align-items:center;gap:8px;flex-shrink:0;color:var(--text3);font-size:.76rem;font-weight:600;transition:color .2s}
.admin-app .stepper-step .step-num{width:28px;height:28px;border-radius:50%;background:var(--card-muted);display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:800;flex-shrink:0;transition:all .2s}
.admin-app .stepper-step .step-lbl{white-space:nowrap}
.admin-app .stepper-step.done{color:var(--text2)}
.admin-app .stepper-step.done .step-num{background:var(--accent);color:#fff}
.admin-app .stepper-step.active{color:var(--accent)}
.admin-app .stepper-step.active .step-num{background:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--accent-glow);animation:stepPulse 2s ease-in-out infinite}
@keyframes stepPulse{0%,100%{box-shadow:0 0 0 3px var(--accent-glow)}50%{box-shadow:0 0 0 6px var(--accent-glow)}}
.admin-app .stepper-line{flex:1;height:2px;background:var(--border);min-width:20px;position:relative}
.admin-app .stepper-line.done{background:var(--accent)}

/* ───── C. NOTIFICATION BADGE (dot, count, pulse) ───── */
.admin-app .notif-badge{position:relative;display:inline-flex}
.admin-app .notif-badge .notif-count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--danger);color:#fff;font-size:.62rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--card-bg);font-family:var(--font)}
.admin-app .notif-badge .notif-pulse{position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;background:var(--danger);animation:notifPing 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes notifPing{0%{transform:scale(1);opacity:.8}75%,100%{transform:scale(2.2);opacity:0}}
.admin-app .notif-dot{position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--card-bg)}

/* ───── D. DRAG HANDLE (reorder) ───── */
.admin-app .drag-handle{width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:grab;color:var(--text3);border-radius:var(--r-md);flex-shrink:0;transition:color .15s,background .15s}
.admin-app .drag-handle:hover{color:var(--text);background:var(--card-muted)}
.admin-app .drag-handle:active{cursor:grabbing}
.admin-app .drag-handle i{width:14px;height:14px}
.admin-app .drag-ghost{opacity:.4;background:var(--accent-light);border:2px dashed var(--accent)}
.admin-app .drag-over{border-top:3px solid var(--accent)}

/* ───── E. BUTTON VARIANTS ───── */
/* Icon-only button */
.admin-app .btn-icon{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--card-bg);color:var(--text2);border-radius:var(--r-lg);cursor:pointer;font-family:var(--font);transition:all .15s}
.admin-app .btn-icon:hover{border-color:var(--accent);color:var(--accent);background:var(--card-bg)}
.admin-app .btn-icon i{width:16px;height:16px}
.admin-app .btn-icon.danger:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-light)}
.admin-app .btn-icon.ghost{background:transparent;border-color:transparent}
.admin-app .btn-icon.ghost:hover{background:var(--card-muted);border-color:transparent;color:var(--text)}
/* Loading state */
.admin-app .btn-primary.is-loading,
.admin-app .btn-solid.is-loading,
.admin-app .btn-danger.is-loading{position:relative;color:transparent !important;pointer-events:none}
.admin-app .btn-primary.is-loading::after,
.admin-app .btn-solid.is-loading::after,
.admin-app .btn-danger.is-loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:btnSpin .8s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}
/* Size variants */
.admin-app .btn-xs{padding:5px 10px;font-size:.66rem;border-radius:7px}
.admin-app .btn-sm{padding:8px 14px;font-size:.72rem;border-radius:9px}
.admin-app .btn-lg{padding:14px 28px;font-size:.9rem;border-radius:13px}

/* ───── F. BADGE VARIANTS ───── */
.admin-app .badge-solid{color:#fff !important;background:var(--accent)}
.admin-app .badge-solid.pending_payment{background:var(--warning);color:#fff}
.admin-app .badge-solid.confirmed{background:var(--accent);color:#fff}
.admin-app .badge-solid.completed{background:var(--accent2);color:#fff}
.admin-app .badge-solid.cancelled{background:var(--danger);color:#fff}
.admin-app .badge-outline{background:transparent !important;border:1px solid currentColor}

/* ───── G. TABLE CELL DENSITY ───── */
.admin-app .table-compact thead th,
.admin-app .table-compact tbody td{padding:8px 12px}
.admin-app .table-compact thead th{font-size:.6rem}
.admin-app .table-compact tbody td{font-size:.76rem}
.admin-app .table-comfortable thead th,
.admin-app .table-comfortable tbody td{padding:18px 20px}
.admin-app .table-comfortable thead th{font-size:.7rem}
.admin-app .table-comfortable tbody td{font-size:.85rem}
.admin-app .table-striped tbody tr:nth-child(odd){background:rgba(0,0,0,.015)}
.admin-app .table-hover tbody tr{transition:background .12s,box-shadow .12s}
.admin-app .table-hover tbody tr:hover{box-shadow:inset 3px 0 0 var(--accent)}

/* ───── H. AVATAR (initials fallback) ───── */
.admin-app .avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--accent-light);color:var(--accent);font-weight:800;font-size:.86rem;letter-spacing:-.3px;flex-shrink:0;overflow:hidden;font-family:var(--font)}
.admin-app .avatar img{width:100%;height:100%;object-fit:cover}
.admin-app .avatar.sm{width:28px;height:28px;font-size:.7rem}
.admin-app .avatar.lg{width:56px;height:56px;font-size:1.05rem}
.admin-app .avatar.xl{width:80px;height:80px;font-size:1.4rem}
.admin-app .avatar-group{display:inline-flex}
.admin-app .avatar-group .avatar{border:2px solid var(--card-bg);margin-left:-8px;box-shadow:0 0 0 1px var(--border)}
.admin-app .avatar-group .avatar:first-child{margin-left:0}

/* ───── I. TABS (animated underline) ───── */
.admin-app .tabs{display:flex;gap:2px;background:var(--card-muted);border-radius:var(--r-xl);padding:4px;width:fit-content}
.admin-app .tab{padding:9px 16px;border-radius:9px;background:transparent;color:var(--text2);font-size:.78rem;font-weight:700;cursor:pointer;border:none;font-family:var(--font);transition:all .15s;position:relative}
.admin-app .tab:hover{color:var(--text)}
.admin-app .tab.active{background:var(--card-bg);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.04)}

/* Underline style tabs */
.admin-app .tabs-underline{display:flex;gap:0;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.admin-app .tabs-underline::-webkit-scrollbar{display:none}
.admin-app .tabs-underline .tab{padding:12px 18px;border-radius:0;background:transparent;color:var(--text3);position:relative}
.admin-app .tabs-underline .tab::after{content:"";position:absolute;bottom:-1px;left:50%;right:50%;height:2px;background:var(--accent);border-radius:var(--r-xs);transition:left .25s cubic-bezier(.4,0,.2,1),right .25s cubic-bezier(.4,0,.2,1)}
.admin-app .tabs-underline .tab.active{color:var(--accent);box-shadow:none;background:transparent}
.admin-app .tabs-underline .tab.active::after{left:0;right:0}

/* ───── J. INLINE ALERT ───── */
.admin-app .alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-xl);border:1px solid;font-size:.78rem;line-height:1.45}
.admin-app .alert i{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.admin-app .alert-info{background:var(--accent2-light);border-color:transparent;color:var(--accent2)}
.admin-app .alert-info i{color:var(--accent2)}
.admin-app .alert-success{background:var(--accent-light);border-color:transparent;color:var(--accent)}
.admin-app .alert-success i{color:var(--accent)}
.admin-app .alert-warning{background:var(--warning-light);border-color:transparent;color:var(--warning)}
.admin-app .alert-warning i{color:var(--warning)}
.admin-app .alert-error{background:var(--danger-light);border-color:transparent;color:var(--danger)}
.admin-app .alert-error i{color:var(--danger)}
.admin-app .alert-title{font-weight:700;margin-bottom:2px}
.admin-app .alert-close{margin-left:auto;background:transparent;border:none;color:inherit;cursor:pointer;padding:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;opacity:.6;border-radius:var(--r-sm);flex-shrink:0}
.admin-app .alert-close:hover{opacity:1;background:rgba(0,0,0,.06)}

/* ───── K. PROGRESS BARS ───── */
.admin-app .progress{height:8px;background:var(--card-muted);border-radius:var(--r-pill);overflow:hidden;position:relative}
.admin-app .progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:var(--r-pill);transition:width .5s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.admin-app .progress-fill::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:progressShine 1.5s linear infinite}
@keyframes progressShine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.admin-app .progress-thick{height:14px}
.admin-app .progress-label{display:flex;justify-content:space-between;margin-bottom:6px;font-size:.72rem;color:var(--text2);font-weight:600}
.admin-app .progress-circle{width:48px;height:48px;position:relative;display:inline-flex;align-items:center;justify-content:center}
.admin-app .progress-circle svg{transform:rotate(-90deg)}
.admin-app .progress-circle circle{fill:none;stroke-width:4}
.admin-app .progress-circle .bg{stroke:var(--card-muted)}
.admin-app .progress-circle .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1)}
.admin-app .progress-circle .val{position:absolute;font-size:.7rem;font-weight:800;color:var(--text);letter-spacing:-.3px}

/* ───── L. PAGINATION ───── */
.admin-app .pagination{display:flex;align-items:center;gap:4px;justify-content:center;padding:14px 0}
.admin-app .pag-btn{min-width:34px;height:34px;padding:0 10px;border:1px solid var(--border);background:var(--card-bg);color:var(--text2);border-radius:var(--r-base);cursor:pointer;font-family:var(--font);font-size:.78rem;font-weight:600;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.admin-app .pag-btn:hover{border-color:var(--accent);color:var(--accent)}
.admin-app .pag-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.admin-app .pag-btn:disabled{opacity:.4;cursor:not-allowed}
.admin-app .pag-btn i{width:14px;height:14px}
.admin-app .pag-ellipsis{padding:0 8px;color:var(--text3)}

/* ───── M. FILTER DROPDOWN (with checkboxes) ───── */
.admin-app .filter-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-xl);box-shadow:0 12px 32px rgba(5,46,34,.12);z-index:50;padding:6px;min-width:200px;animation:menuFadeIn .15s ease}
@keyframes menuFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.admin-app .filter-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-base);cursor:pointer;font-size:.78rem;color:var(--text);font-weight:500;transition:background .12s}
.admin-app .filter-item:hover{background:var(--card-muted)}
.admin-app .filter-item input[type="checkbox"]{width:14px;height:14px;accent-color:var(--accent);flex-shrink:0;margin:0}
.admin-app .filter-item .count{margin-left:auto;color:var(--text3);font-size:.7rem;background:var(--card-muted);padding:1px 6px;border-radius:var(--r-pill)}

/* ───── N. BREADCRUMBS ───── */
.admin-app .breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.78rem;color:var(--text3);padding:8px 0}
.admin-app .breadcrumb a{color:var(--text3);text-decoration:none;transition:color .15s}
.admin-app .breadcrumb a:hover{color:var(--accent)}
.admin-app .breadcrumb .sep{color:var(--text3);opacity:.5;user-select:none}
.admin-app .breadcrumb .current{color:var(--text);font-weight:600}

/* ───── O. CODE BLOCK (with copy) ───── */
.admin-app .code-block{position:relative;background:var(--card-muted);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;font-family:monospace;font-size:.78rem;color:var(--text);overflow-x:auto;margin:0}
.admin-app .code-block .copy-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;background:var(--card-bg);border:1px solid var(--border);color:var(--text3);border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.admin-app .code-block .copy-btn:hover{color:var(--accent);border-color:var(--accent)}
.admin-app .code-block .copy-btn i{width:13px;height:13px}
.admin-app .code-block .copy-btn.copied{color:var(--accent);border-color:var(--accent);background:var(--accent-light)}

/* ───── P. KPI VARIANTS ───── */
.admin-app .kpi-icon-bg{width:48px;height:48px;border-radius:var(--r-2xl);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--accent-light);color:var(--accent)}
.admin-app .kpi-icon-bg i{width:22px;height:22px}
.admin-app .kpi-icon-bg.blue{background:var(--accent2-light);color:var(--accent2)}
.admin-app .kpi-icon-bg.green{background:var(--accent-light);color:var(--accent)}
.admin-app .kpi-icon-bg.amber{background:var(--warning-light);color:var(--warning)}
.admin-app .kpi-icon-bg.red{background:var(--danger-light);color:var(--danger)}
.admin-app .kpi-icon-bg.purple{background:#f3e8ff;color:#9333ea}
.admin-app .kpi-icon-bg.cyan{background:#cffafe;color:#0891b2}

/* ───── Q. ACTION MENU (dropdown from button) ───── */
.admin-app .action-menu{position:absolute;top:calc(100% + 4px);right:0;min-width:200px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-xl);box-shadow:0 12px 32px rgba(5,46,34,.16);z-index:50;padding:6px;animation:menuFadeIn .15s ease}
.admin-app .action-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:none;background:transparent;color:var(--text);font-size:.78rem;font-weight:500;border-radius:var(--r-base);cursor:pointer;text-align:left;font-family:var(--font);transition:background .12s}
.admin-app .action-menu-item:hover{background:var(--card-muted)}
.admin-app .action-menu-item i{width:15px;height:15px;color:var(--text3)}
.admin-app .action-menu-item.danger{color:var(--danger)}
.admin-app .action-menu-item.danger i{color:var(--danger)}
.admin-app .action-menu-item.danger:hover{background:var(--danger-light)}
.admin-app .action-menu-divider{height:1px;background:var(--border);margin:4px 0}

/* ───── R. SEARCH INPUT VARIANTS ───── */
.admin-app .search-box{position:relative;display:flex;align-items:center}
.admin-app .search-box i.search-icon{position:absolute;left:12px;width:15px;height:15px;color:var(--text3);pointer-events:none}
.admin-app .search-box input{padding:10px 14px 10px 36px;border:1px solid var(--border);border-radius:11px;background:var(--card-muted);color:var(--text);font-family:var(--font);font-size:.82rem;width:100%;outline:none;transition:all .15s}
.admin-app .search-box input:focus{border-color:var(--accent);background:var(--card-bg);box-shadow:0 0 0 3px var(--accent-glow)}
.admin-app .search-box .kbd{position:absolute;right:10px;font-size:.62rem;color:var(--text3);background:var(--card-bg);border:1px solid var(--border);border-radius:5px;padding:1px 6px;font-family:var(--font);font-weight:600}
.admin-app .search-box.has-kbd input{padding-right:60px}
.admin-app .search-loading{position:absolute;right:12px;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:btnSpin .8s linear infinite}

/* ───── S. INLINE EDIT (click to edit) ───── */
.admin-app .inline-edit{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--r-md);cursor:pointer;transition:background .15s}
.admin-app .inline-edit:hover{background:var(--card-muted)}
.admin-app .inline-edit i{width:12px;height:12px;color:var(--text3);opacity:0;transition:opacity .15s}
.admin-app .inline-edit:hover i{opacity:1}
.admin-app .inline-edit input{border:none;background:transparent;font:inherit;color:inherit;outline:none;padding:0;width:auto}

/* ───── T. ANIMATIONS: ENTRANCE & STAGGER ───── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.admin-app .anim-fade-up{animation:fadeUp .35s cubic-bezier(.16,1,.3,1) both}
.admin-app .anim-fade{animation:simpleFade .25s ease both}
@keyframes simpleFade{from{opacity:0}to{opacity:1}}
.admin-app .anim-scale-in{animation:scaleIn .25s cubic-bezier(.16,1,.3,1) both}
@keyframes scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
/* Stagger — apply via inline style="--anim-delay: 100ms" */
.admin-app .anim-stagger{animation:fadeUp .4s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--anim-delay,0ms)}

/* ───── U. DARK MODE CONTRAST REFINEMENT ───── */
html.dark .admin-app .alert-info{background:rgba(91,157,255,.12);color:#a4c8ff}
html.dark .admin-app .alert-success{background:rgba(34,197,94,.12);color:#86efac}
html.dark .admin-app .alert-warning{background:rgba(240,180,41,.12);color:#fcd34d}
html.dark .admin-app .alert-error{background:rgba(240,89,94,.12);color:#fca5a5}
html.dark .admin-app .progress{background:rgba(255,255,255,.06)}
html.dark .admin-app .toast{box-shadow:0 12px 40px rgba(0,0,0,.4),0 0 0 1px var(--card-border)}
html.dark .admin-app .stat .stat-trend.flat{background:rgba(255,255,255,.06);color:var(--text3)}
html.dark .admin-app .chip:hover{background:rgba(255,255,255,.04)}
html.dark .admin-app .filter-item:hover{background:rgba(255,255,255,.04)}

/* ───── V. MOBILE-SPECIFIC POLISH ───── */
@media(max-width:767px){
  .admin-app .btn-icon{width:42px;height:42px} /* Larger touch target */
  .admin-app .btn-icon i{width:18px;height:18px}
  .admin-app .field-input input,
  .admin-app .field-input select{padding:12px;font-size:.88rem} /* Larger input on mobile */
  .admin-app .pag-btn{min-width:40px;height:40px;font-size:.86rem} /* Larger pag buttons */
  .admin-app .tab{padding:11px 14px;font-size:.82rem} /* Larger tabs */
  .admin-app .tabs{padding:3px}
  .admin-app .alert{padding:14px;font-size:.82rem}
  .admin-app .stepper-step .step-num{width:32px;height:32px;font-size:.82rem}
  .admin-app .stepper-step .step-lbl{font-size:.7rem}
  .admin-app .avatar{width:44px;height:44px;font-size:.92rem}
  .admin-app .kpi-icon-bg{width:52px;height:52px}
  .admin-app .kpi-icon-bg i{width:24px;height:24px}
  /* Swipe-friendly horizontal scroll */
  .admin-app .horizontal-scroll{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .admin-app .horizontal-scroll::-webkit-scrollbar{display:none}
  /* Bottom safe-area for tab bars on phones with notches */
  .admin-app .tabbar-bottom{padding-bottom:calc(env(safe-area-inset-bottom) + 8px) !important}
}

/* ───── W. TOUCH RIPPLE (lightweight) ───── */
.admin-app .touch-ripple{position:relative;overflow:hidden}
.admin-app .touch-ripple::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,currentColor 1%,transparent 50%);opacity:0;transform:scale(0);transition:transform .5s,opacity .6s;pointer-events:none}
.admin-app .touch-ripple:active::after{opacity:.15;transform:scale(1.5);transition:transform 0s,opacity 0s}

/* ───── X. MISC UI REFINEMENTS ───── */
/* Subtle dotted divider */
.admin-app .divider-dotted{border:none;border-top:1px dashed var(--border);margin:14px 0}
/* Truncate multi-line */
.admin-app .truncate-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.admin-app .truncate-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Hover lift on cards */
.admin-app .hover-lift{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.admin-app .hover-lift:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-hover);border-color:var(--card-border-hover)}
.admin-app .hover-lift:active{transform:translateY(-1px) scale(.99)}
/* Subtle inner shadow on cards (depth) */
.admin-app .card-depth{box-shadow:var(--card-shadow),inset 0 1px 0 rgba(255,255,255,.4)}
html.dark .admin-app .card-depth{box-shadow:var(--card-shadow),inset 0 1px 0 rgba(255,255,255,.04)}
/* Focus glow ring for accessibility */
.admin-app *:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-md)}
/* Better disabled state */
.admin-app [disabled],
.admin-app .disabled{opacity:.5;cursor:not-allowed !important;pointer-events:none}
/* Glass effect (subtle) */
.admin-app .glass{background:rgba(255,255,255,.7);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.4)}
html.dark .admin-app .glass{background:rgba(15,25,18,.7);border-color:rgba(255,255,255,.08)}
/* Gradient text */
.admin-app .text-gradient{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* Number counter (large) */
.admin-app .num-counter{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}


/* ───── Y. CONFIRM MODAL (helper-driven) ───── */
.admin-app .modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(10px) saturate(180%);
  -webkit-backdrop-filter:blur(10px) saturate(180%);
  z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:mdFadeIn .2s ease;
}
.admin-app .modal-overlay.closing{animation:mdFadeOut .2s ease forwards}
.admin-app .modal-card{
  background:var(--card-bg);
  border-radius:var(--r-4xl);
  padding:28px 24px 22px;
  max-width:380px;width:100%;
  box-shadow:0 24px 60px rgba(5,46,34,.25),0 0 0 1px var(--card-border);
  animation:mdSpring .35s cubic-bezier(.34,1.56,.64,1);
  position:relative;
}
.admin-app .modal-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.5;
}
.admin-app .confirm-icon{
  width:52px;height:52px;
  border-radius:var(--r-2xl);
  background:var(--accent-light);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
}
.admin-app .confirm-icon i{width:24px;height:24px}
.admin-app .confirm-title{
  font-size:1rem;font-weight:700;margin:0 0 6px;
  text-align:center;color:var(--text);
}
.admin-app .confirm-msg{
  font-size:.85rem;color:var(--text2);
  margin:0 0 18px;text-align:center;line-height:1.5;
}
.admin-app .confirm-acts{
  display:flex;gap:10px;justify-content:flex-end;
}
.admin-app .confirm-acts button{
  padding:10px 18px;border-radius:var(--r-lg);
  font-size:.82rem;font-weight:600;
  cursor:pointer;border:none;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  font-family:var(--font);
}
.admin-app .confirm-acts .btn-ghost{
  background:transparent;color:var(--text2);
  border:1px solid var(--border);
}
.admin-app .confirm-acts .btn-ghost:hover{background:var(--card-muted);color:var(--text)}
.admin-app .confirm-acts .btn-primary{
  background:var(--accent);color:#fff;
}
.admin-app .confirm-acts .btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 16px rgba(5,46,34,.18)}
.admin-app .confirm-acts .btn-primary:active{transform:translateY(0)}
@keyframes mdFadeIn{from{opacity:0}to{opacity:1}}
@keyframes mdFadeOut{from{opacity:1}to{opacity:0}}

/* ───── Z. TOAST VARIANTS + BUTTON LOADING ───── */
.admin-app .toast-success{border-left-color:#16a34a}
.admin-app .toast-success i{color:#16a34a}
.admin-app .toast-warning{border-left-color:#f59e0b}
.admin-app .toast-warning i{color:#f59e0b}
.admin-app .toast-error{border-left-color:#ef4444}
.admin-app .toast-error i{color:#ef4444}
.admin-app .toast-close{
  background:transparent;border:none;cursor:pointer;
  color:var(--text3);padding:4px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  margin-left:auto;
  transition:background .12s ease,color .12s ease;
}
.admin-app .toast-close:hover{background:var(--card-muted);color:var(--text)}
.admin-app .toast-close i{width:14px;height:14px}

/* Button loading state */
.admin-app .btn-primary.is-loading,
.admin-app .btn-ghost.is-loading,
.admin-app .btn-icon.is-loading,
.admin-app button.is-loading{
  position:relative;color:transparent !important;pointer-events:none;
}
.admin-app button.is-loading::after{
  content:"";position:absolute;
  top:50%;left:50%;
  width:14px;height:14px;
  margin:-7px 0 0 -7px;
  border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;
  animation:btnSpin .7s linear infinite;
  color:var(--accent);
}
.admin-app .btn-primary.is-loading::after{color:#fff}
@keyframes btnSpin{to{transform:rotate(360deg)}}


/* ───── AA. LOGIN PAGE ENHANCEMENT (visible immediately on every page load) ───── */
/* Fade-in entrance for login box */
@keyframes loginFadeIn{
  0%{opacity:0;transform:translateY(20px) scale(.96)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.admin-app .login-box{
  animation:loginFadeIn .6s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay:.1s;
}
/* Add depth to the login card */
.admin-app .login-box{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  box-shadow:0 24px 60px rgba(5,46,34,.18),0 0 0 1px var(--card-border);
  padding:36px 32px 28px !important;
  border-radius:24px !important;
}
/* Subtle pulsing glow on the login avatar */
@keyframes avatarGlow{
  0%,100%{box-shadow:0 0 0 0 var(--accent-glow,rgba(34,197,94,.4))}
  50%{box-shadow:0 0 0 12px transparent}
}
.admin-app .login-avatar{
  animation:avatarGlow 2.4s ease-in-out infinite;
  position:relative;
}
/* Modern input styling for login */
.admin-app .login-box input{
  transition:border-color .2s ease,box-shadow .2s ease,transform .15s ease;
  border-radius:var(--r-2xl) !important;
  font-size:.85rem !important;
}
.admin-app .login-box input:hover{
  border-color:var(--accent) !important;
}
.admin-app .login-box input:focus{
  transform:translateY(-1px);
}
/* Modern button styling for login */
.admin-app .login-box button{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-2xl) !important;
  font-size:.88rem !important;
  font-weight:700 !important;
  letter-spacing:.2px;
  transition:transform .15s ease,box-shadow .2s ease,filter .15s ease;
  box-shadow:0 6px 20px rgba(5,46,34,.25);
}
.admin-app .login-box button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(5,46,34,.32);
  filter:brightness(1.05);
}
.admin-app .login-box button:active{
  transform:translateY(0) scale(.98);
  box-shadow:0 4px 12px rgba(5,46,34,.2);
}
/* Subtle background pattern (very faint dots) */
.admin-app .login::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle at 1px 1px,var(--border) 1px,transparent 0);
  background-size:32px 32px;
  opacity:.35;
  pointer-events:none;
  z-index:-1;
}
/* Larger, more prominent Sign in button label spacing */
.admin-app .login-box button{
  margin-top:6px !important;
}
/* Stagger the inner elements */
.admin-app .login-avatar{animation-delay:.2s}
.admin-app .login-box h2{animation:loginFadeIn .5s .3s backwards}
.admin-app .login-box .sub{animation:loginFadeIn .5s .4s backwards}
.admin-app .login-box input:nth-of-type(1){animation:loginFadeIn .5s .5s backwards}
.admin-app .login-box input:nth-of-type(2){animation:loginFadeIn .5s .6s backwards}
.admin-app .login-box button{animation:loginFadeIn .5s .7s backwards}
.admin-app .login-note{animation:loginFadeIn .5s .8s backwards}
.admin-app .login-box > *{
  animation-fill-mode:backwards;
}


/* ───── BB. STAT CARDS + KPI VARIANTS (Phase 3A) ───── */
/* Trend indicators on stat cards */
.admin-app .stat-trend{
  display:inline-flex;align-items:center;gap:3px;
  margin-top:6px;padding:3px 8px;
  border-radius:var(--r-base);font-size:.62rem;font-weight:800;
  background:var(--accent-light);color:var(--accent);
  letter-spacing:.3px;
}
.admin-app .stat-trend i{width:11px;height:11px}
.admin-app .stat-trend.down{background:var(--danger-light);color:var(--danger)}
.admin-app .stat-trend.flat{background:var(--card-muted);color:var(--text3)}
/* Sparkline inside stat card */
.admin-app .stat-spark{
  position:absolute;bottom:0;left:0;right:0;
  height:30px;opacity:.4;pointer-events:none;
}
.admin-app .stat-spark svg{width:100%;height:100%;display:block}
.admin-app .stat-spark path{fill:none;stroke:var(--card-accent,var(--accent));stroke-width:1.5}
/* Colored icon backgrounds for KPI */
.admin-app .kpi-icon-bg{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:var(--r-2xl);flex-shrink:0;
}
.admin-app .kpi-icon-bg i{width:22px;height:22px}
.admin-app .kpi-icon-bg.blue{background:#dbeafe;color:#1d4ed8}
.admin-app .kpi-icon-bg.green{background:#dcfce7;color:#15803d}
.admin-app .kpi-icon-bg.amber{background:#fef3c7;color:#b45309}
.admin-app .kpi-icon-bg.red{background:#fee2e2;color:#b91c1c}
.admin-app .kpi-icon-bg.purple{background:#ede9fe;color:#6d28d9}
.admin-app .kpi-icon-bg.cyan{background:#cffafe;color:#0e7490}
html.dark .admin-app .kpi-icon-bg.blue{background:rgba(29,78,216,.2);color:#93c5fd}
html.dark .admin-app .kpi-icon-bg.green{background:rgba(21,128,61,.2);color:#86efac}
html.dark .admin-app .kpi-icon-bg.amber{background:rgba(180,83,9,.2);color:#fcd34d}
html.dark .admin-app .kpi-icon-bg.red{background:rgba(185,28,28,.2);color:#fca5a5}
html.dark .admin-app .kpi-icon-bg.purple{background:rgba(109,40,217,.2);color:#c4b5fd}
html.dark .admin-app .kpi-icon-bg.cyan{background:rgba(14,116,144,.2);color:#67e8f9}
/* Premium gradient stat card */
.admin-app .stat.premium{
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-hover,#15803d) 100%);
  color:#fff;
}
.admin-app .stat.premium .stat-icon{background:rgba(255,255,255,.18);color:#fff}
.admin-app .stat.premium .stat-val{color:#fff}
.admin-app .stat.premium .stat-lbl{color:rgba(255,255,255,.75)}

/* ───── CC. MODAL STEPPER + TABS ANIMATED + BREADCRUMB (Phase 3B) ───── */
/* Modal stepper (booking workflow stages) - VERTICAL LAYOUT */
.admin-app .stepper{
  display:flex;flex-direction:column;gap:0;margin:16px 0 20px;
  padding:14px;background:var(--card-muted);
  border-radius:var(--r-2xl);
}
.admin-app .stepper-step{
  display:flex;align-items:center;gap:12px;
  padding:8px 0;position:relative;
}
.admin-app .stepper-step:not(:last-child)::after{
  content:"";position:absolute;left:13px;top:44px;bottom:-8px;
  width:2px;background:var(--border);
}
.admin-app .stepper-step.done:not(:last-child)::after{background:var(--accent)}
.admin-app .step-num{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--card-bg);border:2px solid var(--border);
  color:var(--text3);font-weight:800;font-size:.7rem;
  flex-shrink:0;transition:all .25s ease;
}
.admin-app .stepper-step.active .step-num{
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-glow,rgba(34,197,94,.15));
  animation:stepPulse 1.6s ease-in-out infinite;
}
.admin-app .stepper-step.done .step-num{
  background:var(--accent);color:#fff;border-color:var(--accent);
}
.admin-app .stepper-step.done .step-num::before{
  content:"\2713";
}
.admin-app .stepper-step.done .step-num{font-size:0}
.admin-app .stepper-step.done .step-num::before{font-size:.85rem}
.admin-app .step-label{
  font-size:.76rem;font-weight:700;color:var(--text3);
}
.admin-app .stepper-step.active .step-label{color:var(--text)}
.admin-app .stepper-step.done .step-label{color:var(--accent)}
@keyframes stepPulse{
  0%,100%{box-shadow:0 0 0 4px var(--accent-glow,rgba(34,197,94,.15))}
  50%{box-shadow:0 0 0 8px transparent}
}

/* ───── VERTICAL WORKFLOW STEPPER (9-STEP) ───── */
.admin-app .awf-vertical{display:flex;flex-direction:column;gap:0;margin:12px 0 16px;padding:12px;background:var(--card-muted);border-radius:var(--r-2xl)}
.admin-app .awf-row{display:flex;align-items:flex-start;gap:12px;padding:6px 0;position:relative}
.admin-app .awf-node{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:28px}
.admin-app .awf-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:#fff;border:2px solid;border-collapse:collapse;box-sizing:border-box}
.admin-app .awf-line{width:2px;min-height:24px;flex:1;margin:2px 0;background:var(--border-strong)}
.admin-app .awf-row.done .awf-dot{background:#10b981;border-color:#10b981}
.admin-app .awf-row.active .awf-dot{animation:awfPulse 2s ease-in-out infinite}
@keyframes awfPulse{0%,100%{box-shadow:0 0 0 3px var(--accent-glow,rgba(34,197,94,.15))}50%{box-shadow:0 0 0 6px transparent}}
.admin-app .awf-content{flex:1;min-width:0;padding-top:4px}
.admin-app .awf-title{font-size:.76rem;font-weight:700;color:var(--text)}
.admin-app .awf-row.done .awf-title{color:var(--text2)}
.admin-app .awf-desc{font-size:.68rem;color:var(--text3);margin-top:2px;line-height:1.4}

/* Animated tabs */
.admin-app .tabs{
  display:flex;gap:0;border-bottom:1px solid var(--border);
  margin-bottom:18px;overflow-x:auto;
  scrollbar-width:none;
}
.admin-app .tabs::-webkit-scrollbar{display:none}
.admin-app .tab{
  padding:10px 16px;font-size:.78rem;font-weight:600;
  color:var(--text3);background:none;border:none;
  cursor:pointer;position:relative;white-space:nowrap;
  transition:color .2s ease;
}
.admin-app .tab:hover{color:var(--text)}
.admin-app .tab.active{color:var(--accent)}
.admin-app .tab::after{
  content:"";position:absolute;left:16px;right:16px;bottom:-1px;
  height:2px;background:var(--accent);
  border-radius:var(--r-xs) 2px 0 0;
  transform:scaleX(0);transform-origin:center;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.admin-app .tab.active::after{transform:scaleX(1)}

/* Breadcrumbs */
.admin-app .breadcrumb{
  display:flex;align-items:center;gap:6px;
  font-size:.72rem;color:var(--text3);margin-bottom:14px;
}
.admin-app .breadcrumb .crumb{
  color:var(--text2);text-decoration:none;
  transition:color .15s ease;
}
.admin-app .breadcrumb .crumb:hover{color:var(--accent)}
.admin-app .breadcrumb .sep{
  width:14px;height:14px;color:var(--text3);
}
.admin-app .breadcrumb .current{color:var(--text);font-weight:600}

/* ───── DD. ACTION MENU + NOTIF BADGE + FILTER MENU (Phase 3B/C) ───── */
/* Action menu (3-dot dropdown) */
.admin-app .action-menu{
  position:absolute;background:var(--card-bg);
  border:1px solid var(--card-border);border-radius:var(--r-xl);
  box-shadow:0 12px 36px rgba(5,46,34,.18),0 0 0 1px var(--card-border);
  min-width:180px;padding:6px;z-index:100;
  display:none;
  animation:menuSpring .2s cubic-bezier(.16,1,.3,1);
}
.admin-app .action-menu.show{display:block}
.admin-app .action-menu-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:var(--r-base);
  font-size:.78rem;font-weight:500;color:var(--text);
  cursor:pointer;transition:background .12s ease;
  width:100%;background:none;border:none;text-align:left;
  font-family:var(--font);
}
.admin-app .action-menu-item:hover{background:var(--card-muted)}
.admin-app .action-menu-item i{width:14px;height:14px;color:var(--text3)}
.admin-app .action-menu-item.danger{color:var(--danger)}
.admin-app .action-menu-item.danger i{color:var(--danger)}
.admin-app .action-menu-divider{
  height:1px;background:var(--border);margin:4px 0;
}
@keyframes menuSpring{
  0%{opacity:0;transform:translateY(-8px) scale(.96)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* Notification badge */
.admin-app .notif-badge{
  position:relative;display:inline-flex;
}
.admin-app .notif-badge .notif-count{
  position:absolute;top:-4px;right:-4px;
  min-width:16px;height:16px;padding:0 4px;
  background:var(--danger);color:#fff;
  border-radius:var(--r-base);font-size:.58rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--card-bg);
}
.admin-app .notif-badge .notif-dot{
  position:absolute;top:0;right:0;
  width:8px;height:8px;background:var(--danger);
  border-radius:50%;border:2px solid var(--card-bg);
  animation:notifPing 1.6s ease-in-out infinite;
}
@keyframes notifPing{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.3);opacity:.7}
}

/* Filter menu (checkbox dropdown) */
.admin-app .filter-menu{
  position:absolute;background:var(--card-bg);
  border:1px solid var(--card-border);border-radius:var(--r-xl);
  box-shadow:0 12px 36px rgba(5,46,34,.18);
  min-width:200px;padding:6px;z-index:100;
  display:none;
  animation:menuSpring .2s cubic-bezier(.16,1,.3,1);
}
.admin-app .filter-menu.show{display:block}
.admin-app .filter-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:var(--r-base);
  font-size:.78rem;cursor:pointer;
  transition:background .12s ease;
}
.admin-app .filter-item:hover{background:var(--card-muted)}
.admin-app .filter-item input[type=checkbox]{
  width:14px;height:14px;accent-color:var(--accent);
}
.admin-app .filter-item .filter-count{
  margin-left:auto;font-size:.65rem;color:var(--text3);
  background:var(--card-muted);padding:1px 6px;border-radius:var(--r-md);
}

/* ───── EE. PAGINATION + PROGRESS + DRAG HANDLE (Phase 3C) ───── */
/* Numbered pagination */
.admin-app .pagination{
  display:flex;align-items:center;gap:4px;justify-content:center;
  margin:16px 0;
}
.admin-app .pag-btn{
  min-width:32px;height:32px;padding:0 8px;
  background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--r-base);font-size:.75rem;font-weight:600;
  color:var(--text2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s ease;font-family:var(--font);
}
.admin-app .pag-btn:hover:not(:disabled){
  background:var(--card-muted);border-color:var(--accent);color:var(--text);
}
.admin-app .pag-btn.active{
  background:var(--accent);color:#fff;border-color:var(--accent);
}
.admin-app .pag-btn:disabled{opacity:.4;cursor:not-allowed}
.admin-app .pag-ellipsis{
  width:24px;height:32px;display:flex;align-items:center;justify-content:center;
  color:var(--text3);
}

/* Progress bar */
.admin-app .progress{
  width:100%;height:6px;background:var(--card-muted);
  border-radius:3px;overflow:hidden;position:relative;
}
.admin-app .progress-fill{
  height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover,#15803d));
  border-radius:3px;transition:width .4s cubic-bezier(.16,1,.3,1);
  position:relative;
}
.admin-app .progress-fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:progressShine 1.6s ease-in-out infinite;
}
.admin-app .progress.thick{height:10px;border-radius:5px}
.admin-app .progress-label{
  display:flex;justify-content:space-between;
  font-size:.7rem;color:var(--text3);margin-bottom:6px;font-weight:600;
}
@keyframes progressShine{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

/* Drag handle */
.admin-app .drag-handle{
  cursor:grab;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;color:var(--text3);
  transition:color .15s ease;
}
.admin-app .drag-handle:hover{color:var(--text)}
.admin-app .drag-handle:active{cursor:grabbing}
.admin-app .drag-handle::before{
  content:"\2630";font-size:1rem;line-height:1;
  letter-spacing:-2px;
}
.admin-app .drag-ghost{opacity:.4;background:var(--accent-light)}
.admin-app .drag-over{
  box-shadow:inset 0 3px 0 var(--accent);
  background:var(--accent-light);
}

/* Badge variants */
.admin-app .badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:var(--r-base);
  font-size:.62rem;font-weight:800;
  letter-spacing:.3px;text-transform:uppercase;
}
.admin-app .badge-solid{background:var(--accent);color:#fff}
.admin-app .badge-outline{
  background:transparent;border:1.5px solid currentColor;
  color:var(--accent);
}
.admin-app .badge.success{background:var(--accent);color:#fff}
.admin-app .badge.warning{background:#f59e0b;color:#fff}
.admin-app .badge.danger{background:var(--danger);color:#fff}
.admin-app .badge.info{background:#3b82f6;color:#fff}

/* Inline edit (click-to-edit) */
.admin-app .inline-edit{
  cursor:text;padding:2px 6px;border-radius:var(--r-sm);
  border:1px dashed transparent;transition:all .15s ease;
}
.admin-app .inline-edit:hover{border-color:var(--border);background:var(--card-muted)}
.admin-app .inline-edit:focus{
  outline:none;border-color:var(--accent);background:var(--card-bg);
  border-style:solid;
}


/* ───── FF. KPI CARD VARIANTS (used by customer detail + showDashboard cards) ───── */
.admin-app .kpi{
  display:flex;align-items:center;gap:12px;
  padding:14px;border-radius:var(--r-2xl);
  background:var(--card-bg);border:1px solid var(--card-border);
  transition:transform .2s ease,box-shadow .2s ease;
}
.admin-app .kpi:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(5,46,34,.12)}
.admin-app .kpi-ic{
  width:42px;height:42px;border-radius:var(--r-xl);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.admin-app .kpi-ic i{width:20px;height:20px}
.admin-app .kpi.green{background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(34,197,94,.02))}
.admin-app .kpi.green .kpi-ic{background:#dcfce7;color:#15803d}
.admin-app .kpi.blue{background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(59,130,246,.02))}
.admin-app .kpi.blue .kpi-ic{background:#dbeafe;color:#1d4ed8}
.admin-app .kpi.amber{background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.02))}
.admin-app .kpi.amber .kpi-ic{background:#fef3c7;color:#b45309}
.admin-app .kpi.red{background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(239,68,68,.02))}
.admin-app .kpi.red .kpi-ic{background:#fee2e2;color:#b91c1c}
.admin-app .kpi.purple{background:linear-gradient(135deg,rgba(168,85,247,.08),rgba(168,85,247,.02))}
.admin-app .kpi.purple .kpi-ic{background:#ede9fe;color:#6d28d9}
.admin-app .kpi.cyan{background:linear-gradient(135deg,rgba(6,182,212,.08),rgba(6,182,212,.02))}
.admin-app .kpi.cyan .kpi-ic{background:#cffafe;color:#0e7490}
html.dark .admin-app .kpi.green{background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(34,197,94,.05))}
html.dark .admin-app .kpi.green .kpi-ic{background:rgba(21,128,61,.3);color:#86efac}
html.dark .admin-app .kpi.blue{background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(59,130,246,.05))}
html.dark .admin-app .kpi.blue .kpi-ic{background:rgba(29,78,216,.3);color:#93c5fd}
html.dark .admin-app .kpi.amber{background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(245,158,11,.05))}
html.dark .admin-app .kpi.amber .kpi-ic{background:rgba(180,83,9,.3);color:#fcd34d}
html.dark .admin-app .kpi.red{background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(239,68,68,.05))}
html.dark .admin-app .kpi.red .kpi-ic{background:rgba(185,28,28,.3);color:#fca5a5}
html-app .kpi-v{
  font-size:1.3rem;font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums;line-height:1;
}
.admin-app .kpi-l{
  font-size:.66rem;color:var(--text3);font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;margin-top:2px;
}
.admin-app .kpi > div:last-child{display:flex;flex-direction:column;min-width:0;flex:1}

/* DARK MODE specific overrides for .kpi-ic colors */
html.dark .admin-app .kpi.purple{background:linear-gradient(135deg,rgba(168,85,247,.15),rgba(168,85,247,.05))}
html.dark .admin-app .kpi.purple .kpi-ic{background:rgba(109,40,217,.3);color:#c4b5fd}
html.dark .admin-app .kpi.cyan{background:linear-gradient(135deg,rgba(6,182,212,.15),rgba(6,182,212,.05))}
html.dark .admin-app .kpi.cyan .kpi-ic{background:rgba(14,116,144,.3);color:#67e8f9}

/* ───── GG. CLOUD STATUS CHIP (more prominent) ───── */
.admin-app .cloud-status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.65rem;font-weight:700;
  padding:4px 10px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(34,197,94,.05));
  color:#16a34a;border:1px solid rgba(34,197,94,.2);
  letter-spacing:.4px;
}
.admin-app .cloud-status::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#16a34a;box-shadow:0 0 0 2px rgba(34,197,94,.3);
  animation:livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 2px rgba(34,197,94,.3)}
  50%{box-shadow:0 0 0 5px rgba(34,197,94,0)}
}


/* ───── HH. PANEL MODERN (replaces old .panel with subtle depth + hover) ───── */
.admin-app .panel-modern{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--r-3xl);
  padding:18px 20px;
  margin-bottom:16px;
  position:relative;
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.admin-app .panel-modern:hover{
  border-color:rgba(5,46,34,.08);
  box-shadow:0 8px 24px rgba(5,46,34,.06);
}
/* Subtle accent stripe at top */
.admin-app .panel-modern::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-hover,#15803d) 100%);
  opacity:.6;
  transition:opacity .2s ease;
}
.admin-app .panel-modern:hover::before{opacity:1}
.admin-app .panel-modern .panel-h{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;padding-bottom:0;
  border-bottom:none;
}
.admin-app .panel-modern .panel-h h3{
  display:flex;align-items:center;gap:8px;
  font-size:.92rem;font-weight:700;color:var(--text);
  margin:0;letter-spacing:-.2px;
}
.admin-app .panel-modern .panel-h h3 i{
  color:var(--accent);width:18px;height:18px;
}
.admin-app .panel-modern .panel-h .sec-count{
  background:var(--accent-light);color:var(--accent);
  padding:2px 10px;border-radius:var(--r-lg);font-weight:700;font-size:.7rem;
}
.admin-app .panel-modern .panel-empty{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:32px 16px;color:var(--text3);font-size:.78rem;
  text-align:center;
}
.admin-app .panel-modern .panel-empty i{
  width:24px;height:24px;color:var(--accent);opacity:.6;
}
.admin-app .panel-modern .lnk{
  background:none;border:none;color:var(--accent);
  font-size:.7rem;font-weight:600;cursor:pointer;
  padding:4px 8px;border-radius:var(--r-base);
  transition:background .15s ease;
  font-family:var(--font);
}
.admin-app .panel-modern .lnk:hover{background:var(--accent-light)}

/* mrow — modern list item with hover effect */
.admin-app .mrow{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  border-radius:var(--r-xl);
  margin-bottom:6px;
  background:transparent;
  border:1px solid transparent;
  transition:all .15s ease;
  cursor:pointer;
}
.admin-app .mrow:hover{
  background:var(--card-muted);
  border-color:var(--card-border);
  transform:translateX(2px);
}
.admin-app .mrow .mslot{
  font-weight:700;color:var(--accent);
  font-size:.78rem;min-width:60px;
  background:var(--accent-light);
  padding:4px 8px;border-radius:var(--r-base);text-align:center;
  flex-shrink:0;
}

/* cal-cell — modern calendar day */
.admin-app .cal-cell{
  border:1px solid var(--card-border);
  border-radius:var(--r-lg);
  padding:6px;
  background:var(--card-bg);
  cursor:pointer;
  transition:all .15s ease;
  min-height:60px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:.78rem;font-weight:600;
  position:relative;
}
.admin-app .cal-cell:hover{
  border-color:var(--accent);
  box-shadow:0 4px 12px rgba(34,197,94,.15);
  transform:translateY(-1px);
}
.admin-app .cal-cell.today{
  background:linear-gradient(135deg,var(--accent),var(--accent-hover,#15803d));
  color:#fff;border-color:transparent;
}
.admin-app .cal-cell .cnum{font-weight:800;font-size:.85rem}
.admin-app .cal-cell .cbadge{
  font-size:.6rem;background:var(--accent-light);color:var(--accent);
  padding:1px 6px;border-radius:var(--r-md);font-weight:700;
}
.admin-app .cal-cell .cdot{
  width:6px;height:6px;border-radius:50%;
  background:var(--warning);
  position:absolute;top:6px;right:6px;
}
.admin-app .cal-cell.has-unassigned{
  background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(245,158,11,.02));
  border-color:rgba(245,158,11,.3);
}
.admin-app .cal-cell.all-done{
  background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(34,197,94,.02));
}

/* tk-card — modern task card */
.admin-app .tk-card{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--r-xl);
  margin-bottom:8px;
  cursor:pointer;
  transition:all .15s ease;
}
.admin-app .tk-card:hover{
  border-color:var(--accent);
  box-shadow:0 6px 16px rgba(5,46,34,.08);
  transform:translateY(-1px);
}
.admin-app .tk-card .tk-slot{
  font-weight:700;color:var(--accent);
  font-size:.78rem;min-width:60px;
  background:var(--accent-light);
  padding:4px 8px;border-radius:var(--r-base);text-align:center;
  flex-shrink:0;
}
.admin-app .tk-card .tk-name{font-weight:600;font-size:.85rem;color:var(--text)}
.admin-app .tk-card .tk-addr{font-size:.7rem;color:var(--text3);margin-top:2px;display:flex;align-items:center;gap:4px}

/* kpi modern card */
.admin-app .kpi{
  transition:transform .2s ease,box-shadow .2s ease;
  cursor:default;
}
.admin-app .kpi.hover-lift:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(5,46,34,.15);
}
.admin-app .kpi-ic i{transition:transform .2s ease}
.admin-app .kpi:hover .kpi-ic i{transform:scale(1.1)}

/* d-card with depth already styled, add subtle hover-lift */
.admin-app .d-card{
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.admin-app .d-card.hover-lift:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(5,46,34,.08);
  border-color:rgba(5,46,34,.06);
}

/* day-head (schedule day heading) */
.admin-app .day-head{
  display:flex;align-items:center;gap:10px;
  margin:14px 0 10px;
  padding:10px 14px;
  background:var(--card-muted);
  border-radius:var(--r-xl);
}
.admin-app .day-head h3{font-size:.95rem;font-weight:700;margin:0;color:var(--text)}

/* cal-wrap, cal-head, cal-nav, cal-grid */
.admin-app .cal-wrap{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--r-3xl);
  padding:16px;
  margin-bottom:14px;
}
.admin-app .cal-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.admin-app .cal-head h3{font-size:1.1rem;font-weight:700;margin:0;color:var(--text);letter-spacing:-.3px}
.admin-app .cal-nav{display:flex;gap:6px}
.admin-app .cal-nav button{
  width:36px;height:36px;border-radius:var(--r-lg);
  border:1px solid var(--card-border);background:var(--card-bg);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--text2);transition:all .15s ease;
}
.admin-app .cal-nav button:hover{
  background:var(--accent);color:#fff;border-color:var(--accent);
  transform:translateY(-1px);
}
.admin-app .cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
}
.admin-app .cal-dh{
  font-size:.65rem;font-weight:700;color:var(--text3);
  text-align:center;padding:6px 0;text-transform:uppercase;letter-spacing:.5px;
}
.admin-app .cal-cell.empty{background:transparent;border:1px dashed transparent;cursor:default}
.admin-app .cal-cell.empty:hover{border-color:transparent;box-shadow:none;transform:none}

/* Sidebar footer improvements */
.admin-app .d-sidebar-footer{
  border-top:1px solid var(--border);
  padding:12px;
}
.admin-app .d-sidebar-footer button{
  width:100%;text-align:left;background:none;border:none;
  padding:8px 12px;border-radius:var(--r-lg);font-size:.78rem;
  color:var(--text2);cursor:pointer;
  display:flex;align-items:center;gap:10px;
  transition:background .15s ease,color .15s ease;
  font-family:var(--font);
}
.admin-app .d-sidebar-footer button:hover{
  background:var(--card-muted);
  color:var(--text);
}
.admin-app .d-sidebar-footer button i{width:16px;height:16px}

/* d-nav-item with active state */
.admin-app .d-nav-item{
  position:relative;
  transition:all .15s ease;
}
.admin-app .d-nav-item.active{
  background:var(--accent-light);
  color:var(--accent);
  font-weight:700;
}
.admin-app .d-nav-item.active::before{
  content:"";position:absolute;
  left:0;top:8px;bottom:8px;width:3px;
  background:var(--accent);
  border-radius:0 3px 3px 0;
}

/* Empty state enhancement */
.admin-app .empty{
  text-align:center;padding:60px 20px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.admin-app .empty .eicon{
  width:72px;height:72px;
  background:var(--accent-light);
  color:var(--accent);
  border-radius:var(--r-5xl);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:6px;
}
.admin-app .empty .eicon i{width:32px;height:32px}
.admin-app .empty h2{font-size:1.05rem;font-weight:700;color:var(--text);margin:0}
.admin-app .empty p{font-size:.82rem;color:var(--text3);margin:0;max-width:340px;line-height:1.5}

/* Section title with subtitle */
.admin-app .sec{
  display:flex;align-items:center;justify-content:space-between;
  margin:18px 0 10px;
  padding:0 4px;
}
.admin-app .sec-title{
  font-size:.95rem;font-weight:700;color:var(--text);
  letter-spacing:-.2px;
}
.admin-app .sec-count{
  background:var(--card-muted);color:var(--text2);
  padding:2px 10px;border-radius:var(--r-lg);
  font-size:.7rem;font-weight:700;
}

/* stat icon (small) with colored bg */
.admin-app .stat-icon{
  width:48px;height:48px;
  background:var(--accent-light);
  color:var(--accent);
  border-radius:var(--r-2xl);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;
  position:relative;
}
.admin-app .stat-icon i{width:22px;height:22px}
.admin-app .stat-icon.kpi-icon-bg{background:var(--accent-light);color:var(--accent)}

/* Modal sheet with better visuals */
.admin-app .m-sheet{
  position:relative;
  max-width:520px;width:100%;
  max-height:90vh;overflow-y:auto;
  padding:24px;
  background:var(--card-bg);
  border-radius:var(--r-5xl);
  box-shadow:0 24px 60px rgba(5,46,34,.25);
  border:1px solid var(--card-border);
}
.admin-app .m-sheet::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-hover,#15803d));
  border-radius:var(--r-5xl) 20px 0 0;
}
.admin-app .m-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--border);
  font-size:.82rem;
}
.admin-app .m-row:last-child{border-bottom:none}
.admin-app .m-row .mk{color:var(--text3);font-weight:600}
.admin-app .m-row .mv{color:var(--text);font-weight:500;text-align:right}

/* Modal buttons */
.admin-app .m-btn{
  padding:10px 18px;border-radius:var(--r-lg);
  font-size:.78rem;font-weight:600;
  cursor:pointer;border:none;
  display:inline-flex;align-items:center;gap:6px;
  transition:all .15s ease;
  font-family:var(--font);
}
.admin-app .m-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(5,46,34,.15)}
.admin-app .m-btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(5,46,34,.1)}
.admin-app .m-btn.accept{background:var(--accent);color:#fff}
.admin-app .m-btn.accept:hover{background:var(--accent-hover,#15803d)}
.admin-app .m-btn.done{background:#10b981;color:#fff}
.admin-app .m-btn.done:hover{background:#059669}
.admin-app .m-btn.decline{background:var(--danger);color:#fff}
.admin-app .m-btn.decline:hover{background:#dc2626}
.admin-app .m-btn.close{background:var(--card-muted);color:var(--text2)}
.admin-app .m-btn.close:hover{background:var(--border);color:var(--text)}

/* Filter bar (CRM search) */
.admin-app .crm-bar{
  display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;
  align-items:center;
}
.admin-app .crm-search{
  flex:1;min-width:200px;
  padding:10px 14px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--r-lg);
  font-size:.82rem;
  color:var(--text);
  transition:border-color .15s ease,box-shadow .15s ease;
  font-family:var(--font);
}
.admin-app .crm-search:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-light);
}
.admin-app .crm-sel{
  padding:10px 14px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--r-lg);
  font-size:.78rem;
  color:var(--text);
  font-family:var(--font);
}

/* Status badges (bc-badge) — make more prominent */
.admin-app .bc-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--r-base);
  font-size:.62rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.4px;
  border:1px solid transparent;
}
.admin-app .bc-badge .bdot{
  width:5px;height:5px;border-radius:50%;
  background:currentColor;
}
.admin-app .bc-badge.confirmed{background:rgba(34,197,94,.12);color:#15803d;border-color:rgba(34,197,94,.2)}
.admin-app .bc-badge.completed{background:rgba(16,185,129,.12);color:#047857;border-color:rgba(16,185,129,.2)}
.admin-app .bc-badge.cancelled{background:rgba(239,68,68,.12);color:#b91c1c;border-color:rgba(239,68,68,.2)}
.admin-app .bc-badge.pending{background:rgba(245,158,11,.12);color:#b45309;border-color:rgba(245,158,11,.2)}
.admin-app .bc-badge.in_progress{background:rgba(59,130,246,.12);color:#1d4ed8;border-color:rgba(59,130,246,.2)}
.admin-app .bc-badge.awaiting_review{background:rgba(168,85,247,.12);color:#6d28d9;border-color:rgba(168,85,247,.2)}
.admin-app .bc-badge.unassigned{background:rgba(239,68,68,.12);color:#b91c1c;border-color:rgba(239,68,68,.2)}

/* Customer row */
.admin-app .cust-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--r-xl);
  margin-bottom:6px;
  cursor:pointer;
  transition:all .15s ease;
}
.admin-app .cust-row:hover{
  background:var(--card-muted);
  border-color:var(--accent);
  transform:translateX(2px);
}
.admin-app .cust-row .cust-name{font-weight:600;font-size:.85rem;color:var(--text)}
.admin-app .cust-row .cust-sub{font-size:.7rem;color:var(--text3);margin-top:2px;display:flex;align-items:center;gap:4px}
.admin-app .cust-row .cust-stat{font-size:.75rem;color:var(--text2);text-align:right;cursor:pointer}
.admin-app .cust-row .cbadge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:var(--r-base);font-size:.6rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.4px;
}
.admin-app .cbadge.active{background:rgba(34,197,94,.12);color:#15803d}
.admin-app .cbadge.vip{background:rgba(245,158,11,.12);color:#b45309}
.admin-app .cbadge.inactive{background:rgba(107,114,128,.12);color:#6b7280}
.admin-app .cbadge.blacklist{background:rgba(239,68,68,.12);color:#b91c1c}

/* Pager (pagination) */
.admin-app .pager,.admin-app .pagination{
  display:flex;align-items:center;gap:6px;justify-content:center;
  margin:16px 0;
}
.admin-app .pager button,.admin-app .pagination .pag-btn{
  padding:8px 14px;border-radius:var(--r-lg);
  background:var(--card-bg);border:1px solid var(--card-border);
  font-size:.78rem;font-weight:600;color:var(--text2);
  cursor:pointer;transition:all .15s ease;
  font-family:var(--font);
}
.admin-app .pager button:hover:not(:disabled),.admin-app .pagination .pag-btn:hover:not(:disabled){
  background:var(--card-muted);border-color:var(--accent);color:var(--text);
  transform:translateY(-1px);
}
.admin-app .pager button:disabled,.admin-app .pagination .pag-btn:disabled{
  opacity:.4;cursor:not-allowed;
}
.admin-app .pager span,.admin-app .pagination span{
  font-size:.78rem;color:var(--text2);font-weight:600;
  padding:0 8px;
}

/* Bottom nav (mobile) */
.admin-app .bnav{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--card-bg);
  border-top:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:space-around;
  padding:8px 0 env(safe-area-inset-bottom,8px);
  z-index:90;
  backdrop-filter:blur(20px);
}
.admin-app .bnav-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 12px;border-radius:var(--r-xl);
  background:none;border:none;
  color:var(--text3);font-size:.62rem;font-weight:600;
  cursor:pointer;transition:all .15s ease;
}
.admin-app .bnav-item.active{
  color:var(--accent);
}
.admin-app .bnav-item i{width:22px;height:22px;transition:transform .15s ease}
.admin-app .bnav-item.active i{transform:scale(1.1)}

/* Drawer (mobile menu) */
.admin-app .drawer{
  background:var(--card-bg);
  border-left:1px solid var(--card-border);
  box-shadow:-12px 0 36px rgba(5,46,34,.15);
}
.admin-app .drawer-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 20px;border-radius:0;
  color:var(--text2);font-size:.85rem;font-weight:500;
  cursor:pointer;transition:background .15s ease;
  background:none;border:none;width:100%;text-align:left;
  font-family:var(--font);
}
.admin-app .drawer-item:hover{background:var(--card-muted);color:var(--text)}
.admin-app .drawer-item i{width:18px;height:18px}

/* Sticky header with subtle border */
.admin-app .hdr{
  background:var(--card-bg);
  border-bottom:1px solid var(--card-border);
  backdrop-filter:blur(20px);
}

/* pf-field (form field) - already styled, just enhance */
.admin-app .pf-field{
  display:flex;flex-direction:column;gap:6px;
}
.admin-app .pf-field label{
  font-size:.7rem;font-weight:700;color:var(--text2);
  letter-spacing:.3px;text-transform:uppercase;
}
.admin-app .sInp{
  padding:10px 14px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--r-lg);
  font-size:.85rem;color:var(--text);
  transition:border-color .15s ease,box-shadow .15s ease;
  font-family:var(--font);
  width:100%;
}
.admin-app .sInp:focus,.admin-app .mv-sel:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-light);
}

/* Stat card */
.admin-app .stat{
  position:relative;overflow:hidden;
  padding:18px 18px 16px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--r-3xl);
  cursor:pointer;
  transition:all .2s ease;
}
.admin-app .stat:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(5,46,34,.12);
  border-color:rgba(5,46,34,.08);
}
.admin-app .stat-val{
  font-size:1.8rem;font-weight:800;
  color:var(--text);line-height:1;
  font-variant-numeric:tabular-nums;
}
.admin-app .stat-lbl{
  font-size:.7rem;font-weight:600;
  color:var(--text3);text-transform:uppercase;letter-spacing:.4px;
  margin-top:6px;
}

/* Stats grid */
.admin-app .stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;
  margin:14px 0 18px;
}

/* Cloud status */
.admin-app .cloud-status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.65rem;font-weight:700;
  padding:5px 10px;border-radius:var(--r-lg);
  background:rgba(34,197,94,.1);color:#16a34a;
  border:1px solid rgba(34,197,94,.2);
}
.admin-app .cloud-status::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#16a34a;
  animation:cloudPulse 1.8s ease-in-out infinite;
}
@keyframes cloudPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(1.3)}
}

/* ════════════════════════════════════════════════════════════════════
   M. MODERN BUTTON SYSTEM v2 (2025-2026)
   ──────────────────────────────────────
   - Multi-layer shadows for depth
   - Gradient backgrounds (subtle, not 2015-flat)
   - 200ms cubic-bezier(.4,0,.2,1) transitions
   - 600 font-weight (was 700) for refined typography
   - 3px focus ring with 2px offset (accessibility)
   - Lift -1px on hover, scale .97 on press
   - New variants: .btn-soft, .btn-pill, .btn-gradient, .btn-glass
   - Loading state with elegant spinner
   - Disabled state with cursor + opacity
   ════════════════════════════════════════════════════════════════════ */

/* ── Base .btn-solid: better padding, weight, radius ── */
.admin-app .btn-solid{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  gap:7px;
  padding:11px 20px;
  border:1px solid transparent;
  border-radius:12px;
  font-weight:600;
  font-size:.8rem;
  letter-spacing:-.15px;
  line-height:1.2;
  cursor:pointer;
  font-family:var(--font);
  transition:transform .18s cubic-bezier(.4,0,.2,1),
             box-shadow .22s cubic-bezier(.4,0,.2,1),
             background .18s cubic-bezier(.4,0,.2,1),
             border-color .18s cubic-bezier(.4,0,.2,1),
             color .18s cubic-bezier(.4,0,.2,1),
             filter .18s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  white-space:nowrap;
  text-decoration:none;
}
.admin-app .btn-solid:hover{transform:translateY(-1px)}
.admin-app .btn-solid:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.admin-app .btn-solid:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent),0 4px 14px var(--accent-glow)}
.admin-app .btn-solid:disabled,
.admin-app .btn-solid[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none !important;filter:grayscale(.2)}
.admin-app .btn-solid i,
.admin-app .btn-solid svg{width:15px;height:15px;flex-shrink:0;stroke-width:2.25}

/* ── .btn-primary: gradient + layered shadow + accent glow ── */
.admin-app .btn-primary{
  background:linear-gradient(180deg,var(--accent) 0%,color-mix(in srgb, var(--accent) 88%, #000) 100%);
  color:#fff;
  border-color:color-mix(in srgb, var(--accent) 60%, #000);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 1px 2px rgba(0,0,0,.08),
    0 4px 14px var(--accent-glow);
}
.admin-app .btn-primary:hover{
  background:linear-gradient(180deg,color-mix(in srgb, var(--accent) 92%, #fff) 0%,var(--accent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 2px 4px rgba(0,0,0,.1),
    0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent);
  filter:brightness(1.02);
}
.admin-app .btn-primary:focus-visible{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent),
    0 6px 20px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── .btn-ghost: subtle fill, accent on hover ── */
.admin-app .btn-ghost{
  background:color-mix(in srgb, var(--text) 3%, transparent);
  color:var(--text2);
  border:1px solid var(--border-strong);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.admin-app .btn-ghost:hover{
  background:var(--card-bg);
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 14%, transparent);
}
.admin-app .btn-ghost:focus-visible{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),0 1px 2px rgba(0,0,0,.03);
  border-color:var(--accent);
  color:var(--accent);
}

/* ── .btn-danger: refined red with glow ── */
.admin-app .btn-danger{
  background:linear-gradient(180deg,var(--danger) 0%,color-mix(in srgb, var(--danger) 88%, #000) 100%);
  color:#fff;
  border-color:color-mix(in srgb, var(--danger) 60%, #000);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 1px 2px rgba(0,0,0,.08),
    0 4px 14px color-mix(in srgb, var(--danger) 32%, transparent);
}
.admin-app .btn-danger:hover{
  background:linear-gradient(180deg,color-mix(in srgb, var(--danger) 92%, #fff) 0%,var(--danger) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 8px 24px color-mix(in srgb, var(--danger) 40%, transparent);
  filter:brightness(1.02);
}
.admin-app .btn-danger:focus-visible{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent),
    0 6px 20px color-mix(in srgb, var(--danger) 32%, transparent);
}

/* ── .btn-outline: 1.5px → 2px, accent on hover with fill ── */
.admin-app .btn-outline{
  background:transparent;
  color:var(--accent);
  border:1.5px solid var(--accent);
  box-shadow:0 0 0 0 transparent;
}
.admin-app .btn-outline:hover{
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  border-color:var(--accent);
  box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 18%, transparent);
  color:var(--accent);
  filter:brightness(1.05);
}
.admin-app .btn-outline:focus-visible{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ── .btn-wa (WhatsApp): signature green ── */
.admin-app .btn-wa{
  background:linear-gradient(180deg,#25D366 0%,#1ea952 100%);
  color:#fff;
  border-color:#1ea952;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 1px 2px rgba(0,0,0,.08),
    0 4px 14px rgba(37,211,102,.28);
}
.admin-app .btn-wa:hover{
  background:linear-gradient(180deg,#2ee274 0%,#25D366 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 8px 24px rgba(37,211,102,.38);
}

/* ── .d-btn: action button in tables, modals, etc ── */
.admin-app .d-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:8px 14px;
  border:1px solid var(--border-strong);
  border-radius:10px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:-.1px;
  cursor:pointer;
  background:var(--card-bg);
  color:var(--text2);
  transition:all .15s cubic-bezier(.4,0,.2,1);
  font-family:var(--font);
  white-space:nowrap;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.admin-app .d-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  transform:translateY(-1px);
  box-shadow:0 4px 10px color-mix(in srgb, var(--accent) 12%, transparent);
}
.admin-app .d-btn:active{transform:translateY(0) scale(.96);transition-duration:.08s}
.admin-app .d-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);border-color:var(--accent);color:var(--accent)}
.admin-app .d-btn i,
.admin-app .d-btn svg{width:13px;height:13px;flex-shrink:0}
.admin-app .d-btn.acc{background:var(--accent);color:#fff;border-color:color-mix(in srgb, var(--accent) 60%, #000)}
.admin-app .d-btn.acc:hover{background:color-mix(in srgb, var(--accent) 90%, #fff);color:#fff;filter:brightness(1.02)}
.admin-app .d-btn.danger{border-color:color-mix(in srgb, var(--danger) 40%, var(--border-strong));color:var(--danger)}
.admin-app .d-btn.danger:hover{border-color:var(--danger);background:color-mix(in srgb, var(--danger) 8%, transparent);color:var(--danger);box-shadow:0 4px 10px color-mix(in srgb, var(--danger) 18%, transparent)}

/* ── .btn-icon: square icon button (40px, 12px radius) ── */
.admin-app .btn-icon{
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  background:var(--card-bg);
  color:var(--text2);
  border-radius:12px;
  cursor:pointer;
  font-family:var(--font);
  transition:all .16s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color:transparent;
}
.admin-app .btn-icon:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  transform:translateY(-1px);
  box-shadow:0 4px 10px color-mix(in srgb, var(--accent) 14%, transparent);
}
.admin-app .btn-icon:active{transform:translateY(0) scale(.94);transition-duration:.08s}
.admin-app .btn-icon:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);border-color:var(--accent);color:var(--accent)}
.admin-app .btn-icon i,
.admin-app .btn-icon svg{width:16px;height:16px;stroke-width:2.25;flex-shrink:0}
.admin-app .btn-icon.danger:hover{border-color:var(--danger);color:var(--danger);background:color-mix(in srgb, var(--danger) 8%, transparent);box-shadow:0 4px 10px color-mix(in srgb, var(--danger) 18%, transparent)}
.admin-app .btn-icon.danger:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent)}
.admin-app .btn-icon.ghost{background:transparent;border-color:transparent}
.admin-app .btn-icon.ghost:hover{background:color-mix(in srgb, var(--text) 6%, transparent);border-color:transparent;color:var(--text)}
.admin-app .btn-icon.ghost:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--text) 18%, transparent)}

/* ════════════════════════════════════════════════════════════════════
   NEW BUTTON VARIANTS (2025)
   ════════════════════════════════════════════════════════════════════ */

/* ── .btn-soft: filled tonal (Material 3 style) — subtle tinted bg ── */
.admin-app .btn-soft{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 18px;
  border:1px solid transparent;
  border-radius:12px;
  font-weight:600;font-size:.8rem;letter-spacing:-.15px;
  cursor:pointer;font-family:var(--font);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  color:var(--accent);
  transition:all .18s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.admin-app .btn-soft:hover{
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  transform:translateY(-1px);
  box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 16%, transparent);
}
.admin-app .btn-soft:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.admin-app .btn-soft:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent)}
.admin-app .btn-soft i,
.admin-app .btn-soft svg{width:15px;height:15px;stroke-width:2.25;flex-shrink:0}
.admin-app .btn-soft.gray{
  background:color-mix(in srgb, var(--text) 6%, transparent);
  color:var(--text2);
}
.admin-app .btn-soft.gray:hover{
  background:color-mix(in srgb, var(--text) 12%, transparent);
  color:var(--text);
}
.admin-app .btn-soft.danger{
  background:color-mix(in srgb, var(--danger) 12%, transparent);
  color:var(--danger);
}
.admin-app .btn-soft.danger:hover{
  background:color-mix(in srgb, var(--danger) 20%, transparent);
  box-shadow:0 4px 12px color-mix(in srgb, var(--danger) 18%, transparent);
}
.admin-app .btn-soft.warning{
  background:color-mix(in srgb, var(--warning) 14%, transparent);
  color:var(--warning);
}

/* ── .btn-pill: 9999px radius (full pill) ── */
.admin-app .btn-pill{border-radius:9999px !important;padding-left:18px;padding-right:18px}

/* ── .btn-gradient: 2-tone gradient (premium feel) ── */
.admin-app .btn-gradient{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 22px;
  border:none;
  border-radius:12px;
  font-weight:600;font-size:.8rem;letter-spacing:-.15px;
  cursor:pointer;font-family:var(--font);
  background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, var(--accent2, #06b6d4)) 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 4px 14px color-mix(in srgb, var(--accent) 32%, transparent);
  transition:all .2s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.admin-app .btn-gradient:hover{
  transform:translateY(-1px);
  filter:brightness(1.06) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 8px 24px color-mix(in srgb, var(--accent) 38%, transparent);
}
.admin-app .btn-gradient:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.admin-app .btn-gradient:focus-visible{
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent);
}
.admin-app .btn-gradient i,
.admin-app .btn-gradient svg{width:15px;height:15px;stroke-width:2.25;flex-shrink:0}

/* ── .btn-glass: glassmorphism on tinted bg ── */
.admin-app .btn-glass{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 18px;
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius:12px;
  font-weight:600;font-size:.8rem;letter-spacing:-.15px;
  cursor:pointer;font-family:var(--font);
  background:color-mix(in srgb, var(--card-bg) 75%, transparent);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  color:var(--text);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:all .18s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.admin-app .btn-glass:hover{
  background:color-mix(in srgb, var(--card-bg) 90%, transparent);
  border-color:color-mix(in srgb, var(--text) 18%, transparent);
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.admin-app .btn-glass:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.admin-app .btn-glass:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--text) 18%, transparent)}

/* ── .btn-link: text-only button with underline on hover ── */
.admin-app .btn-link{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 8px;
  border:none;background:transparent;
  color:var(--accent);
  font-weight:600;font-size:.78rem;
  cursor:pointer;font-family:var(--font);
  text-decoration:none;
  border-radius:8px;
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.admin-app .btn-link:hover{background:color-mix(in srgb, var(--accent) 8%, transparent);text-decoration:underline}
.admin-app .btn-link:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}

/* ── Group: button toolbar (connected buttons) ── */
.admin-app .btn-group{
  display:inline-flex;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.admin-app .btn-group .btn-solid,
.admin-app .btn-group .d-btn{
  border-radius:0;
  border-right-width:0;
  box-shadow:none;
}
.admin-app .btn-group .btn-solid:hover,
.admin-app .btn-group .d-btn:hover{transform:none;box-shadow:inset 0 0 0 9999px rgba(255,255,255,.06)}
.admin-app .btn-group > :first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.admin-app .btn-group > :last-child{border-top-right-radius:12px;border-bottom-right-radius:12px;border-right-width:1px}
.admin-app .btn-group .btn-primary{border-right-color:color-mix(in srgb, var(--accent) 50%, #000)}

/* ════════════════════════════════════════════════════════════════════
   LOADING + DISABLED STATES (overrides)
   ════════════════════════════════════════════════════════════════════ */
.admin-app .btn-primary.is-loading,
.admin-app .btn-solid.is-loading,
.admin-app .btn-danger.is-loading,
.admin-app .btn-gradient.is-loading{
  position:relative;
  color:transparent !important;
  pointer-events:none;
}
.admin-app .btn-primary.is-loading::after,
.admin-app .btn-solid.is-loading::after,
.admin-app .btn-danger.is-loading::after,
.admin-app .btn-gradient.is-loading::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  margin-left:-9px;margin-top:-9px;
  width:18px;height:18px;
  border:2.5px solid rgba(255,255,255,.28);
  border-top-color:#fff;
  border-radius:50%;
  animation:btnSpin .8s linear infinite;
}
.admin-app .btn-ghost.is-loading,
.admin-app .btn-outline.is-loading,
.admin-app .btn-soft.is-loading,
.admin-app .d-btn.is-loading{
  position:relative;
  color:transparent !important;
  pointer-events:none;
}
.admin-app .btn-ghost.is-loading::after,
.admin-app .btn-outline.is-loading::after,
.admin-app .btn-soft.is-loading::after,
.admin-app .d-btn.is-loading::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  margin-left:-8px;margin-top:-8px;
  width:16px;height:16px;
  border:2.5px solid color-mix(in srgb, currentColor 18%, transparent);
  border-top-color:currentColor;
  border-radius:50%;
  animation:btnSpin .8s linear infinite;
  opacity:.85;
}
@keyframes btnSpin{to{transform:rotate(360deg)}}

/* ════════════════════════════════════════════════════════════════════
   SIZE VARIANTS REFINED
   ════════════════════════════════════════════════════════════════════ */
.admin-app .btn-xs{padding:6px 11px;font-size:.66rem;border-radius:9px;gap:5px;font-weight:600}
.admin-app .btn-xs i,.admin-app .btn-xs svg{width:12px;height:12px}
.admin-app .btn-sm{padding:8px 14px;font-size:.72rem;border-radius:10px;gap:5px}
.admin-app .btn-sm i,.admin-app .btn-sm svg{width:13px;height:13px}
.admin-app .btn-lg{padding:14px 28px;font-size:.92rem;border-radius:14px;gap:9px;font-weight:600;letter-spacing:-.2px}
.admin-app .btn-lg i,.admin-app .btn-lg svg{width:17px;height:17px}
.admin-app .btn-xl{padding:17px 34px;font-size:1rem;border-radius:15px;gap:10px;font-weight:600;letter-spacing:-.25px}
.admin-app .btn-xl i,.admin-app .btn-xl svg{width:19px;height:19px}

/* Full-width button helper */
.admin-app .btn-block{display:flex;width:100%}

/* Icon-only square sizes */
.admin-app .btn-icon-sm{width:32px;height:32px;border-radius:9px}
.admin-app .btn-icon-sm i,.admin-app .btn-icon-sm svg{width:14px;height:14px}
.admin-app .btn-icon-lg{width:46px;height:46px;border-radius:13px}
.admin-app .btn-icon-lg i,.admin-app .btn-icon-lg svg{width:18px;height:18px}
.admin-app .btn-icon-xl{width:52px;height:52px;border-radius:14px}
.admin-app .btn-icon-xl i,.admin-app .btn-icon-xl svg{width:20px;height:20px}

/* Mobile touch targets */
@media(max-width:640px){
  .admin-app .btn-solid,
  .admin-app .btn-primary,
  .admin-app .btn-ghost,
  .admin-app .btn-danger,
  .admin-app .btn-outline,
  .admin-app .btn-soft,
  .admin-app .btn-gradient,
  .admin-app .btn-wa,
  .admin-app .d-btn{
    min-height:42px;
    padding:11px 18px;
    font-size:.78rem;
  }
  .admin-app .btn-icon{width:42px;height:42px}
  .admin-app .btn-icon i,.admin-app .btn-icon svg{width:17px;height:17px}
  .admin-app .btn-lg{min-height:50px;padding:14px 26px}
}

/* ───────────────────────────────────────────────────────────────
   REPORTS DASHBOARD — v8 visual system (2026-09-17)
   The Reports module already renders a complete, data-backed view using
   the report-*-v7 hooks. These scoped rules restore the missing visual
   layer without touching shared portal tokens or other admin views.
   ─────────────────────────────────────────────────────────────── */
.admin-app .report-shell-v7{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 0 36px;
  display:grid;
  gap:16px;
  color:var(--text);
  box-sizing:border-box;
}

/* Hero */
.admin-app .report-header-v7{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:166px;
  padding:27px 30px 25px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:
    radial-gradient(circle at 88% 12%,rgba(52,211,153,.28),transparent 27%),
    radial-gradient(circle at 72% 110%,rgba(6,182,212,.22),transparent 34%),
    linear-gradient(135deg,#062e23 0%,#0a4835 52%,#11634a 100%);
  box-shadow:0 18px 42px rgba(5,46,34,.22),inset 0 1px 0 rgba(255,255,255,.12);
}
.admin-app .report-header-v7::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-50px;
  bottom:-92px;
  width:250px;
  height:250px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
  box-shadow:0 0 0 22px rgba(255,255,255,.025),0 0 0 46px rgba(255,255,255,.018);
}
.admin-app .report-header-eyebrow-v7{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  color:rgba(236,253,245,.72);
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1.2;
  text-transform:uppercase;
}
.admin-app .report-header-eyebrow-v7::after{
  content:"Updated just now";
  margin-left:auto;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  background:rgba(255,255,255,.09);
  color:rgba(255,255,255,.78);
  font-size:.56rem;
  letter-spacing:.08em;
  white-space:nowrap;
}
.admin-app .dot-v7{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#34d399;
  box-shadow:0 0 0 4px rgba(52,211,153,.16),0 0 14px rgba(52,211,153,.7);
}
.admin-app .report-header-title-v7{
  color:#fff;
  font-size:clamp(1.65rem,2.6vw,2.25rem);
  font-weight:800;
  letter-spacing:-.055em;
  line-height:1.06;
}
.admin-app .report-header-sub-v7{
  max-width:590px;
  margin-top:10px;
  color:rgba(236,253,245,.72);
  font-size:.78rem;
  font-weight:500;
  line-height:1.55;
}

/* KPI strip */
.admin-app .report-kpis-v7{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.admin-app .report-kpi-v7{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  min-height:96px;
  padding:16px 17px;
  overflow:hidden;
  border:1px solid var(--card-border);
  border-radius:18px;
  background:var(--card-bg);
  box-shadow:var(--card-shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.admin-app .report-kpi-v7::after{
  content:"";
  position:absolute;
  right:-30px;
  bottom:-44px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:var(--kpi-tint,var(--accent-light));
  opacity:.7;
  pointer-events:none;
}
.admin-app .report-kpi-v7:hover{
  transform:translateY(-2px);
  border-color:var(--card-border-hover);
  box-shadow:var(--card-shadow-hover);
}
.admin-app .kpi-ic-v7{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);
  border-radius:14px;
  background:var(--accent-light);
  color:var(--accent);
}
.admin-app .report-kpi-v7.blue{--kpi-color:var(--accent2);--kpi-tint:var(--accent2-light)}
.admin-app .report-kpi-v7.blue .kpi-ic-v7{border-color:color-mix(in srgb,var(--accent2) 18%,transparent);background:var(--accent2-light);color:var(--accent2)}
.admin-app .report-kpi-v7.amber{--kpi-color:var(--warning);--kpi-tint:var(--warning-light)}
.admin-app .report-kpi-v7.amber .kpi-ic-v7{border-color:color-mix(in srgb,var(--warning) 18%,transparent);background:var(--warning-light);color:var(--warning)}
.admin-app .kpi-ic-v7 svg{width:19px;height:19px;stroke-width:2.25}
.admin-app .kpi-body-v7{position:relative;z-index:1;min-width:0}
.admin-app .kpi-v-v7{
  overflow:hidden;
  color:var(--text);
  font-size:1.32rem;
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.admin-app .kpi-l-v7{
  margin-top:5px;
  overflow:hidden;
  color:var(--text3);
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.1em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Segmented report navigation */
.admin-app .report-tabs-v7{
  display:flex;
  align-items:center;
  gap:4px;
  width:max-content;
  max-width:100%;
  padding:5px;
  overflow-x:auto;
  border:1px solid var(--card-border);
  border-radius:16px;
  background:var(--card-muted);
  box-sizing:border-box;
  scrollbar-width:none;
}
.admin-app .report-tabs-v7::-webkit-scrollbar{display:none}
.admin-app .report-tab-v7{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 13px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:var(--text2);
  cursor:pointer;
  font:700 .72rem/1 var(--font);
  white-space:nowrap;
}
.admin-app .report-tab-v7:hover{color:var(--text);background:color-mix(in srgb,var(--card-bg) 75%,transparent)}
.admin-app .report-tab-v7.active-v7{
  border-color:var(--card-border);
  background:var(--card-bg);
  color:var(--accent);
  box-shadow:0 2px 7px rgba(5,46,34,.08);
}
.admin-app .cnt-v7{
  padding:4px 7px;
  border-radius:999px;
  background:var(--bg);
  color:var(--text3);
  font-size:.58rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.admin-app .active-v7 .cnt-v7{background:var(--accent-light);color:var(--accent)}

/* Data panels */
.admin-app .report-ops-v7,
.admin-app .report-sec-v7{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--card-border);
  border-radius:20px;
  background:var(--card-bg);
  box-shadow:var(--card-shadow);
}
.admin-app .panel-h-v7,
.admin-app .report-sec-h-v7{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  padding:18px 21px 15px;
  border-bottom:1px solid var(--border);
}
.admin-app .panel-h-v7 h3,
.admin-app .report-sec-h-v7 h3{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  margin:0;
  color:var(--text);
  font-size:.86rem;
  font-weight:800;
  letter-spacing:-.02em;
}
.admin-app .panel-h-v7 h3 svg,
.admin-app .report-sec-h-v7 h3 svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:var(--accent);
  stroke-width:2.25;
}
.admin-app .sec-count,
.admin-app .count-v7{
  flex:0 0 auto;
  padding:5px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--card-muted);
  color:var(--text3);
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.03em;
  white-space:nowrap;
}
.admin-app .revenue-breakdown-v7{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:16px;
}
.admin-app .revenue-cell-v7{
  min-width:0;
  padding:16px;
  border:1px solid var(--border);
  border-radius:15px;
  background:linear-gradient(145deg,var(--card-muted),color-mix(in srgb,var(--card-bg) 92%,var(--accent-light)));
}
.admin-app .revenue-cell-v7:hover{border-color:var(--card-border-hover)}
.admin-app .revenue-cell-lbl-v7{
  color:var(--text3);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.admin-app .revenue-cell-val-v7{
  margin-top:8px;
  color:var(--text);
  font-size:1.32rem;
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.admin-app .revenue-cell-val-v7.green-v7{color:var(--accent)}
.admin-app .revenue-cell-val-v7.amber-v7{color:var(--warning)}
.admin-app .revenue-cell-sub-v7{margin-top:5px;color:var(--text3);font-size:.64rem;line-height:1.35}

/* Trend chart */
.admin-app .trend-bars-v7{
  display:flex;
  align-items:flex-end;
  justify-content:space-around;
  gap:12px;
  min-height:166px;
  padding:22px 22px 18px;
  background:linear-gradient(180deg,transparent,var(--card-muted));
}
.admin-app .trend-bar-wrap-v7{
  display:flex;
  align-items:center;
  flex:1 1 0;
  flex-direction:column;
  justify-content:flex-end;
  min-width:36px;
  height:126px;
}
.admin-app .trend-bar-val-v7{
  min-height:15px;
  margin-bottom:7px;
  color:var(--text2);
  font-size:.55rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.admin-app .trend-bar-v7{
  width:min(42px,72%);
  min-height:8px;
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:9px 9px 4px 4px;
  background:linear-gradient(180deg,#34d399,var(--accent));
  box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.25);
  transition:filter .2s ease,transform .2s ease;
}
.admin-app .trend-bar-v7:hover{filter:brightness(1.08);transform:translateY(-2px)}
.admin-app .trend-bar-v7.peak-v7{background:linear-gradient(180deg,#67e8f9,#0891b2);border-color:rgba(8,145,178,.4)}
.admin-app .trend-bar-lbl-v7{margin-top:8px;color:var(--text3);font-size:.62rem;font-weight:800;letter-spacing:.05em}

/* Leaderboard, areas, recent bookings */
.admin-app .report-grid-v7{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:10px;
  padding:16px;
}
.admin-app .report-mcard-v7,
.admin-app .area-row-v7{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card-muted);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.admin-app .report-mcard-v7:hover,
.admin-app .area-row-v7:hover{transform:translateY(-1px);border-color:var(--card-border-hover);background:var(--surface-hover)}
.admin-app .rank-v7{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--card-bg);
  color:var(--text3);
  font-size:.64rem;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
.admin-app .report-mcard-v7:first-child .rank-v7{background:var(--warning-light);border-color:color-mix(in srgb,var(--warning) 26%,transparent);color:var(--warning)}
.admin-app .info-v7{min-width:0;flex:1}
.admin-app .name-v7{display:flex;align-items:center;gap:5px;overflow:hidden;color:var(--text);font-size:.76rem;font-weight:800;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.admin-app .name-v7 .crown{width:14px;height:14px;flex:0 0 14px;color:var(--warning)}
.admin-app .area-v7{margin-top:4px;overflow:hidden;color:var(--text3);font-size:.61rem;text-overflow:ellipsis;white-space:nowrap}
.admin-app .stats-v7{display:flex;align-items:baseline;gap:4px;flex:0 0 auto;color:var(--text3);font-size:.59rem;font-weight:700;white-space:nowrap}
.admin-app .stats-v7 strong{color:var(--accent);font-size:1rem;font-weight:900;font-variant-numeric:tabular-nums}
.admin-app .stats-v7 .sep{color:var(--border-strong);margin:0 2px}
.admin-app .area-row-v7{justify-content:space-between;gap:18px}
.admin-app .area-row-v7>div:first-child{min-width:0}
.admin-app .area-name-v7{overflow:hidden;color:var(--text);font-size:.74rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.admin-app .area-meta-v7{margin-top:4px;color:var(--text3);font-size:.62rem;line-height:1.25}
.admin-app .area-stat-v7{flex:0 0 auto;text-align:right}
.admin-app .area-stat-val-v7{color:var(--accent);font-size:.85rem;font-weight:900;font-variant-numeric:tabular-nums}
.admin-app .area-stat-lbl-v7{margin-top:2px;color:var(--text3);font-size:.56rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.admin-app .recent-list-v7{padding:0 16px 8px}
.admin-app .recent-row-v7{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
  padding:13px 5px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background .16s ease,padding .16s ease;
}
.admin-app .recent-row-v7:last-child{border-bottom:0}
.admin-app .recent-row-v7:hover{padding-right:10px;padding-left:10px;border-radius:10px;background:var(--card-muted)}
.admin-app .recent-time-v7{width:56px;flex:0 0 56px;color:var(--accent);font-size:.65rem;font-weight:800;font-variant-numeric:tabular-nums}
.admin-app .recent-info-v7{min-width:0;flex:1}
.admin-app .recent-name-v7{overflow:hidden;color:var(--text);font-size:.72rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.admin-app .recent-meta-v7{margin-top:4px;overflow:hidden;color:var(--text3);font-size:.61rem;text-overflow:ellipsis;white-space:nowrap}
.admin-app .recent-status-v7{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto}
.admin-app .recent-status-v7 .badge{white-space:nowrap}

/* Empty and error states */
.admin-app .report-empty-v7{
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:7px;
  padding:38px 20px 42px;
  color:var(--text3);
  text-align:center;
}
.admin-app .report-empty-v7 .art-v7{display:grid;place-items:center;width:52px;height:52px;margin-bottom:3px;border:1px solid var(--border);border-radius:17px;background:var(--accent-light);color:var(--accent)}
.admin-app .report-empty-v7 .art-v7 svg{width:23px;height:23px}
.admin-app .report-empty-v7 h3{margin:0;color:var(--text);font-size:.82rem;font-weight:800}
.admin-app .report-empty-v7 p{max-width:360px;margin:0;color:var(--text3);font-size:.68rem;line-height:1.5}

@media(max-width:1100px){
  .admin-app .report-kpis-v7{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .admin-app .report-shell-v7{gap:12px;padding-bottom:24px}
  .admin-app .report-header-v7{min-height:0;padding:22px 19px 21px;border-radius:20px}
  .admin-app .report-header-eyebrow-v7{font-size:.58rem;letter-spacing:.1em}
  .admin-app .report-header-eyebrow-v7::after{padding:5px 8px;font-size:.5rem}
  .admin-app .report-header-title-v7{font-size:1.58rem}
  .admin-app .report-header-sub-v7{margin-top:8px;font-size:.69rem}
  .admin-app .report-kpis-v7{gap:9px}
  .admin-app .report-kpi-v7{min-height:84px;padding:12px 11px;gap:9px;border-radius:15px}
  .admin-app .kpi-ic-v7{width:34px;height:34px;flex-basis:34px;border-radius:11px}
  .admin-app .kpi-ic-v7 svg{width:16px;height:16px}
  .admin-app .kpi-v-v7{font-size:1.05rem}
  .admin-app .kpi-l-v7{margin-top:3px;font-size:.5rem;letter-spacing:.06em}
  .admin-app .report-tabs-v7{width:100%;border-radius:14px}
  .admin-app .report-tab-v7{flex:1 0 auto;min-height:36px;padding:8px 10px;font-size:.65rem}
  .admin-app .panel-h-v7,.admin-app .report-sec-h-v7{padding:15px 15px 13px}
  .admin-app .panel-h-v7 h3,.admin-app .report-sec-h-v7 h3{font-size:.76rem}
  .admin-app .panel-h-v7 h3 svg,.admin-app .report-sec-h-v7 h3 svg{width:16px;height:16px;flex-basis:16px}
  .admin-app .revenue-breakdown-v7{grid-template-columns:1fr;gap:8px;padding:11px}
  .admin-app .revenue-cell-v7{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;padding:13px}
  .admin-app .revenue-cell-lbl-v7{grid-column:1}
  .admin-app .revenue-cell-val-v7{grid-column:2;grid-row:1 / span 2;margin:0;font-size:1.08rem;text-align:right}
  .admin-app .revenue-cell-sub-v7{grid-column:1;margin:0;font-size:.59rem}
  .admin-app .trend-bars-v7{gap:6px;min-height:146px;padding:16px 11px 14px}
  .admin-app .trend-bar-wrap-v7{height:112px;min-width:30px}
  .admin-app .trend-bar-val-v7{max-width:52px;overflow:hidden;font-size:.48rem;text-overflow:ellipsis}
  .admin-app .trend-bar-v7{width:min(30px,70%)}
  .admin-app .report-grid-v7{grid-template-columns:1fr;gap:8px;padding:11px}
  .admin-app .report-mcard-v7,.admin-app .area-row-v7{padding:12px}
  .admin-app .recent-list-v7{padding:0 11px 5px}
  .admin-app .recent-row-v7{gap:9px;padding:12px 4px}
  .admin-app .recent-time-v7{width:45px;flex-basis:45px;font-size:.58rem}
  .admin-app .recent-name-v7{font-size:.68rem}
  .admin-app .recent-meta-v7{font-size:.57rem}
  .admin-app .recent-status-v7 .badge{padding:4px 7px;font-size:.52rem}
}
@media(max-width:380px){
  .admin-app .report-header-eyebrow-v7::after{display:none}
  .admin-app .report-header-title-v7{font-size:1.42rem}
  .admin-app .report-kpi-v7{gap:7px;padding-right:8px;padding-left:8px}
  .admin-app .kpi-ic-v7{width:31px;height:31px;flex-basis:31px}
  .admin-app .kpi-v-v7{font-size:.96rem}
  .admin-app .report-tab-v7{padding-right:8px;padding-left:8px}
  .admin-app .cnt-v7{padding-right:5px;padding-left:5px}
}
@media(prefers-reduced-motion:reduce){
  .admin-app .report-kpi-v7,.admin-app .report-mcard-v7,.admin-app .area-row-v7,.admin-app .recent-row-v7,.admin-app .trend-bar-v7{transition:none}
  .admin-app .report-kpi-v7:hover,.admin-app .report-mcard-v7:hover,.admin-app .area-row-v7:hover,.admin-app .recent-row-v7:hover,.admin-app .trend-bar-v7:hover{transform:none;padding-left:inherit;padding-right:inherit}
}