/* QEN-8704 Upload Officer Matrix page re-skin (CSS-only).
   Figma: oM4wJDLxiHlaKMCy6GvTXs node 428:6956.
   Tokens from get_variable_defs: base/card #ffffff, base/border #e2e8f0,
   base/foreground #0f172a, base/primary #0d9488, base/muted-foreground #475569,
   base/secondary #f1f5f9, shadow/sm = drop 0/1/3/0 #0000001a + drop 0/1/2/-1 #0000001a.

   Scoped to body.page-upload-officer-matrix.sidebar-nav so the rules are inert
   when the body class is absent (Phase-3 sidebar-nav co-class only).

   This page renders DesktopModules/Q88/UploadOfficerMatrix.ascx via ModuleTemplate
   v1 chrome (NOT V2 — different DOM than VIQ Import which uses ModuleTemplateV2). */

/* ------------------------------------------------------------------
   Layout release — strip page-level chrome painting in the gutters
   ------------------------------------------------------------------ */
body.page-upload-officer-matrix.sidebar-nav .ContentPane,
body.page-upload-officer-matrix.sidebar-nav .ContentPaneBody,
body.page-upload-officer-matrix.sidebar-nav .MainTableContent {
    background: transparent !important;
}

body.page-upload-officer-matrix.sidebar-nav #q88Content,
body.page-upload-officer-matrix.sidebar-nav .q88-content {
    background: transparent !important;
}

/* ------------------------------------------------------------------
   ModuleTemplate v1 outer table — neutralise & add vertical margin
   ------------------------------------------------------------------ */
body.page-upload-officer-matrix.sidebar-nav table[id$="_divMod"].modContainerLarge {
    margin: 24px 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
}

/* ------------------------------------------------------------------
   Card chrome — apply Figma "Card 📍" (428:6961) directly to
   .modInnerContainer (kills the legacy navy 1px border in the process)
   ------------------------------------------------------------------ */
body.page-upload-officer-matrix.sidebar-nav [id$="_modInnerContainer"].modInnerContainer {
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 12px !important;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-primary);
}

/* ------------------------------------------------------------------
   Title strip — kill legacy navy bg, restyle to Figma 18 / semibold
   Current DOM: div.modTitle has bg #2D3663 (legacy navy) wrapping
   div.modTLeft (text) + div.modTRight (empty 6×6 chevron slot).
   ------------------------------------------------------------------ */
body.page-upload-officer-matrix.sidebar-nav [id$="_modTitle"].modTitle {
    box-sizing: border-box !important;
    width: 100% !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 24px 24px 0 24px !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    /* Legacy .modTitle has overflow:auto in MainWhiteout.css — kill it,
       otherwise the 1px line-height rounding shows scrollbar arrows on Windows. */
    overflow: visible !important;
    /* Original modTitle uses `float`-based layout for TLeft/TRight; restore flow */
    display: flex !important;
    align-items: center !important;
}

body.page-upload-officer-matrix.sidebar-nav [id$="_pnlTitleLeft"].modTLeft {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    text-shadow: none !important;
}

/* TitleRight slot is empty in Figma — hide. */
body.page-upload-officer-matrix.sidebar-nav [id$="_pnlTitleRight"].modTRight {
    display: none !important;
}

/* ------------------------------------------------------------------
   Body panel — replace #f8fafc legacy strip with Figma white + padding
   gap-3 (12px) below title, then content, then 24px bottom (Figma section).
   ------------------------------------------------------------------ */
body.page-upload-officer-matrix.sidebar-nav [id$="_pnlMain"].modMain {
    background-color: #ffffff !important;
    background-image: none !important;
    /* gap-6 (24) between title block and body, per Figma Frame 6966 flex gap. */
    padding: 24px 24px 24px 24px !important;
    margin: 0 !important;
    border: 0 !important;
}

/* StdTable inside main: collapse legacy table chrome, set Inter base. */
body.page-upload-officer-matrix.sidebar-nav [id$="_pnlMain"].modMain table.StdTable {
    width: 100% !important;
    background: transparent !important;
    border-collapse: collapse !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body.page-upload-officer-matrix.sidebar-nav [id$="_pnlMain"].modMain table.StdTable td {
    padding: 0 !important;
    vertical-align: middle !important;
    background: transparent !important;
    border: 0 !important;
}

/* Label cell "Upload File:" — Figma "Import files to Q88" — 14 / 500. */
body.page-upload-officer-matrix.sidebar-nav [id$="_pnlMain"].modMain table.StdTable td:first-child {
    width: 1% !important;
    padding-right: 12px !important;
    white-space: nowrap;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
}

/* The label is wrapped in <b> in the legacy markup — soften from bold to 500
   so the Figma medium weight wins visually. */
body.page-upload-officer-matrix.sidebar-nav [id$="_pnlMain"].modMain table.StdTable td:first-child b {
    font-weight: 500 !important;
}

/* Input cell: line FileUpload + disclaimer horizontally with gap-3 (12). */
body.page-upload-officer-matrix.sidebar-nav [id$="_pnlMain"].modMain table.StdTable td:nth-child(2) {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
}

/* ------------------------------------------------------------------
   Native FileUpload — give it a chip-like outline so it visually
   integrates with the Figma input aesthetic without replacing the
   browser's file picker (user chose: keep native).
   ------------------------------------------------------------------ */
body.page-upload-officer-matrix.sidebar-nav input[type="file"][id$="_fuOfficerMatrix"] {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-muted) !important;
    background-color: #ffffff !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    height: 32px !important;
    box-sizing: border-box !important;
    cursor: pointer;
}

body.page-upload-officer-matrix.sidebar-nav input[type="file"][id$="_fuOfficerMatrix"]::file-selector-button {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: #1e293b;
    background-color: var(--surface-muted);
    border: 0;
    border-radius: 6px;
    padding: 4px 10px;
    margin-right: 10px;
    cursor: pointer;
}

body.page-upload-officer-matrix.sidebar-nav input[type="file"][id$="_fuOfficerMatrix"]::file-selector-button:hover {
    background-color: var(--border-default);
}

/* ------------------------------------------------------------------
   Disclaimer "(Upload Officer Matrix Excel or XML)" —
   Figma subtitle "Import Officer Matrix Excel of XML": 12 / 400 / muted.
   ------------------------------------------------------------------ */
body.page-upload-officer-matrix.sidebar-nav .disclaimer {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
    /* Figma 428:7211 text color = base/foreground #0f172a (not muted). */
    color: var(--text-primary) !important;
    background: transparent !important;
}

/* ------------------------------------------------------------------
   Footer2 — kill #ddd grey bar + legacy slate-200 top border,
   re-establish as Figma footer (white bg, divider line, right-aligned).
   ------------------------------------------------------------------ */
body.page-upload-officer-matrix.sidebar-nav [id$="_pnlFooter2"].modFooter2 {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 1px solid var(--border-default) !important;
    padding: 16px 24px !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    text-align: right;
}

/* Import File LinkButton — Figma primary button (button 428:6974):
   bg base/primary #0d9488, fg base/primary-foreground #eff6ff,
   h-8 32px, px-3 12px, rounded-md 8px, text-xs 12/16 medium. */
body.page-upload-officer-matrix.sidebar-nav [id$="_pnlFooter2"] a.LinkButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 32px !important;
    padding: 0 12px !important;
    background-color: var(--primary) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 500 !important;
    color: #eff6ff !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}

body.page-upload-officer-matrix.sidebar-nav [id$="_pnlFooter2"] a.LinkButton:hover {
    background-color: var(--button-primary-hover) !important;
    color: #eff6ff !important;
}

body.page-upload-officer-matrix.sidebar-nav [id$="_pnlFooter2"] a.LinkButton:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px;
}

/* Hide the <ins>&nbsp;</ins> spacer ASP.NET emits before LinkButton text —
   in inline-flex it would render as an empty flex item and shift the label
   right by ~5px (see project memory linkbutton-ins-spacer-trap.md). */
body.page-upload-officer-matrix.sidebar-nav [id$="_pnlFooter2"] a.LinkButton > ins {
    display: none !important;
}