/**
 * Logbaza forms — custom HTML form chrome.
 *
 * SCOPE: only `.lb-*` classes. Does NOT touch Filament selectors
 * (.fi-input, .fi-input-wrp, .fi-fo-field-wrp-label, etc.) or raw
 * `input[type=...]`/`select`/`textarea`. Filament forms inherit the
 * same visual tokens via filament-shared.css.
 *
 * Per codex review: stop fighting 3 different DOM systems via global
 * selectors. Each renderer (custom HTML, Filament, Filepond) styles
 * itself using shared design tokens from tokens.css.
 *
 * Markup:
 *   <div class="lb-field-wrap">
 *     <label class="lb-label">Loaded miles</label>
 *     <input class="lb-field" type="number" />
 *     <p class="lb-helper">Total miles for this trip.</p>
 *     <p class="lb-helper lb-helper-error">Required.</p>
 *   </div>
 */

/* -------------------------------------------------------------------------- */
/* INPUT / SELECT / TEXTAREA                                                  */
/* -------------------------------------------------------------------------- */

.lb-field {
    display: block;
    width: 100%;
    min-height: var(--lb-input-h);
    padding: var(--lb-input-padding-y) var(--lb-input-padding-x);
    font-size: var(--lb-input-font-size-mobile);
    font-family: inherit;
    line-height: var(--lb-input-line-height);
    color: var(--lb-input-color);
    background-color: var(--lb-input-bg);
    border: var(--lb-input-border-w) solid var(--lb-input-border-c);
    border-radius: var(--lb-input-radius);
    box-shadow: none;
    transition: var(--lb-transition);
    -webkit-appearance: none;
    appearance: none;
}

@media (min-width: 640px) {
    .lb-field {
        font-size: var(--lb-input-font-size);
    }
}

textarea.lb-field {
    min-height: 120px;
    line-height: 1.5;
    resize: vertical;
}

select.lb-field {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' stroke='%236A7675' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding-right: 38px;
}

.lb-field::placeholder {
    color: var(--lb-input-color-muted);
    opacity: 1;
}

/* HOVER */
.lb-field:hover:not(:focus):not(:disabled):not([readonly]) {
    border-color: var(--lb-input-border-hover);
}

/* FOCUS — single visible indicator: border color shift + soft halo */
.lb-field:focus {
    outline: 0;
    border-color: var(--lb-focus-color);
    box-shadow: var(--lb-focus-ring);
}

/* DISABLED */
.lb-field:disabled {
    background-color: var(--lb-input-bg-disabled);
    color: var(--lb-input-color-muted);
    cursor: not-allowed;
    opacity: 1;
}

/* READ-ONLY */
.lb-field[readonly] {
    background-color: var(--lb-input-bg-readonly);
    color: var(--lb-helper-color);
    cursor: default;
}

/* INVALID — pair with .lb-helper-error text + role="alert", no color-only */
.lb-field[aria-invalid="true"],
.lb-field.lb-field-invalid {
    border-color: var(--lb-error-color);
}
.lb-field[aria-invalid="true"]:focus,
.lb-field.lb-field-invalid:focus {
    border-color: var(--lb-error-color);
    box-shadow: var(--lb-error-ring);
}

/* -------------------------------------------------------------------------- */
/* LABEL                                                                      */
/* -------------------------------------------------------------------------- */

.lb-label {
    display: block;
    font-size: var(--lb-label-size);
    font-weight: var(--lb-label-weight);
    color: var(--lb-label-color);
    margin-bottom: var(--lb-label-mb);
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
}

/* -------------------------------------------------------------------------- */
/* HELPER TEXT (under input) + ERROR variant                                  */
/* -------------------------------------------------------------------------- */

.lb-helper {
    display: block;
    font-size: var(--lb-helper-size);
    color: var(--lb-helper-color);
    margin-top: var(--lb-helper-mt);
    line-height: var(--lb-helper-line-height);
    font-weight: 400;
}
.lb-helper-error {
    color: var(--lb-error-color);
}

