/* ============================================================
   ACS Water Billing — shared UI kit
   ------------------------------------------------------------
   One vocabulary for page headers, KPI tiles, chart cards and the
   dashboard notice, shared by the Admin portal (Admin/Admin.master)
   and the Client portal (site.master).

   Design source: kepro-wms
   (plan/design/interactive/design-system/design-system.css and
   apps/web/src/app/globals.css) — .page-head, .metric, .card,
   .icon-box. Scale is tuned down for these dense WebForms screens,
   the same way assets/css/acs-kepro-theme.css already does.

   Rules this file follows:
   1. Two layers, both safe:
      a) OPT-IN classes (.acs-*) that markup can adopt deliberately.
      b) ADOPTION selectors that latch onto class patterns already
         present across the app, so existing pages modernise with no
         markup edit at all. Those are listed under "Adoption" below
         and never touch IDs, structure or ViewState.
   2. Tenant brand colours are NOT set here. --sideNavcolor /
      --topNavcolor are applied per company at runtime
      (assets/js/translate.js) and must stay tenant-owned, per
      AGENTS.md. Only brand-neutral tokens and standard state colours
      (success / warning / danger / info) appear in this file.
   3. Nothing in here targets select2, bootstrap-select/.selectpicker
      or Telerik RadComboBox internals. Those widgets replace the
      native control with their own DOM and restyling them from a
      global sheet is how dropdowns break; they are deliberately left
      to their own stylesheets.
   ============================================================ */

:root {
    /* Neutrals + state colours (brand-neutral, from the KEPRO design system).
       Re-declared rather than imported so this file also works on the Client
       portal, which does not load acs-kepro-theme.css. Values are identical,
       so loading both is a no-op. */
    --acs-ink: #0f172a;
    --acs-text: #334155;
    --acs-muted: #64748b;
    --acs-faint: #94a3b8;
    --acs-line: #e2e8f0;
    --acs-line-soft: #f1f5f9;
    --acs-surface: #ffffff;
    --acs-page: #f8fafc;

    --acs-success: #3caa32;
    --acs-success-bg: #eefbe9;
    --acs-info: #1478be;
    --acs-info-bg: #e9f4fb;
    --acs-warning: #d97706;
    --acs-warning-bg: #fffbeb;
    --acs-danger: #e11d48;
    --acs-danger-bg: #fff1f2;
    --acs-purple: #7c3aed;
    --acs-purple-bg: #f5f3ff;
    --acs-teal: #28aadc;
    --acs-teal-bg: #e7f6fc;

    --acs-r-card: 14px;
    --acs-r-control: 10px;
    --acs-r-btn: 10px;
    --acs-r-icon: 12px;
    --acs-r-pill: 999px;
    --acs-shadow-card: 0 6px 20px rgba(15, 23, 42, .05);
    --acs-shadow-raised: 0 12px 32px rgba(15, 23, 42, .09);

    --acs-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================================
   Page header
   ============================================================ */

.acs-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.acs-page-head-main {
    min-width: 0;
    flex: 1 1 320px;
}

.acs-page-title {
    margin: 0;
    font-family: var(--acs-font-ui);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--acs-ink);
}

.acs-page-sub {
    margin: 5px 0 0;
    font-family: var(--acs-font-ui);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--acs-muted);
}

.acs-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ============================================================
   KPI tiles
   Promoted from the pattern shipped on Admin/Reports/Analytics.aspx
   (.an-kpi), which is itself KEPRO's .metric at admin density.
   ============================================================ */

.acs-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.acs-kpi {
    position: relative;
    overflow: hidden;
    display: block;
    background: var(--acs-surface);
    border: 1px solid var(--acs-line-soft);
    border-radius: var(--acs-r-card);
    padding: 16px 18px;
    box-shadow: var(--acs-shadow-card);
    font-family: var(--acs-font-ui);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* The 4px accent rail is the KEPRO metric signature. */
.acs-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--acs-info);
}

.acs-kpi.ok::before { background: var(--acs-success); }
.acs-kpi.warn::before { background: var(--acs-warning); }
.acs-kpi.danger::before { background: var(--acs-danger); }
.acs-kpi.info::before { background: var(--acs-teal); }
.acs-kpi.purple::before { background: var(--acs-purple); }
.acs-kpi.neutral::before { background: var(--acs-faint); }

.acs-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--acs-shadow-raised);
    border-color: var(--acs-line);
}

/* KPI tiles are sometimes anchors (drill-through). Keep them looking like
   tiles, not links, in every state. */
