:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --card: #fff;
  --border: #e5e7eb;
  --text: #111827;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  /* Document-preview (zelfde defaults als `documentTheme.ts`; overschreven door `applyCompanyBrandThemeToDocument`) */
  --offer-primary: #2563eb;
  --offer-accent-bg: #eff6ff;
  --offer-text: #0f172a;
  --offer-border: #e2e8f0;
  --offer-muted: #64748b;
  --offer-callout-border: #bfdbfe;
  --offer-table-header-bg: #f1f5f9;
  --offer-accent: var(--offer-primary);
  --offer-navy: var(--offer-text);
  --offer-accent-soft: var(--offer-accent-bg);
  --invoice-primary: #2563eb;
  --invoice-accent-bg: #eff6ff;
  --invoice-text: #0f172a;
  --invoice-border: #e2e8f0;
  --invoice-muted: #64748b;
  --invoice-callout-border: #bfdbfe;
  --invoice-table-header-bg: #f1f5f9;
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.10);
}
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}

.ui-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.52);
  z-index: 60;
}
.ui-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 61;
}
.ui-modal[hidden],
.ui-modal-backdrop[hidden] {
  display: none !important;
}
.ui-modal__panel {
  width: min(520px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  padding: 14px 16px;
}
.ui-modal__head {
  margin-bottom: 8px;
}
.ui-modal__title {
  font-weight: 800;
  font-size: 1.02rem;
}
.ui-modal__body {
  color: #374151;
  font-size: 0.95rem;
  line-height: 1.45;
  margin-bottom: 14px;
  white-space: pre-wrap;
}
.ui-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* --- Share modal / Public view (minimal, professional) --- */
.share-modal__link {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}
.share-modal__link input {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  min-width: 0;
}
.share-modal__hint {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}
.share-modal__copied {
  color: #166534;
  font-weight: 700;
  font-size: 0.92rem;
  margin-left: 6px;
}
.share-modal__template {
  margin-top: 12px;
}
.share-modal__template textarea {
  width: 100%;
  min-height: 180px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92rem;
}
.public-quote-head {
  margin: 14px 0 12px;
}
.public-quote-head__title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 800;
}
.public-quote-head__meta {
  color: var(--muted);
  font-size: 0.92rem;
}
.public-cta {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.public-cta__note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.92rem;
}
.app-header {
  max-width: 1100px;
  margin: 0 auto 20px;
}
.app-header h1 {
  margin: 0 0 6px;
  font-size: 1.5rem;
}
.muted { color: var(--muted); font-size: 0.9rem; }
.small { font-size: 0.85rem; }

.layout {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .layout {
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
    align-items: start;
  }
}

