/* Staff Support — huisstijl voor schermen (DocSignStaff). Tokens volgen de huisstijlgids
   (~/Meta_Master/templates/staff_support/README.md). Varianten mogen alle .ss-* klassen gebruiken en
   de tokens overschrijven, maar blijven binnen de huisstijl. */

@font-face { font-family: "Inter"; src: url(fonts/Inter-Regular.otf); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/Inter-SemiBold.otf); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/Inter-Bold.otf); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lato"; src: url(fonts/Lato-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url(fonts/Lato-Italic.ttf); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url(fonts/Lato-Bold.ttf); font-weight: 700; font-display: swap; }

:root {
  --turquoise: #01D395; --groen: #06B05C; --pearl: #040C14; --blauw: #014751; --roze: #EDAEC0;
  --body: #1D2422; --grijs: #5C6663; --lijn: #E3E9E6;
  --t-groen: #EAF7EF; --t-turq: #E1FAF1; --t-roze: #FBEEF3; --t-neutraal: #F4F7F6; --wit: #FFFFFF;
  --kop: "Inter", "Helvetica Neue", Arial, sans-serif; --tekst: "Lato", "Helvetica Neue", Arial, sans-serif;
  --radius: 8px; --schaduw: 0 1px 2px rgba(4, 12, 20, .06), 0 4px 16px rgba(4, 12, 20, .06);
  --focus: 0 0 0 3px rgba(1, 211, 149, .35);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--t-neutraal); color: var(--body); }
body { font: 400 15px/1.5 var(--tekst); -webkit-font-smoothing: antialiased; }
a { color: var(--blauw); }
a:hover { color: var(--groen); }
h1, h2, h3, h4 { font-family: var(--kop); color: var(--pearl); margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: 26px; font-weight: 700; padding-bottom: 10px; border-bottom: 2px solid var(--turquoise); margin-bottom: 18px; }
h2 { font-size: 19px; font-weight: 700; color: var(--blauw); }
h3 { font-size: 16px; font-weight: 600; }
p { margin: 0 0 .8em; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }

/* ------------------------------------------------------------------ layout */
.ss-page { min-height: 100vh; display: flex; flex-direction: column; }
.ss-topbar { background: var(--wit); border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 20; }
.ss-topbar-inner { max-width: 1200px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 18px; }
.ss-logo { height: 30px; display: block; }
.ss-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.ss-brand .ss-app { font: 600 14px var(--kop); color: var(--blauw); padding-left: 12px; border-left: 1px solid var(--lijn); }
.ss-nav { display: flex; gap: 4px; margin-left: 12px; flex-wrap: wrap; }
.ss-nav a { font: 600 14px var(--kop); color: var(--grijs); text-decoration: none; padding: 8px 12px; border-radius: 6px; }
.ss-nav a:hover, .ss-nav a[aria-current="page"] { color: var(--blauw); background: var(--t-turq); }
.ss-spacer { flex: 1; }
.ss-user { font-size: 13px; color: var(--grijs); display: flex; align-items: center; gap: 10px; }
.ss-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 28px 20px 48px; flex: 1; }
.ss-narrow { max-width: 560px; }
.ss-footer { text-align: center; padding: 28px 16px 36px; color: var(--grijs); font-size: 13px; }
.ss-footer img { width: 22px; display: block; margin: 0 auto 6px; }
.ss-footer b { display: block; color: var(--blauw); font-family: var(--kop); }
.ss-grid { display: grid; gap: 20px; }
.ss-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ss-grid.side { grid-template-columns: minmax(0, 1fr) 360px; }
@media (max-width: 900px) { .ss-grid.two, .ss-grid.side { grid-template-columns: 1fr; } .ss-nav { margin-left: 0; } }
.ss-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ss-stack > * + * { margin-top: 12px; }

/* ------------------------------------------------------------------ typografie-bouwstenen */
.ss-eyebrow { font: 700 11px var(--kop); color: var(--groen); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 6px; }
.ss-muted { color: var(--grijs); font-size: 13px; }
.ss-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; }
.ss-pre { white-space: pre-wrap; font: 13px/1.5 ui-monospace, Menlo, monospace; background: var(--t-neutraal); padding: 12px; border-radius: 6px; }
ul.ss-check { list-style: none; padding: 0; }
ul.ss-check li::before { content: "✓"; color: var(--groen); font-weight: 700; margin-right: 8px; }

