:root {
    --form-navy: #10243e;
    --form-navy-dark: #0a1a2c;
    --form-navy-deep: #081524;
    --form-gold: #c8a04d;
    --form-bg: #f4f6f9;
    --form-blue-light: #7fd6f2;
    --form-blue: #4696d2;
    --form-blue-deep: #2f6fb0;
    --form-gold-light: #e3c383;
    --form-gold-deep: #a67c2e;

}

/* PORTAL-ONLY THEME (2026-10-31, per explicit request - "apply Royal Indigo & Amber, in
   portal alone"): re-declares the same --form-* custom property names, scoped to
   .portal-body (the <body> class PortalMaster.master uses - see its own <body> tag), one
   level below :root. CSS custom properties inherit down the DOM tree, so every rule in this
   file that already reads var(--form-navy)/var(--form-gold)/etc. (the portal-* classes
   further below, plus any shared classes like .btn-primary) automatically picks up these
   values on any page rendered under PortalMaster.master, with zero changes needed to those
   rules themselves. The Admin/Accounting side (Site.Master's <body>, no "portal-body" class)
   is completely unaffected - it keeps reading the original navy/gold values from :root above.
   --form-bg is intentionally left as the shared light gray/not overridden, so the Portal's
   page background still matches the rest of the app and card content stays readable; only
   the brand/accent colors (navy->indigo, gold->amber, blue->violet) change. */
.portal-body {
    --form-navy: #2a1f5e;
    --form-navy-dark: #1b1440;
    --form-navy-deep: #120c2c;
    --form-gold: #e0a93a;
    --form-gold-light: #f2c876;
    --form-gold-deep: #b7832a;
    --form-blue-light: #b6a6ff;
    --form-blue: #7a5cff;
    --form-blue-deep: #5a3fd1;
}

body {
    background-color: var(--form-bg);
    font-size: 15px;
}

.bg-navy {
    background-color: var(--form-navy) !important;
}

/* Touch-friendly controls - comfortable tap targets on phones/tablets */
.btn, .form-control, .form-select, .nav-link, .dropdown-item {
    min-height: 40px;
}

.btn {
    padding: .5rem 1rem;
}

/* FIX (2026-10-19): true Bootstrap-small button size, app-wide. Every page's
   toolbar buttons (Filter/Clear/New.../Export/etc.) already carry the
   "btn-sm" class in their markup, but Bootstrap's own .btn-sm rule (smaller
   padding/font-size) and this file's ".btn { padding: .5rem 1rem; }" /
   "min-height: 40px" rules above have equal (single-class) specificity, and
   these rules load after Bootstrap's - so they always won, and "btn-sm"
   had no visible effect anywhere in the app. This re-asserts the smaller
   size for ".btn-sm" specifically, later in the cascade, so it wins back -
   every page that uses "btn-sm" (InvestmentList.aspx, ShareholdersListReport.aspx,
   Shareholders/ShareholderList.aspx, and any other page built on this same
   pattern) now renders those buttons at this one consistent small size with
   no per-page CSS needed. */
.btn-sm {
    min-height: 30px;
    padding: .25rem .6rem;
    font-size: .8rem;
    border-radius: .4rem;
}

.btn-sm i {
    font-size: .85rem;
}

.card {
    border: none;
    border-radius: .6rem;
    box-shadow: 0 1px 4px rgba(16, 36, 62, .08);
}

.card .card-header {
    background-color: #fff;
    border-bottom: 1px solid #eef0f3;
    font-weight: 600;
    color: var(--form-navy);
}

/* ============ Listing/report page header banner ============ */
.page-header {
    /* Very light, pale blue-tinted gradient (near white with a hint of navy) - gold bottom
       border kept as the one brand accent, distinguishing it from the ivory report-page header. */
    background: linear-gradient(120deg, #ffffff 0%, #e9f1fa 55%, #d9e8f7 100%);
    border-radius: .6rem;
    padding: 16px 22px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 3px solid var(--form-gold);
    box-shadow: 0 1px 6px rgba(16, 36, 62, .10);
}

.page-header h4 {
    color: var(--form-navy);
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 1.15rem;
}

.page-header .page-sub {
    color: #5c7089;
    font-size: .8rem;
    margin-top: 2px;
}

.page-header .btn-add {
    background: var(--form-gold);
    border: none;
    color: var(--form-navy-deep);
    font-weight: 600;
}

.page-header .btn-add:hover {
    background: #d8b565;
    color: var(--form-navy-deep);
}

/* Light variant - used on report-style pages (Journal List, Chart of Accounts, General Ledger,
   Trial Balance, Balance Sheet, P&L, Cash Flow): no accent bar/line, title gets a soft drop-shadow only. */
.page-header-light {
    border-radius: .6rem;
    padding: 16px 22px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    box-shadow: 0 1px 6px rgba(16, 36, 62, .08);
}

.page-header-light h4 {
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 1.15rem;
}

.page-header-light .page-sub {
    font-size: .8rem;
    margin-top: 2px;
}

.page-header-light.opt-a {
    background: linear-gradient(120deg, #ffffff 0%, #eef2f7 65%, #e4ebf3 100%);
}

.page-header-light.opt-a h4 {
    color: var(--form-navy);
    text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 3px 5px rgba(16,36,62,.18);
}

.page-header-light.opt-a .page-sub {
    color: #63707f;
    margin-top: 0;
}

/* ============ GridView gradient header + themed rows + compact row height ============ */
table.form-grid {
    margin-bottom: 0;
    font-size: .86rem;
}

table.form-grid thead th {
    background: linear-gradient(135deg, var(--form-navy) 0%, var(--form-navy-dark) 100%);
    color: #fff;
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: none;
    padding: 8px 10px;
    white-space: nowrap;
}

table.form-grid thead th:first-child { border-top-left-radius: .4rem; }
table.form-grid thead th:last-child { border-top-right-radius: .4rem; }

table.form-grid tbody td {
    padding: 5px 10px;
    vertical-align: middle;
    border-bottom: 1px solid #eef0f3;
    line-height: 1.25;
}

table.form-grid tbody tr:nth-child(even) {
    background: rgba(16, 36, 62, .028);
}

table.form-grid tbody tr:hover {
    background: rgba(200, 160, 77, .10);
}

table.form-grid tfoot td {
    background: rgba(16, 36, 62, .045);
    border-top: 2px solid rgba(16, 36, 62, .12);
}

/* ============ Compact icon-only row actions ============ */
.row-actions {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
}

.btn-icon {
    width: 26px;
    height: 26px;
    min-height: 26px !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .78rem;
    line-height: 1;
}

.btn-icon i {
    pointer-events: none;
}

.stat-tile {
    border-radius: .6rem;
    padding: 1rem 1.25rem;
    background: #fff;
    box-shadow: 0 1px 4px rgba(16, 36, 62, .08);
}

.stat-tile .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--form-navy);
}

.stat-tile .stat-label {
    font-size: .8rem;
    color: #6b7785;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.table-responsive {
    border-radius: .5rem;
    overflow: hidden;
}

