/*
 * Insight PMS
 * Copyright (c) 2026 Insight Advisory SAGL. All rights reserved.
 * Proprietary internal software. See LICENSE and NOTICE.
 */

:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}

.notice-inspector-team {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.notice-inspector-team-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

#noticeInspectorAssignments {
  display: grid;
  gap: 8px;
}

.notice-inspector-assignment {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(120px, 0.45fr) minmax(220px, 1fr);
  gap: 10px;
  align-items: end;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.notice-inspector-assignment.is-primary {
  border-color: var(--cyan);
}

.notice-inspector-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
}

.notice-inspector-toggle span {
  display: grid;
  gap: 2px;
}

@media (max-width: 820px) {
  .notice-inspector-team-heading,
  .notice-inspector-assignment {
    grid-template-columns: 1fr;
  }

  .notice-inspector-team-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: #08111a;
}

button,
input,
select {
  font: inherit;
}

select,
option {
  color-scheme: dark;
}

option {
  color: #edf7ff;
  background: #101d2b;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.app-shell {
  --bg: #08131d;
  --bg-strong: #050b12;
  --surface: rgba(18, 32, 46, 0.86);
  --surface-soft: rgba(20, 39, 55, 0.68);
  --surface-hover: rgba(30, 53, 70, 0.9);
  --line: rgba(154, 183, 208, 0.16);
  --line-strong: rgba(74, 200, 216, 0.34);
  --text: #eef6fb;
  --muted: #a7b8c9;
  --faint: #7c90a2;
  --cyan: #37c8d6;
  --blue: #5d9df2;
  --green: #45d39b;
  --amber: #f7bf3f;
  --red: #ff6b61;
  --violet: #9a72ff;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  color: var(--text);
  background:
    radial-gradient(circle at 42% -12%, rgba(55, 200, 214, 0.08), transparent 34rem),
    linear-gradient(135deg, rgba(69, 211, 155, 0.045), transparent 34rem),
    var(--bg);
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 78px minmax(0, 1fr);
}

.app-shell.sidebar-collapsed .sidebar {
  display: flex;
  align-items: center;
  padding-inline: 12px;
  overflow: hidden;
}

.app-shell[data-theme="light"] {
  --bg: #f4f7fb;
  --bg-strong: #e7eef6;
  --surface: #ffffff;
  --surface-soft: #f1f7fc;
  --surface-hover: rgba(231, 242, 248, 0.98);
  --line: rgba(44, 75, 105, 0.16);
  --line-strong: rgba(31, 134, 158, 0.38);
  --text: #0c1825;
  --muted: #53677c;
  --faint: #75879a;
  --shadow: 0 24px 70px rgba(34, 60, 85, 0.14);
  color-scheme: light;
  background:
    radial-gradient(circle at 40% -10%, rgba(46, 181, 206, 0.18), transparent 30rem),
    linear-gradient(135deg, rgba(66, 223, 156, 0.13), transparent 32rem),
    var(--bg);
}

.app-shell[data-theme="light"] select,
.app-shell[data-theme="light"] option {
  color-scheme: light;
}

.app-shell[data-theme="light"] option {
  color: #0c1825;
  background: #f7fbff;
}

.app-shell.auth-locked {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.auth-locked .sidebar,
.app-shell.auth-locked .topbar,
.app-shell.auth-locked .drawer {
  display: none !important;
}

.app-shell.auth-locked .workspace > :not(.login-view) {
  display: none !important;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 18px 18px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(5, 12, 22, 0.94), rgba(8, 18, 29, 0.78));
  backdrop-filter: blur(20px);
  z-index: 20;
}

.app-shell[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, 0.82);
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 2px 12px 22px;
  border-bottom: 1px solid var(--line);
}

.brand strong {
  display: block;
  font-size: 1.08rem;
}

.brand small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12rem;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: block;
  object-fit: contain;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: linear-gradient(140deg, rgba(66, 216, 236, 0.2), rgba(154, 114, 255, 0.14));
  box-shadow: 0 0 28px rgba(66, 216, 236, 0.22);
}

.app-shell.sidebar-collapsed .brand {
  width: 100%;
  justify-content: center;
  padding: 2px 0 22px;
}

.app-shell.sidebar-collapsed .brand > div {
  display: none;
}

.nav-list {
  display: grid;
  gap: 6px;
}

.nav-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  text-align: left;
}

.app-shell.sidebar-collapsed .nav-list {
  width: 100%;
}

.app-shell.sidebar-collapsed .nav-item {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0;
}

.app-shell.sidebar-collapsed .nav-item span:not(.nav-icon) {
  display: none;
}

.nav-item:hover,
.nav-item.active {
  color: var(--text);
  border-color: var(--line-strong);
  background: linear-gradient(90deg, rgba(66, 216, 236, 0.16), rgba(76, 156, 255, 0.08));
}

.nav-icon {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 7px;
  color: var(--cyan);
  background: rgba(66, 216, 236, 0.06);
}

.nav-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item.active .nav-icon {
  color: #57f3ff;
  background: rgba(66, 216, 236, 0.13);
  box-shadow: inset 0 0 0 1px rgba(66, 216, 236, 0.18), 0 0 18px rgba(66, 216, 236, 0.12);
}

.panel-kicker,
.eyebrow {
  color: var(--cyan);
  font-size: 0.74rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}

.main-area {
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  height: 78px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 12, 22, 0.74);
  backdrop-filter: blur(18px);
  z-index: 15;
}

.app-shell[data-theme="light"] .topbar {
  background: rgba(247, 250, 253, 0.76);
}

.mobile-menu {
  display: inline-grid;
  position: relative;
}

.mobile-menu .line-icon {
  color: transparent;
  font-size: 0;
}

.mobile-menu::before,
.mobile-menu::after,
.mobile-menu .line-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}

.mobile-menu::before {
  top: 17px;
}

.mobile-menu .line-icon::before {
  top: 50%;
  transform: translate(-50%, -50%);
}

.mobile-menu::after {
  bottom: 17px;
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 720px;
}

.search-box input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 78px 0 46px;
  color: var(--text);
  background: var(--surface-soft);
  outline: none;
}

.search-box input:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 4px rgba(66, 216, 236, 0.1);
}

.search-glyph {
  position: absolute;
  top: 15px;
  left: 17px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--muted);
  border-radius: 50%;
}

.search-glyph::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 2px;
  right: -6px;
  bottom: -3px;
  background: var(--muted);
  transform: rotate(45deg);
}

kbd {
  position: absolute;
  top: 13px;
  right: 13px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.74rem;
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: none;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.search-results.open {
  display: grid;
  gap: 4px;
}

.search-results button,
.search-results span {
  padding: 11px 12px;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.search-results button:hover {
  background: var(--surface-hover);
}

.top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-button {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-soft);
}

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

.bell-icon,
.gear-icon,
.theme-icon,
.chevron {
  width: 18px;
  height: 18px;
  display: inline-block;
  position: relative;
}

.bell-icon {
  border: 2px solid var(--muted);
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  border-bottom: 0;
}

.bell-icon::before,
.bell-icon::after {
  content: "";
  position: absolute;
  background: var(--muted);
}

.bell-icon::before {
  left: 2px;
  right: 2px;
  bottom: -5px;
  height: 2px;
}

.bell-icon::after {
  left: 6px;
  bottom: -9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.gear-icon {
  border: 2px solid var(--muted);
  border-radius: 50%;
}

.gear-icon::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--muted);
}

.theme-icon {
  border-radius: 50%;
  background: linear-gradient(90deg, var(--cyan) 0 50%, var(--amber) 50% 100%);
}

.chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
}

.badge {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #06111a;
  background: var(--cyan);
  font-size: 0.72rem;
  font-weight: 800;
}

.badge[hidden] {
  display: none;
}

.profile-wrap {
  position: relative;
}

.profile-button {
  min-width: 212px;
  height: 50px;
  display: grid;
  grid-template-columns: 38px 1fr 16px;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-soft);
  text-align: left;
}

.avatar {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #051017;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  font-weight: 800;
}

.profile-copy strong,
.profile-copy small {
  display: block;
}

.profile-copy small {
  color: var(--muted);
}

.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.profile-menu.open {
  display: grid;
}

.profile-switcher {
  display: grid;
  gap: 6px;
  padding: 8px 8px 10px;
  color: var(--muted);
}

.profile-switcher select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: var(--surface-soft);
}

.profile-menu button {
  padding: 11px 12px;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.profile-menu button:hover {
  background: var(--surface-hover);
}

.profile-menu .danger {
  color: var(--red);
}

.multi-select-dropdown {
  position: relative;
}

.multi-select-dropdown summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-soft);
  cursor: pointer;
  list-style: none;
}

.multi-select-dropdown summary::-webkit-details-marker {
  display: none;
}

.multi-select-dropdown summary::after {
  content: "v";
  color: var(--muted);
}

.multi-select-dropdown[open] summary {
  border-color: var(--line-strong);
  background: var(--surface-hover);
}

.multi-select-dropdown .role-checks {
  position: absolute;
  z-index: 45;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.workspace {
  padding: 28px;
}

.view-stack[hidden],
.login-view[hidden],
.projects-page[hidden],
.permissions-page[hidden],
.audit-page[hidden] {
  display: none;
}

.login-view {
  min-height: calc(100vh - 128px);
  display: grid;
  place-items: center;
}

.login-panel {
  width: min(560px, 100%);
  display: grid;
  gap: 18px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(63, 224, 205, 0.12), transparent 46%),
    var(--surface);
  box-shadow: var(--shadow);
}

.login-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.login-brand img {
  width: min(210px, 56%);
  height: auto;
  object-fit: contain;
}

.login-advisory-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.login-brand .login-advisory-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: contain;
}

.login-advisory-lockup strong {
  max-width: 150px;
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1.05;
}

.app-shell[data-theme="light"] .login-brand img {
  filter: brightness(0) saturate(100%) invert(16%) sepia(33%) saturate(947%) hue-rotate(129deg) brightness(91%) contrast(94%);
}

.login-brand span {
  padding: 8px 10px;
  border: 1px solid rgba(66, 216, 236, 0.28);
  border-radius: 8px;
  color: var(--cyan);
  background: rgba(66, 216, 236, 0.08);
  text-transform: uppercase;
  letter-spacing: 0.12rem;
  font-size: 0.72rem;
  white-space: nowrap;
}

.login-panel h1 {
  margin: 0;
  font-size: 2.4rem;
  line-height: 1;
}

.login-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.login-panel small {
  color: var(--muted);
}

.login-product-signature {
  display: block;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  text-align: center;
  font-size: 0.74rem;
}

.hero-strip {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.hero-strip h1 {
  margin: 8px 0 8px;
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: 0.96;
  max-width: 980px;
}

.hero-strip p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.dashboard-hero-actions {
  display: grid;
  grid-template-columns: minmax(240px, 320px);
  gap: 10px;
  justify-items: stretch;
}

.dashboard-project-select {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(66, 216, 236, 0.12), rgba(76, 156, 255, 0.08)),
    var(--surface);
}

.dashboard-project-select span,
.dashboard-project-select small {
  color: var(--muted);
}

.dashboard-project-select span {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-project-select select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}

.dashboard-project-select select option {
  color: #101522;
  background: #f7f9fc;
}

.live-pill,
.auto-chip,
.severity-chip,
.mini-trend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  white-space: nowrap;
}

.pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: none;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 11px rgba(66, 223, 156, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(66, 223, 156, 0);
  }
}

.module-overview {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.module-card,
.panel,
.drawer,
.toast {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
    var(--surface);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
}

.module-card {
  min-height: 144px;
  display: grid;
  align-content: space-between;
  padding: 16px;
  color: var(--text);
  font: inherit;
  text-align: left;
}

.module-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.module-card span,
.module-card small {
  color: var(--muted);
}

.module-card strong {
  font-size: 2.15rem;
}

.module-card em {
  font-style: normal;
  color: var(--accent);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.8fr);
  gap: 14px;
}

.panel {
  min-width: 0;
  padding: 20px;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.panel h2,
.drawer h2 {
  margin: 5px 0 0;
  font-size: 1.15rem;
}

.ghost-button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--cyan);
  background: transparent;
}

.ghost-button:hover {
  border-color: var(--cyan);
  background: rgba(66, 216, 236, 0.1);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 12px;
}

.kpi-card {
  min-height: 178px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.kpi-card span,
.kpi-card small,
.kpi-card em {
  color: var(--muted);
  font-style: normal;
}

.kpi-card strong {
  color: var(--accent);
  font-size: 2rem;
}

.metric-bar {
  width: 100%;
  height: 8px;
  margin-top: auto;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 62%, transparent);
}

.metric-bar i {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 58%, var(--green) 42%));
}

.alert-panel {
  grid-row: span 2;
}

.severity-chip.high {
  color: var(--red);
  border-color: rgba(255, 107, 97, 0.36);
}

.alert-list,
.task-list,
.vendor-list,
.notification-list {
  display: grid;
  gap: 10px;
}

.drawer-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compact-action {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.78rem;
}

.alert-item,
.task-item,
.vendor-item,
.notification-item {
  width: 100%;
  min-height: 70px;
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
}

.alert-item {
  grid-template-columns: 40px 1fr auto;
}

.alert-item:hover,
.task-item:hover,
.vendor-item:hover,
.notification-item:hover {
  border-color: var(--accent, var(--line-strong));
  background: var(--surface-hover);
}

.notification-empty {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}

.notification-empty strong {
  color: var(--text);
}

.alert-mark,
.priority,
.vendor-avatar {
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  font-weight: 800;
}

.alert-mark {
  width: 36px;
  height: 36px;
  color: var(--accent);
  border: 1px solid currentColor;
}

.alert-item small,
.task-item small,
.vendor-item small,
.notification-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.alert-item em,
.task-item em,
.vendor-item em {
  color: var(--accent);
  font-style: normal;
}

.po-workflow-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
}

.po-workflow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.po-workflow-header h2 {
  margin: 5px 0 0;
}

.po-workflow-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(118px, 1fr));
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 4px;
  scrollbar-width: thin;
}

.po-workflow-step {
  position: relative;
  min-height: 164px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 26px 16px 18px;
  animation: rise 480ms ease both;
  animation-delay: var(--delay);
}

.po-workflow-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 25%, transparent);
}

.po-workflow-step:first-child::before {
  border-radius: 999px 0 0 999px;
}

.po-workflow-step:last-child::before {
  border-radius: 0 999px 999px 0;
}

.po-workflow-step .node {
  width: 48px;
  height: 48px;
  margin-top: 12px;
  margin-bottom: 8px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 58%),
    var(--surface);
  box-shadow:
    inset 0 0 0 7px var(--surface),
    0 0 30px color-mix(in srgb, var(--accent) 34%, transparent);
}

.po-workflow-step strong {
  font-size: 0.94rem;
  line-height: 1.18;
  word-break: normal;
  overflow-wrap: normal;
}

.po-workflow-step small,
.po-workflow-step em {
  color: var(--muted);
  font-style: normal;
}

.workflow-percent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  margin-top: 2px;
}

.workflow-percent i {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--accent) var(--value), rgba(255, 255, 255, 0.1) var(--value));
}

.workflow-percent small {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 800;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.node {
  width: 42px;
  height: 42px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 35%, transparent);
}

.tasks-panel,
.document-panel,
.vendor-panel {
  min-height: 320px;
}

.task-item {
  grid-template-columns: 45px 1fr auto;
}

.priority {
  width: 36px;
  height: 36px;
  color: #06111a;
}

.priority.p1 {
  background: var(--red);
}

.priority.p2 {
  background: var(--amber);
}

.pipeline-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.pipeline-stage {
  min-height: 138px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(66, 216, 236, 0.08), transparent),
    rgba(255, 255, 255, 0.035);
}

.pipeline-stage span,
.pipeline-stage small {
  color: var(--muted);
}

.pipeline-stage strong {
  display: block;
  margin: 16px 0 5px;
  font-size: 2.25rem;
}

.vendor-item {
  grid-template-columns: 42px 1fr 64px;
}

.vendor-avatar {
  width: 38px;
  height: 38px;
  color: #06111a;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
}

.ring {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(var(--surface) 55%, transparent 57%),
    conic-gradient(var(--green) var(--ring), rgba(130, 157, 184, 0.18) 0);
  font-size: 0.82rem;
  font-weight: 800;
}

.vendor-item em {
  grid-column: 2 / -1;
  justify-self: start;
  font-size: 0.84rem;
}

