/* ============================================================
   portal-console.css — het klantportaal in de consoletaal
   ============================================================
   Laadt als laatste, na console-brand.css, en vertaalt de eigen
   componenten van het portaal (.card, .stat-box, .work-panel,
   .document-card, …) naar wat de console al heeft:

   - de shell van de console (sidebar + topbar + .main) komt uit
     dashboard.css; hier staat alleen wat het portaal extra heeft
     (merkregel, schakelaar, voettekst)
   - dezelfde drie glaslagen als console-brand.css: containers,
     kaarten óp glas, overlays
   - dezelfde knop-, invoer- en tabvormen
   - één schakelaar (.portal-switch), naar het model van
     .task-share-toggle uit kanban.css

   Net als in de console zit er bewust geen backdrop-filter op:
   QuickLiquid legt achter elke knop een laag die zelf vervaagt,
   en binnen een vervagende ouder wordt dat een donker vlak.
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens — de portaalvariabelen wijzen naar de consolekleuren
   ------------------------------------------------------------
   De pagina's zetten hun eigen stijlen inline met --void, --base,
   --surface, --accent enzovoort. Die blijven dus gewoon werken,
   maar wijzen nu naar het blauwe palet van de console. */
body.console-brand.portal-refresh {
  --void: var(--color-void);
  --base: var(--color-base);
  --surface: var(--color-surface);
  --border: var(--color-border);
  --muted: var(--color-muted);
  --text: var(--color-text);
  --accent: var(--color-accent-text);
  --blue: var(--color-accent);
  --green: #67a46f;
  --danger: #e8541e;
  --body: var(--font-body);
  --mono: var(--font-mono);
  --portal-display: var(--font-body);
  /* De console leest op 14px, maar dit scherm is voor klanten: de lopende
     tekst blijft op 16px staan. De componenten houden de consolematen. */
  font: 16px / 1.6 var(--font-body);
}

/* portal-refresh.css zet Arial met !important op elke knop en elk
   tabblad; de console gebruikt overal IBM Plex Sans. */
body.console-brand.portal-refresh :is(
  button, input, select, textarea, h1, h2, h3, h4,
  .btn, .btn-submit, .btn-download, .submit-btn, .upload-submit,
  .filter, .filter-tab, .viewport-preset, .url-bar__open
) {
  font-family: var(--font-body) !important;
}

/* ------------------------------------------------------------
   2. Shell — wat het portaal boven de console-sidebar heeft
   ------------------------------------------------------------ */
body.console-brand .portal-skip {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--color-accent);
  color: #fff;
}
body.console-brand .portal-skip:focus { top: 12px; }

body.console-brand .sidebar__brand { display: grid; gap: 8px; }
body.console-brand .sidebar__brand-context {
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

/* De schakelaar, het account en het slot staan onder elkaar in de voet. */
body.console-brand .sidebar__footer { display: grid; gap: 8px; }
body.console-brand .sidebar__user-info { margin-bottom: 0; }
body.console-brand .sidebar__user-name { font-size: var(--text-sm); }

body.console-brand .portal-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  color: var(--color-muted);
  font-size: var(--text-xs);
}
body.console-brand .portal-secure i {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #65976a;
  box-shadow: 0 0 0 3px rgba(101, 151, 106, .14);
}

/* Ingeklapte sidebar: de console-regels in dashboard.css doen de navigatie,
   het account en de knop; hier alleen wat het portaal extra heeft. De
   schakelaar houdt zijn schuifje, het slot alleen zijn stip. */
@media (min-width: 1025px) {
  html.sidebar-collapsed body.console-brand .sidebar__brand { gap: 0; }
  html.sidebar-collapsed body.console-brand .sidebar__brand-context { display: none; }
  html.sidebar-collapsed body.console-brand :is(.portal-switch__text, .portal-secure__label) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html.sidebar-collapsed body.console-brand .portal-switch { justify-content: center; padding: 8px 0; }
  html.sidebar-collapsed body.console-brand .portal-secure { justify-content: center; padding: 6px 0; }
}

