/* =========================================================
   BUSINESSMANAGER DESIGN SYSTEM
   Shared application components
   ========================================================= */

:root {
    --bm-primary-soft: #eff6ff;
    --bm-primary-border: #bfdbfe;
    --bm-success-soft: #f0fdf4;
    --bm-success-border: #bbf7d0;
    --bm-warning-soft: #fffbeb;
    --bm-warning-border: #fde68a;
    --bm-danger-soft: #fef2f2;
    --bm-danger-border: #fecaca;
    --bm-info-soft: #ecfeff;
    --bm-info-border: #a5f3fc;
    --bm-surface: #ffffff;
    --bm-surface-subtle: #f8fafc;
    --bm-surface-muted: #f1f5f9;
    --bm-heading: #0f172a;
    --bm-text-secondary: #475569;
    --bm-text-tertiary: #94a3b8;
    --bm-border-light: #eef2f7;
    --bm-border-strong: #cbd5e1;
    --bm-radius-sm: 8px;
    --bm-radius: 12px;
    --bm-radius-lg: 16px;
    --bm-radius-xl: 22px;
    --bm-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04);
    --bm-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    --bm-shadow-lg: 0 18px 45px rgba(15, 23, 42, 0.09);
    --bm-transition: 0.18s ease;
}

/* =========================================================
   BASE
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a,
button,
input,
select,
textarea {
    transition: color var(--bm-transition), background-color var(--bm-transition), border-color var(--bm-transition), box-shadow var(--bm-transition), opacity var(--bm-transition), transform var(--bm-transition);
}

button,
.btn,
.form-check-input,
.form-select {
    touch-action: manipulation;
}

:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.28);
    outline-offset: 2px;
}

.bm-page-container {
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
}

/* =========================================================
   STANDARD PAGE
   ========================================================= */

.bm-page {
    min-width: 0;
}

.bm-page-header,
.dashboard-header,
.app-page > .d-flex:first-child,
.bm-page-container > .d-flex:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.bm-page-header-main {
    min-width: 0;
}

.bm-page-kicker {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--bm-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bm-page-title,
.dashboard-title,
.bm-page-header h1,
.bm-page-header h2,
.bm-page-container > .d-flex:first-child h1,
.bm-page-container > .d-flex:first-child h2 {
    margin: 0;
    color: var(--bm-heading);
    font-size: clamp(1.55rem, 2.6vw, 2.15rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.bm-page-description,
.dashboard-subtitle,
.bm-page-header p,
.bm-page-header small,
.bm-page-container > .d-flex:first-child p,
.bm-page-container > .d-flex:first-child small {
    display: block;
    margin: 0.45rem 0 0;
    color: var(--bm-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.bm-page-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}

/* =========================================================
   BREADCRUMBS
   ========================================================= */

.bm-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
    padding: 0;
    color: var(--bm-muted);
    font-size: 0.76rem;
    list-style: none;
}

    .bm-breadcrumb a {
        color: var(--bm-muted);
        text-decoration: none;
    }

        .bm-breadcrumb a:hover {
            color: var(--bm-primary);
        }

.bm-breadcrumb-separator {
    color: var(--bm-text-tertiary);
}

/* =========================================================
   CARDS
   ========================================================= */

.card,
.bm-card,
.bm-page-card {
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: var(--bm-radius-lg);
    background: var(--bm-surface);
    box-shadow: var(--bm-shadow);
}

    .card.shadow-sm {
        box-shadow: var(--bm-shadow) !important;
    }

    .card.border-0 {
        border: 1px solid rgba(226, 232, 240, 0.95) !important;
    }

.card-header,
.bm-card-header {
    min-height: 60px;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bm-border-light);
    background: linear-gradient( 180deg, #ffffff, #fcfdff);
}

    .card-header strong,
    .bm-card-title {
        color: var(--bm-heading);
        font-size: 0.92rem;
        font-weight: 750;
    }

.card-body,
.bm-card-body {
    padding: 1.25rem;
}

.card-footer,
.bm-card-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--bm-border-light);
    background: #fff;
}

.bm-card-subtitle {
    margin: 0.2rem 0 0;
    color: var(--bm-muted);
    font-size: 0.75rem;
}

/* =========================================================
   SECTION CARDS
   ========================================================= */

.bm-section {
    margin-bottom: 1.5rem;
    padding: 1.35rem;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-lg);
    background: var(--bm-surface);
    box-shadow: var(--bm-shadow-sm);
}

