/**
 * CareTrack — global form controls (inputs, selects, textareas, file uploads)
 * Loaded on every layout after theme.css. Uses Bootstrap 5 class names.
 */

:root {
    --ct-field-radius: 0.5rem;
    --ct-field-padding-y: 0.65rem;
    --ct-field-padding-x: 0.875rem;
    --ct-field-font-size: 0.9rem;
    --ct-field-line-height: 1.5;
    --ct-field-border: 1px solid var(--ct-border);
    --ct-field-transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    --ct-field-focus-border: var(--ct-primary);
    --ct-field-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ct-primary) 22%, transparent);
    --ct-field-invalid-ring: 0 0 0 3px color-mix(in srgb, #ef4444 18%, transparent);
}

/* —— Labels & help —— */
.form-label,
.ct-form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ct-text);
    margin-bottom: 0.35rem;
}

.form-text,
.ct-form-hint {
    font-size: 0.8rem;
    color: var(--ct-muted);
    margin-top: 0.35rem;
}

.invalid-feedback,
.valid-feedback {
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

/* —— Text inputs, selects, textareas —— */
.form-control,
.form-select {
    min-height: calc(var(--ct-field-padding-y) * 2 + var(--ct-field-font-size) * var(--ct-field-line-height));
    padding: var(--ct-field-padding-y) var(--ct-field-padding-x);
    font-size: var(--ct-field-font-size);
    line-height: var(--ct-field-line-height);
    font-family: inherit;
    color: var(--ct-text);
    background-color: var(--ct-input-bg);
    border: var(--ct-field-border);
    border-radius: var(--ct-field-radius);
    box-shadow: none;
    transition: var(--ct-field-transition);
}

.form-control::placeholder {
    color: var(--ct-muted);
    opacity: 1;
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--ct-primary) 35%, var(--ct-border));
}

.form-control:focus,
.form-select:focus {
    color: var(--ct-text);
    background-color: var(--ct-surface);
    border-color: var(--ct-field-focus-border);
    box-shadow: var(--ct-field-focus-ring);
    outline: 0;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--ct-surface-muted);
    color: var(--ct-muted);
    cursor: not-allowed;
    opacity: 0.85;
}

textarea.form-control {
    min-height: 6.5rem;
    resize: vertical;
}

.form-select {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M4.427 6.427l3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 6H4.604a.25.25 0 0 0-.177.427z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    cursor: pointer;
}

.form-select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236366f1'%3E%3Cpath d='M4.427 6.427l3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 6H4.604a.25.25 0 0 0-.177.427z'/%3E%3C/svg%3E");
}

/* Date / time pickers */
.form-control[type='date'],
.form-control[type='time'],
.form-control[type='datetime-local'],
.form-control[type='month'],
.form-control[type='week'] {
    color-scheme: light;
}

[data-bs-theme='dark'] .form-control[type='date'],
[data-bs-theme='dark'] .form-control[type='time'],
[data-bs-theme='dark'] .form-control[type='datetime-local'],
[data-bs-theme='dark'] .form-control[type='month'],
[data-bs-theme='dark'] .form-control[type='week'] {
    color-scheme: dark;
}

/* —— File upload —— */
.form-control[type='file'] {
    padding: 0.5rem 0.75rem;
    background-color: var(--ct-surface-muted);
    cursor: pointer;
}

.form-control[type='file']::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.45rem 0.875rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--ct-primary);
    background: var(--ct-primary-soft);
    border: 0;
    border-radius: calc(var(--ct-field-radius) - 2px);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.form-control[type='file']:hover::file-selector-button {
    background: color-mix(in srgb, var(--ct-primary) 12%, var(--ct-primary-soft));
}

.form-control[type='file']:focus::file-selector-button {
    outline: 2px solid var(--ct-primary);
    outline-offset: 1px;
}

/* Enhanced drop-zone file field (optional wrapper) */
.ct-file-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    border: 2px dashed var(--ct-border);
    border-radius: calc(var(--ct-field-radius) + 2px);
    background: var(--ct-surface-muted);
    transition: var(--ct-field-transition);
    cursor: pointer;
}