.badge-posted { background-color: #1e7e34; }
.badge-draft { background-color: #6c757d; }
.badge-void { background-color: #b02a37; }
/* Bootstrap 5's base .badge sets color:#fff expecting a bg-* class alongside it, so with no
   background-color rule of its own, badge-pending rendered as invisible white-on-white text
   (e.g. Chitti's "Active"/"Pending" status badges) - this was simply never defined. */
.badge-pending { background-color: #ffc107; color: #212529; }
/* NEW (2026-10-26, per explicit request - "provision to waive if no need to pay for some months" on
   Meetings/DirectorWages.aspx): distinct from badge-draft (gray, already used for "Unpaid") so a waived
   month doesn't look identical to an outstanding one. */
.badge-waived { background-color: #6f42c1; }

/* Phones: stack the journal-line grid controls comfortably */
@media (max-width: 576px) {
    .container-fluid {
        padding-left: .75rem;
        padding-right: .75rem;
    }
    .stat-tile .stat-value {
        font-size: 1.3rem;
    }
}

/* ===================== Login page ===================== */

html, body.login-body {
    height: 100%;
}

body.login-body {
    margin: 0;
    min-height: 100vh;
    background: var(--form-navy-deep);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.login-hero {
    position: relative;
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 4.5rem;
    color: #fff;
    background: linear-gradient(150deg, var(--form-navy-deep) 0%, var(--form-navy) 55%, var(--form-blue-deep) 130%);
    overflow: hidden;
}

.login-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 18% 20%, rgba(127, 214, 242, .16), transparent 45%),
                       radial-gradient(circle at 85% 80%, rgba(70, 150, 210, .22), transparent 50%);
    pointer-events: none;
}

.login-hero .hero-watermark {
    position: absolute;
    right: -6%;
    bottom: -8%;
    width: 62%;
    max-width: 560px;
    opacity: .16;
    filter: drop-shadow(0 0 40px rgba(127, 214, 242, .25));
    pointer-events: none;
}

.login-hero .hero-content {
    position: relative;
    z-index: 1;
    max-width: 480px;
}

.login-hero .hero-icon {
    width: 56px;
    height: auto;
    margin-bottom: 1.75rem;
}

.login-hero h1 {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: .01em;
    margin-bottom: .5rem;
}

.login-hero .hero-sub {
    font-size: 1.02rem;
    color: rgba(255, 255, 255, .78);
    line-height: 1.6;
    margin-bottom: 2.25rem;
}

.login-hero .hero-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.login-hero .hero-points li {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .92rem;
    color: rgba(255, 255, 255, .85);
}

.login-hero .hero-points i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--form-blue-light), var(--form-blue));
    color: #0a1a2c;
    font-size: .85rem;
    flex: none;
}

.login-panel {
    flex: 1 1 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: 2.5rem 2rem;
}

.login-card {
    width: 100%;
    max-width: 380px;
}

.login-card .login-logo {
    max-width: 190px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 1.75rem;
}

.login-card h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--form-navy);
    text-align: center;
    margin-bottom: .3rem;
}

.login-card .login-sub {
    text-align: center;
    color: #7a8593;
    font-size: .88rem;
    margin-bottom: 2rem;
}

.login-card .form-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--form-navy);
}

.login-card .input-group-text {
    background-color: #f4f6f9;
    border-right: none;
    color: var(--form-blue-deep);
}

.login-card .form-control {
    border-left: none;
    padding-top: .6rem;
    padding-bottom: .6rem;
}

.login-card .input-group:focus-within {
    box-shadow: 0 0 0 .2rem rgba(70, 150, 210, .18);
    border-radius: .375rem;
}

.login-card .input-group:focus-within .input-group-text,
.login-card .input-group:focus-within .form-control {
    border-color: var(--form-blue);
}

.btn-brand {
    background: linear-gradient(135deg, var(--form-blue-light), var(--form-blue-deep));
    border: none;
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: 0 6px 16px rgba(47, 111, 176, .35);
}

.btn-brand:hover, .btn-brand:focus {
    color: #fff;
    filter: brightness(1.06);
    box-shadow: 0 8px 20px rgba(47, 111, 176, .45);
}

.login-footer-note {
    text-align: center;
    color: #a3adb8;
    font-size: .78rem;
    margin-top: 2rem;
}

@media (max-width: 991.98px) {
    .login-hero {
        display: none;
    }
    .login-panel {
        flex: 1 1 100%;
        background: var(--form-navy-deep);
    }
    .login-card {
        background: #fff;
        border-radius: .8rem;
        padding: 2.25rem 1.75rem;
        box-shadow: 0 20px 45px rgba(0,0,0,.35);
    }
}

/* ===================== App shell: left sidebar layout ===================== */

.app-shell {
    display: flex;
    align-items: stretch;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar (with the FORM logo) is pinned full-height on the left - it no longer scrolls
   away with the page. Its own nav list still scrolls internally if it ever grows too tall
   (see .sidebar-body below), but the logo/brand block at the top always stays visible. */
.sidebar {
    width: 210px;
    flex: 0 0 210px;
    background: var(--form-navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 1050;
    transition: width .2s ease, flex-basis .2s ease;
    height: 100vh;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .85rem .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    flex: none;
}

.sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: .92rem;
    min-width: 0;
}

.sidebar-brand-link img {
    height: 26px;
    width: 26px;
    object-fit: contain;
    flex: none;
}

.sidebar-brand-link small {
    display: block;
    font-weight: 400;
    font-size: .68rem;
    color: rgba(255, 255, 255, .55);
    white-space: normal;
    line-height: 1.2;
}

.sidebar-close {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, .7);
    font-size: 1.1rem;
    padding: .25rem .4rem;
    line-height: 1;
}

.sidebar-close:hover {
    color: #fff;
}

.sidebar-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .5rem .45rem 1rem;
}

.sidebar-nav,
.sidebar-nav .nav-item,
.sidebar-submenu,
.sidebar-submenu .nav-item {
    margin: 0;
    padding: 0;
}

.sidebar-nav .nav-link {
    color: rgba(255, 255, 255, .78);
    padding: .4rem .6rem;
    border-radius: .4rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .85rem;
    min-height: 32px;
    line-height: 1.2;
}

.sidebar-nav .nav-link i {
    font-size: .92rem;
    width: 16px;
    text-align: center;
    flex: none;
}

.sidebar-nav .nav-link span {
    flex: 1 1 auto;
}

.sidebar-nav .nav-link:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.sidebar-nav .toggle-caret {
    width: auto;
    font-size: .75rem;
    transition: transform .2s ease;
    flex: none;
}

.sidebar-toggle[aria-expanded="true"] .toggle-caret {
    transform: rotate(180deg);
}

.sidebar-submenu {
    padding-left: 1.35rem;
    margin-top: .1rem;
}

.sidebar-submenu .nav-link {
    font-size: .8rem;
    padding: .35rem .6rem;
    color: rgba(255, 255, 255, .62);
    min-height: 30px;
    line-height: 1.2;
}

.sidebar-submenu .nav-link:hover {
    color: #fff;
}

/* Independently scrollable content column - .topbar (position:sticky below) now pins itself
   to the top of THIS box instead of the whole page, since this is the scrolling ancestor. */
.main-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--form-bg);
    height: 100vh;
    overflow-y: auto;
}

/* Navy gradient bar (2026-09-18 re-theme) - matches the sidebar's navy family
   (replacing the brief blue-to-green accent gradient) with the same diagonal
   navy-to-blue sweep used on the login screen's hero panel, plus a soft glow
   overlay and a thin gold edge for a more polished, on-brand finish. All
   child elements below are overridden for light-on-dark contrast against the
   gradient - they had no color of their own before (relying on default
   black/gray text), which is fine on white but invisible here. */
