/*
Theme Name: Execoore Child
Theme URI: http://themes.framework-y.com/execoore/
Description: Execoore Child Theme
Author: Schiocco
Author URI: http://schiocco.com/
Template: execoore
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: execoore
*/

.hc-cmp-tab .active h3 {
    padding-bottom: 0 !important;
}

/* ============================================================
   Portal nav: iPad portrait / narrow-laptop overlap fix
   The execoore-navigation-styles inline block has a 994px mobile
   breakpoint that hides the Dashboard/Vendors/Logout text labels.
   Between 995px and ~1240px the property selector (address + PM
   name + company + risk badge) plus three full-text links don't
   fit on one row and the last two links collide. Collapse the
   portal links to icon-only in that range.
   ============================================================ */
@media (min-width: 995px) and (max-width: 1240px) {
    #nav-logged-in .header-property-nav .portal-link .portal-link-text,
    .nav-logged-in .header-property-nav .portal-link .portal-link-text {
        display: none !important;
    }

    #nav-logged-in .header-property-nav .portal-link,
    .nav-logged-in .header-property-nav .portal-link {
        padding: 8px 12px !important;
        min-width: 40px !important;
        justify-content: center !important;
    }

    #nav-logged-in .header-property-nav .property-trigger,
    .nav-logged-in .header-property-nav .property-trigger {
        min-width: 180px;
    }

    /* The links are icon-only in this range, so the absolute logout needs far less
       reserved space than the 140px the full-width button claims. */
    #nav-logged-in .header-property-nav,
    .nav-logged-in .header-property-nav {
        padding-right: 70px;
    }
}

/* ============================================================
   BI panel open: squeeze the host header so it doesn't collide
   with the 400px chat panel. The theme's own breakpoints fire
   on viewport width and don't realize the body content area has
   been pushed; these rules use body.bi-panel-open as the hook.

   Threshold: viewport <= 1599px means body content <= ~1199px
   when the panel is open — tight enough that the full-text nav
   and nowrap meta bar will collide. Above 1600px, the body is
   1200px+ even with the panel open and the default layout is fine.
   ============================================================ */
@media (max-width: 1599px) {
    /* Collapse portal links to icon-only when BI panel is open */
    body.bi-panel-open #nav-logged-in .header-property-nav .portal-link .portal-link-text,
    body.bi-panel-open .nav-logged-in .header-property-nav .portal-link .portal-link-text {
        display: none !important;
    }
    body.bi-panel-open #nav-logged-in .header-property-nav .portal-link,
    body.bi-panel-open .nav-logged-in .header-property-nav .portal-link {
        padding: 8px 12px !important;
        min-width: 40px !important;
        justify-content: center !important;
    }
    /* Constrain the property selector trigger so it can't push the icons off
       the right edge. Truncate the contact name with ellipsis if needed. */
    body.bi-panel-open #nav-logged-in .header-property-nav .property-trigger,
    body.bi-panel-open .nav-logged-in .header-property-nav .property-trigger {
        min-width: 0;
        max-width: 360px;
    }
    body.bi-panel-open .header-property-nav .property-trigger .property-name-text,
    body.bi-panel-open .header-property-nav .property-trigger .contact-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    /* Property meta bar wraps onto multiple rows instead of overflowing
       its row when the BI panel takes 400px off the body width. */
    body.bi-panel-open #property-meta-bar {
        flex-wrap: wrap !important;
        row-gap: 10px;
        column-gap: 16px;
    }
    body.bi-panel-open #property-meta-bar .meta-item {
        flex: 1 1 calc(50% - 16px); /* two per row at this width */
        min-width: 0;
    }
    body.bi-panel-open #property-meta-bar .meta-item .meta-value {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Tighter squeeze when both BI panel is open AND viewport is iPad-class.
   Two-per-row gets cramped at iPad widths (1180px viewport - 400px panel
   = 780px content). Stack the meta items single-column so each gets the
   full available width. */
@media (max-width: 1279px) {
    body.bi-panel-open #property-meta-bar .meta-item {
        flex: 1 1 100%;
    }
}

/* iPad landscape / tablet landscape: switch the action-tile grid from 2 to
   3 columns so the 5 tiles fit in 2 rows instead of an awkward 2.5 rows.
   Range covers iPad (1024), iPad Air/Pro 11" (1180), and iPad Pro 12.9" (1366). */