/* ------------------------------------------------------------------ kaarten + blokken */
.ss-card { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 20px; box-shadow: var(--schaduw); }
.ss-card + .ss-card { margin-top: 16px; }
.ss-card h2:first-child, .ss-card h3:first-child { margin-top: 0; }
.ss-blok { border-left: 3px solid var(--groen); background: var(--t-groen); padding: 12px 16px; border-radius: 0 6px 6px 0; margin: 12px 0; }
.ss-blok.turquoise { border-color: var(--turquoise); background: var(--t-turq); }
.ss-blok.roze { border-color: var(--roze); background: var(--t-roze); }
.ss-blok.neutraal { border-color: var(--grijs); background: var(--t-neutraal); }
.ss-blok.donker { border-color: var(--turquoise); background: var(--blauw); color: var(--wit); }
.ss-blok .label { display: block; font: 700 10px var(--kop); letter-spacing: .14em; text-transform: uppercase; color: var(--groen); margin-bottom: 4px; }
.ss-blok.donker .label { color: var(--turquoise); }
.ss-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.ss-tegel { background: var(--wit); border: 1px solid var(--lijn); border-top: 3px solid var(--turquoise); border-radius: 6px; padding: 14px 16px; }
.ss-tegel .getal { font: 700 28px var(--kop); color: var(--pearl); }
.ss-tegel .bij { color: var(--grijs); font-size: 13px; }
button.ss-tegel { text-align: left; cursor: pointer; font: inherit; }
button.ss-tegel[aria-pressed="true"] { border-color: var(--turquoise); background: var(--t-turq); }

/* ------------------------------------------------------------------ knoppen + formulieren */
.ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px var(--kop); border-radius: 6px;
  padding: 10px 16px; border: 1px solid var(--lijn); background: var(--wit); color: var(--blauw); cursor: pointer; text-decoration: none; min-height: 40px; }
