.skip-link { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100; padding: 10px 14px; border-radius: var(--radius-sm); color: white; background: var(--color-brand-900); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted { color: var(--color-text-muted); font-size: 13px; }
.eyebrow { display: block; margin-block-end: 4px; color: var(--color-brand-500); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.admin-shell { min-block-size: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
/* Google-Analytics-style sidebar: collapsed to icons by default, expands on
   hover/keyboard-focus. position:fixed takes it out of grid flow so the
   expanded state overlays the content instead of reflowing it -- the grid's
   first column stays reserved at the collapsed width permanently. */
/* Collapsing back down is deliberately delayed (.44s, on the collapse
   direction only -- expanding on genuine hover-intent stays instant). A
   76px collapsed rail is a narrow hover target right next to real page
   content, so ordinary mouse jitter crossing that boundary while reaching
   for something nearby was re-triggering expand/collapse rapidly, reading
   as a flicker. Leaving and immediately re-entering within the grace
   window now just cancels the pending collapse instead. Label reveal uses
   opacity+max-width (not display:none -> grid/inline) for the same reason
   documented in apps/platform-client/src/styles/tokens.css: an instant
   display toggle rendered as visibly truncated text while the sidebar
   itself was still mid-width-transition. */
.sidebar {
  position: fixed; inset-block-start: 0; inset-inline-start: 0; block-size: 100vh;
  inline-size: var(--sidebar-width); overflow: hidden;
  display: flex; flex-direction: column; padding: 24px 16px; color: #dce9f4;
  background: linear-gradient(180deg, var(--color-brand-950), var(--color-brand-900));
  z-index: 40; transition: inline-size .22s ease .22s, box-shadow .22s ease .22s, overflow 0s .44s;
}
.sidebar:hover, .sidebar:focus-within {
  inline-size: var(--sidebar-width-expanded);
  box-shadow: 16px 0 48px rgba(8, 20, 38, .32);
  overflow: visible;
  transition: inline-size .22s ease, box-shadow .22s ease, overflow 0s;
}
.brand-lockup { display: flex; align-items: center; gap: 12px; padding: 0 8px 28px; color: inherit; text-decoration: none; justify-content: center; }
.sidebar:hover .brand-lockup, .sidebar:focus-within .brand-lockup { justify-content: flex-start; }
.brand-lockup > div { opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; gap: 2px; transition: opacity .12s ease .44s, max-width .12s ease .44s; }
.sidebar:hover .brand-lockup > div, .sidebar:focus-within .brand-lockup > div { opacity: 1; max-width: 220px; display: grid; transition: opacity .16s ease .14s, max-width .16s ease .14s; }
.brand-lockup strong { color: white; font-size: 18px; letter-spacing: -.02em; }
.brand-lockup span:not(.brand-mark) { color: #95abc0; font-size: 12px; }
.brand-mark { display: grid; place-items: center; flex: 0 0 auto; inline-size: 40px; block-size: 40px; border-radius: 12px; color: var(--color-brand-950); background: linear-gradient(135deg, #3d7ff5, #8fb6fa); font-weight: 900; }
.sidebar__nav { display: grid; gap: 4px; }
.nav-link { display: flex; align-items: center; gap: 10px; min-block-size: 44px; padding: 10px 12px; border-radius: 10px; color: #aec0d1; text-decoration: none; font-size: 14px; font-weight: 650; justify-content: center; }
.sidebar:hover .nav-link, .sidebar:focus-within .nav-link { justify-content: flex-start; }
.nav-link:hover { color: white; background: rgba(255,255,255,.06); }
.nav-link--active { color: white; background: rgba(35, 103, 242,.13); box-shadow: inset 3px 0 0 #3d7ff5; }
.nav-link__icon { display: grid; place-items: center; flex: 0 0 auto; inline-size: 24px; block-size: 24px; border: 1px solid currentColor; border-radius: 8px; font-size: 10px; font-weight: 900; opacity: .8; }
.nav-link > span:last-child { opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; transition: opacity .12s ease .44s, max-width .12s ease .44s; }
.sidebar:hover .nav-link > span:last-child, .sidebar:focus-within .nav-link > span:last-child { opacity: 1; max-width: 220px; display: inline; transition: opacity .16s ease .14s, max-width .16s ease .14s; }
.sidebar__footer { margin-block-start: auto; opacity: 0; max-height: 0; max-width: 220px; overflow: hidden; gap: 8px; padding-inline: 10px; color: #8ea4b9; font-size: 11px; white-space: nowrap; transition: opacity .12s ease .44s, max-height .12s ease .44s, padding-block .12s ease .44s; }
.sidebar:hover .sidebar__footer, .sidebar:focus-within .sidebar__footer { opacity: 1; max-height: 80px; display: grid; padding-block: 16px 0; border-block-start: 1px solid rgba(255,255,255,.08); transition: opacity .16s ease .14s, max-height .16s ease .14s, padding-block .16s ease .14s; }
.environment-badge { inline-size: fit-content; padding: 4px 8px; border-radius: 999px; color: #dceaff; background: rgba(35, 103, 242,.12); font-weight: 700; }

.admin-workspace { min-inline-size: 0; }
.topbar { position: sticky; inset-block-start: 0; z-index: 20; min-block-size: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: 28px; border-block-end: 1px solid var(--color-border); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
.topbar__context { display: grid; }
.topbar__brand { display: none; align-items: center; gap: 9px; color: var(--color-text); text-decoration: none; }
.topbar__brand > span:last-child { display: grid; }
.topbar__brand small { color: var(--color-text-muted); font-size: 10px; }
.topbar__brand strong { font-size: 13px; }
.topbar__brand-mark { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 10px; color: white; background: var(--color-brand-700); font-weight: 900; }
.topbar__actions { display: flex; align-items: center; gap: 10px; }
.account-menu { position: relative; }
.account-menu > summary { list-style: none; cursor: pointer; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu__list { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 8px); z-index: 30; min-inline-size: 180px; display: grid; padding: 8px; border: 1px solid var(--color-border); border-radius: 12px; background: white; box-shadow: var(--shadow-lg); }
.account-menu__link { display: block; padding: 8px 10px; border-radius: 8px; color: var(--color-text); text-decoration: none; font-size: 13px; font-weight: 650; }
.account-menu__link:hover { background: var(--color-surface-tint); }
.account-menu__link--active { color: var(--color-brand-700); background: rgba(35, 103, 242,.16); }
.topbar-action > span:first-child { font-size: 16px; line-height: 1; }
.last-updated { color: var(--color-text-muted); font-size: 12px; }
.avatar-button { inline-size: 36px; block-size: 36px; border: 0; border-radius: 50%; color: white; background: var(--color-brand-700); font-size: 12px; font-weight: 800; cursor: pointer; }
.mobile-admin-nav { display: none; }
.main-content { padding: 28px; }

.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-block-end: 24px; }
.page-heading h1 { margin: 0; font-size: clamp(28px, 3vw, 38px); letter-spacing: -.04em; }
.page-heading p { max-inline-size: 700px; margin: 8px 0 0; color: var(--color-text-muted); line-height: 1.6; }
.button { min-block-size: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border: 1px solid transparent; border-radius: 10px; font-weight: 750; cursor: pointer; text-decoration: none; }
.button--primary { color: white; background: var(--color-brand-700); box-shadow: var(--shadow-sm); }
.button--primary:hover { background: var(--color-brand-900); }
.button--secondary { color: var(--color-text); border-color: var(--color-border-strong); background: white; }

.metrics-grid { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 14px; margin-block-end: 22px; }
.metric-card { min-inline-size: 0; display: grid; gap: 8px; min-block-size: 128px; padding: 18px; text-align: start; color: inherit; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
button.metric-card { cursor: pointer; }
button.metric-card:hover { border-color: var(--color-brand-500); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.metric-card__label, .metric-card > span { color: var(--color-text-muted); font-size: 12px; font-weight: 700; }
.metric-card__value, .metric-card > strong { font-size: 28px; letter-spacing: -.04em; }
.metric-card__hint, .metric-card > small { color: var(--color-text-muted); font-size: 12px; line-height: 1.4; }
.metric-card--success { box-shadow: inset 0 3px 0 var(--color-success), var(--shadow-sm); }
.metric-card--warning { box-shadow: inset 0 3px 0 #d99012, var(--shadow-sm); }
.metric-card--danger { box-shadow: inset 0 3px 0 var(--color-danger), var(--shadow-sm); }
.metric-card--info { box-shadow: inset 0 3px 0 var(--color-info), var(--shadow-sm); }

.panel { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel__header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border-block-end: 1px solid var(--color-border); }
.panel__header h2 { margin: 0; font-size: 17px; }
.panel__header p { margin: 5px 0 0; color: var(--color-text-muted); font-size: 12px; }
.table-controls { display: flex; align-items: center; gap: 10px; }
.table-controls input, .table-controls select { min-block-size: 40px; border: 1px solid var(--color-border-strong); border-radius: 9px; color: var(--color-text); background: white; }
.table-controls input { inline-size: min(280px, 32vw); padding-inline: 13px; }
.table-controls select { padding-inline: 12px 34px; }
.table-shell, .table-scroll { overflow-x: auto; }
.data-table { inline-size: 100%; min-inline-size: 1220px; border-collapse: collapse; }
.data-table th { padding: 12px 16px; color: var(--color-text-muted); background: var(--color-surface-subtle); font-size: 11px; letter-spacing: .04em; text-align: start; text-transform: uppercase; }
.data-table td { padding: 16px; border-block-start: 1px solid var(--color-border); vertical-align: middle; font-size: 13px; }
.data-table tbody tr:hover { background: #fbfdff; }
.table-sort-button { display: inline-flex; align-items: center; gap: 4px; border: 0; margin: 0; padding: 0; color: inherit; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.table-sort-button:hover, .table-sort-button:focus-visible { color: var(--color-brand-700); }
.table-filter-row th { padding-block: 6px; background: var(--color-surface); font-weight: 400; text-transform: none; }
.table-filter-row input, .table-filter-row select { inline-size: 100%; min-block-size: 32px; padding-inline: 8px; border: 1px solid var(--color-border-strong); border-radius: 6px; font-size: 12px; }
.client-identity { display: flex; align-items: center; gap: 10px; }
.client-avatar { display: grid; place-items: center; flex: 0 0 auto; inline-size: 34px; block-size: 34px; border-radius: 10px; color: var(--color-brand-700); background: var(--color-brand-100); font-weight: 850; }
.cell-stack { display: grid; gap: 3px; }
.cell-stack strong { max-inline-size: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-stack span { color: var(--color-text-muted); font-size: 11px; }
.count-pill { display: inline-grid; place-items: center; min-inline-size: 30px; block-size: 28px; padding-inline: 8px; border-radius: 8px; background: #edf2f7; font-weight: 800; }
.blocker-summary { display: grid; gap: 4px; max-inline-size: 230px; }
.blocker-summary strong { color: var(--color-danger); font-size: 12px; line-height: 1.4; }
.blocker-summary span { color: var(--color-text-muted); font-size: 10px; text-transform: capitalize; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.row-actions--end { justify-content: flex-end; }
.icon-button { min-block-size: 32px; padding: 6px 9px; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text); background: white; font-size: 11px; font-weight: 700; cursor: pointer; }
.icon-button:hover { border-color: var(--color-brand-500); }
.icon-button--danger { color: var(--color-danger); }

.status-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 999px; color: var(--color-text-muted); background: #eef2f6; font-size: 11px; font-weight: 800; white-space: nowrap; }
.status-badge__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.status-badge--healthy, .status-badge--active, .status-badge--normal { color: var(--color-success); background: var(--color-success-bg); }
.status-badge--warning, .status-badge--critical { color: var(--color-warning); background: var(--color-warning-bg); }
.status-badge--blocked, .status-badge--exceeded { color: var(--color-danger); background: var(--color-danger-bg); }
.status-badge--provisioning, .status-badge--onboarding { color: var(--color-info); background: var(--color-info-bg); }
.status-badge--suspended, .status-badge--archived { color: #5c6675; background: #e9edf2; }
/* Destination delivery-attempt status/outcome (destination_delivery_attempts, #394) */
.status-badge--success, .status-badge--delivered { color: var(--color-success); background: var(--color-success-bg); }
.status-badge--dry_run, .status-badge--sending { color: var(--color-info); background: var(--color-info-bg); }
.status-badge--dedupe_blocked, .status-badge--already_delivered { color: #5c6675; background: #e9edf2; }
.status-badge--retryable, .status-badge--network_error { color: var(--color-warning); background: var(--color-warning-bg); }

/* Platform-health incident severity (platform_incidents, #394) -- kept as
   its own class, distinct from .status-badge, since severity is a
   different axis (low/medium/high/critical) than entity status. */
.incident-severity { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.incident-severity--low { color: var(--color-success); background: var(--color-success-bg); }
.incident-severity--medium { color: var(--color-info); background: var(--color-info-bg); }
.incident-severity--high { color: var(--color-warning); background: var(--color-warning-bg); }
.incident-severity--critical { color: var(--color-danger); background: var(--color-danger-bg); }

.usage-cell { min-inline-size: 220px; }
.usage-meter { display: grid; gap: 7px; }
.usage-meter__heading { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.usage-meter__heading span { color: var(--color-text-muted); }
.usage-meter__track { block-size: 7px; overflow: hidden; border-radius: 999px; background: #e7edf3; }
.usage-meter__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--color-brand-500); }
.usage-meter__fill--warning { background: #d99012; }
.usage-meter__fill--critical { background: #d16713; }
.usage-meter__fill--exceeded { background: var(--color-danger); }
.usage-meter__remaining { color: var(--color-text-muted); font-size: 10px; }

.empty-state, .error-state, .loading-state { display: grid; place-items: center; gap: 12px; min-block-size: 320px; padding: 40px; text-align: center; }
.empty-state h2, .error-state h1 { margin: 0; }
.empty-state p, .error-state p { max-inline-size: 560px; margin: 0; color: var(--color-text-muted); line-height: 1.6; }
.empty-state__icon, .error-state__icon { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 16px; color: var(--color-brand-700); background: var(--color-brand-100); font-size: 24px; font-weight: 900; }
.error-state { min-block-size: calc(100vh - 160px); }
.error-state__icon { color: var(--color-danger); background: var(--color-danger-bg); }
.error-state code { max-inline-size: 700px; padding: 10px 12px; overflow-wrap: anywhere; border-radius: 8px; color: var(--color-danger); background: var(--color-danger-bg); }
.loading-state { color: var(--color-text-muted); }
.spinner { inline-size: 28px; block-size: 28px; border: 3px solid var(--color-border); border-block-start-color: var(--color-brand-500); border-radius: 50%; animation: spin .8s linear infinite; }
.skeleton { position: relative; overflow: hidden; background: #edf2f6; }
.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); animation: shimmer 1.3s infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@media (max-width: 1280px) {
  .metrics-grid { grid-template-columns: repeat(3, minmax(170px, 1fr)); }
}

@media (max-width: 980px) {
  /* Sidebar collapse/expand-on-hover is now the permanent default above (see
     .sidebar in this file) -- this breakpoint only handles unrelated layout. */
  .main-content { padding: 20px; }
  .panel__header, .page-heading { align-items: stretch; flex-direction: column; }
  .table-controls { flex-wrap: wrap; }
  .table-controls input { inline-size: 100%; }
}

@media (max-width: 760px) {
  body { padding-block-end: calc(74px + env(safe-area-inset-bottom)); background: var(--color-surface-subtle); }
  .admin-shell { display: block; min-block-size: 100svh; }
  .sidebar { display: none; }
  .admin-workspace { min-block-size: 100svh; }
  .topbar { min-block-size: 58px; display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .topbar__brand { display: flex; min-inline-size: 0; }
  .topbar__context, .last-updated { display: none; }
  .topbar__actions { gap: 6px; }
  .topbar-action { min-inline-size: 42px; min-block-size: 42px; padding: 8px 10px; }
  .main-content { padding: 16px max(12px, env(safe-area-inset-right)) 24px max(12px, env(safe-area-inset-left)); }
  .mobile-admin-nav { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-block-start: 1px solid var(--color-border); background: rgba(255,255,255,.97); box-shadow: 0 -12px 30px rgba(15, 23, 42, .1); backdrop-filter: blur(16px); }
  .mobile-nav-link { display: grid; place-items: center; gap: 3px; min-block-size: 50px; border-radius: 12px; color: var(--color-text-muted); text-decoration: none; font-size: 10px; font-weight: 750; }
  .mobile-nav-link__icon { display: grid; place-items: center; inline-size: 25px; block-size: 25px; border-radius: 8px; color: var(--color-text-muted); background: var(--color-surface-subtle); font-size: 10px; font-weight: 900; }
  .mobile-nav-link--active { color: var(--color-brand-700); background: var(--color-brand-100); }
  .mobile-nav-link--active .mobile-nav-link__icon { color: white; background: var(--color-brand-700); }
  .page-heading { gap: 14px; margin-block-end: 18px; }
  .page-heading h1 { font-size: clamp(26px, 9vw, 32px); }
  .page-heading p { margin-block-start: 6px; font-size: 13px; line-height: 1.55; }
  .page-heading > .button, .page-heading > div + .button { inline-size: 100%; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block-end: 16px; }
  .metric-card { min-block-size: 108px; gap: 6px; padding: 14px; border-radius: 14px; }
  .metric-card__value, .metric-card > strong { font-size: 24px; }
  .panel { border-radius: 16px; }
  .panel__header { gap: 12px; padding: 16px; }
  .panel__header h2 { font-size: 16px; }
  .table-controls { display: grid; grid-template-columns: 1fr; inline-size: 100%; }
  .table-controls label, .table-controls input, .table-controls select { inline-size: 100%; }
  .table-controls input, .table-controls select { min-block-size: 46px; font-size: 16px; }
  .table-shell, .table-scroll { overflow: visible; }
  .responsive-table { display: block; min-inline-size: 0; border-collapse: separate; }
  .responsive-table thead { display: none; }
  .responsive-table tbody { display: grid; gap: 12px; padding: 12px; }
  .responsive-table tr { display: grid; gap: 10px; padding: 15px; border: 1px solid var(--color-border); border-radius: 14px; background: white; box-shadow: var(--shadow-sm); }
  .responsive-table td { display: grid; grid-template-columns: minmax(92px, .72fr) minmax(0, 1.28fr); align-items: start; gap: 10px; min-inline-size: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
  .responsive-table td::before { content: attr(data-label); color: var(--color-text-muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  .responsive-table .table-empty-row { display: block; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .responsive-table .table-empty-row td, .responsive-table td[colspan] { display: block; }
  .responsive-table .table-empty-row td::before, .responsive-table td[colspan]::before { display: none; }
  .responsive-table .client-identity { align-items: flex-start; }
  .responsive-table .usage-cell { min-inline-size: 0; }
  .responsive-table .cell-stack strong { max-inline-size: none; white-space: normal; }
  .responsive-table .row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; }
  .responsive-table .row-actions .button, .responsive-table .row-actions .icon-button { inline-size: 100%; min-block-size: 40px; }
  .button, .icon-button { min-block-size: 44px; }
  .empty-state, .error-state, .loading-state { min-block-size: 240px; padding: 28px 18px; }
}

@media (max-width: 480px) {
  .topbar-action__label { display: none; }
  .metrics-grid { grid-template-columns: 1fr; }
  .metric-card { min-block-size: 96px; }
  .responsive-table td { grid-template-columns: 86px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after, .spinner { animation: none; }
  .topbar, .mobile-admin-nav { backdrop-filter: none; }
}