/* Offertes / facturen: brede layout, document + zijbalk */
.offertes-view .app-header,
.facturen-view .app-header {
  max-width: none;
}
.offertes-layout,
.facturen-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
}
@media (min-width: 960px) {
  .offertes-layout,
  .facturen-layout {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  }
}
.offertes-detail-panel__h,
.facturen-detail-panel__h {
  margin: 0 0 14px;
  font-size: 1.1rem;
}
.offerte-detail-hero,
.factuur-detail-hero {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.offerte-detail-hero__kicker,
.factuur-detail-hero__kicker {
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.offerte-detail-hero__kicker-row{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.offerte-detail-hero__title,
.factuur-detail-hero__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.factuur-status-pill-wrap {
  margin: 0;
}
.offerte-detail-toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.offerte-detail-toolbar__primary,
.offerte-detail-toolbar__secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.offerte-detail-toolbar__secondary {
  margin-left: auto;
}
@media (max-width: 640px) {
  .offerte-detail-toolbar__secondary {
    margin-left: 0;
  }
}

/* --- Invoice (factuur) modern detail UI --- */
.invoice-header{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.invoice-header__left{ min-width: 0; }
.invoice-header__number{
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.2;
}
.invoice-header__ref{ margin-top: 4px; }
.invoice-header__customer{ margin-top: 10px; }
.invoice-header__right{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 240px;
}
.invoice-header__status .pill{ margin-left: auto; }
.invoice-header__meta{
  display:flex;
  gap: 12px;
  text-align: right;
}
.invoice-header__meta-val{ font-weight: 800; }
.invoice-header__total{ text-align:right; }
.invoice-header__total-amt{
  font-size: 1.2rem;
  font-weight: 950;
  letter-spacing: -0.01em;
}
@media (max-width: 840px){
  .invoice-header{ flex-direction: column; }
  .invoice-header__right{ align-items: flex-start; min-width: 0; }
  .invoice-header__meta{ text-align: left; }
}

.invoice-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
/* `[hidden]` default display:none loses to `.invoice-actions { display:flex }` (same specificity, later rule). */
.invoice-actions[hidden] {
  display: none !important;
}
.invoice-actions .btn-primary{ box-shadow: var(--shadow-sm); }

.preview-nav{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: nowrap;
}
.preview-nav button{
  padding: 6px 10px;
  border-radius: 10px;
}
.preview-nav .muted.small{
  min-width: 64px;
  text-align:center;
}

.invoice-pay__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.invoice-pay__amt{
  font-size: 1.05rem;
  font-weight: 900;
  margin-top: 2px;
}
.invoice-pay__bar{
  height: 10px;
  border-radius: 999px;
  background: #eef2ff;
  overflow: hidden;
  margin-top: 12px;
  position: relative;
}
.invoice-pay__bar-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #22c55e);
  border-radius: 999px;
}
.invoice-pay__bar-marker{
  position:absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: #374151;
  opacity: 0.65;
  left: 0%;
}
@media (max-width: 640px){
  .invoice-pay__grid{ grid-template-columns: 1fr; }
}

/* --- Invoice remaining (restfactuur) emphasis --- */
.invoice-callout{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-top: 12px;
  box-shadow: var(--shadow-sm);
}
.invoice-callout--rest{
  border-color: #fed7aa;
  background: #fff7ed;
}
.invoice-callout--concept{
  border-color: #f59e0b;
  background: #fffbeb;
}
.invoice-callout__title{
  font-weight: 950;
  letter-spacing: -0.01em;
}
.invoice-callout__sub{
  margin-top: 2px;
}
.invoice-callout__actions{
  flex: 0 0 auto;
}
.invoice-callout__actions .btn-primary[disabled]{
  opacity: 0.75;
  cursor: not-allowed;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.78rem;
  font-weight: 900;
  border: 1px solid var(--border);
  background: #f3f4f6;
  color: #111827;
  white-space: nowrap;
}
.badge--warn{
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}
.badge--ok{
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #166534;
}

/* --- Projectfacturatie (grouped invoices) --- */
.project-billing__bar{
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #f3f4f6;
  overflow: hidden;
  display:flex;
  margin-top: 12px;
}
.project-billing__seg{
  height: 100%;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 0.72rem;
  font-weight: 900;
  color: rgba(15,23,42,0.85);
  white-space: nowrap;
}
.project-billing__seg--deposit{
  background: linear-gradient(90deg, rgba(37,99,235,0.92), rgba(59,130,246,0.92));
  color: rgba(255,255,255,0.96);
}
.project-billing__seg--remainder{
  background: linear-gradient(90deg, rgba(245,158,11,0.92), rgba(251,191,36,0.92));
  color: rgba(69,26,3,0.96);
}
.project-billing__seg--regular{
  background: linear-gradient(90deg, rgba(148,163,184,0.80), rgba(203,213,225,0.92));
  color: rgba(15,23,42,0.86);
}
.project-billing__legend{
  display:grid;
  gap: 6px;
  margin-top: 10px;
}
.project-billing__legend-row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.project-billing__legend-row strong{
  font-weight: 900;
}
.project-billing__summary{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
@media (max-width: 640px){
  .project-billing__summary{ grid-template-columns: 1fr; }
}
.project-billing__k{
  color: var(--muted);
  font-size: 0.86rem;
}
.project-billing__v{
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.project-invoices__stack{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}
.invoice-acc{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.invoice-acc__sum{
  width: 100%;
  display:grid;
  grid-template-columns: 1fr max-content max-content;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  background: linear-gradient(180deg, #fff 0%, #fbfbfb 100%);
}
.invoice-acc__sum:hover{
  background: #f9fafb;
}
.invoice-acc__left{
  min-width: 0;
}
.invoice-acc__title{
  display:flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 950;
}
.invoice-acc__meta{
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.86rem;
}
.invoice-acc__amt{
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.invoice-acc__chev{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #f3f4f6;
  position: relative;
}
.invoice-acc__chev::after{
  content: '';
  position:absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid #6b7280;
  border-bottom: 2px solid #6b7280;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.18s ease;
}
.invoice-acc.is-open .invoice-acc__chev::after{
  transform: translate(-50%, -35%) rotate(225deg);
}
.invoice-acc__body{
  border-top: 1px solid var(--border);
  padding: 12px 12px;
  background: #fff;
}
.invoice-acc__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
@media (max-width: 840px){
  .invoice-acc__sum{ grid-template-columns: 1fr; }
  .invoice-acc__amt{ justify-self: start; }
  .invoice-acc__grid{ grid-template-columns: 1fr; }
}
.invoice-acc__actions{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.invoice-acc__actions button{
  padding: 8px 12px;
  border-radius: 10px;
}
.invoice-acc__mini{
  font-size: 0.86rem;
  color: var(--muted);
}
.invoice-side-badges{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.invoice-work__table-wrap{
  overflow-x: auto;
}
.invoice-work__table{
  width:100%;
  border-collapse: collapse;
}
.invoice-work__table thead th{
  text-align:left;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 800;
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
}
.invoice-work__table tbody td{
  padding: 10px 10px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}
.invoice-work__desc{
  font-weight: 800;
  color: #111827;
}

.invoice-preview .offerte-doc-preview{
  margin-top: 10px;
}

.invoice-preview{
  margin-top: 12px;
}
.invoice-preview summary{
  cursor: pointer;
}
.offerte-detail-body {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .offerte-detail-body {
    grid-template-columns: minmax(0, 4fr) minmax(240px, 1fr);
  }
}
.offerte-doc-heading {
  font-size: 0.85rem;
  margin: 0 0 8px;
}
.offerte-detail-doc,
.factuur-detail-doc {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.offerte-doc-preview {
  padding: 22px 24px;
  margin-bottom: 0;
  min-height: 200px;
  background: #fff;
}

/* Professional doc header cards (preview/internal) */
#out .doc-head,
#d_offerte .doc-head {
  margin: 2px 0 18px;
}
#out .doc-head__top,
#d_offerte .doc-head__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
#out .doc-head__kicker,
#d_offerte .doc-head__kicker {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
#out .doc-head__title,
#d_offerte .doc-head__title {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.2;
  margin-top: 4px;
  color: #0f172a;
}
#out .doc-card,
#d_offerte .doc-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}
.offerte-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.offerte-side-card {
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.offerte-side-card--timeline {
  background: #fff;
}
.offerte-side-card__title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.offerte-side-dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  font-size: 0.88rem;
}
.offerte-side-dl dt {
  margin: 0;
  color: var(--muted);
  font-weight: 500;
}
.offerte-side-dl dd {
  margin: 0;
  word-break: break-word;
}

/* Sidebar: acceptance proof + audit trail should never overflow */
.offerte-proof-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.offerte-audit {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.offerte-audit__row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 6px;
  align-items: baseline;
  font-size: 0.85rem;
  color: var(--muted);
}
.offerte-audit__ts {
  white-space: nowrap;
}
.offerte-audit__sep {
  color: #9ca3af;
}
.offerte-audit__label {
  color: #374151;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.offerte-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.offerte-status-row select {
  flex: 1;
  min-width: 140px;
  max-width: 100%;
}
.offerte-status-msg {
  margin: 0;
  min-height: 1.2em;
}

/* Offertes: calm SaaS sidebar summary */
.offerte-side-summary{
  padding: 14px 14px;
}
.offerte-side-summary__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.offerte-side-summary__title{
  font-weight: 850;
  font-size: 0.95rem;
}
.offerte-side-dl--tight{
  margin: 0;
  gap: 6px 14px;
}
.offerte-side-total{
  font-size: 1.05rem;
  font-weight: 900;
  color: #111827;
}
.offerte-side-status{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.offerte-side-timeline{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.offerte-timeline {
  font-size: 0.88rem;
}
.offerte-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.offerte-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  padding-bottom: 14px;
}
.offerte-timeline__item:last-child {
  padding-bottom: 0;
}
.offerte-timeline__item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.offerte-timeline__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
  margin-top: 3px;
  justify-self: center;
}
.offerte-timeline__item--current .offerte-timeline__dot {
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.offerte-timeline__label {
  font-weight: 600;
  font-size: 0.82rem;
  margin-bottom: 4px;
}
.offerte-timeline__meta {
  margin: 0;
}
.offerte-timeline__pill {
  margin-top: 4px;
}

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.panel h2 {
  margin: 0 0 12px;
  font-size: 1.1rem;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.panel-head h2 { margin: 0; }

button {
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
}
button:hover { background: #f9fafb; }
button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}
button.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
button.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

button.btn-danger-ghost{
  color: #b91c1c;
  border-color: #fecaca;
  background: #fff;
}
button.btn-danger-ghost:hover{
  background: #fef2f2;
  border-color: #fca5a5;
}

/* Speech-first CTA styling */
.btn-cta-speech {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  padding: 10px 14px;
}
.btn-cta-speech__ic{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  flex: 0 0 auto;
}
.btn-cta-speech__txt{
  display: grid;
  gap: 1px;
  text-align: left;
  line-height: 1.15;
}
.btn-cta-speech__title{
  font-weight: 850;
  font-size: 0.98rem;
}
.btn-cta-speech__sub{
  font-weight: 600;
  font-size: 0.78rem;
  opacity: 0.90;
  white-space: nowrap;
}
@media (max-width: 520px){
  .btn-cta-speech__sub{ white-space: normal; }
}

/* --- App frame (sidebar + content) --- */
.app-frame {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .app-frame {
    grid-template-columns: 272px minmax(0, 1fr);
  }
}
.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px 14px 16px;
  background: rgba(255, 255, 255, 0.75);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(10px);
  display: none;
}
@media (min-width: 980px) {
  .app-sidebar { display: flex; flex-direction: column; gap: 12px; }
}
.app-sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 6px 10px;
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.brand-logo img {
  height: 42px;
  width: auto;
  display: block;
  object-fit: contain;
}
.app-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 6px;
}
.nav-tab {
  text-align: left;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 0.95rem;
  color: #0f172a;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: center;
}
.nav-ic {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  opacity: 0.85;
  font-size: 14px;
}
.nav-label{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.nav-badge{
  font-size: 0.72rem;
  font-weight: 750;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, #ffffff);
  color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent) 10%, #ffffff);
  white-space: nowrap;
}
.nav-ic--mic { opacity: 1; }
.nav-tab:hover { background: rgba(15, 23, 42, 0.06); }
.nav-tab.is-active {
  background: color-mix(in srgb, var(--accent) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--accent) 28%, #ffffff);
  color: var(--accent-hover);
  font-weight: 650;
}
.app-sidebar__footer {
  margin-top: auto;
  padding: 12px 6px 0;
  display: grid;
  gap: 10px;
}

.app-main {
  padding: 18px 14px 60px;
}
@media (min-width: 760px) {
  .app-main { padding: 20px 22px 70px; }
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1180px;
  margin: 0 auto 18px;
}
.app-topbar__search {
  flex: 1;
  min-width: 0;
}
.app-topbar__search input[type="search"]{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.8);
  box-shadow: var(--shadow-sm);
}
.app-topbar__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.8);
  box-shadow: var(--shadow-sm);
  padding: 0;
  display: grid;
  place-items: center;
}
.btn-icon:hover { background: #fff; }

/* Mobile fallback: keep old topbar hidden only visually (nav still works via buttons elsewhere) */
.topbar { display: none !important; }

/* --- Dashboard redesign --- */
.sidebar-user {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.85);
  box-shadow: var(--shadow-sm);
}
.sidebar-user__avatar {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, #ffffff);
  display: grid;
  place-items: center;
  font-weight: 850;
  color: var(--accent-hover);
}
.sidebar-user__name {
  font-weight: 750;
  font-size: 0.95rem;
  line-height: 1.2;
}

.page-head {
  max-width: 1180px;
  margin: 0 auto 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.page-head h1 {
  margin: 0 0 6px;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
}
.page-head__title p { margin: 0; max-width: 64ch; }
.btn-lg {
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 750;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.18);
}

.dash-kpi-row {
  max-width: 1180px;
  margin: 0 auto 16px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .dash-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .dash-kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.dash-kpi-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.dash-kpi-card:hover { background: #fbfdff; border-color: rgba(37,99,235,0.25); }
.dash-kpi-card--static { cursor: default; }
.dash-kpi-card--static:hover { background: #fff; border-color: rgba(148, 163, 184, 0.35); }
.dash-kpi-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(37, 99, 235, 0.10);
  border: 1px solid rgba(37, 99, 235, 0.18);
  flex: 0 0 auto;
}
.dash-kpi-card__label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}
.dash-kpi-card__value {
  margin-top: 6px;
  font-size: 1.5rem;
  font-weight: 850;
  letter-spacing: -0.02em;
}
.dash-kpi-card__sub {
  margin-top: 4px;
}

.dash-layout {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1040px) {
  .dash-layout { grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr); }
}
.dash-panel {
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.dash-panel-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.dash-fold-btn{
  padding: 8px 12px;
  border-radius: 12px;
}
.dash-fold-btn[aria-expanded="true"]::after{
  content: " ▾";
  opacity: 0.8;
}
.dash-fold-btn[aria-expanded="false"]::after{
  content: " ▸";
  opacity: 0.8;
}
.dash-activity-list {
  display: grid;
  gap: 10px;
}
.dash-activity-list[hidden] {
  display: none !important;
}

/* Attention list (action-first, light separators) */
.dash-attn-list {
  display: grid;
  gap: 0;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.dash-attn-list[hidden] { display: none !important; }
.dash-group{
  padding: 10px 14px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  background: #f8fafc;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dash-group:first-child{ border-top: none; }
.dash-attn-row {
  display: grid;
  grid-template-columns: 44px 1fr max-content;
  gap: 10px 14px;
  padding: 12px 14px;
  align-items: center;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
}
.dash-attn-row:first-child { border-top: none; }
.dash-attn-ic {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #f3f4f6;
  border: 1px solid var(--border);
  font-size: 14px;
}
.dash-attn-title {
  font-weight: 800;
  margin: 0;
  font-size: 0.95rem;
}
.dash-attn-sub {
  margin: 4px 0 0;
  color: #334155;
  font-size: 0.88rem;
}
.dash-attn-date {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}
.dash-attn-right {
  display: grid;
  justify-items: end;
  gap: 8px;
}
.dash-attn-amount {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-attn-action {
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 750;
  font-size: 0.9rem;
  white-space: nowrap;
}
.dash-attn-action--follow {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.10);
}
.dash-attn-action--invoice {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.10);
}
.dash-attn-action--remind {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
}
.dash-attn-action--open{
  border-color: rgba(37, 99, 235, 0.25);
  background: rgba(37, 99, 235, 0.06);
}
.dash-attn-action--warn{
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.10);
}
.dash-attn-action--critical{
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
}

.dash-empty{
  margin-top: 10px;
  border: 1px dashed rgba(148,163,184,0.55);
  border-radius: 16px;
  background: rgba(248,250,252,0.75);
  padding: 16px 14px;
}
.dash-empty__title{
  font-weight: 950;
  margin-bottom: 6px;
}
.dash-empty__actions{
  margin-top: 12px;
}

.dash-quick__btns{
  display:grid;
  gap: 10px;
}
.dash-quick__btns button{
  width: 100%;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 850;
}
.dash-attn-action:hover {
  filter: brightness(0.98);
}
.dash-activity-row {
  display: grid;
  grid-template-columns: 44px 1fr max-content;
  gap: 10px 14px;
  padding: 12px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  align-items: center;
}
.dash-activity-ic {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #f3f4f6;
  border: 1px solid var(--border);
  font-size: 14px;
}
.dash-activity-row:hover { background: #f9fafb; }
.dash-activity-title {
  font-weight: 700;
  margin: 0;
}
.dash-activity-meta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}
.dash-activity-amount {
  text-align: right;
  font-weight: 850;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dash-activity-right {
  display: grid;
  justify-items: end;
  gap: 6px;
}
.dash-activity-pill {
  justify-self: end;
}

/* Conversion donut */
.dash-conversion__grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: center;
}
.dash-donut {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: conic-gradient(#22c55e 0deg, #e5e7eb 0deg);
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
}
.dash-donut__inner {
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  text-align: center;
}
.dash-donut__value {
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1;
}
.dash-conversion__legend {
  display: grid;
  gap: 10px;
}
.dash-legend-row {
  display: grid;
  grid-template-columns: 12px 1fr max-content;
  gap: 8px;
  align-items: center;
  font-size: 0.92rem;
}
.dash-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
}
.dash-legend-dot--ok { background: #22c55e; }
.dash-legend-dot--no { background: #cbd5e1; }
.dash-legend-val { font-weight: 850; font-variant-numeric: tabular-nums; }
.dash-activity-pill {
  justify-self: end;
  align-self: start;
}
.dash-assistant {
  background: radial-gradient(900px 180px at 0% 0%, rgba(37,99,235,0.12), transparent 55%),
              radial-gradient(900px 180px at 100% 0%, rgba(16,185,129,0.10), transparent 55%),
              #fff;
}
.dash-assistant__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 760px) {
  .dash-assistant__grid { grid-template-columns: 1fr max-content; }
}
.dash-assistant__title {
  font-weight: 850;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.dash-assistant__hint{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.dash-assistant__mic{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(37, 99, 235, 0.10);
  border: 1px solid rgba(37, 99, 235, 0.18);
  flex: 0 0 auto;
}
.btn-voice,
.btn-voice-alt{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
}
.btn-voice__ic{
  width: 18px;
  display: inline-grid;
  place-items: center;
}
.dash-assistant__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.dash-compact-dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 10px 12px;
  font-size: 0.92rem;
}
.dash-compact-dl dt { color: var(--muted); }
.dash-compact-dl dd {
  margin: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.dash-tip__title {
  font-weight: 800;
  margin-bottom: 6px;
}
.dash-tip__actions { margin-top: 10px; }
button.btn-ghost,
a.btn-ghost {
  background: transparent;
  text-decoration: none;
  color: inherit;
  display: inline-block;
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
button.btn-ghost:hover,
a.btn-ghost:hover {
  background: #f9fafb;
}

/* ——— Dashboard (action-driven) ——— */
.dash-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.dash-insights-btn { white-space: nowrap; }

.dash-action-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 16px;
}
@media (min-width: 860px) {
  .dash-action-grid { grid-template-columns: 1fr 1fr; }
}
.dash-action-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-action-item {
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fafafa;
}
.dash-action-item:hover { background: #f3f4f6; }
.dash-action-top {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}
.dash-action-kind {
  font-size: 0.8rem;
  color: var(--muted);
}
.dash-action-badge {
  font-size: 0.82rem;
  color: #111827;
}
.dash-action-amount {
  font-weight: 700;
}
.dash-action-main {
  margin-top: 6px;
  font-weight: 600;
}
.dash-action-sub {
  margin-top: 2px;
  font-size: 0.82rem;
  color: var(--muted);
}

/* urgency indicators (subtle left border, not heavy colors) */
.dash-action-item--red { border-left: 4px solid #ef4444; }
.dash-action-item--orange { border-left: 4px solid #f59e0b; }
.dash-action-item--green { border-left: 4px solid #22c55e; }

/* ——— Insights ——— */
.insights-page{
  padding-bottom: 44px;
}
.insights-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.insights-head h1{
  margin: 0 0 6px;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
}
.insights-head__title p{ margin: 0; max-width: 64ch; }
.insights-head__filter{
  display:grid;
  gap: 6px;
  align-items: start;
  min-width: 220px;
}
.insights-filter{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.9);
  box-shadow: var(--shadow-sm);
}

.insights-kpi-row{
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin: 0 0 16px;
}
@media (min-width: 760px){
  .insights-kpi-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px){
  .insights-kpi-row{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.insights-kpi-card{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #fff;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.insights-kpi-card__icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 900;
}
.insights-kpi-card__icon--blue{
  background: color-mix(in srgb, var(--accent) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--accent) 18%, #ffffff);
  color: var(--accent-hover);
}
.insights-kpi-card__icon--amber{ background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.22); color:#92400e; }
.insights-kpi-card__icon--green{ background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.22); color:#166534; }
.insights-kpi-card__icon--indigo{ background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.22); color:#3730a3; }
.insights-kpi-card__icon--sky{ background: rgba(14,165,233,0.12); border-color: rgba(14,165,233,0.22); color:#0369a1; }
.insights-kpi-card__label{
  font-size: 0.9rem;
  font-weight: 800;
  color: #0f172a;
}
.insights-kpi-card__value{
  margin-top: 6px;
  font-size: 1.55rem;
  font-weight: 950;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.insights-kpi-card__sub{ margin-top: 4px; }

.insights-top-grid{
  display:grid;
  gap: 14px;
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: 14px;
}
@media (min-width: 1040px){
  .insights-top-grid{ grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); }
}
.insights-bottom-grid{
  display:grid;
  gap: 14px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1040px){
  .insights-bottom-grid{ grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.75fr); }
}
.insights-panel{
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

/* Funnel */
.ins-funnel{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (min-width: 640px){
  .ins-funnel{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
}
.ins-step{
  position: relative;
  padding: 12px 12px;
  background: #fff;
  border: 1px solid var(--border);
  min-width: 0;
}
@media (min-width: 640px){
  .ins-step{
    border-right: none;
  }
  .ins-step:first-child{ border-top-left-radius: 14px; border-bottom-left-radius: 14px; }
  .ins-step:last-child{ border-right: 1px solid var(--border); border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
}
.ins-step__k{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}
.ins-step__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  flex: 0 0 auto;
}
.ins-step__dot--concept{ background: #9ca3af; }
.ins-step__dot--sent{ background: #f59e0b; }
.ins-step__dot--viewed{ background: #3b82f6; }
.ins-step__dot--accepted{ background: #10b981; }
.ins-step__v{
  margin-top: 8px;
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.ins-step__count{
  font-weight: 950;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ins-step__pct{
  font-weight: 850;
  font-size: 0.88rem;
  color: #334155;
  white-space: nowrap;
}
.ins-info{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(248,250,252,0.75);
  color: #334155;
  font-size: 0.92rem;
}
.ins-info strong{ font-weight: 900; }

/* Lead time */
.ins-leadtime__kpi{
  margin-top: 10px;
}
.ins-leadtime__val{
  font-size: 1.55rem;
  font-weight: 950;
  letter-spacing: -0.02em;
}
.ins-spark-wrap{
  margin-top: 10px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  padding-top: 12px;
}
.ins-spark{
  width: 100%;
  height: 110px;
  display:block;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfbfb 0%, #fff 70%);
  border: 1px solid rgba(226,232,240,0.9);
}
#insLeadtimePath{ stroke: var(--accent); stroke-width: 3; }
#insLeadtimeAvg{ stroke: rgba(148,163,184,0.9); stroke-width: 2; stroke-dasharray: 4 4; }
.ins-dot{ fill: var(--accent-hover); stroke: #fff; stroke-width: 2; }
.ins-dot--muted{ fill: #94a3b8; }

/* Action list */
.ins-action-list{
  display:grid;
  gap: 0;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.ins-action-empty{
  padding: 14px 14px;
  color: var(--muted);
}
.ins-action-row{
  width: 100%;
  text-align:left;
  display:grid;
  grid-template-columns: 44px 1fr max-content;
  gap: 10px 14px;
  padding: 12px 14px;
  align-items:center;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  background: #fff;
}
.ins-action-row:first-child{ border-top: none; }
.ins-action-row:hover{ background: #f9fafb; }
.ins-action-ic{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: #f3f4f6;
  border: 1px solid var(--border);
  font-size: 14px;
}
.ins-action-title{
  font-weight: 900;
  margin: 0;
  font-size: 0.95rem;
}
.ins-action-sub{
  margin: 4px 0 0;
  color: #334155;
  font-size: 0.88rem;
}
.ins-action-chev{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #f3f4f6;
  position: relative;
}
.ins-action-chev::after{
  content: '';
  position:absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid #6b7280;
  border-bottom: 2px solid #6b7280;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Revenue donut */
.ins-rev-grid{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}
@media (max-width: 520px){
  .ins-rev-grid{ grid-template-columns: 1fr; }
}
.ins-donut{
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: conic-gradient(#10b981 0deg, #e5e7eb 0deg);
  display:grid;
  place-items:center;
  border: 1px solid var(--border);
  margin: 0 auto;
}
.ins-donut__inner{
  width: 102px;
  height: 102px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  display:grid;
  place-items:center;
  text-align:center;
}
.ins-donut__value{
  font-weight: 950;
  font-size: 1.05rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ins-rev-legend{
  display:grid;
  gap: 10px;
}
.ins-legend-row{
  display:grid;
  grid-template-columns: 12px 1fr max-content;
  gap: 8px;
  align-items:center;
  font-size: 0.92rem;
}
.ins-legend-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
}
.ins-legend-val{
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ins-legend-sub{
  grid-column: 2 / -1;
  margin-top: -6px;
  color: var(--muted);
  font-size: 0.84rem;
}

/* Tips */
.ins-tip{
  background: radial-gradient(900px 220px at 0% 0%, rgba(37,99,235,0.14), transparent 55%),
              radial-gradient(900px 220px at 100% 0%, rgba(16,185,129,0.10), transparent 55%),
              #fff;
}
.ins-tip__ic{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(37,99,235,0.10);
  border: 1px solid rgba(37,99,235,0.18);
  margin-bottom: 10px;
}
.ins-tip__title{
  font-weight: 950;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.ins-tip__actions{ margin-top: 12px; }

/* ——— Quote inline line editor ——— */
.quote-lines-scroll {
  width: 100%;
  overflow-x: auto;
}
.quote-lines-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.quote-lines-table th,
.quote-lines-table td {
  border-bottom: 1px solid var(--border);
  padding: 8px 8px;
  vertical-align: top;
}
.quote-lines-table th {
  text-align: left;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  background: linear-gradient(180deg, #fafafa 0%, #fff 80%);
}
.quote-lines-table td input[type='text'],
.quote-lines-table td input[type='number'],
.quote-lines-table td select {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
}
.quote-lines-table td .qty-grid {
  display: grid;
  gap: 6px;
}
.quote-lines-table td .qty-helper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.quote-lines-table td .qty-helper input::placeholder {
  color: #9ca3af;
}
.quote-lines-table td .qty-helper input {
  padding: 6px 8px;
  font-size: 13px;
}
.quote-lines-table td .cell-total {
  text-align: right;
  font-weight: 800;
  padding-top: 10px;
  white-space: nowrap;
}
.quote-lines-table td .cell-sub {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}
.quote-lines-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}
.quote-lines-drag{
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  cursor: grab;
  user-select: none;
}
.quote-lines-drag:active{ cursor: grabbing; }
tr.is-dragging{
  opacity: 0.6;
}
.quote-lines-desc-head {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}
.quote-lines-desc-head input[type='text'] {
  flex: 1;
  min-width: 0;
}
.quote-lines-desc-head .quote-lines-del {
  flex-shrink: 0;
  margin-top: 2px;
  white-space: nowrap;
}
.quote-lines-del {
  padding: 6px 10px;
  font-size: 13px;
}
.quote-lines-del--icon{
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.quote-lines-row--new td {
  background: #eff6ff;
  transition: background 0.8s ease;
}

.quote-lines-autofill {
  background: #f0f9ff !important;
  border-color: #93c5fd !important;
}
.quote-lines-hint {
  margin-top: 4px;
  font-size: 0.75rem;
  color: #6b7280;
}
.quote-lines-hint strong {
  font-weight: 700;
  color: #111827;
}

.offerte-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(52vh, 420px);
  overflow-y: auto;
}
.offerte-list li { margin: 0 0 8px; }
.offerte-list button {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
}
.offerte-list button:hover { background: #f3f4f6; }
.offerte-list button.is-active {
  border-color: var(--accent);
  background: #eff6ff;
  box-shadow: 0 0 0 1px var(--accent);
}
.offerte-list-item__top{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.offerte-list-item__name{
  font-weight: 750;
  font-size: 0.98rem;
  line-height: 1.2;
}
.offerte-list-item__badge{
  flex: 0 0 auto;
}
.offerte-list-item__sub{
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--muted);
}
.offerte-list__amount{
  color: #111827;
  font-weight: 750;
}

.stack { display: flex; flex-direction: column; gap: 16px; }

.detail-meta {
  display: grid;
  gap: 6px 16px;
  grid-template-columns: auto 1fr;
  font-size: 0.9rem;
  margin-bottom: 14px;
}
.detail-meta .label { color: var(--muted); }
.json-block {
  background: #1f2937;
  color: #e5e7eb;
  padding: 12px 14px;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.8rem;
  line-height: 1.4;
  max-height: 240px;
  overflow-y: auto;
}

label strong { display: block; margin-bottom: 4px; font-size: 0.9rem; }
textarea,
input[type='text'],
input[type='search'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='date'],
input[type='url'],
select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
}
textarea { min-height: 120px; resize: vertical; }
textarea:focus-visible,
input[type='text']:focus-visible,
input[type='search']:focus-visible,
input[type='email']:focus-visible,
input[type='password']:focus-visible,
input[type='number']:focus-visible,
input[type='date']:focus-visible,
input[type='url']:focus-visible,
select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 2px;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

/* --- Auth pages (register/login) --- */
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
  background:
    radial-gradient(1000px 500px at 15% 0%, rgba(37, 99, 235, 0.10) 0%, rgba(37, 99, 235, 0.00) 60%),
    radial-gradient(900px 480px at 95% 10%, rgba(14, 165, 233, 0.10) 0%, rgba(14, 165, 233, 0.00) 60%),
    linear-gradient(180deg, #f8fafc 0%, var(--bg) 65%);
}
.auth-card {
  width: min(420px, 100%);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.10);
  padding: 18px 18px 16px;
}
.auth-brand {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 14px;
  text-align: center;
}
.auth-brand .brand-logo {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
.auth-brand .brand-logo img {
  height: 34px;
}
.auth-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 850;
  letter-spacing: -0.01em;
}
.auth-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.auth-form {
  margin-top: 14px;
}
.auth-field {
  display: grid;
  gap: 6px;
}
.auth-field + .auth-field {
  margin-top: 10px;
}
.auth-actions {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.btn-block {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  font-weight: 750;
}
.auth-links {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.92rem;
}
.auth-links a {
  color: var(--accent-hover);
  text-decoration: none;
  font-weight: 650;
}
.auth-links a:hover {
  text-decoration: underline;
}
.auth-error {
  margin-top: 10px;
  color: #b91c1c;
  font-size: 0.9rem;
  min-height: 1.2em;
}
.auth-hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}
.pw-wrap {
  position: relative;
}
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.pw-toggle:hover {
  background: #f9fafb;
}
.pw-wrap input[type='password'],
.pw-wrap input[type='text'] {
  padding-right: 86px;
}
.field-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
@media (min-width: 520px) {
  .field-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.row { margin: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#micBtn[aria-pressed='true'],
.nieuw-mic-btn[aria-pressed='true'] {
  outline: 2px solid #0b5;
  outline-offset: 2px;
}

/* ——— Nieuwe-offerte pagina ——— */
.nieuw-page {
  padding-bottom: 32px;
}
.nieuw-stepper{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  margin: 8px 0 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfbfb 0%, #fff 70%);
}
.nieuw-step{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.nieuw-step__dot{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 0.88rem;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 18%, transparent);
  flex: 0 0 auto;
}
.nieuw-step__dot--muted{
  background: #9ca3af;
  box-shadow: none;
}
.nieuw-step__title{
  font-weight: 850;
  font-size: 0.92rem;
  line-height: 1.1;
}
.nieuw-step__sub{
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.nieuw-step__line{
  height: 1px;
  flex: 1 1 auto;
  background: #e5e7eb;
  min-width: 18px;
}

.nieuw-layout{
  display: grid;
  gap: 16px;
  align-items: start;
}
@media (min-width: 980px){
  .nieuw-layout{
    grid-template-columns: 1fr 420px;
  }
}
.nieuw-main{
  display: grid;
  gap: 14px;
}
.nieuw-side{
  display: grid;
  gap: 12px;
}
@media (min-width: 980px){
  .nieuw-side{
    position: sticky;
    top: 14px;
  }
}
.nieuw-live{
  padding: 16px 16px;
}
.nieuw-live-head{
  margin-bottom: 12px;
}
.nieuw-live-card{
  min-height: 260px;
}
.nieuw-live-card #out{
  transform: scale(0.92);
  transform-origin: top left;
}
.nieuw-live-card{
  overflow: auto;
  max-height: calc(100vh - 260px);
}
.nieuw-pdf-btn{
  width: 100%;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 850;
}
.nieuw-tips{
  border-radius: 16px;
}
.nieuw-tips__list{
  margin: 0;
  padding-left: 18px;
  color: #111827;
  font-size: 0.92rem;
  display: grid;
  gap: 8px;
}
.nieuw-page-header {
  margin-bottom: 8px;
}
.nieuw-page-intro {
  max-width: 52rem;
  line-height: 1.5;
}
.nieuw-page-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* New quote redesign (speech-first) */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.nieuw-hero {
  padding: 22px 22px;
  border-radius: 18px;
  background: radial-gradient(900px 220px at 0% 0%, rgba(37,99,235,0.14), transparent 55%),
              radial-gradient(900px 220px at 100% 0%, rgba(16,185,129,0.10), transparent 55%),
              #fff;
}
.nieuw-hero__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 860px) {
  .nieuw-hero__grid { grid-template-columns: 1.1fr 0.9fr; }
}
.nieuw-hero__title {
  margin: 0 0 6px;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.nieuw-hero__sub { margin: 0 0 14px; }
.nieuw-hero__actions { margin: 10px 0 12px; }
.nieuw-hero__mic {
  padding: 14px 18px;
  border-radius: 16px;
  font-size: 1.02rem;
  font-weight: 850;
  box-shadow: 0 12px 30px rgba(37,99,235,0.20);
}
.nieuw-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.nieuw-hero-chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.75);
  font-size: 0.9rem;
}
.nieuw-hero-chip:hover { background: #fff; }
.nieuw-hero__or {
  margin: 14px 0 10px;
  color: var(--muted);
  font-size: 0.9rem;
  text-transform: lowercase;
}
.nieuw-hero__type {
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 750;
}
.nieuw-hero__textarea {
  min-height: 150px;
  border-radius: 16px;
  background: rgba(255,255,255,0.9);
}
.nieuw-hero__toolbar{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.nieuw-hero__toolbar .btn-primary,
.nieuw-hero__toolbar .btn-ghost{
  border-radius: 14px;
}
@media (max-width: 520px){
  .nieuw-hero__toolbar button{
    width: 100%;
  }
}

.nieuw-result {
  border-radius: 18px;
}
.nieuw-result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.nieuw-result__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
}
.nieuw-badge{
  display:inline-block;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, #ffffff);
  color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent) 10%, #ffffff);
}
.nieuw-result__meta {
  margin: 10px 0 12px;
}
.nieuw-quote-text{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.95);
  font-size: 14px;
  line-height: 1.35;
  resize: vertical;
  min-height: 110px;
}
.nieuw-result__help{
  margin-top: 6px;
}
.nieuw-suggest-empty{
  border: 1px dashed rgba(148,163,184,0.55);
  border-radius: 16px;
  background: rgba(248,250,252,0.75);
  padding: 14px 14px;
  margin: 10px 0 12px;
}
.nieuw-suggest-empty__title{
  font-weight: 850;
  margin-bottom: 6px;
}
.nieuw-parse-warnings{
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(248,250,252,0.9);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 10px 0 12px;
  color: #334155;
  font-size: 0.9rem;
}
.nieuw-parse-warnings strong{
  font-weight: 850;
}
.nieuw-parse-warnings ul{
  margin: 6px 0 0;
  padding-left: 18px;
}
.nieuw-parse-warnings li{
  margin: 2px 0;
}
.nieuw-result__totals {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 12px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  padding-top: 12px;
}
.nieuw-settings__title,
.nieuw-actions__title{
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 900;
}

.nieuw-settings-block{
  margin-top: 12px;
}
.nieuw-settings-block:first-of-type{
  margin-top: 0;
}
.nieuw-settings__subhead{
  margin: 0 0 10px;
  font-size: 0.92rem;
  font-weight: 850;
  color: #111827;
  letter-spacing: -0.01em;
}
.nieuw-settings-compact{
  max-width: 560px;
}
.nieuw-actions {
  border-radius: 18px;
  background: #fff;
}
.nieuw-actions{
  position: sticky;
  bottom: 10px;
  z-index: 10;
  box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.06);
}
.nieuw-actions__grid{
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 860px){
  .nieuw-actions__grid{ grid-template-columns: 1fr max-content; }
}
.nieuw-actions__btns{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.nieuw-actions__btns button{
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 850;
}
@media (max-width: 520px){
  .nieuw-actions__btns{
    width: 100%;
    justify-content: stretch;
  }
  .nieuw-actions__btns button{
    width: 100%;
  }
  .nieuw-hero__mic{
    width: 100%;
  }
}

.quote-lines-check{
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  color: #92400e;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.22);
  white-space: nowrap;
}
.nieuw-sect {
  padding: 20px 22px;
}
details.nieuw-accordion {
  list-style: none;
}
details.nieuw-accordion::marker,
details.nieuw-accordion::-webkit-details-marker {
  display: none;
}
details.nieuw-accordion > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 14px;
  margin: -4px -2px 0;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 1.05rem;
  color: #111827;
}
details.nieuw-accordion > summary::-webkit-details-marker {
  display: none;
}
.nieuw-accordion-chevron {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
  background: #f3f4f6;
  position: relative;
}
.nieuw-accordion-chevron::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  width: 6px;
  height: 6px;
  border-right: 2px solid #6b7280;
  border-bottom: 2px solid #6b7280;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.2s ease;
}
details.nieuw-accordion[open] > summary .nieuw-accordion-chevron::after {
  transform: translate(-50%, -20%) rotate(225deg);
}
.nieuw-accordion-body {
  padding-top: 14px;
}
.nieuw-sect--klant {
  background: linear-gradient(180deg, #fafafa 0%, #fff 48%);
  border-color: #e8e8ec;
}
.nieuw-req-mark {
  font-weight: 600;
  color: #b45309;
  font-size: 0.88em;
}
abbr.nieuw-req-star {
  text-decoration: none;
  font-weight: 700;
  color: #b91c1c;
  cursor: help;
}
.nieuw-sect--aanvraag {
  border-color: #dbeafe;
  box-shadow: 0 1px 0 rgba(29, 78, 216, 0.06);
}
.nieuw-sect--result {
  border-color: #d1d5db;
}
.nieuw-sect-head {
  margin-bottom: 16px;
}
.nieuw-sect-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
}
.nieuw-sect-title--hero {
  font-size: 1.2rem;
}
.nieuw-sect-sub {
  margin: 0;
  max-width: 40rem;
  line-height: 1.45;
}
.nieuw-sect--klant .field-grid {
  margin-bottom: 0;
}
.nieuw-hint-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .nieuw-hint-chips {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 14px;
  }
}
.nieuw-hint-chips li {
  font-size: 0.82rem;
  color: #4b5563;
  padding: 5px 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  line-height: 1.35;
}
.nieuw-aanvraag-field {
  margin-bottom: 4px;
}
.nieuw-label-visual {
  display: block;
  margin-bottom: 8px;
}
.nieuw-label-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
}
.nieuw-input-aanvraag {
  min-height: 176px;
  line-height: 1.55;
  font-size: 15px;
  padding: 14px 16px;
  border-color: #d1d5db;
  resize: vertical;
}
.nieuw-toolbar {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nieuw-toolbar-row--primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.btn-nieuw-generate {
  min-width: 240px;
  padding: 15px 32px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 20px rgba(29, 78, 216, 0.2);
}
.btn-nieuw-generate:not(:disabled):hover {
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 8px 26px rgba(29, 78, 216, 0.26);
}
.btn-nieuw-generate:disabled {
  box-shadow: none;
}
.nieuw-generate-busy {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent);
}
.nieuw-flow-status {
  min-height: 1.25em;
  margin: 0;
}
.nieuw-toolbar-row--secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
button.nieuw-btn-link {
  background: transparent;
  border: none;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 2px;
  font-size: 0.88rem;
  border-radius: 4px;
}
button.nieuw-btn-link:hover {
  color: #374151;
  background: transparent;
}
.nieuw-toast {
  flex: 1 1 120px;
  min-width: 100px;
  font-size: 0.85rem;
}
.nieuw-voice-block {
  padding: 10px 0 0;
  margin-top: 4px;
  background: transparent;
  border: none;
  border-top: 1px solid #eceef2;
  border-radius: 0;
}
.nieuw-voice-label {
  margin: 0 0 6px;
  font-size: 0.78rem;
  color: #9ca3af;
}
.nieuw-voice-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.nieuw-mic-compact {
  font-size: 0.86rem;
  padding: 6px 12px;
  color: #6b7280;
  border-color: #e5e7eb;
}
.nieuw-voice-status {
  flex: 1;
  min-width: 160px;
}
.nieuw-result-quickbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.nieuw-result-quickbar[hidden] {
  display: none !important;
}
.nieuw-result-quickbar.nieuw-result-quickbar--enter {
  animation: nieuw-quickbar-in 0.2s ease-out forwards;
}
@keyframes nieuw-quickbar-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.nieuw-result-quickbar-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 240px;
}
@media (min-width: 640px) {
  .nieuw-result-quickbar-main {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 28px;
  }
}
.nieuw-quickbar-save-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.btn-nieuw-opslaan {
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 700;
  min-width: 200px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(29, 78, 216, 0.18);
}
.btn-nieuw-opslaan:not(:disabled):hover {
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 6px 18px rgba(29, 78, 216, 0.24);
}
.nieuw-quickbar-hint {
  margin: 0;
  max-width: 22rem;
  line-height: 1.4;
  font-size: 0.8rem;
  color: #6b7280;
}
.nieuw-quickbar-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}
.nieuw-quickbar-tertiary {
  padding: 4px 0 !important;
  font-size: 0.88rem;
}
.nieuw-result-quickbar-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.nieuw-copy-btn {
  font-size: 0.88rem;
}
.nieuw-result-card {
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  background: #fafbfc;
  padding: 16px 18px;
  transition: box-shadow 0.25s ease;
  min-height: 300px;
}
.nieuw-result-body:not(.has-preview) #out {
  display: none;
}
.nieuw-result-body.has-preview .nieuw-result-empty {
  display: none;
}
.nieuw-result-empty {
  text-align: center;
  padding: 32px 22px 36px;
  border: 1px solid #e8eaef;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #f8fafc 0%, #fff 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.nieuw-result-empty-title {
  margin: 0 0 10px;
  font-size: 1.02rem;
  font-weight: 600;
  color: #1f2937;
}
.nieuw-result-empty-text {
  margin: 0 auto;
  max-width: 28rem;
}
@keyframes nieuw-result-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(29, 78, 216, 0.35);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(29, 78, 216, 0);
  }
}
.nieuw-result-card.nieuw-result--flash {
  animation: nieuw-result-flash 1.15s ease-out 1;
}
@keyframes nieuw-out-fade-in {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}
.nieuw-result-card #out.nieuw-result-out--fade {
  animation: nieuw-out-fade-in 0.22s ease-out 1;
}
#nieuw-result-panel {
  scroll-margin-top: 24px;
}
.nieuw-preview-summary-wrap {
  margin-bottom: 12px;
}
.nieuw-preview-summary-wrap[hidden] {
  display: none !important;
}
.nieuw-preview-owner {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: #6b7280;
}
.nieuw-preview-owner[hidden] {
  display: none !important;
}
.nieuw-preview-summary-title {
  margin: 0 0 8px;
  font-size: 0.92rem;
  font-weight: 650;
  color: #111827;
}
.nieuw-preview-samenv {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #4b5563;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 46px;
  cursor: text;
}
.nieuw-preview-samenv:focus {
  outline: 2px solid rgba(29, 78, 216, 0.18);
  border-color: #93c5fd;
  background: #fff;
}
.nieuw-top-toast {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  background: #ecfdf5;
  border: 1px solid #86efac;
  color: #065f46;
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.14);
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.nieuw-top-toast.is-show {
  animation: nieuw-toast-in 0.22s ease-out forwards;
}
@keyframes nieuw-toast-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes nieuw-save-ok {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(34, 197, 94, 0);
  }
}
.btn-nieuw-opslaan.nieuw-save-ok {
  animation: nieuw-save-ok 0.9s ease-out 1;
}
.nieuw-result-card #pricePanel {
  margin-top: 16px;
}
.nieuw-result-card #conceptActie {
  margin-top: 14px;
}

#out {
  margin-top: 12px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: #111;
}
.nieuw-result-card #out {
  margin-top: 0;
}
#out h1 {
  font-size: 1.6rem;
  margin: 0 0 16px;
  letter-spacing: 0.5px;
}
#out h2 { font-size: 1.05rem; margin: 0 0 12px; font-weight: 600; }
#out h3 { margin: 0 0 6px; font-size: 0.95rem; }
#out .titel {
  font-size: 1.15rem;
  font-weight: bold;
  margin: 16px 0 20px;
}
#out .section { margin-top: 14px; }
#out .project { margin-top: 16px; }
#out ul { margin: 6px 0 8px 18px; padding: 0; }
#out li { margin: 3px 0; }
#out .totals { margin-top: 14px; }
#out .total-final { font-weight: bold; font-size: 1rem; margin-top: 8px; }
#out hr { border: none; border-top: 1px solid #e0e0e0; margin: 16px 0; }
#out .doc-head,
#d_offerte .doc-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
#out .doc-head__top,
#d_offerte .doc-head__top {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
#out .doc-head__title,
#d_offerte .doc-head__title {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
#out .doc-head__meta,
#d_offerte .doc-head__meta {
  color: var(--muted);
  font-size: 0.92rem;
  margin-left: auto;
  text-align: right;
}
#out .doc-head__brand,
#d_offerte .doc-head__brand {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  min-width: 0;
}
#out .doc-head__logo,
#d_offerte .doc-head__logo {
  max-height: 40px;
  max-width: 160px;
  object-fit: contain;
}
#out .doc-head__grid,
#d_offerte .doc-head__grid {
  display: grid;
  gap: 14px 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  #out .doc-head__grid,
  #d_offerte .doc-head__grid {
    grid-template-columns: 1fr 1fr;
  }
}
#out .doc-head__label,
#d_offerte .doc-head__label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
#out .doc-head__lines,
#d_offerte .doc-head__lines {
  font-size: 0.95rem;
  line-height: 1.5;
}
#out .doc-head__k,
#d_offerte .doc-head__k {
  display: inline-block;
  min-width: 68px;
  color: var(--muted);
}

#out .doc-section,
#d_offerte .doc-section {
  margin-top: 14px;
}
#out .doc-section__title,
#d_offerte .doc-section__title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  color: #0f172a;
}

/* Single-project offerte preview: zelfde hiërarchie als PDF (geen werkregeltabel) */
#out .doc-section--single-project.offer-work-preview,
#d_offerte .doc-section--single-project.offer-work-preview {
  margin-top: 18px;
}
#out .doc-section--multi-projects.offer-work-preview,
#d_offerte .doc-section--multi-projects.offer-work-preview {
  margin-top: 18px;
}
#out .projects-section .section-title--projects,
#d_offerte .projects-section .section-title--projects,
.invoice-document .projects-section .section-title--projects {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--offer-primary, #a00012);
}
#out .projects-section__rule,
#d_offerte .projects-section__rule,
.invoice-document .projects-section__rule {
  margin: 0 0 14px;
  padding: 0;
  border: none;
  border-top: 1px solid var(--border);
}
#out .project-row,
#d_offerte .project-row,
.invoice-document .project-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
#out .project-left,
#d_offerte .project-left,
.invoice-document .project-left {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
#out .project-index,
#d_offerte .project-index,
.invoice-document .project-index {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--offer-primary, #a00012);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 28px;
  text-align: center;
}
.invoice-document .project-index {
  background: var(--invoice-primary, #2563eb);
}
#out .project-content,
#d_offerte .project-content,
.invoice-document .project-content {
  flex: 1;
  min-width: 0;
}
#out .projects-section .project-content .project-offer-title,
#d_offerte .projects-section .project-content .project-offer-title,
.invoice-document .projects-section .project-content .project-offer-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: #0f172a;
}
#out .projects-section ul.project-werk-bullets--multi-row,
#d_offerte .projects-section ul.project-werk-bullets--multi-row,
.invoice-document .projects-section ul.project-werk-bullets--multi-row {
  margin: 0;
  padding-left: 1.1rem;
}
#out .project-price-box,
#d_offerte .project-price-box,
.invoice-document .project-price-box {
  flex-shrink: 0;
  text-align: right;
  min-width: 120px;
  max-width: 42%;
}
#out .project-price-box__actions,
#d_offerte .project-price-box__actions,
.invoice-document .project-price-box__actions {
  margin-bottom: 8px;
}
#out .project-remove-project-btn,
#d_offerte .project-remove-project-btn,
.invoice-document .project-remove-project-btn {
  font-size: 0.8rem;
  padding: 4px 10px;
  color: var(--muted, #64748b);
}
#out .project-remove-project-btn:hover,
#d_offerte .project-remove-project-btn:hover,
.invoice-document .project-remove-project-btn:hover {
  color: var(--offer-primary, #b91c1c);
}
#out .project-price-label,
#d_offerte .project-price-label,
.invoice-document .project-price-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 4px;
}
.invoice-document .project-price-label {
  color: var(--invoice-muted, #64748b);
}
#out .project-price,
#d_offerte .project-price,
.invoice-document .project-price {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--offer-primary, #a00012);
  font-variant-numeric: tabular-nums;
}
.invoice-document .project-price {
  color: var(--invoice-primary, #2563eb);
}
#out .project-price .nieuw-inline-edit,
#d_offerte .project-price .nieuw-inline-edit,
.invoice-document .project-price .nieuw-inline-edit {
  font: inherit;
  color: inherit;
}
#out .project-row-divider,
#d_offerte .project-row-divider,
.invoice-document .project-row-divider {
  margin: 0;
  padding: 0;
  border: none;
  border-top: 1px solid var(--border);
}
#out .doc-section--multi-projects + .doc-totals.offer-totals-wrap,
#d_offerte .doc-section--multi-projects + .doc-totals.offer-totals-wrap {
  margin-top: 26px;
}
#out .offer-work__title--preview,
#d_offerte .offer-work__title--preview {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--offer-primary, #2563eb);
  margin: 0 0 10px;
}
#out .project--single-canonical .project-offer-title,
#d_offerte .project--single-canonical .project-offer-title {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 12px;
  color: #0f172a;
  letter-spacing: -0.01em;
}
#out .project-offer-title .nieuw-inline-edit,
#d_offerte .project-offer-title .nieuw-inline-edit {
  font: inherit;
  color: inherit;
}
#out ul.werk.project-werk-bullets,
#d_offerte ul.werk.project-werk-bullets {
  margin: 0 0 14px;
  padding-left: 1.35rem;
  list-style-type: disc;
}
#out .project-werk-bullets__li,
#d_offerte .project-werk-bullets__li {
  margin-bottom: 8px;
  line-height: 1.45;
  color: #334155;
}
#out .project-werk-bullets__li--editable,
#d_offerte .project-werk-bullets__li--editable {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  list-style-position: outside;
}
#out .project-werk-bullets__li--editable .project-werk-bullets__body,
#d_offerte .project-werk-bullets__li--editable .project-werk-bullets__body {
  flex: 1;
  min-width: 0;
}
#out .project-remove-bullet-btn,
#d_offerte .project-remove-bullet-btn {
  flex: 0 0 auto;
  margin: 0;
  padding: 2px 8px;
  line-height: 1.2;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--muted, #64748b);
}
#out .project-remove-bullet-btn:hover,
#d_offerte .project-remove-bullet-btn:hover {
  color: var(--offer-primary, #a00012);
}
#out .project-werk-bullets__li .nieuw-inline-edit,
#d_offerte .project-werk-bullets__li .nieuw-inline-edit {
  display: block;
  min-height: 1.35em;
}
#out .project-add-bullet-wrap,
#d_offerte .project-add-bullet-wrap {
  margin: 2px 0 12px;
}
#out .project-add-bullet-btn,
#d_offerte .project-add-bullet-btn {
  font-size: 0.875rem;
  padding: 4px 10px;
}

