/* ==========================================================================
   Modals — Bootstrap overrides for theme consistency
   Only override what Bootstrap defaults differently from our theme.
   ========================================================================== */

/* Modal content — colors inherit to header/body/footer */
.modal-content {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Header/footer borders */
.modal-header {
    border-color: var(--border-color);
}

.modal-footer {
    border-color: var(--border-color);
}

/* Close button visibility on themed background */
.modal-header .btn-close {
    filter: invert(0.5);
}

/* Form labels — more prominent than Bootstrap defaults */
.modal-body .form-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

/* Form controls — unified themed-control class */
.modal-body .themed-control,
.modal-body .themed-control .form-control,
.modal-body .themed-control .form-select,
.modal-body .themed-control .Select-control {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.modal-body .themed-control:focus,
.modal-body .themed-control .form-control:focus,
.modal-body .themed-control .form-select:focus,
.modal-body .themed-control.is-focused .Select-control {
    background-color: var(--bg-surface);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.25);
    outline: none;
}

.modal-body .themed-control::placeholder,
.modal-body .themed-control .form-control::placeholder,
.modal-body .themed-control .Select-placeholder {
    color: var(--text-tertiary);
}

/* --- Invalid input ------------------------------------------------------- */

/* Bootstrap's own `.form-control.is-invalid` ties `.themed-control` above on
   specificity (0,2,0) and loses on source order, so the red border is restated
   here.  The `:focus` variant also replaces the navy focus ring, which would
   otherwise read as "this field is fine" the moment the user clicks back in. */
.modal-body .themed-control.is-invalid {
    border-color: var(--status-failure);
}

.modal-body .themed-control.is-invalid:focus {
    border-color: var(--status-failure);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-failure) 25%, transparent);
}

/* Checkboxes & Radios */
.modal-body .themed-control .form-check-input:checked,
.modal-body .themed-control.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.modal-body .themed-control .form-check-input:focus,
.modal-body .themed-control.form-check-input:focus {
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.25);
}

/* dcc.Dropdown specialized parts */
.modal-body .themed-control .Select-menu-outer {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
}

.modal-body .themed-control .Select-option {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

.modal-body .themed-control .Select-option:hover,
.modal-body .themed-control .Select-option.is-focused {
    background-color: var(--bg-body);
}

.modal-body .themed-control .Select-value {
    background-color: var(--bg-body);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.modal-body .themed-control .Select-value-icon:hover {
    background-color: var(--border-color);
    color: var(--text-primary);
}

.modal-body .themed-control .Select-input input {
    color: var(--text-primary);
}

.modal-body .themed-control .Select-clear-zone:hover {
    color: var(--text-primary);
}

/* ==========================================================================
   Modal Footer Buttons
   ========================================================================== */

.modal-footer .btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.modal-footer .btn-primary:hover:not(:disabled):not(.disabled) {
    filter: brightness(1.1);
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.modal-footer .btn-primary:disabled,
.modal-footer .btn-primary.disabled {
    background-color: color-mix(in srgb, var(--accent-color) 50%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 50%, transparent);
    color: rgba(255, 255, 255, 0.8);
    cursor: not-allowed;
    opacity: 0.8;
}

.modal-footer .btn-outline-secondary {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.modal-footer .btn-outline-secondary:hover:not(:disabled):not(.disabled) {
    background-color: var(--bg-body);
    color: var(--text-primary);
}

.modal-footer .btn-outline-secondary:disabled,
.modal-footer .btn-outline-secondary.disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ==========================================================================
   Modal Submission Results — status placeholder
   ========================================================================== */

/* The results div is a plain slot — no box of its own.  Both states are
   components that carry their own styling (modal_helpers.build_submission_*),
   so there is nothing here to cancel and no empty-vs-non-empty selector. */

/* --- Submission result rows ---------------------------------------------- */

/* Shared by the success and error rows, so the two states are the same height
   and shape by construction — only colour and icon differ.  One flex row, not
   stacked children: every tool modal already overruns a laptop viewport, so
   this is held to a single 41px line.  flex-wrap plus the success link's
   margin-left:auto is what degrades gracefully — the link right-aligns on a
   laptop and drops to its own right-aligned line when the row cannot fit. */
.modal-submission-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
}

.modal-submission-success {
    background: color-mix(in srgb, var(--status-success) 12%, white);
    border: 1px solid color-mix(in srgb, var(--status-success) 35%, transparent);
    color: var(--status-success);
}

.modal-submission-error {
    background: color-mix(in srgb, var(--status-failure) 12%, white);
    border: 1px solid color-mix(in srgb, var(--status-failure) 35%, transparent);
    color: var(--status-failure);
}

/* The message is a single flex child, so on the wrapping row above a message
   too wide for one line breaks *whole* and strands the icon on the line before
   it.  Taking the remaining width makes the text wrap inside itself instead. */
.modal-submission-error > span {
    flex: 1;
    min-width: 0;
}

.modal-submission-success-id {
    font-size: 0.9rem;
    font-weight: 500;
}

.modal-submission-success-detail {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.modal-submission-success-link {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--secondary-color);
    text-decoration: none;
    white-space: nowrap;
}

.modal-submission-success-link:hover {
    text-decoration: underline;
}

.modal-submission-success-arrow {
    margin-left: 0.35rem;
    font-size: 0.75rem;
}

/* --- Field info icon ----------------------------------------------------- */

.modal-body .field-info-icon {
    margin-left: 0.35rem;
    color: var(--text-tertiary);
    font-size: 0.85rem;
    cursor: help;
}

.modal-body .field-info-icon:hover,
.modal-body .field-info-icon:focus-visible {
    color: var(--primary-color);
}

/* ==========================================================================
   Submission captcha — production only
   The widget ships its own stylesheet inside assets/11-altcha.js and reads
   these custom properties; mapping them onto our tokens is the whole job.
   ========================================================================== */

/* margin-right:auto parks it at the left end of the footer's flex row,
   opposite Close / Run.  The holder is empty until
   assets/12-altcha-bridge.js mounts <altcha-widget> into it. */
.modal-footer .etk-captcha {
    margin-right: auto;
    /* The widget's own CSS uses light-dark(); this app is light-only, so pin the
       scheme rather than inherit a future dark-mode switch by accident. */
    color-scheme: light;

    --altcha-color-base: var(--bg-surface);
    --altcha-color-base-content: var(--text-primary);
    --altcha-color-primary: var(--primary-color);
    --altcha-color-error: var(--status-failure);
    --altcha-color-success: var(--status-success);
    --altcha-border-color: var(--border-color);
    --altcha-border-radius: var(--radius-sm);
    --altcha-max-width: 280px;
    --altcha-padding: 0.5rem 0.75rem;
}

/* The load-failure message the bridge writes in when 11-altcha.js is missing. */
.modal-footer .etk-captcha:not(:has(altcha-widget)) {
    font-size: 0.85rem;
    color: var(--status-failure);
}