/**
 * SunMonitor — style.css (LEGACY)
 * ═══════════════════════════════════════════════════════════════════════════
 * Na Fase 4 (CSS componentisering) bevat dit bestand nog ~3970 regels van:
 *   - Globale base (login, body layout, tabs, tabellen, grid2)
 *   - Site mini-cards, alerts, toast, loading, cookie banner
 *   - Page-specific overrides (engineerScreen + customerScreen) die nog
 *     niet naar pages/*.css zijn verhuisd
 *   - Print rapport, mobile hamburger menu
 *
 * Wat WEL verplaatst is (Fase 4.0-4.6, ~1700 regels uitgehaald):
 *   - css/components/badge|empty-state|form|button|modal|kpi|card.css
 *   - css/components/topbar|sidebar-customer|site-card|chart-wrap|inverter.css
 *   - css/pages/admin-shell.css           (admin sidebar hoofdblok)
 *   - css/pages/customer-overview.css     (cust-greeting + cust-overview tab)
 *
 * Cascade-volgorde (zie index.html):
 *   tokens.css → components.css (utilities) →
 *   pages/admin-shell.css → style.css → refresh.css →
 *   components/*.css → pages/customer-overview.css → diagnostics.css
 *
 * Volgende stappen om style.css verder te krimpen (separate sessies):
 *   - pages/login.css                 (~80 r — login-left/right/ll-* + responsive)
 *   - pages/admin-dashboard.css       (#engineerScreen #eng-dash + .kpi overrides)
 *   - pages/admin-tickets.css         (#engineerScreen #eng-tickets)
 *   - pages/admin-analyse.css
 *   - pages/admin-settings.css
 *   - pages/customer-tickets.css
 *   - pages/customer-report.css       (.cust-report-*, .rep-* customer overrides)
 * Eindstand-doel: style.css uiteindelijk leeg / verwijderd.
 * ═══════════════════════════════════════════════════════════════════════════
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@300;400;500&family=Syne:wght@600;700;800&display=swap');
:root {
  /* ═══════════════════════════════════════════════════════════════════════
   * RESPONSIVE BREAKPOINTS — referentie (custom properties werken NIET in
   * @media queries, alleen in property-values; deze vars zijn voor JS-toegang
   * via getComputedStyle en als documentatie van de bedoelde breakpoint-set).
   *
   * Hoofd-set (gebruik deze 4 in nieuwe code):
   *   --bp-sm: 480px   smartphone
   *   --bp-md: 768px   tablet portrait / kleine laptop
   *   --bp-lg: 1100px  laptop / kleine desktop
   *   --bp-xl: 1400px  full desktop
   *
   * Bestaande "wees"-breakpoints (520/540/560/600/640/720/900/980/1280) zijn
   * historisch — niet aanpassen zonder visuele regressietest op echte
   * schermen. Bij nieuw werk: hou je aan de hoofd-set.
   * ════════════════════════════════════════════════════════════════════ */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1100px;
  --bp-xl: 1400px;

  /* Kleuren — iets warmer wit, scherpere contrasten */
  --bg:#f8f7f4;--bg2:#ffffff;--bg3:#f0ede7;--border:#e4dfd6;
  --ink:#18160f;--ink2:#4a4540;--ink3:#a09890;
  --sun:#d97706;--sun2:#f59e0b;--sun3:#fffbeb;
  --green:#059669;--green2:#10b981;
  --red:#dc2626;--sky:#0369a1;--sky2:#0ea5e9;
  --mono:'DM Mono',monospace;--sans:'Inter',sans-serif;
  /* Logo kleuren */
  --logo-geel:#f5c842;--logo-coral:#f0814a;
  /* Grotere radius, zachtere shadows */
  --r:12px;--r-lg:16px;
  --shadow:0 1px 3px rgba(24,22,15,.06),0 4px 16px rgba(24,22,15,.08);
  --shadow-lg:0 4px 8px rgba(24,22,15,.06),0 12px 32px rgba(24,22,15,.10);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;font-size:10px;}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:10px;height:100%;margin:0;}
button,input,select,textarea{font-size:10px;}
.screen{display:none;flex-direction:column;}
.screen.active{display:flex;flex-direction:column;min-height:100dvh;overflow:hidden;}
#loginScreen{flex-direction:row!important;}
@media(max-width:768px){
  #loginScreen{flex-direction:column!important;}
}
.login-left{flex:1;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:56px;position:relative;overflow:hidden;}
.login-left::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 80%,rgba(217,119,6,.22) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(3,105,161,.14) 0%,transparent 50%);}
.ll{position:relative;z-index:1;}
.ll-logo{display:flex;align-items:center;gap:14px;margin-bottom:64px;}
.ll-brand{font-size:24px;font-weight:800;background:linear-gradient(90deg,var(--logo-geel),var(--logo-coral));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ll-tagline{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.3);letter-spacing:3px;}
.ll-title{font-size:40px;font-weight:800;line-height:1.15;margin-bottom:14px;}
.ll-title span{color:var(--sun2);}
.ll-sub{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.4);line-height:1.9;}
.ll-stats{display:flex;gap:28px;margin-top:52px;}
.ll-sv{font-size:30px;font-weight:800;color:var(--sun2);}
.ll-sl{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.3);letter-spacing:1px;}
.ll-foot{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.2);letter-spacing:1px;}
.login-right{width:min(500px,100%);background:var(--bg2);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px;}
.login-card{width:100%;max-width:380px;}
.login-h{font-size:28px;font-weight:800;margin-bottom:4px;}
.login-s{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-bottom:32px;}

/* Forms, buttons, topbar verplaatst — zie css/components/ */
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:none;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── BODY & LAYOUT ── */
.body{flex:1;padding:28px 32px;overflow-y:auto;min-height:0;height:0;}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:24px;}
.tabs{scrollbar-width:none;-ms-overflow-style:none;}
.tabs::-webkit-scrollbar{display:none;width:0;height:0;}
.tab{padding:10px 18px;border:none;background:none;cursor:pointer;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink3);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.2s;}
.tab.on{color:var(--sun);border-bottom-color:var(--sun);}
.tab-pane{display:none;margin:0;padding:0;}
.tab-pane.on{display:block;}

/* KPI + Cards verplaatst — zie css/components/kpi.css + card.css */
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;}

/* ── TABELLEN ── */
.tbl{width:100%;border-collapse:collapse;font-size:12px;}
.tbl th{background:var(--bg3);padding:10px 16px;text-align:left;font-family:var(--mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--border);}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--bg3);color:var(--ink2);}
.tbl td strong{color:var(--ink);}
.tbl tr:hover td{background:var(--bg);}
.tbl tr:last-child td{border:none;}

/* Badges + modals + form-section-lbl verplaatst — zie css/components/ */
/* Leaflet z-index forceren onder modals (page-overschrijdend) */
.leaflet-pane,.leaflet-top,.leaflet-bottom,.leaflet-control{z-index:400 !important;}
.leaflet-tile-pane{z-index:200 !important;}

.inverters-list{display:grid;gap:12px;}
.inverter-card{border:1px solid var(--border);background:var(--bg1);border-radius:12px;padding:12px;}
.inverter-card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.inverter-name{font-weight:700;}
.inverter-actions .btn-sm{padding:6px 10px;}
.inverter-card-bd{display:grid;gap:4px;}
.inverter-stat{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink2);}
.inverter-lbl{color:var(--ink3);}
.inverter-val{font-weight:600;color:var(--ink);}

/* Cookie banner */
.cookie-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:1200;background:var(--bg2);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;}
.cookie-banner-inner{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;}
.cookie-text{font-size:13px;color:var(--ink2);line-height:1.45;}
.cookie-text strong{display:block;color:var(--ink);margin-bottom:2px;}
.cookie-actions{display:flex;gap:8px;flex-shrink:0;}
.cookie-link{background:none;border:none;color:var(--sun);font-weight:600;cursor:pointer;padding:0;}
.cookie-link:hover{text-decoration:underline;}

/* Cookie policy screen */
.policy-wrap{min-height:100vh;background:radial-gradient(circle at 15% 10%,#fff7e7,transparent 60%),linear-gradient(180deg,#f7f4ef,#f4efe7);display:flex;align-items:center;justify-content:center;padding:28px;}
.policy-card{max-width:860px;width:100%;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.14);}
.policy-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border);}
.policy-title{font-size:20px;font-weight:800;color:var(--ink);}
.policy-sub{font-size:12px;color:var(--ink3);}
.policy-body{padding:18px 22px;color:var(--ink2);font-size:14px;line-height:1.6;}
.policy-body h3{font-size:14px;margin:16px 0 6px;color:var(--ink);}
.policy-body ul{margin:6px 0 0 18px;}
/* ── ALERTS ── */
.alert{padding:11px 15px;border-radius:var(--r);margin-bottom:14px;font-size:12px;display:flex;gap:8px;align-items:flex-start;}
/* ── KLANT KPI ── */
/* ── MINI CHARTS ── */
/* ── TOAST ── */
.toast{position:fixed;bottom:28px;right:28px;background:var(--ink);color:#fff;padding:13px 20px;border-radius:var(--r);font-size:13px;font-weight:700;box-shadow:var(--shadow-lg);z-index:1301;transform:translateY(80px);opacity:0;transition:.3s;}
.toast.show{transform:translateY(0);opacity:1;}
.toast.ok{border-left:4px solid var(--green2);}
.toast.er{border-left:4px solid var(--red);}
/* ── LOADING ── */
.loading-ov{position:fixed;inset:0;background:rgba(248,247,244,.85);z-index:1200;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;backdrop-filter:blur(2px);}
.loading-ov.show{display:flex;}
.ld-spin{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--sun);border-radius:50%;animation:spin .8s linear infinite;}
.ld-txt{font-family:var(--mono);font-size:12px;color:var(--ink3);}
/* ── SITE MINI CARDS ── */
.site-mini-card{border-bottom:1px solid var(--bg3);padding:13px 16px;transition:background .15s;display:flex;align-items:center;gap:16px;}
.site-mini-card:hover{background:var(--bg);}
.site-mini-card:last-child{border-bottom:none;}
.site-mini-hd{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.site-mini-name{font-size:12px;font-weight:700;}
.site-mini-meta{font-family:var(--mono);font-size:10px;color:var(--ink3);margin-top:2px;line-height:1.35;}
.site-mini-stats{display:flex;gap:14px;align-items:center;flex-shrink:0;}
.site-mini-stat{text-align:center;min-width:46px;}
.site-mini-sv{font-size:16px;font-weight:800;color:var(--sun);letter-spacing:-.02em;}
.site-mini-sl{font-family:var(--mono);font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:.9px;margin-top:1px;}
.site-mini-chart{height:48px;width:152px!important;flex-shrink:0;display:block;}
.site-mini-sv.temp-ok{color:var(--ink2);}
.site-mini-sv.temp-warm{color:var(--red);}
.site-mini-sv.temp-unknown{color:var(--ink3);}
/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile first (iPhone & Android)
   ══════════════════════════════════════════════════════════ */

/* Tablet: 768px en kleiner */
@media(max-width:768px){
  /* Login */
  .login-left{display:none;}
  .login-right{width:100%;padding:40px 28px;}
  .login-card{max-width:100%;}

  /* Topbar */
  .topbar{padding:0 16px;gap:8px;height:52px;}
  .tb-nav{display:none;}
  .tb-brand{font-size:14px;}
  .tb-badge{display:none;}
  .tb-user span{display:none;}
  .btn-out{font-size:10px;padding:5px 10px;}

  /* Body padding */
  .body{padding:16px 14px;}

  /* KPI rijen */
  /* .kpi* @768 → verplaatst naar css/components/kpi.css */

  /* Grids */
  .grid2{grid-template-columns:1fr;}

  /* Tabbladen */
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;white-space:nowrap;}
  .tab{flex-shrink:0;}

  /* Tabel scroll */
  /* .card-bd @768 scroll → verplaatst naar css/components/card.css */

  /* Modals @768px → verplaatst naar css/components/modal.css (Fase 4.2) */

  /* Toast */
  .toast{right:12px;bottom:12px;left:12px;right:12px;text-align:center;}

  /* Rapport */
  .rep-kpi-row{grid-template-columns:1fr 1fr!important;}
  .rep-two-col,.rep-verlies-row,.rep-maint-grid{grid-template-columns:1fr!important;}
  .rep-controls .rep-ctrl-row{flex-direction:column;align-items:stretch;}
  .rep-select{min-width:100%;}
  .rep-body{padding:20px 16px;}
  .rep-header{padding:20px 16px 16px;}
  .rep-footer{padding:12px 16px;flex-direction:column;gap:4px;text-align:center;}

  /* Logboek */
  .log-stats{grid-template-columns:repeat(3,1fr);}
  .log-filter-bar{flex-direction:column;align-items:stretch;}
  .log-filter-sel{min-width:100%;}
}

/* Mobiel: 480px en kleiner */
@media(max-width:480px){
  /* Login */
  .login-right{padding:28px 20px;}
  .login-h{font-size:22px;}


  /* Topbar: hamburger menu stijl navigatie */
  .topbar{height:48px;padding:0 12px;}
  .tb-logo svg{width:26px;height:26px;}
  .tb-brand{font-size:13px;}

  /* Body */
  .body{padding:12px 10px;}

  /* .kpi* @480 → verplaatst naar css/components/kpi.css */

  /* Dashboard grid: gestapeld */

  /* Cards */
  /* .card-* @480 → verplaatst naar css/components/card.css */

  /* Tabbladen scroll */
  .tab{padding:8px 12px;font-size:11px;}

  /* Tabellen horizontaal scrollen */
  .tbl{font-size:11px;}
  .tbl th,.tbl td{padding:8px 10px;}

  /* Rapport */
  .rep-kpi-row{grid-template-columns:1fr 1fr!important;}
  .rep-kpi-val{font-size:18px!important;}
  .rep-meta-box{text-align:left;}
  .rep-body{padding:16px 12px;}

  /* Logboek */
  .log-stats{grid-template-columns:repeat(2,1fr);}
  .log-stat-val{font-size:20px;}


  /* Modal @480px → verplaatst naar css/components/modal.css (Fase 4.2) */

  /* Knoppen */
  .btn-sm{padding:8px 12px;font-size:11px;}
  .btn-login{padding:13px;}
}

