/*
 * MORE OS — gedeelde popupstandaard
 *
 * Alleen dialogen die expliciet `moreos-dialog-surface` dragen worden
 * aangepast. Functionele grids, formulieren en scrollcontainers blijven bij
 * de module zelf; dit bestand verzorgt uitsluitend de gemeenschappelijke
 * shell, kop, actiebalk en document-uploadweergave.
 */

.moreos-dialog-surface {
  --moreos-dialog-green:#243c2a;
  --moreos-dialog-green-mid:#314c34;
  --moreos-dialog-olive:#5c6238;
  --moreos-dialog-gold:#f4c96f;
  --moreos-dialog-copy:rgba(255,255,255,.76);
  --moreos-dialog-canvas:#f3f6f2;
  --moreos-dialog-line:#dbe5da;
  border-color:rgba(35,60,42,.2) !important;
  border-radius:22px !important;
  background:var(--moreos-dialog-canvas) !important;
  box-shadow:0 32px 90px rgba(20,38,26,.34) !important;
  color:#26362b;
  overflow:hidden;
}

.moreos-dialog-surface::backdrop {
  background:rgba(24,38,28,.68) !important;
  backdrop-filter:blur(7px);
}

.moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,article,.source-dialog-shell,section.gift-dialog-shell),
.moreos-dialog-surface:not(.moreos-dialog-v2) > form.gift-dialog-shell {
  background:var(--moreos-dialog-canvas) !important;
}

.moreos-dialog-surface:not(.moreos-dialog-v2) > form > header:not(.dialog-heading),
.moreos-dialog-surface:not(.moreos-dialog-v2) > article > header,
.moreos-dialog-surface:not(.moreos-dialog-v2) > .source-dialog-shell > header,
.moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,section).gift-dialog-shell > header {
  display:flex !important;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,article) > header > div,
.moreos-dialog-surface:not(.moreos-dialog-v2) > .source-dialog-shell > header > div,
.moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,section).gift-dialog-shell > header > div {
  flex:1 1 auto;
  min-width:0;
}

/* Alleen echte, directe modalkoppen. Geneste kaartkoppen blijven ongemoeid. */
.moreos-dialog-surface:not(.moreos-dialog-v2) > form > header,
.moreos-dialog-surface:not(.moreos-dialog-v2) > article > header,
.moreos-dialog-surface:not(.moreos-dialog-v2) > .source-dialog-shell > header,
.moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,section).gift-dialog-shell > header,
.moreos-dialog-surface:not(.moreos-dialog-v2) > form > .dialog-heading {
  isolation:isolate;
  min-height:108px;
  padding:23px 27px !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  border-radius:21px 21px 0 0;
  background:
    radial-gradient(circle at 78% 148%,transparent 0 124px,rgba(255,255,255,.15) 125px 126px,transparent 127px),
    radial-gradient(circle at 91% -42%,rgba(246,202,112,.34),transparent 44%),
    linear-gradient(128deg,var(--moreos-dialog-green) 0%,var(--moreos-dialog-green-mid) 61%,var(--moreos-dialog-olive) 100%) !important;
  box-shadow:0 10px 30px rgba(23,50,31,.2);
  color:#fff !important;
}

.moreos-dialog-surface:not(.moreos-dialog-v2) > form > header h2,
.moreos-dialog-surface:not(.moreos-dialog-v2) > article > header h2,
.moreos-dialog-surface:not(.moreos-dialog-v2) > .source-dialog-shell > header h2,
.moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,section).gift-dialog-shell > header h2,
.moreos-dialog-surface:not(.moreos-dialog-v2) > form > .dialog-heading h2 {
  margin-block:4px !important;
  color:#fff !important;
  font-family:inherit !important;
  font-size:clamp(24px,2.2vw,32px) !important;
  font-weight:780 !important;
  letter-spacing:-.028em;
  line-height:1.12;
  text-wrap:balance;
}

.moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,article) > header > div > :is(span:first-child,p:first-child,.eyebrow),
.moreos-dialog-surface:not(.moreos-dialog-v2) > .source-dialog-shell > header > div > :is(span:first-child,p:first-child,.eyebrow),
.moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,section).gift-dialog-shell > header small,
.moreos-dialog-surface:not(.moreos-dialog-v2) > form > .dialog-heading .eyebrow,
.moreos-dialog-eyebrow {
  color:var(--moreos-dialog-gold) !important;
  font-size:11px !important;
  font-weight:850 !important;
  letter-spacing:.16em !important;
  line-height:1.35;
  text-transform:uppercase;
}

.moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,article) > header > div > :is(p:last-child,span:last-child),
.moreos-dialog-surface:not(.moreos-dialog-v2) > .source-dialog-shell > header > div > :is(p:last-child,span:last-child),
.moreos-dialog-surface:not(.moreos-dialog-v2) > form > .dialog-heading p:not(.eyebrow) {
  color:var(--moreos-dialog-copy) !important;
  font-size:13px !important;
  line-height:1.5;
}

.moreos-dialog-surface:not(.moreos-dialog-v2) > form > header > button,
.moreos-dialog-surface:not(.moreos-dialog-v2) > article > header > button,
.moreos-dialog-surface:not(.moreos-dialog-v2) > .source-dialog-shell > header > button,
.moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,section).gift-dialog-shell > header > button,
.moreos-dialog-surface:not(.moreos-dialog-v2) > form > .dialog-heading > button {
  position:relative !important;
  inset:auto !important;
  z-index:2;
  display:grid !important;
  flex:0 0 48px;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  padding:0 !important;
  place-items:center;
  border:1px solid rgba(255,255,255,.38) !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  box-shadow:0 8px 22px rgba(13,28,17,.2) !important;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}

.moreos-dialog-surface:not(.moreos-dialog-v2) > form > header > button:hover,
.moreos-dialog-surface:not(.moreos-dialog-v2) > article > header > button:hover,
.moreos-dialog-surface:not(.moreos-dialog-v2) > .source-dialog-shell > header > button:hover,
.moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,section).gift-dialog-shell > header > button:hover,
.moreos-dialog-surface:not(.moreos-dialog-v2) > form > .dialog-heading > button:hover {
  border-color:rgba(255,255,255,.7) !important;
  background:rgba(255,255,255,.25) !important;
  transform:translateY(-1px);
}

.moreos-dialog-surface:not(.moreos-dialog-v2) > form > .dialog-heading > :is(.task-dialog-icon,.dialog-heading-icon),
.moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,section).gift-dialog-shell > header > span:first-child {
  border:1px solid rgba(255,255,255,.2) !important;
  background:rgba(255,255,255,.14) !important;
  color:var(--moreos-dialog-gold) !important;
  box-shadow:0 8px 20px rgba(13,28,17,.16) !important;
}

.moreos-dialog-surface button:focus-visible,
.moreos-dialog-surface a:focus-visible,
.moreos-dialog-surface :is(input,select,textarea):focus-visible {
  outline:3px solid var(--moreos-dialog-gold) !important;
  outline-offset:3px;
}

/* De compacte taakvensters hebben formulierpadding; trek hun kop volbreed. */
.moreos-dialog-surface.transition-dialog > form > .dialog-heading {
  margin:-23px -23px 18px;
  padding:22px 23px !important;
}

/* Cadeaukaartvensters gebruiken een eigen shell met binnenruimte. */
.moreos-dialog-surface.gift-dialog > :is(form,section).gift-dialog-shell > header {
  margin:-22px -22px 18px !important;
  padding:22px !important;
}

/* Rustig canvas en één herkenbare vaste actiebalk. */
.moreos-dialog-surface:not(.moreos-dialog-v2) > form > footer,
.moreos-dialog-surface:not(.moreos-dialog-v2) > article > footer,
.moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,section).gift-dialog-shell > .gift-dialog-actions,
.moreos-dialog-surface:not(.moreos-dialog-v2) > form > .dialog-actions,
.moreos-dialog-surface:not(.moreos-dialog-v2) .moreos-dialog-actions {
  position:sticky;
  z-index:4;
  bottom:0;
  flex:0 0 auto;
  border-top-color:var(--moreos-dialog-line) !important;
  background:#fff !important;
  box-shadow:0 -10px 28px rgba(31,58,38,.07);
}

.moreos-dialog-surface:not(.moreos-dialog-v2) > form > footer > button,
.moreos-dialog-surface:not(.moreos-dialog-v2) > article > footer > button,
.moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,section).gift-dialog-shell > .gift-dialog-actions > button,
.moreos-dialog-surface:not(.moreos-dialog-v2) > form > .dialog-actions > button,
.moreos-dialog-surface:not(.moreos-dialog-v2) .moreos-dialog-actions > button {
  min-height:46px !important;
  padding:0 17px !important;
  font-size:13px !important;
  font-weight:780 !important;
}

