/* ==========================================================================
   Huisstijl Sparke & Keane
   Montserrat · elektrisch blauw · magenta accent · geel · pastelvlakken · pill-knoppen
   ========================================================================== */
:root {
  --sk-blue: #0000FF;
  --sk-blue-dark: #0000C8;
  --sk-magenta: #FF0054;
  --sk-yellow: #FFE800;
  --sk-green: #40E76E;
  --sk-orange: #FFA20D;
  --sk-sky: #8EDCF6;
  --sk-mint: #E0FCE7;
  --sk-lavender: #F4F4FF;
  --sk-lavender-2: #DBDBFF;
  --sk-pink: #FFDBE7;
  --sk-text: #212529;
  --sk-muted: #6B6F76;
  --sk-border: #E4E6F0;

  --bs-font-sans-serif: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-color: var(--sk-text);
  --bs-primary: var(--sk-blue);
  --bs-primary-rgb: 0, 0, 255;
  --bs-link-color: var(--sk-blue);
  --bs-link-color-rgb: 0, 0, 255;
  --bs-link-hover-color: var(--sk-blue-dark);
  --bs-link-hover-color-rgb: 0, 0, 200;
  --bs-border-color: var(--sk-border);
}

body { font-family: var(--bs-font-sans-serif); color: var(--sk-text); background: var(--sk-lavender); min-height: 100vh; font-size: .9rem; }
main { min-height: 100vh; }
h1, h2, h3, .h1, .h2, .h3 { font-weight: 900; font-style: italic; color: var(--sk-blue); letter-spacing: -.01em; }
h4, h5, h6, .h4, .h5, .h6 { font-weight: 700; }
h6 { color: var(--sk-blue); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .75rem; }
.h4 { font-style: italic; font-weight: 900; color: var(--sk-text); }

