@import url('../variables.css');

/*
 * Quick Add Employee (Modal)
 * Role template selection UI.
 */

.ifinsta-quick-employee__role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--ifinsta-space-3);
}

.ifinsta-quick-employee__role-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ifinsta-space-1);
    padding: var(--ifinsta-space-4);
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-lg);
    background: var(--ifinsta-bg-elevated);
    color: var(--ifinsta-text);
    text-align: left;
    cursor: pointer;
}

.ifinsta-quick-employee__role-card:hover,
.ifinsta-quick-employee__role-card:focus-visible {
    border-color: var(--ifinsta-border-focus);
    outline: none;
}

.ifinsta-quick-employee__role-card--selected {
    border-color: var(--ifinsta-primary-500);
    background: var(--ifinsta-primary-50);
}

.ifinsta-quick-employee__role-check {
    position: absolute;
    top: var(--ifinsta-space-3);
    right: var(--ifinsta-space-3);
    width: 20px;
    height: 20px;
    border: 1px solid var(--ifinsta-border);
    border-radius: var(--ifinsta-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    background: transparent;
}

.ifinsta-quick-employee__role-card--selected .ifinsta-quick-employee__role-check {
    background: var(--ifinsta-primary-500);
    border-color: var(--ifinsta-primary-500);
    color: var(--ifinsta-white);
}

.ifinsta-quick-employee__role-name {
    font-weight: var(--ifinsta-font-semibold);
    font-size: var(--ifinsta-text-sm);
}

.ifinsta-quick-employee__role-desc {
    font-size: var(--ifinsta-text-xs);
    color: var(--ifinsta-text-muted);
    line-height: var(--ifinsta-leading-snug);
}

.ifinsta-quick-employee__role-shift {
    font-size: 0.6875rem;
    color: var(--ifinsta-primary-600);
    margin-top: var(--ifinsta-space-1);
}