/*
 * Copyright (c) SupportSystem s.r.o. Všechna práva vyhrazena.
 * Autoři: Petr Marek, Jan Kučera
 *
 * Checkbox v2 — vlastní stylizovaný checkbox (PPP_UKOL_211)
 *
 * Designerová specifikace V5+ (menus.css):
 *   .fi-cb {
 *     width: 16px; height: 16px;
 *     border-radius: 4px;
 *     border: 1.5px solid var(--border-strong);
 *     background: var(--bg-input);
 *   }
 *   .fi-on .fi-cb {
 *     background: var(--accent);
 *     border-color: var(--accent);
 *   }
 *
 * @uses-design-tokens-v2
 */

.checkbox-v2 {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-spacing-sm);
    cursor: pointer;
    user-select: none;
    font-family: var(--ui-font-base);
    font-size: var(--ui-text-size-label);
    color: var(--ui-text-primary);
}

.checkbox-v2--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─── Skrytý nativní input (accessibility) ────────────────────────────── */
.checkbox-v2__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: calc(-1 * var(--ui-spacing-3xs));
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Vlastní 16×16 box ───────────────────────────────────────────────── */
.checkbox-v2__box {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: var(--ui-radius-small);
    border: 1.5px solid var(--ui-border-strong);
    background: var(--ui-surface-input-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}

/* ─── Checked stav ────────────────────────────────────────────────────── */
.checkbox-v2--checked .checkbox-v2__box {
    background: var(--ui-action-primary-bg);
    border-color: var(--ui-action-primary-bg);
    color: var(--ui-action-primary-text);
}

/* ─── Focus ring na fokusovaný (klávesa Tab) input ────────────────────── */
.checkbox-v2__input:focus-visible + .checkbox-v2__box {
    outline: 2px solid var(--ui-action-primary-bg);
    outline-offset: 2px;
}

/* ─── Hover (jen v aktivním stavu) ────────────────────────────────────── */
.checkbox-v2:not(.checkbox-v2--disabled):hover .checkbox-v2__box {
    border-color: var(--ui-action-primary-bg);
}

/* ─── Label vpravo ────────────────────────────────────────────────────── */
.checkbox-v2__label {
    flex: 1;
    line-height: 1.4;
}