/* _content/HnHMapperServer.Web/Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-lxzbt996bv] {
    background: #fff3cd;
    border-top: 3px solid #ff6b6b;
    bottom: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 16px 20px;
    position: fixed;
    width: 100%;
    z-index: 10000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: #000;
}

    #blazor-error-ui .dismiss[b-lxzbt996bv] {
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: 16px;
        font-size: 20px;
        font-weight: bold;
        color: #000;
        text-decoration: none;
        padding: 4px 8px;
        line-height: 1;
    }

        #blazor-error-ui .dismiss:hover[b-lxzbt996bv] {
            color: #ff6b6b;
        }

    #blazor-error-ui .reload[b-lxzbt996bv] {
        display: inline-block;
        cursor: pointer;
        background: #ff6b6b;
        color: white;
        padding: 8px 16px;
        border-radius: 4px;
        text-decoration: none;
        font-weight: bold;
        margin-right: 8px;
    }

        #blazor-error-ui .reload:hover[b-lxzbt996bv] {
            background: #ff5252;
        }
/* _content/HnHMapperServer.Web/Components/Map/Sidebar/EventsPanel.razor.rz.scp.css */
/* ===========================
   Events Panel Styling
   Enhanced visual design for timer groups and individual timers
   =========================== */

/* Expansion panels container */
[b-a0ba6sqtnp] .mud-expansion-panels {
    gap: 12px;
}

