/* =====================================================================
   common/PagerPolish.css
   =====================================================================
   2026-05-16 acarter: enterprise-grade pagination control.

   PROBLEM (Anthony screenshot 2026-05-16):
   The existing .cf-pager renders 7 page-number boxes + First/Prev/Next/
   Last symbols (~9 boxes total). On Marina's session the page numbers
   themselves were INVISIBLE inside the white pills -- only the highlighted
   current page showed text. Likely cause: some CSS inheritance chain
   collapses the link color to match the white background. The screenshot
   showed 8 empty white boxes + one filled "1" pill.

   Anthony's directive: "show only 3 pages with numbers and a visible
   previous and next button. Color change when selected. Apply to all
   pages once you confirm with me one page style that works."

   FIX
   ---
   Introduce a NEW class `.cf-pager-v2` (NOT a tweak of .cf-pager so we
   can isolate the preview to a single page). Apply it as
   PagerStyle-CssClass="cf-pager-v2" + PagerSettings-PageButtonCount="3"
   on one reference GridView. Once Anthony approves, a Python sweep
   replaces "cf-pager" with "cf-pager-v2" + PageButtonCount="7" with
   PageButtonCount="3" across all paginated GridViews.

   DESIGN
   ------
   - Numbers ALWAYS visible (color set with high specificity + !important
     to defeat any inherited link styling)
   - Exactly 3 numeric buttons (current + 1 before + 1 after) -- handled
     by ASP.NET via PageButtonCount="3"
   - Big readable Prev / Next pill buttons with chevrons + labels
   - Selected page is a clear color-changed pill (gradient navy -> indigo)
   - Disabled prev/next (at first/last page) visibly grayed out
   - Mobile: labels drop, chevrons stay; numbers stay legible
   - Pure CSS -- no JS, no markup changes beyond the CssClass swap
   ===================================================================== */

/* ── Container ──────────────────────────────────────────────────── */
.cf-pager-v2 {
    background: transparent !important;
    color: #0f172a !important;
    font-size: 13px !important;
    padding: 16px 0 8px !important;
    border-top: 1px solid #e5e7eb !important;
}
.cf-pager-v2 td {
    padding: 0 !important;
    text-align: center !important;
}
.cf-pager-v2 table {
    display: inline-block !important;
    margin: 0 auto !important;
}

/* ── Page-number pills (both <a> and <span>) ────────────────────── */
.cf-pager-v2 a,
.cf-pager-v2 span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    height: 36px !important;
    padding: 0 12px !important;
    margin: 0 4px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #0f172a !important;       /* HARD override -- defeats any inherited link color */
    text-decoration: none !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    font-size: 13px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
    transition: background 140ms, border-color 140ms, color 140ms, transform 100ms, box-shadow 140ms !important;
    cursor: pointer !important;
    /* Defeat any parent font-size:0 or text-indent tricks */
    text-indent: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hoverable links lift slightly */
.cf-pager-v2 a:hover {
    background: #f1f5f9 !important;
    border-color: #1f3a5f !important;
    color: #1f3a5f !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(31, 58, 95, 0.18) !important;
}
.cf-pager-v2 a:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10) !important;
}

