/* ============================================================================
   shared/theme.css — Xtreme Testing premium design-tokens (Blok 0)
   Gedeelde visuele basis voor Keuringtool én Klantenportaal.
   Gedistilleerd uit de bestaande apps (slate-shell + rode accentgloed).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ── Design-tokens ───────────────────────────────────────────────────────── */
:root{
  /* Merk / accent */
  --red:#e0463a; --red-2:#b02a20; --red-accent:#e35b4c; --red-soft:#ff8a7d;
  --red-glow:rgba(227,91,76,.30);
  /* Shell (donker premium) */
  --black:#10141c; --dark:#161b24; --card:#1b212c; --card-2:#222834;
  --border:#2a313d; --border-2:#39424f; --inp:#141a24; --hair:rgba(255,255,255,.05);
  /* Tekst */
  --text:#f2f5f9; --muted:#9aa4b1; --muted-2:#5c6672;
  /* Status */
  --green:#0f9d58; --green-bright:#16d47a; --orange:#f97316; --nok:#e11d2a; --blue:#2f81c9;
  /* Vorm */
  --radius:14px; --radius-sm:10px; --radius-pill:20px;
  --shadow-card:0 1px 0 var(--hair) inset,0 10px 30px rgba(0,0,0,.38);
  --dur:.15s;
}

/* ── Reset & basis ───────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  background:radial-gradient(130% 90% at 50% -10%,#1a2130 0%,#0f131b 52%,#0b0e14 100%);
  background-attachment:fixed;
  color:var(--text);font-family:'Barlow',sans-serif;font-size:15px;min-height:100vh;
  line-height:1.4;
}
a{color:var(--red-accent);text-decoration:none;}
::selection{background:rgba(227,91,76,.35);}

/* ── Header (glas + rode accentgloed) ────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:200;display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:linear-gradient(180deg,#1b2230,#141924);border-bottom:1px solid #262e3b;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--red-accent),rgba(227,91,76,0) 55%);pointer-events:none;}
.lmark{
  width:46px;height:46px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--red),#a5271c);
  box-shadow:0 4px 14px rgba(211,58,44,.4),inset 0 1px 0 rgba(255,255,255,.18);
}
.lmark img{width:100%;height:100%;object-fit:contain;border-radius:10px;}
.lmark .lxt{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;color:#fff;letter-spacing:-.5px;}

/* ── Merklogo met glow (overal, transparante achtergrond) ────────────────── */
.brand-logo{height:52px;width:auto;flex-shrink:0;object-fit:contain;
  filter:drop-shadow(0 0 5px rgba(227,91,76,.4));animation:brandGlow 3.6s ease-in-out infinite;}
.login-brand{display:block;width:auto;max-width:230px;height:auto;margin:0 auto 16px;
  filter:drop-shadow(0 0 10px rgba(227,91,76,.5));animation:brandGlow 3.6s ease-in-out infinite;}
