/* ═══════════════════════════════════════════════════════════
   Sathya Connect — shared mobile shell (sathya-connect-tabler-v2 style)
   ═══════════════════════════════════════════════════════════ */

:root {
    --brand: #206bc4;
    --brand-dark: #154f8a;
}

.row > * { margin-top: 1rem; }

/* Quick Actions' row-cols-4 grid is a flex-wrap tile row, not the stacked full-width rows the rule above
   is for — undo it there so the grid's own gutter (g-*) is the only spacing, instead of doubling up with
   an extra top gap above every tile. (row-cols-2 used to need the same treatment for the dashboard's
   Balance/Bills row, but that row is now ".equal-height-row" — a CSS grid, not this Bootstrap row-cols
   pattern — so a row-cols-2 override here is no longer needed anywhere and was incorrectly zeroing the
   Plans page's own row-to-row gutter, which does need Bootstrap's normal top-margin gutter across its
   multiple rows of cards.) */
.row.row-cols-4 > * { margin-top: 0; }

/* Home's Account Balance/Bills row (.row.g-3.balance-row) — plain Bootstrap row/col-12 (not
   .equal-height-row's CSS grid). This used to be col-md-6, on the assumption that the phone-shell's own
   ~402px rendered width would never reach Bootstrap's 768px "md" breakpoint — but that breakpoint is
   evaluated against the actual browser VIEWPORT, not the shell's own fixed width, so on any real tablet
   or laptop (viewport >= 768px) the two cards silently split into ~190px squeezed columns even though
   the shell itself was still only ~402px wide, clipping/wrapping the icon+label+value+chevron content.
   col-12 keeps both cards always stacked full-width regardless of viewport, matching what this row
   actually looked like everywhere it was actually tested (narrow mobile viewports). Only the FIRST
   card's top-margin should be zeroed — that one's gap from the Connection card above is already provided
   by .app-content's own 16px flex-gap, so the .row > * rule's 1rem top-margin would double it — but the
   SECOND (stacked) card still needs that same 1rem top-margin as the actual visible gap between the two
   cards. Zeroing it for *every* child (an even earlier version of this rule) collapsed that gap to 0. */
.row.balance-row > *:first-child { margin-top: 0; }

body {
    background: #eef1f7;
    margin: 0;
    font-family: "Inter Var", Inter, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

.card { border-radius: 16px; }
.card + .card { margin-top: 14px; }

/* ── Shell — a plain centered content column on desktop/laptop, full-bleed edge-to-edge on anything
   phone- or tablet-sized. This used to be a literal "phone mockup" on anything ≥460px wide (rounded
   34px corners, drop shadow, a background tint distinct from the page) — on a real tablet (768px iPad,
   820px, 912px, ...) that left most of the viewport as bare background around a tiny phone-shaped box,
   which reads as a broken/blank page. On desktop/laptop the phone-bezel look itself was the complaint —
   it's not meant to look like an actual phone sitting on the page, just a comfortably narrow reading
   column. So: no border-radius/shadow/distinct-background at any width now, and only `width`/`margin`
   change between "centered column" (≥992px) and "fill the browser" (below it, where the viewport itself
   already IS the screen, same as a real mobile browser tab). 991px is Bootstrap's own lg breakpoint —
   the usual phone+tablet/laptop divide. ── */
.phone-shell {
    width: 402px;
    margin: 24px auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    position: relative;
    min-height: 900px;
}

@media (max-width: 991px) {
    .phone-shell { width: 100%; margin: 0; min-height: 100dvh; }
}

/* On desktop/laptop this used to be a fixed 900px box with its own internal overflow-y:auto scrollbar —
   even with the phone-bezel visuals gone, an invisible bounded scroll box still FEELS like a phone screen
   embedded in the page (the browser's own scrollbar never moves; a separate hidden one scrolls instead,
   and on a short browser window you'd get an outer page scrollbar AND this inner one). Desktop/laptop now
   just flows naturally — the actual browser page scrolls, like every other website. Only mobile/tablet
   (≤991px) keep the fixed-height internal-scroll box, where it's the correct pattern: it matches the
   real device viewport height (100dvh) there, same as a native app screen. */
.app-scroll {
    /* No padding-bottom here — .app-content's own 96px bottom padding is the one place that reserves
       room for the fixed bottom nav; having both stacked ~180px of dead space after the last card. */
}

@media (max-width: 991px) {
    .app-scroll { height: 100dvh; overflow-y: auto; }
}

.app-scroll::-webkit-scrollbar { display: none; }

/* ── Welcome panel (dashboard-only; rendered inside .app-content's own padding, so no extra horizontal
   margin — the gap after it comes from .app-content's own flex `gap`, same as every other top-level
   widget) ── */
.welcome-panel {
    background: #fff;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(20, 30, 60, .06);
    box-shadow: 0 2px 10px rgba(20, 30, 60, .04);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.welcome-panel .greeting { font-size: 1.02rem; font-weight: 700; color: var(--tblr-body-color); margin-bottom: 2px; }
.welcome-panel .greeting-sub { font-size: .8rem; color: var(--tblr-secondary-color); }

/* Lives in the (white) Welcome panel — light-blue-on-white circle, matching the icon treatment used
   elsewhere against light backgrounds (e.g. the Balance card's avatar). The old dark-gradient-header
   styling (white outline/icon) is gone along with the header itself. */
.bell-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tblr-primary-lt, #e8f0fe);
    border: none;
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--tblr-danger);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

/* ── Page content below header ──
   Every top-level widget in the page flow (welcome panel, cards, the balance/bills tile row, the
   promo banner, ...) gets the same 14px gap before the next one, via flex `gap` rather than margin —
   margin-based spacing kept losing to Tabler's own .card/.alert margins on ties, and even where it won,
   a child's own margin would just add on top of it and throw the gaps out of sync with each other.
   `gap` is spacing the flex layout itself inserts between items, so it can't be fought by a child's own
   margin rule; zeroing each child's vertical margin (!important, since we're cancelling out whatever
   Tabler/Bootstrap default happens to be, not competing on specificity) keeps the gap exactly 14px
   everywhere instead of "14px plus whatever margin that particular widget happened to carry". */
.app-content {
    padding: 14px 16px 96px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.app-content > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.metric-value { font-size: 1rem; font-weight: 700; letter-spacing: -.2px; }
.metric-label { font-size: .78rem; color: var(--tblr-secondary-color); margin-bottom: 2px; }

/* Home's "Upgrade Your Speed" promo alert — two rows now: a top row with the icon+text on the left and
   the close (X) pinned to the top-right corner, then "Explore Plans" as its own full-width, single-line,
   centered button below. This avoids needing to fit icon+text+button+close all on one line at all, so
   nothing needs to wrap or shrink. */
.promo-alert { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.promo-alert-top { display: flex; align-items: flex-start; gap: 10px; }
.promo-alert-main { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }

.promo-alert-icon { flex: 0 0 40px; width: 40px; height: 40px; }

.promo-alert-text { min-width: 0; flex: 1 1 0%; text-align: left; }

.promo-alert-close { flex-shrink: 0; margin: 0; }

.promo-alert-btn { white-space: nowrap; }

/* Two side-by-side cards (Balance / Bills) that must always be the same height, however much text
   either one holds. CSS Grid, not flexbox: grid fixes the row's track height to the tallest item FIRST,
   then stretches every item in that row to match — a flex row's align-items:stretch relies on a child's
   own percentage height (h-100) to fill that stretched size, which only resolves against a definite
   parent height; a plain d-flex row never has one, so the shorter card just kept its own content height
   instead of matching its sibling. Grid doesn't have that problem. */
.equal-height-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
}

.equal-height-row > .card { height: 100%; }

/* The two cards here are adjacent .card siblings, so the generic ".card + .card" stacked-list spacing
   rule below also matches the second one and pushes it down inside its own (already equal-height) grid
   cell — the row's own `gap` is already the spacing that's wanted between them, not a per-card margin. */
.equal-height-row > .card + .card { margin-top: 0; }

.qa-tile {
    text-align: center;
    padding: 14px 4px;
    border-radius: 14px;
    border: 1px solid rgba(20, 30, 60, .08);
    height: 100%;
    display: block;
    color: inherit;
}

.qa-tile:hover { color: inherit; }
.qa-tile .avatar { margin: 0 auto 8px; }
.qa-tile .qa-label { font-size: .76rem; font-weight: 600; color: var(--tblr-body-color); }

/* Full-width summary row card (Account Balance / Bills on Home) — icon + label/value/sub + chevron,
   entire card is the tap target. */
.info-card .card-body { display: flex; align-items: center; gap: 14px; padding: 16px; }
.info-card:hover { color: inherit; }

.info-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.info-card-label { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tblr-secondary-color); margin-bottom: 2px; }
.info-card-value { font-size: 1.2rem; font-weight: 800; color: var(--tblr-body-color); }
.info-card-sub { font-size: .8rem; font-weight: 600; display: flex; align-items: center; gap: 4px; margin-top: 2px; }

/* Account Balance / Bills cards (Home), 2-column grid — matches homepage-preview.html. Scoped to
   .balance-card rather than overriding .card/.avatar/.fs-1 globally: those base classes are shared
   by every other card (Connection, Data Usage, Internet Status) and avatar size (avatar-xs/-md
   elsewhere on this same page) — a blanket override would have silently changed all of them too. */
.balance-card { border-radius: 12px; transition: all .2s ease; }
.balance-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .08); color: inherit; }
.balance-card .avatar-lg { width: 52px; height: 52px; font-size: 1.2rem; }
.balance-card .fs-1 { font-size: 1.2rem !important; }

