/*
 * modals.css — one look for every Bootstrap modal in the app (loaded after the
 * page/theme CSS). Pages had ~20 different headers (navy, teal, orange, green,
 * plain white…); they all become the same calm blue window:
 *   solid navy header + icon tile · white body · tidy fields · blue buttons.
 * !important is only used where pages set inline header styles.
 */
.modal { --md-navy:#0c3a8e; --md-blue:#1e6be6; --md-sky:#9dbcf5; --md-line:#dce8ff; --md-soft:#eef4ff; --md-ink:#0f172a; --md-mute:#64748b; }
.modal-backdrop.show { opacity:.45; background:#0b1a3a; }

.modal .modal-content { border:0; border-radius:20px; overflow:hidden; box-shadow:0 24px 60px rgba(12,58,142,.22); }

/* header */
.modal .modal-header {
    background:var(--md-navy) !important; background-image:none !important; color:#fff !important;
    border:0 !important; padding:14px 20px; align-items:center; gap:10px;
}
.modal .modal-header .modal-title,
.modal .modal-header .modal-title *:not(.badge):not(.btn),
.modal .modal-header h1, .modal .modal-header h2, .modal .modal-header h3,
.modal .modal-header h4, .modal .modal-header h5, .modal .modal-header h6 { color:#fff !important; }
.modal .modal-header .modal-title { font-weight:800; font-size:1.02rem; display:flex; align-items:center; gap:10px; margin:0; line-height:1.35; }
.modal .modal-header .modal-title > i:first-child,
.modal .modal-header .modal-title > .fa:first-child,
.modal .modal-header .modal-title > [class*="fa-"]:first-child {
    width:34px; height:34px; flex:0 0 34px; border-radius:11px; background:rgba(255,255,255,.14);
    display:inline-flex; align-items:center; justify-content:center; font-size:.92rem; margin:0 !important;
}
.modal .modal-header .text-muted, .modal .modal-header small { color:rgba(255,255,255,.75) !important; }
.modal .modal-header .btn-close {
    filter:invert(1) grayscale(100%) brightness(200%); opacity:.8; margin:0; margin-inline-start:auto;
    background-color:rgba(255,255,255,.08); border-radius:10px; padding:.55rem; box-shadow:none !important;
}
.modal .modal-header .btn-close:hover { opacity:1; }

/* body */
.modal .modal-body { padding:18px 20px; }
.modal .modal-body .form-label, .modal .modal-body label.small { font-size:.79rem; font-weight:700; color:#475569; margin-bottom:5px; }
html:not(.theme-dark) .modal .form-control,
html:not(.theme-dark) .modal .form-select { border:1px solid var(--md-line); border-radius:11px; font-size:.88rem; }
html:not(.theme-dark) .modal .form-control:focus,
html:not(.theme-dark) .modal .form-select:focus { border-color:var(--md-blue); box-shadow:0 0 0 3px var(--md-soft); }
.modal .form-control-sm, .modal .form-select-sm { border-radius:9px; }
.modal .input-group > .form-control, .modal .input-group > .form-select { border-radius:0; }
.modal .input-group > :first-child { border-start-start-radius:11px; border-end-start-radius:11px; }
.modal .input-group > :last-child { border-start-end-radius:11px; border-end-end-radius:11px; }
.modal hr { border-color:var(--md-line); opacity:1; }

/* footer + buttons */
.modal .modal-footer { border-top:1px solid #eef2f8; padding:12px 20px; gap:8px; }
html:not(.theme-dark) .modal .modal-footer { background:#fbfcff; }
.modal .modal-footer > * { margin:0; }
.modal .modal-footer .btn, .modal .modal-body .btn:not(.btn-sm):not(.btn-link):not(.btn-close) { border-radius:11px; font-weight:700; }
.modal .modal-footer .btn { padding:.48rem 1.15rem; }
.modal .modal-footer .btn-primary, .modal .modal-footer .emr-btn-primary,
.modal .modal-footer .btn-success, .modal .modal-footer .btn-info, .modal .modal-footer .btn-warning {
    background:var(--md-blue) !important; border-color:var(--md-blue) !important; color:#fff !important; font-weight:800;
}
.modal .modal-footer .btn-primary:hover, .modal .modal-footer .emr-btn-primary:hover,
.modal .modal-footer .btn-success:hover, .modal .modal-footer .btn-info:hover, .modal .modal-footer .btn-warning:hover {
    background:var(--md-navy) !important; border-color:var(--md-navy) !important;
}
.modal .modal-footer .btn-secondary, .modal .modal-footer .btn-light, .modal .modal-footer .btn-outline-secondary {
    background:#fff !important; border:1px solid var(--md-line) !important; color:var(--md-ink) !important;
}
.modal .modal-footer .btn-secondary:hover, .modal .modal-footer .btn-light:hover, .modal .modal-footer .btn-outline-secondary:hover {
    background:var(--md-soft) !important; border-color:var(--md-sky) !important; color:var(--md-navy) !important;
}
.modal .modal-footer .btn[style*="background"] { background:var(--md-blue) !important; border-color:var(--md-blue) !important; color:#fff !important; }

/* small centred confirm-style modals keep their icon look */
.modal .emr-action-modal { border-radius:20px; }
.modal .emr-action-modal .modal-footer { background:transparent; border:0; }

/* dark theme: keep the navy header, surfaces come from dark-content.css */
.theme-dark .modal .modal-header { background:#0c2a66 !important; }

/* Custom (non-Bootstrap) windows in OrgConsole (.oc-modal) and Roles (.rl-modal) — same look. */
.oc-modal-scrim, .rl-modal-scrim { background:rgba(11,26,58,.45) !important; }
.oc-modal-box, .rl-modal-box { border-radius:20px !important; box-shadow:0 24px 60px rgba(12,58,142,.22) !important; }
.oc-modal-head, .rl-modal-head { background:#0c3a8e !important; padding:14px 20px !important; font-size:1.02rem; }
.oc-x, .rl-x { width:34px; height:34px; border-radius:10px !important; background:rgba(255,255,255,.1) !important; display:inline-flex; align-items:center; justify-content:center; }
.oc-x:hover, .rl-x:hover { background:rgba(255,255,255,.2) !important; }
.theme-dark .oc-modal-head, .theme-dark .rl-modal-head { background:#0c2a66 !important; }