/*!
 * SHEQ24 — GLOBAL MODAL STYLE  (rollout of the approved Standard Modal Template)
 * ---------------------------------------------------------------------------
 * Applies the approved `.sheq-stdmodal` look to EVERY modal in the system.
 * Loaded after custom.css in all 3 headers. Paired with sheq-modal-global.js.
 *
 * Design decisions (Henrick, approved 2026-05-31):
 *   flatpickr dates · Select2 dropdowns · navy header (title left / X right) ·
 *   navy primary buttons · clean dropzone uploader · scrollable body.
 *
 * SAFETY: required fields are NOT pre-coloured red — red appears ONLY on
 * .is-invalid (set by JS on a failed submit). No global ajaxComplete repaint.
 * Everything keys off the .modal element, so non-modal screens are untouched.
 * ===========================================================================*/

/* ---- 1. Modal shell: header fixed · body scrolls · footer fixed ---------- */
/* This is the fix for "cannot scroll to the Submit button". The content box  */
/* becomes a flex column capped to the viewport; only the body scrolls.       */
.modal .modal-content{
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(16,24,40,.22);
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
}
.modal .modal-header{ flex: 0 0 auto; }
.modal .modal-footer{ flex: 0 0 auto; }
.modal .modal-body{ flex: 1 1 auto; overflow-y: auto; }

/* Sticky action row — for modals WITHOUT a real .modal-footer, JS tags the    */
/* primary button's row .sheq-sticky-actions so it pins to the bottom of the   */
/* scrolling body (button stays inside its <form>, so submit still works).     */
.modal .sheq-sticky-actions{
    position: sticky; bottom: 0; z-index: 3;
    background: #fff; border-top: 1px solid #eef0f3;
    margin: 1rem -1.25rem -1.15rem; padding: .8rem 1.25rem;
    display: flex; justify-content: flex-end; gap: .5rem;
}
.modal .sheq-sticky-actions .btn{ margin: 0; }

/* The AJAX 'sheqModal' shell loads each fragment's .modal-content directly as  */
/* #sheqModal > .modal-dialog > .modal-content (NO nested dialog). So we size + */
/* CENTER the shell's own dialog like a normal BS5 modal (was full-bleed).     */
#sheqModal > .modal-dialog{
    max-width: 680px; width: auto; margin: 1.75rem auto;
}
/* Wider variant for big forms that opt in via .modal-lg on their dialog.      */
#sheqModal > .modal-dialog.modal-lg{ max-width: 900px; }
#sheqModal > .modal-dialog > .modal-content{ max-height: calc(100vh - 3.5rem); }

/* ---- 2. Header: title LEFT, close X RIGHT (no overlap) ------------------- */
/* Phase 9 already paints .modal-header navy + white X. We only enforce the   */
/* horizontal order so templates that emit <btn-close> before <title> are OK. */
.modal .modal-header{
    display: flex !important; align-items: center !important;
    padding: .9rem 1.15rem;
}
.modal .modal-header .modal-title,
.modal .modal-header h1, .modal .modal-header h2, .modal .modal-header h3,
.modal .modal-header h4, .modal .modal-header h5, .modal .modal-header h6{
    order: 1 !important; margin: 0 !important;
    font-size: 1.05rem; font-weight: 600;
}
/* The header X: force a WHITE, clearly-visible close on the navy header.      */
/* (custom.css loads after us, so we must win on specificity — qualify with    */
/* .modal-header and use !important; also give it a comfortable hit area.)      */
.modal .modal-header .btn-close{
    order: 9 !important; margin-left: auto !important; float: none !important;
    width: 1.4rem; height: 1.4rem; padding: .35rem; box-sizing: content-box;
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;   /* dark BS5 SVG -> white */
    background-color: transparent !important;
    border-radius: 6px;
}
.modal .modal-header .btn-close:hover{ background-color: rgba(255,255,255,.18) !important; }
.modal .modal-header .btn-close:focus{ box-shadow: 0 0 0 .2rem rgba(255,255,255,.35) !important; }
/* BS4 leftover close button → behave + look like a white X on navy.          */
.modal .modal-header .close{
    order: 9 !important; margin-left: auto !important; float: none !important;
    border: 0; background: transparent; font-size: 1.6rem; line-height: 1;
    opacity: .95 !important; color: #fff !important; text-shadow: none; cursor: pointer;
}
.modal .modal-header .close:hover{ opacity: 1; }
/* If a real close button exists, hide any JS-injected duplicate.             */
.modal .modal-header .btn-close ~ .sheq-injected-close,
.modal .modal-header .close ~ .sheq-injected-close{ display: none !important; }

