/* ── Management dashboard (v3) ───────────────────────────────────────────
   Same visual language as the portal launcher (portal-home.css): neutral
   surfaces, one muted accent per metric, colour reserved for things that
   need attention. Scoped to #managementPage with md-* class names so the
   legacy .mgd-* rules in style.css never apply. Markup: index.html,
   data + rendering: mgmt-dashboard.js. */

#managementPage{
  --md-surface:var(--dk-surface);
  --md-surface-2:var(--dk-surface-2);
  --md-hover:var(--dk-hover);
  --md-border:var(--dk-border);
  --md-text:var(--dk-text);
  --md-muted:var(--dk-muted);
  --md-faint:var(--dk-faint);
  --md-chip:var(--dk-chip);
  --md-accent:var(--dk-accent);
  --md-accent-soft:var(--dk-accent-soft);
  --md-shadow:var(--dk-shadow);
  --md-warn:var(--dk-warn); --md-warn-soft:var(--dk-warn-soft);
  --md-danger:var(--dk-danger); --md-danger-soft:var(--dk-danger-soft);
  --md-ok:var(--dk-ok); --md-ok-soft:var(--dk-ok-soft);
  color:var(--md-text);
}
html[data-theme="dark"] #managementPage{
  --md-surface:var(--dk-surface);
  --md-surface-2:var(--dk-surface-2);
  --md-hover:var(--dk-hover);
  --md-border:var(--dk-border);
  --md-text:var(--dk-text);
  --md-muted:var(--dk-muted);
  --md-faint:var(--dk-faint);
  --md-chip:var(--dk-chip);
  --md-accent:var(--dk-accent);
  --md-accent-soft:var(--dk-accent-soft);
  --md-shadow:var(--dk-shadow);
  --md-warn:var(--dk-warn); --md-warn-soft:var(--dk-warn-soft);
  --md-danger:var(--dk-danger); --md-danger-soft:var(--dk-danger-soft);
  --md-ok:var(--dk-ok); --md-ok-soft:var(--dk-ok-soft);
}

#managementPage svg{ width:18px; height:18px; flex:0 0 auto; }

#managementPage .md-shell{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding:8px 4px 32px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* ── hero ── */
#managementPage .md-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
#managementPage .md-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--md-muted);
  font-size:13px;
  font-weight:600;
  margin-bottom:4px;
}
#managementPage .md-eyebrow svg{ width:14px; height:14px; }
#managementPage .md-eyebrow-sep{ width:4px; height:4px; border-radius:50%; background:var(--md-faint); }
#managementPage .md-title{
  margin:0;
  font-size:clamp(22px,2.3vw,28px);
  font-weight:800;
  line-height:1.5;
  color:var(--md-text);
}
#managementPage .md-sub{
  margin:2px 0 0;
  font-size:14px;
  line-height:1.9;
  color:var(--md-muted);
}
#managementPage .md-hero-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
#managementPage .md-updated{
  font-size:12px;
  color:var(--md-faint);
  margin-inline-end:4px;
}
#managementPage .md-updated:empty{ display:none; }
#managementPage .md-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:38px;
  margin:0;
  padding:0 14px;
  border-radius:11px;
  font:inherit;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  box-shadow:none;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
#managementPage .md-btn svg{ width:16px; height:16px; }
#managementPage .md-btn-primary{
  background:var(--md-accent-soft);
  color:var(--md-accent);
  border:1px solid transparent;
}
#managementPage .md-btn-primary:hover{ background:var(--dk-accent-fill); color:#fff; }
#managementPage .md-btn-primary:disabled{ opacity:.6; cursor:progress; }
#managementPage .md-btn-primary:disabled svg{ animation:md-spin .9s linear infinite; }
@keyframes md-spin{ to{ transform:rotate(-360deg); } }
#managementPage .md-btn-ghost{
  background:var(--md-surface);
  color:var(--md-muted);
  border:1px solid var(--md-border);
}
#managementPage .md-btn-ghost:hover{ color:var(--md-text); background:var(--md-hover); }

