/* /Components/Layout/AdminLayout.razor.rz.scp.css */
.admin-container[b-bfoyzk7exn] {
    display: flex;
    min-height: 100vh;
    background-color: #F9FAFB; /* Soft light gray for main content */
    font-family: 'Manrope', sans-serif;
    color: #111827;
}

.admin-sidebar[b-bfoyzk7exn] {
    width: 260px;
    background-color: #FFFFFF; /* Clean white sidebar */
    border-right: 1px solid #E5E7EB; /* Subtle border */
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 100;
    transition: transform 0.25s ease;
}

/* Hamburger button — hidden on desktop, shown on mobile */
.sidebar-toggle[b-bfoyzk7exn] {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-right: 8px;
    color: #111827;
}

/* Dark backdrop behind the open drawer on mobile */
.sidebar-overlay[b-bfoyzk7exn] {
    display: none;
}

.sidebar-header[b-bfoyzk7exn] {
    padding: 24px;
    font-family: 'Caveat', cursive;
    font-size: 1.8rem; /* Scaled down to fit on one line */
    font-weight: 700;
    color: #111827;
    border-bottom: 1px solid #E5E7EB;
    white-space: nowrap;
}

.sidebar-nav[b-bfoyzk7exn] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.nav-link[b-bfoyzk7exn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #4B5563; /* Medium gray for unselected */
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.nav-link:hover[b-bfoyzk7exn] {
    background-color: #F3F4F6;
    color: #111827;
}

[b-bfoyzk7exn] .nav-link.active {
    background-color: #111827;
    color: #FFFFFF;
}

[b-bfoyzk7exn] .nav-link.active .material-icons-outlined {
    color: #FFFFFF;
}

.material-icons-outlined[b-bfoyzk7exn] {
    font-size: 20px;
}

.admin-main[b-bfoyzk7exn] {
    flex: 1;
    margin-left: 260px;
    display: flex;
    flex-direction: column;
}

.admin-topbar[b-bfoyzk7exn] {
    height: 72px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 90;
}

.topbar-title[b-bfoyzk7exn] {
    font-weight: 700;
    font-size: 1.1rem;
    color: #111827;
}

.topbar-actions[b-bfoyzk7exn] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-btn[b-bfoyzk7exn] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #FFFFFF;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.profile-btn:hover[b-bfoyzk7exn] {
    background-color: #374151;
}

.admin-content[b-bfoyzk7exn] {
    padding: 32px;
    flex: 1;
    background-color: transparent;
}

