/* Modern staff dashboard presentation layer.
   This file deliberately changes presentation only: workflow IDs, visibility,
   role permissions and event handlers remain owned by the existing portal. */

:root {
  --admin-teal: #087f84;
  --admin-teal-deep: #063f43;
  --admin-teal-soft: rgba(8, 127, 132, .12);
  --admin-gold-soft: rgba(184, 160, 106, .14);
  --admin-panel-shadow: 0 18px 52px rgba(24, 42, 40, .09);
  --admin-card-shadow: 0 8px 26px rgba(24, 42, 40, .065);
  --admin-radius-xl: 24px;
  --admin-radius-lg: 18px;
  --admin-radius-md: 13px;
}

html[data-theme="light"] {
  --admin-canvas: #f3f5f2;
  --admin-panel: rgba(255, 255, 255, .86);
  --admin-panel-solid: #fff;
  --admin-panel-muted: #f7f8f5;
  --admin-line: rgba(22, 72, 70, .12);
  --admin-text: #18302f;
  --admin-subtle: #657371;
}

html[data-theme="dark"] {
  --admin-canvas: #121715;
  --admin-panel: rgba(33, 35, 32, .9);
  --admin-panel-solid: #211f1c;
  --admin-panel-muted: #292824;
  --admin-line: rgba(206, 225, 216, .12);
  --admin-text: #f7f3eb;
  --admin-subtle: #aaa69d;
  --admin-panel-shadow: 0 20px 58px rgba(0, 0, 0, .24);
  --admin-card-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}

/* Global staff navigation */
.nav {
  min-height: 68px;
  height: 68px;
  padding: 0 clamp(16px, 2.3vw, 34px);
  gap: clamp(14px, 2vw, 30px);
  border-bottom: 1px solid var(--admin-line);
  background: color-mix(in srgb, var(--surface2) 88%, transparent);
  box-shadow: 0 8px 30px rgba(18, 46, 44, .055);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .1em;
}

.nav-brand::before {
  content: "V";
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, #0b8f94, #075b60);
  color: #fff;
  box-shadow: 0 8px 20px rgba(8, 127, 132, .22);
  font: 600 15px/1 var(--fb);
  letter-spacing: 0;
}

.nav-tabs {
  min-width: 0;
  flex: 1 1 auto;
}

.admin-workspace-nav { gap: 3px; }

.nav-tab,
.nav-workspace-menu > summary {
  min-height: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border-bottom: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .035em;
  text-transform: none;
}

.nav-tab:hover,
.nav-tab.active,
.nav-workspace-menu[open] > summary,
.nav-workspace-menu:has(.nav-tab.active) > summary {
  background: var(--admin-teal-soft);
  color: color-mix(in srgb, var(--admin-teal) 82%, var(--ivory));
}

