/* Centered "quick view" overlay for CRM lead/enquiry detail (Actions >
   Detail/View) — same centering technique as .offcanvas-lead in
   css/deals-custom.css (see the comment there for why: inset + margin:auto
   instead of transform, opacity-based fade so Bootstrap's own transitionend
   detection still works, backdrop duration matched to this panel's so both
   fade in lockstep). Kept as its own class rather than reusing .offcanvas-lead
   because this holds the original two-column detail layout (a narrow info
   column + a wider tabbed-content column, .houzez-inquiry's own flex layout,
   unchanged from the page this replaces) rather than a compact form, so it
   needs to be considerably wider/taller. */
.crebook-detail-panel {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: auto !important;
    width: 960px !important;
    max-width: 94vw !important;
    height: fit-content !important;
    max-height: 92vh !important;
    border-left: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
    transform: none !important;
    opacity: 0;
    transition: opacity .25s ease !important;
    will-change: opacity;
}

.crebook-detail-panel.show,
.crebook-detail-panel.showing {
    opacity: 1;
}

/* .offcanvas-head's real padding/border/sticky-header treatment only exists
   scoped under .offcanvas-lead (see style-ltr.css ".offcanvas-lead
   .offcanvas-head") — this panel uses its own class instead (a wider fixed
   width than .offcanvas-lead's 500px), so without this it falls back to the
   bare, unscoped .offcanvas-head rule: no padding, no border, so the title
   and close button sit flush against the panel's edges with nothing
   separating the header from the body below. */
.crebook-detail-panel .offcanvas-head {
    padding: 20px 24px;
    border-bottom: 1px solid #dce0e0;
    position: sticky;
    top: 0;
    margin: 0;
    background: #fff;
    border-radius: 12px 12px 0 0;
    z-index: 1;
}

/* .close-btn defaults to a very light #eaecec (style-ltr.css), only
   darkening to #6b7280 on hover — meant to sit unobtrusively among a form's
   own fields, but here it's the only thing in the header besides the title,
   so it needs to already read clearly before the user hovers it. */
.crebook-detail-panel .close-btn {
    color: #374151;
    font-size: 18px;
}
.crebook-detail-panel .close-btn:hover {
    color: #111827;
}

/* The dashboard's actual page background is body { background-color: #f3f4f6 }
   (style-ltr.css) — .inquiry-detail/.inquiry-data are white cards designed to
   pop against that gray, and the active tab in .propertie-list gets a white
   background specifically so it reads as "selected" against that same gray
   showing through behind the tab row. This panel's body defaults to the
   offcanvas's own white background, so none of that contrast existed — every
   card blended into the panel and the tabs looked like plain text. Restoring
   the real page background here, instead of white, fixes all three at once. */
.crebook-detail-panel .offcanvas-body {
    overflow-y: auto;
    padding: 24px;
    background-color: #f3f4f6;
    border-radius: 0 0 12px 12px;
}

/* The theme's own .houzez-inquiry { flex-direction: column } breakpoint fires
   at a 991px *browser viewport* width, not this panel's own width — e.g. it
   can trigger simply because DevTools is docked and eating viewport space,
   even though the 960px-wide panel itself has plenty of room for both
   columns. Forcing row here makes the layout depend on the panel's own
   width instead, which is what actually matters for whether it fits. */
.crebook-detail-panel .houzez-inquiry {
    flex-direction: row !important;
}

@media (max-width: 767px) {
    .crebook-detail-panel {
        width: 96vw !important;
        max-width: 96vw !important;
    }

    /* Only below this size does the panel itself get too narrow for two
       columns (see the width override above) — genuinely stack here. */
    .crebook-detail-panel .houzez-inquiry {
        flex-direction: column !important;
    }
}