.bm-section-header {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 1.25rem;
}

.bm-section-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--bm-radius);
    color: var(--bm-primary);
    background: var(--bm-primary-soft);
    font-size: 1.15rem;
}

.bm-section-title {
    margin: 0;
    color: var(--bm-heading);
    font-size: 0.96rem;
    font-weight: 750;
}

.bm-section-description {
    margin: 0.25rem 0 0;
    color: var(--bm-muted);
    font-size: 0.75rem;
}

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

.btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.58rem 0.95rem;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.2;
}

.btn-sm {
    min-height: 34px;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    font-size: 0.76rem;
}

.btn-lg {
    min-height: 50px;
    padding: 0.75rem 1.3rem;
    border-radius: 12px;
    font-size: 0.92rem;
}

.btn-primary {
    border-color: var(--bm-primary);
    background: linear-gradient( 135deg, var(--bm-primary), var(--bm-primary-dark));
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

    .btn-primary:hover,
    .btn-primary:focus {
        border-color: var(--bm-primary-dark);
        background: linear-gradient( 135deg, var(--bm-primary-dark), #1e40af);
        box-shadow: 0 10px 24px rgba(37, 99, 235, 0.24);
        transform: translateY(-1px);
    }

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-danger:hover {
    transform: translateY(-1px);
}

.btn-light {
    border-color: var(--bm-border);
    background: #fff;
}

.btn-icon {
    width: 42px;
    min-width: 42px;
    padding: 0;
}

.btn:disabled,
.btn.disabled {
    cursor: not-allowed;
    transform: none !important;
}

/* =========================================================
   FORMS
   ========================================================= */

.form-label {
    margin-bottom: 0.42rem;
    color: var(--bm-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.form-control,
.form-select {
    min-height: 46px;
    border: 1px solid #cfd8e6;
    border-radius: 10px;
    color: var(--bm-text);
    background-color: #fff;
    font-size: 0.86rem;
}

textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

.form-control:hover,
.form-select:hover {
    border-color: #aebccd;
}

.form-control:focus,
.form-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 0.22rem rgba(37, 99, 235, 0.11);
}

.form-control::placeholder {
    color: #9aa8ba;
}

.form-control:disabled,
.form-select:disabled {
    color: #64748b;
    background: #f1f5f9;
    opacity: 1;
}

.input-group-text {
    min-width: 44px;
    justify-content: center;
    border-color: #cfd8e6;
    color: var(--bm-muted);
    background: #f8fafc;
}

.input-group > .form-control:focus,
.input-group > .form-select:focus {
    z-index: 3;
}

.form-text {
    margin-top: 0.4rem;
    color: var(--bm-muted);
    font-size: 0.7rem;
}

.form-check-input {
    border-color: #aebccd;
}

    .form-check-input:checked {
        border-color: var(--bm-primary);
        background-color: var(--bm-primary);
    }

    .form-check-input:focus {
        border-color: #60a5fa;
        box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.12);
    }

.bm-required {
    margin-left: 0.15rem;
    color: var(--bm-danger);
}

.bm-optional {
    margin-left: 0.3rem;
    color: var(--bm-muted);
    font-size: 0.68rem;
    font-weight: 500;
}

/* =========================================================
   VALIDATION
   ========================================================= */

.validation-summary-errors,
.bm-validation-summary {
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--bm-danger-border);
    border-radius: var(--bm-radius);
    color: #991b1b;
    background: var(--bm-danger-soft);
    font-size: 0.8rem;
}

    .validation-summary-errors ul,
    .bm-validation-summary ul {
        margin: 0;
        padding-left: 1.2rem;
    }

.validation-summary-valid {
    display: none;
}

.field-validation-error {
    display: block;
    margin-top: 0.35rem;
    color: var(--bm-danger);
    font-size: 0.74rem;
    font-weight: 600;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border-color: var(--bm-danger) !important;
    background-image: none !important;
}

    .input-validation-error:focus {
        border-color: var(--bm-danger) !important;
        box-shadow: 0 0 0 0.22rem rgba(220, 38, 38, 0.1) !important;
    }

/* =========================================================
   FILTER AND SEARCH TOOLBARS
   ========================================================= */

.bm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.15rem;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-lg);
    background: #fff;
    box-shadow: var(--bm-shadow-sm);
}