.drawer {
  position: fixed;
  top: 88px;
  right: 22px;
  width: min(420px, calc(100vw - 44px));
  max-height: calc(100vh - 110px);
  display: none;
  padding: 18px;
  overflow: auto;
  z-index: 80;
  box-shadow: var(--shadow);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    color-mix(in srgb, var(--surface) 94%, #020812 6%);
  backdrop-filter: blur(18px);
}

.drawer.open {
  display: block;
}

.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.notification-item {
  grid-template-columns: 16px 1fr;
  text-align: left;
  cursor: pointer;
}

.notification-item strong {
  color: var(--text);
  line-height: 1.35;
}

.notification-item.tone-critical {
  border-color: rgba(255, 107, 97, 0.36);
}

.notification-item.tone-warning {
  border-color: rgba(255, 205, 75, 0.32);
}

.preference-stack {
  display: grid;
  gap: 12px;
}

.preference-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.preference-row strong,
.preference-row small {
  display: block;
}

.preference-row small {
  margin-top: 4px;
  color: var(--muted);
}

input[type="checkbox"] {
  width: 44px;
  height: 24px;
  accent-color: var(--cyan);
}

select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--text);
  background: var(--surface-soft);
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  min-width: 260px;
  max-width: 420px;
  padding: 14px 16px;
  color: var(--text);
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: 180ms ease;
  z-index: 140;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.tone-cyan {
  --accent: var(--cyan);
}

.tone-blue {
  --accent: var(--blue);
}

.tone-green {
  --accent: var(--green);
}

.tone-amber {
  --accent: var(--amber);
}

.tone-red {
  --accent: var(--red);
}

.tone-violet {
  --accent: var(--violet);
}

.tone-neutral {
  --accent: var(--faint);
}

.positive {
  color: var(--green);
}

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

.projects-page {
  display: grid;
  gap: 14px;
}

.project-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  gap: 18px;
  align-items: end;
  margin-bottom: 4px;
}

.project-hero h1 {
  margin: 8px 0;
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  line-height: 0.98;
}

.project-hero p {
  max-width: 900px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.project-hero-action {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.project-hero-action .primary-action {
  width: min(100%, 240px);
  min-height: 48px;
}

.po-detail-hero h1 {
  font-size: clamp(2.1rem, 4vw, 3.8rem);
}

.po-detail-actions {
  gap: 10px;
}

.po-detail-actions strong {
  color: var(--text);
}

.project-selector-card {
  min-height: 126px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(76, 156, 255, 0.14), rgba(66, 223, 156, 0.08)),
    var(--surface);
}

.project-selector-card label,
.project-form label,
.po-form label {
  display: grid;
  gap: 7px;
}

.project-selector-card span,
.project-form span,
.po-form span,
.certification-picker > span {
  color: var(--muted);
  font-size: 0.82rem;
}

.project-selector-card select,
.project-form input,
.project-form select,
.po-form input,
.po-form select,
.po-form textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}

.project-selector-card select option,
.project-form select option,
.po-form select option,
.inspection-form select option,
.ncr-filter-bar select option {
  color: #101522;
  background: #f7f9fc;
}

.po-form textarea {
  min-height: 96px;
  padding: 11px 12px;
  resize: vertical;
}

.project-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
}

.project-stat {
  width: 100%;
  min-height: 132px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent),
    rgba(255, 255, 255, 0.035);
  color: var(--text);
  text-align: left;
}

button.project-stat {
  cursor: pointer;
}

button.project-stat:hover,
button.project-stat:focus-visible,
.project-stat.is-active {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent),
    color-mix(in srgb, var(--surface-soft) 82%, var(--accent) 18%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent), 0 16px 34px rgba(0, 0, 0, 0.18);
  outline: none;
}

.project-stat.is-active {
  transform: translateY(-1px);
}

.project-stat span,
.project-stat small,
.project-selector-card small,
.project-entity-map small,
.project-boundary-note small,
.po-card small {
  color: var(--muted);
}

.project-stat strong {
  color: var(--accent);
  font-size: 2rem;
}

.project-layout,
.project-po-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(560px, 1.18fr);
  gap: 14px;
  align-items: start;
}

.project-po-layout {
  grid-template-columns: minmax(360px, 0.7fr) minmax(620px, 1.3fr);
}

.project-form,
.po-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.certification-picker,
.po-textarea-field,
.project-form button,
.po-form button {
  grid-column: 1 / -1;
}

.certification-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.certification-picker > span {
  grid-column: 1 / -1;
  min-height: 22px;
  display: flex;
  align-items: center;
  font-weight: 700;
}

.certification-picker label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.certification-picker input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cyan);
}

.certification-picker label span {
  min-width: 0;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.25;
}

.inspector-certification-picker,
.inspector-discipline-picker {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.inspector-profile-section {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.inspector-profile-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.inspector-profile-section summary::-webkit-details-marker {
  display: none;
}

.inspector-profile-section summary::after {
  content: ">";
  color: var(--cyan);
  transition: transform 0.18s ease;
}

.inspector-profile-section[open] summary::after {
  transform: rotate(90deg);
}

.inspector-profile-section summary span,
.inspector-profile-section summary small {
  display: block;
}

.inspector-profile-section summary span {
  font-weight: 800;
}

.inspector-profile-section summary small {
  color: var(--muted);
}

.inspector-profile-section .inspector-certification-picker,
.inspector-profile-section .inspector-discipline-picker,
.inspector-profile-section .inspector-cert-grid,
.inspector-profile-section .inspector-documents-grid {
  margin: 0 14px 14px;
}

.inspector-documents-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.inspector-certification-picker > span {
  font-weight: 700;
  color: var(--text);
}

.inspector-cert-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inspector-cert-tabs button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(9, 25, 39, 0.72);
  cursor: pointer;
}

.inspector-cert-tabs button.active {
  border-color: rgba(66, 216, 236, 0.72);
  color: var(--text);
  background: rgba(66, 216, 236, 0.15);
}

.inspector-cert-panel {
  display: none;
  gap: 10px;
}

.inspector-cert-panel.active {
  display: grid;
}

.inspector-cert-panel small {
  color: var(--muted);
}

.inspector-cert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 8px;
}

.inspector-cert-grid label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.inspector-cert-grid input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--cyan);
}

.inspector-cert-grid span {
  min-width: 0;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.28;
}

.project-code {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(66, 216, 236, 0.32);
  border-radius: 8px;
  color: var(--cyan);
  background: rgba(66, 216, 236, 0.08);
}

.project-entity-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
}

.project-entity-map div,
.project-boundary-note {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.project-entity-map span {
  color: var(--accent, var(--cyan));
  font-weight: 800;
}

.project-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.project-meta-grid div,
.project-boundary-note {
  margin-top: 12px;
}

.project-meta-grid div {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.project-meta-grid span,
.project-meta-grid small {
  color: var(--muted);
}

.project-meta-grid strong {
  color: var(--text);
}

.project-directory-panel {
  display: grid;
  gap: 14px;
}

.project-directory-header {
  align-items: end;
}

.project-filter-bar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(160px, 0.42fr);
  gap: 10px;
  min-width: min(560px, 100%);
}

.project-filter-bar input,
.project-filter-bar select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}

.project-filter-bar select option {
  color: #101522;
  background: #f7f9fc;
}

.project-directory-list {
  display: grid;
  gap: 10px;
}

.project-directory-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(320px, 1.15fr) minmax(220px, 0.78fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.project-directory-card.is-active {
  border-color: rgba(66, 216, 236, 0.35);
  background:
    linear-gradient(180deg, rgba(66, 216, 236, 0.08), transparent),
    rgba(255, 255, 255, 0.03);
}

.project-directory-card h3 {
  margin: 9px 0 5px;
  font-size: 1.08rem;
}

.project-directory-card small,
.project-directory-card dt {
  color: var(--muted);
}

.project-directory-card dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 8px;
  margin: 0;
}

.project-directory-card dt {
  font-size: 0.72rem;
  text-transform: uppercase;
}

.project-directory-card dd {
  margin: 3px 0 0;
  color: var(--text);
  font-weight: 700;
}

.project-directory-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.project-app-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-app-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.78rem;
}

.project-app-chip.is-enabled {
  border-color: rgba(66, 223, 156, 0.42);
  color: var(--green);
  background: rgba(66, 223, 156, 0.08);
}

.project-app-chip.is-disabled {
  opacity: 0.54;
  text-decoration: line-through;
}

.project-application-scope {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.project-application-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.project-application-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 106px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 14px;
}

.project-application-card input {
  margin-top: 3px;
}

.project-application-card strong,
.project-application-card small {
  display: block;
}

.project-application-card small {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.project-app-disabled-panel {
  margin-top: 18px;
}

.project-empty-state {
  display: grid;
  gap: 5px;
  min-height: 92px;
  align-content: center;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
}

.project-boundary-note {
  border-color: rgba(66, 223, 156, 0.26);
}

.po-list {
  display: grid;
  gap: 10px;
}

.po-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.po-card-heading,
.po-card-states,
.po-linked-data {
  display: grid;
  gap: 10px;
}

.po-card-heading {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.po-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.po-card-actions select {
  min-width: 170px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}

.po-card-actions select option {
  color: #101522;
  background: #f7f9fc;
}

.po-card-actions .ghost-button {
  min-height: 34px;
  padding: 0 10px;
}

.po-card-heading span {
  color: var(--cyan);
  font-weight: 800;
}

.po-card-heading mark {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  text-transform: uppercase;
  font-size: 0.72rem;
}

.po-card-states {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.po-revision-panel {
  display: grid;
  grid-template-columns: minmax(170px, 0.75fr) minmax(220px, 1fr) minmax(260px, 1.2fr) auto;
  gap: 10px;
  align-items: stretch;
  padding: 11px;
  border: 1px solid rgba(66, 223, 156, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(66, 223, 156, 0.08), transparent),
    rgba(255, 255, 255, 0.025);
}

.po-revision-panel.is-superseded {
  border-color: rgba(255, 184, 107, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 184, 107, 0.08), transparent),
    rgba(255, 255, 255, 0.02);
}

.po-revision-panel div {
  display: grid;
  gap: 5px;
}

.po-revision-panel span,
.po-revision-panel small {
  color: var(--muted);
}

.po-revision-panel mark {
  min-width: 132px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.revision-change-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.revision-change-list small {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}

.po-card-states span,
.po-linked-data div {
  display: grid;
  gap: 5px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.po-linked-data {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.po-attachments-panel {
  display: grid;
  gap: 12px;
}

.po-file-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.2fr);
  gap: 10px;
}

.po-file-grid > div {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.po-file-grid span {
  display: inline-grid;
  gap: 2px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(66, 216, 236, 0.25);
  border-radius: 8px;
  color: var(--text);
  background: rgba(66, 216, 236, 0.08);
}

.po-file-grid small {
  color: var(--muted);
}

.expediting-page {
  display: grid;
  gap: 14px;
}

.expediting-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 18px;
  align-items: end;
  margin-bottom: 4px;
}

.expediting-hero h1 {
  margin: 8px 0;
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  line-height: 0.98;
}

.expediting-hero p {
  max-width: 880px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.expediting-live-card {
  min-height: 132px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(247, 191, 63, 0.13), rgba(66, 216, 236, 0.09)),
    var(--surface);
}

.expediting-live-card label {
  display: grid;
  gap: 8px;
}

.expediting-live-card span,
.expediting-live-card small,
.expediting-row small,
.expediting-release-item small {
  color: var(--muted);
}

.expediting-live-card select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}

.expediting-live-card select option {
  color: #101522;
  background: #f7f9fc;
}

.expediting-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 14px;
  align-items: start;
}

.expediting-board {
  display: grid;
  gap: 8px;
}

.expediting-row {
  --accent: var(--cyan);
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(170px, 0.95fr) minmax(130px, 0.7fr) minmax(120px, 0.55fr) minmax(150px, 0.75fr);
  gap: 12px;
  align-items: center;
  min-height: 92px;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 38%),
    rgba(255, 255, 255, 0.03);
}

.expediting-row.tone-green {
  --accent: var(--green);
}

.expediting-row.tone-amber {
  --accent: var(--amber);
}

.expediting-row.tone-red {
  --accent: var(--red);
}

.expediting-head {
  min-height: auto;
  color: var(--faint);
  border-left-color: var(--line);
  background: transparent;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08rem;
}

.expediting-row strong,
.expediting-row small,
.expediting-release-item strong,
.expediting-release-item small {
  display: block;
}

.forecast-delay-summary.tone-green {
  color: var(--green);
}

.forecast-delay-summary.tone-amber {
  color: var(--amber);
}

.forecast-delay-summary.tone-red {
  color: var(--red);
}

.forecast-delay-summary.tone-muted {
  color: var(--muted);
}

.expediting-progress {
  display: block;
  width: 100%;
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.expediting-progress i {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--green));
}

.expediting-progress-breakdown {
  margin-top: 7px;
  line-height: 1.35;
}

.expediting-progress-components {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.expediting-progress-components > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.expediting-progress-components small {
  color: var(--muted);
}

.expediting-progress-components .tone-red strong {
  color: var(--red);
}

@media (max-width: 980px) {
  .expediting-progress-components {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.expediting-status {
  display: grid;
  gap: 9px;
  justify-items: start;
}

.expediting-status mark {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  border-radius: 8px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.expediting-release-list {
  display: grid;
  gap: 10px;
}

.expediting-release-item {
  --accent: var(--cyan);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.expediting-release-item.tone-green {
  --accent: var(--green);
}

.expediting-release-item.tone-amber {
  --accent: var(--amber);
}

.expediting-release-item.tone-red {
  --accent: var(--red);
}

.expediting-release-item.tone-violet {
  --accent: var(--violet);
}

.expediting-rule-list,
.expediting-line-list,
.expediting-signal-list,
.mpr-report-list {
  display: grid;
  gap: 10px;
}

.expediting-rule-list div,
.expediting-line-list div,
.expediting-signal,
.mpr-report-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.expediting-rule-list strong,
.expediting-rule-list small,
.expediting-line-list strong,
.expediting-line-list small,
.expediting-signal strong,
.expediting-signal small,
.mpr-report-card strong,
.mpr-report-card small {
  display: block;
}

.expediting-po-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.expediting-po-commandbar {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.expediting-po-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
}

.expediting-po-facts span {
  min-height: 64px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.expediting-po-facts small,
.expediting-action-tab small {
  color: var(--muted);
}

.expediting-po-facts strong,
.expediting-action-tab span,
.expediting-action-tab strong {
  color: var(--text);
}

.expediting-action-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(136px, 1fr));
  gap: 10px;
}

.expediting-action-tab {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-content: center;
  text-align: left;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-soft);
}

.expediting-action-tab small {
  grid-column: 1;
}

.expediting-action-tab strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  min-width: 34px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cyan) 38%, transparent);
  border-radius: 999px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
}

.expediting-action-tab:hover,
.expediting-action-tab:focus-visible,
.expediting-action-tab.is-active {
  border-color: var(--cyan);
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--cyan) 18%);
}

.expediting-action-tab.is-active span {
  color: var(--cyan);
}

.expediting-mpr-panel {
  grid-column: 1 / -1;
}

.expediting-suborder-panel {
  grid-column: 1 / -1;
}

.expediting-item-panel {
  grid-column: 1 / -1;
}

.expediting-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.expediting-scope-grid div {
  min-height: 92px;
  display: grid;
  align-content: space-between;
  gap: 6px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.expediting-scope-grid span,
.expediting-scope-grid small,
.mpr-report-card p {
  color: var(--muted);
}

.expediting-signal {
  --accent: var(--cyan);
  border-left: 3px solid var(--accent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
    rgba(255, 255, 255, 0.03);
}

.expediting-signal.tone-green {
  --accent: var(--green);
}

.expediting-signal.tone-amber {
  --accent: var(--amber);
}

.expediting-signal.tone-red {
  --accent: var(--red);
}

.expediting-signal strong {
  color: var(--accent);
}

.suborder-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.suborder-form label {
  display: grid;
  gap: 7px;
}

.suborder-form span {
  color: var(--muted);
  font-size: 0.82rem;
}

.suborder-form input,
.suborder-form select,
.suborder-row input,
.suborder-row select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}

.suborder-notes-field {
  grid-column: span 2;
}

.suborder-form button {
  grid-column: 1 / -1;
}

.suborder-table {
  display: grid;
  gap: 8px;
}

.suborder-row {
  --accent: var(--cyan);
  display: grid;
  grid-template-columns: minmax(210px, 1.4fr) minmax(110px, 0.65fr) minmax(155px, 0.8fr) minmax(130px, 0.65fr) minmax(170px, 0.9fr) minmax(150px, 0.55fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 36%),
    rgba(255, 255, 255, 0.028);
}

.suborder-row strong,
.suborder-row small {
  display: block;
}

.suborder-row small {
  color: var(--muted);
}

.suborder-row.tone-green {
  --accent: var(--green);
}

.suborder-row.tone-amber {
  --accent: var(--amber);
}

.suborder-row.tone-red {
  --accent: var(--red);
}

.suborder-head {
  min-height: auto;
  color: var(--faint);
  background: transparent;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08rem;
}

.suborder-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.expediting-item-table {
  display: grid;
  gap: 8px;
}

.expediting-po-terms-strip {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(190px, 0.9fr) auto minmax(260px, 1.4fr);
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 88%, var(--cyan) 12%);
}

.expediting-po-terms-strip > span,
.expediting-po-terms-strip label {
  display: grid;
  gap: 5px;
}

.expediting-po-terms-strip small,
.expediting-po-terms-strip label span {
  color: var(--muted);
  font-size: 0.78rem;
}

.expediting-po-terms-strip strong {
  color: var(--text);
  font-size: 1rem;
}

.expediting-po-terms-strip select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
}

