/* Energy Check Teamleader-validatie — admin UI (EC-huisstijl) */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap');

:root {
  --teal:#013943; --teal-2:#0b5563; --blue:#19dae3; --blue-start:#74f8fb; --blue-end:#52a3b6;
  --green:#046a36; --green-light:#94f095; --green-deep:#178541; --bg:#f2ffeb; --yellow:#ffbc42;
  --yellow-hover:#e8a52e; --white:#fff;
  --g50:#f7faf8; --g100:#eef2f1; --g200:#dce4e3; --g400:#8aa0a0; --g600:#516161; --g800:#1f2e2e;
  --danger:#c0392b; --ok:#046a36;
  --radius:10px; --shadow:0 2px 10px rgba(1,57,67,.08); --shadow-lg:0 8px 28px rgba(1,57,67,.12);
}

* { box-sizing:border-box; }
body { margin:0; font-family:'Roboto',system-ui,sans-serif; color:var(--teal); background:var(--bg); font-size:15px; line-height:1.5; overflow-x:hidden; }
h1,h2,h3,h4 { font-family:'Rubik',system-ui,sans-serif; color:var(--teal); margin:0 0 .5rem; line-height:1.2; }
a { color:var(--blue-end); text-decoration:none; } a:hover { text-decoration:underline; }
small { color:var(--g600); }

