/* ═══════════════════════════════════════════════════════════
   Checks — checkboxes, radios and a switch toggle
   Companion to forms.css. The TNonline source styled these only
   lightly (browser defaults with a teal accent); here they are
   given a consistent, token-driven look so any Capplon admin UI
   (role/permission matrices, multi-select lists, settings) shares
   one appearance. Accent + focus ring match the rest of the system.
   ═══════════════════════════════════════════════════════════ */

/* ── Native checkbox / radio, recoloured to the accent ──
   The lightest-touch option: keep the native control, just tint it.
   Use directly on <input type="checkbox|radio">. */
.tn-check-input {
    width: 1.05em;
    height: 1.05em;
    margin: 0;
    accent-color: var(--tn-accent);
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}

.tn-check-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.25);
}

.tn-check-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ── Check row — input + label on one line (the common case) ──
   <label class="tn-check"><input class="tn-check-input" type="checkbox"><span>Label</span></label> */
.tn-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-primary);
    cursor: pointer;
    line-height: 1.3;
}

.tn-check input {
    accent-color: var(--tn-accent);
    cursor: pointer;
}

.tn-check.is-disabled,
.tn-check input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Stack several checks vertically */
.tn-check-group {
    display: flex;
    flex-direction: column;
    gap: var(--tn-space-sm);
}

.tn-check-group--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--tn-space-md);
}

/* ═══════════════════════════════════════════════════════════
   Switch — an on/off toggle (settings, enable/disable flags)
   <label class="tn-switch">
     <input type="checkbox"><span class="tn-switch-track"></span>
   </label>
   ═══════════════════════════════════════════════════════════ */
.tn-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    cursor: pointer;
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-primary);
}

.tn-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tn-switch-track {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    background: var(--tn-border);
    border-radius: 999px;
    transition: background var(--tn-transition);
    flex-shrink: 0;
}

.tn-switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--tn-shadow-sm);
    transition: transform var(--tn-transition);
}

.tn-switch input:checked + .tn-switch-track {
    background: var(--tn-accent);
}

.tn-switch input:checked + .tn-switch-track::after {
    transform: translateX(16px);
}

.tn-switch input:focus-visible + .tn-switch-track {
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.25);
}

.tn-switch input:disabled + .tn-switch-track {
    opacity: 0.5;
    cursor: not-allowed;
}