/**
 * BMW M Design — Canonical Form Controls
 * Source: DESIGN-bmw-m.md → component.text-input
 *
 * Surface:  #1a1a1a (--surface-card)
 * Text:     #ffffff (--text-primary)
 * Border:   1px --hairline, radius 0
 * Padding:  12px 16px, height 48px
 * Focus:    border → white
 *
 * Uses !important so every template inherits the same look
 * even when page-level / inline styles disagree.
 */

/* ---- Shared field tokens ---- */
:root {
    --bmw-field-height: 48px;
    --bmw-field-padding-y: 12px;
    --bmw-field-padding-x: 16px;
    --bmw-field-radius: 0;
    --bmw-field-bg: var(--surface-card);
    --bmw-field-bg-soft: var(--surface-soft);
    --bmw-field-text: var(--text-primary);
    --bmw-field-muted: var(--text-muted);
    --bmw-field-border: var(--hairline);
    --bmw-field-border-hover: var(--text-muted);
    --bmw-field-border-focus: var(--primary-color);
    --bmw-field-border-error: var(--error-color);
    --bmw-field-font-size: 16px;
    --bmw-field-transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Field selector (text-like controls) ---- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input:not([type]),
select,
textarea,
.form-control,
.stnk-input,
.bmw-input {
    box-sizing: border-box !important;
    width: 100%;
    height: var(--bmw-field-height) !important;
    min-height: var(--bmw-field-height) !important;
    padding-block: var(--bmw-field-padding-y) !important;
    padding-inline: var(--bmw-field-padding-x) !important;
    border: 1px solid var(--bmw-field-border) !important;
    border-radius: var(--bmw-field-radius) !important;
    background-color: var(--bmw-field-bg) !important;
    color: var(--bmw-field-text) !important;
    font-family: inherit !important;
    font-size: var(--bmw-field-font-size) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    outline: none !important;
    transition: var(--bmw-field-transition) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Full-width inside form layouts */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group input[type="search"],
.form-group input[type="date"],
.form-group input[type="datetime-local"],
.form-group input[type="month"],
.form-group input[type="week"],
.form-group input[type="time"],
.form-group input[type="file"],
.form-group input:not([type]),
.form-group select,
.form-group textarea,
.form-group .form-control,
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="search"],
.field input[type="date"],
.field input[type="datetime-local"],
.field input[type="file"],
.field input:not([type]),
.field select,
.field textarea,
.field .form-control,
.cr-form input[type="text"],
.cr-form input[type="email"],
.cr-form input[type="password"],
.cr-form input[type="number"],
.cr-form input[type="tel"],
.cr-form input[type="url"],
.cr-form input[type="search"],
.cr-form input[type="date"],
.cr-form input[type="datetime-local"],
.cr-form input[type="file"],
.cr-form input:not([type]),
.cr-form select,
.cr-form textarea,
.cr-form .form-control {
    width: 100% !important;
    max-width: 100% !important;
}

textarea,
textarea.form-control,
textarea.stnk-input,
textarea.bmw-input {
    height: auto !important;
    min-height: 96px !important;
    resize: vertical;
    line-height: 1.5 !important;
}

/* File inputs keep height auto; button chrome separate */
input[type="file"],
input[type="file"].form-control,
input[type="file"].stnk-input {
    height: auto !important;
    min-height: var(--bmw-field-height) !important;
    padding: 10px 12px !important;
    cursor: pointer;
    color: var(--text-secondary, #bbbbbb) !important;
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    border: 1px solid var(--bmw-field-border);
    border-radius: 0;
    background: var(--bmw-field-bg-soft);
    color: var(--bmw-field-text);
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

input[type="file"]::file-selector-button:hover {
    border-color: var(--bmw-field-border-hover);
    background: var(--surface-elevated, #262626);
}

/* Select chevron */
select,
select.form-control,
select.stnk-input,
select.bmw-input {
    padding-inline-end: 40px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-secondary, #bbbbbb) 50%),
        linear-gradient(135deg, var(--text-secondary, #bbbbbb) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 13px) calc(50% - 3px) !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    cursor: pointer;
}

select option {
    background: var(--bmw-field-bg);
    color: var(--bmw-field-text);
}

/* Placeholders */
input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.stnk-input::placeholder,
.bmw-input::placeholder {
    color: var(--bmw-field-muted) !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

/* Hover */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="month"]:hover,
input[type="week"]:hover,
input[type="time"]:hover,
input:not([type]):hover,
select:hover,
textarea:hover,
.form-control:hover,
.stnk-input:hover,
.bmw-input:hover {
    border-color: var(--bmw-field-border-hover) !important;
}

/* Focus — BMW M: border thickens to white */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus,
.form-control:focus,
.stnk-input:focus,
.bmw-input:focus,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="number"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
input[type="search"]:focus-visible,
input[type="date"]:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible,
.stnk-input:focus-visible,
.bmw-input:focus-visible {
    border-color: var(--bmw-field-border-focus) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Disabled / readonly */
input:disabled,
select:disabled,
textarea:disabled,
.form-control:disabled,
.stnk-input:disabled,
input[readonly],
textarea[readonly],
.form-control[readonly] {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    background-color: var(--bmw-field-bg-soft) !important;
}

/* Error / invalid */
.stnk-input-error,
.form-control.is-invalid,
.form-control.input-error,
input.is-invalid,
select.is-invalid,
textarea.is-invalid,
input.input-error,
select.input-error,
textarea.input-error {
    border-color: var(--bmw-field-border-error) !important;
}

.stnk-input-error:focus,
.form-control.is-invalid:focus,
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
    border-color: var(--bmw-field-border-error) !important;
}

/* Date / time calendar icon (WebKit) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
    cursor: pointer;
}

/* Number spinners — keep usable, muted */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.6;
}

/* ---- Labels ---- */
.form-group > label,
.form-label,
label.form-label,
.cr-form label,
.field-label,
.stnk-label,
.r-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary, #bbbbbb);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.form-label.required::after,
label.required::after {
    content: " *";
    color: var(--bmw-field-border-error);
    font-weight: 700;
}

/* ---- Form group / field spacing ---- */
.form-group,
.field {
    margin-bottom: 1.25rem;
}

.form-group:last-child,
.field:last-child {
    margin-bottom: 0;
}

/* ---- Form grids (change-request / inventaris / ticket rows) ---- */
.grid {
    display: grid;
}

.cr-grid-2,
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 900px) {
    .cr-grid-2,
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ---- Autofill (Chrome dark) ---- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--bmw-field-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--bmw-field-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--bmw-field-bg) inset !important;
    caret-color: var(--bmw-field-text) !important;
    border: 1px solid var(--bmw-field-border) !important;
    transition: background-color 99999s ease-in-out 0s;
}

/* ---- Icon-prefixed fields (search) ---- */
.input-with-icon,
.search-input-wrap input,
.filter-search input,
input.input-with-icon,
.stnk-input.input-with-icon,
.form-control.input-with-icon,
.cr-search-wrap input,
.cr-search-input input {
    padding-inline-start: 2.4rem !important;
}

/* Hidden radios used as custom card selectors (create-ticket priority) */
.priority-input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    pointer-events: none !important;
}

/* ---- Checkbox / radio (compact, sharp) ---- */
input[type="checkbox"],
input[type="radio"]:not(.priority-input) {
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    padding: 0 !important;
    border: 1px solid var(--bmw-field-border) !important;
    border-radius: 0 !important;
    background: var(--bmw-field-bg) !important;
    accent-color: var(--m-blue-dark, #1c69d4);
    box-shadow: none !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    cursor: pointer;
}