/* ==========================================================================
   admin-utility.css — Clear Cache + Encrypt/Decrypt re-skin
   ----------------------------------------------------------------------------
   Scoped to body.page-admin-utility. Target pages:
     /DesktopDefault.aspx?tabid=377&mtabid=5 → admin/ClearCache.ascx
         (CSSClass="modContainerLarge"; SubHeader1 "BE CAREFUL..." warning;
          3-row inner table of label/action cells)
     /DesktopDefault.aspx?tabid=386&mtabid=5 → DesktopModules/Q88/Decrypt.ascx
         (default modContainerStd; Input textarea + RadioButtonList + Submit
          footer; second modContainerStd card for Output textarea)

   Both render inside <uc:ModuleTemplate> with rendered DOM:
       <table.modContainer{Std,Large}>
         <tbody><tr><td>
           <div.modInnerContainer>
             <div.modTitle>
               <div.modTLeft>Title</div>
               <div.modTRight/>
             </div>
             <div.modSub1>SubHeader1 content</div>   (ClearCache only)
             <div.modMain>...body...</div>
             <div.modFooter2>...buttons...</div>     (Decrypt only)

   Source of truth: DESIGN.md
     §1   tokens (--surface-raised, --border-default, --text-primary, ...)
     §6.1 .q88-card primitive — white bg, 1px slate-200 border, 8px radius,
          NO shadow (universal rule, §15.14), 24×28 inner padding,
          24×48 outer margin, Inter typography.
     §15.14 Universal card-shadow drop, .q88-card standardization across
            EditProfile, certificates, charter-clauses, dwt-draft-calc, etc.

   Routing: Default.master.cs adds `page-admin-utility` body class when
   portalSettings.ActiveTab.TabName matches "Clear Cache" or "Encrypt/Decrypt"
   (TabName is portal-install stable, unlike tabid integers).
   ========================================================================== */

/* ==========================================================================
   1. ContentPane chain release
   ----------------------------------------------------------------------------
   DNN wraps every module in a <table.ContentPane> chain that shrink-wraps to
   its widest child and centers via margin:0 auto. .modContainer* doesn't
   carry the .q88-card class, so components.css's `:has(.q88-card)` release
   doesn't apply. Replicate the release here so the card's 24×48 margin
   gutters take effect.
   ========================================================================== */
