/* ============================================================
   CourtConnect — Admin console stylesheet
   Layers on top of app/styles.css tokens (same orange, Prompt,
   cc-* card kit). Desktop-first, responsive down to mobile.
   ============================================================ */

/* accent defaults (inline vars from the app still win) */
.cc-app{ --accent:#FF6600; --accent-2:#f59e0b; --accent-soft:rgba(255,102,0,.14);
  --accent-grad:linear-gradient(135deg,#FF6600,#f59e0b); }

/* success / warn / danger / info semantic tokens
   (.adm-login + .adm-toasts live outside .adm → same tokens there) */
.adm, .adm-login, .adm-toasts{
  --ok:#16a34a; --ok-soft:color-mix(in srgb,#16a34a 14%,transparent);
  --warn:#d97706; --warn-soft:color-mix(in srgb,#d97706 15%,transparent);
  --danger:#e11d48; --danger-soft:color-mix(in srgb,#e11d48 13%,transparent);
  --info:#2563eb; --info-soft:color-mix(in srgb,#2563eb 13%,transparent);
  --purple:#7c3aed; --purple-soft:color-mix(in srgb,#7c3aed 14%,transparent);
  --row-h:52px;
}
.cc-app.dark .adm, .cc-app.dark .adm-login, .cc-app.dark .adm-toasts{ --ok:#4ade80; --warn:#fbbf24; --danger:#fb7185; --info:#60a5fa; --purple:#a78bfa; }
.adm.compact{ --row-h:40px; }

/* Baseline button reset — Admin.html doesn't load Tailwind Preflight, so
   unstyled buttons (nav items, tabs, toggles) would show the native gray
   button face. :where() keeps specificity 0 so every button class still wins. */
:where(.adm button){ -webkit-appearance:none; appearance:none; background:transparent;
  border:0; color:inherit; font:inherit; line-height:normal; cursor:pointer; }

/* ============================================================
   Shell — sidebar + main
   ============================================================ */
.adm{
  height:100dvh; width:100%;
  display:grid; grid-template-columns:262px 1fr;
  background:var(--bg); color:var(--text);
  font-family:'Prompt','Outfit',system-ui,sans-serif;
  overflow:hidden; position:relative;
}

/* ---- Sidebar ---------------------------------------------- */
.adm-side{
  grid-column:1; display:flex; flex-direction:column; min-height:0;
  background:var(--nav-bg); border-right:1px solid var(--border);
  z-index:40;
}
.adm-brand{
  display:flex; align-items:center; gap:10px; padding:18px 18px 16px;
  border-bottom:1px solid var(--border-2); flex-shrink:0;
}
.adm-brand-mark{
  width:38px; height:38px; border-radius:11px; object-fit:contain; background:#fff; padding:5px;
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 28%,transparent); flex-shrink:0;
}
.adm-brand-txt{display:flex; flex-direction:column; gap:1px; min-width:0;}
.adm-brand-txt b{font-size:15px; font-weight:800; letter-spacing:-.3px; line-height:1.1;}
.adm-brand-txt b span{color:var(--accent);}
.adm-brand-txt small{font-size:10px; font-weight:700; color:var(--dimmer); letter-spacing:.4px; text-transform:uppercase;}

.adm-nav{flex:1; overflow-y:auto; padding:12px 12px 8px; scrollbar-width:none;}
.adm-nav::-webkit-scrollbar{display:none;}
.adm-nav-group{margin-bottom:6px;}
.adm-nav-group-label{
  font-size:9.5px; font-weight:800; color:var(--dimmer); letter-spacing:.7px;
  text-transform:uppercase; padding:12px 10px 6px;
}
.adm-nav-item{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 11px; border-radius:11px; margin-bottom:2px;
  color:var(--dim); font-size:13px; font-weight:600; text-align:left;
  transition:background .16s, color .16s; position:relative;
}
.adm-nav-item i{font-size:15px; width:20px; text-align:center; flex-shrink:0;}
.adm-nav-item:hover{background:var(--surface-2); color:var(--text);}
.adm-nav-item.on{
  background:var(--accent-soft); color:var(--accent); font-weight:800;
}
.adm-nav-item.on::before{
  content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--accent);
}
.adm-nav-badge{
  margin-left:auto; min-width:19px; height:19px; padding:0 6px; border-radius:9px;
  font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center;
  background:var(--danger); color:#fff;
}
.adm-nav-item.on .adm-nav-badge{background:var(--accent); color:#fff;}
.adm-nav-badge.muted{background:var(--surface-2); color:var(--dim); border:1px solid var(--border);}

.adm-side-foot{
  flex-shrink:0; padding:12px; border-top:1px solid var(--border-2);
  display:flex; align-items:center; gap:10px;
}
.adm-side-foot .adm-avatar{width:34px; height:34px; font-size:13px;}
.adm-side-foot-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.adm-side-foot-txt b{font-size:12.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.adm-side-foot-txt small{font-size:10.5px; color:var(--dimmer); font-weight:600;}
.adm-side-foot button{
  width:32px; height:32px; border-radius:9px; color:var(--dim);
  background:var(--surface-2); border:1px solid var(--border); flex-shrink:0;
  transition:color .15s, background .15s;
}
.adm-side-foot button:hover{color:var(--danger); background:var(--danger-soft); border-color:transparent;}

/* ---- Main column ------------------------------------------ */
.adm-main{grid-column:2; display:flex; flex-direction:column; min-width:0; min-height:0;}

.adm-topbar{
  flex-shrink:0; height:64px; display:flex; align-items:center; gap:14px;
  padding:0 24px; border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px); position:relative; z-index:30;
}
.adm-hamburger{display:none; width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-size:16px;}
.adm-page-title{display:flex; flex-direction:column; gap:1px; min-width:0;}
.adm-page-title h1{font-size:18px; font-weight:800; letter-spacing:-.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.adm-page-title small{font-size:11.5px; color:var(--dimmer); font-weight:600;}

.adm-search{
  margin-left:auto; display:flex; align-items:center; gap:9px;
  width:280px; max-width:34vw; height:40px; padding:0 13px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--dim);
  transition:border-color .18s, box-shadow .18s;
}
.adm-search:focus-within{border-color:color-mix(in srgb,var(--accent) 50%,transparent); box-shadow:0 0 0 3px var(--accent-soft);}
.adm-search i{font-size:13px; color:var(--dimmer);}
.adm-search input{flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--text); font-size:13px; font-family:inherit;}
.adm-search kbd{font-size:10px; font-weight:700; color:var(--dimmer); background:var(--bg); border:1px solid var(--border);
  border-radius:5px; padding:2px 5px; font-family:ui-monospace,monospace;}

.adm-top-btn{
  width:40px; height:40px; border-radius:12px; flex-shrink:0; position:relative;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-size:15px;
  transition:background .16s;
}
.adm-top-btn:hover{background:var(--surface-solid);}
.adm-top-btn .dot{position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%;
  background:var(--danger); border:2px solid var(--nav-bg);}

/* ---- Content scroll --------------------------------------- */
.adm-scroll{flex:1; overflow-y:auto; overflow-x:hidden; padding:24px; scrollbar-width:thin;}
.adm-scroll::-webkit-scrollbar{width:10px;}
.adm-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 14%,transparent); border-radius:6px; border:3px solid transparent; background-clip:content-box;}
.adm-wrap{max-width:1360px; margin:0 auto;}