/* Offerte-detail: projectprijs alleen cijfers, € als prefix buiten het veld */
#d_offerte .project-price--field {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  max-width: 100%;
}
#d_offerte .project-price__euro {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--offer-primary, var(--accent));
  flex: 0 0 auto;
}
#d_offerte .project-price-input.doc-inline-input,
#d_offerte .project-price-excl-amt .project-price-input.doc-inline-input {
  width: 7.5rem;
  max-width: 42vw;
  text-align: right;
  font: inherit;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
}
#d_offerte .project-price-input.doc-inline-input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-color: var(--accent);
}
#out .doc-single-project__no-bullets,
#d_offerte .doc-single-project__no-bullets {
  margin: 0 0 14px;
}
#out .project-price-excl-line,
#d_offerte .project-price-excl-line {
  margin: 8px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 1rem;
  color: #0f172a;
}
#out .project-price-excl-label,
#d_offerte .project-price-excl-label {
  font-weight: 700;
}
#out .project-price-excl-amt,
#d_offerte .project-price-excl-amt {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

#out .doc-items,
#d_offerte .doc-items {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
#out .doc-items__row,
#d_offerte .doc-items__row {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  gap: 12px;
  padding: 10px 12px;
  align-items: start;
}
#out .doc-items.doc-items--no-col2 .doc-items__row,
#d_offerte .doc-items.doc-items--no-col2 .doc-items__row {
  grid-template-columns: 1fr max-content;
}
#out .doc-items.doc-items--no-col2 .doc-items__col2,
#d_offerte .doc-items.doc-items--no-col2 .doc-items__col2 {
  display: none;
}
#out .doc-items__row:not(.doc-items__head),
#d_offerte .doc-items__row:not(.doc-items__head) {
  border-top: 1px solid var(--border);
}
#out .doc-items__head,
#d_offerte .doc-items__head {
  background: #f9fafb;
  font-size: 0.84rem;
  color: #374151;
  font-weight: 700;
}
#out .doc-items__col2,
#d_offerte .doc-items__col2 {
  text-align: right;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.9rem;
}
#out .doc-items__col3,
#d_offerte .doc-items__col3 {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#out .doc-items__desc,
#d_offerte .doc-items__desc {
  min-width: 0;
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.35;
}

