/* Opmaak van de diagnosetool. Kleuren, lettertype en knoppen komen uit
   C:\Claude\Website\css\site.css, zodat de tool bij xlmeester.nl hoort.
   Alleen wat deze twee pagina's nodig hebben staat hier. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand:#1d4ed8; --brand-l:#3b82f6; --brand-d:#1e3a8a; --brand-pale:#eff6ff;
  --dark:#1a1a1a; --mid:#444; --gray:#5b6372; --light:#f5f7fb; --border:#dde3f0;
  --white:#fff;
  --groen:#15803d; --groen-bg:#dcfce7;
  --oranje:#b45309; --oranje-bg:#fef3c7;
  --rood:#b91c1c; --rood-bg:#fee2e2;
  --nav-h:72px;
}

html { scroll-behavior:smooth; }

body {
  font-family:'Source Sans 3', 'Segoe UI', sans-serif;
  color:var(--dark); background:var(--light);
  line-height:1.6;
  overflow-wrap:anywhere;
}

img { max-width:100%; height:auto; }

/* NAV */
.nav {
  background:var(--white); border-bottom:1px solid var(--border);
  padding:14px 6%; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.nav-logo img { height:44px; width:auto; display:block; }
.nav-cta {
  font-family:'Montserrat', 'Segoe UI', sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.6px; text-transform:uppercase; color:var(--brand);
  text-decoration:none;
}
.nav-cta:hover { color:var(--brand-d); }

/* LAYOUT */
.wrap { max-width:900px; margin:0 auto; padding:0 20px; }
main { padding:32px 0 64px; }

h1, h2, h3 { font-family:'Montserrat', 'Segoe UI', sans-serif; font-weight:800; color:var(--dark); }
h1 { font-size:clamp(22px,3.4vw,34px); line-height:1.2; margin-bottom:14px; }
h2 { font-size:clamp(18px,2.4vw,24px); line-height:1.25; margin-bottom:8px; }
h3 { font-size:16px; line-height:1.3; margin-bottom:6px; font-weight:700; }
p { margin-bottom:14px; color:var(--mid); }
a { color:var(--brand); }

.lead { font-size:17px; color:var(--gray); }
.klein { font-size:13px; color:var(--gray); }

/* HERO */
.hero {
  background:var(--brand-d); color:var(--white);
  padding:44px 0; margin-bottom:28px;
}
.hero h1 { color:var(--white); }
.hero p { color:rgba(255,255,255,.82); margin-bottom:0; }
.hero .eyebrow {
  display:inline-block; font-family:'Montserrat', 'Segoe UI', sans-serif;
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,.7); background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18); padding:4px 12px; border-radius:20px;
  margin-bottom:14px;
}

/* KAART */
.kaart {
  background:var(--white); border:1px solid var(--border); border-radius:10px;
  padding:24px; margin-bottom:20px;
}

/* KNOPPEN */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 30px; border-radius:5px; border:none; cursor:pointer;
  font-family:'Montserrat', 'Segoe UI', sans-serif; font-weight:700; font-size:14px;
  letter-spacing:.8px; text-transform:uppercase; text-decoration:none;
  transition:background .2s, transform .2s, box-shadow .2s;
}
.btn-brand { background:var(--brand); color:var(--white); }
.btn-brand:hover { background:var(--brand-d); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--brand); border:2px solid var(--brand); }
.btn-ghost:hover { background:var(--brand-pale); }
.btn[disabled] { opacity:.55; cursor:not-allowed; transform:none; }
.btn-sm { padding:10px 20px; font-size:12px; }
:focus-visible { outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }

/* UPLOADVAK */
.uploadvak {
  display:block; cursor:pointer;
  border:2px dashed var(--border); border-radius:10px; background:var(--white);
  padding:36px 20px; text-align:center; transition:border-color .2s, background .2s;
}
.uploadvak p { margin-bottom:6px; }
.uploadvak p:last-child { margin-bottom:0; }
.uploadvak.sleep { border-color:var(--brand); background:var(--brand-pale); }
.uploadvak input[type=file] { display:none; }
.bestandsnaam {
  margin-top:14px; font-size:14px; color:var(--gray);
  word-break:break-all; overflow-wrap:anywhere;
}