body.page-admin-utility .q88-content .ContentPane,
body.page-admin-utility .q88-content .ContentPaneBody,
body.page-admin-utility .ContentPane .MainTableContent > td,
body.page-admin-utility .ContentPane > tbody > tr > td.ContentPaneBody {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
body.page-admin-utility .ContentPane,
body.page-admin-utility .ContentPaneBody,
body.page-admin-utility .MainTableContent {
    background: transparent !important;
    background-color: transparent !important;
}

/* ==========================================================================
   2. Outer card chrome — .modContainer{Std,Large} → q88-card per §6.1
   ----------------------------------------------------------------------------
   MainWhiteout.css legacy paints .modContainerStd/Large with a navy chrome
   table layout. Override every legacy declaration so the wrapper behaves as
   a normal block card.
   ========================================================================== */
body.page-admin-utility table.modContainerStd,
body.page-admin-utility table.modContainerLarge {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    background: var(--card-raised, var(--surface-raised, #ffffff)) !important;
    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;
    margin: 24px 48px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--foreground, var(--text-primary, #0f172a)) !important;
    text-align: left !important;
}

/* The inner <tbody>/<tr>/<td> chain that ModuleTemplate renders — clear
   any legacy padding/bg/borders so our padding is set on .modInnerContainer
   directly. With display: block on the outer table, the tbody/tr render as
   anonymous blocks; td needs to be display: block too to fill width. */
body.page-admin-utility table.modContainerStd > tbody,
body.page-admin-utility table.modContainerLarge > tbody,
body.page-admin-utility table.modContainerStd > tbody > tr,
body.page-admin-utility table.modContainerLarge > tbody > tr,
body.page-admin-utility table.modContainerStd > tbody > tr > td,
body.page-admin-utility table.modContainerLarge > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Inner container — provides §6.1 card padding (24 top/bottom, 28 L/R). */
body.page-admin-utility .modInnerContainer {
    padding: 24px 28px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Hide layout-only <br> direct children of the ContentPaneBody (Decrypt
   ascx has `</uc:ModuleTemplate><br /><br /><uc:ModuleTemplate id=modOutput>`
   between Input and Output cards — the 24×48 card margins already provide
   the inter-card gap). Leaves <br> inside subheader text alone. */
body.page-admin-utility .ContentPaneBody > br,
body.page-admin-utility td.ContentPaneBody > br {
    display: none !important;
}

/* ==========================================================================
   3. Title bar — kill navy bg, 18/28 semibold slate-900 (DESIGN.md §5.2 style)
   ========================================================================== */
body.page-admin-utility .modTitle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default, #e2e8f0) !important;
    border-radius: 0 !important;
    padding: 0 0 16px 0 !important;
    margin: 0 0 16px 0 !important;
    height: auto !important;
    min-height: 28px !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
body.page-admin-utility .modTLeft {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    color: var(--text-primary, var(--foreground, #0f172a)) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
}
body.page-admin-utility .modTRight {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}
body.page-admin-utility .modTRight:empty {
    display: none !important;
}

/* ==========================================================================
   4. SubHeader1 — ClearCache "BE CAREFUL..." → destructive callout
   ----------------------------------------------------------------------------
   The legacy <SubHeader1> renders as <div.modSub1>. ClearCache's content is
   a bold red warning that two cache-clear buttons can break things. Style
   as a Tailwind-style destructive alert: red border + red-50 bg + red-700
   text. Decrypt's ascx has no SubHeader1, so this rule is a no-op there.
   ========================================================================== */
body.page-admin-utility .modSub1 {
    background: #fef2f2 !important;
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    margin: 0 0 16px 0 !important;
    color: #b91c1c !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-align: left !important;
    box-shadow: none !important;
}
body.page-admin-utility .modSub1 b {
    font-weight: 600 !important;
}
body.page-admin-utility .modSub1 br {
    /* Keep the line break inside the warning text. */
    display: inline !important;
}

/* ==========================================================================
   5. Main body
   ========================================================================== */
body.page-admin-utility .modMain {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--text-primary, var(--foreground, #0f172a)) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    text-align: left !important;
}

/* 5a. ClearCache inner layout table — 3 rows of [label | controls].
   Use border-spacing 0 12px to add 12px vertical row gap. The cells stay
   inline-block-ish via table-cell so labels right-align cleanly with the
   first column. */
body.page-admin-utility .modMain > table {
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
    width: auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    background: transparent !important;
}
body.page-admin-utility .modMain > table > tbody > tr > td {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    vertical-align: middle !important;
}
/* Labels sit flush-left in the same column as the SubHeader warning above.
   Legacy ASCX renders them with align="right" — override to left-align so
   the rows line up under the warning's left edge. */
body.page-admin-utility .modMain > table > tbody > tr > td[align="right"] {
    text-align: left !important;
    padding-right: 16px !important;
    color: var(--text-primary, #0f172a) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   6. Footer — Decrypt Submit row → flex justify-end
   ========================================================================== */
body.page-admin-utility .modFooter2 {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--border-default, #e2e8f0) !important;
    border-radius: 0 !important;
    padding: 16px 0 0 0 !important;
    margin: 16px 0 0 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    box-shadow: none !important;
}

/* ==========================================================================
   7. Textareas — Decrypt Input/Output multi-line text boxes
   ----------------------------------------------------------------------------
   Bordered 1px slate-200, 8px radius, monospace for code-ish input/output,
   teal focus ring. ReadOnly Output gets slate-100 muted bg.
   ========================================================================== */
body.page-admin-utility .modMain textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 13px !important;
    line-height: 18px !important;
    color: var(--text-primary, var(--foreground, #0f172a)) !important;
    background-color: var(--surface-raised, #ffffff) !important;
    border: 1px solid var(--border-default, var(--input, #e2e8f0)) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 6px 0 14px !important;
    resize: vertical !important;
    width: 100% !important;
    max-width: 100% !important;
}
body.page-admin-utility .modMain textarea:focus {
    border-color: var(--brand-primary, #0d9488) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.12) !important;
}
body.page-admin-utility .modMain textarea[readonly] {
    background-color: var(--surface-muted, #f1f5f9) !important;
    color: var(--text-muted, var(--muted-foreground, #64748b)) !important;
}

/* 7a. Section labels — <b> elements introducing form sections (Decrypt:
   "Input", "Encrypt/Decrypt Method:"). Promote to a display-block heading
   with consistent spacing. */
body.page-admin-utility .modMain > div > b {
    display: block !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-primary, #0f172a) !important;
    margin: 0 0 6px !important;
}
body.page-admin-utility .modMain > div > b ~ b {
    margin-top: 14px !important;
}

/* ==========================================================================
   8. RadioButtonList — Decrypt Method picker
   ----------------------------------------------------------------------------
   ASP renders <asp:RadioButtonList RepeatDirection="Horizontal" RepeatColumns="2">
   as a 2-column <table> with each <td> holding a `<input type=radio><label>`
   pair. Style for legibility — teal accent + tight row spacing.
   ========================================================================== */
body.page-admin-utility .modMain table:not(.sTbl) input[type="radio"] {
    margin: 0 6px 0 0 !important;
    /* Use --primary (rebound to teal under body.sidebar-nav per §15.15) rather
       than --brand-primary which only flips teal under the narrower
       .q88-refresh scope. */
    accent-color: var(--primary, #0d9488) !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    width: 16px !important;
    height: 16px !important;
}
body.page-admin-utility .modMain table:not(.sTbl) td > label,
body.page-admin-utility .modMain table:not(.sTbl) input[type="radio"] + label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary, #0f172a) !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    margin-right: 24px !important;
    font-weight: 400 !important;
}
body.page-admin-utility .modMain > div > [id$="_rblOption"] td {
    padding: 6px 24px 6px 0 !important;
    vertical-align: middle !important;
    background: transparent !important;
    border: 0 !important;
}

/* ==========================================================================
   9. LinkButtons — Decrypt Submit, ClearCache Clear General Cache / Clear App Vars
   ----------------------------------------------------------------------------
   Token-driven pill (per §15.14 brand unification: --button-primary-bg = teal
   on refresh Q88). Hide the <ins> spacer ASP injects + the ImageManager icon
   wrapped inside Decrypt's Submit LinkButton (Figma submit buttons have no
   inline icon).
   ========================================================================== */
body.page-admin-utility .LinkButton,
body.page-admin-utility a.LinkButton,
body.page-admin-utility .modMain .LinkButton,
body.page-admin-utility .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: 0 !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;
    background-color: var(--button-primary-bg, var(--brand-primary, #0d9488)) !important;
    color: var(--button-primary-text, var(--text-on-brand, #ffffff)) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    margin: 0 !important;
    text-shadow: none !important;
}
body.page-admin-utility .LinkButton:hover,
body.page-admin-utility a.LinkButton:hover,
body.page-admin-utility .LinkButton:focus,
body.page-admin-utility a.LinkButton:focus {
    background-color: var(--button-primary-hover, #0f766e) !important;
    color: var(--button-primary-text, var(--text-on-brand, #ffffff)) !important;
    text-decoration: none !important;
}
/* Hide the <ins>&nbsp;</ins> spacer ASP LinkButton injects + nested icons. */
body.page-admin-utility .LinkButton > ins {
    display: none !important;
}
body.page-admin-utility .LinkButton img,
body.page-admin-utility .LinkButton input[type="image"] {
    display: none !important;
}

/* 9a. Plain anchor links inside the body — ClearCache "Show All Keys"
   secondary actions. Style as muted text links so they read as ghost
   secondary actions next to the teal primary LinkButtons. */
body.page-admin-utility .modMain a:not(.LinkButton) {
    /* --primary is rebound to teal under body.sidebar-nav per §15.15.
       --text-link is only teal under the .q88-refresh scope; on plain
       sidebar-nav pages it falls back to legacy navy #003366. */
    color: var(--primary, #0d9488) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    margin-left: 12px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    vertical-align: middle !important;
}
body.page-admin-utility .modMain a:not(.LinkButton):hover {
    color: var(--button-primary-hover, #0f766e) !important;
    text-decoration: underline !important;
}

/* 9b. Literal <span> values in ClearCache (cache counts, app variable counts,
   app-started timestamp) — keep them as plain text but ensure the legacy
   font/color match the rest of the card. */
body.page-admin-utility .modMain td > span,
body.page-admin-utility .modMain td[align="right"] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary, #0f172a) !important;
}