/* PowerNexx Facturatie — app-shell stijl. Veldbruikbaar: grote raakvlakken, safe-area, contrast. */
:root{
  --ink:#0f1420; --ink-2:#3a4657; --paper:#ffffff; --lijn:#e4e9f0;
  --petrol:#0e7c66; --oranje:#ff6a1a; --groen:#1c9c5b; --rood:#d0433a;
  --r:14px; --schaduw:0 6px 22px rgba(15,20,32,.08);
  color-scheme:light dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#f4f6fa;
  min-height:100dvh;
  padding-top:env(safe-area-inset-top); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
}
a{color:var(--petrol)}

/* koptekst met status */
.pnx-top{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:12px 16px;background:var(--ink);color:#fff;
  padding-top:calc(12px + env(safe-area-inset-top));
}
.pnx-top .merk{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.pnx-top .merk img{width:26px;height:26px;border-radius:6px}
.pnx-top .rechts{margin-left:auto;display:flex;align-items:center;gap:10px}
.pnx-nav{display:flex;gap:2px;margin-left:6px}
.pnx-nav a{color:#cdd6e4;text-decoration:none;font-size:13px;font-weight:600;padding:6px 10px;border-radius:8px}
.pnx-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
@media(max-width:760px){.pnx-nav{display:none}}
.sub{color:var(--ink-2);margin:0 0 16px}
.loginkaart{max-width:380px;margin:6vh auto 0;background:var(--paper);border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--schaduw);padding:26px;text-align:center}
.loginlogo{width:64px;height:64px;border-radius:14px;margin:0 auto 10px;display:block}
.loginkaart h1{font-size:20px;margin:0 0 4px}
.loginkaart form{text-align:left;display:flex;flex-direction:column;gap:12px;margin-top:14px}
.loginkaart label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.foutbalk{background:#fdeceb;border:1px solid #f5c6c2;color:#b3261e;border-radius:10px;padding:10px 12px;font-size:13.5px;margin-top:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px}
.kpi{background:var(--paper);border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--schaduw);padding:16px}
.kpi-t{font-size:12px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.kpi-v{font-size:26px;font-weight:800;margin:4px 0}
.kpi-s{font-size:12px;color:var(--ink-2)}
#pnx-net{font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;background:rgba(28,156,91,.18);color:#7ee6ac}
#pnx-net.off{background:rgba(208,67,58,.2);color:#ffb3ad}

.wrap{max-width:1024px;margin:0 auto;padding:18px 16px calc(28px + env(safe-area-inset-bottom))}
.kaart{background:var(--paper);border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--schaduw);padding:20px}
h1{font-size:22px;margin:0 0 6px}
.sub{color:var(--ink-2);margin:0 0 18px}

/* knoppen — minimaal 44x44 raakvlak */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:48px;
  padding:0 18px;border:0;border-radius:12px;background:var(--oranje);color:#fff;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--lijn)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.rij{display:flex;gap:10px;flex-wrap:wrap}

/* velden: geen spinners, decimaal toetsenbord */
input,select,textarea{font:inherit;min-height:48px;width:100%;padding:10px 12px;border:1px solid var(--lijn);border-radius:12px;background:#fff}
input[inputmode=decimal]{text-align:right;font-variant-numeric:tabular-nums}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* update-balk */
.pnx-update{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;
  display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;
  padding:12px 16px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:14px;font-weight:600
}
.pnx-update button{min-height:40px;padding:0 16px;border:0;border-radius:10px;background:var(--oranje);color:#fff;font-weight:700;cursor:pointer}

/* iOS install-uitleg */
.pnx-ios{margin:14px 0;background:#eef6ff;border:1px solid #cfe0ff;border-radius:12px;padding:12px 14px;font-size:13.5px;color:#243b53;display:flex;gap:10px;align-items:flex-start}
.pnx-ios button{margin-left:auto;background:none;border:0;color:#243b53;font-weight:700;cursor:pointer;min-height:auto}

@media (prefers-color-scheme: dark){
  body{background:#0b0f17;color:#e7ecf3}
  .kaart{background:#141b26;border-color:#232c3a}
  .sub{color:#9fb0c3}
  input,select,textarea,.btn.ghost{background:#0f1622;border-color:#232c3a;color:#e7ecf3}
  .pnx-ios{background:#12202e;border-color:#22374a;color:#cfe0ff}
  .loginkaart,.kpi{background:#141b26;border-color:#232c3a}
  .foutbalk{background:#2a1414;border-color:#5a2420;color:#ffb3ad}
}