/* ── KPI strip ── */
#managementPage .md-kpis{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}
@media (max-width:1280px){ #managementPage .md-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px){ #managementPage .md-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }

#managementPage .md-kpi{
  --tone:#4f46e5; --tone-soft:rgba(79,70,229,.09);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  margin:0;
  padding:16px 16px 14px;
  border-radius:16px;
  background:var(--md-surface);
  border:1px solid var(--md-border);
  box-shadow:var(--md-shadow);
  color:inherit;
  font:inherit;
  text-align:start;
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background-color .15s ease;
}
#managementPage .md-kpi:hover{ transform:translateY(-1px); background:var(--md-hover); }
#managementPage .md-kpi:focus-visible{ outline:2px solid var(--tone); outline-offset:2px; }
#managementPage .md-kpi[data-tone="tasks"]{ --tone:#4f46e5; --tone-soft:rgba(79,70,229,.09); }
#managementPage .md-kpi[data-tone="review"]{ --tone:#7c3aed; --tone-soft:rgba(124,58,237,.09); }
#managementPage .md-kpi[data-tone="requests"]{ --tone:#d97706; --tone-soft:rgba(217,119,6,.10); }
#managementPage .md-kpi[data-tone="refunds"]{ --tone:#e11d48; --tone-soft:rgba(225,29,72,.08); }
#managementPage .md-kpi[data-tone="inventory"]{ --tone:#059669; --tone-soft:rgba(5,150,105,.10); }
#managementPage .md-kpi[data-tone="admins"]{ --tone:#0284c7; --tone-soft:rgba(2,132,199,.09); }
html[data-theme="dark"] #managementPage .md-kpi[data-tone="tasks"]{ --tone:#818cf8; --tone-soft:rgba(129,140,248,.14); }
html[data-theme="dark"] #managementPage .md-kpi[data-tone="review"]{ --tone:#a78bfa; --tone-soft:rgba(167,139,250,.14); }
html[data-theme="dark"] #managementPage .md-kpi[data-tone="requests"]{ --tone:#fbbf24; --tone-soft:rgba(251,191,36,.13); }
html[data-theme="dark"] #managementPage .md-kpi[data-tone="refunds"]{ --tone:#fb7185; --tone-soft:rgba(251,113,133,.13); }
html[data-theme="dark"] #managementPage .md-kpi[data-tone="inventory"]{ --tone:#34d399; --tone-soft:rgba(52,211,153,.13); }
html[data-theme="dark"] #managementPage .md-kpi[data-tone="admins"]{ --tone:#38bdf8; --tone-soft:rgba(56,189,248,.13); }

#managementPage .md-kpi-head{ display:flex; align-items:center; gap:9px; min-width:0; }
#managementPage .md-kpi-ico{
  width:32px; height:32px;
  border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tone-soft);
  color:var(--tone);
  flex:0 0 auto;
}
#managementPage .md-kpi-ico svg{ width:17px; height:17px; }
#managementPage .md-kpi-lbl{
  font-size:13px;
  font-weight:700;
  color:var(--md-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#managementPage .md-kpi-num{
  font-size:28px;
  font-weight:800;
  line-height:1.3;
  color:var(--md-text);
  font-variant-numeric:tabular-nums;
  margin-top:4px;
}
#managementPage .md-kpi-foot{
  font-size:12px;
  color:var(--md-faint);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* needs attention: tone the number + a quiet dot instead of red alarms */
#managementPage .md-kpi.is-urgent .md-kpi-num{ color:var(--tone); }
#managementPage .md-kpi.is-urgent::after{
  content:"";
  position:absolute;
  top:14px;
  inset-inline-end:14px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--tone);
  box-shadow:0 0 0 4px var(--tone-soft);
}

/* ── main columns ── */
#managementPage .md-main{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);
  gap:18px;
  align-items:start;
}
@media (max-width:1100px){ #managementPage .md-main{ grid-template-columns:1fr; } }
#managementPage .md-col{ display:flex; flex-direction:column; gap:18px; min-width:0; }

#managementPage .md-card{
  background:var(--md-surface);
  border:1px solid var(--md-border);
  border-radius:18px;
  box-shadow:var(--md-shadow);
  padding:18px;
}
#managementPage .md-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
#managementPage .md-card-ico{
  width:34px; height:34px;
  border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--md-chip);
  color:var(--md-muted);
  flex:0 0 auto;
}
#managementPage .md-card-ico[data-tone="alert"]{ background:var(--md-warn-soft); color:var(--md-warn); }
#managementPage .md-card-titles{ display:flex; flex-direction:column; min-width:0; flex:1; }
#managementPage .md-card-title{
  margin:0;
  font-size:15.5px;
  font-weight:800;
  line-height:1.6;
  color:var(--md-text);
}
#managementPage .md-card-sub{ font-size:12.5px; color:var(--md-muted); }
#managementPage .md-card-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  font-weight:700;
  color:var(--md-accent);
  text-decoration:none;
  padding:6px 8px;
  border-radius:8px;
  white-space:nowrap;
}
#managementPage .md-card-link svg{ width:15px; height:15px; }
#managementPage .md-card-link:hover{ background:var(--md-accent-soft); }