/* Individual expansion panel - card-like appearance */
[b-a0ba6sqtnp] .mud-expansion-panel {
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

[b-a0ba6sqtnp] .mud-expansion-panel:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* Expansion panel header */
[b-a0ba6sqtnp] .mud-expand-panel-header {
    padding: 12px 16px !important;
    min-height: 56px !important;
}

/* Expansion panel content wrapper */
[b-a0ba6sqtnp] .mud-expand-panel-content {
    padding: 0 !important;
}

/* Timer list within expansion panel */
[b-a0ba6sqtnp] .mud-expansion-panel .mud-list {
    padding: 8px 0;
}

/* Individual timer list item */
[b-a0ba6sqtnp] .mud-expansion-panel .mud-list-item {
    padding: 12px 16px !important;
    border-radius: 6px;
    margin: 4px 8px;
    transition: all 0.2s ease-in-out;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
}

[b-a0ba6sqtnp] .mud-expansion-panel .mud-list-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Timer item content stack */
[b-a0ba6sqtnp] .mud-expansion-panel .mud-list-item .mud-stack {
    gap: 8px;
}

/* Timer title row with icon and badge */
[b-a0ba6sqtnp] .mud-expansion-panel .mud-list-item > .mud-stack > .mud-stack:first-child {
    margin-bottom: 4px;
}

/* Timer icon */
[b-a0ba6sqtnp] .mud-expansion-panel .mud-list-item img {
    border-radius: 4px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Timer title text */
[b-a0ba6sqtnp] .mud-expansion-panel .mud-list-item .mud-typography-body2 {
    font-weight: 500;
    line-height: 1.5;
}

/* Timer badge */
[b-a0ba6sqtnp] .mud-expansion-panel .mud-list-item .mud-chip {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 2px 8px;
    height: 24px;
}

/* Progress bar styling */
[b-a0ba6sqtnp] .mud-expansion-panel .mud-progress-linear {
    height: 6px !important;
    border-radius: 3px;
    margin-top: 8px !important;
    margin-bottom: 4px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

[b-a0ba6sqtnp] .mud-expansion-panel .mud-progress-linear .mud-progress-linear-bar {
    border-radius: 3px;
}

/* Description text */
[b-a0ba6sqtnp] .mud-expansion-panel .mud-list-item .mud-typography-caption {
    line-height: 1.4;
    padding: 2px 0;
}

/* Ready at time text */
[b-a0ba6sqtnp] .mud-expansion-panel .mud-list-item .mud-typography-caption:last-of-type {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* Action buttons row */
[b-a0ba6sqtnp] .mud-expansion-panel .mud-list-item .mud-stack.mud-stack-row:last-child {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Edit/Delete buttons */
[b-a0ba6sqtnp] .mud-expansion-panel .mud-list-item .mud-button-root {
    padding: 4px 12px;
    min-height: 32px;
    font-size: 0.8rem;
}

/* Divider between timers */
[b-a0ba6sqtnp] .mud-expansion-panel .mud-divider {
    margin: 4px 8px;
    opacity: 0.4;
}

/* Group header chip (count badge) */
[b-a0ba6sqtnp] .mud-expand-panel-header .mud-chip {
    font-weight: 700;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
}

/* Urgent group styling (red) */
[b-a0ba6sqtnp] .timer-group-urgent {
    border-left: 4px solid #f44336;
    background: rgba(244, 67, 54, 0.03);
}

/* Soon group styling (orange) */
[b-a0ba6sqtnp] .timer-group-soon {
    border-left: 4px solid #ff9800;
    background: rgba(255, 152, 0, 0.03);
}

/* Upcoming group styling (blue) */
[b-a0ba6sqtnp] .timer-group-upcoming {
    border-left: 4px solid #2196f3;
    background: rgba(33, 150, 243, 0.03);
}

/* Later group styling (gray) */
[b-a0ba6sqtnp] .timer-group-later {
    border-left: 4px solid #9e9e9e;
    background: rgba(158, 158, 158, 0.02);
}

/* Header section with title and New Timer button */
.header-section[b-a0ba6sqtnp] {
    margin-bottom: 16px;
}

/* Filter tabs */
[b-a0ba6sqtnp] .mud-tabs {
    margin-bottom: 16px;
}

/* Tab content area */
[b-a0ba6sqtnp] .mud-tab-panel {
    padding: 8px 0;
}

/* Empty state alert */
[b-a0ba6sqtnp] .mud-alert {
    margin: 16px 8px;
    border-radius: 8px;
}

/* History tab list */
[b-a0ba6sqtnp] .mud-tab-panel:last-child .mud-list-item {
    padding: 12px 16px !important;
    margin: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.2s ease-in-out;
}

[b-a0ba6sqtnp] .mud-tab-panel:last-child .mud-list-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(4px);
}

/* History item icon */
[b-a0ba6sqtnp] .mud-tab-panel:last-child .mud-list-item img {
    border-radius: 4px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Responsive adjustments for mobile */
@media (max-width: 600px) {
    [b-a0ba6sqtnp] .mud-expansion-panel .mud-list-item {
        padding: 10px 12px !important;
        margin: 4px 6px;
    }

    [b-a0ba6sqtnp] .mud-expand-panel-header {
        padding: 10px 12px !important;
    }

    [b-a0ba6sqtnp] .mud-expansion-panel .mud-list-item .mud-button-root {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
}
/* _content/HnHMapperServer.Web/Components/Map/Sidebar/LayersPanel.razor.rz.scp.css */
/* ============================================
   LAYERS PANEL STYLING
   Component-specific styles for layer visibility toggles
   ============================================ */

/* Container with glassmorphism background for better visibility against map */
.layers-container[b-5c5anmno2i] {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Base layer row styling */
[b-5c5anmno2i] .layer-row {
    padding: 8px 12px;
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Hover effect for all layer rows */
[b-5c5anmno2i] .layer-row:hover {
    background-color: rgba(100, 181, 246, 0.08);
}

/* Primary layer rows - more prominent with left border accent */
[b-5c5anmno2i] .layer-row-primary {
    background-color: rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--mud-palette-primary);
    padding-left: 9px; /* Adjusted for border */
}

/* Primary layer hover - more prominent */
[b-5c5anmno2i] .layer-row-primary:hover {
    background-color: rgba(100, 181, 246, 0.15);
    transform: translateX(2px);
}

/* Sub-toggle rows - indented and subdued */
[b-5c5anmno2i] .layer-row-sub {
    margin-left: 32px;
    padding: 6px 10px;
    font-size: 0.95em;
    background-color: rgba(255, 255, 255, 0.04);
}

/* Sub-toggle hover */
[b-5c5anmno2i] .layer-row-sub:hover {
    background-color: rgba(100, 181, 246, 0.12);
}

/* Disabled state for sub-toggles when parent layer is off */
[b-5c5anmno2i] .layer-row-disabled {
    opacity: 0.5;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Disabled text styling */
[b-5c5anmno2i] .layer-row-disabled .mud-typography {
    color: rgba(66, 66, 66, 0.5) !important;
}

/* Icon styling for layer labels */
[b-5c5anmno2i] .layer-icon {
    color: var(--mud-palette-text-secondary);
}

/* Switch enhancement - ensure proper sizing for Medium switches */
[b-5c5anmno2i] .layer-switch {
    flex-shrink: 0; /* Prevent switch from shrinking */
}

/* Override any global Small size issues for switches in this component */
[b-5c5anmno2i] .layer-switch .mud-switch-thumb {
    /* Ensure thumb is properly sized */
}

/* Ensure switch track is visible on glassmorphism background */
[b-5c5anmno2i] .layer-switch .mud-switch-track {
    opacity: 0.5;
}

/* Active switch track - more visible */
[b-5c5anmno2i] .layer-switch.mud-switch-checked .mud-switch-track {
    opacity: 0.7;
}

/* Spacing improvements */
[b-5c5anmno2i] .mud-stack > *:not(:last-child) {
    margin-bottom: 4px;
}

/* Divider styling - subtle in glassmorphism context */
[b-5c5anmno2i] .mud-divider {
    margin: 8px 0 !important;
    opacity: 0.3;
}

/* Improve switch visibility on hover */
[b-5c5anmno2i] .layer-row:hover .layer-switch {
    transform: scale(1.05);
    transition: transform 0.15s ease;
}

/* Active layer row (when switch is on) - subtle glow */
[b-5c5anmno2i] .layer-row:has(.mud-switch-checked) {
    box-shadow: 0 0 8px rgba(100, 181, 246, 0.2);
}

/* Sub-toggle active state */
[b-5c5anmno2i] .layer-row-sub:has(.mud-switch-checked) {
    box-shadow: 0 0 6px rgba(100, 181, 246, 0.15);
    background-color: rgba(100, 181, 246, 0.1);
}
/* _content/HnHMapperServer.Web/Components/Map/Sidebar/MapSidebar.razor.rz.scp.css */
/* Drawer header with mode selection buttons */
[b-8jxnvot724] .drawer-header {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent; /* Let glassmorphism show through */
}

/* Mode selection buttons (Players, Markers, Layers, Maps) */
[b-8jxnvot724] .mode-button {
    min-height: 80px;
    text-transform: none;
    transition: all 0.2s ease-in-out;
}

[b-8jxnvot724] .mode-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Make the drawer a flex container for proper height distribution */
[b-8jxnvot724] .map-sidebar.mud-drawer {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Header should not shrink */
[b-8jxnvot724] .drawer-header {
    flex-shrink: 0;
}

/* Drawer content area with scrolling and padding */
.drawer-content[b-8jxnvot724] {
    padding: 16px;
    overflow-y: auto;
    overflow-x: visible; /* Allow popovers to overflow horizontally */
    flex: 1; /* Take remaining vertical space */
    min-height: 0; /* Critical for flex scroll behavior */
    position: relative; /* Create positioning context for popovers */
}

/* Selected item in player/marker lists */
[b-8jxnvot724] .mud-selected-item {
    background-color: rgba(var(--mud-palette-success-rgb), 0.08) !important;
    border-left: 3px solid var(--mud-palette-success);
}

/* Lighten the drawer overlay for better map visibility on mobile/tablet */
[b-8jxnvot724] .mud-drawer-overlay,
[b-8jxnvot724] .mud-overlay,
[b-8jxnvot724] .mud-overlay-dark {
    background-color: rgba(0,0,0,0.25) !important; /* Lighter than default (~0.5-0.6) */
}

/* Close button for mobile - hidden by default */
.mobile-close-button[b-8jxnvot724] {
    display: none;
}

/* Phone-specific adjustments (screens ≤600px) */
@media (max-width: 600px) {
    /* Make drawer full-width on phones */
    [b-8jxnvot724] .map-sidebar.mud-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    /* Show close button on phones */
    .mobile-close-button[b-8jxnvot724] {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 8px;
    }
    
    /* Compact mode buttons to save vertical space */
    [b-8jxnvot724] .mode-button {
        min-height: 56px;
    }

    /* Drawer content uses flexbox, no height adjustment needed */
}

/* Tablet-specific adjustments (601px - 960px) */
@media (min-width: 601px) and (max-width: 960px) {
    /* On tablets, keep the responsive width (85vw max) */
    /* Close button stays hidden on tablets */
}

/* _content/HnHMapperServer.Web/Components/Map/Sidebar/MapsPanel.razor.rz.scp.css */
/* Container with glassmorphism background for better visibility against map */
.maps-panel-container[b-8gsryd7xki] {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Inline dropdown styling to keep the list anchored under the trigger */
.select-wrapper[b-8gsryd7xki] {
    position: relative;
}

.select-dropdown[b-8gsryd7xki] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    z-index: 2001; /* above drawer content */
}

/* Paper surface styling for dropdown */
[b-8gsryd7xki] .select-dropdown .mud-paper {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    box-shadow: var(--mud-elevation-8);
    overflow: hidden;
}

/* Constrain list height and make it scrollable */
[b-8gsryd7xki] .select-dropdown .mud-list {
    max-height: 300px;
    overflow-y: auto;
}

/* Hover feedback for items */
[b-8gsryd7xki] .select-dropdown .mud-list-item:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
}


/* _content/HnHMapperServer.Web/Components/Pages/Cookbook.razor.rz.scp.css */
/* Text-color tiers — contrast-checked against the page's white/glass cards.
   ALWAYS use these for secondary/muted text instead of hand-picked grays:
   ad-hoc values like #90a0ae (2.7:1) kept creeping in and were unreadable.
   Minimums: normal text ≥4.5:1, icons/controls ≥3:1. */
.cookbook-page[b-y8vt4iz346] {
    --ck-text-muted: #5a6874;    /* ~5.7:1 — labels, captions, secondary lines */
    --ck-text-faint: #67747f;    /* ~4.8:1 — smallest hints, qty chips (the readable floor) */
    --ck-text-disabled: #8494a1; /* ~3.5:1 — deliberately-inactive rows ONLY */
    --ck-amber-text: #8a6428;    /* ~5.3:1 — amber accents rendered as text */
    --ck-purple-text: #6f51a1;   /* ~6.2:1 — contributor tag */
    --ck-gold-icon: #b8860b;     /* ~3.3:1 — filled favorite star (icon minimum) */
}

/* Toolbar + panels travel together while scrolling the table (like the search) */
.sticky-stack[b-y8vt4iz346] {
    position: sticky;
    top: 72px;
    z-index: 10;
}

.cookbook-toolbar[b-y8vt4iz346] {
    padding: 12px 16px 8px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
}

/* Pinned: the table slides under the stack, and the two transparent strips —
   the slit up to the appbar (stack top 72px vs appbar ~65px) and the toolbar's
   12px bottom margin — showed raw row slices scrolling by ("a bar below the
   banner"). Swap the toolbar's bottom margin for the same amount of padding so
   its own glass paints the gap (outer height unchanged, nothing jumps), and
   frost the slit with a ::before on the stack. The pseudo must sit on the
   stack, not on a glass child: the children have backdrop-filter, which would
   make them the pseudo's backdrop root and its blur would sample nothing.
   Oversized upward on purpose — the surplus hides behind the fixed appbar. */
.sticky-stack.ck-stuck[b-y8vt4iz346]::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 17px;
    z-index: -1;
    /* Plain tint, deliberately no backdrop-filter: on a ~7px visible strip the
       blur is imperceptible, and an in-bounds blur here would edge-flicker as
       rows scroll beneath (the sampling band would span the whole strip). */
    background: rgba(255, 255, 255, 0.7);
}

.sticky-stack.ck-stuck .cookbook-toolbar[b-y8vt4iz346] {
    margin-bottom: 0;
    padding-bottom: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.sticky-stack.ck-stuck .panels-bar[b-y8vt4iz346] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Active threshold-condition chips: sits directly under the builder rows,
   so composing (builder) and applied (chips) read as one group */
.active-filters[b-y8vt4iz346] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding-top: 6px;
}

/* Active threshold-condition chips read as "on" (no resting fade) */
.stat-chip.filter-chip[b-y8vt4iz346] {
    opacity: 1;
}

/* The ✕ inside an active-condition chip is its own button (chip body = sort) */
.filter-chip .chip-x[b-y8vt4iz346] {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* "⊞ Columns" toggle sits at the right end of the FEP chip row */
.columns-toggle[b-y8vt4iz346] {
    margin-left: auto;
}

/* The FILTER row below Prep: expression input + preset chips beside it,
   key-helper chips on the row beneath */
.filter-input-row[b-y8vt4iz346] {
    align-items: center;
}

.cookbook-page[b-y8vt4iz346]  .filter-input {
    flex: 1 1 280px;
    max-width: 520px;
}

.helper-gap[b-y8vt4iz346] {
    width: 10px;
}

/* One-click filter tools: pills and Total/FEP-H cell values write ≥-filters into the filter input */
.fep-pill.clickable[b-y8vt4iz346] {
    cursor: pointer;
}

.cell-filter-btn[b-y8vt4iz346] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.cell-filter-btn:hover[b-y8vt4iz346] {
    text-decoration: underline dotted;
}

/* FEP distribution overview: one chip per stat with the count of listed foods
   feeding it; clicking filters + ranks by that stat */
.stat-chips[b-y8vt4iz346] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 8px;
}

.stat-chip[b-y8vt4iz346] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--chip-color);
    color: #33322e;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.12s, transform 0.12s, box-shadow 0.12s;
}

.stat-chip:hover[b-y8vt4iz346] {
    opacity: 1;
    transform: translateY(-1px);
}

.stat-chip.selected[b-y8vt4iz346] {
    opacity: 1;
    border: 1px solid rgba(0, 0, 0, 0.45);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.stat-chip.empty[b-y8vt4iz346] {
    opacity: 0.3;
    cursor: default;
    transform: none;
}

.stat-chip-count[b-y8vt4iz346] {
    font-weight: 500;
    font-size: 0.68rem;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 8px;
    padding: 0 6px;
    line-height: 1.5;
}

/* Satiation chips: same behavior as FEP chips, uniform green tone */
.stat-chip.satiation[b-y8vt4iz346] {
    background: #bfe3c0;
    font-weight: 600;
}

/* Preparation chips: warm amber; "Plain" (no preparation) in neutral gray */
.stat-chip.prep[b-y8vt4iz346] {
    background: #ecc9a3;
    font-weight: 600;
}

.stat-chip.prep.plain[b-y8vt4iz346] {
    background: #dfe3e6;
}

/* World chips: cool blue-gray; "Untagged" (no world data) in neutral gray */
.stat-chip.world[b-y8vt4iz346] {
    background: #cfd9ec;
    font-weight: 600;
}

.stat-chip.world.untagged[b-y8vt4iz346] {
    background: #dfe3e6;
}

/* Small amber preparation badge next to the food name */
.prep-badge[b-y8vt4iz346] {
    display: inline-block;
    margin-left: 7px;
    padding: 0 7px;
    border-radius: 9px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.7;
    background: #ecc9a3;
    border: 1px solid rgba(150, 100, 30, 0.25);
    color: #5d4420;
    white-space: nowrap;
    vertical-align: middle;
}

.prep-badge.plain[b-y8vt4iz346] {
    background: #dfe3e6;
    border-color: rgba(44, 62, 80, 0.15);
    color: var(--ck-text-muted);
}

/* Preparation comparison table in the expansion */
.prep-compare[b-y8vt4iz346] {
    border-collapse: collapse;
    min-width: 480px;
}

.prep-compare th[b-y8vt4iz346] {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ck-text-faint);
    padding: 2px 12px 4px 6px;
}

.prep-compare td[b-y8vt4iz346] {
    padding: 3px 12px 3px 6px;
    font-size: 0.83rem;
    color: #424242;
    border-top: 1px solid rgba(44, 62, 80, 0.07);
}

.prep-compare th.num[b-y8vt4iz346],
.prep-compare td.num[b-y8vt4iz346] {
    text-align: right;
}

.prep-compare-current td[b-y8vt4iz346] {
    background: rgba(100, 181, 246, 0.12);
}

.prep-compare-current td:first-child[b-y8vt4iz346] {
    border-left: 3px solid #64B5F6;
}

.chips-label[b-y8vt4iz346] {
    align-self: center;
    min-width: 58px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ck-text-muted);
}

/* Highlighted per-stat value column shown when a stat chip is selected */
.stat-value[b-y8vt4iz346] {
    display: inline-block;
    padding: 0 8px;
    border-radius: 10px;
    background: var(--chip-color);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #33322e;
    font-weight: 700;
    font-size: 0.8rem;
}

/* Food icons: tiny pixel-art sprites, keep them crisp */
.food-icon[b-y8vt4iz346] {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    vertical-align: middle;
}

.food-name[b-y8vt4iz346] {
    font-weight: 600;
    color: #2c3e50;
}

/* Rows expand on click */
.cookbook-page[b-y8vt4iz346]  .mud-table-row {
    cursor: pointer;
}

/* Small muted group chips (lighter than MudChip for dense rows) */
.category-chips[b-y8vt4iz346] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.category-chip[b-y8vt4iz346] {
    display: inline-block;
    padding: 0 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    line-height: 1.6;
    background: rgba(44, 62, 80, 0.08);
    border: 1px solid rgba(44, 62, 80, 0.12);
    color: #46586a;
    white-space: nowrap;
}

.satiation-chip[b-y8vt4iz346] {
    background: rgba(129, 199, 132, 0.18);
    border-color: rgba(129, 199, 132, 0.4);
    color: #33691e;
}

/* Per-stat FEP pills */
.fep-pills[b-y8vt4iz346] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.fep-pill[b-y8vt4iz346] {
    display: inline-block;
    padding: 0 7px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.7;
    color: #33322e;
    border: 1px solid rgba(0, 0, 0, 0.08);
    white-space: nowrap;
}

/* Expanded row detail */
.food-detail[b-y8vt4iz346] {
    background: rgba(255, 255, 255, 0.45);
    padding: 0;
}

.food-detail-inner[b-y8vt4iz346] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 14px 18px 16px 60px;
}

.detail-block[b-y8vt4iz346] {
    min-width: 200px;
    flex: 1 1 200px;
    max-width: 380px;
}

.detail-title[b-y8vt4iz346] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ck-text-muted);
    margin-bottom: 6px;
}

.detail-row[b-y8vt4iz346] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: #424242;
}