/* ── Mobiel hamburger menu ── */
.mob-menu-btn{
  display:none;
  background:none;
  border:none;
  color:rgba(255,255,255,.7);
  font-size:22px;
  cursor:pointer;
  padding:8px 12px;
  margin-right:-4px;
  min-width:44px;
  min-height:44px;
  border-radius:6px;
  line-height:1;
  transition:.15s;
  flex-shrink:0;
}
.mob-menu-btn:hover{color:#fff;background:rgba(255,255,255,.1);}
.mob-nav-dropdown{
  display:none;
  position:fixed;
  top:58px;
  left:0;right:0;
  background:var(--ink);
  z-index:999;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  max-height:calc(100dvh - 58px);
  overflow-y:auto;
}
.mob-nav-dropdown.open{display:block;}
@media(max-width:768px){
  .mob-nav-dropdown{top:52px;}
}
@media(max-width:480px){
  .mob-nav-dropdown{top:48px;}
}
.mob-nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,.7);
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:.15s;
}
.mob-nav-item:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
}
.mob-nav-item .cust-item-ico{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
}
.mob-nav-item .cust-item-ico i{ font-size:17px; line-height:1; }
.mob-nav-divider{
  height:1px;
  background:rgba(255,255,255,.1);
  margin:4px 0;
}
.mob-nav-portfolio{
  background:rgba(217,119,6,.12);
  border-left:3px solid var(--color-brand-active,#d97706);
  color:#fff;
  font-weight:700;
}
.mob-nav-portfolio:hover{
  background:rgba(217,119,6,.20);
}
.mob-nav-portfolio-badge{
  margin-left:auto;
  background:var(--color-brand-active,#d97706);
  color:#fff;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  font-weight:700;
}
.mob-nav-item.mob-nav-logout{
  color:rgba(220,38,38,.85);
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:4px;
}
@media(max-width:768px){
  .mob-menu-btn{display:block;}
  .btn-logout-desk{display:none!important;}
  .engineerScreen{position:relative;}
  .customerScreen{position:relative;}
}

/* ── Fix: voorkomen horizontale scroll op body ── */
html,body{max-width:100%;overflow-x:hidden;}

/* ── Fix: tap highlight uitschakelen op mobiel ── */
*{-webkit-tap-highlight-color:transparent;}

/* Fix iOS Safari support */
@supports (-webkit-touch-callout: none) {
  .screen.active{min-height: -webkit-fill-available;}
}

/* ══════════════════════════════════════════════════════════
   RAPPORTAGE MODULE
   ══════════════════════════════════════════════════════════ */

/* ── Controls balk ────────────────────────────────────────── */
.rep-controls {
  background: var(--bg2);
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.rep-ctrl-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.rep-field { display: flex; flex-direction: column; gap: 6px; }
.rep-field-btn { justify-content: flex-end; }
.rep-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink3);
}
.rep-select {
  font-family: var(--sans);
  font-size: 13px;
  padding: 8px 12px;
  border: 1.5px solid #E2E8F0;
  border-radius: 7px;
  background: var(--bg2);
  color: var(--ink);
  cursor: pointer;
  min-width: 180px;
  outline: none;
}
.rep-select:focus { border-color: var(--sun); }
.rep-gen-btn {
  padding: 9px 20px;
  font-size: 13px;
  white-space: nowrap;
}

/* ── Loading / leeg ───────────────────────────────────────── */
.rep-loading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 40px;
  color: var(--ink3);
  font-size: 13px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.rep-empty {
  padding: 48px;
  text-align: center;
  color: var(--ink3);
  font-size: 13px;
}

/* ══════════════════════════════════════════════════════════
   RAPPORT PAGINA (binnen SunMonitor + print)
   ══════════════════════════════════════════════════════════ */
.rep-page {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  overflow: hidden;
  font-family: 'DM Sans', var(--sans);
}

/* ── Print balk ──────────────────────────────────────────── */
.rep-print-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: var(--bg2);
  border-bottom: 1px solid #E2E8F0;
  font-size: 13px;
  color: var(--ink2);
}
.rep-print-btn { padding: 7px 16px; font-size: 12px; }
.rep-print-info { font-size: 13px; color: var(--ink2); }

/* ── Header ──────────────────────────────────────────────── */
.rep-header {
  background: var(--ink);
  color: white;
  padding: 36px 44px 30px;
  position: relative;
  overflow: hidden;
}
.rep-header::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(245,166,35,.22) 0%, transparent 70%);
  border-radius: 50%;
}
.rep-header::after {
  content: '☀';
  position: absolute;
  right: 44px; top: 24px;
  font-size: 64px;
  opacity: .08;
}
.rep-company {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--logo-geel, #f5c842);
  font-weight: 600;
  letter-spacing: .4px;
  margin-bottom: 4px;
}
.rep-site-sub {
  font-size: 12px;
  color: rgba(255,255,255,.5);
}
.rep-meta-box {
  text-align: right;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255,255,255,.4);
  line-height: 1.9;
}
.rep-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: white;
}

/* ══════════════════════════════════════════════════════════
   RAPPORT PAGINA — CONCEPT STIJL
   ══════════════════════════════════════════════════════════ */

/* ── Body ── */
.rep-body { padding: 36px 44px; }

