/* Custom Form Elements (Mathematically Consistent) */

/* Range Slider */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: var(--bg-3);
    height: var(--spacing-1);
    border-radius: var(--radius-pill);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -6px; /* Visual centering */
    background: var(--accent, var(--blue-3));
    height: var(--spacing-3);
    width: var(--spacing-3);
    border-radius: var(--radius-circle);
    box-shadow: var(--shadow-1);
    border: 2px solid var(--bg-1);
    transition: transform 0.1s ease;
}

input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.2);
}

/* Checkboxes & Radios */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--bg-4);
    background: var(--bg-1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

input[type="checkbox"] { border-radius: var(--radius-1); }
input[type="radio"] { border-radius: var(--radius-circle); }

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: var(--blue-3);
    border-color: var(--blue-3);
}

input[type="checkbox"]:checked::before {
    content: "";
    width: 0.65rem;
    height: 0.65rem;
    background-color: #fff;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="radio"]:checked::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #fff;
}

/* Progress & Meter */
progress, meter {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    width: 100%;
    height: var(--spacing-1);
    background: var(--bg-3);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

progress::-webkit-progress-bar { background: var(--bg-3); }
progress::-webkit-progress-value { background: var(--blue-3); }
meter::-webkit-meter-bar { background: var(--bg-3); }
meter::-webkit-meter-optimum-value { background: var(--green-3); }
meter::-webkit-meter-suboptimum-value { background: var(--yellow-3); }
/* File Upload */
input[type="file"] {
    background: var(--bg-2);
    border: 2px dashed var(--bg-4);
    border-radius: var(--radius-2);
    padding: var(--spacing-2);
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    background: var(--bg-5);
    color: var(--text-5);
    border: none;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-1);
    margin-right: var(--spacing-2);
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    background: var(--bg-4);
}

.hidden { display: none !important; }
.cursor-pointer { cursor: pointer; }
.pointer-events-none { pointer-events: none !important; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; left: 0; right: 0; bottom: 0; }
.z-50 { z-index: var(--z-active); }

/* Switch Toggle */
.switch {
    position: relative;
    display: inline-block;
    width: 4rem;
    height: 1.75rem;
    cursor: pointer;
}

.switch input { opacity: 0; width: 0; height: 0; }

.switch-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--bg-1);
    border-radius: var(--radius-pill);
    box-shadow: inset var(--shadow-1);
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 1.35rem;
    width: 1.35rem;
    left: 0.2rem;
    bottom: 0.2rem;
    background-color: white;
    border-radius: 50%;
    box-shadow: var(--shadow-1);
}

input:checked + .switch-slider { background-color: var(--accent, var(--blue-3)); }
input:checked + .switch-slider:before { transform: translate3d(2.25rem, 0, 0); }

/* Segmented Control (Industrial Redesign) */
.segmented-control {
    display: flex;
    width: 100%;
    background: var(--bg-3);
    border-radius: var(--radius-2);
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--bg-4);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.segmented-item {
    flex: 1 1 0;
    width: 0;
    padding: 6px 12px;
    border-radius: calc(var(--radius-2) - 1px);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    cursor: pointer;
    border: none;
    color: var(--text-2);
    background: transparent;
    transition: all var(--m-fast) var(--m-ease);
    min-width: 0;
    overflow: hidden;
}

.segmented-item:hover:not(.active) {
    background: var(--bg-4);
    color: var(--text-5);
}

.segmented-item.active {
    background-color: var(--accent, var(--p1-3));
    color: #ffffff !important;
    box-shadow: var(--shadow-1), 0 2px 4px rgba(0,0,0,0.1);
}

.border-md-l { border: none; }
@media (min-width: 40rem) {
    .border-md-l { border: none; }
}

.segmented-item:hover:not(.active) {
    color: var(--text-5);
}

/* Wizard Progress / Tab Styling */
.form-tab.active-item {
    background-color: var(--accent, var(--blue-3)) !important;
    color: #ffffff !important;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

/* --- Industrial No-JS Logic Engine --- */
/* This engine uses the :has() selector to toggle field visibility based on the state of other inputs. */

@supports (selector(:has(*))) {
    /* Generic rule: Hide logic-bound containers by default */
    .field-container[data-logic-field] {
        display: none !important;
    }

    /* Show logic-bound container if the trigger input matches the value */
    form:has(input[name="role"][value="admin"]:checked) .field-container[data-logic-field="role"][data-logic-value="admin"],
    form:has(select[name="type"] option[value="supplier"]:checked) .field-container[data-logic-field="type"][data-logic-value="supplier"],
    form:has(input[type="checkbox"][name="advanced_mode"]:checked) .field-container[data-logic-field="advanced_mode"][data-logic-value="on"] {
        display: flex !important;
    }

    /* --- Level 2: Visual Validation Sync --- */

    /* Hide error messages by default unless they have content (server-side errors) */
    .error-msg:empty { display: none; }

    /* Visual feedback for invalid inputs (only once the user has started interacting) */
    .field-input:invalid:not(:placeholder-shown) {
        border-color: var(--red-3) !important;
        background-color: color-mix(in srgb, var(--red-3), transparent 95%);
    }

    /* Highlight label for invalid inputs */
    .field-container:has(.field-input:invalid:not(:placeholder-shown)) label {
        color: var(--red-3) !important;
    }

    /* Force show error message container when input is invalid */
    .field-container:has(.field-input:invalid:not(:placeholder-shown)) .error-msg {
        display: block !important;
    }
}