#out .doc-line--header .doc-items__desc,
#d_offerte .doc-line--header .doc-items__desc {
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

#out .doc-line--text .doc-items__desc,
#d_offerte .doc-line--text .doc-items__desc {
  font-weight: 600;
  color: #374151;
}

#out .doc-line--subtotal .doc-items__desc,
#d_offerte .doc-line--subtotal .doc-items__desc {
  font-weight: 800;
}

#out .doc-line--optional-off,
#d_offerte .doc-line--optional-off {
  opacity: 0.72;
}

#out .doc-section__sub,
#d_offerte .doc-section__sub {
  margin-top: 12px;
}
#out .doc-work__list,
#d_offerte .doc-work__list {
  margin: 0;
  padding-left: 18px;
}
#out .doc-work__pill,
#d_offerte .doc-work__pill {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: #374151;
  background: #fff;
  vertical-align: baseline;
}

#out .doc-totals,
#d_offerte .doc-totals {
  margin-top: 18px;
  margin-left: auto;
  max-width: 360px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #fafafa 0%, #f8fafc 100%);
}
#out .doc-totals__row,
#d_offerte .doc-totals__row {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 14px;
  width: 100%;
  padding: 6px 0;
  align-items: baseline;
}
#out .doc-totals__row--final,
#d_offerte .doc-totals__row--final {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-weight: 800;
}
#out .doc-totals__k,
#d_offerte .doc-totals__k {
  color: #374151;
}
#out .doc-totals__v,
#d_offerte .doc-totals__v {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 1.02rem;
}
#out .doc-totals__row--final .doc-totals__v,
#d_offerte .doc-totals__row--final .doc-totals__v {
  font-size: 1.18rem;
}
#out .doc-totals__row--final.doc-totals__row--incl-highlight .doc-totals__k,
#out .doc-totals__row--final.doc-totals__row--incl-highlight .doc-totals__v,
#d_offerte .doc-totals__row--final.doc-totals__row--incl-highlight .doc-totals__k,
#d_offerte .doc-totals__row--final.doc-totals__row--incl-highlight .doc-totals__v {
  color: var(--offer-primary, #a00012);
  font-weight: 900;
}
#out .doc-totals__row--final.doc-totals__row--incl-highlight .doc-totals__v,
#d_offerte .doc-totals__row--final.doc-totals__row--incl-highlight .doc-totals__v {
  font-size: 1.28rem;
}

