/* =============================================================================
   tenant-plus-chrome.css   (wwwroot/css/tenant-plus-chrome.css)
   -----------------------------------------------------------------------------
   Page-chrome adjustments that apply ONLY when a Tenant+ dashboard
   (LandlordDashboard / TenantDashboard) is mounted on the page.

   Load order: must come AFTER site.css AND tenant-portal.css so its
   selectors win on specificity ties. Mounted in _Layout.cshtml via:

       <link rel="stylesheet" href="~/css/tenant-plus-chrome.css"
             asp-append-version="true" />

   Detection: `body:has(.tp-root)` — every Tenant+ dashboard markup
   wraps in `<div class="tp-root tp-dashboard">`. The :has() selector
   is supported in every browser we target (Chrome 105+, Firefox 121+,
   Safari 15.4+).

   Three issues this file fixes:

   1. FLOATING-ENGAGEMENT (location / email / YouTube buttons on the
      left rail) — should appear ONLY before login on the consumer
      home page, NEVER on a Tenant+ dashboard where they overlap the
      sidebar nav. The a11y FAB at bottom-left is hidden for the same
      reason.

   2. HEADER DROPDOWN Z-INDEX — the .ikh-auth-menu (profile dropdown)
      and the Tenant+ "+" popover both anchor inside .header-strip,
      which has z-index:10. The Tenant+ topbar (Add Property / Invite
      Tenant) has z-index:50. So the dropdowns render BEHIND the
      topbar. Lifting .header-strip to z-index:200 when a Tenant+
      dashboard is on the page restores the expected stacking.

   3. PRODUCT-TOUR TRIGGER (the orange "?" glyph) — the consumer-site
      tour isn't relevant on a Tenant+ dashboard. We hide the existing
      #ikhTourTrigger and let tenant-plus-page-chrome.js swap in a
      compact placeholder help icon (life-preserver) that will be
      wired to a proper Tenant+ tour later.
   ============================================================================= */

/* ── 1. Hide floating engagement + a11y FAB on Tenant+ dashboards ──────── */
body:has(.tp-root) .floating-engagement,
body:has(.tp-root) .a11y-btn,
body:has(.tp-root) .floating-settings-wrapper {
    display: none !important;
}

/* ── 1b. Hide the consumer-site Melikhaya assistant on Tenant+ ──────────── */
/* The Melikhaya partial is already skipped server-side on /tenant-portal/*
   pages (see _Layout.cshtml). This is a belt-and-braces guard in case any
   build injects the widget via late JS — it must never show on a Tenant+
   dashboard. Covers the known container variants. */
body:has(.tp-root) #melikhaya,
body:has(.tp-root) .melikhaya,
body:has(.tp-root) .melikhaya-widget,
body:has(.tp-root) [id^="melikhaya"],
body:has(.tp-root) [class*="melikhaya"],
body:has(.tp-root) #ikhChatFab,
body:has(.tp-root) .ikh-chat-fab,
body:has(.tp-root) .sawubona-fab {
    display: none !important;
}

/* ── 2. Lift the header above the Tenant+ topbar ────────────────────────── */
body:has(.tp-root) .header-strip {
    z-index: 200 !important;
    position: relative;
}

body:has(.tp-root) .ikh-auth-menu,
body:has(.tp-root) .ikh-tenantplus-menu,
body:has(.tp-root) .rn-lang-panel {
    z-index: 1100 !important;
}

/* ── 3. Hide the consumer-site product-tour trigger on Tenant+ ─────────── */
body:has(.tp-root) #ikhTourTrigger,
body:has(.tp-root) .ikh-tour-trigger {
    display: none !important;
}

/* ── Placeholder Tenant+ help icon (COMPACT + RESPONSIVE) ──────────────── */
/* Sized to live alongside the bell/profile circles without dominating the
   header. 36×36 desktop, 32×32 below 1200px, 28×28 below 768px. Matches
   the visual weight of the existing header chrome icons. */

.ikh-tp-help-trigger {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(245, 130, 32, 0.28);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    cursor: pointer;
    color: #F58220;
    box-shadow: 0 2px 6px rgba(245, 130, 32, 0.08);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
    position: relative;
    /* Vertical-align with sibling header buttons */
    vertical-align: middle;
    /* Don't let it stretch on a flex parent */
    flex: 0 0 auto;
}

    .ikh-tp-help-trigger:hover {
        border-color: rgba(245, 130, 32, 0.55);
        box-shadow: 0 4px 12px rgba(245, 130, 32, 0.18);
        transform: translateY(-1px);
        background: #fff;
    }

    .ikh-tp-help-trigger:active {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(245, 130, 32, 0.18);
    }

    .ikh-tp-help-trigger:focus-visible {
        outline: 2px solid #F58220;
        outline-offset: 2px;
    }

    .ikh-tp-help-trigger > i {
        font-size: 1rem;
        line-height: 1;
        color: #F58220;
    }

/* Tooltip — small chip below the button on hover. Mirrors the
   notification-bell tooltip style so it feels at home in the header. */
.ikh-tp-help-trigger__tip {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    background: #1A1D20;
    color: #fff;
    font-size: 0.7rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1200;
}

.ikh-tp-help-trigger:hover .ikh-tp-help-trigger__tip,
.ikh-tp-help-trigger:focus-visible .ikh-tp-help-trigger__tip {
    opacity: 1;
}

/* ── Responsive sizing ─────────────────────────────────────────────────── */

/* Tablet — slightly tighter */
@media (max-width: 1199.98px) {
    .ikh-tp-help-trigger {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

        .ikh-tp-help-trigger > i {
            font-size: 0.95rem;
        }
}

/* On mobile (<992px) we hide the help button entirely — same behaviour as
   the consumer #ikhTourTrigger which wears `d-none d-lg-inline-flex`. Mobile
   header is already tight; help can ship via the burger menu later. */
@media (max-width: 991.98px) {
    .ikh-tp-help-trigger {
        display: none !important;
    }
}