/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* Styles for the sign-in card only. Shared form pieces (.tp-form, .tp-field,
   .tp-input, .tp-btn...) are global, in wwwroot/css/app.css. */

/* ---- Card ---- */
/* Sits on top of .tp-panel (white card, radius, border); this adds the width cap and a deeper shadow. */
.auth-card[b-ag1v668xd1] {
    width: 100%;
    max-width: 440px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}

/* ---- Heading block ---- */
.auth-head h2[b-ag1v668xd1] {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 600;
}

.auth-head p[b-ag1v668xd1] {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
}

/* ---- Footer note ---- */
.auth-note[b-ag1v668xd1] {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}

/* ---- Mobile ---- */
/* Tighter padding when the layout stacks into one column (see AuthLayout.razor.css, same 860px breakpoint). */
@media (max-width: 860px) {
    .auth-card[b-ag1v668xd1] {
        padding: 28px 22px;
    }
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Layout for the sign-in screen: blue illustration panel on the left, form on the right.
   The card itself is styled in Login.razor.css. */

/* ============ Layout ============ */
.auth[b-bdem0dp7ka] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* ============ Left: brand panel ============ */
.auth-visual[b-bdem0dp7ka] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 48px 64px;
    background: linear-gradient(135deg, var(--brand-bright) 0%, var(--brand-deep) 100%);
}

.auth-logo[b-bdem0dp7ka] {
    align-self: flex-start;
}

    .auth-logo img[b-bdem0dp7ka] {
        display: block;
        height: 48px;
        width: auto;
    }

.auth-art[b-bdem0dp7ka] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .auth-art svg[b-bdem0dp7ka] {
        width: 100%;
        max-width: 520px;
        height: auto;
    }

/* ============ Right: form side ============ */
.auth-form-side[b-bdem0dp7ka] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-tint) 100%);
}

/* ============ Illustration animation (6s loop) ============ */
/* Timeline: scan bar 0-30% -> boxes drop 25-61% -> badge pops 64-72% -> fade out 92-100% */
.anim-scan[b-bdem0dp7ka], .anim-flow[b-bdem0dp7ka], .anim-box-a[b-bdem0dp7ka], .anim-box-b[b-bdem0dp7ka], .anim-box-c[b-bdem0dp7ka], .anim-badge[b-bdem0dp7ka] {
    transform-box: fill-box; /* make transforms use the shape's own box, not the whole SVG */
    transform-origin: center;
}

/* light bar sweeping down the spreadsheet rows */
.anim-scan[b-bdem0dp7ka] {
    animation: tp-scan-b-bdem0dp7ka 6s ease-in-out infinite;
}

@keyframes tp-scan-b-bdem0dp7ka {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    5% {
        opacity: 1;
    }

    25% {
        opacity: 1;
        transform: translateY(124px);
    }

    30%, 100% {
        opacity: 0;
        transform: translateY(124px);
    }
}

/* dashes travelling along the arrow */
.anim-flow[b-bdem0dp7ka] {
    stroke-dasharray: 8 8;
    animation: tp-flow-b-bdem0dp7ka 1s linear infinite;
}

@keyframes tp-flow-b-bdem0dp7ka {
    to {
        stroke-dashoffset: -16;
    }
}

/* boxes dropping onto the stack, one after another */
.anim-box-a[b-bdem0dp7ka] {
    animation: tp-drop-a-b-bdem0dp7ka 6s cubic-bezier(.3, 1.4, .5, 1) infinite;
}

.anim-box-b[b-bdem0dp7ka] {
    animation: tp-drop-b-b-bdem0dp7ka 6s cubic-bezier(.3, 1.4, .5, 1) infinite;
}

.anim-box-c[b-bdem0dp7ka] {
    animation: tp-drop-c-b-bdem0dp7ka 6s cubic-bezier(.3, 1.4, .5, 1) infinite;
}

