@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");
}

@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);
  --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: .5rem;
}
.skip-link:focus { top: 1rem; }

.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(360px, .95fr);
  background:
    radial-gradient(circle at 16% 18%, rgba(228, 150, 150, .24), transparent 28rem),
    var(--surface-soft);
}
.auth-brand {
  max-width: 660px;
  padding: clamp(3rem, 8vw, 7rem);
  color: var(--ink);
  align-self: center;
}
.auth-logo {
  display: block;
  width: min(19rem, 100%);
  height: auto;
  margin: 0 0 2.25rem;
}
.auth-intro { max-width: 34rem; font-size: 1.15rem; line-height: 1.7; color: var(--ink-soft); }
.auth-card {
  width: min(31rem, calc(100% - 3rem));
  margin: auto;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: white;
  border-radius: 1.5rem;
  box-shadow: var(--shadow);
}
.auth-card h2 { margin: .35rem 0 .75rem; font: 500 2.2rem/1.1 var(--font-ui); }

.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: 8px;
  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: .65rem;
  font-weight: 750;
}
.button.primary { color: var(--ink); background: var(--accent); box-shadow: 0 5px 14px rgba(228,150,150,.24); }
.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: .65rem;
  background: #fff2f2;
  font-weight: 750;
  line-height: 1.45;
}
.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;
}

.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-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: .5rem; }
.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: .65rem;
  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: .85rem; 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: .8rem; 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; }
.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: .2rem 0 0; font: 500 1.75rem var(--font-ui); }
.topbar-actions { display: flex; align-items: center; gap: .85rem; }
.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; }
.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: .55rem; }
.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: .75rem; 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: .55rem; 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 .55rem .55rem; 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; }
.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: .7rem; 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; }
.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: .65rem; 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: .7rem; 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: .7rem; 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: .8rem; 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: .45rem; 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: .7rem; 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: .6rem; 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: 1rem;
  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: .8rem; 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-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: .85rem; background: white; }
.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: 1rem; 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: .9rem; background: white; }
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-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); }
.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;
}
.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: .9rem;
  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; gap: 1rem; align-items: center; padding: .75rem .8rem; border-radius: .6rem; background: var(--surface-soft); font-size: .82rem; }
.account-row strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.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: .7rem; 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: .8rem; 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: 999px; 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: .6rem; 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: 1.15rem;
  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: .55rem; background: var(--surface-soft); }
.marketing-swatch { grid-row: span 2; width: 2rem; height: 2rem; border-radius: .35rem; 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-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: .9rem; 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: .5rem; 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: .5rem; 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: .6rem; 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: .7rem; 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: .55rem; 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: .9rem; 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: .5rem; 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: .5rem; background: #fcfaf9; color: var(--ink); padding: .4rem .55rem; }
.marketing-trash-note { margin: 1rem 0 0; padding: .75rem .9rem; border: 1px solid #e5c2bd; border-radius: .6rem; 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-asset-card { display: grid; grid-template-rows: 10rem auto 1fr; gap: .55rem; min-width: 0; padding: .75rem; border: 1px solid var(--line); border-radius: .7rem; 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: .45rem; 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) { 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-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-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: .65rem; }
.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: .3rem; 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: .45rem; 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; }
.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: .9rem;
  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: .8rem;
  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: .65rem;
  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: .75rem; 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: .9rem; 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: .8rem; 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: .85rem;
  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-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(14rem, 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); }
.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-archive-checklist-work { display: grid; gap: .65rem; margin-top: 1.2rem; padding: 1rem; border: 1px solid #bfd4cc; border-radius: .85rem; 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: .85rem; 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: .5rem; 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: .5rem; 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: .75rem; 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: .5rem; background: white; color: var(--ink); padding: .5rem .65rem; font: inherit; }
.crm-ib-status-choice-row { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; }
.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: .5rem; 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: 1rem; 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: .85rem; 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; }
.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: .8rem; 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: 8px; 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: 8px; 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: .8rem; 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: .5rem; 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: 8px; 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: .28rem; 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 .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: .65rem; background: white; }
.bol-excel-preview-wrap { width: 100%; height: 100%; overflow: auto; border: 1px solid #cfd5d1; border-radius: .65rem; 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: .65rem; 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; }
.module-placeholder {
  display: grid;
  justify-items: start;
  max-width: 46rem;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: white;
}
.module-placeholder .status-pill { margin-bottom: 1rem; }
.module-placeholder .button { margin-top: .6rem; }
.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: .8rem;
  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: .55rem; 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: .85rem; 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: .9rem; 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: .16rem; 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: .55rem; 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-impact-record .eyebrow { margin: 0 0 .3rem; }
.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: .9rem; 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: .9rem; 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: .55rem; 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: .8rem; 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: .8rem; 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: .55rem; 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: .65rem; 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; }
.savings-tracked-heading { margin-top: 1.35rem; }
.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: .9rem; 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: .7rem; 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 label:last-child { grid-column: 1 / -1; }
.automation-prompt-fields input, .automation-prompt-content-label textarea { width: 100%; border: 1px solid #d9d2d0; border-radius: .55rem; 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-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: .8rem; 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: .65rem; 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: .25rem .6rem .6rem .25rem; 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: .65rem; 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: .35rem; background: #e9f1ee; color: #285345; font-size: .7rem; overflow-wrap: anywhere; }
.automation-prompt-publish-checklist { padding: .8rem .9rem; border: 1px solid #d7dfe7; border-radius: .65rem; 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: .65rem; 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; }
.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: 1rem;
  background: white;
}
.module-record-list { display: grid; gap: .75rem; }
.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: .8rem;
  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; }
.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: .6rem;
  background: var(--teal-pale);
  font-weight: 750;
}
.upload-analysis { padding: .75rem .9rem; border-radius: .65rem; 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: .7rem;
}
.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: .65rem;
  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: .7rem;
  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: .7rem;
}
.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: 1rem; 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: .7rem; 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: .65rem; 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, .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(9rem, 1fr) auto; }
  .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 { grid-template-columns: 1fr; }
  .sidebar-status { display: none; }
}
.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: 14px;
  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: .55rem; 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: 10px; 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: .25rem; 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: 10px; 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: .7rem; 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: 10px;
  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) {
  .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-columns: 1fr; }
  .auth-brand { padding: 2.5rem 1.5rem 1.5rem; }
  .passkey-item { grid-template-columns: 1fr; }
  .passkey-item .button { width: 100%; }
  .auth-card { margin-bottom: 2rem; }
  .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-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; }
  .account-row { grid-template-columns: 1fr; gap: .35rem; }
  .form-grid.three { grid-template-columns: 1fr; }
  .module-record { grid-template-columns: 1fr; }
  .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; }
  .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 { grid-template-columns: 1fr; }
  .automation-prompt-library, .automation-prompt-editor { min-height: auto; }
}
@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; }
}