.nav-tab.active { box-shadow: inset 0 0 0 1px rgba(8, 127, 132, .18); }
.nav-workspace-menu { height: 38px; }
.nav-workspace-panel {
  top: calc(100% + 9px);
  min-width: 230px;
  padding: 8px;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface2) 96%, transparent);
  box-shadow: 0 24px 64px rgba(17, 42, 40, .2);
  backdrop-filter: blur(20px);
}
.nav-workspace-panel .nav-tab { min-height: 40px; border-radius: 9px; }
.nav-actions { flex: 0 0 auto; gap: 7px; }
.nav-signout {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface2) 78%, transparent);
  font-size: 9px;
  letter-spacing: .025em;
  text-transform: none;
}
.nav-signout:hover { border-color: rgba(8, 127, 132, .38); background: var(--admin-teal-soft); color: var(--admin-teal); }
.nav-pill { padding: 5px 9px; border-radius: 999px; }
.theme-switch { min-height: 34px; border-color: var(--admin-line); border-radius: 10px; }
.theme-option { border-radius: 7px; text-transform: none; }
.theme-option.active { background: var(--admin-teal-deep); color: #fff; }
.global-activity-status { padding: 0 5px; }

.app { min-height: calc(100vh - 68px); }

/* Admin workspace shell */
#screen-admin.active {
  position: relative;
  height: calc(100vh - 68px);
  min-height: 660px;
  gap: 18px;
  padding: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 3%, rgba(93, 208, 198, .13), transparent 24%),
    radial-gradient(circle at 78% 0%, rgba(201, 178, 233, .13), transparent 25%),
    linear-gradient(145deg, color-mix(in srgb, var(--admin-canvas) 94%, #dff5f0), var(--admin-canvas) 52%, color-mix(in srgb, var(--admin-canvas) 95%, #f6ead1));
}

#screen-admin .sb {
  width: 238px;
  height: 100%;
  padding: 16px 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--admin-radius-xl);
  background:
    radial-gradient(circle at 18% 4%, rgba(69, 191, 181, .18), transparent 30%),
    linear-gradient(165deg, #0b4547, #082f32 62%, #08282b);
  box-shadow: 0 24px 64px rgba(8, 48, 49, .22);
  color: #fff;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}

#screen-admin .sb::before {
  content: "Client operations";
  display: block;
  margin: 1px 8px 13px;
  padding: 0 5px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .55);
  font: 600 8px/1 var(--fm);
  letter-spacing: .14em;
  text-transform: uppercase;
}

#screen-admin .sb-section { padding: 0 0 7px; }
#screen-admin .sb-item {
  min-height: 42px;
  margin: 3px 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 11px;
  color: rgba(255, 255, 255, .7);
  font-size: 11.5px;
}
#screen-admin .sb-item:hover { background: rgba(255, 255, 255, .075); color: #fff; }
#screen-admin .sb-item.active {
  border: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  color: #fff;
}
#screen-admin .sb-dot { width: 7px; height: 7px; background: #73d5cc; box-shadow: 0 0 0 4px rgba(115,213,204,.11); }
#screen-admin .sb-ct { color: rgba(255, 255, 255, .48); }
#screen-admin .sb-label { color: rgba(255, 255, 255, .42); }
#screen-admin .market-section {
  margin: 8px 0;
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
}
#screen-admin .market-section .sb-label { color: rgba(255,255,255,.54); }

#screen-admin .main {
  min-width: 0;
  height: 100%;
  padding: 4px 8px 64px 2px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--admin-teal) 34%, transparent) transparent;
}

#screen-admin .main > div { max-width: 1580px; margin-inline: auto; }

#screen-admin .overview-heading {
  position: relative;
  min-height: 106px;
  align-items: center;
  margin-bottom: 14px;
  padding: 20px 24px;
  overflow: hidden;
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-lg);
  background:
    linear-gradient(120deg, rgba(8, 127, 132, .11), transparent 42%),
    linear-gradient(300deg, rgba(184, 160, 106, .11), transparent 36%),
    var(--admin-panel);
  box-shadow: var(--admin-card-shadow);
  backdrop-filter: blur(14px);
}

#screen-admin .overview-heading::after {
  content: "";
  position: absolute;
  right: -44px;
  top: -72px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(8, 127, 132, .15);
  border-radius: 50%;
  box-shadow: 0 0 0 26px rgba(8, 127, 132, .035), 0 0 0 54px rgba(184, 160, 106, .025);
  pointer-events: none;
}

#screen-admin .pt {
  color: var(--admin-text);
  font: 600 clamp(27px, 2.8vw, 39px)/1.05 var(--fb);
  letter-spacing: -.035em;
}
#screen-admin .ps { max-width: 760px; margin-top: 7px; color: var(--admin-subtle); font-size: 10px; letter-spacing: .02em; }
#screen-admin .overview-heading-meta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(8, 127, 132, .18);
  border-radius: 999px;
  background: color-mix(in srgb, var(--admin-panel-solid) 76%, transparent);
  color: var(--admin-teal);
}
#screen-admin .overview-heading-meta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #36a878; box-shadow: 0 0 0 4px rgba(54,168,120,.12); }

#screen-admin .client-workspace-toolbar {
  position: sticky;
  top: 0;
  z-index: 24;
  min-height: 58px;
  margin-bottom: 14px;
  padding: 8px 10px;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--admin-panel-solid) 88%, transparent);
  box-shadow: 0 10px 28px rgba(21, 53, 50, .075);
  backdrop-filter: blur(18px) saturate(135%);
}
#screen-admin .client-workspace-tabs { border: 0; border-radius: 12px; background: var(--admin-panel-muted); }
#screen-admin .client-workspace-tabs button { min-height: 38px; border-radius: 9px; text-transform: none; letter-spacing: .025em; }
#screen-admin .client-workspace-tabs button.active { background: var(--admin-teal-deep); color: #fff; box-shadow: 0 7px 16px rgba(6,63,67,.17); }
#screen-admin .client-workspace-guidance { color: var(--admin-subtle); }

/* Role command home */
#screen-admin .role-command-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 14px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid rgba(8, 127, 132, .14);
  border-radius: var(--admin-radius-xl);
  background:
    radial-gradient(circle at 9% 6%, rgba(255,255,255,.78), transparent 25%),
    radial-gradient(circle at 88% 12%, rgba(166, 208, 246, .28), transparent 34%),
    radial-gradient(circle at 72% 92%, rgba(206, 173, 232, .22), transparent 31%),
    linear-gradient(130deg, color-mix(in srgb, var(--admin-panel-solid) 91%, #bdeee5), color-mix(in srgb, var(--admin-panel-solid) 88%, #f1d9e7) 54%, color-mix(in srgb, var(--admin-panel-solid) 88%, #dce9ff));
  box-shadow: var(--admin-panel-shadow);
}
html[data-theme="dark"] #screen-admin .role-command-home {
  background:
    radial-gradient(circle at 10% 3%, rgba(38, 163, 157, .2), transparent 30%),
    radial-gradient(circle at 88% 13%, rgba(87, 120, 174, .17), transparent 36%),
    linear-gradient(135deg, #172a29, #252225 58%, #1d2730);
}
#screen-admin .role-command-home::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -70px -150px auto;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(255,255,255,.07), 0 0 0 88px rgba(255,255,255,.035);
  pointer-events: none;
}
#screen-admin .role-command-head { grid-template-columns: minmax(0, 1.55fr) minmax(230px, .45fr); gap: 22px; }
#screen-admin .role-command-head > div:first-child > span { color: var(--admin-teal); font-size: 9px; }
#screen-admin .role-command-head h1 {
  margin: 8px 0 10px;
  color: var(--admin-text);
  font: 600 clamp(32px, 3.5vw, 52px)/.98 var(--fb);
  letter-spacing: -.045em;
}
#screen-admin .role-command-head p { color: var(--admin-subtle); font-size: 12px; }
#screen-admin .role-command-identity {
  padding: 16px;
  border-color: rgba(255,255,255,.4);
  border-radius: 15px;
  background: color-mix(in srgb, var(--admin-panel-solid) 64%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
  backdrop-filter: blur(12px);
}
#screen-admin .role-command-identity strong { color: var(--admin-text); font-size: 12px; }
#screen-admin .role-command-identity span { color: var(--admin-subtle); }
#screen-admin .role-command-identity em { color: var(--admin-teal); }
#screen-admin .role-command-lanes { grid-template-columns: repeat(5, minmax(135px, 1fr)); gap: 10px; margin-top: 24px; }
#screen-admin .role-command-lane {
  min-height: 118px;
  padding: 15px;
  border: 1px solid rgba(24, 76, 73, .1);
  border-top: 0;
  border-radius: 15px;
  background: color-mix(in srgb, var(--admin-panel-solid) 82%, transparent);
  box-shadow: 0 8px 22px rgba(24, 60, 56, .055), inset 0 1px 0 rgba(255,255,255,.54);
  backdrop-filter: blur(12px);
}
#screen-admin .role-command-lane::before { content: ""; grid-column: 1 / -1; width: 30px; height: 4px; margin-bottom: 5px; border-radius: 99px; background: var(--muted); }
#screen-admin .role-command-lane.contract::before { background: #0aa0a6; }
#screen-admin .role-command-lane.attention::before { background: #c65c4c; }
#screen-admin .role-command-lane.due::before { background: #c39a48; }
#screen-admin .role-command-lane.waiting::before { background: #4b93bb; }
#screen-admin .role-command-lane.complete::before { background: #45a176; }
#screen-admin .role-command-lane:hover,
#screen-admin .role-command-lane:focus-visible { transform: translateY(-3px); border-color: rgba(8, 127, 132, .24); box-shadow: 0 14px 30px rgba(24,60,56,.1); }
#screen-admin .role-command-lane > span { color: var(--admin-subtle); font-size: 8px; }
#screen-admin .role-command-lane > strong { color: var(--admin-text); font: 600 30px/1 var(--fb); }
#screen-admin .role-command-lane.contract > strong { color: var(--admin-teal); }
#screen-admin .role-command-lane > em { color: var(--admin-subtle); }
#screen-admin .role-command-footer { margin-top: 19px; padding-top: 17px; border-color: rgba(24,76,73,.11); }
#screen-admin .role-command-shortcuts > span { color: var(--admin-subtle); }
#screen-admin .role-command-shortcuts button {
  min-height: 36px;
  padding: 7px 11px;
  border-color: rgba(24,76,73,.13);
  background: color-mix(in srgb, var(--admin-panel-solid) 64%, transparent);
  color: var(--admin-text);
}
#screen-admin .role-command-shortcuts button:hover { border-color: rgba(8,127,132,.32); color: var(--admin-teal); background: var(--admin-panel-solid); }

