/* MobileCategoryNav - the mobile category drawer.
   PERF-S17: extracted VERBATIM from an in-body <style> block in MobileCategoryNav.razor, which shipped
   these 400 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. */

    /* Z-index Architecture */
    :root {
        --z-drawer: 1350;
        --z-drawer-backdrop: 1300;
    }

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

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

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateX(20px);
        }

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

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

    .mobile-category-item {
        animation: slideIn 0.3s ease-out;
        animation-fill-mode: both;
    }

    /* Staggered animations for list items */
    .mobile-category-item:nth-child(1) { animation-delay: 0.05s; }
    .mobile-category-item:nth-child(2) { animation-delay: 0.10s; }
    .mobile-category-item:nth-child(3) { animation-delay: 0.15s; }
    .mobile-category-item:nth-child(4) { animation-delay: 0.20s; }
    .mobile-category-item:nth-child(5) { animation-delay: 0.25s; }
    .mobile-category-item:nth-child(6) { animation-delay: 0.30s; }
    .mobile-category-item:nth-child(7) { animation-delay: 0.35s; }
    .mobile-category-item:nth-child(8) { animation-delay: 0.40s; }
    .mobile-category-item:nth-child(9) { animation-delay: 0.45s; }
    .mobile-category-item:nth-child(10) { animation-delay: 0.50s; }
    .mobile-category-item:nth-child(n+11) { animation-delay: 0.55s; }

    /* Main drawer styles */
    .mobile-category-drawer {
        background-color: #fff;
        height: 100vh;
        display: flex;
        flex-direction: column;
        position: fixed !important;
        z-index: var(--z-drawer) !important;
    }

    /* Fix MudDrawer overlay z-index */
    .mobile-category-drawer + .mud-overlay-drawer {
        z-index: var(--z-drawer-backdrop) !important;
    }

    /* Ensure drawer content takes full height */
    .mobile-category-drawer .mud-drawer-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    /* Container for proper flex layout */
    .category-drawer-container {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Header */
    .mobile-category-header {
        background-color: #35a0ae;
        color: white;
        padding: 12px 16px;
        flex-shrink: 0;
        box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
    }

    .mobile-category-header .mud-icon-button {
        color: white;
    }

    /* Content - Takes remaining height */
    .mobile-category-content {
        flex: 1;
        overflow: hidden auto;
        overscroll-behavior: contain;
        background-color: #fafafa;
        min-height: 0; /* Important for flex child */
        -webkit-overflow-scrolling: touch;
    }

    /* Search Section */
    .category-search-section {
        padding: 16px;
        background-color: white;
        box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
    }

    .category-search-input input {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Skeleton Styles */
    .skeleton-container {
        padding: 16px;
    }

    .skeleton-search-section {
        padding: 0 0 16px;
    }

    .skeleton-category-item {
        padding: 12px 0;
    }

    .skeleton-tags-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .featured-tags-section .mud-chip {
        min-height: 44px;
    }

    /* Error and Empty States */
    .error-state-container,
    .empty-state-container,
    .no-results-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 48px 24px;
        text-align: center;
        min-height: 300px;
    }

    /* Category List */
    .category-list {
        padding: 0;
    }

    /* Category Items.
       S33 — line-level disable with a reason: :43 owns the entry ANIMATION, this owns the resting
       APPEARANCE, 120 lines apart. Never a file-level disable. */
    /* stylelint-disable-next-line no-duplicate-selectors */
    .mobile-category-item {
        background-color: white;
        border-bottom: 1px solid #e0e0e0;
        padding: 12px 16px !important;
        cursor: pointer;
        transition: all 0.2s ease;
        min-height: 60px;
        position: relative;
        overflow: hidden;
    }

    /* S23: the sweep animates TRANSFORM, not `left` — the S7-06 fix the MainNav drawer rows
       got, back-ported. Animating `left` relayouts the row every frame of the 0.5s sweep
       across a full category list; translateX runs on the compositor. Geometry identical:
       left:0 + translateX(-100%) starts exactly where left:-100% did, and the row's
       overflow:hidden still clips it. */
    .mobile-category-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgb(53 160 174 / 5%), transparent);
        transform: translateX(-100%);
        transition: transform 0.5s ease;
    }

    .mobile-category-item:hover::before {
        transform: translateX(100%);
    }

    .mobile-category-item:hover {
        background-color: rgb(53 160 174 / 5%);
    }

    .mobile-category-item:active {
        background-color: rgb(53 160 174 / 10%);
        transform: scale(0.98);
    }

    .mobile-category-item[disabled] {
        opacity: 0.6;
        pointer-events: none;
    }

    .mobile-category-item-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .category-avatar {
        border-radius: 8px !important;
        border: 1px solid #e0e0e0;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .mobile-category-item:hover .category-avatar {
        transform: scale(1.05);
    }

    .view-all-button {
        text-transform: none;
        justify-content: flex-start;
        padding: 12px 16px;
        margin: 0;
    }

    /* Footer */
    .mobile-category-footer {
        padding: 16px;
        background-color: white;
        box-shadow: 0 -2px 4px rgb(0 0 0 / 10%);
        flex-shrink: 0;
        border-top: 1px solid #e0e0e0;
    }

    /* Tag Chip */
    .tag-chip {
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .tag-chip:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
    }

    /* Highlighter override */
    .mud-highlighter mark {
        background-color: rgb(53 160 174 / 30%);
        color: inherit;
        font-weight: 600;
    }

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

    /* Responsive adjustments */
    @media (max-width: 350px) {
        .mobile-category-drawer {
            width: 280px !important;
        }
    }

    /* iOS Safe Area Support */
    @supports (padding: max(0px)) {
        .mobile-category-header {
            padding-top: max(12px, env(safe-area-inset-top));
        }

        .mobile-category-footer {
            padding-bottom: max(16px, env(safe-area-inset-bottom));
        }
    }

    /* Touch optimization */
    @media (hover: none) and (pointer: coarse) {
        .mobile-category-item {
            min-height: 48px; /* Touch-friendly target */
        }

        .tag-chip {
            min-height: 44px; /* WCAG 2.5.5 — matches the .search-chip recipe in rently-nav.css */
            min-width: 48px;
            padding-block: 6px;
        }
    }

    /* Prevent text selection during swipe.
       S33 — line-level disable with a reason: :85 owns the flex LAYOUT, this owns swipe
       user-select, 210 lines apart. Never a file-level disable. */
    /* stylelint-disable-next-line no-duplicate-selectors */
    .category-drawer-container {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Smooth transitions */
    .mobile-category-drawer,
    .mobile-category-drawer * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Reduced motion support — scoped to this drawer's own subtree. This block is a plain in-body
       rule set, so it lands LATER in document order than the head-linked rently-nav.css: an
       unscoped `*` with !important here out-ranks every carve-out that file builds (notably the
       deliberately-slowed indeterminate spinner, which a suppressed animation freezes into what
       reads as a hung request). Assert animation/transition NONE rather than a 0.01ms duration —
       a duration leaves transition-property intact, still fires transitionend, and a per-element
       QA probe cannot tell it apart from a live transition. If you add an animated selector to
       this file, add it here too. */
    @media (prefers-reduced-motion: reduce) {
        .mobile-category-drawer,
        .mobile-category-drawer .animate-in,
        .mobile-category-drawer .mobile-category-item,
        .mobile-category-drawer .mobile-category-item::before,
        .mobile-category-drawer .category-avatar,
        .mobile-category-drawer .tag-chip {
            animation: none;
            transition: none;
        }
    }

    /* ============================================================================
       Dark mode (Section 13.9 D5 paired-flip). Append-only — the light rules above
       are byte-unchanged; markup + code-behind frozen. Every rule is anchored under
       .mobile-category-drawer (the MudDrawer Temporary root, rendered INLINE in the
       app tree so the [data-theme="dark"] root attribute cascades in — 9.4.0
       mudblazor-expert-confirmed, no teleport). Scoping localizes the flip and keeps
       the generic .mud-highlighter mark rule from leaking app-wide in dark. Tokens
       are :root / [data-theme="dark"]-scoped --rently-* (loaded globally via
       App.razor). The teal .mobile-category-header (#35a0ae + white) is the saturated
       brand band, intentionally mode-invariant (SYS-07, accepted). AA-validated by
       accessibility-expert (dark text 5.71-16.30:1).
       ============================================================================ */

    /* Drawer surface + scroll well: cards (card-bg) float on a gently-recessed well
       (subtle-bg) so the dark list mirrors light's near-flat #fff-on-#fafafa sheet
       (ui-reviewer: shell-bg over-elevated it ~9x in delta-L*; hairline borders still
       separate rows). .mobile-category-drawer{background:#fff} beats
       --mud-palette-drawer-background, so this override is required (0,2,0; no !important). */
    [data-theme="dark"] .mobile-category-drawer {
        background-color: var(--rently-card-bg, #1e293b);
    }

    [data-theme="dark"] .mobile-category-drawer .mobile-category-content {
        background-color: var(--rently-subtle-bg, #172033);
    }

    /* White panels to slate card */
    [data-theme="dark"] .mobile-category-drawer .category-search-section,
    [data-theme="dark"] .mobile-category-drawer .mobile-category-item,
    [data-theme="dark"] .mobile-category-drawer .mobile-category-footer {
        background-color: var(--rently-card-bg, #1e293b);
    }

    /* Structural borders to slate */
    [data-theme="dark"] .mobile-category-drawer .mobile-category-item {
        border-bottom-color: var(--rently-border, #334155);
    }

    [data-theme="dark"] .mobile-category-drawer .category-avatar {
        border-color: var(--rently-border, #334155);
    }

    [data-theme="dark"] .mobile-category-drawer .mobile-category-footer {
        border-top-color: var(--rently-border, #334155);
    }

    /* Teal interaction washes composite against the surface, so double the alpha to
       stay visible on slate (transient states; row text stays >= 9.55:1). */
    [data-theme="dark"] .mobile-category-drawer .mobile-category-item:hover {
        background-color: rgb(53 160 174 / 16%);
    }

    [data-theme="dark"] .mobile-category-drawer .mobile-category-item:active {
        background-color: rgb(53 160 174 / 22%);
    }

    /* Hover sweep-sheen: the light .05 teal mid-stop is invisible on slate; bump to .10
       for parity with the doubled washes (decorative delight-detail, not a state). */
    [data-theme="dark"] .mobile-category-drawer .mobile-category-item::before {
        background: linear-gradient(90deg, transparent, rgb(53 160 174 / 10%), transparent);
    }

    /* Search-term highlight: scoped under the drawer so the global .mud-highlighter
       mark is not recolored app-wide. Lifted .30 to .40 so the patch reads on slate
       (text on it 7.08:1; font-weight 600 co-indicates the match, SC 1.4.1). */
    [data-theme="dark"] .mobile-category-drawer .mud-highlighter mark {
        background-color: rgb(53 160 174 / 40%);
    }

    /* Loading skeleton: MudSkeleton's wave ::after is a hardcoded black shimmer
       (rgba(0,0,0,.04)) tuned for light, so its motion is invisible on the dark base
       (reads as a frozen block). The base flips via --mud-palette-skeleton; only the wave
       needs an additive-white override so the loading sweep stays visible. Scoped under
       the drawer (0,3,1 beats MudBlazor's 0,1,1) — no !important. */
    [data-theme="dark"] .mobile-category-drawer .mud-skeleton-wave::after {
        background: linear-gradient(90deg, transparent, rgb(255 255 255 / 6%), transparent);
    }