body.console-brand .portal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 24px clamp(var(--space-6), 4vw, var(--space-10));
  border-top: 1px solid var(--glass-line);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: center;
}
body.console-brand .portal-footer img { width: 132px; height: auto; opacity: .7; }
body.console-brand .portal-footer a { color: var(--color-accent-text); }

/* De pagina's brengen hun eigen wrapper mee; .main__inner verzorgt
   nu de marges, dus die wrapper mag alleen nog de breedte bepalen. */
body.console-brand :is(.portal-wrap, main.wrap) {
  width: 100%;
  margin-inline: auto;
  padding: 0;
}

body.console-brand .portal-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
body.console-brand .portal-table-wrap :is(.u-table, .items-table) { min-width: 440px; }

/* ------------------------------------------------------------
   3. Glas, laag 1 — containers
   ------------------------------------------------------------ */
body.console-brand :is(
  .overview-work, .work-panel, .work-stat, .stat-box, .quick-card,
  .dashboard-tile, .dashboard-section, .website-hero, .summary-progress,
  .summary-stat, .upload-shell, .documents-hero, .documents-empty,
  .documents-library, .workspace, .invoice-pay, .url-bar, .iframe-wrap,
  .progress-stats > div, .empty-state
) {
  border: 1px solid var(--glass-line);
  border-radius: var(--glass-radius);
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
}

/* Tegels op het overzicht dragen de actie: iets meer blauw in de rand. */
body.console-brand .dashboard-tile { border-color: rgba(0, 102, 255, .28); }
body.console-brand :is(.dashboard-tile, .quick-card, .document-card, .card--link):hover {
  border-color: var(--color-accent);
  background: var(--glass-fill-strong);
}
body.console-brand .dashboard-tile__label { color: var(--color-accent-text); }

/* Halve panelen binnen een container houden alleen hun scheidingslijn. */
body.console-brand :is(
  .upload-intro, .upload-form, .viewer, .side, .documents-summary,
  .documents-library__head, .work-panel__head, .progress-head, .viewer-bar,
  .toolbar, .section-title, .overview-work__head, .document-card__action,
  .invoice-card__actions
) {
  border-color: var(--glass-line);
}
body.console-brand :is(.upload-intro, .upload-form, .documents-summary, .viewer-bar) {
  background: rgba(255, 255, 255, .025);
}
body.console-brand :is(.work-panel__head, .documents-library__head, .progress-head) {
  background: rgba(255, 255, 255, .025);
}
body.console-brand :is(.u-table th, .items-table th) {
  border-color: var(--glass-line);
  background: rgba(255, 255, 255, .025);
}
body.console-brand :is(.u-table td, .u-table tr, .items-table td, .items-table tr) {
  border-color: var(--glass-line);
}

/* ------------------------------------------------------------
   4. Glas, laag 2 — kaarten óp glas
   ------------------------------------------------------------
   Alleen doorschijnend, geen eigen schaduw: een factuurlijst of
   documentraster telt er al gauw tientallen. */
body.console-brand :is(
  .card, .document-card, .task, .feedback-card, .compose, .empty,
  .notice, .documents-notice, .document-file-picker, .upload-panel
) {
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  background: var(--glass-card);
  box-shadow: none;
}
body.console-brand :is(.card, .task, .document-card):hover { background: var(--glass-card-hover); }
body.console-brand :is(.empty, .work-empty) { border-style: dashed; color: var(--color-muted); }
body.console-brand .notice { border-color: rgba(0, 102, 255, .4); background: rgba(0, 102, 255, .08); }
body.console-brand .notice.error,
body.console-brand .documents-notice { border-color: rgba(232, 84, 30, .5); background: rgba(232, 84, 30, .08); }

/* Regels in een lijst zijn geen kaarten: het paneel eromheen is het glas. */
body.console-brand :is(.overview-task, .overview-document) {
  border-color: var(--glass-line);
  background: transparent;
}
body.console-brand :is(.overview-task, .overview-document):hover { background: var(--glass-card-hover); }

/* ------------------------------------------------------------
   5. Glas, laag 3 — overlays
   ------------------------------------------------------------ */