/* ============================================================
   Reusable pieces
   ============================================================ */
.adm-avatar{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:#fff; letter-spacing:.3px;
  background:var(--accent-grad); box-shadow:0 3px 8px color-mix(in srgb,var(--accent) 24%,transparent);
}
.adm-avatar.a1{background:linear-gradient(135deg,#f97316,#ef4444);}
.adm-avatar.a2{background:linear-gradient(135deg,#3b82f6,#06b6d4);}
.adm-avatar.a3{background:linear-gradient(135deg,#8b5cf6,#d946ef);}
.adm-avatar.a4{background:linear-gradient(135deg,#10b981,#22c55e);}
.adm-avatar.a5{background:linear-gradient(135deg,#f59e0b,#eab308);}
.adm-avatar.a6{background:linear-gradient(135deg,#ec4899,#f43f5e);}
.adm-avatar.sm{width:30px; height:30px; font-size:11px; border-radius:9px;}
.adm-avatar.lg{width:60px; height:60px; font-size:22px; border-radius:17px;}

.adm-badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:8px;
  font-size:11px; font-weight:800; white-space:nowrap; line-height:1.35; letter-spacing:.1px;
  background:var(--surface-2); color:var(--dim); border:1px solid var(--border-2);
}
.adm-badge i{font-size:9px;}
.adm-badge.ok{color:var(--ok); background:var(--ok-soft); border-color:transparent;}
.adm-badge.warn{color:var(--warn); background:var(--warn-soft); border-color:transparent;}
.adm-badge.danger{color:var(--danger); background:var(--danger-soft); border-color:transparent;}
.adm-badge.info{color:var(--info); background:var(--info-soft); border-color:transparent;}
.adm-badge.purple{color:var(--purple); background:var(--purple-soft); border-color:transparent;}
.adm-badge.accent{color:var(--accent); background:var(--accent-soft); border-color:transparent;}
.adm-badge .dotm{width:6px; height:6px; border-radius:50%; background:currentColor;}

/* section heading */
.adm-sec-head{display:flex; align-items:center; gap:12px; margin:4px 0 14px;}
.adm-sec-head h2{font-size:15px; font-weight:800; letter-spacing:-.2px;}
.adm-sec-head .sub{font-size:12px; color:var(--dimmer); font-weight:600;}
.adm-sec-head .spacer{flex:1;}

/* buttons (extend cc-btn sizing for admin) */
.adm-btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 15px; border-radius:11px; font-size:12.5px; font-weight:800;
  white-space:nowrap; transition:transform .12s, filter .18s, background .16s; cursor:pointer;}
.adm-btn:active{transform:scale(.96);}
.adm-btn i{font-size:12px;}
.adm-btn.primary{background:var(--accent-grad); color:#fff; box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 30%,transparent);}
.adm-btn.primary:hover{filter:brightness(1.06);}
.adm-btn.ghost{background:var(--surface-2); color:var(--text); border:1px solid var(--border);}
.adm-btn.ghost:hover{background:var(--surface-solid);}
.adm-btn.danger{background:var(--danger-soft); color:var(--danger); border:1px solid transparent;}
.adm-btn.danger:hover{background:var(--danger); color:#fff;}
.adm-btn.sm{height:32px; padding:0 11px; font-size:11.5px; border-radius:9px;}
.adm-btn.icon{width:38px; padding:0;}
.adm-btn.icon.sm{width:32px;}

/* ============================================================
   KPI stat cards
   ============================================================ */
.adm-kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:18px;}
.adm-kpi{
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:16px 17px; box-shadow:var(--card-shadow); position:relative; overflow:hidden;
}
.adm-kpi-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.adm-kpi-ico{width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:16px;}
.adm-kpi-ico.accent{background:var(--accent-soft); color:var(--accent);}
.adm-kpi-ico.info{background:var(--info-soft); color:var(--info);}
.adm-kpi-ico.ok{background:var(--ok-soft); color:var(--ok);}
.adm-kpi-ico.purple{background:var(--purple-soft); color:var(--purple);}
.adm-kpi-ico.warn{background:var(--warn-soft); color:var(--warn);}
.adm-kpi-delta{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:800; padding:3px 8px; border-radius:8px;}
.adm-kpi-delta.up{color:var(--ok); background:var(--ok-soft);}
.adm-kpi-delta.down{color:var(--danger); background:var(--danger-soft);}
.adm-kpi-delta.flat{color:var(--dim); background:var(--surface-2);}
.adm-kpi-val{font-size:29px; font-weight:900; letter-spacing:-1px; line-height:1; font-variant-numeric:tabular-nums;}
.adm-kpi-label{font-size:12px; font-weight:700; color:var(--dimmer); margin-top:5px;}
.adm-kpi-spark{margin-top:12px; height:34px;}

/* ============================================================
   Chart cards
   ============================================================ */
.adm-grid{display:grid; gap:14px;}
.adm-grid.c2{grid-template-columns:repeat(2,1fr);}
.adm-grid.c3{grid-template-columns:repeat(3,1fr);}
.adm-grid.c12{grid-template-columns:2fr 1fr;}
.adm-grid.c21{grid-template-columns:1fr 2fr;}

.adm-card{
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--card-shadow); padding:17px 18px; min-width:0;
}
.adm-card-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px;}
.adm-card-head .t{flex:1; min-width:0;}
.adm-card-head h3{font-size:14px; font-weight:800; letter-spacing:-.2px;}
.adm-card-head p{font-size:11.5px; color:var(--dimmer); font-weight:600; margin-top:2px;}
.adm-card-head .val{font-size:20px; font-weight:900; letter-spacing:-.5px; font-variant-numeric:tabular-nums;}

.adm-legend{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px;}
.adm-legend span{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--dim);}
.adm-legend i{width:10px; height:10px; border-radius:3px; display:inline-block;}

/* segmented toggle (chart ranges) */
.adm-seg{display:inline-flex; padding:3px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border-2); gap:2px;}
.adm-seg button{padding:5px 11px; border-radius:7px; font-size:11.5px; font-weight:800; color:var(--dim); transition:all .15s;}
.adm-seg button.on{background:var(--surface-solid); color:var(--accent); box-shadow:0 2px 6px rgba(0,0,0,.12);}

/* ============================================================
   Data table
   ============================================================ */
.adm-toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.adm-toolbar .grow{flex:1;}
.adm-filter{
  display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; border-radius:11px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--dim); font-size:12.5px; font-weight:700;
}
.adm-filter i{font-size:11px; color:var(--dimmer);}
.adm-filter select{background:transparent; border:0; outline:0; color:var(--text); font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;}
.adm-filter-search{min-width:220px; flex:1; max-width:340px;}
.adm-filter-search input{flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--text); font-family:inherit; font-size:12.5px;}

.adm-tablecard{background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--card-shadow); overflow:hidden;}
.adm-table-scroll{overflow-x:auto; scrollbar-width:thin;}
.adm-table{width:100%; border-collapse:collapse; font-size:13px; min-width:640px;}
.adm-table thead th{
  text-align:left; font-size:10.5px; font-weight:800; color:var(--dimmer); letter-spacing:.4px; text-transform:uppercase;
  padding:12px 16px; border-bottom:1px solid var(--border); white-space:nowrap; background:var(--surface-2);
  position:sticky; top:0; z-index:1;
}
.adm-table thead th.sortable{cursor:pointer; user-select:none;}
.adm-table thead th.sortable:hover{color:var(--text);}
.adm-table thead th .arr{margin-left:4px; opacity:.6;}
.adm-table tbody td{padding:0 16px; height:var(--row-h); border-bottom:1px solid var(--border-2); vertical-align:middle; color:var(--text);}
.adm-table tbody tr{transition:background .13s;}
.adm-table tbody tr:hover{background:var(--surface-2); cursor:pointer;}
.adm-table tbody tr:last-child td{border-bottom:0;}
.adm-table .num{text-align:right; font-variant-numeric:tabular-nums; font-weight:700;}
.adm-table .muted{color:var(--dimmer); font-size:12px;}
.adm-cell-user{display:flex; align-items:center; gap:10px; min-width:0;}
.adm-cell-user .nm{display:flex; flex-direction:column; gap:0; min-width:0;}
.adm-cell-user .nm b{font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.adm-cell-user .nm small{font-size:11px; color:var(--dimmer); font-family:ui-monospace,monospace;}
.adm.compact .adm-cell-user .nm small{display:none;}
.adm-rowbtn{opacity:0; transition:opacity .14s;}
.adm-table tbody tr:hover .adm-rowbtn{opacity:1;}

.adm-tfoot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:1px solid var(--border); flex-wrap:wrap;}
.adm-tfoot .info{font-size:12px; color:var(--dimmer); font-weight:600;}
.adm-pager{display:flex; align-items:center; gap:4px;}
.adm-pager button{min-width:32px; height:32px; padding:0 8px; border-radius:8px; font-size:12px; font-weight:800; color:var(--dim); background:var(--surface-2); border:1px solid var(--border-2); transition:all .14s;}
.adm-pager button:hover:not(:disabled){color:var(--text);}
.adm-pager button.on{background:var(--accent); color:#fff; border-color:transparent;}
.adm-pager button:disabled{opacity:.4; cursor:not-allowed;}

/* checkbox */
.adm-check{width:18px; height:18px; border-radius:6px; border:1.5px solid var(--border); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; flex-shrink:0; transition:all .14s;}
.adm-check.on{background:var(--accent); border-color:transparent;}

/* ============================================================
   Detail drawer (right slide-in)
   ============================================================ */
.adm-drawer-scrim{position:absolute; inset:0; background:rgba(4,8,16,.5); backdrop-filter:blur(2px); z-index:60; opacity:0; animation:admFade .2s forwards;}
@keyframes admFade{to{opacity:1;}}
.adm-drawer{
  position:absolute; top:0; right:0; bottom:0; width:min(460px,92%); z-index:61;
  background:var(--bg2); border-left:1px solid var(--border); box-shadow:-24px 0 60px rgba(0,0,0,.3);
  display:flex; flex-direction:column; animation:admSlide .28s cubic-bezier(.22,1,.36,1);
}
@keyframes admSlide{from{transform:translateX(30px); opacity:.4;}to{transform:translateX(0); opacity:1;}}
.adm-drawer-head{flex-shrink:0; display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border);}
.adm-drawer-head .x{width:34px; height:34px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); color:var(--dim); font-size:14px; margin-left:auto; flex-shrink:0;}
.adm-drawer-head .x:hover{color:var(--text);}
.adm-drawer-body{flex:1; overflow-y:auto; padding:20px; scrollbar-width:thin;}
.adm-drawer-foot{flex-shrink:0; display:flex; gap:10px; padding:16px 20px; border-top:1px solid var(--border); background:var(--surface-2);}
.adm-drawer-foot .adm-btn{flex:1;}

.adm-dl{display:grid; grid-template-columns:auto 1fr; gap:11px 16px; align-items:center;}
.adm-dl dt{font-size:12px; color:var(--dimmer); font-weight:700;}
.adm-dl dd{font-size:13px; font-weight:700; text-align:right;}
.adm-stat-mini{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0;}
.adm-stat-mini > div{background:var(--surface-2); border:1px solid var(--border-2); border-radius:13px; padding:12px; text-align:center;}
.adm-stat-mini b{font-size:19px; font-weight:900; letter-spacing:-.5px; display:block; font-variant-numeric:tabular-nums;}
.adm-stat-mini small{font-size:10.5px; color:var(--dimmer); font-weight:700;}

/* ============================================================
   Modal
   ============================================================ */
.adm-modal-scrim{position:absolute; inset:0; background:rgba(4,8,16,.55); backdrop-filter:blur(3px); z-index:70; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; animation:admFade .18s forwards;}
.adm-modal{width:min(440px,100%); background:var(--bg2); border:1px solid var(--border); border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.4); overflow:hidden; animation:admPop .24s cubic-bezier(.34,1.4,.6,1);}
@keyframes admPop{from{transform:scale(.94); opacity:.5;}to{transform:scale(1); opacity:1;}}
.adm-modal-body{padding:24px 22px 20px; text-align:center;}
.adm-modal-ico{width:56px; height:56px; border-radius:16px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-size:24px;}
.adm-modal-body h3{font-size:18px; font-weight:800; letter-spacing:-.3px; margin-bottom:6px;}
.adm-modal-body p{font-size:13px; color:var(--dim); font-weight:500; line-height:1.55;}
.adm-modal-foot{display:flex; gap:10px; padding:0 22px 22px;}
.adm-modal-foot .adm-btn{flex:1; height:42px;}

/* ============================================================
   Tabs (in-page)
   ============================================================ */
.adm-tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; overflow-x:auto; scrollbar-width:none;}
.adm-tabs::-webkit-scrollbar{display:none;}
.adm-tab{padding:11px 15px; font-size:13px; font-weight:800; color:var(--dim); position:relative; white-space:nowrap; transition:color .15s;}
.adm-tab:hover{color:var(--text);}
.adm-tab.on{color:var(--accent);}
.adm-tab.on::after{content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2.5px; border-radius:3px 3px 0 0; background:var(--accent);}
.adm-tab .cnt{margin-left:6px; font-size:10.5px; padding:1px 6px; border-radius:7px; background:var(--surface-2); color:var(--dim); font-weight:800;}
.adm-tab.on .cnt{background:var(--accent-soft); color:var(--accent);}

/* ============================================================
   Forms (settings, broadcast)
   ============================================================ */
.adm-form-row{display:flex; align-items:center; gap:16px; padding:15px 0; border-bottom:1px solid var(--border-2);}
.adm-form-row:last-child{border-bottom:0;}
.adm-form-row .lbl{flex:1; min-width:0;}
.adm-form-row .lbl b{font-size:13.5px; font-weight:800; display:block;}
.adm-form-row .lbl p{font-size:12px; color:var(--dimmer); font-weight:500; margin-top:3px; line-height:1.5;}
.adm-input{height:40px; padding:0 13px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:inherit; font-size:13px; font-weight:600; outline:none; transition:border-color .16s, box-shadow .16s; width:100%;}
.adm-input:focus{border-color:color-mix(in srgb,var(--accent) 50%,transparent); box-shadow:0 0 0 3px var(--accent-soft);}
textarea.adm-input{height:auto; padding:11px 13px; resize:vertical; line-height:1.55;}
.adm-input-wrap{position:relative; display:flex; align-items:center;}
.adm-input-wrap .suffix{position:absolute; right:13px; font-size:12px; font-weight:800; color:var(--dimmer);}
.adm-field{display:flex; flex-direction:column; gap:7px;}
.adm-field > label{font-size:12px; font-weight:800; color:var(--text);}

/* toggle switch (settings) */
.adm-switch{width:44px; height:26px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border); position:relative; flex-shrink:0; transition:background .18s, border-color .18s; cursor:pointer;}
.adm-switch i{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.25); transition:transform .2s;}
.adm-switch.on{background:var(--accent); border-color:transparent;}
.adm-switch.on i{transform:translateX(18px);}

