/* Modal overlay and dialog layout, the sidebar-docked modal, and the modal stacking order. */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay.open {
    display: flex;
}

.sidebar-modal-overlay {
    left: 220px;
    width: calc(100vw - 220px);
    align-items: stretch;
    justify-content: flex-end;
}

.modal {
    position: relative;
    background: var(--card);
    border-radius: 16px;
    padding: 24px;
    width: 60vw;
    max-width: 92vw;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}

/* A modal is a column capped to the viewport: the title row stays put, the
   card in the middle takes the scrolling, and the action row sits at the
   foot of that card. Letting the whole modal scroll instead left the title
   scrolled out of sight and, because the modal's own padding sits below the
   card, a strip of content kept sliding past under the buttons. Every modal
   here is .modal > .modal-header + (form >) .card > … + .form-actions. */
.modal:not(.sidebar-modal) {
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
}

.modal > .modal-header {
    flex: 0 0 auto;
}

.modal > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* The card gives up its bottom padding to the action row, so the row ends
   exactly where the scroll area ends: there is no gap left under it for a
   line of text to scroll through. */
.modal .card {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 0;
}

.modal .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--card);
    border-top: 1px solid var(--border);
    margin: 12px -18px 0;
    padding: 12px 18px 18px;
}

.sidebar-modal {
    border-radius: 0px !important;
    width: 100% !important;
    min-height: 100vh !important;
    height: 100vh !important;
    overflow-y: auto !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.modal-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text);
}

.modal-id {
    font-size: var(--fs-xs);
    color: var(--muted);
    font-family: var(--font-mono);
    margin-top: 2px;
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-md);
    color: var(--muted);
    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.modal-close:hover {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: #fca5a5;
    transform: rotate(90deg);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}

.modal-section-title {
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.modal-footer {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: flex-end;
}

@media (min-width: 769px) {
    /* Modal overlay shifts for collapsed sidebar */
    .app-shell.sidebar-collapsed .sidebar-modal-overlay {
        left: 64px;
        width: calc(100vw - 64px);
    }
}

@media (max-width: 768px) {
    .sidebar-modal-overlay {
        left: 0 !important;
        width: 100vw !important;
    }
}

body.modal-open {
    overflow: hidden !important;
}

#holdModal,
#waitModal,
#pushModal,
#issueModal,
#okrModal,
#epicModal,
#fileModal {
    z-index: 1100;
}

/* Confirmation dialogs open from inside modals (discard changes, remove a
   goal, …), so they must sit above every modal layer (up to 1150) and the
   searchable-select lists (1300). SweetAlert's own default is 1060. */
.swal2-container {
    z-index: 1400 !important;
}

/* Dialog widths (a .modal is 60vw otherwise). */
.modal.modal-520 {
    width: 520px;
}

.modal.modal-560 {
    width: 560px;
}

.modal.modal-720 {
    width: 720px;
}

/* ── the "last working day" dialog (assets/js/employees.js) ──
   SweetAlert's own `input` looked nothing like the rest of the app, so the
   body is the app's form markup instead and only needs unpicking from
   SweetAlert's centred layout. */
.emp-leave-swal .swal2-html-container {
    margin: 12px 0 0;
    text-align: start;
}

.emp-leave-swal .emp-leave__lead {
    margin: 0 0 16px;
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--ink-3);
    text-align: center;
}

.emp-leave-swal .emp-leave__field {
    margin: 0 auto;
    max-width: 260px;
}

.emp-leave-swal .emp-leave__field .form-input {
    width: 100%;
}

.emp-leave-swal .emp-leave__hint {
    margin: 6px 0 0;
    font-size: var(--fs-2xs);
    color: var(--muted-ink);
}

/* ─────────────────────────────────────────────────────────────
   My profile — the person at the top, their details under it, and
   the password form below a divider.
   ───────────────────────────────────────────────────────────── */