.topbar {
    background: linear-gradient(120deg, var(--form-navy-deep) 0%, var(--form-navy) 50%, var(--form-blue-deep) 100%);
    border-bottom: 2px solid var(--form-gold);
    padding: .55rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 56px;
    gap: .35rem;
    color: #fff;
    box-shadow: 0 4px 14px rgba(8, 21, 36, .3);
    overflow: hidden;
}

.topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 10% 25%, rgba(127, 214, 242, .2), transparent 45%),
                       radial-gradient(circle at 92% 80%, rgba(200, 160, 77, .18), transparent 50%);
    pointer-events: none;
}

.topbar > * {
    position: relative;
    z-index: 1;
}

.topbar .sidebar-toggler {
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    padding: .35rem .55rem;
    border-radius: .5rem;
}

.topbar .sidebar-toggler:hover {
    background: rgba(255, 255, 255, .24);
}

.topbar .topbar-date-chip {
    align-items: center;
    gap: .4rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 500;
}

.topbar .text-muted {
    color: rgba(255, 255, 255, .92) !important;
    font-weight: 500;
}

.topbar .btn-topbar-logout {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: .85rem;
    padding: .4rem .9rem;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 2rem;
    transition: background .15s ease;
}

.topbar .btn-topbar-logout:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.topbar .btn-topbar-logout-icon {
    display: inline-flex;
    font-size: .95rem;
}

.sidebar-toggler {
    border: none;
    background: transparent;
    color: var(--form-navy);
    font-size: 1.3rem;
    line-height: 1;
    padding: .35rem .5rem;
    border-radius: .4rem;
}

.sidebar-toggler:hover {
    background: rgba(16, 36, 62, .08);
}

.sidebar-backdrop {
    display: none;
}

/* Below the desktop breakpoint the sidebar becomes a slide-in panel */
@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, .35);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(8, 21, 36, .5);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .sidebar-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (min-width: 992px) {
    .sidebar-close {
        display: none;
    }

    /* Desktop hide/show provision: collapses the sidebar to zero width
       instead of the mobile off-canvas slide, so the main content simply
       expands to fill the freed space. */
    .app-shell.sidebar-hidden .sidebar {
        width: 0;
        flex: 0 0 0;
        overflow: hidden;
        border: none;
    }
}

/* ===================== Horizontal top navbar (2026-10-01) =====================
   Additive only - the .sidebar/.app-shell/.main-wrap rules above are left exactly
   as they were (now simply unused) so reverting Site.Master's markup is enough to
   bring the old vertical sidebar straight back with zero CSS changes needed.
   .app-topnav reuses .topbar itself (navy gradient, sticky, gold edge, decorative
   overlay, date chip + logout button styling all already defined above) by being
   applied as a second class on the same <nav> element - only the few things that
   are genuinely new (brand mark, nav links, dropdown menus, the toggler icon,
   and the mobile collapse panel) are defined here. */

.app-topnav {
    /* .topbar sets overflow:hidden to clip its own decorative ::before gradient;
       that would also clip every dropdown-menu opening below the bar, so it must
       be allowed to overflow here. */
    overflow: visible;
    flex-wrap: wrap;
    /* .topbar relies on position:sticky (plus z-index:1030) to sit above the rest
       of the page, but position:sticky falls back to static on anything that
       doesn't support it - and a static element ignores z-index entirely, which
       is why the open dropdown menus were sinking behind page content below the
       bar. "position: relative" is declared first as a fallback: a parser that
       doesn't understand the next line (position: sticky) simply drops that whole
       declaration and keeps this one, which is still a positioned element and so
       still honors z-index. */
    position: relative;
    position: sticky;
    z-index: 1030;
}

/* Every dropdown needs to be its own positioning context for its menu, and the
   open menu itself needs an explicit z-index well above anything on the page
   underneath it (grid sticky headers, cards, etc. all use single-digit z-index
   values) - !important so nothing on an individual page can accidentally win. */
.app-topnav-nav .nav-item.dropdown {
    position: relative;
}

.app-topnav-nav .dropdown-menu {
    position: absolute !important;
    z-index: 2000 !important;
}

.app-topnav-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: .95rem;
}

.app-topnav-brand:hover {
    color: #fff;
}

.app-topnav-brand img {
    height: 26px;
    width: 26px;
    object-fit: contain;
}

.app-topnav-nav {
    gap: .15rem;
}

.app-topnav-nav .nav-link {
    color: rgba(255, 255, 255, .82);
    padding: .5rem .7rem;
    border-radius: .4rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .84rem;
    white-space: nowrap;
}

.app-topnav-nav .nav-link i {
    font-size: .92rem;
}

.app-topnav-nav .nav-link:hover,
.app-topnav-nav .nav-link:focus {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.app-topnav-nav .nav-item.dropdown.show > .nav-link,
.app-topnav-nav .nav-link.show {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.app-topnav-nav .dropdown-menu {
    border: none;
    border-radius: .55rem;
    box-shadow: 0 10px 28px rgba(8, 21, 36, .28);
    padding: .4rem;
    margin-top: .35rem;
}

.app-topnav-nav .dropdown-item {
    color: #081524;
    font-size: .84rem;
    padding: .45rem .7rem;
    border-radius: .4rem;
}

.app-topnav-nav .dropdown-item:hover,
.app-topnav-nav .dropdown-item:focus {
    background: #10243e;
    color: #fff;
}

/* Hamburger toggle for < lg widths - the default Bootstrap icon is drawn in a dark
   stroke color meant for light backgrounds, so it needs its own light-colored icon
   and a visible outline against the navy gradient. */
.app-topnav .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, .55);
    padding: .3rem .55rem;
}

.app-topnav .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.app-topnav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.app-topnav-actions {
    flex-wrap: wrap;
}

@media (max-width: 991.98px) {
    /* Below the "lg" breakpoint the nav items collapse into a dropdown panel under
       the bar instead of spreading across it - give that panel its own solid navy
       background (it has none by default) and stack the brand-row action cluster
       underneath the links with a separating line. */
    .app-topnav .navbar-collapse {
        background: #10243e;
        border-radius: 0 0 .6rem .6rem;
        margin: .5rem -1rem -.55rem;
        padding: .5rem 1rem .75rem;
    }

    .app-topnav-actions {
        margin-top: .5rem;
        padding-top: .6rem;
        border-top: 1px solid rgba(255, 255, 255, .15);
        justify-content: flex-start;
    }
}

