:root {
  --bg-main: #f4f7fb;
  --bg-surface: #ffffff;
  --bg-surface-subtle: #f8fafd;
  --bg-surface-muted: #eef3f9;
  --bg-surface-chrome: #e8eef6;
  --bg-surface-selected: #edf4ff;
  --bg-readonly: #f2f5fa;
  --bg-sidebar: #13315c;
  --bg-sidebar-gradient: linear-gradient(180deg, #12355f 0%, #173f6a 55%, #245b8d 100%);
  --bg-sidebar-accent: #1f4e8c;
  --bg-sidebar-frost:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 22%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, rgba(12, 42, 80, 0.76) 0%, rgba(19, 56, 97, 0.62) 46%, rgba(37, 96, 147, 0.42) 100%);
  --border-sidebar-frost: rgba(200, 216, 241, 0.14);
  --shadow-sidebar-frost: 0 12px 24px rgba(11, 24, 49, 0.12);
  --bg-topbar-frost: var(--bg-sidebar-frost);
  --border-topbar-frost: var(--border-sidebar-frost);
  --shadow-topbar-frost: var(--shadow-sidebar-frost);
  --text-main: #172033;
  --text-soft: #596780;
  --text-muted: #6b7891;
  --border: #d9dee8;
  --shadow: 0 12px 36px rgba(9, 18, 38, 0.08);
  --status-good: #198754;
  --status-attention: #d17b0f;
  --status-issue: #cc3a3a;
  --status-completed: #0f766e;
  --section-stack-gap: 14px;
  --table-toolbar-gap: 12px;
  --table-pagination-top-gap: 12px;
  --table-pagination-bottom-gap: 10px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: var(--text-main);
  background: var(--bg-main);
}

.auth-html {
  min-height: 100%;
}

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

.auth-page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow-x: hidden;
}

.auth-page-tenant,
.auth-page-owner {
  background:
    radial-gradient(circle at 14% 16%, rgba(31, 78, 140, 0.2), transparent 33%),
    radial-gradient(circle at 84% 10%, rgba(19, 49, 92, 0.14), transparent 28%),
    linear-gradient(180deg, #e7eef8 0%, #eef4fb 54%, #e2e9f4 100%);
}

.auth-card {
  width: min(900px, 100%);
  background: var(--bg-surface);
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  z-index: 1;
}

.auth-card-tenant,
.auth-card-owner {
  border-color: rgba(19, 49, 92, 0.12);
  box-shadow: 0 28px 72px rgba(9, 18, 38, 0.14);
  animation: auth-owner-card-enter 460ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.auth-brand {
  background: linear-gradient(160deg, #13315c, #1f4e8c 60%, #2a6ab4);
  color: #f4f8ff;
  padding: 42px 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.auth-brand > * {
  position: relative;
  z-index: 1;
}

.brand-mark {
  display: block;
  width: 100%;
  height: auto;
}

.auth-brand-mark-wrap {
  width: clamp(122px, 14.4vw, 148px);
}

.brand-mark-auth {
  filter: drop-shadow(0 14px 24px rgba(9, 18, 38, 0.18));
}

.auth-brand-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.auth-brand-lockup .auth-brand-mark-wrap {
  flex: 0 0 auto;
}

.auth-brand-wordmark {
  margin: 0;
  font-size: clamp(2.15rem, 4vw, 2.9rem);
  line-height: 0.96;
  letter-spacing: 0.02em;
  color: #f7fbff;
}

.auth-brand-tenant,
.auth-brand-owner {
  background: linear-gradient(180deg, #0e2645 0%, #13315c 48%, #1f4e8c 100%);
}

.auth-brand-tenant::before,
.auth-brand-tenant::after,
.auth-brand-owner::before,
.auth-brand-owner::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.auth-brand-tenant::before {
  inset: 28px -34px auto auto;
  width: 184px;
  height: 184px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(211, 228, 248, 0.2) 0%, rgba(211, 228, 248, 0) 72%);
  animation: owner-auth-pulse 8s ease-in-out infinite;
}

.auth-brand-tenant::after {
  inset: auto -90px -84px 38%;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(221, 233, 251, 0.2);
  border-radius: 50%;
  animation: owner-auth-orbit 18s linear infinite;
}

.auth-brand-owner::before {
  inset: 22px -44px auto auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(211, 228, 248, 0.22) 0%, rgba(211, 228, 248, 0) 70%);
  animation: owner-auth-pulse 8s ease-in-out infinite;
}

.auth-brand-owner::after {
  inset: auto -108px -94px 30%;
  width: 292px;
  height: 292px;
  border: 1px solid rgba(221, 233, 251, 0.22);
  border-radius: 50%;
  animation: owner-auth-orbit 16s linear infinite;
}

.auth-brand h1 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: 0.2px;
}

.auth-brand-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(236, 243, 255, 0.9);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.auth-brand p {
  margin: 0;
  color: #dde8fb;
  line-height: 1.45;
}

.auth-brand-lede {
  max-width: 30ch;
  color: #f7faff;
  font-size: 1.02rem;
}

.auth-brand-points {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.auth-brand-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e7eefc;
  font-size: 0.95rem;
}

.auth-brand-points li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d3e4f8;
  box-shadow: 0 0 0 6px rgba(211, 228, 248, 0.12);
  flex: 0 0 auto;
}

.auth-panel {
  padding: 32px;
}

.auth-panel-tenant,
.auth-panel-owner {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 253, 0.98) 100%);
}

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

.auth-locale-switcher-form {
  margin: 0;
  justify-self: end;
}

.auth-panel-topbar .auth-locale-switcher-form {
  margin-left: auto;
}

.auth-panel .locale-switcher-label {
  color: #5c6b82;
}

.auth-panel .locale-switcher-label span {
  color: #5c6b82;
}

.auth-panel .locale-switcher-select {
  color: #163055;
  background: var(--bg-surface);
  border: 1px solid #c7d3e3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.auth-panel .locale-switcher-select:focus-visible {
  outline: none;
  border-color: #5f92d8;
  box-shadow: 0 0 0 3px rgba(95, 146, 216, 0.2);
}

.auth-surface-badge {
  margin: 0;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.auth-surface-badge-tenant,
.auth-surface-badge-owner {
  color: #163055;
  background: rgba(19, 49, 92, 0.06);
  border: 1px solid rgba(19, 49, 92, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.auth-tabs {
  display: inline-flex;
  padding: 4px;
  background: var(--bg-surface-chrome);
  border-radius: 999px;
  margin-bottom: 16px;
}

.auth-tab {
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--text-soft);
}

.auth-tab.active {
  background: var(--bg-surface);
  color: #0f2950;
  box-shadow: 0 4px 12px rgba(16, 32, 56, 0.1);
}

.auth-panel h2 {
  margin: 8px 0 6px;
  font-size: 1.35rem;
}

.auth-panel .subtitle {
  margin: 0 0 20px;
  color: var(--text-soft);
  font-size: 0.94rem;
}

.auth-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.auth-2fa-meta {
  margin-top: -12px;
}

.auth-inline-cancel {
  margin-top: 10px;
}

.auth-inline-link-wrap {
  margin-top: 10px;
}

.auth-cookie-link-wrap {
  margin: 0 0 10px;
}

.auth-inline-link {
  color: #1f4e8c;
  font-weight: 600;
}

.auth-inline-link:hover,
.auth-inline-link:focus-visible {
  text-decoration: underline;
}

.auth-tenant-card-list {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
}

.auth-tenant-card-form {
  margin: 0;
}

.auth-tenant-card-button {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface-subtle);
  color: var(--text-main);
  padding: 12px 14px;
  text-align: left;
  display: grid;
  gap: 4px;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}

.auth-tenant-card-button:hover,
.auth-tenant-card-button:focus-visible {
  border-color: #8fbaf7;
  box-shadow: 0 8px 18px rgba(15, 46, 92, 0.09);
  transform: translateY(-1px);
}

.auth-tenant-card-title {
  font-weight: 700;
  color: #11335f;
}

.auth-tenant-card-meta {
  font-size: 0.86rem;
  color: var(--text-soft);
}

@keyframes auth-owner-card-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

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

@keyframes owner-auth-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.65;
  }
}

@keyframes owner-auth-orbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card-tenant,
  .auth-card-owner,
  .auth-brand-tenant::before,
  .auth-brand-tenant::after,
  .auth-brand-owner::before,
  .auth-brand-owner::after {
    animation: none;
  }
}

.legal-panel {
  margin-top: 8px;
  padding: 12px;
}

.legal-panel p {
  margin: 0 0 8px;
}

.legal-panel p:last-child {
  margin-bottom: 0;
}

form {
  display: grid;
  gap: 12px;
}

.inline-form {
  display: inline;
  gap: 0;
}

.user-table-remove-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}

.user-table-remove-form input[type="text"] {
  min-width: 180px;
  width: min(100%, 240px);
  padding: 7px 9px;
}

.owner-inline-action-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}

.owner-inline-action-form input[type="text"] {
  min-width: 220px;
  padding: 7px 9px;
}

.owner-owner-bootstrap-panel {
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
}

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

input,
select,
textarea {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text-main);
  background: var(--bg-surface);
}

textarea {
  min-height: 110px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #bfdbff;
  outline-offset: 1px;
  border-color: #8fbaf7;
}

input[readonly],
textarea[readonly] {
  border: 0;
  background: transparent;
  color: #5f6b7a;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

input[readonly]:focus,
textarea[readonly]:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.button-primary,
.button-secondary,
.button-plus,
.button-danger,
.button-success,
.button-attention,
.dropdown-action {
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.08s ease, opacity 0.12s ease;
}

.button-primary {
  background: #1f4e8c;
  color: #fff;
  font-weight: 700;
  padding: 11px 14px;
}

.button-secondary {
  background: var(--bg-surface-chrome);
  color: #1a365f;
  font-weight: 700;
  padding: 11px 14px;
}

.button-plus {
  background: #184074;
  color: #fff;
  font-weight: 700;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.button-plus .plus {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 1.2rem;
  line-height: 1;
}

.button-primary:hover,
.button-secondary:hover,
.button-plus:hover,
.button-danger:hover,
.button-success:hover,
.button-attention:hover,
.dropdown-action:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

.button-danger {
  background: #ca3f3f;
  color: #fff;
  font-weight: 700;
  padding: 11px 14px;
}

.button-success {
  background: #198754;
  color: #fff;
  font-weight: 700;
  padding: 11px 14px;
}

.button-attention {
  background: #dd8a1f;
  color: #fff;
  font-weight: 700;
  padding: 11px 14px;
}

.button-primary:disabled,
.button-secondary:disabled,
.button-plus:disabled,
.button-danger:disabled,
.button-success:disabled,
.button-attention:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.button-small {
  padding: 7px 10px;
  font-size: 0.82rem;
  border-radius: 8px;
}

.scroll-jump-button {
  position: fixed;
  right: 16px;
  max-width: min(220px, calc(100vw - 32px));
  padding: 10px 14px;
  border: 1px solid var(--border-topbar-frost);
  border-radius: 999px;
  background: var(--bg-topbar-frost);
  box-shadow:
    var(--shadow-topbar-frost),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(140, 201, 255, 0.04);
  backdrop-filter: blur(2.5px) saturate(124%) brightness(1.01);
  -webkit-backdrop-filter: blur(2.5px) saturate(124%) brightness(1.01);
  color: #edf5ff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0.18s,
    box-shadow 0.18s ease,
    background 0.18s ease;
  z-index: 28;
}

.scroll-jump-button.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

.scroll-jump-button:hover,
.scroll-jump-button:focus-visible {
  box-shadow:
    0 16px 28px rgba(11, 24, 49, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(140, 201, 255, 0.06);
}

.scroll-jump-button.is-visible:hover,
.scroll-jump-button.is-visible:focus-visible {
  transform: translate3d(0, -1px, 0);
}

.scroll-jump-button:focus-visible {
  outline: 2px solid rgba(237, 245, 255, 0.92);
  outline-offset: 2px;
}

.scroll-jump-button-top {
  top: 96px;
}

.scroll-jump-button-bottom {
  bottom: 18px;
}

.flash-wrap {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.flash {
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 0.92rem;
  border: 1px solid transparent;
}

.flash-success {
  background: #e8f7ef;
  border-color: #bfe8cf;
  color: #165b37;
}

.flash-error {
  background: #ffefef;
  border-color: #f6c7c7;
  color: #8d1f1f;
}

.flash-info {
  background: #eef5ff;
  border-color: #c9dcff;
  color: #1c3f73;
}

.flash-warning {
  background: #fff7e9;
  border-color: #f1d4a3;
  color: #7a5111;
}

.cookie-consent-banner {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: min(560px, calc(100vw - 36px));
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #c9d8ef;
  border-radius: 14px;
  box-shadow: 0 18px 36px rgba(16, 32, 56, 0.14);
  padding: 14px;
  z-index: 90;
  display: grid;
  gap: 10px;
}

.cookie-consent-head h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.cookie-consent-head p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.87rem;
  line-height: 1.35;
}

.cookie-consent-form {
  margin: 0;
  display: grid;
  gap: 10px;
}

.cookie-consent-checkbox {
  margin: 0;
}

.cookie-consent-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cookie-consent-links {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cookie-consent-links a {
  color: #1f4e8c;
  font-weight: 700;
}

.cookie-consent-links a:hover,
.cookie-consent-links a:focus-visible {
  text-decoration: underline;
}

.app-shell {
  --app-sidebar-width: 250px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, var(--app-sidebar-width)) minmax(0, 1fr);
  column-gap: 14px;
  position: relative;
  background: var(--bg-main);
  transition:
    grid-template-columns 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    column-gap 0.18s ease;
}

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

.sidebar,
.field-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 14px;
  width: calc(var(--app-sidebar-width) - 14px);
  align-self: start;
  height: calc(100vh - 28px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  box-sizing: border-box;
  background: var(--bg-sidebar-frost);
  border: 1px solid var(--border-sidebar-frost);
  border-radius: 22px;
  box-shadow:
    var(--shadow-sidebar-frost),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(140, 201, 255, 0.04);
  backdrop-filter: blur(2.5px) saturate(122%) brightness(1.01);
  -webkit-backdrop-filter: blur(2.5px) saturate(122%) brightness(1.01);
  isolation: isolate;
}

.sidebar::before,
.field-sidebar::before,
.topbar::before,
.field-topbar::before,
.field-mobile-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.1) 16%,
      rgba(170, 226, 255, 0.08) 30%,
      rgba(255, 255, 255, 0.04) 46%,
      rgba(152, 208, 255, 0.08) 66%,
      rgba(255, 206, 229, 0.05) 82%,
      rgba(255, 255, 255, 0.24) 100%
    );
  pointer-events: none;
  opacity: 0.72;
  filter: blur(0.08px);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.sidebar::after,
.field-sidebar::after,
.topbar::after,
.field-topbar::after,
.field-mobile-nav::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.12), transparent 16%),
    radial-gradient(circle at 82% 12%, rgba(112, 198, 255, 0.09), transparent 18%),
    radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.07), transparent 20%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015) 20%, rgba(255, 255, 255, 0.008) 54%, rgba(255, 255, 255, 0.025) 100%);
  pointer-events: none;
  opacity: 0.58;
}

.sidebar > *,
.field-sidebar > *,
.topbar > *,
.field-topbar > *,
.field-mobile-nav > * {
  position: relative;
  z-index: 1;
}

.sidebar {
  color: #d9e6fb;
  padding: 28px 16px 18px;
  margin: 14px 0 14px 14px;
  display: grid;
  align-content: start;
  gap: 10px;
  z-index: 40;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transform-origin: left center;
  contain: paint;
}

.app-shell.sidebar-collapsed .sidebar {
  transform: translate3d(-100%, 0, 0);
  pointer-events: none;
}

.sidebar-branding {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0 0 24px;
}

.brand-mark-sidebar {
  width: 80px;
  flex: 0 0 auto;
}

.sidebar-branding .sidebar-title {
  margin: 0;
}

.sidebar-title {
  margin: 0 0 28px;
  font-size: 1.2rem;
  color: #ffffff;
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  z-index: 35;
}

.menu {
  display: grid;
  gap: 8px;
}

.menu-link {
  padding: 11px 12px;
  border-radius: 10px;
  color: #d9e6fb;
  font-weight: 600;
}

.menu-link:hover {
  background: rgba(181, 205, 242, 0.12);
}

.menu-link.active {
  background: var(--bg-sidebar-accent);
  color: #fff;
}

.sidebar-secondary {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(181, 205, 242, 0.24);
  display: grid;
  gap: 8px;
}

.sidebar-secondary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-secondary-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: #9fb7de;
}

.recent-screen-clear-form {
  margin: 0;
}

.recent-screen-clear-button {
  padding: 5px 8px;
  font-size: 0.75rem;
  border-radius: 7px;
}

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

.recent-screen-link {
  padding: 8px 10px;
  border-radius: 9px;
  color: #d9e6fb;
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1.28;
  background: rgba(181, 205, 242, 0.08);
}

.recent-screen-link:hover {
  background: rgba(181, 205, 242, 0.16);
}

.recent-screen-link.active {
  background: rgba(31, 78, 140, 0.55);
  color: #ffffff;
}

.recent-screen-empty {
  margin: 0;
  color: #acc1e1;
  font-size: 0.82rem;
}

.main-area {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}

@media (min-width: 768px) {
  .app-shell[data-sidebar-ready] {
    grid-template-columns: 1fr;
    column-gap: 0;
    transition: none;
  }

  .app-shell[data-sidebar-ready] .sidebar {
    position: fixed;
    top: 14px;
    left: 14px;
    width: calc(var(--app-sidebar-width) - 14px);
    height: calc(100vh - 28px);
    margin: 0;
    transition: none;
    will-change: auto;
  }

  .app-shell[data-sidebar-ready] .main-area {
    width: 100%;
    box-sizing: border-box;
    padding-left: calc(var(--app-sidebar-width) + 14px);
    transition: none;
    will-change: auto;
  }

  .app-shell[data-sidebar-ready][data-sidebar-interactive] .sidebar {
    transition:
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.18s ease;
    will-change: transform;
  }

  .app-shell[data-sidebar-ready][data-sidebar-interactive] .main-area {
    transition: padding-left 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: padding-left;
  }

  .app-shell[data-sidebar-ready].sidebar-collapsed .main-area {
    padding-left: 0;
  }

  .app-shell[data-sidebar-ready].sidebar-collapsed .sidebar {
    transform: translate3d(calc(-100% - 18px), 0, 0);
  }
}

