/*
 * Radio groups shown as selectable cards (add class "nf-choice-cards" with ->extraAttributes()).
 * The chosen card gets a light tint of the user's theme colour; Filament's --primary-* are comma triples, so they go through rgba().
 * Used by the One time / Recurring choice on Revenues and Expenses.
 */

/* Filament lays the choices out in CSS columns and spaces them with a top padding on each item: that padding is replaced by a
   gap under every card but the last, so stacked cards are never glued together (and the first one lines up with the label). */
.nf-choice-cards > div { padding-top: 0; }
.nf-choice-cards > div:not(:last-child) { padding-bottom: 14px; }
.nf-choice-cards { margin-top: 0 !important; }

.nf-choice-cards label {
    position: relative;
    height: 100%;
    cursor: pointer;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid rgb(229 231 235);
    background: #fff;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}

.nf-choice-cards label:hover { border-color: rgba(var(--primary-500), .55); }

/* The native radio stays for keyboard/screen readers but the card itself is the target. */
.nf-choice-cards input[type='radio'] { flex-shrink: 0; cursor: pointer; }

.nf-choice-cards label:has(input:checked) {
    background: rgba(var(--primary-500), .1);
    border-color: rgb(var(--primary-500));
    box-shadow: 0 0 0 3px rgba(var(--primary-500), .12);
}

.nf-choice-cards label:has(input:checked) > div > span { color: rgb(var(--primary-700)); }
.nf-choice-cards label:has(input:focus-visible) { outline: 2px solid rgb(var(--primary-500)); outline-offset: 2px; }
.nf-choice-cards label:has(input:disabled) { cursor: not-allowed; opacity: .6; }

html.dark .nf-choice-cards label { background: rgb(17 24 39); border-color: rgb(255 255 255 / .1); }
html.dark .nf-choice-cards label:hover { border-color: rgba(var(--primary-400), .6); }
html.dark .nf-choice-cards label:has(input:checked) {
    background: rgba(var(--primary-500), .16);
    border-color: rgb(var(--primary-400));
    box-shadow: 0 0 0 3px rgba(var(--primary-400), .15);
}
html.dark .nf-choice-cards label:has(input:checked) > div > span { color: rgb(var(--primary-300)); }

/* Two cards side by side stay a comfortable size on a wide form. */
.nf-choice-cards { max-width: 40rem; }

/* Checkbox lists shown as cards too (the Businesses cards of an employee): the box stays at the top corner of each card. */
.nf-choice-cards input[type='checkbox'] { flex-shrink: 0; cursor: pointer; margin-top: 2px; }
.nf-choice-cards.nf-business-cards { gap: 14px; }
.nf-choice-cards.nf-business-cards > div:not(:last-child) { padding-bottom: 0; }
.nf-business-cards label { align-items: flex-start; min-height: 92px; }
.nf-business-card-head { display: inline-flex; align-items: center; gap: 10px; }
.nf-business-card-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex-shrink: 0; background: #fff; border: 1px solid rgb(229 231 235); }
.nf-business-card-initials { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: .3px;
    color: rgb(var(--primary-700)); background: rgba(var(--primary-500), .12); border-color: rgba(var(--primary-500), .25); }
.nf-business-card-name { font-weight: 600; font-size: 15px; }
.nf-business-card-details { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding-inline-start: 44px; font-size: 12.5px; }
html.dark .nf-business-card-logo { border-color: rgb(255 255 255 / .12); background: rgb(31 41 55); }
html.dark .nf-business-card-initials { color: rgb(var(--primary-300)); background: rgba(var(--primary-400), .15); }