:root {
  /* Exact blue of the Electramo logo (public/images/logo.png): used for all
     bars and all text. Only status colours (green/red/orange) and white text
     on the blue bars differ. */
  --brand: #10206c;
  --brand-hover: #1c3190;
  --ink: var(--brand);
  --navy: var(--brand);
  --steel: var(--brand);
  --steel-light: #8a97a3;
  --accent: #c5730a;
  --border: #e2e7eb;
  --panel: #ffffff;
  --bg: #eef1f4;
  --ok: #2f7a4f;
  --ok-bg: #e7f4ec;
  --bad: #b3401f;
  --bad-bg: #fbe9e4;
  --warn: #8a6d1f;
  --warn-bg: #fbf3de;
  --muted: var(--brand);
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); color: var(--navy); background: #fff; }
h1, h2 { font-weight: 600; }
a { color: var(--ink); }
a:hover { color: var(--accent); }
input, select, button, textarea { font: inherit; color: inherit; }
.container { max-width: 1400px; margin: 0 auto; padding: 24px; }
.narrow { max-width: 420px; margin-top: 80px; }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.warn { background: var(--warn-bg); }
.okbox { background: var(--ok-bg); }

.btn { background: var(--brand); color: #fff; border: none; border-radius: 7px; padding: 9px 16px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { background: var(--brand-hover); }
.btn.green { background: var(--ok); }
.btn.green:hover { background: #26633f; }
.btn:disabled { opacity: .5; cursor: default; }
/* Small, light buttons for actions in a table row (admin). */
.btn.small { padding: 5px 10px; font-size: 12px; white-space: nowrap; }
.btn.ghost { background: #fff; color: var(--brand); border: 1px solid var(--border); }
.btn.ghost:hover { background: #f1f3f6; }
.btn.ghost.ok { color: var(--ok); }
.btn.ghost.danger { color: var(--bad); }

.drawing { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; text-decoration: none; }
.drawing:hover { background: #f1f3f6; }
.incl { font-size: 11px; opacity: .7; white-space: nowrap; }

/* Admin on the portal: "Bekijk prijzen als <klant>". */
.view-as { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; }
.view-as label { font-weight: 600; }
.view-as select { background: #f1f3f6; border: none; border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--brand); min-width: 260px; }

/* Admin tabs: Portaalgebruikers / Beheerders / Prijs op aanvraag / Logboek. */
.admin-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 8px 0 20px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs a { padding: 10px 16px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--brand); opacity: .55; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover { opacity: .85; }
.tabs a.active { opacity: 1; border-bottom-color: var(--brand); }
.tab-count { display: inline-block; background: #f1f3f6; border-radius: 10px; padding: 0 7px; font-size: 12px; margin-left: 4px; }
.tab-count.bad { background: var(--bad-bg); color: var(--bad); }
.admin-top form { padding-bottom: 8px; }
.admin h2 { font-size: 17px; }

/* Admin screens: calmer than the customer portal - light table headers and
   search box instead of solid blue, so only the main buttons stand out. */
.admin thead th { background: #f1f3f6; color: var(--brand); box-shadow: none; }
.admin .filters input[type=search] { background: #fff; color: var(--brand); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; }
.admin .filters input[type=search]::placeholder { color: #8a97a3; }
.admin .filters select { background: #f1f3f6; border: none; border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--brand); }
.linkbtn { background: none; border: none; color: var(--ink); cursor: pointer; padding: 0; text-decoration: underline; }

table { width: 100%; border-collapse: collapse; }
thead th { position: sticky; top: var(--header-h, 0px); z-index: 1; background: var(--brand); color: #fff; text-align: left; padding: 10px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(16, 32, 108, .3); }
thead th:first-child { border-top-left-radius: 8px; }
thead th:last-child { border-top-right-radius: 8px; }
.nowrap { white-space: nowrap; }
tbody td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: top; }
tbody tr:hover { background: #f5f8fa; }
.right { text-align: right; }
.muted { color: var(--muted); font-size: 13px; }
.ok { color: var(--ok); } .bad { color: var(--bad); }
.error { color: var(--bad); font-size: 14px; }

.flag { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.flag-ok { background: var(--ok-bg); color: var(--ok); }
.flag-low { background: var(--warn-bg); color: var(--warn); }
.flag-zero { background: var(--bad-bg); color: var(--bad); }

header.top { position: sticky; top: 0; z-index: 20; background: var(--panel); border-bottom: 1px solid var(--border); padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
header.top .brand { display: flex; align-items: center; gap: 14px; }
header.top .brand .logo { height: 35px; width: auto; display: block; }
header.top nav { display: flex; gap: 16px; align-items: center; }

/* Geen balk voor de inlogschermen: enkel een kleine, onopvallende regel
   rechtsboven (taal + testomgeving), zonder rand of eigen achtergrond. */
.pre-login-bar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; max-width: 1100px; margin: 0 auto; padding: 20px 24px 0; }

.test-badge { display: inline-flex; align-items: center; background: var(--bad); color: #fff; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-radius: 20px; padding: 4px 12px; }

/* Taalkiezer: NL/EN/FR als platte tekst naast elkaar, gescheiden door een dun
   streepje, zonder kader. Gekozen taal in het blauw, de andere lichtgrijs. */
.lang-switch { display: inline-flex; align-items: center; }
.lang-switch button, .lang-switch a, .lang-switch span { border: none; background: transparent; color: var(--steel-light); font-size: 13px; font-weight: 400; padding: 4px 8px; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.4; }
.lang-switch > * + * { border-left: 1px solid var(--border); }
.lang-switch button:hover, .lang-switch a:hover { color: var(--brand); background: transparent; }
.lang-switch .active { color: var(--brand); font-weight: 500; cursor: default; }

/* Beheermenu: hamburger-icoon dat bij hover (muis erop) een dropdown toont
   en open blijft zolang de muis erop staat. */
.admin-menu { position: relative; display: inline-block; }
.admin-menu-toggle { background: transparent; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--navy); padding: 6px 10px; border-radius: 8px; }
.admin-menu-toggle:hover { background: #f5f8fa; }
.admin-menu-dropdown {
  display: none; position: absolute; right: 0; top: 100%; z-index: 10;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 32, .12);
  min-width: 170px; padding: 6px; padding-top: 10px;
}
.admin-menu:hover .admin-menu-dropdown,
.admin-menu:focus-within .admin-menu-dropdown { display: block; }
.admin-menu-dropdown a, .admin-menu-dropdown button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px;
  background: none; border: none; color: var(--navy); text-decoration: none;
  font-size: 13px; font-weight: 400; cursor: pointer;
}
.admin-menu-dropdown a:hover, .admin-menu-dropdown button:hover { background: #f5f8fa; }

form.stack { display: grid; gap: 12px; }
form.stack input { width: 100%; padding: 9px 12px; margin-top: 4px; border: 1px solid var(--border); border-radius: 7px; }
form.stack label { font-size: 13px; font-weight: 600; color: var(--steel); }
.filters { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.filters input[type=search] { background: var(--brand); color: #fff; border: none; border-radius: 10px; padding: 12px 16px; font-size: 13px; flex: 1 1 240px; }
.filters input[type=search]::placeholder { color: rgba(255,255,255,.55); }
code { word-break: break-all; }
.search-row { margin: 0 0 16px; }
.filter-row { margin: 0 0 12px; align-items: flex-end; gap: 10px; }
/* The select boxes shrink a little (up to 150px) so all filters fit on one line. */
.filter-row .filter-field { width: auto; flex: 1 1 110px; min-width: 95px; max-width: 150px; }
/* "x artikelen gevonden", "Alleen op voorraad" and "Filters wissen": one line below the filters. */
.filter-extra { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; font-size: 13px; margin: 0 0 10px; }
.filter-extra .found-count { margin: 0; }
.filter-extra .linkbtn { font-size: 13px; }

.found-count { margin-bottom: 10px; font-size: 13px; color: var(--steel); }
.found-count b { color: var(--ink); }

/* Filter-velden boven de artikellijst (vermogen, bouwgrootte, ...): vaste
   breedte, lichtgrijze achtergrond zonder rand, zoals het oude portaal. */
.filter-field { width: 150px; flex: none; }
.filter-field label { font-size: 12px; font-weight: 500; color: var(--steel); display: block; margin-bottom: 4px; }
.filter-field select { width: 100%; background: #f1f3f6; border: none; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Address bar always visible: fixed to the bottom of the window. The page
   gets extra room at the bottom (--footer-h, set by layout.blade.php) so the
   last rows are never hidden behind it. */
.site-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; background: var(--brand); padding: 12px 24px; }
body { padding-bottom: calc(var(--footer-h, 80px) + 16px); }

/* Productpagina: de pagina zelf scrolt niet, enkel de artikellijst (met een
   eigen schuifbalk, de tabelkop blijft bovenaan staan). Is het venster erg
   laag, dan krijgt de lijst minstens 280px en scrolt de rest van de pagina mee. */
.table-scroll { overflow-y: auto; overflow-x: auto; }
body.fit { height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding-bottom: 0; }
body.fit header.top, body.fit .site-footer { flex: none; }
body.fit .site-footer { position: static; }
body.fit main.container { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; overflow-y: auto; }
body.fit main.container > * { flex: none; }
body.fit main.container > .table-scroll { flex: 1 0 280px; }
body.fit .table-scroll thead th { top: 0; }
.site-footer-logo { height: 26px; width: auto; display: block; filter: brightness(0) invert(1); }
.site-footer-info { display: flex; flex-wrap: wrap; gap: 40px; color: rgba(255,255,255,.75); font-size: 12px; text-align: right; line-height: 1.5; }
.site-footer-company { color: #fff; font-weight: 600; margin-bottom: 2px; }