/* ============================================================
   Empty state
   ============================================================ */
.adm-empty{text-align:center; padding:56px 20px; color:var(--dimmer);}
.adm-empty i{font-size:34px; opacity:.4; margin-bottom:12px;}
.adm-empty b{display:block; font-size:15px; font-weight:800; color:var(--dim); margin-bottom:4px;}
.adm-empty p{font-size:12.5px; font-weight:500;}

/* activity / timeline */
.adm-feed{display:flex; flex-direction:column;}
.adm-feed-item{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--border-2);}
.adm-feed-item:last-child{border-bottom:0;}
.adm-feed-ico{width:34px; height:34px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px;}
.adm-feed-txt{flex:1; min-width:0;}
.adm-feed-txt p{font-size:12.5px; font-weight:600; line-height:1.5;}
.adm-feed-txt p b{font-weight:800;}
.adm-feed-txt small{font-size:11px; color:var(--dimmer); font-weight:600;}

/* alert list */
.adm-alert{display:flex; gap:12px; align-items:flex-start; padding:13px 14px; border-radius:13px; margin-bottom:10px; border:1px solid var(--border-2);}
.adm-alert:last-child{margin-bottom:0;}
.adm-alert.warn{background:var(--warn-soft); border-color:transparent;}
.adm-alert.danger{background:var(--danger-soft); border-color:transparent;}
.adm-alert.info{background:var(--info-soft); border-color:transparent;}
.adm-alert-ico{width:32px; height:32px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff;}
.adm-alert.warn .adm-alert-ico{background:var(--warn);}
.adm-alert.danger .adm-alert-ico{background:var(--danger);}
.adm-alert.info .adm-alert-ico{background:var(--info);}
.adm-alert-txt{flex:1; min-width:0;}
.adm-alert-txt b{font-size:12.5px; font-weight:800; display:block;}
.adm-alert-txt p{font-size:11.5px; color:var(--dim); font-weight:600; margin-top:2px; line-height:1.45;}

