:root {
  color-scheme: light;
  --primary: #048abf;
  --primary-dark: #036b93;
  --primary-soft: #e8f6fb;
  --accent: #d3ad30;
  --accent-soft: #fbf6e5;
  --background: #f4f7f9;
  --surface: #ffffff;
  --surface-muted: #f8fafb;
  --text: #253340;
  --text-muted: #62717f;
  --border: #dce4e9;
  --success: #197447;
  --warning: #8a5b00;
  --danger: #b42318;
  --danger-soft: #fff1ef;
  --focus-ring: rgb(4 138 191 / 24%);
  --shadow: 0 0.75rem 2rem rgb(37 51 64 / 8%);
  --shadow-soft: 0 0.35rem 1rem rgb(37 51 64 / 6%);
  --shadow-hover: 0 0.7rem 1.6rem rgb(37 51 64 / 10%);
  --border-radius: 1rem;
  --border-radius-small: 0.65rem;
  --border-radius-pill: 999px;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --font-family: Poppins, "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-family: var(--font-family);
}
.finance-more-filters { grid-column: 1 / -1; }
.finance-more-filters > .filter-grid { margin-top: var(--spacing-3); }
.finance-more-filters > summary { width: fit-content; padding-block: var(--spacing-2); color: var(--primary-dark); font-weight: 500; }
.finance-summary { border-top: 2px solid var(--primary); padding-block: var(--spacing-4); }
.finance-kpis { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: var(--spacing-5); margin: var(--spacing-4) 0 var(--spacing-5); }
.finance-kpis > div { display: grid; grid-template-rows: 1fr auto; border-left: 2px solid var(--border); padding-left: var(--spacing-3); min-width: 0; }
.finance-kpis > div:first-child { border-color: var(--accent); }
.finance-kpis dt,.finance-coverage,.finance-costs { font-size: .8rem; color: var(--text-muted); }
.finance-kpis dt { line-height: 1.5; }
.finance-kpis dd { margin: var(--spacing-3) 0 0; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.finance-costs { display: flex; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-5); }
.finance-charts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--spacing-4); margin-block: var(--spacing-5); }
.finance-chart:first-child { grid-column: 1 / -1; }
.finance-line-chart { max-width: 64rem; max-height: 22rem; margin-inline: auto; }
.finance-chart { margin: 0; min-width: 0; padding: var(--spacing-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--border-radius-small); }
.finance-chart figcaption { font-weight: 700; font-size: 1rem; line-height: 1.45; color: var(--primary-dark); margin-bottom: var(--spacing-3); }
.finance-chart-panel h3 { font-size: .8rem; font-weight: 500; color: var(--text-muted); margin-block: var(--spacing-3); }
.finance-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.finance-chart text { fill: var(--text-muted); font-size: 13px; font-family: var(--font-family); }
.chart-axis { stroke: var(--border); stroke-width: 1; }
.chart-line { stroke: var(--primary); stroke-width: 3; }
.chart-line--gross { stroke: var(--primary-dark); stroke-dasharray: 7 5; }
.chart-point.chart-point--gross { fill: var(--surface); stroke: var(--primary-dark); stroke-width: 2; }
.chart-legend,.finance-context { display: flex; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-4); color: var(--text-muted); font-size: .8rem; }
.finance-context { padding-block: var(--spacing-3); margin-block: var(--spacing-3); border-top: 1px solid var(--border); }
.finance-context-cell { color: var(--text-muted); background: var(--surface-muted); }
.chart-point { fill: var(--primary-dark); }
.chart-bar { fill: var(--primary); }
.finance-table-scroll { overflow-x: auto; max-width: 100%; margin-block: var(--spacing-3); }
.finance-table { width: 100%; border-collapse: collapse; font-size: .8rem; background: var(--surface); }
.finance-table th,.finance-table td { padding: var(--spacing-3); border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.finance-table th:first-child { text-align: left; white-space: normal; min-width: 10rem; }
.finance-table thead { background: var(--primary-soft); color: var(--primary-dark); }
.finance-table thead th { font-size: .75rem; font-weight: 600; line-height: 1.4; white-space: normal; min-width: 6rem; vertical-align: bottom; }
.finance-table td { font-variant-numeric: tabular-nums; }
.finance-table tbody tr { position: relative; transition: background-color .15s ease; }
.finance-table tbody tr:hover,.finance-table tbody tr:focus-within { background: var(--primary-soft); }
.finance-row-link { color: var(--text); text-decoration: none; }
.finance-table .finance-row-link:visited { color: var(--text); }
.finance-table .finance-row-link:hover { color: var(--primary-dark); }
.finance-exports { justify-content: flex-end; gap: var(--spacing-3); padding-top: var(--spacing-4); border-top: 1px solid var(--border); }
.finance-exports a:visited { color: var(--primary-dark); }
.finance-row-link::after { content: ''; position: absolute; inset: 0; }
.finance-table small { display: block; color: var(--warning); }
.finance-table-scroll:focus-visible,.finance-row-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.finance-breakdown { max-width: 48rem; }
.finance-breakdown > div { display: flex; justify-content: space-between; gap: var(--spacing-4); padding-block: var(--spacing-2); border-bottom: 1px solid var(--border); }
.finance-breakdown dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.finance-subtotal { font-weight: 600; color: var(--primary-dark); }
.finance-notice { border-left: 3px solid var(--accent); padding-left: var(--spacing-3); }
@media(max-width: 75rem) { .finance-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); } .finance-charts { grid-template-columns: 1fr; } }
@media(max-width: 40rem) { .finance-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } .finance-breakdown > div { flex-wrap: wrap; gap: var(--spacing-1); } .finance-chart { padding: var(--spacing-2); } .finance-chart text { font-size: 20px; } }
.crm-map { height: 30rem; border: 1px solid var(--border); border-radius: var(--border-radius-small); margin-block: var(--spacing-4); z-index: 0; }
.leaflet-marker-icon.crm-map-marker { display: grid; place-items: center; box-sizing: border-box; padding: 0; line-height: 1; text-align: center; font-size: 0.75rem; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-muted); color: var(--text-muted); font-weight: 700; box-shadow: var(--shadow-soft); }
.leaflet-marker-icon.crm-map-marker--A { color: var(--success); border-color: var(--success); background: var(--surface); }
.leaflet-marker-icon.crm-map-marker--B { color: var(--primary-dark); background: var(--primary-soft); }
.location-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-3); align-items: center; font-size: .85rem; }
.location-actions form { margin: 0; }
.import-steps { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }
.import-mapping { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--spacing-3); margin-block: var(--spacing-4); }
.import-mapping small { overflow-wrap: anywhere; }
.import-row { padding: var(--spacing-4); margin-block: var(--spacing-3); border: 1px solid var(--border); border-top: 2px solid var(--primary); background: var(--surface); border-radius: var(--border-radius-small); }
.import-row h3 { margin: 0 0 var(--spacing-2); }
.import-row select { max-width: 100%; min-height: 2.5rem; margin-right: var(--spacing-2); }
.import-row p { overflow-wrap: anywhere; }
[aria-busy="true"]#import-app { pointer-events: none; opacity: .75; }
@media (max-width: 38rem) { .crm-map { height: 22rem; } .import-row select { display: block; width: 100%; margin-bottom: var(--spacing-2); } }

.potential-panel { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); margin-block: var(--spacing-4); border: 1px solid var(--border); border-radius: var(--border-radius-small); background: var(--surface); }
.potential-panel:has(> .potential-editor) > div { padding-right: 3.5rem; min-height: 3rem; }
.potential-panel > div { flex: 1; min-width: min(100%, 16rem); }
.potential-panel p { margin: var(--spacing-1) 0 0; color: var(--text-muted); font-size: .8rem; }
.potential-panel span { font-size: .8rem; }
.potential-panel .potential-review { flex-basis: 100%; color: var(--warning); }
.potential-badge { display: inline-flex; padding: 0 var(--spacing-2); border: 1px solid var(--border); border-radius: var(--border-radius-pill); font-size: .8rem; font-weight: 600; color: var(--text-muted); background: var(--surface-muted); }
.potential-badge--A { color: var(--success); border-color: var(--success); }
.potential-badge--B { color: var(--primary-dark); background: var(--primary-soft); }
.potential-editor { width: 100%; min-width: 0; }
.potential-editor:not([open]) { height: 0; }
.potential-panel:has(> .potential-editor:not([open])) { row-gap: 0; }
.potential-context { display: flex; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-5); margin: 0; padding-top: var(--spacing-2); border-top: 1px solid var(--border); font-size: .8rem; }
.potential-context dt { color: var(--text-muted); }
.potential-context dd { margin: 0; overflow-wrap: anywhere; }
.potential-editor form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--spacing-2); padding-top: var(--spacing-2); }
.potential-editor label { display: grid; gap: var(--spacing-1); }
.potential-editor button { white-space: normal; }
.potential-editor [data-potential-proposal] { flex-basis: 100%; border-left: 2px solid var(--primary); padding-left: var(--spacing-2); }

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--background);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: var(--background);
  font-family: var(--font-family);
  line-height: 1.6;
}

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

button,
.primary-link {
  cursor: pointer;
}

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

.brand-identity {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--spacing-3);
  line-height: 1;
}

.brand-picture {
  display: block;
  line-height: 0;
}

.brand-logo-image {
  display: block;
  width: 9rem;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.brand-context {
  padding-left: var(--spacing-3);
  border-left: 1px solid var(--border);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.brand-identity--compact .brand-logo-image {
  width: 7.5rem;
}

.brand-identity--compact .brand-context {
  font-size: 0.75rem;
}

.brand-identity:not(.brand-identity--compact) {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.375rem;
}

.brand-identity:not(.brand-identity--compact) .brand-context {
  padding-left: 0;
  border-left: 0;
  color: var(--text-muted);
}

.eyebrow {
  margin: 0 0 var(--spacing-2);
  color: var(--primary-dark);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.intro,
.dashboard-intro {
  color: var(--text-muted);
  line-height: 1.7;
}

.auth-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(var(--spacing-4), 4vw, var(--spacing-12));
  place-items: center;
  overflow: hidden;
  background: var(--background);
}

.auth-shell::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 0.25rem;
  background: linear-gradient(90deg, var(--primary) 0 92%, var(--accent) 92% 100%);
  content: "";
}

.auth-panel {
  display: flex;
  width: min(100%, 28rem);
  padding: clamp(var(--spacing-6), 4vw, var(--spacing-8));
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  flex-direction: column;
}

.auth-panel .brand-identity {
  margin-bottom: var(--spacing-6);
}

.auth-panel h1,
.status-card h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.75rem, 4vw, 2rem);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -0.035em;
}