/* Shared modern panels, metrics and queues */
#screen-admin .command-centre,
#screen-admin .command-secondary-workspace,
#screen-admin .client-directory-shell,
#screen-admin .bd-desk-shell {
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-lg);
  background: var(--admin-panel);
  box-shadow: var(--admin-card-shadow);
  backdrop-filter: blur(12px);
}
#screen-admin .command-centre { margin-bottom: 16px; }
#screen-admin .command-head,
#screen-admin .command-worklist-head,
#screen-admin .client-directory-head { padding: 18px 20px; border-color: var(--admin-line); }
#screen-admin .command-title,
#screen-admin .command-subtitle,
#screen-admin .client-directory-head h2 { color: var(--admin-text); font: 600 21px/1.15 var(--fb); letter-spacing: -.025em; }
#screen-admin .command-note,
#screen-admin .command-stamp,
#screen-admin .client-directory-head p { color: var(--admin-subtle); }

#screen-admin .command-metrics,
#screen-admin .command-insights,
#screen-admin .stat-row,
#screen-admin .ops-strip,
#screen-admin .bd-signal-rail {
  gap: 10px;
  padding: 12px;
  border: 0;
  background: transparent;
}
#screen-admin .command-metrics { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
#screen-admin .stat-row { margin-bottom: 16px; }
#screen-admin .sc,
#screen-admin .ops-card,
#screen-admin .command-metric,
#screen-admin .command-insight,
#screen-admin .bd-signal-card {
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-md);
  background: var(--admin-panel-solid);
  box-shadow: 0 6px 20px rgba(24, 60, 56, .045);
}
#screen-admin .sc { padding: 16px 18px; }
#screen-admin .sv,
#screen-admin .command-metric-value { color: var(--admin-text); font: 600 29px/1 var(--fb); letter-spacing: -.03em; }
#screen-admin .sl,
#screen-admin .ss,
#screen-admin .command-metric-label,
#screen-admin .command-metric-note { color: var(--admin-subtle); }
#screen-admin .command-metric-action { border: 1px solid var(--admin-line); }
#screen-admin .command-metric-action.teal {
  border-color: rgba(8,127,132,.26);
  background: linear-gradient(145deg, rgba(8,127,132,.15), rgba(8,127,132,.045)), var(--admin-panel-solid);
  box-shadow: 0 8px 22px rgba(8,127,132,.08);
}
#screen-admin .command-metric-action.teal .command-metric-value { color: var(--admin-teal); }

