:root {
    --axys-navy-deep: #050b1f;
    --axys-navy: #0a1638;
    --axys-navy-light: #16234f;
    --axys-blue: #3b6bd6;
    --axys-blue-light: #6f9bf0;
    --axys-text: #eaf0ff;
    --axys-text-muted: #9db0d8;
    --axys-border: rgba(111, 155, 240, 0.35);
    /* Section accent colors (per user instruction 2026-08-14/2026-08-18; iterated
       several times - v1's small dot and v2's pale/mid-blue pair were "not
       distinguishable"; v3's amber/orange for Operations & Analysis was judged "too
       different" from the app's blue theme; v4's #2a78d6/#0d366b pair was then asked to
       go paler/darker still). v5 (current): Statements is a pale sky blue, Operations &
       Analysis a very deep near-black navy - CVD separation ΔE ~45, far above the 15
       floor. The pale fill can't carry white text at 3:1 (measures ~2.5:1), so
       Statements uses dark navy text instead (see --axys-section-statements-text below)
       while Operations & Analysis keeps white text, both individually verified >=3:1. */
    --axys-section-statements: #6da7ec;
    --axys-section-statements-text: #0a1638;
    --axys-section-operations-deep: #0a2547;
    /* Nav regrouped into 3 sections (per user instruction 2026-10-01): "Analysis &
       Statements", "Operations", "Board Pack" - headings/pills rendered in orange per
       that instruction, one shade per section so they stay distinguishable from each
       other, not just from the old blue/navy pair. */
    --axys-section-orange: #e08a2b;
    --axys-section-orange-text: #2a1600;
    --axys-section-board-pack: #c1620f;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(circle at 85% 0%, rgba(59, 107, 214, 0.18), transparent 45%),
        linear-gradient(180deg, var(--axys-navy-deep) 0%, var(--axys-navy) 100%);
    color: var(--axys-text);
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ---------- Navbar ---------- */
.axys-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 32px;
    background: rgba(5, 11, 31, 0.85);
    border-bottom: 1px solid var(--axys-border);
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
    z-index: 100;
}

.axys-navbar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 1.1rem;
}

.axys-navbar__brand img {
    height: 28px;
    width: auto;
}