@keyframes tp-drop-a-b-bdem0dp7ka {
    0%, 25% {
        opacity: 0;
        transform: translateY(-36px);
    }

    35%, 92% {
        opacity: 1;
        transform: translateY(0);
    }

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

@keyframes tp-drop-b-b-bdem0dp7ka {
    0%, 38% {
        opacity: 0;
        transform: translateY(-36px);
    }

    48%, 92% {
        opacity: 1;
        transform: translateY(0);
    }

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

@keyframes tp-drop-c-b-bdem0dp7ka {
    0%, 51% {
        opacity: 0;
        transform: translateY(-36px);
    }

    61%, 92% {
        opacity: 1;
        transform: translateY(0);
    }

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

/* check badge popping in last */
.anim-badge[b-bdem0dp7ka] {
    animation: tp-pop-b-bdem0dp7ka 6s cubic-bezier(.3, 1.6, .5, 1) infinite;
}

@keyframes tp-pop-b-bdem0dp7ka {
    0%, 64% {
        opacity: 0;
        transform: scale(.4);
    }

    72%, 92% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* people who asked their system for less motion get the still picture */
@media (prefers-reduced-motion: reduce) {
    .auth-art svg *[b-bdem0dp7ka] {
        animation: none !important;
    }

    .anim-scan[b-bdem0dp7ka] {
        opacity: 0;
    }
}

/* ============ Mobile ============ */
/* Same 860px breakpoint as Login.razor.css */
@media (max-width: 860px) {
    .auth[b-bdem0dp7ka] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    /* on phones the form comes first; the blue banner is just the logo */
    .auth-visual[b-bdem0dp7ka] {
        padding: 20px;
    }

    .auth-logo img[b-bdem0dp7ka] {
        height: 32px;
    }

    .auth-art[b-bdem0dp7ka] {
        display: none;
    }

    .auth-form-side[b-bdem0dp7ka] {
        padding: 28px 16px;
        align-items: flex-start;
    }
}
/* /Components/Layout/PageHero.razor.rz.scp.css */
/* Blue banner at the top of every page (PageHero.razor).
   The page content below it overlaps its bottom edge via .page-main in app.css,
   so the large bottom padding here is deliberate: it is the room that content slides into. */

/* ============ Banner ============ */
.hero[b-dpmq5bb2ao] {
    background: linear-gradient(135deg, var(--brand-bright) 0%, var(--brand-deep) 100%);
    color: #fff;
}

/* also has .tp-container (global): that gives the max width and side padding */
.hero-inner[b-dpmq5bb2ao] {
    padding-top: 56px;
    padding-bottom: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

/* ============ Text ============ */
.hero h1[b-dpmq5bb2ao] {
    margin: 0;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 600;
    color: #fff;
}

.hero p[b-dpmq5bb2ao] {
    margin: 0;
    max-width: 680px;
    font-size: 17px;
    line-height: 1.6;
    color: #fff;
}

/* ============ Mobile ============ */
/* Keep the bottom padding 32px larger than the page-main overlap (64px at this width, see app.css) */
@media (max-width: 720px) {
    .hero-inner[b-dpmq5bb2ao] {
        padding-top: 36px;
        padding-bottom: 96px;
    }

    .hero h1[b-dpmq5bb2ao] {
        font-size: 30px;
    }

    .hero p[b-dpmq5bb2ao] {
        font-size: 16px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-0mfxnjy4u9],
.components-reconnect-repeated-attempt-visible[b-0mfxnjy4u9],
.components-reconnect-failed-visible[b-0mfxnjy4u9],
.components-pause-visible[b-0mfxnjy4u9],
.components-resume-failed-visible[b-0mfxnjy4u9],
.components-rejoining-animation[b-0mfxnjy4u9] {
    display: none;
}

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


#components-reconnect-modal[b-0mfxnjy4u9] {
    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-0mfxnjy4u9 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-0mfxnjy4u9 {
    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/Layout/TopBar.razor.rz.scp.css */
/* Top navigation bar (TopBar.razor): logo, tool links, user + log out.
   The login screen has its own logo styling in AuthLayout.razor.css. */

/* ============ Bar ============ */
.topbar[b-ppsm7sxmwm] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

/* also has .tp-container (global): max width and side padding */
.topbar-inner[b-ppsm7sxmwm] {
    min-height: 72px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 24px;
}

/* ============ Logo ============ */
.brand-logo[b-ppsm7sxmwm] {
    display: inline-flex;
    align-items: center;
}

    .brand-logo img[b-ppsm7sxmwm] {
        display: block;
        height: 40px;
        width: auto;
    }

/* ============ Navigation ============ */
.topbar-nav[b-ppsm7sxmwm] {
    display: flex;
    gap: 28px;
}

/* The links are rendered by <NavLink>, whose <a> has no scope attribute,
   so they are reached through the nav (which has it) using ::deep. */
    /* The links are rendered by <NavLink>, whose <a> has no scope attribute,
   so they are reached through the nav (which has it) using ::deep. */
    .topbar-nav[b-ppsm7sxmwm]  .topbar-link {
        padding: 24px 0 22px;
        border-bottom: 2px solid transparent;
        font-size: 14px;
        font-weight: 500;
        color: var(--text);
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

        .topbar-nav[b-ppsm7sxmwm]  .topbar-link:hover {
            color: var(--brand);
        }

        /* `active` is added by NavLink on the current page */
        .topbar-nav[b-ppsm7sxmwm]  .topbar-link.active {
            color: var(--brand);
            border-bottom-color: var(--brand);
            font-weight: 600;
        }

/* ============ User + log out ============ */
.topbar-user[b-ppsm7sxmwm] {
    display: flex;
    align-items: center;
    gap: 16px;
}

    .topbar-user form[b-ppsm7sxmwm] {
        margin: 0;
    }

.topbar-email[b-ppsm7sxmwm] {
    font-size: 14px;
    color: var(--muted);
}

/* ============ Mobile ============ */
/* Row 1: logo + log out. Row 2: nav links, scrollable if they ever outgrow the width. */
@media (max-width: 720px) {
    .topbar-inner[b-ppsm7sxmwm] {
        min-height: 0;
        padding-top: 12px;
    }

    .brand-logo img[b-ppsm7sxmwm] {
        height: 32px;
    }

    .topbar-user[b-ppsm7sxmwm] {
        order: 2;
    }

    .topbar-nav[b-ppsm7sxmwm] {
        order: 3;
        width: 100%;
        gap: 20px;
        overflow-x: auto;
    }

        .topbar-nav[b-ppsm7sxmwm]  .topbar-link {
            padding: 12px 0 10px;
            white-space: nowrap;
        }

    .topbar-email[b-ppsm7sxmwm] {
        display: none;
    }
}
/* /Components/Tools/Converter.razor.rz.scp.css */
/* Converter page (Converter.razor). The upload cards are in FileDropZone.razor.css.
   Shared pieces (.tp-panel, .tp-btn, .tp-grid-*, .section-title...) are global, in app.css. */

/* ============ Upload state ============ */
/* bar under the two upload cards: hint text + Convert button */
.action-bar[b-5waoqa3cj7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 28px;
}

    .action-bar p[b-5waoqa3cj7] {
        margin: 0;
        max-width: 640px;
        font-size: 14px;
        color: var(--muted);
    }

/* "How it works": three short columns */
.steps-list[b-5waoqa3cj7] {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

    .steps-list b[b-5waoqa3cj7] {
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
        color: var(--brand);
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .steps-list span[b-5waoqa3cj7] {
        font-size: 15px;
        line-height: 1.6;
        color: var(--muted);
    }

/* ============ Result: success banner ============ */
.result-banner[b-5waoqa3cj7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
}

.result-banner-info[b-5waoqa3cj7] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0; /* lets long text wrap instead of overflowing the flex row */
}

.result-banner strong[b-5waoqa3cj7] {
    display: block;
    font-size: 18px;
}

.result-banner small[b-5waoqa3cj7] {
    font-size: 14px;
    overflow-wrap: anywhere;
}

/* white rounded square around an icon (banner + warnings stat) */
.icon-chip[b-5waoqa3cj7] {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--ok-line);
}

.tp-panel--warn .icon-chip[b-5waoqa3cj7] {
    border-color: var(--warn-line);
}

/* ============ Result: stat cards (boxes / units / warnings) ============ */
.stat[b-5waoqa3cj7] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 28px;
}

    .stat .tp-tile[b-5waoqa3cj7] {
        width: 52px;
        height: 52px;
    }

.stat-value[b-5waoqa3cj7] {
    display: block;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 600;
}

.stat-label[b-5waoqa3cj7] {
    font-size: 14px;
    color: var(--muted);
}

/* on the amber "warnings" card the label takes the card's colour */
.tp-panel--warn .stat-label[b-5waoqa3cj7] {
    color: inherit;
}

/* ============ Result: warnings ============ */
.warn-list[b-5waoqa3cj7] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
}

.warn-group[b-5waoqa3cj7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: 12px;
    background: var(--warn-bg);
    border: 1px solid var(--warn-line);
    color: var(--warn-text);
}

.warn-group-head[b-5waoqa3cj7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
}

.warn-group p[b-5waoqa3cj7] {
    margin: 0;
    font-size: 14px;
}

.warn-group ul[b-5waoqa3cj7] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.warn-group li[b-5waoqa3cj7] {
    padding: 10px 14px;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* "32 items" pill in a group heading */
.tp-count[b-5waoqa3cj7] {
    padding: 4px 12px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid var(--warn-line);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}

/* "Show all 32" - a button that looks like a link */
.link-button[b-5waoqa3cj7] {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--warn-text);
    text-decoration: underline;
    cursor: pointer;
}

/* ============ Result: preview grid (SKU x box) ============ */
/* scrolls sideways on small screens; the SKU column stays pinned */
.grid-scroll[b-5waoqa3cj7] {
    overflow-x: auto;
    margin-top: 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.grid-table[b-5waoqa3cj7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-variant-numeric: tabular-nums; /* digits line up in columns */
}

    .grid-table th[b-5waoqa3cj7], .grid-table td[b-5waoqa3cj7] {
        padding: 11px 10px;
        text-align: right;
        white-space: nowrap;
    }

    .grid-table thead th[b-5waoqa3cj7] {
        background: #f1f5f9;
        font-weight: 600;
    }

    .grid-table tbody tr[b-5waoqa3cj7] {
        border-top: 1px solid var(--line);
    }

        .grid-table tbody tr:nth-child(even)[b-5waoqa3cj7] {
            background: var(--bg-soft);
        }

    /* pinned first column: needs a solid background so scrolled cells don't show through */
    .grid-table .sticky-col[b-5waoqa3cj7] {
        position: sticky;
        left: 0;
        padding-left: 16px;
        text-align: left;
        font-weight: 500;
    }

    .grid-table thead .sticky-col[b-5waoqa3cj7] {
        background: #f1f5f9;
        font-weight: 600;
    }

    .grid-table tbody .sticky-col[b-5waoqa3cj7] {
        background: #fff;
    }

    .grid-table tbody tr:nth-child(even) .sticky-col[b-5waoqa3cj7] {
        background: var(--bg-soft);
    }

    .grid-table .zero[b-5waoqa3cj7] {
        color: #94a3b8;
    }

    .grid-table .total-col[b-5waoqa3cj7] {
        padding-right: 16px;
        font-weight: 600;
        color: var(--brand);
    }

    .grid-table tfoot tr[b-5waoqa3cj7] {
        border-top: 2px solid var(--brand);
        background: #eff6ff;
        font-weight: 600;
    }

    .grid-table tfoot .sticky-col[b-5waoqa3cj7] {
        background: #eff6ff;
        font-weight: 600;
    }

.grid-note[b-5waoqa3cj7] {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--muted);
}

/* ============ Result: bottom row ============ */
.result-actions[b-5waoqa3cj7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

    .result-actions span[b-5waoqa3cj7] {
        font-size: 13px;
        color: var(--muted);
    }

/* ============ Mobile ============ */
@media (max-width: 860px) {
    .steps-list[b-5waoqa3cj7] {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

@media (max-width: 720px) {
    .action-bar[b-5waoqa3cj7], .result-banner[b-5waoqa3cj7], .stat[b-5waoqa3cj7] {
        padding: 20px;
    }

        /* full-width buttons are easier to tap */
        .action-bar .tp-btn[b-5waoqa3cj7], .result-banner .tp-btn[b-5waoqa3cj7] {
            width: 100%;
        }

    .stat-value[b-5waoqa3cj7] {
        font-size: 28px;
    }
}
/* /Components/Tools/FileDropZone.razor.rz.scp.css */
/* One numbered upload card (FileDropZone.razor): heading + a drop area.
   Used for both the Moneo file and the Amazon template. */

/* ============ Card + heading ============ */
.upload-card[b-6pvnipqt2s] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.step-head[b-6pvnipqt2s] {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .step-head > div[b-6pvnipqt2s] {
        display: flex;
        flex-direction: column;
    }

    .step-head h2[b-6pvnipqt2s] {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

.step-desc[b-6pvnipqt2s] {
    font-size: 14px;
    color: var(--muted);
}

/* the blue numbered circle */
.step-num[b-6pvnipqt2s] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

/* ============ Drop area: empty state ============ */
.dropzone[b-6pvnipqt2s] {
    position: relative; /* the invisible file input is positioned against this */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 180px;
    padding: 24px;
    border: 2px dashed #94a3b8;
    border-radius: 12px;
    background: var(--bg-soft);
    text-align: center;
    transition: border-color .15s, background .15s;
}

    /* :focus-within = keyboard focus on the hidden input shows the same highlight as hover */
    .dropzone:hover[b-6pvnipqt2s], .dropzone:focus-within[b-6pvnipqt2s] {
        border-color: var(--brand);
        background: #eff6ff;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
    }

    /* The real file input covers the whole zone and is invisible,
       so clicking AND dragging a file in work anywhere on the card. */
    .dropzone[b-6pvnipqt2s]  input[type=file] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.dropzone-title[b-6pvnipqt2s] {
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere; /* long file names wrap */
}

.dropzone-hint[b-6pvnipqt2s] {
    font-size: 13px;
    color: var(--muted);
}

/* ============ Drop area: file chosen (green) ============ */
/* must stay after the rules above: same specificity, so the later one wins */
.dropzone--done[b-6pvnipqt2s] {
    border-style: solid;
    border-color: var(--ok-line);
    background: var(--ok-bg);
}

    .dropzone--done:hover[b-6pvnipqt2s], .dropzone--done:focus-within[b-6pvnipqt2s] {
        border-color: var(--ok-text);
        background: var(--ok-bg);
        box-shadow: none;
    }

    .dropzone--done .dropzone-title[b-6pvnipqt2s], .dropzone--done .dropzone-hint[b-6pvnipqt2s] {
        color: var(--ok-text);
    }
/* /Components/Tools/Home.razor.rz.scp.css */
/* Tools home (Home.razor): one clickable card per tool, a dashed "coming soon" card, and a privacy strip. */

/* ============ Tool card (the whole card is one <a>) ============ */
/* also has .tp-panel (global): white card, radius, border, shadow */
.tool-card[b-xbhfy2x976] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    color: var(--text); /* the global `a` rule would otherwise colour all the text blue */
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}

    .tool-card:hover[b-xbhfy2x976] {
        color: var(--text);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(37, 99, 235, .15);
    }

    .tool-card h2[b-xbhfy2x976] {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
    }

    .tool-card p[b-xbhfy2x976] {
        margin: 8px 0 0;
        font-size: 15px;
        line-height: 1.6;
        color: var(--muted);
    }

/* "Open tool ->" line at the bottom; a span, because a link can't sit inside a link */
.tool-link[b-xbhfy2x976] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ============ "More tools coming" card ============ */
.tool-placeholder[b-xbhfy2x976] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    border: 2px dashed #94a3b8;
    background: rgba(255, 255, 255, .55);
    box-shadow: none;
}

    .tool-placeholder h2[b-xbhfy2x976] {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

    .tool-placeholder p[b-xbhfy2x976] {
        margin: 0;
        font-size: 15px;
        line-height: 1.6;
        color: var(--muted);
    }

/* ============ Privacy strip ============ */
.info-strip[b-xbhfy2x976] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
}

    .info-strip svg[b-xbhfy2x976] {
        flex-shrink: 0; /* keep the lock icon from being squeezed by long text */
    }

    .info-strip p[b-xbhfy2x976] {
        margin: 0;
        font-size: 14px;
    }

/* ============ Accessibility ============ */
@media (prefers-reduced-motion: reduce) {
    .tool-card[b-xbhfy2x976] {
        transition: none;
    }

        .tool-card:hover[b-xbhfy2x976] {
            transform: none;
        }
}

/* ============ Mobile ============ */
@media (max-width: 720px) {
    .tool-card[b-xbhfy2x976], .tool-placeholder[b-xbhfy2x976] {
        padding: 24px;
    }

    .info-strip[b-xbhfy2x976] {
        padding: 16px 20px;
    }
}