:root{
    --main-bg: #ffffff;
    --header-bg: #ffffff;
    --header-text: #0f172a;
    --nav-bg: #ffffff;
    --menu-bg: #ffffff;
    --menu-text: #318401;
    --menu-text-muted: #64748b;
    --menu-hover-bg: #f3f8ee;
    --menu-hover-text: #1f7a00;
    --menu-active-bg: #318401;
    --menu-active-text: #ffffff;
    --menu-border: #e5eaf0;
     --ant-box-shadow-tertiary: 0 1px 2px 0 rgba(0,0,0,.03),
                                0 1px 6px -1px rgba(0,0,0,.02),
                                0 2px 4px 0 rgba(0,0,0,.02);
  }
.ant-menu.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow::after, .ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow::after, .ant-menu.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow::after, .ant-menu.ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow::before, .ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow::before, .ant-menu.ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow::before
{
    background: #225d00 !important;
}
  .ant-layout-header {
    color: rgba(0, 0, 0, 0.85);
    line-height: 64px;
    background: var(--main-bg) !important;
}

.app-header .header-trigger,
  .app-header .trigger {
    color: #1f7a00 !important;
    border-bottom: none !important;
    line-height: 0 !important;
  }
.ant-menu-dark .ant-menu-item-selected .ant-menu-item-icon, .ant-menu-dark .ant-menu-item-selected .anticon {
    color: #fff !important;
}
  /* Sider */
  .ant-layout-sider {
    background: var(--nav-bg) !important;
    border-right: 1px solid var(--menu-border);
  }
  .ant-layout,
  .ant-layout-content {
    background: var(--main-bg) !important;
  }

  /* Header */
  .ant-layout-header,
  .ant-layout-header .ant-typography,
  .ant-layout-header .anticon,
  .ant-layout-header a,
  .ant-layout-header .ant-btn-link {
    color: var(--header-text) !important;
  }

  /* Menu base */
  .ant-menu.ant-menu-dark,
  .ant-menu-dark .ant-menu-sub,
  .ant-menu.ant-menu-dark .ant-menu-sub,
  .ant-menu {
    background: var(--menu-bg) !important;
    color: var(--menu-text) !important;
  }

  /* Item default */
  .ant-menu-item,
  .ant-menu-submenu-title,
  .ant-menu-dark .ant-menu-item,
  .ant-menu-dark .ant-menu-submenu-title {
    color: var(--menu-text) !important;
  }
.ant-menu-dark .ant-menu-item, .ant-menu-dark .ant-menu-item-group-title, .ant-menu-dark .ant-menu-item > a, .ant-menu-dark .ant-menu-item > span > a {
    color: var(--menu-text) !important;
  }
  /* Hover */
  .ant-menu-item:hover,
  .ant-menu-submenu-title:hover,
  .ant-menu-dark .ant-menu-item:hover,
  .ant-menu-dark .ant-menu-submenu-title:hover {
    background: var(--menu-hover-bg) !important;
    color: var(--menu-hover-text) !important;
  }

  /* Selected */
  .ant-menu-item-selected,
  .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background: var(--menu-active-bg) !important;
    color: var(--menu-active-text) !important;
  }

  /* Icon follows text */
  /* .ant-menu-item .anticon,
  .ant-menu-submenu-title .anticon,
  .ant-menu-dark .ant-menu-item .anticon,
  .ant-menu-dark .ant-menu-submenu-title .anticon {
    color: #318401 !important;
  } */
