/* ==========================================================================
   Archive page — page-specific overrides layered on top of grid.css
   ----------------------------------------------------------------------------
   Scoped via `body.page-archive`. Shared card chrome (ModuleTemplateV2 frame,
   title rail, footer, primary CTA pill) comes from grid.css via the additional
   `body.page-grid` body class injected by Default.master.cs.

   Title-bar layout (mirrors InspectionListCustom.ascx):
     <Title> contains an inner <table> with:
       td.modV2Title           → title text (styled big/bold/Inter by grid.css)
       td.archive-filter-row   → group-by + filter dropdowns, inline
     <SubHeader> intentionally not used.

   Filter UX:
     Both dropdowns are AutoPostBack — selecting a group rebinds the second
     dropdown's items + clears the filter; selecting a value applies the
     filter immediately. The legacy "Show" LinkButton is preserved in markup
     (Panel DefaultButton + designer.cs reference), but hidden via CSS — the
     dropdowns now drive the filter directly, matching how Inspections /
     Inspectors / Observations re-render on filter change.

   Inner data grid:
     Archive uses a legacy `asp:DataGrid` (CssClass `sTbl`, header `trHdr`,
     inline-defined sticky helper `DataGridFixedHeader` declared in
     Archive.ascx) instead of DevExpress `ASPxGridView`, so the DX-specific
     grid selectors in grid.css (`tr.dxgvArm`, `.dxgvHeader_*`) don't reach
     the inner table. Rules below harmonise it with the refreshed chrome.
   ========================================================================== */

/* ----- Filter row inside title bar --------------------------------------- */
/* The body cascade font is Tahoma 12px (legacy default). The title cell
   already gets Inter via grid.css. Force the same Inter stack here so the
   filter row reads as one continuous chrome with the title. */
body.page-archive .archive-filter-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    color: var(--text-primary);
}

/* Native <select> chrome — matches Create Questionnaire (createQuestionnaire.css
   lines 295-360, Figma "Type=Input, State=Default"). Pixel-locked to that
   page's input rhythm so users moving between Archive ↔ Create see one
   visual language: 32px height, 1px #e2e8f0 border, 8px radius, 4/12 padding,
   appearance:none + inline SVG chevron at right 10px center. Focus glows
   teal (#0d9488) with the same 2px ring.

   `!important` is required throughout because:
   - MainWhiteout.css ships a global `body, input, select, td { font-family }`
     rule (Tahoma) that wins via cascade order otherwise.
   - Q88's legacy skin sets `appearance: auto` on <select> with class-level
     specificity that beats a plain element selector.
   Same discipline createQuestionnaire.css and grid.css use for DX overrides. */
body.page-archive .archive-filter-row select {
    margin: 0;
    height: 32px !important;
    min-height: 32px;
    padding: 4px 32px 4px 12px !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 20px;
    box-sizing: border-box;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    cursor: pointer;

    /* Kill the native chevron, paint our own — same SVG createQuestionnaire
       uses (chevron-down stroke #475569, 16x16, parked 10px from the right). */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px 16px !important;
}

/* IE-era pseudo for some legacy engines — kept for parity with the
   Create Questionnaire rule. Modern Edge/Chrome ignore it harmlessly. */
body.page-archive .archive-filter-row select::-ms-expand {
    display: none !important;
}

body.page-archive .archive-filter-row select:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.15) !important;
}

/* Hide the legacy "Show" trigger — the dropdowns auto-apply now. We keep
   the LinkButton in markup so the Panel.DefaultButton reference and
   Archive.ascx.designer.cs field stay valid; CSS removes it from the UI. */
body.page-archive .archive-show-fallback {
    display: none !important;
}

/* ----- Data grid (asp:DataGrid → table.sTbl) ----------------------------- */
/* Mirror the rhythm grid.css applies to ASPxGridView (`.dxgvHeader` /
   `.dxgvDataRow`): same font (--q88-grid-font, 14px / 20px line-height),
   same vertical padding (11px / 16px), same token palette. This is what
   makes the legacy DataGrid read as the *same* grid as Inspections /
   Observations / Inspectors visually, without rewriting the control. */
body.page-archive table.sTbl {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--q88-grid-fg);
    background: var(--q88-grid-card);
}

/* Header row — match `.dxgvHeader` chrome exactly: 14/600 type on a
   --q88-grid-muted (subtle gray) rail, fg color text, --q88-grid-border
   bottom rule. The muted bg is what visually separates the header from
   the white data rows on Inspections; using --q88-grid-card here loses
   that separation. The `!important` mirrors grid.css — MainWhiteout.css
   ships a table-cell font-family rule that wins via cascade order
   otherwise, and grid.css uses the same discipline. */