body.console-brand :is(.feedback-dialog, .feedback-toast) {
  border-color: rgba(255, 255, 255, .12);
  border-radius: var(--glass-radius);
  background: var(--glass-fill-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 70px rgba(0, 0, 0, .55);
}

/* Inlogscherm, wachtwoord vergeten en wachtwoord instellen: één
   glazen kaart boven dezelfde gloed als het inloggen op de console. */
body.console-brand.portal-auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: 32px 20px;
  background:
    radial-gradient(900px 600px at 50% 18%, rgba(0, 102, 255, .16), transparent 65%),
    radial-gradient(700px 500px at 85% 95%, rgba(0, 102, 255, .07), transparent 60%),
    var(--color-void);
}
body.console-brand.portal-auth :is(.login-card, .card) {
  width: 100%;
  max-width: 500px;
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid var(--glass-line);
  border-top-color: var(--color-accent);
  border-radius: 16px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .012) 55%),
    rgba(18, 24, 32, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 70px rgba(0, 0, 0, .45);
}
body.console-brand.portal-auth .login-logo { width: min(300px, 100%); }
body.console-brand.portal-auth :is(.login-title, h1) { font: 700 32px/1.2 var(--font-body); }
body.console-brand.portal-auth .login-brand p { color: var(--color-secondary); font-size: var(--text-base); }
body.console-brand.portal-auth :is(.login-meta a, .login-footer a, a, p) { font-size: var(--text-base); }
body.console-brand.portal-auth input { min-height: 48px; padding: 12px 14px; }

/* ------------------------------------------------------------
   6. Knoppen, invoer en tabs
   ------------------------------------------------------------ */
body.console-brand :is(.btn, .btn-submit, .btn-download, .submit-btn, .upload-submit, .invoice-pay-link) {
  box-sizing: border-box;
  min-height: var(--console-control-height);
  padding: 8px 14px;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
}
body.console-brand :is(.btn, .btn-submit, .btn-download, .submit-btn, .upload-submit, .invoice-pay-link):not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.console-brand :is(
  .btn--accent, .btn--primary, .btn-submit, .submit-btn, .upload-submit, .invoice-pay-link, .btn-download
) {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}
body.console-brand :is(
  .btn--accent, .btn--primary, .btn-submit, .submit-btn, .upload-submit, .invoice-pay-link, .btn-download
):hover {
  background: var(--color-accent-dim);
  border-color: var(--color-accent-dim);
  color: #fff;
}
body.console-brand .btn--danger { border-color: #e8541e; color: #ffad96; }
body.console-brand .btn--danger:hover { background: rgba(232, 84, 30, .12); }

body.console-brand :is(.input, input, select, textarea) {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: rgba(10, 13, 18, .6);
  color: var(--color-text);
  font-size: var(--text-base);
}
body.console-brand :is(.input, input, select, textarea):focus {
  border-color: var(--color-accent-text);
  outline: none;
}
body.console-brand :is(.label, label) { color: var(--color-secondary); font-size: var(--text-sm); }

/* Tabs: de groep is een glazen rail, het actieve blad schuift erin
   op, net als .view-tabs__item en .qa-tab in de console. */
body.console-brand :is(.filter-tabs, .filters, .mode-tabs) {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  background: var(--glass-card);
}
body.console-brand :is(.filter-tab, .filter, .mode-tabs button, .viewport-preset) {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--color-secondary);
  font-size: var(--text-sm);
  line-height: 1.4;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}
body.console-brand :is(.filter-tab, .filter, .mode-tabs button, .viewport-preset):not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body.console-brand :is(.filter-tab, .filter, .mode-tabs button, .viewport-preset):hover {
  background: var(--glass-card-hover);
  color: var(--color-text);
}
body.console-brand :is(.filter-tab.active, .filter.active, .mode-tabs button.active, .viewport-preset.active) {
  border-color: var(--color-accent);
  background: rgba(0, 102, 255, .12);
  color: var(--color-accent-text);
}