.detail-label[b-y8vt4iz346] {
    color: var(--ck-text-muted);
    font-size: 0.78rem;
    min-width: 90px;
}

.detail-muted[b-y8vt4iz346] {
    color: var(--ck-text-faint);
    font-size: 0.82rem;
}

.detail-resource[b-y8vt4iz346] {
    color: var(--ck-text-faint);
    font-size: 0.72rem;
    font-family: monospace;
}

.ingredient-list[b-y8vt4iz346] {
    margin: 0;
    padding-left: 18px;
    font-size: 0.85rem;
    color: #424242;
}

.ingredient-list li[b-y8vt4iz346] {
    margin-bottom: 2px;
}

.ingredient-pct[b-y8vt4iz346] {
    color: var(--ck-text-faint);
    font-size: 0.75rem;
    margin-left: 4px;
}

/* "← Badger" inline chain: what a recipe entry is itself made from */
.recipe-chain[b-y8vt4iz346] {
    color: var(--ck-amber-text);
    margin: 0 5px;
    font-size: 0.78rem;
    cursor: help;
}

/* Nested sub-recipe of a multi-ingredient intermediate ("Unbaked Meatpie") */
.recipe-sub[b-y8vt4iz346] {
    list-style: none;
    margin: 3px 0 5px;
    padding-left: 12px;
    border-left: 2px solid rgba(176, 135, 63, 0.35);
    font-size: 0.8rem;
}