.topbar,
.field-topbar {
  position: -webkit-sticky;
  position: sticky;
  top: 14px;
  z-index: 30;
  margin: 14px 16px 0;
  align-self: start;
  border: 1px solid var(--border-topbar-frost);
  border-radius: 18px;
  background: var(--bg-topbar-frost);
  box-shadow:
    var(--shadow-topbar-frost),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(140, 201, 255, 0.04);
  backdrop-filter: blur(2.5px) saturate(124%) brightness(1.01);
  -webkit-backdrop-filter: blur(2.5px) saturate(124%) brightness(1.01);
  color: #edf5ff;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}

.topbar-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.topbar-branding {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.topbar-brand-logo {
  width: 92px;
  height: 52px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-brand-logo.is-default {
  width: 68px;
}

.brand-mark-topbar {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  object-fit: contain;
}

.topbar-branding h1 {
  min-width: 0;
}

.topbar h1,
.field-topbar h1 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 0.1px;
  color: #ffffff;
}

.topbar-main h1 {
  min-width: 0;
}

.sidebar-toggle-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.sidebar-toggle-icon {
  position: relative;
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.sidebar-toggle-icon::before,
.sidebar-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.sidebar-toggle-icon::before {
  top: -5px;
}

.sidebar-toggle-icon::after {
  top: 5px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-search-shell {
  position: relative;
  width: min(420px, 38vw);
  min-width: 260px;
  transition: width 160ms ease;
}

.topbar-search-shell:focus-within {
  width: min(500px, 46vw);
}

.topbar-search-trigger-label {
  display: block;
}

.topbar-search-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(214, 227, 248, 0.22);
  border-radius: 999px;
  background: rgba(240, 246, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.topbar-search-shell:focus-within .topbar-search-field,
.topbar-search-shell.is-open .topbar-search-field {
  border-color: rgba(222, 236, 255, 0.42);
  background: rgba(248, 252, 255, 0.18);
}

.topbar-search-icon {
  position: relative;
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 auto;
}

.topbar-search-icon::before,
.topbar-search-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.topbar-search-icon::before {
  width: 9px;
  height: 9px;
  border: 2px solid rgba(239, 245, 255, 0.92);
  border-radius: 50%;
  top: 0;
  left: 0;
}

.topbar-search-icon::after {
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: rgba(239, 245, 255, 0.92);
  transform: rotate(45deg);
  transform-origin: center;
  right: 0;
  bottom: 1px;
}

.topbar-search-input {
  min-width: 0;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f7fbff;
  font-size: 0.94rem;
}

.topbar-search-input::placeholder {
  color: #d8e5f8;
}

.topbar-search-input:focus {
  outline: none;
}

.topbar-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.topbar-search-inline-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #dce9ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.topbar-search-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  min-width: 420px;
  max-height: min(70vh, 620px);
  overflow: auto;
  padding-top: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-surface);
  box-shadow: var(--shadow);
  z-index: 85;
}

.topbar-search-dropdown[hidden] {
  display: none;
}

.topbar-search-mobile-trigger {
  display: none;
}

.topbar-cookie-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  color: #dce9ff;
}

.topbar-cookie-link-compact {
  display: none;
}

.locale-switcher-form {
  margin: 0;
}

.locale-switcher-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-main);
}

.locale-switcher-select {
  min-width: 126px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.84rem;
  color: var(--text-main);
  background: var(--bg-surface);
  border: 1px solid var(--border);
}

.locale-switcher-select option {
  color: var(--text-main);
  background: var(--bg-surface);
}

.topbar .locale-switcher-label,
.field-topbar .locale-switcher-label {
  color: #dce9ff;
}

.topbar .locale-switcher-select,
.field-topbar .locale-switcher-select {
  color: #f4f8ff;
  background: rgba(240, 246, 255, 0.12);
  border: 1px solid rgba(214, 227, 248, 0.22);
}

.profile-trigger {
  border: 1px solid rgba(214, 227, 248, 0.22);
  background: rgba(240, 246, 255, 0.12);
  color: #f4f8ff;
  border-radius: 999px;
  padding: 5px 10px 5px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-width: 0;
}

.topbar .button-secondary,
.field-topbar .button-secondary {
  border: 1px solid rgba(214, 227, 248, 0.22);
  background: rgba(240, 246, 255, 0.12);
  color: #eef5ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.profile-trigger-label {
  display: block;
  min-width: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #d7e2f5;
}

.avatar-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1f4e8c;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.profile-menu {
  position: relative;
}

.notification-menu {
  position: relative;
}

.notification-trigger {
  position: relative;
  border: 1px solid rgba(214, 227, 248, 0.22);
  background: rgba(240, 246, 255, 0.12);
  color: #f4f8ff;
  border-radius: 999px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.notification-trigger-icon {
  font-size: 1rem;
  line-height: 1;
}

.notification-trigger-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dd4d4d;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(95, 15, 15, 0.25);
}

.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 210px;
  max-width: min(210px, calc(100vw - 32px));
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px;
  display: none;
  color: var(--text-main);
  z-index: 70;
}

.dropdown.is-open {
  display: block;
}

.dropdown a,
.dropdown-action {
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text-main);
  border-radius: 8px;
  display: block;
  padding: 9px 10px;
  border: none;
  font-size: 0.92rem;
}

.dropdown a:hover,
.dropdown-action:hover {
  background: var(--bg-surface-muted);
}

.notification-dropdown {
  width: min(428px, calc(100vw - 24px));
  max-width: min(428px, calc(100vw - 24px));
  padding: 8px 10px 10px;
  color: var(--text-main);
}

.notification-dropdown-head,
.notification-dropdown-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.notification-dropdown-head {
  margin-bottom: 6px;
}

.notification-dropdown-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text-main);
}

.notification-dropdown-meta {
  font-size: 0.78rem;
  color: var(--text-soft);
}

.notification-dropdown-list {
  display: grid;
  gap: 0;
  max-height: min(300px, 52vh);
  overflow: auto;
  margin: 0;
}

.notification-dropdown-item,
.notification-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface);
}

.notification-dropdown-item {
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.notification-dropdown-item.is-unread,
.notification-card.is-unread {
  border-color: rgba(44, 93, 167, 0.28);
  box-shadow: 0 0 0 1px rgba(44, 93, 167, 0.04);
}

.notification-dropdown-item.is-unread {
  background: linear-gradient(90deg, rgba(47, 119, 208, 0.06), rgba(47, 119, 208, 0));
  box-shadow: none;
}

.notification-dropdown-list .notification-dropdown-item:last-child {
  border-bottom: none;
}

.notification-item-meta,
.notification-card-head,
.notification-item-actions,
.notification-card-meta,
.notification-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-item-meta,
.notification-card-head {
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}

.notification-item-main {
  display: grid;
  gap: 2px;
  padding: 8px 4px;
  color: inherit;
}

.notification-item-main:hover,
.notification-item-main:focus-visible {
  background: var(--bg-surface-subtle);
  border-radius: 10px;
  outline: none;
}

.notification-item-title-group {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.notification-item-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2f77d0;
  flex: 0 0 7px;
  margin-top: 4px;
}

.notification-item-title {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.notification-item-text {
  display: none;
}

.notification-item-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.2;
}

.notification-inline-action,
.notification-inline-link,
.notification-footer-link {
  font-size: 0.8rem;
}

.notification-inline-quiet-action {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  color: #1f4e8c;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.notification-inline-quiet-action:hover,
.notification-inline-quiet-action:focus-visible {
  color: #173f6a;
  text-decoration: underline;
  outline: none;
}

.notification-dropdown-inline-form {
  margin: 0;
}

.notification-item-actions {
  margin-top: 10px;
  flex-wrap: wrap;
}

.notification-dropdown-item .notification-item-time {
  font-size: 0.68rem;
  color: var(--text-muted);
  padding-left: 13px;
}

.notification-category-chip,
.notification-state-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.notification-category-chip {
  background: #eef4ff;
  color: #294b7d;
}

.notification-category-chip.severity-warning {
  background: #fff4df;
  color: #8a5a00;
}

.notification-category-chip.severity-critical {
  background: #fbe6e6;
  color: #8f3030;
}

.notification-category-chip.severity-success {
  background: #e8f7ef;
  color: #1d6a45;
}

.notification-state-chip.is-unread {
  background: #dce9ff;
  color: #20477d;
}

.notification-state-chip.is-read {
  background: #eef1f7;
  color: #5f6c84;
}

.notification-empty-state {
  margin: 0;
  padding: 14px 6px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.notification-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.notification-filter-panel {
  margin-bottom: 18px;
}

.notification-filter-form {
  align-items: end;
}

.notification-list {
  display: grid;
  gap: 14px;
}

.notification-card {
  padding: 16px;
}

.notification-card h3 {
  margin: 12px 0 6px;
}

.notification-empty-panel {
  text-align: center;
}

.notification-empty-panel h3 {
  margin: 0;
}

.page-content {
  padding: 26px;
  min-width: 0;
}

body.sidebar-scroll-lock {
  overflow: hidden;
}

.field-shell {
  --app-sidebar-width: 280px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, var(--app-sidebar-width)) minmax(0, 1fr);
  column-gap: 14px;
  background: var(--bg-main);
}

.field-sidebar {
  color: #e6f0ff;
  padding: 24px 18px 18px;
  margin: 14px 0 14px 14px;
  display: grid;
  align-content: start;
  gap: 16px;
}

.field-brand {
  display: grid;
  gap: 8px;
}

.brand-mark-field {
  width: 112px;
}

.field-brand h1 {
  margin: 0;
  font-size: 1.28rem;
  color: #ffffff;
}

.field-brand p {
  margin: 0;
  color: #c7daf6;
  line-height: 1.5;
  font-size: 0.92rem;
}

.field-brand-kicker {
  color: #9fc0ef;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

.field-profile-card {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(238, 245, 255, 0.08);
  border: 1px solid rgba(186, 209, 239, 0.18);
}

.field-profile-name {
  font-weight: 700;
  color: #ffffff;
}

.field-profile-meta {
  color: #bdd2f2;
  font-size: 0.86rem;
}

.field-nav {
  display: grid;
  gap: 8px;
}

.field-nav-link,
.field-mobile-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #dce9ff;
  font-weight: 700;
  transition: background 0.12s ease, color 0.18s ease, transform 0.08s ease;
}

.field-nav-link {
  justify-content: flex-start;
}

.field-nav-link:hover,
.field-nav-link:focus-visible,
.field-mobile-link:hover,
.field-mobile-link:focus-visible {
  background: rgba(191, 214, 247, 0.12);
  transform: translateY(-1px);
}

.field-nav-link.active {
  background: var(--bg-sidebar-accent);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.field-mobile-link.active,
.field-mobile-link.is-pending-active {
  color: #ffffff;
}

.field-sidebar-switch {
  width: 100%;
  justify-content: center;
}

.field-main-area {
  display: grid;
  grid-template-rows: auto 1fr;
}

.field-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
}

.field-topbar .topbar-actions {
  margin-left: auto;
}

.field-page-content {
  padding-bottom: 32px;
}

.field-detail-page {
  display: grid;
  align-content: start;
  gap: 12px;
}

.field-detail-page > .entity-overview-header {
  margin-bottom: 0;
}

.field-detail-page > .overview-section-stack {
  margin-top: 0;
}

.field-mobile-nav {
  display: none;
  --field-mobile-link-count: 3;
  --field-mobile-link-gap: 8px;
  --field-mobile-link-padding: 8px;
  --field-mobile-indicator-width: 0px;
  --field-mobile-indicator-x: 0px;
}

.field-mobile-nav-indicator {
  position: absolute;
  top: var(--field-mobile-link-padding);
  bottom: var(--field-mobile-link-padding);
  left: 0;
  width: var(--field-mobile-indicator-width);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(37, 98, 166, 0.98), rgba(23, 72, 134, 0.96));
  border: 1px solid rgba(205, 225, 249, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 18px rgba(10, 27, 56, 0.18);
  transform: translate3d(var(--field-mobile-indicator-x), 0, 0);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  will-change: transform;
}

.field-mobile-nav.is-ready .field-mobile-nav-indicator {
  opacity: 1;
}

.field-mobile-nav.is-animated .field-mobile-nav-indicator {
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.12s ease;
}

.field-mobile-nav.is-transitioning .field-mobile-link.active:not(.is-pending-active) {
  color: #dce9ff;
}

.field-summary-cards .card .value {
  font-size: 1.6rem;
}

.field-empty-panel {
  padding: 20px;
  border-radius: 14px;
  background: var(--bg-surface-subtle);
  border: 1px dashed #bfd1ea;
}

.field-empty-panel h3,
.field-empty-panel p {
  margin: 0;
}

.field-empty-panel.is-compact {
  padding: 16px;
}

.field-work-card-list,
.field-inspection-card-list {
  display: grid;
  gap: 12px;
}

.field-work-card,
.field-inspection-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: var(--shadow);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}

.field-work-card:hover,
.field-work-card:focus-visible,
.field-inspection-card:hover,
.field-inspection-card:focus-visible {
  border-color: #8fbaf7;
  box-shadow: 0 14px 30px rgba(13, 35, 70, 0.1);
  transform: translateY(-1px);
}

.field-work-card.is-static {
  cursor: default;
}

.field-work-card.is-static:hover,
.field-work-card.is-static:focus-visible {
  transform: none;
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.field-work-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.field-source-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-surface-muted);
  color: #234872;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.1;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.field-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.1;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.field-status-assigned {
  background: #eef3fb;
  color: #31547b;
}

.field-status-started {
  background: #e6f4ff;
  color: #0d5f96;
}

.field-status-blocked,
.field-status-denied {
  background: #ffebeb;
  color: #a33030;
}

.field-status-ready_for_review {
  background: #fff4db;
  color: #9a6409;
}

.field-status-completed {
  background: #e7f8ef;
  color: #17724d;
}

.field-work-card-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #132947;
}

.field-work-card-meta,
.field-work-card-address,
.field-attachment-meta {
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

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

.field-work-card-grid > div {
  display: grid;
  gap: 2px;
}

.field-work-card-label {
  color: #5c6d84;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.field-work-card-value {
  color: #1b2d48;
  font-weight: 600;
}

.field-work-card-value-stack {
  display: grid;
  gap: 2px;
}

.field-work-card-address-inline {
  color: var(--text-soft);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
}

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

.field-material-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fbfcfe;
}

.field-material-name {
  font-weight: 700;
}

.field-material-meta {
  color: var(--text-soft);
  font-size: 0.9rem;
}

.field-attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.field-attachment-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.field-attachment-card:hover,
.field-attachment-card:focus-visible {
  border-color: #8fbaf7;
  box-shadow: 0 14px 28px rgba(14, 38, 73, 0.12);
}

.field-attachment-title {
  font-weight: 700;
  color: #173156;
  line-height: 1.4;
}

.field-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field-alert-panel {
  display: grid;
  gap: 10px;
}

.field-alert-panel h3,
.field-alert-panel p {
  margin: 0;
}

.field-alert-panel.is-warning {
  background: #fff7e6;
  border-color: #ead29e;
}

.field-alert-panel.is-info {
  background: #eef7ff;
  border-color: #b8d5f4;
}

.field-alert-panel.is-success {
  background: #edf9f1;
  border-color: #b5dcc4;
}

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

.page-header h2 {
  margin: 0;
  font-size: 1.3rem;
}

.entity-overview-header {
  align-items: flex-start;
  gap: 18px 24px;
}

.entity-overview-header-main {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1 1 440px;
}

.entity-overview-breadcrumbs {
  margin: 0;
}

.entity-overview-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.entity-overview-status {
  flex: 0 0 auto;
}

.entity-overview-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.entity-overview-primary-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.entity-overview-more {
  position: relative;
}

.entity-overview-more .dropdown {
  width: 236px;
}

.entity-overview-more .dropdown form {
  margin: 0;
}

.subtitle {
  color: var(--text-soft);
  margin: 2px 0 0;
}

.breadcrumbs {
  margin: 6px 0 0;
  font-size: 0.86rem;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.breadcrumbs a {
  color: #2f5f9f;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

@media (max-width: 960px) {
  .entity-overview-header {
    flex-direction: column;
  }

  .entity-overview-header-main {
    flex: 0 1 auto;
    width: 100%;
  }

  .entity-overview-actions,
  .entity-overview-primary-actions {
    justify-content: flex-start;
  }

  .field-page-content .entity-overview-header[data-overview-header="field_work_item"],
  .field-page-content .entity-overview-header[data-overview-header="field_inspection"] {
    margin-bottom: 10px;
  }

  .field-page-content .entity-overview-header[data-overview-header="field_work_item"] .entity-overview-header-main,
  .field-page-content .entity-overview-header[data-overview-header="field_inspection"] .entity-overview-header-main {
    gap: 4px;
  }
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.customer-type-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.customer-type-choice-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  color: var(--text-main);
  padding: 20px;
  text-decoration: none;
  display: grid;
  gap: 10px;
  min-height: 230px;
  align-content: start;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}

.customer-type-choice-card:hover,
.customer-type-choice-card:focus-visible {
  border-color: #8fbaf7;
  box-shadow: 0 10px 22px rgba(15, 46, 92, 0.1);
  transform: translateY(-1px);
}

.customer-type-choice-kicker {
  color: #4b678d;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.customer-type-choice-title {
  color: #11335f;
  font-size: 1.05rem;
  line-height: 1.35;
}

.customer-type-choice-text {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.5;
}

.customer-type-choice-points {
  margin: 0;
  padding-left: 18px;
  color: #355476;
  display: grid;
  gap: 6px;
}

.expert-overview-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card,
.panel,
.table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.card {
  padding: 15px;
}

.card h3 {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.87rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.owner-metric-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.owner-metric-help {
  position: relative;
  display: inline-block;
}

.owner-metric-help-toggle {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #9bb2d4;
  background: var(--bg-surface-muted);
  color: #295186;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.owner-metric-help-toggle::marker {
  content: "";
}

.owner-metric-help-toggle::-webkit-details-marker {
  display: none;
}

.owner-metric-help-toggle:focus-visible {
  outline: 2px solid #c0d5f1;
  outline-offset: 1px;
}

.owner-metric-help[open] .owner-metric-help-toggle {
  background: var(--bg-surface-chrome);
  border-color: #86a3cc;
}

.owner-metric-help-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(300px, 75vw);
  z-index: 32;
  background: var(--bg-surface);
  border: 1px solid #d8e1ee;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 12px 26px rgba(15, 31, 54, 0.16);
  color: #213450;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
}

.owner-metric-help-popover strong {
  display: block;
  margin-bottom: 4px;
  color: #546985;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.32px;
  text-transform: uppercase;
}

.owner-metric-help-popover p {
  margin: 0;
}

.card .value {
  margin-top: 5px;
  font-size: 1.6rem;
  font-weight: 800;
  color: #173766;
}

.owner-metrics-filter {
  margin-bottom: 16px;
  padding: 16px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.owner-metrics-filter label {
  display: grid;
  gap: 5px;
  color: #506a8f;
  font-size: 0.78rem;
  font-weight: 700;
}

.owner-metrics-filter select {
  min-width: 180px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-main);
  font: inherit;
}

.owner-metrics-card-note {
  margin: 7px 0 0;
  color: var(--text-soft);
  font-size: 0.84rem;
  line-height: 1.45;
}

.owner-metrics-privacy-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface-subtle);
  color: var(--text-soft);
  line-height: 1.5;
}