/* mini progress bar */
.adm-bar{height:7px; border-radius:99px; background:color-mix(in srgb,var(--text) 11%,transparent); overflow:hidden;}
.adm-bar > i{display:block; height:100%; border-radius:99px; background:var(--accent-grad);}

/* ============================================================
   Support inbox (chat: admin ↔ user)
   ============================================================ */
.adm-chat{display:grid; grid-template-columns:322px 1fr; height:calc(100dvh - 64px - 48px);
  background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--card-shadow); overflow:hidden;}

/* conversation list */
.adm-conv{display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--border);}
.adm-conv-head{flex-shrink:0; padding:14px 15px 12px; border-bottom:1px solid var(--border-2);}
.adm-conv-search{display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; border-radius:11px; background:var(--surface-2); border:1px solid var(--border); margin-bottom:10px;}
.adm-conv-search i{font-size:12px; color:var(--dimmer);}
.adm-conv-search input{flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--text); font-family:inherit; font-size:12.5px;}
.adm-conv-seg{display:flex; gap:3px;}
.adm-conv-seg button{flex:1; padding:6px 4px; border-radius:8px; font-size:11px; font-weight:800; color:var(--dim); background:var(--surface-2); border:1px solid var(--border-2); transition:all .14s;}
.adm-conv-seg button.on{background:var(--accent-soft); color:var(--accent); border-color:transparent;}
.adm-conv-list{flex:1; overflow-y:auto; scrollbar-width:thin;}
.adm-conv-list::-webkit-scrollbar{width:8px;}
.adm-conv-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 14%,transparent); border-radius:5px; border:2px solid transparent; background-clip:content-box;}
.adm-conv-item{display:flex; gap:11px; padding:12px 15px; border-bottom:1px solid var(--border-2); cursor:pointer; transition:background .13s; position:relative;}
.adm-conv-item:hover{background:var(--surface-2);}
.adm-conv-item.on{background:var(--accent-soft);}
.adm-conv-item.on::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent);}
.adm-conv-body{flex:1; min-width:0;}
.adm-conv-row1{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.adm-conv-row1 b{font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.adm-conv-row1 time{font-size:10.5px; color:var(--dimmer); font-weight:600; flex-shrink:0;}
.adm-conv-prev{font-size:11.5px; color:var(--dim); font-weight:500; line-height:1.4; margin-top:3px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
.adm-conv-meta{display:flex; align-items:center; gap:6px; margin-top:6px;}
.adm-conv-unread{margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--accent); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;}

/* thread */
.adm-thread{display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--bg);}
.adm-thread-head{flex-shrink:0; display:flex; align-items:center; gap:11px; padding:13px 18px; border-bottom:1px solid var(--border); background:var(--surface);}
.adm-thread-head .who{flex:1; min-width:0;}
.adm-thread-head .who b{font-size:14px; font-weight:800; display:block;}
.adm-thread-head .who small{font-size:11px; color:var(--dimmer); font-weight:600;}
.adm-thread-back{display:none; width:34px; height:34px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-size:14px; flex-shrink:0;}
.adm-thread-body{flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:10px; scrollbar-width:thin;}
.adm-thread-body::-webkit-scrollbar{width:8px;}
.adm-thread-body::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 14%,transparent); border-radius:5px; border:2px solid transparent; background-clip:content-box;}
.adm-day{align-self:center; font-size:10.5px; font-weight:700; color:var(--dimmer); background:var(--surface-2); padding:4px 11px; border-radius:99px; margin:2px 0;}
.adm-msg{max-width:74%; display:flex; flex-direction:column; gap:3px;}
.adm-msg.user{align-self:flex-start;}
.adm-msg.admin{align-self:flex-end; align-items:flex-end;}
.adm-msg-bubble{padding:9px 13px; border-radius:15px; font-size:13px; line-height:1.5; font-weight:500; word-break:break-word;}
.adm-msg.user .adm-msg-bubble{background:var(--surface-solid); border:1px solid var(--border); border-bottom-left-radius:5px; color:var(--text);}
.adm-msg.admin .adm-msg-bubble{background:var(--accent-grad); color:#fff; border-bottom-right-radius:5px; box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 26%,transparent);}
.adm-msg time{font-size:10px; color:var(--dimmer); font-weight:600; padding:0 4px;}

/* composer */
.adm-composer{flex-shrink:0; border-top:1px solid var(--border); background:var(--surface); padding:12px 16px 14px;}
.adm-quick{display:flex; gap:7px; overflow-x:auto; padding-bottom:10px; scrollbar-width:none;}
.adm-quick::-webkit-scrollbar{display:none;}
.adm-quick button{flex-shrink:0; white-space:nowrap; padding:6px 12px; border-radius:99px; font-size:11.5px; font-weight:700; color:var(--dim); background:var(--surface-2); border:1px solid var(--border); transition:all .14s;}
.adm-quick button:hover{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,transparent);}
.adm-composer-row{display:flex; align-items:flex-end; gap:10px;}
.adm-composer-input{flex:1; min-height:44px; max-height:120px; padding:12px 15px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:inherit; font-size:13px; line-height:1.5; outline:none; resize:none; transition:border-color .16s, box-shadow .16s;}
.adm-composer-input:focus{border-color:color-mix(in srgb,var(--accent) 50%,transparent); box-shadow:0 0 0 3px var(--accent-soft);}
.adm-send{width:44px; height:44px; border-radius:13px; flex-shrink:0; background:var(--accent-grad); color:#fff; font-size:16px; box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 30%,transparent); transition:transform .12s, filter .16s;}
.adm-send:hover{filter:brightness(1.06);} .adm-send:active{transform:scale(.92);}
.adm-send:disabled{opacity:.4; box-shadow:none; cursor:not-allowed;}

.adm-thread-empty{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--dimmer); text-align:center; padding:20px;}
.adm-thread-empty i{font-size:40px; opacity:.35; margin-bottom:14px;}
.adm-thread-empty b{font-size:15px; font-weight:800; color:var(--dim);}

