/*
 * csp-legacy.css
 * ---------------------------------------------------------------------------
 * Quarantine for inline style="" attributes that were extracted so a
 * Content-Security-Policy without style-src 'unsafe-inline' can eventually be
 * enforced. Classes are prefixed by their source component:
 *   csp-hdr-*     -> common/include_header.php
 *   csp-impexp-*  -> common/libraries/lib.import-export-frontend.php
 *
 * This is TECH DEBT, not the destination. A dev should work through these and
 * replace them with the standard approach (component styles / Bootstrap 5.3
 * utilities). Notes below flag the ones with a direct utility equivalent.
 */

/* include_header.php --------------------------------------------------------*/

/* progress modal body: was style="min-height:100px; vertical-align:middle; text-align:center" */
.csp-hdr-progress-modal-body {
    min-height: 100px;
    vertical-align: middle;
    text-align: center;
}

/* full-page loading overlay: was style="z-index:1080" */
.csp-hdr-loading-overlay {
    z-index: 1080;
}

/* loading spinner sizing: was style="width:3rem; height:3rem" */
.csp-hdr-spinner {
    width: 3rem;
    height: 3rem;
}

/* lib.import-export-frontend.php --------------------------------------------*/

/* import file-picker row: was style="padding:20px; background:#dddddd" */
.csp-impexp-import-row {
    padding: 20px;
    background: #dddddd;
}

/* import file-picker label: was style="padding:4px 7px; cursor:pointer" */
.csp-impexp-import-label {
    padding: 4px 7px;
    cursor: pointer;
}

/* wide modal dialog: was style="max-width:90%" */
.csp-impexp-modal-wide {
    max-width: 90%;
}

/* scrollable modal body: was style="overflow-x:auto"
   NOTE: Bootstrap 5.3 utility .overflow-x-auto is a direct replacement. */
.csp-impexp-modal-body-scroll {
    overflow-x: auto;
}

/* ===========================================================================
 * Full-project migration classes (added when CSP rolled out across the whole
 * product). csp-legacy.css is loaded LAST in cssLibraries.php, so a single-class
 * selector here wins over a Bootstrap rule of EQUAL specificity by source order
 * — no !important needed for those. CAVEAT: Bootstrap sizes some components with
 * COMPOUND selectors (e.g. .offcanvas.offcanvas-end = 0,2,0); a single csp class
 * loses to those on specificity no matter the load order, so match Bootstrap's
 * specificity (e.g. .offcanvas.csp-...) instead of reaching for !important.
 * Do NOT add !important to any rule an element's size/visibility is also driven
 * by at runtime (JS .style / jQuery .show()/.hide() / DataTables), or you'll
 * break that behavior.
 * =========================================================================== */

/* --- common/utilities, resources, top pages (csp-cm-*) --- */
.csp-cm-d-inline   { display: inline; }
.csp-cm-text-center{ text-align: center; }
.csp-cm-maxw-900   { max-width: 900px; }
.csp-cm-debug-pre  { white-space: pre; overflow: auto; max-height: 60vh; margin: 0; }
.csp-cm-w-0        { width: 0; }   /* progress bar initial; JS updates inline width — keep NON-!important */
.csp-cm-w-10       { width: 10%; }
.csp-cm-w-15       { width: 15%; }

/* --- common/security, common/admin (csp-sec-*) --- */
.csp-sec-download-wrapper { margin: 75px; }
.csp-sec-download-error   { font-size: 140%; padding-top: 20px; color: #ea4335; }
.csp-sec-pt-20            { padding-top: 20px; }
.csp-sec-pt-5             { padding-top: 5px; }
.csp-sec-w-500            { width: 500px; }
.csp-sec-w-200            { width: 200%; }        /* .modal-content widen */
.csp-sec-mh-400           { min-height: 400px; }  /* modal-body */
.csp-sec-mt-100           { margin-top: 100px; }  /* modal */
.csp-sec-hidden           { display: none; }      /* JS-toggled via .show()/.hide() — keep NON-!important */

/* --- scopedeliver/admin, reports (csp-sda-*) --- */
.csp-sda-sort-hidden         { display: none; }
.csp-sda-modal-dialog-full   { width: 100%; }
.csp-sda-error-w150          { width: 150px; }
.csp-sda-cursor-help         { cursor: help; }
.csp-sda-toast-z1080         { z-index: 1080; }
.csp-sda-progress-modal-body { min-height: 100px; vertical-align: middle; text-align: center; }
.csp-sda-modal-dialog-mw1000 { max-width: 1000px; }

/* --- scopedeliver root + incs (csp-sd-*) --- */
.csp-sd-cc-spinner   { width: 22px; height: 22px; align-self: center; }
.csp-sd-w-54         { width: 54px; }
.csp-sd-w-80         { width: 80px; }
.csp-sd-w-100        { width: 100px; }
.csp-sd-w-110        { width: 110px; }
.csp-sd-version-warning { height: 1.5em; width: 220px; margin: -1em 1em 0.5em 0; }
.csp-sd-modal-1100   { max-width: 1100px; }
.csp-sd-minh-200     { min-height: 200px; }
.csp-sd-w-full       { width: 100%; }   /* DataTable; DataTables may set inline widths — keep NON-!important */
.csp-sd-modal-approval { max-width: 1200px; width: 95vw; }
/* was inline style="width:900px". Bootstrap sizes the panel via the COMPOUND
   selector .offcanvas.offcanvas-end (specificity 0,2,0), so a single csp class
   loses on specificity regardless of source order — the selector below matches
   that specificity and wins by loading later. Applies to both the deliverables
   panel in inc.sow-deliverables.php and inc.reco-deliverable-adjust.php. */
.offcanvas.csp-sd-offcanvas-900 { width: 900px; }
.csp-sd-btngroup-50  { height: 50px; }
.csp-sd-minw-200     { min-width: 200px; }
.csp-sd-fs-10        { font-size: 10px; }
.csp-sd-progress-modal-body { min-height: 100px; vertical-align: middle; text-align: center; }
.csp-sd-modal-1000   { max-width: 1000px; }
.csp-sd-fs-15        { font-size: 15px; }
.csp-sd-maxh-100     { max-height: 100px; }
.csp-sd-cursor-pointer { cursor: pointer; }   /* inc.sow-staff.php select2 "Add Staff Name" row */