/* ── Sectie ── */
.rep-section { margin-bottom: 36px; }
.rep-sec-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #E2E8F0;
}
.rep-sec-num {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: #0D1117;
  background: var(--logo-geel, #f5c842);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .5px;
}
.rep-sec-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

/* ── Header zonnecirkel ── */
.rep-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.rep-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rep-sun-orb {
  position: absolute;
  right: -40px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #F5A623 0%, #F5C842 30%, transparent 70%);
  opacity: .35;
  pointer-events: none;
}

/* ── KPI rij (horizontaal, concept-stijl) ── */
.rep-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.rep-kpi-card {
  background: var(--bg2, #F7F9FC);
  border-radius: 10px;
  padding: 14px 14px;
  border: 1.5px solid #E2E8F0;
  min-width: 0;
  overflow: hidden;
}
.rep-kpi-card.highlight {
  background: #0D1117;
  border-color: #0D1117;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.rep-kpi-card.warn { background: #FFF8EE; border-color: #F5A62355; }
.rep-kpi-card.good { background: #F0FDF6; border-color: #2ECC7155; }

.rep-kpi-lbl {
  font-family: var(--mono);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ink3);
  margin-bottom: 5px;
  line-height: 1.3;
}
.rep-kpi-card.highlight .rep-kpi-lbl { color: rgba(255,255,255,.45); }

.rep-kpi-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 4px;
}
.rep-kpi-val.pr-good { color: #1A7A43; }
.rep-kpi-card.highlight .rep-kpi-val { color: var(--logo-geel, #f5c842); }
.rep-kpi-card.good .rep-kpi-val      { color: #1A7A43; }
.rep-kpi-card.warn .rep-kpi-val      { color: #C07000; }
.rep-kpi-val.pos { color: #1A7A43; }
.rep-kpi-val.neg { color: #E74C3C; }

.rep-kpi-unit {
  font-size: 11px;
  color: var(--ink3);
}
.rep-kpi-card.highlight .rep-kpi-unit { color: rgba(255,255,255,.35); }

@media print {


  /* ── Grid layouts ── */
  .rep-kpi-row    { grid-template-columns: repeat(5, 1fr) !important; gap: 6px !important; }
  .rep-kpi-lbl    { font-size: 7.5px !important; letter-spacing: .3px !important; }
  .rep-kpi-val    { font-size: 20px !important; }
  .rep-kpi-unit   { font-size: 10px !important; }
  .rep-kpi-card   { padding: 12px 10px !important; }
  .rep-two-col    { grid-template-columns: 1fr 1fr !important; }
  .rep-maint-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── KPI kaarten print kleuren ── */
  .rep-kpi-card.highlight {
    background-color: #0D1117 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .rep-kpi-card.good { background: #F0FDF6 !important; }
  .rep-kpi-card.warn { background: #FFF8EE !important; }

  /* ── Zonnecirkel verbergen bij print ── */
  .rep-sun-orb { display: none !important; }

  /* ── Staafdiagrammen: vaste hoogte bij print ── */
  .rep-bar-chart,
  .rep-bar-chart-year {
    overflow: visible !important;
    height: 90px !important;
    display: flex !important;
    align-items: flex-end !important;
  }
  .rep-bar-col,
  .rep-bar-col-year {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 90px !important;
  }
  .rep-bar {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ── Pagina-einden voorkomen binnen secties ── */
  .rep-section  { page-break-inside: avoid; break-inside: avoid; }
  .rep-header   { page-break-after: avoid;  break-after: avoid; }
  .rep-footer   { page-break-before: avoid; break-before: avoid; }

  /* ── Geen lege extra pagina's ── */
  .rep-page { page-break-after: avoid; }

  /* ── Opmerkingen print div ── */
}

/* ══════════════════════════════════════════════════════════
   RAPPORTAGE SUBTABS
   ══════════════════════════════════════════════════════════ */
.rep-subtab-bar {
  display: flex;
  gap: 4px;
  padding: 16px 0 0;
  border-bottom: 2px solid #E2E8F0;
  margin-bottom: 20px;
}
.rep-stab {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 7px 7px 0 0;
  cursor: pointer;
  color: var(--ink3);
  border: 1.5px solid transparent;
  border-bottom: none;
  margin-bottom: -2px;
  transition: color .15s, background .15s;
  letter-spacing: .2px;
}
.rep-stab:hover { color: var(--ink); background: #F7F9FC; }
.rep-stab.on {
  color: var(--ink);
  background: var(--white, #fff);
  border-color: #E2E8F0;
  border-bottom-color: var(--white, #fff);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════
   LOGBOEK
   ══════════════════════════════════════════════════════════ */
.rep-log-wrap { padding: 4px 0; }

/* Statistieken strip */
.log-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.log-stat {
  background: var(--bg2, #F7F9FC);
  border: 1.5px solid #E2E8F0;
  border-radius: 9px;
  padding: 14px 12px;
  text-align: center;
}
.log-stat-val {
  font-family: var(--syne, 'Syne', sans-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}
.log-stat-lbl {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink3);
}

/* Filter balk */
.log-filter-bar {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--bg2, #F7F9FC);
  border: 1px solid #E2E8F0;
  border-radius: 9px;
}
.log-filter-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.log-filter-lbl {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink3);
}
.log-filter-sel {
  font-family: var(--sans);
  font-size: 12px;
  padding: 7px 10px;
  border: 1.5px solid #E2E8F0;
  border-radius: 6px;
  background: var(--white, #fff);
  color: var(--ink);
  min-width: 160px;
  outline: none;
}
.log-filter-sel:focus { border-color: var(--sun, #F5A623); }

/* Tabel */
.log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.log-table th {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink3);
  padding: 8px 12px;
  background: var(--bg2, #F7F9FC);
  border-bottom: 2px solid #E2E8F0;
  text-align: left;
  white-space: nowrap;
}
.log-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #E2E8F0;
  vertical-align: middle;
  color: var(--ink2);
}
.log-table tr:last-child td { border-bottom: none; }
.log-table tr:hover td { background: var(--bg2, #F7F9FC); }

/* Kolom stijlen */
.log-date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
}
.log-time {
  font-size: 10px;
  color: var(--ink3);
  display: block;
  margin-top: 1px;
}
.log-site  { font-weight: 500; color: var(--ink); }
.log-period {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink2);
}
.log-user-name  { font-weight: 500; font-size: 13px; color: var(--ink); }
.log-user-email { font-size: 11px; color: var(--ink3); margin-top: 1px; }

/* Actie badges */
.log-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
  letter-spacing: .3px;
}
.log-badge-gen   { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.log-badge-print { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.log-badge-email { background: #FFF7ED; color: #C2410C; border: 1px solid #FED7AA; }

/* Verwijder knop */
.log-del-btn {
  background: none;
  border: none;
  color: var(--ink3);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 5px;
  transition: background .15s, color .15s;
  line-height: 1;
}
.log-del-btn:hover { background: #FEE2E2; color: #991B1B; }

/* Regel teller */
.log-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink3);
  text-align: right;
  padding: 10px 4px 0;
}

/* Klant-only: installatie als readonly tekst */
.rep-site-readonly {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 12px;
  background: var(--bg2, #F7F9FC);
  border: 1.5px solid var(--line, #E2E8F0);
  border-radius: 7px;
  min-width: 200px;
  line-height: 1.4;
}
.rep-site-kwp {
  font-weight: 400;
  color: var(--ink3);
  font-size: 12px;
}

/* ══════════════════════════════════════════════════════════
   UTILITY CLASSES — vervangt inline stijlen in HTML
   ══════════════════════════════════════════════════════════ */

/* Layout helpers */
/* .card-mb → verplaatst naar css/components/card.css */
.grid-mb{margin-bottom:18px;}
/* .card-bd-chart → verplaatst naar css/components/card.css */
#engDayCard .card-bd-chart{min-height:260px;}
/* .card-bd-flex/flush/tickets + .card-hd-right → verplaatst naar css/components/card.css */
.day-toolbar{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin:2px 0 4px;}
.day-hd-left{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;}
.day-toggle{display:flex;gap:4px;align-items:center;}
.day-btn{font-size:9px;padding:2px 6px;line-height:1.1;}
.day-reset{font-size:9px;padding:2px 6px;line-height:1.1;margin-left:8px;}
.day-hint{font-family:var(--mono);font-size:8px;color:var(--ink3);margin-left:6px;opacity:.8;}
.day-kpi{display:flex;gap:10px;flex-wrap:wrap;margin:3px 0 4px;font-family:var(--mono);font-size:9px;color:var(--ink3,#9a9590);}
.day-label{font-weight:600;}


/* Chart wrappers */
.chart-wrap-160{height:160px;position:relative;}

/* Tab headers */
.tab-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.tab-title{font-size:18px;font-weight:400;}
.tab-sub{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-top:2px;}
.history-header{margin-bottom:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.site-btn-row{margin-bottom:14px;display:flex;gap:8px;flex-wrap:wrap;}

/* Map */
.map-container{height:320px;border-radius:0 0 var(--r) var(--r);}

/* Buttons */
/* .btn-icon + .btn-nav → verplaatst naar css/components/button.css (Fase 4.1) */

/* Typography helpers */
.txt-mono-sm{font-family:var(--mono);font-size:10px;color:var(--ink3);}
/* .empty-state + .tbl-empty verplaatst naar css/components/empty-state.css (Fase 4) */
/* .chart-empty + .chart-hint + .chart-sub-label → verplaatst naar css/components/chart-wrap.css (Fase 4.5) */
.spinner-txt{font-family:var(--mono);font-size:10px;color:var(--ink3);}

/* Select small */
.sel-sm{font-family:var(--mono);font-size:11px;padding:3px 8px;border:1px solid var(--border);border-radius:5px;}

/* Day nav */
.day-nav{display:flex;align-items:center;gap:8px;}

/* Chart legend */
.chart-legend-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-family:var(--mono);font-size:9px;color:var(--ink3);align-items:center;}
.chart-legend-bar{padding:8px 16px 12px;display:flex;gap:16px;font-family:var(--mono);font-size:10px;}
.legend-item{display:flex;align-items:center;gap:3px;}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:2px;flex-shrink:0;}
.legend-dash{display:inline-block;width:14px;border-top:2px dashed #2563a8;}
.legend-today{color:#e8820c;font-weight:700;}


/* Klant portal (legacy globale rules opgeschoond; actieve stijlen staan onder #customerScreen) */
/* .tb-site-label + .tb-user-name → verplaatst naar css/components/topbar.css (Fase 4.4) */

/* Rapport klant */
.rep-lbl{font-family:var(--mono);font-size:10px;color:var(--ink3);margin-bottom:4px;}
.rep-status{margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--ink3);}
.report-controls{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.card-desc{margin-bottom:14px;}
.cust-report-wrap{margin-top:18px;}
.cust-report-actions{margin-top:14px;display:flex;justify-content:flex-end;}
.cust-report-wrap .rep-page{max-width:100%;border:1px solid var(--border);box-shadow:none;}
.cust-report-wrap .rep-print-bar,
.cust-report-wrap .rep-admin-only,
.cust-report-wrap .rep-section.no-print{display:none!important;}

/* Form helpers */
/* .form-row + .form-hint + .form-lbl-note → verplaatst naar css/components/form.css (Fase 4.1) */

/* Responsive aanpassingen voor nieuwe utility classes */
@media(max-width:768px){
  .tab-title{font-size:16px;}
  .form-row{flex-direction:column;}
  .report-controls{flex-direction:column;align-items:stretch;}
  .chart-legend-row{gap:6px;}
  .day-nav .btn-nav{padding:4px 10px;}
}
@media(max-width:480px){
  .tab-header{flex-direction:column;align-items:flex-start;gap:10px;}
  .history-header{flex-direction:column;align-items:flex-start;}
  .chart-legend-bar{flex-wrap:wrap;gap:8px;}
}

/* ══════════════════════════════════════════════════════════
   RESTERENDE VERBETERPUNTEN
   ══════════════════════════════════════════════════════════ */

/* Tabel scroll hint — schaduw rechts als er meer content is */
.scroll-x{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right, var(--bg2) 30%, rgba(255,255,255,0)) left/40px 100% no-repeat,
    linear-gradient(to left,  var(--bg2) 30%, rgba(255,255,255,0)) right/40px 100% no-repeat,
    linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,0)) left/20px 100% no-repeat,
    linear-gradient(to left,  rgba(0,0,0,.08), rgba(0,0,0,0)) right/20px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* Chart max-height op mobiel — voorkomt uitlopen */
@media(max-width:768px){
  canvas{max-height:260px;}
  /* Uitzondering: site mini-charts mogen klein blijven */
  .site-mini-chart{max-height:60px!important;}
}
@media(max-width:480px){
  canvas{max-height:200px;}
  .site-mini-chart{max-height:60px!important;}
}

/* Tablet engineer dashboard (768-1024px) — 2 kolommen ipv auto-fit chaos */
@media(min-width:769px) and (max-width:1024px){
  /* .kpi-row @1024 → verplaatst naar css/components/kpi.css */
}

/* Login statistieken — verberg API calls op mobiel via CSS */
@media(max-width:768px){
  .ll-stats{display:none;}
}

/* iOS input zoom fix — minder agressief, alleen mobiel */
@media(max-width:768px){
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea{font-size:16px!important;}
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD — Sites volledig breed + paginering
   ══════════════════════════════════════════════════════════ */

/* 2-koloms grid voor vermogen + storingen */
.dashboard-grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}

/* Site kaart aanvulling */
.site-mini-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;}
.site-mini-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.site-mini-meta{font-family:var(--mono);font-size:10px;color:var(--ink3);margin-top:2px;}
.site-mini-stat{text-align:center;flex-shrink:0;}
.site-mini-sv{font-size:14px;font-weight:700;font-family:var(--mono);}
.site-mini-sl{font-family:var(--mono);font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:.5px;margin-top:1px;}

/* Paginering balk */
.site-pager{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 18px;border-top:1px solid var(--border);}

/* Responsive site kaart */
@media(max-width:768px){
  .dashboard-grid-2col{grid-template-columns:1fr;}
  .site-mini-card{flex-wrap:wrap;gap:10px;padding:12px 14px;}
  .site-mini-chart{display:none!important;}
  .site-mini-stats{gap:12px;}
}

/* ══════════════════════════════════════════════════════════
   PERFORMANCE KAART — PR & Expected Production
   ══════════════════════════════════════════════════════════ */

.perf-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:center;
  padding:20px 24px 16px;
  gap:0;
}
.perf-block{text-align:center;padding:0 12px;}
.perf-label{font-family:var(--mono);font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;}
.perf-value{font-size:22px;font-weight:700;font-family:var(--mono);color:var(--ink);}
.perf-value.good{color:var(--green);}
.perf-value.warn{color:#d4a017;}
.perf-value.bad {color:var(--red);}
.perf-sub{font-family:var(--mono);font-size:10px;color:var(--ink3);margin-top:3px;}
.perf-divider{width:1px;height:48px;background:var(--border);flex-shrink:0;}

/* Voortgangsbalk */
.perf-bar-wrap{padding:0 24px 20px;}
.perf-bar-track{
  position:relative;
  height:10px;
  background:var(--bg3);
  border-radius:6px;
  overflow:visible;
  margin-bottom:4px;
}
.perf-bar-fill{
  height:100%;
  border-radius:6px;
  background:var(--green);
  transition:width .6s ease;
  max-width:100%;
}
.perf-bar-fill.warn{background:#d4a017;}
.perf-bar-fill.bad {background:var(--red);}
.perf-bar-expected{
  position:absolute;
  top:-4px;
  width:2px;
  height:18px;
  background:var(--ink2);
  border-radius:2px;
  transform:translateX(-50%);
}
.perf-bar-labels{
  display:flex;
  justify-content:space-between;
  margin-top:2px;
}

@media(max-width:768px){
  .perf-grid{grid-template-columns:1fr 1fr;gap:16px;padding:16px;}
  .perf-divider{display:none;}
  .perf-value{font-size:18px;}
}

/* Performance kaart — extra rij */
.perf-extra{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--border);
  padding:14px 24px;
  background:var(--bg3);
  border-radius:0 0 var(--r) var(--r);
}
.perf-extra-item{text-align:center;padding:0 8px;}
.perf-value-sm{font-size:16px;font-weight:700;font-family:var(--mono);}
@media(max-width:768px){
  .perf-extra{grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px;}
}

/* GPS kaart-picker in modals */
.gps-picker-wrap{margin:8px 0 4px;}
.gps-picker-label{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--sun);text-transform:uppercase;margin-bottom:6px;}
.gps-picker-map{width:100%;height:200px;border-radius:8px;border:1px solid var(--border);cursor:crosshair;overflow:hidden;position:relative;z-index:0;}
/* Leaflet binnen modal-picker: volledig geïsoleerd van hoofdkaart */
.gps-picker-map .leaflet-pane,
.gps-picker-map .leaflet-top,
.gps-picker-map .leaflet-bottom,
.gps-picker-map .leaflet-control{z-index:10 !important;}

/* ======================================================================
   CUSTOMER PORTAL - apart modern theme
   ====================================================================== */
#customerScreen{
  position:relative;
  background:
    radial-gradient(circle at top left, rgba(245,158,11,.14), transparent 28%),
    radial-gradient(circle at top right, rgba(14,165,233,.10), transparent 22%),
    linear-gradient(180deg, #fbfaf7 0%, #f4f7fb 100%);
  color:var(--ink);
}

#customerScreen .topbar{
  background:linear-gradient(135deg, #0f172a 0%, #111827 55%, #1f2937 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 12px 30px rgba(15,23,42,.12);
}

#customerScreen .tb-brand{font-size:17px;letter-spacing:.01em;}
#customerScreen .tb-badge-cust{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.2);color:#dbeafe;}
#customerScreen .tb-site-label{color:rgba(255,255,255,.7);font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.01em;}
#customerScreen .tb-user,#customerScreen .tb-user-name{color:rgba(255,255,255,.8);font-family:var(--sans);}
#customerScreen .btn-out{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10)!important;color:rgba(255,255,255,.78);}
#customerScreen .btn-out:hover{background:rgba(255,255,255,.10);color:#fff;}

#customerScreen .body{
  background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0));
  padding:26px 28px 36px;
}

/* #customerScreen .cust-greeting* → verplaatst naar css/pages/customer-overview.css (Fase 4.6) */

/* #customerScreen .ckpi* → verplaatst naar css/components/kpi.css (Fase 4.3) */

#customerScreen .grid2{gap:18px;align-items:stretch;}
#customerScreen .grid2 .card,
#customerScreen .card{
  background:rgba(255,255,255,.84);
  border:1px solid rgba(226,232,240,.92);
  border-radius:18px;
  box-shadow:0 14px 40px rgba(15,23,42,.06);
  backdrop-filter:blur(14px);
  overflow:hidden;
}

#customerScreen .card-hd{
  padding:16px 18px 10px;
  border-bottom:1px solid rgba(226,232,240,.7);
}
#customerScreen .card-hd-t{
  font-family:var(--sans);
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
}
#customerScreen .card-bd{padding:16px 18px 18px;}
#customerScreen .card-bd-chart{padding-top:10px;}
#customerScreen #custDayCard .card-bd-chart{min-height:0;}
#customerScreen .card-bd canvas{max-width:100%;}
#customerScreen .cust-chart-wrap{
  position:relative;
  width:100%;
  overflow:hidden;
}
#customerScreen .cust-chart-wrap-today{height:164px;}
#customerScreen .cust-chart-wrap-hist{height:198px;}
#customerScreen .cust-chart-wrap-day{height:240px;}
#customerScreen .cust-chart-wrap canvas{
  display:block;
  width:100% !important;
  height:100% !important;
}

#customerScreen .chart-hint,
#customerScreen .chart-sub-label,
#customerScreen .spinner-txt,
#customerScreen .txt-mono-sm,
#customerScreen .rep-lbl,
#customerScreen .rep-status{
  font-family:var(--sans);
  color:#64748b;
}

#customerScreen .chart-legend-row{gap:10px;color:#64748b;}
#customerScreen .legend-item{font-family:var(--sans);}
#customerScreen .legend-dot,#customerScreen .legend-dash{opacity:.9;}
#customerScreen .report-controls{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  align-items:end;
}
#customerScreen .alert-controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:end;
  margin-bottom:8px;
}
#customerScreen .alert-controls > div{
  flex:0 0 160px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#customerScreen .alert-controls > div .rep-select{
  width:100%;
  height:40px;
  border-radius:10px;
}
#customerScreen .alert-controls > div .form-inp{
  height:40px;
  border-radius:10px;
}
/* Zoekveld groeit mee, behoudt nette verhouding */
#customerScreen .alert-controls > div.cust-tl-search-wrap,
#customerScreen .alert-controls > div:has(#cust-tl-search){
  flex:1 1 260px;
  min-width:200px;
  max-width:520px;
}
/* Vernieuwen-knop compact aan eind, zelfde hoogte */
#customerScreen .alert-controls > div:last-child{
  flex:0 0 auto;
  padding-left:0;
}
#customerScreen .alert-controls > div:last-child .btn-sm{
  height:40px;
  min-height:40px;
  border-radius:10px;
  padding:0 16px;
}
#customerScreen .report-controls > div{
  min-width:0;
}
#customerScreen .report-controls button{
  min-height:42px;
  border-radius:12px;
  box-shadow:0 12px 24px rgba(245,158,11,.18);
}
#customerScreen .alert-controls button{
  min-height:36px;
  border-radius:12px;
  box-shadow:0 12px 24px rgba(15,23,42,.08);
}

#customerScreen .alert-controls > div:last-child{
  padding-left:6px;
}
#customerScreen .card-bd-tickets{
  padding:6px 12px;
}
#customerScreen .cust-report-wrap{
  margin-top:20px;
}
#customerScreen .cust-report-actions{
  margin-top:16px;
  justify-content:flex-end;
}
#customerScreen .cust-report-actions .btn-sm{
  min-height:40px;
  border-radius:12px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
#customerScreen .cust-report-wrap .rep-page{
  border-radius:22px;
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 20px 55px rgba(15,23,42,.08);
  overflow:hidden;
}
#customerScreen .cust-report-wrap .rep-header{
  padding:32px 34px 26px;
}
#customerScreen .cust-report-wrap .rep-body{
  padding:28px 30px 30px;
}
#customerScreen .cust-report-wrap .rep-section{
  margin-bottom:28px;
}
#customerScreen .cust-report-wrap .rep-table th{
  background:#f8fafc;
}
#customerScreen .cust-report-wrap .rep-kpi-card,
#customerScreen .cust-report-wrap .rep-maint-item,
#customerScreen .cust-report-wrap .rep-aanbev-item{
  box-shadow:none;
}
#customerScreen .cust-report-wrap .rep-footer{
  padding:14px 30px;
}
#customerScreen .chart-empty{
  padding:22px 18px;
  border-radius:14px;
  background:rgba(248,250,252,.92);
  border:1px dashed rgba(148,163,184,.35);
  color:#64748b;
  font-family:var(--sans);
  font-size:13px;
}

