/* ── Reset ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ───────────────────────── */
:root {
    --navy:       #0d1b3e;
    --navy-mid:   #152347;
    --navy-light: #1e3260;
    --navy-hover: #243a72;
    --accent:     #4a7fd4;
    --accent-glow:#6b9de8;
    --text:       #e8edf8;
    --text-muted: #8a9bbf;
    --text-dim:   #4a5880;
    --border:     rgba(74, 127, 212, 0.18);
    --border-mid: rgba(74, 127, 212, 0.28);
    --sidebar-w:  240px;
    --sidebar-collapsed: 60px;
    --topbar-h:   56px;
    --mobile-breakpoint: 980px;
    --radius:     8px;
    --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Base ────────────────────────────────── */
html, body {
    height: 100%;
    background: var(--navy);
    color: var(--text);
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

/* ── Topbar ──────────────────────────────── */
#topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    background: var(--navy-mid);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    z-index: 100;
    backdrop-filter: blur(8px);
}

#topbar-logo {
    width: var(--sidebar-w);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    transition: width var(--transition);
    overflow: hidden;
}

#topbar-logo img {
    height: 28px;
    filter: brightness(0) invert(1);
    opacity: 0.92;
    flex-shrink: 0;
}

#topbar-title {
    flex: 1;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    flex-shrink: 0;
}

#topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 13px;
}

#topbar-user .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--navy-hover);
    border: 1px solid var(--border-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--accent-glow);
    font-weight: 500;
}

.btn-logout {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 12px;
    font-family: 'Sora', sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
}

.btn-logout:hover {
    background: rgba(74, 127, 212, 0.1);
    border-color: var(--accent);
    color: var(--text);
}

#sidebar-toggle {
    width: 40px;
    height: 40px;
    margin-left: 8px;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all var(--transition);
    flex-shrink: 0;
}

#sidebar-toggle:hover {
    background: var(--navy-hover);
    color: var(--text);
}

/* ── Sidebar ─────────────────────────────── */
#sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--navy-mid);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 90;
    transition: width var(--transition);
    overflow: hidden;
}

#mobile-nav-backdrop {
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    background: rgba(3, 7, 20, 0.66);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
    z-index: 80;
}

#sidebar nav {
    flex: 1;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 400;
    white-space: nowrap;
    transition: all var(--transition);
    position: relative;
}

.nav-item:hover {
    background: var(--navy-hover);
    color: var(--text);
}

.nav-item.active {
    background: rgba(74, 127, 212, 0.15);
    color: var(--accent-glow);
    font-weight: 500;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
}

.nav-icon {
    font-size: 15px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    font-style: normal;
}

.nav-label {
    transition: opacity var(--transition);
}

/* ── Collapsed sidebar ───────────────────── */
body.collapsed #sidebar        { width: var(--sidebar-collapsed); }
body.collapsed #topbar-logo    { width: var(--sidebar-collapsed); }
body.collapsed .nav-label      { opacity: 0; pointer-events: none; }
body.collapsed #main           { margin-left: var(--sidebar-collapsed); }

/* ── Main content ────────────────────────── */
#main {
    margin-top: var(--topbar-h);
    margin-left: var(--sidebar-w);
    min-height: calc(100vh - var(--topbar-h));
    padding: 32px;
    transition: margin-left var(--transition);
    background:
        radial-gradient(ellipse at 80% 0%, rgba(74,127,212,0.06) 0%, transparent 60%),
        var(--navy);
}

/* ── Card ────────────────────────────────── */
.card {
    background: var(--navy-mid);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

.card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

/* ── Login ───────────────────────────────── */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
}

.login-box {
    width: 360px;
    background: var(--navy-mid);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px;
}

.login-logo {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo img {
    height: 36px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* ── Form elementen ──────────────────────── */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.form-group input {
    width: 100%;
    padding: 10px 14px;
    background: var(--navy);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-family: 'Sora', sans-serif;
    outline: none;
    transition: border-color var(--transition);
}

.form-group input:focus { border-color: var(--accent); }

.btn-primary {
    width: 100%;
    padding: 11px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Sora', sans-serif;
    cursor: pointer;
    margin-top: 8px;
    transition: background var(--transition);
}

.btn-primary:hover { background: var(--accent-glow); }

/* ── Gedeelde tool-componenten ───────────── */
.tool-input {
    width: 100%;
    padding: 9px 12px;
    background: var(--navy);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 13px;
    font-family: 'Sora', sans-serif;
    outline: none;
    transition: border-color var(--transition);
}

.tool-input:focus { border-color: var(--accent); }

.tool-btn {
    padding: 9px 16px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    color: #fff;
    font-size: 13px;
    font-family: 'Sora', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
    outline: none;
}

.tool-btn:hover { background: var(--accent-glow); }

.tool-copy-btn {
    background: transparent;
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
    transition: all var(--transition);
    outline: none;
}

.tool-copy-btn:hover {
    background: rgba(74, 127, 212, 0.1);
    border-color: var(--accent);
    color: var(--text);
}

.tool-copy-btn.copied { border-color: #4caf82; color: #4caf82; }

/* ── Utilities ───────────────────────────── */
.mono { font-family: 'DM Mono', monospace; }
.text-muted { color: var(--text-muted); }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }

/* ── Mobile ──────────────────────────────── */
@media (max-width: 980px) {
    #topbar-logo { width: auto; padding: 0 12px; }
    #topbar-logo img { height: 24px; }
    #sidebar-toggle { margin-left: 0; }
    #topbar-title { padding: 0 10px; font-size: 14px; }
    #topbar-right { padding: 0 10px; gap: 8px; }
    #topbar-user span { display: none; }
    .btn-logout { padding: 6px 10px; }
    .btn-logout span { display: none; }

    #sidebar {
        width: min(82vw, 300px);
        transform: translateX(-100%);
        transition: transform var(--transition);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.38);
    }

    body.mobile-menu-open { overflow: hidden; }
    body.mobile-menu-open #sidebar { transform: translateX(0); }
    body.mobile-menu-open #mobile-nav-backdrop { opacity: 1; pointer-events: auto; }

    body.collapsed #sidebar { width: min(82vw, 300px); }
    body.collapsed .nav-label { opacity: 1; pointer-events: auto; }

    #main,
    body.collapsed #main { margin-left: 0; padding: 16px; }
}