/* Shareholders list - dense filter bar + gridded data table (req. 3.1). */
.filter-bar .form-label {
    color: #6c7a89;
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Settings > Notifications - "Send To" radio choices, spaced out since RepeatLayout="Flow"
   otherwise packs them together with no gap. */
.notify-target-list label {
    margin-right: 1.5rem;
    font-weight: 500;
}

.shareholder-grid th {
    background: #eef1f5;
    color: var(--form-blue-deep);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}

.shareholder-grid td,
.shareholder-grid th {
    border: 1px solid #dfe3e8;
    padding: .45rem .6rem;
    font-size: .85rem;
    vertical-align: middle;
}

.shareholder-grid tbody tr:nth-child(even) {
    background-color: #f8f9fb;
}

/* ===================== Member Portal (mobile-first, app-style) ===================== */

.portal-body {
    background-color: var(--form-bg);
    min-height: 100vh;
    padding-bottom: 6.75rem; /* room for the floating bottom nav */
}

/* Navy gradient (2026-09-18 re-theme), matching the same treatment given to
   the admin/EXE .topbar - a diagonal navy-to-blue sweep with a soft glow and
   a thin gold edge, instead of the previous flat solid navy. Every child
   here already uses white/rgba(255,255,255,...) styling, so no further
   overrides were needed for contrast. */
.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: linear-gradient(120deg, var(--form-navy-deep) 0%, var(--form-navy) 50%, var(--form-blue-deep) 100%);
    border-bottom: 2px solid var(--form-gold);
    color: #fff;
    padding: .7rem 1rem;
    box-shadow: 0 4px 14px rgba(8, 21, 36, .3);
    overflow: hidden;
}

.portal-topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 10% 20%, rgba(127, 214, 242, .2), transparent 45%),
                       radial-gradient(circle at 92% 85%, rgba(200, 160, 77, .18), transparent 50%);
    pointer-events: none;
}

.portal-topbar > * {
    position: relative;
    z-index: 1;
}

.portal-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .02em;
}

.portal-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25);
    color: #fff;
    border: none;
    font-size: 1.25rem;
    text-decoration: none;
}

.portal-icon-btn:hover,
.portal-icon-btn:focus {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.portal-bell-btn {
    position: relative;
}

.portal-bell-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--form-gold);
    color: var(--form-navy-deep);
    font-size: .62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.portal-main {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 .9rem 1.5rem;
}

/* ---- Hero: avatar + greeting + portfolio headline at the top of the Dashboard ---- */
.portal-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    margin: .9rem 0 1rem;
    padding: 1.3rem 1.25rem 1.2rem;
    border-radius: 1.4rem;
    border: 1px solid rgba(200, 160, 77, .25);
    background:
        radial-gradient(circle at 15% 0%, rgba(200, 160, 77, .35) 0%, transparent 45%),
        radial-gradient(circle at 100% 10%, rgba(70, 150, 210, .28) 0%, transparent 50%),
        linear-gradient(160deg, #16304f 0%, var(--form-navy) 35%, var(--form-navy-dark) 70%, var(--form-navy-deep) 100%);
    box-shadow: 0 18px 40px -12px rgba(8, 21, 36, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.portal-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--form-gold-light), var(--form-gold), transparent);
}

.portal-hero-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid transparent;
    background: linear-gradient(#16304f, #16304f) padding-box,
                linear-gradient(135deg, var(--form-gold-light), var(--form-gold-deep)) border-box;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

.portal-hero-greeting {
    margin-top: .65rem;
    font-size: .74rem;
    color: rgba(255, 255, 255, .6);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.portal-hero-name {
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: .1rem;
    color: #fff;
}

.portal-hero-sub {
    margin-top: .15rem;
    font-size: .76rem;
    color: rgba(255, 255, 255, .55);
}

.portal-portfolio-block {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.portal-portfolio-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255, 255, 255, .55);
}

.portal-portfolio-label i {
    color: var(--form-gold-light);
}

.portal-portfolio-value {
    margin-top: .25rem;
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1.15;
    background: linear-gradient(90deg, #ffffff 0%, #f3e6c8 60%, var(--form-gold-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.portal-hero-chips {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
}

.portal-hero-chip {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: .55rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .9rem;
    padding: .5rem .55rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.portal-hero-chip-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffe4a6, #e0a83f);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 4px 10px -3px rgba(214, 163, 62, .55);
}

.portal-hero-chip-icon i {
    color: #fff;
    font-size: 1.05rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.portal-hero-chip .chip-val {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
}

.portal-hero-chip .chip-lbl {
    display: block;
    font-size: .6rem;
    color: rgba(255, 255, 255, .55);
}

/* ---- Section labels above card lists ---- */

.portal-section-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #8a93a1;
    margin: 0 .3rem .5rem;
}

/* ---- Amber info banner (reused for the existing "company-wide figures" note) ---- */

.portal-banner {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: #fdf3df;
    border: 1px solid #f1dfab;
    color: #6b5417;
    border-radius: .7rem;
    padding: .75rem .9rem;
    font-size: .78rem;
    line-height: 1.35;
    margin-bottom: 1rem;
}

.portal-banner i {
    color: var(--form-gold);
    font-size: 1rem;
    margin-top: .1rem;
}

/* ---- Tappable card lists (the main menu-style rows on the Dashboard) ---- */

.portal-list {
    background: #fff;
    border-radius: .8rem;
    box-shadow: 0 1px 4px rgba(16, 36, 62, .08);
    overflow: hidden;
}

.portal-list-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem .95rem;
    border-bottom: 1px solid #f0f2f5;
    color: inherit;
}

.portal-list-item:last-child {
    border-bottom: none;
}

a.portal-list-link {
    text-decoration: none;
    color: inherit;
}

a.portal-list-link:hover,
a.portal-list-link:focus {
    background-color: #f8f9fb;
}

.portal-list-icon {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), 0 6px 14px -5px var(--icon-glow, rgba(16, 36, 62, .4));
}