#out .doc-payline,
#d_offerte .doc-payline{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f9fafb;
  color: #374151;
  font-size: 0.92rem;
  line-height: 1.35;
}

#out .doc-footer__text,
#d_offerte .doc-footer__text {
  white-space: pre-wrap;
  color: #111827;
  line-height: 1.5;
  font-size: 0.95rem;
}
#out .offerte-doc-meta,
#d_offerte .offerte-doc-meta {
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 12px;
  line-height: 1.45;
}
#out .nieuw-inline-edit {
  display: inline-block;
  min-width: 1ch;
  border-radius: 4px;
  cursor: text;
}
#out .nieuw-inline-edit:hover {
  background: rgba(29, 78, 216, 0.06);
}
#out .nieuw-inline-edit:focus {
  outline: 2px solid rgba(29, 78, 216, 0.18);
  background: #fff;
}
#out .nieuw-inline-edit--title {
  display: block;
  width: 100%;
}

#d_offerte .nieuw-inline-edit {
  display: inline-block;
  min-width: 1ch;
  border-radius: 4px;
  cursor: text;
}
#d_offerte .nieuw-inline-edit:hover {
  background: rgba(29, 78, 216, 0.06);
}
#d_offerte .nieuw-inline-edit:focus {
  outline: 2px solid rgba(29, 78, 216, 0.18);
  background: #fff;
}
#d_offerte .nieuw-inline-edit--title {
  display: block;
  width: 100%;
}
.offerte-detail-inline-hint {
  margin: 8px 0 0;
  max-width: 40rem;
}
.offerte-detail-dirty-msg {
  margin: 6px 0 0;
  max-width: 40rem;
  font-style: italic;
  color: var(--muted, #64748b);
}
.offerte-detail-doc-actions {
  margin-top: 10px;
}
.offerte-detail-vat-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-subtle, #f8fafc);
}
.offerte-detail-vat-bar__label {
  margin: 0;
  font-weight: 600;
}
.offerte-detail-vat-bar__select {
  min-width: 200px;
}

