/* ==========================================================================
   admin-stats.css — Q88 Admin sidebar Stats page re-skin (QEN-8704)
   ----------------------------------------------------------------------------
   Scoped to body.page-admin-stats (added by Default.master.cs when ActiveTab.
   TabName == "Stats" AND PortalId is 0 or 1).

   Target page: admin/Stats.ascx (3 sibling <uc:ModuleTemplate> sections):
     1) Statistics filter form    — StdTable used as label/value FORM layout
                                    (td.Label cells). Footer2 has 2 LinkButtons
                                    (Page 1 / Page 2 toggle).
     2) Page 1 Stats (pnlPage1)   — <table.modContainerLarge>; <Main> hosts a
                                    3-cell layout <table> with three Repeaters
                                    each rendering <table.StdTable.BorderAll>
                                    with tr.Header (caption), tr.ColHeader,
                                    tr.Alt — DATA GRIDS.
     3) Page 2 Stats (pnlPage2)   — same shape as Page 1, 4 more Repeaters.

   Why this skin is bespoke (NOT shared with admin-list / admin-form):
     The page MIXES form-layout StdTable (filter section) with grid-layout
     StdTable (mini-grids). admin-form.css §5 sets `border-spacing: 0 16px`
     on StdTable which would break the grids; admin-list.css §5 sets
     `border-collapse: collapse` which would break the form. So neither
     can be applied wholesale. This file holds both — scoped to the
     specific table by section.

   Source of truth: DESIGN.md
     §1   tokens
     §5   Data grid pattern (header 48h, row 36h, Inter 14/20)
     §6.1 .q88-card primitive (1px slate-200, 8px radius, 24×48 margin)
     §15.14 Brand teal #0d9488 / hover #0f766e
   ========================================================================== */

/* ==========================================================================
   1. ContentPane chain release — same trick as admin-list.css §1
   ========================================================================== */
