/* Extra styles voor de Garantie dashboard mockups. Bouwt voort op ../../assets/css/style.css */
:root { --blue: #2f6fb3; --blue-trans: rgba(47,111,179,.1); --green-trans: rgba(87,196,90,.12); }

/* ---------- Mockup tooling (niet bouwen, alleen voor de demo) ---------- */
#mockbar { position: fixed; left: 12px; bottom: 12px; z-index: 2000; background: #1f1f1f; color: #fff; border-radius: 6px;
  padding: 8px 12px; font-size: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; max-width: calc(100vw - 90px);
  box-shadow: 0 4px 16px rgba(0,0,0,.3); }
#mockbar label { margin: 0 6px 0 0; color: #bbb; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
#mockbar select { font-size: 12px; padding: 2px 22px 2px 6px; border-radius: 3px; border: 0; width: auto; display: inline-block; }
#mockbar .mock-tag { background: var(--orange); color: #000; font-weight: 700; padding: 1px 6px; border-radius: 3px; font-size: 10px; }
#mockbar button { font-size: 12px; }
.dev-pin { display: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue);
  color: #fff; font-size: 11px; font-weight: 700; font-style: normal; margin: 0 4px; vertical-align: middle; cursor: pointer; text-transform: none;
  box-shadow: 0 0 0 3px rgba(47,111,179,.25); flex: 0 0 auto; }
body.devmode .dev-pin { display: inline-flex; }
body.devmode .is-new { outline: 2px dashed var(--blue); outline-offset: 2px; }
#devnotes { width: 460px; max-width: 100vw; z-index: 2100; }
#devnotes h6 { text-transform: uppercase; font-size: 12px; letter-spacing: .05em; color: var(--gray); margin-top: 1.5rem; }
#devnotes .note { display: flex; gap: 8px; margin-bottom: 12px; font-size: 14px; }
#devnotes .note .dev-pin { display: inline-flex; margin-top: 2px; }
#devnotes .note.flash { background: var(--blue-trans); }
#devnotes code { color: var(--red); font-size: 12px; }
#devnotes ul { padding-left: 1.1rem; font-size: 14px; }
.legend-new { display:inline-block; width:14px; height:14px; border:2px dashed var(--blue); vertical-align:middle; margin-right:4px; }

/* ---------- Rechten (zie mockup.js) ---------- */
.perm-hidden { display: none !important; }

