/* ----------------------------------------
   Per-element input theme (OPT-IN)
   Usage: add data-input-theme="outline|blue|plain" to a wrapper
   ---------------------------------------- */

/* Base token (optional: if you want a single place to change “brand” colour) */
:root {
    --lr-primary: #0782bb;
}

/* Defaults for any themed wrapper */
[data-input-theme] {
    --lr-input-bg: #ffffff;
    --lr-input-text: var(--lr-primary);
    --lr-input-border: #e9ecef;
    --lr-input-placeholder: rgba(47, 85, 212, 0.65);
}

/* Theme 1 */
[data-input-theme="blue"] {
    --lr-input-bg: var(--lr-primary);
    --lr-input-text: #ffffff;
    --lr-input-border: var(--lr-primary);
    --lr-input-placeholder: rgba(255, 255, 255, 0.75);
}

/* Theme 2 */
[data-input-theme="outline"] {
    --lr-input-bg: #ffffff;
    --lr-input-text: var(--lr-primary);
    --lr-input-border: var(--lr-primary);
    --lr-input-placeholder: rgba(47, 85, 212, 0.65);
}

/* Theme 3 */
[data-input-theme="plain"] {
    --lr-input-bg: #ffffff;
    --lr-input-text: var(--lr-primary);
    --lr-input-border: #e9ecef;
    --lr-input-placeholder: rgba(47, 85, 212, 0.65);
}

/* Apply ONLY to controls inside a themed wrapper */
[data-input-theme] .form-control,
[data-input-theme] .form-select {
    background-color: var(--lr-input-bg);
    border-color: var(--lr-input-border);
    color: var(--lr-input-text) !important;
}

[data-input-theme] .form-control,
[data-input-theme] .form-label {
    color: var(--lr-primary) !important;
}

[data-input-theme] .form-control::placeholder {
    color: var(--lr-input-placeholder);
}

[data-input-theme] .form-control:focus,
[data-input-theme] .form-select:focus {
    border-color: var(--lr-primary);
    box-shadow: none;
}

[data-input-theme] .form-control[readonly] {
    background-color: var(--lr-input-bg);
}

[data-input-theme] .form-control:disabled,
[data-input-theme] .form-select:disabled {
    opacity: 0.7;
}