/* ============================================================
   SwissKnife — Suricat huisstijl-thema (overschrijft Bootstrap 5.3)
   Bron: Suricat Design System (colors_and_type.css + Brand Brief)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Merkkleuren */
  --suricat-green: #00A093;
  --suricat-green-dark: #008F83;
  --suricat-grey: #58585A;
  --alert-orange: #FF7F3E;
  --alert-orange-hover: #F16C2A;
  --alert-orange-deep: #FF5400;
  --soft-purple: #B0A1BA;
  --soft-yellow: #E9C46A;
  --ink: #222222;
  --muted-grey: #6B6B6E;
  --soft-white: #F5F5F3;
  --border-subtle: #E6E6E2;
  --border-default: #D5D5D1;
  --bg-brand-soft: #E6F5F3;

  --r-card: 10px;
  --shadow-sm: 0 1px 2px rgba(34,34,34,.04), 0 1px 1px rgba(34,34,34,.03);
  --shadow-md: 0 2px 6px rgba(34,34,34,.05), 0 1px 2px rgba(34,34,34,.04);

  /* Bootstrap-thema koppelen aan de merkkleuren */
  --bs-primary: var(--suricat-green);
  --bs-primary-rgb: 0,160,147;
  --bs-link-color: var(--suricat-green);
  --bs-link-color-rgb: 0,160,147;
  --bs-link-hover-color: var(--suricat-green-dark);
  --bs-link-hover-color-rgb: 0,143,131;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--soft-white);
  --bs-body-font-family: 'Inter','Open Sans','Segoe UI',Helvetica,Arial,sans-serif;
  --bs-border-color: var(--border-default);
  --bs-focus-ring-color: rgba(0,160,147,.28);
}

body {
  font-family: var(--bs-body-font-family);
  background: var(--soft-white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 { color: var(--suricat-grey); letter-spacing: -0.01em; }
code, kbd, pre, samp { font-family: 'JetBrains Mono', Consolas, monospace; }

/* ---- Knoppen -------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--suricat-green);
  --bs-btn-border-color: var(--suricat-green);
  --bs-btn-hover-bg: var(--suricat-green-dark);
  --bs-btn-hover-border-color: var(--suricat-green-dark);
  --bs-btn-active-bg: var(--suricat-green-dark);
  --bs-btn-active-border-color: var(--suricat-green-dark);
  --bs-btn-disabled-bg: var(--suricat-green);
  --bs-btn-disabled-border-color: var(--suricat-green);
}
.btn-success {
  --bs-btn-bg: var(--suricat-green);
  --bs-btn-border-color: var(--suricat-green);
  --bs-btn-hover-bg: var(--suricat-green-dark);
  --bs-btn-hover-border-color: var(--suricat-green-dark);
  --bs-btn-active-bg: var(--suricat-green-dark);
}
.btn-outline-success {
  --bs-btn-color: var(--suricat-green);
  --bs-btn-border-color: var(--suricat-green);
  --bs-btn-hover-bg: var(--suricat-green);
  --bs-btn-hover-border-color: var(--suricat-green);
  --bs-btn-active-bg: var(--suricat-green-dark);
}
.btn-warning {
  --bs-btn-bg: var(--alert-orange);
  --bs-btn-border-color: var(--alert-orange);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--alert-orange-hover);
  --bs-btn-hover-border-color: var(--alert-orange-hover);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--alert-orange-hover);
  --bs-btn-active-color: #fff;
}
.btn-outline-secondary {
  --bs-btn-color: var(--suricat-grey);
  --bs-btn-border-color: var(--border-default);
  --bs-btn-hover-bg: var(--soft-white);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-border-color: var(--suricat-grey);
  --bs-btn-active-bg: var(--soft-white);
  --bs-btn-active-color: var(--ink);
}
/* Destructief (verwijderen) — diep oranje i.p.v. rood, blijft in palet */
.btn-outline-danger {
  --bs-btn-color: var(--alert-orange-deep);
  --bs-btn-border-color: var(--alert-orange-deep);
  --bs-btn-hover-bg: var(--alert-orange-deep);
  --bs-btn-hover-border-color: var(--alert-orange-deep);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--alert-orange-deep);
}

/* ---- Badges & utilities -------------------------------------- */
.bg-success { background-color: var(--suricat-green) !important; }
.bg-warning { background-color: var(--alert-orange) !important; color: #fff !important; }
.bg-danger  { background-color: var(--alert-orange-deep) !important; }
.bg-secondary { background-color: var(--muted-grey) !important; }
.bg-info { background-color: var(--soft-purple) !important; color: #fff !important; }
.text-primary { color: var(--suricat-green) !important; }
.text-success { color: var(--suricat-green) !important; }
.text-danger  { color: var(--alert-orange-deep) !important; }
.text-warning { color: var(--alert-orange) !important; }
.border-success { border-color: var(--suricat-green) !important; }
.border-warning { border-color: var(--alert-orange) !important; }
.border-danger  { border-color: var(--alert-orange-deep) !important; }

/* ---- Cards --------------------------------------------------- */
.card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
}
.card-header { border-bottom: 1px solid var(--border-subtle); }

/* ---- Formulieren --------------------------------------------- */
.form-control, .form-select {
  border-color: var(--border-default);
}
.form-control:focus, .form-select:focus {
  border-color: var(--suricat-green);
  box-shadow: 0 0 0 3px rgba(0,160,147,.2);
}
.form-check-input:checked {
  background-color: var(--suricat-green);
  border-color: var(--suricat-green);
}

/* ---- Alerts (flash) ------------------------------------------ */
.alert-success { --bs-alert-bg: var(--bg-brand-soft); --bs-alert-border-color: var(--suricat-green); --bs-alert-color: #0a5c54; }
.alert-danger  { --bs-alert-bg: #FFEDE4; --bs-alert-border-color: var(--alert-orange-deep); --bs-alert-color: #9c3400; }
.alert-warning { --bs-alert-bg: #FFF1E7; --bs-alert-border-color: var(--alert-orange); --bs-alert-color: #9c4a12; }
.alert-info    { --bs-alert-bg: #F1EEF4; --bs-alert-border-color: var(--soft-purple); --bs-alert-color: #4b3f56; }

/* ---- Tabellen ------------------------------------------------ */
.table { --bs-table-color: var(--ink); }
.table > thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted-grey); font-weight: 600; border-bottom-color: var(--border-default);
}
/* Rij-markering: product nog niet gelanceerd (zacht oranje, links geaccentueerd) */
.table > tbody > tr.table-warning-soft > td { background-color: #FFF6F0; }
.table > tbody > tr.table-warning-soft > td:first-child { box-shadow: inset 3px 0 0 var(--alert-orange); }
a { text-underline-offset: 2px; }

/* ---- Sidebar ------------------------------------------------- */
.sidebar {
  min-height: 100vh;
  background-color: var(--suricat-green);
}
.sidebar .nav-link { color: rgba(255,255,255,.85); padding: .7rem 1rem; border-radius: 6px; margin: 1px .5rem; }
.sidebar .nav-link:hover { color: #fff; background-color: rgba(0,0,0,.12); }
.sidebar .nav-link.active { color: #fff; background-color: rgba(0,0,0,.20); font-weight: 600; }
.sidebar .nav-link i { margin-right: .5rem; }
.main-content { min-height: 100vh; background-color: var(--soft-white); }
.stat-value { font-size: 1.7rem; font-weight: 700; color: var(--suricat-grey); }