/* ---------- Nieuw menu-item ---------- */
.nav-new-pill { background: var(--red); color: #fff; font-size: 9px; padding: 1px 5px; border-radius: 8px; margin-left: 4px; vertical-align: top; text-transform: uppercase; }

/* ---------- Statusbadges ---------- */
.st { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 3px; color: #fff; white-space: nowrap; }
.st.green { background: var(--green); }
.st.orange { background: var(--orange); }
.st.red { background: var(--red); }
.st.gray { background: var(--gray); }
.st.white { background: #fff; color: var(--dark-gray); border: 1px solid var(--gray); }
.st.blue { background: var(--blue); }
.st.outline-red { background: #fff; color: var(--red); border: 1px solid var(--red); }
.st.outline-green { background: #fff; color: #2f8f33; border: 1px solid var(--green); }
.st-sub { display:block; font-size: 11px; color: var(--gray); margin-top: 2px; }

/* ---------- Page headers ---------- */
.page-head { background: #fff; }
body { padding-bottom: 70px; }
.page-head h1 { margin-bottom: .5rem; }
.breadcrumb-lite { font-size: 13px; color: var(--gray); }
.breadcrumb-lite a { color: var(--gray); }

/* ---------- Selectiebalk ---------- */
.filterbar { background: var(--light-gray); padding: 12px 0; }
.filterbar .lbl { font-size: 12px; text-transform: uppercase; color: var(--gray); margin-bottom: 3px; display:block; }
.statusbtns .btn { height: auto; min-width: 44px; padding: 4px 10px; font-size: 13px; line-height: 20px; display:inline-flex; gap:6px; align-items:center; }
.statusbtns .btn .cnt { font-weight: 700; }
.statusbtns .btn.green { --bs-btn-color: var(--green); --bs-btn-border-color: var(--green); background:#fff; color: var(--green) !important; }
.statusbtns .btn.orange { background:#fff; color: var(--orange) !important; }
.statusbtns .btn.red { background:#fff; color: var(--red) !important; }
.statusbtns .btn.white { background:#fff; color: var(--dark-gray) !important; }
.statusbtns .btn-check:checked + .btn.green { background: var(--green); color:#fff !important; }
.statusbtns .btn-check:checked + .btn.orange { background: var(--orange); color:#fff !important; }
.statusbtns .btn-check:checked + .btn.red { background: var(--red); color:#fff !important; }
.statusbtns .btn-check:checked + .btn.white { background: var(--gray); color:#fff !important; border-color: var(--gray); }

/* ---------- KPI panelen ---------- */
.kpi { border: 1px solid var(--light-gray); border-radius: 0; padding: 18px 20px; height: 100%; cursor: pointer; background:#fff; transition: .15s; }
.kpi:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-2px); }
.kpi .num { font-size: 32px; font-weight: 700; line-height: 1.1; }
.kpi .lbl2 { font-size: 13px; color: var(--gray); }
.kpi.k-orange { border-top: 4px solid var(--orange); }
.kpi.k-green { border-top: 4px solid var(--green); }
.kpi.k-red { border-top: 4px solid var(--red); }
.kpi.k-gray { border-top: 4px solid var(--gray); }

/* ---------- Tabellen ---------- */
table.tbl { width: 100%; font-size: 14px; }
table.tbl thead th { text-transform: uppercase; font-size: 12px; padding: 8px; border-bottom: 2px solid var(--dark-gray); white-space: nowrap; background:#fff; }
table.tbl tbody td { padding: 9px 8px; border-bottom: 1px solid rgb(222,226,230); vertical-align: middle; }
table.tbl tbody tr.clickable { cursor: pointer; }
table.tbl tbody tr.clickable:hover td { background: var(--light-gray); }
table.tbl td.rowstat { width: 6px; padding: 0; }
table.tbl tr.s-green td.rowstat { background: var(--green); }
table.tbl tr.s-orange td.rowstat { background: var(--orange); }
table.tbl tr.s-red td.rowstat { background: var(--red); }
table.tbl tr.s-white td.rowstat { background: var(--gray); }
table.tbl tr.is-locked td { color: #aaa; }
table.tbl tr.is-locked { cursor: not-allowed; }
.sortable { cursor: pointer; }
.sortable::after { content: "\f0dc"; font: normal 11px "Font Awesome 6 Pro"; margin-left: 5px; color: var(--mid-gray); }
.vin { font-family: Consolas, monospace; font-size: 13px; }
.pager { display:flex; gap:4px; align-items:center; justify-content: space-between; font-size: 14px; }
.pager .pg { border: 1px solid var(--mid-gray); padding: 3px 10px; background:#fff; cursor:pointer; }
.pager .pg.active { background: var(--red); border-color: var(--red); color:#fff; }

/* ---------- Document-statuskaarten ---------- */
.doc-card { border: 1px solid var(--mid-gray); padding: 14px 16px; margin-bottom: 12px; background: #fff; }
.doc-card .doc-title { font-weight: 700; }
.doc-card.d-missing { border-left: 5px solid var(--red); }
.doc-card.d-pending { border-left: 5px solid var(--orange); }
.doc-card.d-ok { border-left: 5px solid var(--green); }
.doc-card.d-rejected { border-left: 5px solid var(--red); background: rgba(217,13,22,.04); }
.doc-card .reject-reason { background: #fff; border: 1px solid var(--red); padding: 8px 10px; font-size: 13px; margin-top: 8px; }
.dropzone-lite { border: 2px dashed var(--mid-gray); padding: 14px; text-align:center; color: var(--gray); font-size: 13px; cursor: pointer; }
.dropzone-lite:hover { border-color: var(--red); color: var(--red); }
.timeline { list-style: none; padding-left: 0; font-size: 13px; }
.timeline li { padding: 4px 0 4px 18px; border-left: 2px solid var(--mid-gray); position: relative; }
.timeline li::before { content:""; position:absolute; left:-6px; top:10px; width:10px; height:10px; border-radius:50%; background: var(--gray); }
.timeline li.ev-ok::before { background: var(--green); }
.timeline li.ev-bad::before { background: var(--red); }

/* ---------- Detailpagina ---------- */
.detail-hero { background: var(--light-gray); padding: 24px 0; }
.detail-hero img.machine { max-height: 130px; max-width: 100%; }
.kv { font-size: 14px; }
.kv .row { padding: 7px 0; border-bottom: 1px solid var(--light-gray); }
.kv .row > div:first-child { color: var(--gray); }
.tabs-lite .nav-link { color: var(--dark-gray); border: 0; border-bottom: 3px solid transparent; border-radius: 0; text-transform: uppercase; font-size: 13px; font-weight: 700; }
.tabs-lite .nav-link.active { color: var(--red); border-bottom-color: var(--red); background: none; }
.tabs-lite .nav-link .badge { background: var(--red); }
.tabs-lite .nav-link .badge.badge-orange { background: var(--orange); }
.sidepanel { border: 1px solid var(--light-gray); padding: 16px; margin-bottom: 16px; background: #fff; }
.sidepanel h6 { text-transform: uppercase; font-size: 12px; color: var(--gray); }
.sidepanel a.lnk i { width: 22px; flex: 0 0 22px; text-align: center; line-height: 1; }
.sidepanel a.lnk { display:flex; align-items:center; gap:8px; padding: 6px 0; text-decoration:none; border-bottom: 1px solid var(--light-gray); }
.sidepanel a.lnk:hover { color: var(--red); }
.alert-lite { border-left: 5px solid var(--orange); background: var(--orange-trans); padding: 10px 14px; font-size: 14px; margin-bottom: 14px; }
.alert-lite.a-red { border-left-color: var(--red); background: var(--red-trans); }
.alert-lite.a-green { border-left-color: var(--green); background: var(--green-trans); }
.alert-lite.a-blue { border-left-color: var(--blue); background: var(--blue-trans); }

/* ---------- Forecast uitbreidingen ---------- */
.chg-pill { display:inline-flex; align-items:center; gap:4px; font-size: 12px; font-weight:700; padding: 1px 8px; border-radius: 10px; background: var(--orange-trans); color: #b36f00; border:1px solid var(--orange); }
.chg-pill.up { background: var(--red-trans); color: var(--red); border-color: var(--red); }
.badge-new { background: var(--blue); color:#fff; font-size: 10px; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; margin-left: 6px; }
.tblForecastRow.locked .tblForecastCell { color: #aaa; cursor: not-allowed; }
.tblForecastRow.locked:hover { background: none !important; color: inherit !important; }
.pulse { animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(217,13,22,.5);} 70% { box-shadow: 0 0 0 12px rgba(217,13,22,0);} 100% { box-shadow: 0 0 0 0 rgba(217,13,22,0);} }
.msg-preview { border: 1px solid var(--mid-gray); background: #fafafa; padding: 14px; font-size: 14px; }

/* ---------- Overig ---------- */
.matrix th, .matrix td { font-size: 13px; text-align: center; vertical-align: middle; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.yes { color: #2f8f33; } .no { color: var(--mid-gray); } .part { color: var(--orange); }
.toggle-row { display:flex; justify-content: space-between; align-items:center; padding: 10px 0; border-bottom: 1px solid var(--light-gray); gap: 20px; }
.toggle-row .desc { font-size: 12px; color: var(--gray); }
.card-lite { border: 1px solid var(--light-gray); padding: 18px 20px; background:#fff; margin-bottom: 18px; }
.card-lite h5 { font-size: 16px; text-transform: uppercase; }
.kpi.active { background: var(--light-gray); box-shadow: inset 0 0 0 2px var(--dark-gray); }
table.tbl thead tr.filterrow th { border-bottom: 1px solid var(--mid-gray); padding: 4px 8px 8px; text-transform: none; font-weight: 400; background: var(--light-gray); min-width: 90px; }
table.tbl thead tr.filterrow th .form-control, table.tbl thead tr.filterrow th .form-select { font-size: 12px; }
#tblMachines thead tr:first-child th { border-bottom: 0; }
.rangeinp { cursor: pointer; background: #fff; }
body .daterangepicker .ranges li.active, body .daterangepicker td.active, body .daterangepicker td.active:hover { background-color: var(--red); }
body .daterangepicker td.in-range { background-color: var(--red-trans); }
.kpi .num .of { font-size: 13px; font-weight: 400; color: var(--gray); white-space: nowrap; }
/* Statusstrook (eerste kolom): 2px breed */
#tblMachines thead tr th:first-child, #tblMachines tbody td.rowstat { width: 2px; min-width: 2px; max-width: 2px; padding: 0 !important; }
/* Garantiestatus-filter in de kolomkop */
table.tbl thead tr.filterrow th.statuscell { min-width: 190px; }
.statuscell .statusbtns { display: flex; flex-wrap: wrap; gap: 4px; }
.statuscell .statusbtns .btn { padding: 1px 6px; font-size: 11px; line-height: 18px; min-width: 0; gap: 4px; }
.statuscell .statusbtns .btn { min-width: 38px; justify-content: center; }
/* Snelmenu: hoofdlink naar de detailpagina */
#machinePanel .quicklink-main { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; padding: 14px 16px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .02em; }
#machinePanel .quicklink-main small { text-transform: none; letter-spacing: 0; opacity: .9; }
#machinePanel .quicklink-main:hover { background: var(--dark-gray); border-color: var(--dark-gray); color: #fff; }
/* Tabs op de detailpagina: datums en nummers niet afbreken */
.tab-pane table.tbl td:first-child, .tab-pane table.tbl td:nth-child(2) { white-space: nowrap; }
.tab-pane table.tbl { margin-bottom: 8px; }
.tab-pane table.tbl tbody tr:hover td { background: var(--light-gray); }