/* ===== Mobile: sidebar becomes an off-canvas drawer ===== */
@media (max-width: 768px) {
    .admin-sidebar[b-bfoyzk7exn] {
        transform: translateX(-100%);
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.15);
    }

    .admin-sidebar.open[b-bfoyzk7exn] {
        transform: translateX(0);
    }

    .admin-main[b-bfoyzk7exn] {
        margin-left: 0;
    }

    .sidebar-toggle[b-bfoyzk7exn] {
        display: flex;
    }

    .sidebar-overlay.show[b-bfoyzk7exn] {
        display: block;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 95;
    }

    .admin-topbar[b-bfoyzk7exn] {
        padding: 0 16px;
    }

    .admin-content[b-bfoyzk7exn] {
        padding: 20px 16px;
    }

    /* Reach into the child page content (@Body) with ::deep to reshape its
       data tables into stacked cards — far easier to read than a wide table
       squeezed onto a phone. Applies to every admin page at once. */
    .admin-content[b-bfoyzk7exn]  table {
        min-width: 0;
        display: block;
    }

    .admin-content[b-bfoyzk7exn]  thead {
        display: none; /* column headers make no sense in card form */
    }

    .admin-content[b-bfoyzk7exn]  tbody,
    .admin-content[b-bfoyzk7exn]  tfoot {
        display: block;
    }

    .admin-content[b-bfoyzk7exn]  tr {
        display: block;
        border: 1px solid #E5E7EB !important;
        border-radius: 10px;
        background: #FFFFFF;
        padding: 12px 14px !important;
        margin-bottom: 12px;
    }

    .admin-content[b-bfoyzk7exn]  td {
        display: block;
        width: auto !important;
        padding: 3px 0 !important;
        border: none !important;
        text-align: left !important;
        white-space: normal !important;
    }

    /* The first cell (order #, product name, …) reads as the card title. */
    .admin-content[b-bfoyzk7exn]  td:first-child {
        font-weight: 700 !important;
        font-size: 1rem;
        margin-bottom: 4px;
    }

    /* Product editor's 2-column layout stacks into one column. */
    .admin-content[b-bfoyzk7exn]  .product-form-container {
        grid-template-columns: 1fr;
    }

    /* Modal dialogs fit the viewport. */
    .admin-content[b-bfoyzk7exn]  .modal-content {
        width: 92vw;
        max-width: 92vw;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.footer-container[b-mx7k31cp11] {
    background-color: #ffffff;
    color: #111111;
    margin-top: 120px;
    padding: 40px 5% 110px 5%;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.85rem;
    font-weight: 400;
    border-top: 1px solid #e0e0e0;
}

.footer-inner[b-mx7k31cp11] {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}

.footer-left[b-mx7k31cp11] {
    flex: 1;
    min-width: 300px;
}

.footer-logo[b-mx7k31cp11] {
    margin-bottom: 30px;
}

.footer-info[b-mx7k31cp11] {
    font-size: 0.85rem;
    color: #111111;
    line-height: 1.8;
}

.footer-info-text[b-mx7k31cp11] {
    margin: 0 0 15px 0;
}

.footer-copyright[b-mx7k31cp11] {
    margin: 0;
    text-transform: uppercase;
}
.footer-right[b-mx7k31cp11] {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
    min-width: 300px;
    font-weight: 600;
}

.footer-column[b-mx7k31cp11] {
    flex: 1;
    min-width: 180px;
}

.footer-heading[b-mx7k31cp11] {
    font-size: 0.95rem;
    font-weight: 800;
    margin-bottom: 22px;
    padding-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #000000;
}

.footer-list[b-mx7k31cp11] {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 2.2;
}

.footer-list a[b-mx7k31cp11] {
    color: #111111;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.footer-list a:hover[b-mx7k31cp11] {
    color: #666666;
}

.footer-social-icons[b-mx7k31cp11] {
    margin-top: 25px;
    display: flex;
    gap: 10px;
}

.social-icon[b-mx7k31cp11] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #111111;
    color: #111111;
    text-decoration: none;
    transition: all 0.2s ease;
}

.social-icon:hover[b-mx7k31cp11] {
    background-color: #111111;
    color: #ffffff;
    border-color: #111111;
}

.mobile-only-link[b-mx7k31cp11] {
    display: none;
}

/*
    The wordmark has always linked home, but with no hover, no pressed state and no
    focus ring it gave no sign of being clickable, so people didn't try it.

    Deliberately no horizontal padding: navbar.js decides when to collapse the menu
    by comparing the links' right edge against .navbar__center's left edge, and
    widening this anchor would make the menu collapse earlier than intended. Growing
    the hit area vertically costs nothing — the bar is already 80px tall.
*/
/*
    Give the logo the full height of the bar to be clicked in. It used to be only as
    tall as the wordmark art — 45px inside an 80px bar — so the ~17px band above and
    below it looked like the logo but swallowed the click.

    Two declarations because the centre cell is laid out two different ways: above
    769px app.css takes it out of flow (position: absolute, left: 50%) so the wordmark
    stays optically centred no matter how wide the menu gets, and align-self means
    nothing to an absolutely-positioned box — inset does. Below 769px it is a normal
    flex item, where the reverse is true. Each declaration is inert in the other mode.

    Not widened sideways: .navbar__left and .navbar__right carry z-index 2 against
    this cell's z-index 1, so anything reaching past the artwork lands underneath them
    anyway, and forcing it above would put an invisible click-catcher over the search
    and language controls.
*/
[b-mx7k31cp11] .navbar__center {
    align-self: stretch;
    top: 0;
    bottom: 0;
}

[b-mx7k31cp11] .navbar__home {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 44px;
    border-radius: 6px;
}