#pricePanel { margin: 12px 0; }
#prices > div { display: flex; gap: 10px; align-items: center; margin: 8px 0; flex-wrap: wrap; }

.topbar { display: none !important; }
.view { display: none; }
.view.is-active { display: block; }

.kpi-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  margin-bottom: 8px;
}
.kpi-section-title {
  grid-column: 1 / -1;
  font-size: 0.95rem;
  font-weight: 700;
  color: #374151;
  margin-top: 4px;
  margin-bottom: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.kpi-section-title:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  border-left: 4px solid var(--border);
}
.kpi-card .label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-card .value { font-size: 1.35rem; font-weight: 700; margin-top: 6px; }
.kpi-card--uit {
  border-color: #fde68a;
  border-left-color: #d97706;
  background: linear-gradient(135deg, #fffbeb 0%, #fff 55%);
}
.kpi-card--uit .value { color: #92400e; }
.kpi-card--acc {
  border-color: #a7f3d0;
  border-left-color: #059669;
  background: linear-gradient(135deg, #ecfdf5 0%, #fff 55%);
}
.kpi-card--acc .value { color: #047857; }
.kpi-card--afw {
  border-color: #fecaca;
  border-left-color: #dc2626;
  background: linear-gradient(135deg, #fef2f2 0%, #fff 55%);
}
.kpi-card--afw .value { color: #b91c1c; }
.kpi-card--verl {
  border-color: #ddd6fe;
  border-left-color: #7c3aed;
  background: linear-gradient(135deg, #faf5ff 0%, #fff 55%);
}
.kpi-card--verl .value { color: #5b21b6; }
.kpi-card--fact {
  border-color: #bae6fd;
  border-left-color: #0284c7;
  background: linear-gradient(135deg, #f0f9ff 0%, #fff 55%);
}
.kpi-card--fact .value { color: #0369a1; }
.kpi-card--concept {
  border-color: #e5e7eb;
  border-left-color: #6b7280;
  background: #f9fafb;
}
.dash-note {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 16px;
  max-width: 72ch;
}
details.dash-kpi-accordion {
  margin-bottom: 12px;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.data-table th,
.data-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.data-table th { background: #f9fafb; font-weight: 600; }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:hover { background: #f3f4f6; }
.data-table tr.clickable[data-status='UITSTAAND'] {
  box-shadow: inset 4px 0 0 #f59e0b;
  background: #fffbeb;
}
.data-table tr.clickable[data-status='UITSTAAND']:hover { background: #fef3c7; }
.data-table tr.clickable[data-status='GEACCEPTEERD'] {
  box-shadow: inset 4px 0 0 #10b981;
  background: #ecfdf5;
}
.data-table tr.clickable[data-status='GEACCEPTEERD']:hover { background: #d1fae5; }
.data-table tr.clickable[data-status='AFGEWEZEN'] {
  box-shadow: inset 4px 0 0 #ef4444;
  background: #fef2f2;
}
.data-table tr.clickable[data-status='AFGEWEZEN']:hover { background: #fee2e2; }
.data-table tr.clickable[data-status='VERLOPEN'] {
  box-shadow: inset 4px 0 0 #7c3aed;
  background: #faf5ff;
}
.data-table tr.clickable[data-status='VERLOPEN']:hover { background: #f3e8ff; }
.data-table tr.clickable[data-status='GEFACTUREERD'] {
  box-shadow: inset 4px 0 0 #0284c7;
  background: #f0f9ff;
}
.data-table tr.clickable[data-status='GEFACTUREERD']:hover { background: #e0f2fe; }
.data-table tr.clickable[data-status='VOLTOOID'] {
  box-shadow: inset 4px 0 0 #0d9488;
  background: #f0fdfa;
}
.data-table tr.clickable[data-status='VOLTOOID']:hover { background: #ccfbf1; }
.data-table tr.clickable[data-status='CONCEPT'] {
  box-shadow: inset 4px 0 0 #9ca3af;
  background: #f9fafb;
}
.data-table tr.clickable[data-status='CONCEPT']:hover { background: #f3f4f6; }
.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.pill-uit { background: #fbbf24; color: #451a03; border: 1px solid #d97706; }
.pill-acc { background: #34d399; color: #022c22; border: 1px solid #059669; }
.pill-afw { background: #f87171; color: #450a0a; border: 1px solid #dc2626; }
.pill-concept { background: #e5e7eb; color: #1f2937; border: 1px solid #9ca3af; }
.pill-verl { background: #ede9fe; color: #4c1d95; border: 1px solid #7c3aed; }
.pill-fact { background: #e0f2fe; color: #0c4a6e; border: 1px solid #0284c7; }
.pill-volt { background: #ccfbf1; color: #134e4a; border: 1px solid #0d9488; }
.pill-verstuurd { background: #dbeafe; color: #1e3a8a; border: 1px solid #3b82f6; }
.pill-bekeken { background: #ede9fe; color: #4c1d95; border: 1px solid #7c3aed; }

.doc-status-card {
  margin-bottom: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}
.doc-status-card__title {
  font-weight: 650;
  font-size: 0.95rem;
  margin-bottom: 6px;
  color: #334155;
}
.doc-status-card__text {
  line-height: 1.45;
}

.offerte-detail-hero__meta {
  margin-top: 8px;
  display: grid;
  gap: 4px;
}

.invoice-pay-simple .invoice-pay__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dash-section { margin-top: 20px; }
.dash-section h3 { margin: 0 0 10px; font-size: 1rem; }
.dash-section h3.heading-uit { color: #b45309; border-bottom: 2px solid #fbbf24; padding-bottom: 6px; }
.dash-section h3.heading-mixed { color: #374151; border-bottom: 2px solid #e5e7eb; padding-bottom: 6px; }

/* ——— Dashboard (actie-gedreven) ——— */
.dash-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dash-cta {
  width: 100%;
  padding: 16px 18px;
  font-size: 1.05rem;
  font-weight: 800;
}
.dash-kpis-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dash-kpi-mini {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 12px 12px;
}
.dash-kpi-mini .label {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dash-kpi-mini .value {
  margin-top: 6px;
  font-size: 1.25rem;
  font-weight: 800;
}

.dash-action-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-action-item {
  width: 100%;
  text-align: left;
  border-radius: 12px;
  padding: 14px 14px;
  border: 1px solid var(--border);
  background: #fff;
}
.dash-action-item:hover {
  background: #f9fafb;
}
.dash-action-item--red {
  border-left: 6px solid #dc2626;
}
.dash-action-item--orange {
  border-left: 6px solid #f59e0b;
}
.dash-action-item--green {
  border-left: 6px solid #16a34a;
}
.dash-action-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.dash-action-badge {
  font-size: 0.78rem;
  font-weight: 700;
  color: #111827;
}
.dash-action-amount {
  font-size: 0.9rem;
  font-weight: 800;
}
.dash-action-main {
  font-size: 0.95rem;
  font-weight: 650;
  margin-bottom: 4px;
}
.dash-action-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

@media (min-width: 860px) {
  .dash-top {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
  }
  .dash-cta {
    width: auto;
    min-width: 260px;
  }
  .dash-kpis-mini {
    width: 380px;
  }
}

/* --- Professionele offerte (PDF / publiek / preview) --- */
.offer-preview-page {
  background: #e8ecf4;
  margin: 0;
  padding: 24px 16px 40px;
}
.offer-preview-shell {
  max-width: 860px;
  margin: 0 auto;
}

.offer-doc,
.offer-document {
  background: #fff;
  color: var(--offer-text);
  border: 1px solid var(--offer-border);
  border-radius: 12px;
  padding: 28px 26px 22px;
  font-size: 0.95rem;
  line-height: 1.45;
  box-shadow: var(--shadow-sm);
}
#d_offerte .offer-doc,
#publicQuote .offer-doc,
#d_offerte .offer-document,
#publicQuote .offer-document {
  box-shadow: none;
}
.offer-header-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
}
.offer-header-main {
  vertical-align: top;
  padding: 0 16px 0 0;
}
.offer-header-brand {
  width: 140px;
  max-width: 140px;
  vertical-align: top;
  text-align: right;
}
.offer-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--offer-accent);
  margin-bottom: 6px;
}
.offer-title {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--offer-navy);
}
.offer-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: #3d4f6f;
  max-width: 52ch;
}
.offer-brand {
  width: 130px;
  max-width: 130px;
  max-height: 58px;
  min-height: 0;
  margin-left: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
}
.offer-brand__logo {
  max-width: 110px;
  max-height: 38px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.offer-brand__name {
  font-weight: 800;
  font-size: 0.82rem;
  text-align: center;
  line-height: 1.2;
  color: var(--offer-navy);
  word-break: break-word;
}
.offer-meta.offer-meta-strip,
.offer-meta-strip {
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px 0;
  margin-bottom: 20px;
}
.offer-meta-strip td.offer-meta-strip__item {
  width: 25%;
  vertical-align: top;
  border: 1px solid var(--offer-border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fafbfd;
}
@media (max-width: 720px) {
  .offer-meta-strip td.offer-meta-strip__item {
    display: table-cell;
    width: 50%;
  }
}
.offer-meta-strip td.offer-meta-strip__item--highlight {
  background: var(--offer-accent-soft);
  border-color: var(--offer-callout-border);
}
.offer-meta-strip__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5a6b88;
  margin-bottom: 4px;
}
.offer-meta-strip__value {
  font-weight: 700;
  font-size: 0.92rem;
}
.offer-meta-strip__item--highlight .offer-meta-strip__value {
  font-size: 1.05rem;
}
.offer-party-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 22px;
}
.offer-party-table .offer-party-card {
  width: 49%;
  vertical-align: top;
  border: 1px solid var(--offer-border);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}
.offer-party-gap {
  width: 2%;
  min-width: 10px;
  border: none;
  padding: 0;
}
@media (max-width: 640px) {
  .offer-party-table,
  .offer-party-table tbody,
  .offer-party-table tr,
  .offer-party-table td.offer-party-card {
    display: block;
    width: 100% !important;
  }
  .offer-party-gap {
    display: none;
  }
}
.offer-party-card__title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--offer-accent);
  margin-bottom: 8px;
}
.offer-party-line {
  font-size: 0.88rem;
  margin: 4px 0;
  color: var(--offer-navy);
}
.offer-party-line--strong {
  font-weight: 700;
  font-size: 0.95rem;
}
.offer-party-k {
  font-weight: 600;
  color: #5a6b88;
  margin-right: 6px;
}
.offer-party-muted {
  color: #6b7c99;
  font-weight: 500;
  font-size: 0.85rem;
}
.offer-work__title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--offer-accent);
  margin: 0 0 10px;
}
.offer-work__body .project {
  margin-top: 14px;
}
.offer-work__body .project:first-child {
  margin-top: 0;
}
.offer-lines,
.offer-work__body table.lines {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}
.offer-lines th,
.offer-lines td,
.offer-work__body table.lines th,
.offer-work__body table.lines td {
  padding: 8px 10px;
  border-bottom: 1px solid #e5edf8;
  vertical-align: top;
}
.offer-lines thead th,
.offer-work__body table.lines thead th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5a6b88;
  background: var(--offer-table-header-bg);
  border-bottom: none;
}
.offer-lines .num,
.offer-work__body table.lines .num {
  text-align: right;
  white-space: nowrap;
}
.offer-lines td.c-desc,
.offer-work__body table.lines td.c-desc {
  width: 38%;
}
.offer-totals-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 16px 0 8px;
}
.offer-totals-card {
  width: 280px;
  max-width: 280px;
  border-collapse: collapse;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  overflow: hidden;
}
.offer-totals-card td {
  padding: 9px 12px;
  border-bottom: 1px solid #e5edf8;
  vertical-align: middle;
}
.offer-totals-card tr:last-child td {
  border-bottom: none;
}
.offer-totals-card td:last-child {
  text-align: right;
}
.offer-totals-card tr.totals-row--muted td {
  font-weight: 500;
  font-size: 0.82rem;
  color: #475569;
}
.offer-totals-card tr.totals-row--muted td:last-child {
  font-weight: 600;
}
.offer-totals-card tr.totals-row--final td {
  padding: 10px 12px;
  font-weight: 800;
  background: var(--offer-accent-soft);
}
.offer-totals-card tr.totals-row--final td:first-child {
  font-size: 0.95rem;
  color: var(--offer-navy);
}
.offer-totals-card tr.totals-row--final td:last-child {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--offer-navy);
}
.offer-terms {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--offer-border);
}
.offer-bottom-grid .offer-notes.offer-terms {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  border-top: none;
  flex: 1 1 auto;
  min-width: 0;
}
.offer-bottom-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 20px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--offer-border);
  break-inside: auto;
  page-break-inside: auto;
}
.offer-bottom-grid--compact {
  margin-top: 12px;
  padding-top: 10px;
  gap: 16px;
}
.offer-doc--multi-projects.offer-document {
  padding-bottom: 18px;
}
.offer-doc--multi-projects .offer-bottom-grid {
  margin-top: 12px;
  padding-top: 8px;
}
.offer-doc--multi-projects .offer-footer {
  margin-top: 20px;
}
@media (max-width: 520px) {
  .offer-bottom-grid {
    flex-wrap: wrap;
  }
  .approval-card.offer-accept-callout {
    flex: 1 1 100%;
    max-width: 100%;
    width: auto;
  }
}
.offer-terms__title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--offer-accent);
  margin: 0 0 8px;
}
.offer-terms__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  color: #2c3d5c;
  font-size: 0.88rem;
}
.offer-terms__list li {
  display: block;
  position: relative;
  margin: 4px 0 6px;
  padding-left: 1.15em;
  white-space: normal;
  word-wrap: break-word;
}
.offer-terms__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--offer-accent);
  font-weight: 700;
  font-size: 0.85em;
}
.approval-card.offer-accept-callout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
  flex: 0 0 288px;
  max-width: 300px;
  min-width: 260px;
  align-self: flex-start;
  margin-top: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--offer-primary, #2563eb);
  font-size: 0.86rem;
  break-inside: avoid;
  page-break-inside: avoid;
}
.approval-card .approval-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: #a00012;
  display: flex;
  align-items: center;
  justify-content: center;
}
.approval-card .approval-icon svg {
  display: block;
  fill: currentColor;
}
.approval-card .approval-text {
  flex: 1;
  min-width: 0;
}
.offer-accept-callout__text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: #334155;
}
.approval-card .offer-accept-callout__text {
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}
.approval-card .approval-text__line {
  display: block;
}
.approval-card .approval-text__line + .approval-text__line {
  margin-top: 0.28em;
}
.approval-card.offer-accept-callout--subtle {
  background: color-mix(in srgb, var(--offer-primary, #2563eb) 5%, #ffffff);
  border-color: color-mix(in srgb, var(--offer-primary, #2563eb) 32%, #e5e7eb);
  padding: 9px 11px;
  font-size: 0.82rem;
}
.approval-card.offer-accept-callout--subtle .offer-accept-callout__text {
  font-size: 0.85rem;
  color: #475569;
}
.offer-footer {
  margin-top: 20px;
  padding-top: 8px;
  border-top: 2px solid var(--offer-accent);
  font-size: 0.78rem;
  color: #475569;
  text-align: center;
}

#d_offerte .offer-totals-wrap,
#out .offer-totals-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
  margin-top: 12px;
  gap: 0;
}
/* Zelfde element kan zowel doc-totals als offer-totals-wrap zijn (shared.js); dan geen geneste .doc-totals. */
#d_offerte .doc-totals.offer-totals-wrap,
#out .doc-totals.offer-totals-wrap {
  width: 100%;
  max-width: 320px;
  border: 1px solid var(--offer-border);
  border-radius: 10px;
  padding: 8px 10px;
}
#d_offerte .offer-totals-wrap .doc-totals,
#out .offer-totals-wrap .doc-totals {
  width: 100%;
  max-width: 320px;
  border: 1px solid var(--offer-border);
  border-radius: 10px;
  padding: 8px 10px;
}

/* --- Factuur (PDF-pariteit in app-preview + publieke factuur) --- */
.invoice-preview-page {
  background: #e8ecf4;
  margin: 0;
  padding: 24px 16px 40px;
}
.invoice-preview-shell {
  max-width: 860px;
  margin: 0 auto;
}
.invoice-document {
  background: #fff;
  color: var(--invoice-text);
  border: 1px solid var(--invoice-border);
  border-radius: 12px;
  padding: 28px 26px 22px;
  font-size: 0.95rem;
  line-height: 1.45;
  box-shadow: var(--shadow-sm);
}
#f_body .invoice-document,
#publicInvoiceWrap .invoice-document {
  box-shadow: none;
}
.invoice-header-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
}
.invoice-header-main {
  vertical-align: top;
  padding: 0 16px 0 0;
}
.invoice-header-brand {
  width: 140px;
  max-width: 140px;
  vertical-align: top;
  text-align: right;
}
.invoice-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--invoice-primary);
  margin-bottom: 6px;
}
.invoice-title {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--invoice-text);
}
.invoice-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: #3d4f6f;
  max-width: 52ch;
}
.invoice-brand {
  width: 130px;
  max-width: 130px;
  max-height: 58px;
  min-height: 0;
  margin-left: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
}
.invoice-brand__logo {
  max-width: 110px;
  max-height: 38px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.invoice-brand__name {
  font-weight: 800;
  font-size: 0.82rem;
  text-align: center;
  line-height: 1.2;
  color: var(--invoice-text);
  word-break: break-word;
}
.invoice-meta.invoice-meta-strip {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 10px 0;
  margin: 0 0 12px;
}
.invoice-meta-strip td.invoice-meta-strip__item {
  width: 25%;
  vertical-align: top;
  border: 1px solid var(--invoice-border);
  border-radius: 10px;
  padding: 10px 10px;
  background: #f8fafc;
}
.invoice-meta-strip td.invoice-meta-strip__item--highlight {
  background: var(--invoice-accent-bg);
  border-color: var(--invoice-callout-border);
}
.invoice-meta-strip__label {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 4px;
}
.invoice-meta-strip__value {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--invoice-text);
}
.invoice-meta-strip__item--highlight .invoice-meta-strip__value {
  font-size: 0.95rem;
}
.invoice-meta-chips {
  font-size: 0.82rem;
  color: #475569;
  margin: 0 0 16px;
  line-height: 1.45;
}
.invoice-party-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 8px 0 18px;
}
.invoice-party-card {
  width: 49%;
  vertical-align: top;
  border: 1px solid var(--invoice-border);
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}
.invoice-party-gap {
  width: 2%;
  min-width: 10px;
  border: none;
  padding: 0;
}
.invoice-party-card__title {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--invoice-primary);
  margin-bottom: 8px;
}
.invoice-party-line {
  font-size: 0.88rem;
  margin: 4px 0;
  color: var(--invoice-text);
}
.invoice-party-line--strong {
  font-weight: 800;
  font-size: 0.92rem;
}
.invoice-party-k {
  font-weight: 600;
  color: #64748b;
  margin-right: 4px;
}
.invoice-party-muted {
  color: #94a3b8;
  font-size: 0.82rem;
}
.invoice-work__title {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--invoice-primary);
  margin: 0 0 8px;
}
.invoice-body-fallback {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0;
  padding: 12px;
  background: #fafafa;
  border: 1px solid var(--invoice-border);
  border-radius: 8px;
}
.invoice-document table.lines {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 0.88rem;
}
.invoice-document table.lines th,
.invoice-document table.lines td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--invoice-border);
  vertical-align: top;
}
.invoice-document table.lines thead th {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475569;
  background: var(--invoice-table-header-bg);
}
.invoice-document table.lines th.num,
.invoice-document table.lines td.num {
  text-align: right;
  white-space: nowrap;
}
.invoice-document .muted-right {
  text-align: right;
  color: #64748b;
  font-size: 0.75rem;
}
#f_body .invoice-totals-wrap,
#publicInvoiceWrap .invoice-totals-wrap {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 12px;
}
table.totals.invoice-totals-card {
  width: 280px;
  max-width: 100%;
  margin-left: auto;
  border-collapse: collapse;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.88rem;
}
table.totals.invoice-totals-card td {
  padding: 9px 12px;
  border-bottom: 1px solid #e2e8f0;
}
table.totals.invoice-totals-card tr:last-child td {
  border-bottom: none;
}
table.totals.invoice-totals-card td:last-child {
  text-align: right;
}
table.totals.invoice-totals-card tr.totals-row--muted td {
  font-weight: 500;
  font-size: 0.82rem;
  color: #475569;
}
table.totals.invoice-totals-card tr.totals-row--muted td:last-child {
  font-weight: 600;
}
table.totals.invoice-totals-card tr.totals-row--final td {
  font-weight: 800;
  padding: 10px 12px;
  background: var(--invoice-accent-bg);
}
table.totals.invoice-totals-card tr.totals-row--final td:last-child {
  font-size: 1.05rem;
  font-weight: 900;
}
.invoice-payment-callout {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
}
.invoice-payment-callout__title {
  font-weight: 800;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--invoice-primary);
  margin-bottom: 4px;
}
.invoice-payment-callout__text {
  margin: 0;
  color: #334155;
  line-height: 1.35;
}
.invoice-payment-callout--neutral {
  background: color-mix(in srgb, var(--invoice-accent-bg) 55%, #ffffff);
  border: 1px solid var(--invoice-callout-border);
}
.invoice-payment-callout--paid {
  background: color-mix(in srgb, #ecfdf5 70%, #ffffff);
  border: 1px solid #a7f3d0;
}
.invoice-payment-callout--paid .invoice-payment-callout__title {
  color: #047857;
}
.invoice-payment-callout--overdue {
  background: color-mix(in srgb, #fff7ed 75%, #ffffff);
  border: 1px solid #fdba74;
}
.invoice-payment-callout--overdue .invoice-payment-callout__title {
  color: #c2410c;
}
.invoice-payment-callout--muted {
  background: #f8fafc;
  border: 1px solid var(--invoice-border);
}
.invoice-payment-callout--muted .invoice-payment-callout__title {
  color: #64748b;
}
.invoice-footer {
  margin-top: 18px;
  padding-top: 8px;
  border-top: 2px solid var(--invoice-primary);
  font-size: 0.78rem;
  color: #475569;
  text-align: center;
}

/* --- Publieke pagina’s: topbar was verborgen door algemene .topbar-regel --- */
body.public-layout .topbar.public-topbar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  max-width: 1020px;
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.public-topbar__end {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* --- Donkere modus: schuifje --- */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.theme-switch--compact {
  gap: 0;
}
.theme-switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.theme-switch__track {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #cbd5e1;
  flex-shrink: 0;
  transition: background 0.18s ease;
}
.theme-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
  transition: transform 0.18s ease;
}
.theme-switch__input:checked + .theme-switch__track {
  background: var(--accent);
}
.theme-switch__input:checked + .theme-switch__track .theme-switch__thumb {
  transform: translateX(18px);
}
.theme-switch__input:focus-visible + .theme-switch__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
html[data-theme='dark'] .theme-switch__track {
  background: #475569;
}
html[data-theme='dark'] .theme-switch__input:checked + .theme-switch__track {
  background: var(--accent);
}

/* --- Donkere modus: kleuren --- */
html[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0f1419;
  --card: #1a222d;
  --border: #2d3a4d;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
}

html[data-theme='dark'] .ui-modal__panel {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
html[data-theme='dark'] .ui-modal__body {
  color: var(--muted);
}

html[data-theme='dark'] .app-sidebar {
  background: rgba(21, 27, 36, 0.88);
  border-right-color: var(--border);
}
html[data-theme='dark'] .brand-logo {
  background: var(--card);
  border-color: var(--border);
}
html[data-theme='dark'] .nav-tab {
  color: var(--text);
}
html[data-theme='dark'] .nav-tab:hover {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme='dark'] .nav-tab.is-active {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(96, 165, 250, 0.35);
  color: #93c5fd;
}
html[data-theme='dark'] .nav-badge {
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(59, 130, 246, 0.14);
}

html[data-theme='dark'] .app-topbar__search input[type='search'] {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme='dark'] .btn-icon {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme='dark'] .btn-icon:hover {
  background: #243044;
}

html[data-theme='dark'] .sidebar-user {
  background: var(--card);
  border-color: var(--border);
}
html[data-theme='dark'] .sidebar-user__avatar {
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(59, 130, 246, 0.16);
}

html[data-theme='dark'] button:not(.btn-primary):not(.btn-danger-ghost) {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme='dark'] button:not(.btn-primary):not(.btn-danger-ghost):hover {
  background: #243044;
}
html[data-theme='dark'] button.btn-ghost,
html[data-theme='dark'] a.btn-ghost {
  background: transparent;
  color: inherit;
}
html[data-theme='dark'] button.btn-ghost:hover,
html[data-theme='dark'] a.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme='dark'] button.btn-danger-ghost {
  background: var(--card);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.35);
}
html[data-theme='dark'] button.btn-danger-ghost:hover {
  background: rgba(127, 29, 29, 0.35);
  border-color: rgba(248, 113, 113, 0.45);
}

html[data-theme='dark'] textarea,
html[data-theme='dark'] input[type='text'],
html[data-theme='dark'] input[type='search'],
html[data-theme='dark'] input[type='email'],
html[data-theme='dark'] input[type='password'],
html[data-theme='dark'] input[type='number'],
html[data-theme='dark'] input[type='date'],
html[data-theme='dark'] input[type='url'],
html[data-theme='dark'] select {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme='dark'] .offerte-doc-preview {
  background: var(--card);
}
html[data-theme='dark'] #out .doc-head__title,
html[data-theme='dark'] #d_offerte .doc-head__title {
  color: var(--text);
}
html[data-theme='dark'] #out .doc-card,
html[data-theme='dark'] #d_offerte .doc-card {
  background: #151c26;
  border-color: var(--border);
}
html[data-theme='dark'] .offerte-side-card {
  background: #151c26;
}
html[data-theme='dark'] .offerte-side-card--timeline {
  background: var(--card);
}
html[data-theme='dark'] .offerte-side-total {
  color: var(--text);
}
html[data-theme='dark'] .offerte-audit__sep {
  color: var(--muted);
}
html[data-theme='dark'] .offerte-audit__label {
  color: #cbd5e1;
}
html[data-theme='dark'] .offerte-timeline__dot {
  border-color: var(--card);
}

