/* CategoryNav - the desktop Browse mega-menu.
   PERF-S17: extracted VERBATIM from an in-body <style> block in CategoryNav.razor, which shipped
   these 703 lines inside EVERY HTML response - uncacheable, on every page, whether or not
   the component was visible. Same move and same reasoning as rently-home.css (PUB-9.S3c) and
   dynamic-carousel.css. Razor's @@ at-rule escaping is un-escaped here, so edit the styles in
   THIS file - the .razor no longer carries them. */

    /* N1 (2026-07-24): the z tokens moved to the rently-nav.css :root block — ONE z system for
       the whole nav (the local --z-search-nav / --z-main-nav declarations were dead). The scrim
       starts BELOW the main nav bar (top offset) so the bar is never dimmed; the bar's
       will-change containment is released while the menu is open (rently-nav.css) so this fixed
       overlay can span the viewport instead of being pinned inside the bar's box. */
    .category-nav-overlay,
    .mud-overlay.category-nav-overlay {
        z-index: var(--z-category-overlay, 1450) !important;
        top: var(--rently-mainnav-height, 76px);
    }

    /* Animation Classes */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-in {
        animation: fadeInUp 0.3s ease-out;
    }

    /* Skeleton Styles */
    .mega-menu-skeleton {
        width: 100%;
        height: 100%;
        background-color: #fff;
        overflow: hidden;
    }

    .skeleton-container {
        display: flex;
        height: calc(100% - 60px);
    }

    .skeleton-left-panel {
        width: 30%;
        border-right: 1px solid #e0e0e0;
        padding: 8px 0;
    }

    .skeleton-category-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;   /* S7-17 R2: matches .category-nav-label's icon-to-label gap */
        padding: 12px 16px;
    }

    .skeleton-right-panel {
        width: 70%;
        padding: 16px;
        overflow: hidden;
    }

    .skeleton-grid {
        columns: 200px;
        column-gap: 20px;
    }

    .skeleton-subcategory-group {
        break-inside: avoid;
        margin-bottom: 20px;
    }

    .skeleton-group-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .skeleton-tags-bar {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .skeleton-tags-wrapper {
        display: flex;
        gap: 12px;
        overflow: hidden;
    }

    /* Loading state styles */
    .loading-popover {
        pointer-events: none;
    }

    /* Error state styles */
    .error-content {
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Original styles with performance improvements and z-index fix */
    .mega-popover {
        width: var(--rently-layout-max-width, 1440px);
        max-width: var(--rently-layout-max-width, 1440px);
        height: 500px;
        max-height: 80vh;
        left: 50% !important;
        transform: translateX(-50%) !important;

        /* N1 (2026-07-24): welded to the nav. top shares --rently-mainnav-height with the scrim, so
           the popup's top edge, the scrim's top edge and the bar's bottom hairline are ONE seam
           (left/transform were already hard-overridden the same way — this completes the set and
           replaces the old anchor-computed position + 14px margin, which left a gap and let the
           radius corners float free of the bar). Top corners square, top border dropped: the bar's
           own border-bottom hairline is the weld line. */
        top: var(--rently-mainnav-height, 76px) !important;
        overflow: hidden;
        overscroll-behavior: contain;
        margin-top: 0;

        /* G4 (2026-07-22): onto the shared nav-popover recipe in rently-nav.css. Was a hardcoded #ccc
           edge (which stayed light grey in dark mode), a 4px radius against the brand's 8px, and a
           2px/0.1 shadow far flatter than the sibling popovers — three reasons this menu read as a
           different component from the rest of the nav. */
        border: 1px solid var(--rently-border);
        border-top: 0;
        border-radius: 0 0 var(--rently-popover-radius, 8px) var(--rently-popover-radius, 8px);
        box-shadow: var(--rently-popover-shadow, 0 8px 24px -4px rgb(0 0 0 / 12%));
        transition: opacity 0.2s ease;

        /* S7-06: standing will-change:opacity removed. will-change is meant to be applied just before
           an animation and released after; declared permanently on a surface this large it holds a
           compositor layer for the whole session to serve one 0.2s fade. Opacity is compositable, so
           the browser promotes this element for the duration of the transition on its own. */
        z-index: var(--z-category-popover) !important;
    }

    /* ESC-08: the key scope is a pure passthrough for the popover's fixed-height layout chain
       (500px popover, MudStack height:100%, content pane flex:1/min-height:0 per the band-pass
       note above) — it fills the popover and re-establishes the same flex column the branches
       laid out in before the wrapper existed. No visible ring: it takes only programmatic focus
       (tabindex="-1"); the controls inside keep their own focus styles. */
    .mega-menu-key-scope {
        height: 100%;
        display: flex;
        flex-direction: column;
        min-height: 0;
        outline: none;
    }

    /* Override MudPopover default z-index */
    .mud-popover.mega-popover {
        z-index: var(--z-category-popover) !important;
    }

    /* Ensure popover paper also has correct z-index */
    .mega-popover .mud-popover-paper {
        z-index: var(--z-category-popover) !important;
    }

    .mega-popover.empty-popover {
        height: 200px;
    }

    .no-categories-message,
    .no-subcategories-message,
    .select-category-message {
        font-size: 16px;
        color: var(--rently-text-secondary);   /* G4: was #555, which never lifted in dark mode */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 32px;
        text-align: center;
    }

    /* Band pass 2026-07-23: `height: 100%` is the rule that made the tags band invisible — inside
       the 500px overflow:hidden popover this pane consumed the FULL height of the stack, pushing
       the band past the clip. flex:1/min-height:0 gives the band its intrinsic height and the pane
       the remainder (StretchItems.Start on the MudStack points the same way; this is the belt to
       that suspender, and it also keeps the inner columns' own scrollbars alive). */
    .mega-menu-content {
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
        background-color: #fff;
        justify-content: center;
    }

    .subcategories-column {
        width: 30%;
        border-right: 1px solid var(--rently-border, #ddd);
        overflow-y: auto;
        overscroll-behavior: contain;
        box-sizing: border-box;
        scroll-behavior: smooth;
    }

    .nested-subcategories-column {
        width: 70%;

        /* N1 (2026-07-24): 16px side inset aligns this pane's content with the tags band's own
           16px padding below it (one left edge down the whole popup). */
        padding: 16px 16px 10px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-behavior: smooth;
    }

    .subcategory-item {
        padding: 10px;
        text-align: center;
    }

    .subcategory-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .subcategory-image {
        width: 64px;
        height: 64px;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid var(--rently-border, #ddd);
    }

    .subcategory-name {
        font-size: 14px;
        color: #424242;
        word-wrap: break-word;
        max-width: 100px;
    }

    .view-all-item {
        display: block;
        font-weight: bold;
        border-bottom: 1px solid var(--rently-border, #ddd);
        margin-bottom: 10px;
        padding-bottom: 5px;
        transition: background-color 0.2s ease;
    }

        .view-all-item:hover {
            background-color: rgb(53 160 174 / 8%);
        }

    .nested-subcategories-list {
        columns: 200px;
        column-gap: 20px;
        column-rule: 1px solid var(--rently-border, #ddd);
    }

        .nested-subcategories-list .mud-list-item {
            display: inline-block;
            width: 100%;
            break-inside: avoid;
        }

    .mud-list-item.mud-selected {
        background-color: rgb(53 160 174 / 10%);
        font-weight: bold;
        border-left: 4px solid #35a0ae;
    }

        /* S7-17 QA fix: this rule targeted .mud-icon, which MudIcon NEVER emits (its classes
           are mud-icon-root / mud-svg-icon) — the selector matched zero elements document-wide
           and the selected row's glyph stayed muted in both themes. */
        .mud-list-item.mud-selected .mud-icon-root {
            color: #35a0ae;
        }

    .mud-list-item:hover {
        background-color: rgb(0 0 0 / 5%);
    }

    .category-hover .mud-stack {
        transition: background-color 0.2s ease;
    }

    .category-hover:hover {
        background-color: rgb(0 0 0 / 5%);
    }

    .category-tags-bar {
        width: 100%;
    }

    /* Band pass 2026-07-23: the SearchNav shortcuts-band vocabulary — tinted strip, hairline top
       divider, flat (the popover's own frame carries the elevation; Elevation dropped to 0 in the
       markup). The popover's 8px radius clips the bottom corners. Two compact cluster rows ≈60px
       total, matching the skeleton's calc(100% - 60px) reservation so loading→loaded doesn't jump. */
    .tags-paper {
        overflow: hidden;
        background-color: var(--rently-subtle-bg, #f8fafc);
        border-top: 1px solid var(--rently-border, #e2e8f0);
        padding: 5px 16px;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .tag-cluster {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 24px;
    }

    /* The shared nav-popover heading voice (small/tracked/uppercase/muted). */
    .tag-cluster-label {
        flex: 0 0 auto;
        min-width: 64px;
        font-size: var(--rently-popover-heading-size, 0.68rem);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--rently-text-secondary, #475569);
    }

    .tag-scroll-wrapper {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        gap: 8px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .tag-scroll-wrapper::-webkit-scrollbar {
            display: none;
        }

    /* Ink is a LITERAL, both themes (see the dark rule below): light needs AA on the tinted band
       (#256f7a — the same family as the SearchNav footer actions), and --mud-palette-primary is
       #35a0ae ≈ 4.0:1 on the tint, an SC 1.4.3 fail for 14px text. Transition list is explicit —
       `all` was animating the hover translateY, and a link that levitates out of a 24px row inside
       a clipped band is exactly the kind of motion the polish pass retires. Hover/focus must
       RESTATE the ink: site.css's bare a:hover/a:focus (0,1,1) outranks the base class (0,1,0)
       in those states and paints the Radzen link red, 4.39:1 on the teal wash — an SC 1.4.3
       fail. (The dark rule below pins all states at 0,3,0, so dark never needed this.) */
    .tag-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        white-space: nowrap;
        color: #256f7a;
        text-decoration: none;
        font-weight: 500;
        padding: 8px 10px;
        border-radius: 4px;
        transition: background-color 0.2s ease, color 0.2s ease;
        font-size: 14px;
    }

        .tag-link:hover {
            background-color: rgb(53 160 174 / 10%);
            color: #256f7a;
            text-decoration: underline;
        }

        .tag-link:focus {
            color: #256f7a;
        }

    .subcategory-group {
        break-inside: avoid;
        margin-bottom: 20px;
        transition: all 0.2s ease;
    }

        .subcategory-group:hover {
            transform: translateX(2px);
        }

    .subcategory-group-header {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: bold;
        margin-bottom: 6px;
    }

    .subcategory-group-image {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 4px;
        transition: transform 0.2s ease;
    }

    .subcategory-group:hover .subcategory-group-image {
        transform: scale(1.05);
    }

    /* S7-17 R2 — category glyphs (shared CategoryIconResolver).
       Level-1 rows: icon + name share an inner flex box so the trailing chevron stays pinned to the
       right by the outer MudStack's SpaceBetween. The icon is decorative (the label names the
       category), so it takes the muted body ink rather than an accent — the ONLY coloured thing in
       this column stays the selected-row marker, whose .mud-list-item.mud-selected .mud-icon-root
       rule (0,2,0) outranks .category-nav-icon (0,1,0) and paints it teal on selection. (The rule
       originally targeted `.mud-icon` — a class MudIcon never emits — and matched NOTHING; live QA
       caught it and the selector was corrected to .mud-icon-root.) */
    .category-nav-label {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .category-nav-icon {
        color: var(--rently-text-secondary, #475569);
        flex-shrink: 0;
    }

    .category-nav-label .mud-typography {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Level-2 header fallback: shares .subcategory-group-image, so it inherits that box's 40px,
       radius and hover-scale transition (and the reduced-motion suppression at the bottom of this
       block) without duplicating them. Only the fill differs — a tinted well, the same
       subtle-bg/border pair the tags band below uses. */
    .subcategory-group-image--icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-sizing: border-box;   /* the 1px border must eat into the 40px, not add to it */
        background-color: var(--rently-subtle-bg, #f8fafc);
        border: 1px solid var(--rently-border, #e2e8f0);
        color: var(--rently-text-secondary, #475569);
    }

    .subcategory-group-title {
        font-size: 16px;
        color: #006d77;
        transition: color 0.2s ease;
    }

        .subcategory-group-title:hover {
            color: #35a0ae;
            text-decoration: underline;
        }

    .subcategory-group-list {
        list-style: none;
        padding-left: 12px;
    }

        .subcategory-group-list li {
            font-size: 14px;
            margin: 4px 0;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

            .subcategory-group-list li:hover {
                background-color: rgb(53 160 174 / 8%);
                transform: translateX(4px);
            }

    /* scrollbars: universal kit (rently-dashboard-tokens.css N3) */

    /* Responsive adjustments */
    @media (max-width: 1479px) {
        .mega-popover {
            width: 95vw;
            max-width: 95vw;
        }
    }

    /* Touch-friendly adjustments */
    @media (hover: none) and (pointer: coarse) {
        .category-hover:active {
            background-color: rgb(53 160 174 / 15%);
        }

        .subcategory-group-list li:active {
            background-color: rgb(53 160 174 / 15%);
        }
    }

    /* Navigation shortcut icon wrapper - inline within button */
    .category-nav-shortcut-wrapper {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
    }

    /* Navigation shortcut icon styles. Initiative C · C2 Pt3.C — section-reactive + AA-safe on the new
       tinted-glass bar (the raw #35a0ae focus ring dropped to ~2.83:1 against the frosted surface). */
    .category-nav-shortcut {
        min-width: 24px !important;
        width: 24px !important;
        height: 24px !important;
        padding: 2px !important;
        color: var(--section-accent-text, var(--rently-primary-dark)) !important;
        background-color: transparent !important;
        border-radius: 50% !important;
        animation: fadeInScale 0.2s ease-out;
        vertical-align: middle;
    }

    .category-nav-shortcut:hover {
        transform: scale(1.1) !important;
        background-color: color-mix(in srgb, var(--section-accent, var(--rently-primary)) 10%, transparent) !important;
    }

    .category-nav-shortcut:focus-visible {
        outline: 2px solid var(--section-accent-text, var(--rently-primary-dark));
        outline-offset: 2px;
    }

    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.8);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Initiative C · C2 Pt3.C — the always-visible Browse button reacts to the active section
       (accent text + the locked "Pill" active state). Top-nav proposal G1 (2026-07-22): the pill is
       now also PERSISTENT while the user is in the browse/catalogue context (.browse-current, route-
       aware) — not only while the mega-popover is open — and the button adopts the mock silhouette
       (GridView outlined glyph + short "Browse" label + chevron + .82rem/600 link typography). */
    .browse-rentables-btn {
        color: var(--section-accent-text, var(--rently-primary-dark)) !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
    }

    .browse-rentables-btn:hover {
        color: var(--section-accent-text, var(--rently-primary-dark)) !important;
        background-color: color-mix(in srgb, var(--section-accent, var(--rently-primary)) 8%, transparent) !important;
    }

    .browse-rentables-btn.popover-open,
    .browse-rentables-btn.browse-current {
        background-color: color-mix(in srgb, var(--section-accent, var(--rently-primary)) 14%, transparent) !important;
        color: var(--section-accent-text, var(--rently-primary-dark)) !important;
    }

    .category-chevron {
        opacity: 0.7;
    }

    /* Solid nav surface — the pill goes translucent-white on the full-colour chrome (mock recipe);
       the solid catch-all in rently-nav.css already whitens the label/icon. */
    [data-nav-surface="solid"] .browse-rentables-btn.popover-open,
    [data-nav-surface="solid"] .browse-rentables-btn.browse-current {
        background-color: rgb(255 255 255 / 18%) !important;
        color: #fff !important;
    }

    /* ============================================================================
       Dark mode (Section 13.9 D5 paired-flip). Every rule is anchored under
       .mega-popover (the teleported popover wrapper) so the two GLOBAL .mud-list-item
       overrides above stay local and do NOT leak app-wide in dark. Light rules above
       are byte-unchanged. Tokens are html/:root-scoped --rently-* only (never
       --section-accent, which resolves blank inside the teleported subtree).
       ============================================================================ */

    /* Surfaces: white panels to slate card */
    [data-theme="dark"] .mega-popover .mega-menu-content,
    [data-theme="dark"] .mega-popover .mega-menu-skeleton {
        background-color: var(--rently-card-bg, #1e293b);
    }

    /* Band pass 2026-07-23: the band keeps its "tinted strip below the card" identity in dark —
       subtle-bg, not card-bg, and the hairline divider follows the dark border token. */
    [data-theme="dark"] .mega-popover .tags-paper {
        background-color: var(--rently-subtle-bg, #172033);
        border-top-color: var(--rently-border, #334155);
    }

    [data-theme="dark"] .mega-popover .tag-cluster-label {
        color: var(--rently-text-secondary, #cbd5e1);
    }

    /* Popover frame: border + dark elevation on the slate-900 page */
    [data-theme="dark"] .mega-popover {
        border-color: var(--rently-border, #334155);
        box-shadow: 0 2px 8px rgb(2 6 23 / 50%);
    }

    /* Structural borders and dividers */
    [data-theme="dark"] .mega-popover .skeleton-left-panel,
    [data-theme="dark"] .mega-popover .subcategories-column {
        border-right-color: var(--rently-border, #334155);
    }

    [data-theme="dark"] .mega-popover .subcategory-image {
        border-color: var(--rently-border, #334155);
    }

    [data-theme="dark"] .mega-popover .view-all-item {
        border-bottom-color: var(--rently-border-subtle, #28344a);
    }

    [data-theme="dark"] .mega-popover .nested-subcategories-list {
        column-rule-color: var(--rently-border-subtle, #28344a);
    }

    /* Body-text inks (subtitle prompts + level-2 names) */
    [data-theme="dark"] .mega-popover .no-categories-message,
    [data-theme="dark"] .mega-popover .no-subcategories-message,
    [data-theme="dark"] .mega-popover .select-category-message,
    [data-theme="dark"] .mega-popover .subcategory-name {
        color: var(--rently-text-secondary, #cbd5e1);
    }

    /* Group titles and tag links: the base teal (#006d77 / #256f7a) is near-invisible on
       slate, so lift to the house dark small-text teal. Keep the hover teal too (the
       underline carries the state) so hovering does not read as a darken.
       LITERAL, not var(--rently-primary-dark, #74d0dc) — QA-caught 2026-07-23: the fallback
       never fires (the token exists) and the C4 palette engine live-reprojects the token back
       to #35a0ae under [data-theme=dark], ≈3.9:1 on slate, an SC 1.4.3 fail. Same trap as the
       SearchNav footer inks. */
    [data-theme="dark"] .mega-popover .subcategory-group-title,
    [data-theme="dark"] .mega-popover .subcategory-group-title:hover,
    [data-theme="dark"] .mega-popover .tag-link {
        color: #74d0dc;
    }

    /* Neutral hover washes: a black wash is invisible on slate, so lift to a light wash */
    [data-theme="dark"] .mega-popover .mud-list-item:hover,
    [data-theme="dark"] .mega-popover .category-hover:hover {
        background-color: var(--rently-muted-bg, #334155);
    }

    /* Teal washes composite against the surface, so double the alpha to stay visible on slate */
    [data-theme="dark"] .mega-popover .view-all-item:hover,
    [data-theme="dark"] .mega-popover .subcategory-group-list li:hover,
    [data-theme="dark"] .mega-popover .tag-link:hover {
        background-color: rgb(53 160 174 / 16%);
    }

    /* Selected row: a touch stronger than hover so the two states differ; teal marker kept (4.73:1) */
    [data-theme="dark"] .mega-popover .mud-list-item.mud-selected {
        background-color: rgb(53 160 174 / 20%);
    }

    /* S7-17 R2 category glyphs: the tokens already flip, but the light rules' fallbacks are light
       literals, so restate them with the dark fallback — the house convention in this block (see the
       body-text inks above). Decorative icons, so no 3:1 UI-component floor applies; they sit at the
       secondary-ink level so the selected row's teal marker stays the one accent in the column. */
    [data-theme="dark"] .mega-popover .category-nav-icon,
    [data-theme="dark"] .mega-popover .subcategory-group-image--icon {
        color: var(--rently-text-secondary, #cbd5e1);
    }

    [data-theme="dark"] .mega-popover .subcategory-group-image--icon {
        background-color: var(--rently-subtle-bg, #172033);
        border-color: var(--rently-border, #334155);
    }

    /* ============================================================================
       Reduced motion — LAST in this style block (the overrides below win by source
       order only; nothing may be appended after them — the rently-nav.css doctrine).
       Previously this component had NO suppression at all: fadeInUp replayed on
       every popover open and hover transforms ran for every reduced-motion user.
       The Mud skeletons are already covered by the global block in rently-nav.css.
       ============================================================================ */
    @media (prefers-reduced-motion: reduce) {
        .mega-popover,
        .tag-link,
        .view-all-item,
        .category-hover .mud-stack,
        .subcategory-group,
        .subcategory-group-image,
        .subcategory-group-title {
            transition: none;
        }

        .mega-popover .animate-in,
        .mega-popover .subcategory-group.animate-in {
            animation: none;
        }

        /* The hover micro-transforms are pure motion — no state information lost. */
        .subcategory-group:hover {
            transform: none;
        }

        .subcategory-group:hover .subcategory-group-image {
            transform: none;
        }
    }