[b-mx7k31cp11] .navbar__logo-img {
    height: 45px;
    max-width: 100%;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

[b-mx7k31cp11] .navbar__home:hover .navbar__logo-img {
    opacity: 0.55;
}

[b-mx7k31cp11] .navbar__home:active .navbar__logo-img {
    opacity: 0.4;
}

/* Keyboard users only — a mouse click must not leave a ring behind. */
[b-mx7k31cp11] .navbar__home:focus-visible {
    outline: 2px solid var(--color-text-primary);
    outline-offset: 4px;
}

/*
    Make the whole wordmark clickable, not just its middle sliver.

    Above 769px the centre cell is absolutely positioned, so .navbar__left and
    .navbar__right are the only flex items left and both carry flex: 1 — their
    boxes stretch until they meet in the middle of the bar, and their z-index 2
    puts them over the logo's z-index 1. A transparent box still swallows clicks,
    so the only part of the wordmark that reached the link was the 20px flex gap
    where the two boxes stop short of each other.

    Muting the containers rather than raising the logo above them keeps the fix
    off the geometry navbar.js measures (.navbar__center's left edge decides when
    the menu collapses) and avoids laying an invisible catcher over the search and
    language controls. Each direct child hugs its own content, so re-arming them
    restores exactly the real controls and nothing of the empty space between.
*/
@media (min-width: 769px) {
    [b-mx7k31cp11] .navbar__left,
    [b-mx7k31cp11] .navbar__right {
        pointer-events: none;
    }

    [b-mx7k31cp11] .navbar__left > *,
    [b-mx7k31cp11] .navbar__right > * {
        pointer-events: auto;
    }
}

/* --- Mobile Layout --- */
@media (max-width: 767px) {
    [b-mx7k31cp11] .navbar__logo-img {
        height: 28px;
    }
    
    .footer-container[b-mx7k31cp11] {
        padding: 40px 5% 40px 5%;
    }
    
    .footer-inner[b-mx7k31cp11] {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    
    .footer-left[b-mx7k31cp11], .footer-right[b-mx7k31cp11], .footer-column[b-mx7k31cp11] {
        display: contents; /* Unbox everything so inner elements are direct children of .footer-inner */
    }
    
    .footer-heading[b-mx7k31cp11] {
        display: none; /* Hide headings on mobile */
    }
    
    .footer-social-icons[b-mx7k31cp11] {
        order: 1;
        margin-top: 0;
        margin-bottom: 30px;
    }
    
    .main-links[b-mx7k31cp11] {
        order: 2;
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 40px;
        border-top: 1px solid #e0e0e0;
    }
    
    .main-links li[b-mx7k31cp11] {
        border-bottom: 1px solid #e0e0e0;
        padding: 15px 0;
    }
    
    .footer-logo[b-mx7k31cp11] {
        order: 3;
        margin-bottom: 20px;
    }
    
    .footer-info[b-mx7k31cp11] {
        order: 4;
        margin-bottom: 30px;
    }
    
    .legal-links[b-mx7k31cp11] {
        display: none !important;
    }
    
    .legal-column[b-mx7k31cp11] {
        display: none !important;
    }
    
    .mobile-only-link[b-mx7k31cp11] {
        display: block;
    }
}

/* ========== SEARCH OVERLAY ========== */
.search-overlay[b-mx7k31cp11] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.search-overlay.open[b-mx7k31cp11] {
    opacity: 1;
    pointer-events: auto;
}

.search-overlay__title[b-mx7k31cp11] {
    font-family: 'Caveat', cursive;
    font-size: clamp(2.8rem, 5.5vw, 4.5rem);
    font-weight: 1000;
    color: #111111;
    letter-spacing: 2px;
    margin-bottom: 2.5rem;
    text-transform: uppercase;
    text-align: center;
    padding-right: 43px; /* Offset for the search icon width to center over the line */
}

.search-overlay__input-wrapper[b-mx7k31cp11] {
    display: flex;
    align-items: flex-end;
    width: 90%;
    max-width: 600px;
    gap: 12px;
}

.search-overlay__main-column[b-mx7k31cp11] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.search-overlay__input-container[b-mx7k31cp11] {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.search-overlay__input[b-mx7k31cp11] {
    width: 100%;
    flex: 1;
    border: none;
    border-bottom: 1.5px solid #111;
    background: transparent;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.1rem;
    color: #111;
    outline: none;
    padding: 8px 0;
}

.search-overlay__icon[b-mx7k31cp11] {
    color: #111;
    font-size: 28px;
    margin-left: 15px;
    padding-bottom: 8px;
    font-weight: 500;
}

.search-overlay__input[b-mx7k31cp11]::placeholder {
    color: #aaa;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
}

.search-overlay__btn[b-mx7k31cp11] {
    background: none;
    border: none;
    color: #111;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    transition: opacity 0.2s ease;
}

.search-overlay__btn:hover[b-mx7k31cp11] {
    opacity: 0.5;
}

.search-overlay__btn .material-icons-outlined[b-mx7k31cp11] {
    font-size: 28px;
    font-weight: 300;
}

.search-overlay__btn--close[b-mx7k31cp11] {
    position: absolute;
    top: 2rem;
    right: 2rem;
}

.search-overlay__btn--close .material-icons-outlined[b-mx7k31cp11] {
    font-size: 40px;
}

.search-overlay__btn-go[b-mx7k31cp11] {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: #111;
    letter-spacing: 1px;
}

/* Search Results */
.search-overlay__results[b-mx7k31cp11] {
    display: flex;
    width: 90%;
    max-width: 800px;
    margin-top: 3rem;
    gap: 2rem;
}

.search-overlay__results-col[b-mx7k31cp11] {
    flex: 1;
}

.search-overlay__results-title[b-mx7k31cp11] {
    font-family: 'Manrope', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    color: #111;
}

.search-overlay__suggest-list[b-mx7k31cp11] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-overlay__suggest-list li[b-mx7k31cp11] {
    padding: 6px 0;
    cursor: pointer;
    color: #555;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.search-overlay__suggest-list li:hover[b-mx7k31cp11] {
    color: #111;
}

.search-overlay__products[b-mx7k31cp11] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-result-item[b-mx7k31cp11] {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: #111;
    transition: opacity 0.2s ease;
}

.search-result-item:hover[b-mx7k31cp11] {
    opacity: 0.7;
}

.search-result-img[b-mx7k31cp11] {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.search-result-info[b-mx7k31cp11] {
    display: flex;
    flex-direction: column;
}

.search-result-name[b-mx7k31cp11] {
    font-size: 0.85rem;
    font-weight: 500;
}

.search-result-price[b-mx7k31cp11] {
    font-size: 0.8rem;
    color: #888;
    margin-top: 2px;
}

.search-result-empty[b-mx7k31cp11] {
    color: #888;
    font-size: 0.9rem;
}

/* --- Mobile Search Overlay --- */
@media (max-width: 767px) {
    .search-overlay__title[b-mx7k31cp11] {
        font-size: 1.8rem;
        margin-bottom: 1rem;
        padding-right: 0;
    }
    
    .search-overlay__btn--close[b-mx7k31cp11] {
        top: 1rem;
        right: 1rem;
    }
    
    .search-overlay__btn--close .material-icons-outlined[b-mx7k31cp11] {
        font-size: 24px;
    }
    
    .search-overlay__input[b-mx7k31cp11] {
        font-size: 0.85rem;
        padding: 4px 0;
    }
    
    .search-overlay__input[b-mx7k31cp11]::placeholder {
        font-size: 0.85rem;
    }
    
    .search-overlay__icon[b-mx7k31cp11] {
        font-size: 20px;
        margin-left: 8px;
    }
    
    .search-overlay__results[b-mx7k31cp11] {
        flex-direction: column;
        gap: 1.2rem;
        margin-top: 1.5rem;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ==========================================================================
   Haus of Maar custom reconnection UI
   - connecting / retrying / paused -> thin running bar pinned to the top edge
   - failed / resume-failed         -> bottom snackbar with a brand-colored action
   ========================================================================== */

#components-reconnect-modal[b-quqz16r3j8] {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    max-width: none;
    max-height: none;
    overflow: visible;
    z-index: 3000;
}

#components-reconnect-modal:not([open])[b-quqz16r3j8] {
    display: none;
}

/* --------------------------------------------------------------------------
   Thin running bar (default visible state while a connection is in progress)
   -------------------------------------------------------------------------- */
.reconnect-bar[b-quqz16r3j8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.reconnect-bar[b-quqz16r3j8]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    border-radius: 3px;
    background: linear-gradient(90deg, #111 0%, #666 50%, #fff 100%);
    animation: reconnect-bar-run-b-quqz16r3j8 1.15s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes reconnect-bar-run-b-quqz16r3j8 {
    0% { left: -40%; width: 40%; }
    50% { width: 55%; }
    100% { left: 100%; width: 40%; }
}

.reconnect-sr-only[b-quqz16r3j8] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Bottom snackbar (only when reconnect / resume fails)
   -------------------------------------------------------------------------- */
.reconnect-snackbar[b-quqz16r3j8] {
    display: none;
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    transform: translateX(-50%);
    align-items: center;
    gap: 14px;
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 12px 14px 12px 18px;
    background: rgba(24, 24, 27, 0.96);
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    font-family: inherit;
    animation: reconnect-snackbar-in-b-quqz16r3j8 0.28s cubic-bezier(0.05, 0.7, 0.1, 1) both;
}

.reconnect-snackbar-text[b-quqz16r3j8] {
    display: none;
    font-size: 0.9rem;
    line-height: 1.35;
}

.reconnect-snackbar button[b-quqz16r3j8] {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: underline;
    transition: background-color 0.15s ease;
}

.reconnect-snackbar button:hover[b-quqz16r3j8] {
    background: rgba(255, 255, 255, 0.14);
}

.reconnect-snackbar button:active[b-quqz16r3j8] {
    background: rgba(255, 255, 255, 0.24);
}

#components-seconds-to-next-attempt[b-quqz16r3j8] {
    font-weight: 600;
}

@keyframes reconnect-snackbar-in-b-quqz16r3j8 {
    0% { opacity: 0; transform: translate(-50%, 16px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}

#components-reconnect-modal.components-reconnect-failed .reconnect-bar[b-quqz16r3j8],
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-bar[b-quqz16r3j8] {
    display: none;
}

#components-reconnect-modal.components-reconnect-retrying .reconnect-snackbar[b-quqz16r3j8],
#components-reconnect-modal.components-reconnect-failed .reconnect-snackbar[b-quqz16r3j8],
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-snackbar[b-quqz16r3j8] {
    display: flex;
}

/* Blazor adds .components-reconnect-retrying once an attempt has a wait in front of it,
   so the countdown only ever appears when there is a countdown to show. */
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-retrying-visible[b-quqz16r3j8],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-quqz16r3j8],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-quqz16r3j8] {
    display: inline-block;
}

/* The failed state replaces the retrying copy rather than stacking under it — the runtime
   clears .components-reconnect-retrying on the way in, but be explicit about it. */
#components-reconnect-modal.components-reconnect-failed .components-reconnect-retrying-visible[b-quqz16r3j8],
#components-reconnect-modal.components-reconnect-resume-failed .components-reconnect-retrying-visible[b-quqz16r3j8] {
    display: none;
}
/* /Components/Pages/Admin/Dashboard.razor.rz.scp.css */
.dashboard-header[b-mhw6nmrmch] {
    margin-bottom: 32px;
}

.page-title[b-mhw6nmrmch] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1A1A1A;
    margin: 0 0 8px 0;
}

.page-subtitle[b-mhw6nmrmch] {
    color: rgba(26, 26, 26, 0.6);
    margin: 0;
    font-size: 1rem;
}

.stats-grid[b-mhw6nmrmch] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card[b-mhw6nmrmch] {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(26, 26, 26, 0.05);
    border: 1px solid rgba(26, 26, 26, 0.08);
}

.stat-icon[b-mhw6nmrmch] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon .material-icons-outlined[b-mhw6nmrmch] {
    font-size: 28px;
}

.stat-content[b-mhw6nmrmch] {
    flex: 1;
}

.stat-value[b-mhw6nmrmch] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 4px 0;
}

.stat-label[b-mhw6nmrmch] {
    font-size: 0.875rem;
    color: rgba(26, 26, 26, 0.6);
    margin: 0;
    font-weight: 500;
}

.dashboard-sections[b-mhw6nmrmch] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.section-card[b-mhw6nmrmch] {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(26, 26, 26, 0.05);
    border: 1px solid rgba(26, 26, 26, 0.08);
}

.section-title[b-mhw6nmrmch] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 20px 0;
}

.empty-state[b-mhw6nmrmch] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
    color: rgba(26, 26, 26, 0.4);
}