.auth-panel .intro {
  max-width: 31rem;
  margin: var(--spacing-2) 0 var(--spacing-5);
}

.alert {
  max-width: 31rem;
  margin: 0 0 var(--spacing-5);
  padding: var(--spacing-3) var(--spacing-4);
  border: 1px solid var(--danger);
  border-radius: var(--border-radius-small);
  color: var(--danger);
  background: var(--danger-soft);
  font-size: 0.9rem;
}

.login-form {
  display: grid;
  width: 100%;
  max-width: 31rem;
  gap: var(--spacing-4);
}

.login-form label {
  display: grid;
  gap: 0.375rem;
}

.login-form label span {
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 700;
}

.login-form input {
  width: 100%;
  min-height: 3rem;
  padding: var(--spacing-3) var(--spacing-4);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-small);
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.login-form input:hover {
  border-color: var(--text-muted);
}

.login-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.login-form button,
.primary-link {
  min-height: 3rem;
  margin-top: var(--spacing-1);
  padding: var(--spacing-3) var(--spacing-5);
  border: 0;
  border-radius: var(--border-radius-pill);
  color: var(--surface);
  background: var(--primary-dark);
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease;
}

.login-form button:hover,
.primary-link:hover {
  background: var(--text);
}

.login-form button:active,
.primary-link:active {
  transform: translateY(1px);
}

.mfa-qr {
  width: 15rem;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--spacing-4);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-small);
}

.mfa-secret {
  margin: 0 0 var(--spacing-6);
  overflow-wrap: anywhere;
  color: var(--text-muted);
}

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 var(--spacing-8);
  padding: var(--spacing-5) var(--spacing-5) var(--spacing-5) var(--spacing-10);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-small);
  gap: var(--spacing-3) var(--spacing-8);
  background: var(--surface-muted);
}

.primary-link {
  display: inline-grid;
  align-self: flex-start;
  place-items: center;
}

.dashboard-shell {
  min-height: 100vh;
  background: var(--background);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.25rem;
  padding: var(--spacing-3) clamp(var(--spacing-4), 3vw, var(--spacing-10));
  border-top: 0.2rem solid var(--primary);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  gap: var(--spacing-6);
}

.brand-lockup {
  display: flex;
  align-items: center;
}

.button-secondary {
  min-height: 2.75rem;
  padding: var(--spacing-2) var(--spacing-5);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-pill);
  color: var(--text);
  background: var(--surface);
  font-weight: 700;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.button-secondary:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.dashboard-content {
  width: min(calc(100% - 2rem), 76rem);
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, var(--spacing-10)) 0;
}

.dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.dashboard-heading > div {
  min-width: 0;
}

.dashboard-clock { display: block; margin: 0.15rem 0 0.5rem; color: var(--text-muted); font-size: 0.8125rem; line-height: 1.5; overflow-wrap: anywhere; }

.dashboard-heading h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.8rem, 2.2vw, 2.125rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.role-badge {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-pill);
  color: var(--primary-dark);
  background: var(--surface);
  font-size: 0.8125rem;
  font-weight: 750;
  box-shadow: var(--shadow-soft);
  gap: var(--spacing-2);
}

.role-badge::before {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
  content: "";
  flex: 0 0 auto;
}

.role-badge span {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-intro {
  max-width: 44rem;
  margin: var(--spacing-2) 0 var(--spacing-6);
}

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

.module-card {
  position: relative;
  overflow: hidden;
  min-height: 9.5rem;
  padding: var(--spacing-5);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.module-card--link {
  color: inherit;
  text-decoration: none;
}

.dashboard-tasks { width: 100%; min-width: 0; margin-bottom: var(--spacing-5); }
.dashboard-task-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.dashboard-task-heading a { font-size: 0.875rem; white-space: nowrap; }
.dashboard-task-counts, .dashboard-task-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 1rem; }
.dashboard-task-links { justify-content: space-between; }
.dashboard-task-columns, .dashboard-task-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(7rem, 0.8fr); align-items: center; gap: 0.75rem; }
.dashboard-task-columns { margin-top: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 0.75rem; font-weight: 600; }
.dashboard-task-row { min-height: 42px; padding: 0.35rem 0; border-bottom: 1px solid var(--border); font-size: 0.8125rem; }
.dashboard-task-row:last-child { border-bottom: 0; }
.dashboard-task-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); text-decoration: none; }
.dashboard-task-name { color: var(--text); font-weight: 600; }
a.dashboard-task-cell:hover, a.dashboard-task-cell:focus-visible { color: var(--primary-dark); text-decoration: underline; }
.dashboard-task-state { display: flex; align-items: center; gap: 0.25rem; }
.dashboard-task-state .mini-chip { font-size: 0.7rem; padding: 0.1rem 0.35rem; }
.dashboard-task-row--overdue .dashboard-task-date { color: var(--warning); }
@media (min-width: 38.01rem) and (max-width: 64rem) {
  .dashboard-task-columns { display: none; }
  .dashboard-task-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); row-gap: 0.2rem; padding: 0.5rem 0; }
}
@media (max-width: 38rem) {
  .dashboard-task-columns { display: none; }
  .dashboard-task-row { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; padding: 0.5rem 0; }
  .dashboard-task-cell { white-space: normal; overflow-wrap: anywhere; }
}
.dashboard-tasks .dashboard-tasks-empty { margin: 1rem 0; }
.dashboard-tasks .dashboard-tasks-empty::before { content: none; }

.module-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.22rem;
  background: linear-gradient(90deg, var(--primary) 0 84%, var(--accent) 84% 100%);
  content: "";
}

.module-icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--spacing-4);
  place-items: center;
  border-radius: 0.75rem;
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.module-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.module-card h2 {
  margin: 0 0 var(--spacing-1);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.35;
}

.module-card p {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  gap: var(--spacing-2);
}

.module-card p::before {
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-muted);
  content: "";
  flex: 0 0 auto;
}

.module-card:focus-within {
  border-color: var(--primary);
  box-shadow: var(--shadow-hover);
}

@media (hover: hover) {
  .module-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
  }
}

.shell {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--spacing-5);
  place-items: center;
  background: var(--background);
}

.status-card {
  width: min(100%, 34rem);
  padding: clamp(var(--spacing-6), 5vw, var(--spacing-10));
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.status-card .brand-identity {
  margin-bottom: var(--spacing-10);
}

.status-card .intro {
  margin: var(--spacing-3) 0 0;
}

.app-shell {
  min-height: 100vh;
  background: var(--background);
}

.brand-home {
  color: inherit;
  text-decoration: none;
}

.crm-content {
  width: min(calc(100% - 2rem), 76rem);
  margin: 0 auto;
  padding: clamp(var(--spacing-6), 3vw, var(--spacing-10)) 0 var(--spacing-12);
}

.crm-content--form {
  max-width: 62rem;
}

.breadcrumb {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-5);
  color: var(--text-muted);
  font-size: 0.8125rem;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--primary-dark);
  font-weight: 700;
  text-decoration: none;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--spacing-6);
  gap: var(--spacing-6);
}

.page-header--compact {
  align-items: flex-start;
}

.page-header h1,
.customer-summary h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.page-intro {
  max-width: 42rem;
  margin: var(--spacing-2) 0 0;
  color: var(--text-muted);
}

.button-primary,
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--spacing-2) var(--spacing-5);
  border-radius: var(--border-radius-pill);
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.button-primary {
  border: 1px solid var(--primary-dark);
  color: var(--surface);
  background: var(--primary-dark);
}

.button-primary:hover {
  border-color: var(--text);
  background: var(--text);
}

.button-compact {
  min-height: 2.5rem;
  padding: 0.5rem var(--spacing-4);
  font-size: 0.875rem;
}

.button-text {
  padding: var(--spacing-1);
  border: 0;
  color: var(--primary-dark);
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

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

.filter-bar {
  display: grid;
  padding: var(--spacing-4);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  grid-template-columns: minmax(14rem, 1.6fr) repeat(4, minmax(9rem, 1fr)) auto;
  gap: var(--spacing-3);
}

.filter-bar label,
.field,
.note-form label,
.inline-form label {
  display: grid;
  align-content: start;
  gap: 0.375rem;
}

.organization-filters { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.organization-filters .filter-actions { grid-column: 1 / -1; flex-wrap: wrap; }

.filter-bar label > span,
.field > span,
.note-form label > span,
.inline-form label > span,
.checkbox-group legend {
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 700;
}

.filter-bar input,
.filter-bar select,
.crm-form input,
.crm-form select,
.crm-form textarea,
.note-form textarea,
.inline-form select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--border-radius-small);
  color: var(--text);
  background: var(--surface);
  outline: none;
}

.crm-form textarea,
.note-form textarea {
  min-height: auto;
  resize: vertical;
}

.filter-bar :is(input, select):focus,
.crm-form :is(input, select, textarea):focus,
.note-form textarea:focus,
.inline-form select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.filter-actions {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.125rem;
  gap: var(--spacing-2);
}

.live-list-status {
  min-height: 1.35rem;
  margin: var(--spacing-3) 0 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.live-list-status[data-state="error"] {
  color: var(--danger);
}

.live-list-results {
  min-height: 10rem;
  transition: opacity 140ms ease;
}

.live-list-results.is-loading {
  opacity: 0.58;
  pointer-events: none;
}

.list-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--spacing-5) 0 var(--spacing-3);
  color: var(--text-muted);
  font-size: 0.875rem;
  gap: var(--spacing-3);
}

