/* =========================================================
   theme-core.css — DutchLine MAX (Core)
   - Bootstrap-friendly
   - Premium, rustig
   - Meer “DutchLine”: ink/white contrast + blauwe sweep + strakke lijnen
   ========================================================= */

:root{
  /* Brand (DutchLine blue family) */
  --dl-blue-900:#1E3375;
  --dl-blue-800:#243C86;
  --dl-blue-700:#304DA1;  /* primary */
  --dl-blue-600:#415FAC;
  --dl-blue-500:#5B78C0;
  --dl-blue-300:#80A0D0;

  /* Neutrals */
  --ink:#0b1220;
  --ink2:#121a2b;
  --bg:#ffffff;
  --surface:#f7f8fb;
  --panel:#ffffff;

  --text:var(--ink);
  --muted:rgba(11,18,32,.70);
  --muted2:rgba(11,18,32,.56);
  --border:rgba(11,18,32,.10);
  --border2:rgba(11,18,32,.14);

  /* Shapes & depth (premium, not glass) */
  --r:14px;
  --r2:18px;
  --shadow:0 20px 60px rgba(11,18,32,.12);
  --shadow2:0 12px 30px rgba(11,18,32,.10);

  /* Accent usage */
  --accent:var(--dl-blue-700);
  --accent-ink:rgba(48,77,161,.85);
  --accent-soft:rgba(48,77,161,.10);
  --accent-soft2:rgba(48,77,161,.14);
  --focus:rgba(48,77,161,.26);

  /* Layout rhythm */
  --container-max: 1440px;
  --section-pad: 72px;
  --section-pad-sm: 42px;
  --card-pad: 18px;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* System statuses (used in pills/badges) */
  --ok: rgba(32,201,151,1);
  --warn: rgba(255,193,7,1);
  --danger: rgba(255,77,77,1);
  --info: rgba(13,110,253,1);
}

html, body{ height:100%; }
body{
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--accent); }

/* Container */
.container-max{ max-width: var(--container-max); }

/* =========================================================
   DutchLine subtle “sheen” + dividers (brand vibe)
   ========================================================= */
.dl-sheen{
  background:
    radial-gradient(900px 260px at 10% 10%, rgba(48,77,161,.10), transparent 62%),
    radial-gradient(700px 240px at 85% 0%, rgba(128,160,208,.10), transparent 62%);
}

.dl-divider{ border-top: 1px solid var(--border); }
.hr-soft{ border-color: var(--border); opacity: 1; }
.dl-hr-accent{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(48,77,161,.35), rgba(11,18,32,.10), transparent);
  opacity: 1;
}

/* =========================================================
   Header (Premium minimal, DutchLine-like)
   ========================================================= */
.dl-header{
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.25) blur(12px);
  border-bottom: 1px solid var(--border);
}

/* tiny brand line (very DutchLine) */
.dl-header::after{
  content:"";
  display:block;
  height: 2px;
  background: linear-gradient(90deg, rgba(48,77,161,.80), rgba(128,160,208,.40), transparent);
  opacity: .80;
}

.dl-header .navbar{
  padding-top: 14px;
  padding-bottom: 14px;
}
 

.dl-nav{
  gap: 18px;
  font-weight: 650;
  letter-spacing: .01em;
}
.dl-nav .nav-link{
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(11,18,32,.82);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.dl-nav .nav-link:hover{
  background: rgba(48,77,161,.08);
  color: var(--ink);
}
.dl-nav .nav-link.active{
  background: rgba(48,77,161,.10);
  color: var(--ink);
  position: relative;
}
.dl-nav .nav-link.active::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(48,77,161,.70), rgba(128,160,208,.22));
}

.dl-header-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.dl-iconbtn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.85);
  display:grid;
  place-items:center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.dl-iconbtn:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  background: #fff;
  box-shadow: 0 10px 22px rgba(11,18,32,.08);
}
 

/* =========================================================
   Sections + typography
   ========================================================= */
.section{ padding: var(--section-pad) 0; }
.section-sm{ padding: var(--section-pad-sm) 0; }