.empty-icon[b-mhw6nmrmch] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}
/* /Components/Pages/Admin/Products.razor.rz.scp.css */
.page-header[b-sg6w29pnzr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.page-title[b-sg6w29pnzr] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1A1A1A;
    margin: 0 0 8px 0;
}

.page-subtitle[b-sg6w29pnzr] {
    color: rgba(26, 26, 26, 0.6);
    margin: 0;
    font-size: 1rem;
}

.btn-primary[b-sg6w29pnzr] {
    background-color: #1A1A1A;
    color: #FFF8F0;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-primary:hover[b-sg6w29pnzr] {
    background-color: #333333;
}

.table-card[b-sg6w29pnzr] {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(26, 26, 26, 0.05);
    border: 1px solid rgba(26, 26, 26, 0.08);
    overflow: hidden;
}

.table-toolbar[b-sg6w29pnzr] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-box[b-sg6w29pnzr] {
    display: flex;
    align-items: center;
    background-color: #FFF8F0;
    border: 1px solid rgba(26, 26, 26, 0.1);
    border-radius: 8px;
    padding: 8px 16px;
    width: 320px;
}

.search-box .material-icons-outlined[b-sg6w29pnzr] {
    color: rgba(26, 26, 26, 0.5);
    margin-right: 8px;
    font-size: 20px;
}

.search-box input[b-sg6w29pnzr] {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 0.95rem;
    color: #1A1A1A;
}

.btn-outline[b-sg6w29pnzr] {
    background-color: transparent;
    border: 1px solid rgba(26, 26, 26, 0.15);
    color: #1A1A1A;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.data-table[b-sg6w29pnzr] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-sg6w29pnzr] {
    text-align: left;
    padding: 16px 24px;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(26, 26, 26, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
    background-color: #FFF8F0;
}

.data-table td[b-sg6w29pnzr] {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
    color: #1A1A1A;
    font-size: 0.95rem;
    vertical-align: middle;
}

.product-cell[b-sg6w29pnzr] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.product-image[b-sg6w29pnzr] {
    width: 48px;
    height: 48px;
    background-color: #FFF8F0;
    border-radius: 8px;
    border: 1px solid rgba(26, 26, 26, 0.1);
}

.product-name[b-sg6w29pnzr] {
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 4px;
}

.product-sku[b-sg6w29pnzr] {
    font-size: 0.85rem;
    color: rgba(26, 26, 26, 0.6);
}

.badge[b-sg6w29pnzr] {
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge.active[b-sg6w29pnzr] {
    background-color: rgba(21, 128, 61, 0.1);
    color: #15803d;
}

.badge.draft[b-sg6w29pnzr] {
    background-color: rgba(26, 26, 26, 0.08);
    color: rgba(26, 26, 26, 0.7);
}

.btn-icon[b-sg6w29pnzr] {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(26, 26, 26, 0.5);
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.btn-icon:hover[b-sg6w29pnzr] {
    background-color: rgba(26, 26, 26, 0.05);
    color: #1A1A1A;
}

.text-danger:hover[b-sg6w29pnzr] {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
}
/* /Components/Shared/ConfirmModal.razor.rz.scp.css */
.modal-overlay[b-hiwk5270h4] {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10000;
    backdrop-filter: blur(4px);
}
.modal-overlay.open[b-hiwk5270h4] { opacity: 1; pointer-events: auto; }

.modal-container[b-hiwk5270h4] {
    background: white; border-radius: 12px;
    width: 90%; max-width: 400px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transform: translateY(20px) scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 24px; text-align: center;
    font-family: var(--font-primary, system-ui, sans-serif);
}
.modal-overlay.open .modal-container[b-hiwk5270h4] { transform: translateY(0) scale(1); }

.modal-icon[b-hiwk5270h4] {
    width: 56px; height: 56px; border-radius: 50%;
    background: #fee2e2; color: #ef4444;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.modal-icon .material-icons-outlined[b-hiwk5270h4] { font-size: 28px; }

.modal-title[b-hiwk5270h4] { 
    font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; color: #111827; 
}
.modal-message[b-hiwk5270h4] { 
    color: #4b5563; font-size: 0.95rem; margin-bottom: 24px; line-height: 1.5; 
}

.modal-footer[b-hiwk5270h4] { display: flex; gap: 12px; }

.btn-cancel[b-hiwk5270h4] { 
    flex: 1; padding: 10px 16px; border-radius: 8px; 
    background: white; border: 1px solid #d1d5db; color: #374151; 
    font-weight: 600; cursor: pointer; transition: all 0.2s; 
}
.btn-cancel:hover[b-hiwk5270h4] { background: #f3f4f6; border-color: #9ca3af; }

.btn-confirm[b-hiwk5270h4] { 
    flex: 1; padding: 10px 16px; border-radius: 8px; 
    background: #ef4444; border: none; color: white; 
    font-weight: 600; cursor: pointer; transition: all 0.2s; 
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}
.btn-confirm:hover[b-hiwk5270h4] { background: #dc2626; box-shadow: 0 4px 6px rgba(239, 68, 68, 0.3); }
/* /Components/Shared/LoginModal.razor.rz.scp.css */
.login-overlay[b-0dk162u1xr] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.login-overlay.open[b-0dk162u1xr] {
    opacity: 1;
    pointer-events: auto;
}

.login-modal[b-0dk162u1xr] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: 90%;
    max-width: 480px;
    background: #ffffff;
    padding: 3rem 2rem 2rem;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    font-family: 'Manrope', sans-serif;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    border-radius: 4px;
}

.login-modal.open[b-0dk162u1xr] {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.login-modal__close[b-0dk162u1xr] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    cursor: pointer;
    color: #111;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.login-modal__close:hover[b-0dk162u1xr] {
    opacity: 0.6;
}

.login-modal__content[b-0dk162u1xr] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.login-modal__title[b-0dk162u1xr] {
    font-size: 1.8rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 2rem;
    color: #0a0e17;
    letter-spacing: 0.5px;
}

.login-form[b-0dk162u1xr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.input-group[b-0dk162u1xr] {
    position: relative;
    width: 100%;
}

.login-input[b-0dk162u1xr] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
    color: #111;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.login-input[b-0dk162u1xr]::placeholder {
    color: #9ca3af;
}

.login-input:focus[b-0dk162u1xr] {
    outline: none;
    border-color: #111;
}

.password-group[b-0dk162u1xr] {
    display: flex;
    align-items: center;
}

.password-toggle[b-0dk162u1xr] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
}

.btn-signin[b-0dk162u1xr] {
    margin-top: 0.5rem;
    width: 100%;
    padding: 14px;
    background-color: #0a0e17;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-signin:hover[b-0dk162u1xr] {
    opacity: 0.85;
}

.login-actions[b-0dk162u1xr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.checkbox-container[b-0dk162u1xr] {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #6b7280;
}

.checkbox-container input[b-0dk162u1xr] {
    margin-right: 8px;
    accent-color: #0a0e17;
}

.forgot-link[b-0dk162u1xr] {
    color: #0a0e17;
    text-decoration: none;
    font-weight: 500;
}

.forgot-link:hover[b-0dk162u1xr] {
    text-decoration: underline;
}

.login-divider[b-0dk162u1xr] {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 2rem 0;
    color: #4b5563;
    font-size: 0.85rem;
}

.login-divider[b-0dk162u1xr]::before,
.login-divider[b-0dk162u1xr]::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e5e7eb;
}

.login-divider span[b-0dk162u1xr] {
    padding: 0 10px;
}

.signup-promo[b-0dk162u1xr] {
    text-align: center;
    font-size: 0.95rem;
    color: #111;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.social-login[b-0dk162u1xr] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.btn-social[b-0dk162u1xr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
    color: #111;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
}

.btn-social:hover[b-0dk162u1xr] {
    background-color: #f9fafb;
}

.social-icon[b-0dk162u1xr] {
    position: absolute;
    left: 16px;
    width: 20px;
    height: 20px;
}

.login-footer[b-0dk162u1xr] {
    margin-top: 2.5rem;
    text-align: center;
}

.register-link[b-0dk162u1xr] {
    color: #6b7280;
    text-decoration: underline;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.register-link:hover[b-0dk162u1xr] {
    color: #111;
}

@media (max-width: 480px) {
    .login-modal[b-0dk162u1xr] {
        width: 100vw;
        height: 100vh;
        max-width: none;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
        padding: 4rem 1.5rem 2rem;
    }
    
    .login-modal.open[b-0dk162u1xr] {
        transform: none;
    }
}
/* /Components/Shared/ToggleSwitch.razor.rz.scp.css */
.toggle[b-ga8sh5zb6p] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.toggle.is-disabled[b-ga8sh5zb6p] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Hide the native checkbox but keep it accessible/focusable */
.toggle input[b-ga8sh5zb6p] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.track[b-ga8sh5zb6p] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    background: #D1D5DB;
    border-radius: 999px;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.thumb[b-ga8sh5zb6p] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.toggle input:checked + .track[b-ga8sh5zb6p] {
    background: #1A1A1A;
}

.toggle input:checked + .track .thumb[b-ga8sh5zb6p] {
    transform: translateX(18px);
}

.toggle input:focus-visible + .track[b-ga8sh5zb6p] {
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.2);
}

.label-text[b-ga8sh5zb6p] {
    font-size: 0.9rem;
    color: #374151;
}