@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:FILL@0..1&display=swap");

/*
  Watershed design tokens — v3 "Clearwater".
  Shallow clear water over pale stone. The brand is the cyan circle mark, so
  the interface borrows its geometry: one waterline under the header with a
  cyan swell beneath the active tab, drop-shaped count chips, pool washes for
  selection. #01bcda is rationed to marks, the active swell, and the primary
  action; interactive TEXT routes through deepwater so it always passes AA.
  Surfaces are flat — white on mist — with hairline rules, no resting shadows.
*/

:root {
  /* current (accent) family */
  --current: #01bcda;
  --current-bright: #02a9c4;
  --current-deep: #00708a;
  --current-deeper: #00576b;
  --current-ink: #0e2b32;
  --current-wash: #e0f6fa;
  --current-wash-strong: rgba(1, 188, 218, 0.2);
  --current-border: rgba(1, 188, 218, 0.45);

  /* neutrals — clear water over pale stone */
  --bg: #e8eef1;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-soft: #e4ecef;
  --well: #dfe8ec;
  --ink: #13333c;
  --ink-secondary: #3f5d66;
  --muted: #4f6a73;
  --faint: #78929a;
  color-scheme: light;
  --line: rgba(19, 51, 60, 0.14);
  --line-soft: rgba(19, 51, 60, 0.09);
  --line-strong: rgba(19, 51, 60, 0.24);

  /* stamps — ink date blocks and dark fills (formerly chrome) */
  --chrome: #13333c;
  --chrome-raised: #1d4450;
  --chrome-text: #f2f7f8;
  --chrome-muted: #9db6bc;
  --chrome-line: rgba(255, 255, 255, 0.14);

  /* actions — one cyan pill per view, ink lettering */
  --primary: var(--current);
  --primary-dark: var(--current-bright);
  --primary-ink: var(--current-ink);
  --accent: var(--current-deep);
  --calendar-blue: var(--current-deep);

  /* semantic — reed, sand, clay */
  --danger: #b4493e;
  --danger-strong: #a93d32;
  --danger-soft: #f9e9e7;
  --warning: #91660b;
  --warning-strong: #a97f23;
  --warning-soft: #f9f0da;
  --success: #1d7a5c;
  --success-strong: #178463;
  --success-soft: #e1f3ec;

  /* controls — inputs are inset, slightly darker */
  --control-bg: #e8eef1;
  --control-border: rgba(19, 51, 60, 0.16);
  --focus-ring: rgba(1, 188, 218, 0.55);

  /* depth — flat surfaces; shadows belong to overlays only */
  --shadow: none;
  --shadow-raised: 0 8px 24px rgba(19, 51, 60, 0.12);

  /* kanban */
  --kanban-panel: transparent;
  --kanban-column-pending: #dfe8ec;
  --kanban-column-progress: #dfe8ec;
  --kanban-column-completed: #dfe8ec;
  --kanban-card-bg: #ffffff;
  --kanban-card-border: rgba(19, 51, 60, 0.1);

  /* shape + misc */
  --scrollbar-thumb: rgba(92, 116, 124, 0.32);
  --scrollbar-overlap: 0.7rem;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --body-background: #e8eef1;
  --z-layer: 1;
  --z-sticky: 10;
  --z-topbar: 12;
  --z-popover: 30;
  --z-toast: 40;
  --z-modal: 50;
  --z-drag-preview: 60;
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
}

[data-theme="dark"] {
  /* current family — lifted one step for dark visibility */
  --current: #25cbe6;
  --current-bright: #4fd6ec;
  --current-deep: #67d9ec;
  --current-deeper: #8fe3f1;
  --current-ink: #06262e;
  --current-wash: rgba(1, 188, 218, 0.14);
  --current-wash-strong: rgba(37, 203, 230, 0.24);
  --current-border: rgba(37, 203, 230, 0.45);

  /* neutrals — night water, blue-slate */
  --bg: #0c1518;
  --surface: #121e23;
  --surface-strong: #182830;
  --surface-soft: #16242b;
  --well: #16242b;
  color-scheme: dark;
  --ink: #eaf4f6;
  --ink-secondary: #bdd2d8;
  --muted: #8fa9b1;
  --faint: #627d86;
  --line: rgba(151, 206, 217, 0.14);
  --line-soft: rgba(151, 206, 217, 0.08);
  --line-strong: rgba(151, 206, 217, 0.28);

  /* stamps */
  --chrome: #182830;
  --chrome-raised: #21363f;
  --chrome-text: #eaf4f6;
  --chrome-muted: #8fa9b1;
  --chrome-line: rgba(255, 255, 255, 0.12);

  /* actions — the brand cyan stays exact on fills */
  --primary: #01bcda;
  --primary-dark: #2fd0ea;
  --primary-ink: #0e2b32;
  --accent: var(--current-deep);
  --calendar-blue: var(--current-deep);

  /* semantic — desaturated for dark */
  --danger: #e9867c;
  --danger-strong: #db6f63;
  --danger-soft: rgba(233, 134, 124, 0.17);
  --warning: #e0b25b;
  --warning-strong: #d2a248;
  --warning-soft: rgba(224, 178, 91, 0.13);
  --success: #4bc79c;
  --success-strong: #3bb88c;
  --success-soft: rgba(75, 199, 156, 0.13);

  /* controls */
  --control-bg: #0a1114;
  --control-border: rgba(151, 206, 217, 0.22);
  --focus-ring: rgba(37, 203, 230, 0.55);

  /* depth */
  --shadow: none;
  --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* kanban */
  --kanban-panel: transparent;
  --kanban-column-pending: #0e181c;
  --kanban-column-progress: #0e181c;
  --kanban-column-completed: #0e181c;
  --kanban-card-bg: #182830;
  --kanban-card-border: rgba(151, 206, 217, 0.12);

  --scrollbar-thumb: rgba(151, 206, 217, 0.25);
  --body-background: #0c1518;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}

html.app-document {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  width: 100vw;
  color: var(--ink);
  background: var(--body-background);
  min-height: 100dvh;
  overflow-x: clip;
}

body.app-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100dvh;
  overflow: hidden;
}

html::-webkit-scrollbar {
  width: var(--scrollbar-overlap);
  height: var(--scrollbar-overlap);
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  border: 0.18rem solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

body.is-card-dragging,
body.is-card-dragging * {
  user-select: none;
}

a {
  color: inherit;
  text-decoration: none;
}

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

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

button,
.ghost-button {
  border: none;
  border-radius: 999px;
  padding: 0.58rem 1.1rem;
  cursor: pointer;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 0.89rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

button:focus-visible,
.ghost-button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

[data-theme="dark"] button:not(.ghost-button):not(.danger-button):not(.deny-button):not(.tab-button):not(.seg-tab):not(.venue-card):not(.calendar-day):not(.theme-toggle):not(.user-pill):not(.budget-status-button) {
  color: var(--primary-ink);
}

[data-theme="dark"] .approval-actions .approve-button {
  color: var(--primary-ink);
}

.danger-button {
  background: var(--danger);
  color: #fff;
}

[data-theme="dark"] .danger-button {
  color: var(--primary-ink);
}

.danger-button:hover {
  background: var(--danger);
  filter: brightness(0.92);
}

button:hover,
.ghost-button:hover {
  background: var(--primary-dark);
}

button:active:not(:disabled),
.ghost-button:active {
  transform: translateY(1px) scale(0.98);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.button-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
}

.button-with-icon .material-symbols-outlined {
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.ghost-button {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--control-border);
}

.ghost-button:hover {
  background: var(--surface-soft);
  border-color: var(--line-strong);
  color: var(--ink);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--surface-strong);
  color: var(--ink);
  border: 1px solid var(--line);
}

.notification-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.notification-button span {
  display: inline-grid;
  place-items: center;
  min-width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.info-button {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--ink);
  font-weight: 700;
}

.info-button:hover {
  background: var(--surface-soft);
  color: var(--primary);
}

.theme-toggle:hover {
  background: var(--surface-soft);
}

.material-symbols-outlined {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.theme-toggle__icon {
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: "Material Symbols Rounded";
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted);
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.theme-toggle__icon::before {
  content: "dark_mode";
}

[data-theme="dark"] .theme-toggle__icon {
  border: none;
  background: transparent;
  color: var(--muted);
}

[data-theme="dark"] .theme-toggle__icon::before {
  content: "light_mode";
}

.theme-toggle:hover .theme-toggle__icon {
  color: var(--ink);
}

.theme-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.theme-menu-button .theme-toggle__icon {
  flex: 0 0 auto;
  color: currentColor;
}

.login-shell {
  display: grid;
  place-items: center;
  padding: 2rem;
}

.login-theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: var(--z-sticky);
}

.login-card,
.card {
  background: var(--surface);
  border: none;
  box-shadow: none;
  border-radius: var(--radius);
}

.login-card {
  width: min(880px, 100%);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.75rem;
  padding: 2.75rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}

.brand-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.brand-logo {
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-logo {
  width: 240px;
  max-width: 42vw;
}

[data-theme="dark"] .brand-logo {
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: #ffffff;
}

.brand-copy {
  max-width: 34rem;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 700;
}

.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 1.1rem;
  height: 3px;
  border-radius: 2px;
  background: var(--current);
}

.muted {
  color: var(--muted);
}

.error-banner {
  border-radius: var(--radius-sm);
  border: 1px solid var(--danger);
  padding: 0.85rem 1rem;
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 500;
}

.login-form,
.task-form {
  display: grid;
  gap: 1rem;
}

label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

input,
textarea,
select {
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  padding: 0.62rem 0.72rem;
  background: var(--control-bg);
  color: var(--ink);
  font-size: 0.9rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--current);
  box-shadow: 0 0 0 3px var(--current-wash-strong);
}

input::placeholder,
textarea::placeholder {
  color: var(--faint);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  min-height: 76px;
  padding: 0 max(1.5rem, calc((100vw - 1320px) / 2));
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
  min-width: 0;
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: 30px;
  height: 30px;
}

.brand-logo-chip {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 184px;
  height: 68px;
  padding: 0.32rem 0.62rem;
  border: 1px solid rgba(19, 51, 60, 0.12);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(19, 51, 60, 0.08);
}

.brand-lockup {
  display: block;
  width: 154px;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.brand-name {
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
}

.brand-sub {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
}

.topbar .theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
}

.topbar .theme-toggle:hover {
  background: var(--surface-soft);
}


.topbar .user-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 38px;
  padding: 0.3rem 0.75rem 0.3rem 0.3rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.topbar .user-pill:hover {
  background: var(--surface-soft);
  border-color: transparent;
}

.topbar .user-pill strong {
  font-size: 0.9rem;
  font-weight: 600;
}

.release-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
  row-gap: 0.32rem;
  width: min(1320px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 0.5rem 0 0.78rem;
  color: var(--faint);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.release-footer__copyright,
.release-footer__version,
.release-footer__license {
  white-space: nowrap;
}

.release-footer__copyright {
  justify-self: end;
}

.release-footer__meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.48rem;
  min-width: 0;
}

.release-footer__license {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  min-width: 0;
  color: var(--muted);
  text-align: center;
}

.release-footer__license strong {
  color: var(--ink);
  font-weight: 800;
}

.release-footer__license span {
  color: var(--faint);
}

.release-footer__codename {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.18rem 0.48rem;
  border: 1px solid var(--current-border);
  border-radius: 999px;
  background: var(--current-wash);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .release-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .release-footer__copyright {
    justify-self: center;
  }

  .release-footer__meta,
  .release-footer__license {
    justify-content: center;
  }

  .release-footer__license {
    flex-wrap: wrap;
    white-space: normal;
  }
}

.user-avatar {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--chrome);
  color: var(--chrome-text);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.app-shell .topbar {
  position: relative;
  top: auto;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.logo-box {
  display: grid;
  place-items: center;
  width: 148px;
  height: 48px;
  padding: 0.24rem 0.42rem;
  border: none;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
  flex: 0 0 auto;
}

.logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateY(-7px);
}

.topbar h1,
.section-heading h3,
.login-card h1,
.card h4,
.kanban-column-head h4 {
  margin: 0;
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: 1.45rem;
  line-height: 1;
}