a.acs-kpi,
a.acs-kpi:hover,
a.acs-kpi:focus {
    text-decoration: none;
    color: inherit;
}

.acs-kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.acs-kpi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--acs-muted);
    letter-spacing: .01em;
}

.acs-kpi-value {
    margin: 6px 0 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--acs-ink);
    font-variant-numeric: tabular-nums;
}

.acs-kpi-sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--acs-faint);
}

/* ---------- Icon chips ---------- */

.acs-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: var(--acs-r-icon);
    font-size: 15px;
    line-height: 1;
}

.acs-icon-box.ib-blue { color: var(--acs-info); background: var(--acs-info-bg); }
.acs-icon-box.ib-emerald { color: var(--acs-success); background: var(--acs-success-bg); }
.acs-icon-box.ib-amber { color: var(--acs-warning); background: var(--acs-warning-bg); }
.acs-icon-box.ib-rose { color: var(--acs-danger); background: var(--acs-danger-bg); }
.acs-icon-box.ib-purple { color: var(--acs-purple); background: var(--acs-purple-bg); }
.acs-icon-box.ib-teal { color: var(--acs-teal); background: var(--acs-teal-bg); }
.acs-icon-box.ib-slate { color: var(--acs-ink); background: #eaf0f4; }

/* ============================================================
   Chart / content cards
   ============================================================ */

.acs-chart-card {
    background: var(--acs-surface);
    border: 1px solid var(--acs-line-soft);
    border-radius: var(--acs-r-card);
    box-shadow: var(--acs-shadow-card);
    padding: 18px;
    margin-bottom: 18px;
    font-family: var(--acs-font-ui);
}

.acs-chart-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.acs-chart-head-text {
    min-width: 0;
    flex: 1;
}

.acs-chart-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--acs-ink);
}

.acs-chart-sub {
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--acs-muted);
}

/* The chart canvas itself sits on plain surface — a tinted plot area fights
   the series colours. */
.acs-chart-body {
    background: var(--acs-surface);
    border-radius: var(--acs-r-control);
}

/* ============================================================
   Notice bar
   Colours carried over from cs-legacy's long-standing hellobar
   (cs-legacy assets/css/notification.css and this repo's own
   assets/css/notification.css): cream field, amber rail, slate ink.
   Shape and type are modernised; the palette is deliberately the one
   users already recognise from Cloud School.
   ============================================================ */

.acs-notice {
    position: relative;
    background: #fcf8e1;
    border: 1px solid #f4e3ae;
    border-left: 4px solid #f6c342;
    border-radius: var(--acs-r-card);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
    padding: 14px 46px 14px 18px;
    margin-bottom: 18px;
    font-family: var(--acs-font-ui);
    color: #434c5e;
}

.acs-notice-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.acs-notice-title {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #8a6100;
}

.acs-notice-link {
    font-size: 12.5px;
    font-weight: 700;
    color: #22af73;
    text-decoration: none;
}

.acs-notice-link:hover,
.acs-notice-link:focus {
    color: #17835a;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.acs-notice-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #434c5e;
}

.acs-notice-list li {
    position: relative;
    padding-left: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acs-notice-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f6c342;
}

.acs-notice-list li strong { color: #2f3847; }

.acs-notice-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #f0dda6;
    border-radius: 8px;
    background: rgba(255, 255, 255, .7);
    color: #8a6100;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.acs-notice-close:hover {
    background: #f6c342;
    color: #fff;
}

/* ============================================================
   Adoption — modernise existing markup with no page edits
   ============================================================ */

/* The Admin portal's standard page header is
     <h3 class="text-success no-margin">Title</h3>
     <p>description</p>
     <hr />
   repeated across ~37 pages. Restyling it by selector gives all of them the
   shared header treatment without touching a single .aspx. Colour is left as
   the theme's success tone so nothing that relies on .text-success elsewhere
   shifts; only weight, size, rhythm and the divider change. */
body.page-admin h3.text-success.no-margin {
    font-family: var(--acs-font-ui);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
}

body.page-admin h3.text-success.no-margin + p {
    margin-top: 6px;
    margin-bottom: 0;
    font-family: var(--acs-font-ui);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--acs-muted);
}

body.page-admin h3.text-success.no-margin ~ hr,
body.page-admin h3.text-success.no-margin + p ~ hr {
    margin-top: 14px;
    margin-bottom: 14px;
    border-top: 1px solid var(--acs-line-soft);
}

/* Analytics shipped its own KPI tiles before this kit existed. Align the two
   so the app has one KPI look, without rewriting that page's markup. */
body.page-admin .an-kpi {
    box-shadow: var(--acs-shadow-card);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.page-admin .an-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--acs-shadow-raised);
    border-color: var(--acs-line);
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
    .acs-kpis {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
    }

    .acs-kpi { padding: 14px; }
    .acs-kpi-value { font-size: 21px; }
    .acs-page-title { font-size: 19px; }
    .acs-chart-card { padding: 14px; }
    .acs-notice { padding: 12px 42px 12px 14px; }
}

/* Users who ask for less motion get none of the lift. */
@media (prefers-reduced-motion: reduce) {
    .acs-kpi,
    body.page-admin .an-kpi {
        transition: none;
    }

    .acs-kpi:hover,
    body.page-admin .an-kpi:hover {
        transform: none;
    }
}

/* ============================================================
   Dashboard header controls and the fixed 4-up KPI row
   ============================================================ */

.acs-year-picker {
    min-width: 116px;
}

.acs-year-picker .form-control {
    height: 38px;
    padding: 6px 12px;
}

.acs-head-cta {
    white-space: nowrap;
}

/* auto-fit lets a 7th tile wrap onto a second row at some widths and sit alone,
   which is what made the dashboard look ragged. A fixed 4/2/1 ladder always
   fills its row - the tiles themselves carry the paired figures. */
.acs-kpis-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199px) {
    .acs-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .acs-kpis-4 { grid-template-columns: minmax(0, 1fr); }

    .acs-head-actions {
        width: 100%;
        gap: 8px;
    }

    .acs-year-picker { flex: 1 1 auto; min-width: 0; }
    .acs-head-cta { flex: 1 1 auto; text-align: center; }
}

/* A row nested directly inside the master's own .content > .row doubles Bootstrap's
   -15px gutter. Neutralised here rather than by restructuring the page. */
body.page-admin .content > .row > .col-md-12 > .acs-dash-row,
body.page-admin .acs-dash-row {
    margin-left: 0;
    margin-right: 0;
}

/* .content drops to 12px of side padding on a phone while Bootstrap rows still pull
   -15px, so every admin page sat 3px wider than the viewport and scrolled sideways.
   15px is what the grid contract expects. */
@media (max-width: 767px) {
    body.page-admin .content {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Dashboard split rows.
   These were Tailwind CDN grids (tw-grid + lg:tw-col-span-*). The utilities are not
   reliably generated here, so the children collapsed to 0-15px wide, spilled out of
   the page and took the dashboard 143px past the viewport at 1440px. Plain CSS grid
   does the same job without depending on the CDN. */
.acs-split-2-1,
.acs-split-3 {
    display: grid;
    gap: 18px;
    align-items: start;
    /* Explicit, because these sit directly inside a Bootstrap .row: without it the
       grid container resolved to 0 wide and every fr track collapsed with it. */
    width: 100%;
}

.acs-split-2-1 { grid-template-columns: 2fr 1fr; }
.acs-split-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* min-width:0 lets a chart shrink inside its track instead of forcing the row wider. */
.acs-split-2-1 > *,
.acs-split-3 > * {
    min-width: 0;
}

@media (max-width: 991px) {
    .acs-split-2-1,
    .acs-split-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Bill status donut on the dashboard. */
.acs-donut {
    margin: 0 0 14px;
    min-height: 40px;
}

.acs-donut-empty {
    margin: 0;
    padding: 18px 0;
    text-align: center;
    font-size: 13px;
    color: var(--acs-muted);
}

/* ============================================================
   Inputs: typeable must not look dead
   ============================================================ */

/* The admin theme fills EVERY .form-control with the page grey, so a box you can
   type in looked the same as a computed one and whole forms read as disabled.
   White = you may type here, grey = this value is calculated or locked.
   :disabled (not [disabled]) because jQuery .prop() unlocks fields without
   removing the rendered attribute. */
/* background-COLOR, not the background shorthand: the shorthand resets
   background-image and would wipe the select arrow set below. */
body.page-admin .form-control:not(:disabled):not([readonly]) {
    background-color: var(--acs-surface);
}

body.page-admin .form-control:disabled,
body.page-admin .form-control[readonly] {
    background-color: var(--acs-line-soft);
    color: var(--acs-ink);
    border-color: var(--acs-line);
    cursor: default;
}

/* A <select> stripped of its native arrow reads as a text box. selectpicker builds
   its own button and caret, so this targets plain selects only. */
body.page-admin select.form-control:not(.selectpicker) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
}

/* IE/Edge legacy draws its own arrow on top of ours. */
body.page-admin select.form-control::-ms-expand {
    display: none;
}

/* ============================================================
   Bill status summary under the donut
   ============================================================ */

.acs-donut-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
}

.acs-donut-stat {
    border: 1px solid var(--acs-line-soft);
    border-top: 3px solid var(--acs-line);
    border-radius: var(--acs-r-control);
    background: var(--acs-surface);
    padding: 8px 10px;
    text-align: center;
}

.acs-donut-stat.is-paid { border-top-color: var(--acs-success); }
.acs-donut-stat.is-partial { border-top-color: var(--acs-info); }
.acs-donut-stat.is-unpaid { border-top-color: var(--acs-warning); }

.acs-donut-stat__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--acs-muted);
}

.acs-donut-stat__value {
    display: block;
    margin-top: 2px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--acs-ink);
    font-variant-numeric: tabular-nums;
}

.acs-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.acs-store-cta { white-space: nowrap; }

@media (max-width: 991px) {
    .acs-kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .acs-kpis-3 { grid-template-columns: minmax(0, 1fr); }
    .acs-donut-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .acs-donut-stat__value { font-size: 16px; }
}

/* ============================================================
   KPI tiles - KEPRO "Horizon" skin
   Ported from kepro-wms globals.css :root[data-design-system="kepro_horizon"].
   The whole tile is tinted per tone and the accent rail is dropped; the icon sits
   in a white translucent chip. Values are kepro's, mapped onto this component's
   tone class names (info=blue, ok=emerald, warn=amber, danger=rose).
   ============================================================ */

.acs-kpi {
    border-color: #dbe4ee;
    background: #f8fafc;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .055);
}

/* Horizon has no accent rail - the tint carries the tone instead. */
.acs-kpi::before {
    display: none;
}

.acs-kpi.info { border-color: #d6def6; background: #e8edfb; }
.acs-kpi.ok { border-color: #d3f0e0; background: #e6f7ee; }
.acs-kpi.warn { border-color: #f3e6c9; background: #fbf3e6; }
.acs-kpi.danger { border-color: #f4d5d5; background: #fbe9e9; }
.acs-kpi.purple { border-color: #e0d8f5; background: #eee9fb; }
.acs-kpi.teal { border-color: #cfece9; background: #e5f7f5; }
.acs-kpi.neutral { border-color: #dce5ee; background: #f1f5f9; }

/* The chip goes white-on-tint. Scoped to .acs-kpi so icon boxes used elsewhere
   keep their own tinted backgrounds. */
.acs-kpi .acs-icon-box {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .74);
    border-radius: 12px;
    background-color: rgba(255, 255, 255, .72);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .055);
}

.acs-kpi .acs-kpi-value {
    font-size: 25px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
}

.acs-kpi .acs-kpi-label {
    color: #526174;
    font-weight: 600;
}

.acs-kpi .acs-kpi-sub {
    color: #6b7a8d;
}

.acs-kpi:hover {
    box-shadow: 0 14px 30px rgba(15, 23, 42, .11);
}

@media (max-width: 767px) {
    .acs-kpi .acs-kpi-value { font-size: 22px; }
}

/* The bills/payments chart keeps every month and is drawn wider than its card when
   they will not all fit, so this is what makes the extra months reachable. A quiet
   scrollbar: visible enough to invite the drag, not loud enough to compete with the
   chart. */
.acs-chart-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.acs-chart-scroll::-webkit-scrollbar {
    height: 8px;
}

.acs-chart-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.acs-chart-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.acs-chart-scroll::-webkit-scrollbar-thumb:hover {
    background: #b6c2d1;
}

/* ============================================================
   Monthly Summaries - bills breakdown row and the month picker
   ============================================================ */

/* Four figures that belong side by side. They were stacked inside the middle
   summary column, which made a tall narrow list of what reads better as one row. */
.acs-bills-breakdown {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--acs-line-soft);
}

.acs-breakdown-title {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--acs-faint);
}

.acs-month-picker {
    min-width: 190px;
}

.acs-month-picker__label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--acs-muted);
}

.acs-month-picker .form-control {
    height: 42px;
}

/* ============================================================
   bootstrap-select: the doubled box
   ============================================================ */

/* bootstrap-select copies the original <select>'s classes onto the wrapper it
   builds, so a "form-control selectpicker" becomes
   <div class="btn-group bootstrap-select form-control"> wrapping
   <button class="btn dropdown-toggle">. Both then paint a white background and a
   border, and the button is 36px inside a 34px wrapper, so it visibly overhangs -
   a box drawn on top of another box. Reported against the country dropdown; it
   affects every selectpicker in the app, including the company switcher in the
   header.

   Only the WRAPPER is neutralised. The button, the menu, the search box and the
   rest of the plugin's internals are left alone, which keeps the rule at the top
   of this file ("nothing in here targets select2 or bootstrap-select internals")
   honest: this is undoing a form class the plugin should not have copied onto a
   div in the first place, not restyling the plugin.

   The body.page-admin prefix is not decoration. vendor.css already ships
   ".bootstrap-select.form-control { border: none; padding: 0 }", and it loses:
   acs-kepro-theme.css styles "body.page-admin .form-control" (0,0,2,1) and this
   file styles "body.page-admin .form-control:not(:disabled):not([readonly])"
   (0,0,4,1), and those are what paint the wrapper. So the override has to be
   scoped the same way to outrank them. */
/* The :not() pair is not filler - it is what carries the specificity past this
   file's own "body.page-admin .form-control:not(:disabled):not([readonly])".
   A wrapper div is never disabled or readonly, so both always match. */
body.page-admin .bootstrap-select.form-control:not(:disabled):not([readonly]),
body.page-portal .bootstrap-select.form-control:not(:disabled):not([readonly]),
.bootstrap-select.form-control {
    background: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    height: auto;
}

/* The wrapper is what the theme was sizing, so the button has to carry the height
   now that the wrapper no longer does. */
body.page-admin .bootstrap-select.form-control > .dropdown-toggle,
body.page-portal .bootstrap-select.form-control > .dropdown-toggle,
.bootstrap-select.form-control > .dropdown-toggle {
    width: 100%;
    height: auto;
    min-height: 36px;
}

/* ============================================================
   Company switcher in the top nav
   ============================================================ */

/* .acs-top-nav sets `color: var(--topnav-text-color, #fff) !important` on everything
   inside the header so the bar's own text reads against the tenant colour. The company
   switcher is a bootstrap-select, whose button and menu have their OWN white
   background, so it inherited white-on-white and the selected company disappeared.
   Needs !important to beat that rule, and is scoped to the switcher so the rest of the
   header keeps its white text. */
.acs-top-nav .bootstrap-select .dropdown-toggle,
.acs-top-nav .bootstrap-select .dropdown-toggle .filter-option,
.acs-top-nav .bootstrap-select .dropdown-toggle .filter-option-inner,
.acs-top-nav .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    color: var(--acs-ink, #0f172a) !important;
}

/* The caret is drawn with a border colour, not a glyph. */
.acs-top-nav .bootstrap-select .dropdown-toggle .caret {
    border-top-color: var(--acs-muted, #64748b) !important;
}

/* The open menu is a white panel for the same reason: its rows, the search box and
   the "nothing found" text all need readable ink. */
.acs-top-nav .bootstrap-select .dropdown-menu,
.acs-top-nav .bootstrap-select .dropdown-menu li a,
.acs-top-nav .bootstrap-select .dropdown-menu li a span.text,
.acs-top-nav .bootstrap-select .dropdown-menu .no-results {
    color: var(--acs-ink, #0f172a) !important;
}

.acs-top-nav .bootstrap-select .dropdown-menu .bs-searchbox .form-control {
    color: var(--acs-ink, #0f172a) !important;
}

/* A selected or hovered row keeps white text on its highlight fill. */
.acs-top-nav .bootstrap-select .dropdown-menu li.selected > a,
.acs-top-nav .bootstrap-select .dropdown-menu li > a:hover,
.acs-top-nav .bootstrap-select .dropdown-menu li > a:focus {
    color: #ffffff !important;
}

/* ============================================================
   Lazy sections
   A section whose data is fetched as it is scrolled towards shows a quiet
   placeholder first, so the space is obviously "loading" rather than broken.
   ============================================================ */

.acs-lazy-pending {
    position: relative;
    min-height: 140px;
}

.acs-lazy-pending::after {
    content: "Loading...";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--acs-faint);
    background: var(--acs-surface);
    border-radius: var(--acs-r-card);
}

@media (prefers-reduced-motion: reduce) {
    .acs-lazy-pending::after { transition: none; }
}

/* ============================================================
   "More filters" panel (list pages with many filters)
   ============================================================ */

.acs-more-filters {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px dashed var(--acs-line);
}

.acs-more-filters-toggle {
    white-space: nowrap;
}

.acs-more-filters-toggle.is-open {
    background: var(--acs-info-bg);
    border-color: var(--acs-info);
    color: var(--acs-info);
}

/* The filter rows themselves: a little breathing room between them, since these
   pages stack several rows of controls. */
.acs-filter-rows > .row + .row {
    margin-top: 6px;
}

/* ============================================================
   Compact KPI strip (totals band above a list grid)
   ============================================================

   The full .acs-kpi tile is ~110px tall. On a list page the totals sit between
   the filters and the grid, and that height comes straight out of the rows the
   operator opened the page to read - so this is the same Horizon palette at
   roughly half the height, label above value, no icon. */

.acs-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* Sized so the whole strip holds one row on a 1366-wide laptop - seven cards plus
   the sidebar is what the widths below are solving for, not an arbitrary minimum.
   Shrink these and the last card (the balance, the one that matters most) is the
   one that drops. */
.acs-kpi-chip {
    flex: 1 1 108px;
    min-width: 100px;
    padding: 7px 10px;
    border: 1px solid var(--acs-line);
    border-radius: 10px;
    background: var(--acs-surface);
    line-height: 1.25;
}

/* Nothing in the strip is bold. Eight figures all shouting at once is how the old
   row of h5 blocks ate its height; weight 500/600 and tabular numerals read as
   cleanly at a glance and leave the width for the numbers themselves. */
.acs-kpi-chip__label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #526174;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acs-kpi-chip__value {
    display: block;
    margin-top: 2px;
    font-size: 16px;
    font-weight: 600;
    color: var(--acs-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* A card carrying two related figures - standing and other charges - side by side,
   so the pair costs one slot instead of two. */
.acs-kpi-chip--dual {
    display: flex;
    gap: 8px;
    flex-grow: 1.3;
    flex-basis: 145px;
}

.acs-kpi-chip__pair {
    flex: 1 1 0;
    min-width: 0;
}

.acs-kpi-chip__pair + .acs-kpi-chip__pair {
    padding-left: 8px;
    border-left: 1px solid rgba(15, 23, 42, .09);
}

/* Same tints as the full tiles, so a page using both reads as one family. */
.acs-kpi-chip.info { border-color: #d6def6; background: #e8edfb; }
.acs-kpi-chip.ok { border-color: #d3f0e0; background: #e6f7ee; }
.acs-kpi-chip.warn { border-color: #f3e6c9; background: #fbf3e6; }
.acs-kpi-chip.danger { border-color: #f4d5d5; background: #fbe9e9; }
.acs-kpi-chip.purple { border-color: #e0d8f5; background: #eee9fb; }
.acs-kpi-chip.teal { border-color: #cfece9; background: #e5f7f5; }
.acs-kpi-chip.neutral { border-color: #dce5ee; background: #f1f5f9; }

@media (max-width: 767px) {
    .acs-kpi-chip {
        flex: 1 1 calc(50% - 7px);
        min-width: 0;
    }

    /* Two figures in half a phone width is where they start to crowd, so the
       paired card takes the full row on mobile. */
    .acs-kpi-chip--dual {
        flex-basis: 100%;
    }
}

/* ============================================================
   Grid toolbar (the row of grid controls above a list grid)
   ============================================================ */

.acs-grid-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--acs-line-soft);
    border-radius: 10px;
    background: #f8fafc;
}

.acs-grid-toolbar__group {
    display: flex;
    align-items: center;
    gap: 7px;
}

.acs-grid-toolbar__spacer {
    flex: 1 1 auto;
}

.acs-grid-toolbar__label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--acs-muted);
    white-space: nowrap;
}

/* The two selects are sized to their content rather than stretched to a column,
   which is what made the old row look like an unfinished form. */
body.page-admin .acs-grid-toolbar__select {
    width: auto;
    min-width: 120px;
    max-width: 220px;
    display: inline-block;
}

.acs-grid-toolbar__action {
    white-space: nowrap;
}

@media (max-width: 767px) {
    .acs-grid-toolbar__spacer { flex-basis: 100%; }
}

/* ============================================================
   List grid
   ============================================================

   Adoption layer: every RadGrid on an Admin page gets this, plus anything
   explicitly marked .acs-grid (used both as a wrapper and as the grid's own
   CssClass in Admin/Accounting). Structure, skin classes, column set and client
   behaviour are untouched - this is colour, weight and spacing only, so a page
   needs no markup edit to pick it up.

   OPT OUT with .acs-grid-keep-rowcolors on the RadGrid when a page colours its
   own rows from the code-behind. The row-background rules below carry
   !important (they have to, to beat the Telerik skin) and !important beats an
   inline style, so a page setting dataItem.BackColor would otherwise lose it
   silently. Admin/Reports/ConsumptionAlerts.aspx is the one page that does. */

/* THE SCROLL CONTAINER IS THE WRAPPER, NOT THE GRID.

   This block previously put `overflow: hidden` on .RadGrid to clip the rounded
   corners. That silently CUT OFF every column past the container's width, and
   because the clipping happened INSIDE .table-responsive, the wrapper never saw
   anything to scroll - so there was no scrollbar either. On /admin/members/home
   that made 8 of 33 columns (Status, Alt Phone, Alt Email, Member Type, Meter
   Status, Rate Category, Added On, Added By) simply unreachable: a 1733px table
   clipped to 1387px.

   So the frame and the clipping move to the wrapper, which is also the thing that
   scrolls, and the grid itself is left free to be as wide as its columns need.
   Bootstrap 3 only gives .table-responsive overflow-x below 768px, so it is set
   here explicitly for every width. */
body.page-admin .table-responsive,
.acs-grid.table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--acs-line);
    border-radius: 10px;
}

body.page-admin .RadGrid,
.acs-grid .RadGrid,
.acs-grid.RadGrid {
    border: 1px solid var(--acs-line);
    border-radius: 10px;
    overflow-x: auto;
    font-family: inherit;
}

/* Inside a wrapper, the wrapper owns the frame and the scrolling - otherwise the
   grid's own border would sit in the middle of the scrolled content and you would
   get two scrollbars for one table. */
body.page-admin .table-responsive .RadGrid,
.acs-grid.table-responsive .RadGrid {
    border: 0;
    border-radius: 0;
    /* BOTH axes. `overflow-x: visible` alone computes to `auto` whenever overflow-y
       is anything but visible, so the grid kept its own scroller and the wrapper
       still had nothing to scroll. */
    overflow: visible;
}

/* A header cell that wraps to three lines to avoid a scrollbar is not a kindness.
   Headers stay on one line and the table scrolls instead; data cells are left to
   wrap as they always did, so nothing gets truncated. */
body.page-admin .rgHeader,
body.page-admin .table-responsive table.table > thead > tr > th,
body.page-admin .table-responsive table.table > tbody > tr > th {
    white-space: nowrap;
}

body.page-admin .rgHeader,
body.page-admin th.rgHeader,
.acs-grid .rgHeader,
.acs-grid th.rgHeader {
    background: #f1f5f9 !important;
    background-image: none !important;
    border-color: var(--acs-line) !important;
    color: #334155 !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 9px 8px !important;
}

body.page-admin .rgHeader a,
body.page-admin .rgHeader a:link,
body.page-admin .rgHeader a:visited,
.acs-grid .rgHeader a {
    color: #334155 !important;
}

body.page-admin .rgRow > td,
body.page-admin .rgAltRow > td,
.acs-grid .rgRow > td,
.acs-grid .rgAltRow > td {
    border-color: var(--acs-line-soft) !important;
    color: var(--acs-ink);
    font-size: 13px;
    padding: 7px 8px !important;
    vertical-align: middle;
}

body.page-admin .RadGrid:not(.acs-grid-keep-rowcolors) .rgRow > td { background: var(--acs-surface) !important; }
body.page-admin .RadGrid:not(.acs-grid-keep-rowcolors) .rgAltRow > td { background: #fbfcfe !important; }

body.page-admin .RadGrid:not(.acs-grid-keep-rowcolors) .rgRow:hover > td,
body.page-admin .RadGrid:not(.acs-grid-keep-rowcolors) .rgAltRow:hover > td,
body.page-admin .rgActiveRow > td,
body.page-admin .rgHoveredRow > td {
    background: #eef4ff !important;
}

/* Footer totals should read as a total, not as another row. */
body.page-admin .rgFooter > td,
body.page-admin .rgGroupFooter > td,
.acs-grid .rgFooter > td {
    background: #f8fafc !important;
    background-image: none !important;
    border-top: 2px solid var(--acs-line) !important;
    color: var(--acs-ink) !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

body.page-admin .rgPager,
body.page-admin .rgPager td,
body.page-admin .rgCommandRow,
body.page-admin .rgCommandRow td {
    background: #f8fafc !important;
    background-image: none !important;
    border-color: var(--acs-line) !important;
}

/* Money and counts line up when the digits are the same width. */
body.page-admin .rgRow > td.acs-num,
body.page-admin .rgAltRow > td.acs-num {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Row action menu (one Actions cell in a list grid)
   ============================================================

   Replaces a run of one-button-per-column action columns. The menu panel is
   position: FIXED and placed by script from the trigger's rect, because the grid
   sits inside .table-responsive (overflow-x: auto) and an absolutely positioned
   panel is clipped by it - the menu would open and be invisible. Fixed escapes
   that, and the panel stays where it is in the DOM, inside the form, so every
   LinkButton still posts back normally. */

.acs-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.acs-rowmenu {
    position: relative;
}

.acs-rowmenu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid var(--acs-line);
    border-radius: 8px;
    background: var(--acs-surface);
    color: var(--acs-text);
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.acs-rowmenu__trigger:hover,
.acs-rowmenu__trigger:focus {
    background: #eef4ff;
    border-color: #c7d9f7;
    color: var(--acs-info);
    outline: none;
}

.acs-rowmenu__trigger[aria-expanded="true"] {
    background: #e8edfb;
    border-color: #c7d9f7;
    color: var(--acs-info);
}

/* A caret so the control reads as a menu, not as a decorative glyph. */
.acs-rowmenu__caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: .7;
}

.acs-rowmenu__panel {
    display: none;
    position: fixed;
    z-index: 1060;
    min-width: 208px;
    padding: 6px;
    border: 1px solid var(--acs-line);
    border-radius: 12px;
    background: var(--acs-surface);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
    text-align: left;
    font-family: var(--acs-font-ui);
}

.acs-rowmenu__panel.is-open {
    display: block;
}

.acs-rowmenu__group {
    padding: 6px 10px 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--acs-faint);
}

.acs-rowmenu__group + .acs-rowmenu__group,
.acs-rowmenu__item + .acs-rowmenu__group {
    margin-top: 2px;
    border-top: 1px solid var(--acs-line-soft);
}

.acs-rowmenu__item,
.acs-rowmenu__item:link,
.acs-rowmenu__item:visited {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--acs-text);
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}

.acs-rowmenu__item:hover,
.acs-rowmenu__item:focus {
    background: #eef4ff;
    color: var(--acs-info);
    text-decoration: none;
    outline: none;
}

/* Fixed-width icon column so the labels line up whatever the glyph. */
.acs-rowmenu__item > i {
    width: 15px;
    flex: none;
    text-align: center;
    font-size: 13px;
    color: var(--acs-faint);
}

.acs-rowmenu__item:hover > i,
.acs-rowmenu__item:focus > i {
    color: var(--acs-info);
}

/* Pay stays a button of its own, and stays AFTER the menu. It is the one action
   on this row that moves money, so it does not get buried in a list. */
.acs-row-pay,
.acs-row-pay:link,
.acs-row-pay:visited {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border: 1px solid #b7e2c6;
    border-radius: 8px;
    background: #e6f7ee;
    color: #15803d;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.acs-row-pay:hover,
.acs-row-pay:focus {
    background: #d3f0e0;
    border-color: #8fd3a9;
    color: #146c35;
    text-decoration: none;
    outline: none;
}

/* A hair of air between the filter block and the totals strip. */
.acs-filters-rule {
    margin-top: 18px;
    margin-bottom: 18px;
    border-top-color: var(--acs-line);
}


/* ---------- asp:GridView, same vocabulary ----------

   Fourteen Admin pages use a GridView rather than a RadGrid. Matched through the
   .table-responsive wrapper those pages already use, so the rules cannot reach a
   plain Bootstrap table elsewhere on the page. No !important here - a GridView has
   no skin stylesheet to beat. */

/* An asp:GridView renders its header cells as <th> inside <tbody>, not <thead>,
   unless a page opts into an accessible header - and the table is not always a
   direct child of the wrapper. Both selectors below are written for what the
   control actually emits, which is why they are descendant selectors on th. */
body.page-admin .table-responsive table.table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

body.page-admin .table-responsive table.table > thead > tr > th,
body.page-admin .table-responsive table.table > tbody > tr > th {
    background: #f1f5f9;
    border-bottom: 1px solid var(--acs-line);
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 9px 8px;
    vertical-align: middle;
}

body.page-admin .table-responsive table.table > tbody > tr > td {
    border-top: 1px solid var(--acs-line-soft);
    color: var(--acs-ink);
    font-size: 13px;
    padding: 7px 8px;
    vertical-align: middle;
}

body.page-admin .table-responsive table.table > tbody > tr:hover > td {
    background: #eef4ff;
}

body.page-admin .table-responsive table.table > tfoot > tr > td {
    background: #f8fafc;
    border-top: 2px solid var(--acs-line);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}