/* ==========================================================================
   admin-form.css — Q88 Admin sidebar form pages re-skin (QEN-8704)
   ----------------------------------------------------------------------------
   Scoped to body.page-admin-form (added by Default.master.cs when ActiveTab.
   TabName matches one of the form pages AND PortalId is 0 or 1).

   Target pages (both use <uc:ModuleTemplate> legacy chrome with
   <table class="StdTable"> as FORM LAYOUT — label/value pairs, NOT a data
   grid — so the page-admin-list grid skin would mis-apply header/row rules):
     • Bulk Auth0 Conversion (DesktopModules/Q88/BulkAuth0Conversion.ascx)
         email-list <textarea> + results <textarea> + 3 Footer2 LinkButtons
     • Officer Matrix Offline (DesktopModules/Q88/OfficerMatrixOfflineAdmin.ascx)
         FileUpload + validation-errors / XML / schema <textarea>s
         + inline "(Convert)" LinkButton + 2 Footer2 LinkButtons

   Rendered DOM:
       <table.modContainer{Std,Large}>
         <tbody><tr><td>
           <div.modInnerContainer>
             <div.modTitle>
               <div.modTLeft>Title</div>
               <div.modTRight></div>
             </div>
             <div.modMain>
               <table.StdTable>                  ← FORM LAYOUT (no ColHeader)
                 <tr><td width="130"><b>Label:</b></td><td>input/textarea</td></tr>
                 …
             </div>
             <div.modFooter2> Cancel / Save LinkButtons </div>

   Source of truth: DESIGN.md
     §1   tokens (--surface-card, --border-input, --text-strong, …)
     §6.1 .q88-card primitive — 1px slate-200 border, 8px radius, no shadow,
          24×28 inner padding, 24×48 outer margin.
     §15.14 Brand teal unification (#0d9488 / hover #0f766e).

   NOTE: Some chrome rules duplicate admin-list.css (modContainer card,
   modTitle bar, modMain reset, modFooter2 layout). Rather than cross-cut
   admin-list.css with a second body class, keep this file independent so
   each skin owns its full surface. Cost: ~150 lines of duplicated chrome
   per skin file. Benefit: each is debuggable + diffable in isolation.
   ========================================================================== */

/* ==========================================================================
   1. ContentPane chain release — same trick as admin-list.css §1
   ----------------------------------------------------------------------------
   DNN wraps every module in a <table.ContentPane> chain that shrink-wraps to
   its widest child and centers via margin:0 auto. <table.modContainerStd|
   Large> doesn't carry the .q88-card class, so components.css's
   `:has(.q88-card)` release doesn't fire — replicate it.
   ========================================================================== */