.owner-metrics-country-widget {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(220px, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 16px;
}

.owner-metrics-country-pie {
  display: block;
  width: min(100%, 230px);
  aspect-ratio: 1;
  filter: drop-shadow(0 14px 24px rgba(32, 54, 83, 0.14));
}

.owner-metrics-country-pie-base {
  fill: #f3f6fa;
  stroke: #d9e3ef;
  stroke-width: 1.2;
}

.owner-metrics-country-segment {
  stroke: var(--bg-surface);
  stroke-width: 1.6;
  transition: opacity 160ms ease, transform 160ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

.owner-metrics-country-segment:hover {
  opacity: 0.86;
  transform: scale(1.015);
}

.owner-metrics-country-color-0 {
  fill: #2563eb;
  background: #2563eb;
}

.owner-metrics-country-color-1 {
  fill: #0f9f8e;
  background: #0f9f8e;
}

.owner-metrics-country-color-2 {
  fill: #f59e0b;
  background: #f59e0b;
}

.owner-metrics-country-color-3 {
  fill: #7c3aed;
  background: #7c3aed;
}

.owner-metrics-country-color-4 {
  fill: #e11d48;
  background: #e11d48;
}

.owner-metrics-country-color-5 {
  fill: #16a34a;
  background: #16a34a;
}

.owner-metrics-country-color-6 {
  fill: #64748b;
  background: #64748b;
}

.owner-metrics-country-legend {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.owner-metrics-country-legend li {
  display: grid;
  grid-template-columns: 14px minmax(42px, 0.6fr) minmax(64px, 1fr) minmax(58px, auto);
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface-subtle);
  color: var(--text-soft);
  font-size: 0.88rem;
}

.owner-metrics-country-legend strong {
  color: var(--text-strong);
  letter-spacing: 0;
}

.owner-metrics-country-swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
}

.owner-metrics-chart {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 251, 255, 0.94) 100%),
    var(--bg-surface);
}

.owner-metrics-linechart {
  display: block;
  width: 100%;
  min-height: 260px;
}

.owner-metrics-linechart-grid {
  stroke: #dbe4ef;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.owner-metrics-linechart-axis {
  stroke: #9fb2c7;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.owner-metrics-linechart-axis-title,
.owner-metrics-linechart-y-label {
  fill: #607796;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0;
}

.owner-metrics-linechart-y-label {
  font-variant-numeric: tabular-nums;
}

.owner-metrics-linechart-area {
  fill: url("#owner-metrics-line-area-gradient");
}

.owner-metrics-linechart-area-stop-strong {
  stop-color: #2563eb;
  stop-opacity: 0.18;
}

.owner-metrics-linechart-area-stop-soft {
  stop-color: #2563eb;
  stop-opacity: 0.02;
}

.owner-metrics-linechart-line {
  fill: none;
  stroke: #2563eb;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 5px 8px rgba(37, 99, 235, 0.16));
}

.owner-metrics-linechart-point {
  fill: #ffffff;
  stroke: #2563eb;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  transition: r 140ms ease, stroke-width 140ms ease;
}

.owner-metrics-linechart-point:hover {
  r: 6;
  stroke-width: 3.5;
}

.owner-metrics-linechart-month {
  fill: #4f6685;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.owner-metrics-linechart-month.is-future {
  fill: #9cadbf;
}

@media (max-width: 720px) {
  .owner-metrics-filter {
    align-items: stretch;
  }

  .owner-metrics-filter label,
  .owner-metrics-filter select,
  .owner-metrics-filter .button-secondary {
    width: 100%;
  }

  .owner-metrics-chart {
    padding: 10px;
  }

  .owner-metrics-country-widget {
    grid-template-columns: 1fr;
  }

  .owner-metrics-country-pie {
    justify-self: center;
  }

  .owner-metrics-country-legend li {
    grid-template-columns: 14px minmax(40px, 0.6fr) minmax(54px, 1fr) minmax(52px, auto);
    gap: 8px;
  }
}

.workflow-continuity-panel {
  display: grid;
  gap: 12px;
}

.workflow-continuity-cards {
  margin-bottom: 0;
}

.workflow-continuity-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.workflow-continuity-card--next_step {
  background: var(--bg-surface-subtle);
  border-color: rgba(31, 78, 140, 0.18);
}

.workflow-continuity-eyebrow {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.workflow-continuity-card h3 {
  margin: 0;
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.workflow-continuity-state {
  margin: 0;
  color: #173766;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
}

.workflow-continuity-card--state-good .workflow-continuity-state {
  color: var(--status-good);
}

.workflow-continuity-card--state-attention .workflow-continuity-state {
  color: var(--status-attention);
}

.workflow-continuity-card--state-issue .workflow-continuity-state {
  color: var(--status-issue);
}

.workflow-continuity-card--state-completed .workflow-continuity-state {
  color: var(--status-completed);
}

.workflow-continuity-meta,
.workflow-continuity-description {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.85rem;
  line-height: 1.45;
}

.workflow-continuity-action {
  width: fit-content;
  margin-top: auto;
}

.commercial-focus-panel {
  display: grid;
  gap: 12px;
}

.commercial-focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.commercial-focus-card {
  min-height: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-surface-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.commercial-focus-card--neutral {
  border-color: #d8e1ee;
}

.commercial-focus-card--attention {
  border-color: rgba(209, 123, 15, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(209, 123, 15, 0.06) 100%);
}

.commercial-focus-card--issue {
  border-color: rgba(204, 58, 58, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(204, 58, 58, 0.06) 100%);
}

.commercial-focus-card--good {
  border-color: rgba(25, 135, 84, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(25, 135, 84, 0.06) 100%);
}

.commercial-focus-eyebrow {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.commercial-focus-card h4 {
  margin: 0;
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.commercial-focus-value {
  color: #173766;
  font-size: 1.34rem;
  font-weight: 800;
  line-height: 1.2;
}

.commercial-focus-state,
.commercial-focus-meta,
.commercial-focus-description {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.commercial-focus-state {
  color: #173766;
  font-weight: 700;
}

.commercial-focus-meta {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.commercial-focus-description {
  color: var(--text-soft);
}

.commercial-focus-card--good .commercial-focus-state {
  color: var(--status-good);
}

.commercial-focus-card--attention .commercial-focus-state {
  color: var(--status-attention);
}

.commercial-focus-card--issue .commercial-focus-state {
  color: var(--status-issue);
}

.commercial-focus-actions {
  width: 100%;
  margin-top: auto;
  padding-top: 4px;
}

.commercial-focus-action {
  width: fit-content;
}

.owner-operational-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.owner-operational-card {
  min-height: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-surface-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.owner-operational-card--neutral {
  border-color: #d8e1ee;
}

.owner-operational-card--attention {
  border-color: rgba(209, 123, 15, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(209, 123, 15, 0.06) 100%);
}

.owner-operational-card--issue {
  border-color: rgba(204, 58, 58, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(204, 58, 58, 0.06) 100%);
}

.owner-operational-card--good {
  border-color: rgba(25, 135, 84, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(25, 135, 84, 0.06) 100%);
}

.owner-operational-eyebrow {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.owner-operational-card h4 {
  margin: 0;
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.owner-operational-value {
  color: #173766;
  font-size: 1.34rem;
  font-weight: 800;
  line-height: 1.2;
}

.owner-operational-state,
.owner-operational-meta,
.owner-operational-description {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.owner-operational-state {
  color: #173766;
  font-weight: 700;
}

.owner-operational-meta {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.owner-operational-description {
  color: var(--text-soft);
}

.owner-operational-card--good .owner-operational-state {
  color: var(--status-good);
}

.owner-operational-card--attention .owner-operational-state {
  color: var(--status-attention);
}

.owner-operational-card--issue .owner-operational-state {
  color: var(--status-issue);
}

.owner-operational-actions {
  width: 100%;
  margin-top: auto;
  padding-top: 4px;
}

.owner-operational-actions .button-secondary {
  width: fit-content;
}

.governance-surface-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.governance-surface-card {
  min-height: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-surface-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.governance-surface-kicker {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.governance-surface-card h4 {
  margin: 0;
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.governance-surface-copy {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

.governance-surface-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.governance-surface-actions {
  width: 100%;
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.dashboard-lane-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
}

.dashboard-lane-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}

.dashboard-lane-card .dashboard-lane-title {
  margin: 0;
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}

.dashboard-lane-description {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

.dashboard-lane-stat {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 18ch);
  align-items: center;
  column-gap: 10px;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid #d8e1ee;
  border-radius: 10px;
  background: var(--bg-surface-subtle);
}

.dashboard-lane-value {
  color: #173766;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  min-width: 1.2ch;
}

.dashboard-lane-meta {
  color: var(--text-soft);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.38px;
  text-transform: uppercase;
}

.dashboard-lane-actions {
  margin-top: auto;
  padding-top: 2px;
}

.span-5 {
  grid-column: span 5;
}

.span-7 {
  grid-column: span 7;
}

.span-12 {
  grid-column: span 12;
}

.panel {
  padding: 16px;
}

.panel h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.page-content > section > .panel + .panel,
.page-content > section > .panel + .owner-billing-master-grid,
.page-content > section > .owner-billing-master-grid + .panel {
  margin-top: 14px;
}

.panel > .section-header-bar + .owner-operational-grid,
.panel > .cards + .owner-operational-grid,
.panel > .owner-operational-grid + .table-wrap,
.panel > .owner-operational-grid + .cards,
.panel > .owner-operational-grid + .owner-billing-master-grid {
  margin-top: 12px;
}

.dashboard-status-summary {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.dashboard-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #d8e1ee;
  border-radius: 12px;
  background: var(--bg-surface-subtle);
}

.dashboard-status-count {
  font-size: 1.1rem;
  font-weight: 800;
  color: #173766;
}

.dashboard-calendar-meta {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

.dashboard-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-calendar-month {
  font-size: 0.9rem;
  font-weight: 700;
  color: #24466f;
}

.dashboard-calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-calendar-note {
  font-size: 0.84rem;
  color: var(--text-soft);
}

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

.dashboard-calendar-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #4f6079;
  font-weight: 600;
}

.dashboard-calendar-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.dashboard-calendar-legend-swatch.is-good {
  background: #198754;
}

.dashboard-calendar-legend-swatch.is-attention {
  background: #d17b0f;
}

.dashboard-calendar-legend-swatch.is-issue {
  background: #cc3a3a;
}

.dashboard-calendar-legend-swatch.is-completed {
  background: #0f766e;
}

.dashboard-calendar-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}

.dashboard-calendar-empty-note {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-soft);
}

.dashboard-calendar-month-grid {
  min-width: 700px;
  display: grid;
  gap: 10px;
}

.dashboard-calendar-weekday-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.dashboard-calendar-weekday {
  min-height: 22px;
  border: 1px solid #dce6f3;
  border-radius: 8px;
  background: var(--bg-surface-muted);
  color: #566b89;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dashboard-calendar-week-list {
  display: grid;
  gap: 8px;
}

.dashboard-calendar-week {
  border: 1px solid #dce6f3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-surface);
  display: grid;
  gap: 0;
}

.dashboard-calendar-week-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--bg-surface-subtle);
  border-bottom: 1px solid #e3ebf7;
}

.dashboard-calendar-day-cell {
  min-height: 34px;
  border-right: 1px solid #e3ebf7;
  padding: 5px 6px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.dashboard-calendar-day-cell:last-child {
  border-right: none;
}

.dashboard-calendar-day-cell.is-outside-month {
  background: var(--bg-readonly);
}

.dashboard-calendar-day-cell.is-today .dashboard-calendar-day-number {
  background: #1f4e8c;
  color: #ffffff;
}

.dashboard-calendar-day-number {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2f4f7a;
}

.dashboard-calendar-week-bars {
  display: grid;
  gap: 4px;
  padding: 6px 4px 7px;
  background: var(--bg-surface);
}

.dashboard-calendar-bar-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  min-height: 24px;
}

.dashboard-calendar-bar-row.is-empty {
  min-height: 6px;
}

.dashboard-calendar-bar {
  margin: 1px 2px;
  min-height: 24px;
  grid-column: var(--grid-start, 1) / var(--grid-end, 2);
  border-radius: 999px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}

.dashboard-calendar-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-calendar-project-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dashboard-calendar-project-link:hover {
  text-decoration-thickness: 2px;
}

.dashboard-calendar-edge {
  font-size: 0.9rem;
  line-height: 1;
}

.dashboard-calendar-bar.is-good {
  background: #198754;
}

.dashboard-calendar-bar.is-attention {
  background: #d17b0f;
}

.dashboard-calendar-bar.is-issue {
  background: #cc3a3a;
}

.dashboard-calendar-bar.is-completed {
  background: #0f766e;
}

.project-timeline-widget {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.project-timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #4e5f78;
  font-size: 0.85rem;
  font-weight: 600;
}

.project-timeline-grid-wrap {
  --timeline-days: 1;
  width: 100%;
  display: grid;
  gap: 6px;
}

.project-timeline-axis-row,
.project-timeline-work-row {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.project-timeline-axis-meta {
  border: 1px solid #dce6f3;
  border-radius: 10px;
  background: var(--bg-surface-subtle);
  color: #4e5f78;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 10px;
}

.project-timeline-axis-track {
  position: relative;
  overflow: hidden;
  border: 1px solid #dce6f3;
  border-radius: 10px;
  background: var(--bg-surface-subtle);
  padding: 5px 6px;
}

.project-timeline-axis-grid,
.project-timeline-work-grid {
  display: grid;
  grid-template-columns: repeat(var(--timeline-days), minmax(0, 1fr));
  gap: 0;
  align-items: center;
  position: relative;
  z-index: 1;
}

.project-timeline-axis-grid::before,
.project-timeline-work-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(74, 96, 125, 0.16) 0,
    rgba(74, 96, 125, 0.16) 1px,
    transparent 1px,
    transparent calc(100% / var(--timeline-days))
  );
  pointer-events: none;
  z-index: 0;
}

.project-timeline-axis-grid::after,
.project-timeline-work-grid::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px;
  background: #244d81;
  left: calc(
    ((var(--timeline-today-column) - 1) * (100% / var(--timeline-days)))
    + ((100% / var(--timeline-days)) / 2)
    - 1.5px
  );
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

.project-timeline-grid-wrap.has-today-marker .project-timeline-axis-grid::after,
.project-timeline-grid-wrap.has-today-marker .project-timeline-work-grid::after {
  opacity: 1;
}

.project-timeline-axis-grid {
  min-height: 30px;
}

.project-timeline-tick {
  grid-column: var(--grid-column, 1);
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  min-height: 100%;
  color: #4e5f78;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.project-timeline-tick-month {
  font-size: 0.54rem;
  min-height: 0.6rem;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #6e7f95;
}

.project-timeline-tick-day {
  font-size: 0.66rem;
}

.project-timeline-work-meta {
  border: 1px solid #e3ebf7;
  border-radius: 10px;
  background: var(--bg-surface);
  padding: 7px 10px;
  display: grid;
  gap: 3px;
  align-content: center;
}

.project-timeline-work-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #243a57;
}

.project-timeline-work-experts,
.project-timeline-work-dates {
  font-size: 0.74rem;
  color: #5a6d86;
  line-height: 1.35;
}

.project-timeline-work-track {
  position: relative;
  overflow: hidden;
  border: 1px solid #e3ebf7;
  border-radius: 10px;
  background: var(--bg-surface);
  padding: 4px 6px;
}

.project-timeline-work-grid {
  min-height: 22px;
}

.project-timeline-bar {
  grid-column: var(--grid-start, 1) / var(--grid-end, 2);
  min-height: 12px;
  border-radius: 6px;
  margin: 0;
  display: block;
  color: #ffffff;
}

.project-timeline-bar.is-open {
  background: #2f73c8;
}

.project-timeline-bar.is-under-review {
  background: #d17b0f;
}

.project-timeline-bar.is-denied {
  background: #c62828;
}

.project-timeline-bar.is-completed {
  background: #198754;
}

.project-timeline-excluded {
  border: 1px solid #f0e5bf;
  border-radius: 10px;
  background: #fff8df;
  padding: 10px 12px;
  color: #5d4a10;
  font-size: 0.83rem;
}

.project-timeline-excluded strong {
  display: block;
  margin-bottom: 5px;
}

.project-timeline-excluded ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

@media (max-width: 980px) {
  .project-timeline-axis-row,
  .project-timeline-work-row {
    grid-template-columns: 180px minmax(0, 1fr);
  }
}

.table-wrap {
  overflow: auto;
}

.table-wrap.is-standardized-table {
  display: block;
  padding: 10px 14px 12px;
  box-sizing: border-box;
}

.standard-table-toolbar {
  margin-bottom: var(--table-toolbar-gap);
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.audit-pagination {
  margin-top: var(--table-pagination-top-gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px var(--table-pagination-bottom-gap);
  border-top: 1px solid #edf1f7;
  flex-wrap: wrap;
}

.audit-pagination-meta {
  font-size: 0.86rem;
  color: var(--text-soft);
}

.audit-pagination-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.audit-feed-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.audit-feed-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.audit-feed-title {
  font-weight: 700;
  color: var(--text-strong);
}

.audit-feed-copy {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.45;
}

.audit-feed-detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.86rem;
  line-height: 1.4;
}

.owner-audit-action-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 220px;
}

.owner-audit-review-form {
  display: grid;
  gap: 8px;
  width: 100%;
}

.owner-audit-review-field {
  display: grid;
  gap: 4px;
  width: 100%;
}

.owner-audit-review-field span {
  color: var(--text-soft);
  font-size: 0.78rem;
  font-weight: 600;
}

.owner-audit-review-field input,
.owner-audit-review-field select {
  width: 100%;
}

.pager-disabled {
  opacity: 0.56;
  pointer-events: none;
}

.pager-current {
  cursor: default;
}

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

th,
td {
  padding: 10px 11px;
  border-bottom: 1px solid #edf1f7;
  text-align: left;
  vertical-align: top;
  font-size: 0.91rem;
}

th {
  color: #4e5f78;
  font-size: 0.79rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-surface-subtle);
}

tr:last-child td {
  border-bottom: none;
}

.clickable-table-row {
  cursor: pointer;
}

.clickable-table-row td {
  transition: background-color 0.15s ease;
}

.clickable-table-row:hover td {
  background: #f6faff;
}

.clickable-table-row:focus-visible {
  outline: 2px solid #2f73c8;
  outline-offset: -2px;
}

.clickable-table-row:focus-visible td {
  background: #edf5ff;
}

.work-item-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.work-item-table-toolbar-label {
  color: #566b8b;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.work-item-table-toolbar-buttons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.work-item-table-toolbar .button-small.is-active {
  background: #1f4e8c;
  color: #fff;
}

.work-item-table-wrap.is-work-item-table-simple table {
  min-width: 980px;
}

.work-item-table-wrap.is-work-item-table-advanced table {
  min-width: 1220px;
}

.work-item-table-wrap.is-work-item-table-simple [data-work-item-advanced-col] {
  display: none;
}

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

.role-permission-editor {
  display: grid;
  gap: 14px;
}

.role-permission-editor [hidden] {
  display: none !important;
}

.role-permission-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) 320px;
  gap: 14px;
  align-items: start;
}

.role-permission-main,
.role-permission-summary {
  display: grid;
  gap: 14px;
}

.role-permission-section {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-surface);
  box-shadow: var(--shadow);
}

.role-permission-section-intro {
  background:
    linear-gradient(180deg, rgba(237, 244, 255, 0.88), rgba(255, 255, 255, 0.98)),
    var(--bg-surface);
}

.role-permission-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.role-permission-section-kicker {
  margin: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.role-permission-section h4 {
  margin: 0;
  font-size: 1.16rem;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.role-permission-section-copy {
  margin: 8px 0 0;
  max-width: 72ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-soft);
}

.role-permission-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.role-permission-advanced-toggle {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-surface-chrome);
  color: var(--text-main);
  white-space: nowrap;
}

.role-permission-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.role-permission-toolbar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.role-permission-toolbar-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-soft);
}

.role-permission-search {
  display: grid;
  gap: 6px;
  min-width: 280px;
  flex: 1 1 280px;
}

.role-permission-search span {
  font-size: 0.76rem;
  color: var(--text-soft);
  font-weight: 700;
}

.role-permission-search input {
  width: 100%;
}

.role-permission-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

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

.role-permission-template-card,
.role-permission-card,
.role-permission-filter-chip {
  font: inherit;
}

.role-permission-template-card {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-surface-subtle);
  text-align: left;
  color: var(--text-main);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.role-permission-template-card:hover,
.role-permission-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(9, 18, 38, 0.08);
}

.role-permission-template-card:focus-visible,
.role-permission-card:focus-visible,
.role-permission-filter-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(56, 107, 185, 0.2);
}

.role-permission-template-card.is-active {
  border-color: #4f86c6;
  background: var(--bg-surface-selected);
  box-shadow: 0 12px 24px rgba(30, 90, 160, 0.12);
}

.role-permission-template-title {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.role-permission-template-copy,
.role-permission-template-meta {
  color: var(--text-soft);
  font-size: 0.84rem;
  line-height: 1.55;
}

.role-permission-template-meta {
  font-weight: 700;
}

.role-permission-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-permission-filter-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-surface-chrome);
  color: var(--text-main);
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 700;
}

.role-permission-filter-chip.is-active {
  border-color: #4f86c6;
  background: var(--bg-surface-selected);
  color: #173a69;
}

.section-header-bar,
.role-create-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.section-header-main,
.role-create-header > div {
  display: grid;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
}

.section-header-main > :is(h1, h2, h3, h4, h5, h6, p),
.role-create-header > div > :is(h1, h2, h3, h4, h5, h6, p) {
  margin: 0;
}

.section-header-main p,
.role-create-header > div p {
  color: var(--text-soft);
  line-height: 1.5;
}

.section-header-actions {
  display: flex;
  align-items: center;
  align-self: flex-start;
  flex: 0 0 auto;
  gap: 8px;
  flex-wrap: wrap;
}

.panel > .section-header-bar + .governance-surface-grid,
.work-items-builder > .section-header-bar + .governance-surface-grid,
.panel > .section-header-bar + .governance-surface-list {
  margin-top: 16px;
}

.support-diagnostics-page .panel > .cards + .governance-surface-grid,
.support-diagnostics-page .panel > .governance-surface-grid + .table-wrap,
.support-diagnostics-page .panel > .cards + .meta-item,
.support-diagnostics-page .panel > .cards + .table-wrap,
.role-governance-panel > .cards + .governance-surface-grid,
.user-governance-panel > .cards + .governance-surface-grid {
  margin-top: 16px;
}

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

.reports-page .panel > .section-header-bar + form,
.reports-page .panel > .section-header-bar + .cards,
.reports-page .panel > .section-header-bar + .table-wrap {
  margin-top: 14px;
}

.reports-page .panel > form + .cards,
.reports-page .panel > form + .table-wrap {
  margin-top: 18px;
}

.saved-list-views-panel {
  display: grid;
  gap: 14px;
}

.saved-list-view-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.saved-list-view-chip {
  min-width: min(240px, 100%);
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface-subtle);
  color: var(--text-main);
  text-decoration: none;
  padding: 12px 14px;
  display: grid;
  gap: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}

