/* Dashboard redesign styles start */
.dashboard-page {
    --dash-green: #075b43;
    --dash-green-2: #0f8a5f;
    --dash-mint: #e8f6ef;
    --dash-soft: #f5f8f6;
    --dash-ink: #172622;
    --dash-muted: #687b74;
    --dash-border: #dfe9e4;
    --dash-red: #dc4c4c;
    --dash-orange: #f59e0b;
    display: grid;
    gap: 18px;
    padding: 22px 26px 28px;
    max-width: 100%;
    overflow-x: hidden;
    color: var(--dash-ink);
}

.dashboard-topbar {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 0;
}

.dashboard-title-block {
    min-width: 0;
}

.dashboard-title-block h1 {
    margin: 0;
    color: var(--dash-ink);
    font-size: clamp(19px, 2vw, 25px);
    font-weight: 760;
    line-height: 1.2;
}

.dashboard-title-block span,
.dashboard-topbar-actions {
    color: var(--dash-muted);
    font-size: 13px;
    font-weight: 650;
}

.dashboard-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.dashboard-status-pill,
.dashboard-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border: 1px solid #cfe1d9;
    border-radius: 999px;
    padding: 0 11px;
    background: #fff;
    color: var(--dash-green);
    font-size: 12px;
    font-weight: 760;
}

.dashboard-status-pill.success,
.dashboard-badge {
    background: var(--dash-mint);
}

.dashboard-badge.warning,
.dashboard-soft-warning {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #b45309;
}

.dashboard-badge.danger {
    border-color: #fecaca;
    background: #fff1f2;
    color: #b91c1c;
}

.dashboard-soft-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 680;
}

.dashboard-soft-warning .nav-icon {
    width: 18px;
    height: 18px;
}

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: 16px;
}

.dashboard-kpi-card {
    min-width: 0;
    min-height: 118px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(7, 91, 67, .08);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(21, 45, 38, .08);
    padding: 18px;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.dashboard-kpi-card:hover,
.quick-action-tile:hover,
.recent-transaction-row:hover,
.dashboard-alert-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 38px rgba(21, 45, 38, .12);
}

.dashboard-kpi-icon,
.quick-action-tile span,
.recent-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    background: var(--dash-mint);
    color: var(--dash-green-2);
}

.dashboard-kpi-icon .nav-icon,
.quick-action-tile .nav-icon,
.recent-icon .nav-icon {
    width: 25px;
    height: 25px;
}

.dashboard-kpi-body {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.dashboard-kpi-body strong {
    font-size: clamp(21px, 2vw, 27px);
    line-height: 1.05;
    white-space: nowrap;
}

.dashboard-kpi-body span {
    color: var(--dash-ink);
    font-size: 14px;
    font-weight: 760;
}

.dashboard-kpi-body small,
.dashboard-kpi-body em {
    color: var(--dash-muted);
    font-size: 12px;
    font-style: normal;
}

.dashboard-kpi-body em.positive { color: var(--dash-green-2); }
.dashboard-kpi-body em.negative { color: var(--dash-red); }

.kpi-detail-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(6, 31, 23, .36);
    backdrop-filter: blur(4px);
}

.kpi-detail-modal {
    width: min(520px, 100%);
    max-height: min(720px, calc(100vh - 48px));
    overflow: auto;
    border: 1px solid #d7e9e1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(5, 41, 30, .22);
}

.kpi-detail-modal header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 24px 18px;
    border-bottom: 1px solid #edf3f0;
}

.kpi-detail-modal header span {
    display: block;
    margin-bottom: 5px;
    color: #07835f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.kpi-detail-modal h2 {
    margin: 0;
    color: #0a2119;
    font-size: 24px;
    font-weight: 800;
}

.kpi-detail-modal p {
    margin: 7px 0 0;
    color: #657870;
    font-size: 14px;
}

.kpi-detail-close {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 1px solid #cfe1d9;
    border-radius: 10px;
    background: #f8fcfa;
    color: #075f45;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.kpi-detail-close:hover {
    border-color: #9bcfbc;
    background: #e9f7f1;
}

.kpi-detail-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 24px;
    padding: 14px 16px;
    border: 1px solid #d8efe5;
    border-radius: 12px;
    background: #f2fbf7;
}

.kpi-detail-summary span {
    color: #587169;
    font-size: 13px;
    font-weight: 700;
}

.kpi-detail-summary strong {
    color: #06251b;
    font-size: 20px;
    font-weight: 800;
}

.kpi-detail-table {
    display: grid;
    padding: 0 24px 24px;
}

.kpi-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    min-height: 46px;
    border-bottom: 1px solid #edf3f0;
}

.kpi-detail-row.heading {
    min-height: 36px;
    color: #6b7e77;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.kpi-detail-row:not(.heading) span {
    min-width: 0;
    overflow: hidden;
    color: #17352c;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-detail-row strong {
    color: #00684b;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1.2fr) minmax(320px, 1fr) minmax(300px, .95fr);
    gap: 16px;
    align-items: stretch;
}

.dashboard-card {
    min-width: 0;
    border: 1px solid rgba(7, 91, 67, .08);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(21, 45, 38, .07);
    padding: 22px;
}