/* -------------------------------------------------------------------------- */
/* CHECKBOX / RADIO — opt-in via .lb-checkbox / .lb-radio                     */
/* -------------------------------------------------------------------------- */

.lb-checkbox,
.lb-radio {
    width: var(--lb-control-size);
    height: var(--lb-control-size);
    padding: 0;
    border: 1.5px solid var(--lb-input-border-c);
    background-color: var(--lb-input-bg);
    cursor: pointer;
    transition: var(--lb-transition);
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}
.lb-checkbox { border-radius: 4px; }
.lb-radio    { border-radius: 50%; }

.lb-checkbox:checked {
    background-color: var(--lb-control-checked);
    border-color: var(--lb-control-checked);
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-position: center;
    background-repeat: no-repeat;
}
.lb-radio:checked {
    background-color: var(--lb-input-bg);
    border-color: var(--lb-control-checked);
    box-shadow: inset 0 0 0 4px var(--lb-control-checked);
}
.lb-checkbox:focus-visible,
.lb-radio:focus-visible {
    outline: 0;
    box-shadow: var(--lb-focus-ring);
}
.lb-checkbox:disabled,
.lb-radio:disabled {
    background-color: var(--lb-input-bg-disabled);
    cursor: not-allowed;
}

/* -------------------------------------------------------------------------- */
/* BUTTON — token-driven primitive, mirrors <x-btn> output.                   */
/* Tokens in tokens.css. Edit there to change site-wide button look.          */
/* Used by <x-btn> + can be applied directly in custom HTML where needed.     */
/* -------------------------------------------------------------------------- */

.lb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lb-btn-gap);
    font-weight: var(--lb-btn-font-weight);
    font-family: inherit;
    letter-spacing: 0;
    border-radius: var(--lb-btn-radius);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--lb-transition);
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Sizes */
.lb-btn-sm { height: var(--lb-btn-h-sm); padding: 0 var(--lb-btn-px-sm); font-size: var(--lb-btn-font-size-sm); }
.lb-btn-md { height: var(--lb-btn-h-md); padding: 0 var(--lb-btn-px-md); font-size: var(--lb-btn-font-size-md); }
.lb-btn-lg { height: var(--lb-btn-h-lg); padding: 0 var(--lb-btn-px-lg); font-size: var(--lb-btn-font-size-lg); }

/* Block (full width) */
.lb-btn-block { width: 100%; }

/* Primary */
.lb-btn-primary {
    background-color: var(--lb-btn-primary-bg);
    color: var(--lb-btn-primary-text);
    box-shadow: var(--lb-btn-shadow);
}
.lb-btn-primary:hover:not(:disabled) {
    background-color: var(--lb-btn-primary-bg-hover);
    box-shadow: var(--lb-btn-shadow-hover);
}
.lb-btn-primary:active:not(:disabled) {
    background-color: var(--lb-btn-primary-bg-active);
}

/* Secondary (outlined) */
.lb-btn-secondary {
    background-color: var(--lb-btn-secondary-bg);
    color: var(--lb-btn-secondary-text);
    border-color: var(--lb-btn-secondary-border);
}
.lb-btn-secondary:hover:not(:disabled) {
    background-color: var(--lb-btn-secondary-bg-hover);
}
.lb-btn-secondary:active:not(:disabled) {
    background-color: var(--lb-btn-secondary-bg-active);
}

/* Ghost */
.lb-btn-ghost {
    background-color: var(--lb-btn-ghost-bg);
    color: var(--lb-btn-ghost-text);
}
.lb-btn-ghost:hover:not(:disabled) {
    background-color: var(--lb-btn-ghost-bg-hover);
    color: var(--lb-btn-ghost-text-hover);
}

/* Focus — single visible indicator. Halo matches inputs. */
.lb-btn:focus-visible {
    outline: 0;
    box-shadow: var(--lb-focus-ring);
}

/* Disabled */
.lb-btn:disabled,
.lb-btn[aria-disabled="true"] {
    opacity: var(--lb-btn-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}