.topbar-brand-title {
  color: var(--chrome-text);
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-left: auto;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.user-pill {
  display: inline-grid;
  gap: 0.05rem;
  min-height: 42px;
  align-content: center;
  padding: 0.48rem 0.85rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: none;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
}

.user-pill:hover {
  background: var(--surface-soft);
  border-color: var(--line-strong);
}

.user-pill strong {
  font-size: 0.86rem;
  line-height: 1.05;
}

.user-pill span {
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.05;
  text-transform: capitalize;
}

[data-theme="dark"] .user-pill {
  color: var(--ink);
}

[data-theme="dark"] .user-pill span {
  color: var(--muted);
}

.dashboard-grid {
  width: min(1400px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 1.15rem 0 1.5rem;
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.app-shell .dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "panel";
  --shell-pad: max(1.5rem, calc((100vw - 1320px) / 2));
  row-gap: 0;
  column-gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  align-content: start;
  align-items: stretch;
  justify-items: stretch;
  overflow-x: clip;
  overflow-y: hidden;
  overscroll-behavior: contain;
}

@supports (overflow: overlay) {
  .app-shell .dashboard-grid {
    overflow-y: hidden;
  }
}

.approval-popover {
  position: fixed;
  top: 6.2rem;
  right: 2rem;
  z-index: var(--z-popover);
  width: min(420px, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.approval-popover.hidden {
  display: none;
}

.compact-heading {
  margin-bottom: 0.75rem;
}

.approval-list {
  display: grid;
  gap: 0.55rem;
}

.approval-center {
  display: grid;
  gap: 0.85rem;
}

.approval-overview-card {
  padding-bottom: 0.75rem;
}

.approval-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
  grid-template-areas: "main next";
  gap: 0.7rem;
  align-items: stretch;
  padding: 0.86rem;
}

.approval-command-main {
  grid-area: main;
  display: grid;
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.approval-command-main h3 {
  margin: 0;
}

.approval-command-main .command-subcopy {
  display: block;
  margin-top: 0.16rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.approval-next-panel {
  grid-area: next;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.58rem;
  align-items: center;
  min-width: 0;
  padding: 0.64rem 0.68rem;
  border-left: 3px solid var(--calendar-blue);
  border-radius: 10px;
  background: var(--current-wash);
}

.approval-next-icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 11px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 1.18rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.approval-next-panel div:not(.approval-open-total) {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.approval-next-panel h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.approval-next-panel span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
}

.approval-open-total {
  display: grid;
  gap: 0.1rem;
  place-items: center;
  justify-self: end;
  min-width: 4.65rem;
  padding: 0.48rem 0.64rem;
  border-radius: 10px;
  background: var(--primary);
  color: var(--primary-ink);
  text-align: center;
}

.approval-next-panel .approval-open-total span,
.approval-open-total span {
  margin: 0;
  color: var(--primary-ink);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.approval-open-total strong {
  color: var(--primary-ink);
  font-size: 1.12rem;
  line-height: 1;
}

.approval-flow-steps {
  grid-area: flow;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.42rem;
}

.approval-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.approval-flow-step.is-active {
  border-color: rgba(1, 188, 218, 0.28);
  background: var(--current-wash);
}

.approval-flow-step > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 1rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.approval-flow-step.is-active > .material-symbols-outlined {
  background: rgba(1, 188, 218, 0.14);
  color: var(--accent);
}

.approval-flow-step div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.approval-flow-step small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.approval-flow-step strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.approval-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.approval-workspace--with-side {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
  gap: 0.85rem;
}

.approval-side-stack {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.approval-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.approval-primary-card,
.approval-secondary-card {
  padding: 0.76rem;
}

.approval-primary-card .section-heading,
.approval-secondary-card .section-heading {
  align-items: center;
  margin-bottom: 0.58rem;
}

.approval-record {
  display: grid;
  gap: 0.5rem;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(1, 188, 218, 0.035), transparent 64%),
    var(--surface-strong);
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.04);
}

.approval-record--facility {
  background: var(--surface-strong);
}

.approval-record--emergency {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background:
    linear-gradient(180deg, var(--warning-soft), transparent 68%),
    var(--surface-strong);
}

.approval-record-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, auto);
  gap: 0.64rem;
  align-items: start;
}

.approval-record-top--compact {
  grid-template-columns: minmax(0, 1fr);
}

.approval-request-summary {
  display: grid;
  gap: 0.34rem;
  min-width: 0;
}

.approval-request-summary h4 {
  margin: 0;
  color: var(--ink);
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.08rem;
  letter-spacing: 0;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.approval-kind-chip {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.34rem;
  min-height: 1.58rem;
  padding: 0.24rem 0.5rem;
  border: 1px solid rgba(1, 188, 218, 0.28);
  border-radius: 999px;
  background: rgba(1, 188, 218, 0.1);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.approval-kind-chip .material-symbols-outlined {
  font-size: 0.95rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.approval-kind-chip--facility {
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background: var(--success-soft);
  color: var(--success);
}

.approval-kind-chip--emergency {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background: var(--warning-soft);
  color: var(--warning);
}

.approval-request-subline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem 0.78rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
}

.approval-request-subline span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.approval-decision-panel {
  display: grid;
  grid-template-columns: minmax(120px, auto) auto;
  gap: 0.46rem;
  align-items: stretch;
  justify-self: end;
  min-width: 0;
}

.approval-decision-panel--compact {
  grid-template-columns: minmax(0, 0.85fr) auto;
  align-items: center;
  justify-self: stretch;
}

.approval-cost-box {
  display: grid;
  align-content: center;
  gap: 0.12rem;
  min-width: 7.6rem;
  padding: 0.46rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
  text-align: right;
}

.approval-decision-panel--compact .approval-cost-box {
  min-width: 0;
  text-align: left;
}

.approval-cost-box small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.approval-cost-box strong {
  color: var(--ink);
  font-size: 1.04rem;
  line-height: 1;
  white-space: nowrap;
}

.approval-route-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

.approval-route-grid--decision {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.approval-route-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.approval-route-grid span {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
  padding: 0.5rem 0.56rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.approval-route-grid small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.approval-route-grid strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.approval-decision-context {
  display: grid;
  gap: 0.38rem;
  min-width: 0;
}

.approval-record--purchase .approval-decision-context {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.approval-reason-preview {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.08rem 0.04rem 0.02rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.approval-reason-preview small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.approval-reason-preview p {
  display: -webkit-box;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.28;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.approval-detail-row--panels {
  grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
  padding-top: 0.02rem;
}

.approval-detail-row--compact-actions {
  align-items: start;
  gap: 0.34rem;
}

.approval-detail-row--compact-actions > details[open] {
  grid-column: 1 / -1;
}

.approval-review-details {
  display: grid;
  gap: 0.48rem;
  min-width: 0;
  padding-top: 0.15rem;
}

.approval-note-field span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
}

[data-theme="dark"] .approval-kind-chip--facility {
  color: var(--success);
}

.approval-item,
.budget-tier-card,
.department-chain-card,
.purchase-request-card {
  display: grid;
  gap: 0.55rem;
  padding: 0.68rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
}

.approval-item {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.approval-item--decision {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.48rem 0.65rem;
  padding: 0.62rem;
}

.approval-item--decision .approval-budget-strip {
  grid-column: 1 / -1;
}

.approval-item--decision .approval-note-field {
  grid-column: 1;
}

.approval-item--decision .approval-note-details {
  grid-column: 1;
}

.approval-item--decision .approval-context-details {
  grid-column: 1 / -1;
}

.approval-item--decision .approval-actions {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.approval-item--compact {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  padding: 0.58rem;
}

.approval-item--compact .approval-actions {
  justify-content: flex-end;
}

.approval-item--compact .approval-detail-row {
  grid-template-columns: 1fr;
}

.approval-main {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.approval-meta-line {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  align-items: stretch;
  gap: 0.4rem;
  min-width: 0;
}

.approval-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: start;
}

.approval-title-row strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.approval-amount {
  justify-self: end;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: right;
}

.approval-meta-line span {
  display: grid;
  align-items: start;
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.2;
}

.approval-meta-pill {
  min-height: 1.45rem;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start;
  padding: 0.36rem 0.56rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink) !important;
  font-weight: 700;
}

.approval-meta-card {
  gap: 0.12rem;
  min-width: 0;
  padding: 0.42rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.approval-meta-card small,
.approval-detail-copy small,
.purchase-request-justification small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.approval-meta-card strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.empty-state {
  margin: 0;
  padding: 0.65rem 0.72rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.approval-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.approval-decision-panel .approval-actions {
  align-content: center;
  align-items: center;
}

.approval-decision-panel--compact .approval-actions {
  justify-content: flex-end;
}

.approval-actions .small-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.95rem;
  padding: 0.4rem 0.62rem;
  font-size: 0.82rem;
}

.approval-actions .material-symbols-outlined {
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.emergency-approval-menu {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.card.emergency-approval-menu {
  margin-top: 0;
  padding-top: 1rem;
}

.emergency-approval-menu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  color: var(--ink);
  font-weight: 700;
  list-style: none;
}

.emergency-approval-menu summary::-webkit-details-marker {
  display: none;
}

.emergency-approval-menu summary strong {
  display: inline-grid;
  min-width: 1.65rem;
  min-height: 1.65rem;
  place-items: center;
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 0.82rem;
}

.emergency-approval-menu .approval-list {
  margin-top: 0.75rem;
}

details.emergency-approval-menu:not([open]) > :not(summary) {
  display: none;
}

.approval-item--emergency {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background:
    linear-gradient(0deg, var(--warning-soft), var(--warning-soft)),
    var(--surface-strong);
}

.approval-detail-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  align-items: start;
}

.approval-note-field {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.approval-note-field textarea {
  min-height: 64px;
  resize: vertical;
  text-transform: none;
}

.approval-note-field--inline {
  padding: 0.5rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.approval-note-field--inline textarea {
  min-height: 54px;
  border-radius: 9px;
}

.approval-note-details {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.approval-context-details {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.48rem;
  min-width: 0;
}

.approval-detail-row .approval-context-details,
.approval-detail-row .approval-note-details {
  grid-column: auto;
}

.approval-note-details summary,
.approval-context-details summary,
.budget-breakdown summary,
.purchase-request-head {
  list-style: none;
}

.approval-note-details summary::-webkit-details-marker,
.approval-context-details summary::-webkit-details-marker,
.budget-breakdown summary::-webkit-details-marker,
.purchase-request-head::-webkit-details-marker {
  display: none;
}

.approval-note-details summary,
.approval-context-details summary {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  justify-self: start;
  min-height: 1.82rem;
  padding: 0.3rem 0.52rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
}

.approval-note-details summary .material-symbols-outlined,
.approval-context-details summary .material-symbols-outlined {
  font-size: 0.95rem;
  color: var(--accent);
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.approval-note-details[open] summary,
.approval-context-details[open] summary {
  color: var(--ink);
}

.approval-context-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.approval-context-grid span {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.48rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 0.8rem;
}

.approval-context-grid strong {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
}

.approval-context-details p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.42;
}

.approval-detail-copy {
  display: grid;
  gap: 0.32rem;
  padding: 0.58rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.approval-detail-copy p {
  color: var(--ink);
}

.approval-context-details .ghost-button {
  justify-self: start;
}

.approval-note-field ~ .approval-actions {
  grid-column: 1 / -1;
  justify-self: end;
}

.approval-item--decision .approval-note-field ~ .approval-actions {
  grid-column: 2;
  align-self: end;
  justify-self: end;
}

.approval-item--decision .approval-note-details ~ .approval-actions {
  grid-column: 2;
  align-self: end;
  justify-self: end;
}

.deny-button {
  background: var(--surface-soft);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
}

.deny-button:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.approve-button {
  background: var(--success);
  color: #ffffff;
}

.approve-button:hover {
  background: var(--success);
  filter: brightness(0.92);
  color: #ffffff;
}

[data-theme="dark"] .approve-button {
  color: var(--primary-ink);
}

.approval-actions .approve-button,
.approval-actions .deny-button {
  justify-content: center;
  width: 6.75rem;
  min-width: 6.75rem;
  height: 2.32rem;
  min-height: 2.32rem;
  padding: 0 0.68rem;
  flex: 0 0 auto;
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
}

.approval-actions .approve-button {
  color: #ffffff;
}

.approval-actions .deny-button {
  color: var(--danger);
}

.approval-decision-panel--compact .approve-button,
.approval-decision-panel--compact .deny-button {
  width: 5.65rem;
  min-width: 5.65rem;
  padding: 0 0.48rem;
}

.approval-record--facility .approval-budget-strip--decision,
.approval-record--emergency .approval-budget-strip--decision {
  gap: 0.28rem;
  padding: 0.5rem;
}

.approval-record--emergency .approval-budget-strip--decision {
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
}

.approval-record--emergency .approval-budget-strip--decision span {
  padding: 0.42rem 0.4rem;
}

.approval-record--emergency .approval-budget-strip--decision small {
  font-size: 0.54rem;
}

.approval-record--emergency .approval-budget-strip--decision span strong {
  font-size: 0.78rem;
}

.purchase-request-grid,
.department-chain-grid {
  display: grid;
  gap: 0.75rem;
}

.purchase-request-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, auto) minmax(96px, auto) 1.45rem;
  gap: 0.55rem;
  align-items: center;
  margin: 0.35rem 0 0.38rem;
  padding: 0 0.72rem;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.purchase-request-list-head span:nth-child(2),
.purchase-request-list-head span:nth-child(3) {
  justify-self: end;
}

.purchase-center {
  display: grid;
  gap: 0.85rem;
}

.purchase-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.56fr);
  grid-template-areas:
    "main next"
    "stats stats";
  gap: 0.64rem;
  align-items: stretch;
  padding: 0.78rem;
}

.purchase-command-card--empty {
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 0.6fr);
  grid-template-areas: "main next";
}

.purchase-command-main {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.purchase-command-card--empty .purchase-command-main {
  grid-template-columns: minmax(0, 1fr);
}

.purchase-command-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.48rem;
  min-width: 0;
}

.purchase-command-main h3 {
  margin: 0;
}

.purchase-command-main .command-subcopy {
  display: block;
  margin-top: 0.16rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.purchase-next-panel {
  grid-area: next;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.58rem;
  align-items: center;
  min-width: 0;
  padding: 0.68rem 0.72rem;
  border-left: 3px solid var(--calendar-blue);
  border-radius: 12px;
  background: var(--current-wash);
}

.purchase-next-icon {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 11px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 1.16rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.purchase-next-panel div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.purchase-next-panel h4 {
  margin: 0;
  color: var(--ink);
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.purchase-next-panel span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

.purchase-next-panel .ghost-button {
  justify-self: end;
  white-space: nowrap;
}

.purchase-command-strip {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.purchase-command-strip > span {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.5rem 0.58rem;
}

.purchase-command-strip > span + span {
  border-left: 1px solid var(--line);
}

.purchase-command-strip small {
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.purchase-command-strip strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.purchase-flow-steps {
  grid-area: flow;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.purchase-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.purchase-flow-step.is-active {
  border-color: rgba(1, 188, 218, 0.28);
  background: var(--current-wash);
}

.purchase-flow-step > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.purchase-flow-step.is-active > .material-symbols-outlined {
  background: rgba(1, 188, 218, 0.14);
  color: var(--accent);
}

.purchase-flow-step div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.purchase-flow-step small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.purchase-flow-step strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.purchase-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.purchase-workspace--empty {
  gap: 0.62rem;
}

.purchase-side-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.85rem;
  min-width: 0;
  align-items: start;
}

.purchase-tools-drawer {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.purchase-tools-drawer > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.76rem 0.86rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  list-style: none;
}

.purchase-tools-drawer > summary::-webkit-details-marker {
  display: none;
}

.purchase-tools-drawer > summary h3 {
  margin: 0;
}

.purchase-tools-drawer > summary > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 1rem;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.purchase-tools-drawer[open] > summary > .material-symbols-outlined {
  transform: rotate(180deg);
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
}

.purchase-tools-drawer[open] > .purchase-side-rail {
  margin-top: 0.85rem;
}

.purchase-tools-drawer:not([open]) > .purchase-side-rail {
  display: none;
}

.purchase-form-card {
  padding: 0;
  overflow: hidden;
}

.purchase-queue-card {
  padding: 0.84rem;
}

.purchase-queue-card .section-heading {
  margin-bottom: 0.65rem;
}

.purchase-form-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.58rem;
  align-items: center;
  padding: 0.84rem;
  cursor: pointer;
  list-style: none;
}

.purchase-form-summary::-webkit-details-marker {
  display: none;
}

.purchase-form-summary h3 {
  margin: 0;
}

.purchase-form-summary > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.72rem;
  height: 1.72rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 1.08rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.purchase-form-card[open] .purchase-form-summary {
  border-bottom: 1px solid var(--line);
}

.purchase-form-card[open] .purchase-form-summary > .material-symbols-outlined {
  transform: rotate(180deg);
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
}

.purchase-form-card:not([open]) > .purchase-request-form {
  display: none;
}

.section-subcopy {
  display: block;
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.28;
}

.label-hint {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: none;
}

.purchase-form-card .admin-form {
  gap: 0.62rem;
  padding: 0.84rem;
}

.purchase-form-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.66rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.purchase-step-number {
  display: inline-grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.purchase-step-body {
  display: grid;
  gap: 0.58rem;
  min-width: 0;
}

.purchase-step-heading {
  display: grid;
  gap: 0.08rem;
}

.purchase-step-heading h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.1;
}

.purchase-step-heading span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
}

.purchase-step-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.52rem;
}

.purchase-route-preview {
  display: grid;
  gap: 0.58rem;
  margin-top: 0.05rem;
  padding: 0.62rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.route-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
}

.route-preview-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.15;
}

.route-preview-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.62rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.route-preview-summary span,
.route-step span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.76rem;
}

.route-preview-summary strong {
  color: var(--ink);
  font-size: 0.88rem;
  white-space: nowrap;
}

.route-preview-steps {
  display: grid;
  gap: 0.38rem;
}

.route-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  padding: 0.45rem 0.52rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
}

.route-step > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 1rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.route-step div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.route-step strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.2;
}

.route-step--ready > .material-symbols-outlined {
  background: var(--success-soft);
  color: var(--success);
}

.route-step--missing {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: var(--danger-soft);
}

.route-step--missing > .material-symbols-outlined {
  background: var(--danger-soft);
  color: var(--danger);
}

.purchase-queue-card {
  min-width: 0;
}

.purchase-status-groups {
  display: grid;
  gap: 0.66rem;
}

.purchase-empty-action-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.68rem;
  align-items: center;
  min-width: 0;
  padding: 0.78rem;
  border: 1px solid rgba(1, 188, 218, 0.26);
  border-left: 3px solid var(--calendar-blue);
  border-radius: 12px;
  background: var(--current-wash);
}

.purchase-empty-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 11px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 1.16rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.purchase-empty-action-card div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.purchase-empty-action-card h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.12;
}

.purchase-empty-action-card span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.28;
}

.purchase-empty-action-card button {
  justify-self: end;
  white-space: nowrap;
}

.purchase-status-section {
  display: grid;
  gap: 0.54rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.purchase-status-section + .purchase-status-section {
  border-top: 1px solid var(--line-soft);
  padding-top: 0.9rem;
}

.purchase-status-section-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  min-width: 0;
}

.purchase-status-section-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.1;
}

.purchase-status-section-head .badge {
  flex: 0 0 auto;
}

.purchase-status-section > summary {
  cursor: pointer;
  list-style: none;
}

.purchase-status-section > summary::-webkit-details-marker {
  display: none;
}

details.purchase-status-section > summary::after {
  content: "expand_more";
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 1.62rem;
  height: 1.62rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: "Material Symbols Rounded";
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

details.purchase-status-section[open] > summary::after {
  transform: rotate(180deg);
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
}

details.purchase-status-section:not([open]) > :not(summary) {
  display: none;
}

.purchase-queue-card .budget-breakdown {
  margin-bottom: 0.6rem;
}

.purchase-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.purchase-summary-grid.purchase-summary-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0;
}

.purchase-summary-grid article,
.department-budget-list article {
  display: grid;
  gap: 0.25rem;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.purchase-summary-grid.purchase-summary-strip article {
  padding: 0.58rem 0.65rem;
}

.purchase-summary-grid span,
.department-budget-list span,
.purchase-decision-list span {
  color: var(--muted);
  font-size: 0.78rem;
}

.purchase-summary-grid strong {
  font-size: 0.98rem;
}

.department-budget-list {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.department-budget-list article {
  grid-template-columns: minmax(0, 1.1fr) repeat(5, minmax(110px, 1fr));
  align-items: center;
  column-gap: 0.5rem;
}

.purchase-side-rail .department-budget-list article {
  grid-template-columns: 1fr;
}

.budget-negative {
  color: var(--danger);
}

.department-budget-list article > span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  padding: 0.44rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.department-budget-list small,
.purchase-request-meta small,
.purchase-decision-item small {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.department-budget-list article > span strong,
.purchase-request-meta strong,
.purchase-decision-item strong {
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.12;
}

.purchase-budget-impact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-column: 1 / -1;
  gap: 0.35rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.approval-budget-strip {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 0.28rem;
  padding: 0.42rem 0.52rem;
  border-radius: 9px;
}

.approval-budget-strip--decision {
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 0.28rem;
  padding: 0.5rem;
  border-radius: 11px;
}

.purchase-budget-impact span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  padding: 0.42rem 0.48rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
}

.purchase-budget-impact small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.purchase-budget-impact span strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.05;
}

.approval-budget-strip span {
  gap: 0.06rem;
}

.approval-budget-strip small {
  font-size: 0.58rem;
}

.approval-budget-strip span {
  font-size: 0.72rem;
  line-height: 1.2;
}

.approval-budget-strip span strong {
  font-size: 0.74rem;
  line-height: 1.05;
}

.approval-budget-strip--decision span {
  padding: 0.42rem 0.46rem;
}

.approval-budget-strip--decision small {
  font-size: 0.54rem;
}

.approval-budget-strip--decision span strong {
  font-size: 0.82rem;
  line-height: 1.05;
}

.purchase-budget-impact .budget-impact-alert small {
  color: var(--danger);
}

.purchase-budget-impact .budget-impact-alert strong,
.purchase-budget-impact > strong {
  color: var(--danger);
}

.purchase-budget-impact--over {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: var(--danger-soft);
}

.purchase-budget-impact--compact {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  padding: 0.45rem 0.55rem;
}

.purchase-request-card > div:not(.purchase-request-head):not(.purchase-request-details):not(.purchase-request-meta):not(.purchase-budget-impact):not(.purchase-decision-list),
.department-chain-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.purchase-request-card span,
.department-chain-card span {
  color: var(--muted);
  font-size: 0.86rem;
}

.purchase-request-card p {
  margin: 0;
  color: var(--muted);
}

.purchase-request-row {
  gap: 0.55rem;
}

.purchase-request-card {
  padding: 0;
  overflow: hidden;
}

.purchase-request-card > .purchase-request-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(120px, auto) auto auto;
  align-items: center;
  gap: 0.62rem;
  padding: 0.72rem 0.78rem;
  cursor: pointer;
}

.purchase-request-head div {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.purchase-request-head-main {
  gap: 0.38rem !important;
}

.purchase-request-head-main,
.purchase-request-next-step,
.purchase-request-amount {
  transform: translateY(0.08rem);
}

.purchase-request-head-meta {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.26rem 0.42rem !important;
}

.purchase-request-head-meta .approval-meta-pill,
.purchase-request-head-meta .purchase-request-requester,
.purchase-request-head-meta .purchase-request-date {
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.22;
}

.purchase-request-head strong,
.purchase-request-head span {
  min-width: 0;
}

.purchase-request-head strong {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.purchase-status-avatar {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--muted);
}

.purchase-status-avatar .material-symbols-outlined {
  font-size: 1.12rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.purchase-status-avatar.status-pending {
  background: var(--warning-soft);
  color: var(--warning);
}

.purchase-status-avatar.status-approved,
.purchase-status-avatar.status-purchased {
  background: var(--success-soft);
  color: var(--success);
}

.purchase-status-avatar.status-denied {
  background: var(--danger-soft);
  color: var(--danger);
}

.purchase-request-progress {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  width: fit-content;
  padding: 0.26rem 0.46rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
}

.purchase-request-requester,
.purchase-request-date {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  width: fit-content;
  padding: 0.26rem 0.46rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
}

.purchase-request-requester .material-symbols-outlined,
.purchase-request-date .material-symbols-outlined {
  color: var(--muted);
  font-size: 0.88rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.purchase-request-next-step {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.48rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.purchase-request-next-step.status-approved,
.purchase-request-next-step.status-purchased {
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background: var(--success-soft);
}

.purchase-request-next-step.status-pending {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background: var(--warning-soft);
}

.purchase-request-next-step.status-denied {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: var(--danger-soft);
}

.purchase-request-next-step small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.purchase-request-next-step strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.purchase-request-next-step.status-approved strong,
.purchase-request-next-step.status-purchased strong {
  color: var(--success);
}

[data-theme="dark"] .purchase-request-next-step.status-approved strong,
[data-theme="dark"] .purchase-request-next-step.status-purchased strong {
  color: var(--success);
}

.purchase-request-next-step.status-denied strong {
  color: var(--danger);
}

.purchase-request-pending-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: 2rem;
  height: 2rem;
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
  cursor: help;
}

.purchase-request-pending-indicator .material-symbols-outlined {
  font-size: 1.05rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.purchase-request-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-height: 2rem;
  min-width: 0;
  width: fit-content;
  justify-self: end;
  padding: 0.34rem 0.56rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.purchase-request-status-chip .material-symbols-outlined {
  font-size: 0.96rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.purchase-request-status-chip.status-approved,
.purchase-request-status-chip.status-purchased {
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background: var(--success-soft);
  color: var(--success);
}

.purchase-request-status-chip.status-pending {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background: var(--warning-soft);
  color: var(--warning);
}

.purchase-request-status-chip.status-denied {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: var(--danger-soft);
  color: var(--danger);
}

.purchase-request-head::after {
  content: "expand_more";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-family: "Material Symbols Rounded";
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.purchase-request-card[open] .purchase-request-head {
  border-bottom: 1px solid var(--line);
}

.purchase-request-card[open] .purchase-request-head::after {
  transform: rotate(180deg);
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
}

details.purchase-request-card:not([open]) > :not(summary) {
  display: none;
}

.purchase-request-summary-action {
  justify-self: end;
  min-height: 2rem;
  padding: 0.4rem 0.64rem;
  white-space: nowrap;
}

.purchase-request-details {
  display: grid;
  gap: 0.5rem;
  padding: 0.65rem 0.78rem 0.78rem;
}

.purchase-request-status-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.46rem;
  align-items: center;
  justify-self: start;
  width: min(100%, 34rem, calc(100vw - 2rem));
  min-width: 0;
  padding: 0.5rem 0.58rem;
  border: 1px solid var(--current-border);
  border-left: 3px solid var(--current);
  border-radius: 10px;
  background: color-mix(in srgb, var(--current-wash) 68%, var(--surface) 32%);
}

.purchase-request-status-note > .material-symbols-outlined {
  color: var(--accent);
  font-size: 1rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.purchase-request-status-note div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.purchase-request-status-note strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.16;
}

.purchase-request-status-note span:not(.material-symbols-outlined) {
  color: var(--ink-secondary);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
}

.purchase-request-detail-menu {
  display: grid;
  gap: 0.48rem;
  min-width: 0;
}

.purchase-request-detail-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  justify-self: start;
  min-height: 1.82rem;
  padding: 0.3rem 0.52rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
  list-style: none;
}

.purchase-request-detail-menu > summary::-webkit-details-marker {
  display: none;
}

.purchase-request-detail-menu > summary .material-symbols-outlined {
  color: var(--accent);
  font-size: 0.95rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.purchase-request-detail-menu[open] > summary {
  color: var(--ink);
}

.purchase-request-detail-menu:not([open]) > :not(summary) {
  display: none;
}

.purchase-request-support-panel {
  display: grid;
  gap: 0.45rem;
}

.purchase-request-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
  padding-top: 0.15rem;
}

.purchase-delete-button {
  color: var(--danger);
}

.approval-note-details .approval-note-field {
  text-transform: none;
}

.purchase-request-amount {
  display: grid;
  gap: 0.08rem;
  color: var(--ink);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.purchase-request-amount small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.purchase-request-amount strong {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1;
}

.purchase-request-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.42rem;
}

.purchase-request-meta > span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  padding: 0.48rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.purchase-request-justification {
  display: grid;
  gap: 0.32rem;
  padding: 0.62rem 0.68rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.purchase-request-justification p {
  margin: 0;
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.42;
}

.purchase-decision-list {
  display: grid;
  gap: 0.38rem;
  width: 100%;
}

.purchase-decision-item {
  display: grid;
  grid-template-columns: minmax(140px, 0.75fr) minmax(140px, 0.85fr) minmax(180px, 1fr);
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
  padding: 0.48rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
}

.purchase-decision-item > .material-symbols-outlined {
  color: var(--accent);
  font-size: 1rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.purchase-decision-item.status-denied > .material-symbols-outlined {
  color: var(--danger);
}

.purchase-decision-item > div,
.purchase-decision-item > span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.purchase-decision-item p {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.budget-breakdown {
  margin-bottom: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-strong);
  overflow: hidden;
}

.budget-breakdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.62rem 0.72rem;
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
}

.budget-breakdown summary strong {
  display: inline-grid;
  min-width: 1.55rem;
  min-height: 1.55rem;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.78rem;
}

.budget-breakdown .department-budget-list {
  margin: 0;
  padding: 0 0.62rem 0.62rem;
}

.department-chain-card label {
  display: grid;
  gap: 0.35rem;
}

.department-chain-card summary {
  list-style: none;
}

.department-chain-card summary::-webkit-details-marker {
  display: none;
}

.department-chain-form {
  display: grid;
  gap: 0.55rem;
  padding-top: 0.58rem;
}

.admin-shell .department-chain-grid {
  gap: 0.55rem;
}

.admin-shell .department-chain-card {
  gap: 0.55rem;
  padding: 0.72rem;
  border-radius: 11px;
}

.department-card-head {
  cursor: pointer;
}

.admin-shell .department-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 0.55rem;
  align-items: center;
  min-height: 2.5rem;
}

.admin-shell .department-card-head::after {
  content: "expand_more";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-family: "Material Symbols Rounded";
  font-size: 1.15rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.admin-shell .department-chain-card[open] .department-card-head {
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
}

.admin-shell .department-chain-card[open] .department-card-head::after {
  transform: rotate(180deg);
  background: var(--warning-soft);
  color: var(--warning);
}

.department-card-title {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.department-card-title strong {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.department-chain-card .department-status-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.department-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: space-between;
}

.approval-step-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.85fr) minmax(0, 1.15fr);
  gap: 0.75rem;
  align-items: end;
}

.admin-shell .approval-step-row {
  grid-template-columns: minmax(150px, 0.82fr) minmax(0, 1.18fr);
  gap: 0.55rem;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.approval-tier-summary {
  display: grid;
  gap: 0.2rem;
  padding-bottom: 0.2rem;
}

.admin-shell .approval-tier-summary strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.admin-shell .approval-tier-summary span {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.status-approved {
  background: var(--success-soft);
  color: var(--success);
}

.status-purchased {
  background: var(--current-wash-strong);
  color: var(--accent);
}

.status-denied {
  background: var(--danger-soft);
  color: var(--danger);
}

.budget-status-popover,
.purchase-status-popover {
  position: fixed;
  z-index: var(--z-toast);
  width: min(320px, calc(100vw - 1.5rem));
  display: grid;
  gap: 0.25rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.budget-status-popover.hidden,
.purchase-status-popover.hidden {
  display: none;
}

.budget-status-popover strong,
.purchase-status-popover strong {
  font-size: 0.9rem;
}

.budget-status-popover span,
.purchase-status-popover span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.tab-nav {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.app-shell .dashboard-grid > .tab-panel {
  grid-area: panel;
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: grid;
  gap: 1rem;
  align-content: start;
  align-items: start;
  justify-items: stretch;
  align-self: stretch;
  grid-auto-rows: max-content;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  margin-top: 0;
  padding: 1.4rem var(--shell-pad) 1.6rem;
  margin-right: 0;
  overflow-x: clip;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: none;
  scroll-padding-top: 0;
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}

.app-shell .dashboard-grid > .tab-panel > * {
  align-self: start;
  justify-self: stretch;
  margin-top: 0;
}

@supports (overflow: overlay) {
  .app-shell .dashboard-grid > .tab-panel {
    overflow-y: overlay;
  }
}

.app-shell .dashboard-grid > .tab-panel[hidden] {
  display: none;
}

.tab-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 0.9rem;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.tab-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  transition: background 160ms ease;
}

.tab-button:hover {
  background: transparent;
  color: var(--ink);
}

.tab-button.is-active {
  background: transparent;
  color: var(--ink);
  font-weight: 600;
}

.tab-button.is-active::after {
  background: var(--current);
}

.tab-panel {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.tab-panel[hidden] {
  display: none;
}

.operations-home {
  display: grid;
  gap: 0.85rem;
}

.operations-action-card {
  display: grid;
  gap: 0.8rem;
  padding: 1.15rem 1.25rem;
}

.operations-action-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  align-items: flex-start;
  min-width: 0;
}

.operations-action-heading h3 {
  margin: 0;
  font-size: 1.42rem;
}

.operations-action-heading span:not(.badge) {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
}

.operations-action-heading > .badge {
  align-self: flex-start;
}

.operations-overview-card {
  padding: 0.86rem;
}

.operations-hero {
  display: grid;
  grid-template-columns: minmax(190px, 0.45fr) minmax(0, 1.55fr);
  gap: 0.72rem;
  align-items: stretch;
}

.operations-title-block {
  display: grid;
  align-content: center;
  gap: 0.08rem;
  min-width: 0;
}

.operations-hero h3 {
  margin: 0;
  font-size: 1.42rem;
}

.operations-title-block > span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
}

.operations-next-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  min-width: 0;
  padding: 0.68rem 0.78rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--current-wash);
}

.operations-next-action > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 1.12rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.operations-next-action div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.operations-next-action small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.operations-next-action strong {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.operations-next-action span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.operations-queue-card {
  display: grid;
  gap: 0.62rem;
  padding: 0.86rem;
}

.operations-workflow-card {
  display: grid;
  gap: 0.66rem;
  padding: 0.86rem;
}

.operations-queue-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.operations-queue-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.68rem;
  align-items: center;
  min-width: 0;
  padding: 0.62rem 0.68rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.operations-queue-row:hover {
  border-color: rgba(1, 188, 218, 0.3);
  background: var(--current-wash);
  transform: translateY(-1px);
}

.operations-queue-row--role {
  border-color: rgba(1, 188, 218, 0.32);
  background: var(--current-wash);
}

.operations-queue-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--accent);
  font-size: 1.08rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.operations-queue-main {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.operations-queue-main h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.operations-queue-main > span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.operations-queue-row .ghost-button {
  justify-self: end;
  white-space: nowrap;
}

.operations-empty-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.66rem;
  align-items: center;
  min-width: 0;
  padding: 0.72rem 0.78rem;
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
  border-left: 3px solid var(--success);
  border-radius: 12px;
  background:
    linear-gradient(90deg, var(--success-soft), transparent 78%),
    var(--surface-soft);
}

.operations-empty-action > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 1.08rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.operations-empty-action h3,
.operations-empty-action p {
  margin: 0;
}

.operations-empty-action h3 {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.12;
}

.operations-empty-action p {
  margin-top: 0.08rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.28;
}

.operations-workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0.72rem;
}

.workflow-entry-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(96px, max-content) auto;
  gap: 0.72rem;
  align-items: center;
  min-height: 5.35rem;
  padding: 0.78rem 0.82rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-strong);
  box-shadow: none;
}

.workflow-entry-card--role {
  border-color: rgba(1, 188, 218, 0.28);
  background: var(--current-wash);
}

.workflow-entry-icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--accent);
  font-size: 1.16rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.workflow-entry-main {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.workflow-entry-main h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.workflow-entry-main > span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.workflow-entry-status {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  padding: 0.42rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.workflow-entry-status small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.workflow-entry-status strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.05;
}

.workflow-entry-card .ghost-button {
  align-self: center;
  white-space: nowrap;
}

.operations-recent-card {
  display: grid;
  gap: 0.72rem;
  padding: 0.35rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.operations-recent-card[open] {
  padding-bottom: 1.15rem;
}

.operations-recent-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.72rem 0;
  cursor: pointer;
  list-style: none;
}

.operations-recent-card > summary::-webkit-details-marker {
  display: none;
}

.operations-recent-card > summary h3 {
  margin: 0;
}

.operations-recent-card > summary > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 1rem;
  transition: transform 180ms ease, background 160ms ease, color 160ms ease;
}

.operations-recent-card[open] > summary > .material-symbols-outlined {
  transform: rotate(180deg);
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
}

.operations-recent-card:not([open]) > .operations-support-grid {
  display: none;
}

.operations-support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
  align-items: start;
}

.operations-workspace {
  display: grid;
  grid-template-columns: minmax(340px, 1.1fr) repeat(2, minmax(260px, 0.8fr));
  gap: 0.72rem;
  align-items: start;
}

.operations-queue-list,
.operations-mini-list {
  display: grid;
  gap: 0.42rem;
}

.operations-mini-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  min-width: 0;
  min-height: 3rem;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
}

.operations-mini-list div {
  display: grid;
  gap: 0.06rem;
  min-width: 0;
}

.operations-mini-list strong {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.operations-mini-list span:not(.badge),
.operations-mini-list time {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.operations-mini-list article {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  min-height: 0;
}

.operations-mini-list time {
  min-width: 6.2rem;
  padding-top: 0.06rem;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}

.objectives-center {
  display: grid;
  gap: 0.85rem;
}

.objectives-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
  grid-template-areas: "main next";
  gap: 0.7rem;
  align-items: stretch;
  padding: 0.86rem;
}

.objectives-command-card--setup {
  grid-template-areas:
    "main next"
    "sequence sequence";
}

.objectives-command-main {
  grid-area: main;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.objectives-command-main h3 {
  margin: 0;
}

.objectives-command-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.42rem;
}

.objectives-next-panel {
  grid-area: next;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.56rem;
  align-items: center;
  min-width: 0;
  padding: 0.6rem 0.68rem;
  border-left: 3px solid var(--calendar-blue);
  border-radius: 10px;
  background: var(--current-wash);
}

.objectives-next-icon {
  display: grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 10px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 1.12rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.objectives-next-panel div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.objectives-next-panel h4 {
  margin: 0;
  color: var(--ink);
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.objectives-next-panel span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

.objectives-flow-steps {
  grid-area: flow;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

.objectives-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.objectives-flow-step.is-active {
  border-color: rgba(1, 188, 218, 0.28);
  background: var(--current-wash);
}

.objectives-flow-step > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.objectives-flow-step.is-active > .material-symbols-outlined {
  background: rgba(1, 188, 218, 0.14);
  color: var(--accent);
}

.objectives-flow-step div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.objectives-flow-step small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.objectives-flow-step strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.objectives-start-card {
  display: grid;
  gap: 0.72rem;
  padding: 0.9rem;
  border-color: rgba(1, 188, 218, 0.28);
  background: var(--current-wash);
}

.objectives-start-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.72rem;
  align-items: center;
  min-width: 0;
}

.objectives-start-icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 12px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 1.35rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.objectives-start-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.objectives-start-copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1.12;
}

.objectives-start-copy p:not(.eyebrow) {
  max-width: 58rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.36;
}

.objectives-start-sequence {
  grid-area: sequence;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.objectives-start-sequence span {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
  padding: 0.48rem 0.56rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.18;
}

.objectives-start-sequence strong {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1;
  flex: 0 0 auto;
}

.objectives-start-sequence .is-active {
  border-color: rgba(1, 188, 218, 0.28);
  background: rgba(1, 188, 218, 0.08);
  color: var(--ink);
}

.objectives-start-sequence .is-active strong {
  background: rgba(1, 188, 218, 0.15);
  color: var(--accent);
}

.objectives-plan-grid,
.objectives-results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
  align-items: start;
}

.objectives-plan-section,
.objective-results-section {
  display: grid;
  gap: 0.6rem;
  padding: 0.78rem;
}

.objective-results-section--current {
  border-color: rgba(1, 188, 218, 0.26);
  background: var(--current-wash);
}

.objective-card-list,
.key-result-list {
  display: grid;
  gap: 0.48rem;
}

.objective-card {
  display: grid;
  gap: 0.48rem;
  min-width: 0;
  padding: 0.68rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: var(--surface-strong);
}

.objective-card.status-at_risk,
.key-result-row.status-at_risk {
  border-left-color: var(--danger);
}

.objective-card.status-completed,
.key-result-row.status-completed {
  border-left-color: var(--success);
}

.objective-card.status-paused,
.key-result-row.status-paused {
  border-left-color: var(--muted);
}

.objective-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.52rem;
  align-items: center;
  min-width: 0;
}

.objective-card-head > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--accent);
  font-size: 1.05rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.objective-card-head div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.objective-card-head strong,
.key-result-main strong {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.objective-card-head span:not(.material-symbols-outlined):not(.badge),
.key-result-main span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.objective-card p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.objective-parent-pill {
  width: fit-content;
  max-width: 100%;
  padding: 0.26rem 0.48rem;
  border: 1px solid rgba(1, 188, 218, 0.24);
  border-radius: 999px;
  background: rgba(1, 188, 218, 0.08);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
}

.objective-progress,
.key-result-progress span {
  position: relative;
  height: 0.42rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
}

.objective-progress span,
.key-result-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--success));
}

.objective-card-actions,
.key-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.34rem;
}