.dl-eyebrow{
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .78rem;
  color: color-mix(in srgb, var(--accent) 100%, var(--ink));
}

/* Alias used in demos */
.dl-kicker{
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .78rem;
  color: color-mix(in srgb, var(--accent) 100%, var(--text));
}

.dl-section-title{
  font-weight: 950;
  letter-spacing: -.02em;
  margin: 0;
}
.dl-section-sub{
  color: var(--muted);
  margin: 10px 0 0;
  line-height: 1.7;
}

.dl-h1{
  font-weight: 950;
  letter-spacing: -.03em;
  line-height: 1.02;
  font-size: clamp(2.2rem, 4vw, 3.45rem);
}
.dl-lead{
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

/* =========================================================
   Hero (DutchLine-ish: ink + blue sweep, subtle)
   ========================================================= */
/* =========================================================
   HERO — background image override (plaats onderaan main.css)
   ========================================================= */
.dl-hero{
  /* image als basis */
  background: url("/assets/img/hero-background.webp") center/cover no-repeat;
}

/* dot-pattern blijft (theme-core heeft ::before al) */
.dl-hero::before{
  /* laat theme-core settings staan; alleen iets beter zichtbaar */
  opacity: .32;
}

/* theme-core glow blijft (theme-core heeft ::after al),
   maar we maken ’m iets subtieler zodat image zichtbaar blijft */
.dl-hero::after{
  opacity: .75;
}

/* EXTRA overlay voor contrast/leesbaarheid boven de foto,
   maar onder je content */
.dl-hero{
  position: relative;
}
.dl-hero .container{
  position: relative;
  z-index: 3; /* boven overlays */
}

/* nieuwe overlay laag */
.dl-hero .dl-hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,13,24,.55) 0%, rgba(7,13,24,.3) 55%, rgba(7,13,24,.20) 100%),
    linear-gradient(180deg, rgba(7,13,24,.25) 0%, rgba(7,13,24,.05) 55%, rgba(7,13,24,0) 100%);
}


.dl-hero-card{
  background: rgba(255,255,255,.88);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  box-shadow: var(--shadow2);
  padding: 18px;
}
 

/* =========================================================
   Cards / Catalog (more DutchLine: topline + crisp border)
   ========================================================= */
.dl-card{
  
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: var(--panel);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
.dl-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  border-color: var(--border2);
}
.dl-card-topline{
  height: 5px;
  background: linear-gradient(90deg, rgba(48,77,161,.8), rgba(128,160,208,.9), transparent);
}
.dl-card-topline::after{
  content:"";
  display:block;
  height: 2px;
  width: 70%;
  margin-left: 6%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(48,77,161,.18), transparent);
  opacity: .85;
}
.dl-card-body{ padding: var(--card-pad); }

.dl-thumb{
  width: 100%;
  aspect-ratio: 4 / 4;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(520px 180px at 25% 25%, rgba(48,77,161,.08), transparent 62%),
    linear-gradient(180deg, rgba(11,18,32,.02), transparent 35%),
    var(--surface);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
 

.dl-badge{
  position:absolute;
  top: 12px;
  left: 12px;
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.85);
}

.dl-title{
  font-weight: 950;
  letter-spacing: -.01em;
  line-height: 1.15;
  font-size: 1.05rem;
  margin: 0 0 8px 0;
}
.dl-meta{
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0;
}

/* =========================================================
   Locked / Guest-only style (cleaner, more “system”)
   ========================================================= */
.dl-locked{
  border-radius: var(--r2);
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--border));
  background:
    linear-gradient(180deg, rgba(48,77,161,.06), transparent 55%),
    rgba(255,255,255,.78);
  padding: 14px;
}
.dl-locked strong{ font-weight: 950; }
.dl-locked small{ color: var(--muted); }

/* =========================================================
   Filters / chips
   ========================================================= */
.dl-filter{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  padding: 16px;
}
.dl-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
  margin: 6px 6px 0 0;
  font-weight: 750;
  color: rgba(11,18,32,.84);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.dl-chip:hover{
  border-color: var(--border2);
  background: #fff;
  transform: translateY(-1px);
}
.dl-chip.active{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.08);
}

