/* /Areas/Admin/Components/Categories/CategoryTreeNode.razor.rz.scp.css */
.hide-tree-arrow[b-u1qqf1z8kh]  .mud-treeview-item-arrow {
    visibility: hidden;
    pointer-events: none; /* Prevents clicking the invisible space */
}
/* /Areas/Admin/Components/LanguageMenu.razor.rz.scp.css */
.language-links[b-twfa9hxldg] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
}

.language-links a[b-twfa9hxldg] {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

.language-links a:hover[b-twfa9hxldg] {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

.language-links-sep[b-twfa9hxldg] {
    color: rgba(255, 255, 255, 0.25);
}
/* /Areas/Admin/Components/StatCard.razor.rz.scp.css */
@keyframes fadeSlideUp-b-yqmus6g6am {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* stat-link / stat-card must be on plain HTML elements rendered by this component
   so Blazor CSS isolation adds the b-xxxx scoping attribute. */

.stat-link[b-yqmus6g6am] {
    display: block;
    text-decoration: none;
    color: inherit;
}

.stat-card[b-yqmus6g6am] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    transition: box-shadow 0.18s ease, border-color 0.18s ease,
    border-top-color 0.18s ease, transform 0.18s ease;
}

/* ── Primary (hero numbers) ─────────────────────────────────────────────────── */

.stat-card--primary[b-yqmus6g6am] {
    border-top: 3px solid transparent;
    animation: fadeSlideUp-b-yqmus6g6am 0.35s ease both;
}

.stat-link:hover .stat-card--primary[b-yqmus6g6am] {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border-top-color: var(--accent);
}

/* ── Secondary (supporting metrics) ─────────────────────────────────────────── */

.stat-card--secondary[b-yqmus6g6am] {
    animation: fadeSlideUp-b-yqmus6g6am 0.35s ease both;
}

.stat-link:hover .stat-card--secondary[b-yqmus6g6am] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: var(--mud-palette-action-disabled);
}

/* ── Alert (failed jobs, data quality issues) ────────────────────────────────── */

.stat-card--alert[b-yqmus6g6am] {
    border-color: color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 3%, transparent);
}

.stat-link:hover .stat-card--alert[b-yqmus6g6am] {
    border-color: color-mix(in srgb, var(--mud-palette-error) 50%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
}

/* ── Icon circle ─────────────────────────────────────────────────────────────── */

/* Sized icon container — no MudBlazor equivalent; background set via inline style */
.stat-icon-wrap[b-yqmus6g6am] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    flex-shrink: 0;
}
/* /Areas/Admin/Pages/Account/Login.razor.rz.scp.css */
.login-page[b-w9wmx1ja1m] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e2640 45%, #1a3154 100%);
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

.login-page[b-w9wmx1ja1m]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--mud-palette-info) 8%, transparent) 0%, transparent 50%);
    pointer-events: none;
}

.login-card[b-w9wmx1ja1m] {
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    color: rgba(255, 255, 255, 0.9);
    animation: card-in-b-w9wmx1ja1m 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 1;
}

@keyframes card-in-b-w9wmx1ja1m {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-brand[b-w9wmx1ja1m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.75rem 2rem 0;
}

.brand-mark[b-w9wmx1ja1m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-info));
    border-radius: 10px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.login-body[b-w9wmx1ja1m] {
    padding: 1.5rem 2rem 2rem;
}

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

.field-group[b-w9wmx1ja1m] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.field-label[b-w9wmx1ja1m] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.01em;
}

.login-form[b-w9wmx1ja1m]  .field-input {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0.6875rem 0.875rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.9);
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

.login-form[b-w9wmx1ja1m]  .field-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.login-form[b-w9wmx1ja1m]  .field-input:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.login-form[b-w9wmx1ja1m]  .field-input:focus {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.remember-label[b-w9wmx1ja1m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    user-select: none;
}

/* InputCheckbox is a Blazor component — class= doesn't get b-xxxx; use ::deep from scoped parent */
.remember-label[b-w9wmx1ja1m]  .remember-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
    flex-shrink: 0;
}
/* /Areas/Admin/Pages/Dashboard.razor.rz.scp.css */
/* Left-border accent on section headings — no MudBlazor equivalent */
.section-header[b-dghwvlijhw] {
    padding-left: 10px;
    border-left: 3px solid var(--mud-palette-primary);
}

/* .table-wrap, which wraps the tables below, lives in app.css: it is shared with
   the search index page, and its companion rule clipping the table's corners can
   never be scoped anyway (CSS isolation does not reach a child component's own
   rendered markup). */
/* /Areas/Admin/Pages/Leaflet/LeafletValidate.razor.rz.scp.css */
/* ── Full-viewport flex layout ──────────────────────────────────────────────
   validate-fill fills all remaining height in the MudMainContent flex column
   (established by app.css on .mud-main-content / .mud-main-content > .mud-container).
   No viewport-height magic numbers needed. */

.validate-fill[b-7xgjp8v1nx] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Named grid areas (not DOM order) drive both the desktop layout — header
   spans only the left column's width, so the right column's row height isn't
   reduced by it — and the mobile reorder below, with no markup duplication. */
.validate-split[b-7xgjp8v1nx] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(320px, 38%) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header right"
        "left   right";
    gap: 16px;
    overflow: hidden;
}

.validate-header[b-7xgjp8v1nx] {
    grid-area: header;
}