html[data-theme='dark'] .nieuw-stepper {
  background: linear-gradient(180deg, #1a222d 0%, #151c26 70%);
  border-color: var(--border);
}
html[data-theme='dark'] .dash-action-item {
  background: #151c26;
  border-color: var(--border);
}
html[data-theme='dark'] .dash-action-item:hover {
  background: #1e2736;
}
html[data-theme='dark'] .dash-action-badge {
  color: var(--text);
}
html[data-theme='dark'] .dash-kpi-card {
  background: var(--card);
  border-color: rgba(148, 163, 184, 0.22);
}
html[data-theme='dark'] .dash-kpi-card:hover {
  background: #1e2736;
  border-color: rgba(96, 165, 250, 0.28);
}
html[data-theme='dark'] .dash-kpi-card--static:hover {
  background: var(--card);
  border-color: rgba(148, 163, 184, 0.22);
}
html[data-theme='dark'] .dash-kpi-card__label {
  color: var(--text);
}

html[data-theme='dark'] .invoice-preview-page {
  background: #0c1016;
}
html[data-theme='dark'] .invoice-document {
  --invoice-primary: #60a5fa;
  --invoice-accent-bg: rgba(37, 99, 235, 0.12);
  --invoice-text: #e5e7eb;
  --invoice-border: #334155;
  --invoice-muted: #94a3b8;
  --invoice-callout-border: rgba(96, 165, 250, 0.35);
  --invoice-table-header-bg: #1e293b;
  background: #151c26;
  border-color: var(--invoice-border);
  color: var(--invoice-text);
}
html[data-theme='dark'] .invoice-subtitle {
  color: #94a3b8;
}
html[data-theme='dark'] .invoice-brand {
  border-color: var(--border);
}
html[data-theme='dark'] table.totals.invoice-totals-card tr.totals-row--muted td {
  color: var(--invoice-muted);
}
html[data-theme='dark'] .invoice-payment-callout__text {
  color: #cbd5e1;
}
html[data-theme='dark'] .invoice-payment-callout--neutral {
  background: rgba(37, 99, 235, 0.12);
  border-color: var(--invoice-callout-border);
}
html[data-theme='dark'] .invoice-payment-callout--paid {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(52, 211, 153, 0.35);
}
html[data-theme='dark'] .invoice-payment-callout--paid .invoice-payment-callout__title {
  color: #6ee7b7;
}
html[data-theme='dark'] .invoice-payment-callout--overdue {
  background: rgba(251, 146, 60, 0.12);
  border-color: rgba(251, 146, 60, 0.35);
}
html[data-theme='dark'] .invoice-payment-callout--overdue .invoice-payment-callout__title {
  color: #fdba74;
}
html[data-theme='dark'] .invoice-payment-callout--muted {
  background: #1e293b;
  border-color: var(--invoice-border);
}
html[data-theme='dark'] .invoice-footer {
  color: var(--invoice-muted);
}

html[data-theme='dark'] #out .nieuw-inline-edit:focus,
html[data-theme='dark'] #d_offerte .nieuw-inline-edit:focus {
  background: var(--card);
}