#screen-admin .attention-hero {
  gap: 12px;
  margin-bottom: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#screen-admin .attention-hero-main,
#screen-admin .attention-hero-side {
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-lg);
  background: var(--admin-panel);
  box-shadow: var(--admin-card-shadow);
}
#screen-admin .attention-hero-main { border-left-width: 5px; padding: 22px 24px; }
#screen-admin .attention-client { color: var(--admin-text); font: 600 27px/1.08 var(--fb); letter-spacing: -.03em; }
#screen-admin .attention-need { color: var(--admin-text); }
#screen-admin .attention-detail,
#screen-admin .attention-context span { color: var(--admin-subtle); }
#screen-admin .attention-kpis { gap: 8px; }
#screen-admin .attention-kpi {
  min-height: 78px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: var(--admin-panel-solid);
}
#screen-admin .attention-kpi:hover,
#screen-admin .attention-kpi.active { border-color: rgba(8,127,132,.3); background: var(--admin-teal-soft); }
#screen-admin .attention-kpi strong { color: var(--admin-teal); font: 600 23px/1 var(--fb); }

#screen-admin .attention-filter-bar { gap: 6px; }
#screen-admin .attention-filter {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  background: var(--admin-panel-muted);
}
#screen-admin .attention-filter.active { border-color: rgba(8,127,132,.28); background: var(--admin-teal-soft); color: var(--admin-teal); }

#screen-admin .command-worklist { padding: 0 12px 12px; background: transparent; }
#screen-admin .command-action {
  margin-top: 8px;
  padding: 15px 16px;
  border: 1px solid var(--admin-line);
  border-left-width: 4px;
  border-radius: 13px;
  background-color: var(--admin-panel-solid);
  box-shadow: 0 5px 18px rgba(24,60,56,.04);
}
#screen-admin .command-action:last-child { border-bottom: 1px solid var(--admin-line); }
#screen-admin .command-client,
#screen-admin .command-issue { color: var(--admin-text); }
#screen-admin .command-meta,
#screen-admin .command-detail,
#screen-admin .command-owner-line { color: var(--admin-subtle); }
#screen-admin .command-actions .bt.primary,
#screen-admin .btn-g,
#screen-admin .bt.primary {
  border-color: var(--admin-teal-deep);
  border-radius: 10px;
  background: var(--admin-teal-deep);
  color: #fff;
  box-shadow: 0 7px 16px rgba(6,63,67,.14);
}
#screen-admin .command-actions .bt,
#screen-admin .btn-o,
#screen-admin .bt { border-radius: 9px; }

#screen-admin .command-secondary-workspace { overflow: hidden; }
#screen-admin .command-secondary-workspace > summary { min-height: 60px; padding: 13px 18px; color: var(--admin-text); }
#screen-admin .dashboard-saved-views select,
#screen-admin .dashboard-saved-views input,
#screen-admin select,
#screen-admin input,
#screen-admin textarea { border-color: var(--admin-line); border-radius: 10px; background-color: var(--admin-panel-solid); }

/* Preserve dense operational comparison on large screens. */
@media (min-width: 1281px) {
  #screen-admin .command-action { grid-template-columns: minmax(190px, .85fr) minmax(280px, 1.45fr) minmax(180px, auto); }
}

@media (max-width: 1380px) {
  .nav { padding-inline: 16px; gap: 12px; }
  .nav-tab, .nav-workspace-menu > summary { padding-inline: 8px; }
  .hdr-info { display: none; }
  #screen-admin .role-command-lanes { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
}

@media (max-width: 1120px) {
  .nav-brand { font-size: 0; gap: 0; }
  .nav-brand::before { font-size: 15px; }
  .nav-actions { gap: 5px; }
  #screen-admin.active { gap: 12px; padding: 12px; }
  #screen-admin .sb { width: 205px; }
  #screen-admin .role-command-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #screen-admin .role-command-footer { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .nav { min-height: 60px; height: 60px; }
  .app { min-height: calc(100vh - 60px); }
  #screen-admin.active {
    height: auto;
    min-height: calc(100vh - 60px);
    padding: 10px;
    overflow: visible;
  }
  #screen-admin .sb {
    width: 100%;
    height: auto;
    min-height: 58px;
    padding: 7px;
    border-radius: 16px;
    flex-wrap: nowrap;
  }
  #screen-admin .sb::before { display: none; }
  #screen-admin .sb-section { padding: 0; flex-wrap: nowrap; }
  #screen-admin #market-sidebar { display: flex; flex-wrap: nowrap; }
  #screen-admin .market-section { flex: 0 0 auto; margin: 0 3px; }
  #screen-admin .sb-item { min-height: 42px; margin: 0 2px; white-space: nowrap; }
  #screen-admin .main { height: auto; padding: 0 0 50px; overflow: visible; }
  #screen-admin .client-workspace-toolbar { top: 4px; }
  #screen-admin .overview-heading { min-height: 0; padding: 18px; }
  #screen-admin .overview-heading::after { opacity: .55; }
  #screen-admin .role-command-home { padding: 22px 18px; }
  #screen-admin .role-command-head { grid-template-columns: 1fr; }
  #screen-admin .role-command-identity { max-width: 440px; }
  #screen-admin .command-action { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .nav { padding-inline: 10px; }
  .nav-brand { display: none; }
  .nav-actions .global-activity-status { display: none; }
  #screen-admin.active { padding: 7px; }
  #screen-admin .overview-heading { align-items: flex-start; }
  #screen-admin .overview-heading-meta { margin-top: 8px; }
  #screen-admin .client-workspace-toolbar { align-items: stretch; flex-wrap: wrap; border-radius: 14px; }
  #screen-admin .client-workspace-guidance { flex: 1 0 100%; padding: 3px 4px; text-align: left; }
  #screen-admin .role-command-head h1 { font-size: 31px; }
  #screen-admin .role-command-lanes,
  #screen-admin .stat-row,
  #screen-admin .attention-kpis { grid-template-columns: 1fr; }
  #screen-admin .role-command-lane { min-height: 94px; }
  #screen-admin .command-head { flex-direction: column; }
  #screen-admin .attention-filter-bar { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-admin .role-command-lane,
  #screen-admin .command-metric-action { transition: none; }
}

/* Phase two: action-first information architecture. */
.dashboard-three-zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: 16px;
  align-items: start;
}

.dashboard-primary-column { min-width: 0; }

.dashboard-context-rail {
  position: sticky;
  top: 72px;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.dashboard-context-card,
.dashboard-context-rail .today-appointment-briefing {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius-lg);
  background: var(--admin-panel);
  box-shadow: var(--admin-card-shadow);
  backdrop-filter: blur(14px);
}

.dashboard-context-kicker {
  color: var(--admin-teal);
  font: 600 8px/1.2 var(--fm);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.dashboard-context-card h2 {
  margin: 6px 0 15px;
  color: var(--admin-text);
  font: 600 19px/1.14 var(--fb);
  letter-spacing: -.025em;
}

.dashboard-workspace-guide ol { display: grid; gap: 2px; list-style: none; }
.dashboard-workspace-guide li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--admin-line);
}
.dashboard-workspace-guide li > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: var(--admin-teal-soft);
  color: var(--admin-teal);
  font: 600 8px/1 var(--fm);
}
.dashboard-workspace-guide strong,
.dashboard-workspace-guide em { display: block; }
.dashboard-workspace-guide strong { color: var(--admin-text); font-size: 10.5px; line-height: 1.35; }
.dashboard-workspace-guide em { margin-top: 3px; color: var(--admin-subtle); font-size: 9px; font-style: normal; line-height: 1.4; }