.financial-summary-card {
    min-height: 330px;
    display: grid;
    grid-template-rows: auto auto minmax(110px, 1fr) auto;
    background: radial-gradient(circle at 78% 18%, rgba(88, 190, 126, .2), transparent 28%), linear-gradient(135deg, #064735, #063f32 58%, #075b43);
    color: #fff;
}

.dashboard-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.dashboard-card-title h2 {
    margin: 0;
    color: inherit;
    font-size: 18px;
    font-weight: 780;
    letter-spacing: 0;
}

.dashboard-outline-button,
.dashboard-soft-button,
.dashboard-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 8px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 760;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-outline-button {
    border: 1px solid rgba(255, 255, 255, .72);
    background: transparent;
    color: #fff;
}

a.dashboard-outline-button,
a.dashboard-outline-button:visited,
a.dashboard-outline-button:hover,
a.dashboard-outline-button:focus,
a.dashboard-outline-button:active {
    color: #fff;
    text-decoration: none;
}

.dashboard-outline-button:hover,
.dashboard-outline-button:focus {
    border-color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.dashboard-outline-button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .28);
    outline-offset: 2px;
}

.dashboard-soft-button {
    border: 1px solid #cfe1d9;
    background: #fff;
    color: var(--dash-green);
}

.dashboard-soft-button.small {
    min-height: 30px;
}

.dashboard-primary-button {
    border: 1px solid var(--dash-green-2);
    background: var(--dash-green-2);
    color: #fff;
}

.financial-summary-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 8px;
}

.financial-summary-values div:last-child {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255, 255, 255, .2);
    padding-top: 12px;
}

.financial-summary-values span,
.financial-summary-card footer {
    color: rgba(255, 255, 255, .76);
    font-size: 12px;
    font-weight: 760;
    text-transform: uppercase;
}

.financial-summary-values strong {
    display: block;
    margin-top: 5px;
    font-size: clamp(22px, 2.2vw, 29px);
    line-height: 1.1;
}

.cash-count-warning {
    color: #fde68a;
}

.bank-status-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.dashboard-donut-wrap {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 220px;
}

.dashboard-donut-wrap > div {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
}

.dashboard-donut-wrap span {
    color: var(--dash-muted);
    font-size: 12px;
}

.dashboard-donut-wrap strong {
    font-size: 16px;
}

.dashboard-donut-canvas,
.dashboard-chart-canvas,
.dashboard-mini-line-canvas {
    display: block;
    width: 100%;
    max-width: 100%;
}

.bank-account-list,
.recent-transaction-list,
.dashboard-alert-list,
.version-list {
    display: grid;
    gap: 10px;
}

.bank-account-row,
.bank-account-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #eef3f0;
    padding-bottom: 10px;
}

.bank-account-row span {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    column-gap: 8px;
    align-items: center;
    min-width: 0;
}

.bank-account-row small {
    grid-column: 2;
    color: var(--dash-muted);
    font-size: 12px;
}

.positive-dot,
.negative-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dash-green-2);
}

.negative-dot { background: var(--dash-red); }
.negative-money,
.expense-text { color: var(--dash-red); }
.income-text { color: var(--dash-green-2); }

.bank-status-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.bank-status-footer div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.recent-transactions-card {
    grid-row: span 2;
}

.recent-transaction-row,
.dashboard-alert-row,
.quick-action-tile {
    border: 1px solid #e2ece7;
    border-radius: 8px;
    background: #fff;
    color: inherit;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.recent-transaction-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px;
    text-align: left;
}

.recent-icon {
    width: 40px;
    height: 40px;
}

.recent-icon.expense {
    background: #fff1f2;
    color: var(--dash-red);
}

.recent-copy,
.recent-amount {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.recent-copy b,
.recent-amount {
    font-size: 13px;
    font-weight: 780;
}

.recent-copy small,
.recent-copy em,
.recent-amount small {
    color: var(--dash-muted);
    font-size: 11px;
    font-style: normal;
}

.income-expense-card {
    grid-column: span 2;
}

.dashboard-period-select {
    min-height: 36px;
    border: 1px solid #d6e3de;
    border-radius: 8px;
    background: #fff;
    color: var(--dash-ink);
    padding: 0 10px;
    font-weight: 700;
}

.income-summary-grid,
.collection-grid,
.quick-action-grid {
    display: grid;
    gap: 10px;
}

.income-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
}

.income-summary-grid article,
.collection-grid button {
    border: 1px solid #d9eee4;
    border-radius: 8px;
    background: #f3fbf7;
    padding: 13px;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.income-summary-grid article.expense {
    border-color: #f5d3d3;
    background: #fff6f6;
}

.income-summary-grid article.net {
    border-color: #d7e8f5;
    background: #f2f8fd;
}

.income-summary-grid span,
.collection-grid span {
    color: var(--dash-muted);
    font-size: 12px;
    font-weight: 720;
}

.income-summary-grid strong,
.collection-grid strong {
    display: block;
    margin-top: 4px;
    font-size: 17px;
}

.income-summary-grid small {
    color: var(--dash-muted);
    font-size: 11px;
}

.collection-progress {
    height: 14px;
    border-radius: 999px;
    background: #e7efeb;
    overflow: hidden;
    margin-bottom: 14px;
}

.collection-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--dash-green), #4bbf79);
}

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

.quick-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-action-tile {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 70px;
    padding: 12px;
    text-align: left;
}

.quick-action-tile span {
    grid-row: span 2;
    width: 42px;
    height: 42px;
}

.quick-action-tile b {
    align-self: end;
    font-size: 13px;
}

.quick-action-tile small {
    align-self: start;
    color: var(--dash-muted);
    font-size: 11px;
}

.dashboard-alert-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding: 10px;
    text-align: left;
}

.dashboard-alert-row span {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #eef4f1;
    color: var(--dash-green);
}

.dashboard-alert-row.warning span {
    background: #fff7ed;
    color: #b45309;
}

.dashboard-alert-row.critical span {
    background: #fff1f2;
    color: #b91c1c;
}

.dashboard-alert-row b {
    font-size: 13px;
}

