@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-latin-ext.woff2") format("woff2");
}

.mail-review-completed-toggle {
  align-items: center;
  display: inline-flex;
  font-size: 0.9rem;
  gap: 0.45rem;
  white-space: nowrap;
}

.mail-review-completed-toggle input {
  margin: 0;
  width: auto;
}

.mail-review-actions {
  gap: 1rem;
}

.mail-review-message:not(:empty) {
  margin-bottom: 1.5rem;
}

.historical-import-log { margin-top: 2rem; }
.historical-import-log .compact-heading { align-items: end; gap: 1rem; }
.historical-import-log .compact-heading label { min-width: 12rem; }
.historical-import-control-id { display: block; margin-bottom: .45rem; }
.historical-import-log td .button.compact { min-height: 2.2rem; padding: .35rem .65rem; white-space: nowrap; }
.historical-import-label { min-width: 10.5rem; }
.historical-import-reason-detail { display: block; margin-top: .2rem; }

.finding-copy { display: grid; gap: .35rem; min-width: 18rem; }
.finding-copy small { color: var(--ink-soft); line-height: 1.5; max-width: 44rem; }
.finding-detail-toggle { justify-self: start; margin-top: .25rem; }
.finding-row-expanded > td { border-bottom-color: transparent; }
.finding-detail-row[hidden] { display: none; }
.finding-detail-row > td { background: var(--surface-soft); padding: 0 1.2rem 1.2rem; }
.finding-comparison {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 1rem;
}
.finding-comparison-single { grid-template-columns: minmax(0, 1fr); }
.finding-comparison-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  display: grid;
  gap: .7rem;
  min-width: 0;
  padding: 1rem;
}
.finding-comparison-card h4,
.finding-comparison-card p { margin: 0; }
.finding-comparison-card small { color: var(--ink-soft); line-height: 1.45; }
.finding-comparison-facts { display: grid; gap: .55rem; margin: 0; }
.finding-comparison-facts div { display: grid; gap: .12rem; }
.finding-comparison-facts dt { color: var(--ink-soft); font-size: var(--font-xs); }
.finding-comparison-facts dd { font-weight: 700; margin: 0; }
.finding-difference { color: #8a4b00; font-size: 1.15rem; }
.finding-period-gap { color: #8a4b00; font-size: 1.15rem; }
.finding-source-link { color: var(--teal-deep); font-size: var(--font-xs); font-weight: 700; overflow-wrap: anywhere; }
.finding-review-button { white-space: nowrap; }
.review-summary { background: var(--surface-soft); border-left: 4px solid var(--accent); margin: 0; padding: .85rem 1rem; line-height: 1.55; }

.mail-bank-match { display: block; margin-top: .4rem; color: var(--ink); font-weight: 650; }
.mail-bank-match.blocked { color: #6d4d09; }
.mail-contact-match,
.mail-unassigned-customer { color: #8a4b00; }
.mail-contact-candidates { display: grid; gap: .2rem; margin-top: .5rem; }
.mail-contact-candidate { color: var(--ink); overflow-wrap: anywhere; }
.mail-file-type { color: var(--ink-soft); font-weight: 650; }
.mail-source-unavailable { color: var(--ink-soft); line-height: 1.35; max-width: 16rem; }
.mail-customer-assignment { align-items: stretch; display: grid; gap: .45rem; margin-top: .55rem; }
.mail-customer-select { max-width: 22rem; min-width: 14rem; }

#view-bank-mail td > div > small {
  display: block;
  margin-top: 0.3rem;
  max-width: 34rem;
}

.mail-sender-block-form {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(16rem, 1fr) minmax(18rem, 2fr) auto;
  gap: 1rem;
  align-items: end;
  margin: 0 0 1.5rem;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: #fff;
}
.mail-sender-block-form label { display: grid; gap: .4rem; font-weight: 700; }
.mail-sender-block-form input,
.mail-sender-block-form textarea {
  width: 100%;
  border: 1px solid #d9d2d0;
  border-radius: var(--ui-radius);
  background: #fcfaf9;
  color: var(--ink);
  padding: .68rem .72rem;
  font: 500 .88rem/1.4 var(--font-ui);
}
.mail-sender-block-form textarea { min-height: 4.5rem; resize: vertical; }
@media (max-width: 1050px) {
  .mail-sender-block-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .mail-sender-block-form { grid-template-columns: 1fr; }
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/ibm-plex-sans-latin-ext-italic.woff2") format("woff2");
}

:root {
  /* Gedeelde UI-schaal: alle modules gebruiken uitsluitend deze acht niveaus. */
  --font-xs: .75rem;
  --font-sm: .8125rem;
  --font-base: .875rem;
  --font-md: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-display: clamp(2rem, 4vw, 3.5rem);
  --ink: #302d2d;
  --ink-soft: #625d5d;
  --navy: #493d3f;
  --navy-deep: #302d2d;
  --accent: #e49696;
  --teal: #a55959;
  --teal-dark: #8f4f55;
  --teal-pale: #fbf3f1;
  --blue-pale: #f1ecea;
  --orange: #b27b22;
  --orange-pale: #fff2d8;
  --red: #9a493e;
  --red-pale: #f5e5e2;
  --line: #eee5e4;
  --surface: #ffffff;
  --surface-soft: #f3f4ef;
  --shadow: 0 14px 40px rgba(82, 55, 55, .08);
  --ui-radius: 2px;
  --button-radius: var(--ui-radius);
  --font-ui: "IBM Plex Sans", Arial, sans-serif;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--surface-soft);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: white;
  color: var(--navy);
  border-radius: var(--ui-radius);
}
.skip-link:focus { top: 1rem; }

.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 5.75rem minmax(0, 1fr);
  background: var(--surface-soft);
}
.auth-brand {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  padding: 1.1rem clamp(1.3rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background: white;
  box-shadow: 0 6px 20px rgba(69, 53, 55, .055);
}
.auth-logo {
  display: block;
  width: min(10.9rem, 100%);
  height: auto;
  margin: 0;
}
.auth-card {
  align-self: start;
  width: min(32rem, calc(100% - 3rem));
  margin: clamp(2.25rem, 8vh, 5rem) auto 3rem;
  padding: 2rem 2.25rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: white;
  box-shadow: 0 12px 28px rgba(69, 53, 55, .06);
}
.auth-card h2 { margin: 0 0 .75rem; font: 600 1.75rem/1.15 var(--font-ui); letter-spacing: -.02em; }
.auth-card input { height: 44px; min-height: 44px; border-radius: 0; background: white; }
.auth-card .button { border-radius: 0; box-shadow: none; }
.auth-card .message:not(:empty) { border-radius: 0; }

.eyebrow { margin: 0; color: var(--teal); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow.warning { color: var(--orange); }
.muted { color: var(--ink-soft); line-height: 1.6; }
.stack { display: grid; gap: .9rem; }
label { display: grid; gap: .4rem; color: var(--ink); font-size: .86rem; font-weight: 700; }
input, select {
  width: 100%;
  height: 40px;
  padding: 8px 10px;
  border: 1px solid #ded9d7;
  border-radius: var(--ui-radius);
  background: #fcfaf9;
  color: var(--ink);
  font-size: .82rem;
  outline: none;
}
input:not([type="file"]):not([type="hidden"]),
select:not([multiple]) {
  height: 40px;
  min-height: 40px;
}
select:not([multiple]) {
  padding: 8px 10px;
}
select:not([multiple]):disabled {
  cursor: not-allowed;
  opacity: .68;
  background-color: var(--surface-soft);
}
input:focus-visible, select:focus-visible { border-color: var(--teal); outline: 3px solid rgba(165,89,89,.55); outline-offset: 2px; }
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 2.7rem;
  padding: .72rem 1.05rem;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  font-weight: 750;
}
.button.primary { color: var(--ink); background: var(--accent); box-shadow: none; }
.button.primary:hover { background: var(--accent); filter: brightness(.96); }
.button.secondary { color: var(--ink); background: var(--teal-pale); border-color: #e5cecc; }
.button.secondary:hover { border-color: var(--teal); color: var(--teal-dark); }
.button.danger { color: #813b33; background: #f5e5e2; border-color: #e5c2bd; }
.button.danger:hover { color: #672e28; border-color: #c8877e; }
.button:disabled { cursor: not-allowed; opacity: .55; }
.button.wide { width: 100%; margin-top: 1.5rem; }
.button:focus-visible, .nav-item:focus-visible, .icon-button:focus-visible { outline: 3px solid rgba(165,89,89,.3); outline-offset: 2px; }
.recovery-box { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.25rem; color: var(--ink-soft); }
.recovery-box summary { cursor: pointer; color: var(--ink); font-weight: 700; }
.message {
  min-height: 1.25rem;
  margin: 1rem 0 0;
  color: var(--red);
  font-size: .92rem;
}
.message:not(:empty) {
  padding: .85rem 1rem;
  border: 1px solid #e6a5a5;
  border-left: .3rem solid var(--red);
  border-radius: var(--ui-radius);
  background: #fff2f2;
  font-weight: 750;
  line-height: 1.45;
}
.message.error:not(:empty) {
  color: var(--red);
}
.message.success:not(:empty) {
  color: #2d6b46;
  border-color: #b8d7c3;
  border-left-color: #2d6b46;
  background: #e4f2e9;
}
.message.warning:not(:empty) {
  color: #6f4700;
  border-color: #e5ba61;
  border-left-color: #c27a00;
  background: #fff6df;
}
#document-generator-history-message:not(:empty) { margin-bottom: 1.25rem; }

.portal-shell { min-height: 100vh; display: grid; grid-template-columns: 16rem 1fr; }
.sidebar {
  position: relative;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--line);
  background: white;
  color: var(--ink);
}
.sidebar-collapse {
  position: absolute;
  z-index: 2;
  top: 1.45rem;
  right: -.95rem;
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  padding: 0 0 .18rem;
  border: 1px solid #e5cecc;
  border-radius: 50%;
  background: white;
  color: var(--teal-dark);
  box-shadow: 0 5px 16px rgba(67,48,51,.14);
  font-size: 1.35rem;
  line-height: 1;
}
.sidebar-collapse:hover { border-color: var(--accent); background: var(--teal-pale); }
#portal-sidebar-content { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.sidebar-navigation-scroll { min-height: 0; }
.sidebar-brand { display: grid; gap: .35rem; width: 100%; padding: 0 .4rem 1.35rem; border: 0; background: transparent; text-align: left; }
.sidebar-brand:hover .sidebar-logo { opacity: .82; }
.sidebar-brand:focus-visible { outline: 3px solid rgba(165,89,89,.3); outline-offset: 3px; border-radius: var(--ui-radius); }
.sidebar-logo { display: block; width: min(100%, 12.5rem); height: auto; }
.sidebar-logo-compact { display: none; color: var(--ink) !important; font-size: 1.35rem !important; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.sidebar-brand span { color: var(--ink-soft); font-size: .72rem; }
.module-picker { gap: .45rem; padding: 0 .4rem; margin-top: .95rem; }
.module-picker > span, .customer-context-picker > span, .global-navigation > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.module-picker select { font-weight: 750; }
.module-status { align-self: flex-start; margin: .6rem .4rem 1rem; }
.customer-context-picker { gap: .45rem; padding: 0 .4rem; margin-top: 1.2rem; }
.customer-context-picker select { font-weight: 700; }
.customer-context-divider { margin: 1.25rem .4rem 1.35rem; border-top: 1px solid var(--line); }
.sidebar nav { display: grid; gap: .35rem; }
.module-nav { min-height: 0; align-content: start; }
.global-navigation { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.global-navigation > p { padding: 0 .4rem .55rem; }
.nav-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: .78rem .9rem;
  border: 0;
  border-radius: var(--ui-radius);
  color: var(--ink-soft);
  background: transparent;
  text-align: left;
}
.nav-item:hover, .nav-item.active { color: var(--ink); background: var(--teal-pale); }
.nav-item.active { box-shadow: inset 3px 0 var(--accent); }
.nav-item .nav-icon { width: 1.3rem; text-align: center; color: var(--teal); }
.nav-item .nav-label { width: auto; color: inherit; text-align: left; }
.sidebar-footer-meta { display: grid; gap: .45rem; margin-top: auto; }
.sidebar-status { display: flex; align-items: center; gap: .7rem; width: 100%; margin-top: 0; padding: 1rem .4rem 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink-soft); text-align: left; font-size: .72rem; }
.sidebar-status:hover { color: var(--ink); }
.sidebar-status.active { color: var(--ink); }
.portal-version { padding-left: 1.5rem; color: var(--ink-soft); font-size: var(--font-xs); }
.portal-status-dot { flex: 0 0 auto; width: .55rem; height: .55rem; border-radius: 50%; }
.portal-status-dot.operational { background: #2d6b46; box-shadow: 0 0 0 4px rgba(45,107,70,.12); }
.portal-status-dot.warning { background: #c27a00; box-shadow: 0 0 0 4px rgba(194,122,0,.13); }
.portal-status-dot.unavailable { background: var(--red); box-shadow: 0 0 0 4px rgba(154,73,62,.13); }
.portal-status-summary { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.portal-status-summary.operational { border-color: #b8d7c3; background: #f1f8f3; }
.portal-status-summary.warning { border-color: #e5ba61; background: #fffaf0; }
.portal-status-summary.unavailable { border-color: #e6a5a5; background: #fff2f2; }
.portal-status-summary .portal-status-dot { width: .75rem; height: .75rem; }
.portal-status-summary strong { display: block; margin-bottom: .2rem; }
.portal-status-summary p { margin: 0; color: var(--ink-soft); }
.portal-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.portal-status-component { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; padding: 1rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.portal-status-component .portal-status-dot { margin-top: .35rem; }
.portal-status-component strong { display: block; margin-bottom: .25rem; }
.portal-status-component p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.module-data-table tr.blocked-row td { background: #fff8ed; color: var(--ink-soft); }
.integration-monitor-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.integration-monitor-summary-card { display: grid; gap: .2rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.integration-monitor-summary-card strong { font-size: 1.7rem; line-height: 1; }
.integration-monitor-summary-card span { color: var(--ink-soft); font-size: .82rem; font-weight: 700; }
.integration-monitor-summary-card.attention { border-color: #e6a5a5; background: #fff6f4; }
.integration-monitor-summary-card.waiting { border-color: #e5ba61; background: #fffaf0; }
.integration-monitor-summary-card.healthy { border-color: #b8d7c3; background: #f1f8f3; }
.integration-monitor-heading { align-items: end; gap: 1rem; }
.integration-monitor-filters { display: flex; flex-wrap: wrap; gap: .65rem; }
.integration-monitor-filters label { display: grid; gap: .25rem; min-width: 10rem; color: var(--ink-soft); font-size: .75rem; font-weight: 700; }
.integration-monitor-filters select { min-width: 10rem; }
.integration-monitor-table td { vertical-align: top; }
.integration-monitor-table tr.attention-row td { background: #fffaf8; }
.integration-monitor-customer, .integration-monitor-source, .integration-monitor-status, .integration-monitor-open { display: table-cell; }
.integration-monitor-customer strong, .integration-monitor-source strong, .integration-monitor-open strong { display: block; }
.integration-monitor-customer small, .integration-monitor-source small, .integration-monitor-status small, .integration-monitor-open small { display: block; margin-top: .2rem; color: var(--ink-soft); white-space: normal; }
.integration-monitor-receipt span, .integration-monitor-receipt small { display: block; white-space: nowrap; }
.integration-monitor-receipt small { margin-top: .2rem; color: var(--ink-soft); }
.integration-monitor-status { min-width: 15rem; max-width: 22rem; }
.integration-monitor-status .status-pill { width: max-content; }
.integration-monitor-actions .button { white-space: nowrap; }
.integration-monitor-source-note { display: grid; gap: .25rem; margin-top: 1rem; padding: .8rem 1rem; border-left: 3px solid #e5ba61; background: #fffaf0; color: var(--ink-soft); font-size: .82rem; line-height: 1.5; }
.integration-monitor-source-note strong { color: var(--ink); }
.workspace { min-width: 0; }
.local-auth-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 2.65rem;
  padding: .55rem 1rem;
  border-bottom: 1px solid #b75b54;
  background: #8e2f2a;
  color: white;
  font-size: .78rem;
  line-height: 1.35;
  text-align: center;
}
.local-auth-warning strong { font-family: var(--font-ui); letter-spacing: .045em; text-transform: uppercase; }
.portal-shell { transition: grid-template-columns .2s ease; }
body.sidebar-collapsed .portal-shell { grid-template-columns: 5.25rem 1fr; }
body.sidebar-collapsed .sidebar { padding-left: .7rem; padding-right: .7rem; }
body.sidebar-collapsed .sidebar-brand { justify-items: center; padding-left: 0; padding-right: 0; }
body.sidebar-collapsed .sidebar-logo { display: none; }
body.sidebar-collapsed .sidebar-logo-compact { display: block; }
body.sidebar-collapsed .module-picker,
body.sidebar-collapsed .customer-context-picker,
body.sidebar-collapsed .customer-context-divider,
body.sidebar-collapsed .module-status,
body.sidebar-collapsed .sidebar-status .nav-label { display: none; }
body.sidebar-collapsed .sidebar-status { justify-content: center; padding-left: 0; padding-right: 0; }
body.sidebar-collapsed .portal-version { padding-left: 0; text-align: center; }
body.sidebar-collapsed .nav-item { justify-content: center; gap: 0; padding-left: .45rem; padding-right: .45rem; }
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .global-navigation > p { display: none; }
body.sidebar-collapsed .nav-icon { width: auto; font-size: 1.05rem; }
body.sidebar-collapsed .global-navigation { margin-top: 1rem; padding-top: .8rem; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 6.7rem;
  padding: 1.4rem clamp(1.3rem, 4vw, 3rem);
  background: white;
  border-bottom: 1px solid var(--line);
}
.topbar h1 { margin: 0; font: 500 1.75rem var(--font-ui); }
.topbar-actions { display: flex; align-items: center; gap: .85rem; }
.topbar-mail-button {
  position: relative;
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: white;
  color: var(--ink);
}
.topbar-mail-button:hover,
.topbar-mail-button.active { border-color: #d9b9b6; background: var(--teal-pale); color: var(--teal-dark); }
.topbar-mail-button:focus-visible { outline: 3px solid rgba(165,89,89,.3); outline-offset: 2px; }
.topbar-mail-button svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.topbar-mail-badge {
  position: absolute;
  top: -.45rem;
  right: -.5rem;
  display: grid;
  min-width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  padding: 0 .28rem;
  border: 2px solid white;
  border-radius: 999px;
  background: var(--red);
  color: white;
  font-size: .65rem;
  font-weight: 800;
  line-height: 1;
}
.view-actions { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.view-intro { margin: 0 0 1.2rem; color: var(--ink-soft); line-height: 1.65; }
.bank-period-export-card { display: grid; grid-template-columns: minmax(18rem, 1fr) repeat(2, minmax(9rem, .42fr)) auto; gap: 1rem; align-items: end; margin-bottom: 1.25rem; padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.bank-period-export-card > div { grid-column: 1 / -1; }
.bank-period-export-card h3 { margin: .15rem 0 .35rem; font: 500 1.3rem var(--font-ui); }
.bank-period-export-card p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.bank-period-export-card label { display: grid; gap: .35rem; color: var(--ink-soft); font-size: var(--font-sm); font-weight: 750; }
.bank-period-export-availability { grid-column: 1 / 2; max-width: 34rem; color: var(--ink-soft); font-size: var(--font-sm); font-weight: 500; line-height: 1.4; }
.bank-period-date-field { position: relative; display: block; min-width: 0; }
.bank-period-date-field > input { width: 100%; padding-right: 2.75rem; }
.bank-period-date-calendar { position: absolute; right: .25rem; top: .25rem; bottom: .25rem; display: grid; place-items: center; width: 2rem; color: var(--ink-soft); }
.bank-period-date-calendar svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.bank-period-date-calendar input { position: absolute; inset: 0; width: 100%; height: 100% !important; min-height: 0 !important; padding: 0; opacity: 0; cursor: pointer; }
.bank-period-date-calendar input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; margin: 0; cursor: pointer; }
.bank-period-date-calendar:focus-within { outline: 3px solid rgba(165,89,89,.3); outline-offset: 2px; }
.bank-period-export-info { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: -.3rem 0; padding: 0; border: 0; background: transparent; color: var(--teal-dark); vertical-align: middle; cursor: pointer; }
.bank-period-export-info > span { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border: 1px solid currentColor; border-radius: 50%; font-size: .8rem; font-weight: 750; line-height: 1; }
.bank-period-export-info:hover, .bank-period-export-info[aria-expanded="true"] { background: var(--teal-pale); }
.bank-period-export-info:focus-visible { outline: 3px solid rgba(165,89,89,.3); outline-offset: 2px; }
.bank-period-export-info-text { display: block; margin-top: .65rem; padding: .75rem; border: 1px solid var(--line); border-left: 3px solid var(--teal); background: var(--teal-pale); overflow-wrap: anywhere; }
.bank-period-export-card .message { grid-column: 1 / -1; }
.account-menu { position: relative; }
.user-chip { display: flex; gap: .65rem; align-items: center; min-height: 2.8rem; padding: .25rem .45rem .25rem .9rem; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; border-radius: var(--ui-radius); }
.user-chip:hover, .user-chip[aria-expanded="true"] { background: var(--teal-pale); }
.user-chip-copy { display: grid; }
.account-menu-chevron { color: var(--ink-soft); font-size: .9rem; transition: transform .15s ease; }
.user-chip[aria-expanded="true"] .account-menu-chevron { transform: rotate(180deg); }
.account-menu-popover { position: absolute; z-index: 30; top: calc(100% + .55rem); right: 0; display: grid; width: 13.5rem; padding: .45rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; box-shadow: var(--shadow); }
.account-menu-item { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 2.55rem; padding: .6rem .75rem; border: 0; border-radius: var(--ui-radius); background: transparent; color: var(--ink); text-align: left; }
.account-menu-item:hover { background: var(--teal-pale); }
.account-menu-item > span:first-child { width: 1.2rem; color: var(--teal); text-align: center; }
.account-menu-item.logout { margin-top: .3rem; border-top: 1px solid var(--line); border-radius: 0 0 var(--ui-radius) var(--ui-radius); color: var(--red); }
.account-page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.account-access-card { grid-column: 1 / -1; }
.account-details { display: grid; gap: 0; margin: 1.2rem 0 0; }
.account-details div { display: grid; grid-template-columns: minmax(7rem, .45fr) 1fr; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.account-details dt { color: var(--ink-soft); }
.account-details dd { margin: 0; font-weight: 750; overflow-wrap: anywhere; }

.webmail-view { min-width: 0; }
.webmail-connect-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, .8fr);
  gap: 2rem;
  align-items: center;
  max-width: 64rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid #eadfdd;
  border-radius: var(--ui-radius);
  background: linear-gradient(135deg, #fff 0%, var(--teal-pale) 100%);
}
.webmail-connect-card h2 { margin: .25rem 0 .6rem; font: 500 var(--font-2xl) var(--font-ui); }
.webmail-connect-card p:not(.eyebrow) { color: var(--ink-soft); line-height: 1.65; }
.webmail-connect-form { display: grid; gap: .85rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: rgba(255,255,255,.9); }
.webmail-connect-form .message { margin-top: 0; }
.webmail-workspace { min-width: 0; }
.webmail-toolbar {
  display: flex;
  align-items: end;
  gap: .75rem;
  margin-bottom: 1rem;
}
.webmail-mailbox-identity { display: grid; min-width: 12rem; margin-right: auto; }
.webmail-mailbox-identity span { color: var(--ink-soft); font-size: var(--font-sm); }
.webmail-search-form { display: flex; gap: .45rem; min-width: min(24rem, 35vw); }
.webmail-search-form input { min-width: 0; }
.webmail-search-form .button { min-height: 40px; padding-block: .45rem; }
.webmail-layout {
  display: grid;
  grid-template-columns: var(--webmail-folders-width, 210px) 6px var(--webmail-list-width, 360px) 6px minmax(24rem, 1fr);
  min-height: 40rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: white;
  box-shadow: 0 8px 28px rgba(82,55,55,.04);
}
.webmail-layout.folders-collapsed { grid-template-columns: 0 0 var(--webmail-list-width, 360px) 6px minmax(24rem, 1fr); }
.webmail-folders { display: flex; min-width: 0; grid-column: 1; flex-direction: column; padding: 1rem .75rem; border-right: 1px solid var(--line); background: #faf9f7; overflow: hidden; }
.webmail-layout.folders-collapsed .webmail-folders, .webmail-layout.folders-collapsed #webmail-folders-resizer { display: none; }
.webmail-folder-heading { display: flex; min-height: 2.5rem; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .25rem .6rem .7rem; }
.webmail-folder-heading .icon-button { min-width: 2.2rem; min-height: 2.2rem; }
.webmail-folder-create-form { display: grid; gap: .35rem; margin: 0 .25rem .75rem; padding: .65rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.webmail-folder-create-form[hidden] { display: none; }
.webmail-folder-create-form label { color: var(--ink-soft); font-size: var(--font-xs); font-weight: 750; }
.webmail-folder-create-form > div { display: flex; gap: .35rem; }
.webmail-folder-create-form input { min-width: 0; }
.webmail-folder-create-form .button { min-height: 2.5rem; padding: .4rem .6rem; }
.webmail-folders nav { display: grid; gap: .25rem; }
.webmail-folder-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  min-height: 2.6rem;
  padding: .55rem .7rem;
  border: 0;
  border-radius: var(--ui-radius);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.webmail-folder-button:hover { background: white; }
.webmail-folder-button.active { background: var(--teal-pale); color: var(--teal-dark); font-weight: 750; }
.webmail-folder-button.drop-target { outline: 2px dashed var(--teal); outline-offset: -3px; }
.webmail-folder-button.drag-over { background: var(--teal-pale); outline-style: solid; }
.webmail-folder-button span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.webmail-folder-button strong { display: grid; min-width: 1.35rem; height: 1.35rem; place-items: center; padding: 0 .25rem; border-radius: 999px; background: white; font-size: .7rem; }
.webmail-disconnect { margin-top: auto; padding: .65rem; color: var(--red); text-align: left; }
.webmail-column-resizer { position: relative; z-index: 2; width: 6px; background: #f4f1ef; cursor: col-resize; touch-action: none; }
.webmail-column-resizer::after { position: absolute; inset: 0 2px; background: transparent; content: ""; transition: background .15s ease; }
.webmail-column-resizer:hover::after, .webmail-column-resizer:focus-visible::after { background: var(--teal); }
#webmail-folders-resizer { grid-column: 2; }
#webmail-list-resizer { grid-column: 4; }
.webmail-resizing { cursor: col-resize; user-select: none; }
.webmail-list-panel { min-width: 0; grid-column: 3; border-right: 1px solid var(--line); }
.webmail-list-heading { display: flex; align-items: end; justify-content: space-between; gap: .7rem; min-height: 5.25rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.webmail-list-heading h2 { margin: .18rem 0 0; font: 500 var(--font-lg) var(--font-ui); }
.webmail-message-list { display: grid; max-height: 47rem; overflow-y: auto; }
.webmail-message-row {
  display: grid;
  grid-template-columns: .5rem minmax(0, 1fr) auto;
  gap: .7rem;
  width: 100%;
  min-height: 6rem;
  padding: .9rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: white;
  color: var(--ink);
  text-align: left;
}
.webmail-message-row:hover { background: #fdfafa; }
.webmail-message-row.dragging { opacity: .45; }
.webmail-message-row.active { background: var(--teal-pale); }
.webmail-message-row:not(.read) { background: #fffaf4; }
.webmail-message-row:not(.read) .webmail-row-subject { font-weight: 800; }
.webmail-message-row .webmail-unread-dot { width: .5rem; height: .5rem; margin-top: .35rem; border-radius: 50%; background: transparent; }
.webmail-message-row:not(.read) .webmail-unread-dot { background: var(--red); }
.webmail-row-copy { display: grid; min-width: 0; align-content: start; gap: .24rem; }
.webmail-row-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.webmail-row-sender { font-weight: 700; }
.webmail-row-subject { color: var(--ink-soft); font-size: var(--font-sm); }
.webmail-row-date { color: var(--ink-soft); font-size: var(--font-xs); white-space: nowrap; }
.webmail-row-icons { color: var(--ink-soft); font-size: var(--font-sm); }
.webmail-load-more { display: flex; margin: 1rem auto; }
.webmail-detail { min-width: 0; grid-column: 5; background: white; }
.webmail-detail-empty { display: grid; min-height: 38rem; place-content: center; justify-items: center; padding: 2rem; color: var(--ink-soft); text-align: center; }
.webmail-detail-empty > span { font-size: 2.2rem; }
.webmail-detail-empty h2 { margin: .75rem 0 .3rem; color: var(--ink); font: 500 var(--font-lg) var(--font-ui); }
.webmail-detail-empty p { max-width: 30rem; line-height: 1.55; }
.webmail-detail-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.4rem .8rem; }
.webmail-detail-heading h2 { margin: .3rem 0 .4rem; font: 500 var(--font-xl) var(--font-ui); overflow-wrap: anywhere; }
.webmail-detail-heading p { margin: 0; }
.webmail-detail-address { font-weight: 750; }
.webmail-detail-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: .45rem; }
.webmail-detail-actions .button { min-height: 2.4rem; padding: .5rem .75rem; }
.webmail-detail-actions .danger { color: var(--red); }
.webmail-detail-to { padding: 0 1.4rem .8rem; color: var(--ink-soft); font-size: var(--font-sm); overflow-wrap: anywhere; }
.webmail-attachments { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem 1.4rem; border-block: 1px solid var(--line); background: #fafbf9; }
.webmail-attachment-link { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; color: var(--ink); text-decoration: none; }
.webmail-body-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; padding: .7rem 1.4rem; border-top: 1px solid var(--line); background: #faf9f7; }
.webmail-body-controls .button { min-height: 2.25rem; padding: .42rem .65rem; }
.webmail-body-controls .muted { flex: 1 1 18rem; font-size: var(--font-xs); }
.webmail-detail-html { display: block; width: 100%; min-height: 38rem; border: 0; background: white; }
.webmail-detail-body { min-height: 20rem; margin: 0; padding: 1.5rem 1.4rem 3rem; overflow: auto; color: var(--ink); font: 400 var(--font-base)/1.65 var(--font-ui); overflow-wrap: anywhere; white-space: pre-wrap; }
.webmail-compose { max-width: 58rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; box-shadow: var(--shadow); }
.webmail-compose-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.webmail-compose-heading h2 { margin: .2rem 0 0; font: 500 var(--font-xl) var(--font-ui); }
.webmail-compose form { display: grid; gap: .85rem; padding-top: 1rem; }
.webmail-compose-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.webmail-compose textarea { min-height: 16rem; resize: vertical; padding: .8rem; border: 1px solid #ded9d7; border-radius: var(--ui-radius); background: #fcfaf9; color: var(--ink); font: inherit; outline: none; }
.webmail-compose textarea:focus-visible { border-color: var(--teal); outline: 3px solid rgba(165,89,89,.55); outline-offset: 2px; }
.webmail-settings textarea { min-height: 10rem; }
.webmail-settings-checkbox { display: flex; align-items: start; gap: .65rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); font-weight: 650; line-height: 1.45; }
.webmail-settings-checkbox input { width: auto; margin-top: .2rem; }
.webmail-compose input[type="file"] { height: auto; min-height: 2.8rem; }
.webmail-compose-to > .muted { margin-top: .45rem; font-size: var(--font-xs); }
.webmail-colleague-choices { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.webmail-colleague-choice { min-height: 2rem; padding: .3rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: #faf9f7; color: var(--ink); font-size: var(--font-xs); }
.webmail-colleague-choice:hover { border-color: var(--teal); background: var(--teal-pale); }
.webmail-compose-original { overflow: hidden; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #faf9f7; }
.webmail-compose-original summary { padding: .75rem .85rem; cursor: pointer; color: var(--ink); font-weight: 750; }
.webmail-compose-original[open] summary { border-bottom: 1px solid var(--line); }
.webmail-compose-original .muted { margin: 0; padding: .75rem .85rem 0; font-size: var(--font-xs); }
.webmail-compose-original pre { max-height: 22rem; margin: 0; padding: .75rem .85rem 1rem; overflow: auto; color: var(--ink-soft); font: 400 var(--font-sm)/1.55 var(--font-ui); white-space: pre-wrap; overflow-wrap: anywhere; }
.webmail-compose-actions { display: flex; gap: .65rem; }
.webmail-autosave-status { min-height: 1.25rem; margin: 0; font-size: var(--font-xs); }
.webmail-compose .message { margin-top: 0; }
.account-security-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1.2rem 0; }
.account-security-facts p { margin: 0; padding: .85rem; border-radius: var(--ui-radius); background: var(--surface-soft); }
.account-security-facts strong, .account-security-facts span { display: block; }
.account-security-facts span { margin-top: .25rem; color: var(--ink-soft); font-size: var(--font-sm); line-height: 1.4; }
.account-signature-form { display: grid; gap: .85rem; margin-top: 1rem; }
.document-generator-type-list, .document-generator-editor { display: grid; gap: 1rem; }
.document-generator-type-filter { display: grid; max-width: 42rem; gap: .4rem; color: var(--ink); font-weight: 750; }
.document-generator-type-filter input { width: 100%; }
.document-generator-type-filter + .muted { min-height: 1.4em; margin: -.35rem 0 0; }
.document-generator-editor .module-card {
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: white;
}
.document-generator-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: .875rem; }
.document-generator-type-card[hidden] { display: none; }
.document-generator-type-card {
  appearance: none;
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: .85rem 1rem;
  width: 100%;
  min-height: 10rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: white;
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(69, 53, 55, .055);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.document-generator-type-card:hover { border-color: #d9b9b6; background: #fffafa; box-shadow: 0 14px 30px rgba(69, 53, 55, .08); }
.document-generator-type-card:focus-visible { outline: 3px solid rgba(165, 89, 89, .3); outline-offset: 2px; }
.document-generator-type-image { display: block; width: 5.25rem; height: 5.25rem; object-fit: cover; border: 1px solid var(--line); background: white; }
.document-generator-type-letter-mark { display: grid; width: 5.25rem; height: 5.25rem; place-items: center; border: 1px solid var(--line); background: var(--rose-pale); color: var(--red); font: 800 1.5rem/1 var(--font-ui); }
.document-generator-forecast-image { object-fit: contain; }
.document-generator-type-copy { display: grid; align-content: start; gap: .3rem; }
.document-generator-type-copy > strong { font-size: var(--font-lg); font-weight: 600; line-height: 1.3; }
.document-generator-type-copy > small { color: var(--ink-soft); line-height: 1.5; }
.document-generator-type-action { grid-column: 2; align-self: end; color: var(--teal-dark); font-size: var(--font-sm); font-weight: 700; }
.document-generator-history-group { display: grid; gap: 1rem; }
.document-generator-history-group + .document-generator-history-group { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.document-generator-forecast-completed-heading { margin-top: .75rem; }
.document-generator-editor-navigation { display: flex; justify-content: flex-start; }
.document-generator-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 1.25rem; align-items: start; }
.objection-generator-layout { grid-template-columns: minmax(0, 1.15fr) minmax(25rem, .85fr); }
.objection-generator-layout:has(.objection-source-preview[hidden]) { grid-template-columns: minmax(0, 1fr); }
.document-generator-form { display: grid; gap: 1rem; }
#document-upload-form .module-card { min-width: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface); }
#document-upload-form h2 { margin: 0 0 .75rem; }
#document-upload-form .document-generator-confirm { display: flex; align-items: flex-start; gap: .65rem; }
#document-upload-form input[type="checkbox"] { width: 1rem; height: 1rem; min-height: 1rem; padding: 0; flex: 0 0 1rem; }
#document-upload-proposals { flex-wrap: wrap; justify-content: flex-start; }
#document-upload-proposals button { max-width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; }
#document-generator-type-uploaded { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface); }
#private-payment-form .module-card { min-width: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface); }
#private-payment-form .document-generator-check { display: flex; align-items: flex-start; gap: .6rem; }
#private-payment-form input[type="checkbox"] { width: 1rem; height: 1rem; min-height: 1rem; padding: 0; flex: 0 0 1rem; }
#private-payment-fields { min-width: 0; }
#dga-salary-form .module-card { min-width: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface); }
#start-registration-form .module-card { min-width: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface); }
#start-registration-form .document-generator-check { display: flex; align-items: flex-start; gap: .6rem; }
#start-registration-form input[type="checkbox"] { width: 1rem; height: 1rem; min-height: 1rem; padding: 0; flex: 0 0 1rem; }
#start-registration-form textarea { width: 100%; min-height: 6rem; resize: vertical; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface); color: var(--ink); padding: .68rem .72rem; font: inherit; }
#start-registration-form textarea:focus-visible { border-color: var(--teal); outline: 3px solid rgba(165,89,89,.35); outline-offset: 2px; }
#dga-salary-form textarea { width: 100%; min-height: 8rem; resize: vertical; border: 1px solid #d9d2d0; border-radius: var(--ui-radius); background: #fcfaf9; color: var(--ink); padding: .68rem .72rem; font: 400 .95rem/1.5 var(--font-ui); }
#dga-salary-form textarea:focus-visible { border-color: var(--teal); outline: 3px solid rgba(165,89,89,.35); outline-offset: 2px; }
#dga-salary-form .document-generator-check { display: flex; align-items: flex-start; gap: .6rem; }
#dga-salary-additional-reasons { display: grid; gap: 0.6rem; }
#dga-salary-form input[type="checkbox"] { width: 1rem; height: 1rem; min-height: 1rem; padding: 0; flex: 0 0 1rem; }
.document-generator-intro h2, .document-generator-safety h3 { margin: .15rem 0 .45rem; }
.document-generator-intro p:last-child { margin-bottom: 0; }
.document-generator-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; margin: 0; }
.document-generator-fields legend { padding: 0 .35rem; color: var(--ink); font-weight: 800; }
.document-generator-fields label { display: grid; gap: .35rem; color: var(--ink-soft); font-size: var(--font-sm); font-weight: 750; }
.document-generator-fields label small { font-weight: 500; }
.document-generator-fields textarea { resize: vertical; }
.standard-letter-editor-fields textarea { min-height: 22rem; font: 400 1rem/1.6 var(--font-ui); }
.standard-letter-sender { display: grid; gap: .25rem; padding: .85rem 1rem; border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink-soft); }
.standard-letter-sender strong { color: var(--ink); }
.document-generator-form label:has(> input[type="radio"]) {
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: start;
  column-gap: .55rem;
  row-gap: .2rem;
}
.document-generator-form label:has(> input[type="radio"]) > input[type="radio"] {
  grid-column: 1;
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  min-height: 1rem;
  margin: .1rem 0 0;
  padding: 0;
  accent-color: var(--teal);
}
.document-generator-form label:has(> input[type="radio"]) > small { grid-column: 2; }
.document-generator-address-grid { display: grid; grid-template-columns: minmax(10rem, 2fr) minmax(6rem, .7fr) minmax(6rem, .7fr); gap: .9rem 1rem; }
.payment-arrangement-layout { align-items: start; }
.payment-arrangement-table-wrap { overflow-x: auto; padding-bottom: .35rem; }
.payment-arrangement-periods { min-width: 42rem; }
.payment-arrangement-liquidity { min-width: 82rem; }
.payment-arrangement-periods th:first-child,
.payment-arrangement-liquidity th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 13rem; text-align: left; }
.payment-arrangement-periods input { min-width: 7rem; }
.payment-arrangement-liquidity input { min-width: 5.6rem; padding: .55rem .45rem; text-align: right; }
.payment-arrangement-repeat-list { display: grid; gap: .8rem; }
.payment-arrangement-repeat-item { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.payment-arrangement-repeat-item .payment-arrangement-remove-row { justify-self: start; }
.payment-arrangement-details { border-top: 1px solid var(--line); padding-top: .85rem; }
.payment-arrangement-details summary { cursor: pointer; font-weight: 700; }
.payment-arrangement-details[open] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.payment-arrangement-details[open] summary,
.payment-arrangement-details[open] > p { grid-column: 1 / -1; }
.payment-arrangement-details textarea { min-height: 7.5rem; }
.payment-arrangement-forecast-actions { display: grid; grid-template-columns: auto minmax(16rem, 1fr) auto; gap: .8rem; align-items: end; padding: 1rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.payment-arrangement-forecast-actions label { margin: 0; }
.document-generator-upload-section input[type="file"] { padding: .7rem; background: rgba(255,255,255,.72); }
.document-page-editor-intro p { margin: 0 0 .45rem; }
.document-page-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .8rem; align-items: stretch; }
.document-page-card { display: grid; align-content: start; gap: .55rem; min-width: 0; padding: .65rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); cursor: grab; }
.document-page-card.is-locked { cursor: default; background: #f0f5f2; }
.document-page-card.is-dragging { opacity: .48; }
.document-page-card.is-drag-target { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31, 78, 66, .12); }
.document-page-card strong, .document-page-card small { display: block; overflow: hidden; text-overflow: ellipsis; }
.document-page-card small { color: var(--ink-soft); line-height: 1.35; }
.document-page-thumbnail { display: grid; width: 100%; height: 10rem; place-items: center; overflow: hidden; border: 1px solid #cfd5d1; border-radius: var(--ui-radius); background: #e4e8e5; }
.document-page-thumbnail img { display: block; max-width: 88%; max-height: 88%; object-fit: contain; transform: rotate(var(--page-rotation, 0deg)) scale(var(--page-rotation-scale, 1)); transition: transform .16s ease; box-shadow: 0 .35rem .9rem rgba(26, 38, 34, .18); }
.document-page-letter-thumbnail { background: linear-gradient(145deg, #fff, #eef2ef); color: var(--teal-dark); font-size: 1.15rem; font-weight: 850; }
.document-page-controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; }
.document-page-controls button { min-width: 0; min-height: 2.25rem; padding: .3rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fff; color: var(--ink); font-weight: 800; cursor: pointer; }
.document-page-controls button:disabled { cursor: default; opacity: .42; }
.document-page-orientation { width: fit-content; padding: .18rem .45rem; border-radius: 999px; background: #e3f1ec; color: #155f4e; font-size: .7rem; font-weight: 800; }
.document-page-orientation.needs-review { background: #fff0cf; color: #875d00; }
.ocr-proposal-badge { display: inline-flex; align-items: center; width: fit-content; padding: .18rem .48rem; border-radius: 999px; background: #e3f1ec; color: #155f4e; font-size: .72rem; font-weight: 800; }
.ocr-proposal-badge.needs-review { background: #fff0cf; color: #875d00; }
.document-generator-wide, .document-generator-checks { grid-column: 1 / -1; }
.document-generator-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.document-generator-checks label { display: flex; align-items: center; gap: .55rem; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.document-generator-checks input, .document-generator-confirm input { width: auto; }
.document-generator-signer { display: grid; gap: .2rem; padding: .8rem; border-radius: var(--ui-radius); background: var(--surface-soft); }
.document-generator-signer span { color: var(--ink-soft); font-size: var(--font-sm); }
.document-generator-confirm { display: flex; align-items: flex-start; gap: .7rem; line-height: 1.5; }
.document-generator-confirm input { margin-top: .25rem; flex: 0 0 auto; }
.document-generator-aside { position: sticky; top: 1rem; display: grid; gap: 1rem; }
.objection-source-preview { display: grid; gap: .75rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fff; }
.objection-source-preview[hidden] { display: none; }
.objection-source-preview-heading { display: flex; align-items: start; justify-content: space-between; gap: .75rem; }
.objection-source-preview-heading h3, .objection-source-preview-heading p { margin: 0; }
.objection-source-preview-controls { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: .35rem; align-items: center; }
.objection-source-preview-controls strong { text-align: center; font-size: var(--font-sm); }
.objection-source-preview-controls button { min-width: 2.25rem; min-height: 2.25rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; color: var(--ink); font-weight: 850; cursor: pointer; }
.objection-source-preview-controls button:disabled { opacity: .4; cursor: default; }
.objection-source-preview-scroll { max-height: 65vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #dce1de; overscroll-behavior: contain; }
.objection-source-preview-stage { position: relative; width: 100%; margin: 0 auto; user-select: none; }
.objection-source-preview-stage canvas { display: block; width: 100%; height: auto; background: white; }
.objection-source-preview-regions { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.objection-source-preview-region { position: absolute; padding: 0; border: 1px solid transparent; background: transparent; color: transparent; cursor: pointer; }
.objection-source-preview-region:hover, .objection-source-preview-region:focus-visible { border-color: #1478cc; background: rgba(20,120,204,.16); outline: none; }
.objection-source-preview-region.is-selected { border-color: #b13a3a; background: rgba(225,91,91,.22); }
.objection-source-preview-selection { position: absolute; z-index: 3; border: 2px solid #b13a3a; background: rgba(225,91,91,.12); pointer-events: none; }
.objection-source-mapping { display: grid; gap: .65rem; padding: .7rem; border: 1px solid #d8c8c6; border-radius: var(--ui-radius); background: #fff8f6; }
.objection-source-mapping label { display: grid; gap: .3rem; color: var(--ink-soft); font-size: var(--font-sm); font-weight: 750; }
.objection-source-mapping textarea { resize: vertical; }
.objection-source-mapping .view-actions { gap: .4rem; }
.objection-source-preview-privacy { margin: 0; color: var(--ink-soft); font-size: var(--font-xs); line-height: 1.5; }
.document-page-thumbnail-open { width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.document-page-thumbnail-open img { margin: auto; }
.document-generator-template-card { width: 100%; padding: 1rem; border: 1px solid var(--line); color: var(--ink); text-align: left; cursor: pointer; }
.document-generator-template-card:hover { border-color: var(--teal); box-shadow: 0 .75rem 1.8rem rgba(31, 78, 66, .12); transform: translateY(-1px); }
.document-generator-template-card > span, .document-generator-template-card > strong, .document-generator-template-card > small { display: block; }
.document-generator-template-card > strong { margin-top: .8rem; font-size: 1rem; }
.document-generator-template-card > small { margin-top: .2rem; color: var(--ink-soft); }
.document-generator-template-canvas { display: grid !important; min-height: 12rem; margin-top: .65rem; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #e5e8e5; }
.document-generator-template-canvas canvas { display: block; width: 100%; height: auto; background: #fff; }
.document-generator-safety ul { margin: .75rem 0 0; padding-left: 1.2rem; color: var(--ink-soft); line-height: 1.6; }
.bol-preview-body.document-generator-pdf-pages { display: grid; min-height: 0; gap: 1rem; align-content: start; justify-items: center; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; touch-action: pan-y; }
.document-generator-pdf-pages canvas { display: block; width: min(100%, 68rem); height: auto; flex: 0 0 auto; border: 1px solid #cfd5d1; border-radius: var(--ui-radius); background: #fff; box-shadow: 0 .6rem 1.5rem rgba(26, 38, 34, .14); }
.document-generator-postal-dialog { width: min(46rem, calc(100% - 2rem)); }
.document-generator-postal-address, .document-generator-postal-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.document-generator-postal-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.document-generator-postal-address label, .document-generator-postal-options label { display: grid; gap: .35rem; color: var(--ink-soft); font-weight: 750; }
.document-generator-postal-options .document-generator-postal-date { grid-column: 1 / -1; }
.document-generator-postal-date input { width: min(100%, 18rem); }
.document-generator-postal-date small { color: var(--ink-soft); font-weight: 500; }
.account-signature-form label { display: grid; gap: .35rem; color: var(--ink-soft); font-size: var(--font-sm); font-weight: 750; }
.account-signature-form input { width: 100%; }
.account-signature-form input[type="file"] { min-height: 2.9rem; padding: .55rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.account-signature-draw-option { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .75rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.account-signature-draw-option .muted { margin: 0; font-size: var(--font-sm); }
.account-signature-preview { display: grid; place-items: center; min-height: 7rem; padding: .8rem; border: 1px dashed var(--line); border-radius: var(--ui-radius); background: #fff; }
.account-signature-preview img { display: block; max-width: 100%; max-height: 6rem; object-fit: contain; }
.account-signature-form .compact-actions { justify-content: flex-start; padding: 0; border: 0; }
.account-signature-draw-dialog { width: min(44rem, calc(100% - 2rem)); }
.account-signature-draw-dialog .dialog-form > .muted { margin: 0; line-height: 1.55; }
.account-signature-canvas-frame { padding: .45rem; border: 1px solid #d8c8c6; border-radius: var(--ui-radius); background: #fff; box-shadow: inset 0 1px 3px rgba(48,45,45,.06); }
.account-signature-canvas-frame canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; border-radius: var(--ui-radius); background: linear-gradient(to bottom, transparent 72%, #eee7e5 72%, #eee7e5 calc(72% + 1px), transparent calc(72% + 1px)); cursor: crosshair; touch-action: none; user-select: none; }
.account-signature-canvas-frame canvas:focus-visible { outline: 3px solid rgba(165,89,89,.35); outline-offset: 3px; }
.account-signature-draw-actions { display: grid; grid-template-columns: auto 1fr auto auto; gap: .65rem; align-items: center; padding-top: .25rem; border-top: 1px solid var(--line); }
.account-module-access { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.account-module-access article { padding: .9rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.account-module-access strong, .account-module-access span { display: block; }
.account-module-access span { margin-top: .25rem; color: var(--ink-soft); }
.user-chip small { color: var(--ink-soft); }
.avatar { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--teal-pale); color: var(--teal-dark); font-weight: 800; }
.icon-button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: var(--ui-radius); color: var(--ink); background: white; font-size: 1.2rem; }
.content { padding: 1.8rem clamp(1.3rem, 4vw, 3rem) 4rem; }
.portal-home-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, .8fr);
  gap: 2rem;
  align-items: end;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid #eadfdd;
  border-radius: var(--ui-radius);
  background: linear-gradient(135deg, #fff 0%, var(--teal-pale) 100%);
}
.portal-home-intro h2 { margin: .25rem 0 .55rem; font: 500 var(--font-2xl) var(--font-ui); }
.portal-home-intro p:not(.eyebrow) { max-width: 42rem; margin: 0; color: var(--ink-soft); line-height: 1.65; }
.global-dossier-search { padding: 1rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: rgba(255,255,255,.82); }
.global-search-field { position: relative; display: block; }
.global-search-field > span { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--ink-soft); font-size: 1.1rem; }
.global-search-field input { padding-left: 2.25rem; background: white; }
.global-search-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1.8rem 0 .85rem; }
.global-search-heading h2 { margin: .2rem 0 0; font: 500 var(--font-lg) var(--font-ui); }
.global-search-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .65rem; }
.blocked-customer-toggle[aria-pressed="true"] { border-color: #946d15; background: #fff2d8; color: #6d4d09; }
.global-dossier-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.global-dossier-card { display: grid; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.blocked-customer-card { border-color: #d8b867; background: #fffaf0; }
.blocked-customer-card .status-pill.blocked { display: inline-flex; width: fit-content; margin-top: .7rem; background: #fff2d8; color: #6d4d09; }
.blocked-customer-note { color: #6d4d09 !important; font-weight: 650; }
.global-dossier-card h3 { margin: 0; font-size: var(--font-md); }
.global-dossier-card p { margin: .25rem 0 0; color: var(--ink-soft); font-size: var(--font-sm); }
.global-dossier-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.global-dossier-actions .button { min-height: 2.35rem; padding: .55rem .75rem; font-size: var(--font-sm); }
.global-search-note { margin: 1rem 0 0; color: var(--ink-soft); font-size: var(--font-sm); line-height: 1.55; }
.processing-summary { margin: 1rem 0 0; }
.processing-heading { margin-top: 1.8rem; }
.processing-table td:first-child { min-width: 15rem; }
.processing-file-copy { display: grid; gap: .25rem; }
.processing-file-copy small { color: var(--ink-soft); line-height: 1.4; }
.content > .message { margin: 0; }
.content > .message:not(:empty) { margin-bottom: 1.25rem; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.summary-card { position: relative; isolation: isolate; overflow: hidden; padding: 1.25rem 2.5rem 1.25rem 1.25rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.summary-card::after { content: ""; position: absolute; z-index: 0; right: -2.25rem; bottom: -2.75rem; width: 6rem; height: 6rem; border-radius: 50%; background: var(--blue-pale); pointer-events: none; }
.summary-card > * { position: relative; z-index: 1; }
.summary-card.alert::after { background: var(--orange-pale); }
.summary-card strong { display: block; margin-top: .45rem; font: 500 2rem var(--font-ui); }
.summary-card span { color: var(--ink-soft); font-size: .8rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem; }
.section-heading.compact { margin-top: 2.4rem; }
.section-heading h2, .section-heading h3 { margin: .2rem 0 0; font: 500 1.45rem var(--font-ui); }
.count-badge { color: #946d15; background: #fff2d8; }
.table-card { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.bank-files-section, .bank-history-section { min-width: 0; margin: 0 0 1.25rem; border: 1px solid var(--line); background: white; }
.bank-files-section-heading, .bank-files-footer, .bank-history-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; padding: 1rem; }
.bank-files-section-heading { border-bottom: 1px solid var(--line); }
.bank-files-section-heading h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.bank-files-section-heading p, .bank-history-toolbar p { margin: .25rem 0 0; color: var(--ink-soft); font-size: var(--font-sm); }
.bank-files-section > .table-card { border: 0; border-radius: 0; box-shadow: none; }
.bank-files-footer { border-top: 1px solid var(--line); background: #fafbf9; }
.bank-files-page-copy { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--ink-soft); font-size: var(--font-sm); }
.bank-files-page-copy > p { margin: 0; }
.bank-files-help > summary { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; font-weight: 600; list-style: none; }
.bank-files-help > summary::-webkit-details-marker { display: none; }
.bank-files-help[open] { flex-basis: 100%; }
.bank-files-help p { margin: .5rem 0 0; }
.bank-history-section > summary { padding: 1rem; cursor: pointer; font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.bank-history-section[open] > summary { border-bottom: 1px solid var(--line); }
.bank-history-count { margin-left: .5rem; color: var(--ink-soft); font-size: var(--font-sm); font-weight: 400; }
.bank-history-toolbar > p { flex: 1 1 18rem; margin: 0; }
.bank-history-table { overflow-x: auto; }
.bank-history-table table { min-width: 38rem; }
.bank-history-table td { overflow-wrap: anywhere; }
.bank-history-table td:first-child { width: 40%; }
.bank-history-table td p { margin: .45rem 0; }
.bank-history-table td small { display: block; color: var(--ink-soft); }
.bank-history-table td .button { margin-top: .6rem; }
.bank-history-subheading { margin: 0; padding: 1rem; border-top: 1px solid var(--line); font-size: 1rem; }
.bank-history-empty { padding: 1rem; margin: 0; color: var(--ink-soft); }
.bank-history-message:empty { display: none; }
.bank-history-message:not(:empty) { margin: .75rem 1rem; }
.bank-history-message.success:not(:empty) { padding: .25rem 0; border: 0; background: transparent; color: var(--ink-soft); font-weight: 400; }
.bank-zip-record { border-top: 1px solid var(--line); }
.bank-zip-record > summary { padding: 1rem; cursor: pointer; overflow-wrap: anywhere; }
.bank-zip-record > summary > .status-pill { margin-left: .75rem; }
.bank-zip-record-copy { display: inline-grid; gap: .25rem; max-width: 100%; vertical-align: middle; }
.bank-zip-record-copy small { color: var(--ink-soft); }
.bank-zip-record[open] > summary { background: #fafbf9; border-bottom: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; }
th { padding: .8rem 1rem; background: #fafbf9; color: var(--ink-soft); font-size: .7rem; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
td { padding: .9rem 1rem; border-top: 1px solid #f0e9e7; font-size: .86rem; vertical-align: middle; }
.file-content { min-width: 17rem; }
.file-name { display: block; overflow-wrap: anywhere; }
.file-summary { margin-top: .3rem; font-size: .78rem; }
.file-period { margin-top: .35rem; font-weight: 600; }
.file-account-warning { margin-top: .55rem; color: #946315; font-size: .78rem; }
.file-detail-list {
  display: grid;
  gap: .24rem;
  margin: .75rem 0 0;
  color: var(--ink-soft);
  font-size: .8rem;
}
.file-detail-list > div {
  display: grid;
  grid-template-columns: minmax(7.8rem, auto) 1fr;
  gap: .45rem;
}
.file-detail-list dt { font-weight: 700; }
.file-detail-list dd { margin: 0; color: var(--ink); }
.mail-csv-preview-dialog { width: min(52rem, calc(100% - 2rem)); }
.mail-csv-preview-dialog .dialog-form { max-height: min(44rem, calc(100vh - 3rem)); overflow: auto; }
.mail-csv-preview-dialog .file-detail-list { margin-top: 0; }
.mail-csv-preview-table-wrap { max-height: 20rem; overflow: auto; }
.mail-csv-preview-table td:nth-child(2) { min-width: 18rem; white-space: normal; overflow-wrap: anywhere; }
.mail-csv-preview-table td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mail-bank-preview-dialog { width: min(72rem, calc(100% - 2rem)); }
.mail-bank-preview-dialog .dialog-form { max-height: min(48rem, calc(100vh - 3rem)); overflow: auto; }
.mail-bank-preview-dialog .file-detail-list { margin-top: 0; }
.mail-bank-preview-groups { display: grid; gap: 1.25rem; }
.mail-bank-preview-group {
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  padding: 1rem;
  background: var(--surface);
}
.mail-bank-preview-group h3 { margin: 0 0 .75rem; }
.mail-bank-preview-group .file-detail-list { margin-bottom: 1rem; }
.mail-bank-preview-table-wrap { max-height: 24rem; overflow: auto; }
.mail-bank-preview-table td:nth-child(2) { min-width: 13rem; white-space: normal; overflow-wrap: anywhere; }
.mail-bank-preview-table td:nth-child(3) { min-width: 18rem; white-space: normal; overflow-wrap: anywhere; }
.mail-bank-preview-table td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.derived-file-row td {
  border-top-color: #eddba9;
  background: #fff9e8;
}
.derived-file-row td:first-child { padding-left: 2rem; }
.derived-file-content {
  position: relative;
  padding-left: 1.4rem;
}
.derived-file-content::before {
  content: "↳";
  position: absolute;
  left: 0;
  top: -.1rem;
  color: #946d15;
  font-size: 1.05rem;
  font-weight: 800;
}
.file-actions {
  min-width: 10rem;
}
.file-actions-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: .45rem;
}
.file-actions-stack .button {
  width: 100%;
  min-height: 2.25rem;
  padding: .5rem .7rem;
  font-size: .75rem;
  text-decoration: none;
  white-space: nowrap;
}

.mail-account-preview {
  background: var(--teal-pale);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  color: var(--ink-soft);
  font-size: var(--font-sm);
  padding: 0.65rem 0.75rem;
}

.mail-account-preview ul {
  margin: 0.4rem 0 0;
  padding-left: 1.15rem;
}
.mail-account-link-status {
  display: block;
  margin-top: .15rem;
}
.count-badge, .severity, .status-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.severity.critical { color: #9a493e; background: #f5e5e2; }
.severity.warning { color: #946d15; background: #fff2d8; }
.status-pill.ok { color: #2d6b46; background: #e4f2e9; }
.status-pill.neutral { color: #28659f; background: #e4effa; }
.status-pill.warning { color: #946d15; background: #fff2d8; }
.status-pill.failed { color: #9a493e; background: #f5e5e2; }
.empty-state { margin: 0; padding: 2rem; color: var(--ink-soft); text-align: center; }
.customer-list, .user-list { display: grid; gap: 1rem; }
.customer-card, .user-card, .info-card {
  padding: 1.2rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: white;
}
.customer-head, .user-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.customer-head h3, .user-card h3, .info-card h2 { margin: .15rem 0; font: 500 1.25rem var(--font-ui); }
.customer-head p, .user-card p { margin: 0; color: var(--ink-soft); font-size: .8rem; }
.customer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .45rem; }
.retention-pending { color: var(--warning); font-weight: 700; }
.account-list { display: grid; gap: .55rem; margin-top: 1rem; }
.account-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto auto; gap: 1rem; align-items: center; padding: .75rem .8rem; border-radius: var(--ui-radius); background: var(--surface-soft); font-size: .82rem; }
.account-row strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.account-expectation-button { padding: .55rem .7rem; white-space: nowrap; }
.account-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.account-connection-note { grid-column: 1 / -1; }
.account-connection-actions { grid-column: 1 / -1; }
.account-identifier-button { padding: .55rem .7rem; white-space: nowrap; }
.activity-list { display: grid; gap: .5rem; }
.activity-item { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.activity-item p { margin: 0; font-size: .84rem; }
.activity-item small { color: var(--ink-soft); }
.crm-archive-entry { margin-top: 1rem; }
#view-crm_archive-entry .crm-archive-entry { margin-top: 0; }
.crm-archive-entry-meta { color: var(--ink-soft); }
.crm-archive-fields { display: grid; gap: 0; margin: 1rem 0 0; }
.crm-archive-field { display: grid; grid-template-columns: minmax(12rem, 32%) 1fr; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.crm-archive-field dt { font-weight: 650; color: var(--ink); }
.crm-archive-field dd { margin: 0; color: var(--ink-soft); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-archive-company-sections { display: grid; gap: 1rem; margin-top: 1rem; }
.crm-archive-company-section { overflow: hidden; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.crm-archive-company-section h3, .crm-archive-company-section h4 { margin: 0; padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: var(--teal-pale); color: var(--teal-dark); font: 650 1.05rem var(--font-ui); }
.crm-archive-company-section.crm-archive-personal-section > h4 { border-color: #b9d1e8; color: #154273; background: #e7f0f9; }
.crm-archive-company-section .crm-archive-fields { margin: 0; padding: 0 1rem .15rem; }
.crm-archive-related { display: grid; gap: 1rem; margin-top: 1.5rem; }
.crm-archive-related h3 { margin: 0 0 1rem; font: 500 1.2rem var(--font-ui); }
.crm-archive-related-group { overflow: hidden; }
.crm-archive-related-record { border-top: 1px solid var(--line); background: white; }
.crm-archive-related-record summary { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; cursor: pointer; list-style: none; }
.crm-archive-related-record summary::-webkit-details-marker { display: none; }
.crm-archive-related-record summary::before { content: ""; flex: 0 0 .45rem; width: .45rem; height: .45rem; border-right: 2px solid var(--teal-dark); border-bottom: 2px solid var(--teal-dark); transform: rotate(-45deg); transition: transform .16s ease; }
.crm-archive-related-record[open] { background: var(--teal-pale); box-shadow: inset 4px 0 0 var(--teal-dark); }
.crm-archive-related-record[open] summary::before { transform: rotate(45deg); }
.crm-archive-related-summary-copy { display: grid; gap: .15rem; min-width: 0; }
.crm-archive-related-record summary small { color: var(--ink-soft); font-weight: 400; }
.crm-archive-related-toggle { margin-left: auto; flex: 0 0 auto; padding: .25rem .55rem; border: 1px solid var(--teal); border-radius: var(--ui-radius); color: var(--teal-dark); background: white; font-size: .8rem; font-weight: 650; }
.crm-archive-related-record[open] .crm-archive-related-toggle { color: white; border-color: var(--teal-dark); background: var(--teal-dark); }
.crm-archive-related-record .crm-archive-fields { margin: 0; padding: 0 1rem .5rem; background: white; }
.crm-archive-personal-section .crm-archive-related-record summary::before { border-color: #154273; }
.crm-archive-personal-section .crm-archive-related-record[open] { background: #edf5fc; box-shadow: inset 4px 0 0 #154273; }
.crm-archive-personal-section .crm-archive-related-toggle { color: #154273; border-color: #3979ac; }
.crm-archive-personal-section .crm-archive-related-record[open] .crm-archive-related-toggle { border-color: #154273; background: #154273; }
.crm-archive-related.nested { margin: 0 .85rem .85rem; padding: .9rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.crm-archive-related.nested h5 { margin: 0 0 .75rem; color: var(--ink); font-size: var(--font-base); }
.crm-archive-related.nested .crm-archive-related-record { background: #fff; }
.security-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.passkey-card { grid-column: span 2; }
.info-card p:not(.eyebrow) { color: var(--ink-soft); line-height: 1.6; }
.module-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px solid #eadfdd;
  border-radius: var(--ui-radius);
  background: linear-gradient(135deg, #fff 0%, var(--teal-pale) 100%);
}
.module-hero::after {
  content: "";
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: rgba(228, 150, 150, .16);
}
.module-hero > div { position: relative; z-index: 1; max-width: 47rem; }
.module-hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.2rem; }
.module-hero .status-pill { margin-bottom: 1.5rem; }
.module-hero h2 {
  margin: .35rem 0 .75rem;
  font: 500 clamp(1.7rem, 3vw, 2.35rem)/1.15 var(--font-ui);
}
.module-hero p:not(.eyebrow) {
  color: var(--ink-soft);
  line-height: 1.7;
}
.marketing-module-hero {
  border-color: #d9e2f0;
  background: linear-gradient(135deg, #fff 0%, #edf5fc 100%);
}
.marketing-module-hero::after { background: rgba(21, 66, 115, .11); }
.marketing-card-grid .info-card,
.marketing-workspace-grid .module-dashboard-panel { border-top: 3px solid #3979ac; }
.marketing-workspace-grid h2 { margin: .25rem 0 .6rem; font: 500 1.2rem var(--font-ui); }
.marketing-workspace-grid p:not(.eyebrow) { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.marketing-brand-card { display: grid; align-content: start; gap: .55rem; }
.marketing-brand-card h2 { margin: 0; }
.marketing-brand-card > p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.marketing-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: .45rem 0 .25rem; }
.marketing-palette > div { display: grid; grid-template-columns: 2rem 1fr; column-gap: .55rem; align-items: center; padding: .5rem; border-radius: var(--ui-radius); background: var(--surface-soft); }
.marketing-swatch { grid-row: span 2; width: 2rem; height: 2rem; border-radius: var(--ui-radius); border: 1px solid rgba(40, 40, 40, .08); }
.marketing-swatch-soft { background: #F3F4EF; }
.marketing-swatch-pink { background: #E49696; }
.marketing-swatch-pale-pink { background: #FBF3F1; }
.marketing-swatch-white { background: #FFFFFF; border-color: var(--line); }
.marketing-palette strong { font-size: var(--font-xs); }
.marketing-palette small { color: var(--ink-soft); font-size: .7rem; }
.marketing-brand-details { display: grid; grid-template-columns: minmax(8rem, .8fr) minmax(0, 1.2fr); gap: .35rem .7rem; margin: .35rem 0 0; font-size: var(--font-xs); }
.marketing-brand-details dt { color: var(--ink-soft); }
.marketing-brand-details dd { margin: 0; font-weight: 700; }
.marketing-brand-list { display: grid; gap: .45rem; margin: .25rem 0 0; padding-left: 1.15rem; color: var(--ink-soft); line-height: 1.5; }
.marketing-brand-list strong { color: var(--ink); }
.marketing-example { margin-top: .35rem !important; padding: .7rem .8rem; border-left: 3px solid #E49696; background: #FBF3F1; }
.marketing-mailing-notice { display: flex; align-items: start; gap: .8rem; margin-bottom: 1rem; padding: .9rem 1rem; border: 1px solid #e2c987; border-radius: var(--ui-radius); background: #fff9e9; }
.marketing-mailing-notice > div { display: grid; gap: .2rem; }
.marketing-mailing-notice p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.marketing-mailing-catalog { display: grid; gap: 1rem; }
.marketing-mailing-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 22rem)); gap: 1rem; }
.marketing-mailing-catalog-card { overflow: hidden; border: 1px solid var(--line); border-top: 3px solid #E49696; border-radius: var(--ui-radius); background: white; box-shadow: 0 .3rem 1rem rgba(40,40,40,.05); }
.marketing-mailing-card-open { display: grid; width: 100%; border: 0; background: white; padding: 0; color: var(--ink); text-align: left; cursor: pointer; }
.marketing-mailing-card-open:focus-visible, .marketing-mailing-summary button:focus-visible { outline: 3px solid #E49696; outline-offset: -3px; }
.marketing-mailing-card-thumbnail { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #FBF3F1; }
.marketing-mailing-card-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.marketing-mailing-card-copy { display: grid; gap: .35rem; padding: 1rem; }
.marketing-mailing-card-copy strong { font: 600 1.1rem var(--font-ui); }
.marketing-mailing-card-copy small { color: var(--ink-soft); line-height: 1.5; }
.marketing-mailing-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .75rem 1rem; border-top: 1px solid var(--line); background: #F3F4EF; }
.marketing-mailing-workspace-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.marketing-mailing-workspace-heading h2 { margin: 0; font: 600 1.35rem var(--font-ui); }
.marketing-mailing-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.marketing-mailing-summary > button, .marketing-mailing-summary > div { display: grid; gap: .25rem; min-width: 0; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; color: var(--ink); text-align: left; }
.marketing-mailing-summary > button { cursor: pointer; }
.marketing-mailing-summary > button:hover { border-color: #E49696; background: #FBF3F1; }
.marketing-mailing-summary span { color: var(--ink-soft); font-size: var(--font-xs); }
.marketing-mailing-summary strong { font: 600 1.35rem var(--font-ui); }
.marketing-mailing-summary small { color: #8a5757; font-size: .68rem; }
.marketing-mailing-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(17rem, .7fr); gap: 1rem; align-items: start; }
.marketing-mailing-panel { padding: 1.15rem; border: 1px solid var(--line); border-top: 3px solid #E49696; border-radius: var(--ui-radius); background: white; }
.marketing-mailing-panel h2 { margin: .2rem 0 .45rem; }
.marketing-mailing-panel p:not(.eyebrow):not(.message) { color: var(--ink-soft); line-height: 1.55; }
.marketing-mailing-campaign input, .marketing-mailing-template-form input, .marketing-mailing-template-form textarea { width: 100%; min-height: 2.45rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fcfaf9; color: var(--ink); padding: .5rem .6rem; font: inherit; }
.marketing-mailing-campaigns { display: grid; gap: .7rem; margin-top: .9rem; }
.marketing-mailing-campaign { display: grid; grid-template-columns: 5.5rem minmax(10rem, 1fr) minmax(7rem, .55fr) minmax(10rem, 1fr) auto; gap: .65rem; align-items: end; padding: .8rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.marketing-mailing-campaign > strong { align-self: center; }
.marketing-mailing-campaign label { display: grid; gap: .25rem; color: var(--ink-soft); font-size: var(--font-xs); font-weight: 700; }
.marketing-mailing-campaign.is-next { position: relative; z-index: 1; border-color: #E49696; background: #fff9f8; box-shadow: 0 .65rem 1.5rem rgba(90, 48, 48, .14); transform: translateY(-.12rem); }
.marketing-mailing-campaign.is-next::before { position: absolute; inset: 0 auto 0 0; width: .28rem; border-radius: var(--ui-radius) 0 0 var(--ui-radius); background: #E49696; content: ""; }
.marketing-mailing-next-banner { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .7rem; margin: -.8rem -.8rem 0; padding: .48rem .8rem; border-radius: var(--ui-radius) var(--ui-radius) var(--ui-radius) var(--ui-radius); background: #E49696; color: white; text-align: center; }
.marketing-mailing-next-banner strong { font-weight: 800; }
.marketing-mailing-next-banner span { font-variant-numeric: tabular-nums; }
.marketing-mailing-campaign-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.marketing-mailing-campaign-actions .button { min-height: 2.45rem; padding: .45rem .65rem; font-size: var(--font-xs); }
.marketing-mailing-readiness { display: grid; gap: .75rem; }
.marketing-mailing-readiness ul { display: grid; gap: .55rem; margin: 0; padding-left: 1.2rem; color: var(--ink-soft); line-height: 1.45; }
.marketing-mailing-readiness summary { cursor: pointer; font-weight: 750; }
.marketing-mailing-sync-status { display: grid; gap: .3rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.marketing-mailing-sync-status .status-pill { justify-self: start; }
.marketing-mailing-sync-status small, .marketing-mailing-detail-note { color: var(--ink-soft); }
.marketing-mailing-exclusions { display: grid; grid-template-columns: 1fr auto; gap: .35rem .7rem; margin: .7rem 0 0; font-size: var(--font-xs); }
.marketing-mailing-exclusions dt { color: var(--ink-soft); }
.marketing-mailing-exclusions dd { margin: 0; font-weight: 750; }
.marketing-mailing-detail-note { margin: .55rem 0; font-size: var(--font-xs); }
.marketing-mailing-excluded-companies { display: grid; gap: .45rem; max-height: 24rem; overflow: auto; }
.marketing-mailing-excluded-companies article { display: grid; gap: .15rem; padding: .6rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.marketing-mailing-excluded-companies span, .marketing-mailing-excluded-companies small { color: var(--ink-soft); font-size: var(--font-xs); overflow-wrap: anywhere; }
.marketing-mailing-source-issues { display: grid; gap: .45rem; max-height: 24rem; overflow: auto; }
.marketing-mailing-source-issues article { display: grid; gap: .15rem; padding: .6rem; border: 1px solid #ead6a8; border-radius: var(--ui-radius); background: #fffaf0; }
.marketing-mailing-source-issues span, .marketing-mailing-source-issues small { color: var(--ink-soft); font-size: var(--font-xs); overflow-wrap: anywhere; }
.marketing-mailing-detail-list { display: grid; gap: .45rem; max-height: 24rem; overflow: auto; }
.marketing-mailing-detail-list article { display: grid; gap: .15rem; padding: .6rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.marketing-mailing-detail-list span, .marketing-mailing-detail-list small { color: var(--ink-soft); font-size: var(--font-xs); overflow-wrap: anywhere; }
.marketing-mailing-detail-page { display: grid; gap: 1rem; }
.marketing-mailing-detail-page[hidden] { display: none; }
.marketing-mailing-detail-page .marketing-mailing-workspace-heading > div { display: grid; gap: .15rem; }
.marketing-mailing-detail-page .marketing-mailing-workspace-heading .eyebrow { margin: 0; }
.marketing-mailing-detail-intro { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: 1.2rem; align-items: center; padding: 1.15rem 1.25rem; border: 1px solid #efd6d2; border-left: 4px solid #E49696; border-radius: var(--ui-radius); background: #FBF3F1; }
.marketing-mailing-detail-intro strong { font: 600 clamp(1.8rem, 4vw, 2.6rem) var(--font-ui); }
.marketing-mailing-detail-intro p { max-width: 58rem; margin: 0; color: var(--ink-soft); line-height: 1.55; }
.marketing-mailing-exclusion-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem 1.2rem; }
.marketing-mailing-exclusion-filters[hidden] { display: none; }
.marketing-mailing-exclusion-filters label { flex: 0 1 34rem; min-width: 0; max-width: 100%; }
.marketing-mailing-exclusion-filters select { width: 100%; min-width: 0; }
.marketing-mailing-exclusion-filters p { margin: 0 0 .6rem; }
.marketing-mailing-detail-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; box-shadow: 0 .35rem 1rem rgba(40, 40, 40, .05); }
.marketing-mailing-detail-table-wrap table { min-width: 44rem; }
.marketing-mailing-detail-table-wrap tbody tr:hover { background: #fdf9f8; }
.marketing-mailing-detail-table-wrap td { overflow-wrap: anywhere; }
.marketing-mailing-templates { margin-top: 1rem; }
.marketing-mailing-token-note { margin: .75rem 0; padding: .65rem .75rem; border-radius: var(--ui-radius); background: var(--teal-pale); font-size: var(--font-xs); }
.upload-layout-dialog { width: min(78rem, calc(100vw - 2rem)); max-height: 92dvh; overflow: auto; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fff; padding: 1.25rem; color: var(--ink); }
.upload-layout-dialog::backdrop { background: rgba(0,0,0,.45); }
.upload-layout-columns { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 1fr); gap: 1.25rem; }
.upload-layout-fields { display: grid; align-content: start; gap: .8rem; min-width: 0; }
.upload-layout-fields label { display: grid; gap: .3rem; font-weight: 600; }
.upload-layout-fields input:not([type=checkbox]), .upload-layout-fields select, .upload-layout-fields textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.upload-layout-fields textarea { font: inherit; padding: .65rem; border: 1px solid var(--line); border-radius: var(--ui-radius); }
.upload-layout-dialog > .view-actions:first-child { justify-content: space-between; }
.upload-layout-fields .document-generator-check { display: flex; align-items: start; }
.upload-layout-fields input[type=checkbox] { width: 1rem; height: 1rem; min-height: 1rem; flex: 0 0 1rem; }
.upload-layout-dialog .objection-source-preview-scroll { max-height: 68dvh; }
#upload-layout-page { width: 5rem; }
@media(max-width: 760px) { .upload-layout-columns { grid-template-columns: minmax(0,1fr); } .upload-layout-dialog { padding: .8rem; } .upload-layout-dialog .objection-source-preview-scroll { max-height: 50dvh; } }
.marketing-mailing-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.marketing-mailing-template-form { display: grid; gap: .7rem; padding: .9rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.marketing-mailing-template-form > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: center; }
.marketing-mailing-template-form > div > strong { color: var(--ink-soft); font-size: var(--font-xs); }
.marketing-mailing-template-form label { display: grid; gap: .3rem; color: var(--ink-soft); font-size: var(--font-xs); font-weight: 750; }
.marketing-mailing-template-form textarea { min-height: 18rem; resize: vertical; line-height: 1.5; }
.marketing-mailing-template-form textarea[name="deadlineText"] { min-height: 8rem; }
.marketing-mailing-template-form textarea[name="attentionText"] { min-height: 11rem; }
.marketing-mailing-template-form .marketing-mailing-token-toolbar { justify-content: flex-start; padding: .55rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.marketing-mailing-token-toolbar::before { content: "Tag invoegen:"; color: var(--ink-soft); font-size: var(--font-xs); font-weight: 750; }
.marketing-mailing-token-toolbar button { min-height: 1.9rem; padding: .3rem .45rem; border: 1px solid #d8c8c6; border-radius: var(--ui-radius); background: #fbf3f1; color: var(--ink); font: 700 var(--font-xs) var(--font-body); cursor: pointer; }
.marketing-mailing-token-toolbar button:hover { border-color: #e49696; background: #fff; }
.marketing-mailing-template-form .marketing-mailing-template-actions { justify-content: flex-start; }
.marketing-mailing-preview { display: grid; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.marketing-mailing-preview h3 { margin: .15rem 0 .35rem; font: 600 1.2rem var(--font-ui); }
.marketing-mailing-preview > strong { padding: .65rem .75rem; border-radius: var(--ui-radius); background: var(--surface-soft); overflow-wrap: anywhere; }
.marketing-mailing-preview iframe { width: 100%; min-height: 42rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.marketing-mailing-preview summary { cursor: pointer; font-weight: 750; }
.marketing-mailing-preview pre { max-height: 24rem; overflow: auto; margin: .65rem 0 0; padding: .85rem; border-radius: var(--ui-radius); background: #f7f5f4; white-space: pre-wrap; overflow-wrap: anywhere; font: .8rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.marketing-test-mail { display: grid; gap: .8rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.marketing-test-mail h3 { margin: 0 0 .25rem; font: 600 1.2rem var(--font-ui); }
.marketing-test-mail p { margin: 0; }
.marketing-test-mail form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .75rem; align-items: end; }
.marketing-test-mail form label { display: grid; min-width: 0; gap: .35rem; font-weight: 700; }
.marketing-test-mail form select { min-width: 0; width: 100%; }
.marketing-test-mail-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem; }
.marketing-test-mail-jobs { display: grid; gap: .45rem; }
.marketing-test-mail-jobs article { display: grid; grid-template-columns: minmax(7rem,.35fr) minmax(12rem,1fr) auto; gap: .75rem; align-items: center; padding: .65rem .75rem; border-radius: var(--ui-radius); background: #fff; }
.marketing-test-mail-jobs small { color: var(--muted); text-align: right; }
@media (max-width: 800px) { .marketing-test-mail form, .marketing-test-mail-jobs article { grid-template-columns: 1fr; } .marketing-test-mail-jobs small { text-align: left; } }
.marketing-logo-designer { display: grid; grid-template-columns: minmax(16rem, .7fr) minmax(0, 1.3fr); gap: 1rem; margin-top: 1rem; }
.marketing-logo-controls, .marketing-logo-preview { padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.marketing-logo-controls { display: grid; align-content: start; gap: .85rem; }
.marketing-logo-controls label { display: grid; gap: .32rem; color: var(--ink-soft); font-size: var(--font-xs); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.marketing-logo-controls input:not([type="color"]), .marketing-logo-controls select { min-height: 2.5rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fcfaf9; color: var(--ink); padding: .45rem .6rem; }
.marketing-logo-controls input[type="color"] { width: 100%; min-height: 2.5rem; border: 1px solid var(--line); border-radius: var(--ui-radius); padding: .2rem; background: #fcfaf9; }
.marketing-logo-label { display: block; margin-bottom: .35rem; color: var(--ink-soft); font-size: var(--font-xs); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.marketing-logo-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.marketing-logo-presets .button { min-height: 2.25rem; padding: .45rem; font-size: var(--font-xs); }
.marketing-logo-downloads { display: grid; gap: .5rem; margin-top: .15rem; }
.marketing-logo-note { margin: 0; padding: .75rem; border-radius: var(--ui-radius); background: var(--teal-pale); color: var(--ink-soft); font-size: var(--font-xs); line-height: 1.5; }
.marketing-logo-preview { min-width: 0; }
.marketing-logo-stage { display: grid; min-height: 22rem; margin-top: .85rem; padding: clamp(1.25rem, 4vw, 3rem); place-items: center; overflow: auto; border: 1px solid #e7e0de; border-radius: var(--ui-radius); background-color: #fafafa; background-image: linear-gradient(45deg, #f0eeee 25%, transparent 25%), linear-gradient(-45deg, #f0eeee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0eeee 75%), linear-gradient(-45deg, transparent 75%, #f0eeee 75%); background-position: 0 0, 0 .75rem, .75rem -.75rem, -.75rem 0; background-size: 1.5rem 1.5rem; }
#marketing-logo-host { width: 100%; min-width: 34rem; }
#marketing-logo-host svg { display: block; width: 100%; height: auto; }
.marketing-logo-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: .85rem; }
.marketing-logo-specs div { padding: .65rem; border-radius: var(--ui-radius); background: var(--surface-soft); }
.marketing-logo-specs span, .marketing-logo-specs strong { display: block; }
.marketing-logo-specs span { margin-bottom: .2rem; color: var(--ink-soft); font-size: var(--font-xs); }
.marketing-logo-specs strong { font-size: var(--font-sm); overflow-wrap: anywhere; }
.marketing-library { padding: 1.2rem; border: 1px solid var(--line); border-top: 3px solid #3979ac; border-radius: var(--ui-radius); background: white; }
.marketing-library .section-heading { align-items: start; }
.marketing-library .section-heading > div { max-width: 46rem; }
.marketing-library .section-heading h2 { margin: .25rem 0 .55rem; }
.marketing-library .section-heading p:not(.eyebrow) { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.marketing-upload-form, .marketing-folder-form, .marketing-library-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; }
.marketing-upload-form { flex: 0 0 auto; }
.marketing-upload-form > label:not(.button), .marketing-library-toolbar > label, .marketing-folder-form label { display: grid; gap: .3rem; color: var(--ink-soft); font-size: var(--font-xs); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.marketing-upload-form select, .marketing-library-toolbar select, .marketing-folder-form input { min-height: 2.4rem; min-width: 10rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fcfaf9; color: var(--ink); padding: .4rem .55rem; }
.marketing-library-toolbar { justify-content: space-between; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.marketing-library-view-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; }
.marketing-library-view-controls label { display: grid; gap: .3rem; color: var(--ink-soft); font-size: var(--font-xs); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.marketing-library-view-controls select { min-height: 2.4rem; min-width: 10rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fcfaf9; color: var(--ink); padding: .4rem .55rem; }
.marketing-trash-note { margin: 1rem 0 0; padding: .75rem .9rem; border: 1px solid #e5c2bd; border-radius: var(--ui-radius); background: #fbf1ef; color: #713a34; font-size: var(--font-sm); }
.marketing-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.marketing-music-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: 1rem; color: var(--ink-soft); font-size: var(--font-sm); }
.marketing-music-breadcrumbs button { border: 0; border-radius: var(--ui-radius); background: transparent; color: #3979ac; padding: .2rem .35rem; font: inherit; cursor: pointer; }
.marketing-music-breadcrumbs button:hover { background: #eef4f8; text-decoration: underline; }
.marketing-music-breadcrumbs button:focus-visible, .marketing-music-folder:focus-visible { outline: 3px solid #3979ac; outline-offset: 2px; }
.marketing-music-breadcrumbs [aria-current="page"] { padding: .2rem .35rem; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.marketing-music-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .7rem; margin-top: .75rem; }
.marketing-music-folder-grid:empty { display: none; }
.marketing-music-folder { display: flex; align-items: center; gap: .75rem; width: 100%; min-width: 0; min-height: 4.5rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #f8faf9; color: var(--ink); padding: .75rem; text-align: left; font: 700 var(--font-sm) var(--font-ui); cursor: pointer; }
.marketing-music-folder:hover { border-color: #3979ac; background: #eef4f8; }
.marketing-music-folder-icon { position: relative; flex: 0 0 2.2rem; width: 2.2rem; height: 1.55rem; margin-top: .25rem; border-radius: var(--ui-radius); background: #3979ac; }
.marketing-music-folder-icon::before { position: absolute; top: -.3rem; left: 0; width: 1rem; height: .45rem; border-radius: var(--ui-radius) var(--ui-radius) 0 0; background: #3979ac; content: ""; }
.marketing-music-folder-name { min-width: 0; overflow-wrap: anywhere; }
.marketing-asset-card { display: grid; grid-template-rows: 10rem auto 1fr; gap: .55rem; min-width: 0; padding: .75rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.marketing-asset-details { display: grid; align-content: start; gap: .35rem; min-width: 0; }
.marketing-asset-image-button { display: block; width: 100%; height: 10rem; overflow: hidden; border: 0; border-radius: var(--ui-radius); background: #f3f4ef; padding: 0; cursor: zoom-in; }
.marketing-asset-image-button:focus-visible { outline: 3px solid #3979ac; outline-offset: 2px; }
.marketing-asset-card img { display: block; width: 100%; height: 10rem; object-fit: cover; transition: transform .18s ease; }
.marketing-asset-image-button:hover img { transform: scale(1.025); }
.marketing-trash-preview { display: grid; width: 100%; height: 100%; overflow: hidden; place-items: stretch; background: #eee9e7; }
.marketing-trash-preview img, .marketing-trash-overlay { grid-area: 1 / 1; }
.marketing-trash-preview img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2); }
.marketing-trash-overlay { z-index: 1; display: grid; place-items: center; padding: 1rem; background: repeating-linear-gradient(135deg, rgba(180,0,0,.20) 0, rgba(180,0,0,.20) .75rem, rgba(255,255,255,.20) .75rem, rgba(255,255,255,.20) 1.5rem); color: white; text-align: center; font-size: var(--font-sm); font-weight: 800; text-shadow: 0 1px 3px rgba(70,0,0,.95); }
.marketing-asset-image-button:has(.marketing-trash-preview), .marketing-video-card-preview:has(.marketing-trash-preview), .marketing-music-card-preview:has(.marketing-trash-preview) { cursor: default; }
.marketing-asset-card h3 { margin: 0; font-size: .96rem; overflow-wrap: anywhere; }
.marketing-asset-card p { margin: 0; color: var(--ink-soft); font-size: var(--font-xs); line-height: 1.45; }
.marketing-asset-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-self: end; }
.marketing-asset-actions .button { min-height: 2rem; padding: .4rem .55rem; font-size: var(--font-xs); }
.marketing-asset-grid.is-compact { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .65rem; }
.marketing-asset-grid.is-compact .marketing-asset-card { grid-template-rows: 7rem auto 1fr; padding: .55rem; }
.marketing-asset-grid.is-compact .marketing-asset-image-button, .marketing-asset-grid.is-compact .marketing-video-card-preview, .marketing-asset-grid.is-compact .marketing-music-card-preview, .marketing-asset-grid.is-compact .marketing-asset-card img { height: 7rem; }
.marketing-asset-grid.is-compact .marketing-asset-card p { display: none; }
.marketing-asset-grid.is-compact .marketing-asset-actions .button { padding: .3rem .4rem; }
.marketing-asset-grid.is-list { grid-template-columns: 1fr; gap: .55rem; }
.marketing-asset-grid.is-list .marketing-asset-card { grid-template-columns: 8rem minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; }
.marketing-asset-grid.is-list .marketing-asset-image-button, .marketing-asset-grid.is-list .marketing-video-card-preview, .marketing-asset-grid.is-list .marketing-music-card-preview, .marketing-asset-grid.is-list .marketing-asset-card img { width: 8rem; height: 5.5rem; }
.marketing-asset-grid.is-list .marketing-asset-actions { flex-wrap: nowrap; }
.marketing-image-preview-dialog { width: calc(100vw - 1rem); height: calc(100dvh - 1rem); max-width: none; max-height: none; border-radius: var(--ui-radius); }
.marketing-image-preview { display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden; padding: 0; }
.marketing-image-preview .dialog-heading { flex: 0 0 auto; padding: 1.25rem 1.45rem; border-bottom: 1px solid var(--line); }
.marketing-image-preview .dialog-heading h2 { max-width: 56rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marketing-image-preview-body { display: grid; min-height: 0; flex: 1 1 auto; place-items: center; overflow: hidden; padding: .5rem; background: #202725; }
.marketing-image-preview-body img { display: block; width: 100%; height: 100%; min-height: 0; border-radius: var(--ui-radius); object-fit: contain; }
.marketing-preview-footer { min-height: 4.2rem; }
.marketing-preview-navigation { display: flex; align-items: center; justify-content: center; gap: .65rem; }
.marketing-preview-navigation span { min-width: 4rem; color: var(--ink-soft); text-align: center; font-size: var(--font-xs); }
.marketing-video-card-preview { display: grid; width: 100%; height: 10rem; place-items: center; border: 0; border-radius: var(--ui-radius); background: linear-gradient(145deg, #233b4f, #3979ac); color: white; padding: 0; cursor: pointer; }
.marketing-video-card-preview img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.marketing-video-card-preview > span:not(.marketing-trash-overlay) { z-index: 1; display: grid; grid-area: 1 / 1; width: 3.4rem; height: 3.4rem; place-items: center; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(18,35,48,.55); padding-left: .2rem; font-size: 1.45rem; }
.marketing-video-card-preview:hover > span:not(.marketing-trash-overlay) { background: rgba(255,255,255,.22); }
.marketing-video-card-preview:focus-visible { outline: 3px solid #3979ac; outline-offset: 2px; }
.marketing-video-preview-body { display: grid; min-height: 0; flex: 1 1 auto; place-items: stretch; overflow: hidden; padding: 0; background: #000; }
.marketing-video-preview-body video { display: block; width: 100%; height: 100%; min-height: 0; border: 0; background: #000; object-fit: contain; }
.marketing-music-card-preview { display: grid; width: 100%; height: 10rem; place-items: center; border: 0; border-radius: var(--ui-radius); background: linear-gradient(145deg, #5f2630, #e49696); color: white; padding: 0; cursor: pointer; }
.marketing-music-card-preview > span:not(.marketing-trash-overlay) { display: grid; width: 4rem; height: 4rem; place-items: center; border: 2px solid rgba(255,255,255,.82); border-radius: 50%; background: rgba(67,22,31,.35); font: 700 2rem Georgia, serif; }
.marketing-music-card-preview:hover > span:not(.marketing-trash-overlay) { background: rgba(255,255,255,.2); }
.marketing-music-card-preview:focus-visible { outline: 3px solid #3979ac; outline-offset: 2px; }
.marketing-music-preview-dialog .marketing-image-preview { max-width: 46rem; }
.marketing-music-preview-body { display: grid; place-items: center; gap: 1.5rem; min-height: 16rem; padding: 2.5rem; background: linear-gradient(145deg, #5f2630, #e49696); color: #fff; }
.marketing-music-preview-body > span { font: 700 5rem Georgia, serif; }
.marketing-music-preview-body audio { width: min(100%, 36rem); }
.payment-reference-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr);
  gap: 1rem;
}
.payment-reference-card {
  padding: 1.2rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: white;
}
.payment-reference-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
}
.payment-reference-input-row input {
  height: 2.85rem;
  font-size: 1rem;
  letter-spacing: .08em;
}
.payment-reference-input-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .45rem;
  color: var(--ink-soft);
  font-size: var(--font-xs);
}
.payment-reference-result {
  margin-top: 1rem;
  padding: 1.1rem;
  border: 1px solid #d7e4da;
  border-radius: var(--ui-radius);
  background: #fbfefb;
}
.payment-reference-result-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}
.payment-reference-result-head h2 {
  margin: .2rem 0 0;
  font: 500 1.2rem var(--font-ui);
}
.payment-reference-result-head .text-button { margin-left: auto; }
.payment-reference-result-icon {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #e4f2e9;
  color: #2d6b46;
  font-weight: 800;
}
.payment-reference-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  padding: 1rem 0;
}
.payment-reference-facts > div { min-width: 0; padding-right: .65rem; border-right: 1px solid var(--line); }
.payment-reference-facts > div:last-child { border-right: 0; }
.payment-reference-facts span,
.payment-reference-description span { display: block; margin-bottom: .25rem; color: var(--ink-soft); font-size: var(--font-xs); }
.payment-reference-facts strong,
.payment-reference-description strong { display: block; font-size: var(--font-sm); overflow-wrap: anywhere; }
.payment-reference-description {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--ui-radius);
  background: var(--surface-soft);
}
.payment-reference-description .button { flex: 0 0 auto; min-height: 2.2rem; padding: .5rem .75rem; font-size: var(--font-sm); }
.payment-reference-note { margin: .75rem 0 0; color: var(--ink-soft); font-size: var(--font-xs); line-height: 1.5; }
.payment-reference-unknown { margin-top: 1rem; }
.payment-reference-info h2 { margin: .3rem 0 .65rem; font: 500 var(--font-lg) var(--font-ui); }
.payment-reference-info p:not(.eyebrow) { color: var(--ink-soft); line-height: 1.6; }
.payment-reference-info ul { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: var(--font-sm); }
.payment-reference-info li::before { content: "✓"; display: inline-block; width: 1.2rem; color: var(--teal); font-weight: 800; }
.module-placeholder { padding: 1rem 1.15rem; border: 1px dashed #ddd4d2; border-radius: var(--ui-radius); background: #fffdfc; text-align: left; }
.module-placeholder h2 { margin: 0; color: var(--ink); font: 600 1rem/1.3 var(--font-ui); }
.module-placeholder p { margin: .3rem 0 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.45; }
.module-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.module-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.module-dashboard-panel { padding: 1rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.section-heading.compact { margin: 0 0 .75rem; }
.section-heading.compact h2 { font-size: 1.2rem; }
.compact-list { gap: .5rem; }
.compact-list .module-record { padding: .7rem .8rem; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--teal-deep); font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; }
.text-button:hover { text-decoration: underline; }
.module-filters { display: grid; grid-template-columns: minmax(16rem, 2fr) minmax(12rem, 1fr); gap: .8rem; margin: 0 0 1rem; padding: .9rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.module-filters.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.module-filters label { display: grid; gap: .32rem; color: var(--ink-soft); font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.module-filters input, .module-filters select { height: 40px; background: #fcfaf9; font-size: .76rem; letter-spacing: normal; text-transform: none; }
.module-filters .form-action { display: flex; align-items: end; }
.module-filters .form-action .button { min-height: 40px; }
.crm-archive-menu-item, .crm-archive-records-menu-item {
  display: grid;
  gap: .35rem;
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: white;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.crm-archive-menu-item:hover, .crm-archive-records-menu-item:hover { border-color: var(--teal); background: var(--teal-pale); }
.crm-archive-menu-item:focus-visible, .crm-archive-records-menu-item:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
.crm-archive-menu-item strong, .crm-archive-records-menu-item strong { color: var(--teal-dark); font-size: 1rem; }
.crm-archive-menu-item small, .crm-archive-records-menu-item small { color: var(--ink-soft); line-height: 1.45; }
.crm-archive-menu-item[disabled], .crm-archive-records-menu-item[disabled] { opacity: .55; cursor: not-allowed; }
.crm-archive-menu-item[disabled]:hover, .crm-archive-records-menu-item[disabled]:hover { border-color: var(--line); background: white; }
.crm-archive-records-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.crm-archive-records-header .view-intro { margin: 0; }
.crm-archive-records-header .button { flex: 0 0 auto; }
.crm-archive-records-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0 0 1rem; }
.crm-archive-records-menu-heading { grid-column: 1 / -1; margin: 0; color: var(--ink); font: 500 1.15rem var(--font-ui); }
.crm-ib-period-heading { color: var(--ink); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.crm-ib-period-navigation { display: flex; flex-wrap: wrap; gap: .55rem; grid-column: 1 / -1; padding: .75rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.crm-ib-period-navigation .button[aria-current="page"] { box-shadow: 0 0 0 2px rgba(0, 112, 103, .18); }
.crm-archive-search-form { grid-template-columns: minmax(16rem, 2fr) auto; }
.crm-archive-company-filters { grid-template-columns: minmax(15rem, 1.5fr) minmax(16rem, 1.8fr) minmax(10rem, .7fr) auto; }
.crm-archive-overview-filters { grid-template-columns: minmax(6rem, .45fr) minmax(10rem, .7fr) minmax(15rem, 1.4fr) minmax(14rem, 1fr) auto; }
.crm-archive-overview-filters[data-filter-kind="ib"] { grid-template-columns: minmax(15rem, 1.5fr) minmax(12rem, 1fr) auto; }
.crm-archive-import-filters { grid-template-columns: minmax(13rem, 1.1fr) minmax(16rem, 1.4fr) auto; }
.crm-ib-manual-filters { grid-template-columns: minmax(15rem, 1.5fr) minmax(8rem, .6fr) minmax(12rem, 1fr) auto; }
.crm-ib-delivery-statuses { display: grid; gap: .7rem; margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.crm-ib-delivery-statuses h3, .crm-ib-delivery-statuses p { margin: 0; }
.crm-ib-delivery-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.crm-ib-delivery-status-grid label { display: grid; gap: .35rem; color: var(--ink); font-weight: 700; }
.crm-ib-delivery-status-grid small { color: var(--ink-soft); font-weight: 500; }
.crm-archive-import-sources { margin-top: 1.5rem; }
.crm-vat-overview, .crm-ib-overview, .crm-archive-records-overview { margin-top: 0; }
.crm-vat-overview .text-button, .crm-ib-overview .text-button, .crm-archive-records-overview .text-button { font-size: inherit; }
.crm-archive-status { display: inline-flex; align-items: center; min-height: 1.8rem; padding: .18rem .55rem; border-radius: 999px; font-size: var(--font-xs); font-weight: 750; white-space: nowrap; }
.crm-archive-status.completed { background: #e3f2e7; color: #24613b; }
.crm-archive-status.pending { background: #fff0d8; color: #935900; }
.crm-archive-status.late { background: #fde5e2; color: #a43b32; }
.crm-archive-status.information { background: #e3efff; color: #1d5fa7; }
.crm-archive-status.neutral { background: #edf0f2; color: #55616b; }
.crm-status-select { border-color: currentColor !important; font-weight: 750 !important; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.crm-status-select.completed { background: #e3f2e7 !important; color: #24613b !important; }
.crm-status-select.pending { background: #fff0d8 !important; color: #935900 !important; }
.crm-status-select.late { background: #fde5e2 !important; color: #a43b32 !important; }
.crm-status-select.information { background: #e3efff !important; color: #1d5fa7 !important; }
.crm-status-select.neutral { background: #edf0f2 !important; color: #55616b !important; }
.crm-archive-checklist-work { display: grid; gap: .65rem; margin-top: 1.2rem; padding: 1rem; border: 1px solid #bfd4cc; border-radius: var(--ui-radius); background: #f7fbf8; }
.crm-archive-checklist-work h3, .crm-archive-checklist-work p { margin: 0; }
.crm-archive-checklist-work p, .crm-archive-checklist-work small { color: var(--ink-soft); line-height: 1.45; }
.crm-archive-checklist-items { display: grid; gap: .4rem; }
.crm-archive-checklist-item { display: flex; align-items: flex-start; gap: .55rem; color: var(--ink); line-height: 1.4; cursor: pointer; }
.crm-archive-checklist-item input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin-top: .15rem; accent-color: var(--teal-dark); }
.crm-archive-checklist-item-copy { display: grid; gap: .08rem; }
.crm-archive-checklist-source-state { color: var(--ink-soft); font-size: var(--font-xs); }
.crm-archive-checklist-source-state.checked { color: #24613b; font-weight: 700; }
.crm-archive-checklist-toggle { display: inline-flex; align-items: center; width: fit-content; gap: .55rem; color: var(--ink); font-weight: 750; cursor: pointer; }
.crm-archive-checklist-toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--teal-dark); }
.crm-archive-checklist-toggle input:disabled { cursor: not-allowed; }
.crm-ib-manual-overview h3 { margin-bottom: .8rem; }
.crm-ib-case-form { display: grid; gap: 1rem; margin-top: 1rem; }
.crm-ib-case-form fieldset { display: grid; gap: .55rem; min-width: 0; margin: 0; padding: 1rem; border: 1px solid #bfd4cc; border-radius: var(--ui-radius); background: #f7fbf8; }
.crm-ib-case-form legend { padding: 0 .35rem; color: var(--teal-dark); font: 600 1.05rem var(--font-ui); }
.crm-ib-case-delivery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crm-ib-case-delivery legend { grid-column: 1 / -1; }
.crm-ib-case-delivery > label { display: grid; gap: .3rem; color: var(--ink-soft); font-size: var(--font-xs); font-weight: 750; }
.crm-ib-case-delivery select { width: 100%; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; color: var(--ink); padding: .55rem .65rem; font: inherit; }
.crm-ib-case-finish { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crm-ib-case-finish legend { grid-column: 1 / -1; }
.crm-ib-case-finish > label { display: grid; gap: .3rem; color: var(--ink-soft); font-size: var(--font-xs); font-weight: 750; }
.crm-ib-case-finish > label:last-child { grid-column: 1 / -1; }
.crm-ib-case-finish input, .crm-ib-case-finish select, .crm-ib-case-finish textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; color: var(--ink); padding: .55rem .65rem; font: inherit; }
.crm-ib-case-finish textarea { resize: vertical; }
.crm-ib-imported-checklist { display: grid; gap: 1rem; }
.crm-ib-imported-checklist fieldset { display: grid; gap: .5rem; margin: 0; padding: 1rem; border: 1px solid #bfd4cc; border-radius: var(--ui-radius); background: white; }
.crm-ib-imported-checklist legend { padding: 0 .35rem; color: var(--teal-dark); font: 600 1.05rem var(--font-ui); }
.crm-ib-imported-status { display: grid; gap: .55rem; margin-top: .35rem; padding-top: 1rem; border-top: 1px solid #bfd4cc; }
.crm-ib-imported-status h4, .crm-ib-imported-note h4 { margin: 0; color: var(--teal-dark); font: 600 1rem var(--font-ui); }
.crm-ib-imported-status select { min-width: min(100%, 18rem); border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; color: var(--ink); padding: .5rem .65rem; font: inherit; }
.crm-ib-status-choice-row { display: grid; justify-items: start; gap: .75rem; }
.crm-ib-source-status-row { display: grid; justify-items: start; gap: .35rem; }
.crm-ib-source-status-row > span:first-child { color: var(--ink-soft); font-size: var(--font-xs); font-weight: 750; }
.crm-ib-imported-note { display: grid; gap: .55rem; margin-top: .35rem; padding-top: 1rem; border-top: 1px solid #bfd4cc; }
.crm-ib-imported-note label { display: grid; gap: .35rem; color: var(--ink-soft); font-size: var(--font-xs); font-weight: 750; }
.crm-ib-imported-note textarea { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; color: var(--ink); padding: .65rem; font: inherit; line-height: 1.5; }
.crm-ib-imported-note .dialog-actions { justify-content: flex-start; padding: 0; border: 0; }
.crm-ib-insite-notice { display: flex; align-items: flex-start; gap: .8rem; margin-top: 1.2rem; padding: 1rem 1.1rem; border: 1px solid #a9c6e8; border-radius: var(--ui-radius); background: #edf5ff; color: #174f84; line-height: 1.5; }
.crm-ib-insite-notice-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: 999px; background: #d8e9fb; font-size: 1.05rem; }
.crm-ib-insite-notice-copy { padding-top: .2rem; }
.module-table-section { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; overflow-x: auto; }
.module-table-section h3 { margin: 0 0 .8rem; font: 500 1.15rem var(--font-ui); }
.module-data-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.module-data-table th, .module-data-table td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.module-data-table th.numeric, .module-data-table td.numeric { text-align: right; }
.interactive-table-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.interactive-table { min-width: 100%; }
.interactive-table.interactive-table-widths-set { table-layout: fixed; }
.interactive-table-heading { position: relative; padding-right: 1.45rem !important; cursor: pointer; user-select: none; }
.interactive-table-heading::after {
  position: absolute;
  right: .45rem;
  top: 50%;
  color: var(--teal-dark);
  content: "";
  font-size: .72rem;
  transform: translateY(-50%);
}
.interactive-table-heading[data-sort-direction="ascending"]::after { content: "▲"; }
.interactive-table-heading[data-sort-direction="descending"]::after { content: "▼"; }
.interactive-table-heading:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: -2px; }
.interactive-table-resizer {
  position: absolute;
  z-index: 3;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
  outline: 0;
}
.interactive-table-resizer::after {
  position: absolute;
  top: .15rem;
  bottom: .15rem;
  left: 4px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
  content: "";
  transition: background-color .12s ease, box-shadow .12s ease;
}
.interactive-table-resizer:hover::after,
.interactive-table-resizer:focus-visible::after,
.interactive-table-resizer.is-resizing::after {
  background: var(--teal-dark);
  box-shadow: 0 0 0 2px rgba(54, 118, 93, .14);
}
body.is-resizing-table-column { cursor: col-resize !important; user-select: none !important; }
.interactive-table-filter-row th { padding: .42rem .32rem .58rem; background: #fffdfc; vertical-align: top; }
.interactive-table-filter { position: relative; min-width: 8rem; }
.interactive-table-filter-field { position: relative; display: flex; min-width: 0; }
.interactive-table-filter input {
  width: 100%;
  min-width: 0;
  height: 2.15rem;
  border: 1px solid #ded9d7;
  border-radius: var(--ui-radius);
  background: #fcfaf9;
  color: var(--ink);
  padding: .35rem 2.8rem .35rem .55rem;
  font: 500 .7rem/1 var(--font-ui);
}
.interactive-table-filter input:focus { border-color: var(--teal-dark); outline: 2px solid rgba(54, 118, 93, .16); }
.interactive-table-filter-menu-button {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.7rem;
  height: 2.15rem;
  border: 0;
  border-left: 1px solid #ded9d7;
  border-radius: 0 var(--ui-radius) var(--ui-radius) 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.interactive-table-filter-menu-button::before {
  position: absolute;
  top: .54rem;
  left: .62rem;
  width: .65rem;
  height: .65rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: "";
}
.interactive-table-filter-menu-button::after {
  position: absolute;
  top: 1.22rem;
  left: 1.27rem;
  width: .48rem;
  height: 2px;
  background: currentColor;
  content: "";
  transform: rotate(45deg);
  transform-origin: left center;
}
.interactive-table-filter-menu-button:hover,
.interactive-table-filter-menu-button[aria-expanded="true"] { color: var(--teal-dark); }
.interactive-table-filter-menu-button:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: -2px; }
.interactive-table-filter-chevron { position: absolute; top: .58rem; right: .3rem; font-size: .62rem; }
.interactive-table-filter-menu {
  position: fixed;
  z-index: 1000;
  min-width: 12rem;
  max-height: min(24rem, calc(100vh - 1rem));
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #ccd8d4;
  border-radius: var(--ui-radius);
  background: white;
  box-shadow: 0 .65rem 1.8rem rgba(34, 51, 48, .18);
}
.interactive-table-filter-menu[hidden] { display: none; }
.interactive-table-filter-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .55rem;
  padding: .62rem .75rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: white;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: 600 .76rem/1.2 var(--font-ui);
}
.interactive-table-filter-menu button:last-child { border-bottom: 0; }
.interactive-table-filter-menu button::before { width: .85rem; color: var(--teal-dark); content: ""; }
.interactive-table-filter-menu button[data-selected="true"]::before { content: "✓"; }
.interactive-table-filter-menu button:hover,
.interactive-table-filter-menu button:focus-visible { background: var(--teal-pale); color: var(--teal-dark); outline: 0; }
.interactive-table-filter-empty { min-height: 2.15rem; }
.interactive-table-filtered-out { display: none !important; }
.bol-link-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fffdfc; }
.bol-link-filters label { display: grid; min-width: 11rem; gap: .32rem; color: var(--ink-soft); font-size: .72rem; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.bol-link-filters label:first-child { flex: 1 1 17rem; max-width: 28rem; }
.bol-link-filters input, .bol-link-filters select { height: 38px; border: 1px solid #ded9d7; border-radius: var(--ui-radius); background: #fcfaf9; color: var(--ink); padding: 8px 10px; font-size: .76rem; letter-spacing: normal; text-transform: none; }
.bol-unmatched-section { margin-top: 2.25rem; }
.bol-unmatched-tabs { display: inline-flex; align-self: end; min-height: 38px; overflow: hidden; border: 1px solid #ded9d7; border-radius: var(--ui-radius); background: #fcfaf9; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85); }
.bol-unmatched-tab { padding: 0 .82rem; border: 0; border-right: 1px solid #ded9d7; background: transparent; color: var(--ink-soft); font: 750 .76rem/1 inherit; cursor: pointer; }
.bol-unmatched-tab:last-child { border-right: 0; }
.bol-unmatched-tab:hover:not(.is-active) { background: var(--teal-pale); color: var(--teal-dark); }
.bol-unmatched-tab.is-active { background: var(--teal-dark); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.bol-unmatched-tab:focus-visible { position: relative; outline: 2px solid var(--teal-dark); outline-offset: -2px; }
.bol-search-input { position: relative; display: block; }
.bol-search-input > span { position: absolute; top: 50%; left: .7rem; color: var(--ink-soft); font-size: 1rem; pointer-events: none; transform: translateY(-50%); }
.bol-search-input input { width: 100%; padding-left: 2rem; }
.bol-result-count { margin-left: auto; border-radius: 999px; background: var(--rose-pale); color: var(--rose-dark); padding: .45rem .65rem; font-size: .72rem; font-weight: 750; white-space: nowrap; }
.bol-document-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.bol-document-table-wrap .module-data-table th, .bol-document-table-wrap .module-data-table td { padding: .75rem .9rem; }
.bol-document-icon-column { width: 3.65rem; min-width: 3.65rem; text-align: center !important; }
.bol-document-icon { display: inline-grid; width: 2.15rem; height: 2.15rem; place-items: center; border: 0; border-radius: var(--ui-radius); color: inherit; cursor: pointer; font-size: 1rem; font-weight: 800; outline-offset: .14rem; text-decoration: none; }
a.bol-document-icon:hover { transform: translateY(-1px); box-shadow: 0 .28rem .75rem rgba(48, 45, 45, .14); }
.bol-document-icon.excel { background: #e6f2e7; color: #2f7253; }
.bol-document-icon.pdf { background: #f7e8e5; color: #a54b40; }
.bol-document-icon.missing { background: #f4f1ef; color: #8b8380; }
.bol-document-icon svg { width: 1.15rem; height: 1.15rem; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bol-document-icon-column > svg { display: block; width: 1rem; height: 1rem; margin: auto; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bol-sales-heading { padding: .25rem 0 1.7rem; }
.bol-sales-heading h2 { margin: 0; font: 700 1.4rem/1.1 var(--font-ui); letter-spacing: -.035em; }
.bol-sales-heading p { margin: .55rem 0 0; color: var(--ink-soft); font-size: .95rem; }
.bol-sales-heading.compact { padding: 0 0 1rem; }
.bol-sales-heading.compact h2 { font-size: 1.4rem; }
.bol-sales-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 1.2rem; margin: 0 -1.4rem; padding: 1.45rem 1.4rem; border-top: 1px solid #eedfdd; border-bottom: 1px solid #eedfdd; background: #fffdfc; }
.bol-sales-filters label { display: grid; min-width: 20.25rem; gap: .62rem; color: var(--ink-soft); font-size: .74rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.bol-sales-filters label + label { min-width: 20.25rem; }
.bol-sales-filters select { height: 44px; border: 1px solid #d9d2d0; border-radius: var(--ui-radius); background: #fff; color: var(--ink); padding: 0 .85rem; font-size: .95rem; font-weight: 500; letter-spacing: normal; text-transform: none; }
.bol-sales-count { margin-left: auto; margin-bottom: 0; border-radius: 999px; background: #f3f3ef; color: var(--ink-soft); padding: .62rem .9rem; font-size: .82rem; font-weight: 750; white-space: nowrap; }
.bol-sales-table-wrap { margin: 0 -1.4rem; overflow-x: auto; border-bottom: 1px solid #eedfdd; background: #fff; }
.bol-sales-table { width: 100%; min-width: 56rem; border-collapse: collapse; font-size: .94rem; }
.bol-sales-table th, .bol-sales-table td { padding: 1.2rem 1.4rem; border-bottom: 1px solid #eee9e7; text-align: left; vertical-align: middle; white-space: nowrap; }
.bol-sales-table thead th { background: #fcfdfc; color: var(--ink-soft); font-size: .76rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.bol-sales-table td.numeric, .bol-sales-table th.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.bol-sales-table .bol-sales-period { font-weight: 750; }
.bol-sales-table td:nth-child(2) { min-width: 13rem; }
.bol-country-flag { display: inline-grid; width: 2.1rem; height: 1.4rem; margin-right: .65rem; place-items: center; overflow: hidden; border-radius: var(--ui-radius); background: #f1efee; box-shadow: 0 0 0 1px rgba(60, 53, 53, .13); font-size: 1.35rem; line-height: 1; vertical-align: -.18rem; }
.bol-sales-including { color: var(--teal-dark); font-weight: 800; }
.bol-sales-table .status-pill { min-width: 6.8rem; justify-content: center; }
.bol-sales-table tfoot th, .bol-sales-table tfoot td { border-top: 2px solid #eedfdd; border-bottom: 0; background: #fffdfc; font-weight: 800; }
.bol-sales-total-label { font-size: 1rem; text-transform: none !important; letter-spacing: normal !important; }
.bol-oss-section { margin-top: 2.8rem; }
.bol-document-preview-dialog, .crm-attachment-preview-dialog { width: min(74rem, calc(100% - 2rem)); max-width: none; }
.bol-document-preview { display: flex; height: min(53rem, calc(100vh - 2rem)); flex-direction: column; overflow: hidden; padding: 0; }
.bol-document-preview-heading { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.45rem; border-bottom: 1px solid var(--line); }
.bol-document-preview-heading h2 { margin: .15rem 0 .25rem; }
.bol-document-preview .dialog-heading { flex: 0 0 auto; padding: 1.25rem 1.45rem; border-bottom: 1px solid var(--line); }
.bol-document-preview .dialog-heading h2 { max-width: 56rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bol-preview-body { min-height: 0; flex: 1 1 auto; overflow: hidden; padding: 1rem; background: #e5e8e5; }
.bol-preview-pdf { width: 100%; height: 100%; border: 1px solid #cfd5d1; border-radius: var(--ui-radius); background: white; }
.bol-excel-preview-wrap { width: 100%; height: 100%; overflow: auto; border: 1px solid #cfd5d1; border-radius: var(--ui-radius); background: white; }
.bol-excel-preview-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.bol-excel-preview-table td { max-width: 21rem; overflow: hidden; border-right: 1px solid #e2e6e3; border-bottom: 1px solid #e2e6e3; background: white; padding: .5rem .65rem; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.bol-excel-preview-table tr.bol-excel-preview-header td { position: sticky; top: 0; z-index: 1; background: #2a3934; color: white; font-weight: 750; }
.bol-preview-message { display: grid; height: 100%; place-items: center; border-radius: var(--ui-radius); background: white; color: var(--ink-soft); }
.bol-preview-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.45rem; border-top: 1px solid var(--line); }
.bol-preview-footer span { color: var(--ink-soft); font-size: .72rem; }
.document-generator-preview-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.module-placeholder {
  display: grid;
  justify-items: start;
  max-width: 46rem;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: white;
}
.module-placeholder .status-pill { margin-bottom: 1rem; }
.module-placeholder .button { margin-top: .6rem; }

.integration-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.integration-summary-card, .integration-flow-card, .integration-form { padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fff; }
.integration-summary-card.safe { background: #f5faf7; border-color: #cee1d5; }
.integration-summary-card > span { color: var(--ink-soft); font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.integration-summary-card h2 { margin: .35rem 0 .75rem; font: 600 1.25rem var(--font-ui); }
.integration-summary-card strong { display: block; color: var(--ink); font-size: .9rem; }
.integration-summary-card p { margin: .35rem 0 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.5; }
.smartlife-workspace { display: grid; gap: 1.25rem; }
.smartlife-refresh-block { display: grid; justify-items: end; gap: .45rem; color: var(--ink-soft); }
.smartlife-dashboard { display: grid; grid-template-columns: minmax(18rem, .9fr) minmax(28rem, 1.4fr); gap: 1rem; align-items: start; }
.smartlife-sensor-card, .smartlife-switch-card, .smartlife-switch-section, .smartlife-thermostat-section, .smartlife-history-section, .smartlife-chart-card, .smartlife-safety-note { border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fff; }
.smartlife-sensor-card, .smartlife-switch-section { padding: 1.2rem; }
.smartlife-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.smartlife-card-heading h2 { margin: .25rem 0 0; font: 600 1.1rem var(--font-ui); }
.smartlife-card-heading .status-pill.ok { border: 1px solid #a8d5b8; color: #245e3c; background: #dff2e6; }
.smartlife-readings { display: grid; grid-template-columns: 1fr; gap: .65rem; margin-top: 1.25rem; }
.smartlife-reading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 4.7rem; padding: .9rem; border-radius: var(--ui-radius); background: var(--surface-soft); }
.smartlife-reading-value { display: grid; gap: .3rem; min-width: 0; }
.smartlife-reading-value > span { color: var(--ink-soft); font-size: .75rem; }
.smartlife-reading-value > strong { color: var(--ink); font: 650 1.65rem var(--font-ui); }
.smartlife-reading-assessment { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem .55rem; max-width: 15rem; text-align: right; }
.smartlife-reading-assessment .status-pill { font-size: .75rem; }
.smartlife-reading-assessment small { color: var(--ink-soft); font-size: .7rem; font-weight: 650; line-height: 1.3; }
.smartlife-sensor-measured-at { margin: .8rem 0 0; color: var(--ink-soft); font-size: .72rem; }
.smartlife-switch-section .section-heading { margin: 0 0 .9rem; }
.smartlife-switch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.smartlife-switch-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: .8rem; padding: 1rem; transition: border-color .2s ease, box-shadow .2s ease; }
.smartlife-switch-card.is-on.smartlife-device-fan { border-color: #9ccfbe; box-shadow: 0 .55rem 1.3rem rgba(38, 105, 86, .1); }
.smartlife-switch-card.is-on.smartlife-device-heater { border-color: #e5b3a7; box-shadow: 0 .55rem 1.3rem rgba(166, 75, 55, .1); }
.smartlife-switch-card header { display: flex; align-items: start; justify-content: space-between; gap: .6rem; }
.smartlife-switch-card h3 { margin: 0; font: 600 1rem var(--font-ui); }
.smartlife-switch-card p { margin: 0; color: var(--ink-soft); font-size: .8rem; }
.smartlife-switch-card .button { width: 100%; }
.smartlife-device-visual { display: grid; justify-items: center; gap: .35rem; min-height: 8rem; padding: .45rem .75rem .65rem; overflow: hidden; border: 1px solid #e7e3e1; border-radius: var(--ui-radius); background: #f7f6f5; color: #5f6966; }
.smartlife-device-visual.is-on.smartlife-device-fan { border-color: #c6e3d9; background: linear-gradient(145deg, #f4fbf8, #e7f5f0); color: #2f7864; }
.smartlife-device-visual.is-on.smartlife-device-heater { border-color: #efd1c9; background: linear-gradient(145deg, #fff8f5, #fae9e3); color: #a34f3f; }
.smartlife-device-visual.is-unavailable { opacity: .72; }
.smartlife-device-icon { display: block; width: 6rem; height: 5.3rem; overflow: visible; }
.smartlife-device-caption { color: currentColor; font-size: .72rem; font-weight: 750; line-height: 1.25; text-align: center; }
.smartlife-fan-ring, .smartlife-fan-stand, .smartlife-radiator-body, .smartlife-power-ring, .smartlife-power-mark { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.smartlife-fan-blade { fill: currentColor; opacity: .78; }
.smartlife-fan-hub { fill: #fff; stroke: currentColor; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.smartlife-fan-rotor { transform-box: view-box; transform-origin: 48px 36px; }
.smartlife-device-visual.is-on .smartlife-fan-rotor { animation: smartlife-fan-spin .9s linear infinite; }
.smartlife-radiator-body rect { fill: rgba(255, 255, 255, .58); }
.smartlife-heat-wave { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2.6; opacity: 0; vector-effect: non-scaling-stroke; }
.smartlife-device-visual.is-on .smartlife-heat-wave { animation: smartlife-heat-rise 1.55s ease-in-out infinite; }
.smartlife-device-visual.is-on .smartlife-heat-wave-2 { animation-delay: .25s; }
.smartlife-device-visual.is-on .smartlife-heat-wave-3 { animation-delay: .5s; }
.smartlife-power-ring, .smartlife-power-mark { stroke-width: 3; }
.smartlife-device-visual.is-on.smartlife-device-switch { border-color: #c6e3d9; background: #edf8f4; color: #2f7864; }
@keyframes smartlife-fan-spin { to { transform: rotate(360deg); } }
@keyframes smartlife-heat-rise {
  0% { opacity: 0; transform: translateY(.35rem); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-.45rem); }
}
@media (prefers-reduced-motion: reduce) {
  .smartlife-switch-card { transition: none; }
  .smartlife-device-visual.is-on .smartlife-fan-rotor { animation: none; }
  .smartlife-device-visual.is-on .smartlife-heat-wave { animation: none; opacity: .8; transform: none; }
}
.smartlife-thermostat-section { display: grid; gap: 1rem; padding: 1.2rem; }
.smartlife-thermostat-section .smartlife-card-heading h2 { margin: 0 0 .25rem; }
.smartlife-thermostat-section .smartlife-card-heading p { margin: 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.45; }
.smartlife-thermostat-state { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .9rem 1rem; border: 1px solid #d9e6dd; border-radius: var(--ui-radius); background: #f7fbf8; }
.smartlife-thermostat-state > p { margin: 0; color: var(--ink); font-weight: 650; line-height: 1.45; }
.smartlife-thermostat-state dl { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem 1.25rem; margin: 0; }
.smartlife-thermostat-state dl div { display: grid; gap: .12rem; }
.smartlife-thermostat-state dt { color: var(--ink-soft); font-size: .66rem; }
.smartlife-thermostat-state dd { margin: 0; font-size: .78rem; font-weight: 750; }
.smartlife-thermostat-layout { display: grid; grid-template-columns: minmax(20rem, .9fr) minmax(24rem, 1.1fr); gap: 1rem; align-items: start; }
.smartlife-thermostat-form, .smartlife-thermostat-planning { display: grid; gap: .85rem; min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.smartlife-thermostat-form h3, .smartlife-thermostat-planning h3 { margin: 0; font: 600 1rem var(--font-ui); }
.smartlife-thermostat-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.smartlife-thermostat-fields label { display: grid; gap: .3rem; color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.smartlife-thermostat-fields label:last-child { grid-column: 1 / -1; }
.smartlife-thermostat-fields input { width: 100%; min-width: 0; border: 1px solid #d8d1ce; border-radius: var(--ui-radius); background: #fff; color: var(--ink); padding: .62rem .7rem; font: inherit; }
.smartlife-thermostat-form fieldset { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin: 0; padding: .8rem; border: 1px solid #d8d1ce; border-radius: var(--ui-radius); background: #fff; }
.smartlife-thermostat-form legend { padding: 0 .3rem; color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.smartlife-thermostat-form fieldset label { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 650; }
.smartlife-thermostat-form input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--teal-dark); }
.smartlife-thermostat-form-note { margin: 0; color: var(--ink-soft); font-size: .7rem; line-height: 1.45; }
.smartlife-thermostat-form .button { justify-self: start; }
.smartlife-thermostat-schedules { display: grid; gap: .65rem; }
.smartlife-thermostat-schedule { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem 1rem; padding: .75rem .8rem; border: 1px solid #ded8d5; border-radius: var(--ui-radius); background: #fff; }
.smartlife-thermostat-schedule header { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.smartlife-thermostat-schedule h4 { margin: 0; font: 650 .85rem var(--font-ui); }
.smartlife-thermostat-schedule p { grid-column: 1; margin: 0; color: var(--ink-soft); font-size: .72rem; line-height: 1.45; }
.smartlife-thermostat-schedule .button { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-height: 2.25rem; padding: .45rem .65rem; }
.smartlife-thermostat-empty { margin: 0; color: var(--ink-soft); font-size: .78rem; }
.smartlife-history-section { display: grid; gap: 1rem; padding: 1.2rem; }
.smartlife-history-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.smartlife-history-heading h2 { margin: .25rem 0 .3rem; font: 600 1.1rem var(--font-ui); }
.smartlife-history-heading p { margin: 0; color: var(--ink-soft); }
.smartlife-range-selector { display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.smartlife-range-button { min-height: 2.45rem; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink-soft); padding: .55rem .85rem; font-size: .8rem; font-weight: 700; }
.smartlife-range-button:last-child { border-right: 0; }
.smartlife-range-button:hover { color: var(--ink); }
.smartlife-range-button:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(165,89,89,.28); outline-offset: -3px; }
.smartlife-range-button[aria-pressed="true"] { background: var(--teal); color: #fff; }
.smartlife-history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.smartlife-chart-card { min-width: 0; padding: 1rem; }
.smartlife-chart-card > header { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: .75rem; }
.smartlife-chart-card h3 { margin: .15rem 0; font: 600 1rem var(--font-ui); }
.smartlife-chart-summary { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0; }
.smartlife-chart-summary div { display: grid; gap: .1rem; }
.smartlife-chart-summary dt { color: var(--ink-soft); font-size: .67rem; }
.smartlife-chart-summary dd { margin: 0; font-size: .8rem; font-weight: 750; }
.smartlife-chart { position: relative; min-height: 16rem; margin-top: .55rem; overflow: hidden; }
.smartlife-chart svg { display: block; width: 100%; height: 16rem; }
.smartlife-chart-frame { fill: var(--surface); stroke: var(--line); }
.smartlife-chart-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.smartlife-chart-axis-label { fill: var(--ink-soft); font: 11px var(--font-ui); }
.smartlife-chart-axis-title { fill: var(--ink); font: 600 11px var(--font-ui); }
.smartlife-chart-line { fill: none; stroke: var(--teal); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.25; vector-effect: non-scaling-stroke; }
.smartlife-chart-humidity .smartlife-chart-line { stroke: #28659f; }
.smartlife-chart-point { fill: var(--surface); stroke: var(--teal); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.smartlife-chart-humidity .smartlife-chart-point { stroke: #28659f; }
.smartlife-chart-guide { stroke: var(--ink-soft); stroke-dasharray: 3 3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.smartlife-chart-marker { fill: var(--surface); stroke: var(--teal); stroke-width: 2; vector-effect: non-scaling-stroke; }
.smartlife-chart-humidity .smartlife-chart-marker { stroke: #28659f; }
.smartlife-chart-hit { fill: transparent; cursor: crosshair; }
.smartlife-chart-tooltip { position: absolute; z-index: 2; max-width: 13rem; transform: translate(-50%, calc(-100% - .55rem)); border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--ink); color: #fff; padding: .42rem .55rem; font-size: .7rem; line-height: 1.35; pointer-events: none; box-shadow: var(--shadow); }
.smartlife-chart-empty { display: grid; min-height: 16rem; place-items: center; margin: 0; color: var(--ink-soft); text-align: center; }
.smartlife-safety-note { padding: 1rem 1.2rem; background: #fffaf0; border-color: #ead9af; }
.smartlife-safety-note p { margin: .35rem 0 0; color: var(--ink-soft); line-height: 1.5; }
.integration-flow-card { margin-top: 1rem; }
.integration-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; counter-reset: integration-step; }
.integration-flow li { counter-increment: integration-step; display: grid; gap: .25rem; position: relative; padding: .9rem .9rem .9rem 2.8rem; border-radius: var(--ui-radius); background: #f8f5f4; }
.integration-flow li::before { content: counter(integration-step); position: absolute; left: .85rem; top: .85rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--ink); color: white; font-size: .7rem; font-weight: 800; }
.integration-flow span { color: var(--ink-soft); font-size: .78rem; line-height: 1.4; }
.integration-form { max-width: 64rem; }
.shopify-app-fields { border: 0; padding: 0; margin: 1rem 0 0; min-width: 0; }
.integration-form .section-heading { margin-top: 0; }
.integration-fields { display: grid; gap: 1rem; margin-top: 1rem; }
.integration-fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.integration-fields .full { grid-column: 1 / -1; }
.integration-fields label, .integration-fields .integration-field { display: grid; gap: .35rem; color: var(--ink-soft); font-size: .75rem; font-weight: 750; }
.integration-fields label[hidden] { display: none; }
.integration-fields input, .integration-fields select, .integration-fields textarea { width: 100%; border: 1px solid #d9d2d0; border-radius: var(--ui-radius); background: #fcfaf9; color: var(--ink); padding: .68rem .72rem; font: 500 .88rem/1.35 var(--font-ui); }
.integration-fields small { color: var(--ink-soft); font-size: .7rem; font-weight: 500; line-height: 1.4; }
.transfernow-password-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; }
.transfernow-password-controls .button { white-space: nowrap; }
.integration-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.transfernow-download-limit-editor { align-items: end; background: var(--paper); border: 1px solid var(--line); border-radius: var(--ui-radius); display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .8rem; padding: .85rem; }
.transfernow-download-limit-editor label { display: grid; gap: .35rem; max-width: 14rem; }
.transfernow-download-limit-editor input { min-height: 2.8rem; }
.integration-security-note { margin: 1rem 0; padding: .85rem 1rem; border-left: 3px solid #d9a82e; background: #fff8e8; color: var(--ink-soft); font-size: .8rem; line-height: 1.5; }
.integration-source-layout { display: block; max-width: 64rem; }
.integration-connector-dashboard { max-width: 52rem; }
.integration-connector-dashboard .section-heading p:not(.eyebrow) { margin: .35rem 0 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.5; }
.integration-connector-list { display: grid; gap: .75rem; margin-top: 1rem; }
.integration-connector-card { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto 1rem; align-items: center; gap: 1rem; width: 100%; min-height: 5rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fff; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.integration-connector-card:hover { border-color: #b9aaa7; box-shadow: 0 .45rem 1.25rem rgba(57, 39, 34, .08); transform: translateY(-1px); }
.integration-connector-card:focus-visible { outline: 3px solid rgba(163, 66, 47, .22); outline-offset: 2px; }
.integration-connector-logo { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; overflow: hidden; border-radius: var(--ui-radius); font: 800 .72rem/1 var(--font-ui); letter-spacing: -.02em; }
.integration-connector-logo svg { width: 2.7rem; height: 2.7rem; }
.integration-connector-logo img { width: 100%; height: 100%; object-fit: contain; padding: .35rem; }
.integration-connector-logo.afas-logo { background: #e63329; color: #fff; letter-spacing: .02em; }
.integration-connector-logo.luca-logo { background: #fff1ee; border: 1px solid #ead1cb; color: #ad4f4a; }
.integration-connector-logo.luca-logo svg { width: 2.65rem; height: 2.65rem; }
.luca-invoice-paper { fill: currentColor; }
.luca-invoice-mark { fill: none; stroke: #fff; stroke-linecap: round; stroke-width: 2.4; }
.luca-invoice-dot { fill: #efc66d; stroke: #fff; stroke-width: 1.5; }
.integration-connector-logo.shopify-logo { background: #f2f8ea; color: #86b63d; }
.integration-connector-logo.shopify-logo svg { fill: currentColor; }
.integration-connector-logo.salesforce-logo { background: #eaf8fd; color: #0d9dda; }
.integration-connector-logo.salesforce-logo svg { fill: currentColor; }
.integration-connector-copy { display: grid; gap: .28rem; min-width: 0; }
.integration-connector-copy strong { font-size: 1rem; }
.integration-connector-copy small { color: var(--ink-soft); font-size: .76rem; line-height: 1.35; }
.integration-connector-arrow { color: var(--ink-soft); font-size: 1.55rem; line-height: 1; }
.integration-configured-sources { margin-top: 2rem; }
.integration-source-detail { max-width: 64rem; }
.integration-connector-panels { display: grid; gap: 1.15rem; }
.integration-mapping-card { margin: 0; }
.integration-source-back { margin-bottom: 1rem; }
.integration-instructions { margin: 1rem 0 1.25rem; border: 1px solid #ded6d3; border-radius: var(--ui-radius); background: #fbf9f8; }
.integration-instructions summary { padding: .9rem 1rem; color: var(--ink); font-weight: 750; cursor: pointer; }
.integration-instructions[open] summary { border-bottom: 1px solid #e7e0dd; }
.integration-instructions ol { display: grid; gap: .65rem; margin: 1rem 1.25rem .8rem 2.6rem; padding: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.5; }
.integration-instructions p { margin: .8rem 1.25rem; color: var(--ink-soft); font-size: .8rem; line-height: 1.5; }
.integration-instructions .inline-link { display: inline-block; margin: 0 1.25rem 1.15rem; font-size: .8rem; font-weight: 700; }
.integration-instructions kbd { padding: .12rem .3rem; border: 1px solid #cfc6c3; border-bottom-width: 2px; border-radius: var(--ui-radius); background: #fff; color: var(--ink); font: 650 .72rem var(--font-ui); }
.integration-setup-values { display: grid; gap: .55rem; margin: .75rem 0 .25rem; }
.integration-setup-values > div { display: grid; grid-template-columns: minmax(8.5rem, .38fr) minmax(0, 1fr); gap: .75rem; padding: .65rem .75rem; border: 1px solid #e2dad7; border-radius: var(--ui-radius); background: #fff; }
.integration-setup-values dt { color: var(--ink); font-weight: 750; }
.integration-setup-values dd { margin: 0; }
.integration-paste-value { display: block; padding: .55rem .65rem; border-left: 3px solid var(--rose); border-radius: var(--ui-radius); background: #f8f3f2; color: var(--ink); line-height: 1.55; user-select: text; }
.integration-instructions .integration-instruction-note { margin-top: 1rem; padding: .75rem .85rem; border-left: 3px solid #d6a900; background: #fff8e6; color: var(--ink); }
.integration-oauth-status { display: grid; gap: .45rem; margin: 1rem 0; padding: .85rem 1rem; border: 1px solid #ded6d3; border-radius: var(--ui-radius); background: #fff; }
.integration-oauth-status > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.integration-oauth-status p { margin: 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.5; }
.transfernow-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 1fr); gap: 1rem; align-items: start; }
.transfernow-progress { width: 100%; height: .8rem; margin: .8rem 0; accent-color: var(--teal); }
.transfernow-result { display: flex; align-items: end; gap: .7rem; margin-top: 1rem; }
.transfernow-result label { display: grid; flex: 1; gap: .35rem; color: var(--ink-soft); font-size: .75rem; font-weight: 750; }
.transfernow-result input { width: 100%; border: 1px solid #d9d2d0; border-radius: var(--ui-radius); background: #fcfaf9; padding: .68rem .72rem; }
@media (max-width: 900px) {
  .integration-setup-values > div { grid-template-columns: 1fr; gap: .3rem; }
  .integration-summary-grid, .integration-flow, .integration-source-layout, .transfernow-layout, .smartlife-dashboard, .smartlife-thermostat-layout, .smartlife-history-grid { grid-template-columns: 1fr; }
  .smartlife-switch-grid { grid-template-columns: 1fr; }
  .smartlife-history-heading { align-items: start; flex-direction: column; }
  .smartlife-refresh-block { justify-items: start; }
  .smartlife-thermostat-state { grid-template-columns: 1fr; }
  .smartlife-thermostat-state dl { justify-content: flex-start; }
  .document-generator-layout, .objection-generator-layout, .document-generator-fields, .document-generator-address-grid, .document-generator-postal-address, .document-generator-postal-options, .payment-arrangement-repeat-item, .payment-arrangement-details[open], .payment-arrangement-forecast-actions { grid-template-columns: 1fr; }
  .document-generator-checks { grid-template-columns: 1fr; }
  .document-generator-aside { position: static; }
  .objection-source-preview:not([hidden]) { position: fixed; z-index: 80; inset: .5rem; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; overflow: hidden; box-shadow: 0 1.2rem 3rem rgba(24,31,29,.28); }
  .objection-source-preview-scroll { max-height: none; min-height: 0; }
}
@media (max-width: 600px) {
  .integration-instructions ol { margin: .85rem .8rem .7rem 2rem; }
  .integration-instructions li,
  .integration-setup-values,
  .integration-setup-values > div { min-width: 0; }
  .integration-setup-values > div { padding: .6rem; }
  .integration-paste-value { overflow-wrap: anywhere; }
  .integration-instructions .integration-instruction-note { margin-right: .8rem; }
}
@media (max-width: 719px) {
  .integration-fields.two { grid-template-columns: 1fr; }
  .integration-connector-card { grid-template-columns: 2.8rem minmax(0, 1fr) 1rem; gap: .75rem; }
  .integration-connector-logo { width: 2.8rem; height: 2.8rem; }
  .integration-connector-card .status-pill { grid-column: 2; justify-self: start; }
  .integration-connector-arrow { grid-column: 3; grid-row: 1 / span 2; }
  .smartlife-readings { grid-template-columns: 1fr; }
  .smartlife-range-selector { width: 100%; }
  .smartlife-range-button { flex: 1; padding-inline: .5rem; }
}
@media (max-width: 520px) {
  .transfernow-password-controls { grid-template-columns: 1fr; }
  .smartlife-reading { grid-template-columns: 1fr; gap: .65rem; }
  .smartlife-reading-assessment { justify-content: flex-start; max-width: none; text-align: left; }
  .smartlife-thermostat-fields { grid-template-columns: 1fr; }
  .smartlife-thermostat-fields label:last-child { grid-column: auto; }
  .smartlife-thermostat-schedule { grid-template-columns: 1fr; }
  .smartlife-thermostat-schedule .button { grid-column: 1; grid-row: auto; justify-self: start; }
}
.savings-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: #fffdfc;
}
.savings-toolbar p { max-width: 52rem; margin: 0; color: var(--ink-soft); line-height: 1.55; }
.savings-toolbar label { display: grid; min-width: 13rem; gap: .35rem; color: var(--ink-soft); font-size: .72rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.savings-toolbar select { height: 40px; border: 1px solid #d9d2d0; border-radius: var(--ui-radius); background: white; padding: 0 .7rem; color: var(--ink); font-size: .86rem; letter-spacing: normal; text-transform: none; }
.savings-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.savings-kpi { display: grid; align-content: start; min-height: 9.5rem; padding: 1.1rem; border: 1px solid var(--line); border-top: .28rem solid var(--teal); border-radius: var(--ui-radius); color: inherit; background: white; font: inherit; text-align: left; cursor: pointer; appearance: none; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.savings-kpi:hover { border-color: #bcb2af; box-shadow: 0 .35rem 1rem rgba(58, 50, 48, .09); transform: translateY(-1px); }
.savings-kpi:focus-visible { outline: 3px solid rgba(38, 107, 104, .3); outline-offset: 2px; }
.savings-kpi::after { margin-top: .75rem; color: var(--teal-dark); content: "Bekijk opbouw →"; font-size: .72rem; font-weight: 750; }
.savings-kpi.primary { border-top-color: #27604a; background: #f2f8f4; }
.savings-kpi.avoided { border-top-color: #7398bf; }
.savings-kpi.cost { border-top-color: #d78377; }
.savings-kpi.total { border-top-color: #4b748f; background: #f3f7fa; }
.savings-kpi.time { border-top-color: #b18cb8; }
.savings-kpi.time-cost { border-top-color: #b98155; background: #fdf6ef; }
.savings-kpi span { color: var(--ink-soft); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.savings-kpi strong { margin: .7rem 0 .55rem; color: var(--ink); font: 700 clamp(1.2rem, 2vw, 1.75rem)/1.05 var(--font-ui); font-variant-numeric: tabular-nums; }
.savings-kpi small { margin-top: auto; color: var(--ink-soft); font-size: .73rem; line-height: 1.45; }
.savings-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.savings-financial-trend-card { grid-column: 1 / -1; }
.savings-chart-card, .savings-month-table-section, .savings-form, .savings-register-list { padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.savings-chart { width: 100%; min-height: 18.25rem; overflow-x: auto; overflow-y: hidden; }
.savings-chart svg { display: block; width: 100%; height: 18.25rem; }
.savings-chart svg[width] { min-width: 100%; }
.savings-chart-axis { stroke: #cfc8c5; stroke-width: 1; }
.savings-chart-label { fill: #766e6b; font: 10px var(--font-ui); text-anchor: middle; text-transform: capitalize; }
.savings-bar-actual { fill: #36765d; }
.savings-bar-avoided { fill: #7398bf; }
.savings-bar-cost { fill: #d78377; }
.savings-time-bar { fill: #d9bfdc; }
.savings-integration-bar { fill: #d7a879; }
.savings-time-line { fill: none; stroke: #77557f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.savings-financial-line { fill: none; stroke: #27604a; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.savings-financial-total-line { fill: none; stroke: #4b748f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.savings-financial-line-point { fill: #27604a; }
.savings-financial-total-line-point { fill: #4b748f; }
.savings-legend { display: flex; flex-wrap: wrap; gap: 1rem; min-height: 1.5rem; color: var(--ink-soft); font-size: .72rem; }
.savings-legend span::before { display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem; border-radius: var(--ui-radius); content: ""; vertical-align: -.05rem; }
.savings-legend .actual::before { background: #36765d; }
.savings-legend .avoided::before { background: #7398bf; }
.savings-legend .cost::before { background: #d78377; }
.savings-legend .net::before { background: #27604a; }
.savings-legend .total::before { background: #4b748f; }
.savings-legend .time::before { background: #d9bfdc; }
.savings-legend .integration::before { background: #d7a879; }
.savings-legend .net-time::before { background: #77557f; border-radius: 50%; }
.savings-chart-note { min-height: 1.5rem; margin: 0; color: var(--ink-soft); font-size: .72rem; }
.savings-month-table-section { margin-top: 1rem; }
.savings-table-wrap { overflow-x: auto; }
.savings-table { width: 100%; min-width: 46rem; border-collapse: collapse; }
.savings-table td { font-variant-numeric: tabular-nums; }
.savings-entry-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; }
.savings-form { display: grid; gap: .85rem; }
.savings-form label { display: grid; gap: .35rem; color: var(--ink-soft); font-size: .75rem; font-weight: 750; }
.savings-form input, .savings-form select, .savings-form textarea { width: 100%; border: 1px solid #d9d2d0; border-radius: var(--ui-radius); background: #fcfaf9; color: var(--ink); padding: .68rem .72rem; font: 500 .88rem/1.35 var(--font-ui); }
.savings-form textarea { resize: vertical; }
.savings-form .button { justify-self: start; }
.savings-date-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.savings-register-list { margin-top: 1rem; }
.savings-register-filters { grid-template-columns: minmax(15rem, 1.5fr) repeat(4, minmax(9rem, 1fr)); }
.savings-register-count { margin: -.2rem 0 .8rem; }
.savings-register-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.savings-impact-record .eyebrow { margin: 0 0 .3rem; }
.savings-automatic-measurements .section-heading { align-items: start; }
.savings-automatic-measurements .section-heading p { max-width: 54rem; margin: .45rem 0 0; color: var(--ink-soft); line-height: 1.55; }
.savings-automatic-rule { display: grid; grid-template-columns: minmax(18rem, 1.15fr) minmax(24rem, .85fr); gap: 1.2rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid #c9ddd4; border-left: .3rem solid #36765d; border-radius: var(--ui-radius); background: linear-gradient(135deg, #f5fbf7, #fff); }
.savings-automatic-rule h3 { margin: .65rem 0 .35rem; font: 600 1.08rem var(--font-ui); }
.savings-automatic-rule p { margin: 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.55; }
.savings-automatic-rule-list { display: grid; gap: .8rem; }
.savings-automatic-rule-list > div { padding-top: .1rem; }
.savings-automatic-rule-list > div + div { padding-top: .8rem; border-top: 1px solid #d9e7df; }
.savings-automatic-rule-list h3 { margin-top: 0; }
.savings-automatic-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0; }
.savings-automatic-summary div { padding: .72rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.savings-automatic-summary dt { color: var(--ink-soft); font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.savings-automatic-summary dd { margin: .35rem 0 0; color: var(--ink); font: 700 1rem var(--font-ui); }
.savings-automatic-table { min-width: 48rem; }
.savings-automatic-table td:first-child strong, .savings-automatic-table td:first-child small { display: block; }
.savings-automatic-table td:first-child small { margin-top: .2rem; color: var(--ink-soft); }
.savings-time-intro { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; padding: 1.25rem 1.35rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: linear-gradient(135deg, #fff 0%, #f2f8f4 100%); }
.savings-time-intro h2 { margin: .25rem 0 .55rem; font: 500 1.45rem var(--font-ui); }
.savings-time-intro p:not(.eyebrow) { max-width: 52rem; margin: 0; color: var(--ink-soft); line-height: 1.6; }
.savings-work-panel, .savings-work-history { padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.savings-work-panel { margin-top: 1rem; }
.savings-work-fields { display: grid; grid-template-columns: minmax(14rem, .8fr) minmax(18rem, 1.2fr); gap: .85rem; }
.savings-work-fields label { display: grid; gap: .35rem; color: var(--ink-soft); font-size: .75rem; font-weight: 750; }
.savings-work-fields input, .savings-work-fields select { width: 100%; border: 1px solid #d9d2d0; border-radius: var(--ui-radius); background: #fcfaf9; color: var(--ink); padding: .68rem .72rem; font: 500 .88rem/1.35 var(--font-ui); }
.savings-work-timer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: 1rem; }
.savings-work-timer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem 1rem; align-items: center; min-height: 10.5rem; padding: 1.1rem; border: 1px solid var(--line); border-left: .3rem solid #568374; border-radius: var(--ui-radius); background: #fafdfb; }
.savings-work-timer.codex { border-left-color: #617a9f; background: #f7f9fc; }
.savings-work-timer.is-running { box-shadow: 0 0 0 3px rgba(54, 118, 93, .12); }
.savings-work-timer.codex.is-running { box-shadow: 0 0 0 3px rgba(97, 122, 159, .14); }
.savings-work-timer h3 { margin: .2rem 0 0; font: 600 1.05rem var(--font-ui); }
.savings-work-timer > strong { justify-self: end; font: 700 clamp(1.35rem, 2.5vw, 2rem)/1 var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.savings-work-timer > p { align-self: start; margin: 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.45; }
.savings-work-timer > .button { justify-self: end; }
.savings-work-note { margin: .75rem 0 0; color: var(--ink-soft); font-size: .72rem; line-height: 1.5; }
.savings-work-total-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.savings-work-total { display: grid; min-height: 7.5rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-top: .25rem solid #568374; border-radius: var(--ui-radius); background: white; }
.savings-work-total.codex { border-top-color: #617a9f; }
.savings-work-total.combined { border-top-color: #77557f; background: #faf7fb; }
.savings-work-total span { color: var(--ink-soft); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.savings-work-total strong { margin: .55rem 0; font: 700 clamp(1.2rem, 2vw, 1.65rem)/1.05 var(--font-ui); font-variant-numeric: tabular-nums; }
.savings-work-total small { margin-top: auto; color: var(--ink-soft); }
.savings-work-history { margin-top: 1rem; }
.savings-work-table { min-width: 58rem; }
.savings-work-project-table { min-width: 42rem; }
.savings-work-table td:nth-child(2) { max-width: 28rem; overflow-wrap: anywhere; white-space: normal; }
.savings-codex-linker { border-left: .3rem solid #617a9f; background: #f8fafd; }
.savings-tracking-device-form { display: grid; grid-template-columns: minmax(14rem, .8fr) auto; gap: .8rem; align-items: end; margin-top: 1rem; }
.savings-tracking-device-form label { display: grid; gap: .35rem; color: var(--ink-soft); font-size: .75rem; font-weight: 750; }
.savings-tracking-device-form input, .savings-tracked-thread-table select { width: 100%; border: 1px solid #d9d2d0; border-radius: var(--ui-radius); background: white; color: var(--ink); padding: .62rem .68rem; font: 500 .82rem/1.35 var(--font-ui); }
.savings-tracking-device-list { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .75rem; }
.savings-tracking-device { display: inline-flex; align-items: center; gap: .55rem; padding: .48rem .62rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; color: var(--ink-soft); font-size: .75rem; }
.savings-tracking-device strong { color: var(--ink); }
.savings-tracking-device .button { min-height: auto; padding: .35rem .5rem; font-size: .7rem; }
.section-heading.compact.savings-tracked-heading { margin-top: 2.5rem; }
.savings-tracked-heading h3 { margin: .15rem 0 0; font: 600 1.05rem var(--font-ui); }
.savings-tracked-thread-table { min-width: 64rem; }
.savings-tracked-thread-table td:first-child { max-width: 25rem; white-space: normal; overflow-wrap: anywhere; }
.savings-thread-reference { display: grid; gap: .18rem; }
.savings-thread-reference small { color: var(--ink-soft); }
.savings-thread-link-actions { display: grid; grid-template-columns: minmax(12rem, 1fr) auto; gap: .5rem; align-items: center; }
.automation-prompt-intro { background: linear-gradient(135deg, #fff 0%, #f3f7fa 100%); }
.automation-prompt-workspace { display: grid; grid-template-columns: minmax(15rem, .62fr) minmax(0, 1.38fr); gap: 1rem; align-items: start; }
.automation-prompt-library, .automation-prompt-editor { min-height: 32rem; padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.automation-prompt-library-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-bottom: 1rem; }
.automation-prompt-library-actions .button { width: 100%; }
.automation-prompt-list { display: grid; gap: .55rem; }
.automation-prompt-list-item { display: grid; width: 100%; gap: .25rem; padding: .8rem .85rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fcfaf9; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.automation-prompt-list-item:hover { border-color: #aebdba; background: #f7fbfa; }
.automation-prompt-list-item.active { border-color: var(--teal); box-shadow: inset 3px 0 var(--teal); background: #f2f8f4; }
.automation-prompt-list-item strong { font: 600 .96rem var(--font-ui); }
.automation-prompt-list-item span { color: var(--ink-soft); font-size: .72rem; }
.automation-prompt-editor > .module-placeholder { min-height: 29.5rem; align-content: center; }
#automation-prompt-form { display: grid; gap: .9rem; }
.automation-prompt-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.automation-prompt-fields label, .automation-prompt-content-label { display: grid; gap: .35rem; color: var(--ink-soft); font-size: .75rem; font-weight: 750; }
.automation-prompt-fields input, .automation-prompt-fields select, .automation-prompt-content-label textarea { width: 100%; border: 1px solid #d9d2d0; border-radius: var(--ui-radius); background: #fcfaf9; color: var(--ink); padding: .68rem .72rem; font: 500 .88rem/1.5 var(--font-ui); }
.automation-prompt-content-label textarea { min-height: 23rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; tab-size: 2; }
.automation-prompt-processing-help { margin: -.15rem 0 0; padding: .65rem .75rem; border-left: 3px solid #617a9f; border-radius: var(--ui-radius) var(--ui-radius) var(--ui-radius) var(--ui-radius); background: #f4f7fb; color: var(--ink-soft); font-size: .75rem; line-height: 1.5; }
.automation-faq-editor { display: grid; gap: .75rem; padding: .9rem; border: 1px solid #d8e3df; border-radius: var(--ui-radius); background: #f8fbfa; }
.automation-faq-editor[hidden] { display: none; }
.automation-faq-editor .section-heading { align-items: start; }
.automation-faq-editor .section-heading p { max-width: 48rem; margin: .25rem 0 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.5; }
.automation-faq-list { display: grid; gap: .7rem; }
.automation-faq-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.automation-faq-card > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .75rem .8rem; cursor: pointer; list-style-position: inside; }
.automation-faq-card > summary::marker { color: var(--teal-dark); }
.automation-faq-card > summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.automation-faq-id { color: var(--ink-soft); font: 700 .68rem var(--font-ui); letter-spacing: .045em; text-transform: uppercase; }
.automation-faq-card-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; padding: .8rem; border-top: 1px solid var(--line); background: #fcfaf9; }
.automation-faq-card-fields label, .automation-faq-textarea { display: grid; gap: .3rem; color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.automation-faq-category-field { display: grid; gap: .3rem; color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.automation-faq-category-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; align-items: stretch; }
.automation-faq-category-control .button { min-height: 0; padding: .45rem .6rem; font-size: .68rem; white-space: nowrap; }
.automation-faq-card-fields input, .automation-faq-card-fields select, .automation-faq-textarea textarea { width: 100%; border: 1px solid #d9d2d0; border-radius: var(--ui-radius); background: white; color: var(--ink); padding: .58rem .64rem; font: 500 .8rem/1.45 var(--font-ui); }
.automation-faq-card-fields input[readonly] { background: #f2f2f2; color: var(--ink-soft); }
.automation-faq-card-text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: .8rem; }
.automation-faq-textarea:nth-child(2) { grid-column: 1 / -1; }
.automation-faq-textarea textarea { min-height: 5.5rem; resize: vertical; }
.automation-faq-textarea small { color: var(--ink-soft); font-size: .66rem; font-weight: 500; line-height: 1.4; }
.automation-faq-card-actions { display: flex; justify-content: flex-end; padding: 0 .8rem .8rem; }
.automation-faq-card-actions .button { min-height: 2.15rem; padding: .45rem .65rem; font-size: .7rem; }
.automation-prompt-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.automation-prompt-review { display: grid; gap: .8rem; margin-top: .2rem; padding: 1rem; border: 1px solid #cfded9; border-radius: var(--ui-radius); background: linear-gradient(135deg, #f7fbfa, #fff); }
.automation-prompt-review[hidden] { display: none; }
.automation-prompt-review-scores { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.automation-prompt-review-subheading { margin: .15rem 0 -.35rem; color: var(--ink); font: 600 1rem var(--font-ui); }
.automation-prompt-review-summary { margin: 0; color: var(--ink-soft); font-size: .85rem; line-height: 1.55; }
.automation-prompt-review-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.automation-prompt-review-check { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .5rem; align-items: start; padding: .7rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.automation-prompt-review-check.passed { border-color: #c6dfd0; background: #f5fbf7; }
.automation-prompt-review-check.missing { border-color: #e3d7bc; background: #fffbf2; }
.automation-prompt-review-check strong { font-size: .78rem; }
.automation-prompt-review-check p { grid-column: 2; margin: .18rem 0 0; color: var(--ink-soft); font-size: .72rem; line-height: 1.45; }
.automation-prompt-review-icon { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; background: #e8f3ec; color: #276044; font-weight: 800; }
.automation-prompt-review-check.missing .automation-prompt-review-icon { background: #f7ecd2; color: #8a6118; }
.automation-prompt-review-warning-section { padding: .75rem .85rem; border-left: 3px solid #b88327; border-radius: var(--ui-radius) var(--ui-radius) var(--ui-radius) var(--ui-radius); background: #fff8e9; }
.automation-prompt-review-warning-section h4 { margin: 0 0 .35rem; font-size: .8rem; }
.automation-prompt-review-warning-section ul { margin: 0; padding-left: 1.15rem; color: var(--ink-soft); font-size: .75rem; line-height: 1.5; }
.automation-prompt-review-tag-section { padding: .7rem .8rem; border: 1px solid #d8e3df; border-radius: var(--ui-radius); background: #f8fbfa; }
.automation-prompt-review-tag-section h4, .automation-prompt-publish-checklist h4 { margin: 0 0 .45rem; font-size: .8rem; }
.automation-prompt-review-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.automation-prompt-review-tags code { padding: .25rem .4rem; border-radius: var(--ui-radius); background: #e9f1ee; color: #285345; font-size: .7rem; overflow-wrap: anywhere; }
.automation-prompt-publish-checklist { padding: .8rem .9rem; border: 1px solid #d7dfe7; border-radius: var(--ui-radius); background: #f7f9fc; }
.automation-prompt-publish-checklist ol { margin: 0; padding-left: 1.2rem; color: var(--ink-soft); font-size: .75rem; line-height: 1.55; }
.automation-prompt-publish-checklist li + li { margin-top: .3rem; }
.automation-prompt-review-note { margin: 0; color: var(--ink-soft); font-size: .7rem; line-height: 1.45; }
.automation-prompt-versions { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.automation-prompt-version-list { display: grid; gap: .55rem; }
.automation-prompt-version { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fcfaf9; }
.automation-prompt-version p, .automation-prompt-version small { margin: 0; }
.automation-prompt-version small { display: block; margin-top: .2rem; color: var(--ink-soft); }
.automation-prompt-version-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.automation-prompt-version-actions .button { min-height: 2.15rem; padding: .45rem .6rem; font-size: .72rem; }
.system-map-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; margin-bottom: 1rem; padding: 1.3rem 1.4rem; border: 1px solid #e2cbc8; border-left: .35rem solid var(--red); border-radius: var(--ui-radius); background: linear-gradient(135deg, #fff 0%, #fbf3f2 100%); }
.system-map-intro h2 { margin: .2rem 0 .5rem; font: 500 1.5rem var(--font-ui); }
.system-map-intro p:not(.eyebrow) { max-width: 54rem; margin: 0; color: var(--ink-soft); line-height: 1.6; }
.system-map-legend { display: grid; gap: .5rem; min-width: 14rem; color: var(--ink-soft); font-size: .74rem; }
.system-map-legend span { display: flex; align-items: center; gap: .55rem; }
.system-map-line { display: inline-block; width: 2.2rem; height: 0; border-top: 3px solid var(--red); }
.system-map-line.controlled { border-color: #c27a00; }
.system-map-line.prepared { border-color: #89827f; border-top-style: dashed; }
.system-map-section { margin-top: 1rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.system-map-section > .section-heading { align-items: start; }
.system-map-section > .section-heading p:not(.eyebrow) { max-width: 58rem; margin: .4rem 0 0; color: var(--ink-soft); line-height: 1.55; }
.system-map-landscape { display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(5rem, .32fr) minmax(19rem, 1.35fr) minmax(5rem, .32fr) minmax(13rem, 1fr); gap: .8rem; align-items: stretch; margin-top: 1rem; }
.system-map-zone { display: grid; align-content: start; gap: .55rem; padding: .85rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fcfaf9; }
.system-map-zone h3 { margin: 0 0 .25rem; color: var(--ink-soft); font-size: .72rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.system-map-zone button { display: grid; width: 100%; gap: .15rem; min-height: 3.5rem; padding: .62rem .7rem; border: 1px solid #dccdca; border-left: .25rem solid var(--red); border-radius: var(--ui-radius); background: white; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.system-map-zone button:hover { border-color: #bd8f89; background: #fff8f7; }
.system-map-zone button:focus-visible { outline: 3px solid rgba(154, 73, 62, .25); outline-offset: 2px; }
.system-map-zone button.prepared { border-left-color: #89827f; border-left-style: dashed; }
.system-map-zone button span { font-size: .82rem; font-weight: 750; }
.system-map-zone button small { color: var(--ink-soft); font-size: .68rem; line-height: 1.35; }
.system-map-zone.core { align-content: center; border-color: #d8c0bd; background: #fbf4f3; }
.system-map-zone.core h3 { color: var(--red-dark); text-align: center; }
.system-map-core-node { display: grid; gap: .2rem; padding: .75rem; border: 1px solid #d7c6c3; border-radius: var(--ui-radius); background: white; text-align: center; }
.system-map-core-node.primary { border-color: var(--red); background: var(--red); color: white; }
.system-map-core-node small { color: var(--ink-soft); font-size: .68rem; line-height: 1.35; }
.system-map-core-node.primary small { color: #fff4f3; }
.system-map-core-flow { color: var(--red); text-align: center; font-size: 1.25rem; }
.system-map-core-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin-top: .2rem; }
.system-map-core-split span { display: grid; gap: .15rem; padding: .55rem .35rem; border: 1px solid #ddd4d2; border-radius: var(--ui-radius); background: #fff; text-align: center; }
.system-map-core-split strong { font-size: .7rem; }
.system-map-core-split small { color: var(--ink-soft); font-size: .61rem; line-height: 1.3; }
.system-map-route { display: grid; align-content: center; gap: .45rem; min-width: 0; color: var(--red); text-align: center; }
.system-map-route::after { display: block; height: 2px; background: currentColor; content: ""; clip-path: polygon(0 35%, 82% 35%, 82% 0, 100% 50%, 82% 100%, 82% 65%, 0 65%); }
.system-map-route span { color: var(--ink-soft); font-size: .62rem; font-weight: 750; line-height: 1.3; text-transform: uppercase; }
.system-map-health-summary { display: flex; align-items: center; gap: .8rem; margin-top: .8rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fcfaf9; }
.system-map-health-summary.operational { border-color: #b8d7c3; background: #f1f8f3; }
.system-map-health-summary.warning { border-color: #e5ba61; background: #fffaf0; }
.system-map-health-summary.unavailable { border-color: #e6a5a5; background: #fff2f2; }
.system-map-health-summary strong, .system-map-health-summary p { display: block; margin: 0; }
.system-map-health-summary p { margin-top: .15rem; color: var(--ink-soft); font-size: .75rem; }
.system-map-health-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: .65rem; }
.system-map-health-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; align-items: start; padding: .7rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fcfaf9; }
.system-map-health-item .portal-status-dot { margin-top: .25rem; }
.system-map-health-item strong { display: block; font-size: .75rem; line-height: 1.35; }
.system-map-health-item p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .67rem; line-height: 1.4; }
.system-map-workflow-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin: .9rem 0; }
.system-map-workflow-tabs button { min-height: 2.4rem; padding: .5rem .72rem; border: 1px solid var(--line); border-radius: 999px; background: #fcfaf9; color: var(--ink-soft); font: 700 .72rem var(--font-ui); cursor: pointer; }
.system-map-workflow-tabs button:hover { border-color: #c59a95; color: var(--ink); }
.system-map-workflow-tabs button[aria-selected="true"] { border-color: var(--red); background: var(--red); color: white; }
.system-map-workflow { overflow: hidden; border: 1px solid #e2cfcc; border-radius: var(--ui-radius); background: #fffbfa; }
.system-map-workflow-heading { padding: 1rem 1.1rem; border-bottom: 1px solid #eadbd8; background: linear-gradient(135deg, #a85458, #873a43); color: white; }
.system-map-workflow-heading h3 { margin: 0; font: 600 1.18rem var(--font-ui); }
.system-map-workflow-heading p { margin: .35rem 0 0; color: #fff5f3; font-size: .76rem; line-height: 1.45; }
.system-map-step-strip { display: grid; grid-template-columns: repeat(var(--system-map-step-count), minmax(8rem, 1fr)); gap: 1.15rem; padding: .9rem; border-bottom: 1px solid #eadbd8; background: white; }
.system-map-step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem; align-items: center; min-height: 3.6rem; padding: .55rem .6rem; border-radius: var(--ui-radius); background: #e8a0a0; color: #4e2528; }
.system-map-step:not(:last-child)::after { position: absolute; top: 50%; right: -1rem; width: .8rem; height: .65rem; background: var(--red); content: ""; transform: translateY(-50%); clip-path: polygon(0 35%, 60% 35%, 60% 0, 100% 50%, 60% 100%, 60% 65%, 0 65%); }
.system-map-step-number { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border-radius: 50%; background: white; color: var(--red-dark); font-weight: 800; }
.system-map-step strong { font-size: .72rem; line-height: 1.3; }
.system-map-step-lane { display: none; }
.system-map-lanes { display: grid; padding: .35rem 0 .55rem; }
.system-map-lane { display: grid; grid-template-columns: 9rem repeat(var(--system-map-step-count), minmax(8rem, 1fr)); min-height: 5.6rem; border-bottom: 1px solid #eee1df; }
.system-map-lane:last-child { border-bottom: 0; }
.system-map-lane-label { display: grid; place-items: center; padding: .7rem; border-right: 1px solid #eadbd8; color: var(--red-dark); background: #fbf3f2; font-size: .72rem; font-weight: 800; text-align: center; }
.system-map-lane-cell { display: grid; place-items: center; min-width: 0; padding: .55rem; border-right: 1px solid #f1e8e6; }
.system-map-lane-cell:last-child { border-right: 0; }
.system-map-lane-node { display: grid; width: 100%; max-width: 10rem; gap: .18rem; padding: .55rem; border: 1px solid #d8c4c1; border-radius: var(--ui-radius); background: white; text-align: center; }
.system-map-lane-node strong { font-size: .7rem; line-height: 1.3; }
.system-map-lane-node small { color: var(--ink-soft); font-size: .62rem; line-height: 1.35; }
.system-map-connection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-top: .85rem; }
.system-map-connection-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: .45rem; min-height: 10.5rem; padding: .85rem; border: 1px solid var(--line); border-top: .25rem solid var(--red); border-radius: var(--ui-radius); background: #fcfaf9; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.system-map-connection-card.controlled { border-top-color: #c27a00; }
.system-map-connection-card.manual { border-top-color: #5f7e91; }
.system-map-connection-card.prepared { border-top-color: #89827f; border-top-style: dashed; }
.system-map-connection-card:hover { border-color: #c9a5a0; background: #fff8f7; transform: translateY(-1px); }
.system-map-connection-card .status-pill { justify-self: start; }
.system-map-connection-card strong { font: 600 .92rem var(--font-ui); }
.system-map-connection-card p { margin: 0; color: var(--ink-soft); font-size: .72rem; line-height: 1.45; }
.system-map-connection-card small { color: var(--red-dark); font-size: .68rem; font-weight: 750; }
.system-map-detail-dialog { width: min(48rem, calc(100% - 2rem)); }
.system-map-detail-summary { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.system-map-detail-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .75rem; align-items: center; padding: .85rem; border: 1px solid #e2cfcc; border-radius: var(--ui-radius); background: #fbf3f2; color: var(--red-dark); text-align: center; }
.system-map-detail-route span { font-size: 1.3rem; }
.system-map-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0; }
.system-map-detail-list div { padding: .75rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fcfaf9; }
.system-map-detail-list dt { color: var(--red-dark); font-size: .68rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.system-map-detail-list dd { margin: .32rem 0 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.5; }
.workflow-rules-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; margin-bottom: 1rem; padding: 1.3rem 1.4rem; border: 1px solid #e2cbc8; border-left: .35rem solid var(--red); border-radius: var(--ui-radius); background: linear-gradient(135deg, #fff 0%, #fbf3f2 100%); }
.workflow-rules-intro h2 { margin: .2rem 0 .5rem; font: 500 1.5rem var(--font-ui); }
.workflow-rules-intro p:not(.eyebrow) { max-width: 58rem; margin: 0; color: var(--ink-soft); line-height: 1.6; }
.workflow-rules-intro-mark { display: grid; min-width: 10.5rem; gap: .25rem; padding: .85rem 1rem; border: 1px solid #d9c0bd; border-radius: var(--ui-radius); background: white; color: var(--red-dark); text-align: center; }
.workflow-rules-intro-mark span { font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.workflow-rules-intro-mark strong { font: 600 1.05rem var(--font-ui); }
.workflow-rules-section { padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; }
.workflow-rules-list { display: grid; gap: 1rem; margin-top: .9rem; }
.workflow-rule-card { overflow: hidden; border: 1px solid #e2cfcc; border-radius: var(--ui-radius); background: #fffcfb; }
.workflow-rule-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .7rem; align-items: center; padding: 1rem 1.1rem; background: linear-gradient(135deg, #a85458, #873a43); color: white; }
.workflow-rule-heading h3 { margin: 0; font: 600 1.15rem var(--font-ui); }
.workflow-rule-number { grid-row: 1 / span 2; display: grid; min-width: 3.4rem; height: 3.4rem; place-items: center; padding: .25rem; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; font-size: .67rem; font-weight: 800; text-align: center; }
.workflow-rule-principle { margin: 0; color: #fff3f1; font-size: .75rem; line-height: 1.45; }
.workflow-rule-concepts { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .75rem; align-items: center; padding: 1.1rem; background: white; }
.workflow-rule-concept { display: grid; min-height: 7.5rem; align-content: center; gap: .42rem; padding: .9rem; border: 1px solid #d8c4c1; border-top: .28rem solid var(--red); border-radius: var(--ui-radius); text-align: center; }
.workflow-rule-concept.task { border-top-color: #5f7e91; }
.workflow-rule-concept-label { justify-self: center; padding: .22rem .55rem; border-radius: 999px; background: #f4e1df; color: var(--red-dark); font-size: .65rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.workflow-rule-concept.task .workflow-rule-concept-label { background: #e8f0f3; color: #365666; }
.workflow-rule-concept strong { font-size: .82rem; line-height: 1.4; }
.workflow-rule-concept small { color: var(--ink-soft); font-size: .72rem; }
.workflow-rule-concept small::before { content: "Voorbeeld: "; font-weight: 750; }
.workflow-rule-concept-separator { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 50%; background: var(--red); color: white; font-size: 1.15rem; font-weight: 800; }
.workflow-rule-rationale { margin: 0; padding: .9rem 1.1rem; border-top: 1px solid #eee1df; color: var(--ink-soft); line-height: 1.55; }
.workflow-rule-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: 0 1.1rem 1rem; }
.workflow-rule-example { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; align-items: start; padding: .75rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fcfaf9; }
.workflow-rule-example.good { border-color: #b8d7c3; background: #f1f8f3; }
.workflow-rule-example.avoid { border-color: #e5ba61; background: #fffaf0; }
.workflow-rule-example p { margin: .05rem 0 0; color: var(--ink-soft); font-size: .74rem; line-height: 1.5; }
.workflow-rule-checklist { padding: 1rem 1.1rem; border-top: 1px solid #eadbd8; background: #fbf3f2; }
.workflow-rule-checklist h4 { margin: 0 0 .6rem; font-size: .78rem; }
.workflow-rule-checklist ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1rem; margin: 0; padding: 0; list-style: none; }
.workflow-rule-checklist li { position: relative; padding-left: 1.35rem; color: var(--ink-soft); font-size: .72rem; line-height: 1.45; }
.workflow-rule-checklist li::before { position: absolute; left: 0; color: var(--red); content: "✓"; font-weight: 900; }
.workflow-rules-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: center; margin-top: 1rem; padding: .9rem 1rem; border-left: .3rem solid #5f7e91; border-radius: var(--ui-radius); background: #eef4f6; }
.workflow-rules-note strong { color: #365666; font-size: .76rem; }
.workflow-rules-note p { margin: 0; color: var(--ink-soft); font-size: .72rem; line-height: 1.5; }
.savings-breakdown-dialog { width: min(58rem, calc(100% - 2rem)); }
.savings-breakdown-dialog .dialog-form { max-height: min(42rem, calc(100vh - 3rem)); grid-template-rows: auto auto minmax(0, 1fr) auto; }
.savings-breakdown-dialog .dialog-form > .muted { margin: 0; }
.savings-breakdown-table-wrap { overflow: auto; }
.savings-breakdown-table { min-width: 44rem; }
.savings-breakdown-table td:first-child { white-space: normal; }
.savings-breakdown-table td strong, .savings-breakdown-table td small { display: block; }
.savings-breakdown-table td small { max-width: 34rem; margin-top: .18rem; color: var(--ink-soft); line-height: 1.45; }
.savings-breakdown-table td.positive { color: #27604a; font-weight: 750; }
.savings-breakdown-table td.negative { color: #9a493e; font-weight: 750; }
.savings-breakdown-table tfoot th { padding-top: .85rem; border-top: 2px solid var(--line); border-bottom: 0; font-size: .82rem; }
.forecast-embedded {
  display: block;
  width: 100%;
  min-height: calc(100vh - 10rem);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: white;
}
.module-record-list { display: grid; gap: .75rem; }
.afas-delivery-filters {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .75rem;
}
.afas-delivery-filters label {
  display: grid;
  min-width: 14rem;
  gap: .3rem;
  color: var(--ink-soft);
  font-size: var(--font-xs);
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.afas-delivery-filters select { height: 38px; background: #fff; font-size: var(--font-sm); letter-spacing: normal; text-transform: none; }
.afas-delivery-filter-count { padding-bottom: .55rem; color: var(--ink-soft); font-size: var(--font-sm); }
.afas-delivery-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--ui-radius); background: #fff; }
.afas-delivery-table { min-width: 76rem; }
.afas-delivery-table th { padding: .62rem .7rem; white-space: nowrap; }
.afas-delivery-table td { padding: .58rem .7rem; white-space: nowrap; font-size: var(--font-sm); }
.afas-delivery-table tbody tr:hover { background: #fffdfc; }
.afas-delivery-table .status-pill { white-space: nowrap; }
.afas-delivery-document,
.afas-delivery-identifier,
.afas-delivery-issue {
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.afas-delivery-document { max-width: 13rem; font-weight: 750; }
.afas-delivery-identifier { max-width: 16rem; color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem !important; }
.afas-delivery-issue { max-width: 14rem; color: var(--ink-soft); }
.afas-delivery-actions .button + .button { margin-left: .35rem; }
.afas-delivery-action-button { min-height: 1.9rem; padding: .35rem .55rem; font-size: var(--font-xs); }
.module-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: white;
}
.module-record h3 { margin: 0; font: 500 1.08rem var(--font-ui); }
.module-record p { margin: .3rem 0 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.5; }
.document-history-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 1.35fr) minmax(13rem, 1fr) minmax(13rem, 1fr);
  min-width: 0;
}
.document-history-column {
  min-width: 0;
  padding: .15rem 1.2rem;
  border-left: 1px solid var(--line);
}
.document-history-column:first-child { padding-left: 0; border-left: 0; }
.document-history-column-title {
  margin: 0 0 .65rem;
  color: var(--ink-soft);
  font-size: var(--font-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.document-history-column p:first-of-type { margin-top: 0; }
.document-history-column small { display: block; margin-top: .35rem; color: var(--ink-soft); line-height: 1.45; }
.module-record-actions { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; }
.module-record-actions .button { min-height: 2.2rem; padding: .5rem .7rem; font-size: .76rem; text-decoration: none; }
.selected-customer {
  margin: 0;
  padding: .75rem .9rem;
  border-left: .3rem solid var(--teal);
  border-radius: var(--ui-radius);
  background: var(--teal-pale);
  font-weight: 750;
}
.upload-analysis { padding: .75rem .9rem; border-radius: var(--ui-radius); background: var(--surface-soft); color: var(--ink-soft); font-size: .8rem; line-height: 1.55; }
.form-grid { display: grid; gap: .75rem; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.module-permissions {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
}
.module-permissions legend { padding: 0 .35rem; font-size: .8rem; font-weight: 800; }
.module-permissions small { color: var(--ink-soft); font-weight: 400; line-height: 1.5; }
.module-access-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.module-access-pills .status-pill { text-transform: none; }
.passkey-list { display: grid; gap: .65rem; margin-top: 1rem; }
.passkey-session-warning {
  margin: 0;
  padding: .75rem .85rem;
  border: 1px solid #eadcb8;
  border-radius: var(--ui-radius);
  color: var(--ink);
  background: #fff2d8;
  font-size: .8rem;
}
.passkey-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: .85rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: var(--surface-soft);
}
.passkey-item.current { border-color: #b8d7c3; background: #edf7f0; }
.passkey-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.passkey-heading strong { color: var(--ink); }
.passkey-meta { margin: .35rem 0 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.5; }
.passkey-item .button { min-height: 2.35rem; padding: .55rem .75rem; font-size: .78rem; }
.recovery-status-card {
  display: grid;
  gap: .65rem;
  margin: 1rem 0;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-left-width: .3rem;
  border-radius: var(--ui-radius);
}
.recovery-status-card.configured {
  border-color: #b8d7c3;
  border-left-color: #2d6b46;
  background: #e4f2e9;
}
.recovery-status-card.not-configured {
  border-color: #eadcb8;
  border-left-color: #946d15;
  background: #fff2d8;
}
.info-card .recovery-status-card p {
  margin: 0;
  color: var(--ink);
  font-size: .8rem;
  line-height: 1.55;
}
.recovery-status-card .status-pill { width: max-content; }

dialog { width: min(31rem, calc(100% - 2rem)); padding: 0; border: 0; border-radius: var(--ui-radius); color: var(--ink); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(48, 45, 45, .42); backdrop-filter: blur(3px); }
.dialog-form { display: grid; gap: 1rem; padding: 1.5rem; }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.dialog-heading h2 { margin: .25rem 0 0; font: 500 1.55rem var(--font-ui); }
.dialog-form hr { width: 100%; margin: .25rem 0; border: 0; border-top: 1px solid var(--line); }
.file-drop { padding: 1rem; border: 1px dashed #d8c8c6; border-radius: var(--ui-radius); background: var(--surface-soft); }
.file-drop small { color: var(--ink-soft); font-weight: 400; }
.secret-content { max-height: 19rem; overflow: auto; padding: 1rem; border-radius: var(--ui-radius); background: var(--navy-deep); color: #f3f4ef; white-space: pre-wrap; word-break: break-all; }

/* Centrale typografische toepassing voor alle lokaal gerenderde modules. */
.eyebrow, th, .status-pill, .count-badge, .severity, .sidebar-brand span,
.sidebar-footer, .module-filters label, .bol-link-filters label,
.bol-sales-filters label, .bol-sales-table thead th { font-size: var(--font-xs); }
.sidebar nav button, .module-data-table, .module-record p, .customer-head p,
.user-card p, .file-summary, .upload-analysis, .passkey-meta,
.module-record-actions .button, .file-actions-stack .button { font-size: var(--font-sm); }
body, label, td, input, select, textarea, .account-row, .activity-item p { font-size: var(--font-base); }
.topbar h1, .section-heading h2, .section-heading h3, .customer-head h3,
.user-card h3, .info-card h2, .module-record h3, .module-table-section h3 { font-size: var(--font-lg); }
.summary-card strong, .dialog-heading h2 { font-size: var(--font-xl); }
.module-hero h2 { font-size: var(--font-2xl); }

@media (max-width: 980px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .security-grid { grid-template-columns: 1fr; }
  .passkey-card { grid-column: auto; }
  .portal-shell { grid-template-columns: 14rem 1fr; }
  .module-card-grid, .module-dashboard-grid, .marketing-logo-designer, .marketing-mailing-grid, .marketing-mailing-template-grid, .crm-archive-records-menu, .module-filters.three, .module-filters:not(.crm-archive-company-filters):not(.crm-archive-overview-filters):not(.crm-ib-manual-filters) { grid-template-columns: 1fr; }
  .crm-archive-company-filters { grid-template-columns: minmax(10rem, 1.25fr) minmax(11rem, 1.5fr) minmax(6.5rem, .65fr) auto; }
  .crm-archive-overview-filters { grid-template-columns: minmax(4.5rem, .45fr) minmax(7rem, .7fr) minmax(10rem, 1.4fr) minmax(9rem, 1fr) auto; }
  .crm-archive-overview-filters[data-filter-kind="ib"] { grid-template-columns: minmax(10rem, 1.4fr) minmax(9rem, 1fr) auto; }
  .crm-ib-delivery-status-grid { grid-template-columns: 1fr; }
  .portal-home-intro, .global-dossier-results, .payment-reference-layout { grid-template-columns: 1fr; }
  .savings-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .savings-work-total-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .savings-dashboard-grid, .savings-entry-grid, .savings-work-timer-grid, .savings-automatic-rule { grid-template-columns: 1fr; }
  .system-map-landscape { grid-template-columns: minmax(11rem, 1fr) 3.5rem minmax(17rem, 1.3fr) 3.5rem minmax(11rem, 1fr); gap: .55rem; }
  .system-map-health-grid, .system-map-connection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-rule-checklist ul { grid-template-columns: 1fr; }
  .sidebar-status { display: none; }
  .webmail-toolbar { align-items: stretch; flex-wrap: wrap; }
  .webmail-mailbox-identity { flex: 1 1 12rem; }
  .webmail-search-form { flex: 1 1 22rem; min-width: 0; }
  .webmail-layout, .webmail-layout.folders-collapsed { grid-template-columns: minmax(9rem, .45fr) minmax(18rem, 1fr); }
  .webmail-layout.folders-collapsed { grid-template-columns: 1fr; }
  .webmail-column-resizer { display: none; }
  .webmail-folders { grid-column: 1; }
  .webmail-list-panel { grid-column: 2; }
  .webmail-layout.folders-collapsed .webmail-list-panel { grid-column: 1; }
  .webmail-detail { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .webmail-message-list { max-height: 26rem; }
  .webmail-connect-card { grid-template-columns: 1fr; }
}
.gravita-table-card { overflow-x: auto; }
.gravita-filters { margin-bottom: 1rem; }
.gravita-source-note { margin-bottom: 1rem; }
.gravita-source-note strong { display: block; margin-bottom: .35rem; }
.gravita-source-note p { margin: 0; }
.gravita-transaction {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  overflow: hidden;
}
.gravita-transaction + .gravita-transaction { margin-top: .7rem; }
.gravita-transaction > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 1.1rem;
}
.gravita-transaction > summary span { display: grid; gap: .2rem; }
.gravita-transaction > summary small { color: var(--muted); }
.gravita-lines { border-top: 1px solid var(--line); margin: 0; width: 100%; }
.gravita-report-card { overflow-x: auto; }
.gravita-report-card + .gravita-report-card { margin-top: 1rem; }
.gravita-overview-filters { grid-template-columns: minmax(16rem, 28rem); }
.gravita-overview-year { min-width: 6.5rem; }
.gravita-current-administration { align-self: end; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--ui-radius); font-weight: 700; padding: .72rem .85rem; }
.gravita-table-card tbody tr.is-selected { background: var(--surface-soft); box-shadow: inset 4px 0 0 var(--accent-strong); }
.gravita-statement-section + .gravita-statement-section { margin-top: 2rem; }
.gravita-statement-section > h2 { margin: 0 0 .8rem; }
.gravita-statement-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gravita-statement-column { min-width: 0; overflow-x: auto; }
.gravita-statement-column h3 { margin-top: 0; }
.gravita-statement-column table { margin: 0; width: 100%; }
.gravita-statement-column tfoot { border-top: 2px solid var(--ink); }
.gravita-result-row { font-weight: 700; }
.gravita-balance-warning { margin-top: 1rem; }
.gravita-report-source { margin-top: 2rem; }
.gravita-report-source > summary { cursor: pointer; font-weight: 700; }
.gravita-import-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gravita-import-form { display: grid; gap: 1rem; margin-bottom: 1rem; }
.gravita-import-file-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.gravita-import-grid li + li { margin-top: .55rem; }
.gravita-folder-example { background: #f7f6f2; border-radius: var(--ui-radius); overflow-x: auto; padding: 1rem; }
.gravita-pagination { align-items: center; display: flex; gap: 1rem; justify-content: center; margin-top: 1rem; }
.gravita-account-link {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
  text-decoration: none;
}
.gravita-statement-column tbody tr:has(.gravita-account-link) { transition: background-color .15s ease; }
.gravita-statement-column tbody tr:has(.gravita-account-link):hover,
.gravita-statement-column tbody tr:has(.gravita-account-link):focus-within { background: var(--surface-soft); }
.gravita-account-link:focus-visible { border-radius: var(--ui-radius); outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.gravita-statement-link-row { cursor: pointer; }
.gravita-account-dialog { max-width: min(92vw, 76rem); width: 76rem; }
.gravita-account-detail { display: grid; gap: 1rem; max-height: 85vh; overflow: auto; padding: 1.5rem; }
.gravita-account-table { overflow-x: auto; }
.gravita-journal-link-row { cursor: pointer; transition: background-color .15s ease; }
.gravita-journal-link-row:hover, .gravita-journal-link-row:focus { background: var(--surface-soft); outline: 0; }
.gravita-transaction.is-focused { border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(154, 75, 68, .12); }
.gravita-opening-balance { padding-block: .8rem; }
.gravita-opening-balance h3, .gravita-opening-balance p { margin: 0; }
.gravita-original-pdf { margin-top: 1rem; }
.gravita-original-pdf > summary { cursor: pointer; font-weight: 700; }
.gravita-pdf-download { display: inline-flex; margin-top: .8rem; }
.gravita-pdf-preview { display: grid; gap: 1rem; margin-top: .8rem; }
.gravita-pdf-preview canvas { background: white; border: 1px solid var(--line); border-radius: var(--ui-radius); box-shadow: 0 2px 12px rgba(48,45,45,.08); height: auto; max-width: 100%; width: 100%; }
.gravita-warning-card { border-left: 4px solid #c27a00; }
.gravita-warning-list { display: grid; gap: .8rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.gravita-warning-list li { background: #fffaf0; border: 1px solid #e5ba61; border-radius: var(--ui-radius); display: grid; gap: .45rem; padding: .9rem 1rem; }
.gravita-warning-list li.serious { background: #fff0f0; border-color: #d77a7a; color: #7d1f1f; }
.gravita-warning-list li .status-pill { justify-self: start; }
.gravita-warning-list li.serious .status-pill { background: #b42318; color: white; }
.gravita-warning-list small { color: inherit; line-height: 1.5; }
.gravita-report-text {
  background: #f7f6f2;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  margin: 1rem 0 0;
  overflow-x: auto;
  padding: 1rem;
  white-space: pre;
}
.gravita-check-card dd { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .afas-delivery-filters { align-items: stretch; flex-direction: column; gap: .45rem; }
  .afas-delivery-filters label { min-width: 0; }
  .afas-delivery-filter-count { padding-bottom: 0; }
  .finding-comparison { grid-template-columns: 1fr; }
  .bank-period-export-card { grid-template-columns: 1fr; }
  .bank-period-export-availability { grid-column: 1 / -1; }
  .bank-period-export-card .button { width: 100%; }
  .crm-archive-records-header { align-items: stretch; flex-direction: column; }
  .crm-ib-case-delivery, .crm-ib-case-finish { grid-template-columns: 1fr; }
  .crm-ib-case-delivery legend, .crm-ib-case-finish legend, .crm-ib-case-finish > label:last-child { grid-column: auto; }
  .auth-layout { grid-template-rows: 4.5rem minmax(0, 1fr); }
  .auth-brand { padding: .9rem 1rem; }
  .auth-logo { width: 8rem; }
  .passkey-item { grid-template-columns: 1fr; }
  .passkey-item .button { width: 100%; }
  .auth-card { width: calc(100% - 1.75rem); margin: .875rem auto 2rem; padding: 1.5rem; }
  .portal-shell { display: block; }
  .crm-archive-company-filters { grid-template-columns: 1fr; }
  .crm-archive-overview-filters, .crm-archive-overview-filters[data-filter-kind="ib"] { grid-template-columns: 1fr; }
  .crm-ib-manual-filters { grid-template-columns: 1fr; }
  .marketing-logo-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gravita-statement-grid, .gravita-import-grid { grid-template-columns: 1fr; }
  #marketing-logo-host { min-width: 27rem; }
  .marketing-palette, .marketing-brand-details { grid-template-columns: 1fr; }
  .marketing-mailing-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-mailing-campaign { grid-template-columns: 1fr; }
  .marketing-mailing-detail-intro { grid-template-columns: 1fr; }
  .marketing-library .section-heading { display: grid; gap: .8rem; }
  .marketing-library-toolbar, .marketing-folder-form { align-items: stretch; }
  .sidebar { position: static; min-height: auto; padding: .9rem; }
  .sidebar-collapse { display: none; }
  .module-picker { margin-top: 0; }
  .sidebar-brand, .sidebar-footer { display: none; }
  .module-picker { max-width: 28rem; padding: 0; }
  .customer-context-picker { max-width: 28rem; padding: 0; margin-top: .8rem; }
  .customer-context-divider { margin-left: 0; margin-right: 0; }
  .module-status { margin-left: 0; }
  .module-nav { display: grid !important; grid-template-columns: 1fr; min-height: auto; overflow-x: visible; padding-bottom: 0; }
  .global-navigation { margin-top: .7rem; padding-top: .7rem; }
  .global-navigation nav { display: flex; overflow-x: auto; }
  .nav-item, .nav-item.active { flex: 0 0 auto; justify-content: center; padding: .65rem .8rem; box-shadow: none; }
  .module-nav .nav-item, .module-nav .nav-item.active { width: 100%; justify-content: flex-start; box-shadow: inset 3px 0 var(--accent); }
  .topbar { align-items: start; min-height: auto; }
  .topbar-actions { flex-wrap: wrap; justify-content: end; }
  .user-chip-copy { display: none; }
  .account-menu-chevron { display: none; }
  .account-page-grid, .account-module-access { grid-template-columns: 1fr; }
  .account-access-card { grid-column: auto; }
  .account-security-facts { grid-template-columns: 1fr; }
  .account-signature-draw-actions { grid-template-columns: 1fr 1fr; }
  .account-signature-draw-actions > span { display: none; }
  .account-signature-draw-actions .button { width: 100%; }
  #account-signature-draw-save { grid-column: 1 / -1; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .portal-status-grid { grid-template-columns: 1fr; }
  .integration-monitor-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integration-monitor-heading { align-items: stretch; flex-direction: column; }
  .integration-monitor-filters { display: grid; grid-template-columns: 1fr; }
  .account-row { grid-template-columns: 1fr; gap: .35rem; }
  .form-grid.three { grid-template-columns: 1fr; }
  .module-record { grid-template-columns: 1fr; }
  .document-history-grid { grid-template-columns: 1fr; }
  .document-history-column { padding: 1rem 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .document-history-column:first-child { padding-top: 0; border-top: 0; }
  .crm-archive-field { grid-template-columns: 1fr; gap: .25rem; }
  .payment-reference-input-row { grid-template-columns: 1fr; }
  .payment-reference-input-row .button { width: 100%; }
  .payment-reference-facts { grid-template-columns: 1fr 1fr; }
  .payment-reference-facts > div:nth-child(2) { border-right: 0; }
  .savings-toolbar { align-items: stretch; flex-direction: column; }
  .savings-date-fields { grid-template-columns: 1fr; }
  .savings-time-intro { flex-direction: column; }
  .system-map-intro { grid-template-columns: 1fr; }
  .system-map-legend { min-width: 0; }
  .system-map-landscape { grid-template-columns: 1fr; }
  .system-map-route { min-height: 3.4rem; }
  .system-map-route::after { justify-self: center; width: 1.25rem; height: 2.6rem; clip-path: polygon(35% 0, 65% 0, 65% 72%, 100% 72%, 50% 100%, 0 72%, 35% 72%); }
  .system-map-route span { order: 2; }
  .system-map-health-grid, .system-map-connection-grid, .system-map-detail-list { grid-template-columns: 1fr; }
  .system-map-workflow-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
  .system-map-workflow-tabs button { flex: 0 0 auto; }
  .system-map-step-strip { grid-template-columns: 1fr; gap: 1.1rem; }
  .system-map-step:not(:last-child)::after { top: auto; right: 50%; bottom: -.9rem; width: .75rem; height: .7rem; transform: translateX(50%) rotate(90deg); }
  .system-map-step-lane { display: block; grid-column: 2; color: #713b3e; font-size: .63rem; }
  .system-map-lanes { display: none; }
  .system-map-detail-route { grid-template-columns: 1fr; }
  .system-map-detail-route span { transform: rotate(90deg); }
  .workflow-rules-intro { grid-template-columns: 1fr; }
  .workflow-rules-intro-mark { min-width: 0; }
  .workflow-rule-concepts, .workflow-rule-examples, .workflow-rules-note { grid-template-columns: 1fr; }
  .workflow-rule-concept-separator { justify-self: center; transform: rotate(90deg); }
  .savings-work-fields { grid-template-columns: 1fr; }
  .savings-tracking-device-form, .savings-thread-link-actions { grid-template-columns: 1fr; }
  .savings-work-timer { grid-template-columns: 1fr; }
  .savings-work-timer > strong, .savings-work-timer > .button { justify-self: start; }
  .savings-work-total-grid { grid-template-columns: 1fr; }
  .automation-prompt-workspace, .automation-prompt-fields, .automation-prompt-review-checks, .automation-faq-card-fields, .automation-faq-card-text { grid-template-columns: 1fr; }
  .automation-faq-textarea:nth-child(2) { grid-column: auto; }
  .automation-prompt-library, .automation-prompt-editor { min-height: auto; }
  .webmail-toolbar > .button { width: auto; }
  .webmail-layout { display: block; }
  .webmail-layout.folders-collapsed .webmail-folders { display: none; }
  .webmail-folders { border-right: 0; border-bottom: 1px solid var(--line); }
  .webmail-folders nav { display: flex; overflow-x: auto; }
  .webmail-folder-button { flex: 0 0 auto; width: auto; }
  .webmail-disconnect { margin-top: .8rem; }
  .webmail-list-panel { border-right: 0; }
  .webmail-detail-heading { flex-direction: column; }
  .webmail-detail-actions { justify-content: start; }
  .webmail-compose-secondary { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .topbar { padding: 1rem; }
  .topbar .button { width: 100%; order: 3; }
  .content { padding: 1rem; }
  .summary-grid { grid-template-columns: 1fr; }
  .savings-summary-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: start; flex-direction: column; }
  .topbar-mail-button { flex: 0 0 2.8rem; }
  .webmail-search-form { flex-basis: 100%; }
  .webmail-search-form .button { width: auto; order: initial; }
  .webmail-toolbar > .button { width: 100%; }
  .webmail-compose-actions { display: grid; }
}
/* Een niet-productieomgeving moet op iedere pagina direct herkenbaar zijn. */
.environment-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 2.75rem;
  padding: .55rem 1rem;
  color: #351500;
  background: #ffb547;
  border-bottom: 2px solid #9a3f00;
  box-shadow: 0 2px 10px rgb(63 27 0 / 18%);
  font-weight: 650;
  text-align: center;
}
.environment-banner[hidden] { display: none; }
.environment-banner strong {
  padding: .16rem .48rem;
  color: #fff;
  background: #9a3f00;
  border-radius: var(--ui-radius);
  letter-spacing: .08em;
}
.environment-staging .portal-shell { min-height: calc(100vh - 2.75rem); }

/* Luca Invoice-shell: vaste rustige zijbalk, vlakke navigatie en een kaartvormige werkruimte. */
.sidebar-mobile-toggle { display: none; }
.workspace-menu-toggle { display: none; }
.repeated-page-title { display: none !important; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
}
.environment-staging .topbar { top: 2.75rem; }

@media (min-width: 721px) {
  .portal-shell { grid-template-columns: 15.25rem minmax(0, 1fr); }
  body.sidebar-collapsed .portal-shell { grid-template-columns: minmax(0, 1fr); }
  body.sidebar-collapsed .sidebar { display: none; }
  .sidebar {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    padding: 1.25rem .75rem 1rem;
    border-right-color: #dcd9d5;
  }
  #portal-sidebar-content { overflow: hidden; }
  .sidebar-navigation-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding-right: .15rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .sidebar-brand { padding: 0 .15rem 1rem; }
  .sidebar-logo { width: min(100%, 10.9rem); }
  .sidebar-collapse {
    top: 1.85rem;
    right: .75rem;
    width: 2rem;
    height: 2rem;
    padding: 0 0 .12rem;
    border: 1px solid #664c4c;
    border-radius: 0;
    background: var(--accent);
    color: var(--ink);
    box-shadow: 0 3px 8px rgba(52, 40, 41, .12);
  }
  .sidebar-collapse:hover { border-color: #664c4c; background: #db8a8a; }
  .module-picker { margin-top: .25rem; padding: 0; }
  .customer-context-picker { margin-top: 1rem; padding: 0; }
  .module-picker select,
  .customer-context-picker select {
    height: 44px;
    min-height: 44px;
    padding-inline: .75rem 2.15rem;
    border-color: #ddd7d4;
    border-radius: 0;
    background: white;
  }
  .customer-context-divider { margin: 1.1rem 0 1rem; }
  .sidebar nav { gap: .12rem; }
  .nav-item {
    min-height: 2.55rem;
    gap: .65rem;
    padding: .62rem .78rem;
    border-left: 3px solid transparent;
    border-radius: 0;
  }
  .nav-item:hover,
  .nav-item.active {
    border-left-color: var(--accent);
    background: #f6eeee;
    box-shadow: none;
  }
  .sidebar .nav-icon { display: none; }
  body.sidebar-collapsed .sidebar .nav-icon { display: block; }
  .global-navigation { margin-top: .9rem; padding-top: .85rem; }
  .global-navigation > p { padding: 0 .78rem .5rem; }
  .sidebar-footer-meta { flex: 0 0 auto; margin-top: 0; padding-top: .7rem; }
  .sidebar-status { padding: .85rem .65rem 0; }
  .portal-version { padding-left: 1.8rem; font-size: .65rem; }
  .workspace { background: var(--surface-soft); }
  .topbar-heading { display: flex; align-items: center; gap: .9rem; min-width: 0; }
  body.sidebar-collapsed .workspace-menu-toggle {
    display: inline-grid;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    padding: 0;
    border: 1px solid #d9b9b6;
    border-radius: 0;
    background: var(--teal-pale);
    color: var(--ink);
  }
  body.sidebar-collapsed .workspace-menu-toggle:hover { background: #f6e8e6; }
  body.sidebar-collapsed .workspace-menu-toggle:focus-visible {
    outline: 3px solid rgba(165,89,89,.3);
    outline-offset: 2px;
  }
  .workspace-menu-toggle svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
  }
  .topbar {
    min-height: 4.75rem;
    width: 100%;
    margin: 0;
    padding: .8rem clamp(1rem, 2vw, 1.75rem);
    border: 0;
    border-bottom: 1px solid var(--line);
    background: white;
    box-shadow: 0 6px 20px rgba(69, 53, 55, .055);
  }
  .topbar h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; }
  .content { padding: 1rem clamp(1rem, 2vw, 1.75rem) 3rem; }
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; margin-bottom: 1.25rem; }
  .summary-card {
    min-height: 8.4rem;
    padding: 1.35rem 1.45rem;
    border-radius: 0;
    box-shadow: 0 12px 28px rgba(69, 53, 55, .06);
  }
  .summary-card::after { display: none; }
  .summary-card strong { margin-top: .65rem; font-size: 2rem; font-weight: 600; }
  .table-card,
  .portal-home-intro,
  .module-hero,
  .module-dashboard-panel { border-radius: 0; box-shadow: 0 12px 28px rgba(69, 53, 55, .055); }
  .module-hero::after { display: none; }
}

@media (max-width: 720px) {
  .bank-files-footer { align-items: flex-start; flex-direction: column; }
  .bank-history-count { display: block; margin: .25rem 0 0 1.1rem; }
  .bank-files-help > summary { width: 2.75rem; height: 2.75rem; }
  .sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 4.5rem;
    height: auto;
    padding: .65rem .875rem;
    border-right: 0;
    border-bottom: 1px solid #dcd9d5;
  }
  .sidebar-brand,
  body.sidebar-collapsed .sidebar-brand {
    display: grid;
    justify-items: start;
    width: 8.5rem;
    padding: 0;
  }
  .sidebar-logo,
  body.sidebar-collapsed .sidebar-logo { display: block; width: 8rem; }
  .sidebar-logo-compact,
  body.sidebar-collapsed .sidebar-logo-compact { display: none; }
  .sidebar-mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.7rem;
    padding: .6rem .8rem;
    border: 1px solid #e5cecc;
    border-radius: 0;
    background: var(--teal-pale);
    color: var(--ink);
    font-weight: 750;
  }
  #portal-sidebar-content,
  body.sidebar-collapsed #portal-sidebar-content {
    display: none;
    grid-column: 1 / -1;
    min-height: 0;
    padding-top: .85rem;
    overflow: visible;
    border-top: 1px solid var(--line);
  }
  body.mobile-sidebar-open #portal-sidebar-content { display: flex; }
  .sidebar-navigation-scroll { overflow: visible; }
  body.sidebar-collapsed .module-picker,
  body.sidebar-collapsed .customer-context-picker,
  body.sidebar-collapsed .customer-context-divider,
  body.sidebar-collapsed .module-status { display: grid; }
  .module-picker,
  .customer-context-picker { width: 100%; max-width: none; padding: 0; }
  .module-picker select,
  .customer-context-picker select {
    height: 44px;
    min-height: 44px;
    border-radius: 0;
    background: white;
  }
  .customer-context-divider { margin: 1rem 0; }
  .module-nav,
  body.sidebar-collapsed .module-nav {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: .15rem;
    overflow-x: visible;
  }
  .global-navigation { margin-top: .8rem; padding-top: .8rem; }
  .global-navigation nav { display: grid; overflow-x: visible; }
  .nav-item,
  .nav-item.active,
  .module-nav .nav-item,
  .module-nav .nav-item.active {
    width: 100%;
    justify-content: flex-start;
    padding: .68rem .8rem;
    border-left: 3px solid transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .nav-item:hover,
  .nav-item.active,
  .module-nav .nav-item.active { border-left-color: var(--accent); background: #f6eeee; }
  .sidebar-footer-meta { display: grid; margin-top: .7rem; }
  .sidebar-status { display: flex; }
  .topbar {
    min-height: 4.5rem;
    width: 100%;
    margin: 0;
    padding: .7rem .75rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 5px 18px rgba(69, 53, 55, .05);
  }
  .topbar h1 { font-size: 1.5rem; font-weight: 600; }
  .topbar-actions { flex-wrap: nowrap; }
  .content { padding: .75rem .75rem 2.5rem; }
  .summary-card,
  .table-card,
  .portal-home-intro,
  .module-hero,
  .module-dashboard-panel { border-radius: 0; }
}

@media (max-width: 480px) {
  .topbar #upload-open { display: none !important; }
}
.mail-review-feedback-row[hidden] { display: none; }
.mail-review-feedback-row td { padding: .65rem 1rem 0; }
.mail-review-inline-message { margin: 0; min-height: 0; }

/* Luca Invoice strak: iedere interactieve knop deelt dezelfde subtiele hoek. */
button,
.button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"] {
  border-radius: var(--button-radius) !important;
}

/* Secret administration shares the document cards, with compact native controls. */
#signing-admin-form { margin-top: 24px; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface); min-width: 0; }
#signing-admin-fields { min-width: 0; border: 0; padding: 0; margin: 0; }
#signing-admin-form .signing-admin-check { display: flex; align-items: center; gap: 10px; }
#signing-admin-form .signing-admin-check input[type="checkbox"] { width: 16px; height: 16px; min-height: 16px; padding: 0; flex: 0 0 16px; margin: 0; }
#signing-admin-form input, #signing-admin-form select { min-width: 0; }

.marketing-mailing-production { display: grid; gap: .8rem; margin-top: 1rem; }
.marketing-mailing-production-campaigns { display: grid; gap: .7rem; }
.marketing-mailing-production-card { display: grid; grid-template-columns: minmax(11rem, .8fr) minmax(0, 1.5fr) auto; gap: 1rem; align-items: center; padding: .9rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.marketing-mailing-production-card > div { display: grid; gap: .25rem; }
.marketing-mailing-production-card p { margin: 0; }
.marketing-mailing-production-card small { color: var(--ink-soft); }
.marketing-mailing-production-stats { display: flex !important; flex-wrap: wrap; gap: .4rem .9rem !important; }
.marketing-mailing-production-stats span { white-space: nowrap; font-size: var(--font-xs); }
.marketing-mailing-production-actions { display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: .45rem !important; }
@media (max-width: 860px) { .marketing-mailing-production-card { grid-template-columns: 1fr; } .marketing-mailing-production-actions { justify-content: flex-start; } }
.marketing-mailing-readiness { display: grid; gap: .75rem; }
.marketing-mailing-readiness ul { display: grid; gap: .55rem; margin: 0; padding-left: 1.2rem; color: var(--ink-soft); line-height: 1.45; }
.marketing-mailing-readiness summary { cursor: pointer; font-weight: 750; }
.marketing-mailing-sync-status { display: grid; gap: .3rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.marketing-mailing-sync-status .status-pill { justify-self: start; }
.marketing-mailing-sync-status small, .marketing-mailing-detail-note { color: var(--ink-soft); }
.marketing-mailing-exclusions { display: grid; grid-template-columns: 1fr auto; gap: .35rem .7rem; margin: .7rem 0 0; font-size: var(--font-xs); }
.marketing-mailing-exclusions dt { color: var(--ink-soft); }
.marketing-mailing-exclusions dd { margin: 0; font-weight: 750; }
.marketing-mailing-detail-note { margin: .55rem 0; font-size: var(--font-xs); }
.marketing-mailing-excluded-companies { display: grid; gap: .45rem; max-height: 24rem; overflow: auto; }
.marketing-mailing-excluded-companies article { display: grid; gap: .15rem; padding: .6rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.marketing-mailing-excluded-companies span, .marketing-mailing-excluded-companies small { color: var(--ink-soft); font-size: var(--font-xs); overflow-wrap: anywhere; }
.marketing-mailing-source-issues { display: grid; gap: .45rem; max-height: 24rem; overflow: auto; }
.marketing-mailing-source-issues article { display: grid; gap: .15rem; padding: .6rem; border: 1px solid #ead6a8; border-radius: var(--ui-radius); background: #fffaf0; }
.marketing-mailing-source-issues span, .marketing-mailing-source-issues small { color: var(--ink-soft); font-size: var(--font-xs); overflow-wrap: anywhere; }
.marketing-mailing-detail-list { display: grid; gap: .45rem; max-height: 24rem; overflow: auto; }
.marketing-mailing-detail-list article { display: grid; gap: .15rem; padding: .6rem; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--surface-soft); }
.marketing-mailing-detail-list span, .marketing-mailing-detail-list small { color: var(--ink-soft); font-size: var(--font-xs); overflow-wrap: anywhere; }
.marketing-mailing-detail-page { display: grid; gap: 1rem; }
.marketing-mailing-detail-page[hidden] { display: none; }
.marketing-mailing-detail-page .marketing-mailing-workspace-heading > div { display: grid; gap: .15rem; }
.marketing-mailing-detail-page .marketing-mailing-workspace-heading .eyebrow { margin: 0; }
.marketing-mailing-detail-intro { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: 1.2rem; align-items: center; padding: 1.15rem 1.25rem; border: 1px solid #efd6d2; border-left: 4px solid #E49696; border-radius: var(--ui-radius); background: #FBF3F1; }
.marketing-mailing-detail-intro strong { font: 600 clamp(1.8rem, 4vw, 2.6rem) var(--font-ui); }
.marketing-mailing-detail-intro p { max-width: 58rem; margin: 0; color: var(--ink-soft); line-height: 1.55; }
.marketing-mailing-exclusion-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem 1.2rem; }
.marketing-mailing-exclusion-filters[hidden] { display: none; }
.marketing-mailing-exclusion-filters label { flex: 0 1 34rem; min-width: 0; max-width: 100%; }
.marketing-mailing-exclusion-filters select { width: 100%; min-width: 0; }
.marketing-mailing-exclusion-filters p { margin: 0 0 .6rem; }
.marketing-mailing-detail-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--ui-radius); background: white; box-shadow: 0 .35rem 1rem rgba(40, 40, 40, .05); }
.marketing-mailing-detail-table-wrap table { min-width: 44rem; }
.marketing-mailing-detail-table-wrap tbody tr:hover { background: #fdf9f8; }
.marketing-mailing-detail-table-wrap td { overflow-wrap: anywhere; }
.marketing-mailing-templates { margin-top: 1rem; }
.marketing-mailing-token-note { margin: .75rem 0; padding: .65rem .75rem; border-radius: var(--ui-radius); background: var(--teal-pale); font-size: var(--font-xs); }