/* === PORTAL UI BUNDLE === */


/* --- style_fullwidth_hard.css --- */

/* === Hard Fullscreen override (container + main + card + header + footer) === */
@media (min-width: 1024px){
  .container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header,
  footer {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .card {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}


/* --- portal_nav_dropin.css --- */

/* === Drop-in: restyle existing .header as bold top navigation === */
:root{
  --ink:#161a1d;
  --bg:#f6f7f9;
  --surface:#ffffff;
  --muted:#a0a6ad;
  --brand:#2bb673;
}

/* Make the old header a sticky top bar */
.header{
  position: sticky; top: 0; z-index: 1000;
  background: linear-gradient(180deg,#0f1720 0%, #121a22 100%);
  color: #e7edf1;
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  padding: 12px 22px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Layout for links inside header */
.header a{
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border: 1px solid rgba(255,255,255,.14);
  color: #eaf1f3; text-decoration: none; font-weight: 600; font-size: 14px;
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .05s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  margin-right: 8px;
}
.header a:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); }
.header a:active{ transform: translateY(0); }

/* Emphasize primary actions if you add a class */
.header a.primary{
  background: linear-gradient(180deg, rgba(43,182,115,1) 0%, rgba(26,144,92,1) 100%);
  color: #062012;
  border-color: rgba(11,92,52,.6);
  box-shadow: 0 6px 14px rgba(43,182,115,.35), inset 0 0 0 1px rgba(255,255,255,.35);
}

/* Page shell spacing so content doesn't hug screen edges */
@media (min-width: 1024px){
  .main{ padding-left: 28px !important; padding-right: 28px !important; }
}


/* --- style_dark_portal.css --- */

/* === De Laadpaal Man — Safe Dark Theme (CSS-only) ===
   Drop-in skin; no HTML/PHP changes required.
   Load this AFTER your current style.css.
*/

:root{
  --bg:#0f1216;
  --bg-elev:#171b22;
  --bg-elev-2:#1d222b;
  --ink:#e5e9ef;
  --ink-dim:#b7c0cb;
  --ink-muted:#8a93a0;
  --line:#2a3039;
  --brand:#2bb673;
  --brand-2:#1a905c;
  --accent:#6ea8fe;
  --danger:#ef476f;
  --ok:#3ddc97;
  --warn:#f9c74f;
}

/* page background and base text */
html, body{ background: var(--bg) !important; color: var(--ink) !important; }

/* header (existing .header) */
.header{
  background: #0d1117 !important;
  color: var(--ink) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.35) !important;
  border-radius: 0 !important;
}
.header a{
  background: rgba(255,255,255,.04) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
}
.header a:hover{ background: rgba(255,255,255,.10) !important; }
.header a.active{ background: rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.32) !important; }

/* general containers */
.container, .main{ background: transparent !important; }
.card{
  background: var(--bg-elev) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.35) !important;
}

