/* ============================================================================
   PR 7 - layout
   - .content-wrapper math (margin-left = sidebar, padding-top = header)
   - body.sidebar-collapsed shrinks the wrapper offset to icon-rail width
   - mobile: wrapper is full-width, sidebar is a drawer
   - .theme-transitioning: transient cross-fade applied only during the
     0.5s theme swap window so normal interactions stay snappy
   All scoped under body.theme-new so the legacy admin (flag off) is
   untouched.
   ============================================================================ */

/* Layout math.
   The fixed header is z-index 1030 - taller-than-padding content slides
   visually under it. To guarantee nothing renders behind the header,
   push the body itself down by header-height. Then .content adds its
   own padding for breathing room.
   The `body` padding doesn't affect the fixed-position sidebar/header
   (those are anchored to the viewport, not the body box). */
body.theme-new {
    /* Fixed header clearing: push body down by header height + small buffer to prevent overlap */
    padding-top: calc(var(--header-height) + 10px) !important;
}

body.theme-new #wrapper,
body.theme-new .content-wrapper {
    position: relative !important;
    margin-top: 0 !important;
    margin-left: var(--sidebar-width) !important;
    padding: 0 !important;
    min-height: calc(100vh - var(--header-height));
    background: var(--bg-body);
    transition: margin-left var(--transition-speed) ease;
}

body.theme-new #wrapper > .content,
body.theme-new .content-wrapper > .content {
    padding: 1.5rem 2rem 2rem !important;
    width: 100% !important;
    margin-top: 0 !important;
}

/* Ensure global notices or panels injected directly into #wrapper have breathing room */
body.theme-new #wrapper > .alert,
body.theme-new #wrapper > .panel_s,
body.theme-new #wrapper > .row,
body.theme-new #wrapper > div:not(.content):not(.wa-app):not(.contact-center-fullscreen) {
    margin-left: 2rem !important;
    margin-right: 2rem !important;
    margin-top: 1.5rem !important;
}

body.theme-new #wrapper > .alert:first-child,
body.theme-new #wrapper > .panel_s:first-child,
body.theme-new #wrapper > .row:first-child,
body.theme-new #wrapper > div:first-child:not(.content):not(.wa-app):not(.contact-center-fullscreen) {
    margin-top: 2.25rem !important;
}

body.theme-new.sidebar-collapsed #wrapper,
body.theme-new.sidebar-collapsed .content-wrapper {
    margin-left: var(--sidebar-collapsed-width) !important;
}

@media (max-width: 991.98px) {
    body.theme-new {
        padding-top: var(--header-height-mobile) !important;
    }
    body.theme-new #wrapper,
    body.theme-new .content-wrapper {
        margin-left: 0 !important;
        min-height: calc(100vh - var(--header-height-mobile));
    }
    body.theme-new #wrapper > .content,
    body.theme-new .content-wrapper > .content {
        padding: 1rem !important;
    }
    
    body.theme-new #wrapper > .alert,
    body.theme-new #wrapper > .panel_s,
    body.theme-new #wrapper > .row,
    body.theme-new #wrapper > div:not(.content):not(.wa-app):not(.contact-center-fullscreen) {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
        margin-top: 1rem !important;
    }
    
    body.theme-new #wrapper > .alert:first-child,
    body.theme-new #wrapper > .panel_s:first-child,
    body.theme-new #wrapper > .row:first-child,
    body.theme-new #wrapper > div:first-child:not(.content):not(.wa-app):not(.contact-center-fullscreen) {
        margin-top: 1rem !important;
    }
}

/* ============================================================================
   Full-page apps (contact center chat, OmniU chat, etc.) take over the
   whole viewport and render their own chrome. Perfex's fixed admin
   header + sidebar are already hidden on those pages, but our body
   `padding-top` + `#wrapper margin-left` (from above) still reserve
   room for them, leaving a dark strip at the top and pushing the
   chat below the viewport.

   The most defensive fix is to zero out the CSS variables themselves
   on those pages — any descendant rule using `var(--header-height)`
   or `var(--sidebar-width)` then evaluates to 0 without needing a
   per-property override. Detection: body class (.contactcenter.chatnew)
   OR a `.wa-app` / `.contact-center-fullscreen` child via `:has()`.
   ============================================================================ */