.axys-navbar__links {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.axys-navbar__links a {
    font-size: 0.9rem;
    color: var(--axys-text-muted);
    padding: 6px 4px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.axys-navbar__links a:hover {
    color: var(--axys-text);
}

.axys-navbar__links a.active {
    color: var(--axys-blue-light);
    border-bottom-color: var(--axys-blue-light);
}

.axys-navbar__link-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Navbar dropdown groups (per user instruction 2026-08-12): "Statements" and
   "Operations & Analysis", opened via [data-navbar-dropdown-toggle] click (script in
   base.html). Kept visually consistent with the plain .axys-navbar__links a style
   above - the toggle button reuses the same look, the dropdown menu is just an
   absolutely-positioned panel of the same link style. */
.axys-navbar__dropdown {
    position: relative;
}

.axys-navbar__dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.9rem;
    color: var(--axys-text-muted);
    padding: 6px 4px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.axys-navbar__dropdown-toggle:hover {
    color: var(--axys-text);
}

.axys-navbar__dropdown-toggle.active {
    color: var(--axys-blue-light);
    border-bottom-color: var(--axys-blue-light);
}

/* Per-section pill (per user instruction 2026-08-14, redone as a solid always-visible
   chip after the first small-dot version wasn't distinguishable enough): a filled
   rounded background behind the section label, one solid color per group, visible
   whether the group is active/hovered/idle - not conditional on state the way the
   previous dot-plus-active-text-color approach was. The two fills are a pale sky blue
   (Statements) vs a very deep near-black navy (Operations & Analysis) - deliberately a
   much bigger, higher-contrast area than an 8px dot, since the goal is "obviously two
   different colors at a glance," not a subtle accent. Text color differs per fill
   (dark navy on the pale Statements fill, white on the deep Operations fill) since a
   single text color can't clear 3:1 on both a very pale and a very dark background. */
.axys-nav-section-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
}

[data-nav-section="statements"] .axys-nav-section-pill {
    background: var(--axys-section-orange);
    color: var(--axys-section-orange-text);
}

[data-nav-section="operations"] .axys-nav-section-pill {
    background: var(--axys-section-operations-deep);
    color: #ffffff;
}

[data-nav-section="board-pack"] .axys-nav-section-pill {
    background: var(--axys-section-board-pack);
    color: #ffffff;
}

.axys-navbar__dropdown-toggle .axys-navbar__dropdown-chevron {
    color: var(--axys-text-muted);
}

.axys-navbar__dropdown-menu[data-nav-section="statements"] {
    border-top: 3px solid var(--axys-section-orange);
}

.axys-navbar__dropdown-menu[data-nav-section="operations"] {
    border-top: 3px solid var(--axys-section-operations-deep);
}

.axys-navbar__dropdown-menu[data-nav-section="board-pack"] {
    border-top: 3px solid var(--axys-section-board-pack);
}

.axys-navbar__dropdown-chevron {
    font-size: 10px;
    transition: transform 0.15s ease;
}

.axys-navbar__dropdown--open .axys-navbar__dropdown-chevron {
    transform: rotate(180deg);
}

.axys-navbar__dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 200px;
    background: var(--axys-navy);
    border: 1px solid var(--axys-border);
    border-radius: 8px;
    padding: 8px;
    flex-direction: column;
    gap: 2px;
    z-index: 110;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.axys-navbar__dropdown--open .axys-navbar__dropdown-menu {
    display: flex;
}

.axys-navbar__dropdown-menu a {
    font-size: 0.88rem;
    color: var(--axys-text-muted);
    padding: 8px 10px;
    border-radius: 6px;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.axys-navbar__dropdown-menu a:hover {
    color: var(--axys-text);
    background: rgba(111, 155, 240, 0.12);
}

.axys-navbar__dropdown-menu a.active {
    color: var(--axys-blue-light);
    background: rgba(111, 155, 240, 0.18);
}

/* ---------- Main content ---------- */
.axys-main {
    flex: 1;
    padding: 48px 32px 64px;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

/* ---------- Footer ---------- */
.axys-footer {
    text-align: center;
    padding: 16px 24px;
    color: var(--axys-text-muted);
    font-size: 12px;
    font-weight: 600;
    border-top: 1px solid var(--axys-border);
    background: rgba(5, 11, 31, 0.85);
}

/* ---------- Homepage hero ---------- */
.axys-hero {
    text-align: center;
    padding: 40px 0 20px;
}

.axys-hero__logo {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.axys-hero__logo svg,
.axys-hero__logo img {
    height: 90px;
    width: auto;
}

.axys-hero__subtitle {
    color: var(--axys-blue-light);
    letter-spacing: 6px;
    font-size: 1rem;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.axys-hero__divider {
    height: 1px;
    max-width: 640px;
    margin: 0 auto 32px;
    background: linear-gradient(90deg, transparent, var(--axys-blue-light), transparent);
    box-shadow: 0 0 12px 1px var(--axys-blue-light);
}

.axys-hero__welcome {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.axys-hero__lead {
    color: var(--axys-text-muted);
    margin-bottom: 40px;
}

/* ---------- Module cards ---------- */
.axys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 22px;
}

.axys-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--axys-border);
    border-radius: 10px;
    padding: 28px 16px 20px;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.axys-card:hover {
    transform: translateY(-4px);
    border-color: var(--axys-blue-light);
    box-shadow: 0 10px 30px rgba(59, 107, 214, 0.25);
}

.axys-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--axys-blue-light), var(--axys-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.axys-card__title {
    font-weight: 600;
    font-size: 1rem;
}

.axys-card__arrow {
    color: var(--axys-blue-light);
    font-size: 1.1rem;
}

/* ---------- Generic page placeholder ---------- */
.axys-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}

.axys-page-header h1 {
    margin: 0;
    font-size: 1.6rem;
}

.axys-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.axys-filters select {
    background: var(--axys-navy-light);
    color: var(--axys-text);
    border: 1px solid var(--axys-border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
}

.axys-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin-bottom: 32px;
}

.axys-kpi {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--axys-border);
    border-radius: 10px;
    padding: 18px 20px;
}

.axys-kpi__label {
    color: var(--axys-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.axys-kpi__value {
    font-size: 1.5rem;
    font-weight: 700;
}

.axys-placeholder {
    border: 1px dashed var(--axys-border);
    border-radius: 10px;
    padding: 60px 20px;
    text-align: center;
    color: var(--axys-text-muted);
}

/* Shared sidebar navigation (per user instruction 2026-08-12), included via
   templates/_sidebar_nav.html on every report page - replaces 7 previously
   copy-pasted, per-page-prefixed <nav class="XX-menu"> blocks (income_statement.html's
   .is-menu, balance_sheet.html's .bs-menu, etc.) with one canonical, page-agnostic
   class set. Colors match what those per-page rules already used (#0b0f75 sidebar,
   #174f86 link background, #1d3ecf active accent), so switching over is purely
   structural - no visual change to the link styling itself, only the new
   collapsible-group behavior on top. */
.dash-nav {
    padding: 16px 0 0;
}

.dash-nav-group {
    margin-bottom: 4px;
}

.dash-nav-group__toggle {
    /* Fixed-height toggle, deliberately allowing "Operations &<br>Analysis" to break
       onto two lines via an explicit <br> in the markup (per user instruction
       2026-08-12 - an ellipsis truncation was tried first but hid "Analysis" entirely,
       which was worse). min-height is tall enough for two lines so both buttons render
       at the same height and stay aligned regardless of label length. */
    display: flex;
    align-items: center;
    gap: 6px;
    width: calc(100% - 10px);
    min-height: 48px;
    margin: 0 0 6px 10px;
    padding: 10px 8px 10px 10px;
    background: none;
    border: none;
    border-left: 5px solid transparent;
    color: #9db0d8;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

/* Bold left-border accent per section (per user instruction 2026-08-14, same colors
   and same "not distinguishable" fix as the navbar pill above) - a thick 5px colored
   bar reusing the sidebar's existing accent-bar visual language (see .cp-panel__bar/
   .fr-panel__bar on the report pages), rather than a full pill background, since the
   sidebar's fixed 170px width and two-line "Operations & Analysis" label don't have
   room for a comfortable pill without crowding the text. */
.dash-nav-group[data-nav-section="statements"] .dash-nav-group__toggle {
    border-left-color: var(--axys-section-orange);
}

.dash-nav-group[data-nav-section="operations"] .dash-nav-group__toggle {
    border-left-color: var(--axys-section-operations-deep);
}

.dash-nav-group[data-nav-section="board-pack"] .dash-nav-group__toggle {
    border-left-color: var(--axys-section-board-pack);
}

.dash-nav-group__toggle span.dash-nav-group__label {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.dash-nav-group__chevron {
    display: inline-block;
    flex-shrink: 0;
    align-self: center;
    transition: transform 0.15s ease;
    font-size: 10px;
}

.dash-nav-group--open .dash-nav-group__chevron {
    transform: rotate(90deg);
}

.dash-nav-group__items {
    display: none;
}

.dash-nav-group--open .dash-nav-group__items {
    display: block;
}

.dash-nav-group__items a {
    display: block;
    margin: 0 0 6px 10px;
    padding: 14px 8px;
    background: #174f86;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    border-left: 4px solid transparent;
    white-space: nowrap;
    text-decoration: none;
}

/* Per-section item background (per user instruction 2026-08-18): the two groups' link
   lists previously shared one flat background (#174f86) regardless of section, so
   "Cockpit/Financial Ratios/Income Statement/Balance Sheet" and "Bank Reconciliation/
   Variance Analysis/IS Forecast/Analysis Report/Month-End Close" looked identical once
   expanded - only the group toggle button above them carried any color distinction.
   Reuses the same two validated blue shades as the toggle buttons
   (--axys-section-statements, --axys-section-operations-deep) so the expanded list
   visually continues the same color meaning, not a third, unrelated pair. */
.dash-nav-group[data-nav-section="statements"] .dash-nav-group__items a {
    background: var(--axys-section-orange);
    color: var(--axys-section-orange-text);
}

.dash-nav-group[data-nav-section="operations"] .dash-nav-group__items a {
    background: var(--axys-section-operations-deep);
}

.dash-nav-group[data-nav-section="board-pack"] .dash-nav-group__items a {
    background: var(--axys-section-board-pack);
}

.dash-nav-group__items a.active {
    background: #ffffff;
    color: #1d3ecf;
    border-left-color: #1d3ecf;
}

/* AI Insights section (added 2026-10-28, from the MOM): a fourth section colour in the
   same orange family, distinguishable from the existing three (#e08a2b, #c1620f,
   #f0a84a). Selectors are deliberately more specific than the rail rules that
   cockpit.html repeats inline, so the caption colour is the same on every page without
   editing that page. Contrast: #d9a21b on the #0b0f75 rail ~7.5:1; #2a1600 text on the
   #d9a21b pill ~5.9:1. */
:root {
    --axys-section-insights: #d9a21b;
}

[data-nav-section="insights"] .axys-nav-section-pill {
    background: var(--axys-section-insights);
    color: var(--axys-section-orange-text);
}

.axys-navbar__dropdown-menu[data-nav-section="insights"] {
    border-top: 3px solid var(--axys-section-insights);
}

.cp-rail-nav .cp-rail-divider.cp-rail-divider--insights .cp-rail-divider__label {
    color: var(--axys-section-insights);
}

.home-section__title.home-section__title--insights {
    color: var(--axys-section-insights);
}

.home-grid.home-grid--insights {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .home-grid.home-grid--insights {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .home-grid.home-grid--insights {
        grid-template-columns: 1fr;
    }
}