/*
 * cati-local/forms.css -- form field extensions: select chevron, .u-check, .u-form (WIZARDTICK-125)
 *
 * Local extension to the CATI visual system. The official package
 * (client/static/css/cati/*.css, delivered by design) covers the wizard and
 * login only; everything here follows the same --uvaq-* tokens but is NOT part
 * of that delivery. Each pattern is documented in
 * _uvaq-assets/sistema-visual-cati/extensiones-locales/. Loaded from base.html
 * right after cati.min.css (see the <link> list there for the order).
 */

/* --- Form field extensions (WIZARDTICK-125). The package ships .u-field,
   .u-label, .u-input, .u-select, .u-textarea and .u-fieldnote; these are
   what the dashboard forms needed on top. --- */

/* Select chevron: the package leaves the browser's native arrow, so every
   browser drew its own. Global on purpose (wizard and My Tickets included). */
.u-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234B5D6E' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--uvaq-space-3) center;
    background-size: 14px;
    padding-right: 36px;
}
.u-select[multiple] { background-image: none; padding-right: var(--uvaq-space-3); }

/* Checkbox: the package only has .u-choice (the wizard's option cards), not a
   plain checkbox. Native input with appearance: none, 20px, brand fill when
   checked; the label wraps the input so the whole text is clickable. */
.u-check {
    display: flex;
    align-items: flex-start;
    gap: var(--uvaq-space-2);
    font-size: var(--uvaq-fs-body);
    color: var(--uvaq-text);
    cursor: pointer;
}
.u-check input[type="checkbox"] {
    appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    border: 1px solid var(--uvaq-border-field);
    border-radius: var(--uvaq-radius-sm);
    background-color: var(--uvaq-surface);
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: background-color var(--uvaq-dur-fast) var(--uvaq-ease), border-color var(--uvaq-dur-fast) var(--uvaq-ease);
}
.u-check input[type="checkbox"]::before {
    content: "";
    width: 12px;
    height: 12px;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    background-color: #FFFFFF;
    transform: scale(0);
}
.u-check input[type="checkbox"]:checked {
    background-color: var(--uvaq-brand-500);
    border-color: var(--uvaq-brand-500);
}
.u-check input[type="checkbox"]:checked::before { transform: scale(1); }
.u-check input[type="checkbox"]:hover:not(:disabled) { border-color: var(--uvaq-neutral-500); }
.u-check input[type="checkbox"]:disabled {
    background-color: var(--uvaq-neutral-100);
    border-color: var(--uvaq-border);
    cursor: not-allowed;
}
.u-check input[type="checkbox"]:disabled:checked {
    background-color: var(--uvaq-neutral-400);
    border-color: var(--uvaq-neutral-400);
}
.u-check--disabled { color: var(--uvaq-text-muted); cursor: not-allowed; }
.u-check__hint { display: block; font-size: var(--uvaq-fs-help); color: var(--uvaq-text-muted); }
.u-check + .u-check { margin-top: var(--uvaq-space-2); }

/* Create/edit forms sit in a centered 720px panel, like the wizard's
   .u-flowcard, instead of stretching across the whole content area. Lists
   with filters keep the full width. */
.u-form--narrow { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Form foot: primary action first, Cancel next to it, over a top rule. */
.u-form__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uvaq-space-2);
    margin-top: var(--uvaq-space-5);
    padding-top: var(--uvaq-space-4);
    border-top: 1px solid var(--uvaq-border);
}

/* Error note carries an icon before the message. */
.u-fieldnote--error i { flex: none; }

/* The package textarea is 168px tall (the wizard's description box). In the
   dashboard the rows attribute drives the height, so a 2-row description
   field doesn't open a hole in the form. */
.dashboard-content .u-textarea { min-height: 96px; }