body.page-admin-stats .q88-content .ContentPane,
body.page-admin-stats .q88-content .ContentPaneBody,
body.page-admin-stats .ContentPane .MainTableContent > td,
body.page-admin-stats .ContentPane > tbody > tr > td.ContentPaneBody {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
body.page-admin-stats .ContentPane,
body.page-admin-stats .ContentPaneBody {
    background: transparent !important;
}

/* ==========================================================================
   2. Module container — q88-card chrome on EACH of the 3 sibling sections
   ----------------------------------------------------------------------------
   The filter section uses modContainerStd; Page1/Page2 use modContainerLarge.
   ========================================================================== */
body.page-admin-stats table.modContainerStd,
body.page-admin-stats table.modContainerLarge {
    display: block !important;
    width: auto !important;
    max-width: none !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;
    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 so .modInnerContainer carries the padding. */
body.page-admin-stats table.modContainerStd > tbody,
body.page-admin-stats table.modContainerLarge > tbody,
body.page-admin-stats table.modContainerStd > tbody > tr,
body.page-admin-stats table.modContainerLarge > tbody > tr,
body.page-admin-stats table.modContainerStd > tbody > tr > td,
body.page-admin-stats 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-stats .modInnerContainer {
    padding: 24px 28px !important;
    background: transparent !important;
}

/* Hide the legacy <br /> between sibling cards — flex/block flow handles it. */
body.page-admin-stats > .q88-content br {
    display: none !important;
}

/* ==========================================================================
   3. Title bar — Inter 18/28 600 slate-900 (mirror of admin-list/admin-form)
   ========================================================================== */
body.page-admin-stats .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-stats .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-stats .modTRight {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}
body.page-admin-stats .modTRight:empty {
    display: none !important;
}

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

/* ==========================================================================
   5. Filter section StdTable — FORM LAYOUT
   ----------------------------------------------------------------------------
   Scope: #modMain (the OUTER filter ModuleTemplate). The Page1/Page2 sections
   ALSO have StdTable but inside Repeaters — those are styled in §6 below.
   We disambiguate by gating on the modContainerStd parent (filter section is
   modContainerStd; Page1/Page2 are modContainerLarge).
   ========================================================================== */
body.page-admin-stats table.modContainerStd table.StdTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    background: transparent !important;
    margin: 0 !important;
    border: 0 !important;
    table-layout: auto !important;
}
body.page-admin-stats table.modContainerStd table.StdTable > tbody > tr > td {
    background: transparent !important;
    border: 0 !important;
    padding: 6px 8px !important;
    vertical-align: middle !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-strong, #0f172a) !important;
}
/* Label cells — `<td class="Label">` */
body.page-admin-stats table.modContainerStd table.StdTable > tbody > tr > td.Label {
    font-weight: 600 !important;
    color: var(--text-strong, #0f172a) !important;
    width: 200px !important;
    white-space: nowrap !important;
}
/* First spacer column (`<td style="width:100px">&nbsp;</td>`) — drop to 24px. */
body.page-admin-stats table.modContainerStd table.StdTable > tbody > tr > td:first-child {
    width: 24px !important;
    min-width: 24px !important;
}
/* Value cells with asp:Label rendering as <span>. */
body.page-admin-stats table.modContainerStd table.StdTable > tbody > tr > td > span {
    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;
}

/* Filter section form-controls (Date calendar + Period dropdown). */
body.page-admin-stats table.modContainerStd .modMain input[type="text"],
body.page-admin-stats table.modContainerStd .modMain select {
    box-sizing: border-box !important;
    height: 36px !important;
    padding: 6px 12px !important;
    border: 1px solid var(--border-default, var(--input, #cbd5e1)) !important;
    border-radius: 6px !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: 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-stats table.modContainerStd .modMain input[type="text"]:focus,
body.page-admin-stats table.modContainerStd .modMain select:focus {
    border-color: var(--border-focus, #0d9488) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.16) !important;
}

/* ==========================================================================
   6. Page1 / Page2 mini-grids — DESIGN.md §5 data grid
   ----------------------------------------------------------------------------
   Scope: table.modContainerLarge .StdTable.BorderAll — three Repeaters per
   section, each rendering its own grid with tr.Header (caption), tr.ColHeader,
   tr.Alt.
   ========================================================================== */
/* Outer layout <table> inside Page1/Page2 — flatten so the 3 mini-grids sit
   side-by-side with consistent gutters. */
body.page-admin-stats table.modContainerLarge .modMain > table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 16px 0 !important;
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    table-layout: fixed !important;
}
body.page-admin-stats table.modContainerLarge .modMain > table > tbody > tr > td {
    width: 33.333% !important;
    vertical-align: top !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Mini-grid table.StdTable.BorderAll */
body.page-admin-stats table.modContainerLarge table.StdTable {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: var(--surface-raised, #ffffff) !important;
    border: 1px solid var(--border-default, #e2e8f0) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 0 0 16px 0 !important;
    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;
    table-layout: auto !important;
}

/* Caption row tr.Header (the 1st row spanning all columns: "Login Statistics" etc.) */
body.page-admin-stats table.modContainerLarge table.StdTable > tbody > tr.Header,
body.page-admin-stats table.modContainerLarge table.StdTable > tbody > tr.Header > td {
    background: var(--surface-muted, #f8fafc) !important;
    background-image: none !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: 600 !important;
    text-transform: none !important;
    text-shadow: none !important;
    height: 40px !important;
    padding: 10px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default, #e2e8f0) !important;
    text-align: center !important;
}

/* Column header row tr.ColHeader */
body.page-admin-stats table.modContainerLarge table.StdTable > tbody > tr.ColHeader,
body.page-admin-stats table.modContainerLarge table.StdTable > tbody > tr.ColHeader > td {
    background: var(--surface-muted, #f8fafc) !important;
    background-color: var(--surface-muted, #f8fafc) !important;
    color: var(--text-muted, #475569) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-shadow: none !important;
    height: 36px !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default, #e2e8f0) !important;
    text-align: left !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}
body.page-admin-stats table.modContainerLarge table.StdTable > tbody > tr.ColHeader > td[align="right"] {
    text-align: right !important;
}

/* Data rows */
body.page-admin-stats table.modContainerLarge table.StdTable > tbody > tr > td {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9) !important;
    padding: 8px 12px !important;
    height: 32px !important;
    color: var(--text-primary, #0f172a) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
    vertical-align: middle !important;
    text-shadow: none !important;
}
body.page-admin-stats table.modContainerLarge table.StdTable > tbody > tr > td[align="right"] {
    text-align: right !important;
}
body.page-admin-stats table.modContainerLarge table.StdTable > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}
body.page-admin-stats table.modContainerLarge table.StdTable > tbody > tr:hover > td {
    background-color: var(--surface-hover, rgba(var(--primary-tint), 0.04)) !important;
}
/* Header rows opt out of hover. */
body.page-admin-stats table.modContainerLarge table.StdTable > tbody > tr.ColHeader:hover > td,
body.page-admin-stats table.modContainerLarge table.StdTable > tbody > tr.Header:hover > td {
    background-color: var(--surface-muted, #f8fafc) !important;
}

/* Alt rows */
body.page-admin-stats table.modContainerLarge table.StdTable > tbody > tr.Alt > td,
body.page-admin-stats table.modContainerLarge table.StdTable > tbody > tr > td.Alt {
    background-color: var(--surface-muted-subtle, #fafbfc) !important;
}

/* .Normal cell content (Repeater Label CssClass="Normal") */
body.page-admin-stats table.modContainerLarge table.StdTable .Normal {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px !important;
    line-height: 18px !important;
    color: var(--text-primary, #0f172a) !important;
}

/* StdTable.BorderAll legacy inner cell borders — kill (we use border-bottom). */
body.page-admin-stats table.modContainerLarge table.StdTable.BorderAll > tbody > tr > td,
body.page-admin-stats table.modContainerLarge table.StdTable.BorderAll > tbody > tr > th {
    border-right: 0 !important;
    border-left: 0 !important;
    border-top: 0 !important;
}

/* ==========================================================================
   7. Footer2 — Page 1 / Page 2 toggle buttons
   ----------------------------------------------------------------------------
   Filter section's Footer2 has 2 LinkButtons (Back-arrow Page1 / Continue-arrow
   Page2). Style both as ghost-pill secondaries (no last-button-wins primary
   here — they're navigation toggles, not commit actions).
   ========================================================================== */
body.page-admin-stats .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-stats .modFooter2:empty {
    display: none !important;
}
body.page-admin-stats .modFooter2 a,
body.page-admin-stats .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-stats .modFooter2 a:hover,
body.page-admin-stats .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;
}

/* <ins>&nbsp;</ins> spacer + legacy ImageManager sprite suppression. */
body.page-admin-stats .modFooter2 a > ins,
body.page-admin-stats .modFooter2 .LinkButton > ins {
    display: none !important;
}
body.page-admin-stats .modFooter2 a img,
body.page-admin-stats .modFooter2 .LinkButton img {
    display: none !important;
}