/* Browser compatibility layer ------------------------------------------------
   Keep fallbacks isolated here so component CSS can stay readable. */

@supports not (color: color-mix(in srgb, #000000 50%, #ffffff)) {
    :root {
        --dt-head-bg: var(--pc-theme-primary, #2563eb);
        --dt-head-border: var(--pc-theme-primary, #2563eb);
        --dt-head-divider: rgba(255, 255, 255, 0.22);
        --dt-pagination-text-hover: var(--pc-theme-primary, #2563eb);
    }

    :root[data-color-mode="dark"] {
        --dt-head-bg: var(--pc-theme-primary, #60a5fa);
        --dt-head-border: var(--pc-theme-primary, #60a5fa);
        --dt-head-divider: rgba(255, 255, 255, 0.22);
    }

    .detail-file-download:hover {
        background: var(--pc-theme-primary, #2563eb);
        border-color: var(--pc-theme-primary, #2563eb);
    }

    .detail-info-box {
        color: var(--detail-primary-dark, #1d4ed8);
    }

    .snapshot-timeline-item-current .snapshot-timeline-marker {
        box-shadow: 0 0 0 4px var(--detail-primary-border, #bfdbfe);
    }

    .detail-msisdn-table thead th {
        background: var(--detail-primary, #2563eb) !important;
    }

    .detail-msisdn-status-pill.is-active,
    .detail-msisdn-bound-pill {
        background: var(--detail-primary-soft, #eff6ff);
        border-color: var(--detail-primary-border, #bfdbfe);
        color: var(--detail-primary-dark, #1d4ed8);
    }

    .contract-pattern-table thead th,
    .contract-pattern-table thead th:first-child,
    .contract-pattern-table thead th:last-child {
        background: var(--pc-theme-primary, #2563eb) !important;
        border-color: var(--pc-theme-primary, #2563eb) !important;
    }

    .commission-product-tree-panel-header {
        background: var(--pc-surface-muted, #f1f5f9);
    }

    .commission-tree-category-checkbox,
    .commission-tree-article input[type="checkbox"] {
        border-color: var(--pc-theme-primary, #2563eb);
    }

    .commission-tree-category-checkbox:focus-visible,
    .commission-tree-article input[type="checkbox"]:focus-visible {
        outline-color: rgba(var(--pc-theme-primary-rgb, 37, 99, 235), 0.28);
    }

    .commission-tree-category-checkbox:indeterminate {
        box-shadow: 0 0 0 3px rgba(var(--pc-theme-primary-rgb, 37, 99, 235), 0.16);
    }

    .commission-tree-article:hover {
        background: var(--pc-surface-muted, #f1f5f9);
        border-color: var(--pc-theme-primary, #2563eb);
    }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .sales-saving-overlay,
    .sales-confirm-modal-backdrop {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }
}

@supports not (height: 100dvh) {
    @media (max-width: 900px) {
        .app-sidebar {
            height: 100vh;
            max-height: 100vh;
            min-height: 100vh;
        }
    }
}

@supports not selector(:has(*)) {
    .customer-field-toggle {
        cursor: pointer;
    }

    .customer-field-toggle input:disabled {
        cursor: not-allowed;
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select.form-control,
    .datatable-card .dt-length select,
    .datatable-card .dataTables_length select,
    .topbar-shop-select {
        line-height: normal;
    }

    input[type="date"].form-control {
        min-height: var(--pc-control-height, 44px);
    }

    :root[data-color-mode="dark"] input[type="date"].form-control::-webkit-calendar-picker-indicator {
        filter: invert(0.85);
    }
}