.expediting-item-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.15fr) minmax(180px, 1fr) minmax(160px, 0.86fr) minmax(150px, 0.78fr) minmax(120px, 0.58fr) minmax(115px, 0.54fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.expediting-item-head {
  min-height: auto;
  color: var(--faint);
  background: transparent;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08rem;
}

.expediting-item-row > span {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.expediting-item-row small {
  color: var(--muted);
  line-height: 1.35;
}

.expediting-item-identity input {
  font-weight: 800;
}

.expediting-item-row input,
.expediting-item-row select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}

.expediting-item-release-card {
  align-self: stretch;
  align-content: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
}

.expediting-irn-status {
  width: fit-content;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  background: transparent;
}

.expediting-irn-status.tone-green {
  color: var(--green);
}

.expediting-irn-status.tone-amber {
  color: var(--amber);
}

.expediting-readonly-date strong {
  font-size: 1rem;
  color: var(--text);
}

.expediting-item-actions {
  justify-items: stretch;
}

.expediting-item-actions .ghost-button {
  justify-content: center;
}

.mpr-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.mpr-form label {
  display: grid;
  gap: 7px;
}

.mpr-form span {
  color: var(--muted);
  font-size: 0.82rem;
}

.mpr-form input,
.mpr-form textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}

.project-form input[type="file"],
.po-form input[type="file"],
.mpr-form input[type="file"] {
  min-height: 40px;
  padding: 6px;
}

.project-form input[type="file"]::file-selector-button,
.po-form input[type="file"]::file-selector-button,
.mpr-form input[type="file"]::file-selector-button {
  min-height: 28px;
  margin-right: 10px;
  border: 1px solid rgba(66, 216, 236, 0.32);
  border-radius: 7px;
  color: var(--text);
  background: rgba(66, 216, 236, 0.12);
}

.mpr-form textarea {
  min-height: 94px;
  padding: 11px 12px;
  resize: vertical;
}

.mpr-textarea-field,
.mpr-file-field,
.mpr-item-forecast-field,
.mpr-form .contract-file-list,
.mpr-form button {
  grid-column: 1 / -1;
}

.mpr-item-forecast-field {
  display: grid;
  gap: 8px;
}

.mpr-item-table {
  display: grid;
  gap: 7px;
}

.mpr-item-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(120px, 0.45fr) minmax(160px, 0.7fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.mpr-item-row strong,
.mpr-item-row small {
  display: block;
}

.mpr-item-head {
  min-height: auto;
  color: var(--faint);
  background: transparent;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08rem;
}

.mpr-report-forecast-list {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.mpr-report-card {
  display: grid;
  gap: 8px;
}

.mpr-report-card span {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mpr-report-card span span {
  display: inline-grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(66, 216, 236, 0.25);
  border-radius: 8px;
  background: rgba(66, 216, 236, 0.08);
}

.mpr-report-card p {
  margin: 0;
  line-height: 1.45;
}

.document-control-page,
.inspection-page,
.quality-page {
  display: grid;
  gap: 14px;
}

.inspection-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.inspection-layout.single-registry-panel {
  grid-template-columns: minmax(0, 1fr);
}

.inspection-card-list,
.inspection-notice-list {
  display: grid;
  gap: 10px;
}

.inspection-card,
.inspection-notice-card {
  --accent: var(--cyan);
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 42%),
    rgba(255, 255, 255, 0.03);
}

.inspection-card strong,
.inspection-card small,
.inspection-notice-card strong,
.inspection-notice-card small {
  display: block;
}

.inspection-card small,
.inspection-notice-card small,
.availability-preview small,
.inspection-release-preview small {
  color: var(--muted);
}

.inspector-registry-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.inspector-registry-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.inspector-registry-meta span {
  min-width: 0;
}

.inspector-registry-meta strong {
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.inspector-registry-meta .inspector-kpi {
  padding: 9px 10px;
  border-left: 2px solid var(--cyan);
  background: color-mix(in srgb, var(--cyan) 7%, transparent);
}

.inspector-kpi em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
}

.inspection-setup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.inspection-setup-grid div {
  min-height: 108px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.inspection-setup-grid strong,
.inspection-setup-grid small {
  display: block;
}

.inspection-setup-grid small {
  color: var(--muted);
}

.availability-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.availability-strip span,
.inspection-release-preview span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(66, 216, 236, 0.26);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(66, 216, 236, 0.08);
  font-size: 0.78rem;
}

.inspection-notice-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.inspection-notice-heading > span {
  min-width: 0;
}

.inspection-notice-number {
  margin-bottom: 4px;
  color: var(--cyan) !important;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
}

.inspection-notice-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.inspection-notice-facts > span,
.inspection-notice-scope > span {
  min-width: 0;
  padding: 11px 12px;
}

.inspection-notice-facts > span + span {
  border-left: 1px solid var(--line);
}

.inspection-notice-facts strong {
  overflow-wrap: anywhere;
}

.inspection-notice-scope {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.inspection-notice-scope > span {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.inspection-project-system-panel {
  display: grid;
  grid-template-columns: minmax(190px, 0.7fr) repeat(2, minmax(180px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--cyan) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--cyan) 6%, transparent);
}

.inspection-project-system-panel > div,
.inspection-project-system-panel label {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.inspection-project-system-panel small,
.inspection-project-system-panel label span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.inspection-project-system-panel strong,
.inspection-project-system-panel input {
  min-width: 0;
}

.inspection-project-system-panel input {
  min-height: 34px;
}

.inspection-notice-heading mark,
.ncr-table mark {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(247, 191, 63, 0.34);
  border-radius: 8px;
  color: var(--amber);
  background: rgba(247, 191, 63, 0.09);
  text-transform: uppercase;
  font-size: 0.72rem;
}

.inspection-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inspection-report-mini {
  display: grid;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.inspection-release-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.inspection-release-mini .icon-button {
  width: 28px;
  height: 28px;
}

.status-track {
  --track-progress: 0%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--track-count, 4), minmax(90px, 1fr));
  gap: 10px;
  padding: 8px 0 4px;
}

.inspection-status-track {
  --track-count: 4;
}

.ncr-status-track {
  --track-count: 5;
  min-width: 460px;
}

.status-track::before,
.status-track::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 19px;
  height: 2px;
  border-radius: 999px;
}

.status-track::before {
  background: var(--line);
}

.status-track::after {
  right: auto;
  width: var(--track-progress);
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--amber));
}

.status-track span {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  justify-items: center;
  color: var(--muted);
  text-align: center;
}

.status-track i {
  width: 24px;
  height: 24px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--panel);
}

.status-track .is-done i,
.status-track .is-current i {
  border-color: var(--cyan);
  box-shadow: 0 0 22px rgba(66, 216, 236, 0.18);
}

.status-track .is-done i {
  background: var(--green);
}

.status-track .is-current {
  color: var(--text);
}

.status-track .is-current i {
  background: var(--cyan);
}

.inspection-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.inspection-form label {
  display: grid;
  gap: 7px;
}

.inspection-form span,
.inspection-item-picker > span,
.inspection-step-title span {
  color: var(--muted);
  font-size: 0.82rem;
}

.inspection-form input,
.inspection-form select,
.inspection-form textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}

.inspection-form textarea {
  min-height: 96px;
  padding: 11px 12px;
  resize: vertical;
}

.inspection-wide-field,
.inspection-form button,
.availability-preview,
.inspection-release-preview {
  grid-column: 1 / -1;
}

.inspection-form-feedback {
  grid-column: 1 / -1;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--red) 55%, var(--line));
  border-radius: 8px;
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
  font-weight: 700;
}

.inspection-form-feedback[hidden] {
  display: none;
}

#createInspectionNoticeButton[aria-busy="true"] {
  cursor: wait;
  filter: saturate(0.7);
}

.inspection-step-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.inspection-step-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.inspection-step-title strong {
  font-size: 0.98rem;
}

.inspection-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.inspection-scope-pickers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.availability-preview,
.inspection-release-preview {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.inspection-item-picker {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.inspection-item-picker label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 38px;
}

.inspection-item-picker input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cyan);
}

.inspection-calendar {
  display: grid;
  gap: 10px;
}

.inspection-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inspection-calendar-header small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.inspection-calendar-controls {
  display: grid;
  gap: 8px;
  width: min(100%, 320px);
}

.inspection-form .inspection-calendar-controls button {
  grid-column: auto;
}

.inspection-calendar-period,
.inspection-calendar-nav {
  display: grid;
  gap: 7px;
}

.inspection-calendar-period {
  grid-template-columns: minmax(0, 1.35fr) minmax(84px, 0.65fr);
}

.inspection-calendar-nav {
  grid-template-columns: 40px minmax(96px, 1fr) 40px;
}

.inspection-calendar-nav button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: var(--surface-soft);
  cursor: pointer;
}

.inspection-calendar-nav-button {
  font-size: 1.05rem;
  line-height: 1;
}

.inspection-calendar-today-button {
  color: var(--cyan);
  font-weight: 700;
}

.inspection-calendar-nav button:hover {
  border-color: rgba(62, 214, 226, 0.58);
  background: rgba(62, 214, 226, 0.1);
}

.inspection-calendar-controls select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}

.inspection-calendar-controls select option {
  color: #101522;
  background: #f7f9fc;
}

.inspection-calendar-weekdays,
.inspection-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.inspection-calendar-grid {
  grid-auto-rows: minmax(58px, auto);
}

.inspection-calendar-weekdays span {
  color: color-mix(in srgb, var(--text) 74%, var(--muted));
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.inspection-calendar-weekdays span.is-weekend {
  color: var(--amber);
  font-weight: 800;
}

.inspection-calendar-empty,
.inspection-calendar-day {
  min-height: 58px;
}

.inspection-form .inspection-calendar-day {
  grid-column: auto;
  width: 100%;
}

.inspection-calendar-day {
  display: grid;
  place-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
}

.inspection-calendar-day small {
  color: var(--muted);
  font-size: 0.62rem;
}

.inspection-calendar-day.is-open {
  border-color: rgba(66, 216, 236, 0.35);
  background: rgba(66, 216, 236, 0.08);
}

.inspection-calendar-day.is-booked {
  color: var(--faint);
  background: rgba(255, 99, 99, 0.08);
  border-color: rgba(255, 99, 99, 0.22);
}

.inspection-calendar-day.is-weekend {
  border-color: color-mix(in srgb, var(--amber) 48%, var(--line));
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}

.inspection-calendar-day.is-weekend strong,
.inspection-calendar-day.is-weekend small {
  color: var(--amber);
}

.inspection-calendar-day.is-selected {
  border-color: var(--green);
  background: rgba(48, 227, 167, 0.17);
  box-shadow: 0 0 0 1px rgba(48, 227, 167, 0.18);
}

.inspection-calendar-board-panel {
  margin-top: 14px;
}

.inspection-board-calendar {
  display: grid;
  gap: 12px;
}

.inspection-board-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.inspection-board-calendar-empty,
.inspection-board-calendar-day {
  min-height: 184px;
}

.inspection-board-calendar-day {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 88%, #06131f);
}

.inspection-board-calendar-day.has-events {
  border-color: color-mix(in srgb, var(--cyan) 46%, var(--line));
  background: color-mix(in srgb, var(--cyan) 9%, var(--surface-soft));
}

.inspection-board-calendar-day.is-weekend {
  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
  background: color-mix(in srgb, var(--amber) 9%, transparent);
}

.inspection-board-calendar-day.is-today {
  box-shadow: inset 0 0 0 1px rgba(48, 227, 167, 0.44);
}

.inspection-board-day-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.inspection-board-day-heading strong {
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
}

.inspection-board-day-heading small {
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--green) 54%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--green) 82%, #ffffff);
  background: color-mix(in srgb, var(--green) 12%, transparent);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.inspection-board-calendar-day.is-weekend .inspection-board-day-heading strong {
  color: var(--amber);
}

.inspection-board-events {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.inspection-board-events button {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--agency-color, var(--cyan)) 58%, var(--line));
  border-left: 5px solid var(--agency-color, var(--cyan));
  border-radius: 7px;
  color: var(--text);
  text-align: left;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--agency-color, var(--cyan)) 18%, transparent), transparent 82%),
    rgba(7, 18, 31, 0.82);
  cursor: pointer;
}

.inspection-board-events button:hover {
  border-color: color-mix(in srgb, var(--agency-color, var(--cyan)) 74%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--agency-color, var(--cyan)) 22%, transparent), transparent 78%),
    rgba(8, 19, 31, 0.62);
}

.inspection-board-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.inspection-board-event-head mark {
  max-width: 56%;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--agency-color, var(--cyan)) 72%, transparent);
  border-radius: 999px;
  color: #07131f;
  background: color-mix(in srgb, var(--agency-color, var(--cyan)) 78%, #ffffff);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspection-board-events b,
.inspection-board-events span,
.inspection-board-events small {
  min-width: 0;
  line-height: 1.28;
}

.inspection-board-events b {
  color: #ffffff;
  font-size: 0.82rem;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspection-board-event-po,
.inspection-board-event-inspector,
.inspection-board-event-status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspection-board-event-po {
  color: color-mix(in srgb, #ffffff 90%, var(--cyan));
  font-size: 0.78rem;
  font-weight: 800;
}

.inspection-board-event-inspector {
  color: color-mix(in srgb, var(--text) 82%, var(--cyan));
  font-size: 0.75rem;
  font-weight: 700;
}

.inspection-board-event-status {
  color: color-mix(in srgb, var(--muted) 72%, #ffffff);
  font-size: 0.72rem;
  font-weight: 650;
  font-style: normal;
}

.app-shell[data-theme="light"] .inspection-board-calendar-day {
  background: #f6fbff;
}

.app-shell[data-theme="light"] .inspection-board-calendar-day.has-events {
  background: color-mix(in srgb, var(--cyan) 8%, #ffffff);
}

.app-shell[data-theme="light"] .inspection-board-events button {
  color: #0c1825;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--agency-color, var(--cyan)) 14%, transparent), transparent 82%),
    #ffffff;
}

.app-shell[data-theme="light"] .inspection-board-events b,
.app-shell[data-theme="light"] .inspection-board-event-po {
  color: #0c1825;
}

.app-shell[data-theme="light"] .inspection-board-event-inspector {
  color: #23445f;
}

.app-shell[data-theme="light"] .inspection-board-event-status {
  color: #52677a;
}

@media (max-width: 980px) {
  .inspection-board-calendar-grid,
  .inspection-calendar-board-panel .inspection-calendar-weekdays {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inspection-board-calendar-empty {
    display: none;
  }
}

.ncr-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: start;
  gap: 10px;
  margin-bottom: 14px;
}

.ncr-filter-bar input,
.ncr-filter-bar select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}

.ncr-table-wrap {
  overflow-x: auto;
}

.ncr-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.ncr-table th,
.ncr-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.ncr-table th {
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
}

.ncr-table tr {
  --accent: var(--cyan);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34%),
    rgba(255, 255, 255, 0.018);
}

.ncr-table tr[hidden] {
  display: none;
}

.ncr-table tr.tone-red {
  --accent: var(--red);
}

.ncr-table tr.tone-amber {
  --accent: var(--amber);
}

.ncr-table tr.tone-cyan {
  --accent: var(--cyan);
}

.ncr-table strong,
.ncr-table small {
  display: block;
}

.ncr-table small {
  color: var(--muted);
}

.ncr-row-actions {
  min-width: 260px;
}

.ncr-row-actions .ghost-button {
  margin: 3px 0;
}

.ncr-workflow-summary {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}

.ncr-workflow-track {
  min-width: 0;
}

.ncr-link-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.ncr-link-strip span,
.ncr-from-report-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 38, 58, 0.62);
  padding: 12px;
}

.ncr-link-strip strong,
.ncr-link-strip small {
  display: block;
}

.ncr-link-strip strong {
  color: var(--faint);
  font-size: 0.75rem;
  margin-bottom: 5px;
}

.ncr-link-strip small {
  color: var(--text);
  line-height: 1.35;
}

.ncr-consolidated-history,
.ncr-current-stage,
.ncr-history-stage {
  display: grid;
  gap: 12px;
}

.ncr-consolidated-history {
  margin-bottom: 18px;
}

.ncr-section-heading,
.ncr-current-stage-heading,
.ncr-history-stage-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ncr-section-heading span,
.ncr-current-stage-heading span,
.ncr-history-stage-heading span,
.ncr-finalized-state span {
  color: var(--cyan);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.ncr-section-heading strong,
.ncr-current-stage-heading strong,
.ncr-history-stage-heading strong,
.ncr-finalized-state strong {
  display: block;
}

.ncr-history-stage {
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 6px;
  background: rgba(12, 29, 43, 0.52);
}

.ncr-history-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.3fr);
  gap: 14px;
  align-items: start;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.ncr-history-field p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.45;
  white-space: pre-wrap;
}

.ncr-history-acceptance {
  display: grid;
  gap: 3px;
  justify-items: end;
  text-align: right;
}

.ncr-history-acceptance.is-accepted strong {
  color: var(--green);
}

.ncr-history-acceptance.is-incomplete strong {
  color: var(--amber);
}

.ncr-history-acceptance small,
.ncr-final-file small {
  color: var(--muted);
}