.portal-list-icon.bg-gold { --icon-glow: rgba(214, 163, 62, .55); background: linear-gradient(135deg, #ffe4a6, #e0a83f); }
.portal-list-icon.bg-blue { --icon-glow: rgba(56, 140, 210, .55); background: linear-gradient(135deg, #9adcff, #3f8fdb); }
.portal-list-icon.bg-teal { --icon-glow: rgba(30, 175, 150, .55); background: linear-gradient(135deg, #82f0d8, #1fb098); }
.portal-list-icon.bg-navy { --icon-glow: rgba(56, 95, 145, .55); background: linear-gradient(135deg, #6690c2, #2c5586); }

.portal-list-text {
    flex: 1 1 auto;
    min-width: 0;
}

.portal-list-title {
    font-weight: 600;
    color: var(--form-navy);
    font-size: .92rem;
}

.portal-list-sub {
    font-size: .76rem;
    color: #8a93a1;
    margin-top: .1rem;
}

.portal-list-value {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--form-navy);
    font-size: .9rem;
    text-align: right;
    white-space: nowrap;
}

.portal-list-chevron {
    flex: 0 0 auto;
    color: #c2c8d1;
    font-size: 1rem;
}

/* ---- "Needs Your Attention" cards (2026-10-23 Portal Dashboard redesign) ----
   Same tappable-row shape as .portal-list-item, but each stands as its own rounded card with a
   colored left accent bar, so a handful of unrelated alerts (balance due, a task, a meeting)
   read as distinct items rather than one more row in a themed list. */

.portal-alerts-stack {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.portal-alert-card {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: #fff;
    border-radius: .8rem;
    padding: .75rem .9rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 4px rgba(16, 36, 62, .08);
    border-left: 4px solid #c2c8d1;
}

.portal-alert-card:hover,
.portal-alert-card:focus {
    background-color: #f8f9fb;
}

.portal-alert-warning { border-left-color: var(--form-gold); }
.portal-alert-info { border-left-color: var(--form-blue); }
.portal-alert-action { border-left-color: var(--form-navy); }

.portal-alert-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.portal-alert-warning .portal-alert-icon { background: linear-gradient(135deg, #ffe4a6, #e0a83f); }
.portal-alert-info .portal-alert-icon { background: linear-gradient(135deg, #9adcff, #3f8fdb); }
.portal-alert-action .portal-alert-icon { background: linear-gradient(135deg, #6690c2, #2c5586); }

.portal-alert-text {
    flex: 1 1 auto;
    min-width: 0;
}

.portal-alert-title {
    font-weight: 700;
    color: var(--form-navy);
    font-size: .88rem;
}

.portal-alert-sub {
    font-size: .74rem;
    color: #8a93a1;
    margin-top: .1rem;
}

/* Green variant of the existing amber .portal-banner, for the "all caught up" reassurance
   message shown instead of the alerts stack when there's nothing to flag. */
.portal-banner-success {
    background: #eaf7ef;
    border-color: #bfe6cc;
    color: #1d6b3a;
}

.portal-banner-success i {
    color: #2a9d5c;
}

/* ---- "Insights" chart cards (2026-10-23 Portal Dashboard redesign) ----
   Two-up grid on tablet/desktop width, one wide full-width card for the 12-month history chart;
   collapses to a single column on phones (see the media query at the bottom of this block). */

.portal-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.portal-chart-card {
    background: #fff;
    border-radius: .8rem;
    box-shadow: 0 1px 4px rgba(16, 36, 62, .08);
    padding: .9rem .9rem .7rem;
}

.portal-chart-card-wide {
    grid-column: 1 / -1;
}

.portal-chart-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--form-navy);
    margin-bottom: .5rem;
}

.portal-chart-title i {
    color: var(--form-gold);
}

.portal-chart-canvas-wrap {
    position: relative;
    height: 190px;
}

@media (max-width: 480px) {
    .portal-charts-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Simple page title for non-Dashboard portal pages ---- */

/* Turned from bare icon+text into a proper banner (2026-09-18) - it had no
   background of its own before, just plain text sitting on the page's gray
   backdrop. Now a soft card with a gold icon badge and left accent stripe,
   matching the icon-badge language used everywhere else in the app. Shared
   by every Portal sub-page (Details/Profile/Statement/Notifications/
   ChangePassword), so this one change gives all of them a consistent,
   "appropriate" header background at once. */
.portal-page-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: linear-gradient(120deg, #ffffff 0%, #eef3f9 100%);
    border-left: 4px solid var(--form-gold);
    border-radius: .8rem;
    padding: .65rem .9rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--form-navy);
    margin: 1rem 0 .9rem;
    box-shadow: 0 1px 4px rgba(16, 36, 62, .08);
}

.portal-page-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffe4a6, #e0a83f);
    color: #fff;
    font-size: .95rem;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), 0 4px 10px -4px rgba(214, 163, 62, .55);
}

/* ---- Notifications list (Portal/Notifications.aspx) ---- */

.portal-notify-item {
    background: #fff;
    border-radius: .6rem;
    padding: .75rem 1rem;
    margin-bottom: .55rem;
    box-shadow: 0 1px 4px rgba(16, 36, 62, .06);
    border-left: 3px solid transparent;
}

.portal-notify-item.unread {
    border-left-color: var(--form-gold);
    background: #fdfaf4;
}

.portal-notify-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}

.portal-notify-title {
    font-weight: 700;
    color: var(--form-navy);
    font-size: .92rem;
}

.portal-notify-date {
    font-size: .72rem;
    color: #8a97a6;
    white-space: nowrap;
}

.portal-notify-body {
    margin-top: .3rem;
    font-size: .82rem;
    color: #516275;
    white-space: pre-line;
}

/* ---- Bottom nav ---- */

.portal-bottom-nav {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 14px;
    max-width: 536px;
    margin: 0 auto;
    display: flex;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 1.4rem;
    box-shadow: 0 14px 34px -10px rgba(16, 36, 62, .32), 0 0 0 1px rgba(255, 255, 255, .6);
    z-index: 1030;
    padding: .4rem .35rem calc(.4rem + env(safe-area-inset-bottom, 0));
}

.portal-nav-link {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    padding: .5rem .1rem;
    margin: 0 .1rem;
    color: #a3aebb;
    text-decoration: none;
    font-size: .58rem;
    font-weight: 700;
    border: none;
    background: transparent;
    border-radius: 1rem;
}

.portal-nav-link i {
    font-size: 1.3rem;
}

.portal-nav-link:hover,
.portal-nav-link:focus {
    color: var(--form-blue-deep);
}

.portal-nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, var(--form-gold-light) 0%, var(--form-gold) 55%, var(--form-gold-deep) 100%);
    box-shadow: 0 6px 14px -4px rgba(200, 160, 77, .6);
}

.portal-nav-link.active i {
    color: #fff;
}

.portal-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(16, 36, 62, .18);
}

/* Printable Summary Statement (Portal/Statement.aspx) */
.statement-sheet {
    background: #fff;
    border: 1px solid #e2e6ec;
    border-radius: 10px;
    padding: 24px;
    max-width: 720px;
    margin: 0 auto;
}

.statement-header {
    text-align: center;
    border-bottom: 2px solid var(--form-navy);
    padding-bottom: 14px;
    margin-bottom: 16px;
}

.statement-logo {
    max-height: 48px;
    margin-bottom: 8px;
}

.statement-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--form-navy);
}

.statement-date {
    font-size: .8rem;
    color: #6c7684;
}

.statement-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 18px;
}

.statement-meta > div {
    display: flex;
    flex-direction: column;
    font-size: .8rem;
    color: #6c7684;
}

.statement-meta strong {
    color: #1c2733;
    font-size: .95rem;
}

.statement-subheading {
    font-weight: 700;
    color: var(--form-navy);
    margin: 20px 0 8px;
    font-size: .95rem;
}

.statement-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    margin-bottom: 4px;
}

.statement-table th,
.statement-table td {
    border-bottom: 1px solid #eceff3;
    padding: 7px 6px;
}

.statement-table th {
    color: #6c7684;
    font-weight: 600;
    text-align: left;
}

.statement-footnote {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px dashed #d7dce3;
    font-size: .72rem;
    color: #8992a0;
    line-height: 1.5;
}

/* Browser's own "Headers and footers" (URL, page title, date/time, page number) that
   Chrome/Edge print into the page margin on Print/Save-as-PDF - added 2026-10-22. There's
   no CSS way to switch that browser setting off from the page, but giving the page zero
   margin via @page leaves Chrome nowhere to draw that text, so it's effectively suppressed
   even if "Headers and footers" is left checked in the print dialog. The print rules below
   add the page's own padding back via body/.main-wrap so content doesn't start flush
   against the paper edge now that the browser-supplied margin is gone. For belt-and-braces,
   also tell users to untick "Headers and footers" under "More settings" in the print dialog -
   some browsers still reserve a sliver of space for it regardless of @page margin. */
@page {
    size: auto;
    margin: 0;
}

@media print {
    .no-print,
    .portal-topbar,
    .portal-bottom-nav {
        display: none !important;
    }

    body {
        padding: 12mm 10mm !important;
        background: #fff !important;
    }

    /* Admin/accountant shell (Site.Master: .sidebar + .topbar inside .app-shell) was
       never hidden on print before this (2026-10-22) - only the separate portal chrome
       above was. That left the left nav and the date/notifications/logout bar sitting
       above the actual page content on every printed/PDF-saved admin page, which is
       what "hide the upper portion above the header of the document" was reporting on
       the MOM letterhead page. Hiding them here and letting .main-wrap take the full
       page width fixes it everywhere, not just on that one page. */
    .sidebar,
    .sidebar-backdrop,
    .topbar,
    footer {
        display: none !important;
    }

    /* The real cause of "only page 1 / content cut off" on every printed or
       Save-as-PDF admin page (2026-10-22): .app-shell and .main-wrap are both
       "height: 100vh" with their own internal scrollbar (overflow:hidden /
       overflow-y:auto) for the on-screen scrolling layout - great on screen, but
       it means the browser's print engine only ever sees one viewport-tall
       "window" of content, never the full page, so anything below the fold
       on screen was simply missing from the printout/PDF. Forcing height:auto
       and overflow:visible here lets the real content height show through so
       print can paginate it properly across as many pages as it needs. */
    .app-shell,
    .main-wrap {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .main-wrap > main {
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .statement-sheet {
        border: none;
        padding: 0;
        max-width: none;
    }
}

/* ============================================================
   EXE Dashboard (Default.aspx) - the markup for this page uses
   .exe-dashboard/.kpi-*/.section-label/.chart-card*/.btn-quick-action*
   /.btn-my-dashboard* classes that had never been styled, so the page
   was rendering as plain unstyled links/divs (browser default anchor
   styling, no grid, no card look). This block styles all of them,
   matching the gradient icon-badge language already used on the
   Portal Dashboard (.portal-list-icon), then (2026-09-18) layers on a
   richer "stunning" pass: a gradient section heading, a colored top
   accent bar + lift-and-glow hover on every KPI tile, icon-led chart
   card headers, and a navy-gradient header + varied icon colors on the
   Quick Actions panel.
   ============================================================ */

.exe-dashboard {
    position: relative;
}

/* Faint decorative wash behind the whole dashboard - purely cosmetic,
   sits below every card (all cards are opaque #fff so it only shows
   through the gaps/background). */
.exe-dashboard::before {
    content: "";
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    height: 260px;
    background-image: radial-gradient(circle at 8% 0%, rgba(70, 150, 210, .10), transparent 55%),
                       radial-gradient(circle at 96% 10%, rgba(200, 160, 77, .12), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.exe-dashboard > * {
    position: relative;
    z-index: 1;
}

.exe-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.exe-dashboard .section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .88rem;
    margin-bottom: 0;
    padding-bottom: 7px;
    position: relative;
    background: linear-gradient(120deg, var(--form-navy-deep), var(--form-blue-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.exe-dashboard .section-label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--form-gold-deep), var(--form-gold-light));
}

.exe-dashboard .section-label i {
    color: var(--form-gold);
    font-size: 1rem;
}

/* Unscoped (2026-09-18) - this button is reused on Portal/Dashboard.aspx
   too (the "Back to EXE Dashboard" link there, shown to admins viewing
   their own member dashboard), which isn't inside .exe-dashboard, so the
   old .exe-dashboard-scoped rule never matched there and the link had no
   styling at all on that page. */
.btn-my-dashboard {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ffffff, #eef3f9);
    border: 1px solid #e0e6ee;
    border-radius: .6rem;
    padding: .45rem .9rem;
    font-weight: 600;
    font-size: .85rem;
    color: var(--form-navy);
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(16, 36, 62, .08);
    transition: box-shadow .15s ease, transform .15s ease;
}

.btn-my-dashboard:hover {
    color: var(--form-navy);
    box-shadow: 0 4px 10px rgba(16, 36, 62, .14);
    transform: translateY(-1px);
}

.btn-my-dashboard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ffe4a6, #e0a83f);
    color: #fff;
    font-size: .8rem;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    gap: 12px;
}

/* 10 tiles at 5-per-row gets cramped below ~840px - step down to fewer
   columns instead of squeezing, then to an auto-fill flow on phones. */
@media (max-width: 840px) {
    .kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 560px) {
    .kpi-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }
}

.kpi-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
    height: 100%;
    background: linear-gradient(165deg, #ffffff 0%, #fbfcfe 100%);
    border-radius: .9rem;
    padding: 13px 12px 11px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 4px rgba(16, 36, 62, .08);
    transition: transform .18s ease, box-shadow .18s ease;
}

.kpi-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cat-accent, var(--form-gold));
    opacity: 0;
    transition: opacity .18s ease;
}

.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 26px -12px rgba(16, 36, 62, .26);
    color: inherit;
}