.key-result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.28fr) auto auto;
  gap: 0.54rem;
  align-items: center;
  min-width: 0;
  padding: 0.56rem 0.6rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: var(--surface-strong);
}

.key-result-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
}

.key-result-main > .material-symbols-outlined {
  color: var(--accent);
  font-size: 1.15rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.key-result-main div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.key-result-progress {
  display: grid;
  gap: 0.16rem;
}

.key-result-progress strong {
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1;
  text-align: right;
}

.objective-history-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}

.objective-history-card summary::-webkit-details-marker {
  display: none;
}

.objective-history-card summary h3 {
  margin: 0;
}

.objective-history-card summary > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 1rem;
  transition: transform 180ms ease, background 160ms ease, color 160ms ease;
}

.objective-history-card[open] summary {
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--line);
}

.objective-history-card[open] summary > .material-symbols-outlined {
  transform: rotate(180deg);
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
}

.objective-history-card:not([open]) > .key-result-list {
  display: none;
}

.admin-shell {
  --admin-rail: var(--surface);
  --admin-rail-soft: var(--surface-soft);
  --admin-accent: var(--calendar-blue);
  --admin-panel-bg: rgba(255, 255, 255, 0.68);
  --admin-hero: var(--surface-strong);
  background: var(--body-background);
}