/* ===== HEADER ===== */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    color: var(--header-text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.validation-message {
    color: red;
}
.header-left {
    display: flex;
    align-items: center;
}
.form-action-bar {
    margin-top: 24px !important;
    text-align: right;
}
.app-title {
    font-size: 16px;
    font-weight: 600;
    margin-left: 12px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.header-right .header-user {
    color: var(--header-text);
}

.header-right a {
    color: var(--header-text);
}

.header-right a:hover {
    color: #1f7a00;
}

/* Header profile chip -- avatar + name/role, links to /profile. Sized to sit comfortably
   inside the existing 64px .app-header without changing its height. */
.header-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 10px 0 4px;
    border-radius: 999px;
    text-decoration: none !important;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.header-profile:hover {
    background: var(--menu-hover-bg);
    border-color: var(--menu-border);
}

.header-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #318401, #1f7a00);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.header-profile-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
    min-width: 0;
}

.header-profile-info .header-user {
    font-size: 13px;
    font-weight: 600;
    color: var(--header-text);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-role {
    font-size: 11px;
    color: #64748b;
}

.header-profile-chevron {
    color: #94a3b8;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
.ant-table {
    overflow-x: auto;
}
.filter-row {
    row-gap: 16px; /* vertical spacing between wrapped rows */
}
.ant-table-cell {
    white-space: nowrap;
}
/* ===== SIDEBAR LOGO ===== */
.logo {
    height: 58px;
    margin: 0px;
    border-radius: 6px;
    background: transparent;
    color: #1f7a00;
    border: none;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== CONTENT ===== */
.app-content {
    margin: 16px;
    background: var(--main-bg);
}

.page-container {
    background: white;
    padding: 24px;
    border-radius: 6px;
    min-height: calc(100vh - 160px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* ===== MENU ===== */
.ant-menu-item {
    margin: 6px 0 !important;
}

.trigger {
    font-size: 18px;
    cursor: pointer;
}

.trigger:hover {
        color: #1f7a00;
    }


.login-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f6f8;
}

.login-card {
    width: 360px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-radius: 6px;
}

@media (max-width: 768px) {
    .app-header {
        padding: 0 12px;
        height: auto;
        flex-wrap: wrap;
        gap: 8px;
    }

    .header-left {
        flex: 1 1 auto;
    }

    .app-title {
        font-size: 14px;
    }

    .header-right {
        flex: 1 1 auto;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 6px;
    }

    .app-content {
        margin: 12px;
    }

    .page-container {
        padding: 16px;
        min-height: auto;
    }

    /* Only cards that actually contain a wide data table need to scroll horizontally
       on mobile. Previously this applied to every card, including filter/form cards,
       which mostly just papered over the negative-margin gutter overflow created by
       Row/Col below rather than fixing the real squeeze -- see the Ant Grid block
       further down for the actual fix. */
    .ant-card:has(.ant-table) {
        overflow-x: auto;
    }

    /* No forced min-width here on purpose. ".ant-table-cell { white-space: nowrap; }"
       (below) already means the browser's table auto-layout sizes each table to
       whatever width its content actually needs without wrapping -- wide tables
       (many columns, e.g. the ABG Members / Expense lists) naturally end up wider
       than the screen and scroll via the rule above; a table with only 1-2 simple
       columns (e.g. the Profit & Loss "Income/Expense Breakdown" Category/Amount
       tables) naturally stays narrow and needs no scrolling at all. A hardcoded
       "min-width: 600px" here used to force every table -- including those simple
       2-column ones -- to an artificial 600px, which is wider than most phone
       screens and made "Category"/"Amount" require horizontal scrolling to see
       together even though the content would otherwise fit comfortably. */

    /* ===== RESPONSIVE FILTER / FORM ROWS =====
       Nearly every list and form page in this app lays out its filter bar (and many
       create/edit forms) with a fixed-Span Ant <Row><Col> grid sized for desktop
       (Spans usually totaling 24 across the row). Below 768px those percentage
       widths squeeze every field down to a sliver instead of reflowing -- inputs
       truncate to a few characters, date pickers collapse to just an icon, and
       "Search"/"Reset" buttons get clipped. Rather than hand-editing every page's
       Span values (dozens of files, desktop-affecting risk, no behavior gained),
       force Ant Grid columns to stack full-width on mobile. This is purely visual --
       no Blazor state, event binding, or filter/search logic is touched -- so
       desktop (Span grid, untouched by this media query) and all existing page
       logic keep working exactly as before. */
    /* Match the vertical gap to the horizontal gutter every page already uses
       (Gutter="16" is the app-wide convention -- see Expense/Index, AbgMember/Index,
       ExpenseForm, etc.), so stacked fields read as one consistent 16px grid instead
       of an arbitrary vertical spacing.
       !important is required: AntDesign's Row component always renders its own
       inline "row-gap: {verticalGutter}px" style (see Row.razor.cs SetGutterStyle),
       and since every page here passes Gutter as a plain int (horizontal-only,
       e.g. Gutter="16"), verticalGutter is always 0 -- so every row on every page
       was rendering an inline "row-gap: 0px" that silently ate this rule entirely
       when written without !important. */
    .ant-row {
        row-gap: 16px !important;
    }

    .ant-row > .ant-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Card content itself keeps its desktop padding, which reads as generous but not
       excessive once fields are stacked full-width; only trim the outer page gutters
       further for very small phones (handled in the 480px block below). */
    .ant-card {
        margin-bottom: 16px;
    }

    .ant-card:last-child {
        margin-bottom: 0;
    }

    /* Action rows (e.g. "Total: N" + Import/New buttons) collapse to one full-width
       column per the rule above; give the button group its own comfortable spacing
       instead of hugging the row above it. */
    .ant-row > .ant-col .ant-space {
        margin-top: 4px;
    }
}

@media (max-width: 480px) {
    .app-header {
        padding: 0 8px;
    }

    .app-title {
        display: none;
    }

    .header-user {
        font-size: 12px;
    }

    .header-profile {
        padding: 0 6px 0 2px;
        gap: 8px;
    }

    .header-profile-info .header-user {
        max-width: 110px;
    }

    .header-profile-chevron {
        display: none;
    }

    .app-content {
        margin: 8px;
    }

    .page-container {
        padding: 12px;
    }
}

/* ===== MOBILE NAV DRAWER =====
   Below 768px the Sider is taken out of normal document flow (position: fixed),
   so it never reserves horizontal space and the page is full-width by default --
   there is no left menu rail unless the user opens it. Tapping the header
   hamburger (which just toggles the same Collapsed state used on desktop) slides
   the Sider in as a floating overlay drawer instead of pushing content over.
   Desktop (>768px) keeps the existing push/collapse behavior untouched. */
@media (max-width: 768px) {
    .app-header {
        position: relative;
        z-index: 1100;
    }

    .ant-layout-sider {
        /* !important is required here -- AntDesign's own bundled stylesheet defines
           ".ant-layout-sider { position: relative; ... }" and loads AFTER app.css in
           App.razor, so at equal specificity it would otherwise win the cascade and
           silently keep the sider in-flow (reserving its collapsed width as blank
           space) even though transform still visually shoves it off-screen. */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        z-index: 1050 !important;
        transition: transform 0.25s ease !important;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.18);
        transform: translateX(0) !important;
    }

    .ant-layout-sider.ant-layout-sider-collapsed {
        transform: translateX(-100%) !important;
        box-shadow: none;
    }

    .mobile-nav-backdrop.show {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 1040;
    }
}

.mobile-nav-backdrop {
    display: none;
}