@media (max-width:820px){
  .adm-chat{grid-template-columns:1fr; height:calc(100dvh - 64px - 32px);}
  .adm-chat[data-view="thread"] .adm-conv{display:none;}
  .adm-chat[data-view="list"] .adm-thread{display:none;}
  .adm-thread-back{display:flex; align-items:center; justify-content:center;}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .adm{grid-template-columns:76px 1fr;}
  .adm-brand-txt, .adm-nav-group-label, .adm-nav-item span, .adm-side-foot-txt, .adm-side-foot button{display:none;}
  .adm-brand{justify-content:center; padding:16px 0;}
  .adm-nav-item{justify-content:center; padding:11px 0;}
  .adm-nav-item i{width:auto;}
  .adm-nav-badge{position:absolute; top:5px; right:10px; margin:0; min-width:8px; height:8px; padding:0; font-size:0;}
  .adm-nav-item.on::before{display:none;}
  .adm-side-foot{justify-content:center;}
}
@media (max-width:760px){
  .adm{grid-template-columns:1fr;}
  .adm-side{position:absolute; top:0; left:0; bottom:0; width:262px; transform:translateX(-100%); transition:transform .26s cubic-bezier(.22,1,.36,1);}
  .adm.drawer-open .adm-side{transform:translateX(0); box-shadow:24px 0 60px rgba(0,0,0,.4);}
  .adm.drawer-open .adm-scrim{position:absolute; inset:0; background:rgba(4,8,16,.5); z-index:39;}
  .adm-brand-txt, .adm-nav-group-label, .adm-nav-item span, .adm-side-foot-txt, .adm-side-foot button{display:flex;}
  .adm-brand{justify-content:flex-start; padding:18px 18px 16px;}
  .adm-nav-item{justify-content:flex-start; padding:9px 11px;}
  .adm-nav-badge{position:static; margin-left:auto; min-width:19px; height:19px; padding:0 6px; font-size:10.5px;}
  .adm-hamburger{display:flex; align-items:center; justify-content:center;}
  .adm-search{width:auto;}
  .adm-search .txt, .adm-search kbd{display:none;}
  .adm-search input{display:none;}
  .adm-search{width:40px; padding:0; justify-content:center;}
  .adm-scroll{padding:16px;}
  .adm-grid.c2, .adm-grid.c3, .adm-grid.c12, .adm-grid.c21{grid-template-columns:1fr;}
  .adm-page-title small{display:none;}
}