.bm-toolbar-main {
    display: flex;
    flex: 1 1 600px;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.8rem;
}

.bm-toolbar-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.bm-search {
    position: relative;
    flex: 1 1 300px;
}

.bm-search-icon {
    position: absolute;
    top: 50%;
    left: 0.95rem;
    z-index: 4;
    color: var(--bm-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.bm-search .form-control {
    padding-left: 2.7rem;
    padding-right: 2.6rem;
}

.bm-search-clear {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    z-index: 4;
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--bm-muted);
    background: transparent;
    transform: translateY(-50%);
}

    .bm-search-clear:hover {
        color: var(--bm-text);
        background: var(--bm-surface-muted);
    }

.bm-result-count {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--bm-border);
    border-radius: 999px;
    color: var(--bm-muted);
    background: var(--bm-surface-subtle);
    font-size: 0.74rem;
    font-weight: 650;
}

/* =========================================================
   TABLES
   ========================================================= */

.bm-table-shell {
    overflow: hidden;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-lg);
    background: #fff;
    box-shadow: var(--bm-shadow);
}

.table-responsive {
    margin: 0;
}

/* Shared entity-grid standard: operational/entity tables must consume the full
   card width, including the final Actions column. This deliberately overrides
   the global stable scrollbar gutter so desktop grids do not leave a false
   white strip on the right. Horizontal overflow still works when truly needed. */
.bm-table-shell > .table-responsive,
.bm-card > .table-responsive:has(> .bm-operational-list) {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    scrollbar-gutter: auto;
}

.bm-table-shell > .table-responsive > .table,
.bm-card > .table-responsive > .bm-operational-list {
    width: 100% !important;
    min-width: 100%;
    max-width: none;
    margin: 0;
}

.bm-table-shell > .table-responsive > .table > thead,
.bm-table-shell > .table-responsive > .table > tbody,
.bm-card > .table-responsive > .bm-operational-list > thead,
.bm-card > .table-responsive > .bm-operational-list > tbody {
    width: 100%;
}

/* The final action column follows one desktop alignment contract everywhere. */
.bm-operational-list > thead > tr > th:last-child,
.bm-operational-list > tbody > tr > td.bm-table-actions-cell {
    padding-right: 1.25rem !important;
}

.table {
    margin-bottom: 0;
    vertical-align: middle;
}

    .table > :not(caption) > * > * {
        padding: 0.9rem 1rem;
        border-bottom-color: var(--bm-border-light);
    }

    .table thead th {
        border-bottom-width: 1px;
        color: var(--bm-muted);
        background: #f8fafc;
        font-size: 0.69rem;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .table tbody tr {
        transition: background-color var(--bm-transition);
    }

        .table tbody tr:hover {
            background: #f8fbff;
        }

        .table tbody tr:last-child td {
            border-bottom: 0;
        }

.bm-table-primary {
    color: var(--bm-heading);
    font-weight: 700;
}

.bm-table-secondary {
    color: var(--bm-muted);
    font-size: 0.75rem;
}

.bm-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

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

.badge,
.status-badge,
.bm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.38rem 0.62rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 750;
}

.bm-badge-primary {
    color: #1d4ed8;
    background: #dbeafe;
}

.bm-badge-success {
    color: #15803d;
    background: #dcfce7;
}

.bm-badge-warning {
    color: #a16207;
    background: #fef3c7;
}

.bm-badge-danger {
    color: #b91c1c;
    background: #fee2e2;
}

.bm-badge-info {
    color: #0e7490;
    background: #cffafe;
}

.bm-badge-secondary {
    color: #475569;
    background: #e2e8f0;
}

/* =========================================================
   DETAIL LISTS
   ========================================================= */

.bm-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.bm-detail-item {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--bm-border-light);
    border-radius: var(--bm-radius);
    background: var(--bm-surface-subtle);
}

.bm-detail-label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--bm-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.bm-detail-value {
    overflow-wrap: anywhere;
    color: var(--bm-heading);
    font-size: 0.88rem;
    font-weight: 650;
}

/* =========================================================
   METRICS
   ========================================================= */