.router-avatar {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: var(--tblr-primary-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: 1.6rem;
    flex-shrink: 0;
}

.divider-y { width: 1px; background: var(--tblr-border-color); align-self: stretch; margin: 0 18px; }

/* ── Custom bar chart (Data Usage card / Usage page) ── */
.bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 10px;
    height: 140px;
    border-left: 1px solid var(--tblr-border-color);
    padding-left: 8px;
    margin-top: 4px;
    width: 100%;
}

/* A few extra px of breathing room below the today/yesterday trend badge — 4px read as the chart
   crowding/merging into the badge right above it. */
.bar-chart-spaced { margin-top: 12px; }

.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; max-width: 34px; }
.bar-col .bar-val { font-size: .68rem; font-weight: 600; margin-bottom: 4px; color: var(--tblr-body-color); }
.bar-col .bar { width: 22px; background: var(--brand); border-radius: 4px 4px 0 0; }
.bar-col .bar-date { font-size: .64rem; color: var(--tblr-secondary-color); margin-top: 6px; }

/* ── Profile page rows (formerly an offcanvas panel; now plain page content) ── */
.profile-brand-title { font-size: 22px; font-weight: 800; color: var(--brand); margin-bottom: 10px; }

.profile-panel-avatar {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background-color: var(--brand);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.profile-panel-list { display: flex; flex-direction: column; }

.profile-panel-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid #e5e7eb;
    text-decoration: none;
    color: var(--tblr-body-color, #1f2937) !important;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.profile-panel-item:first-child { border-top: 0; }
.profile-panel-item i { font-size: 18px; color: var(--brand); width: 20px; text-align: center; }
.profile-panel-item:hover { color: var(--brand) !important; text-decoration: none; }

.profile-panel-chevron { color: #9aa4b2 !important; font-size: 16px !important; transition: transform .2s ease; }
.profile-panel-item[aria-expanded="true"] .profile-panel-chevron { transform: rotate(180deg); }

.profile-panel-address {
    padding: 2px 16px 16px 48px;
    font-size: 13px;
    color: var(--tblr-secondary-color, #6c757d);
    border-top: 0;
}

.release-note-version { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.release-note-list { margin: 0; padding-left: 18px; }
.release-note-list li { font-size: .85rem; color: var(--tblr-body-color); margin-bottom: 8px; }
.release-note-list li:last-child { margin-bottom: 0; }

/* ── Help Center (Help Documents page) — categorized FAQ, corporate ISP support-center style instead of
   a flat FAQ accordion: a search bar up top, one card per category with an icon + title header, a nested
   accordion of Q&A per category, and a "Contact Support" CTA at the end. ── */
.help-category-card .card-body { padding: 16px; }
.help-category-head { display: flex; align-items: center; gap: 10px; }

.help-category-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.help-category-title { font-size: .95rem; font-weight: 700; color: var(--tblr-body-color); }

.help-faq-accordion .help-faq-item { border: 0; border-top: 1px solid rgba(20, 30, 60, .06); }
.help-faq-accordion .help-faq-item:first-child { border-top: 0; }
.help-faq-accordion .accordion-button { font-size: .85rem; font-weight: 600; padding: 12px 4px; background: transparent; box-shadow: none; }
.help-faq-accordion .accordion-button:not(.collapsed) { color: var(--brand); background: transparent; box-shadow: none; }
.help-faq-accordion .accordion-button::after { width: 1rem; height: 1rem; background-size: 1rem; }
.help-faq-accordion .accordion-body { padding: 0 4px 14px; }

.profile-panel-signout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 0;
    border-radius: 16px;
    text-decoration: none;
    color: #d63939 !important;
    font-size: 14px;
    font-weight: 700;
    background: #fff;
    box-shadow: 0 2px 10px rgba(20, 30, 60, .04);
    cursor: pointer;
}

.profile-panel-signout i { font-size: 18px; }
.profile-panel-signout:hover { color: #b02a2a !important; text-decoration: none; }

/* ── Bottom nav ──
   Always position:fixed now (not just ≤991px) — desktop/laptop content flows and scrolls naturally with
   the real page instead of a bounded internal scroll box (see .app-scroll above), so the shell's own
   height grows past the viewport; an absolutely-positioned nav anchored to the shell would end up at the
   bottom of that tall content instead of staying visible. `position:fixed` pins it to the viewport
   itself, and `left:0;right:0` + `max-width`/`margin:auto` centers a nav no wider than the content column
   within that full-viewport-width fixed box, instead of the nav stretching edge-to-edge across a wide
   desktop screen. */
.mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 402px;
    margin: 0 auto;
    /* Fixed 56px never accounted for the gesture-nav/home-indicator safe area some phones reserve at the
       true bottom of the screen. .bottom-nav-item's own padding-bottom grows by that same
       env(safe-area-inset-bottom) amount, pushing its content past this box's fixed height — since the
       box itself didn't grow to match, the overflow rendered past the nav's white background, exposing
       the page background underneath as a gap. Growing the box (and its own bottom padding) by the same
       inset keeps the white background covering all the way down, with the icons/labels still sitting
       above the safe area exactly as before. */
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    transform: translateY(0);
    transition: transform .25s ease;
    background: #ffffff;
    border-top: 1px solid var(--tblr-border-color, #e5e7eb);
    display: flex;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    z-index: 3000;
}

@media (max-width: 991px) {
    .mobile-bottom-nav { max-width: 100%; }
}

.mobile-bottom-nav.is-hidden { transform: translateY(calc(100% + 8px)); }

.bottom-nav-item {
    flex: 1;
    text-decoration: none;
    border-bottom: 0;
    color: var(--tblr-secondary-color, #6b7280);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* The safe-area inset is now handled once, on .mobile-bottom-nav's own bottom padding — adding it
       here too would double it up and push the icons/labels higher than intended. */
    padding: 4px 4px;
    font-size: .68rem;
    font-weight: 600;
}

.bottom-nav-item:hover,
.bottom-nav-item:focus,
.bottom-nav-item:focus-visible {
    text-decoration: none !important;
    border-bottom: 0 !important;
    color: var(--brand);
}

.bottom-nav-item i { font-size: 1.25rem; line-height: 1; }
.bottom-nav-item.active { color: var(--brand); }

/* ── Menu card (home-screen list pattern) ── */
.menu-card {
    border-radius: 4px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
    margin-bottom: 14px;
    transition: .2s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}

.menu-card:hover { transform: translateY(-2px); text-decoration: none; color: inherit; }
.menu-card .card-body { display: flex; align-items: center; padding: 16px; gap: 16px; }

.menu-icon {
    width: 52px;
    height: 52px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    flex-shrink: 0;
}

.menu-content { flex: 1; min-width: 0; }
.menu-title { font-size: 15px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.menu-desc { font-size: 13px; color: #6b7280; line-height: 1.4; }
.menu-arrow { color: #9ca3af; font-size: 20px; }

/* ── Plans page (sathya-connect-plans-v2 reference) ── */

/* Current Plan / Recommended Upgrade cards */
.accent-card {
    border-radius: 14px;
    border: 1px solid var(--tblr-border-color);
    padding: 16px;
    background: #fff;
}

.accent-card.upgrade { border-color: rgba(32, 107, 196, .25); background: var(--tblr-primary-lt); }

.plan-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.meta-row { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--tblr-secondary-color); margin-top: 4px; }

/* Underline tabs (Internet Plans / Internet + OTT) */
.plan-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--tblr-border-color); margin-bottom: 14px; }

.plan-tab {
    padding: 4px 2px 12px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--tblr-secondary-color);
    border-bottom: 2.5px solid transparent;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.plan-tab.active { color: var(--brand); border-bottom-color: var(--brand); }

/* Bills page only (Invoices & Payments / Pending Orders) — exactly two tabs, so they split the row
   evenly and center, instead of the Plans page's left-aligned/fixed-gap default. gap:0 (overriding
   .plan-tabs' own 22px) since each tab already fills its own flex:1 half of the row — the 22px gap just
   ate into that even 50/50 split, pushing the two tabs apart instead of touching at the row's midpoint. */
.plan-tabs-equal { gap: 0; }
.plan-tabs-equal .plan-tab { flex: 1; justify-content: center; }

/* Horizontally-scrollable speed filter chips */
.chip-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: 0 -16px 14px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.chip-scroll::-webkit-scrollbar { display: none; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: .82rem;
    font-weight: 600;
    border: 1.4px solid var(--tblr-border-color);
    color: var(--tblr-body-color);
    background: #fff;
    white-space: nowrap;
    cursor: pointer;
}

.chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Plans page — live suggestions dropdown under the search bar (Plan Name / Amount), built from every
   plan already rendered on the page across both tabs, not just the currently-visible grid. */
.plan-search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--tblr-border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    max-height: 280px;
    overflow-y: auto;
}

.plan-search-suggestion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-top: 1px solid rgba(20, 30, 60, .06);
    background: transparent;
    text-align: left;
    font-size: .85rem;
    cursor: pointer;
}

.plan-search-suggestion-item:first-child { border-top: 0; }
.plan-search-suggestion-item:hover { background: var(--tblr-primary-lt, #e8f0fe); }
.plan-search-suggestion-name { font-weight: 600; color: var(--tblr-body-color); }
.plan-search-suggestion-amount { font-weight: 700; color: var(--brand); flex-shrink: 0; }
.plan-search-suggestion-empty { padding: 12px 14px; font-size: .82rem; color: var(--tblr-secondary-color); }

/* Brief highlight on the matching card after clicking a suggestion, so it's obvious which card the
   suggestion scrolled to. */
.plan-card-col.plan-search-highlight .plan-card { box-shadow: 0 0 0 2px var(--brand); transition: box-shadow .2s ease; }

/* "Popular Plans" section head + sort control */
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.section-title { font-size: .95rem; font-weight: 700; color: var(--tblr-body-color); display: flex; align-items: center; gap: 6px; }

.sort-select {
    font-size: .8rem;
    font-weight: 600;
    color: var(--tblr-body-color);
    background: #fff;
    border: 1px solid var(--tblr-border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 12px;
}

.sort-select i { font-size: .95rem; color: var(--tblr-secondary-color); }
.sort-select:hover { border-color: var(--brand); color: var(--brand); }
.sort-select:hover i { color: var(--brand); }
.sort-select.show { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 3px var(--tblr-primary-lt); }
.sort-select::after { display: none; }

/* Sort dropdown menu (Plans page — Price: Low to High / High to Low) */
.plan-sort-menu {
    min-width: 210px;
    padding: 6px;
    border: 1px solid var(--tblr-border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}

.plan-sort-menu .sort-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--tblr-body-color);
}

.plan-sort-menu .sort-option i:first-child { font-size: 1rem; color: var(--tblr-secondary-color); }
.plan-sort-menu .sort-option:hover,
.plan-sort-menu .sort-option:focus { background: var(--tblr-primary-lt, #e8f0fe); color: var(--brand); }
.plan-sort-menu .sort-option:hover i:first-child { color: var(--brand); }

.plan-sort-menu .sort-option.active { background: var(--tblr-primary-lt, #e8f0fe); color: var(--brand); }
.plan-sort-menu .sort-option.active i:first-child { color: var(--brand); }

.sort-check { margin-left: auto; color: var(--brand); visibility: hidden; }
.sort-option.active .sort-check { visibility: visible; }

/* Plan grid cards — plain grey border, accent lives in the icon/text/button color only */
.plan-card { border-radius: 14px; border: 1px solid var(--tblr-border-color); padding: 18px; background: #fff; height: 100%; position: relative; }
.plan-speed { font-size: 1.05rem; font-weight: 500; margin-bottom: 2px; }
/* Lighter than Home's Account Balance value (.balance-card .fs-1 + fw-bold: 1.2rem/700) — the compact
   plan-list card sits right next to a bold h4 plan name, so a second heavy-weight value right below it
   read as too heavy; 500 keeps it a clear price without competing with the name for attention. */
.plan-price { font-size: 1.2rem; font-weight: 500; }

.popular-badge {
    position: absolute;
    top: -10px;
    right: 12px;
    background: var(--tblr-indigo-lt);
    color: var(--tblr-indigo);
    font-size: .66rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.ott-logo-chip { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(20, 30, 60, .08); object-fit: contain; background: #fff; padding: 2px; }

/* Compact horizontal plan-list cards (per plans-redesigned.html reference — applies to the plan
   cards only, not the Current Plan / Recommended Upgrade cards above them). Reuses the existing
   .plan-icon/.plan-speed/.plan-price/.meta-row sizing so font weight/size stays consistent with the
   rest of the app instead of the reference's own one-off px values. */
.plan-list { display: flex; flex-direction: column; gap: 10px; }

.plan-card-compact { display: flex; align-items: center; gap: 12px; height: auto; padding: 12px; }
.plan-card-compact.recommended { border-color: var(--tblr-primary-lt); }

.plan-icon-sm { width: 44px; height: 44px; border-radius: 11px; font-size: 1.1rem; }

.plan-card-main { flex: 1; min-width: 0; }

.plan-inline-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .66rem;
    font-weight: 700;
    color: var(--brand);
    background: var(--tblr-primary-lt);
    padding: 2px 8px;
    border-radius: 999px;
}

.meta-row-inline { margin-top: 0; }

.plan-card-right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.plan-cta-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--tblr-primary-lt);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}
.plan-cta-btn:hover { background: var(--brand); color: #fff; }

/* ── List card (bills / transaction rows) ── */
.list-card {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
    margin-bottom: 12px;
}

.list-card .card-body { padding: 14px; }
.list-card-title { font-size: 14px; font-weight: 700; color: #111827; }
.list-card-meta { font-size: 12px; color: #6b7280; margin-top: 2px; }
.list-card-amount { font-size: 15px; font-weight: 700; color: #111827; }

/* ── Support page — category accordion + radio-style query list (all categories/queries visible up
   front, matching the reference app's accordion-of-queries structure, instead of hiding them inside a
   plain <select>) ── */
.support-category { border: 1px solid rgba(20, 30, 60, .08); border-radius: 10px !important; margin-bottom: 10px; overflow: hidden; }
.support-category .accordion-button { font-size: .88rem; font-weight: 700; padding: 12px 14px; background: #fff; }
.support-category .accordion-button:not(.collapsed) { background: var(--tblr-primary-lt); color: var(--brand); box-shadow: none; }
.support-category .accordion-button:focus { box-shadow: none; }
.support-category .accordion-button::after { width: 1.1rem; height: 1.1rem; background-size: 1.1rem; }

.query-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-top: 1px solid rgba(20, 30, 60, .06);
    cursor: pointer;
}

.query-option:hover { background: rgba(32, 107, 196, .04); }

.query-option .radio-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.query-option.selected .radio-dot { border-color: var(--brand); }

.query-option.selected .radio-dot::after {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand);
}

.query-option-text { font-size: .85rem; color: var(--tblr-body-color); }
.query-option.selected .query-option-text { font-weight: 600; color: var(--brand); }

/* "Other Queries" — a single generic catch-all with no real choice to make, so its accordion body shows
   plain instructional text instead of a one-item radio list. */
.support-other-note { padding: 14px; font-size: .85rem; color: var(--tblr-secondary-color); }

/* ── Status badges ── */
.badge-status-paid { background: #2fb34422; color: #1a7431; }
.badge-status-pending { background: #f59f0022; color: #a15c00; }
.badge-status-overdue { background: #d6393922; color: #b02a2a; }

/* ═══════════════════════════════════════════════════════════
   Report / list-with-filters components (MobileTemplate
   AssignedTask.html pattern — searchable-select, custom date
   picker, filter-tabs bar, bottom filter-sheets, order-card)
   ═══════════════════════════════════════════════════════════ */

/* ── Searchable select (reused for any dropdown filter) ── */
.searchable-select { position: relative; }

.searchable-select-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.searchable-select-toggle-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.searchable-select-panel {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 3220;
    max-height: 260px;
    overflow: hidden;
    background-color: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    border: 1px solid var(--bs-border-color, #d1d5db);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.searchable-select.open .searchable-select-panel { display: flex; }

/* Flip upward when there isn't enough room below the toggle (e.g. a short bottom sheet) */
.searchable-select.drop-up .searchable-select-panel {
    top: auto;
    bottom: calc(100% + 4px);
}

.searchable-select-search-wrap {
    position: relative;
    flex: 0 0 auto;
    padding: 8px;
    border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
}

.searchable-select-search-icon {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 14px;
    pointer-events: none;
}

.searchable-select-search { padding-left: 30px; }
.searchable-select-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1 1 auto; }
.searchable-select-option { padding: 8px 14px; font-size: 14px; cursor: pointer; }

.searchable-select-option:hover,
.searchable-select-option.focused { background-color: var(--bs-tertiary-bg, #f3f4f6); }

.searchable-select-option.active { font-weight: 700; color: #0f5132; background-color: #d1fae5; }
.searchable-select-empty { padding: 10px 14px; font-size: 13px; color: #9ca3af; }

/* ── Custom calendar date picker (replaces the native <input type="date">) ── */
.date-picker { position: relative; }

.date-picker-input {
    /* No hardcoded background here (an earlier version had `background-color: #fff`) — this is a real
       .form-control, so it already gets Tabler's own theme-aware background/text color; overriding it
       to a fixed white broke dark theme the moment this component actually got used on a page. */
    padding-right: 36px;
    cursor: pointer;
}

.date-picker-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: var(--tblr-secondary-color, #6b7280);
    font-size: 18px;
    pointer-events: none;
}

.date-picker.open .date-picker-input {
    border-color: #206bc4;
    box-shadow: 0 0 0 .2rem rgba(32, 107, 196, .15);
}

.date-picker-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 3220;
    width: 300px;
    max-width: 90vw;
    background-color: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    border: 1px solid var(--bs-border-color, #d1d5db);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    padding: 14px;
}

.date-picker.open .date-picker-panel { display: block; }

/* Flip upward when there isn't enough room below the input (e.g. a short bottom sheet) */
.date-picker.drop-up .date-picker-panel {
    top: auto;
    bottom: calc(100% + 6px);
}

.date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.date-picker-nav {
    border: 0;
    background: transparent;
    color: var(--tblr-secondary-color, #6b7280);
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 6px;
}

.date-picker-nav:hover { background-color: var(--bs-tertiary-bg, #f3f4f6); }

.date-picker-monthyear {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    font-size: 17px;
    font-weight: 500;
    color: var(--bs-body-color, #1f2937);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.date-picker-monthyear:hover { background-color: var(--bs-tertiary-bg, #f3f4f6); }

.date-picker-monthyear-caret {
    font-size: 14px;
    color: #9ca3af;
    transition: transform .15s ease;
}

.date-picker.quicknav-open .date-picker-monthyear-caret { transform: rotate(180deg); }

.date-picker-weekdays,
.date-picker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.date-picker-weekdays span {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--tblr-secondary-color, #6b7280);
    padding-bottom: 6px;
}

.date-picker-day {
    border: 0;
    background: transparent;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--bs-body-color, #1f2937);
    cursor: pointer;
    border-radius: 50%;
}

.date-picker-day:hover:not(.is-selected) { background-color: var(--bs-tertiary-bg, #f3f4f6); }
.date-picker-day.is-adjacent { color: #d1d5db; }

.date-picker-day.is-today:not(.is-selected) {
    font-weight: 700;
    color: #206bc4;
}

.date-picker-day.is-selected {
    background-color: #206bc4;
    color: #fff;
    font-weight: 700;
}

.date-picker-quicknav { display: none; }
.date-picker.quicknav-open .date-picker-quicknav { display: block; }

.date-picker.quicknav-open .date-picker-weekdays,
.date-picker.quicknav-open .date-picker-days {
    display: none;
}

.date-picker-quicknav-year {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
}

.date-picker-quicknav-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.date-picker-quicknav-month {
    border: 1px solid transparent;
    background: transparent;
    padding: 8px 4px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--bs-body-color, #1f2937);
}

.date-picker-quicknav-month:hover { background-color: var(--bs-tertiary-bg, #f3f4f6); }

.date-picker-quicknav-month.is-active {
    background-color: #206bc4;
    color: #fff;
    font-weight: 700;
}

/* ── Filter tabs bar (pill buttons that open a bottom filter-sheet) ── */
.filter-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 8px;
    scrollbar-width: none;
}

.filter-tabs::-webkit-scrollbar { display: none; }

.filter-tab {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #334155;
    border-radius: 4px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.filter-tab:hover { text-decoration: none; color: #1d4f91; }
.filter-tab-sort { gap: 6px; }
.sort-arrow-icon { font-size: 14px; line-height: 1; }
.filter-tab.active { border-color: #206bc4; background: #e9f2ff; color: #1d4f91; }
.filter-tab-clear { border-color: #fecaca; background: #fef2f2; color: #dc2626; }

/* ── Filter sheet overlay (bottom sheet) ── */
.filter-sheet { position: fixed; inset: 0; display: none; z-index: 4000; }
.filter-sheet.open { display: block; }
.filter-sheet-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, .35); }

.filter-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Capped + flex-column so a long list (e.g. the 12-option Date Range preset radio-list — see
       Connect.WebConsole\daterange.jpg) never pushes the sheet above the top of a short viewport or
       off-screen — the header and Apply button stay pinned in view and only the body scrolls. */
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 16px;
    box-shadow: 0 -12px 24px rgba(15, 23, 42, .16);
}

.filter-sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex: 0 0 auto; }
.filter-sheet-title { margin: 0; font-size: 15px; font-weight: 700; color: #111827; }
.filter-sheet-close { border: 0; background: transparent; color: #6b7280; font-size: 20px; line-height: 1; cursor: pointer; }
.filter-sheet-body { display: grid; gap: 8px; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
/* display was missing here — gap alone does nothing on a block-level element. On the Sort/Type/Status
   sheets (where .sort-sheet-body is combined with .filter-sheet-body on the same element) that grid
   display was masking the bug; on the Date sheet (_DateFilterSheet.cshtml), where .sort-sheet-body is a
   plain nested div with no .filter-sheet-body of its own, it had no display at all — so its .sort-option
   buttons (each width:100%) just wrapped inline with zero space between them. */
.sort-sheet-body { display: flex; flex-direction: column; gap: 8px; }

/* Date Range preset options (_DateFilterSheet.cshtml) — label left, checkmark right (.sort-check's own
   margin-left:auto does the push), matching the reference sheet's radio-list layout. */
.date-preset-option { justify-content: space-between; }

.sort-option {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #334155;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    width: 100%;
}

.sort-option.active { border-color: #206bc4; background: #e9f2ff; color: #1d4f91; }
.date-label { font-size: 12px; font-weight: 700; color: #374151; }
.filter-sheet-footer { margin-top: 12px; flex: 0 0 auto; }

/* Date filter sheet — the "Date Range" preset select and the From/To date inputs both carry Bootstrap's
   -sm size classes already, but Tabler's own form-control/form-select styling doesn't compute out to
   quite the same font-size for a <select> vs an <input> at that size, so the preset text still read
   visibly larger than the date values next to it. Pin both to the exact same size explicitly instead of
   relying on the -sm classes to agree with each other. Padding/border-radius/width match .sort-option's
   own box exactly (10px 12px / 4px / 100%) — the -sm classes shrink these inputs' padding well below the
   preset buttons', so From/To Date visibly read as smaller boxes than the presets above them. */
#sheet-date .form-select,
#sheet-date .form-control {
    font-size: .8rem;
    padding: 10px 12px;
    border-radius: 4px;
    width: 100%;
}

/* From/To Date inputs — calendar icon sits inside the box's right edge (not a separate input-group addon
   box, which under this sheet's width:100% inputs has no room left on the row and wraps onto its own
   line above instead). position:relative wrapper + absolutely-positioned icon keeps it truly inside. */
.date-input-wrap { position: relative; }
.date-input-wrap .form-control { padding-right: 34px; }
.date-input-wrap .date-input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 14px;
    pointer-events: none;
}

/* ── Order card (report row with expandable extra fields + status badge) ── */
.order-card .card-body { align-items: flex-start; justify-content: space-between; position: relative; }

.order-meta { margin-top: 6px; display: grid; gap: 2px; font-size: 13px; color: #6b7280; }
.order-kv-row { display: flex; align-items: center; gap: 8px; }
.order-kv-row.order-kv-extra { display: none; }
.order-card.details-open .order-kv-row.order-kv-extra { display: flex; }
.order-kv-label { width: 98px; flex: 0 0 98px; color: #6b7280; font-weight: 700; }
.order-kv-value { color: #4b5563; }

.order-title {
    display: -webkit-box;
    max-width: 30ch;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.order-details-toggle {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #64748b;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: absolute;
    top: 16px;
    right: 16px;
}

.order-card.details-open .order-details-toggle i { transform: rotate(180deg); }

.order-status {
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    padding: 4px 8px;
    white-space: nowrap;
    position: absolute;
    right: 12px;
    bottom: 12px;
}

.order-card.has-extra-fields .menu-content { padding-right: 48px; }
.order-card.compact-fields .menu-content { padding-right: 118px; }
.order-card.has-extra-fields .order-status { right: 12px; bottom: 12px; top: auto; }
.order-card.compact-fields .order-status { top: 16px; right: 16px; bottom: auto; }

.order-status.status-progress     { color: #0f5132; background: #d1fae5; border: 1px solid #a7f3d0; }
.order-status.status-awaiting     { color: #92400e; background: #fef3c7; border: 1px solid #fde68a; }
.order-status.status-verification { color: #1e3a8a; background: #dbeafe; border: 1px solid #bfdbfe; }
.order-status.status-default      { color: #374151; background: #f3f4f6; border: 1px solid #e5e7eb; }

/* ── Dark theme overrides for the report/filter components above ── */
html[data-bs-theme="dark"] .order-kv-label { color: #9aa7bd; }
html[data-bs-theme="dark"] .order-kv-value { color: #c9d4e3; }

html[data-bs-theme="dark"] .order-details-toggle {
    background: #1a2336;
    border-color: #2c3e54;
    color: #9aa7bd;
}

html[data-bs-theme="dark"] .filter-tab {
    background: #1a2336;
    border-color: #2c3e54;
    color: #c9d4e3;
}

html[data-bs-theme="dark"] .filter-tab:hover { color: #7ab4e8; }

html[data-bs-theme="dark"] .filter-tab.active {
    border-color: #2a4d78;
    background: #1a2e48;
    color: #7ab4e8;
}

html[data-bs-theme="dark"] .filter-tab-clear {
    border-color: #4a2530;
    background: #2a1418;
    color: #f4a3a3;
}

html[data-bs-theme="dark"] .filter-sheet-panel { background: #151f2e; }
html[data-bs-theme="dark"] .filter-sheet-title { color: #e8edf5; }
html[data-bs-theme="dark"] .filter-sheet-close { color: #9aa7bd; }
html[data-bs-theme="dark"] .date-label { color: #c9d4e3; }

html[data-bs-theme="dark"] .sort-option {
    background: #1a2336;
    border-color: #2c3e54;
    color: #c9d4e3;
}

html[data-bs-theme="dark"] .sort-option.active {
    border-color: #2a4d78;
    background: #1a2e48;
    color: #7ab4e8;
}

/* Flatpickr calendar popup (Bills Date filter's From/To inputs) — the CDN stylesheet is a hardcoded
   light theme with no dark variant of its own, so without this the popup stays a jarring white box
   over an otherwise-dark page. Palette matches the app's own dark-mode filter-sheet/sort-option colors. */
html[data-bs-theme="dark"] .flatpickr-calendar {
    background: #151f2e;
    border-color: #2c3e54;
    box-shadow: 0 3px 13px rgba(0, 0, 0, .4);
}
html[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:before,
html[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:after { border-bottom-color: #151f2e; }
html[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:before,
html[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:after { border-top-color: #151f2e; }
html[data-bs-theme="dark"] .flatpickr-months .flatpickr-month,
html[data-bs-theme="dark"] .flatpickr-current-month,
html[data-bs-theme="dark"] .flatpickr-weekdays { background: #151f2e; }
html[data-bs-theme="dark"] .flatpickr-current-month,
html[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
html[data-bs-theme="dark"] .flatpickr-current-month input.cur-year { color: #e8edf5; background: transparent; fill: #e8edf5; }
html[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months option { background: #151f2e; }
html[data-bs-theme="dark"] .flatpickr-prev-month svg,
html[data-bs-theme="dark"] .flatpickr-next-month svg { fill: #c9d4e3; }
html[data-bs-theme="dark"] .flatpickr-prev-month:hover svg,
html[data-bs-theme="dark"] .flatpickr-next-month:hover svg { fill: #7ab4e8; }
html[data-bs-theme="dark"] span.flatpickr-weekday { background: #151f2e; color: #9aa7bd; }
html[data-bs-theme="dark"] .flatpickr-day { color: #c9d4e3; }
html[data-bs-theme="dark"] .flatpickr-day.today { border-color: #7ab4e8; }
html[data-bs-theme="dark"] .flatpickr-day:hover,
html[data-bs-theme="dark"] .flatpickr-day:focus { background: #1a2336; border-color: #1a2336; }
html[data-bs-theme="dark"] .flatpickr-day.selected,
html[data-bs-theme="dark"] .flatpickr-day.selected:hover,
html[data-bs-theme="dark"] .flatpickr-day.selected:focus {
    background: #206bc4;
    border-color: #206bc4;
    color: #fff;
}
html[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled,
html[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled:hover,
html[data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
html[data-bs-theme="dark"] .flatpickr-day.nextMonthDay,
html[data-bs-theme="dark"] .flatpickr-day.notAllowed,
html[data-bs-theme="dark"] .flatpickr-day.notAllowed.prevMonthDay,
html[data-bs-theme="dark"] .flatpickr-day.notAllowed.nextMonthDay { color: #4b5a70; }

/* ── Tabbed forms ── */
.connect-tabs .nav-link { font-size: 13px; font-weight: 600; }

/* ── Bills — document cards & filter dropdown row ── */
.doc-meta-col { font-size: .78rem; color: var(--tblr-secondary-color); margin-bottom: 2px; display: flex; align-items: center; gap: 5px; }
.doc-meta-val { font-size: .9rem; font-weight: 700; color: var(--tblr-body-color); }

/* Three-zone footer row (Invoices & Payments: Date / Amount / Download — Pending Orders:
   Date / Amount / Service). Never wraps to a second line even for large amounts (e.g.
   ₹10,00,000.00) — the center zone shrinks/truncates instead of pushing the right zone down. */
.doc-footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 8px; }

/* Invoices tab's label/value rows: two equal-width columns, each centered — instead of the shared
   .doc-footer-row's space-between (which pins the first item to the left edge and the second to the
   right edge). Sets its own `display: flex` rather than relying on `.doc-meta-item` also being present
   on the same element — the badge row (Invoice/Receipt — Paid/Pending) uses .doc-footer-col-item alone,
   with no .doc-meta-item alongside it, so `justify-content: center` alone did nothing there (not a flex
   container) while the Doc No/Amount and Date/Payment Type rows (which do carry .doc-meta-item, itself
   `display: flex`) centered correctly — the three rows didn't line up under each other as a result. */
.doc-footer-row-2col > .doc-footer-col-item { display: flex; flex: 1 1 0; justify-content: center; align-items: center; min-width: 0; }

.doc-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--tblr-body-color);
    white-space: nowrap;
}
.doc-meta-item i { font-size: .95rem; color: var(--tblr-secondary-color); flex-shrink: 0; }

.doc-meta-left { flex: 0 0 auto; }
.doc-meta-right { flex: 0 0 auto; justify-content: flex-end; }
.doc-meta-center {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Paid/Pending (and Pending Orders' status) badge — a bit larger and nudged down from the
   card's top edge rather than sitting flush with the icon/title row. */
.doc-status-badge { font-size: .78rem; padding: 6px 12px; margin-top: 6px; }

/* The filter dropdowns (Sort/Type/Status/Date) are NOT Bootstrap's dropdown component — .filter-scroll
   needs overflow-x:auto to scroll horizontally, which per the CSS spec silently forces overflow-y to
   behave as "auto" too, clipping anything that pops open below a button in that row; and separately,
   .card sets position:relative with z-index:auto, so cards rendered later in the DOM would still win
   the paint order over a same-level positioned dropdown even if the clipping weren't an issue. Custom
   JS (Bills/Index.cshtml) moves the open menu to <body> and positions it with position:fixed from the
   trigger's own bounding rect, sidestepping both problems at once — this class targets it directly
   since once portaled it's no longer a descendant of .filter-scroll. */
.filter-dropdown-menu.show { z-index: 4500; }

/* Compact icon-only Download button — 3rd column on .doc-info-row, right-aligned and vertically
   centered, replacing the old Download/Send Email two-button row underneath the info columns (Send
   Email removed entirely; Download no longer needs its own text label since it's the only action left). */
.download-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 1rem;
    color: var(--brand);
    background: var(--tblr-primary-lt, #e8f0fe);
    border: 1px solid rgba(0, 0, 0, .18);
    flex-shrink: 0;
}
.download-icon-btn:hover { color: var(--brand); border-color: var(--brand); }

/* Card body's info columns (Invoices tab) — 20px padding per spec, left-aligned two-column layout:
   Invoice/Receipt badge, Doc No, Date in the left column; Paid/Pending badge, Amount, Payment Type in
   the right column — replacing the earlier three separate centered rows. */
.doc-card-body { padding: 20px; }
.doc-info-row { display: flex; gap: 16px; }
.doc-info-col { flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.doc-info-item { text-align: left; }

/* .doc-status-badge's own margin-top: 6px (needed elsewhere for the old icon-avatar header layout, where
   it nudges the badge down from the top edge — see Pending Orders' status badge further down this file)
   was also being inherited here, where it's the very first item in the column instead — pushing the
   whole right column ~14px lower than the left column (6px margin + the badge's own slightly taller
   line-height/padding vs the left column's plain .badge). Zeroed only inside .doc-info-item so the two
   columns' rows line up. */
.doc-info-item .doc-status-badge { margin-top: 0; }

.filter-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin: 0 -16px 14px;
    padding-left: 16px;
    padding-right: 16px;
    scrollbar-width: none;
}
.filter-scroll::-webkit-scrollbar { display: none; }

.filter-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: .82rem;
    font-weight: 700;
    border: 1.4px solid var(--tblr-border-color);
    color: var(--tblr-body-color);
    background: #fff;
    white-space: nowrap;
}
.filter-btn.active-filter { border-color: var(--brand); color: var(--brand); }
.filter-btn.clear-btn { color: var(--brand); border-color: var(--tblr-border-color); }
.filter-btn i { font-size: .95rem; }
.filter-btn.dropdown-toggle::after { display: none !important; }
.filter-dropdown-menu { border-radius: 10px; font-size: .86rem; min-width: 170px; }
.filter-date-panel { padding: 10px 12px; min-width: 230px; }
.filter-date-panel .form-label { font-size: .74rem; font-weight: 600; color: var(--tblr-secondary-color); margin-bottom: 2px; }

html[data-bs-theme="dark"] .filter-btn { background: #1a2336; border-color: #2c3e54; color: #c9d4e3; }
html[data-bs-theme="dark"] .filter-btn.active-filter,
html[data-bs-theme="dark"] .filter-btn.clear-btn { color: #7ab4e8; }
html[data-bs-theme="dark"] .doc-meta-val { color: #e8edf5; }
html[data-bs-theme="dark"] .doc-meta-item { color: #e8edf5; }
html[data-bs-theme="dark"] .download-icon-btn { background: #1a2e48; border-color: #2c3e54; color: #7ab4e8; }
html[data-bs-theme="dark"] .download-icon-btn:hover { background: #1a2336; border-color: #2c3e54; }

/* Bootstrap's .bg-white utility is a fixed literal white — like .text-dark, it never adapts to dark
   theme. It's only ever used app-wide for small accents (icon-badge circles/pills, input-group icon
   prefixes), never a large surface, so a single dark-tint override here is safe everywhere it appears:
   the "Explore Plans"/promo rocket icon, the Recommended Upgrade plan icon and "+₹X more" badge, the
   Postpaid/Prepaid connection-type badge, the "Need older invoices" banner icon, and every search/
   calendar input-group icon prefix. Without this they rendered as jarring solid-white circles/boxes
   sitting on otherwise-dark cards. Same #1a2e48 tint already used for .download-icon-btn/.plan-sort-menu
   .sort-option.active elsewhere, for a consistent "dark navy accent" look instead of literal white. */
html[data-bs-theme="dark"] .bg-white { background-color: #1a2e48 !important; }

html[data-bs-theme="dark"] .sort-select { background: #1a2336; border-color: #2c3e54; color: #c9d4e3; }
html[data-bs-theme="dark"] .sort-select:hover,
html[data-bs-theme="dark"] .sort-select.show { border-color: #2a4d78; color: #7ab4e8; box-shadow: 0 0 0 3px rgba(122, 180, 232, .15); }
html[data-bs-theme="dark"] .plan-sort-menu { background: #151f2e; border-color: #253143; }
html[data-bs-theme="dark"] .plan-sort-menu .sort-option { color: #c9d4e3; }
html[data-bs-theme="dark"] .plan-sort-menu .sort-option:hover,
html[data-bs-theme="dark"] .plan-sort-menu .sort-option.active { background: #1a2e48; color: #7ab4e8; }
html[data-bs-theme="dark"] .plan-sort-menu .sort-option:hover i:first-child,
html[data-bs-theme="dark"] .plan-sort-menu .sort-option.active i:first-child { color: #7ab4e8; }
html[data-bs-theme="dark"] .sort-check { color: #7ab4e8; }

/* ── Auth (login) page ── */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: #f4f6fa;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}

.auth-logo { text-align: center; margin-bottom: 16px; }
.auth-logo img { max-height: 64px; width: auto; }
.auth-subtitle { font-size: 13px; color: #6b7280; text-align: center; margin-bottom: 20px; }
.auth-header { text-align: center; margin-bottom: 20px; }
.auth-header h4 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.auth-header p { font-size: 14px; color: #6c757d; margin: 0; }

/* ── Dark theme overrides ── */
html[data-bs-theme="dark"] body { background: #0a0f1a; }
html[data-bs-theme="dark"] .phone-shell { background: transparent; }
html[data-bs-theme="dark"] .welcome-panel { background: #151f2e; border-color: #253143; }
html[data-bs-theme="dark"] .mobile-bottom-nav { background: #151f2e; border-color: #253143; }
html[data-bs-theme="dark"] .profile-panel-signout { background: #151f2e; }

html[data-bs-theme="dark"] .profile-panel-item { border-color: #253143; }
html[data-bs-theme="dark"] .profile-panel-address { color: #9aa7bd; }

html[data-bs-theme="dark"] .menu-card,
html[data-bs-theme="dark"] .list-card { border-color: #253143; }

html[data-bs-theme="dark"] .plan-card,
html[data-bs-theme="dark"] .accent-card { background: #151f2e; border-color: #253143; }
html[data-bs-theme="dark"] .ott-logo-chip { background: #1d2838; border-color: #253143; }
html[data-bs-theme="dark"] .chip { background: #1a2336; border-color: #2c3e54; color: #c9d4e3; }

html[data-bs-theme="dark"] .plan-search-suggestions { background: #151f2e; border-color: #253143; }
html[data-bs-theme="dark"] .plan-search-suggestion-item { border-color: #253143; }
html[data-bs-theme="dark"] .plan-search-suggestion-item:hover { background: #1a2e48; }
html[data-bs-theme="dark"] .plan-search-suggestion-name { color: #e8edf5; }
html[data-bs-theme="dark"] .plan-search-suggestion-empty { color: #9aa7bd; }
html[data-bs-theme="dark"] .plan-tabs { border-color: #253143; }
html[data-bs-theme="dark"] .meta-row { color: #9aa7bd; }

html[data-bs-theme="dark"] .menu-title,
html[data-bs-theme="dark"] .list-card-title,
html[data-bs-theme="dark"] .list-card-amount { color: #e8edf5; }

html[data-bs-theme="dark"] .menu-desc,
html[data-bs-theme="dark"] .list-card-meta { color: #9aa7bd; }

html[data-bs-theme="dark"] .support-category { border-color: #253143; }
html[data-bs-theme="dark"] .support-category .accordion-button { background: #151f2e; color: #e8edf5; }
html[data-bs-theme="dark"] .support-category .accordion-button:not(.collapsed) { background: #1a2e48; color: #7ab4e8; }
html[data-bs-theme="dark"] .query-option { border-color: #253143; }
html[data-bs-theme="dark"] .query-option:hover { background: rgba(122, 180, 232, .08); }
html[data-bs-theme="dark"] .query-option-text { color: #c9d4e3; }
html[data-bs-theme="dark"] .query-option .radio-dot { border-color: #3a4a63; }
html[data-bs-theme="dark"] .support-other-note { color: #9aa7bd; }

html[data-bs-theme="dark"] .help-category-title { color: #e8edf5; }
html[data-bs-theme="dark"] .help-faq-accordion .help-faq-item { border-color: #253143; }
html[data-bs-theme="dark"] .help-faq-accordion .accordion-button { color: #c9d4e3; }
html[data-bs-theme="dark"] .help-faq-accordion .accordion-button:not(.collapsed) { color: #7ab4e8; }

html[data-bs-theme="dark"] .menu-arrow { color: #6a7a92; }

html[data-bs-theme="dark"] .qa-tile { border-color: #253143; }
html[data-bs-theme="dark"] .info-card-value { color: #e8edf5; }
html[data-bs-theme="dark"] .bar-col .bar-val,
html[data-bs-theme="dark"] .bar-col .bar-date { color: #9aa7bd; }

html[data-bs-theme="dark"] .auth-page { background: #0f1623; }
html[data-bs-theme="dark"] .auth-card { background: #131c2b; border-color: #253143; }
html[data-bs-theme="dark"] .auth-logo { color: #e8edf5; }
html[data-bs-theme="dark"] .auth-header h4 { color: #e8edf5; }