@import '_content/PilsMap.UI/PilsMap.UI.z0sdzfr6ku.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-5ug2wp5zbm] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-5ug2wp5zbm] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MobileLayout.razor.rz.scp.css */
.mobile-layout[b-iazrhojubu] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

#blazor-error-ui[b-iazrhojubu] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-iazrhojubu] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-b3aqizl4fo],
.components-reconnect-repeated-attempt-visible[b-b3aqizl4fo],
.components-reconnect-failed-visible[b-b3aqizl4fo],
.components-pause-visible[b-b3aqizl4fo],
.components-resume-failed-visible[b-b3aqizl4fo],
.components-rejoining-animation[b-b3aqizl4fo] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-b3aqizl4fo],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-b3aqizl4fo],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-b3aqizl4fo],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-b3aqizl4fo],
#components-reconnect-modal.components-reconnect-retrying[b-b3aqizl4fo],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-b3aqizl4fo],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-b3aqizl4fo],
#components-reconnect-modal.components-reconnect-failed[b-b3aqizl4fo],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-b3aqizl4fo] {
    display: block;
}


#components-reconnect-modal[b-b3aqizl4fo] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-b3aqizl4fo 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-b3aqizl4fo 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-b3aqizl4fo 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-b3aqizl4fo]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-b3aqizl4fo 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-b3aqizl4fo {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-b3aqizl4fo {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-b3aqizl4fo {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-b3aqizl4fo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-b3aqizl4fo] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-b3aqizl4fo] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-b3aqizl4fo] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-b3aqizl4fo] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-b3aqizl4fo] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-b3aqizl4fo] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-b3aqizl4fo 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-b3aqizl4fo] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-b3aqizl4fo {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AddBeerPlace.razor.rz.scp.css */
.add-beerplace-page[b-q4lm8bubnj] {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Blue gradient banner — same look as the mobile/desktop home header so the
   user keeps a consistent brand frame while filling out the submission form. */
.add-beerplace-header[b-q4lm8bubnj] {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: white;
    text-align: center;
    padding: 24px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.add-beerplace-header h1[b-q4lm8bubnj] {
    margin: 0;
    color: white;
}

.add-beerplace-header p[b-q4lm8bubnj] {
    color: rgba(255, 255, 255, 0.92);
    margin: 8px 0 0;
}

.add-beerplace-header a[b-q4lm8bubnj] {
    color: white;
    text-decoration: underline;
}

.add-beerplace-footer[b-q4lm8bubnj] {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
}

.add-beerplace-footer a[b-q4lm8bubnj] {
    color: #2196F3;
    text-decoration: none;
}
/* /Components/Pages/Admin/AdminDataQuality.razor.rz.scp.css */
/* Scoped styles for the admin "Datakvalitet" component.

   The look intentionally mirrors AdminPage.razor.css, but the rules are
   repeated here rather than reused: scoped CSS applies per component, so the
   parent page's .submissions-table / .primary-btn rules do not reach this
   component's markup. */

.quality-tabs[b-p0td57h7r5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.quality-tab[b-p0td57h7r5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
}

.quality-tab:hover[b-p0td57h7r5] {
    background: #ececec;
}

.quality-tab.active[b-p0td57h7r5] {
    background: #1976D2;
    border-color: #1976D2;
    color: white;
}

.badge[b-p0td57h7r5] {
    background: #E53935;
    color: white;
    border-radius: 10px;
    font-size: 12px;
    padding: 1px 7px;
}

.quality-tab.active .badge[b-p0td57h7r5] {
    background: rgba(255, 255, 255, 0.28);
}

.hint[b-p0td57h7r5] {
    color: #555;
    font-size: 13px;
    margin: 8px 0;
}

.status[b-p0td57h7r5] {
    background: #E3F2FD;
    border-left: 4px solid #1976D2;
    padding: 8px 12px;
    font-size: 13px;
    margin: 8px 0;
}

.delete-search[b-p0td57h7r5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}

.missing-filter[b-p0td57h7r5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
}

.autoscroll-toggle[b-p0td57h7r5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
}

.price-input[b-p0td57h7r5] {
    width: 80px;
    padding: 5px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.duplicate-group[b-p0td57h7r5] {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

.duplicate-group h3[b-p0td57h7r5] {
    margin: 0;
    font-size: 15px;
}

.submissions-table[b-p0td57h7r5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 8px;
}

.submissions-table th[b-p0td57h7r5],
.submissions-table td[b-p0td57h7r5] {
    border-bottom: 1px solid #eee;
    padding: 8px 6px;
    text-align: left;
    vertical-align: top;
}

.submissions-table th[b-p0td57h7r5] {
    background: #f5f5f5;
    font-weight: 600;
    color: #333;
}

.submissions-table .nowrap[b-p0td57h7r5] {
    white-space: nowrap;
}

.submissions-table .happy-hour-cell[b-p0td57h7r5] {
    max-width: 220px;
    color: #555;
}

.submissions-table .actions-cell[b-p0td57h7r5] {
    white-space: nowrap;
    min-width: 260px;
}

.primary-btn[b-p0td57h7r5],
.secondary-btn[b-p0td57h7r5],
.danger-btn[b-p0td57h7r5] {
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    margin-right: 4px;
}

.primary-btn[b-p0td57h7r5] {
    background: #1976D2;
    color: white;
}

.secondary-btn[b-p0td57h7r5] {
    background: #eee;
    color: #333;
}

.danger-btn[b-p0td57h7r5] {
    background: #E53935;
    color: white;
}

.primary-btn:disabled[b-p0td57h7r5],
.secondary-btn:disabled[b-p0td57h7r5],
.danger-btn:disabled[b-p0td57h7r5] {
    opacity: 0.6;
    cursor: not-allowed;
}

.active-badge[b-p0td57h7r5] {
    background: #E8F5E9;
    color: #2E7D32;
    border-radius: 10px;
    font-size: 12px;
    padding: 2px 8px;
}

.deleted-badge[b-p0td57h7r5] {
    background: #FFEBEE;
    color: #C62828;
    border-radius: 10px;
    font-size: 12px;
    padding: 2px 8px;
    margin-right: 4px;
}

.back-link[b-p0td57h7r5] {
    font-size: 13px;
    color: #1976D2;
    text-decoration: none;
    margin-right: 6px;
}

/* ══ MOBILE LAYOUT ══════════════════════════════════════════════════════════
   Same trigger as the admin page itself (narrow viewport OR touch-primary
   device) so the quality box switches at the exact moment the surrounding page
   does. Strategy: tabs and filters become full-width stacked controls with
   44px touch targets, tables turn into label/value cards, and each row's
   buttons stack full width instead of sitting on one un-tappable line. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {

    .quality-tabs[b-p0td57h7r5] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .quality-tab[b-p0td57h7r5] {
        justify-content: space-between;
        min-height: 44px;
        font-size: 14px;
    }

    /* Filter row: one control per line, each stretching edge to edge. */
    .delete-search[b-p0td57h7r5] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .delete-search .primary-btn[b-p0td57h7r5] {
        min-height: 44px;
        margin-right: 0;
    }

    .missing-filter[b-p0td57h7r5] {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .missing-filter select[b-p0td57h7r5] {
        min-height: 44px;
        width: 100%;
        padding: 6px 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .autoscroll-toggle[b-p0td57h7r5] {
        min-height: 44px;
    }

    /* Standalone action button («Søk etter duplikater») outside the filter row. */
    .block-btn[b-p0td57h7r5] {
        width: 100%;
        min-height: 44px;
        margin-right: 0;
    }

    .duplicate-group[b-p0td57h7r5] {
        padding: 8px;
    }

    .duplicate-group h3[b-p0td57h7r5] {
        font-size: 14px;
    }

    .submissions-table.cards-on-mobile thead[b-p0td57h7r5] {
        display: none;
    }

    .submissions-table.cards-on-mobile tr[b-p0td57h7r5] {
        display: block;
        border: 1px solid #eee;
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 6px 8px;
    }

    .submissions-table.cards-on-mobile td[b-p0td57h7r5] {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        border-bottom: none;
        padding: 4px 0;
        /* Long names/addresses must wrap inside the card rather than widen it. */
        white-space: normal;
        text-align: right;
    }

    .submissions-table.cards-on-mobile td[b-p0td57h7r5]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #666;
        flex: 0 0 auto;
        text-align: left;
    }

    .submissions-table.cards-on-mobile td.happy-hour-cell[b-p0td57h7r5],
    .submissions-table.cards-on-mobile .happy-hour-cell[b-p0td57h7r5] {
        max-width: none;
    }

    /* Action buttons: stacked, full width, comfortable tap height. The
       label is dropped here because the buttons speak for themselves. */
    .submissions-table.cards-on-mobile td.actions-cell[b-p0td57h7r5] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        min-width: 0;
        padding-top: 8px;
        text-align: center;
    }

    .submissions-table.cards-on-mobile td.actions-cell[b-p0td57h7r5]::before {
        display: none;
    }

    .submissions-table.cards-on-mobile td.actions-cell .primary-btn[b-p0td57h7r5],
    .submissions-table.cards-on-mobile td.actions-cell .secondary-btn[b-p0td57h7r5],
    .submissions-table.cards-on-mobile td.actions-cell .danger-btn[b-p0td57h7r5] {
        width: 100%;
        min-height: 44px;
        margin-right: 0;
    }

    .submissions-table.cards-on-mobile td.actions-cell .price-input[b-p0td57h7r5] {
        width: 100%;
        min-height: 44px;
    }
}
/* /Components/Pages/Admin/AdminLogin.razor.rz.scp.css */
.admin-login[b-bl50nrtiwv] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fef9e7 0%, #f5deb3 100%);
    padding: 20px;
}

.admin-login-card[b-bl50nrtiwv] {
    background: white;
    padding: 36px 32px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    width: 100%;
    max-width: 380px;
}

.admin-login-card h1[b-bl50nrtiwv] {
    margin: 0 0 8px 0;
    font-size: 22px;
    color: #333;
}

.admin-login-sub[b-bl50nrtiwv] {
    margin: 0 0 24px 0;
    color: #666;
    font-size: 14px;
}

.form-row[b-bl50nrtiwv] {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}

.form-row label[b-bl50nrtiwv] {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #444;
}

.form-row input[b-bl50nrtiwv] {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

.form-row input:focus[b-bl50nrtiwv] {
    outline: none;
    border-color: #1a73e8;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

.error[b-bl50nrtiwv] {
    color: #c62828;
    background: #fdecea;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin: 0 0 12px 0;
}

.login-btn[b-bl50nrtiwv] {
    width: 100%;
    background: #4CAF50;
    color: white;
    border: none;
    padding: 11px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
}

.login-btn:hover[b-bl50nrtiwv] {
    background: #388E3C;
}

.admin-back[b-bl50nrtiwv] {
    margin: 18px 0 0 0;
    text-align: center;
    font-size: 13px;
}

.admin-back a[b-bl50nrtiwv] {
    color: #1a73e8;
    text-decoration: none;
}

.admin-back a:hover[b-bl50nrtiwv] {
    text-decoration: underline;
}

.debug[b-bl50nrtiwv] {
    margin: 12px 0 0 0;
    padding: 6px 10px;
    background: #eef;
    color: #335;
    font-size: 12px;
    font-family: Consolas, monospace;
    border-radius: 4px;
}
/* /Components/Pages/Admin/AdminPage.razor.rz.scp.css */
.admin-page[b-61xsi8frdc] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Blue gradient banner — matches the mobile/desktop home header so the brand
   look stays consistent across the public site and the admin area. Header
   actions (back link, logout) are restyled below to read as white-on-blue. */
.admin-header[b-61xsi8frdc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: white;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.admin-header h1[b-61xsi8frdc] {
    margin: 0;
    font-size: 22px;
    color: white;
}

.admin-header-actions[b-61xsi8frdc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.back-link[b-61xsi8frdc] {
    color: white;
    text-decoration: none;
    font-size: 14px;
    opacity: 0.95;
}

.back-link:hover[b-61xsi8frdc] {
    text-decoration: underline;
    opacity: 1;
}

.logout-btn[b-61xsi8frdc] {
    background: rgba(255, 255, 255, 0.18);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.logout-btn:hover[b-61xsi8frdc] {
    background: rgba(255, 255, 255, 0.28);
}

.admin-section[b-61xsi8frdc] {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.admin-section h2[b-61xsi8frdc] {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #333;
}

.hint[b-61xsi8frdc] {
    margin: 0 0 14px 0;
    color: #666;
    font-size: 13px;
}

.hint a[b-61xsi8frdc] {
    color: #1a73e8;
}

.sync-btn[b-61xsi8frdc] {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.sync-btn:hover:not(:disabled)[b-61xsi8frdc] {
    background: #388E3C;
}

.sync-btn:disabled[b-61xsi8frdc] {
    background: #ccc;
    cursor: not-allowed;
}

/* Cancel state: red while a sync is running so the destructive action is
   visually distinct from the green "start sync" action. */
.sync-btn-cancel[b-61xsi8frdc] {
    background: #d32f2f;
}

.sync-btn-cancel:hover:not(:disabled)[b-61xsi8frdc] {
    background: #b71c1c;
}

.last-updated[b-61xsi8frdc] {
    font-size: 13px;
    color: #666;
}

.info-row[b-61xsi8frdc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.info-row .sync-progress[b-61xsi8frdc] {
    margin: 0;
}

.source-sync-summary[b-61xsi8frdc] {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #666;
}

.scrape-health[b-61xsi8frdc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    width: fit-content;
    border: 1px solid transparent;
}

.scrape-health-dot[b-61xsi8frdc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.scrape-health-ok[b-61xsi8frdc] {
    color: #1B5E20;
    background: #E8F5E9;
    border-color: #A5D6A7;
}

.scrape-health-warn[b-61xsi8frdc] {
    color: #8D6E00;
    background: #FFF8E1;
    border-color: #FFE082;
}

.scrape-health-bad[b-61xsi8frdc] {
    color: #B71C1C;
    background: #FFEBEE;
    border-color: #EF9A9A;
}

.scrape-health-unknown[b-61xsi8frdc] {
    color: #555;
    background: #ECEFF1;
    border-color: #CFD8DC;
}

.sync-progress[b-61xsi8frdc] {
    margin: 12px 0 0 0;
    font-size: 14px;
    color: #1976D2;
    font-weight: 500;
}

.sync-row[b-61xsi8frdc] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.status[b-61xsi8frdc] {
    margin: 0;
    font-size: 13px;
    color: #333;
}

.console-header[b-61xsi8frdc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.console-actions[b-61xsi8frdc] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.autoscroll-toggle[b-61xsi8frdc] {
    font-size: 13px;
    color: #555;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.clear-btn[b-61xsi8frdc] {
    background: transparent;
    color: #1a73e8;
    border: 1px solid #1a73e8;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.clear-btn:hover[b-61xsi8frdc] {
    background: #1a73e8;
    color: white;
}

.console[b-61xsi8frdc] {
    background: #1e1e1e;
    color: #d4d4d4;
    font-family: "Cascadia Code", Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.45;
    padding: 12px 14px;
    border-radius: 6px;
    height: 460px;
    overflow: auto;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.redirecting[b-61xsi8frdc] {
    padding: 24px;
    color: #666;
    font-size: 14px;
}

/* ── User-submission review section ─────────────────────────────────────── */
.section-count[b-61xsi8frdc] {
    font-size: 13px;
    color: #666;
    font-weight: normal;
    margin-left: 6px;
}

.badge[b-61xsi8frdc] {
    display: inline-block;
    background: #d32f2f;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    border-radius: 10px;
    padding: 2px 8px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Combined "total pending" pill in the header. Deliberately calmer than
   the red per-section .badge above: white-on-translucent so it reads as
   a neutral summary chip ("here's how much is in the queue") rather than
   an alert. Sits to the left of the per-type quick-links. */
.total-pending[b-61xsi8frdc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    font-size: 13px;
    font-weight: 600;
    border-radius: 14px;
    padding: 4px 10px;
}

.submissions-actions[b-61xsi8frdc] {
    margin: 12px 0;
}

.submissions-table[b-61xsi8frdc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 8px;
}

.submissions-table th[b-61xsi8frdc],
.submissions-table td[b-61xsi8frdc] {
    border-bottom: 1px solid #eee;
    padding: 8px 6px;
    text-align: left;
    vertical-align: top;
}

.submissions-table th[b-61xsi8frdc] {
    background: #f5f5f5;
    font-weight: 600;
    color: #333;
}

.submissions-table .nowrap[b-61xsi8frdc] {
    white-space: nowrap;
}

.submissions-table .happy-hour-cell[b-61xsi8frdc] {
    max-width: 220px;
    color: #555;
}

.submissions-table .actions-cell[b-61xsi8frdc] {
    white-space: nowrap;
    min-width: 320px;
}

.primary-btn[b-61xsi8frdc] {
    background: #1976D2;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.primary-btn:hover:not(:disabled)[b-61xsi8frdc] {
    background: #115293;
}

.primary-btn:disabled[b-61xsi8frdc] {
    background: #ccc;
    cursor: not-allowed;
}

.primary-btn.small[b-61xsi8frdc],
.danger-btn.small[b-61xsi8frdc],
.ghost-btn.small[b-61xsi8frdc] {
    padding: 4px 10px;
    font-size: 12px;
}

.danger-btn[b-61xsi8frdc] {
    background: #d32f2f;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    margin-left: 6px;
}

.danger-btn:hover:not(:disabled)[b-61xsi8frdc] {
    background: #b71c1c;
}

.ghost-btn[b-61xsi8frdc] {
    background: transparent;
    color: #1a73e8;
    border: 1px solid #1a73e8;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.ghost-btn:hover:not(:disabled)[b-61xsi8frdc] {
    background: #e3f2fd;
}

.ghost-btn:disabled[b-61xsi8frdc] {
    color: #999;
    border-color: #ccc;
    cursor: not-allowed;
}

.approval-form[b-61xsi8frdc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f9f9f9;
    padding: 8px;
    border-radius: 4px;
    min-width: 360px;
}

.approval-form label[b-61xsi8frdc] {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #555;
    gap: 2px;
}

.approval-form select[b-61xsi8frdc],
.approval-form input[type="text"][b-61xsi8frdc],
.approval-form input[type="number"][b-61xsi8frdc] {
    padding: 4px 6px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
}

.approval-buttons[b-61xsi8frdc] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.error-line[b-61xsi8frdc] {
    color: #d32f2f;
    font-size: 12px;
    margin: 4px 0 0;
}

/* ── Soft delete / restore section ──────────────────────────────────────── */

.delete-search[b-61xsi8frdc] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.delete-search input[type="text"][b-61xsi8frdc] {
    flex: 1 1 260px;
    min-width: 200px;
    padding: 6px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
}

.submissions-table tr.deleted-row td[b-61xsi8frdc] {
    background: #fdf3f3;
    color: #777;
}

.deleted-badge[b-61xsi8frdc],
.active-badge[b-61xsi8frdc] {
    display: inline-block;
    border-radius: 14px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
}

.deleted-badge[b-61xsi8frdc] {
    background: #ffe0e0;
    color: #b71c1c;
}

.active-badge[b-61xsi8frdc] {
    background: #e3f5e3;
    color: #2e7d32;
}

.confirm-box[b-61xsi8frdc] {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 4px;
    padding: 8px;
    min-width: 240px;
}

.confirm-question[b-61xsi8frdc] {
    display: block;
    font-size: 12px;
    color: #5d4037;
    margin-bottom: 4px;
}

/* ── Inline "Endre utested" form ──────────────────────────────────────────── */
.missing-filter[b-61xsi8frdc] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
    white-space: nowrap;
}

.missing-filter select[b-61xsi8frdc] {
    padding: 5px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}

.place-actions[b-61xsi8frdc] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.place-edit-form[b-61xsi8frdc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f5f8ff;
    border: 1px solid #c9d8f0;
    border-radius: 4px;
    padding: 8px;
    min-width: 260px;
}

.place-edit-form label[b-61xsi8frdc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: #555;
}

.place-edit-form input[type="text"][b-61xsi8frdc],
.place-edit-form input[type="number"][b-61xsi8frdc],
.place-edit-form select[b-61xsi8frdc] {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
}

/* The soft-delete toggle reads as one line: box first, then the caption. */
.place-edit-form label.checkbox-label[b-61xsi8frdc] {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.place-edit-form label.checkbox-label input[type="checkbox"][b-61xsi8frdc] {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
}

.place-edit-form .form-error[b-61xsi8frdc] {
    margin: 0;
    font-size: 12px;
    color: #c62828;
}

/* ── Extra-prices repeater inside the approval form ─────────────────────── */
.extra-prices-block[b-61xsi8frdc] {
    border-top: 1px dashed #ccc;
    padding-top: 6px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.extra-prices-header[b-61xsi8frdc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.extra-price-row[b-61xsi8frdc] {
    display: grid;
    grid-template-columns: 80px 70px 1fr auto;
    gap: 4px;
    align-items: center;
}

.extra-price-row input[b-61xsi8frdc],
.extra-price-row select[b-61xsi8frdc] {
    padding: 4px 6px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
}

.hint[b-61xsi8frdc] {
    font-size: 12px;
    color: #777;
    margin: 4px 0;
}

/* ── Section menu ────────────────────────────────────────────────────────────
   Modern segmented control: the items sit inside a soft, slightly inset track
   so the bar reads as one component instead of a row of loose grey buttons.
   The selected item is a raised blue pill; the rest are quiet until hovered. */
.admin-menu[b-61xsi8frdc] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 20px;
    padding: 5px;
    background: #f1f4f8;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.04);
}

.admin-menu-item[b-61xsi8frdc] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: none;
    color: #4a5565;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.1px;
    line-height: 1;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease,
                box-shadow 120ms ease, transform 120ms ease;
}

.admin-menu-item:hover:not(.active)[b-61xsi8frdc] {
    background: rgba(25, 118, 210, 0.08);
    color: #1565C0;
}

.admin-menu-item:active:not(.active)[b-61xsi8frdc] {
    transform: translateY(1px);
}

/* Keyboard users get the same ring the rest of the admin UI uses. */
.admin-menu-item:focus-visible[b-61xsi8frdc] {
    outline: 2px solid #1976D2;
    outline-offset: 2px;
}

.admin-menu-item.active[b-61xsi8frdc] {
    background: linear-gradient(180deg, #1E88E5 0%, #1565C0 100%);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(21, 101, 192, 0.32);
}

.admin-menu-item .badge[b-61xsi8frdc] {
    /* Slightly tighter than the header badges: these sit inside a pill. */
    min-width: 20px;
    justify-content: center;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
}

.admin-menu-item.active .badge[b-61xsi8frdc] {
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

/* ══ MOBILE ADMIN LAYOUT ═══════════════════════════════════════════════════
   A phone/tablet variant of the admin page. It is activated purely from
   browser-provided information: a narrow viewport, or a touch-primary device
   (hover: none + pointer: coarse). None of the rules above are modified, so
   the desktop experience is bit-for-bit unchanged — everything below only
   applies once one of these media conditions matches.

   Strategy (no markup changes required):
   - Header becomes a stacked block with wrapping, tappable action chips.
   - Sections lose the card padding/margins and go edge-to-edge.
   - Wide data tables become horizontally scrollable panes with momentum
     scrolling instead of forcing the whole page to scroll sideways.
   - Forms, toggles and button rows go full width with 44px touch targets.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {

    .admin-page[b-61xsi8frdc] {
        max-width: none;
        padding: 12px 10px 32px;
    }

    /* ── Section menu on mobile ──────────────────────────────────────────────
       The segmented track keeps its look but the items become a 2-column grid
       of full-width pills with 44px touch targets. Every item is shown,
       including Datakvalitet. */
    .admin-menu[b-61xsi8frdc] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        margin-bottom: 14px;
        padding: 5px;
        border-radius: 12px;
    }

    .admin-menu-item[b-61xsi8frdc] {
        justify-content: space-between;
        min-height: 44px;
        font-size: 13px;
        padding: 8px 12px;
        text-align: left;
    }

    /* ── Header ─────────────────────────────────────────────────────────────
       Deliberately NOT sticky: it scrolls away with the rest of the page so a
       small screen keeps all its vertical space for content. Layout is a
       stacked block — title on its own line, then the navigation as an even
       2-column grid of chips, then a full-width logout. */
    .admin-header[b-61xsi8frdc] {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        border-radius: 10px;
        overflow: hidden;
    }

    .admin-header h1[b-61xsi8frdc] {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: 0.2px;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    }

    /* Chips are laid out on a fixed 2-column grid so they all share the same
       width and baseline instead of wrapping into ragged rows of odd sizes. */
    .admin-header-actions[b-61xsi8frdc] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 10px;
    }

    .admin-header-actions .back-link[b-61xsi8frdc] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        /* Solid white on the blue gradient: the previous translucent white
           (0.16 alpha) was barely distinguishable from the header background. */
        background: #ffffff;
        color: #1565C0;
        border: none;
        border-radius: 6px;
        /* Sized to the 13px label rather than a fixed 44px block, so the chip
           no longer dwarfs its own text. */
        padding: 7px 10px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        min-height: 0;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }

    /* Badges invert against the now-white chip so counts stay readable. */
    .admin-header-actions .back-link .badge[b-61xsi8frdc] {
        flex: 0 0 auto;
        background: #1976D2;
        color: #ffffff;
    }

    /* Summary banner and logout span the full grid width. */
    .admin-header-actions .total-pending[b-61xsi8frdc] {
        grid-column: 1 / -1;
        text-align: center;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.16);
        border-radius: 6px;
        padding: 6px 10px;
    }

    /* Logout matches the navigation chips exactly (solid white, blue label) so
       the header reads as one consistent set of controls. */
    .admin-header-actions .logout-btn[b-61xsi8frdc] {
        grid-column: 1 / -1;
        background: #ffffff;
        color: #1565C0;
        border: none;
        border-radius: 6px;
        padding: 7px 10px;
        min-height: 0;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }

    /* The desktop hover fades the button back to translucent white; keep the
       solid chip look instead. */
    .admin-header-actions .logout-btn:hover[b-61xsi8frdc] {
        background: #f1f5fb;
    }

    /* ── Sections ───────────────────────────────────────────────────────── */
    .admin-section[b-61xsi8frdc] {
        padding: 14px 12px;
        margin-bottom: 14px;
        border-radius: 6px;
        /* Header is not sticky, so anchors only need a small breathing gap. */
        scroll-margin-top: 12px;
    }

    .admin-section h2[b-61xsi8frdc] {
        font-size: 15px;
    }

    /* ── Controls: stack and stretch ────────────────────────────────────── */
    .sync-row[b-61xsi8frdc],
    .submissions-actions[b-61xsi8frdc],
    .info-row[b-61xsi8frdc],
    .console-header[b-61xsi8frdc],
    .console-actions[b-61xsi8frdc],
    .delete-search[b-61xsi8frdc] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .sync-row button[b-61xsi8frdc],
    .submissions-actions button[b-61xsi8frdc],
    .console-actions button[b-61xsi8frdc],
    .delete-search button[b-61xsi8frdc] {
        width: 100%;
        min-height: 44px;
        font-size: 15px;
    }

    .autoscroll-toggle[b-61xsi8frdc] {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 36px;
        font-size: 14px;
    }

    .autoscroll-toggle input[type="checkbox"][b-61xsi8frdc] {
        width: 20px;
        height: 20px;
    }

    .delete-search input[type="text"][b-61xsi8frdc] {
        flex: 1 1 auto;
        width: 100%;
        min-height: 44px;
        /* 16px prevents iOS Safari from auto-zooming on focus. */
        font-size: 16px;
    }

    /* ── "Mangler data" filter ──────────────────────────────────────────
       The label sits on its own line above a full-width select so the long
       option texts are not squeezed next to the caption on a phone. */
    .missing-filter[b-61xsi8frdc] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: 100%;
        white-space: normal;
        font-size: 14px;
    }

    .missing-filter > span[b-61xsi8frdc] {
        font-weight: 600;
        color: #444;
    }

    .missing-filter select[b-61xsi8frdc] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-height: 44px;
        /* 16px prevents iOS Safari from auto-zooming when the picker opens. */
        font-size: 16px;
        font-family: inherit;
        padding: 8px 34px 8px 10px;
        border: 1px solid #d0d0d0;
        border-radius: 4px;
        background-color: #fff;
        color: #222;
        /* Native selects render as tiny grey chips on some Android browsers;
           draw our own caret so the control looks like the text input above. */
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px 8px;
    }

    .missing-filter select:disabled[b-61xsi8frdc] {
        background-color: #f2f2f2;
        color: #888;
    }

    /* ── Data tables: scroll sideways inside their own pane ─────────────── */
    .submissions-table[b-61xsi8frdc] {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .submissions-table th[b-61xsi8frdc],
    .submissions-table td[b-61xsi8frdc] {
        font-size: 12px;
        padding: 8px 6px;
    }

    .actions-cell[b-61xsi8frdc] {
        white-space: normal;
    }

    /* ── Card layout for the review queues ──────────────────────────────
       "Brukerinnsendte steder" and "Foreslåtte endringer" carry 10+ columns,
       which is unusable even with sideways scrolling. Those two tables opt in
       with .cards-on-mobile: the header row is hidden and every <tr> becomes a
       vertical card where each cell shows its column name (from data-label)
       on the left and the value on the right. No sideways scrolling at all. */
    .submissions-table.cards-on-mobile[b-61xsi8frdc] {
        display: block;
        overflow-x: visible;
    }

    .cards-on-mobile thead[b-61xsi8frdc] {
        /* Column headers are redundant once every cell is self-labelled.
           clip-rect keeps them available to screen readers. */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .cards-on-mobile tbody[b-61xsi8frdc] {
        display: block;
    }

    .cards-on-mobile tbody tr[b-61xsi8frdc] {
        display: block;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        padding: 6px 10px;
        margin-bottom: 12px;
    }

    .cards-on-mobile tbody td[b-61xsi8frdc] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        width: auto;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        padding: 7px 0;
        font-size: 13px;
        /* .nowrap is for narrow desktop columns; inside a card the value has
           the full card width and should be free to wrap. */
        white-space: normal;
        text-align: right;
    }

    .cards-on-mobile tbody td:last-child[b-61xsi8frdc] {
        border-bottom: none;
    }

    /* The venue name is the card's identity, so it gets emphasis. The column
       is called "Navn" in the submissions/delete grids and "Sted" in the
       suggested-edits grid. */
    .cards-on-mobile tbody td[data-label="Navn"][b-61xsi8frdc],
    .cards-on-mobile tbody td[data-label="Sted"][b-61xsi8frdc] {
        font-weight: 700;
        font-size: 14px;
        color: #222;
    }

    /* The secondary address line inside the "Sted" cell stays normal weight. */
    .cards-on-mobile tbody td[data-label="Sted"] small[b-61xsi8frdc] {
        font-weight: 400;
        font-size: 12px;
        color: #666;
    }

    /* The caption for the name row is emphasised to match its value. */
    .cards-on-mobile tbody td[data-label="Navn"][b-61xsi8frdc]::before,
    .cards-on-mobile tbody td[data-label="Sted"][b-61xsi8frdc]::before {
        font-weight: 700;
        font-size: 14px;
        color: #222;
    }

    .cards-on-mobile tbody td[b-61xsi8frdc]::before {
        content: attr(data-label);
        flex: 0 0 42%;
        text-align: left;
        font-weight: 600;
        font-size: 12px;
        color: #666;
    }

    /* Cells with no label (defensive) should not reserve caption space. */
    .cards-on-mobile tbody td:not([data-label])[b-61xsi8frdc]::before {
        display: none;
    }

    /* Alternative-price lists and the action area need the full card width,
       so they drop below their caption instead of sitting beside it. */
    .cards-on-mobile tbody td.happy-hour-cell[b-61xsi8frdc],
    .cards-on-mobile tbody td.actions-cell[b-61xsi8frdc] {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 6px;
    }

    .cards-on-mobile tbody td.happy-hour-cell[b-61xsi8frdc]::before,
    .cards-on-mobile tbody td.actions-cell[b-61xsi8frdc]::before {
        flex: 0 0 auto;
    }

    .cards-on-mobile .alt-price-list[b-61xsi8frdc] {
        margin: 0;
        padding-left: 18px;
    }

    /* Action buttons: full-width stacked tap targets inside the card. */
    .cards-on-mobile td.actions-cell button[b-61xsi8frdc] {
        width: 100%;
        min-height: 42px;
        font-size: 14px;
        padding: 8px 12px;
    }

    /* The inline approval / edit forms already stack; just let them fill
       the card and keep the buttons side by side two-per-row. */
    .cards-on-mobile td.actions-cell .approval-form[b-61xsi8frdc] {
        min-width: 0;
        width: 100%;
    }

    .cards-on-mobile td.actions-cell .approval-buttons button[b-61xsi8frdc] {
        width: auto;
        flex: 1 1 45%;
    }

    /* Soft-deleted places: tint the whole card instead of the individual cells,
       since the per-cell backgrounds are invisible in the stacked layout. */
    .cards-on-mobile tbody tr.deleted-row[b-61xsi8frdc] {
        background: #fdf3f3;
        border-color: #f0c9c9;
    }

    .cards-on-mobile tbody tr.deleted-row td[b-61xsi8frdc] {
        background: transparent;
    }

    /* The inline "Er du sikker?" box fills the card; its Ja/Nei pair stays on
       one row via the .approval-buttons rule above. */
    .cards-on-mobile td.actions-cell .confirm-box[b-61xsi8frdc] {
        min-width: 0;
        width: 100%;
    }

    /* Inline edit form: fills the card, 16px inputs so iOS does not zoom in. */
    .place-edit-form[b-61xsi8frdc] {
        min-width: 0;
        width: 100%;
    }

    .place-edit-form input[type="text"][b-61xsi8frdc],
    .place-edit-form input[type="number"][b-61xsi8frdc],
    .place-edit-form select[b-61xsi8frdc] {
        min-height: 40px;
        font-size: 16px;
    }

    /* The alternative-price repeater is too wide for a phone as a 4-column
       grid, so amount + volume share one row and the description gets its own,
       with the remove button pinned to the amount/volume row. */
    .place-edit-form .extra-price-row[b-61xsi8frdc] {
        grid-template-columns: 1fr 1fr auto;
    }

    .place-edit-form .extra-price-row input[type="text"][b-61xsi8frdc] {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .place-edit-form .extra-price-row button[b-61xsi8frdc] {
        grid-row: 1;
    }

    .cards-on-mobile td.actions-cell .place-edit-form .extra-price-row button[b-61xsi8frdc] {
        width: auto;
        flex: 0 0 auto;
    }

    .cards-on-mobile td.actions-cell .place-edit-form button[b-61xsi8frdc] {
        width: auto;
        flex: 1 1 45%;
    }

    .cards-on-mobile td.actions-cell .place-actions button[b-61xsi8frdc] {
        width: 100%;
    }

    /* ── Approval / confirm forms: full width, comfortable inputs ───────── */
    .approval-form[b-61xsi8frdc],
    .confirm-box[b-61xsi8frdc] {
        min-width: 0;
        width: 100%;
    }

    .approval-form select[b-61xsi8frdc],
    .approval-form input[type="text"][b-61xsi8frdc],
    .approval-form input[type="number"][b-61xsi8frdc] {
        min-height: 40px;
        font-size: 16px;
    }

    .approval-buttons[b-61xsi8frdc] {
        flex-wrap: wrap;
    }

    .approval-buttons button[b-61xsi8frdc] {
        flex: 1 1 45%;
        min-height: 40px;
    }

    .extra-price-row[b-61xsi8frdc] {
        grid-template-columns: 1fr 1fr;
    }

    /* ── Live console: shorter so it does not dominate a small screen ───── */
    .console[b-61xsi8frdc] {
        max-height: 220px;
        font-size: 11px;
    }
}

/* /Components/Pages/EditBeerPlace.razor.rz.scp.css */
/* Scoped CSS for the desktop edit-suggestion page.

   Blazor's CSS isolation rewrites selectors per-component, so the rules in
   AddBeerPlace.razor.css do NOT apply to elements rendered by
   EditBeerPlace.razor — even though both pages use the same class names.
   We duplicate the rules here (kept in sync with AddBeerPlace.razor.css) so
   the edit page picks up the same chrome (blue gradient banner, footer
   alignment, etc.) without going through the global app.css. */

.add-beerplace-page[b-r35xebdzmz] {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.add-beerplace-header[b-r35xebdzmz] {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: white;
    text-align: center;
    padding: 24px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.add-beerplace-header h1[b-r35xebdzmz] {
    margin: 0;
    color: white;
}

.add-beerplace-header p[b-r35xebdzmz] {
    color: rgba(255, 255, 255, 0.92);
    margin: 8px 0 0;
}

.add-beerplace-header a[b-r35xebdzmz] {
    color: white;
    text-decoration: underline;
}

.add-beerplace-footer[b-r35xebdzmz] {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
}

.add-beerplace-footer a[b-r35xebdzmz] {
    color: #2196F3;
    text-decoration: none;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.pils-container[b-8b04htekb6] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Blue gradient banner — matches the mobile GUI for a consistent brand look
   across breakpoints. Spans the full container width so it reads as a real
   page header, not just centered text. */
.pils-header[b-8b04htekb6] {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: white;
    text-align: center;
    padding: 24px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.pils-header h1[b-8b04htekb6] {
    font-size: 2.5rem;
    margin: 0;
    color: white;
}

.pils-header p[b-8b04htekb6] {
    color: rgba(255, 255, 255, 0.92);
    margin: 5px 0 0;
}

.pils-header a[b-8b04htekb6] {
    color: white;
    text-decoration: underline;
}

.controls[b-8b04htekb6] {
    background: #f5f5f5;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.filter-group[b-8b04htekb6] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-group label[b-8b04htekb6] {
    font-weight: 500;
    color: #333;
}

.filter-group select[b-8b04htekb6],
.filter-group input[type="range"][b-8b04htekb6] {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.filter-group select[b-8b04htekb6] {
    min-width: 150px;
}

.filter-group input[type="range"][b-8b04htekb6] {
    width: 150px;
}

.legend[b-8b04htekb6] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* ─── Price-band filter chips (mirrors the mobile chip style) ───────────
   Selectable buttons that filter the map markers by price band. */
.filter-chip[b-8b04htekb6] {
    /* Base unselected state: outlined pill, neutral background. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border: 1.5px solid #d0d0d0;
    border-radius: 18px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

.filter-chip:hover:not(.selected)[b-8b04htekb6] {
    border-color: #999;
    background: #fafafa;
}

.filter-chip:active[b-8b04htekb6] {
    transform: scale(0.97);
}

.filter-chip:focus-visible[b-8b04htekb6] {
    outline: 2px solid #1976D2;
    outline-offset: 2px;
}

.filter-chip.selected[b-8b04htekb6] {
    /* Selected: filled with translucent price-band colour; dark text so all
       three chips share the same label colour family. */
    border-color: transparent;
    color: #2b2b2b;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.filter-chip .chip-dot[b-8b04htekb6] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.filter-chip.selected .chip-dot[b-8b04htekb6] {
    /* White ring so the dot pops against the now-coloured chip background. */
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}

.chip-dot.green[b-8b04htekb6]  { background: #4CAF50; }
.chip-dot.yellow[b-8b04htekb6] { background: #FFC107; }
.chip-dot.red[b-8b04htekb6]    { background: #F44336; }

/* Translucent backgrounds keep the chip readable while letting the surrounding
   light grey controls bar show through subtly. Inner .chip-dot stays opaque. */
.filter-chip.selected:has(.chip-dot.green)[b-8b04htekb6]  { background: rgba(76, 175, 80, 0.75); }
.filter-chip.selected:has(.chip-dot.yellow)[b-8b04htekb6] { background: rgba(255, 193, 7, 0.75); }
.filter-chip.selected:has(.chip-dot.red)[b-8b04htekb6]    { background: rgba(244, 67, 54, 0.75); }

.refresh-container[b-8b04htekb6] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* Row that sits directly under the .controls panel and shows the database
   freshness on the left and the place-count on the right. */
.status-bar[b-8b04htekb6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -10px 0 16px 0;
    padding: 0 4px;
    font-size: 13px;
    color: #555;
    gap: 12px;
}

.status-bar .status-left[b-8b04htekb6] {
    text-align: left;
}

.status-bar .status-right[b-8b04htekb6] {
    text-align: right;
    margin-left: auto;
}

/* Tighter padding for the place-count chip when it lives in the slim status bar. */
.status-bar .places-count[b-8b04htekb6] {
    padding: 0;
    font-size: 13px;
}

/* Wraps the "Min posisjon" button (and its inline error) so it sits on the same
   line as the filter dropdowns/legend, aligned to the right of the .controls row. */
.my-location-wrap[b-8b04htekb6] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.refresh-btn[b-8b04htekb6] {
    background: #2196F3;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.refresh-btn:hover:not(:disabled)[b-8b04htekb6] {
    background: #1976D2;
}

.refresh-btn:disabled[b-8b04htekb6] {
    background: #ccc;
    cursor: not-allowed;
}

.sync-btn[b-8b04htekb6] {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
}

.sync-btn:hover:not(:disabled)[b-8b04htekb6] {
    background: #388E3C;
}

.sync-btn:disabled[b-8b04htekb6] {
    background: #ccc;
    cursor: not-allowed;
}

.my-location-btn[b-8b04htekb6] {
    background: #1a73e8;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
}

.my-location-btn:hover:not(:disabled)[b-8b04htekb6] {
    background: #1557b0;
}

.my-location-btn:disabled[b-8b04htekb6] {
    background: #ccc;
    cursor: not-allowed;
}

.location-error[b-8b04htekb6] {
    font-size: 12px;
    color: #c62828;
    margin-left: 10px;
}

.places-count[b-8b04htekb6] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    background: transparent;
    padding: 10px 20px;
    border-radius: 4px;
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.last-updated[b-8b04htekb6] {
    font-size: 12px;
    color: #666;
    font-style: italic;
}

.map-container[b-8b04htekb6] {
    height: 500px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    background: #e0e0e0;
}

.loading-overlay[b-8b04htekb6] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-content[b-8b04htekb6] {
    text-align: center;
}

.loading-progress[b-8b04htekb6] {
    color: #666;
    font-size: 14px;
}

.loading-status[b-8b04htekb6] {
    color: #2196F3;
    font-size: 12px;
    margin-top: 10px;
}

.spinner[b-8b04htekb6] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2196F3;
    border-radius: 50%;
    animation: spin-b-8b04htekb6 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin-b-8b04htekb6 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-progress[b-8b04htekb6] {
    color: #666;
    font-size: 14px;
}

.stats[b-8b04htekb6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.stat-card[b-8b04htekb6] {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stat-card h3[b-8b04htekb6] {
    margin: 0 0 10px;
    font-size: 14px;
    color: #666;
    text-transform: uppercase;
}

.stat-card .stat-value[b-8b04htekb6] {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.stat-card .stat-price[b-8b04htekb6] {
    font-size: 24px;
    font-weight: 700;
    margin: 5px 0;
    color: #2e7d32;
}

.stat-card .stat-region[b-8b04htekb6] {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.stat-card.cheapest[b-8b04htekb6] {
    border-left: 4px solid #4CAF50;
}

.stat-card.expensive[b-8b04htekb6] {
    border-left: 4px solid #F44336;
}

.place-list[b-8b04htekb6] {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.place-list h2[b-8b04htekb6] {
    margin: 0 0 15px;
    font-size: 1.3rem;
    color: #333;
}

.place-list table[b-8b04htekb6] {
    width: 100%;
    border-collapse: collapse;
}

.place-list th[b-8b04htekb6],
.place-list td[b-8b04htekb6] {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.place-list th[b-8b04htekb6] {
    font-weight: 600;
    color: #333;
    cursor: pointer;
    user-select: none;
}

.place-list th:hover[b-8b04htekb6] {
    background: #f5f5f5;
}

.place-list tr:hover[b-8b04htekb6] {
    background: #fafafa;
}

.place-list .price[b-8b04htekb6] {
    font-weight: 600;
    color: #2e7d32;
}

.place-list .price.cheap[b-8b04htekb6] { color: #2e7d32; }
.place-list .price.medium[b-8b04htekb6] { color: #e65100; }
.place-list .price.expensive[b-8b04htekb6] { color: #c62828; }

.price-normalized[b-8b04htekb6] {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.price-normalized.cheap[b-8b04htekb6] { color: #2e7d32; }
.price-normalized.medium[b-8b04htekb6] { color: #e65100; }
.price-normalized.expensive[b-8b04htekb6] { color: #c62828; }

.normalized-label[b-8b04htekb6] {
    font-size: 10px;
    font-weight: 400;
    color: #888;
    margin-right: 2px;
}

.price-normalized-na[b-8b04htekb6] {
    color: #bbb;
    font-size: 11px;
}

.more-info[b-8b04htekb6] {
    text-align: center;
    color: #666;
    margin-top: 15px;
    font-size: 14px;
}

footer[b-8b04htekb6] {
    text-align: center;
    padding: 20px;
    color: #666;
    font-size: 14px;
}

footer a[b-8b04htekb6] {
    color: #2196F3;
    text-decoration: none;
}

@media (max-width: 768px) {
    .controls[b-8b04htekb6] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group[b-8b04htekb6] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .refresh-btn[b-8b04htekb6] {
        margin-left: 0;
        width: 100%;
    }
    
    .map-container[b-8b04htekb6] {
        height: 350px;
    }
    
    .place-list[b-8b04htekb6] {
        overflow-x: auto;
    }
}
/* /Components/Pages/Mobile/AddBeerPlaceMobile.razor.rz.scp.css */
.mobile-add-beerplace[b-53u203m5c9] {
    min-height: 100vh;
    background: #f5f5f5;
    padding-bottom: 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Blue gradient banner — matches the mobile home header (.mobile-header in
   HomeMobile.razor.css) so the user stays on a consistent brand frame when
   they navigate from the map into the submission form. */
.mobile-add-beerplace-header[b-53u203m5c9] {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: white;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    position: sticky;
    top: 0;
    z-index: 10;
}

.mobile-add-beerplace-header h1[b-53u203m5c9] {
    margin: 0;
    font-size: 18px;
    color: white;
}

/* Back arrow rendered white-on-blue with a translucent hit area, mirroring
   the .menu-toggle button on the mobile home header. */
.back-link[b-53u203m5c9] {
    color: white;
    font-size: 22px;
    text-decoration: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.back-link:active[b-53u203m5c9] {
    background: rgba(255, 255, 255, 0.3);
}
/* /Components/Pages/Mobile/EditBeerPlaceMobile.razor.rz.scp.css */
/* Scoped CSS for the mobile edit-suggestion page.
   See EditBeerPlace.razor.css for why we duplicate rules from
   AddBeerPlaceMobile.razor.css instead of sharing them. */

.mobile-add-beerplace[b-5087d8oexc] {
    min-height: 100vh;
    background: #f5f5f5;
    padding-bottom: 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Blue gradient banner — matches the mobile home header so the user stays
   on a consistent brand frame when they navigate from the map into the
   edit form. */
.mobile-add-beerplace-header[b-5087d8oexc] {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: white;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    position: sticky;
    top: 0;
    z-index: 10;
}

.mobile-add-beerplace-header h1[b-5087d8oexc] {
    margin: 0;
    font-size: 18px;
    color: white;
}

/* Back arrow rendered white-on-blue with a translucent hit area, mirroring
   the .menu-toggle button on the mobile home header. */
.back-link[b-5087d8oexc] {
    color: white;
    font-size: 22px;
    text-decoration: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.back-link:active[b-5087d8oexc] {
    background: rgba(255, 255, 255, 0.3);
}
/* /Components/Pages/Mobile/HomeMobile.razor.rz.scp.css */
.mobile-container[b-7ebnot6h70] {
    display: flex;
    flex-direction: column;
    /* Lock to the device viewport (no page scrolling, no rubber-band overflow).
       Use 100dvh where supported for correct height when mobile browser chrome shows/hides. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f5f5;
}

/* Round white FAB anchored top-left over the map. Visual sibling of
   .my-location-fab (bottom-right): same dimensions, same elevation, same
   active state — they read as a matching pair of map controls. The hamburger
   used to live in a coloured page header above the map; removing the header
   gave the map its full vertical space, and this button retains the
   "open filters" affordance without stealing pixels from the map. */
.menu-toggle[b-7ebnot6h70] {
    position: absolute;
    /* Plain pixel value rather than calc(env(safe-area-inset-top, 0px) + 16px)
       — some browser/PWA combinations stripped the calc result and left the
       button at top:auto, which placed it behind the map. The MobileLayout
       wrapper already accounts for the iOS notch, so a fixed 16px from the
       top of .view-content is correct in both browser and standalone PWA
       contexts. */
    top: 16px;
    left: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: white;
    color: #333;
    font-size: 1.4rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Must sit above Leaflet's panes (max 700), above the bottom-sheet
       panel's backdrop (1050), AND above the bottom-sheet panel itself
       (1060) so the user can always tap it to close the filter panel. */
    z-index: 1100;
}

.menu-toggle:active[b-7ebnot6h70] {
    background: #f1f3f4;
}

.mobile-search-shell[b-7ebnot6h70] {
    position: absolute;
    top: 16px;
    left: 76px;
    right: 76px;
    z-index: 1090;
}

.mobile-search-bar[b-7ebnot6h70] {
    height: 44px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 22px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.mobile-search-input[b-7ebnot6h70] {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 8px 0 18px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #222;
    text-align: center;
}

.mobile-search-input[b-7ebnot6h70]::placeholder {
    color: #222;
    opacity: 1;
}

.mobile-search-input:focus[b-7ebnot6h70]::placeholder {
    opacity: 0;
}

.mobile-search-inline-btn[b-7ebnot6h70] {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: #333;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-search-inline-btn:active[b-7ebnot6h70] {
    background: #f1f3f4;
}

.mobile-search-suggestions[b-7ebnot6h70] {
    margin-top: 8px;
    max-height: 260px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    padding: 6px;
}

.mobile-search-suggestion[b-7ebnot6h70] {
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    cursor: pointer;
}

.mobile-search-suggestion:active[b-7ebnot6h70] {
    background: #f1f3f4;
}

.mobile-search-suggestion-name[b-7ebnot6h70] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #222;
}

.mobile-search-suggestion-meta[b-7ebnot6h70] {
    font-size: 0.8rem;
    color: #666;
}

.mobile-filters-backdrop[b-7ebnot6h70] {
    /* Semi-transparent overlay that closes the panel when the user taps outside it.
       Must sit above Leaflet's internal panes (which go up to z-index 700). */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1050;
    animation: mobileBackdropFadeIn-b-7ebnot6h70 200ms ease-out both;
}

.mobile-filters-backdrop.is-closing[b-7ebnot6h70] {
    pointer-events: none;
    animation: mobileBackdropFadeOut-b-7ebnot6h70 200ms ease-out both;
}

.mobile-filters[b-7ebnot6h70] {
    /* Bottom sheet over the map. The round menu-toggle FAB stays fixed in the
       top-left corner above it (z-index 1100 vs 1060) so the user can always
       tap it to dismiss. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    background: white;
    padding: 8px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.22);
    z-index: 1060;
    animation: mobileFiltersSlideUp-b-7ebnot6h70 200ms ease-out both;
    /* Smooth snap-back when the user starts a drag-to-close gesture but
       doesn't drag far enough to commit. The transform is mutated live by
       filterPanel.js; the .is-dragging class temporarily disables this
       transition so the panel follows the finger 1:1. */
    transition: transform 200ms ease-out;
}

.mobile-filters.is-closing[b-7ebnot6h70] {
    pointer-events: none;
    animation: mobileFiltersSlideDown-b-7ebnot6h70 200ms ease-out both;
}

.mobile-filters.is-dragging[b-7ebnot6h70] {
    /* Active drag — no easing, the panel snaps to the finger position. */
    transition: none;
}

/* Drag-to-close handle. Sits at the top edge of the bottom sheet (where
   bottom-sheet controls normally advertise drag-to-dismiss). Dragging it
   downward dismisses the panel. The grey pill is the universal "this is draggable"
   affordance used by bottom-sheets in iOS/Material apps. */
.mobile-filters-handle[b-7ebnot6h70] {
    margin: -2px -16px 0;
    padding: 10px 16px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* touch-action:none is critical: it prevents the browser from
       interpreting the vertical drag as a scroll/zoom gesture and lets
       filterPanel.js receive every pointermove event. */
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.mobile-filters-handle:active[b-7ebnot6h70] {
    cursor: grabbing;
}

.mobile-filters-handle-pill[b-7ebnot6h70] {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #cccccc;
}

.mobile-filters-footer[b-7ebnot6h70] {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #eee;
    /* "Registrer nytt utested" button on top, data-source + last-updated row below. */
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.85rem;
    color: #666;
}

/* Primary call-to-action, styled to match the blue "Send inn" submit button on
   the registration page (.primary-btn: #2196F3, hover #1976D2). It stays an <a>
   so the iOS standalone-shell anchor interception in standalone-nav.js keeps the
   navigation inside the home-screen app. Scoped under .mobile-filters-footer so
   it overrides the generic footer-link colour. */
.mobile-filters-footer .mobile-add-beerplace-btn[b-7ebnot6h70] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    box-sizing: border-box;
    background: #2196F3;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, transform 0.08s ease;
}

.mobile-filters-footer .mobile-add-beerplace-btn:hover[b-7ebnot6h70],
.mobile-filters-footer .mobile-add-beerplace-btn:active[b-7ebnot6h70] {
    background: #1976D2;
}

.mobile-filters-footer .mobile-add-beerplace-btn:active[b-7ebnot6h70] {
    transform: scale(0.99);
}

.mobile-filters-meta[b-7ebnot6h70] {
    /* Data source on the left, last-updated on the right. */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
}

.mobile-filters-footer .last-updated-mobile[b-7ebnot6h70] {
    text-align: right;
    min-width: 0;
}

.mobile-filters-data-source[b-7ebnot6h70] {
    text-align: left;
    white-space: nowrap;
}

.mobile-filters-footer a[b-7ebnot6h70] {
    color: #2196F3;
    text-decoration: none;
}

.filter-section[b-7ebnot6h70] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-section label[b-7ebnot6h70] {
    font-weight: 500;
    color: #333;
    font-size: 0.9rem;
}

.filter-section select[b-7ebnot6h70] {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    background: white;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.filter-section input[type="range"][b-7ebnot6h70] {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: #ddd;
    border-radius: 4px;
}

.filter-section input[type="range"][b-7ebnot6h70]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: #2196F3;
    border-radius: 50%;
    cursor: pointer;
}

/* ─── Price-band filter chips ───────────────────────────────────────────
   Modern Material-style filter chips: native <button>, 44px tap target
   (iOS HIG / Android Material minimum), aria-pressed for screen readers,
   tactile :active feedback for touch (no :hover reliance on mobile). */

.legend-mobile[b-7ebnot6h70] {
    /* Segmented control: the three price-band options sit as raised white
       cards on a single rounded light-grey track, separated by small gaps. */
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 6px;
    background: #efeff1;
    border-radius: 16px;
}

.filter-chip[b-7ebnot6h70] {
    /* One segment of the price-band control. Muted and flat when its band is
       filtered out; the .selected rule below turns it into a white card. */
    flex: 1;
    min-width: 0;                       /* allow shrinking inside flex row */
    min-height: 44px;                   /* iOS/Android minimum touch target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px;
    background: transparent;
    border: none;
    border-radius: 12px;                /* 16px track − 6px padding inner radius */
    font-size: 1rem;
    font-weight: 700;
    color: #9aa0a6;                     /* muted label when band is filtered out */
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;   /* remove default grey flash on iOS */
    transition: background-color 0.15s ease, color 0.15s ease,
                transform 0.08s ease, box-shadow 0.15s ease;
}

.filter-chip:active[b-7ebnot6h70] {
    /* Quick tactile press feedback on touch devices. */
    transform: scale(0.96);
}

.filter-chip:focus-visible[b-7ebnot6h70] {
    /* Keyboard / accessibility focus ring; invisible to normal touch users. */
    outline: 2px solid #1976D2;
    outline-offset: 2px;
}

.filter-chip.selected[b-7ebnot6h70] {
    /* Active band: a raised white card with a dark, bold label that lifts off
       the grey track. All three selected chips share the same white look, so
       the only colour cue is the dot — matching the design mock. */
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.filter-chip .chip-dot[b-7ebnot6h70] {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Grey the dot down when its band is filtered out so the active cards stand out. */
.filter-chip:not(.selected) .chip-dot[b-7ebnot6h70] {
    opacity: 0.45;
    filter: grayscale(0.5);
}

.chip-dot.green[b-7ebnot6h70]  { background: #22c55e; }
.chip-dot.yellow[b-7ebnot6h70] { background: #f5a623; }
.chip-dot.red[b-7ebnot6h70]    { background: #ef4444; }

/* ─── On/off toggle switches (iOS-style) ────────────────────────────────
   Two toggles side-by-side ("Bare puber og barer" left, "Utepils" right).
   Uses the native checkbox for accessibility (keyboard, screen reader, form
   semantics) but visually hides it; the styled .toggle-track + ::after knob
   reflects the :checked state. Theme blue (#2196F3) matches the rest of the
   mobile UI. */
.toggle-filters[b-7ebnot6h70] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
}

.toggle-switch[b-7ebnot6h70] {
    /* Each toggle is a flex row: label on the left of the track. */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    min-height: 44px;                       /* iOS/Android minimum touch target */
    -webkit-tap-highlight-color: transparent;
}

.filter-icon[b-7ebnot6h70] {
    /* Round category icon shown in front of each toggle label. */
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

.toggle-label[b-7ebnot6h70] {
    /* Match the "Fylke" / "Bydel/sted" form labels when the toggle is off,
       slightly bigger so the toggle row stands out from the price chips above. */
    font-weight: 500;
    color: #333;
    font-size: 1.05rem;
    transition: color 0.15s ease, font-weight 0.15s ease;
}

/* When the toggle is on, bump the label to match the selected price-chip label
   (#2b2b2b, weight 600) so all "active filter" text shares one visual family. */
.toggle-switch:has(input[type="checkbox"]:checked) .toggle-label[b-7ebnot6h70] {
    color: #2b2b2b;
    font-weight: 600;
}

/* Visually hidden but still focusable / keyboard-accessible. */
.toggle-switch input[type="checkbox"][b-7ebnot6h70] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.toggle-track[b-7ebnot6h70] {
    /* The visible pill background. */
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 30px;
    border-radius: 15px;
    background: #d6d6d6;                    /* off state — neutral grey */
    transition: background-color 0.2s ease;
}

.toggle-track[b-7ebnot6h70]::after {
    /* The sliding knob. */
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

/* Checked: pill turns theme-blue, knob slides right. */
.toggle-switch input[type="checkbox"]:checked + .toggle-track[b-7ebnot6h70] {
    background: #2196F3;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-track[b-7ebnot6h70]::after {
    /* Slide = track width − knob width − 2× offset = 52 − 24 − 6 = 22 */
    transform: translateX(22px);
}

/* Keyboard focus ring (invisible to normal touch users). */
.toggle-switch input[type="checkbox"]:focus-visible + .toggle-track[b-7ebnot6h70] {
    outline: 2px solid #1976D2;
    outline-offset: 3px;
}

.refresh-container-mobile[b-7ebnot6h70] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.mobile-buttons[b-7ebnot6h70] {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: flex-end;
}

.refresh-btn-mobile[b-7ebnot6h70] {
    background: #2196F3;
    color: white;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    flex: 1;
}

.refresh-btn-mobile:active:not(:disabled)[b-7ebnot6h70] {
    background: #1976D2;
}

.refresh-btn-mobile:disabled[b-7ebnot6h70] {
    background: #ccc;
}

.sync-btn-mobile[b-7ebnot6h70] {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    flex: 1;
}

.sync-btn-mobile:active:not(:disabled)[b-7ebnot6h70] {
    background: #388E3C;
}

.sync-btn-mobile:disabled[b-7ebnot6h70] {
    background: #ccc;
}

.places-count-mobile[b-7ebnot6h70] {
    font-size: 14px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    padding: 12px 16px;
    border-radius: 8px;
    text-align: right;
    margin-left: auto;
}

.last-updated-mobile[b-7ebnot6h70] {
    font-size: 0.8rem;
    color: #666;
    font-style: italic;
    text-align: center;
}

.loading-mobile[b-7ebnot6h70] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.spinner-mobile[b-7ebnot6h70] {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #2196F3;
    border-radius: 50%;
    animation: spin-b-7ebnot6h70 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-7ebnot6h70 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes mobileFiltersSlideUp-b-7ebnot6h70 {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes mobileFiltersSlideDown-b-7ebnot6h70 {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

@keyframes mobileBackdropFadeIn-b-7ebnot6h70 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mobileBackdropFadeOut-b-7ebnot6h70 {
    from { opacity: 1; }
    to { opacity: 0; }
}

.view-tabs[b-7ebnot6h70] {
    display: flex;
    background: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.tab[b-7ebnot6h70] {
    flex: 1;
    padding: 12px;
    border: none;
    background: white;
    font-size: 0.9rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.tab.active[b-7ebnot6h70] {
    color: #2196F3;
    border-bottom-color: #2196F3;
    font-weight: 500;
}

.tab:active[b-7ebnot6h70] {
    background: #f5f5f5;
}

.view-content[b-7ebnot6h70] {
    /* Fill all space below the sticky header. No internal scroll — Leaflet handles
       gestures on the map itself. */
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.mobile-map[b-7ebnot6h70] {
    /* Fill the entire view-content area; the parent flex layout controls the
       actual height so we don't need to subtract header/footer pixel values. */
    width: 100%;
    height: 100%;
    background: #e0e0e0;
}

.my-location-fab[b-7ebnot6h70] {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: white;
    color: #1a73e8;
    font-size: 1.6rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms ease-out;
}

.my-location-fab.filters-open[b-7ebnot6h70] {
    transform: translateY(calc(-1 * var(--mobile-filters-open-height, 0px)));
}

.my-location-fab:active:not(:disabled)[b-7ebnot6h70] {
    background: #f1f3f4;
}

.my-location-fab:disabled[b-7ebnot6h70] {
    opacity: 0.6;
    cursor: not-allowed;
}

.location-error-mobile[b-7ebnot6h70] {
    position: absolute;
    bottom: 88px;
    right: 20px;
    left: 20px;
    background: #c62828;
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 500;
}

.mobile-list[b-7ebnot6h70] {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.place-card[b-7ebnot6h70] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 14px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    cursor: pointer;
}

.place-card:active[b-7ebnot6h70] {
    background: #f9f9f9;
}

.place-info[b-7ebnot6h70] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.place-name[b-7ebnot6h70] {
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.place-region[b-7ebnot6h70] {
    font-size: 0.85rem;
    color: #666;
}

.place-price-info[b-7ebnot6h70] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.place-price[b-7ebnot6h70] {
    font-weight: 700;
    font-size: 1.1rem;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
}

.place-volume[b-7ebnot6h70] {
    font-size: 0.75rem;
    color: #888;
}

.price-green[b-7ebnot6h70] {
    background: #E8F5E9;
    color: #2E7D32;
}

.price-yellow[b-7ebnot6h70] {
    background: #FFF8E1;
    color: #F9A825;
}

.price-orange[b-7ebnot6h70] {
    background: #FFF3E0;
    color: #EF6C00;
}

.price-red[b-7ebnot6h70] {
    background: #FFEBEE;
    color: #C62828;
}

.legend-label-mobile[b-7ebnot6h70] {
    font-size: 9px;
    color: #555;
    font-weight: 500;
    margin-right: 4px;
}

.more-info-mobile[b-7ebnot6h70] {
    text-align: center;
    color: #666;
    padding: 16px;
    font-size: 0.9rem;
}

.mobile-stats[b-7ebnot6h70] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-card-mobile[b-7ebnot6h70] {
    background: white;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-card-mobile.cheapest[b-7ebnot6h70] {
    border-left: 4px solid #4CAF50;
}

.stat-card-mobile.expensive[b-7ebnot6h70] {
    border-left: 4px solid #F44336;
}

.stat-label[b-7ebnot6h70] {
    font-size: 0.85rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value[b-7ebnot6h70] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

.stat-price[b-7ebnot6h70] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2E7D32;
}

.stat-detail[b-7ebnot6h70] {
    font-size: 0.9rem;
    color: #666;
}
/* /Components/Shared/AddUserBeerPlaceForm.razor.rz.scp.css */
/* Shared submission form styling.
   Mobile-first: defaults target a narrow screen (no card chrome, edge-to-edge
   inputs, 16px font to avoid iOS auto-zoom, full-width tap-friendly buttons).
   The desktop card look is restored via a min-width: 600px media query at the
   bottom of this file. */

.add-beerplace-form[b-v0a12njgz6] {
    /* Edge-to-edge on phones — the card chrome only kicks in on tablets+. */
    margin: 0;
    padding: 16px;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.add-beerplace-form h2[b-v0a12njgz6] {
    margin: 0 0 8px;
    color: #333;
    font-size: 1.25rem;
}

.form-intro[b-v0a12njgz6] {
    color: #666;
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.4;
}

.form-row[b-v0a12njgz6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.form-row label[b-v0a12njgz6] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* 16px font-size on inputs prevents iOS Safari from auto-zooming the page
   when the user focuses a field. Larger padding gives ~48px tap targets. */
.form-row input[b-v0a12njgz6],
.form-row select[b-v0a12njgz6],
.form-row textarea[b-v0a12njgz6] {
    padding: 12px 12px;
    font-size: 16px;
    line-height: 1.3;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    /* Strip iOS default styling so border-radius/padding actually apply. */
    -webkit-appearance: none;
    appearance: none;
}

/* Native dropdowns need a visible chevron once we strip the default arrow. */
.form-row select[b-v0a12njgz6] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23555' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    padding-right: 36px;
}

.form-row input:focus[b-v0a12njgz6],
.form-row select:focus[b-v0a12njgz6],
.form-row textarea:focus[b-v0a12njgz6] {
    outline: 2px solid #2196F3;
    outline-offset: 1px;
    border-color: #2196F3;
}

/* Mobile-first: the split row (price + volume) stacks vertically. The
   horizontal layout only kicks in at the tablet breakpoint below. */
.form-row-split[b-v0a12njgz6] {
    flex-direction: column;
    gap: 14px;
}

.form-row-split > div[b-v0a12njgz6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-row-inline[b-v0a12njgz6] {
    flex-direction: row;
    align-items: center;
}

/* Touch-friendly checkbox: scale up the native control and give the label a
   generous tap area. */
.toggle-inline[b-v0a12njgz6] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 0;
    min-height: 44px;
}

.toggle-inline input[type="checkbox"][b-v0a12njgz6] {
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
}

.optional-section[b-v0a12njgz6] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 14px 4px;
    margin: 12px 0;
}

.optional-section legend[b-v0a12njgz6] {
    font-size: 13px;
    color: #666;
    padding: 0 6px;
    font-weight: 600;
}

.req[b-v0a12njgz6] {
    color: #d32f2f;
    margin-left: 2px;
}

/* Mobile-first action bar: full-width stacked buttons with the primary CTA
   on top so the thumb naturally lands on it. */
.form-actions[b-v0a12njgz6] {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    margin-top: 20px;
}

.primary-btn[b-v0a12njgz6],
.ghost-btn[b-v0a12njgz6] {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    border-radius: 8px;
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
}

.primary-btn[b-v0a12njgz6] {
    background: #2196F3;
    color: #fff;
    border: none;
    font-weight: 600;
}

.primary-btn:hover:not(:disabled)[b-v0a12njgz6],
.primary-btn:active:not(:disabled)[b-v0a12njgz6] {
    background: #1976D2;
}

.primary-btn:disabled[b-v0a12njgz6] {
    background: #ccc;
    cursor: not-allowed;
}

.ghost-btn[b-v0a12njgz6] {
    background: transparent;
    color: #555;
    border: 1px solid #d0d0d0;
    font-weight: 500;
}

.ghost-btn:hover[b-v0a12njgz6],
.ghost-btn:active[b-v0a12njgz6] {
    background: #f5f5f5;
}

.loading-line[b-v0a12njgz6] {
    color: #666;
    font-size: 14px;
    margin: 0;
}

.warning-line[b-v0a12njgz6] {
    color: #d32f2f;
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
}

.error-line[b-v0a12njgz6] {
    color: #d32f2f;
    font-size: 14px;
    margin: 12px 0;
    padding: 10px 12px;
    background: #ffebee;
    border-radius: 6px;
    line-height: 1.4;
}

/* Inline Blazor ValidationMessage styling (default class is .validation-message) */
[b-v0a12njgz6] .validation-message {
    color: #d32f2f;
    font-size: 13px;
}

/* ── Success state ───────────────────────────────────────────────────────── */
.success-box[b-v0a12njgz6] {
    text-align: center;
    padding: 16px;
}

.success-box h2[b-v0a12njgz6] {
    color: #2e7d32;
    font-size: 26px;
    margin: 0 0 12px;
}

.success-box p[b-v0a12njgz6] {
    color: #333;
    line-height: 1.5;
    font-size: 15px;
}

.success-actions[b-v0a12njgz6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    align-items: stretch;
}

.primary-link[b-v0a12njgz6] {
    color: #2196F3;
    text-decoration: none;
    font-weight: 600;
    padding: 12px;
    border-radius: 8px;
    background: #e3f2fd;
    display: inline-block;
}

.primary-link:hover[b-v0a12njgz6],
.primary-link:active[b-v0a12njgz6] {
    background: #bbdefb;
    text-decoration: none;
}

/* ── Tablet / desktop: restore the original centered card layout ───────── */
@media (min-width: 600px) {
    .add-beerplace-form[b-v0a12njgz6] {
        max-width: 640px;
        margin: 24px auto;
        padding: 24px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .add-beerplace-form h2[b-v0a12njgz6] {
        font-size: 1.5rem;
    }

    /* Side-by-side price + volume. */
    .form-row-split[b-v0a12njgz6] {
        flex-direction: row;
        gap: 12px;
    }

    .form-row-split > div[b-v0a12njgz6] {
        flex: 1;
    }

    /* Action bar reverts to the conventional right-aligned, inline pair with
       "Avbryt" first and the primary CTA last. */
    .form-actions[b-v0a12njgz6] {
        flex-direction: row;
        justify-content: flex-end;
        gap: 8px;
    }

    .primary-btn[b-v0a12njgz6],
    .ghost-btn[b-v0a12njgz6] {
        width: auto;
        min-height: 0;
        padding: 10px 20px;
        font-size: 15px;
    }

    .success-actions[b-v0a12njgz6] {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .primary-link[b-v0a12njgz6] {
        background: transparent;
        padding: 0;
    }
}

/* /Components/Shared/EditUserBeerPlaceForm.razor.rz.scp.css */
/* Shared submission form styling — DUPLICATED from
   AddUserBeerPlaceForm.razor.css.

   Reason: Blazor CSS isolation scopes selectors to a single component, so
   AddUserBeerPlaceForm's stylesheet does NOT cover elements rendered by
   EditUserBeerPlaceForm even though they use the same class names. This
   file keeps the "Editere utested" form looking identical to the
   "Registrer nytt utested" form without going through global CSS.

   Keep this file in sync with AddUserBeerPlaceForm.razor.css. */

/* Shared submission form styling.
   Mobile-first: defaults target a narrow screen (no card chrome, edge-to-edge
   inputs, 16px font to avoid iOS auto-zoom, full-width tap-friendly buttons).
   The desktop card look is restored via a min-width: 600px media query at the
   bottom of this file. */

.add-beerplace-form[b-2t66lhg1vx] {
    /* Edge-to-edge on phones — the card chrome only kicks in on tablets+. */
    margin: 0;
    padding: 16px;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.add-beerplace-form h2[b-2t66lhg1vx] {
    margin: 0 0 8px;
    color: #333;
    font-size: 1.25rem;
}

.form-intro[b-2t66lhg1vx] {
    color: #666;
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.4;
}

.form-row[b-2t66lhg1vx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.form-row label[b-2t66lhg1vx] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* 16px font-size on inputs prevents iOS Safari from auto-zooming the page
   when the user focuses a field. Larger padding gives ~48px tap targets. */
.form-row input[b-2t66lhg1vx],
.form-row select[b-2t66lhg1vx],
.form-row textarea[b-2t66lhg1vx] {
    padding: 12px 12px;
    font-size: 16px;
    line-height: 1.3;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    /* Strip iOS default styling so border-radius/padding actually apply. */
    -webkit-appearance: none;
    appearance: none;
}

/* Native dropdowns need a visible chevron once we strip the default arrow. */
.form-row select[b-2t66lhg1vx] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23555' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    padding-right: 36px;
}

.form-row input:focus[b-2t66lhg1vx],
.form-row select:focus[b-2t66lhg1vx],
.form-row textarea:focus[b-2t66lhg1vx] {
    outline: 2px solid #2196F3;
    outline-offset: 1px;
    border-color: #2196F3;
}

/* Mobile-first: the split row (price + volume) stacks vertically. The
   horizontal layout only kicks in at the tablet breakpoint below. */
.form-row-split[b-2t66lhg1vx] {
    flex-direction: column;
    gap: 14px;
}

.form-row-split > div[b-2t66lhg1vx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-row-inline[b-2t66lhg1vx] {
    flex-direction: row;
    align-items: center;
}

/* Touch-friendly checkbox: scale up the native control and give the label a
   generous tap area. */
.toggle-inline[b-2t66lhg1vx] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 0;
    min-height: 44px;
}

.toggle-inline input[type="checkbox"][b-2t66lhg1vx] {
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
}

/* Closure report ("Utestedet eksisterer ikke lenger"). Visually separated and
   tinted red because ticking it disables the rest of the edit form. */
.toggle-closed[b-2t66lhg1vx] {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid #f0c0c0;
    border-radius: 8px;
    background: #fdf3f3;
    color: #b71c1c;
    font-weight: 600;
}

input:disabled[b-2t66lhg1vx],
select:disabled[b-2t66lhg1vx],
textarea:disabled[b-2t66lhg1vx],
button:disabled[b-2t66lhg1vx] {
    opacity: 0.5;
}

.optional-section[b-2t66lhg1vx] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 14px 4px;
    margin: 12px 0;
}

.optional-section legend[b-2t66lhg1vx] {
    font-size: 13px;
    color: #666;
    padding: 0 6px;
    font-weight: 600;
}

.req[b-2t66lhg1vx] {
    color: #d32f2f;
    margin-left: 2px;
}

/* Mobile-first action bar: full-width stacked buttons with the primary CTA
   on top so the thumb naturally lands on it. */
.form-actions[b-2t66lhg1vx] {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    margin-top: 20px;
}

.primary-btn[b-2t66lhg1vx],
.ghost-btn[b-2t66lhg1vx] {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    border-radius: 8px;
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
}

.primary-btn[b-2t66lhg1vx] {
    background: #2196F3;
    color: #fff;
    border: none;
    font-weight: 600;
}

.primary-btn:hover:not(:disabled)[b-2t66lhg1vx],
.primary-btn:active:not(:disabled)[b-2t66lhg1vx] {
    background: #1976D2;
}

.primary-btn:disabled[b-2t66lhg1vx] {
    background: #ccc;
    cursor: not-allowed;
}

.ghost-btn[b-2t66lhg1vx] {
    background: transparent;
    color: #555;
    border: 1px solid #d0d0d0;
    font-weight: 500;
}

.ghost-btn:hover[b-2t66lhg1vx],
.ghost-btn:active[b-2t66lhg1vx] {
    background: #f5f5f5;
}

.loading-line[b-2t66lhg1vx] {
    color: #666;
    font-size: 14px;
    margin: 0;
}

.warning-line[b-2t66lhg1vx] {
    color: #d32f2f;
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
}

.error-line[b-2t66lhg1vx] {
    color: #d32f2f;
    font-size: 14px;
    margin: 12px 0;
    padding: 10px 12px;
    background: #ffebee;
    border-radius: 6px;
    line-height: 1.4;
}

/* Inline Blazor ValidationMessage styling (default class is .validation-message) */
[b-2t66lhg1vx] .validation-message {
    color: #d32f2f;
    font-size: 13px;
}

/* ── Success state ───────────────────────────────────────────────────────── */
.success-box[b-2t66lhg1vx] {
    text-align: center;
    padding: 16px;
}

.success-box h2[b-2t66lhg1vx] {
    color: #2e7d32;
    font-size: 26px;
    margin: 0 0 12px;
}

.success-box p[b-2t66lhg1vx] {
    color: #333;
    line-height: 1.5;
    font-size: 15px;
}

.success-actions[b-2t66lhg1vx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    align-items: stretch;
}

.primary-link[b-2t66lhg1vx] {
    color: #2196F3;
    text-decoration: none;
    font-weight: 600;
    padding: 12px;
    border-radius: 8px;
    background: #e3f2fd;
    display: inline-block;
}

.primary-link:hover[b-2t66lhg1vx],
.primary-link:active[b-2t66lhg1vx] {
    background: #bbdefb;
    text-decoration: none;
}

/* ── Tablet / desktop: restore the original centered card layout ───────── */
@media (min-width: 600px) {
    .add-beerplace-form[b-2t66lhg1vx] {
        max-width: 640px;
        margin: 24px auto;
        padding: 24px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .add-beerplace-form h2[b-2t66lhg1vx] {
        font-size: 1.5rem;
    }

    /* Side-by-side price + volume. */
    .form-row-split[b-2t66lhg1vx] {
        flex-direction: row;
        gap: 12px;
    }

    .form-row-split > div[b-2t66lhg1vx] {
        flex: 1;
    }

    /* Action bar reverts to the conventional right-aligned, inline pair with
       "Avbryt" first and the primary CTA last. */
    .form-actions[b-2t66lhg1vx] {
        flex-direction: row;
        justify-content: flex-end;
        gap: 8px;
    }

    .primary-btn[b-2t66lhg1vx],
    .ghost-btn[b-2t66lhg1vx] {
        width: auto;
        min-height: 0;
        padding: 10px 20px;
        font-size: 15px;
    }

    .success-actions[b-2t66lhg1vx] {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .primary-link[b-2t66lhg1vx] {
        background: transparent;
        padding: 0;
    }
}