/* ============================================================================
   Studyfin — Enterprise UI layer (additive)
   ServiceNow/Salesforce-grade component classes for the PARENT / TUTOR / SCHOOL
   / ADMIN consoles. Everything here is NAMESPACED `.ent-*` and only ADDS classes
   — it never overrides existing selectors, so it can't break current pages.
   Reuses the existing design tokens (--border, --surface, --r-md, --success…)
   and fills in a few enterprise tokens as fallbacks.
   ============================================================================ */
:root {
  --ent-space: 8px;
  --ent-radius: var(--r-md, 12px);
  --ent-border: var(--border, #e2e8f0);
  --ent-surface: var(--surface, #ffffff);
  --ent-surface-2: var(--surface-2, #f8fafc);
  --ent-text: var(--ink, #0f172a);
  --ent-muted: var(--muted, #64748b);
  --ent-primary: var(--brand-1, #7c5cff);
  --ent-success: var(--success, #16a34a);
  --ent-warning: #d97706;
  --ent-danger: var(--danger, #dc2626);
  --ent-info: #0369a1;
  --ent-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04));
}

/* ---- Uniform avatar (all person photos rendered identically) ------------- */
.sf-avatar { border-radius: 50%; flex: none; overflow: hidden; vertical-align: middle; object-fit: cover; background: var(--ent-surface-2); }
.sf-avatar--fallback { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.sf-avatar--24 { width: 24px; height: 24px; font-size: 10px; }
.sf-avatar--32 { width: 32px; height: 32px; font-size: 12px; }
.sf-avatar--40 { width: 40px; height: 40px; font-size: 15px; }
.sf-avatar--56 { width: 56px; height: 56px; font-size: 20px; }
.sf-avatar--96 { width: 96px; height: 96px; font-size: 34px; }
.sf-avatar--verified { box-shadow: 0 0 0 2px var(--ent-surface, #fff), 0 0 0 3.5px var(--ent-primary, #7c5cff); }

/* ---- Page header (title + description + actions) ------------------------- */
.ent-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--ent-border);
}
.ent-page-header h1, .ent-page-header h2 { margin: 0; font-size: 20px; line-height: 1.2; }
.ent-page-header .ent-sub { color: var(--ent-muted); font-size: 13px; margin-top: 3px; }
.ent-page-header .ent-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Toolbar (filters + search + bulk actions) -------------------------- */
.ent-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--ent-surface-2);
  border: 1px solid var(--ent-border); border-radius: var(--ent-radius);
  margin-bottom: 12px;
}
.ent-toolbar .ent-search { flex: 1; min-width: 180px; }
.ent-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: rgba(124,92,255,.10); color: var(--ent-primary);
  border: 1px solid rgba(124,92,255,.25);
}
.ent-filter-chip button { background: none; border: 0; cursor: pointer; color: inherit; font-size: 13px; line-height: 1; }

/* ---- Data table --------------------------------------------------------- */
.ent-table-wrap { border: 1px solid var(--ent-border); border-radius: var(--ent-radius); overflow: auto; background: var(--ent-surface); }
.ent-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.ent-table thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-weight: 600; color: var(--ent-muted);
  background: var(--ent-surface-2); padding: 10px 14px;
  border-bottom: 1px solid var(--ent-border); white-space: nowrap;
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
}
/* Sortable headers (activated by ui.js delegated sort) */
.ent-table thead th { cursor: pointer; user-select: none; }
.ent-table thead th.ent-no-sort { cursor: default; }
.ent-table thead th:not(.ent-no-sort)::after { content: "↕"; margin-left: 6px; font-size: 9px; opacity: 0; transition: opacity .12s; }
.ent-table thead th:not(.ent-no-sort):hover::after { opacity: .4; }
.ent-table thead th[aria-sort="ascending"]::after { content: "▲"; opacity: .9; }
.ent-table thead th[aria-sort="descending"]::after { content: "▼"; opacity: .9; }
.ent-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--ent-border); color: var(--ent-text); vertical-align: middle; }
.ent-table tbody tr:last-child td { border-bottom: 0; }
.ent-table tbody tr:hover { background: var(--ent-surface-2); }
.ent-table.ent-zebra tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ent-surface-2) 55%, transparent); }
.ent-table .ent-col-num { text-align: right; font-variant-numeric: tabular-nums; }
.ent-table .ent-row-actions { text-align: right; white-space: nowrap; opacity: .55; transition: opacity .15s; }
.ent-table tbody tr:hover .ent-row-actions { opacity: 1; }
.ent-table.ent-compact tbody td, .ent-table.ent-compact thead th { padding: 6px 12px; }