.bm-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.metric-card,
.bm-metric-card {
    position: relative;
    min-height: 145px;
    overflow: hidden;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-lg);
    background: #fff;
    box-shadow: var(--bm-shadow);
}

    .metric-card::after,
    .bm-metric-card::after {
        position: absolute;
        right: -2rem;
        bottom: -3rem;
        width: 8rem;
        height: 8rem;
        border-radius: 50%;
        background: rgba(37, 99, 235, 0.035);
        content: "";
    }

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

.bm-empty-state,
.dashboard-empty {
    padding: clamp(2.5rem, 6vw, 5rem) 1.5rem;
    color: var(--bm-muted);
    text-align: center;
}

.bm-empty-state-icon {
    display: inline-flex;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    border-radius: 22px;
    color: var(--bm-primary);
    background: var(--bm-primary-soft);
    font-size: 2rem;
}

.bm-empty-state h2,
.bm-empty-state h3 {
    margin: 0;
    color: var(--bm-heading);
    font-size: 1.05rem;
    font-weight: 750;
}

.bm-empty-state p {
    max-width: 34rem;
    margin: 0.5rem auto 1.2rem;
    font-size: 0.8rem;
    line-height: 1.65;
}

/* =========================================================
   ALERTS
   ========================================================= */

.alert {
    border-radius: var(--bm-radius);
    font-size: 0.8rem;
}

.alert-success {
    border-color: var(--bm-success-border);
    color: #166534;
    background: var(--bm-success-soft);
}

.alert-warning {
    border-color: var(--bm-warning-border);
    color: #854d0e;
    background: var(--bm-warning-soft);
}

.alert-danger {
    border-color: var(--bm-danger-border);
    color: #991b1b;
    background: var(--bm-danger-soft);
}

.alert-info {
    border-color: var(--bm-info-border);
    color: #155e75;
    background: var(--bm-info-soft);
}

/* =========================================================
   DELETE / DANGER PANELS
   ========================================================= */

.bm-danger-panel {
    padding: 1.35rem;
    border: 1px solid var(--bm-danger-border);
    border-radius: var(--bm-radius-lg);
    background: var(--bm-danger-soft);
}

.bm-danger-icon {
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: var(--bm-radius);
    color: var(--bm-danger);
    background: #fee2e2;
    font-size: 1.35rem;
}

/* =========================================================
   CONFIRMATION MODAL
   ========================================================= */

.bm-confirm-host .modal-dialog {
    max-width: 520px;
}

.bm-confirm-modal {
    overflow: hidden;
    border: 0;
    border-radius: var(--bm-radius-xl);
    box-shadow: var(--bm-shadow-lg);
}

    .bm-confirm-modal .modal-header {
        padding: 1.15rem 1.35rem;
        border-bottom: 1px solid var(--bm-border);
    }

    .bm-confirm-modal .modal-body {
        padding: 1.35rem;
        text-align: left;
    }

    .bm-confirm-modal .modal-footer {
        justify-content: flex-end;
        gap: 0.5rem;
        padding: 1rem 1.35rem 1.25rem;
        border-top: 1px solid var(--bm-border);
    }

.bm-confirm-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.bm-confirm-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.bm-confirm-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--bm-danger);
    background: var(--bm-danger-soft);
    font-size: 1.25rem;
}

    .bm-confirm-icon.is-danger {
        color: var(--bm-danger);
        background: var(--bm-danger-soft);
    }

    .bm-confirm-icon.is-warning {
        color: #d97706;
        background: var(--bm-warning-soft);
    }

    .bm-confirm-icon.is-info {
        color: var(--bm-primary);
        background: var(--bm-primary-soft);
    }

.bm-confirm-title {
    margin: 0;
    color: var(--bm-heading);
    font-size: 1.05rem;
    font-weight: 800;
}

.bm-confirm-question {
    margin: 0;
    color: var(--bm-heading);
    font-weight: 750;
    line-height: 1.45;
}

.bm-confirm-message {
    margin: 0;
    color: var(--bm-muted);
    font-size: 0.86rem;
    line-height: 1.6;
}

@media (max-width: 575.98px) {
    .bm-confirm-host .modal-dialog {
        margin: 0.75rem;
    }

    .bm-confirm-modal .modal-body {
        padding: 1.1rem;
    }

    .bm-confirm-content {
        gap: 0.8rem;
    }

    .bm-confirm-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .bm-confirm-modal .modal-footer {
        padding: 0.9rem 1.1rem 1.1rem;
    }
}

/* =========================================================
   PAGINATION
   ========================================================= */