.recipe-sub li[b-y8vt4iz346] {
    margin-bottom: 1px;
}

/* "of Roast Beef" note when a prep-variant inherits its base food's recipe */
.recipe-inherit[b-y8vt4iz346] {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    color: var(--ck-amber-text);
    cursor: help;
}

/* "optional" badge on canonical recipe entries */
.recipe-optional[b-y8vt4iz346] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 7px;
    border: 1px dashed rgba(90, 104, 116, 0.6);
    color: var(--ck-text-faint);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: 1px;
}

/* Cooking station under the recipe ("Frying Pan and Fire") */
.recipe-station[b-y8vt4iz346] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(144, 160, 174, 0.3);
    color: var(--ck-text-muted);
    font-size: 0.78rem;
}

[b-y8vt4iz346] .recipe-station .mud-icon-root {
    font-size: 1.05rem;
    color: var(--ck-amber-text);
}

/* Proportional FEP composition bar */
.fep-bar[b-y8vt4iz346] {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 8px;
}

.fep-bar-segment[b-y8vt4iz346] {
    height: 100%;
}

.fep-detail-table[b-y8vt4iz346] {
    border-collapse: collapse;
}

.fep-detail-table td[b-y8vt4iz346] {
    padding: 1px 10px 1px 0;
    font-size: 0.82rem;
    color: #424242;
}