/* ── Current page (<span>) -- color change on selected ─────────── */
.cf-pager-v2 span {
    background: linear-gradient(135deg, #1f3a5f 0%, #635bff 100%) !important;
    border-color: #635bff !important;
    color: #ffffff !important;
    cursor: default !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 8px rgba(99, 91, 255, 0.32) !important;
}

/* ── Prev / Next pills -- BIG visible buttons with labels ───────── */
/* ASP.NET renders the previous/next as <a> with title="Previous page"
   or title="Next page" (NumericFirstLast mode). We expand those into
   bigger pills + add "Prev" / "Next" labels via CSS ::before/::after
   so the symbol-only text becomes a readable button. */
.cf-pager-v2 a[title*="Previous"],
.cf-pager-v2 a[title*="previous"],
.cf-pager-v2 a[title*="Prev"] {
    min-width: 92px !important;
    padding: 0 14px 0 12px !important;
    background: #f8fafc !important;
    color: #1f3a5f !important;
    font-weight: 700 !important;
    /* Hide the original text (usually "<" or unicode chevron) -- a
       transparent-color trick keeps spacing but visually hides the glyph */
    font-size: 0 !important;
}
.cf-pager-v2 a[title*="Previous"]::before,
.cf-pager-v2 a[title*="previous"]::before,
.cf-pager-v2 a[title*="Prev"]::before {
    content: "\2039  Previous";    /* single-left-pointing angle + label */
    font-size: 13px !important;
    letter-spacing: 0.2px;
    line-height: 1;
}

.cf-pager-v2 a[title*="Next"],
.cf-pager-v2 a[title*="next"] {
    min-width: 92px !important;
    padding: 0 12px 0 14px !important;
    background: #f8fafc !important;
    color: #1f3a5f !important;
    font-weight: 700 !important;
    font-size: 0 !important;
}
.cf-pager-v2 a[title*="Next"]::before,
.cf-pager-v2 a[title*="next"]::before {
    content: "Next  \203A";        /* label + single-right-pointing angle */
    font-size: 13px !important;
    letter-spacing: 0.2px;
    line-height: 1;
}

/* First / Last (per NumericFirstLast mode) -- subtle, smaller */
.cf-pager-v2 a[title*="First"],
.cf-pager-v2 a[title*="first"] {
    min-width: 38px !important;
    font-size: 0 !important;
    background: #f8fafc !important;
    color: #475569 !important;
}
.cf-pager-v2 a[title*="First"]::before,
.cf-pager-v2 a[title*="first"]::before {
    content: "\AB";                /* double-left-angle */
    font-size: 14px !important;
    font-weight: 700 !important;
}
.cf-pager-v2 a[title*="Last"],
.cf-pager-v2 a[title*="last"] {
    min-width: 38px !important;
    font-size: 0 !important;
    background: #f8fafc !important;
    color: #475569 !important;
}
.cf-pager-v2 a[title*="Last"]::before,
.cf-pager-v2 a[title*="last"]::before {
    content: "\BB";                /* double-right-angle */
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Hover on all First/Prev/Next/Last -- consistent navy fill */
.cf-pager-v2 a[title*="Previous"]:hover,
.cf-pager-v2 a[title*="previous"]:hover,
.cf-pager-v2 a[title*="Prev"]:hover,
.cf-pager-v2 a[title*="Next"]:hover,
.cf-pager-v2 a[title*="next"]:hover,
.cf-pager-v2 a[title*="First"]:hover,
.cf-pager-v2 a[title*="first"]:hover,
.cf-pager-v2 a[title*="Last"]:hover,
.cf-pager-v2 a[title*="last"]:hover {
    background: #1f3a5f !important;
    border-color: #1f3a5f !important;
    color: #ffffff !important;
}
.cf-pager-v2 a[title*="Previous"]:hover::before,
.cf-pager-v2 a[title*="previous"]:hover::before,
.cf-pager-v2 a[title*="Prev"]:hover::before,
.cf-pager-v2 a[title*="Next"]:hover::before,
.cf-pager-v2 a[title*="next"]:hover::before,
.cf-pager-v2 a[title*="First"]:hover::before,
.cf-pager-v2 a[title*="first"]:hover::before,
.cf-pager-v2 a[title*="Last"]:hover::before,
.cf-pager-v2 a[title*="last"]:hover::before {
    color: #ffffff !important;
}

/* ── Mobile -- drop the Prev/Next labels, keep chevrons ─────────── */
@media (max-width: 640px) {
    .cf-pager-v2 a,
    .cf-pager-v2 span {
        min-width: 34px !important;
        height: 34px !important;
        padding: 0 9px !important;
        margin: 0 2px !important;
    }
    .cf-pager-v2 a[title*="Previous"]::before,
    .cf-pager-v2 a[title*="previous"]::before,
    .cf-pager-v2 a[title*="Prev"]::before { content: "\2039" !important; }
    .cf-pager-v2 a[title*="Next"]::before,
    .cf-pager-v2 a[title*="next"]::before { content: "\203A" !important; }
    .cf-pager-v2 a[title*="Previous"],
    .cf-pager-v2 a[title*="previous"],
    .cf-pager-v2 a[title*="Prev"],
    .cf-pager-v2 a[title*="Next"],
    .cf-pager-v2 a[title*="next"] {
        min-width: 34px !important;
        padding: 0 9px !important;
    }
}

/* =====================================================================
   Landing-page template card -- graceful "image missing" fallback.
   Used by /CampaignCenter/LandingPages.aspx where the tumb column points
   at /Files/<store>/<emp>/templates/Landing/sampleN.webp files that no
   longer exist on the App Service file share (404 on every URL).
   Until the file migration happens, render a clean gradient placeholder
   instead of a browser's broken-image glyph. Wire by adding
   onerror="this.classList.add('cf-tpl-broken')" on the <asp:Image>.
   ===================================================================== */
.cf-tpl-broken {
    /* Hide the broken-image icon */
    background: linear-gradient(135deg, #eef2f7 0%, #d8e0ec 100%) !important;
    border: 1.5px dashed #c8d2e0 !important;
    border-radius: 10px !important;
    position: relative;
    /* Replace the broken-img glyph with a CSS-only placeholder */
    color: transparent !important;
    /* Force the alt-text not to render at all */
    font-size: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    object-fit: cover !important;
}
.cf-tpl-broken::after {
    content: "Preview unavailable";
    position: absolute;
    inset: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #7a8597 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-indent: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: transparent;
}
/* The ::before draws a tiny "image" icon above the label */
.cf-tpl-broken::before {
    content: "";
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #fff 0%, #e7eaf0 100%);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(31, 58, 95, 0.10), inset 0 0 0 1px rgba(31, 58, 95, 0.10);
}