.admin-shell .topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.admin-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.admin-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-height: 1.72rem;
  padding: 0.28rem 0.58rem;
  border: none;
  border-radius: 999px;
  background: var(--current);
  color: var(--current-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-mode-chip .material-symbols-outlined {
  font-size: 0.98rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.admin-shell .admin-mode-note {
  display: block;
  margin-top: 0.28rem;
  color: var(--chrome-muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.admin-shell .topbar .ghost-button {
  border-color: var(--control-border);
  color: var(--ink);
}

.admin-context-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: min(1280px, calc(100% - 3rem));
  margin: 0.75rem auto 0;
  padding: 0.58rem 0.7rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--admin-accent);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.admin-context-primary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.admin-context-primary > .material-symbols-outlined {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--admin-accent);
  font-size: 1.18rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.admin-context-primary div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.admin-context-primary strong {
  font-size: 0.9rem;
  line-height: 1.15;
}

.admin-context-primary span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.2;
}

.admin-context-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.38rem;
  flex: 0 0 auto;
}

.admin-context-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.26rem 0.54rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.admin-console-grid {
  width: min(1320px, calc(100% - 3rem));
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: start;
  gap: 0.78rem;
  padding-top: 0.92rem;
}

.admin-console-hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(360px, 1fr);
  gap: 0.72rem;
  align-items: center;
  padding: 0.78rem 0.86rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(1, 188, 218, 0.08), transparent 38%),
    var(--admin-hero);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.admin-console-intro {
  min-width: 0;
}

.admin-console-hero h2 {
  margin: 0;
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.45rem;
  letter-spacing: 0;
  line-height: 1.05;
}

.admin-console-intro > span {
  display: block;
  margin-top: 0.22rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.admin-console-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-self: end;
  gap: 0.72rem;
  align-items: center;
  width: min(720px, 100%);
  min-width: 0;
  padding: 0.68rem 0.78rem 0.68rem 1rem;
  border: 1px solid rgba(1, 188, 218, 0.2);
  border-radius: 10px;
  background: rgba(1, 188, 218, 0.08);
  text-align: left;
}

.admin-console-status > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 9px;
  background: rgba(1, 188, 218, 0.14);
  color: var(--admin-accent);
  font-size: 1.05rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.admin-console-status div {
  display: grid;
  gap: 0.1rem;
  justify-items: start;
  min-width: 0;
}

.admin-console-status strong {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.1;
}

.admin-console-status span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.28;
}

.admin-nav-shell {
  position: sticky;
  top: 5.5rem;
  z-index: var(--z-sticky);
  grid-column: 1;
  grid-row: 2;
  display: grid;
  gap: 0.48rem;
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--admin-rail);
  box-shadow: var(--shadow);
}

.admin-nav-head {
  display: flex;
  align-items: center;
  gap: 0.52rem;
  padding: 0.18rem 0.12rem 0.48rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.admin-nav-head > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 9px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--admin-accent);
  font-size: 1.08rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.admin-nav-head div {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.admin-nav-head strong {
  font-size: 0.86rem;
  line-height: 1.1;
}

.admin-nav-head span:not(.material-symbols-outlined),
.admin-nav-note {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.admin-settings-nav {
  display: grid;
  gap: 0.12rem;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.admin-settings-nav .tab-button {
  justify-content: flex-start;
  width: 100%;
  min-height: 36px;
  gap: 0.5rem;
  padding: 0.42rem 0.5rem;
  color: var(--muted);
  border-radius: 8px;
  text-align: left;
}

.admin-settings-nav .tab-button::after {
  display: none;
}

.admin-settings-nav .material-symbols-outlined {
  font-size: 1.05rem;
  color: currentColor;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.admin-settings-nav .tab-button:hover,
.admin-settings-nav .tab-button.is-active {
  background: var(--admin-rail-soft);
  border-color: var(--line);
  color: var(--ink);
}

.admin-settings-nav .tab-button.is-active {
  box-shadow: inset 3px 0 0 var(--current);
}

.admin-nav-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.48rem;
  margin: 0.36rem 0 0.16rem;
  color: var(--faint);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.admin-nav-divider::before {
  content: "";
  min-width: 0;
  height: 1px;
  background: var(--line);
}

.admin-nav-note {
  margin: 0.08rem 0 0;
  padding: 0.52rem 0.54rem;
  border: 1px solid rgba(1, 188, 218, 0.18);
  border-radius: 10px;
  background: rgba(1, 188, 218, 0.08);
}

.admin-shell .tab-panel {
  grid-column: 2;
  grid-row: 2;
}

.admin-shell .card {
  box-shadow: none;
}

.admin-panel {
  gap: 0.72rem;
  padding: 0.64rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--admin-panel-bg);
}

[data-theme="dark"] .admin-shell {
  --admin-rail: var(--surface);
  --admin-rail-soft: rgba(255, 255, 255, 0.06);
  --admin-accent: var(--warning);
  --admin-panel-bg: var(--surface-soft);
  --admin-hero: var(--surface-strong);
  background: var(--body-background);
}

[data-theme="dark"] .admin-shell .topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

[data-theme="dark"] .admin-context-strip {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background: var(--surface-strong);
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

[data-theme="dark"] .admin-context-primary > .material-symbols-outlined {
  background: var(--warning-soft);
}

[data-theme="dark"] .admin-context-primary span:not(.material-symbols-outlined) {
  color: rgba(255, 255, 255, 0.62);
}

[data-theme="dark"] .admin-context-pills span {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.72);
}

[data-theme="dark"] .admin-nav-shell {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.14);
}

[data-theme="dark"] .admin-nav-head {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

[data-theme="dark"] .admin-nav-head > .material-symbols-outlined {
  background: var(--warning-soft);
}

[data-theme="dark"] .admin-nav-head span:not(.material-symbols-outlined),
[data-theme="dark"] .admin-nav-note {
  color: rgba(255, 255, 255, 0.58);
}

[data-theme="dark"] .admin-settings-nav .tab-button {
  color: rgba(255, 255, 255, 0.68);
}

[data-theme="dark"] .admin-settings-nav .tab-button:hover,
[data-theme="dark"] .admin-settings-nav .tab-button.is-active {
  border-color: transparent;
  color: #ffffff;
}

[data-theme="dark"] .admin-nav-note {
  border-color: var(--warning-soft);
  background: var(--warning-soft);
}

[data-theme="dark"] .admin-console-hero {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(135deg, var(--warning-soft), transparent 38%),
    var(--admin-hero);
  color: #ffffff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] .admin-console-intro > span {
  color: rgba(255, 255, 255, 0.66);
}

[data-theme="dark"] .admin-console-status {
  border-color: var(--warning-soft);
  background: var(--warning-soft);
}

[data-theme="dark"] .admin-console-status > .material-symbols-outlined {
  background: var(--warning-soft);
}

[data-theme="dark"] .admin-console-status strong {
  color: #ffffff;
}

[data-theme="dark"] .admin-console-status span:not(.material-symbols-outlined) {
  color: rgba(255, 255, 255, 0.58);
}

.admin-card {
  padding: 0.84rem;
  border-radius: 12px;
  background: var(--surface);
}

.admin-shell .admin-two-panel {
  grid-template-columns: minmax(260px, 0.48fr) minmax(0, 1.52fr);
  gap: 0.75rem;
}

.admin-shell .admin-form {
  gap: 0.65rem;
}

.admin-shell .admin-form label,
.admin-shell .department-chain-card label {
  font-size: 0.78rem;
}

.admin-shell .admin-form input:not([type="checkbox"]),
.admin-shell .admin-form textarea,
.admin-shell .admin-form select,
.admin-shell .department-chain-card input:not([type="checkbox"]),
.admin-shell .department-chain-card select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0.55rem 0.65rem;
  border-radius: 9px;
}

.admin-shell .app-settings-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.admin-shell .app-settings-form .checkbox-label,
.admin-shell .app-settings-form button[type="submit"],
.admin-shell .app-settings-form .muted {
  justify-self: start;
}

.admin-shell .app-settings-form .checkbox-label {
  align-self: stretch;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
}

.admin-shell .app-settings-form .checkbox-label span {
  display: grid;
  gap: 0.1rem;
}

.license-setup-card {
  width: min(780px, 100%);
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
}

.license-setup-form {
  width: min(560px, 100%);
  margin-top: 0;
  text-align: left;
}

.license-setup-card .brand-block {
  align-items: center;
  gap: 0.95rem;
}

.license-status-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
  width: 100%;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--ink);
}

.license-status-card > .material-symbols-outlined {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
  background: var(--current-wash);
  color: var(--current);
  font-size: 1.25rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.license-status-card div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.license-status-card strong {
  font-size: 0.88rem;
  line-height: 1.2;
}

.license-status-card span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.license-status-card--valid {
  border-color: rgba(44, 174, 89, 0.28);
  background: rgba(44, 174, 89, 0.08);
}

.license-status-card--warning {
  border-color: rgba(223, 148, 44, 0.3);
  background: rgba(223, 148, 44, 0.1);
}

.license-status-card--danger {
  border-color: rgba(213, 83, 83, 0.3);
  background: rgba(213, 83, 83, 0.09);
}

.admin-shell .admin-two-panel.license-admin-panel {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.license-admin-panel .admin-card {
  min-width: 0;
}

.license-summary-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.3fr) auto;
  gap: 0.84rem;
  align-items: stretch;
}

.license-summary-card .section-heading {
  grid-column: 1 / -1;
}

.license-summary-card .license-status-card {
  align-self: stretch;
}

.license-detail-list {
  display: grid;
  gap: 0.46rem;
  margin: 0.72rem 0 0;
}

.license-detail-list div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.52rem 0;
  border-top: 1px solid var(--line);
}

.license-detail-list dt {
  color: var(--faint);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.license-detail-list dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.license-admin-panel .license-detail-list div {
  grid-template-columns: 1fr;
  gap: 0.18rem;
  padding: 0.6rem 0;
}

.license-admin-panel .license-detail-list dd {
  font-size: 0.92rem;
  line-height: 1.25;
}

.license-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-self: center;
  margin: 0;
  padding: 0;
  border-top: 0;
}

.license-card-actions .ghost-button {
  min-width: min(100%, 12rem);
  justify-content: center;
}

.license-check-modal-panel {
  width: min(640px, 100%);
}

.license-check-result {
  margin-bottom: 0.85rem;
}

.license-check-detail-list {
  margin-top: 0;
}

.license-raw-response {
  margin-top: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--well);
  overflow: hidden;
}

.license-raw-response summary {
  cursor: pointer;
  padding: 0.72rem 0.84rem;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
}

.license-raw-response pre {
  max-height: min(42vh, 340px);
  margin: 0;
  padding: 0.84rem;
  border-top: 1px solid var(--line);
  overflow: auto;
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-shell .license-settings-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  max-width: none;
}

.admin-shell .license-settings-form .checkbox-label,
.admin-shell .license-settings-form button[type="submit"],
.admin-shell .license-settings-form .muted {
  justify-self: start;
}

.admin-shell .license-settings-form .checkbox-label {
  grid-column: 1 / -1;
  align-self: stretch;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
}

.admin-shell .license-settings-form .checkbox-label span {
  display: grid;
  gap: 0.1rem;
}

.admin-shell .license-settings-form button[type="submit"] {
  grid-column: 1 / -1;
  min-width: min(100%, 15rem);
}

.admin-shell .license-settings-form .muted {
  grid-column: 1 / -1;
}

.admin-shell .team-grid,
.admin-shell .admin-entity-grid {
  gap: 0.45rem;
}

.admin-shell .team-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.16rem 0.75rem;
  align-items: center;
  padding: 0.56rem 0.62rem;
  border-radius: 10px;
  background: var(--surface-strong);
}

.admin-shell .team-card strong,
.admin-shell .team-card > span:not(.badge),
.admin-shell .team-card .role-badge-list {
  grid-column: 1;
  min-width: 0;
}

.admin-shell .team-card strong {
  font-size: 0.92rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.admin-shell .team-card > span:not(.badge) {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.25;
}

.admin-shell .team-card .role-badge-list {
  margin: 0.25rem 0 0;
}

.admin-shell .team-card > button {
  grid-column: 2;
  grid-row: 1 / span 3;
  justify-self: end;
}

.stats-row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stat-card {
  padding: 0.9rem 1rem;
}

.stat-card span {
  display: block;
  color: var(--muted);
  margin-bottom: 0.25rem;
  font-size: 0.78rem;
}

.stat-card strong {
  font-size: 1.45rem;
}

.board-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 0.55rem;
  margin: 0;
}

.board-summary article {
  padding: 0.62rem 0.75rem;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.board-summary span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}

.board-summary strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.facilities-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
  grid-template-areas: "main next";
  gap: 0.7rem;
  align-items: stretch;
  margin-bottom: 0.72rem;
}

.facilities-command-main {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.facilities-command-main h3 {
  margin: 0;
}

.facilities-command-main .command-subcopy {
  display: block;
  margin-top: 0.16rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.facilities-add-button {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  white-space: nowrap;
}

.facilities-add-button .material-symbols-outlined {
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.facilities-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.62rem;
  margin-bottom: 0.72rem;
}

.facilities-action-card {
  display: grid;
  gap: 0.58rem;
  min-width: 0;
  padding: 0.68rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.facilities-action-card--budget {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background:
    linear-gradient(135deg, var(--warning-soft), transparent 66%),
    var(--surface-soft);
}

.facilities-action-card--clear {
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background:
    linear-gradient(135deg, var(--success-soft), transparent 66%),
    var(--surface-soft);
}

.facilities-action-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  min-width: 0;
}

.facilities-action-head > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 1.08rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.facilities-action-card--budget .facilities-action-head > .material-symbols-outlined {
  background: var(--warning-soft);
  color: var(--warning);
}

.facilities-action-card--clear .facilities-action-head > .material-symbols-outlined {
  background: var(--success-soft);
  color: var(--success);
}

.facilities-action-head div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.facilities-action-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.facilities-action-head span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
}

.facilities-action-list {
  display: grid;
  gap: 0.36rem;
}

.facilities-action-list > span {
  display: grid;
  gap: 0.04rem;
  min-width: 0;
  padding: 0.44rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
}

.facilities-action-list strong {
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facilities-action-list small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.15;
}

.facilities-action-list .empty-state {
  margin: 0;
  padding: 0.5rem 0.55rem;
}

.facilities-next-panel {
  grid-area: next;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.58rem;
  align-items: center;
  min-width: 0;
  padding: 0.64rem 0.68rem;
  border-left: 3px solid var(--calendar-blue);
  border-radius: 10px;
  background: var(--current-wash);
}

.facilities-next-panel > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 11px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 1.18rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.facilities-next-panel div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.facilities-next-panel h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.facilities-next-panel span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
}

.facilities-flow-steps {
  grid-area: flow;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

.facilities-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.facilities-flow-step.is-active {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background:
    linear-gradient(90deg, var(--warning-soft), transparent 78%),
    var(--surface-soft);
}

.facilities-flow-step > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 1rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.facilities-flow-step.is-active > .material-symbols-outlined {
  background: var(--warning-soft);
  color: var(--warning);
}

.facilities-flow-step div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.facilities-flow-step small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.facilities-flow-step strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.board-toolbar {
  display: grid;
  justify-self: end;
  gap: 0.42rem;
  width: fit-content;
  max-width: 100%;
  margin: -0.18rem 0 0.5rem;
}

.board-toolbar summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  width: max-content;
  min-height: 2.1rem;
  max-width: 100%;
  padding: 0.4rem 0.52rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  cursor: pointer;
  list-style: none;
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.04);
}

.board-toolbar summary::-webkit-details-marker {
  display: none;
}

.board-toolbar[open] {
  width: min(470px, 100%);
}

.board-toolbar[open] summary {
  width: 100%;
  justify-content: space-between;
}