.ncr-final-file {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(68, 220, 168, 0.32);
  border-radius: 6px;
}

.ncr-current-stage {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(51, 210, 226, 0.42);
  border-radius: 6px;
  background: rgba(20, 55, 72, 0.5);
}

.ncr-current-stage-heading mark {
  padding: 6px 10px;
  border: 1px solid rgba(51, 210, 226, 0.42);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(51, 210, 226, 0.08);
}

.ncr-current-open-grid,
.ncr-current-field {
  display: grid;
  gap: 12px;
}

.ncr-current-open-grid {
  grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr);
}

.ncr-current-field + .ncr-current-field {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.ncr-step-heading,
.ncr-step-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.35fr);
  gap: 12px;
  align-items: center;
}

.inline-check {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px !important;
  color: var(--muted);
}

.ncr-step-panel textarea {
  min-height: 96px;
}

.ncr-current-field textarea {
  min-height: 92px;
}

.ncr-step-meta.single-column {
  grid-template-columns: minmax(180px, 0.35fr);
}

.ncr-future-steps {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 6px;
}

.ncr-future-steps > span {
  color: var(--faint);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.ncr-future-steps > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ncr-future-steps small {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}

.ncr-workflow-actions {
  display: grid;
  grid-template-columns: minmax(150px, 0.28fr) minmax(240px, 1fr);
  gap: 10px;
}

.ncr-finalized-state {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid rgba(68, 220, 168, 0.42);
  border-radius: 6px;
  background: rgba(36, 128, 94, 0.12);
}

.ncr-finalized-state p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 760px) {
  .ncr-history-field,
  .ncr-current-open-grid,
  .ncr-step-heading,
  .ncr-step-meta,
  .ncr-workflow-actions {
    grid-template-columns: 1fr;
  }

  .ncr-history-acceptance {
    justify-items: start;
    text-align: left;
  }
}

.ncr-from-report-panel {
  display: grid;
  gap: 12px;
}

.inspection-ncr-toggle {
  min-height: 54px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 18px !important;
  cursor: pointer;
}

.inspection-ncr-toggle > span {
  display: grid;
  gap: 3px;
}

.inspection-ncr-toggle strong {
  color: var(--text);
  font-size: 0.95rem;
}

.inspection-ncr-toggle small {
  color: var(--muted);
}

.inspection-form .inspection-ncr-toggle input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--green);
}

.ncr-from-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ncr-from-report-grid[hidden] {
  display: none;
}

.ncr-item-picker {
  max-height: 190px;
  overflow-y: auto;
}

.inspection-score-field {
  min-width: 0;
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.inspection-score-field legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

.inspection-score-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.inspection-score-option {
  min-height: 56px;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 8px !important;
  row-gap: 1px !important;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.inspection-score-option:has(input:checked) {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 11%, transparent);
}

.inspection-form .inspection-score-option input {
  grid-row: 1 / 3;
  align-self: center;
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--green);
}

.inspection-score-option strong,
.inspection-score-option small {
  min-width: 0;
}

.inspection-score-option strong {
  color: var(--text);
}

.inspection-score-option small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspection-timing-preview {
  display: block;
  margin-top: 10px;
  color: var(--muted);
}

.inspection-timing-preview.tone-green {
  color: var(--green);
}

.inspection-timing-preview.tone-amber {
  color: var(--amber);
}

.audit-page {
  display: grid;
  gap: 14px;
}

.audit-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 18px;
  align-items: end;
  margin-bottom: 4px;
}

.audit-hero h1 {
  margin: 8px 0;
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  line-height: 0.98;
}

.audit-hero p {
  max-width: 840px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.audit-live-card {
  min-height: 126px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(66, 216, 236, 0.12), rgba(66, 223, 156, 0.08)),
    var(--surface);
}

.audit-live-card .pulse-dot {
  width: 12px;
  height: 12px;
}

.audit-live-card small,
.audit-stat small,
.audit-policy-list small,
.audit-row small {
  color: var(--muted);
}

.audit-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.audit-stat {
  min-height: 132px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent),
    rgba(255, 255, 255, 0.035);
}

.audit-stat span {
  color: var(--muted);
}

.audit-stat strong {
  color: var(--accent);
  font-size: 2rem;
}

.audit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 14px;
  align-items: start;
}

.audit-stream-panel {
  min-width: 0;
}

.audit-toolbar {
  align-items: center;
}

.audit-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.audit-filters button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}

.audit-filters button.active,
.audit-filters button:hover {
  color: var(--text);
  border-color: var(--cyan);
  background: rgba(66, 216, 236, 0.11);
}

.audit-table {
  display: grid;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
}

.audit-row {
  --accent: var(--cyan);
  display: grid;
  grid-template-columns: minmax(82px, 0.45fr) minmax(150px, 0.85fr) minmax(150px, 0.9fr) minmax(220px, 1.4fr) minmax(120px, 0.7fr) minmax(120px, 0.75fr);
  gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  min-width: 1040px;
}

.audit-row.tone-critical {
  --accent: var(--red);
}

.audit-row.tone-warning {
  --accent: var(--amber);
}

.audit-row.tone-info {
  --accent: var(--cyan);
}

.audit-row.audit-head {
  min-height: auto;
  color: var(--faint);
  border-left-color: var(--line);
  background: transparent;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08rem;
}

.audit-row strong,
.audit-row small {
  display: block;
}

.audit-time strong {
  color: var(--accent);
}

.audit-status mark {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid rgba(66, 223, 156, 0.34);
  border-radius: 8px;
  color: var(--green);
  background: rgba(66, 223, 156, 0.09);
  text-transform: uppercase;
  font-size: 0.72rem;
}

.audit-policy-list {
  display: grid;
  gap: 10px;
}

.audit-policy-list div {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.audit-export-button {
  width: 100%;
  margin-top: 14px;
}

.data-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.data-pagination > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.data-pagination-summary {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-size-control {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}

.page-size-control select {
  min-width: 72px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  color: var(--text);
  background: var(--surface-soft);
}

.data-pagination .icon-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
}

.data-pagination .icon-button:disabled {
  cursor: default;
  opacity: 0.35;
}

.permissions-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: 18px;
  align-items: end;
  margin-bottom: 18px;
}

.permissions-home {
  min-height: 230px;
  align-items: center;
}

.back-button {
  margin-bottom: 14px;
}

.permissions-hero h1 {
  margin: 8px 0;
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  line-height: 0.98;
}

.permissions-hero p,
.access-rule span {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.access-rule {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(66, 216, 236, 0.12), rgba(154, 114, 255, 0.08)),
    var(--surface);
}

.entity-boundary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.entity-boundary-strip.entity-landing {
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 16px;
}

.entity-entry {
  min-height: 118px;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(66, 216, 236, 0.09), rgba(76, 156, 255, 0.04)),
    rgba(255, 255, 255, 0.03);
  color: var(--text);
  text-align: left;
}

.entity-landing .entity-entry {
  min-height: 220px;
  align-content: space-between;
  padding: 22px;
}

.entity-landing .company-entry {
  border-color: var(--line-strong);
  background:
    linear-gradient(145deg, rgba(66, 216, 236, 0.18), rgba(154, 114, 255, 0.1)),
    var(--surface);
}

.entity-entry em {
  display: inline-flex;
  width: fit-content;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--green);
  background: rgba(66, 223, 156, 0.08);
  font-style: normal;
  font-size: 0.82rem;
}

.entity-entry:hover,
.entity-entry.active {
  border-color: var(--line-strong);
  background:
    linear-gradient(145deg, rgba(66, 216, 236, 0.18), rgba(76, 156, 255, 0.08)),
    var(--surface);
}

.entity-entry strong {
  color: var(--cyan);
  font-size: 1.5rem;
}

.entity-entry span {
  color: var(--text);
  font-weight: 700;
}

.entity-entry small {
  color: var(--muted);
  line-height: 1.45;
}

.permissions-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(460px, 1.2fr) minmax(360px, 1fr);
  gap: 14px;
  align-items: start;
}

.permissions-grid.setup-grid {
  grid-template-columns: minmax(340px, 0.85fr) minmax(520px, 1.15fr);
}

.entity-detail-layout {
  display: grid;
  gap: 14px;
}

.entity-setup-row {
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(560px, 1.18fr);
  gap: 14px;
  align-items: start;
}

.role-form,
.company-form {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.user-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(66, 216, 236, 0.1), rgba(76, 156, 255, 0.04)),
    rgba(255, 255, 255, 0.03);
}

.user-form .user-role-picker,
.user-form button {
  grid-column: 1 / -1;
}

.role-form label,
.company-form label,
.user-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.86rem;
}

.role-form input,
.role-form select,
.company-form input,
.company-form select,
.user-form input,
.user-form select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: var(--surface-soft);
  outline: none;
}

.role-form input:focus,
.role-form select:focus,
.company-form input:focus,
.company-form select:focus,
.user-form input:focus,
.user-form select:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 4px rgba(66, 216, 236, 0.1);
}

.companies-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.72fr) minmax(560px, 1.28fr);
  gap: 14px;
  align-items: start;
}

.company-form {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.company-form .entity-create-note,
.company-form .address-field,
.company-form label:last-of-type,
.company-form button {
  grid-column: 1 / -1;
}

.company-groups {
  display: grid;
  gap: 12px;
}

.company-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.company-card {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.company-card strong,
.company-card small {
  display: block;
}

.company-card small,
.company-card dt {
  color: var(--muted);
}

.company-card dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  margin: 0;
}

.company-card div,
.company-card dd {
  min-width: 0;
}

.company-card dt {
  font-size: 0.74rem;
}

.company-card dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}

.company-card-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.company-card-actions .ghost-button {
  min-height: 34px;
  padding: 0 12px;
}

.address-field {
  position: relative;
}

.address-results {
  display: none;
  position: absolute;
  z-index: 30;
  top: calc(100% - 18px);
  left: 0;
  right: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.address-results.open {
  display: grid;
  gap: 5px;
}

.address-results button,
.address-results span {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 0;
  border-radius: 7px;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.address-results button:hover {
  background: var(--surface-hover);
}

.address-results small,
#addressGeoPreview {
  color: var(--muted);
}

.assignment-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.assignment-chain span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(66, 216, 236, 0.28);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(66, 216, 236, 0.08);
  font-size: 0.78rem;
}

.primary-action {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--cyan);
  border-radius: 8px;
  color: #06111a;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  font-weight: 800;
}

.primary-action:hover {
  filter: brightness(1.06);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 8, 14, 0.72);
  backdrop-filter: blur(16px);
}

.workflow-modal {
  width: min(820px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
    var(--surface);
  box-shadow: var(--shadow);
  padding: 18px;
}

.workflow-modal.wide-modal {
  width: min(940px, calc(100vw - 32px));
}

.workflow-modal.inspection-notice-modal {
  width: min(900px, calc(100vw - 32px));
}

.po-modal {
  width: min(1180px, 96vw);
}

.modal-header,
.modal-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.modal-header {
  margin-bottom: 14px;
}

.modal-header h2 {
  margin: 5px 0 0;
}

.vdl-transmittal-title-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.vdl-transmittal-title-meta span {
  max-width: min(680px, 76vw);
  overflow-wrap: anywhere;
}

.vdl-transmittal-title-meta mark {
  border: 1px solid rgba(66, 216, 236, 0.42);
  border-radius: 999px;
  padding: 3px 9px;
  background: rgba(66, 216, 236, 0.1);
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.modal-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.modal-steps span {
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}

.modal-steps span.active {
  color: var(--text);
  border-color: var(--cyan);
  background: rgba(66, 216, 236, 0.1);
}

.modal-step {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.modal-step.is-hidden {
  display: none;
}

.modal-actions {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.contract-file-field {
  grid-column: 1 / -1;
}

.contract-file-field input[type="file"] {
  min-height: 64px;
  padding: 18px 12px;
}

.contract-file-list {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 56px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.contract-file-list span {
  display: inline-grid;
  gap: 2px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(66, 216, 236, 0.25);
  border-radius: 8px;
  color: var(--text);
  background: rgba(66, 216, 236, 0.08);
}

.contract-file-list small {
  color: var(--muted);
}

.entry-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.entry-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

.entry-table th,
.entry-table td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.entry-table th {
  color: var(--faint);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08rem;
  background: rgba(255, 255, 255, 0.035);
}

.entry-table tr:last-child td {
  border-bottom: 0;
}

.entry-table input,
.entry-table select {
  min-width: 0;
  height: 38px;
}

.po-table-field {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
}

.project-edit-scope {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
}

.revision-remove-field {
  gap: 10px;
}

.revision-remove-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.revision-remove-grid label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.revision-remove-grid label span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.revision-remove-grid label small {
  color: var(--muted);
}

.revision-rule-note {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(66, 223, 156, 0.26);
  border-radius: 8px;
  background: rgba(66, 223, 156, 0.06);
}

.revision-rule-note small {
  color: var(--muted);
}

.po-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.single-po-layout {
  grid-template-columns: 1fr;
}

.single-project-layout {
  grid-template-columns: 1fr;
}

.user-role-picker {
  display: grid;
  gap: 8px;
}

.user-role-picker > span {
  color: var(--muted);
  font-size: 0.86rem;
}

.entity-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 6px;
  padding: 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(66, 216, 236, 0.1);
  font-size: 0.68rem;
  font-weight: 800;
  vertical-align: middle;
}

.entity-create-note {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(66, 216, 236, 0.07);
}

.entity-create-note span {
  color: var(--muted);
  font-size: 0.82rem;
}

.entity-create-note strong {
  color: var(--cyan);
}

.empty-state {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}

.role-list,
.user-access-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 10px;
}

.user-full-panel {
  margin-top: 14px;
  width: 100%;
}

.role-card {
  min-height: 88px;
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
}

.role-card:hover,
.role-card.active {
  border-color: var(--line-strong);
  background: linear-gradient(90deg, rgba(66, 216, 236, 0.13), rgba(76, 156, 255, 0.06));
}

.role-card small,
.user-access-heading small {
  color: var(--muted);
  line-height: 1.45;
}

.role-entity-group {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.role-entity-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
}

.role-entity-heading strong {
  color: var(--cyan);
}

.matrix-table {
  display: grid;
  gap: 9px;
}

.matrix-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(320px, 1.4fr);
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.matrix-row.locked {
  opacity: 0.58;
}

.matrix-row strong small {
  display: block;
  margin-top: 4px;
  color: var(--faint);
  font-weight: 500;
}

.permission-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(74px, 1fr));
  gap: 6px;
}

.permission-options button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
}

.permission-options button:hover,
.permission-options button.active {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(66, 216, 236, 0.12);
}

.permission-options button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.user-access-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.user-access-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.user-access-heading strong,
.user-access-heading small {
  display: block;
}

.user-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.user-card-actions .ghost-button {
  min-height: 34px;
  padding: 0 12px;
}

.avatar.small {
  width: 34px;
  height: 34px;
  font-size: 0.78rem;
}

.role-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-checks label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 7px 10px 7px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.84rem;
}

.role-checks label small,
.role-company-line {
  color: var(--muted);
  font-size: 0.72rem;
}

.role-company-line {
  display: inline-flex;
}

.role-checks label:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.42;
}

.role-checks input {
  width: 16px;
  height: 16px;
  accent-color: var(--cyan);
}

.entity-company-list,
.role-management-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.entity-company-card,
.role-management-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 72px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.entity-company-card strong,
.role-management-card strong {
  display: block;
  margin-bottom: 4px;
}

.entity-company-card small,
.entity-company-card span,
.role-management-card small {
  color: var(--muted);
}

.role-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.role-card-actions .ghost-button {
  min-height: 34px;
  padding: 0 12px;
}

.danger-action {
  color: var(--red);
  border-color: rgba(255, 107, 97, 0.35);
}

.danger-action:hover {
  background: rgba(255, 107, 97, 0.12);
}

.compact-form-header {
  grid-column: 1 / -1;
  margin-bottom: 2px;
}

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

.role-modal-matrix {
  width: 100%;
}

.role-permission-step {
  grid-template-columns: 1fr;
}

.effective-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.permission-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.78rem;
}

.permission-chip.level-read {
  color: var(--cyan);
  border-color: rgba(66, 216, 236, 0.28);
}

.permission-chip.level-write {
  color: var(--green);
  border-color: rgba(66, 223, 156, 0.28);
}

.permission-chip.level-delete {
  color: var(--red);
  border-color: rgba(255, 107, 97, 0.3);
}

.compact .workspace {
  padding: 20px;
}

.compact .module-card {
  min-height: 118px;
}

.compact .hero-strip h1 {
  font-size: clamp(1.8rem, 4vw, 3.6rem);
}