.saved-list-view-chip:hover,
.saved-list-view-chip:focus-visible {
  border-color: #8fbaf7;
  box-shadow: 0 10px 22px rgba(15, 46, 92, 0.08);
  transform: translateY(-1px);
}

.saved-list-view-chip.is-selected {
  border-color: #295186;
  background: var(--bg-surface-selected);
  box-shadow: 0 10px 22px rgba(15, 46, 92, 0.08);
}

.saved-list-view-chip-name {
  font-weight: 700;
  color: #143763;
}

.saved-list-view-chip-summary {
  color: var(--text-soft);
  font-size: 0.87rem;
  line-height: 1.45;
}

.saved-list-views-empty,
.saved-list-views-current {
  margin: 0;
  color: var(--text-soft);
}

.saved-list-views-form,
.saved-list-views-delete-form {
  margin: 0;
}

.saved-list-views-delete-form .form-actions {
  margin-top: 0;
  padding-top: 0;
}

#reports-saved-presets .cards,
#reports-scheduled-exports .cards {
  margin-bottom: 0;
}

#reports-saved-presets .cards .card,
#reports-scheduled-exports .cards .card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#reports-saved-presets .form-actions,
#reports-scheduled-exports .form-actions {
  margin-top: auto;
  padding-top: 10px;
}

.reports-note-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: #5b6d86;
}

.report-financial-summary-panel {
  display: grid;
  gap: 12px;
}

.report-financial-summary-cards {
  align-items: stretch;
}

.panel.u-mb-14 > .cards:has(> .card .value.tenant-card-value-small) {
  margin-top: 14px;
}

.panel.u-mb-14 > .cards > .card:has(.value.tenant-card-value-small) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
}

.panel.u-mb-14 > .cards > .card:has(.value.tenant-card-value-small) h3 {
  margin: 0;
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  order: 0;
}

.panel.u-mb-14 > .cards > .card:has(.value.tenant-card-value-small) .subtitle {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.5;
  order: 1;
  flex: 1 1 auto;
}

.panel.u-mb-14 > .cards > .card:has(.value.tenant-card-value-small) .value {
  order: 2;
  margin-top: 0;
  align-self: flex-start;
  min-width: 56px;
  padding: 10px 12px;
  border: 1px solid #d8e1ee;
  border-radius: 10px;
  background: var(--bg-surface-subtle);
  color: #173766;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.panel.u-mb-14 > .cards > .card:has(.value.tenant-card-value-small) .value.tenant-card-value-small {
  line-height: 1;
}

.report-financial-summary-value.is-positive {
  color: #1f7a4e;
}

.report-financial-summary-value.is-negative {
  color: #b4433f;
}

.report-financial-summary-value.is-neutral {
  color: #22324a;
}

.report-financial-summary-notes {
  margin-top: -2px;
}

.role-permission-family-stack {
  display: grid;
  gap: 14px;
}

.role-permission-family {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-surface-subtle);
}

.role-permission-family-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.role-permission-family-head-main {
  display: grid;
  gap: 4px;
}

.role-permission-family-head-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.role-permission-family-label {
  margin: 0 0 6px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.role-permission-family h5 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-main);
}

.role-permission-family-copy {
  margin: 6px 0 0;
  max-width: 62ch;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-soft);
}

.role-permission-family-status {
  margin: 0;
  font-size: 0.79rem;
  font-weight: 700;
  color: var(--text-soft);
}

.role-permission-family-count {
  margin: 0;
  display: grid;
  gap: 2px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-soft);
  text-align: right;
}

.role-permission-family-count strong {
  font-size: 1.12rem;
  color: var(--text-main);
}

.role-permission-family-toggle {
  min-width: 104px;
}

.role-permission-family-toggle::after {
  content: "v";
  display: inline-block;
  margin-left: 8px;
  font-size: 0.72rem;
  transition: transform 0.16s ease;
}

.role-permission-family-toggle.is-expanded::after {
  transform: rotate(180deg);
}

.role-permission-family-body {
  display: grid;
  gap: 10px;
}

.role-permission-module-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-permission-module-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-main);
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 700;
}

.role-permission-module-pill.is-active {
  border-color: #4f86c6;
  background: var(--bg-surface-selected);
  color: #173a69;
}

.role-permission-module-pill:disabled {
  opacity: 0.48;
  cursor: default;
}

.role-permission-module-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  border-radius: 999px;
  padding: 0 7px;
  background: var(--bg-surface-muted);
  color: var(--text-soft);
  font-size: 0.74rem;
  font-weight: 800;
}

.role-permission-module-pill.is-active .role-permission-module-pill-count {
  background: rgba(23, 58, 105, 0.1);
  color: #173a69;
}

.role-permission-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.role-permission-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-surface);
  color: var(--text-main);
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.role-permission-card.is-selected {
  border-color: #4f86c6;
  background: var(--bg-surface-selected);
  box-shadow: 0 12px 24px rgba(30, 90, 160, 0.12);
}

.role-permission-card-kicker {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.role-permission-card-title {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.02em;
}

.role-permission-card-copy {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-soft);
}

.role-permission-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.role-permission-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 9px;
  border: 1px solid #d6dfeb;
  background: var(--bg-surface-muted);
  color: #23415f;
  font-size: 0.72rem;
  font-weight: 700;
}

.role-permission-family-empty {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.45;
}

.role-permission-chip.is-advanced {
  border-color: #bfd2ea;
  background: #eef5fd;
  color: #1b4d86;
}

.role-permission-chip.is-high-impact {
  border-color: #e7c3b2;
  background: #f8ebe5;
  color: #8a4329;
}

.role-permission-expert-panel {
  background:
    linear-gradient(180deg, rgba(17, 37, 58, 0.98), rgba(16, 31, 48, 0.98)),
    rgba(17, 37, 58, 0.98);
  border-color: rgba(145, 171, 205, 0.22);
}

.role-permission-expert-panel .role-permission-section-kicker,
.role-permission-expert-panel h4,
.role-permission-expert-panel .role-permission-section-copy,
.role-permission-expert-panel .role-permission-module-name,
.role-permission-expert-panel .role-permission-module-family,
.role-permission-expert-panel .role-permission-cell-empty,
.role-permission-expert-panel .role-permission-none {
  color: #eef5ff;
}

.role-permission-expert-panel .role-permission-section-copy,
.role-permission-expert-panel .role-permission-module-family,
.role-permission-expert-panel .role-permission-cell-empty,
.role-permission-expert-panel .role-permission-none,
.role-permission-expert-panel .role-permission-matrix th {
  color: rgba(238, 245, 255, 0.72);
}

.role-permission-table-wrap {
  border-radius: 16px;
  border: 1px solid rgba(199, 215, 239, 0.18);
  background: rgba(255, 255, 255, 0.04);
  overflow: auto;
}

.role-permission-matrix {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.role-permission-matrix th {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  background: transparent;
}

.role-permission-matrix th,
.role-permission-cell {
  width: 86px;
}

.role-permission-matrix th:first-child,
.role-permission-module-cell {
  width: 210px;
  min-width: 210px;
  text-align: left;
}

.role-permission-module-cell {
  background: rgba(255, 255, 255, 0.05);
}

.role-permission-module-family {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.role-permission-module-name {
  margin-top: 6px;
  font-weight: 800;
}

.role-permission-module-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.role-permission-cell {
  text-align: center;
  vertical-align: middle;
}

.role-permission-cell-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 28px;
}

.role-permission-cell-no-visible-options::after {
  content: "-";
  font-size: 0.84rem;
  color: rgba(238, 245, 255, 0.52);
}

.role-permission-toggle {
  position: relative;
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.15s ease;
}

.role-permission-toggle:focus-within {
  box-shadow: 0 0 0 2px rgba(112, 165, 240, 0.24);
}

.role-permission-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.role-permission-toggle-mark {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  border: 1px solid rgba(204, 220, 243, 0.28);
  background: rgba(255, 255, 255, 0.08);
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.role-permission-toggle-mark::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 5px;
  left: 50%;
  top: 50%;
  margin-left: -4px;
  margin-top: -4px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(-45deg);
}

.role-permission-toggle input:checked + .role-permission-toggle-mark {
  border-color: #88b4ef;
  background: #4f86c6;
}

.role-permission-toggle input:checked + .role-permission-toggle-mark::after {
  border-left-color: #fff;
  border-bottom-color: #fff;
}

.role-permission-toggle input[data-role-high-impact="1"] + .role-permission-toggle-mark {
  border-color: rgba(234, 188, 167, 0.52);
}

.role-permission-toggle input[data-role-high-impact="1"]:checked + .role-permission-toggle-mark {
  border-color: #d07a59;
  background: #c7663d;
}

.role-permission-summary-card,
.role-permission-summary-metrics {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-surface);
  box-shadow: var(--shadow);
}

.role-permission-summary-card h4 {
  margin: 4px 0 0;
  font-size: 1.02rem;
  color: var(--text-main);
}

.role-permission-summary-label {
  display: block;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.role-permission-summary-copy {
  margin: 8px 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-main);
}

.role-permission-summary-copy-muted {
  color: var(--text-soft);
}

.role-permission-summary-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.role-permission-summary-metric {
  display: grid;
  gap: 6px;
}

.role-permission-summary-metric strong {
  font-size: 1.36rem;
  color: var(--text-main);
}

.role-permission-summary-list,
.role-permission-high-impact {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--text-main);
}

.role-permission-summary-empty,
.role-permission-high-impact-empty {
  list-style: none;
  margin-left: -18px;
  color: var(--text-soft);
}

.role-permission-hint {
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #e9f3ff;
  color: #1f4e86;
  font-size: 0.8rem;
  border: 1px solid #c4dcf8;
}

.role-permission-empty {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.84rem;
}

@media (max-width: 1200px) {
  .role-permission-layout {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 900px) {
  .role-permission-template-grid,
  .role-permission-card-grid,
  .role-permission-summary-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .role-permission-family-head {
    display: grid;
  }

  .role-permission-family-head-meta {
    justify-items: start;
  }

  .role-permission-family-count {
    text-align: left;
  }

  .role-permission-matrix th,
  .role-permission-cell {
    width: 72px;
  }

  .role-permission-matrix th:first-child,
  .role-permission-module-cell {
    width: 168px;
    min-width: 168px;
  }
}

.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  color: #fff;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.status-issue-details {
  position: relative;
  display: inline-block;
}

.status-issue-summary {
  list-style: none;
  cursor: pointer;
}

.status-issue-summary::marker {
  content: "";
}

.status-issue-summary::-webkit-details-marker {
  display: none;
}

.status-issue-details[open] .status-chip,
.status-issue-details[open] .pill {
  box-shadow: 0 0 0 3px rgba(163, 37, 32, 0.18);
}

.status-issue-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(340px, 75vw);
  z-index: 35;
  background: var(--bg-surface);
  border: 1px solid #d8e1ee;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 12px 26px rgba(15, 31, 54, 0.16);
  color: #23344d;
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: normal;
}

.status-issue-popover strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.76rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #5b6d83;
}

.status-issue-popover p {
  margin: 0;
}

.status-good {
  background: var(--status-good);
}

.status-muted {
  background: #6b7788;
}

.status-attention {
  background: var(--status-attention);
}

.status-issue {
  background: var(--status-issue);
}

.status-completed {
  background: var(--status-completed);
}

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

.registration-metric {
  min-height: 92px;
}

.registration-metric span {
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 700;
}

.registration-metric strong {
  display: block;
  margin-top: 10px;
  color: var(--text-strong);
  font-size: 1.65rem;
  line-height: 1;
}

.registration-case-panel {
  overflow: hidden;
}

.registration-case-layout {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr) minmax(240px, 0.52fr);
  gap: 18px;
  align-items: start;
}

.registration-case-steps,
.registration-case-summary,
.registration-case-task,
.registration-governance-block,
.readonly-summary,
.registration-email-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface-subtle);
}

.registration-case-steps,
.registration-case-summary,
.registration-case-task {
  padding: 16px;
}

.registration-case-step {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  color: var(--text-soft);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
}

.registration-case-steps > * + * {
  border-top: 1px solid var(--border);
}

.registration-case-step-form {
  margin: 0;
}

button.registration-case-step {
  width: calc(100% + 16px);
  margin: 0 -8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.registration-case-step.is-clickable {
  grid-template-columns: 16px minmax(0, 1fr) auto;
  padding-right: 8px;
  padding-left: 8px;
  border-radius: 8px;
  color: var(--text-strong);
}

.registration-case-step.is-clickable:hover,
.registration-case-step.is-clickable:focus-visible {
  background: var(--bg-surface-chrome);
}

.registration-case-step-action {
  align-self: center;
  color: #1f6fbf;
  font-size: 0.76rem;
  font-weight: 800;
}

.registration-case-step-dot {
  width: 12px;
  height: 12px;
  margin-top: 2px;
  border: 2px solid #b9c8d8;
  border-radius: 999px;
  background: var(--bg-surface);
}

.registration-case-step.is-active {
  color: var(--text-strong);
}

.registration-case-step.is-active .registration-case-step-dot {
  border-color: #1f6fbf;
  background: #1f6fbf;
}

.registration-case-step.is-complete .registration-case-step-dot {
  border-color: #247a4d;
  background: #247a4d;
}

.registration-task-header {
  margin-bottom: 14px;
}

.registration-task-header h3,
.registration-case-summary h3 {
  margin: 4px 0 0;
}

.registration-decision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.registration-governance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.registration-decision-option,
.registration-governance-block {
  padding: 14px;
}

.registration-decision-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
}

.registration-decision-option h4,
.registration-governance-block h4 {
  margin: 0;
}

