/* The one modal (assets/js/modal.js); colours and sizes come from ui-theme.css. */
/* ── backdrop ─────────────────────────────────────────────────────────── */
.ui-modal-back {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--ui-back);
    z-index: 9800;    /* above the side drawers (9500 / 9600) that ask for a reason; below toasts and pickers (10000+) */
    animation: uiFade .16s ease-out;
}

.ui-modal-back[hidden] { display: none; }
body.ui-modal-open { overflow: hidden; }

/* ── panel ────────────────────────────────────────────────────────────── */
.ui-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--ui-modal-w-md);
    max-height: calc(100vh - 32px);
    color: var(--ui-text);
    background: var(--ui-modal-bg);
    border: 1px solid var(--ui-modal-border);
    border-radius: var(--ui-modal-radius);
    box-shadow: var(--ui-modal-shadow);
    overflow: hidden;
    animation: uiPop .18s ease-out;
}

.ui-modal-sm { max-width: var(--ui-modal-w-sm); }
.ui-modal-lg { max-width: var(--ui-modal-w-lg); }
.ui-modal-xl { max-width: var(--ui-modal-w-xl); }
.ui-modal-full { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; }

.ui-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 14px;
    background: var(--ui-head);
    border-bottom: 1px solid var(--ui-line);
}

.ui-modal-head h2, .ui-modal-head h3, .ui-modal-head h4, .ui-modal-title {
    margin: 0;
    font-size: var(--fs-lg, 17px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ui-text);
    overflow-wrap: anywhere;
}

.ui-modal-head h2 > i, .ui-modal-head h3 > i, .ui-modal-head h4 > i, .ui-modal-title > i { margin-right: .4rem; color: var(--ui-primary); }

.ui-modal-subtitle { font-size: var(--fs-sm, 12.5px); color: var(--ui-muted); margin-top: 3px; }
.ui-modal-subtitle[hidden] { display: none; }
.ui-modal-head-actions { display: flex; align-items: center; gap: 4px; flex: none; }

.ui-modal-x, .ui-modal-max {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ui-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}

.ui-modal-max { font-size: .95rem; }
.ui-modal-x:hover, .ui-modal-max:hover { background: var(--c-surface-3, var(--gray-100)); color: var(--ui-text); }
.ui-modal-x[hidden], .ui-modal-max[hidden] { display: none; }

.ui-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px 20px;
    overflow: auto;
    line-height: 1.55;
}

.ui-modal-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--ui-line);
    background: var(--c-surface-2, var(--gray-50));
}

/* pages whose old modal put content straight into the panel */
.ui-modal > :not(.ui-modal-head):not(.ui-modal-body):not(.ui-modal-foot) { padding-left: 20px; padding-right: 20px; }
.ui-modal > :first-child:not(.ui-modal-head):not(.ui-modal-body) { padding-top: 16px; }
.ui-modal > :last-child:not(.ui-modal-foot):not(.ui-modal-body) { padding-bottom: 16px; }
.ui-modal > form { display: flex; flex-direction: column; min-height: 0; padding: 0; }
/* a long form placed straight in the panel scrolls, and its button row stays in view */
.ui-modal > form:not(:has(> .ui-modal-body)) { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px; }
.ui-modal > form:not(:has(> .ui-modal-body)) > .form-actions:last-child {
    position: sticky; bottom: -16px; z-index: 1; margin: 16px -20px -16px; padding: 12px 20px;
    background: var(--c-surface-2, var(--gray-50)); border-top: 1px solid var(--ui-line);
}

.ui-confirm-text { white-space: pre-line; font-size: .95rem; }
.ui-prompt-input { width: 100%; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--ui-line); border-radius: 8px; font: inherit; background: var(--gray-0); color: var(--ui-text); box-sizing: border-box; }
.ui-prompt-input:focus { outline: none; border-color: var(--ui-primary); box-shadow: 0 0 0 4px var(--c-focus, color-mix(in srgb, var(--brand-700) 22%, transparent)); }
.ui-prompt-input.ui-invalid { border-color: var(--ui-danger); }

/* the form a modal usually carries */
.ui-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 14px; }
.ui-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 500; }
.ui-field[hidden] { display: none; }          /* a field shown only sometimes (e.g. an exchange rate) stays hidden */
.ui-field span { color: var(--c-text-2, var(--gray-600)); }
.ui-field input, .ui-field select, .ui-field textarea {
    margin: 0;
    padding: .5rem .7rem;
    border: 1px solid var(--c-border-strong, var(--gray-300));
    border-radius: 8px;
    font: inherit;
    background-color: var(--gray-0);            /* the colour only: a select keeps its arrow (base.css background-image) */
    color: inherit;
}
.ui-field select { padding-right: 2rem; }
.ui-field-full { grid-column: 1 / -1; }

@keyframes uiFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiPop { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }

/* ── phone: every modal is a full-screen sheet ────────────────────────── */
@media (max-width: 640px) {
    .ui-modal-back { padding: 0; align-items: stretch; }
    .ui-modal, .ui-modal-sm, .ui-modal-lg, .ui-modal-xl {
        max-width: none;
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        border: 0;
    }
    .ui-modal-head { padding: 14px 16px 12px; }
    .ui-modal-body { padding: 14px 16px; }
    .ui-modal-foot { padding: 12px 16px; }
    .ui-modal > :not(.ui-modal-head):not(.ui-modal-body):not(.ui-modal-foot) { padding-left: 16px; padding-right: 16px; }
    .ui-form-grid { grid-template-columns: 1fr; }
}
.hx-field { display: block; margin-top: 10px; font-size: .85rem; color: var(--ui-text); }

/* the "Complete — say why" window (task_statuses.js reasonFor): what went over, one line each */
.ts-gaps { display: flex; flex-direction: column; gap: 6px; }
.ts-gap { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--warning-50); border: 1px solid var(--warning-100); color: var(--warning-700); font-size: 0.86rem; }
.ts-gap > i { color: var(--warning-600); }
.ts-gap > span:first-of-type { flex: 1; }
.ts-gap-over { font-weight: 700; color: var(--warning-700); white-space: nowrap; }
.ts-over-person > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ts-over-hint { margin: 0; font-size: .8rem; color: var(--c-text-3); }