@media(max-width:768px){
  #customerScreen .report-controls{
    grid-template-columns:1fr;
  }
  /* Storingen-filters: 2 kolommen op tablet, alle items even breed */
  #customerScreen .alert-controls > div{
    flex:1 1 calc(50% - 10px);
    min-width:0;
  }
  #customerScreen .alert-controls > div:has(input[type="text"]),
  #customerScreen .alert-controls > div:has(#cust-tl-search){
    flex:1 1 100%;
    min-width:0;
  }
  #customerScreen .cust-report-actions{
    justify-content:stretch;
  }
  #customerScreen .cust-report-actions .btn-sm{
    width:100%;
  }
  #customerScreen .cust-report-wrap .rep-header{
    padding:24px 20px 20px;
  }
  #customerScreen .cust-report-wrap .rep-body{
    padding:20px 16px 22px;
  }
  #customerScreen .cust-report-wrap .rep-kpi-row,
  #customerScreen .cust-report-wrap .rep-maint-grid,
  #customerScreen .cust-report-wrap .rep-verlies-row{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:560px){
  #customerScreen .alert-controls > div{
    flex:1 1 100%;
  }
  #customerScreen .alert-controls > div:has(input[type="text"]),
  #customerScreen .alert-controls > div:has(#cust-tl-search){
    flex:1 1 100%;
  }
  #customerScreen .cust-report-wrap .rep-kpi-row,
  #customerScreen .cust-report-wrap .rep-maint-grid,
  #customerScreen .cust-report-wrap .rep-verlies-row{
    grid-template-columns:1fr;
  }
  #customerScreen .cust-report-wrap .rep-footer{
    flex-direction:column;
    gap:8px;
    align-items:flex-start;
  }
}
#customerScreen #custDayCard,
#customerScreen #custPerfCard{
  align-self:start;
}

#customerScreen .savings{
  height:100%;
  padding:20px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.92));
  color:#fff;
  box-shadow:0 18px 46px rgba(15,23,42,.14);
}
#customerScreen .sv-t,
#customerScreen .sv-u,
#customerScreen .sv-row,
#customerScreen .sv-rv,
#customerScreen .status-operational,
#customerScreen .status-offline{font-family:var(--sans);}
#customerScreen .sv-t{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.68);}
#customerScreen .sv-v{font-size:20px;line-height:1;letter-spacing:-.04em;font-weight:400;margin-top:8px;}
#customerScreen .sv-u{font-size:13px;color:rgba(255,255,255,.55);margin-top:6px;}
#customerScreen .sv-div{background:rgba(255,255,255,.08);margin:14px 0;}
#customerScreen .sv-row{color:rgba(255,255,255,.8);}
#customerScreen .sv-rv{color:#fff;font-weight:700;}

/* Customer overview polish (cust-overview grid + savings styling + 3 responsive @media)
   → verplaatst naar css/pages/customer-overview.css (Fase 4.6) */

#customerScreen .perf-grid,
#customerScreen .perf-extra{background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.98));}
#customerScreen .perf-grid{padding:14px 16px 12px;}
#customerScreen .perf-divider{height:36px;}
#customerScreen .perf-bar-wrap{padding:0 16px 14px;}
#customerScreen .perf-bar-track,
#customerScreen .perf-extra{
  max-width:100%;
}
#customerScreen .perf-value{font-family:var(--sans);letter-spacing:-.02em;}
#customerScreen .perf-label,
#customerScreen .perf-sub{font-family:var(--sans);}
#customerScreen .perf-bar-track{background:#e2e8f0;}
#customerScreen .perf-bar-fill{background:linear-gradient(90deg, #f59e0b, #f97316);}
#customerScreen .perf-bar-fill.good{background:linear-gradient(90deg, #22c55e, #10b981);}
#customerScreen .perf-bar-fill.warn{background:linear-gradient(90deg, #f59e0b, #f97316);}
#customerScreen .perf-bar-fill.bad{background:linear-gradient(90deg, #ef4444, #dc2626);}

#customerScreen .rep-select,
#customerScreen .rep-site-readonly{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(226,232,240,.95);
  border-radius:12px;
  color:var(--ink);
  font-family:var(--sans);
}
#customerScreen .rep-select{min-width:160px;}
#customerScreen .report-controls{gap:12px;align-items:flex-end;}
#customerScreen .btn-sun-s,
#customerScreen .btn-sm.btn-sun-s{
  background:linear-gradient(135deg, #f59e0b, #fb923c);
  box-shadow:0 10px 20px rgba(245,158,11,.18);
}
#customerScreen .btn-sun-s:hover,
#customerScreen .btn-sm.btn-sun-s:hover{background:linear-gradient(135deg, #f59e0b, #f97316);}

#customerScreen .tab-pane{animation:custFadeIn .22s ease;}
@keyframes custFadeIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:768px){
  #customerScreen .body{padding:18px 16px 28px;}
  /* #customerScreen .cust-kpi @768 → verplaatst naar css/components/kpi.css */
  #customerScreen .cust-greeting{padding:16px;}
  #customerScreen .cust-greeting-name{font-size:22px;}
  #customerScreen .sv-v{font-size:25px;}
  #customerScreen .grid2{gap:14px;}
  #customerScreen .card-hd,
  #customerScreen .card-bd{padding-left:14px;padding-right:14px;}
}

@media(max-width:520px){
  /* #customerScreen .cust-kpi @520 → verplaatst naar css/components/kpi.css */
  #customerScreen .tb-site-label{display:none;}
  #customerScreen .tb-nav{display:none;}
}

/* ======================================================================
   ENGINEER / ADMIN PANEL - elevated workspace theme
   ====================================================================== */
#engineerScreen{
  position:relative;
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.08), transparent 24%),
    radial-gradient(circle at top right, rgba(245,158,11,.12), transparent 20%),
    linear-gradient(180deg, #f4f1ea 0%, #eef3f8 100%);
}

#engineerScreen .topbar{
  background:#25272b;
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 12px 34px rgba(24,22,15,.16);
}

#engineerScreen .tb-user,
#engineerScreen .tb-user-name{
  color:rgba(255,255,255,.82);
}

/* ADMIN SHELL (#engineerScreen .eng-shell/.eng-sidebar/.eng-side-nav/.eng-menu-group/
   .eng-side-toggle/.eng-profile*/.eng-density*/.eng-sidebar-foot + .topbar tn overrides
   + #engineerScreen .body offset)
   → verplaatst naar css/pages/admin-shell.css (Fase 4.6)
   NB: Latere style.css blokken (themed-variant op ~r2176, density op ~r3475+,
   adm-theme op ~r4088, polish op ~r4291) BLIJVEN hier omdat ze block 1
   moeten kunnen overriden — admin-shell.css laadt VOOR style.css. */

#engineerScreen .kpi-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}

#engineerScreen .kpi{
  padding:12px 12px 10px;
  border-radius:16px;
  border:1px solid rgba(228,223,214,.86);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,251,245,.9));
  box-shadow:0 14px 32px rgba(24,22,15,.07);
}

#engineerScreen .kpi:hover{
  transform:none;
  box-shadow:0 14px 32px rgba(24,22,15,.07);
}

#engineerScreen .kpi::after{
  content:'';
  position:absolute;
  inset:auto -30% -42% auto;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.42), transparent 66%);
  pointer-events:none;
}

#engineerScreen .card{
  border:1px solid rgba(224,218,207,.88);
  background:rgba(255,255,255,.88);
  box-shadow:0 18px 40px rgba(24,22,15,.08);
  backdrop-filter:blur(10px);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

#engineerScreen .card:hover{
  box-shadow:0 20px 42px rgba(24,22,15,.1);
  border-color:rgba(214,203,188,.95);
}

#engineerScreen .card-hd{
  padding:16px 18px 14px;
  background:linear-gradient(180deg, rgba(248,245,239,.86), rgba(255,255,255,.65));
}

#engineerScreen .card-hd-t,
#engineerScreen .tab-title{
  font-weight:700;
  letter-spacing:-.01em;
}

#engineerScreen .tab-sub,
#engineerScreen .txt-mono-sm,
#engineerScreen .empty-state,
#engineerScreen .spinner-txt{
  color:#7f7567;
}

#engineerScreen .btn-icon,
#engineerScreen .btn-ghost{
  background:linear-gradient(180deg, #f8f5ef, #efe8dc);
  border-color:#ddd4c7 !important;
  transition:background .16s ease, box-shadow .16s ease, transform .16s ease;
}

#engineerScreen .btn-icon:hover,
#engineerScreen .btn-ghost:hover{
  background:linear-gradient(180deg, #fbfaf7, #e7dece);
  transform:translateY(-1px);
  box-shadow:0 8px 14px rgba(84,63,38,.12);
}

#engineerScreen .btn-sun-s{
  background:linear-gradient(135deg, #d97706, #f59e0b);
  box-shadow:0 12px 24px rgba(217,119,6,.18);
}

#engineerScreen .btn-sun-s:hover{
  background:linear-gradient(135deg, #ea8a0b, #fb923c);
  transform:translateY(-1px);
}

#engineerScreen .btn-sm:focus-visible,
#engineerScreen .btn-icon:focus-visible{
  outline:2px solid rgba(232,137,13,.45);
  outline-offset:2px;
}

#engineerScreen .tbl th{
  background:#f6f1e8;
  color:#8a7d6d;
}

#engineerScreen .tbl tbody tr:nth-child(even) td{
  background:rgba(252,248,240,.54);
}

#engineerScreen .tbl td{
  border-bottom:1px solid #f2ece3;
  vertical-align:middle;
}

#engineerScreen .tbl tr:hover td{
  background:#fcfaf6;
}

#engineerScreen .entity-cell{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

#engineerScreen .entity-avatar{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  color:#9a5800;
  background:linear-gradient(135deg, rgba(245,158,11,.20), rgba(255,255,255,.95));
  border:1px solid rgba(245,158,11,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

#engineerScreen .entity-avatar-site{
  color:#0f766e;
  background:linear-gradient(135deg, rgba(14,165,233,.14), rgba(255,255,255,.94));
  border-color:rgba(14,165,233,.22);
}

#engineerScreen .entity-copy{
  min-width:0;
}

#engineerScreen .entity-title{
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  line-height:1.2;
}

#engineerScreen .entity-sub{
  margin-top:3px;
  font-family:var(--mono);
  font-size:10px;
  color:#8a7d6d;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#engineerScreen .meta-stack{
  display:flex;
  flex-direction:column;
  gap:3px;
}

#engineerScreen .meta-stack strong{
  font-size:12px;
  font-weight:700;
  color:var(--ink);
}

#engineerScreen .meta-stack span{
  font-family:var(--mono);
  font-size:10px;
  color:#8a7d6d;
}

#engineerScreen .metric-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:82px;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(180deg, #f8f2e9, #efe4d4);
  border:1px solid #e4d6c2;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  color:#7c4a04;
}

#engineerScreen .form-grp{
  margin-bottom:14px;
}

#engineerScreen .form-row{
  gap:12px;
}

#engineerScreen .form-lbl{
  font-size:10px;
  letter-spacing:.12em;
  color:#817568;
}

#engineerScreen .form-inp,
#engineerScreen .form-select{
  height:40px;
  border-radius:10px;
  background:#fff;
  border-color:#e6dccd;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

#engineerScreen textarea.form-inp{
  min-height:96px;
  height:auto;
}

#engineerScreen .form-inp:focus,
#engineerScreen .form-select:focus{
  border-color:#e8890d;
  box-shadow:0 0 0 3px rgba(232,137,13,.12);
}

#engineerScreen .modal{
  border:1px solid #e2d8c7;
}

#engineerScreen .modal-hd{
  background:linear-gradient(180deg, rgba(248,245,239,.9), rgba(255,255,255,.86));
}

#engineerScreen .modal-ft{
  background:#fffdfa;
}

#engineerScreen .sel-sm{
  min-height:34px;
  border-radius:10px;
  border:1px solid #e2d8c7;
  background:#fff;
}

#engineerScreen .txt-mono-sm{
  letter-spacing:.03em;
}

#engineerScreen .action-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

#engineerScreen .action-btn{
  min-width:96px;
  justify-content:center;
  padding:7px 11px;
  border-radius:10px;
  font-size:10px;
  letter-spacing:.03em;
}

#engineerScreen .action-btn-danger{
  color:#b42318;
}

#engineerScreen .site-mini-card{
  padding:15px 18px;
  border-bottom:1px solid #eee6db;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

#engineerScreen .site-mini-card:hover{
  background:linear-gradient(90deg, rgba(245,158,11,.06), rgba(14,165,233,.03));
}

#engineerScreen .site-mini-card:focus-visible{
  outline:2px solid rgba(232,137,13,.5);
  outline-offset:2px;
}

#engineerScreen .site-mini-card.is-active{
  border-left:3px solid #e8890d;
  background:linear-gradient(90deg, rgba(232,137,13,.12), rgba(255,247,234,.92));
  box-shadow:inset 0 0 0 1px rgba(232,137,13,.24);
}

#engineerScreen .site-pager{
  background:linear-gradient(180deg, rgba(248,245,239,.76), rgba(255,255,255,.94));
}

#engineerScreen .map-container{
  border-top:1px solid #efe6da;
}

/* Admin panel polish (UX + consistency + a11y) */
#engineerScreen .eng-side-nav .tn{
  border-radius:10px;
}

#engineerScreen .eng-side-nav .tn.on{
  color:#8a4f00;
  background:linear-gradient(180deg, #fff8ee, #ffefd9);
  border-color:#f1cfa0;
  box-shadow:0 4px 12px rgba(199,126,31,.14);
}

#engineerScreen .eng-side-nav .tn.on::before{
  content:'';
  position:absolute;
  left:0;
  top:7px;
  bottom:7px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg, #e8890d, #cf7000);
}

