/** Businfo UI Foundation — reusable controls and visual components. */
.bi-component-page,
.bi-component-page :where(input, button, select, textarea) {
    font-family: var(--bi-font-family);
}

.bi-component-page {
    color: var(--bi-text-primary);
    line-height: var(--bi-line-height-normal);
    accent-color: var(--bi-color-primary);
}

.bi-component-page *,
.bi-component-page *::before,
.bi-component-page *::after {
    box-sizing: border-box;
}

.bi-component-page :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--bi-border-focus);
    outline-offset: 2px;
    box-shadow: var(--bi-focus-ring);
}

.bi-component-page :where(.btn, .bi-button) {
    min-height: var(--bi-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bi-space-2);
    border-radius: var(--bi-radius-sm);
    font-weight: var(--bi-font-weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    transition:
        background-color var(--bi-duration-normal) var(--bi-ease-standard),
        border-color var(--bi-duration-normal) var(--bi-ease-standard),
        color var(--bi-duration-normal) var(--bi-ease-standard),
        box-shadow var(--bi-duration-normal) var(--bi-ease-standard),
        transform var(--bi-duration-fast) var(--bi-ease-standard);
}

.bi-component-page :where(.btn-sm, .bi-button--sm) {
    min-height: var(--bi-control-height-sm);
    padding-inline: var(--bi-space-3);
    font-size: var(--bi-font-size-sm);
}

.bi-component-page :where(.btn-lg, .bi-button--lg) {
    min-height: var(--bi-control-height-lg);
    padding-inline: var(--bi-space-6);
}

.bi-component-page :where(.btn-primary, .bi-button--primary) {
    color: var(--bi-text-inverse);
    background: var(--bi-color-primary);
    border-color: var(--bi-color-primary);
}

.bi-component-page :where(.btn-primary, .bi-button--primary):hover {
    color: var(--bi-text-inverse);
    background: var(--bi-color-primary-hover);
    border-color: var(--bi-color-primary-hover);
}

.bi-component-page :where(.btn-outline-primary, .bi-button--outline) {
    color: var(--bi-color-primary);
    background: var(--bi-surface-default);
    border-color: var(--bi-color-primary-border);
}

.bi-component-page :where(.btn-outline-primary, .bi-button--outline):hover {
    color: var(--bi-color-primary-active);
    background: var(--bi-color-primary-soft);
    border-color: var(--bi-color-primary);
}

.bi-component-page :where(.btn-danger, .btn-outline-danger, .bi-button--danger) {
    --bs-btn-focus-shadow-rgb: 185, 28, 28;
}

.bi-component-page :where(.btn:disabled, .btn.disabled, .bi-button[disabled], .bi-button[aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: 0.58;
    box-shadow: none;
}

.bi-component-page :where(.bi-icon-button, .btn-icon, [data-bi-icon-button]) {
    inline-size: var(--bi-touch-target);
    min-inline-size: var(--bi-touch-target);
    block-size: var(--bi-touch-target);
    min-block-size: var(--bi-touch-target);
    padding: 0;
    border-radius: var(--bi-radius-sm);
}

.bi-component-page :where(.form-control, .form-select, .bi-input, .bi-select, .bi-textarea) {
    min-height: var(--bi-control-height);
    border: 1px solid var(--bi-border-default);
    border-radius: var(--bi-radius-sm);
    color: var(--bi-text-primary);
    background-color: var(--bi-surface-default);
    box-shadow: var(--bi-shadow-xs);
    transition:
        border-color var(--bi-duration-normal) var(--bi-ease-standard),
        box-shadow var(--bi-duration-normal) var(--bi-ease-standard),
        background-color var(--bi-duration-normal) var(--bi-ease-standard);
}

.bi-component-page :where(.form-control, .form-select, .bi-input, .bi-select, .bi-textarea):hover:not(:disabled) {
    border-color: var(--bi-border-strong);
}

.bi-component-page :where(.form-control, .form-select, .bi-input, .bi-select, .bi-textarea):focus {
    border-color: var(--bi-border-focus);
    box-shadow: var(--bi-focus-ring);
}

.bi-component-page :where(.form-control:disabled, .form-select:disabled, .bi-input:disabled, .bi-select:disabled) {
    color: var(--bi-text-muted);
    background: var(--bi-surface-subtle);
    cursor: not-allowed;
    opacity: 1;
}

.bi-component-page :where(textarea.form-control, .bi-textarea) {
    min-height: 7rem;
    resize: vertical;
}

.bi-component-page :where(.form-label, .bi-label, label:not(.form-check-label)) {
    color: var(--bi-text-secondary);
    font-size: var(--bi-font-size-sm);
    font-weight: var(--bi-font-weight-semibold);
}

.bi-component-page :where(.form-text, .bi-help, small) {
    color: var(--bi-text-muted);
}

.bi-component-page :where(.invalid-feedback, .booking-field-message.is-error, .bi-field-error) {
    color: var(--bi-color-danger);
    font-size: var(--bi-font-size-sm);
}

.bi-component-page :where(.badge, .bi-badge) {
    display: inline-flex;
    align-items: center;
    gap: var(--bi-space-1);
    min-height: 1.5rem;
    padding: var(--bi-space-1) var(--bi-space-2);
    border-radius: var(--bi-radius-pill);
    font-size: var(--bi-font-size-xs);
    font-weight: var(--bi-font-weight-semibold);
    line-height: 1;
}

.bi-component-page :where(.card, .account-panel, .profile-card, .company-section-card, .wizard-card, .bi-card) {
    border-color: var(--bi-border-default);
    border-radius: var(--bi-radius-lg);
    background: var(--bi-surface-default);
    box-shadow: var(--bi-shadow-sm);
}

.bi-component-page :where(.card-header, .account-panel-head, .profile-card-head, .bi-card__header) {
    border-color: var(--bi-border-default);
    background: transparent;
}

.bi-component-page :where(.alert, .bi-alert) {
    border-width: 1px;
    border-radius: var(--bi-radius-md);
}

.bi-component-page :where(.modal-content, .bi-dialog, .vendor-confirm-dialog__panel, .profile-dialog__panel) {
    border: 1px solid var(--bi-border-default);
    border-radius: var(--bi-radius-xl);
    background: var(--bi-surface-default);
    box-shadow: var(--bi-shadow-lg);
}

.bi-component-page :where(.modal-header, .modal-footer, .bi-dialog__header, .bi-dialog__footer) {
    border-color: var(--bi-border-default);
}

.bi-component-page :where(.toast, .bi-toast, .vendor-toast, [data-bi-toast]) {
    border: 1px solid var(--bi-border-default);
    border-radius: var(--bi-radius-md);
    color: var(--bi-text-primary);
    background: color-mix(in srgb, var(--bi-surface-default) 94%, transparent);
    box-shadow: var(--bi-shadow-md);
    backdrop-filter: blur(16px);
}

.bi-component-page :where(.table, .bi-table) {
    --bs-table-color: var(--bi-text-primary);
    --bs-table-border-color: var(--bi-border-default);
    vertical-align: middle;
}

.bi-component-page :where(.table thead th, .bi-table thead th) {
    color: var(--bi-text-secondary);
    font-size: var(--bi-font-size-xs);
    font-weight: var(--bi-font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--bi-surface-subtle);
}

.bi-component-page :where(.dropdown-menu, .bi-menu) {
    padding: var(--bi-space-2);
    border: 1px solid var(--bi-border-default);
    border-radius: var(--bi-radius-md);
    background: var(--bi-surface-default);
    box-shadow: var(--bi-shadow-md);
}

.bi-component-page :where(.dropdown-item, .bi-menu__item) {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    gap: var(--bi-space-2);
    border-radius: var(--bi-radius-sm);
}

.bi-component-page :where(.dropdown-item:hover, .dropdown-item:focus, .bi-menu__item:hover, .bi-menu__item:focus) {
    background: var(--bi-color-primary-soft);
    color: var(--bi-color-primary-active);
}

/* Compact touch target policy. */
@media (max-width: 767px) {
    :root {
        --bi-control-height-sm: 2.75rem;
        --bi-control-height: 2.875rem;
        --bi-control-height-lg: 3rem;
        --bi-touch-target: 2.75rem;
    }

    .bi-component-page :where(
        .btn,
        .bi-button,
        .dropdown-item,
        .nav-link,
        summary,
        [role="button"],
        [data-action]
    ) {
        min-height: 2.75rem;
    }

    .bi-component-page :where(.btn-sm, .bi-button--sm) {
        min-height: 2.75rem;
    }

    .bi-component-page :where(.btn-icon, .bi-icon-button, [data-bi-icon-button]) {
        min-width: 2.75rem;
        width: 2.75rem;
        min-height: 2.75rem;
        height: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bi-component-page *,
    .bi-component-page *::before,
    .bi-component-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}