.list-summary strong {
  color: var(--text);
}

.crm-table-wrap {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.crm-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.crm-table th,
.crm-table td {
  padding: 0.875rem var(--spacing-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: left;
  overflow-wrap: anywhere;
}

.crm-table th {
  color: var(--text-muted);
  background: var(--surface-muted);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.crm-table td {
  font-size: 0.875rem;
}

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

:is(.crm-table tbody tr, .task-card, .dashboard-task-row) {
  transition: background-color 140ms ease;
}

:is(.crm-table tbody tr, .task-card, .dashboard-task-row):hover,
:is(.crm-table tbody tr, .task-card, .dashboard-task-row):focus-within {
  background: var(--primary-soft);
}

:is(.crm-table tbody tr, .task-card, .dashboard-task-row):focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.crm-owner { display: inline-flex; align-items: baseline; gap: 0.4rem; max-width: 100%; min-width: 0; vertical-align: baseline; }
.crm-owner-dot { width: 0.5rem; height: 0.5rem; flex: 0 0 0.5rem; border-radius: 50%; background: var(--accent); }
.crm-owner-name { min-width: 0; overflow-wrap: anywhere; }
.dashboard-task-owner .crm-owner { display: flex; align-items: center; }
.dashboard-task-owner .crm-owner-name { overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) {
  :is(.crm-table tbody tr, .task-card, .dashboard-task-row) { transition: none; }
}

.organization-name {
  display: block;
  color: var(--text);
  font-weight: 750;
  line-height: 1.35;
  text-decoration: none;
}

.organization-name:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.crm-table small {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.status-badge,
.mini-chip,
.active-label,
.onboarding-placeholder {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: var(--border-radius-pill);
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1.25;
}

.status-badge {
  padding: 0.35rem 0.625rem;
  color: var(--primary-dark);
  background: var(--primary-soft);
  white-space: nowrap;
}

.status-interested,
.status-wants-to-start {
  color: var(--success);
  background: #e9f6ef;
}

.status-contact-later {
  color: var(--warning);
  background: var(--accent-soft);
}

.status-not-interested,
.status-closed {
  color: var(--text-muted);
  background: var(--surface-muted);
}

.employee-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 0.4rem;
}

.employee-chip--large {
  font-weight: 750;
}

.employee-color {
  width: 0.7rem;
  height: 0.7rem;
  flex: 0 0 auto;
}

.empty-state {
  padding: var(--spacing-10);
  border: 1px dashed var(--border);
  border-radius: var(--border-radius);
  background: var(--surface);
  text-align: center;
}

.empty-state h2,
.empty-state p {
  margin: 0;
}

.empty-state p {
  margin-top: var(--spacing-2);
  color: var(--text-muted);
}

.crm-form {
  display: grid;
  gap: var(--spacing-4);
}

.crm-form [hidden] {
  display: none !important;
}

.form-card,
.detail-card,
.customer-summary {
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.form-card,
.detail-card {
  padding: var(--spacing-5);
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--spacing-4);
  gap: var(--spacing-4);
}

.section-heading h2,
.section-heading p {
  margin: 0;
}

.section-heading h2 {
  font-size: 1.15rem;
  line-height: 1.3;
}

.section-heading p {
  margin-top: var(--spacing-1);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.section-heading--action {
  align-items: center;
}

.form-grid {
  display: grid;
  gap: var(--spacing-4);
}

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

.form-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field--full,
.checkbox-field.field--full {
  grid-column: 1 / -1;
}

.field-error {
  color: var(--danger);
  font-size: 0.75rem;
  line-height: 1.4;
}

.field-hint {
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.address-lookup {
  padding: var(--spacing-4);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-small);
  background: var(--surface-muted);
}

.address-lookup-hint {
  margin: 0 0 var(--spacing-3);
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.address-lookup-grid {
  display: grid;
  align-items: end;
  grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1fr) minmax(6rem, 0.7fr) minmax(6rem, 0.7fr) auto;
  gap: var(--spacing-3);
}

.address-lookup-button {
  min-height: 2.75rem;
  white-space: nowrap;
}

.address-lookup-status {
  min-height: 1.25rem;
  margin: var(--spacing-2) 0 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.address-lookup-status[data-state="success"] {
  color: var(--success);
}

.address-lookup-status[data-state="error"] {
  color: var(--danger);
}

.checkbox-field {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  gap: var(--spacing-2);
  font-size: 0.875rem;
  font-weight: 700;
}

.checkbox-field input,
.choice-grid input {
  width: 1.1rem;
  min-height: 1.1rem;
  margin: 0;
  accent-color: var(--primary-dark);
}

.disclosure {
  padding: 0;
}

.disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-5);
  cursor: pointer;
  font-weight: 750;
  gap: var(--spacing-4);
}

.disclosure summary small {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.disclosure-content {
  padding: 0 var(--spacing-5) var(--spacing-5);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

.alert--wide {
  max-width: none;
}

.alert--warning {
  border-color: var(--accent);
  color: var(--text);
  background: var(--accent-soft);
}

.alert--warning p {
  margin: var(--spacing-1) 0 var(--spacing-3);
}

.conflict-values {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-3);
}

.conflict-values div {
  padding: var(--spacing-3);
  border-radius: var(--border-radius-small);
  background: var(--surface);
}

.conflict-values dt {
  font-size: 0.75rem;
  font-weight: 750;
}

.conflict-values dd {
  display: grid;
  margin: var(--spacing-1) 0 0;
  font-size: 0.8125rem;
  gap: var(--spacing-1);
}

.checkbox-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

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

.choice-grid label {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-small);
  gap: var(--spacing-2);
  font-size: 0.8125rem;
}

.notice {
  margin-bottom: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  border: 1px solid #9ed0b5;
  border-radius: var(--border-radius-small);
  color: var(--success);
  background: #eef9f3;
  font-weight: 700;
}

.customer-summary {
  position: relative;
  display: grid;
  align-items: center;
  padding: var(--spacing-6);
  grid-template-columns: minmax(0, 1.5fr) minmax(14rem, 0.7fr) auto;
  gap: var(--spacing-6);
}

.official-name {
  margin: var(--spacing-1) 0 0;
  color: var(--text-muted);
}

.summary-meta {
  display: flex;
  align-items: center;
  margin-top: var(--spacing-3);
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.summary-meta > span:not(.status-badge) {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.summary-meta > span:not(.status-badge) + span:not(.status-badge)::before {
  margin-right: var(--spacing-2);
  color: var(--border);
  content: "•";
}

.customer-summary-side {
  display: grid;
  gap: var(--spacing-1);
  font-size: 0.875rem;
}

.summary-label {
  margin-top: var(--spacing-2);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.summary-label:first-child {
  margin-top: 0;
}

.onboarding-placeholder {
  margin-top: var(--spacing-2);
  padding: 0.35rem 0.625rem;
  color: var(--text-muted);
  background: var(--surface-muted);
}

.summary-action {
  align-self: flex-start;
}

.section-nav {
  display: flex;
  margin: var(--spacing-4) 0;
  padding: 0 var(--spacing-2);
  border-bottom: 1px solid var(--border);
  gap: var(--spacing-1);
  flex-wrap: wrap;
}

.section-nav a {
  padding: var(--spacing-2) var(--spacing-3);
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}

.section-nav a:hover {
  border-bottom-color: var(--primary);
  color: var(--primary-dark);
}

.detail-grid {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--spacing-4);
}

.detail-card {
  scroll-margin-top: var(--spacing-4);
}

.detail-card--wide {
  grid-column: 1 / -1;
}

.data-list {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-4);
}

.data-list--single {
  grid-template-columns: 1fr;
  gap: var(--spacing-3);
}

.data-list div {
  min-width: 0;
}

.data-list--wide {
  grid-column: 1 / -1;
}

.data-list dt {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.data-list dd {
  margin: var(--spacing-1) 0 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.875rem;
}

.data-list a,
.contact-methods a,
.relation-list a {
  color: var(--primary-dark);
  font-weight: 650;
}

.contact-list,
.timeline {
  display: grid;
  margin: 0;
  padding: 0;
  gap: var(--spacing-2);
}

.contact-item {
  display: grid;
  align-items: center;
  padding: var(--spacing-3);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-small);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-3);
}

.contact-main {
  grid-column: 1 / -1;
}

.contact-item.is-inactive {
  opacity: 0.7;
  background: var(--surface-muted);
}

.contact-main h3,
.contact-main p {
  margin: 0;
}

.contact-main h3 {
  font-size: 0.9375rem;
}

.contact-main p,
.contact-methods,
.contact-actions {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.contact-methods,
.contact-actions {
  display: grid;
  min-width: 0;
  gap: var(--spacing-1);
}

.contact-methods a {
  overflow-wrap: anywhere;
}

.contact-actions {
  justify-items: end;
}

.chip-list {
  display: flex;
  margin-top: var(--spacing-2);
  gap: var(--spacing-1);
  flex-wrap: wrap;
}

.mini-chip,
.active-label {
  padding: 0.25rem 0.45rem;
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.note-form {
  display: grid;
  align-items: end;
  margin-bottom: var(--spacing-5);
  padding: var(--spacing-4);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-small);
  background: var(--surface-muted);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-3);
}

.timeline {
  list-style: none;
}

.timeline li {
  position: relative;
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-6);
  border-left: 2px solid var(--primary-soft);
}

.timeline li::before {
  position: absolute;
  top: 1.15rem;
  left: -0.4rem;
  width: 0.65rem;
  height: 0.65rem;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--primary);
  content: "";
}

.timeline-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 0.75rem;
  gap: var(--spacing-3);
}

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

.timeline p {
  margin: var(--spacing-1) 0 0;
  white-space: pre-wrap;
}

.relation-list {
  display: grid;
  margin: 0 0 var(--spacing-4);
  padding: 0;
  list-style: none;
  gap: var(--spacing-2);
}

.relation-list li,
.relation-list li > div {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.relation-list li {
  justify-content: space-between;
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--border);
}

.inline-form {
  display: grid;
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-2);
}

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

@media (max-width: 68rem) {
  .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .filter-bar label:first-child {
    grid-column: span 2;
  }

  .filter-actions {
    align-self: end;
  }

  .address-lookup-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .address-lookup-grid .field:first-child {
    grid-column: span 2;
  }

  .address-lookup-button {
    width: fit-content;
  }

  .customer-summary {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.65fr);
  }

  .summary-action {
    grid-column: 1 / -1;
  }

  .column-count,
  .column-updated {
    display: none;
  }
}

@media (max-width: 52rem) {
  .page-header {
    align-items: flex-start;
  }

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

  .filter-bar label:first-child,
  .filter-actions {
    grid-column: 1 / -1;
  }

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

  .address-lookup-grid .field:first-child {
    grid-column: span 1;
  }

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

  .detail-card--wide {
    grid-column: auto;
  }

  .contact-item {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.8fr);
  }

  .contact-actions {
    grid-column: 1 / -1;
    justify-items: start;
  }

  .column-manager {
    display: none;
  }
}

@media (max-width: 38rem) {
  .auth-shell {
    padding: var(--spacing-4);
    place-items: start center;
    overflow: visible;
  }

  .auth-panel {
    margin: var(--spacing-4) 0;
    padding: var(--spacing-6);
  }

  .auth-panel .brand-identity,
  .status-card .brand-identity {
    margin-bottom: var(--spacing-5);
  }

  .brand-logo-image {
    width: 7.5rem;
  }

  .brand-identity--compact .brand-logo-image {
    width: 6.25rem;
  }

  .topbar {
    padding: var(--spacing-3) var(--spacing-4);
  }

  .topbar .brand-context {
    display: none;
  }

  .button-secondary {
    padding-right: var(--spacing-4);
    padding-left: var(--spacing-4);
  }

  .dashboard-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--spacing-3);
  }

  .dashboard-heading h1 {
    font-size: 1.65rem;
    white-space: normal;
  }

  .dashboard-intro {
    margin-bottom: var(--spacing-8);
  }

  .role-badge {
    min-width: 0;
  }

  .module-grid,
  .recovery-codes {
    grid-template-columns: 1fr;
  }

  .crm-content {
    width: min(calc(100% - 1.5rem), 76rem);
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-8);
  }

  .breadcrumb {
    margin-bottom: var(--spacing-3);
  }

  .page-header {
    align-items: stretch;
    flex-direction: column;
    margin-bottom: var(--spacing-4);
    gap: var(--spacing-3);
  }

  .page-header h1,
  .customer-summary h1 {
    font-size: 1.6rem;
  }

  .page-header .button-primary {
    width: 100%;
  }

  .filter-bar,
  .filter-bar label:first-child,
  .filter-actions {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .address-lookup {
    padding: var(--spacing-3);
  }

  .address-lookup-grid {
    grid-template-columns: 1fr;
  }

  .address-lookup-button {
    width: 100%;
  }

  .filter-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .filter-actions .button-primary,
  .filter-actions .button-link {
    width: 100%;
  }

  .list-summary {
    margin-top: var(--spacing-4);
  }

  .crm-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .crm-table,
  .crm-table tbody,
  .crm-table tr,
  .crm-table td {
    display: block;
    width: 100%;
  }

  .crm-table {
    table-layout: auto;
  }

  .crm-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .crm-table tbody {
    display: grid;
    gap: var(--spacing-3);
  }

  .crm-table tr {
    padding: var(--spacing-3);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-small);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
  }

  .crm-table td,
  .crm-table tbody tr:last-child td {
    display: grid;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border);
    grid-template-columns: minmax(6.75rem, 0.7fr) minmax(0, 1.3fr);
    gap: var(--spacing-2);
  }

  .crm-table td::before {
    color: var(--text-muted);
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .crm-table td:first-child::before {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .crm-table td:first-child > * {
    grid-column: 2;
  }

  .crm-table td:first-child {
    padding-top: 0;
  }

  .crm-table td:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .column-count,
  .column-updated,
  .column-manager {
    display: none !important;
  }

  .form-card,
  .detail-card,
  .customer-summary {
    padding: var(--spacing-4);
  }

  .form-grid--two,
  .form-grid--three,
  .choice-grid,
  .conflict-values,
  .customer-summary,
  .data-list,
  .contact-item,
  .note-form,
  .inline-form {
    grid-template-columns: 1fr;
  }

  .disclosure summary {
    align-items: flex-start;
    flex-direction: column;
    padding: var(--spacing-4);
    gap: var(--spacing-1);
  }

  .disclosure-content {
    padding: 0 var(--spacing-4) var(--spacing-4);
  }

  .customer-summary {
    gap: var(--spacing-4);
  }

  .summary-action,
  .contact-actions {
    grid-column: auto;
  }

  .summary-action .button-primary,
  .note-form .button-primary,
  .inline-form .button-primary {
    width: 100%;
  }

  .section-nav {
    margin-bottom: var(--spacing-3);
    padding: 0;
    gap: 0;
  }

  .section-nav a {
    padding-right: var(--spacing-2);
    padding-left: var(--spacing-2);
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .section-heading--action .button-link {
    width: 100%;
  }

  .relation-list li {
    align-items: stretch;
    flex-direction: column;
    gap: var(--spacing-1);
  }

  .relation-list .relation-main {
    display: grid;
    align-items: start;
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .relation-main a {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .relation-list li form {
    align-self: flex-start;
  }

  .relation-list li .button-text {
    min-height: 2.75rem;
    padding: 0.5rem 0;
  }

  .timeline-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }
}

@media (max-width: 30rem) {
  .topbar {
    min-height: 4rem;
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    gap: var(--spacing-3);
  }

  .topbar .button-secondary {
    min-height: 2.75rem;
    padding-right: 0.875rem;
    padding-left: 0.875rem;
    font-size: 0.875rem;
  }

  .dashboard-content {
    padding: var(--spacing-5) 0 var(--spacing-6);
  }

  .dashboard-heading {
    gap: var(--spacing-2);
  }

  .dashboard-heading .eyebrow {
    margin-bottom: var(--spacing-1);
  }

  .role-badge {
    padding: 0.375rem 0.625rem;
    gap: 0.375rem;
  }

  .dashboard-intro {
    margin: var(--spacing-3) 0 var(--spacing-5);
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  .module-grid {
    gap: var(--spacing-3);
  }

  .module-card {
    min-height: 6.75rem;
    padding: 0.875rem var(--spacing-4);
  }

  .module-icon {
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: var(--spacing-2);
    border-radius: var(--border-radius-small);
  }

  .module-icon svg {
    width: 1rem;
    height: 1rem;
  }

  .module-card h2 {
    margin-bottom: 0;
    font-size: 1rem;
  }

  .module-card p {
    font-size: 0.8rem;
    line-height: 1.45;
    gap: 0.375rem;
  }
}

@media (max-width: 23rem) {
  .brand-context {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
.inline-editor, .visibility-action {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--border-radius-small);
}
.inline-editor summary, .visibility-action summary {
  cursor: pointer;
  min-height: 2rem;
  font-size: 0.875rem;
}
.inline-editor form, .visibility-action form { margin-top: 0.75rem; }
.inline-editor-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.inline-editor .address-lookup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 38rem) {
  .inline-editor .address-lookup-grid { grid-template-columns: minmax(0, 1fr); }
  .inline-editor-actions > button { flex: 1; }
}
.detail-card:has(> .section-editor) { position: relative; }
.detail-card:has(> .section-editor) > .section-heading { padding-right: 3rem; min-height: 2.5rem; }
.detail-card > .section-editor { margin: 0; padding: 0; border: 0; }
.section-editor > .section-edit-trigger, .contact-item > .section-edit-trigger, .potential-editor > .section-edit-trigger {
  position: absolute; top: 1.25rem; right: 1.25rem;
}
.section-edit-trigger {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  padding: 0; list-style: none; cursor: pointer; color: var(--text-muted);
  border-radius: var(--border-radius-small); flex-shrink: 0;
}
.contact-item:has(> .section-edit-trigger) { position: relative; padding-right: 4.25rem; }
.contact-item > .section-edit-trigger { text-decoration: none; }
.section-edit-trigger::-webkit-details-marker { display: none; }
.section-edit-trigger:hover, .section-edit-trigger:focus-visible { background: var(--primary-soft); color: var(--primary-dark); }
.section-edit-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.detail-card:has(> .section-editor[open]) > [data-section-read] { display: none; }
.archive-toggle > summary { cursor: pointer; font-size: 0.875rem; padding: 0.5rem 0; }
.archive-toggle-link { display: inline-block; margin-bottom: 0.75rem; font-size: 0.875rem; }
.timeline-note .note-action { float: right; margin-left: 0.75rem; max-width: 100%; }
.timeline-note::after { content: ''; display: block; clear: both; }
.note-action > summary { cursor: pointer; list-style: none; text-align: center; font-size: 1.25rem; min-width: 2.5rem; min-height: 2.5rem; }
.note-action > summary::-webkit-details-marker { display: none; }
.note-action form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem; background: var(--surface-muted); border-radius: var(--border-radius-small); }
@media (max-width: 38rem) {
  .section-editor > .section-edit-trigger, .contact-item > .section-edit-trigger, .potential-editor > .section-edit-trigger { top: 1rem; right: 1rem; }
  .note-action[open] { float: none; margin-left: 0; margin-bottom: 0.5rem; }
}
.task-list { display: grid; gap: 0.75rem; }
.task-card, .task-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 0.8fr); gap: 1rem; padding: 1rem 3.75rem 1rem 1rem; }
.task-card { position: relative; min-width: 0; border: 1px solid var(--border); border-radius: var(--border-radius-small); background: var(--surface); }
.task-card > div { min-width: 0; }
.task-card h3 { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.task-card p { display: block; }
.task-card p::before { content: none; }
.task-columns { margin-top: 1rem; font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.task-schedule, .task-actions { border-left: 1px solid var(--border); padding-left: 1rem; }
.task-list--preview { list-style: none; margin: 0; padding: 0; gap: 0; }
.task-card--preview, .task-card--compact { border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.task-card--preview { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.task-card--compact .task-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.task-title a { color: var(--text); text-decoration: none; }
.task-context a { color: inherit; text-decoration: none; }
.task-context a:hover, .task-context a:focus-visible { color: var(--primary-dark); text-decoration: underline; }
.task-title a:hover, .task-title a:focus-visible { color: var(--primary-dark); text-decoration: underline; }
.task-context { margin: 0.3rem 0; font-size: 0.875rem; color: var(--text-muted); overflow-wrap: anywhere; }
.task-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-content: start; align-items: center; }
.task-actions form { margin: 0; flex-basis: 100%; }
.task-card .task-planning { margin: 0 0 0.35rem; font-size: 0.875rem; font-weight: 500; overflow-wrap: anywhere; }
.task-card .task-description { margin: 0.65rem 0 0; padding-top: 0.65rem; border-top: 1px solid var(--border); }
.task-card .task-context { margin: 0.3rem 0; }
.task-card--overdue { border-left: 3px solid var(--warning); }
.task-overdue { color: var(--warning); font-size: 0.8rem; }
.task-priority { color: var(--warning); background: var(--accent-soft); }
.task-group { margin: 1.5rem 0; }
.task-group h2 { font-size: 1rem; }
.task-worklist .task-card--list { border-top: 3px solid var(--primary); box-shadow: var(--shadow-soft); }
.task-worklist .task-card--list::before { content: ''; position: absolute; top: -3px; right: 0; width: 1.75rem; height: 3px; background: var(--accent); border-top-right-radius: var(--border-radius-small); }
.task-worklist .task-schedule { padding: 0.65rem 0.75rem; border-left: 2px solid var(--primary); border-radius: var(--border-radius-small); background: var(--primary-soft); }
.task-worklist .task-planning { color: var(--primary-dark); font-weight: 600; }
.task-worklist .task-actions { padding-top: 0.35rem; padding-bottom: 0.35rem; align-content: start; }
.task-worklist .task-actions button { color: var(--primary-dark); border-color: var(--primary); background: var(--primary-soft); font-weight: 600; }
.task-worklist .task-actions button:hover, .task-worklist .task-actions button:focus-visible { background: var(--primary); color: var(--surface); }
.task-worklist .task-group h2 { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); color: var(--primary-dark); }
.task-worklist .task-group h2::before { content: ''; width: 0.3rem; height: 1rem; flex: 0 0 0.3rem; border-radius: var(--border-radius-small); background: var(--accent); }
.task-description { margin: 0.65rem 0; color: var(--text-muted); font-size: 0.925rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-form-group { min-width: 0; margin: 0; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--border); }
.task-form-group legend { padding: 0 0.65rem 0 0; font-size: 1rem; font-weight: 600; color: var(--text); }
.task-form-group + .task-form-group { margin-top: 0.75rem; }
.task-card > .section-edit-trigger { position: absolute; top: 0.75rem; right: 0.75rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--border-radius-small); color: var(--text-muted); }
.task-filters { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.task-filters .filter-actions { justify-content: flex-start; }
[data-task-form] [hidden] { display: none !important; }
@media (max-width: 64rem) {
  .task-card, .task-columns { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .task-actions { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); padding: 0.75rem 0 0; }
  .task-columns > :last-child { display: none; }
  .task-actions form { flex-basis: auto; }
}
@media (max-width: 38rem) {
  .task-filters { grid-template-columns: minmax(0, 1fr); }
  .task-card { grid-template-columns: minmax(0, 1fr); padding: 0.875rem; }
  .task-identity { padding-right: 2.75rem; }
  .task-schedule { border-left: 0; border-top: 1px solid var(--border); padding: 0.75rem 0 0; }
  .task-columns { display: none; }
}

/* Compact organization contacts; edit/archive controls retain their existing routes. */
#contacts .contact-list { gap: 0.4rem; }
#contacts .contact-item { position: relative; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.6rem; padding: 0.6rem 3.25rem 0.6rem 0.65rem; }
#contacts .contact-main { grid-column: 1; }
#contacts .contact-main h3 { line-height: 1.3; }
#contacts .contact-main p { line-height: 1.4; }
#contacts .chip-list { margin-top: 0.25rem; gap: 0.25rem; }
#contacts .mini-chip { font-size: 0.7rem; padding: 0.1rem 0.35rem; }
#contacts .contact-role-primary { color: var(--primary-dark); background: var(--primary-soft); }
#contacts .contact-methods { grid-column: 1; gap: 0; }
#contacts .contact-actions { grid-column: 2; grid-row: 1; align-self: end; }
#contacts .contact-item > .section-edit-trigger { top: 0.3rem; right: 0.35rem; }
#contacts .contact-archive { grid-column: 1 / -1; }
#contacts .contact-archive > summary { position: absolute; right: 0.35rem; top: 3rem; display: grid; place-items: center; width: 2.5rem; height: 2rem; color: var(--text-muted); cursor: pointer; list-style: none; border-radius: var(--border-radius-small); }
#contacts .contact-archive > summary::-webkit-details-marker { display: none; }
#contacts .contact-archive > summary:hover, #contacts .contact-archive > summary:focus-visible { background: var(--primary-soft); color: var(--primary-dark); }
#contacts .contact-archive > summary:focus-visible { outline: 2px solid var(--primary); }
#contacts .contact-archive:not([open]) { height: 0; }
#contacts .contact-archive form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.35rem; padding-top: 0.5rem; border-top: 1px solid var(--border); font-size: 0.8rem; }
#contacts .contact-expand > summary { padding: 0.5rem 0; cursor: pointer; color: var(--primary-dark); font-size: 0.8125rem; }
#contacts .contact-expand-hide, #contacts .contact-expand[open] > summary .contact-expand-show { display: none; }
#contacts .contact-expand[open] > summary .contact-expand-hide { display: inline; }
#contacts .archive-toggle { margin-top: 0.5rem; border-top: 1px solid var(--border); }
.map-center-search { position: relative; min-width: 0; display: grid; gap: 0.35rem; }
.map-center-search [hidden] { display: none; }
.map-center-search input { width: 100%; min-width: 0; }
.map-center-search small { color: var(--text-muted); }
.map-center-search [role="listbox"] { position: absolute; top: 4.5rem; left: 0; right: 0; z-index: 1100; max-height: 18rem; overflow-y: auto; margin: 0; padding: 0.25rem; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; box-shadow: var(--shadow-soft); }
.map-center-search [role="option"] { padding: 0.5rem; cursor: pointer; overflow-wrap: anywhere; border-radius: 0.25rem; }
.map-center-search [role="option"]:hover, .map-center-search [aria-selected="true"] { background: var(--primary-soft); color: var(--primary-dark); }
.map-center-chip { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0.5rem; border-radius: 0.35rem; background: var(--primary-soft); font-size: 0.8125rem; overflow-wrap: anywhere; }
.map-center-chip button { flex: none; padding: 0.15rem 0.4rem; background: transparent; color: var(--primary-dark); }
.communication-list { display: grid; gap: 0; }
.communication-preview { min-width: 0; }
.communication-preview .communication-row { min-width: 0; }
.communication-preview-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.communication-preview-heading a { min-width: 0; color: var(--text); }
.communication-preview-heading .status-badge { flex: none; }
.communication-preview-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.65rem; font-size: 0.75rem; color: var(--text-muted); }
.communication-preview .communication-preview-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; color: var(--text-muted); }
.communication-row { padding: 0.65rem 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.communication-row small { display: block; margin-top: 0.2rem; color: var(--text-muted); }
.communication-row p { margin: 0.3rem 0 0; font-size: 0.875rem; }
.communication-row > div { min-width:0; }
.communication-row .mail-row-preview { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.communication-row:focus-within, .communication-row:hover { background: var(--primary-soft); }
.communication-body { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
#communication .form-actions { flex-wrap: wrap; margin-bottom: 0.5rem; }
.communication-form { max-width: 65rem; }
.communication-form fieldset { min-width: 0; display: grid; gap: var(--spacing-3); border: 1px solid var(--border); border-radius: var(--border-radius); padding: var(--spacing-4); }
.communication-form legend { color: var(--primary-dark); font-weight: 600; }
.communication-form label { display: grid; gap: var(--spacing-1); min-width: 0; }
.communication-form details label { display: flex; align-items: center; gap: var(--spacing-2); overflow-wrap: anywhere; }
.communication-form input[type="checkbox"] { width: auto; flex: none; }
.communication-form small { color: var(--text-muted); }
.communication-form .form-actions { flex-wrap: wrap; }
@media (max-width: 38rem) {
  #contacts .contact-item { grid-template-columns: minmax(0, 1fr); }
  #contacts .contact-actions { grid-column: 1; grid-row: auto; justify-items: start; }
}
.communication-content-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.65rem .8rem; border-bottom:1px solid var(--border); min-width:0; }
.communication-content-row small { display:block; color:var(--text-muted); overflow-wrap:anywhere; }
.communication-content-row > div { min-width:0; }
.communication-content-editor { margin-top:1rem; }
.communication-content-editor form { margin-top:.75rem; }
.communication-form .communication-check { display:flex; align-items:center; gap:.5rem; overflow-wrap:anywhere; }
.communication-form .communication-check input { width:auto; flex-shrink:0; }
.communication-form input[type=file] { max-width:100%; min-width:0; }
/* Organization-only timeline: same content width as the surrounding CRM blocks. */
#communication .section-heading { flex-wrap:wrap; gap:.65rem; }
#communication .form-actions { margin:0; gap:.5rem; }
.communication-preview .communication-row { padding:0; border-left:2px solid var(--border); }
.communication-preview .communication-row--incoming { border-left-color:var(--primary); }
.communication-preview .communication-preview-link { display:block; min-width:0; padding:.65rem .8rem; color:var(--text); text-decoration:none; transition:background-color .15s ease; }
.communication-preview-link:hover, .communication-preview-link:focus-visible { background:var(--primary-soft); }
.communication-preview-link:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.communication-preview-heading { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline; }
.communication-direction { font-size:.75rem; color:var(--primary-dark); white-space:nowrap; }
.communication-subject { font-weight:600; overflow-wrap:anywhere; }
.communication-row--unread .communication-subject { font-weight:750; }
.communication-status-new { color:var(--primary-dark); background:var(--primary-soft); }
.communication-status-failed { color:var(--danger); }
.communication-thread-context { font-size:.7rem; }
.communication-row--continuation { border-top:0; }
.communication-preview-meta { margin-top:.2rem; }
.communication-view-all { display:inline-block; margin-top:.75rem; font-size:.875rem; }
@media (max-width:52rem) {
  #communication .section-heading { align-items:flex-start; }
  .communication-preview-heading { grid-template-columns:minmax(0,1fr) auto; }
  .communication-direction { grid-column:1; grid-row:1; }
  .communication-preview-heading .status-badge { grid-column:2; grid-row:1; }
  .communication-subject { grid-column:1 / -1; grid-row:2; }
  .communication-preview-meta time { white-space:nowrap; }
}
@media (max-width:38rem) {
  #communication .form-actions { width:100%; }
  #communication .form-actions a { max-width:100%; white-space:normal; }
  .communication-preview .communication-preview-link { padding:.6rem; }
}
/* Shared UI rule: peer navigation uses links styled as tabs; actions use buttons. */
.section-tabs { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:1rem; }
.section-tab { display:inline-flex; align-items:center; min-height:2.5rem; padding:.5rem .85rem; border:1px solid var(--border); border-bottom-width:3px; border-radius:var(--border-radius-small); color:var(--primary-dark); text-decoration:none; font-size:.875rem; transition:background-color .15s ease; }
.section-tab[aria-current="page"] { background:var(--primary-soft); border-bottom-color:var(--primary-dark); font-weight:750; }
.section-tab:hover, .section-tab:focus-visible { background:var(--primary-soft); }
.section-tab:focus-visible, .action-button:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.action-button { border-radius:var(--border-radius-small); cursor:pointer; transition:background-color .15s ease; }
.action-button::-webkit-details-marker { display:none; }
.button-secondary.action-button:hover { background:var(--primary-soft); }
.button-primary.action-button:hover { background:var(--primary-soft); border-color:var(--primary-dark); color:var(--primary-dark); }
.action-disclosure[open] > .button-primary { background:var(--surface); color:var(--primary-dark); border-color:var(--border); }
.action-disclosure[open] > .button-primary:hover { background:var(--primary-soft); }
.record-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.communication-form .form-section { border:0; border-top:1px solid var(--border); border-radius:0; padding:1rem 0 0; }
.placeholder-help { border-left:2px solid var(--primary); padding-left:.85rem; min-width:0; }
.placeholder-help h2 { font-size:1rem; margin:0 0 .35rem; }
.placeholder-help p { font-size:.875rem; color:var(--text-muted); margin:.35rem 0 .65rem; }

@media (max-width:38rem) {
  .section-tabs { gap:.3rem; }
  .section-tab { flex:1 1 auto; justify-content:center; }
  .placeholder-option button { justify-self:start; max-width:100%; }
  .communication-content-row { flex-wrap:wrap; }
  .communication-content-row > div:first-child { flex:1 1 12rem; }
}

/* Compact code helper; groups form the desktop columns. */
.placeholder-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.25rem 1rem; }
.placeholder-groups section { min-width:0; }
.placeholder-group { margin:0 0 .2rem; font-size:.75rem; color:var(--text-muted); }
.placeholder-options { display:grid; gap:.1rem; }
.placeholder-option { min-width:0; }
.placeholder-option .action-button { display:block; width:100%; min-height:25px; padding:.12rem .35rem; border-color:transparent; background:transparent; text-align:left; font-size:.75rem; }
.placeholder-option code { white-space:normal; overflow-wrap:anywhere; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.document-selector { max-width:42rem; min-width:0; }
.document-options { max-height:13rem; overflow-y:auto; border:1px solid var(--border); border-radius:var(--border-radius-small); background:var(--surface); }
.document-options [role="option"] { padding:.45rem .6rem; cursor:pointer; overflow-wrap:anywhere; }
.document-options [role="option"]:hover,.document-options [aria-selected="true"] { background:var(--primary-soft); }
.document-selection { display:flex; flex-wrap:wrap; gap:.4rem; }
.document-chip { display:flex; align-items:center; gap:.4rem; max-width:100%; padding:.25rem .4rem; background:var(--surface-muted); border:1px solid var(--border); border-radius:var(--border-radius-small); }
.document-chip > span { min-width:0; overflow-wrap:anywhere; font-size:.85rem; }
.document-chip small { display:block; font-size:.7rem; }
.document-chip button { flex-shrink:0; }
.document-selector [role="status"] { font-size:.8rem; margin:.3rem 0; color:var(--text-muted); }
@media (max-width:65rem) { .placeholder-groups { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:38rem) { .placeholder-groups { grid-template-columns:minmax(0,1fr); } .document-chip { width:100%; justify-content:space-between; } }

.attachment-heading { margin:0 0 .4rem; font-size:.875rem; color:var(--primary-dark); }

.mail-editor .ql-editor { min-height:250px; max-height:450px; overflow-y:auto; font:inherit; background:#fff; }
.mail-editor.ql-container.ql-snow { border-color:var(--border); background:#fff; }
textarea[data-rich-body] { background:#fff; }
.mail-signature { padding:.5rem 0; background:#fff; }
.mail-signature p { margin:.4rem 0; }
.mail-signature img { max-width:100%; height:auto; }
.mail-rendered,.mail-preview { overflow-wrap:anywhere; background:#fff; }
.mail-preview { border:1px solid var(--border); padding:1rem; }
.ql-toolbar.ql-snow { border-color:var(--border); border-radius:var(--border-radius-small) var(--border-radius-small) 0 0; }
.ql-toolbar button:focus-visible { outline:2px solid var(--primary); }
@media(max-width:38rem) { .mail-editor .ql-editor { min-height:220px; } }

.mail-editor-frame { min-width:0; }

/* Mail typography is independent of platform form/heading typography. */
.mail-editor .ql-editor,textarea[data-rich-body],.mail-rendered,.mail-signature,.mail-preview { font-family:Poppins,Arial,sans-serif; font-size:14px; line-height:1.5; color:#20252b; }
.ql-snow .ql-picker.ql-font { width:10.5rem; }
.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before { content:attr(data-value); }
.ql-snow .ql-picker.ql-font .ql-picker-label:not([data-value])::before { content:'Poppins'; }
.ql-picker-label:focus-visible,.ql-picker-item:focus-visible,.mail-preview:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.mail-preview { min-width:0; max-width:100%; }
.employee-list { border-top: 2px solid var(--primary); }
.employee-row { display:grid;grid-template-columns:1fr 1.4fr 1fr .7fr 1.2fr;gap:1rem;padding:.8rem;border-bottom:1px solid var(--border);color:inherit;text-decoration:none;overflow-wrap:anywhere;transition:background-color .15s; }
.employee-row:hover,.employee-row:focus-visible { background:var(--primary-soft); }
.employee-row:focus-visible { outline:2px solid var(--primary);outline-offset:-2px; }
@media(max-width:800px){.employee-row{grid-template-columns:1fr 1fr;gap:.4rem;}}
@media(max-width:480px){.employee-row{grid-template-columns:1fr;}}

.employee-content { display:grid; gap:var(--spacing-4); }
.employee-content :is(input,select) { max-width:100%; min-width:0; }
.employee-list { --employee-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1.5fr) minmax(0,.7fr) minmax(0,1.1fr); }
.employee-list-header,.employee-row { grid-template-columns:var(--employee-columns); }
.employee-list-header { display:grid;gap:1rem;padding:.7rem .8rem;border-bottom:1px solid var(--border);color:var(--text-muted);font-size:.8rem;font-weight:600; }
.employee-row > * { min-width:0;overflow-wrap:anywhere; }
.employee-job { color:var(--text-muted); }
.topbar .topbar-breadcrumb { display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;min-width:0;font-size:.8rem; }
.topbar-breadcrumb a { color:var(--primary-dark);text-decoration:none; }
.topbar-breadcrumb a:hover { text-decoration:underline; }
.topbar-breadcrumb [aria-current] { color:var(--text-muted); }
.role-comparison { border:1px solid var(--border);border-top:2px solid var(--primary);border-radius:var(--border-radius-small);background:var(--surface); }
.role-comparison-row { display:grid;grid-template-columns:minmax(10rem,1fr) minmax(0,3fr);gap:var(--spacing-4);padding:var(--spacing-4);border-bottom:1px solid var(--border); }
.role-comparison-row:last-child { border-bottom:0; }
.role-comparison-row h2 { margin:0 0 .5rem; }
.permission-count,.permission-summary { color:var(--text-muted);font-size:.85rem; }
.permission-summary { display:flex;flex-wrap:wrap;gap:.5rem 1.5rem; }
.role-highlights,.permission-full-list { padding-left:1.2rem; }
.permission-full-list { columns:2;column-gap:2rem; }
.permission-full-list li { break-inside:avoid; }
.personal-permissions { border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding-block:var(--spacing-3);margin-block:var(--spacing-3); }
.personal-permission-list { list-style:none;padding:0; }
.personal-permission-list li { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--border); }
.personal-permission-list form { flex-shrink:0; }
.activation-copy { display:flex;gap:.75rem;align-items:center; }
.activation-copy input { flex:1;min-width:0;padding:.75rem;border:1px solid var(--border);border-radius:var(--border-radius-small);text-overflow:ellipsis;background:var(--surface); }
.activation-copy button { flex-shrink:0; }
.activation-expiry { color:var(--text-muted); }
@media(max-width:800px){.employee-list-header{display:none;}.employee-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.role-comparison-row{grid-template-columns:1fr;}.permission-full-list{columns:1;}}
@media(max-width:480px){.employee-row{grid-template-columns:minmax(0,1fr);}.activation-copy{align-items:stretch;flex-direction:column;}.personal-permission-list li{align-items:flex-start;flex-direction:column;}}

.bank-account-section { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); min-width: 0; overflow-wrap: anywhere; }
.bank-account-pending { padding-block: .5rem; }

/* Shared compact collaboration lists, using Cash4Kas tokens. */
.collaboration-list,.performance-list { background:var(--surface); border:1px solid var(--border); border-radius:var(--border-radius-small); }
.collaboration-row,.performance-row { display:grid; grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr)); gap:.8rem; padding:.7rem; border-bottom:1px solid var(--border); align-items:start; }
.collaboration-row > *, .performance-row > * { min-width:0; overflow-wrap:anywhere; }
.collaboration-row small,.performance-row small { display:block; color:var(--text-muted); }
.collaboration-row a { color:inherit; }
.team-row,.team-row:visited { color:var(--text);text-decoration:none; }
.team-row:focus-visible { outline:2px solid var(--primary);outline-offset:2px; }
.team-people { list-style:none;padding:0; }
.team-people li { display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.6rem 0;border-bottom:1px solid var(--border); }
.team-people li > span { min-width:0;overflow-wrap:anywhere; }
.export-menu { margin-block:1rem; }
a.button-secondary.action-button:visited { color:var(--primary-dark); }
.collaboration-row:not(.collaboration-header),.performance-row:not(.collaboration-header) { transition:background-color .15s ease; }
.collaboration-row:not(.collaboration-header):hover,.collaboration-row:focus-within,.performance-row:not(.collaboration-header):hover,.performance-row:focus-within { background:var(--primary-soft); }
.collaboration-row .section-edit-trigger { position:static; }
.collaboration-header { font-weight:600; color:var(--text-muted); background:var(--background); }
.absence-row { padding-block:.75rem; border-top:1px solid var(--border); }
.absence-actions { display:flex;flex-wrap:wrap;align-items:flex-start;gap:.6rem; }
.absence-editor { min-width:0;max-width:100%; }
.absence-actions > .absence-editor[open] { flex-basis:100%; }
.absence-editor > form { margin-top:var(--spacing-3); }
.activity-timeline li { margin-block:.5rem; }
.compact-trends { display:flex; gap:1rem; flex-wrap:wrap; list-style:none; padding:0; }
@media(max-width:800px){.collaboration-row,.performance-row{grid-template-columns:repeat(2,minmax(0,1fr));}.collaboration-header{display:none;}}
@media(max-width:480px){.collaboration-row,.performance-row{grid-template-columns:minmax(0,1fr);}}


/* Shared application navigation: module choice, location and local sections. */
.topbar { flex-wrap: wrap; gap: var(--spacing-3); }
.app-navigation { flex: 1 1 38rem; min-width: 0; }
.app-navigation summary { cursor: pointer; color: var(--primary-dark); padding: var(--spacing-2); }
.app-navigation nav { display: flex; flex-wrap: wrap; gap: var(--spacing-1); }
.app-nav-link, .app-nav-link:visited { padding: var(--spacing-2) var(--spacing-3); color: var(--text); text-decoration: none; border-bottom: 2px solid transparent; font-size: .9rem; }
.app-nav-link:hover { background: var(--primary-soft); color: var(--primary-dark); }
.app-nav-link[aria-current] { border-bottom-color: var(--accent); background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.app-nav-link:focus-visible, .settings-action:focus-visible, .app-navigation summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2); min-width: 0; }
.breadcrumb a, .breadcrumb a:visited { color: var(--primary-dark); overflow-wrap: anywhere; }
.breadcrumb span { overflow-wrap: anywhere; min-width: 0; }
.section-tabs { flex-wrap: wrap; }
.section-tab:visited { color: var(--primary-dark); }
.settings-group { margin-block: var(--spacing-5); }
.settings-group h2 { font-size: 1rem; color: var(--text-muted); }
.settings-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--spacing-2); max-width: 56rem; }
.settings-action, .settings-action:visited { display: flex; justify-content: space-between; gap: var(--spacing-3); padding: var(--spacing-3); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--border-radius-small); background: var(--surface); color: var(--primary-dark); text-decoration: none; overflow-wrap: anywhere; }
.settings-action:hover { background: var(--primary-soft); }
@media(min-width:1100px) { .app-navigation summary { display: none; } .app-navigation nav { display: flex; } }
@media(max-width:1099px) { .app-navigation { flex-basis: 100%; order: 3; } .app-nav-link { flex: 1 1 9rem; } }
@media(max-width:600px) { .settings-actions { grid-template-columns: minmax(0,1fr); } .section-tab { white-space: normal; } }

/* One content axis for header, standalone breadcrumbs and page content. */
:root { --app-content-max: 76rem; --app-gutter: 1rem; }
.app-container, .app-shell > .crm-content, .app-shell > .dashboard-content, .app-shell > .topbar-breadcrumb { width: min(calc(100% - 2 * var(--app-gutter)), var(--app-content-max)); max-width: var(--app-content-max); margin-inline: auto; }
.topbar { display: block; padding-inline: 0; }
.topbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-3); }
.topbar-inner > form { margin: 0; flex-shrink: 0; }
.app-shell > .topbar-breadcrumb { padding-top: var(--spacing-4); margin-bottom: 0; }
.settings-group { max-width: 56rem; padding: var(--spacing-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--border-radius-small); }
.settings-group p { color: var(--text-muted); margin-block: var(--spacing-2) var(--spacing-3); }
.settings-group .action-button { white-space: normal; max-width: 100%; }
@media(max-width:38rem) { :root { --app-gutter: .75rem; } }

