/**
 * app-ui.css  —  Maurya Service Super-App UI System
 * Mobile-first · Phone container · Glassmorphism · Premium SaaS + Native App hybrid
 * Inspired by Uber · Paytm · Swiggy · Stripe · Notion
 *
 * Architecture
 * ─────────────────────────────────────────────
 *  mobile  < 768px   → phone container (max 420px centered on dark bg)
 *  tablet  768-1023  → full-width, bottom nav, no sidebar
 *  desktop ≥ 1024px  → fixed sidebar 260px + sticky topbar
 */

/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */
:root {
  /* Layout */
  --ui-sidebar-w:    260px;
  --ui-topbar-h:     60px;
  --ui-bnav-h:       70px;
  --ui-phone-max:    430px;

  /* Radii */
  --ui-r-xs:  8px;
  --ui-r-sm:  12px;
  --ui-r-md:  16px;
  --ui-r-lg:  20px;
  --ui-r-xl:  24px;
  --ui-r-full:9999px;

  /* Shadows */
  --ui-shadow-xs: 0 1px 4px rgba(0,0,0,.06);
  --ui-shadow-sm: 0 2px 12px rgba(0,0,0,.08);
  --ui-shadow-md: 0 6px 24px rgba(0,0,0,.10);
  --ui-shadow-lg: 0 16px 48px rgba(0,0,0,.14);
  --ui-shadow-phone: 0 32px 80px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.06);

  /* Duration */
  --ui-dur:   220ms;
  --ui-ease:  cubic-bezier(0.4,0,0.2,1);
  --ui-spring:cubic-bezier(0.34,1.56,0.64,1);

  /* Neutral Palette */
  --ui-bg:      #f1f5f9;
  --ui-surface: #ffffff;
  --ui-border:  #e2e8f0;
  --ui-muted:   #94a3b8;
  --ui-sub:     #64748b;
  --ui-text:    #1e293b;
  --ui-heading: #0f172a;

  /* Sidebar dark */
  --ui-sb-bg:   #0f172a;
  --ui-sb-text: rgba(255,255,255,.75);
  --ui-sb-act:  rgba(255,255,255,.08);
}

/* ================================================================
   2. ROLE COLOR TOKENS
   ================================================================ */