/* --- Sidebar --------------------------------------------------------- */
.sidebar { width: 240px; flex-shrink: 0; min-height: 100vh; background: #fff; border-right: 1px solid var(--sk-border); position: sticky; top: 0; }
.brand { display: inline-flex; align-items: center; justify-content: center; background: var(--sk-blue); color: #fff; text-decoration: none; font-weight: 600; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; padding: .55rem 1rem; border-radius: 999px; white-space: nowrap; }
.brand:hover { color: #fff; background: var(--sk-blue-dark); }
.brand-sub { font-size: .7rem; color: var(--sk-muted); letter-spacing: .12em; text-transform: uppercase; margin-top: .5rem; margin-left: .25rem; }
.sidebar .nav-link { color: var(--sk-text); border-radius: 999px; font-weight: 500; padding: .5rem 1rem; }
.sidebar .nav-link:hover { background: var(--sk-lavender); color: var(--sk-blue); }
.sidebar .nav-link.active { background: var(--sk-blue); color: #fff; }
.sidebar .nav-link i { margin-right: .5rem; }
.sidebar .btn-link { font-size: inherit; text-decoration: none; font-weight: 500; }
.sidebar .small a { text-decoration: none; font-weight: 500; }

/* --- Knoppen (pill) ---------------------------------------------------- */
.btn { border-radius: 999px; font-weight: 600; padding-left: 1.1rem; padding-right: 1.1rem; }
.btn-sm { padding-left: .9rem; padding-right: .9rem; }
.btn-primary { --bs-btn-bg: var(--sk-blue); --bs-btn-border-color: var(--sk-blue); --bs-btn-hover-bg: var(--sk-blue-dark); --bs-btn-hover-border-color: var(--sk-blue-dark); --bs-btn-active-bg: var(--sk-blue-dark); --bs-btn-active-border-color: var(--sk-blue-dark); }
.btn-outline-primary { --bs-btn-color: var(--sk-blue); --bs-btn-border-color: var(--sk-blue); --bs-btn-hover-bg: var(--sk-blue); --bs-btn-hover-border-color: var(--sk-blue); --bs-btn-active-bg: var(--sk-blue); }
.btn-accent { --bs-btn-bg: var(--sk-magenta); --bs-btn-border-color: var(--sk-magenta); --bs-btn-color: #fff; --bs-btn-hover-bg: #E0004A; --bs-btn-hover-border-color: #E0004A; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #E0004A; --bs-btn-active-color: #fff; }
.btn-outline-secondary { --bs-btn-color: var(--sk-text); --bs-btn-border-color: var(--sk-border); --bs-btn-hover-bg: var(--sk-lavender); --bs-btn-hover-color: var(--sk-blue); --bs-btn-hover-border-color: var(--sk-lavender-2); }
.btn-outline-danger { --bs-btn-color: var(--sk-magenta); --bs-btn-border-color: var(--sk-pink); --bs-btn-hover-bg: var(--sk-magenta); --bs-btn-hover-border-color: var(--sk-magenta); }
.btn-group-sm > .btn { border-radius: 999px !important; margin-right: .25rem; }
.btn-outline-secondary.active { background: var(--sk-blue); border-color: var(--sk-blue); color: #fff; }

/* --- Kaarten & tegels -------------------------------------------------- */
.card { border: 1px solid var(--sk-border); border-radius: 18px; background: #fff; }
.card-header { border-bottom: 1px solid var(--sk-border); border-radius: 18px 18px 0 0 !important; font-weight: 600; }
.kpi-tile { background: #fff; border: 1px solid var(--sk-border); border-radius: 18px; padding: 1rem 1.25rem; position: relative; overflow: hidden; }
.kpi-tile .value { font-size: 2rem; font-weight: 900; font-style: italic; color: var(--sk-blue); line-height: 1.1; }
.kpi-tile .label { color: var(--sk-muted); font-size: .8rem; font-weight: 500; margin-top: .2rem; }
.kpi-tile.accent { background: var(--sk-blue); border-color: var(--sk-blue); }
.kpi-tile.accent .value { color: var(--sk-yellow); }
.kpi-tile.accent .label { color: #fff; opacity: .85; }
.kpi-tile.accent::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; border: 18px solid var(--sk-yellow); border-top-color: transparent; border-right-color: transparent; transform: rotate(10deg); opacity: .95; }
.detail-header { background: #fff; border: 1px solid var(--sk-border); border-radius: 18px; padding: 1.25rem 1.5rem; position: relative; overflow: hidden; }
.detail-header::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--sk-blue); }
.filterbar { background: #fff; border: 1px solid var(--sk-border); border-radius: 18px; padding: .75rem 1rem; }
.filterbar .form-control, .filterbar .form-select { min-width: 140px; }

/* --- Formulieren ------------------------------------------------------- */
.form-control, .form-select { border-radius: 12px; border-color: var(--sk-border); }
.form-control:focus, .form-select:focus { border-color: var(--sk-blue); box-shadow: 0 0 0 .2rem rgba(0, 0, 255, .12); }
.form-check-input:checked { background-color: var(--sk-blue); border-color: var(--sk-blue); }
.form-label { font-weight: 600; font-size: .8rem; color: var(--sk-muted); }

/* --- Tabellen ---------------------------------------------------------- */
.table > :not(caption) > * > * { background: transparent; }
.table-hover tbody tr { cursor: pointer; }
.table-hover { --bs-table-hover-bg: var(--sk-lavender); --bs-table-hover-color: var(--sk-text); }
.table-hover > tbody > tr:hover > * { background: var(--sk-lavender); }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sk-blue); font-weight: 700; border-bottom: 2px solid var(--sk-lavender-2); }

/* --- Tabs -------------------------------------------------------------- */
.nav-tabs { border-bottom: 2px solid var(--sk-lavender-2); gap: .25rem; }
.nav-tabs .nav-link { border: 0; border-radius: 999px 999px 0 0; color: var(--sk-muted); font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--sk-blue); }
.nav-tabs .nav-link.active { color: var(--sk-blue); background: #fff; border-bottom: 3px solid var(--sk-blue); }

/* --- Badges / statussen ------------------------------------------------ */
.badge { font-weight: 600; border-radius: 999px; padding: .35em .7em; }
.badge.text-bg-primary { background: var(--sk-blue) !important; }
.badge.text-bg-light { background: var(--sk-lavender) !important; color: var(--sk-blue); }
.badge-stap { background: var(--sk-lavender); color: var(--sk-blue); border: 1px solid var(--sk-lavender-2); font-weight: 600; }
.badge-stap.aangenomen { background: var(--sk-mint); color: #147a3b; border-color: #b6f0c8; }
.badge-stap.afgewezen, .badge-stap.ingetrokken { background: var(--sk-pink); color: #b3003b; border-color: #ffbfd3; }
.badge-stap.aanbod { background: #FFF9C2; color: #7a6600; border-color: var(--sk-yellow); }
.status-brons { color: #b26b1f; } .status-zilver { color: #7a8794; } .status-goud { color: #c59a00; } .status-platina { color: var(--sk-blue); } .status-diamant { color: var(--sk-magenta); }

/* --- Overig ------------------------------------------------------------ */
dl.dl-compact dt { color: var(--sk-muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin-top: .6rem; }
dl.dl-compact dd { margin-bottom: 0; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--sk-yellow); color: var(--sk-blue); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.15rem; object-fit: cover; flex-shrink: 0; }
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-indicator { display: none; }
.timeline { border-left: 2px solid var(--sk-lavender-2); margin-left: .5rem; padding-left: 1.25rem; }
.timeline .item { position: relative; margin-bottom: 1rem; }
.timeline .item::before { content: ""; position: absolute; left: -1.7rem; top: .4rem; width: 12px; height: 12px; border-radius: 50%; background: var(--sk-blue); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--sk-lavender-2); }
.modal-content { border-radius: 18px; border: 0; }
.modal-header { border-bottom: 1px solid var(--sk-border); }
.modal-title { font-weight: 900; font-style: italic; color: var(--sk-blue); }
.alert { border-radius: 14px; }
.alert-success { background: var(--sk-mint); color: #147a3b; border-color: #b6f0c8; }
.alert-warning { background: #FFF9C2; color: #7a6600; border-color: var(--sk-yellow); }
.alert-danger { background: var(--sk-pink); color: #b3003b; border-color: #ffbfd3; }
.text-muted { color: var(--sk-muted) !important; }
.list-group-item { border-color: var(--sk-border); }
.page-tagline { font-style: italic; font-weight: 600; color: var(--sk-muted); }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--sk-sky); position: relative; overflow: hidden; }
.login-wrap::before, .login-wrap::after { content: ""; position: absolute; border-radius: 50%; border: 48px solid var(--sk-yellow); }
.login-wrap::before { width: 340px; height: 340px; left: -120px; top: -100px; border-left-color: transparent; border-top-color: transparent; transform: rotate(-15deg); }
.login-wrap::after { width: 400px; height: 400px; right: -150px; bottom: -170px; border-right-color: transparent; border-bottom-color: transparent; transform: rotate(-15deg); }
.login-card { width: 400px; border-radius: 22px; padding: 2rem; background: #fff; position: relative; z-index: 1; box-shadow: 0 20px 50px rgba(0, 0, 120, .15); }

/* --- Rustige lijsten ---------------------------------------------------- */
.searchbar { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--sk-border); border-radius: 999px; padding: .35rem .5rem .35rem 1rem; }
.searchbar > .bi-search { color: var(--sk-blue); }
.searchbar .form-control { border: 0; box-shadow: none; background: transparent; flex: 1; padding-left: 0; }
.searchbar .form-control:focus { box-shadow: none; }
.searchbar .form-select { border-radius: 999px; }
.filterbar .form-label { margin-bottom: .15rem; }
.table-clean thead th { border-bottom: 1px solid var(--sk-border); padding: .7rem 1rem; }
.table-clean tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--sk-lavender); }
.table-clean td.text-nowrap, .table-clean .nowrap { white-space: nowrap; }
.table-clean tbody tr:last-child td { border-bottom: 0; }
.avatar-sm { width: 38px; height: 38px; font-size: .8rem; font-weight: 700; }
img.avatar { background: var(--sk-lavender); }
.avatar-klant { background: var(--sk-lavender-2); color: var(--sk-blue); }
.status-ring-brons { box-shadow: 0 0 0 3px #f0d5b4; } .status-ring-zilver { box-shadow: 0 0 0 3px #d9dee3; } .status-ring-goud { box-shadow: 0 0 0 3px var(--sk-yellow); } .status-ring-platina { box-shadow: 0 0 0 3px var(--sk-blue); }
.btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* Stappenbalk (processen) */
.stappenbalk { padding: 1rem 1.25rem; }
.stappen-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--sk-lavender); gap: 2px; }
.stappen-bar .seg { min-width: 4px; }
.stappen-legenda { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .6rem; font-size: .8rem; }
.seg-label { color: var(--sk-text); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.seg-label:hover { color: var(--sk-blue); }
.seg-label .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.seg-1 { background: var(--sk-lavender-2); } .seg-2 { background: #B3B3FF; } .seg-3 { background: #7A7AFF; } .seg-4 { background: var(--sk-blue); }
.seg-5 { background: var(--sk-yellow); } .seg-6 { background: var(--sk-green); } .seg-7 { background: var(--sk-magenta); } .seg-8 { background: #C9CCD6; }
.badge-hotlist { background: var(--sk-yellow); color: var(--sk-text); font-weight: 600; font-size: .68rem; vertical-align: middle; }