/* =========================================================================
   LYNXplatform — gedeelde navigatie-shell (bovenbalk + submenu)
   Wordt door elke pagina ingeladen: <link rel="stylesheet" href="shared/shell.css">
   Kleur- en font-tokens hier zijn de basis voor de hele app, niet enkel de nav.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* merk / navigatie */
  --nav-black:#0c0c0e;
  --nav-maroon:#3a0f0a;
  --nav-purple:#4d1f5c;
  --nav-orange-muted:#e8560a;   /* rechterkant van het verloop — fel, net onder het accent-oranje voor voldoende contrast */
  --accent:#ff5a00;              /* enige plek waar dit oranje gebruikt wordt: actief-indicator + accenten */
  --submenu-bg:#1c1e22;          /* vaste neutrale antraciete achtergrond, los van het verloop */
  --submenu-bg-hover:#26282d;

  /* content-zone (bestaande huisstijl, hergebruikt op elke pagina) */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-card:#F8F8F5;        /* heel lichtgrijze ondergrond voor content-containers (.lp-card) */
  --surface-2:#F2F2EF;           /* lichtgrijze alternerende tabelrijen */
  --ink:#1C2420;
  --ink-soft:#5C665F;
  --ink-faint:#8B958E;
  --line:#E1E3DB;
  --line-strong:#C9CCC0;
  --danger:#AC3E3E;
  --danger-soft:#F7E5E3;
  --success:#1E8E3E;
  --success-soft:#E5F5E9;
  --shadow:0 1px 2px rgba(12,12,14,.06), 0 8px 24px -12px rgba(12,12,14,.18);

  --nav-height:60px;
  --submenu-height:44px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.mono, .tabular, code{font-variant-numeric:tabular-nums;}
button{font-family:inherit;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* -------------------------------------------------------------------------
   Bovenbalk
   ------------------------------------------------------------------------- */
.lp-topbar{
  height:var(--nav-height);
  display:flex; align-items:center; gap:6px;
  padding:0 16px;
  background:linear-gradient(90deg,
    var(--nav-black) 0%,
    var(--nav-maroon) 38%,
    var(--nav-purple) 66%,
    var(--nav-orange-muted) 100%);
  position:sticky; top:0; z-index:100;
}

.lp-logo{
  display:flex; align-items:center;
  padding:0 0 0 4px;
  margin-right:113px; /* ±3cm ruimte tot de iconen — op smalle schermen verkleind, zie media query onderaan */
  flex:none; text-decoration:none;
}
.lp-logo img{height:34px; width:auto; display:block;}

.lp-nav{display:flex; align-items:stretch; gap:8px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none;}
.lp-nav::-webkit-scrollbar{display:none;}

.lp-nav-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; min-width:64px; height:var(--nav-height);
  background:transparent; border:none; cursor:pointer;
  color:rgba(255,255,255,.72); text-decoration:none;
  position:relative; padding:0 4px; flex:none;
}
.lp-nav-item svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7;}
.lp-nav-item-label{font-size:10px; font-weight:600; letter-spacing:.01em; white-space:nowrap;}
.lp-nav-item:hover{color:#fff;}
.lp-nav-item.active{color:#fff;}
.lp-nav-item.active::after{
  content:""; position:absolute; left:10px; right:10px; bottom:0; height:2px;
  background:var(--accent); border-radius:2px 2px 0 0;
}

.lp-nav-external{
  display:flex; align-items:center; gap:7px;
  color:rgba(255,255,255,.85); text-decoration:none;
  padding:0 12px; height:var(--nav-height); flex:none;
  opacity:.9;
}
.lp-nav-external:hover{opacity:1;}
.lp-nav-external img{height:16px; width:auto; display:block;}
.lp-nav-external svg{width:12px; height:12px; flex:none;}

.lp-topbar-divider{width:1px; align-self:center; height:26px; background:rgba(255,255,255,.22); margin:0 4px; flex:none;}

.lp-topbar-right{display:flex; align-items:center; gap:2px; flex:none; margin-left:2px;}
.lp-icon-btn{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:9px; border:none; background:transparent; color:rgba(255,255,255,.85);
  cursor:pointer; position:relative;
}
.lp-icon-btn:hover{background:rgba(255,255,255,.12); color:#fff;}
.lp-icon-btn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7;}
.lp-notif-dot{
  position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 2px var(--nav-orange-muted);
}
.lp-avatar{
  width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px;
  border:none; cursor:pointer; margin-left:4px; flex:none; overflow:hidden; padding:0;
}
.lp-avatar img{width:100%; height:100%; object-fit:cover; display:block;}

/* -------------------------------------------------------------------------
   Submenu — vaste neutrale (antraciete) achtergrond, los van het verloop erboven
   ------------------------------------------------------------------------- */
.lp-submenu{
  height:var(--submenu-height);
  background:var(--submenu-bg);
  display:flex; align-items:stretch; gap:2px;
  padding:0 16px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.lp-submenu::-webkit-scrollbar{display:none;}
.lp-submenu[hidden]{display:none;}

.lp-submenu-item{
  display:flex; align-items:center; height:var(--submenu-height);
  padding:0 14px; color:rgba(255,255,255,.62);
  font-size:12.5px; font-weight:600; letter-spacing:.01em;
  text-decoration:none; white-space:nowrap; position:relative; flex:none;
}
.lp-submenu-item:hover{color:#fff; background:var(--submenu-bg-hover);}
.lp-submenu-item.active{color:#fff;}
.lp-submenu-item.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:0; height:2px;
  background:var(--accent); border-radius:2px 2px 0 0;
}

.lp-submenu-copyright{
  margin-left:auto; align-self:center; flex:none;
  font-size:10.5px; font-weight:500; color:rgba(255,255,255,.55);
  white-space:nowrap; padding-left:16px;
}
@media (max-width:720px){
  .lp-submenu-copyright{display:none;}
}

/* -------------------------------------------------------------------------
   Content-zone basisstijlen (herbruikt op elke pagina)
   ------------------------------------------------------------------------- */
.lp-page{max-width:1320px; margin:0 auto; padding:22px 20px 60px;}
.lp-page-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.lp-page-head h1{font-size:21px; font-weight:700; margin:0;}
.lp-card{background:var(--surface-card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow); margin-bottom:16px;}
.lp-empty{color:var(--ink-faint); font-size:13.5px; padding:40px; text-align:center;}

@media (max-width:720px){
  .lp-nav-item-label{display:none;}
  .lp-nav-item{min-width:44px;}
  .lp-logo{margin-right:24px;}
  .lp-logo img{height:24px;}
}