/*
 * App shell + dashboard layout. The global background is the brand green; pages render into a
 * white rounded panel beside a fixed sidebar. Reusable "brick" styles live in components.css —
 * this file owns the app-level shell, sidebar navigation, and page-header scaffolding.
 */

html, body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font-body);
    background: var(--color-brand-bg);   /* global app background — brand green (#0D8A6D) */
    color: var(--color-brand-ink);
}

* {
    box-sizing: border-box;
}

/* FocusOnNavigate focuses the page <h1> (tabindex=-1) on each navigation for screen readers;
   suppress the visible focus ring it leaves on the heading (it's only focused programmatically). */
[tabindex="-1"]:focus {
    outline: none;
}

/* ---- App shell: green background, fixed sidebar + white content panel ---- */
.dash-shell {
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
}

/* ---- Mobile top bar (hidden on desktop; shown ≤768px, see media query below) ----
   Replaces the sidebar's chrome on small screens: logo mark, centred client switcher, hamburger. */
.dash-topbar {
    display: none;          /* desktop: off; the media query flips this to flex */
    position: relative;
    z-index: 30;            /* keeps the client-switcher dropdown above the scrolling content */
    align-items: center;
    gap: 12px;
    min-height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 12px 0;
    background: var(--color-brand-bg);
    color: var(--color-on-brand);
    flex-shrink: 0;
}

.dash-topbar-logo {
    height: 24px;
    width: auto;
    flex-shrink: 0;
    filter: brightness(0) invert(1);   /* recolour the green brand mark to white */
}

/* Centre slot — the client switcher (or, for single-client users, a static client name). */
.dash-topbar-client {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.dash-topbar-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: -0.01em;
    color: var(--color-on-brand);
}

.dash-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-right: -6px;     /* optical edge alignment of the glyph */
    border: 0;
    background: transparent;
    color: var(--color-on-brand);
    cursor: pointer;
}

.dash-burger .dash-ico {
    width: 24px;
    height: 24px;
}

/* Scrim behind the open drawer (mobile only; toggled by the media query). */
.dash-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgb(from var(--color-brand-ink) r g b / 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.dash-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    color: var(--color-on-brand);
}

.dash-logo {
    height: 25px;
    width: auto;
    margin: 46px auto 45px;   /* Figma: centred, ~46 above / 45 below */
    /* optical centre: nudge toward the lighter wordmark so the dense mark doesn't pull it left */
    transform: translateX(3px);
    filter: brightness(0) invert(1);   /* recolour the single-colour brand SVG to white for the dark sidebar */
}

/* the green margin that frames the white panel */
.dash-content {
    flex: 1;
    min-width: 0;
    display: flex;
    padding: 16px 16px 16px 0;
}

/* the white "main page" — fluid (fills the space, framed by the green margin); Figma reference
   1104 × 800. Radius 24, padding 32, 24px gap between the sections that render inside it. */
.dash-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    background: var(--surface-card);   /* Figma: Base/Background #F7F5FC */
    border-radius: 24px;
    overflow-y: auto;
}

/* ---- Sidebar navigation ---- */
/* The whole module container is bounded top & bottom (Figma: 0.75px #23A477). */
.dash-nav {
    flex: 1 1 0;       /* fills the space between logo and footer (Figma) */
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-top: 0.75px solid var(--color-brand-border);
}

.dash-nav-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
}

/* divider between module bunches */
.dash-nav-group + .dash-nav-group {
    border-top: 0.75px solid var(--color-brand-border);
}

/* Module buttons — Figma: Space Grotesk 400 / 12px / line-height 100% / letter-spacing -1%. */
.dash-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 8px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--color-on-brand);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -0.01em;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.dash-nav-item:hover:not(.dash-nav-item--active) {
    background: rgba(255, 255, 255, 0.10);
}

.dash-nav-item--active {
    background: var(--color-brand);
    color: var(--color-brand-dark);   /* Figma: Grønn Mørk #003930 */
}

/* Icon rendered as a mask, so it inherits the item's text colour (white, or dark when active).
   One file per icon recolours for every state — no per-state icon assets needed. */
.dash-ico {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat;
    mask: var(--ico) center / contain no-repeat;
}

/* ---- Sidebar footer: logged-in identity + log out (Figma: gap 16, 16px vertical padding) ---- */
.dash-foot {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0;
    border-top: 0.75px solid var(--color-brand-border);
}

.dash-foot-id {
    display: flex;
    flex-direction: column;
    gap: 4px;   /* Figma: 128 × 33, gap 4 */
    /* INNLOGGET SOM + name are left-aligned */
}

/* "INNLOGGET SOM" — Figma: Inter 400 / 10px / line-height 100% / +1% tracking / centred. */
.dash-foot-label {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--color-brand);   /* Figma: #11CB8A */
}

/* Identity name — Figma: Inter 400 / 14px / line-height 100% / -1% tracking / centred. */
.dash-foot-name {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--color-text-negative);   /* Figma: Base/Text Negative #FBFAFF */
}