body.page-archive table.sTbl tr.trHdr td,
body.page-archive table.sTbl tr.trHdr th {
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    color: var(--q88-grid-fg) !important;
    background: var(--q88-grid-muted) !important;
    padding: 11px 16px !important;
    border-bottom: 1px solid var(--q88-grid-border) !important;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

/* Sticky-header helper declared inline in Archive.ascx — keep its
   `position: sticky` (from the inline <style>) and re-paint with the same
   --q88-grid-muted token so the sticky row blends with non-sticky header
   cells when the inner div scrolls. The inset shadow stands in for the
   bottom border (sticky cells lose the row-level border-bottom). */
body.page-archive table.sTbl .DataGridFixedHeader {
    background: var(--q88-grid-muted) !important;
    box-shadow: inset 0 -1px 0 var(--q88-grid-border) !important;
}

/* Body rows — mirror `.dxgvDataRow > td` exactly (11/16 padding, 14/20 type,
   400 weight, single-line ellipsis). Hover token matches DX rows.
   `text-align: left !important` overrides the inline `align="center"` /
   `align="right"` HTML attributes the legacy `<asp:BoundColumn ItemStyle
   HorizontalAlign="Center">` markup emits — without this, Created Date /
   Publish? values float center while their headers sit left. */
body.page-archive table.sTbl > tbody > tr:not(.trHdr) > td {
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    color: var(--q88-grid-fg) !important;
    background: var(--q88-grid-card) !important;
    padding: 11px 16px !important;
    border-bottom: 1px solid var(--q88-grid-border) !important;
    vertical-align: middle;
    text-align: left !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.page-archive table.sTbl > tbody > tr:not(.trHdr):hover > td {
    background: var(--q88-grid-row-hover) !important;
}
/* Last row — drop bottom border, same as grid.css does for DX rows. */
body.page-archive table.sTbl > tbody > tr:not(.trHdr):last-of-type > td {
    border-bottom: 0 !important;
}

/* Select column — first cell is the row checkbox. Center both the body
   cell and the header label so the checkbox sits under "Select" and
   doesn't drift left of the column edge. Mirrors the way grid.css
   re-centers the last column (edit pencil) on DX grids. */
body.page-archive table.sTbl tr.trHdr td:first-child,
body.page-archive table.sTbl tr.trHdr th:first-child,
body.page-archive table.sTbl > tbody > tr:not(.trHdr) > td:first-child {
    text-align: center !important;
}

/* Hyperlinks inside grid (Questionnaire column) — tokenized colour, no
   underline at rest, underline on hover (matches Inspections vessel-name
   link behaviour). Specificity raised over the legacy `a:link` cascade. */
body.page-archive table.sTbl a:link,
body.page-archive table.sTbl a:visited {
    color: var(--q88-grid-primary, var(--text-link));
    text-decoration: none;
    font-weight: 400;
}
body.page-archive table.sTbl a:hover {
    text-decoration: underline;
}

/* Sort-indicator chrome (existing inline classes Img-Sorted*) sits in the
   header link. Header anchors must read as plain text — same color in
   every state so hovering a sortable column doesn't flash a different
   colour. We pin :link / :visited / :hover / :active / :focus all to
   --q88-grid-fg with !important to beat the legacy MainWhiteout / portal
   `a:hover { color: ... }` rules that would otherwise repaint on hover.
   Cursor stays `pointer` so the column still reads as clickable. */
body.page-archive table.sTbl tr.trHdr a:link,
body.page-archive table.sTbl tr.trHdr a:visited,
body.page-archive table.sTbl tr.trHdr a:hover,
body.page-archive table.sTbl tr.trHdr a:active,
body.page-archive table.sTbl tr.trHdr a:focus {
    color: var(--q88-grid-fg) !important;
    text-decoration: none !important;
    font-weight: 600;
    cursor: pointer;
}

/* ----- Inner scroll container -------------------------------------------- */
/* Archive.ascx wraps the grid in <div style="height:480px; overflow:auto;...">
   Frame it as a card-internal scroll region with a subtle border that
   reads as the grid edge in both light and dark mode. */
body.page-archive div[style*="height: 480px"][style*="overflow: auto"] {
    border: 1px solid var(--q88-grid-border);
    border-radius: 6px;
    background: var(--q88-grid-card);
}

/* ----- Footer action row ------------------------------------------------- */
/* Footer hosts three LinkButtons separated by inline `.Accent` spacers
   (each contains `&nbsp;&nbsp;` from the .ascx). The legacy Phase 2
   `.LinkButton` chrome (navy pill) doesn't match the teal "Create" button
   on Create Questionnaire. Re-skin to that pixel rhythm so the two pages
   speak the same button language:
     - Publish + Email → teal primary  (matches `_btnCreate`)
     - Delete          → destructive secondary (white pill, red border/text)
   All three share 36px height, 8px radius, Inter 14/500, and hide their
   inner ImageManager icon (<ins><img>) the same way Create Questionnaire
   does for `btnCreate` so the label sits centered in the pill. */

/* The `.Accent` separator was useful between flat text links; in a pill
   row it just adds visible vertical bars. Hide and let the pills' own
   margins provide spacing. */
body.page-archive #spanDelete,
body.page-archive #spanEmail,
body.page-archive #spanPublish,
body.page-archive [id$='_spanDelete'],
body.page-archive [id$='_spanEmail'],
body.page-archive [id$='_spanPublish'] {
    display: none !important;
}

/* Shared pill geometry for all three Archive footer buttons. The selectors
   target ID suffixes so we don't disturb other `LinkButton`s elsewhere on
   the page (DNN often emits LinkButtons with the `LinkButton` class). */
body.page-archive a[id$='_lnkDelete'],
body.page-archive a[id$='_lnkEmail'],
body.page-archive a[id$='_lnkPublish'],
body.page-archive a[id$='_lnkDelete']:link,
body.page-archive a[id$='_lnkDelete']:visited,
body.page-archive a[id$='_lnkEmail']:link,
body.page-archive a[id$='_lnkEmail']:visited,
body.page-archive a[id$='_lnkPublish']:link,
body.page-archive a[id$='_lnkPublish']:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    height: 36px !important;
    min-width: 88px;
    padding: 0 16px !important;
    margin: 0 0 0 8px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
    background-image: none !important;
}

/* Primary (teal) — Email + Publish. Mirror `_btnCreate`. */
body.page-archive a[id$='_lnkEmail'],
body.page-archive a[id$='_lnkPublish'],
body.page-archive a[id$='_lnkEmail']:link,
body.page-archive a[id$='_lnkEmail']:visited,
body.page-archive a[id$='_lnkPublish']:link,
body.page-archive a[id$='_lnkPublish']:visited {
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary) !important;
}
body.page-archive a[id$='_lnkEmail']:hover,
body.page-archive a[id$='_lnkPublish']:hover,
body.page-archive a[id$='_lnkEmail']:active,
body.page-archive a[id$='_lnkPublish']:active,
body.page-archive a[id$='_lnkEmail']:focus,
body.page-archive a[id$='_lnkPublish']:focus {
    background: var(--button-primary-hover) !important;
    background-color: var(--button-primary-hover) !important;
    border-color: var(--button-primary-hover) !important;
    color: #ffffff !important;
}
body.page-archive a[id$='_lnkEmail']:focus,
body.page-archive a[id$='_lnkPublish']:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.25);
}

/* Destructive secondary (white pill, red text + border) — Delete. */
body.page-archive a[id$='_lnkDelete'],
body.page-archive a[id$='_lnkDelete']:link,
body.page-archive a[id$='_lnkDelete']:visited {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
}
body.page-archive a[id$='_lnkDelete']:hover,
body.page-archive a[id$='_lnkDelete']:active {
    background: #fef2f2 !important;
    background-color: #fef2f2 !important;
    border-color: #b91c1c !important;
    color: #b91c1c !important;
}
body.page-archive a[id$='_lnkDelete']:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.20);
}

/* Disabled state — DNN renders `disabled` attribute on the anchor. */
body.page-archive a[id$='_lnkDelete'][disabled],
body.page-archive a[id$='_lnkEmail'][disabled],
body.page-archive a[id$='_lnkPublish'][disabled],
body.page-archive a[id$='_lnkDelete'].aspNetDisabled,
body.page-archive a[id$='_lnkEmail'].aspNetDisabled,
body.page-archive a[id$='_lnkPublish'].aspNetDisabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Hide the ImageManager icon `<img>` and its empty `<ins>&nbsp;</ins>`
   wrapper inside each button — same fix createQuestionnaire.css applies
   to btnCreate. Without this, the `<ins>` injects whitespace that shifts
   the label off-center in the pill. */
body.page-archive a[id$='_lnkDelete'] img,
body.page-archive a[id$='_lnkDelete'] ins,
body.page-archive a[id$='_lnkEmail'] img,
body.page-archive a[id$='_lnkEmail'] ins,
body.page-archive a[id$='_lnkPublish'] img,
body.page-archive a[id$='_lnkPublish'] ins {
    display: none !important;
}

/* Push the action row to the right edge of the card and tighten the
   default 3px wrapper padding from the markup. */
body.page-archive .modV2 .modV2Footer,
body.page-archive [class*='modV2'] [class*='Footer'] {
    text-align: right;
}