.dashboard-alert-row small {
    color: var(--dash-muted);
    font-size: 12px;
}

.version-list div {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid #eef3f0;
    padding-bottom: 9px;
}

.version-list b {
    color: var(--dash-green);
}

.version-list span,
.version-list small {
    color: var(--dash-muted);
    font-size: 12px;
}

.dashboard-empty-inline {
    display: grid;
    place-items: center;
    min-height: 120px;
    border: 1px dashed #d6e3de;
    border-radius: 8px;
    color: var(--dash-muted);
    background: #fbfdfc;
    text-align: center;
    padding: 16px;
}

.dashboard-empty-state {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 360px;
    border-radius: 8px;
    background: #fff;
    text-align: center;
    padding: 30px;
}

.dashboard-empty-state .nav-icon {
    width: 42px;
    height: 42px;
    color: var(--dash-orange);
}

.skeleton-block {
    position: relative;
    overflow: hidden;
    min-height: 110px;
    background: #e9f0ed;
}

.skeleton-block::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: dashboard-shimmer 1.3s infinite;
}

@keyframes dashboard-shimmer {
    100% { transform: translateX(100%); }
}

.version-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(7, 37, 28, .42);
}

.version-modal {
    width: min(620px, 100%);
    max-height: min(680px, calc(100vh - 36px));
    overflow: auto;
    border-radius: 8px;
    background: #fff;
    padding: 22px;
}

.version-history-modal {
    width: min(820px, 100%);
    border-radius: 20px;
    box-shadow: 0 26px 70px rgba(5, 35, 25, .28);
}

.version-history-modal .dashboard-card-title > div small {
    display: block;
    margin-top: 4px;
    color: #6b7e76;
}

.version-history-list {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.version-history-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 96px;
    align-items: center;
    gap: 16px;
    padding: 13px 15px;
    border: 1px solid #e1ebe6;
    border-radius: 12px;
    background: #f9fbfa;
}

.version-history-row b { color: #087a57; }
.version-history-row span { color: #263c34; }
.version-history-row small { color: #6b7e76; text-align: right; }

.version-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
}

.version-pagination button {
    min-width: 92px;
    padding: 9px 14px;
    border: 1px solid #cfe1d9;
    border-radius: 10px;
    background: #edf6f2;
    color: #087a57;
    font-weight: 700;
    cursor: pointer;
}

.version-pagination button:disabled {
    cursor: default;
    opacity: .45;
}

.version-pagination span {
    color: #52675e;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 600px) {
    .version-history-row {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .version-history-row small {
        grid-column: 2;
        text-align: left;
    }
}

@media (max-width: 1320px) {
    .dashboard-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-main-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .recent-transactions-card {
        grid-row: auto;
    }
}

@media (max-width: 860px) {
    .dashboard-page {
        padding: 16px;
    }

    .dashboard-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-topbar-actions {
        justify-content: flex-start;
    }

    .dashboard-kpi-grid,
    .dashboard-main-grid,
    .income-summary-grid,
    .collection-grid,
    .quick-action-grid,
    .financial-summary-values,
    .bank-status-layout {
        grid-template-columns: 1fr;
    }

    .income-expense-card {
        grid-column: auto;
    }

    .recent-transaction-row {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .recent-amount {
        grid-column: 2;
    }

    .version-list div {
        grid-template-columns: 1fr;
    }
}
/* Dashboard redesign styles end */

/* Dashboard mockup alignment overrides */
.dashboard-page {
    --dashboard-gap: 20px;
    --dashboard-radius: 18px;
    --dashboard-card-padding: 22px;
    --dashboard-border: #e8eeeb;
    --dashboard-shadow: 0 8px 24px rgba(10, 70, 48, 0.06);
    width: 100%;
    min-width: 0;
    display: block;
    padding: 24px 28px;
    overflow-x: hidden;
    background: #f5f8f6;
}

.dashboard-content {
    width: 100%;
    max-width: none;
    min-width: 0;
    display: grid;
    gap: var(--dashboard-gap);
    margin: 0;
}

.dashboard-topbar {
    min-height: 76px;
    padding: 0;
}

.dashboard-title-block {
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-title-block .dashboard-title,
.dashboard-title-block h1 {
    font-size: clamp(18px, 1.35vw, 24px);
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-topbar-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--dashboard-gap);
}

.dashboard-kpi-card {
    min-width: 0;
    min-height: 118px;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid var(--dashboard-border);
    border-radius: var(--dashboard-radius);
    box-shadow: var(--dashboard-shadow);
}

.dashboard-kpi-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
}

.dashboard-kpi-body strong,
.kpi-value {
    min-width: 0;
    font-size: clamp(22px, 1.65vw, 30px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-kpi-body span {
    font-size: 14px;
}

.dashboard-primary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr) minmax(320px, .92fr);
    gap: var(--dashboard-gap);
    align-items: stretch;
}

.dashboard-secondary-grid {
    display: grid;
    grid-template-columns: minmax(280px, .92fr) minmax(420px, 1.28fr) minmax(320px, .92fr);
    gap: var(--dashboard-gap);
    align-items: stretch;
}

.dashboard-tertiary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dashboard-gap);
}

.dashboard-card {
    min-width: 0;
    border: 1px solid var(--dashboard-border);
    border-radius: var(--dashboard-radius);
    box-shadow: var(--dashboard-shadow);
    padding: var(--dashboard-card-padding);
}

.dashboard-primary-grid > .dashboard-card {
    height: auto;
    min-height: 330px;
    overflow: visible;
}

.dashboard-secondary-grid > .dashboard-card {
    min-height: 320px;
    overflow: visible;
}

.dashboard-card-title {
    min-height: 34px;
    margin-bottom: 14px;
}

.dashboard-card-title h2 {
    font-size: 20px;
    font-weight: 700;
}

.financial-summary-card {
    display: grid;
    grid-template-rows: auto auto minmax(84px, 1fr) auto;
    padding: 26px;
}

.financial-summary-values {
    grid-template-columns: 1fr 1fr;
    gap: 18px 28px;
    margin-top: 2px;
}

.financial-summary-values div:last-child {
    grid-column: 2;
    border-top: 0;
    padding-top: 0;
}

.financial-summary-values strong {
    font-size: clamp(20px, 1.6vw, 26px);
}

.financial-summary-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-transform: none;
}