body.console-brand :is(.status-pill, .chip, .badge, .page, .document-status, .overview-task__status, .document-origin) {
  border-color: var(--glass-line);
  border-radius: 99px;
  color: var(--color-secondary);
  font-size: var(--text-xs);
}
body.console-brand :is(.chip.status-busy, .badge.busy, .document-status--progress, .overview-task__status.busy) {
  border-color: rgba(0, 102, 255, .45);
  color: var(--color-accent-text);
}
body.console-brand :is(.progress-track, .track) { border-radius: 99px; background: rgba(255, 255, 255, .08); }
body.console-brand :is(.progress-track i, .track i) { border-radius: 99px; background: var(--color-accent); }

/* ------------------------------------------------------------
   7. Schakelaar
   ------------------------------------------------------------
   Zelfde maten als .task-share-toggle in de console. De stand komt
   van aria-pressed, dat portal-privacy.js bijhoudt, zodat hij ook
   klopt als een tweede tabblad de voorkeur omzet. */
body.console-brand .portal-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: rgba(0, 102, 255, .035);
  color: var(--color-secondary);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
body.console-brand .portal-switch[hidden] { display: none; }
body.console-brand .portal-switch:hover { border-color: var(--color-border-light); color: var(--color-text); }
body.console-brand .portal-switch__control {
  position: relative;
  width: 38px;
  height: 20px;
  flex: 0 0 38px;
  border: 1px solid var(--color-border-light);
  border-radius: 99px;
  background: var(--color-void);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
body.console-brand .portal-switch__control::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-muted);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}
body.console-brand .portal-switch[aria-pressed="true"] { color: var(--color-text); }
body.console-brand .portal-switch[aria-pressed="true"] .portal-switch__control {
  border-color: var(--color-accent);
  background: rgba(0, 102, 255, .12);
}
body.console-brand .portal-switch[aria-pressed="true"] .portal-switch__control::after {
  transform: translateX(18px);
  background: var(--color-accent);
}
body.console-brand .portal-switch__text { min-width: 0; }
body.console-brand .portal-switch:focus-visible { outline: 2px solid #70a9ff; outline-offset: 3px; }

/* Het aan/uit-vinkje bij een portaalgebruiker is dezelfde schakelaar. */
body.console-brand .portal-switch-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
body.console-brand .portal-switch-field input { position: absolute; opacity: 0; pointer-events: none; }
body.console-brand .portal-switch-field .portal-switch__control { flex: 0 0 38px; }
body.console-brand .portal-switch-field input:checked + .portal-switch__control {
  border-color: var(--color-accent);
  background: rgba(0, 102, 255, .12);
}
body.console-brand .portal-switch-field input:checked + .portal-switch__control::after {
  transform: translateX(18px);
  background: var(--color-accent);
}
body.console-brand .portal-switch-field input:focus-visible + .portal-switch__control {
  outline: 2px solid #70a9ff;
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   8. Terugval zonder doorschijnendheid
   ------------------------------------------------------------ */
@media (prefers-reduced-transparency: reduce) {
  body.console-brand :is(
    .overview-work, .work-panel, .work-stat, .stat-box, .quick-card,
    .dashboard-tile, .dashboard-section, .website-hero, .summary-progress,
    .summary-stat, .upload-shell, .documents-hero, .documents-empty,
    .documents-library, .workspace, .invoice-pay, .url-bar, .iframe-wrap,
    .progress-stats > div, .empty-state,
    .card, .document-card, .task, .feedback-card, .compose,
    .feedback-dialog, .feedback-toast
  ) {
    background: var(--color-surface);
  }

  body.console-brand.portal-auth { background: var(--color-void); }
  body.console-brand.portal-auth :is(.login-card, .card) { background: var(--color-base); }
}

/* ------------------------------------------------------------
   9. Smalle schermen
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  body.console-brand .portal-footer { flex-direction: column; gap: 8px; padding-inline: var(--space-4); }
  body.console-brand :is(.filter-tabs, .filters, .mode-tabs) { display: flex; width: 100%; }
  body.console-brand :is(.btn, .btn-submit, .btn-download, .upload-submit) { width: 100%; }
}