.board-toolbar-expand {
  display: grid;
  place-items: center;
  width: 1.38rem;
  height: 1.38rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.94rem;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.board-toolbar[open] .board-toolbar-expand {
  transform: rotate(180deg);
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
}

.board-toolbar:not([open]) > :not(summary) {
  display: none;
}

.board-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.board-controls label {
  min-width: 150px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
}

.board-controls select {
  min-height: 38px;
  padding: 0.48rem 0.7rem;
  border-radius: 10px;
  text-transform: none;
}

.board-toolbar-title {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.board-toolbar-title .material-symbols-outlined {
  color: var(--accent);
  font-size: 0.96rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.facilities-board-card {
  padding: 0.86rem;
  padding-bottom: 0.85rem;
}

.facilities-board-card .section-heading {
  margin-bottom: 0.7rem;
}

.card {
  padding: 1rem;
  min-width: 0;
}

.workspace-card {
  box-shadow: none;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.85rem;
}

.table-shell {
  overflow-x: auto;
}

.audit-tool {
  display: grid;
  gap: 0.75rem;
}

.audit-heading {
  margin-bottom: 0;
}

.audit-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.audit-summary-strip article {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-strong);
}

.audit-summary-strip span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.audit-summary-strip strong {
  color: var(--ink);
  font-size: clamp(1.18rem, 2.1vw, 1.6rem);
  line-height: 1;
}

.audit-summary-emergency strong {
  color: var(--warning);
}

.audit-filter-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) repeat(3, minmax(112px, 0.7fr)) minmax(170px, 0.9fr) minmax(130px, 0.45fr);
  gap: 0.5rem;
  align-items: end;
  padding: 0.62rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.audit-filter-form label {
  min-width: 0;
  gap: 0.28rem;
  color: var(--ink-secondary);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.audit-filter-form input:not([type="checkbox"]),
.audit-filter-form select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border-radius: 9px;
  background: var(--surface);
  font-size: 0.84rem;
  letter-spacing: 0;
}

.audit-search-field {
  grid-column: span 2;
}

.audit-date-field--to {
  grid-column: 1 / 2;
}

.audit-toggle-field {
  display: grid;
  grid-column: 2 / 5;
  gap: 0.28rem;
  min-width: 0;
}

.audit-filter-label {
  color: var(--ink-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

.audit-emergency-toggle {
  min-height: 44px;
  padding: 0.42rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  text-transform: none;
  letter-spacing: 0;
}

.audit-filter-form .audit-emergency-toggle {
  color: var(--ink-secondary);
  letter-spacing: 0;
  text-transform: none;
}

.audit-emergency-toggle span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.audit-emergency-toggle strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.audit-emergency-toggle small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}

.audit-filter-actions {
  display: flex;
  align-items: center;
  align-self: end;
  grid-column: 5 / -1;
  justify-content: flex-end;
  min-height: 44px;
  min-width: max-content;
}

.audit-filter-actions button {
  min-height: 42px;
  padding-inline: 0.94rem;
}

.audit-log-list {
  display: grid;
  gap: 0.48rem;
}

.audit-log-entry {
  display: grid;
  gap: 0.56rem;
  min-width: 0;
  padding: 0.7rem 0.78rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-strong);
}

.audit-log-entry--success {
  border-left-color: var(--success);
}

.audit-log-entry--info {
  border-left-color: var(--current-deep);
}

.audit-log-entry--danger {
  border-left-color: var(--danger);
}

.audit-log-entry--emergency {
  border-left-color: var(--warning);
  background:
    linear-gradient(90deg, var(--warning-soft), rgba(255, 255, 255, 0) 48%),
    var(--surface-strong);
}

.audit-log-entry-main {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
  min-width: 0;
}

.audit-log-copy {
  min-width: 0;
}

.audit-log-entry time {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.audit-log-entry strong {
  display: block;
  margin-top: 0.16rem;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.audit-action-badge {
  flex: 0 0 auto;
}

.audit-action-badge--success {
  background: var(--success-soft);
  border-color: transparent;
  color: var(--success);
}

.audit-action-badge--info {
  background: var(--current-wash);
  border-color: transparent;
  color: var(--current-deep);
}

.audit-action-badge--danger {
  background: var(--danger-soft);
  border-color: transparent;
  color: var(--danger);
}

.audit-action-badge--emergency {
  background: var(--warning-soft);
  border-color: transparent;
  color: var(--warning);
}

.audit-log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.audit-log-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}

.audit-log-meta b {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.audit-empty-state {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  min-height: 180px;
  padding: 1.4rem;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface-strong);
  text-align: center;
}

.audit-empty-state .material-symbols-outlined {
  color: var(--muted);
  font-size: 2rem;
}

.audit-empty-state strong {
  color: var(--ink);
}

@media (max-width: 1180px) {
  .audit-filter-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .audit-search-field,
  .audit-toggle-field {
    grid-column: span 2;
  }

  .audit-date-field--to {
    grid-column: auto;
  }

  .audit-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  .audit-summary-strip,
  .audit-filter-form {
    grid-template-columns: 1fr;
  }

  .audit-search-field,
  .audit-toggle-field,
  .audit-filter-actions {
    grid-column: auto;
  }

  .audit-filter-actions {
    justify-content: flex-start;
  }

  .audit-log-entry-main {
    flex-direction: column;
    gap: 0.45rem;
  }

  .audit-action-badge {
    align-self: flex-start;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 0.62rem 0.7rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table-subcopy {
  margin: 0.35rem 0 0;
  color: var(--muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.24rem 0.6rem;
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
  color: var(--ink-secondary);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-pending {
  background: var(--warning-soft);
  border-color: transparent;
  color: var(--warning);
}

.status-in_progress {
  background: var(--current-wash-strong);
  border-color: transparent;
  color: var(--accent);
}

.status-completed {
  background: var(--success-soft);
  border-color: transparent;
  color: var(--success);
}

.priority-high {
  background: var(--danger-soft);
  border-color: transparent;
  color: var(--danger);
}

.priority-medium {
  background: var(--warning-soft);
  border-color: transparent;
  color: var(--warning);
}

.priority-low {
  background: var(--success-soft);
  border-color: transparent;
  color: var(--success);
}

.event-list,
.team-grid {
  display: grid;
  gap: 1rem;
}

.venue-event-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.venue-event-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.68rem;
  align-items: stretch;
  min-height: 4.25rem;
  padding: 0.62rem;
  border-radius: 11px;
}

.venue-event-card h4,
.venue-event-card p,
.venue-event-card span {
  margin: 0;
}

.venue-event-card--next {
  border-color: rgba(1, 188, 218, 0.34);
  background: var(--current-wash);
}

.venue-event-date {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 4.2rem;
  min-height: 3.6rem;
  padding: 0.34rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink);
  text-align: center;
}

.venue-event-date span,
.venue-event-date small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.venue-event-date strong {
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
}

.venue-event-main {
  display: grid;
  align-content: center;
  gap: 0.22rem;
  min-width: 0;
}

.venue-event-card h4 {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.venue-event-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.65rem;
}

.venue-event-details span {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
}

.venue-event-details .material-symbols-outlined {
  color: var(--accent);
  font-size: 0.9rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.venue-event-card span,
.venue-event-card p,
.venue-event-meta {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.venue-event-meta {
  display: grid;
  align-content: center;
  gap: 0.28rem;
  justify-items: end;
  text-align: right;
  white-space: nowrap;
}

.venue-next-label {
  border-color: rgba(1, 188, 218, 0.32);
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
}

.calendar-roster-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(420px, 1fr);
  gap: 1.5rem;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.admin-two-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
  gap: 1rem;
  align-items: start;
}

.budget-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-shell .budget-tier-grid {
  gap: 0.6rem;
}

.admin-shell .budget-tier-card {
  gap: 0.55rem;
  padding: 0.72rem;
  border-radius: 11px;
}

.admin-shell .budget-tier-card .eyebrow {
  margin-bottom: 0.18rem;
}

.admin-stack {
  display: grid;
  gap: 1rem;
}

.card-panel {
  margin-top: 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  padding: 0.9rem;
}

.event-card,
.team-card {
  padding: 0.85rem;
  border-radius: 12px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
}

.event-card--selectable {
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.event-card--selectable:hover,
.event-card--selectable:focus-visible {
  border-color: rgba(1, 188, 218, 0.42);
  background: var(--current-wash);
  outline: none;
  transform: translateY(-1px);
}

.event-card-affordance {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.24rem;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.event-card-affordance .material-symbols-outlined {
  color: currentColor;
  font-size: 0.92rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.event-card h4,
.event-card p {
  margin: 0;
}

.calendar-detail-card {
  display: grid;
  gap: 0.72rem;
}

.calendar-detail-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.62rem;
  align-items: start;
  min-width: 0;
}

.calendar-detail-icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 11px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 1.16rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.calendar-detail-main {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.calendar-detail-main h4 {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.calendar-detail-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.26rem 0.66rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

.calendar-detail-facts span {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  min-width: 0;
}

.calendar-detail-facts .material-symbols-outlined {
  color: var(--accent);
  font-size: 0.92rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.calendar-detail-note {
  display: grid;
  gap: 0.18rem;
  padding: 0.56rem 0.62rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.calendar-detail-note small {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-detail-note p {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.team-card strong {
  display: block;
}

.event-time {
  color: var(--accent);
  margin: 0 0 0.25rem;
}

.event-staffing-list {
  display: grid;
  gap: 0.55rem;
  padding: 0.62rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
}

.event-staffing-list--empty {
  padding: 0.68rem;
}

.event-staffing-list--empty p {
  margin: 0;
}

.event-staffing-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.46rem;
  align-items: center;
  min-width: 0;
}

.event-staffing-heading > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 9px;
  background: rgba(1, 188, 218, 0.11);
  color: var(--accent);
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.event-staffing-heading div {
  display: grid;
  gap: 0.04rem;
  min-width: 0;
}

.event-staffing-heading strong {
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.1;
}

.event-staffing-heading small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.event-staffing-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.7fr);
  gap: 0.58rem;
  align-items: center;
  padding: 0.52rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
}

.event-staffing-function {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.42rem;
  align-items: center;
  min-width: 0;
}

.event-staffing-function > .material-symbols-outlined {
  color: var(--accent);
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.event-staffing-function div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.event-staffing-row strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.event-staffing-row span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.16;
}

.event-staffing-row select {
  width: 100%;
  min-height: 36px;
  border-radius: 10px;
}

.event-staffing-assignee {
  justify-self: end;
  color: var(--ink);
  font-weight: 700;
}

.calendar-staffing-message {
  margin: 0.85rem 0 0;
}

.calendar-staffing-message[data-tone="success"] {
  color: var(--success);
}

.calendar-staffing-message[data-tone="error"] {
  color: var(--danger);
}

.calendar-staffing-message[data-tone="info"] {
  color: var(--accent);
}

.team-card span {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
}

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

.task-workflow-form {
  grid-template-columns: 1fr;
  gap: 0.72rem;
}

.task-form-section {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  min-width: 0;
  padding: 0.68rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.task-workflow-form .task-form-section {
  grid-template-columns: minmax(0, 1fr);
}

.task-form-step {
  display: inline-grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.task-form-section-body {
  display: grid;
  gap: 0.58rem;
  min-width: 0;
}

.task-form-section-heading {
  display: grid;
  gap: 0.1rem;
}

.task-form-section-heading h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.1;
}

.task-form-section-heading span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
}

.task-form-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;
  gap: 0.52rem;
}

.task-form-fields > label {
  min-width: 0;
}

.task-form-fields--request {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.task-form-fields input,
.task-form-fields textarea,
.task-form-fields select {
  width: 100%;
  box-sizing: border-box;
}

.task-description-field {
  grid-column: 1 / -1;
}

.task-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  min-height: 3.5rem;
}

.task-form-actions > button {
  flex: 0 0 auto;
  margin-left: auto;
}

.task-form-actions p {
  order: -1;
  flex: 1 1 16rem;
  margin: 0;
  min-width: 0;
  text-align: left;
}

.task-form-actions p:empty {
  display: none;
}

.modal-panel .task-workflow-form .task-form-actions {
  margin: 0;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
  background: transparent;
}

@media (max-width: 640px) {
  .task-form-fields--request {
    grid-template-columns: 1fr;
  }
}

.availability-form {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(280px, 1fr) minmax(230px, 0.8fr);
  gap: 0.68rem;
  align-items: stretch;
}

.availability-form-section {
  min-width: 0;
  padding: 0.68rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.availability-form-section--identity,
.availability-form-section--time {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

.availability-form-section--identity > div,
.availability-form-section--time > div {
  display: grid;
  gap: 0.56rem;
  min-width: 0;
}

.availability-step-label {
  display: inline-grid;
  place-items: center;
  width: 1.58rem;
  height: 1.58rem;
  border-radius: 999px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.availability-days {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.68rem;
}

.availability-days legend {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.availability-day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.34rem;
}

.availability-day-grid .checkbox-label {
  justify-content: center;
  min-height: 34px;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  font-size: 0.72rem;
}

.availability-toggle {
  align-self: end;
  padding: 0.42rem 0.48rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
}

.availability-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.admin-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.78rem;
}

.checkbox-label {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  min-height: 38px;
}

.checkbox-label input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--primary);
}

.admin-entity-grid,
.venue-grid {
  display: grid;
  gap: 0.45rem;
}

.full-span {
  grid-column: 1 / -1;
}

.task-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

.venue-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.7fr);
  gap: 0.72rem;
  align-items: start;
}

.venue-workspace--empty {
  grid-template-columns: minmax(0, 1fr);
}

.venue-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  grid-template-areas: "main next";
  gap: 0.72rem;
  align-items: stretch;
  grid-column: 1 / -1;
  padding: 0.86rem;
}

.venue-command-card--empty {
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 0.6fr);
}

.venue-command-main {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.venue-command-card--empty .venue-command-main {
  grid-template-columns: minmax(0, 1fr);
}

.venue-command-main h3 {
  margin: 0;
}

.venue-command-main .command-subcopy {
  display: block;
  margin-top: 0.16rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.venue-next-panel {
  grid-area: next;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.56rem;
  align-items: center;
  min-width: 0;
  padding: 0.58rem 0.66rem;
  border-left: 3px solid var(--calendar-blue);
  border-radius: 10px;
  background: var(--surface-soft);
}

.venue-next-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 1.12rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.venue-next-panel div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.venue-next-panel h4 {
  margin: 0;
  color: var(--ink);
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.venue-next-panel span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

.venue-next-panel .ghost-button {
  justify-self: end;
  white-space: nowrap;
}

.venue-flow-steps {
  grid-area: flow;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.venue-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.venue-flow-step.is-active {
  border-color: rgba(1, 188, 218, 0.28);
  background: var(--current-wash);
}

.venue-flow-step > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.venue-flow-step.is-active > .material-symbols-outlined {
  background: rgba(1, 188, 218, 0.14);
  color: var(--accent);
}

.venue-flow-step div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.venue-flow-step small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.venue-flow-step strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.venue-events-card {
  align-self: start;
}

.venue-layout-card {
  display: grid;
  gap: 0.66rem;
  padding: 1.1rem 1.2rem;
  align-content: start;
}

.venue-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  min-height: 3rem;
  padding: 0.52rem 0.58rem;
  border-radius: 10px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  text-align: left;
  width: 100%;
  color: var(--ink);
}

.venue-card-icon {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--accent);
  font-size: 1.05rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.venue-card div {
  display: grid;
  gap: 0.06rem;
  min-width: 0;
}

.venue-card strong {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.venue-card div > span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.venue-card--interactive {
  cursor: pointer;
}

.venue-card--interactive:hover {
  border-color: rgba(1, 188, 218, 0.24);
  background: rgba(1, 188, 218, 0.05);
}

.task-summary-card {
  padding: 0.9rem;
  border-radius: 12px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
}

.task-summary-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.task-meta span {
  display: inline-flex;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.82rem;
}

.task-meta-list,
.task-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.7rem 0 0;
}

.task-meta-list div,
.task-detail-meta div {
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.task-meta-list dt,
.task-detail-meta dt {
  margin: 0 0 0.25rem;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
}

.task-meta-list dd,
.task-detail-meta dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.task-meta-note {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.role-fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.58rem;
}

.role-fieldset legend {
  padding: 0 0.35rem;
  color: var(--muted);
  font-weight: 700;
}

.role-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.role-checkbox-grid--compact {
  grid-template-columns: 1fr;
}

.role-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.42rem;
  min-height: 0;
  padding: 0.42rem 0.48rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.role-choice input {
  margin-top: 0.12rem;
}

.role-choice span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.role-choice strong {
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.1;
}

.role-choice small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
}

.role-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.7rem 0 0.9rem;
}

.user-role-form,
.user-profile-form,
.user-password-form {
  display: grid;
  gap: 0.62rem;
  margin-top: 0.85rem;
}

.user-profile-form,
.user-password-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 0.62rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.user-profile-form p,
.user-password-form p {
  grid-column: 1 / -1;
}

.role-popover {
  position: fixed;
  top: 5.6rem;
  right: 2rem;
  z-index: var(--z-popover);
  width: min(360px, calc(100vw - 2rem));
  padding: 1.1rem;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.role-popover.hidden {
  display: none;
}

.role-popover-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.notification-preferences-form {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.notification-preferences-form > div {
  display: grid;
  gap: 0.08rem;
}

.notification-preferences-form > div span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
}

.notification-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.38rem;
  padding: 0.38rem 0.44rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.notification-choice input {
  margin-top: 0.08rem;
}

.notification-choice span {
  display: grid;
  gap: 0.04rem;
}

.notification-choice strong {
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.1;
}

.notification-choice small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.22;
  text-transform: none;
}

.notification-preferences-form button {
  justify-self: start;
}

.popover-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.role-popover .theme-menu-button {
  margin-right: auto;
}

.role-modal-panel {
  width: min(720px, 100%);
}

.task-detail-panel {
  width: min(680px, 100%);
  display: grid;
  gap: 0.72rem;
}

.task-detail-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
}

.task-detail-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.2rem 0.52rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.task-detail-chip.status-pending {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background: var(--warning-soft);
  color: var(--warning);
}

.task-detail-chip.status-in_progress {
  border-color: rgba(1, 188, 218, 0.28);
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
}

.task-detail-chip.status-completed {
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background: var(--success-soft);
  color: var(--success);
}

[data-theme="dark"] .task-detail-chip.status-completed {
  color: var(--success);
}

.task-detail-chip--priority {
  color: var(--muted);
}

.task-detail-note {
  display: grid;
  gap: 0.24rem;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--current-wash);
}

.task-detail-note > span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.task-detail-description {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.task-detail-meta {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
}

.task-detail-meta div {
  padding: 0.58rem 0.62rem;
  background: var(--surface-strong);
}

.task-detail-actions {
  justify-content: flex-end;
  padding-top: 0.12rem;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.calendar-shell {
  display: grid;
  gap: 0.7rem;
}

.staff-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  grid-template-areas: "main next";
  gap: 0.7rem;
  align-items: stretch;
  padding: 0.86rem;
}

.staff-command-main {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.staff-command-main h3 {
  margin: 0;
}

.staff-command-main .command-subcopy {
  display: block;
  margin-top: 0.16rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.staff-next-panel {
  grid-area: next;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.58rem;
  align-items: center;
  min-width: 0;
  padding: 0.68rem 0.72rem;
  border-left: 3px solid var(--calendar-blue);
  border-radius: 12px;
  background: var(--current-wash);
}

.staff-next-icon {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 11px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 1.16rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.staff-next-panel div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.staff-next-panel h4 {
  margin: 0;
  color: var(--ink);
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.staff-next-panel span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

.staff-next-panel .ghost-button {
  justify-self: end;
  white-space: nowrap;
}

.staff-flow-steps {
  grid-area: flow;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.staff-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.staff-flow-step.is-active {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background:
    linear-gradient(90deg, var(--warning-soft), transparent 78%),
    var(--surface-soft);
}

.staff-flow-step > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.staff-flow-step.is-active > .material-symbols-outlined {
  background: var(--warning-soft);
  color: var(--warning);
}

.staff-flow-step div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.staff-flow-step small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.staff-flow-step strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.staff-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.72rem;
  align-items: start;
}

.staff-side-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.72rem;
  min-width: 0;
  align-items: start;
}

.staff-tools-drawer {
  display: grid;
  gap: 0.72rem;
  min-width: 0;
}

.staff-tools-drawer > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.76rem 0.86rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  list-style: none;
}

.staff-tools-drawer > summary::-webkit-details-marker {
  display: none;
}

.staff-tools-drawer > summary h3 {
  margin: 0;
}

.staff-tools-drawer > summary > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 1rem;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.staff-tools-drawer[open] > summary > .material-symbols-outlined {
  transform: rotate(180deg);
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
}

.staff-tools-drawer[open] > .staff-side-rail {
  margin-top: 0.72rem;
}

.staff-tools-drawer:not([open]) > .staff-side-rail {
  display: none;
}

.staff-side-rail .section-subcopy {
  display: none;
}

.staff-open-card,
.staff-admin-card,
.staff-coverage-card,
.staff-matrix-card,
.staff-editor-card {
  display: grid;
  gap: 0.66rem;
  padding: 0.86rem;
}

.staff-admin-card {
  align-content: start;
  background:
    linear-gradient(135deg, rgba(1, 188, 218, 0.06), transparent 70%),
    var(--surface);
}

.staff-admin-card h3 {
  margin: 0;
}

.staff-admin-card .ghost-button {
  justify-self: start;
}

.staff-open-card--clear .staff-open-status {
  background: var(--success-soft);
  color: var(--success);
}

.staff-open-status {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 12px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 1.24rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}


.staff-open-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.42rem;
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}

.staff-open-list--priority {
  grid-template-columns: 1fr;
}

.staff-open-list--secondary {
  grid-template-columns: 1fr;
  max-height: 12rem;
  overflow-y: auto;
  padding: 0.1rem 0.18rem 0.1rem 0;
}

.staff-open-group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.62rem;
  align-items: center;
  min-width: 0;
  min-height: 3.75rem;
  padding: 0.58rem 0.64rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warning);
  border-radius: 10px;
  background: var(--surface-soft);
}

.staff-open-group-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 1.05rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.staff-open-group-main {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.staff-open-group-main strong {
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.staff-open-group-main > span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.15;
}

.staff-open-day-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
  padding-top: 0.06rem;
}

.staff-open-day-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 1.28rem;
  padding: 0.14rem 0.42rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--ink-secondary);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.staff-open-group-action {
  justify-self: end;
  min-width: 5.9rem;
  white-space: nowrap;
}

.staff-open-overflow {
  display: grid;
  gap: 0.46rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  overflow: hidden;
}

.staff-open-overflow > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.55rem;
  padding: 0.5rem 0.62rem;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  list-style: none;
}

.staff-open-overflow > summary::-webkit-details-marker {
  display: none;
}

.staff-open-overflow > summary::after {
  content: "expand_more";
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: "Material Symbols Rounded";
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.staff-open-overflow[open] > summary::after {
  transform: rotate(180deg);
  background: var(--warning-soft);
  color: var(--warning);
}

.staff-open-overflow > summary strong {
  display: inline-grid;
  place-items: center;
  min-width: 1.65rem;
  min-height: 1.65rem;
  margin-left: auto;
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 0.78rem;
}

.staff-open-overflow:not([open]) > .staff-open-list {
  display: none;
}

.staff-open-overflow[open] > .staff-open-list {
  margin: 0 0.6rem 0.6rem;
}

.staff-open-slot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.52rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 0.56rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  border-left: 3px solid var(--warning);
  border-radius: 10px;
  background: var(--surface-soft);
  color: inherit;
  font: inherit;
  text-align: left;
}

.staff-coverage-details {
  padding: 0.76rem 0.86rem;
}

.staff-coverage-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}

.staff-coverage-details > summary::-webkit-details-marker {
  display: none;
}

.staff-coverage-details > summary h3 {
  margin: 0;
}

.staff-coverage-details > summary > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 1rem;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.staff-coverage-details[open] > summary > .material-symbols-outlined {
  transform: rotate(180deg);
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
}

.staff-coverage-details:not([open]) > .staff-function-grid {
  display: none;
}

.staff-coverage-details[open] > .staff-function-grid {
  margin-top: 0.66rem;
}

.staff-open-slot--action {
  cursor: pointer;
}

.staff-open-slot--action:hover,
.staff-open-slot--action:focus-visible {
  border-color: rgba(1, 188, 218, 0.34);
  border-left-color: var(--calendar-blue);
  background: var(--current-wash);
  outline: none;
}

.staff-open-slot--action:hover > .material-symbols-outlined,
.staff-open-slot--action:focus-visible > .material-symbols-outlined {
  color: var(--accent);
}

.staff-open-slot > .material-symbols-outlined {
  color: var(--warning);
  font-size: 1.02rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.staff-open-slot div {
  display: grid;
  gap: 0.04rem;
  min-width: 0;
}

.staff-open-slot strong {
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.14;
  overflow-wrap: anywhere;
}

.staff-open-slot span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
}

.staff-open-more {
  display: inline-flex;
  width: fit-content;
  padding: 0.34rem 0.48rem;
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.staff-open-action {
  justify-self: flex-start;
}

.staff-empty-state {
  margin: 0;
}

.staff-function-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.46rem;
}

.staff-function-card {
  display: grid;
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  overflow: hidden;
}

.staff-function-card--attention {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background:
    linear-gradient(90deg, var(--warning-soft), transparent 62%),
    var(--surface-soft);
}

.staff-function-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
  min-height: 3.45rem;
  padding: 0.54rem 0.6rem;
  cursor: pointer;
  list-style: none;
}

.staff-function-summary::-webkit-details-marker {
  display: none;
}

.staff-function-card[open] .staff-function-summary {
  border-bottom: 1px solid var(--line);
}

.staff-function-summary > .material-symbols-outlined:not(.staff-function-expand) {
  display: grid;
  place-items: center;
  width: 1.78rem;
  height: 1.78rem;
  border-radius: 10px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.staff-function-main {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.staff-function-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.42rem;
  align-items: center;
  min-width: 0;
}

.staff-function-title-row span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.staff-function-open-days {
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem;
}

.staff-function-open-days span {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.16rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.staff-function-open-days .staff-function-ready-note {
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background: var(--success-soft);
  color: var(--success);
  text-transform: none;
}

.staff-function-progress {
  width: min(360px, 100%);
  height: 0.3rem;
  border-radius: 999px;
  background: var(--surface-strong);
  overflow: hidden;
}

.staff-function-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--success), var(--calendar-blue));
}

.staff-function-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  justify-self: end;
  min-height: 1.68rem;
  min-width: 5.4rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.staff-function-status .material-symbols-outlined {
  font-size: 0.92rem;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.staff-function-status--attention {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background: var(--warning-soft);
  color: var(--warning);
}

.staff-function-status--ready {
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background: var(--success-soft);
  color: var(--success);
}

.staff-function-expand {
  display: grid;
  place-items: center;
  width: 1.62rem;
  height: 1.62rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 1rem;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.staff-function-card[open] .staff-function-expand {
  transform: rotate(180deg);
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
}

.staff-function-detail {
  display: grid;
  gap: 0.46rem;
  min-width: 0;
  padding: 0.6rem 0.68rem 0;
}

.staff-function-detail p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.staff-function-card > .staff-day-grid {
  padding: 0.68rem;
}

.staff-function-card:not([open]) > .staff-function-detail {
  display: none;
}

.staff-function-card:not([open]) > .staff-day-grid {
  display: none;
}

.staff-function-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: start;
  min-width: 0;
}

.staff-function-card-head > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 1.08rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.staff-function-card-head div {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.staff-function-card-head > .badge {
  justify-self: end;
  white-space: nowrap;
}

.staff-function-card-head > .badge.coverage-alert {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background: var(--warning-soft);
  color: var(--warning);
}

.staff-function-card h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.staff-function-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.28;
}

.staff-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 0.36rem;
}

.staff-day-card {
  display: grid;
  align-content: start;
  gap: 0.12rem;
  min-height: 4rem;
  min-width: 0;
  padding: 0.46rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
}

.staff-day-card > span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.staff-day-card strong {
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.12;
}

.staff-day-card small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.staff-day-card--open {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background: var(--warning-soft);
}

.staff-day-card--open strong {
  color: var(--warning);
}

.staff-matrix-card summary,
.staff-editor-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.5rem;
  cursor: pointer;
  list-style: none;
}

.staff-side-rail .staff-matrix-card,
.staff-side-rail .staff-editor-card {
  padding: 0.72rem 0.86rem;
}

.staff-side-rail .staff-matrix-card summary,
.staff-side-rail .staff-editor-card summary {
  min-height: 3.05rem;
}

.staff-matrix-card summary::-webkit-details-marker,
.staff-editor-card summary::-webkit-details-marker {
  display: none;
}

.staff-matrix-card summary h3,
.staff-editor-card summary h3 {
  margin: 0;
}

.staff-matrix-card summary > .material-symbols-outlined,
.staff-editor-card summary > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 1rem;
  transition: transform 180ms ease;
}

.staff-matrix-card[open] summary > .material-symbols-outlined,
.staff-editor-card[open] summary > .material-symbols-outlined {
  transform: rotate(180deg);
}

.staff-editor-card:not([open]) > form {
  display: none;
}

.staff-matrix-card:not([open]) > .availability-shell {
  display: none;
}

.availability-shell {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  padding: 0.42rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.availability-board {
  min-width: 720px;
  display: grid;
  gap: 0.3rem;
}

.availability-board-head,
.availability-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.05fr) repeat(7, minmax(74px, 1fr));
  gap: 0.3rem;
  align-items: stretch;
}

.availability-board-head span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.availability-function,
.availability-cell {
  min-height: 48px;
  padding: 0.44rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-strong);
}

.availability-function {
  display: grid;
  align-content: start;
  gap: 0.35rem;
}

.availability-function span {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.availability-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  align-content: flex-start;
}

.staff-chip,
.empty-slot {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 0.18rem 0.42rem;
  font-size: 0.68rem;
}

.staff-chip {
  display: inline-grid;
  gap: 0.04rem;
  background: rgba(1, 188, 218, 0.14);
  color: var(--ink);
}

.staff-chip strong {
  font-size: 0.68rem;
  line-height: 1.05;
}

.staff-chip small {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.05;
}

.empty-slot {
  background: var(--surface-soft);
  color: var(--muted);
}

.calendar-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
  gap: 0.72rem;
  align-items: start;
}

.calendar-workspace--empty {
  grid-template-columns: minmax(0, 1fr);
}

.calendar-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
  grid-template-areas: "main next";
  gap: 0.72rem;
  align-items: stretch;
  grid-column: 1 / -1;
  padding: 0.86rem;
}

.calendar-command-card--empty {
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 0.6fr);
}