.financial-summary-card .dashboard-outline-button {
    flex: 0 0 auto;
}

.dashboard-mini-line-canvas {
    align-self: stretch;
    height: 92px !important;
    width: 100%;
    display: block;
}

.mini-line-stroke {
    fill: none;
    stroke: #7bd66f;
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mini-line-fill {
    stroke: none;
}

.dashboard-mini-line-canvas circle {
    fill: #b8f27c;
    stroke: rgba(6, 71, 53, .7);
    stroke-width: 1;
}

.dashboard-mini-empty {
    display: grid;
    place-items: center;
    min-height: 82px;
    color: rgba(255, 255, 255, .75);
    font-size: 12px;
}

.bank-status-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    row-gap: 10px;
}

.bank-status-main {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    min-height: 170px;
}

.dashboard-donut-wrap {
    width: 150px;
    min-height: 150px;
}

.dashboard-donut-visual {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(7, 91, 67, .08);
}

.dashboard-donut-visual::after {
    content: "";
    position: absolute;
    inset: 29px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
}

.dashboard-donut-center {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-content: center;
    text-align: center;
}

.dashboard-donut-wrap strong {
    font-size: 15px;
}

.bank-account-list {
    gap: 8px;
    min-width: 0;
}

.bank-row,
.bank-account-total {
    display: grid;
    grid-template-columns: minmax(135px, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding-bottom: 8px;
}

.bank-row {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #eef3f0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    padding-left: 0;
    padding-right: 0;
}

.bank-name,
.bank-balance,
.bank-money {
    min-width: 0;
}

.bank-name {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    column-gap: 8px;
    align-items: center;
}

.bank-identity {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.bank-identity strong {
    color: var(--dash-ink);
    font-size: 14px;
    line-height: 1.1;
    white-space: normal;
    overflow-wrap: anywhere;
}

.bank-identity small,
.bank-money small {
    color: var(--dash-muted);
    font-size: 12px;
    line-height: 1.1;
}

.bank-money {
    display: grid;
    justify-items: end;
    gap: 2px;
}

.bank-balance {
    white-space: nowrap;
    text-align: right;
    font-size: 13px;
}

.bank-status-footer {
    align-items: center;
    margin-top: 4px;
}

.bank-status-footer .dashboard-badge {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-transactions-card {
    grid-row: auto;
    display: grid;
    grid-template-rows: auto 1fr;
}

.recent-transaction-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}

.recent-transaction-row {
    min-height: 48px;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 8px 10px;
}

.recent-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
}

.recent-copy b,
.recent-copy small,
.transaction-description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-copy b {
    font-size: 13px;
}

.recent-amount {
    white-space: nowrap;
    text-align: right;
    font-size: 12px;
}

.recent-amount small {
    margin-top: 2px;
}

.income-expense-card {
    grid-column: auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.income-expense-chart-wrapper {
    position: relative;
    width: 100%;
    height: 190px;
    min-height: 190px;
}

.income-expense-chart-wrapper canvas,
.dashboard-chart-canvas {
    width: 100% !important;
    height: 100% !important;
}

.income-expense-bars {
    width: 100%;
    height: 190px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px 10px;
}

.chart-scale {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    color: var(--dash-muted);
    font-size: 11px;
    line-height: 1;
}

.chart-scale span {
    align-self: start;
    white-space: nowrap;
}

.chart-plot {
    min-width: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(74px, 1fr);
    align-items: end;
    gap: 16px;
    border-bottom: 1px solid #dfe8e3;
    background: repeating-linear-gradient(to bottom, #dfe8e3 0 1px, transparent 1px 25%);
    padding: 0 8px 0;
}

.chart-month {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 24px;
    align-items: end;
}

.chart-bars {
    height: 100%;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 7px;
}

.chart-bar {
    width: clamp(18px, 2vw, 32px);
    min-height: 3px;
    border-radius: 7px 7px 0 0;
    display: block;
    box-shadow: 0 5px 12px rgba(15, 35, 31, .08);
}

.chart-bar.income {
    background: linear-gradient(180deg, #2fa66d, #0f7f57);
}

.chart-bar.expense {
    background: linear-gradient(180deg, #f56a6a, #dc4c4c);
}

.chart-label {
    min-width: 0;
    align-self: center;
    color: var(--dash-muted);
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-legend {
    grid-column: 2;
    display: flex;
    justify-content: center;
    gap: 18px;
    color: var(--dash-muted);
    font-size: 12px;
    font-weight: 700;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chart-legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.chart-legend i.income { background: #118657; }
.chart-legend i.expense { background: #dc4c4c; }

.income-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.income-summary-grid article {
    min-width: 0;
    padding: 10px 12px;
}

.income-summary-grid strong {
    font-size: clamp(14px, 1vw, 16px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.income-summary-grid small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.quick-action-tile {
    min-height: 70px;
    padding: 12px;
    border-radius: 10px;
}

.quick-action-tile b,
.quick-action-tile small {
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.25;
}

.quick-action-tile b {
    min-height: 32px;
}

.version-list {
    gap: 9px;
}

.version-list div {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 10px;
    padding-bottom: 8px;
}

.version-list span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.collection-status-card,
.dashboard-alerts-card {
    min-height: 260px;
}

.collection-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.collection-grid button:hover,
.bank-row:hover {
    border-color: #b9d9cb;
    box-shadow: 0 8px 18px rgba(10, 70, 48, .08);
}

.collection-grid button span {
    display: block;
    min-height: 34px;
    line-height: 1.3;
}

.collection-grid button strong {
    white-space: nowrap;
}

@media (min-width: 1440px) {
    .dashboard-page {
        padding: 24px 28px;
    }
}

@media (max-width: 1200px) {
    .dashboard-primary-grid,
    .dashboard-secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .income-expense-card {
        grid-column: span 2;
    }

    .dashboard-primary-grid > .dashboard-card,
    .dashboard-secondary-grid > .dashboard-card {
        height: auto;
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .dashboard-page {
        padding: 16px;
    }

    .dashboard-topbar,
    .dashboard-topbar-actions {
        flex-wrap: wrap;
        white-space: normal;
    }

    .dashboard-title-block .dashboard-title,
    .dashboard-title-block h1 {
        white-space: normal;
    }

    .dashboard-kpi-grid,
    .dashboard-primary-grid,
    .dashboard-secondary-grid,
    .dashboard-tertiary-grid,
    .financial-summary-values,
    .bank-status-main,
    .income-summary-grid,
    .collection-grid,
    .quick-action-grid {
        grid-template-columns: 1fr;
    }

    .income-expense-card {
        grid-column: auto;
    }

    .dashboard-primary-grid > .dashboard-card,
    .dashboard-secondary-grid > .dashboard-card {
        min-height: 0;
    }

    .recent-transaction-row {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .recent-amount {
        grid-column: 2;
        text-align: left;
    }
}

/* Dashboard final repair: visible icons, aligned strips, stable cards */
.dashboard-page .dashboard-kpi-icon,
.dashboard-page .quick-action-icon,
.dashboard-page .recent-icon,
.dashboard-page .dashboard-alert-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #d9f0e7 !important;
    color: #006b52 !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
}

.dashboard-page .dashboard-kpi-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 15px !important;
}

.dashboard-page .quick-action-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
}

.dashboard-page .recent-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
}

.dashboard-page .dashboard-alert-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
}

.dashboard-page .dashboard-kpi-icon .nav-icon,
.dashboard-page .quick-action-icon .nav-icon,
.dashboard-page .recent-icon .nav-icon,
.dashboard-page .dashboard-alert-icon .nav-icon {
    width: 24px !important;
    height: 24px !important;
    color: inherit !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2.35 !important;
    opacity: 1 !important;
}

.dashboard-page .recent-icon .nav-icon {
    width: 18px !important;
    height: 18px !important;
}

.dashboard-page .dashboard-kpi-icon .nav-icon *,
.dashboard-page .quick-action-icon .nav-icon *,
.dashboard-page .recent-icon .nav-icon *,
.dashboard-page .dashboard-alert-icon .nav-icon * {
    stroke: currentColor !important;
    fill: none !important;
    opacity: 1 !important;
}

.dashboard-page .recent-icon.expense {
    background: #ffe6e6 !important;
    color: #b91c1c !important;
}

.dashboard-page .dashboard-alert-row.warning .dashboard-alert-icon {
    background: #fff1d6 !important;
    color: #b45309 !important;
}

.dashboard-page .dashboard-alert-row.critical .dashboard-alert-icon {
    background: #ffe1e1 !important;
    color: #b91c1c !important;
}

.dashboard-page .dashboard-alert-row.info .dashboard-alert-icon {
    background: #e5f2ff !important;
    color: #2563eb !important;
}

.dashboard-kpi-card {
    align-items: center;
    overflow: visible;
}

.dashboard-kpi-body {
    min-width: 0;
}

.kpi-detail-list {
    display: grid !important;
    gap: 5px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid #e3eee9;
}

.kpi-detail-list > span {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    font-size: 12px;
}

.kpi-detail-list b,
.kpi-detail-list i {
    min-width: 0;
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-detail-list i {
    color: #087a57;
    font-weight: 800;
}

.quick-action-tile {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    min-height: 92px;
    padding: 14px;
}

.quick-action-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.quick-action-copy b,
.quick-action-copy small {
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.quick-action-copy b {
    font-size: 14px;
    line-height: 1.18;
}

.dashboard-activity-row {
    align-items: stretch;
}

.dashboard-activity-row > .dashboard-card {
    min-height: 238px;
    max-height: none;
    overflow: hidden;
}

.recent-transactions-card,
.version-notes-card {
    height: 100%;
}

.recent-transaction-list {
    min-height: 0;
    overflow: hidden;
}

.recent-transaction-row.transaction-strip-row {
    grid-template-columns: 30px minmax(128px, .72fr) minmax(240px, 1.5fr) 128px 128px;
    min-height: 34px;
    padding: 6px 0;
}

.transaction-title {
    font-size: 13px;
}

.transaction-subtitle,
.transaction-date {
    font-size: 12px;
}

.recent-amount {
    text-align: right;
}

.version-list div {
    min-height: 40px;
}

.dashboard-alert-row {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
    align-items: center !important;
    min-height: 78px;
    padding: 12px 16px !important;
}

.dashboard-alert-row .dashboard-alert-icon {
    grid-row: 1 / 3;
    grid-column: 1;
}

.dashboard-alert-row b,
.dashboard-alert-row small {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-alert-row b {
    align-self: end;
    white-space: nowrap;
}

.dashboard-alert-row small {
    align-self: start;
    white-space: normal;
}

.dashboard-tertiary-grid {
    align-items: stretch;
}

.collection-status-card,
.dashboard-alerts-card {
    min-height: 350px;
}

.collection-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.collection-grid button {
    min-width: 0;
    min-height: 118px;
    align-content: start;
    gap: 8px;
    overflow: hidden;
}

.collection-grid button span {
    min-height: 0;
    line-height: 1.28;
    overflow-wrap: normal;
    word-break: normal;
}

.collection-grid button strong {
    min-width: 0;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.collection-cheque-card small {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.income-summary-grid small:empty {
    display: none;
}

.chart-plot {
    grid-auto-columns: minmax(0, 1fr);
    gap: clamp(7px, 1.1vw, 18px);
}

.chart-label {
    font-size: 10px;
}

.chart-bar {
    width: clamp(12px, 1.6vw, 30px);
}

@media (max-width: 1500px) {
    .recent-transaction-row.transaction-strip-row {
        grid-template-columns: 30px minmax(118px, .7fr) minmax(180px, 1.3fr) 112px 116px;
        gap: 10px;
    }
}

@media (max-width: 900px) {
    .collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Final dashboard layout and contrast pass */
.dashboard-financial-row {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--dashboard-gap);
    align-items: stretch;
}

.dashboard-financial-row > .dashboard-card {
    min-height: 340px;
    overflow: visible;
}

.dashboard-analysis-row {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(390px, .75fr);
    gap: var(--dashboard-gap);
    align-items: stretch;
}

.dashboard-analysis-row > .dashboard-card {
    min-height: 360px;
}

.dashboard-activity-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, .6fr);
    gap: var(--dashboard-gap);
    align-items: stretch;
}

.dashboard-activity-row > .dashboard-card {
    min-height: 185px;
    max-height: 210px;
    overflow: visible;
}

.dashboard-kpi-icon,
.quick-action-tile > span:first-child,
.recent-icon,
.dashboard-alert-row > span:first-child {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #e3f3ec;
    color: #087a57;
    flex: 0 0 auto;
    opacity: 1;
}

.dashboard-kpi-icon svg,
.quick-action-tile > span:first-child svg,
.recent-icon svg,
.dashboard-alert-row > span:first-child svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    opacity: 1;
}

.recent-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
}

.recent-icon svg {
    width: 17px;
    height: 17px;
}

.recent-icon.expense {
    background: #fff0f0;
    color: #c24141;
}

.dashboard-alert-row.warning > span:first-child {
    background: #fff4df;
    color: #b45309;
}

.dashboard-alert-row.critical > span:first-child {
    background: #ffe8e8;
    color: #b91c1c;
}

.dashboard-alert-row.info > span:first-child {
    background: #eaf5ff;
    color: #2563eb;
}

.financial-summary-card {
    grid-template-rows: auto auto minmax(104px, 1fr) auto;
}

.financial-summary-chart-block {
    min-width: 0;
    align-self: stretch;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 6px;
    margin-top: 8px;
}

.financial-summary-chart-block > span {
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 700;
}

.dashboard-mini-line-canvas {
    min-height: 96px;
}

.bank-status-main {
    grid-template-columns: minmax(165px, .75fr) minmax(280px, 1.25fr);
    gap: 28px;
}

.dashboard-donut-wrap,
.dashboard-donut-visual {
    width: 165px;
}

.dashboard-donut-visual {
    height: 165px;
}

.dashboard-donut-visual::after {
    inset: 33px;
    width: 99px;
    height: 99px;
}

.bank-row,
.bank-account-total {
    grid-template-columns: minmax(145px, 1fr) minmax(132px, auto);
}

.bank-identity strong {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.bank-balance,
.bank-account-total strong {
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bank-account-total {
    padding-top: 8px;
}

.bank-account-total span,
.bank-account-total strong {
    line-height: 1.2;
}

.bank-status-footer {
    gap: 12px;
    align-items: center;
}

.bank-status-footer .dashboard-badge {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.bank-status-footer > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.income-expense-chart-wrapper,
.income-expense-bars {
    height: 230px;
    min-height: 230px;
}

.chart-plot {
    grid-auto-columns: minmax(92px, 1fr);
    gap: 20px;
}

.chart-bar {
    width: clamp(22px, 2.3vw, 36px);
}

.recent-transactions-card {
    grid-template-rows: auto minmax(0, 1fr);
}

.recent-transactions-strip .dashboard-card-title,
.version-notes-card .dashboard-card-title {
    min-height: 28px;
    margin-bottom: 10px;
}

.recent-transaction-list {
    gap: 0;
}

.transaction-strip-row,
.recent-transaction-row.transaction-strip-row {
    display: grid;
    grid-template-columns: 30px minmax(120px, .75fr) minmax(190px, 1.45fr) auto auto;
    gap: 12px;
    align-items: center;
    min-height: 30px;
    padding: 4px 2px;
    border: 0;
    border-bottom: 1px solid #edf1ef;
    border-radius: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.transaction-strip-row:hover {
    background: #f8fcfa;
}

.transaction-title,
.transaction-subtitle,
.transaction-date {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-title {
    color: var(--dash-ink);
    font-size: 13px;
    font-weight: 800;
}

.transaction-subtitle,
.transaction-date {
    color: var(--dash-muted);
    font-size: 12px;
}

.transaction-date,
.recent-amount {
    font-variant-numeric: tabular-nums;
}

.recent-amount {
    font-size: 13px;
    font-weight: 800;
}

.version-list {
    gap: 6px;
}

.version-list div {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 10px;
    padding-bottom: 7px;
}

.version-list span {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.quick-action-tile {
    min-height: 82px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.quick-action-tile > span:first-child {
    width: 42px;
    height: 42px;
}

.quick-action-tile > span:first-child svg {
    width: 20px;
    height: 20px;
}

.quick-action-tile:hover {
    border-color: #9bcfbc;
    background: #f8fcfa;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(8, 89, 62, .08);
}

.quick-action-tile b {
    min-height: 0;
    font-size: 13px;
}

.collection-cheque-card small {
    display: block;
    color: var(--dash-muted);
    font-size: 11px;
    line-height: 1.35;
}

.collection-cheque-card strong {
    white-space: normal;
}

@media (min-width: 1440px) {
    .dashboard-financial-row {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    }
}

@media (max-width: 1350px) {
    .dashboard-financial-row,
    .dashboard-analysis-row,
    .dashboard-activity-row,
    .dashboard-tertiary-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-activity-row > .dashboard-card {
        max-height: none;
    }

    .bank-status-main {
        grid-template-columns: minmax(165px, .45fr) minmax(280px, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-financial-row,
    .dashboard-analysis-row,
    .dashboard-activity-row {
        grid-template-columns: 1fr;
    }

    .transaction-strip-row,
    .recent-transaction-row.transaction-strip-row {
        grid-template-columns: 30px minmax(0, 1fr) auto;
    }

    .transaction-subtitle {
        grid-column: 2 / 4;
    }

    .transaction-date {
        display: none;
    }

    .bank-status-main {
        grid-template-columns: 1fr;
    }

    .dashboard-donut-wrap,
    .dashboard-donut-visual {
        width: 150px;
    }

    .dashboard-donut-visual {
        height: 150px;
    }
}

/* Dashboard hard override: must stay last */
.dashboard-page .dashboard-kpi-icon,
.dashboard-page .quick-action-icon,
.dashboard-page .recent-icon,
.dashboard-page .dashboard-alert-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #d9f0e7 !important;
    color: #006b52 !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
}

.dashboard-page .dashboard-kpi-icon { width: 52px !important; height: 52px !important; border-radius: 15px !important; }
.dashboard-page .quick-action-icon { width: 48px !important; height: 48px !important; border-radius: 14px !important; }
.dashboard-page .recent-icon { width: 30px !important; height: 30px !important; border-radius: 10px !important; }
.dashboard-page .dashboard-alert-icon { width: 54px !important; height: 54px !important; border-radius: 16px !important; }

.dashboard-page .dashboard-kpi-icon .nav-icon,
.dashboard-page .quick-action-icon .nav-icon,
.dashboard-page .recent-icon .nav-icon,
.dashboard-page .dashboard-alert-icon .nav-icon {
    width: 24px !important;
    height: 24px !important;
    color: inherit !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2.35 !important;
    opacity: 1 !important;
}

.dashboard-page .recent-icon .nav-icon { width: 18px !important; height: 18px !important; }

.dashboard-page .dashboard-kpi-icon .nav-icon *,
.dashboard-page .quick-action-icon .nav-icon *,
.dashboard-page .recent-icon .nav-icon *,
.dashboard-page .dashboard-alert-icon .nav-icon * {
    stroke: currentColor !important;
    fill: none !important;
    opacity: 1 !important;
}

.dashboard-page .recent-icon.expense { background: #ffe6e6 !important; color: #b91c1c !important; }
.dashboard-page .dashboard-alert-row.warning .dashboard-alert-icon { background: #fff1d6 !important; color: #b45309 !important; }
.dashboard-page .dashboard-alert-row.critical .dashboard-alert-icon { background: #ffe1e1 !important; color: #b91c1c !important; }
.dashboard-page .dashboard-alert-row.info .dashboard-alert-icon { background: #e5f2ff !important; color: #2563eb !important; }

.dashboard-kpi-card { align-items: center !important; overflow: visible !important; }
.dashboard-kpi-body { min-width: 0 !important; }
.kpi-detail-list {
    display: grid !important;
    gap: 5px !important;
    margin-top: 9px !important;
    padding-top: 8px !important;
    border-top: 1px solid #e3eee9 !important;
}
.kpi-detail-list > span {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    min-width: 0 !important;
}
.kpi-detail-list b,
.kpi-detail-list i {
    min-width: 0 !important;
    font-size: 12px !important;
    font-style: normal !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.kpi-detail-list i { color: #087a57 !important; font-weight: 800 !important; }

.quick-action-tile {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    min-height: 92px !important;
    padding: 14px !important;
}
.quick-action-copy { display: grid !important; gap: 6px !important; min-width: 0 !important; }
.quick-action-copy b,
.quick-action-copy small {
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}
.quick-action-copy b { font-size: 14px !important; line-height: 1.18 !important; }

.dashboard-activity-row > .dashboard-card {
    min-height: 238px !important;
    max-height: none !important;
    overflow: hidden !important;
}
.recent-transactions-card,
.version-notes-card { height: 100% !important; }
.recent-transaction-list { min-height: 0 !important; overflow: hidden !important; }
.recent-transaction-row.transaction-strip-row {
    grid-template-columns: 30px minmax(128px, .72fr) minmax(240px, 1.5fr) 128px 128px !important;
    min-height: 34px !important;
    padding: 6px 0 !important;
    gap: 12px !important;
}
.transaction-title { font-size: 13px !important; }
.transaction-subtitle,
.transaction-date { font-size: 12px !important; }
.recent-amount { text-align: right !important; }

.dashboard-alert-row {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
    align-items: center !important;
    min-height: 78px !important;
    padding: 12px 16px !important;
}
.dashboard-alert-row .dashboard-alert-icon {
    grid-row: 1 / 3 !important;
    grid-column: 1 !important;
}
.dashboard-alert-row b,
.dashboard-alert-row small {
    grid-column: 2 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.dashboard-alert-row b {
    align-self: end !important;
    white-space: nowrap !important;
}
.dashboard-alert-row small {
    align-self: start !important;
    white-space: normal !important;
}

.collection-status-card,
.dashboard-alerts-card { min-height: 350px !important; }
.collection-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}
.collection-grid button {
    min-width: 0 !important;
    min-height: 118px !important;
    align-content: start !important;
    gap: 8px !important;
    overflow: hidden !important;
}
.collection-grid button span {
    min-height: 0 !important;
    line-height: 1.28 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}
.collection-grid button strong {
    min-width: 0 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.collection-cheque-card small {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.income-summary-grid small:empty { display: none !important; }
.chart-plot {
    grid-auto-columns: minmax(0, 1fr) !important;
    gap: clamp(7px, 1.1vw, 18px) !important;
}
.chart-label { font-size: 10px !important; }
.chart-bar { width: clamp(12px, 1.6vw, 30px) !important; }

@media (max-width: 1500px) {
    .recent-transaction-row.transaction-strip-row {
        grid-template-columns: 30px minmax(118px, .7fr) minmax(180px, 1.3fr) 112px 116px !important;
        gap: 10px !important;
    }
}

@media (max-width: 900px) {
    .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Quick actions v2: isolated layout, no nested text pills. */
.dashboard-page .quick-actions-card .quick-actions-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
}

.dashboard-page .quick-actions-card .quick-actions-grid > * {
    min-width: 0 !important;
}

.dashboard-page .quick-actions-card .quick-action-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 92px !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 14px !important;
    padding: 16px 18px !important;
    border: 1px solid #dfe9e4 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #10251d !important;
    text-decoration: none !important;
    overflow: visible !important;
}

.dashboard-page .quick-actions-card .quick-action-card:hover {
    border-color: #9fcfbd !important;
    background: #f8fcfa !important;
    box-shadow: 0 6px 18px rgba(8, 89, 62, .08) !important;
    transform: translateY(-1px) !important;
}

.dashboard-page .quick-actions-card .quick-action-card:focus-visible {
    outline: 3px solid rgba(15, 137, 96, .25) !important;
    outline-offset: 2px !important;
}

.dashboard-page .quick-actions-card .quick-action-icon {
    width: 52px !important;
    height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: #dff1e9 !important;
    color: #087a57 !important;
    opacity: 1 !important;
    flex: 0 0 52px !important;
}

.dashboard-page .quick-actions-card .quick-action-content {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.dashboard-page .quick-actions-card .quick-action-title,
.dashboard-page .quick-actions-card .quick-action-description {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 transparent !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    hyphens: none !important;
}

.dashboard-page .quick-actions-card .quick-action-title {
    margin: 0 0 5px !important;
    color: #10251d !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    overflow-wrap: normal !important;
}

.dashboard-page .quick-actions-card .quick-action-description {
    margin: 0 !important;
    color: #6b7e76 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    overflow-wrap: break-word !important;
}

@media (max-width: 1300px) {
    .dashboard-page .quick-actions-card .quick-actions-grid {
        grid-template-columns: 1fr !important;
    }
}

.recent-transactions-card .recent-transaction-row.transaction-strip-row {
    grid-template-columns: 30px minmax(120px, .75fr) minmax(220px, 1.45fr) 128px minmax(132px, auto) !important;
    align-items: center !important;
}

.recent-transactions-card .transaction-title,
.recent-transactions-card .transaction-subtitle,
.recent-transactions-card .transaction-date {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.kpi-detail-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(11, 30, 23, .56);
    backdrop-filter: blur(3px);
}

.kpi-detail-modal {
    width: min(560px, 100%);
    max-height: min(720px, calc(100vh - 48px));
    overflow: auto;
    padding: 28px;
    border: 1px solid #dbe7e1;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(5, 35, 25, .28);
}

.kpi-detail-modal > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.kpi-detail-modal > header span,
.kpi-detail-modal > header p { color: #6b7e76; }

.kpi-detail-modal > header h2 {
    margin: 4px 0;
    color: #10251d;
    font-size: 25px;
}

.kpi-detail-modal > header p { margin: 0; }

.kpi-detail-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: #edf6f2;
    color: #0b7656;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.kpi-detail-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #e7f5ef;
    color: #0a694e;
}

.kpi-detail-summary strong { font-size: 24px; }

.kpi-detail-table {
    overflow: hidden;
    border: 1px solid #e1ebe6;
    border-radius: 16px;
}

.kpi-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    gap: 16px;
    padding: 15px 18px;
    border-bottom: 1px solid #e8efec;
    color: #263c34;
}

.kpi-detail-row:last-child { border-bottom: 0; }
.kpi-detail-row > :last-child { text-align: right; }

.kpi-detail-row.heading {
    background: #f5f8f7;
    color: #60736b;
    font-size: 13px;
    font-weight: 700;
}

.kpi-detail-empty {
    padding: 28px 18px;
    color: #6b7e76;
    text-align: center;
}

@media (max-width: 600px) {
    .kpi-detail-modal-backdrop { padding: 12px; }
    .kpi-detail-modal { padding: 20px; border-radius: 18px; }
    .kpi-detail-row { grid-template-columns: minmax(0, 1fr) 110px; }
}