@media (max-width: 1360px) {
  .module-overview,
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }

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

  .permissions-grid,
  .entity-setup-row,
  .companies-grid,
  .project-application-grid,
  .project-directory-card,
  .project-hero,
  .inspection-layout,
  .inspection-setup-grid,
  .ncr-filter-bar,
  .expediting-hero,
  .expediting-layout,
  .expediting-po-layout,
  .project-layout,
  .project-po-layout,
  .audit-hero,
  .audit-layout,
  .permissions-hero,
  .entity-boundary-strip {
    grid-template-columns: 1fr;
  }

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

  .project-hero-action {
    justify-content: stretch;
  }

  .project-hero-action .primary-action {
    width: 100%;
  }

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

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

  .expediting-po-terms-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .expediting-po-terms-strip > small {
    grid-column: 1 / -1;
  }

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

  .suborder-row,
  .expediting-item-row {
    grid-template-columns: minmax(170px, 1.15fr) minmax(180px, 1fr) minmax(160px, 0.86fr) minmax(150px, 0.78fr) minmax(120px, 0.58fr) minmax(115px, 0.54fr);
    overflow-x: auto;
  }

  .po-workflow-track {
    grid-template-columns: repeat(8, minmax(112px, 1fr));
  }

  .project-directory-actions {
    justify-items: start;
  }

  .status-track {
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .alert-panel {
    grid-row: auto;
  }
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .app-shell.sidebar-collapsed .sidebar {
    display: flex;
    align-items: stretch;
    padding: 28px 18px 18px;
    overflow: visible;
  }

  .app-shell.sidebar-collapsed .brand {
    justify-content: flex-start;
    padding: 2px 12px 22px;
  }

  .app-shell.sidebar-collapsed .brand > div {
    display: block;
  }

  .app-shell.sidebar-collapsed .nav-item {
    grid-template-columns: 34px 1fr;
    justify-items: stretch;
    padding: 0 12px;
  }

  .app-shell.sidebar-collapsed .nav-item span:not(.nav-icon) {
    display: inline;
  }

  .sidebar {
    position: fixed;
    inset: 78px auto 0 0;
    height: calc(100dvh - 78px);
    width: min(310px, 88vw);
    padding-top: 18px;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .mobile-menu {
    display: inline-grid;
  }

  .topbar {
    padding: 12px 16px;
    z-index: 25;
  }

  .profile-copy,
  kbd {
    display: none;
  }

  .profile-button {
    min-width: 92px;
    grid-template-columns: 38px 14px;
  }

  .ncr-link-strip,
  .ncr-from-report-grid,
  .expediting-po-terms-strip {
    grid-template-columns: 1fr;
  }

  .inspector-cert-grid {
    grid-template-columns: 1fr;
  }

  .workspace {
    padding: 20px 16px;
  }

  .hero-strip {
    display: grid;
  }
}

@media (max-width: 720px) {
  .top-actions {
    gap: 6px;
  }

  .search-box {
    min-width: 0;
  }

  .module-overview,
  .kpi-grid,
  .project-stat-grid,
  .audit-stat-grid,
  .pipeline-board {
    grid-template-columns: 1fr;
  }

  .matrix-row,
  .audit-row,
  .expediting-row,
  .expediting-scope-grid,
  .inspection-notice-facts,
  .inspection-notice-scope,
  .mpr-item-row,
  .project-filter-bar,
  .project-directory-card dl,
  .project-form,
  .inspection-form,
  .mpr-form,
  .suborder-form,
  .expediting-item-row,
  .po-form,
  .certification-picker,
  .project-entity-map,
  .po-card-states,
  .po-file-grid,
  .po-linked-data,
  .permission-options,
  .company-card,
  .company-card dl,
  .user-form,
  .company-form,
  .user-access-list {
    grid-template-columns: 1fr;
  }

  .inspection-notice-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .inspection-notice-facts > span + span {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .po-card-heading,
  .user-access-heading,
  .po-card-actions,
  .expediting-release-item,
  .suborder-row,
  .po-revision-panel {
    grid-template-columns: 1fr;
  }

  .po-card-actions {
    justify-content: stretch;
  }

  .user-card-actions {
    justify-content: stretch;
  }

  .user-card-actions .ghost-button {
    flex: 1;
  }

  .po-card-actions select,
  .po-card-actions .ghost-button {
    width: 100%;
  }

  .po-workflow-header {
    display: grid;
  }

  .po-workflow-track {
    grid-template-columns: repeat(8, 148px);
  }

  .audit-row.audit-head {
    display: none;
  }

  .audit-table {
    overflow-x: visible;
  }

  .audit-row {
    min-width: 0;
    width: 100%;
  }

  .audit-row > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .audit-toolbar,
  .audit-filters {
    display: grid;
    justify-content: stretch;
  }

  .hero-strip h1 {
    font-size: 2.25rem;
  }
}

.dc-layout,
.dc-support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.75fr);
  gap: 18px;
  align-items: start;
}

.dc-support-layout {
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
}

.dc-toolbar {
  gap: 16px;
}

.registry-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  min-width: min(100%, 520px);
  margin-left: auto;
}

.registry-toolbar-actions > input {
  width: min(100%, 430px);
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}

.vdl-export-button {
  min-height: 44px;
  white-space: nowrap;
}

.filter-menu {
  position: relative;
  flex: 0 0 auto;
}

.filter-menu summary {
  list-style: none;
}

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

.filter-menu-trigger {
  min-width: 104px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.filter-menu-trigger mark {
  min-width: 20px;
  min-height: 20px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--surface);
  background: var(--cyan);
  font-size: 0.72rem;
  font-weight: 800;
}

.filter-menu[open] .filter-menu-trigger {
  border-color: var(--cyan);
  color: var(--text);
}

.filter-menu-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, calc(100vw - 40px));
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.28);
}

.filter-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.filter-menu-header .text-button {
  border: 0;
  color: var(--cyan);
  background: transparent;
  cursor: pointer;
}

.filter-menu-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.saved-filter-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
}

.saved-filter-controls .icon-button {
  width: 36px;
  height: 36px;
}

.expediting-inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.filter-menu-fields label {
  display: grid;
  gap: 6px;
}

.filter-menu-fields label > span {
  color: var(--muted);
  font-size: 0.76rem;
}

.filter-menu-fields select,
.filter-menu-fields input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--text);
  background: var(--surface-soft);
}

.filter-menu-fields select option {
  color: #101522;
  background: #f7f9fc;
}

.dc-toolbar input,
.dc-vendor-select select,
.dc-actor-select select {
  width: min(420px, 100%);
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-soft);
  padding: 0 14px;
}

.dc-table-wrap,
.dc-mini-table {
  overflow-x: auto;
}

.dc-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.dc-table th,
.dc-table td {
  padding: 15px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.dc-table th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
}

.dc-table tr.is-selected td {
  background: rgba(66, 216, 236, 0.08);
}

.dc-table strong,
.dc-table small,
.dc-detail-grid span,
.dc-detail-grid strong,
.dc-file-card strong,
.dc-file-card small,
.dc-review-task span,
.dc-review-task small,
.dc-transmittal-list strong,
.dc-transmittal-list span,
.dc-transmittal-list small,
.dc-upload-item strong,
.dc-upload-item small,
.dc-flow-steps strong,
.dc-flow-steps small {
  display: block;
}

.dc-table small,
.dc-detail-grid span,
.dc-file-card small,
.dc-review-task small,
.dc-transmittal-list small,
.dc-upload-item small,
.dc-flow-steps small,
.dc-boundary-note small {
  color: var(--muted);
  margin-top: 4px;
}

.dc-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.82rem;
}

.dc-status.tone-green {
  color: var(--green);
  border-color: rgba(69, 211, 155, 0.58);
  background: rgba(69, 211, 155, 0.1);
}

.dc-status.tone-red {
  color: var(--red);
  border-color: rgba(255, 107, 97, 0.62);
  background: rgba(255, 107, 97, 0.11);
}

.dc-status.tone-amber {
  color: var(--amber);
  border-color: rgba(247, 191, 63, 0.58);
  background: rgba(247, 191, 63, 0.1);
}

.dc-status.tone-blue {
  color: var(--blue);
  border-color: rgba(93, 157, 242, 0.56);
  background: rgba(93, 157, 242, 0.1);
}

.dc-status.tone-cyan {
  color: var(--cyan);
  border-color: rgba(55, 200, 214, 0.56);
  background: rgba(55, 200, 214, 0.1);
}

.dc-status.tone-violet {
  color: var(--violet);
  border-color: rgba(154, 114, 255, 0.56);
  background: rgba(154, 114, 255, 0.1);
}

.dc-detail-panel,
.dc-vendor-panel,
.dc-flow-panel,
.dc-mini-register {
  min-width: 0;
}

.dc-status-track {
  margin: 4px 0 18px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.dc-status-track span {
  min-width: 116px;
}

.dc-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dc-detail-grid > div,
.dc-file-card,
.dc-boundary-note,
.dc-flow-steps > div,
.dc-review-task,
.dc-transmittal-list > div,
.dc-upload-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 12px;
}

.dc-file-card,
.dc-review-list,
.dc-transmittal-list,
.dc-upload-queue,
.dc-flow-steps {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.dc-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.dc-action-grid .ghost-button,
.dc-upload-item .ghost-button {
  width: 100%;
}

.ghost-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.dc-review-task.done {
  border-color: rgba(66, 223, 156, 0.32);
}

.dc-review-task.open {
  border-color: rgba(66, 216, 236, 0.36);
}

.dc-review-task.locked {
  opacity: 0.62;
}

.dc-vendor-select,
.dc-actor-select,
.dc-checkbox-field {
  display: grid;
  gap: 7px;
}

.dc-actor-select {
  margin-bottom: 14px;
}

.dc-document-viewer {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  gap: 10px;
  margin-top: 14px;
}

.dc-viewer-frame,
.dc-control-list {
  display: grid;
  gap: 7px;
  min-height: 148px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(140deg, rgba(66, 216, 236, 0.1), rgba(154, 114, 255, 0.08)),
    var(--surface-soft);
  padding: 14px;
}

.dc-viewer-frame {
  place-content: center;
  text-align: center;
}

.dc-viewer-frame span,
.dc-control-list small {
  color: var(--muted);
}

.dc-checkbox-field {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.dc-upload-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 12px;
  align-items: center;
}

.dc-mini-table {
  display: grid;
  gap: 8px;
}

.dc-mini-table > div {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 70px minmax(150px, 0.6fr) 92px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.vendor-upload-table > div {
  grid-template-columns: minmax(260px, 1.4fr) minmax(90px, 0.45fr) minmax(150px, 0.65fr) minmax(100px, 0.35fr);
}

.dc-dashboard-pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(128px, 1fr));
  gap: 10px;
}

.pipeline-stage {
  display: grid;
  gap: 4px;
  min-height: 116px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-soft);
  text-align: left;
}

.pipeline-stage strong {
  color: var(--cyan);
  font-size: 1.7rem;
}

.pipeline-stage small {
  color: var(--muted);
}

.document-coding-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.document-coding-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.project-rule-preset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.75fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-soft);
}

.project-rule-preset-copy {
  display: grid;
  gap: 4px;
}

.project-rule-preset-copy span {
  color: var(--accent);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.project-rule-preset-copy small {
  color: var(--muted);
}

.document-coding-form label,
.document-coding-preview > div,
.document-token-picker {
  display: grid;
  gap: 7px;
}

.document-coding-form input {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-soft);
  padding: 0 14px;
}

.document-coding-wide,
.document-coding-form .primary-action {
  grid-column: 1 / -1;
}

.document-coding-preview {
  display: grid;
  gap: 10px;
}

.document-token-picker > span {
  color: var(--muted);
  font-size: 0.86rem;
}

.document-coding-preview > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 14px;
}

.document-coding-preview span {
  color: var(--muted);
}

.document-coding-example small {
  color: var(--muted);
}

.vdl-register-panel {
  width: 100%;
  min-width: 0;
}

.vdl-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.vdl-stats-hero {
  align-items: end;
}

.operations-stats-hero h1 {
  max-width: 820px;
  font-size: 2.9rem;
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.operations-stats-hero p {
  max-width: 780px;
}

.operations-stats-hero .project-selector-card,
.operations-stats-hero .expediting-live-card {
  align-content: stretch;
}

.operations-stats-hero .project-selector-card .ghost-button,
.operations-stats-hero .expediting-live-card .ghost-button {
  width: 100%;
}

.vdl-stats-hero,
.vdl-stats-toolbar,
.vdl-stats-definition-panel,
.vdl-stats-grid,
.vdl-chart-grid,
.vdl-stats-layout {
  width: min(100%, 1440px);
  margin-inline: auto;
}

.vdl-stats-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.vdl-stats-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.8fr);
  gap: 14px;
  align-items: center;
}

.vdl-stats-toolbar > div:first-child {
  display: grid;
  gap: 4px;
}

.vdl-stats-toolbar-controls {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.vdl-stats-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.vdl-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.vdl-chart-card-wide {
  grid-column: 1 / -1;
  --vdl-total-bar: linear-gradient(180deg, #9fb2ff 0%, #5877ff 100%);
  --vdl-issued-bar: linear-gradient(180deg, #86ffd0 0%, #22d3ee 100%);
}

.vdl-stats-wide {
  grid-column: 1 / -1;
}

.vdl-stats-panel {
  min-width: 0;
}

.vdl-stats-group-control {
  flex: 0 0 auto;
}

.vdl-stats-group-control button,
.vdl-stats-scope-control button {
  min-width: 74px;
}

.vdl-stats-scope-control {
  max-width: 100%;
  overflow-x: auto;
}

.vdl-stats-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.vdl-stats-metric-grid article {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
}

.vdl-stats-metric-grid span,
.vdl-holder-bar span {
  color: var(--muted);
}

.vdl-stats-metric-grid strong {
  font-size: 2rem;
}

.vdl-holder-bars {
  display: grid;
  gap: 12px;
}

.vdl-holder-bar {
  display: grid;
  grid-template-columns: minmax(78px, 0.7fr) 56px minmax(0, 1.8fr);
  gap: 8px 12px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  background: var(--surface-soft);
  text-align: left;
}

.vdl-holder-bar:hover {
  border-color: var(--accent);
}

.vdl-holder-bar i {
  display: block;
  min-width: 0;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--accent) var(--bar-width), rgba(148, 163, 184, 0.16) var(--bar-width));
}

.vdl-holder-bar small {
  grid-column: 1 / -1;
  color: var(--muted);
  line-height: 1.35;
}

.vdl-chart-card {
  display: grid;
  gap: 16px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface);
}

.vdl-donut-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.vdl-donut-chart {
  position: relative;
  display: grid;
  place-items: center;
  width: min(220px, 100%);
  aspect-ratio: 1;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: conic-gradient(var(--donut-gradient));
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.28);
}

.vdl-donut-chart::after {
  content: "";
  position: absolute;
  inset: 24%;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: inherit;
  background: var(--surface);
}

.vdl-donut-center {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  justify-items: center;
}

.vdl-donut-center strong {
  font-size: 2rem;
}

.vdl-donut-center small,
.vdl-chart-legend small,
.vdl-histogram-row small {
  color: var(--muted);
}

.vdl-chart-legend {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.vdl-chart-legend span {
  display: grid;
  grid-template-columns: 12px minmax(120px, 0.7fr) minmax(0, 1.3fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.vdl-chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--legend-color);
}

.vdl-chart-legend strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vdl-histogram-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vdl-histogram {
  display: grid;
  gap: 10px;
}

.vdl-histogram-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(180px, 1.5fr) minmax(74px, auto) minmax(90px, 0.6fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.vdl-histogram-row i {
  display: block;
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--bar-color) var(--bar-width), rgba(148, 163, 184, 0.16) var(--bar-width));
}

.vdl-histogram-row strong {
  color: var(--text);
  white-space: nowrap;
}

.vdl-dual-bar-chart {
  display: grid;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}

.vdl-dual-axis-label {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vdl-dual-bar-plot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  align-items: end;
  gap: 18px;
  min-width: min(100%, 720px);
  min-height: 304px;
  padding: 36px 8px 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(148, 163, 184, 0.16) 1px, transparent 1px) 0 30px / 100% 52px,
    linear-gradient(180deg, rgba(66, 216, 236, 0.05), transparent 54%);
}

.vdl-dual-bar-row {
  display: grid;
  grid-template-rows: 224px minmax(34px, auto) 28px;
  gap: 8px;
  justify-items: center;
  width: 100%;
  min-width: 0;
}

