/* ============================================================================
   Inspection Heatmap (QEN-8704 frontend refresh POC)
   --------------------------------------------------------------------------
   Scope: body.page-inspection-heatmap (master class added in Default.master.cs)
   ASCX:  Q88.WebRoot/DesktopModules/Q88/InspectionHeatMap.ascx
   Figma: oM4wJDLxiHlaKMCy6GvTXs, node 425:12468
          docs/figma/inspection-heatmap/figma.png

   Token sources (get_variable_defs for the Figma node, NOT project memory):
     --base/background  #ffffff   card bg
     --base/foreground  #0f172a   primary text
     --base/muted-fg    #475569   secondary text (column headers, select)
     --base/muted       #f1f5f9   tabs container bg, table header row bg
     --base/border      #e2e8f0   borders
     --base/primary     #0d9488   link button text (teal-600 — NOT Phase 3 #00B8D4)
     text-black literal #000000   COVID-19 row label
   ============================================================================ */

/* ---------------------------------------------------------------------------
   §1. ContentPane release — needed because we're applying card chrome to
   .ihm-card (a non-`.q88-card` class). Without this, the ASP.NET ContentPane
   chain shrink-wraps and the explicit width on .ihm-card doesn't visually inset.
   See [csproj-content-include-deploy-trap.md] / Phase 2 release pattern.
   --------------------------------------------------------------------------- */
body.page-inspection-heatmap .ContentPane,
body.page-inspection-heatmap .ContentPaneBody,
body.page-inspection-heatmap .MainTableContent {
    width: 100% !important;
    max-width: none !important;
}

/* The inner TD that holds the page content (sibling of an empty TD pair) */
body.page-inspection-heatmap td.ContentPaneBody > table {
    width: 100%;
    border-collapse: collapse;
}

/* Hide the legacy stray <br> separators that the old ASCX used between sections */
body.page-inspection-heatmap td.ContentPaneBody > table > tbody > tr#ctl00_trContentRow > td > br {
    display: none;
}

/* ---------------------------------------------------------------------------
   §2. Card chrome — Figma 425:12473 (Card 📍)
   width 1584, padding 24, rounded-xl(12), border 1px #e2e8f0, shadow-sm,
   gap-24 between sections inside.

   Total horizontal margin: 24+24 = 48px equals Figma's left+right gutter
   (card x=48 inside Frame 3, which has implicit right gutter 48 since the
   frame is 1680 - 1584 = 96 wide gutter / 2).
   --------------------------------------------------------------------------- */
body.page-inspection-heatmap .ihm-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    /* shadow-sm = two stacked drop-shadows per Figma get_variable_defs */
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px -1px rgba(0, 0, 0, 0.1);
    padding: 24px;
    margin: 24px;
    width: calc(100% - 48px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: visible;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #0f172a;
}

/* ---------------------------------------------------------------------------
   §3. Title — Figma 425:12480 "Inspection Heatmap"
   Inter Semi-Bold (600) 18px / leading-none, color #0f172a.
   --------------------------------------------------------------------------- */
body.page-inspection-heatmap .ihm-title {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    color: #0f172a;
    letter-spacing: 0;
    /* override legacy ContentPaneBody text-align: -webkit-center inheritance */
    text-align: left;
}

/* Same override on every flex child of .ihm-card so the legacy TD's
   inherited text-align: -webkit-center doesn't center their content. */
body.page-inspection-heatmap .ihm-card > * {
    text-align: left;
}

/* ---------------------------------------------------------------------------
   §4. COVID-19 row — Figma 425:12782 (Frame 46)
   "COVID-19 port restrictions" label (Inter SemiBold 14, black) +
   4 ghost link buttons (Inter Medium 14, color #0d9488, transparent bg,
   rounded-md, padding 8 16). gap-36 between label and button group.
   --------------------------------------------------------------------------- */
body.page-inspection-heatmap .ihm-covid-row {
    display: flex;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
}

body.page-inspection-heatmap .ihm-covid-label {
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: #000000;
    white-space: nowrap;
}

body.page-inspection-heatmap .ihm-link-group {
    display: flex;
    align-items: center;
    gap: 0;
}

body.page-inspection-heatmap .ihm-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 8px 16px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-link);
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 120ms ease;
}

body.page-inspection-heatmap .ihm-link:hover,
body.page-inspection-heatmap .ihm-link:focus-visible {
    background-color: rgba(var(--primary-tint), 0.08);
    text-decoration: none;
    color: var(--text-link);
}

