/* Tokens uit het Figma DigiBoox Design System (Colors, Typography, Buttons, Cards,
     Spacing & Layout) + hover-kleuren uit digibtw.bundle.css */
  :root {
    --blue:#0089e4; --blue-hover:#047ccc; --blue-bg:#e9f7fe;
    --pink:#de2a8d; --pink-hover:#cf2583; --pink-bg:#fdeaf4;
    --green:#00c078; --green-hover:#00b571; --green-bg:#e6f8f1;
    --yellow:#fbbc04; --red:#ff3520; --red-bg:#fff0ee;
    --dark:#293542; --text-body:#555555; --text-soft:#545454; --text:#666666; --placeholder:#7c8087; --caption:#8c97ac;
    --border:#e2e5ea; --border-soft:#eceff4; --bg:#f7f8fa; --white:#fff;
    --r-card:12px; --r-box:12px; --r-btn:7px; --r-input:7px; --r-pill:999px;
    --shadow-card:0 2px 8px rgba(0,0,0,.08); --shadow-medium:0 4px 16px rgba(0,0,0,.1); --shadow-heavy:0 8px 24px rgba(0,0,0,.15);
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px;
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--bg); color:var(--text-body); font-family:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:15px; line-height:24px; }
  a { color:var(--blue); text-decoration:none; font-weight:600; } a:hover { text-decoration:underline; }
  h1,h2,h3,h4 { color:var(--dark); margin:0; font-weight:600; }
  h1 { font-size:32px; line-height:44.8px; } h2 { font-size:20px; line-height:28px; } h3 { font-size:18px; line-height:25.2px; }
  small, .small { font-size:14px; line-height:22px; color:var(--text); }
  code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:var(--border-soft); padding:1px 5px; border-radius:5px; }

  /* Topbar */
  .top { background:var(--white); border-bottom:1px solid var(--border-soft); position:sticky; top:0; z-index:30; }
  .top-in { max-width:1120px; margin:0 auto; min-height:70px; padding:12px 24px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
  .brand { display:flex; align-items:center; gap:20px; }
  .brand img { height:26px; width:auto; display:block; }
  .brand .t { font-weight:700; color:var(--dark); font-size:15px; line-height:1.2; }
  .brand .t small { display:block; font-size:13px; line-height:20px; color:var(--caption); font-weight:400; }
  .tabs { display:flex; background:var(--bg); border-radius:var(--r-pill); padding:4px; margin-left:auto; }
  .tab { border:0; background:transparent; font:inherit; font-weight:600; font-size:14px; color:var(--text-soft); padding:7px 16px; border-radius:var(--r-pill); cursor:pointer; }
  .tab[aria-selected="true"] { background:var(--white); color:var(--blue); box-shadow:0 1px 3px rgba(41,53,66,.12); }
  .top .meta { font-size:12.5px; color:var(--caption); font-weight:600; display:flex; align-items:center; gap:10px; }
  .dot { width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; }
  .dot.off { background:var(--caption); }

  .wrap { max-width:1120px; margin:0 auto; padding:var(--s6) var(--s6) 80px; }
  .pane[hidden] { display:none; }
  .sec { font-size:13px; line-height:20px; text-transform:uppercase; letter-spacing:.06em; color:var(--caption); margin:var(--s8) 0 var(--s3); font-weight:700; }
  .sec:first-child { margin-top:4px; }

  /* Cards + grid */
  .card { background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:var(--s6); }
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s4); }
  .files { list-style:none; margin:0; padding:0; }
  .files li { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s3) 0; border-bottom:1px solid var(--border-soft); }
  .files li:last-child { border-bottom:0; }
  .files .fn { font-weight:600; color:var(--dark); word-break:break-all; }
  .kpi { background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:var(--s4) 20px; }
  .kpi .n { font-size:28px; font-weight:700; color:var(--dark); letter-spacing:-.01em; line-height:1.15; }
  .kpi .n small { font-size:14px; color:var(--caption); font-weight:600; }
  .kpi .l { color:var(--text); font-size:14px; line-height:22px; margin-top:var(--s1); }
  .kpi.accent { border-left:4px solid var(--blue); }
  .two { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
  .sub { color:var(--text); font-size:14px; line-height:22px; }

  /* Banners */
  .banner { border-radius:var(--r-box); padding:var(--s3) var(--s4); font-size:14px; line-height:22px; font-weight:600; margin:var(--s4) 0 0; display:block; }
  .banner strong { font-weight:800; }
  .banner.ok { background:var(--green-bg); color:#0a7a4f; }
  .banner.warn { background:#fff7e0; color:#8a5a00; }
  .banner.err { background:var(--red-bg); color:#b3261e; }
  .banner.info { background:var(--blue-bg); color:#0a5f9e; }

  /* Buttons */
  /* Figma Buttons: CTA groen 12x28, secundair blauw 10x24, ghost 1px #E2E5EA, allemaal radius 7px, weight 600 */
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:var(--r-btn); padding:12px 28px; font:inherit; font-weight:600; font-size:15px; line-height:22px; cursor:pointer; transition:background .15s, box-shadow .15s, transform .05s; text-decoration:none; }
  .btn:hover { text-decoration:none; }
  .btn:active { transform:translateY(1px); }
  .btn.green { background:var(--green); color:#fff; } .btn.green:hover { background:var(--green-hover); color:#fff; }
  .btn.blue { background:var(--blue); color:#fff; padding:10px 24px; } .btn.blue:hover { background:var(--blue-hover); color:#fff; }
  .btn.ghost { background:transparent; color:var(--dark); border:1px solid var(--border); padding:11px 27px; } .btn.ghost:hover { background:var(--white); border-color:var(--caption); }
  .btn.danger { background:transparent; color:#b3261e; border:1px solid #f5c2bd; padding:11px 27px; } .btn.danger:hover { background:var(--red-bg); }
  .btn.link { background:transparent; color:var(--blue); padding:0; } .btn.link:hover { text-decoration:underline; }
  .btn.sm { padding:8px 16px; font-size:14px; }
  .btn[disabled] { opacity:.45; cursor:not-allowed; box-shadow:none; }
  .btn.green[disabled]:hover { background:var(--green); }

  /* Pills / tags */
  .pill { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:var(--r-pill); font-size:12px; font-weight:700; letter-spacing:.02em; }
  .pill.A { background:var(--blue-bg); color:var(--blue-hover); }
  .pill.B { background:var(--green-bg); color:#0a7a4f; }
  .pill.C { background:var(--pink-bg); color:var(--pink-hover); }
  .pill.gray { background:var(--border-soft); color:var(--text-soft); }
  .pill.test { background:#fff7e0; color:#8a5a00; }
  .chip { display:inline-block; padding:4px 12px; border-radius:var(--r-pill); background:var(--white); border:1px solid var(--border); font-size:13px; font-weight:600; color:var(--dark); text-decoration:none; }
  .chip.on { background:var(--blue); border-color:var(--blue); color:#fff; }
  .chip:hover { text-decoration:none; border-color:var(--blue); }
  .chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }

  /* Tables */
  .scroll { overflow-x:auto; }
  table { width:100%; border-collapse:collapse; font-size:14px; }
  th, td { text-align:left; padding:10px 10px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
  th { color:var(--caption); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em; background:var(--white); position:sticky; top:0; }
  tr:last-child td { border-bottom:0; }
  td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
  td.name { font-weight:600; color:var(--dark); }
  td.nw, th.nw { white-space:nowrap; }
  .grid.pilot { grid-template-columns:repeat(4,1fr); }
  .kpi.wide { grid-column:span 3; }
  .vd { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
  .vd .v { min-width:0; }
  .vd .v .n { font-size:24px; }
  .vd .v .pill { margin-bottom:6px; }
  .vd .v .bar { margin-top:8px; height:6px; }
  .vd .v.A .bar > i { background:var(--blue); } .vd .v.B .bar > i { background:var(--green); } .vd .v.C .bar > i { background:var(--pink); }
  .bar { height:8px; background:var(--blue-bg); border-radius:5px; overflow:hidden; min-width:2px; }
  .bar > i { display:block; height:100%; background:var(--blue); border-radius:5px; }
  .bar-cel { width:38%; }
  .tbl-wrap { max-height:520px; overflow:auto; border:1px solid var(--border-soft); border-radius:var(--r-box); }
  .empty { color:var(--caption); font-weight:600; padding:18px 0; text-align:center; }

  /* Batch hero */
  .hero { display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start; }
  .hero .big { font-size:58px; font-weight:700; color:var(--dark); letter-spacing:-.02em; line-height:64px; }
  .hero .big small { font-size:18px; color:var(--text); font-weight:400; letter-spacing:0; margin-left:8px; }
  .facts { display:flex; flex-wrap:wrap; gap:8px 20px; margin:var(--s3) 0 0; font-size:14px; line-height:22px; color:var(--text); }
  .facts b { color:var(--dark); font-weight:600; }
  .designs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .design { border:1px solid var(--border-soft); border-radius:var(--r-box); overflow:hidden; background:var(--white); }
  .design img { width:100%; display:block; aspect-ratio:600/428; object-fit:cover; background:var(--bg); }
  .design .d { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; font-size:14px; font-weight:600; color:var(--dark); }
  .actions { display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center; margin-top:var(--s6); padding-top:var(--s6); border-top:1px solid var(--border-soft); }
  .actions .spacer { flex:1; }
  .confirm { display:none; margin-top:var(--s4); padding:var(--s6); border-radius:var(--r-box); background:var(--bg); border:1px solid var(--border); }
  .confirm.open { display:block; }
  .confirm label.chk { display:flex; gap:10px; align-items:flex-start; color:var(--text-body); cursor:pointer; }
  .confirm input[type=checkbox] { width:18px; height:18px; margin-top:2px; accent-color:var(--green); }
  .confirm .row { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
  .search { width:100%; max-width:360px; font:inherit; font-size:15px; padding:12px 16px 12px 40px; border:1px solid var(--border); border-radius:var(--r-input); background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238c97ac' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center; }
  .search::placeholder { color:var(--placeholder); }
  .search:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-bg); }
  .prog { height:10px; background:var(--border-soft); border-radius:5px; overflow:hidden; margin:10px 0 6px; }
  .prog > i { display:block; height:100%; background:var(--green); transition:width .4s; }
  footer { margin-top:var(--s12); padding-top:var(--s4); border-top:1px solid var(--border-soft); font-size:13px; line-height:20px; color:var(--caption); }

  @media (max-width:820px) {
    .hero, .two { grid-template-columns:1fr; }
    .bar-cel { display:none; }
    .grid, .grid.pilot { grid-template-columns:1fr 1fr; }
    .kpi.wide { grid-column:1 / -1; }
    .wrap { padding:var(--s4) var(--s4) 64px; }
    .card { padding:var(--s4); }
    .files li { flex-direction:column; align-items:flex-start; }
    .actions form, .actions .btn { width:100%; } .actions .spacer { display:none; }
    .tabs { margin-left:0; width:100%; } .tab { flex:1; text-align:center; }
    .top .meta { display:none; }
    .hero .big { font-size:40px; line-height:46px; }
  }

  /* Auth: gebruikerschip in de topbar, loginkaart, gebruikerstabel */
  .userchip { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-soft); }
  .userchip .av { width:30px; height:30px; border-radius:50%; background:var(--blue-bg); color:var(--blue-hover); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:13px; overflow:hidden; }
  .userchip .av img { width:100%; height:100%; object-fit:cover; }
  .userchip a { color:var(--text-soft); font-weight:600; }
  .userchip .sep { color:var(--border); }
  .login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--s6); }
  .login { width:100%; max-width:440px; background:var(--white); border-radius:var(--r-card); box-shadow:var(--shadow-medium); padding:var(--s8); }
  .login img { height:32px; display:block; margin-bottom:var(--s6); }
  .login h1 { font-size:24px; line-height:32px; margin-bottom:var(--s2); }
  .login p { margin:0 0 var(--s4); color:var(--text); }
  .input { width:100%; font:inherit; font-size:15px; padding:12px 16px; border:1px solid var(--border); border-radius:var(--r-input); background:var(--white); color:var(--dark); }
  .input::placeholder { color:var(--placeholder); }
  .input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-bg); }
  .field { margin-bottom:var(--s4); }
  .field label { display:block; font-size:14px; font-weight:600; color:var(--dark); margin-bottom:6px; }
  .btn.full { width:100%; }
  .or { display:flex; align-items:center; gap:12px; color:var(--caption); font-size:13px; margin:var(--s4) 0; }
  .or:before, .or:after { content:""; flex:1; height:1px; background:var(--border-soft); }
  .g-btn { background:var(--white); border:1px solid var(--border); color:var(--dark); }
  .g-btn:hover { border-color:var(--caption); }
  .role { font-size:12px; font-weight:700; padding:2px 10px; border-radius:var(--r-pill); }
  .role.admin { background:var(--pink-bg); color:var(--pink-hover); }
  .role.user { background:var(--border-soft); color:var(--text-soft); }
  select.input { appearance:auto; }
  .addrow { display:grid; grid-template-columns:1fr 160px auto; gap:var(--s3); align-items:end; }
  @media (max-width:820px) { .addrow { grid-template-columns:1fr; } .userchip .name { display:none; } }

  /* Wachtwoord tonen/verbergen */
  .toon { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text); margin:-4px 0 var(--s4); cursor:pointer; user-select:none; }
  .toon input { width:16px; height:16px; accent-color:var(--blue); margin:0; }
  .acties { text-align:right; white-space:nowrap; }
  .acties form { display:inline-block; margin-left:6px; }
  .acties .btn.sm { padding:6px 12px; font-size:13px; }
  @media (max-width:820px) { .acties form { display:block; margin:0 0 6px; } .acties .btn { width:100%; } }
  .dl { display:flex; gap:8px; flex-shrink:0; }
  @media (max-width:1100px) { .top .meta { display:none; } }
  .lijst { margin:0; padding-left:20px; color:var(--text); }
  .lijst li { margin-bottom:8px; }
  .lijst b { color:var(--dark); }