/* =========================================================
   Footer
   ========================================================= */
.dl-footer{
  border-top: 1px solid var(--border);
  padding: 46px 0;
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(48,77,161,.06), transparent 62%),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 72%, transparent));
}
.dl-footer a{ color: var(--muted); }
.dl-footer a:hover{ color: var(--ink); }
 

/* =========================================================
   Bootstrap components -> DutchLine tone
   ========================================================= */

/* Dropdown */
.dropdown-menu{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow2);
  padding: 8px;
}
.dropdown-item{
  border-radius: 12px;
  padding: 10px 10px;
  font-weight: 700;
  color: rgba(11,18,32,.86);
}
.dropdown-item:hover{
  background: rgba(48,77,161,.08);
  color: var(--ink);
}

/* Nav tabs */
.nav-tabs{
  border-bottom: 1px solid var(--border);
}
.nav-tabs .nav-link{
  border: 0;
  border-radius: 14px 14px 0 0;
  font-weight: 900;
  color: rgba(11,18,32,.72);
  padding: 10px 12px;
}
.nav-tabs .nav-link:hover{
  background: rgba(48,77,161,.08);
  color: var(--ink);
}
.nav-tabs .nav-link.active{
  color: var(--ink);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-bottom-color: transparent;
}

/* Nav pills (admin filters etc) */
.nav-pills .nav-link{
  border-radius: 14px;
  border: 1px solid var(--border);
  font-weight: 900;
  color: rgba(11,18,32,.78);
  background: rgba(255,255,255,.86);
}
.nav-pills .nav-link:hover{
  border-color: var(--border2);
  background: #fff;
}
.nav-pills .nav-link.active{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.08);
  color: var(--ink);
}

/* Accordion */
.accordion-item{
  border: 1px solid var(--border);
  border-radius: var(--r2);
  overflow:hidden;
  background: rgba(255,255,255,.90);
}
.accordion-button{
  font-weight: 950;
  color: rgba(11,18,32,.86);
  background: rgba(255,255,255,.90);
}
.accordion-button:not(.collapsed){
  background: rgba(48,77,161,.08);
  color: var(--ink);
  box-shadow: none;
}
.accordion-button:focus{
  box-shadow: 0 0 0 6px var(--focus);
}
.accordion-body{ color: var(--muted); }

/* Tables */
.table{
  --bs-table-bg: transparent;
}
.table thead th{
  border-bottom: 1px solid var(--border);
  color: rgba(11,18,32,.72);
  font-weight: 950;
  letter-spacing: -.01em;
}
.table tbody td{
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.table-hover tbody tr:hover{
  background: rgba(48,77,161,.06);
}
 

/* Toast */
.toast{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
}
.toast-header{
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.92);
}

/* Modal */
.modal-content{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.modal-header, .modal-footer{
  border-color: var(--border);
}

/* Offcanvas */
.offcanvas{
  border-color: var(--border);
}
.offcanvas-header{
  border-bottom: 1px solid var(--border);
}
.offcanvas-body{
  background: rgba(255,255,255,.92);
}

/* Breadcrumbs */
.breadcrumb{
  margin-bottom: 0;
}
.breadcrumb-item a{
  color: rgba(11,18,32,.78);
}
.breadcrumb-item a:hover{
  color: var(--accent);
}
.breadcrumb-item.active{
  color: rgba(11,18,32,.56);
}

/* List groups */
.list-group{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  overflow:hidden;
}
.list-group-item{
  border-color: var(--border);
  padding: 12px 14px;
  background: rgba(255,255,255,.88);
}
.list-group-item:hover{
  background: rgba(48,77,161,.06);
}

/* =========================================================
   DutchLine section accents (drop-in classes)
   ========================================================= */
.dl-sec{
  position: relative;
  overflow: hidden;
}
.dl-sec::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(48,77,161,.55), rgba(128,160,208,.18), transparent);
  opacity: .55;
  pointer-events:none;
}
.dl-sec > .container{
  position: relative;
  z-index: 1;
}