/* Left column: header shrinks to content, products panel fills the rest */
.validate-left[b-7xgjp8v1nx] {
    grid-area: left;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* PageHeader + page nav card — never grow, always shrink to natural height */
.validate-left-top[b-7xgjp8v1nx] {
    flex-shrink: 0;
}

.products-panel[b-7xgjp8v1nx] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px; /* compensate for scrollbar width */
    padding-bottom: 8px;
}

/* Right column: image fills the full column height */
.validate-right[b-7xgjp8v1nx] {
    grid-area: right;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* container-type: size makes this element a CSS containment context.
   Children can then use cqh (container-query height) units to reference
   this element's definite flex height, breaking the circular dependency
   that prevents max-height: 100% from resolving on the image container. */
.page-image-sticky[b-7xgjp8v1nx] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    container-type: size;
}

/* Shrink-to-fit wrapper so bbox % overlays align with the rendered image.
   line-height: 0 removes the inline-block descender gap below <img>. */
.page-image-container[b-7xgjp8v1nx] {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

/* 100cqh = 100% of the nearest container-type:size ancestor (.page-image-sticky).
   This correctly caps the image height to the available column space. */
.page-image-container img[b-7xgjp8v1nx] {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100cqh;
}

/* Each product bounding-box overlay drawn on top of the image.
   Position/size come from inline style (dynamic % values). Clickable to select + scroll. */
.bbox-overlay[b-7xgjp8v1nx] {
    position: absolute;
    box-sizing: border-box;
    border: 3px solid color-mix(in srgb, var(--mud-palette-primary) 85%, transparent);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.bbox-overlay:hover[b-7xgjp8v1nx] {
    border-color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

/* Highlighted state when its product card is selected — fixed deep blue, intentional design choice */
.bbox-selected[b-7xgjp8v1nx] {
    border-color: #1e40af;
    background-color: rgba(30, 64, 175, 0.18);
    box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.55), 0 0 14px 3px rgba(30, 64, 175, 0.4);
    z-index: 2;
}

/* Number badge anchored to the top-left corner of each box */
.bbox-num[b-7xgjp8v1nx] {
    position: absolute;
    top: -1px;
    left: -1px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: var(--mud-palette-primary);
    border-bottom-right-radius: 6px;
}

.bbox-selected .bbox-num[b-7xgjp8v1nx] {
    background-color: #1e40af;
}

/* Date pickers colored by whether price validity matches leaflet validity */
.date-valid[b-7xgjp8v1nx]  .mud-input-root {
    background-color: color-mix(in srgb, var(--mud-palette-success) 7%, transparent);
}

.date-valid[b-7xgjp8v1nx]  .mud-input-outlined-border {
    border-color: var(--mud-palette-success) !important;
}

.date-warning[b-7xgjp8v1nx]  .mud-input-root {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 7%, transparent);
}

.date-warning[b-7xgjp8v1nx]  .mud-input-outlined-border {
    border-color: var(--mud-palette-warning) !important;
}

/* Matching number chip on each product card header */
.product-num[b-7xgjp8v1nx] {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: var(--mud-palette-primary);
    border-radius: 11px;
}

/* Manual-add indicator — same pill shape, info color */
.product-num-manual[b-7xgjp8v1nx] {
    background-color: var(--mud-palette-info);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 3-column grid for the page navigation card */
.page-nav-grid[b-7xgjp8v1nx] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
}

.page-nav-left[b-7xgjp8v1nx] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
}

.page-nav-center[b-7xgjp8v1nx] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-nav-right[b-7xgjp8v1nx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* Wrapper div in this component gets the scoped attribute, ::deep pierces into MudNumericField */
.page-jump-wrap[b-7xgjp8v1nx]  input {
    text-align: center;
}

/* ── Mobile: stack image above the product list instead of a fixed 2-pane split ──
   The desktop layout is a full-viewport split with independently scrolling panes
   (no page scroll). That only works with a wide image column; below this width the
   image shrinks to unusably small. Switch to normal single-column page scroll with
   the page image (bounded height, so it stays legible but doesn't push the product
   list too far down) on top, product list below. */
@media (max-width: 900px) {
    .validate-fill[b-7xgjp8v1nx] {
        flex: initial;
        min-height: 0;
        display: block;
    }

    /* Single column — same three grid items as desktop (header/left/right),
       just re-stacked via grid-template-areas: header, then image, then the
       nav+products list. No DOM reordering needed. */
    .validate-split[b-7xgjp8v1nx] {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "header"
            "right"
            "left";
        overflow: visible;
        gap: 12px;
    }

    .validate-left[b-7xgjp8v1nx],
    .validate-right[b-7xgjp8v1nx] {
        overflow: visible;
        min-height: 0;
    }

    .products-panel[b-7xgjp8v1nx] {
        overflow-y: visible;
        flex: initial;
        padding-right: 0;
    }

    /* container-type:size (used for the cqh sizing below) needs a definite block
       height from a flex/grid ancestor — .validate-right no longer fills a flex
       column here, so fall back to a plain viewport-relative cap instead. */
    .page-image-sticky[b-7xgjp8v1nx] {
        container-type: normal;
    }

    /* Well-known flexbox quirk: .mud-main-content > .mud-container (app.css) is
       both the scrolling element (overflow-y:auto) AND a flex column — in that
       combination, a scrolling flex container's own end-side padding (bottom,
       for column direction) is excluded from the scrollable area entirely, so
       the page's own 16px bottom padding never reserves any space after our
       last element. Confirmed live: scrollTop maxes out with the button's
       bottom edge flush against the viewport edge, 0px to spare. Restore the
       breathing room on our own last child instead of touching the shared
       global container. */
    .add-product-wrap[b-7xgjp8v1nx] {
        margin-bottom: 16px;
    }
}