/* ===============================
   Theme
   =============================== */

/* Donkere pagina, neutrale (lichte) tabel */
:root{
  /* App (donker) */
  --bg:            #0b1220;
  --panel:         #111a2e;
  --muted:         #94a3b8;
  --text:          #e5e7eb;
  --accent:        #60a5fa;
  --border:        #24304a;

  /* Tabel (licht/neutraal) */
  --tbl-bg:        #f6f7f9;
  --tbl-row:       #ffffff;
  --tbl-row-alt:   #f3f4f6;    /* heel licht grijs */
  --tbl-text:      #111827;    /* bijna zwart */
  --tbl-border:    #d0d5dd;    /* subtiele grijs border */
  --tbl-header:    #e6eaf0;    /* lichtgrijze header */
  --tbl-hover:     #eaeef5;    /* zachte hover */
  --tbl-select:    #dfe7f3;    /* zachte selectie */
  --danger:        #ef4444;
}

/* ===============================
   Basis layout
   =============================== */

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:#0a1020; border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
}
.brand{ font-weight:700; letter-spacing:.3px; }
.actions .btn{ margin-left:8px; }

/* Containers & Cards */
.container{ max-width:1100px; margin:28px auto; padding:0 16px; }
.card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:16px; margin-bottom:20px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.card h2{ margin:4px 0 14px; }

/* Form grid */
.grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; }
.grid > div{ display:flex; flex-direction:column; }
.grid label{ color:var(--muted); font-size:.9rem; margin-bottom:6px; }
.grid input, .search{
  padding:10px 12px; border:1px solid var(--border); border-radius:10px;
  background:#0e1730; color:var(--text);
}
.align-end{ display:flex; align-items:flex-end; }

/* Buttons */
.btn{
  padding:10px 14px; border-radius:10px; border:1px solid var(--border);
  background:#131c32; color:var(--text); cursor:pointer;
}
.btn:hover{ background:#172240; }
.btn-primary{ background:var(--accent); color:#0b1220; border-color:transparent; }
.btn-primary:hover{ filter:brightness(1.05); }
.icon-btn{ background:transparent; color:var(--text); border:none; font-size:20px; cursor:pointer; }

/* List header */
.list-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.list-header .tools{ display:flex; align-items:center; gap:12px; }
.inline{ display:flex; align-items:center; gap:8px; }

/* ===============================
   Tabulator – neutrale (lichte) tabel in dark app
   =============================== */

/* Tabelcontainer */
.tabulator{
  background:var(--tbl-bg) !important;
  border:1px solid var(--tbl-border) !important;
  border-radius:12px !important;
  color:var(--tbl-text) !important;
  overflow:hidden;
}

/* Header */
.tabulator .tabulator-header{
  background:var(--tbl-header) !important;
  color:var(--tbl-text) !important;
  border-bottom:1px solid var(--tbl-border) !important;
}
.tabulator .tabulator-col{
  color:var(--tbl-text) !important;
  border-right:1px solid var(--tbl-border) !important;
}
.tabulator .tabulator-col:last-child{ border-right:none !important; }

/* Header filters */
.tabulator .tabulator-col .tabulator-header-filter input,
.tabulator .tabulator-col .tabulator-header-filter select{
  background:#fff !important;
  color:var(--tbl-text) !important;
  border:1px solid var(--tbl-border) !important;
  border-radius:8px !important;
  padding:6px 8px !important;
}

/* Rijen: wit / heel licht grijs (even/oneven) */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row,
.tabulator .tabulator-row{
  background:var(--tbl-row) !important;
  color:var(--tbl-text) !important;
  border-bottom:1px solid var(--tbl-border) !important;
}
.tabulator .tabulator-row.tabulator-row-odd,
.tabulator .tabulator-row:nth-child(odd){
  background:var(--tbl-row-alt) !important;
}

/* Hover en selectie */
.tabulator .tabulator-row:hover{
  background:var(--tbl-hover) !important;
}
.tabulator .tabulator-row.tabulator-selected{
  background:var(--tbl-select) !important;
}

/* Cellen */
.tabulator .tabulator-cell{
  padding:8px 10px !important;
  font-size:14px !important;
  border-right:1px solid var(--tbl-border) !important;
}
.tabulator .tabulator-cell:last-child{ border-right:none !important; }

/* Rij markering bij 0 voorraad */
.row-zero{
  color:var(--danger) !important;
  font-weight:600 !important;
}

/* ===============================
   Modal
   =============================== */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal.hidden{ display:none; }
.modal-dialog{
  width:min(900px, 96vw);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
.modal-header, .modal-footer{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-footer{ border-top:1px solid var(--border); border-bottom:none; }
.modal-body{ padding:14px; }
.preview{ margin-top:12px; border-top:1px dashed var(--border); padding-top:12px; }
.preview h4{ margin:10px 0 8px; }
.badge{
  display:inline-block; background:#eef2ff; color:#1f2937;
  padding:2px 8px; border-radius:999px; border:1px solid #d0d5dd;
  font-size:.8rem; margin-left:6px;
}
.small{ color:var(--muted); font-size:.9rem; }
code{
  background:#0a1426; color:#e5e7eb;
  padding:2px 6px; border-radius:6px; border:1px solid var(--border);
}

/* ===============================
   Responsiveness
   =============================== */
@media (max-width: 980px){
  .grid{ grid-template-columns:1fr 1fr; }
  .align-end{ grid-column:1 / -1; }
  .list-header{ flex-direction:column; align-items:flex-start; gap:10px; }
  .list-header .tools{ width:100%; }
  .search{ width:100%; }
}

.btn-outline{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
}
.btn-outline.active{
  background:#23304a;
}

/* Rood markeren bij op (0) of over datum — hogere specificiteit dan de basis rijkleur */
.tabulator .tabulator-row.row-zero,
.tabulator .tabulator-row.row-expired,
.tabulator .tabulator-row.row-zero .tabulator-cell,
.tabulator .tabulator-row.row-expired .tabulator-cell{
  color: #ef4444 !important;
  font-weight: 600 !important;
}

/* (optioneel) ook achtergrond meekleuren */
.tabulator .tabulator-row.row-zero,
.tabulator .tabulator-row.row-expired{
  /* uncomment als je ook achtergrond wilt highlighten */
  /* background-color: #fff0f0 !important; */
}