#managementPage .md-empty{
  padding:18px;
  border-radius:12px;
  background:var(--md-surface-2);
  color:var(--md-muted);
  font-size:13px;
  text-align:center;
}

/* ── priority inbox ── */
#managementPage .md-inbox{ display:flex; flex-direction:column; gap:8px; }
#managementPage .md-inbox-row{
  --tone:var(--md-accent); --tone-soft:var(--md-accent-soft);
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin:0;
  padding:12px 14px;
  border-radius:13px;
  border:1px solid var(--md-border);
  background:var(--md-surface-2);
  color:inherit;
  font:inherit;
  text-align:start;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
}
#managementPage .md-inbox-row[data-tone="warn"]{ --tone:var(--md-warn); --tone-soft:var(--md-warn-soft); }
#managementPage .md-inbox-row[data-tone="danger"]{ --tone:var(--md-danger); --tone-soft:var(--md-danger-soft); }
#managementPage .md-inbox-row[data-tone="ok"]{ --tone:var(--md-ok); --tone-soft:var(--md-ok-soft); }
#managementPage .md-inbox-row:hover{ background:var(--md-hover); border-color:var(--tone); }
#managementPage .md-inbox-ico{
  width:36px; height:36px;
  border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tone-soft);
  color:var(--tone);
  flex:0 0 auto;
}
#managementPage .md-inbox-text{ display:flex; flex-direction:column; min-width:0; flex:1; }
#managementPage .md-inbox-title{ font-size:14px; font-weight:700; color:var(--md-text); line-height:1.7; }
#managementPage .md-inbox-meta{ font-size:12.5px; color:var(--md-muted); line-height:1.7; }
#managementPage .md-inbox-count{
  min-width:30px; height:26px;
  padding:0 9px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tone-soft);
  color:var(--tone);
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
#managementPage .md-inbox-clear{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:13px;
  background:var(--md-ok-soft);
  color:var(--md-text);
}
#managementPage .md-inbox-clear > span:last-child{ display:flex; flex-direction:column; }
#managementPage .md-inbox-clear strong{ font-size:14px; font-weight:800; }
#managementPage .md-inbox-clear span span{ font-size:12.5px; color:var(--md-muted); }
#managementPage .md-inbox-clear-ico{
  width:36px; height:36px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--md-ok);
  color:#fff;
}
html[data-theme="dark"] #managementPage .md-inbox-clear-ico{ color:#0b1020; }