/* Log out — Figma: 32px tall, radius 5, 1px border, no fill; Space Grotesk 400 / 12px / -1%. */
.dash-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 32px;
    padding: 0 15px;
    border: 1px solid var(--color-brand);   /* Figma: #11CB8A */
    border-radius: 5px;
    background: transparent;
    color: var(--color-on-brand);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.dash-logout:hover {
    background: rgb(from var(--color-brand) r g b / 0.12);   /* subtle brand-green tint */
}

/* Figma mirrors the log-out glyph so the arrow points outward. */
.dash-logout .dash-ico {
    transform: scaleX(-1);
}

/* ---- Sidebar client switcher (shown above the footer when the user has >1 client) ---- */
.client-switch {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 0 0;
}

.client-switch-label {
    font-family: var(--font-ui);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brand);
}

/* ---- Page header (pages render this into the white panel) ---- */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* "Ny bestilling" CTA — Figma: Base/Button Default #07332C, h36, radius 4, px16, gap 8;
   Space Grotesk Medium 14px / -1% in Base/Background #F7F5FC; Plus icon (white). */
.dash-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 4px;
    background: var(--color-brand-ink);
    color: var(--color-on-brand);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
}

.dash-cta:hover {
    background: var(--color-brand-ink-hover);
}

.dash-cta .dash-ico {
    width: 21px;
    height: 21px;
}

/* H1 — Figma: Space Grotesk Medium / 28px / -0.54% / Base/Text Positive #1D1D34. */
.page-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.0054em;
    color: var(--color-text-positive);
}

/* Subtitle — Figma: Inter 18pt (optical) Regular / 12px / 100% / -2% / Base/Text Subtle #9292A7.
   "Inter 18pt" is Inter's 18pt optical master; we force opsz 18 on the loaded variable font. */
.page-subtitle {
    margin: 4px 0 0;
    font-family: "Inter 18pt", var(--font-ui);
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 18;
    color: var(--color-text-subtle);
}

/* ---- Dashboard section (rendered inside the white panel) ---- */
.dash-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* H2 — Figma: Space Grotesk Medium / 16px / Base/Text Positive. */
.section-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: var(--color-text-positive);
}

.dash-note {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--color-text-subtle);
}

/* ---- Mobile shell (≤768px) -----------------------------------------------------------
   The 160px sidebar is unusable on a phone, so below this width the shell stacks: a green top
   bar, the white panel full-width beneath it, and the sidebar becomes a slide-in drawer. */
@media (max-width: 768px) {
    .dash-shell {
        flex-direction: column;
    }

    .dash-topbar {
        display: flex;
    }

    /* Sidebar → off-canvas drawer. It no longer sits on the green shell, so it carries its own bg. */
    .dash-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        width: 80vw;
        max-width: 300px;
        padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
        background: var(--color-brand-bg);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .dash-shell--nav-open .dash-sidebar {
        transform: translateX(0);
    }

    .dash-shell--nav-open .dash-backdrop {
        display: block;
        opacity: 1;
    }

    /* The client switcher lives in the top bar on mobile, so hide the sidebar's copy in the drawer. */
    .dash-sidebar .client-switch {
        display: none;
    }

    /* Larger tap targets inside the drawer. */
    .dash-nav-item {
        padding: 11px 8px;
    }

    .dash-logout {
        height: 44px;
    }

    /* White panel fills the width below the top bar; only the top corners round (green peeks through). */
    .dash-content {
        padding: 0;
    }

    .dash-panel {
        border-radius: 16px 16px 0 0;   /* Figma: top corners 16px */
        padding: 32px 16px calc(32px + env(safe-area-inset-bottom));   /* Figma: 32 / 16 / 32 / 16 */
        gap: 16px;   /* Figma: 16px between sections */
    }

    /* Header stacks: title on top, full-width CTA below; the subtitle is dropped (matches Figma). */
    .page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .page-subtitle {
        display: none;
    }

    /* Figma mobile: full-width, h42, radius 8, gap 4, Grønn Mørk #003930 (desktop uses brand-ink),
       with a two-layer drop shadow. */
    .dash-cta {
        width: 100%;
        height: 42px;
        gap: 4px;
        border-radius: 8px;
        background: var(--color-brand-dark);
        box-shadow: 0 6px 16px rgb(from var(--color-brand-dark) r g b / 0.25),
                    0 2px 5px rgb(from var(--color-brand-dark) r g b / 0.30);
    }

    /* The + glyph is brand green on the dark mobile button (Figma). */
    .dash-cta .dash-ico {
        background-color: var(--color-brand);
    }
}

/* The drawer slide is motion; honour reduced-motion by snapping instead. */
@media (prefers-reduced-motion: reduce) {
    .dash-sidebar,
    .dash-backdrop {
        transition: none;
    }
}

/* ---- Blazor's unhandled-error banner (hidden until an error occurs) ---- */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }