/* ==========================================================================
   component.css — modern UI layer for RMWebReport
   --------------------------------------------------------------------------
   ALL rules are scoped under `.rm-modern`. A page is only restyled once its
   content is wrapped in <div class="rm-modern"> ... </div>, so pages that
   have not opted in are never affected.

   Design direction: keep the corporate blue (#20619E) as the accent, refined
   with cleaner spacing, rounded surfaces, subtle shadows and better type.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
.rm-modern {
    /* Brand */
    --rm-brand: #20619e;
    --rm-brand-hover: #1b5288;
    --rm-brand-active: #164573;
    --rm-brand-tint: #eef4fb;

    /* Neutrals */
    --rm-surface: #ffffff;
    --rm-bg: #f5f7fa;
    --rm-border: #e2e8f0;
    --rm-border-strong: #8194ac;
    --rm-text: #1f2933;
    --rm-muted: #5b6b81;
    --rm-error: #c0392b;

    /* Spacing scale */
    --rm-space-1: 4px;
    --rm-space-2: 8px;
    --rm-space-3: 12px;
    --rm-space-4: 16px;
    --rm-space-5: 24px;
    --rm-space-6: 32px;

    /* Radii / elevation / motion */
    --rm-radius: 10px;
    --rm-radius-sm: 6px;
    --rm-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 16px -8px rgba(15, 23, 42, .18);
    --rm-shadow-focus: 0 0 0 3px rgba(32, 97, 158, .25);
    --rm-transition: 150ms ease;

    /* Base typography */
    font-family: "Segoe UI", "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--rm-text);
}

.rm-modern *,
.rm-modern *::before,
.rm-modern *::after {
    box-sizing: border-box;
}

/* --- Headings ------------------------------------------------------------ */
/* Override the global small-caps h2 coming from Site.css. */
.rm-modern h2 {
    font-variant: normal;
    text-transform: none;
    font-weight: 600;
    font-size: 1.55rem;
    line-height: 1.25;
    height: auto;
    color: var(--rm-text);
    margin: 0 0 var(--rm-space-4) 0;
    letter-spacing: -0.01em;
}

/* --- Card ---------------------------------------------------------------- */
.rm-modern .rm-card {
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-radius);
    box-shadow: var(--rm-shadow);
    padding: var(--rm-space-5);
    margin-bottom: var(--rm-space-5);
    max-width: 100%;
    overflow-x: auto; /* contain wide filter tables so they never escape the page */
}

/* --- Filter form (existing <table> gets class="rm-form") ----------------- */
.rm-modern .rm-form {
    border-collapse: separate;
    border-spacing: 0;
    width: auto;
    height: auto !important;
}

.rm-modern .rm-form td {
    padding: var(--rm-space-2) var(--rm-space-3);
    vertical-align: middle;
    height: auto !important;
    width: auto !important;
    color: var(--rm-text);
}

.rm-modern .rm-form td[valign="top"] {
    vertical-align: top;
}

.rm-modern .rm-form td[valign="bottom"] {
    vertical-align: bottom;
}

/* Label cells / plain-text cells read as muted field captions. */
.rm-modern .rm-form td span,
.rm-modern .rm-form td:not(:has(input)):not(:has(select)):not(:has(table)) {
    color: var(--rm-muted);
    font-weight: 500;
}

/* --- Text inputs & list boxes (filter form ONLY) ------------------------- */
/* Scoped to .rm-form so these do NOT leak into the ReportViewer's own
   toolbar controls (page box / find box / zoom dropdown live inside
   .repViewer, not .rm-form). */
.rm-modern .rm-form input[type="text"],
.rm-modern .rm-form input[type="password"],
.rm-modern .rm-form select {
    font: inherit;
    color: var(--rm-text);
    background: var(--rm-surface);
    border: 1px solid var(--rm-border-strong);
    border-radius: var(--rm-radius-sm);
    padding: var(--rm-space-2) var(--rm-space-3);
    min-height: 40px;
    transition: border-color var(--rm-transition), box-shadow var(--rm-transition);
}

/* List boxes get the .rm-listbox class (any SelectionMode). Class-driven so
   single- and multi-select list boxes look identical. */
.rm-modern .rm-listbox {
    width: min(300px, 100%);
    min-width: 170px;
    min-height: 0;
    padding: var(--rm-space-1);
}

.rm-modern .rm-listbox option {
    padding: 4px 8px;
    border-radius: 4px;
}

/* Single-select dropdowns (asp:DropDownList) — a sensible width, responsive. */
.rm-modern .rm-form select:not([multiple]):not(.rm-listbox) {
    min-width: 220px;
    max-width: 100%;
}

/* Checkboxes (asp:CheckBox) — brand accent. */
.rm-modern .rm-form input[type="checkbox"] {
    accent-color: var(--rm-brand);
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: middle;
    cursor: pointer;
}

/* Responsive sizing: no fixed pixel widths in markup. Fields take a
   comfortable size but shrink to fit narrower containers via min(). */
.rm-modern .rm-form input[type="text"],
.rm-modern .rm-form input[type="password"] {
    width: min(170px, 100%);
    min-width: 110px;
}

.rm-modern .rm-form input[type="text"]:hover,
.rm-modern .rm-form input[type="password"]:hover,
.rm-modern .rm-form select:hover {
    border-color: var(--rm-brand);
}

.rm-modern .rm-form input[type="text"]:focus,
.rm-modern .rm-form input[type="password"]:focus,
.rm-modern .rm-form select:focus {
    outline: none;
    border-color: var(--rm-brand);
    box-shadow: var(--rm-shadow-focus);
}

/* --- Buttons ------------------------------------------------------------- */
.rm-modern .rm-btn,
.rm-modern input[type="submit"].rm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: var(--rm-space-2) var(--rm-space-5);
    width: auto !important;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--rm-brand);
    border: 1px solid var(--rm-brand);
    border-radius: var(--rm-radius-sm);
    cursor: pointer;
    transition: background var(--rm-transition), border-color var(--rm-transition), box-shadow var(--rm-transition);
}

.rm-modern .rm-btn,
.rm-modern input[type="submit"].rm-btn.disabled{
    background:var(--rm-muted);
}

.rm-modern .rm-btn:hover {
    background: var(--rm-brand-hover);
    border-color: var(--rm-brand-hover);
}

.rm-modern .rm-btn:active {
    background: var(--rm-brand-active);
    border-color: var(--rm-brand-active);
}

.rm-modern .rm-btn:focus-visible {
    outline: none;
    box-shadow: var(--rm-shadow-focus);
}

/* Secondary / outline button (e.g. "Clear Selection"). */
.rm-modern .rm-btn--secondary,
.rm-modern input[type="submit"].rm-btn--secondary {
    color: var(--rm-brand);
    background: var(--rm-surface);
    border-color: var(--rm-border-strong);
    font-weight: 500;
    padding: var(--rm-space-2) var(--rm-space-4);
    margin-top: var(--rm-space-2);
}

.rm-modern .rm-btn--secondary:hover {
    color: var(--rm-brand-hover);
    background: var(--rm-brand-tint);
    border-color: var(--rm-brand);
}

.rm-modern .rm-btn--secondary:active {
    background: var(--rm-brand-tint);
}

/* --- Radio button lists (rendered as a <table> of radio + label) --------- */
/* The RadioButtonList renders an inner <table> with an inline width that
   squeezes multi-word labels onto two lines. Let it size to its content and
   keep each radio+label pair on a single line. */
.rm-modern .rm-form td table {
    width: auto !important;
    border-collapse: collapse;
}

.rm-modern .rm-form td table td {
    padding: 2px 4px;
    white-space: nowrap;
    vertical-align: middle;
}

.rm-modern .rm-form input[type="radio"] {
    accent-color: var(--rm-brand);
    width: 16px;
    height: 16px;
    margin: 0 6px 0 0;
    vertical-align: middle;
    cursor: pointer;
}

.rm-modern .rm-form td table label {
    cursor: pointer;
    white-space: nowrap;
    padding-right: var(--rm-space-3);
    vertical-align: middle;
}

/* --- Error message ------------------------------------------------------- */
.rm-modern .rm-error {
    display: inline-block;
    color: var(--rm-error);
    font-weight: 500;
}

.rm-modern .rm-error:empty {
    display: none;
}

/* --- Report menu / link grid (HOReportList and the other *ReportList) ----
   The markup is a legacy hand-laid <table>; we can't fully decouple row
   heights, but a tight, consistent rhythm + clear type hierarchy makes it
   read as an intentional directory. */
.rm-modern .rm-linkgrid {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9rem;
}

.rm-modern .rm-linkgrid td {
    padding: 1px 32px 1px 0;
    vertical-align: top;
    line-height: 1.4;
}

/* Column header row (For Individual Store / Store Comparison / AR) — the
   prominent category level. */
.rm-modern .rm-linkgrid tr:first-child td {
    font-weight: 700;
    color: var(--rm-text);
    font-size: 1rem;
    letter-spacing: -0.01em;
    border-bottom: 2px solid var(--rm-brand);
    padding-bottom: 10px;
}

/* Section headings inside the grid (Current Report / History Report) */
.rm-modern .rm-linkgrid h1 {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rm-muted);
    font-variant: normal;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 24px 0 6px;
    height: auto;
}

.rm-modern .rm-linkgrid a {
    display: inline-block;
    color: var(--rm-brand);
    text-decoration: none;
    padding: 4px 0;
    line-height: 1.35;
    transition: color var(--rm-transition);
}

.rm-modern .rm-linkgrid a:hover {
    color: var(--rm-brand-hover);
    text-decoration: underline;
}

/* --- Data grid (asp:GridView) -------------------------------------------
   The GridView renders a legacy <table> with per-row inline colours. Remove
   those style sub-elements in markup and add class="rm-grid" so the grid reads
   as a clean, modern data table. */
.rm-modern .rm-grid {
    border-collapse: collapse;
    background: var(--rm-surface);
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-radius);
    font-size: 0.95rem;
    color: var(--rm-text);
    overflow: hidden;
}

.rm-modern .rm-grid th,
.rm-modern .rm-grid td {
    padding: var(--rm-space-2) var(--rm-space-4);
    text-align: left;
    border-bottom: 1px solid var(--rm-border);
    vertical-align: middle;
}

.rm-modern .rm-grid th {
    background: var(--rm-brand);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

.rm-modern .rm-grid tr:nth-child(even) td {
    background: var(--rm-bg);
}

.rm-modern .rm-grid tr:hover td {
    background: var(--rm-brand-tint);
}

.rm-modern .rm-grid tr:last-child td {
    border-bottom: none;
}

.rm-modern .rm-grid a {
    color: var(--rm-brand);
    text-decoration: none;
    font-weight: 500;
}

.rm-modern .rm-grid a:hover {
    text-decoration: underline;
}

/* --- Vertical button column (stacked actions beside a grid) -------------- */
.rm-modern .rm-btncol {
    display: flex;
    flex-direction: column;
    gap: var(--rm-space-3);
    align-items: stretch;
}

.rm-modern .rm-btncol .rm-btn {
    width: 100% !important;
    margin-top: 0;
}

/* --- Inline field spacing (replaces &nbsp;&nbsp; spacer runs) ------------
   Legacy markup separated adjacent inline fields (label, input, select,
   button) with runs of &nbsp;. Give those element types a trailing margin
   instead so the gap comes from CSS, not markup. Scoped to .rm-card so it
   reaches both flow-style filter panels and table cells inside them, but
   never the ReportViewer. Checkbox/radio inputs are excluded on purpose —
   their own label sits immediately after with no gap wanted there; the
   label itself still gets the trailing margin. Trailing margin on a group's
   last element is harmless (invisible whitespace). */
.rm-modern .rm-card span,
.rm-modern .rm-card label,
.rm-modern .rm-card input[type="text"],
.rm-modern .rm-card input[type="password"],
.rm-modern .rm-card select,
.rm-modern .rm-card input[type="submit"],
.rm-modern .rm-card input[type="button"] {
    margin-right: var(--rm-space-2);
}

/* --- ReportViewer frame -------------------------------------------------- */
/* The legacy Microsoft ReportViewer (WebForms v11) can't be meaningfully
   restyled with CSS: its toolbar buttons are sprite images baked into the
   control and the report body's cells carry inline styles from the .rdlc.
   Purely cosmetic frame — do NOT constrain width or overflow, or wide reports
   (many columns) get clipped/narrowed. The control sizes itself and provides
   its own scroll panes; we only add a border. */
.rm-modern .repViewer {
    border: 1px solid var(--rm-border);
    border-radius: var(--rm-radius);
    background: var(--rm-surface);
    margin-top: var(--rm-space-4);
}

/* --- Loading modal / progress ------------------------------------------- */
/* NOTE: the ModalPopupExtender renders the popup + backdrop at the end of the
   <form>, i.e. OUTSIDE the .rm-modern wrapper, so these two are intentionally
   NOT scoped under .rm-modern. */
.updateProgress {
    background-color: #fff;
    position: absolute;
    height: 60px;
    width: 440px;
    color: #1f2933;
    opacity: 0.98;
    line-height: 1.65rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px -8px rgba(15, 23, 42, .45);
}

.modalBackground {
    position: absolute;
    display: grid;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    place-items: center;
    background-color: rgba(15, 23, 42, .35);
}

/* The `Hide` div (host of the ModalPopupExtender) and the spinner/text inside
   `.updateProgress` previously carried three separate inline style="" blocks
   per page. Same NOT-scoped-to-.rm-modern reasoning as above. */
.rm-preloader-host {
    margin-left: 230px;
    visibility: hidden;
}

.rm-preloader-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rm-preloader-text {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 16px;
}

/* --- Responsive ---------------------------------------------------------- */
/* The filter form is a legacy <table>; on narrow viewports let it scroll
   inside the card instead of forcing the page wider, and tighten padding. */
@media (max-width: 720px) {
    .rm-modern .rm-card {
        padding: var(--rm-space-4);
        overflow-x: auto;
    }

    .rm-modern .rm-form td {
        padding: var(--rm-space-2);
    }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .rm-modern * {
        transition: none !important;
    }
}