.pf-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.pf-av {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 700;
}
.pf-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pf-who b {
    font-size: var(--fs-md);
}
.pf-who .muted {
    font-size: var(--fs-xs);
}
.pf-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 20px;
    margin: 0;
    font-size: var(--fs-sm);
}
.pf-grid dt {
    color: var(--muted, #64748B);
}
.pf-grid dd {
    margin: 0;
    font-weight: 600;
}
.pf-sep {
    height: 1px;
    margin: 20px 0 16px;
    background: var(--border, #E5E7EB);
}
.pf-note {
    margin: 2px 0 14px;
    font-size: var(--fs-xs);
    line-height: 1.5;
}
.pf-pwnote {
    grid-column: 1 / -1;
    min-height: 18px;
    font-size: var(--fs-xs);
    line-height: 1.5;
}
.pf-pwnote.is-ok   { color: #047857; font-weight: 600; }
.pf-pwnote.is-warn { color: #92400E; }
.pw-eye.is-on      { color: var(--brand, #3B5BDB); }

/* ── Confirmation boxes (SweetAlert2) in the app's own look ─────────────────────
   Same font, corners, spacing and buttons as the app's dialogs and notifications. Each box
   still picks its button colour (red for a removal, and so on). `body` lifts these rules
   over the library's stylesheet, which loads after this one. */
body .swal2-container {
    padding: 16px;
}

body .swal2-container.swal2-backdrop-show {
    background: rgba(16, 24, 40, .45);
}

body .swal2-popup {
    width: min(460px, 100%);
    padding: 22px 22px 18px;
    border-radius: 14px;
    font-family: var(--font-sans);
    box-shadow: 0 20px 60px rgba(16, 24, 40, .22);
}

body .swal2-icon {
    width: 52px;
    height: 52px;
    margin: 4px auto 10px;
    border-width: 3px;
}

body .swal2-icon .swal2-icon-content {
    font-size: 30px;
}

body .swal2-title {
    padding: 0;
    font-size: var(--fs-lg, 18px);
    font-weight: 700;
    color: var(--ink);
}

body .swal2-html-container {
    margin: 8px 0 0;
    padding: 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--ink-3);
}

body .swal2-input,
body .swal2-textarea,
body .swal2-select {
    margin: 12px 0 0;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font-family: inherit;
    font-size: var(--fs-sm);
    box-shadow: none;
}

body .swal2-input:focus,
body .swal2-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

body .swal2-validation-message {
    margin: 10px 0 0;
    border-radius: 8px;
    font-size: var(--fs-xs);
}

body .swal2-actions {
    gap: 8px;
    margin: 18px 0 0;
}

body .swal2-styled {
    margin: 0;
    padding: 8px 18px;
    border-radius: 8px;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    box-shadow: none !important;
}

/* Button colours through the library's own variables, so a box that sets its own (red for a
   removal) still gets it — the box sets the variable on the button itself. */
body .swal2-container {
    --swal2-confirm-button-background-color: var(--accent, #4F46E5);
    --swal2-cancel-button-background-color: #fff;
    --swal2-cancel-button-color: var(--ink);
}

body .swal2-styled.swal2-cancel {
    border: 1px solid var(--line-strong);
}

body .swal2-styled:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Dialog icons as soft circles in the app's colours, like the notifications:
   orange ! to check, red ✕ for a problem, blue ? / i to ask or inform. */
body .swal2-icon {
    width: 48px;
    height: 48px;
    margin: 2px auto 12px;
    border: 0 !important;
}

body .swal2-icon .swal2-icon-content {
    font-size: 26px;
    font-weight: 700;
}

body .swal2-icon.swal2-warning  { background: #FEF0C7; color: #DC6803; box-shadow: 0 0 0 6px #FFFAEB; }
body .swal2-icon.swal2-question { background: #D1E9FF; color: #1570EF; box-shadow: 0 0 0 6px #EFF8FF; }
body .swal2-icon.swal2-info     { background: #D1E9FF; color: #1570EF; box-shadow: 0 0 0 6px #EFF8FF; }
body .swal2-icon.swal2-error    { background: #FEE4E2; color: #D92D20; box-shadow: 0 0 0 6px #FEF3F2; }
body .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: #D92D20; }

/* "Unsaved changes" (common/shell.js): Save changes · Discard · Keep editing, in one row. */
body .pat-unsaved .swal2-actions {
    flex-wrap: wrap;
}