/* De SEPA-export vraagt extra grote controletekst, ook boven de gedeelde shell. */
.moreos-dialog-surface.payment-batch-dialog > form > header h2 {
  font-size:clamp(28px,3vw,38px) !important;
}

.moreos-dialog-surface.payment-batch-dialog > form > header > div > span:first-child {
  font-size:13px !important;
}

.moreos-dialog-surface.payment-batch-dialog > form > header > div > p:last-child {
  font-size:16px !important;
}

.moreos-dialog-surface.payment-batch-dialog > form > footer > button {
  min-height:54px !important;
  padding-inline:23px !important;
  font-size:16px !important;
}

.moreos-dialog-surface.supplier-import-dialog footer .supplier-secondary {
  border:1px solid #c8d4cf !important;
  background:#eef2f4 !important;
  color:#34463c !important;
  box-shadow:none !important;
}

.moreos-dialog-surface.supplier-import-dialog footer {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-direction:row !important;
  flex-wrap:wrap;
  gap:10px !important;
}

.moreos-dialog-surface.supplier-import-dialog footer .supplier-primary {
  border:0 !important;
  background:linear-gradient(135deg,#b94272,#932d5a) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(151,45,91,.2) !important;
}

.moreos-dialog-surface.supplier-import-dialog footer .supplier-primary:disabled {
  background:#d8c7cf !important;
  color:#fff !important;
  box-shadow:none !important;
  cursor:not-allowed;
}

.moreos-dialog-surface.staff-dialog fieldset {
  margin:16px 20px 0;
  padding:18px 20px;
  border:1px solid var(--moreos-dialog-line) !important;
  border-radius:16px;
  background:#fff;
}

.moreos-dialog-surface.staff-dialog fieldset:last-of-type {
  margin-bottom:16px;
}

.moreos-dialog-surface.staff-dialog legend {
  color:#2b4431 !important;
  font-family:inherit !important;
  font-weight:780 !important;
}

/* Publicatie- en facturatiepopups kregen voorheen losse inhoud zonder kop. */
.moreos-dialog-surface .moreos-dialog-compact-body {
  padding:22px 24px 24px;
  background:var(--moreos-dialog-canvas);
}

.moreos-dialog-surface .moreos-dialog-compact-body > label {
  margin:0 0 20px;
  border:1px solid var(--moreos-dialog-line);
  background:#fff !important;
}

.moreos-dialog-surface.mail-trash-dialog .mail-trash-dialog-body {
  display:grid;
  gap:12px;
  padding:22px 24px;
}

.moreos-dialog-surface.mail-trash-dialog .mail-trash-dialog-body > p {
  margin:0;
  color:#536158;
  font-size:15px;
  line-height:1.55;
}

/* De camera blijft een bewust compacte app-sheet, maar gebruikt dezelfde kop. */
.gift-camera-dialog.moreos-dialog-surface {
  padding:0;
}

.gift-camera-dialog.moreos-dialog-surface > header {
  display:flex;
  min-height:96px;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 !important;
  padding:20px 22px !important;
  border-bottom:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 87% -30%,rgba(246,202,112,.34),transparent 48%),
    linear-gradient(128deg,var(--moreos-dialog-green),var(--moreos-dialog-green-mid) 61%,var(--moreos-dialog-olive));
  color:#fff;
}

.gift-camera-dialog.moreos-dialog-surface > header h2 {
  color:#fff;
  font-family:inherit;
  font-size:25px;
  font-weight:780;
  line-height:1.15;
}

.gift-camera-dialog.moreos-dialog-surface > header button {
  display:grid;
  flex:0 0 46px;
  width:46px;
  height:46px;
  place-items:center;
  border:1px solid rgba(255,255,255,.38);
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
}

.gift-camera-dialog.moreos-dialog-surface > video {
  width:calc(100% - 30px);
  margin:15px 15px 0;
}

.gift-camera-dialog.moreos-dialog-surface > p {
  margin:12px 17px 17px;
  color:#526057;
  font-size:13px;
  line-height:1.5;
}

/*
 * Documentuploads blijven echte toegankelijke file-inputs. Alleen de bewust
 * aangemerkte import- en werkappvelden krijgen de More OS-weergave. Verborgen
 * Sligro/MEP-inputs en overige browseruploads worden niet globaal geraakt.
 */
.moreos-file-control {
  width:100%;
  min-width:0;
  min-height:54px !important;
  padding:6px 11px 6px 6px !important;
  overflow:hidden;
  border:1px solid #cbd9c8 !important;
  border-radius:12px !important;
  background:#f7faf5 !important;
  color:#4f5b52;
  font:inherit;
  font-size:14px !important;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.moreos-file-control::file-selector-button {
  min-height:44px;
  margin-right:12px;
  padding:0 15px;
  border:0;
  border-radius:9px;
  background:linear-gradient(135deg,#496744,#304d36);
  color:#fff;
  font:inherit;
  font-weight:780;
  cursor:pointer;
}

.moreos-file-control::-webkit-file-upload-button {
  min-height:44px;
  margin-right:12px;
  padding:0 15px;
  border:0;
  border-radius:9px;
  background:linear-gradient(135deg,#496744,#304d36);
  color:#fff;
  font:inherit;
  font-weight:780;
  cursor:pointer;
}

.moreos-file-control:hover {
  border-color:#7e9a73 !important;
  background:#fff !important;
}

.moreos-dialog-surface.supplier-import-dialog .supplier-file-step > label > select,
.moreos-dialog-surface.supplier-import-dialog .supplier-file-step > button {
  align-self:end;
  min-height:58px !important;
}

.moreos-file-control:focus-visible,
.sligro-file-picker:focus-within,
.photo-field:focus-within,
.attachment-field:focus-within {
  outline:3px solid rgba(244,201,111,.72) !important;
  outline-offset:3px;
}

@media(max-width:900px) {
  .moreos-dialog-surface:is(.invoice-review-dialog,.invoice-history-dialog,.payment-account-dialog,.payment-batch-dialog) {
    border-radius:0 !important;
  }

  .moreos-dialog-surface:is(.invoice-review-dialog,.invoice-history-dialog,.payment-account-dialog,.payment-batch-dialog) > form > header {
    border-radius:0;
  }
}

@media(max-width:700px) {
  .moreos-dialog-surface:is(.task-dialog,.transition-dialog) {
    border-radius:0 !important;
  }

  .moreos-dialog-surface:is(.task-dialog,.transition-dialog) > form > :is(header,.dialog-heading) {
    border-radius:0;
  }
}

@media(max-width:650px) {
  .moreos-dialog-surface.supplier-dialog {
    border-radius:0 !important;
  }

  .moreos-dialog-surface.supplier-dialog > :is(form,article) > header {
    border-radius:0;
  }
}

@media(max-width:700px) {
  .moreos-dialog-surface:not(.moreos-dialog-v2) > form > header,
  .moreos-dialog-surface:not(.moreos-dialog-v2) > article > header,
  .moreos-dialog-surface:not(.moreos-dialog-v2) > .source-dialog-shell > header,
  .moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,section).gift-dialog-shell > header,
  .moreos-dialog-surface:not(.moreos-dialog-v2) > form > .dialog-heading {
    min-height:96px;
    padding:19px 17px !important;
  }

  .moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,article) > header h2,
  .moreos-dialog-surface:not(.moreos-dialog-v2) > .source-dialog-shell > header h2,
  .moreos-dialog-surface:not(.moreos-dialog-v2) > :is(form,section).gift-dialog-shell > header h2,
  .moreos-dialog-surface:not(.moreos-dialog-v2) > form > .dialog-heading h2 {
    font-size:clamp(22px,7vw,28px) !important;
  }

  .moreos-dialog-surface.transition-dialog > form > .dialog-heading {
    margin:-18px -18px 16px;
    padding:18px !important;
  }

  .moreos-dialog-surface.gift-dialog > :is(form,section).gift-dialog-shell > header {
    margin:-16px -16px 16px !important;
    padding:18px 16px !important;
  }

  .moreos-file-control {
    min-height:58px !important;
    font-size:16px !important;
  }

  .moreos-dialog-surface.supplier-import-dialog .supplier-file-step > label > select,
  .moreos-dialog-surface.supplier-import-dialog .supplier-file-step > button {
    min-height:58px !important;
  }

  .moreos-file-control::file-selector-button,
  .moreos-file-control::-webkit-file-upload-button {
    min-height:44px;
  }

  .moreos-dialog-surface.staff-dialog fieldset {
    margin:12px 12px 0;
    padding:16px 14px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .moreos-dialog-surface * {
    scroll-behavior:auto !important;
    transition:none !important;
  }
}