/**
 * KHAPIA Admin — Dark mode form controls
 * Scoped to html.dark / .dark — does not affect light theme.
 */

html.dark {
    color-scheme: dark;

    --admin-input-bg: #1e293b;
    --admin-input-border: #334155;
    --admin-input-text: #f8fafc;
    --admin-input-placeholder: #94a3b8;
    --admin-label: #e2e8f0;
    --admin-hint: #94a3b8;
    --admin-focus: #635bff;
    --admin-focus-ring: rgba(99, 91, 255, 0.28);
}

/* ── Text fields, textareas, selects ── */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]):not([type="range"]),
html.dark textarea,
html.dark select {
    color: var(--admin-input-text);
    background-color: var(--admin-input-bg);
    border-color: var(--admin-input-border);
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--admin-input-placeholder);
    opacity: 1;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: var(--admin-focus);
    outline: none;
    box-shadow: 0 0 0 3px var(--admin-focus-ring);
}

html.dark input:disabled,
html.dark textarea:disabled,
html.dark select:disabled {
    opacity: 0.72;
    color: var(--admin-input-placeholder);
    cursor: not-allowed;
}

/* Override explicit light-theme text utilities on form controls */
html.dark input.text-gray-900,
html.dark textarea.text-gray-900,
html.dark select.text-gray-900,
html.dark input.text-gray-800,
html.dark textarea.text-gray-800,
html.dark select.text-gray-800,
html.dark input.text-gray-700,
html.dark textarea.text-gray-700,
html.dark select.text-gray-700,
html.dark input.text-black,
html.dark textarea.text-black,
html.dark select.text-black {
    color: var(--admin-input-text);
}

/* Select options */
html.dark select option,
html.dark select optgroup {
    background-color: var(--admin-input-bg);
    color: var(--admin-input-text);
}

/* Autofill (Chrome / Safari) */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus,
html.dark textarea:-webkit-autofill,
html.dark select:-webkit-autofill {
    -webkit-text-fill-color: var(--admin-input-text);
    caret-color: var(--admin-input-text);
    box-shadow: 0 0 0 1000px var(--admin-input-bg) inset;
    transition: background-color 99999s ease-in-out 0s;
}

/* Date / time / datetime-local pickers */
html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="datetime-local"],
html.dark input[type="month"],
html.dark input[type="week"] {
    color-scheme: dark;
}

/* ── Labels ── */
html.dark label {
    color: var(--admin-label);
}

html.dark legend {
    color: var(--admin-label);
}

/* Preserve semantic / brand label colors */
html.dark label.text-red-500,
html.dark label.text-red-600,
html.dark label.text-green-600,
html.dark label.text-indigo-600 {
    color: inherit;
}

/* ── Help / hint text near form fields ── */
html.dark label + p.text-xs,
html.dark label + .text-xs,
html.dark .mt-1.text-xs,
html.dark p.text-xs.text-gray-400,
html.dark p.text-xs.text-gray-500,
html.dark span.text-xs.text-gray-400,
html.dark span.text-xs.text-gray-500 {
    color: var(--admin-hint);
}

/* ── Checkboxes & radios ── */
html.dark input[type="checkbox"],
html.dark input[type="radio"] {
    background-color: var(--admin-input-bg);
    border-color: var(--admin-input-border);
    accent-color: var(--admin-focus);
    color: var(--admin-focus);
}

html.dark input[type="checkbox"]:focus,
html.dark input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--admin-focus-ring);
}

html.dark input[type="checkbox"]:checked,
html.dark input[type="radio"]:checked {
    background-color: var(--admin-focus);
    border-color: var(--admin-focus);
}

/* Checkbox / radio inline labels */
html.dark label:has(input[type="checkbox"]),
html.dark label:has(input[type="radio"]) {
    color: var(--admin-hint);
}

/* ── File inputs ── */
html.dark input[type="file"] {
    color: var(--admin-hint);
}

html.dark input[type="file"]::file-selector-button {
    margin-inline-end: 0.75rem;
    border: 1px solid var(--admin-input-border);
    border-radius: 0.5rem;
    background-color: #334155;
    color: var(--admin-input-text);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

html.dark input[type="file"]::file-selector-button:hover {
    background-color: #475569;
}

/* ── Search / number spinners ── */
html.dark input[type="search"]::-webkit-search-cancel-button {
    filter: invert(1) opacity(0.6);
}

/* ── Readonly / mono fields (e.g. slot_key) ── */
html.dark input[readonly],
html.dark input:read-only {
    color: var(--admin-input-placeholder);
}

/* ── Focus ring override for Tailwind focus:ring-indigo on dark ── */
html.dark input:focus-visible,
html.dark textarea:focus-visible,
html.dark select:focus-visible {
    --tw-ring-color: var(--admin-focus-ring);
}