/* The issue form (pages/partials/issue-modal.php): a full-height page beside the sidebar. */

/* ── the issue form: a full-height page beside the sidebar ────
   Built on modal.css's .sidebar-modal(-overlay): the overlay starts where
   the sidebar ends (220px, or 64px collapsed; full width on phones), so the
   sidebar stays in view and usable. The header stays put and the rest
   scrolls. */
#issueModal.sidebar-modal-overlay {
    background: var(--bg);
}

/* collapsed sidebar can still fly out over the page */
body:has(#issueModal.open) .sidebar {
    z-index: 1150;
}

#issueModal .issue-page {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--bg);
    overflow: hidden !important;
}

#issueModal .ip-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 28px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

#issueModal .ip-titles {
    min-width: 0;
}

#issueModal .ip-crumb {
    font-size: var(--fs-xs);
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#issueModal .ip-title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

#issueModal .modal-title {
    font-size: var(--fs-xl);
}

#issueModal .ip-actions {
    display: flex;
    gap: 8px;
    flex: none;
}

#issueModal .ip-actions .btn-reset,
#issueModal .ip-actions .btn-save {
    padding: 8px 18px;
    font-size: var(--fs-sm);
}

#issueModal .ip-actions .btn-save:disabled {
    opacity: .6;
    cursor: progress;
}

#issueModal > .issue-page > form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#issueModal .ip-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 28px 32px;
    overscroll-behavior: contain;
}

#issueModal .card {
    flex: none;
    overflow: visible;
    padding: 18px 20px;
}

/* hidden means hidden here, whatever display a component sets */
#issueModal [hidden] {
    display: none !important;
}

/* ── layout: the work on the left, its details on the right ── */
#issueModal .ip-layout {
    display: grid;
    /* The page's full width, at any zoom: the work takes what is left beside the details. */
    grid-template-columns: minmax(0, 1fr) clamp(320px, 26%, 420px);
    gap: 20px;
    align-items: start;
}
#issueModal .ip-col-main,
#issueModal .ip-col-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
/* The details stay in view while the description or checklist is long. */
#issueModal .ip-col-side {
    position: sticky;
    top: 0;
}

#issueModal .ip-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#issueModal .ip-summary {
    min-height: 46px;
    padding: 10px 14px;
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
}
#issueModal .ip-summary::placeholder {
    font-weight: var(--fw-regular);
    color: var(--faint-ink);
}
/* Room to write, without a screen of empty box: it grows with what is typed. */
#issueModal .pat-editor .ql-editor {
    min-height: 160px;
    max-height: none;
}
#issueModal .req {
    color: var(--danger);
    font-weight: var(--fw-semibold);
}

/* The checklist with no items yet: its heading already says what it is for, so the empty
   state is one slim row — a short note and the two ways to start. */
#issueModal .chk-empty {
    gap: 10px 14px;
    padding: 10px 14px;
    background: var(--surface-2);
}
#issueModal .chk-empty__icon,
#issueModal .chk-empty__text span {
    display: none;
}
#issueModal .chk-empty__text {
    flex: 1 1 auto;
}
#issueModal .chk-empty__text b {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--muted-ink);
}
#issueModal .chk-empty__actions {
    flex-basis: auto;
    padding-inline-start: 0;
}

/* ── the Details panel ── */
#issueModal .ip-props {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#issueModal .ip-props__title {
    margin: 0 0 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .05em;
}
#issueModal .ip-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
#issueModal .ip-props .form-label {
    display: inline-flex;
    align-items: center;
    font-weight: var(--fw-medium);
    color: var(--ink-2);
}
#issueModal .ip-props .info-i {
    margin-left: 6px;
}

/* Every control in the form the same height and look — native selects, inputs and the
   searchable pickers (SlimSelect) alike. */
#issueModal .ip-props .form-select,
#issueModal .ip-props .form-input {
    width: 100%;
    height: 38px;
    min-height: 38px;
    font-size: var(--fs-sm);
}
#issueModal .ip-props .ss-main .ss-single-selected {
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    font-size: var(--fs-sm);
    color: var(--ink);
}
#issueModal .ip-props .ss-main .ss-single-selected:hover {
    border-color: var(--faint-ink);
}
#issueModal .ip-props .ss-main.ss-open-below .ss-single-selected,
#issueModal .ip-props .ss-main.ss-open-above .ss-single-selected {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}
#issueModal .ip-props .ss-main .ss-single-selected.ss-disabled {
    background: var(--surface-2);
    color: var(--faint-ink);
    box-shadow: none;
}