.ct-file-upload:hover,
.ct-file-upload:focus-within {
    border-color: var(--ct-primary);
    background: var(--ct-primary-soft);
}

.ct-file-upload-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ct-primary-soft);
    color: var(--ct-primary);
    font-size: 1.1rem;
}

.ct-file-upload-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ct-text);
    margin: 0;
}

.ct-file-upload-hint {
    font-size: 0.75rem;
    color: var(--ct-muted);
    margin: 0;
}

.ct-file-upload input[type='file'] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ct-file-upload input[type='file']:focus-visible + .ct-file-upload-focus-ring,
.ct-file-upload:focus-within {
    box-shadow: var(--ct-field-focus-ring);
}

/* —— Input with leading icon / trailing action —— */
.ct-input-wrap {
    position: relative;
    display: block;
}

.ct-input-wrap > .form-control,
.ct-input-wrap > .form-select {
    width: 100%;
}

.ct-input-wrap--icon .form-control,
.ct-input-wrap--icon .form-select {
    padding-left: 2.5rem;
}

.ct-input-wrap--action-right .form-control {
    padding-right: 2.75rem;
}

.ct-input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ct-muted);
    font-size: 0.9rem;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}

.ct-input-action {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--ct-muted);
    padding: 0.35rem 0.5rem;
    border-radius: calc(var(--ct-field-radius) - 2px);
    line-height: 1;
    z-index: 2;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.ct-input-action:hover {
    color: var(--ct-primary);
    background: var(--ct-primary-soft);
}

/* —— Bootstrap input groups —— */
.input-group > .form-control,
.input-group > .form-select {
    border-radius: 0;
}

.input-group > :first-child.form-control,
.input-group > :first-child.form-select,
.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu).form-control {
    border-top-left-radius: var(--ct-field-radius);
    border-bottom-left-radius: var(--ct-field-radius);
}

.input-group > :last-child.form-control,
.input-group > :last-child.form-select,
.input-group > :not(:first-child):not(.dropdown-menu).form-control {
    border-top-right-radius: var(--ct-field-radius);
    border-bottom-right-radius: var(--ct-field-radius);
}

.input-group-text {
    font-size: var(--ct-field-font-size);
    color: var(--ct-muted);
    background-color: var(--ct-surface-muted);
    border: var(--ct-field-border);
    border-radius: var(--ct-field-radius);
}

.input-group:focus-within .input-group-text {
    border-color: var(--ct-field-focus-border);
    color: var(--ct-primary);
}

/* —— Checkboxes & radios —— */
.form-check-input {
    width: 1.05em;
    height: 1.05em;
    margin-top: 0.15em;
    border: 1.5px solid var(--ct-border);
    background-color: var(--ct-surface);
    cursor: pointer;
    transition: var(--ct-field-transition);
}

.form-check-input:checked {
    background-color: var(--ct-primary);
    border-color: var(--ct-primary);
}

.form-check-input:focus {
    border-color: var(--ct-primary);
    box-shadow: var(--ct-field-focus-ring);
}

.form-check-label {
    font-size: 0.875rem;
    color: var(--ct-text-secondary);
    cursor: pointer;
}

.form-check-input:disabled ~ .form-check-label {
    opacity: 0.65;
    cursor: not-allowed;
}

/* —— Validation —— */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #ef4444;
    padding-right: var(--ct-field-padding-x);
    background-image: none;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #ef4444;
    box-shadow: var(--ct-field-invalid-ring);
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: #22c55e;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 18%, transparent);
}

/* —— Floating labels (Bootstrap) —— */
.form-floating > .form-control,
.form-floating > .form-select {
    min-height: 3.25rem;
    padding-top: 1.35rem;
    padding-bottom: 0.45rem;
}

.form-floating > label {
    color: var(--ct-muted);
    padding: var(--ct-field-padding-y) var(--ct-field-padding-x);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: var(--ct-primary);
}

/* —— Field spacing helper —— */
.ct-field {
    margin-bottom: 1rem;
}

.ct-field:last-child {
    margin-bottom: 0;
}