/* ============================================================
   Toasts (moved from Admin.html inline <style> in the design)
   ============================================================ */
.adm-toasts{position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:2147483000; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;}
.adm-toast{display:flex; align-items:center; gap:9px; padding:11px 16px; border-radius:12px; font-size:13px; font-weight:700;
  background:var(--bg2); color:var(--text); border:1px solid var(--border); box-shadow:0 12px 32px rgba(0,0,0,.28);
  animation:admToast .3s cubic-bezier(.22,1,.36,1); pointer-events:auto;}
@keyframes admToast{from{transform:translateY(-14px); opacity:0;}to{transform:translateY(0); opacity:1;}}
.adm-toast i{font-size:14px;}
.adm-toast.ok i{color:var(--ok);} .adm-toast.danger i{color:var(--danger);} .adm-toast.info i{color:var(--info);} .adm-toast.warn i{color:var(--warn);}

/* ============================================================
   Admin login (not in the design — same card language as auth)
   ============================================================ */
.adm-login{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:var(--bg); color:var(--text); font-family:'Prompt','Outfit',system-ui,sans-serif;}
.adm-login-card{width:min(400px,100%); background:var(--surface); border:1px solid var(--border); border-radius:22px;
  box-shadow:var(--card-shadow); padding:32px 28px;}
.adm-login-card .adm-brand{border-bottom:0; padding:0 0 18px; justify-content:center;}
.adm-login-card h1{font-size:19px; font-weight:800; letter-spacing:-.3px; text-align:center; margin-bottom:4px;}
.adm-login-card .sub{font-size:12.5px; color:var(--dimmer); font-weight:600; text-align:center; margin-bottom:22px;}
.adm-login-card .adm-field{margin-bottom:14px;}
.adm-login-err{display:flex; align-items:center; gap:8px; padding:10px 13px; border-radius:11px; margin-bottom:14px;
  background:var(--danger-soft); color:var(--danger); font-size:12.5px; font-weight:700;}