.kpi-card:hover::before {
    opacity: 1;
}

.kpi-card:hover .kpi-card-icon {
    transform: scale(1.08);
}

.kpi-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.02rem;
    color: #fff;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), 0 5px 11px -5px var(--icon-glow, rgba(16, 36, 62, .4));
    text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    transition: transform .18s ease;
}

.kpi-card-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--form-navy);
    line-height: 1.1;
}

.kpi-card-label {
    font-size: .7rem;
    color: #5c7089;
    font-weight: 500;
    line-height: 1.25;
}

.kpi-card.cat-blue { --cat-accent: linear-gradient(90deg, #3f8fdb, #9adcff); }
.kpi-card.cat-gold { --cat-accent: linear-gradient(90deg, #e0a83f, #ffe4a6); }
.kpi-card.cat-teal { --cat-accent: linear-gradient(90deg, #1fb098, #82f0d8); }
.kpi-card.cat-indigo { --cat-accent: linear-gradient(90deg, #5d5fc7, #b8b8ff); }

.kpi-card.cat-blue .kpi-card-icon { --icon-glow: rgba(56, 140, 210, .55); background: linear-gradient(135deg, #9adcff, #3f8fdb); }
.kpi-card.cat-gold .kpi-card-icon { --icon-glow: rgba(214, 163, 62, .55); background: linear-gradient(135deg, #ffe4a6, #e0a83f); }
.kpi-card.cat-teal .kpi-card-icon { --icon-glow: rgba(30, 175, 150, .55); background: linear-gradient(135deg, #82f0d8, #1fb098); }
.kpi-card.cat-indigo .kpi-card-icon { --icon-glow: rgba(90, 100, 190, .55); background: linear-gradient(135deg, #b8b8ff, #5d5fc7); }

.chart-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: .9rem;
    padding: 14px 14px 12px;
    height: 100%;
    box-shadow: 0 1px 4px rgba(16, 36, 62, .08);
    transition: box-shadow .18s ease;
}

.chart-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--form-navy), var(--form-blue-deep), var(--form-gold));
}

.chart-card:hover {
    box-shadow: 0 10px 22px -12px rgba(16, 36, 62, .28);
}

.chart-card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-weight: 700;
    color: var(--form-navy);
    font-size: .84rem;
    margin-bottom: 8px;
    text-align: center;
}

.chart-card-title i {
    color: var(--form-gold);
    font-size: .92rem;
}

.chart-canvas-wrap {
    position: relative;
    height: 190px;
}

/* Shareholders by District - real OpenStreetMap map via Leaflet (vendored locally, see
   Default.aspx) with circle markers sized/colored by count, + district breakdown table. */
.kerala-leaflet-map {
    height: 360px;
    border-radius: .7rem;
    overflow: hidden;
    margin: 4px 0 2px;
    background: var(--form-bg);
}

.kerala-leaflet-map .leaflet-popup-content-wrapper {
    border-radius: .6rem;
}

.kerala-leaflet-map .leaflet-popup-content {
    font-size: .82rem;
    color: var(--form-navy-deep);
}

.kerala-leaflet-map .leaflet-tooltip {
    font-size: .78rem;
    color: var(--form-navy-deep);
    border-color: var(--form-gold);
}

/* Permanent "District: count" label shown on every marker by default (not just on hover). */
.kerala-leaflet-map .kerala-marker-label {
    font-weight: 700;
    font-size: .72rem;
    color: var(--form-navy-deep);
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--form-gold);
    border-radius: .4rem;
    padding: 1px 6px;
    box-shadow: 0 1px 3px rgba(16, 36, 62, .18);
    white-space: nowrap;
}

.kerala-leaflet-map .kerala-marker-label::before {
    border-top-color: var(--form-gold);
}

.kerala-map-note {
    text-align: center;
    font-size: .68rem;
    color: #93a2b6;
    margin-top: 4px;
    font-style: italic;
}

.kerala-table-wrap {
    max-height: 300px;
    overflow-y: auto;
}

.kerala-district-table {
    margin-bottom: 0;
    font-size: .82rem;
}

.kerala-district-table thead th {
    position: sticky;
    top: 0;
    background: #fff;
    color: #5c7089;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    border-bottom: 2px solid var(--form-bg);
    z-index: 1;
}

.kerala-district-row {
    cursor: pointer;
    transition: background .15s ease;
}

.kerala-district-row:hover,
.kerala-district-row.active {
    background: var(--form-bg);
}

.kerala-district-row.active td:first-child {
    color: var(--form-navy-deep);
    font-weight: 700;
}

.kerala-district-table td:nth-child(3) {
    width: 110px;
}

.kerala-list-bar-wrap {
    height: 7px;
    border-radius: 4px;
    background: #eef1f6;
    overflow: hidden;
}

.kerala-list-bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--form-blue) 0%, var(--form-navy) 100%);
}

.quick-actions-card {
    /* The base .card rule elsewhere in the app uses a smaller .6rem radius
       (report/list pages) - bumped to match the 1.1rem used on the KPI and
       chart cards above it on this page, so the whole dashboard reads as
       one consistent card language instead of two different corner styles. */
    border-radius: 1.1rem;
    overflow: hidden;
}

.quick-actions-card .card-header {
    background: linear-gradient(120deg, var(--form-navy-deep) 0%, var(--form-navy) 60%, var(--form-blue-deep) 130%);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .02em;
    border-bottom: none;
    padding: .55rem .9rem;
}

.quick-actions-card .card-body {
    padding: .85rem .9rem;
}

.quick-actions-card .card-header i {
    color: var(--form-gold-light);
}

.btn-quick-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--form-bg);
    border: 1px solid #e5e9f0;
    border-radius: .6rem;
    padding: .38rem .75rem .38rem .38rem;
    font-weight: 600;
    font-size: .8rem;
    color: var(--form-navy);
    text-decoration: none;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn-quick-action:hover {
    background: #fff;
    color: var(--form-navy);
    box-shadow: 0 8px 18px -8px rgba(16, 36, 62, .25);
    transform: translateY(-2px);
}

.btn-quick-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    background: var(--form-navy);
    color: #fff;
    font-size: .75rem;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 4px 10px -4px rgba(16, 36, 62, .5);
}

.btn-quick-action.cat-gold .btn-quick-action-icon { background: linear-gradient(135deg, #ffe4a6, #e0a83f); }
.btn-quick-action.cat-blue .btn-quick-action-icon { background: linear-gradient(135deg, #9adcff, #3f8fdb); }
.btn-quick-action.cat-teal .btn-quick-action-icon { background: linear-gradient(135deg, #82f0d8, #1fb098); }
.btn-quick-action.cat-indigo .btn-quick-action-icon { background: linear-gradient(135deg, #b8b8ff, #5d5fc7); }
.btn-quick-action.cat-navy .btn-quick-action-icon { background: linear-gradient(135deg, var(--form-navy), var(--form-navy-deep)); }

/* =========================================================================
   LIST-PAGE TOOLBAR: status tabs, quick-search panel, filter chip, sortable
   sticky grid header, custom pager - ported (as reusable components, in
   FORM's own navy/gold palette rather than the source page's blue one) from
   Outage1's Users.aspx onto Reports/ShareholdersListReport.aspx. Generic
   enough to reuse on any other list/report page that wants the same
   Active/Inactive toggle, quick-search, sortable columns or pager.
   ========================================================================= */

.list-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
}

.list-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* ---------- Active / Inactive status tabs ---------- */

.status-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: var(--form-bg);
    border: 1px solid #e5e9f0;
    border-radius: 999px;
}

.status-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px 5px 14px;
    color: var(--form-navy) !important;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.status-tab:hover {
    background: #fff;
}

.status-tab .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #94a3b8;
}

.status-tab.active-tab .dot {
    background: #1e7e34;
}

.status-tab .count {
    min-width: 28px;
    padding: 2px 9px;
    color: var(--form-navy);
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    text-align: center;
}

.status-tab.selected {
    color: #fff !important;
    background: var(--form-navy);
    box-shadow: 0 2px 6px rgba(16, 36, 62, .3);
}

.status-tab.selected .dot {
    box-shadow: 0 0 0 2px #fff;
}

.status-tab.selected .count {
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .35);
}

/* ---------- quick-search icon button + dropdown panel ---------- */

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--form-navy) !important;
    background: var(--form-bg);
    border: 1px solid #e5e9f0;
    border-radius: .5rem;
    font-size: 1.05rem;
    text-decoration: none !important;
    cursor: pointer;
}

.icon-btn:hover,
.icon-btn.show {
    color: #fff !important;
    background: var(--form-navy);
    border-color: var(--form-navy);
}

.quick-search-panel {
    width: 300px;
    padding: 14px !important;
    border: 1px solid #e5e9f0 !important;
    border-radius: .6rem !important;
    box-shadow: 0 10px 26px rgba(16, 36, 62, .18) !important;
}

.quick-search-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px;
    color: var(--form-navy);
    font-size: .92rem;
    font-weight: 700;
}

.quick-search-panel .form-select,
.quick-search-panel .form-control {
    margin-bottom: 10px;
}

.quick-search-panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quick-search-panel-actions .btn-search {
    flex: 1;
}

.btn-link-plain {
    padding: 6px 10px;
    color: #5c7089 !important;
    font-weight: 600;
    font-size: .82rem;
    text-decoration: none !important;
}

.btn-link-plain:hover {
    color: var(--form-navy) !important;
}

/* ---------- active quick-search chip ---------- */

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 12px;
    color: var(--form-navy);
    background: #eaf1fb;
    border: 1px solid #cfe0f5;
    border-radius: 16px;
    font-size: .78rem;
}

.filter-chip a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    color: var(--form-navy) !important;
    border-radius: 50%;
    text-decoration: none !important;
}

.filter-chip a:hover {
    background: #fff;
}

/* ---------- sortable sticky-header grid ---------- */

.sortable-grid-wrap {
    max-height: 65vh;
    overflow: auto;
}

/* NOTE (2026-10-02): position:sticky below was pulled out once before, after
   it visually appeared not to work on Reports/ShareholdersListReport.aspx and
   a JS clone-and-overlay script was written instead. The real cause (found by
   inspecting the live DOM) was that GridView never emitted a <thead> at all -
   every row, header included, rendered as a loose <tr> the browser auto-
   wrapped into one shared <tbody>, so this selector (which requires a real
   <thead>) was matching nothing; it was never a browser/engine limitation.
   The fix is GridViewRow.TableSection, set per row in each grid's RowCreated
   handler (see e.g. Reports/ShareholdersListReport.aspx.vb's
   gvShareholders_RowCreated) - once that's done for a grid, plain CSS sticky
   below works on its own. The JS overlay has been removed from Site.Master;
   don't reintroduce it, it fights with this rule and causes a visible
   flicker. A grid whose header still won't freeze is missing the
   TableSection fix in its own code-behind, not missing this JS. */

table.form-grid.sortable-grid thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}

table.form-grid.sortable-grid thead th a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff !important;
    text-decoration: none !important;
}

.sort-icon {
    font-size: .78rem;
}

.sort-icon.idle {
    opacity: .6;
}

/* ---------- custom pager ---------- */

.report-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 2px 2px;
}

.pager-info {
    color: #5c7089;
    font-size: .78rem;
}

.pager-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    color: var(--form-navy) !important;
    border-radius: 16px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none !important;
}