.registration-decision-option p {
  margin: 0;
}

.registration-decision-option label {
  min-width: 0;
}

.registration-decision-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  padding: 10px 12px;
  border-radius: 8px;
  line-height: 1.2;
  text-align: center;
}

.registration-case-summary dl {
  display: grid;
  grid-template-columns: minmax(90px, 0.55fr) minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0 0 14px;
}

.registration-case-summary dt {
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 700;
}

.registration-case-summary dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.registration-case-more {
  margin: 4px 0 14px;
}

.registration-case-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface-chrome);
  color: var(--text-strong);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 800;
  list-style: none;
  line-height: 1.2;
}

.registration-case-more summary:focus-visible {
  outline: 2px solid #bfdbff;
  outline-offset: 2px;
}

.registration-case-more summary::-webkit-details-marker {
  display: none;
}

.registration-case-more-chevron {
  width: 8px;
  height: 8px;
  margin-left: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.registration-case-more[open] .registration-case-more-chevron {
  transform: rotate(225deg);
}

.registration-case-more-content {
  display: grid;
  gap: 14px;
  padding-top: 14px;
}

.registration-case-more-section h4 {
  margin: 0 0 8px;
  color: var(--text-strong);
  font-size: 0.9rem;
}

.registration-case-more-section dl {
  margin: 0;
}

.readonly-summary,
.registration-email-preview {
  padding: 14px;
  margin: 14px 0;
}

.readonly-summary p:last-child,
.registration-email-preview p:last-child {
  margin-bottom: 0;
}

.registration-checklist {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.registration-document-list {
  margin: 14px 0;
}

.registration-document-list h4 {
  margin: 0 0 8px;
  color: var(--text-strong);
  font-size: 0.92rem;
}

.registration-document-list ul {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.registration-document-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
}

.registration-document-meta {
  min-width: 0;
}

.registration-document-meta strong,
.registration-document-meta span {
  display: block;
  overflow-wrap: anywhere;
}

.registration-document-meta span {
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 0.82rem;
}

.registration-inline-action {
  margin: 12px 0 0;
}

.registration-checklist-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
}

.registration-checklist-item span {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.registration-checklist-item.is-complete span {
  color: #247a4d;
}

.registration-checklist-item.is-blocked span {
  color: #a32520;
}

.form-grid-full {
  grid-column: 1 / -1;
}

@media (max-width: 1120px) {
  .registration-case-layout,
  .registration-decision-grid,
  .registration-governance-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .registration-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .registration-metrics {
    grid-template-columns: 1fr;
  }

  .registration-checklist-item,
  .registration-document-list li,
  .registration-case-summary dl {
    grid-template-columns: 1fr;
  }
}

.quote-status-draft {
  background: #6f7f95;
}

.quote-status-prepared {
  background: #2e629c;
}

.quote-status-sent {
  background: #91600a;
}

.quote-status-viewed {
  background: #8050b2;
}

.quote-status-accepted {
  background: #1e7a49;
}

.quote-status-rejected {
  background: #a32929;
}

.quote-status-expired {
  background: #b24c14;
}

.quote-status-cancelled {
  background: #4d5c6f;
}

.invoice-status-draft {
  background: #6f7f95;
}

.invoice-status-sent {
  background: #91600a;
}

.invoice-status-part_paid {
  background: #2e629c;
}

.invoice-status-paid {
  background: #1e7a49;
}

.invoice-status-overdue {
  background: #b24c14;
}

.invoice-status-void {
  background: #4d5c6f;
}

.completion-warning {
  margin-bottom: 14px;
  border: 1px solid #f3d2a1;
  background: #fff7ea;
  color: #6a4a16;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.85rem;
}

.completion-warning strong {
  display: block;
  margin-bottom: 6px;
}

.completion-warning ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.completion-modal-blockers {
  border: 1px solid #f3d2a1;
  background: #fff8ee;
  color: #6a4a16;
  border-radius: 10px;
  padding: 10px;
  font-size: 0.83rem;
}

.completion-modal-blockers strong {
  display: block;
  margin-bottom: 6px;
}

.completion-modal-blockers ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.completion-ready-note {
  margin: 0;
  border: 1px solid #cde8d8;
  background: #eef9f2;
  color: #135b34;
  border-radius: 10px;
  padding: 10px;
  font-size: 0.83rem;
}

.outcome-pass {
  background: var(--status-good);
}

.outcome-attention {
  background: var(--status-attention);
}

.outcome-fail {
  background: var(--status-issue);
}

.outcome-pending {
  background: #6f7f95;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  background: #e9f2ff;
  color: #244d81;
  line-height: 1.1;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.pill-open {
  background: #e9f2ff;
  color: #244d81;
}

.pill-under-review {
  background: #fff3dd;
  color: #8b5700;
}

.pill-denied {
  background: #ffe3e3;
  color: #a11f1f;
}

.pill-completed {
  background: #e8f7ef;
  color: #16633c;
}

.pill-issue {
  background: #ffe8cf;
  color: #9a4f00;
}

.pill-planning-on-track {
  background: #e8f7ef;
  color: #16633c;
}

.pill-planning-delayed {
  background: #ffe8cf;
  color: #9a4f00;
}

.active-indicator {
  font-weight: 700;
}

.active-indicator.yes {
  color: #198754;
}

.active-indicator.no {
  color: #7d8696;
}

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

.form-grid .full {
  grid-column: 1 / -1;
}

.form-required-indicator {
  color: #c53929;
  font-weight: 800;
}

.customer-compound-field {
  display: grid;
  gap: 8px;
}

.customer-compound-field-label {
  color: #173766;
  font-weight: 700;
}

.customer-compound-field-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-compound-field small {
  color: var(--text-soft);
}

.customer-type-selected-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #d8e1ee;
  border-radius: 12px;
  background: var(--bg-surface-subtle);
}

.customer-type-selected-text {
  color: #4c6488;
  font-size: 0.88rem;
  font-weight: 600;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inspection-work-items-picker {
  border: 1px solid #dce6f5;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 10px;
  background: var(--bg-surface-subtle);
}

.inspection-work-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.inspection-work-item-group {
  display: none;
}

.inspection-work-item-group.is-visible {
  display: block;
}

.inspection-work-item-list {
  display: grid;
  gap: 8px;
}

.inspection-work-item-option {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid #dce5f2;
  background: var(--bg-surface);
}

.inspection-work-item-option input[type="checkbox"] {
  margin-top: 2px;
}

.inspection-work-item-empty {
  color: var(--text-soft);
  font-size: 0.88rem;
}

.inspection-attachments-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  align-items: start;
}

.inspection-attachment-card {
  border: 1px solid #dce5f2;
  border-radius: 12px;
  background: var(--bg-surface);
  padding: 8px;
  display: grid;
  gap: 6px;
}

.clickable-attachment-card {
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.clickable-attachment-card:hover {
  border-color: #b5cae9;
  box-shadow: 0 6px 18px rgba(30, 67, 120, 0.12);
  transform: translateY(-1px);
}

.clickable-attachment-card:focus-visible {
  outline: 2px solid #2d5caa;
  outline-offset: 2px;
}

.inspection-attachment-card[hidden] {
  display: none;
}

.inspection-attachment-preview-link {
  display: block;
  border-radius: 10px;
  overflow: hidden;
}

.inspection-attachment-image {
  width: 100%;
  height: 116px;
  object-fit: cover;
  display: block;
  background: var(--bg-surface-muted);
}

.inspection-attachment-pdf-wrap {
  border: 1px solid #d4deee;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-surface-subtle);
}

.inspection-attachment-pdf {
  width: 100%;
  height: 126px;
  border: 0;
  display: block;
  background: var(--bg-surface);
}

.clickable-attachment-card .inspection-attachment-pdf {
  pointer-events: none;
}

.inspection-attachment-doc-placeholder {
  min-height: 86px;
  border: 1px dashed #c8d7ef;
  border-radius: 10px;
  background: var(--bg-surface-subtle);
  display: grid;
  place-items: center;
  gap: 4px;
  text-align: center;
}

.inspection-attachment-doc-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #e2ecfb;
  color: #1f4e8c;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.inspection-attachment-doc-type {
  color: #45658f;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.inspection-attachment-meta {
  display: grid;
  gap: 2px;
}

.inspection-attachment-name {
  color: #193b67;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.inspection-attachment-sub {
  color: #5a6f8f;
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

.inspection-attachment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.inspection-attachments-toolbar {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.inspection-attachments-search {
  display: grid;
  gap: 4px;
  color: #506a8f;
  font-size: 0.76rem;
  font-weight: 700;
}

.inspection-attachments-search-input {
  width: min(320px, 100%);
  min-height: 34px;
  padding: 8px 10px;
  font-size: 0.82rem;
}

.inspection-attachments-count {
  color: #62789a;
  font-size: 0.78rem;
  font-weight: 600;
}

.inspection-inspector-field {
  position: relative;
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  align-content: start;
}

.inspection-inspector-label {
  display: block;
  line-height: 1.2;
}

.inspection-inspector-combobox {
  position: relative;
}

.inspection-inspector-input {
  width: 100%;
  padding-right: 42px;
  background: var(--bg-surface);
  color: var(--text-main);
  min-height: 42px;
}

.inspection-inspector-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--border);
  background: var(--bg-surface-muted);
  color: #3a5176;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  line-height: 1;
  padding: 0;
  font-size: 0.8rem;
}

.inspection-inspector-combobox.is-open .inspection-inspector-toggle {
  background: var(--bg-surface-selected);
}

.inspection-inspector-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 25;
  background: var(--bg-surface);
  border: 1px solid #c8d6ed;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(13, 27, 50, 0.12);
  max-height: 240px;
  overflow-y: auto;
  display: none;
}

.inspection-inspector-combobox.is-open .inspection-inspector-options {
  display: block;
}

.inspection-inspector-option {
  width: 100%;
  border: 0;
  background: var(--bg-surface);
  color: var(--text-main);
  text-align: left;
  padding: 9px 11px;
  display: grid;
  gap: 2px;
  cursor: pointer;
}

.inspection-inspector-option + .inspection-inspector-option {
  border-top: 1px solid #edf2fa;
}

.inspection-inspector-option:hover,
.inspection-inspector-option.is-active {
  background: var(--bg-surface-selected);
}

.inspection-inspector-option-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a3055;
}

.mention-composer {
  display: grid;
  gap: 8px;
}

.mention-composer-help {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #62789a;
}

.mention-composer-panel {
  border: 1px solid #c8d6ed;
  border-radius: 14px;
  background: var(--bg-surface);
  box-shadow: 0 10px 24px rgba(13, 27, 50, 0.12);
  overflow: hidden;
}

.mention-composer-list {
  display: grid;
}

.mention-composer-option {
  width: 100%;
  border: 0;
  background: var(--bg-surface);
  color: var(--text-main);
  text-align: left;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.mention-composer-option + .mention-composer-option {
  border-top: 1px solid #edf2fa;
}

.mention-composer-option:hover,
.mention-composer-option:focus-visible,
.mention-composer-option.is-active {
  background: var(--bg-surface-selected);
}

.mention-composer-option-main {
  display: grid;
  gap: 2px;
}

.mention-composer-option-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a3055;
}

.mention-composer-option-meta {
  font-size: 0.8rem;
  color: #62789a;
}

.mention-composer-empty {
  margin: 0;
  padding: 12px 14px;
  font-size: 0.82rem;
  color: #62789a;
}

.mention-summary {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.mention-summary-inline {
  margin-top: 6px;
}

.mention-summary-label {
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  color: #62789a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mention-summary-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mention-summary-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-surface-muted);
  border: 1px solid var(--border);
  color: #24436f;
  font-size: 0.79rem;
  font-weight: 600;
}

.table-note {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-main);
}

.table-note-empty {
  color: #62789a;
}

.inspection-inspector-option-meta {
  font-size: 0.82rem;
  color: #5a6f90;
}

.inspection-inspector-empty {
  padding: 10px 11px;
  color: #5d6f8b;
  font-size: 0.86rem;
  background: var(--bg-surface-subtle);
}

.inspection-inspector-input:-webkit-autofill,
.inspection-inspector-input:-webkit-autofill:hover,
.inspection-inspector-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-main);
  box-shadow: 0 0 0 1000px #ffffff inset;
  caret-color: var(--text-main);
}

.owner-tenant-field {
  position: relative;
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  align-content: start;
}

.owner-tenant-label {
  display: block;
  line-height: 1.2;
}

.owner-tenant-combobox {
  position: relative;
}

.owner-tenant-input {
  width: 100%;
  padding-right: 42px;
  background: var(--bg-surface);
  color: var(--text-main);
  min-height: 42px;
}

.owner-tenant-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--border);
  background: var(--bg-surface-muted);
  color: #3a5176;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  line-height: 1;
  padding: 0;
  font-size: 0.8rem;
}

.owner-tenant-combobox.is-open .owner-tenant-toggle {
  background: var(--bg-surface-selected);
}

.owner-tenant-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 25;
  background: var(--bg-surface);
  border: 1px solid #c8d6ed;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(13, 27, 50, 0.12);
  max-height: 260px;
  overflow-y: auto;
  display: none;
}

.owner-tenant-combobox.is-open .owner-tenant-options {
  display: block;
}

.owner-tenant-option {
  width: 100%;
  border: 0;
  background: var(--bg-surface);
  color: var(--text-main);
  text-align: left;
  padding: 9px 11px;
  display: grid;
  gap: 2px;
  cursor: pointer;
}

.owner-tenant-option + .owner-tenant-option {
  border-top: 1px solid #edf2fa;
}

.owner-tenant-option:hover,
.owner-tenant-option.is-active {
  background: var(--bg-surface-selected);
}

.owner-tenant-option-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a3055;
}

.owner-tenant-option-meta {
  font-size: 0.82rem;
  color: #5a6f90;
}

.owner-tenant-empty {
  padding: 10px 11px;
  color: #5d6f8b;
  font-size: 0.86rem;
  background: var(--bg-surface-subtle);
}

.owner-tenant-input:-webkit-autofill,
.owner-tenant-input:-webkit-autofill:hover,
.owner-tenant-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-main);
  box-shadow: 0 0 0 1000px #ffffff inset;
  caret-color: var(--text-main);
}

.owner-reconciliation-table-wrap {
  display: block;
  padding: 10px 14px 12px;
  box-sizing: border-box;
}

.owner-billing-reconciliation-table-wrap {
  margin-top: 12px;
}

.owner-billing-tabs {
  display: inline-flex;
  padding: 4px;
  background: var(--bg-surface-chrome);
  border-radius: 999px;
  margin: 0 0 16px;
  gap: 2px;
  flex-wrap: wrap;
}

.owner-billing-tab {
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.9rem;
}

.owner-billing-tab.active {
  background: var(--bg-surface);
  color: #0f2950;
  box-shadow: 0 4px 12px rgba(16, 32, 56, 0.1);
}

.owner-billing-notice-stack {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.owner-billing-notice {
  border: 1px solid #d8e1ee;
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  gap: 10px;
}

.owner-billing-notice-copy {
  display: grid;
  gap: 6px;
}

.owner-billing-notice-copy strong {
  font-size: 0.84rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.owner-billing-notice-copy p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

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

.owner-billing-notice-info {
  background: #eef5ff;
  border-color: #c9dcff;
  color: #20446d;
}

.owner-billing-notice-warning {
  background: #fff7ea;
  border-color: #f3d2a1;
  color: #6a4a16;
}

.owner-billing-master-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.25fr);
  gap: 14px;
  align-items: start;
}

.owner-billing-master-grid .panel {
  margin: 0;
}

.owner-billing-tenant-grid {
  align-items: start;
}

.owner-billing-tenant-stack {
  gap: 14px;
}

.owner-billing-tenant-stack > .panel {
  margin: 0;
}

.owner-billing-master-list h4,
.owner-billing-detail-pane h4 {
  margin: 0 0 10px;
}

.owner-billing-detail-meta {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.required-indicator {
  color: #cc2b2b;
  font-weight: 700;
}

.owner-billing-tenant-quota-meta {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  color: var(--text-soft);
  font-size: 0.84rem;
}

.owner-billing-tenant-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #d8e1ee;
  border-radius: 12px;
  background: #f5f8fd;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

.owner-email-template-locale-tabs {
  gap: 8px;
}

.owner-email-template-locale-tab.active {
  border-color: #0f4c81;
  background: #eef6fc;
  color: #0f4c81;
}

.owner-email-template-editor-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(360px, 1fr);
  gap: 32px;
  align-items: start;
}

.owner-email-template-context {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: var(--text-muted);
}

.owner-email-template-selected-summary {
  display: grid;
  gap: 4px;
  margin: 0 0 14px;
  min-width: 0;
}

.owner-email-template-selected-summary > :is(h3, p) {
  margin: 0;
}