.role-customer {
  --ui-accent:      #f97316;
  --ui-accent-dk:   #ea580c;
  --ui-accent-lt:   rgba(249,115,22,.12);
  --ui-accent-grd:  linear-gradient(135deg,#f97316 0%,#dc2626 100%);
  --ui-sb-accent:   rgba(249,115,22,.20);
  --ui-phone-grd:   linear-gradient(160deg,#1e1b4b 0%,#312e81 50%,#581c87 100%);
}
.role-vendor {
  --ui-accent:      #2563eb;
  --ui-accent-dk:   #1d4ed8;
  --ui-accent-lt:   rgba(37,99,235,.12);
  --ui-accent-grd:  linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);
  --ui-sb-accent:   rgba(37,99,235,.20);
  --ui-phone-grd:   linear-gradient(160deg,#0f172a 0%,#1e3a8a 50%,#1e1b4b 100%);
}
.role-technician {
  --ui-accent:      #059669;
  --ui-accent-dk:   #047857;
  --ui-accent-lt:   rgba(5,150,105,.12);
  --ui-accent-grd:  linear-gradient(135deg,#059669 0%,#0891b2 100%);
  --ui-sb-accent:   rgba(5,150,105,.20);
  --ui-phone-grd:   linear-gradient(160deg,#052e16 0%,#064e3b 50%,#083344 100%);
}
.role-admin {
  --ui-accent:      #f97316;
  --ui-accent-dk:   #ea580c;
  --ui-accent-lt:   rgba(249,115,22,.12);
  --ui-accent-grd:  linear-gradient(135deg,#f97316 0%,#dc2626 100%);
  --ui-sb-accent:   rgba(249,115,22,.20);
  --ui-phone-grd:   linear-gradient(160deg,#1e1b4b 0%,#312e81 50%,#581c87 100%);
}

/* ================================================================
   3. BASE RESET
   ================================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

body.app-ui {
  font-family:'DM Sans','Inter','Roboto',system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.5;
  background:var(--ui-bg);
  color:var(--ui-text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}

/* ================================================================
   4. MOBILE: APP SHELL (full-screen, no phone container)
   ================================================================ */
@media (max-width:767px) {
  body.app-ui {
    background:var(--ui-bg);
    min-height:100vh;
    display:block;
  }

  .app-phone {
    width:100%;
    min-height:100dvh;
    background:var(--ui-bg);
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
}

@media (min-width:768px) {
  .app-phone {
    display:contents;
  }
}

/* ================================================================
   5. MOBILE: APP HEADER
   ================================================================ */
.app-header {
  height:var(--ui-topbar-h);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  background:var(--ui-surface);
  border-bottom:1px solid var(--ui-border);
  position:sticky;
  top:0;
  z-index:200;
  flex-shrink:0;
}

/* Hide on desktop — sidebar takes over */
@media (min-width:1024px) {
  .app-header { display:none; }
}

.app-header-toggle {
  width:36px; height:36px;
  border:none; background:transparent; cursor:pointer;
  border-radius:var(--ui-r-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--ui-sub);
  transition:background var(--ui-dur) var(--ui-ease),color var(--ui-dur) var(--ui-ease);
  flex-shrink:0;
}
.app-header-toggle:hover { background:var(--ui-accent-lt); color:var(--ui-accent); }

.app-header-title {
  flex:1; font-size:1rem; font-weight:700; color:var(--ui-heading);
  letter-spacing:-0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.app-header-right {
  display:flex; align-items:center; gap:6px; flex-shrink:0;
}

/* ================================================================
   6. MOBILE: SCROLLABLE CONTENT
   ================================================================ */
.app-body {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  padding-bottom:calc(var(--ui-bnav-h) + 20px);
}
@media (min-width:1024px) {
  .app-body {
    padding-bottom:0;
    overflow-y:auto;
  }
}

/* ================================================================
   7. BOTTOM NAVIGATION — glassmorphism floating pill
   ================================================================ */
.app-bnav {
  position:fixed;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:300;
  width:calc(100% - 32px);
  max-width:calc(var(--ui-phone-max) - 32px);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-radius:var(--ui-r-full);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding:6px 8px;
  height:var(--ui-bnav-h);
}
@media (min-width:768px) {
  .app-bnav { display:none; }
}

.app-bnav-item {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 12px; border-radius:var(--ui-r-lg);
  cursor:pointer; text-decoration:none;
  color:var(--ui-muted);
  font-size:0.625rem; font-weight:600; letter-spacing:0.04em;
  transition:all var(--ui-dur) var(--ui-ease);
  position:relative; min-width:48px;
}
.app-bnav-item svg { width:22px; height:22px; }
.app-bnav-item span { display:block; }

.app-bnav-item.active {
  color:var(--ui-accent);
  background:var(--ui-accent-lt);
}
.app-bnav-item.active::before {
  content:'';
  position:absolute;
  top:-6px; left:50%; transform:translateX(-50%);
  width:24px; height:3px;
  background:var(--ui-accent);
  border-radius:0 0 3px 3px;
}

.app-bnav-badge {
  position:absolute; top:2px; right:6px;
  background:var(--ui-accent); color:#fff;
  border-radius:var(--ui-r-full);
  font-size:0.5rem; font-weight:700;
  padding:1px 4px; min-width:14px; height:14px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(255,255,255,.9);
  line-height:1;
}

/* ================================================================
   8. OVERLAY (drawer backdrop)
   ================================================================ */
.app-overlay {
  position:fixed; inset:0; z-index:400;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(2px);
  opacity:0; pointer-events:none;
  transition:opacity var(--ui-dur) var(--ui-ease);
}
.app-overlay.open { opacity:1; pointer-events:all; }

/* ================================================================
   9. DRAWER MENU
   ================================================================ */
.app-drawer {
  position:fixed;
  inset:0 auto 0 0;
  width:min(300px,82vw);
  z-index:500;
  background:linear-gradient(160deg,#0f172a 0%,#1e1b4b 60%,#0f172a 100%);
  transform:translateX(-100%);
  transition:transform 0.3s var(--ui-ease);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.app-drawer.open { transform:translateX(0); }

/* Drawer always fixed on mobile — never scroll with page */
@media (max-width:767px) {
  .app-drawer {
    position:fixed;
    top:0; left:0; bottom:0; right:auto;
    height:100%;
    border-radius:0;
  }
  .app-overlay {
    position:fixed;
    top:0; left:0; width:100%; height:100%;
  }
}

/* On desktop: drawer becomes the sidebar */
@media (min-width:1024px) {
  .app-drawer {
    position:fixed;
    transform:translateX(0);
    width:var(--ui-sidebar-w);
    inset:0 auto 0 0;
    border-radius:0;
  }
}

.app-drawer-header {
  padding:28px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.app-drawer-brand {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; margin-bottom:18px;
}
.app-drawer-logo {
  width:34px; height:34px; border-radius:var(--ui-r-sm);
  object-fit:contain;
}
.app-drawer-brand-name {
  font-size:0.9375rem; font-weight:700;
  color:#fff; letter-spacing:-0.02em;
}

.app-drawer-user {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:var(--ui-r-md);
  background:rgba(255,255,255,.06);
  text-decoration:none;
  transition:background var(--ui-dur) var(--ui-ease);
}
.app-drawer-user:hover { background:rgba(255,255,255,.1); }

.app-drawer-avatar {
  width:40px; height:40px; border-radius:var(--ui-r-full);
  object-fit:cover;
  border:2px solid var(--ui-accent,#f97316);
  flex-shrink:0;
}
.app-drawer-user-name {
  font-size:0.875rem; font-weight:600; color:#fff;
  line-height:1.2; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.app-drawer-user-role {
  font-size:0.6875rem; color:rgba(255,255,255,.5);
  margin-top:2px; font-weight:500;
}

/* Drawer close btn (mobile only) */
.app-drawer-close {
  display:none;
}
@media (max-width:1023px) {
  .app-drawer-close {
    display:flex;
    position:absolute; top:14px; right:14px;
    width:28px; height:28px; border-radius:var(--ui-r-full);
    background:rgba(255,255,255,.08); border:none; cursor:pointer;
    align-items:center; justify-content:center;
    color:rgba(255,255,255,.7);
    transition:background var(--ui-dur);
  }
  .app-drawer-close:hover { background:rgba(255,255,255,.16); }
}

/* Nav list */
.app-drawer-nav {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:12px 12px 8px;
  scrollbar-width:none;
}
.app-drawer-nav::-webkit-scrollbar { display:none; }

.app-drawer-label {
  font-size:0.625rem; font-weight:700; letter-spacing:0.1em;
  color:rgba(255,255,255,.3); text-transform:uppercase;
  padding:8px 10px 4px;
}

.app-drawer-item {
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:var(--ui-r-sm);
  color:rgba(255,255,255,.7);
  text-decoration:none; font-size:0.875rem; font-weight:500;
  cursor:pointer;
  transition:all var(--ui-dur) var(--ui-ease);
  position:relative;
  margin-bottom:2px;
}
.app-drawer-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.app-drawer-item.active {
  background:var(--ui-sb-accent,rgba(249,115,22,.20));
  color:#fff; font-weight:600;
}
.app-drawer-item.active::before {
  content:'';
  position:absolute; left:0; top:4px; bottom:4px;
  width:3px; border-radius:0 2px 2px 0;
  background:var(--ui-accent,#f97316);
}
.app-drawer-item-icon {
  width:18px; height:18px; flex-shrink:0; opacity:.8;
}
.app-drawer-item.active .app-drawer-item-icon { opacity:1; }
.app-drawer-badge {
  margin-left:auto; background:var(--ui-accent,#f97316); color:#fff;
  border-radius:var(--ui-r-full); font-size:0.5625rem; font-weight:700;
  padding:1px 5px; min-width:16px; height:16px;
  display:flex; align-items:center; justify-content:center; line-height:1;
}

/* Footer links */
.app-drawer-footer {
  padding:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.app-drawer-footer-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--ui-r-sm);
  color:rgba(255,255,255,.5); text-decoration:none;
  font-size:0.8125rem; font-weight:500;
  transition:all var(--ui-dur) var(--ui-ease);
  margin-bottom:2px;
}
.app-drawer-footer-item:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.9); }

/* ================================================================
   10. DESKTOP: MAIN STRUCTURE
   ================================================================ */
@media (min-width:1024px) {
  body.app-ui {
    background:var(--ui-bg);
  }

  .app-layout {
    display:flex;
    min-height:100vh;
  }

  /* app-drawer IS the desktop sidebar */
  .app-main {
    flex:1; min-width:0;
    margin-left:var(--ui-sidebar-w);
    display:flex;
    flex-direction:column;
    min-height:100vh;
  }
}

/* ================================================================
   11. DESKTOP: TOP HEADER
   ================================================================ */
.app-topbar {
  display:none;
}
@media (min-width:1024px) {
  .app-topbar {
    display:flex; align-items:center; gap:16px;
    height:var(--ui-topbar-h);
    padding:0 28px;
    background:var(--ui-surface);
    border-bottom:1px solid var(--ui-border);
    position:sticky; top:0; z-index:100;
    flex-shrink:0;
  }

  .app-topbar-title {
    font-size:1.0625rem; font-weight:700; color:var(--ui-heading);
    letter-spacing:-0.02em;
  }

  .app-topbar-search {
    flex:1; max-width:360px;
    display:flex; align-items:center; gap:8px;
    background:var(--ui-bg); border:1.5px solid var(--ui-border);
    border-radius:var(--ui-r-full); padding:0 14px;
    height:36px; transition:border-color var(--ui-dur);
  }
  .app-topbar-search:focus-within { border-color:var(--ui-accent); }
  .app-topbar-search input {
    flex:1; border:none; background:transparent;
    font-size:0.8125rem; color:var(--ui-text); outline:none;
    font-family:inherit;
  }
  .app-topbar-search input::placeholder { color:var(--ui-muted); }
  .app-topbar-search svg { width:15px; height:15px; color:var(--ui-muted); flex-shrink:0; }

  .app-topbar-right {
    margin-left:auto;
    display:flex; align-items:center; gap:10px;
  }
}

/* ================================================================
   12. NOTIFICATION BELL (shared header widget)
   ================================================================ */
.app-notif {
  position:relative;
}
.app-notif-btn {
  width:36px; height:36px; border-radius:var(--ui-r-sm);
  background:transparent; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--ui-sub); transition:all var(--ui-dur) var(--ui-ease);
}
.app-notif-btn:hover { background:var(--ui-accent-lt); color:var(--ui-accent); }
.app-notif-badge {
  position:absolute; top:4px; right:4px;
  background:var(--ui-accent); color:#fff;
  border-radius:var(--ui-r-full); font-size:0.5rem; font-weight:700;
  padding:1px 4px; min-width:15px; height:15px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--ui-surface); line-height:1;
}

.app-notif-panel {
  display:none;
  position:fixed;
  width:330px; max-width:calc(100vw - 16px);
  background:var(--ui-surface); border-radius:var(--ui-r-lg);
  box-shadow:0 16px 48px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
  z-index:9999; overflow:hidden;
  max-height:70vh; overflow-y:auto;
  scrollbar-width:none;
  animation:ui-dropdown-in .18s var(--ui-ease);
}
.app-notif-panel::-webkit-scrollbar { display:none; }
.app-notif-panel.open { display:block; }

@keyframes ui-dropdown-in {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

.app-notif-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--ui-border);
  position:sticky; top:0; background:var(--ui-surface);
  font-size:0.875rem; font-weight:700; color:var(--ui-heading);
}
.app-notif-markbtn {
  font-size:0.6875rem; font-weight:600; color:var(--ui-accent);
  background:none; border:none; cursor:pointer;
}
.app-notif-item {
  display:flex; gap:10px; padding:12px 16px;
  border-bottom:1px solid #f8fafc; cursor:pointer;
  transition:background var(--ui-dur);
}
.app-notif-item:hover { background:#f8fafc; }
.app-notif-item:last-child { border-bottom:none; }
.app-notif-ico {
  width:32px; height:32px; border-radius:var(--ui-r-sm);
  background:var(--ui-accent-lt); color:var(--ui-accent);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:13px;
}
.app-notif-body-t { font-size:0.8125rem; font-weight:600; color:var(--ui-heading); }
.app-notif-body-m { font-size:0.75rem; color:var(--ui-sub); margin-top:2px; }
.app-notif-body-d { font-size:0.625rem; color:var(--ui-muted); margin-top:3px; }
.app-notif-empty  { padding:32px; text-align:center; color:var(--ui-muted); }
.app-notif-empty svg { opacity:.35; display:block; margin:0 auto 10px; width:36px; height:36px; }
.app-notif-empty p { font-size:0.8125rem; }

/* Profile dropdown wrap */
.app-profile-wrap {
  position:relative;
  display:flex; align-items:center;
}

/* Avatar link */
.app-topbar-avatar,.app-header-avatar {
  width:34px; height:34px; border-radius:var(--ui-r-full);
  object-fit:cover; border:2px solid var(--ui-accent-lt);
  display:block; flex-shrink:0;
  transition:border-color var(--ui-dur), box-shadow var(--ui-dur);
}
.app-topbar-avatar:hover,.app-header-avatar:hover {
  border-color:var(--ui-accent);
  box-shadow:0 0 0 3px var(--ui-accent-lt);
}

/* ================================================================
   13. CONTENT AREA
   ================================================================ */
.app-content {
  flex:1;
  padding:20px 16px;
}
@media (min-width:768px) {
  .app-content { padding:28px 24px; }
}
@media (min-width:1024px) {
  .app-content { padding:32px 32px; }
}

/* ================================================================
   14. DASHBOARD CARDS — fintech style
   ================================================================ */

/* Wallet Hero Card */
.ui-wallet {
  background:var(--ui-accent-grd);
  border-radius:var(--ui-r-xl);
  padding:24px 22px;
  color:#fff;
  position:relative; overflow:hidden;
  margin-bottom:20px;
  box-shadow:var(--ui-shadow-md);
}
.ui-wallet::before {
  content:'';
  position:absolute; top:-30px; right:-30px;
  width:140px; height:140px; border-radius:50%;
  background:rgba(255,255,255,.08);
  pointer-events:none;
}
.ui-wallet::after {
  content:'';
  position:absolute; bottom:-50px; right:40px;
  width:100px; height:100px; border-radius:50%;
  background:rgba(255,255,255,.05);
  pointer-events:none;
}
.ui-wallet-label {
  font-size:0.75rem; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; opacity:.8; margin-bottom:6px;
}
.ui-wallet-amount {
  font-size:2rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:18px;
  line-height:1;
}
.ui-wallet-actions { display:flex; gap:10px; }

/* Stat Grid */
.ui-stat-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:20px;
}
@media (min-width:768px) {
  .ui-stat-grid { grid-template-columns:repeat(3,1fr); gap:16px; }
}
@media (min-width:1280px) {
  .ui-stat-grid { grid-template-columns:repeat(4,1fr); }
}

.ui-stat {
  background:var(--ui-surface);
  border-radius:var(--ui-r-lg);
  padding:18px 16px;
  box-shadow:var(--ui-shadow-xs);
  border:1px solid var(--ui-border);
  transition:transform var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease);
  cursor:default;
}
.ui-stat:hover {
  transform:translateY(-2px);
  box-shadow:var(--ui-shadow-md);
}
.ui-stat-ico {
  width:40px; height:40px; border-radius:var(--ui-r-sm);
  background:var(--ui-accent-lt); color:var(--ui-accent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.ui-stat-val {
  font-size:1.5rem; font-weight:800; color:var(--ui-heading);
  letter-spacing:-0.03em; line-height:1; margin-bottom:4px;
}
.ui-stat-label {
  font-size:0.75rem; font-weight:500; color:var(--ui-sub);
}
.ui-stat-trend {
  font-size:0.6875rem; font-weight:600; margin-top:4px;
  display:flex; align-items:center; gap:3px;
}
.ui-stat-trend.up   { color:#16a34a; }
.ui-stat-trend.down { color:#dc2626; }

/* General Card */
.ui-card {
  background:var(--ui-surface);
  border-radius:var(--ui-r-lg);
  border:1px solid var(--ui-border);
  box-shadow:var(--ui-shadow-xs);
  overflow:hidden;
  margin-bottom:16px;
  transition:box-shadow var(--ui-dur) var(--ui-ease);
}
.ui-card:hover { box-shadow:var(--ui-shadow-sm); }

.ui-card-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid var(--ui-border);
}
.ui-card-title {
  font-size:0.9375rem; font-weight:700; color:var(--ui-heading);
  letter-spacing:-0.01em;
}
.ui-card-body { padding:16px 18px; }
.ui-card-footer {
  padding:12px 18px;
  border-top:1px solid var(--ui-border);
  background:#fafbfc;
}

/* ================================================================
   15. QUICK ACTIONS
   ================================================================ */
.ui-actions {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:20px;
}
@media (min-width:768px) {
  .ui-actions { grid-template-columns:repeat(4,1fr); }
}

.ui-action-btn {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 12px; border-radius:var(--ui-r-lg);
  background:var(--ui-surface); border:1.5px solid var(--ui-border);
  cursor:pointer; text-decoration:none;
  color:var(--ui-text); font-size:0.8125rem; font-weight:600;
  text-align:center; transition:all var(--ui-dur) var(--ui-ease);
}
.ui-action-btn:hover {
  border-color:var(--ui-accent); color:var(--ui-accent);
  background:var(--ui-accent-lt);
  transform:translateY(-1px);
}
.ui-action-ico {
  width:44px; height:44px; border-radius:var(--ui-r-md);
  background:var(--ui-accent-lt); color:var(--ui-accent);
  display:flex; align-items:center; justify-content:center;
}

/* ================================================================
   16. LIST ITEMS (orders, bookings, etc.)
   ================================================================ */
.ui-list-item {
  display:flex; align-items:center; gap:12px;
  padding:13px 0; border-bottom:1px solid var(--ui-border);
  transition:background var(--ui-dur);
}
.ui-list-item:last-child { border-bottom:none; }

.ui-list-ico {
  width:38px; height:38px; border-radius:var(--ui-r-sm);
  background:var(--ui-accent-lt); color:var(--ui-accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ui-list-body { flex:1; min-width:0; }
.ui-list-title {
  font-size:0.875rem; font-weight:600; color:var(--ui-heading);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ui-list-sub { font-size:0.75rem; color:var(--ui-sub); margin-top:2px; }
.ui-list-right { text-align:right; flex-shrink:0; }
.ui-list-val { font-size:0.875rem; font-weight:700; color:var(--ui-heading); }
.ui-list-date { font-size:0.6875rem; color:var(--ui-muted); margin-top:2px; }

/* ================================================================
   17. BADGES / STATUS
   ================================================================ */
.ui-badge {
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:var(--ui-r-full);
  font-size:0.6875rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; white-space:nowrap;
}
.ui-badge-green   { background:#dcfce7; color:#166534; }
.ui-badge-red     { background:#fee2e2; color:#991b1b; }
.ui-badge-yellow  { background:#fef3c7; color:#92400e; }
.ui-badge-blue    { background:#dbeafe; color:#1e40af; }
.ui-badge-purple  { background:#ede9fe; color:#5b21b6; }
.ui-badge-gray    { background:#f1f5f9; color:#475569; }
.ui-badge-orange  { background:#ffedd5; color:#9a3412; }

/* ================================================================
   18. BUTTONS
   ================================================================ */
.ui-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:7px; padding:10px 20px; border-radius:var(--ui-r-sm);
  font-family:inherit; font-size:0.875rem; font-weight:600;
  cursor:pointer; text-decoration:none;
  border:none; outline:none;
  transition:all var(--ui-dur) var(--ui-ease);
  position:relative; overflow:hidden; flex-shrink:0;
  letter-spacing:-0.01em;
}
.ui-btn:active { transform:scale(0.97); }

/* Ripple */
.ui-btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0); border-radius:inherit;
  transition:background .3s;
}
.ui-btn:active::after { background:rgba(255,255,255,.18); }

.ui-btn-primary {
  background:var(--ui-accent-grd);
  color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.16);
}
.ui-btn-primary:hover { filter:brightness(1.06); box-shadow:0 6px 20px rgba(0,0,0,.20); }

.ui-btn-ghost {
  background:rgba(255,255,255,.15);
  color:#fff; border:1.5px solid rgba(255,255,255,.3);
  backdrop-filter:blur(4px);
}
.ui-btn-ghost:hover { background:rgba(255,255,255,.22); }

.ui-btn-outline {
  background:transparent;
  color:var(--ui-accent); border:1.5px solid var(--ui-accent);
}
.ui-btn-outline:hover { background:var(--ui-accent-lt); }

.ui-btn-surface {
  background:var(--ui-surface); color:var(--ui-text);
  border:1.5px solid var(--ui-border);
  box-shadow:var(--ui-shadow-xs);
}
.ui-btn-surface:hover { border-color:var(--ui-accent); color:var(--ui-accent); }

.ui-btn-sm { padding:6px 14px; font-size:0.8125rem; border-radius:var(--ui-r-xs); }
.ui-btn-lg { padding:13px 26px; font-size:0.9375rem; }
.ui-btn-full { width:100%; }

/* Loading state */
.ui-btn.loading {
  pointer-events:none; opacity:.8;
}
.ui-btn.loading .ui-btn-txt { opacity:0; }
.ui-btn.loading::before {
  content:'';
  position:absolute;
  width:18px; height:18px;
  border:2.5px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:ui-spin .7s linear infinite;
}
@keyframes ui-spin { to { transform:rotate(360deg); } }

/* ================================================================
   19. FORMS
   ================================================================ */
.ui-form-group { margin-bottom:16px; }
.ui-label {
  display:block; font-size:0.8125rem; font-weight:600;
  color:var(--ui-text); margin-bottom:6px;
}
.ui-input, .ui-select, .ui-textarea {
  width:100%; padding:10px 14px;
  border:1.5px solid var(--ui-border); border-radius:var(--ui-r-sm);
  background:var(--ui-surface); color:var(--ui-text);
  font-family:inherit; font-size:0.875rem;
  transition:border-color var(--ui-dur), box-shadow var(--ui-dur);
  outline:none;
}
.ui-input:focus, .ui-select:focus, .ui-textarea:focus {
  border-color:var(--ui-accent);
  box-shadow:0 0 0 3px var(--ui-accent-lt);
}
.ui-textarea { resize:vertical; min-height:88px; }
.ui-select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:32px;
}
.ui-hint  { font-size:0.6875rem; color:var(--ui-muted); margin-top:4px; }
.ui-error { font-size:0.75rem; color:#dc2626; margin-top:4px; }

/* ================================================================
   20. TOAST NOTIFICATIONS
   ================================================================ */
.ui-toast-stack {
  position:fixed; z-index:9000;
  display:flex; flex-direction:column; gap:8px;
  pointer-events:none;
  /* Mobile: top center */
  top:14px; left:50%; transform:translateX(-50%);
  width:calc(100% - 32px); max-width:360px;
}
@media (min-width:768px) {
  .ui-toast-stack {
    top:20px; right:20px;
    left:auto; transform:none;
    max-width:360px; width:360px;
  }
}

.ui-toast {
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 14px; border-radius:var(--ui-r-md);
  background:var(--ui-surface);
  box-shadow:var(--ui-shadow-lg), 0 0 0 1px rgba(0,0,0,.05);
  pointer-events:all; cursor:default;
  animation:ui-toast-in .28s var(--ui-spring);
  transition:opacity .22s, transform .22s;
}
.ui-toast.hiding {
  opacity:0; transform:translateY(-8px) scale(0.96);
}
@keyframes ui-toast-in {
  from { opacity:0; transform:translateY(-12px) scale(0.96); }
  to   { opacity:1; transform:none; }
}

.ui-toast-ico {
  width:30px; height:30px; border-radius:var(--ui-r-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.ui-toast.success .ui-toast-ico { background:#dcfce7; color:#16a34a; }
.ui-toast.error   .ui-toast-ico { background:#fee2e2; color:#dc2626; }
.ui-toast.info    .ui-toast-ico { background:#dbeafe; color:#2563eb; }
.ui-toast.warning .ui-toast-ico { background:#fef3c7; color:#d97706; }

.ui-toast-body { flex:1; min-width:0; }
.ui-toast-title { font-size:0.8125rem; font-weight:700; color:var(--ui-heading); }
.ui-toast-msg   { font-size:0.75rem; color:var(--ui-sub); margin-top:2px; }

.ui-toast-close {
  background:none; border:none; cursor:pointer; padding:2px;
  color:var(--ui-muted); line-height:0; flex-shrink:0; align-self:flex-start;
  transition:color var(--ui-dur);
}
.ui-toast-close:hover { color:var(--ui-text); }

/* ================================================================
   21. SECTION HEADER
   ================================================================ */
.ui-section-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.ui-section-title {
  font-size:0.9375rem; font-weight:700; color:var(--ui-heading);
  letter-spacing:-0.01em;
}
.ui-section-link {
  font-size:0.75rem; font-weight:600;
  color:var(--ui-accent); text-decoration:none;
}
.ui-section-link:hover { text-decoration:underline; }

/* Page back header */
.ui-page-hd {
  display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap;
}
.ui-page-back {
  width:34px; height:34px; border-radius:var(--ui-r-sm);
  border:1.5px solid var(--ui-border); background:var(--ui-surface);
  display:flex; align-items:center; justify-content:center;
  color:var(--ui-sub); text-decoration:none; flex-shrink:0;
  transition:all var(--ui-dur); cursor:pointer;
}
.ui-page-back:hover { border-color:var(--ui-accent); color:var(--ui-accent); }
.ui-page-title { font-size:1.125rem; font-weight:700; color:var(--ui-heading); letter-spacing:-0.02em; flex:1; }
.ui-page-actions { display:flex; gap:8px; }

/* ================================================================
   22. TABLE
   ================================================================ */
.ui-table-wrap { overflow-x:auto; }
.ui-table { width:100%; border-collapse:collapse; font-size:0.8125rem; }
.ui-table thead th {
  padding:10px 14px;
  text-align:left; font-size:0.625rem; font-weight:700;
  color:var(--ui-muted); text-transform:uppercase; letter-spacing:.06em;
  background:#f8fafc; white-space:nowrap;
}
.ui-table tbody tr { border-top:1px solid var(--ui-border); transition:background var(--ui-dur); }
.ui-table tbody tr:hover { background:#f8fafc; }
.ui-table tbody td { padding:12px 14px; color:var(--ui-text); vertical-align:middle; }
.ui-table a { color:var(--ui-accent); font-weight:600; text-decoration:none; }
.ui-table a:hover { text-decoration:underline; }

/* ================================================================
   23. ALERT / FLASH
   ================================================================ */
.ui-alert {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 16px; border-radius:var(--ui-r-sm);
  font-size:0.8125rem; margin-bottom:16px;
}
.ui-alert-success { background:#dcfce7; color:#166534; }
.ui-alert-error   { background:#fee2e2; color:#991b1b; }
.ui-alert-warning { background:#fef3c7; color:#92400e; }
.ui-alert-info    { background:#dbeafe; color:#1e40af; }

/* Flash compat classes */
.flash-success { background:#dcfce7; color:#166534; padding:12px 16px; border-radius:var(--ui-r-sm); margin-bottom:14px; font-size:0.8125rem; }
.flash-error   { background:#fee2e2; color:#991b1b; padding:12px 16px; border-radius:var(--ui-r-sm); margin-bottom:14px; font-size:0.8125rem; }

/* ================================================================
   24. PAGINATION
   ================================================================ */
.ui-pagination {
  display:flex; align-items:center; justify-content:center;
  gap:5px; padding:20px 0 4px; flex-wrap:wrap;
}
.ui-page-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 9px;
  border-radius:var(--ui-r-xs); font-size:0.8125rem; font-weight:600;
  border:1.5px solid var(--ui-border); background:var(--ui-surface); color:var(--ui-sub);
  text-decoration:none; cursor:pointer;
  transition:all var(--ui-dur) var(--ui-ease);
}
.ui-page-btn:hover    { border-color:var(--ui-accent); color:var(--ui-accent); }
.ui-page-btn.active   { background:var(--ui-accent); border-color:var(--ui-accent); color:#fff; }
.ui-page-btn.disabled { opacity:.4; pointer-events:none; }

/* ================================================================
   25. EMPTY STATE
   ================================================================ */
.ui-empty {
  display:flex; flex-direction:column; align-items:center;
  padding:48px 24px; text-align:center;
}
.ui-empty-ico {
  width:64px; height:64px; border-radius:var(--ui-r-lg);
  background:var(--ui-accent-lt); color:var(--ui-accent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.ui-empty-title { font-size:1rem; font-weight:700; color:var(--ui-heading); margin-bottom:6px; }
.ui-empty-text  { font-size:0.875rem; color:var(--ui-sub); max-width:260px; line-height:1.5; }

/* ================================================================
   26. ANIMATIONS (entry)
   ================================================================ */
.ui-anim {
  opacity:0; transform:translateY(16px);
  transition:opacity .4s var(--ui-ease), transform .4s var(--ui-ease);
}
.ui-anim.visible {
  opacity:1; transform:translateY(0);
}
.ui-anim:nth-child(2) { transition-delay:.06s; }
.ui-anim:nth-child(3) { transition-delay:.12s; }
.ui-anim:nth-child(4) { transition-delay:.18s; }
.ui-anim:nth-child(5) { transition-delay:.24s; }
.ui-anim:nth-child(6) { transition-delay:.30s; }

/* Skeleton loader */
.ui-skeleton {
  background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);
  background-size:400% 100%;
  animation:ui-shimmer 1.4s ease infinite;
  border-radius:var(--ui-r-sm);
}
@keyframes ui-shimmer { to { background-position:-400% 0; } }

/* ================================================================
   27. ONLINE TOGGLE (Technician)
   ================================================================ */
.ui-online-toggle {
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-radius:var(--ui-r-lg);
  background:var(--ui-surface); border:1.5px solid var(--ui-border);
  margin-bottom:16px;
}
.ui-online-toggle-info { flex:1; }
.ui-online-toggle-title { font-size:0.875rem; font-weight:700; color:var(--ui-heading); }
.ui-online-toggle-sub   { font-size:0.75rem; color:var(--ui-sub); }

.ui-switch {
  position:relative; display:inline-block;
  width:48px; height:26px; flex-shrink:0;
}
.ui-switch input { opacity:0; width:0; height:0; }
.ui-switch-track {
  position:absolute; inset:0; cursor:pointer;
  background:#cbd5e1; border-radius:var(--ui-r-full);
  transition:background .25s;
}
.ui-switch-track::after {
  content:''; position:absolute;
  top:3px; left:3px;
  width:20px; height:20px;
  border-radius:50%; background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  transition:transform .25s var(--ui-spring);
}
.ui-switch input:checked + .ui-switch-track { background:var(--ui-accent); }
.ui-switch input:checked + .ui-switch-track::after { transform:translateX(22px); }
.ui-switch-dot {
  width:8px; height:8px; border-radius:50%;
  background:#94a3b8; display:inline-block; margin-right:5px;
  vertical-align:middle; transition:background .2s;
}
.ui-switch-dot.online { background:#22c55e; }

/* ================================================================
   28. RESPONSIVE GRID HELPERS
   ================================================================ */
.ui-grid { display:grid; gap:16px; }
.ui-grid-2 { grid-template-columns:repeat(2,1fr); }
.ui-grid-3 { grid-template-columns:repeat(3,1fr); }
.ui-grid-4 { grid-template-columns:repeat(4,1fr); }

@media (max-width:767px) {
  .ui-grid-2, .ui-grid-3, .ui-grid-4 { grid-template-columns:1fr; }
}
@media (min-width:768px) and (max-width:1023px) {
  .ui-grid-3, .ui-grid-4 { grid-template-columns:repeat(2,1fr); }
}

/* ================================================================
   29. UTILITY
   ================================================================ */
.ui-hide-mobile   { display:none; }
.ui-hide-desktop  { display:block; }
@media (min-width:768px) {
  .ui-hide-mobile  { display:block; }
  .ui-hide-desktop { display:none; }
}

.ui-txt-accent   { color:var(--ui-accent); }
.ui-txt-muted    { color:var(--ui-muted); }
.ui-txt-sub      { color:var(--ui-sub); }
.ui-fw-bold      { font-weight:700; }
.ui-mt-0 { margin-top:0; }
.ui-mb-0 { margin-bottom:0; }
.ui-text-center { text-align:center; }
.ui-flex         { display:flex; }
.ui-flex-center  { display:flex; align-items:center; justify-content:center; }
.ui-gap-8        { gap:8px; }
.ui-gap-12       { gap:12px; }

/* Make old role CSS tables/images safe */
.app-content table { max-width:100%; }
.app-content img   { max-width:100%; }
.app-content *     { box-sizing:border-box; }

/* ================================================================
   PRODUCTS PAGE — Premium Listing Layout
   ================================================================ */

/* Sticky search bar */
.plp2-search-bar {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:var(--ui-surface);
  border:1.5px solid var(--ui-border);
  border-radius:var(--ui-r-full);
  margin-bottom:16px;
  transition:border-color var(--ui-dur), box-shadow var(--ui-dur);
}
.plp2-search-bar:focus-within {
  border-color:var(--ui-accent);
  box-shadow:0 0 0 3px var(--ui-accent-lt);
}
.plp2-search-bar input {
  flex:1; border:none; background:transparent; outline:none;
  font-size:.9375rem; font-family:inherit; color:var(--ui-text);
}
.plp2-search-bar input::placeholder { color:var(--ui-muted); }
.plp2-search-bar svg { color:var(--ui-muted); flex-shrink:0; }

/* Category chips scroll row */
.plp2-cats {
  display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;
  margin-bottom:18px; scrollbar-width:none;
}
.plp2-cats::-webkit-scrollbar { display:none; }
.plp2-cat {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 14px; border-radius:var(--ui-r-full);
  border:1.5px solid var(--ui-border); background:var(--ui-surface);
  font-size:.8125rem; font-weight:600; color:var(--ui-sub);
  white-space:nowrap; text-decoration:none; flex-shrink:0;
  transition:all var(--ui-dur) var(--ui-ease);
}
.plp2-cat:hover   { border-color:var(--ui-accent); color:var(--ui-accent); }
.plp2-cat.active  {
  background:var(--ui-accent); border-color:var(--ui-accent);
  color:#fff; box-shadow:0 3px 10px var(--ui-accent-lt);
}

/* Sort/filter bar */
.plp2-toolbar {
  display:flex; align-items:center; gap:8px;
  margin-bottom:16px; flex-wrap:wrap;
}
.plp2-sort {
  display:flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:var(--ui-r-sm);
  border:1.5px solid var(--ui-border); background:var(--ui-surface);
  font-size:.8125rem; color:var(--ui-sub); cursor:pointer;
}
.plp2-sort select {
  border:none; background:transparent; outline:none;
  font-size:.8125rem; font-family:inherit; color:var(--ui-text);
  cursor:pointer;
}
.plp2-budget { display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.plp2-budget::-webkit-scrollbar { display:none; }
.plp2-budget-chip {
  padding:5px 10px; border-radius:var(--ui-r-full);
  border:1.5px solid var(--ui-border); background:var(--ui-surface);
  font-size:.75rem; font-weight:600; color:var(--ui-sub);
  white-space:nowrap; text-decoration:none; flex-shrink:0;
  transition:all var(--ui-dur);
}
.plp2-budget-chip:hover  { border-color:var(--ui-accent); color:var(--ui-accent); }
.plp2-budget-chip.active { background:var(--ui-accent-lt); border-color:var(--ui-accent); color:var(--ui-accent); }

/* Product grid */
.plp2-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:24px;
}
@media (min-width:640px)  { .plp2-grid { grid-template-columns:repeat(3,1fr); gap:16px; } }
@media (min-width:1024px) { .plp2-grid { grid-template-columns:repeat(3,1fr); gap:20px; } }
@media (min-width:1280px) { .plp2-grid { grid-template-columns:repeat(4,1fr); } }

/* Product card */
.plp2-card {
  background:var(--ui-surface);
  border:1.5px solid var(--ui-border);
  border-radius:var(--ui-r-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease);
  text-decoration:none;
  color:inherit;
}
.plp2-card:hover {
  transform:translateY(-3px);
  box-shadow:var(--ui-shadow-md);
  border-color:var(--ui-accent-lt);
}

/* Card image area */
.plp2-img-wrap {
  position:relative;
  aspect-ratio:4/3;
  background:#f8fafc;
  overflow:hidden;
  flex-shrink:0;
}
.plp2-img-wrap img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s var(--ui-ease);
}
.plp2-card:hover .plp2-img-wrap img { transform:scale(1.04); }
.plp2-img-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem;
  background:linear-gradient(135deg,#f1f5f9 0%,#e2e8f0 100%);
}
.plp2-badge-new {
  position:absolute; top:8px; left:8px;
  background:var(--ui-accent); color:#fff;
  font-size:.5625rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 7px; border-radius:var(--ui-r-full);
}
.plp2-badge-popular {
  position:absolute; top:8px; left:8px;
  background:#7c3aed; color:#fff;
  font-size:.5625rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 7px; border-radius:var(--ui-r-full);
}

/* Card body */
.plp2-body {
  padding:12px; flex:1; display:flex; flex-direction:column;
}
.plp2-name {
  font-size:.875rem; font-weight:700; color:var(--ui-heading);
  line-height:1.3; margin-bottom:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.plp2-delivery {
  font-size:.6875rem; color:var(--ui-muted); margin-bottom:8px;
  display:flex; align-items:center; gap:3px;
}
.plp2-pricing { margin-top:auto; }
.plp2-price-row {
  display:flex; align-items:baseline; gap:4px; margin-bottom:2px;
}
.plp2-price-val {
  font-size:1rem; font-weight:800; color:var(--ui-accent);
  letter-spacing:-.02em;
}
.plp2-price-unit {
  font-size:.6875rem; font-weight:600; color:var(--ui-muted);
}
.plp2-price-day {
  font-size:.6875rem; color:var(--ui-muted);
}

/* Add to cart CTA */
.plp2-cta {
  display:flex; align-items:center; justify-content:center; gap:5px;
  margin-top:10px; padding:8px;
  background:var(--ui-accent-lt); color:var(--ui-accent);
  border-radius:var(--ui-r-sm); font-size:.8125rem; font-weight:700;
  text-decoration:none; transition:all var(--ui-dur) var(--ui-ease);
  border:1.5px solid transparent;
}
.plp2-cta:hover {
  background:var(--ui-accent); color:#fff;
}

/* Section header */
.plp2-section-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.plp2-section-title {
  font-size:1rem; font-weight:800; color:var(--ui-heading); letter-spacing:-.02em;
}
.plp2-total { font-size:.75rem; color:var(--ui-muted); }

/* Empty state */
.plp2-empty {
  text-align:center; padding:48px 20px;
}
.plp2-empty-ico { font-size:3rem; display:block; margin-bottom:12px; }
.plp2-empty-title { font-size:1rem; font-weight:700; color:var(--ui-heading); margin-bottom:6px; }
.plp2-empty-sub   { font-size:.875rem; color:var(--ui-sub); }

/* ================================================================
   ADMIN DASHBOARD STAT GRID
   ================================================================ */
.ui-wallet-hero {
  background:var(--ui-accent-grd); color:#fff;
  border-radius:var(--ui-r-xl); padding:22px 20px;
  margin-bottom:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
}

.adm-stat-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:16px;
}
@media (max-width:767px) {
  .adm-stat-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
}
@media (min-width:1100px) {
  .adm-stat-grid { grid-template-columns:repeat(4,1fr); }
}

.adm-stat-card {
  background:var(--ui-surface); border:1.5px solid var(--ui-border);
  border-radius:var(--ui-r-md); padding:14px;
  display:flex; flex-direction:column; gap:3px;
  box-shadow:var(--ui-shadow-xs);
  transition:box-shadow var(--ui-dur) var(--ui-ease);
}
.adm-stat-card:hover { box-shadow:var(--ui-shadow-sm); }
.adm-stat-ico {
  font-size:1.375rem; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ui-accent-lt); color:var(--ui-accent);
  border-radius:var(--ui-r-sm); margin-bottom:8px;
}
.adm-stat-label { font-size:.625rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ui-muted); }
.adm-stat-value { font-size:1.375rem; font-weight:800; color:var(--ui-heading); letter-spacing:-.03em; }
.adm-stat-sub   { font-size:.6875rem; color:var(--ui-sub); }
.adm-stat-link  { font-size:.6875rem; font-weight:700; color:var(--ui-accent); text-decoration:none; margin-top:4px; }

/* Pagination buttons */
.ui-page-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 14px; background:var(--ui-surface); border:1.5px solid var(--ui-border);
  border-radius:var(--ui-r-sm); font-size:.8125rem; font-weight:600;
  color:var(--ui-text); text-decoration:none; transition:all var(--ui-dur) var(--ui-ease);
}
.ui-page-btn:hover { border-color:var(--ui-accent); color:var(--ui-accent); }
.ui-page-btn.active { background:var(--ui-accent); color:#fff; border-color:var(--ui-accent); }

/* Empty state generic */
.ui-empty { text-align:center; padding:48px 20px; }
.ui-empty-ico   { font-size:3rem; display:block; margin-bottom:12px; }
.ui-empty-title { font-size:1rem; font-weight:700; color:var(--ui-heading); margin-bottom:6px; }
.ui-empty-text  { font-size:.875rem; color:var(--ui-sub); }