/* 🔒 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}
}