.dl-sec-accent::after{
  content:"";
  position:absolute;
  right: -140px;
  top: -160px;
  width: 520px;
  height: 420px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(48,77,161,.09), transparent 70%);
  opacity: .25;
  pointer-events:none;
  z-index: 0;
}

.dl-sec-grid::after{
  content:"";
  position:absolute;
  right: -70px;
  top: 34px;
  width: 360px;
  height: 280px;
  background-image: radial-gradient(rgba(7, 13, 24, .09) 1px, transparent 1px);
  background-size: 14px 14px;
  border-radius: 24px;
  filter: blur(.2px);
  opacity: .48;
  pointer-events:none;
  z-index: 0;
}

.dl-sec-sheen{
  background:
    radial-gradient(1600px 520px at 12% -10%, rgba(48,77,161,.05), transparent 64%),
    radial-gradient(1400px 520px at 92% -20%, rgba(128,160,208,.06), transparent 66%),
    linear-gradient(180deg, rgba(11,18,32,.015), transparent 44%),
    var(--bg);
}

/* =========================
   DL Panel (standard, everywhere)
   ========================= */

.dl-panel{
  position: relative;
  border-radius: calc(var(--r2) + 4px);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.88) 55%,
      rgba(255,255,255,.84) 100%
    );
  box-shadow: var(--shadow2);
  

  /* spacing */
  padding: 14px;

  /* subtle glass (safe default) */
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

/* top “shine” */
.dl-panel::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 46px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
}

/* hover */
.dl-panel:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 62%, rgba(0,0,0,.06));
  box-shadow: var(--shadow2), 0 10px 26px rgba(0,0,0,.08);
}

/* focus (als er inputs/buttons in zitten) */
.dl-panel:focus-within{
  border-color: color-mix(in srgb, var(--primary, #2f6fed) 55%, var(--border));
  box-shadow: var(--shadow2), 0 0 0 4px color-mix(in srgb, var(--primary, #2f6fed) 18%, transparent);
}

/* nette divider */
.dl-panel hr{
  margin: 12px 0;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--border) 85%, transparent),
    transparent
  );
}

/* inputs/selects binnen panel: consistent radius */
.dl-panel .form-control,
.dl-panel .form-select{
  border-radius: calc(var(--r2) + 2px);
}

/* small header row (zoals label + badge) ziet er vanzelf “paneel-headerig” uit */
.dl-panel > .d-flex.align-items-center.justify-content-between{
  padding: 10px 12px;
  margin: -6px -6px 10px -6px;
  border-radius: calc(var(--r2) + 2px);
  background: rgba(255,255,255,.35);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

/* optioneel: scrollbare contentblokken (werkt perfect voor lijsten) */
.dl-panel .dl-panel-scroll{
  max-height: 420px;
  overflow: auto;
  padding: 6px;
  border-radius: calc(var(--r2) + 2px);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: rgba(255,255,255,.40);
}

/* scrollbar polish (algemeen, alleen waar scrollbars verschijnen) */
.dl-panel *::-webkit-scrollbar{ width: 10px; height: 10px; }
.dl-panel *::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.55);
}

/* =========================================================
   Skeletons / loading placeholders (global utility)
   ========================================================= */
.dl-skel{
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    linear-gradient(90deg, rgba(11,18,32,.04), rgba(11,18,32,.08), rgba(11,18,32,.04));
  background-size: 240% 100%;
  animation: dlSkel 1.2s infinite ease-in-out;
}
@keyframes dlSkel{
  0%{ background-position: 0% 0; opacity: .85; }
  50%{ background-position: 100% 0; opacity: 1; }
  100%{ background-position: 0% 0; opacity: .85; }
}

/* Utilities */
.text-muted-2{ color: var(--muted2) !important; }
.fw-black{ font-weight: 950 !important; }
body.dl-body{
  min-height: 100vh;
}

body.dl-body > .dl-header-v4{ flex: 0 0 auto; }
body.dl-body > .dl-main{ flex: 1 1 auto; min-height: 0; }
body.dl-body > footer{ flex: 0 0 auto; }