@keyframes brandGlow{
  0%,100%{filter:drop-shadow(0 0 5px rgba(227,91,76,.35));transform:translateY(0);}
  50%{filter:drop-shadow(0 0 13px rgba(227,91,76,.75)) drop-shadow(0 0 22px rgba(227,91,76,.35));transform:translateY(-1.5px);}
}
.htxt{flex:1;min-width:0;}
.htxt h1{font-family:'Barlow',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--text);line-height:1.12;}
.htxt p{font-family:'Barlow',sans-serif;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;color:var(--muted);margin-top:2px;}
.hbadge{background:var(--red);border-radius:var(--radius-pill);padding:4px 12px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;color:#fff;}

/* ── Layout-container ────────────────────────────────────────────────────── */
.wrap{max-width:640px;margin:0 auto;padding:14px 16px 90px;}

/* ── Kaarten ─────────────────────────────────────────────────────────────── */
.card{
  background:linear-gradient(180deg,#1f2735,#1a212c);
  border:1px solid var(--border-2);border-left:5px solid var(--red);border-radius:var(--radius);
  padding:16px;margin-bottom:16px;box-shadow:var(--shadow-card);
}
.ctitle{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;text-transform:uppercase;
  letter-spacing:.13em;color:var(--red-accent);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.ctitle::before{content:"";display:inline-block;width:3px;height:12px;background:var(--red-accent);border-radius:2px;}

/* ── Formuliervelden ─────────────────────────────────────────────────────── */
.field{margin-bottom:12px;position:relative;}
.field label{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:4px;}
.field input,.field select,.field textarea{
  width:100%;background:var(--inp);border:1px solid var(--border-2);border-radius:var(--radius-sm);
  color:var(--text);font-family:'Barlow',sans-serif;font-size:15px;padding:11px 12px;outline:none;
  -webkit-appearance:none;transition:border-color var(--dur),box-shadow var(--dur);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red-accent);box-shadow:0 0 0 3px var(--red-glow);}
.field textarea{resize:vertical;min-height:64px;}

/* ── Knoppen ─────────────────────────────────────────────────────────────── */
.btn{
  width:100%;padding:13px;border:none;border-radius:var(--radius-sm);cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;
  letter-spacing:.05em;color:#fff;transition:filter var(--dur),transform .05s;
}
.btn:hover{filter:brightness(1.07);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:linear-gradient(180deg,var(--red),var(--red-2));box-shadow:0 5px 16px rgba(192,45,34,.36),inset 0 1px 0 rgba(255,255,255,.16);}
.btn-blue{background:linear-gradient(180deg,#3a8fd6,#2670b0);box-shadow:0 4px 12px rgba(41,128,185,.35);}
.btn-ghost{background:var(--card-2);color:var(--muted);border:1px solid var(--border-2);}
.btn:disabled{opacity:.55;cursor:not-allowed;filter:none;transform:none;}

/* ── Onderbalk (mobiele hoofdnavigatie) ──────────────────────────────────── */
.bnav{
  position:fixed;bottom:0;left:0;right:0;z-index:200;display:grid;height:70px;
  background:linear-gradient(180deg,#161b24,#10141c);border-top:1px solid #262e3b;
  box-shadow:0 -4px 18px rgba(0,0,0,.4);
}
.nb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:none;background:transparent;color:var(--muted);cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;transition:color var(--dur);}
.nb .ni{font-size:24px;line-height:1;}
.nb.active{color:var(--red-accent);background:linear-gradient(180deg,rgba(227,91,76,.13),rgba(227,91,76,0));}
.nb.active .ni{filter:drop-shadow(0 0 8px rgba(227,91,76,.55));}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--green);color:#fff;padding:10px 18px;border-radius:var(--radius-pill);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;opacity:0;
  transition:all .25s;pointer-events:none;z-index:9999;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.4);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.err{background:var(--nok);}

/* ── Loginscherm (premium) ───────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{
  width:100%;max-width:400px;background:linear-gradient(180deg,#1f2735,#1a212c);
  border:1px solid var(--border-2);border-radius:18px;padding:30px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);position:relative;overflow:hidden;
}
.login-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--red-accent));}
.login-logo{width:76px;height:76px;margin:4px auto 18px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--red),#a5271c);box-shadow:0 6px 20px rgba(211,58,44,.4),inset 0 1px 0 rgba(255,255,255,.18);}
.login-logo img{width:100%;height:100%;object-fit:contain;border-radius:16px;}
.login-logo .lxt{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:34px;color:#fff;letter-spacing:-1px;}
.login-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:30px;text-align:center;letter-spacing:.01em;}
.login-sub{font-size:11px;text-align:center;color:var(--muted);text-transform:uppercase;letter-spacing:.16em;margin:4px 0 22px;}
.login-card .field input{background:var(--inp);}
.login-msg{font-size:12px;text-align:center;margin-top:12px;min-height:16px;color:var(--red-soft);}
@keyframes shake{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(2px);}30%,50%,70%{transform:translateX(-4px);}40%,60%{transform:translateX(4px);}}

/* ── Toegankelijkheid: minder beweging ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}