/* /Components/Auth/PortalAuthBootstrap.razor.rz.scp.css */
/* =========================================================
   PURPOSE:
   Scoped styling for the PortalAuthBootstrap component.

   RESPONSIBILITIES:
   - Provide a clean loading surface while the app resolves
     the current authenticated portal user
   - Keep the bootstrap experience visually aligned with the
     Vixly Operations authentication experience

   IMPORTANT NOTES:
   - This is intentionally lightweight
   - It should not compete visually with the login page
   - It exists only while auth state is being loaded
   ========================================================= */

.vx-auth-bootstrap[b-1wpr1m7kes] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 30%), radial-gradient(circle at bottom right, rgba(15, 23, 42, 0.10), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #eef4fb 45%, #f8fafc 100%);
    padding: 24px;
}

.vx-auth-bootstrap__panel[b-1wpr1m7kes] {
    min-width: 280px;
    max-width: 420px;
    width: 100%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 24px 22px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08), 0 6px 14px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.vx-auth-bootstrap__brand[b-1wpr1m7kes] {
    font-size: 12px;
    letter-spacing: 1.4px;
    font-weight: 800;
    color: #2563eb;
}

.vx-auth-bootstrap__message[b-1wpr1m7kes] {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}

@media (max-width: 640px) {
    .vx-auth-bootstrap[b-1wpr1m7kes] {
        padding: 16px;
    }

    .vx-auth-bootstrap__panel[b-1wpr1m7kes] {
        border-radius: 16px;
        padding: 20px 18px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* =========================================================
   FILE: MainLayout.razor.css

   PURPOSE:
   Scoped styles for MainLayout.

   IMPORTANT NOTES:
   - Shell layout styles (.vx-shell, .vx-shell__main etc.)
     have been moved to app.css to avoid Blazor CSS isolation
     scoping issues with child components.
   - Only the Blazor error UI remains here as it is framework-
     level and does not interact with component scoping.
   ========================================================= */

/* =========================================================
   BLAZOR ERROR UI (UNCHANGED)
   ========================================================= */

#blazor-error-ui[b-7cyk5wajg3] {
    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-7cyk5wajg3] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-gg4nc8f6yk],
.components-reconnect-repeated-attempt-visible[b-gg4nc8f6yk],
.components-reconnect-failed-visible[b-gg4nc8f6yk],
.components-pause-visible[b-gg4nc8f6yk],
.components-resume-failed-visible[b-gg4nc8f6yk],
.components-rejoining-animation[b-gg4nc8f6yk] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-gg4nc8f6yk {
    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/Sidebar.razor.rz.scp.css */
/* =========================================================
   FILE: Sidebar.razor.css

   IMPORTANT NOTES:
   - All sidebar styles have been moved to app.css
   - This avoids Blazor CSS isolation scoping issues where
     child component classes do not receive the scoped
     attribute and therefore do not match scoped selectors
   ========================================================= */
/* /Components/Layout/TopBar.razor.rz.scp.css */
/* =========================================================
   FILE: TopBar.razor.css

   IMPORTANT NOTES:
   - All topbar styles have been moved to app.css
   - This avoids Blazor CSS isolation scoping issues where
     child component classes do not receive the scoped
     attribute and therefore do not match scoped selectors
   ========================================================= */
/* /Components/Pages/Administration/RolesAndPermissions/Parts/CreateRoleDialog.razor.rz.scp.css */
/* =========================================================
   FILE: CreateRoleDialog.razor.css

   PURPOSE:
   Scoped styling for the create-role modal dialog.

   RESPONSIBILITIES:
   - Style modal backdrop
   - Style create role dialog
   - Style dialog action area

   IMPORTANT NOTES:
   - Presentation styling only
   ========================================================= */

.vx-admin-dialog-backdrop[b-v82ct7gkdy] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}

.vx-admin-dialog[b-v82ct7gkdy] {
    width: min(560px, 100%);
    border: 1px solid #dbeafe;
    border-radius: 22px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22);
}

.vx-admin-dialog__header[b-v82ct7gkdy] {
    padding: 1.4rem 1.4rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

.vx-admin-dialog__title[b-v82ct7gkdy] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-admin-dialog__subtitle[b-v82ct7gkdy] {
    margin: 0.45rem 0 0;
    line-height: 1.5;
    color: #64748b;
}

.vx-admin-dialog .vx-alert[b-v82ct7gkdy] {
    margin: 1rem 1.4rem 0;
}

.vx-admin-dialog .vx-admin-field[b-v82ct7gkdy] {
    padding: 1.2rem 1.4rem 0;
}

.vx-admin-dialog__actions[b-v82ct7gkdy] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.4rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.vx-admin-field[b-v82ct7gkdy] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.vx-admin-field__label[b-v82ct7gkdy] {
    font-size: 0.78rem;
    font-weight: 800;
    color: #334155;
}

.vx-admin-field__input[b-v82ct7gkdy] {
    height: 48px;
    padding: 0 0.95rem;
    border: 1px solid #cbd5e1;
    border-radius: 13px;
    background: #ffffff;
    color: #0f172a;
}

    .vx-admin-field__input:focus[b-v82ct7gkdy] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
    }
/* /Components/Pages/Administration/RolesAndPermissions/Parts/PermissionMatrixPanel.razor.rz.scp.css */
/* =========================================================
   FILE: PermissionMatrixPanel.razor.css

   PURPOSE:
   Scoped styling for the role permission matrix.

   RESPONSIBILITIES:
   - Style permission matrix card
   - Style permission groups
   - Style permission rows and metadata

   IMPORTANT NOTES:
   - Presentation styling only
   ========================================================= */

.vx-admin-permission-matrix[b-mindlsxw6h] {
    border: 1px solid #dbeafe;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}

.vx-admin-permission-matrix__header[b-mindlsxw6h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.2rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.vx-admin-permission-matrix__title[b-mindlsxw6h] {
    margin: 0;
    font-size: 1rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-admin-permission-matrix__subtitle[b-mindlsxw6h] {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #64748b;
}

.vx-admin-permission-group[b-mindlsxw6h] {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid #e2e8f0;
}

    .vx-admin-permission-group:last-child[b-mindlsxw6h] {
        border-bottom: none;
    }

.vx-admin-permission-group__title[b-mindlsxw6h] {
    position: sticky;
    top: 0;
    margin: 0 0 0.9rem;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    background: #eff6ff;
    font-size: 0.8rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1d4ed8;
}

.vx-admin-permission-group__items[b-mindlsxw6h] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.vx-admin-permission-row[b-mindlsxw6h] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    padding: 0.95rem;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    background: #ffffff;
    transition: border-color 160ms ease, background 160ms ease;
}

    .vx-admin-permission-row:hover[b-mindlsxw6h] {
        border-color: #bfdbfe;
        background: #f8fbff;
    }

    .vx-admin-permission-row input[type="checkbox"][b-mindlsxw6h] {
        margin-top: 0.25rem;
    }

.vx-admin-permission-row__body[b-mindlsxw6h] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.vx-admin-permission-row__name[b-mindlsxw6h] {
    font-size: 0.95rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-admin-permission-row__code[b-mindlsxw6h] {
    font-size: 0.78rem;
    font-family: Consolas, monospace;
    color: #2563eb;
}

.vx-admin-permission-row__description[b-mindlsxw6h] {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #64748b;
}

.vx-admin-permission-row__scope[b-mindlsxw6h] {
    width: fit-content;
    margin-top: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.72rem;
    font-weight: 850;
}

.vx-admin-permission-matrix__empty[b-mindlsxw6h] {
    padding: 1.25rem;
    color: #64748b;
}
.vx-btn[b-mindlsxw6h] {
    min-height: 42px;
    padding: 0 1rem;
    border: 0;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-btn:hover:not(:disabled)[b-mindlsxw6h] {
        transform: translateY(-1px);
    }

    .vx-btn:disabled[b-mindlsxw6h] {
        cursor: not-allowed;
        opacity: 0.65;
    }

.vx-btn--primary[b-mindlsxw6h] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

    .vx-btn--primary:hover:not(:disabled)[b-mindlsxw6h] {
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28);
    }

.vx-btn--ghost[b-mindlsxw6h] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
}

    .vx-btn--ghost:hover:not(:disabled)[b-mindlsxw6h] {
        background: #f8fafc;
    }

.vx-btn--danger[b-mindlsxw6h] {
    background: #fee2e2;
    color: #991b1b;
}

    .vx-btn--danger:hover:not(:disabled)[b-mindlsxw6h] {
        background: #fecaca;
    }
/* /Components/Pages/Administration/RolesAndPermissions/Parts/RoleDetailsPanel.razor.rz.scp.css */
/* =========================================================
   FILE: RoleDetailsPanel.razor.css
   ========================================================= */

.vx-admin-role-details[b-dxjce27ue1] {
    border: 1px solid #dbeafe;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}

.vx-admin-role-details__header[b-dxjce27ue1] {
    padding: 1.15rem 1.2rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.vx-admin-role-details__title[b-dxjce27ue1] {
    margin: 0;
    font-size: 1rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-admin-role-details__subtitle[b-dxjce27ue1] {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

.vx-admin-role-details__form[b-dxjce27ue1] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    align-items: end;
    gap: 1rem;
    padding: 1.2rem;
}

.vx-admin-field[b-dxjce27ue1] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.vx-admin-field__label[b-dxjce27ue1] {
    font-size: 0.78rem;
    font-weight: 800;
    color: #334155;
}

.vx-admin-field__input[b-dxjce27ue1] {
    height: 46px;
    padding: 0 0.9rem;
    border: 1px solid #cbd5e1;
    border-radius: 13px;
    color: #0f172a;
    background: #ffffff;
}

.vx-admin-role-details__check[b-dxjce27ue1] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 46px;
    padding: 0 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #f8fafc;
    font-size: 0.88rem;
    font-weight: 800;
    color: #334155;
}

.vx-admin-role-details__actions[b-dxjce27ue1] {
    display: flex;
    gap: 0.65rem;
}

    /* Button fallback: catches buttons even if vx-btn isolation misses */
    .vx-admin-role-details__actions button[b-dxjce27ue1] {
        min-height: 42px;
        padding: 0 1rem;
        border: 1px solid transparent;
        border-radius: 13px;
        font-size: 0.88rem;
        font-weight: 850;
        cursor: pointer;
        transition: all 160ms ease;
    }

        .vx-admin-role-details__actions button:hover:not(:disabled)[b-dxjce27ue1] {
            transform: translateY(-1px);
        }

        .vx-admin-role-details__actions .vx-btn--primary[b-dxjce27ue1],
        .vx-admin-role-details__actions button:first-child[b-dxjce27ue1] {
            border-color: #1d4ed8;
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            color: #ffffff;
            box-shadow: 0 12px 24px rgba(37, 99, 235, 0.25);
        }

        .vx-admin-role-details__actions .vx-btn--danger[b-dxjce27ue1],
        .vx-admin-role-details__actions button:last-child[b-dxjce27ue1] {
            border-color: #fecaca;
            background: #fee2e2;
            color: #991b1b;
            box-shadow: 0 10px 22px rgba(185, 28, 28, 0.12);
        }

@media (max-width: 900px) {
    .vx-admin-role-details__form[b-dxjce27ue1] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Administration/RolesAndPermissions/Parts/RoleListPanel.razor.rz.scp.css */
/* =========================================================
   FILE: RoleListPanel.razor.css

   PURPOSE:
   Scoped styling for the tenant role list panel.

   RESPONSIBILITIES:
   - Style role list card
   - Style selectable role buttons
   - Show active selected role state

   IMPORTANT NOTES:
   - Presentation styling only
   ========================================================= */

.vx-admin-role-list[b-q4xfodn7eh] {
    border: 1px solid #dbeafe;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}

.vx-admin-role-list__header[b-q4xfodn7eh] {
    padding: 1.15rem 1.2rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.vx-admin-role-list__title[b-q4xfodn7eh] {
    margin: 0;
    font-size: 1rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-admin-role-list__subtitle[b-q4xfodn7eh] {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #64748b;
}

.vx-admin-role-list__items[b-q4xfodn7eh] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 270px);
    padding: 0.7rem;
    gap: 0.45rem;
    overflow-y: auto;
}

.vx-admin-role-list__item[b-q4xfodn7eh] {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid transparent;
    border-radius: 15px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

    .vx-admin-role-list__item:hover[b-q4xfodn7eh] {
        border-color: #dbeafe;
        background: #eff6ff;
        transform: translateY(-1px);
    }

.vx-admin-role-list__item--active[b-q4xfodn7eh] {
    border-color: #bfdbfe;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    box-shadow: inset 3px 0 0 #2563eb;
}

.vx-admin-role-list__name[b-q4xfodn7eh] {
    min-width: 0;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vx-admin-role-list__status[b-q4xfodn7eh] {
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: #eff6ff;
    font-size: 0.7rem;
    font-weight: 850;
    color: #1d4ed8;
}

.vx-admin-role-list__item--active .vx-admin-role-list__status[b-q4xfodn7eh] {
    background: #ffffff;
}

.vx-admin-role-list__empty[b-q4xfodn7eh] {
    padding: 1.2rem;
    color: #64748b;
}
.vx-btn[b-q4xfodn7eh] {
    min-height: 42px;
    padding: 0 1rem;
    border: 0;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-btn:hover:not(:disabled)[b-q4xfodn7eh] {
        transform: translateY(-1px);
    }

    .vx-btn:disabled[b-q4xfodn7eh] {
        cursor: not-allowed;
        opacity: 0.65;
    }

.vx-btn--primary[b-q4xfodn7eh] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

    .vx-btn--primary:hover:not(:disabled)[b-q4xfodn7eh] {
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28);
    }

.vx-btn--ghost[b-q4xfodn7eh] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
}

    .vx-btn--ghost:hover:not(:disabled)[b-q4xfodn7eh] {
        background: #f8fafc;
    }

.vx-btn--danger[b-q4xfodn7eh] {
    background: #fee2e2;
    color: #991b1b;
}

    .vx-btn--danger:hover:not(:disabled)[b-q4xfodn7eh] {
        background: #fecaca;
    }
/* /Components/Pages/Administration/RolesAndPermissions/RolesAndPermissionsWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: RolesAndPermissionsWorkspace.razor.css

   PURPOSE:
   Scoped styling for the Roles & Permissions workspace.

   RESPONSIBILITIES:
   - Define Administration workspace layout
   - Style workspace header and content grid
   - Keep visual language consistent with Vixly Operations

   IMPORTANT NOTES:
   - Scoped to RolesAndPermissionsWorkspace.razor
   - Uses vx-prefixed BEM-style class names
   ========================================================= */

.vx-admin-rbac-workspace[b-v0x8sji8qf] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
}

.vx-admin-rbac-workspace__header[b-v0x8sji8qf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 72%);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.vx-admin-rbac-workspace__eyebrow[b-v0x8sji8qf] {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.vx-admin-rbac-workspace__title[b-v0x8sji8qf] {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-admin-rbac-workspace__subtitle[b-v0x8sji8qf] {
    margin: 0.45rem 0 0;
    max-width: 760px;
    color: #64748b;
}

.vx-admin-rbac-workspace__grid[b-v0x8sji8qf] {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}

.vx-admin-rbac-workspace__roles[b-v0x8sji8qf] {
    position: sticky;
    top: 1rem;
}

.vx-admin-rbac-workspace__main[b-v0x8sji8qf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.vx-admin-rbac-workspace__selected[b-v0x8sji8qf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
}

.vx-admin-rbac-workspace__selected-label[b-v0x8sji8qf] {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.vx-admin-rbac-workspace__selected-title[b-v0x8sji8qf] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-admin-rbac-workspace__selected-subtitle[b-v0x8sji8qf] {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

@media (max-width: 1100px) {
    .vx-admin-rbac-workspace__grid[b-v0x8sji8qf] {
        grid-template-columns: 1fr;
    }

    .vx-admin-rbac-workspace__roles[b-v0x8sji8qf] {
        position: static;
    }

    .vx-admin-rbac-workspace__header[b-v0x8sji8qf] {
        align-items: flex-start;
        flex-direction: column;
    }
}
.vx-btn[b-v0x8sji8qf] {
    min-height: 42px;
    padding: 0 1rem;
    border: 0;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-btn:hover:not(:disabled)[b-v0x8sji8qf] {
        transform: translateY(-1px);
    }

    .vx-btn:disabled[b-v0x8sji8qf] {
        cursor: not-allowed;
        opacity: 0.65;
    }

.vx-btn--primary[b-v0x8sji8qf] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

    .vx-btn--primary:hover:not(:disabled)[b-v0x8sji8qf] {
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28);
    }

.vx-btn--ghost[b-v0x8sji8qf] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
}

    .vx-btn--ghost:hover:not(:disabled)[b-v0x8sji8qf] {
        background: #f8fafc;
    }

.vx-btn--danger[b-v0x8sji8qf] {
    background: #fee2e2;
    color: #991b1b;
}

    .vx-btn--danger:hover:not(:disabled)[b-v0x8sji8qf] {
        background: #fecaca;
    }
/* /Components/Pages/CounterSales/CounterSalesWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: CounterSalesWorkspace.razor.css

   PURPOSE:
   Scoped styling for the Counter Sales placeholder
   workspace.

   RESPONSIBILITIES:
   - Style the future Counter Sales workspace
   - Keep visual language aligned with Vixly Operations
   - Provide a clean placeholder for future module work

   IMPORTANT NOTES:
   - Scoped to CounterSalesWorkspace.razor
   - Temporary styling until the real module is implemented
   ========================================================= */

.vx-counter-sales-workspace[b-5cz9nhep6t] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
}

.vx-counter-sales-workspace__hero[b-5cz9nhep6t] {
    padding: 1.5rem;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 72%);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.vx-counter-sales-workspace__eyebrow[b-5cz9nhep6t] {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.vx-counter-sales-workspace__title[b-5cz9nhep6t] {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-counter-sales-workspace__subtitle[b-5cz9nhep6t] {
    max-width: 780px;
    margin: 0.55rem 0 0;
    line-height: 1.6;
    color: #64748b;
}

.vx-counter-sales-workspace__card[b-5cz9nhep6t] {
    padding: 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
}

.vx-counter-sales-workspace__card-title[b-5cz9nhep6t] {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-counter-sales-workspace__list[b-5cz9nhep6t] {
    margin: 0;
    padding-left: 1.25rem;
    color: #475569;
}

    .vx-counter-sales-workspace__list li[b-5cz9nhep6t] {
        margin-bottom: 0.45rem;
    }
/* /Components/Pages/Customers/AccountSetup/CustomerAccountSetupWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerAccountSetupWorkspace.razor.css

   PURPOSE:
   Scoped styles for the Customer Account Setup public page.

   RESPONSIBILITIES:
   - Maintain Vixly public portal visual language
   - Present password setup and activation completion clearly
   - Provide tenant-branded customer portal access action
   - Keep layout polished, compact, and responsive

   IMPORTANT NOTES:
   - Scoped styles only
   - No inline styles in razor
   - Follows Vixly card, border, radius, shadow, and density language
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.vx-setup-page[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-page {
    width: 100%;
    min-height: 100%;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34rem), linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
    padding: 1.35rem;
}

.vx-setup-shell[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-shell {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

/* =========================================================
   CARD
   ========================================================= */

.vx-setup-card[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dbe5f0;
    border-radius: 22px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    padding: 1.4rem;
}

/* =========================================================
   STATUS
   ========================================================= */

.vx-setup-status[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.vx-setup-status--success[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-status--success {
    color: #166534;
}

/* =========================================================
   ICON
   ========================================================= */

.vx-setup-icon[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    font-size: 1.4rem;
    font-weight: 900;
}

.vx-setup-icon--success[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-icon--success {
    color: #ffffff;
    background: #22c55e;
    box-shadow: 0 10px 20px rgba(34, 197, 94, 0.18);
}

/* =========================================================
   TEXT
   ========================================================= */

.vx-setup-eyebrow[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-eyebrow {
    margin: 0.75rem 0 0.4rem 0;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.vx-setup-title[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-title {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 950;
    color: #0f172a;
}

.vx-setup-subtitle[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-subtitle {
    max-width: 410px;
    margin: 0.55rem 0 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #64748b;
}

.vx-setup-message[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-message {
    width: 100%;
    max-width: 430px;
    margin: 0.85rem 0 0 0;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.45;
}

.vx-setup-message--success[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-message--success {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.vx-setup-message--error[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-message--error {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

/* =========================================================
   FORM
   ========================================================= */

.vx-setup-form[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-form {
    width: 100%;
    max-width: 430px;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.vx-setup-label[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-label {
    text-align: left;
    font-size: 0.76rem;
    font-weight: 850;
    color: #334155;
}

.vx-setup-input[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-input {
    width: 100%;
    min-height: 40px;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    border: 1px solid #dbe5f0;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

    .vx-setup-input:focus[b-ti71q7cy8s],
    [b-ti71q7cy8s] .vx-setup-input:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

/* =========================================================
   BUTTON
   ========================================================= */

.vx-setup-button[b-ti71q7cy8s],
[b-ti71q7cy8s] .vx-setup-button {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.68rem 1.2rem;
    border-radius: 13px;
    border: 1px solid #2563eb;
    color: #ffffff;
    background: #2563eb;
    font-size: 0.9rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .vx-setup-button:hover[b-ti71q7cy8s],
    [b-ti71q7cy8s] .vx-setup-button:hover {
        background: #1d4ed8;
        border-color: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(37, 99, 235, 0.26);
    }

    .vx-setup-button:disabled[b-ti71q7cy8s],
    [b-ti71q7cy8s] .vx-setup-button:disabled {
        background: #93c5fd;
        border-color: #93c5fd;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {
    .vx-setup-page[b-ti71q7cy8s],
    [b-ti71q7cy8s] .vx-setup-page {
        padding: 1rem;
    }

    .vx-setup-card[b-ti71q7cy8s],
    [b-ti71q7cy8s] .vx-setup-card {
        padding: 1rem;
        border-radius: 18px;
    }

    .vx-setup-button[b-ti71q7cy8s],
    [b-ti71q7cy8s] .vx-setup-button {
        width: 100%;
    }
}
/* /Components/Pages/Customers/AccountSetup/Parts/CustomerAccountSetupForm.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerAccountSetupForm.razor.css

   PURPOSE:
   Scoped styles for the customer account setup form.

   RESPONSIBILITIES:
   - Style the password setup form
   - Present setup instructions and error state
   - Keep alignment with Vixly public portal visual language
   - Own only this component's visual styling

   IMPORTANT NOTES:
   - This file styles CustomerAccountSetupForm only
   - Workspace styling does not belong here
   - No child component styling belongs here
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.vx-setup-page[b-coasxp3r0z] {
    width: 100%;
    min-height: 100%;
    padding: 1.35rem;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34rem), linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
}

.vx-setup-shell[b-coasxp3r0z] {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

/* =========================================================
   CARD
   ========================================================= */

.vx-setup-card[b-coasxp3r0z] {
    width: 100%;
    overflow: hidden;
    border: 1px solid #dbe5f0;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    padding: 1.35rem;
}

/* =========================================================
   STATUS CONTENT
   ========================================================= */

.vx-setup-status[b-coasxp3r0z] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.vx-setup-eyebrow[b-coasxp3r0z] {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.vx-setup-title[b-coasxp3r0z] {
    margin: 0;
    font-size: clamp(1.65rem, 3vw, 2.15rem);
    line-height: 1.08;
    font-weight: 950;
    color: #0f172a;
}

.vx-setup-subtitle[b-coasxp3r0z] {
    margin: 0;
    max-width: 34rem;
    font-size: 0.98rem;
    line-height: 1.6;
    color: #475569;
}

/* =========================================================
   MESSAGE
   ========================================================= */

.vx-setup-message[b-coasxp3r0z] {
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.45;
}

.vx-setup-message--error[b-coasxp3r0z] {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

/* =========================================================
   FORM
   ========================================================= */

.vx-setup-form[b-coasxp3r0z] {
    display: flex;
    flex-direction: column;
    gap: 0.68rem;
    padding-top: 0.25rem;
}

.vx-setup-label[b-coasxp3r0z] {
    font-size: 0.76rem;
    font-weight: 850;
    color: #334155;
}

.vx-setup-input[b-coasxp3r0z] {
    width: 100%;
    min-height: 42px;
    padding: 0.58rem 0.72rem;
    border-radius: 12px;
    border: 1px solid #dbe5f0;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

    .vx-setup-input:focus[b-coasxp3r0z] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

/* =========================================================
   BUTTON
   ========================================================= */

.vx-setup-button[b-coasxp3r0z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 0.25rem;
    padding: 0.72rem 1.2rem;
    border-radius: 13px;
    border: 1px solid #2563eb;
    color: #ffffff;
    background: #2563eb;
    font-size: 0.9rem;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .vx-setup-button:hover[b-coasxp3r0z] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(37, 99, 235, 0.26);
    }

    .vx-setup-button:disabled[b-coasxp3r0z] {
        background: #93c5fd;
        border-color: #93c5fd;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 720px) {
    .vx-setup-page[b-coasxp3r0z] {
        padding: 1rem;
    }

    .vx-setup-card[b-coasxp3r0z] {
        padding: 1rem;
        border-radius: 18px;
    }

    .vx-setup-button[b-coasxp3r0z] {
        width: 100%;
    }
}
/* /Components/Pages/Customers/AccountSetup/Parts/CustomerAccountSetupSuccess.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerAccountSetupSuccess.razor.css

   PURPOSE:
   Scoped styles for the customer account setup success state.

   RESPONSIBILITIES:
   - Style the account activation confirmation
   - Style the customer portal access link
   - Keep alignment with Vixly public portal visual language
   - Own only this component's visual styling

   IMPORTANT NOTES:
   - This file styles CustomerAccountSetupSuccess only
   - Workspace styling does not belong here
   - No child component styling belongs here
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.vx-setup-page[b-vbm4tqiiku] {
    width: 100%;
    min-height: 100%;
    padding: 1.35rem;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34rem), linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
}

.vx-setup-shell[b-vbm4tqiiku] {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

/* =========================================================
   CARD
   ========================================================= */

.vx-setup-card[b-vbm4tqiiku] {
    width: 100%;
    overflow: hidden;
    border: 1px solid #dbe5f0;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    padding: 1.35rem;
    text-align: center;
}

/* =========================================================
   SUCCESS CONTENT
   ========================================================= */

.vx-setup-status[b-vbm4tqiiku] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.vx-setup-icon[b-vbm4tqiiku] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 1.45rem;
    font-weight: 900;
}

.vx-setup-icon--success[b-vbm4tqiiku] {
    background: #22c55e;
    box-shadow: 0 10px 20px rgba(34, 197, 94, 0.18);
}

.vx-setup-eyebrow[b-vbm4tqiiku] {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.vx-setup-title[b-vbm4tqiiku] {
    margin: 0;
    font-size: clamp(1.65rem, 3vw, 2.15rem);
    line-height: 1.08;
    font-weight: 950;
    color: #0f172a;
}

/* =========================================================
   MESSAGE
   ========================================================= */

.vx-setup-message[b-vbm4tqiiku] {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.45;
}

.vx-setup-message--success[b-vbm4tqiiku] {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

/* =========================================================
   BUTTON / LINK
   ========================================================= */

.vx-setup-button[b-vbm4tqiiku] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 0.25rem;
    padding: 0.72rem 1.2rem;
    border-radius: 13px;
    border: 1px solid #2563eb;
    color: #ffffff;
    background: #2563eb;
    font-size: 0.9rem;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .vx-setup-button:hover[b-vbm4tqiiku] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(37, 99, 235, 0.26);
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 720px) {
    .vx-setup-page[b-vbm4tqiiku] {
        padding: 1rem;
    }

    .vx-setup-card[b-vbm4tqiiku] {
        padding: 1rem;
        border-radius: 18px;
    }

    .vx-setup-button[b-vbm4tqiiku] {
        width: 100%;
    }
}
/* /Components/Pages/Customers/CustomerPortal/Mailbox/Parts/CustomerMailboxCreateForm.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerMailboxCreateForm.razor.css

   PURPOSE:
   Scoped styles for the customer mailbox item create form.

   RESPONSIBILITIES:
   - Style the mailbox item creation form container
   - Style the create form header and actions
   - Style customer-maintainable mailbox item fields
   - Style inputs, labels, disabled states, and form buttons
   - Keep CustomerMailboxCreateForm aligned with Vixly Operations UI

   IMPORTANT NOTES:
   - This component is create-mode only
   - This file contains no business logic
   - No inline styles should be used in the Razor file
   - Customer does not select MailboxWarehouseId
   ========================================================= */

.customer-mailbox-form[b-0cjk0q93cn] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 42%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.customer-mailbox-form__header[b-0cjk0q93cn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

    .customer-mailbox-form__header h2[b-0cjk0q93cn] {
        margin: 0;
        color: #0f172a;
        font-size: 1.35rem;
        font-weight: 900;
        letter-spacing: -0.03em;
    }

    .customer-mailbox-form__header p[b-0cjk0q93cn] {
        margin: 0.45rem 0 0;
        max-width: 42rem;
        color: #64748b;
        font-size: 0.94rem;
        line-height: 1.65;
    }

.customer-mailbox-form__grid[b-0cjk0q93cn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.customer-mailbox-form__field[b-0cjk0q93cn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

    .customer-mailbox-form__field label[b-0cjk0q93cn] {
        color: #475569;
        font-size: 0.78rem;
        font-weight: 850;
        line-height: 1.35;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .customer-mailbox-form__field input[b-0cjk0q93cn] {
        width: 100%;
        min-width: 0;
        height: 46px;
        padding: 0 0.9rem;
        color: #0f172a;
        font: inherit;
        font-size: 0.94rem;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        outline: none;
        background: #ffffff;
        box-sizing: border-box;
        transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
    }

        .customer-mailbox-form__field input:hover:not(:disabled)[b-0cjk0q93cn] {
            border-color: #94a3b8;
        }

        .customer-mailbox-form__field input:focus[b-0cjk0q93cn] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
        }

        .customer-mailbox-form__field input:disabled[b-0cjk0q93cn] {
            color: #64748b;
            background: #f8fafc;
            border-color: #dbe5f0;
            cursor: not-allowed;
        }

.customer-mailbox-form__actions[b-0cjk0q93cn] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.customer-mailbox-form .gl-btn[b-0cjk0q93cn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    height: 42px;
    padding: 0 1.15rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

.customer-mailbox-form .gl-btn--primary[b-0cjk0q93cn] {
    color: #ffffff;
    border: 1px solid transparent;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

    .customer-mailbox-form .gl-btn--primary:hover:not(:disabled)[b-0cjk0q93cn] {
        transform: translateY(-1px);
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3);
    }

.customer-mailbox-form .gl-btn--secondary[b-0cjk0q93cn] {
    color: #334155;
    border: 1px solid #d6e0ea;
    background: #f8fafc;
}

    .customer-mailbox-form .gl-btn--secondary:hover:not(:disabled)[b-0cjk0q93cn] {
        color: #0f172a;
        background: #f1f5f9;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

.customer-mailbox-form .gl-btn:active:not(:disabled)[b-0cjk0q93cn] {
    transform: translateY(0);
}

.customer-mailbox-form .gl-btn:disabled[b-0cjk0q93cn] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .customer-mailbox-form__header[b-0cjk0q93cn] {
        flex-direction: column;
        align-items: stretch;
    }

        .customer-mailbox-form__header .gl-btn[b-0cjk0q93cn] {
            width: 100%;
        }

    .customer-mailbox-form__grid[b-0cjk0q93cn] {
        grid-template-columns: 1fr;
    }

    .customer-mailbox-form__actions[b-0cjk0q93cn] {
        justify-content: stretch;
    }

        .customer-mailbox-form__actions .gl-btn[b-0cjk0q93cn] {
            width: 100%;
        }
}

@media (max-width: 768px) {
    .customer-mailbox-form[b-0cjk0q93cn] {
        gap: 1rem;
        padding: 1rem;
        border-radius: 18px;
    }

    .customer-mailbox-form__header h2[b-0cjk0q93cn] {
        font-size: 1.22rem;
    }

    .customer-mailbox-form__header p[b-0cjk0q93cn] {
        font-size: 0.91rem;
    }
}
/* /Components/Pages/Customers/CustomerPortal/Mailbox/Parts/CustomerMailboxEditForm.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerMailboxEditForm.razor.css

   PURPOSE:
   Scoped styles for the customer mailbox item edit form.

   RESPONSIBILITIES:
   - Style the mailbox item edit form container
   - Style the edit form header and actions
   - Style editable mailbox item fields
   - Style inputs, labels, disabled states, and form buttons
   - Keep CustomerMailboxEditForm aligned with Vixly Operations UI

   IMPORTANT NOTES:
   - This component is edit-mode only
   - This file contains no business logic
   - No inline styles should be used in the Razor file
   - Button classes use gl-btn / gl-btn modifiers from the Razor markup
   ========================================================= */

.customer-mailbox-form[b-po8nh3am8n] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 42%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.customer-mailbox-form__header[b-po8nh3am8n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

    .customer-mailbox-form__header h2[b-po8nh3am8n] {
        margin: 0;
        color: #0f172a;
        font-size: 1.35rem;
        font-weight: 900;
        letter-spacing: -0.03em;
    }

    .customer-mailbox-form__header p[b-po8nh3am8n] {
        margin: 0.45rem 0 0;
        max-width: 42rem;
        color: #64748b;
        font-size: 0.94rem;
        line-height: 1.65;
    }

.customer-mailbox-form__grid[b-po8nh3am8n] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.customer-mailbox-form__field[b-po8nh3am8n] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

    .customer-mailbox-form__field label[b-po8nh3am8n] {
        color: #475569;
        font-size: 0.78rem;
        font-weight: 850;
        line-height: 1.35;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .customer-mailbox-form__field input[b-po8nh3am8n] {
        width: 100%;
        min-width: 0;
        height: 46px;
        padding: 0 0.9rem;
        color: #0f172a;
        font: inherit;
        font-size: 0.94rem;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        outline: none;
        background: #ffffff;
        box-sizing: border-box;
        transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
    }

        .customer-mailbox-form__field input:hover:not(:disabled)[b-po8nh3am8n] {
            border-color: #94a3b8;
        }

        .customer-mailbox-form__field input:focus[b-po8nh3am8n] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
        }

        .customer-mailbox-form__field input:disabled[b-po8nh3am8n] {
            color: #64748b;
            background: #f8fafc;
            border-color: #dbe5f0;
            cursor: not-allowed;
        }

.customer-mailbox-form__actions[b-po8nh3am8n] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.customer-mailbox-form .gl-btn[b-po8nh3am8n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    height: 42px;
    padding: 0 1.15rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

.customer-mailbox-form .gl-btn--primary[b-po8nh3am8n] {
    color: #ffffff;
    border: 1px solid transparent;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

    .customer-mailbox-form .gl-btn--primary:hover:not(:disabled)[b-po8nh3am8n] {
        transform: translateY(-1px);
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3);
    }

.customer-mailbox-form .gl-btn--secondary[b-po8nh3am8n] {
    color: #334155;
    border: 1px solid #d6e0ea;
    background: #f8fafc;
}

    .customer-mailbox-form .gl-btn--secondary:hover:not(:disabled)[b-po8nh3am8n] {
        color: #0f172a;
        background: #f1f5f9;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

.customer-mailbox-form .gl-btn:active:not(:disabled)[b-po8nh3am8n] {
    transform: translateY(0);
}

.customer-mailbox-form .gl-btn:disabled[b-po8nh3am8n] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .customer-mailbox-form__header[b-po8nh3am8n] {
        flex-direction: column;
        align-items: stretch;
    }

        .customer-mailbox-form__header .gl-btn[b-po8nh3am8n] {
            width: 100%;
        }

    .customer-mailbox-form__grid[b-po8nh3am8n] {
        grid-template-columns: 1fr;
    }

    .customer-mailbox-form__actions[b-po8nh3am8n] {
        justify-content: stretch;
    }

        .customer-mailbox-form__actions .gl-btn[b-po8nh3am8n] {
            width: 100%;
        }
}

@media (max-width: 768px) {
    .customer-mailbox-form[b-po8nh3am8n] {
        gap: 1rem;
        padding: 1rem;
        border-radius: 18px;
    }

    .customer-mailbox-form__header h2[b-po8nh3am8n] {
        font-size: 1.22rem;
    }

    .customer-mailbox-form__header p[b-po8nh3am8n] {
        font-size: 0.91rem;
    }
}
/* /Components/Pages/Customers/CustomerPortal/Mailbox/Parts/CustomerMailboxList.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerMailboxList.razor.css

   PURPOSE:
   Styles Customer Portal mailbox list mode.

   RESPONSIBILITIES:
   - Style mailbox list container
   - Style mailbox table
   - Style empty state
   - Style list actions

   IMPORTANT NOTES:
   - Scoped to CustomerMailboxList.razor
   ========================================================= */

.customer-mailbox-list[b-s23bipd6t4] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    border: 1px solid #cbdcf2;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.customer-mailbox-list__header[b-s23bipd6t4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

    .customer-mailbox-list__header h2[b-s23bipd6t4] {
        margin: 0;
        color: #0f172a;
        font-size: 1.45rem;
        font-weight: 950;
    }

    .customer-mailbox-list__header p[b-s23bipd6t4] {
        margin: 6px 0 0;
        color: #64748b;
        font-size: 0.94rem;
        font-weight: 650;
    }

.customer-mailbox-list__empty[b-s23bipd6t4] {
    padding: 28px;
    color: #64748b;
    font-weight: 800;
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    background: #f8fbff;
}

.customer-mailbox-table[b-s23bipd6t4] {
    width: 100%;
    border-collapse: collapse;
}

    .customer-mailbox-table th[b-s23bipd6t4] {
        padding: 14px 12px;
        color: #475569;
        font-size: 0.76rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-align: left;
        text-transform: uppercase;
        border-bottom: 2px solid #e2e8f0;
    }

    .customer-mailbox-table td[b-s23bipd6t4] {
        padding: 16px 12px;
        color: #0f172a;
        font-size: 0.92rem;
        font-weight: 650;
        border-bottom: 1px solid #e2e8f0;
    }

    .customer-mailbox-table tr:hover[b-s23bipd6t4] {
        background: #f8fbff;
    }

@media (max-width: 900px) {
    .customer-mailbox-list__header[b-s23bipd6t4] {
        align-items: flex-start;
        flex-direction: column;
    }

    .customer-mailbox-table[b-s23bipd6t4] {
        display: block;
        overflow-x: auto;
    }
}
.gl-btn[b-s23bipd6t4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    font-size: 0.9rem;
    font-weight: 900;
    border-radius: 14px;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

    .gl-btn:disabled[b-s23bipd6t4] {
        cursor: not-allowed;
        opacity: 0.65;
    }

.gl-btn--primary[b-s23bipd6t4] {
    color: #ffffff;
    background: #2563eb;
    border: 1px solid #2563eb;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
}

    .gl-btn--primary:hover:not(:disabled)[b-s23bipd6t4] {
        background: #1d4ed8;
        border-color: #1d4ed8;
        transform: translateY(-1px);
    }

.gl-btn--secondary[b-s23bipd6t4] {
    color: #1e3a8a;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

    .gl-btn--secondary:hover:not(:disabled)[b-s23bipd6t4] {
        background: #dbeafe;
        border-color: #93c5fd;
    }
/* /Components/Pages/Customers/CustomerPortal/Profile/Parts/CustomerProfilePage.razor.rz.scp.css */
/* =========================================================
   FILE: ProfileWorkspace.razor.css

   PURPOSE:
   Provides scoped styling for the Customer Portal profile page.

   RESPONSIBILITIES:
   - Style customer profile layout
   - Style profile information cards
   - Style editable profile forms
   - Style customer security/password card

   IMPORTANT NOTES:
   - Scoped to ProfileWorkspace.razor.
   - Keeps Customer Portal visually distinct from Operations.
   ========================================================= */

.customer-profile-page[b-yc8u4xe1uv] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.customer-profile-page__header[b-yc8u4xe1uv] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 26px;
    border: 1px solid #cbdcf2;
    border-radius: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #eef6ff 100%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
}

.customer-profile-page__eyebrow[b-yc8u4xe1uv] {
    display: inline-flex;
    margin-bottom: 8px;
    color: #2563eb;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.customer-profile-page__header h1[b-yc8u4xe1uv] {
    margin: 0;
    color: #0f172a;
    font-size: 2rem;
    font-weight: 950;
}

.customer-profile-page__header p[b-yc8u4xe1uv] {
    max-width: 620px;
    margin: 8px 0 0;
    color: #64748b;
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.55;
}

.customer-profile-grid[b-yc8u4xe1uv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.customer-profile-card[b-yc8u4xe1uv] {
    padding: 22px;
    border: 1px solid #cbdcf2;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.customer-profile-card__header[b-yc8u4xe1uv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

    .customer-profile-card__header h2[b-yc8u4xe1uv] {
        margin: 0;
        color: #0f172a;
        font-size: 1.1rem;
        font-weight: 950;
    }

    .customer-profile-card__header span[b-yc8u4xe1uv] {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 0 10px;
        color: #1d4ed8;
        font-size: 0.72rem;
        font-weight: 900;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        background: #eff6ff;
    }

.customer-profile-details[b-yc8u4xe1uv] {
    display: grid;
    gap: 14px;
    margin: 0;
}

    .customer-profile-details div[b-yc8u4xe1uv] {
        display: grid;
        gap: 4px;
        padding: 12px 14px;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        background: #f8fafc;
    }

    .customer-profile-details dt[b-yc8u4xe1uv] {
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .customer-profile-details dd[b-yc8u4xe1uv] {
        margin: 0;
        color: #0f172a;
        font-size: 0.94rem;
        font-weight: 800;
    }

.customer-profile-form[b-yc8u4xe1uv] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.customer-profile-field[b-yc8u4xe1uv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

    .customer-profile-field label[b-yc8u4xe1uv] {
        color: #334155;
        font-size: 0.82rem;
        font-weight: 900;
    }

[b-yc8u4xe1uv] .customer-profile-input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    color: #0f172a;
    font-size: 0.94rem;
    font-weight: 700;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #ffffff;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

    [b-yc8u4xe1uv] .customer-profile-input:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
    }

.customer-profile-form__row[b-yc8u4xe1uv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.customer-profile-button[b-yc8u4xe1uv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 900;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.18);
    cursor: pointer;
}

    .customer-profile-button:hover[b-yc8u4xe1uv] {
        transform: translateY(-1px);
        box-shadow: 0 18px 32px rgba(37, 99, 235, 0.22);
    }

    .customer-profile-button:disabled[b-yc8u4xe1uv] {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }

.customer-profile-button--secondary[b-yc8u4xe1uv] {
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
}

.customer-profile-alert[b-yc8u4xe1uv] {
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 0.94rem;
    font-weight: 800;
}

.customer-profile-alert--success[b-yc8u4xe1uv] {
    color: #166534;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

.customer-profile-alert--error[b-yc8u4xe1uv] {
    color: #991b1b;
    border: 1px solid #fecaca;
    background: #fef2f2;
}

@media (max-width: 1000px) {
    .customer-profile-grid[b-yc8u4xe1uv],
    .customer-profile-form__row[b-yc8u4xe1uv] {
        grid-template-columns: 1fr;
    }
}

[b-yc8u4xe1uv] .customer-profile-input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    color: #0f172a;
    font-size: 0.94rem;
    font-weight: 700;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #ffffff;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    [b-yc8u4xe1uv] .customer-profile-input:focus {
        border-color: #2563eb;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
    }
/* /Components/Pages/Customers/CustomerPortal/Profile/ProfileWorkspace.razor.rz.scp.css */
body[b-t0rqfpr9ar] {
}
/* /Components/Pages/Customers/CustomerPortal/Shipments/Parts/CustomerShipmentMailboxSelector.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerShipmentMailboxSelector.razor.css

   PURPOSE:
   Scoped styles for customer mailbox item selection.

   RESPONSIBILITIES:
   - Style mailbox item selection header
   - Style mailbox item selection cards
   - Style checkbox selection UI
   - Style mailbox item metadata display
   - Keep component aligned with Vixly Customer Portal UI

   IMPORTANT NOTES:
   - UI-only component
   - No business logic belongs here
   - No inline styles should be used
   - Workspace owns orchestration and state management
   ========================================================= */

.customer-shipment-mailbox-selector[b-nzp0fu5mzh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 42%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

/* =========================================================
   HEADER
   ========================================================= */

.customer-shipment-mailbox-selector__header[b-nzp0fu5mzh] {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

    .customer-shipment-mailbox-selector__header h3[b-nzp0fu5mzh] {
        margin: 0;
        color: #0f172a;
        font-size: 1.12rem;
        font-weight: 900;
        letter-spacing: -0.03em;
    }

    .customer-shipment-mailbox-selector__header p[b-nzp0fu5mzh] {
        margin: 0.45rem 0 0;
        color: #64748b;
        font-size: 0.93rem;
        line-height: 1.65;
    }

/* =========================================================
   LIST
   ========================================================= */

.customer-shipment-mailbox-selector__list[b-nzp0fu5mzh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* =========================================================
   ITEM CARD
   ========================================================= */

.customer-shipment-mailbox-selector__item[b-nzp0fu5mzh] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

    .customer-shipment-mailbox-selector__item:hover[b-nzp0fu5mzh] {
        border-color: #bfdbfe;
        background: #fbfdff;
        box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
        transform: translateY(-1px);
    }

    .customer-shipment-mailbox-selector__item input[type="checkbox"][b-nzp0fu5mzh] {
        width: 18px;
        height: 18px;
        margin-top: 0.15rem;
        flex-shrink: 0;
        accent-color: #2563eb;
        cursor: pointer;
    }

    .customer-shipment-mailbox-selector__item span[b-nzp0fu5mzh] {
        display: flex;
        flex-direction: column;
        min-width: 0;
        gap: 0.35rem;
    }

    .customer-shipment-mailbox-selector__item strong[b-nzp0fu5mzh] {
        color: #0f172a;
        font-size: 0.94rem;
        font-weight: 850;
        line-height: 1.4;
        word-break: break-word;
    }

    .customer-shipment-mailbox-selector__item small[b-nzp0fu5mzh] {
        color: #64748b;
        font-size: 0.86rem;
        line-height: 1.55;
    }

    /* =========================================================
   CHECKED STATE
   ========================================================= */

    .customer-shipment-mailbox-selector__item:has(input:checked)[b-nzp0fu5mzh] {
        border-color: #93c5fd;
        background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
        box-shadow: 0 12px 24px rgba(37, 99, 235, 0.10);
    }

        .customer-shipment-mailbox-selector__item:has(input:checked) strong[b-nzp0fu5mzh] {
            color: #1d4ed8;
        }

/* =========================================================
   ALERT
   ========================================================= */

.customer-shipment-mailbox-selector .vx-alert[b-nzp0fu5mzh] {
    margin: 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .customer-shipment-mailbox-selector[b-nzp0fu5mzh] {
        padding: 1rem;
        border-radius: 18px;
    }

    .customer-shipment-mailbox-selector__item[b-nzp0fu5mzh] {
        padding: 0.9rem;
    }

    .customer-shipment-mailbox-selector__header h3[b-nzp0fu5mzh] {
        font-size: 1.02rem;
    }

    .customer-shipment-mailbox-selector__header p[b-nzp0fu5mzh] {
        font-size: 0.9rem;
    }
}
/* /Components/Pages/Customers/CustomerPortal/Shipments/ShipmentsWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: ShipmentsWorkspace.razor.css

   PURPOSE:
   Scoped styles for the Customer Portal Shipments workspace.

   RESPONSIBILITIES:
   - Style workspace-level actions
   - Style Create Shipment action button
   - Maintain alignment with Customer Portal UI
   - Support responsive layouts

   IMPORTANT NOTES:
   - Shipment list styling belongs to ShipmentList
   - Create shipment form styling belongs to CreateShipment
   - This file only styles workspace-level concerns
   ========================================================= */

/* =========================================================
   WORKSPACE
   ========================================================= */

.customer-shipments-workspace[b-o9vm1xrx0r] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =========================================================
   ACTION BAR
   ========================================================= */

.customer-shipments-workspace__actions[b-o9vm1xrx0r] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
}

    .customer-shipments-workspace__actions .vx-button[b-o9vm1xrx0r] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 170px;
        height: 46px;
        padding: 0 1.35rem;
        border: none;
        border-radius: 12px;
        font: inherit;
        font-size: 0.94rem;
        font-weight: 850;
        white-space: nowrap;
        cursor: pointer;
        transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, opacity 0.16s ease;
    }

    .customer-shipments-workspace__actions .vx-button--primary[b-o9vm1xrx0r] {
        color: #ffffff;
        background: linear-gradient( 180deg, #2563eb 0%, #1d4ed8 100%);
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
    }

        .customer-shipments-workspace__actions .vx-button--primary:hover[b-o9vm1xrx0r] {
            transform: translateY(-1px);
            box-shadow: 0 12px 22px rgba(37, 99, 235, 0.32);
        }

        .customer-shipments-workspace__actions .vx-button--primary:active[b-o9vm1xrx0r] {
            transform: translateY(0);
            box-shadow: 0 8px 16px rgba(37, 99, 235, 0.22);
        }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .customer-shipments-workspace__actions[b-o9vm1xrx0r] {
        justify-content: stretch;
    }

        .customer-shipments-workspace__actions .vx-button[b-o9vm1xrx0r] {
            width: 100%;
        }
}
/* /Components/Pages/Customers/Home/Parts/CustomerHomeDashboard.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerHomeDashboard.razor.css

   PURPOSE:
   Enterprise-grade styling for the authenticated customer
   portal under-construction dashboard.

   RESPONSIBILITIES:
   - Present a polished customer portal placeholder
   - Maintain Vixly logistics visual language
   - Visually separate customer environment from staff tools
   - Avoid dependency on external illustration assets

   IMPORTANT NOTES:
   - Scoped only to CustomerHomeDashboard.razor
   ========================================================= */

.vx-customer-home-page[b-qceo0wmvfu] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 48px 24px;
    background: radial-gradient(circle at 14% 12%, rgba(59, 130, 246, 0.16), transparent 30%), radial-gradient(circle at 86% 16%, rgba(14, 165, 233, 0.12), transparent 26%), linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
}

.vx-customer-home-shell[b-qceo0wmvfu] {
    width: min(100%, 1080px);
}

.vx-customer-home-construction[b-qceo0wmvfu] {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 64px 48px;
    border-radius: 36px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(191, 219, 254, 0.68);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 100px rgba(15, 23, 42, 0.12), 0 12px 34px rgba(15, 23, 42, 0.06);
}

    .vx-customer-home-construction[b-qceo0wmvfu]::before,
    .vx-customer-home-construction[b-qceo0wmvfu]::after {
        content: "";
        position: absolute;
        border-radius: 999px;
        border: 1px dashed rgba(59, 130, 246, 0.24);
        pointer-events: none;
    }

    .vx-customer-home-construction[b-qceo0wmvfu]::before {
        width: 360px;
        height: 360px;
        top: -120px;
        left: -110px;
    }

    .vx-customer-home-construction[b-qceo0wmvfu]::after {
        width: 280px;
        height: 280px;
        right: -90px;
        bottom: -110px;
        transform: rotate(18deg);
    }

.vx-customer-home-construction__badge[b-qceo0wmvfu] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    margin-bottom: 22px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.10);
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-customer-home-construction__icon[b-qceo0wmvfu] {
    position: relative;
    z-index: 1;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    border-radius: 28px;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    border: 1px solid #bfdbfe;
    font-size: 42px;
    box-shadow: 0 24px 60px rgba(59, 130, 246, 0.16), 0 10px 24px rgba(15, 23, 42, 0.08);
}

.vx-customer-home-title[b-qceo0wmvfu] {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #0f172a;
    font-size: 52px;
    line-height: 1.04;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.vx-customer-home-subtitle[b-qceo0wmvfu] {
    position: relative;
    z-index: 1;
    margin: 18px 0 0;
    color: #475569;
    font-size: 16px;
    line-height: 1.7;
}

    .vx-customer-home-subtitle strong[b-qceo0wmvfu] {
        color: #1d4ed8;
        font-weight: 900;
    }

.vx-customer-home-message[b-qceo0wmvfu] {
    position: relative;
    z-index: 1;
    width: min(100%, 720px);
    margin-top: 34px;
    padding: 28px;
    border-radius: 26px;
    background: #f8fbff;
    border: 1px solid #dbeafe;
}

.vx-customer-home-message__title[b-qceo0wmvfu] {
    margin: 0;
    color: #0f172a;
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -0.025em;
}

.vx-customer-home-message__text[b-qceo0wmvfu] {
    margin: 14px 0 0;
    color: #475569;
    font-size: 16px;
    line-height: 1.85;
}

@media (max-width: 900px) {
    .vx-customer-home-page[b-qceo0wmvfu] {
        padding: 32px 18px;
    }

    .vx-customer-home-construction[b-qceo0wmvfu] {
        padding: 44px 26px;
        border-radius: 28px;
    }

    .vx-customer-home-title[b-qceo0wmvfu] {
        font-size: 38px;
    }

    .vx-customer-home-message[b-qceo0wmvfu] {
        padding: 22px;
    }
}
/* /Components/Pages/Customers/Login/Parts/CustomerForgotPassword.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerForgotPassword.razor.css

   PURPOSE:
   Enterprise-grade styling for the customer forgot-password
   UI component.

   RESPONSIBILITIES:
   - Style the modern customer password recovery form
   - Maintain Vixly customer portal visual language
   - Support the split visual + form layout
   - Keep styling scoped to the UI-only component

   IMPORTANT NOTES:
   - Scoped only to CustomerForgotPassword.razor
   - No orchestrator styling belongs here
   ========================================================= */

.vx-customer-forgot-page[b-zjjjks7z3o] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 48px 24px;
    background: radial-gradient(circle at 12% 14%, rgba(59, 130, 246, 0.16), transparent 30%), radial-gradient(circle at 88% 16%, rgba(14, 165, 233, 0.12), transparent 26%), linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
}

.vx-customer-forgot-shell[b-zjjjks7z3o] {
    width: min(100%, 1180px);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 42px;
    align-items: center;
}

.vx-customer-forgot-visual[b-zjjjks7z3o],
.vx-customer-forgot-card[b-zjjjks7z3o] {
    min-height: 620px;
    border-radius: 36px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(191, 219, 254, 0.68);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 100px rgba(15, 23, 42, 0.12), 0 12px 34px rgba(15, 23, 42, 0.06);
}

.vx-customer-forgot-visual[b-zjjjks7z3o] {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 48px;
}

.vx-customer-forgot-visual__badge[b-zjjjks7z3o] {
    position: absolute;
    top: 34px;
    left: 34px;
    z-index: 2;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.10);
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-customer-forgot-orbit[b-zjjjks7z3o] {
    position: absolute;
    border-radius: 999px;
    border: 1px dashed rgba(59, 130, 246, 0.26);
}

.vx-customer-forgot-orbit--outer[b-zjjjks7z3o] {
    width: 420px;
    height: 420px;
}

.vx-customer-forgot-orbit--inner[b-zjjjks7z3o] {
    width: 310px;
    height: 310px;
    transform: rotate(18deg);
}

.vx-customer-forgot-device[b-zjjjks7z3o] {
    position: relative;
    z-index: 1;
    width: min(100%, 380px);
    padding: 24px;
    border-radius: 32px;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    border: 1px solid #bfdbfe;
    box-shadow: 0 28px 70px rgba(59, 130, 246, 0.16), 0 12px 30px rgba(15, 23, 42, 0.08);
}

.vx-customer-forgot-device__top[b-zjjjks7z3o] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

    .vx-customer-forgot-device__top span[b-zjjjks7z3o] {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: #93c5fd;
    }

.vx-customer-forgot-device__hero[b-zjjjks7z3o] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
}

    .vx-customer-forgot-device__hero p[b-zjjjks7z3o] {
        margin: 0 0 6px;
        font-size: 13px;
        opacity: 0.88;
    }

    .vx-customer-forgot-device__hero strong[b-zjjjks7z3o] {
        font-size: 24px;
        letter-spacing: -0.03em;
    }

.vx-customer-forgot-device__status[b-zjjjks7z3o] {
    align-self: flex-start;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 12px;
    font-weight: 900;
}

.vx-customer-forgot-device__steps[b-zjjjks7z3o] {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

    .vx-customer-forgot-device__steps article[b-zjjjks7z3o] {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 15px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #dbeafe;
    }

    .vx-customer-forgot-device__steps span[b-zjjjks7z3o] {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: #eff6ff;
        color: #2563eb;
        font-size: 14px;
        font-weight: 900;
        flex-shrink: 0;
    }

    .vx-customer-forgot-device__steps strong[b-zjjjks7z3o] {
        display: block;
        color: #0f172a;
        font-size: 14px;
    }

    .vx-customer-forgot-device__steps p[b-zjjjks7z3o] {
        margin: 3px 0 0;
        color: #64748b;
        font-size: 13px;
        line-height: 1.5;
    }

.vx-customer-forgot-floating[b-zjjjks7z3o] {
    position: absolute;
    z-index: 2;
    padding: 12px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
}

.vx-customer-forgot-floating--left[b-zjjjks7z3o] {
    left: 34px;
    bottom: 96px;
}

.vx-customer-forgot-floating--right[b-zjjjks7z3o] {
    right: 34px;
    top: 120px;
}

.vx-customer-forgot-card[b-zjjjks7z3o] {
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vx-customer-forgot-brand[b-zjjjks7z3o] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
}

.vx-customer-forgot-logo[b-zjjjks7z3o] {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
    font-weight: 950;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24);
}

.vx-customer-forgot-eyebrow[b-zjjjks7z3o] {
    margin: 0 0 4px;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-customer-forgot-title[b-zjjjks7z3o] {
    margin: 0;
    color: #0f172a;
    font-size: 42px;
    line-height: 1.04;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.vx-customer-forgot-subtitle[b-zjjjks7z3o] {
    margin: 0 0 30px;
    color: #475569;
    font-size: 16px;
    line-height: 1.8;
}

.vx-customer-forgot-message[b-zjjjks7z3o] {
    margin-bottom: 22px;
    padding: 15px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.65;
}

.vx-customer-forgot-message--error[b-zjjjks7z3o] {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.20);
    color: #b91c1c;
}

.vx-customer-forgot-message--success[b-zjjjks7z3o] {
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.18);
    color: #166534;
}

.vx-customer-forgot-form[b-zjjjks7z3o] {
    display: grid;
    gap: 20px;
}

.vx-customer-forgot-field[b-zjjjks7z3o] {
    display: grid;
    gap: 10px;
}

.vx-customer-forgot-label[b-zjjjks7z3o] {
    color: #1e293b;
    font-size: 14px;
    font-weight: 900;
}

.vx-customer-forgot-input[b-zjjjks7z3o] {
    width: 100%;
    min-height: 54px;
    padding: 0 18px;
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 15px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .vx-customer-forgot-input:focus[b-zjjjks7z3o] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
        transform: translateY(-1px);
    }

.vx-customer-forgot-button[b-zjjjks7z3o] {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
    font-size: 15px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

    .vx-customer-forgot-button:hover[b-zjjjks7z3o] {
        transform: translateY(-2px);
        filter: brightness(1.03);
        box-shadow: 0 20px 44px rgba(37, 99, 235, 0.34);
    }

.vx-customer-forgot-footer[b-zjjjks7z3o] {
    margin: 26px 0 0;
    color: #64748b;
    font-size: 14px;
    text-align: center;
}

.vx-customer-forgot-link-button[b-zjjjks7z3o] {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
}

    .vx-customer-forgot-link-button:hover[b-zjjjks7z3o] {
        text-decoration: underline;
    }

@media (max-width: 980px) {
    .vx-customer-forgot-shell[b-zjjjks7z3o] {
        grid-template-columns: 1fr;
    }

    .vx-customer-forgot-visual[b-zjjjks7z3o] {
        min-height: 500px;
    }
}

@media (max-width: 640px) {
    .vx-customer-forgot-page[b-zjjjks7z3o] {
        padding: 28px 18px;
    }

    .vx-customer-forgot-card[b-zjjjks7z3o],
    .vx-customer-forgot-visual[b-zjjjks7z3o] {
        min-height: auto;
        padding: 32px 24px;
        border-radius: 26px;
    }

    .vx-customer-forgot-title[b-zjjjks7z3o] {
        font-size: 32px;
    }

    .vx-customer-forgot-visual[b-zjjjks7z3o] {
        display: none;
    }
}
/* /Components/Pages/Customers/Login/Parts/CustomerLoginForm.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerLoginForm.razor.css

   PURPOSE:
   Enterprise-grade styling for the customer login UI.

   RESPONSIBILITIES:
   - Present a modern customer portal login experience
   - Visually separate customer access from staff operations
   - Maintain Vixly logistics visual language
   - Keep styling scoped to CustomerLoginForm.razor

   IMPORTANT NOTES:
   - Scoped only to CustomerLoginForm.razor
   - This file styles UI only
   ========================================================= */

.vx-customer-login-page[b-c2fzd4g3nm] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 48px 24px;
    background: radial-gradient(circle at 12% 14%, rgba(59, 130, 246, 0.16), transparent 30%), radial-gradient(circle at 88% 16%, rgba(14, 165, 233, 0.12), transparent 26%), linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
}

.vx-customer-login-shell[b-c2fzd4g3nm] {
    width: min(100%, 1180px);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 42px;
    align-items: center;
}

.vx-customer-login-visual[b-c2fzd4g3nm],
.vx-customer-login-card[b-c2fzd4g3nm] {
    min-height: 620px;
    border-radius: 36px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(191, 219, 254, 0.68);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 100px rgba(15, 23, 42, 0.12), 0 12px 34px rgba(15, 23, 42, 0.06);
}

.vx-customer-login-visual[b-c2fzd4g3nm] {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 48px;
}

.vx-customer-login-visual__badge[b-c2fzd4g3nm] {
    position: absolute;
    top: 34px;
    left: 34px;
    z-index: 2;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.10);
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-customer-login-orbit[b-c2fzd4g3nm] {
    position: absolute;
    border-radius: 999px;
    border: 1px dashed rgba(59, 130, 246, 0.26);
}

.vx-customer-login-orbit--outer[b-c2fzd4g3nm] {
    width: 420px;
    height: 420px;
}

.vx-customer-login-orbit--inner[b-c2fzd4g3nm] {
    width: 310px;
    height: 310px;
    transform: rotate(18deg);
}

.vx-customer-login-device[b-c2fzd4g3nm] {
    position: relative;
    z-index: 1;
    width: min(100%, 380px);
    padding: 24px;
    border-radius: 32px;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    border: 1px solid #bfdbfe;
    box-shadow: 0 28px 70px rgba(59, 130, 246, 0.16), 0 12px 30px rgba(15, 23, 42, 0.08);
}

.vx-customer-login-device__top[b-c2fzd4g3nm] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

    .vx-customer-login-device__top span[b-c2fzd4g3nm] {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: #93c5fd;
    }

.vx-customer-login-device__hero[b-c2fzd4g3nm] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
}

    .vx-customer-login-device__hero p[b-c2fzd4g3nm] {
        margin: 0 0 6px;
        font-size: 13px;
        opacity: 0.88;
    }

    .vx-customer-login-device__hero strong[b-c2fzd4g3nm] {
        font-size: 26px;
        letter-spacing: -0.03em;
    }

.vx-customer-login-device__status[b-c2fzd4g3nm] {
    align-self: flex-start;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 12px;
    font-weight: 900;
}

.vx-customer-login-device__route[b-c2fzd4g3nm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 28px 12px;
}

.vx-customer-login-device__dot[b-c2fzd4g3nm] {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #2563eb;
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.12);
}

.vx-customer-login-device__dot--end[b-c2fzd4g3nm] {
    background: #f97316;
    box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.14);
}

.vx-customer-login-device__line[b-c2fzd4g3nm] {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: repeating-linear-gradient( 90deg, #93c5fd 0, #93c5fd 16px, transparent 16px, transparent 26px);
}

.vx-customer-login-device__list[b-c2fzd4g3nm] {
    display: grid;
    gap: 12px;
}

    .vx-customer-login-device__list article[b-c2fzd4g3nm] {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 15px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #dbeafe;
    }

    .vx-customer-login-device__list span[b-c2fzd4g3nm] {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: #eff6ff;
    }

    .vx-customer-login-device__list strong[b-c2fzd4g3nm] {
        display: block;
        color: #0f172a;
        font-size: 14px;
    }

    .vx-customer-login-device__list p[b-c2fzd4g3nm] {
        margin: 3px 0 0;
        color: #64748b;
        font-size: 13px;
    }

.vx-customer-login-floating[b-c2fzd4g3nm] {
    position: absolute;
    z-index: 2;
    padding: 12px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
}

.vx-customer-login-floating--left[b-c2fzd4g3nm] {
    left: 34px;
    bottom: 96px;
}

.vx-customer-login-floating--right[b-c2fzd4g3nm] {
    right: 34px;
    top: 120px;
}

.vx-customer-login-card[b-c2fzd4g3nm] {
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vx-customer-login-brand[b-c2fzd4g3nm] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
}

.vx-customer-login-logo[b-c2fzd4g3nm] {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
    font-weight: 950;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24);
}

.vx-customer-login-eyebrow[b-c2fzd4g3nm] {
    margin: 0 0 4px;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-customer-login-title[b-c2fzd4g3nm] {
    margin: 0;
    color: #0f172a;
    font-size: 44px;
    line-height: 1.04;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.vx-customer-login-subtitle[b-c2fzd4g3nm] {
    margin: 0 0 30px;
    color: #475569;
    font-size: 16px;
    line-height: 1.8;
}

.vx-customer-login-message[b-c2fzd4g3nm] {
    margin-bottom: 22px;
    padding: 15px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.65;
}

.vx-customer-login-message--error[b-c2fzd4g3nm] {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.20);
    color: #b91c1c;
}

.vx-customer-login-form[b-c2fzd4g3nm] {
    display: grid;
    gap: 20px;
}

.vx-customer-login-field[b-c2fzd4g3nm] {
    display: grid;
    gap: 10px;
}

.vx-customer-login-label-row[b-c2fzd4g3nm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vx-customer-login-label[b-c2fzd4g3nm] {
    color: #1e293b;
    font-size: 14px;
    font-weight: 900;
}

.vx-customer-login-input[b-c2fzd4g3nm] {
    width: 100%;
    min-height: 54px;
    padding: 0 18px;
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 15px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .vx-customer-login-input:focus[b-c2fzd4g3nm] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
        transform: translateY(-1px);
    }

.vx-customer-login-button[b-c2fzd4g3nm] {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
    font-size: 15px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

    .vx-customer-login-button:hover[b-c2fzd4g3nm] {
        transform: translateY(-2px);
        filter: brightness(1.03);
        box-shadow: 0 20px 44px rgba(37, 99, 235, 0.34);
    }

.vx-customer-login-footer[b-c2fzd4g3nm] {
    margin: 26px 0 0;
    color: #64748b;
    font-size: 14px;
    text-align: center;
}

.vx-customer-login-link[b-c2fzd4g3nm] {
    color: #2563eb;
    font-weight: 900;
    text-decoration: none;
}

    .vx-customer-login-link:hover[b-c2fzd4g3nm] {
        text-decoration: underline;
    }

@media (max-width: 980px) {
    .vx-customer-login-shell[b-c2fzd4g3nm] {
        grid-template-columns: 1fr;
    }

    .vx-customer-login-visual[b-c2fzd4g3nm] {
        min-height: 500px;
    }
}

@media (max-width: 640px) {
    .vx-customer-login-page[b-c2fzd4g3nm] {
        padding: 28px 18px;
    }

    .vx-customer-login-card[b-c2fzd4g3nm],
    .vx-customer-login-visual[b-c2fzd4g3nm] {
        min-height: auto;
        padding: 32px 24px;
        border-radius: 26px;
    }

    .vx-customer-login-title[b-c2fzd4g3nm] {
        font-size: 34px;
    }

    .vx-customer-login-visual[b-c2fzd4g3nm] {
        display: none;
    }
}
.vx-customer-login-link-button[b-c2fzd4g3nm] {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
}

    .vx-customer-login-link-button:hover[b-c2fzd4g3nm] {
        text-decoration: underline;
    }
/* /Components/Pages/Customers/Login/Parts/CustomerResetPassword.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerResetPassword.razor.css

   PURPOSE:
   Enterprise-grade styling for the customer reset-password
   UI component.

   RESPONSIBILITIES:
   - Style the modern customer password reset form
   - Maintain Vixly customer portal visual language
   - Support the split visual + form layout
   - Keep styling scoped to the UI-only component

   IMPORTANT NOTES:
   - Scoped only to CustomerResetPassword.razor
   - No orchestrator styling belongs here
   ========================================================= */

.vx-customer-reset-page[b-0akh1hwg2o] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 48px 24px;
    background: radial-gradient(circle at 12% 14%, rgba(59, 130, 246, 0.16), transparent 30%), radial-gradient(circle at 88% 16%, rgba(14, 165, 233, 0.12), transparent 26%), linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
}

.vx-customer-reset-shell[b-0akh1hwg2o] {
    width: min(100%, 1180px);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 42px;
    align-items: center;
}

.vx-customer-reset-visual[b-0akh1hwg2o],
.vx-customer-reset-card[b-0akh1hwg2o] {
    min-height: 620px;
    border-radius: 36px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(191, 219, 254, 0.68);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 100px rgba(15, 23, 42, 0.12), 0 12px 34px rgba(15, 23, 42, 0.06);
}

.vx-customer-reset-visual[b-0akh1hwg2o] {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 48px;
}

.vx-customer-reset-visual__badge[b-0akh1hwg2o] {
    position: absolute;
    top: 34px;
    left: 34px;
    z-index: 2;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.10);
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-customer-reset-orbit[b-0akh1hwg2o] {
    position: absolute;
    border-radius: 999px;
    border: 1px dashed rgba(59, 130, 246, 0.26);
}

.vx-customer-reset-orbit--outer[b-0akh1hwg2o] {
    width: 420px;
    height: 420px;
}

.vx-customer-reset-orbit--inner[b-0akh1hwg2o] {
    width: 310px;
    height: 310px;
    transform: rotate(18deg);
}

.vx-customer-reset-device[b-0akh1hwg2o] {
    position: relative;
    z-index: 1;
    width: min(100%, 380px);
    padding: 24px;
    border-radius: 32px;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    border: 1px solid #bfdbfe;
    box-shadow: 0 28px 70px rgba(59, 130, 246, 0.16), 0 12px 30px rgba(15, 23, 42, 0.08);
}

.vx-customer-reset-device__top[b-0akh1hwg2o] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

    .vx-customer-reset-device__top span[b-0akh1hwg2o] {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: #93c5fd;
    }

.vx-customer-reset-device__hero[b-0akh1hwg2o] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
}

    .vx-customer-reset-device__hero p[b-0akh1hwg2o] {
        margin: 0 0 6px;
        font-size: 13px;
        opacity: 0.88;
    }

    .vx-customer-reset-device__hero strong[b-0akh1hwg2o] {
        font-size: 24px;
        letter-spacing: -0.03em;
    }

.vx-customer-reset-device__status[b-0akh1hwg2o] {
    align-self: flex-start;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 12px;
    font-weight: 900;
}

.vx-customer-reset-device__security[b-0akh1hwg2o] {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

    .vx-customer-reset-device__security article[b-0akh1hwg2o] {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 15px;
        border-radius: 18px;
        background: #ffffff;
        border: 1px solid #dbeafe;
    }

    .vx-customer-reset-device__security span[b-0akh1hwg2o] {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: #eff6ff;
    }

    .vx-customer-reset-device__security strong[b-0akh1hwg2o] {
        display: block;
        color: #0f172a;
        font-size: 14px;
    }

    .vx-customer-reset-device__security p[b-0akh1hwg2o] {
        margin: 3px 0 0;
        color: #64748b;
        font-size: 13px;
        line-height: 1.5;
    }

.vx-customer-reset-floating[b-0akh1hwg2o] {
    position: absolute;
    z-index: 2;
    padding: 12px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
}

.vx-customer-reset-floating--left[b-0akh1hwg2o] {
    left: 34px;
    bottom: 96px;
}

.vx-customer-reset-floating--right[b-0akh1hwg2o] {
    right: 34px;
    top: 120px;
}

.vx-customer-reset-card[b-0akh1hwg2o] {
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vx-customer-reset-brand[b-0akh1hwg2o] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
}

.vx-customer-reset-logo[b-0akh1hwg2o] {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
    font-weight: 950;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24);
}

.vx-customer-reset-eyebrow[b-0akh1hwg2o] {
    margin: 0 0 4px;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-customer-reset-title[b-0akh1hwg2o] {
    margin: 0;
    color: #0f172a;
    font-size: 42px;
    line-height: 1.04;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.vx-customer-reset-subtitle[b-0akh1hwg2o] {
    margin: 0 0 30px;
    color: #475569;
    font-size: 16px;
    line-height: 1.8;
}

.vx-customer-reset-message[b-0akh1hwg2o] {
    margin-bottom: 22px;
    padding: 15px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.65;
}

.vx-customer-reset-message--error[b-0akh1hwg2o] {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.20);
    color: #b91c1c;
}

.vx-customer-reset-form[b-0akh1hwg2o] {
    display: grid;
    gap: 20px;
}

.vx-customer-reset-field[b-0akh1hwg2o] {
    display: grid;
    gap: 10px;
}

.vx-customer-reset-label[b-0akh1hwg2o] {
    color: #1e293b;
    font-size: 14px;
    font-weight: 900;
}

.vx-customer-reset-input[b-0akh1hwg2o] {
    width: 100%;
    min-height: 54px;
    padding: 0 18px;
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 15px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .vx-customer-reset-input:focus[b-0akh1hwg2o] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
        transform: translateY(-1px);
    }

.vx-customer-reset-button[b-0akh1hwg2o] {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
    font-size: 15px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

    .vx-customer-reset-button:hover[b-0akh1hwg2o] {
        transform: translateY(-2px);
        filter: brightness(1.03);
        box-shadow: 0 20px 44px rgba(37, 99, 235, 0.34);
    }

.vx-customer-reset-footer[b-0akh1hwg2o] {
    margin: 26px 0 0;
    color: #64748b;
    font-size: 14px;
    text-align: center;
}

.vx-customer-reset-link-button[b-0akh1hwg2o] {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
}

    .vx-customer-reset-link-button:hover[b-0akh1hwg2o] {
        text-decoration: underline;
    }

@media (max-width: 980px) {
    .vx-customer-reset-shell[b-0akh1hwg2o] {
        grid-template-columns: 1fr;
    }

    .vx-customer-reset-visual[b-0akh1hwg2o] {
        min-height: 500px;
    }
}

@media (max-width: 640px) {
    .vx-customer-reset-page[b-0akh1hwg2o] {
        padding: 28px 18px;
    }

    .vx-customer-reset-card[b-0akh1hwg2o],
    .vx-customer-reset-visual[b-0akh1hwg2o] {
        min-height: auto;
        padding: 32px 24px;
        border-radius: 26px;
    }

    .vx-customer-reset-title[b-0akh1hwg2o] {
        font-size: 32px;
    }

    .vx-customer-reset-visual[b-0akh1hwg2o] {
        display: none;
    }
}
/* /Components/Pages/Customers/Registration/CustomerRegistrationWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerRegistrationWorkspace.razor.css

   PURPOSE:
   Scoped styles for the Customer Registration public page.

   RESPONSIBILITIES:
   - Present a premium customer onboarding experience
   - Match Vixly visual language used across operational pages
   - Keep the form compact, balanced, and customer-friendly
   - Provide a polished visual panel without external assets

   IMPORTANT NOTES:
   - Scoped styles only
   - No inline styles in razor
   - Uses ::deep for Blazor scoped child component styling
   - Follows Vixly card, border, radius, shadow, and density language
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.vx-registration-page[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-page {
    width: 100%;
    min-height: 100%;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34rem), linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
    padding: 1.35rem;
}

.vx-registration-shell[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-shell {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(340px, 0.92fr) minmax(430px, 1.08fr);
    gap: 1.15rem;
    align-items: stretch;
}

/* =========================================================
   LEFT HERO PANEL
   ========================================================= */

.vx-registration-hero[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-hero {
    position: sticky;
    top: 1.35rem;
    align-self: start;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: calc(100vh - 2.7rem);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #dbe5f0;
    border-radius: 22px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    padding: 1.15rem;
}

    .vx-registration-hero[b-esyrsjkwf3]::before,
    [b-esyrsjkwf3] .vx-registration-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(37, 99, 235, 0.08), transparent 38%), radial-gradient(circle at 82% 12%, rgba(14, 165, 233, 0.12), transparent 12rem);
    }

.vx-registration-hero__content[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-hero__content {
    position: relative;
    z-index: 1;
}

.vx-registration-hero__eyebrow[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-hero__eyebrow {
    margin: 0 0 0.45rem 0;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.vx-registration-hero__title[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-hero__title {
    max-width: 28rem;
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    line-height: 1.05;
    font-weight: 950;
    color: #0f172a;
}

.vx-registration-hero__subtitle[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-hero__subtitle {
    max-width: 32rem;
    margin: 0.75rem 0 0 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #475569;
}

/* =========================================================
   VISUAL PANEL
   ========================================================= */

.vx-registration-visual[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-visual {
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 285px;
    border-radius: 20px;
    border: 1px solid #dbe5f0;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 42%, #ffffff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 12px 26px rgba(15, 23, 42, 0.06);
}

.vx-registration-visual__bubble[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-visual__bubble {
    position: absolute;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
}

.vx-registration-visual__bubble--one[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-visual__bubble--one {
    width: 190px;
    height: 190px;
    top: -58px;
    right: -52px;
}

.vx-registration-visual__bubble--two[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-visual__bubble--two {
    width: 128px;
    height: 128px;
    left: 1.25rem;
    bottom: 1.15rem;
    background: rgba(14, 165, 233, 0.14);
}

.vx-registration-visual__device[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-visual__device {
    position: absolute;
    left: 1.2rem;
    top: 1.35rem;
    width: 185px;
    min-height: 205px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
    padding: 1rem;
}

.vx-registration-visual__device-top[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-visual__device-top {
    width: 54px;
    height: 10px;
    border-radius: 999px;
    background: #2563eb;
    margin-bottom: 1.1rem;
}

.vx-registration-visual__device-line[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-visual__device-line {
    height: 10px;
    border-radius: 999px;
    background: #dbeafe;
    margin-bottom: 0.7rem;
}

.vx-registration-visual__device-line--short[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-visual__device-line--short {
    width: 68%;
}

.vx-registration-visual__device-box[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-visual__device-box {
    height: 76px;
    margin-top: 1rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #eaf1f8 100%);
    border: 1px solid #e5edf5;
}

.vx-registration-visual__person[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-visual__person {
    position: absolute;
    right: 2rem;
    top: 3.75rem;
    width: 116px;
    height: 150px;
}

.vx-registration-visual__head[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-visual__head {
    width: 54px;
    height: 54px;
    margin: 0 auto;
    border-radius: 999px;
    background: #2563eb;
    border: 5px solid #ffffff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

.vx-registration-visual__body[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-visual__body {
    width: 116px;
    height: 80px;
    margin-top: 0.55rem;
    border-radius: 34px 34px 18px 18px;
    background: #0f172a;
    box-shadow: 0 16px 26px rgba(15, 23, 42, 0.20);
}

.vx-registration-visual__badge[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-visual__badge {
    position: absolute;
    right: 1.2rem;
    bottom: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.62rem 0.75rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 850;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.vx-registration-visual__check[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-visual__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    color: #ffffff;
    background: #22c55e;
    font-size: 0.85rem;
    font-weight: 900;
}

/* =========================================================
   BENEFITS
   ========================================================= */

.vx-registration-benefits[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-benefits {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.vx-registration-benefit[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-benefit {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 0.65rem;
    align-items: start;
    padding: 0.75rem 0.85rem;
    background: rgba(248, 250, 252, 0.88);
    border: 1px solid #e5edf5;
    border-radius: 16px;
}

.vx-registration-benefit__icon[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: #1d4ed8;
    background: #dbeafe;
    font-size: 0.86rem;
    font-weight: 950;
}

.vx-registration-benefit__title[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-benefit__title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 900;
    color: #0f172a;
}

.vx-registration-benefit__text[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-benefit__text {
    margin: 0.16rem 0 0 0;
    font-size: 0.84rem;
    line-height: 1.42;
    color: #64748b;
}

/* =========================================================
   MAIN / FORM CARD
   ========================================================= */

.vx-registration-main[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-main {
    display: flex;
    align-items: flex-start;
}

.vx-registration-card[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dbe5f0;
    border-radius: 22px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    padding: 1.15rem;
}

.vx-registration-card--success[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-card--success {
    text-align: center;
}

.vx-registration-card__title[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-card__title {
    margin: 0 0 0.95rem 0;
    font-size: 1.18rem;
    line-height: 1.25;
    font-weight: 900;
    color: #0f172a;
}

/* =========================================================
   MESSAGES
   ========================================================= */

.vx-registration-message[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-message {
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.vx-registration-message--error[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-message--error {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.vx-registration-message--success[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-message--success {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.vx-registration-message--info[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-message--info {
    color: #1e293b;
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
}

.vx-registration-success-icon[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-registration-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 0.8rem auto;
    border-radius: 999px;
    color: #ffffff;
    background: #22c55e;
    font-size: 1.35rem;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(34, 197, 94, 0.18);
}

/* =========================================================
   FORM
   ========================================================= */

.vx-form[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-form {
    display: flex;
    flex-direction: column;
    gap: 0.68rem;
}

.vx-form__row[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-form__row {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    min-width: 0;
}

.vx-form__grid[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.68rem;
}

.vx-form__label[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-form__label {
    font-size: 0.76rem;
    font-weight: 850;
    color: #334155;
}

.vx-form__input[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-form__input {
    width: 100%;
    min-height: 36px;
    padding: 0.46rem 0.68rem;
    border-radius: 12px;
    border: 1px solid #dbe5f0;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

    .vx-form__input:focus[b-esyrsjkwf3],
    [b-esyrsjkwf3] .vx-form__input:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

/* =========================================================
   ACTIONS
   ========================================================= */

.vx-form__actions[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-form__actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.45rem;
}

.vx-btn[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.68rem 1.18rem;
    border-radius: 13px;
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.vx-btn--primary[b-esyrsjkwf3],
[b-esyrsjkwf3] .vx-btn--primary {
    color: #ffffff;
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

    .vx-btn--primary:hover[b-esyrsjkwf3],
    [b-esyrsjkwf3] .vx-btn--primary:hover {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(37, 99, 235, 0.26);
    }

    .vx-btn--primary:disabled[b-esyrsjkwf3],
    [b-esyrsjkwf3] .vx-btn--primary:disabled {
        background: #93c5fd;
        border-color: #93c5fd;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1080px) {
    .vx-registration-shell[b-esyrsjkwf3],
    [b-esyrsjkwf3] .vx-registration-shell {
        grid-template-columns: 1fr;
    }

    .vx-registration-hero[b-esyrsjkwf3],
    [b-esyrsjkwf3] .vx-registration-hero {
        position: static;
        min-height: auto;
    }
}

@media (max-width: 720px) {
    .vx-registration-page[b-esyrsjkwf3],
    [b-esyrsjkwf3] .vx-registration-page {
        padding: 1rem;
    }

    .vx-form__grid[b-esyrsjkwf3],
    [b-esyrsjkwf3] .vx-form__grid {
        grid-template-columns: 1fr;
    }

    .vx-registration-card[b-esyrsjkwf3],
    [b-esyrsjkwf3] .vx-registration-card,
    .vx-registration-hero[b-esyrsjkwf3],
    [b-esyrsjkwf3] .vx-registration-hero {
        padding: 1rem;
        border-radius: 18px;
    }

    .vx-registration-visual[b-esyrsjkwf3],
    [b-esyrsjkwf3] .vx-registration-visual {
        min-height: 235px;
    }

    .vx-registration-visual__person[b-esyrsjkwf3],
    [b-esyrsjkwf3] .vx-registration-visual__person {
        right: 1rem;
    }

    .vx-form__actions[b-esyrsjkwf3],
    [b-esyrsjkwf3] .vx-form__actions {
        justify-content: stretch;
    }

    .vx-btn[b-esyrsjkwf3],
    [b-esyrsjkwf3] .vx-btn {
        width: 100%;
    }
}
/* /Components/Pages/Customers/Registration/Parts/CustomerRegistrationForm.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerRegistrationWorkspace.razor.css

   PURPOSE:
   Scoped styles for the Customer Registration public page.

   RESPONSIBILITIES:
   - Provide clean, enterprise-grade layout
   - Match existing Vixly visual language
   - Avoid style leakage (scoped to this component)
   ========================================================= */

.vx-registration-page[b-vmyihopi2j] {
    min-height: 100%;
    background: #f8fafc;
    padding: 32px 16px;
}

.vx-registration-shell[b-vmyihopi2j] {
    max-width: 760px;
    margin: 0 auto;
}

/* =========================================================
   HERO
   ========================================================= */
.vx-registration-hero[b-vmyihopi2j] {
    margin-bottom: 24px;
}

.vx-registration-hero__eyebrow[b-vmyihopi2j] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-registration-hero__title[b-vmyihopi2j] {
    margin: 8px 0 6px;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
}

.vx-registration-hero__subtitle[b-vmyihopi2j] {
    margin: 0;
    color: #475569;
}

/* =========================================================
   CARD
   ========================================================= */
.vx-registration-card[b-vmyihopi2j] {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

.vx-registration-card--success[b-vmyihopi2j] {
    text-align: center;
}

.vx-registration-card__title[b-vmyihopi2j] {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    color: #0f172a;
}

/* =========================================================
   MESSAGES
   ========================================================= */
.vx-registration-message[b-vmyihopi2j] {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
}

.vx-registration-message--error[b-vmyihopi2j] {
    background: #fee2e2;
    color: #991b1b;
}

.vx-registration-message--success[b-vmyihopi2j] {
    background: #dcfce7;
    color: #166534;
}

.vx-registration-message--info[b-vmyihopi2j] {
    background: #e2e8f0;
    color: #1e293b;
}

.vx-registration-success-icon[b-vmyihopi2j] {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: #22c55e;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
}

/* =========================================================
   FORM
   ========================================================= */
.vx-form[b-vmyihopi2j] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vx-form__row[b-vmyihopi2j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vx-form__grid[b-vmyihopi2j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.vx-form__label[b-vmyihopi2j] {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}

.vx-form__input[b-vmyihopi2j] {
    height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #cbd5f5;
    font-size: 14px;
    outline: none;
}

    .vx-form__input:focus[b-vmyihopi2j] {
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }

/* =========================================================
   ACTIONS
   ========================================================= */
.vx-form__actions[b-vmyihopi2j] {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.vx-btn[b-vmyihopi2j] {
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    cursor: pointer;
}

.vx-btn--primary[b-vmyihopi2j] {
    background: #2563eb;
    color: white;
}

    .vx-btn--primary:disabled[b-vmyihopi2j] {
        background: #93c5fd;
        cursor: not-allowed;
    }
/* /Components/Pages/Customers/Shared/CustomerPortalLayout.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerPortalLayout.razor.css

   PURPOSE:
   Layout styling for Customer Portal pages.

   RESPONSIBILITIES:
   - Create sidebar/content shell
   - Support responsive layout
   ========================================================= */

.customer-portal-layout[b-4e2czz2acz] {
    display: flex;
    min-height: 100vh;
    background: #f8fafc;
}

.customer-portal-layout__sidebar[b-4e2czz2acz] {
    flex: 0 0 286px;
}

.customer-portal-layout__content[b-4e2czz2acz] {
    flex: 1;
    min-width: 0;
    padding: 32px;
    overflow-x: auto;
}

@media (max-width: 900px) {
    .customer-portal-layout[b-4e2czz2acz] {
        flex-direction: column;
    }

    .customer-portal-layout__sidebar[b-4e2czz2acz] {
        flex: none;
    }

    .customer-portal-layout__content[b-4e2czz2acz] {
        padding: 20px;
    }
}
.customer-coming-soon[b-4e2czz2acz] {
    max-width: 760px;
    padding: 34px;
    border: 1px solid #dbeafe;
    border-radius: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 60%, #eff6ff 100%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
}

.customer-coming-soon__eyebrow[b-4e2czz2acz] {
    display: inline-flex;
    margin-bottom: 12px;
    color: #2563eb;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.customer-coming-soon h1[b-4e2czz2acz] {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 2rem;
    font-weight: 900;
}

.customer-coming-soon p[b-4e2czz2acz] {
    max-width: 560px;
    margin: 0;
    color: #64748b;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.6;
}

.customer-coming-soon--warning[b-4e2czz2acz] {
    border-color: #fed7aa;
    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
}

.customer-coming-soon__action[b-4e2czz2acz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    margin-top: 20px;
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
}
/* /Components/Pages/Customers/Shared/CustomerSidebar.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerSidebar.razor.css

   PURPOSE:
   Provides scoped styling for the Customer Portal sidebar.

   RESPONSIBILITIES:
   - Style grouped Customer Portal navigation
   - Style Blazor NavLink output using ::deep
   - Create strong sidebar/body separation
   - Provide clear active navigation state
   - Keep Customer Portal visually distinct from Operations

   IMPORTANT NOTES:
   - NavLink renders child anchor elements, so ::deep is required.
   - This sidebar is intentionally higher contrast than the first version.
   ========================================================= */

.customer-sidebar[b-5l1jux771i] {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    width: 292px;
    min-height: 100vh;
    padding: 22px 16px;
    background: linear-gradient(180deg, #eaf2fb 0%, #eef5fc 52%, #e5effa 100%);
    border-right: 1px solid #cbdcf2;
    box-shadow: 14px 0 34px rgba(15, 23, 42, 0.11);
}

.customer-sidebar__brand[b-5l1jux771i] {
    padding: 18px 16px;
    margin-bottom: 22px;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.customer-sidebar__eyebrow[b-5l1jux771i] {
    display: block;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.customer-sidebar__title[b-5l1jux771i] {
    display: block;
    color: #0f172a;
    font-size: 1.14rem;
    font-weight: 950;
}

.customer-sidebar__nav[b-5l1jux771i] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
}

.customer-sidebar__group[b-5l1jux771i] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 4px;
}

.customer-sidebar__group-button[b-5l1jux771i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    color: #475569;
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}

    .customer-sidebar__group-button:hover[b-5l1jux771i] {
        color: #1d4ed8;
        background: rgba(255, 255, 255, 0.62);
    }

.customer-sidebar__chevron[b-5l1jux771i] {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 950;
}

.customer-sidebar__submenu[b-5l1jux771i] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* NavLink output must be styled through ::deep because NavLink is a child component. */
[b-5l1jux771i] .customer-sidebar__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 14px;
    color: #1f2937;
    font-size: 0.96rem;
    font-weight: 850;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

    [b-5l1jux771i] .customer-sidebar__link:hover {
        color: #1d4ed8;
        background: rgba(255, 255, 255, 0.72);
        border-color: #bfdbfe;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
        transform: translateX(3px);
    }

    [b-5l1jux771i] .customer-sidebar__link.active {
        color: #0f172a;
        background: #ffffff;
        border-color: #93c5fd;
        box-shadow: 0 16px 30px rgba(37, 99, 235, 0.16);
    }

        [b-5l1jux771i] .customer-sidebar__link.active::before {
            content: "";
            position: absolute;
            left: -7px;
            top: 10px;
            width: 4px;
            height: 30px;
            border-radius: 999px;
            background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
        }

.customer-sidebar__icon[b-5l1jux771i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    color: #1d4ed8;
    font-size: 1.18rem;
    font-weight: 950;
    border: 1px solid #bfdbfe;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.09);
}

[b-5l1jux771i] .customer-sidebar__link.active .customer-sidebar__icon {
    color: #ffffff;
    border-color: #2563eb;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

.customer-sidebar__footer[b-5l1jux771i] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px;
    margin-top: 22px;
    border: 1px solid #bfdbfe;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07);
}

.customer-sidebar__footer-label[b-5l1jux771i] {
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 950;
}

.customer-sidebar__footer-text[b-5l1jux771i] {
    color: #475569;
    font-size: 0.79rem;
    font-weight: 700;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .customer-sidebar[b-5l1jux771i] {
        position: relative;
        width: 100%;
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid #cbdcf2;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    }
}

.customer-sidebar__logout-form[b-5l1jux771i] {
    margin-top: 12px;
}

.customer-sidebar__logout-button[b-5l1jux771i] {
    width: 100%;
    min-height: 40px;
    color: #991b1b;
    font-size: 0.86rem;
    font-weight: 900;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fef2f2;
    cursor: pointer;
}

    .customer-sidebar__logout-button:hover[b-5l1jux771i] {
        color: #ffffff;
        background: #dc2626;
        border-color: #dc2626;
    }
/* /Components/Pages/Customers/Verification/CustomerVerificationWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerVerificationWorkspace.razor.css

   PURPOSE:
   Scoped styles for the Customer Email Verification public page.

   RESPONSIBILITIES:
   - Maintain Vixly public portal visual language
   - Provide clear success, error, and processing states
   - Keep layout consistent with registration experience
   - Ensure responsive and polished UX

   IMPORTANT NOTES:
   - Scoped styles only
   - No inline styles in razor
   - Reuses card, border, shadow, and spacing language
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.vx-verification-page[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-page {
    width: 100%;
    min-height: 100%;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34rem), linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
    padding: 1.35rem;
}

.vx-verification-shell[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-shell {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

/* =========================================================
   CARD
   ========================================================= */

.vx-verification-card[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dbe5f0;
    border-radius: 22px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    padding: 1.4rem;
}

/* =========================================================
   STATES
   ========================================================= */

.vx-verification-status[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
}

.vx-verification-status--processing[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-status--processing {
    color: #1e293b;
}

.vx-verification-status--success[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-status--success {
    color: #166534;
}

.vx-verification-status--error[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-status--error {
    color: #991b1b;
}

/* =========================================================
   ICONS
   ========================================================= */

.vx-verification-icon[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    font-size: 1.4rem;
    font-weight: 900;
}

.vx-verification-icon--success[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-icon--success {
    color: #ffffff;
    background: #22c55e;
    box-shadow: 0 10px 20px rgba(34, 197, 94, 0.18);
}

.vx-verification-icon--error[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-icon--error {
    color: #ffffff;
    background: #ef4444;
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.18);
}

/* =========================================================
   SPINNER
   ========================================================= */

.vx-verification-spinner[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-spinner {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 3px solid #dbe5f0;
    border-top-color: #2563eb;
    animation: vx-spin-b-u9pmqk0rxq 0.8s linear infinite;
}

@keyframes vx-spin-b-u9pmqk0rxq {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   TEXT
   ========================================================= */

.vx-verification-eyebrow[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.vx-verification-title[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 950;
    color: #0f172a;
}

.vx-verification-message[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-message {
    margin-top: 0.4rem;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 420px;
}

.vx-verification-status--success .vx-verification-message[b-u9pmqk0rxq] {
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.vx-verification-status--error .vx-verification-message[b-u9pmqk0rxq] {
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.vx-verification-status--processing .vx-verification-message[b-u9pmqk0rxq] {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.vx-verification-button[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-button {
    margin-top: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.68rem 1.2rem;
    border-radius: 13px;
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease;
}

/* Primary (continue) */

.vx-verification-button[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-button {
    color: #ffffff;
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

    .vx-verification-button:hover[b-u9pmqk0rxq],
    [b-u9pmqk0rxq] .vx-verification-button:hover {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(37, 99, 235, 0.26);
    }

/* Secondary */

.vx-verification-button--secondary[b-u9pmqk0rxq],
[b-u9pmqk0rxq] .vx-verification-button--secondary {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #dbe5f0;
    box-shadow: none;
}

    .vx-verification-button--secondary:hover[b-u9pmqk0rxq],
    [b-u9pmqk0rxq] .vx-verification-button--secondary:hover {
        background: #f8fafc;
        transform: none;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {
    .vx-verification-page[b-u9pmqk0rxq],
    [b-u9pmqk0rxq] .vx-verification-page {
        padding: 1rem;
    }

    .vx-verification-card[b-u9pmqk0rxq],
    [b-u9pmqk0rxq] .vx-verification-card {
        padding: 1rem;
        border-radius: 18px;
    }

    .vx-verification-button[b-u9pmqk0rxq],
    [b-u9pmqk0rxq] .vx-verification-button {
        width: 100%;
    }
}
/* /Components/Pages/Dashboard/Components/ActivityPanel.razor.rz.scp.css */
/* =========================================================
   FILE: ActivityPanel.razor.css

   PURPOSE:
   Scoped styling for the dashboard recent activity panel.
   ========================================================= */

.vx-panel[b-wmvao4t4mm] {
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08);
}

.vx-panel__header[b-wmvao4t4mm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.vx-panel__eyebrow[b-wmvao4t4mm] {
    margin: 0 0 6px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.vx-panel__title[b-wmvao4t4mm] {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.vx-panel__subtitle[b-wmvao4t4mm] {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}

.vx-panel__badge[b-wmvao4t4mm] {
    flex: 0 0 auto;
    padding: 7px 11px;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    border-radius: 999px;
    background: #eff6ff;
}

.vx-activity-list[b-wmvao4t4mm] {
    display: grid;
    gap: 12px;
}

.vx-activity-item[b-wmvao4t4mm] {
    display: flex;
    gap: 13px;
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

    .vx-activity-item:hover[b-wmvao4t4mm] {
        transform: translateY(-1px);
        border-color: rgba(37, 99, 235, 0.24);
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    }

.vx-activity-item__marker[b-wmvao4t4mm] {
    width: 11px;
    height: 11px;
    margin-top: 5px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #2563eb;
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.12);
}

.vx-activity-item__content[b-wmvao4t4mm] {
    display: grid;
    gap: 4px;
}

    .vx-activity-item__content strong[b-wmvao4t4mm] {
        color: #0f172a;
        font-size: 14px;
    }

    .vx-activity-item__content span[b-wmvao4t4mm] {
        color: #64748b;
        font-size: 13px;
        line-height: 1.5;
    }

.vx-activity-empty[b-wmvao4t4mm] {
    display: grid;
    place-items: center;
    padding: 34px 18px;
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 20px;
    background: #f8fafc;
}

.vx-activity-empty__icon[b-wmvao4t4mm] {
    margin-bottom: 10px;
    font-size: 28px;
}

.vx-activity-empty strong[b-wmvao4t4mm] {
    color: #0f172a;
}

.vx-activity-empty p[b-wmvao4t4mm] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
}
/* /Components/Pages/Dashboard/Components/KpiCard.razor.rz.scp.css */
/* =========================================================
   FILE: KpiCard.razor.css

   PURPOSE:
   Scoped styling for dashboard KPI cards.
   ========================================================= */

.vx-kpi-card[b-vvutdjv8dr] {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 24px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 9rem), linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

    .vx-kpi-card:hover[b-vvutdjv8dr] {
        transform: translateY(-2px);
        box-shadow: 0 28px 70px rgba(15, 23, 42, 0.12);
    }

.vx-kpi-card__top[b-vvutdjv8dr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.vx-kpi-card__icon[b-vvutdjv8dr] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: #eff6ff;
    font-size: 20px;
}

.vx-kpi-card__label[b-vvutdjv8dr] {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vx-kpi-card__value[b-vvutdjv8dr] {
    display: block;
    color: #0f172a;
    font-size: clamp(2rem, 4vw, 2.65rem);
    line-height: 1;
    letter-spacing: -0.07em;
}

.vx-kpi-card__meta[b-vvutdjv8dr] {
    display: block;
    margin-top: 10px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}
/* /Components/Pages/Dashboard/Components/QuickActionsPanel.razor.rz.scp.css */
/* =========================================================
   FILE: QuickActionsPanel.razor.css

   PURPOSE:
   Scoped styling for dashboard quick actions.

   RESPONSIBILITIES:
   - Style the quick actions dashboard panel
   - Style quick action buttons as modern action cards
   - Fix Blazor scoped CSS button rendering issues
   ========================================================= */

.vx-panel[b-xee5oefaps] {
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08);
}

.vx-panel__header[b-xee5oefaps] {
    margin-bottom: 20px;
}

.vx-panel__eyebrow[b-xee5oefaps] {
    margin: 0 0 6px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.vx-panel__title[b-xee5oefaps] {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.vx-panel__subtitle[b-xee5oefaps] {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}

.vx-action-list[b-xee5oefaps] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

    /* =========================================================
   QUICK ACTION BUTTONS
   ========================================================= */

    .vx-action-list button.vx-action-button[b-xee5oefaps] {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 82px;
        padding: 14px;
        text-align: left;
        border: 1px solid rgba(226, 232, 240, 0.95);
        border-radius: 18px;
        background: linear-gradient(180deg, #ffffff, #f8fafc);
        cursor: pointer;
        appearance: none;
        font: inherit;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
    }

        .vx-action-list button.vx-action-button:hover[b-xee5oefaps] {
            transform: translateY(-1px);
            border-color: rgba(37, 99, 235, 0.32);
            background: #ffffff;
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.09);
        }

.vx-action-button__icon[b-xee5oefaps] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 15px;
    background: #eff6ff;
    font-size: 20px;
}

.vx-action-button__content[b-xee5oefaps] {
    display: grid;
    gap: 5px;
    min-width: 0;
}

    .vx-action-button__content strong[b-xee5oefaps] {
        display: block;
        color: #0f172a;
        font-size: 14px;
        line-height: 1.2;
        font-weight: 900;
    }

    .vx-action-button__content small[b-xee5oefaps] {
        display: block;
        color: #64748b;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;
    }

/* =========================================================
   EMPTY STATE
   ========================================================= */

.vx-action-empty[b-xee5oefaps] {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    padding: 34px 18px;
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 20px;
    background: #f8fafc;
}

    .vx-action-empty span[b-xee5oefaps] {
        margin-bottom: 10px;
        font-size: 28px;
    }

    .vx-action-empty strong[b-xee5oefaps] {
        color: #0f172a;
    }

    .vx-action-empty p[b-xee5oefaps] {
        margin: 6px 0 0;
        color: #64748b;
        font-size: 13px;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 720px) {
    .vx-action-list[b-xee5oefaps] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Dashboard/DashboardHome.razor.rz.scp.css */
/* =========================================================
   FILE: DashboardHome.razor.css

   PURPOSE:
   Scoped styling for the Operations dashboard home shell.

   RESPONSIBILITIES:
   - Provide modern executive dashboard styling
   - Create hero operations section
   - Provide responsive KPI and content layouts
   - Align dashboard visuals with enterprise SaaS standards

   IMPORTANT NOTES:
   - Fully responsive
   - No fixed heights
   - Works inside MainLayout scroll container
   ========================================================= */

.vx-dashboard[b-hyub3dsdz6] {
    display: grid;
    gap: 28px;
    max-width: 1600px;
    margin: 0 auto;
}

/* =========================================================
   HERO
   ========================================================= */

.vx-dashboard-hero[b-hyub3dsdz6] {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 320px;
    gap: 24px;
    padding: 34px;
    border-radius: 32px;
    background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.28), transparent 20rem), linear-gradient(135deg, #020617 0%, #0f172a 45%, #1d4ed8 100%);
    box-shadow: 0 34px 80px rgba(15, 23, 42, 0.24);
}

.vx-dashboard-hero__content[b-hyub3dsdz6] {
    position: relative;
    z-index: 1;
}

.vx-dashboard-hero__eyebrow[b-hyub3dsdz6] {
    margin: 0 0 10px;
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.vx-dashboard-hero__title[b-hyub3dsdz6] {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.5rem, 5vw, 4.8rem);
    line-height: 0.96;
    letter-spacing: -0.08em;
}

.vx-dashboard-hero__subtitle[b-hyub3dsdz6] {
    max-width: 760px;
    margin: 18px 0 0;
    color: #dbeafe;
    font-size: 15px;
    line-height: 1.8;
}

.vx-dashboard-hero__actions[b-hyub3dsdz6] {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

.vx-dashboard-hero button.vx-dashboard-hero__button[b-hyub3dsdz6] {
    min-height: 50px;
    padding: 0 20px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

    .vx-dashboard-hero button.vx-dashboard-hero__button:hover[b-hyub3dsdz6] {
        transform: translateY(-1px);
    }

.vx-dashboard-hero button.vx-dashboard-hero__button--primary[b-hyub3dsdz6] {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 18px 38px rgba(37, 99, 235, 0.28);
}

.vx-dashboard-hero button.vx-dashboard-hero__button--secondary[b-hyub3dsdz6] {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
}

.vx-dashboard-hero__metrics[b-hyub3dsdz6] {
    display: grid;
    gap: 14px;
}

.vx-dashboard-hero__metric[b-hyub3dsdz6] {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

    .vx-dashboard-hero__metric strong[b-hyub3dsdz6] {
        display: block;
        color: #ffffff;
        font-size: 2rem;
        line-height: 1;
    }

    .vx-dashboard-hero__metric span[b-hyub3dsdz6] {
        display: block;
        margin-top: 8px;
        color: #dbeafe;
        font-size: 13px;
    }

/* =========================================================
   GRIDS
   ========================================================= */

.vx-dashboard__grid[b-hyub3dsdz6] {
    display: grid;
    gap: 20px;
}

.vx-dashboard__grid--kpi[b-hyub3dsdz6] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vx-dashboard__grid--content[b-hyub3dsdz6] {
    grid-template-columns: 1.1fr 0.9fr;
}

.vx-dashboard__column[b-hyub3dsdz6] {
    min-width: 0;
}

/* =========================================================
   STATUS BAR
   ========================================================= */

.vx-dashboard-status[b-hyub3dsdz6] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.vx-dashboard-status__item[b-hyub3dsdz6] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.vx-dashboard-status__indicator[b-hyub3dsdz6] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.vx-dashboard-status__indicator--online[b-hyub3dsdz6] {
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.14);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .vx-dashboard__grid--kpi[b-hyub3dsdz6] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vx-dashboard__grid--content[b-hyub3dsdz6],
    .vx-dashboard-hero[b-hyub3dsdz6] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {

    .vx-dashboard[b-hyub3dsdz6] {
        gap: 20px;
    }

    .vx-dashboard-hero[b-hyub3dsdz6] {
        padding: 26px;
    }

    .vx-dashboard-hero__title[b-hyub3dsdz6] {
        font-size: 2.4rem;
    }

    .vx-dashboard-hero__actions[b-hyub3dsdz6] {
        flex-direction: column;
    }

    .vx-dashboard__grid--kpi[b-hyub3dsdz6] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Device/Parts/RegisterDevice.razor.rz.scp.css */
/* =========================================================
   FILE: RegisterDevice.razor.css

   PURPOSE:
   Shared scoped styling foundation for the device registration
   workflow UI components.

   RESPONSIBILITIES:
   - Style device workflow pages
   - Provide enterprise-grade form layout
   - Style workflow states
   - Style alerts, buttons, messages, and cards
   - Keep styling concerns isolated from orchestration logic

   IMPORTANT NOTES:
   - This stylesheet is intended to support:
       RegisterDevice.razor
       RegisterDevicePending.razor
       RegisterDeviceApproved.razor
       RegisterDeviceDenied.razor
   - No orchestration logic belongs here
   - No global layout overrides belong here
   ========================================================= */

.vx-device-page[b-lscx5hii7z] {
    min-height: 100vh;
    padding: 48px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.06), transparent 28%), #f8fafc;
}

.vx-device-card[b-lscx5hii7z] {
    width: 100%;
    max-width: 560px;
    padding: 36px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04);
}

.vx-device-card__header[b-lscx5hii7z] {
    margin-bottom: 30px;
}

.vx-device-card__badge[b-lscx5hii7z],
.vx-device-card__status[b-lscx5hii7z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.vx-device-card__badge[b-lscx5hii7z] {
    margin-bottom: 18px;
    background: #eff6ff;
    color: #1d4ed8;
}

.vx-device-card__status[b-lscx5hii7z] {
    margin-bottom: 20px;
    background: #f8fafc;
    color: #334155;
}

.vx-device-card__status--success[b-lscx5hii7z] {
    background: #ecfdf5;
    color: #166534;
}

.vx-device-card__status--danger[b-lscx5hii7z] {
    background: #fef2f2;
    color: #991b1b;
}

.vx-device-card__title[b-lscx5hii7z] {
    margin: 0;
    color: #0f172a;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 800;
}

.vx-device-card__subtitle[b-lscx5hii7z] {
    margin-top: 14px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.vx-device-form[b-lscx5hii7z] {
    display: grid;
    gap: 18px;
}

.vx-device-form__group[b-lscx5hii7z] {
    display: grid;
    gap: 8px;
}

.vx-device-form__label[b-lscx5hii7z] {
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

.vx-device-form__input[b-lscx5hii7z] {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 15px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

    .vx-device-form__input:focus[b-lscx5hii7z] {
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
    }

    .vx-device-form__input[b-lscx5hii7z]::placeholder {
        color: #94a3b8;
    }

.vx-device-alert[b-lscx5hii7z] {
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
}

.vx-device-alert--error[b-lscx5hii7z] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.vx-device-alert--success[b-lscx5hii7z] {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.vx-device-form__button[b-lscx5hii7z],
.vx-device-button[b-lscx5hii7z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 18px;
    border: none;
    border-radius: 16px;
    background: #2563eb;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-device-form__button:hover:not(:disabled)[b-lscx5hii7z],
    .vx-device-button:hover[b-lscx5hii7z] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
    }

    .vx-device-form__button:disabled[b-lscx5hii7z] {
        opacity: 0.65;
        cursor: not-allowed;
    }

.vx-device-message[b-lscx5hii7z] {
    margin-top: 24px;
    padding: 20px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.vx-device-message__title[b-lscx5hii7z] {
    margin: 0 0 14px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
}

.vx-device-message__list[b-lscx5hii7z] {
    margin: 0;
    padding-left: 18px;
    color: #475569;
    line-height: 1.8;
}

.vx-device-note[b-lscx5hii7z] {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}

.vx-device-card__footer[b-lscx5hii7z] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

    .vx-device-card__footer p[b-lscx5hii7z] {
        margin: 0;
        color: #64748b;
        font-size: 13px;
        line-height: 1.7;
    }
/* /Components/Pages/Device/Parts/RegisterDeviceApproved.razor.rz.scp.css */
/* =========================================================
   FILE: RegisterDeviceApproved.razor.css

   PURPOSE:
   Shared scoped styling foundation for the device registration
   workflow UI components.

   RESPONSIBILITIES:
   - Style device workflow pages
   - Provide enterprise-grade form layout
   - Style workflow states
   - Style alerts, buttons, messages, and cards
   - Keep styling concerns isolated from orchestration logic

   IMPORTANT NOTES:
   - This stylesheet is intended to support:
       RegisterDevice.razor
       RegisterDevicePending.razor
       RegisterDeviceApproved.razor
       RegisterDeviceDenied.razor
   - No orchestration logic belongs here
   - No global layout overrides belong here
   ========================================================= */

.vx-device-page[b-y25obxzq10] {
    min-height: 100vh;
    padding: 48px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.06), transparent 28%), #f8fafc;
}

.vx-device-card[b-y25obxzq10] {
    width: 100%;
    max-width: 560px;
    padding: 36px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04);
}

.vx-device-card__header[b-y25obxzq10] {
    margin-bottom: 30px;
}

.vx-device-card__badge[b-y25obxzq10],
.vx-device-card__status[b-y25obxzq10] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.vx-device-card__badge[b-y25obxzq10] {
    margin-bottom: 18px;
    background: #eff6ff;
    color: #1d4ed8;
}

.vx-device-card__status[b-y25obxzq10] {
    margin-bottom: 20px;
    background: #f8fafc;
    color: #334155;
}

.vx-device-card__status--success[b-y25obxzq10] {
    background: #ecfdf5;
    color: #166534;
}

.vx-device-card__status--danger[b-y25obxzq10] {
    background: #fef2f2;
    color: #991b1b;
}

.vx-device-card__title[b-y25obxzq10] {
    margin: 0;
    color: #0f172a;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 800;
}

.vx-device-card__subtitle[b-y25obxzq10] {
    margin-top: 14px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.vx-device-form[b-y25obxzq10] {
    display: grid;
    gap: 18px;
}

.vx-device-form__group[b-y25obxzq10] {
    display: grid;
    gap: 8px;
}

.vx-device-form__label[b-y25obxzq10] {
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

.vx-device-form__input[b-y25obxzq10] {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 15px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

    .vx-device-form__input:focus[b-y25obxzq10] {
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
    }

    .vx-device-form__input[b-y25obxzq10]::placeholder {
        color: #94a3b8;
    }

.vx-device-alert[b-y25obxzq10] {
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
}

.vx-device-alert--error[b-y25obxzq10] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.vx-device-alert--success[b-y25obxzq10] {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.vx-device-form__button[b-y25obxzq10],
.vx-device-button[b-y25obxzq10] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 18px;
    border: none;
    border-radius: 16px;
    background: #2563eb;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-device-form__button:hover:not(:disabled)[b-y25obxzq10],
    .vx-device-button:hover[b-y25obxzq10] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
    }

    .vx-device-form__button:disabled[b-y25obxzq10] {
        opacity: 0.65;
        cursor: not-allowed;
    }

.vx-device-message[b-y25obxzq10] {
    margin-top: 24px;
    padding: 20px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.vx-device-message__title[b-y25obxzq10] {
    margin: 0 0 14px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
}

.vx-device-message__list[b-y25obxzq10] {
    margin: 0;
    padding-left: 18px;
    color: #475569;
    line-height: 1.8;
}

.vx-device-note[b-y25obxzq10] {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}

.vx-device-card__footer[b-y25obxzq10] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

    .vx-device-card__footer p[b-y25obxzq10] {
        margin: 0;
        color: #64748b;
        font-size: 13px;
        line-height: 1.7;
    }
/* /Components/Pages/Device/Parts/RegisterDeviceDenied.razor.rz.scp.css */
/* =========================================================
   FILE: RegisterDeviceDenied.razor.css

   PURPOSE:
   Shared scoped styling foundation for the device registration
   workflow UI components.

   RESPONSIBILITIES:
   - Style device workflow pages
   - Provide enterprise-grade form layout
   - Style workflow states
   - Style alerts, buttons, messages, and cards
   - Keep styling concerns isolated from orchestration logic

   IMPORTANT NOTES:
   - This stylesheet is intended to support:
       RegisterDevice.razor
       RegisterDevicePending.razor
       RegisterDeviceApproved.razor
       RegisterDeviceDenied.razor
   - No orchestration logic belongs here
   - No global layout overrides belong here
   ========================================================= */

.vx-device-page[b-ievhju7j0d] {
    min-height: 100vh;
    padding: 48px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.06), transparent 28%), #f8fafc;
}

.vx-device-card[b-ievhju7j0d] {
    width: 100%;
    max-width: 560px;
    padding: 36px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04);
}

.vx-device-card__header[b-ievhju7j0d] {
    margin-bottom: 30px;
}

.vx-device-card__badge[b-ievhju7j0d],
.vx-device-card__status[b-ievhju7j0d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.vx-device-card__badge[b-ievhju7j0d] {
    margin-bottom: 18px;
    background: #eff6ff;
    color: #1d4ed8;
}

.vx-device-card__status[b-ievhju7j0d] {
    margin-bottom: 20px;
    background: #f8fafc;
    color: #334155;
}

.vx-device-card__status--success[b-ievhju7j0d] {
    background: #ecfdf5;
    color: #166534;
}

.vx-device-card__status--danger[b-ievhju7j0d] {
    background: #fef2f2;
    color: #991b1b;
}

.vx-device-card__title[b-ievhju7j0d] {
    margin: 0;
    color: #0f172a;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 800;
}

.vx-device-card__subtitle[b-ievhju7j0d] {
    margin-top: 14px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.vx-device-form[b-ievhju7j0d] {
    display: grid;
    gap: 18px;
}

.vx-device-form__group[b-ievhju7j0d] {
    display: grid;
    gap: 8px;
}

.vx-device-form__label[b-ievhju7j0d] {
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

.vx-device-form__input[b-ievhju7j0d] {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 15px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

    .vx-device-form__input:focus[b-ievhju7j0d] {
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
    }

    .vx-device-form__input[b-ievhju7j0d]::placeholder {
        color: #94a3b8;
    }

.vx-device-alert[b-ievhju7j0d] {
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
}

.vx-device-alert--error[b-ievhju7j0d] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.vx-device-alert--success[b-ievhju7j0d] {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.vx-device-form__button[b-ievhju7j0d],
.vx-device-button[b-ievhju7j0d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 18px;
    border: none;
    border-radius: 16px;
    background: #2563eb;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-device-form__button:hover:not(:disabled)[b-ievhju7j0d],
    .vx-device-button:hover[b-ievhju7j0d] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
    }

    .vx-device-form__button:disabled[b-ievhju7j0d] {
        opacity: 0.65;
        cursor: not-allowed;
    }

.vx-device-message[b-ievhju7j0d] {
    margin-top: 24px;
    padding: 20px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.vx-device-message__title[b-ievhju7j0d] {
    margin: 0 0 14px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
}

.vx-device-message__list[b-ievhju7j0d] {
    margin: 0;
    padding-left: 18px;
    color: #475569;
    line-height: 1.8;
}

.vx-device-note[b-ievhju7j0d] {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}

.vx-device-card__footer[b-ievhju7j0d] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

    .vx-device-card__footer p[b-ievhju7j0d] {
        margin: 0;
        color: #64748b;
        font-size: 13px;
        line-height: 1.7;
    }
/* /Components/Pages/Device/Parts/RegisterDevicePending.razor.rz.scp.css */
/* =========================================================
   FILE: RegisterDevicePending.razor.css

   PURPOSE:
   Scoped enterprise styling for the device registration
   pending approval experience.

   RESPONSIBILITIES:
   - Center the pending approval experience
   - Provide enterprise visual hierarchy
   - Display approval workflow steps
   - Provide responsive pending-state UX

   IMPORTANT NOTES:
   - Scoped only to RegisterDevicePending.razor
   - No global selectors
   ========================================================= */

.vx-device-pending-page[b-4l2w3qjva5] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: radial-gradient(circle at top, #eff6ff 0%, #f8fafc 35%, #f8fafc 100%);
}

.vx-device-pending-card[b-4l2w3qjva5] {
    position: relative;
    width: 100%;
    max-width: 760px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 32px;
    padding: 48px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.vx-device-pending-card__glow[b-4l2w3qjva5] {
    position: absolute;
    top: -120px;
    right: -120px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(37,99,235,0.12), transparent 70%);
    pointer-events: none;
}

.vx-device-pending-card__icon-wrap[b-4l2w3qjva5] {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.vx-device-pending-card__icon[b-4l2w3qjva5] {
    width: 88px;
    height: 88px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.30);
}

    .vx-device-pending-card__icon span[b-4l2w3qjva5] {
        width: 36px;
        height: 36px;
        border: 4px solid #ffffff;
        border-top-color: transparent;
        border-radius: 999px;
    }

.vx-device-pending-card__status[b-4l2w3qjva5] {
    width: fit-content;
    margin: 0 auto 20px auto;
    padding: 10px 18px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vx-device-pending-card__title[b-4l2w3qjva5] {
    margin: 0;
    text-align: center;
    font-size: 48px;
    line-height: 1.05;
    font-weight: 800;
    color: #0f172a;
}

.vx-device-pending-card__subtitle[b-4l2w3qjva5] {
    margin: 24px auto 0 auto;
    max-width: 620px;
    text-align: center;
    font-size: 18px;
    line-height: 1.8;
    color: #64748b;
}

.vx-device-pending-timeline[b-4l2w3qjva5] {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.vx-device-pending-step[b-4l2w3qjva5] {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.vx-device-pending-step--done[b-4l2w3qjva5] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.vx-device-pending-step--active[b-4l2w3qjva5] {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.vx-device-pending-step__marker[b-4l2w3qjva5] {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1d4ed8;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.vx-device-pending-step h2[b-4l2w3qjva5] {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.vx-device-pending-step p[b-4l2w3qjva5] {
    margin: 0;
    line-height: 1.7;
    color: #64748b;
}

.vx-device-pending-note[b-4l2w3qjva5] {
    margin-top: 32px;
    padding: 24px;
    border-radius: 20px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    line-height: 1.8;
}

.vx-device-pending-footer[b-4l2w3qjva5] {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    color: #64748b;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .vx-device-pending-card[b-4l2w3qjva5] {
        padding: 32px 24px;
        border-radius: 24px;
    }

    .vx-device-pending-card__title[b-4l2w3qjva5] {
        font-size: 36px;
    }

    .vx-device-pending-card__subtitle[b-4l2w3qjva5] {
        font-size: 16px;
    }

    .vx-device-pending-step[b-4l2w3qjva5] {
        padding: 20px;
    }
}
/* /Components/Pages/Device/ReassignLicense/Parts/ReassignLicense.razor.rz.scp.css */
/* =========================================================
   FILE: ReassignLicense.razor.css

   PURPOSE:
   Provides scoped styling for the replacement-device license
   reassignment workflow.

   RESPONSIBILITIES:
   - Style the reassignment page surface
   - Preserve the existing Vixly device workflow UI language
   - Style the replacement-device form
   - Style success and error alert states
   - Keep styling isolated from workspace orchestration

   IMPORTANT NOTES:
   - This stylesheet belongs to ReassignLicense.razor only
   - No orchestration logic belongs here
   - The visual language intentionally matches the existing
     RegisterDevice workflow styling
   ========================================================= */

.vx-device-page[b-8d44q7gqq9] {
    min-height: 100vh;
    padding: 48px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.06), transparent 28%), #f8fafc;
}

.vx-device-card[b-8d44q7gqq9] {
    width: 100%;
    max-width: 560px;
    padding: 36px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04);
}

.vx-device-card__header[b-8d44q7gqq9] {
    margin-bottom: 30px;
}

.vx-device-card__title[b-8d44q7gqq9] {
    margin: 0;
    color: #0f172a;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 800;
}

.vx-device-card__subtitle[b-8d44q7gqq9] {
    margin-top: 14px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.vx-device-form[b-8d44q7gqq9] {
    display: grid;
    gap: 18px;
}

.vx-device-form__group[b-8d44q7gqq9] {
    display: grid;
    gap: 8px;
}

.vx-device-form__label[b-8d44q7gqq9] {
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

.vx-device-form__input[b-8d44q7gqq9] {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 15px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

    .vx-device-form__input:focus[b-8d44q7gqq9] {
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
    }

    .vx-device-form__input[b-8d44q7gqq9]::placeholder {
        color: #94a3b8;
    }

.vx-device-alert[b-8d44q7gqq9] {
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
}

.vx-device-alert--error[b-8d44q7gqq9] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.vx-device-alert--success[b-8d44q7gqq9] {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.vx-device-form__button[b-8d44q7gqq9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 18px;
    border: none;
    border-radius: 16px;
    background: #2563eb;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-device-form__button:hover:not(:disabled)[b-8d44q7gqq9] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
    }

    .vx-device-form__button:disabled[b-8d44q7gqq9] {
        opacity: 0.65;
        cursor: not-allowed;
    }

.vx-device-card__footer[b-8d44q7gqq9] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

    .vx-device-card__footer p[b-8d44q7gqq9] {
        margin: 0;
        color: #64748b;
        font-size: 13px;
        line-height: 1.7;
    }
/* /Components/Pages/Device/RegisterDeviceWorkspace.razor.rz.scp.css */
body[b-ucj1bh9aa9] {
}
/* /Components/Pages/Device/RegisterFirstDevice/Parts/SetupFirstDevice.razor.rz.scp.css */
/* =========================================================
   FILE: SetupFirstDevice.razor.css

   PURPOSE:
   Provides scoped styling for the first-device onboarding
   setup workflow.

   RESPONSIBILITIES:
   - Style the first-device setup page surface
   - Preserve the existing Vixly device workflow UI language
   - Style the device setup form
   - Style success and error alert states
   - Keep styling isolated from workspace orchestration

   IMPORTANT NOTES:
   - This stylesheet belongs to SetupFirstDevice.razor only
   - No orchestration logic belongs here
   - The visual language intentionally matches the existing
     device registration and reassignment workflows
   ========================================================= */

.vx-device-page[b-9jhy6hufqq] {
    min-height: 100vh;
    padding: 48px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.06), transparent 28%), #f8fafc;
}

.vx-device-card[b-9jhy6hufqq] {
    width: 100%;
    max-width: 560px;
    padding: 36px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04);
}

.vx-device-card__header[b-9jhy6hufqq] {
    margin-bottom: 30px;
}

.vx-device-card__title[b-9jhy6hufqq] {
    margin: 0;
    color: #0f172a;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 800;
}

.vx-device-card__subtitle[b-9jhy6hufqq] {
    margin-top: 14px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.vx-device-form[b-9jhy6hufqq] {
    display: grid;
    gap: 18px;
}

.vx-device-form__group[b-9jhy6hufqq] {
    display: grid;
    gap: 8px;
}

.vx-device-form__label[b-9jhy6hufqq] {
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

.vx-device-form__input[b-9jhy6hufqq] {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 15px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

    .vx-device-form__input:focus[b-9jhy6hufqq] {
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
    }

    .vx-device-form__input[b-9jhy6hufqq]::placeholder {
        color: #94a3b8;
    }

.vx-device-alert[b-9jhy6hufqq] {
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
}

.vx-device-alert--error[b-9jhy6hufqq] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.vx-device-alert--success[b-9jhy6hufqq] {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.vx-device-form__button[b-9jhy6hufqq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 18px;
    border: none;
    border-radius: 16px;
    background: #2563eb;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

    .vx-device-form__button:hover:not(:disabled)[b-9jhy6hufqq] {
        background: #1d4ed8;
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
    }

    .vx-device-form__button:disabled[b-9jhy6hufqq] {
        opacity: 0.65;
        cursor: not-allowed;
    }

.vx-device-card__footer[b-9jhy6hufqq] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

    .vx-device-card__footer p[b-9jhy6hufqq] {
        margin: 0;
        color: #64748b;
        font-size: 13px;
        line-height: 1.7;
    }
/* /Components/Pages/ExportDocuments/ShippersLetterOfInstruction/Parts/ShippersLetterOfInstructionBundleSelector.razor.rz.scp.css */
/* =========================================================
   FILE: ShippersLetterOfInstructionBundleSelector.razor.css

   PURPOSE:
   Scoped styles for the Shipper's Letter of Instruction
   bundle selector component.

   RESPONSIBILITIES:
   - Style selected and eligible bundle panels
   - Style cargo summary metrics
   - Style bundle tables
   - Style add/remove actions

   IMPORTANT NOTES:
   - Presentation only
   - No business meaning in CSS
   - Avoid inline styling
========================================================= */

.vx-sli-bundles[b-0mto8glrok] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

.vx-sli-bundles__header h3[b-0mto8glrok] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #172033;
}

.vx-sli-bundles__header p[b-0mto8glrok] {
    margin: 0.25rem 0 0;
    font-size: 0.92rem;
    color: #64748b;
}

.vx-sli-bundles__summary[b-0mto8glrok] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

    .vx-sli-bundles__summary div[b-0mto8glrok] {
        padding: 0.85rem 1rem;
        border: 1px solid #dbe3ef;
        border-radius: 14px;
        background: #f8fafc;
        color: #526172;
        font-size: 0.88rem;
    }

.vx-sli-bundles h4[b-0mto8glrok] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #172033;
}

.vx-empty-state[b-0mto8glrok] {
    padding: 1.25rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
    color: #5f6b7a;
}

.vx-table[b-0mto8glrok] {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    overflow: hidden;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
}

    .vx-table thead th[b-0mto8glrok] {
        padding: 0.95rem 1rem;
        text-align: left;
        font-size: 0.84rem;
        font-weight: 700;
        color: #526172;
        background: #f7f9fc;
        border-bottom: 1px solid #e5ebf3;
        white-space: nowrap;
    }

    .vx-table tbody td[b-0mto8glrok] {
        padding: 1rem;
        font-size: 0.94rem;
        color: #172033;
        border-bottom: 1px solid #eef2f7;
        vertical-align: middle;
    }

    .vx-table tbody tr:last-child td[b-0mto8glrok] {
        border-bottom: none;
    }

.vx-table__actions[b-0mto8glrok] {
    text-align: right;
    white-space: nowrap;
}

.vx-btn[b-0mto8glrok] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

    .vx-btn:active[b-0mto8glrok] {
        transform: scale(0.96);
    }

    .vx-btn:disabled[b-0mto8glrok] {
        background: #f1f3f6;
        color: #a0acbb;
        border-color: #e2e8f0;
        cursor: not-allowed;
    }

.vx-btn--primary[b-0mto8glrok] {
    border: 1px solid transparent;
    background: linear-gradient(180deg, #1c64f2 0%, #1d4ed8 100%);
    color: #ffffff;
}

.vx-btn--danger[b-0mto8glrok] {
    border: 1px solid #fecdd3;
    background: #fff1f2;
    color: #be123c;
}

    .vx-btn--danger:hover:not(:disabled)[b-0mto8glrok] {
        background: #ffe4e6;
        border-color: #fda4af;
    }

@media (max-width: 960px) {
    .vx-sli-bundles__summary[b-0mto8glrok] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Pages/ExportDocuments/ShippersLetterOfInstruction/Parts/ShippersLetterOfInstructionEditor.razor.rz.scp.css */
/* =========================================================
   FILE: ShippersLetterOfInstructionEditor.razor.css

   PURPOSE:
   Scoped styles for the Shipper's Letter of Instruction
   editor component.

   RESPONSIBILITIES:
   - Provide editor layout and spacing
   - Style export document input fields
   - Style checklist section
   - Style save actions
   - Maintain Vixly visual consistency

   IMPORTANT NOTES:
   - Presentation only
   - No business meaning in CSS
   - Avoid inline styling
========================================================= */

/* ============================================
   PANEL
   ============================================ */

.vx-sli-editor[b-tzi9gmht9s] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

.vx-sli-editor__header[b-tzi9gmht9s] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

    .vx-sli-editor__header h3[b-tzi9gmht9s] {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 800;
        color: #172033;
    }

    .vx-sli-editor__header p[b-tzi9gmht9s] {
        margin: 0.25rem 0 0;
        font-size: 0.88rem;
        color: #64748b;
    }

/* ============================================
   FORM GRID
   ============================================ */

.vx-form-grid[b-tzi9gmht9s] {
    display: grid;
    gap: 1rem;
}

.vx-form-grid--two[b-tzi9gmht9s] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vx-field[b-tzi9gmht9s] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.vx-field--wide[b-tzi9gmht9s] {
    grid-column: 1 / -1;
}

.vx-field span[b-tzi9gmht9s] {
    font-size: 0.84rem;
    font-weight: 700;
    color: #526172;
}

/* ============================================
   INPUTS
   ============================================ */

.vx-input[b-tzi9gmht9s],
.vx-textarea[b-tzi9gmht9s] {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid #cfd9e8;
    border-radius: 12px;
    background: #ffffff;
    color: #172033;
    font-size: 0.92rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .vx-input:focus[b-tzi9gmht9s],
    .vx-textarea:focus[b-tzi9gmht9s] {
        outline: none;
        border-color: #1c64f2;
        box-shadow: 0 0 0 2px rgba(28, 100, 242, 0.15);
    }

    .vx-input:disabled[b-tzi9gmht9s],
    .vx-textarea:disabled[b-tzi9gmht9s] {
        background: #f8fafc;
        color: #64748b;
        cursor: not-allowed;
    }

.vx-textarea[b-tzi9gmht9s] {
    resize: vertical;
    min-height: 100px;
}

/* ============================================
   CHECKLIST
   ============================================ */

.vx-sli-editor__checklist[b-tzi9gmht9s] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    background: #f8fafc;
}

    .vx-sli-editor__checklist h4[b-tzi9gmht9s] {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: #172033;
    }

    .vx-sli-editor__checklist label[b-tzi9gmht9s] {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 0.92rem;
        color: #334155;
    }

    .vx-sli-editor__checklist input[type="checkbox"][b-tzi9gmht9s] {
        width: 16px;
        height: 16px;
        accent-color: #1d4ed8;
    }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 960px) {

    .vx-form-grid--two[b-tzi9gmht9s] {
        grid-template-columns: 1fr;
    }

    .vx-sli-editor__header[b-tzi9gmht9s] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* ============================================
   FOOTER ACTIONS
   ============================================ */

.vx-sli-editor__footer[b-tzi9gmht9s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid #e5ebf3;
}

/* ============================================
   BUTTONS
   ============================================ */

.vx-btn[b-tzi9gmht9s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.vx-btn--primary[b-tzi9gmht9s] {
    border: 1px solid transparent;
    background: linear-gradient(180deg, #1c64f2 0%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(29, 78, 216, 0.2);
}

.vx-btn--secondary[b-tzi9gmht9s] {
    border: 1px solid #dbe3ef;
    background: #ffffff;
    color: #172033;
}

.vx-btn:disabled[b-tzi9gmht9s] {
    background: #f1f3f6;
    color: #a0acbb;
    border-color: #e2e8f0;
    cursor: not-allowed;
}
/* /Components/Pages/ExportDocuments/ShippersLetterOfInstruction/Parts/ShippersLetterOfInstructionGrid.razor.rz.scp.css */
/* =========================================================
   FILE: ShippersLetterOfInstructionGrid.razor.css

   PURPOSE:
   Scoped styles for the Shipper's Letter of Instruction
   grid inside the Export Documents workspace.

   RESPONSIBILITIES:
   - Provide grid panel spacing and structure
   - Style the SLI table and empty state
   - Style status badges and action buttons
   - Ensure readability and alignment

   IMPORTANT NOTES:
   - Presentation only
   - No business meaning in CSS
   - Avoid inline styling
========================================================= */

/* ============================================
   PANEL
   ============================================ */

.vx-sli-grid[b-5vosqt9we9] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.vx-sli-grid__header[b-5vosqt9we9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.vx-sli-grid__title[b-5vosqt9we9] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #172033;
}

.vx-sli-grid__subtitle[b-5vosqt9we9] {
    margin: 0.25rem 0 0;
    font-size: 0.92rem;
    color: #5f6b7a;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.vx-empty-state[b-5vosqt9we9] {
    padding: 1.25rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
    color: #5f6b7a;
}

/* ============================================
   TABLE
   ============================================ */

.vx-table[b-5vosqt9we9] {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    overflow: hidden;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

    .vx-table thead th[b-5vosqt9we9] {
        padding: 0.95rem 1rem;
        text-align: left;
        font-size: 0.84rem;
        font-weight: 700;
        color: #526172;
        background: #f7f9fc;
        border-bottom: 1px solid #e5ebf3;
        white-space: nowrap;
    }

    .vx-table tbody td[b-5vosqt9we9] {
        padding: 1rem;
        font-size: 0.94rem;
        color: #172033;
        border-bottom: 1px solid #eef2f7;
        vertical-align: middle;
    }

    .vx-table tbody tr:last-child td[b-5vosqt9we9] {
        border-bottom: none;
    }

.vx-row--selected[b-5vosqt9we9] {
    background: #f7f9fc;
}

.vx-table__actions[b-5vosqt9we9] {
    text-align: right;
    white-space: nowrap;
}

/* ============================================
   BUTTONS
   ============================================ */

.vx-btn[b-5vosqt9we9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

    .vx-btn:hover[b-5vosqt9we9] {
        transform: translateY(-1px);
    }

    .vx-btn:active[b-5vosqt9we9] {
        transform: scale(0.96);
    }

    .vx-btn:disabled[b-5vosqt9we9] {
        background: #f1f3f6;
        color: #a0acbb;
        border-color: #e2e8f0;
        cursor: not-allowed;
        transform: none;
    }

.vx-btn--primary[b-5vosqt9we9] {
    border: 1px solid transparent;
    background: linear-gradient(180deg, #1c64f2 0%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(29, 78, 216, 0.2);
}

.vx-btn--secondary[b-5vosqt9we9] {
    border: 1px solid #dbe3ef;
    background: #ffffff;
    color: #172033;
}

    .vx-btn--secondary:hover[b-5vosqt9we9] {
        background: #f7f9fc;
        border-color: #c9d6e6;
    }

.vx-btn--danger[b-5vosqt9we9] {
    border: 1px solid #fecdd3;
    background: #fff1f2;
    color: #be123c;
}

    .vx-btn--danger:hover[b-5vosqt9we9] {
        background: #ffe4e6;
        border-color: #fda4af;
    }
/* ============================================
   STATUS BADGES
   ============================================ */

.vx-sli-status[b-5vosqt9we9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Draft */
.vx-sli-status--draft[b-5vosqt9we9] {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #b45309;
}

/* Finalized */
.vx-sli-status--finalized[b-5vosqt9we9] {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

/* Void */
.vx-sli-status--void[b-5vosqt9we9] {
    border: 1px solid #fecdd3;
    background: #fff1f2;
    color: #be123c;
}

/* ============================================
   ACTION BUTTON GROUP
   ============================================ */

.vx-sli-actions[b-5vosqt9we9] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    white-space: nowrap;
}
/* /Components/Pages/ExportDocuments/ShippersLetterOfInstruction/ShippersLetterOfInstructionWorkspace.razor.rz.scp.css */
body[b-74iaagh5j8] {
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* =========================================================
   FILE: Home.razor.css

   PURPOSE:
   Scoped styling for the public tenant portal landing page.

   RESPONSIBILITIES:
   - Style the tenant landing page
   - Style customer onboarding and login actions
   - Style hero, logo placeholder, tracking, calculator, warehouses, and footer
   - Keep all Home.razor presentation styling outside inline markup

   IMPORTANT NOTES:
   - This CSS is scoped to Home.razor
   - No inline CSS should be used in Home.razor
   - Mockup styling only; real tenant branding can be wired later
   ========================================================= */

.vx-landing[b-z3gekvxrjm] {
    min-height: 100vh;
    color: #0f172a;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.14), transparent 28rem), linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #f8fafc 100%);
}

.vx-landing__nav[b-z3gekvxrjm] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.25rem 3rem;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    backdrop-filter: blur(18px);
}

.vx-landing__brand[b-z3gekvxrjm] {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: inherit;
    text-decoration: none;
}

    .vx-landing__brand strong[b-z3gekvxrjm] {
        display: block;
        font-size: 1.2rem;
        letter-spacing: -0.02em;
    }

    .vx-landing__brand span[b-z3gekvxrjm] {
        display: block;
        color: #64748b;
        font-size: 0.82rem;
    }

.vx-landing__logo-placeholder[b-z3gekvxrjm] {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    border: 1px dashed rgba(37, 99, 235, 0.55);
    border-radius: 1.1rem;
    background: #eff6ff;
}

.vx-landing__nav-actions[b-z3gekvxrjm] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.vx-landing__nav-link[b-z3gekvxrjm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 1.15rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 0.9rem;
}

.vx-landing__nav-link--outline[b-z3gekvxrjm] {
    color: #1d4ed8;
    border: 1px solid rgba(37, 99, 235, 0.45);
    background: #ffffff;
}

.vx-landing__nav-link--primary[b-z3gekvxrjm],
.vx-landing__tracking-form button[b-z3gekvxrjm],
.vx-landing__calculator-button[b-z3gekvxrjm] {
    color: #ffffff;
    border: 0;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.25);
}

.vx-landing__hero[b-z3gekvxrjm] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 0.6fr);
    align-items: center;
    gap: 3rem;
    padding: 5rem 3rem;
    color: #ffffff;
    background: linear-gradient(90deg, rgba(3, 7, 18, 0.92), rgba(15, 23, 42, 0.78), rgba(30, 64, 175, 0.66)), radial-gradient(circle at top right, rgba(96, 165, 250, 0.4), transparent 28rem), #07112f;
}

.vx-landing__eyebrow[b-z3gekvxrjm] {
    display: inline-flex;
    padding: 0.45rem 0.75rem;
    color: #bfdbfe;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid rgba(191, 219, 254, 0.24);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.18);
}

.vx-landing__hero h1[b-z3gekvxrjm] {
    max-width: 58rem;
    margin: 1.2rem 0 1rem;
    font-size: clamp(2.7rem, 6vw, 5.8rem);
    line-height: 0.96;
    letter-spacing: -0.07em;
}

.vx-landing__hero-text[b-z3gekvxrjm] {
    max-width: 44rem;
    color: #dbeafe;
    font-size: 1.1rem;
    line-height: 1.8;
}

.vx-landing__hero-points[b-z3gekvxrjm] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

    .vx-landing__hero-points article[b-z3gekvxrjm] {
        padding: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 1.25rem;
        background: rgba(255, 255, 255, 0.1);
    }

    .vx-landing__hero-points span[b-z3gekvxrjm],
    .vx-landing__hero-points strong[b-z3gekvxrjm],
    .vx-landing__hero-points small[b-z3gekvxrjm] {
        display: block;
    }

    .vx-landing__hero-points span[b-z3gekvxrjm] {
        color: #60a5fa;
        font-weight: 900;
    }

    .vx-landing__hero-points small[b-z3gekvxrjm] {
        margin-top: 0.35rem;
        color: #cbd5e1;
    }

.vx-landing__hero-logo-card[b-z3gekvxrjm] {
    overflow: hidden;
    border-radius: 1.75rem;
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
}

.vx-landing__hero-logo-box[b-z3gekvxrjm] {
    display: grid;
    place-items: center;
    min-height: 15rem;
    margin: 1rem;
    color: #64748b;
    font-weight: 900;
    text-align: center;
    border: 2px dashed #cbd5e1;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
}

.vx-landing__hero-logo-footer[b-z3gekvxrjm] {
    padding: 1.3rem;
    color: #ffffff;
    background: #020617;
}

    .vx-landing__hero-logo-footer p[b-z3gekvxrjm],
    .vx-landing__hero-logo-footer strong[b-z3gekvxrjm],
    .vx-landing__hero-logo-footer small[b-z3gekvxrjm] {
        display: block;
        margin: 0;
    }

    .vx-landing__hero-logo-footer strong[b-z3gekvxrjm] {
        margin: 0.25rem 0;
        font-size: 1.35rem;
    }

.vx-landing__tools[b-z3gekvxrjm],
.vx-landing__warehouses[b-z3gekvxrjm] {
    width: min(1180px, calc(100% - 2rem));
    margin: 1.5rem auto;
}

.vx-landing__tools[b-z3gekvxrjm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.vx-landing__tool-card[b-z3gekvxrjm],
.vx-landing__warehouse-card[b-z3gekvxrjm],
.vx-landing__notice[b-z3gekvxrjm] {
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
}

.vx-landing__tool-card[b-z3gekvxrjm] {
    padding: 1.75rem;
}

.vx-landing__section-heading[b-z3gekvxrjm] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.vx-landing__section-icon[b-z3gekvxrjm] {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: #eff6ff;
}

.vx-landing__section-heading h2[b-z3gekvxrjm] {
    margin: 0;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
}

.vx-landing__section-heading p[b-z3gekvxrjm] {
    margin: 0.35rem 0 0;
    color: #64748b;
}

.vx-landing__tracking-form[b-z3gekvxrjm] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
}

    .vx-landing__tracking-form input[b-z3gekvxrjm],
    .vx-landing__calculator-grid input[b-z3gekvxrjm] {
        width: 100%;
        min-height: 3rem;
        padding: 0 1rem;
        color: #0f172a;
        border: 1px solid #cbd5e1;
        border-radius: 0.85rem;
        background: #ffffff;
    }

    .vx-landing__tracking-form button[b-z3gekvxrjm],
    .vx-landing__calculator-button[b-z3gekvxrjm] {
        min-height: 3rem;
        padding: 0 1.2rem;
        font-weight: 900;
        border-radius: 0.85rem;
        cursor: pointer;
    }

.vx-landing__hint[b-z3gekvxrjm] {
    margin: 1rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

.vx-landing__calculator-grid[b-z3gekvxrjm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

    .vx-landing__calculator-grid label[b-z3gekvxrjm] {
        display: grid;
        gap: 0.4rem;
        color: #64748b;
        font-size: 0.78rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.vx-landing__calculator-button[b-z3gekvxrjm] {
    width: 100%;
    margin-top: 1.2rem;
}

.vx-landing__warehouses[b-z3gekvxrjm] {
    padding: 1.5rem;
}

.vx-landing__warehouse-grid[b-z3gekvxrjm] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.vx-landing__warehouse-card[b-z3gekvxrjm] {
    padding: 1.25rem;
}

    .vx-landing__warehouse-card h3[b-z3gekvxrjm] {
        margin: 0 0 1rem;
        font-size: 1rem;
    }

.vx-landing__warehouse-item[b-z3gekvxrjm] {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem 0;
    border-top: 1px solid #e2e8f0;
}

    .vx-landing__warehouse-item strong[b-z3gekvxrjm] {
        color: #1d4ed8;
    }

    .vx-landing__warehouse-item span[b-z3gekvxrjm] {
        color: #475569;
        font-size: 0.9rem;
    }

.vx-landing__notice[b-z3gekvxrjm] {
    width: min(1180px, calc(100% - 2rem));
    margin: 1.5rem auto;
    padding: 1rem 1.25rem;
    color: #92400e;
    background: #fffbeb;
}

    .vx-landing__notice strong[b-z3gekvxrjm],
    .vx-landing__notice span[b-z3gekvxrjm] {
        display: block;
    }

.vx-landing__footer[b-z3gekvxrjm] {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3rem;
    padding: 2.5rem 3rem;
    color: #cbd5e1;
    background: #020617;
}

    .vx-landing__footer strong[b-z3gekvxrjm] {
        color: #ffffff;
        font-size: 1.2rem;
    }

    .vx-landing__footer p[b-z3gekvxrjm] {
        max-width: 26rem;
        margin: 0.5rem 0 0;
        line-height: 1.7;
    }

.vx-landing__footer-links[b-z3gekvxrjm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
}

    .vx-landing__footer-links a[b-z3gekvxrjm] {
        color: #cbd5e1;
        text-decoration: none;
    }

.vx-landing__staff-link[b-z3gekvxrjm] {
    padding: 0.75rem 1rem;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 0.85rem;
}

@media (max-width: 980px) {
    .vx-landing__hero[b-z3gekvxrjm],
    .vx-landing__tools[b-z3gekvxrjm] {
        grid-template-columns: 1fr;
    }

    .vx-landing__hero-points[b-z3gekvxrjm],
    .vx-landing__warehouse-grid[b-z3gekvxrjm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .vx-landing__nav[b-z3gekvxrjm],
    .vx-landing__footer[b-z3gekvxrjm] {
        flex-direction: column;
        align-items: stretch;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .vx-landing__nav-actions[b-z3gekvxrjm],
    .vx-landing__footer-links[b-z3gekvxrjm] {
        justify-content: stretch;
    }

        .vx-landing__nav-link[b-z3gekvxrjm],
        .vx-landing__footer-links a[b-z3gekvxrjm] {
            width: 100%;
        }

    .vx-landing__hero[b-z3gekvxrjm] {
        padding: 3rem 1rem;
    }

    .vx-landing__hero-points[b-z3gekvxrjm],
    .vx-landing__warehouse-grid[b-z3gekvxrjm],
    .vx-landing__calculator-grid[b-z3gekvxrjm],
    .vx-landing__tracking-form[b-z3gekvxrjm] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/NotFoundPage.razor.rz.scp.css */
/* =========================================================
   FILE: NotFoundPage.razor.css

   PURPOSE:
   Enterprise-grade styling for the Operations route-not-found page.

   RESPONSIBILITIES:
   - Present a polished 404 experience
   - Maintain Vixly operational visual language
   - Provide strong visual hierarchy
   - Avoid dependency on external illustration assets

   IMPORTANT NOTES:
   - Scoped only to NotFoundPage.razor
   ========================================================= */

.vx-notfound-page[b-43m3dlsdbn] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 48px 24px;
    background: radial-gradient(circle at 15% 10%, rgba(59, 130, 246, 0.14), transparent 28%), radial-gradient(circle at 85% 15%, rgba(14, 165, 233, 0.10), transparent 24%), linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
}

.vx-notfound-card[b-43m3dlsdbn] {
    width: min(100%, 1080px);
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 42px;
    align-items: center;
    padding: 56px;
    border-radius: 36px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid rgba(191, 219, 254, 0.65);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 100px rgba(15, 23, 42, 0.12), 0 12px 34px rgba(15, 23, 42, 0.06);
}

.vx-notfound-visual[b-43m3dlsdbn] {
    position: relative;
    min-height: 420px;
    display: grid;
    place-items: center;
}

.vx-notfound-orbit[b-43m3dlsdbn] {
    position: absolute;
    border-radius: 999px;
    border: 1px dashed rgba(59, 130, 246, 0.28);
}

.vx-notfound-orbit--outer[b-43m3dlsdbn] {
    width: 330px;
    height: 330px;
}

.vx-notfound-orbit--inner[b-43m3dlsdbn] {
    width: 250px;
    height: 250px;
    transform: rotate(18deg);
}

.vx-map-card[b-43m3dlsdbn] {
    position: relative;
    width: 300px;
    height: 260px;
    border-radius: 30px;
    overflow: hidden;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    border: 1px solid #bfdbfe;
    box-shadow: 0 28px 70px rgba(59, 130, 246, 0.16), 0 12px 30px rgba(15, 23, 42, 0.08);
}

.vx-map-card__path[b-43m3dlsdbn] {
    position: absolute;
    top: 48%;
    left: 18%;
    width: 64%;
    height: 8px;
    border-radius: 999px;
    background: repeating-linear-gradient( 90deg, #93c5fd 0, #93c5fd 14px, transparent 14px, transparent 24px );
    transform: rotate(-12deg);
}

.vx-map-card__pin[b-43m3dlsdbn] {
    position: absolute;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
}

.vx-map-card__pin--start[b-43m3dlsdbn] {
    left: 40px;
    top: 78px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
}

.vx-map-card__pin--end[b-43m3dlsdbn] {
    right: 38px;
    bottom: 62px;
    background: linear-gradient(135deg, #ef4444, #f97316);
}

.vx-notfound-chip[b-43m3dlsdbn] {
    position: absolute;
    padding: 12px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-weight: 900;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
}

.vx-notfound-chip--left[b-43m3dlsdbn] {
    left: 18px;
    top: 72px;
}

.vx-notfound-chip--right[b-43m3dlsdbn] {
    right: 12px;
    bottom: 78px;
}

.vx-notfound-badge[b-43m3dlsdbn] {
    display: inline-flex;
    margin-bottom: 20px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.10);
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-notfound-title[b-43m3dlsdbn] {
    margin: 0;
    color: #0f172a;
    font-size: 52px;
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.vx-notfound-text[b-43m3dlsdbn] {
    margin: 24px 0 0;
    color: #475569;
    font-size: 17px;
    line-height: 1.85;
}

.vx-notfound-checklist[b-43m3dlsdbn] {
    display: grid;
    gap: 14px;
    margin-top: 30px;
}

.vx-notfound-checklist__item[b-43m3dlsdbn] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid #dbeafe;
    color: #334155;
    line-height: 1.6;
}

    .vx-notfound-checklist__item span[b-43m3dlsdbn] {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: #2563eb;
        color: #ffffff;
        font-size: 13px;
        font-weight: 900;
    }

.vx-notfound-actions[b-43m3dlsdbn] {
    margin-top: 34px;
}

.vx-notfound-button[b-43m3dlsdbn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 30px;
    border-radius: 18px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24);
}

    .vx-notfound-button:hover[b-43m3dlsdbn] {
        filter: brightness(1.03);
    }

@media (max-width: 900px) {
    .vx-notfound-card[b-43m3dlsdbn] {
        grid-template-columns: 1fr;
        padding: 38px 28px;
    }

    .vx-notfound-visual[b-43m3dlsdbn] {
        min-height: 340px;
    }

    .vx-notfound-title[b-43m3dlsdbn] {
        font-size: 40px;
    }
}
/* /Components/Pages/OperationControl/Billing/Invoices/InvoicesWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: InvoicesWorkspace.razor.css

   PURPOSE:
   Scoped styles for the invoices workspace host.

   RESPONSIBILITIES:
   - Provide workspace-level layout structure
   - Style workspace body, sections, and loading state
   - Support modern floating layout beneath sticky TopBar
   - Keep billing workspace aligned with Operations visual language

   IMPORTANT NOTES:
   - Hero section styling removed intentionally
   - TopBar now acts as workspace header
   - Child component styling belongs to child component CSS
   - Use workspace-specific selectors only
   ========================================================= */

.vx-invoices-workspace[b-ru8dzsbbha] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* =====================================================
       FLOATING BODY EFFECT
       Allows body content to visually slide under TopBar
       ===================================================== */
    margin-top: -1.25rem;
}

/* =========================================================
   WORKSPACE BODY
   ========================================================= */

.vx-invoices-workspace__body[b-ru8dzsbbha] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    position: relative;
    z-index: 1;
}

/* =========================================================
   SECTION SURFACES
   ========================================================= */

.vx-invoices-workspace__section[b-ru8dzsbbha],
.vx-invoices-workspace__loading-state[b-ru8dzsbbha] {
    border: 1px solid rgba(226, 232, 240, 0.82);
    border-radius: 22px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94) );
    padding: 1.25rem;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

/* =========================================================
   SECTION HEADER
   ========================================================= */

.vx-invoices-workspace__section-header[b-ru8dzsbbha] {
    margin-bottom: 1rem;
}

.vx-invoices-workspace__section-badge[b-ru8dzsbbha] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-invoices-workspace__section-title[b-ru8dzsbbha] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-invoices-workspace__section-description[b-ru8dzsbbha] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #64748b;
    line-height: 1.65;
    font-size: 0.93rem;
}

/* =========================================================
   LOADING STATE
   ========================================================= */

.vx-invoices-workspace__loading-state[b-ru8dzsbbha] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.vx-invoices-workspace__loading-icon[b-ru8dzsbbha] {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
}

    .vx-invoices-workspace__loading-icon svg[b-ru8dzsbbha] {
        width: 26px;
        height: 26px;
        animation: vx-invoices-spin-b-ru8dzsbbha 0.9s linear infinite;
    }

.vx-invoices-workspace__loading-title[b-ru8dzsbbha] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-invoices-workspace__loading-text[b-ru8dzsbbha] {
    margin: 0.25rem 0 0;
    color: #64748b;
    line-height: 1.55;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes vx-invoices-spin-b-ru8dzsbbha {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .vx-invoices-workspace[b-ru8dzsbbha] {
        margin-top: -0.75rem;
    }

    .vx-invoices-workspace__body[b-ru8dzsbbha] {
        gap: 0.9rem;
    }

    .vx-invoices-workspace__section[b-ru8dzsbbha],
    .vx-invoices-workspace__loading-state[b-ru8dzsbbha] {
        padding: 1rem;
        border-radius: 18px;
    }

    .vx-invoices-workspace__section-title[b-ru8dzsbbha] {
        font-size: 1.05rem;
    }

    .vx-invoices-workspace__section-description[b-ru8dzsbbha] {
        font-size: 0.9rem;
    }
}
/* /Components/Pages/OperationControl/Billing/Invoices/Parts/CustomerInvoiceLineItemPanel.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerInvoiceLineItemPanel.razor.css

   PURPOSE:
   Scoped styles for the reusable CustomerInvoiceLineItem panel.

   RESPONSIBILITIES:
   - Render internal billing breakdown in a consistent layout
   - Reuse invoice detail visual language
   - Support inline usage inside CustomerWorkspace
   - Maintain readability for dense financial data
   - Provide enterprise-grade billing detail presentation

   IMPORTANT NOTES:
   - This file owns all styling for CustomerInvoiceLineItemPanel
   - Do not rely on parent component CSS isolation
   - Keep this file presentation-only
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

.customer-invoice-line-items[b-nut5fy06eq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.customer-invoice-line-items--inline[b-nut5fy06eq] {
    margin-top: 0.85rem;
    padding-left: 0.85rem;
    border-left: 3px solid #3b82f6;
}


/* =========================================================
   SECTION CARD
   ========================================================= */

.invoice-details-section[b-nut5fy06eq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

.invoice-details-section__header[b-nut5fy06eq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.invoice-details-section-badge[b-nut5fy06eq] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.34rem 0.68rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.invoice-details-section__title[b-nut5fy06eq] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #172033;
}

.invoice-details-section__subtitle[b-nut5fy06eq] {
    margin: 0.4rem 0 0;
    max-width: 48rem;
    color: #5f6b7a;
    font-size: 0.92rem;
    line-height: 1.65;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.customer-invoice-line-items-empty[b-nut5fy06eq] {
    display: flex;
}

.customer-invoice-line-items-empty__card[b-nut5fy06eq] {
    width: 100%;
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
}

.customer-invoice-line-items-empty__title[b-nut5fy06eq] {
    margin: 0 0 0.45rem;
    font-size: 1rem;
    font-weight: 800;
    color: #172033;
}

.customer-invoice-line-items-empty__message[b-nut5fy06eq] {
    margin: 0;
    color: #64748b;
    line-height: 1.65;
    font-size: 0.92rem;
}


/* =========================================================
   TABLE WRAPPER
   ========================================================= */

.invoice-details-table-wrap[b-nut5fy06eq] {
    overflow-x: auto;
    border: 1px solid #e5ebf3;
    border-radius: 16px;
    background: #ffffff;
}


/* =========================================================
   TABLE
   ========================================================= */

.invoice-details-table[b-nut5fy06eq] {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.invoice-details-table--internal[b-nut5fy06eq] {
    min-width: 980px;
}

.invoice-details-table thead th[b-nut5fy06eq] {
    padding: 0.92rem 1rem;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #526172;
    background: #f7f9fc;
    border-bottom: 1px solid #e5ebf3;
    white-space: nowrap;
}

.invoice-details-table tbody td[b-nut5fy06eq] {
    padding: 0.95rem 1rem;
    font-size: 0.92rem;
    color: #172033;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
}

.invoice-details-table tbody tr:last-child td[b-nut5fy06eq] {
    border-bottom: none;
}

.invoice-details-table--internal tbody tr[b-nut5fy06eq] {
    transition: background 0.14s ease;
}

    .invoice-details-table--internal tbody tr:hover[b-nut5fy06eq] {
        background: #f9fbff;
    }

.invoice-details-table__amount[b-nut5fy06eq] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.invoice-details-table--internal td:nth-child(4)[b-nut5fy06eq] {
    font-weight: 700;
}

.invoice-details-table--internal td:nth-child(5)[b-nut5fy06eq] {
    color: #64748b;
    font-size: 0.88rem;
}


/* =========================================================
   TYPE BADGES
   ========================================================= */

.invoice-type-badge[b-nut5fy06eq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.invoice-type-badge--transport[b-nut5fy06eq] {
    background: #e6f0ff;
    color: #1d4ed8;
}

.invoice-type-badge--insurance[b-nut5fy06eq] {
    background: #fff7e6;
    color: #b45309;
}

.invoice-type-badge--service[b-nut5fy06eq] {
    background: #eef2ff;
    color: #5b21b6;
}

.invoice-type-badge--default[b-nut5fy06eq] {
    background: #f1f5f9;
    color: #334155;
}


/* =========================================================
   INLINE MODE
   ========================================================= */

.customer-invoice-line-items--inline .invoice-details-section[b-nut5fy06eq] {
    padding: 1.1rem 1.15rem;
}

.customer-invoice-line-items--inline .invoice-details-table tbody td[b-nut5fy06eq] {
    padding: 0.78rem 0.85rem;
    font-size: 0.9rem;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .invoice-details-section[b-nut5fy06eq] {
        padding: 1rem;
    }

    .invoice-details-table[b-nut5fy06eq] {
        min-width: 760px;
    }

    .invoice-details-section__title[b-nut5fy06eq] {
        font-size: 1rem;
    }

    .invoice-details-section__subtitle[b-nut5fy06eq] {
        font-size: 0.88rem;
    }
}
/* /Components/Pages/OperationControl/Billing/Invoices/Parts/InvoiceDetails.razor.rz.scp.css */
/* =========================================================
   FILE: InvoiceDetails.razor.css

   PURPOSE:
   Fully self-contained styling for the invoice details view.

   RESPONSIBILITIES:
   - Style invoice detail hero and summary sections
   - Style customer-facing invoice line table
   - Preserve readable billing and operational hierarchy
   - Keep the details view aligned with Operations billing UI

   IMPORTANT NOTES:
   - This file styles presentation only
   - Child/internal line-item panel owns its own styling
   - Avoid inline styling in the component
   ========================================================= */

.vx-invoice-details[b-4v04mnx1jf] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.vx-invoice-details__topbar[b-4v04mnx1jf] {
    display: flex;
    align-items: center;
}

.vx-invoice-details__back-button[b-4v04mnx1jf] {
    min-height: 42px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    border-radius: 12px;
    padding: 0.65rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

    .vx-invoice-details__back-button:hover[b-4v04mnx1jf] {
        background: #f8fafc;
        transform: translateY(-1px);
    }

/* HERO */

.vx-invoice-details__hero[b-4v04mnx1jf] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem;
    border-radius: 18px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 40%), linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
}

.vx-invoice-details__hero-left[b-4v04mnx1jf] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.vx-invoice-details__hero-icon[b-4v04mnx1jf] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.85);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

    .vx-invoice-details__hero-icon svg[b-4v04mnx1jf] {
        width: 30px;
        height: 30px;
    }

.vx-invoice-details__eyebrow[b-4v04mnx1jf],
.vx-invoice-details__section-badge[b-4v04mnx1jf] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.36rem 0.7rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-invoice-details__title[b-4v04mnx1jf] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 900;
    color: #0f172a;
}

.vx-invoice-details__subtitle[b-4v04mnx1jf] {
    margin: 0.45rem 0 0;
    max-width: 52rem;
    color: #475569;
    line-height: 1.7;
    font-size: 0.96rem;
}

.vx-invoice-details__hero-right[b-4v04mnx1jf] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.vx-invoice-details__stat[b-4v04mnx1jf] {
    min-width: 135px;
    padding: 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #dbe4f0;
}

.vx-invoice-details__stat-label[b-4v04mnx1jf] {
    display: block;
    margin-bottom: 0.42rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-invoice-details__stat-value[b-4v04mnx1jf] {
    font-size: 1.05rem;
    font-weight: 900;
    color: #0f172a;
}

/* CARDS / SECTIONS */

.vx-invoice-details__summary-card[b-4v04mnx1jf],
.vx-invoice-details__section[b-4v04mnx1jf],
.vx-invoice-details__empty-state[b-4v04mnx1jf] {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    padding: 1.25rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.vx-invoice-details__summary-header[b-4v04mnx1jf],
.vx-invoice-details__section-header[b-4v04mnx1jf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.vx-invoice-details__section-title[b-4v04mnx1jf] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-invoice-details__section-description[b-4v04mnx1jf] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #64748b;
    line-height: 1.65;
    font-size: 0.92rem;
}

/* SUMMARY GRID */

.vx-invoice-details__summary-grid[b-4v04mnx1jf] {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 1rem;
}

.vx-invoice-details__summary-field[b-4v04mnx1jf] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.vx-invoice-details__summary-field--strong[b-4v04mnx1jf] {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.vx-invoice-details__summary-label[b-4v04mnx1jf] {
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.vx-invoice-details__summary-value[b-4v04mnx1jf] {
    font-size: 0.98rem;
    color: #0f172a;
    font-weight: 800;
}

/* EMPTY */

.vx-invoice-details__empty-state[b-4v04mnx1jf] {
    text-align: center;
}

.vx-invoice-details__empty-title[b-4v04mnx1jf] {
    margin: 0 0 0.45rem;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 800;
}

.vx-invoice-details__empty-message[b-4v04mnx1jf] {
    margin: 0;
    color: #64748b;
}

/* ACTIONS */

.vx-invoice-details__actions[b-4v04mnx1jf] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.vx-invoice-details__action-button[b-4v04mnx1jf] {
    min-height: 42px;
    padding: 0 1.1rem;
    border-radius: 12px;
    border: none;
    background: #2563eb;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

    .vx-invoice-details__action-button:hover[b-4v04mnx1jf] {
        transform: translateY(-1px);
    }

/* TABLE */

.vx-invoice-details__table-wrap[b-4v04mnx1jf] {
    overflow-x: auto;
    border: 1px solid #e5ebf3;
    border-radius: 16px;
}

.vx-invoice-details__table[b-4v04mnx1jf] {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
    table-layout: fixed;
}

    .vx-invoice-details__table th[b-4v04mnx1jf],
    .vx-invoice-details__table td[b-4v04mnx1jf] {
        padding: 0.9rem 1rem;
        border-bottom: 1px solid #eef2f7;
        vertical-align: middle;
    }

    .vx-invoice-details__table th[b-4v04mnx1jf] {
        text-align: left;
        font-size: 0.82rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
        background: #f8fafc;
    }

    .vx-invoice-details__table tbody tr:hover[b-4v04mnx1jf] {
        background: #f9fbff;
    }

.vx-invoice-details__amount[b-4v04mnx1jf] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.vx-invoice-details__section-empty[b-4v04mnx1jf] {
    padding: 1rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
}

    .vx-invoice-details__section-empty p[b-4v04mnx1jf] {
        margin: 0;
    }

/* RESPONSIVE */

@media (max-width: 900px) {
    .vx-invoice-details__hero[b-4v04mnx1jf] {
        flex-direction: column;
    }

    .vx-invoice-details__hero-right[b-4v04mnx1jf] {
        width: 100%;
    }

    .vx-invoice-details__stat[b-4v04mnx1jf] {
        flex: 1;
    }

    .vx-invoice-details__summary-grid[b-4v04mnx1jf] {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .vx-invoice-details__hero-left[b-4v04mnx1jf] {
        flex-direction: column;
    }

    .vx-invoice-details__hero-icon[b-4v04mnx1jf] {
        width: 58px;
        height: 58px;
    }

    .vx-invoice-details__summary-card[b-4v04mnx1jf],
    .vx-invoice-details__section[b-4v04mnx1jf] {
        padding: 1rem;
    }

    .vx-invoice-details__summary-grid[b-4v04mnx1jf] {
        grid-template-columns: 1fr;
    }

    .vx-invoice-details__actions[b-4v04mnx1jf],
    .vx-invoice-details__action-button[b-4v04mnx1jf],
    .vx-invoice-details__back-button[b-4v04mnx1jf] {
        width: 100%;
    }
}
/* /Components/Pages/OperationControl/Billing/Invoices/Parts/InvoiceList.razor.rz.scp.css */
/* =========================================================
   FILE: InvoiceList.razor.css

   PURPOSE:
   Fully self-contained styling for the InvoiceList component.

   RESPONSIBILITIES:
   - Style invoice list hero presentation
   - Style statistics and invoice listing section
   - Style invoice table and action controls
   - Style empty state presentation
   - Keep invoice workspace aligned with enterprise
     Operations Control visual language

   IMPORTANT NOTES:
   - This file is fully self-owned
   - No reliance on external workspace styling
   - Scoped CSS only
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.vx-invoice-list[b-dd6oajueok] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* =========================================================
   HERO
   ========================================================= */

.vx-invoice-list__hero[b-dd6oajueok] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem;
    border-radius: 18px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 40%), linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
}

.vx-invoice-list__hero-left[b-dd6oajueok] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.vx-invoice-list__hero-icon[b-dd6oajueok] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.85);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

    .vx-invoice-list__hero-icon svg[b-dd6oajueok] {
        width: 30px;
        height: 30px;
    }

.vx-invoice-list__hero-content[b-dd6oajueok] {
    min-width: 0;
}

.vx-invoice-list__eyebrow[b-dd6oajueok] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-invoice-list__title[b-dd6oajueok] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-invoice-list__subtitle[b-dd6oajueok] {
    margin: 0.45rem 0 0;
    max-width: 52rem;
    color: #475569;
    line-height: 1.7;
    font-size: 0.96rem;
}

.vx-invoice-list__hero-right[b-dd6oajueok] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.vx-invoice-list__stat[b-dd6oajueok] {
    min-width: 135px;
    padding: 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #dbe4f0;
    backdrop-filter: blur(8px);
}

.vx-invoice-list__stat-label[b-dd6oajueok] {
    display: block;
    margin-bottom: 0.42rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-invoice-list__stat-value[b-dd6oajueok] {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

/* =========================================================
   SECTION
   ========================================================= */

.vx-invoice-list__section[b-dd6oajueok] {
    border: 1px solid #eef2f7;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius: 18px;
    padding: 1rem;
}

.vx-invoice-list__section-header[b-dd6oajueok] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.vx-invoice-list__section-badge[b-dd6oajueok] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.34rem 0.68rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-invoice-list__section-title[b-dd6oajueok] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-invoice-list__section-description[b-dd6oajueok] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #64748b;
    line-height: 1.65;
    font-size: 0.92rem;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.vx-invoice-list__empty-state[b-dd6oajueok] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
}

.vx-invoice-list__empty-icon[b-dd6oajueok] {
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    margin-bottom: 1rem;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.8);
    color: #2563eb;
}

    .vx-invoice-list__empty-icon svg[b-dd6oajueok] {
        width: 34px;
        height: 34px;
    }

.vx-invoice-list__empty-title[b-dd6oajueok] {
    margin: 0 0 0.65rem;
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-invoice-list__empty-message[b-dd6oajueok] {
    margin: 0;
    max-width: 32rem;
    line-height: 1.7;
    color: #64748b;
}

/* =========================================================
   TABLE WRAPPER
   ========================================================= */

.vx-invoice-list__table-wrapper[b-dd6oajueok] {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

/* =========================================================
   TABLE
   ========================================================= */

.vx-invoice-table[b-dd6oajueok] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1080px;
}

    .vx-invoice-table th[b-dd6oajueok],
    .vx-invoice-table td[b-dd6oajueok] {
        text-align: left;
        padding: 0.9rem 0.9rem;
        border-bottom: 1px solid #e5e7eb;
        vertical-align: middle;
    }

    .vx-invoice-table th[b-dd6oajueok] {
        font-size: 0.82rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #475569;
        background: #f8fafc;
    }

    .vx-invoice-table td[b-dd6oajueok] {
        color: #0f172a;
        font-size: 0.94rem;
    }

    .vx-invoice-table tbody tr[b-dd6oajueok] {
        transition: background 0.18s ease;
    }

        .vx-invoice-table tbody tr:hover[b-dd6oajueok] {
            background: rgba(248, 250, 252, 0.92);
        }

.vx-invoice-table__action-header[b-dd6oajueok] {
    text-align: right;
    width: 220px;
}

.vx-invoice-table__action[b-dd6oajueok] {
    text-align: right;
}

/* =========================================================
   CONTENT
   ========================================================= */

.vx-invoice-link[b-dd6oajueok] {
    background: none;
    border: none;
    padding: 0;
    font-weight: 800;
    color: #2563eb;
    cursor: pointer;
    transition: color 0.18s ease;
}

    .vx-invoice-link:hover[b-dd6oajueok] {
        color: #1d4ed8;
        text-decoration: underline;
    }

.vx-invoice-number[b-dd6oajueok] {
    font-weight: 700;
    color: #0f172a;
}

.vx-invoice-customer[b-dd6oajueok] {
    font-weight: 600;
    color: #0f172a;
}

.vx-invoice-money[b-dd6oajueok] {
    font-weight: 700;
    color: #0f172a;
}

.vx-invoice-money--strong[b-dd6oajueok] {
    color: #111827;
}

/* =========================================================
   STATUS BADGES
   ========================================================= */

.invoice-status[b-dd6oajueok] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.3rem 0.68rem;
    font-size: 0.76rem;
    font-weight: 800;
}

.invoice-status--issued[b-dd6oajueok] {
    background: #dbeafe;
    color: #1d4ed8;
}

.invoice-status--collect[b-dd6oajueok] {
    background: #ffedd5;
    color: #c2410c;
}

.invoice-status--paid[b-dd6oajueok] {
    background: #dcfce7;
    color: #166534;
}

/* =========================================================
   ACTIONS
   ========================================================= */

.vx-invoice-actions[b-dd6oajueok] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.vx-invoice-action-button[b-dd6oajueok] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 38px;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    border: 1px solid #dbe3ef;
    background: #ffffff;
    color: #172033;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

    .vx-invoice-action-button:hover[b-dd6oajueok] {
        background: #f8fafc;
        transform: translateY(-1px);
    }

.vx-invoice-action-button--collect[b-dd6oajueok] {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c;
}

    .vx-invoice-action-button--collect:hover[b-dd6oajueok] {
        background: #ffedd5;
    }

.vx-invoice-action-button__icon[b-dd6oajueok] {
    font-size: 0.8rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .vx-invoice-list__hero[b-dd6oajueok] {
        flex-direction: column;
    }

    .vx-invoice-list__hero-right[b-dd6oajueok] {
        width: 100%;
    }

    .vx-invoice-list__stat[b-dd6oajueok] {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 768px) {

    .vx-invoice-list[b-dd6oajueok] {
        gap: 1rem;
    }

    .vx-invoice-list__hero[b-dd6oajueok] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-invoice-list__hero-left[b-dd6oajueok] {
        flex-direction: column;
    }

    .vx-invoice-list__hero-icon[b-dd6oajueok] {
        width: 58px;
        height: 58px;
    }

    .vx-invoice-list__title[b-dd6oajueok] {
        font-size: 1.2rem;
    }

    .vx-invoice-list__subtitle[b-dd6oajueok] {
        font-size: 0.92rem;
    }

    .vx-invoice-table[b-dd6oajueok] {
        min-width: 960px;
    }

    .vx-invoice-actions[b-dd6oajueok] {
        justify-content: flex-start;
    }
}
.vx-invoice-list__print-button[b-dd6oajueok] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 42px;
    padding: 0 1rem;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.85rem;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

    .vx-invoice-list__print-button:hover[b-dd6oajueok] {
        background: #dbeafe;
        border-color: #93c5fd;
    }
/* /Components/Pages/OperationControl/Billing/Payments/Parts/InvoicePaymentHistoryPanel.razor.rz.scp.css */
/* =========================================================
   FILE: InvoicePaymentHistoryPanel.razor.css

   PURPOSE:
   Styles the invoice payment history panel.

   RESPONSIBILITIES:
   - Layout payment history panel
   - Style receipt session cards
   - Align receipt header actions
   - Style payment history table
   - Match Operations Plane visual language

   IMPORTANT NOTES:
   - Scoped CSS for InvoicePaymentHistoryPanel only
   - Does not style global table components
========================================================= */

.vx-payment-history-panel[b-z7sg45rau3] {
    width: 100%;
    max-width: 760px;
    margin-top: 1.5rem;
    margin-left: auto;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #d9dee5;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15,23,42,.05);
}

.vx-payment-history-panel__header[b-z7sg45rau3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .vx-payment-history-panel__header h3[b-z7sg45rau3] {
        margin: 0;
        font-size: 1.4rem;
        font-weight: 700;
    }

    .vx-payment-history-panel__header p[b-z7sg45rau3] {
        margin: .35rem 0 0;
        color: #64748b;
        font-size: .95rem;
        line-height: 1.4;
    }

.vx-payment-history-panel__actions[b-z7sg45rau3] {
    flex-shrink: 0;
}

    .vx-payment-history-panel__actions .vx-btn[b-z7sg45rau3] {
        padding: .6rem 1rem;
        border-radius: 12px;
        border: 1px solid #cfe0ff;
        background: #fff;
        color: #0f172a;
        font-weight: 700;
        box-shadow: 0 8px 20px rgba(15,23,42,.06);
    }

.vx-payment-history-panel__session[b-z7sg45rau3] {
    border: 1px solid #dfe6ef;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.vx-payment-history-panel__session-header[b-z7sg45rau3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.25rem .75rem;
}

    .vx-payment-history-panel__session-header strong[b-z7sg45rau3] {
        display: block;
        font-size: 1.1rem;
        font-weight: 700;
    }

    .vx-payment-history-panel__session-header span[b-z7sg45rau3] {
        display: block;
        margin-top: .2rem;
        color: #64748b;
        font-size: .9rem;
    }

.vx-payment-history-panel__session-actions[b-z7sg45rau3] {
    text-align: right;
}

    .vx-payment-history-panel__session-actions strong[b-z7sg45rau3] {
        display: block;
        font-size: 1.35rem;
        font-weight: 700;
        color: #0f172a;
    }

.vx-payment-history-panel .vx-table[b-z7sg45rau3] {
    margin: 0;
}

    .vx-payment-history-panel .vx-table th[b-z7sg45rau3],
    .vx-payment-history-panel .vx-table td[b-z7sg45rau3] {
        padding: .55rem .9rem;
        font-size: .9rem;
    }

    .vx-payment-history-panel .vx-table th[b-z7sg45rau3] {
        white-space: nowrap;
        background: #f8fafc;
    }

.vx-payment-history-panel .vx-table__amount[b-z7sg45rau3] {
    text-align: right;
    white-space: nowrap;
}

.vx-payment-history-panel__receipt-actions[b-z7sg45rau3] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.25rem 1.25rem;
    margin-top: .75rem;
    border-top: 1px solid #e5e7eb;
}

/* =========================================================
   PRINT RECEIPT BUTTON
========================================================= */

.vx-payment-history-panel__print-button[b-z7sg45rau3] {
    width: 25%;
    min-width: 200px;
    border: none;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    padding: .75rem 1rem;
    cursor: pointer;
    transition: background .2s ease;
}

    .vx-payment-history-panel__print-button:hover[b-z7sg45rau3] {
        background: #1d4ed8;
    }

.vx-empty-state[b-z7sg45rau3] {
    padding: 2rem;
    text-align: center;
    color: #64748b;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    background: #fafafa;
}
/* /Components/Pages/OperationControl/Billing/Payments/Parts/InvoicePaymentPanel.razor.rz.scp.css */
/* =========================================================
   FILE: InvoicePaymentPanel.razor.css

   PURPOSE:
   Scoped styles for the InvoicePaymentPanel component used in
   the Payments workspace.

   RESPONSIBILITIES:
   - Render payment panel layout
   - Style invoice summary section
   - Style form inputs (amount, method, reference)
   - Style action buttons (submit, cancel)
   - Align with Operations UI design system

   IMPORTANT NOTES:
   - No inline styling assumptions
   - Follows same visual language as CustomerPanel
   - Optimized for cashier/payment flow clarity
   - Panel is right-aligned and rendered as a compact card
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.invoice-payment-panel[b-slqib23gj1] {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* =========================================================
   CARD BASE
   ========================================================= */

.invoice-payment-panel__card[b-slqib23gj1] {
    display: flex;
    flex-direction: column;
    width: min(100%, 45%);
    min-width: 420px;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.invoice-payment-panel__header[b-slqib23gj1] {
    padding: 1rem 1.25rem 0.75rem 1.25rem;
    border-bottom: 1px solid #edf2f7;
    background: #ffffff;
}

    .invoice-payment-panel__header h3[b-slqib23gj1] {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: #0f172a;
    }

    .invoice-payment-panel__header p[b-slqib23gj1] {
        margin: 0.35rem 0 0;
        font-size: 0.92rem;
        line-height: 1.5;
        color: #475569;
    }

.invoice-payment-panel__body[b-slqib23gj1] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =========================================================
   SUMMARY
   ========================================================= */

.invoice-payment-panel__summary[b-slqib23gj1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    background: #fcfdff;
}

.invoice-payment-panel__summary-item[b-slqib23gj1] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.invoice-payment-panel__summary-label[b-slqib23gj1] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
}

.invoice-payment-panel__summary-value[b-slqib23gj1] {
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
}

/* =========================================================
   FORM
   ========================================================= */

.invoice-payment-panel__form[b-slqib23gj1] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.invoice-payment-panel__field[b-slqib23gj1] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.invoice-payment-panel__label[b-slqib23gj1] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
}

.invoice-payment-panel__input[b-slqib23gj1],
.invoice-payment-panel__select[b-slqib23gj1] {
    width: 100%;
    height: 44px;
    padding: 0 0.85rem;
    font-size: 0.95rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    outline: none;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

    .invoice-payment-panel__input:focus[b-slqib23gj1],
    .invoice-payment-panel__select:focus[b-slqib23gj1] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

/* =========================================================
   ACTIONS
   ========================================================= */

.invoice-payment-panel__actions[b-slqib23gj1] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.invoice-payment-panel__submit[b-slqib23gj1],
.invoice-payment-panel__cancel[b-slqib23gj1] {
    height: 44px;
    padding: 0 1.2rem;
    font: inherit;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.invoice-payment-panel__submit[b-slqib23gj1] {
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

    .invoice-payment-panel__submit:hover[b-slqib23gj1] {
        transform: translateY(-1px);
    }

.invoice-payment-panel__cancel[b-slqib23gj1] {
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #d6e0ea;
}

    .invoice-payment-panel__cancel:hover[b-slqib23gj1] {
        background: #f1f5f9;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .invoice-payment-panel__card[b-slqib23gj1] {
        width: min(100%, 52%);
        min-width: 380px;
    }
}

@media (max-width: 860px) {
    .invoice-payment-panel[b-slqib23gj1] {
        justify-content: stretch;
    }

    .invoice-payment-panel__card[b-slqib23gj1] {
        width: 100%;
        min-width: 0;
    }
}
/* ================================================
   SUMMARY ROW LAYOUT
   ================================================ */

.invoice-payment-panel__summary-row[b-slqib23gj1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

/* Right-aligned items (Status + Balance Due) */
.invoice-payment-panel__summary-item--right[b-slqib23gj1] {
    margin-left: auto;
    text-align: right;
}
/* /Components/Pages/OperationControl/Billing/Payments/PaymentsWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: PaymentsWorkspace.razor.css

   PURPOSE:
   Scoped styles for the payments workspace host.

   RESPONSIBILITIES:
   - Provide workspace-level layout structure
   - Style the payments workspace header
   - Style the payments workspace body
   - Provide layout zones for child components (list + panel)
   - Keep alignment with Operations Control visual language

   IMPORTANT NOTES:
   - This file styles the workspace host only
   - Child component styling belongs to child component CSS
   - No visual styling of child components here
   - Only layout orchestration is allowed
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.payments-workspace[b-w1upiutcum] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* =========================================================
   HEADER
   ========================================================= */

.payments-workspace__header[b-w1upiutcum] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.payments-workspace__title[b-w1upiutcum] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #172033;
    line-height: 1.2;
}

.payments-workspace__subtitle[b-w1upiutcum] {
    margin: 0;
    color: #5f6b7a;
    font-size: 0.96rem;
    line-height: 1.55;
}

/* =========================================================
   BODY
   ========================================================= */

.payments-workspace__body[b-w1upiutcum] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* =========================================================
   CONTENT LAYOUT (LIST + PANEL)
   ========================================================= */

/* Wrapper when payment panel is visible */
.payments-workspace__content[b-w1upiutcum] {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

/* Left side (invoice list) */
.payments-workspace__content-left[b-w1upiutcum] {
    flex: 1;
    min-width: 0;
}

/* Right side (payment panel container) */
.payments-workspace__content-right[b-w1upiutcum] {
    width: 45%;
    min-width: 420px;
    display: flex;
    justify-content: flex-end;
}

/* =========================================================
   LOADING
   ========================================================= */

.payments-workspace__loading[b-w1upiutcum] {
    margin: 0;
    padding: 1.1rem 1.2rem;
    border: 1px solid #dbe3ef;
    border-radius: 16px;
    background: #ffffff;
    color: #5f6b7a;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .payments-workspace__content[b-w1upiutcum] {
        flex-direction: column;
    }

    .payments-workspace__content-right[b-w1upiutcum] {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .payments-workspace[b-w1upiutcum] {
        gap: 1rem;
    }

    .payments-workspace__title[b-w1upiutcum] {
        font-size: 1.3rem;
    }

    .payments-workspace__subtitle[b-w1upiutcum] {
        font-size: 0.92rem;
    }
}
/* /Components/Pages/OperationControl/CustomerCreditAccounts/CustomerCreditAccountWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerCreditAccountWorkspace.razor.css

   PURPOSE:
   Scoped enterprise styling for the customer credit account
   operations workspace.

   RESPONSIBILITIES:
   - Align the credit account section with the existing Vixly
     workspace visual system
   - Present credit standing in a structured card
   - Style credit metrics, action buttons, and empty state
   - Keep styles scoped to this workspace only

   IMPORTANT NOTES:
   - This file does not introduce global styles
   - CustomerPanel keeps its own existing styling
   - This stylesheet only styles the credit account workspace
   ========================================================= */

.vx-credit-account-workspace[b-mbkji1o7qf] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.vx-credit-account-workspace__state[b-mbkji1o7qf] {
    margin-top: 1rem;
}

.vx-credit-account-workspace__account-card[b-mbkji1o7qf] {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 1.25rem;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.vx-credit-account-workspace__account-header[b-mbkji1o7qf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.vx-credit-account-workspace__eyebrow[b-mbkji1o7qf] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 0.55rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: #eef4ff;
    color: #165dff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.vx-credit-account-workspace__account-header h3[b-mbkji1o7qf] {
    margin: 0;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 800;
}

.vx-credit-account-workspace__account-header p[b-mbkji1o7qf] {
    max-width: 52rem;
    margin: 0.45rem 0 0;
    color: #475569;
    line-height: 1.55;
}

.vx-credit-account-workspace__primary-button[b-mbkji1o7qf],
.vx-credit-account-workspace__secondary-button[b-mbkji1o7qf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    border: 0;
    border-radius: 0.85rem;
    padding: 0.7rem 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.vx-credit-account-workspace__primary-button[b-mbkji1o7qf] {
    background: linear-gradient(135deg, #1232d8, #2563eb);
    color: #ffffff;
    box-shadow: 0 14px 24px rgba(37, 99, 235, 0.24);
}

.vx-credit-account-workspace__secondary-button[b-mbkji1o7qf] {
    background: #eef4ff;
    color: #1e3a8a;
}

    .vx-credit-account-workspace__primary-button:hover[b-mbkji1o7qf],
    .vx-credit-account-workspace__secondary-button:hover[b-mbkji1o7qf] {
        transform: translateY(-1px);
    }

    .vx-credit-account-workspace__primary-button:disabled[b-mbkji1o7qf],
    .vx-credit-account-workspace__secondary-button:disabled[b-mbkji1o7qf] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.vx-credit-account-workspace__message[b-mbkji1o7qf] {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid #fed7aa;
    border-radius: 0.9rem;
    background: #fff7ed;
    color: #9a3412;
    font-weight: 700;
}

.vx-credit-account-workspace__empty[b-mbkji1o7qf] {
    margin-top: 1.25rem;
    padding: 1.25rem;
    border: 1px dashed rgba(148, 163, 184, 0.55);
    border-radius: 1rem;
    background: #f8fafc;
    color: #64748b;
    font-weight: 650;
}

.vx-credit-account-workspace__metrics[b-mbkji1o7qf] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.vx-credit-account-workspace__metric[b-mbkji1o7qf] {
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

    .vx-credit-account-workspace__metric span[b-mbkji1o7qf] {
        display: block;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    .vx-credit-account-workspace__metric strong[b-mbkji1o7qf] {
        display: block;
        margin-top: 0.45rem;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 850;
    }

.vx-credit-account-workspace__actions[b-mbkji1o7qf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

@media (max-width: 1200px) {
    .vx-credit-account-workspace__metrics[b-mbkji1o7qf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .vx-credit-account-workspace__account-header[b-mbkji1o7qf] {
        flex-direction: column;
    }

    .vx-credit-account-workspace__metrics[b-mbkji1o7qf] {
        grid-template-columns: 1fr;
    }

    .vx-credit-account-workspace__primary-button[b-mbkji1o7qf],
    .vx-credit-account-workspace__secondary-button[b-mbkji1o7qf] {
        width: 100%;
    }
}
/* /Components/Pages/OperationControl/CustomerCreditAccounts/Parts/CustomerCreditAccountSummaryPanel.razor.rz.scp.css */
.vx-credit-summary[b-b1l7lp5l3r] {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 1.25rem;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.vx-credit-summary__header[b-b1l7lp5l3r] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.vx-credit-summary__eyebrow[b-b1l7lp5l3r] {
    display: inline-flex;
    margin-bottom: 0.55rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: #eef4ff;
    color: #165dff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.vx-credit-summary__header h3[b-b1l7lp5l3r] {
    margin: 0;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 800;
}

.vx-credit-summary__header p[b-b1l7lp5l3r] {
    margin: 0.45rem 0 0;
    color: #475569;
    line-height: 1.55;
}

.vx-credit-summary__primary-button[b-b1l7lp5l3r],
.vx-credit-summary__secondary-button[b-b1l7lp5l3r] {
    border: 0;
    border-radius: 0.85rem;
    padding: 0.7rem 1rem;
    font-weight: 800;
    cursor: pointer;
}

.vx-credit-summary__primary-button[b-b1l7lp5l3r] {
    background: linear-gradient(135deg, #1232d8, #2563eb);
    color: #ffffff;
}

.vx-credit-summary__secondary-button[b-b1l7lp5l3r] {
    background: #eef4ff;
    color: #1e3a8a;
}

.vx-credit-summary__message[b-b1l7lp5l3r] {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid #fed7aa;
    border-radius: 0.9rem;
    background: #fff7ed;
    color: #9a3412;
    font-weight: 700;
}

.vx-credit-summary__empty[b-b1l7lp5l3r] {
    margin-top: 1.25rem;
    padding: 1.25rem;
    border: 1px dashed rgba(148, 163, 184, 0.55);
    border-radius: 1rem;
    background: #f8fafc;
    color: #64748b;
    font-weight: 650;
}

.vx-credit-summary__metrics[b-b1l7lp5l3r] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.vx-credit-summary__metric[b-b1l7lp5l3r] {
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

    .vx-credit-summary__metric span[b-b1l7lp5l3r] {
        display: block;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    .vx-credit-summary__metric strong[b-b1l7lp5l3r] {
        display: block;
        margin-top: 0.45rem;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 850;
    }

.vx-credit-summary__actions[b-b1l7lp5l3r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

@media (max-width: 1200px) {
    .vx-credit-summary__metrics[b-b1l7lp5l3r] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .vx-credit-summary__header[b-b1l7lp5l3r] {
        flex-direction: column;
    }

    .vx-credit-summary__metrics[b-b1l7lp5l3r] {
        grid-template-columns: 1fr;
    }

    .vx-credit-summary__primary-button[b-b1l7lp5l3r],
    .vx-credit-summary__secondary-button[b-b1l7lp5l3r] {
        width: 100%;
    }
}
/* =========================================================
   CREDIT LIMIT MODAL
   ========================================================= */

.vx-credit-summary__modal-backdrop[b-b1l7lp5l3r] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
}

.vx-credit-summary__modal[b-b1l7lp5l3r] {
    width: 100%;
    max-width: 34rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1.5rem;
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}

.vx-credit-summary__modal-header[b-b1l7lp5l3r] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

    .vx-credit-summary__modal-header h3[b-b1l7lp5l3r] {
        margin: 0.45rem 0 0;
        color: #0f172a;
        font-size: 1.35rem;
        font-weight: 850;
    }

    .vx-credit-summary__modal-header p[b-b1l7lp5l3r] {
        margin: 0.5rem 0 0;
        color: #475569;
        line-height: 1.55;
    }

.vx-credit-summary__modal-close[b-b1l7lp5l3r] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 999px;
    background: #eef2ff;
    color: #1e3a8a;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}

.vx-credit-summary__modal-body[b-b1l7lp5l3r] {
    padding: 1.5rem;
}

.vx-credit-summary__input-label[b-b1l7lp5l3r] {
    display: block;
    margin-bottom: 0.65rem;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vx-credit-summary__modal-actions[b-b1l7lp5l3r] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

/* =========================================================
   CREDIT LIMIT CURRENCY INPUT
   ========================================================= */

.vx-credit-summary__currency-input[b-b1l7lp5l3r] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 3.25rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 1rem;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .vx-credit-summary__currency-input:focus-within[b-b1l7lp5l3r] {
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

.vx-credit-summary__currency-symbol[b-b1l7lp5l3r] {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 3.5rem;
    background: #f8fafc;
    color: #1e3a8a;
    font-size: 1rem;
    font-weight: 850;
    border-right: 1px solid rgba(148, 163, 184, 0.18);
}

.vx-credit-summary__input[b-b1l7lp5l3r] {
    width: 100%;
    border: 0;
    outline: none;
    padding: 0 1rem;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 750;
    background: transparent;
    appearance: textfield;
    -moz-appearance: textfield;
}

    .vx-credit-summary__input[b-b1l7lp5l3r]::-webkit-outer-spin-button,
    .vx-credit-summary__input[b-b1l7lp5l3r]::-webkit-inner-spin-button {
        margin: 0;
        -webkit-appearance: none;
    }
/* =========================================================
   FORM CONTROLS
   ========================================================= */

.vx-credit-summary__select[b-b1l7lp5l3r],
.vx-credit-summary__text-input[b-b1l7lp5l3r],
.vx-credit-summary__textarea[b-b1l7lp5l3r] {
    width: 100%;
    min-height: 3rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 650;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vx-credit-summary__textarea[b-b1l7lp5l3r] {
    min-height: 8rem;
    resize: vertical;
}

    .vx-credit-summary__select:focus[b-b1l7lp5l3r],
    .vx-credit-summary__text-input:focus[b-b1l7lp5l3r],
    .vx-credit-summary__textarea:focus[b-b1l7lp5l3r] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

.vx-credit-summary__modal-body[b-b1l7lp5l3r] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
/* =========================================================
   PAYMENT MODAL
   ========================================================= */

.vx-credit-summary__modal-backdrop[b-b1l7lp5l3r] {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(3px);
}

.vx-credit-summary__modal[b-b1l7lp5l3r] {
    width: 100%;
    max-width: 36rem;
    border-radius: 1.5rem;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.vx-credit-summary__modal-header[b-b1l7lp5l3r] {
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

    .vx-credit-summary__modal-header h3[b-b1l7lp5l3r] {
        margin: 0;
        color: #0f172a;
        font-size: 1.25rem;
        font-weight: 800;
    }

    .vx-credit-summary__modal-header p[b-b1l7lp5l3r] {
        margin: 0.45rem 0 0;
        color: #64748b;
        line-height: 1.55;
    }

.vx-credit-summary__modal-body[b-b1l7lp5l3r] {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    padding: 1.5rem 1.75rem;
}

.vx-credit-summary__field[b-b1l7lp5l3r] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

    .vx-credit-summary__field label[b-b1l7lp5l3r] {
        color: #475569;
        font-size: 0.8rem;
        font-weight: 800;
        letter-spacing: 0.045em;
        text-transform: uppercase;
    }

    .vx-credit-summary__field input[b-b1l7lp5l3r],
    .vx-credit-summary__field textarea[b-b1l7lp5l3r] {
        width: 100%;
        padding: 0.9rem 1rem;
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: 0.9rem;
        background: #ffffff;
        color: #0f172a;
        font-size: 0.95rem;
        font-weight: 600;
    }

    .vx-credit-summary__field textarea[b-b1l7lp5l3r] {
        min-height: 7rem;
        resize: vertical;
    }

.vx-credit-summary__modal-actions[b-b1l7lp5l3r] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem 1.75rem;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.vx-credit-summary__modal-secondary-button[b-b1l7lp5l3r] {
    padding: 0.85rem 1.2rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.9rem;
    background: #ffffff;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.vx-credit-summary__modal-primary-button[b-b1l7lp5l3r] {
    padding: 0.85rem 1.25rem;
    border: none;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, #2563eb, #165dff);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 25px rgba(37, 99, 235, 0.25);
}
/* /Components/Pages/OperationControl/CustomerCreditAccounts/Parts/CustomerCreditLedgerHistoryPanel.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerCreditLedgerHistoryPanel.razor.css

   PURPOSE:
   Styles the customer credit ledger history panel for the
   Operations customer credit workflow.

   RESPONSIBILITIES:
   - Style ledger history container
   - Style ledger table layout
   - Style operational finance badges
   - Style loading and empty states
   - Maintain enterprise-grade finance UI consistency

   IMPORTANT NOTES:
   - Scoped CSS for CustomerCreditLedgerHistoryPanel
   - Designed for desktop-first financial review workflows
   - Ledger history is read-only operational data
   ========================================================= */


/* =========================================================
   ROOT PANEL
   ========================================================= */

.vx-credit-ledger[b-j9w0en6q08] {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 1.25rem;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}


/* =========================================================
   HEADER
   ========================================================= */

.vx-credit-ledger__header[b-j9w0en6q08] {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.vx-credit-ledger__eyebrow[b-j9w0en6q08] {
    display: inline-flex;
    margin-bottom: 0.55rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: #eef4ff;
    color: #165dff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.vx-credit-ledger__header h3[b-j9w0en6q08] {
    margin: 0;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 800;
}

.vx-credit-ledger__header p[b-j9w0en6q08] {
    margin: 0.45rem 0 0;
    color: #475569;
    line-height: 1.55;
}


/* =========================================================
   EMPTY / MESSAGE STATES
   ========================================================= */

.vx-credit-ledger__empty[b-j9w0en6q08],
.vx-credit-ledger__message[b-j9w0en6q08] {
    margin-top: 1.25rem;
    padding: 1.25rem;
    border-radius: 1rem;
    background: #f8fafc;
    color: #64748b;
    font-weight: 650;
}

.vx-credit-ledger__message[b-j9w0en6q08] {
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}


/* =========================================================
   TABLE WRAPPER
   ========================================================= */

.vx-credit-ledger__table-wrap[b-j9w0en6q08] {
    margin-top: 1.25rem;
    overflow-x: auto;
}


/* =========================================================
   TABLE
   ========================================================= */

.vx-credit-ledger__table[b-j9w0en6q08] {
    width: 100%;
    min-width: 64rem;
    border-collapse: collapse;
}


    /* =========================================================
   TABLE HEADER
   ========================================================= */

    .vx-credit-ledger__table th[b-j9w0en6q08] {
        padding: 0.8rem 0.9rem;
        border-bottom: 1px solid rgba(148, 163, 184, 0.22);
        background: #f8fafc;
        color: #475569;
        font-size: 0.72rem;
        font-weight: 850;
        letter-spacing: 0.055em;
        text-align: left;
        text-transform: uppercase;
    }


    /* =========================================================
   TABLE BODY
   ========================================================= */

    .vx-credit-ledger__table td[b-j9w0en6q08] {
        padding: 0.9rem;
        border-bottom: 1px solid rgba(148, 163, 184, 0.16);
        color: #0f172a;
        font-size: 0.9rem;
        font-weight: 600;
    }


/* =========================================================
   DIRECTION BADGES
   ========================================================= */

.vx-credit-ledger__badge[b-j9w0en6q08] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}


/* =========================================================
   DEBIT BADGE
   ========================================================= */

.vx-credit-ledger__badge--debit[b-j9w0en6q08] {
    background: #fff7ed;
    color: #9a3412;
}


/* =========================================================
   CREDIT BADGE
   ========================================================= */

.vx-credit-ledger__badge--credit[b-j9w0en6q08] {
    background: #ecfdf5;
    color: #047857;
}
/* /Components/Pages/OperationControl/Customers/Parts/CustomerCreditAccountPanel.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerCreditAccountPanel.razor.css

   PURPOSE:
   Scoped styles for the customer credit account panel.

   RESPONSIBILITIES:
   - Present credit account summary clearly
   - Style ledger history table
   - Style action buttons
   - Preserve enterprise operational UI consistency

   IMPORTANT NOTES:
   - This stylesheet belongs only to CustomerCreditAccountPanel
   - No global styles are introduced here
   ========================================================= */

.vx-credit-account-panel[b-33l7a4b7d7] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.vx-credit-account-panel__header[b-33l7a4b7d7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

    .vx-credit-account-panel__header h3[b-33l7a4b7d7] {
        margin: 0;
    }

    .vx-credit-account-panel__header p[b-33l7a4b7d7] {
        margin: 0.35rem 0 0;
        color: var(--vx-text-muted, #64748b);
    }

.vx-credit-account-panel__summary[b-33l7a4b7d7] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.vx-credit-account-panel__metric[b-33l7a4b7d7] {
    padding: 1rem;
    border: 1px solid var(--vx-border, #e2e8f0);
    border-radius: 0.875rem;
    background: var(--vx-surface-soft, #f8fafc);
}

    .vx-credit-account-panel__metric span[b-33l7a4b7d7] {
        display: block;
        font-size: 0.75rem;
        color: var(--vx-text-muted, #64748b);
    }

    .vx-credit-account-panel__metric strong[b-33l7a4b7d7] {
        display: block;
        margin-top: 0.35rem;
        font-size: 1rem;
    }

.vx-credit-account-panel__actions[b-33l7a4b7d7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.vx-credit-account-panel__primary-button[b-33l7a4b7d7],
.vx-credit-account-panel__secondary-button[b-33l7a4b7d7],
.vx-credit-account-panel__warning-button[b-33l7a4b7d7],
.vx-credit-account-panel__danger-button[b-33l7a4b7d7] {
    border: 0;
    border-radius: 0.75rem;
    padding: 0.7rem 1rem;
    font-weight: 700;
    cursor: pointer;
}

.vx-credit-account-panel__primary-button[b-33l7a4b7d7] {
    background: #1232d8;
    color: #ffffff;
}

.vx-credit-account-panel__secondary-button[b-33l7a4b7d7] {
    background: #eef2ff;
    color: #1e1b4b;
}

.vx-credit-account-panel__warning-button[b-33l7a4b7d7] {
    background: #fff7ed;
    color: #9a3412;
}

.vx-credit-account-panel__danger-button[b-33l7a4b7d7] {
    background: #fef2f2;
    color: #991b1b;
}

    .vx-credit-account-panel__primary-button:disabled[b-33l7a4b7d7],
    .vx-credit-account-panel__secondary-button:disabled[b-33l7a4b7d7],
    .vx-credit-account-panel__warning-button:disabled[b-33l7a4b7d7],
    .vx-credit-account-panel__danger-button:disabled[b-33l7a4b7d7] {
        opacity: 0.55;
        cursor: not-allowed;
    }

.vx-credit-account-panel__alert[b-33l7a4b7d7] {
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: #fef2f2;
    color: #991b1b;
}

.vx-credit-account-panel__empty[b-33l7a4b7d7] {
    padding: 1rem;
    border: 1px dashed var(--vx-border, #cbd5e1);
    border-radius: 0.875rem;
    color: var(--vx-text-muted, #64748b);
}

.vx-credit-account-panel__ledger h4[b-33l7a4b7d7] {
    margin: 0 0 0.75rem;
}

.vx-credit-account-panel__table-wrap[b-33l7a4b7d7] {
    overflow-x: auto;
}

.vx-credit-account-panel__table[b-33l7a4b7d7] {
    width: 100%;
    border-collapse: collapse;
}

    .vx-credit-account-panel__table th[b-33l7a4b7d7],
    .vx-credit-account-panel__table td[b-33l7a4b7d7] {
        padding: 0.8rem;
        border-bottom: 1px solid var(--vx-border, #e2e8f0);
        text-align: left;
        white-space: nowrap;
    }

    .vx-credit-account-panel__table th[b-33l7a4b7d7] {
        font-size: 0.75rem;
        color: var(--vx-text-muted, #64748b);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

@media (max-width: 1100px) {
    .vx-credit-account-panel__summary[b-33l7a4b7d7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .vx-credit-account-panel__header[b-33l7a4b7d7] {
        flex-direction: column;
    }

    .vx-credit-account-panel__summary[b-33l7a4b7d7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/OperationControl/Customers/Parts/CustomerDetails.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerDetails.razor.css

   PURPOSE:
   Scoped styles for the CustomerDetails component used in
   the Operations customer workspace.

   RESPONSIBILITIES:
   - Style customer details header and back action
   - Style customer identity and section cards
   - Style customer profile, address, operational summary,
     notes, and audit sections
   - Style customer action pills and resend verification action
   - Keep customer data readable and aligned with Vixly UI

   IMPORTANT NOTES:
   - This file contains UI styling only
   - No inline styles should be used in the Razor file
   - This stylesheet is scoped to CustomerDetails.razor
   - The layout is optimized for read-first operational use
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.vx-customer-details[b-xypqj0ohwj] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    min-width: 0;
}

/* =========================================================
   HEADER / BACK ACTION
   ========================================================= */

.vx-customer-details__header[b-xypqj0ohwj] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.vx-customer-details__back-button[b-xypqj0ohwj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 1rem;
    border-radius: 12px;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

    .vx-customer-details__back-button:hover[b-xypqj0ohwj] {
        background: #dbeafe;
        border-color: #bfdbfe;
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
    }

    .vx-customer-details__back-button:focus-visible[b-xypqj0ohwj] {
        outline: 2px solid #93c5fd;
        outline-offset: 3px;
    }

/* =========================================================
   DETAILS GRID
   ========================================================= */

.vx-customer-details__grid[b-xypqj0ohwj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.vx-card.vx-customer-details__section[b-xypqj0ohwj],
.vx-customer-details__section[b-xypqj0ohwj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    min-width: 0;
}

.vx-customer-details__section-header[b-xypqj0ohwj] {
    padding-bottom: 0.25rem;
}

    .vx-customer-details__section-header h3[b-xypqj0ohwj] {
        margin: 0;
        font-size: 1.08rem;
        font-weight: 850;
        color: #0f172a;
    }

/* =========================================================
   IDENTITY BLOCK
   ========================================================= */

.vx-customer-details__identity[b-xypqj0ohwj] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 0.25rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e5edf5;
}

.vx-customer-details__avatar[b-xypqj0ohwj] {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1rem;
    flex: 0 0 52px;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.2);
}

.vx-customer-details__identity-meta[b-xypqj0ohwj] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.vx-customer-details__identity-name[b-xypqj0ohwj] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.3;
    word-break: break-word;
}

.vx-customer-details__identity-code[b-xypqj0ohwj] {
    margin: 0;
    font-size: 0.86rem;
    color: #64748b;
    font-weight: 700;
    word-break: break-word;
}

/* =========================================================
   FIELD GRID
   ========================================================= */

.vx-customer-details__fields[b-xypqj0ohwj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.vx-customer-details__field[b-xypqj0ohwj] {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    min-width: 0;
    padding: 0.85rem 0.95rem;
    background: #f8fafc;
    border: 1px solid #e5edf5;
    border-radius: 14px;
}

.vx-customer-details__field--full[b-xypqj0ohwj] {
    grid-column: 1 / -1;
}

.vx-customer-details__label[b-xypqj0ohwj] {
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.vx-customer-details__value[b-xypqj0ohwj] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    word-break: break-word;
}

/* =========================================================
   CONTACT LINK
   ========================================================= */

.vx-customer-details__contact-link[b-xypqj0ohwj] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 800;
    word-break: break-word;
}

    .vx-customer-details__contact-link:hover[b-xypqj0ohwj] {
        color: #1d4ed8;
        text-decoration: underline;
    }

    .vx-customer-details__contact-link:visited[b-xypqj0ohwj] {
        color: #2563eb;
    }

/* =========================================================
   OPERATIONAL PILLS / LINK BUTTONS
   ========================================================= */

.vx-customer-details__link-button[b-xypqj0ohwj],
.vx-customer-details__pill[b-xypqj0ohwj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 32px;
    padding: 0 0.75rem;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 850;
    white-space: nowrap;
}

.vx-customer-details__link-button[b-xypqj0ohwj] {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #dbeafe;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

    .vx-customer-details__link-button:hover[b-xypqj0ohwj] {
        background: #dbeafe;
        border-color: #bfdbfe;
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(37, 99, 235, 0.12);
    }

    .vx-customer-details__link-button:active[b-xypqj0ohwj] {
        transform: translateY(0);
    }

    .vx-customer-details__link-button:focus-visible[b-xypqj0ohwj] {
        outline: 2px solid #93c5fd;
        outline-offset: 2px;
    }

.vx-customer-details__link-button--invoices[b-xypqj0ohwj] {
    background: #f8fafc;
    color: #334155;
    border: 1px solid #dbe3ef;
}

    .vx-customer-details__link-button--invoices:hover[b-xypqj0ohwj] {
        background: #f1f5f9;
        border-color: #cbd5e1;
        box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
    }

.vx-customer-details__pill[b-xypqj0ohwj] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

/* =========================================================
   STATUS ACTION
   ========================================================= */

.vx-customer-details__action-button[b-xypqj0ohwj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #dbeafe;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

    .vx-customer-details__action-button:hover[b-xypqj0ohwj] {
        background: #dbeafe;
        border-color: #bfdbfe;
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(37, 99, 235, 0.12);
    }

    .vx-customer-details__action-button:active[b-xypqj0ohwj] {
        transform: translateY(0);
    }

    .vx-customer-details__action-button:focus-visible[b-xypqj0ohwj] {
        outline: 2px solid #93c5fd;
        outline-offset: 2px;
    }

/* =========================================================
   ICON SUPPORT
   ========================================================= */

.vx-customer-details__badge-icon[b-xypqj0ohwj] {
    margin-right: 0.3rem;
    font-size: 0.85rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 960px) {
    .vx-customer-details__grid[b-xypqj0ohwj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .vx-customer-details[b-xypqj0ohwj] {
        gap: 1rem;
    }

    .vx-card.vx-customer-details__section[b-xypqj0ohwj],
    .vx-customer-details__section[b-xypqj0ohwj] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-customer-details__fields[b-xypqj0ohwj] {
        grid-template-columns: 1fr;
    }

    .vx-customer-details__identity[b-xypqj0ohwj] {
        align-items: flex-start;
    }

    .vx-customer-details__back-button[b-xypqj0ohwj] {
        width: 100%;
    }
}

.vx-customer-details__action-button--success[b-xypqj0ohwj] {
    background: #16a34a;
    border-color: #16a34a;
    color: white;
}

.vx-customer-details__action-button--error[b-xypqj0ohwj] {
    background: #dc2626;
    border-color: #dc2626;
    color: white;
}
/* /Components/Pages/OperationControl/Customers/Parts/CustomerList.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerList.razor.css

   PURPOSE:
   Scoped styles for the CustomerList component.

   RESPONSIBILITIES:
   - Render customer list workspace layout
   - Style search and table presentation
   - Style selected customer state
   - Style customer metrics and status badges
   - Align with Vixly Operations UI language

   IMPORTANT NOTES:
   - UI-only styling
   - No markup assumptions beyond existing structure
   - No logic or workflow behavior changes
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.vx-customer-list[b-ymf0ps6mm4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

/* =========================================================
   HEADER
   ========================================================= */

.vx-customer-list__header[b-ymf0ps6mm4] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

    .vx-customer-list__header h2[b-ymf0ps6mm4] {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 800;
        color: #0f172a;
    }

    .vx-customer-list__header p[b-ymf0ps6mm4] {
        margin: 0.35rem 0 0 0;
        font-size: 0.94rem;
        line-height: 1.55;
        color: #475569;
    }

/* =========================================================
   SEARCH
   ========================================================= */

.vx-customer-list__search[b-ymf0ps6mm4] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 280px;
}

    .vx-customer-list__search label[b-ymf0ps6mm4] {
        font-size: 0.82rem;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

.vx-customer-list__input[b-ymf0ps6mm4] {
    width: 100%;
    height: 46px;
    padding: 0 1rem;
    font-size: 0.94rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .vx-customer-list__input:focus[b-ymf0ps6mm4] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    .vx-customer-list__input[b-ymf0ps6mm4]::placeholder {
        color: #94a3b8;
    }

/* =========================================================
   CARD WRAPPER
   ========================================================= */

.vx-card[b-ymf0ps6mm4] {
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.vx-customer-list__empty[b-ymf0ps6mm4] {
    padding: 2rem 1.5rem;
    text-align: center;
}

    .vx-customer-list__empty p[b-ymf0ps6mm4] {
        margin: 0;
        color: #64748b;
        font-size: 0.95rem;
    }

/* =========================================================
   TABLE WRAP
   ========================================================= */

.vx-customer-list__table-wrap[b-ymf0ps6mm4] {
    overflow-x: auto;
}

/* =========================================================
   TABLE
   ========================================================= */

.vx-customer-list__table[b-ymf0ps6mm4] {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
}

    .vx-customer-list__table thead th[b-ymf0ps6mm4] {
        padding: 1rem;
        text-align: left;
        font-size: 0.8rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #64748b;
        background: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .vx-customer-list__table tbody td[b-ymf0ps6mm4] {
        padding: 1rem;
        font-size: 0.93rem;
        color: #0f172a;
        border-top: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .vx-customer-list__table tbody tr[b-ymf0ps6mm4] {
        transition: background 0.14s ease;
    }

        .vx-customer-list__table tbody tr:hover[b-ymf0ps6mm4] {
            background: #f8fbff;
        }

        /* =========================================================
   SELECTED ROW
   ========================================================= */

        .vx-customer-list__table tbody tr.is-selected[b-ymf0ps6mm4] {
            background: #eef4ff;
        }

            .vx-customer-list__table tbody tr.is-selected td[b-ymf0ps6mm4] {
                border-color: #dbeafe;
            }

/* =========================================================
   CUSTOMER LINK
   ========================================================= */

.vx-customer-list__link-button[b-ymf0ps6mm4] {
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    color: #1d4ed8;
    cursor: pointer;
    transition: color 0.14s ease;
}

    .vx-customer-list__link-button:hover[b-ymf0ps6mm4] {
        color: #1e40af;
        text-decoration: underline;
    }

/* =========================================================
   EMAIL LINK
   ========================================================= */

.vx-customer-list__email-link[b-ymf0ps6mm4] {
    color: #2563eb;
    text-decoration: none;
    transition: color 0.14s ease;
}

    .vx-customer-list__email-link:hover[b-ymf0ps6mm4] {
        color: #1d4ed8;
        text-decoration: underline;
    }

/* =========================================================
   METRICS
   ========================================================= */

.vx-customer-list__metric[b-ymf0ps6mm4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 32px;
    padding: 0 0.75rem;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 800;
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .vx-customer-list__header[b-ymf0ps6mm4] {
        align-items: stretch;
    }

    .vx-customer-list__search[b-ymf0ps6mm4] {
        width: 100%;
        min-width: 0;
    }
}
/* /Components/Pages/OperationControl/Dispatching/DispatchWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: DispatchWorkspace.razor.css

   PURPOSE:
   Scoped styles for the DispatchWorkspace page in the
   Vixly Operations Plane.

   RESPONSIBILITIES:
   - Provide enterprise-grade Dispatch workspace layout
   - Style the dispatch header, bundle selector, leg builder,
     leg list, details panel, alerts, cards, and action buttons
   - Style dispatch lifecycle controls and leg execution actions
   - Keep visual language aligned with the existing Vixly UI
     system used by CustomerPanel and shipment workflows
   - Prevent styling leakage into unrelated workspaces

   IMPORTANT NOTES:
   - This file belongs beside DispatchWorkspace.razor
   - Child panels are styled through ::deep because Blazor CSS
     isolation scopes child component markup separately
   - Do not move business logic into CSS or child components
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.dispatch-workspace[b-u9jne3jxam] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1.25rem;
    padding: 1.25rem;
}

/* =========================================================
   HEADER PANEL
   ========================================================= */

[b-u9jne3jxam] .dispatch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

[b-u9jne3jxam] .dispatch-header__left {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

[b-u9jne3jxam] .dispatch-header__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
}

[b-u9jne3jxam] .dispatch-header__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    font-size: 0.92rem;
    color: #475569;
}

    [b-u9jne3jxam] .dispatch-header__meta strong {
        color: #1d4ed8;
        font-weight: 800;
    }

[b-u9jne3jxam] .dispatch-header__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* =========================================================
   ALERTS
   ========================================================= */

[b-u9jne3jxam] .dispatch-alert {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.94rem;
    line-height: 1.45;
    font-weight: 700;
}

[b-u9jne3jxam] .dispatch-alert--error {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

[b-u9jne3jxam] .dispatch-alert--success {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

/* =========================================================
   GRID AND CARD SYSTEM
   ========================================================= */

.dispatch-grid[b-u9jne3jxam] {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.25fr);
    gap: 1.25rem;
    align-items: start;
}

.dispatch-card[b-u9jne3jxam] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    padding: 1.25rem;
}

.dispatch-card--legs[b-u9jne3jxam] {
    gap: 1.25rem;
}

.dispatch-card--details[b-u9jne3jxam] {
    padding: 1.25rem;
}

/* =========================================================
   BUTTON SYSTEM
   ========================================================= */

[b-u9jne3jxam] .btn,
[b-u9jne3jxam] .btn-primary,
[b-u9jne3jxam] .btn-secondary,
[b-u9jne3jxam] .btn-link {
    font: inherit;
    cursor: pointer;
    border: none;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

    [b-u9jne3jxam] .btn:disabled,
    [b-u9jne3jxam] .btn-primary:disabled,
    [b-u9jne3jxam] .btn-secondary:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none;
    }

[b-u9jne3jxam] .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 156px;
    height: 46px;
    padding: 0 1.35rem;
    font-size: 0.94rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
    white-space: nowrap;
}

    [b-u9jne3jxam] .btn-primary:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3);
    }

[b-u9jne3jxam] .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    height: 42px;
    padding: 0 1.1rem;
    font-size: 0.92rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 12px;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.22);
}

    [b-u9jne3jxam] .btn-secondary:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 14px 24px rgba(37, 99, 235, 0.26);
    }

[b-u9jne3jxam] .btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #475569;
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 0.88rem;
    font-weight: 700;
}

    [b-u9jne3jxam] .btn-link.danger {
        color: #dc2626;
    }

        [b-u9jne3jxam] .btn-link.danger:hover {
            color: #b91c1c;
            text-decoration: underline;
        }

/* =========================================================
   SHARED EMPTY STATE
   ========================================================= */

[b-u9jne3jxam] .dispatch-empty {
    padding: 1rem;
    color: #64748b;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    font-size: 0.94rem;
    line-height: 1.5;
}

/* =========================================================
   BUNDLE SELECTOR PANEL
   ========================================================= */

[b-u9jne3jxam] .dispatch-bundles {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[b-u9jne3jxam] .dispatch-bundles__title,
[b-u9jne3jxam] .dispatch-leg-builder h3,
[b-u9jne3jxam] .dispatch-leg-list h3,
[b-u9jne3jxam] .dispatch-details h3,
[b-u9jne3jxam] .dispatch-details h4 {
    margin: 0;
    color: #0f172a;
    font-weight: 800;
    line-height: 1.3;
}

[b-u9jne3jxam] .dispatch-bundles__title,
[b-u9jne3jxam] .dispatch-leg-builder h3,
[b-u9jne3jxam] .dispatch-leg-list h3,
[b-u9jne3jxam] .dispatch-details h3 {
    font-size: 1rem;
}

[b-u9jne3jxam] .dispatch-details h4 {
    font-size: 0.95rem;
}

[b-u9jne3jxam] .dispatch-bundle-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

[b-u9jne3jxam] .dispatch-bundle-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

    [b-u9jne3jxam] .dispatch-bundle-item:hover {
        transform: translateY(-1px);
        background: #f8fbff;
        border-color: #bfdbfe;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    }

    [b-u9jne3jxam] .dispatch-bundle-item.selected {
        background: #eff6ff;
        border-color: #2563eb;
        box-shadow: 0 10px 20px rgba(37, 99, 235, 0.12);
    }

[b-u9jne3jxam] .dispatch-bundle-item__left {
    display: flex;
    align-items: flex-start;
    padding-top: 0.15rem;
}

    [b-u9jne3jxam] .dispatch-bundle-item__left input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: #2563eb;
        cursor: pointer;
    }

[b-u9jne3jxam] .dispatch-bundle-item__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

[b-u9jne3jxam] .dispatch-bundle-item__title {
    font-size: 0.98rem;
    font-weight: 800;
    color: #0f172a;
    word-break: break-word;
}

[b-u9jne3jxam] .dispatch-bundle-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
    color: #475569;
    font-size: 0.86rem;
    line-height: 1.45;
}

/* =========================================================
   LEG BUILDER PANEL
   ========================================================= */

[b-u9jne3jxam] .dispatch-leg-builder {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[b-u9jne3jxam] .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

    [b-u9jne3jxam] .form-grid input,
    [b-u9jne3jxam] .form-grid select {
        width: 100%;
        min-width: 0;
        height: 44px;
        padding: 0 0.85rem;
        font-size: 0.92rem;
        color: #0f172a;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        outline: none;
        transition: all 0.15s ease;
    }

        [b-u9jne3jxam] .form-grid input:focus,
        [b-u9jne3jxam] .form-grid select:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
        }

        [b-u9jne3jxam] .form-grid input::placeholder {
            color: #94a3b8;
        }

/* =========================================================
   LEG LIST PANEL
   ========================================================= */

[b-u9jne3jxam] .dispatch-leg-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #edf2f7;
}

[b-u9jne3jxam] .dispatch-leg-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

[b-u9jne3jxam] .dispatch-leg-item {
    padding: 0.95rem;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 14px;
}

[b-u9jne3jxam] .dispatch-leg-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

[b-u9jne3jxam] .dispatch-leg-item__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 900;
}

[b-u9jne3jxam] .dispatch-leg-item__type {
    flex: 1 1 auto;
    min-width: 0;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 800;
}

[b-u9jne3jxam] .dispatch-leg-item__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #0f172a;
    font-size: 0.94rem;
    line-height: 1.45;
}

[b-u9jne3jxam] .dispatch-leg-item__meta,
[b-u9jne3jxam] .dispatch-leg__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.45;
}

/* =========================================================
   DETAILS PANEL
   ========================================================= */

[b-u9jne3jxam] .dispatch-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[b-u9jne3jxam] .dispatch-details__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #edf2f7;
}

    [b-u9jne3jxam] .dispatch-details__header .dispatch-header__right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    [b-u9jne3jxam] .dispatch-details__header h3 {
        font-size: 1.05rem;
        font-weight: 800;
        color: #0f172a;
    }

[b-u9jne3jxam] .dispatch-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.4rem 0.85rem;
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

[b-u9jne3jxam] .dispatch-badge--planned {
    color: #334155;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
}

[b-u9jne3jxam] .dispatch-badge--ready {
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
}

[b-u9jne3jxam] .dispatch-badge--in-transit {
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
}

[b-u9jne3jxam] .dispatch-badge--completed {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

[b-u9jne3jxam] .dispatch-badge--cancelled {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

[b-u9jne3jxam] .dispatch-details__header .btn-primary {
    min-width: 138px;
    height: 42px;
    padding: 0 1.15rem;
    font-size: 0.9rem;
}

[b-u9jne3jxam] .dispatch-details__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.45;
}

[b-u9jne3jxam] .dispatch-details__section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.5rem;
}

[b-u9jne3jxam] .dispatch-list,
[b-u9jne3jxam] .dispatch-legs {
    margin: 0;
    padding-left: 1.25rem;
}

    [b-u9jne3jxam] .dispatch-list li,
    [b-u9jne3jxam] .dispatch-leg {
        margin-bottom: 0.65rem;
        color: #0f172a;
        font-size: 0.92rem;
        line-height: 1.5;
    }

    [b-u9jne3jxam] .dispatch-list li {
        padding: 0.65rem 0.75rem;
        background: #fcfdff;
        border: 1px solid #edf2f7;
        border-radius: 12px;
        list-style-position: inside;
    }

        [b-u9jne3jxam] .dispatch-list li strong {
            color: #0f172a;
        }

/* =========================================================
   DETAILS LEG CARDS AND ACTIONS
   ========================================================= */

[b-u9jne3jxam] .dispatch-leg {
    padding: 0.9rem 1rem;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

[b-u9jne3jxam] .dispatch-leg__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
    font-size: 0.96rem;
    line-height: 1.45;
    color: #0f172a;
}

[b-u9jne3jxam] .dispatch-leg__meta {
    margin-top: 0.45rem;
}

[b-u9jne3jxam] .dispatch-leg-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #edf2f7;
}

    [b-u9jne3jxam] .dispatch-leg-actions .btn-secondary {
        min-width: 96px;
        height: 38px;
        padding: 0 1rem;
        font-size: 0.86rem;
        border-radius: 10px;
    }

    [b-u9jne3jxam] .dispatch-leg-actions .muted {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0.25rem 0.65rem;
        color: #475569;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 700;
    }

[b-u9jne3jxam] .muted {
    color: #64748b;
    font-size: 0.84rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .dispatch-grid[b-u9jne3jxam] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .dispatch-workspace[b-u9jne3jxam] {
        padding: 0.85rem;
    }

    [b-u9jne3jxam] .dispatch-header {
        flex-direction: column;
        align-items: stretch;
    }

    [b-u9jne3jxam] .dispatch-header__right {
        justify-content: stretch;
    }

        [b-u9jne3jxam] .dispatch-header__right .btn-primary {
            width: 100%;
        }

    [b-u9jne3jxam] .form-grid {
        grid-template-columns: 1fr;
    }

    [b-u9jne3jxam] .dispatch-details__header {
        align-items: flex-start;
        flex-direction: column;
    }

        [b-u9jne3jxam] .dispatch-details__header .dispatch-header__right {
            width: 100%;
            align-items: stretch;
            flex-direction: column;
        }

        [b-u9jne3jxam] .dispatch-details__header .btn-primary,
        [b-u9jne3jxam] .dispatch-badge {
            width: 100%;
            justify-content: center;
        }

    [b-u9jne3jxam] .dispatch-leg-actions {
        align-items: stretch;
        flex-direction: column;
    }

        [b-u9jne3jxam] .dispatch-leg-actions .btn-secondary,
        [b-u9jne3jxam] .dispatch-leg-actions .muted {
            width: 100%;
            justify-content: center;
        }
}
.dispatch-list-item[b-u9jne3jxam] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1rem;
    border: 1px solid #dbe5f0;
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .dispatch-list-item:hover[b-u9jne3jxam] {
        background: #f8fbff;
        border-color: #bfdbfe;
        transform: translateY(-1px);
    }

    .dispatch-list-item.selected[b-u9jne3jxam] {
        border-color: #2563eb;
        background: #eff6ff;
        box-shadow: 0 10px 20px rgba(37, 99, 235, 0.12);
    }

.dispatch-list-item__main[b-u9jne3jxam] {
    font-weight: 800;
    color: #0f172a;
}

.dispatch-list-item__meta[b-u9jne3jxam] {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: #64748b;
}

.dispatch-status-badge[b-u9jne3jxam] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.dispatch-status-badge--planned[b-u9jne3jxam] {
    color: #334155;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
}

.dispatch-status-badge--ready[b-u9jne3jxam] {
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
}

.dispatch-status-badge--in-transit[b-u9jne3jxam] {
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
}

.dispatch-status-badge--completed[b-u9jne3jxam] {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.dispatch-status-badge--cancelled[b-u9jne3jxam],
.dispatch-status-badge--default[b-u9jne3jxam] {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

/* =========================================
   BUNDLES (DETAIL PANEL)
========================================= */

.dispatch-bundles[b-u9jne3jxam] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dispatch-bundle-card[b-u9jne3jxam] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    border: 1px solid #dbe5f0;
    border-radius: 14px;
    background: #ffffff;
}

.dispatch-bundle-number[b-u9jne3jxam] {
    font-weight: 800;
    color: #0f172a;
}

.dispatch-bundle-card__meta[b-u9jne3jxam] {
    font-size: 0.85rem;
    color: #64748b;
}

/* =========================================================
   DISPATCH DETAILS: BUNDLE CARDS
   ========================================================= */

[b-u9jne3jxam] .dispatch-bundle-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

[b-u9jne3jxam] .dispatch-bundle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 14px;
}

[b-u9jne3jxam] .dispatch-bundle-card__label {
    display: block;
    margin-bottom: 0.15rem;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[b-u9jne3jxam] .dispatch-bundle-card strong {
    color: #0f172a;
    font-size: 0.96rem;
    font-weight: 800;
}

[b-u9jne3jxam] .dispatch-bundle-card__assigned {
    color: #64748b;
    font-size: 0.86rem;
    white-space: nowrap;
}

/* =========================================================
   DISPATCH DETAILS: MOVEMENT ROUTE
   ========================================================= */

[b-u9jne3jxam] .dispatch-leg__route {
    display: grid;
    grid-template-columns: minmax(180px, max-content) minmax(120px, 1fr) minmax(180px, max-content);
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.65rem;
}

[b-u9jne3jxam] .dispatch-leg__route-origin,
[b-u9jne3jxam] .dispatch-leg__route-destination {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

    [b-u9jne3jxam] .dispatch-leg__route-origin span,
    [b-u9jne3jxam] .dispatch-leg__route-destination span {
        color: #64748b;
        font-size: 0.74rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    [b-u9jne3jxam] .dispatch-leg__route-origin strong,
    [b-u9jne3jxam] .dispatch-leg__route-destination strong {
        color: #0f172a;
        font-size: 0.98rem;
        font-weight: 900;
    }

[b-u9jne3jxam] .dispatch-leg__route-destination {
    text-align: right;
    align-items: flex-end;
}

[b-u9jne3jxam] .dispatch-leg__route-line {
    display: flex;
    align-items: center;
    min-width: 0;
}

[b-u9jne3jxam] .dispatch-leg__route-icon {
    flex: 0 0 auto;
    margin-right: 0.5rem;
    font-size: 1.05rem;
    line-height: 1;
}

[b-u9jne3jxam] .dispatch-leg__route-track {
    flex: 1 1 auto;
    height: 2px;
    background: linear-gradient(90deg, #93c5fd, #2563eb);
    border-radius: 999px;
}

[b-u9jne3jxam] .dispatch-leg__route-arrow {
    flex: 0 0 auto;
    margin-left: 0.5rem;
    color: #2563eb;
    font-size: 1.1rem;
    font-weight: 900;
}

/* =========================================================
   RESPONSIVE: MOVEMENT ROUTE
   ========================================================= */

@media (max-width: 720px) {
    [b-u9jne3jxam] .dispatch-bundle-card {
        align-items: flex-start;
        flex-direction: column;
    }

    [b-u9jne3jxam] .dispatch-bundle-card__assigned {
        white-space: normal;
    }

    [b-u9jne3jxam] .dispatch-leg__route {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    [b-u9jne3jxam] .dispatch-leg__route-destination {
        align-items: flex-start;
        text-align: left;
    }
}

.dispatch-status-badge[b-u9jne3jxam] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.dispatch-status-badge--planned[b-u9jne3jxam] {
    color: #334155;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
}

.dispatch-status-badge--ready[b-u9jne3jxam] {
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
}

.dispatch-status-badge--in-transit[b-u9jne3jxam] {
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
}

.dispatch-status-badge--completed[b-u9jne3jxam] {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.dispatch-status-badge--cancelled[b-u9jne3jxam],
.dispatch-status-badge--default[b-u9jne3jxam] {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}
/* /Components/Pages/OperationControl/InboundDeliveries/InboundDeliveriesWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: InboundDeliveriesWorkspace.razor.css

   PURPOSE:
   Scoped styling for the Inbound Deliveries placeholder
   workspace.

   RESPONSIBILITIES:
   - Style the under-construction workspace
   - Keep visual language aligned with Vixly Operations
   - Provide a clean placeholder for future module work

   IMPORTANT NOTES:
   - Scoped to InboundDeliveriesWorkspace.razor
   - Temporary styling until the real module is implemented
   ========================================================= */

.vx-inbound-deliveries-workspace[b-gbonx73u1r] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
}

.vx-inbound-deliveries-workspace__hero[b-gbonx73u1r] {
    padding: 1.5rem;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 72%);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.vx-inbound-deliveries-workspace__eyebrow[b-gbonx73u1r] {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.vx-inbound-deliveries-workspace__title[b-gbonx73u1r] {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-inbound-deliveries-workspace__subtitle[b-gbonx73u1r] {
    max-width: 780px;
    margin: 0.55rem 0 0;
    line-height: 1.6;
    color: #64748b;
}

.vx-inbound-deliveries-workspace__card[b-gbonx73u1r] {
    padding: 1.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
}

.vx-inbound-deliveries-workspace__card-title[b-gbonx73u1r] {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-inbound-deliveries-workspace__list[b-gbonx73u1r] {
    margin: 0;
    padding-left: 1.25rem;
    color: #475569;
}

    .vx-inbound-deliveries-workspace__list li[b-gbonx73u1r] {
        margin-bottom: 0.45rem;
    }
/* /Components/Pages/OperationControl/InboundReception/InboundReceptionWorkspace.razor.rz.scp.css */
/* =========================================================
FILE: InboundReceptionWorkspace.razor.css

PURPOSE:
Styles the Inbound Reception workspace shell.

RESPONSIBILITIES:
- Provide workspace layout spacing
- Keep scanner workflow visually focused
- Preserve Vixly operational page rhythm

IMPORTANT NOTES:
- Workspace-level styling only
- Child components own their internal styling
========================================================= */

.vx-inbound-reception[b-yvcnko5vqn] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* /Components/Pages/OperationControl/InboundReception/Parts/InboundReceptionGrid.razor.rz.scp.css */
/* =========================================================
FILE: InboundReceptionGrid.razor.css

PURPOSE:
Styles the Inbound Reception grid component.

RESPONSIBILITIES:
- Render reception table layout
- Style headers and rows
- Style loading and empty states
- Style reception status badges

IMPORTANT NOTES:
- This file owns Grid styling only
- Styling intentionally mirrors Operational Shipments
========================================================= */

.vx-grid-card[b-4jz4nzpc7s] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.vx-grid[b-4jz4nzpc7s] {
    width: 100%;
    border-collapse: collapse;
}

    .vx-grid thead[b-4jz4nzpc7s] {
        background: #f8fafc;
    }

    .vx-grid th[b-4jz4nzpc7s] {
        padding: 1rem;
        text-align: left;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #64748b;
        border-bottom: 1px solid #e2e8f0;
        white-space: nowrap;
    }

    .vx-grid td[b-4jz4nzpc7s] {
        padding: 1rem;
        border-bottom: 1px solid #e2e8f0;
        color: #0f172a;
        vertical-align: middle;
    }

    .vx-grid tbody tr:hover[b-4jz4nzpc7s] {
        background: #f8fafc;
    }

    .vx-grid tbody tr:last-child td[b-4jz4nzpc7s] {
        border-bottom: none;
    }

.vx-state[b-4jz4nzpc7s] {
    padding: 2rem;
    text-align: center;
    color: #64748b;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

/* =========================================================
RECEPTION STATUS
========================================================= */

.vx-reception-status[b-4jz4nzpc7s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.vx-reception-status--matched[b-4jz4nzpc7s] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.vx-reception-status--orphan[b-4jz4nzpc7s] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* =========================================================
SCANNER WORKSTATION GRID
========================================================= */

.vx-grid-card[b-4jz4nzpc7s] {
    height: 380px;
    display: flex;
    flex-direction: column;
}

.vx-grid[b-4jz4nzpc7s] {
    width: 100%;
}

.vx-grid-card[b-4jz4nzpc7s] {
    overflow: hidden;
}

.vx-grid thead[b-4jz4nzpc7s] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.vx-grid tbody[b-4jz4nzpc7s] {
    display: block;
    overflow-y: auto;
    height: 315px;
}

    .vx-grid thead[b-4jz4nzpc7s],
    .vx-grid tbody tr[b-4jz4nzpc7s] {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

.vx-grid-row--latest[b-4jz4nzpc7s] {
    background: #eff6ff;
}
/* /Components/Pages/OperationControl/InboundReception/Parts/InboundReceptionScanner.razor.rz.scp.css */
/* =========================================================
FILE: InboundReceptionScanner.razor.css

PURPOSE:
Styles the scanner-first reception input component.

RESPONSIBILITIES:
- Emphasize scanner interaction
- Render scan input card
- Render scan feedback area
- Maintain warehouse operator efficiency

IMPORTANT NOTES:
- Scanner is the primary action on this page
- No buttons are intentionally present
========================================================= */

.vx-inbound-scanner[b-mcjqa0qunp] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 1.5rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vx-inbound-scanner__header[b-mcjqa0qunp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vx-inbound-scanner__eyebrow[b-mcjqa0qunp] {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.vx-inbound-scanner__header h2[b-mcjqa0qunp] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
    color: #0f172a;
}

.vx-inbound-scanner__header p[b-mcjqa0qunp] {
    margin: 0;
    color: #64748b;
}

.vx-inbound-scanner__input[b-mcjqa0qunp] {
    width: 100%;
    min-height: 72px;
    padding: 0 1.25rem;
    border: 2px solid #bfdbfe;
    border-radius: 18px;
    background: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .vx-inbound-scanner__input:focus[b-mcjqa0qunp] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

    .vx-inbound-scanner__input:disabled[b-mcjqa0qunp] {
        background: #f8fafc;
        color: #94a3b8;
        cursor: not-allowed;
    }

.vx-inbound-scanner__last-scan[b-mcjqa0qunp] {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0.875rem 1rem;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    font-weight: 700;
}
/* /Components/Pages/OperationControl/InboundReception/Parts/InboundReceptionSummary.razor.rz.scp.css */
/* =========================================================
FILE: InboundReceptionSummary.razor.css

PURPOSE:
Styles the Inbound Reception summary component.

RESPONSIBILITIES:
- Render summary cards
- Display operational metrics
- Maintain Vixly dashboard styling

IMPORTANT NOTES:
- Summary styling only
========================================================= */

.vx-inbound-summary[b-glbgt96br9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.vx-inbound-summary__card[b-glbgt96br9] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 1.25rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vx-inbound-summary__label[b-glbgt96br9] {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.vx-inbound-summary__value[b-glbgt96br9] {
    font-size: 2rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1;
}

@media (max-width: 1200px) {
    .vx-inbound-summary[b-glbgt96br9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .vx-inbound-summary[b-glbgt96br9] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/OperationControl/Licensing/Parts/LicenseInventoryPanel.razor.rz.scp.css */
/* =========================================================
   FILE: LicenseInventoryPanel.razor.css

   PURPOSE:
   Scoped enterprise styling for the license inventory panel.

   RESPONSIBILITIES:
   - Style license inventory table
   - Style loading/error/empty states
   - Preserve visual consistency with Licensing workspace panels
   - Support readable license lifecycle review

   IMPORTANT NOTES:
   - Scoped only to LicenseInventoryPanel.razor
   - No global selectors
   ========================================================= */

.vx-licensing-panel[b-v5536gv8bw] {
    margin-bottom: 28px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    padding: 32px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04);
}

.vx-licensing-panel__header[b-v5536gv8bw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.vx-licensing-panel__title[b-v5536gv8bw] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
}

.vx-licensing-panel__subtitle[b-v5536gv8bw] {
    margin-top: 8px;
    color: #64748b;
    line-height: 1.7;
    font-size: 15px;
}

.vx-licensing-state[b-v5536gv8bw] {
    padding: 48px 24px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    text-align: center;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.vx-licensing-alert[b-v5536gv8bw] {
    padding: 18px 20px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
}

.vx-licensing-alert--error[b-v5536gv8bw] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.vx-licensing-table-wrap[b-v5536gv8bw] {
    overflow-x: auto;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

.vx-licensing-table[b-v5536gv8bw] {
    width: 100%;
    border-collapse: collapse;
    min-width: 920px;
    background: #ffffff;
}

    .vx-licensing-table thead[b-v5536gv8bw] {
        background: #f8fafc;
    }

    .vx-licensing-table th[b-v5536gv8bw] {
        padding: 18px 20px;
        text-align: left;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #475569;
        border-bottom: 1px solid #e2e8f0;
    }

    .vx-licensing-table td[b-v5536gv8bw] {
        padding: 18px 20px;
        border-bottom: 1px solid #f1f5f9;
        color: #0f172a;
        font-size: 14px;
        vertical-align: middle;
    }

    .vx-licensing-table tbody tr[b-v5536gv8bw] {
        transition: background-color 0.15s ease;
    }

        .vx-licensing-table tbody tr:hover[b-v5536gv8bw] {
            background: #f8fafc;
        }

.vx-licensing-badge[b-v5536gv8bw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .vx-licensing-panel[b-v5536gv8bw] {
        padding: 24px;
        border-radius: 24px;
    }

    .vx-licensing-panel__title[b-v5536gv8bw] {
        font-size: 24px;
    }

    .vx-licensing-panel__subtitle[b-v5536gv8bw] {
        font-size: 14px;
    }

    .vx-licensing-table th[b-v5536gv8bw],
    .vx-licensing-table td[b-v5536gv8bw] {
        padding: 16px;
    }
}
.vx-licensing-badge--success[b-v5536gv8bw] {
    background: #dcfce7;
    color: #166534;
}

.vx-licensing-badge--info[b-v5536gv8bw] {
    background: #dbeafe;
    color: #1d4ed8;
}

.vx-licensing-badge--warning[b-v5536gv8bw] {
    background: #fef3c7;
    color: #92400e;
}

.vx-licensing-badge--danger[b-v5536gv8bw] {
    background: #fee2e2;
    color: #991b1b;
}
/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.vx-btn[b-v5536gv8bw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

    .vx-btn:disabled[b-v5536gv8bw] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.vx-btn--sm[b-v5536gv8bw] {
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
}

.vx-btn--ghost[b-v5536gv8bw] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

    .vx-btn--ghost:hover[b-v5536gv8bw] {
        background: #dbeafe;
        border-color: #93c5fd;
    }

.vx-btn--warning[b-v5536gv8bw] {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
}

    .vx-btn--warning:hover[b-v5536gv8bw] {
        background: #fde68a;
    }
/* /Components/Pages/OperationControl/Licensing/Parts/PendingDeviceRequestsPanel.razor.rz.scp.css */
/* =========================================================
   FILE: PendingDeviceRequestsPanel.razor.css

   PURPOSE:
   Scoped enterprise styling for the pending device
   requests licensing panel.

   RESPONSIBILITIES:
   - Style the licensing panel layout
   - Style loading/error/empty states
   - Style licensing data table
   - Style approval status badges
   - Preserve enterprise visual consistency

   IMPORTANT NOTES:
   - Scoped only to PendingDeviceRequestsPanel
   - No global selectors
   ========================================================= */

.vx-licensing-panel[b-a6u52zdnho] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    padding: 32px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04);
}

.vx-licensing-panel__header[b-a6u52zdnho] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.vx-licensing-panel__title[b-a6u52zdnho] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
}

.vx-licensing-panel__subtitle[b-a6u52zdnho] {
    margin-top: 8px;
    color: #64748b;
    line-height: 1.7;
    font-size: 15px;
}

.vx-licensing-state[b-a6u52zdnho] {
    padding: 48px 24px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    text-align: center;
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.vx-licensing-alert[b-a6u52zdnho] {
    padding: 18px 20px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
}

.vx-licensing-alert--error[b-a6u52zdnho] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.vx-licensing-table-wrap[b-a6u52zdnho] {
    overflow-x: auto;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

.vx-licensing-table[b-a6u52zdnho] {
    width: 100%;
    border-collapse: collapse;
    min-width: 920px;
    background: #ffffff;
}

    .vx-licensing-table thead[b-a6u52zdnho] {
        background: #f8fafc;
    }

    .vx-licensing-table th[b-a6u52zdnho] {
        padding: 18px 20px;
        text-align: left;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #475569;
        border-bottom: 1px solid #e2e8f0;
    }

    .vx-licensing-table td[b-a6u52zdnho] {
        padding: 18px 20px;
        border-bottom: 1px solid #f1f5f9;
        color: #0f172a;
        font-size: 14px;
        vertical-align: middle;
    }

    .vx-licensing-table tbody tr[b-a6u52zdnho] {
        transition: background-color 0.15s ease;
    }

        .vx-licensing-table tbody tr:hover[b-a6u52zdnho] {
            background: #f8fafc;
        }

.vx-licensing-badge[b-a6u52zdnho] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .vx-licensing-panel[b-a6u52zdnho] {
        padding: 24px;
        border-radius: 24px;
    }

    .vx-licensing-panel__title[b-a6u52zdnho] {
        font-size: 24px;
    }

    .vx-licensing-panel__subtitle[b-a6u52zdnho] {
        font-size: 14px;
    }

    .vx-licensing-table th[b-a6u52zdnho],
    .vx-licensing-table td[b-a6u52zdnho] {
        padding: 16px;
    }
}
.vx-licensing-device[b-a6u52zdnho] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vx-licensing-device__icon[b-a6u52zdnho] {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #eff6ff;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.vx-licensing-device__name[b-a6u52zdnho] {
    font-weight: 700;
    color: #0f172a;
}

.vx-licensing-device__meta[b-a6u52zdnho] {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
}

.vx-licensing-actions[b-a6u52zdnho] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vx-licensing-action[b-a6u52zdnho] {
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 9px 14px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.vx-licensing-action--approve:hover[b-a6u52zdnho] {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

.vx-licensing-action--deny:hover[b-a6u52zdnho] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}
/* /Components/Pages/OperationControl/Licensing/Parts/TenantPlanSummaryPanel.razor.rz.scp.css */
/* =========================================================
   FILE: TenantPlanSummaryPanel.razor.css

   PURPOSE:
   Scoped enterprise styling for the tenant plan summary panel.

   RESPONSIBILITIES:
   - Style current subscription plan summary
   - Style license capacity cards
   - Style pending plan-change notice
   - Keep plan summary visually distinct from approval queues

   IMPORTANT NOTES:
   - Scoped only to TenantPlanSummaryPanel.razor
   - No global selectors
   ========================================================= */

.vx-plan-summary-panel[b-lf249prkgo] {
    margin-bottom: 28px;
    padding: 32px;
    border-radius: 28px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #334155 100%);
    color: #ffffff;
    box-shadow: 0 18px 60px rgba(15, 23, 42, 0.18), 0 6px 20px rgba(15, 23, 42, 0.12);
}

.vx-plan-summary-panel__header[b-lf249prkgo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.vx-plan-summary-panel__eyebrow[b-lf249prkgo] {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
}

.vx-plan-summary-panel__title[b-lf249prkgo] {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
}

.vx-plan-summary-panel__subtitle[b-lf249prkgo] {
    margin: 10px 0 0 0;
    color: #cbd5e1;
    line-height: 1.7;
}

.vx-plan-summary-panel__status[b-lf249prkgo] {
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.18);
    color: #bbf7d0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vx-plan-summary-grid[b-lf249prkgo] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.vx-plan-summary-card[b-lf249prkgo] {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.16);
}

.vx-plan-summary-card__label[b-lf249prkgo] {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    color: #cbd5e1;
    font-weight: 700;
}

.vx-plan-summary-card strong[b-lf249prkgo] {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
}

.vx-plan-summary-notice[b-lf249prkgo] {
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(251, 191, 36, 0.16);
    border: 1px solid rgba(251, 191, 36, 0.32);
    color: #fde68a;
    line-height: 1.7;
}

@media (max-width: 1200px) {
    .vx-plan-summary-grid[b-lf249prkgo] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .vx-plan-summary-panel[b-lf249prkgo] {
        padding: 24px;
        border-radius: 24px;
    }

    .vx-plan-summary-panel__header[b-lf249prkgo] {
        flex-direction: column;
    }

    .vx-plan-summary-grid[b-lf249prkgo] {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .vx-plan-summary-panel__title[b-lf249prkgo] {
        font-size: 28px;
    }
}
.vx-plan-summary-panel__status--active[b-lf249prkgo] {
    background: rgba(34, 197, 94, 0.18);
    color: #bbf7d0;
}

.vx-plan-summary-panel__status--warning[b-lf249prkgo] {
    background: rgba(251, 191, 36, 0.18);
    color: #fde68a;
}

.vx-plan-summary-panel__status--danger[b-lf249prkgo] {
    background: rgba(239, 68, 68, 0.18);
    color: #fecaca;
}
/* /Components/Pages/OperationControl/OperationalEvents/OperationalEventsWorkspace.razor.rz.scp.css */
/* =========================================================
FILE: OperationalEventsWorkspace.razor.css

PURPOSE:
Scoped styles for the Operational Events workspace.

RESPONSIBILITIES:
- Style the operational events workspace shell
- Provide layout spacing for child operational event components
- Style workspace-level state messages
- Keep Operational Events aligned with Operations.Web enterprise UI

IMPORTANT NOTES:
- OperationalEventsWorkspace is an orchestrator only
- Child components own their own scoped UI styling
- No inline styles should be used in OperationalEventsWorkspace.razor
========================================================= */

.vx-operational-events[b-9y0tlzuq4o] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    min-width: 0;
}

.vx-operational-events__hero[b-9y0tlzuq4o] {
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.vx-operational-events__eyebrow[b-9y0tlzuq4o] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-operational-events__hero h1[b-9y0tlzuq4o] {
    margin: 0;
    color: #0f172a;
    font-size: 1.65rem;
    font-weight: 850;
    letter-spacing: -0.035em;
}

.vx-operational-events__hero p[b-9y0tlzuq4o] {
    max-width: 760px;
    margin: 0.75rem 0 0;
    color: #475569;
    font-size: 0.98rem;
    line-height: 1.6;
}
/* /Components/Pages/OperationControl/OperationalEvents/Parts/OperationalEventEntryForm.razor.rz.scp.css */
/* =========================================================
FILE: OperationalEventEntryForm.razor.css

PURPOSE:
Scoped styles for the manual operational event entry form.

RESPONSIBILITIES:
- Style the manual operational event card
- Style event code, title, description, operational notes, and visibility fields
- Style submit action
- Keep the component aligned with Operations.Web enterprise UI

IMPORTANT NOTES:
- This component is UI-only
- OperationalEventsWorkspace owns authorization and persistence
- Description may be customer-visible
- OperationalNotes are internal-only
========================================================= */

.vx-operational-event-entry[b-qub0dsiqcx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.vx-operational-event-entry__header h2[b-qub0dsiqcx] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-operational-event-entry__header p[b-qub0dsiqcx] {
    margin: 0.45rem 0 0;
    color: #475569;
    font-size: 0.94rem;
    line-height: 1.55;
}

.vx-operational-event-entry__eyebrow[b-qub0dsiqcx] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-operational-event-entry__form[b-qub0dsiqcx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vx-operational-event-entry__field[b-qub0dsiqcx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.vx-operational-event-entry__field--full[b-qub0dsiqcx] {
    grid-column: 1 / -1;
}

.vx-operational-event-entry__field label[b-qub0dsiqcx] {
    font-size: 0.78rem;
    font-weight: 850;
    color: #475569;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vx-operational-event-entry__field input[b-qub0dsiqcx],
.vx-operational-event-entry__field select[b-qub0dsiqcx],
.vx-operational-event-entry__field textarea[b-qub0dsiqcx] {
    width: 100%;
    min-width: 0;
    font: inherit;
    font-size: 0.94rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.vx-operational-event-entry__field select[b-qub0dsiqcx],
.vx-operational-event-entry__field input[b-qub0dsiqcx] {
    height: 46px;
    padding: 0 0.9rem;
}

.vx-operational-event-entry__field textarea[b-qub0dsiqcx] {
    min-height: 118px;
    padding: 0.85rem 0.9rem;
    resize: vertical;
    line-height: 1.5;
}

    .vx-operational-event-entry__field input:focus[b-qub0dsiqcx],
    .vx-operational-event-entry__field select:focus[b-qub0dsiqcx],
    .vx-operational-event-entry__field textarea:focus[b-qub0dsiqcx] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    .vx-operational-event-entry__field input:hover:not(:disabled)[b-qub0dsiqcx],
    .vx-operational-event-entry__field select:hover:not(:disabled)[b-qub0dsiqcx],
    .vx-operational-event-entry__field textarea:hover:not(:disabled)[b-qub0dsiqcx] {
        border-color: #94a3b8;
    }

.vx-operational-event-entry__check[b-qub0dsiqcx] {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e5edf5;
    color: #334155;
    font-size: 0.92rem;
    font-weight: 750;
}

    .vx-operational-event-entry__check input[b-qub0dsiqcx] {
        width: 18px;
        height: 18px;
        accent-color: #2563eb;
    }

.vx-operational-event-entry__actions[b-qub0dsiqcx] {
    grid-column: 1 / -1;
}

    .vx-operational-event-entry__actions button[b-qub0dsiqcx] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        height: 46px;
        min-width: 180px;
        padding: 0 1.25rem;
        border: none;
        border-radius: 12px;
        color: #ffffff;
        background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
        font: inherit;
        font-size: 0.94rem;
        font-weight: 850;
        cursor: pointer;
        transition: transform 0.12s ease, box-shadow 0.16s ease, opacity 0.16s ease;
    }

        .vx-operational-event-entry__actions button:hover:not(:disabled)[b-qub0dsiqcx] {
            transform: translateY(-1px);
            box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3);
        }

        .vx-operational-event-entry__actions button:disabled[b-qub0dsiqcx] {
            opacity: 0.6;
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }

@media (max-width: 768px) {
    .vx-operational-event-entry[b-qub0dsiqcx] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-operational-event-entry__form[b-qub0dsiqcx] {
        grid-template-columns: 1fr;
    }

    .vx-operational-event-entry__actions button[b-qub0dsiqcx] {
        width: 100%;
    }
}
/* /Components/Pages/OperationControl/OperationalEvents/Parts/OperationalEventsSearch.razor.rz.scp.css */
/* =========================================================
FILE: OperationalEventsSearch.razor.css

PURPOSE:
Scoped styles for the Operational Events search panel.

RESPONSIBILITIES:
- Style operational subject lookup card
- Style subject type and reference code inputs
- Style timeline load action
- Keep lookup controls aligned with Operations.Web enterprise UI

IMPORTANT NOTES:
- This component is UI-only
- OperationalEventsWorkspace owns authorization and data loading
- Staff search by reference code, not internal Guid values
========================================================= */

.vx-operational-events-search[b-fxevkpff31] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.vx-operational-events-search__header h2[b-fxevkpff31] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-operational-events-search__header p[b-fxevkpff31] {
    margin: 0.45rem 0 0;
    color: #475569;
    font-size: 0.94rem;
    line-height: 1.55;
}

.vx-operational-events-search__eyebrow[b-fxevkpff31] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-operational-events-search__form[b-fxevkpff31] {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
}

.vx-operational-events-search__field[b-fxevkpff31] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

    .vx-operational-events-search__field label[b-fxevkpff31] {
        font-size: 0.78rem;
        font-weight: 850;
        color: #475569;
        line-height: 1.35;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .vx-operational-events-search__field input[b-fxevkpff31],
    .vx-operational-events-search__field select[b-fxevkpff31] {
        width: 100%;
        min-width: 0;
        height: 46px;
        padding: 0 0.9rem;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        background: #ffffff;
        color: #0f172a;
        font: inherit;
        font-size: 0.94rem;
        outline: none;
        box-sizing: border-box;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .vx-operational-events-search__field input:focus[b-fxevkpff31],
        .vx-operational-events-search__field select:focus[b-fxevkpff31] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
        }

.vx-operational-events-search__actions button[b-fxevkpff31] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    height: 46px;
    padding: 0 1.25rem;
    border: none;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
    font: inherit;
    font-size: 0.94rem;
    font-weight: 850;
    cursor: pointer;
}

    .vx-operational-events-search__actions button:disabled[b-fxevkpff31] {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none;
    }

@media (max-width: 900px) {
    .vx-operational-events-search__form[b-fxevkpff31] {
        grid-template-columns: 1fr;
    }

    .vx-operational-events-search__actions button[b-fxevkpff31] {
        width: 100%;
    }
}
/* /Components/Pages/OperationControl/OperationalEvents/Parts/OperationalEventsTimeline.razor.rz.scp.css */
/* =========================================================
FILE: OperationalEventsTimeline.razor.css

PURPOSE:
Scoped styles for the Operational Events timeline.

RESPONSIBILITIES:
- Style timeline container
- Style operational event cards
- Style event metadata
- Style customer visibility badges
- Style operational notes section
- Style loading and empty states

IMPORTANT NOTES:
- This component is presentation only
- OperationalEventsWorkspace owns data loading
- Customer-visible descriptions and internal notes are
  intentionally separated
========================================================= */

.vx-operational-events-timeline[b-smamzqfh1d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.vx-operational-events-timeline__header h2[b-smamzqfh1d] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-operational-events-timeline__eyebrow[b-smamzqfh1d] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-operational-events-timeline__state[b-smamzqfh1d] {
    padding: 1rem;
    border-radius: 14px;
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
}

.vx-operational-events-timeline__list[b-smamzqfh1d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vx-operational-events-timeline__item[b-smamzqfh1d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
}

.vx-operational-events-timeline__item-header[b-smamzqfh1d] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

    .vx-operational-events-timeline__item-header h3[b-smamzqfh1d] {
        margin: 0;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 800;
    }

.vx-operational-events-timeline__meta[b-smamzqfh1d] {
    display: inline-block;
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.85rem;
}

.vx-operational-events-timeline__visibility[b-smamzqfh1d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.vx-operational-events-timeline__visibility--public[b-smamzqfh1d] {
    background: #dcfce7;
    color: #166534;
}

.vx-operational-events-timeline__visibility--internal[b-smamzqfh1d] {
    background: #fee2e2;
    color: #991b1b;
}

.vx-operational-events-timeline__description[b-smamzqfh1d],
.vx-operational-events-timeline__notes[b-smamzqfh1d] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

    .vx-operational-events-timeline__description span[b-smamzqfh1d],
    .vx-operational-events-timeline__notes span[b-smamzqfh1d] {
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .vx-operational-events-timeline__description span[b-smamzqfh1d] {
        color: #2563eb;
    }

    .vx-operational-events-timeline__notes span[b-smamzqfh1d] {
        color: #92400e;
    }

    .vx-operational-events-timeline__description p[b-smamzqfh1d],
    .vx-operational-events-timeline__notes p[b-smamzqfh1d] {
        margin: 0;
        line-height: 1.65;
        color: #334155;
    }

.vx-operational-events-timeline__notes[b-smamzqfh1d] {
    padding: 1rem;
    border: 1px solid #fde68a;
    border-radius: 14px;
    background: #fffbeb;
}

@media (max-width: 768px) {
    .vx-operational-events-timeline__item-header[b-smamzqfh1d] {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-operational-events-timeline__visibility[b-smamzqfh1d] {
        width: fit-content;
    }
}
/* /Components/Pages/OperationControl/ParcelOperations/Bundles/BundleWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: BundleWorkspace.razor.css

   PURPOSE:
   Scoped styles for the Bundle Management workspace.

   RESPONSIBILITIES:
   - Style workspace header and body layout
   - Style toolbar actions
   - Provide spacing between create form and bundle list
   - Align with Parcel Operations UI language

   IMPORTANT NOTES:
   - Presentation only
   - No business logic
   - Avoid inline styling
========================================================= */

.bundle-workspace[b-8cngyfhobp] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bundle-workspace__header[b-8cngyfhobp] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

    .bundle-workspace__header h2[b-8cngyfhobp] {
        margin: 0;
        font-size: 1.65rem;
        font-weight: 800;
        color: #172033;
    }

    .bundle-workspace__header p[b-8cngyfhobp] {
        margin: 0;
        font-size: 0.95rem;
        color: #5f6b7a;
    }

.bundle-workspace__body[b-8cngyfhobp] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bundle-workspace__loading[b-8cngyfhobp] {
    margin: 0;
    padding: 1.25rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    color: #5f6b7a;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

.bundle-workspace__toolbar[b-8cngyfhobp] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.bundle-workspace__new-button[b-8cngyfhobp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.7rem 1rem;
    border: none;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

    .bundle-workspace__new-button:hover[b-8cngyfhobp] {
        transform: translateY(-1px);
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.28);
    }

    .bundle-workspace__new-button:disabled[b-8cngyfhobp] {
        cursor: not-allowed;
        opacity: 0.65;
        transform: none;
        box-shadow: none;
    }

/* =========================================================
   BUNDLE DETAILS
   ========================================================= */

.bundle-details-panel[b-8cngyfhobp] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bundle-details-back-btn[b-8cngyfhobp] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.6rem 0.95rem;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    background: #ffffff;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .bundle-details-back-btn:hover[b-8cngyfhobp] {
        transform: translateY(-1px);
        background: #f8fafc;
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    }

.bundle-details-summary[b-8cngyfhobp],
.bundle-details-items[b-8cngyfhobp] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

    .bundle-details-summary h3[b-8cngyfhobp],
    .bundle-details-items h3[b-8cngyfhobp] {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 800;
        color: #172033;
    }

    .bundle-details-summary p[b-8cngyfhobp] {
        margin: 0;
        color: #5f6b7a;
    }

    .bundle-details-summary ul[b-8cngyfhobp] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 0.85rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .bundle-details-summary li[b-8cngyfhobp] {
        padding: 0.95rem 1rem;
        border: 1px solid #e5ebf3;
        border-radius: 14px;
        background: #f7f9fc;
        color: #526172;
        font-size: 0.92rem;
    }

        .bundle-details-summary li strong[b-8cngyfhobp] {
            display: block;
            margin-bottom: 0.25rem;
            font-size: 1rem;
            font-weight: 800;
            color: #172033;
        }

.bundle-details-table-wrap[b-8cngyfhobp] {
    overflow-x: auto;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    background: #ffffff;
}

/* =========================================================
   DETAILS TABLE
   ========================================================= */

.bundle-details-table[b-8cngyfhobp] {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #ffffff;
}

    .bundle-details-table thead th[b-8cngyfhobp] {
        padding: 0.95rem 1rem;
        text-align: left;
        font-size: 0.84rem;
        font-weight: 800;
        color: #172033;
        background: #f7f9fc;
        border-bottom: 1px solid #e5ebf3;
        white-space: nowrap;
    }

    .bundle-details-table tbody td[b-8cngyfhobp] {
        padding: 0.9rem 1rem;
        font-size: 0.92rem;
        color: #172033;
        border-bottom: 1px solid #eef2f7;
        vertical-align: middle;
    }

    .bundle-details-table tbody tr:last-child td[b-8cngyfhobp] {
        border-bottom: none;
    }

    .bundle-details-table tbody tr:hover[b-8cngyfhobp] {
        background: #f8fafc;
    }
/* /Components/Pages/OperationControl/ParcelOperations/Bundles/Parts/BundleDetailsPanel.razor.rz.scp.css */
/* =========================================================
   FILE: BundleDetailsPanel.razor.css

   PURPOSE:
   Scoped styles for the Bundle Details panel.

   RESPONSIBILITIES:
   - Style bundle details header
   - Style destination summary cards
   - Style assigned parcel table
   - Keep details styling isolated from BundleListPanel

   IMPORTANT NOTES:
   - Presentation only
   - No business logic
   - Scoped to BundleDetailsPanel
========================================================= */

.bundle-details-panel[b-yd2uo0ngyc] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bundle-details-panel__back-button[b-yd2uo0ngyc] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.6rem 0.95rem;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    background: #ffffff;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .bundle-details-panel__back-button:hover[b-yd2uo0ngyc] {
        transform: translateY(-1px);
        background: #f8fafc;
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    }

.bundle-details-panel__loading[b-yd2uo0ngyc],
.bundle-details-panel__empty[b-yd2uo0ngyc] {
    padding: 1rem;
    color: #5f6b7a;
    border: 1px dashed #cfd9e8;
    border-radius: 14px;
    background: #f8fafc;
}

.bundle-details-panel__header-card[b-yd2uo0ngyc],
.bundle-details-panel__card[b-yd2uo0ngyc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

.bundle-details-panel__header-main[b-yd2uo0ngyc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.bundle-details-panel__eyebrow[b-yd2uo0ngyc] {
    margin: 0 0 0.25rem 0;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.bundle-details-panel__header-main h3[b-yd2uo0ngyc],
.bundle-details-panel__card h3[b-yd2uo0ngyc] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #172033;
}

.bundle-details-panel__meta-grid[b-yd2uo0ngyc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

    .bundle-details-panel__meta-grid div[b-yd2uo0ngyc] {
        padding: 0.85rem 0.95rem;
        border: 1px solid #e5ebf3;
        border-radius: 14px;
        background: #f8fafc;
    }

    .bundle-details-panel__meta-grid span[b-yd2uo0ngyc] {
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.76rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #64748b;
    }

    .bundle-details-panel__meta-grid strong[b-yd2uo0ngyc] {
        font-size: 0.95rem;
        font-weight: 800;
        color: #172033;
    }

.bundle-details-panel__status[b-yd2uo0ngyc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.bundle-details-panel__status--open[b-yd2uo0ngyc] {
    background: #eef4ff;
    color: #2457c5;
}

.bundle-details-panel__status--closed[b-yd2uo0ngyc] {
    background: #f1f3f6;
    color: #5f6b7a;
}

.bundle-details-panel__status--ready[b-yd2uo0ngyc] {
    background: #fff6e5;
    color: #b7791f;
}

.bundle-details-panel__status--dispatched[b-yd2uo0ngyc] {
    background: #e6f9f0;
    color: #15803d;
}

.bundle-details-panel__status--default[b-yd2uo0ngyc] {
    background: #eef2f7;
    color: #526172;
}

.bundle-details-panel__summary-grid[b-yd2uo0ngyc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}

.bundle-details-panel__summary-card[b-yd2uo0ngyc] {
    padding: 0.95rem 1rem;
    border: 1px solid #e5ebf3;
    border-radius: 14px;
    background: #f7f9fc;
}

    .bundle-details-panel__summary-card span[b-yd2uo0ngyc] {
        display: block;
        margin-bottom: 0.25rem;
        font-size: 1rem;
        font-weight: 800;
        color: #172033;
    }

    .bundle-details-panel__summary-card strong[b-yd2uo0ngyc] {
        font-size: 0.9rem;
        color: #526172;
    }

.bundle-details-panel__table-wrap[b-yd2uo0ngyc] {
    overflow-x: auto;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    background: #ffffff;
}

.bundle-details-panel__table[b-yd2uo0ngyc] {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #ffffff;
}

    .bundle-details-panel__table thead th[b-yd2uo0ngyc] {
        padding: 0.95rem 1rem;
        text-align: left;
        font-size: 0.84rem;
        font-weight: 800;
        color: #172033;
        background: #f7f9fc;
        border-bottom: 1px solid #e5ebf3;
        white-space: nowrap;
    }

    .bundle-details-panel__table tbody td[b-yd2uo0ngyc] {
        padding: 0.9rem 1rem;
        font-size: 0.92rem;
        color: #172033;
        border-bottom: 1px solid #eef2f7;
        vertical-align: middle;
    }

    .bundle-details-panel__table tbody tr:last-child td[b-yd2uo0ngyc] {
        border-bottom: none;
    }

    .bundle-details-panel__table tbody tr:hover[b-yd2uo0ngyc] {
        background: #f8fafc;
    }
    .bundle-details-panel__table tbody td:nth-child(4)[b-yd2uo0ngyc] {
        font-weight: 800;
        color: #1d4ed8;
    }

/* ============================================
   READY FOR DISPATCH BUTTON
   ============================================ */

.bundle-details-panel__header-actions[b-yd2uo0ngyc] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.bundle-details-panel__ready-button[b-yd2uo0ngyc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
    border: 1px solid transparent;
    /* 🔥 Matches "progress / action" tone */
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    /* Hover */
    .bundle-details-panel__ready-button:hover:not(:disabled)[b-yd2uo0ngyc] {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
    }

    /* Active */
    .bundle-details-panel__ready-button:active:not(:disabled)[b-yd2uo0ngyc] {
        transform: scale(0.96);
    }

    /* Disabled */
    .bundle-details-panel__ready-button:disabled[b-yd2uo0ngyc] {
        background: #e2e8f0;
        color: #94a3b8;
        cursor: not-allowed;
        box-shadow: none;
    }
/* /Components/Pages/OperationControl/ParcelOperations/Bundles/Parts/BundleListPanel.razor.rz.scp.css */
/* =========================================================
   FILE: BundleListPanel.razor.css

   PURPOSE:
   Scoped styles for the Bundle List panel inside the
   Parcel Operations → Bundle Management workspace.

   RESPONSIBILITIES:
   - Provide panel spacing and structure
   - Style the bundle table and empty state
   - Ensure readability and alignment
   - Provide status badge styling

   IMPORTANT NOTES:
   - Presentation only
   - No business meaning in CSS
   - Avoid inline styling
========================================================= */

/* ============================================
   PANEL
   ============================================ */

.bundle-list-panel[b-g8t90719uv] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

    .bundle-list-panel h3[b-g8t90719uv] {
        margin: 0;
        font-size: 1.35rem;
        font-weight: 700;
        color: #172033;
    }

/* ============================================
   EMPTY STATE
   ============================================ */

.bundle-list-empty[b-g8t90719uv] {
    padding: 1.25rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
    color: #5f6b7a;
}

/* ============================================
   TABLE WRAPPER
   ============================================ */

.bundle-list-table-wrap[b-g8t90719uv] {
    overflow-x: auto;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

/* ============================================
   TABLE
   ============================================ */

.bundle-list-table[b-g8t90719uv] {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

    .bundle-list-table thead th[b-g8t90719uv] {
        padding: 0.95rem 1rem;
        text-align: left;
        font-size: 0.84rem;
        font-weight: 700;
        color: #526172;
        background: #f7f9fc;
        border-bottom: 1px solid #e5ebf3;
        white-space: nowrap;
    }

    .bundle-list-table tbody td[b-g8t90719uv] {
        padding: 1rem;
        font-size: 0.94rem;
        color: #172033;
        border-bottom: 1px solid #eef2f7;
        vertical-align: middle;
    }

    .bundle-list-table tbody tr:last-child td[b-g8t90719uv] {
        border-bottom: none;
    }

/* ============================================
   BUNDLE NUMBER LINK
   ============================================ */

.bundle-number-link[b-g8t90719uv] {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    color: #1d4ed8;
    font-size: 0.94rem;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
}

    .bundle-number-link:hover[b-g8t90719uv] {
        color: #1e40af;
        text-decoration: underline;
    }

/* ============================================
   DESTINATION DISPLAY
   ============================================ */

.bundle-destination-subtext[b-g8t90719uv] {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

/* ============================================
   STATUS BADGES
   ============================================ */

.bundle-status-badge[b-g8t90719uv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Open */
.bundle-status--open[b-g8t90719uv] {
    background: #eef4ff;
    color: #2457c5;
}

/* Closed */
.bundle-status--closed[b-g8t90719uv] {
    background: #f1f3f6;
    color: #5f6b7a;
}

/* Ready for dispatch */
.bundle-status--ready[b-g8t90719uv] {
    background: #fff6e5;
    color: #b7791f;
}

/* Dispatched */
.bundle-status--dispatched[b-g8t90719uv] {
    background: #e6f9f0;
    color: #15803d;
}

/* Default fallback */
.bundle-status--default[b-g8t90719uv] {
    background: #eef2f7;
    color: #526172;
}

/* ============================================
   ACTIONS COLUMN
   ============================================ */

.bundle-actions-col[b-g8t90719uv] {
    text-align: center;
    width: 120px;
}

/* ============================================
   PRINT BUTTON
   ============================================ */

.bundle-action-btn[b-g8t90719uv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid #dbe3ef;
    background: #ffffff;
    color: #172033;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

    /* Hover */
    .bundle-action-btn:hover[b-g8t90719uv] {
        background: #f7f9fc;
        border-color: #c9d6e6;
    }

    /* Active */
    .bundle-action-btn:active[b-g8t90719uv] {
        transform: scale(0.96);
    }

    /* Disabled */
    .bundle-action-btn:disabled[b-g8t90719uv] {
        background: #f1f3f6;
        color: #a0acbb;
        border-color: #e2e8f0;
        cursor: not-allowed;
   
        }

/* ============================================
   ACTION BUTTON GROUP
   ============================================ */

.bundle-actions-group[b-g8t90719uv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.bundle-action-btn--danger[b-g8t90719uv] {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #be123c;
}

    .bundle-action-btn--danger:hover:not(:disabled)[b-g8t90719uv] {
        background: #ffe4e6;
        border-color: #fda4af;
    }

/* ============================================
   MODAL BACKDROP
   ============================================ */

.bundle-modal-backdrop[b-g8t90719uv] {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.52);
}

/* ============================================
   MODAL CARD
   ============================================ */

.bundle-modal[b-g8t90719uv] {
    width: min(460px, 100%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

    .bundle-modal h3[b-g8t90719uv] {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 800;
        color: #172033;
    }

.bundle-modal__text[b-g8t90719uv] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #5f6b7a;
}

/* ============================================
   MODAL FORM
   ============================================ */

.bundle-modal .form-group[b-g8t90719uv] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .bundle-modal .form-group label[b-g8t90719uv] {
        font-size: 0.84rem;
        font-weight: 700;
        color: #526172;
    }

    .bundle-modal .form-group input[b-g8t90719uv] {
        width: 100%;
        padding: 0.6rem 0.75rem;
        font-size: 0.92rem;
        border: 1px solid #cfd9e8;
        border-radius: 10px;
        background: #ffffff;
        color: #172033;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

        .bundle-modal .form-group input:focus[b-g8t90719uv] {
            outline: none;
            border-color: #1c64f2;
            box-shadow: 0 0 0 2px rgba(28, 100, 242, 0.15);
        }

/* ============================================
   MODAL ACTIONS
   ============================================ */

.bundle-modal__actions[b-g8t90719uv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.bundle-modal__button[b-g8t90719uv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 38px;
    padding: 0.6rem 0.95rem;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

    .bundle-modal__button:hover[b-g8t90719uv] {
        transform: translateY(-1px);
    }

.bundle-modal__button--secondary[b-g8t90719uv] {
    border: 1px solid #dbe3ef;
    background: #ffffff;
    color: #334155;
}

    .bundle-modal__button--secondary:hover[b-g8t90719uv] {
        background: #f8fafc;
        border-color: #c9d6e6;
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    }

.bundle-modal__button--danger[b-g8t90719uv] {
    border: 1px solid transparent;
    background: linear-gradient(180deg, #e11d48 0%, #be123c 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(225, 29, 72, 0.2);
}

    .bundle-modal__button--danger:hover[b-g8t90719uv] {
        box-shadow: 0 12px 22px rgba(225, 29, 72, 0.28);
    }
/* /Components/Pages/OperationControl/ParcelOperations/Bundles/Parts/CreateBundlePanel.razor.rz.scp.css */
/* =========================================================
   FILE: CreateBundlePanel.razor.css

   PURPOSE:
   Scoped styles for the Create Bundle panel inside the
   Bundle Management workspace.

   RESPONSIBILITIES:
   - Provide structured form layout
   - Style inputs, selects, and textarea
   - Style primary action button
   - Maintain consistency with existing UI system

   IMPORTANT NOTES:
   - Presentation only
   - No business logic
   - Avoid inline styles
========================================================= */

/* ============================================
   PANEL
   ============================================ */

.create-bundle-panel[b-7sidtfxs6n] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

    .create-bundle-panel h3[b-7sidtfxs6n] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: #172033;
    }

/* ============================================
   FORM GROUP
   ============================================ */

.form-group[b-7sidtfxs6n] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .form-group label[b-7sidtfxs6n] {
        font-size: 0.85rem;
        font-weight: 600;
        color: #526172;
    }

    /* ============================================
   INPUTS / SELECT / TEXTAREA
   ============================================ */

    .form-group input[b-7sidtfxs6n],
    .form-group select[b-7sidtfxs6n],
    .form-group textarea[b-7sidtfxs6n] {
        width: 100%;
        padding: 0.55rem 0.7rem;
        font-size: 0.9rem;
        border: 1px solid #cfd9e8;
        border-radius: 10px;
        background: #ffffff;
        color: #172033;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .form-group textarea[b-7sidtfxs6n] {
        resize: vertical;
        min-height: 70px;
    }

        /* Focus state */
        .form-group input:focus[b-7sidtfxs6n],
        .form-group select:focus[b-7sidtfxs6n],
        .form-group textarea:focus[b-7sidtfxs6n] {
            outline: none;
            border-color: #1c64f2;
            box-shadow: 0 0 0 2px rgba(28, 100, 242, 0.15);
        }

/* ============================================
   BUTTON
   ============================================ */

.create-bundle-panel button[b-7sidtfxs6n] {
    align-self: flex-start;
    min-width: 140px;
    border: 1px solid #1c64f2;
    background: #1c64f2;
    color: #ffffff;
    border-radius: 12px;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

    /* Hover */
    .create-bundle-panel button:hover:not(:disabled)[b-7sidtfxs6n] {
        background: #1553cc;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(28, 100, 242, 0.25);
    }

    /* Disabled */
    .create-bundle-panel button:disabled[b-7sidtfxs6n] {
        background: #dbe3ef;
        border-color: #dbe3ef;
        color: #8a97a6;
        cursor: not-allowed;
        box-shadow: none;
    }

/* ============================================
   ACTION BUTTON GROUP
   ============================================ */

.create-bundle-panel__actions[b-7sidtfxs6n] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

    .create-bundle-panel__actions button[b-7sidtfxs6n] {
        align-self: unset;
    }

        .create-bundle-panel__actions button:last-child[b-7sidtfxs6n] {
            border-color: #dbe3ef;
            background: #ffffff;
            color: #334155;
        }

            .create-bundle-panel__actions button:last-child:hover:not(:disabled)[b-7sidtfxs6n] {
                background: #f8fafc;
                border-color: #c9d6e6;
                box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
            }
/* /Components/Pages/OperationControl/ParcelOperations/ParcelQueue/ParcelQueueWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: ParcelQueueWorkspace.razor.css

   PURPOSE:
   Scoped styles for the Parcel Queue workspace.

   RESPONSIBILITIES:
   - Provide two-column scanner workstation layout
   - Keep scanning controls on the left
   - Keep active bundle context and assignment feedback on the right
   - Preserve Operations Control visual consistency

   IMPORTANT NOTES:
   - This file is presentation-only
   - Parcel Queue is for scanning and assignment only
   - Bundle creation belongs in a separate bundle workspace
========================================================= */

.parcel-queue-workspace[b-g6t6ez708l] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.parcel-queue-workspace__header[b-g6t6ez708l] {
    padding: 1.4rem 1.5rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

    .parcel-queue-workspace__header h2[b-g6t6ez708l] {
        margin: 0;
        font-size: 1.45rem;
        font-weight: 800;
        color: #172033;
    }

    .parcel-queue-workspace__header p[b-g6t6ez708l] {
        margin: 0.45rem 0 0 0;
        color: #5f6b7a;
        font-size: 0.96rem;
        line-height: 1.5;
    }

/* =========================================================
   WORKSTATION GRID
========================================================= */

.parcel-queue-workspace__grid[b-g6t6ez708l] {
    display: grid;
    grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr);
    gap: 1.25rem;
    align-items: start;
}

.parcel-queue-workspace__scanner-column[b-g6t6ez708l],
.parcel-queue-workspace__feedback-column[b-g6t6ez708l] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* =========================================================
   ACTIVE BUNDLE CARD
========================================================= */


/* =========================================================
   ASSIGNMENT FEED PLACEHOLDER
========================================================= */

.parcel-queue-workspace__feed-card[b-g6t6ez708l] {
    padding: 1.25rem 1.3rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

    .parcel-queue-workspace__feed-card h3[b-g6t6ez708l] {
        margin: 0;
        font-size: 1.08rem;
        font-weight: 800;
        color: #172033;
    }

    .parcel-queue-workspace__feed-card p[b-g6t6ez708l] {
        margin: 0.35rem 0 0 0;
        color: #5f6b7a;
        font-size: 0.92rem;
        line-height: 1.5;
    }

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
    .parcel-queue-workspace__grid[b-g6t6ez708l] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/OperationControl/ParcelOperations/ParcelQueue/Parts/ActiveBundleSelectorPanel.razor.rz.scp.css */
/* =========================================================
   FILE: ActiveBundleSelectorPanel.razor.css

   PURPOSE:
   Scoped styles for the active bundle selector panel.

   RESPONSIBILITIES:
   - Display selectable open bundles (dropdown)
   - Highlight selection clearly
   - Match Operations Control visual language

   IMPORTANT NOTES:
   - Presentation only
   - Bundle creation does not belong here
========================================================= */

.active-bundle-selector-panel[b-wrup3lkqpe] {
    padding: 1.25rem 1.3rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ============================================
   HEADER
============================================ */

.active-bundle-selector-panel__header h3[b-wrup3lkqpe] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #172033;
}

.active-bundle-selector-panel__header p[b-wrup3lkqpe] {
    margin: 0.35rem 0 0 0;
    color: #5f6b7a;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ============================================
   EMPTY STATE
============================================ */

.active-bundle-selector-panel__empty[b-wrup3lkqpe] {
    padding: 1rem;
    border: 1px dashed #dbe3ef;
    border-radius: 12px;
    background: #f7f9fc;
}

    .active-bundle-selector-panel__empty p[b-wrup3lkqpe] {
        margin: 0;
        color: #728196;
        font-size: 0.92rem;
    }

/* ============================================
   SELECT DROPDOWN (NEW)
============================================ */

.active-bundle-selector-panel__select-wrap[b-wrup3lkqpe] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.active-bundle-selector-panel__label[b-wrup3lkqpe] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #526172;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.active-bundle-selector-panel__select[b-wrup3lkqpe] {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    background: #f7f9fc;
    font-size: 0.9rem;
    font-weight: 600;
    color: #172033;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

    .active-bundle-selector-panel__select:hover[b-wrup3lkqpe] {
        border-color: #b7c5d9;
        background: #ffffff;
    }

    .active-bundle-selector-panel__select:focus[b-wrup3lkqpe] {
        border-color: #3b82f6;
        background: #ffffff;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
    }
.active-bundle-selector-panel__error[b-wrup3lkqpe] {
    margin: 0.45rem 0 0 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #be123c;
}
/* /Components/Pages/OperationControl/ParcelOperations/ParcelQueue/Parts/BundleAssignmentFeedPanel.razor.rz.scp.css */
/* =========================================================
   FILE: BundleAssignmentFeedPanel.razor.css

   PURPOSE:
   Scoped styles for the bundle assignment feed panel.

   RESPONSIBILITIES:
   - Style feed container and header
   - Render success and failure states clearly
   - Provide readable, scan-friendly list layout
   - Match Operations Control visual system

   IMPORTANT NOTES:
   - Presentation only
   - No logic here
========================================================= */

.bundle-assignment-feed-panel[b-2rew81q0r4] {
    padding: 1.25rem 1.3rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bundle-assignment-feed-panel__header h3[b-2rew81q0r4] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #172033;
}

.bundle-assignment-feed-panel__header p[b-2rew81q0r4] {
    margin: 0.35rem 0 0 0;
    color: #5f6b7a;
    font-size: 0.92rem;
}

/* =========================================================
   EMPTY STATE
========================================================= */

.bundle-assignment-feed-panel__empty[b-2rew81q0r4] {
    padding: 1rem;
    border: 1px dashed #dbe3ef;
    border-radius: 12px;
    text-align: center;
    color: #728196;
    font-size: 0.92rem;
}

/* =========================================================
   LIST
========================================================= */

.bundle-assignment-feed-panel__list[b-2rew81q0r4] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 420px;
    overflow-y: auto;
}

/* =========================================================
   ITEM
========================================================= */

.bundle-assignment-feed-panel__item[b-2rew81q0r4] {
    display: flex;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    border: 1px solid #e5ebf3;
    background: #f7f9fc;
}

/* SUCCESS */
.bundle-assignment-feed-panel__item--success[b-2rew81q0r4] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

/* FAILURE */
.bundle-assignment-feed-panel__item--failure[b-2rew81q0r4] {
    border-color: #fecaca;
    background: #fff1f2;
}

/* =========================================================
   STATUS ICON
========================================================= */

.bundle-assignment-feed-panel__status[b-2rew81q0r4] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bundle-assignment-feed-panel__status-icon[b-2rew81q0r4] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 900;
}

/* SUCCESS ICON */
.bundle-assignment-feed-panel__status-icon--success[b-2rew81q0r4] {
    background: #22c55e;
    color: #ffffff;
}

/* FAILURE ICON */
.bundle-assignment-feed-panel__status-icon--failure[b-2rew81q0r4] {
    background: #ef4444;
    color: #ffffff;
}

/* =========================================================
   CONTENT
========================================================= */

.bundle-assignment-feed-panel__content[b-2rew81q0r4] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.bundle-assignment-feed-panel__meta[b-2rew81q0r4] {
    display: flex;
    gap: 0.6rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #172033;
}

    .bundle-assignment-feed-panel__meta span[b-2rew81q0r4] {
        background: #ffffff;
        padding: 0.15rem 0.45rem;
        border-radius: 8px;
        border: 1px solid #e5ebf3;
    }

.bundle-assignment-feed-panel__content p[b-2rew81q0r4] {
    margin: 0;
    font-size: 0.88rem;
    color: #5f6b7a;
    line-height: 1.4;
}
/* /Components/Pages/OperationControl/ParcelOperations/ParcelQueue/Parts/CreateBundlePanel.razor.rz.scp.css */
/* =========================================================
   FILE: CreateBundlePanel.razor.css

   PURPOSE:
   Scoped styles for the Create Bundle panel.

   RESPONSIBILITIES:
   - Style the bundle creation card
   - Align inputs in a clean grid layout
   - Provide consistent button and message styling
   - Match Operations Control visual language

   IMPORTANT NOTES:
   - Presentation only
   - No logic should be handled here
========================================================= */

.create-bundle-panel[b-ia3sjnkeb8] {
    padding: 1.25rem 1.3rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

.create-bundle-panel__header[b-ia3sjnkeb8] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

    .create-bundle-panel__header h3[b-ia3sjnkeb8] {
        margin: 0;
        font-size: 1.08rem;
        font-weight: 800;
        color: #172033;
    }

    .create-bundle-panel__header p[b-ia3sjnkeb8] {
        margin: 0.35rem 0 0 0;
        color: #5f6b7a;
        font-size: 0.92rem;
        line-height: 1.5;
    }

.create-bundle-panel__body[b-ia3sjnkeb8] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.create-bundle-panel__grid[b-ia3sjnkeb8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}

.create-bundle-panel__field[b-ia3sjnkeb8] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.create-bundle-panel__label[b-ia3sjnkeb8] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #728196;
}

.create-bundle-panel__input[b-ia3sjnkeb8],
.create-bundle-panel__textarea[b-ia3sjnkeb8] {
    width: 100%;
    border: 1px solid #cfd9e8;
    border-radius: 12px;
    padding: 0.65rem 0.8rem;
    font-size: 0.95rem;
    color: #172033;
    background: #ffffff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .create-bundle-panel__input:focus[b-ia3sjnkeb8],
    .create-bundle-panel__textarea:focus[b-ia3sjnkeb8] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
    }

.create-bundle-panel__textarea[b-ia3sjnkeb8] {
    min-height: 70px;
    resize: vertical;
}

    .create-bundle-panel__input:disabled[b-ia3sjnkeb8],
    .create-bundle-panel__textarea:disabled[b-ia3sjnkeb8] {
        background: #f7f9fc;
        color: #728196;
        cursor: not-allowed;
    }

.create-bundle-panel__actions[b-ia3sjnkeb8] {
    display: flex;
    justify-content: flex-end;
}

.create-bundle-panel__button[b-ia3sjnkeb8] {
    padding: 0.55rem 1.2rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

    .create-bundle-panel__button:hover[b-ia3sjnkeb8] {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(37, 99, 235, 0.26);
    }

    .create-bundle-panel__button:disabled[b-ia3sjnkeb8] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.create-bundle-panel__message[b-ia3sjnkeb8] {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
}

.create-bundle-panel__message--error[b-ia3sjnkeb8] {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #b91c1c;
}

.create-bundle-panel__message--success[b-ia3sjnkeb8] {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}
/* /Components/Pages/OperationControl/ParcelOperations/ParcelQueue/Parts/ParcelCodeScanPanel.razor.rz.scp.css */
/* =========================================================
   FILE: ParcelCodeScanPanel.razor.css

   PURPOSE:
   Scoped styles for the parcel code scan panel.

   RESPONSIBILITIES:
   - Style the parcel code scanner card layout
   - Keep parcel code input and add button aligned
   - Display bundle assignment progress
   - Display success, error, and loading messages consistently
   - Preserve the Operations Control visual language

   IMPORTANT NOTES:
   - This file is presentation-only
   - Scanner behavior belongs to the Razor component
   - Business orchestration belongs to the parent workspace
========================================================= */

.parcel-code-scan-panel[b-xhrg0uzop3] {
    padding: 1.25rem 1.3rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

.parcel-code-scan-panel__header[b-xhrg0uzop3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

    .parcel-code-scan-panel__header h3[b-xhrg0uzop3] {
        margin: 0;
        font-size: 1.08rem;
        font-weight: 800;
        color: #172033;
    }

    .parcel-code-scan-panel__header p[b-xhrg0uzop3] {
        margin: 0.35rem 0 0 0;
        color: #5f6b7a;
        font-size: 0.92rem;
        line-height: 1.5;
    }

.parcel-code-scan-panel__body[b-xhrg0uzop3] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.parcel-code-scan-panel__label[b-xhrg0uzop3] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #728196;
}

.parcel-code-scan-panel__input-row[b-xhrg0uzop3] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.parcel-code-scan-panel__input[b-xhrg0uzop3] {
    flex: 1;
    height: 44px;
    padding: 0 0.95rem;
    border: 1px solid #cfd9e8;
    border-radius: 12px;
    background: #ffffff;
    color: #172033;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .parcel-code-scan-panel__input:focus[b-xhrg0uzop3] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
    }

    .parcel-code-scan-panel__input:disabled[b-xhrg0uzop3] {
        background: #f7f9fc;
        color: #728196;
        cursor: not-allowed;
    }

.parcel-code-scan-panel__button[b-xhrg0uzop3] {
    height: 44px;
    padding: 0 1.2rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

    .parcel-code-scan-panel__button:hover[b-xhrg0uzop3] {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(22, 163, 74, 0.26);
    }

    .parcel-code-scan-panel__button:disabled[b-xhrg0uzop3] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.parcel-code-scan-panel__progress[b-xhrg0uzop3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.85rem;
    border: 1px solid #e5ebf3;
    border-radius: 12px;
    background: #f7f9fc;
    color: #172033;
    font-size: 0.92rem;
    font-weight: 700;
}

.parcel-code-scan-panel__hint[b-xhrg0uzop3] {
    margin: 0;
    color: #5f6b7a;
    font-size: 0.92rem;
    line-height: 1.5;
}

.parcel-code-scan-panel__message[b-xhrg0uzop3] {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
}

.parcel-code-scan-panel__message--error[b-xhrg0uzop3] {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #b91c1c;
}

.parcel-code-scan-panel__message--success[b-xhrg0uzop3] {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}
/* /Components/Pages/OperationControl/ParcelOperations/ParcelQueue/Parts/ShipmentScanPanel.razor.rz.scp.css */
/* =========================================================
   FILE: ShipmentScanPanel.razor.css

   PURPOSE:
   Scoped styles for the shipment barcode scan panel.

   RESPONSIBILITIES:
   - Style the scanner card layout
   - Keep barcode input and scan button aligned
   - Display success, error, and loading messages consistently
   - Preserve the Operations Control visual language

   IMPORTANT NOTES:
   - This file is presentation-only
   - Scanner behavior belongs to the Razor component
   - Business orchestration belongs to the parent workspace
========================================================= */

.shipment-scan-panel[b-ux9sczh7r6] {
    padding: 1.25rem 1.3rem;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

.shipment-scan-panel__header[b-ux9sczh7r6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

    .shipment-scan-panel__header h3[b-ux9sczh7r6] {
        margin: 0;
        font-size: 1.08rem;
        font-weight: 800;
        color: #172033;
    }

    .shipment-scan-panel__header p[b-ux9sczh7r6] {
        margin: 0.35rem 0 0 0;
        color: #5f6b7a;
        font-size: 0.92rem;
        line-height: 1.5;
    }

.shipment-scan-panel__body[b-ux9sczh7r6] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.shipment-scan-panel__label[b-ux9sczh7r6] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #728196;
}

.shipment-scan-panel__input-row[b-ux9sczh7r6] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.shipment-scan-panel__input[b-ux9sczh7r6] {
    flex: 1;
    height: 44px;
    padding: 0 0.95rem;
    border: 1px solid #cfd9e8;
    border-radius: 12px;
    background: #ffffff;
    color: #172033;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .shipment-scan-panel__input:focus[b-ux9sczh7r6] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
    }

    .shipment-scan-panel__input:disabled[b-ux9sczh7r6] {
        background: #f7f9fc;
        color: #728196;
        cursor: not-allowed;
    }

.shipment-scan-panel__button[b-ux9sczh7r6] {
    height: 44px;
    padding: 0 1.2rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

    .shipment-scan-panel__button:hover[b-ux9sczh7r6] {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
    }

    .shipment-scan-panel__button:disabled[b-ux9sczh7r6] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.shipment-scan-panel__hint[b-ux9sczh7r6] {
    margin: 0;
    color: #5f6b7a;
    font-size: 0.92rem;
    line-height: 1.5;
}

.shipment-scan-panel__message[b-ux9sczh7r6] {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
}

.shipment-scan-panel__message--error[b-ux9sczh7r6] {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #b91c1c;
}

.shipment-scan-panel__message--success[b-ux9sczh7r6] {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}
/* /Components/Pages/OperationControl/Settings/Pricing/Parts/BaseFeeSetupPanel.razor.rz.scp.css */
/* =========================================================
   FILE: BaseFeeSetupPanel.razor.css

   PURPOSE:
   Fully self-contained styling for the Base Fee Setup panel.

   RESPONSIBILITIES:
   - Style base fee workspace shell
   - Style hero presentation and statistics
   - Style list and editor sections
   - Style tables, forms, alerts, buttons, and empty states
   - Maintain enterprise-grade pricing workspace consistency

   IMPORTANT NOTES:
   - This file is fully self-owned
   - No dependency on external pricing component CSS
   ========================================================= */

.vx-bfsp[b-flr7sq8rms] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* =========================================================
   HERO
   ========================================================= */

.vx-bfsp__hero[b-flr7sq8rms] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem;
    border-radius: 18px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 40%), linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
}

.vx-bfsp__hero-left[b-flr7sq8rms] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.vx-bfsp__hero-icon[b-flr7sq8rms] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.85);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

    .vx-bfsp__hero-icon svg[b-flr7sq8rms] {
        width: 30px;
        height: 30px;
    }

.vx-bfsp__hero-content[b-flr7sq8rms] {
    min-width: 0;
}

.vx-bfsp__eyebrow[b-flr7sq8rms] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-bfsp .vx-pricing-panel__title[b-flr7sq8rms] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-bfsp .vx-pricing-panel__subtitle[b-flr7sq8rms] {
    margin: 0.45rem 0 0;
    max-width: 52rem;
    color: #475569;
    line-height: 1.7;
    font-size: 0.96rem;
}

.vx-bfsp__hero-right[b-flr7sq8rms] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.vx-bfsp__stat[b-flr7sq8rms] {
    min-width: 135px;
    padding: 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #dbe4f0;
}

.vx-bfsp__stat-label[b-flr7sq8rms] {
    display: block;
    margin-bottom: 0.42rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-bfsp__stat-value[b-flr7sq8rms] {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

/* =========================================================
   HEADER / BODY
   ========================================================= */

.vx-bfsp .vx-pricing-panel__header[b-flr7sq8rms] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.vx-bfsp__section-badge[b-flr7sq8rms],
.vx-bfsp__editor-badge[b-flr7sq8rms] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.34rem 0.68rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-bfsp__section-title[b-flr7sq8rms],
.vx-bfsp__table-title[b-flr7sq8rms] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-bfsp__section-description[b-flr7sq8rms],
.vx-bfsp__table-subtitle[b-flr7sq8rms] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #64748b;
    line-height: 1.65;
    font-size: 0.92rem;
}

.vx-bfsp .vx-pricing-panel__body[b-flr7sq8rms] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vx-bfsp .vx-pricing-panel__state[b-flr7sq8rms] {
    padding: 1rem 1.1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    color: #475569;
}

/* =========================================================
   SECTION / EMPTY STATE
   ========================================================= */

.vx-bfsp__section[b-flr7sq8rms] {
    border: 1px solid #eef2f7;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.vx-bfsp__section-header[b-flr7sq8rms] {
    margin-bottom: 1rem;
}

.vx-bfsp__empty-state[b-flr7sq8rms] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    border-radius: 16px;
    padding: 2.5rem 1.5rem;
}

.vx-bfsp__empty-icon[b-flr7sq8rms] {
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    margin-bottom: 1rem;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.8);
    color: #2563eb;
}

    .vx-bfsp__empty-icon svg[b-flr7sq8rms] {
        width: 34px;
        height: 34px;
    }

.vx-bfsp__empty-title[b-flr7sq8rms] {
    margin: 0 0 0.65rem;
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-bfsp__empty-text[b-flr7sq8rms] {
    margin: 0;
    max-width: 34rem;
    line-height: 1.7;
    color: #64748b;
}

/* =========================================================
   ALERTS
   ========================================================= */

.vx-alert[b-flr7sq8rms] {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.55;
}

.vx-alert--error[b-flr7sq8rms] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.vx-alert--success[b-flr7sq8rms] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

/* =========================================================
   TABLE
   ========================================================= */

.vx-table-wrap[b-flr7sq8rms] {
    overflow-x: auto;
}

.vx-table[b-flr7sq8rms] {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

    .vx-table th[b-flr7sq8rms],
    .vx-table td[b-flr7sq8rms] {
        text-align: left;
        padding: 0.9rem 0.85rem;
        border-bottom: 1px solid #e5e7eb;
        vertical-align: middle;
    }

    .vx-table th[b-flr7sq8rms] {
        font-size: 0.82rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #475569;
        background: #f8fafc;
    }

    .vx-table td[b-flr7sq8rms] {
        color: #0f172a;
        font-size: 0.94rem;
    }

    .vx-table tbody tr:hover[b-flr7sq8rms] {
        background: rgba(248, 250, 252, 0.9);
    }

.vx-table__actions[b-flr7sq8rms] {
    width: 110px;
    white-space: nowrap;
}

.vx-bfsp__scope[b-flr7sq8rms] {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.78rem;
    font-weight: 800;
}

.vx-bfsp__destination[b-flr7sq8rms],
.vx-bfsp__currency[b-flr7sq8rms] {
    font-weight: 700;
    color: #0f172a;
}

.vx-bfsp__amount[b-flr7sq8rms] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 36px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 800;
}

/* =========================================================
   BADGES / FORM
   ========================================================= */

.vx-badge[b-flr7sq8rms] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.28rem 0.62rem;
    font-size: 0.78rem;
    font-weight: 800;
}

.vx-badge--success[b-flr7sq8rms] {
    background: #dcfce7;
    color: #166534;
}

.vx-badge--muted[b-flr7sq8rms] {
    background: #e2e8f0;
    color: #475569;
}

.vx-form-grid[b-flr7sq8rms] {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 1rem;
}

.vx-field[b-flr7sq8rms] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.vx-field__label[b-flr7sq8rms] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}

.vx-field__input[b-flr7sq8rms] {
    width: 100%;
    min-height: 46px;
    padding: 0.72rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.95rem;
    box-sizing: border-box;
}

    .vx-field__input:focus[b-flr7sq8rms] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

    .vx-field__input:disabled[b-flr7sq8rms] {
        background: #f8fafc;
        color: #64748b;
    }

.vx-bfsp__checkbox-field[b-flr7sq8rms] {
    grid-column: span 2;
}

.vx-bfsp__toggle-card[b-flr7sq8rms] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid #dbe4f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.vx-bfsp__toggle-copy[b-flr7sq8rms] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.vx-bfsp__toggle-title[b-flr7sq8rms] {
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-bfsp__toggle-description[b-flr7sq8rms] {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #64748b;
}

.vx-checkbox[b-flr7sq8rms] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 46px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

/* =========================================================
   ACTIONS / BUTTONS
   ========================================================= */

.vx-form-actions[b-flr7sq8rms] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.vx-btn[b-flr7sq8rms] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: none;
    border-radius: 12px;
    padding: 0.72rem 1rem;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}

    .vx-btn:hover:not(:disabled)[b-flr7sq8rms] {
        transform: translateY(-1px);
    }

    .vx-btn:disabled[b-flr7sq8rms] {
        cursor: not-allowed;
        opacity: 0.65;
    }

.vx-btn--primary[b-flr7sq8rms] {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

.vx-btn--secondary[b-flr7sq8rms] {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
}

.vx-btn--sm[b-flr7sq8rms] {
    min-height: 38px;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    font-size: 0.84rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .vx-bfsp__hero[b-flr7sq8rms] {
        flex-direction: column;
    }

    .vx-bfsp__hero-right[b-flr7sq8rms] {
        width: 100%;
    }

    .vx-bfsp__stat[b-flr7sq8rms] {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .vx-bfsp[b-flr7sq8rms] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-form-grid[b-flr7sq8rms] {
        grid-template-columns: 1fr;
    }

    .vx-bfsp .vx-pricing-panel__header[b-flr7sq8rms] {
        align-items: stretch;
    }

    .vx-form-actions .vx-btn[b-flr7sq8rms],
    .vx-btn[b-flr7sq8rms] {
        width: 100%;
    }

    .vx-bfsp__hero-left[b-flr7sq8rms] {
        flex-direction: column;
    }

    .vx-bfsp__hero-icon[b-flr7sq8rms] {
        width: 58px;
        height: 58px;
    }

    .vx-bfsp .vx-pricing-panel__title[b-flr7sq8rms] {
        font-size: 1.22rem;
    }

    .vx-bfsp .vx-pricing-panel__subtitle[b-flr7sq8rms] {
        font-size: 0.92rem;
    }

    .vx-table[b-flr7sq8rms] {
        min-width: 760px;
    }

    .vx-bfsp__checkbox-field[b-flr7sq8rms] {
        grid-column: span 1;
    }

    .vx-bfsp__toggle-card[b-flr7sq8rms] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/OperationControl/Settings/Pricing/Parts/OriginSurchargePanel.razor.rz.scp.css */
/* =========================================================
   FILE: OriginSurchargePanel.razor.css

   PURPOSE:
   Fully self-contained styling for the Origin Surcharge panel.

   RESPONSIBILITIES:
   - Style surcharge workspace shell
   - Style hero presentation and statistics
   - Style surcharge configuration section
   - Style alerts, actions, and form controls
   - Maintain enterprise-grade pricing workspace consistency
   - Keep component styling fully isolated

   IMPORTANT NOTES:
   - This file is fully self-owned
   - No dependency on external pricing component CSS
   ========================================================= */

/* =========================================================
   ROOT PANEL
   ========================================================= */

.vx-osp[b-v3wspwl7sh] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* =========================================================
   HERO
   ========================================================= */

.vx-osp__hero[b-v3wspwl7sh] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem;
    border-radius: 18px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 40%), linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
}

.vx-osp__hero-left[b-v3wspwl7sh] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.vx-osp__hero-icon[b-v3wspwl7sh] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.85);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

    .vx-osp__hero-icon svg[b-v3wspwl7sh] {
        width: 30px;
        height: 30px;
    }

.vx-osp__hero-content[b-v3wspwl7sh] {
    min-width: 0;
}

.vx-osp__eyebrow[b-v3wspwl7sh] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-osp .vx-pricing-panel__title[b-v3wspwl7sh] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-osp .vx-pricing-panel__subtitle[b-v3wspwl7sh] {
    margin: 0.45rem 0 0;
    max-width: 52rem;
    color: #475569;
    line-height: 1.7;
    font-size: 0.96rem;
}

/* =========================================================
   HERO STATS
   ========================================================= */

.vx-osp__hero-right[b-v3wspwl7sh] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.vx-osp__stat[b-v3wspwl7sh] {
    min-width: 135px;
    padding: 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #dbe4f0;
    backdrop-filter: blur(8px);
}

.vx-osp__stat-label[b-v3wspwl7sh] {
    display: block;
    margin-bottom: 0.42rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-osp__stat-value[b-v3wspwl7sh] {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

/* =========================================================
   HEADER
   ========================================================= */

.vx-osp .vx-pricing-panel__header[b-v3wspwl7sh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.vx-osp__section-copy[b-v3wspwl7sh] {
    min-width: 0;
}

.vx-osp__section-badge[b-v3wspwl7sh],
.vx-osp__editor-badge[b-v3wspwl7sh] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.34rem 0.68rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-osp__section-title[b-v3wspwl7sh] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-osp__section-description[b-v3wspwl7sh] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #64748b;
    line-height: 1.65;
    font-size: 0.92rem;
}

/* =========================================================
   BODY
   ========================================================= */

.vx-osp .vx-pricing-panel__body[b-v3wspwl7sh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =========================================================
   SECTION
   ========================================================= */

.vx-osp__section[b-v3wspwl7sh] {
    border: 1px solid #eef2f7;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.vx-osp__section-header[b-v3wspwl7sh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.vx-osp__table-title[b-v3wspwl7sh] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-osp__table-subtitle[b-v3wspwl7sh] {
    margin: 0.4rem 0 0;
    color: #64748b;
    line-height: 1.6;
    font-size: 0.9rem;
}

/* =========================================================
   ALERTS
   ========================================================= */

.vx-alert[b-v3wspwl7sh] {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.55;
}

.vx-alert--error[b-v3wspwl7sh] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.vx-alert--success[b-v3wspwl7sh] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

/* =========================================================
   FORM GRID
   ========================================================= */

.vx-osp__form-grid[b-v3wspwl7sh],
.vx-form-grid[b-v3wspwl7sh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 1rem;
}

.vx-field[b-v3wspwl7sh] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.vx-field--checkbox[b-v3wspwl7sh] {
    justify-content: flex-end;
}

.vx-field__label[b-v3wspwl7sh] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}

.vx-field__input[b-v3wspwl7sh] {
    width: 100%;
    min-height: 46px;
    padding: 0.72rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.95rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
}

    .vx-field__input:focus[b-v3wspwl7sh] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

    .vx-field__input:disabled[b-v3wspwl7sh] {
        background: #f8fafc;
        color: #64748b;
    }

.vx-field__help[b-v3wspwl7sh] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #64748b;
}

/* =========================================================
   TOGGLE CARD
   ========================================================= */

.vx-osp__checkbox-field[b-v3wspwl7sh] {
    grid-column: span 2;
}

.vx-osp__toggle-card[b-v3wspwl7sh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid #dbe4f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.vx-osp__toggle-copy[b-v3wspwl7sh] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.vx-osp__toggle-title[b-v3wspwl7sh] {
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-osp__toggle-description[b-v3wspwl7sh] {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #64748b;
}

.vx-checkbox[b-v3wspwl7sh] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 46px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.vx-btn[b-v3wspwl7sh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: none;
    border-radius: 12px;
    padding: 0.72rem 1rem;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

    .vx-btn:hover:not(:disabled)[b-v3wspwl7sh] {
        transform: translateY(-1px);
    }

    .vx-btn:disabled[b-v3wspwl7sh] {
        cursor: not-allowed;
        opacity: 0.65;
    }

.vx-btn--primary[b-v3wspwl7sh] {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

    .vx-btn--primary:hover:not(:disabled)[b-v3wspwl7sh] {
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .vx-osp__hero[b-v3wspwl7sh] {
        flex-direction: column;
    }

    .vx-osp__hero-right[b-v3wspwl7sh] {
        width: 100%;
    }

    .vx-osp__stat[b-v3wspwl7sh] {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 768px) {

    .vx-osp[b-v3wspwl7sh] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-osp__form-grid[b-v3wspwl7sh],
    .vx-form-grid[b-v3wspwl7sh] {
        grid-template-columns: 1fr;
    }

    .vx-osp .vx-pricing-panel__header[b-v3wspwl7sh] {
        align-items: stretch;
    }

    .vx-btn[b-v3wspwl7sh] {
        width: 100%;
    }

    .vx-osp__hero-left[b-v3wspwl7sh] {
        flex-direction: column;
    }

    .vx-osp__hero-icon[b-v3wspwl7sh] {
        width: 58px;
        height: 58px;
    }

    .vx-osp .vx-pricing-panel__title[b-v3wspwl7sh] {
        font-size: 1.22rem;
    }

    .vx-osp .vx-pricing-panel__subtitle[b-v3wspwl7sh] {
        font-size: 0.92rem;
    }

    .vx-osp__checkbox-field[b-v3wspwl7sh] {
        grid-column: span 1;
    }

    .vx-osp__toggle-card[b-v3wspwl7sh] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/OperationControl/Settings/Pricing/Parts/OriginSurchargeZonePanel.razor.rz.scp.css */
/* =========================================================
   FILE: OriginSurchargeZonePanel.razor.css

   PURPOSE:
   Scoped styles for the Origin Surcharge Zone panel.

   RESPONSIBILITIES:
   - Style the surcharge zone workspace shell
   - Style hero presentation and statistics
   - Style zone list and create form
   - Style alerts, tables, cards, and actions
   - Keep the panel aligned with the pricing workspace design
   - Maintain fully self-contained component styling

   IMPORTANT NOTES:
   - This file is fully self-owned
   - No reliance on external pricing component CSS
   ========================================================= */

/* =========================================================
   ROOT PANEL
   ========================================================= */

.vx-oszp[b-a2srd73e0n] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* =========================================================
   HERO
   ========================================================= */

.vx-oszp__hero[b-a2srd73e0n] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem;
    border-radius: 18px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 40%), linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
}

.vx-oszp__hero-left[b-a2srd73e0n] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.vx-oszp__hero-icon[b-a2srd73e0n] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.85);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

    .vx-oszp__hero-icon svg[b-a2srd73e0n] {
        width: 30px;
        height: 30px;
    }

.vx-oszp__hero-content[b-a2srd73e0n] {
    min-width: 0;
}

.vx-oszp__eyebrow[b-a2srd73e0n] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-oszp .vx-pricing-panel__title[b-a2srd73e0n] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-oszp .vx-pricing-panel__subtitle[b-a2srd73e0n] {
    margin: 0.45rem 0 0;
    max-width: 52rem;
    color: #475569;
    line-height: 1.7;
    font-size: 0.96rem;
}

.vx-oszp__hero-right[b-a2srd73e0n] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.vx-oszp__stat[b-a2srd73e0n] {
    min-width: 135px;
    padding: 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #dbe4f0;
    backdrop-filter: blur(8px);
}

.vx-oszp__stat-label[b-a2srd73e0n] {
    display: block;
    margin-bottom: 0.42rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-oszp__stat-value[b-a2srd73e0n] {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

/* =========================================================
   HEADER
   ========================================================= */

.vx-oszp .vx-pricing-panel__header[b-a2srd73e0n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.vx-oszp__section-copy[b-a2srd73e0n] {
    min-width: 0;
}

.vx-oszp__section-badge[b-a2srd73e0n],
.vx-oszp__editor-badge[b-a2srd73e0n] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.34rem 0.68rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-oszp__section-title[b-a2srd73e0n] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-oszp__section-description[b-a2srd73e0n] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #64748b;
    line-height: 1.65;
    font-size: 0.92rem;
}

/* =========================================================
   BODY
   ========================================================= */

.vx-oszp .vx-pricing-panel__body[b-a2srd73e0n] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vx-oszp .vx-pricing-panel__state[b-a2srd73e0n] {
    padding: 1rem 1.1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    color: #475569;
}

/* =========================================================
   SECTION
   ========================================================= */

.vx-oszp__section[b-a2srd73e0n] {
    border: 1px solid #eef2f7;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius: 18px;
    padding: 1rem;
}

.vx-oszp__section-header[b-a2srd73e0n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.vx-oszp__table-title[b-a2srd73e0n] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-oszp__table-subtitle[b-a2srd73e0n] {
    margin: 0.4rem 0 0;
    color: #64748b;
    line-height: 1.6;
    font-size: 0.9rem;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.vx-oszp__empty-state[b-a2srd73e0n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
}

.vx-oszp__empty-icon[b-a2srd73e0n] {
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    margin-bottom: 1rem;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.8);
    color: #2563eb;
}

    .vx-oszp__empty-icon svg[b-a2srd73e0n] {
        width: 34px;
        height: 34px;
    }

.vx-oszp__empty-title[b-a2srd73e0n] {
    margin: 0 0 0.65rem;
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-oszp__empty-text[b-a2srd73e0n] {
    margin: 0;
    max-width: 32rem;
    line-height: 1.7;
    color: #64748b;
}

/* =========================================================
   ALERTS
   ========================================================= */

.vx-alert[b-a2srd73e0n] {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.55;
}

.vx-alert--error[b-a2srd73e0n] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.vx-alert--success[b-a2srd73e0n] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

/* =========================================================
   TABLE
   ========================================================= */

.vx-table-wrap[b-a2srd73e0n] {
    overflow-x: auto;
}

.vx-table[b-a2srd73e0n] {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
}

    .vx-table th[b-a2srd73e0n],
    .vx-table td[b-a2srd73e0n] {
        text-align: left;
        padding: 0.9rem 0.85rem;
        border-bottom: 1px solid #e5e7eb;
        vertical-align: middle;
    }

    .vx-table th[b-a2srd73e0n] {
        font-size: 0.82rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #475569;
        background: #f8fafc;
    }

    .vx-table td[b-a2srd73e0n] {
        color: #0f172a;
        font-size: 0.94rem;
    }

    .vx-table tbody tr[b-a2srd73e0n] {
        transition: background 0.18s ease;
    }

        .vx-table tbody tr:hover[b-a2srd73e0n] {
            background: rgba(248, 250, 252, 0.9);
        }

.vx-oszp__distance[b-a2srd73e0n] {
    font-weight: 700;
    color: #0f172a;
}

.vx-oszp__open-ended[b-a2srd73e0n] {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.78rem;
    font-weight: 800;
}

.vx-oszp__surcharge[b-a2srd73e0n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 36px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 800;
}

/* =========================================================
   BADGES
   ========================================================= */

.vx-badge[b-a2srd73e0n] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.28rem 0.62rem;
    font-size: 0.78rem;
    font-weight: 800;
}

.vx-badge--success[b-a2srd73e0n] {
    background: #dcfce7;
    color: #166534;
}

.vx-badge--muted[b-a2srd73e0n] {
    background: #e2e8f0;
    color: #475569;
}

/* =========================================================
   FORM GRID
   ========================================================= */

.vx-form-grid[b-a2srd73e0n] {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 1rem;
}

.vx-field[b-a2srd73e0n] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.vx-field--checkbox[b-a2srd73e0n] {
    justify-content: flex-end;
}

.vx-field__label[b-a2srd73e0n] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}

.vx-field__input[b-a2srd73e0n] {
    width: 100%;
    min-height: 46px;
    padding: 0.72rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.95rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
}

    .vx-field__input:focus[b-a2srd73e0n] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

    .vx-field__input:disabled[b-a2srd73e0n] {
        background: #f8fafc;
        color: #64748b;
    }

.vx-field__help[b-a2srd73e0n] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #64748b;
}

.vx-checkbox[b-a2srd73e0n] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 46px;
    font-weight: 700;
    color: #0f172a;
}

/* =========================================================
   ACTIONS
   ========================================================= */

.vx-form-actions[b-a2srd73e0n] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.vx-btn[b-a2srd73e0n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: none;
    border-radius: 12px;
    padding: 0.72rem 1rem;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

    .vx-btn:hover:not(:disabled)[b-a2srd73e0n] {
        transform: translateY(-1px);
    }

    .vx-btn:disabled[b-a2srd73e0n] {
        cursor: not-allowed;
        opacity: 0.65;
    }

.vx-btn--primary[b-a2srd73e0n] {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .vx-oszp__hero[b-a2srd73e0n] {
        flex-direction: column;
    }

    .vx-oszp__hero-right[b-a2srd73e0n] {
        width: 100%;
    }

    .vx-oszp__stat[b-a2srd73e0n] {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 768px) {

    .vx-oszp[b-a2srd73e0n] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-form-grid[b-a2srd73e0n] {
        grid-template-columns: 1fr;
    }

    .vx-oszp .vx-pricing-panel__header[b-a2srd73e0n] {
        align-items: stretch;
    }

    .vx-btn[b-a2srd73e0n] {
        width: 100%;
    }

    .vx-oszp__hero-left[b-a2srd73e0n] {
        flex-direction: column;
    }

    .vx-oszp__hero-icon[b-a2srd73e0n] {
        width: 58px;
        height: 58px;
    }

    .vx-oszp .vx-pricing-panel__title[b-a2srd73e0n] {
        font-size: 1.22rem;
    }

    .vx-oszp .vx-pricing-panel__subtitle[b-a2srd73e0n] {
        font-size: 0.92rem;
    }

    .vx-table[b-a2srd73e0n] {
        min-width: 680px;
    }
}
/* =========================================================
   TABLE HEADER STICKINESS
   Improves large-grid usability
   ========================================================= */

.vx-table thead th[b-a2srd73e0n] {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* =========================================================
   BETTER ACTION BUTTON SHADOW
   ========================================================= */

.vx-btn--primary:hover:not(:disabled)[b-a2srd73e0n] {
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
}

/* =========================================================
   CLEANER SECTION DEPTH
   ========================================================= */

.vx-oszp__section[b-a2srd73e0n] {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* =========================================================
   BETTER TABLE CELL WRAPPING
   Prevent overflow on long values
   ========================================================= */

.vx-table td[b-a2srd73e0n] {
    word-break: break-word;
}

/* =========================================================
   IMPROVED MOBILE ACTION SPACING
   ========================================================= */

@media (max-width: 768px) {

    .vx-form-actions[b-a2srd73e0n] {
        width: 100%;
    }

        .vx-form-actions .vx-btn[b-a2srd73e0n] {
            width: 100%;
        }
}
/* /Components/Pages/OperationControl/Settings/Pricing/Parts/PricingPolicyPanel.razor.rz.scp.css */
/* =========================================================
   FILE: PricingPolicyPanel.razor.css

   PURPOSE:
   Scoped styles for the Pricing Policy panel.

   RESPONSIBILITIES:
   - Style the pricing panel shell
   - Style hero presentation
   - Style policy cards and configuration areas
   - Style panel header and actions
   - Style alerts and state presentation
   - Keep the component visually aligned with the
     enterprise pricing workspace language

   IMPORTANT NOTES:
   - This file is fully self-contained
   - No dependency on external pricing component CSS
   ========================================================= */

/* =========================================================
   ROOT PANEL
   ========================================================= */

.vx-ppp[b-9waco6cm6g] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* =========================================================
   HERO
   ========================================================= */

.vx-ppp__hero[b-9waco6cm6g] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem;
    border-radius: 18px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 40%), linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
}

.vx-ppp__hero-left[b-9waco6cm6g] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.vx-ppp__hero-icon[b-9waco6cm6g] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.85);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

    .vx-ppp__hero-icon svg[b-9waco6cm6g] {
        width: 30px;
        height: 30px;
    }

.vx-ppp__hero-content[b-9waco6cm6g] {
    min-width: 0;
}

.vx-ppp__eyebrow[b-9waco6cm6g] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-ppp .vx-pricing-panel__title[b-9waco6cm6g] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-ppp .vx-pricing-panel__subtitle[b-9waco6cm6g] {
    margin: 0.45rem 0 0;
    max-width: 52rem;
    color: #475569;
    line-height: 1.7;
    font-size: 0.96rem;
}

.vx-ppp__hero-right[b-9waco6cm6g] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.vx-ppp__stat[b-9waco6cm6g] {
    min-width: 135px;
    padding: 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #dbe4f0;
    backdrop-filter: blur(8px);
}

.vx-ppp__stat-label[b-9waco6cm6g] {
    display: block;
    margin-bottom: 0.42rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-ppp__stat-value[b-9waco6cm6g] {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

/* =========================================================
   HEADER
   ========================================================= */

.vx-ppp .vx-pricing-panel__header[b-9waco6cm6g] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.vx-ppp__section-copy[b-9waco6cm6g] {
    min-width: 0;
}

.vx-ppp__section-badge[b-9waco6cm6g] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.34rem 0.68rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-ppp__section-title[b-9waco6cm6g] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-ppp__section-description[b-9waco6cm6g] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #64748b;
    line-height: 1.65;
    font-size: 0.92rem;
}

/* =========================================================
   BODY
   ========================================================= */

.vx-ppp .vx-pricing-panel__body[b-9waco6cm6g] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vx-ppp .vx-pricing-panel__state[b-9waco6cm6g] {
    padding: 1rem 1.1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    color: #475569;
}

/* =========================================================
   POLICY GRID
   ========================================================= */

.vx-pricing-policy-grid[b-9waco6cm6g] {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 1rem;
}

.vx-ppp__policy-card[b-9waco6cm6g] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid #e2e8f0;
}

.vx-ppp__policy-card-header[b-9waco6cm6g] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.vx-ppp__policy-icon[b-9waco6cm6g] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
    flex-shrink: 0;
}

    .vx-ppp__policy-icon svg[b-9waco6cm6g] {
        width: 24px;
        height: 24px;
    }

.vx-ppp__policy-title[b-9waco6cm6g] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-ppp__policy-description[b-9waco6cm6g] {
    margin: 0.4rem 0 0;
    color: #64748b;
    line-height: 1.6;
    font-size: 0.9rem;
}

/* =========================================================
   FORM FIELDS
   ========================================================= */

.vx-field[b-9waco6cm6g] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.vx-field__label[b-9waco6cm6g] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}

.vx-field__input[b-9waco6cm6g] {
    width: 100%;
    min-height: 46px;
    padding: 0.72rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.95rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    box-sizing: border-box;
}

    .vx-field__input:focus[b-9waco6cm6g] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

    .vx-field__input:disabled[b-9waco6cm6g] {
        background: #f8fafc;
        color: #64748b;
    }

.vx-field__help[b-9waco6cm6g] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #64748b;
}

/* =========================================================
   ALERTS
   ========================================================= */

.vx-alert[b-9waco6cm6g] {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.55;
}

.vx-alert--error[b-9waco6cm6g] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.vx-alert--success[b-9waco6cm6g] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.vx-btn[b-9waco6cm6g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: none;
    border-radius: 12px;
    padding: 0.72rem 1rem;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

    .vx-btn:hover:not(:disabled)[b-9waco6cm6g] {
        transform: translateY(-1px);
    }

    .vx-btn:disabled[b-9waco6cm6g] {
        cursor: not-allowed;
        opacity: 0.65;
    }

.vx-btn--primary[b-9waco6cm6g] {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .vx-ppp__hero[b-9waco6cm6g] {
        flex-direction: column;
    }

    .vx-ppp__hero-right[b-9waco6cm6g] {
        width: 100%;
    }

    .vx-ppp__stat[b-9waco6cm6g] {
        flex: 1;
        min-width: 0;
    }

    .vx-pricing-policy-grid[b-9waco6cm6g] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .vx-ppp[b-9waco6cm6g] {
        padding: 1rem;
        border-radius: 16px;
    }

        .vx-ppp .vx-pricing-panel__header[b-9waco6cm6g] {
            align-items: stretch;
        }

    .vx-btn[b-9waco6cm6g] {
        width: 100%;
    }

    .vx-ppp__hero-left[b-9waco6cm6g] {
        flex-direction: column;
    }

    .vx-ppp__hero-icon[b-9waco6cm6g] {
        width: 58px;
        height: 58px;
    }

    .vx-ppp .vx-pricing-panel__title[b-9waco6cm6g] {
        font-size: 1.22rem;
    }

    .vx-ppp .vx-pricing-panel__subtitle[b-9waco6cm6g] {
        font-size: 0.92rem;
    }
}
/* /Components/Pages/OperationControl/Settings/Pricing/Parts/TierPricingSetupCreate.razor.rz.scp.css */
/* =========================================================
   FILE: TierPricingSetupCreate.razor.css

   PURPOSE:
   Fully self-contained styling for Tier Pricing Setup Create host.

   RESPONSIBILITIES:
   - Style outer panel container
   - Style hero header experience
   - Style body wrapper around embedded form
   - Keep create host visually aligned with edit host
   - Provide enterprise-grade pricing configuration visuals
   - Avoid dependency on other components

   IMPORTANT NOTES:
   - This file styles ONLY the create host
   - The nested form owns its own styling
   - Optimized for Operations pricing workflows
   ========================================================= */

/* =========================================================
   ROOT PANEL
   ========================================================= */

.vx-tpsc-host[b-j4w8vqmgm6] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 1.25rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* =========================================================
   HERO
   ========================================================= */

.vx-tpsc-host__hero[b-j4w8vqmgm6] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #dbeafe;
}

.vx-tpsc-host__hero-left[b-j4w8vqmgm6] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
    flex: 1;
}

.vx-tpsc-host__hero-icon[b-j4w8vqmgm6] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.85);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
}

    .vx-tpsc-host__hero-icon svg[b-j4w8vqmgm6] {
        width: 30px;
        height: 30px;
    }

.vx-tpsc-host__hero-content[b-j4w8vqmgm6] {
    min-width: 0;
}

.vx-tpsc-host__eyebrow[b-j4w8vqmgm6] {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.75rem;
    margin-bottom: 0.7rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-tpsc-host .vx-pricing-panel__title[b-j4w8vqmgm6] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
}

.vx-tpsc-host .vx-pricing-panel__subtitle[b-j4w8vqmgm6] {
    margin: 0.7rem 0 0;
    max-width: 44rem;
    color: #64748b;
    line-height: 1.7;
    font-size: 0.95rem;
}

.vx-tpsc-host__hero-right[b-j4w8vqmgm6] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.vx-tpsc-host__stat[b-j4w8vqmgm6] {
    min-width: 140px;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
}

.vx-tpsc-host__stat-label[b-j4w8vqmgm6] {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-tpsc-host__stat-value[b-j4w8vqmgm6] {
    font-size: 1.15rem;
    font-weight: 900;
    color: #0f172a;
}

/* =========================================================
   BODY
   ========================================================= */

.vx-tpsc-host .vx-pricing-panel__body[b-j4w8vqmgm6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 992px) {

    .vx-tpsc-host__hero[b-j4w8vqmgm6] {
        flex-direction: column;
    }

    .vx-tpsc-host__hero-right[b-j4w8vqmgm6] {
        width: 100%;
    }

    .vx-tpsc-host__stat[b-j4w8vqmgm6] {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 768px) {

    .vx-tpsc-host[b-j4w8vqmgm6] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-tpsc-host__hero[b-j4w8vqmgm6] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-tpsc-host__hero-left[b-j4w8vqmgm6] {
        flex-direction: column;
    }

    .vx-tpsc-host__hero-icon[b-j4w8vqmgm6] {
        width: 58px;
        height: 58px;
    }

    .vx-tpsc-host .vx-pricing-panel__title[b-j4w8vqmgm6] {
        font-size: 1.25rem;
    }

    .vx-tpsc-host .vx-pricing-panel__subtitle[b-j4w8vqmgm6] {
        font-size: 0.92rem;
    }
}
/* /Components/Pages/OperationControl/Settings/Pricing/Parts/TierPricingSetupEdit.razor.rz.scp.css */
/* =========================================================
   FILE: TierPricingSetupEdit.razor.css

   PURPOSE:
   Fully self-contained styling for Tier Pricing Setup Edit host.

   RESPONSIBILITIES:
   - Style outer panel container
   - Style hero header experience
   - Style loading state
   - Provide enterprise-grade visual hierarchy
   - Ensure proper spacing for embedded form
   - Avoid dependency on other components

   IMPORTANT NOTES:
   - This file styles ONLY the edit host
   - The embedded form owns its own styling
   - Optimized for pricing operations workspace consistency
   ========================================================= */

/* =========================================================
   ROOT PANEL
   ========================================================= */

.vx-tpse-host[b-jw0wywowy0] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 1.25rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* =========================================================
   HERO
   ========================================================= */

.vx-tpse-host__hero[b-jw0wywowy0] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #dbeafe;
}

.vx-tpse-host__hero-left[b-jw0wywowy0] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
    flex: 1;
}

.vx-tpse-host__hero-icon[b-jw0wywowy0] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.85);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
}

    .vx-tpse-host__hero-icon svg[b-jw0wywowy0] {
        width: 30px;
        height: 30px;
    }

.vx-tpse-host__hero-content[b-jw0wywowy0] {
    min-width: 0;
}

.vx-tpse-host__eyebrow[b-jw0wywowy0] {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.75rem;
    margin-bottom: 0.7rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-tpse-host .vx-pricing-panel__title[b-jw0wywowy0] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
}

.vx-tpse-host .vx-pricing-panel__subtitle[b-jw0wywowy0] {
    margin: 0.7rem 0 0;
    max-width: 44rem;
    color: #64748b;
    line-height: 1.7;
    font-size: 0.95rem;
}

.vx-tpse-host__hero-right[b-jw0wywowy0] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.vx-tpse-host__stat[b-jw0wywowy0] {
    min-width: 140px;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
}

.vx-tpse-host__stat-label[b-jw0wywowy0] {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-tpse-host__stat-value[b-jw0wywowy0] {
    font-size: 1.15rem;
    font-weight: 900;
    color: #0f172a;
}

/* =========================================================
   BODY
   ========================================================= */

.vx-tpse-host .vx-pricing-panel__body[b-jw0wywowy0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =========================================================
   LOADING STATE
   ========================================================= */

.vx-tpse-host__loading-state[b-jw0wywowy0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    background: #f8fafc;
}

    .vx-tpse-host__loading-state strong[b-jw0wywowy0] {
        display: block;
        margin-bottom: 0.3rem;
        color: #0f172a;
    }

    .vx-tpse-host__loading-state p[b-jw0wywowy0] {
        margin: 0;
        color: #64748b;
        line-height: 1.6;
        font-size: 0.92rem;
    }

.vx-tpse-host__loading-spinner[b-jw0wywowy0] {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 3px solid #dbeafe;
    border-top-color: #2563eb;
    animation: vx-tpse-spin-b-jw0wywowy0 0.9s linear infinite;
    flex-shrink: 0;
}

@keyframes vx-tpse-spin-b-jw0wywowy0 {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 992px) {

    .vx-tpse-host__hero[b-jw0wywowy0] {
        flex-direction: column;
    }

    .vx-tpse-host__hero-right[b-jw0wywowy0] {
        width: 100%;
    }

    .vx-tpse-host__stat[b-jw0wywowy0] {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 768px) {

    .vx-tpse-host[b-jw0wywowy0] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-tpse-host__hero[b-jw0wywowy0] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-tpse-host__hero-left[b-jw0wywowy0] {
        flex-direction: column;
    }

    .vx-tpse-host__hero-icon[b-jw0wywowy0] {
        width: 58px;
        height: 58px;
    }

    .vx-tpse-host .vx-pricing-panel__title[b-jw0wywowy0] {
        font-size: 1.25rem;
    }

    .vx-tpse-host .vx-pricing-panel__subtitle[b-jw0wywowy0] {
        font-size: 0.92rem;
    }

    .vx-tpse-host__loading-state[b-jw0wywowy0] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Pages/OperationControl/Settings/Pricing/Parts/TierPricingSetupEditor.razor.rz.scp.css */
/* =========================================================
   FILE: TierPricingSetupEditor.razor.css

   PURPOSE:
   Fully self-contained styling for Tier Pricing Setup Editor.

   RESPONSIBILITIES:
   - Own ALL visual styling for this component
   - Style hero section, form, table, alerts, and actions
   - Provide enterprise-grade pricing editor visuals
   - Remove dependency on external scoped CSS
   - Ensure responsive operational layout consistency

   IMPORTANT NOTES:
   - This file is fully self-owned
   - No reliance on other component CSS
   - Optimized for Operations pricing workflows
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.vx-tpse[b-w0p6t5ovqi] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

    /* =========================================================
   SECTION CARD
   ========================================================= */

    .vx-tpse.vx-pricing-section[b-w0p6t5ovqi] {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 20px;
        padding: 1.25rem;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    }

/* =========================================================
   HERO
   ========================================================= */

.vx-tpse__hero[b-w0p6t5ovqi] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #dbeafe;
}

.vx-tpse__hero-left[b-w0p6t5ovqi] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
    flex: 1;
}

.vx-tpse__hero-icon[b-w0p6t5ovqi] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.85);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
}

    .vx-tpse__hero-icon svg[b-w0p6t5ovqi] {
        width: 30px;
        height: 30px;
    }

.vx-tpse__hero-content[b-w0p6t5ovqi] {
    min-width: 0;
}

.vx-tpse__eyebrow[b-w0p6t5ovqi] {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.75rem;
    margin-bottom: 0.7rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-tpse__title[b-w0p6t5ovqi] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
}

.vx-tpse__description[b-w0p6t5ovqi] {
    margin: 0.7rem 0 0;
    max-width: 42rem;
    color: #64748b;
    line-height: 1.7;
    font-size: 0.95rem;
}

.vx-tpse__hero-right[b-w0p6t5ovqi] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.vx-tpse__stat[b-w0p6t5ovqi] {
    min-width: 135px;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
}

.vx-tpse__stat-label[b-w0p6t5ovqi] {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-tpse__stat-value[b-w0p6t5ovqi] {
    font-size: 1.15rem;
    font-weight: 900;
    color: #0f172a;
}

/* =========================================================
   HEADERS
   ========================================================= */

.vx-tpse .vx-pricing-section__header[b-w0p6t5ovqi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

    .vx-tpse .vx-pricing-section__header h4[b-w0p6t5ovqi] {
        margin: 0;
        font-size: 1.08rem;
        font-weight: 800;
        color: #0f172a;
    }

.vx-tpse__section-badge[b-w0p6t5ovqi] {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.7rem;
    margin-bottom: 0.6rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vx-tpse__section-description[b-w0p6t5ovqi] {
    margin: 0.5rem 0 0;
    color: #64748b;
    line-height: 1.65;
    font-size: 0.93rem;
}

/* =========================================================
   ALERTS
   ========================================================= */

.vx-tpse .vx-alert[b-w0p6t5ovqi] {
    padding: 0.9rem 1rem;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.55;
}

.vx-tpse .vx-alert--error[b-w0p6t5ovqi] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.vx-tpse .vx-alert--success[b-w0p6t5ovqi] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

/* =========================================================
   FORM GRID
   ========================================================= */

.vx-tpse .vx-form-grid[b-w0p6t5ovqi] {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 1rem;
}

.vx-tpse .vx-field[b-w0p6t5ovqi] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.vx-tpse .vx-field__label[b-w0p6t5ovqi] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #334155;
}

.vx-tpse .vx-field__input[b-w0p6t5ovqi] {
    width: 100%;
    min-height: 46px;
    padding: 0.72rem 0.85rem;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.92rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

    .vx-tpse .vx-field__input:focus[b-w0p6t5ovqi] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

    .vx-tpse .vx-field__input:disabled[b-w0p6t5ovqi] {
        background: #f8fafc;
        color: #64748b;
    }

.vx-tpse .vx-field--checkbox[b-w0p6t5ovqi] {
    justify-content: flex-end;
}

.vx-tpse .vx-checkbox[b-w0p6t5ovqi] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 46px;
    font-weight: 600;
    color: #334155;
}

/* =========================================================
   HELP TEXT
   ========================================================= */

.vx-tpse .vx-tier-pricing-form__help[b-w0p6t5ovqi] {
    margin: 0.45rem 0 0;
    color: #64748b;
    line-height: 1.6;
    font-size: 0.9rem;
}

/* =========================================================
   TABLE
   ========================================================= */

.vx-tpse .vx-table-wrap[b-w0p6t5ovqi] {
    overflow-x: auto;
}

.vx-tpse .vx-table[b-w0p6t5ovqi] {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    table-layout: fixed;
}

    .vx-tpse .vx-table th[b-w0p6t5ovqi],
    .vx-tpse .vx-table td[b-w0p6t5ovqi] {
        text-align: left;
        vertical-align: middle;
    }

    .vx-tpse .vx-table th[b-w0p6t5ovqi] {
        padding: 0.85rem 0.65rem;
        border-bottom: 1px solid #e5e7eb;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #64748b;
        background: #f8fafc;
    }

    .vx-tpse .vx-table td[b-w0p6t5ovqi] {
        padding: 0.7rem 0.65rem;
        border-bottom: 1px solid #eef2f7;
    }

    .vx-tpse .vx-table tbody tr[b-w0p6t5ovqi] {
        transition: background 0.18s ease, transform 0.18s ease;
    }

        .vx-tpse .vx-table tbody tr:hover[b-w0p6t5ovqi] {
            background: rgba(248, 250, 252, 0.9);
        }

.vx-tpse .vx-table__actions[b-w0p6t5ovqi] {
    width: 120px;
    white-space: nowrap;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.vx-tpse .vx-empty-state[b-w0p6t5ovqi] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: 1.5rem;
    border-radius: 14px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    text-align: center;
}

    .vx-tpse .vx-empty-state p[b-w0p6t5ovqi] {
        margin: 0;
        color: #64748b;
        line-height: 1.6;
    }

/* =========================================================
   BUTTONS
   ========================================================= */

.vx-tpse .vx-btn[b-w0p6t5ovqi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: none;
    border-radius: 12px;
    padding: 0.68rem 1rem;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.14s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

    .vx-tpse .vx-btn:hover:not(:disabled)[b-w0p6t5ovqi] {
        transform: translateY(-1px);
    }

    .vx-tpse .vx-btn:disabled[b-w0p6t5ovqi] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.vx-tpse .vx-btn--primary[b-w0p6t5ovqi] {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

.vx-tpse .vx-btn--secondary[b-w0p6t5ovqi] {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
}

.vx-tpse .vx-btn--danger[b-w0p6t5ovqi] {
    background: #ef4444;
    color: #ffffff;
}

.vx-tpse .vx-btn--sm[b-w0p6t5ovqi] {
    min-height: 38px;
    padding: 0.52rem 0.75rem;
    border-radius: 10px;
    font-size: 0.8rem;
}

/* =========================================================
   ACTIONS
   ========================================================= */

.vx-tpse .vx-form-actions[b-w0p6t5ovqi] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.vx-tpse .vx-form-actions--inline[b-w0p6t5ovqi] {
    justify-content: flex-start;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 992px) {

    .vx-tpse__hero[b-w0p6t5ovqi] {
        flex-direction: column;
    }

    .vx-tpse__hero-right[b-w0p6t5ovqi] {
        width: 100%;
    }

    .vx-tpse__stat[b-w0p6t5ovqi] {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 768px) {

    .vx-tpse.vx-pricing-section[b-w0p6t5ovqi] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-tpse .vx-form-grid[b-w0p6t5ovqi] {
        grid-template-columns: 1fr;
    }

    .vx-tpse .vx-form-actions[b-w0p6t5ovqi] {
        flex-direction: column;
    }

    .vx-tpse .vx-btn[b-w0p6t5ovqi] {
        width: 100%;
    }

    .vx-tpse .vx-pricing-section__header[b-w0p6t5ovqi] {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-tpse .vx-table[b-w0p6t5ovqi] {
        min-width: 860px;
    }

    .vx-tpse__hero-left[b-w0p6t5ovqi] {
        flex-direction: column;
    }

    .vx-tpse__hero-icon[b-w0p6t5ovqi] {
        width: 58px;
        height: 58px;
    }

    .vx-tpse__title[b-w0p6t5ovqi] {
        font-size: 1.25rem;
    }

    .vx-tpse__description[b-w0p6t5ovqi] {
        font-size: 0.92rem;
    }
}
/* /Components/Pages/OperationControl/Settings/Pricing/Parts/TierPricingSetupForm.razor.rz.scp.css */
/* =========================================================
   FILE: TierPricingSetupForm.razor.css

   PURPOSE:
   Fully self-contained styling for Tier Pricing Setup form.

   RESPONSIBILITIES:
   - Own ALL visual styling for this component
   - Render enterprise-grade pricing configuration UX
   - Style hero, cards, tables, forms, actions, and states
   - Preserve responsive operational usability
   - Avoid scoped CSS dependency conflicts

   IMPORTANT NOTES:
   - This component is fully self-styled
   - No reliance on external scoped CSS files
   - Designed for operational pricing workflows
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.vx-tpsf[b-vmvrjhrrtd] {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    width: 100%;
}

/* =========================================================
   HERO
   ========================================================= */

.vx-tpsf__hero[b-vmvrjhrrtd] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.4rem;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #dbeafe;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.vx-tpsf__hero-left[b-vmvrjhrrtd] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.vx-tpsf__hero-icon[b-vmvrjhrrtd] {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.8);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.14);
}

    .vx-tpsf__hero-icon svg[b-vmvrjhrrtd] {
        width: 30px;
        height: 30px;
    }

.vx-tpsf__hero-content[b-vmvrjhrrtd] {
    min-width: 0;
}

.vx-tpsf__eyebrow[b-vmvrjhrrtd] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.7rem;
    padding: 0.4rem 0.78rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-tpsf__title[b-vmvrjhrrtd] {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.2;
    color: #0f172a;
}

.vx-tpsf__description[b-vmvrjhrrtd] {
    margin: 0.75rem 0 0;
    max-width: 44rem;
    color: #475569;
    line-height: 1.7;
}

.vx-tpsf__hero-right[b-vmvrjhrrtd] {
    display: flex;
    align-items: stretch;
    gap: 0.85rem;
}

.vx-tpsf__stat[b-vmvrjhrrtd] {
    min-width: 145px;
    padding: 1rem;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.vx-tpsf__stat-label[b-vmvrjhrrtd] {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-tpsf__stat-value[b-vmvrjhrrtd] {
    font-size: 1.15rem;
    font-weight: 900;
    color: #0f172a;
}

/* =========================================================
   ALERTS
   ========================================================= */

.vx-tpsf .vx-alert[b-vmvrjhrrtd] {
    padding: 0.9rem 1rem;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.6;
}

.vx-tpsf .vx-alert--error[b-vmvrjhrrtd] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.vx-tpsf .vx-alert--success[b-vmvrjhrrtd] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

/* =========================================================
   SECTION CARDS
   ========================================================= */

.vx-tpsf .vx-pricing-section[b-vmvrjhrrtd] {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
    padding: 1.15rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.vx-tpsf .vx-pricing-section__header[b-vmvrjhrrtd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

    .vx-tpsf .vx-pricing-section__header h4[b-vmvrjhrrtd] {
        margin: 0;
        font-size: 1.08rem;
        font-weight: 800;
        color: #0f172a;
    }

.vx-tpsf__section-badge[b-vmvrjhrrtd] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.6rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vx-tpsf__section-description[b-vmvrjhrrtd] {
    margin: 0.45rem 0 0;
    max-width: 40rem;
    color: #64748b;
    line-height: 1.6;
}

/* =========================================================
   FORM GRID
   ========================================================= */

.vx-tpsf .vx-form-grid[b-vmvrjhrrtd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 1rem;
}

.vx-tpsf .vx-field[b-vmvrjhrrtd] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.vx-tpsf .vx-field__label[b-vmvrjhrrtd] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.vx-tpsf .vx-field__input[b-vmvrjhrrtd] {
    width: 100%;
    min-height: 46px;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.92rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .vx-tpsf .vx-field__input:focus[b-vmvrjhrrtd] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

    .vx-tpsf .vx-field__input:disabled[b-vmvrjhrrtd] {
        background: #f8fafc;
        cursor: not-allowed;
    }

.vx-tpsf .vx-field--checkbox[b-vmvrjhrrtd] {
    justify-content: flex-end;
}

.vx-tpsf .vx-checkbox[b-vmvrjhrrtd] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 46px;
}

    .vx-tpsf .vx-checkbox span[b-vmvrjhrrtd] {
        font-size: 0.92rem;
        font-weight: 600;
        color: #0f172a;
    }

/* =========================================================
   HELP TEXT
   ========================================================= */

.vx-tier-pricing-form__help[b-vmvrjhrrtd] {
    margin: 0.45rem 0 0;
    color: #64748b;
    line-height: 1.6;
}

/* =========================================================
   TABLE
   ========================================================= */

.vx-tpsf .vx-table-wrap[b-vmvrjhrrtd] {
    overflow-x: auto;
}

.vx-tpsf .vx-table[b-vmvrjhrrtd] {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
}

    .vx-tpsf .vx-table th[b-vmvrjhrrtd] {
        padding: 0.85rem 0.7rem;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        text-align: left;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #64748b;
    }

    .vx-tpsf .vx-table td[b-vmvrjhrrtd] {
        padding: 0.7rem;
        border-bottom: 1px solid #eef2f7;
        vertical-align: middle;
    }

    .vx-tpsf .vx-table tbody tr[b-vmvrjhrrtd] {
        transition: background 0.16s ease, transform 0.16s ease;
    }

        .vx-tpsf .vx-table tbody tr:hover[b-vmvrjhrrtd] {
            background: rgba(248, 250, 252, 0.75);
        }

.vx-tpsf .vx-tier-pricing-form__table .vx-field__input[b-vmvrjhrrtd] {
    min-height: 42px;
    padding: 0.6rem 0.7rem;
}

.vx-tpsf .vx-table__actions[b-vmvrjhrrtd] {
    width: 120px;
    white-space: nowrap;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.vx-tpsf .vx-empty-state[b-vmvrjhrrtd] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    border-radius: 16px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    text-align: center;
    color: #64748b;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.vx-tpsf .vx-btn[b-vmvrjhrrtd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.72rem 1rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    transition: transform 0.14s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

    .vx-tpsf .vx-btn:hover:not(:disabled)[b-vmvrjhrrtd] {
        transform: translateY(-1px);
    }

    .vx-tpsf .vx-btn:disabled[b-vmvrjhrrtd] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.vx-tpsf .vx-btn--primary[b-vmvrjhrrtd] {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.vx-tpsf .vx-btn--secondary[b-vmvrjhrrtd] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
}

.vx-tpsf .vx-btn--sm[b-vmvrjhrrtd] {
    min-height: 38px;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    font-size: 0.82rem;
}

.vx-tpsf .vx-tier-pricing-form__remove-btn[b-vmvrjhrrtd] {
    width: 100%;
}

/* =========================================================
   ACTIONS
   ========================================================= */

.vx-tpsf .vx-form-actions[b-vmvrjhrrtd] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.4rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 992px) {

    .vx-tpsf__hero[b-vmvrjhrrtd] {
        flex-direction: column;
    }

    .vx-tpsf__hero-right[b-vmvrjhrrtd] {
        width: 100%;
    }

    .vx-tpsf__stat[b-vmvrjhrrtd] {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 768px) {

    .vx-tpsf .vx-form-grid[b-vmvrjhrrtd] {
        grid-template-columns: 1fr;
    }

    .vx-tpsf .vx-form-actions[b-vmvrjhrrtd] {
        flex-direction: column;
    }

    .vx-tpsf .vx-btn[b-vmvrjhrrtd] {
        width: 100%;
    }

    .vx-tpsf .vx-pricing-section__header[b-vmvrjhrrtd] {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-tpsf__title[b-vmvrjhrrtd] {
        font-size: 1.3rem;
    }
}
/* /Components/Pages/OperationControl/Settings/Pricing/Parts/TierPricingSetupList.razor.rz.scp.css */
/* =========================================================
   FILE: TierPricingSetupList.razor.css

   PURPOSE:
   Fully self-contained styling for Tier Pricing Setup list.

   RESPONSIBILITIES:
   - Own ALL visual styling for this component
   - Style outer panel, inner section, table, alerts, badges,
     states, and buttons
   - Keep the list aligned with the pricing workspace language
   - Avoid dependency on other components' scoped CSS

   IMPORTANT NOTES:
   - This file is fully self-owned
   - No reliance on external scoped CSS
   ========================================================= */

/* =========================================================
   ROOT PANEL
   ========================================================= */

.vx-tpsl[b-ke16p6l6x8] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =========================================================
   HERO
   ========================================================= */

.vx-tpsl__hero[b-ke16p6l6x8] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.vx-tpsl__hero-icon[b-ke16p6l6x8] {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.8);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

    .vx-tpsl__hero-icon svg[b-ke16p6l6x8] {
        width: 28px;
        height: 28px;
    }

.vx-tpsl__hero-content[b-ke16p6l6x8] {
    min-width: 0;
}

.vx-tpsl__eyebrow[b-ke16p6l6x8] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-tpsl__header-actions[b-ke16p6l6x8] {
    display: flex;
    align-items: center;
}

.vx-tpsl__section-subtitle[b-ke16p6l6x8] {
    margin: 0.32rem 0 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #64748b;
}

/* =========================================================
   PANEL HEADER
   ========================================================= */

.vx-tpsl .vx-pricing-panel__header[b-ke16p6l6x8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.vx-tpsl .vx-pricing-panel__title[b-ke16p6l6x8] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-tpsl .vx-pricing-panel__subtitle[b-ke16p6l6x8] {
    margin: 0.35rem 0 0;
    color: #475569;
    line-height: 1.6;
}

.vx-tpsl .vx-pricing-panel__body[b-ke16p6l6x8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =========================================================
   STATS
   ========================================================= */

.vx-tpsl__stats[b-ke16p6l6x8] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.vx-tpsl__stat[b-ke16p6l6x8] {
    min-width: 120px;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
}

.vx-tpsl__stat-label[b-ke16p6l6x8] {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-tpsl__stat-value[b-ke16p6l6x8] {
    font-size: 1.2rem;
    font-weight: 900;
    color: #0f172a;
}

/* =========================================================
   INNER SECTION
   ========================================================= */

.vx-tpsl .vx-pricing-section[b-ke16p6l6x8] {
    border: 1px solid #eef2f7;
    border-radius: 16px;
    background: #fbfdff;
    padding: 1rem;
}

.vx-tpsl .vx-pricing-section__header[b-ke16p6l6x8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

    .vx-tpsl .vx-pricing-section__header h4[b-ke16p6l6x8] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 800;
        color: #0f172a;
    }

/* =========================================================
   ALERTS
   ========================================================= */

.vx-tpsl .vx-alert[b-ke16p6l6x8] {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 1rem;
}

.vx-tpsl .vx-alert--error[b-ke16p6l6x8] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.vx-tpsl .vx-alert--success[b-ke16p6l6x8] {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}

/* =========================================================
   STATE / EMPTY
   ========================================================= */

.vx-tpsl .vx-pricing-panel__state[b-ke16p6l6x8] {
    padding: 1rem 1.1rem;
    border-radius: 14px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #475569;
}

    .vx-tpsl .vx-pricing-panel__state p[b-ke16p6l6x8] {
        margin: 0;
    }

.vx-tpsl .vx-empty-state[b-ke16p6l6x8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-radius: 14px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
}

.vx-empty-state__icon[b-ke16p6l6x8] {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: 22px;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.8);
    color: #2563eb;
}

    .vx-empty-state__icon svg[b-ke16p6l6x8] {
        width: 34px;
        height: 34px;
    }

.vx-empty-state__title[b-ke16p6l6x8] {
    margin: 0 0 0.65rem;
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-empty-state__text[b-ke16p6l6x8] {
    margin: 0;
    max-width: 30rem;
    line-height: 1.7;
    color: #64748b;
}

/* =========================================================
   TABLE
   ========================================================= */

.vx-tpsl .vx-table-wrap[b-ke16p6l6x8] {
    overflow-x: auto;
}

.vx-tpsl .vx-table[b-ke16p6l6x8] {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    table-layout: fixed;
}

    .vx-tpsl .vx-table th[b-ke16p6l6x8],
    .vx-tpsl .vx-table td[b-ke16p6l6x8] {
        padding: 0.75rem 0.5rem;
        text-align: left;
        vertical-align: middle;
        border-bottom: 1px solid #e5e7eb;
    }

    .vx-tpsl .vx-table th[b-ke16p6l6x8] {
        background: #f8fafc;
        font-size: 0.84rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #475569;
    }

    .vx-tpsl .vx-table td[b-ke16p6l6x8] {
        font-size: 0.94rem;
        color: #0f172a;
    }

    .vx-tpsl .vx-table tbody tr[b-ke16p6l6x8] {
        transition: background 0.18s ease, transform 0.18s ease;
    }

        .vx-tpsl .vx-table tbody tr:hover[b-ke16p6l6x8] {
            background: rgba(248, 250, 252, 0.9);
        }

    .vx-tpsl .vx-table th:nth-child(1)[b-ke16p6l6x8],
    .vx-tpsl .vx-table td:nth-child(1)[b-ke16p6l6x8] {
        width: 14%;
    }

    .vx-tpsl .vx-table th:nth-child(2)[b-ke16p6l6x8],
    .vx-tpsl .vx-table td:nth-child(2)[b-ke16p6l6x8] {
        width: 18%;
    }

    .vx-tpsl .vx-table th:nth-child(3)[b-ke16p6l6x8],
    .vx-tpsl .vx-table td:nth-child(3)[b-ke16p6l6x8] {
        width: 18%;
    }

    .vx-tpsl .vx-table th:nth-child(4)[b-ke16p6l6x8],
    .vx-tpsl .vx-table td:nth-child(4)[b-ke16p6l6x8] {
        width: 10%;
    }

    .vx-tpsl .vx-table th:nth-child(5)[b-ke16p6l6x8],
    .vx-tpsl .vx-table td:nth-child(5)[b-ke16p6l6x8] {
        width: 8%;
    }

    .vx-tpsl .vx-table th:nth-child(6)[b-ke16p6l6x8],
    .vx-tpsl .vx-table td:nth-child(6)[b-ke16p6l6x8] {
        width: 12%;
    }

    .vx-tpsl .vx-table th:nth-child(7)[b-ke16p6l6x8],
    .vx-tpsl .vx-table td:nth-child(7)[b-ke16p6l6x8] {
        width: 110px;
    }

.vx-tpsl .vx-table__actions[b-ke16p6l6x8] {
    width: 110px;
    white-space: nowrap;
}

/* =========================================================
   TABLE ENHANCEMENTS
   ========================================================= */

.vx-tpsl__scope[b-ke16p6l6x8] {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.7rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.76rem;
    font-weight: 800;
}

.vx-tpsl__destination[b-ke16p6l6x8] {
    font-weight: 600;
    color: #0f172a;
}

.vx-tpsl__pricing-name[b-ke16p6l6x8] {
    font-weight: 700;
    color: #0f172a;
}

.vx-tpsl__currency[b-ke16p6l6x8] {
    font-weight: 700;
    color: #0f172a;
}

.vx-tpsl__tier-count[b-ke16p6l6x8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 800;
}

/* =========================================================
   BADGES
   ========================================================= */

.vx-tpsl .vx-badge[b-ke16p6l6x8] {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.vx-tpsl .vx-badge--success[b-ke16p6l6x8] {
    background: #dcfce7;
    color: #166534;
}

.vx-tpsl .vx-badge--muted[b-ke16p6l6x8] {
    background: #e2e8f0;
    color: #475569;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.vx-tpsl .vx-btn[b-ke16p6l6x8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.72rem 1rem;
    border: none;
    border-radius: 12px;
    box-sizing: border-box;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

    .vx-tpsl .vx-btn:hover:not(:disabled)[b-ke16p6l6x8] {
        transform: translateY(-1px);
    }

    .vx-tpsl .vx-btn:disabled[b-ke16p6l6x8] {
        opacity: 0.65;
        cursor: not-allowed;
    }

.vx-tpsl .vx-btn--primary[b-ke16p6l6x8] {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

.vx-tpsl .vx-btn--secondary[b-ke16p6l6x8] {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
}

.vx-tpsl .vx-btn--sm[b-ke16p6l6x8] {
    min-height: 38px;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    font-size: 0.84rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .vx-tpsl[b-ke16p6l6x8] {
        padding: 1rem;
        border-radius: 16px;
    }

        .vx-tpsl .vx-pricing-panel__header[b-ke16p6l6x8] {
            align-items: stretch;
        }

        .vx-tpsl .vx-pricing-panel__title[b-ke16p6l6x8] {
            font-size: 1.2rem;
        }

        .vx-tpsl .vx-pricing-panel__subtitle[b-ke16p6l6x8] {
            font-size: 0.94rem;
        }

        .vx-tpsl .vx-pricing-panel__header .vx-btn[b-ke16p6l6x8] {
            width: 100%;
        }

        .vx-tpsl .vx-table[b-ke16p6l6x8] {
            min-width: 760px;
        }

    .vx-tpsl__hero[b-ke16p6l6x8] {
        flex-direction: column;
    }

    .vx-tpsl__stats[b-ke16p6l6x8] {
        width: 100%;
    }

    .vx-tpsl__stat[b-ke16p6l6x8] {
        flex: 1;
        min-width: 0;
    }

    .vx-tpsl .vx-pricing-section__header[b-ke16p6l6x8] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/OperationControl/Settings/Pricing/PriceSetupWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: PriceSetupWorkspace.razor.css

   PURPOSE:
   Scoped styles for the Pricing workspace host.

   RESPONSIBILITIES:
   - Style the pricing workspace shell
   - Render enterprise-grade hero experience
   - Define spacing rhythm and layout hierarchy
   - Support responsive pricing configuration UX
   - Keep visual separation between pricing sections

   IMPORTANT NOTES:
   - Child component internals remain styled inside their
     own scoped CSS files
   - This file styles ONLY the routed workspace shell
   - No child component structural assumptions are made
   ========================================================= */

/* =========================================================
   WORKSPACE ROOT
   ========================================================= */

.vx-pricing-workspace[b-ni8ogqd131] {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    position: relative;
}

/* =========================================================
   HERO SECTION
   ========================================================= */

.vx-pricing-hero[b-ni8ogqd131] {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.14), transparent 28%), radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.10), transparent 26%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* =========================================================
   HERO BACKGROUND
   ========================================================= */

.vx-pricing-hero__background[b-ni8ogqd131] {
    position: absolute;
    inset: 0;
    background: linear-gradient( 135deg, rgba(37, 99, 235, 0.04) 0%, transparent 30%), linear-gradient( 315deg, rgba(59, 130, 246, 0.03) 0%, transparent 30%);
    pointer-events: none;
}

/* =========================================================
   HERO CONTENT
   ========================================================= */

.vx-pricing-hero__content[b-ni8ogqd131] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.5rem;
}

/* =========================================================
   HERO IDENTITY
   ========================================================= */

.vx-pricing-hero__identity[b-ni8ogqd131] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    flex: 1;
    min-width: 0;
}

/* =========================================================
   HERO ICON
   ========================================================= */

.vx-pricing-hero__icon[b-ni8ogqd131] {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.7);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

    .vx-pricing-hero__icon svg[b-ni8ogqd131] {
        width: 34px;
        height: 34px;
    }

/* =========================================================
   HERO TEXT
   ========================================================= */

.vx-pricing-hero__text[b-ni8ogqd131] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.vx-pricing-hero__eyebrow[b-ni8ogqd131] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vx-pricing-hero__title[b-ni8ogqd131] {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: 900;
    color: #0f172a;
}

.vx-pricing-hero__description[b-ni8ogqd131] {
    margin: 0;
    max-width: 54rem;
    font-size: 1.02rem;
    line-height: 1.8;
    color: #475569;
}

/* =========================================================
   HERO META
   ========================================================= */

.vx-pricing-hero__meta[b-ni8ogqd131] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 240px;
    flex-shrink: 0;
}

/* =========================================================
   META CARD
   ========================================================= */

.vx-pricing-meta-card[b-ni8ogqd131] {
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.vx-pricing-meta-card__label[b-ni8ogqd131] {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-pricing-meta-card__value[b-ni8ogqd131] {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

/* =========================================================
   WORKSPACE BODY
   ========================================================= */

.vx-pricing-workspace__body[b-ni8ogqd131] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .vx-pricing-hero__content[b-ni8ogqd131] {
        flex-direction: column;
    }

    .vx-pricing-hero__meta[b-ni8ogqd131] {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {

    .vx-pricing-workspace[b-ni8ogqd131] {
        gap: 1.25rem;
    }

    .vx-pricing-hero[b-ni8ogqd131] {
        border-radius: 22px;
    }

    .vx-pricing-hero__content[b-ni8ogqd131] {
        padding: 1.4rem;
        gap: 1.5rem;
    }

    .vx-pricing-hero__identity[b-ni8ogqd131] {
        flex-direction: column;
        gap: 1rem;
    }

    .vx-pricing-hero__icon[b-ni8ogqd131] {
        width: 62px;
        height: 62px;
        border-radius: 18px;
    }

    .vx-pricing-hero__title[b-ni8ogqd131] {
        font-size: 2rem;
    }

    .vx-pricing-hero__description[b-ni8ogqd131] {
        font-size: 0.96rem;
        line-height: 1.7;
    }

    .vx-pricing-hero__meta[b-ni8ogqd131] {
        grid-template-columns: 1fr;
    }

    .vx-pricing-workspace__body[b-ni8ogqd131] {
        gap: 1rem;
    }
}
/* /Components/Pages/OperationControl/Settings/ShippingServices/Parts/ShippingServiceSetupEditor.razor.rz.scp.css */
/* =========================================================
   FILE: ShippingServiceSetupEditor.razor.css

   PURPOSE:
   Styles for the Shipping Service Setup editor component.

   RESPONSIBILITIES:
   - Style the editor card and form layout
   - Style input fields and actions
   - Keep the editor aligned with the Operations UI system
   ========================================================= */

.vx-shipping-service-editor[b-4f5j1wedb6] {
    width: 100%;
}

.vx-shipping-service-editor__card[b-4f5j1wedb6] {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.vx-shipping-service-editor__header[b-4f5j1wedb6] {
    padding: 1.1rem 1.25rem 1rem 1.25rem;
    border-bottom: 1px solid #edf2f7;
}

    .vx-shipping-service-editor__header h3[b-4f5j1wedb6] {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: #0f172a;
    }

    .vx-shipping-service-editor__header p[b-4f5j1wedb6] {
        margin: 0.35rem 0 0 0;
        font-size: 0.92rem;
        color: #64748b;
    }

.vx-shipping-service-editor__body[b-4f5j1wedb6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

.vx-shipping-service-editor__alert[b-4f5j1wedb6] {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 0.92rem;
}

.vx-shipping-service-editor__grid[b-4f5j1wedb6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 1rem;
}

.vx-shipping-service-editor__field[b-4f5j1wedb6] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.vx-shipping-service-editor__field--full[b-4f5j1wedb6] {
    grid-column: 1 / -1;
}

.vx-shipping-service-editor__field--checkbox[b-4f5j1wedb6] {
    justify-content: center;
}

.vx-shipping-service-editor__field label[b-4f5j1wedb6] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
}

.vx-shipping-service-editor__input[b-4f5j1wedb6] {
    width: 100%;
    height: 44px;
    padding: 0 0.9rem;
    font-size: 0.94rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .vx-shipping-service-editor__input:focus[b-4f5j1wedb6] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    }

    .vx-shipping-service-editor__input[readonly][b-4f5j1wedb6] {
        background: #f8fafc;
        color: #475569;
    }

.vx-shipping-service-editor__checkbox-label[b-4f5j1wedb6] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    font-size: 0.94rem;
    color: #0f172a;
}

.vx-shipping-service-editor__footer[b-4f5j1wedb6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.25rem 1.25rem;
    border-top: 1px solid #edf2f7;
}

.vx-shipping-service-editor__button[b-4f5j1wedb6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    height: 42px;
    padding: 0 1rem;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.vx-shipping-service-editor__button--secondary[b-4f5j1wedb6] {
    color: #334155;
    background: #f8fafc;
    border: 1px solid #d6e0ea;
}

    .vx-shipping-service-editor__button--secondary:hover[b-4f5j1wedb6] {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

.vx-shipping-service-editor__button--primary[b-4f5j1wedb6] {
    color: #ffffff;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.22);
}

    .vx-shipping-service-editor__button--primary:hover:not(:disabled)[b-4f5j1wedb6] {
        transform: translateY(-1px);
        box-shadow: 0 14px 22px rgba(37, 99, 235, 0.25);
    }

    .vx-shipping-service-editor__button--primary:disabled[b-4f5j1wedb6] {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none;
    }

@media (max-width: 768px) {
    .vx-shipping-service-editor__grid[b-4f5j1wedb6] {
        grid-template-columns: 1fr;
    }

    .vx-shipping-service-editor__footer[b-4f5j1wedb6] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .vx-shipping-service-editor__button[b-4f5j1wedb6] {
        width: 100%;
    }
}
/* /Components/Pages/OperationControl/Settings/ShippingServices/Parts/ShippingServiceSetupList.razor.rz.scp.css */
/* =========================================================
   FILE: ShippingServiceSetupList.razor.css

   PURPOSE:
   Styles for the Shipping Service Setup list component.

   RESPONSIBILITIES:
   - Style the service setup list card
   - Style the table layout
   - Style status pills and edit action
   - Keep the component aligned with the Operations UI system
   ========================================================= */

.vx-shipping-service-list[b-kxf9nbcb4w] {
    width: 100%;
}

.vx-shipping-service-list__card[b-kxf9nbcb4w] {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.vx-shipping-service-list__header[b-kxf9nbcb4w] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem 1rem 1.25rem;
    border-bottom: 1px solid #edf2f7;
}

    .vx-shipping-service-list__header h3[b-kxf9nbcb4w] {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: #0f172a;
    }

    .vx-shipping-service-list__header p[b-kxf9nbcb4w] {
        margin: 0.35rem 0 0 0;
        font-size: 0.92rem;
        color: #64748b;
    }

.vx-shipping-service-list__table-wrap[b-kxf9nbcb4w] {
    width: 100%;
    overflow-x: auto;
}

.vx-shipping-service-list__table[b-kxf9nbcb4w] {
    width: 100%;
    border-collapse: collapse;
    min-width: 920px;
}

    .vx-shipping-service-list__table thead th[b-kxf9nbcb4w] {
        padding: 0.95rem 1rem;
        text-align: left;
        font-size: 0.84rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: #64748b;
        background: #f8fafc;
        border-bottom: 1px solid #e5edf5;
        white-space: nowrap;
    }

    .vx-shipping-service-list__table tbody td[b-kxf9nbcb4w] {
        padding: 1rem;
        font-size: 0.94rem;
        color: #0f172a;
        border-bottom: 1px solid #edf2f7;
        vertical-align: middle;
    }

    .vx-shipping-service-list__table tbody tr:last-child td[b-kxf9nbcb4w] {
        border-bottom: none;
    }

    .vx-shipping-service-list__table tbody tr:hover[b-kxf9nbcb4w] {
        background: #fbfdff;
    }

.vx-shipping-service-list__code[b-kxf9nbcb4w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 32px;
    padding: 0 0.7rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
}

.vx-shipping-service-list__status[b-kxf9nbcb4w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    height: 32px;
    padding: 0 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
}

.vx-shipping-service-list__status--active[b-kxf9nbcb4w] {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.vx-shipping-service-list__status--inactive[b-kxf9nbcb4w] {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.vx-shipping-service-list__actions-col[b-kxf9nbcb4w] {
    width: 110px;
    text-align: right;
}

.vx-shipping-service-list__edit-button[b-kxf9nbcb4w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 36px;
    padding: 0 0.95rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.16s ease, border-color 0.16s ease;
}

    .vx-shipping-service-list__edit-button:hover[b-kxf9nbcb4w] {
        background: #dbeafe;
        border-color: #93c5fd;
        transform: translateY(-1px);
    }

@media (max-width: 768px) {
    .vx-shipping-service-list__header[b-kxf9nbcb4w] {
        padding: 1rem;
    }
}
/* /Components/Pages/OperationControl/Settings/ShippingServices/ShippingServicesWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: ShippingServicesWorkspace.razor.css

   PURPOSE:
   Styles for Shipping Services settings workspace.

   RESPONSIBILITIES:
   - Layout workspace structure
   - Style header and states
   ========================================================= */

.vx-shipping-services[b-38i5w13y7s] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* =========================================================
   HEADER
   ========================================================= */

.vx-shipping-services__header h2[b-38i5w13y7s] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.vx-shipping-services__header p[b-38i5w13y7s] {
    margin: 0.35rem 0 0 0;
    font-size: 0.95rem;
    color: #64748b;
}

/* =========================================================
   STATES
   ========================================================= */

.vx-shipping-services__state[b-38i5w13y7s] {
    padding: 1.25rem;
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.95rem;
}

.vx-shipping-services__state--error[b-38i5w13y7s] {
    background: #fee2e2;
    color: #991b1b;
}
/* /Components/Pages/OperationControl/Shipments/CustomerShipments/Parts/CreateShipment.razor.rz.scp.css */
/* =========================================================
   FILE: CreateShipment.razor.css

   PURPOSE:
   Scoped styles for the inline CreateShipment component
   rendered under CustomerPanel in the shipment workspace.

   RESPONSIBILITIES:
   - Style the create shipment hero
   - Style route, recipient, insurance, consolidation, and notes sections
   - Style fields, labels, inputs, selects, textarea, and actions
   - Style insurance tier preview
   - Keep the component aligned with Operations.Web enterprise UI

   IMPORTANT NOTES:
   - This component is intentionally inline, not a page
   - This file contains no business logic
   - No inline styles should be used in the Razor file
   - Inputs follow the same visual language used across Operations.Web
   ========================================================= */

.vx-create-shipment[b-lo3l5z06iq] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    min-width: 0;
    margin-top: 1.25rem;
}

/* =========================================================
   HERO
   ========================================================= */

.vx-create-shipment__hero[b-lo3l5z06iq] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 20px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 42%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.vx-create-shipment__hero-left[b-lo3l5z06iq] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.vx-create-shipment__hero-icon[b-lo3l5z06iq] {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.85);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14);
}

    .vx-create-shipment__hero-icon svg[b-lo3l5z06iq] {
        width: 30px;
        height: 30px;
    }

.vx-create-shipment__eyebrow[b-lo3l5z06iq],
.vx-create-shipment__section-badge[b-lo3l5z06iq] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-create-shipment__title[b-lo3l5z06iq] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 900;
    color: #0f172a;
}

.vx-create-shipment__subtitle[b-lo3l5z06iq] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #475569;
    line-height: 1.65;
    font-size: 0.95rem;
}

.vx-create-shipment__hero-right[b-lo3l5z06iq] {
    display: flex;
    align-items: stretch;
    gap: 0.8rem;
}

.vx-create-shipment__stat[b-lo3l5z06iq] {
    min-width: 138px;
    padding: 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #dbe4f0;
}

.vx-create-shipment__stat-label[b-lo3l5z06iq] {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-create-shipment__stat-value[b-lo3l5z06iq] {
    font-size: 1.02rem;
    font-weight: 900;
    color: #0f172a;
    word-break: break-word;
}

/* =========================================================
   SECTION CARDS
   ========================================================= */

.vx-create-shipment__section[b-lo3l5z06iq],
.vx-create-shipment__state-card[b-lo3l5z06iq],
.vx-create-shipment__actions-section[b-lo3l5z06iq] {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    padding: 1.25rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.vx-create-shipment__section-header[b-lo3l5z06iq] {
    margin-bottom: 1rem;
}

.vx-create-shipment__section-title[b-lo3l5z06iq] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-create-shipment__section-description[b-lo3l5z06iq] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #64748b;
    line-height: 1.65;
    font-size: 0.93rem;
}

/* =========================================================
   GRID / FIELD SYSTEM
   ========================================================= */

.vx-create-shipment__grid[b-lo3l5z06iq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vx-create-shipment__field[b-lo3l5z06iq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.vx-create-shipment__field--full[b-lo3l5z06iq] {
    grid-column: 1 / -1;
}

.vx-create-shipment__label[b-lo3l5z06iq] {
    font-size: 0.78rem;
    font-weight: 850;
    color: #475569;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =========================================================
   INPUTS / SELECT / TEXTAREA
   ========================================================= */

.vx-create-shipment__input[b-lo3l5z06iq],
.vx-create-shipment__select[b-lo3l5z06iq],
.vx-create-shipment__textarea[b-lo3l5z06iq] {
    width: 100%;
    min-width: 0;
    font: inherit;
    font-size: 0.94rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.vx-create-shipment__input[b-lo3l5z06iq],
.vx-create-shipment__select[b-lo3l5z06iq] {
    height: 46px;
    padding: 0 0.9rem;
}

.vx-create-shipment__select[b-lo3l5z06iq] {
    cursor: pointer;
}

.vx-create-shipment__textarea[b-lo3l5z06iq] {
    min-height: 118px;
    padding: 0.85rem 0.9rem;
    resize: vertical;
    line-height: 1.5;
}

    .vx-create-shipment__input:focus[b-lo3l5z06iq],
    .vx-create-shipment__select:focus[b-lo3l5z06iq],
    .vx-create-shipment__textarea:focus[b-lo3l5z06iq] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    .vx-create-shipment__input:hover:not(:disabled)[b-lo3l5z06iq],
    .vx-create-shipment__select:hover:not(:disabled)[b-lo3l5z06iq],
    .vx-create-shipment__textarea:hover:not(:disabled)[b-lo3l5z06iq] {
        border-color: #94a3b8;
    }

    .vx-create-shipment__input:disabled[b-lo3l5z06iq],
    .vx-create-shipment__select:disabled[b-lo3l5z06iq],
    .vx-create-shipment__textarea:disabled[b-lo3l5z06iq] {
        color: #64748b;
        background: #f8fafc;
        border-color: #dbe5f0;
        cursor: not-allowed;
    }

    .vx-create-shipment__input[b-lo3l5z06iq]::placeholder,
    .vx-create-shipment__textarea[b-lo3l5z06iq]::placeholder {
        color: #94a3b8;
    }

/* =========================================================
   ALERT
   ========================================================= */

.vx-create-shipment .vx-alert[b-lo3l5z06iq] {
    margin: 0;
}

/* =========================================================
   INSURANCE TIER PREVIEW
   ========================================================= */

.vx-tier-preview[b-lo3l5z06iq] {
    display: grid;
    gap: 0.6rem;
    padding: 0.95rem;
    background: #f8fafc;
    border: 1px solid #e5edf5;
    border-radius: 14px;
}

.vx-tier-preview__row[b-lo3l5z06iq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #edf2f7;
    color: #334155;
    font-size: 0.92rem;
    font-weight: 700;
}

    .vx-tier-preview__row span:last-child[b-lo3l5z06iq] {
        color: #0f172a;
        font-weight: 850;
    }

/* =========================================================
   ACTIONS
   ========================================================= */

.vx-create-shipment__actions[b-lo3l5z06iq] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.vx-create-shipment__primary-button[b-lo3l5z06iq],
.vx-create-shipment__secondary-button[b-lo3l5z06iq] {
    font: inherit;
    border: none;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

.vx-create-shipment__primary-button[b-lo3l5z06iq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    height: 46px;
    padding: 0 1.35rem;
    font-size: 0.94rem;
    font-weight: 850;
    color: #ffffff;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
    white-space: nowrap;
}

    .vx-create-shipment__primary-button:hover:not(:disabled)[b-lo3l5z06iq] {
        transform: translateY(-1px);
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3);
    }

    .vx-create-shipment__primary-button:active:not(:disabled)[b-lo3l5z06iq] {
        transform: translateY(0);
        box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);
    }

.vx-create-shipment__secondary-button[b-lo3l5z06iq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 40px;
    padding: 0 1rem;
    font-size: 0.92rem;
    font-weight: 800;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #d6e0ea;
    border-radius: 10px;
}

    .vx-create-shipment__secondary-button:hover:not(:disabled)[b-lo3l5z06iq] {
        color: #0f172a;
        background: #f1f5f9;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

    .vx-create-shipment__primary-button:disabled[b-lo3l5z06iq],
    .vx-create-shipment__secondary-button:disabled[b-lo3l5z06iq] {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .vx-create-shipment__hero[b-lo3l5z06iq] {
        flex-direction: column;
    }

    .vx-create-shipment__hero-right[b-lo3l5z06iq] {
        width: 100%;
    }

    .vx-create-shipment__stat[b-lo3l5z06iq] {
        flex: 1;
        min-width: 0;
    }

    .vx-create-shipment__grid[b-lo3l5z06iq] {
        grid-template-columns: 1fr;
    }

    .vx-create-shipment__actions[b-lo3l5z06iq] {
        align-items: stretch;
        flex-direction: column;
    }

    .vx-create-shipment__primary-button[b-lo3l5z06iq],
    .vx-create-shipment__secondary-button[b-lo3l5z06iq] {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .vx-create-shipment[b-lo3l5z06iq] {
        gap: 1rem;
    }

    .vx-create-shipment__hero[b-lo3l5z06iq] {
        padding: 1rem;
        border-radius: 18px;
    }

    .vx-create-shipment__hero-left[b-lo3l5z06iq] {
        flex-direction: column;
    }

    .vx-create-shipment__hero-icon[b-lo3l5z06iq] {
        width: 56px;
        height: 56px;
    }

    .vx-create-shipment__title[b-lo3l5z06iq] {
        font-size: 1.22rem;
    }

    .vx-create-shipment__subtitle[b-lo3l5z06iq] {
        font-size: 0.91rem;
    }

    .vx-create-shipment__hero-right[b-lo3l5z06iq] {
        flex-direction: column;
    }

    .vx-create-shipment__section[b-lo3l5z06iq],
    .vx-create-shipment__state-card[b-lo3l5z06iq],
    .vx-create-shipment__actions-section[b-lo3l5z06iq] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-tier-preview__row[b-lo3l5z06iq] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }
}
/* /Components/Pages/OperationControl/Shipments/CustomerShipments/Parts/CustomerPanel.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerPanel.razor.css

   PURPOSE:
   Scoped styles for the CustomerPanel component used in
   Operations.Web workspaces.

   RESPONSIBILITIES:
   - Style the customer lookup hero
   - Render the two-card customer search and summary layout
   - Style customer search inputs and actions
   - Style empty and loaded customer summary states
   - Keep the component aligned with Operations.Web enterprise UI

   IMPORTANT NOTES:
   - This file contains no business logic
   - The layout keeps both cards visible at all times
   - The component remains UI-only
   - No inline styling should be used in the Razor file
   ========================================================= */

.vx-customer-panel[b-92124u9as2] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    min-width: 0;
}

/* =========================================================
   HERO
   ========================================================= */

.vx-customer-panel__hero[b-92124u9as2] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 20px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 42%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.vx-customer-panel__hero-left[b-92124u9as2] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.vx-customer-panel__hero-icon[b-92124u9as2] {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.85);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14);
}

    .vx-customer-panel__hero-icon svg[b-92124u9as2] {
        width: 30px;
        height: 30px;
    }

.vx-customer-panel__eyebrow[b-92124u9as2],
.vx-customer-panel__section-badge[b-92124u9as2] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-customer-panel__title[b-92124u9as2] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 900;
    color: #0f172a;
}

.vx-customer-panel__subtitle[b-92124u9as2] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #475569;
    line-height: 1.65;
    font-size: 0.95rem;
}

.vx-customer-panel__hero-right[b-92124u9as2] {
    display: flex;
    align-items: stretch;
    gap: 0.8rem;
}

.vx-customer-panel__stat[b-92124u9as2] {
    min-width: 138px;
    padding: 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #dbe4f0;
}

.vx-customer-panel__stat-label[b-92124u9as2] {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-customer-panel__stat-value[b-92124u9as2] {
    font-size: 1.02rem;
    font-weight: 900;
    color: #0f172a;
    word-break: break-word;
}

/* =========================================================
   GRID LAYOUT
   ========================================================= */

.vx-customer-panel__grid[b-92124u9as2] {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(420px, 1.35fr);
    gap: 1.25rem;
    align-items: stretch;
}

/* =========================================================
   CARD BASE
   ========================================================= */

.vx-customer-panel__card[b-92124u9as2] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.vx-customer-panel__card-header[b-92124u9as2] {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid #edf2f7;
}

    .vx-customer-panel__card-header h3[b-92124u9as2] {
        margin: 0;
        font-size: 1.08rem;
        font-weight: 850;
        color: #0f172a;
    }

    .vx-customer-panel__card-header p[b-92124u9as2] {
        margin: 0.45rem 0 0;
        max-width: 42rem;
        color: #64748b;
        line-height: 1.65;
        font-size: 0.93rem;
    }

.vx-customer-panel__card-body[b-92124u9as2] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.25rem;
    gap: 1rem;
}

/* =========================================================
   SEARCH CARD
   ========================================================= */

.vx-customer-panel__instruction[b-92124u9as2] {
    margin: 0;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e5edf5;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #475569;
}

.vx-customer-panel__field[b-92124u9as2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vx-customer-panel__label[b-92124u9as2] {
    font-size: 0.78rem;
    font-weight: 850;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vx-customer-panel__input-row[b-92124u9as2] {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.vx-customer-panel__input-wrap[b-92124u9as2],
.vx-customer-panel__input-shell[b-92124u9as2] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.vx-customer-panel__input-icon[b-92124u9as2] {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #64748b;
    pointer-events: none;
}

.vx-customer-panel__input-icon-svg[b-92124u9as2] {
    width: 18px;
    height: 18px;
}

.vx-customer-panel__input[b-92124u9as2] {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 1rem 0 2.7rem;
    font-size: 0.95rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    transition: all 0.15s ease;
}

    .vx-customer-panel__input:focus[b-92124u9as2] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    .vx-customer-panel__input[b-92124u9as2]::placeholder {
        color: #94a3b8;
    }

/* =========================================================
   ACTIONS
   ========================================================= */

.vx-customer-panel__search-button[b-92124u9as2],
.vx-customer-panel__clear-button[b-92124u9as2],
.vx-customer-panel__shipment-badge[b-92124u9as2],
.vx-customer-panel__new-shipment-button[b-92124u9as2] {
    font: inherit;
    cursor: pointer;
    border: none;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

.vx-customer-panel__search-button[b-92124u9as2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: 132px;
    height: 48px;
    padding: 0 1.4rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
    white-space: nowrap;
}

    .vx-customer-panel__search-button:hover:not(:disabled)[b-92124u9as2] {
        transform: translateY(-1px);
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3);
    }

    .vx-customer-panel__search-button:active:not(:disabled)[b-92124u9as2] {
        transform: translateY(0);
        box-shadow: 0 6px 12px rgba(37, 99, 235, 0.2);
    }

    .vx-customer-panel__search-button:disabled[b-92124u9as2] {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none;
    }

.vx-customer-panel__spinner[b-92124u9as2] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.38);
    border-top-color: #ffffff;
    border-radius: 999px;
    animation: vx-customer-panel-spin-b-92124u9as2 0.75s linear infinite;
}

.vx-customer-panel__secondary-actions[b-92124u9as2] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.vx-customer-panel__clear-button[b-92124u9as2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    height: 40px;
    padding: 0 1rem;
    font-size: 0.92rem;
    font-weight: 800;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #d6e0ea;
    border-radius: 10px;
}

    .vx-customer-panel__clear-button:hover[b-92124u9as2] {
        background: #f1f5f9;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

/* =========================================================
   SUMMARY CARD
   ========================================================= */

.vx-customer-panel__summary-content[b-92124u9as2] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1rem;
}

.vx-customer-panel__empty-state[b-92124u9as2] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 220px;
    padding: 1rem;
    text-align: center;
    color: #64748b;
}

.vx-customer-panel__empty-icon[b-92124u9as2] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
}

    .vx-customer-panel__empty-icon svg[b-92124u9as2] {
        width: 28px;
        height: 28px;
    }

.vx-customer-panel__identity[b-92124u9as2] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #e5edf5;
    border-radius: 14px;
    background: #f8fafc;
}

.vx-customer-panel__avatar[b-92124u9as2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.2);
}

.vx-customer-panel__identity-meta[b-92124u9as2] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.vx-customer-panel__customer-name[b-92124u9as2] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.3;
}

.vx-customer-panel__customer-contact[b-92124u9as2] {
    margin: 0;
    font-size: 0.96rem;
    color: #475569;
    line-height: 1.45;
    word-break: break-word;
}

.vx-customer-panel__contact-line[b-92124u9as2] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.94rem;
    color: #475569;
    word-break: break-word;
}

.vx-customer-panel__contact-icon[b-92124u9as2] {
    flex-shrink: 0;
}

.vx-customer-panel__contact-link[b-92124u9as2] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.15s ease;
    word-break: break-word;
}

    .vx-customer-panel__contact-link:hover[b-92124u9as2] {
        color: #1d4ed8;
        text-decoration: underline;
    }

.vx-customer-panel__summary-row[b-92124u9as2] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    background: #fcfdff;
}

.vx-customer-panel__summary-label[b-92124u9as2] {
    font-size: 0.78rem;
    font-weight: 850;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vx-customer-panel__standing[b-92124u9as2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.72rem;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
}

.vx-customer-panel__standing--good[b-92124u9as2] {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.vx-customer-panel__standing--not-good[b-92124u9as2] {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.vx-customer-panel__shipment-badge[b-92124u9as2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 34px;
    padding: 0 0.8rem;
    font-size: 0.9rem;
    font-weight: 900;
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
}

    .vx-customer-panel__shipment-badge:hover[b-92124u9as2] {
        background: #cfe4ff;
        border-color: #93c5fd;
        transform: translateY(-1px);
    }

.vx-customer-panel__shipment-badge--clickable[b-92124u9as2] {
    cursor: pointer;
}

.vx-customer-panel__shipment-badge--disabled[b-92124u9as2] {
    cursor: default;
    opacity: 0.65;
    pointer-events: none;
}

.vx-customer-panel__summary-row--shipments[b-92124u9as2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .vx-customer-panel__summary-row--shipments .vx-customer-panel__shipment-badge[b-92124u9as2] {
        margin-right: auto;
    }

.vx-customer-panel__new-shipment-button[b-92124u9as2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: 48px;
    padding: 0 1.25rem;
    font-size: 0.96rem;
    font-weight: 900;
    color: #ffffff;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 12px;
    border: none;
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.24);
}

    .vx-customer-panel__new-shipment-button:hover[b-92124u9as2] {
        transform: translateY(-1px);
        box-shadow: 0 16px 28px rgba(37, 99, 235, 0.28);
    }

/* =========================================================
   SUMMARY MESSAGE
   ========================================================= */

.vx-customer-panel__summary-message[b-92124u9as2] {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.55;
    font-weight: 700;
}

.vx-customer-panel__summary-message--error[b-92124u9as2] {
    color: #b91c1c;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@keyframes vx-customer-panel-spin-b-92124u9as2 {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1100px) {
    .vx-customer-panel__grid[b-92124u9as2] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .vx-customer-panel__hero[b-92124u9as2] {
        flex-direction: column;
    }

    .vx-customer-panel__hero-right[b-92124u9as2] {
        width: 100%;
    }

    .vx-customer-panel__stat[b-92124u9as2] {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .vx-customer-panel[b-92124u9as2] {
        gap: 1rem;
    }

    .vx-customer-panel__hero[b-92124u9as2] {
        padding: 1rem;
        border-radius: 18px;
    }

    .vx-customer-panel__hero-left[b-92124u9as2] {
        flex-direction: column;
    }

    .vx-customer-panel__hero-icon[b-92124u9as2] {
        width: 56px;
        height: 56px;
    }

    .vx-customer-panel__title[b-92124u9as2] {
        font-size: 1.22rem;
    }

    .vx-customer-panel__subtitle[b-92124u9as2] {
        font-size: 0.91rem;
    }

    .vx-customer-panel__hero-right[b-92124u9as2] {
        flex-direction: column;
    }

    .vx-customer-panel__input-row[b-92124u9as2],
    .vx-customer-panel__summary-row--shipments[b-92124u9as2] {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-customer-panel__search-button[b-92124u9as2],
    .vx-customer-panel__clear-button[b-92124u9as2],
    .vx-customer-panel__new-shipment-button[b-92124u9as2] {
        width: 100%;
    }

    .vx-customer-panel__summary-row--shipments .vx-customer-panel__shipment-badge[b-92124u9as2] {
        margin-right: 0;
    }
}
/* /Components/Pages/OperationControl/Shipments/CustomerShipments/Parts/ParcelEditor.razor.rz.scp.css */
/* =========================================================
   FILE: ParcelEditor.razor.css

   PURPOSE:
   Scoped styles for the ParcelEditor component.

   RESPONSIBILITIES:
   - Style the parcel editor hero
   - Style parcel capacity summary
   - Style parcel form sections, fields, and inputs
   - Style alerts, volumetric preview, and footer actions
   - Keep ParcelEditor aligned with Operations.Web enterprise UI

   IMPORTANT NOTES:
   - This file belongs beside ParcelEditor.razor
   - This component remains UI-only
   - Input components are Blazor form components, so ::deep is
     used where needed
   - No inline styles should be used in the Razor file
   ========================================================= */

.vx-parcel-editor[b-g44bqro2ok] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    min-width: 0;
}

/* =========================================================
   HERO
   ========================================================= */

.vx-parcel-editor__hero[b-g44bqro2ok] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 20px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 42%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.vx-parcel-editor__hero-left[b-g44bqro2ok] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.vx-parcel-editor__hero-icon[b-g44bqro2ok] {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.85);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14);
}

    .vx-parcel-editor__hero-icon svg[b-g44bqro2ok] {
        width: 30px;
        height: 30px;
    }

.vx-parcel-editor__eyebrow[b-g44bqro2ok],
.vx-parcel-editor__section-badge[b-g44bqro2ok] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-parcel-editor__title[b-g44bqro2ok] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 900;
    color: #0f172a;
}

.vx-parcel-editor__subtitle[b-g44bqro2ok] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #475569;
    line-height: 1.65;
    font-size: 0.95rem;
}

.vx-parcel-editor__hero-right[b-g44bqro2ok] {
    display: flex;
    align-items: stretch;
    gap: 0.8rem;
}

.vx-parcel-editor__stat[b-g44bqro2ok] {
    min-width: 138px;
    padding: 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #dbe4f0;
}

.vx-parcel-editor__stat-label[b-g44bqro2ok] {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-parcel-editor__stat-value[b-g44bqro2ok] {
    font-size: 1.02rem;
    font-weight: 900;
    color: #0f172a;
    word-break: break-word;
}

/* =========================================================
   SECTION CARDS
   ========================================================= */

.vx-parcel-editor__summary-section[b-g44bqro2ok],
.vx-parcel-editor__section[b-g44bqro2ok],
.vx-parcel-editor__state-card[b-g44bqro2ok] {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    padding: 1.25rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.vx-parcel-editor__section-header[b-g44bqro2ok] {
    margin-bottom: 1rem;
}

.vx-parcel-editor__section-title[b-g44bqro2ok] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-parcel-editor__section-description[b-g44bqro2ok] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #64748b;
    line-height: 1.65;
    font-size: 0.93rem;
}

/* =========================================================
   SUMMARY METRICS
   ========================================================= */

.vx-parcel-editor__summary[b-g44bqro2ok] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.vx-parcel-editor__metric[b-g44bqro2ok] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.95rem 1rem;
    background: #f8fafc;
    border: 1px solid #e5edf5;
    border-radius: 14px;
}

    .vx-parcel-editor__metric span[b-g44bqro2ok] {
        font-size: 0.76rem;
        font-weight: 800;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .vx-parcel-editor__metric strong[b-g44bqro2ok] {
        font-size: 1.2rem;
        font-weight: 900;
        color: #0f172a;
    }

/* =========================================================
   ALERTS
   ========================================================= */

.vx-parcel-editor__alert[b-g44bqro2ok] {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.45;
    font-weight: 800;
}

.vx-parcel-editor__alert--error[b-g44bqro2ok] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.vx-parcel-editor__alert--success[b-g44bqro2ok] {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.vx-parcel-editor__alert--warning[b-g44bqro2ok] {
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
}

/* =========================================================
   GRID / FIELD SYSTEM
   ========================================================= */

.vx-parcel-editor__grid[b-g44bqro2ok] {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.vx-parcel-editor__dimensions[b-g44bqro2ok] {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.vx-parcel-editor__field[b-g44bqro2ok] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.vx-parcel-editor__field--full[b-g44bqro2ok] {
    grid-column: 1 / -1;
}

.vx-parcel-editor__field label[b-g44bqro2ok] {
    font-size: 0.78rem;
    font-weight: 850;
    color: #475569;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =========================================================
   INPUTS / TEXTAREA
   ========================================================= */

.vx-parcel-editor__input[b-g44bqro2ok],
[b-g44bqro2ok] .vx-parcel-editor__input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 0.9rem;
    font: inherit;
    font-size: 0.94rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

    .vx-parcel-editor__input:hover:not(:disabled):not([readonly])[b-g44bqro2ok],
    [b-g44bqro2ok] .vx-parcel-editor__input:hover:not(:disabled):not([readonly]) {
        border-color: #94a3b8;
    }

    .vx-parcel-editor__input:focus[b-g44bqro2ok],
    [b-g44bqro2ok] .vx-parcel-editor__input:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    .vx-parcel-editor__input[readonly][b-g44bqro2ok],
    .vx-parcel-editor__input:disabled[b-g44bqro2ok],
    [b-g44bqro2ok] .vx-parcel-editor__input[readonly],
    [b-g44bqro2ok] .vx-parcel-editor__input:disabled {
        color: #64748b;
        background: #f8fafc;
        border-color: #dbe5f0;
        cursor: not-allowed;
    }

    .vx-parcel-editor__input[b-g44bqro2ok]::placeholder,
    [b-g44bqro2ok] .vx-parcel-editor__input::placeholder {
        color: #94a3b8;
    }

textarea.vx-parcel-editor__input[b-g44bqro2ok],
.vx-parcel-editor__input--textarea[b-g44bqro2ok],
[b-g44bqro2ok] textarea.vx-parcel-editor__input,
[b-g44bqro2ok] .vx-parcel-editor__input--textarea {
    height: auto;
    min-height: 118px;
    padding: 0.85rem 0.9rem;
    resize: vertical;
    line-height: 1.5;
}

/* =========================================================
   FOOTER / PREVIEW
   ========================================================= */

.vx-parcel-editor__footer[b-g44bqro2ok] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.25rem;
}

.vx-parcel-editor__preview[b-g44bqro2ok] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    min-height: 44px;
    padding: 0 1rem;
    font-size: 0.94rem;
    font-weight: 800;
    color: #334155;
    background: #f8fbff;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    text-align: center;
}

    .vx-parcel-editor__preview strong[b-g44bqro2ok] {
        margin-left: 0.35rem;
        color: #0f172a;
        font-weight: 900;
    }

/* =========================================================
   BUTTONS
   ========================================================= */

.vx-parcel-editor__button[b-g44bqro2ok] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    height: 42px;
    padding: 0 1rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

.vx-parcel-editor__button--secondary[b-g44bqro2ok] {
    color: #334155;
    background: #f8fafc;
    border: 1px solid #d6e0ea;
}

    .vx-parcel-editor__button--secondary:hover:not(:disabled)[b-g44bqro2ok] {
        color: #0f172a;
        background: #f1f5f9;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

.vx-parcel-editor__button--primary[b-g44bqro2ok] {
    color: #ffffff;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

    .vx-parcel-editor__button--primary:hover:not(:disabled)[b-g44bqro2ok] {
        transform: translateY(-1px);
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3);
    }

    .vx-parcel-editor__button--primary:active:not(:disabled)[b-g44bqro2ok] {
        transform: translateY(0);
        box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);
    }

    .vx-parcel-editor__button:disabled[b-g44bqro2ok],
    .vx-parcel-editor__button--primary:disabled[b-g44bqro2ok],
    .vx-parcel-editor__button--secondary:disabled[b-g44bqro2ok] {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

/* =========================================================
   WEIGHT / MEASUREMENT INPUT SUFFIXES
   ========================================================= */

.vx-weight-input[b-g44bqro2ok],
.vx-measurement-input[b-g44bqro2ok] {
    position: relative;
    width: 100%;
}

.vx-weight-input__control[b-g44bqro2ok] {
    padding-right: 92px;
}

.vx-measurement-input__control[b-g44bqro2ok] {
    padding-right: 82px;
}

.vx-weight-input__suffix[b-g44bqro2ok],
.vx-measurement-input__suffix[b-g44bqro2ok] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    pointer-events: none;
    user-select: none;
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
    border: 1px solid rgba(147, 197, 253, 0.55);
}

.vx-weight-input__suffix[b-g44bqro2ok] {
    right: 34px;
    min-width: 44px;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 800;
}

.vx-measurement-input__suffix[b-g44bqro2ok] {
    right: 36px;
    min-width: 48px;
    height: 34px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: 0.02em;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .vx-parcel-editor__summary[b-g44bqro2ok] {
        grid-template-columns: 1fr;
    }

    .vx-parcel-editor__dimensions[b-g44bqro2ok] {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

@media (max-width: 900px) {
    .vx-parcel-editor__hero[b-g44bqro2ok] {
        flex-direction: column;
    }

    .vx-parcel-editor__hero-right[b-g44bqro2ok] {
        width: 100%;
    }

    .vx-parcel-editor__stat[b-g44bqro2ok] {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .vx-parcel-editor[b-g44bqro2ok] {
        gap: 1rem;
    }

    .vx-parcel-editor__hero[b-g44bqro2ok] {
        padding: 1rem;
        border-radius: 18px;
    }

    .vx-parcel-editor__hero-left[b-g44bqro2ok] {
        flex-direction: column;
    }

    .vx-parcel-editor__hero-icon[b-g44bqro2ok] {
        width: 56px;
        height: 56px;
    }

    .vx-parcel-editor__title[b-g44bqro2ok] {
        font-size: 1.22rem;
    }

    .vx-parcel-editor__subtitle[b-g44bqro2ok] {
        font-size: 0.91rem;
    }

    .vx-parcel-editor__hero-right[b-g44bqro2ok] {
        flex-direction: column;
    }

    .vx-parcel-editor__summary-section[b-g44bqro2ok],
    .vx-parcel-editor__section[b-g44bqro2ok],
    .vx-parcel-editor__state-card[b-g44bqro2ok] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-parcel-editor__grid[b-g44bqro2ok],
    .vx-parcel-editor__dimensions[b-g44bqro2ok] {
        grid-template-columns: 1fr;
    }

    .vx-parcel-editor__footer[b-g44bqro2ok] {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .vx-parcel-editor__preview[b-g44bqro2ok] {
        width: 100%;
        min-width: 0;
    }

    .vx-parcel-editor__button[b-g44bqro2ok] {
        width: 100%;
    }
}
/* /Components/Pages/OperationControl/Shipments/CustomerShipments/Parts/ParcelListPanel.razor.rz.scp.css */
/* =========================================================
   FILE: ParcelListPanel.razor.css

   PURPOSE:
   Scoped styles for the parcel list panel component.

   RESPONSIBILITIES:
   - Style the parcel list hero
   - Style parcel summary metrics and action area
   - Style loading, empty, error, and warning states
   - Style parcel table, action buttons, and delete modal
   - Keep ParcelListPanel aligned with Operations.Web enterprise UI

   IMPORTANT NOTES:
   - This component is UI-only and receives prepared data
   - No business logic is handled in this CSS file
   - No inline styling should be used in the razor file
   - Styles are intentionally scoped to ParcelListPanel
   ========================================================= */

.vx-parcel-list[b-983r96gjc5] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    min-width: 0;
}

/* =========================================================
   HERO
   ========================================================= */

.vx-parcel-list__hero[b-983r96gjc5] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 20px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 42%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.vx-parcel-list__hero-left[b-983r96gjc5] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.vx-parcel-list__hero-icon[b-983r96gjc5] {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.85);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14);
}

    .vx-parcel-list__hero-icon svg[b-983r96gjc5] {
        width: 30px;
        height: 30px;
    }

.vx-parcel-list__eyebrow[b-983r96gjc5],
.vx-parcel-list__section-badge[b-983r96gjc5] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-parcel-list__title[b-983r96gjc5] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 900;
    color: #0f172a;
}

.vx-parcel-list__subtitle[b-983r96gjc5] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #475569;
    line-height: 1.65;
    font-size: 0.95rem;
}

.vx-parcel-list__hero-right[b-983r96gjc5] {
    display: flex;
    align-items: stretch;
    gap: 0.8rem;
}

.vx-parcel-list__stat[b-983r96gjc5] {
    min-width: 138px;
    padding: 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #dbe4f0;
}

.vx-parcel-list__stat-label[b-983r96gjc5] {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-parcel-list__stat-value[b-983r96gjc5] {
    font-size: 1.02rem;
    font-weight: 900;
    color: #0f172a;
    word-break: break-word;
}

/* =========================================================
   SUMMARY / ACTIONS
   ========================================================= */

.vx-parcel-list__summary-section[b-983r96gjc5],
.vx-parcel-list__section[b-983r96gjc5],
.vx-parcel-list__state-card[b-983r96gjc5],
.vx-parcel-list__loading-state[b-983r96gjc5],
.vx-parcel-list__empty-state[b-983r96gjc5] {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    padding: 1.25rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.vx-parcel-list__summary-section[b-983r96gjc5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vx-parcel-list__summary[b-983r96gjc5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.vx-metric[b-983r96gjc5] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.95rem 1rem;
    background: #f8fafc;
    border: 1px solid #e5edf5;
    border-radius: 14px;
}

    .vx-metric span[b-983r96gjc5] {
        font-size: 0.76rem;
        font-weight: 800;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .vx-metric strong[b-983r96gjc5] {
        font-size: 1.2rem;
        font-weight: 900;
        color: #0f172a;
    }

.vx-parcel-list__actions[b-983r96gjc5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.vx-btn[b-983r96gjc5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 800;
    border: none;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, opacity 0.16s ease, background 0.16s ease;
}

    .vx-btn:hover[b-983r96gjc5] {
        transform: translateY(-1px);
    }

    .vx-btn:disabled[b-983r96gjc5] {
        cursor: not-allowed;
        opacity: 0.65;
        transform: none;
        box-shadow: none;
    }

.vx-btn--primary[b-983r96gjc5] {
    color: #ffffff;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

    .vx-btn--primary:hover:not(:disabled)[b-983r96gjc5] {
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.28);
    }

.vx-btn--secondary[b-983r96gjc5] {
    color: #1e293b;
    background: #f8fafc;
    border: 1px solid #dbe5f0;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}

    .vx-btn--secondary:hover:not(:disabled)[b-983r96gjc5] {
        background: #ffffff;
        box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
    }

.vx-btn--danger[b-983r96gjc5] {
    color: #ffffff;
    background: linear-gradient(180deg, #e11d48 0%, #be123c 100%);
    box-shadow: 0 8px 18px rgba(225, 29, 72, 0.2);
}

    .vx-btn--danger:hover:not(:disabled)[b-983r96gjc5] {
        box-shadow: 0 12px 22px rgba(225, 29, 72, 0.28);
    }

/* =========================================================
   SECTION / STATES
   ========================================================= */

.vx-parcel-list__section-header[b-983r96gjc5] {
    margin-bottom: 1rem;
}

.vx-parcel-list__section-title[b-983r96gjc5] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-parcel-list__section-description[b-983r96gjc5] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #64748b;
    line-height: 1.65;
    font-size: 0.93rem;
}

.vx-parcel-list__loading-state[b-983r96gjc5] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.vx-parcel-list__loading-icon[b-983r96gjc5],
.vx-parcel-list__empty-icon[b-983r96gjc5] {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    flex-shrink: 0;
}

    .vx-parcel-list__loading-icon svg[b-983r96gjc5] {
        width: 26px;
        height: 26px;
        animation: vx-parcel-list-spin-b-983r96gjc5 0.9s linear infinite;
    }

    .vx-parcel-list__empty-icon svg[b-983r96gjc5] {
        width: 26px;
        height: 26px;
    }

.vx-parcel-list__loading-title[b-983r96gjc5],
.vx-parcel-list__empty-title[b-983r96gjc5] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-parcel-list__loading-text[b-983r96gjc5],
.vx-parcel-list__empty-message[b-983r96gjc5] {
    margin: 0.25rem 0 0;
    color: #64748b;
    line-height: 1.55;
}

.vx-parcel-list__empty-state[b-983r96gjc5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 220px;
    text-align: center;
}

/* =========================================================
   TABLE
   ========================================================= */

.vx-table-wrap[b-983r96gjc5] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
}

.vx-table[b-983r96gjc5] {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    background: #ffffff;
}

    .vx-table th[b-983r96gjc5] {
        text-align: left;
        padding: 0.95rem 1rem;
        font-size: 0.75rem;
        font-weight: 850;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #64748b;
        background: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .vx-table td[b-983r96gjc5] {
        padding: 1rem;
        border-top: 1px solid #f1f5f9;
        font-size: 0.92rem;
        color: #0f172a;
        vertical-align: middle;
    }

    .vx-table tbody tr[b-983r96gjc5] {
        transition: background 0.16s ease;
    }

        .vx-table tbody tr:hover[b-983r96gjc5] {
            background: #f8fbff;
        }

/* =========================================================
   TABLE ACTIONS
   ========================================================= */

.vx-table__actions-cell[b-983r96gjc5] {
    text-align: center;
}

.vx-table__actions-group[b-983r96gjc5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.vx-table__action-button[b-983r96gjc5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 34px;
    padding: 0 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid #cfe0ff;
    background: #eef4ff;
    color: #1d4ed8;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}

    .vx-table__action-button:hover:not(:disabled)[b-983r96gjc5] {
        transform: translateY(-1px);
        background: #e0ecff;
        border-color: #93c5fd;
    }

    .vx-table__action-button:disabled[b-983r96gjc5] {
        cursor: not-allowed;
        opacity: 0.55;
        transform: none;
        box-shadow: none;
    }

.vx-table__action-button--primary[b-983r96gjc5] {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

    .vx-table__action-button--primary:hover:not(:disabled)[b-983r96gjc5] {
        background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.28);
    }

.vx-table__action-button--danger[b-983r96gjc5] {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

    .vx-table__action-button--danger:hover:not(:disabled)[b-983r96gjc5] {
        background: #ffe4e6;
        border-color: #fda4af;
        box-shadow: 0 8px 16px rgba(190, 18, 60, 0.12);
    }

/* =========================================================
   MODAL CONFIRMATION
   ========================================================= */

.vx-modal-backdrop[b-983r96gjc5] {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.52);
}

.vx-modal[b-983r96gjc5] {
    width: min(440px, 100%);
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    padding: 1.25rem;
}

.vx-modal__header[b-983r96gjc5] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.vx-modal__icon[b-983r96gjc5] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff1f2;
    color: #be123c;
    flex-shrink: 0;
}

    .vx-modal__icon svg[b-983r96gjc5] {
        width: 23px;
        height: 23px;
    }

.vx-modal__title[b-983r96gjc5] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-modal__text[b-983r96gjc5] {
    margin: 0.35rem 0 0;
    font-size: 0.94rem;
    line-height: 1.55;
    color: #475569;
}

.vx-modal__summary[b-983r96gjc5] {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
    padding: 0.95rem;
    background: #f8fafc;
    border: 1px solid #e5edf5;
    border-radius: 14px;
}

    .vx-modal__summary div[b-983r96gjc5] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .vx-modal__summary span[b-983r96gjc5] {
        font-size: 0.76rem;
        font-weight: 800;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .vx-modal__summary strong[b-983r96gjc5] {
        font-size: 0.9rem;
        font-weight: 850;
        color: #0f172a;
        text-align: right;
        word-break: break-word;
    }

.vx-modal__warning[b-983r96gjc5] {
    margin: 0.9rem 0 0;
    font-size: 0.88rem;
    font-weight: 800;
    color: #be123c;
}

.vx-modal__actions[b-983r96gjc5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.15rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@keyframes vx-parcel-list-spin-b-983r96gjc5 {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 900px) {
    .vx-parcel-list__hero[b-983r96gjc5] {
        flex-direction: column;
    }

    .vx-parcel-list__hero-right[b-983r96gjc5] {
        width: 100%;
    }

    .vx-parcel-list__stat[b-983r96gjc5] {
        flex: 1;
        min-width: 0;
    }

    .vx-parcel-list__summary[b-983r96gjc5] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .vx-parcel-list[b-983r96gjc5] {
        gap: 1rem;
    }

    .vx-parcel-list__hero[b-983r96gjc5] {
        padding: 1rem;
        border-radius: 18px;
    }

    .vx-parcel-list__hero-left[b-983r96gjc5] {
        flex-direction: column;
    }

    .vx-parcel-list__hero-icon[b-983r96gjc5] {
        width: 56px;
        height: 56px;
    }

    .vx-parcel-list__title[b-983r96gjc5] {
        font-size: 1.22rem;
    }

    .vx-parcel-list__subtitle[b-983r96gjc5] {
        font-size: 0.91rem;
    }

    .vx-parcel-list__hero-right[b-983r96gjc5] {
        flex-direction: column;
    }

    .vx-parcel-list__summary-section[b-983r96gjc5],
    .vx-parcel-list__section[b-983r96gjc5],
    .vx-parcel-list__state-card[b-983r96gjc5],
    .vx-parcel-list__loading-state[b-983r96gjc5],
    .vx-parcel-list__empty-state[b-983r96gjc5] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-parcel-list__actions[b-983r96gjc5],
    .vx-modal__actions[b-983r96gjc5] {
        align-items: stretch;
        flex-direction: column;
    }

    .vx-btn[b-983r96gjc5] {
        width: 100%;
    }

    .vx-modal__summary div[b-983r96gjc5] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.3rem;
    }

    .vx-modal__summary strong[b-983r96gjc5] {
        text-align: left;
    }
}
/* /Components/Pages/OperationControl/Shipments/CustomerShipments/Parts/ShipmentDetails.razor.rz.scp.css */
/* =========================================================
   FILE: ShipmentDetails.razor.css

   PURPOSE:
   Scoped styles for the shipment details component.

   RESPONSIBILITIES:
   - Style shipment details hero
   - Style shipment operational sections
   - Style customer, recipient, movement, flags, and notes panels
   - Style empty state
   - Maintain enterprise-grade Operations.Web visual consistency

   IMPORTANT NOTES:
   - Scoped styles only
   - No inline styles in razor
   - This file contains no business logic
   - This component remains UI-only
   ========================================================= */

.vx-shipment-details[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.vx-shipment-details--empty[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details--empty {
    width: 100%;
}

.vx-shipment-details__empty-card[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 220px;
    padding: 1.25rem;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.vx-shipment-details__empty-icon[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
}

    .vx-shipment-details__empty-icon svg[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__empty-icon svg {
        width: 28px;
        height: 28px;
    }

.vx-shipment-details__empty-title[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__empty-title {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-shipment-details__empty-text[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__empty-text {
    max-width: 28rem;
    font-size: 0.93rem;
    line-height: 1.55;
    color: #64748b;
}

/* =========================================================
   HERO
   ========================================================= */

.vx-shipment-details__hero[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 20px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 42%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.vx-shipment-details__hero-left[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__hero-left {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.vx-shipment-details__hero-icon[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__hero-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.85);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14);
}

    .vx-shipment-details__hero-icon svg[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__hero-icon svg {
        width: 30px;
        height: 30px;
    }

.vx-shipment-details__eyebrow[b-zui5ncuym5],
.vx-shipment-details__section-badge[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__eyebrow,
[b-zui5ncuym5] .vx-shipment-details__section-badge {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0.55rem 0;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-shipment-details__title[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__title {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.2;
    font-weight: 900;
    color: #0f172a;
}

.vx-shipment-details__subtitle[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__subtitle {
    margin: 0.45rem 0 0;
    color: #475569;
    line-height: 1.65;
    font-size: 0.95rem;
    font-weight: 700;
}

.vx-shipment-details__hero-right[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__hero-right {
    display: flex;
    align-items: stretch;
    gap: 0.8rem;
}

.vx-shipment-details__stat[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__stat {
    min-width: 138px;
    padding: 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #dbe4f0;
}

.vx-shipment-details__stat-label[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__stat-label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-shipment-details__stat-value[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__stat-value {
    font-size: 1.02rem;
    font-weight: 900;
    color: #0f172a;
}

/* =========================================================
   BODY / SECTIONS
   ========================================================= */

.vx-shipment-details__body[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.vx-shipment-details__grid[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vx-shipment-details__section[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__section {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    padding: 1.25rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    min-width: 0;
}

.vx-shipment-details__section--wide[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__section--wide {
    width: 100%;
}

.vx-shipment-details__section-header[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__section-header {
    margin-bottom: 1rem;
}

.vx-shipment-details__section-title[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__section-title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-shipment-details__section-description[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__section-description {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #64748b;
    line-height: 1.65;
    font-size: 0.93rem;
}

/* =========================================================
   INFO / FIELDS
   ========================================================= */

.vx-shipment-details__info-grid[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.vx-shipment-details__stack[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.vx-shipment-details__field[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.vx-shipment-details__info-grid .vx-shipment-details__field[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__info-grid .vx-shipment-details__field {
    padding: 0.8rem 0.9rem;
    background: #f8fafc;
    border: 1px solid #e5edf5;
    border-radius: 14px;
}

.vx-shipment-details__label[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__label {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.vx-shipment-details__value[b-zui5ncuym5],
.vx-shipment-details__route-name[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__value,
[b-zui5ncuym5] .vx-shipment-details__route-name {
    font-size: 0.96rem;
    line-height: 1.35;
    font-weight: 750;
    color: #0f172a;
    word-break: break-word;
}

.vx-shipment-details__link[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__link {
    font-size: 0.96rem;
    line-height: 1.35;
    font-weight: 750;
    color: #2563eb;
    text-decoration: none;
    word-break: break-word;
}

    .vx-shipment-details__link:hover[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__link:hover {
        text-decoration: underline;
    }

/* =========================================================
   ROUTE
   ========================================================= */

.vx-shipment-details__route[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__route {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr minmax(180px, 260px);
    align-items: center;
    gap: 1rem;
    padding: 0.9rem;
    background: #f8fafc;
    border: 1px solid #e5edf5;
    border-radius: 14px;
}

.vx-shipment-details__route-point[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__route-point {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.vx-shipment-details__route-line[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__route-line {
    position: relative;
    height: 2px;
    background: #dbe5f0;
    border-radius: 999px;
}

    .vx-shipment-details__route-line[b-zui5ncuym5]::before,
    .vx-shipment-details__route-line[b-zui5ncuym5]::after,
    [b-zui5ncuym5] .vx-shipment-details__route-line::before,
    [b-zui5ncuym5] .vx-shipment-details__route-line::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: #2563eb;
        transform: translateY(-50%);
    }

    .vx-shipment-details__route-line[b-zui5ncuym5]::before,
    [b-zui5ncuym5] .vx-shipment-details__route-line::before {
        left: 0;
    }

    .vx-shipment-details__route-line[b-zui5ncuym5]::after,
    [b-zui5ncuym5] .vx-shipment-details__route-line::after {
        right: 0;
    }

/* =========================================================
   FLAGS / NOTES
   ========================================================= */

.vx-shipment-details__flags[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.vx-shipment-details__flag[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e5edf5;
    transition: transform 0.1s ease, box-shadow 0.12s ease, background 0.12s ease;
}

    .vx-shipment-details__flag:hover[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__flag:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
    }

.vx-shipment-details__flag--active[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__flag--active {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.12);
}

.vx-shipment-details__notes[b-zui5ncuym5],
[b-zui5ncuym5] .vx-shipment-details__notes {
    margin: 0;
    padding: 0.85rem 0.95rem;
    background: #f8fafc;
    border: 1px solid #e5edf5;
    border-radius: 14px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #334155;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .vx-shipment-details__info-grid[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .vx-shipment-details__hero[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__hero {
        flex-direction: column;
    }

    .vx-shipment-details__hero-right[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__hero-right {
        width: 100%;
    }

    .vx-shipment-details__stat[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__stat {
        flex: 1;
        min-width: 0;
    }

    .vx-shipment-details__grid[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__grid {
        grid-template-columns: 1fr;
    }

    .vx-shipment-details__route[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__route {
        grid-template-columns: 1fr;
    }

    .vx-shipment-details__route-line[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__route-line {
        height: 34px;
        width: 2px;
        justify-self: start;
        margin-left: 0.35rem;
    }

        .vx-shipment-details__route-line[b-zui5ncuym5]::before,
        .vx-shipment-details__route-line[b-zui5ncuym5]::after,
        [b-zui5ncuym5] .vx-shipment-details__route-line::before,
        [b-zui5ncuym5] .vx-shipment-details__route-line::after {
            left: 50%;
            transform: translateX(-50%);
        }

        .vx-shipment-details__route-line[b-zui5ncuym5]::before,
        [b-zui5ncuym5] .vx-shipment-details__route-line::before {
            top: 0;
        }

        .vx-shipment-details__route-line[b-zui5ncuym5]::after,
        [b-zui5ncuym5] .vx-shipment-details__route-line::after {
            top: auto;
            bottom: 0;
        }
}

@media (max-width: 640px) {
    .vx-shipment-details[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details {
        gap: 1rem;
    }

    .vx-shipment-details__hero[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__hero {
        padding: 1rem;
        border-radius: 18px;
    }

    .vx-shipment-details__hero-left[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__hero-left {
        flex-direction: column;
    }

    .vx-shipment-details__hero-icon[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__hero-icon {
        width: 56px;
        height: 56px;
    }

    .vx-shipment-details__title[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__title {
        font-size: 1.25rem;
    }

    .vx-shipment-details__subtitle[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__subtitle {
        font-size: 0.91rem;
    }

    .vx-shipment-details__hero-right[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__hero-right {
        flex-direction: column;
    }

    .vx-shipment-details__section[b-zui5ncuym5],
    .vx-shipment-details__empty-card[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__section,
    [b-zui5ncuym5] .vx-shipment-details__empty-card {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-shipment-details__info-grid[b-zui5ncuym5],
    [b-zui5ncuym5] .vx-shipment-details__info-grid {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/OperationControl/Shipments/CustomerShipments/Parts/ShipmentList.razor.rz.scp.css */
/* =========================================================
   FILE: ShipmentList.razor.css

   PURPOSE:
   Scoped styles for the shipment list component.

   RESPONSIBILITIES:
   - Style the shipment list hero
   - Style shipment record sections
   - Style loading, empty, and error states
   - Style shipment table, badges, parcel count, and action buttons
   - Keep ShipmentList aligned with Operations.Web enterprise UI

   IMPORTANT NOTES:
   - This component is UI-only and receives prepared data
   - Child behavior is controlled by parent/workspace callbacks
   - No business logic is handled in this CSS file
   - Use ShipmentList-specific selectors where possible
   ========================================================= */

.vx-shipment-list[b-c0u45r6re2] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    min-width: 0;
}

.vx-shipment-list__hero[b-c0u45r6re2] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 20px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 42%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.vx-shipment-list__hero-left[b-c0u45r6re2] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.vx-shipment-list__hero-icon[b-c0u45r6re2] {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.85);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14);
}

    .vx-shipment-list__hero-icon svg[b-c0u45r6re2] {
        width: 30px;
        height: 30px;
    }

.vx-shipment-list__eyebrow[b-c0u45r6re2],
.vx-shipment-list__section-badge[b-c0u45r6re2] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-shipment-list__title[b-c0u45r6re2] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 900;
    color: #0f172a;
}

.vx-shipment-list__subtitle[b-c0u45r6re2] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #475569;
    line-height: 1.65;
    font-size: 0.95rem;
}

.vx-shipment-list__hero-right[b-c0u45r6re2] {
    display: flex;
    align-items: stretch;
    gap: 0.8rem;
}

.vx-shipment-list__stat[b-c0u45r6re2] {
    min-width: 138px;
    padding: 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #dbe4f0;
}

.vx-shipment-list__stat-label[b-c0u45r6re2] {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-shipment-list__stat-value[b-c0u45r6re2] {
    font-size: 1.02rem;
    font-weight: 900;
    color: #0f172a;
}

.vx-shipment-list__section[b-c0u45r6re2],
.vx-shipment-list__state-card[b-c0u45r6re2],
.vx-shipment-list__loading-state[b-c0u45r6re2],
.vx-shipment-list__empty-state[b-c0u45r6re2] {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    padding: 1.25rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.vx-shipment-list__section-header[b-c0u45r6re2] {
    margin-bottom: 1rem;
}

.vx-shipment-list__section-title[b-c0u45r6re2] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-shipment-list__section-description[b-c0u45r6re2] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #64748b;
    line-height: 1.65;
    font-size: 0.93rem;
}

.vx-shipment-list__loading-state[b-c0u45r6re2] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.vx-shipment-list__loading-icon[b-c0u45r6re2],
.vx-shipment-list__empty-icon[b-c0u45r6re2] {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    flex-shrink: 0;
}

    .vx-shipment-list__loading-icon svg[b-c0u45r6re2] {
        width: 26px;
        height: 26px;
        animation: vx-shipment-list-spin-b-c0u45r6re2 0.9s linear infinite;
    }

    .vx-shipment-list__empty-icon svg[b-c0u45r6re2] {
        width: 26px;
        height: 26px;
    }

.vx-shipment-list__loading-title[b-c0u45r6re2],
.vx-shipment-list__empty-title[b-c0u45r6re2] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-shipment-list__loading-text[b-c0u45r6re2],
.vx-shipment-list__empty-message[b-c0u45r6re2] {
    margin: 0.25rem 0 0;
    color: #64748b;
    line-height: 1.55;
}

.vx-shipment-list__empty-state[b-c0u45r6re2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 220px;
    text-align: center;
}

.vx-shipment-list__table-wrap[b-c0u45r6re2] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
}

.vx-table[b-c0u45r6re2] {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
    background: #ffffff;
}

    .vx-table th[b-c0u45r6re2] {
        text-align: left;
        padding: 0.95rem 1rem;
        font-size: 0.75rem;
        font-weight: 850;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #64748b;
        background: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .vx-table td[b-c0u45r6re2] {
        padding: 1rem;
        border-top: 1px solid #f1f5f9;
        font-size: 0.92rem;
        color: #0f172a;
        vertical-align: middle;
    }

.vx-table__row[b-c0u45r6re2] {
    transition: background 0.16s ease;
}

    .vx-table__row:hover[b-c0u45r6re2] {
        background: #f8fbff;
    }

.vx-table__actions-header[b-c0u45r6re2],
.vx-table__actions-cell[b-c0u45r6re2] {
    text-align: center;
}

.vx-table__code[b-c0u45r6re2] {
    font-weight: 900;
    color: #0f172a;
    white-space: nowrap;
}

.vx-table__service-code[b-c0u45r6re2],
.vx-table__parcel-badge[b-c0u45r6re2],
.vx-table__status[b-c0u45r6re2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    white-space: nowrap;
}

.vx-table__service-code[b-c0u45r6re2] {
    min-width: 56px;
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 850;
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
}

.vx-table__parcel-badge[b-c0u45r6re2] {
    min-width: 46px;
    height: 34px;
    padding: 0 0.8rem;
    font-size: 0.88rem;
    font-weight: 850;
    border: 1px solid #bfdbfe;
    background: #dbeafe;
    color: #1d4ed8;
}

.vx-table__parcel-badge--clickable[b-c0u45r6re2] {
    cursor: pointer;
    transition: transform 0.12s ease, background 0.16s ease, border-color 0.16s ease;
}

    .vx-table__parcel-badge--clickable:hover[b-c0u45r6re2] {
        background: #cfe4ff;
        border-color: #93c5fd;
        transform: translateY(-1px);
    }

.vx-table__parcel-badge--disabled[b-c0u45r6re2] {
    cursor: default;
    opacity: 0.65;
    pointer-events: none;
}

.vx-table__status[b-c0u45r6re2] {
    padding: 0.35rem 0.72rem;
    font-size: 0.84rem;
    font-weight: 800;
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.vx-table__actions-group[b-c0u45r6re2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.vx-table__action-button[b-c0u45r6re2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 34px;
    padding: 0 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid #cfe0ff;
    background: #eef4ff;
    color: #1d4ed8;
    transition: transform 0.12s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

    .vx-table__action-button:hover[b-c0u45r6re2] {
        transform: translateY(-1px);
        background: #e0ecff;
        border-color: #93c5fd;
    }

.vx-table__action-button--secondary[b-c0u45r6re2] {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #334155;
}

    .vx-table__action-button--secondary:hover[b-c0u45r6re2] {
        background: #f1f5f9;
    }

.vx-table__action-button--primary[b-c0u45r6re2] {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
}

    .vx-table__action-button--primary:hover[b-c0u45r6re2] {
        box-shadow: 0 10px 18px rgba(37, 99, 235, 0.32);
    }

@keyframes vx-shipment-list-spin-b-c0u45r6re2 {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 900px) {
    .vx-shipment-list__hero[b-c0u45r6re2] {
        flex-direction: column;
    }

    .vx-shipment-list__hero-right[b-c0u45r6re2] {
        width: 100%;
    }

    .vx-shipment-list__stat[b-c0u45r6re2] {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .vx-shipment-list[b-c0u45r6re2] {
        gap: 1rem;
    }

    .vx-shipment-list__hero[b-c0u45r6re2] {
        padding: 1rem;
        border-radius: 18px;
    }

    .vx-shipment-list__hero-left[b-c0u45r6re2] {
        flex-direction: column;
    }

    .vx-shipment-list__hero-icon[b-c0u45r6re2] {
        width: 56px;
        height: 56px;
    }

    .vx-shipment-list__title[b-c0u45r6re2] {
        font-size: 1.22rem;
    }

    .vx-shipment-list__subtitle[b-c0u45r6re2] {
        font-size: 0.91rem;
    }

    .vx-shipment-list__hero-right[b-c0u45r6re2] {
        flex-direction: column;
    }

    .vx-shipment-list__section[b-c0u45r6re2],
    .vx-shipment-list__state-card[b-c0u45r6re2],
    .vx-shipment-list__loading-state[b-c0u45r6re2],
    .vx-shipment-list__empty-state[b-c0u45r6re2] {
        padding: 1rem;
        border-radius: 16px;
    }
}
/* /Components/Pages/OperationControl/Shipments/CustomerShipments/ShipmentWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: ShipmentWorkspace.razor.css

   PURPOSE:
   Scoped styles for the ShipmentWorkspace host page.

   RESPONSIBILITIES:
   - Provide safe workspace-level spacing
   - Style the workspace error state
   - Preserve child component ownership
   - Avoid changing workflow or orchestration behavior

   IMPORTANT NOTES:
   - This file styles the workspace host only
   - Child component styling belongs to child component CSS
   - No markup, logic, handler, parameter, or state changes
   ========================================================= */

.vx-shipment-workspace[b-4pm84k7s8p] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    min-width: 0;
}

.vx-shipment-workspace__state[b-4pm84k7s8p] {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    padding: 1.25rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

@media (max-width: 768px) {
    .vx-shipment-workspace[b-4pm84k7s8p] {
        gap: 1rem;
    }

    .vx-shipment-workspace__state[b-4pm84k7s8p] {
        padding: 1rem;
        border-radius: 16px;
    }
}
/* /Components/Pages/OperationControl/Shipments/OperationalParcels/ParcelListWorkspace.razor.rz.scp.css */
/* =========================================================
FILE: ParcelListWorkspace.razor.css

PURPOSE:
Styles the Operational Parcels workspace shell.

RESPONSIBILITIES:
- Control workspace spacing
- Provide consistent vertical layout
- Keep page-level layout separate from child component styling

IMPORTANT NOTES:
- This file owns workspace shell styling only
========================================================= */

.vx-operational-parcels[b-kivdr9zg33] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
/* /Components/Pages/OperationControl/Shipments/OperationalParcels/Parts/ParcelListFilters.razor.rz.scp.css */
/* =========================================================
FILE: ParcelListFilters.razor.css

PURPOSE:
Styles the Operational Parcel filter panel.

RESPONSIBILITIES:
- Style filter layout
- Style labels and inputs
- Style date inputs consistently with Vixly controls
- Style filter action buttons

IMPORTANT NOTES:
- This file owns Filter styling only
- Date inputs use browser-native calendar behavior
- Styling keeps native date picker behavior while matching
  Vixly input height, border, radius, and typography
========================================================= */

.vx-parcel-filters[b-x4egl1a3e8] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.vx-parcel-filters__field[b-x4egl1a3e8] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

    .vx-parcel-filters__field label[b-x4egl1a3e8] {
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #64748b;
    }

    .vx-parcel-filters__field input[b-x4egl1a3e8],
    .vx-parcel-filters__field select[b-x4egl1a3e8],
    .vx-parcel-filters__field .form-control[b-x4egl1a3e8],
    .vx-parcel-filters__field .vx-date-input[b-x4egl1a3e8] {
        width: 100%;
        min-height: 44px;
        height: 44px;
        box-sizing: border-box;
        padding: 0 0.9rem;
        border: 1px solid #dbe2ea;
        border-radius: 12px;
        background-color: #ffffff;
        color: #0f172a;
        font-family: inherit;
        font-size: 0.95rem;
        line-height: 44px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .vx-parcel-filters__field select[b-x4egl1a3e8] {
        cursor: pointer;
    }

    .vx-parcel-filters__field input[b-x4egl1a3e8]::placeholder {
        color: #94a3b8;
    }

    .vx-parcel-filters__field input:focus[b-x4egl1a3e8],
    .vx-parcel-filters__field select:focus[b-x4egl1a3e8],
    .vx-parcel-filters__field .form-control:focus[b-x4egl1a3e8],
    .vx-parcel-filters__field .vx-date-input:focus[b-x4egl1a3e8] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
    }

    .vx-parcel-filters__field .vx-date-input[b-x4egl1a3e8] {
        appearance: none;
        -webkit-appearance: none;
    }

        .vx-parcel-filters__field .vx-date-input[b-x4egl1a3e8]::-webkit-calendar-picker-indicator {
            cursor: pointer;
            opacity: 0.65;
        }

            .vx-parcel-filters__field .vx-date-input[b-x4egl1a3e8]::-webkit-calendar-picker-indicator:hover {
                opacity: 1;
            }

.vx-parcel-filters__actions[b-x4egl1a3e8] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .vx-parcel-filters__actions button[b-x4egl1a3e8] {
        min-width: 110px;
        min-height: 44px;
        border-radius: 12px;
        font-weight: 800;
    }

        .vx-parcel-filters__actions button:first-child[b-x4egl1a3e8] {
            background: #2563eb;
            color: #ffffff;
            border: none;
            box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
        }

        .vx-parcel-filters__actions button:last-child[b-x4egl1a3e8] {
            background: #ffffff;
            color: #475569;
            border: 1px solid #dbe2ea;
        }

@media (max-width: 1200px) {
    .vx-parcel-filters[b-x4egl1a3e8] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .vx-parcel-filters[b-x4egl1a3e8] {
        grid-template-columns: 1fr;
    }

    .vx-parcel-filters__actions[b-x4egl1a3e8] {
        flex-direction: column;
        align-items: stretch;
    }

        .vx-parcel-filters__actions button[b-x4egl1a3e8] {
            width: 100%;
        }
}
/* /Components/Pages/OperationControl/Shipments/OperationalParcels/Parts/ParcelListGrid.razor.rz.scp.css */
/* =========================================================
FILE: ParcelListGrid.razor.css

PURPOSE:
Styles the Operational Parcel grid.

RESPONSIBILITIES:
- Style parcel table layout
- Style sortable headers
- Style parcel code and status pills
- Style loading and empty states
- Style pager controls

IMPORTANT NOTES:
- This file owns Grid styling only
- Parcel status is derived from TrackingEvents
========================================================= */

.vx-parcel-grid[b-pmn53udapu] {
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.vx-parcel-grid__state[b-pmn53udapu] {
    padding: 2rem;
    text-align: center;
    color: #64748b;
    font-weight: 700;
}

.vx-parcel-grid__table-wrap[b-pmn53udapu] {
    overflow-x: auto;
}

.vx-parcel-grid__table[b-pmn53udapu] {
    width: 100%;
    border-collapse: collapse;
}

    .vx-parcel-grid__table th[b-pmn53udapu] {
        padding: 0.85rem;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: left;
        color: #64748b;
        border-bottom: 1px solid #e2e8f0;
    }

    .vx-parcel-grid__table td[b-pmn53udapu] {
        padding: 0.9rem 0.85rem;
        color: #0f172a;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .vx-parcel-grid__table tbody tr:hover[b-pmn53udapu] {
        background: #f8fafc;
    }

.vx-parcel-grid__sort[b-pmn53udapu] {
    padding: 0;
    border: 0;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

    .vx-parcel-grid__sort:hover[b-pmn53udapu] {
        color: #2563eb;
    }

.vx-parcel-grid__code[b-pmn53udapu],
.vx-parcel-grid__shipment[b-pmn53udapu] {
    font-weight: 800;
    color: #0f172a;
}

.vx-parcel-grid__age[b-pmn53udapu] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 0.65rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 800;
}

.vx-parcel-status[b-pmn53udapu] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.vx-parcel-status--normal[b-pmn53udapu] {
    background: #dcfce7;
    color: #166534;
}

.vx-parcel-status--exception[b-pmn53udapu] {
    background: #fee2e2;
    color: #991b1b;
}

.vx-parcel-grid__pager[b-pmn53udapu] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
    padding-top: 1rem;
}

    .vx-parcel-grid__pager span[b-pmn53udapu] {
        color: #475569;
        font-weight: 800;
    }

    .vx-parcel-grid__pager button[b-pmn53udapu] {
        min-width: 96px;
        min-height: 38px;
        border: 1px solid #dbe2ea;
        border-radius: 12px;
        background: #ffffff;
        color: #475569;
        font-weight: 800;
    }

        .vx-parcel-grid__pager button:hover:not(:disabled)[b-pmn53udapu] {
            border-color: #2563eb;
            color: #2563eb;
        }

        .vx-parcel-grid__pager button:disabled[b-pmn53udapu] {
            cursor: not-allowed;
            opacity: 0.45;
        }
.vx-parcel-age[b-pmn53udapu] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.vx-parcel-age--good[b-pmn53udapu] {
    background: #dcfce7;
    color: #166534;
}

.vx-parcel-age--warning[b-pmn53udapu] {
    background: #fef3c7;
    color: #92400e;
}

.vx-parcel-age--danger[b-pmn53udapu] {
    background: #fee2e2;
    color: #991b1b;
}

.vx-parcel-age--unknown[b-pmn53udapu] {
    background: #e2e8f0;
    color: #475569;
}
/* /Components/Pages/OperationControl/Shipments/OperationalParcels/Parts/ParcelListSummary.razor.rz.scp.css */
/* =========================================================
FILE: ParcelListSummary.razor.css

PURPOSE:
Styles the Operational Parcel summary cards.

RESPONSIBILITIES:
- Style summary card layout
- Style card counts and labels
- Style active card state
- Provide responsive behavior

IMPORTANT NOTES:
- This file owns Summary styling only
- Cards act as status quick-filters
========================================================= */

.vx-parcel-summary[b-dsqub1fzkw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.vx-parcel-summary__card[b-dsqub1fzkw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
    min-height: 96px;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

    .vx-parcel-summary__card:hover[b-dsqub1fzkw] {
        transform: translateY(-2px);
        border-color: #cbd5e1;
    }

.vx-parcel-summary__card--active[b-dsqub1fzkw] {
    border-color: #2563eb;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06), 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.vx-parcel-summary__label[b-dsqub1fzkw] {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    white-space: normal;
}

.vx-parcel-summary__card strong[b-dsqub1fzkw] {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
}

.vx-parcel-summary__badge[b-dsqub1fzkw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 32px;
    padding: 0 0.9rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 800;
}

.vx-parcel-summary__badge--created[b-dsqub1fzkw] {
    background: #dcfce7;
    color: #166534;
}

.vx-parcel-summary__badge--ready[b-dsqub1fzkw] {
    background: #dbeafe;
    color: #1d4ed8;
}

.vx-parcel-summary__badge--transit[b-dsqub1fzkw] {
    background: #fef3c7;
    color: #92400e;
}

.vx-parcel-summary__badge--delivered[b-dsqub1fzkw] {
    background: #d1fae5;
    color: #047857;
}

@media (max-width: 768px) {
    .vx-parcel-summary[b-dsqub1fzkw] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/OperationControl/Shipments/OperationalParcels/Parts/ParcelListToolbar.razor.rz.scp.css */
/* =========================================================
FILE: ParcelListToolbar.razor.css

PURPOSE:
Styles the Operational Parcel toolbar.

RESPONSIBILITIES:
- Style workspace title area
- Style operational action icon
- Style action buttons
- Control toolbar layout, height, and spacing

IMPORTANT NOTES:
- This file owns Toolbar styling only
- Parcel toolbar should visually align with Shipment toolbar
========================================================= */

.vx-parcel-toolbar[b-qcvp80dd2g] {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.vx-parcel-toolbar__left[b-qcvp80dd2g] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.vx-parcel-toolbar__icon[b-qcvp80dd2g] {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    font-size: 1.6rem;
}

.vx-parcel-toolbar__title[b-qcvp80dd2g] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.035em;
}

.vx-parcel-toolbar__subtitle[b-qcvp80dd2g] {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
}

.vx-parcel-toolbar__right[b-qcvp80dd2g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .vx-parcel-toolbar__right button[b-qcvp80dd2g] {
        min-width: 120px;
        min-height: 42px;
        border: 0;
        border-radius: 12px;
        background: #2563eb;
        color: #ffffff;
        font-weight: 800;
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
    }

        .vx-parcel-toolbar__right button:hover[b-qcvp80dd2g] {
            background: #1d4ed8;
        }

        .vx-parcel-toolbar__right button:last-child[b-qcvp80dd2g] {
            margin-left: 0.5rem;
        }
/* /Components/Pages/OperationControl/Shipments/OperationalShipments/Parts/ShipmentListFilters.razor.rz.scp.css */
/* =========================================================
FILE: ShipmentListFilters.razor.css

PURPOSE:
Styles the Operational Shipment filter panel.

RESPONSIBILITIES:
- Style filter layout
- Style labels and inputs
- Style date inputs consistently with Vixly controls
- Style filter action buttons

IMPORTANT NOTES:
- This file owns Filter styling only
- Date inputs use browser-native calendar behavior
- Styling keeps native date picker behavior while matching
  Vixly input height, border, radius, and typography
========================================================= */

.vx-shipment-filters[b-z16ekck7px] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.vx-shipment-filters__field[b-z16ekck7px] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

    .vx-shipment-filters__field label[b-z16ekck7px] {
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #64748b;
    }

    .vx-shipment-filters__field input[b-z16ekck7px],
    .vx-shipment-filters__field select[b-z16ekck7px],
    .vx-shipment-filters__field .form-control[b-z16ekck7px],
    .vx-shipment-filters__field .vx-date-input[b-z16ekck7px] {
        width: 100%;
        min-height: 44px;
        height: 44px;
        box-sizing: border-box;
        padding: 0 0.9rem;
        border: 1px solid #dbe2ea;
        border-radius: 12px;
        background-color: #ffffff;
        color: #0f172a;
        font-family: inherit;
        font-size: 0.95rem;
        line-height: 44px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .vx-shipment-filters__field select[b-z16ekck7px] {
        cursor: pointer;
    }

    .vx-shipment-filters__field input[b-z16ekck7px]::placeholder {
        color: #94a3b8;
    }

    .vx-shipment-filters__field input:focus[b-z16ekck7px],
    .vx-shipment-filters__field select:focus[b-z16ekck7px],
    .vx-shipment-filters__field .form-control:focus[b-z16ekck7px],
    .vx-shipment-filters__field .vx-date-input:focus[b-z16ekck7px] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
    }

    .vx-shipment-filters__field .vx-date-input[b-z16ekck7px] {
        appearance: none;
        -webkit-appearance: none;
    }

        .vx-shipment-filters__field .vx-date-input[b-z16ekck7px]::-webkit-calendar-picker-indicator {
            cursor: pointer;
            opacity: 0.65;
        }

            .vx-shipment-filters__field .vx-date-input[b-z16ekck7px]::-webkit-calendar-picker-indicator:hover {
                opacity: 1;
            }

.vx-shipment-filters__actions[b-z16ekck7px] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .vx-shipment-filters__actions button[b-z16ekck7px] {
        min-width: 110px;
        min-height: 44px;
        border-radius: 12px;
        font-weight: 800;
    }

        .vx-shipment-filters__actions button:first-child[b-z16ekck7px] {
            background: #2563eb;
            color: #ffffff;
            border: none;
            box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
        }

        .vx-shipment-filters__actions button:last-child[b-z16ekck7px] {
            background: #ffffff;
            color: #475569;
            border: 1px solid #dbe2ea;
        }

@media (max-width: 1200px) {
    .vx-shipment-filters[b-z16ekck7px] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .vx-shipment-filters[b-z16ekck7px] {
        grid-template-columns: 1fr;
    }

    .vx-shipment-filters__actions[b-z16ekck7px] {
        flex-direction: column;
        align-items: stretch;
    }

        .vx-shipment-filters__actions button[b-z16ekck7px] {
            width: 100%;
        }
}
/* /Components/Pages/OperationControl/Shipments/OperationalShipments/Parts/ShipmentListGrid.razor.rz.scp.css */
/* =========================================================
FILE: ShipmentListGrid.razor.css

PURPOSE:
Styles the Operational Shipments grid component.

RESPONSIBILITIES:
- Render shipment table layout
- Style headers and rows
- Style loading and empty states
- Style pagination controls

IMPORTANT NOTES:
- This file owns Grid styling only
========================================================= */

.vx-grid-card[b-nrjmadp09y] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.vx-grid[b-nrjmadp09y] {
    width: 100%;
    border-collapse: collapse;
}

    .vx-grid thead[b-nrjmadp09y] {
        background: #f8fafc;
    }

    .vx-grid th[b-nrjmadp09y] {
        padding: 1rem;
        text-align: left;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #64748b;
        border-bottom: 1px solid #e2e8f0;
        white-space: nowrap;
    }

    .vx-grid td[b-nrjmadp09y] {
        padding: 1rem;
        border-bottom: 1px solid #e2e8f0;
        color: #0f172a;
        vertical-align: middle;
    }

    .vx-grid tbody tr:hover[b-nrjmadp09y] {
        background: #f8fafc;
    }

    .vx-grid tbody tr:last-child td[b-nrjmadp09y] {
        border-bottom: none;
    }

    .vx-grid td:first-child[b-nrjmadp09y] {
        font-weight: 800;
    }

.vx-grid-pagination[b-nrjmadp09y] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}

    .vx-grid-pagination button[b-nrjmadp09y] {
        min-width: 96px;
        min-height: 38px;
        border: 1px solid #dbeafe;
        border-radius: 12px;
        background: #eff6ff;
        color: #1d4ed8;
        font-weight: 800;
    }

        .vx-grid-pagination button:disabled[b-nrjmadp09y] {
            background: #f1f5f9;
            color: #94a3b8;
            border-color: #e2e8f0;
        }

.vx-state[b-nrjmadp09y] {
    padding: 2rem;
    text-align: center;
    color: #64748b;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.vx-shipment-link[b-nrjmadp09y] {
    display: inline-block;
    white-space: nowrap;
    color: #0f172a;
    font-weight: 800;
    text-decoration: none;
}

    .vx-shipment-link:hover[b-nrjmadp09y] {
        color: #2563eb;
        text-decoration: underline;
    }

.vx-status-badge[b-nrjmadp09y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.vx-status-badge--created[b-nrjmadp09y] {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.vx-status-badge--ready[b-nrjmadp09y] {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.vx-status-badge--transit[b-nrjmadp09y] {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.vx-status-badge--delivered[b-nrjmadp09y] {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.vx-status-badge--cancelled[b-nrjmadp09y] {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.vx-grid-sort[b-nrjmadp09y] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-weight: 800;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

    .vx-grid-sort:hover[b-nrjmadp09y] {
        color: #2563eb;
    }

.vx-status-age[b-nrjmadp09y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.vx-status-age--fresh[b-nrjmadp09y] {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.vx-status-age--watch[b-nrjmadp09y] {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.vx-status-age--stale[b-nrjmadp09y] {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.vx-status-age--unknown[b-nrjmadp09y] {
    background: #f1f5f9;
    color: #64748b;
    border-color: #e2e8f0;
}
/* /Components/Pages/OperationControl/Shipments/OperationalShipments/Parts/ShipmentListSummary.razor.rz.scp.css */
/* =========================================================
FILE: ShipmentListSummary.razor.css

PURPOSE:
Styles the Operational Shipments summary component.

RESPONSIBILITIES:
- Style shipment summary metric cards
- Present operational KPIs
- Keep summary layout separate from workspace and grid styling

IMPORTANT NOTES:
- This file owns Summary styling only
========================================================= */

.vx-shipment-summary[b-qoqp1cbrr4] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.vx-shipment-summary__card[b-qoqp1cbrr4] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 1.25rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.vx-shipment-summary__label[b-qoqp1cbrr4] {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-shipment-summary__value[b-qoqp1cbrr4] {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
}

@media (max-width: 1200px) {
    .vx-shipment-summary[b-qoqp1cbrr4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .vx-shipment-summary[b-qoqp1cbrr4] {
        grid-template-columns: 1fr;
    }
}

.vx-shipment-summary__pill[b-qoqp1cbrr4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 34px;
    padding: 0 1rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 800;
    transition: all 0.2s ease;
}

    .vx-shipment-summary__pill:hover[b-qoqp1cbrr4] {
        transform: translateY(-1px);
    }

.vx-shipment-summary__pill--created[b-qoqp1cbrr4] {
    background: #dcfce7;
    color: #166534;
}

.vx-shipment-summary__pill--ready[b-qoqp1cbrr4] {
    background: #dbeafe;
    color: #1d4ed8;
}

.vx-shipment-summary__pill--transit[b-qoqp1cbrr4] {
    background: #fef3c7;
    color: #92400e;
}

.vx-shipment-summary__pill--delivered[b-qoqp1cbrr4] {
    background: #ecfdf5;
    color: #047857;
}

/* =========================================================
ACTIVE STATUS FILTER CARD
========================================================= */

.vx-shipment-summary__card--active[b-qoqp1cbrr4] {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.14);
}
/* /Components/Pages/OperationControl/Shipments/OperationalShipments/Parts/ShipmentListToolbar.razor.rz.scp.css */
/* =========================================================
FILE: ShipmentListToolbar.razor.css

PURPOSE:
Styles the Operational Shipment toolbar.

RESPONSIBILITIES:
- Style workspace title area
- Style action buttons
- Control toolbar layout and spacing

IMPORTANT NOTES:
- This file owns Toolbar styling only
========================================================= */

.vx-shipment-toolbar[b-w4ncgfrf07] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.vx-shipment-toolbar__title[b-w4ncgfrf07] {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.035em;
}

.vx-shipment-toolbar__right button[b-w4ncgfrf07] {
    min-width: 120px;
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: #2563eb;
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

    .vx-shipment-toolbar__right button:hover[b-w4ncgfrf07] {
        background: #1d4ed8;
    }

.vx-shipment-toolbar__left[b-w4ncgfrf07] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.vx-shipment-toolbar__icon[b-w4ncgfrf07] {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient( 135deg, #dbeafe, #eff6ff);
    font-size: 1.6rem;
}

.vx-shipment-toolbar__subtitle[b-w4ncgfrf07] {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
}

.vx-shipment-toolbar__right[b-w4ncgfrf07] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
/* /Components/Pages/OperationControl/Shipments/OperationalShipments/ShipmentListWorkspace.razor.rz.scp.css */
/* =========================================================
FILE: ShipmentListWorkspace.razor.css

PURPOSE:
Styles the Operational Shipments workspace shell.

RESPONSIBILITIES:
- Provide page-level spacing
- Stack child components
- Style workspace-level error state only

IMPORTANT NOTES:
- CSS only
- Workspace owns layout only
- Child components own their own CSS
========================================================= */

.vx-operational-shipments[b-vxwhcwqtvj] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
}

.vx-alert[b-vxwhcwqtvj] {
    border-radius: 18px;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.vx-alert--error[b-vxwhcwqtvj] {
    border-color: #fecaca;
    background: #fff7f7;
    color: #991b1b;
}
/* /Components/Pages/OperationControl/TenantUsers/Parts/TenantUserDetailsPanel.razor.rz.scp.css */
/* =========================================================
   FILE: TenantUserDetailsPanel.razor.css

   PURPOSE:
   Scoped styles for TenantUserDetailsPanel component.

   RESPONSIBILITIES:
   - Render staff profile details cleanly
   - Maintain strong visual hierarchy
   - Match Vixly enterprise UI language
   - Avoid style leakage

   IMPORTANT NOTES:
   - UI-only component
   - Designed to sit inside workspace shell
   ========================================================= */

/* =========================================================
   CARD
   ========================================================= */
.vx-details-card[b-yae1qk8xu6] {
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    padding: 24px 28px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
}

/* =========================================================
   HEADER
   ========================================================= */
.vx-details-card__header[b-yae1qk8xu6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.vx-details-card__header-main[b-yae1qk8xu6] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vx-details-avatar[b-yae1qk8xu6] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
}

.vx-details-card__eyebrow[b-yae1qk8xu6] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin: 0;
}

.vx-details-card__title[b-yae1qk8xu6] {
    margin: 6px 0 4px;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
}

.vx-details-card__subtitle[b-yae1qk8xu6] {
    margin: 0;
    color: #475569;
}

.vx-details-card__actions[b-yae1qk8xu6] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* =========================================================
   GRID
   ========================================================= */
.vx-details-grid[b-yae1qk8xu6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* =========================================================
   SECTION
   ========================================================= */
.vx-details-section[b-yae1qk8xu6] {
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 18px;
}

.vx-details-section__title[b-yae1qk8xu6] {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* =========================================================
   ROW
   ========================================================= */
.vx-details-row[b-yae1qk8xu6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    font-size: 14px;
    color: #334155;
}

    .vx-details-row span[b-yae1qk8xu6] {
        color: #64748b;
        flex-shrink: 0;
    }

    .vx-details-row strong[b-yae1qk8xu6] {
        font-weight: 600;
        color: #0f172a;
        text-align: right;
    }

/* =========================================================
   EDIT INPUTS
   ========================================================= */
.vx-input[b-yae1qk8xu6] {
    height: 34px;
    min-width: 180px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid #cbd5f5;
    background: #ffffff;
    color: #0f172a;
    font-size: 13px;
    outline: none;
}

    .vx-input:focus[b-yae1qk8xu6] {
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }

/* =========================================================
   BUTTONS
   ========================================================= */
.vx-btn[b-yae1qk8xu6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vx-btn--sm[b-yae1qk8xu6] {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

.vx-btn--ghost[b-yae1qk8xu6] {
    border-color: #cbd5f5;
    background: #ffffff;
    color: #2563eb;
}

    .vx-btn--ghost:hover[b-yae1qk8xu6] {
        background: #eff6ff;
        border-color: #2563eb;
    }

    .vx-btn--ghost:active[b-yae1qk8xu6] {
        background: #dbeafe;
    }

    .vx-btn--ghost:focus[b-yae1qk8xu6] {
        outline: none;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }

.vx-btn--primary[b-yae1qk8xu6] {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

    .vx-btn--primary:hover[b-yae1qk8xu6] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

/* =========================================================
   BADGES
   ========================================================= */
.vx-badge[b-yae1qk8xu6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.vx-badge--success[b-yae1qk8xu6] {
    background: #dcfce7;
    color: #166534;
}

.vx-badge--muted[b-yae1qk8xu6] {
    background: #e2e8f0;
    color: #475569;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */
.vx-details-empty[b-yae1qk8xu6] {
    padding: 18px;
    text-align: center;
    color: #64748b;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
    .vx-details-grid[b-yae1qk8xu6] {
        grid-template-columns: 1fr;
    }

    .vx-details-card__header[b-yae1qk8xu6] {
        flex-direction: column;
    }

    .vx-details-card__actions[b-yae1qk8xu6] {
        margin-left: 0;
    }
}
/* /Components/Pages/OperationControl/TenantUsers/Parts/TenantUserInvitePanel.razor.rz.scp.css */
/* =========================================================
   FILE: TenantUserInvitePanel.razor.css

   PURPOSE:
   Scoped styles for the TenantUserInvitePanel component.

   RESPONSIBILITIES:
   - Style the staff invitation panel
   - Provide enterprise-grade form, input, and button styling
   - Keep visual language aligned with Vixly Operations
   - Ensure styles apply correctly to Blazor InputText
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */
.tenant-user-invite-panel[b-iajhlzuznz] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

/* =========================================================
   HEADER
   ========================================================= */
.tenant-user-invite-panel__header[b-iajhlzuznz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.tenant-user-invite-panel__title[b-iajhlzuznz] {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 800;
}

.tenant-user-invite-panel__subtitle[b-iajhlzuznz] {
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.45;
}

/* =========================================================
   FORM
   ========================================================= */
.tenant-user-invite-panel__form[b-iajhlzuznz] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.tenant-user-invite-panel__row[b-iajhlzuznz] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 1rem;
    align-items: end;
}

/* =========================================================
   FIELD
   ========================================================= */
.tenant-user-invite-panel__field[b-iajhlzuznz] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

    .tenant-user-invite-panel__field label[b-iajhlzuznz] {
        color: #334155;
        font-size: 0.85rem;
        font-weight: 700;
    }

/* =========================================================
   INPUT (BLAZOR INPUTTEXT / CSS ISOLATION FIX)
   ========================================================= */

[b-iajhlzuznz] input.tenant-user-invite-panel__input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    font-size: 15px;
    font-weight: 500;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

    [b-iajhlzuznz] input.tenant-user-invite-panel__input::placeholder {
        color: #94a3b8;
        font-weight: 500;
    }

    [b-iajhlzuznz] input.tenant-user-invite-panel__input:hover {
        border-color: #93c5fd;
    }

    [b-iajhlzuznz] input.tenant-user-invite-panel__input:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    [b-iajhlzuznz] input.tenant-user-invite-panel__input:disabled {
        background: #f8fafc;
        color: #64748b;
        cursor: not-allowed;
    }
/* =========================================================
   BUTTON
   ========================================================= */
.tenant-user-invite-panel__button[b-iajhlzuznz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-width: 170px;
    padding: 0 1.2rem;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .tenant-user-invite-panel__button:hover:not(:disabled)[b-iajhlzuznz] {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.32);
    }

    .tenant-user-invite-panel__button:active:not(:disabled)[b-iajhlzuznz] {
        transform: translateY(0);
        box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
    }

    .tenant-user-invite-panel__button:disabled[b-iajhlzuznz] {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none;
    }

/* =========================================================
   VALIDATION
   ========================================================= */
.validation-message[b-iajhlzuznz] {
    color: #dc2626;
    font-size: 0.82rem;
    font-weight: 600;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 720px) {
    .tenant-user-invite-panel__row[b-iajhlzuznz] {
        grid-template-columns: 1fr;
    }

    .tenant-user-invite-panel__button[b-iajhlzuznz] {
        width: 100%;
    }
}
/* /Components/Pages/OperationControl/TenantUsers/Parts/TenantUserList.razor.rz.scp.css */
/* =========================================================
   FILE: TenantUserList.razor.css

   PURPOSE:
   Scoped styles for TenantUserList component.

   RESPONSIBILITIES:
   - Render staff list inside a polished card
   - Keep table readable and enterprise-grade
   - Match Vixly Operations UI language
   - Avoid style leakage

   IMPORTANT NOTES:
   - This component is UI-only
   - Styling is scoped to TenantUserList
   ========================================================= */

/* =========================================================
   CARD
   ========================================================= */
.vx-card[b-5zs1uv7jp1] {
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    padding: 24px 28px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

/* =========================================================
   HEADER
   ========================================================= */
.vx-card__header[b-5zs1uv7jp1] {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.vx-card__title[b-5zs1uv7jp1] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}

/* =========================================================
   TABLE
   ========================================================= */
.vx-table[b-5zs1uv7jp1] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
}

    .vx-table thead[b-5zs1uv7jp1] {
        background: #f8fafc;
    }

    .vx-table th[b-5zs1uv7jp1] {
        text-align: left;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #64748b;
        padding: 16px 18px;
        font-weight: 700;
        border-bottom: 1px solid #e2e8f0;
    }

    .vx-table td[b-5zs1uv7jp1] {
        padding: 18px;
        border-bottom: 1px solid #e2e8f0;
        font-size: 15px;
        color: #0f172a;
        vertical-align: middle;
    }

    .vx-table tbody tr:last-child td[b-5zs1uv7jp1] {
        border-bottom: none;
    }

    .vx-table tbody tr:hover[b-5zs1uv7jp1] {
        background: #f8fafc;
    }

/* =========================================================
   BADGES
   ========================================================= */
.vx-badge[b-5zs1uv7jp1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.vx-badge--success[b-5zs1uv7jp1] {
    background: #dcfce7;
    color: #166534;
}

.vx-badge--muted[b-5zs1uv7jp1] {
    background: #e2e8f0;
    color: #475569;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */
.vx-table td[colspan="5"][b-5zs1uv7jp1] {
    text-align: center;
    color: #64748b;
    padding: 28px;
    font-size: 15px;
}
/* =========================================================
   ACTIONS COLUMN
   ========================================================= */
.vx-table__actions[b-5zs1uv7jp1] {
    text-align: right;
    white-space: nowrap;
}

/* =========================================================
   BUTTON (GHOST STYLE)
   ========================================================= */
.vx-btn--ghost[b-5zs1uv7jp1] {
    background: transparent;
    border: 1px solid #cbd5f5;
    color: #2563eb;
    height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* SIZE VARIANT */
.vx-btn--sm[b-5zs1uv7jp1] {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
}

/* HOVER */
.vx-btn--ghost:hover[b-5zs1uv7jp1] {
    background: #eff6ff;
    border-color: #2563eb;
}

/* ACTIVE */
.vx-btn--ghost:active[b-5zs1uv7jp1] {
    background: #dbeafe;
}

/* FOCUS */
.vx-btn--ghost:focus[b-5zs1uv7jp1] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

/* =========================================================
   FORM FIELD
   ========================================================= */

.vx-field[b-5zs1uv7jp1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.vx-label[b-5zs1uv7jp1] {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.vx-input[b-5zs1uv7jp1] {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .vx-input[b-5zs1uv7jp1]::placeholder {
        color: #94a3b8;
        font-weight: 500;
    }

    .vx-input:hover[b-5zs1uv7jp1] {
        border-color: #93c5fd;
    }

    .vx-input:focus[b-5zs1uv7jp1] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    }

/* /Components/Pages/OperationControl/TenantUsers/TenantUserWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: TenantUserWorkspace.razor.css

   PURPOSE:
   Scoped styles for the TenantUserWorkspace page in the
   Vixly Operations Plane.

   RESPONSIBILITIES:
   - Provide enterprise-grade employee workspace layout
   - Style the employee header, list card, invite card,
     alerts, table, badges, and responsive behavior
   - Keep visual language aligned with the existing Vixly UI
     system used by DispatchWorkspace and operational screens
   - Prevent styling leakage into unrelated workspaces

   IMPORTANT NOTES:
   - This file belongs beside TenantUserWorkspace.razor
   - Child panels should be styled through ::deep when they are
     introduced because Blazor CSS isolation scopes child markup
   - Do not move business logic into CSS or child components
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.vx-page[b-cihj2uo30l] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1.25rem;
    padding: 1.25rem;
}

/* =========================================================
   PAGE HEADER
   ========================================================= */

.vx-page__header[b-cihj2uo30l] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.vx-page__title[b-cihj2uo30l] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
}

.vx-page__subtitle[b-cihj2uo30l] {
    margin: 0;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.45;
}

/* =========================================================
   CARD SYSTEM
   ========================================================= */

.vx-card[b-cihj2uo30l] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.vx-card--error[b-cihj2uo30l] {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

.vx-card--invite[b-cihj2uo30l] {
    margin-top: 1rem;
}

.vx-card__header[b-cihj2uo30l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #edf2f7;
}

.vx-card__title[b-cihj2uo30l] {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
}

/* =========================================================
   TABLE
   ========================================================= */

.vx-table[b-cihj2uo30l] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

    .vx-table th[b-cihj2uo30l] {
        padding: 0.8rem 0.85rem;
        color: #475569;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .vx-table td[b-cihj2uo30l] {
        padding: 0.9rem 0.85rem;
        color: #0f172a;
        border-bottom: 1px solid #edf2f7;
        font-size: 0.92rem;
        line-height: 1.45;
        vertical-align: middle;
    }

    .vx-table tbody tr[b-cihj2uo30l] {
        transition: background 0.16s ease;
    }

        .vx-table tbody tr:hover[b-cihj2uo30l] {
            background: #f8fbff;
        }

        .vx-table tbody tr:last-child td[b-cihj2uo30l] {
            border-bottom: none;
        }

/* =========================================================
   BADGES
   ========================================================= */

.vx-badge[b-cihj2uo30l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.vx-badge--success[b-cihj2uo30l] {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.vx-badge--muted[b-cihj2uo30l] {
    color: #475569;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
}

/* =========================================================
   EMPTY / LOADING STATES
   ========================================================= */

.vx-card p[b-cihj2uo30l] {
    margin: 0;
    color: #64748b;
    font-size: 0.94rem;
    line-height: 1.5;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 920px) {
    .vx-card[b-cihj2uo30l] {
        overflow-x: auto;
    }

    .vx-table[b-cihj2uo30l] {
        min-width: 760px;
    }
}

@media (max-width: 720px) {
    .vx-page[b-cihj2uo30l] {
        padding: 0.85rem;
    }

    .vx-page__header[b-cihj2uo30l],
    .vx-card[b-cihj2uo30l] {
        border-radius: 16px;
        padding: 1rem;
    }

    .vx-card__header[b-cihj2uo30l] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* =========================================================
   MODAL
   ========================================================= */

.vx-modal-backdrop[b-cihj2uo30l] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.vx-modal[b-cihj2uo30l] {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.vx-modal__title[b-cihj2uo30l] {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-modal__text[b-cihj2uo30l] {
    margin: 0 0 1.25rem 0;
    color: #475569;
    font-size: 0.95rem;
}

.vx-modal__actions[b-cihj2uo30l] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

    /* =========================================================
   MODAL BUTTONS
   ========================================================= */

    .vx-modal__actions .vx-btn[b-cihj2uo30l] {
        height: 36px;
        padding: 0 16px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .vx-modal__actions .vx-btn--ghost[b-cihj2uo30l] {
        background: #ffffff;
        border: 1px solid #cbd5f5;
        color: #2563eb;
    }

        .vx-modal__actions .vx-btn--ghost:hover[b-cihj2uo30l] {
            background: #eff6ff;
            border-color: #2563eb;
        }

    .vx-modal__actions .vx-btn--primary[b-cihj2uo30l] {
        background: #2563eb;
        border: 1px solid #2563eb;
        color: #ffffff;
    }

        .vx-modal__actions .vx-btn--primary:hover[b-cihj2uo30l] {
            background: #1d4ed8;
            border-color: #1d4ed8;
        }
/* /Components/Pages/OperationControl/Tracking/Parts/ManualTrackingEventPanel.razor.rz.scp.css */
/* =========================================================
   FILE: ManualTrackingEventPanel.razor.css

   PURPOSE:
   Scoped styles for the manual tracking event panel.

   RESPONSIBILITIES:
   - Style the manual event card
   - Style event code, title, description, and visibility fields
   - Style submit action
   - Keep the component aligned with Operations.Web enterprise UI

   IMPORTANT NOTES:
   - This component is UI-only
   - TrackingWorkspace owns authorization and persistence
   ========================================================= */

.vx-manual-tracking-event[b-k4blhtfin5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.vx-manual-tracking-event__header h3[b-k4blhtfin5] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-manual-tracking-event__eyebrow[b-k4blhtfin5] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-manual-tracking-event__form[b-k4blhtfin5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vx-field[b-k4blhtfin5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

    .vx-field span[b-k4blhtfin5] {
        font-size: 0.78rem;
        font-weight: 850;
        color: #475569;
        line-height: 1.35;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .vx-field:nth-child(3)[b-k4blhtfin5] {
        grid-column: 1 / -1;
    }

.vx-input[b-k4blhtfin5] {
    width: 100%;
    min-width: 0;
    font: inherit;
    font-size: 0.94rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

select.vx-input[b-k4blhtfin5],
input.vx-input[b-k4blhtfin5] {
    height: 46px;
    padding: 0 0.9rem;
}

.vx-input--textarea[b-k4blhtfin5] {
    min-height: 118px;
    padding: 0.85rem 0.9rem;
    resize: vertical;
    line-height: 1.5;
}

.vx-input:focus[b-k4blhtfin5] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.vx-input:hover:not(:disabled)[b-k4blhtfin5] {
    border-color: #94a3b8;
}

.vx-manual-tracking-event__check[b-k4blhtfin5] {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e5edf5;
    color: #334155;
    font-size: 0.92rem;
    font-weight: 750;
}

    .vx-manual-tracking-event__check input[b-k4blhtfin5] {
        width: 18px;
        height: 18px;
        accent-color: #2563eb;
    }

.vx-button[b-k4blhtfin5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 1 / -1;
    width: fit-content;
    height: 46px;
    min-width: 142px;
    padding: 0 1.25rem;
    border: none;
    border-radius: 12px;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 850;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.vx-button--primary[b-k4blhtfin5] {
    color: #ffffff;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

    .vx-button--primary:hover:not(:disabled)[b-k4blhtfin5] {
        transform: translateY(-1px);
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3);
    }

.vx-button:disabled[b-k4blhtfin5] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

@media (max-width: 768px) {
    .vx-manual-tracking-event[b-k4blhtfin5] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-manual-tracking-event__form[b-k4blhtfin5] {
        grid-template-columns: 1fr;
    }

    .vx-button[b-k4blhtfin5] {
        width: 100%;
    }
}
/* /Components/Pages/OperationControl/Tracking/Parts/TrackingSearchPanel.razor.rz.scp.css */
/* =========================================================
   FILE: TrackingSearchPanel.razor.css

   PURPOSE:
   Scoped styles for the staff tracking search panel.

   RESPONSIBILITIES:
   - Style the tracking search hero card
   - Style subject type and subject id fields
   - Style search action button
   - Keep the component aligned with Operations.Web enterprise UI

   IMPORTANT NOTES:
   - This component is UI-only
   - Business logic belongs to TrackingWorkspace
   ========================================================= */

.vx-tracking-search[b-mnrdf7yi28] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 20px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 42%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.vx-tracking-search__header h2[b-mnrdf7yi28] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 900;
    color: #0f172a;
}

.vx-tracking-search__header p[b-mnrdf7yi28] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #475569;
    line-height: 1.65;
    font-size: 0.95rem;
}

.vx-tracking-search__eyebrow[b-mnrdf7yi28] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-tracking-search__form[b-mnrdf7yi28] {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
}

.vx-field[b-mnrdf7yi28] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

    .vx-field span[b-mnrdf7yi28] {
        font-size: 0.78rem;
        font-weight: 850;
        color: #475569;
        line-height: 1.35;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

.vx-input[b-mnrdf7yi28] {
    width: 100%;
    height: 46px;
    min-width: 0;
    padding: 0 0.9rem;
    font: inherit;
    font-size: 0.94rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .vx-input:focus[b-mnrdf7yi28] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    .vx-input:hover:not(:disabled)[b-mnrdf7yi28] {
        border-color: #94a3b8;
    }

.vx-button[b-mnrdf7yi28] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    min-width: 142px;
    padding: 0 1.25rem;
    border: none;
    border-radius: 12px;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 850;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.vx-button--primary[b-mnrdf7yi28] {
    color: #ffffff;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

    .vx-button--primary:hover:not(:disabled)[b-mnrdf7yi28] {
        transform: translateY(-1px);
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3);
    }

.vx-button:disabled[b-mnrdf7yi28] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

@media (max-width: 900px) {
    .vx-tracking-search__form[b-mnrdf7yi28] {
        grid-template-columns: 1fr;
    }

    .vx-button[b-mnrdf7yi28] {
        width: 100%;
    }
}
/* /Components/Pages/OperationControl/Tracking/Parts/TrackingTimelinePanel.razor.rz.scp.css */
/* =========================================================
   FILE: TrackingTimelinePanel.razor.css

   PURPOSE:
   Scoped styles for the tracking timeline panel.

   RESPONSIBILITIES:
   - Style timeline container
   - Style loading, empty, and error states
   - Style timeline event cards, markers, badges, and metadata
   - Keep the component aligned with Operations.Web enterprise UI

   IMPORTANT NOTES:
   - This component is UI-only
   - TrackingWorkspace owns data loading
   ========================================================= */

.vx-tracking-timeline[b-7ozqcsk3ij] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.vx-tracking-timeline__header h3[b-7ozqcsk3ij] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 850;
    color: #0f172a;
}

.vx-tracking-timeline__eyebrow[b-7ozqcsk3ij] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-tracking-timeline__state[b-7ozqcsk3ij] {
    padding: 1rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e5edf5;
    color: #64748b;
    line-height: 1.55;
    font-weight: 650;
}

.vx-tracking-timeline__list[b-7ozqcsk3ij] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.vx-tracking-timeline__item[b-7ozqcsk3ij] {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e5edf5;
}

.vx-tracking-timeline__marker[b-7ozqcsk3ij] {
    width: 12px;
    height: 12px;
    margin-top: 0.35rem;
    border-radius: 999px;
    background: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.vx-tracking-timeline__content[b-7ozqcsk3ij] {
    min-width: 0;
}

.vx-tracking-timeline__row[b-7ozqcsk3ij] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

    .vx-tracking-timeline__row h4[b-7ozqcsk3ij] {
        margin: 0;
        font-size: 1rem;
        font-weight: 850;
        color: #0f172a;
    }

.vx-tracking-timeline__content p[b-7ozqcsk3ij] {
    margin: 0.45rem 0 0;
    color: #475569;
    line-height: 1.6;
    font-size: 0.93rem;
}

.vx-tracking-timeline__badge[b-7ozqcsk3ij] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.72rem;
    border-radius: 999px;
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
}

.vx-tracking-timeline__meta[b-7ozqcsk3ij] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

    .vx-tracking-timeline__meta span[b-7ozqcsk3ij] {
        display: inline-flex;
        align-items: center;
        padding: 0.3rem 0.65rem;
        border-radius: 999px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        color: #64748b;
        font-size: 0.78rem;
        font-weight: 800;
    }

@media (max-width: 768px) {
    .vx-tracking-timeline[b-7ozqcsk3ij] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-tracking-timeline__row[b-7ozqcsk3ij] {
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* /Components/Pages/OperationControl/Tracking/TrackingWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: TrackingWorkspace.razor.css

   PURPOSE:
   Scoped styles for the Operations Tracking workspace.

   RESPONSIBILITIES:
   - Style the tracking workspace shell
   - Provide layout spacing for child tracking components
   - Style workspace-level state messages
   - Keep Tracking aligned with Operations.Web enterprise UI

   IMPORTANT NOTES:
   - TrackingWorkspace is an orchestrator only
   - Child components own their own scoped UI styling
   - No inline styles should be used in TrackingWorkspace.razor
   ========================================================= */

.vx-tracking-workspace[b-8cy403xida] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    min-width: 0;
}

.vx-tracking-workspace__state[b-8cy403xida] {
    width: 100%;
}
/* /Components/Pages/OperationControl/Warehouses/CreateWarehouse.razor.rz.scp.css */
/* =========================================================
   FILE: CreateWarehouse.razor.css

   PURPOSE:
   Fully self-contained styling for the CreateWarehouse form.

   RESPONSIBILITIES:
   - Style the create warehouse host panel
   - Style section cards, form grid, and validation states
   - Keep actions, alerts, and inputs visually consistent
   - Preserve responsive behavior for smaller screens
   - Isolate this component from generic/global control styles
   - Match input language used by DispatchWorkspace,
     CreateShipment, and ParcelEditor

   IMPORTANT NOTES:
   - This file styles ONLY CreateWarehouse.razor
   - No dependency on other components' scoped CSS
   - All interactive styling is component-owned
   - Blazor input components may require both local selectors
     and ::deep selectors for CSS isolation consistency
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.vx-create-warehouse[b-kfbdt9w8t1] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    padding: 1.25rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

/* =========================================================
   HEADER
   ========================================================= */

.vx-create-warehouse__header[b-kfbdt9w8t1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.vx-create-warehouse__heading[b-kfbdt9w8t1] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 820px;
}

    .vx-create-warehouse__heading h3[b-kfbdt9w8t1] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.25;
    }

    .vx-create-warehouse__heading p[b-kfbdt9w8t1] {
        margin: 0;
        color: #475569;
        line-height: 1.55;
        font-size: 0.94rem;
    }

/* =========================================================
   FORM
   ========================================================= */

.vx-create-warehouse__form[b-kfbdt9w8t1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =========================================================
   ALERTS
   ========================================================= */

.vx-create-warehouse__alert[b-kfbdt9w8t1] {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.45;
    font-weight: 700;
}

.vx-create-warehouse__alert--error[b-kfbdt9w8t1] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

/* =========================================================
   VALIDATION SUMMARY
   ========================================================= */

.vx-create-warehouse__validation-summary[b-kfbdt9w8t1] {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.92rem;
    line-height: 1.45;
    font-weight: 700;
}

    .vx-create-warehouse__validation-summary:empty[b-kfbdt9w8t1] {
        display: none;
    }

/* =========================================================
   SECTION CARDS
   ========================================================= */

.vx-create-warehouse__card[b-kfbdt9w8t1] {
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.vx-create-warehouse__card-header[b-kfbdt9w8t1] {
    padding: 1rem 1.1rem 0.8rem 1.1rem;
    border-bottom: 1px solid #edf2f7;
}

    .vx-create-warehouse__card-header h4[b-kfbdt9w8t1] {
        margin: 0;
        font-size: 1rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.3;
    }

.vx-create-warehouse__card-body[b-kfbdt9w8t1] {
    padding: 1.1rem;
}

/* =========================================================
   GRID
   ========================================================= */

.vx-create-warehouse__grid[b-kfbdt9w8t1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 1rem;
    align-items: start;
}

.vx-create-warehouse__field[b-kfbdt9w8t1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.vx-create-warehouse__field--full[b-kfbdt9w8t1] {
    grid-column: 1 / -1;
}

.vx-create-warehouse__field label[b-kfbdt9w8t1] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
}

/* =========================================================
   INPUTS / SELECTS
   ========================================================= */

.vx-create-warehouse__input[b-kfbdt9w8t1],
[b-kfbdt9w8t1] .vx-create-warehouse__input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 0.9rem;
    font: inherit;
    font-size: 0.94rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

    .vx-create-warehouse__input:hover:not(:disabled)[b-kfbdt9w8t1],
    [b-kfbdt9w8t1] .vx-create-warehouse__input:hover:not(:disabled) {
        border-color: #94a3b8;
    }

    .vx-create-warehouse__input:focus[b-kfbdt9w8t1],
    [b-kfbdt9w8t1] .vx-create-warehouse__input:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    .vx-create-warehouse__input:disabled[b-kfbdt9w8t1],
    [b-kfbdt9w8t1] .vx-create-warehouse__input:disabled {
        color: #64748b;
        background: #f8fafc;
        border-color: #dbe5f0;
        cursor: not-allowed;
    }

    .vx-create-warehouse__input[b-kfbdt9w8t1]::placeholder,
    [b-kfbdt9w8t1] .vx-create-warehouse__input::placeholder {
        color: #94a3b8;
    }

.vx-create-warehouse__select[b-kfbdt9w8t1],
[b-kfbdt9w8t1] .vx-create-warehouse__select {
    cursor: pointer;
    padding-right: 2.75rem;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

/* =========================================================
   VALIDATION MESSAGES
   ========================================================= */

.vx-create-warehouse__validation-message[b-kfbdt9w8t1] {
    margin-top: 0.05rem;
    font-size: 0.82rem;
    line-height: 1.4;
    font-weight: 700;
    color: #b91c1c;
}

[b-kfbdt9w8t1] .validation-message {
    color: #b91c1c;
    font-size: 0.82rem;
    line-height: 1.4;
    font-weight: 700;
}

/* =========================================================
   BLAZOR / VALIDATION ISOLATION
   ========================================================= */

.vx-create-warehouse__input.valid.modified:not([type="checkbox"])[b-kfbdt9w8t1],
[b-kfbdt9w8t1] .vx-create-warehouse__input.valid.modified:not([type="checkbox"]) {
    border-color: #cbd5e1;
    box-shadow: none;
}

.vx-create-warehouse__input.invalid[b-kfbdt9w8t1],
.vx-create-warehouse__input.input-validation-error[b-kfbdt9w8t1],
[b-kfbdt9w8t1] .vx-create-warehouse__input.invalid,
[b-kfbdt9w8t1] .vx-create-warehouse__input.input-validation-error {
    border-color: #fca5a5;
    background: #fffafa;
}

    .vx-create-warehouse__input.invalid:focus[b-kfbdt9w8t1],
    .vx-create-warehouse__input.input-validation-error:focus[b-kfbdt9w8t1],
    [b-kfbdt9w8t1] .vx-create-warehouse__input.invalid:focus,
    [b-kfbdt9w8t1] .vx-create-warehouse__input.input-validation-error:focus {
        border-color: #dc2626;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
    }

/* =========================================================
   ACTIONS
   ========================================================= */

.vx-create-warehouse__actions[b-kfbdt9w8t1] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.vx-create-warehouse__button[b-kfbdt9w8t1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 42px;
    padding: 0 1rem;
    border-radius: 10px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

    .vx-create-warehouse__button:hover:not(:disabled)[b-kfbdt9w8t1] {
        transform: translateY(-1px);
    }

    .vx-create-warehouse__button:disabled[b-kfbdt9w8t1] {
        cursor: not-allowed;
        opacity: 0.6;
        box-shadow: none;
        transform: none;
    }

.vx-create-warehouse__button--primary[b-kfbdt9w8t1] {
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

    .vx-create-warehouse__button--primary:hover:not(:disabled)[b-kfbdt9w8t1] {
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3);
    }

.vx-create-warehouse__button--secondary[b-kfbdt9w8t1] {
    color: #334155;
    background: #f8fafc;
    border: 1px solid #d6e0ea;
}

    .vx-create-warehouse__button--secondary:hover:not(:disabled)[b-kfbdt9w8t1] {
        color: #0f172a;
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .vx-create-warehouse__grid[b-kfbdt9w8t1] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .vx-create-warehouse__field--full[b-kfbdt9w8t1] {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .vx-create-warehouse[b-kfbdt9w8t1] {
        padding: 1rem;
        border-radius: 16px;
    }

    .vx-create-warehouse__heading h3[b-kfbdt9w8t1] {
        font-size: 1.15rem;
    }

    .vx-create-warehouse__heading p[b-kfbdt9w8t1] {
        font-size: 0.92rem;
    }

    .vx-create-warehouse__card[b-kfbdt9w8t1] {
        border-radius: 16px;
    }

    .vx-create-warehouse__card-header[b-kfbdt9w8t1] {
        padding: 1rem 1rem 0.75rem 1rem;
    }

    .vx-create-warehouse__card-body[b-kfbdt9w8t1] {
        padding: 1rem;
    }

    .vx-create-warehouse__actions[b-kfbdt9w8t1] {
        align-items: stretch;
        flex-direction: column;
        justify-content: stretch;
    }

    .vx-create-warehouse__button[b-kfbdt9w8t1] {
        width: 100%;
    }
}
/* /Components/Pages/OperationControl/Warehouses/EditWarehouse.razor.rz.scp.css */
/* =========================================================
   FILE: EditWarehouse.razor.css

   PURPOSE:
   Scoped styles for Edit Warehouse UI component.

   RESPONSIBILITIES:
   - Align with CreateWarehouse / Dispatch input language
   - Ensure proper styling of Blazor inputs (InputText, InputSelect, InputNumber)
   - Maintain enterprise UI consistency
   - Fix previous issue where inputs were not styled

   IMPORTANT NOTES:
   - Uses dual selector strategy: normal + ::deep
   - Required for Blazor CSS isolation to affect inputs
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.vx-edit-warehouse[b-r52x17d0w8] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

/* =========================================================
   HEADER
   ========================================================= */

.vx-edit-warehouse__header[b-r52x17d0w8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.vx-edit-warehouse__heading h3[b-r52x17d0w8] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
}

.vx-edit-warehouse__heading p[b-r52x17d0w8] {
    margin: 0.35rem 0 0;
    color: #475569;
    font-size: 0.94rem;
}

/* =========================================================
   FORM
   ========================================================= */

.vx-edit-warehouse__form[b-r52x17d0w8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vx-edit-warehouse__grid[b-r52x17d0w8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =========================================================
   CARD
   ========================================================= */

.vx-edit-warehouse__card[b-r52x17d0w8] {
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    background: #ffffff;
}

.vx-edit-warehouse__card-header[b-r52x17d0w8] {
    padding: 1rem 1.1rem 0.8rem;
    border-bottom: 1px solid #edf2f7;
}

    .vx-edit-warehouse__card-header h4[b-r52x17d0w8] {
        margin: 0;
        font-size: 1rem;
        font-weight: 800;
        color: #0f172a;
    }

.vx-edit-warehouse__card-body[b-r52x17d0w8] {
    padding: 1.1rem;
}

/* =========================================================
   GRID
   ========================================================= */

.vx-edit-warehouse__field-grid[b-r52x17d0w8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 1rem;
}

.vx-edit-warehouse__field[b-r52x17d0w8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vx-edit-warehouse__field--full[b-r52x17d0w8] {
    grid-column: 1 / -1;
}

/* =========================================================
   LABEL
   ========================================================= */

.vx-edit-warehouse__field label[b-r52x17d0w8] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
}

/* =========================================================
   INPUT SYSTEM (FIXED)
   ========================================================= */

.vx-edit-warehouse__input[b-r52x17d0w8],
[b-r52x17d0w8] .vx-edit-warehouse__input {
    width: 100%;
    height: 46px;
    padding: 0 0.9rem;
    font: inherit;
    font-size: 0.94rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.15s ease;
}

    .vx-edit-warehouse__input:hover:not(:disabled)[b-r52x17d0w8],
    [b-r52x17d0w8] .vx-edit-warehouse__input:hover:not(:disabled) {
        border-color: #94a3b8;
    }

    .vx-edit-warehouse__input:focus[b-r52x17d0w8],
    [b-r52x17d0w8] .vx-edit-warehouse__input:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    .vx-edit-warehouse__input:disabled[b-r52x17d0w8],
    [b-r52x17d0w8] .vx-edit-warehouse__input:disabled {
        background: #f8fafc;
        color: #64748b;
    }

    .vx-edit-warehouse__input[b-r52x17d0w8]::placeholder,
    [b-r52x17d0w8] .vx-edit-warehouse__input::placeholder {
        color: #94a3b8;
    }

.vx-edit-warehouse__select[b-r52x17d0w8],
[b-r52x17d0w8] .vx-edit-warehouse__select {
    cursor: pointer;
    appearance: none;
    padding-right: 2.75rem;
}

/* =========================================================
   VALIDATION
   ========================================================= */

.vx-edit-warehouse__validation-summary[b-r52x17d0w8] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-weight: 700;
}

.vx-edit-warehouse__validation-message[b-r52x17d0w8] {
    font-size: 0.82rem;
    color: #b91c1c;
    font-weight: 700;
}

/* =========================================================
   ERROR
   ========================================================= */

.vx-edit-warehouse__state--error[b-r52x17d0w8] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 0.85rem 1rem;
    border-radius: 12px;
}

/* =========================================================
   ACTIONS
   ========================================================= */

.vx-edit-warehouse__actions[b-r52x17d0w8] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.vx-edit-warehouse__button[b-r52x17d0w8] {
    height: 42px;
    padding: 0 1rem;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
}

.vx-edit-warehouse__button--primary[b-r52x17d0w8] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.vx-edit-warehouse__button--secondary[b-r52x17d0w8] {
    background: #f8fafc;
    border: 1px solid #d6e0ea;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .vx-edit-warehouse__field-grid[b-r52x17d0w8] {
        grid-template-columns: 1fr;
    }

    .vx-edit-warehouse__actions[b-r52x17d0w8] {
        flex-direction: column;
    }

    .vx-edit-warehouse__button[b-r52x17d0w8] {
        width: 100%;
    }
}
/* /Components/Pages/OperationControl/Warehouses/WarehouseDetails.razor.rz.scp.css */
/* =========================================================
   FILE: WarehouseDetails.razor.css

   PURPOSE:
   Styles for the warehouse details page.

   RESPONSIBILITIES:
   - Style the warehouse details header
   - Style details cards and information layout
   - Provide consistent field grid structure
   - Support header action buttons
   - Align with Operations UI system
   ========================================================= */

.vx-warehouse-details[b-8vjl5pww94] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* =========================================================
   HEADER
   ========================================================= */

.vx-warehouse-details__header[b-8vjl5pww94] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.vx-warehouse-details__header-left[b-8vjl5pww94] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.vx-warehouse-details__title-wrap h3[b-8vjl5pww94] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}

.vx-warehouse-details__title-wrap p[b-8vjl5pww94] {
    margin: 0;
    color: #64748b;
    font-size: 0.95rem;
}

.vx-warehouse-details__header-actions[b-8vjl5pww94] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.vx-warehouse-details__edit-button[b-8vjl5pww94] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.7rem 1rem;
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

    .vx-warehouse-details__edit-button:hover:not(:disabled)[b-8vjl5pww94] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    .vx-warehouse-details__edit-button:active:not(:disabled)[b-8vjl5pww94] {
        transform: translateY(1px);
    }

    .vx-warehouse-details__edit-button:disabled[b-8vjl5pww94] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.vx-warehouse-details__back-button[b-8vjl5pww94] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.7rem 1rem;
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

    .vx-warehouse-details__back-button:hover[b-8vjl5pww94] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

    .vx-warehouse-details__back-button:active[b-8vjl5pww94] {
        transform: translateY(1px);
    }

/* =========================================================
   STATE PANELS
   ========================================================= */

.vx-warehouse-details__state[b-8vjl5pww94] {
    padding: 1rem 1.1rem;
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.vx-warehouse-details__state--error[b-8vjl5pww94] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* =========================================================
   DETAILS GRID
   ========================================================= */

.vx-warehouse-details__grid[b-8vjl5pww94] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* =========================================================
   CARD
   ========================================================= */

.vx-warehouse-details__card[b-8vjl5pww94] {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.vx-warehouse-details__card-header[b-8vjl5pww94] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eef2f7;
}

    .vx-warehouse-details__card-header h4[b-8vjl5pww94] {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: #0f172a;
    }

.vx-warehouse-details__card-body[b-8vjl5pww94] {
    padding: 1.25rem;
}

/* =========================================================
   FIELD GRID
   ========================================================= */

.vx-warehouse-details__field-grid[b-8vjl5pww94] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.vx-warehouse-details__field[b-8vjl5pww94] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vx-warehouse-details__label[b-8vjl5pww94] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.vx-warehouse-details__value[b-8vjl5pww94] {
    font-size: 0.95rem;
    color: #0f172a;
    word-break: break-word;
}

/* =========================================================
   STATUS
   ========================================================= */

.vx-status-pill[b-8vjl5pww94] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .vx-warehouse-details__header[b-8vjl5pww94] {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-warehouse-details__header-actions[b-8vjl5pww94] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .vx-warehouse-details__edit-button[b-8vjl5pww94],
    .vx-warehouse-details__back-button[b-8vjl5pww94] {
        width: 100%;
    }
}
/* /Components/Pages/OperationControl/Warehouses/WarehouseList.razor.rz.scp.css */
/* =========================================================
   FILE: WarehouseList.razor.css

   PURPOSE:
   Scoped styles for the WarehouseList component.

   RESPONSIBILITIES:
   - Style header
   - Style filter inputs and selects using the current Vixly
     Operations input language
   - Style table and actions
   - Style results summary
   - Style pagination
   - Maintain consistent Operations UI system

   IMPORTANT NOTES:
   - This file is scoped to WarehouseList.razor
   - No global layout behavior should be introduced here
   - This component remains presentational only
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

.vx-warehouse-list[b-5bfxa0w95v] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

/* =========================================================
   HEADER
   ========================================================= */

.vx-warehouse-list__header[b-5bfxa0w95v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.vx-warehouse-list__title-wrap[b-5bfxa0w95v] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

    .vx-warehouse-list__title-wrap h3[b-5bfxa0w95v] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.25;
    }

    .vx-warehouse-list__title-wrap p[b-5bfxa0w95v] {
        margin: 0;
        color: #475569;
        line-height: 1.55;
        font-size: 0.94rem;
    }

.vx-warehouse-list__create-button[b-5bfxa0w95v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 46px;
    padding: 0 1.25rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, opacity 0.16s ease;
}

    .vx-warehouse-list__create-button:hover:not(:disabled)[b-5bfxa0w95v] {
        transform: translateY(-1px);
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3);
    }

    .vx-warehouse-list__create-button:active:not(:disabled)[b-5bfxa0w95v] {
        transform: translateY(0);
        box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);
    }

/* =========================================================
   FILTER SECTION
   ========================================================= */

.vx-warehouse-list__filters[b-5bfxa0w95v] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.vx-warehouse-list__filters-grid[b-5bfxa0w95v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.vx-warehouse-list__filter-field[b-5bfxa0w95v] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

    .vx-warehouse-list__filter-field label[b-5bfxa0w95v] {
        font-size: 0.9rem;
        font-weight: 700;
        color: #1e293b;
        line-height: 1.35;
    }

/* =========================================================
   FILTER INPUTS / SELECTS
   ========================================================= */

.vx-warehouse-list__input[b-5bfxa0w95v],
[b-5bfxa0w95v] .vx-warehouse-list__input {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 0.9rem;
    font: inherit;
    font-size: 0.94rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

    .vx-warehouse-list__input:hover:not(:disabled)[b-5bfxa0w95v],
    [b-5bfxa0w95v] .vx-warehouse-list__input:hover:not(:disabled) {
        border-color: #94a3b8;
    }

    .vx-warehouse-list__input:focus[b-5bfxa0w95v],
    [b-5bfxa0w95v] .vx-warehouse-list__input:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    .vx-warehouse-list__input:disabled[b-5bfxa0w95v],
    [b-5bfxa0w95v] .vx-warehouse-list__input:disabled {
        color: #64748b;
        background: #f8fafc;
        border-color: #dbe5f0;
        cursor: not-allowed;
    }

    .vx-warehouse-list__input[b-5bfxa0w95v]::placeholder,
    [b-5bfxa0w95v] .vx-warehouse-list__input::placeholder {
        color: #94a3b8;
    }

.vx-warehouse-list__select[b-5bfxa0w95v],
[b-5bfxa0w95v] .vx-warehouse-list__select {
    cursor: pointer;
    padding-right: 2.75rem;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.vx-warehouse-list__filter-actions[b-5bfxa0w95v] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.vx-warehouse-list__secondary-button[b-5bfxa0w95v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 42px;
    padding: 0 1rem;
    border: 1px solid #d6e0ea;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

    .vx-warehouse-list__secondary-button:hover:not(:disabled)[b-5bfxa0w95v] {
        transform: translateY(-1px);
        color: #0f172a;
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

    .vx-warehouse-list__secondary-button:disabled[b-5bfxa0w95v] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

/* =========================================================
   RESULTS SUMMARY
   ========================================================= */

.vx-warehouse-list__results-summary[b-5bfxa0w95v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.88rem;
    color: #475569;
    padding: 0 0.25rem;
}

    .vx-warehouse-list__results-summary strong[b-5bfxa0w95v] {
        color: #0f172a;
        font-weight: 800;
    }

/* =========================================================
   TABLE WRAP
   ========================================================= */

.vx-warehouse-list__table-wrap[b-5bfxa0w95v] {
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

/* =========================================================
   TABLE
   ========================================================= */

.vx-table[b-5bfxa0w95v] {
    width: 100%;
    min-width: 780px;
    border-collapse: separate;
    border-spacing: 0;
}

.vx-table__th[b-5bfxa0w95v] {
    padding: 0.95rem 1rem;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 800;
    color: #475569;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.vx-table__td[b-5bfxa0w95v] {
    padding: 0.95rem 1rem;
    font-size: 0.94rem;
    color: #0f172a;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
}

.vx-table tbody tr:last-child .vx-table__td[b-5bfxa0w95v] {
    border-bottom: none;
}

.vx-table tbody tr:hover[b-5bfxa0w95v] {
    background: #f8fbff;
}

/* =========================================================
   CLICKABLE NAME
   ========================================================= */

.vx-warehouse-list__link-button[b-5bfxa0w95v] {
    padding: 0;
    border: none;
    background: transparent;
    color: #1d4ed8;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s ease;
}

    .vx-warehouse-list__link-button:hover[b-5bfxa0w95v] {
        color: #1e40af;
        text-decoration: underline;
    }

/* =========================================================
   STATUS
   ========================================================= */

.vx-status-pill[b-5bfxa0w95v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.25rem 0.72rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

/* =========================================================
   ACTION COLUMN
   ========================================================= */

.vx-table__th--actions[b-5bfxa0w95v],
.vx-table__td--actions[b-5bfxa0w95v] {
    width: 90px;
    text-align: center;
}

/* =========================================================
   ACTION BUTTON
   ========================================================= */

.vx-action-button[b-5bfxa0w95v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #d6e0ea;
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

    .vx-action-button:hover:not(:disabled)[b-5bfxa0w95v] {
        transform: translateY(-1px);
        background: #eff6ff;
        border-color: #bfdbfe;
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
    }

    .vx-action-button:active:not(:disabled)[b-5bfxa0w95v] {
        transform: translateY(0);
    }

.vx-action-button__icon[b-5bfxa0w95v] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #334155;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.vx-warehouse-list__pagination[b-5bfxa0w95v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.vx-warehouse-list__pagination-info[b-5bfxa0w95v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.25rem 0.75rem;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 700;
}

/* =========================================================
   STATES
   ========================================================= */

.vx-warehouse-list__state[b-5bfxa0w95v] {
    padding: 1rem 1.1rem;
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
    font-size: 0.94rem;
    line-height: 1.45;
    font-weight: 700;
}

.vx-warehouse-list__state--error[b-5bfxa0w95v] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .vx-warehouse-list__header[b-5bfxa0w95v] {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-warehouse-list__create-button[b-5bfxa0w95v] {
        width: 100%;
    }

    .vx-warehouse-list__filters-grid[b-5bfxa0w95v] {
        grid-template-columns: 1fr;
    }

    .vx-warehouse-list__filter-actions[b-5bfxa0w95v] {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-warehouse-list__secondary-button[b-5bfxa0w95v] {
        width: 100%;
    }

    .vx-warehouse-list__pagination[b-5bfxa0w95v] {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-warehouse-list__pagination-info[b-5bfxa0w95v] {
        width: 100%;
    }
}
/* /Components/Pages/Reports/ReportsWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: ReportsWorkspace.razor.css

   PURPOSE:
   Enterprise-grade styling for the Operations Reports
   under-construction workspace.

   RESPONSIBILITIES:
   - Present a polished reports placeholder page
   - Maintain Vixly Operations visual language
   - Provide clear under-construction messaging
   - Avoid dependency on external illustration assets

   IMPORTANT NOTES:
   - Scoped only to ReportsWorkspace.razor
   ========================================================= */

.vx-under-construction[b-g3ibmfh0hd] {
    min-height: calc(100vh - 96px);
    display: grid;
    place-items: center;
    padding: 48px 24px;
    background: radial-gradient(circle at 14% 12%, rgba(59, 130, 246, 0.16), transparent 30%), radial-gradient(circle at 86% 16%, rgba(14, 165, 233, 0.12), transparent 26%), linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
}

.vx-under-construction__card[b-g3ibmfh0hd] {
    position: relative;
    width: min(100%, 960px);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 64px 48px;
    border-radius: 36px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(191, 219, 254, 0.68);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 100px rgba(15, 23, 42, 0.12), 0 12px 34px rgba(15, 23, 42, 0.06);
}

    .vx-under-construction__card[b-g3ibmfh0hd]::before,
    .vx-under-construction__card[b-g3ibmfh0hd]::after {
        content: "";
        position: absolute;
        border-radius: 999px;
        border: 1px dashed rgba(59, 130, 246, 0.24);
        pointer-events: none;
    }

    .vx-under-construction__card[b-g3ibmfh0hd]::before {
        width: 360px;
        height: 360px;
        top: -120px;
        left: -110px;
    }

    .vx-under-construction__card[b-g3ibmfh0hd]::after {
        width: 280px;
        height: 280px;
        right: -90px;
        bottom: -110px;
        transform: rotate(18deg);
    }

.vx-under-construction__eyebrow[b-g3ibmfh0hd] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    margin-bottom: 22px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.10);
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-under-construction h2[b-g3ibmfh0hd] {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #0f172a;
    font-size: 48px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.vx-under-construction p[b-g3ibmfh0hd] {
    position: relative;
    z-index: 1;
    width: min(100%, 680px);
    margin: 18px 0 0;
    color: #475569;
    font-size: 16px;
    line-height: 1.75;
}

@media (max-width: 900px) {
    .vx-under-construction[b-g3ibmfh0hd] {
        padding: 32px 18px;
    }

    .vx-under-construction__card[b-g3ibmfh0hd] {
        padding: 44px 26px;
        border-radius: 28px;
    }

    .vx-under-construction h2[b-g3ibmfh0hd] {
        font-size: 36px;
    }
}
/* /Components/Pages/Shared/ConfirmModal.razor.rz.scp.css */
/* =========================================================
   FILE: ConfirmModal.razor.css

   PURPOSE:
   Scoped styling for the shared Vixly confirmation modal.

   RESPONSIBILITIES:
   - Style modal backdrop
   - Style confirmation dialog
   - Style confirm/cancel actions
   - Support normal and destructive confirmation flows

   IMPORTANT NOTES:
   - Scoped only to ConfirmModal.razor
   - No global selectors
   ========================================================= */

.vx-confirm-modal-backdrop[b-x8pioj6rdc] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
}

.vx-confirm-modal[b-x8pioj6rdc] {
    width: min(100%, 460px);
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28), 0 8px 24px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.vx-confirm-modal__header[b-x8pioj6rdc] {
    padding: 26px 28px 10px 28px;
}

.vx-confirm-modal__title[b-x8pioj6rdc] {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 800;
}

.vx-confirm-modal__body[b-x8pioj6rdc] {
    padding: 0 28px 24px 28px;
}

.vx-confirm-modal__message[b-x8pioj6rdc] {
    margin: 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.7;
}

.vx-confirm-modal__footer[b-x8pioj6rdc] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 28px 28px 28px;
}

.vx-btn[b-x8pioj6rdc] {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vx-btn--secondary[b-x8pioj6rdc] {
    background: #f8fafc;
    color: #334155;
    border-color: #cbd5e1;
}

    .vx-btn--secondary:hover[b-x8pioj6rdc] {
        background: #f1f5f9;
    }

.vx-btn--primary[b-x8pioj6rdc] {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

    .vx-btn--primary:hover[b-x8pioj6rdc] {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.vx-btn--danger[b-x8pioj6rdc] {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

    .vx-btn--danger:hover[b-x8pioj6rdc] {
        background: #b91c1c;
        border-color: #b91c1c;
    }

@media (max-width: 640px) {
    .vx-confirm-modal__footer[b-x8pioj6rdc] {
        flex-direction: column-reverse;
    }

    .vx-btn[b-x8pioj6rdc] {
        width: 100%;
    }
}
/* /Components/Pages/Shared/Customers/CustomerSearchPanel.razor.rz.scp.css */
/* =========================================================
   FILE: CustomerSearchPanel.razor.css

   PURPOSE:
   Scoped styles for the reusable CustomerSearchPanel component.

   RESPONSIBILITIES:
   - Style the customer lookup hero
   - Render the customer search and summary card layout
   - Style phone search input, actions, and Enter-key workflow
   - Style empty and loaded customer summary states
   - Keep the component aligned with Operations.Web enterprise UI

   IMPORTANT NOTES:
   - This file contains no business logic
   - No inline styling should be used in the Razor file
   - Styles are scoped to vx-customer-search-panel
   ========================================================= */

.vx-customer-search-panel[b-8cdy4snlrz] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    min-width: 0;
}

/* =========================================================
   HERO
   ========================================================= */

.vx-customer-search-panel__hero[b-8cdy4snlrz] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 20px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 42%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.vx-customer-search-panel__hero-left[b-8cdy4snlrz] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.vx-customer-search-panel__hero-icon[b-8cdy4snlrz] {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(147, 197, 253, 0.85);
    color: #2563eb;
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14);
}

    .vx-customer-search-panel__hero-icon svg[b-8cdy4snlrz] {
        width: 30px;
        height: 30px;
    }

.vx-customer-search-panel__eyebrow[b-8cdy4snlrz],
.vx-customer-search-panel__section-badge[b-8cdy4snlrz] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-customer-search-panel__title[b-8cdy4snlrz] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 900;
    color: #0f172a;
}

.vx-customer-search-panel__subtitle[b-8cdy4snlrz] {
    margin: 0.45rem 0 0;
    max-width: 48rem;
    color: #475569;
    line-height: 1.65;
    font-size: 0.95rem;
}

/* =========================================================
   GRID / CARD
   ========================================================= */

.vx-customer-search-panel__grid[b-8cdy4snlrz] {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(420px, 1.35fr);
    gap: 1.25rem;
    align-items: stretch;
}

.vx-customer-search-panel__card[b-8cdy4snlrz] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.vx-customer-search-panel__card-header[b-8cdy4snlrz] {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid #edf2f7;
}

    .vx-customer-search-panel__card-header h3[b-8cdy4snlrz] {
        margin: 0;
        font-size: 1.08rem;
        font-weight: 850;
        color: #0f172a;
    }

    .vx-customer-search-panel__card-header p[b-8cdy4snlrz] {
        margin: 0.45rem 0 0;
        max-width: 42rem;
        color: #64748b;
        line-height: 1.65;
        font-size: 0.93rem;
    }

.vx-customer-search-panel__card-body[b-8cdy4snlrz] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.25rem;
    gap: 1rem;
}

/* =========================================================
   SEARCH
   ========================================================= */

.vx-customer-search-panel__instruction[b-8cdy4snlrz] {
    margin: 0;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e5edf5;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #475569;
}

.vx-customer-search-panel__field[b-8cdy4snlrz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vx-customer-search-panel__label[b-8cdy4snlrz] {
    font-size: 0.78rem;
    font-weight: 850;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vx-customer-search-panel__input-row[b-8cdy4snlrz] {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.vx-customer-search-panel__input-shell[b-8cdy4snlrz] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.vx-customer-search-panel__input-icon[b-8cdy4snlrz] {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #64748b;
    pointer-events: none;
}

.vx-customer-search-panel__input[b-8cdy4snlrz] {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 1rem 0 2.7rem;
    font-size: 0.95rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    transition: all 0.15s ease;
}

    .vx-customer-search-panel__input:focus[b-8cdy4snlrz] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    .vx-customer-search-panel__input[b-8cdy4snlrz]::placeholder {
        color: #94a3b8;
    }

/* =========================================================
   ACTIONS
   ========================================================= */

.vx-customer-search-panel__search-button[b-8cdy4snlrz],
.vx-customer-search-panel__clear-button[b-8cdy4snlrz],
.vx-customer-search-panel__shipment-badge[b-8cdy4snlrz],
.vx-customer-search-panel__new-shipment-button[b-8cdy4snlrz] {
    font: inherit;
    cursor: pointer;
    border: none;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

.vx-customer-search-panel__search-button[b-8cdy4snlrz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: 132px;
    height: 48px;
    padding: 0 1.4rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
    white-space: nowrap;
}

    .vx-customer-search-panel__search-button:hover:not(:disabled)[b-8cdy4snlrz] {
        transform: translateY(-1px);
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3);
    }

    .vx-customer-search-panel__search-button:disabled[b-8cdy4snlrz] {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none;
    }

.vx-customer-search-panel__spinner[b-8cdy4snlrz] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.38);
    border-top-color: #ffffff;
    border-radius: 999px;
    animation: vx-customer-search-panel-spin-b-8cdy4snlrz 0.75s linear infinite;
}

.vx-customer-search-panel__secondary-actions[b-8cdy4snlrz] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.vx-customer-search-panel__clear-button[b-8cdy4snlrz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    height: 40px;
    padding: 0 1rem;
    font-size: 0.92rem;
    font-weight: 800;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #d6e0ea;
    border-radius: 10px;
}

    .vx-customer-search-panel__clear-button:hover[b-8cdy4snlrz] {
        background: #f1f5f9;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

/* =========================================================
   SUMMARY
   ========================================================= */

.vx-customer-search-panel__summary-content[b-8cdy4snlrz] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1rem;
}

.vx-customer-search-panel__empty-state[b-8cdy4snlrz] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 220px;
    padding: 1rem;
    text-align: center;
    color: #64748b;
}

.vx-customer-search-panel__empty-icon[b-8cdy4snlrz] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
}

    .vx-customer-search-panel__empty-icon svg[b-8cdy4snlrz] {
        width: 28px;
        height: 28px;
    }

.vx-customer-search-panel__identity[b-8cdy4snlrz] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #e5edf5;
    border-radius: 14px;
    background: #f8fafc;
}

.vx-customer-search-panel__avatar[b-8cdy4snlrz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.2);
}

.vx-customer-search-panel__identity-meta[b-8cdy4snlrz] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.vx-customer-search-panel__customer-name[b-8cdy4snlrz] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.3;
}

.vx-customer-search-panel__contact-line[b-8cdy4snlrz] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.94rem;
    color: #475569;
    word-break: break-word;
}

.vx-customer-search-panel__contact-icon[b-8cdy4snlrz] {
    flex-shrink: 0;
}

.vx-customer-search-panel__contact-link[b-8cdy4snlrz] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.15s ease;
    word-break: break-word;
}

    .vx-customer-search-panel__contact-link:hover[b-8cdy4snlrz] {
        color: #1d4ed8;
        text-decoration: underline;
    }

.vx-customer-search-panel__summary-row[b-8cdy4snlrz] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    background: #fcfdff;
}

.vx-customer-search-panel__summary-label[b-8cdy4snlrz] {
    font-size: 0.78rem;
    font-weight: 850;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vx-customer-search-panel__standing[b-8cdy4snlrz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.72rem;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
}

.vx-customer-search-panel__standing--good[b-8cdy4snlrz] {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.vx-customer-search-panel__standing--not-good[b-8cdy4snlrz] {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.vx-customer-search-panel__shipment-badge[b-8cdy4snlrz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 34px;
    padding: 0 0.8rem;
    font-size: 0.9rem;
    font-weight: 900;
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
}

.vx-customer-search-panel__shipment-badge--clickable[b-8cdy4snlrz] {
    cursor: pointer;
}

.vx-customer-search-panel__shipment-badge--disabled[b-8cdy4snlrz] {
    cursor: default;
    opacity: 0.65;
    pointer-events: none;
}

.vx-customer-search-panel__summary-row--shipments[b-8cdy4snlrz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .vx-customer-search-panel__summary-row--shipments .vx-customer-search-panel__shipment-badge[b-8cdy4snlrz] {
        margin-right: auto;
    }

.vx-customer-search-panel__new-shipment-button[b-8cdy4snlrz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: 48px;
    padding: 0 1.25rem;
    font-size: 0.96rem;
    font-weight: 900;
    color: #ffffff;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 12px;
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.24);
}

    .vx-customer-search-panel__new-shipment-button:hover[b-8cdy4snlrz] {
        transform: translateY(-1px);
        box-shadow: 0 16px 28px rgba(37, 99, 235, 0.28);
    }

/* =========================================================
   SUMMARY MESSAGE
   ========================================================= */

.vx-customer-search-panel__summary-message[b-8cdy4snlrz] {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.55;
    font-weight: 700;
}

.vx-customer-search-panel__summary-message--error[b-8cdy4snlrz] {
    color: #b91c1c;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@keyframes vx-customer-search-panel-spin-b-8cdy4snlrz {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1100px) {
    .vx-customer-search-panel__grid[b-8cdy4snlrz] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .vx-customer-search-panel[b-8cdy4snlrz] {
        gap: 1rem;
    }

    .vx-customer-search-panel__hero[b-8cdy4snlrz] {
        padding: 1rem;
        border-radius: 18px;
    }

    .vx-customer-search-panel__hero-left[b-8cdy4snlrz] {
        flex-direction: column;
    }

    .vx-customer-search-panel__hero-icon[b-8cdy4snlrz] {
        width: 56px;
        height: 56px;
    }

    .vx-customer-search-panel__title[b-8cdy4snlrz] {
        font-size: 1.22rem;
    }

    .vx-customer-search-panel__subtitle[b-8cdy4snlrz] {
        font-size: 0.91rem;
    }

    .vx-customer-search-panel__input-row[b-8cdy4snlrz],
    .vx-customer-search-panel__summary-row--shipments[b-8cdy4snlrz] {
        flex-direction: column;
        align-items: stretch;
    }

    .vx-customer-search-panel__search-button[b-8cdy4snlrz],
    .vx-customer-search-panel__clear-button[b-8cdy4snlrz],
    .vx-customer-search-panel__new-shipment-button[b-8cdy4snlrz] {
        width: 100%;
    }

    .vx-customer-search-panel__summary-row--shipments .vx-customer-search-panel__shipment-badge[b-8cdy4snlrz] {
        margin-right: 0;
    }
}
.vx-customer-search-panel__summary-row--split[b-8cdy4snlrz] {
    justify-content: space-between;
}

.vx-customer-search-panel__summary-group[b-8cdy4snlrz] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.vx-customer-search-panel__summary-group--right[b-8cdy4snlrz] {
    justify-content: flex-end;
    margin-left: auto;
}

.vx-customer-search-panel__summary-divider[b-8cdy4snlrz] {
    width: 1px;
    min-height: 32px;
    background: #e5e7eb;
}
/* /Components/Pages/Staff/StaffForgotPassword.razor.rz.scp.css */
/* =========================================================
   FILE: StaffForgotPassword.razor.css

   PURPOSE:
   Scoped styling for the staff forgot-password page.

   RESPONSIBILITIES:
   - Provide a modern password recovery experience
   - Style the operations hero panel
   - Style the recovery card, form, validation, and support links
   - Keep all StaffForgotPassword.razor styling out of inline markup

   IMPORTANT NOTES:
   - This CSS is scoped to StaffForgotPassword.razor
   - Scoped CSS is isolated per component in Blazor
   - Styles from StaffLogin.razor.css are NOT inherited automatically
   - No inline CSS should be used
   ========================================================= */

.vx-login-page[b-26pr9zoa0s] {
    min-height: 100vh;
    padding: 32px;
    display: grid;
    place-items: center;
    color: #0f172a;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.18), transparent 30rem), radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.14), transparent 28rem), linear-gradient(135deg, #f8fbff 0%, #eef5ff 48%, #f8fafc 100%);
}

.vx-login-shell[b-26pr9zoa0s] {
    width: min(1120px, 100%);
    min-height: 640px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(390px, 0.9fr);
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 32px 90px rgba(15, 23, 42, 0.16);
}

.vx-login-hero[b-26pr9zoa0s] {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 42px;
    color: #ffffff;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(145deg, rgba(2, 6, 23, 0.96), rgba(30, 64, 175, 0.84)), radial-gradient(circle at top right, rgba(96, 165, 250, 0.5), transparent 22rem), #020617;
}

    .vx-login-hero[b-26pr9zoa0s]::before {
        position: absolute;
        inset: 24px;
        content: "";
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 24px;
        pointer-events: none;
    }

    .vx-login-hero[b-26pr9zoa0s]::after {
        position: absolute;
        right: -90px;
        top: -90px;
        width: 260px;
        height: 260px;
        content: "";
        border-radius: 999px;
        background: rgba(59, 130, 246, 0.35);
        filter: blur(8px);
        z-index: -1;
    }

.vx-login-hero__badge[b-26pr9zoa0s] {
    position: absolute;
    top: 42px;
    left: 42px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(191, 219, 254, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.vx-login-hero__content[b-26pr9zoa0s] {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.vx-login-hero__eyebrow[b-26pr9zoa0s] {
    margin: 0 0 14px;
    color: #bfdbfe;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.vx-login-hero__title[b-26pr9zoa0s] {
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4.75rem);
    line-height: 0.95;
    letter-spacing: -0.07em;
}

.vx-login-hero__text[b-26pr9zoa0s] {
    max-width: 500px;
    margin: 20px 0 0;
    color: #dbeafe;
    font-size: 16px;
    line-height: 1.8;
}

.vx-login-hero__stats[b-26pr9zoa0s] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 32px;
}

    .vx-login-hero__stats article[b-26pr9zoa0s] {
        padding: 16px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.1);
    }

    .vx-login-hero__stats strong[b-26pr9zoa0s] {
        display: block;
        font-size: 20px;
        line-height: 1.1;
    }

    .vx-login-hero__stats span[b-26pr9zoa0s] {
        display: block;
        margin-top: 6px;
        color: #cbd5e1;
        font-size: 12px;
        line-height: 1.4;
    }

.vx-login-card[b-26pr9zoa0s] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 46px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
}

.vx-login-card__brand[b-26pr9zoa0s] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.vx-login-card__logo[b-26pr9zoa0s] {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: #ffffff;
    font-weight: 900;
    letter-spacing: -0.04em;
    border-radius: 18px;
    background: linear-gradient(135deg, #2563eb, #0f172a);
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.28);
}

.vx-login-card__eyebrow[b-26pr9zoa0s] {
    margin: 0 0 4px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.vx-login-card__title[b-26pr9zoa0s] {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.vx-login-card__subtitle[b-26pr9zoa0s] {
    margin: 0 0 22px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
}

.vx-login-card__portal[b-26pr9zoa0s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
    padding: 13px 14px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: #eff6ff;
}

.vx-login-card__portal-label[b-26pr9zoa0s] {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.vx-login-card__portal-value[b-26pr9zoa0s] {
    color: #1d4ed8;
    font-size: 14px;
    text-align: right;
}

.vx-login-form[b-26pr9zoa0s] {
    display: grid;
    gap: 14px;
}

.vx-form-group[b-26pr9zoa0s] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .vx-form-group label[b-26pr9zoa0s] {
        color: #334155;
        font-size: 13px;
        font-weight: 900;
    }

/* =========================================================
   INPUTS
   ========================================================= */

[b-26pr9zoa0s] .vx-login-card input.vx-input,
[b-26pr9zoa0s] .vx-login-card .vx-input,
[b-26pr9zoa0s] input.vx-input,
[b-26pr9zoa0s] input[type="text"].vx-input,
[b-26pr9zoa0s] input[type="password"].vx-input,
[b-26pr9zoa0s] input[type="email"].vx-input {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    color: #0f172a;
    font-size: 15px;
    line-height: 52px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background-color: #ffffff;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
    appearance: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

    [b-26pr9zoa0s] input.vx-input::placeholder {
        color: #94a3b8;
    }

    [b-26pr9zoa0s] input.vx-input:focus,
    [b-26pr9zoa0s] input[type="text"].vx-input:focus,
    [b-26pr9zoa0s] input[type="password"].vx-input:focus,
    [b-26pr9zoa0s] input[type="email"].vx-input:focus {
        border-color: #2563eb;
        background-color: #ffffff;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

/* =========================================================
   SUPPORT LINKS
   ========================================================= */

.vx-login-form__support[b-26pr9zoa0s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.vx-login-forgot-link[b-26pr9zoa0s] {
    flex: 0 0 auto;
    color: #2563eb;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

    .vx-login-forgot-link:hover[b-26pr9zoa0s] {
        text-decoration: underline;
    }

/* =========================================================
   ACTIONS
   ========================================================= */

.vx-form-actions[b-26pr9zoa0s] {
    margin-top: 6px;
}

.vx-button[b-26pr9zoa0s] {
    width: 100%;
    min-height: 52px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 900;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.vx-button--primary[b-26pr9zoa0s] {
    color: #ffffff;
    background: linear-gradient( 135deg, #2563eb 0%, #1d4ed8 50%, #0f172a 100%);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.28);
}

    .vx-button--primary:hover:not(:disabled)[b-26pr9zoa0s] {
        transform: translateY(-1px);
        box-shadow: 0 22px 42px rgba(37, 99, 235, 0.34);
    }

    .vx-button--primary:disabled[b-26pr9zoa0s] {
        opacity: 0.62;
        cursor: not-allowed;
    }

/* =========================================================
   ALERTS
   ========================================================= */

.vx-login-alert[b-26pr9zoa0s] {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
}

.vx-login-alert--error[b-26pr9zoa0s] {
    color: #991b1b;
    border: 1px solid #fecaca;
    background: #fef2f2;
}

.vx-login-alert--success[b-26pr9zoa0s] {
    color: #166534;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

/* =========================================================
   VALIDATION
   ========================================================= */

.vx-login-validation-summary[b-26pr9zoa0s] {
    margin: 0;
    padding: 12px 14px;
    color: #991b1b;
    font-size: 14px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fef2f2;
}

.vx-form-group .validation-message[b-26pr9zoa0s] {
    margin-top: 4px;
    color: #991b1b;
    font-size: 12px;
    font-weight: 600;
}

/* =========================================================
   FOOTER NOTE
   ========================================================= */

.vx-login-card__footer-note[b-26pr9zoa0s] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.vx-login-card__secure-dot[b-26pr9zoa0s] {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 960px) {
    .vx-login-shell[b-26pr9zoa0s] {
        grid-template-columns: 1fr;
    }

    .vx-login-hero[b-26pr9zoa0s] {
        min-height: 360px;
    }
}

@media (max-width: 640px) {
    .vx-login-page[b-26pr9zoa0s] {
        padding: 16px;
    }

    .vx-login-shell[b-26pr9zoa0s] {
        min-height: auto;
        border-radius: 22px;
    }

    .vx-login-hero[b-26pr9zoa0s] {
        padding: 30px;
    }

    .vx-login-hero__badge[b-26pr9zoa0s] {
        top: 30px;
        left: 30px;
    }

    .vx-login-hero__stats[b-26pr9zoa0s] {
        grid-template-columns: 1fr;
    }

    .vx-login-card[b-26pr9zoa0s] {
        padding: 30px 22px;
    }

    .vx-login-card__portal[b-26pr9zoa0s],
    .vx-login-form__support[b-26pr9zoa0s] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Components/Pages/Staff/StaffLogin.razor.rz.scp.css */
/* =========================================================
   FILE: StaffLogin.razor.css

   PURPOSE:
   Scoped styling for the staff login page.

   RESPONSIBILITIES:
   - Provide a modern staff login experience
   - Style the operations hero panel
   - Style the login card, form, validation, and support links
   - Keep all StaffLogin.razor styling out of inline markup

   IMPORTANT NOTES:
   - This CSS is scoped to StaffLogin.razor
   - No inline CSS should be used in StaffLogin.razor
   - This is presentation-only and does not change login behavior
   ========================================================= */

.vx-login-page[b-h0r6jkcx7e] {
    min-height: 100vh;
    padding: 32px;
    display: grid;
    place-items: center;
    color: #0f172a;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.18), transparent 30rem), radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.14), transparent 28rem), linear-gradient(135deg, #f8fbff 0%, #eef5ff 48%, #f8fafc 100%);
}

.vx-login-shell[b-h0r6jkcx7e] {
    width: min(1120px, 100%);
    min-height: 640px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(390px, 0.9fr);
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 32px 90px rgba(15, 23, 42, 0.16);
}

.vx-login-hero[b-h0r6jkcx7e] {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 42px;
    color: #ffffff;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(145deg, rgba(2, 6, 23, 0.96), rgba(30, 64, 175, 0.84)), radial-gradient(circle at top right, rgba(96, 165, 250, 0.5), transparent 22rem), #020617;
}

    .vx-login-hero[b-h0r6jkcx7e]::before {
        position: absolute;
        inset: 24px;
        content: "";
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 24px;
        pointer-events: none;
    }

    .vx-login-hero[b-h0r6jkcx7e]::after {
        position: absolute;
        right: -90px;
        top: -90px;
        width: 260px;
        height: 260px;
        content: "";
        border-radius: 999px;
        background: rgba(59, 130, 246, 0.35);
        filter: blur(8px);
        z-index: -1;
    }

.vx-login-hero__badge[b-h0r6jkcx7e] {
    position: absolute;
    top: 42px;
    left: 42px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(191, 219, 254, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.vx-login-hero__content[b-h0r6jkcx7e] {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.vx-login-hero__eyebrow[b-h0r6jkcx7e] {
    margin: 0 0 14px;
    color: #bfdbfe;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.vx-login-hero__title[b-h0r6jkcx7e] {
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4.75rem);
    line-height: 0.95;
    letter-spacing: -0.07em;
}

.vx-login-hero__text[b-h0r6jkcx7e] {
    max-width: 500px;
    margin: 20px 0 0;
    color: #dbeafe;
    font-size: 16px;
    line-height: 1.8;
}

.vx-login-hero__stats[b-h0r6jkcx7e] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 32px;
}

    .vx-login-hero__stats article[b-h0r6jkcx7e] {
        padding: 16px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.1);
    }

    .vx-login-hero__stats strong[b-h0r6jkcx7e] {
        display: block;
        font-size: 20px;
        line-height: 1.1;
    }

    .vx-login-hero__stats span[b-h0r6jkcx7e] {
        display: block;
        margin-top: 6px;
        color: #cbd5e1;
        font-size: 12px;
        line-height: 1.4;
    }

.vx-login-card[b-h0r6jkcx7e] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 46px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
}

.vx-login-card__brand[b-h0r6jkcx7e] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.vx-login-card__logo[b-h0r6jkcx7e] {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: #ffffff;
    font-weight: 900;
    letter-spacing: -0.04em;
    border-radius: 18px;
    background: linear-gradient(135deg, #2563eb, #0f172a);
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.28);
}

.vx-login-card__eyebrow[b-h0r6jkcx7e] {
    margin: 0 0 4px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.vx-login-card__title[b-h0r6jkcx7e] {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.vx-login-card__subtitle[b-h0r6jkcx7e] {
    margin: 0 0 22px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
}

.vx-login-card__portal[b-h0r6jkcx7e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
    padding: 13px 14px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: #eff6ff;
}

.vx-login-card__portal-label[b-h0r6jkcx7e] {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.vx-login-card__portal-value[b-h0r6jkcx7e] {
    color: #1d4ed8;
    font-size: 14px;
    text-align: right;
}

.vx-login-form[b-h0r6jkcx7e] {
    display: grid;
    gap: 14px;
}

.vx-form-group[b-h0r6jkcx7e] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .vx-form-group label[b-h0r6jkcx7e] {
        color: #334155;
        font-size: 13px;
        font-weight: 900;
    }

/* =========================================================
   INPUTS
   ========================================================= */

[b-h0r6jkcx7e] .vx-login-card input.vx-input,
[b-h0r6jkcx7e] .vx-login-card .vx-input,
[b-h0r6jkcx7e] input.vx-input,
[b-h0r6jkcx7e] input[type="text"].vx-input,
[b-h0r6jkcx7e] input[type="password"].vx-input {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    color: #0f172a;
    font-size: 15px;
    line-height: 52px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background-color: #ffffff;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
    appearance: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

    [b-h0r6jkcx7e] input.vx-input::placeholder {
        color: #94a3b8;
    }

    [b-h0r6jkcx7e] input.vx-input:focus,
    [b-h0r6jkcx7e] input[type="text"].vx-input:focus,
    [b-h0r6jkcx7e] input[type="password"].vx-input:focus {
        border-color: #2563eb;
        background-color: #ffffff;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

    .vx-login-card input.vx-input[b-h0r6jkcx7e]::placeholder,
    .vx-login-card .vx-input[b-h0r6jkcx7e]::placeholder {
        color: #94a3b8;
    }

    .vx-login-card input.vx-input:focus[b-h0r6jkcx7e],
    .vx-login-card .vx-input:focus[b-h0r6jkcx7e],
    .vx-login-card input[type="text"].vx-input:focus[b-h0r6jkcx7e],
    .vx-login-card input[type="password"].vx-input:focus[b-h0r6jkcx7e] {
        border-color: #2563eb;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

/* =========================================================
   SUPPORT LINKS
   ========================================================= */

.vx-login-form__support[b-h0r6jkcx7e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: -2px;
}

    .vx-login-form__support span[b-h0r6jkcx7e] {
        color: #64748b;
        font-size: 12px;
    }

.vx-login-forgot-link[b-h0r6jkcx7e] {
    flex: 0 0 auto;
    color: #2563eb;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

    .vx-login-forgot-link:hover[b-h0r6jkcx7e] {
        text-decoration: underline;
    }

/* =========================================================
   ACTIONS
   ========================================================= */

.vx-form-actions[b-h0r6jkcx7e] {
    margin-top: 6px;
}

.vx-button[b-h0r6jkcx7e] {
    width: 100%;
    min-height: 52px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 900;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.vx-button--primary[b-h0r6jkcx7e] {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #0f172a 100%);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.28);
}

    .vx-button--primary:hover:not(:disabled)[b-h0r6jkcx7e] {
        transform: translateY(-1px);
        box-shadow: 0 22px 42px rgba(37, 99, 235, 0.34);
    }

    .vx-button--primary:disabled[b-h0r6jkcx7e] {
        opacity: 0.62;
        cursor: not-allowed;
    }

/* =========================================================
   ALERTS
   ========================================================= */

.vx-login-alert[b-h0r6jkcx7e] {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
}

.vx-login-alert--error[b-h0r6jkcx7e] {
    color: #991b1b;
    border: 1px solid #fecaca;
    background: #fef2f2;
}

.vx-login-alert--info[b-h0r6jkcx7e] {
    color: #1e40af;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
}

/* =========================================================
   VALIDATION
   ========================================================= */

.vx-login-validation-summary[b-h0r6jkcx7e] {
    margin: 0;
    padding: 12px 14px;
    color: #991b1b;
    font-size: 14px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fef2f2;
}

.vx-form-group .validation-message[b-h0r6jkcx7e] {
    margin-top: 4px;
    color: #991b1b;
    font-size: 12px;
    font-weight: 600;
}

/* =========================================================
   FOOTER NOTE
   ========================================================= */

.vx-login-card__footer-note[b-h0r6jkcx7e] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.vx-login-card__secure-dot[b-h0r6jkcx7e] {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 960px) {
    .vx-login-shell[b-h0r6jkcx7e] {
        grid-template-columns: 1fr;
    }

    .vx-login-hero[b-h0r6jkcx7e] {
        min-height: 360px;
    }
}

@media (max-width: 640px) {
    .vx-login-page[b-h0r6jkcx7e] {
        padding: 16px;
    }

    .vx-login-shell[b-h0r6jkcx7e] {
        min-height: auto;
        border-radius: 22px;
    }

    .vx-login-hero[b-h0r6jkcx7e] {
        padding: 30px;
    }

    .vx-login-hero__badge[b-h0r6jkcx7e] {
        top: 30px;
        left: 30px;
    }

    .vx-login-hero__stats[b-h0r6jkcx7e] {
        grid-template-columns: 1fr;
    }

    .vx-login-card[b-h0r6jkcx7e] {
        padding: 30px 22px;
    }

    .vx-login-card__portal[b-h0r6jkcx7e],
    .vx-login-form__support[b-h0r6jkcx7e] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Components/Pages/Staff/StaffResetPassword.razor.rz.scp.css */
/* =========================================================
   FILE: StaffResetPassword.razor.css

   PURPOSE:
   Scoped styling for the Operations staff password reset page.

   RESPONSIBILITIES:
   - Provide a modern password reset completion experience
   - Style the operations hero panel
   - Style the reset card, form, validation, and support links
   - Keep all StaffResetPassword.razor styling out of inline markup

   IMPORTANT NOTES:
   - This CSS is scoped to StaffResetPassword.razor
   - Scoped CSS is isolated per component in Blazor
   - Styles from StaffLogin.razor.css are NOT inherited automatically
   - No inline CSS should be used
   ========================================================= */

.vx-login-page[b-vpilph06su] {
    min-height: 100vh;
    padding: 32px;
    display: grid;
    place-items: center;
    color: #0f172a;
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.18), transparent 30rem), radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.14), transparent 28rem), linear-gradient(135deg, #f8fbff 0%, #eef5ff 48%, #f8fafc 100%);
}

.vx-login-shell[b-vpilph06su] {
    width: min(1120px, 100%);
    min-height: 640px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(390px, 0.9fr);
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 32px 90px rgba(15, 23, 42, 0.16);
}

.vx-login-hero[b-vpilph06su] {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 42px;
    color: #ffffff;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(145deg, rgba(2, 6, 23, 0.96), rgba(30, 64, 175, 0.84)), radial-gradient(circle at top right, rgba(96, 165, 250, 0.5), transparent 22rem), #020617;
}

    .vx-login-hero[b-vpilph06su]::before {
        position: absolute;
        inset: 24px;
        content: "";
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 24px;
        pointer-events: none;
    }

    .vx-login-hero[b-vpilph06su]::after {
        position: absolute;
        right: -90px;
        top: -90px;
        width: 260px;
        height: 260px;
        content: "";
        border-radius: 999px;
        background: rgba(59, 130, 246, 0.35);
        filter: blur(8px);
        z-index: -1;
    }

.vx-login-hero__badge[b-vpilph06su] {
    position: absolute;
    top: 42px;
    left: 42px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(191, 219, 254, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.vx-login-hero__content[b-vpilph06su] {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.vx-login-hero__eyebrow[b-vpilph06su] {
    margin: 0 0 14px;
    color: #bfdbfe;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.vx-login-hero__title[b-vpilph06su] {
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4.75rem);
    line-height: 0.95;
    letter-spacing: -0.07em;
}

.vx-login-hero__text[b-vpilph06su] {
    max-width: 500px;
    margin: 20px 0 0;
    color: #dbeafe;
    font-size: 16px;
    line-height: 1.8;
}

.vx-login-card[b-vpilph06su] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 46px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
}

.vx-login-card__brand[b-vpilph06su] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.vx-login-card__logo[b-vpilph06su] {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: #ffffff;
    font-weight: 900;
    letter-spacing: -0.04em;
    border-radius: 18px;
    background: linear-gradient(135deg, #2563eb, #0f172a);
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.28);
}

.vx-login-card__eyebrow[b-vpilph06su] {
    margin: 0 0 4px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.vx-login-card__title[b-vpilph06su] {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.vx-login-card__subtitle[b-vpilph06su] {
    margin: 0 0 22px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
}

.vx-login-card__portal[b-vpilph06su] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
    padding: 13px 14px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: #eff6ff;
}

.vx-login-card__portal-label[b-vpilph06su] {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.vx-login-card__portal-value[b-vpilph06su] {
    color: #1d4ed8;
    font-size: 14px;
    text-align: right;
}

.vx-login-form[b-vpilph06su] {
    display: grid;
    gap: 14px;
}

.vx-form-group[b-vpilph06su] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .vx-form-group label[b-vpilph06su] {
        color: #334155;
        font-size: 13px;
        font-weight: 900;
    }

/* =========================================================
   INPUTS
   ========================================================= */

[b-vpilph06su] .vx-login-card input.vx-input,
[b-vpilph06su] .vx-login-card .vx-input,
[b-vpilph06su] input.vx-input,
[b-vpilph06su] input[type="text"].vx-input,
[b-vpilph06su] input[type="password"].vx-input,
[b-vpilph06su] input[type="email"].vx-input {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    color: #0f172a;
    font-size: 15px;
    line-height: 52px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background-color: #ffffff;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
    appearance: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

    [b-vpilph06su] input.vx-input::placeholder {
        color: #94a3b8;
    }

    [b-vpilph06su] input.vx-input:focus,
    [b-vpilph06su] input[type="text"].vx-input:focus,
    [b-vpilph06su] input[type="password"].vx-input:focus,
    [b-vpilph06su] input[type="email"].vx-input:focus {
        border-color: #2563eb;
        background-color: #ffffff;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

/* =========================================================
   SUPPORT LINKS
   ========================================================= */

.vx-login-form__support[b-vpilph06su] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.vx-login-forgot-link[b-vpilph06su] {
    flex: 0 0 auto;
    color: #2563eb;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

    .vx-login-forgot-link:hover[b-vpilph06su] {
        text-decoration: underline;
    }

/* =========================================================
   ACTIONS
   ========================================================= */

.vx-form-actions[b-vpilph06su] {
    margin-top: 6px;
}

.vx-button[b-vpilph06su] {
    width: 100%;
    min-height: 52px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 900;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.vx-button--primary[b-vpilph06su] {
    color: #ffffff;
    background: linear-gradient( 135deg, #2563eb 0%, #1d4ed8 50%, #0f172a 100%);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.28);
}

    .vx-button--primary:hover:not(:disabled)[b-vpilph06su] {
        transform: translateY(-1px);
        box-shadow: 0 22px 42px rgba(37, 99, 235, 0.34);
    }

    .vx-button--primary:disabled[b-vpilph06su] {
        opacity: 0.62;
        cursor: not-allowed;
    }

/* =========================================================
   ALERTS
   ========================================================= */

.vx-login-alert[b-vpilph06su] {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
}

.vx-login-alert--error[b-vpilph06su] {
    color: #991b1b;
    border: 1px solid #fecaca;
    background: #fef2f2;
}

.vx-login-alert--success[b-vpilph06su] {
    color: #166534;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

/* =========================================================
   VALIDATION
   ========================================================= */

.vx-login-validation-summary[b-vpilph06su] {
    margin: 0;
    padding: 12px 14px;
    color: #991b1b;
    font-size: 14px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fef2f2;
}

.vx-form-group .validation-message[b-vpilph06su] {
    margin-top: 4px;
    color: #991b1b;
    font-size: 12px;
    font-weight: 600;
}

/* =========================================================
   FOOTER NOTE
   ========================================================= */

.vx-login-card__footer-note[b-vpilph06su] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.vx-login-card__secure-dot[b-vpilph06su] {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 960px) {
    .vx-login-shell[b-vpilph06su] {
        grid-template-columns: 1fr;
    }

    .vx-login-hero[b-vpilph06su] {
        min-height: 360px;
    }
}

@media (max-width: 640px) {
    .vx-login-page[b-vpilph06su] {
        padding: 16px;
    }

    .vx-login-shell[b-vpilph06su] {
        min-height: auto;
        border-radius: 22px;
    }

    .vx-login-hero[b-vpilph06su] {
        padding: 30px;
    }

    .vx-login-hero__badge[b-vpilph06su] {
        top: 30px;
        left: 30px;
    }

    .vx-login-card[b-vpilph06su] {
        padding: 30px 22px;
    }

    .vx-login-card__portal[b-vpilph06su],
    .vx-login-form__support[b-vpilph06su] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Components/Pages/Staff/StaffSetup.razor.rz.scp.css */
/* =========================================================
   FILE: StaffSetup.razor.css

   PURPOSE:
   Scoped styles for the Staff Setup public onboarding page.

   RESPONSIBILITIES:
   - Provide clean, enterprise-grade layout
   - Match CustomerRegistration visual language
   - Keep onboarding focused and minimal
   - Avoid style leakage (scoped to this component)

   IMPORTANT NOTES:
   - Reuses vx-form patterns for consistency
   - Aligns with login + registration hybrid UX
   ========================================================= */

/* =========================================================
   PAGE
   ========================================================= */
.vx-setup-page[b-yv975gawa2] {
    min-height: 100%;
    background: #f8fafc;
    padding: 32px 16px;
}

.vx-setup-shell[b-yv975gawa2] {
    max-width: 640px;
    margin: 0 auto;
}

/* =========================================================
   HERO
   ========================================================= */
.vx-setup-hero[b-yv975gawa2] {
    margin-bottom: 24px;
}

.vx-setup-hero__eyebrow[b-yv975gawa2] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-setup-hero__title[b-yv975gawa2] {
    margin: 8px 0 6px;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
}

.vx-setup-hero__subtitle[b-yv975gawa2] {
    margin: 0;
    color: #475569;
}

/* =========================================================
   CARD
   ========================================================= */
.vx-setup-card[b-yv975gawa2] {
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    padding: 24px 28px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
}

/* =========================================================
   MESSAGES
   ========================================================= */
.vx-setup-message[b-yv975gawa2] {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
}

.vx-setup-message--error[b-yv975gawa2] {
    background: #fee2e2;
    color: #991b1b;
}

.vx-setup-message--info[b-yv975gawa2] {
    background: #e2e8f0;
    color: #1e293b;
}

/* =========================================================
   FORM
   ========================================================= */
.vx-form[b-yv975gawa2] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vx-form__row[b-yv975gawa2] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vx-form__label[b-yv975gawa2] {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.vx-form__input[b-yv975gawa2] {
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #cbd5f5;
    font-size: 14px;
    color: #0f172a;
    outline: none;
    background: #ffffff;
}

    .vx-form__input:focus[b-yv975gawa2] {
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }

/* =========================================================
   READ ONLY INPUT
   ========================================================= */
.vx-form__input--readonly[b-yv975gawa2] {
    background: #f1f5f9;
    color: #475569;
    cursor: not-allowed;
}

/* =========================================================
   ACTIONS
   ========================================================= */
.vx-form__actions[b-yv975gawa2] {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.vx-btn[b-yv975gawa2] {
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    cursor: pointer;
}

.vx-btn--primary[b-yv975gawa2] {
    background: #2563eb;
    color: #ffffff;
}

    .vx-btn--primary:hover[b-yv975gawa2] {
        background: #1d4ed8;
    }

    .vx-btn--primary:disabled[b-yv975gawa2] {
        background: #93c5fd;
        cursor: not-allowed;
    }
/* =========================================================
   BLAZOR INPUT COMPONENTS
   ========================================================= */
[b-yv975gawa2] .vx-form__input {
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #cbd5f5;
    font-size: 14px;
    color: #0f172a;
    outline: none;
    background: #ffffff;
    box-sizing: border-box;
}

    [b-yv975gawa2] .vx-form__input:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }
/* =========================================================
   TENANT PORTAL DISPLAY
   ========================================================= */
.vx-login-card__portal[b-yv975gawa2] {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #ffffff;
}

.vx-login-card__portal-label[b-yv975gawa2] {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.vx-login-card__portal-value[b-yv975gawa2] {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}
/* /Components/Pages/StatusPages/StatusPageLayout.razor.rz.scp.css */
/* =========================================================
   FILE: StatusPageLayout.razor.css

   PURPOSE:
   Shared layout styling for Vixly operational status pages.

   RESPONSIBILITIES:
   - Provide reusable full-screen status-page background
   - Provide reusable two-column card layout
   - Support tone-based page backgrounds
   - Keep status page structure consistent across Operations.Web

   IMPORTANT NOTES:
   - Scoped only to StatusPageLayout.razor
   - Page-specific visuals remain in their own components/pages
   ========================================================= */

.vx-status-layout[b-8x1fu0v12f] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 48px 24px;
}

.vx-status-layout--info[b-8x1fu0v12f] {
    background: radial-gradient(circle at 15% 10%, rgba(59, 130, 246, 0.14), transparent 28%), radial-gradient(circle at 85% 15%, rgba(14, 165, 233, 0.10), transparent 24%), linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
}

.vx-status-layout--warning[b-8x1fu0v12f] {
    background: radial-gradient(circle at 15% 10%, rgba(249, 115, 22, 0.16), transparent 28%), radial-gradient(circle at 85% 15%, rgba(245, 158, 11, 0.12), transparent 24%), linear-gradient(180deg, #fffaf5 0%, #f8fafc 100%);
}

.vx-status-layout--danger[b-8x1fu0v12f] {
    background: radial-gradient(circle at 15% 10%, rgba(239, 68, 68, 0.14), transparent 28%), radial-gradient(circle at 85% 15%, rgba(245, 158, 11, 0.11), transparent 24%), linear-gradient(180deg, #fff7f7 0%, #f8fafc 100%);
}

.vx-status-layout__card[b-8x1fu0v12f] {
    width: min(100%, 1080px);
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 42px;
    align-items: center;
    padding: 56px;
    border-radius: 36px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid rgba(226, 232, 240, 0.72);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 100px rgba(15, 23, 42, 0.12), 0 12px 34px rgba(15, 23, 42, 0.06);
}

.vx-status-layout__visual[b-8x1fu0v12f] {
    position: relative;
    min-height: 420px;
    display: grid;
    place-items: center;
}

.vx-status-layout__content[b-8x1fu0v12f] {
    min-width: 0;
}

@media (max-width: 900px) {
    .vx-status-layout__card[b-8x1fu0v12f] {
        grid-template-columns: 1fr;
        padding: 38px 28px;
    }

    .vx-status-layout__visual[b-8x1fu0v12f] {
        min-height: 340px;
    }
}
/* /Components/Pages/SystemPreferences/CompanyProfile/Parts/CompanyProfileView.razor.rz.scp.css */
/* =========================================================
   FILE: CompanyProfileView.razor.css

   PURPOSE:
   Scoped styles for the Company Profile read-only view.

   RESPONSIBILITIES:
   - Style company profile page shell
   - Style company identity card
   - Style contact and address cards
   - Style loading and alert states
   - Use available screen estate efficiently
   - Keep company profile visually aligned with Vixly
     System Preferences styling

   IMPORTANT NOTES:
   - Presentation only
   - No business logic
   - Scoped to CompanyProfileView
   - Company profile is read-only in the initial version
========================================================= */

.vx-company-profile[b-6ipddl79ox] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* =========================================================
   HERO
========================================================= */

.vx-company-profile__hero[b-6ipddl79ox] {
    max-width: 1220px;
    padding: 1.35rem;
    border: 1px solid #dbe3ef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

.vx-company-profile__eyebrow[b-6ipddl79ox] {
    margin: 0 0 0.25rem 0;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.vx-company-profile__title[b-6ipddl79ox] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #172033;
}

.vx-company-profile__subtitle[b-6ipddl79ox] {
    max-width: 760px;
    margin: 0.45rem 0 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #64748b;
}

/* =========================================================
   STATES
========================================================= */

.vx-company-profile__loading[b-6ipddl79ox],
.vx-company-profile__empty[b-6ipddl79ox] {
    max-width: 1220px;
    padding: 1rem;
    color: #5f6b7a;
    border: 1px dashed #cfd9e8;
    border-radius: 14px;
    background: #ffffff;
}

.vx-company-profile__alert[b-6ipddl79ox] {
    max-width: 1220px;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
    font-size: 0.94rem;
    font-weight: 700;
}

/* =========================================================
   LAYOUT
========================================================= */

.vx-company-profile__grid[b-6ipddl79ox] {
    display: grid;
    grid-template-columns: minmax(440px, 1fr) minmax(380px, 1fr);
    grid-auto-flow: dense;
    gap: 1rem;
    max-width: 1220px;
}

.vx-company-profile__card[b-6ipddl79ox] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.35rem;
    border: 1px solid #dbe3ef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

.vx-company-profile__card--identity[b-6ipddl79ox] {
    align-items: stretch;
}

.vx-company-profile__card--wide[b-6ipddl79ox] {
    grid-column: 1 / -1;
}

/* =========================================================
   IDENTITY HEADER
========================================================= */

.vx-company-profile__identity-header[b-6ipddl79ox] {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.vx-company-profile__identity-content[b-6ipddl79ox] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.vx-company-profile__identity-divider[b-6ipddl79ox] {
    height: 1px;
    margin: 0.5rem 0;
    background: #e5ebf3;
}

/* =========================================================
   IDENTITY
========================================================= */

.vx-company-profile__logo-box[b-6ipddl79ox] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    overflow: hidden;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #f8fafc;
}

.vx-company-profile__logo[b-6ipddl79ox] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.65rem;
}

.vx-company-profile__logo-placeholder[b-6ipddl79ox] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.vx-company-profile__company-name[b-6ipddl79ox] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
    color: #172033;
}

.vx-company-profile__portal[b-6ipddl79ox] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #64748b;
}

/* =========================================================
   IDENTITY DETAILS
========================================================= */

.vx-company-profile__identity-details[b-6ipddl79ox] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
}

    .vx-company-profile__identity-details div[b-6ipddl79ox] {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        padding: 1rem;
        border: 1px solid #e5ebf3;
        border-radius: 14px;
        background: #fcfdff;
    }

    .vx-company-profile__identity-details dt[b-6ipddl79ox] {
        font-size: 0.78rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #64748b;
    }

    .vx-company-profile__identity-details dd[b-6ipddl79ox] {
        margin: 0;
        font-size: 1rem;
        font-weight: 800;
        color: #172033;
    }

/* =========================================================
   DETAIL SECTIONS
========================================================= */

.vx-company-profile__section-title[b-6ipddl79ox] {
    margin: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eef2f7;
    font-size: 1rem;
    font-weight: 800;
    color: #172033;
}

.vx-company-profile__details[b-6ipddl79ox] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin: 0;
}

.vx-company-profile__card--wide .vx-company-profile__details[b-6ipddl79ox] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vx-company-profile__details div[b-6ipddl79ox] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.85rem;
    border: 1px solid #e5ebf3;
    border-radius: 14px;
    background: #fcfdff;
}

.vx-company-profile__details dt[b-6ipddl79ox] {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.vx-company-profile__details dd[b-6ipddl79ox] {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 700;
    color: #172033;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .vx-company-profile__grid[b-6ipddl79ox] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {

    .vx-company-profile__identity-header[b-6ipddl79ox] {
        flex-direction: column;
        align-items: flex-start;
    }

    .vx-company-profile__identity-details[b-6ipddl79ox],
    .vx-company-profile__card--wide .vx-company-profile__details[b-6ipddl79ox] {
        grid-template-columns: 1fr;
    }

    .vx-company-profile__hero[b-6ipddl79ox],
    .vx-company-profile__card[b-6ipddl79ox],
    .vx-company-profile__loading[b-6ipddl79ox],
    .vx-company-profile__empty[b-6ipddl79ox],
    .vx-company-profile__alert[b-6ipddl79ox] {
        max-width: none;
    }
}
/* /Components/Pages/SystemPreferences/Parts/SystemPreferencesFormPanel.razor.rz.scp.css */
/* =========================================================
   FILE: SystemPreferencesFormPanel.razor.css

   PURPOSE:
   Scoped styles for the System Preferences form panel.

   RESPONSIBILITIES:
   - Style preference card
   - Style form fields
   - Style toggle row
   - Style save button
   - Style loading, empty, and alert states
   - Style pricing policy preference blocks
   - Keep all operational configuration visually unified

   IMPORTANT NOTES:
   - Presentation only
   - No business logic
   - Scoped to SystemPreferencesFormPanel
   - Pricing policy configuration now belongs to
     System Preferences instead of Pricing workspace
========================================================= */

.system-preferences-panel[b-5fo64n9neu] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.system-preferences-panel__loading[b-5fo64n9neu],
.system-preferences-panel__empty[b-5fo64n9neu] {
    padding: 1rem;
    color: #5f6b7a;
    border: 1px dashed #cfd9e8;
    border-radius: 14px;
    background: #ffffff;
}

.system-preferences-panel__alert[b-5fo64n9neu] {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.94rem;
    font-weight: 700;
}

.system-preferences-panel__alert--error[b-5fo64n9neu] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.system-preferences-panel__alert--success[b-5fo64n9neu] {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

/* =========================================================
   MAIN CARD
========================================================= */

.system-preferences-panel__card[b-5fo64n9neu] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 920px;
    padding: 1.35rem;
    border: 1px solid #dbe3ef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(21, 34, 57, 0.06);
}

.system-preferences-panel__card-header[b-5fo64n9neu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eef2f7;
}

.system-preferences-panel__eyebrow[b-5fo64n9neu] {
    margin: 0 0 0.25rem 0;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.system-preferences-panel__card-header h3[b-5fo64n9neu] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #172033;
}

/* =========================================================
   FORM
========================================================= */

.system-preferences-panel__form[b-5fo64n9neu] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* =========================================================
   SECTION BLOCKS
========================================================= */

.system-preferences-panel__section[b-5fo64n9neu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem;
    border: 1px solid #e5ebf3;
    border-radius: 16px;
    background: #fcfdff;
}

.system-preferences-panel__section-header[b-5fo64n9neu] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #edf2f7;
}

.system-preferences-panel__section-title[b-5fo64n9neu] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #172033;
}

.system-preferences-panel__section-description[b-5fo64n9neu] {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #64748b;
}

/* =========================================================
   FIELD GRID
========================================================= */

.system-preferences-panel__grid[b-5fo64n9neu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.system-preferences-panel__field[b-5fo64n9neu] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.system-preferences-panel__field--full[b-5fo64n9neu] {
    grid-column: 1 / -1;
}

.system-preferences-panel__field label[b-5fo64n9neu],
.system-preferences-panel__toggle-row label[b-5fo64n9neu] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #172033;
}

/* =========================================================
   INPUTS
========================================================= */

.system-preferences-panel__field select[b-5fo64n9neu],
.system-preferences-panel__field input[b-5fo64n9neu] {
    width: 100%;
    min-height: 46px;
    padding: 0.7rem 0.85rem;
    border: 1px solid #cfd9e8;
    border-radius: 12px;
    background: #ffffff;
    color: #172033;
    font-size: 0.92rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .system-preferences-panel__field select:hover[b-5fo64n9neu],
    .system-preferences-panel__field input:hover[b-5fo64n9neu] {
        border-color: #b9c7d8;
    }

    .system-preferences-panel__field select:focus[b-5fo64n9neu],
    .system-preferences-panel__field input:focus[b-5fo64n9neu] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .system-preferences-panel__field select:disabled[b-5fo64n9neu],
    .system-preferences-panel__field input:disabled[b-5fo64n9neu] {
        background: #f8fafc;
        color: #94a3b8;
        cursor: not-allowed;
    }

.system-preferences-panel__field p[b-5fo64n9neu],
.system-preferences-panel__toggle-row p[b-5fo64n9neu] {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: #64748b;
}

/* =========================================================
   TOGGLE ROW
========================================================= */

.system-preferences-panel__toggle-row[b-5fo64n9neu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #e5ebf3;
    border-radius: 14px;
    background: #f8fafc;
}

    .system-preferences-panel__toggle-row input[type="checkbox"][b-5fo64n9neu] {
        width: 20px;
        height: 20px;
        accent-color: #2563eb;
        cursor: pointer;
    }

/* =========================================================
   POLICY MODE BADGES
========================================================= */

.system-preferences-panel__policy-preview[b-5fo64n9neu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.system-preferences-panel__policy-pill[b-5fo64n9neu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 0.85rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #dbeafe;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

/* =========================================================
   ACTIONS
========================================================= */

.system-preferences-panel__actions[b-5fo64n9neu] {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.25rem;
}

.system-preferences-panel__save-button[b-5fo64n9neu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 46px;
    padding: 0.75rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .system-preferences-panel__save-button:hover:not(:disabled)[b-5fo64n9neu] {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
    }

    .system-preferences-panel__save-button:disabled[b-5fo64n9neu] {
        background: #e2e8f0;
        color: #94a3b8;
        cursor: not-allowed;
        box-shadow: none;
    }

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 720px) {

    .system-preferences-panel__grid[b-5fo64n9neu] {
        grid-template-columns: 1fr;
    }

    .system-preferences-panel__toggle-row[b-5fo64n9neu] {
        align-items: flex-start;
        flex-direction: column;
    }

    .system-preferences-panel__actions[b-5fo64n9neu] {
        justify-content: stretch;
    }

    .system-preferences-panel__save-button[b-5fo64n9neu] {
        width: 100%;
    }
}
/* /Components/Pages/SystemPreferences/SystemPreferencesWorkspace.razor.rz.scp.css */
/* =========================================================
   FILE: SystemPreferencesWorkspace.razor.css

   PURPOSE:
   Scoped styles for the System Preferences workspace.

   RESPONSIBILITIES:
   - Provide page spacing
   - Style page header
   - Keep workspace styling isolated

   IMPORTANT NOTES:
   - Workspace remains orchestration-focused
   - Form UI is styled in the panel CSS file
========================================================= */

.vx-page[b-nyg3t6770y] {
    padding: 24px;
    background: #f8fafc;
    min-height: 100%;
}

.vx-page__header[b-nyg3t6770y] {
    margin-bottom: 20px;
}

.vx-page__title[b-nyg3t6770y] {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: #0f172a;
}

.vx-page__subtitle[b-nyg3t6770y] {
    margin-top: 8px;
    color: #64748b;
}

.vx-alert[b-nyg3t6770y] {
    padding: 1rem;
    border-radius: 14px;
    font-size: 0.94rem;
    font-weight: 700;
}

.vx-alert--error[b-nyg3t6770y] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}
/* /Components/Pages/SystemStatus/Error.razor.rz.scp.css */
/* =========================================================
   FILE: Error.razor.css

   PURPOSE:
   Enterprise-grade styling for the general Operations error page.

   RESPONSIBILITIES:
   - Present a calm polished error state
   - Keep technical failures understandable to users
   - Preserve request trace visibility for support
   - Maintain Vixly status-page visual language

   IMPORTANT NOTES:
   - Scoped only to Error.razor
   ========================================================= */

.vx-error-page[b-a4jqvn55fh] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 48px 24px;
    background: radial-gradient(circle at 15% 10%, rgba(239, 68, 68, 0.14), transparent 28%), radial-gradient(circle at 85% 15%, rgba(245, 158, 11, 0.11), transparent 24%), linear-gradient(180deg, #fff7f7 0%, #f8fafc 100%);
}

.vx-error-card[b-a4jqvn55fh] {
    width: min(100%, 1080px);
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 42px;
    align-items: center;
    padding: 56px;
    border-radius: 36px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid rgba(254, 202, 202, 0.65);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 100px rgba(15, 23, 42, 0.12), 0 12px 34px rgba(15, 23, 42, 0.06);
}

.vx-error-visual[b-a4jqvn55fh] {
    position: relative;
    min-height: 420px;
    display: grid;
    place-items: center;
}

.vx-error-orbit[b-a4jqvn55fh] {
    position: absolute;
    border-radius: 999px;
    border: 1px dashed rgba(239, 68, 68, 0.28);
}

.vx-error-orbit--outer[b-a4jqvn55fh] {
    width: 330px;
    height: 330px;
}

.vx-error-orbit--inner[b-a4jqvn55fh] {
    width: 250px;
    height: 250px;
    transform: rotate(18deg);
}

.vx-error-terminal[b-a4jqvn55fh] {
    position: relative;
    width: 310px;
    border-radius: 30px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #fecaca;
    box-shadow: 0 28px 70px rgba(239, 68, 68, 0.16), 0 12px 30px rgba(15, 23, 42, 0.08);
}

.vx-error-terminal__top[b-a4jqvn55fh] {
    display: flex;
    gap: 8px;
    padding: 18px;
    background: #fef2f2;
}

    .vx-error-terminal__top span[b-a4jqvn55fh] {
        width: 11px;
        height: 11px;
        border-radius: 999px;
        background: #f87171;
    }

.vx-error-terminal__body[b-a4jqvn55fh] {
    padding: 34px 28px 38px;
    text-align: center;
}

.vx-error-symbol[b-a4jqvn55fh] {
    width: 84px;
    height: 84px;
    margin: 0 auto 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #ffffff;
    font-size: 38px;
    font-weight: 950;
    box-shadow: 0 20px 40px rgba(239, 68, 68, 0.28);
}

.vx-error-line[b-a4jqvn55fh] {
    height: 10px;
    margin: 14px auto 0;
    border-radius: 999px;
    background: #e2e8f0;
}

.vx-error-line--wide[b-a4jqvn55fh] {
    width: 180px;
}

.vx-error-line--short[b-a4jqvn55fh] {
    width: 120px;
}

.vx-error-line:not(.vx-error-line--wide):not(.vx-error-line--short)[b-a4jqvn55fh] {
    width: 150px;
}

.vx-error-chip[b-a4jqvn55fh] {
    position: absolute;
    padding: 12px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-weight: 900;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
}

.vx-error-chip--left[b-a4jqvn55fh] {
    left: 18px;
    top: 72px;
}

.vx-error-chip--right[b-a4jqvn55fh] {
    right: 12px;
    bottom: 78px;
}

.vx-error-badge[b-a4jqvn55fh] {
    display: inline-flex;
    margin-bottom: 20px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-error-title[b-a4jqvn55fh] {
    margin: 0;
    color: #0f172a;
    font-size: 52px;
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.vx-error-text[b-a4jqvn55fh] {
    margin: 24px 0 0;
    color: #475569;
    font-size: 17px;
    line-height: 1.85;
}

.vx-error-request[b-a4jqvn55fh] {
    margin-top: 26px;
    padding: 16px;
    border-radius: 18px;
    background: #fff7f7;
    border: 1px solid #fecaca;
}

.vx-error-request__label[b-a4jqvn55fh] {
    display: block;
    margin-bottom: 8px;
    color: #991b1b;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vx-error-request__code[b-a4jqvn55fh] {
    display: block;
    overflow-wrap: anywhere;
    color: #334155;
    font-size: 13px;
}

.vx-error-checklist[b-a4jqvn55fh] {
    display: grid;
    gap: 14px;
    margin-top: 30px;
}

.vx-error-checklist__item[b-a4jqvn55fh] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: #fff7f7;
    border: 1px solid #fecaca;
    color: #334155;
    line-height: 1.6;
}

    .vx-error-checklist__item span[b-a4jqvn55fh] {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: #ef4444;
        color: #ffffff;
        font-size: 13px;
        font-weight: 900;
    }

.vx-error-actions[b-a4jqvn55fh] {
    margin-top: 34px;
}

.vx-error-button[b-a4jqvn55fh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 30px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #ffffff;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(239, 68, 68, 0.24);
}

    .vx-error-button:hover[b-a4jqvn55fh] {
        filter: brightness(1.03);
    }

@media (max-width: 900px) {
    .vx-error-card[b-a4jqvn55fh] {
        grid-template-columns: 1fr;
        padding: 38px 28px;
    }

    .vx-error-visual[b-a4jqvn55fh] {
        min-height: 340px;
    }

    .vx-error-title[b-a4jqvn55fh] {
        font-size: 40px;
    }
}
/* /Components/Pages/SystemStatus/InvalidPortal.razor.rz.scp.css */
/* =========================================================
   FILE: InvalidPortal.razor.css
========================================================= */

.vx-invalid-portal-page[b-0dep3b75t0] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 48px 24px;
    background: radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.18), transparent 30%), radial-gradient(circle at 85% 18%, rgba(14, 165, 233, 0.14), transparent 28%), linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.vx-invalid-portal-card[b-0dep3b75t0] {
    width: min(100%, 1080px);
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 42px;
    align-items: center;
    padding: 56px;
    border-radius: 36px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 30px 100px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(18px);
}

.vx-invalid-portal-visual[b-0dep3b75t0] {
    position: relative;
    min-height: 420px;
    display: grid;
    place-items: center;
}

.vx-orbit[b-0dep3b75t0] {
    position: absolute;
    border-radius: 999px;
    border: 1px dashed rgba(37, 99, 235, 0.28);
}

.vx-orbit--one[b-0dep3b75t0] {
    width: 330px;
    height: 330px;
}

.vx-orbit--two[b-0dep3b75t0] {
    width: 250px;
    height: 250px;
    transform: rotate(18deg);
}

.vx-portal-window[b-0dep3b75t0] {
    position: relative;
    width: 300px;
    border-radius: 28px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dbeafe;
    box-shadow: 0 28px 70px rgba(37, 99, 235, 0.18), 0 12px 30px rgba(15, 23, 42, 0.08);
}

.vx-portal-window__top[b-0dep3b75t0] {
    display: flex;
    gap: 8px;
    padding: 18px;
    background: #eff6ff;
}

    .vx-portal-window__top span[b-0dep3b75t0] {
        width: 11px;
        height: 11px;
        border-radius: 999px;
        background: #93c5fd;
    }

.vx-portal-window__body[b-0dep3b75t0] {
    display: grid;
    place-items: center;
    padding: 46px 28px 38px;
}

.vx-portal-window__lock[b-0dep3b75t0] {
    margin-bottom: 28px;
}

.vx-lock-shackle[b-0dep3b75t0] {
    width: 56px;
    height: 42px;
    margin: 0 auto -8px;
    border: 8px solid #2563eb;
    border-bottom: none;
    border-radius: 32px 32px 0 0;
}

.vx-lock-body[b-0dep3b75t0] {
    width: 86px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
}

    .vx-lock-body span[b-0dep3b75t0] {
        width: 12px;
        height: 22px;
        border-radius: 999px;
        background: #ffffff;
    }

.vx-portal-window__line[b-0dep3b75t0] {
    width: 130px;
    height: 10px;
    margin-top: 12px;
    border-radius: 999px;
    background: #e2e8f0;
}

.vx-portal-window__line--wide[b-0dep3b75t0] {
    width: 180px;
}

.vx-floating-tag[b-0dep3b75t0] {
    position: absolute;
    padding: 12px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbeafe;
    color: #1d4ed8;
    font-weight: 900;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
}

.vx-floating-tag--left[b-0dep3b75t0] {
    left: 18px;
    top: 72px;
}

.vx-floating-tag--right[b-0dep3b75t0] {
    right: 12px;
    bottom: 78px;
}

.vx-invalid-portal-badge[b-0dep3b75t0] {
    display: inline-flex;
    margin-bottom: 20px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-invalid-portal-title[b-0dep3b75t0] {
    margin: 0;
    color: #0f172a;
    font-size: 52px;
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.vx-invalid-portal-text[b-0dep3b75t0] {
    margin: 24px 0 0;
    color: #475569;
    font-size: 17px;
    line-height: 1.85;
}

.vx-invalid-portal-checklist[b-0dep3b75t0] {
    display: grid;
    gap: 14px;
    margin-top: 30px;
}

.vx-invalid-portal-checklist__item[b-0dep3b75t0] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    line-height: 1.6;
}

    .vx-invalid-portal-checklist__item span[b-0dep3b75t0] {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: #2563eb;
        color: #ffffff;
        font-size: 13px;
        font-weight: 900;
    }

.vx-invalid-portal-actions[b-0dep3b75t0] {
    margin-top: 34px;
}

.vx-invalid-portal-button[b-0dep3b75t0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 30px;
    border-radius: 18px;
    background: #2563eb;
    color: #ffffff;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.25);
}

    .vx-invalid-portal-button:hover[b-0dep3b75t0] {
        background: #1d4ed8;
    }

@media (max-width: 900px) {
    .vx-invalid-portal-card[b-0dep3b75t0] {
        grid-template-columns: 1fr;
        padding: 38px 28px;
    }

    .vx-invalid-portal-visual[b-0dep3b75t0] {
        min-height: 340px;
    }

    .vx-invalid-portal-title[b-0dep3b75t0] {
        font-size: 40px;
    }
}
/* /Components/Pages/SystemStatus/SubscriptionRequired.razor.rz.scp.css */
/* =========================================================
   FILE: SubscriptionRequired.razor.css

   PURPOSE:
   Enterprise-grade styling for the subscription-required page.

   RESPONSIBILITIES:
   - Present a premium subscription-state experience
   - Communicate operational/account state clearly
   - Keep infrastructure/business validation errors away
     from end users
   - Maintain visual consistency with Vixly status pages

   IMPORTANT NOTES:
   - Scoped only to SubscriptionRequired.razor
   ========================================================= */

.vx-subscription-page[b-x48jb3983v] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 48px 24px;
    background: radial-gradient(circle at 15% 10%, rgba(249, 115, 22, 0.16), transparent 28%), radial-gradient(circle at 85% 15%, rgba(245, 158, 11, 0.12), transparent 24%), linear-gradient(180deg, #fffaf5 0%, #f8fafc 100%);
}

.vx-subscription-card[b-x48jb3983v] {
    width: min(100%, 1080px);
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 42px;
    align-items: center;
    padding: 56px;
    border-radius: 36px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(251, 191, 36, 0.16);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 100px rgba(15, 23, 42, 0.12), 0 12px 34px rgba(15, 23, 42, 0.06);
}

.vx-subscription-visual[b-x48jb3983v] {
    position: relative;
    min-height: 420px;
    display: grid;
    place-items: center;
}

.vx-subscription-orbit[b-x48jb3983v] {
    position: absolute;
    border-radius: 999px;
    border: 1px dashed rgba(245, 158, 11, 0.28);
}

.vx-subscription-orbit--outer[b-x48jb3983v] {
    width: 330px;
    height: 330px;
}

.vx-subscription-orbit--inner[b-x48jb3983v] {
    width: 250px;
    height: 250px;
    transform: rotate(18deg);
}

.vx-subscription-invoice[b-x48jb3983v] {
    position: relative;
    width: 310px;
    border-radius: 30px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #fde68a;
    box-shadow: 0 28px 70px rgba(245, 158, 11, 0.16), 0 12px 30px rgba(15, 23, 42, 0.08);
}

.vx-subscription-invoice__header[b-x48jb3983v] {
    display: flex;
    gap: 8px;
    padding: 18px;
    background: #fff7ed;
}

    .vx-subscription-invoice__header span[b-x48jb3983v] {
        width: 11px;
        height: 11px;
        border-radius: 999px;
        background: #fbbf24;
    }

.vx-subscription-invoice__body[b-x48jb3983v] {
    padding: 34px 28px 38px;
    text-align: center;
}

.vx-subscription-invoice__badge[b-x48jb3983v] {
    width: 84px;
    height: 84px;
    margin: 0 auto 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #ffffff;
    font-size: 34px;
    font-weight: 900;
    box-shadow: 0 20px 40px rgba(249, 115, 22, 0.28);
}

.vx-subscription-invoice__line[b-x48jb3983v] {
    height: 10px;
    margin: 14px auto 0;
    border-radius: 999px;
    background: #e2e8f0;
}

.vx-subscription-invoice__line--wide[b-x48jb3983v] {
    width: 180px;
}

.vx-subscription-invoice__line--short[b-x48jb3983v] {
    width: 120px;
}

.vx-subscription-invoice__line:not(.vx-subscription-invoice__line--wide):not(.vx-subscription-invoice__line--short)[b-x48jb3983v] {
    width: 150px;
}

.vx-subscription-invoice__status[b-x48jb3983v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.12);
    color: #c2410c;
    font-size: 13px;
    font-weight: 900;
}

.vx-subscription-chip[b-x48jb3983v] {
    position: absolute;
    padding: 12px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #fde68a;
    color: #b45309;
    font-weight: 900;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
}

.vx-subscription-chip--left[b-x48jb3983v] {
    left: 18px;
    top: 72px;
}

.vx-subscription-chip--right[b-x48jb3983v] {
    right: 12px;
    bottom: 78px;
}

.vx-subscription-badge[b-x48jb3983v] {
    display: inline-flex;
    margin-bottom: 20px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.10);
    color: #b45309;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vx-subscription-title[b-x48jb3983v] {
    margin: 0;
    color: #0f172a;
    font-size: 52px;
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.vx-subscription-text[b-x48jb3983v] {
    margin: 24px 0 0;
    color: #475569;
    font-size: 17px;
    line-height: 1.85;
}

.vx-subscription-checklist[b-x48jb3983v] {
    display: grid;
    gap: 14px;
    margin-top: 30px;
}

.vx-subscription-checklist__item[b-x48jb3983v] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: #fffaf5;
    border: 1px solid #fde68a;
    color: #334155;
    line-height: 1.6;
}

    .vx-subscription-checklist__item span[b-x48jb3983v] {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: #f59e0b;
        color: #ffffff;
        font-size: 13px;
        font-weight: 900;
    }

.vx-subscription-actions[b-x48jb3983v] {
    margin-top: 34px;
}

.vx-subscription-button[b-x48jb3983v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 30px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #ffffff;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(249, 115, 22, 0.25);
}

    .vx-subscription-button:hover[b-x48jb3983v] {
        filter: brightness(1.03);
    }

@media (max-width: 900px) {
    .vx-subscription-card[b-x48jb3983v] {
        grid-template-columns: 1fr;
        padding: 38px 28px;
    }

    .vx-subscription-visual[b-x48jb3983v] {
        min-height: 340px;
    }

    .vx-subscription-title[b-x48jb3983v] {
        font-size: 40px;
    }
}
/* /Components/Pages/SystemStatus/SystemUnavailable.razor.rz.scp.css */
/* =========================================================
   FILE: SystemUnavailable.razor.css

   PURPOSE:
   Scoped styling for the Operations system-unavailable page.

   RESPONSIBILITIES:
   - Render a calm enterprise-grade outage experience
   - Style unavailable-state card, badge, status steps, and retry action
   - Keep infrastructure errors away from end users

   IMPORTANT NOTES:
   - Scoped only to SystemUnavailable.razor
   - No global selectors
   ========================================================= */

.vx-system-page[b-heodeg7zdr] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: radial-gradient(circle at top, rgba(37, 99, 235, 0.10), transparent 34%), linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.vx-system-card[b-heodeg7zdr] {
    width: min(100%, 760px);
    padding: 56px;
    border-radius: 32px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 28px 90px rgba(15, 23, 42, 0.12), 0 8px 28px rgba(15, 23, 42, 0.08);
    text-align: center;
}

.vx-system-icon[b-heodeg7zdr] {
    width: 88px;
    height: 88px;
    margin: 0 auto 24px;
    border-radius: 999px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vx-system-icon__ring[b-heodeg7zdr] {
    width: 42px;
    height: 42px;
    border: 5px solid #2563eb;
    border-top-color: transparent;
    border-radius: 999px;
}

.vx-system-badge[b-heodeg7zdr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.vx-system-title[b-heodeg7zdr] {
    margin: 0;
    color: #0f172a;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.vx-system-description[b-heodeg7zdr] {
    max-width: 610px;
    margin: 18px auto 0;
    color: #475569;
    font-size: 17px;
    line-height: 1.8;
}

.vx-system-status[b-heodeg7zdr] {
    display: grid;
    gap: 16px;
    margin-top: 34px;
    text-align: left;
}

.vx-system-status__item[b-heodeg7zdr] {
    display: flex;
    gap: 18px;
    padding: 20px;
    border-radius: 22px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.vx-system-status__item--warning[b-heodeg7zdr] {
    background: #fff7ed;
    border-color: #fed7aa;
}

.vx-system-status__number[b-heodeg7zdr] {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.vx-system-status__title[b-heodeg7zdr] {
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
}

.vx-system-status__text[b-heodeg7zdr] {
    margin-top: 6px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

.vx-system-actions[b-heodeg7zdr] {
    margin-top: 34px;
}

.vx-system-btn[b-heodeg7zdr] {
    min-height: 48px;
    padding: 0 26px;
    border: none;
    border-radius: 16px;
    background: #2563eb;
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.24);
}

    .vx-system-btn:hover[b-heodeg7zdr] {
        background: #1d4ed8;
    }

@media (max-width: 640px) {
    .vx-system-card[b-heodeg7zdr] {
        padding: 34px 24px;
        border-radius: 26px;
    }

    .vx-system-title[b-heodeg7zdr] {
        font-size: 32px;
    }

    .vx-system-description[b-heodeg7zdr] {
        font-size: 15px;
    }
}