/* ============================================================================
   Fleuren Portaal — visuele restyling (v299). PUUR COSMETISCH.
   Als laatste geladen; verandert alleen kleur / schaduw / afronding / type /
   hover / badges. GEEN wijziging aan indeling (display/grid/position) of logica.
   Terugdraaien = de <link ... portal-refresh.css> uit index.html/login.html halen.
   ========================================================================== */

:root{
  --blue:#0a84c0;
  --blue-deep:#0b5e86;
  --dark:#0a3f57;
  --orange:#ef7347;
  --ink:#12303d;
  --muted:#5a7380;
  --shadow:0 14px 34px rgba(8,58,82,.14);
  --shadow-soft:0 8px 20px rgba(8,58,82,.09);
  --shadow-lift:0 22px 48px rgba(8,58,82,.22);
  --ring:0 0 0 3px rgba(10,132,192,.30);
  --brand-grad:linear-gradient(135deg,#0a84c0 0%,#0b5e86 100%);
  --panel-grad:linear-gradient(165deg,#ffffff 0%,#f4fafd 100%);
}

/* ---- Fond & typografie -------------------------------------------------- */
body{
  background:
    radial-gradient(1200px 420px at 100% -80px, rgba(10,132,192,.10), transparent 60%),
    linear-gradient(180deg,#e3f1f8 0, #eef6f9 460px, #f4fafb 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{ letter-spacing:-.2px; }
::selection{ background:rgba(10,132,192,.22); }

/* ---- Vloeiende overgangen ---------------------------------------------- */
.tile,.portal-category-card,.admin-navigation-tile,.card,.dashboard-column,
.primary,.top-action-btn,.listitem,.department-buttons button{
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease,
             border-color .18s ease, background .18s ease, filter .18s ease;
}

/* ---- Header ------------------------------------------------------------- */
header{
  background:linear-gradient(180deg,#ffffff 0,#f6fbfd 100%);
  border-bottom:0;
  box-shadow:0 1px 0 #dcebf1, 0 10px 26px rgba(8,58,82,.06);
  position:relative;
}
header::after{ /* slanke merk-accentlijn i.p.v. de dikke rand */
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--orange) 0,#f6a06f 45%,var(--blue) 100%);
}
header h1{ font-size:25px; font-weight:900; color:var(--dark); }
header p{ color:var(--muted); }

/* ---- Tegels: het hart van de portal ------------------------------------ */
.tile{
  border:1px solid #e4eff4;
  border-radius:22px;
  background:var(--panel-grad);
  box-shadow:var(--shadow-soft);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.tile::after{ /* accentbalk onderaan, verschijnt bij hover */
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--blue),var(--orange));
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
.tile .icon{
  width:54px;height:54px;border-radius:17px;
  background:linear-gradient(145deg,#e7f5fb 0,#dcefff 100%);
  box-shadow:inset 0 0 0 1px rgba(10,132,192,.12), 0 6px 14px rgba(8,58,82,.12);
  font-size:27px;margin-bottom:13px;
}
.tile strong{ font-size:17px; font-weight:800; color:var(--dark); letter-spacing:-.1px; }
.tile small{ color:var(--muted); line-height:1.35; }

@media (hover:hover){
  .tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:#cfe6f0; }
  .tile:hover::after{ transform:scaleX(1); }
  .portal-category-card:hover{ transform:translateY(-2px); }
  .admin-navigation-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
  .card:hover,.dashboard-column:hover{ box-shadow:var(--shadow); }
  .primary:hover{ filter:brightness(1.05); box-shadow:0 12px 26px rgba(239,115,71,.36); }
  .top-action-btn:hover{ filter:brightness(1.05); }
  .listitem:hover{ background:#f4fafc; border-radius:12px; }
}
.tile:active{ transform:scale(.975); }

/* ---- Categorie-schakelaar bovenin -------------------------------------- */
.portal-category-switcher{
  border-radius:26px;
  background:linear-gradient(135deg,#083c51 0%,#0a6f99 60%,#0a90b4 100%);
  box-shadow:0 20px 44px rgba(4,63,84,.26);
}
.portal-category-card{ border-radius:18px; backdrop-filter:saturate(1.1); }
.portal-category-card.active{ box-shadow:0 14px 30px rgba(0,0,0,.22); }
.portal-category-content{ border-radius:26px; box-shadow:0 16px 36px rgba(14,70,89,.10); }
.portal-category-content-head>span{
  box-shadow:inset 0 0 0 1px rgba(10,132,192,.12), 0 6px 14px rgba(8,58,82,.10);
}

/* ---- Kaarten ------------------------------------------------------------ */
.card{
  border:1px solid #e0edf2;
  border-radius:24px;
  box-shadow:var(--shadow-soft);
  background:rgba(255,255,255,.98);
}
.dashboard-column{ border-radius:22px; box-shadow:var(--shadow-soft); border-color:#e0edf2; }
.welcome{ background:linear-gradient(135deg,var(--dark),var(--blue)); box-shadow:var(--shadow); }
/* Welkom-naam goed leesbaar in het wit op de blauwe balk */
.welcome #welcomeName{ color:#fff; }
.welcome .eyebrow{ color:rgba(255,255,255,.88); }
.welcome #driverNumber{ color:rgba(255,255,255,.9); }

/* ---- Sectiekoppen: fijn accentstreepje onder de titel ------------------ */
.section-title h2,.admin-section-head h2{ position:relative; padding-bottom:8px; }
.section-title h2::after,.admin-section-head h2::after{
  content:"";position:absolute;left:0;bottom:0;width:38px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--orange),var(--blue));
}

/* ---- Knoppen ------------------------------------------------------------ */
.primary{
  background:linear-gradient(135deg,#f58552 0,#ea6a3f 55%,#d4552c 100%);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(239,115,71,.30);
}
.top-action-btn{ border-radius:12px; }

/* ---- Beheer-tegels: zelfde premium look -------------------------------- */
.admin-navigation-tile{
  border:1px solid #e3eef3;border-radius:20px;
  background:var(--panel-grad);box-shadow:var(--shadow-soft);
  position:relative;overflow:hidden;
}
.admin-navigation-tile::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--blue),var(--orange));
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
@media (hover:hover){ .admin-navigation-tile:hover::after{ transform:scaleX(1); } }
.admin-navigation-icon{
  border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(10,132,192,.12), 0 5px 12px rgba(8,58,82,.10);
}

/* ---- Pillen / chips ----------------------------------------------------- */
.pill,.activity-meta span,.activity-chip,.group-badge{ box-shadow:inset 0 0 0 1px rgba(10,132,192,.07); }

/* ---- Lijsten ------------------------------------------------------------ */
.listitem img{ box-shadow:0 4px 10px rgba(8,58,82,.12); }

/* ---- Nette, toegankelijke focus ---------------------------------------- */
.tile:focus-visible,.portal-category-card:focus-visible,.admin-navigation-tile:focus-visible,
.primary:focus-visible,.top-action-btn:focus-visible,button:focus-visible,a:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none; box-shadow:var(--ring);
}

/* ---- Verzorgde scrollbar (desktop) ------------------------------------- */
@media (hover:hover){
  *{ scrollbar-width:thin; scrollbar-color:#b9d4e0 transparent; }
  *::-webkit-scrollbar{ width:10px;height:10px; }
  *::-webkit-scrollbar-thumb{ background:#bcd6e2;border-radius:999px;border:2px solid transparent;background-clip:content-box; }
  *::-webkit-scrollbar-thumb:hover{ background:#9cc2d3; }
}

/* ---- Desktop-sidebar (kantoorweergave) wat strakker -------------------- */
.desktop-sidebar{ box-shadow:var(--shadow); }
.desktop-sidebar nav button{ border-radius:12px; transition:background .15s ease; }
@media (hover:hover){ .desktop-sidebar nav button:hover{ background:rgba(10,132,192,.08); } }

/* ---- 'Taken & beheerders': huidige beheerders boven in het paneel ------- */
.admin-right-current{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  margin:4px 0 12px;padding:11px 13px;border-radius:14px;
  background:linear-gradient(145deg,#eef7fb,#f8fdff);
  border:1px solid #d9ebf2;color:#0a3f57;font-size:13px;
}
.admin-right-current-label{font-weight:900;color:#0b5e86;margin-right:2px}
.admin-right-chip{
  display:inline-block;padding:5px 11px;border-radius:999px;
  background:#0a84c0;color:#fff;font-weight:800;font-size:12px;
  box-shadow:0 4px 10px rgba(10,132,192,.22);
}