/* =========================================
   Produktfakta Admin – Enhetlig site.css
   ========================================= */

/* --------- CSS-variabler --------- */
:root {
    --pf-sidebar-w: 270px;
    /* Sidebar-tema (låst) */
    --pf-sidebar-bg: #0f172a; /* Slate 900 */
    --pf-sidebar-fg: #e2e8f0; /* text */
    --pf-sidebar-muted: #94a3b8; /* ikon/sektionstitlar */
    --pf-accent: #22c55e; /* accent (aktiv länk/ikon) */
    /* Content-bakgrund i ljust läge */
    --pf-content-bg: #f7f7fb;
}

/* --------- Bas / typografi --------- */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    background: var(--pf-content-bg);
}

/* Bootstrap focus-ring (behåll snygg kontrast) */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Länkar (globalt, utanför sidebar) */
a {
    color: #0077cc;
}

/* Knapp-primary (Bootstrap override) */
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Nav-pills (utanför sidebar, t.ex. i formulärsidor) */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Små hjälparklasser */
.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.05);
}

.muted {
    color: #6c757d;
}

/* --------- Layout --------- */
.app {
    min-height: 100vh;
    display: flex;
}

.sidebar {
    width: var(--pf-sidebar-w);
    background-color: var(--pf-sidebar-bg);
    color: var(--pf-sidebar-fg);
    border-right: 1px solid rgba(255,255,255,.06);
}

.brand {
    padding: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.topbar {
    background: #fff; /* följer content-läge; kan bytas till var() om du vill */
    border-bottom: 1px solid #e9ecef;
    padding: .6rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.page {
    padding: 1.25rem;
}

/* --------- Sidebar Navigation --------- */
.sidebar .text-muted {
    color: var(--pf-sidebar-muted) !important;
}

.sidebar .nav-link {
    color: var(--pf-sidebar-fg);
    border-radius: .6rem;
    padding: .5rem .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .sidebar .nav-link i {
        color: var(--pf-sidebar-muted);
    }

    .sidebar .nav-link:hover {
        background: rgba(255,255,255,.06);
    }

    .sidebar .nav-link.active {
        background: rgba(34,197,94,.15); /* mjuk accentbakgrund */
        color: #fff;
        box-shadow: inset 0 0 0 1px rgba(34,197,94,.35);
    }

        .sidebar .nav-link.active i {
            color: var(--pf-accent);
        }

/* --------- Avatar (initialer) --------- */
.avatar-circle {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    background: rgba(34,197,94,.15);
    color: var(--pf-accent);
}

#sidebar {
    padding: 0;
}

    #sidebar .brand {
        background: #fff;
        padding: .875rem 1rem;
        border-bottom: 1px solid rgba(0,0,0,.06);
        position: sticky;
        top: 0;
        z-index: 2;
    }
/* --------- Footer --------- */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}

/* --------- Responsivt: mobilmeny --------- */
@media (max-width: 992px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        transform: translateX(-100%);
        transition: .2s ease;
        z-index: 1040;
    }

        .sidebar.show {
            transform: translateX(0);
        }
}



/* --------- Dark Mode för content (valfritt utökning) ---------
   Om du vill ha mörk topbar när html[data-bs-theme="dark"]:
*/
html[data-bs-theme="dark"] .topbar {
    background: #0b0f17;
    border-bottom-color: #1f2937;
}

html[data-bs-theme="dark"] body {
    background: #0b0f17; /* eller annan mörk bakgrund för content */
}

/* Tema-logo: byt bild vid dark mode */
.logo-dark { display: none; }
html[data-bs-theme="dark"] .logo-light { display: none; }
html[data-bs-theme="dark"] .logo-dark { display: inline; }