.fep-detail-value[b-y8vt4iz346] {
    text-align: right;
    font-weight: 600;
}

.no-results[b-y8vt4iz346] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 32px 0;
}

/* ===== Food panels ===== */

.panels-bar[b-y8vt4iz346] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.panels-bar-spacer[b-y8vt4iz346] {
    flex: 1;
}

.panels-toggle[b-y8vt4iz346] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    color: #2c3e50;
    padding: 6px 4px;
}

.panels-strip[b-y8vt4iz346] {
    display: flex;
    /* Cards size to their own content — a full panel grows tall while a
       two-item one stays compact */
    align-items: flex-start;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 10px 2px;
    margin-bottom: 8px;
}

/* Pinned over the table (ck-stuck set by cookbook-dnd.js): cards condense to
   just their headers — still filter buttons and drop targets — so the strip
   never blankets the rows. Full cards return when scrolled back to the top. */
.sticky-stack.ck-stuck .panel-items[b-y8vt4iz346] {
    display: none;
}

.sticky-stack.ck-stuck .panel-card[b-y8vt4iz346] {
    min-width: 0;
    padding: 3px 10px;
}

.sticky-stack.ck-stuck .panel-card-header[b-y8vt4iz346] {
    margin-bottom: 0;
    min-height: 26px;
}