/* Layout */
.topbar { background:var(--teal); color:#fff; }
.topbar__in { max-width:1280px; margin:0 auto; padding:.7rem 1.5rem; display:flex; align-items:center; gap:1.5rem; }
.topbar__logo { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.topbar__logo:hover { text-decoration:none; }
.topbar__logo-img { height:26px; width:auto; display:block; }
.topbar__logo-sub { font-family:'Rubik'; font-weight:500; color:rgba(255,255,255,.65); font-size:.95rem; padding-left:.6rem; border-left:1px solid rgba(255,255,255,.25); }
.topbar nav { display:flex; gap:1.1rem; margin-left:.5rem; }
.topbar nav a { color:rgba(255,255,255,.8); font-weight:500; font-size:.93rem; }
.topbar nav a:hover, .topbar nav a.active { color:#fff; text-decoration:none; }
.topbar__right { margin-left:auto; display:flex; align-items:center; gap:1rem; }
.topbar__user { color:rgba(255,255,255,.7); font-size:.85rem; }
.wrap { max-width:1280px; margin:0 auto; padding:1.6rem 1.5rem; }

/* Auth */
.auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.auth__card { background:#fff; border-radius:14px; box-shadow:var(--shadow-lg); padding:2.2rem; width:100%; max-width:400px; }
.auth__logo { display:flex; align-items:center; gap:.7rem; margin-bottom:1.5rem; }
.auth__logo-img { height:34px; width:auto; display:block; }
.auth__logo-sub { font-family:'Rubik'; font-weight:500; font-size:1rem; color:var(--g600); padding-left:.7rem; border-left:1px solid var(--g200); }

/* Forms */
label { display:block; font-weight:500; font-size:.88rem; margin:.7rem 0 .3rem; }
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea {
  width:100%; padding:.6rem .7rem; border:1px solid var(--g200); border-radius:8px; font:inherit; color:var(--teal); background:#fff;
}
input:focus,select:focus,textarea:focus { outline:2px solid var(--blue); outline-offset:0; border-color:var(--blue); }
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1rem; border:none; border-radius:8px; font:inherit; font-weight:600; cursor:pointer; background:var(--teal); color:#fff; }
.btn:hover { background:var(--teal-2); text-decoration:none; }
.btn--accent { background:var(--yellow); color:var(--teal); } .btn--accent:hover { background:var(--yellow-hover); }
.btn--ghost { background:transparent; color:var(--teal); border:1px solid var(--g200); }
.btn--sm { padding:.35rem .6rem; font-size:.85rem; }
.btn--full { width:100%; justify-content:center; }
.btn--danger { background:var(--danger); color:#fff; }

/* Flash */
.flash { padding:.7rem 1rem; border-radius:8px; margin-bottom:1rem; font-size:.92rem; }
.flash--ok { background:#e6f9ec; color:var(--ok); } .flash--error { background:#fde8e6; color:var(--danger); }
.flash--info { background:#e7f8fa; color:var(--teal-2); }

/* Cards & tiles */
.card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.2rem; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:1.4rem; }
.tile { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.1rem 1.2rem; }
.tile__label { font-size:.8rem; color:var(--g600); font-weight:500; }
.tile__value { font-family:'Rubik'; font-weight:700; font-size:1.7rem; color:var(--teal); margin-top:.2rem; }
.tile__value.accent { color:var(--green); }

/* Table */
.toolbar { display:flex; flex-wrap:wrap; gap:.6rem; align-items:end; margin-bottom:1rem; }
.toolbar .grow { flex:1 1 200px; }
table { width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
th,td { text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--g100); font-size:.92rem; }
th { font-family:'Rubik'; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.4px; color:var(--g600); background:var(--g50); }
tr:hover td { background:var(--g50); }
td.value { font-family:'Rubik'; font-weight:600; }

/* Badges */
.badge { display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.74rem; font-weight:600; white-space:nowrap; }
.badge--portal { background:#e7f8fa; color:var(--teal-2); }
.prio-hoog { background:#fde8d6; color:#a85800; } .prio-midden{ background:#eef2f1; color:var(--g600);} .prio-laag{ background:#f0f0f0; color:var(--g400);}
.st-nieuw{background:#e7f8fa;color:var(--teal-2);} .st-opgepakt{background:#fff3cd;color:#856404;}
.st-in_gesprek{background:#e0ecff;color:#2451b8;} .st-gewonnen{background:#e6f9ec;color:var(--ok);} .st-verloren{background:#f0f0f0;color:var(--g400);}
/* Onboarding-statussen */
.onb-concept{background:#f0f0f0;color:var(--g600);} .onb-ingediend{background:#e7f8fa;color:var(--teal-2);}
.onb-in_controle{background:#fff3cd;color:#856404;} .onb-goedgekeurd{background:#e6f9ec;color:var(--ok);} .onb-afgewezen{background:#fde8e6;color:var(--danger);}

/* Lead detail */
.grid2 { display:grid; grid-template-columns:2fr 1fr; gap:1.2rem; align-items:start; }
.dl { display:grid; grid-template-columns:max-content 1fr; gap:.35rem 1rem; font-size:.92rem; }
.dl dt { color:var(--g600); } .dl dd { margin:0; font-weight:500; }
.events { list-style:none; padding:0; margin:0; }
.events li { padding:.6rem 0; border-bottom:1px solid var(--g100); font-size:.9rem; }
.events time { color:var(--g400); font-size:.8rem; }
.hl { background:linear-gradient(135deg,var(--green-light),#5cb86f); border-radius:var(--radius); padding:1rem 1.2rem; margin-bottom:1rem; }
.hl__label{font-size:.8rem;color:var(--teal);} .hl__amount{font-family:'Rubik';font-weight:700;font-size:1.9rem;color:var(--teal);}
.pager { display:flex; gap:.5rem; align-items:center; margin-top:1rem; justify-content:center; }
.muted { color:var(--g600); }
.row-actions { display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; }
.role-select { padding:.3rem .5rem; font-size:.85rem; border-radius:6px; min-width:120px; }
/* Tabellen horizontaal scrollbaar i.p.v. de pagina breken (mobiel) */
.table-scroll { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); }
.table-scroll table { box-shadow:none; }

/* Publieke onboarding-flow (token-gated, geen admin-nav) */
.onb-top { background:var(--teal); }
.onb-top__in { max-width:760px; margin:0 auto; padding:.8rem 1.5rem; display:flex; align-items:center; gap:.7rem; }
.onb-top__logo { height:28px; width:auto; display:block; }
.onb-top__sub { font-family:'Rubik'; font-weight:500; color:rgba(255,255,255,.7); font-size:.95rem; padding-left:.7rem; border-left:1px solid rgba(255,255,255,.25); }
.onb-wrap { max-width:760px; margin:0 auto; padding:1.6rem 1.5rem; }
.onb-foot { max-width:760px; margin:1rem auto 2rem; padding:0 1.5rem; color:var(--g400); font-size:.8rem; text-align:center; }
.onb-card { margin-top:1rem; }
.onb-card h1 { font-size:1.45rem; }
.onb-center { text-align:center; }
.onb-check-icon { width:52px; height:52px; margin:.4rem auto 1rem; border-radius:50%; background:#e6f9ec; color:var(--green); font-size:1.7rem; line-height:52px; }
.onb-note { margin-top:1rem; font-size:.85rem; }

/* Stepper — visueel gelijk aan netcongestie (.ec-progress): afgerond-vierkante
   genummerde markers, lichtmint te-doen, blauw-gradient actief, groen afgerond,
   verbindingslijn tussen de stappen. Labels behouden (in Rubik). */
.onb-steps { list-style:none; display:flex; gap:.4rem; padding:0; margin:0 0 .4rem; }
.onb-steps__item { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:.3rem; color:var(--g400); font-size:.8rem; text-align:center; }
/* Verbindingslijn: zit op bolletjes-hoogte (top:14px = halve marker) en loopt
   van het hart van deze marker naar het hart van de volgende. z-index onder de
   markers, zodat 'ie alleen in de tussenruimte zichtbaar is en niet over de labels. */
.onb-steps__item:not(:last-child)::after {
  content:""; position:absolute; top:14px; left:50%; width:calc(100% + .4rem);
  height:2px; transform:translateY(-50%); background:#DDF3D5; z-index:0;
}
.onb-steps__item.is-done:not(:last-child)::after { background:var(--green-deep); }
.onb-steps__num { position:relative; z-index:1; width:28px; height:28px; border-radius:6px; background:#DDF3D5; color:var(--teal); font-weight:700; line-height:28px; }
.onb-steps__item.is-active .onb-steps__num { background:linear-gradient(135deg,var(--blue-start),var(--blue-end)); color:#fff; box-shadow:0 0 0 2px rgba(15,181,186,.25); }
.onb-steps__item.is-active { color:var(--teal); font-weight:600; }
.onb-steps__item.is-done .onb-steps__num { background:var(--green-deep); color:#fff; }
.onb-steps__label { font-family:'Rubik',system-ui,sans-serif; }

/* Repeater-locaties */
.onb-loc { position:relative; border:1px solid var(--g200); border-radius:var(--radius); padding:1rem 1.1rem 1.1rem; margin:0 0 1rem; }
.onb-loc legend { font-family:'Rubik'; font-weight:600; padding:0 .4rem; }
.onb-loc__del { position:absolute; top:.7rem; right:.8rem; }
.onb-grid { display:grid; grid-template-columns:1fr 1fr; gap:.3rem 1rem; }
.onb-grid label { margin-top:.3rem; }
.onb-check { display:flex; align-items:center; gap:.5rem; font-weight:500; }
.onb-check input { width:auto; }
.onb-err { display:block; color:var(--danger); font-size:.8rem; margin-top:.2rem; }

/* Machtigingen */
.onb-consent { display:flex; gap:.7rem; align-items:flex-start; background:var(--g50); border:1px solid var(--g100); border-radius:8px; padding:.8rem; margin:.6rem 0; font-weight:400; font-size:.92rem; }
.onb-consent input { width:auto; margin-top:.2rem; flex:0 0 auto; }
.onb-fee { background:var(--bg); border-left:4px solid var(--teal); border-radius:8px; padding:.8rem 1rem; margin:1rem 0; }

.onb-actions { margin-top:1.4rem; }
.onb-actions--split { display:flex; justify-content:space-between; gap:1rem; align-items:center; }

@media (max-width:820px){
  .grid2{ grid-template-columns:1fr; }
  .onb-grid{ grid-template-columns:1fr; }
  .onb-steps__label{ display:none; }
  /* Nav blijft zichtbaar: topbar wrapt, nav onder het logo, scrollbaar */
  .topbar__in{ flex-wrap:wrap; gap:.5rem 1rem; padding:.6rem 1rem; }
  .topbar nav{ order:3; width:100%; margin:0; gap:1.3rem; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .topbar__right{ margin-left:auto; }
  .wrap{ padding:1.2rem 1rem; }
  /* Filters/zoek stapelen */
  .toolbar{ flex-direction:column; align-items:stretch; }
  .toolbar > div{ width:100%; }
  /* Bredere tabellen scrollen binnen hun container */
  th,td{ white-space:nowrap; }
}

/* --- Teamleader-validatie: runs & bevindingen ---------------------------- */
.table { width:100%; border-collapse:collapse; font-size:.92rem; }
.table th { text-align:left; font-family:'Rubik'; font-weight:600; font-size:.8rem; color:var(--g600); text-transform:uppercase; letter-spacing:.03em; padding:.5rem .6rem; border-bottom:2px solid var(--g200); }
.table td { padding:.55rem .6rem; border-bottom:1px solid var(--g100); vertical-align:top; }
.table tbody tr:hover { background:var(--g50); }

.badge--nieuw { background:#e7f8fa; color:var(--teal-2); }
.badge--bezig { background:#fff4d6; color:#8a6100; }
.badge--klaar { background:#e6f9ec; color:var(--ok); }
.badge--fout  { background:#fde8e6; color:var(--danger); }
.badge--sev-hoog   { background:#fde8e6; color:var(--danger); }
.badge--sev-middel { background:#fff4d6; color:#8a6100; }
.badge--sev-laag   { background:var(--g100); color:var(--g600); }
.btn-link { background:none; border:none; padding:0; font:inherit; color:var(--blue-end); cursor:pointer; }
.btn-link:hover { text-decoration:underline; }