.page-btn:hover {
    background: var(--form-bg);
}

.page-btn.nav {
    color: #5c7089 !important;
    background: var(--form-bg);
}

.page-btn.current {
    color: #fff !important;
    background: var(--form-navy);
}

.page-btn.disabled {
    opacity: .45;
    pointer-events: none;
}

.page-ellipsis {
    padding: 0 4px;
    color: #5c7089;
}

.page-size {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5c7089;
    font-size: .78rem;
}

.page-size .form-select {
    width: 78px;
    min-height: 32px;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* ---------- plain inline stats row above a report grid (count/amount/status) ----------
   Promoted from Reports/ShareholdersListReport.aspx's page-scoped .sh-report-se-theme
   copy (2026-10-03) so every report page can use the same classes without redefining
   them - see that page for the original. */

.inline-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 600;
    color: #003f6b;
    white-space: nowrap;
}

.inline-stat i {
    color: #005b96;
}

.inline-stat strong {
    color: #005b96;
    font-weight: 700;
}

/* Icon-only export buttons - the universally-recognized Excel green / PDF red so the
   two are instantly distinguishable at a glance. ToolTip/title on the control itself
   supplies the accessible name/hover text (no visible label). */
.btn-export-excel {
    border-color: #bfe3cd;
    color: #1d6f42;
}

