/* ══════════════════════════════════════════════════════════════════
   BASIS — reset + fundamenten (body, login-scherm, kleuren-uitgangspunt)
   Wordt als EERSTE geladen (zie templates/base.html) — alles hierna kan
   op deze reset bouwen. Nieuwe, herbruikbare kleurwaarden hier bovenaan
   toevoegen i.p.v. verderop in een andere CSS-file te hardcoderen.
   ══════════════════════════════════════════════════════════════════ */
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Segoe UI',system-ui,sans-serif; background:#faf4ec; color:#2a1418; font-size:16px; min-height:100vh; -webkit-font-smoothing:antialiased; }

/* LOGIN */
#loginScreen { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(140deg,#b23c4d 0%,#c94558 45%,#e9a42a 100%); padding:1.5rem; }
.login-card { background:white; border-radius:18px; padding:1.75rem 1.5rem; width:100%; max-width:360px; box-shadow:0 16px 36px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.08); }
.login-logo { text-align:center; margin-bottom:1.35rem; }
.login-logo .li { font-size:2.1rem; display:block; margin-bottom:0.35rem; }
.login-logo h1 { font-size:1.45rem; font-weight:700; color:#a83545; letter-spacing:-0.01em; }
.login-logo p { font-size:0.8rem; color:#6b7280; margin-top:0.15rem; }
.lbl { display:block; font-size:0.78rem; font-weight:700; color:#6b7280; margin-bottom:0.35rem; text-transform:uppercase; letter-spacing:0.06em; }
.inp { width:100%; padding:0.65rem 0.9rem; border:1.5px solid #e2e8f0; border-radius:9px; font-size:1rem; color:#2a1418; background:white; margin-bottom:0.8rem; font-family:inherit; transition:border-color 0.15s, box-shadow 0.15s; }
.inp:focus { outline:none; border-color:#a83545; box-shadow:0 0 0 3px rgba(168,53,69,0.1); }
.err-box { background:#fef2f2; color:#ef4444; border:1px solid #fecaca; border-radius:8px; padding:0.65rem 1rem; font-size:0.88rem; margin-bottom:1rem; }
.btn-primary { display:block; width:100%; padding:0.85rem; background:#a83545; color:white; border:none; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer; font-family:inherit; }
.btn-primary:hover { background:#c44a5c; }

/* SHELL */
#appShell { min-height:100vh; }
.topbar { background:linear-gradient(180deg,#b54050,#a83545); color:white; padding:0 1rem; display:flex; align-items:center; justify-content:space-between; height:56px; position:sticky; top:0; z-index:50; }
.topbar-title { font-size:1rem; font-weight:700; }

/* AVATAR DROPDOWN */
.dropdown-wrap { position:relative; }
.avatar-btn { width:36px; height:36px; border-radius:50%; background:#f0b020; color:#2a1418; border:none; cursor:pointer; font-weight:800; font-size:0.88rem; font-family:inherit; flex-shrink:0; }
.avatar-btn.admin-ring { box-shadow:0 0 0 2px white, 0 0 0 4px #f0b020; }
.dropdown-menu { display:none; position:absolute; top:calc(100% + 8px); right:0; background:white; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.18); min-width:210px; overflow:hidden; z-index:300; }
.dropdown-menu.open { display:block; }
.dropdown-header { padding:0.85rem 1rem 0.65rem; border-bottom:1px solid #f4ede3; }
.dropdown-name { font-weight:700; font-size:0.92rem; color:#2a1418; }
.dropdown-role { font-size:0.72rem; color:#9ca3af; margin-top:1px; }
.dropdown-item { display:flex; align-items:center; gap:0.65rem; padding:0.7rem 1rem; font-size:0.88rem; color:#2a1418; cursor:pointer; border:none; background:none; font-family:inherit; width:100%; text-align:left; text-decoration:none; }
.dropdown-item:hover { background:#fbf5eb; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item:visited { color:#2a1418; text-decoration:none; }
.dropdown-item .di { font-size:1rem; width:20px; text-align:center; }
.dropdown-divider { height:1px; background:#f4ede3; }
.dropdown-item.danger { color:#ef4444; }
.dropdown-item.danger:hover, .dropdown-item.danger:focus, .dropdown-item.danger:visited { color:#ef4444; }

/* CONTENT */
.content { padding:0.7rem 0.85rem 5.5rem; max-width:720px; margin:0 auto; }
.page { display:none; }
.page.active { display:block; }

/* BOTTOM NAV */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:white; border-top:1.5px solid #e2e8f0; display:grid; grid-template-columns:repeat(4,1fr); z-index:50; }
.nav-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0.4rem 0.1rem 0.35rem; gap:1px; border:none; background:none; cursor:pointer; font-family:inherit; color:#9ca3af; font-size:0.58rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; }
.nav-tab:hover, .nav-tab:focus, .nav-tab:visited { text-decoration:none; }
.nav-tab .ni { font-size:1.1rem; }
.nav-tab.active { color:#a83545; }

/* DASHBOARD GRID */
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; align-items:start; }
@media(max-width:500px){ .dash-grid { grid-template-columns:1fr; } }
.dash-col-label { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:#9ca3af; margin-bottom:0.35rem; }
.dash-panel { background:white; border-radius:14px; box-shadow:0 1px 6px rgba(0,0,0,0.07); overflow:hidden; }
.dash-panel-header { padding:0.5rem 0.85rem; border-bottom:1px solid #f4ede3; display:flex; align-items:center; justify-content:space-between; }
.dash-panel-title { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#a83545; }
.dash-panel-action { font-size:0.7rem; color:#a83545; background:none; border:none; cursor:pointer; font-family:inherit; font-weight:600; }

/* DAG NAVIGATOR */
.dag-nav { display:flex; align-items:center; background:white; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,0.06); padding:0.28rem 0.5rem; margin-bottom:0.45rem; gap:0.35rem; }
.dag-nav-btn { background:none; border:none; font-size:1.2rem; cursor:pointer; color:#a83545; padding:0 0.25rem; border-radius:6px; flex-shrink:0; line-height:1; }
.dag-nav-btn:hover { background:#f4ede3; }
.dag-nav-center { flex:1; text-align:center; display:flex; align-items:baseline; justify-content:center; gap:0.3rem; min-width:0; }
.dag-nav-day { font-size:0.85rem; font-weight:800; color:#a83545; white-space:nowrap; }
.dag-nav-date { font-size:0.68rem; color:#9ca3af; white-space:nowrap; }
.dag-nav-today { font-size:0.65rem; background:#f0b020; color:#2a1418; border:none; border-radius:99px; padding:0.1rem 0.5rem; font-weight:700; cursor:pointer; font-family:inherit; line-height:1.3; }