#engineerScreen .eng-side-nav .tn:hover{
  background:#f6f8fb;
  border-color:#dce3ec;
}

#engineerScreen .topbar .tn{
  color:rgba(255,255,255,.68);
  border-color:transparent;
}

#engineerScreen .topbar .tn:hover{
  color:#fff;
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.16);
}

#engineerScreen .topbar .tn.on{
  background:linear-gradient(135deg, rgba(232,137,13,.32), rgba(207,112,0,.24));
  border-color:rgba(232,137,13,.42);
  box-shadow:0 8px 16px rgba(217,119,6,.16);
}

#engineerScreen .kpi-row{
  align-items:stretch;
}

#engineerScreen .kpi{
  min-height:92px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

#engineerScreen .kpi-l{
  margin-bottom:6px;
}

#engineerScreen .kpi-v{
  font-size:25px;
  letter-spacing:-.01em;
}

#engineerScreen .kpi-u{
  margin-top:4px;
}

#engineerScreen .card{
  border-radius:18px;
}

#engineerScreen .card-hd{
  min-height:56px;
}

#engineerScreen .tbl{
  table-layout:fixed;
}

#engineerScreen .tbl th{
  position:sticky;
  top:0;
  z-index:1;
}

#engineerScreen .tbl th,
#engineerScreen .tbl td{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#engineerScreen .entity-cell,
#engineerScreen .action-row{
  white-space:normal;
}

#engineerScreen .action-row{
  align-items:center;
}

#engineerScreen .action-btn{
  min-height:30px;
}

#engineerScreen .form-inp,
#engineerScreen .form-select,
#engineerScreen .sel-sm{
  font-size:13px;
}

#engineerScreen .modal{
  max-width:640px;
}

#engineerScreen #newTicketModal .modal{
  max-width:720px;
}

#engineerScreen .modal-bd{
  padding:20px 24px;
}

#engineerScreen .modal-ft{
  padding:14px 24px;
}

#engineerScreen #engTickets .tkt,
#engineerScreen .tkt{
  margin:8px 10px;
  border:1px solid #eee4d5;
  border-radius:12px;
  background:#fffdfa;
}

#engineerScreen #engTickets .tkt:hover,
#engineerScreen .tkt:hover{
  background:#fff7eb;
  border-color:#f1d5ad;
}

#engineerScreen .tkt-top{
  gap:8px;
}

#engineerScreen .tkt-title{
  font-size:12px;
}

#engineerScreen .tkt-badge{
  border-radius:999px;
}

#engineerScreen #eng-analyse .card-bd,
#engineerScreen #eng-dash .card-bd-chart{
  padding-top:12px;
}

#engineerScreen canvas{
  image-rendering:auto;
}

#engineerScreen .btn-sm,
#engineerScreen .btn-icon,
#engineerScreen .action-btn,
#engineerScreen .tn{
  transition:all .16s ease;
}

#engineerScreen button:focus-visible,
#engineerScreen .tn:focus-visible,
#engineerScreen .btn-sm:focus-visible,
#engineerScreen .btn-icon:focus-visible,
#engineerScreen .form-inp:focus-visible,
#engineerScreen .form-select:focus-visible{
  outline:2px solid rgba(232,137,13,.52);
  outline-offset:2px;
}

#engineerScreen .tab-pane > .card,
#engineerScreen .tab-pane > .grid2,
#engineerScreen .tab-pane > .dashboard-grid-2col{ 
  margin-bottom:16px;
}

#engineerScreen #eng-users .tbl,
#engineerScreen #eng-sites .tbl{
  table-layout:fixed;
}

#engineerScreen #eng-users .tbl th:nth-child(1){width:24%;}
#engineerScreen #eng-users .tbl th:nth-child(2){width:13%;}
#engineerScreen #eng-users .tbl th:nth-child(3){width:18%;}
#engineerScreen #eng-users .tbl th:nth-child(4){width:18%;}
#engineerScreen #eng-users .tbl th:nth-child(5){width:11%;}
#engineerScreen #eng-users .tbl th:nth-child(6){width:220px;}

#engineerScreen #eng-sites .tbl th:nth-child(1){width:34%;}
#engineerScreen #eng-sites .tbl th:nth-child(2){width:14%;}
#engineerScreen #eng-sites .tbl th:nth-child(3){width:18%;}
#engineerScreen #eng-sites .tbl th:nth-child(4){width:12%;}
#engineerScreen #eng-sites .tbl th:nth-child(5){width:22%;}

#engineerScreen #tktTable{
  table-layout:fixed;
  min-width:1080px;
}

#engineerScreen #tktTable th:nth-child(1){width:34px;}
#engineerScreen #tktTable th:nth-child(2){width:8px;}
#engineerScreen #tktTable th:nth-child(3){width:56px;}
#engineerScreen #tktTable th:nth-child(4){width:240px;}
#engineerScreen #tktTable th:nth-child(5){width:160px;}
#engineerScreen #tktTable th:nth-child(6){width:140px;}
#engineerScreen #tktTable th:nth-child(7){width:98px;}
#engineerScreen #tktTable th:nth-child(8){width:118px;}
#engineerScreen #tktTable th:nth-child(9){width:130px;}
#engineerScreen #tktTable th:nth-child(10){width:84px;}
#engineerScreen #tktTable th:nth-child(11){width:92px;}
#engineerScreen #tktTable th:nth-child(12){width:128px;}

#engineerScreen #eng-tickets .card-hd-right{
  row-gap:6px;
}

#engineerScreen #eng-tickets .card-hd-right .sel-sm{
  min-width:128px;
}

#engineerScreen #eng-tickets .card-hd-right .btn-sm{
  min-height:32px;
}

#engineerScreen #tktColumnsPanel{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:8px 10px;
  align-items:center;
}

#engineerScreen #tktColumnsPanel label{
  margin:0 !important;
  white-space:nowrap;
}

#engineerScreen .chart-hint{
  line-height:1.45;
}

#engineerScreen .tkt-toolbar-head{
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
}

#engineerScreen .tkt-toolbar-main{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  flex:1 1 520px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  font-size:10px;
  scrollbar-width:thin;
  scrollbar-color:#d2d9e2 transparent;
}
#engineerScreen .tkt-toolbar-main::-webkit-scrollbar{height:7px;}
#engineerScreen .tkt-toolbar-main::-webkit-scrollbar-thumb{background:#d6dde7;border-radius:999px;}
#engineerScreen .tkt-toolbar-main::-webkit-scrollbar-track{background:transparent;}

#engineerScreen .tkt-toolbar-main .sel-sm{
  min-width:140px;
  flex:0 0 auto;
  font-size:10px;
}
#engineerScreen .tkt-toolbar-main #tktSearch{
  min-width:220px;
  flex:1 1 260px;
}

#engineerScreen .tkt-toolbar-main .btn-sm,
#engineerScreen .tkt-toolbar-main .form-inp,
#engineerScreen .tkt-toolbar-main .sel-sm{
  font-size:10px;
  min-height:32px;
  height:32px;
  line-height:1.2;
}

#engineerScreen .tkt-toolbar-main select,
#engineerScreen .tkt-toolbar-main input,
#engineerScreen .tkt-toolbar-main .form-select{
  font-size:10px !important;
}

#engineerScreen .tkt-toolbar-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-left:auto;
}
#engineerScreen .tkt-toolbar-actions .btn-sm{
  min-height:32px;
  height:32px;
}

#engineerScreen .tkt-toolbar-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:8px 12px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:#fcfaf7;
}
#engineerScreen .tkt-toolbar-meta .btn-sm{
  margin-left:auto;
}

#engineerScreen.tickets-clean-mode #tktAdvancedPanel,
#engineerScreen.tickets-clean-mode #tktColumnsPanel,
#engineerScreen.tickets-clean-mode #tktUnlinkedAlerts{
  display:none !important;
}
#engineerScreen.tickets-clean-mode .tkt-toolbar-meta{
  padding:6px 12px;
}
#engineerScreen.tickets-clean-mode .tkt-toolbar-main{
  gap:4px;
}

#engineerScreen .tkt-adv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:8px;
}

#engineerScreen .tkt-adv-grid .form-inp{
  max-width:none;
}

#engineerScreen .row-skel td{
  padding:10px 12px !important;
  border-bottom:1px solid #f0e7da;
}

#engineerScreen .row-skel .line{
  height:12px;
  border-radius:999px;
  background:linear-gradient(90deg, #efe8dd 25%, #f6f2ea 38%, #efe8dd 55%);
  background-size:200% 100%;
  animation:engSkel 1.1s linear infinite;
}

/* Assets page polish */
#engineerScreen #eng-assets .asset-toolbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
#engineerScreen #eng-assets .asset-toolbar .sel-sm{
  min-width:150px;
  height:34px;
}
#engineerScreen #eng-assets .asset-table-wrap{
  overflow-x:auto;
  border-top:1px solid #efe6da;
}
#engineerScreen #eng-assets .eval-tbl{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  min-width:900px;
}
#engineerScreen #eng-assets .eval-tbl th{
  background:#f6f1e8;
  color:#8a7d6d;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:10px 12px;
  border-bottom:1px solid #ece2d3;
}
#engineerScreen #eng-assets .eval-tbl td{
  padding:10px 12px;
  border-bottom:1px solid #f2e9dd;
  font-size:11px;
  color:var(--ink2);
  vertical-align:middle;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#engineerScreen #eng-assets .eval-tbl tr:hover td{ background:#fcfaf6; }
#engineerScreen #eng-assets .eval-tbl th:nth-child(1){width:48px;}
#engineerScreen #eng-assets .eval-tbl th:nth-child(2){width:180px;}
#engineerScreen #eng-assets .eval-tbl th:nth-child(3){width:100px;}
#engineerScreen #eng-assets .eval-tbl th:nth-child(4){width:170px;}
#engineerScreen #eng-assets .eval-tbl th:nth-child(5){width:130px;}
#engineerScreen #eng-assets .eval-tbl th:nth-child(6){width:130px;}
#engineerScreen #eng-assets .eval-tbl th:nth-child(7){width:110px;}
#engineerScreen #eng-assets .eval-tbl th:nth-child(8){width:250px;}
#engineerScreen #eng-assets .asset-panel{
  display:grid;
  gap:10px;
}
#engineerScreen #eng-assets .asset-form-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
#engineerScreen #eng-assets .asset-sep{
  height:1px;
  background:var(--border);
  margin:6px 0;
}
#engineerScreen #eng-assets .asset-scroll{
  max-height:180px;
  overflow:auto;
  border:1px solid #efe6da;
  border-radius:10px;
  background:#fff;
}
#engineerScreen #eng-assets .asset-scroll-lg{
  max-height:260px;
}
#engineerScreen #eng-assets .asset-list-item,
#engineerScreen #eng-assets .asset-list-row{
  padding:8px 10px;
  border-bottom:1px solid #f2e9dd;
}
#engineerScreen #eng-assets .asset-list-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
#engineerScreen #eng-assets .asset-row-main{
  min-width:0;
}
#engineerScreen #eng-assets .asset-item-title{
  font-size:11px;
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#engineerScreen #eng-assets .asset-item-meta{
  font-family:var(--mono);
  font-size:10px;
  color:var(--ink3);
  margin-top:2px;
}
#engineerScreen #eng-assets .asset-item-desc{
  font-size:11px;
  color:var(--ink2);
  margin-top:4px;
}
#engineerScreen #eng-assets .asset-list-item:last-child,
#engineerScreen #eng-assets .asset-list-row:last-child{
  border-bottom:none;
}

@keyframes engSkel{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

@media (prefers-reduced-motion: reduce){
  #engineerScreen *{
    animation:none !important;
    transition:none !important;
  }
}