.sticky-stack.ck-stuck .panels-divider span[b-y8vt4iz346] {
    display: none;
}

.panel-card[b-y8vt4iz346] {
    flex: 0 0 auto;
    min-width: 220px;
    max-width: 340px;
    border-radius: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.35);
    /* Subtle per-panel identity: each panel gets its own accent hue */
    border-top: 3px solid var(--panel-accent, rgba(44, 62, 80, 0.2));
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
    transition: box-shadow 0.12s, border-color 0.12s, transform 0.12s;
    /* Blur lives on the oversized clipped ::before, not the element: when the
       cards condense over the scrolling table (ck-stuck) an in-bounds blur's
       edge band spans nearly the whole chip and pulses dark as rows pass
       beneath (same Chromium edge-sampling issue as the glass containers —
       see .glass-morphism in app.css). The clip is load-bearing. */
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

.panel-card[b-y8vt4iz346]::before {
    content: '';
    position: absolute;
    inset: -40px;
    z-index: -1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    pointer-events: none;
}

.panel-card.shared-other[b-y8vt4iz346] {
    background: rgba(240, 245, 250, 0.6);
}

/* Shared panels: the BORDER alone breathes between the panel's accent and the
   share blue — background stays plain glass */
.panel-card.is-shared[b-y8vt4iz346] {
    border: 1px solid var(--panel-accent);
    border-top-width: 3px;
    animation: ck-shared-border-b-y8vt4iz346 3.2s ease-in-out infinite;
}

@keyframes ck-shared-border-b-y8vt4iz346 {
    0%, 100% { border-color: var(--panel-accent); }
    50% { border-color: #64B5F6; }
}

@media (prefers-reduced-motion: reduce) {
    .panel-card.is-shared[b-y8vt4iz346] {
        animation: none;
    }
}

/* Visible share toggle in the card header */
.cookbook-page[b-y8vt4iz346]  .share-btn {
    color: rgba(44, 62, 80, 0.35);
}

.cookbook-page[b-y8vt4iz346]  .share-btn:hover {
    color: #1c76c4;
}

.cookbook-page[b-y8vt4iz346]  .share-btn.shared {
    color: #1c76c4;
}

/* Add-to-panel dropdown trigger next to the drag grip */
.cookbook-page[b-y8vt4iz346]  .add-menu .mud-icon-button {
    color: rgba(44, 62, 80, 0.35);
    padding: 4px;
}

.cookbook-page[b-y8vt4iz346]  .add-menu .mud-icon-button:hover {
    color: #1c76c4;
}

/* While a drag is in flight, every valid target lights up */
.panel-card.own.droppable[b-y8vt4iz346] {
    border: 1px dashed rgba(100, 181, 246, 0.8);
    animation: ck-droppable-pulse-b-y8vt4iz346 1.1s ease-in-out infinite;
}

@keyframes ck-droppable-pulse-b-y8vt4iz346 {
    0%, 100% { box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.15); }
    50% { box-shadow: 0 0 0 4px rgba(100, 181, 246, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
    .panel-card.own.droppable[b-y8vt4iz346] {
        animation: none;
        box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.3);
    }
}

/* The card actually hovered gets the strongest highlight */
.panel-card.drag-over[b-y8vt4iz346] {
    border: 1px dashed #64B5F6;
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.35) !important;
    transform: translateY(-1px);
    animation: none;
}

.panel-card.active[b-y8vt4iz346] {
    border: 1px solid #64B5F6;
    box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.35);
}

.panel-card.ghost[b-y8vt4iz346] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ck-text-muted);
    font-size: 0.82rem;
    border-style: dashed;
    max-width: 420px;
}

.panel-card-header[b-y8vt4iz346] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    min-height: 30px;
}

.panel-name-btn[b-y8vt4iz346] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    color: #2c3e50;
    padding: 2px 2px;
    text-align: left;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-name-btn:hover[b-y8vt4iz346] {
    color: #1c76c4;
    text-decoration: underline;
}