.vdl-dual-bar-row strong {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.16;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.vdl-dual-bar-row small {
  color: var(--muted);
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.2;
}

.vdl-dual-bar-track {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 224px;
  min-width: 0;
}

.vdl-dual-bar-track i {
  position: relative;
  display: flex;
  align-items: start;
  justify-content: center;
  width: 36px;
  min-height: 2px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px 7px 2px 2px;
}

.vdl-dual-bar-track .is-total {
  height: var(--total-height);
  background: var(--vdl-total-bar);
  box-shadow: 0 0 18px rgba(88, 119, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.vdl-dual-bar-track .is-issued {
  height: var(--issued-height);
  background: var(--vdl-issued-bar);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.vdl-dual-bar-track i span {
  position: absolute;
  top: -22px;
  color: var(--text);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 800;
}

.vdl-chart-key {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
}

.vdl-chart-key span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.vdl-chart-key i {
  width: 18px;
  height: 8px;
  border-radius: 999px;
}

.vdl-chart-key .is-total {
  background: var(--vdl-total-bar, linear-gradient(180deg, #9fb2ff 0%, #5877ff 100%));
}

.vdl-chart-key .is-issued {
  background: var(--vdl-issued-bar, linear-gradient(180deg, #86ffd0 0%, #22d3ee 100%));
}

.vdl-stats-definition-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.vdl-stats-definition-panel {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.vdl-stats-definition-panel summary {
  display: grid;
  grid-template-columns: 28px auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.vdl-stats-definition-panel summary::-webkit-details-marker {
  display: none;
}

.vdl-stats-definition-panel summary > span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(66, 216, 236, 0.45);
  border-radius: 999px;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.vdl-stats-definition-panel summary small {
  color: var(--muted);
}

.vdl-stats-definition-panel[open] summary {
  border-bottom: 1px solid var(--line);
}

.vdl-stats-definition-panel .vdl-stats-definition-list {
  padding: 10px;
}

.vdl-stats-definition-list p {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.vdl-stats-definition-list span {
  color: var(--muted);
}

.vdl-stat-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.vdl-stat-table {
  width: 100%;
  min-width: 1240px;
  border-collapse: collapse;
}

.operations-stat-table {
  min-width: 1120px;
}

.vdl-stat-table th,
.vdl-stat-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.vdl-stat-table th {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vdl-stat-table td {
  color: var(--text);
}

.vdl-stat-table tr:last-child td {
  border-bottom: 0;
}

.vdl-register-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.vdl-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.vdl-table {
  width: 100%;
  min-width: 1020px;
  table-layout: fixed;
  border-collapse: collapse;
}

.vdl-table th:nth-child(1) { width: 20%; }
.vdl-table th:nth-child(2) { width: 15%; }
.vdl-table th:nth-child(3) { width: 13%; }
.vdl-table th:nth-child(4) { width: 25%; }
.vdl-table th:nth-child(5) { width: 10%; }
.vdl-table th:nth-child(6) { width: 9%; }
.vdl-table th:nth-child(7) { width: 8%; }

.vdl-table th,
.vdl-table td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.vdl-table th {
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
}

.vdl-table strong,
.vdl-table small {
  display: block;
}

.vdl-table small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.vdl-current-revision {
  font-size: 1.08rem;
}

.vdl-table td[data-label="Status"] {
  vertical-align: middle;
}

.vdl-table td[data-label="Status"] .dc-status {
  max-width: 100%;
  white-space: normal;
}

.vdl-reference-bypass-toggle {
  align-self: end;
  min-height: 46px;
}

.vdl-table .selected-row td {
  background: rgba(48, 213, 200, 0.08);
}

.vdl-table tbody tr:last-child td {
  border-bottom: 0;
}

.vdl-table tbody tr:hover td {
  background: var(--surface-soft);
}

.vdl-table td:last-child .ghost-button {
  width: 100%;
  margin-top: 8px;
  white-space: nowrap;
}

.vdl-table td:last-child .ghost-button:first-child {
  margin-top: 0;
}

.vdl-register-panel .dc-toolbar {
  gap: 20px;
  align-items: end;
}

.vdl-register-panel .dc-toolbar input {
  width: min(100%, 430px);
}

@media (max-width: 1500px) {
  .vdl-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .panel-header,
  .panel-header.project-directory-header,
  .panel-header.dc-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .registry-toolbar-actions,
  .filter-menu-fields {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .registry-toolbar-actions {
    min-width: 0;
    margin-left: 0;
    justify-content: stretch;
  }

  .registry-toolbar-actions > input,
  .project-filter-bar {
    width: 100%;
    min-width: 0;
  }

  .entity-boundary-strip.entity-landing {
    grid-template-columns: minmax(0, 1fr);
  }

  .filter-menu,
  .filter-menu-trigger {
    width: 100%;
  }

  .filter-menu-popover {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
  }

  .vdl-summary-grid {
    grid-template-columns: 1fr;
  }

  .vdl-stats-grid,
  .vdl-stats-metric-grid,
  .vdl-stats-definition-list,
  .vdl-stats-toolbar,
  .vdl-chart-grid,
  .vdl-donut-layout,
  .vdl-histogram-row,
  .vdl-dual-bar-row,
  .vdl-holder-bar {
    grid-template-columns: 1fr;
  }

  .vdl-stats-definition-panel summary {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .vdl-stats-definition-panel summary small {
    grid-column: 2;
  }

  .vdl-stats-group-control {
    width: 100%;
    overflow-x: auto;
  }

  .vdl-stats-toolbar-controls {
    justify-items: stretch;
  }

  .vdl-register-panel,
  .vdl-table-wrap {
    max-width: 100%;
    min-width: 0;
  }
}

.vdl-place-panel {
  position: static;
  min-width: 0;
}

.vdl-document-detail-layout {
  display: grid;
  gap: 16px;
}

.vdl-control-header {
  align-items: end;
  margin-bottom: 0;
}

.vdl-control-header small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.vdl-control-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.vdl-control-header-actions .ghost-button {
  min-height: 34px;
  padding: 7px 12px;
}

.vdl-control-overview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 16px;
  border-block: 1px solid var(--line);
}

.vdl-control-overview > div {
  min-width: 0;
  padding: 14px;
  border-right: 1px solid var(--line);
}

.vdl-control-overview > div:last-child {
  border-right: 0;
}

.vdl-control-overview span,
.vdl-control-overview small,
.vdl-formal-grid span,
.vdl-formal-grid small,
.vdl-event-card small,
.vdl-event-card p {
  display: block;
  color: var(--muted);
}

.vdl-control-overview span,
.vdl-formal-grid span {
  margin-bottom: 5px;
  color: var(--faint);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.vdl-control-overview strong,
.vdl-formal-grid strong,
.vdl-event-card strong {
  display: block;
  margin: 3px 0;
}

.vdl-control-overview strong {
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.vdl-control-overview small,
.vdl-formal-grid small {
  margin-top: 4px;
  line-height: 1.35;
}

.vdl-formal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.vdl-formal-grid > section {
  min-width: 0;
  padding: 14px;
  border-right: 1px solid var(--line);
}

.vdl-formal-grid > section:last-child {
  border-right: 0;
}

.vdl-workflow-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}

.vdl-workflow-heading strong {
  display: block;
  margin-top: 4px;
}

.danger-text {
  color: var(--red) !important;
}

.vdl-document-hero h1 {
  font-size: 1.95rem;
}

.vdl-document-hero p {
  margin-top: 5px;
}

.vdl-event-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 12px;
}

.vdl-cycle-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.vdl-next-step-card,
.vdl-project-actors,
.vdl-locked-step-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 12px;
}

.vdl-next-step-card span,
.vdl-next-step-card small,
.vdl-locked-step-list span,
.vdl-locked-step-list small,
.vdl-project-actors span,
.vdl-project-actors small,
.vdl-project-actors strong {
  display: block;
}

.vdl-next-step-card span,
.vdl-locked-step-list span,
.vdl-project-actors strong {
  color: var(--faint);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vdl-next-step-card strong {
  display: block;
  margin: 4px 0;
  font-size: 1.1rem;
}

.vdl-project-actors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.vdl-locked-step-list {
  display: grid;
  gap: 6px;
}

.vdl-cycle-step {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 108px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 12px 10px;
}

.vdl-cycle-step::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -9px;
  width: 9px;
  height: 2px;
  background: var(--line);
}

.vdl-cycle-step:first-child::before {
  display: none;
}

.vdl-cycle-step strong {
  font-size: 0.82rem;
  line-height: 1.2;
}

.vdl-cycle-step small {
  color: var(--muted);
  font-size: 0.76rem;
}

.vdl-cycle-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.03);
}

.vdl-cycle-step.is-done .vdl-cycle-dot,
.vdl-cycle-step.is-current .vdl-cycle-dot {
  border-color: var(--accent);
  background: rgba(48, 213, 200, 0.18);
}

.vdl-cycle-step.is-current {
  border-color: rgba(48, 213, 200, 0.55);
}

.vdl-cycle-step.is-locked {
  opacity: 0.58;
}

.vdl-event-timeline {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.vdl-event-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.vdl-event-card p {
  margin: 8px 0 0;
  line-height: 1.45;
}

.vdl-history-actions {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vdl-history-actions .ghost-button {
  min-height: 32px;
  padding: 6px 10px;
}

.vdl-admin-correction-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  border: 1px solid rgba(255, 185, 80, 0.34);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 185, 80, 0.08), rgba(48, 213, 200, 0.04));
  padding: 14px;
}

.vdl-admin-correction-panel strong,
.vdl-admin-correction-panel small {
  display: block;
}

.vdl-admin-correction-panel small {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.35;
}

.vdl-admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.vdl-admin-actions .ghost-button {
  min-height: 34px;
  padding: 7px 12px;
}

.vdl-admin-correction-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vdl-admin-correction-form label {
  display: grid;
  gap: 7px;
}

.vdl-admin-correction-form input,
.vdl-admin-correction-form textarea,
.vdl-admin-correction-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-soft);
  padding: 12px 14px;
}

.vdl-admin-correction-form textarea,
.vdl-admin-correction-form .project-boundary-note,
.vdl-admin-correction-form .primary-action {
  grid-column: 1 / -1;
}

.vdl-admin-correction-form textarea {
  min-height: 96px;
  resize: vertical;
}

.compact-header {
  margin-bottom: 0;
}

.vdl-import-form,
.vdl-placeholder-form,
.vdl-transmittal-form {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
}

.vdl-import-form label,
.vdl-placeholder-form label,
.vdl-transmittal-form label {
  display: grid;
  gap: 7px;
}

.vdl-import-form input,
.vdl-import-form textarea,
.vdl-import-form select,
.vdl-placeholder-form input,
.vdl-placeholder-form textarea,
.vdl-placeholder-form select,
.vdl-transmittal-form input,
.vdl-transmittal-form textarea,
.vdl-transmittal-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-soft);
  padding: 12px 14px;
}

.vdl-placeholder-form select option {
  color: #101522;
  background: #f7f9fc;
}

.vdl-import-form textarea,
.vdl-placeholder-form textarea,
.vdl-transmittal-form textarea {
  min-height: 220px;
  resize: vertical;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.84rem;
}

.vdl-transmittal-form textarea {
  min-height: 96px;
}

.vdl-import-wide,
.vdl-import-form .primary-action,
.vdl-placeholder-form .primary-action,
.vdl-transmittal-form .primary-action {
  grid-column: 1 / -1;
}

.vdl-bulk-document-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  padding: 12px;
}

.vdl-bulk-list-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  position: sticky;
  top: -12px;
  z-index: 2;
  background: var(--surface-soft);
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
}

.vdl-bulk-list-header > div {
  display: grid;
  gap: 4px;
}

.vdl-bulk-document-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(6, 18, 29, 0.36);
}

.vdl-bulk-document-row input {
  width: auto;
  margin-top: 2px;
}

.vdl-bulk-document-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.vdl-bulk-document-row small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .dc-layout,
  .dc-support-layout,
  .document-coding-layout,
  .vdl-register-layout,
  .vdl-stats-layout,
  .vdl-project-actors,
  .inspector-documents-grid,
  .ncr-step-heading,
  .ncr-step-meta {
    grid-template-columns: 1fr;
  }

  .vdl-place-panel {
    position: static;
  }

  .vdl-control-overview,
  .vdl-cycle-strip,
  .vdl-chart-grid,
  .vdl-stats-grid,
  .vdl-stats-metric-grid,
  .vdl-stats-definition-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vdl-stats-toolbar,
  .vdl-donut-layout {
    grid-template-columns: 1fr;
  }

  .vdl-stats-toolbar-controls {
    justify-items: stretch;
  }

  .vdl-control-overview > div:nth-child(2n) {
    border-right: 0;
  }

  .vdl-control-overview > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

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

@media (min-width: 1500px) {
  .vdl-place-panel {
    position: sticky;
    top: 92px;
  }
}

@media (max-width: 760px) {
  .vdl-import-form,
  .vdl-placeholder-form,
  .vdl-admin-correction-form,
  .vdl-transmittal-form,
  .inspection-form-grid,
  .inspection-scope-pickers,
  .inspector-registry-meta {
    grid-template-columns: 1fr;
  }

  .vdl-control-overview,
  .vdl-cycle-strip {
    grid-template-columns: 1fr;
  }

  .vdl-admin-correction-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .vdl-admin-actions,
  .vdl-control-header-actions {
    justify-content: flex-start;
  }

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

  .vdl-control-overview > div {
    border-right: 0;
    border-top: 1px solid var(--line);
  }

  .vdl-control-overview > div:first-child {
    border-top: 0;
  }

  .vdl-formal-grid {
    grid-template-columns: 1fr;
  }

  .vdl-formal-grid > section {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .vdl-formal-grid > section:last-child {
    border-bottom: 0;
  }

  .vdl-workflow-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .dc-detail-grid,
  .dc-document-viewer,
  .dc-action-grid,
  .dc-upload-item,
  .dc-mini-table > div,
  .dc-dashboard-pipeline,
  .document-coding-form,
  .project-rule-preset {
    grid-template-columns: 1fr;
  }
}
/* Reports stays read-only and intentionally summarizes rather than duplicating workflows. */
.reports-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 20px;
  align-items: end;
  margin-bottom: 18px;
}

.reports-hero h1 {
  margin: 6px 0;
}

.reports-actions {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.reports-actions label,
.reports-actions select,
.reports-actions button {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.reports-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.reports-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.formal-report-composer,
.formal-report-library {
  margin-bottom: 14px;
}

.formal-report-form {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(150px, 0.7fr));
  gap: 12px;
}

.formal-report-form label {
  display: grid;
  gap: 6px;
}

.formal-report-title {
  min-width: 0;
}

.formal-report-comments {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
}

.formal-report-comments legend {
  padding: 0 6px;
  color: var(--muted);
}

.formal-report-form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.segmented-control {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.segmented-control button {
  min-height: 32px;
  padding: 5px 10px;
  border: 0;
  color: var(--muted);
  background: transparent;
}

.segmented-control button.active {
  color: var(--text);
  background: var(--cyan-soft);
}

.formal-report-list {
  display: grid;
}

.formal-report-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.1fr) minmax(380px, 2fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.formal-report-row:first-child {
  border-top: 0;
}

.formal-report-identity {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 8px;
  min-width: 0;
}

.formal-report-identity small {
  grid-column: 1 / -1;
}

.status-chip {
  align-self: start;
  padding: 2px 6px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.72rem;
}

.formal-report-row.tone-green .status-chip {
  border-color: var(--green);
  color: var(--green);
}

.formal-report-row.tone-amber .status-chip {
  border-color: var(--amber);
  color: var(--amber);
}

.formal-report-row dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.formal-report-row dl div {
  min-width: 0;
}

.formal-report-row dt {
  color: var(--muted);
  font-size: 0.72rem;
}

.formal-report-row dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}

.formal-report-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.report-section-wide {
  grid-column: 1 / -1;
}

.report-metric-list,
.reports-readiness-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.inspection-release-item-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.inspection-release-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto) 110px;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-soft);
}

.inspection-release-item-row > span {
  display: grid;
  gap: 2px;
}

.inspection-release-balance {
  text-align: right;
}

.compact-textarea {
  min-height: 72px;
}

.ncr-attempt-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ncr-attempt-list small {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.ncr-proposal-review {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ncr-proposal-review > span {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.ncr-proposal-review p {
  margin: 0;
  white-space: pre-wrap;
}

.danger-action {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 50%, var(--line));
}

.expediting-packing-panel {
  grid-column: 1 / -1;
}

.project-rule-section {
  padding: 16px 0 4px;
  border-top: 1px solid var(--border);
}

.project-rule-section > .inspection-step-title {
  margin-bottom: 12px;
}

.packing-balance-grid,
.packing-list-history {
  display: grid;
  gap: 8px;
}

.packing-balance-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.7fr) repeat(5, minmax(92px, 0.7fr));
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.packing-balance-row > span,
.packing-list-card > span:first-child {
  display: grid;
  gap: 3px;
}

.packing-entry {
  margin-top: 12px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.packing-entry summary {
  padding: 11px 12px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
}

.packing-entry[data-empty] summary {
  color: var(--muted);
  cursor: default;
}

.packing-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

.packing-item-picker,
.packing-form .primary-action,
.packing-form .inspection-form-feedback {
  grid-column: 1 / -1;
}

.packing-item-picker {
  display: grid;
  gap: 7px;
}

.packing-item-picker label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
}

.packing-item-picker span {
  display: grid;
  gap: 2px;
}

.packing-list-history {
  margin-top: 12px;
}

.packing-list-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--surface-soft);
}

.packing-arrival-action {
  display: flex;
  gap: 8px;
  align-items: center;
}

.packing-summary {
  display: block;
  margin-top: 9px;
}

.mpr-item-row > span:last-child {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 90px;
  gap: 7px;
}

.inspection-notice-revision-modal .inspection-form,
.controlled-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.controlled-date-grid,
.danger-confirmation-row,
.inspection-notice-revision-modal .primary-action {
  grid-column: 1 / -1;
}

.danger-confirmation-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-soft));
}

.inspection-notice-card.is-cancelled,
.ncr-table tr.is-cancelled {
  opacity: .72;
  filter: saturate(.55);
}