.owner-email-template-selected-summary p {
  color: var(--text-soft);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.owner-email-template-context h4 {
  margin: 0;
  color: var(--text-main);
  font-size: 0.95rem;
}

.owner-email-template-context p {
  margin: 0 0 8px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.owner-email-template-placeholder-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.owner-email-template-placeholder-list code {
  border: 1px solid #d8e1ee;
  border-radius: 6px;
  background: #f7f9fc;
  color: #23344d;
  padding: 4px 7px;
  font-size: 0.82rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.owner-email-template-form {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.owner-email-template-form-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.owner-email-template-body-label {
  display: block;
  min-width: 0;
}

.owner-email-template-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.owner-email-template-body-textarea,
.owner-email-template-default-body {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  line-height: 1.55;
}

.owner-email-template-default-body {
  min-height: 150px;
  background: #f7f9fc;
  color: var(--text-muted);
}

.owner-email-template-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.clickable-table-row.is-selected-row td {
  background: var(--bg-surface-selected);
}

@media (max-width: 920px) {
  .owner-email-template-editor-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1120px) {
  .owner-billing-master-grid {
    grid-template-columns: 1fr;
  }
}

.owner-recon-toolbar {
  margin-bottom: var(--table-toolbar-gap);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 2px;
}

.owner-recon-search {
  display: grid;
  gap: 4px;
  color: #506a8f;
  font-size: 0.76rem;
  font-weight: 700;
}

.owner-recon-search-input {
  width: min(260px, 100%);
  min-height: 34px;
  padding: 8px 10px;
  font-size: 0.82rem;
}

.owner-recon-meta {
  color: #62789a;
  font-size: 0.78rem;
  font-weight: 600;
  padding-right: 2px;
}

.owner-recon-head {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.owner-recon-filter-trigger {
  width: 24px;
  height: 24px;
  border: 1px solid #cfdbed;
  border-radius: 7px;
  background: var(--bg-surface-muted);
  color: #56719a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.owner-recon-filter-trigger:hover {
  background: var(--bg-surface-selected);
  border-color: #b9cbe7;
}

.owner-recon-filter-trigger:focus-visible {
  outline: 2px solid rgba(57, 105, 172, 0.35);
  outline-offset: 1px;
}

.owner-recon-filter-trigger.is-active {
  background: var(--bg-surface-selected);
  border-color: #8eaddb;
}

.owner-recon-filter-icon {
  width: 12px;
  height: 12px;
  display: inline-block;
  background: currentColor;
  clip-path: polygon(0% 0%, 100% 0%, 66% 46%, 66% 100%, 34% 100%, 34% 46%);
}

.owner-recon-filter-popover {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 32;
  width: min(270px, 78vw);
  background: var(--bg-surface);
  border: 1px solid #c7d7ee;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(13, 27, 50, 0.14);
  padding: 10px;
  display: grid;
  gap: 10px;
}

.owner-recon-filter-popover[hidden] {
  display: none !important;
}

.owner-recon-popover-field {
  display: grid;
  gap: 4px;
  color: #4d6790;
  font-size: 0.76rem;
  font-weight: 700;
}

.owner-recon-popover-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.owner-recon-filter-input {
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  font-size: 0.8rem;
}

.owner-recon-pagination {
  margin-top: var(--table-pagination-top-gap);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 2px var(--table-pagination-bottom-gap);
}

.owner-recon-page {
  color: #4c6488;
  font-size: 0.82rem;
  font-weight: 600;
}

.checkbox-field input {
  width: 16px;
  height: 16px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.customer-form-actions-panel .form-actions {
  justify-content: flex-end;
}

.u-mt-0 {
  margin-top: 0 !important;
}

.u-mt-8 {
  margin-top: 8px !important;
}

.u-mt-12 {
  margin-top: 12px !important;
}

.u-mt-18 {
  margin-top: 18px !important;
}

.u-mb-14 {
  margin-bottom: 14px !important;
}

.u-mb-16 {
  margin-bottom: 16px !important;
}

.u-m-0 {
  margin: 0 !important;
}

.u-fs-120 {
  font-size: 1.2rem !important;
}

.u-fs-110 {
  font-size: 1.1rem !important;
}

.u-fs-105 {
  font-size: 1.05rem !important;
}

.u-fs-100 {
  font-size: 1rem !important;
}

.u-fs-095-lh145 {
  font-size: 0.95rem !important;
  line-height: 1.45 !important;
}

.u-fs-095-lh140 {
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
}

.u-fs-100-lh140 {
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

.form-field-caption {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #536071;
  margin-bottom: 8px;
}

.danger-zone {
  margin-top: 18px;
  border: 1px solid #f0c2c2;
  border-radius: 12px;
  background: #fff4f4;
  padding: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.danger-zone-content h3 {
  margin: 0;
  font-size: 0.94rem;
  color: #8c1f1f;
}

.danger-zone-content p {
  margin: 4px 0 0;
  font-size: 0.84rem;
  color: #6f2a2a;
}

.danger-zone-actions {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(16, 28, 47, 0.42);
  display: grid;
  place-items: center;
  padding: 18px;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-card {
  width: min(560px, 100%);
  max-height: min(86vh, 780px);
  overflow: auto;
  background: var(--bg-surface);
  border: 1px solid #d8e2f0;
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(9, 20, 38, 0.2);
  padding: 18px;
  display: grid;
  gap: 12px;
}

.modal-card-owner-plan-price {
  padding-top: 24px;
  padding-bottom: 24px;
}

.modal-card-large {
  width: min(1040px, 100%);
  max-height: min(90vh, 860px);
}

.modal-card-owner-plan-price .modal-actions {
  margin-top: 10px;
}

.modal-card-owner-plan-price [data-owner-billing-plan-code-display][readonly] {
  border: 0;
  background: transparent;
  color: #5f6b7a;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.modal-card-owner-plan-price [data-owner-billing-plan-code-display][readonly]:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.modal-card h3 {
  margin: 0;
  font-size: 1.06rem;
}

.modal-subtitle {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.modal-field {
  margin: 0;
}

.modal-field[data-work-item-review-reason-field] {
  display: grid;
}

.modal-field[data-work-item-review-reason-field][hidden] {
  display: none !important;
}

.modal-field textarea {
  min-height: 98px;
}

.inspection-upload-preview {
  border: 1px solid #dce5f2;
  border-radius: 9px;
  background: var(--bg-surface-subtle);
  padding: 8px 10px;
  color: #203a61;
  font-size: 0.82rem;
  white-space: pre-line;
  max-height: 150px;
  overflow: auto;
}

.modal-error {
  margin: 0;
  font-size: 0.86rem;
  color: #8c1f1f;
  background: #ffefef;
  border: 1px solid #f3c7c7;
  border-radius: 8px;
  padding: 8px 10px;
}

.modal-choice-group {
  display: grid;
  gap: 8px;
}

.modal-choice {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d7e2f1;
  border-radius: 10px;
  padding: 10px 11px;
  background: var(--bg-surface-subtle);
  font-weight: 600;
}

.modal-choice input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.modal-readonly-block {
  border: 1px solid #d8e2f1;
  border-radius: 10px;
  background: var(--bg-surface-subtle);
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.handoff-summary-panel {
  display: grid;
  gap: 16px;
}

.handoff-summary-cards {
  margin: 0;
}

.handoff-summary-card {
  min-height: 100%;
}

.handoff-summary-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
  align-items: start;
}

.handoff-summary-notes {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.handoff-summary-checklist {
  border: 1px solid #d8e2f1;
  border-radius: 12px;
  background: var(--bg-surface-subtle);
  padding: 12px 14px;
  display: grid;
  gap: 12px;
}

.handoff-summary-checklist-head {
  display: grid;
  gap: 4px;
}

.handoff-summary-checklist-head h4 {
  margin: 0;
  font-size: 0.95rem;
}

.handoff-summary-checklist-head p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.84rem;
  line-height: 1.45;
}

.handoff-summary-checklist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.handoff-summary-checklist-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding-top: 10px;
  border-top: 1px solid rgba(159, 177, 205, 0.5);
}

.handoff-summary-checklist-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.handoff-summary-checklist-label {
  color: #4c5d73;
  font-size: 0.88rem;
  line-height: 1.4;
}

.handoff-summary-checklist-value {
  font-weight: 700;
  font-size: 0.88rem;
  text-align: right;
  line-height: 1.4;
}

.handoff-summary-checklist-value.is-good {
  color: #206d45;
}

.handoff-summary-checklist-value.is-attention {
  color: #8a5b12;
}

.handoff-summary-checklist-value.is-issue {
  color: #8c1f1f;
}

.handoff-summary-checklist-value.is-muted,
.handoff-summary-checklist-value.is-neutral {
  color: #41546d;
}

.work-item-review-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.work-item-review-summary-item {
  border: 1px solid #d8e2f1;
  border-radius: 10px;
  background: var(--bg-surface-subtle);
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.work-item-review-summary-label {
  color: #49628a;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.work-item-review-summary-value {
  color: #213450;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

.work-item-review-summary-value.is-good {
  color: #206d45;
}

.work-item-review-summary-value.is-attention {
  color: #8a5b12;
}

@media (max-width: 860px) {
  .handoff-summary-layout,
  .work-item-review-summary {
    grid-template-columns: 1fr;
  }
}

.modal-readonly-title {
  color: #49628a;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.modal-readonly-value {
  margin: 0;
  color: #213450;
  font-size: 0.92rem;
  line-height: 1.45;
}

.modal-context-list {
  display: grid;
  gap: 7px;
}

.modal-context-item {
  display: grid;
  gap: 2px;
}

.modal-context-link {
  color: #1a4f8f;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(26, 79, 143, 0.38);
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.modal-context-preview-trigger {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.modal-context-meta {
  color: #587097;
  font-size: 0.78rem;
}

.modal-card-compact {
  width: min(520px, 100%);
}

.modal-card-attachment-preview {
  width: min(1040px, 96vw);
  max-height: min(92vh, 980px);
}

body.global-search-open {
  overflow: hidden;
}

.global-search-modal {
  z-index: 240;
  align-items: start;
  padding-top: 88px;
  background: rgba(12, 22, 37, 0.5);
}

.global-search-panel {
  width: min(760px, calc(100vw - 28px));
  max-height: min(82vh, 760px);
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.global-search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #d8e2f0;
}

.global-search-heading {
  min-width: 0;
}

.global-search-heading h2 {
  margin: 0;
  font-size: 1.02rem;
}

.global-search-input-wrap {
  display: block;
  padding: 14px 18px;
  border-bottom: 1px solid #e1e8f3;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(242, 247, 253, 0.94));
}

.global-search-input {
  width: 100%;
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid #cdd9ea;
  background: #ffffff;
  padding: 0 16px;
  font-size: 1rem;
  color: var(--text-main);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.global-search-input:focus {
  outline: none;
  border-color: #7ea5d7;
  box-shadow: 0 0 0 3px rgba(73, 125, 188, 0.14);
}

.global-search-results {
  display: grid;
  gap: 18px;
  padding: 16px 18px 18px;
  overflow: auto;
}

.global-search-status {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.88rem;
}

.global-search-group {
  display: grid;
  gap: 10px;
}

.global-search-group-title {
  margin: 0;
  color: #4f678d;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.global-search-group-list {
  display: grid;
  gap: 6px;
}

.global-search-option {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: #f5f8fc;
  color: var(--text-main);
  text-decoration: none;
  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    transform 120ms ease;
}

.global-search-option:hover,
.global-search-option.is-active {
  border-color: #c7d8ec;
  background: #eef4fb;
  transform: translateY(-1px);
}

.global-search-option-label {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

.global-search-option-meta {
  color: #60789d;
  font-size: 0.84rem;
  line-height: 1.4;
}

.global-search-empty {
  padding: 14px 0 2px;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.attachment-preview-shell {
  border: 1px solid #d8e2f1;
  border-radius: 12px;
  background: var(--bg-surface-subtle);
  min-height: min(56vh, 580px);
  max-height: min(74vh, 760px);
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 12px;
}

.attachment-preview-image {
  max-width: 100%;
  max-height: min(68vh, 700px);
  width: auto;
  height: auto;
  border-radius: 9px;
  background: var(--bg-surface-muted);
  object-fit: contain;
}

.attachment-preview-pdf {
  width: 100%;
  min-height: min(62vh, 680px);
  height: min(68vh, 740px);
  border: 0;
  border-radius: 8px;
  background: var(--bg-surface);
}

.attachment-preview-placeholder {
  margin: 0;
  color: #445f84;
  font-size: 0.86rem;
  line-height: 1.45;
  text-align: center;
  max-width: 380px;
}

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

.expert-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.modal-card-work-item-summary {
  width: min(840px, 100%);
}

.work-item-summary-sections {
  display: grid;
  gap: 16px;
}

.work-item-summary-section {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-surface);
  box-shadow: var(--shadow);
}

.work-item-summary-section + .work-item-summary-section {
  margin-top: 0;
}

.work-item-summary-section-head h4 {
  margin: 0;
  font-size: 0.98rem;
  color: #1a2f4e;
}

.work-item-summary-section-head p {
  margin: 4px 0 0;
  color: #5a6f8f;
  font-size: 0.84rem;
}

.work-item-summary-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.work-item-summary-kv-item {
  border: 1px solid #d8e2f1;
  border-radius: 10px;
  background: var(--bg-surface-subtle);
  padding: 9px 10px;
  display: grid;
  gap: 3px;
}

.work-item-summary-label {
  color: #4f6689;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.work-item-summary-value {
  color: #1f3556;
  font-size: 0.9rem;
  font-weight: 600;
  word-break: break-word;
}

.expert-modal-item {
  border: 1px solid #d8e2f1;
  border-radius: 10px;
  background: var(--bg-surface-subtle);
  padding: 9px 10px;
  display: grid;
  gap: 3px;
}

.expert-modal-label {
  color: #4f6689;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.expert-modal-value {
  color: #1f3556;
  font-size: 0.9rem;
  font-weight: 600;
  word-break: break-word;
}

.work-items-builder {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.overview-section-stack {
  display: grid;
  gap: var(--section-stack-gap);
}

.overview-section-stack > .work-items-builder {
  margin-top: 0 !important;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-surface);
  box-shadow: var(--shadow);
}

.overview-section-stack > .danger-zone {
  margin-top: 0;
}

@media (max-width: 960px) {
  .reports-split-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.work-items-header h3 {
  margin: 0;
  font-size: 1rem;
}

.work-items-header p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 0.9rem;
}

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

.record-builder-empty {
  padding: 14px;
  border: 1px dashed #c7d7eb;
  border-radius: 12px;
  background: var(--bg-surface-subtle);
  color: var(--text-soft);
}

.record-builder-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--bg-surface-subtle);
  display: grid;
  gap: 12px;
}

.record-builder-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.record-builder-row-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: #204774;
}

.record-builder-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

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

.work-item-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--bg-surface-subtle);
  display: grid;
  gap: 10px;
}

.work-item-row.is-unsaved {
  border-color: #e6b45d;
  box-shadow: 0 0 0 1px rgba(230, 180, 93, 0.25);
}

.work-item-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.work-item-row-head-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.work-item-row-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.work-item-row-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: #204774;
}

.work-item-status-pill {
  display: inline-flex;
  align-items: center;
}

.work-item-lock-note {
  margin: 0;
  color: #7a4f0f;
  font-size: 0.84rem;
  font-weight: 600;
}

.work-item-unsaved-warning {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8c4f00;
  font-size: 0.84rem;
  font-weight: 700;
  background: #fff6e8;
  border: 1px solid #f0d4a2;
  border-radius: 8px;
  padding: 7px 9px;
}

.work-item-unsaved-warning[hidden] {
  display: none !important;
}

.work-item-unsaved-warning-icon {
  line-height: 1;
}

.work-item-warning-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c76f00;
  font-size: 1rem;
  line-height: 1;
}

.work-item-warning-icon[hidden] {
  display: none !important;
}

.work-item-warning-text-inline {
  color: #8c4f00;
  font-size: 0.78rem;
  font-weight: 600;
}

.work-item-warning-text-inline[hidden] {
  display: none !important;
}

.work-item-planning-warning {
  margin: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  color: #8c4f00;
  font-size: 0.84rem;
  font-weight: 600;
  background: #fff3df;
  border: 1px solid #efd2a4;
  border-radius: 8px;
  padding: 7px 9px;
}

.work-item-planning-warning-list {
  display: grid;
  gap: 6px;
}

.work-item-planning-warning-list[hidden] {
  display: none !important;
}

.work-item-planning-warning[hidden] {
  display: none !important;
}

.work-item-planning-warning-icon {
  line-height: 1;
  margin-top: 1px;
}

.work-item-summary-toggle {
  display: none;
  width: 100%;
  border: 1px solid #d4deee;
  border-radius: 10px;
  background: var(--bg-surface);
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.work-item-summary-toggle:disabled {
  cursor: default;
}

.work-item-row.is-collapsed .work-item-summary-toggle {
  display: grid;
  gap: 8px;
}

.work-item-row.is-collapsed .work-item-fields {
  display: none;
}

.work-item-summary-description {
  font-size: 0.9rem;
  font-weight: 700;
  color: #204774;
}

.work-item-summary-experts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.expert-pin {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #c6d6ee;
  background: #eaf2ff;
  color: #1e4576;
  padding: 4px 10px;
  min-height: 34px;
  line-height: 1.2;
  text-align: center;
}

.expert-inline-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

.expert-inline-list.is-left {
  margin: 0;
  justify-items: start;
}

.work-item-table-wrap .expert-inline-list {
  margin: 0;
}

.expert-inline-button,
.expert-inline-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 999px;
  border: 1px solid #c6d6ee;
  background: #eaf2ff;
  color: #1e4576;
  padding: 4px 10px;
  min-height: 34px;
  line-height: 1.2;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.expert-inline-button {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.expert-inline-name {
  display: block;
  font-size: 0.79rem;
  font-weight: 700;
  color: #1e4576;
  text-align: center;
  white-space: nowrap;
}

.expert-inline-specialization {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #4a6283;
  text-align: center;
  white-space: nowrap;
}

.expert-inline-button:hover {
  background: #dbe9ff;
}

.expert-inline-button:focus-visible {
  outline: 2px solid #9fc0ef;
  outline-offset: 1px;
}

.work-item-summary-empty {
  color: var(--text-soft);
  font-size: 0.84rem;
}

.work-item-fields {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.work-item-field {
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
}

.work-item-field-title {
  display: inline-block;
}

.work-item-fields textarea {
  min-height: 92px;
}

.work-item-assignees {
  display: grid;
  gap: 10px;
}

.work-item-assignee-actions {
  display: grid;
  gap: 8px;
  justify-items: start;
}

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

.expert-chip {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid #c6d6ee;
  background: #eaf2ff;
  color: #1e4576;
  padding: 4px 8px 4px 10px;
}

.expert-chip-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  line-height: 1.2;
  text-align: center;
}

.expert-chip-remove {
  border: none;
  background: rgba(31, 78, 140, 0.15);
  color: #1f4e8c;
  border-radius: 999px;
  width: 18px;
  height: 18px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.expert-picker-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.expert-picker-controls select {
  min-width: 280px;
}

.work-item-note {
  color: var(--text-soft);
  font-size: 0.82rem;
}

.work-item-hours input {
  max-width: 112px;
}

.work-item-cost input {
  max-width: 160px;
}

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

.work-item-goal-date input {
  background: var(--bg-readonly);
}

.materials-builder {
  border-top: 1px dashed #d5deec;
  margin-top: 8px;
  padding-top: 10px;
  display: grid;
  gap: 10px;
}

.materials-header {
  display: grid;
  gap: 4px;
}

.materials-list {
  display: grid;
  gap: 8px;
}

.material-line-row {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(180px, 1.6fr) 120px 130px 130px auto;
  align-items: end;
  border: 1px solid #dce5f2;
  border-radius: 10px;
  padding: 10px;
  background: var(--bg-surface);
}

.material-line-row label {
  margin: 0;
}

.material-line-row input[type="number"],
.material-line-row input[type="text"] {
  width: 100%;
}

.material-remove-button {
  align-self: end;
}

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

.material-total-field {
  max-width: 220px;
}

.material-total-field input {
  background: var(--bg-readonly);
}

.quote-project-picker-panel {
  margin-bottom: 14px;
}

.quote-project-picker-form {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: end;
}

.quote-project-summary {
  display: grid;
  gap: 12px;
}

.table-subtext {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.card-caption {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.form-actions-inline-end {
  justify-content: flex-end;
  align-items: end;
}

[data-quote-form] .table-wrap table input,
[data-quote-form] .table-wrap table select {
  min-width: 110px;
  width: 100%;
}

[data-quote-form] .table-wrap table td {
  vertical-align: middle;
}

[data-invoice-form] .record-builder-row input[type="text"],
[data-invoice-form] .record-builder-row input[type="number"] {
  width: 100%;
}

[data-invoice-form] .record-builder-row .form-grid {
  margin-bottom: 0;
}

.quote-totals {
  border: 1px solid #dce5f2;
  border-radius: 12px;
  background: var(--bg-surface-subtle);
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}

.quote-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #39526f;
  font-size: 0.92rem;
}

.quote-total-row strong {
  font-size: 1rem;
  color: #193f6f;
}

.quote-total-row.is-grand {
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px dashed #cad8eb;
}

.quote-total-row.is-grand strong {
  font-size: 1.15rem;
}

.quote-action-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.quote-action-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-surface-subtle);
}

.quote-action-card h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-strong);
}

.quote-action-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.quote-action-card .button-primary,
.quote-action-card .button-secondary,
.quote-action-card .button-success,
.quote-action-card .button-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  align-self: start;
  padding: 7px 10px;
  font-size: 0.82rem;
  line-height: 1;
  border-radius: 8px;
  white-space: nowrap;
}

.quote-public-approval-card {
  width: min(1360px, 100%);
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
}

.quote-public-approval-page {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px;
}

.quote-public-approval-page .quote-public-approval-card {
  margin: 0 auto;
}

.quote-public-approval-brand {
  padding: 46px 38px 42px;
  gap: 16px;
  background: var(--bg-sidebar-gradient);
}

.quote-public-approval-brand .auth-brand-mark-wrap {
  width: clamp(134px, 14.7vw, 160px);
}

.quote-public-approval-brand::before {
  inset: 24px -56px auto auto;
  width: 176px;
  height: 176px;
  background: radial-gradient(circle, rgba(211, 228, 248, 0.18) 0%, rgba(211, 228, 248, 0) 72%);
}

.quote-public-approval-brand::after {
  inset: auto -90px -96px 24%;
  width: 244px;
  height: 244px;
  border-color: rgba(221, 233, 251, 0.16);
}

.quote-public-approval-brand .auth-brand-eyebrow {
  padding: 10px 16px;
  background: #f3f7ff;
  color: #183760;
  font-weight: 800;
}

.quote-public-approval-brand h1 {
  font-size: clamp(1.9rem, 2.2vw, 2.35rem);
  letter-spacing: -0.03em;
}

.quote-public-approval-brand .auth-brand-lede {
  max-width: none;
  color: #f7fbff;
  font-size: clamp(0.96rem, 1.08vw, 1.12rem);
  line-height: 1.5;
}

.quote-public-approval-brand .auth-brand-points {
  margin-top: 22px;
  gap: 14px;
}

.quote-public-approval-brand .auth-brand-points li {
  position: relative;
  display: block;
  padding-left: 28px;
  max-width: none;
  line-height: 1.5;
}

.quote-public-approval-brand .auth-brand-points li::before {
  position: absolute;
  left: 0;
  top: 0.5rem;
  margin-top: 0;
}

.quote-public-approval-panel {
  padding: 40px 42px;
  display: grid;
  gap: 28px;
}

.quote-public-approval-topbar {
  justify-content: flex-end;
  margin-bottom: -8px;
}

.quote-public-approval-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.quote-public-approval-header-main {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.quote-public-approval-header h2 {
  margin: 0;
  color: #17355e;
  max-width: none;
  font-size: clamp(1.8rem, 2.85vw, 2.55rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.quote-public-approval-state-panel h2 {
  margin: 0;
  color: #17355e;
  font-size: clamp(1.8rem, 2.7vw, 2.45rem);
  line-height: 1.08;
}

.quote-public-approval-section-kicker {
  margin: 0;
  color: #54739b;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.quote-public-approval-link-pill {
  min-width: 208px;
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid #d5e0ee;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 16px 34px rgba(14, 31, 58, 0.08);
}

.quote-public-approval-link-pill span {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.quote-public-approval-link-pill strong {
  color: #17355e;
  font-size: 1.08rem;
}

.quote-public-approval-stack {
  display: grid;
  gap: 18px;
}

.quote-public-approval-summary-panel,
.quote-public-approval-decision-panel,
.quote-public-approval-items-panel,
.quote-public-approval-state-panel {
  margin-top: 0;
  padding: 28px 30px;
  border-radius: 24px;
  border: 1px solid #d7e1ed;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 18px 40px rgba(14, 31, 58, 0.08);
}

.quote-public-approval-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 296px);
  gap: 24px 28px;
  align-items: start;
}

.quote-public-approval-summary-panel {
  gap: 20px;
}

.quote-public-approval-summary-copy {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.quote-public-approval-summary-copy h3 {
  margin: 0;
  color: #17355e;
  max-width: none;
  font-size: clamp(1.12rem, 1.45vw, 1.38rem);
  line-height: 1.18;
  letter-spacing: -0.04em;
}

.quote-public-approval-summary-copy p {
  margin: 0;
  color: var(--text-soft);
  max-width: 34ch;
  font-size: 1.08rem;
  line-height: 1.5;
}

.quote-public-approval-total-block {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-self: stretch;
  padding: 24px;
  border-radius: 24px;
  background: var(--bg-sidebar-gradient);
  box-shadow: 0 22px 46px rgba(19, 49, 92, 0.18);
  color: #f7fbff;
}

.quote-public-approval-total-block span {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(234, 242, 255, 0.84);
}

.quote-public-approval-total-block strong {
  font-size: clamp(1.75rem, 2.4vw, 2.35rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.quote-public-approval-total-block small {
  color: rgba(229, 238, 252, 0.84);
  font-size: 0.92rem;
  line-height: 1.55;
}

.quote-public-approval-facts,
.quote-public-approval-state-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 14px;
}

.quote-public-approval-facts {
  margin-top: 0;
}

.quote-public-approval-facts div,
.quote-public-approval-state-facts div {
  min-width: 0;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid #dde5f0;
  background: var(--bg-surface-subtle);
}

.quote-public-approval-state-facts .is-full {
  grid-column: 1 / -1;
}

.quote-public-approval-facts .quote-public-approval-fact-address {
  grid-column: span 2;
}

.quote-public-approval-facts dt,
.quote-public-approval-state-facts dt,
.quote-response-spotlight-label {
  display: block;
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quote-public-approval-facts dd,
.quote-public-approval-state-facts dd {
  margin: 0;
  color: #1d365a;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: normal;
  word-break: normal;
}

.quote-public-approval-state-facts dd {
  white-space: pre-wrap;
}

.quote-public-approval-fact-nowrap dd {
  white-space: nowrap;
  font-size: 0.96rem;
}

.quote-public-approval-fact-address dd {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.quote-public-approval-decision-panel {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  gap: 24px 32px;
  align-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafe 100%);
  animation: quote-public-approval-panel-enter 320ms ease;
}

.quote-public-approval-decision-copy {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.quote-public-approval-decision-panel h3 {
  margin: 0;
  color: #17355e;
  max-width: 20ch;
  font-size: clamp(1.28rem, 1.8vw, 1.62rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.quote-public-approval-decision-copy > p:not(.quote-public-approval-section-kicker) {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
}

.quote-public-approval-decision-actions {
  display: grid;
  gap: 12px;
}

.quote-public-approval-decision-form {
  margin: 0;
}

.quote-public-approval-action-button {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  font-size: 1rem;
}

.quote-public-approval-decision-help,
.quote-public-approval-state-help {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}

.quote-public-approval-decision-help {
  grid-column: 1 / -1;
  padding-top: 18px;
  border-top: 1px solid #e2eaf4;
}

.quote-public-approval-items-panel {
  gap: 18px;
}

.quote-public-approval-items-panel .table-wrap {
  background: var(--bg-surface);
  border: 1px solid #e0e7f1;
  border-radius: 18px;
  box-shadow: none;
}

.quote-public-approval-items-panel table {
  min-width: 640px;
}

.quote-public-approval-items-panel th,
.quote-public-approval-items-panel td {
  padding: 15px 16px;
}

.quote-public-approval-items-panel th:last-child,
.quote-public-approval-items-panel td:last-child {
  text-align: right;
}

.quote-public-approval-items-panel tbody tr:last-child td {
  border-bottom: 0;
}

.quote-public-approval-state-panel {
  display: grid;
  gap: 16px;
}

.quote-public-approval-state-panel.is-success.is-accepted {
  border-color: rgba(25, 135, 84, 0.22);
  box-shadow: 0 20px 48px rgba(25, 135, 84, 0.12);
}

.quote-public-approval-state-panel.is-success.is-rejected {
  border-color: rgba(202, 63, 63, 0.22);
  box-shadow: 0 20px 48px rgba(202, 63, 63, 0.12);
}

.quote-public-approval-modal-open {
  overflow: hidden;
}

.quote-public-approval-modal {
  background: rgba(11, 24, 45, 0.34);
  backdrop-filter: blur(4px);
}

.quote-public-approval-modal-card {
  width: min(560px, calc(100vw - 32px));
  padding: 28px;
  border-radius: 24px;
  border: 1px solid #d8e2ef;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 30px 68px rgba(11, 24, 49, 0.24);
  animation: quote-public-approval-modal-enter 220ms ease;
}

.quote-public-approval-reject-form {
  display: grid;
  gap: 16px;
}

.quote-public-approval-reject-form h3 {
  margin: 0;
  color: #17355e;
  font-size: clamp(1.45rem, 2vw, 1.8rem);
  line-height: 1.12;
}

.quote-public-approval-reject-form .modal-subtitle {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.6;
}

.quote-public-approval-reject-form .modal-field {
  display: grid;
  gap: 8px;
}

.quote-public-approval-reject-form .modal-field span {
  color: #1d365a;
  font-size: 0.86rem;
  font-weight: 700;
}

.quote-public-approval-reject-form textarea {
  min-height: 150px;
  padding: 14px 16px;
  border: 1px solid #cfdbeb;
  border-radius: 16px;
  background: var(--bg-surface-subtle);
}

.quote-public-approval-modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.quote-response-spotlight {
  margin-top: 18px;
  display: grid;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid #d9e2ee;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
}

.quote-response-spotlight.is-accepted {
  border-color: rgba(25, 135, 84, 0.24);
  background: linear-gradient(180deg, #fbfffd 0%, #f1fbf5 100%);
}

.quote-response-spotlight.is-rejected {
  border-color: rgba(202, 63, 63, 0.24);
  background: linear-gradient(180deg, #fffafa 0%, #fff3f3 100%);
}

.quote-response-spotlight-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.quote-response-spotlight-header h3 {
  margin: 4px 0 0;
  color: #17355e;
  font-size: 1.14rem;
}

.quote-response-spotlight-header p {
  margin: 8px 0 0;
  max-width: 58ch;
  color: var(--text-soft);
  line-height: 1.5;
}

.quote-response-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.quote-response-spotlight-grid > div {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(215, 226, 240, 0.82);
  background: rgba(255, 255, 255, 0.78);
}

.quote-response-spotlight-grid strong {
  display: block;
  color: #1d365a;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.quote-response-spotlight-grid p {
  margin: 0;
  color: #1d365a;
  line-height: 1.55;
  white-space: pre-wrap;
}

.quote-response-spotlight-full {
  grid-column: 1 / -1;
}

@keyframes quote-public-approval-panel-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

@keyframes quote-public-approval-modal-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.quote-public-approval-copy-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quote-public-approval-copy-input[readonly] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--text-main);
}

.quote-public-approval-url-cell {
  min-width: 320px;
}

@media (max-width: 720px) {
  .quote-public-approval-copy-control {
    flex-direction: column;
    align-items: stretch;
  }

  .quote-public-approval-copy-control .button-secondary {
    width: 100%;
  }
}

.quote-revision-row-current td {
  background: rgba(47, 110, 176, 0.08);
}

.empty-state {
  margin: 0;
  color: var(--text-muted);
}

.profile-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: 300px 1fr;
}

.profile-summary {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.profile-summary .avatar,
.profile-summary .avatar-fallback {
  width: 72px;
  height: 72px;
  font-size: 1.2rem;
}

.settings-layout {
  align-items: start;
}

.settings-summary {
  display: grid;
  gap: 8px;
  align-content: start;
}

.settings-summary h3,
.settings-layout .panel h3 {
  margin: 0;
}

.settings-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 12px 0 14px;
}

.settings-preference-form {
  display: grid;
  gap: 14px;
}

.settings-toggle-card {
  border: 1px solid #dce5f2;
  border-radius: 12px;
  padding: 12px;
  background: var(--bg-surface-subtle);
}

.settings-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.settings-checkbox-row input {
  margin-top: 3px;
}

.settings-checkbox-row span {
  display: grid;
  gap: 6px;
}

.settings-notification-grid {
  display: grid;
  gap: 12px;
}

.settings-notification-card {
  display: grid;
  gap: 14px;
}

.settings-notification-card-head h3 {
  margin-bottom: 6px;
}

.settings-notification-frequency-field {
  display: grid;
  gap: 6px;
}

.settings-notification-frequency-field span {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-main);
}

.settings-note {
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.two-factor-panel {
  display: grid;
  gap: 12px;
}

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

.two-factor-header h3 {
  margin: 0;
}

.two-factor-recovery-box,
.two-factor-setup-box {
  border: 1px solid #dce5f2;
  border-radius: 12px;
  background: var(--bg-surface-subtle);
  padding: 12px;
}

.two-factor-qr-wrap {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  justify-items: start;
}

.two-factor-qr-image {
  width: 220px;
  height: 220px;
  border: 1px solid #c9d8ec;
  border-radius: 10px;
  background: var(--bg-surface);
}

.two-factor-recovery-box p {
  margin: 0 0 10px;
}

.two-factor-recovery-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.two-factor-recovery-list code {
  background: var(--bg-surface-selected);
  border: 1px solid #c7d7ef;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.82rem;
  text-align: center;
}

.two-factor-action-form {
  border-top: 1px solid #e4eaf3;
  padding-top: 10px;
  margin-top: 2px;
}

.two-factor-cancel-form {
  margin-top: 8px;
}

.two-factor-actions-row {
  display: flex;
  gap: 8px;
}

.profile-security-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.meta-item {
  font-size: 0.88rem;
  color: var(--text-soft);
  margin-top: 7px;
}

.admin-studio-grid {
  display: grid;
  gap: 14px;
}

.admin-studio-grid > .panel > .work-items-header + form,
.admin-studio-grid > .panel > .work-items-header + .tenant-plan-summary,
.admin-studio-grid > .panel > .work-items-header + .tenant-quota-list,
.admin-studio-grid > .panel > .work-items-header + .cards,
.admin-studio-grid > .panel > .work-items-header + .table-wrap,
.admin-studio-grid > .panel > .work-items-header + .overview-section-stack {
  margin-top: 18px;
}

.admin-studio-grid .work-items-builder .work-items-header h4 {
  margin: 0;
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.35;
}

.admin-studio-grid [data-default-currency-form] > .overview-section-stack + .admin-studio-meta-grid,
.admin-studio-grid [data-default-currency-form] > .admin-studio-meta-grid + .meta-item,
.admin-studio-grid [data-default-currency-form] > .meta-item + .form-actions {
  margin-top: 18px;
}

.admin-studio-grid [data-default-currency-form] > .meta-item + .meta-item {
  margin-top: 8px;
}

.admin-studio-launchpad-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
}

.panel.u-mb-14 > .cards:has(> .admin-studio-launchpad-card) {
  margin-top: 14px;
}

.admin-studio-launchpad-card > h3 {
  margin: 0;
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}

.admin-studio-launchpad-card > p.subtitle {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

.admin-studio-launchpad-card > p.subtitle:last-child {
  margin-top: auto;
  padding-top: 2px;
}

.admin-studio-launchpad-card-meta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.admin-studio-launchpad-card > .form-actions:last-child {
  margin-top: auto;
  padding-top: 2px;
}

.admin-studio-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.tenant-card-value-small {
  font-size: 1.1rem !important;
  line-height: 1.3;
}

.tenant-plan-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 6px 0 10px;
}

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

.tenant-quota-item {
  border: 1px solid #dce5f2;
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--bg-surface-subtle);
}

.tenant-quota-item h4 {
  margin: 0;
  font-size: 0.9rem;
}

.tenant-quota-item header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tenant-quota-values {
  font-size: 0.84rem;
  color: var(--text-soft);
}

.tenant-quota-bar {
  margin-top: 8px;
  height: 8px;
  border-radius: 999px;
  background: #dbe6f5;
  overflow: hidden;
}

.tenant-quota-bar-fill {
  display: block;
  width: calc(var(--fill-percent, 0) * 1%);
  height: 100%;
  border-radius: 999px;
  background: #2f77d0;
}

.tenant-quota-bar-fill.is-over {
  background: #cf3f3f;
}

.tenant-quota-caption {
  margin-bottom: 0;
}

.tenant-billing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.tenant-inline-action-form {
  margin: 0;
  display: grid;
  gap: 6px;
  min-width: 230px;
}

.tenant-inline-label {
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
}

.tenant-inline-label input {
  min-height: 32px;
  font-size: 0.82rem;
}

.admin-studio-page {
  display: grid;
  gap: 18px;
}

.admin-studio-workspace {
  display: grid;
  grid-template-columns: minmax(240px, 272px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-studio-sidebar {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 18px;
  padding: 18px;
}

.admin-studio-section-kicker,
.admin-studio-modal-kicker,
.admin-studio-nav-group-label {
  margin: 0;
  color: #244d81;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-studio-nav-group {
  display: grid;
  gap: 10px;
}

.admin-studio-nav-list {
  display: grid;
  gap: 8px;
}

.admin-studio-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--bg-surface-subtle);
  color: var(--text-main);
  font-weight: 700;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.admin-studio-nav-link:hover,
.admin-studio-nav-link:focus-visible {
  border-color: #cfdced;
  background: var(--bg-surface);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(23, 37, 61, 0.08);
}

.admin-studio-nav-link.is-active {
  border-color: #c4d7f0;
  background: #edf5ff;
  color: #143e73;
  box-shadow: inset 0 0 0 1px rgba(47, 119, 208, 0.08);
}

.admin-studio-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: #dcecff;
  color: #17457b;
  font-size: 0.79rem;
  font-weight: 800;
}

.admin-studio-content {
  min-width: 0;
}

.admin-studio-section {
  display: grid;
  gap: 18px;
  --section-stack-gap: 18px;
}

.admin-studio-content .panel > .section-header-bar + form,
.admin-studio-content .panel > .section-header-bar + .cards,
.admin-studio-content .panel > .section-header-bar + .table-wrap,
.admin-studio-content .panel > .section-header-bar + .admin-studio-summary-grid,
.admin-studio-content .panel > .section-header-bar + .admin-studio-filter-form,
.admin-studio-content .panel > .section-header-bar + .overview-section-stack,
.admin-studio-content .panel > .section-header-bar + .subtitle,
.admin-studio-content .panel > .section-header-bar + .flash,
.admin-studio-content .work-items-builder > .section-header-bar + .table-wrap {
  margin-top: 16px;
}

.admin-studio-section-header {
  margin-bottom: 0;
}

.admin-studio-section-header .subtitle {
  max-width: 760px;
}

.admin-studio-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.admin-studio-summary-card {
  min-width: 0;
}

.admin-studio-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-studio-subtab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #d5dfec;
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-soft);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.admin-studio-subtab:hover,
.admin-studio-subtab:focus-visible {
  border-color: #b9d0ee;
  color: #1a4477;
}

.admin-studio-subtab.is-active {
  border-color: #c4d7f0;
  background: #edf5ff;
  color: #173f72;
}

.admin-studio-view-panel[hidden] {
  display: none;
}

.admin-studio-organization-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.78fr);
  gap: 18px;
  align-items: start;
}

.tenant-organization-logo-settings {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: start;
}

.tenant-organization-logo-preview {
  display: grid;
  gap: 10px;
}

.tenant-organization-logo-preview .detail-label {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tenant-organization-logo-preview-surface {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 112px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(116, 150, 186, 0.92), rgba(136, 164, 197, 0.86)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.22), transparent 52%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.tenant-organization-logo-preview-mark {
  width: 110px;
  height: 58px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tenant-organization-logo-preview-mark img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.tenant-organization-logo-preview-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.tenant-organization-logo-preview-copy strong {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.3;
}

.tenant-organization-logo-preview-copy span {
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tenant-organization-logo-fields {
  display: grid;
  gap: 12px;
}

.tenant-organization-logo-fields .checkbox-field {
  margin-top: 2px;
}

.admin-studio-side-stack,
.admin-studio-inspector-stack {
  display: grid;
  gap: 14px;
}

.admin-studio-detail-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.admin-studio-detail-list > div {
  display: grid;
  gap: 4px;
}

.admin-studio-detail-list dt {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.admin-studio-detail-list dd {
  margin: 0;
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.5;
}

.admin-studio-note-list {
  display: grid;
  gap: 10px;
}

.admin-studio-note-list p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
}

.admin-studio-rectification-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr);
  gap: 18px;
  align-items: start;
}

.admin-studio-rectification-inspector {
  position: sticky;
  top: 92px;
}

.admin-studio-filter-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.admin-studio-filter-form .checkbox-field {
  align-self: end;
  min-height: 42px;
  margin-bottom: 2px;
}

.admin-studio-queue-row.is-selected td {
  background: var(--bg-surface-selected);
}

.admin-studio-queue-meta {
  margin: 14px 0 0;
  color: var(--text-soft);
  font-size: 0.84rem;
}

.admin-studio-empty-state {
  display: grid;
  gap: 8px;
  min-height: 240px;
  align-content: center;
  justify-items: start;
}

.admin-studio-empty-state h3,
.admin-studio-inspector-section h4,
.admin-studio-field-item h5 {
  margin: 0;
}

.admin-studio-empty-state p {
  margin: 0;
  max-width: 34ch;
  color: var(--text-soft);
}

.admin-studio-inspector-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dde5f0;
  border-radius: 12px;
  background: var(--bg-surface-subtle);
}

.admin-studio-inspector-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-studio-inspector-copy {
  margin: 0;
  color: var(--text-main);
  line-height: 1.55;
}

.admin-studio-field-list {
  display: grid;
  gap: 10px;
}

.admin-studio-field-item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e2ef;
  border-radius: 12px;
  background: var(--bg-surface);
}

.admin-studio-field-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.admin-studio-field-item-head .pill {
  flex-shrink: 0;
}

.admin-studio-field-diff {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-field-diff > div {
  display: grid;
  gap: 4px;
}

.admin-studio-field-diff span {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.admin-studio-field-diff strong {
  color: var(--text-main);
  line-height: 1.45;
}

.admin-studio-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.admin-studio-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-studio-action-row form {
  margin: 0;
}

.admin-studio-request-modal {
  gap: 16px;
}

.admin-studio-request-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-studio-request-modal-header h3 {
  margin-top: 2px;
}

.admin-studio-request-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-studio-request-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #d7e1ec;
  border-radius: 999px;
  background: var(--bg-surface-subtle);
  color: var(--text-soft);
  font-weight: 700;
  cursor: pointer;
}

.admin-studio-request-step.is-active {
  border-color: #c4d7f0;
  background: #edf5ff;
  color: #173f72;
}

.admin-studio-request-modal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 18px;
  align-items: start;
}

.admin-studio-request-modal-main {
  display: grid;
  gap: 14px;
}

.admin-studio-request-modal-summary {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #d8e2ef;
  border-radius: 14px;
  background: var(--bg-surface-subtle);
}

.admin-studio-request-modal-summary h4,
.admin-studio-request-summary-label {
  margin: 0;
}

.admin-studio-request-summary-fields {
  display: grid;
  gap: 10px;
}

.admin-studio-request-summary-fields > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-studio-request-summary-empty {
  margin: 0;
  color: var(--text-soft);
}

.admin-studio-request-summary-note {
  margin: 0;
  border: 1px solid #f0d9aa;
  border-radius: 12px;
  background: #fff7e8;
  color: #6b4b16;
  padding: 10px 12px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.admin-studio-action-modal {
  width: min(560px, 100%);
}

body.admin-studio-modal-open {
  overflow: hidden;
}

.empty {
  padding: 24px;
  text-align: center;
  color: #6d7b90;
}

@media (max-width: 1180px) {
  .quote-public-approval-summary-grid,
  .quote-public-approval-decision-panel {
    grid-template-columns: 1fr;
  }

  .quote-public-approval-decision-panel {
    align-items: start;
  }

  .quote-public-approval-header h2 {
    white-space: normal;
  }

  .quote-public-approval-facts .quote-public-approval-fact-address {
    grid-column: auto;
  }

  .quote-public-approval-fact-nowrap dd {
    white-space: normal;
  }

  .admin-studio-workspace,
  .admin-studio-organization-grid,
  .admin-studio-rectification-layout,
  .admin-studio-request-modal-layout {
    grid-template-columns: 1fr;
  }

  .admin-studio-sidebar,
  .admin-studio-rectification-inspector {
    position: static;
  }

  .tenant-organization-logo-settings {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 1050px) {
  .app-shell {
    --app-sidebar-width: 210px;
  }

  .field-shell {
    --app-sidebar-width: 240px;
  }

  .quote-public-approval-card {
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
  }

  .span-5,
  .span-7 {
    grid-column: span 12;
  }

  .admin-studio-filter-form,
  .admin-studio-inline-form,
  .admin-studio-field-diff {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 860px) {
  .auth-html {
    overscroll-behavior-y: none;
  }

  .auth-page {
    min-height: 100%;
    display: block;
    padding: 16px;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y: none;
    overflow-anchor: none;
    touch-action: pan-y;
  }

  .quote-public-approval-page {
    padding: 16px;
  }

  .auth-card {
    margin: 0 auto;
    grid-template-columns: 1fr;
  }

  .quote-public-approval-panel {
    padding: 24px 22px 26px;
  }

  .quote-public-approval-brand {
    padding: 34px 26px;
  }

  .quote-public-approval-topbar {
    margin-bottom: 0;
  }

  .quote-public-approval-header,
  .quote-response-spotlight-header {
    grid-template-columns: 1fr;
    display: grid;
  }

  .quote-public-approval-link-pill {
    min-width: 0;
    max-width: 100%;
  }

  .quote-public-approval-summary-panel,
  .quote-public-approval-decision-panel,
  .quote-public-approval-items-panel,
  .quote-public-approval-state-panel {
    padding: 22px;
    border-radius: 20px;
  }

  .quote-public-approval-total-block {
    min-width: 0;
  }

  .quote-public-approval-facts,
  .quote-public-approval-state-facts,
  .quote-response-spotlight-grid {
    grid-template-columns: 1fr;
  }

  .quote-public-approval-items-panel .table-wrap {
    border-radius: 16px;
  }

  .quote-public-approval-modal-actions {
    flex-direction: column-reverse;
  }

  .quote-public-approval-modal-actions .button-secondary,
  .quote-public-approval-modal-actions .button-danger {
    width: 100%;
  }

  .auth-panel-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .auth-panel-topbar .auth-locale-switcher-form {
    margin-left: 0;
  }

  .app-shell {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .field-shell {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

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

  .main-area {
    grid-template-rows: auto 1fr;
  }

  .topbar {
    top: 10px;
    margin: 10px 10px 0;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 10px;
    row-gap: 8px;
  }

  .topbar-main {
    width: 100%;
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0;
    align-items: flex-start;
  }

  .topbar-branding {
    align-items: flex-start;
  }

  .topbar-brand-logo {
    width: 84px;
    height: 48px;
  }

  .topbar-brand-logo.is-default {
    width: 61px;
  }

  .auth-brand-lockup {
    gap: 14px;
  }

  .auth-brand-wordmark {
    font-size: clamp(1.95rem, 9vw, 2.5rem);
  }

  .topbar-main h1 {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }

  .topbar-actions {
    display: contents;
  }

  .topbar-actions .locale-switcher-form {
    order: 1;
    flex: 0 0 auto;
  }

  .topbar-actions .topbar-cookie-link {
    order: 2;
    flex: 0 0 auto;
  }

  .topbar-actions .topbar-switch-link {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    justify-content: center;
  }

  .topbar .topbar-search-shell {
    display: none;
  }

  .topbar .topbar-search-mobile-trigger {
    grid-column: 1 / -1;
    grid-row: 3;
    display: inline-flex;
    width: 100%;
    min-width: 0;
  }

  .topbar .topbar-switch-link {
    grid-row: 4;
  }

  .topbar .profile-menu {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-left: 0;
    max-width: none;
  }

  .topbar .notification-menu {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .topbar-search-inline-key {
    min-width: 0;
  }

  .global-search-modal {
    padding: 72px 10px 14px;
  }

  .global-search-header {
    align-items: flex-start;
  }

  .global-search-panel {
    width: min(100%, calc(100vw - 20px));
    max-height: min(84vh, 760px);
  }

  .topbar .profile-trigger {
    width: 44px;
    min-width: 44px;
    padding: 5px;
    justify-content: center;
  }

  .topbar .profile-trigger-label {
    display: none;
  }

  .topbar .sidebar-toggle-button span:last-child {
    display: none;
  }

  .topbar .sidebar-toggle-button {
    gap: 0;
    justify-content: center;
    min-width: 80px;
    min-height: 48px;
    padding: 11px 12px;
  }

  .topbar .sidebar-toggle-icon {
    width: 16px;
    height: 3px;
    margin: 0 auto;
    transform: none;
  }

  .topbar .sidebar-toggle-icon::before,
  .topbar .sidebar-toggle-icon::after {
    width: 16px;
    height: 3px;
  }

  .topbar .sidebar-toggle-icon::before {
    top: -5px;
  }

  .topbar .sidebar-toggle-icon::after {
    top: 5px;
  }

  .locale-switcher-copy {
    display: none;
  }

  .topbar-cookie-link-full {
    display: none;
  }

  .topbar-cookie-link-compact {
    display: inline;
  }

  .locale-switcher-select {
    min-width: 92px;
  }

  .profile-trigger {
    max-width: min(46vw, 170px);
  }

  .profile-trigger-label {
    max-width: min(28vw, 96px);
  }

  .profile-menu .dropdown {
    left: auto;
    right: 0;
    width: min(210px, calc(100vw - 32px));
  }

  .notification-dropdown {
    width: min(386px, calc(100vw - 24px));
    max-width: min(386px, calc(100vw - 24px));
  }

  .notification-menu .notification-dropdown {
    left: auto;
    right: 0;
  }

  .field-topbar {
    top: 10px;
    margin: 10px 10px 0;
    padding: 14px 16px;
    justify-content: flex-end;
  }

  .field-topbar .topbar-main {
    display: none;
  }

  .field-topbar .topbar-actions {
    display: flex;
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    align-items: center;
  }

  .field-topbar .profile-menu {
    order: 1;
    margin: 0;
  }

  .field-topbar .notification-menu {
    order: 2;
    margin: 0;
  }

  .field-topbar .notification-menu .notification-dropdown {
    left: auto;
    right: 0;
    width: min(320px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
  }

  .mention-composer-option {
    padding: 14px;
  }

  .mention-summary-chip {
    min-height: 30px;
  }

  .locale-switcher-label {
    font-size: 0.74rem;
  }

  .locale-switcher-select {
    min-width: 102px;
  }

  .page-content {
    padding: 16px;
  }

  .field-page-content {
    padding-bottom: 88px;
  }

  .field-detail-page {
    gap: 8px;
  }

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

  .customer-compound-field-grid {
    grid-template-columns: 1fr;
  }

  .customer-type-choice-grid {
    grid-template-columns: 1fr;
  }

  .field-work-card-grid,
  .field-action-grid {
    grid-template-columns: 1fr;
  }

  .expert-modal-grid {
    grid-template-columns: 1fr;
  }

  .work-item-summary-kv-grid {
    grid-template-columns: 1fr;
  }

  .work-item-table-toolbar {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .work-item-fields {
    grid-template-columns: 1fr;
  }

  .work-item-plan-grid {
    grid-template-columns: 1fr;
  }

  .material-line-row {
    grid-template-columns: 1fr;
  }

  .material-total-field {
    max-width: 100%;
  }

  .quote-project-picker-form {
    grid-template-columns: 1fr;
  }

  .quote-action-grid {
    grid-template-columns: 1fr;
  }

  .expert-overview-cards {
    grid-template-columns: 1fr;
  }

  .cookie-consent-banner {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
  }

  .cookie-consent-actions {
    flex-direction: column;
  }

  .cookie-consent-actions .button-small {
    width: 100%;
    justify-content: center;
  }

  .scroll-jump-button {
    right: 12px;
    max-width: min(220px, calc(100vw - 24px));
    font-size: 0.82rem;
  }

  .scroll-jump-button.is-icon-only {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    height: 46px;
    padding: 0;
    border-radius: 999px;
    font-size: 1.18rem;
    line-height: 1;
  }

  .field-mobile-nav {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    overflow: hidden;
    display: grid;
    align-items: stretch;
    gap: var(--field-mobile-link-gap);
    grid-template-columns: repeat(var(--field-mobile-link-count, 3), minmax(0, 1fr));
    padding: var(--field-mobile-link-padding);
    border-radius: 18px;
    border: 1px solid var(--border-sidebar-frost);
    background: var(--bg-sidebar-frost);
    box-shadow:
      var(--shadow-sidebar-frost),
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 -1px 0 rgba(140, 201, 255, 0.04);
    backdrop-filter: blur(2.5px) saturate(124%) brightness(1.01);
    -webkit-backdrop-filter: blur(2.5px) saturate(124%) brightness(1.01);
    isolation: isolate;
    z-index: 25;
  }

  .field-mobile-nav::before,
  .field-mobile-nav::after {
    z-index: 0;
  }

  .field-mobile-link {
    position: relative;
    z-index: 2;
    background: transparent;
    box-shadow: none;
    color: #dce9ff;
    font-size: 0.82rem;
    transform: none;
    transition: color 0.16s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .field-mobile-link:hover,
  .field-mobile-link:focus-visible,
  .field-mobile-link.active,
  .field-mobile-link.is-pending-active {
    background: transparent;
    box-shadow: none;
    transform: none;
  }
}

@media (max-width: 1180px) and (min-width: 768px) {
  .expert-overview-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .app-shell[data-sidebar-ready] .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 320px);
    max-width: 320px;
    height: auto;
    margin: 0;
    border-left: none;
    border-radius: 0 22px 22px 0;
    padding: 20px 16px;
    overflow-y: auto;
    transform: translateX(-104%);
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 22px 48px rgba(9, 23, 48, 0.28);
    transition:
      transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.18s ease;
  }

  .app-shell[data-sidebar-ready].sidebar-mobile-open .sidebar {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .field-sidebar {
    display: none;
  }

  .field-shell[data-sidebar-ready] .field-sidebar {
    display: grid;
  }

  .admin-studio-launchpad-card-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-studio-launchpad-card-permission {
    width: 100%;
    max-width: 100%;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-jump-button {
    transition: none;
  }
}

.workflow-library-intro,
.workflow-library-section-head,
.workflow-library-launcher,
.workflow-pack-panel-head,
.workflow-pack-panel-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.workflow-library-intro,
.workflow-pack-panel-head {
  margin-bottom: 16px;
}

.workflow-library-intro h3,
.workflow-pack-panel-head h3,
.workflow-library-section-head h3 {
  margin-bottom: 6px;
}

.workflow-library-intro p,
.workflow-pack-panel-head p,
.workflow-library-section-head p {
  margin: 0;
  color: var(--color-text-muted);
}

.workflow-library-launcher,
.workflow-library-filter-form,
.workflow-pack-panel-controls {
  flex-wrap: wrap;
}

.workflow-library-launcher label,
.workflow-library-filter-form label,
.workflow-pack-panel-controls label {
  flex: 1 1 220px;
}

.workflow-library-filter-form {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: 18px;
}

.workflow-source-banner {
  background: linear-gradient(180deg, rgba(37, 88, 160, 0.08), rgba(37, 88, 160, 0.02));
  border-color: rgba(37, 88, 160, 0.18);
}

.workflow-source-banner-kicker {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(37, 88, 160, 0.12);
  color: var(--color-brand-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workflow-source-banner h3 {
  margin-top: 12px;
  margin-bottom: 8px;
}

.workflow-source-banner p {
  margin: 0;
  color: var(--color-text-muted);
}

.workflow-library-preview-list {
  display: grid;
  gap: 16px;
}

.workflow-library-preview-card {
  padding: 18px;
  border: 1px solid var(--color-border-soft);
  border-radius: 20px;
  background: var(--color-surface-raised);
}

.workflow-library-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.workflow-library-preview-head h4 {
  margin: 0;
}

.workflow-library-preview-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workflow-library-material-list {
  margin: 0;
  padding-left: 18px;
  color: var(--color-text-muted);
}

.workflow-pack-panel {
  border-style: dashed;
}

@media (max-width: 767px) {
  .workflow-library-intro,
  .workflow-library-section-head,
  .workflow-library-launcher,
  .workflow-pack-panel-head,
  .workflow-pack-panel-controls,
  .workflow-library-filter-form,
  .workflow-library-preview-head {
    flex-direction: column;
    align-items: stretch;
  }
}