/* ==========================================================================
   Form.io / Choices.js Overrides
   Loaded AFTER formio.full.min.css to guarantee our styles win.
   All Form.io dropdown, select, and theme overrides live here — nowhere else.
   ========================================================================== */

/* ── Prevent parent clipping on dropdowns ──────────────────────────── */
/* Parent containers (.inline-form-container, .embedded-form, .job-tracker)
   already have overflow:visible in JobTrackerComponent.
   Do NOT override position/overflow on .choices or .dropdown —
   it breaks Choices.js click handling. */

/* ── Choices.js trigger (closed select box) ────────────────────────── */

.formio-container .choices__inner {
    background-color: var(--token-bg-input, #f9fafb) !important;
    border-color: var(--token-border-input, #e6eaee) !important;
    color: var(--token-text-input, #495057) !important;
}

.formio-container .choices__input {
    background-color: transparent !important;
    color: var(--token-text-input, #495057) !important;
}

.formio-container .choices__list--dropdown .choices__input--cloned {
    background-color: #fff !important;
    color: #212529 !important;
    border-bottom: 1px solid var(--token-border-input, #e6eaee) !important;
}

.formio-container .choices__list--single .choices__item {
    color: var(--token-text-input, #495057) !important;
}

/* ── Choices.js dropdown panel ─────────────────────────────────────── */

.formio-container .choices__list--dropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    z-index: 9999 !important;
    max-height: none !important;
    overflow: visible !important;
    background-color: #fff !important;
    border: 1px solid var(--token-border-input, #e6eaee) !important;
    border-radius: 6px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18) !important;
}

/* When Choices.js flips the dropdown upward */
.formio-container .choices__list--dropdown.is-flipped {
    top: auto !important;
    bottom: 100% !important;
}


.formio-container .choices__list--dropdown .choices__list {
    max-height: 220px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background-color: inherit !important;
}

.formio-container .choices__list--dropdown .choices__item,
.formio-container .choices__list--dropdown .choices__item--choice {
    white-space: normal !important;
    padding: 10px 12px !important;
    color: #212529 !important;
    background-color: transparent !important;
}

.formio-container .choices__list--dropdown .choices__item--selectable.is-highlighted,
.formio-container .choices__list--dropdown .choices__item--choice:hover {
    background-color: var(--token-brand) !important;
    color: #fff !important;
}

/* ── Bootstrap dropdown-menu ───────────────────────────────────────── */

.formio-container .dropdown-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    z-index: 9999 !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background-color: #fff !important;
    border: 1px solid var(--token-border-input, #e6eaee) !important;
    border-radius: 6px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18) !important;
}

.formio-container .dropdown-menu .dropdown-item {
    color: #212529 !important;
}

.formio-container .dropdown-menu .dropdown-item:hover,
.formio-container .dropdown-menu .dropdown-item:focus {
    background-color: #f1f5f9 !important;
    color: #1a202c !important;
}

/* ── Modal z-index ─────────────────────────────────────────────────── */

.modal .formio-container .dropdown-menu,
.modal .formio-container .choices__list--dropdown {
    z-index: 10060 !important;
}

/* ── Form controls ─────────────────────────────────────────────────── */

.formio-container .form-control,
.formio-container .form-select,
.formio-container textarea.form-control,
.formio-container input.form-control {
    background-color: var(--token-bg-input, #f9fafb) !important;
    color: var(--token-text-input, #495057) !important;
    border-color: var(--token-border-input, #e6eaee) !important;
}

.formio-container select,
.formio-container select.form-control,
.formio-container select.form-select {
    background-color: var(--token-bg-input, #f9fafb) !important;
    color: var(--token-text-input, #495057) !important;
    border-color: var(--token-border-input, #e6eaee) !important;
}

.formio-container select option {
    background-color: #fff !important;
    color: #212529 !important;
}

/* ── Survey table — horizontal scroll on mobile ────────────────────── */

.formio-container .formio-component-survey {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.formio-container .formio-component-survey table {
    min-width: 500px;
}

.formio-container .formio-component-survey .table {
    word-break: normal;
}

.formio-container .formio-component-survey thead th {
    font-size: .75rem;
    padding: .5rem .3rem;
    vertical-align: bottom;
}

/* ── Component spacing ──────────────────────────────────────────────── */

.formio-container .formio-component {
    margin-bottom: .75rem !important;
}

.formio-container .formio-component-button {
    margin-top: 1.5rem !important;
}

/* ── Labels ─────────────────────────────────────────────────────────── */

.formio-container label,
.formio-container .col-form-label,
.formio-container .control-label {
    color: var(--token-text-secondary, #333) !important;
    font-weight: 600;
}

/* ── Survey radio inputs — larger touch targets ────────────────────── */

.formio-container .formio-component-survey .form-check-input,
.formio-container .formio-component-survey input[type="radio"] {
    width: 1.15em;
    height: 1.15em;
    cursor: pointer;
}

/* Dark Theme */

/* Form controls */
[data-theme="dark"] .formio-container .form-control,
[data-theme="dark"] .formio-container .form-select,
[data-theme="dark"] .formio-container textarea.form-control,
[data-theme="dark"] .formio-container input.form-control {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #475569 !important;
}

[data-theme="dark"] .formio-container .form-control:focus,
[data-theme="dark"] .formio-container .form-select:focus {
    border-color: var(--token-brand) !important;
    box-shadow: 0 0 0 .2rem var(--token-border-focus) !important;
}

[data-theme="dark"] .formio-container .form-control::placeholder {
    color: #64748b !important;
}

[data-theme="dark"] .formio-container .form-control:disabled,
[data-theme="dark"] .formio-container .form-control[readonly] {
    background-color: #334155 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .formio-container select,
[data-theme="dark"] .formio-container select.form-control {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .formio-container select option {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Labels */
[data-theme="dark"] .formio-container label,
[data-theme="dark"] .formio-container .col-form-label,
[data-theme="dark"] .formio-container .control-label {
    color: #e2e8f0 !important;
}

/* Choices.js trigger */
[data-theme="dark"] .formio-container .choices__inner {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .formio-container .choices__input {
    background-color: transparent !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .formio-container .choices__list--dropdown .choices__input--cloned {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid #475569 !important;
}

[data-theme="dark"] .formio-container .choices__list--single .choices__item {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .formio-container .choices__list--multiple .choices__item {
    background-color: var(--token-brand) !important;
    border-color: var(--token-brand-hover) !important;
    color: #fff !important;
}

[data-theme="dark"] .formio-container .choices__placeholder {
    color: #64748b !important;
}

/* Choices.js dropdown panel */
[data-theme="dark"] .formio-container .choices__list--dropdown {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .5) !important;
}

[data-theme="dark"] .formio-container .choices__list--dropdown .choices__item,
[data-theme="dark"] .formio-container .choices__list--dropdown .choices__item--choice {
    color: #e2e8f0 !important;
    background-color: transparent !important;
}

[data-theme="dark"] .formio-container .choices__list--dropdown .choices__item--selectable.is-highlighted,
[data-theme="dark"] .formio-container .choices__list--dropdown .choices__item--choice:hover {
    background-color: var(--token-brand) !important;
    color: #fff !important;
}

/* Bootstrap dropdown */
[data-theme="dark"] .formio-container .dropdown-menu {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .5) !important;
}

[data-theme="dark"] .formio-container .dropdown-menu .dropdown-item {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .formio-container .dropdown-menu .dropdown-item:hover,
[data-theme="dark"] .formio-container .dropdown-menu .dropdown-item:focus {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* Checkboxes & radios */
[data-theme="dark"] .formio-container .form-check-input {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

[data-theme="dark"] .formio-container .form-check-input:checked {
    background-color: var(--token-brand) !important;
    border-color: var(--token-brand) !important;
}

/* Tables (survey grid) */
[data-theme="dark"] .formio-container table {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .formio-container .table th,
[data-theme="dark"] .formio-container .table td {
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .formio-container .table thead th {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Alerts / validation */
[data-theme="dark"] .formio-container .alert-danger {
    background-color: #450a0a !important;
    border-color: #7f1d1d !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] .formio-container .alert-warning {
    background-color: #431407 !important;
    border-color: #7c2d12 !important;
    color: #fdba74 !important;
}

[data-theme="dark"] .formio-container .formio-errors .form-text,
[data-theme="dark"] .formio-container .has-error .form-text {
    color: #f87171 !important;
}

[data-theme="dark"] .formio-container .has-error .form-control {
    border-color: #f87171 !important;
}

/* Panels (card) */
[data-theme="dark"] .formio-container .card {
    background-color: transparent !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .formio-container .card-body {
    background-color: transparent !important;
}

[data-theme="dark"] .formio-container .card-header {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Radio & checkbox labels */
[data-theme="dark"] .formio-container .form-check-label {
    color: #e2e8f0 !important;
}

/* Buttons */
[data-theme="dark"] .formio-container .btn-primary {
    background-color: var(--token-brand) !important;
    border-color: var(--token-brand) !important;
    color: #1a202c !important;
}

[data-theme="dark"] .formio-container .btn-secondary,
[data-theme="dark"] .formio-container .btn-default {
    background-color: #334155 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Help text */
[data-theme="dark"] .formio-container .form-text,
[data-theme="dark"] .formio-container .text-muted {
    color: #94a3b8 !important;
}

/* Responsive */

@media (max-width: 768px) {
    .formio-container .formio-component-button .btn,
    .formio-container .formio-wizard-nav-container .btn {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .formio-container table {
        font-size: 14px !important;
    }

    /* Larger touch targets for dropdown items */
    .formio-container .choices__list--dropdown .choices__item,
    .formio-container .choices__list--dropdown .choices__item--choice {
        padding: 12px 14px !important;
        font-size: 16px !important;
    }

    /* Prevent iOS zoom on input focus (font-size must be >= 16px) */
    .formio-container .choices__input,
    .formio-container .choices__input--cloned,
    .formio-container .form-control,
    .formio-container input,
    .formio-container select,
    .formio-container textarea {
        font-size: 16px !important;
    }

    .formio-container .formio-component-survey table {
        min-width: 420px;
    }

    /* Larger radio targets on touch */
    .formio-container .formio-component-survey .form-check-input,
    .formio-container .formio-component-survey input[type="radio"] {
        width: 1.4em;
        height: 1.4em;
    }
}

@media (max-width: 480px) {
    .formio-container .choices__list--dropdown .choices__item,
    .formio-container .choices__list--dropdown .choices__item--choice {
        padding: 14px 12px !important;
    }

    .formio-container .formio-component-survey table {
        min-width: 360px;
    }

    .formio-container .formio-component-button {
        margin-top: 1rem !important;
    }
}