.pagination {
    gap: 0.25rem;
    margin-bottom: 0;
}

.page-link {
    display: inline-flex;
    min-width: 38px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border-color: var(--bm-border);
    border-radius: 9px !important;
    color: var(--bm-text-secondary);
    font-size: 0.76rem;
    font-weight: 650;
}

    .page-link:hover {
        border-color: var(--bm-primary-border);
        color: var(--bm-primary);
        background: var(--bm-primary-soft);
    }

.page-item.active .page-link {
    border-color: var(--bm-primary);
    background: var(--bm-primary);
}

/* =========================================================
   DROPDOWNS
   ========================================================= */

.dropdown-menu {
    padding: 0.45rem;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius);
    box-shadow: var(--bm-shadow-lg);
}

.dropdown-item {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 0.55rem;
    border-radius: 8px;
    font-size: 0.78rem;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        color: var(--bm-primary);
        background: var(--bm-primary-soft);
    }

    .dropdown-item.text-danger:hover {
        color: var(--bm-danger) !important;
        background: var(--bm-danger-soft);
    }

/* =========================================================
   TOASTR
   ========================================================= */

#toast-container {
    margin-top: 0.75rem;
}

    #toast-container > div {
        overflow: hidden;
        width: min(380px, calc(100vw - 2rem));
        padding: 1rem 1rem 1rem 3.25rem;
        border: 0;
        border-radius: var(--bm-radius);
        background-position: 1rem center;
        box-shadow: var(--bm-shadow-lg);
        opacity: 1;
        font-family: Inter, "Segoe UI", sans-serif;
    }

    #toast-container > .toast-success {
        background-color: #166534;
    }

    #toast-container > .toast-error {
        background-color: #991b1b;
    }

    #toast-container > .toast-warning {
        background-color: #a16207;
    }

    #toast-container > .toast-info {
        background-color: #155e75;
    }

.toast-title {
    font-weight: 750;
}

.toast-message {
    font-size: 0.78rem;
}

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

.bm-loading {
    position: relative;
    pointer-events: none;
}

    .bm-loading::after {
        position: absolute;
        inset: 0;
        z-index: 4;
        display: block;
        border-radius: inherit;
        background: rgba(255, 255, 255, 0.7);
        content: "";
        backdrop-filter: blur(1px);
    }

.bm-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    transform: translate(-50%, -50%);
}