html[data-theme='dark'] .share-modal__copied {
  color: #6ee7b7;
}
html[data-theme='dark'] .kpi-card--uit {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, var(--card) 55%);
  border-color: rgba(251, 191, 36, 0.35);
}
html[data-theme='dark'] .kpi-card--acc {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, var(--card) 55%);
  border-color: rgba(52, 211, 153, 0.35);
}

/* ——— Nieuwe offerte · SaaS polish ——— */
.nieuw-page--saas {
  max-width: 1220px;
  margin: 0 auto;
  padding: 8px 12px 96px;
}

.nieuw-saas-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 18px;
}
.nieuw-saas-header__titles h1 {
  margin: 0 0 6px;
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.nieuw-saas-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}
.nieuw-saas-pill {
  font-size: 0.78rem;
  font-weight: 650;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #1e40af;
  border: 1px solid rgba(37, 99, 235, 0.18);
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-compact {
  padding: 8px 14px !important;
  font-size: 0.9rem !important;
  border-radius: 10px !important;
  font-weight: 650 !important;
}
.btn-lg {
  padding: 12px 20px !important;
  font-size: 0.98rem !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}
.btn-secondary {
  background: #fff;
  color: var(--accent);
  border: 1px solid rgba(37, 99, 235, 0.35);
  font-weight: 650;
  border-radius: 12px;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.btn-secondary:hover {
  background: rgba(37, 99, 235, 0.06);
}
.btn-xs {
  font-size: 0.8rem !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
}

.nieuw-saas-panel {
  background: var(--card);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}

.nieuw-label-strong {
  display: block;
  font-weight: 750;
  font-size: 0.88rem;
  margin-bottom: 8px;
  color: #0f172a;
}

.nieuw-field-error {
  color: #b91c1c;
  font-size: 0.88rem;
  min-height: 1.2em;
  margin-top: 6px;
}

/* Klant grid */
.nieuw-klant-saas__grid {
  display: grid;
  gap: 18px;
  align-items: start;
}
@media (min-width: 900px) {
  .nieuw-klant-saas__grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  }
}

.nieuw-klant-combo-wrap {
  position: relative;
}
.nieuw-klant-combo {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}
.nieuw-klant-combo input[type='search'] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 0.95rem;
  background: #fafbfc;
}
.nieuw-klant-combo input[type='search']:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  background: #fff;
}
.nieuw-klant-add-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.nieuw-klant-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}
.nieuw-klant-dropdown__item {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.92rem;
}
.nieuw-klant-dropdown__item:hover {
  background: rgba(37, 99, 235, 0.07);
}
.nieuw-klant-dropdown__empty {
  padding: 10px 12px;
  font-size: 0.88rem;
}

.nieuw-klant-card {
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: linear-gradient(165deg, #fafbff 0%, #fff 55%);
  padding: 16px 18px;
  min-height: 120px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.nieuw-klant-card__empty {
  font-size: 0.92rem;
  line-height: 1.45;
}
.nieuw-klant-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.nieuw-klant-card__company {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.nieuw-klant-card__lines {
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.4;
}

.nieuw-klant-form-wrap {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.55);
  background: rgba(248, 250, 252, 0.85);
}
.nieuw-klant-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.nieuw-stepper--saas {
  border: none;
  background: transparent;
  padding: 4px 0 12px;
  margin-bottom: 8px;
}
.nieuw-stepper--saas .nieuw-step__dot {
  box-shadow: none;
}
.nieuw-stepper--saas .nieuw-step__line {
  background: linear-gradient(90deg, #e5e7eb, transparent);
}

/* Hero stap 1 */
.nieuw-hero--saas {
  padding: 22px 24px;
}
.nieuw-hero-saas__intro {
  margin-bottom: 16px;
}
.nieuw-hero__textarea--saas {
  min-height: 180px;
  font-size: 0.98rem;
  line-height: 1.45;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 14px 16px;
  resize: vertical;
}
.nieuw-hero__toolbar--saas {
  margin-top: 12px;
  align-items: center;
}
.nieuw-mic-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-weight: 650 !important;
  border: 1px solid var(--border) !important;
  background: #fff !important;
}
.nieuw-mic-btn__ic {
  font-size: 1.1rem;
}

.nieuw-proposal-table-wrap {
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  overflow: hidden;
  background: #fafbfc;
}

.quote-lines-table .quote-lines-row--header td {
  background: rgba(37, 99, 235, 0.06);
  font-weight: 800;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(37, 99, 235, 0.12);
}

/* Totalen */
.nieuw-totals-saas {
  margin-top: 16px;
}
.nieuw-totals-saas__card {
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  padding: 16px 18px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 40%);
}
.nieuw-totals-saas__rows {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.nieuw-totals-saas__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.92rem;
  color: #475569;
}
.nieuw-totals-saas__row strong {
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.nieuw-totals-saas__row--grand {
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
  font-size: 1rem;
}
.nieuw-totals-saas__row--grand span:first-child {
  font-weight: 750;
  color: #0f172a;
}
.nieuw-totals-saas__manual {
  margin-bottom: 8px;
}
.nieuw-totals-saas__manual label {
  display: block;
  margin-bottom: 6px;
}
.nieuw-totals-saas__input {
  width: 100%;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 0.95rem;
}
.nieuw-totals-saas__hint {
  margin-top: 6px;
}

.nieuw-settings-manual-klant {
  margin: 14px 0 18px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(248, 250, 252, 0.65);
}
.nieuw-settings-manual-klant summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.92rem;
}
.nieuw-settings-manual-klant__hint {
  margin: 10px 0 0;
}

.nieuw-actions--saas {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin-top: 18px;
  padding: 16px 20px 18px !important;
  border-radius: 16px 16px 0 0 !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(8px);
}
.nieuw-actions__sub {
  margin-top: 4px;
  max-width: 42rem;
}

.nieuw-tips--saas {
  padding: 14px 16px !important;
}
.nieuw-tips__title {
  font-weight: 800;
  font-size: 0.88rem;
  margin-bottom: 10px;
  color: #0f172a;
}

@media (max-width: 720px) {
  .nieuw-saas-header__actions {
    width: 100%;
    justify-content: stretch;
  }
  .nieuw-saas-header__actions .btn-compact {
    flex: 1;
    justify-content: center;
  }
}