.panel-count[b-y8vt4iz346] {
    font-size: 0.68rem;
    color: var(--ck-text-muted);
    background: rgba(44, 62, 80, 0.08);
    border-radius: 8px;
    padding: 0 6px;
    line-height: 1.6;
}

.panel-badge[b-y8vt4iz346] {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1c76c4;
    background: rgba(100, 181, 246, 0.18);
    border: 1px solid rgba(100, 181, 246, 0.4);
    border-radius: 8px;
    padding: 0 6px;
    line-height: 1.7;
}

/* Divider between your panels and panels shared with you */
.panels-divider[b-y8vt4iz346] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 2px;
    border-left: 2px solid rgba(44, 62, 80, 0.15);
}

.panels-divider span[b-y8vt4iz346] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ck-text-faint);
    white-space: nowrap;
}

/* Inline contributor tag on community-added foods */
.contrib-name[b-y8vt4iz346] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 7px;
    font-size: 0.68rem;
    color: var(--ck-purple-text);
    white-space: nowrap;
}

/* Variant-row tag: game worlds this variation was recorded in */
.world-tag[b-y8vt4iz346] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 7px;
    font-size: 0.68rem;
    color: var(--ck-text-muted);
    white-space: nowrap;
}

/* Panel contents as a list — one food/recipe per row. The card grows with its
   items; the viewport-relative cap is a safety valve only (the strip is sticky,
   so a card must never get taller than the screen), not a design height. */
.panel-items[b-y8vt4iz346] {
    display: flex;
    flex-direction: column;
    max-height: 55vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

.panel-item[b-y8vt4iz346] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 4px;
    border-radius: 5px;
    font-size: 0.78rem;
    color: #34495e;
    cursor: pointer;
    min-width: 0;
}

.item-line1[b-y8vt4iz346] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.item-right[b-y8vt4iz346] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.item-total[b-y8vt4iz346] {
    font-weight: 700;
    font-size: 0.72rem;
    color: #2c3e50;
}

.item-line2[b-y8vt4iz346] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding-left: 24px;
}

/* Micro FEP distribution bar per item — hover segments for exact values */
.item-bar[b-y8vt4iz346] {
    display: flex;
    width: 64px;
    min-width: 64px;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.item-bar-seg[b-y8vt4iz346] {
    height: 100%;
}

.item-eff[b-y8vt4iz346] {
    font-size: 0.66rem;
    color: var(--ck-text-muted);
    white-space: nowrap;
}

.panel-item:nth-child(odd)[b-y8vt4iz346] {
    background: rgba(255, 255, 255, 0.35);
}

.panel-item:hover[b-y8vt4iz346] {
    background: rgba(100, 181, 246, 0.14);
}

.panel-item[draggable="true"][b-y8vt4iz346] {
    cursor: grab;
}

.panel-item.unknown[b-y8vt4iz346] {
    opacity: 0.45;
}

.item-name[b-y8vt4iz346] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
}

.item-sub[b-y8vt4iz346] {
    color: var(--ck-text-faint);
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.cookbook-page[b-y8vt4iz346]  .item-missing-icon {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    color: var(--ck-text-disabled);
}

.chip-icon[b-y8vt4iz346] {
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
}

.chip-x[b-y8vt4iz346] {
    border: none;
    background: transparent;
    color: var(--ck-text-faint);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 1px;
}

.chip-x:hover[b-y8vt4iz346] {
    color: #c0392b;
}

/* Star column + drag handle in the master table */
.cookbook-page[b-y8vt4iz346]  .star-cell {
    padding-left: 4px;
    padding-right: 0;
}

.cookbook-page[b-y8vt4iz346]  .star-on {
    color: var(--ck-gold-icon);
}

.cookbook-page[b-y8vt4iz346]  .star-off {
    color: rgba(44, 62, 80, 0.5);
}

.cookbook-page[b-y8vt4iz346]  .star-off:hover {
    color: var(--ck-gold-icon);
}

.drag-handle[b-y8vt4iz346] {
    display: inline-flex;
    align-items: center;
    cursor: grab;
}

.drag-handle:active[b-y8vt4iz346] {
    cursor: grabbing;
}

/* Visible drag affordance next to the star (master rows + variant rows) */
.cookbook-page[b-y8vt4iz346]  .drag-cell {
    padding-left: 0;
    padding-right: 0;
}

.drag-grip[b-y8vt4iz346] {
    display: inline-flex;
    align-items: center;
    cursor: grab;
    color: rgba(44, 62, 80, 0.35);
    padding: 4px 2px;
}

.drag-grip:hover[b-y8vt4iz346] {
    color: #1c76c4;
}

.drag-grip:active[b-y8vt4iz346] {
    cursor: grabbing;
}

.cookbook-page[b-y8vt4iz346]  .variant-actions {
    white-space: nowrap;
    padding-left: 4px;
    padding-right: 0;
}

/* Row highlighted when a panel chip focused this specific variant */
.cookbook-page[b-y8vt4iz346]  .variant-table .variant-focused .mud-table-cell {
    background: rgba(100, 181, 246, 0.16) !important;
    box-shadow: inset 3px 0 0 #64B5F6;
}


.cookbook-page[b-y8vt4iz346]  .contrib-name .mud-icon-root,
.cookbook-page[b-y8vt4iz346]  .world-tag .mud-icon-root {
    font-size: 0.85rem;
    width: 0.85rem;
    height: 0.85rem;
}

/* Name-cell hint that a food has recorded variations */
.variant-hint[b-y8vt4iz346] {
    margin-left: 8px;
    font-size: 0.68rem;
    color: var(--ck-text-faint);
    white-space: nowrap;
}

/* Full-width variations panel below the detail columns */
.variations-block[b-y8vt4iz346] {
    flex-basis: 100%;
    border-top: 1px dashed rgba(44, 62, 80, 0.15);
    padding-top: 10px;
}

.variant-filter[b-y8vt4iz346] {
    max-width: 320px;
    margin-bottom: 6px;
}

.variant-seen[b-y8vt4iz346] {
    margin-left: 6px;
    font-size: 0.7rem;
    color: var(--ck-text-faint);
}

/* Nested sortable variations table */
.cookbook-page[b-y8vt4iz346]  .variant-table .mud-table-cell {
    font-size: 0.8rem;
    padding: 3px 10px;
}

.cookbook-page[b-y8vt4iz346]  .variant-table .mud-table-row {
    cursor: default;
}

/* Per-variation FEP bar: always full width, colored segments = stat distribution */
.variant-bar[b-y8vt4iz346] {
    display: flex;
    width: 220px;
    max-width: 100%;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.variant-bar-segment[b-y8vt4iz346] {
    height: 100%;
}

/* Written FEP distribution under the bar, e.g. "● CON 53% · ● PER+2 20%" */
.fep-dist[b-y8vt4iz346] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-top: 3px;
    font-size: 0.68rem;
    color: var(--ck-text-muted);
}

.fep-dist-item[b-y8vt4iz346] {
    white-space: nowrap;
}

.fep-dist-dot[b-y8vt4iz346] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    vertical-align: baseline;
}

