/* Klantschermen in de petrol-huisstijl (homepage 15-10-2026, klant-portaal.php 16-10-2026).
   Alleen de schermomlijsting: topbar, achtergrond, knoppen. Documentinhoud en printweergave
   houden hun eigen opmaak. Variabelen hebben een am-voorvoegsel zodat ze niet botsen met de
   :root-variabelen van de documenten zelf (factuur, offerte-viewer). */
:root{
  --am-ink:#13292b; --am-soft:#4d5f60; --am-faint:#7d8d8e;
  --am-line:#e0ecea; --am-line2:#c3dcd8; --am-tint:#f0f7f6; --am-tint2:#e6f2f0;
  --am-deep:#0d2b2c; --am-accent:#0f6b6b; --am-accent-dark:#0b5656; --am-accent-soft:#6fb8b2; --am-on-deep:#c6ebe6;
  --am-rgb:15,107,107;
  --am-green:#1f8a57; --am-green-bg:rgba(34,164,104,.11);
  --am-amber:#a9600f; --am-amber-bg:rgba(224,144,36,.13);
  --am-danger:#b91c1c; --am-danger-bg:rgba(185,28,28,.08);
  --am-zon:#e09024; --am-bat:#22a468; --am-laad:#2287ce;
  --am-display:'Space Grotesk',system-ui,sans-serif;
  --am-mono:'JetBrains Mono',ui-monospace,monospace;
  --am-ease:cubic-bezier(.22,1,.36,1);
}

/* Witte sticky topbar met logo, gelijk aan het klantportaal */
.am-topbar{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--am-line); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.am-topbar-in{width:min(1040px,100%); margin:0 auto; padding:13px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px}
.am-topbar.wide .am-topbar-in{width:min(1280px,100%)}
.am-brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--am-ink); min-width:0}
.am-brand img{height:30px; width:auto; display:block; flex:none}
.am-brand strong{display:block; font:700 15.5px/1.1 var(--am-display); letter-spacing:-.02em; color:var(--am-ink); white-space:nowrap}
.am-brand small{display:block; font-size:11.5px; line-height:1.2; color:var(--am-faint); margin-top:2px}
.am-topbar-right{display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; min-width:0}
.am-topbar-note{font-size:12.5px; color:var(--am-soft); text-align:right; line-height:1.35}
.am-topbar-note a{color:var(--am-accent); font-weight:600; text-decoration:none}

/* Pill-knoppen */
.am-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 17px; border-radius:999px; font:600 13.5px/1 Inter,system-ui,sans-serif; text-decoration:none; border:1px solid var(--am-line2); background:#fff; color:var(--am-ink); white-space:nowrap; cursor:pointer; transition:transform .4s var(--am-ease),border-color .2s,background .2s,color .2s,box-shadow .4s var(--am-ease)}
.am-btn:hover{border-color:var(--am-accent); color:var(--am-accent); transform:translateY(-1px)}
.am-btn.primary{background:var(--am-accent); border-color:var(--am-accent); color:#fff; box-shadow:0 12px 24px -14px rgba(var(--am-rgb),.75)}
.am-btn.primary:hover{background:var(--am-accent-dark); border-color:var(--am-accent-dark); color:#fff}
.am-btn.copied{background:var(--am-green); border-color:var(--am-green); color:#fff}
.am-btn svg{flex-shrink:0}

/* Eyebrow met de drie logostippen */
.am-eyebrow{display:inline-flex; align-items:center; gap:10px; color:var(--am-accent); font:500 12px/1.3 var(--am-mono); letter-spacing:.14em; text-transform:uppercase}
.am-dots{display:inline-flex; gap:4px}
.am-dots i{width:7px; height:7px; border-radius:2px; transform:skewX(-18deg)}
.am-dots i:nth-child(1){background:var(--am-zon)}
.am-dots i:nth-child(2){background:var(--am-bat)}
.am-dots i:nth-child(3){background:var(--am-laad)}

:is(.am-topbar,.am-btn) :is(a,button):focus-visible, .am-btn:focus-visible, .am-brand:focus-visible{outline:3px solid var(--am-accent-soft); outline-offset:3px}

@media(max-width:680px){
  .am-topbar-in{padding:11px 16px}
  .am-brand small{display:none}
  .am-brand img{height:28px}
  .am-topbar-note{font-size:11.5px}
}
@media print{
  .am-topbar{display:none !important}
}