/* The suggestion under Story points / Estimate spans both columns. */
#issueModal .ip-props .pat-est {
    margin: -6px 0 0;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

@media (max-width: 1100px) {
    #issueModal .ip-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    #issueModal .ip-col-side {
        position: static;
    }
}

@media (max-width: 768px) {
    #issueModal .ip-head {
        padding: 12px 16px;
    }
    #issueModal .ip-scroll {
        padding: 14px 16px 24px;
    }
}

/* The workload check in the side panel: one card under another. */
#issueModal .ip-col-side .pat-load__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}
#issueModal .ip-col-side .pat-load__tag {
    display: none;
}
#issueModal .ip-col-side .pat-load__card {
    padding: 8px 10px;
}
#issueModal .ip-col-side .pat-load__value {
    font-size: var(--fs-md);
}

/* ─────────────────────────────────────────────────────────────
   Workload check: how busy the assignee is and when they could
   finish this. Sits under the property grid, so it reads as a
   consequence of the fields above rather than another field.
   ───────────────────────────────────────────────────────────── */
#issueModal .pat-load {
    margin-top: 2px;
}
#issueModal .pat-load__box {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

/* Header band: what this is, whose it is, and that it is not saved. */
#issueModal .pat-load__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--primary-soft) 0%, var(--plum-soft) 100%);
    border-bottom: 1px solid var(--primary-soft-2);
}
#issueModal .pat-load__badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(79, 70, 229, .3);
}
#issueModal .pat-load__badge svg { width: 16px; height: 16px; }
#issueModal .pat-load__titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#issueModal .pat-load__titles b {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--primary-ink);
    line-height: var(--lh-tight);
}
#issueModal .pat-load__titles small {
    font-size: var(--fs-2xs);
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#issueModal .pat-load__tag {
    margin-left: auto;
    flex: none;
    padding: 3px 10px;
    border: 1px solid var(--primary-soft-2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    font-size: 11px;
    font-weight: var(--fw-medium);
    color: var(--primary-ink);
}

#issueModal .pat-load__body {
    padding: 12px 14px;
}

/* Three figures, each with its own icon and colour. */
#issueModal .pat-load__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
#issueModal .pat-load__card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    transition: border-color .15s, box-shadow .15s;
}
#issueModal .pat-load__card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
}
#issueModal .pat-load__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
#issueModal .pat-load__icon svg { width: 16px; height: 16px; }
#issueModal .pat-load__card--task   .pat-load__icon { background: var(--info-soft);    color: var(--info-ink); }
#issueModal .pat-load__card--queue  .pat-load__icon { background: var(--warning-soft); color: var(--warning-ink); }
#issueModal .pat-load__card--finish .pat-load__icon { background: var(--primary);      color: #fff; }
#issueModal .pat-load__card--finish {
    border-color: var(--primary-soft-2);
    background: linear-gradient(135deg, var(--primary-soft) 0%, var(--surface) 100%);
}
#issueModal .pat-load__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
#issueModal .pat-load__label {
    font-size: 11px;
    font-weight: var(--fw-semibold);
    color: var(--muted-ink);
    text-transform: uppercase;
    letter-spacing: .05em;
}
#issueModal .pat-load__value {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--ink);
    line-height: var(--lh-tight);
}
#issueModal .pat-load__card--finish .pat-load__value { color: var(--primary-ink); }
#issueModal .pat-load__sub {
    font-size: var(--fs-2xs);
    color: var(--ink-3);
    line-height: var(--lh-snug);
}

/* The bar: queued work, then this issue, from today to done. */
#issueModal .pat-load__bar {
    margin-top: 12px;
}
#issueModal .pat-load__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-bottom: 6px;
    font-size: var(--fs-2xs);
    color: var(--ink-3);
}
#issueModal .pat-load__legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#issueModal .pat-load__key {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
#issueModal .pat-load__key--queue,
#issueModal .pat-load__seg--queue {
    background: repeating-linear-gradient(135deg, #FEC84B 0 6px, #FDB022 6px 12px);
}
#issueModal .pat-load__key--task,
#issueModal .pat-load__seg--task {
    background: linear-gradient(90deg, var(--primary) 0%, var(--plum) 100%);
}
#issueModal .pat-load__track {
    display: flex;
    gap: 3px;
    height: 14px;
    padding: 3px;
    border-radius: 999px;
    background: var(--surface-3);
}
#issueModal .pat-load__seg {
    min-width: 6px;
    border-radius: 999px;
}
#issueModal .pat-load__ticks {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 16px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--muted-ink);
}
#issueModal .pat-load__ticks .pat-load__tick-mid {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-weight: var(--fw-semibold);
    color: var(--ink-2);
    white-space: nowrap;
}
#issueModal .pat-load__ticks span:last-child {
    font-weight: var(--fw-semibold);
    color: var(--primary-ink);
}

#issueModal .pat-load__warn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 8px 12px;
    border: 1px solid var(--warning-line);
    border-left: 3px solid var(--warning);
    border-radius: var(--r-sm);
    background: var(--warning-soft);
    font-size: var(--fs-2xs);
    line-height: var(--lh-snug);
    color: var(--warning-ink);
}
#issueModal .pat-load__warn svg { flex: none; width: 15px; height: 15px; }
#issueModal .pat-load__src,
#issueModal .pat-load__empty {
    margin: 10px 0 0;
    font-size: 11px;
    color: var(--muted-ink);
    line-height: var(--lh-snug);
}
#issueModal .pat-load__empty { margin: 0; font-size: var(--fs-xs); }
#issueModal .pat-load__wait {
    display: block;
    padding: 12px 14px;
    font-size: var(--fs-2xs);
    color: var(--muted-ink);
}

@media (max-width: 900px) {
    #issueModal .pat-load__grid { grid-template-columns: minmax(0, 1fr); }
    #issueModal .pat-load__tag  { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   The suggested estimate, directly under its field. It sits inside
   the property grid, so it stays to one line of text plus the
   button rather than growing the row.
   ───────────────────────────────────────────────────────────── */
#issueModal .pat-est {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 6px 2px 0;
}
#issueModal .pat-est__txt {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fs-2xs);
    line-height: 1.45;
    color: var(--muted, #64748b);
}
#issueModal .pat-est__txt b {
    font-weight: 600;
    color: var(--ink, #0f172a);
}
#issueModal .pat-est__use {
    flex: 0 0 auto;
    padding: 3px 9px;
    border: 1px solid var(--brand, #6366f1);
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: 1.5;
    color: var(--brand, #6366f1);
    cursor: pointer;
    white-space: nowrap;
}
#issueModal .pat-est__use:hover {
    background: var(--brand, #6366f1);
    color: #fff;
}

/* ─────────────────────────────────────────────────────────────
   Custom fields, under the checklist: a title row with a small
   Add button, and a one-line note while there are none.
   ───────────────────────────────────────────────────────────── */
#issueModal .ip-cf .cf-head {
    align-items: center;
    margin-bottom: 0;
}
#issueModal .ip-cf .cf-title {
    font-size: var(--fs-md);
}
#issueModal .ip-cf .cf-add-btn {
    padding: 6px 12px;
    border: 1px solid var(--primary-soft-2);
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-size: var(--fs-xs);
    box-shadow: none;
}
#issueModal .ip-cf .cf-add-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
#issueModal .ip-cf .cf-list:not(:empty) {
    margin-top: 12px;
}
#issueModal .ip-cf .cf-empty {
    display: block;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    text-align: left;
    font-size: var(--fs-xs);
}

/* ── The parent's due date (issue-form.js issueDueAlert) ─────────────────
   Under Due date: the epic or goal is already overdue (red), or this issue
   is due after it (amber). It warns; it never stops the save. */
.due-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: -4px 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--warning-line);
    border-radius: var(--r-md);
    background: var(--warning-soft);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug, 1.45);
    color: var(--ink-2);
}

.due-alert[hidden] {
    display: none;
}

.due-alert > .bi {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 15px;
    color: var(--warning-ink);
}

.due-alert.is-bad {
    border-color: #FECDCA;
    background: var(--danger-soft);
}

.due-alert.is-bad > .bi,
.due-alert.is-bad .due-alert__t {
    color: var(--danger-ink);
}

.due-alert__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.due-alert__t {
    font-size: var(--fs-sm);
    color: var(--warning-ink);
}

.due-alert__body small {
    color: var(--muted-ink);
}

.due-alert__acts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.due-alert__btn {
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: var(--ink);
    font: inherit;
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

.due-alert__btn.is-ghost {
    border-color: var(--line-strong);
    background: #fff;
    color: var(--ink);
}

.due-alert__btn:hover {
    opacity: .9;
}

/* The epic form opened from the issue form ("Change epic due date") sits above it. */
#epicModal.is-over {
    z-index: 1150;
}