body.page-inspection-heatmap .ihm-link:focus-visible {
    outline: 2px solid rgba(var(--primary-tint), 0.4);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   §5. Map controls row — Figma 425:13025 (Frame 47)
   Tabs (Clusters/Heat Map) on the left + 2 checkbox-radios on the right.
   Total width: 584. gap between tabs and radios computed implicitly.
   --------------------------------------------------------------------------- */
body.page-inspection-heatmap .ihm-controls-row {
    width: 100%;
}

body.page-inspection-heatmap .ihm-controls-wrapper {
    display: flex !important;       /* override inline "display: none" once JS init runs (it sets to "block", we override to flex) */
    align-items: center;
    gap: 24px;
    margin: 0 !important;            /* override legacy margin-bottom:5px */
}

/* ---------------------------------------------------------------------------
   §5.1 Tabs (Clusters / Heat Map) — Figma 425:12806
   w-301 h-36, bg #f1f5f9 muted, rounded-lg(10), padding 4 internal.
   Active tab: bg white, drop-shadow-sm.
   We're styling the existing <button class="mapTypeButton"> elements that
   already have the legacy ".mapTypeButton" CSS in the ASCX <style> block.
   Need higher specificity to win.
   --------------------------------------------------------------------------- */
body.page-inspection-heatmap .ihm-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background-color: var(--surface-muted);
    border-radius: 10px;
    padding: 4px;
    box-sizing: border-box;
    /* Width 301 minus the third (SHOW GRID) button which we relocate below */
    /* Width is auto-computed since we use flex children with explicit widths */
}

body.page-inspection-heatmap .ihm-tabs .ihm-tab {
    /* reset legacy .mapTypeButton */
    appearance: none;
    background-color: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    padding: 4px 8px;
    height: 28px;
    min-width: 140px;
    box-sizing: border-box;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

body.page-inspection-heatmap .ihm-tabs .ihm-tab:not(.ihm-tab--active):hover {
    background-color: rgba(var(--primary-tint), 0.08);
    color: #1e293b;
}

body.page-inspection-heatmap .ihm-tabs .ihm-tab.ihm-tab--active,
body.page-inspection-heatmap .ihm-tabs .ihm-tab[aria-selected="true"] {
    /* Match the shared segmented switch (HomeDashboard Dashboard/Classic toggle):
       teal-filled active segment with white text, not a white pill. */
    background-color: var(--button-primary-bg, #0d9488);
    color: var(--button-primary-text, #ffffff);
    border-color: transparent; /* keep stable 1px border to prevent layout shift */
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

/* The 3rd button (legacy SHOW GRID toggle) — relocate to a visible-but-not-in-tabs
   position OR hide entirely. Figma replaces it with 2 checkboxes. Hide it. */
body.page-inspection-heatmap .ihm-tabs .ihm-legacy-view-toggle {
    display: none !important;
}

/* Capitalize the legacy ALL-CAPS button labels to match Figma "Clusters / Heat Map" */
body.page-inspection-heatmap .ihm-tabs .ihm-tab {
    text-transform: none;       /* keep buttons in DOM but visually presentable */
}

/* ---------------------------------------------------------------------------
   §5.2 Radio-look checkboxes — Figma 425:12836 + 425:16287
   16×16 circle, border 1 #e2e8f0, rounded-full. Label Inter Medium 14, #0f172a.
   These are <input type="checkbox"> in our DOM (independent toggles) styled as
   radio-look.
   --------------------------------------------------------------------------- */
body.page-inspection-heatmap .ihm-radios {
    display: inline-flex;
    align-items: center;
    gap: 24px;
}

body.page-inspection-heatmap .ihm-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

body.page-inspection-heatmap .ihm-radio input[type="checkbox"] {
    /* hidden but accessible — the .ihm-radio-mark provides the visible chrome */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.page-inspection-heatmap .ihm-radio-mark {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    /* Square (checkbox), not round — Show Grid / Hide the map are independent
       toggles, not a mutually-exclusive radio group. */
    border-radius: 4px;
    border: 1px solid var(--border-default);
    background-color: #ffffff;
    position: relative;
    flex-shrink: 0;
    transition: border-color 120ms ease, background-color 120ms ease;
}

body.page-inspection-heatmap .ihm-radio input[type="checkbox"]:checked + .ihm-radio-mark {
    border-color: var(--primary);
    background-color: var(--primary);
}

/* Checkmark when checked — white tick on the filled teal box. */
body.page-inspection-heatmap .ihm-radio input[type="checkbox"]:checked + .ihm-radio-mark::after {
    content: "";
    position: absolute;
    top: 46%;
    left: 50%;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -55%) rotate(45deg);
}

body.page-inspection-heatmap .ihm-radio input[type="checkbox"]:focus-visible + .ihm-radio-mark {
    outline: 2px solid rgba(var(--primary-tint), 0.4);
    outline-offset: 2px;
}

body.page-inspection-heatmap .ihm-radio-label {
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: var(--text-primary);
}

/* ---------------------------------------------------------------------------
   §6. Map container — Figma 425:13027 (Frame 48)
   1536×462.94 with a screenshot. Our leaflet map is 500px tall.
   Add a 1px border + radius so the leaflet tiles don't bleed to the card edge.
   --------------------------------------------------------------------------- */
body.page-inspection-heatmap #inspectionHeatMap.ihm-map {
    height: 462px !important;       /* match Figma 462.94 */
    width: 100% !important;
    min-width: 0 !important;          /* drop legacy min-width:500px */
    margin: 0 !important;             /* card's flex-gap handles spacing */
    border: 1px solid var(--border-default);
    border-radius: 8px;
    overflow: hidden;
}

/* When the map is hidden via the "Hide the map" checkbox, drop the gap row */
body.page-inspection-heatmap #inspectionHeatMap.ihm-map[style*="display: none"] {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   §7. Grid wrapper (ModuleTemplateV2) — restyle the legacy "Heat Map Data:"
   title bar to match Figma's Title Bar (425:14572):
       "Inspections" title (Inter 600 16/24) + 3 Selects + Search + Ellipsis.
   The grid body itself is restyled by grid.css (page-grid co-class).
   --------------------------------------------------------------------------- */
body.page-inspection-heatmap #gridWrapper {
    margin: 0 !important;
    width: 100%;
}

body.page-inspection-heatmap #gridWrapper .modV2 {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

/* Kill the ModuleTemplateV2 outer chrome inside our card */
body.page-inspection-heatmap #gridWrapper .modV2 > table {
    border: 0;
    background: transparent;
    margin: 0;
    width: 100%;
}

/* Title bar row — the .modV2TitleContainer at the top */
body.page-inspection-heatmap .modV2TitleContainer {
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 24px 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px;
    height: auto !important;
}

body.page-inspection-heatmap .modV2Title {
    /* The "Heat Map Data:" cell */
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #0f172a !important;
    text-transform: none !important;
    white-space: nowrap;
}

/* Inner table inside the title cell — flatten it */
body.page-inspection-heatmap .modV2Title > table,
body.page-inspection-heatmap .modV2TitleContainer table {
    border: 0;
    background: transparent;
    border-collapse: collapse;
}

body.page-inspection-heatmap .modV2TitleContainer td {
    padding: 0;
    background: transparent;
    border: 0;
}

/* The GridViewSelector + GridSearch + custom-columns + kebab — these live in
   <titleright> which renders as the right cluster of the title container.
   Match Figma's: 3 selects (~173 each) + 285 search + kebab 24. */
body.page-inspection-heatmap .modV2TRight,
body.page-inspection-heatmap [class*="modV2TRight"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* The GridViewSelector dropdown — restyle to look like Figma's Select */
body.page-inspection-heatmap .modV2TRight-FleetVessel select,
body.page-inspection-heatmap .ihm-controls-row select,
body.page-inspection-heatmap .modV2TitleContainer select {
    appearance: none !important;
    -webkit-appearance: none !important;
    height: 32px !important;
    /* Vertical padding trimmed 8->4: at height:32px with box-sizing:border-box,
       8/8 padding + 1/1 border left only 14px of content for a 20px line-height,
       clipping the option text. 4/4 gives 22px — the line clears. */
    padding: 4px 32px 4px 12px !important;
    box-sizing: border-box !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 16px 16px !important;
    font-family: inherit;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #475569 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    min-width: 173px;
}

body.page-inspection-heatmap .modV2TitleContainer select:focus {
    outline: 2px solid rgba(var(--primary-tint), 0.4) !important;
    outline-offset: -1px !important;
}

/* GridSearch text input — match Figma's Search InputGroup */
body.page-inspection-heatmap .modV2TitleContainer input[type="text"],
body.page-inspection-heatmap .modV2TitleContainer input[type="search"] {
    height: 32px !important;
    padding: 8px 12px 8px 36px !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 16px 16px !important;
    font-family: inherit;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary) !important;
    box-sizing: border-box !important;
    width: 285px;
    max-width: 100%;
}

body.page-inspection-heatmap .modV2TitleContainer input[type="text"]::placeholder,
body.page-inspection-heatmap .modV2TitleContainer input[type="search"]::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

/* PopupMenu kebab — Figma uses Lucide EllipsisVertical 24×24, color #0f172a.
   The legacy button uses .Img-Std-Options (3-dot icon, vertical). Restyle. */
body.page-inspection-heatmap #ctl00_cphMiddle_ctl00_m_popMenuActions_lbPopupMenu,
body.page-inspection-heatmap .modV2TitleContainer [class*="Img-Std-Options"] {
    width: 24px !important;
    height: 32px !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 24px 24px !important;
    border: 0 !important;
    cursor: pointer !important;
    padding: 0 !important;
    color: transparent !important;
}

/* ---------------------------------------------------------------------------
   §8. Grid body (DevExpress ASPxGridView inside <uc:GridView>) — Figma 425:16000
   Header row bg #f1f5f9, h-48, text-sm/medium/#475569.
   Data row bg white, h-42, border-b #e2e8f0, text #0f172a.
   Cell padding-x 16.

   grid.css already styles the dx-data-row chrome under .page-grid. We layer
   page-specific tweaks here to match Figma exactly.
   --------------------------------------------------------------------------- */
body.page-inspection-heatmap .dxgvHeader,
body.page-inspection-heatmap .dxgvHeader > table > tbody > tr > td {
    height: 48px !important;
    background-color: var(--surface-muted) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default) !important;
}

body.page-inspection-heatmap .dxgvHeader td.dxgvHeader,
body.page-inspection-heatmap td.dxgvHeader {
    padding: 0 16px !important;
    font-family: inherit;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-muted) !important;
    background-color: var(--surface-muted) !important;
}

/* The header text often lives in an inner <a> for sortable columns —
   probe the deepest text-bearing element (per skill checklist text-property
   probe depth rule). */
body.page-inspection-heatmap td.dxgvHeader a,
body.page-inspection-heatmap .dxgvHeader a {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-decoration: none !important;
}

/* Data rows */
body.page-inspection-heatmap .dxgvDataRow > td,
body.page-inspection-heatmap tr.dxgvDataRow > td {
    height: 42px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default) !important;
    background-color: #ffffff !important;
    font-family: inherit;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary) !important;
    vertical-align: middle !important;
}

body.page-inspection-heatmap .dxgvDataRowAlt > td,
body.page-inspection-heatmap tr.dxgvDataRowAlt > td {
    background-color: #ffffff !important;
}

/* The grid root container — bump specificity to beat grid.css
   "body.page-grid .dxgvControl.dxgv { border: 0 !important }" (0,0,3,1).
   Use longhand border-* instead of shorthand `border:` so the CSS shorthand+!important
   parser trap from [css-shorthand-var-important-parser-trap.md] doesn't strip the
   !important from neighbouring declarations. */
body.page-inspection-heatmap.page-grid .dxgvControl.dxgv {
    border-top: 1px solid var(--border-default) !important;
    border-right: 1px solid var(--border-default) !important;
    border-bottom: 1px solid var(--border-default) !important;
    border-left: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    min-width: 0 !important;   /* override GridWhiteout.css `min-width: 1100px` */
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   §9. Cleanup — hide the legacy ASP.NET "naming-container" stray nodes that
   would otherwise push the layout.
   --------------------------------------------------------------------------- */
body.page-inspection-heatmap #ctl00_trAlertRow:not(:has(.jsAlertBox:not(:empty))) {
    display: none;
}

/* Map the data-tab="heatmap" tab activation via JS-less :focus / inline class.
   The active-tab toggle is currently driven by .ihm-tab--active in markup.
   To wire it up to onMarkersButtonClicked/onHeatMapButtonClicked properly,
   add JS below. We rely on inline class for the first paint; JS swap on click. */

/* ---------------------------------------------------------------------------
   §10. Print / responsive notes
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    body.page-inspection-heatmap .ihm-controls-wrapper {
        flex-wrap: wrap;
        gap: 16px;
    }
    body.page-inspection-heatmap .modV2TitleContainer {
        flex-wrap: wrap !important;
    }
}