.ss-btn:hover { border-color: var(--blauw); color: var(--blauw); }
.ss-btn.primary { background: var(--turquoise); border-color: var(--turquoise); color: var(--pearl); }
.ss-btn.primary:hover { background: #00c08a; }
.ss-btn.dark { background: var(--blauw); border-color: var(--blauw); color: var(--wit); }
.ss-btn.danger { color: #8a2a44; border-color: var(--roze); background: var(--t-roze); }
.ss-btn.small { padding: 6px 10px; min-height: 32px; font-size: 13px; }
.ss-btn.link { border: 0; background: none; padding: 4px; min-height: 0; text-decoration: underline; }
.ss-btn[disabled] { opacity: .5; cursor: not-allowed; }
.ss-field { display: block; margin-bottom: 14px; }
.ss-field > span, .ss-label { display: block; font: 600 13px var(--kop); color: var(--blauw); margin-bottom: 5px; }
.ss-input, .ss-select, .ss-textarea { width: 100%; font: 400 15px var(--tekst); color: var(--body); background: var(--wit);
  border: 1px solid #cfd8d4; border-radius: 6px; padding: 9px 12px; min-height: 40px; }
.ss-input:focus, .ss-select:focus, .ss-textarea:focus { outline: none; border-color: var(--turquoise); box-shadow: var(--focus); }
.ss-textarea { min-height: 84px; resize: vertical; }
.ss-checkbox { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.ss-checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--groen); }
.ss-radio-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ss-radio-cards label { border: 1px solid var(--lijn); border-radius: 8px; padding: 12px; cursor: pointer; display: block; background: var(--wit); }
.ss-radio-cards label:has(input:checked) { border-color: var(--turquoise); background: var(--t-turq); }
.ss-radio-cards input { accent-color: var(--groen); margin-right: 6px; }
.ss-radio-cards small { display: block; color: var(--grijs); margin-top: 4px; }
.ss-error { color: #8a2a44; background: var(--t-roze); border-left: 3px solid var(--roze); padding: 8px 12px; border-radius: 0 6px 6px 0; }

/* ------------------------------------------------------------------ tabellen + badges */
.ss-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ss-table th { background: var(--groen); color: var(--wit); font: 700 11px var(--kop); text-transform: uppercase; letter-spacing: .1em; text-align: left; padding: 8px 10px; }
.ss-table td { padding: 10px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.ss-table td:first-child { color: var(--blauw); font-weight: 700; }
.ss-table tr.klik { cursor: pointer; }
.ss-table tr.klik:hover td { background: var(--t-turq); }
.ss-table-wrap { overflow-x: auto; }
.ss-badge { display: inline-block; font: 600 12px var(--kop); padding: 3px 9px; border-radius: 999px; background: var(--t-neutraal); color: var(--grijs); white-space: nowrap; }
.ss-badge.draft { background: var(--t-neutraal); color: var(--grijs); }
.ss-badge.sent, .ss-badge.notified, .ss-badge.opened, .ss-badge.inbehandeling { background: var(--t-turq); color: var(--blauw); }
.ss-badge.completed, .ss-badge.signed, .ss-badge.voltooid { background: var(--t-groen); color: #04773e; }
.ss-badge.declined, .ss-badge.revoked, .ss-badge.cancelled, .ss-badge.geannuleerd { background: var(--t-roze); color: #8a2a44; }
.ss-progress { height: 8px; background: var(--lijn); border-radius: 99px; overflow: hidden; }
.ss-progress > i { display: block; height: 100%; background: var(--turquoise); transition: width .3s; }

/* stappen (volgorde ondertekenaars) */
.ss-steps { list-style: none; padding: 0; margin: 0; }
.ss-steps li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.ss-steps .nr { width: 30px; height: 30px; border-radius: 50%; background: var(--t-neutraal); color: var(--blauw); font: 700 13px var(--kop); display: grid; place-items: center; }
.ss-steps li.signed .nr { background: var(--groen); color: var(--wit); }
.ss-steps li.active .nr { background: var(--turquoise); color: var(--pearl); }

/* tijdlijn (audit) */
.ss-timeline { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.ss-timeline li { position: relative; padding: 0 0 12px 20px; border-left: 2px solid var(--lijn); margin-left: 6px; }
.ss-timeline li::before { content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--turquoise); }
.ss-timeline time { display: block; font-size: 12px; color: var(--grijs); }

/* ------------------------------------------------------------------ meldingen */
.ss-toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 100; max-width: min(380px, calc(100vw - 32px)); }
.ss-toast { background: var(--blauw); color: var(--wit); border-left: 4px solid var(--turquoise); padding: 12px 14px; border-radius: 6px; box-shadow: var(--schaduw); font-size: 14px; }
.ss-bell { position: relative; }
.ss-bell .count { position: absolute; top: -4px; right: -4px; background: var(--turquoise); color: var(--pearl); font: 700 11px var(--kop); border-radius: 99px; padding: 1px 6px; }
.ss-dropdown { position: absolute; right: 0; top: calc(100% + 6px); width: min(360px, calc(100vw - 32px)); background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; box-shadow: var(--schaduw); padding: 8px; z-index: 30; max-height: 60vh; overflow: auto; }
.ss-dropdown a { display: block; padding: 8px; border-radius: 6px; text-decoration: none; color: var(--body); font-size: 14px; }
.ss-dropdown a:hover { background: var(--t-turq); }
.ss-dropdown a.unread { font-weight: 700; }

/* ------------------------------------------------------------------ PDF-weergave + velden */
.ss-pdf { display: grid; gap: 16px; justify-items: center; }
.ss-pdf-page { position: relative; background: var(--wit); box-shadow: var(--schaduw); max-width: 100%; }
.ss-pdf-page canvas { display: block; width: 100%; height: auto; }
.ss-pdf-overlay { position: absolute; inset: 0; }
.ss-pdf-label { position: absolute; left: 0; top: -18px; font-size: 11px; color: var(--grijs); }
.ss-box { position: absolute; border: 2px dashed var(--blauw); background: rgba(1, 211, 149, .16); border-radius: 3px; font: 600 11px var(--kop);
  color: var(--blauw); display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; line-height: 1.1; padding: 2px; }
.ss-box.mine { border-style: solid; border-color: var(--turquoise); background: rgba(1, 211, 149, .22); cursor: pointer; }
.ss-box.mine.done { background: rgba(6, 176, 92, .10); border-color: var(--groen); }
.ss-box.other { border-color: #b8c3bf; background: rgba(92, 102, 99, .08); color: var(--grijs); }
.ss-box img { max-width: 100%; max-height: 100%; }
.ss-box input[type="text"] { width: 100%; height: 100%; border: 0; background: transparent; font: 13px var(--tekst); padding: 0 3px; }
.ss-box input[type="checkbox"] { width: 80%; height: 80%; accent-color: var(--groen); margin: 0; }
.ss-box .del { position: absolute; top: 0; right: 0; border: 0; background: var(--blauw); color: var(--wit); font-size: 11px; line-height: 1; padding: 2px 4px; cursor: pointer; }
.ss-placing .ss-pdf-overlay { cursor: crosshair; }

/* ------------------------------------------------------------------ handtekeningpad */
ss-signature-pad { display: block; }
.ss-sig-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--lijn); margin-bottom: 10px; }
.ss-sig-tabs button { font: 600 14px var(--kop); color: var(--grijs); background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 12px; cursor: pointer; }
.ss-sig-tabs button[aria-selected="true"] { color: var(--blauw); border-bottom-color: var(--turquoise); }
.ss-sig-area { position: relative; border: 1px dashed #b8c3bf; border-radius: 6px; background: var(--wit); }
.ss-sig-area canvas { display: block; width: 100%; height: 180px; touch-action: none; }
.ss-sig-area .baseline { position: absolute; left: 8%; right: 8%; bottom: 40px; border-bottom: 1px solid var(--lijn); pointer-events: none; }
.ss-sig-area .hint { position: absolute; left: 8%; bottom: 18px; font-size: 12px; color: var(--grijs); pointer-events: none; }
.ss-sig-tools { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------ dialoog */
dialog.ss-dialog { border: 0; border-radius: 10px; padding: 0; width: min(640px, calc(100vw - 24px)); box-shadow: 0 20px 60px rgba(4, 12, 20, .3); }
dialog.ss-dialog::backdrop { background: rgba(4, 12, 20, .45); }
dialog.ss-dialog .ss-dialog-body { padding: 22px; }
dialog.ss-dialog .ss-dialog-foot { padding: 14px 22px; border-top: 1px solid var(--lijn); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }