:root {
    --beheer-blue:#083b73;
    --beheer-pink:#ef2c6c;
    --beheer-bg:#eef4f9;
    --beheer-card:#fff;
    --beheer-text:#102f50;
    --beheer-muted:#667b91;
    --beheer-border:#d7e3ed;
}

* { box-sizing:border-box; }

body {
    margin:0;
    background:var(--beheer-bg);
    color:var(--beheer-text);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.beheer-login-page {
    display:grid;
    min-height:100vh;
    place-items:center;
    padding:1rem;
    background:
        linear-gradient(rgba(6,42,79,.78),rgba(6,42,79,.78)),
        url('/assets/images/rethymnon-lighthouse.jpg') center/cover;
}

.beheer-login {
    width:min(430px,100%);
    padding:2rem;
    border-radius:24px;
    background:rgba(255,255,255,.97);
    box-shadow:0 24px 70px rgba(2,20,38,.3);
}

.beheer-login__brand,.beheer-brand {
    display:flex;
    align-items:center;
    gap:.7rem;
    color:var(--beheer-blue);
    text-decoration:none;
}

.beheer-login__brand img,.beheer-brand img { width:52px;height:52px;object-fit:contain; }
.beheer-login__brand strong,.beheer-brand strong { font-size:1.45rem; }
.beheer-login__brand strong span,.beheer-brand i { color:var(--beheer-pink);font-style:normal; }
.beheer-login__brand small,.beheer-brand small { display:block;color:var(--beheer-muted); }

.beheer-login h1 { margin:1.5rem 0 .35rem;font-size:2.25rem; }
.beheer-login p { color:var(--beheer-muted);line-height:1.55; }

label { display:grid;gap:.38rem;color:var(--beheer-text);font-weight:750;font-size:.88rem; }
input,select {
    width:100%;
    min-height:44px;
    padding:.7rem .8rem;
    border:1px solid var(--beheer-border);
    border-radius:10px;
    background:#fff;
    color:var(--beheer-text);
    font:inherit;
}
button {
    min-height:44px;
    padding:.7rem 1rem;
    border:0;
    border-radius:10px;
    background:var(--beheer-blue);
    color:#fff;
    font:inherit;
    font-weight:800;
    cursor:pointer;
}
.beheer-login form { display:grid;gap:1rem;margin-top:1.25rem; }

.beheer-header {
    position:sticky;top:0;z-index:20;
    display:flex;justify-content:space-between;align-items:center;
    min-height:76px;padding:.75rem clamp(1rem,4vw,4rem);
    border-bottom:1px solid var(--beheer-border);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
}
.beheer-header nav { display:flex;align-items:center;gap:.6rem; }
.beheer-header nav a,.beheer-header nav button {
    display:inline-flex;align-items:center;min-height:40px;padding:.55rem .75rem;
    border:1px solid var(--beheer-border);border-radius:9px;background:#fff;
    color:var(--beheer-blue);text-decoration:none;font-weight:800;
}

.beheer-shell { width:min(1440px,calc(100% - 2rem));margin:0 auto;padding:2rem 0 4rem; }
.beheer-heading { display:flex;justify-content:space-between;gap:1rem;align-items:end;margin-bottom:1.25rem; }
.beheer-heading p { margin:0;color:var(--beheer-pink);font-weight:900;text-transform:uppercase;letter-spacing:.08em; }
.beheer-heading h1 { margin:.2rem 0;font-size:clamp(2rem,4vw,3.4rem); }
.beheer-heading span { color:var(--beheer-muted); }
.beheer-range { min-width:170px; }

.beheer-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1rem; }
.beheer-metrics article,.beheer-panel {
    border:1px solid var(--beheer-border);border-radius:18px;background:var(--beheer-card);
    box-shadow:0 8px 24px rgba(12,52,88,.06);
}
.beheer-metrics article { padding:1.15rem; }
.beheer-metrics span { display:block;color:var(--beheer-muted);font-size:.82rem;font-weight:750; }
.beheer-metrics strong { display:block;margin-top:.35rem;color:var(--beheer-blue);font-size:2rem; }

.beheer-panel { padding:1.2rem;min-width:0; }
.beheer-panel--wide { margin-bottom:1rem; }
.beheer-panel__heading { display:flex;justify-content:space-between;align-items:start;margin-bottom:1rem; }
.beheer-panel__heading h2 { margin:0;font-size:1.1rem; }
.beheer-panel__heading p { margin:.2rem 0 0;color:var(--beheer-muted);font-size:.8rem; }
.beheer-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem; }

.beheer-line-chart svg { display:block;width:100%;height:auto;overflow:visible; }
.beheer-line-chart .grid line { stroke:#dce7f0;stroke-width:1; }
.beheer-line-chart .grid text { fill:#73879b;font-size:12px; }
.beheer-line-chart .line { fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round; }
.beheer-line-chart .line--views { stroke:#0b5aa3; }
.beheer-line-chart .line--visitors { stroke:#ef2c6c; }
.chart-legend { display:flex;gap:1rem;justify-content:center;color:var(--beheer-muted);font-size:.82rem; }
.chart-legend span { display:flex;align-items:center;gap:.4rem; }
.chart-legend i { width:20px;height:4px;border-radius:999px; }
.legend-views { background:#0b5aa3; }.legend-visitors { background:#ef2c6c; }

.beheer-bars { display:grid;gap:.9rem; }
.beheer-bar div { display:flex;justify-content:space-between;gap:1rem;font-size:.82rem; }
.beheer-bar span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.beheer-bar i { display:block;width:var(--value);height:8px;margin-top:.4rem;border-radius:999px;background:linear-gradient(90deg,#0b5aa3,#47a7df); }

.beheer-activity { max-height:340px;overflow:auto; }
.beheer-activity>div { display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:.7rem;padding:.7rem 0;border-bottom:1px solid #edf2f6;font-size:.82rem; }
.beheer-activity time { color:var(--beheer-pink);font-weight:800; }
.beheer-activity span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.beheer-activity small { color:var(--beheer-muted); }

.beheer-password { display:grid;gap:.8rem; }
.beheer-alert { margin:0 0 1rem;padding:.8rem 1rem;border-radius:10px;font-weight:750; }
.beheer-alert--error { background:#fff0f0;color:#a61c1c; }
.beheer-alert--success { background:#e8faee;color:#166534; }

.beheer-gear {
    position:fixed;right:20px;bottom:20px;z-index:999;
    display:grid;place-items:center;width:52px;height:52px;
    border:2px solid rgba(255,255,255,.9);border-radius:50%;
    background:#0b4f88;color:#fff;text-decoration:none;font-size:1.4rem;
    box-shadow:0 9px 24px rgba(6,41,77,.28);
}
.beheer-gear:hover { transform:rotate(20deg) scale(1.04);background:#ef2c6c; }

@media(max-width:900px){
    .beheer-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .beheer-grid { grid-template-columns:1fr; }
}
@media(max-width:600px){
    .beheer-heading { align-items:start;flex-direction:column; }
    .beheer-metrics { grid-template-columns:1fr 1fr; }
    .beheer-header { padding:.65rem 1rem; }
    .beheer-brand small { display:none; }
    .beheer-activity>div { grid-template-columns:58px minmax(0,1fr); }
    .beheer-activity small { display:none; }
}