/*
 * Debit / Credit choice as in lac (billing -> Bill Type): a pill with two segments and no radio circle; the chosen
 * segment is red for debit, green for credit (common/view/fragments/_debit-credit.blade.php)
 */
.tt-group {
    display: inline-flex;
    position: relative;
    background: #F1F3F5;
    border: 1px solid #E4E7EB;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.tt-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.tt-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    margin: 0;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #6B7280;
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
    white-space: nowrap;
}

.tt-option:hover {
    color: #374151;
}

/* Debit selected */
.tt-group input[value="debit"]:checked + .tt-option {
    background: #DC2626;
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.25), 0 0 0 1px rgba(220, 38, 38, 0.05);
}

/* Credit selected */
.tt-group input[value="credit"]:checked + .tt-option {
    background: #16A34A;
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25), 0 0 0 1px rgba(22, 163, 74, 0.05);
}

/* keyboard focus */
.tt-group input[type="radio"]:focus-visible + .tt-option {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
}

/* dark theme */
[data-bs-theme="dark"] .tt-group,
body[data-layout-mode="dark"] .tt-group {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .tt-option,
body[data-layout-mode="dark"] .tt-option {
    color: #9CA3AF;
}