body.theme-new.contactcenter.chatnew,
body.theme-new.contactcenter.chatnew_module,
body.theme-new:has(.wa-app),
body.theme-new:has(.contact-center-fullscreen) {
    --header-height: 0px;
    --header-height-mobile: 0px;
    --sidebar-width: 0px;
    --sidebar-collapsed-width: 0px;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    height: 100vh !important;
}

/* Ensure headings and bold text in full-page modules inherit the module's 
   own theme colors instead of being forced to the global text-heading color. */
body.theme-new.contactcenter.chatnew h1, body.theme-new.contactcenter.chatnew h2,
body.theme-new.contactcenter.chatnew h3, body.theme-new.contactcenter.chatnew h4,
body.theme-new.contactcenter.chatnew h5, body.theme-new.contactcenter.chatnew h6,
body.theme-new:has(.wa-app) h1, body.theme-new:has(.wa-app) h2,
body.theme-new:has(.wa-app) h3, body.theme-new:has(.wa-app) h4,
body.theme-new:has(.wa-app) h5, body.theme-new:has(.wa-app) h6,
body.theme-new.contactcenter.chatnew b, body.theme-new.contactcenter.chatnew strong,
body.theme-new.contactcenter.chatnew .bold, body.theme-new.contactcenter.chatnew .font-medium,
body.theme-new.contactcenter.chatnew .font-semibold, body.theme-new.contactcenter.chatnew .font-bold,
body.theme-new:has(.wa-app) b, body.theme-new:has(.wa-app) strong,
body.theme-new:has(.wa-app) .bold, body.theme-new:has(.wa-app) .font-medium,
body.theme-new:has(.wa-app) .font-semibold, body.theme-new:has(.wa-app) .font-bold {
    color: inherit;
}

body.theme-new.contactcenter.chatnew #wrapper,
body.theme-new.contactcenter.chatnew .content-wrapper,
body.theme-new.contactcenter.chatnew_module #wrapper,
body.theme-new.contactcenter.chatnew_module .content-wrapper,
body.theme-new:has(.wa-app) #wrapper,
body.theme-new:has(.wa-app) .content-wrapper,
body.theme-new:has(.contact-center-fullscreen) #wrapper,
body.theme-new:has(.contact-center-fullscreen) .content-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    height: 100vh !important;
    background: transparent !important;
}

body.theme-new.contactcenter.chatnew #wrapper > .content,
body.theme-new.contactcenter.chatnew .content-wrapper > .content,
body.theme-new.contactcenter.chatnew_module #wrapper > .content,
body.theme-new.contactcenter.chatnew_module .content-wrapper > .content,
body.theme-new:has(.wa-app) #wrapper > .content,
body.theme-new:has(.wa-app) .content-wrapper > .content,
body.theme-new:has(.contact-center-fullscreen) #wrapper > .content,
body.theme-new:has(.contact-center-fullscreen) .content-wrapper > .content {
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
}

/* Hide the app chrome on those takeover pages so the chat / app fills
   the viewport edge-to-edge. */
body.theme-new.contactcenter.chatnew .app-header,
body.theme-new.contactcenter.chatnew .app-sidebar,
body.theme-new.contactcenter.chatnew_module .app-header,
body.theme-new.contactcenter.chatnew_module .app-sidebar,
body.theme-new:has(.wa-app) .app-header,
body.theme-new:has(.wa-app) .app-sidebar,
body.theme-new:has(.contact-center-fullscreen) .app-header,
body.theme-new:has(.contact-center-fullscreen) .app-sidebar {
    display: none !important;
}

/* Suppress the page-entrance stagger transitions on full-page apps —
   they'd otherwise momentarily push `.content` 6px down with a 160ms
   delay before the chat paints, which on a full-bleed app reads as a
   subtle "settle" jolt and (more importantly) leaves the dark body
   visible underneath for ~700ms after first paint. */
body.theme-new.contactcenter.chatnew #wrapper > .content,
body.theme-new.contactcenter.chatnew .content-wrapper > .content,
body.theme-new:has(.wa-app) #wrapper > .content,
body.theme-new:has(.wa-app) .content-wrapper > .content,
body.theme-new:has(.contact-center-fullscreen) #wrapper > .content,
body.theme-new:has(.contact-center-fullscreen) .content-wrapper > .content {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ============================================================================
   Theme cross-fade - applied only while the 0.5s swap is in progress so
   it doesn't slow down normal interactions (hover, focus, state changes).
   theme-toggle.js adds .theme-transitioning to <html>, flips data-theme,
   then removes the class after 550ms.
   ============================================================================ */
html.theme-transitioning,
html.theme-transitioning body,
html.theme-transitioning .app-header,
html.theme-transitioning .app-sidebar,
html.theme-transitioning .panel,
html.theme-transitioning .card,
html.theme-transitioning .content,
html.theme-transitioning .content-wrapper,
html.theme-transitioning .form-control,
html.theme-transitioning .btn,
html.theme-transitioning .dropdown-menu,
html.theme-transitioning .modal-content,
html.theme-transitioning .table,
html.theme-transitioning .label,
html.theme-transitioning .badge,
html.theme-transitioning a,
html.theme-transitioning p,
html.theme-transitioning span,
html.theme-transitioning h1, html.theme-transitioning h2, html.theme-transitioning h3,
html.theme-transitioning h4, html.theme-transitioning h5, html.theme-transitioning h6 {
    transition:
        background-color .5s ease,
        background       .5s ease,
        border-color     .5s ease,
        color            .5s ease,
        box-shadow       .5s ease,
        fill             .5s ease,
        stroke           .5s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    html.theme-transitioning * {
        transition: none !important;
    }
}

/* ============================================================================
   PR 7 PHASE F - polish pass (F.1 page stagger + F.5 loading bar)
   ============================================================================ */

/* F.1 — Page entrance stagger ------------------------------------------------
   On first paint, header / sidebar / content all start a touch transparent
   and slightly displaced. layout.js adds `.pp-mounted` to body on the second
   rAF tick which triggers these transitions back to the natural state. */
body.theme-new .app-header,
body.theme-new .app-sidebar,
body.theme-new #wrapper > .content {
    opacity: 0;
    transition:
        opacity 0.55s var(--ease-out-soft),
        transform 0.55s var(--ease-out-soft);
}
body.theme-new .app-header     { transform: translateY(-8px); }
body.theme-new .app-sidebar    { transform: translateX(-12px); }
body.theme-new #wrapper > .content { transform: translateY(6px); }

body.theme-new.pp-mounted .app-header,
body.theme-new.pp-mounted .app-sidebar,
body.theme-new.pp-mounted #wrapper > .content {
    opacity: 1;
    transform: none;
}
body.theme-new.pp-mounted .app-header           { transition-delay: 0ms; }
body.theme-new.pp-mounted .app-sidebar          { transition-delay: 80ms; }
body.theme-new.pp-mounted #wrapper > .content   { transition-delay: 160ms; }

/* F.5 — Top AJAX loading bar -------------------------------------------------
   2px green bar at the very top of the viewport (above the fixed header).
   The width is driven by layout.js's bindLoadingBar(). */
body.theme-new #pp-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 9999;
    pointer-events: none;
    background: transparent;
}

body.theme-new #pp-loading-bar .pp-loading-bar__fill {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        var(--primary-color) 0%,
        var(--primary-300) 50%,
        var(--primary-color) 100%);
    box-shadow: 0 0 8px var(--primary-glow);
    opacity: 1;
}

body.theme-new #pp-loading-bar.is-done .pp-loading-bar__fill {
    opacity: 0;
    transition: opacity 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
    body.theme-new .app-header,
    body.theme-new .app-sidebar,
    body.theme-new #wrapper > .content {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    body.theme-new #pp-loading-bar .pp-loading-bar__fill {
        transition: none !important;
    }
}