/* ── recent tasks ── */
#managementPage .md-tasks{ display:flex; flex-direction:column; }
#managementPage .md-task-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  width:100%;
  margin:0;
  padding:11px 8px;
  border:0;
  border-bottom:1px solid var(--md-border);
  border-radius:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:start;
  cursor:pointer;
}
#managementPage .md-task-row:last-child{ border-bottom:0; }
#managementPage .md-task-row:hover{ background:var(--md-hover); border-radius:10px; }
#managementPage .md-task-status{
  --tone:var(--md-muted); --tone-soft:var(--md-chip);
  min-width:78px;
  padding:3px 10px;
  border-radius:999px;
  background:var(--tone-soft);
  color:var(--tone);
  font-size:12px;
  font-weight:700;
  text-align:center;
  white-space:nowrap;
}
#managementPage .md-task-status[data-status="progress"]{ --tone:#2563eb; --tone-soft:rgba(37,99,235,.09); }
#managementPage .md-task-status[data-status="claimed"]{ --tone:#0891b2; --tone-soft:rgba(8,145,178,.09); }
#managementPage .md-task-status[data-status="review"]{ --tone:#7c3aed; --tone-soft:rgba(124,58,237,.09); }
#managementPage .md-task-status[data-status="urgent"]{ --tone:var(--md-danger); --tone-soft:var(--md-danger-soft); }
html[data-theme="dark"] #managementPage .md-task-status[data-status="progress"]{ --tone:#60a5fa; --tone-soft:rgba(96,165,250,.13); }
html[data-theme="dark"] #managementPage .md-task-status[data-status="claimed"]{ --tone:#22d3ee; --tone-soft:rgba(34,211,238,.12); }
html[data-theme="dark"] #managementPage .md-task-status[data-status="review"]{ --tone:#a78bfa; --tone-soft:rgba(167,139,250,.13); }
#managementPage .md-task-title{
  font-size:14px;
  font-weight:600;
  color:var(--md-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#managementPage .md-task-meta{ font-size:12px; color:var(--md-faint); white-space:nowrap; }

/* ── team ── */
#managementPage .md-team{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
#managementPage .md-team-cell{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border-radius:12px;
  background:var(--md-surface-2);
  min-width:0;
}
#managementPage .md-team-avatar{
  width:34px; height:34px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:hsl(var(--hue,240) 70% 94%);
  color:hsl(var(--hue,240) 45% 38%);
  font-weight:800;
  font-size:14px;
  flex:0 0 auto;
}
html[data-theme="dark"] #managementPage .md-team-avatar{
  background:hsl(var(--hue,240) 35% 26%);
  color:hsl(var(--hue,240) 80% 82%);
}
#managementPage .md-team-text{ min-width:0; }
#managementPage .md-team-name{
  font-size:13px;
  font-weight:700;
  color:var(--md-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#managementPage .md-team-role{ font-size:11.5px; color:var(--md-muted); }

/* ── shortcuts ── */
#managementPage .md-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
#managementPage .md-action{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  min-width:0;
  margin:0;
  padding:9px 10px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--md-text);
  font:inherit;
  font-size:13px;
  font-weight:600;
  text-align:start;
  cursor:pointer;
  transition:background-color .15s ease;
}
#managementPage .md-action:hover{ background:var(--md-hover); }
#managementPage .md-action:focus-visible{ outline:2px solid var(--md-accent); outline-offset:1px; }
#managementPage .md-action-ico{
  width:30px; height:30px;
  border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--md-chip);
  color:var(--md-muted);
  flex:0 0 auto;
  transition:background-color .15s ease, color .15s ease;
}
#managementPage .md-action-ico svg{ width:16px; height:16px; }
#managementPage .md-action:hover .md-action-ico{ background:var(--md-accent-soft); color:var(--md-accent); }
#managementPage .md-action-title{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#managementPage .md-action-badge{
  min-width:22px; height:20px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--md-warn-soft);
  color:var(--md-warn);
  font-size:11.5px;
  font-weight:800;
}

/* ── AI services ── */
#managementPage .md-health{ display:flex; flex-direction:column; }
#managementPage .md-health-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 2px;
  border-bottom:1px solid var(--md-border);
  font-size:13px;
}
#managementPage .md-health-row:last-child{ border-bottom:0; }
#managementPage .md-health-key{ color:var(--md-muted); }
#managementPage .md-health-val{ font-weight:700; color:var(--md-text); direction:ltr; }
#managementPage .md-health-val[data-state]{
  display:inline-flex;
  align-items:center;
  gap:6px;
  direction:rtl;
}
#managementPage .md-health-val[data-state]::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:currentColor;
}
#managementPage .md-health-val[data-state="ok"]{ color:var(--md-ok); }
#managementPage .md-health-val[data-state="warn"]{ color:var(--md-faint); }
#managementPage .md-health-val[data-state="fail"]{ color:var(--md-danger); }

/* ── phones ── */
@media (max-width:560px){
  #managementPage .md-shell{ padding:4px 0 24px; gap:14px; }
  #managementPage .md-hero-actions .md-btn span{ display:none; }
  #managementPage .md-hero-actions .md-btn{ width:38px; padding:0; justify-content:center; }
  #managementPage .md-kpi{ padding:13px; }
  #managementPage .md-kpi-num{ font-size:24px; }
  #managementPage .md-card{ padding:14px; border-radius:16px; }
  #managementPage .md-task-row{ grid-template-columns:auto minmax(0,1fr); }
  #managementPage .md-task-meta{ grid-column:2; }
}

@media (prefers-reduced-motion:reduce){
  #managementPage .md-kpi,
  #managementPage .md-btn-primary:disabled svg{ transition:none; animation:none; }
  #managementPage .md-kpi:hover{ transform:none; }
}