.btn-export-excel:hover,
.btn-export-excel:focus {
    background-color: #1d6f42;
    border-color: #1d6f42;
    color: #fff;
}

.btn-export-pdf {
    border-color: #f0c4bd;
    color: #c0392b;
}

.btn-export-pdf:hover,
.btn-export-pdf:focus {
    background-color: #c0392b;
    border-color: #c0392b;
    color: #fff;
}

.btn-icon-only {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-only i {
    font-size: 1.05rem;
    vertical-align: 0;
}

/* ---------- freeze the leading (identifying) column while scrolling a report
   grid horizontally - pairs with the vertical sticky-header rule above. Add
   class "freeze-first-col" to a .sortable-grid table's CssClass to pin its
   first column; needs an explicit solid background since position:sticky
   doesn't clip what scrolls underneath otherwise. The header cell gets a
   higher z-index than the body cells so the top-left corner cell stays above
   both the sticky header row AND the sticky column as they cross. */
.sortable-grid-wrap table.sortable-grid.freeze-first-col > thead > tr > th:first-child,
.sortable-grid-wrap table.sortable-grid.freeze-first-col > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
}

.sortable-grid-wrap table.sortable-grid.freeze-first-col > tbody > tr > td:first-child {
    z-index: 2;
    background: #fff;
}

.sortable-grid-wrap table.sortable-grid.freeze-first-col > tbody > tr:nth-child(even) > td:first-child {
    background: #f6fafe;
}

.sortable-grid-wrap table.sortable-grid.freeze-first-col > tbody > tr:hover > td:first-child {
    background: #eaf4fc;
}

.sortable-grid-wrap table.sortable-grid.freeze-first-col > thead > tr > th:first-child {
    z-index: 6;
}

/* UPDATE (2026-10-20): same idea as freeze-first-col above, but for a grid whose first column is
   a narrow, plain SNO row-number (added to Investments/Reports.aspx's gvByInvestor the same day)
   ahead of its identifying column - freezing SNO alone would be useless while scrolling without
   also knowing which investor it belongs to, so this pins BOTH: col 1 (SNO) at left:0, and col 2
   (the investor name) offset by col 1's own width (matches the SNO TemplateField's
   ItemStyle-Width="45" - keep these in sync if that width ever changes). Use "freeze-first-2-cols"
   in place of "freeze-first-col" on a grid shaped that way (row-number column, then identifier). */
.sortable-grid-wrap table.sortable-grid.freeze-first-2-cols > thead > tr > th:nth-child(1),
.sortable-grid-wrap table.sortable-grid.freeze-first-2-cols > tbody > tr > td:nth-child(1),
.sortable-grid-wrap table.sortable-grid.freeze-first-2-cols > thead > tr > th:nth-child(2),
.sortable-grid-wrap table.sortable-grid.freeze-first-2-cols > tbody > tr > td:nth-child(2) {
    position: sticky;
}

.sortable-grid-wrap table.sortable-grid.freeze-first-2-cols > thead > tr > th:nth-child(1),
.sortable-grid-wrap table.sortable-grid.freeze-first-2-cols > tbody > tr > td:nth-child(1) {
    left: 0;
}

.sortable-grid-wrap table.sortable-grid.freeze-first-2-cols > thead > tr > th:nth-child(2),
.sortable-grid-wrap table.sortable-grid.freeze-first-2-cols > tbody > tr > td:nth-child(2) {
    left: 45px;
}

.sortable-grid-wrap table.sortable-grid.freeze-first-2-cols > tbody > tr > td:nth-child(1),
.sortable-grid-wrap table.sortable-grid.freeze-first-2-cols > tbody > tr > td:nth-child(2) {
    z-index: 2;
    background: #fff;
}

.sortable-grid-wrap table.sortable-grid.freeze-first-2-cols > tbody > tr:nth-child(even) > td:nth-child(1),
.sortable-grid-wrap table.sortable-grid.freeze-first-2-cols > tbody > tr:nth-child(even) > td:nth-child(2) {
    background: #f6fafe;
}

.sortable-grid-wrap table.sortable-grid.freeze-first-2-cols > tbody > tr:hover > td:nth-child(1),
.sortable-grid-wrap table.sortable-grid.freeze-first-2-cols > tbody > tr:hover > td:nth-child(2) {
    background: #eaf4fc;
}

.sortable-grid-wrap table.sortable-grid.freeze-first-2-cols > thead > tr > th:nth-child(1),
.sortable-grid-wrap table.sortable-grid.freeze-first-2-cols > thead > tr > th:nth-child(2) {
    z-index: 6;
}

@media (max-width: 768px) {
    .list-toolbar-actions {
        margin-left: 0;
    }
}