@media (min-width: 1024px) and (max-width: 1366px) {
    .metro-tile-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* When BI panel is open and the viewport is below ~1500px, stack the
   individual property page's two main columns (Life Safety left / Inspection
   Report right) into a single column. With the panel taking 400px off the
   body width, each col-lg-6 ends up too narrow for its content — vendor
   names truncate, inspection titles wrap to 3 lines, and Add Interval /
   Cleanup buttons stack onto separate rows.
   Threshold: viewport ≤ 1499px → body content ≤ ~1099px → cols would be
   ≤ ~550px each. Above that, two columns still render comfortably. */
@media (max-width: 1499px) {
    body.bi-panel-open #column_Wq3hU,
    body.bi-panel-open #column_jX1kJ {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Hybrid-composer's main.js injects <button class="menu-close-btn">×</button>
   when window.innerWidth <= 994 for the slide-in mobile hamburger. Portal-
   utilitarian navs use a horizontal inline layout at every viewport and
   never slide in, so the button appears as a stray × around 992–993px.
   Hide it on portal-utilitarian navs at every width. */
nav.menu-portal-utilitarian .menu-close-btn,
nav#nav-logged-in.menu-portal-utilitarian .menu-close-btn,
nav.nav-logged-in.menu-portal-utilitarian .menu-close-btn {
    display: none !important;
}

/* =============================================================
   PAGE LOADER — branded
   =============================================================
   Hybrid Composer emits <div id="preloader"> from hc_header_engine() on every
   page it renders, and css/style.css fills it with a rotating #379cf4 arc
   (media/loader.svg). That arc is a stock asset in a blue that appears nowhere
   in the brand, and it is the first thing anyone sees on a cold load.

   Overridden here rather than edited in place: hybrid-composer is a third-party
   plugin, and an edit to its stylesheet is one update away from silently
   reverting to the blue arc.

   `body > #preloader::before` outranks the plugin's `#preloader:before` on
   specificity (an element and an id, against an id alone), so this wins
   regardless of which stylesheet the browser loads first — the child theme and
   the plugin both enqueue at the default priority, and their order is not
   something to depend on.

   Sizing is restated in full because the plugin's is wrong and inherited
   otherwise: it declares a 15x15 box with -15px margins, while content: url()
   makes the pseudo-element a REPLACED element that takes the image's intrinsic
   40x40. The result is a spinner sitting a few pixels up and left of centre.
   Centring here is done with a transform, which does not care about the
   image's dimensions.

   Applies to both confirmedlifesafety.com and demo.confirmedlifesafety.com —
   they share this wp-content, so there is one loader, not two.
   ============================================================= */
body > #preloader::before {
    content: url(media/cls-loader.svg);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84px;
    height: 58px;
    margin: 0;                       /* clears the plugin's -15px offsets */
    transform: translate(-50%, -50%);
}

/* =============================================================
   PORTAL NAV CHROME — ported from production's Yellow Pencil layer
   =============================================================
   These seven rules exist on production only inside <style id="yellow-pencil">,
   which YellowPencil builds from the DATABASE (_wt_css post meta and the
   wt_*_css options). The demo has its own database, so it never had them, and
   nothing in the shared wp-content supplied them either.

   Their absence is not subtle: hybrid-composer writes the `logo-margin-top`
   setting onto the logo as an inline style, and `#nav-logged-in a img` is what
   cancels it. Without that reset the portal logo sits 25px low — 15px of
   uncancelled margin plus the 10px the brand anchor loses when
   `#nav-logged-in .container > div > a { height:50px }` does not apply.

   Ported here rather than recreated in the demo's database: this stylesheet is
   version-controlled and shared by both hosts, whereas the YellowPencil layer is
   editable-by-clicking and invisible to any check that reads files. Production
   already carries identical declarations from YellowPencil, so these change
   nothing there — they only make the demo stop depending on a table it does not
   have.

   NOTE: every selector below needs the nav to carry id="nav-logged-in". See the
   comment in hybrid-composer/nav.php — an earlier edit set it to "nav" for
   logged-in users, which switched off these rules AND the 34 #nav-logged-in
   rules in the theme. bin/check-portal-nav-id.php holds the two together.
   ============================================================= */
#nav-logged-in { margin-top: 0px; }
/* Bootstrap caps .container at 1140px above 1200px wide and the portal nav uses that
   container, so without this the header collapses to 1140 while the content runs to
   1600 and the two visibly disagree. 1600px is production's own value, so this is
   parity rather than a demo preference — which is why it belongs in this shared
   stylesheet and not in the demo-only one. */
#nav-logged-in .container { max-width: 1600px; }
#nav-logged-in .container { padding-top: 0px !important; padding-bottom: 0px !important; }
#nav-logged-in .container > div > a { height: 50px; }
#nav-logged-in a img { display: block !important; margin-top: 0px !important; min-width: 214px !important; }
#nav-logged-in a .logo-retina { margin-top: 0px !important; }
#nav-logged-in .container .menu-cnt .header-property-nav { max-width: 100% !important; }
#nav-logged-in .container .menu-cnt .header-property-nav .portal-link {
  min-width: 4px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* =============================================================
   PORTAL FILTER BUTTONS — Expired / Expiring / Failed
   =============================================================
   The count used to be baked into the label as "Expired (5)". A number in
   parentheses reads as an aside, when it is the most scannable thing on the
   control — and being plain text there was nothing for CSS to style.
   client-portal-map now emits the count in its own <span>, so it can be a
   badge.

   These rules are NOT demo-scoped. The markup change is in the plugin, which
   both sites share, so styling only the demo would leave production rendering
   "Expired 5" with no badge and no parentheses — worse than before. Both sites
   get the same treatment.

   Colours match the meaning already used elsewhere in the portal: red for
   expired, amber for expiring, violet for a failed inspection (the same violet
   as the failure chip on the property card). The panel behind them is navy
   (#0B486B), so the buttons stay translucent and let the badge carry the
   colour.
   ============================================================= */
/* The buttons must NOT share the row out between them.
   Something upstream gives .filter-btn `flex: 1 1 0%`, so they divide the
   container equally: three counts render at 108px each, but when a portfolio has
   no failed inspections the remaining two stretch to 166px each and the control
   reads as a pair of oversized slabs. Sizing to content keeps a two-button row
   looking like the same control as a three-button one.
   flex-wrap lets a narrow panel wrap rather than squash them. */
.cpm-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cpm-filter-buttons .filter-btn { flex: 0 0 auto; }

.cpm-filter-buttons .filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cpm-filter-buttons .filter-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.42);
}
.cpm-filter-buttons .filter-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* tabular-nums so the pill does not change width as the count ticks 9 -> 10 */
.cpm-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.filter-btn[data-filter="expired"]  .cpm-filter-count { background: #E5534B; color: #fff; }
.filter-btn[data-filter="expiring"] .cpm-filter-count { background: #E8A33D; color: #0A2438; }
.filter-btn[data-filter="failed"]   .cpm-filter-count { background: #A78BFA; color: #1E1B4B; }

/* Active state tints the button with its own colour, so which filter is on is
   readable without relying on the badge alone. */
.filter-btn[data-filter="expired"].active  { background: rgba(229, 83, 75, 0.22);  border-color: #E5534B; }
.filter-btn[data-filter="expiring"].active { background: rgba(232, 163, 61, 0.22); border-color: #E8A33D; }
.filter-btn[data-filter="failed"].active   { background: rgba(167, 139, 250, 0.22); border-color: #A78BFA; }

@media (prefers-reduced-motion: reduce) {
  .cpm-filter-buttons .filter-btn { transition: none; }
}

/* ============================================================
   Narrow widths: reclaim the property selector's gutter.

   Hybrid Composer's own stylesheet (plugins/hybrid-composer/css/style.css,
   @media max-width 991.98px) gives .menu-cnt .property-selector `padding: 0 30px`.
   The nav around it ALREADY contributes `padding: 0 15px`, and the trigger inside
   has its own 15px — so on a phone the building name was indented ~45px from each
   edge and truncated to "Millwrig…" with the space sitting empty either side.

   Overridden here rather than edited there: that file is a plugin's, and a plugin
   update would silently restore the padding and the symptom with it. Higher
   specificity so load order does not decide the outcome.
   ============================================================ */
@media (max-width: 991.98px) {
    #nav-logged-in .menu-cnt .property-selector,
    .nav-logged-in .menu-cnt .property-selector,
    body .menu-cnt .property-selector {
        padding-left: 0;
        padding-right: 0;
    }
}