/* ====== Global Theme Variables ====== */
:root {
    --bg: #313338;
    --bg-elev: #2b2d31;
    --panel: #1e1f22;
    --panel-2: #232428;
    --border: #2b2d31;
    --muted: #b5bac1;
    --text: #f2f3f5;
    --link: #99a6ff;
    --accent: #5865F2;
    --accent-2: #4752c4;
    --danger: #ed4245;
    --ring: rgba(88,101,242,.35);
}

/* Box sizing fix – undviker overflow pga padding/marginaler */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ====== Base Layout ====== */
html, body {
    height: 100%;
    margin: 0;
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings and links (globala) */
h1, h2, h3 {
    margin: .25rem 0 1rem;
    font-weight: 700;
    letter-spacing: .2px;
}

h1 {
    font-size: 1.9rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.2rem;
}

a {
    color: var(--link);
    text-decoration: none;
}

    a:hover {
        color: var(--accent);
    }

/* Scrollbars (Chromium) */
*::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

*::-webkit-scrollbar-thumb {
    background: #3b3d45;
    border-radius: 999px;
    border: 3px solid var(--bg);
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* ===== Sidebar link colors – force from global CSS ===== */
.sidebar .sb-link,
.sidebar .sb-link:link,
.sidebar .sb-link:visited {
    color: var(--text) !important; /* vit text i menyn */
}

    .sidebar .sb-link .i,
    .sidebar .sb-link .t {
        color: inherit !important; /* ärv länksfärgen */
    }

    /* Danger: "Logga ut" ska vara röd */
    .sidebar .sb-link.danger,
    .sidebar .sb-link.danger:link,
    .sidebar .sb-link.danger:visited,
    .sidebar .sb-link.danger:hover,
    .sidebar .sb-link.danger:active {
        color: var(--danger) !important;
    }

        .sidebar .sb-link.danger:hover,
        .sidebar .sb-link.danger:active {
            background: rgba(237,66,69,.15) !important;
        }

/* --- Baslayout: sidebar + main i full höjd --- */
.app {
    display: flex;
    min-height: 100dvh; /* fyll viewporthöjd */
}

    .app > main {
        flex: 1;
        display: flex; /* så sidor kan fylla höjd */
        flex-direction: column;
        padding: 1rem;
        min-width: 0; /* viktigt för att undvika overflow i flex */
    }