.schedule-row { display:grid;grid-template-columns:minmax(7rem,1fr) 5rem minmax(5rem,1fr) minmax(5rem,1fr);gap:.5rem;align-items:center;padding:.4rem 0;border-bottom:1px solid var(--border); }
.schedule-row input { min-width:0;max-width:100%; }
.schedule-summary>div { display:flex;flex-wrap:wrap;gap:1rem; }
.schedule-summary dt { min-width:7rem; }
.schedule-summary dd { margin:0; }
@media(max-width:38rem){.schedule-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.schedule-header{display:none;}}

.import-capacity-row { display:grid;grid-template-columns:minmax(12rem,1fr) minmax(0,2fr);gap:var(--spacing-3);align-items:center;padding:var(--spacing-3) 0;border-bottom:1px solid var(--border); }
.import-capacity-row label { display:flex;gap:var(--spacing-2);align-items:center;justify-content:space-between; }
.import-capacity-row input { width:5rem;min-width:0; }
@media(max-width:38rem){.import-capacity-row{grid-template-columns:minmax(0,1fr);}.import-capacity-row span{overflow-wrap:anywhere;}}

/* Gedeelde centrale werkmailbox: geen afzonderlijke kaarten per bericht. */
.mail-client { display:grid; grid-template-columns:10rem minmax(17rem,.85fr) minmax(0,1.4fr); align-items:stretch; min-width:0; border:1px solid var(--border); border-top:3px solid var(--primary); border-radius:var(--border-radius-small); background:var(--surface); overflow:hidden; }
.mail-folders { display:flex; flex-direction:column; gap:.35rem; padding:1rem .65rem; background:var(--surface-muted); }
.mail-folders a { padding:.5rem; color:var(--text); text-decoration:none; border-radius:.35rem; font-size:.85rem; }
.mail-folders a[aria-current] { background:var(--primary-soft); color:var(--primary-dark); font-weight:600; box-shadow:inset 3px 0 var(--accent); }
.mail-folders small { padding:.4rem; color:var(--text-muted); font-size:.7rem; }
.mail-index,.mail-reading { min-width:0; max-height:78vh; overflow:auto; overscroll-behavior:contain; }
.mail-index { border-inline:1px solid var(--border); }
.mail-search { padding:.75rem; border-bottom:1px solid var(--border); background:var(--surface-muted); display:grid; gap:.4rem; }
.mail-search label,.mail-assignment label { font-size:.75rem; display:grid; gap:.25rem; }
.mail-search input,.mail-search select,.mail-assignment input,.mail-assignment select { width:100%; min-width:0; max-width:100%; font-size:.8rem; padding:.45rem; }
.mail-search input[type=checkbox] { width:auto; }
.mail-search .form-actions { margin:0; gap:.5rem; font-size:.75rem; }
.mail-list-row { display:grid; gap:.25rem; padding:.7rem .85rem; border-bottom:1px solid var(--border); text-decoration:none; color:var(--text); transition:background-color .15s ease; }
.mail-list-row:hover,.mail-folders a:hover { background:var(--primary-soft); }
.mail-list-row.is-selected { background:var(--primary-soft); box-shadow:inset 3px 0 var(--primary); }
.mail-list-row:focus-visible,.mail-folders a:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.mail-row-top { display:flex; justify-content:space-between; align-items:center; gap:.5rem; min-width:0; font-size:.7rem; color:var(--text-muted); }
.mail-row-top strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; }
.mail-row-top time { flex-shrink:0; font-size:.65rem; }
.mail-row-subject { font-size:.83rem; font-weight:500; }
.mail-list-row--unread .mail-row-subject,.mail-list-row--unread .mail-row-top strong { font-weight:700; }
.mail-row-snippet { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.75rem; color:var(--text-muted); }
.mail-list-row small { font-size:.68rem; color:var(--text-muted); overflow-wrap:anywhere; }
.mail-list-row .mail-warning { color:var(--warning); }
.mail-reading { padding:1rem; overflow-wrap:anywhere; }
.mail-reading h1 { font-size:1.2rem; margin-top:0; }
.mail-reading h2 { font-size:.9rem; }
.mail-reading .detail-card { border:0; box-shadow:none; padding:0; background:transparent; }
.mail-reading .detail-card > p { font-size:.8rem; }
.mail-reading .mail-rendered,.mail-reading .mail-signature { background:var(--surface); }
.mail-reading .form-actions a { text-decoration:none; border:1px solid var(--border); border-radius:.35rem; padding:.4rem .6rem; color:var(--primary-dark); font-size:.8rem; }
.mail-reading .communication-list { border-top:1px solid var(--border); }
.mail-work { padding:.65rem; margin-block:.65rem; background:var(--surface-muted); border-left:2px solid var(--accent); font-size:.8rem; }
.mail-work p { margin:0 0 .5rem; }
.mail-work .form-actions { gap:.4rem; margin-top:.5rem; align-items:flex-start; }
.mail-work .status-badge { font-size:.7rem; }
.mail-assignment { width:100%; }
.mail-assignment form { display:grid; gap:.4rem; margin-block:.6rem; }
.mail-pages { display:flex; justify-content:space-between; gap:.5rem; padding:.75rem; font-size:.75rem; }
.mail-feedback { grid-column:1/-1; margin:0; padding:0 .75rem; color:var(--warning); }
.mail-feedback:not(:empty) { padding-block:.75rem; border-top:1px solid var(--border); }
.mail-back { display:none; }
.mail-client[aria-busy=true] { cursor:progress; }
@media(max-width:68rem) { .mail-client { grid-template-columns:minmax(15rem,.85fr) minmax(0,1.2fr); } .mail-folders { grid-column:1/-1; flex-direction:row; flex-wrap:wrap; padding:.5rem; border-bottom:1px solid var(--border); } .mail-folders small { align-self:center; } }
@media(max-width:44rem) { .mail-client { display:block; } .mail-index,.mail-reading { max-height:none; border:0; } .mail-reading { display:none; } .mail-client--selected .mail-index { display:none; } .mail-client--selected .mail-reading { display:block; } .mail-back { display:inline-block; margin-bottom:.75rem; } .mail-row-top time { font-size:.6rem; } .mail-work .form-actions { flex-wrap:wrap; } }