.inspection-report-record,
.inspection-release-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.workflow-stage-fieldset {
  display: contents;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ncr-workflow-form.is-read-only :is(input, select, textarea, button) {
  cursor: not-allowed;
}

.ncr-finalized-state.is-cancelled {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
}

@media (max-width: 720px) {
  .inspection-notice-revision-modal .inspection-form,
  .controlled-date-grid {
    grid-template-columns: 1fr;
  }
  .inspection-release-item-row {
    grid-template-columns: 1fr;
  }

  .inspection-release-balance {
    text-align: left;
  }

  .packing-balance-row,
  .packing-form,
  .packing-item-picker label {
    grid-template-columns: 1fr;
  }

  .packing-list-card,
  .packing-arrival-action {
    align-items: stretch;
    flex-direction: column;
  }
}

.report-metric-list > span,
.reports-readiness-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.report-metric-list strong,
.reports-readiness-row strong {
  font-size: 1.45rem;
  color: var(--text);
}

@media (max-width: 1050px) {
  .reports-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formal-report-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formal-report-row { grid-template-columns: 1fr; align-items: start; }
  .formal-report-actions { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .reports-hero,
  .reports-layout { grid-template-columns: 1fr; }
  .reports-kpi-grid,
  .report-metric-list,
  .reports-readiness-row { grid-template-columns: 1fr 1fr; }
  .report-section-wide { grid-column: auto; }
  .formal-report-form,
  .formal-report-comments,
  .formal-report-row dl { grid-template-columns: 1fr; }
  .formal-report-form-actions { align-items: stretch; flex-direction: column; }
  .formal-report-library .panel-header { align-items: stretch; flex-direction: column; }
  .data-pagination { align-items: stretch; flex-direction: column; }
  .data-pagination > div { justify-content: space-between; }
  .compact-segments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .ncr-proposal-review { grid-template-columns: 1fr; }
}
.po-control-fields {
  display: grid;
  gap: 14px;
}

.po-control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.po-team-picker {
  grid-column: span 2;
  display: grid;
  gap: 8px;
}

.po-team-picker .role-checks {
  min-height: 42px;
}

.input-with-suffix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.po-control-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
  overflow: hidden;
}

.po-control-summary > div,
.po-control-summary > label,
.po-control-summary > .po-team-picker {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 0;
}

.po-control-summary > button {
  align-self: end;
}

.po-control-form label {
  align-content: start;
}

.po-control-form input,
.po-control-form select {
  width: 100%;
  min-height: 40px;
}

.po-control-form .input-with-suffix input {
  min-height: 40px;
}

.po-control-summary span,
.po-control-summary small {
  color: var(--muted);
}

.po-control-overview {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.po-control-read-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.po-control-read-grid > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.po-control-read-grid span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.po-control-read-grid strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-control-read-grid small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .po-control-grid,
  .po-control-summary,
  .po-control-read-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .po-control-grid,
  .po-control-summary,
  .po-control-read-grid {
    grid-template-columns: 1fr;
  }

  .po-team-picker {
    grid-column: auto;
  }
}

.table-add-button {
  width: 100%;
  margin-top: 8px;
  border-style: dashed;
  background: var(--surface-soft);
}

/* Operations UI: compact hierarchy for repeated daily use. */
.app-shell {
  grid-template-columns: 252px minmax(0, 1fr);
  background: var(--bg);
}

.app-shell[data-theme="light"] {
  background: var(--bg);
}

.sidebar,
.app-shell[data-theme="light"] .sidebar {
  gap: 14px;
  padding: 18px 14px 14px;
  background: var(--bg-strong);
  backdrop-filter: none;
}

.brand {
  gap: 11px;
  padding: 2px 8px 16px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  background: var(--surface-soft);
  box-shadow: none;
}

.app-shell[data-theme="light"] .brand-mark {
  filter: brightness(0) saturate(100%) invert(16%) sepia(33%) saturate(947%) hue-rotate(129deg) brightness(91%) contrast(94%);
}

.brand small {
  font-size: 0.66rem;
  letter-spacing: 0.1rem;
}

.nav-list {
  gap: 4px;
}

.nav-item {
  min-height: 42px;
  padding-inline: 9px;
}

.nav-item:hover,
.nav-item.active {
  background: var(--surface-soft);
}

.nav-item.active {
  box-shadow: inset 3px 0 0 var(--cyan);
}

.nav-item.active .nav-icon,
.brand-mark {
  box-shadow: none;
}

.topbar {
  height: 64px;
  gap: 12px;
  padding: 8px 22px;
  background: color-mix(in srgb, var(--bg-strong) 92%, transparent);
  backdrop-filter: blur(12px);
}

.search-box {
  max-width: 660px;
}

.search-box input {
  height: 42px;
}

.search-glyph {
  top: 12px;
}

kbd {
  top: 10px;
}

.profile-button {
  height: 44px;
}

.workspace {
  padding: 22px;
}

.view-stack,
.projects-page,
.document-control-page,
.vdl-register-page,
.expediting-page,
.inspection-page,
.quality-page,
.reports-page,
.permissions-page,
.audit-page {
  gap: 12px;
}

.hero-strip,
.project-hero {
  align-items: end;
  gap: 18px;
  margin-bottom: 14px;
}

.hero-strip h1,
.project-hero h1,
.po-detail-hero h1 {
  margin: 5px 0 6px;
  font-size: 2.65rem;
  line-height: 1.05;
}

.hero-strip p,
.project-hero p {
  max-width: 820px;
  font-size: 0.92rem;
  line-height: 1.48;
}

.module-overview {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.module-card,
.panel,
.drawer,
.toast,
.project-selector-card,
.project-stat,
.workflow-modal {
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.module-card {
  min-height: 102px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 13px 14px;
}

.module-card:hover {
  transform: none;
}

.module-card strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 1.65rem;
}

.module-card small {
  align-self: end;
}

.module-card em {
  font-size: 0.78rem;
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 10px;
}

.panel {
  padding: 16px;
}

.panel-header {
  gap: 12px;
  margin-bottom: 13px;
}

.panel h2,
.drawer h2 {
  margin-top: 3px;
  font-size: 1.08rem;
}

.kpi-panel {
  grid-column: 1 / -1;
}

.kpi-grid {
  gap: 8px;
}

.kpi-card {
  min-height: 112px;
  gap: 4px;
  padding: 13px;
  background: var(--surface-soft);
}

.kpi-card strong {
  font-size: 1.65rem;
}

.tasks-panel,
.document-panel,
.vendor-panel {
  min-height: 0;
}

.alert-list,
.task-list,
.vendor-list,
.notification-list {
  gap: 7px;
}

.alert-item,
.task-item,
.vendor-item,
.notification-item {
  min-height: 58px;
  gap: 9px;
  padding: 9px 10px;
  background: var(--surface-soft);
}

.pipeline-board {
  gap: 7px;
}

.pipeline-stage {
  min-height: 104px;
  padding: 12px;
  background: var(--surface-soft);
}

.pipeline-stage strong {
  margin: 8px 0 3px;
  font-size: 1.65rem;
}

.project-selector-card {
  min-height: 104px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 14px;
}

.project-selector-card > label {
  grid-column: 1 / -1;
}

.project-selector-card > :only-child,
.project-selector-card > .primary-action:last-child:nth-child(2) {
  grid-column: 1 / -1;
}

.project-stat-grid,
.vdl-summary-grid {
  gap: 8px;
}

.project-stat {
  min-height: 96px;
  gap: 4px;
  padding: 12px 13px;
  background: var(--surface-soft);
}

button.project-stat:hover,
button.project-stat:focus-visible,
.project-stat.is-active {
  background: color-mix(in srgb, var(--surface-soft) 90%, var(--accent) 10%);
  box-shadow: inset 3px 0 0 var(--accent);
  transform: none;
}

.project-stat strong {
  font-size: 1.55rem;
}

.primary-action {
  min-height: 40px;
  background: var(--cyan);
}

.ghost-button,
.icon-button,
.primary-action {
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.workflow-modal,
.workflow-modal.wide-modal,
.workflow-modal.inspection-notice-modal {
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 16px;
}

.workflow-modal.wide-modal {
  width: min(980px, calc(100vw - 32px));
}

.modal-backdrop {
  padding: 16px;
  background: rgba(2, 8, 14, 0.78);
  backdrop-filter: blur(8px);
}

.modal-header {
  position: sticky;
  top: -16px;
  z-index: 4;
  margin: -16px -16px 14px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.modal-actions {
  position: sticky;
  bottom: -16px;
  z-index: 4;
  margin: 8px -16px -16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.project-form,
.po-form,
.inspection-form,
.mpr-form,
.user-form,
.company-form,
.modal-step {
  gap: 10px 12px;
}

:is(.project-form, .po-form, .inspection-form, .mpr-form, .user-form, .company-form, .workflow-modal) textarea {
  min-height: 82px;
}

.vdl-table-wrap,
.ncr-table-wrap {
  background: var(--surface-soft);
  scrollbar-color: var(--cyan) var(--bg-strong);
  scrollbar-width: thin;
}

.vdl-table th,
.ncr-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-strong);
}

.vdl-table th,
.vdl-table td,
.ncr-table th,
.ncr-table td {
  padding: 10px;
}

.vdl-table tbody tr:nth-child(even) td,
.ncr-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.018);
}

.inspection-calendar-controls {
  width: min(100%, 360px);
}

.inspection-calendar-nav button {
  min-height: 38px;
  background: var(--surface-soft);
}

@media (max-width: 980px) {
  .workspace {
    padding: 16px;
  }

  .topbar {
    height: 64px;
    padding: 8px 12px;
  }

  .sidebar,
  .app-shell.sidebar-collapsed .sidebar {
    inset: 64px auto 0 0;
    height: calc(100dvh - 64px);
    padding: 16px 14px;
  }

  .hero-strip h1,
  .project-hero h1,
  .po-detail-hero h1 {
    font-size: 2.2rem;
  }

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

@media (max-width: 720px) {
  .workspace {
    padding: 13px 10px;
  }

  .hero-strip,
  .project-hero {
    gap: 10px;
    margin-bottom: 8px;
  }

  .hero-strip h1,
  .project-hero h1,
  .po-detail-hero h1 {
    font-size: 1.9rem;
  }

  .hero-strip p,
  .project-hero p {
    font-size: 0.86rem;
  }

  .module-overview,
  .kpi-grid,
  .project-stat-grid,
  .audit-stat-grid,
  .vdl-summary-grid,
  .vdl-stats-grid,
  .vdl-stats-metric-grid,
  .vdl-stats-definition-list,
  .vdl-chart-grid,
  .reports-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .module-card,
  .project-stat,
  .kpi-card {
    min-height: 92px;
    padding: 11px;
  }

  .module-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding-right: 38px;
  }

  .module-card strong {
    position: absolute;
    top: 10px;
    right: 10px;
    line-height: 1;
  }

  .module-card span,
  .module-card small,
  .module-card em {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .module-card em {
    margin-top: auto;
  }

  .module-card strong,
  .project-stat strong,
  .kpi-card strong {
    font-size: 1.35rem;
  }

  .panel {
    padding: 13px;
  }

  .workflow-modal,
  .workflow-modal.wide-modal,
  .workflow-modal.inspection-notice-modal {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    padding: 13px;
  }

  .modal-backdrop {
    padding: 6px;
  }

  .modal-header {
    top: -13px;
    margin: -13px -13px 12px;
    padding: 13px;
  }

  .modal-actions {
    bottom: -13px;
    margin: 8px -13px -13px;
    padding: 10px 13px;
  }

  .profile-button {
    min-width: 58px;
    grid-template-columns: 34px 10px;
    padding-inline: 5px;
  }

  .vdl-table-wrap,
  .ncr-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .vdl-table,
  .ncr-table,
  .vdl-table tbody,
  .ncr-table tbody {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 10px;
  }

  .vdl-table thead,
  .ncr-table thead {
    display: none;
  }

  .vdl-table tr,
  .ncr-table tr {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
  }

  .vdl-table td,
  .ncr-table td {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent !important;
  }

  .vdl-table td::before,
  .ncr-table td::before {
    content: attr(data-label);
    color: var(--faint);
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06rem;
  }

  .vdl-table td:last-child,
  .ncr-table td:last-child {
    border-bottom: 0;
  }

  .vdl-table td:last-child .ghost-button,
  .ncr-row-actions .ghost-button {
    width: 100%;
    margin: 0 0 7px;
  }

  .vdl-table td:last-child .ghost-button:last-child,
  .ncr-row-actions .ghost-button:last-child {
    margin-bottom: 0;
  }

  .ncr-table .ncr-status-track {
    min-width: 520px;
  }

  .ncr-table td[data-label="Workflow"] {
    overflow: hidden;
  }
}

@media (max-width: 980px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar,
  .app-shell.sidebar-collapsed .sidebar {
    display: none;
  }

  .sidebar.open,
  .app-shell.sidebar-collapsed .sidebar.open {
    display: flex;
  }
}

@media (max-width: 620px) {
  .status-track,
  .ncr-table .ncr-status-track {
    grid-template-columns: repeat(var(--track-count, 4), minmax(0, 1fr));
    min-width: 0;
    gap: 4px;
    overflow: visible;
  }

  .status-track span {
    min-width: 0;
    gap: 5px;
    font-size: 0.66rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .status-track i {
    width: 20px;
    height: 20px;
  }

  .status-track::before,
  .status-track::after {
    top: 17px;
  }
}

input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0;
  flex: 0 0 18px;
  accent-color: var(--cyan);
}

@media (min-width: 721px) and (max-width: 1360px) {
  .ncr-filter-bar {
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: start;
  }

  .project-registry-hero {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .project-registry-hero .project-hero-action {
    justify-content: flex-end;
  }

  .project-registry-hero .project-hero-action .primary-action {
    width: 180px;
  }
}

/* Inspection queue: essential coordination data first, evidence on demand. */
.inspection-notice-list {
  gap: 8px;
}

.inspection-notice-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--surface-soft);
}

.inspection-queue-heading,
.inspection-queue-facts,
.inspection-queue-reference,
.inspection-notice-actions,
.inspection-queue-details > summary,
.inspection-queue-detail-content {
  padding-inline: 14px;
}

.inspection-queue-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-top: 13px;
  padding-bottom: 11px;
}

.inspection-queue-identity {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.inspection-queue-identity strong {
  font-size: 1rem;
}

.inspection-queue-identity > span,
.inspection-queue-reference {
  color: var(--muted);
  font-size: 0.78rem;
}

.inspection-queue-status {
  flex: 0 0 auto;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.inspection-queue-status.tone-green {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 35%, var(--line));
  background: color-mix(in srgb, var(--green) 8%, transparent);
}

.inspection-queue-status.tone-amber {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 35%, var(--line));
  background: color-mix(in srgb, var(--amber) 8%, transparent);
}

.inspection-queue-facts {
  display: grid;
  grid-template-columns:
    minmax(90px, 0.65fr)
    minmax(90px, 0.65fr)
    minmax(64px, 0.45fr)
    minmax(170px, 1.3fr)
    minmax(160px, 1.15fr)
    minmax(120px, 0.9fr);
  border-block: 1px solid var(--line);
}

.inspection-queue-facts > span {
  min-width: 0;
  padding: 10px 12px 10px 0;
}

.inspection-queue-facts > span + span {
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.inspection-queue-facts small,
.inspection-queue-facts strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspection-queue-facts small:first-child {
  margin-bottom: 3px;
  color: var(--faint);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.inspection-queue-reference {
  min-width: 0;
  display: flex;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  overflow: hidden;
}

.inspection-queue-reference span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspection-notice-actions {
  padding-top: 0;
  padding-bottom: 10px;
}

.inspection-queue-details {
  border-top: 1px solid var(--line);
}

.inspection-queue-details > summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--cyan);
  cursor: pointer;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 700;
}

.inspection-queue-details > summary::-webkit-details-marker {
  display: none;
}

.inspection-queue-details > summary::after {
  content: '+';
  margin-left: auto;
  color: var(--muted);
  font-size: 1rem;
}

.inspection-queue-details[open] > summary::after {
  content: '−';
}

.inspection-queue-details > summary small {
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

.inspection-queue-detail-content {
  display: grid;
  gap: 10px;
  padding-bottom: 13px;
  border-top: 1px solid var(--line);
}

.ncr-closure-ready {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--green) 32%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--green) 7%, transparent);
}

.ncr-closure-ready .status-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--green);
}

.ncr-closure-ready small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
}