/* MELDING */
.melding {
  border-radius:8px; padding:14px 16px; margin-bottom:18px; font-size:15px;
  border:1px solid var(--border); background:var(--white);
}
.melding-fout { border-color:#fecaca; background:var(--rood-bg); color:#7f1d1d; }
.melding-goed { border-color:#bbf7d0; background:var(--groen-bg); color:#14532d; }

/* BEZIG */
.bezig { display:flex; align-items:center; gap:12px; color:var(--gray); font-size:15px; }
.tol {
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  border:3px solid var(--border); border-top-color:var(--brand);
  animation:draai .9s linear infinite;
}
@keyframes draai { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tol { animation:none; } }

/* SCOREBALK */
.scores { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:20px 0; }
.score {
  border:1px solid var(--border); border-radius:8px; padding:14px; background:var(--white);
}
.score-label {
  font-family:'Montserrat', 'Segoe UI', sans-serif; font-size:11px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; color:var(--gray); margin-bottom:6px;
}
.score-kleur { font-weight:700; font-size:15px; }
.score.groen { background:var(--groen-bg); } .score.groen .score-kleur { color:var(--groen); }
.score.oranje { background:var(--oranje-bg); } .score.oranje .score-kleur { color:var(--oranje); }
.score.rood { background:var(--rood-bg); } .score.rood .score-kleur { color:var(--rood); }

/* KERNGETALLEN */
.kerngetallen { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:20px 0; }
.kerngetal { background:var(--light); border:1px solid var(--border); border-radius:8px; padding:12px; }
.kerngetal .label {
  font-family:'Montserrat', 'Segoe UI', sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.8px; text-transform:uppercase; color:var(--gray);
}
.kerngetal .waarde { font-family:'Montserrat', 'Segoe UI', sans-serif; font-size:19px; font-weight:800; color:var(--brand-d); }

/* BEVINDINGEN */
.groep { margin-bottom:28px; }
.groep-kop {
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  border-bottom:2px solid var(--border); padding-bottom:8px; margin-bottom:6px;
}
.vlag {
  font-family:'Montserrat', 'Segoe UI', sans-serif; font-size:11px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; padding:3px 10px; border-radius:20px;
  white-space:nowrap;
}
.vlag.groen { background:var(--groen-bg); color:var(--groen); }
.vlag.oranje { background:var(--oranje-bg); color:var(--oranje); }
.vlag.rood { background:var(--rood-bg); color:var(--rood); }
.vlag.info { background:var(--light); color:var(--gray); }

.bevinding {
  background:var(--white); border:1px solid var(--border); border-left:4px solid var(--border);
  border-radius:8px; padding:16px 18px; margin-top:12px;
}
.bevinding.rood { border-left-color:var(--rood); }
.bevinding.oranje { border-left-color:var(--oranje); }
.bevinding.info { border-left-color:var(--gray); }
.bevinding h3 { margin-bottom:8px; }
.bevinding p { margin-bottom:8px; font-size:15px; }
.bevinding p:last-child { margin-bottom:0; }
.bevinding .kop { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }

/* VBA-TABEL */
.tabelwrap { overflow-x:auto; margin:10px 0 16px; }
table.vba { border-collapse:collapse; width:100%; min-width:520px; font-size:14px; }
table.vba th, table.vba td { border:1px solid var(--border); padding:7px 10px; text-align:left; }
table.vba th { background:var(--brand-pale); font-family:'Montserrat', 'Segoe UI', sans-serif; font-size:12px; }
table.vba td.mono { font-family:Consolas, monospace; font-size:13px; word-break:break-all; }

.routine-uitleg { font-size:14px; color:var(--gray); margin:6px 0; }
.routine-uitleg code { font-family:Consolas, monospace; font-size:13px; word-break:break-all; }

/* SLOT */
.slot { background:var(--brand-d); color:var(--white); border-radius:10px; padding:26px; margin-top:28px; }
.slot h2 { color:var(--white); }
.slot p { color:rgba(255,255,255,.85); }
.slot .btn-brand { background:var(--white); color:var(--brand-d); }
.slot .btn-brand:hover { background:var(--brand-pale); }

/* PDF-VAK */
.pdfvak { background:var(--brand-pale); border:1px solid #bfdbfe; border-radius:10px; padding:22px; margin-top:24px; }
/* De velden staan onder elkaar. Naast elkaar zou het vak op een smal scherm
   breder maken dan de kaart, en dat geeft een horizontale schuifbalk. */
.pdfvak form { display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.pdfvak label { font-size:13px; font-weight:600; color:var(--mid); }
.pdfvak label + input { margin-bottom:8px; }
.pdfvak input {
  width:100%; min-width:0; padding:13px 14px; border:1px solid var(--border);
  border-radius:5px; font-size:15px; font-family:inherit; background:var(--white);
}
.pdfvak .btn { align-self:flex-start; margin-top:4px; }

/* FOOTER */
footer {
  border-top:1px solid var(--border); background:var(--white);
  padding:24px 0; font-size:13px; color:var(--gray);
}
footer a { color:var(--gray); }

.verborgen { display:none !important; }

@media (max-width:720px) {
  .scores { grid-template-columns:repeat(2,1fr); }
  .kerngetallen { grid-template-columns:repeat(2,1fr); }
  .kaart { padding:18px; }
  main { padding:20px 0 40px; }
  .hero { padding:32px 0; }
  .btn { width:100%; }
  .pdfvak .btn { width:100%; }
}

@media (max-width:400px) {
  .scores { grid-template-columns:1fr; }
  .kerngetallen { grid-template-columns:1fr; }
}