/* tables */
table{
  background: var(--bg-elev) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
thead th{
  background: var(--bg-elev-2) !important;
  color: var(--ink-dim) !important;
  border-bottom: 1px solid var(--line) !important;
}
tbody tr + tr td{ border-top: 1px solid var(--line) !important; }
tbody tr:hover{ background: #1a1f27 !important; }

/* inputs */
input[type="text"], input[type="search"], input[type="number"], select, textarea{
  background: #0f141b !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder{ color: var(--ink-muted) !important; }
input:focus, select:focus, textarea:focus{ box-shadow: 0 0 0 3px rgba(43,182,115,.22) !important; border-color: #2bb673 !important; }

/* buttons */
button, .button, .btn, input[type="submit"]{
  background: #0f141b !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.35) !important;
}
button:hover, .button:hover, .btn:hover{ background: #151b24 !important; }
.btn--brand, .button.primary{
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  border-color: #0b5c34 !important;
  color: #071f13 !important;
  box-shadow: 0 8px 18px rgba(43,182,115,.35), inset 0 0 0 1px rgba(255,255,255,.35) !important;
}
.btn--danger{ background: linear-gradient(180deg,#ff91ad,#ef476f) !important; border-color: #8f1230 !important; color: #fff !important; }

/* badges/chips */
.badge, .status, .tag{
  display:inline-flex; align-items:center; height:20px; padding:0 8px;
  border-radius:999px; font-size:12px; font-weight:700;
  border: 1px solid var(--line);
}
.badge.open, .status.open{ background:#2a2f3a; color:#e0e6f0; }
.badge.accepted, .status.accepted{ background:#133822; border-color:#1f5b3a; color:#94f3c1; }
.badge.draft, .status.draft{ background:#232833; color:#c1c8d4; }

/* links */
a{ color: #a7c5ff !important; }
a:hover{ color: #c9d9ff !important; text-decoration: none !important; }

/* footer */
footer{ background: transparent !important; color: var(--ink-muted) !important; border-top: 1px solid var(--line) !important; }

/* tidy spacing for main blocks */
.main > *{ margin-bottom: 16px !important; }


/* --- style_dark_2025.css --- */

/* === De Laadpaal Man — Dark 2025 polish (CSS-only, drop-in) ===
   Laad dit NA je huidige styles in. Raakt geen PHP of data.
*/

:root{
  --bg:#0e1116;
  --bg-elev:#161a1f;
  --bg-elev-2:#1b2230;
  --ink:#e8ecf2;
  --ink-d:#c6ced9;
  --muted:#94a0b0;
  --line:#2a3340;
  --brand:#2bb673;
  --brand-d:#1a905c;
  --accent:#78a9ff;
  --danger:#ef476f;
  --ok:#3ddc97;
  --warn:#f9c74f;
}

/* Typografie */
html, body{ font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
h1,h2,h3{ margin:0 0 12px 0; letter-spacing:.2px; color:var(--ink); }
h1{ font-size: 32px; line-height:1.15; }
h2{ font-size: 22px; line-height:1.25; color: var(--ink-d); }
h3{ font-size: 18px; line-height:1.3; color: var(--ink-d); }
p, li, td, th{ font-size: 14.5px; }

/* Layout ademruimte */
.main{ padding: 24px 32px !important; }
.card{ border-radius: 16px !important; padding: 18px !important; background: var(--bg-elev) !important; border: 1px solid var(--line) !important; box-shadow: 0 8px 26px rgba(0,0,0,.35) !important; }
footer{ padding: 18px 32px !important; color: var(--muted) !important; }

/* Links en knoppen */
a{ color: var(--accent) !important; text-decoration: none !important; }
a:hover{ text-decoration: underline !important; }
.button, .btn, button, input[type="submit"], input[type="button"]{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 14px; border-radius:10px;
  border:1px solid var(--line); background:#0f141b; color:var(--ink);
  font-weight:600; cursor:pointer; transition:transform .05s, box-shadow .2s, background .2s, border-color .2s;
}
.button:hover, .btn:hover, button:hover{ transform:translateY(-1px); background:#141b25; }
.button.primary, .btn--brand{ background: linear-gradient(180deg,var(--brand) 0%, var(--brand-d) 100%); border-color:#0b5c34; color:#062012; box-shadow: 0 8px 18px rgba(43,182,115,.35), inset 0 0 0 1px rgba(255,255,255,.3); }
.button.danger, .btn--danger{ background: linear-gradient(180deg,#ff91ad,#ef476f); border-color:#8f1230; color:#fff; }

/* Zoeken/inputs */
input[type="text"], input[type="search"], input[type="number"], select, textarea{
  background: #0f141b !important; color: var(--ink) !important;
  border:1px solid var(--line) !important; border-radius: 10px !important;
  outline:none !important;
}
input::placeholder, textarea::placeholder{ color: #8893a3 !important; }
input:focus, select:focus, textarea:focus{ box-shadow: 0 0 0 3px rgba(120,169,255,.25) !important; border-color:#3b82f6 !important; }

/* Tabellen: moderner en minder 2009 */
table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--bg-elev) !important; border:1px solid var(--line) !important; border-radius:12px !important; overflow:hidden; }
thead th{ background: var(--bg-elev-2) !important; color:#c5cedb !important; text-transform:none; letter-spacing:.2px; font-weight:700; font-size:13px; border-bottom:1px solid var(--line) !important; }
th, td{ padding: 12px 14px !important; }
tbody tr + tr td{ border-top:1px solid var(--line) !important; }
tbody tr:hover{ background:#151b25 !important; }
td .actions, .actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* Status badges */
.badge, .status, .tag{
  display:inline-flex; align-items:center; height:22px; padding:0 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.2px; border: 1px solid var(--line);
}
.badge.open, .status.open{ background:#222a38; color:#d9e2ef; }
.badge.accepted, .status.accepted{ background:#133822; border-color:#1f5b3a; color:#9cf3c6; }
.badge.draft, .status.draft{ background:#2b2f38; color:#cbd5e1; }

/* Grid voor item-kaarten (als je die pagina gebruikt) */
.grid{ display:grid; gap:14px; grid-template-columns: repeat(12, 1fr); }
.grid--items > *{ grid-column: span 3; } /* 4 per rij op desktop */
@media (max-width: 1200px){ .grid--items > *{ grid-column: span 4; } } /* 3 per rij */
@media (max-width: 900px){ .grid--items > *{ grid-column: span 6; } }   /* 2 per rij */
@media (max-width: 640px){ .grid--items > *{ grid-column: span 12; } }  /* 1 per rij */

.item-card{
  background: var(--bg-elev) !important; border:1px solid var(--line) !important;
  border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:10px;
  transition: transform .05s, box-shadow .2s, border-color .2s;
}
.item-card img{ width:100%; height:160px; object-fit:contain; border-radius:10px; background:#0f141b; }
.item-card:hover{ transform:translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.35); border-color:#39485c; }
.item-card .meta{ font-size:12px; color:#9aa6b6; }
.item-card .title{ font-weight:700; }
.item-card .price{ font-weight:800; color:#eaeef4; }


/* --- style_dashboard_hero_buttons.css --- */

/* === De Laadpaal Man — Hero Buttons for Dashboard === */

.dashboard-buttons{
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 40px auto;
  max-width: 1000px;
}

.dashboard-buttons a{
  flex: 1 1 28%;
  min-width: 220px;
  max-width: 320px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 16px;
  background: linear-gradient(180deg, #2bb673 0%, #1a905c 100%);
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(43,182,115,.35);
  transition: transform .05s ease, box-shadow .2s ease;
  text-decoration: none !important;
}

.dashboard-buttons a:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(43,182,115,.45);
}

.dashboard-buttons a:active{
  transform: translateY(0);
}

/* Responsive stacking on narrow screens */
@media (max-width: 800px){
  .dashboard-buttons{ flex-direction: column; align-items: center; }
  .dashboard-buttons a{ width: 100%; max-width: none; }
}



/* === integrated offerte fullwidth === */

/* === Nieuwe offerte formulier full-width layout === */

.main form{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  margin-bottom: 24px;
}

.main form label{
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink);
  font-size: 14px;
}

.main form input[type="text"],
.main form input[type="number"],
.main form select{
  flex: 1;
  min-width: 200px;
  padding: 10px 12px;
}

.main form textarea{
  flex: 1 1 100%;
  width: 100% !important;
  min-height: 120px;
  padding: 12px;
}



/* === Scoped fix: only the first form (Nieuwe offerte) is full-width; rest unchanged === */

/* Undo the broad rule */
.main form{ display:block; gap:0; width:auto; margin:0; }

/* Target only the first form under .main (the header form in 'Nieuwe offerte') */
.main > form:first-of-type{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  width:100%;
  margin-bottom:24px;
}

.main > form:first-of-type label{
  flex: 1 1 240px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.main > form:first-of-type input[type="text"],
.main > form:first-of-type input[type="number"],
.main > form:first-of-type select{
  flex: 1;
  min-width: 220px;
  padding: 10px 12px;
}

.main > form:first-of-type textarea{
  flex: 1 1 100%;
  width: 100% !important;
  min-height: 140px;
  padding: 12px;
}

/* Ensure the Artikelen-sectie en regels daaronder maximale breedte houden */
.main h2 + *, .main h2 + .grid, .main h2 + div{
  width: 100%;
}



/* === Nieuwe offerte formulier verbeterd === */

/* Zet textarea (Aangepaste omschrijving) onder de klant-selectie en veel breder */
.main > form:first-of-type textarea {
  flex: 1 1 100%;
  width: 100% !important;
  min-height: 200px;
  padding: 14px;
  margin-top: 12px;
}



/* === Nieuwe offerte formulier: textarea onder klant en full width === */
.main > form:first-of-type textarea {
  flex: 1 1 100%;
  width: 100% !important;
  min-height: 200px;
  padding: 14px;
  margin-top: 16px;
  display: block;
  order: 99;
}



/* === Nieuwe offerte: textarea onder 'Klant' en veel breder === */

/* Fallback: reset generic form layout so only the first form is flex */
.main > form:first-of-type{ display:flex; flex-wrap:wrap; gap:16px; width:100%; }

/* Zorg dat labels flex-items zijn */
.main > form:first-of-type > label{ flex:1 1 260px; min-width:260px; }

/* 1) Moderne browsers: selecteer het label met de textarea en duw 'm naar beneden */
.main > form:first-of-type > label:has(textarea){
  order: 99;
  flex: 1 1 100%;
}

/* 2) Fallback: als :has() niet werkt, neem de laatste label als de omschrijving */
.main > form:first-of-type > label:last-of-type{
  order: 99;
  flex: 1 1 100%;
}

/* Maak de textarea ruimer en echt breed */
.main > form:first-of-type textarea{
  width: 100% !important;
  min-height: 220px;
  padding: 14px;
  resize: vertical;
}