/* ---- 3. Body spacing + section dividers --------------------------------- */
.modal .modal-body{ padding: 1.15rem 1.25rem; background: #fff; }
.modal .modal-body .mb-3,
.modal .modal-body .form-group{ margin-bottom: 1rem; }
.modal .modal-body .form-label,
.modal .modal-body label{ font-weight: 600; font-size: .82rem; color: #3f4254; }
/* Section header bars (Links / Details / Involvement / Uploads / Notifications */
/* etc.) = .modal-custom-h5. They were rendering as a THIN navy strip. Make them */
/* a proper, substantial section header: light tinted bar, navy text, real      */
/* height, full width (escape the body padding), rounded. Collapsible ones keep  */
/* a chevron affordance. custom.css loads after us → use !important to win.      */
.modal .modal-custom-h5{
    margin: 1.5rem -1.25rem .9rem !important;          /* full-bleed across body */
    padding: .7rem 1.25rem !important;
    background: #f1f4f7 !important;
    border-top: 1px solid #e4e8ee !important;
    border-bottom: 1px solid #e4e8ee !important;
    display: flex !important; align-items: center;
}
.modal .modal-custom-h5 > span{ display: flex; align-items: center; width: 100%; }
.modal .modal-custom-h5 h5{
    background: transparent !important; color: var(--sheq-sidebar-bg,#1c3f59) !important;
    font-size: .78rem !important; font-weight: 700 !important;
    letter-spacing: .05em; text-transform: uppercase;
    padding: 0 !important; margin: 0 !important; border: 0 !important;
    line-height: 1.2;
}
/* collapsible section bars get a chevron + pointer */
.modal .modal-custom-h5.mouseClick,
.modal .modal-custom-h5[data-bs-toggle="collapse"]{ cursor: pointer; }
.modal .modal-custom-h5[data-bs-toggle="collapse"]::after{
    content: "\f078"; font-family: "Font Awesome 5 Free","FontAwesome"; font-weight: 900;
    margin-left: auto; color: #9aa1ac; font-size: .7rem;
}

/* ---- 4. One control look (inputs, selects, textareas) ------------------- */
.modal .form-control,
.modal .form-select{
    border: 1px solid #d6dae0; border-radius: 8px;
    padding: .5rem .7rem; font-size: .9rem; min-height: 42px; box-shadow: none;
}
.modal textarea.form-control{ min-height: 90px; }
.modal .form-control:focus,
.modal .form-select:focus{
    border-color: var(--sheq-sidebar-bg, #1c3f59);
    box-shadow: 0 0 0 3px rgba(28,63,89,.12); outline: 0;
}

/* ---- 5. Required + error states (red ONLY after validation) ------------- */
.modal .sheq-req-star{ color: #d64550; font-weight: 700; margin-left: 2px; }
/* NEUTRALISE the pre-existing Phase-7 ".critical_field" paint: it tinted EVERY */
/* required field orange-pink/red on open (the "everything is red" complaint).  */
/* Two custom.css rules to beat: base `.critical_field{border:#f4a59f}` (0,1,0)  */
/* and `.critical_field:invalid:not(:focus):not(:placeholder-shown){#e54519}`    */
/* (0,4,0). NOTE (browser-verified): the modal's fields are NOT wrapped in a     */
/* .modal-content here, so DON'T scope to .modal-content. We win on specificity:*/
/*   .modal .critical_field:not(.is-invalid)                       = (0,3,0)     */
/*   .modal .critical_field:invalid:not(.is-invalid):not(:focus)   = (0,5,0)     */
/* The second beats the stubborn :invalid rule. Red returns only on .is-invalid.*/
.modal .critical_field:not(.is-invalid),
.modal .critical_field:invalid:not(.is-invalid):not(:focus){
    border-color: #d6dae0 !important;
    background-color: #fff !important;
    box-shadow: none !important;
}
.modal .critical_field:not(.is-invalid) + .select2-container .select2-selection{
    border-color: #d6dae0 !important;
}
.modal .form-control.is-invalid,
.modal .form-select.is-invalid,
.modal textarea.is-invalid,
.modal .critical_field.is-invalid,
.modal .is-invalid + .select2-container .select2-selection,
.modal .critical_field.is-invalid + .select2-container .select2-selection,
.modal .select2-container.is-invalid .select2-selection{
    border-color: #d64550 !important;
    box-shadow: 0 0 0 3px rgba(214,69,80,.14) !important;
}

/* ---- 6. Select2 matches .form-control exactly -------------------------- */
.modal .select2-container{ width: 100% !important; }
.modal .select2-container--default .select2-selection--single{
    height: 42px; border: 1px solid #d6dae0; border-radius: 8px;
    display: flex; align-items: center; padding: 0 .35rem;
}
.modal .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: normal; color: #1f2329; padding-left: .35rem;
}
.modal .select2-container--default .select2-selection--single .select2-selection__arrow{ height: 40px; }
/* MULTI-SELECT: grow with chips (was clipped at a fixed 42px → "weird" look on */
/* NCR Department / Job Card Exposure). Auto height, padded, styled chips.      */
.modal .select2-container--default .select2-selection--multiple{
    min-height: 42px; height: auto;
    border: 1px solid #d6dae0; border-radius: 8px;
    padding: 3px 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.modal .select2-container--default .select2-selection--multiple .select2-selection__rendered{
    display: flex; flex-wrap: wrap; gap: 4px; padding: 0; width: 100%;
}
.modal .select2-container--default .select2-selection--multiple .select2-search--inline{ flex: 1 1 60px; }
.modal .select2-container--default .select2-selection--multiple .select2-search__field{ margin: 0; height: 28px; }
/* The chips */
.modal .select2-container--default .select2-selection--multiple .select2-selection__choice{
    background: #eef4f8; border: 1px solid #d6e3ee; color: #1c3f59;
    border-radius: 6px; padding: 2px 8px; margin: 0; font-size: .82rem;
    display: inline-flex; align-items: center;
}
.modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color: #5b86a6; margin-right: 5px; font-weight: 700; border: 0;
}
.modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
    color: #d64550; background: transparent;
}
/* placeholder vertically centred when empty */
.modal .select2-container--default .select2-selection--multiple .select2-search__field::placeholder{ color: #99a0ab; }
.modal .select2-container--open .select2-selection--single,
.modal .select2-container--focus .select2-selection--single{
    border-color: var(--sheq-sidebar-bg, #1c3f59);
    box-shadow: 0 0 0 3px rgba(28,63,89,.12);
}
/* The dropdown panel must float above the modal (Select2 appends to body or  */
/* to dropdownParent=modal). Keep it above the BS5 modal z-index.            */
.select2-container--open{ z-index: 1060 !important; }
.select2-dropdown{ z-index: 1060; }

/* ---- 7. Native <select> that never became Select2: still tidy ----------- */
.modal select.form-control:not(.select2-hidden-accessible){
    height: 42px; padding: .4rem .6rem;
}

/* ---- 8. Evidence / Uploads widget facelift ----------------------------- */
/* Identified by a circular + button in a card-header. Dark slab → light     */
/* panel; the big salmon/teal circle → a small navy rounded square.          */
.modal .card:has(> .card-header .btn-circle) > .card-header,
.modal .card .card-header:has(.btn-circle){
    background: #f8fafc !important; color: #334155 !important;
    border-bottom: 1px solid #eef0f3 !important;
    font-weight: 600; font-size: .85rem;
    display: flex !important; align-items: center; justify-content: space-between;
    padding: .55rem .85rem !important;
}
.modal .card:has(> .card-header .btn-circle) > .card-header .panel-heading-icons{ margin: 0; }
.modal .card-header .btn.btn-circle{
    width: 30px !important; height: 30px !important; line-height: 30px !important;
    padding: 0 !important; border-radius: 8px !important;
    background: var(--sheq-sidebar-bg, #1c3f59) !important; border: 0 !important;
    color: #fff !important; display: inline-flex !important;
    align-items: center; justify-content: center; box-shadow: none !important;
}
.modal .card-header .btn.btn-circle:hover{ background: #163448 !important; }
.modal .card-header .btn.btn-circle .fa,
.modal .card-header .btn.btn-circle i{ color: #fff !important; margin: 0; }
.modal .card:has(> .card-header .btn-circle) > .card-body{ background: #fff; padding: .85rem !important; }

/* JS-built dropzone (sheq-modal-global.js) for plain <input type=file>.      */
.modal .sheq-dz{
    border: 2px dashed #cdd4dc; border-radius: 10px; padding: 1.1rem 1rem;
    text-align: center; cursor: pointer; background: #f8fafc;
    transition: border-color .12s ease, background .12s ease;
}
.modal .sheq-dz:hover, .modal .sheq-dz.is-dragover{
    border-color: var(--sheq-sidebar-bg, #1c3f59); background: #eef4f8;
}
.modal .sheq-dz .sheq-dz-ic{ font-size: 1.4rem; color: #94a3b8; display: block; margin-bottom: .3rem; }
.modal .sheq-dz .sheq-dz-t{ color: #475569; font-size: .86rem; }
.modal .sheq-dz .sheq-dz-t b{ color: var(--sheq-sidebar-bg, #1c3f59); }
.modal .sheq-dzlist{ margin-top: .55rem; display: flex; flex-direction: column; gap: .4rem; text-align: left; }
.modal .sheq-dzfile{ display: flex; align-items: center; gap: .55rem; padding: .4rem .55rem;
    background: #f8fafc; border: 1px solid #eef0f3; border-radius: 8px; }
.modal .sheq-dzfile__n{ flex: 1 1 auto; min-width: 0; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal .sheq-dzfile__s{ font-size: .72rem; color: #64748b; }
.modal .sheq-dzfile__x{ border: 0; background: transparent; color: #9aa1ac; cursor: pointer; font-size: 1.05rem; line-height: 1; }
.modal .sheq-dzfile__x:hover{ color: #d64550; }

/* ---- 9. Buttons: ONE primary (navy). Footer tidy. ---------------------- */
/* Primary action everywhere = navy. Submit buttons historically green       */
/* (btn-success) or salmon (btn-red, non-circle) unify to navy INSIDE modals.*/
.modal .modal-footer{
    display: flex; gap: .5rem; justify-content: flex-end;
    background: #fff; border-top: 1px solid #eef0f3; padding: .8rem 1.15rem;
}
.modal .btn-success,
.modal .btn.btn-red:not(.btn-circle),
.modal input[type=submit].btn:not(.btn-secondary):not(.btn-danger):not(.btn-circle){
    background-color: var(--sheq-sidebar-bg, #1c3f59) !important;
    border-color: var(--sheq-sidebar-bg, #1c3f59) !important; color: #fff !important;
}
.modal .btn-success:hover,
.modal .btn.btn-red:not(.btn-circle):hover{
    background-color: #163448 !important; border-color: #163448 !important;
}
.modal .btn-primary{
    background-color: var(--sheq-sidebar-bg, #1c3f59) !important;
    border-color: var(--sheq-sidebar-bg, #1c3f59) !important; color: #fff !important;
}
/* The footer "Close" button (BS .btn-secondary) looked washed-out/grey-on-grey */
/* globally. Make it a clean outline "ghost" button matching the template's     */
/* Cancel: white bg, grey border, dark text, clearly clickable.                 */
.modal .modal-footer .btn-secondary,
.modal .modal-footer .btn[data-bs-dismiss="modal"]{
    background: #fff !important;
    border: 1px solid #d6dae0 !important;
    color: #3f4254 !important;
    border-radius: 8px; font-weight: 600; padding: .5rem 1.1rem;
    box-shadow: none !important;
}
.modal .modal-footer .btn-secondary:hover,
.modal .modal-footer .btn[data-bs-dismiss="modal"]:hover{
    background: #f3f5f7 !important; color: #1f2329 !important; border-color: #c4cbd4 !important;
}

/* ---- 10. flatpickr calendar above modal ------------------------------- */
.flatpickr-calendar{ z-index: 1065 !important; }
/* End SHEQ24 global modal style */