/* ==========================================================
   SEPTIMA forms.css v0.1
   Základní formulářové prvky
   ========================================================== */

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.form-row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xs);

    margin-bottom: var(--space-xs);
}

@media (min-width: 768px) {
    .form-row {
        grid-template-columns: 8rem minmax(0, 1fr);
    }
}

.form-row label {
    margin: 0;
    font-weight: 600;
}

.form-row input:not([role="switch"]),
.form-row select,
.form-row textarea {
    width: 100%;
    padding: var(--space-sm);

    color: var(--text);
    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    font: inherit;
}

.form-row textarea {
    min-height: 120px;
    resize: vertical;
}

.form-row input:not([role="switch"]):focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.form-help {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.form-error {
    display: none;
    font-size: 0.9rem;
    color: var(--danger, #c0392b);
}

.form-row.is-error input:not([role="switch"]),
.form-row.is-error select,
.form-row.is-error textarea {
    border-color: var(--danger, #c0392b);
}

.form-row.is-error .form-error {
    display: block;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* ==========================================================
   SWITCH - RADIO - CHECKBOX
   ========================================================== */

.form-check {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    width: auto;
    accent-color: var(--primary);
}

.form-check label {
    font-weight: 400;
}

/* Switch */
.form-row input[type="checkbox"][role="switch"],
.form-switch input[type="checkbox"][role="switch"],
input[type="checkbox"][role="switch"] {
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;

    position: relative;
    display: inline-block;
    flex: 0 0 auto;

    width: 2.05rem;
    height: 1.05rem;
    min-height: 0;

    padding: 0;
    margin: 0;

    color: inherit;
    background: rgb(148 163 184 / .18);

    border: 1px solid rgb(148 163 184 / .16);
    border-radius: 999px;

    cursor: pointer;

    transition:
        background-color .22s cubic-bezier(.4, 0, .2, 1),
        border-color .22s cubic-bezier(.4, 0, .2, 1),
        box-shadow .22s cubic-bezier(.4, 0, .2, 1);
}

.form-row input[type="checkbox"][role="switch"]::before,
.form-switch input[type="checkbox"][role="switch"]::before,
input[type="checkbox"][role="switch"]::before {
    content: "";

    position: absolute;
    top: 1px;
    left: 1px;

    width: calc(1.05rem - 4px);
    height: calc(1.05rem - 4px);

    background: #fff;
    border-radius: 50%;

    box-shadow: 0 1px 2px rgb(0 0 0 / .22);

    transition:
        transform .22s cubic-bezier(.4, 0, .2, 1),
        box-shadow .22s cubic-bezier(.4, 0, .2, 1);
}

.form-row input[type="checkbox"][role="switch"]:checked,
.form-switch input[type="checkbox"][role="switch"]:checked,
input[type="checkbox"][role="switch"]:checked {
    background: var(--primary);
    border-color: var(--primary);
}

.form-row input[type="checkbox"][role="switch"]:checked::before,
.form-switch input[type="checkbox"][role="switch"]:checked::before,
input[type="checkbox"][role="switch"]:checked::before {
    transform: translateX(1rem);
}

.form-row input[type="checkbox"][role="switch"]:focus-visible,
.form-switch input[type="checkbox"][role="switch"]:focus-visible,
input[type="checkbox"][role="switch"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.form-row input[type="checkbox"][role="switch"]:disabled,
.form-switch input[type="checkbox"][role="switch"]:disabled,
input[type="checkbox"][role="switch"]:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.form-progress {
    width: 100%;
    height: 0.75rem;
    accent-color: var(--primary);
}

/* ==========================================================
   Search input
   Nativní lupa a X v prohlížeči
   ========================================================== */

input[type="search"] {
    appearance: auto;
    -webkit-appearance: searchfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    appearance: auto;
    -webkit-appearance: auto;
}

.table-search-clear {
    position: absolute;
    right: .75rem;
    top: 50%;

    transform: translateY(-50%);

    width: 1.5rem;
    height: 1.5rem;

    padding: 0;
    margin: 0;

    border: 0;
    background: transparent;

    cursor: pointer;

    font-size: 1.25rem;
    line-height: 1;
}