.bm-skeleton {
    overflow: hidden;
    border-radius: 6px;
    background: linear-gradient( 90deg, #e8edf4 25%, #f5f7fa 50%, #e8edf4 75%);
    background-size: 200% 100%;
    animation: bm-skeleton-loading 1.5s infinite;
}

@keyframes bm-skeleton-loading {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

/* =========================================================
   RESPONSIVE TABLE CARDS
   Add data-label to td elements to use this behavior.
   ========================================================= */

@media (max-width: 767.98px) {
    .bm-responsive-table thead {
        display: none;
    }

    .bm-responsive-table,
    .bm-responsive-table tbody,
    .bm-responsive-table tr,
    .bm-responsive-table td {
        display: block;
        width: 100%;
    }

        .bm-responsive-table tbody {
            padding: 0.75rem;
        }

        .bm-responsive-table tr {
            margin-bottom: 0.75rem;
            padding: 0.8rem;
            border: 1px solid var(--bm-border);
            border-radius: var(--bm-radius);
            background: #fff;
        }

            .bm-responsive-table tr:last-child {
                margin-bottom: 0;
            }

        .bm-responsive-table td {
            display: grid;
            grid-template-columns: minmax(105px, 0.42fr) minmax(0, 0.58fr);
            gap: 0.75rem;
            padding: 0.55rem 0 !important;
            border: 0;
            text-align: right;
        }

            .bm-responsive-table td::before {
                color: var(--bm-muted);
                content: attr(data-label);
                font-size: 0.68rem;
                font-weight: 800;
                letter-spacing: 0.04em;
                text-align: left;
                text-transform: uppercase;
            }

            .bm-responsive-table
            td.bm-table-actions-cell {
                display: block;
                padding-top: 0.8rem !important;
                border-top: 1px solid var(--bm-border-light);
            }

                .bm-responsive-table
                td.bm-table-actions-cell::before {
                    display: none;
                }

        .bm-responsive-table
        .bm-table-actions {
            justify-content: flex-start;
        }
}

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

@media (max-width: 1199.98px) {
    .bm-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .bm-page-header,
    .dashboard-header,
    .app-page > .d-flex:first-child,
    .bm-page-container > .d-flex:first-child {
        align-items: flex-start;
        flex-direction: column;
    }

    .bm-page-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .bm-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .bm-toolbar-actions {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .card-body,
    .bm-card-body {
        padding: 1rem;
    }

    .card-header,
    .card-footer,
    .bm-card-header,
    .bm-card-footer {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .bm-detail-grid {
        grid-template-columns: 1fr;
    }

    .bm-page-actions .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 575.98px) {
    .bm-metric-grid {
        grid-template-columns: 1fr;
    }

    .bm-toolbar-actions {
        flex-direction: column;
    }

        .bm-toolbar-actions .btn,
        .bm-toolbar-actions .form-select {
            width: 100%;
        }

    .bm-page-actions {
        align-items: stretch;
        flex-direction: column;
    }

        .bm-page-actions .btn {
            width: 100%;
        }

    #toast-container {
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
    }
}

/* =========================================================
   PRINT
   ========================================================= */

@media print {
    .app-sidebar,
    .app-topbar,
    .mobile-nav-drawer,
    .mobile-nav-backdrop,
    .bm-page-actions,
    .bm-toolbar,
    .btn,
    #toast-container {
        display: none !important;
    }

    .app-main {
        margin-left: 0 !important;
    }

    .app-page {
        padding: 0 !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .card,
    .bm-card,
    .bm-page-card {
        border: 1px solid #ddd;
        box-shadow: none;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   CONTEXTUAL HELP
   ========================================================= */

.bm-contextual-help-link {
    white-space: nowrap;
}

.configuration-dashboard-hero .bm-contextual-help-link {
    border-color: rgba(255, 255, 255, .58);
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.configuration-dashboard-hero .bm-contextual-help-link:hover,
.configuration-dashboard-hero .bm-contextual-help-link:focus {
    border-color: #fff;
    color: #1d4ed8;
    background: #fff;
}

/* =========================================================
   PHASE 15A - RESPONSIVE DATA COLLECTIONS
   ========================================================= */
.bm-data-collection-description {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.bm-data-collection-drag {
    touch-action: none;
}

@media (max-width: 767.98px) {
    .bm-data-collection-card .bm-card-header .btn {
        min-height: 44px;
    }

    .bm-data-collection-scroll {
        overflow-x: clip;
    }

    .bm-data-collection-table {
        width: 100% !important;
        min-width: 0 !important;
    }

    .bm-data-collection-table tbody {
        display: grid;
        gap: .75rem;
        padding: .75rem;
    }

    .bm-data-collection-table tr {
        margin: 0;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
    }

    .bm-data-collection-table td[data-label="Description"] {
        display: block;
        padding-bottom: .75rem !important;
        border-bottom: 1px solid var(--bm-border-light);
    }

    .bm-data-collection-table td[data-label="Description"]::before {
        display: block;
        margin-bottom: .3rem;
    }

    .bm-data-collection-table td[data-label="Line Total"] strong {
        font-size: 1.05rem;
    }

    .bm-data-collection-table .bm-data-collection-drag {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        padding: .4rem 0 !important;
    }

    .bm-data-collection-table .bm-data-collection-drag i {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--bm-border);
        border-radius: .75rem;
        background: var(--bs-body-bg);
        font-size: 1.2rem;
    }

    .bm-data-collection-table .bm-table-actions .btn {
        flex: 1 1 120px;
        min-height: 44px;
        justify-content: center;
    }

    .bm-data-collection-footer {
        position: sticky;
        bottom: 0;
        z-index: 3;
        background: var(--bs-body-bg);
        box-shadow: 0 -8px 18px rgba(15, 23, 42, .06);
    }

    .bm-data-collection-footer .btn {
        width: 100%;
        min-height: 44px;
    }

    .bm-related-document-item {
        align-items: stretch !important;
        flex-direction: column;
    }

    .bm-related-document-item > div,
    .bm-related-document-item > a,
    .bm-related-document-item > button {
        width: 100%;
        min-width: 0;
    }

    .bm-related-document-item > a.btn,
    .bm-related-document-item > button.btn {
        min-height: 44px;
        justify-content: center;
    }
}


/* =========================================================
   EMBEDDED DETAILS TABLE STANDARD
   Canonical implementation is the proven Vendor Details grid behavior.
   Every management Details history/related-record table uses only these
   two classes for sizing:
       wrapper: bm-detail-table-shell
       table:   bm-detail-table
   ========================================================= */
.bm-detail-table-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    scrollbar-gutter: auto !important;
}

.bm-detail-table-shell > .bm-detail-table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.bm-detail-table-shell > .bm-detail-table > thead,
.bm-detail-table-shell > .bm-detail-table > tbody {
    width: 100%;
}

@media (min-width: 768px) {
    /* This is the key behavior from the working Vendor Details tables:
       fixed table layout forces the browser to distribute the complete
       available card width instead of stopping after intrinsic cell content. */
    .bm-detail-table-shell > .bm-detail-table {
        table-layout: fixed !important;
    }

    .bm-detail-table-shell > .bm-detail-table th:last-child[data-detail-actions],
    .bm-detail-table-shell > .bm-detail-table th:last-child:where(.bm-detail-actions-header),
    .bm-detail-table-shell > .bm-detail-table td[data-label="Actions"] {
        width: 5.75rem;
        min-width: 5.75rem;
        text-align: right !important;
        padding-right: 1rem !important;
    }

    .bm-detail-table-shell > .bm-detail-table td[data-label="Actions"] .btn,
    .bm-detail-table-shell > .bm-detail-table td[data-label="Actions"] .bm-table-actions {
        margin-left: auto;
    }
}

/* Keep the existing responsive/card conversion authoritative on phones.
   Do not force desktop table geometry after the responsive breakpoint. */
@media (max-width: 767.98px) {
    .bm-detail-table-shell {
        overflow-x: visible;
    }

    .bm-detail-table-shell > .bm-detail-table {
        table-layout: auto !important;
    }
}



/* =========================================================
   DETAILS SECTION "VIEW ALL" ACTION STANDARD
   Canonical look: Vendor Details history actions.
   Use bm-detail-view-all-action for View All Payments,
   View All Expenses, View All Purchase Orders, and equivalent
   history/register navigation actions on management Details pages.
   ========================================================= */
.bm-detail-view-all-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.25rem;
    padding: .375rem .75rem;
    border-radius: .5rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.bm-detail-view-all-action > i {
    flex: 0 0 auto;
    margin: 0 !important;
}

@media (max-width: 575.98px) {
    .bm-detail-view-all-action {
        width: 100%;
        white-space: normal;
        text-align: center;
    }
}


/* =========================================================
   EMBEDDED DETAILS TABLE CARD-EDGE STANDARD
   Vendor Details is the golden reference: its history tables live outside
   the padded card body and therefore reach the card edges. Other Details
   pages may legitimately place the shared table inside .bm-card-body.
   This centralized rule removes only that standard body padding on
   tablet/desktop so every management Details table reaches the same edges.
   ========================================================= */
@media (min-width: 768px) {
    .bm-card-body:not(.p-0) .bm-detail-table-shell,
    .card-body:not(.p-0) .bm-detail-table-shell {
        --bm-detail-table-body-bleed: 1.25rem;
        width: calc(100% + (2 * var(--bm-detail-table-body-bleed))) !important;
        max-width: calc(100% + (2 * var(--bm-detail-table-body-bleed))) !important;
        margin-left: calc(-1 * var(--bm-detail-table-body-bleed)) !important;
        margin-right: calc(-1 * var(--bm-detail-table-body-bleed)) !important;
    }
}

/* Phone Details tables keep the existing responsive/card treatment and
   normal card padding. Do not bleed them outside their mobile card body. */
@media (max-width: 767.98px) {
    .bm-card-body .bm-detail-table-shell,
    .card-body .bm-detail-table-shell {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* Related Documents: shared View action standard (Option 2).
   Keep document-navigation actions consistent without affecting grid/CRUD View buttons. */
.bm-related-document-view {
    display: inline-flex;
    width: 96px;
    min-width: 96px;
    height: 38px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    justify-self: end;
    gap: 6px;
    padding: .375rem .75rem;
    white-space: nowrap;
}

.bm-related-document-view > .bi {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .bm-related-document-view {
        width: 100%;
        min-width: 0;
        height: 44px;
        min-height: 44px;
        justify-self: stretch;
    }
}