@media(max-width:768px){
  #engineerScreen .eng-shell{
    display:block;
  }

  #engineerScreen .eng-sidebar{
    display:none;
  }

  #engineerScreen .eng-nav-wrap{
    display:none;
  }

  #engineerScreen .body{
    margin-left:0;
    width:100%;
    height:auto;
    padding:18px 14px 24px;
  }

  #engineerScreen .topbar{
    padding:0 12px;
    gap:8px;
  }

  #engineerScreen .tb-nav{
    gap:4px;
  }

  #engineerScreen .kpi-row{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  #engineerScreen .kpi{
    min-height:92px;
    padding:10px;
  }

  #engineerScreen .card{
    border-radius:14px;
  }

  #engineerScreen .card-hd{
    min-height:50px;
    padding:12px 14px;
  }

  #engineerScreen .card-bd,
  #engineerScreen .card-bd-chart,
  #engineerScreen .card-bd-tickets{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  #engineerScreen .tab-pane > .card,
  #engineerScreen .tab-pane > .grid2,
  #engineerScreen .tab-pane > .dashboard-grid-2col{ 
    margin-bottom:12px;
  }

  #engineerScreen #eng-tickets .card-hd-right{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    width:100%;
  }

  #engineerScreen .tkt-toolbar-main{
    display:grid;
    grid-template-columns:1fr 1fr;
    flex:1 1 100%;
    width:100%;
  }
  #engineerScreen .tkt-toolbar-main #tktSearch{
    grid-column:1 / -1;
    width:100%;
    min-width:0;
  }

  #engineerScreen .tkt-toolbar-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    margin-left:0;
  }

  #engineerScreen .tkt-toolbar-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
  }

  #engineerScreen .tkt-adv-grid{
    grid-template-columns:1fr 1fr;
  }

  #engineerScreen #eng-tickets .card-hd-right > *{
    min-width:0;
    width:100%;
  }

  #engineerScreen #tktColumnsPanel{
    grid-template-columns:1fr 1fr;
  }

  #engineerScreen #tktBulkBar{
    gap:6px !important;
    padding:8px !important;
  }

  #engineerScreen #tktBulkBar .form-inp,
  #engineerScreen #tktBulkBar .btn-sm,
  #engineerScreen #tktBulkBar .sel-sm{
    width:100%;
    max-width:none !important;
  }

  #engineerScreen .modal{
    max-width:100%;
    border-radius:16px 16px 0 0;
  }

  #engineerScreen .action-row{
    width:100%;
  }

  #engineerScreen .action-btn{
    flex:1 1 calc(50% - 6px);
    min-width:0;
  }

  #engineerScreen #engTickets .tkt,
  #engineerScreen .tkt{
    margin:8px 0;
  }

  #engineerScreen #eng-sites .tbl,
  #engineerScreen #eng-users .tbl,
  #engineerScreen #tktTable{
    min-width:unset;
    table-layout:auto;
  }

  #eng-users .tbl,
  #eng-sites .tbl,
  #eng-users .tbl tbody,
  #eng-sites .tbl tbody,
  #eng-users .tbl tr,
  #eng-sites .tbl tr,
  #eng-users .tbl td,
  #eng-sites .tbl td{
    display:block;
    width:100%;
  }

  #eng-users .tbl thead,
  #eng-sites .tbl thead{
    display:none;
  }

  #eng-users .tbl tr,
  #eng-sites .tbl tr{
    margin-bottom:12px;
    padding:14px;
    border:1px solid #eadfce;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,245,238,.94));
    box-shadow:0 14px 26px rgba(24,22,15,.06);
  }

  #eng-users .tbl td,
  #eng-sites .tbl td{
    padding:0;
    border:0;
    background:transparent !important;
  }

  #eng-users .tbl td + td,
  #eng-sites .tbl td + td{
    margin-top:10px;
    padding-top:10px;
    border-top:1px dashed #eadfce;
  }

  #eng-users .tbl td::before,
  #eng-sites .tbl td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:5px;
    font-family:var(--mono);
    font-size:9px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#9a8e80;
  }

  #eng-users .action-row,
  #eng-sites .action-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  #eng-users .action-btn,
  #eng-sites .action-btn{
    width:100%;
    min-width:0;
  }

  #eng-users .entity-sub,
  #eng-sites .entity-sub{
    white-space:normal;
  }
  #engineerScreen .users-toolbar{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  #engineerScreen .users-toolbar .users-search{
    grid-column:1 / -1;
    width:100%;
  }
  #engineerScreen .btn-sm,
  #engineerScreen .btn-icon,
  #engineerScreen .form-inp,
  #engineerScreen .form-select,
  #engineerScreen .sel-sm{
    min-height:36px;
  }

  #engineerScreen #eng-assets .asset-toolbar{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  #engineerScreen #eng-assets .asset-toolbar .btn-sm{
    grid-column:1 / -1;
  }
  #engineerScreen #eng-assets .asset-form-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  #engineerScreen #eng-assets .asset-list-row{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ======================================================================
   FAQ PAGE STYLES - Klantportaal
   ====================================================================== */

/* Header */
.faq-header {
  text-align: center;
  margin-bottom: 32px;
}
.faq-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}
.faq-subtitle {
  font-size: 15px;
  color: var(--ink3);
  max-width: 420px;
  margin: 0 auto;
}

/* Zoekbalk */
.faq-search-wrap {
  margin-bottom: 28px;
}
.faq-search-box {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
}
.faq-search-input {
  width: 100%;
  padding: 14px 18px 14px 48px;
  border: 2px solid var(--border);
  border-radius: var(--r);
  font-size: 15px;
  font-family: inherit;
  background: var(--bg2);
  transition: .2s;
  outline: none;
}
.faq-search-input:focus {
  border-color: var(--sun);
  box-shadow: 0 0 0 4px rgba(217,119,6,.12);
}
.faq-search-input::placeholder {
  color: var(--ink3);
}
.faq-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ink3);
}

/* Categorie tabs */
.faq-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 28px;
}
.faq-tab {
  padding: 9px 18px;
  border: none;
  background: var(--bg2);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink3);
  cursor: pointer;
  transition: .2s;
  box-shadow: var(--shadow-sm,0 1px 2px rgba(0,0,0,.04));
}
.faq-tab:hover {
  color: var(--ink);
  box-shadow: var(--shadow,0 4px 12px rgba(0,0,0,.08));
}
.faq-tab.active {
  background: var(--ink);
  color: #fff;
}

/* FAQ categorie */
.faq-category {
  margin-bottom: 28px;
}
.faq-category.hidden {
  display: none;
}
.faq-cat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}
.faq-cat-icon {
  width: 32px;
  height: 32px;
  background: rgba(217,119,6,.12);
  border-radius: var(--r-sm,8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sun);
}
.faq-cat-icon svg {
  width: 18px;
  height: 18px;
}
.faq-cat-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

/* FAQ items */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--bg2);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm,0 1px 2px rgba(0,0,0,.04));
  overflow: hidden;
  transition: .2s;
}
.faq-item:hover {
  box-shadow: var(--shadow,0 4px 12px rgba(0,0,0,.08));
}
.faq-item.hidden {
  display: none;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink);
  transition: .2s;
}
.faq-question:hover {
  color: var(--sun);
}
.faq-chevron {
  width: 26px;
  height: 26px;
  min-width: 26px;
  background: var(--bg3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .25s;
}
.faq-chevron svg {
  width: 13px;
  height: 13px;
  color: var(--ink3);
  transition: .25s;
}
.faq-item.open .faq-chevron {
  background: var(--sun);
}
.faq-item.open .faq-chevron svg {
  color: #fff;
  transform: rotate(180deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-item.open .faq-answer {
  max-height: 800px;
}
.faq-answer-inner {
  padding: 0 20px 18px;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.7;
}
.faq-answer-inner p {
  margin-bottom: 10px;
}
.faq-answer-inner p:last-child {
  margin-bottom: 0;
}
.faq-answer-inner ul, .faq-answer-inner ol {
  margin: 10px 0;
  padding-left: 22px;
}
.faq-answer-inner li {
  margin-bottom: 6px;
}
.faq-answer-inner strong {
  color: var(--ink);
  font-weight: 600;
}

/* Geen resultaten */
.faq-no-results {
  text-align: center;
  padding: 48px 20px;
  display: none;
}
.faq-no-results.show {
  display: block;
}
.faq-no-results-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--bg2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink3);
}
.faq-no-results-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.faq-no-results-text {
  color: var(--ink3);
  font-size: 13px;
}

/* Contact banner */
.faq-contact {
  background: linear-gradient(135deg, var(--ink) 0%, #262119 100%);
  border-radius: var(--r);
  padding: 26px 28px;
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.faq-contact-content h3 {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 5px;
}
.faq-contact-content p {
  color: rgba(255,255,255,.6);
  font-size: 13px;
}
.faq-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--sun);
  color: #fff;
  text-decoration: none;
  border-radius: var(--r-sm,8px);
  font-weight: 600;
  font-size: 13px;
  transition: .2s;
  box-shadow: 0 4px 12px rgba(217,119,6,.25);
}
.faq-contact-btn:hover {
  background: var(--sun2);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(217,119,6,.35);
}

/* Responsive FAQ */
@media(max-width:640px) {
  .faq-title { font-size: 24px; }
  .faq-question { padding: 14px 16px; font-size: 13px; }
  .faq-answer-inner { padding: 0 16px 16px; font-size: 13px; }
  .faq-contact { padding: 20px; flex-direction: column; text-align: center; }
  .faq-tabs { gap: 6px; }
  .faq-tab { padding: 8px 14px; font-size: 12px; }
}

/* Customer portal FAQ overrides */
#customerScreen .faq-header { margin-bottom: 24px; }
#customerScreen .faq-title { font-size: 24px; }
#customerScreen .faq-search-input,
#customerScreen .faq-tab {
  background: rgba(255,255,255,.9);
  border-color: rgba(226,232,240,.95);
}
#customerScreen .faq-item {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(226,232,240,.9);
}
#customerScreen .faq-contact {
  background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
}

/* FAQ mobile hardening */
#customerScreen #cust-faq{
  max-width:100%;
}

#customerScreen #cust-faq *{
  max-width:100%;
}

#customerScreen .faq-question span,
#customerScreen .faq-subtitle,
#customerScreen .faq-answer-inner{
  overflow-wrap:anywhere;
}

@media (max-width:900px){
  #customerScreen #cust-faq{
    padding:0 2px;
  }

  #customerScreen .faq-header{
    margin-bottom:16px;
    text-align:left;
  }

  #customerScreen .faq-title{
    font-size:22px;
    line-height:1.15;
    margin-bottom:6px;
  }

  #customerScreen .faq-subtitle{
    font-size:12px;
    max-width:none;
  }

  #customerScreen .faq-search-wrap{
    margin-bottom:14px;
  }

  #customerScreen .faq-search-box{
    max-width:none;
  }

  #customerScreen .faq-search-input{
    height:38px;
    padding:10px 12px 10px 38px;
    font-size:12px;
    border-width:1.5px;
  }

  #customerScreen .faq-search-icon{
    left:12px;
    width:15px;
    height:15px;
  }

  #customerScreen .faq-tabs{
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:6px;
    margin-bottom:14px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
  }

  #customerScreen .faq-tabs::-webkit-scrollbar{
    display:none;
  }

  #customerScreen .faq-tab{
    flex:0 0 auto;
    white-space:nowrap;
    min-height:30px;
    padding:6px 10px;
    font-size:11px;
  }

  #customerScreen .faq-category{
    margin-bottom:14px;
  }

  #customerScreen .faq-cat-header{
    margin-bottom:8px;
    padding-bottom:6px;
    gap:8px;
  }

  #customerScreen .faq-cat-icon{
    width:24px;
    height:24px;
  }

  #customerScreen .faq-cat-icon svg{
    width:14px;
    height:14px;
  }

  #customerScreen .faq-cat-title{
    font-size:13px;
  }

  #customerScreen .faq-list{
    gap:8px;
  }

  #customerScreen .faq-item{
    border-radius:10px;
  }

  #customerScreen .faq-question{
    padding:10px 12px;
    font-size:12px;
    gap:8px;
  }

  #customerScreen .faq-chevron{
    width:22px;
    height:22px;
    min-width:22px;
  }

  #customerScreen .faq-chevron svg{
    width:11px;
    height:11px;
  }

  #customerScreen .faq-answer-inner{
    padding:0 12px 12px;
    font-size:12px;
    line-height:1.55;
  }

  #customerScreen .faq-no-results{
    padding:24px 12px;
  }

  #customerScreen .faq-contact{
    margin-top:18px;
    padding:14px;
    gap:10px;
    align-items:flex-start;
  }

  #customerScreen .faq-contact-content h3{
    font-size:14px;
    margin-bottom:4px;
  }

  #customerScreen .faq-contact-content p{
    font-size:12px;
  }

  #customerScreen .faq-contact-btn{
    width:100%;
    justify-content:center;
    min-height:34px;
    padding:8px 12px;
    font-size:12px;
  }
}

@media (max-width:640px){
  #customerScreen #cust-faq{
    padding:0;
  }

  #customerScreen .faq-tabs{
    position:sticky;
    top:0;
    z-index:4;
    background:rgba(248,250,252,.92);
    margin:0 -2px 12px;
    padding:6px 2px 8px;
    border-bottom:1px solid rgba(226,232,240,.9);
  }

  #customerScreen .faq-tab{
    border:1px solid rgba(203,213,225,.9);
    background:#fff;
  }

  #customerScreen .faq-tab.active{
    background:#2f3742;
    border-color:#2f3742;
    color:#fff;
  }

  #customerScreen .faq-item{
    border-radius:9px;
    overflow:hidden;
  }

  #customerScreen .faq-question{
    min-height:42px;
  }
}

/* Force ticketpagina op 10px overal */
#engineerScreen #eng-tickets,
#engineerScreen #eng-tickets *{
  font-size:10px !important;
}

/* Expliciete fix voor beide status-filters */
#engineerScreen #tktFilterStatus,
#engineerScreen #ticketFilterStatus{
  font-size:10px !important;
}

#engineerScreen #tktFilterStatus option,
#engineerScreen #ticketFilterStatus option{
  font-size:10px !important;
}

/* ========= Admin Final Pass (1-12) ========= */
#engineerScreen{
  --adm-menu-fs:12px;
  --adm-menu-fw:600;
  --adm-menu-lh:1.3;
  --adm-menu-group-fs:10px;
  --adm-top-tab-fs:11px;
  --adm-kpi-gap:10px;
  --adm-kpi-pad:10px 10px 8px;
  --adm-kpi-minh:88px;
  --adm-filter-h:34px;
  --adm-card-gap:14px;
}

body.admin-density-comfortable #engineerScreen{
  --adm-menu-fs:13px;
  --adm-menu-group-fs:11px;
  --adm-top-tab-fs:12px;
  --adm-kpi-gap:12px;
  --adm-kpi-pad:12px 12px 10px;
  --adm-kpi-minh:98px;
  --adm-filter-h:36px;
}

body.admin-density-compact #engineerScreen{
  --adm-menu-fs:11px;
  --adm-menu-group-fs:9px;
  --adm-top-tab-fs:10px;
  --adm-kpi-gap:8px;
  --adm-kpi-pad:8px 8px 6px;
  --adm-kpi-minh:78px;
  --adm-filter-h:32px;
}

#engineerScreen .eng-side-nav .tn{
  font-size:var(--adm-menu-fs);
  font-weight:var(--adm-menu-fw);
  line-height:var(--adm-menu-lh);
}

#engineerScreen .eng-menu-group > summary{
  font-size:var(--adm-menu-group-fs);
  letter-spacing:.08em;
}

#engineerScreen .topbar .tn{
  font-size:var(--adm-top-tab-fs);
  min-height:30px;
}

#engineerScreen .kpi-row{gap:var(--adm-kpi-gap);margin-bottom:12px;}
#engineerScreen .kpi{padding:var(--adm-kpi-pad);min-height:var(--adm-kpi-minh);}
#engineerScreen .kpi-l{font-size:9px;letter-spacing:.11em;margin-bottom:4px;}
#engineerScreen .kpi-v{font-size:25px;line-height:1;letter-spacing:-.01em;}
#engineerScreen .kpi-u{font-size:10px;margin-top:3px;opacity:.9;}
#engineerScreen .kpi-i{font-size:19px;right:10px;top:10px;}

#engineerScreen .tab-pane > .card,
#engineerScreen .tab-pane > .grid2,
#engineerScreen .tab-pane > .dashboard-grid-2col,

#engineerScreen .card-hd-right .sel-sm,
#engineerScreen .card-hd-right .form-inp,
#engineerScreen .card-hd-right .btn-sm{min-height:var(--adm-filter-h);}

#engineerScreen .users-toolbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
#engineerScreen .users-toolbar .users-search{
  width:220px;
  min-height:34px;
  height:34px;
}
#engineerScreen .users-toolbar .sel-sm{
  min-width:140px;
}
#engineerScreen .users-pager{
  padding:10px 16px;
}

#engineerScreen #eng-tickets .card-hd-right{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

#engineerScreen #tktTable .tkt-row td:nth-child(3),
#engineerScreen #tktTable .tkt-row td:nth-child(12){
  color:#8b806f;
}

#engineerScreen #tktTable .tkt-row td:nth-child(4){
  font-weight:700;
  color:#1f2937;
}

#engineerScreen #tktTable .tkt-row td:nth-child(8){
  font-weight:700;
}

#engineerScreen #tktTable .tkt-row:hover td{
  background:#fff8ee;
}

#engineerScreen #tktTable .tkt-row:focus-visible{
  outline:2px solid rgba(232,137,13,.5);
  outline-offset:-2px;
}

#engineerScreen .site-mini-name{font-size:12px;font-weight:700;}
#engineerScreen .site-mini-meta{font-size:9px;line-height:1.35;}
#engineerScreen .site-mini-sv{font-size:13px;}
#engineerScreen .site-mini-sl{font-size:8px;letter-spacing:.06em;}
#engineerScreen #engPowerHint{
  font-size:10px;
  color:var(--sun);
  font-weight:600;
}

#engineerScreen .form-row{align-items:flex-start;}
#engineerScreen .modal-hd .modal-t{font-size:15px;}
#engineerScreen .modal-ft{position:sticky;bottom:0;z-index:2;}

#engineerScreen .empty-state,
#engineerScreen .chart-empty,
#engineerScreen .tbl-empty{
  padding:14px;
  border:1px dashed #e7dbca;
  border-radius:10px;
  background:#fffdf9;
}

#engineerScreen .err-state td{
  background:#fff1f2 !important;
  color:#b91c1c !important;
}

#engineerScreen .btn-sm,
#engineerScreen .btn-icon,
#engineerScreen .tn{
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

@media(max-width:768px){
  #engineerScreen .kpi-row{grid-template-columns:1fr 1fr;gap:8px;}
  #engineerScreen .kpi{min-height:80px;padding:8px;}
  #engineerScreen .kpi-v{font-size:22px;}
  #engineerScreen #eng-tickets .card-hd-right{display:grid;grid-template-columns:1fr 1fr;width:100%;}
  #engineerScreen #eng-tickets .card-hd-right > *{min-width:0;width:100%;}
  #engineerScreen #tktColumnsPanel{grid-template-columns:1fr 1fr;}
  #engineerScreen .action-btn{flex:1 1 calc(50% - 6px);}
}

/* ========= Visual finetune v15 + timeline ========= */
#engineerScreen{
  --adm-menu-fs:11px;
  --adm-menu-group-fs:9px;
}

#engineerScreen .eng-shell{
}

#engineerScreen .body{
  padding:18px 20px 24px;
}

#engineerScreen .card{
  border-radius:14px;
}

#engineerScreen .card-hd{
  padding:11px 14px;
}

#engineerScreen .card-bd-tickets{
  padding:8px 12px;
}

#engineerScreen .kpi-row{
  gap:8px;
  margin-bottom:10px;
}

#engineerScreen .kpi{
  min-height:76px;
  padding:8px 9px 7px;
}

#engineerScreen .kpi-l{
  font-size:8px;
  margin-bottom:3px;
}

#engineerScreen .kpi-v{
  font-size:25px;
}

#engineerScreen .kpi-u{
  font-size:9px;
}

#engineerScreen .users-toolbar .users-search{
  width:190px;
  min-height:32px;
  height:32px;
}

#engineerScreen .users-toolbar .sel-sm{
  min-width:118px;
}

#engineerScreen .users-pager .btn-sm:disabled{
  opacity:.45;
  cursor:not-allowed;
}

#engineerScreen .tkt-toolbar-main{
  flex-wrap:wrap;
  overflow-x:visible;
  scrollbar-width:none;
  max-width:100%;
}

#engineerScreen .tkt-toolbar-main::-webkit-scrollbar{
  display:none;
}

#engineerScreen .tkt-toolbar-main .sel-sm{
  min-width:126px;
}

#engineerScreen .tkt-toolbar-main #tktSearch{
  min-width:180px;
  flex:1 1 220px;
}

#engineerScreen .tkt-toolbar-actions{
  align-items:center;
}

#engineerScreen .tkt-toolbar-meta{
  padding:6px 12px;
}

#engineerScreen .timeline-toolbar{
  gap:8px;
  flex-wrap:wrap;
}

#engineerScreen .timeline-toolbar .card-hd-right{
  flex:1 1 520px;
  gap:8px;
  flex-wrap:wrap;
}

#engineerScreen .timeline-search{
  min-width:240px;
  max-width:460px;
  flex:1 1 280px;
}

#engineerScreen .timeline-meta-bar{
  padding:7px 12px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:#fcfaf7;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}

#engineerScreen .timeline-pinned{
  padding:7px 12px;
  border-bottom:1px solid #eadfce;
  background:#fff4df;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

#engineerScreen .timeline-site-chips{
  padding:8px 12px;
  border-bottom:1px solid #eadfce;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  background:#fffdfa;
}

#engineerScreen .timeline-chip{
  border:1px solid #eadfce;
  background:#fff;
  color:#4b5563;
  border-radius:999px;
  padding:4px 9px;
  font-size:10px;
  cursor:pointer;
}

#engineerScreen .timeline-chip.is-active{
  background:#f59e0b;
  color:#fff;
  border-color:#f59e0b;
}

#engineerScreen .timeline-layout{
  display:block;
  padding:10px 12px 12px;
}

#engineerScreen .timeline-col-view{
  border:1px solid #e8dece;
  border-radius:12px;
  background:#fffdfa;
  min-height:120px;
}

#engineerScreen .timeline-col-head{
  padding:8px 10px;
  border-bottom:1px solid #eee4d4;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#7a7062;
}

#engineerScreen .timeline-table-wrap{
  max-height:440px;
  overflow:auto;
}

#engineerScreen .timeline-site-link{
  border:none;
  background:none;
  color:#1f2937;
  font-weight:600;
  cursor:pointer;
  text-align:left;
  padding:0;
}
#engineerScreen .timeline-site-link:hover{text-decoration:underline;}

#engineerScreen .timeline-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:#f8f3eb;
}

#engineerScreen .timeline-row-main{
  cursor:pointer;
}

#engineerScreen .timeline-row-main:hover td{
  background:#fff8ee;
}

#engineerScreen .timeline-row-main.is-expanded td{
  background:#fff7eb;
}

#engineerScreen .timeline-row-follow td{
  background:#fff4e5 !important;
}

#engineerScreen .timeline-row-expand td{
  padding:0 !important;
  border-bottom:1px solid #eadfce !important;
  background:#fffaf3;
}

#engineerScreen .timeline-inline{
  padding:10px 12px;
}

#engineerScreen .timeline-inline-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

#engineerScreen .timeline-inline-replay{
  border:1px solid #eddcc7;
  border-radius:10px;
  background:#fffdf9;
  padding:4px 10px;
}

#engineerScreen .timeline-replay-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-bottom:8px;
}

#engineerScreen .timeline-metric{
  border:1px solid #eadfce;
  border-radius:8px;
  padding:6px 8px;
  background:#fff;
}

#engineerScreen .timeline-metric span{
  display:block;
  font-family:var(--mono);
  font-size:9px;
  color:#8b806f;
  margin-bottom:2px;
}

#engineerScreen .timeline-metric strong{
  font-size:11px;
}

#engineerScreen .timeline-pager{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:8px 10px;
  border-top:1px solid #eee4d4;
}


#engineerScreen .timeline-replay-item{
  display:flex;
  gap:9px;
  padding:8px 0;
  border-bottom:1px solid #eee3d6;
}

#engineerScreen .timeline-replay-item-inline{
  padding:7px 0;
}

#engineerScreen .timeline-replay-item:last-child{
  border-bottom:none;
}

#engineerScreen .timeline-follow-meta{
  color:#9a5500;
  font-weight:600;
}

#engineerScreen .timeline-item{
  position:relative;
  display:flex;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid #eee7dc;
}

#engineerScreen .timeline-item:last-child{
  border-bottom:none;
}

#engineerScreen .timeline-dot{
  width:10px;
  height:10px;
  margin-top:6px;
  border-radius:50%;
  flex-shrink:0;
  box-shadow:0 0 0 3px rgba(0,0,0,.04);
}

#engineerScreen .timeline-dot.is-red{background:#dc2626;}
#engineerScreen .timeline-dot.is-amber{background:#d97706;}
#engineerScreen .timeline-dot.is-green{background:#059669;}
#engineerScreen .timeline-dot.is-blue{background:#0ea5e9;}
#engineerScreen .timeline-dot.is-gray{background:#6b7280;}

#engineerScreen .timeline-body{
  min-width:0;
  flex:1;
}

#engineerScreen .timeline-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:3px;
}

#engineerScreen .timeline-kind{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid transparent;
}

#engineerScreen .timeline-kind.is-red{color:#b91c1c;background:#fee2e2;border-color:#fecaca;}
#engineerScreen .timeline-kind.is-amber{color:#92400e;background:#ffedd5;border-color:#fed7aa;}
#engineerScreen .timeline-kind.is-green{color:#166534;background:#dcfce7;border-color:#bbf7d0;}
#engineerScreen .timeline-kind.is-blue{color:#0c4a6e;background:#e0f2fe;border-color:#bae6fd;}
#engineerScreen .timeline-kind.is-gray{color:#374151;background:#f3f4f6;border-color:#e5e7eb;}

#engineerScreen .timeline-date{
  font-family:var(--mono);
  font-size:10px;
  color:#8b806f;
  white-space:nowrap;
}

#engineerScreen .timeline-title{
  font-size:12px;
  font-weight:700;
  color:#1f2937;
  line-height:1.25;
}

#engineerScreen .timeline-sub{
  margin-top:2px;
  font-family:var(--mono);
  font-size:10px;
  color:#8b806f;
  line-height:1.35;
}

#eng-timeline.timeline-compact .timeline-sub{
  display:none;
}

#eng-timeline.timeline-compact .timeline-inline-replay .timeline-sub{
  display:block;
}

#engMobNav .mob-nav-item i{
  margin-right:6px;
}

@media(max-width:900px){
  #engineerScreen .timeline-table th:nth-child(3),
  #engineerScreen .timeline-table td:nth-child(3),
  #engineerScreen .timeline-table th:nth-child(5),
  #engineerScreen .timeline-table td:nth-child(5){
    display:none;
  }
  #engineerScreen .timeline-replay-metrics{
    grid-template-columns:1fr;
  }
  #engineerScreen .timeline-search{
    min-width:160px;
    max-width:none;
  }
  #engineerScreen .timeline-top{
    flex-wrap:wrap;
  }
}

/* Customer timeline */
#customerScreen .timeline-table-wrap{
  max-height:460px;
  overflow:auto;
  border:1px solid #e8dece;
  border-radius:10px;
  background:#fffdfa;
}

/* Mobile: verberg Type+Site kolommen zodat tabel niet horizontaal scrollt.
   Type-info is al af te leiden uit kind-pill in beschrijving. Site is meestal
   single-site-context, of zichtbaar in scope-selector bovenin. */
@media (max-width: 640px) {
  #customerScreen .timeline-table th:nth-child(2),
  #customerScreen .timeline-table td:nth-child(2),
  #customerScreen .timeline-table th:nth-child(3),
  #customerScreen .timeline-table td:nth-child(3) {
    display: none;
  }
  #customerScreen .timeline-table th,
  #customerScreen .timeline-table td {
    padding: 8px 6px;
    font-size: 11px;
  }
  /* Tijd-cel compacter: alleen datum, geen tijd */
  #customerScreen .timeline-table td:first-child {
    white-space: nowrap;
    font-size: 10px;
  }
  /* Verlies-pill onder titel, niet inline */
  #customerScreen .timeline-loss-pill {
    margin-left: 0;
    margin-top: 4px;
    display: inline-block;
  }
}
#customerScreen .timeline-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:#f8f3eb;
}
#customerScreen .timeline-row-main{cursor:pointer;}
#customerScreen .timeline-row-main:hover td{background:#fff8ee;}
#customerScreen .timeline-row-main.is-expanded td{background:#fff7eb;}
#customerScreen .timeline-row-expand td{
  padding:0 !important;
  background:#fffaf3;
  border-bottom:1px solid #eadfce !important;
}
#customerScreen .timeline-pager{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:8px 0 0;
}
#customerScreen .timeline-kind{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid transparent;
}
#customerScreen .timeline-kind.is-red{color:#b91c1c;background:#fee2e2;border-color:#fecaca;}
#customerScreen .timeline-kind.is-amber{color:#92400e;background:#ffedd5;border-color:#fed7aa;}
#customerScreen .timeline-kind.is-green{color:#166534;background:#dcfce7;border-color:#bbf7d0;}
#customerScreen .timeline-kind.is-blue{color:#0c4a6e;background:#e0f2fe;border-color:#bae6fd;}
#customerScreen .timeline-sub{
  margin-top:2px;
  font-family:var(--mono);
  font-size:10px;
  color:#8b806f;
}
#customerScreen .timeline-inline{padding:10px 12px;}
#customerScreen .timeline-inline-replay{
  border:1px solid #eddcc7;
  border-radius:10px;
  background:#fffdf9;
  padding:4px 10px;
}
#customerScreen .timeline-replay-item{
  display:flex;
  gap:9px;
  padding:7px 0;
  border-bottom:1px solid #eee3d6;
}
#customerScreen .timeline-replay-item:last-child{border-bottom:none;}
#customerScreen .timeline-dot{
  width:10px;height:10px;margin-top:6px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(0,0,0,.04);
}
#customerScreen .timeline-dot.is-red{background:#dc2626;}
#customerScreen .timeline-dot.is-amber{background:#d97706;}
#customerScreen .timeline-dot.is-green{background:#059669;}
#customerScreen .timeline-dot.is-blue{background:#0ea5e9;}

/* === Final UI fine-tune pass (admin + customer timeline) === */
#engineerScreen{
  --eng-side-w:280px;
  --eng-side-w-collapsed:88px;
}

/* eng-nav-wrap + eng-shell backgrounds verwijderd — admin-shell.css is now
   source of truth (transparent + light theme). Old dark-theme overrides
   conflicted with new IA. */
#engineerScreen .eng-sidebar{
  width:var(--eng-side-w);
  border-radius:14px;
  gap:8px;
  padding:10px 8px 8px;
  overflow:hidden;
}

#engineerScreen .eng-sidebar.collapsed{
  width:var(--eng-side-w-collapsed);
}

#engineerScreen .eng-side-toggle{
  right:-8px;
}

#engineerScreen .eng-side-nav{
  gap:6px;
  padding-right:2px;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:none;
}

#engineerScreen .eng-side-nav::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

#engineerScreen .eng-menu-group > summary{
  font-size:var(--adm-menu-group-fs);
  letter-spacing:.09em;
}

#engineerScreen .eng-side-nav .tn{
  font-size:var(--adm-menu-fs);
  font-weight:var(--adm-menu-fw);
  line-height:var(--adm-menu-lh);
  min-height:32px;
  padding:6px 8px;
  border-radius:8px;
}

#engineerScreen .eng-item-ico{
  font-size:14px;
}

#engineerScreen .eng-item-txt{
  font-size:var(--adm-menu-fs);
}

#engineerScreen .eng-sidebar-foot{
  gap:6px;
}

#engineerScreen .eng-density-lbl{
  font-size:9px;
}

#engineerScreen .eng-density-sel{
  font-size:10px;
}

#engineerScreen .body{
  margin-left:300px;
  width:calc(100% - 300px);
  /* background verwijderd — gebruikt nu engineerScreen radial-gradient
     uit regel ~1466 (lichte tint). */
}

#engineerScreen .eng-shell.sidebar-collapsed .body,
#engineerScreen .eng-sidebar.collapsed ~ .body{
  margin-left:108px;
  width:calc(100% - 108px);
}

#engineerScreen .kpi-row{
  gap:var(--adm-kpi-gap);
  margin-bottom:10px;
}

#engineerScreen .kpi{
  padding:var(--adm-kpi-pad);
  min-height:var(--adm-kpi-minh);
  border-radius:12px;
}

#engineerScreen .kpi-l{
  margin-bottom:4px;
}

#engineerScreen .kpi-v{
  font-size:25px;
  line-height:1;
}

#engineerScreen .kpi-u{
  font-size:9px;
  margin-top:2px;
}

#engineerScreen #eng-tickets .card-hd{
  gap:8px;
}

#engineerScreen .tkt-toolbar-head{
  align-items:flex-start;
}

#engineerScreen .tkt-toolbar-main{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  overflow:hidden !important;
  scrollbar-width:none !important;
}

#engineerScreen .tkt-toolbar-main::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

#engineerScreen .tkt-toolbar-main .btn-sm,
#engineerScreen .tkt-toolbar-main .form-inp,
#engineerScreen .tkt-toolbar-main .sel-sm,
#engineerScreen .tkt-toolbar-actions .btn-sm,
#engineerScreen .tkt-toolbar-meta .btn-sm,
#engineerScreen #tktFilterStatus,
#engineerScreen #ticketFilterStatus{
  font-size:10px !important;
  min-height:var(--adm-filter-h);
}

#engineerScreen .tkt-toolbar-main #tktSearch{
  min-width:165px;
}

#engineerScreen .tkt-toolbar-meta{
  gap:6px;
  padding:7px 10px;
}

#engineerScreen .txt-mono-sm{
  font-size:9px;
}

@media(max-width:1280px){
  #engineerScreen .kpi-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:980px){
  #engineerScreen .body{
    margin-left:0 !important;
    width:100% !important;
  }
}

#customerScreen .timeline-table-wrap{
  max-height:420px;
}

#customerScreen .timeline-table th,
#customerScreen .timeline-table td{
  font-size:10px;
}

#customerScreen .timeline-kind{
  font-size:8px;
}

#customerScreen .timeline-inline{
  padding:8px 10px;
}

#customerScreen .timeline-pager .btn-sm{
  min-height:27px;
  font-size:10px;
}

/* === Admin theme tokens === (background overrides verwijderd — admin-shell.css
   beheert die nu in light-mode. Hier alleen accent-kleuren behouden.) */
#engineerScreen{
  --sun:#c57a1a;
  --sun2:#d28a2d;
  --red:#c75b5b;
  --adm-card-bg:#fff;
  --adm-card-border:#e2e8f0;
  --adm-ink:#111827;
  --adm-meta:#6b7280;
}

#engineerScreen .eng-side-nav .tn{
  color:#566174;
}

#engineerScreen .eng-side-nav .tn:hover{
  color:#2f3742;
  background:#e9edf3;
  border-color:#d7dee8;
}

#engineerScreen .eng-side-nav .tn.on{
  color:#2f3742;
  background:#e3ebf6;
  border-color:#cfd9e7;
  box-shadow:none;
}

#engineerScreen .card,
#engineerScreen .kpi{
  background:var(--adm-card-bg);
  border-color:var(--adm-card-border);
}

#engineerScreen .kpi::before{
  opacity:.72;
}

#engineerScreen .kpi-i{
  opacity:.05;
}

#engineerScreen .card-hd{
  background:#f4f6f9;
  border-bottom-color:#dbe1ea;
}

#engineerScreen .card-hd-t,
#engineerScreen .tab-title,
#engineerScreen .entity-title,
#engineerScreen .kpi-v{
  color:var(--adm-ink);
}

#engineerScreen .kpi-l,
#engineerScreen .kpi-u,
#engineerScreen .txt-mono-sm,
#engineerScreen .entity-sub,
#engineerScreen .tab-sub{
  color:var(--adm-meta);
}

#engineerScreen .btn-sun-s{
  background:#c57a1a;
  box-shadow:0 1px 4px rgba(197,122,26,.2);
}

#engineerScreen .btn-sun-s:hover{
  background:#d28a2d;
  box-shadow:0 2px 8px rgba(197,122,26,.26);
}

#engineerScreen .btn-ghost,
#engineerScreen .btn-icon{
  background:#eef2f6;
  border-color:#d2dae5 !important;
  color:#5d6a7c;
}

#engineerScreen .btn-ghost:hover,
#engineerScreen .btn-icon:hover{
  background:#e6ecf4;
  color:#364255;
}

#engineerScreen .tkt-badge{
  border-color:#d9dee6;
}

#engineerScreen .tkt-badge-open,
#engineerScreen .tkt-badge-in_progress{
  background:#f6eee3;
  color:#8a5a1e;
  border:1px solid #e6d3ba;
}

#engineerScreen .tkt-badge-resolved,
#engineerScreen .tkt-badge-closed{
  background:#e8f1eb;
  color:#2f6a46;
  border:1px solid #c9ddcf;
}








/* INVERTER (cust-inv-* + cust-mini-*) → verplaatst naar css/components/inverter.css (Fase 4.5b) */
.inv-search{min-width:220px;max-width:260px;height:34px;font-size:13px;background:#fff;}
.inv-search-mini{min-width:160px;max-width:180px;height:30px;font-size:12px;}
.inv-top-item{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid #dce2eb;background:#fff;}
.inv-top-item:last-child{border-bottom:none;}
.inv-top-name{font-size:13px;font-weight:600;color:var(--ink);}
.inv-top-sub{font-family:var(--mono);font-size:11px;color:var(--ink3);}
.inv-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;}
.inv-badge-ok{background:rgba(42,122,72,0.12);color:#2a7a48;}
.inv-badge-warn{background:rgba(212,160,23,0.12);color:#9a7a0a;}
.inv-badge-bad{background:rgba(192,57,43,0.12);color:#c0392b;}
.inv-state{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:600;}
.inv-state.online{background:rgba(42,122,72,0.12);color:#2a7a48;}
.inv-state.stale{background:rgba(212,160,23,0.12);color:#9a7a0a;}
.inv-state.offline{background:rgba(192,57,43,0.12);color:#c0392b;}
/* .cust-inv-detail-* → verplaatst naar css/components/inverter.css (Fase 4.5b) */
#customerScreen .tab-pane#cust-overview{
  font-size:13px;
}
#customerScreen .tab-pane#cust-overview .card-hd-t{
  font-size:17px;
}
/* #customerScreen #cust-overview .ckpi-v → verplaatst naar css/components/kpi.css */
/* .cust-inv-* responsive @1100/720 → verplaatst naar css/components/inverter.css (Fase 4.5b) */
@media (max-width: 1100px){
  .inv-search{min-width:130px;max-width:170px;}
  #customerScreen .tab-pane#cust-overview .card-hd-t{font-size:16px;}
}
@media (max-width: 720px){
  #customerScreen .tab-pane#cust-overview .card-hd-t{font-size:15px;}
}

/* IV Sweep (admin) */
#engineerScreen #eng-ivsweep .ivs-meta{margin-top:6px;color:var(--ink3);}
#engineerScreen #eng-ivsweep .ivs-table-wrap{overflow:auto;}
#engineerScreen #eng-ivsweep .ivs-table{min-width:980px;}
#engineerScreen #eng-ivsweep .ivs-table thead th{font-size:10px;letter-spacing:.12em;color:#6b7280;background:#eef2f7;}
#engineerScreen #eng-ivsweep .ivs-table tbody td{font-size:13px;cursor:pointer;}
#engineerScreen #eng-ivsweep .ivs-table tbody tr.ivs-row-on td{background:#fff8e9 !important;}


/* Mobile UX — customer portal (2026-06-28 sweep) */
@media (max-width: 640px) {
  /* Modals worden bottom-sheet op mobile */
  #customerScreen .modal-ov .modal {
    max-width: 100%;
    max-height: 92vh;
    margin: 8vh 0 0 0;
    border-radius: 16px 16px 0 0;
  }
  /* Tickets/storingen tabel — horizontaal scrollbaar */
  #customerScreen .timeline-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #customerScreen .timeline-table {
    min-width: 600px;
  }
  /* KPI tegels op mobile — 2 kolommen */
  #customerScreen .cust-kpi-grid,
  #customerScreen .cust-overview-kpi {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Charts kleiner op mobile */
  #customerScreen canvas {
    max-height: 240px !important;
  }
  /* Body padding kleiner */
  #customerScreen .cust-content {
    padding: 8px 12px !important;
  }
  /* Filter bar wraps */
  #customerScreen .alert-controls {
    flex-wrap: wrap;
    gap: 8px;
  }
  #customerScreen .alert-controls > div {
    flex: 1 1 calc(50% - 4px);
    min-width: 140px;
  }
}

/* Lang-switcher in mobile dropdown menu — toegevoegd 2026-06-30 */
.mob-nav-langs{
  display:flex;
  gap:4px;
  padding:10px 16px;
  flex-wrap:wrap;
  justify-content:center;
}
.mob-nav-langs .adm-lang-btn{
  padding:8px 14px;
  font-size:11px;
  min-width:40px;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Klikbare KPI tile hover-cue */
.ckpi-clickable { cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.ckpi-clickable:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.ckpi-clickable:focus-visible { outline: 2px solid var(--sun, #f59e0b); outline-offset: 2px; }


/* Admin site-detail: data-uitval-melding onder KPI-tegels (2026-07-01) */
.adm-loss-gap-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef2ff;
  color: #4338ca;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  margin: 8px 0 0 0;
  border: 1px solid #c7d2fe;
}
.adm-loss-gap-note i { font-size: 14px; }


/* Maintenance-mode knop op admin site-detail (2026-07-01) */
.adm-site-maint-host { margin-top: 10px; }
.adm-maint-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.adm-maint-btn i { font-size: 18px; }
.adm-maint-btn small { display: block; font-weight: 400; font-size: 11px; opacity: .85; }
.adm-maint-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

.adm-maint-active {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #fff;
  animation: adm-maint-pulse 2s ease-in-out infinite;
}
.adm-maint-idle {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
}
@keyframes adm-maint-pulse {
  0%,100% { box-shadow: 0 2px 6px rgba(220,38,38,0.3); }
  50%     { box-shadow: 0 2px 20px rgba(220,38,38,0.6); }
}


/* Site-detail activity feed (2026-07-01) */
.adm-act-list { display: flex; flex-direction: column; gap: 8px; }
.adm-act-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
}
.adm-act-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.adm-act-icon.blue   { background: #3b82f6; }
.adm-act-icon.green  { background: #10b981; }
.adm-act-icon.red    { background: #ef4444; }
.adm-act-icon.orange { background: #f59e0b; }
.adm-act-icon.gray   { background: #6b7280; }
.adm-act-body { min-width: 0; flex: 1; }
.adm-act-title { font-weight: 600; font-size: 13px; color: #111827; }
.adm-act-det { color: #6b7280; font-weight: 400; font-size: 12px; }
.adm-act-meta { font-size: 11px; color: #6b7280; font-family: var(--font-mono, monospace); margin-top: 2px; }


/* Site-detail asset cards (2026-07-02) */
.adm-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.adm-asset-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.adm-asset-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border-color: var(--sun, #f59e0b);
}
.adm-asset-card:focus-visible {
  outline: 2px solid var(--sun, #f59e0b);
  outline-offset: 2px;
}
.adm-asset-card-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.adm-asset-card-hd h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  line-height: 1.25;
}
.adm-asset-card-stats {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.adm-asset-card-stats > div { display: flex; flex-direction: column; gap: 2px; }
.adm-asset-card-stats dt {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
}
.adm-asset-card-stats dd {
  margin: 0;
  font-size: 13px;
  color: #374151;
  font-family: var(--font-mono, monospace);
}