/*
 * Admin design system - shared tokens + cross-page utility classes for the
 * whole admin area (src/app/Applications/admin/). Loaded globally from
 * index.html so these rules are available to every admin page, since Angular
 * component CSS encapsulation can't share styles between sibling components.
 *
 * Utility classes are scoped under #admin-wrapper (the id app-admin-shell's
 * root element always renders) so nothing here can leak into the web/mobile
 * apps. Design tokens are declared on :root - they're just custom-property
 * *values*, not rules, so they're safe unscoped and every admin component
 * already consumes them as var(--adm-x, <fallback>).
 */

:root {
  /* brand + status colors */
  --adm-brand: #00B98E;
  --adm-brand-050: #E6F7F2;
  --adm-brand-700: #00897B;
  --adm-accent: #E8213B;
  --adm-success: #1E9E5A;
  --adm-success-bg: #EAFBF1;
  --adm-success-bd: #BFEAD2;
  --adm-danger: #B02A2A;
  --adm-danger-bg: #FFF4F4;
  --adm-warning: #B7791F;
  --adm-warning-bg: #FFF8E6;
  --adm-warning-bd: #F5E1A4;
  --adm-info: #1F6FEB;
  --adm-info-bg: #EAF1FF;
  --adm-info-bd: #C9DDFB;

  /* surfaces + text */
  --adm-bg: #F6F8FB;
  --adm-surface: #fff;
  --adm-surface-2: #FAFBFC;
  --adm-border: #E4E8EC;
  --adm-border-strong: #CBD3DA;
  --adm-text: #1F2933;
  --adm-text-muted: #5B6773;
  --adm-text-faint: #8A97A3;

  /* dark sidebar palette */
  --adm-side-bg: #0E1726;
  --adm-side-bg-2: #0A111E;
  --adm-side-border: rgba(255, 255, 255, .06);
  --adm-side-hover-bg: rgba(255, 255, 255, .05);
  --adm-side-text: #9AA7B8;
  --adm-side-text-strong: #E7ECF3;
  --adm-side-group: #5B6B80;
  --adm-side-active-bg: rgba(0, 185, 142, .14);
  --adm-side-active-text: #34D8B0;

  /* type scale */
  --adm-font: "Poppins", sans-serif;
  --adm-fs-xs: 12px;
  --adm-fs-sm: 13px;
  --adm-fs-md: 14px;
  --adm-fs-lg: 16px;
  --adm-fs-xl: 20px;

  /* spacing scale */
  --adm-s2: 8px;
  --adm-s3: 12px;
  --adm-s4: 16px;
  --adm-s5: 24px;
  --adm-s7: 48px;
  --adm-page-x: 32px;
  --adm-page-x-sm: 16px;

  /* shape + elevation */
  --adm-radius-sm: 6px;
  --adm-radius: 10px;
  --adm-radius-lg: 16px;
  --adm-radius-pill: 999px;
  --adm-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --adm-shadow: 0 8px 24px rgba(16, 24, 40, .12);
  --adm-shadow-lg: 0 24px 60px rgba(15, 23, 42, .2);

  /* layout */
  --adm-sidebar-w: 264px;
  --adm-sidebar-w-collapsed: 76px;
  --adm-topbar-h: 60px;
  --adm-modal-z: 1080;
}

#admin-wrapper {
  font-family: var(--adm-font);
  color: var(--adm-text);
  font-size: var(--adm-fs-md);
}

/* ---- stat card row (agent-list, builder-list, customer-list, ...) ---- */
#admin-wrapper .adm-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--adm-s4);
  margin-bottom: var(--adm-s5);
}

#admin-wrapper .adm-stat {
  display: flex;
  align-items: center;
  gap: var(--adm-s3);
  flex: 1 1 180px;
  padding: var(--adm-s4);
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow-sm);
}

#admin-wrapper .adm-stat__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--adm-radius);
  background: var(--adm-brand-050);
  color: var(--adm-brand-700);
  font-size: var(--adm-fs-lg);
}

#admin-wrapper .adm-stat__icon.is-success { background: var(--adm-success-bg); color: var(--adm-success); }
#admin-wrapper .adm-stat__icon.is-danger  { background: var(--adm-danger-bg); color: var(--adm-danger); }
#admin-wrapper .adm-stat__icon.is-warning { background: var(--adm-warning-bg); color: var(--adm-warning); }
#admin-wrapper .adm-stat__icon.is-info    { background: var(--adm-info-bg); color: var(--adm-info); }

#admin-wrapper .adm-stat__value {
  font-size: var(--adm-fs-xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--adm-text);
}

#admin-wrapper .adm-stat__label {
  margin-top: 2px;
  font-size: var(--adm-fs-xs);
  color: var(--adm-text-muted);
}

/* ---- generic white card (filter bars, detail panels, ...) ---- */
#admin-wrapper .adm-card {
  padding: var(--adm-s5);
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow-sm);
  margin-bottom: var(--adm-s5);
}

/* ---- inline banner message ---- */
#admin-wrapper .adm-alert {
  display: flex;
  align-items: center;
  gap: var(--adm-s2);
  padding: var(--adm-s3) var(--adm-s4);
  margin-bottom: var(--adm-s4);
  border: 1px solid transparent;
  border-radius: var(--adm-radius-sm);
  font-size: var(--adm-fs-sm);
}

#admin-wrapper .adm-alert.is-success { background: var(--adm-success-bg); border-color: var(--adm-success-bd); color: var(--adm-success); }
#admin-wrapper .adm-alert.is-danger  { background: var(--adm-danger-bg); border-color: #F3C6C6; color: var(--adm-danger); }
#admin-wrapper .adm-alert.is-warning { background: var(--adm-warning-bg); border-color: var(--adm-warning-bd); color: var(--adm-warning); }
#admin-wrapper .adm-alert.is-info    { background: var(--adm-info-bg); border-color: var(--adm-info-bd); color: var(--adm-info); }

/* ---- status pill (color variants set per-page via .badge-*) ---- */
#admin-wrapper .adm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--adm-radius-pill);
  font-size: var(--adm-fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

#admin-wrapper .empty-state {
  padding: var(--adm-s5);
  text-align: center;
  color: var(--adm-text-muted);
  font-size: var(--adm-fs-sm);
}