/*
 | Cynor brand neutrals for Nova.
 |
 | Nova ships Tailwind's blue-tinted "slate" as its gray ramp. This replaces it
 | with a warm charcoal ramp derived from the brand secondary #373436, which is
 | pinned exactly at shade 800 — the rest of the scale keeps that hue while
 | stepping the lightness. Nova consumes these as rgba(var(--colors-gray-N), a),
 | so the values must stay bare "R, G, B" triples.
 |
 | Linked from the published nova::partials.meta, which Nova includes *before*
 | its own app.css — hence the doubled :root, which outranks Nova's single-:root
 | block regardless of load order. Nova::style() is not an option here: it only
 | emits stylesheets for authenticated users, so the login screen would miss them.
 | The primary ramp (#f76605) lives in config/nova.php under brand.colors.
 */
:root:root {
    --colors-gray-50: 250, 249, 250;
    --colors-gray-100: 245, 243, 244;
    --colors-gray-200: 230, 228, 229;
    --colors-gray-300: 213, 211, 212;
    --colors-gray-400: 163, 159, 161;
    --colors-gray-500: 117, 113, 115;
    --colors-gray-600: 84, 80, 82;
    --colors-gray-700: 66, 63, 65;
    --colors-gray-800: 55, 52, 54;
    --colors-gray-900: 37, 34, 36;
    --colors-gray-950: 23, 21, 22;
}

/*
 | Fixed header.
 |
 | Nova's 56px header sits in the normal flow, so it scrolls away. Pinning it
 | leaves a 56px hole at the top of the flow, which the padding on the content
 | wrapper fills. That padding is outside the media query below because the
 | header is fixed at every width. z-index 30 keeps it above page content while
 | staying under Nova's modals, dropdowns and backdrops (50 and up).
 */
#nova > div > header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
}

#nova [dusk='content'] {
    padding-top: 3.5rem;
}

/*
 | Notification panel — centred empty state.
 |
 | Nova's notification drawer stretches the full height of the viewport, but its
 | "There are no new notifications." block is a plain `py-12` div sitting at the
 | top of it. The panel has no dusk handle, so it is reached as the sibling that
 | follows the backdrop; `:has()` scopes this to the empty state only, leaving
 | the scrolling list alone when notifications do exist.
 */
[dusk='notifications-backdrop'] + div:has(> div.py-12) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*
 | Sidebar surface — brand charcoal (#373436, i.e. gray-800 on the ramp above).
 |
 | Nova's desktop sidebar is an unstyled absolutely-positioned column (the only
 | stable handles are the `dusk="content"` wrapper and its `w-60` width class),
 | so it blends into the page background and scrolls away with the page. It is
 | pinned instead: `fixed` + `bottom: 0` override Nova's `lg:absolute` and
 | `lg:bottom-auto`, so the column spans from under the 56px header to the foot
 | of the viewport and stays put. The column itself never scrolls — it is a flex
 | container whose only child, the menu, takes the overflow (`min-height: 0` is
 | what lets that child actually shrink below its content height).
 |
 | Nova's menu items are built for a light background (text-gray-500,
 | hover:bg-gray-200), so every foreground colour is inverted below. These
 | selectors lead with #nova, which outranks Tailwind's single-class utilities
 | without needing !important. Active items step up to primary-400 rather than
 | primary-500 — the 500 does not carry enough contrast on charcoal.
 */
@media (min-width: 1024px) {
    #nova [dusk='content'] > div.w-60 {
        position: fixed;
        bottom: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: rgba(var(--colors-gray-800), 1);
        border-right: 1px solid rgba(var(--colors-gray-900), 1);
    }

    #nova [dusk='content'] > div.w-60 .sidebar-menu {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        /* Nova pads the menu with pb-24 to keep the last item off the bottom of
           the page; the column's own py-8 does that job now that it scrolls. */
        padding-bottom: 0;
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--colors-gray-600), 1) transparent;
    }

    #nova [dusk='content'] > div.w-60 .sidebar-menu a,
    #nova [dusk='content'] > div.w-60 .sidebar-menu button,
    #nova [dusk='content'] > div.w-60 .sidebar-menu h3 {
        color: rgba(var(--colors-gray-300), 1);
    }

    #nova [dusk='content'] > div.w-60 .sidebar-menu a:hover,
    #nova [dusk='content'] > div.w-60 .sidebar-menu button:hover {
        background-color: rgba(var(--colors-gray-700), 1);
        color: rgba(var(--colors-white), 1);
    }

    #nova [dusk='content'] > div.w-60 .sidebar-menu .text-primary-500 {
        color: rgba(var(--colors-primary-400), 1);
    }

    /* Nova's menu items carry `focus:ring`, so a mouse click leaves a pale ring
       (a box-shadow) behind on the clicked item. `:not(:focus-visible)` drops it
       for pointer clicks only — keyboard tabbing still gets the ring, which is
       the one case it exists for. */
    #nova [dusk='content'] > div.w-60 .sidebar-menu a:focus:not(:focus-visible),
    #nova [dusk='content'] > div.w-60 .sidebar-menu button:focus:not(:focus-visible) {
        box-shadow: none;
    }
}