/* [project]/apps/admin/app/styles.css [app-client] (css) */
:root {
  --ela-color-brand: var(--ela-color-brand-primary);
  --ela-color-danger: var(--ela-color-state-error);
  --ela-color-muted-fg: var(--ela-color-muted);
  --ela-color-state-danger: var(--ela-color-state-error);
  --ela-color-state-success-fg: #245f46;
  --ela-color-state-warning-fg: #7a4e00;
  --ela-color-brand-accent-fg: #6f4b00;
  --ela-color-text: var(--ela-color-fg);
  --admin-maroon: #5c1a1b;
  --admin-maroon-700: #3b1011;
  --admin-cream: #f5f1ea;
  --admin-gold: #c8a55c;
  --admin-gold-soft: #e6d4a8;
  --admin-line: #1b1b1e1a;
  --admin-surface: #fff;
  --admin-ink: #1b1b1e;
  --admin-ink-soft: #1b1b1e94;
  --admin-crit: #b23a3a;
  --admin-ok: #43a36d;
  --admin-topbar-bg: #f5f1eadb;
  --admin-overlay: #22201d73;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
}

[data-theme="dark"] {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --ela-color-bg: #1a1a2e;
  --ela-color-fg: #e0d6c2;
  --ela-color-surface: #16213e;
  --ela-color-border: #ffffff1a;
  --ela-color-muted: #e0d6c2ad;
  --ela-color-brand-primary: #e0d6c2;
  --ela-color-brand: #e0d6c2;
  --ela-color-danger: #ff7a7a;
  --ela-color-muted-fg: #e0d6c2ad;
  --ela-color-state-danger: #ff7a7a;
  --ela-color-state-success-fg: #6fbf8a;
  --ela-color-state-warning-fg: #e0a84c;
  --ela-color-brand-accent-fg: #d4b56c;
  --ela-color-text: #e0d6c2;
  --admin-maroon: #0f0f23;
  --admin-maroon-700: #080817;
  --admin-cream: #1a1a2e;
  --admin-gold: #c8a55c;
  --admin-gold-soft: #e6d4a8;
  --admin-line: #ffffff1a;
  --admin-surface: #16213e;
  --admin-ink: #e0d6c2;
  --admin-ink-soft: #e0d6c2ad;
  --admin-crit: #ff7a7a;
  --admin-ok: #6fbf8a;
  --admin-topbar-bg: #16213edb;
  --admin-overlay: #050512b8;
}

* {
  box-sizing: border-box;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

body {
  background: var(--ela-color-bg);
  color: var(--ela-color-fg);
  margin: 0;
  transition: background-color .3s, color .3s;
}

button, input, select, textarea {
  font: inherit;
}

a, button, input, select, textarea, .adminPortalFrame, .adminPortalWork, .adminSidebar, .adminTopbar, .adminIconButton, .adminHamburger, .adminLivePill, .adminPortalContent, .adminCard, .adminPanel, .consoleApp, .consoleMain, .consoleTopbar, .consoleContent, .consolePalette, .consolePaletteItem, .consoleLivePill {
  transition: background-color .3s, border-color .3s, color .3s, box-shadow .3s;
}

[data-theme="dark"] .adminSidebar {
  background: var(--admin-maroon);
  border-right-color: var(--admin-line);
}

[data-theme="dark"] .adminTopbar {
  background: var(--admin-topbar-bg);
  border-bottom-color: var(--admin-line);
}

[data-theme="dark"] .adminSidebarScrim {
  background: var(--admin-overlay);
}

[data-theme="dark"] .adminIconButton:hover, [data-theme="dark"] .adminIconButton:focus-visible, [data-theme="dark"] .adminHamburger:hover, [data-theme="dark"] .adminHamburger:focus-visible {
  color: var(--admin-gold-soft);
  border-color: #c8a55c6b;
}

[data-theme="dark"] .adminIconButton span {
  border-color: var(--admin-cream);
}

[data-theme="dark"] .adminThemeToggle {
  color: var(--admin-gold-soft);
}

[data-theme="dark"] .confirmDialogOverlay {
  background: #050512c7;
}

[data-theme="dark"] .confirmDialogPhraseBox {
  background: color-mix(in srgb, var(--ela-color-state-error) 14%, var(--ela-color-surface));
  border-color: color-mix(in srgb, var(--ela-color-state-error) 34%, var(--ela-color-border));
}

[data-theme="dark"] .confirmDialogAlertIcon, [data-theme="dark"] .confirmDialogError, [data-theme="dark"] .confirmDialogPhraseBox code {
  color: #fff4f0;
}

[data-theme="dark"] .adminClockPanel div, [data-theme="dark"] .commandPaletteButton, [data-theme="dark"] .confirmDialogLabel input {
  color: #e0d6c2;
  background: #16213e;
  border-color: #ffffff1a;
}

[data-theme="dark"] .commandPaletteButton:hover, [data-theme="dark"] .commandPaletteButton:focus-visible {
  background: #ffffff14;
  border-color: #c8a55c4d;
}

[data-theme="dark"] .commandPaletteButton kbd {
  color: var(--admin-gold-soft);
  background: #00000047;
  border-color: #ffffff1f;
}

[data-theme="dark"] .consoleApp, [data-theme="dark"] .consoleMain, [data-theme="dark"] .consoleContent {
  color: #e0d6c2;
  background: #1a1a2e;
}

[data-theme="dark"] .consoleSidebar {
  background: #0f0f23;
  border-color: #ffffff1a;
}

[data-theme="dark"] .consoleTopbar {
  background: #16213edb;
  border-bottom-color: #ffffff1a;
}

[data-theme="dark"] .consoleHamburger, [data-theme="dark"] .consoleLivePill, [data-theme="dark"] .consolePalette, [data-theme="dark"] .consolePaletteItem {
  color: #e0d6c2;
  background: #16213e;
  border-color: #ffffff1a;
}

[data-theme="dark"] .consolePageTitle, [data-theme="dark"] .consolePaletteTitle {
  color: #e0d6c2;
}

[data-theme="dark"] .consoleCrumb, [data-theme="dark"] .consolePaletteSub {
  color: #e0d6c29e;
}

[data-theme="dark"] .consoleLivePill, [data-theme="dark"] .consolePaletteIcon {
  color: #e6d4a8;
}

[data-theme="dark"] .consolePaletteIcon, [data-theme="dark"] .consolePaletteGroup {
  background: #c8a55c24;
}

[data-theme="dark"] .consolePaletteGroup {
  color: #e0d6c2b8;
}

[data-theme="dark"] .consolePaletteItem.sel {
  box-shadow: inset 0 0 0 1.5px #c8a55c;
}

.confirmDialogOverlay {
  padding: var(--ela-space-5);
  z-index: 1000;
  background: #1b1b1e94;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.confirmDialogPanel {
  width: min(100%, 520px);
  max-width: 520px;
}

.confirmDialogForm {
  gap: var(--ela-space-4);
  padding: var(--ela-space-5);
  display: grid;
}

.confirmDialogHeader {
  align-items: start;
  gap: var(--ela-space-3);
  display: flex;
}

.confirmDialogAlertIcon {
  background: var(--ela-color-state-error);
  border-radius: var(--ela-radius-sm);
  color: #fff;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
}

.confirmDialogHeader h2 {
  color: var(--ela-color-fg);
  font-size: var(--ela-font-heading-size);
  line-height: var(--ela-font-heading-line);
  margin: 0;
}

.confirmDialogHeader p {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  line-height: var(--ela-font-caption-line);
  margin: var(--ela-space-1) 0 0;
}

.confirmDialogPhraseBox {
  background: color-mix(in srgb, var(--ela-color-state-error) 10%, var(--ela-color-surface));
  border: 1px solid color-mix(in srgb, var(--ela-color-state-error) 32%, var(--ela-color-border));
  border-radius: var(--ela-radius-md);
  gap: var(--ela-space-2);
  padding: var(--ela-space-4);
  display: grid;
}

.confirmDialogPhraseBox span, .confirmDialogLabel {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  letter-spacing: 0;
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
}

.confirmDialogPhraseBox code {
  color: var(--ela-color-state-error);
  letter-spacing: 0;
  overflow-wrap: anywhere;
  font-size: 18px;
  font-weight: 800;
}

.confirmDialogLabel {
  gap: var(--ela-space-2);
  display: grid;
}

.confirmDialogLabel input {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  color: var(--ela-color-fg);
  font-size: var(--ela-font-body-size);
  line-height: var(--ela-font-body-line);
  text-transform: none;
  padding: 10px 12px;
}

.confirmDialogLabel input:focus {
  border-color: var(--ela-color-state-error);
  outline: 3px solid color-mix(in srgb, var(--ela-color-state-error) 18%, transparent);
}

.confirmDialogError {
  color: var(--ela-color-state-error);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  margin: 0;
}

.confirmDialogActions {
  gap: var(--ela-space-2);
  justify-content: flex-end;
  display: flex;
}

.adminPortalFrame {
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
  display: grid;
}

.adminPortalWork {
  min-width: 0;
}

.adminSidebar {
  background: color-mix(in srgb, var(--ela-color-surface) 88%, var(--ela-color-bg));
  border-right: 1px solid var(--ela-color-border);
  align-self: start;
  gap: var(--ela-space-4);
  min-height: 100vh;
  padding: var(--ela-space-5);
  display: grid;
  position: sticky;
  top: 0;
}

.adminSidebarHeader, .adminSidebarFooter {
  gap: var(--ela-space-1);
  display: grid;
}

.adminSidebarHeader span, .adminSidebarFooter span, .adminClockPanel span, .adminSidebarNav a span, .commandPaletteSearch {
  color: var(--ela-color-brand);
  font-size: var(--ela-font-caption-size);
  letter-spacing: 0;
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
}

.adminSidebarHeader strong, .adminSidebarFooter strong {
  color: var(--ela-color-fg);
  font-size: var(--ela-font-heading-size);
  line-height: var(--ela-font-heading-line);
}

.adminSidebarHeader small, .adminSidebarNav a small, .commandPaletteList button small {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
}

.adminClockPanel {
  gap: var(--ela-space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.adminClockPanel div {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  gap: var(--ela-space-1);
  padding: var(--ela-space-3);
  display: grid;
}

.adminClockPanel strong {
  color: var(--ela-color-fg);
  font-variant-numeric: tabular-nums;
  line-height: var(--ela-font-body-line);
}

.commandPaletteButton {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  cursor: pointer;
  min-height: 44px;
  padding: 0 var(--ela-space-3);
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  display: flex;
}

.commandPaletteButton span {
  color: var(--ela-color-fg);
}

kbd {
  background: color-mix(in srgb, var(--ela-color-brand) 9%, var(--ela-color-surface));
  border: 1px solid color-mix(in srgb, var(--ela-color-brand) 28%, var(--ela-color-border));
  border-radius: var(--ela-radius-sm);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ela-color-brand) 20%, transparent);
  color: var(--ela-color-brand);
  font-size: var(--ela-font-caption-size);
  padding: 2px 6px;
  font-weight: 800;
}

.themeToggleButton {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-muted);
  cursor: pointer;
  font-size: var(--ela-font-caption-size);
  min-height: 36px;
  padding: 0 var(--ela-space-3);
  text-transform: uppercase;
  font-weight: 800;
}

.themeToggleButton:hover, .themeToggleButton:focus-visible {
  border-color: var(--ela-color-brand);
  outline: 3px solid color-mix(in srgb, var(--ela-color-brand) 18%, transparent);
}

.adminSidebarNav {
  gap: var(--ela-space-2);
  display: grid;
}

.adminSidebarNav a {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: inherit;
  gap: var(--ela-space-1);
  padding: var(--ela-space-3);
  text-decoration: none;
  display: grid;
}

.adminSidebarNav a:hover, .adminSidebarNav a:focus-visible, .commandPaletteButton:hover, .commandPaletteButton:focus-visible {
  border-color: var(--ela-color-brand);
  outline: 3px solid color-mix(in srgb, var(--ela-color-brand) 18%, transparent);
}

.adminSidebarNav a strong, .commandPaletteList button strong {
  color: var(--ela-color-fg);
  line-height: var(--ela-font-body-line);
}

.commandPaletteOverlay {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 13vh var(--ela-space-4) var(--ela-space-4);
  z-index: 200;
  background: #1b1b1e5c;
  place-items: start center;
  display: grid;
  position: fixed;
  inset: 0;
}

.commandPaletteDialog {
  background: #fff;
  border: 1px solid #1b1b1e1a;
  border-radius: 14px;
  width: min(640px, 92vw);
  max-width: 640px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 24px 60px #22201d38;
}

.commandPaletteSearch {
  gap: var(--ela-space-2);
  padding: var(--ela-space-4);
  border-bottom: 1px solid #1b1b1e1a;
  display: grid;
}

.commandPaletteDialog input {
  background: var(--ela-color-bg);
  color: var(--ela-color-fg);
  font-size: var(--ela-font-body-size);
  line-height: var(--ela-font-body-line);
  min-height: 44px;
  padding: 0 var(--ela-space-3);
  border: 1px solid #5c1a1b2e;
  border-radius: 8px;
  width: 100%;
}

.commandPaletteDialog input:focus {
  border-color: var(--ela-color-brand);
  outline: 3px solid color-mix(in srgb, var(--ela-color-brand) 18%, transparent);
}

.commandPaletteList {
  gap: var(--ela-space-1);
  max-height: min(54vh, 460px);
  padding: var(--ela-space-2);
  display: grid;
  overflow: auto;
}

.commandPaletteAction {
  color: var(--ela-color-fg);
  cursor: pointer;
  align-items: center;
  gap: var(--ela-space-3);
  padding: var(--ela-space-3);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 9px;
  justify-content: space-between;
  width: 100%;
  display: flex;
}

.commandPaletteAction > span:first-child {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.commandPaletteKeys {
  flex: none;
  gap: 4px;
  display: inline-flex;
}

.commandPaletteAction[aria-selected="true"], .commandPaletteAction:hover, .commandPaletteAction:focus-visible {
  background: color-mix(in srgb, var(--ela-color-brand) 7%, var(--ela-color-bg));
  box-shadow: inset 0 0 0 1.5px var(--ela-color-brand-accent);
  outline: 0;
}

.commandPaletteList p {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-body-size);
  line-height: var(--ela-font-body-line);
  padding: var(--ela-space-5);
  text-align: center;
  margin: 0;
}

.rolePortalPanel {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  gap: var(--ela-space-4);
  padding: var(--ela-space-5);
  display: grid;
}

.rolePortalPanel p {
  color: var(--ela-color-muted);
  line-height: var(--ela-font-body-line);
  margin: 0;
}

.rolePortalPanel a {
  color: var(--ela-color-brand);
  width: fit-content;
  font-weight: 800;
}

.adminShell, .shell {
  gap: var(--ela-space-5);
  max-width: 1180px;
  min-height: 100vh;
  padding: var(--ela-space-6);
  margin: 0 auto;
  display: grid;
}

.adminHero {
  align-items: end;
  gap: var(--ela-space-5);
  padding: var(--ela-space-4) 0 var(--ela-space-2);
  grid-template-columns: minmax(0, 1fr) minmax(420px, .8fr);
  display: grid;
}

.adminHeroCopy, .authPanel, .sessionPanel, .roleMatrix {
  gap: var(--ela-space-4);
  display: grid;
}

.adminHeroCopy {
  gap: var(--ela-space-2);
}

.adminHeroCopy p, .authPanel p, .sessionPanel p, .sectionTitleRow p {
  color: var(--ela-color-brand);
  font-size: var(--ela-font-caption-size);
  letter-spacing: 0;
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
  margin: 0;
}

.adminHeroCopy h1 {
  font-size: var(--ela-font-display-md-size);
  letter-spacing: 0;
  line-height: var(--ela-font-display-md-line);
  margin: 0;
}

.adminHeroCopy span, .healthStrip span, .authPanel dt, .sessionPanel dt {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  line-height: var(--ela-font-caption-line);
}

.healthStrip, .authPanel, .sessionPanel, .roleMatrix {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  padding: var(--ela-space-5);
}

.healthStrip {
  gap: var(--ela-space-3);
  padding: var(--ela-space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

.authPanel dl div, .healthStrip div, .sessionPanel dl div {
  gap: var(--ela-space-1);
  display: grid;
}

.healthStrip strong, .authPanel dd, .sessionPanel dd {
  color: var(--ela-color-fg);
  font-size: var(--ela-font-body-size);
  font-weight: 700;
  line-height: var(--ela-font-body-line);
  overflow-wrap: anywhere;
  margin: 0;
}

.adminGrid {
  gap: var(--ela-space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

.workflowNav {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  gap: var(--ela-space-4);
  padding: var(--ela-space-4);
  display: grid;
}

.workflowNavHeader {
  align-items: end;
  gap: var(--ela-space-3);
  justify-content: space-between;
  display: flex;
}

.workflowNavHeader p {
  color: var(--ela-color-brand);
  font-size: var(--ela-font-caption-size);
  letter-spacing: 0;
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
  margin: 0;
}

.workflowNavHeader h2 {
  font-size: var(--ela-font-heading-size);
  letter-spacing: 0;
  line-height: var(--ela-font-heading-line);
  margin: var(--ela-space-1) 0 0;
}

.workflowNavHeader span {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  white-space: nowrap;
}

.workflowLinkGrid {
  gap: var(--ela-space-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.workflowLink {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: inherit;
  gap: var(--ela-space-1);
  min-height: 74px;
  padding: var(--ela-space-3);
  text-decoration: none;
  display: grid;
}

.workflowLink:focus-visible, .workflowLink:hover {
  border-color: var(--ela-color-brand);
}

.workflowLink span {
  color: var(--ela-color-fg);
  font-size: var(--ela-font-body-size);
  font-weight: 800;
  line-height: var(--ela-font-body-line);
}

.workflowLink small {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
}

.workflowAnchor {
  scroll-margin-top: var(--ela-space-6);
}

.authPanel h2, .sessionPanel h2, .sectionTitleRow h2 {
  font-size: var(--ela-font-heading-size);
  letter-spacing: 0;
  line-height: var(--ela-font-heading-line);
  margin: var(--ela-space-1) 0 0;
}

.authPanel label {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  gap: var(--ela-space-2);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  display: grid;
}

.authPanel input {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  min-height: 44px;
  padding: 0 var(--ela-space-3);
  width: 100%;
}

.authPanel button {
  background: var(--ela-color-brand-accent);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-bg);
  cursor: pointer;
  min-height: 44px;
  padding: 0 var(--ela-space-4);
  border: 0;
  font-weight: 800;
}

.totpPreview {
  aspect-ratio: 1;
  background: linear-gradient(90deg, var(--ela-color-border) 1px, transparent 1px),
    linear-gradient(var(--ela-color-border) 1px, transparent 1px), var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-brand-accent);
  font-size: var(--ela-font-heading-size);
  background-size: 18px 18px;
  place-items: center;
  max-height: 132px;
  font-weight: 900;
  display: grid;
}

.authPanel dl, .sessionPanel dl {
  gap: var(--ela-space-3);
  margin: 0;
  display: grid;
}

.sectionTitleRow {
  align-items: end;
  gap: var(--ela-space-4);
  justify-content: space-between;
  display: flex;
}

.sectionTitleRow > span {
  border: 1px solid var(--ela-color-border);
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  padding: var(--ela-space-2) var(--ela-space-3);
  border-radius: 999px;
}

.sectionTitleRow > button {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  cursor: pointer;
  font-size: var(--ela-font-caption-size);
  min-height: 40px;
  padding: 0 var(--ela-space-3);
  font-weight: 800;
}

.adminApiStatus {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  margin: 0;
}

.adminChecklist {
  color: var(--ela-color-fg);
  font-size: var(--ela-font-caption-size);
  gap: var(--ela-space-2);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  padding-left: var(--ela-space-5);
  margin: 0;
  display: grid;
}

.roleTable {
  gap: var(--ela-space-2);
  display: grid;
}

.liveCasesPanel {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  box-shadow: var(--ela-shadow-lg);
  gap: var(--ela-space-5);
  padding: var(--ela-space-6);
  display: grid;
}

.runtimeModePanel {
  background: color-mix(in srgb, var(--ela-color-brand-accent) 6%, var(--ela-color-surface));
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  gap: var(--ela-space-4);
  padding: var(--ela-space-5);
  display: grid;
}

.runtimeModeBadge {
  background: color-mix(in srgb, var(--ela-color-brand-accent) 12%, var(--ela-color-surface));
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-brand-accent);
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  padding: var(--ela-space-2) var(--ela-space-3);
}

.runtimeModeBadge.production {
  background: color-mix(in srgb, var(--ela-color-danger) 10%, var(--ela-color-surface));
  color: var(--ela-color-danger);
}

.runtimeModeWarning {
  color: var(--ela-color-fg);
  font-size: var(--ela-font-body-size);
  font-weight: 700;
  line-height: var(--ela-font-body-line);
  margin: 0;
}

.runtimeModeGrid {
  gap: var(--ela-space-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.runtimeModeGrid article {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  gap: var(--ela-space-1);
  padding: var(--ela-space-4);
  display: grid;
}

.runtimeModeGrid span, .runtimeModeGrid small {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
}

.runtimeModeGrid strong {
  color: var(--ela-color-fg);
  font-size: var(--ela-font-body-size);
  line-height: var(--ela-font-body-line);
  overflow-wrap: anywhere;
}

.dispatchClockStrip {
  gap: var(--ela-space-3);
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  display: grid;
}

.dispatchClockStrip div {
  background: color-mix(in srgb, var(--ela-color-brand) 8%, var(--ela-color-bg));
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  gap: var(--ela-space-1);
  padding: var(--ela-space-3);
  display: grid;
}

.dispatchClockStrip span, .staleDataBanner span, .caseTakeoverSurface span, .caseTakeoverSurface small {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
}

.dispatchClockStrip strong {
  color: var(--ela-color-text);
  font-family: var(--ela-font-mono);
  font-size: var(--ela-font-body-size);
  line-height: var(--ela-font-body-line);
}

.staleDataBanner {
  background: color-mix(in srgb, var(--ela-color-state-warning) 16%, var(--ela-color-bg));
  border: 1px solid color-mix(in srgb, var(--ela-color-state-warning) 42%, var(--ela-color-border));
  border-radius: var(--ela-radius-sm);
  gap: var(--ela-space-1);
  padding: var(--ela-space-3);
  display: grid;
}

.staleDataBanner strong {
  color: var(--ela-color-text);
}

.caseToolbar {
  align-items: end;
  gap: var(--ela-space-3);
  flex-wrap: wrap;
  display: flex;
}

.stakeholderLaneSection {
  gap: var(--ela-space-3);
  display: grid;
}

.stakeholderLaneTitle {
  justify-content: space-between;
  align-items: end;
  gap: var(--ela-space-3);
  display: flex;
}

.stakeholderLaneTitle p {
  color: var(--ela-color-brand);
  font-size: var(--ela-font-caption-size);
  letter-spacing: 0;
  font-weight: 900;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
  margin: 0;
}

.stakeholderLaneTitle h3 {
  color: var(--ela-color-fg);
  font-size: var(--ela-font-heading-size);
  line-height: var(--ela-font-heading-line);
  margin: 0;
}

.stakeholderLaneTitle span {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
}

.stakeholderLaneBoard {
  gap: var(--ela-space-3);
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  display: grid;
}

.stakeholderLane {
  background: color-mix(in srgb, var(--ela-color-bg) 72%, var(--ela-color-surface));
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  gap: var(--ela-space-3);
  min-width: 0;
  padding: var(--ela-space-3);
  display: grid;
}

.stakeholderLaneHeader {
  gap: var(--ela-space-1);
  display: grid;
}

.stakeholderLaneHeader span {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  letter-spacing: 0;
  font-weight: 900;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
}

.stakeholderLaneHeader strong {
  color: var(--ela-color-fg);
  font-size: var(--ela-font-body-size);
  line-height: var(--ela-font-body-line);
}

.stakeholderLaneCards {
  gap: var(--ela-space-2);
  display: grid;
}

.stakeholderLaneCards p {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  margin: 0;
}

.stakeholderLaneCard {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-left: 4px solid var(--ela-color-muted);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-muted);
  cursor: pointer;
  min-height: 126px;
  padding: var(--ela-space-3);
  text-align: left;
  gap: 3px;
  width: 100%;
  display: grid;
}

.stakeholderLaneCard:hover, .stakeholderLaneCard:focus-visible {
  outline: 3px solid #2f6fed38;
}

.stakeholderLaneCard[aria-current="true"] {
  box-shadow: inset 0 0 0 2px #2f6fed42;
}

.stakeholderLaneCard span {
  color: var(--ela-color-brand);
  font-family: var(--ela-font-mono);
  font-size: var(--ela-font-caption-size);
  font-weight: 900;
  line-height: var(--ela-font-caption-line);
}

.stakeholderLaneCard strong {
  color: var(--ela-color-fg);
  font-size: var(--ela-font-body-size);
  line-height: var(--ela-font-body-line);
  overflow-wrap: anywhere;
}

.stakeholderLaneCard small, .stakeholderLaneCard em {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-style: normal;
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  overflow-wrap: anywhere;
}

.stakeholderLaneCard-active {
  border-left-color: var(--ela-color-brand);
}

.stakeholderLaneCard-complete {
  border-left-color: var(--ela-color-state-success);
}

.stakeholderLaneCard-attention {
  background: color-mix(in srgb, var(--ela-color-state-warning) 12%, var(--ela-color-surface));
  border-left-color: var(--ela-color-state-warning);
}

.stakeholderLaneCard-duress {
  background: color-mix(in srgb, var(--ela-color-danger) 10%, var(--ela-color-bg));
  border-color: #b91c1c8c;
  border-left-color: var(--ela-color-danger);
}

.caseSummaryStrip {
  gap: var(--ela-space-3);
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  margin: 0;
  display: grid;
}

.caseSummaryStrip div {
  background: color-mix(in srgb, var(--ela-color-bg) 72%, var(--ela-color-surface));
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  gap: var(--ela-space-1);
  min-width: 0;
  padding: var(--ela-space-3);
  display: grid;
}

.caseSummaryStrip dt {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
}

.caseSummaryStrip dd {
  color: var(--ela-color-fg);
  font-size: var(--ela-font-body-size);
  font-weight: 800;
  line-height: var(--ela-font-body-line);
  overflow-wrap: anywhere;
  margin: 0;
}

.caseToolbar label {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  gap: var(--ela-space-2);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
  min-width: 160px;
  display: grid;
}

.caseToolbar select {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-text);
  font: inherit;
  min-height: 40px;
  padding: 0 var(--ela-space-3);
  text-transform: none;
}

.caseToolbar .toggleFilter {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  min-width: auto;
  min-height: 40px;
  padding: 0 var(--ela-space-3);
  align-items: center;
  display: flex;
}

.liveCaseKpiStrip {
  gap: var(--ela-space-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.liveCaseKpiCard svg {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  width: 16px;
  height: 16px;
}

.liveCaseKpiCard-warn > div:first-child > span:last-child, .liveCaseKpiCard-warn > div:nth-child(2) {
  color: var(--ela-color-state-warning);
}

.liveCaseKpiCard-danger > div:first-child > span:last-child, .liveCaseKpiCard-danger > div:nth-child(2) {
  color: var(--ela-color-state-error);
}

.liveCaseKpiCard-success > div:first-child > span:last-child, .liveCaseKpiCard-success > div:nth-child(2) {
  color: var(--ela-color-state-success);
}

.caseTable {
  gap: var(--ela-space-2);
  display: grid;
}

.caseRow {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  cursor: pointer;
  align-items: center;
  gap: var(--ela-space-4);
  min-height: 72px;
  padding: var(--ela-space-2) var(--ela-space-3);
  grid-template-columns: minmax(150px, .85fr) minmax(240px, 1.5fr) minmax(140px, .75fr) minmax(180px, 1fr) minmax(88px, .4fr);
  transition: background .16s, border-color .16s, box-shadow .16s, transform .16s;
  display: grid;
}

.caseRow:hover {
  background: color-mix(in srgb, var(--ela-color-surface) 76%, var(--ela-color-bg));
  border-color: color-mix(in srgb, var(--ela-color-brand) 34%, var(--ela-color-border));
  transform: translateY(-1px);
  box-shadow: 0 10px 24px #0f172a14;
}

.caseHeader {
  cursor: default;
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 900;
  line-height: var(--ela-font-caption-line);
  min-height: auto;
  padding-block: var(--ela-space-2);
  text-transform: uppercase;
  background: #0f172a0d;
  transform: none;
}

.caseHeader:hover {
  border-color: var(--ela-color-border);
  box-shadow: none;
  background: #0f172a0d;
  transform: none;
}

.caseRow[aria-selected="true"] {
  outline: 3px solid #2f6fed42;
}

.caseRowDuress {
  background: color-mix(in srgb, var(--ela-color-danger) 10%, var(--ela-color-bg));
  border-color: #b91c1c8c;
  border-left-color: var(--ela-color-danger);
  box-shadow: inset 0 0 0 1px #b91c1c29;
}

.caseRowPatched {
  animation: 1.2s ease-out casePatchFlash;
}

.caseRowEmpty {
  grid-template-columns: 1fr;
  min-height: auto;
}

@keyframes casePatchFlash {
  0% {
    background: color-mix(in srgb, var(--ela-color-state-success) 14%, var(--ela-color-bg));
  }

  100% {
    background: var(--ela-color-bg);
  }
}

.caseRow > div, .caseRow > details {
  color: var(--ela-color-muted);
  align-content: center;
  gap: var(--ela-space-1);
  min-width: 0;
  font-size: .78rem;
}

.caseRow strong {
  color: var(--ela-color-text);
  overflow-wrap: anywhere;
  font-size: .86rem;
}

.caseRow span, .caseRow a, .caseRow summary {
  overflow-wrap: anywhere;
}

.caseRow a {
  color: var(--ela-color-brand);
  font-weight: 800;
}

.caseSelectButton {
  background: var(--ela-color-brand);
  border-radius: var(--ela-radius-sm);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  min-height: 34px;
  padding: 0 var(--ela-space-3);
  border: 0;
  justify-content: center;
  align-self: start;
  align-items: center;
  width: fit-content;
  font-size: .78rem;
  font-weight: 900;
  transition: opacity .16s, transform .16s, background .16s;
  display: inline-flex;
  transform: translateX(4px);
}

.caseRow:hover .caseSelectButton, .caseRow:focus-within .caseSelectButton {
  opacity: 1;
  transform: translateX(0);
}

.caseSelectButton:hover, .caseSelectButton:focus-visible {
  background: var(--ela-color-brand-primary);
  outline: 3px solid #2f6fed38;
}

.caseRefCell, .caseSubjectCell, .caseAssigneeCell, .caseOpenCell, .caseStatusCell {
  display: flex;
}

.caseRefCell {
  align-items: center;
  gap: var(--ela-space-2);
}

.caseRefCell > strong {
  font-family: var(--ela-font-mono);
  white-space: nowrap;
}

.caseSlaTime {
  color: var(--ela-color-muted);
  font-family: var(--ela-font-mono);
  font-size: var(--ela-font-caption-size);
  white-space: nowrap;
  font-weight: 800;
}

.slaDonut {
  color: var(--ela-color-muted);
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
  position: relative;
}

.slaDonut svg {
  width: 36px;
  height: 36px;
  transform: rotate(-90deg);
}

.slaDonutTrack, .slaDonutValue {
  fill: none;
  stroke-width: 4px;
}

.slaDonutTrack {
  stroke: color-mix(in srgb, var(--ela-color-muted) 18%, var(--ela-color-bg));
}

.slaDonutValue {
  stroke: currentColor;
  stroke-linecap: round;
  transition: stroke-dashoffset .18s;
}

.slaDonut span {
  color: currentColor;
  font-family: var(--ela-font-mono);
  font-size: .58rem;
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.slaDonut-green {
  color: var(--ela-color-state-success);
}

.slaDonut-amber {
  color: var(--ela-color-state-warning);
}

.slaDonut-red, .slaDonut-breached {
  color: var(--ela-color-state-error);
}

.caseSubjectCell {
  align-items: center;
  gap: var(--ela-space-3);
}

.caseAvatar, .caseAssigneeAvatar {
  background: color-mix(in srgb, var(--ela-color-brand) 14%, var(--ela-color-bg));
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-brand-primary);
  font-size: var(--ela-font-caption-size);
  flex: none;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  font-weight: 900;
  display: inline-flex;
}

.caseSubjectText {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.caseSubjectText strong {
  align-items: center;
  gap: var(--ela-space-2);
  flex-wrap: wrap;
  display: flex;
}

.caseSubjectText > span {
  color: var(--ela-color-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.caseStatusCell {
  flex-direction: column;
  align-items: flex-start;
}

.caseStatusCell small, .caseAssigneeCell small {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
}

.caseStatusBadge {
  font-size: var(--ela-font-caption-size);
  align-items: center;
  gap: var(--ela-space-2);
  padding: 5px var(--ela-space-2);
  white-space: nowrap;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
}

.caseStatusBadge > span {
  border-radius: 999px;
  width: 6px;
  height: 6px;
}

.caseStatusBadge-ok {
  background: color-mix(in srgb, var(--ela-color-state-success) 14%, var(--ela-color-bg));
  color: var(--ela-color-state-success);
}

.caseStatusBadge-ok > span {
  background: var(--ela-color-state-success);
}

.caseStatusBadge-warn {
  background: color-mix(in srgb, var(--ela-color-state-warning) 18%, var(--ela-color-bg));
  color: var(--ela-color-state-warning);
}

.caseStatusBadge-warn > span {
  background: var(--ela-color-state-warning);
}

.caseStatusBadge-crit {
  background: color-mix(in srgb, var(--ela-color-state-error) 14%, var(--ela-color-bg));
  color: var(--ela-color-state-error);
}

.caseStatusBadge-crit > span {
  background: var(--ela-color-state-error);
}

.caseStatusBadge-neutral {
  background: color-mix(in srgb, var(--ela-color-muted) 12%, var(--ela-color-bg));
  color: var(--ela-color-muted);
}

.caseStatusBadge-neutral > span {
  background: var(--ela-color-muted);
}

.caseAssigneeCell {
  align-items: center;
  gap: var(--ela-space-2);
}

.caseAssigneeCell > span:last-child {
  min-width: 0;
  display: grid;
}

.caseAssigneeCell strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.caseOpenCell {
  align-items: center;
  gap: var(--ela-space-2);
  justify-content: flex-end;
}

.slaCountdown {
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  font-family: var(--ela-font-mono);
  width: fit-content;
  padding: 3px 7px;
  font-weight: 900;
}

.slaCountdown-green {
  background: color-mix(in srgb, var(--ela-color-state-success) 16%, var(--ela-color-bg));
  color: var(--ela-color-state-success);
}

.slaCountdown-amber {
  background: color-mix(in srgb, var(--ela-color-state-warning) 20%, var(--ela-color-bg));
  color: var(--ela-color-state-warning);
}

.slaCountdown-red, .slaCountdown-breached {
  background: color-mix(in srgb, var(--ela-color-danger) 16%, var(--ela-color-bg));
  color: var(--ela-color-state-error);
}

.slaCountdown-none {
  background: color-mix(in srgb, var(--ela-color-muted) 12%, var(--ela-color-bg));
  color: var(--ela-color-muted);
}

.escalateNowButton, .caseTakeoverSurface button {
  background: var(--ela-color-bg);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  cursor: pointer;
  min-height: 34px;
  padding: 0 var(--ela-space-3);
  border: 0;
  justify-content: center;
  align-items: center;
  width: fit-content;
  font-size: .76rem;
  font-weight: 900;
  display: inline-flex;
}

.escalateNowButton:disabled, .caseTakeoverSurface button:disabled {
  background: color-mix(in srgb, var(--ela-color-border) 50%, var(--ela-color-bg));
  color: var(--ela-color-muted);
  cursor: not-allowed;
}

.roundRobinCell {
  gap: var(--ela-space-2) !important;
}

.roundRobinTimeline {
  gap: var(--ela-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.roundRobinTimeline li {
  border-left: 3px solid var(--ela-color-border);
  padding-left: var(--ela-space-2);
  gap: 2px;
  display: grid;
}

.roundRobinTimeline .roundRobinCurrent {
  border-left-color: var(--ela-color-brand-accent);
}

.caseTakeoverSurface {
  background: color-mix(in srgb, var(--ela-color-bg) 68%, var(--ela-color-surface));
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  gap: var(--ela-space-1);
  padding: var(--ela-space-2);
  display: grid;
}

.caseRow mark {
  background: color-mix(in srgb, var(--ela-color-brand) 12%, var(--ela-color-bg));
  color: var(--ela-color-brand);
  text-transform: uppercase;
  border-radius: 999px;
  width: fit-content;
  padding: 3px 7px;
  font-size: .7rem;
  font-weight: 900;
}

.caseRow .duressMark {
  background: var(--ela-color-danger);
  color: #fff;
  align-items: center;
  gap: 5px;
  animation: 1.4s ease-in-out infinite duressPulse;
  display: inline-flex;
}

.caseRow .duressMark svg {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4px;
  width: 11px;
  height: 11px;
}

@keyframes duressPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ela-color-danger) 48%, transparent);
  }

  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--ela-color-danger) 0%, transparent);
  }
}

.roleRow {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  align-items: center;
  gap: var(--ela-space-3);
  line-height: var(--ela-font-body-line);
  padding: var(--ela-space-3);
  grid-template-columns: minmax(120px, .6fr) minmax(150px, .8fr) minmax(0, 1.5fr) minmax(180px, 1fr);
  display: grid;
}

.roleHeader {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
  background: none;
}

.queueHeader {
  align-items: end;
  gap: var(--ela-space-5);
  justify-content: space-between;
  display: flex;
}

.queueHeader p {
  color: var(--ela-color-brand-accent);
  font-size: var(--ela-font-caption-size);
  letter-spacing: 0;
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  margin: 0 0 var(--ela-space-2);
  text-transform: uppercase;
}

.queueHeader h1 {
  font-size: var(--ela-font-display-md-size);
  letter-spacing: 0;
  line-height: var(--ela-font-display-md-line);
  margin: 0;
}

.queueMetrics {
  gap: var(--ela-space-3);
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  min-width: 420px;
  margin: 0;
  display: grid;
}

.queueMetrics div, .queuePanel, .reviewCard {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
}

.queueMetrics div {
  padding: var(--ela-space-4);
}

.queueMetrics dt {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  line-height: var(--ela-font-caption-line);
}

.queueMetrics dd {
  font-size: var(--ela-font-heading-size);
  font-weight: 700;
  line-height: var(--ela-font-heading-line);
  margin: var(--ela-space-1) 0 0;
}

.queuePanel {
  gap: var(--ela-space-4);
  padding: var(--ela-space-5);
  display: grid;
}

.queueToolbar {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.queueToolbar strong {
  font-size: var(--ela-font-heading-size);
  line-height: var(--ela-font-heading-line);
}

.queueToolbar span, .slaPill {
  border: 1px solid var(--ela-color-border);
  color: var(--ela-color-brand-accent-fg);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  padding: var(--ela-space-1) var(--ela-space-3);
  border-radius: 999px;
}

.reviewList {
  gap: var(--ela-space-4);
  display: grid;
}

.reviewCard {
  gap: var(--ela-space-4);
  padding: var(--ela-space-4);
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  display: grid;
}

.reviewTitleRow, .reviewMeta, .decisionActions {
  align-items: center;
  gap: var(--ela-space-3);
  display: flex;
}

.reviewTitleRow {
  justify-content: space-between;
}

.reviewCard h2 {
  font-size: var(--ela-font-heading-size);
  letter-spacing: 0;
  line-height: var(--ela-font-heading-line);
  margin: 0;
}

.reviewMeta {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  line-height: var(--ela-font-caption-line);
  margin-top: var(--ela-space-2);
  flex-wrap: wrap;
}

.reviewMain p {
  color: var(--ela-color-fg);
  font-size: var(--ela-font-body-size);
  line-height: var(--ela-font-body-line);
  margin: var(--ela-space-4) 0 0;
  max-width: 640px;
}

.reviewClaimBar {
  align-items: center;
  gap: var(--ela-space-3);
  margin-top: var(--ela-space-4);
  justify-content: space-between;
  display: flex;
}

.reviewClaimBar span {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
}

.reviewClaimBar button {
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  min-height: 38px;
  padding: 0 var(--ela-space-3);
}

.claimBadge {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  align-items: center;
  gap: var(--ela-space-2);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  max-width: 100%;
  padding: var(--ela-space-1) var(--ela-space-2);
  border-radius: 999px;
  width: fit-content;
  display: inline-flex;
}

.claimBadge[data-claim-state="own"] {
  border-color: color-mix(in srgb, var(--ela-color-state-success-fg) 42%, var(--ela-color-border));
  color: var(--ela-color-state-success-fg);
}

.claimBadge[data-claim-state="locked"] {
  border-color: color-mix(in srgb, var(--ela-color-danger) 36%, var(--ela-color-border));
  color: var(--ela-color-danger);
}

.lockIcon {
  border: 2px solid;
  border-radius: 2px;
  width: 12px;
  height: 10px;
  display: inline-block;
  position: relative;
}

.lockIcon:before {
  content: "";
  border: 2px solid;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  width: 6px;
  height: 8px;
  position: absolute;
  top: -9px;
  left: 1px;
}

.claimAuditTrail {
  align-items: start;
  gap: var(--ela-space-2);
  display: grid;
}

.claimAuditTrail > span:last-child {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  line-height: var(--ela-font-caption-line);
}

.claimDecisionSurface {
  align-content: start;
  gap: var(--ela-space-3);
  display: grid;
}

.claimLockedView {
  border: 1px dashed var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  padding: var(--ela-space-4);
}

.claimPrimaryButton, .claimQueueButton {
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  min-height: 40px;
  padding: 0 var(--ela-space-3);
  font-weight: 800;
}

.claimTransition {
  transition: background-color .18s, border-color .18s, box-shadow .18s, opacity .18s, transform .18s;
}

.claimTransition.isTransitioning {
  opacity: .72;
  transform: translateY(-1px);
}

.decisionForm {
  gap: var(--ela-space-3);
  display: grid;
}

.decisionForm label {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  gap: var(--ela-space-2);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  display: grid;
}

.decisionForm select, .decisionForm input, .decisionForm textarea {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  line-height: var(--ela-font-body-line);
  padding: var(--ela-space-3);
  width: 100%;
}

.verificationDecisionForm {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kycDocumentDecisionForm {
  align-content: start;
}

:is(.verificationDecisionForm label:has(textarea), .verificationDecisionForm button) {
  grid-column: 1 / -1;
}

.decisionForm textarea {
  resize: vertical;
  min-height: 92px;
}

.decisionActions {
  justify-content: end;
}

.decisionActions button {
  border-radius: var(--ela-radius-sm);
  cursor: pointer;
  min-height: 44px;
  padding: 0 var(--ela-space-4);
  border: 0;
  font-weight: 700;
}

.resubmitButton {
  background: color-mix(in srgb, var(--ela-color-state-warning-fg) 18%, var(--ela-color-surface));
  color: var(--ela-color-state-warning-fg);
}

.kycExceptionConsole {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  gap: var(--ela-space-4);
  padding: var(--ela-space-5);
  display: grid;
}

.kycExceptionConsole .queueToolbar p {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  line-height: var(--ela-font-caption-line);
  margin: var(--ela-space-1) 0 0;
}

.kycReviewWorkbench {
  gap: var(--ela-space-4);
  grid-template-columns: minmax(220px, .8fr) minmax(360px, 1.45fr) minmax(260px, .95fr);
  min-height: 620px;
  display: grid;
}

.kycExceptionQueuePane, .kycDocumentViewerPane, .kycDecisionPlaceholderPane {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  gap: var(--ela-space-4);
  min-width: 0;
  padding: var(--ela-space-4);
  grid-template-rows: auto auto 1fr;
  display: grid;
}

.kycDocumentViewerPane {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.kycPaneHeader, .kycDocumentFrameHeader {
  align-items: center;
  gap: var(--ela-space-3);
  justify-content: space-between;
  display: flex;
}

.kycPaneHeader span, .kycDocumentFrameHeader span {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  letter-spacing: .08em;
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
}

.kycPaneHeader strong, .kycDocumentFrameHeader strong {
  font-size: var(--ela-font-caption-size);
  line-height: var(--ela-font-caption-line);
}

.kycExceptionQueueList {
  gap: var(--ela-space-3);
  max-height: 528px;
  padding-right: var(--ela-space-1);
  display: grid;
  overflow: auto;
}

.kycExceptionQueueItem {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  gap: var(--ela-space-2);
  padding: var(--ela-space-3);
  text-align: left;
  display: grid;
}

.kycExceptionQueueItem[data-claim-state="locked"] {
  background: color-mix(in srgb, var(--ela-color-danger) 5%, var(--ela-color-surface));
}

.kycExceptionQueueSelect {
  color: inherit;
  cursor: pointer;
  gap: var(--ela-space-2);
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  display: grid;
}

.kycExceptionQueueSelect[aria-pressed="true"] {
  border-color: var(--ela-color-brand-accent-fg);
  box-shadow: inset 0 0 0 1px var(--ela-color-brand-accent-fg);
}

.kycExceptionQueueSelect span:first-child {
  color: var(--ela-color-brand-accent-fg);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
}

.kycExceptionQueueSelect strong {
  font-size: var(--ela-font-body-size);
  line-height: var(--ela-font-body-line);
}

.kycExceptionQueueSelect small {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  line-height: var(--ela-font-caption-line);
}

.kycReasonChips {
  gap: var(--ela-space-2);
  flex-wrap: wrap;
  display: flex;
}

.kycReasonChips span {
  border: 1px solid var(--ela-color-border);
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  padding: var(--ela-space-1) var(--ela-space-2);
  border-radius: 999px;
}

.kycViewerToolbar {
  align-items: center;
  gap: var(--ela-space-2);
  flex-wrap: wrap;
  display: flex;
}

.kycViewerToolbar button, .kycViewerToolbar label {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  font-size: var(--ela-font-caption-size);
  align-items: center;
  gap: var(--ela-space-2);
  min-height: 36px;
  padding: 0 var(--ela-space-3);
  font-weight: 700;
  display: inline-flex;
}

.kycViewerToolbar span {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  text-align: center;
  min-width: 88px;
}

.kycDocumentStage {
  gap: var(--ela-space-3);
  grid-template-columns: 1fr;
  min-height: 0;
  display: grid;
}

.kycDocumentStage.compare {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kycDocumentFrameShell {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  gap: var(--ela-space-3);
  min-height: 0;
  padding: var(--ela-space-3);
  grid-template-rows: auto minmax(0, 1fr);
  display: grid;
  overflow: hidden;
}

.kycDocumentFrameViewport {
  background: linear-gradient(90deg, transparent 31px, var(--ela-color-border) 32px),
    linear-gradient(transparent 31px, var(--ela-color-border) 32px), var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  background-size: 32px 32px;
  justify-content: center;
  align-items: center;
  min-height: 420px;
  display: flex;
  overflow: hidden;
}

.kycDocumentViewerFrame {
  background: var(--ela-color-surface);
  border: 0;
  width: 78%;
  height: 84%;
  min-height: 320px;
  max-height: 520px;
}

.kycDocumentFrameFallback, .kycExceptionEmpty, .kycDecisionPlaceholder {
  border: 1px dashed var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-muted);
  gap: var(--ela-space-2);
  padding: var(--ela-space-4);
  display: grid;
}

.kycExceptionFacts {
  gap: var(--ela-space-3);
  margin: 0;
  display: grid;
}

.kycExceptionFacts div {
  border-bottom: 1px solid var(--ela-color-border);
  gap: var(--ela-space-1);
  padding-bottom: var(--ela-space-3);
  display: grid;
}

.kycExceptionFacts dt {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
}

.kycExceptionFacts dd {
  font-size: var(--ela-font-body-size);
  line-height: var(--ela-font-body-line);
  overflow-wrap: anywhere;
  margin: 0;
}

.kycDecisionPlaceholder button {
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  min-height: 44px;
}

.actionHidden {
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  padding: var(--ela-space-3);
  margin: 0;
}

.approveButton {
  background: var(--ela-color-brand-accent);
  color: var(--ela-color-fg);
}

.rejectButton {
  box-shadow: inset 0 0 0 1px var(--ela-color-border);
  color: var(--ela-color-fg);
  background: none;
}

.overridePanel {
  gap: var(--ela-space-4);
  display: grid;
}

.overrideGrid {
  gap: var(--ela-space-4);
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  display: grid;
}

.overrideForm, .confirmationPanel {
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  gap: var(--ela-space-3);
  padding: var(--ela-space-4);
  display: grid;
}

.overrideForm p, .confirmationPanel dt {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
  margin: 0;
}

.overrideForm strong, .confirmationPanel dd {
  color: var(--ela-color-fg);
  font-size: var(--ela-font-body-size);
  line-height: var(--ela-font-body-line);
  overflow-wrap: anywhere;
  margin: 0;
}

.overrideForm label, .confirmationPanel label {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  gap: var(--ela-space-2);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  display: grid;
}

.overrideForm select, .overrideForm textarea, .confirmationPanel input {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  line-height: var(--ela-font-body-line);
  padding: var(--ela-space-3);
  width: 100%;
}

.confirmationPanel {
  background: color-mix(in srgb, var(--ela-color-danger) 8%, var(--ela-color-surface));
}

.confirmationPanel p, .confirmationPanel h3 {
  margin: 0;
}

.confirmationPanel p {
  color: var(--ela-color-danger);
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
}

.confirmationPanel h3 {
  font-size: var(--ela-font-heading-size);
  line-height: var(--ela-font-heading-line);
}

.confirmationPanel dl {
  gap: var(--ela-space-3);
  margin: 0;
  display: grid;
}

.confirmationPanel dl div {
  gap: var(--ela-space-1);
  display: grid;
}

.confirmationPanel span {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
}

.blockedTransitionList {
  gap: var(--ela-space-2);
  display: grid;
}

.blockedTransitionButton {
  background: color-mix(in srgb, var(--ela-color-danger) 12%, var(--ela-color-bg));
  border: 1px dashed var(--ela-color-danger);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-danger);
  cursor: not-allowed;
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  padding: var(--ela-space-3);
  text-align: left;
}

.caseDetailPanel {
  gap: var(--ela-space-4);
  display: grid;
}

.caseDetailPanel > .sectionTitleRow > a {
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  padding: var(--ela-space-2) var(--ela-space-3);
  text-decoration: none;
}

.caseDetailHeader {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  gap: var(--ela-space-3);
  padding: var(--ela-space-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.duressDetailBanner {
  background: color-mix(in srgb, var(--ela-color-state-armed) 18%, var(--ela-color-surface));
  border: 1px solid var(--ela-color-state-armed);
  border-radius: var(--ela-radius-md);
  align-items: center;
  gap: var(--ela-space-2);
  padding: var(--ela-space-3) var(--ela-space-4);
  border-left-width: 6px;
  flex-wrap: wrap;
  justify-content: space-between;
  display: flex;
}

.duressDetailBanner strong {
  color: var(--ela-color-state-armed);
  font-size: var(--ela-font-heading-size);
  letter-spacing: 0;
  line-height: var(--ela-font-heading-line);
}

.duressDetailBanner span {
  overflow-wrap: anywhere;
  font-weight: 800;
}

.caseDetailHeader div, .caseDetailCardTitle {
  gap: var(--ela-space-1);
  display: grid;
}

.caseDetailHeader span, .caseDetailCardTitle p, .detailOverrideAction span, .detailRows span, .timelineList time, .mapMeta {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
}

.mapActionLink {
  color: var(--ela-color-brand);
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  text-decoration: none;
}

.mapActionLink:hover {
  color: var(--ela-color-brand-accent);
  text-decoration: underline;
}

.caseDetailHeader strong, .caseDetailCardTitle strong {
  line-height: var(--ela-font-body-line);
}

.caseDetailPatched {
  border-color: var(--ela-color-brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ela-color-brand-accent) 18%, transparent);
}

.caseDetailGrid, .detailOverrideGrid {
  gap: var(--ela-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.caseDetailCard, .detailOverrideAction, .detailRows article {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  gap: var(--ela-space-3);
  padding: var(--ela-space-4);
  display: grid;
}

.caseDetailCard details {
  gap: var(--ela-space-3);
  display: grid;
}

.caseDetailCard summary {
  cursor: pointer;
  font-weight: 800;
}

.timelineList {
  gap: var(--ela-space-3);
  padding-left: var(--ela-space-4);
  margin: 0;
  display: grid;
}

.timelineList li {
  padding-left: var(--ela-space-2);
}

.timelineList strong, .timelineList span {
  display: block;
}

.mapboxPanel {
  background: linear-gradient(135deg, #245b512e 25%, transparent 25%) 0 0 / 26px 26px,
    linear-gradient(45deg, #d2a6502e 25%, transparent 25%) 0 0 / 34px 34px,
    var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  min-height: 220px;
  position: relative;
  overflow: hidden;
}

.mapPoint {
  background: var(--ela-color-danger);
  border: 3px solid var(--ela-color-surface);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--ela-color-danger) 18%, transparent);
  border-radius: 999px;
  width: 18px;
  height: 18px;
  position: absolute;
  transform: translate(-50%, -50%);
}

.detailOverrideAction label {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  gap: var(--ela-space-2);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  display: grid;
}

.detailOverrideAction input, .detailOverrideAction select, .detailOverrideAction textarea {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  line-height: var(--ela-font-body-line);
  padding: var(--ela-space-3);
  width: 100%;
}

.detailOverrideAction .duressConfirmationField input {
  border-color: var(--ela-color-state-armed);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ela-color-state-armed) 12%, transparent);
}

.detailOverrideAction button {
  background: var(--ela-color-bg);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  cursor: pointer;
  border: 0;
  min-height: 42px;
  font-weight: 800;
}

.detailOverrideAction button:disabled {
  background: color-mix(in srgb, var(--ela-color-border) 50%, var(--ela-color-bg));
  color: var(--ela-color-muted);
  cursor: not-allowed;
}

.detailRows {
  gap: var(--ela-space-3);
  display: grid;
}

.detailRows article {
  border-radius: var(--ela-radius-sm);
}

.detailRows strong, .detailRows span {
  display: block;
}

.safeOutboxGrid {
  gap: var(--ela-space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.safeOutboxItem {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  gap: var(--ela-space-3);
  padding: var(--ela-space-4);
  display: grid;
}

.safeOutboxItem dl {
  gap: var(--ela-space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  display: grid;
}

.safeOutboxItem dl div {
  gap: var(--ela-space-1);
  display: grid;
}

.safeOutboxItem dt, .safeOutboxItem span, .safeOutboxSubject {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
}

.safeOutboxItem dd, .safeOutboxItem p {
  overflow-wrap: anywhere;
  margin: 0;
}

.safeOutboxSubject {
  color: var(--ela-color-brand-accent);
}

.trustedStatusShell {
  gap: var(--ela-space-5);
  max-width: 960px;
  min-height: 100vh;
  padding: var(--ela-space-6);
  margin: 0 auto;
  display: grid;
}

.trustedStatusHeader {
  align-items: end;
  gap: var(--ela-space-3);
  grid-template-columns: minmax(0, 1fr) auto;
  display: grid;
}

.trustedStatusHeader p {
  color: var(--ela-color-brand-accent);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
  grid-column: 1 / -1;
  margin: 0;
}

.trustedStatusHeader h1 {
  font-size: var(--ela-font-display-md-size);
  letter-spacing: 0;
  line-height: var(--ela-font-display-md-line);
  margin: 0;
}

.statusBadgeActive, .statusBadgeClosed {
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  padding: var(--ela-space-2) var(--ela-space-4);
  border-radius: 999px;
}

.statusBadgeActive {
  background: color-mix(in srgb, var(--ela-color-state-success) 16%, var(--ela-color-surface));
  color: var(--ela-color-state-success);
}

.statusBadgeClosed {
  background: var(--ela-color-bg);
  color: var(--ela-color-muted);
}

.trustedStatusGrid {
  gap: var(--ela-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.trustedStatusPanel, .trustedLocationPanel {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  gap: var(--ela-space-2);
  padding: var(--ela-space-5);
  display: grid;
}

.trustedStatusPanel span, .trustedLocationPanel span {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
}

.trustedStatusPanel strong, .trustedLocationPanel strong {
  font-size: var(--ela-font-heading-size);
  line-height: var(--ela-font-heading-line);
}

.trustedLocationPanel {
  gap: var(--ela-space-4);
}

.trustedLocationPanel p {
  color: var(--ela-color-muted);
  line-height: var(--ela-font-body-line);
  max-width: 680px;
  margin: 0;
}

.firmPortalShell {
  gap: var(--ela-space-5);
  max-width: 1120px;
  min-height: 100vh;
  padding: var(--ela-space-6);
  margin: 0 auto;
  display: grid;
}

.firmPortalHeader {
  align-items: end;
  gap: var(--ela-space-4);
  grid-template-columns: minmax(0, 1fr) minmax(260px, auto);
  display: grid;
}

.firmPortalHeader p, .firmErrorPanel p {
  color: var(--ela-color-brand-accent);
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  margin: 0 0 var(--ela-space-2);
  text-transform: uppercase;
}

.firmPortalHeader h1, .firmErrorPanel h1 {
  font-size: var(--ela-font-display-md-size);
  letter-spacing: 0;
  line-height: var(--ela-font-display-md-line);
  margin: 0;
}

.firmSessionPanel, .firmBriefPanel, .firmActionPanel, .firmErrorPanel {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
}

.firmSessionPanel {
  gap: var(--ela-space-1);
  padding: var(--ela-space-4);
  display: grid;
}

.firmSessionPanel span, .firmBriefTitle span, .firmActionPanel span, .firmPdfPreview span, .firmBriefFacts dt {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
}

.firmSessionPanel strong {
  font-size: var(--ela-font-body-size);
  line-height: var(--ela-font-body-line);
}

.firmPortalGrid {
  gap: var(--ela-space-4);
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  display: grid;
}

.firmBriefPanel, .firmActionPanel, .firmErrorPanel {
  gap: var(--ela-space-4);
  padding: var(--ela-space-5);
  display: grid;
}

.firmBriefTitle {
  align-items: start;
  gap: var(--ela-space-4);
  justify-content: space-between;
  display: flex;
}

.firmBriefTitle h2 {
  font-size: var(--ela-font-heading-size);
  line-height: var(--ela-font-heading-line);
  margin: var(--ela-space-1) 0 0;
}

.firmBriefTitle a {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  padding: var(--ela-space-2) var(--ela-space-3);
  text-decoration: none;
}

.firmBriefFacts {
  gap: var(--ela-space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  display: grid;
}

.firmBriefFacts div {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  padding: var(--ela-space-4);
}

.firmBriefFacts dd {
  font-weight: 800;
  line-height: var(--ela-font-body-line);
  margin: var(--ela-space-1) 0 0;
}

.firmPdfPreview {
  background: var(--ela-color-bg);
  border-left: 4px solid var(--ela-color-brand-accent);
  border-radius: var(--ela-radius-sm);
  gap: var(--ela-space-2);
  padding: var(--ela-space-4);
  display: grid;
}

.firmPdfPreview p, .firmActionStatus, .firmSloCopy, .firmErrorPanel span {
  line-height: var(--ela-font-body-line);
  margin: 0;
}

.firmPdfPreview small, .firmActionPanel small, .firmSloCopy {
  color: var(--ela-color-muted);
  line-height: var(--ela-font-caption-line);
}

.firmActionPanel strong {
  font-size: var(--ela-font-heading-size);
  line-height: var(--ela-font-heading-line);
  margin-top: var(--ela-space-1);
  display: block;
}

.firmDecisionForm {
  gap: var(--ela-space-3);
  display: grid;
}

.firmDecisionForm label {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  gap: var(--ela-space-2);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  display: grid;
}

.firmDecisionForm select, .firmDecisionForm textarea {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  line-height: var(--ela-font-body-line);
  padding: var(--ela-space-3);
  width: 100%;
}

.firmDecisionForm textarea {
  resize: vertical;
  min-height: 112px;
}

.firmActionButtons {
  gap: var(--ela-space-2);
  display: grid;
}

.firmPostAcceptActions {
  border-top: 1px solid var(--ela-color-border);
  gap: var(--ela-space-2);
  margin-top: var(--ela-space-2);
  padding-top: var(--ela-space-3);
  display: grid;
}

.firmActionButtons button, .firmPostAcceptActions button {
  border-radius: var(--ela-radius-sm);
  cursor: pointer;
  min-height: 46px;
  padding: 0 var(--ela-space-4);
  border: 0;
  font-weight: 800;
}

.firmActionButtons button:disabled, .firmPostAcceptActions button:disabled {
  cursor: wait;
  opacity: .62;
}

.firmAcceptButton {
  background: var(--ela-color-brand-accent);
  color: var(--ela-color-bg);
}

.firmConfirmButton {
  background: color-mix(in srgb, var(--ela-color-state-success) 24%, var(--ela-color-bg));
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--ela-color-state-success) 45%, var(--ela-color-border));
  color: var(--ela-color-fg);
}

.firmDeclineButton, .firmInfoButton, .firmWithdrawButton {
  background: var(--ela-color-bg);
  box-shadow: inset 0 0 0 1px var(--ela-color-border);
  color: var(--ela-color-fg);
}

.firmActionStatus {
  background: color-mix(in srgb, var(--ela-color-state-success) 12%, var(--ela-color-surface));
  border: 1px solid color-mix(in srgb, var(--ela-color-state-success) 40%, var(--ela-color-border));
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  padding: var(--ela-space-3);
}

.firmActionError {
  background: color-mix(in srgb, var(--ela-color-state-danger) 10%, var(--ela-color-surface));
  border-color: color-mix(in srgb, var(--ela-color-state-danger) 40%, var(--ela-color-border));
}

.lawFirmDirectoryPanel, .consulateDirectoryPanel, .policeStationDirectoryPanel, .publicHolidayDirectoryPanel, .adminConfigPanel, .inboundSmsPanel, .runbookLibraryPanel {
  gap: var(--ela-space-4);
  display: grid;
}

.directoryCrudBar {
  gap: var(--ela-space-2);
  flex-wrap: wrap;
  display: flex;
}

.directoryCrudBar button, .directoryCrudBar span {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  min-height: 40px;
  padding: 0 var(--ela-space-3);
  font-weight: 800;
}

.directoryCrudBar button {
  cursor: pointer;
}

.directoryCrudBar span {
  align-items: center;
  display: inline-flex;
}

.directorySearchBar {
  gap: var(--ela-space-2);
  display: grid;
}

.directorySearchBar > span:first-child, .directoryFilterBar label > span, .directorySortGroup label > span {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 900;
  line-height: var(--ela-font-caption-line);
}

.directorySearchInput {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  align-items: center;
  gap: var(--ela-space-2);
  min-height: 44px;
  padding: 0 var(--ela-space-3);
  grid-template-columns: 20px minmax(0, 1fr);
  display: grid;
}

.directorySearchInput svg {
  color: var(--ela-color-muted);
  width: 18px;
  height: 18px;
}

.directorySearchInput input {
  color: var(--ela-color-fg);
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  min-width: 0;
}

.directoryFilterBar {
  align-items: end;
  gap: var(--ela-space-3);
  flex-wrap: wrap;
  justify-content: space-between;
  display: flex;
}

.directoryFilterGroup, .directorySortGroup {
  align-items: end;
  gap: var(--ela-space-2);
  flex-wrap: wrap;
  display: flex;
}

.directoryFilterBar label {
  gap: var(--ela-space-1);
  min-width: 180px;
  display: grid;
}

.directoryFilterBar select {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  font: inherit;
  min-height: 40px;
  padding: 0 var(--ela-space-3);
  font-weight: 800;
}

.directorySortToggle, .directoryPagination button {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  cursor: pointer;
  font: inherit;
  min-height: 40px;
  padding: 0 var(--ela-space-3);
  font-weight: 900;
}

.directorySortToggle:hover, .directoryPagination button:hover:not(:disabled) {
  background: var(--ela-color-surface);
  border-color: color-mix(in srgb, var(--ela-color-brand) 36%, var(--ela-color-border));
}

.directoryPagination {
  align-items: center;
  gap: var(--ela-space-3);
  flex-wrap: wrap;
  justify-content: space-between;
  display: flex;
}

.directoryPagination p, .directoryEmptyState {
  color: var(--ela-color-muted);
  margin: 0;
  font-weight: 800;
}

.directoryPagination div {
  gap: var(--ela-space-1);
  flex-wrap: wrap;
  display: flex;
}

.directoryPagination button[aria-current="page"] {
  background: var(--ela-color-brand);
  border-color: var(--ela-color-brand);
  color: var(--ela-color-brand-fg);
}

.directoryPagination button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.directoryEmptyState {
  background: var(--ela-color-surface);
  border: 1px dashed var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  padding: var(--ela-space-4);
  text-align: center;
}

.lawFirmGrid, .consulateGrid, .policeStationGrid, .publicHolidayGrid {
  gap: var(--ela-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.adminConfigGrid {
  gap: var(--ela-space-4);
  grid-template-columns: minmax(0, 1fr);
  display: grid;
}

.adminConfigTabs {
  border-bottom: 1px solid var(--ela-color-border);
  align-items: end;
  gap: var(--ela-space-3);
  display: flex;
  overflow-x: auto;
}

.adminConfigTabs button {
  color: var(--ela-color-muted);
  cursor: pointer;
  min-height: 44px;
  padding: 0 var(--ela-space-1) var(--ela-space-2);
  white-space: nowrap;
  background: none;
  border: 0;
  border-bottom: 3px solid #0000;
  font-weight: 900;
}

.adminConfigTabs button.active, .adminConfigTabs button[aria-selected="true"] {
  border-bottom-color: var(--ela-color-brand-accent);
  color: var(--ela-color-fg);
}

.adminConfigTabs button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ela-color-brand-accent) 22%, transparent);
  outline-offset: 2px;
}

.inboundSmsGrid {
  gap: var(--ela-space-4);
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  display: grid;
}

.inboundSmsForm, .smsDedupePanel {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  gap: var(--ela-space-3);
  padding: var(--ela-space-4);
  display: grid;
}

.inboundSmsForm {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inboundSmsForm label {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  gap: var(--ela-space-1);
  font-weight: 800;
  display: grid;
}

.inboundSmsForm input, .inboundSmsForm select, .inboundSmsForm textarea {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  font: inherit;
  min-height: 42px;
  padding: var(--ela-space-2);
}

.wideField, .inboundSmsActions, .inboundSmsForm .adminApiStatus {
  grid-column: 1 / -1;
}

.inboundSmsActions {
  gap: var(--ela-space-2);
  flex-wrap: wrap;
  display: flex;
}

.inboundSmsActions button {
  background: var(--ela-color-fg);
  border: 1px solid var(--ela-color-fg);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-surface);
  cursor: pointer;
  min-height: 40px;
  padding: 0 var(--ela-space-3);
  font-weight: 900;
}

.inboundSmsActions button:not(:first-child) {
  background: var(--ela-color-bg);
  color: var(--ela-color-fg);
}

.smsDedupePanel dl {
  gap: var(--ela-space-2);
  margin: 0;
  display: grid;
}

.smsDedupePanel dl div {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  gap: var(--ela-space-1);
  padding: var(--ela-space-2);
  display: grid;
}

.smsDedupePanel dt {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
}

.smsDedupePanel dd {
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 900;
}

.caseMergeRequiredBanner {
  background: color-mix(in srgb, var(--ela-color-state-armed) 12%, var(--ela-color-surface));
  border-left: 4px solid var(--ela-color-state-armed);
  border-radius: var(--ela-radius-sm);
  padding: var(--ela-space-3);
  font-weight: 900;
}

.runbookGrid {
  gap: var(--ela-space-4);
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  display: grid;
}

.runbookList {
  gap: var(--ela-space-2);
  display: grid;
}

.runbookList button {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  cursor: pointer;
  gap: var(--ela-space-1);
  padding: var(--ela-space-3);
  text-align: left;
  display: grid;
}

.runbookList button[aria-pressed="true"] {
  border-color: var(--ela-color-brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ela-color-brand-accent) 16%, transparent);
}

.runbookList span, .runbookList small, .runbookEditor p {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
}

.runbookEditor {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  gap: var(--ela-space-4);
  padding: var(--ela-space-4);
  display: grid;
}

.runbookEditor h3 {
  margin: 0;
}

.runbookSectionChecklist {
  gap: var(--ela-space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.runbookSectionChecklist label {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  align-items: center;
  gap: var(--ela-space-2);
  padding: var(--ela-space-2);
  flex-direction: row;
  display: flex;
}

.runbookActions {
  gap: var(--ela-space-2);
  flex-wrap: wrap;
  display: flex;
}

.runbookActions a, .runbookActions button {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  min-height: 40px;
  padding: 0 var(--ela-space-3);
  align-items: center;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
}

.lawFirmCard, .consulateCard, .policeStationCard, .publicHolidayCard, .configCard, .directoryReadinessPanel {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  gap: var(--ela-space-4);
  padding: var(--ela-space-4);
  display: grid;
}

.directoryReadinessPanel-red {
  border-color: color-mix(in srgb, var(--ela-color-state-danger) 42%, var(--ela-color-border));
}

.directoryReadinessBanner {
  background: color-mix(in srgb, var(--ela-color-state-danger) 10%, var(--ela-color-surface));
  border: 1px solid color-mix(in srgb, var(--ela-color-state-danger) 32%, var(--ela-color-border));
  border-radius: var(--ela-radius-sm);
  align-items: center;
  gap: var(--ela-space-4);
  padding: var(--ela-space-4);
  justify-content: space-between;
  display: flex;
}

.directoryReadinessBanner p, .directoryReadinessBanner h2, .directoryReadinessBanner span, .readinessIssue h3, .readinessIssue p, .emirateReadinessCard h3 {
  margin: 0;
}

.directoryReadinessBanner p {
  color: var(--ela-color-state-danger);
  font-size: var(--ela-font-caption-size);
  font-weight: 900;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
}

.directoryReadinessBanner span, .readinessMetric span, .readinessIssue p, .emirateReadinessCard dt {
  color: var(--ela-color-muted);
  line-height: var(--ela-font-caption-line);
}

.directoryReadinessBanner button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.readinessSummaryGrid, .emirateReadinessGrid {
  gap: var(--ela-space-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  display: grid;
}

.readinessMetric, .emirateReadinessCard {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  gap: var(--ela-space-2);
  padding: var(--ela-space-3);
  display: grid;
}

.readinessIssueList {
  gap: var(--ela-space-2);
  display: grid;
}

.readinessIssue {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  align-items: start;
  gap: var(--ela-space-3);
  padding: var(--ela-space-3);
  grid-template-columns: auto 1fr;
  display: grid;
}

.readinessIssue > span {
  border-radius: var(--ela-radius-sm);
  font-size: var(--ela-font-caption-size);
  font-weight: 900;
  line-height: var(--ela-font-caption-line);
  padding: var(--ela-space-1) var(--ela-space-2);
  text-transform: uppercase;
}

.readinessIssue-red > span, .thresholdStatus-red {
  background: color-mix(in srgb, var(--ela-color-state-danger) 14%, var(--ela-color-surface));
  color: var(--ela-color-state-danger);
}

.readinessIssue-yellow > span {
  background: color-mix(in srgb, var(--ela-color-state-warning) 18%, var(--ela-color-surface));
  color: var(--ela-color-state-warning-fg);
}

.emirateReadinessCard dl {
  gap: var(--ela-space-2);
  margin: 0;
  display: grid;
}

.emirateReadinessCard dl div {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.emirateReadinessCard dd {
  border-radius: var(--ela-radius-sm);
  padding: var(--ela-space-1) var(--ela-space-2);
  margin: 0;
  font-weight: 900;
}

.thresholdStatus-green {
  background: color-mix(in srgb, var(--ela-color-state-success) 16%, var(--ela-color-surface));
  color: var(--ela-color-state-success-fg);
}

.lawFirmHeader {
  align-items: start;
  gap: var(--ela-space-3);
  justify-content: space-between;
  display: flex;
}

.lawFirmHeader h3, .lawFirmHeader p, .directoryWarning {
  margin: 0;
}

.lawFirmHeader p, .lawFirmFacts dt, .firmHistory span {
  color: var(--ela-color-muted);
  line-height: var(--ela-font-caption-line);
}

.stalePill {
  border-radius: var(--ela-radius-sm);
  font-size: var(--ela-font-caption-size);
  font-weight: 900;
  line-height: var(--ela-font-caption-line);
  padding: var(--ela-space-1) var(--ela-space-2);
  white-space: nowrap;
}

.stalePill-fresh {
  background: color-mix(in srgb, var(--ela-color-state-success) 16%, var(--ela-color-surface));
  color: var(--ela-color-state-success-fg);
}

.stalePill-yellow {
  background: color-mix(in srgb, var(--ela-color-state-warning) 18%, var(--ela-color-surface));
  color: var(--ela-color-state-warning-fg);
}

.stalePill-red {
  background: color-mix(in srgb, var(--ela-color-state-danger) 14%, var(--ela-color-surface));
  color: var(--ela-color-state-danger);
}

.holidayStatusPill {
  border-radius: var(--ela-radius-sm);
  font-size: var(--ela-font-caption-size);
  font-weight: 900;
  line-height: var(--ela-font-caption-line);
  padding: var(--ela-space-1) var(--ela-space-2);
  white-space: nowrap;
}

.holidayStatusPill.isActive {
  background: color-mix(in srgb, var(--ela-color-state-success) 16%, var(--ela-color-surface));
  color: var(--ela-color-state-success-fg);
}

.holidayStatusPill.isInactive {
  background: var(--ela-color-bg);
  color: var(--ela-color-muted);
}

.configPermissionPill {
  background: color-mix(in srgb, var(--ela-color-brand-accent) 14%, var(--ela-color-surface));
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-brand-accent-fg);
  font-size: var(--ela-font-caption-size);
  font-weight: 900;
  line-height: var(--ela-font-caption-line);
  padding: var(--ela-space-1) var(--ela-space-2);
  white-space: nowrap;
}

.configMetaLine {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  margin: 0;
}

.configConflictBanner {
  background: color-mix(in srgb, var(--ela-color-state-warning) 16%, var(--ela-color-surface));
  border: 1px solid color-mix(in srgb, var(--ela-color-state-warning) 42%, var(--ela-color-border));
  border-left: 4px solid var(--ela-color-state-warning);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-state-warning-fg);
  font-weight: 900;
  line-height: var(--ela-font-body-line);
  padding: var(--ela-space-3);
}

.pricingMappingTable, .onCallRotation {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  display: grid;
  overflow: hidden;
}

.pricingMappingRow {
  gap: var(--ela-space-2);
  padding: var(--ela-space-3);
  grid-template-columns: 1.4fr 1fr .5fr .5fr;
  display: grid;
}

.pricingMappingRow + .pricingMappingRow, .onCallRotationRow + .onCallRotationRow {
  border-top: 1px solid var(--ela-color-border);
}

.pricingMappingHeader {
  background: var(--ela-color-surface);
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 900;
}

.onCallRotationRow {
  gap: var(--ela-space-2);
  padding: var(--ela-space-3);
  grid-template-columns: .8fr 1.3fr .8fr 1.1fr;
  display: grid;
}

.pricingMappingRow span, .onCallRotationRow span {
  color: var(--ela-color-muted);
  overflow-wrap: anywhere;
}

.sourceUrlLink {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-accent);
  overflow-wrap: anywhere;
  padding: var(--ela-space-3);
  font-weight: 800;
}

.lawFirmFacts {
  gap: var(--ela-space-2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  display: grid;
}

.lawFirmFacts div {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  padding: var(--ela-space-3);
}

.lawFirmFacts dt, .lawFirmFacts dd {
  margin: 0;
}

.lawFirmFacts dd {
  margin-top: var(--ela-space-1);
  font-weight: 900;
}

.reliabilityTrend {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  align-items: end;
  gap: var(--ela-space-2);
  min-height: 96px;
  padding: var(--ela-space-3);
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

.reliabilityTrend span {
  background: linear-gradient(180deg,
    var(--ela-color-brand-accent),
    var(--ela-color-state-success));
  border-radius: var(--ela-radius-sm) var(--ela-radius-sm) 0 0;
  min-height: 12px;
}

.businessHoursEditor {
  gap: var(--ela-space-3);
  display: grid;
}

.configEditFieldset {
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  gap: var(--ela-space-3);
  padding: var(--ela-space-3);
  margin: 0;
  display: grid;
}

.configEditFieldset legend {
  font-size: var(--ela-font-caption-size);
  padding: 0 var(--ela-space-1);
  font-weight: 900;
}

.csvImportPanel {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  gap: var(--ela-space-3);
  padding: var(--ela-space-4);
  grid-template-columns: minmax(220px, .4fr) minmax(0, 1fr);
  display: grid;
}

.businessHoursEditor label, .csvImportPanel label {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  gap: var(--ela-space-2);
  font-weight: 800;
  display: grid;
}

.businessHoursEditor input, .businessHoursEditor select, .businessHoursEditor textarea, .csvImportPanel input, .csvImportPanel textarea {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  padding: var(--ela-space-2);
}

.activeToggle {
  align-items: center;
  gap: var(--ela-space-2);
  display: flex;
}

.activeToggle input {
  width: auto;
}

.weeklyHoursGrid {
  gap: var(--ela-space-2);
  grid-template-columns: repeat(7, minmax(72px, 1fr));
  display: grid;
}

.weeklyHoursGrid fieldset {
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  gap: var(--ela-space-2);
  min-width: 0;
  padding: var(--ela-space-2);
  margin: 0;
  display: grid;
}

.weeklyHoursGrid legend {
  font-size: var(--ela-font-caption-size);
  font-weight: 900;
}

.weeklyHoursGrid label {
  align-items: center;
  gap: var(--ela-space-1);
  display: flex;
}

.firmHistory {
  gap: var(--ela-space-2);
  display: grid;
}

.firmHistory div {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  align-items: center;
  gap: var(--ela-space-2);
  padding: var(--ela-space-2);
  grid-template-columns: .7fr 1fr 1.3fr;
  display: grid;
}

.directoryWarning {
  background: color-mix(in srgb, var(--ela-color-state-warning) 12%, var(--ela-color-surface));
  border-left: 4px solid var(--ela-color-state-warning);
  border-radius: var(--ela-radius-sm);
  padding: var(--ela-space-3);
  font-weight: 800;
}

.dsarPanel {
  gap: var(--ela-space-4);
  display: grid;
}

.dsarQueue {
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  overflow: hidden;
}

.dsarRow {
  background: var(--ela-color-surface);
  border-top: 1px solid var(--ela-color-border);
  align-items: center;
  gap: var(--ela-space-3);
  padding: var(--ela-space-3);
  grid-template-columns: .7fr 1fr 1fr .8fr .7fr;
  display: grid;
}

.dsarHeader {
  background: var(--ela-color-brand);
  color: var(--ela-color-bg);
  font-size: var(--ela-font-caption-size);
  text-transform: uppercase;
  border-top: 0;
  font-weight: 900;
}

.dsarActionGrid {
  gap: var(--ela-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.dsarActionCard {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  gap: var(--ela-space-3);
  padding: var(--ela-space-4);
  display: grid;
}

.dsarActionCard h3, .dsarActionCard p {
  margin: 0;
}

.dsarActionCard dl {
  gap: var(--ela-space-2);
  margin: 0;
  display: grid;
}

.dsarActionCard div {
  justify-content: space-between;
  display: flex;
}

.dsarActionCard dt {
  color: var(--ela-color-muted-fg);
}

.dsarActionCard button {
  justify-self: start;
}

.dsarActionCard .actionBlocker {
  color: var(--ela-color-warning-fg);
  font-size: .82rem;
  font-weight: 700;
}

.consulateAuditPanel {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-md);
  box-shadow: var(--ela-shadow-lg);
  gap: var(--ela-space-5);
  padding: var(--ela-space-6);
  display: grid;
}

.auditToolbar {
  align-items: end;
  gap: var(--ela-space-3);
  flex-wrap: wrap;
  display: flex;
}

.auditToolbar label {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  gap: var(--ela-space-2);
  font-weight: 800;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
  min-width: 180px;
  display: grid;
}

.auditToolbar select {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-text);
  min-height: 40px;
  padding: 0 var(--ela-space-3);
  text-transform: none;
}

.auditToolbar .toggleFilter {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  min-width: auto;
  min-height: 40px;
  padding: 0 var(--ela-space-3);
  align-items: center;
  display: flex;
}

.auditToolbar button {
  background: var(--ela-color-brand-accent);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-bg);
  cursor: pointer;
  min-height: 40px;
  padding: 0 var(--ela-space-4);
  border: 0;
  font-weight: 800;
}

.auditToolbar button:disabled {
  background: var(--ela-color-bg);
  color: var(--ela-color-muted);
  cursor: not-allowed;
}

.auditSummary {
  gap: var(--ela-space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

.auditSummary div {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  gap: var(--ela-space-1);
  padding: var(--ela-space-3);
  display: grid;
}

.auditSummary span, .auditRow span, .auditRow mark {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
}

.auditSummary strong {
  color: var(--ela-color-fg);
  line-height: var(--ela-font-body-line);
}

.auditTable {
  gap: var(--ela-space-2);
  display: grid;
}

.auditRow {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-left: 5px solid var(--ela-color-brand);
  border-radius: var(--ela-radius-sm);
  align-items: stretch;
  gap: var(--ela-space-3);
  padding: var(--ela-space-3);
  grid-template-columns: minmax(135px, .75fr) minmax(180px, 1fr) minmax(160px, .8fr) minmax(150px, .75fr) minmax(260px, 1.4fr);
  display: grid;
}

.auditHeader {
  border-left-color: var(--ela-color-muted);
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 900;
  line-height: var(--ela-font-caption-line);
  text-transform: uppercase;
  background: #0f172a0d;
}

.auditRow > div {
  align-content: start;
  gap: var(--ela-space-1);
  min-width: 0;
  display: grid;
}

.auditRow strong, .auditRow pre {
  color: var(--ela-color-text);
  overflow-wrap: anywhere;
}

.auditRow mark {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: 999px;
  width: fit-content;
  padding: 3px 8px;
  display: inline-block;
}

.auditRow .clientShownMark {
  background: color-mix(in srgb, var(--ela-color-state-success) 14%, var(--ela-color-bg));
  border-color: var(--ela-color-state-success);
  color: var(--ela-color-state-success);
}

.auditRow pre {
  background: var(--ela-color-surface);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  font-family: SFMono-Regular, Consolas, Liberation Mono, monospace;
  font-size: var(--ela-font-caption-size);
  line-height: var(--ela-font-caption-line);
  min-width: 0;
  padding: var(--ela-space-3);
  white-space: pre-wrap;
  margin: 0;
  overflow: auto;
}

@media (max-width: 860px) {
  .adminPortalFrame {
    grid-template-columns: 1fr;
  }

  .adminSidebar {
    min-height: auto;
    position: static;
  }

  .adminShell, .shell {
    padding: var(--ela-space-4);
  }

  .adminHero, .adminGrid, .caseDetailGrid, .caseDetailHeader, .caseSummaryStrip, .liveCaseKpiStrip, .adminConfigGrid, .consulateGrid, .csvImportPanel, .detailOverrideGrid, .dispatchClockStrip, .dsarActionGrid, .dsarRow, .inboundSmsGrid, .inboundSmsForm, .kycDocumentStage.compare, .kycReviewWorkbench, .lawFirmGrid, .policeStationGrid, .publicHolidayGrid, .runtimeModeGrid, .runbookGrid, .safeOutboxGrid, .stakeholderLaneBoard, .overrideGrid, .queueHeader, .reviewCard {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .healthStrip, .auditRow, .auditSummary, .roleRow, .caseRow, .onCallRotationRow, .pricingMappingRow, .lawFirmFacts {
    grid-template-columns: 1fr;
  }

  .caseRow {
    align-items: stretch;
    gap: var(--ela-space-3);
  }

  .caseOpenCell {
    justify-content: flex-start;
  }

  .caseSelectButton {
    opacity: 1;
    transform: none;
  }

  .weeklyHoursGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .runbookSectionChecklist {
    grid-template-columns: 1fr;
  }

  .sectionTitleRow, .stakeholderLaneTitle {
    flex-direction: column;
    align-items: start;
  }

  .queueHeader {
    display: grid;
  }

  .queueMetrics {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .queueMetrics {
    grid-template-columns: 1fr;
  }

  .reviewTitleRow, .decisionActions, .reviewClaimBar {
    flex-direction: column;
    align-items: stretch;
  }

  .decisionActions button {
    width: 100%;
  }

  .trustedStatusShell {
    padding: var(--ela-space-4);
  }

  .trustedStatusHeader, .trustedStatusGrid, .firmPortalHeader, .firmPortalGrid, .firmBriefFacts {
    grid-template-columns: 1fr;
  }
}

.adminPortalFrame {
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
  display: grid;
  overflow: hidden;
}

.adminSidebarScrim {
  display: none;
}

.consoleSidebar {
  color: #f3e9dad1;
  z-index: 40;
  background: #5c1a1b;
  border-right: 1px solid #4a1415;
  flex-direction: column;
  align-self: stretch;
  min-height: 100vh;
  display: flex;
  position: relative;
}

.consoleBrand {
  border-bottom: 1px solid #ffffff14;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px;
  display: flex;
}

.consoleMark {
  color: #3f0f10;
  letter-spacing: -.04em;
  background: linear-gradient(150deg, #c8a55c, #a8843f);
  border-radius: 10px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  font-size: 17px;
  font-weight: 800;
  display: flex;
  box-shadow: inset 0 1px #fff6;
}

.consoleBrandText {
  flex-direction: column;
  display: flex;
}

.consoleBrandTitle {
  color: #fff;
  letter-spacing: -.02em;
  font-size: 15px;
  font-weight: 700;
  display: block;
}

.consoleBrandSub {
  color: #e6d4a8;
  letter-spacing: .02em;
  font-size: 11px;
  font-weight: 500;
}

.consoleClocks {
  background: #ffffff14;
  border-radius: 10px;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 14px 14px 4px;
  display: grid;
  overflow: hidden;
}

.consoleClock {
  background: #4a1415;
  padding: 9px 12px;
}

.consoleClockLabel {
  color: #e6d4a8;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
}

.consoleClockDot {
  background: #c8a55c;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.consoleClockTime {
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  font-size: 18px;
  font-weight: 700;
  display: block;
}

.consoleClockDate {
  color: #f3e9da99;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

.consoleCmdButton {
  color: #f3e9dab3;
  cursor: pointer;
  text-align: left;
  background: #ffffff12;
  border: 1px solid #ffffff17;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  width: calc(100% - 28px);
  margin: 12px 14px 8px;
  padding: 9px 12px;
  font-size: 13px;
  transition: background .16s, border-color .16s;
  display: flex;
}

.consoleCmdButton:hover {
  background: #ffffff1f;
  border-color: #ffffff2e;
}

.consoleCmdButton kbd {
  color: #e6d4a8;
  letter-spacing: .02em;
  background: #00000038;
  border: 1px solid #ffffff1a;
  border-radius: 5px;
  margin-left: auto;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
}

.consoleNav {
  flex: 1;
  padding: 8px 10px 16px;
  overflow-y: auto;
}

.consoleNavGroup {
  margin-top: 14px;
}

.consoleNavGroup:first-child {
  margin-top: 4px;
}

.consoleNavGroup h4 {
  color: #e6d4a8;
  letter-spacing: .1em;
  opacity: .7;
  text-transform: uppercase;
  padding: 6px 10px 4px;
  font-size: 10px;
  font-weight: 700;
}

.consoleNavItem {
  color: #f3e9dad1;
  text-align: left;
  border-radius: 8px;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background .16s, color .16s;
  display: flex;
  position: relative;
}

.consoleNavItem:hover {
  color: #fff;
  background: #ffffff14;
}

.consoleNavItem.active {
  color: #fff;
  background: #c8a55c29;
}

.consoleNavItem.active:before {
  content: "";
  background: #c8a55c;
  border-radius: 0 3px 3px 0;
  width: 3px;
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: -10px;
}

.consoleNavCount {
  color: #e6d4a8;
  font-variant-numeric: tabular-nums;
  background: #0003;
  border-radius: 20px;
  margin-left: auto;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
}

.consoleNavCount.alert {
  color: #fff;
  background: #a8302f;
}

.consoleUserFooter {
  background: #0000002e;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  margin: auto 14px 14px;
  padding: 10px 12px;
  display: flex;
}

.consoleUserAvatar {
  color: #3f0f10;
  background: linear-gradient(145deg, #e6d4a8, #c8a55c);
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
}

.consoleUserName {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.consoleUserRole {
  color: #e6d4a8;
  font-size: 10px;
}

.consoleUserStatus {
  background: #5ec07d;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin-left: auto;
  box-shadow: 0 0 0 3px #5ec07d38;
}

.consoleMain {
  background: #f5f1ea;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.consoleTopbar {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 20;
  background: #f5f1eadb;
  border-bottom: 1px solid #1b1b1e1a;
  flex: none;
  align-items: center;
  gap: 14px;
  height: 62px;
  padding: 0 26px;
  display: flex;
  position: sticky;
  top: 0;
}

.consoleHamburger {
  cursor: pointer;
  background: #fff;
  border: 1px solid #1b1b1e1a;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  display: none;
}

.consolePageTitle {
  letter-spacing: -.02em;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.consoleCrumb {
  color: #1b1b1e80;
  font-size: 12px;
  font-weight: 500;
}

.consoleTopbarSpacer {
  flex: 1;
}

.consoleLivePill {
  color: #5c1a1b;
  background: #fff;
  border: 1px solid #1b1b1e1a;
  border-radius: 20px;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.consoleLivePulse {
  background: #3c7a57;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: relative;
}

.consoleLivePulse:after {
  content: "";
  border: 1.5px solid #3c7a57;
  border-radius: 50%;
  animation: 1.8s ease-out infinite consolePing;
  position: absolute;
  inset: -4px;
}

@keyframes consolePing {
  0% {
    opacity: .9;
    transform: scale(.6);
  }

  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

.consoleIconBtn {
  color: #1b1b1e80;
  cursor: pointer;
  background: #fff;
  border: 1px solid #1b1b1e1a;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  transition: color .16s, border-color .16s;
  display: flex;
  position: relative;
}

.consoleIconBtn:hover {
  color: #5c1a1b;
  border-color: #5c1a1b;
}

.consoleBadge {
  color: #fff;
  background: #a8302f;
  border: 2px solid #f5f1ea;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  position: absolute;
  top: -4px;
  right: -4px;
}

.consoleContent {
  flex: 1;
  padding: 24px 26px 60px;
  overflow-y: auto;
}

.consoleOverlay {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 200;
  background: #1b1b1e52;
  justify-content: center;
  align-items: flex-start;
  padding-top: 13vh;
  display: flex;
  position: fixed;
  inset: 0;
}

.consolePalette {
  background: #fff;
  border: 1px solid #1b1b1e1a;
  border-radius: 14px;
  width: min(620px, 92vw);
  overflow: hidden;
  box-shadow: 0 24px 60px #22201d38;
}

.consolePaletteInput {
  border-bottom: 1px solid #1b1b1e1a;
  align-items: center;
  gap: 11px;
  padding: 16px 18px;
  display: flex;
}

.consolePaletteInput svg {
  color: #5c1a1b;
  flex: none;
}

.consolePaletteInput input {
  color: #1b1b1e;
  letter-spacing: -.01em;
  background: none;
  border: none;
  outline: none;
  flex: 1;
  font-size: 16px;
}

.consolePaletteInput input::placeholder {
  color: #b3aa99;
}

.consolePaletteInput kbd {
  color: #1b1b1e80;
  background: #1b1b1e0f;
  border: 1px solid #1b1b1e1a;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 600;
}

.consolePaletteList {
  max-height: 54vh;
  padding: 8px;
  overflow-y: auto;
}

.consolePaletteEmpty {
  color: #1b1b1e80;
  text-align: center;
  padding: 34px;
}

.consolePaletteItem {
  color: #1b1b1e;
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  border-radius: 9px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  transition: background .16s;
  display: flex;
}

.consolePaletteItem:hover, .consolePaletteItem.sel {
  background: #f5f1ea;
}

.consolePaletteItem.sel {
  box-shadow: inset 0 0 0 1.5px #e6d4a8;
}

.consolePaletteIcon {
  color: #5c1a1b;
  background: #5c1a1b14;
  border-radius: 7px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: flex;
}

.consolePaletteSub {
  color: #1b1b1e80;
  font-size: 11px;
  font-weight: 500;
}

.consolePaletteGroup {
  color: #1b1b1e80;
  background: #1b1b1e0f;
  border-radius: 5px;
  margin-left: auto;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
}

@media (max-width: 860px) {
  .adminPortalFrame {
    grid-template-columns: 1fr;
  }

  .consoleSidebar {
    width: 280px;
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 0 24px 60px #22201d38;
  }

  .adminPortalFrame.navOpen .consoleSidebar {
    transform: none;
  }

  .adminPortalFrame.navOpen .adminSidebarScrim {
    z-index: 39;
    background: #22201d73;
    display: block;
    position: fixed;
    inset: 0;
  }

  .consoleHamburger {
    display: flex;
  }

  .consoleContent {
    padding: 18px 16px 50px;
  }

  .consoleTopbar {
    padding: 0 16px;
  }
}

@media (max-width: 560px) {
  .consoleLivePill {
    display: none;
  }
}

.caseCardList {
  display: none;
}

.caseMobileCard, .caseMobileEmpty {
  background: var(--ela-color-bg);
  border: 1px solid var(--ela-color-border);
  border-radius: var(--ela-radius-sm);
  color: var(--ela-color-fg);
  gap: var(--ela-space-3);
  padding: var(--ela-space-3);
  text-align: left;
  width: 100%;
  display: grid;
}

.caseMobileCard {
  cursor: pointer;
}

.caseMobileCard:hover, .caseMobileCard:focus-visible, .caseMobileCard[aria-current="true"] {
  border-color: color-mix(in srgb, var(--ela-color-brand) 34%, var(--ela-color-border));
  outline: 3px solid #2f6fed33;
  box-shadow: 0 10px 24px #0f172a14;
}

.caseMobileCardDuress {
  background: color-mix(in srgb, var(--ela-color-danger) 10%, var(--ela-color-bg));
  border-color: #b91c1c8c;
  border-left: 5px solid var(--ela-color-danger);
}

.caseMobileCardTop, .caseMobileSubject, .caseMobileCardBottom {
  align-items: center;
  gap: var(--ela-space-2);
  min-width: 0;
  display: flex;
}

.caseMobileCardTop, .caseMobileCardBottom {
  justify-content: space-between;
}

.caseMobileCardTop > strong {
  font-family: var(--ela-font-mono);
  overflow-wrap: anywhere;
}

.caseMobileSubject > span:last-child {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.caseMobileSubject strong, .caseMobileEmpty strong {
  color: var(--ela-color-text);
  overflow-wrap: anywhere;
}

.caseMobileSubject small, .caseMobileEmpty span {
  color: var(--ela-color-muted);
  font-size: var(--ela-font-caption-size);
  font-weight: 700;
  line-height: var(--ela-font-caption-line);
  overflow-wrap: anywhere;
}

.caseMobileCard .duressMark {
  background: var(--ela-color-danger);
  color: #fff;
  text-transform: uppercase;
  border-radius: 999px;
  align-items: center;
  width: fit-content;
  padding: 3px 7px;
  font-size: .7rem;
  font-weight: 900;
  animation: 1.4s ease-in-out infinite duressPulse;
  display: inline-flex;
}

.toastViewport {
  z-index: 300;
  flex-direction: column;
  gap: 10px;
  display: flex;
  position: fixed;
  bottom: 24px;
  right: 24px;
}

.toastItem {
  background: var(--ela-color-fg, #22201d);
  color: #fff;
  border-radius: 11px;
  align-items: center;
  gap: 11px;
  min-width: 260px;
  max-width: 360px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  animation: .3s cubic-bezier(.4, 0, .2, 1) toast-in;
  display: flex;
  box-shadow: 0 24px 60px #22201d38;
}

.toastIcon {
  border-radius: 7px;
  flex-shrink: 0;
  place-items: center;
  width: 24px;
  height: 24px;
  display: grid;
}

.toastIconOk {
  background: var(--ela-color-state-success, #3c7a57);
}

.toastIconWarn {
  background: var(--ela-color-state-warning, #b5791b);
}

.toastIconInfo {
  background: #ffffff24;
}

.toastTitle {
  font-weight: 600;
}

.toastMessage {
  opacity: .8;
  font-size: 12px;
  font-weight: 400;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 860px) {
  .adminPortalFrame.adminPortalFrame {
    grid-template-columns: 1fr;
    overflow-x: hidden;
  }

  .adminPortalFrame .adminSidebar {
    z-index: 40;
    width: 280px;
    max-width: min(82vw, 280px);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-102%);
    box-shadow: 0 24px 80px #1b1b1e52;
  }

  .adminPortalFrame .adminSidebar.isOpen {
    transform: translateX(0);
  }

  .adminPortalFrame .adminSidebarScrim {
    z-index: 35;
    background: #1b1b1e6b;
    border: 0;
    display: block;
    position: fixed;
    inset: 0;
  }

  .adminPortalFrame .adminHamburger {
    display: grid;
  }

  .adminPortalFrame .adminTopbar {
    padding-inline: 14px;
  }

  .adminShell, .shell, .consoleContent, .liveCasesPanel, .consulateAuditPanel, .rolePortalPanel, .runtimeModePanel, .authPanel, .sessionPanel, .roleMatrix, .healthStrip {
    padding: var(--ela-space-4);
  }

  .liveCaseKpiStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .caseTable {
    display: none;
  }

  .caseCardList {
    gap: var(--ela-space-3);
    display: grid;
  }
}

@media (max-width: 640px) {
  .adminShell, .shell, .consoleContent {
    padding: var(--ela-space-3);
  }

  .liveCasesPanel, .consulateAuditPanel, .rolePortalPanel, .runtimeModePanel, .authPanel, .sessionPanel, .roleMatrix, .healthStrip, .inboundSmsForm, .smsDedupePanel, .runbookEditor, .lawFirmCard, .consulateCard, .policeStationCard, .publicHolidayCard, .configCard, .directoryReadinessPanel, .csvImportPanel {
    border-radius: var(--ela-radius-sm);
    padding: var(--ela-space-3);
  }

  .caseToolbar, .auditToolbar {
    align-items: stretch;
    display: grid;
  }

  .caseToolbar label, .auditToolbar label, .businessHoursEditor label, .csvImportPanel label, .inboundSmsForm label {
    width: 100%;
    min-width: 0;
  }

  .caseToolbar select, .auditToolbar select, .businessHoursEditor input, .businessHoursEditor select, .businessHoursEditor textarea, .csvImportPanel input, .csvImportPanel textarea, .inboundSmsForm input, .inboundSmsForm select, .inboundSmsForm textarea, .commandPaletteDialog input {
    width: 100%;
  }

  .inboundSmsActions, .runbookActions, .confirmDialogActions {
    flex-direction: column;
    align-items: stretch;
  }

  .inboundSmsActions button, .runbookActions a, .runbookActions button, .confirmDialogActions button {
    justify-content: center;
    width: 100%;
  }

  .toastViewport {
    align-items: center;
    bottom: 16px;
    left: 12px;
    right: 12px;
  }

  .toastItem {
    width: min(100%, 420px);
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .adminPortalFrame .adminTopbar {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    height: auto;
    min-height: 62px;
    padding-block: 10px;
  }

  .adminPortalFrame .adminBreadcrumb {
    flex: 0 0 100%;
    order: 10;
  }

  .adminPortalFrame .adminBreadcrumb h1 {
    font-size: 16px;
  }

  .adminPortalFrame .adminIconButton, .adminPortalFrame .adminHamburger {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .liveCaseKpiStrip, .dispatchClockStrip, .caseSummaryStrip, .weeklyHoursGrid {
    grid-template-columns: 1fr;
  }

  .caseMobileCardTop, .caseMobileCardBottom, .directoryReadinessBanner, .lawFirmHeader, .workflowNavHeader {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 400px) {
  .adminPortalFrame .adminLivePill, .adminPortalFrame .adminIconButton:last-of-type {
    display: none;
  }
}

/*# sourceMappingURL=apps_admin_app_styles_0_qo57s.css.map*/