/*
 * CSP Utility Classes
 * Replaces all inline style="" attributes removed for Content-Security-Policy compliance.
 * Grouped by file / feature area.
 */

/* =============================================
   Width utilities (percentage-based)
   ============================================= */
.w-5  { width: 5%; }
.w-6  { width: 6%; }
.w-8  { width: 8%; }
.w-10 { width: 10%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-18 { width: 18%; }
.w-19 { width: 19%; }
.w-20 { width: 20%; }
.w-21 { width: 21%; }
.w-22 { width: 22%; }
.w-23 { width: 23%; }
.w-24 { width: 24%; }
.w-28 { width: 28%; }
.w-38 { width: 38%; }
.w-38-half { width: 38.5%; }
.w-39 { width: 39%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50px { width: 50px; }
.w-60px { width: 60px; }
.w-83-half { width: 83.5%; }
.w-fit-content { width: fit-content; }
.w-40-important  { width: 40% !important; }
.w-21-important  { width: 21% !important; }
.w-39-important  { width: 39% !important; }
.w-100px { width: 100px; }
.w-120px { width: 120px; }

/* =============================================
   Height utilities (pixel-based)
   ============================================= */
.h-20  { height: 20px; }
.h-30  { height: 30px; }
.h-34  { height: 34px; }
.h-54  { height: 54px; }
.h-160 { height: 160px; }
.h-250 { height: 250px; }
.h-260 { height: 260px; }
.h-300 { height: 300px; }
.h-343 { height: 343px; }
.h-350 { height: 350px; }
.h-377 { height: 377px; }
.h-531 { height: 531px; }
.h-704 { height: 704px; }
.h-auto { height: auto; }
.min-h-20  { min-height: 20px; }
.min-h-600 { min-height: 600px; }

/* =============================================
   Margin utilities (pixel-based, beyond Bootstrap scale)
   ============================================= */
.mt-5px  { margin-top: 5px; }
.mt-10   { margin-top: 10px; }
.mt-12   { margin-top: 12px; }
.mt-neg-20 { margin-top: -20px; }
.mb-12px  { margin-bottom: -12px; }
.mb-20   { margin-bottom: 20px; }
.mb-40   { margin-bottom: 40px; }
.ml-11   { margin-left: 11px; }
.ml-15   { margin-left: 15px; }
.ml-25   { margin-left: 25px; }
.ml-50   { margin-left: 50px; }
.mr-4px  { margin-right: 4px; }

/* =============================================
   Padding utilities (pixel-based, beyond Bootstrap scale)
   ============================================= */
.pt-5px  { padding-top: 5px; }
.pt-3px  { padding-top: 3px; }
.pt-1px  { padding-top: 1px; }
.pb-18-important { padding-bottom: 18px !important; }
.pb-20-important { padding-bottom: 20px !important; }
.pl-7-important  { padding-left: 7px !important; }
.pl-15-important { padding-left: 15px !important; }
.pl-0-important  { padding-left: 0 !important; }
.pr-0   { padding-right: 0; }
.pr-15  { padding-right: 15px; }

/* =============================================
   Typography utilities
   ============================================= */
.text-10  { font-size: 10px; }
.text-11  { font-size: 11px; }
.text-12  { font-size: 12px; }
.text-14  { font-size: 14px; }
.text-17  { font-size: 17px; }
.text-1-5rem { font-size: 1.5rem; }
.text-25px   { font-size: 25px; }
.text-5rem   { font-size: 5rem; }
.fw-420 { font-weight: 420; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.text-black-semibold { color: black; font-weight: 600; }
.text-dodgerblue-semibold { color: dodgerblue; font-weight: 600; }
.text-green-important { color: green !important; }
.text-indianred-lg { font-size: 25px; color: indianred; }
.text-white-link { float: right; color: white; text-decoration: none; }

/* Dynamic status color classes (replaces inline color expressions) */
.text-status-issue  { color: red !important; }
.text-status-normal { color: blue !important; }

/* =============================================
   Position / Layout utilities
   ============================================= */
.pos-fix-dark { position: fixed; inset: 0 0 auto auto; margin: 0; transform: translate(-80px, 65px); z-index: 105; }
.pos-abs-center { position: absolute; text-align: center; z-index: 999; }
.pos-abs-webhook { position: absolute; transform: translate3d(-211px, 39px, 0px); top: 0; left: 0; will-change: transform; }
.left-neg-15 { left: -15px; }
.left-auto-right { left: auto; right: 40.5px; }
.zoom-1 { zoom: 1; }
.display-flex { display: flex; }
.flex-col { flex-direction: column; }
.align-items-center-justify-between { align-items: center; justify-content: space-between; }

/* =============================================
   Transform utilities
   ============================================= */
.translate-x-10 { transform: translateX(10px); }
.translate-x-10-w-8 { transform: translateX(10px); width: 8%; }
.animate-03s { animation-duration: 0.3s; }

/* =============================================
   Overflow utilities
   ============================================= */
.overflow-hidden { overflow: hidden; }

/* =============================================
   FileStatus/Index — section-specific classes
   ============================================= */
.fs-header-padding        { padding: 15px 0 5px 22px; }
.fs-content-padding       { padding: 20px 20px 20px 0; }
.fs-tab-header            { padding: 10px 0 0 10px; margin-bottom: -12px; }
.fs-tab-label             { padding: 11px !important; font-size: 15px; font-weight: 700; }
.fs-tab-sublabel          { font-size: 14px; font-weight: 420; margin-right: 4px; }
.fs-tab-content           { padding: 0 20px 15px 20px; font-size: 14px; }
.fs-tag-label             { padding-left: 7px !important; width: fit-content; }
.fs-wide-col              { width: 83.5%; padding-right: 0; }
.fs-col-pl24-w22          { padding-left: 24px; width: 22%; }
.fs-panel-height          { height: 377px; }
.fs-mt-0                  { margin-top: 0; }
.fs-nowrap-col            { width: 18%; text-wrap: nowrap; }

/* =============================================
   Dashboard/_OrderAction — section-specific classes
   ============================================= */
.oa-flex-col   { display: flex; flex-direction: column; }
.oa-nowrap-col { width: 18%; text-wrap: nowrap; }

/* =============================================
   Dashboard/_TodaysWorklistItems — section-specific classes
   ============================================= */
.wl-item-row    { margin-top: 5px; }
.wl-item-cell   { padding: 4px 0 4px 15px; }
.wl-icon-cell   { height: 20px; }
.wl-inline-pt5  { display: inline-block; padding-top: 5px; }
.wl-inline-text { display: inline-block; padding-top: 3px; font-size: 12px; }
.wl-inline-auto { display: inline-block; padding-top: 1px; height: auto; }
.wl-inline-wide { display: inline-block; width: 85%; height: auto; }
.wl-item-min    { min-height: 20px; }
.wl-label-offset { height: 30px; line-height: 30px; text-align: left; margin-left: 11px; }

/* =============================================
   ManageProfile/Index — section-specific classes
   ============================================= */
.mp-linked-accounts-scroll { height: 531px; overflow: hidden; }

/* =============================================
   NewFile/Index — section-specific classes
   ============================================= */
.nf-section-padding { padding: 15px 0 10px 60px; }
.nf-content-wrap    { padding: 0 15px 0 0; }
.nf-content-body    { padding: 10px 15px; }
.nf-center-pad      { padding: 0 15px 15px 0; text-align: center; }
.nf-min-height      { min-height: 600px; }

/* =============================================
   LawyerConnectHeader — section-specific classes
   ============================================= */
.header-notification-scroll { height: 300px; overflow: hidden; }
.header-notification-divider { border-top: 2px solid #f9f9f9; margin: 3px 20px; }
.header-notification-row    { align-items: center; justify-content: space-between; }

/* =============================================
   Sidebar
   ============================================= */
.sidebar-no-margin { padding: 0; margin: 0; }

/* =============================================
   WebhookSubscription — section-specific classes
   ============================================= */
.webhook-col-narrow  { width: 10px; }
.webhook-col-60      { width: 60px; text-align: center; }
.webhook-col-120     { width: 120px; }
.webhook-btn-100     { width: 100px; }

/* =============================================
   Profile — section-specific classes
   ============================================= */
.profile-picture-scroll { height: 350px; }
.profile-toggle-label   { height: 30px; line-height: 30px; text-align: left; margin-left: 11px; }

/* =============================================
   Chat — section-specific classes
   ============================================= */
.chat-friend-label   { float: left; }
.chat-info-padding   { margin: 5px; padding-right: 25px; }

/* =============================================
   Notifications/Users — section-specific classes
   ============================================= */
.notifications-margin { margin-bottom: 0; margin-top: 15px; }

/* =============================================
   Payment — section-specific classes
   ============================================= */
.payment-icon-lg { font-size: 5rem; }

/* =============================================
   Settings — general helpers
   ============================================= */
.settings-inset-top { padding: 15px 0 10px 60px; }
.settings-row-pad   { padding: 0 20px 15px 20px; font-size: 14px; }

/* =============================================
   DashboardOLD — section-specific classes
   ============================================= */
.old-dash-inline-top { display: inline-block; margin-top: 120px; }
.old-dash-overlay    { position: absolute; text-align: center; z-index: 999; }

/* =============================================
   Account/SignInWidget — section-specific classes
   ============================================= */
.signin-signup-row { margin-bottom: 10%; margin-top: 30px; }

/* =============================================
   Inactivity modal
   ============================================= */
.inactivity-badge { font-size: 1.1em; }

/* =============================================
   AdvanceSearch / FileControl
   ============================================= */
.adv-label-sm { font-size: 14px; font-weight: 420; margin-right: 4px; }

/* =============================================
   Additional utility classes (second-pass)
   ============================================= */
.w-23px  { width: 23px; }
.w-65    { width: 65%; }
.w-76    { width: 76%; }
.w-85    { width: 85%; }
.w-57    { width: 57%; }
.w-220px { width: 220px; }
.h-200   { height: 200px; }
.h-260   { height: 260px; }
.min-h-70 { min-height: 70px; }
.mt-30   { margin-top: 30px; }
.ml-10   { margin-left: 10px; }
.text-success-dark       { color: #2b9348 !important; }
.w-100-h-500             { width: 100%; height: 500px; }
.h-200-full              { height: 200px; width: 100%; }
.chart-responsive        { min-height: 200px; height: auto; width: 100%; }
.d-inline-block-center   { display: inline-block; text-align: center; }
.pt-14-imp               { padding-top: 14px !important; }
.header-progressbar-bg   { background: #274074; float: right; width: 100%; padding-left: 0; }
.float-left-auto         { float: left; height: auto; }
.online-status-dot       { padding: 4px; height: 5px; border-radius: 5px; background: mediumspringgreen; display: inline-block; border: 1px solid mediumspringgreen; }
.overflow-wrap-break     { overflow-wrap: break-word; }
.w-100px-text-start      { width: 100px; text-align: start; }
.dropdown-menu-abs       { position: absolute; will-change: transform; top: 0; left: 0; transform: translate3d(-217px, 33px, 0px); }
/* =============================================
   Third-pass — remaining replacements
   ============================================= */
.adv-section-header   { margin-top: -20px; padding: 15px; }
.adv-section-body     { min-height: 600px; padding: 30px 40px; }
.adv-btn-height       { height: 40px; line-height: 40px; }
.w-250px-important    { width: 250px !important; }
.progressbar-inactivity { min-width: 15px; width: 65%; }
.counter-cell-pad     { padding: 0 5px; }
.min-h-160-important  { min-height: 160px !important; }
.mt-6                 { margin-top: 6px; }
.mt-8                 { margin-top: 8px; }
.delete-row-icon      { font-size: 28px; color: #e50000; line-height: 60px; }
.add-row-icon         { font-size: 28px; color: dodgerblue; line-height: 60px; }
.border-ddd-important { border: 1px solid #ddd !important; }
.contact-info-text    { color: dimgrey; font-size: 12px; text-transform: lowercase; }
.h-30-lh-30          { height: 30px; line-height: 30px; }
.notif-icon-col       { width: 50px; text-align: start; vertical-align: middle; }
.notif-status-col     { width: 50px; text-align: center; }
/* Dynamic colour classes — set via data attribute + JS, fallback kept here */
.stage-dot, .stage-bar { border-color: var(--stage-colour); background-color: var(--stage-colour); }
.counter-dot { color: var(--stage-colour); background-color: currentColor; }
.counter-border { border: 4px solid var(--stage-colour); }
/* =============================================================
   ABP UI CSP-COMPLIANT SPINNER & OVERLAY
   Added: 2025 — CSP security hardening (branch: zubair/LC_CSP_Vul_fix)

   WHY THESE CLASSES EXIST:
   The default ABP implementation uses spin.js (via abp.spin.js) and
   jQuery BlockUI (via abp.blockUI.js). Both libraries apply inline styles
   directly to DOM elements via JavaScript — which violates CSP style-src
   when 'unsafe-inline' is not present. These CSS classes provide the
   visual equivalents so abp-ui-csp-override.js can use class toggling
   instead of inline style manipulation.

   RELATED FILE: wwwroot/js/abp-ui-csp-override.js
   ============================================================= */

/* -- Page-level blocking overlay (replaces $.blockUI full-page call) -- */
.abp-csp-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(170, 170, 170, 0.3);
    cursor: wait;
    z-index: 9998;
}

/* -- Element-level overlay (replaces $(elm).block() call) -- */
.abp-csp-el-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(170, 170, 170, 0.3);
    cursor: wait;
    z-index: 9998;
}

/* -- Element must be position:relative to contain the overlay -- */
.abp-csp-busy-el {
    position: relative;
}

/* -- Page-level spinner: centered fixed circle (replaces spin.js on body) -- */
.abp-csp-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    margin-left: -24px;
    z-index: 9999;
}

.abp-csp-spinner::after {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 5px solid rgba(0, 0, 0, 0.15);
    border-top-color: rgba(0, 0, 0, 0.55);
    animation: abp-csp-spin 0.75s linear infinite;
}

/* -- Inner element spinner (replaces spin.js on .abp-busy-indicator child) -- */
.abp-csp-inner-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    z-index: 9999;
}

.abp-csp-inner-spinner::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: rgba(0, 0, 0, 0.55);
    animation: abp-csp-spin 0.75s linear infinite;
}

/* -- Keyframe animation (no inline styles — fully CSP-safe) -- */
@keyframes abp-csp-spin {
    to { transform: rotate(360deg); }
}
/* =============================================================
   SweetAlert2 CSP hidden state
   Added: 2025 — CSP security hardening (branch: zubair/LC_CSP_Vul_fix)

   WHY: SweetAlert2 calls container.setAttribute('style','display:none !important')
        to hide its root container. The setAttribute call is intercepted by
        abp-ui-csp-override.js (Section 5) and redirected to this CSS class
        so no inline style attribute is ever written to the DOM.
   ============================================================= */
.swal2-csp-hidden {
    display: none !important;
}
/* Account/Login page - replaced inline styles (CSP hardening zubair/LC_CSP_Vul_fix) */
.login-hidden-frame { width: 0; height: 0; overflow: hidden; }
.login-logo-img { margin-bottom: 50px; }
.login-signup-link { color: #FFFFFF; }
.text-white-important { color: white !important; }

/* SignInWidget.cshtml - moved from inline <style> block (CSP hardening) */
.menu-header-color,
.menu-header-color a {
    color: white;
    text-shadow: none;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
}

/* Login.cshtml L422 - replaced style="width:0; height:0; overflow:hidden" */
.csp-w-0-h-0-ovf-hidden {
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Header language dropdown toggle - padding-top override
   li.dropdown-language a in _Layout.css uses padding-top:25px !important with higher specificity
   (element+class) than .pt-14-imp alone. This compound selector wins by being more specific. 
   Replaced: style="padding-top: 14px !important" removed for CSP hardening. */
li.dropdown-language > a.dropdown-toggle {
    padding-top: 14px !important;
}