.fep-full-name[b-y8vt4iz346] {
    color: var(--ck-text-muted);
    font-size: 0.8rem;
    padding-right: 6px;
}
/* _content/HnHMapperServer.Web/Components/Pages/Map.razor.rz.scp.css */
/* Map page container - fixed positioning to escape MudMainContent padding */
.map-page[b-ouzf29q9ld] {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    overflow: hidden;
    z-index: 0;
}

/* Loading screen shown when permission is missing or data is loading */
.map-loading[b-ouzf29q9ld] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #000;
    color: #fff;
}

/* Context menu styling (for tile and marker actions) */
.context-menu[b-ouzf29q9ld] {
    min-width: 200px;
}

/* Drawer container for the right-side sidebar */
.map-drawer-container[b-ouzf29q9ld] {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Fullscreen map view container behind the sidebar */
.map-view-container-fullscreen[b-ouzf29q9ld] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transition: width 225ms cubic-bezier(0.4, 0, 0.6, 1); /* Match MudBlazor drawer animation */
}

/* When sidebar is open, reduce map width to reveal background behind sidebar */
.map-view-container-fullscreen.sidebar-open[b-ouzf29q9ld] {
    width: calc(100% - min(400px, 85vw)); /* Match MapSidebar width from MapSidebar.razor */
}

/* Mobile: Keep map full width since sidebar is overlay mode (covers map) */
@media (max-width: 600px) {
    .map-view-container-fullscreen.sidebar-open[b-ouzf29q9ld] {
        width: 100%;
    }
}

/* Custom scrollbar styling for map page */
.map-page[b-ouzf29q9ld], .map-page *[b-ouzf29q9ld] {
    scrollbar-width: thin;
    scrollbar-color: #404040 #000;
}

.map-page *[b-ouzf29q9ld]::-webkit-scrollbar {
    width: 8px;
}

.map-page *[b-ouzf29q9ld]::-webkit-scrollbar-track {
    background: #000;
}

.map-page *[b-ouzf29q9ld]::-webkit-scrollbar-thumb {
    background: #404040;
    border-radius: 4px;
}

.map-page *[b-ouzf29q9ld]::-webkit-scrollbar-thumb:hover {
    background: #606060;
}

/* Phone-specific: Hide menu FAB when sidebar is open (user can use close button in sidebar) */
@media (max-width: 600px) {
    .map-page[b-ouzf29q9ld] {
        --fab-visibility: hidden;
    }
}
/* _content/HnHMapperServer.Web/Components/Shared/NotificationCenter.razor.rz.scp.css */
.notification-item[b-i75rdvkjku] {
    transition: background-color 0.2s ease;
}

.notification-item:hover[b-i75rdvkjku] {
    background-color: rgba(0, 0, 0, 0.04);
}

.notification-item.unread[b-i75rdvkjku] {
    background-color: rgba(33, 150, 243, 0.08);
}

.notification-item.unread:hover[b-i75rdvkjku] {
    background-color: rgba(33, 150, 243, 0.12);
}

.notification-item.read[b-i75rdvkjku] {
    opacity: 0.7;
}

.notification-header[b-i75rdvkjku] {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}