.calendar-command-main {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.calendar-command-main h3 {
  margin: 0;
}

.calendar-command-main .command-subcopy {
  display: block;
  margin-top: 0.16rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.calendar-command-action {
  display: flex;
  justify-content: flex-end;
}

.calendar-next-panel {
  grid-area: next;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.56rem;
  align-items: center;
  min-width: 0;
  padding: 0.58rem 0.66rem;
  border-left: 3px solid var(--calendar-blue);
  border-radius: 10px;
  background: var(--surface-soft);
}

.calendar-next-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: rgba(1, 188, 218, 0.12);
  color: var(--accent);
  font-size: 1.12rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.calendar-next-panel div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.calendar-next-panel h4 {
  margin: 0;
  color: var(--ink);
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.calendar-next-panel span:not(.material-symbols-outlined) {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

.calendar-next-panel .ghost-button {
  align-self: center;
  justify-self: end;
}

.calendar-flow-steps {
  grid-area: flow;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

.calendar-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  align-items: center;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.calendar-flow-step.is-active {
  border-color: rgba(1, 188, 218, 0.28);
  background: var(--current-wash);
}

.calendar-flow-step > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.calendar-flow-step.is-active > .material-symbols-outlined {
  background: rgba(1, 188, 218, 0.14);
  color: var(--accent);
}

.calendar-flow-step div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.calendar-flow-step small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-flow-step strong {
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.calendar-card .calendar-shell {
  max-width: 100%;
}

.calendar-month-card {
  align-self: start;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
}

.calendar-weekdays span {
  padding: 0 0.42rem;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.calendar-day {
  min-height: 56px;
  padding: 0.42rem 0.5rem;
  border-radius: 9px;
  border: none;
  background: var(--well);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
}

.calendar-day:hover,
.calendar-day--active {
  background: var(--current-wash-strong);
}

.calendar-day--muted {
  opacity: 0.55;
}

.calendar-day-number {
  font-size: 0.98rem;
  font-weight: 700;
}

.calendar-day-marker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.calendar-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--current);
  box-shadow: none;
}

.calendar-count {
  color: var(--muted);
  font-size: 0.72rem;
}

.calendar-agenda-card {
  align-self: start;
}

.calendar-agenda-list {
  display: grid;
  gap: 0.5rem;
}

.calendar-agenda-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.62rem;
  align-items: stretch;
  min-height: 3.7rem;
  padding: 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
}

.calendar-agenda-row .ghost-button,
.calendar-agenda-row .event-card-affordance {
  align-self: center;
  justify-self: end;
  white-space: nowrap;
}

.calendar-agenda-date {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 3.35rem;
  min-height: 3rem;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  text-align: center;
}

.calendar-agenda-date span {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-agenda-date strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
}

.calendar-agenda-main {
  display: grid;
  align-content: center;
  gap: 0.18rem;
  min-width: 0;
}

.calendar-agenda-row strong {
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.calendar-agenda-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem 0.58rem;
}

.calendar-agenda-details span {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.calendar-agenda-details .material-symbols-outlined {
  color: var(--accent);
  font-size: 0.86rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.calendar-agenda-row span:not(.badge),
.calendar-agenda-details {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.venue-event-card .event-card-affordance,
.calendar-agenda-row .event-card-affordance {
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
}

.venue-event-card .event-card-affordance .material-symbols-outlined,
.calendar-agenda-row .event-card-affordance .material-symbols-outlined {
  color: currentColor;
  font-size: 0.92rem;
}

.compact-event-list {
  margin-top: 1rem;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.modal.hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 21, 0.45);
  backdrop-filter: blur(8px);
}

.modal-panel {
  position: relative;
  z-index: var(--z-layer);
  width: min(860px, 100%);
  max-height: calc(100vh - 3rem);
  overflow: auto;
  padding: 1rem;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.modal-panel--wide {
  width: min(1260px, 100%);
}

.modal-panel,
.tab-nav,
.table-shell,
.audit-log-table,
.availability-shell,
.staff-open-list,
.kanban-board-shell {
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}

@supports (overflow: overlay) {
  .modal-panel {
    overflow: overlay;
  }

  .tab-nav,
  .table-shell,
  .audit-log-table,
  .availability-shell,
.staff-open-list,
  .kanban-board-shell {
    overflow-x: overlay;
  }
}

.modal-panel::-webkit-scrollbar,
.app-shell .dashboard-grid > .tab-panel::-webkit-scrollbar,
.tab-nav::-webkit-scrollbar,
.table-shell::-webkit-scrollbar,
.audit-log-table::-webkit-scrollbar,
.availability-shell::-webkit-scrollbar,
.staff-open-list::-webkit-scrollbar,
.kanban-board-shell::-webkit-scrollbar {
  width: var(--scrollbar-overlap);
  height: var(--scrollbar-overlap);
}

.modal-panel::-webkit-scrollbar-track,
.app-shell .dashboard-grid > .tab-panel::-webkit-scrollbar-track,
.tab-nav::-webkit-scrollbar-track,
.table-shell::-webkit-scrollbar-track,
.audit-log-table::-webkit-scrollbar-track,
.availability-shell::-webkit-scrollbar-track,
.staff-open-list::-webkit-scrollbar-track,
.kanban-board-shell::-webkit-scrollbar-track {
  background: transparent;
}

.modal-panel::-webkit-scrollbar-thumb,
.app-shell .dashboard-grid > .tab-panel::-webkit-scrollbar-thumb,
.tab-nav::-webkit-scrollbar-thumb,
.table-shell::-webkit-scrollbar-thumb,
.audit-log-table::-webkit-scrollbar-thumb,
.availability-shell::-webkit-scrollbar-thumb,
.staff-open-list::-webkit-scrollbar-thumb,
.kanban-board-shell::-webkit-scrollbar-thumb {
  border: 0.18rem solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

.kanban-board-shell {
  --kanban-scrollbar-overlap: var(--scrollbar-overlap);
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: calc(var(--kanban-scrollbar-overlap) * -1);
  padding-bottom: var(--kanban-scrollbar-overlap);
  overscroll-behavior-inline: contain;
}

.kanban-board-shell::-webkit-scrollbar {
  height: 0.55rem;
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.68rem;
  align-items: stretch;
  min-width: 980px;
}

.kanban-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: var(--radius);
  background: var(--kanban-column-pending);
  border: 1px solid var(--line-soft);
  padding: 0.68rem;
  min-height: clamp(260px, 44vh, 560px);
}

.kanban-column[data-drop-status="in_progress"] {
  background: var(--kanban-column-progress);
}

.kanban-column[data-drop-status="completed"] {
  background: var(--kanban-column-completed);
}

.kanban-column--active {
  border-color: var(--current);
  outline: 2px solid var(--current);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--current-wash-strong);
}

.kanban-column--blocked {
  border-color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger-soft);
}

.kanban-column-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.58rem;
}

.kanban-column-head h4 {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.96rem;
}

.kanban-column-head h4::before {
  content: "";
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--warning);
}

.kanban-column[data-drop-status="in_progress"] .kanban-column-head h4::before {
  background: var(--current);
}

.kanban-column[data-drop-status="completed"] .kanban-column-head h4::before {
  background: var(--success);
}

.kanban-column-head span {
  display: inline-grid;
  place-items: center;
  min-width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid var(--line-soft);
  color: var(--ink-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}

.kanban-column-body {
  display: grid;
  align-content: start;
  gap: 0.45rem;
}

.kanban-group {
  display: grid;
  gap: 0.45rem;
}

.kanban-group-heading {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.15rem 0.1rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.kanban-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.52rem;
  align-items: center;
  min-height: 44px;
  padding: 0.52rem 0.62rem;
  border-radius: 10px;
  background: var(--kanban-card-bg);
  border: 1px solid var(--kanban-card-border);
  box-shadow: 0 1px 2px rgba(22, 40, 46, 0.05);
  cursor: pointer;
}

.kanban-card:hover {
  border-color: var(--current-border);
  box-shadow: var(--shadow);
}

.kanban-card-left,
.kanban-card-right {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.kanban-card-left {
  gap: 0.5rem;
}

.kanban-card-right {
  justify-self: end;
  gap: 0.36rem;
}

.kanban-card-title {
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.15;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.budget-status-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  box-shadow: none;
  cursor: help;
}

.budget-status-button:hover {
  background: var(--surface-soft);
  transform: none;
}

.budget-status-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--muted);
  font-family: "Material Symbols Rounded";
  font-size: 0.98rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
  line-height: 1;
  cursor: help;
  user-select: none;
}

.budget-status-icon--pending {
  color: var(--warning);
}

.budget-status-icon--approved {
  color: var(--success);
}

.budget-status-icon--denied {
  color: var(--danger);
}

.budget-status-icon--not-required {
  color: var(--muted);
}

.area-pill {
  display: inline-flex;
  align-items: center;
  max-width: 6.4rem;
  min-height: 1.32rem;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card-cost {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  justify-self: end;
  white-space: nowrap;
}

.kanban-card--draggable {
  cursor: grab;
}

.kanban-card [data-card-content] {
  cursor: text;
}

.kanban-card [data-card-content] {
  user-select: text;
}

.kanban-card .budget-status-icon {
  cursor: help;
}

.kanban-card--dragging {
  opacity: 0.25;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.kanban-drag-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-drag-preview);
  pointer-events: none;
  opacity: 0.98;
  cursor: grabbing;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(1, 188, 218, 0.18);
  transform-origin: center;
  will-change: transform;
}

.kanban-drag-preview [data-card-content] {
  cursor: grabbing;
  user-select: none;
}

.kanban-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.7rem;
}

.kanban-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.kanban-hint {
  color: var(--muted);
  font-size: 0.82rem;
}

.board-message {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: min(420px, calc(100vw - 2rem));
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow);
}

.board-message[hidden] {
  display: none;
}

.board-message[data-tone="error"] {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.board-message[data-tone="info"] {
  border-color: rgba(1, 188, 218, 0.42);
}

.board-message button {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.board-message button:hover {
  background: transparent;
  color: var(--ink);
  transform: none;
}

.small-button {
  padding: 0.55rem 0.85rem;
  font-size: 0.82rem;
}

@media (max-width: 900px) {
  .login-card,
  .topbar,
  .section-heading {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-row,
  .tab-nav,
  .task-form,
  .availability-form,
  .operations-workspace,
  .operations-hero,
  .operations-workflow-grid,
  .operations-support-grid,
  .operations-queue-row,
  .staff-workspace,
  .staff-command-card,
  .staff-flow-steps,
  .staff-function-grid,
  .task-summary-grid,
  .venue-workspace,
  .venue-command-card,
  .venue-grid,
  .venue-event-grid,
  .venue-flow-steps,
  .calendar-workspace,
  .calendar-command-card,
  .calendar-flow-steps,
  .budget-tier-grid,
  .facilities-command-card,
  .facilities-action-grid,
  .facilities-flow-steps,
  .purchase-command-card,
  .purchase-workspace,
  .purchase-flow-steps,
  .purchase-summary-grid,
  .objectives-command-card,
  .objectives-flow-steps,
  .objectives-plan-grid,
  .objectives-results-grid,
  .department-budget-list article,
  .approval-step-row,
  .approval-command-card,
  .approval-flow-steps,
  .approval-workspace,
  .approval-section-grid,
  .approval-context-grid,
  .approval-detail-row,
  .calendar-roster-grid,
  .admin-grid,
  .admin-two-panel,
  .board-toolbar,
  .kanban-board {
    grid-template-columns: 1fr;
  }

  .board-toolbar .board-controls {
    justify-content: flex-start;
  }

  .kanban-board {
    width: 100%;
    min-width: 0;
  }

  .kanban-column {
    min-height: 8.5rem;
  }

  .board-toolbar-title {
    width: 100%;
  }

  .board-controls label {
    flex: 1 1 150px;
    min-width: 0;
  }

  .operations-next-action {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .operations-next-action .ghost-button {
    grid-column: 1 / -1;
    justify-self: flex-start;
  }

  .workflow-entry-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .workflow-entry-status {
    grid-column: 2;
    justify-self: flex-start;
  }

  .workflow-entry-card .ghost-button {
    grid-column: 2;
    justify-self: flex-start;
  }

  .operations-queue-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.48rem;
    padding: 0.54rem 0.58rem;
  }

  .operations-queue-list {
    grid-template-columns: 1fr;
  }

  .operations-queue-main .eyebrow {
    display: none;
  }

  .operations-queue-row .ghost-button {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }

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

  .operations-metric-grid article {
    padding: 0.58rem 0.62rem;
  }

  .objectives-command-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .objectives-command-actions {
    justify-content: flex-start;
  }

  .objectives-flow-steps {
    display: none;
  }

  .objectives-command-card {
    grid-template-areas:
      "main"
      "next";
  }

  .objectives-command-card--setup {
    grid-template-areas:
      "main"
      "next"
      "sequence";
  }

  .objectives-start-main,
  .objectives-start-sequence {
    grid-template-columns: 1fr;
  }

  .objectives-start-main .small-button {
    justify-self: flex-start;
  }

  .calendar-command-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .calendar-command-card {
    grid-template-areas:
      "main"
      "next";
  }

  .calendar-next-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .calendar-next-panel .ghost-button {
    grid-column: 1 / -1;
    justify-self: flex-start;
  }

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

  .calendar-command-action {
    justify-content: flex-start;
  }

  .key-result-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .key-result-progress strong {
    text-align: left;
  }

  .staff-command-main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0;
  }

  .staff-command-card {
    grid-template-areas:
      "main"
      "next";
  }

  .staff-next-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .staff-next-panel .ghost-button {
    grid-column: 1 / -1;
    justify-self: flex-start;
  }

  .staff-side-rail {
    grid-template-columns: 1fr;
  }

  .staff-flow-steps {
    display: none;
  }

  .staff-open-list {
    max-height: 20rem;
  }

  .staff-open-list--priority,
  .staff-open-list--secondary {
    grid-template-columns: 1fr;
  }

  .staff-open-group {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .staff-open-group-action {
    grid-column: 2;
    justify-self: flex-start;
  }

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

  .venue-command-main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0;
  }

  .venue-command-card--empty .venue-command-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .venue-command-card {
    grid-template-areas:
      "main"
      "next";
  }

  .venue-next-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .venue-next-panel .ghost-button {
    grid-column: 1 / -1;
    justify-self: flex-start;
  }

  .venue-card,
  .venue-event-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .venue-card > .badge,
  .venue-event-meta {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .venue-event-meta {
    display: flex;
    flex-wrap: wrap;
    justify-items: start;
  }

  .calendar-command-main {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0;
  }

  .calendar-agenda-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .calendar-agenda-row > .badge {
    grid-column: 2;
    justify-self: start;
  }

  .calendar-detail-card-head,
  .event-staffing-row {
    grid-template-columns: 1fr;
  }

  .event-staffing-assignee {
    justify-self: start;
  }

  .facilities-command-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0;
  }

  .facilities-command-main .facilities-add-button {
    justify-self: flex-start;
    padding: 0.48rem 0.62rem;
  }

  .facilities-command-card {
    grid-template-areas:
      "main"
      "next";
  }

  .facilities-next-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

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

  .purchase-command-main {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .purchase-command-card {
    grid-template-areas:
      "main"
      "next"
      "stats";
  }

  .purchase-command-card--empty {
    grid-template-areas:
      "main"
      "next";
  }

  .purchase-command-tools {
    justify-content: flex-start;
  }

  .purchase-next-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .purchase-next-panel .ghost-button {
    grid-column: 2;
    justify-self: flex-start;
  }

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

  .purchase-command-strip > span:nth-child(odd) {
    border-left: 0;
  }

  .purchase-command-strip > span:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .purchase-side-rail {
    grid-template-columns: 1fr;
  }

  .purchase-empty-action-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .purchase-empty-action-card button {
    grid-column: 2;
    justify-self: flex-start;
  }

  .purchase-flow-steps {
    display: none;
  }

  .purchase-request-list-head {
    display: none;
  }

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

  .purchase-summary-grid.purchase-summary-strip article {
    padding: 0.48rem 0.42rem;
  }

  .purchase-summary-grid.purchase-summary-strip span {
    font-size: 0.62rem;
  }

  .purchase-summary-grid.purchase-summary-strip strong {
    font-size: 0.85rem;
  }

  .purchase-route-preview {
    gap: 0.42rem;
    padding: 0.52rem;
  }

  .purchase-form-summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .purchase-form-summary > .badge {
    display: none;
  }

  .purchase-form-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.48rem;
  }

  .purchase-step-number {
    width: 1.45rem;
    height: 1.45rem;
  }

  .purchase-step-fields {
    grid-template-columns: 1fr;
  }

  .purchase-route-preview .empty-state {
    padding: 0.5rem 0.55rem;
  }

  .route-preview-summary,
  .route-step {
    padding: 0.42rem 0.48rem;
  }

  .approval-command-card {
    grid-template-areas:
      "main"
      "next";
  }

  .approval-next-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .approval-next-panel .approval-open-total {
    grid-column: 1 / -1;
    justify-self: flex-start;
  }

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

  .approval-open-total {
    min-width: 4rem;
    padding: 0.44rem 0.52rem;
  }

  .approval-open-total strong {
    font-size: 1rem;
  }

  .approval-record {
    padding: 0.72rem;
  }

  .approval-record-top,
  .approval-decision-panel,
  .approval-record--purchase .approval-decision-context,
  .approval-route-grid,
  .approval-detail-row--panels {
    grid-template-columns: 1fr;
  }

  .approval-decision-panel {
    justify-self: stretch;
  }

  .approval-cost-box {
    min-width: 0;
    text-align: left;
  }

  .approval-decision-panel .approval-actions {
    justify-content: flex-start;
  }

  .approval-budget-strip {
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
    gap: 0.28rem;
    padding: 0.45rem 0.5rem;
  }

  .approval-budget-strip--decision {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .approval-budget-strip span,
  .approval-budget-strip strong {
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .approval-item--decision .approval-detail-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .approval-item--decision .approval-detail-row .approval-context-details[open],
  .approval-item--decision .approval-detail-row .approval-note-details[open] {
    grid-column: 1 / -1;
  }

  .approval-item--decision .approval-detail-row summary {
    justify-self: stretch;
    justify-content: center;
  }

  .approval-item,
  .approval-item--decision,
  .approval-item--compact {
    grid-template-columns: 1fr;
  }

  .approval-item--decision .approval-context-details,
  .approval-item--decision .approval-note-details,
  .approval-item--decision .approval-actions,
  .approval-item--compact .approval-actions,
  .approval-item--compact .approval-detail-row,
  .approval-item--decision .approval-note-details ~ .approval-actions,
  .approval-item--decision .approval-context-details ~ .approval-actions {
    grid-column: 1;
    align-self: auto;
    justify-self: stretch;
  }

  .approval-actions {
    justify-content: flex-start;
  }

  .brand-logo {
    max-width: 100%;
  }

  .calendar-day {
    min-height: 50px;
    padding: 0.4rem;
  }

  .calendar-weekdays,
  .calendar-grid {
    gap: 0.25rem;
  }

  .calendar-weekdays span,
  .calendar-count {
    font-size: 0.68rem;
  }

  .dashboard-grid,
  .topbar {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .topbar {
    gap: 0.55rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  .brand-logo-chip {
    width: 164px;
    height: 62px;
  }

  .brand-lockup {
    width: 140px;
  }

  .dashboard-grid {
    width: calc(100% - 2rem);
    padding-top: 1rem;
  }

  .app-shell .dashboard-grid {
    width: 100%;
    padding: 1rem 1rem 1.5rem;
  }

  .app-shell .tab-nav {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .app-shell .tab-nav::-webkit-scrollbar,
  .topbar-actions::-webkit-scrollbar {
    display: none;
  }

  .app-shell .tab-button {
    flex: 0 0 auto;
    width: auto;
  }

  .admin-console-grid {
    grid-template-columns: 1fr;
  }

  .admin-console-hero {
    grid-template-columns: 1fr;
  }

  .admin-console-status {
    width: 100%;
  }

  .admin-context-strip {
    flex-direction: column;
    align-items: stretch;
    width: calc(100% - 2rem);
    margin-top: 0.65rem;
  }

  .admin-context-pills {
    justify-content: flex-start;
    width: 100%;
  }

  .admin-nav-shell {
    position: static;
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    padding: 0.52rem;
  }

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

  .admin-nav-divider {
    grid-column: 1 / -1;
  }

  .admin-settings-nav .tab-button {
    width: auto;
    min-width: 0;
  }

  .admin-settings-nav .tab-button > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .admin-shell .tab-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .license-summary-card {
    grid-template-columns: 1fr;
  }

  .license-card-actions {
    align-self: stretch;
    padding-top: 0.84rem;
    border-top: 1px solid var(--line);
  }

  .admin-shell .admin-two-panel,
  .admin-shell .approval-step-row {
    grid-template-columns: 1fr;
  }

  .admin-shell .app-settings-form,
  .admin-shell .license-settings-form {
    grid-template-columns: 1fr;
  }

  .license-detail-list div {
    grid-template-columns: 1fr;
    gap: 0.16rem;
  }

  .admin-shell .team-card {
    grid-template-columns: 1fr;
  }

  .admin-shell .team-card > button {
    grid-column: 1;
    grid-row: auto;
    justify-self: flex-start;
    margin-top: 0.35rem;
  }

  .admin-shell .department-card-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .purchase-form-card {
    position: static;
  }

  .approval-item--decision,
  .purchase-request-card > .purchase-request-head {
    grid-template-columns: 1fr;
  }

  .approval-item--decision .approval-note-field,
  .approval-item--decision .approval-note-field ~ .approval-actions {
    grid-column: 1;
  }

  .purchase-request-card > .purchase-request-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .purchase-request-summary-action {
    grid-column: 2;
    justify-self: flex-start;
  }

  .purchase-request-next-step,
  .purchase-request-pending-indicator,
  .purchase-request-amount {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .purchase-request-head-meta {
    display: grid !important;
    gap: 0.16rem !important;
  }

  .purchase-request-head-meta .approval-meta-pill,
  .purchase-request-requester,
  .purchase-request-date,
  .purchase-request-progress {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .purchase-request-date {
    display: none;
  }

  .purchase-request-head::after {
    grid-column: 3;
    grid-row: 1;
  }

  .purchase-request-head > .badge {
    display: none;
  }

  .purchase-decision-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .purchase-decision-item > span,
  .purchase-decision-item > div {
    grid-column: 1;
  }

  .purchase-decision-item p {
    grid-column: 1 / -1;
  }

  .topbar-brand {
    width: 100%;
    gap: 0.65rem;
  }

  .topbar-brand > div {
    min-width: 0;
  }

  .topbar h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .logo-box {
    width: 152px;
    height: 52px;
  }

  .topbar-actions {
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
  }

  .admin-shell .topbar-actions {
    flex-wrap: wrap;
    overflow: visible;
  }

  .topbar-actions > * {
    flex: 0 0 auto;
  }

  .admin-shell .topbar-actions > * {
    flex: 0 1 auto;
  }

  .topbar .ghost-button,
  .topbar .theme-toggle {
    min-height: 38px;
    padding: 0.48rem 0.72rem;
    font-size: 0.82rem;
  }

  .user-pill {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0.4rem 0.72rem;
  }

  .user-pill span {
    display: none;
  }

  .admin-shell .admin-mode-note {
    display: none;
  }

  .tab-button {
    width: auto;
  }

  .approval-popover {
    position: static;
    width: auto;
    margin: 0 1rem 1rem;
  }
}

/* ==========================================================
   v2 — operations desk: flat structure, hi-vis current
   Late-cascade layer: contrast replaces hairline borders.
   ========================================================== */

/* next-action strips: one bold pattern everywhere */
.operations-next-action,
.approval-next-panel,
.purchase-next-panel,
.objectives-next-panel,
.facilities-next-panel,
.venue-next-panel,
.staff-next-panel,
.calendar-next-panel {
  background: var(--current-wash);
  border: none;
  border-left: 4px solid var(--current);
  border-radius: 10px;
}

/* structural wells: tinted fills, no hairlines */
.operations-queue-row,
.operations-empty-action,
.approval-flow-step,
.staff-open-group,
.staff-open-overflow,
.objective-card,
.key-result-row,
.venue-event-card,
.calendar-agenda-row,
.purchase-request-card,
.staff-function-card,
.staff-day-card,
.venue-card {
  border-color: transparent;
  background: var(--well);
}

.operations-queue-row:hover {
  border-color: transparent;
  background: var(--current-wash);
}

.operations-queue-row--role {
  border-color: transparent;
  background: var(--current-wash);
}

.operations-empty-action {
  border-left: 4px solid var(--success-strong);
}

.staff-open-group {
  border-left: 3px solid var(--warning-strong);
}

/* cards float on paper by contrast alone */
.operations-recent-card {
  border: none;
  box-shadow: none;
}

/* kanban: flat wells, object cards */
.kanban-column {
  border: none;
}

.kanban-card {
  border: none;
  box-shadow: none;
}

.kanban-card:hover {
  border: none;
  box-shadow: 0 0 0 2px var(--current);
}

.kanban-column-head span {
  border: none;
  background: var(--surface);
}

[data-theme="dark"] .kanban-column-head span {
  background: var(--surface-strong);
}

/* status chips: solid ink-stamped */
.badge.status-pending,
.status-pending {
  background: var(--warning-strong);
  color: #ffffff;
}

.badge.status-in_progress,
.status-in_progress {
  background: var(--current);
  color: var(--current-ink);
}

.badge.status-completed,
.status-completed,
.status-approved {
  background: var(--success-strong);
  color: #ffffff;
}

.status-denied,
.priority-high {
  background: var(--danger-strong);
  color: #ffffff;
}

.priority-medium {
  background: var(--warning-strong);
  color: #ffffff;
}

.priority-low {
  background: var(--success-strong);
  color: #ffffff;
}

.status-purchased {
  background: var(--current-deep);
  color: #ffffff;
}

[data-theme="dark"] .badge.status-pending,
[data-theme="dark"] .status-pending,
[data-theme="dark"] .priority-medium,
[data-theme="dark"] .badge.status-completed,
[data-theme="dark"] .status-completed,
[data-theme="dark"] .status-approved,
[data-theme="dark"] .priority-low,
[data-theme="dark"] .status-denied,
[data-theme="dark"] .priority-high,
[data-theme="dark"] .status-purchased {
  color: #10181b;
}

.purchase-request-pending-indicator.status-pending {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background: var(--warning-soft);
  color: var(--warning);
}

[data-theme="dark"] .purchase-request-pending-indicator.status-pending {
  color: var(--warning);
}

.purchase-decision-item.status-approved,
.purchase-decision-item.status-denied,
.purchase-decision-item.status-pending,
.purchase-decision-item.status-queued,
.purchase-decision-item.status-not-needed {
  background: var(--surface-strong);
  color: var(--ink);
}

.purchase-decision-item.status-approved {
  border-color: color-mix(in srgb, var(--success) 32%, transparent);
  border-left: 4px solid var(--success);
}

.purchase-decision-item.status-denied {
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
  border-left: 4px solid var(--danger);
}

.purchase-decision-item.status-pending {
  border-color: color-mix(in srgb, var(--warning) 34%, transparent);
  border-left: 4px solid var(--warning);
}

.purchase-decision-item.status-queued {
  border-color: color-mix(in srgb, var(--current) 28%, transparent);
  border-left: 4px solid var(--current);
}

.purchase-decision-item.status-not-needed {
  border-color: var(--line);
  border-left: 4px solid var(--faint);
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface) 30%);
}

.purchase-decision-item.status-approved small,
.purchase-decision-item.status-denied small,
.purchase-decision-item.status-pending small,
.purchase-decision-item.status-queued small,
.purchase-decision-item.status-not-needed small {
  color: var(--muted);
}

.purchase-decision-item.status-approved strong,
.purchase-decision-item.status-denied strong,
.purchase-decision-item.status-pending strong,
.purchase-decision-item.status-queued strong {
  color: var(--ink);
}

.purchase-decision-item.status-approved > div strong {
  color: var(--success);
}

.purchase-decision-item.status-denied > div strong {
  color: var(--danger);
}

.purchase-decision-item.status-pending > div strong {
  color: var(--warning);
}

.purchase-decision-item.status-queued > div strong,
.purchase-decision-item.status-not-needed strong {
  color: var(--muted);
}

/* overlays are the only things that cast shadows */
.role-popover,
.approval-popover,
.budget-status-popover,
.purchase-status-popover,
.modal-panel {
  box-shadow: var(--shadow-raised);
}

/* calendar: month view is the primary surface, agenda is the rail */
.calendar-workspace {
  grid-template-columns: minmax(0, 1fr);
}

.calendar-spread {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.8fr);
  gap: 0.85rem;
  align-items: start;
}

@media (max-width: 1080px) {
  .calendar-spread {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* venue: two setup tickets side by side */
.venue-event-grid {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 0.6rem;
}

/* event date blocks become solid ink stamps */
.venue-event-date,
.calendar-agenda-date {
  background: var(--chrome);
  color: var(--chrome-text);
  border: none;
}

.venue-event-date span,
.venue-event-date small,
.calendar-agenda-date span {
  color: var(--chrome-muted);
}

.venue-event-date strong,
.calendar-agenda-date strong {
  color: var(--chrome-text);
}

.venue-event-card--next .venue-event-date {
  background: var(--current);
}

.venue-event-card--next .venue-event-date span,
.venue-event-card--next .venue-event-date small,
.venue-event-card--next .venue-event-date strong {
  color: var(--current-ink);
}

/* ==========================================================
   v3 — Clearwater layer
   Open content on mist; one cyan moment per view; the page
   head replaces every command card.
   ========================================================== */

/* page head: title + live state line + primary action, no box */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.35rem 0 0.9rem;
  border-bottom: 1px solid var(--line);
}

.page-head h2 {
  margin: 0;
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}

.page-state {
  margin: 0.2rem 0 0;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--muted);
}

.page-state strong {
  color: var(--ink-secondary);
  font-weight: 600;
}

.page-head-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* flat cards: white on mist, no borders, no resting shadows */
.login-card,
.card,
.operations-recent-card {
  border: none;
  box-shadow: none;
  border-radius: var(--radius-lg);
}

.card {
  padding: 1.2rem 1.3rem;
}

/* eyebrows are retired as a device; survivors become quiet labels */
.eyebrow {
  gap: 0;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--faint);
}

.eyebrow::before {
  display: none;
}

/* subcopy that survives reads as quiet prose, never bold */
.command-subcopy,
.section-subcopy {
  font-weight: 400 !important;
  color: var(--muted);
}

/* drop badges: circular count chips in pool colors */
.drop {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--current-wash);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* overlays own the only shadows */
.role-popover,
.approval-popover,
.budget-status-popover,
.purchase-status-popover,
.modal-panel {
  border: 1px solid var(--line);
  background: var(--surface-strong);
  box-shadow: var(--shadow-raised);
}

.popover-subhead {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

.login-mark {
  width: 52px;
  height: 52px;
}

.login-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(360px, 100%);
  min-height: 104px;
  padding: 1.1rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(12, 40, 48, 0.12);
}

.login-full-logo {
  display: block;
  width: 100%;
  max-width: 290px;
  height: auto;
  object-fit: contain;
}

.login-card .brand-block {
  align-self: stretch;
  justify-content: center;
}

.login-card h1 {
  margin: 0;
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}

.login-card h1 span {
  color: var(--muted);
  font-weight: 600;
}

/* page heads span workspace grids */
.venue-workspace > .page-head,
.calendar-workspace > .page-head,
.purchase-workspace > .page-head,
.staff-workspace > .page-head {
  grid-column: 1 / -1;
}

.venue-card .badge {
  width: fit-content;
  justify-self: end;
}

/* critique round: dark definition, alignment, consistency */
[data-theme="dark"] .card,
[data-theme="dark"] .operations-recent-card {
  border: 1px solid var(--line-soft);
}

[data-theme="dark"] .operations-queue-row {
  border: 1px solid var(--line-soft);
}

[data-theme="dark"] .operations-queue-row--role {
  border-color: var(--current-border);
}

[data-theme="dark"] .purchase-budget-impact--over {
  background: rgba(233, 134, 124, 0.12);
  border-color: rgba(233, 134, 124, 0.5);
}

.purchase-budget-details {
  background: var(--surface);
}

.page-head-actions {
  align-items: flex-end;
}

.page-head-actions .board-controls label {
  display: grid;
  gap: 0.3rem;
}

.venue-workspace > .venue-layout-card {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

.venue-workspace > .venue-events-card {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}

.venue-workspace--empty > .venue-layout-card {
  grid-column: 1 / -1;
}

.venue-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

.purchase-form-card {
  padding: 0.4rem 1.3rem;
}

.purchase-form-card[open] {
  padding-bottom: 1.25rem;
}

.purchase-request-modal-panel {
  width: min(760px, 100%);
}

.purchase-request-modal-panel .section-heading {
  margin-bottom: 0.85rem;
}

.purchase-request-modal-panel .purchase-request-form {
  gap: 0.72rem;
}

.purchase-request-modal-panel .purchase-route-preview {
  background: var(--well);
}

.purchase-queue-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 80%, var(--current-wash) 20%), var(--surface-soft) 9rem),
    var(--surface-soft);
}

[data-theme="dark"] .purchase-queue-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, var(--current-wash) 18%), var(--surface) 9rem),
    var(--surface);
}

.purchase-request-card {
  border: 1px solid var(--line);
  background: var(--surface-strong);
}

[data-theme="dark"] .purchase-request-card {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface-strong) 88%, #ffffff 12%);
}

