/* === Base CSS for Mitt-Sameie === */

/* Farge- og typografi-setup */
:root {
    --app-primary: #0d6efd;
    --app-primary-soft: rgba(13, 110, 253, 0.08);

    --app-bg: #e5e7eb;          /* litt mørkere bakgrunn for mer kontrast */
    --app-surface: #ffffff;
    --app-surface-soft: #f9fafb;

    --app-border-subtle: #d1d5db;
    --app-text: #111827;
    --app-text-muted: #6b7280;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--app-bg);
    color: var(--app-text);
    margin: 0;
}

/* ========================= */
/*        HEADER / TOPP      */
/* ========================= */

.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border-subtle);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); /* tydeligere skygge */
}

.app-header-title {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.app-header-logo {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--app-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-primary);
    font-size: 1.3rem;
}

.app-header-text-main {
    font-weight: 600;
    font-size: .95rem;
}

.app-header-text-sub {
    font-size: .8rem;
    color: var(--app-text-muted);
}

/* ========================= */
/*           LAYOUT          */
/* ========================= */

.app-layout {
    min-height: 100vh;
}

.app-sidebar {
    background: var(--app-surface-soft);              /* litt mørkere enn content */
    border-right: 1px solid var(--app-border-subtle);
    min-width: 240px;
    max-width: 260px;
    box-shadow: 2px 0 10px rgba(15, 23, 42, 0.03);
}

.app-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: calc(100vh - 56px);
    background: var(--app-bg);
}

.app-main-inner {
    flex: 1;
    padding: 1.5rem 1.25rem;
}

.app-footer {
    border-top: 1px solid var(--app-border-subtle);
    background: var(--app-surface);
    color: var(--app-text-muted);
}

main {
    flex-grow: 1;
}

/* På større skjermer: sidebar sticky og full høyde slik at "Logg ut" havner nederst */
@media (min-width: 768px) {
    .app-layout {
        align-items: stretch;
    }

    .app-sidebar {
        position: sticky;
        top: 56px; /* ca. høyden på headeren */
        min-height: calc(100vh - 56px);
    }
}

/* ========================= */
/*         SIDEBAR           */
/* ========================= */

#sidebar {
    min-width: 240px;
    transition: transform .2s ease-out;
}

.app-sidebar h5 {
    font-size: .9rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--app-text-muted);
}

.app-sidebar .section-title {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--app-text-muted);
    margin-top: .75rem;
    margin-bottom: .25rem;
}

.app-sidebar .nav-link {
    border-radius: .6rem;
    color: #374151;
    padding: .45rem .6rem;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.app-sidebar .nav-link i {
    font-size: 1rem;
}

.app-sidebar .nav-link:hover,
.app-sidebar .nav-link:focus {
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

.app-sidebar .nav-link.active {
    background: var(--app-primary);
    color: #ffffff;
}

/* ========================= */
/*     MOBIL: SIDEBAR        */
/* ========================= */

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    z-index: 1035;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 767.98px) {
    .app-sidebar {
        position: fixed;
        top: 56px; /* høyden på headeren */
        left: 0;
        height: calc(100vh - 56px);
        transform: translateX(-100%);
        z-index: 1040;
    }

    .app-sidebar.active {
        transform: translateX(0);
    }
}

@media (min-width: 768px) {
    .sidebar-overlay {
        display: none;
    }
}

/* ========================= */
/*       GENERELLE TING      */
/* ========================= */

.text-muted-soft {
    color: var(--app-text-muted);
}

/* Notifikasjons-badge i header */
.notification-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.35rem;
    min-width: 1.1rem;
    line-height: 1;
}

/* (Valgfritt) dark-mode kan fortsatt bruke .dark-mode på body hvis du ønsker senere */
/* Force sidebar above all content */
#sidebar {
    z-index: 9999 !important;
}

.sidebar-overlay {
    z-index: 9998 !important;
}