/* Shared visual rhythm for the Vendor, Merchant, and Admin portals. */
.vendor-shell {
    --portal-font: "Segoe UI", Arial, Helvetica, sans-serif;
    --portal-title-color: #17233d;
    --portal-muted-color: #74829a;
    font-family: var(--portal-font) !important;
}

.employee-delete-confirmation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fff7f7;
    color: #7f1d1d;
}

.employee-delete-confirmation > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.employee-delete-confirmation span { font-size: .82rem; }
.employee-delete-actions { display: flex; gap: 8px; }
.employee-delete-actions button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #dce2eb;
    border-radius: 9px;
    background: #fff;
    color: #344158;
    font-weight: 750;
    cursor: pointer;
}

.employee-delete-actions .confirm-delete {
    border-color: #c62f38;
    background: #c62f38;
    color: #fff;
}

.employee-delete-actions button:disabled { opacity: .6; cursor: wait; }

html[lang="ar"] .vendor-shell {
    --portal-font: "Noto Sans Arabic", Arial, sans-serif;
}

.vendor-content {
    width: 100%;
    min-width: 0;
    padding: 32px clamp(20px, 2.2vw, 36px) 48px !important;
    color: #1f2940;
    font-family: var(--portal-font) !important;
}

.vendor-content > * {
    width: 100%;
    min-width: 0;
    margin-inline: auto;
    font-family: inherit !important;
}

.vendor-content :is(button, input, select, textarea, table) {
    font-family: inherit;
}

/* Page heading system */
.vendor-content :is(
    .page-header,
    .report-header,
    .packages-header,
    .products-header,
    .inventory-header,
    .roaming-header,
    .returns-header,
    .settings-header,
    .settings-heading,
    .entities-header,
    .registrations-header,
    .purchases-header,
    .management-header,
    .subscriptions-header,
    .detail-header
) {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}

.vendor-content :is(
    .page-header,
    .report-header,
    .packages-header,
    .products-header,
    .inventory-header,
    .roaming-header,
    .returns-header,
    .settings-header,
    .settings-heading,
    .entities-header,
    .registrations-header,
    .purchases-header,
    .management-header,
    .subscriptions-header,
    .detail-header,
    .welcome-banner
) h1,
.vendor-content h1.page-title,
.vendor-content .page-title > h1,
.vendor-content .profile-card > h1,
.vendor-content .details-hero h1 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    color: var(--portal-title-color) !important;
    font-size: clamp(1.8rem, 2.15vw, 2.1rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -.025em;
}

html[lang="ar"] .vendor-content :is(
    .page-header,
    .report-header,
    .packages-header,
    .products-header,
    .inventory-header,
    .roaming-header,
    .returns-header,
    .settings-header,
    .settings-heading,
    .entities-header,
    .registrations-header,
    .purchases-header,
    .management-header,
    .subscriptions-header,
    .detail-header,
    .welcome-banner
) h1,
html[lang="ar"] .vendor-content h1.page-title,
html[lang="ar"] .vendor-content .page-title > h1,
html[lang="ar"] .vendor-content .profile-card > h1,
html[lang="ar"] .vendor-content .details-hero h1 {
    letter-spacing: 0;
}

.vendor-content :is(
    .page-header,
    .packages-header,
    .products-header,
    .returns-header,
    .settings-header,
    .settings-heading,
    .entities-header,
    .registrations-header,
    .detail-header
) p {
    margin-top: 7px !important;
    margin-bottom: 0 !important;
    color: var(--portal-muted-color) !important;
    font-size: .92rem !important;
    line-height: 1.55 !important;
}

.vendor-content :is(.page-kicker, .page-eyebrow, .settings-eyebrow, .eyebrow) {
    display: block;
    margin-bottom: 7px !important;
    font-size: .75rem !important;
    font-weight: 800 !important;
    line-height: 1.35;
    letter-spacing: .075em;
    text-transform: uppercase;
}

html[lang="ar"] .vendor-content :is(.page-kicker, .page-eyebrow, .settings-eyebrow, .eyebrow) {
    letter-spacing: 0;
}

/* Table placement and typography */
.vendor-content :is(
    .table-wrapper,
    .table-card,
    .table-scroll,
    .report-table-wrapper,
    .products-table-wrapper,
    .detail-table-wrapper,
    .items-table-wrapper,
    .items-table-wrap,
    .users-table-wrapper,
    .returns-table-wrap
) {
    max-width: 100%;
    margin-block-start: 20px;
}

.vendor-content table {
    width: 100%;
    color: #26334d;
    font-size: .875rem !important;
    line-height: 1.45;
}

.vendor-content table th {
    color: #66758c !important;
    font-size: .75rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    letter-spacing: .02em;
    vertical-align: middle;
    white-space: nowrap;
}

.vendor-content table td {
    color: #2b3850;
    font-size: .875rem !important;
    line-height: 1.45 !important;
    vertical-align: middle;
}

html[lang="ar"] .vendor-content table th {
    letter-spacing: 0;
}

@media (min-width: 721px) {
    .vendor-content table th {
        padding: 13px 15px !important;
    }

    .vendor-content table td {
        padding: 15px !important;
    }
}

@media (max-width: 720px) {
    .vendor-content {
        padding: 22px 16px 36px !important;
    }

    .vendor-content :is(
        .page-header,
        .report-header,
        .packages-header,
        .products-header,
        .inventory-header,
        .roaming-header,
        .returns-header,
        .settings-header,
        .settings-heading,
        .entities-header,
        .registrations-header,
        .purchases-header,
        .management-header,
        .subscriptions-header,
        .detail-header
    ) {
        margin-bottom: 18px !important;
    }

    .vendor-content :is(
        .page-header,
        .report-header,
        .packages-header,
        .products-header,
        .inventory-header,
        .roaming-header,
        .returns-header,
        .settings-header,
        .settings-heading,
        .entities-header,
        .registrations-header,
        .purchases-header,
        .management-header,
        .subscriptions-header,
        .detail-header,
        .welcome-banner
    ) h1,
    .vendor-content h1.page-title,
    .vendor-content .page-title > h1,
    .vendor-content .profile-card > h1,
    .vendor-content .details-hero h1 {
        font-size: 1.65rem !important;
    }

    .vendor-content :is(
        .table-wrapper,
        .table-card,
        .table-scroll,
        .report-table-wrapper,
        .products-table-wrapper,
        .detail-table-wrapper,
        .items-table-wrapper,
        .items-table-wrap,
        .users-table-wrapper,
        .returns-table-wrap
    ) {
        margin-block-start: 14px;
    }
}