.purchase-status-section--waiting .purchase-request-card {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--warning-soft) 38%, transparent), transparent 44%),
    var(--surface-strong);
}

[data-theme="dark"] .purchase-status-section--waiting .purchase-request-card {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--warning-soft) 48%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface-strong) 88%, #ffffff 12%);
}

.purchase-request-pending-indicator {
  cursor: help;
}

.purchase-form-summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.purchase-budget-details > summary {
  min-height: 52px;
}

.deny-button {
  border-width: 1.5px;
}

.budget-negative {
  color: var(--danger);
}

input[type="checkbox"] {
  accent-color: var(--current);
}

.objectives-empty-state {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  padding: 0.4rem 0 0.8rem;
}

.objectives-empty-state h3 {
  margin: 0;
  font-family: "Geist", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.15rem;
}

.objectives-empty-state p {
  margin: 0;
  max-width: 46ch;
}

/* Shiloh brand lockup */
.login-tenant {
  margin: -0.6rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
}

.field-hint {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
}

/* approvals: segmented queues + fixed 3-across decision cards */
.seg-tabs {
  display: inline-flex;
  gap: 0.25rem;
  width: fit-content;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--well);
}

.seg-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1.05rem;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.89rem;
  font-weight: 600;
}

.seg-tab:hover {
  background: transparent;
  color: var(--ink);
}

.seg-tab.is-active {
  background: var(--surface);
  color: var(--ink);
}

[data-theme="dark"] .seg-tab {
  color: var(--ink-secondary);
}

[data-theme="dark"] .seg-tab:hover {
  color: var(--ink);
}

[data-theme="dark"] .seg-tab.is-active {
  background: var(--surface-strong);
  color: var(--ink);
}

.seg-tab .drop {
  min-width: 1.35rem;
  height: 1.35rem;
  font-size: 0.74rem;
}

.approval-pane {
  display: grid;
  gap: 0.9rem;
}

.approval-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  align-items: start;
}

.approval-grid > .empty-state {
  grid-column: 1 / -1;
}

.approval-grid .approval-record {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 1rem 1.1rem;
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
}

[data-theme="dark"] .approval-grid .approval-record {
  border: 1px solid var(--line-soft);
}

.approval-grid .approval-record-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
}

.approval-record-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding-top: 0.2rem;
}

.approval-grid .approval-cost-box {
  text-align: left;
}

.approval-grid .approval-actions {
  display: flex;
  gap: 0.45rem;
}

.emergency-approval-menu .approval-grid {
  padding-top: 0.6rem;
}

@media (max-width: 1180px) {
  .approval-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .approval-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.approval-pane[hidden] {
  display: none;
}

/* solid status chips always keep their stamped lettering */
span.badge.status-pending,
span.badge.priority-medium,
span.badge.status-completed,
span.badge.status-approved,
span.badge.priority-low,
span.badge.status-denied,
span.badge.priority-high {
  color: #ffffff;
}

span.badge.status-in_progress {
  color: var(--current-ink);
}

span.badge.status-purchased {
  color: #ffffff;
}

[data-theme="dark"] span.badge.status-pending,
[data-theme="dark"] span.badge.priority-medium,
[data-theme="dark"] span.badge.status-completed,
[data-theme="dark"] span.badge.status-approved,
[data-theme="dark"] span.badge.priority-low,
[data-theme="dark"] span.badge.status-denied,
[data-theme="dark"] span.badge.priority-high,
[data-theme="dark"] span.badge.status-purchased {
  color: #10181b;
}

/* ==========================================================
   v4 — operational polish
   Keeps Clearwater intact while adding depth, better feedback,
   named layers, and less uniform dashboard/admin composition.
   ========================================================== */

body {
  font-variant-numeric: tabular-nums;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--current-wash) 38%, transparent), transparent 17rem),
    var(--body-background);
  background-attachment: fixed;
}

[data-theme="dark"] body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--current-wash) 28%, transparent), transparent 18rem),
    var(--body-background);
}

h1,
h2,
h3,
h4,
p {
  text-wrap: pretty;
}

.page-head {
  padding: 0.55rem 0 1rem;
}

.page-head h2 {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  text-wrap: balance;
}

.page-state {
  max-width: 68ch;
  line-height: 1.45;
}

.topbar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--current-wash) 8%), var(--surface));
}

.topbar .theme-toggle,
.topbar .user-pill,
.tab-button,
.seg-tab,
.kanban-card,
.operations-queue-row,
.operations-mini-list article,
.team-card,
.event-card,
.venue-card,
.calendar-agenda-row,
.purchase-request-card {
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

button:hover:not(:disabled):not(.tab-button):not(.seg-tab):not(.calendar-day):not(.budget-status-button):not([data-dismiss-board-message]):not([data-dismiss-admin-message]),
.ghost-button:hover {
  transform: translateY(-1px);
}

.tab-button {
  min-height: 62px;
}

.tab-button.is-active {
  background: linear-gradient(180deg, transparent, var(--current-wash));
}

.tab-button.is-active::after {
  height: 4px;
}

.seg-tabs {
  border-radius: 12px;
  padding: 0.28rem;
}

.seg-tab {
  border-radius: 9px;
}

.drop {
  border-radius: 9px 9px 9px 4px;
}

.badge {
  border-radius: 7px;
  padding: 0.25rem 0.52rem;
  letter-spacing: 0.01em;
}

.card,
.login-card,
.operations-recent-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 82%, var(--current-wash) 18%), var(--surface) 8rem),
    var(--surface);
}

[data-theme="dark"] .card,
[data-theme="dark"] .login-card,
[data-theme="dark"] .operations-recent-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 90%, var(--current-wash) 10%), var(--surface) 9rem),
    var(--surface);
}

.operations-queue-list {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 0.55rem;
}

.operations-queue-row {
  min-height: 4.25rem;
  padding: 0.72rem 0.78rem;
}

.operations-queue-row--role {
  grid-column: 1 / -1;
}

.operations-queue-main h3,
.operations-mini-list strong {
  font-weight: 700;
}

.operations-mini-list article {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--current-wash) 34%, transparent), transparent 54%),
    var(--surface-strong);
}

.operations-queue-row {
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.operations-queue-row--role {
  border-color: color-mix(in srgb, var(--warning) 32%, transparent);
  background: var(--surface-soft);
}

[data-theme="dark"] .operations-queue-row--role {
  border-color: color-mix(in srgb, var(--warning) 34%, transparent);
  background: var(--surface-soft);
}

.operations-queue-row:hover,
.operations-queue-row:focus-visible {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.operations-queue-row--role:hover,
.operations-queue-row--role:focus-visible {
  border-color: color-mix(in srgb, var(--warning) 42%, transparent);
  background:
    linear-gradient(90deg, var(--warning-soft), transparent 72%),
    var(--surface-soft);
}

.queue-open-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--control-border);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.operations-support-grid {
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
}

.operations-list-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: clamp(23rem, 37vh, 28rem);
  min-height: 23rem;
}

.operations-list-card .section-heading {
  margin-bottom: 0.75rem;
}

.operations-mini-list {
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  padding-right: 0.18rem;
  overscroll-behavior: contain;
}

.operations-mini-list .operations-mini-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 3.45rem;
  padding: 0.54rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--current-wash) 24%, transparent), transparent 56%),
    var(--surface-strong);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.operations-mini-list .operations-mini-item:hover,
.operations-mini-list .operations-mini-item:focus-visible {
  border-color: var(--current-border);
  background: var(--current-wash);
}

.operations-mini-list .badge,
.operations-mini-list time {
  align-self: center;
}

.operations-mini-list .badge {
  justify-self: start;
}

@media (min-width: 1280px) {
  .operations-support-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.92fr) minmax(0, 0.96fr);
  }

  .operations-support-grid > .card:nth-child(2) {
    margin-top: 0;
  }

  .operations-support-grid > .card:nth-child(3) {
    margin-top: 0;
  }
}

@media (max-width: 1180px) {
  .operations-queue-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .operations-queue-row--role {
    grid-column: auto;
  }
}

.admin-console-hero {
  min-height: 6.25rem;
  padding: 0.95rem 1rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--current-wash) 76%, transparent), transparent 40%),
    var(--admin-hero);
}

.admin-console-hero h2 {
  font-size: 1.7rem;
  font-weight: 700;
  text-wrap: balance;
}

.admin-nav-shell,
.admin-panel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, var(--current-wash) 12%), var(--surface) 10rem),
    var(--surface);
}

.admin-message[data-tone="success"] {
  border-color: color-mix(in srgb, var(--success) 36%, transparent);
  background:
    linear-gradient(90deg, var(--success-soft), transparent 74%),
    var(--surface);
}

.admin-message[data-tone="error"] {
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
  background:
    linear-gradient(90deg, var(--danger-soft), transparent 74%),
    var(--surface);
}

.admin-message[data-tone="success"] span {
  color: var(--success);
}

.admin-message[data-tone="error"] span {
  color: var(--danger);
}

.kanban-card--draggable:active,
.kanban-drag-preview {
  cursor: grabbing;
}

.kanban-card:hover {
  transform: translateY(-1px);
}

.kanban-card--dragging {
  transform: none;
}

.facilities-board-card {
  padding: 1.1rem;
}

.facilities-board-card .kanban-board-shell {
  margin-top: 1.1rem;
  margin-bottom: 0;
  padding-bottom: var(--kanban-scrollbar-overlap);
}

.facilities-board-card .board-message:not([hidden]) + .kanban-board-shell {
  margin-top: 0.75rem;
}

@media (max-width: 900px) {
  html.app-document,
  body.app-shell {
    width: 100%;
    max-width: 100vw;
  }

  .app-shell .topbar,
  .app-shell .dashboard-grid,
  .app-shell .dashboard-grid > .tab-panel {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
  }

  .app-shell .topbar {
    overflow-x: clip;
  }

  .app-shell .dashboard-grid {
    padding: 0;
  }

  .app-shell .dashboard-grid > .tab-panel {
    padding: 1rem;
  }

  .page-head h2 {
    font-size: 1.65rem;
  }

  .operations-queue-list,
  .operations-support-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .operations-queue-row--role {
    grid-column: auto;
  }

  .operations-support-grid > .card:nth-child(2),
  .operations-support-grid > .card:nth-child(3) {
    margin-top: 0;
  }

  .admin-console-hero {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}