/* ---- Badges / status chips --------------------------------------------- */
.ent-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--ent-surface-2); color: var(--ent-muted); border: 1px solid var(--ent-border);
  white-space: nowrap;
}
.ent-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ent-badge--neutral { color: #475569; }
.ent-badge--success { color: var(--ent-success); background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.25); }
.ent-badge--warning { color: var(--ent-warning); background: rgba(217,119,6,.08); border-color: rgba(217,119,6,.25); }
.ent-badge--danger  { color: var(--ent-danger);  background: rgba(220,38,38,.08);  border-color: rgba(220,38,38,.25); }
.ent-badge--info    { color: var(--ent-info);    background: rgba(3,105,161,.08);   border-color: rgba(3,105,161,.25); }

/* ---- Inline banners ----------------------------------------------------- */
.ent-banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; border-radius: var(--ent-radius); font-size: 13.5px;
  border: 1px solid var(--ent-border); background: var(--ent-surface-2); margin-bottom: 12px;
}
.ent-banner--info    { background: rgba(3,105,161,.06);  border-color: rgba(3,105,161,.25); }
.ent-banner--success { background: rgba(22,163,74,.06);  border-color: rgba(22,163,74,.25); }
.ent-banner--warning { background: rgba(217,119,6,.06);  border-color: rgba(217,119,6,.25); }
.ent-banner--danger  { background: rgba(220,38,38,.06);  border-color: rgba(220,38,38,.25); }

/* ---- Empty state -------------------------------------------------------- */
.ent-empty { text-align: center; padding: 40px 20px; color: var(--ent-muted); }
.ent-empty .ent-empty-emoji { font-size: 34px; margin-bottom: 8px; }
.ent-empty h4 { margin: 0 0 4px; color: var(--ent-text); font-size: 15px; }
.ent-empty p { margin: 0 auto 14px; max-width: 360px; font-size: 13.5px; }

/* ---- KPI card + stat grid ---------------------------------------------- */
.ent-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ent-kpi { padding: 14px 16px; border: 1px solid var(--ent-border); border-radius: var(--ent-radius); background: var(--ent-surface); }
.ent-kpi .ent-kpi-label { font-size: 12px; color: var(--ent-muted); text-transform: uppercase; letter-spacing: .04em; }
.ent-kpi .ent-kpi-value { font-size: 26px; font-weight: 700; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ent-kpi .ent-kpi-delta { font-size: 12.5px; margin-top: 2px; }
.ent-kpi .ent-up { color: var(--ent-success); } .ent-kpi .ent-down { color: var(--ent-danger); }

/* ---- Skeleton loaders --------------------------------------------------- */
.ent-skel { position: relative; overflow: hidden; background: var(--ent-surface-2); border-radius: 8px; }
.ent-skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%); animation: entShimmer 1.3s infinite;
}
.ent-skel-line { height: 12px; margin: 8px 0; }
@keyframes entShimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ent-skel::after { animation: none; } }

/* ---- Bulk-action bar ---------------------------------------------------- */
.ent-bulkbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-radius: var(--ent-radius);
  background: var(--ent-primary); color: #fff; margin-bottom: 10px;
}
.ent-bulkbar .ent-bulk-count { font-weight: 700; }
.ent-bulkbar .ent-spacer { flex: 1; }

/* ---- Dark mode via the existing app theme hooks (if present) ------------ */
[data-theme="dark"] .ent-skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }