/* QEN-8704 VIQ Import page re-skin (CSS-only).
   Figma: oM4wJDLxiHlaKMCy6GvTXs node 420:7797.
   Scoped to body.page-viqimport.sidebar-nav so the rules are inert elsewhere. */

/* ------------------------------------------------------------------
   Card chrome — wrap the modFileUploads ModuleTemplateV2 panel
   ------------------------------------------------------------------ */
body.page-viqimport.sidebar-nav .ContentPane,
body.page-viqimport.sidebar-nav .ContentPaneBody,
body.page-viqimport.sidebar-nav .MainTableContent {
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
}

body.page-viqimport.sidebar-nav #q88Content,
body.page-viqimport.sidebar-nav .cphMiddleContent {
    background: transparent;
}

/* Apply Figma "Card" chrome to each ModuleTemplateV2 panel on this page. */
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"],
body.page-viqimport.sidebar-nav [id$="_modNoPermissions_pnlMod"],
body.page-viqimport.sidebar-nav [id$="_modResults_pnlMod"] {
    box-sizing: border-box !important;
    width: calc(100% - 48px) !important;
    max-width: 1584px !important;
    margin: 24px auto !important;
    padding: 24px !important;
    background-color: #ffffff !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1) !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-primary);
}

/* ------------------------------------------------------------------
   Section title — "Inspection Import"
   ------------------------------------------------------------------ */
body.page-viqimport.sidebar-nav .modV2TitleContainer,
body.page-viqimport.sidebar-nav .modV2Title {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.page-viqimport.sidebar-nav .modV2Title {
    font-family: "Inter", sans-serif;
    font-size: 18px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 0 !important;
}

/* (Title-row spacing falls out naturally from card padding + pnlMain padding-top: 5;
   no dedicated wrapper rule needed — verified via inverse-coverage probe.) */

/* ------------------------------------------------------------------
   Upload form area — the .StdTable holds 5 file-input rows
   ------------------------------------------------------------------ */
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] table.StdTable {
    border: 0 !important;
    background: transparent !important;
    border-spacing: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] table.StdTable td {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--text-primary);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 20px;
}

/* Row 1 holds the helper line "Specify files to import..." then a <br/><br/> then the first
   File name + <input>. Keep the BR-driven line break — it's the only visual separator we have
   without touching markup. Slight extra padding on the first cell to space the helper from row 1. */
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] table.StdTable > tbody > tr:first-child > td {
    padding: 0 0 6px 0 !important;
}

/* The bare "Specify files..." text node + the <br><br> are inside the first <td>. We can't
   target the leading text node directly, but we can dial the cell's typography so the helper
   reads as muted body copy, while the "File name:" prefix on the next visual line picks up
   the same color (regular weight 400 reads OK for both). */
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] table.StdTable > tbody > tr:first-child > td {
    color: #475569 !important;
    font-weight: 400 !important;
}

/* Each subsequent file-input row */
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] table.StdTable > tbody > tr + tr > td {
    padding: 6px 0 !important;
    color: #0f172a;
    font-weight: 500;
}

/* Native file-input chrome — keep the native widget but tighten the visual.
   Browser-rendered "Choose File" button is impossible to fully restyle without
   markup change, but we can size and align the input nicely. */
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] input[type="file"] {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    padding: 6px 10px !important;
    font-family: "Inter", sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #0f172a !important;
    min-height: 32px;
    box-sizing: border-box;
    margin-left: 8px;
    /* Override the inline style="color:transparent;" applied before any file is chosen.
       Inline beats stylesheet, but :not selector + :not([style*=""]) isn't reliable here;
       use the more-specific [style] form below. */
}

/* (Inline `color: transparent;` on the file inputs is already overridden by the !important
   color rule above — no extra attribute-selector rule needed. Verified via probe.) */

/* WebKit/Blink file-input button (Chrome) — paint it as a secondary chip. */
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] input[type="file"]::-webkit-file-upload-button {
    background-color: var(--surface-muted);
    color: #1e293b;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    padding: 4px 12px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    cursor: pointer;
    margin-right: 12px;
}

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

/* Validator messages — muted red when visible. */
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] span[style*="color:Red"],
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] span[id*="rev"],
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] span[id*="cvCheck"] {
    color: var(--red-600) !important;
    font-family: "Inter", sans-serif;
    font-size: 13px !important;
    margin-left: 8px;
}

/* ------------------------------------------------------------------
   Footer — Supported Formats panel
   ------------------------------------------------------------------ */
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] {
    display: block;
    margin-top: 24px;
}

body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] > span:first-child {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin-bottom: 12px;
}

/* The Supported Formats table */
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: auto !important;
    max-width: 600px !important;
    font-family: "Inter", sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    background: transparent !important;
}

body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] table > thead > tr > th {
    background-color: var(--surface-card) !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-align: left !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--border-default) !important;
    border-top: 1px solid var(--border-default) !important;
}

body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] table > thead > tr > th:first-child {
    border-top-left-radius: 6px;
    border-left: 1px solid var(--border-default);
}
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] table > thead > tr > th:last-child {
    border-top-right-radius: 6px;
    border-right: 1px solid var(--border-default);
}

body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] table > tbody > tr > td {
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
    background: transparent !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] table > tbody > tr:first-child > td {
    border-top: 0;
}

body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] table > tbody > tr > td:first-child {
    border-left: 1px solid var(--border-default);
}
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] table > tbody > tr > td:last-child {
    border-right: 1px solid var(--border-default);
}
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] table > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: 6px;
}
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] table > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: 6px;
}

/* The legacy markup uses inline `padding-right:40px` on each <td>; override so spacing comes from cell padding. */
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] table > tbody > tr > td[style*="padding-right"] {
    padding: 10px 16px !important;
}

/* tfoot rows holding "To import in bulk..." tips */
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] table > tfoot > tr:first-child > td {
    padding: 0 !important;
    border: 0 !important;
    height: 12px !important;
}
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] table > tfoot > tr > td {
    border: 0 !important;
    padding: 4px 0 !important;
    color: var(--text-muted) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
}
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] table > tfoot > tr > td a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] table > tfoot > tr > td a:hover {
    text-decoration: underline;
}
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_spImportantNotes"] table > tfoot > tr > td span[style*="font-weight"] {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* ------------------------------------------------------------------
   Footer button row — the "Import Files" primary action
   ------------------------------------------------------------------ */
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] .modV2FooterContainer,
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] .modPopFooter,
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [class*="Footer"] {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

/* The footer table is unclassed; reach it via the LinkButton's ancestor. */
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_lbVIQImport"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    min-width: 96px;
    padding: 0 16px !important;
    background-color: var(--primary) !important;
    color: #eff6ff !important;
    border: 1px solid var(--primary) !important;
    border-radius: 8px !important;
    font-family: "Inter", sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 120ms ease, border-color 120ms ease;
}

body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_lbVIQImport"]:hover {
    background-color: var(--button-primary-hover) !important;
    border-color: var(--button-primary-hover) !important;
    color: #ffffff !important;
}

body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_lbVIQImport"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Kill the legacy LinkButton spacer + icon image so we get a clean button. */
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] [id$="_lbVIQImport"] > ins {
    display: none !important;
}

/* The LinkButton's ImageManager renders as plain text + a leading <ins> spacer
   (hidden above). No <img>/<span>/.LabelText to override — verified via probe. */

/* The footer table is inside <Footer> slot; remove its inline padding. */
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] table[cellpadding="0"][cellspacing="0"][border="0"]:not(.StdTable) > tbody > tr > td[style*="text-align:end"],
body.page-viqimport.sidebar-nav [id$="_modFileUploads_pnlMod"] table[cellpadding="0"][cellspacing="0"][border="0"]:not(.StdTable) > tbody > tr > td[style*="text-align: end"] {
    padding: 0 !important;
    vertical-align: top !important;
    text-align: right !important;
}

/* ------------------------------------------------------------------
   Hidden / future panels (modNoPermissions, modResults) — match the card chrome
   ------------------------------------------------------------------ */
body.page-viqimport.sidebar-nav [id$="_modNoPermissions_pnlMod"] table.StdTable,
body.page-viqimport.sidebar-nav [id$="_modResults_pnlMod"] table {
    border: 0 !important;
    background: transparent !important;
    border-spacing: 0 !important;
    padding: 0 !important;
}

body.page-viqimport.sidebar-nav [id$="_modResults_pnlMod"] [id$="_lbClose"] {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    background-color: var(--surface-muted);
    color: #1e293b;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    font: 500 14px/20px "Inter", sans-serif;
    text-decoration: none;
}
body.page-viqimport.sidebar-nav [id$="_modResults_pnlMod"] [id$="_lbClose"] > ins,
body.page-viqimport.sidebar-nav [id$="_modResults_pnlMod"] [id$="_lbClose"] img { display: none !important; }
body.page-viqimport.sidebar-nav [id$="_modResults_pnlMod"] [id$="_lbClose"] span { font: inherit !important; color: inherit !important; }