.mail-search .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Supplier dossier: bounded lists, shared CRM colors, no nested card wall. */
.supplier-dossier { max-width: 1200px; }
.supplier-section { padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.supplier-section h2 { margin: 0 0 .75rem; }
.supplier-dossier details { margin: .65rem 0; }
.supplier-dossier summary { cursor: pointer; padding: .35rem 0; }
.supplier-form, .supplier-filters { display:flex; flex-wrap:wrap; align-items:end; gap:.75rem; margin:.75rem 0; }
.supplier-form label, .supplier-filters label { display:flex; flex-direction:column; gap:.3rem; min-width:0; flex:1 1 180px; }
.supplier-form input, .supplier-form textarea, .supplier-form select, .supplier-filters input { width:100%; min-width:0; box-sizing:border-box; }
.supplier-form .supplier-wide { flex-basis:100%; }
.supplier-agreement { padding:.7rem 0; border-bottom:1px solid var(--border); }
.supplier-agreement h3, .supplier-agreement p { margin:.3rem 0; }
.supplier-note { white-space:pre-wrap; overflow-wrap:anywhere; }
.supplier-row { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap:.75rem; padding:.6rem; border-bottom:1px solid var(--border); color:inherit; text-decoration:none; overflow-wrap:anywhere; transition:background-color .15s; }
.supplier-row:hover, .supplier-row:focus-visible { background:var(--primary-soft); }
.supplier-row:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.supplier-list-heading { font-weight:600; font-size:.85rem; }
@media(max-width:640px){ .supplier-row { grid-template-columns:1fr; gap:.2rem; } .supplier-list-heading { display:none; } .supplier-form label { flex-basis:100%; } }

/* Compact mailbox action; confirmation takes space only when opened. */
.mail-message-actions { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.mail-message-actions h1 { flex:1; min-width:0; margin-top:0; overflow-wrap:anywhere; }
.mail-trash-action { position:relative; }
.mail-trash-action > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; }
.mail-trash-action > summary::-webkit-details-marker { display:none; }
.mail-trash-action > summary:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.mail-trash-action form { max-width:20rem; padding:.5rem; }
/* Campaign orchestration uses the shared CRM interaction colors. */
.campaign-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.campaign-grid > *, .campaign-row > * { min-width:0; overflow-wrap:anywhere; }
.campaign-list { margin:1rem 0; }
.campaign-row { display:grid; grid-template-columns:2fr 1.2fr 1.2fr 1.5fr 1fr; gap:.75rem; align-items:center; padding:.7rem .5rem; border-bottom:1px solid var(--border); color:inherit; text-decoration:none; transition:background-color .15s; }
.campaign-row:hover,.campaign-row:focus-within { background:var(--primary-soft); }
.campaign-row:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.campaign-member { padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.campaign-kpis { display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin:1rem 0; }
.campaign-kpis strong { color:var(--primary-dark); }
.campaign-content input,.campaign-content select,.campaign-content textarea { max-width:100%; }
@media(max-width:900px) { .campaign-row { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .campaign-grid,.campaign-row { grid-template-columns:minmax(0,1fr); } }

.campaign-header { font-weight:600; color:var(--text-muted); }
.campaign-editor > .section-edit-trigger { margin-left:auto; }
@media(max-width:900px) { .campaign-header { display:none; } }

/* Opt-in shared filter tracks: each visual row shares label/control/help heights. */
.filter-grid, .filter-bar.filter-grid {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.375rem 1rem; align-items:stretch;
}
.filter-grid > label, .filter-bar.filter-grid > label:first-child {
  grid-column:auto; grid-row:span 3; display:grid; grid-template-rows:auto auto 1fr; min-width:0; margin:0 0 .75rem;
}
.filter-grid > label > :is(input,select) { grid-row:2; width:100%; min-width:0; }
.filter-grid > label > span { grid-row:1; align-self:end; }
.filter-grid > label > small { grid-row:3; margin:0; min-width:0; }
.filter-grid > .filter-actions { grid-column:1/-1; align-self:end; flex-wrap:wrap; }
.filter-grid > button { justify-self:start; align-self:end; }
@supports (grid-template-rows:subgrid) {
  .filter-grid > label, .filter-bar.filter-grid > label:first-child { grid-template-rows:subgrid; }
}
.campaign-create-panel { padding:1rem; margin:1rem 0; border:1px solid var(--border); border-radius:var(--border-radius-small); background:var(--surface); }
.campaign-create-panel[hidden] { display:none; }
.campaign-content .crm-form > .form-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.campaign-content .crm-form > .form-actions > button { width:auto; flex:0 0 auto; }
.campaign-onboarding { margin:1rem 0; padding:1rem; border-left:3px solid var(--primary); background:var(--primary-soft); }
.campaign-onboarding h3 { margin-top:0; }
.campaign-content :is(h1,h2)[id] { scroll-margin-top:1rem; }
@media(max-width:1000px) { .filter-grid,.filter-bar.filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
  .filter-grid,.filter-bar.filter-grid { grid-template-columns:minmax(0,1fr); }
  .campaign-content .page-header > button { width:100%; }
  .campaign-content .crm-form > .form-actions > button { width:100%; }
}

/* Result detail reuses campaign spacing and the shared section edit trigger. */
.result-detail .result-section { position:relative; border-top:1px solid var(--border); margin-top:1.25rem; padding-top:1rem; }
.result-detail .result-section > h2 { padding-right:2.75rem; }
.result-detail .result-section > .campaign-editor > .section-edit-trigger { position:absolute; right:0; top:1rem; }
.result-detail .campaign-editor[open] { margin-top:1rem; }

/* Action import and delivery share compact, scoped presentation. */
.delivery-shell { max-width: 72rem; margin: auto; padding: var(--spacing-6); }
.delivery-shell > header { color: var(--primary-dark); border-bottom: 2px solid var(--accent); padding-block: var(--spacing-4); }
.action-data { overflow-wrap: anywhere; }
.data-form,.data-mapping { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap: var(--spacing-4); align-items: end; }
.data-form label,.data-mapping label { display: grid; gap: var(--spacing-2); min-width: 0; }
.data-form input,.data-form select,.data-mapping select { width: 100%; min-width: 0; box-sizing: border-box; }
.data-list { list-style: none; padding: 0; margin-block: var(--spacing-4); }
.data-list > li { padding: var(--spacing-3) 0; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-4); align-items: center; }
.data-list > li:hover,.data-order:focus-within { background: var(--primary-soft); }
.data-list small,.data-list span,.data-mapping dt { color: var(--text-muted); }
.data-mapping dd { margin: 0; }
.data-status { display: block; padding-block: var(--spacing-2); }
.data-order { border-bottom: 1px solid var(--border); padding: var(--spacing-3); }
.data-order > summary { cursor: pointer; padding-block: var(--spacing-2); }
.data-order form { margin-block: var(--spacing-3); }
.data-hash { word-break: break-all; font-size: .75rem; }
@media (max-width: 42rem) { .delivery-shell { padding: var(--spacing-3); } .data-list > li { align-items: start; } .data-list > li > span { flex-basis: 100%; } }

.action-data :is(input:not([type=hidden]):not([type=checkbox]),select) { max-width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--border-radius-small); background: var(--surface); padding: var(--spacing-2) var(--spacing-3); color: var(--text); }
.action-data input[type=checkbox] { width: auto; }
.action-data form > button { margin-block: var(--spacing-3); }

.operator-choices { display: flex; flex-wrap: wrap; gap: var(--spacing-3); }
.operator-choices button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

.delivery-brand { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; color:inherit; text-decoration:none; }
.delivery-brand img { object-fit:contain; }
.delivery-shell header nav { display:flex; flex-wrap:wrap; gap:1rem; margin-top:.75rem; }
.delivery-help li { margin-block:1rem; }
.delivery-password { overflow-wrap:anywhere; padding:1rem; background:white; border:1px solid var(--border-color); }