body.page-admin-form .q88-content .ContentPane,
body.page-admin-form .q88-content .ContentPaneBody,
body.page-admin-form .ContentPane .MainTableContent > td,
body.page-admin-form .ContentPane > tbody > tr > td.ContentPaneBody {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
body.page-admin-form .ContentPane,
body.page-admin-form .ContentPaneBody {
    background: transparent !important;
}

/* ==========================================================================
   2. Module container — q88-card chrome (mirror of admin-list.css §2)
   ========================================================================== */
body.page-admin-form table.modContainerStd,
body.page-admin-form table.modContainerLarge,
body.page-admin-form table.modContainerdefault {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    /* Match admin-list.css §2 token order — --card-raised / --surface-raised
       (NOT --surface-card which resolves to slate-50 in Phase 4 theme). */
    background-color: var(--card-raised, var(--surface-raised, #ffffff)) !important;
    border: 1px solid var(--border-default, var(--input, #e2e8f0)) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 24px 48px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Flatten DNN's inner table chain (mirrors admin-list.css §2b) so the
   .modContainer's <tbody>/<tr>/<td>/<.modInnerContainer> all behave as
   plain blocks — otherwise the navy 4×0 nested-table padding leaks. */
body.page-admin-form table.modContainerStd > tbody,
body.page-admin-form table.modContainerLarge > tbody,
body.page-admin-form table.modContainerStd > tbody > tr,
body.page-admin-form table.modContainerLarge > tbody > tr,
body.page-admin-form table.modContainerStd > tbody > tr > td,
body.page-admin-form table.modContainerLarge > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    vertical-align: top !important;
}
body.page-admin-form .modInnerContainer {
    padding: 24px 28px !important;
    background: transparent !important;
}

/* ==========================================================================
   3. Title bar — same Inter 18/28 600 slate-900 as admin-list
   ----------------------------------------------------------------------------
   Default MainWhiteout chrome paints navy header band w/ 12px white title.
   Override so the title sits as Inter 18/28 600 slate-900 on the white card.
   ========================================================================== */
body.page-admin-form .modTitle {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-subtle, #e2e8f0) !important;
    padding: 0 0 16px 0 !important;
    margin: 0 0 16px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: auto !important;
    height: auto !important;
    line-height: normal !important;
}
body.page-admin-form .modTLeft {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    color: var(--text-strong, #0f172a) !important;
    text-transform: none !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
}
body.page-admin-form .modTRight {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}
body.page-admin-form .modTRight:empty {
    display: none !important;
}

/* ==========================================================================
   4. Main body — flat, transparent (form table chrome below)
   ========================================================================== */
body.page-admin-form .modMain {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   5. .StdTable as FORM LAYOUT — label / value pairs (NOT a data grid)
   ----------------------------------------------------------------------------
   This is the key divergence from admin-list.css. The StdTable here holds
   <tr><td>Label</td><td>input/textarea</td></tr> rows — NOT data rows with
   .ColHeader headers + .Alt striping. Kill any grid-y chrome and treat
   rows as form field groups (16px vertical breathing room between rows).
   ========================================================================== */
body.page-admin-form table.StdTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 16px !important;
    background: transparent !important;
    background-color: transparent !important;
    margin: 0 !important;
    border: 0 !important;
    table-layout: auto !important;
}

/* Label cell (first td) — right-padded bold label sitting above (top-aligned)
   the textarea/input. The original markup uses inline width="130" / 100;
   keep top alignment, override the visual treatment. */
body.page-admin-form table.StdTable > tbody > tr > td:first-child {
    width: 160px !important;
    min-width: 160px !important;
    vertical-align: top !important;
    padding: 8px 16px 8px 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    color: var(--text-strong, #0f172a) !important;
    background: transparent !important;
    border: 0 !important;
    white-space: nowrap !important;
}
/* Inline <b> inside the label cell — drop bold (cell is already 600). */
body.page-admin-form table.StdTable > tbody > tr > td:first-child b {
    font-weight: 600 !important;
}

/* Value cell (second td) — host for textarea / input / file upload /
   dropdown. Flow so the form-control inside fills available width. */
body.page-admin-form table.StdTable > tbody > tr > td:nth-child(2) {
    vertical-align: top !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    width: auto !important;
}

/* ==========================================================================
   6. Form controls (textarea, input[type=text|password], select, file upload)
   ----------------------------------------------------------------------------
   Mirror DESIGN.md form-control: 1px slate-200, 6px radius, 8/12 padding,
   Inter 14/20 slate-900, white bg, focus ring teal.
   ========================================================================== */
body.page-admin-form .modMain textarea,
body.page-admin-form .modMain input[type="text"],
body.page-admin-form .modMain input[type="password"],
body.page-admin-form .modMain input[type="email"],
body.page-admin-form .modMain input[type="number"],
body.page-admin-form .modMain input[type="url"],
body.page-admin-form .modMain select {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid var(--border-default, var(--input, #cbd5e1)) !important;
    border-radius: 6px !important;
    /* Match admin-list.css token order for the card surface — keep the
       form-control surface in line with the card so the input chrome
       contrasts via border only. --surface-card resolves to slate-50 in
       Phase 4 theme; --card-raised/--surface-raised is the WHITE token. */
    background-color: var(--card-raised, var(--surface-raised, #ffffff)) !important;
    color: var(--text-strong, #0f172a) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

body.page-admin-form .modMain textarea {
    /* Textareas keep their author-set height (the .ascx sets Height="150px"
       on the email input + "250px" on the results). Override only the chrome. */
    resize: vertical !important;
    min-height: 80px !important;
    font-family: 'Menlo', 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
}

/* Focus ring — teal subtle (DESIGN.md §15.14 brand teal). */
body.page-admin-form .modMain textarea:focus,
body.page-admin-form .modMain input[type="text"]:focus,
body.page-admin-form .modMain input[type="password"]:focus,
body.page-admin-form .modMain input[type="email"]:focus,
body.page-admin-form .modMain input[type="number"]:focus,
body.page-admin-form .modMain input[type="url"]:focus,
body.page-admin-form .modMain select:focus {
    border-color: var(--border-focus, #0d9488) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.16) !important;
}

/* Read-only textarea (Bulk Auth0 results) — slate-50 bg + slate-700 text
   so it visually reads as output-only. Use the SAME slate-50 token that
   the .modContainer surface uses, since the form-control sits inside it
   and needs to be a step "darker" than the editable field. */
body.page-admin-form .modMain textarea[readonly] {
    background-color: var(--surface-muted, var(--surface-card, #f8fafc)) !important;
    color: var(--text-muted, #475569) !important;
}

/* Placeholder text — slate-500. */
body.page-admin-form .modMain textarea::placeholder,
body.page-admin-form .modMain input::placeholder {
    color: var(--text-placeholder, #94a3b8) !important;
    opacity: 1 !important;
}

/* FileUpload renders as <input type="file"> — leave native chrome (browser
   paints OS-specific Browse button) but force Inter font + the spacing. */
body.page-admin-form .modMain input[type="file"] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    color: var(--text-strong, #0f172a) !important;
}

/* ==========================================================================
   7. Inline helpers — .disclaimer + inline LinkButton next to label
   ----------------------------------------------------------------------------
   BulkAuth0Conversion + OfficerMatrixOfflineAdmin both ship a small
   <span class="disclaimer"> under the email/file textarea giving format
   guidance ("one address per line, or semicolon-separated") — style it
   as small slate-500 italic. */
body.page-admin-form .modMain .disclaimer {
    display: block !important;
    margin: 8px 0 0 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px !important;
    line-height: 16px !important;
    font-style: italic !important;
    color: var(--text-muted, #64748b) !important;
}

/* Inline "(Convert)" LinkButton next to "XML:" label on OfficerMatrixOffline
   (pretty-print XML toggle) — render as inline teal text-link, NOT a button
   pill.
   TOKEN TRAP: do NOT use --text-link or --brand-primary — both resolve to
   LEGACY NAVY (#003366 / #4F72A4) at body.sidebar-nav scope. Only --primary
   and --button-primary-bg are rebound to teal #0d9488 (tokens.css ~L423).
   See feedback_brand-primary-vs-primary-token memory note. */
body.page-admin-form table.StdTable > tbody > tr > td:first-child a,
body.page-admin-form table.StdTable > tbody > tr > td:first-child .LinkButton {
    display: inline !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--primary, #0d9488) !important;
    text-decoration: none !important;
    margin-left: 4px !important;
}
body.page-admin-form table.StdTable > tbody > tr > td:first-child a:hover,
body.page-admin-form table.StdTable > tbody > tr > td:first-child .LinkButton:hover {
    color: var(--button-primary-hover, #0f766e) !important;
    text-decoration: underline !important;
}

/* ASP.NET RequiredFieldValidator + ValTipInvalid — sits inline next to an
   input. Currently MainWhiteout renders it as a red star. Keep red but
   align to DESIGN.md tokens. */
body.page-admin-form .modMain .ValTipInvalid {
    color: var(--text-danger, #dc2626) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px !important;
    margin-left: 8px !important;
}

/* ==========================================================================
   8. .modFooter2 — action button row at the bottom of the card
   ----------------------------------------------------------------------------
   Both target pages place 2-3 <asp:LinkButton CssClass="LinkButton"> in the
   <Footer2> slot. ImageManager renders an icon + label inside the anchor.
   Treat the LAST button as the primary action (teal pill) and any earlier
   ones as secondaries (white ghost-pill). Use :last-child for the primary
   since markup-order conventionally places destructive/secondary first
   and the commit-action last — matches BulkAuth0Conversion (Revert / Check
   / Convert) and OfficerMatrixOfflineAdmin (Check File / Import File).
   ========================================================================== */
body.page-admin-form .modFooter2 {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 1px solid var(--border-subtle, #e2e8f0) !important;
    padding: 16px 0 0 0 !important;
    margin: 24px 0 0 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
body.page-admin-form .modFooter2:empty {
    display: none !important;
}

/* BulkAuth0Conversion ships a layout <table> inside Footer2 (Revert on the
   left, Check + Convert right-justified). Kill that and let flex handle. */
body.page-admin-form .modFooter2 > table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
}
body.page-admin-form .modFooter2 > table > tbody > tr > td {
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    vertical-align: middle !important;
}
body.page-admin-form .modFooter2 > table > tbody > tr > td:first-child {
    text-align: left !important;
}
body.page-admin-form .modFooter2 > table > tbody > tr > td:last-child {
    text-align: right !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* All Footer2 anchors — base ghost-pill shape (secondary look). */
body.page-admin-form .modFooter2 a,
body.page-admin-form .modFooter2 .LinkButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 36px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-default, var(--input, #cbd5e1)) !important;
    background-color: var(--card-raised, var(--surface-raised, #ffffff)) !important;
    color: var(--text-strong, #0f172a) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    margin: 0 !important;
    text-shadow: none !important;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
}
body.page-admin-form .modFooter2 a:hover,
body.page-admin-form .modFooter2 .LinkButton:hover {
    background-color: var(--surface-muted, var(--surface-card, #f8fafc)) !important;
    border-color: var(--border-input-hover, #94a3b8) !important;
    color: var(--text-strong, #0f172a) !important;
    text-decoration: none !important;
}

/* Last button in the row = primary commit action — teal pill. Covers both
   .modFooter2 > a:last-of-type AND nested <table> last cell's last anchor. */
body.page-admin-form .modFooter2 > a:last-of-type,
body.page-admin-form .modFooter2 > .LinkButton:last-of-type,
body.page-admin-form .modFooter2 > table > tbody > tr > td:last-child a:last-of-type,
body.page-admin-form .modFooter2 > table > tbody > tr > td:last-child .LinkButton:last-of-type {
    background-color: var(--button-primary-bg, #0d9488) !important;
    color: var(--button-primary-text, #ffffff) !important;
    border-color: var(--button-primary-bg, #0d9488) !important;
}
body.page-admin-form .modFooter2 > a:last-of-type:hover,
body.page-admin-form .modFooter2 > .LinkButton:last-of-type:hover,
body.page-admin-form .modFooter2 > table > tbody > tr > td:last-child a:last-of-type:hover,
body.page-admin-form .modFooter2 > table > tbody > tr > td:last-child .LinkButton:last-of-type:hover {
    background-color: var(--button-primary-hover, #0f766e) !important;
    border-color: var(--button-primary-hover, #0f766e) !important;
    color: var(--button-primary-text, #ffffff) !important;
}

/* ASP.NET <ins>&nbsp;</ins> spacer suppression (matches admin-list.css §8). */
body.page-admin-form .modFooter2 a > ins,
body.page-admin-form .modFooter2 .LinkButton > ins {
    display: none !important;
}
/* ImageManager renders an <img> sprite inside the anchor for the action's
   icon. Suppress legacy sprite — keep label-only treatment for now. */
body.page-admin-form .modFooter2 a img,
body.page-admin-form .modFooter2 .LinkButton img,
body.page-admin-form .modFooter2 a input[type="image"],
body.page-admin-form .modFooter2 .LinkButton input[type="image"] {
    display: none !important;
}