#screen-admin .dashboard-portfolio-context .stat-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
}
#screen-admin .dashboard-portfolio-context .sc { min-height: 98px; padding: 13px; }
#screen-admin .dashboard-portfolio-context .sv { margin-top: 8px; font-size: 25px; }
#screen-admin .dashboard-portfolio-context .ss { line-height: 1.3; }

.dashboard-context-rail .today-appointment-head { display: grid; gap: 12px; }
.dashboard-context-rail .today-appointment-head > div:last-child { justify-content: flex-start; }
.dashboard-context-rail .today-appointment-head strong { color: var(--admin-text); font: 600 18px/1.15 var(--fb); }
.dashboard-context-rail .today-appointment-cards { grid-template-columns: 1fr; max-height: 520px; overflow: auto; }
.dashboard-context-rail .today-appointment-cards article { background: var(--admin-panel-solid); }

/* Compact the status header so real work remains above the fold. */
#screen-admin .dashboard-primary-column .role-command-home { padding: 20px 22px; border-radius: var(--admin-radius-lg); }
#screen-admin .dashboard-primary-column .role-command-head { grid-template-columns: minmax(0, 1fr) minmax(190px, .36fr); gap: 16px; }
#screen-admin .dashboard-primary-column .role-command-head h1 { margin: 5px 0 7px; font-size: clamp(27px, 2.6vw, 38px); }
#screen-admin .dashboard-primary-column .role-command-head p { max-width: 700px; font-size: 10.5px; }
#screen-admin .dashboard-primary-column .role-command-identity { padding: 12px 13px; }
#screen-admin .dashboard-primary-column .role-command-lanes { gap: 8px; margin-top: 16px; }
#screen-admin .dashboard-primary-column .role-command-lane { min-height: 88px; padding: 11px 12px; }
#screen-admin .dashboard-primary-column .role-command-lane::before { height: 3px; margin-bottom: 2px; }
#screen-admin .dashboard-primary-column .role-command-lane > strong { font-size: 25px; }
#screen-admin .dashboard-primary-column .role-command-footer { margin-top: 13px; padding-top: 12px; }

/* The central queue owns the strongest visual weight. */
#screen-admin .dashboard-primary-column > .command-centre {
  border-color: rgba(8, 127, 132, .18);
  box-shadow: 0 20px 54px rgba(24, 60, 56, .095);
}
#screen-admin .dashboard-primary-column > .command-centre > .command-head {
  background: linear-gradient(110deg, rgba(8,127,132,.075), transparent 48%);
}
#screen-admin .dashboard-primary-column .command-worklist { padding-top: 4px; }

@media (max-width: 1320px) {
  .dashboard-three-zone { grid-template-columns: minmax(0, 1fr) 300px; }
  #screen-admin .dashboard-primary-column .role-command-lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1120px) {
  .dashboard-three-zone { grid-template-columns: 1fr; }
  .dashboard-context-rail {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-context-rail .today-appointment-briefing { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .dashboard-context-rail { grid-template-columns: 1fr; }
  .dashboard-context-rail .today-appointment-briefing { grid-column: auto; }
  #screen-admin .dashboard-primary-column .role-command-head { grid-template-columns: 1fr; }
  #screen-admin .dashboard-primary-column .role-command-lanes { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  #screen-admin .dashboard-primary-column .role-command-lanes { grid-template-columns: 1fr; }
  #screen-admin .dashboard-portfolio-context .stat-row { grid-template-columns: 1fr; }
}