/*
 * One design system for CRM record cards.
 * Use .crm-card-item / .crm-card-grid for future modules; the existing
 * employee, supplier and dictionary classes are supported without changing JS.
 * This component intentionally does not style the larger .crm-card containers.
 */

:is(.crm-card-grid, .crm-employee-grid, .crm-supplier-grid, .crm-dict-grid) {
    gap: var(--crm-card-item-gap);
}

:is(.crm-card-grid, .crm-employee-grid, .crm-supplier-grid, .crm-dict-grid) > .crm-empty-state {
    grid-column: 1 / -1;
}

:is(.crm-card-item, .crm-employee-card, .crm-supplier-card, .crm-dict-card, .crm-dict-card.is-inactive) {
    box-sizing: border-box;
    padding: var(--crm-card-item-padding);
    border: var(--crm-card-item-border);
    border-radius: var(--crm-card-item-radius);
    background: var(--crm-card-item-bg);
    box-shadow: var(--crm-card-item-shadow);
    transition: var(--crm-card-item-hover-transition);
}

@media (hover: hover) and (pointer: fine) {
    :is(.crm-card-item, .crm-employee-card, .crm-supplier-card, .crm-dict-card, .crm-dict-card.is-inactive):hover {
        transform: var(--crm-card-item-hover-transform);
        border: var(--crm-card-item-hover-border);
        background: var(--crm-card-item-hover-bg);
        box-shadow: var(--crm-card-item-hover-shadow);
    }

    /* Visual hover behavior also applies when a record is read-only. */
    .crm-employees-page.is-readonly .crm-employee-card:hover,
    .crm-suppliers-page.is-readonly .crm-supplier-card:hover {
        transform: var(--crm-card-item-hover-transform);
    }
}

:is(.crm-card-item, .crm-employee-card, .crm-supplier-card, .crm-dict-card):focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    :is(.crm-card-item, .crm-employee-card, .crm-supplier-card, .crm-dict-card) {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
    :is(.crm-card-item, .crm-employee-card, .crm-supplier-card, .crm-dict-card):hover,
    .crm-employees-page.is-readonly .crm-employee-card:hover,
    .crm-suppliers-page.is-readonly .crm-supplier-card:hover {
        transform: none;
    }
}