.ncr-closure-confirm {
  align-self: end;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

@media (max-width: 980px) {
  .inspection-queue-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inspection-project-system-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inspection-queue-facts > span:nth-child(n + 3) {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .inspection-queue-facts > span:nth-child(even) {
    padding-left: 12px;
    border-left: 1px solid var(--line);
  }

  .inspection-queue-facts > span:nth-child(2) {
    border-top: 0;
  }

  .inspection-queue-facts > span:nth-child(n + 4) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  .vdl-stats-grid,
  .vdl-stats-metric-grid,
  .vdl-stats-definition-list,
  .vdl-chart-grid,
  .vdl-donut-layout,
  .vdl-histogram-row,
  .vdl-dual-bar-row {
    grid-template-columns: 1fr;
  }

  .vdl-dual-bar-row {
    gap: 7px;
  }

  .vdl-chart-legend span {
    grid-template-columns: 12px minmax(0, 1fr);
  }

  .vdl-chart-legend small {
    grid-column: 2;
  }

  .inspection-queue-heading {
    gap: 8px;
  }

  .inspection-queue-facts {
    grid-template-columns: 1fr;
  }

  .inspection-queue-facts > span,
  .inspection-queue-facts > span + span,
  .inspection-queue-facts > span:nth-child(3) {
    padding: 9px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .inspection-queue-facts > span:first-child {
    border-top: 0;
  }

  .inspection-queue-reference {
    display: grid;
    gap: 4px;
  }

  .inspection-project-system-panel {
    grid-template-columns: 1fr;
  }

  .inspection-queue-details > summary small {
    display: none;
  }
}

/* Inspection registry: compact list first, operational actions in the selected record. */
.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;
}

.inspection-list-table {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.inspection-list-header,
.inspection-list-row {
  display: grid;
  grid-template-columns:
    minmax(145px, 1.05fr)
    minmax(125px, 0.9fr)
    minmax(84px, 0.52fr)
    minmax(84px, 0.52fr)
    minmax(52px, 0.3fr)
    minmax(140px, 1fr)
    minmax(140px, 0.95fr)
    minmax(96px, 0.55fr)
    minmax(80px, auto);
  gap: 0;
  align-items: center;
}

.inspection-list-header {
  min-height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  background: color-mix(in srgb, var(--cyan) 5%, var(--surface-soft));
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
}

.inspection-list-header > span,
.inspection-list-cell {
  min-width: 0;
  padding-inline: 10px;
}

.inspection-list-header > span:first-child,
.inspection-list-cell:first-child {
  padding-left: 2px;
}

.inspection-list-row {
  min-height: 82px;
  padding: 10px 12px;
  border-left: 3px solid var(--cyan);
  background: rgba(255, 255, 255, 0.015);
  transition: background 150ms ease, border-color 150ms ease;
}

.inspection-list-row + .inspection-list-row {
  border-top: 1px solid var(--line);
}

.inspection-list-row:hover {
  background: color-mix(in srgb, var(--cyan) 5%, var(--surface-soft));
}

.inspection-list-row.is-cancelled {
  border-left-color: var(--red);
  opacity: 0.72;
}

.inspection-list-cell {
  display: grid;
  gap: 3px;
}

.inspection-list-cell strong,
.inspection-list-cell small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspection-list-cell small {
  color: var(--muted);
  font-size: 0.75rem;
}

.inspection-list-identity strong {
  color: var(--cyan);
}

.inspection-list-days strong {
  width: max-content;
  min-width: 34px;
  padding: 4px 8px;
  border: 1px solid rgba(66, 216, 236, 0.28);
  border-radius: 999px;
  color: var(--cyan);
  text-align: center;
  background: rgba(66, 216, 236, 0.08);
}

.inspection-list-status-cell,
.inspection-list-action {
  align-content: center;
}

.inspection-list-action {
  justify-items: end;
  padding-right: 0;
}

.inspection-list-action .ghost-button {
  min-width: 78px;
  white-space: nowrap;
}

.agency-list-table,
.inspector-list-table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.agency-list-header,
.agency-list-row,
.inspector-list-header,
.inspector-list-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(280px, 1.55fr) minmax(210px, 1fr) minmax(110px, 0.5fr) minmax(170px, auto);
  align-items: center;
}

.inspector-list-header,
.inspector-list-row {
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.15fr) minmax(210px, 1fr) minmax(230px, 1.25fr) minmax(170px, 0.9fr) minmax(250px, auto);
}

.agency-list-header,
.inspector-list-header {
  min-height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  background: color-mix(in srgb, var(--cyan) 5%, var(--surface-soft));
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
}

.agency-list-header > span,
.agency-list-cell,
.inspector-list-header > span,
.inspector-list-cell {
  min-width: 0;
  padding-inline: 10px;
}

.agency-list-row,
.inspector-list-row {
  min-height: 76px;
  padding: 10px 12px;
  border-left: 3px solid var(--cyan);
  background: rgba(255, 255, 255, 0.015);
}

.agency-list-row + .agency-list-row,
.inspector-list-row + .inspector-list-row {
  border-top: 1px solid var(--line);
}

.agency-list-row:hover,
.inspector-list-row:hover {
  background: color-mix(in srgb, var(--cyan) 5%, var(--surface-soft));
}

.agency-list-cell,
.inspector-list-cell {
  display: grid;
  gap: 3px;
}

.agency-list-cell strong,
.agency-list-cell small,
.inspector-list-cell strong,
.inspector-list-cell small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agency-list-cell small,
.inspector-list-cell small {
  color: var(--muted);
  font-size: 0.75rem;
}

.agency-list-actions,
.inspector-list-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-left: 10px;
  min-width: 0;
}

.agency-list-actions .ghost-button,
.inspector-list-actions .ghost-button {
  min-width: 86px;
  white-space: nowrap;
}

.inspection-queue-status.tone-red {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 35%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

.inspection-detail-modal {
  width: min(1120px, calc(100vw - 32px));
}

.inspection-detail-intro {
  margin: 0 0 12px;
  color: var(--muted);
}

.inspection-detail-modal .inspection-notice-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  background: rgba(255, 255, 255, 0.015);
}

.inspection-detail-modal .inspection-notice-actions {
  padding-top: 12px;
}

@media (max-width: 1100px) {
  .inspection-list-header,
  .agency-list-header,
  .inspector-list-header {
    display: none;
  }

  .inspection-list-row,
  .agency-list-row,
  .inspector-list-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    align-items: start;
  }

  .inspection-list-cell,
  .agency-list-cell,
  .inspector-list-cell {
    padding: 0;
  }

  .inspection-list-cell::before,
  .agency-list-cell::before,
  .inspector-list-cell::before {
    content: attr(data-label);
    color: var(--faint);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .inspection-list-action {
    grid-column: 1 / -1;
    justify-items: stretch;
  }

  .inspection-list-action::before {
    display: none;
  }

  .agency-list-actions,
  .inspector-list-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-left: 0;
  }
}

@media (max-width: 620px) {
  .inspection-list-row,
  .agency-list-row,
  .inspector-list-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .inspection-list-action {
    grid-column: auto;
  }

  .inspection-detail-modal {
    width: calc(100vw - 12px);
  }

  .agency-list-actions,
  .inspector-list-actions {
    display: grid;
  }
}

/* V1 usability pass: compact data views, calmer surfaces, solid light mode. */
.workspace {
  --module-gap: 14px;
}

.project-hero,
.hero-strip {
  margin-bottom: var(--module-gap);
}

.project-hero,
.hero-strip,
.expediting-po-commandbar,
.project-stat-grid,
.module-overview,
.reports-kpi-grid {
  border-radius: 8px;
}

.project-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  gap: 14px;
  align-items: stretch;
  padding: 0;
}

.project-hero > div:first-child,
.hero-strip > div:first-child {
  min-width: 0;
  display: grid;
  align-content: end;
  gap: 8px;
}

.project-hero h1,
.hero-strip h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(2rem, 3.1vw, 3.35rem);
  letter-spacing: 0;
  line-height: 1.04;
}

.vdl-document-hero h1,
.po-detail-hero h1,
.project-hero h1:where(.technical-title) {
  max-width: 1120px;
  font-size: clamp(1.25rem, 1.65vw, 1.85rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
  word-break: normal;
}

.vdl-admin-correction-panel {
  display: block;
}

.vdl-admin-correction-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}

.vdl-admin-correction-panel summary::-webkit-details-marker {
  display: none;
}

.vdl-admin-correction-panel summary span,
.vdl-admin-correction-panel summary small,
.vdl-admin-correction-panel summary strong {
  display: block;
}

.vdl-admin-correction-body {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.vdl-admin-correction-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.module-admin-correction-panel {
  margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 88%, var(--cyan) 12%);
}

.module-admin-correction-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.module-admin-correction-panel summary::-webkit-details-marker {
  display: none;
}

.module-admin-correction-panel summary span,
.module-admin-correction-panel summary small,
.module-admin-correction-panel summary strong {
  display: block;
}

.module-admin-correction-body {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}

.module-admin-correction-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.module-admin-correction-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vdl-document-hero p {
  max-width: 1120px;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
}

.project-hero p,
.hero-strip p {
  max-width: 920px;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.project-hero-action,
.project-selector-card,
.po-detail-actions,
.reports-actions {
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
}

.project-hero-action,
.project-selector-card {
  padding: 12px;
}

.project-hero-action .primary-action,
.project-selector-card .primary-action {
  width: 100%;
}

.project-stat-grid,
.module-overview,
.reports-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: var(--module-gap);
}

.project-stat,
.module-card,
.kpi-card {
  min-height: 84px;
  padding: 13px;
  border-radius: 8px;
  box-shadow: none;
  background: var(--surface-soft);
}

.project-stat span,
.project-stat small,
.module-card span,
.module-card small,
.kpi-card span,
.kpi-card small,
.kpi-card em {
  font-size: 0.78rem;
  line-height: 1.25;
}

.project-stat strong,
.module-card strong,
.kpi-card strong {
  font-size: clamp(1.7rem, 2.2vw, 2.15rem);
  line-height: 1;
}

.project-stat small,
.module-card small,
.kpi-card small {
  color: var(--muted);
}

.panel {
  padding: 16px;
  box-shadow: none;
}

.panel-header,
.panel-header.project-directory-header,
.panel-header.dc-toolbar {
  min-height: 0;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.panel h2,
.drawer h2 {
  font-size: 1.05rem;
}

.dashboard-grid,
.reports-layout,
.inspection-layout,
.vdl-register-layout,
.quality-page .ncr-register-panel,
.project-workspace-grid,
.po-detail-layout {
  gap: var(--module-gap);
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
}

.vdl-register-panel,
.inspection-notice-panel,
.ncr-register-panel,
.reports-library-panel,
.formal-report-library {
  overflow: hidden;
}

.vdl-table-wrap,
.ncr-table-wrap,
.entry-table-wrap {
  border-radius: 8px;
  background: var(--surface);
}

.vdl-table,
.ncr-register-table,
.entry-table {
  font-size: 0.86rem;
}

.vdl-table th,
.vdl-table td,
.ncr-register-table th,
.ncr-register-table td,
.entry-table th,
.entry-table td {
  padding: 8px 10px;
  vertical-align: top;
}

.dc-toolbar,
.generic-filter-menu,
.reports-actions,
.inspection-filter-menu,
.vdl-filter-menu {
  gap: 8px;
}

.dc-toolbar input,
.dc-toolbar select,
.generic-filter-menu input,
.generic-filter-menu select,
.reports-actions input,
.reports-actions select,
.inspection-filter-menu input,
.inspection-filter-menu select,
.vdl-filter-menu input,
.vdl-filter-menu select {
  min-height: 36px;
}

.ghost-button,
.primary-action,
button.project-stat,
.module-card {
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.ghost-button:hover,
.primary-action:hover,
button.project-stat:hover,
.module-card:hover {
  transform: translateY(-1px);
}

.app-shell[data-theme="light"] .project-hero-action,
.app-shell[data-theme="light"] .project-selector-card,
.app-shell[data-theme="light"] .expediting-po-commandbar,
.app-shell[data-theme="light"] .project-stat,
.app-shell[data-theme="light"] .module-card,
.app-shell[data-theme="light"] .kpi-card,
.app-shell[data-theme="light"] .panel {
  background: #ffffff;
  box-shadow: none;
}

.app-shell[data-theme="light"] .project-stat,
.app-shell[data-theme="light"] .module-card,
.app-shell[data-theme="light"] .kpi-card {
  background: #f7fbff;
}

.app-shell[data-theme="light"] .panel,
.app-shell[data-theme="light"] .module-card,
.app-shell[data-theme="light"] .project-selector-card,
.app-shell[data-theme="light"] .project-stat,
.app-shell[data-theme="light"] .workflow-modal,
.app-shell[data-theme="light"] .drawer,
.app-shell[data-theme="light"] .toast,
.app-shell[data-theme="light"] .entry-table-wrap,
.app-shell[data-theme="light"] .vdl-table-wrap,
.app-shell[data-theme="light"] .ncr-table-wrap {
  background: #ffffff;
  backdrop-filter: none;
}

.app-shell[data-theme="light"] input,
.app-shell[data-theme="light"] select,
.app-shell[data-theme="light"] textarea {
  background: #f8fbff;
  color: #0c1825;
}

.app-shell[data-theme="light"] .role-management-card,
.app-shell[data-theme="light"] .company-card,
.app-shell[data-theme="light"] .user-access-card,
.app-shell[data-theme="light"] .agency-list-row,
.app-shell[data-theme="light"] .inspector-list-row,
.app-shell[data-theme="light"] .inspection-notice-card,
.app-shell[data-theme="light"] .inspection-list-row,
.app-shell[data-theme="light"] .ncr-register-row,
.app-shell[data-theme="light"] .expediting-row,
.app-shell[data-theme="light"] .vdl-row,
.app-shell[data-theme="light"] .reports-readiness-row,
.app-shell[data-theme="light"] .module-admin-correction-panel,
.app-shell[data-theme="light"] .inspection-project-system-panel,
.app-shell[data-theme="light"] .inspector-profile-section,
.app-shell[data-theme="light"] .inspector-certification-picker,
.app-shell[data-theme="light"] .inspector-discipline-picker,
.app-shell[data-theme="light"] .inspector-cert-panel,
.app-shell[data-theme="light"] .inspector-cert-grid label,
.app-shell[data-theme="light"] .vdl-chart-card {
  background: #ffffff;
  border-color: rgba(32, 75, 105, 0.16);
  color: #0c1825;
  box-shadow: none;
}

.app-shell[data-theme="light"] .agency-list-row:hover,
.app-shell[data-theme="light"] .inspector-list-row:hover,
.app-shell[data-theme="light"] .inspection-notice-card:hover,
.app-shell[data-theme="light"] .inspection-list-row:hover,
.app-shell[data-theme="light"] .ncr-register-row:hover,
.app-shell[data-theme="light"] .expediting-row:hover,
.app-shell[data-theme="light"] .vdl-row:hover {
  background: #f3f9fd;
  border-color: rgba(31, 134, 158, 0.36);
}

.app-shell[data-theme="light"] .inspector-profile-section summary,
.app-shell[data-theme="light"] .module-admin-correction-panel summary,
.app-shell[data-theme="light"] .inspection-project-system-panel,
.app-shell[data-theme="light"] .inspection-step-title,
.app-shell[data-theme="light"] .inspector-cert-tabs button {
  background: #f7fbff;
}

.app-shell[data-theme="light"] .inspector-cert-tabs button.active {
  background: #e7f7fb;
  color: #075b6a;
  border-color: rgba(31, 134, 158, 0.38);
}

.entry-table th,
.entry-table td {
  padding: 8px 9px;
}

.entry-table input,
.entry-table select {
  min-height: 34px;
}

.role-management-card,
.company-card,
.user-access-card,
.inspection-notice-card,
.ncr-register-row,
.expediting-row,
.vdl-row,
.reports-readiness-row,
.inspection-list-row {
  background: var(--surface-soft);
}

.project-stat {
  min-height: 86px;
}

.panel-kicker,
.eyebrow {
  letter-spacing: 0.08rem;
}

[data-sortable-column] {
  cursor: pointer;
  outline-offset: 3px;
  user-select: none;
}

[data-sortable-column]::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 7px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--faint);
  opacity: 0.46;
  transform: translateY(-1px);
}

[data-sortable-column]:hover::after,
[data-sortable-column]:focus-visible::after {
  border-top-color: var(--cyan);
  opacity: 0.92;
}

[data-sortable-column][data-sort-direction="asc"]::after {
  border-top: 0;
  border-bottom: 5px solid var(--cyan);
  opacity: 1;
}

[data-sortable-column][data-sort-direction="desc"]::after {
  border-top-color: var(--cyan);
  opacity: 1;
}

[data-sortable-column]:focus-visible {
  border-radius: 4px;
  outline: 2px solid color-mix(in srgb, var(--cyan) 55%, transparent);
}

.compact-textarea,
:is(.project-form, .po-form, .inspection-form, .mpr-form, .user-form, .company-form, .workflow-modal) textarea.compact-textarea {
  min-height: 58px;
}

.app-shell[data-theme="light"] .expediting-po-commandbar,
.app-shell[data-theme="light"] .expediting-po-facts span,
.app-shell[data-theme="light"] .expediting-action-tab,
.app-shell[data-theme="light"] .metric-bar {
  backdrop-filter: none;
}

@media (max-width: 980px) {
  .project-hero {
    grid-template-columns: 1fr;
  }

  .project-hero-action,
  .project-selector-card,
  .po-detail-actions {
    width: 100%;
  }

  .expediting-po-facts,
  .expediting-action-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .expediting-po-facts,
  .expediting-action-tabs {
    grid-template-columns: 1fr;
  }
}