/* Global design-system alignment loaded after page styles */
:root {
    --color-warning: #c7923a;
    --color-warning-strong: #9f6d1f;
    --ds-page-bg: var(--color-bg);
    --ds-page-content-max-width: 1500px;
    --ds-page-gutter: 1.25rem;
    --ds-surface: var(--color-card-bg);
    --ds-surface-muted: var(--color-surface-2);
    --ds-surface-hover: var(--color-hover-bg);
    --ds-border: var(--color-border-subtle);
    --ds-focus-ring: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

html[data-theme="dark"],
html[data-bs-theme="dark"],
[data-theme="dark"] {
    --color-warning: #d6a84a;
    --color-warning-strong: #f0c663;
}

html,
body {
    background: var(--ds-page-bg) !important;
    color: var(--color-text-dark) !important;
}

body {
    background-image: none !important;
}

/* Surfaces shared by every app page */
.card,
.dashboard-card,
.modal-content,
.dropdown-menu,
.offcanvas,
.app-page-header,
.app-desktop-topbar,
.mobile-topbar,
.mobile-bottom-nav,
.table-responsive,
.dashboard-scope-toolbar,
.dashboard-overview-card,
.dashboard-focus-card,
.dashboard-overview-metric,
.dashboard-overview-band,
.dashboard-focus-item,
.dashboard-space-tile,
.cashflow-page-summary-card,
.cashflow-page-sidecard,
.cashflow-card,
.cashflow-breakdown-card,
.cashflow-chart-shell,
.cashflow-distribution-blocks-panel,
.calendar-topbar,
.calendar-nav-panel,
.calendar-filter-panel,
.calendar-month-pill,
.calendar-filter-summary,
.calendar-main-card,
.calendar-total-card,
.calendar-empty-month-card,
.balance-projection-hero,
.projection-kpi-card,
.projection-account-card,
.projection-table-wrap,
.projection-selected-summary,
.projection-compact-shell,
.projection-compact-main,
.projection-compact-side,
.projection-chart-shell,
.projection-table-shell,
.accounts-summary-card,
.account-stat-card,
.commitments-panel,
.commitments-focus-card,
.commitments-kpi-card,
.commitments-empty,
.transactions-topbar,
.transactions-actions-panel,
.transactions-search-panel,
.transactions-filter-panel,
.transactions-inline-filters,
.transactions-results-card {
    background: var(--ds-surface) !important;
    border-color: var(--ds-border) !important;
    color: var(--color-text-dark) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Page headers need their own inner spacing now that they share card surfaces. */
.app-page-header {
    box-sizing: border-box;
    padding: 1rem 1.15rem !important;
    border-radius: 12px !important;
}

.balance-projection-hero .card-body {
    padding: 1rem 1.15rem !important;
}

.app-page-header__main,
.app-page-header__actions {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .app-page-header,
    .balance-projection-hero .card-body {
        padding: 0.85rem !important;
    }
}

.card-header,
.card-footer,
.card-header-custom,
.modal-header,
.modal-footer,
.cashflow-card__header,
.calendar-main-header,
.projection-table thead,
.table thead,
thead.bg-light {
    background: var(--ds-surface) !important;
    border-color: var(--ds-border) !important;
    color: var(--color-text-dark) !important;
}

.bg-white,
.bg-light,
.bg-body,
.table-light,
.bg-dark.bg-opacity-10,
.transactions-modal-shell .bg-light,
.transactions-modal-shell .bg-white {
    background: var(--ds-surface-muted) !important;
    color: var(--color-text-dark) !important;
    border-color: var(--ds-border) !important;
}

.surface-1 {
    background: var(--ds-surface) !important;
}

.surface-2,
.surface-3 {
    background: var(--ds-surface-muted) !important;
}

/* Inputs, selects and input groups */
.form-control,
.form-select,
textarea.form-control,
.input-group-text,
.form-control.bg-light,
.form-select.bg-light,
.form-control.bg-white,
.form-select.bg-white,
.form-control.border-0,
.form-select.border-0 {
    background-color: var(--ds-surface-muted) !important;
    border: 1px solid var(--ds-border) !important;
    color: var(--color-text-dark) !important;
    box-shadow: var(--shadow-inset) !important;
}

.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 0.72;
}

.form-control:hover,
.form-select:hover {
    border-color: color-mix(in srgb, var(--color-primary) 24%, var(--ds-border)) !important;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--ds-surface) !important;
    border-color: color-mix(in srgb, var(--color-primary) 44%, var(--ds-border)) !important;
    color: var(--color-text-dark) !important;
    box-shadow: 0 0 0 0.18rem var(--ds-focus-ring), var(--shadow-inset) !important;
}

.input-group {
    background: var(--ds-surface-muted) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-inset) !important;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text,
.input-group > .btn {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.input-group:focus-within {
    border-color: color-mix(in srgb, var(--color-primary) 44%, var(--ds-border)) !important;
    box-shadow: 0 0 0 0.18rem var(--ds-focus-ring), var(--shadow-inset) !important;
}

.form-check-input {
    background-color: var(--ds-surface) !important;
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-inset) !important;
}

.form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Buttons */
.btn {
    box-shadow: none !important;
}

.btn-primary,
.btn-check:checked + .btn-outline-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-check:checked + .btn-outline-primary:hover,
.btn-check:checked + .btn-outline-primary:focus {
    background: var(--color-primary-strong) !important;
    border-color: var(--color-primary-strong) !important;
    color: #fff !important;
}

.btn-light,
.btn-white,
.btn-secondary,
.btn-outline-secondary,
.btn-outline-light {
    background: var(--ds-surface) !important;
    border-color: var(--ds-border) !important;
    color: var(--color-text-dark) !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-white:hover,
.btn-white:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-light:hover,
.btn-outline-light:focus {
    background: var(--ds-surface-hover) !important;
    border-color: color-mix(in srgb, var(--color-primary) 24%, var(--ds-border)) !important;
    color: var(--color-text-dark) !important;
}

.btn-outline-primary {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--ds-surface)) !important;
    border-color: color-mix(in srgb, var(--color-primary) 26%, var(--ds-border)) !important;
    color: var(--color-primary-strong) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.btn-success {
    background: var(--color-revenu) !important;
    border-color: var(--color-revenu) !important;
    color: #fff !important;
}

.btn-danger {
    background: var(--color-depense) !important;
    border-color: var(--color-depense) !important;
    color: #fff !important;
}

.btn-warning {
    background: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
    color: #17212f !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background: var(--color-warning-strong) !important;
    border-color: var(--color-warning-strong) !important;
}

.btn-outline-danger {
    background: color-mix(in srgb, var(--color-depense) 8%, var(--ds-surface)) !important;
    border-color: color-mix(in srgb, var(--color-depense) 24%, var(--ds-border)) !important;
    color: var(--color-depense) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background: var(--color-depense) !important;
    border-color: var(--color-depense) !important;
    color: #fff !important;
}

.btn-link {
    color: var(--color-primary-strong) !important;
}

.btn-link:hover,
.btn-link:focus {
    background: var(--ds-surface-hover) !important;
    color: var(--color-text-dark) !important;
}

/* Bootstrap color utilities normalized to the app palette */
.text-primary { color: var(--color-primary-strong) !important; }
.text-success { color: var(--color-revenu) !important; }
.text-danger { color: var(--color-depense) !important; }
.text-warning { color: var(--color-warning-strong) !important; }
.text-info { color: var(--color-secondary) !important; }
.text-secondary,
.text-muted { color: var(--color-text-muted) !important; }
.text-dark { color: var(--color-text-dark) !important; }

.bg-primary,
.text-bg-primary {
    background: var(--color-primary) !important;
    color: #fff !important;
}

.bg-secondary,
.text-bg-secondary {
    background: color-mix(in srgb, var(--color-text-muted) 18%, var(--ds-surface)) !important;
    color: var(--color-text-dark) !important;
}

.bg-success,
.text-bg-success {
    background: var(--color-revenu) !important;
    color: #fff !important;
}

.bg-danger,
.text-bg-danger {
    background: var(--color-depense) !important;
    color: #fff !important;
}

.bg-warning,
.text-bg-warning {
    background: color-mix(in srgb, var(--color-warning) 16%, var(--ds-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--color-warning) 30%, var(--ds-border)) !important;
    color: var(--color-warning-strong) !important;
}

.bg-primary-subtle,
.border-primary-subtle,
.bg-info-subtle,
.border-info-subtle {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--ds-surface)) !important;
    border-color: color-mix(in srgb, var(--color-primary) 24%, var(--ds-border)) !important;
    color: var(--color-primary-strong) !important;
}

.bg-success-subtle,
.border-success-subtle {
    background: color-mix(in srgb, var(--color-revenu) 10%, var(--ds-surface)) !important;
    border-color: color-mix(in srgb, var(--color-revenu) 24%, var(--ds-border)) !important;
    color: var(--color-revenu) !important;
}

.bg-danger-subtle,
.border-danger-subtle {
    background: color-mix(in srgb, var(--color-depense) 10%, var(--ds-surface)) !important;
    border-color: color-mix(in srgb, var(--color-depense) 24%, var(--ds-border)) !important;
    color: var(--color-depense) !important;
}

.bg-warning-subtle,
.border-warning-subtle {
    background: color-mix(in srgb, var(--color-warning) 11%, var(--ds-surface)) !important;
    border-color: color-mix(in srgb, var(--color-warning) 26%, var(--ds-border)) !important;
    color: var(--color-warning-strong) !important;
}

.badge.bg-light,
.badge.bg-white,
.badge.text-bg-light {
    background: var(--ds-surface-muted) !important;
    border: 1px solid var(--ds-border) !important;
    color: var(--color-text-muted) !important;
}

/* Tables, pagination and menus */
.table {
    --bs-table-bg: var(--ds-surface);
    --bs-table-color: var(--color-text-dark);
    --bs-table-border-color: var(--ds-border);
    color: var(--color-text-dark) !important;
}

.table > :not(caption) > * > * {
    background-color: var(--bs-table-bg) !important;
    border-color: var(--ds-border) !important;
    color: var(--color-text-dark) !important;
}

.table thead th,
.table thead td {
    background: var(--ds-surface-muted) !important;
    color: var(--color-text-muted) !important;
}

.table-hover tbody tr:hover > * {
    background: var(--ds-surface-hover) !important;
}

.dropdown-item {
    color: var(--color-text-dark) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background: var(--ds-surface-hover) !important;
    color: var(--color-text-dark) !important;
}

.page-link {
    background: var(--ds-surface) !important;
    border-color: var(--ds-border) !important;
    color: var(--color-text-dark) !important;
}

.page-item.active .page-link {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* Page-specific controls that previously carried local palettes */
.calendar-nav-btn,
.calendar-today-btn,
.calendar-filter-button,
.projection-section-tabs .nav-link,
.projection-tabs-actions .btn,
.cashflow-month-nav .btn,
.cashflow-distribution-switch__btn,
.month-quick-btn,
.transactions-quick-btn,
.transactions-reset-btn,
.multi-filter .multi-filter-btn {
    background: var(--ds-surface) !important;
    border-color: var(--ds-border) !important;
    color: var(--color-text-dark) !important;
}

.projection-section-tabs .nav-link.active,
.cashflow-distribution-switch__btn[aria-pressed="true"],
.month-quick-btn.active {
    background: color-mix(in srgb, var(--color-primary) 11%, var(--ds-surface)) !important;
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--ds-border)) !important;
    color: var(--color-primary-strong) !important;
}

.calendar-nav-btn:hover,
.calendar-today-btn:hover,
.calendar-filter-button:hover,
.projection-section-tabs .nav-link:hover,
.cashflow-month-nav .btn:hover,
.cashflow-distribution-switch__btn:hover,
.month-quick-btn:hover,
.transactions-quick-btn:hover,
.transactions-reset-btn:hover,
.multi-filter .multi-filter-btn:hover {
    background: var(--ds-surface-hover) !important;
    border-color: color-mix(in srgb, var(--color-primary) 24%, var(--ds-border)) !important;
}

/* Quick month chips should stay simple, without hover/elevation effects. */
.transactions-month-picker .month-quick-btn,
.transactions-month-picker .month-quick-btn:hover,
.transactions-month-picker .month-quick-btn:focus,
.transactions-month-picker .month-quick-btn:active {
    box-shadow: none !important;
    transform: none !important;
}

.transactions-month-picker .month-quick-btn.btn-outline-secondary:hover,
.transactions-month-picker .month-quick-btn.btn-outline-secondary:focus {
    background: var(--ds-surface) !important;
    border-color: var(--ds-border) !important;
    color: var(--color-text-dark) !important;
}

.transactions-month-picker .month-quick-btn.btn-primary,
.transactions-month-picker .month-quick-btn.active,
.transactions-month-picker .month-quick-btn.btn-primary:hover,
.transactions-month-picker .month-quick-btn.btn-primary:focus,
.transactions-month-picker .month-quick-btn.active:hover,
.transactions-month-picker .month-quick-btn.active:focus {
    background: color-mix(in srgb, var(--color-primary) 11%, var(--ds-surface)) !important;
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--ds-border)) !important;
    color: var(--color-primary-strong) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Clear, compact date fields for the transaction period filter. */
.transactions-date-field {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 155px;
    min-height: 34px;
    margin: 0;
    padding: 0.16rem 0.5rem 0.16rem 0.62rem;
    border: 1px solid var(--ds-border) !important;
    border-radius: 999px;
    background: var(--ds-surface) !important;
    color: var(--color-text-dark) !important;
    box-shadow: none !important;
}

.transactions-date-field:focus-within {
    border-color: color-mix(in srgb, var(--color-primary) 36%, var(--ds-border)) !important;
    box-shadow: 0 0 0 0.14rem color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}

.transactions-date-field__label {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.transactions-date-field .filter-date-input {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--color-text-dark) !important;
    box-shadow: none !important;
}

.transactions-date-field .filter-date-input:focus {
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 767.98px) {
    .transactions-date-range {
        grid-column: span 2 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.28rem !important;
        min-height: auto !important;
        padding: 0.32rem !important;
    }

    .transactions-date-range__label,
    .transactions-date-range__sep {
        display: none !important;
    }

    .transactions-date-range__inputs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.35rem !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .transactions-date-field {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.08rem;
        width: 100%;
        min-width: 0 !important;
        min-height: 40px;
        padding: 0.3rem 0.42rem !important;
        border-radius: 10px;
    }

    .transactions-date-field__label {
        font-size: 0.58rem;
        letter-spacing: 0;
    }

    .transactions-date-field .filter-date-input {
        min-height: 20px !important;
        font-size: 0.72rem !important;
        line-height: 1.1;
        text-align: left;
    }
}

@media (max-width: 359.98px) {
    .transactions-date-range {
        grid-column: 1 / -1 !important;
    }

    .transactions-date-field .filter-date-input {
        font-size: 0.76rem !important;
    }
}

/* Shared logo previews: readable on both light and dark themes, including SVGs. */
:root {
    --app-logo-frame-bg: linear-gradient(135deg, #ffffff 0%, #eef2f7 100%);
    --app-logo-frame-border: rgba(148, 163, 184, 0.22);
    --app-logo-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
    --app-logo-image-filter: none;
    --app-logo-placeholder-color: color-mix(in srgb, var(--color-primary) 68%, var(--color-text-muted));
}

html[data-theme="dark"],
html[data-bs-theme="dark"],
[data-theme="dark"] {
    --app-logo-frame-bg: linear-gradient(135deg, #ffffff 0%, #e8edf4 100%);
    --app-logo-frame-border: rgba(255, 255, 255, 0.1);
    --app-logo-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    --app-logo-image-filter: none;
    --app-logo-placeholder-color: #64748b;
}

.app-logo-preview,
.transaction-title-cell__logo,
.transaction-account-cell__logo,
.calendar-event-item .event-logo-wrapper,
.projection-chart-detail-movement__logo,
.commitments-main-item__icon--logo,
.commitments-row__icon--logo,
.site-scope-account__logo,
.site-scope-selected-pill__logo {
    background: var(--app-logo-frame-bg) !important;
    border: 1px solid var(--app-logo-frame-border) !important;
    box-shadow: var(--app-logo-frame-shadow) !important;
    color: var(--app-logo-placeholder-color) !important;
    isolation: isolate;
    overflow: hidden;
}

.app-logo-preview {
    --app-logo-safe-size: 78%;
    aspect-ratio: 1;
}

.app-logo-preview--md {
    --app-logo-safe-size: 76%;
    width: 72px !important;
    height: 72px !important;
}

.app-logo-preview--lg {
    --app-logo-safe-size: 78%;
    width: 96px !important;
    height: 96px !important;
}

.transaction-title-cell__logo,
.calendar-event-item .event-logo-wrapper,
.projection-chart-detail-movement__logo,
.commitments-main-item__icon--logo,
.commitments-row__icon--logo,
.site-scope-account__logo {
    --app-logo-safe-size: 66%;
}

.transaction-title-cell__logo,
.transaction-account-cell__logo,
.calendar-event-item .event-logo-wrapper,
.projection-chart-detail-movement__logo,
.site-scope-selected-pill__logo {
    border-radius: 12px !important;
}

.commitments-main-item__icon--logo,
.commitments-row__icon--logo {
    border-radius: 14px !important;
}

.site-scope-account__logo {
    border-radius: 13px !important;
}

.transaction-account-cell__logo,
.site-scope-selected-pill__logo {
    --app-logo-safe-size: 64%;
    border-radius: 9px !important;
}

.transaction-title-cell__logo {
    --app-logo-safe-size: 78%;
}

.calendar-event-item .event-logo-wrapper,
.projection-chart-detail-movement__logo {
    --app-logo-safe-size: 72%;
}

.commitments-main-item__icon--logo {
    --app-logo-safe-size: 70%;
}

.commitments-row__icon--logo {
    --app-logo-safe-size: 68%;
}

.app-logo-preview img,
.transaction-title-cell__logo img,
.transaction-account-cell__logo img,
.calendar-event-item .event-logo-wrapper img,
.projection-chart-detail-movement__logo img,
.commitments-main-item__icon--logo img,
.commitments-row__icon--logo img,
.site-scope-account__logo img,
.site-scope-selected-pill__logo img {
    display: block;
    width: var(--app-logo-safe-size, 68%) !important;
    height: var(--app-logo-safe-size, 68%) !important;
    max-width: var(--app-logo-safe-size, 68%) !important;
    max-height: var(--app-logo-safe-size, 68%) !important;
    padding: 0 !important;
    object-fit: contain !important;
    background: transparent !important;
    filter: var(--app-logo-image-filter);
    box-sizing: border-box;
}

.app-logo-preview i {
    color: var(--app-logo-placeholder-color) !important;
}

.calendar-event-account__logo,
.account-bank-logo,
.transaction-mobile-bank-logo {
    display: inline-block;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    padding: 3px !important;
    border: 1px solid var(--app-logo-frame-border) !important;
    border-radius: 7px;
    background: var(--app-logo-frame-bg) !important;
    box-shadow: none !important;
    object-fit: contain !important;
    filter: var(--app-logo-image-filter);
    box-sizing: border-box;
    flex: 0 0 auto;
}

.account-bank-badge {
    background: color-mix(in srgb, var(--ds-surface-muted) 76%, var(--ds-surface)) !important;
    border-color: var(--ds-border) !important;
    color: var(--color-text-muted) !important;
}

.calendar-event-item .event-logo-wrapper.is-muted {
    filter: grayscale(100%);
    opacity: 0.7;
}

/* Shared fallback icon frames: use the same readable background as real logos. */
.calendar-event-item .event-icon-wrapper,
.calendar-chart-detail-movement__icon,
.projection-chart-detail-movement__icon,
.cashflow-chart-detail-movement__icon,
.commitments-main-item__icon:not(.commitments-main-item__icon--logo),
.commitments-row__icon:not(.commitments-row__icon--logo),
.commitments-category-card__top > span {
    background: var(--app-logo-frame-bg) !important;
    background-image: var(--app-logo-frame-bg) !important;
    border: 1px solid var(--app-logo-frame-border) !important;
    box-shadow: var(--app-logo-frame-shadow) !important;
    isolation: isolate;
    overflow: hidden;
}

/* Keep semantic charts/logos expressive, but make containers neutral */
.cashflow-distribution-empty,
.calendar-empty-month-card,
.projection-empty-state,
.commitments-empty,
.account-empty-state {
    background: var(--ds-surface-muted) !important;
    border-color: var(--ds-border) !important;
    color: var(--color-text-muted) !important;
}

/* Dark-mode polish for browser-native controls */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.78);
}

/* Transactions page: final premium palette alignment */
:root {
    --transactions-panel-bg: color-mix(in srgb, var(--color-card-bg) 94%, var(--color-surface-2));
    --transactions-inner-bg: color-mix(in srgb, var(--color-card-bg) 88%, var(--color-surface-2));
    --transactions-control-bg: color-mix(in srgb, var(--color-surface-2) 86%, var(--color-card-bg));
    --transactions-control-hover-bg: color-mix(in srgb, var(--color-primary) 6%, var(--color-card-bg));
    --transactions-primary-soft-bg: color-mix(in srgb, var(--color-primary) 10%, var(--color-card-bg));
    --transactions-primary-soft-border: color-mix(in srgb, var(--color-primary) 26%, var(--color-border-subtle));
}

html[data-theme="dark"],
html[data-bs-theme="dark"],
[data-theme="dark"] {
    --transactions-panel-bg: color-mix(in srgb, var(--color-card-bg) 92%, #0b1118);
    --transactions-inner-bg: color-mix(in srgb, var(--color-card-bg) 84%, var(--color-surface-2));
    --transactions-control-bg: color-mix(in srgb, var(--color-surface-2) 82%, #0b1118);
    --transactions-control-hover-bg: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-2));
    --transactions-primary-soft-bg: color-mix(in srgb, var(--color-primary) 13%, var(--color-card-bg));
    --transactions-primary-soft-border: color-mix(in srgb, var(--color-primary) 34%, var(--color-border-subtle));
}

.transactions-topbar,
.transactions-inline-filters,
.transactions-results-card,
.transactions-kpi .dashboard-card {
    background: var(--transactions-panel-bg) !important;
    border-color: var(--color-border-subtle) !important;
    color: var(--color-text-dark) !important;
    box-shadow: var(--shadow-sm) !important;
}

.transactions-actions-panel,
.transactions-search-panel,
.transactions-filter-panel,
.transactions-filter-row,
.transactions-filter-dialog .modal-content {
    background: var(--transactions-inner-bg) !important;
    border-color: var(--color-border-subtle) !important;
    color: var(--color-text-dark) !important;
    box-shadow: none !important;
}

.transactions-control-label,
.transactions-filter-hint,
.transactions-filter-launcher__hint,
.transactions-toggle-chip__hint,
.transactions-date-range__label,
.transactions-date-range__sep,
.transactions-filter-row__label,
.transaction-title-cell__subscription,
.transaction-account-cell__bank,
.transaction-secondary-category-chip {
    color: var(--color-text-muted) !important;
}

.transactions-control-label i,
.transactions-control-label .text-primary,
.transactions-date-range__label i,
.transactions-results-card .card-header-custom .bg-dark.bg-opacity-10 {
    color: var(--color-primary-strong) !important;
}

.transactions-search-box,
.transactions-filter-box,
.transactions-date-range,
.transactions-date-field,
.transactions-toggle-chip,
.multi-filter .multi-filter-btn,
.transactions-filter-form .filter-date-input,
#modalTransaction .form-control,
#modalTransaction .form-select,
#modalTransfer .form-control,
#modalTransfer .form-select {
    background: var(--transactions-control-bg) !important;
    border-color: var(--color-border-subtle) !important;
    color: var(--color-text-dark) !important;
    box-shadow: var(--shadow-inset) !important;
}

.transactions-search-box .input-group-text,
.transactions-search-box .form-control,
.transactions-search-box .btn,
.transactions-search-clear,
.transactions-search-help-btn,
.multi-filter .filter-summary,
.transactions-filter-form .filter-date-input::placeholder,
.transactions-search-box .form-control::placeholder {
    color: var(--color-text-muted) !important;
}

.transactions-search-box .input-group-text,
.transactions-search-box .form-control,
.transactions-search-box .btn {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.multi-filter-search {
    min-height: 38px;
    overflow: hidden;
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: 10px !important;
    background: var(--transactions-control-bg, var(--color-input-bg)) !important;
    box-shadow: var(--shadow-inset) !important;
}

.multi-filter-search .input-group-text,
.multi-filter-search .form-control {
    min-height: 36px;
    background: transparent !important;
    border-color: transparent !important;
    color: var(--color-text-dark) !important;
    box-shadow: none !important;
}

.multi-filter-search .input-group-text {
    width: 2.25rem;
    justify-content: center;
    color: var(--color-primary-strong) !important;
}

.multi-filter-search .form-control::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 0.78;
}

.multi-filter-search:focus-within {
    background: var(--transactions-control-hover-bg, var(--color-card-bg)) !important;
    border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border-subtle)) !important;
    box-shadow: 0 0 0 0.14rem color-mix(in srgb, var(--color-primary) 10%, transparent), var(--shadow-inset) !important;
}

.multi-filter-empty {
    color: var(--color-text-muted) !important;
}

.transactions-search-box:focus-within,
.transactions-date-range:focus-within,
.transactions-date-field:focus-within,
.transactions-toggle-chip:hover,
.transactions-toggle-chip:focus-within,
.multi-filter .multi-filter-btn:hover,
.multi-filter .multi-filter-btn:focus,
.transactions-filter-form .filter-date-input:focus {
    background: var(--transactions-control-hover-bg) !important;
    border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border-subtle)) !important;
    box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--color-primary) 12%, transparent), var(--shadow-inset) !important;
}

.transactions-actions-toolbar .transactions-add-btn.btn-primary,
.transactions-actions-toolbar .transactions-add-btn.btn-primary:hover,
.transactions-actions-toolbar .transactions-add-btn.btn-primary:focus,
.transactions-actions-toolbar .transactions-add-btn.btn-primary:active {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.transactions-actions-toolbar .transactions-add-btn.btn-primary:hover,
.transactions-actions-toolbar .transactions-add-btn.btn-primary:focus {
    background: var(--color-primary-strong) !important;
    border-color: var(--color-primary-strong) !important;
}

#btnExportFiltered,
#btnResetFilters,
.month-quick-btn.btn-outline-secondary,
.transactions-modal-shell .btn-light,
.transactions-modal-shell .btn-outline-secondary,
.transactions-secondary-reset {
    background: var(--color-card-bg) !important;
    border-color: var(--color-border-subtle) !important;
    color: var(--color-text-dark) !important;
    box-shadow: none !important;
}

#btnExportFiltered:hover,
#btnExportFiltered:focus,
#btnResetFilters:hover,
#btnResetFilters:focus,
.month-quick-btn.btn-outline-secondary:hover,
.month-quick-btn.btn-outline-secondary:focus,
.transactions-modal-shell .btn-light:hover,
.transactions-modal-shell .btn-light:focus,
.transactions-modal-shell .btn-outline-secondary:hover,
.transactions-modal-shell .btn-outline-secondary:focus,
.transactions-secondary-reset:hover,
.transactions-secondary-reset:focus {
    background: var(--color-hover-bg) !important;
    border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border-subtle)) !important;
    color: var(--color-text-dark) !important;
}

.transactions-month-picker .month-quick-btn.btn-primary,
.transactions-month-picker .month-quick-btn.active {
    background: var(--transactions-primary-soft-bg) !important;
    border-color: var(--transactions-primary-soft-border) !important;
    color: var(--color-primary-strong) !important;
    box-shadow: none !important;
}

.transactions-toggle-chip .form-check-input {
    background-color: var(--color-card-bg) !important;
    border-color: var(--color-border) !important;
}

.transactions-toggle-chip .form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.transactions-kpi .dashboard-card {
    border-left-width: 4px !important;
}

.transactions-kpi .dashboard-card.border-success {
    border-left-color: var(--color-revenu) !important;
}

.transactions-kpi .dashboard-card.border-danger {
    border-left-color: var(--color-depense) !important;
}

.transactions-kpi .dashboard-card.border-primary {
    border-left-color: var(--color-primary) !important;
}

.transactions-kpi .dashboard-card i {
    color: currentColor !important;
    opacity: 0.22 !important;
}

.transactions-results-card .card-header-custom,
.transactions-results-card > .table-responsive {
    background: var(--color-card-bg) !important;
    border-color: var(--color-border-subtle) !important;
}

.transactions-results-card .card-header-custom .bg-dark.bg-opacity-10 {
    background: var(--transactions-primary-soft-bg) !important;
    border: 1px solid var(--transactions-primary-soft-border) !important;
}

#dataTable {
    --bs-table-bg: var(--color-card-bg);
    --bs-table-color: var(--color-text-dark);
    --bs-table-border-color: var(--color-border-subtle);
}

#dataTable thead th {
    background: var(--color-surface-2) !important;
    color: var(--color-text-muted) !important;
    border-color: var(--color-border-subtle) !important;
}

#dataTable tbody tr > * {
    background: var(--color-card-bg) !important;
    color: var(--color-text-dark) !important;
    border-color: var(--color-border-subtle) !important;
}

#dataTable tbody tr:hover > * {
    background: var(--color-hover-bg) !important;
}

#dataTable .is-archived-row > * {
    background: color-mix(in srgb, var(--color-text-muted) 8%, var(--color-card-bg)) !important;
}

.transaction-title-cell__logo,
.transaction-account-cell,
.transaction-account-cell__logo,
.transactions-logo-preview,
.transactions-account-preview,
.transactions-wizard-recap__item {
    border-color: var(--color-border-subtle) !important;
    background: color-mix(in srgb, var(--color-surface-2) 76%, var(--color-card-bg)) !important;
    color: var(--color-text-dark) !important;
}

.transaction-account-cell {
    background: color-mix(in srgb, var(--transaction-account-color, var(--color-primary)) 9%, var(--color-card-bg)) !important;
    border-color: color-mix(in srgb, var(--transaction-account-color, var(--color-primary)) 22%, var(--color-border-subtle)) !important;
}

.transaction-title-cell__logo {
    background: var(--app-logo-frame-bg) !important;
    color: var(--app-logo-placeholder-color) !important;
}

.transaction-account-cell__logo {
    background: var(--app-logo-frame-bg) !important;
    color: var(--transaction-account-color, var(--color-primary)) !important;
}

#modalTransaction .transactions-modal-shell,
#modalTransfer .transactions-modal-shell,
#modalTransaction .transactions-modal-header,
#modalTransfer .transactions-modal-header,
#modalTransaction .transactions-modal-footer,
#modalTransfer .transactions-modal-footer {
    background: var(--color-card-bg) !important;
    border-color: var(--color-border-subtle) !important;
    color: var(--color-text-dark) !important;
}

#modalTransaction .transactions-modal-panel,
#modalTransfer .transactions-modal-panel,
.transactions-secondary-category-block,
.transactions-modal-flow,
.transactions-wizard-recap,
.transactions-logo-preview,
.transactions-account-preview,
.transactions-review-note,
.transactions-period-help,
#modalTransfer .transactions-transfer-alert {
    background: var(--transactions-inner-bg) !important;
    border-color: var(--color-border-subtle) !important;
    color: var(--color-text-muted) !important;
    box-shadow: var(--shadow-inset) !important;
}

.transactions-modal-panel__title,
.transactions-modal-subtitle,
.transactions-secondary-category-header small,
.transactions-modal-shell .form-text,
.transactions-modal-shell .form-label,
.transactions-wizard-recap__title,
.transactions-wizard-recap__label,
.transactions-wizard-recap__detail {
    color: var(--color-text-muted) !important;
}

.transactions-modal-panel__title .text-primary,
.transactions-modal-panel__title .text-warning,
.transactions-modal-shell .modal-title .text-warning,
.transactions-period-help i,
#modalTransfer .transactions-transfer-alert i,
#calcPreview,
#transferCalcPreview {
    color: var(--color-primary-strong) !important;
}

.transactions-modal-switch-btn,
.category-option__label,
.secondary-category-option__label,
.transactions-modal-flow__item,
.transactions-wizard-recap__item {
    background: var(--color-card-bg) !important;
    border-color: var(--color-border-subtle) !important;
    color: var(--color-text-dark) !important;
    box-shadow: none !important;
}

.transactions-modal-switch-btn:hover,
.transactions-modal-switch-btn:focus,
.category-option__label:hover,
.secondary-category-option__label:hover,
.transactions-modal-flow__item:hover,
.transactions-modal-flow__item:focus,
.transactions-wizard-recap__item:hover,
.transactions-wizard-recap__item:focus {
    background: var(--color-hover-bg) !important;
    border-color: color-mix(in srgb, var(--color-primary) 26%, var(--color-border-subtle)) !important;
}

.transactions-modal-switch-btn.is-success.is-active {
    background: color-mix(in srgb, var(--color-revenu) 12%, var(--color-card-bg)) !important;
    border-color: color-mix(in srgb, var(--color-revenu) 30%, var(--color-border-subtle)) !important;
    color: var(--color-revenu) !important;
}

.transactions-modal-switch-btn.is-primary.is-active {
    background: color-mix(in srgb, var(--color-depense) 12%, var(--color-card-bg)) !important;
    border-color: color-mix(in srgb, var(--color-depense) 30%, var(--color-border-subtle)) !important;
    color: var(--color-depense) !important;
}

.transactions-modal-switch-btn.is-warning.is-active,
.transactions-modal-flow__item.is-current,
.transactions-step-badge,
.transactions-category-selected,
.transactions-secondary-counter {
    background: var(--transactions-primary-soft-bg) !important;
    border-color: var(--transactions-primary-soft-border) !important;
    color: var(--color-primary-strong) !important;
}

.transactions-modal-shell .btn-check:checked + .category-option__label,
.transactions-modal-shell .btn-check:checked + .secondary-category-option__label {
    background: var(--transactions-primary-soft-bg) !important;
    border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border-subtle)) !important;
    color: var(--color-primary-strong) !important;
    box-shadow: 0 0 0 0.14rem color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}

#transferSubmitBtn,
#transferWizardNext.btn-warning {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

#transferSubmitBtn:hover,
#transferSubmitBtn:focus,
#transferWizardNext.btn-warning:hover,
#transferWizardNext.btn-warning:focus {
    background: var(--color-primary-strong) !important;
    border-color: var(--color-primary-strong) !important;
    color: #fff !important;
}

/* Transactions: keep the primary quick action visually flat and free of text artifacts. */
.transactions-actions-toolbar .transactions-add-btn.btn-primary,
.transactions-actions-toolbar .transactions-add-btn.btn-primary:hover,
.transactions-actions-toolbar .transactions-add-btn.btn-primary:focus,
.transactions-actions-toolbar .transactions-add-btn.btn-primary:active {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary) !important;
    color: #fff !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.transactions-actions-toolbar .transactions-add-btn.btn-primary::before,
.transactions-actions-toolbar .transactions-add-btn.btn-primary::after {
    display: none !important;
    content: none !important;
}

.transactions-actions-toolbar .transactions-add-btn.btn-primary:hover,
.transactions-actions-toolbar .transactions-add-btn.btn-primary:focus {
    background: var(--color-primary-strong) !important;
    border-color: var(--color-primary-strong) !important;
    border-bottom-color: var(--color-primary-strong) !important;
}

/* Transactions: clearer final recap presentation. */
#modalTransaction .transactions-wizard-recap,
#modalTransfer .transactions-wizard-recap {
    gap: 0.75rem !important;
    padding: 0.8rem !important;
    border-radius: 1rem !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 34%),
        var(--transactions-inner-bg) !important;
}

#modalTransaction .transactions-wizard-recap__title,
#modalTransfer .transactions-wizard-recap__title {
    color: var(--color-text-dark) !important;
    font-size: 0.76rem !important;
}

#modalTransaction .transactions-wizard-recap__items,
#modalTransfer .transactions-wizard-recap__items {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 0.65rem !important;
    align-items: stretch !important;
}

#modalTransaction .transactions-wizard-recap__item,
#modalTransfer .transactions-wizard-recap__item {
    position: relative !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
    min-height: 118px !important;
    padding: 0.72rem 0.78rem !important;
    border-radius: 0.85rem !important;
    background: color-mix(in srgb, var(--color-surface-2) 82%, var(--color-card-bg)) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent) !important;
}

#modalTransaction .transactions-wizard-recap__item--featured,
#modalTransfer .transactions-wizard-recap__item--featured {
    grid-column: span 2 !important;
    min-height: 132px !important;
    border-color: color-mix(in srgb, var(--color-primary) 44%, var(--color-border-subtle)) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 58%),
        color-mix(in srgb, var(--color-primary) 10%, var(--color-card-bg)) !important;
}

#modalTransaction .transactions-wizard-recap__item:hover,
#modalTransaction .transactions-wizard-recap__item:focus-visible,
#modalTransfer .transactions-wizard-recap__item:hover,
#modalTransfer .transactions-wizard-recap__item:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 58%, var(--color-border-subtle)) !important;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-card-bg)) !important;
    box-shadow: 0 0 0 0.14rem color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
    outline: 0 !important;
}

#modalTransaction .transactions-wizard-recap__icon,
#modalTransfer .transactions-wizard-recap__icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 0.75rem !important;
    background: color-mix(in srgb, var(--color-primary) 13%, var(--color-card-bg)) !important;
    color: var(--color-primary-strong) !important;
    font-size: 1rem !important;
}

#modalTransaction .transactions-wizard-recap__item--featured .transactions-wizard-recap__icon,
#modalTransfer .transactions-wizard-recap__item--featured .transactions-wizard-recap__icon {
    background: color-mix(in srgb, var(--color-primary) 24%, var(--color-card-bg)) !important;
}

#modalTransaction .transactions-wizard-recap__body,
#modalTransfer .transactions-wizard-recap__body {
    gap: 0.18rem !important;
    padding-right: 4.6rem !important;
}

#modalTransaction .transactions-wizard-recap__label,
#modalTransfer .transactions-wizard-recap__label {
    color: var(--color-text-muted) !important;
    font-size: 0.62rem !important;
    line-height: 1.1 !important;
    white-space: normal !important;
}

#modalTransaction .transactions-wizard-recap__value,
#modalTransfer .transactions-wizard-recap__value {
    color: var(--color-text-dark) !important;
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
    overflow: visible !important;
    text-overflow: initial !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

#modalTransaction .transactions-wizard-recap__item--featured .transactions-wizard-recap__value,
#modalTransfer .transactions-wizard-recap__item--featured .transactions-wizard-recap__value {
    font-size: 1.02rem !important;
}

#modalTransaction .transactions-wizard-recap__details,
#modalTransfer .transactions-wizard-recap__details {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)) !important;
    gap: 0.34rem !important;
    margin-top: 0.44rem !important;
}

#modalTransaction .transactions-wizard-recap__detail,
#modalTransfer .transactions-wizard-recap__detail {
    display: grid !important;
    gap: 0.08rem !important;
    min-width: 0 !important;
    padding: 0.32rem 0.42rem !important;
    border: 1px solid color-mix(in srgb, var(--color-border-subtle) 76%, transparent) !important;
    border-radius: 0.55rem !important;
    background: color-mix(in srgb, var(--color-card-bg) 72%, transparent) !important;
    color: var(--color-text-muted) !important;
    line-height: 1.2 !important;
    overflow: visible !important;
    text-overflow: initial !important;
    white-space: normal !important;
}

#modalTransaction .transactions-wizard-recap__detail-label,
#modalTransfer .transactions-wizard-recap__detail-label {
    color: var(--color-text-muted) !important;
    font-size: 0.58rem !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
}

#modalTransaction .transactions-wizard-recap__detail-value,
#modalTransfer .transactions-wizard-recap__detail-value {
    color: var(--color-text-dark) !important;
    font-size: 0.73rem !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
}

#modalTransaction .transactions-wizard-recap__edit,
#modalTransfer .transactions-wizard-recap__edit {
    position: absolute !important;
    top: 0.58rem !important;
    right: 0.62rem !important;
    gap: 0.28rem !important;
    margin: 0 !important;
    padding: 0.22rem 0.42rem !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--color-primary) 11%, var(--color-card-bg)) !important;
    color: var(--color-primary-strong) !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
}

#modalTransaction .transactions-review-note,
#modalTransfer .transactions-review-note {
    padding: 0.66rem 0.78rem !important;
    border-style: dashed !important;
    background: color-mix(in srgb, var(--color-primary) 6%, var(--transactions-inner-bg)) !important;
}

@media (max-width: 991.98px) {
    #modalTransaction .transactions-wizard-recap__items,
    #modalTransfer .transactions-wizard-recap__items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #modalTransaction .transactions-wizard-recap,
    #modalTransfer .transactions-wizard-recap {
        padding: 0.65rem !important;
    }

    #modalTransaction .transactions-wizard-recap__item,
    #modalTransfer .transactions-wizard-recap__item {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        grid-column: auto !important;
        min-height: 0 !important;
        padding: 0.62rem !important;
    }

    #modalTransaction .transactions-wizard-recap__items,
    #modalTransfer .transactions-wizard-recap__items {
        grid-template-columns: 1fr !important;
    }

    #modalTransaction .transactions-wizard-recap__icon,
    #modalTransfer .transactions-wizard-recap__icon {
        width: 34px !important;
        height: 34px !important;
    }

    #modalTransaction .transactions-wizard-recap__body,
    #modalTransfer .transactions-wizard-recap__body {
        padding-right: 0 !important;
    }

    #modalTransaction .transactions-wizard-recap__edit,
    #modalTransfer .transactions-wizard-recap__edit {
        position: static !important;
        margin-top: 0.42rem !important;
    }
}

/* Transactions: align the main page chrome with the shared app surfaces. */
.transactions-page-header {
    display: grid !important;
    gap: 0.65rem !important;
    margin-bottom: 1rem !important;
}

.transactions-page-header .app-page-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding: 0.85rem 1rem !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 12px !important;
    background: var(--ds-surface) !important;
    box-shadow: var(--shadow-sm) !important;
}

.transactions-page-header .app-page-header__main {
    display: grid !important;
    gap: 0.28rem !important;
    min-width: 0 !important;
}

.transactions-page-header .app-page-header__eyebrow,
.transactions-page-header .app-page-header__subtitle {
    display: none !important;
}

.transactions-page-header .app-page-header__title-row {
    position: static !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    border: 0 !important;
}

.transactions-page-header .app-page-header__title {
    font-size: 1.08rem !important;
    line-height: 1.12 !important;
}

.transactions-page-header .app-page-header__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    margin-top: 0 !important;
}

.transactions-page-header .app-page-header__pill {
    min-height: 1.7rem !important;
    padding: 0.22rem 0.55rem !important;
    border-radius: 999px !important;
    font-size: 0.74rem !important;
}

.transactions-page-header .app-page-header__actions {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-left: auto !important;
    padding-top: 0 !important;
}

.transactions-page-header .app-page-header__actions .btn,
.transactions-actions-toolbar .transactions-quick-btn,
#btnResetFilters {
    border-radius: 999px !important;
}

.transactions-topbar,
.transactions-inline-filters,
.transactions-results-card {
    border: 1px solid var(--ds-border) !important;
    border-radius: 12px !important;
    background: var(--ds-surface) !important;
    box-shadow: var(--shadow-sm) !important;
}

.transactions-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.7rem !important;
}

.transactions-search-panel,
.transactions-actions-panel {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.transactions-search-panel {
    order: 1 !important;
}

.transactions-actions-panel {
    order: 2 !important;
    min-width: max-content !important;
}

.transactions-topbar .transactions-control-label,
.transactions-filter-hint {
    display: none !important;
}

.transactions-search-box {
    min-height: 40px !important;
    border-radius: 10px !important;
}

.transactions-search-box .input-group-text,
.transactions-search-box .form-control,
.transactions-search-box .btn,
.transactions-actions-toolbar .transactions-quick-btn {
    min-height: 40px !important;
}

.transactions-actions-toolbar {
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
}

.transactions-inline-filters {
    --transactions-filter-height: 36px;
    padding: 0.72rem !important;
}

.transactions-inline-filters__header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.75rem !important;
    min-height: var(--transactions-filter-height) !important;
    margin-bottom: 0.55rem !important;
}

.transactions-inline-filters__header > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    min-width: 0 !important;
}

.transactions-inline-filters .transactions-control-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    min-height: 1.65rem !important;
    margin: 0 !important;
    padding: 0.24rem 0.54rem !important;
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--ds-border)) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--color-primary) 8%, var(--ds-surface)) !important;
    color: var(--color-primary-strong) !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
}

.transactions-inline-filters__title {
    margin: 0 !important;
    color: var(--color-text-dark) !important;
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.transactions-filter-row,
.transactions-date-range,
.transactions-toggle-chip,
.transactions-month-picker__control .custom-date-picker__button,
.transactions-month-picker__input,
.transactions-month-picker .month-quick-btn {
    border-color: var(--ds-border) !important;
    background: var(--ds-surface-muted) !important;
    color: var(--color-text-dark) !important;
    box-shadow: none !important;
}

.transactions-filter-row {
    border-radius: 10px !important;
}

.transactions-filter-row__label,
.transactions-date-range__label,
.transactions-toggle-chip__hint,
.transactions-month-picker > span {
    color: var(--color-text-muted) !important;
}

.transactions-kpi {
    margin-bottom: 1rem !important;
}

.transactions-kpi.row {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
}

.transactions-kpi .dashboard-card {
    min-height: 72px !important;
    padding: 0.78rem 0.9rem !important;
    border: 1px solid var(--ds-border) !important;
    border-left-width: 4px !important;
    border-radius: 12px !important;
    background: var(--ds-surface) !important;
    box-shadow: var(--shadow-sm) !important;
}

.transactions-kpi .text-xs {
    color: var(--color-text-muted) !important;
    font-size: 0.67rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

.transactions-kpi .h5 {
    color: var(--color-text-dark) !important;
    font-size: 1.08rem !important;
    line-height: 1.12 !important;
}

.transactions-kpi .h5.text-success {
    color: var(--color-revenu) !important;
}

.transactions-kpi .h5.text-danger {
    color: var(--color-depense) !important;
}

.transactions-kpi .dashboard-card.border-success .h5,
.transactions-kpi .dashboard-card.border-success i {
    color: var(--color-revenu) !important;
}

.transactions-kpi .dashboard-card.border-danger .h5,
.transactions-kpi .dashboard-card.border-danger i {
    color: var(--color-depense) !important;
}

.transactions-kpi .dashboard-card.border-primary i {
    color: var(--color-primary-strong) !important;
}

.transactions-results-card {
    overflow: hidden !important;
}

.transactions-results-card:hover,
.transactions-kpi .dashboard-card:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
}

.transactions-results-card .card-header-custom {
    min-height: 52px !important;
    padding: 0.78rem 0.95rem !important;
    background: var(--ds-surface) !important;
    border-bottom: 1px solid var(--ds-border) !important;
}

.transactions-results-card .card-header-custom .bg-dark.bg-opacity-10 {
    border-radius: 8px !important;
    background: color-mix(in srgb, var(--color-primary) 9%, var(--ds-surface-muted)) !important;
    color: var(--color-primary-strong) !important;
}

.transactions-results-card .table-responsive {
    padding: 0 !important;
    background: var(--ds-surface) !important;
}

#dataTable {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

#dataTable thead th {
    padding: 0.64rem 0.75rem !important;
    border-radius: 0 !important;
    background: var(--ds-surface-muted) !important;
    color: var(--color-text-muted) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

#dataTable .transaction-row td {
    padding-top: 0.68rem !important;
    padding-bottom: 0.68rem !important;
    border-top: 1px solid var(--ds-border) !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: var(--ds-surface) !important;
    box-shadow: none !important;
}

#dataTable .transaction-row td:first-child {
    box-shadow: inset 3px 0 0 var(--transaction-row-color, var(--color-primary)) !important;
}

#dataTable .transaction-row td:not(:first-child)::before {
    display: none !important;
}

#dataTable .transaction-row:hover td {
    border-color: var(--ds-border) !important;
    background: color-mix(in srgb, var(--transaction-row-color, var(--color-primary)) 6%, var(--ds-surface)) !important;
    box-shadow: none !important;
}

.transaction-title-cell__logo,
.transaction-account-cell,
.transaction-date-chip,
.transaction-frequency-chip,
.transaction-actions,
.transaction-action-btn,
.mobile-inline-actions .transaction-action-btn {
    border-radius: 10px !important;
}

.transaction-amount {
    border-radius: 999px !important;
}

@media (min-width: 1200px) {
    .transactions-page-header .app-page-header {
        padding: 0.62rem 0.78rem !important;
    }

    .transactions-page-header .app-page-header__title {
        font-size: 1rem !important;
    }

    .transactions-topbar {
        padding: 0.55rem !important;
    }

    .transactions-inline-filters {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto auto !important;
        align-items: center !important;
        gap: 0.45rem !important;
        padding: 0.55rem !important;
    }

    .transactions-inline-filters__header {
        display: contents !important;
    }

    .transactions-inline-filters__header > div:first-child {
        order: 0 !important;
        min-width: 0 !important;
    }

    .transactions-inline-filters__title {
        display: none !important;
    }

    .transactions-filter-form {
        --transactions-filter-height: 32px;
        order: 1 !important;
    }

    .transactions-inline-filters .transactions-month-picker {
        order: 2 !important;
    }

    .transactions-inline-filters__actions {
        order: 3 !important;
    }

    .transactions-kpi .dashboard-card {
        min-height: 48px !important;
        padding: 0.48rem 0.65rem !important;
    }

    .transactions-kpi .dashboard-card > div:first-child {
        display: grid !important;
        gap: 0.12rem !important;
    }

    .transactions-kpi .h5 {
        font-size: 1rem !important;
    }

    .transactions-kpi .dashboard-card i {
        display: inline-flex !important;
        font-size: 1.28rem !important;
        opacity: 0.2 !important;
    }
}

@media (max-width: 1199.98px) {
    .transactions-topbar {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .transactions-actions-panel {
        min-width: 0 !important;
    }

    .transactions-actions-toolbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(110px, 0.45fr) !important;
    }
}

@media (max-width: 575.98px) {
    .transactions-page-header .app-page-header {
        align-items: flex-start !important;
        padding: 0.72rem !important;
    }

    .transactions-page-header .app-page-header__actions {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .transactions-page-header .app-page-header__actions .btn {
        width: 100% !important;
    }

    .transactions-actions-toolbar {
        grid-template-columns: 1fr !important;
    }

    .transactions-inline-filters {
        padding: 0.62rem !important;
    }
}

/* Transactions: flat controls and contained period filter. */
.transactions-page-header .app-page-header,
.transactions-topbar,
.transactions-inline-filters,
.transactions-results-card,
.transactions-kpi .dashboard-card {
    background: var(--ds-surface) !important;
    background-image: none !important;
}

.transactions-search-box,
.transactions-filter-box,
.transactions-date-range,
.transactions-date-field,
.transactions-toggle-chip,
.transactions-filter-form .multi-filter-btn,
.transactions-filter-form .form-control,
.transactions-filter-form .form-select,
.transactions-filter-form .filter-date-input,
.transactions-month-picker__control .custom-date-picker__button,
.transactions-month-picker__input,
.transactions-month-picker .month-quick-btn,
.transaction-title-cell__logo,
.transaction-account-cell,
.transaction-date-chip,
.transaction-frequency-chip,
.transaction-actions,
.transaction-action-btn,
.mobile-inline-actions .transaction-action-btn {
    background: var(--ds-surface-muted) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.transactions-search-box:focus-within,
.transactions-date-range:focus-within,
.transactions-date-field:focus-within,
.transactions-toggle-chip:hover,
.transactions-toggle-chip:focus-within,
.transactions-filter-form .multi-filter-btn:hover,
.transactions-filter-form .multi-filter-btn:focus,
.transactions-filter-form .filter-date-input:focus,
.transactions-month-picker__control .custom-date-picker__button:hover,
.transactions-month-picker__control .custom-date-picker__button:focus-visible {
    background: var(--ds-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.transactions-results-card #dataTable .transaction-title-cell__logo,
.transactions-results-card #dataTable .transaction-account-cell__logo,
.transactions-results-card #dataTable .transaction-category-icon,
.transactions-results-card #dataTable .transaction-mobile-category__icon {
    background: var(--app-logo-frame-bg) !important;
    background-image: var(--app-logo-frame-bg) !important;
    border-color: var(--app-logo-frame-border) !important;
    box-shadow: var(--app-logo-frame-shadow) !important;
}

.transactions-results-card #dataTable .transaction-title-cell__logo--category i,
.transactions-results-card #dataTable .transaction-category-icon i,
.transactions-results-card #dataTable .transaction-mobile-category__icon i {
    color: var(--transaction-category-color, var(--color-primary)) !important;
}

.transactions-date-range {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0.18rem 0.28rem !important;
}

.transactions-toggle-chip {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.transactions-toggle-chip__content,
.transactions-toggle-chip__title {
    min-width: 0 !important;
    overflow: hidden !important;
}

.transactions-toggle-chip__title {
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.transactions-date-range__label,
.transactions-date-range__sep {
    display: none !important;
}

.transactions-date-range__inputs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.28rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.transactions-date-field {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.32rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: var(--transactions-filter-height, 34px) !important;
    padding: 0.16rem 0.42rem !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}

.transactions-date-field__label {
    min-width: 0 !important;
    font-size: 0.58rem !important;
    letter-spacing: 0 !important;
}

.transactions-date-field .custom-date-picker,
.transactions-date-field .custom-date-picker__button,
.transactions-date-field .custom-date-picker__value {
    min-width: 0 !important;
    max-width: 100% !important;
}

.transactions-date-field .custom-date-picker__button {
    gap: 0.2rem !important;
    overflow: hidden !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    text-align: left !important;
}

.transactions-date-field .custom-date-picker__value {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.transaction-primary-category-chip,
.transaction-amount {
    background-image: none !important;
    box-shadow: none !important;
}

.transaction-primary-category-chip {
    border-color: color-mix(in srgb, var(--transaction-category-color, #6c757d) 28%, var(--ds-border)) !important;
    background: color-mix(in srgb, var(--transaction-category-color, #6c757d) 10%, var(--ds-surface)) !important;
    color: var(--transaction-category-color, #6c757d) !important;
}

.transaction-primary-category-chip__type {
    border-left-color: color-mix(in srgb, var(--transaction-category-color, #6c757d) 28%, transparent) !important;
}

.transaction-amount {
    border: 1px solid transparent !important;
    background: var(--ds-surface-muted) !important;
    color: var(--color-text-dark) !important;
}

.transaction-amount--income {
    border-color: color-mix(in srgb, var(--color-revenu, #198754) 24%, var(--ds-border)) !important;
    background: color-mix(in srgb, var(--color-revenu, #198754) 11%, var(--ds-surface)) !important;
    color: var(--color-revenu, #198754) !important;
}

.transaction-amount--expense {
    border-color: color-mix(in srgb, var(--color-depense, #dc3545) 22%, var(--ds-border)) !important;
    background: color-mix(in srgb, var(--color-depense, #dc3545) 8%, var(--ds-surface)) !important;
    color: var(--color-depense, #dc3545) !important;
}

@media (min-width: 1200px) {
    .transactions-filter-form {
        grid-template-columns:
            minmax(86px, 0.52fr)
            minmax(86px, 0.52fr)
            minmax(118px, 0.78fr)
            minmax(250px, 1.45fr)
            minmax(136px, 0.62fr) !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .transactions-toggle-chip__title-full {
        display: none !important;
    }

    .transactions-toggle-chip__title-short {
        display: inline !important;
    }
}

@media (max-width: 575.98px) {
    .transactions-date-range__inputs,
    .transactions-date-field {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .transactions-date-field {
        align-items: start !important;
    }
}

/* ================================================================
   Cohérence globale 2026 : entêtes, titres et hiérarchie des actions
   Cette couche finale neutralise les variantes historiques par page.
   ================================================================ */
:root {
    --ui-header-radius: 14px;
    --ui-control-radius: 10px;
    --ui-header-padding-x: 1.15rem;
    --ui-header-padding-y: 1rem;
    --ui-control-height: 40px;
    --ui-control-height-sm: 36px;
}

/* Un même conteneur d'entête pour toutes les familles de pages. */
.app-page-header,
.dashboard-overview__header.app-page-header,
.expenses-page__header.app-page-header {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 1rem 1.5rem !important;
    width: 100% !important;
    padding: var(--ui-header-padding-y) var(--ui-header-padding-x) !important;
    margin-bottom: 1rem !important;
    overflow: visible !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ui-header-radius) !important;
    background: var(--ds-surface) !important;
    background-image: none !important;
    box-shadow: var(--shadow-sm) !important;
}

.balance-projection-hero {
    overflow: visible !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ui-header-radius) !important;
    background: var(--ds-surface) !important;
    background-image: none !important;
    box-shadow: var(--shadow-sm) !important;
}

.balance-projection-hero .card-body {
    padding: var(--ui-header-padding-y) var(--ui-header-padding-x) !important;
}

.app-page-header::before,
.app-page-header::after,
.balance-projection-hero::before,
.balance-projection-hero::after {
    display: none !important;
}

.app-page-header .app-page-header__main,
.balance-projection-hero .app-page-header__main {
    flex: 1 1 34rem !important;
    min-width: 0 !important;
}

/* Les titres restent visibles sur ordinateur comme sur mobile. */
.app-page-header .app-page-header__eyebrow,
.balance-projection-hero .app-page-header__eyebrow,
.dashboard-overview__eyebrow,
.expenses-page__eyebrow,
.transactions-page-header .app-page-header__eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin: 0 0 0.3rem !important;
    color: var(--color-primary-strong) !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.app-page-header .app-page-header__title-row,
.balance-projection-hero .app-page-header__title-row,
.transactions-page-header .app-page-header__title-row {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    flex-wrap: wrap !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

.app-page-header .app-page-header__title,
.balance-projection-hero .app-page-header__title,
.dashboard-overview__header .app-page-header__title,
.expenses-page__header .app-page-header__title,
.transactions-page-header .app-page-header__title {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    border: 0 !important;
    color: var(--color-text-dark) !important;
    font-size: clamp(1.35rem, 1.5vw + 0.75rem, 1.7rem) !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.025em !important;
}

.app-page-header .app-page-header__title i,
.balance-projection-hero .app-page-header__title i {
    color: var(--color-primary) !important;
}

.app-page-header .app-page-header__subtitle,
.balance-projection-hero .app-page-header__subtitle,
.transactions-page-header .app-page-header__subtitle {
    display: block !important;
    max-width: 52rem !important;
    margin: 0.42rem 0 0 !important;
    color: var(--color-text-muted) !important;
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
}

.app-page-header .app-page-header__meta {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex-wrap: wrap !important;
    margin-top: 0.6rem !important;
}

.app-page-header .app-page-header__pill,
.balance-projection-hero .app-page-header__pill {
    min-height: 30px !important;
    padding: 0.3rem 0.62rem !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 999px !important;
    background: var(--ds-surface-muted) !important;
    color: var(--color-text-muted) !important;
    box-shadow: none !important;
    font-size: 0.78rem !important;
    font-weight: 650 !important;
}

.app-page-header .app-page-header__actions,
.balance-projection-hero .app-page-header__actions,
.expenses-page__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.55rem !important;
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    align-self: center !important;
    padding: 0 !important;
}

/* Action principale à droite sur ordinateur, en premier sur mobile. */
.app-page-header__actions > .btn-primary,
.expenses-page__actions > .btn-primary {
    order: 10;
}

/* Boutons : même hauteur, même rayon et états lisibles partout. */
.btn,
.btn.rounded-pill,
.rounded-pill.btn,
.btn-group .btn.rounded-pill {
    min-height: var(--ui-control-height) !important;
    border-radius: var(--ui-control-radius) !important;
    padding: 0.5rem 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-sm,
.btn.btn-sm {
    min-height: var(--ui-control-height-sm) !important;
    padding: 0.4rem 0.75rem !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
}

.app-page-header__actions .btn,
.balance-projection-hero__actions .btn,
.expenses-page__actions .btn,
.modal-footer .btn,
.professional-panel__footer .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    min-height: 42px !important;
    white-space: nowrap !important;
}

.btn:focus-visible,
.btn-check:focus-visible + .btn,
.app-page-header a:focus-visible,
.app-page-header button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-primary) 38%, transparent) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    cursor: not-allowed !important;
    opacity: 0.58 !important;
}

/* Les actions de fenêtre suivent toujours : secondaire puis principale. */
.modal-footer {
    gap: 0.55rem !important;
}

.modal-footer .btn-primary,
.modal-footer .btn-success,
.modal-footer .btn-danger,
.modal-footer .btn-warning {
    order: 10;
}

/* Le contenu garde une largeur et des marges stables d'une page à l'autre. */
.app-main-container {
    width: 100% !important;
    max-width: calc(var(--ds-page-content-max-width) + 2.5rem) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: var(--ds-page-gutter) !important;
}

.app-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.app-page-actions--spread {
    justify-content: space-between;
}

.app-page-actions .btn {
    min-height: 2.25rem !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 0.75rem !important;
    font-size: 0.84rem;
    line-height: 1.2;
}

@media (max-width: 991.98px) {
    :root {
        --ds-page-gutter: 1rem;
    }

    .app-main-container {
        padding: var(--ds-page-gutter) !important;
        padding-right: max(var(--ds-page-gutter), env(safe-area-inset-right, 0px)) !important;
        padding-bottom: calc(6.7rem + env(safe-area-inset-bottom, 0px)) !important;
        padding-left: max(var(--ds-page-gutter), env(safe-area-inset-left, 0px)) !important;
    }

    .app-page-header,
    .dashboard-overview__header.app-page-header,
    .expenses-page__header.app-page-header,
    .balance-projection-hero .card-body {
        padding: 0.9rem !important;
    }
}

@media (max-width: 767.98px) {
    .app-page-header .app-page-header__main,
    .balance-projection-hero .app-page-header__main {
        flex: 0 1 auto !important;
        width: 100% !important;
    }

    .app-page-header,
    .dashboard-overview__header.app-page-header,
    .expenses-page__header.app-page-header,
    .balance-projection-hero__top {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.8rem !important;
    }

    .app-page-header .app-page-header__title,
    .balance-projection-hero .app-page-header__title,
    .dashboard-overview__header .app-page-header__title,
    .expenses-page__header .app-page-header__title,
    .transactions-page-header .app-page-header__title {
        font-size: 1.3rem !important;
    }

    .app-page-header .app-page-header__actions,
    .balance-projection-hero .app-page-header__actions,
    .expenses-page__actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        width: 100% !important;
    }

    .app-page-header__actions > .btn-primary,
    .expenses-page__actions > .btn-primary {
        order: -1;
    }

    .app-page-header__actions .btn,
    .balance-projection-hero__actions .btn,
    .expenses-page__actions .btn {
        width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
    }
}

@media (max-width: 575.98px) {
    :root {
        --ui-header-padding-x: 0.85rem;
        --ui-header-padding-y: 0.85rem;
        --ds-page-gutter: 0.75rem;
    }

    .app-main-container {
        padding: var(--ds-page-gutter) !important;
        padding-right: max(var(--ds-page-gutter), env(safe-area-inset-right, 0px)) !important;
        padding-bottom: calc(6.7rem + env(safe-area-inset-bottom, 0px)) !important;
        padding-left: max(var(--ds-page-gutter), env(safe-area-inset-left, 0px)) !important;
    }

    .app-page-actions {
        gap: 0.375rem;
        margin-bottom: 0.75rem;
    }

    .app-page-actions .btn {
        min-height: 2.125rem !important;
        padding: 0.325rem 0.625rem !important;
        font-size: 0.78rem;
    }

    .app-page-header .app-page-header__actions,
    .balance-projection-hero .app-page-header__actions,
    .expenses-page__actions {
        grid-template-columns: 1fr !important;
    }

    .app-page-header .app-page-header__subtitle,
    .balance-projection-hero .app-page-header__subtitle,
    .transactions-page-header .app-page-header__subtitle {
        font-size: 0.82rem !important;
    }

    .app-page-header .app-page-header__pill,
    .balance-projection-hero .app-page-header__pill {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* Navigation et densité mobile — privilégie les actions utiles. */
@media (max-width: 991.98px) {
    .mobile-topbar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 1040 !important;
        width: 100% !important;
        min-height: 56px !important;
        padding: max(0.42rem, env(safe-area-inset-top)) 0 0.42rem !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12) !important;
    }

    .app-content-shell {
        padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    }

    .mobile-topbar > .container {
        max-width: none !important;
        padding-right: max(0.7rem, env(safe-area-inset-right)) !important;
        padding-left: max(0.7rem, env(safe-area-inset-left)) !important;
    }

    .mobile-topbar .navbar-brand {
        flex: 1 1 auto;
        max-width: calc(100% - 52px) !important;
        min-width: 0;
        padding: 0 !important;
    }

    .mobile-topbar .navbar-brand-mark--logo {
        width: 2rem !important;
        height: 2rem !important;
        flex: 0 0 2rem;
    }

    .mobile-topbar__context,
    .mobile-topbar__page-title {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-topbar__page-title {
        font-size: 0.94rem;
        font-weight: 780;
        letter-spacing: 0;
    }

    .mobile-home-button,
    .mobile-menu-toggle {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        border-radius: 11px !important;
    }

    .mobile-nav-drawer {
        --bs-offcanvas-width: min(88vw, 340px) !important;
        border-left: 1px solid var(--color-border-subtle) !important;
    }

    .mobile-nav-drawer__header {
        min-height: 62px !important;
        padding: max(0.72rem, env(safe-area-inset-top)) 0.78rem 0.68rem !important;
    }

    .app-brand-logo--drawer {
        width: 2rem !important;
        height: 2rem !important;
        flex-basis: 2rem !important;
    }

    .mobile-nav-drawer__eyebrow {
        font-size: 0.6rem !important;
    }

    .mobile-nav-drawer__title {
        font-size: 0.96rem !important;
    }

    .mobile-nav-drawer__body {
        padding: 0.68rem 0.72rem max(0.9rem, env(safe-area-inset-bottom)) !important;
    }

    .mobile-nav-group {
        gap: 0.22rem !important;
    }

    .mobile-nav-group + .mobile-nav-group {
        margin-top: 0.68rem !important;
        padding-top: 0.68rem !important;
    }

    .mobile-nav-group__label-wrap {
        min-height: 0 !important;
        margin-bottom: 0.14rem !important;
    }

    .mobile-nav-group__label {
        padding-inline: 0.18rem !important;
        font-size: 0.62rem !important;
        letter-spacing: 0.08em !important;
    }

    .mobile-nav-group__badge,
    .mobile-nav-link__meta {
        display: none !important;
    }

    .mobile-nav-drawer .mobile-nav-link {
        min-height: 46px !important;
        align-items: center !important;
        gap: 0.68rem !important;
        padding: 0.58rem 0.68rem !important;
        border-radius: 10px !important;
        font-size: 0.88rem !important;
        text-align: left;
    }

    .mobile-nav-drawer .mobile-nav-link > i {
        width: 1.25rem;
        margin: 0 !important;
        flex: 0 0 1.25rem;
        text-align: center;
    }

    .mobile-nav-drawer .mobile-nav-link__title {
        font-size: 0.88rem;
        line-height: 1.15;
    }

    .mobile-theme-menu-btn {
        border: 1px solid transparent;
        background: transparent;
    }

    .mobile-nav-drawer .nav-utility-btn {
        min-height: 48px !important;
        border-radius: 10px !important;
        padding: 0.5rem 0.65rem !important;
    }

    .mobile-nav-drawer .btn-outline-danger {
        min-height: 44px !important;
        border-radius: 10px !important;
    }

    .app-page-header .app-page-header__eyebrow,
    .app-page-header .app-page-header__subtitle,
    .balance-projection-hero .app-page-header__eyebrow,
    .balance-projection-hero .app-page-header__subtitle,
    .expenses-page__subtitle {
        display: none !important;
    }

    .app-page-header,
    .dashboard-overview__header.app-page-header,
    .expenses-page__header.app-page-header,
    .balance-projection-hero .card-body {
        gap: 0.55rem !important;
        padding: 0.72rem !important;
    }

    .app-page-header .app-page-header__actions,
    .balance-projection-hero .app-page-header__actions,
    .expenses-page__actions {
        display: flex !important;
        grid-template-columns: none !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 0.42rem !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .app-page-header .app-page-header__actions::-webkit-scrollbar,
    .balance-projection-hero .app-page-header__actions::-webkit-scrollbar,
    .expenses-page__actions::-webkit-scrollbar {
        display: none;
    }

    .app-page-header__actions .btn,
    .balance-projection-hero__actions .btn,
    .expenses-page__actions .btn {
        width: auto !important;
        min-width: max-content !important;
        min-height: 40px !important;
        flex: 0 0 auto;
        padding: 0.42rem 0.68rem !important;
        white-space: nowrap !important;
    }

    .app-footer {
        display: none !important;
    }

    .mobile-bottom-nav {
        min-height: 64px !important;
        padding: 0.32rem !important;
    }

    .mobile-bottom-nav__item {
        min-height: 52px !important;
    }
}

@media (max-width: 575.98px) {
    .mobile-topbar__context {
        display: block !important;
    }

    .mobile-topbar .navbar-brand-mark--logo {
        margin-right: 0 !important;
    }

    .mobile-nav-drawer {
        --bs-offcanvas-width: min(90vw, 330px) !important;
    }

    .app-page-header .app-page-header__meta,
    .transactions-page-header .app-page-header__meta,
    .expenses-page__header .expenses-page__meta {
        display: none !important;
    }

    .app-page-header .app-page-header__title,
    .balance-projection-hero .app-page-header__title,
    .dashboard-overview__header .app-page-header__title,
    .expenses-page__header .app-page-header__title,
    .transactions-page-header .app-page-header__title {
        font-size: 1.12rem !important;
    }

    .app-page-header.mb-4,
    .app-page-header.mb-3 {
        margin-bottom: 0.62rem !important;
    }

    .modal-header {
        padding: 0.78rem !important;
    }

    .modal-body {
        padding: 0.8rem !important;
    }

    .modal-footer {
        padding: 0.7rem !important;
    }

    .transactions-page-header .app-page-header__actions {
        display: none !important;
    }

    .app-page-header__actions a.btn[href="/"],
    .balance-projection-hero__actions a.btn[href="/"] {
        display: none !important;
    }

    .cashflow-card__header {
        gap: 0.55rem !important;
        padding: 0.7rem !important;
    }

    .cashflow-month-nav--header {
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) 40px !important;
        align-items: center !important;
        gap: 0.42rem !important;
        width: 100% !important;
    }

    .cashflow-month-nav--header > .btn {
        width: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
    }

    .cashflow-month-nav--header > .custom-date-picker {
        width: 100% !important;
        min-width: 0 !important;
    }

    .cashflow-month-nav--header .custom-date-picker__button {
        width: 100% !important;
        min-height: 40px !important;
    }

    #cashflowSankeySurface .cashflow-page-chart-stage {
        display: block !important;
        height: 300px !important;
        min-height: 280px !important;
    }

    .mobile-chart-fullscreen #cashflowSankeySurface .cashflow-page-chart-stage {
        display: block !important;
        height: 100% !important;
        min-height: 320px !important;
    }

    #dataTable tbody .transaction-row {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 0.35rem 0.55rem !important;
        margin: 0.5rem 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--ds-border) !important;
        border-left: 3px solid var(--transaction-row-color, var(--color-primary)) !important;
        border-radius: 12px !important;
        background: var(--ds-surface) !important;
    }

    #dataTable tbody .transaction-row > td {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #dataTable tbody .transaction-row > .transaction-select-cell {
        display: none !important;
    }

    #dataTable tbody .transaction-row > .transaction-main-cell {
        display: block !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        padding: 0.68rem 0 0.68rem 0.68rem !important;
    }

    #dataTable tbody .transaction-row > .transaction-amount-cell {
        display: block !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: start !important;
        min-width: max-content !important;
        padding: 0.68rem 0.68rem 0.68rem 0 !important;
        text-align: right !important;
    }

    #dataTable tbody .transaction-secondary-categories,
    #dataTable tbody .transaction-comment-mobile,
    #dataTable tbody .mobile-meta-sep,
    #dataTable tbody .transaction-mobile-meta > span:nth-child(3) {
        display: none !important;
    }

    #dataTable tbody .transaction-mobile-meta {
        gap: 0.28rem !important;
        margin-top: 0.38rem !important;
    }

    #dataTable tbody .transaction-mobile-meta > span:not(.mobile-meta-sep) {
        padding: 0.12rem 0.32rem !important;
        font-size: 0.64rem !important;
    }

    #dataTable tbody .transaction-amount {
        padding: 0.28rem 0.45rem !important;
        font-size: 0.82rem !important;
    }

    #dataTable tbody .transaction-amount__monthly {
        margin-top: 0.25rem !important;
        font-size: 0.62rem !important;
    }

    .calendar-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
    }

    .calendar-kpi {
        min-height: 116px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.48rem !important;
        padding: 0.68rem !important;
    }

    .calendar-kpi__icon {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
        border-radius: 9px !important;
    }

    .calendar-kpi__label {
        font-size: 0.61rem !important;
        line-height: 1.15 !important;
    }

    .calendar-kpi__copy strong {
        max-width: 100% !important;
        font-size: 0.96rem !important;
    }

    .calendar-kpi__copy small {
        display: none !important;
    }

    .expenses-kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.58rem !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none;
    }

    .expenses-kpi-grid > .expenses-kpi {
        flex: initial !important;
        min-width: 0 !important;
        min-height: 128px !important;
        scroll-snap-align: none;
    }

    .expenses-kpi-grid > .expenses-kpi:first-child,
    .expenses-kpi-grid > .expenses-kpi:last-child {
        grid-column: 1 / -1 !important;
    }

    .expenses-category-row {
        min-height: 44px !important;
    }

    .expenses-month-nav .btn,
    .expenses-month-nav .form-control,
    .expenses-month-nav .custom-date-picker__button {
        min-height: 44px !important;
    }
}

@media (max-width: 359.98px) {
    .mobile-topbar__context {
        display: none !important;
    }

    #dataTable tbody .transaction-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #dataTable tbody .transaction-row > .transaction-main-cell,
    #dataTable tbody .transaction-row > .transaction-amount-cell {
        grid-column: 1 !important;
    }

    #dataTable tbody .transaction-row > .transaction-amount-cell {
        grid-row: 2 !important;
        padding: 0 0.68rem 0.68rem !important;
        text-align: left !important;
    }

    .expenses-kpi-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .expenses-kpi-grid > .expenses-kpi:first-child,
    .expenses-kpi-grid > .expenses-kpi:last-child {
        grid-column: auto !important;
    }
}

@media (max-width: 767.98px) {
    .projection-section-tabs .nav-link,
    .projection-chart-segmented__item,
    .projection-tabs-actions .btn,
    .calendar-view-button,
    .calendar-day__more,
    .calendar-event-chip,
    .bank-card-actions > .btn,
    .subscription-card-actions > .btn,
    .account-card-actions > .btn,
    .account-card .dropdown > .btn,
    .admin-row-actions .btn,
    #paginationContainer .page-link {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .projection-table-extreme::before {
        display: none !important;
    }

    .expenses-stacked-bar__segment {
        pointer-events: none;
    }

    .app-page-header__actions,
    .balance-projection-hero__actions,
    .expenses-page__actions,
    .projection-section-tabs {
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
    }

    .app-page-header__actions > *,
    .balance-projection-hero__actions > *,
    .expenses-page__actions > *,
    .projection-section-tabs > * {
        scroll-snap-align: start;
    }

    .dashboard-overview {
        display: flex !important;
        flex-direction: column !important;
    }

    .dashboard-overview__header { order: 0; }
    .dashboard-kpi-grid { order: 1; }
    .dashboard-focus-grid { order: 2; }
    .dashboard-one-off { order: 3; }
    .dashboard-expense-breakdown { order: 4; }
    .dashboard-ranking { order: 5; }

    .dashboard-section-link,
    .dashboard-kpi__link {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 44px !important;
        padding: 0.5rem 0 !important;
    }

    #projection-table-pane .projection-table tbody tr {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.45rem !important;
    }

    #projection-table-pane .projection-table tbody td {
        min-width: 0 !important;
        padding: 0 !important;
        border-top: 0 !important;
    }

    #projection-table-pane .projection-table-month-cell,
    #projection-table-pane .projection-table tbody td[data-label="Compte"] {
        grid-column: 1 / -1 !important;
    }

    #projection-table-pane .projection-table-metric {
        height: 100% !important;
        padding: 0.58rem !important;
    }

    .admin-users-table,
    .admin-users-table tbody,
    .admin-users-table tr,
    .admin-users-table td {
        display: block !important;
        width: 100% !important;
    }

    .admin-users-table thead {
        display: none !important;
    }

    .admin-users-table tbody {
        display: grid !important;
        gap: 0.65rem !important;
        padding: 0.65rem !important;
    }

    .admin-users-table tbody tr {
        overflow: hidden !important;
        border: 1px solid var(--color-border-subtle) !important;
        border-radius: 12px !important;
        background: var(--color-card-bg) !important;
        box-shadow: var(--shadow-sm) !important;
    }

    .admin-users-table tbody td {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.75rem !important;
        padding: 0.58rem 0.68rem !important;
        border: 0 !important;
        border-bottom: 1px solid var(--color-border-subtle) !important;
        text-align: right !important;
        overflow-wrap: anywhere;
    }

    .admin-users-table tbody td:last-child {
        border-bottom: 0 !important;
    }

    .admin-users-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--color-text-muted);
        font-size: 0.64rem;
        font-weight: 800;
        letter-spacing: 0.045em;
        text-transform: uppercase;
    }

    .admin-users-table .admin-row-actions {
        justify-content: flex-end !important;
    }

    .bank-card__copy,
    .subscription-card__copy,
    .admin-category-card__copy {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .admin-category-card__copy h6 {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

.professional-import-summary {
    display: grid;
    gap: 0.28rem;
    padding: 0.78rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: 12px;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.professional-import-summary strong {
    color: var(--color-text-dark);
}

@media (max-width: 575.98px) {
    .profile-card > .card-body {
        padding: 0.85rem !important;
    }

    .profile-password-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .profile-form-actions,
    .professional-panel__footer {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .profile-form-actions .btn,
    .professional-panel__footer .btn {
        width: 100% !important;
        min-height: 44px !important;
    }

    .professional-import-spec,
    .professional-import-summary {
        overflow-wrap: anywhere;
    }

    .admin-category-card__copy {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.2rem !important;
    }

    #passModeGroup {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    #passModeGroup .btn {
        min-height: 44px !important;
    }

    #paginationContainer .page-item:not(:first-child):not(:last-child):not(.active) {
        display: none !important;
    }
}

@media (max-width: 359.98px) {
    .account-card .row.g-3.mt-auto > [class*="col-"] {
        width: 100% !important;
    }

    .calendar-kpis {
        grid-template-columns: 1fr !important;
    }

    #projection-table-pane .projection-table tbody tr {
        grid-template-columns: 1fr !important;
    }

    #projection-table-pane .projection-table tbody td {
        grid-column: 1 !important;
    }
}

@media (max-width: 767.98px) {
    .cashflow-page-header .app-page-header__pill,
    .cashflow-type-comparison__period {
        display: none !important;
    }

    .cashflow-breakdown-card {
        padding: 0 !important;
    }

    .cashflow-breakdown-card > .card-header-custom,
    .cashflow-breakdown-card > .card-body-custom {
        padding: 0.75rem !important;
    }
}

/* Sélecteur mensuel partagé : même présentation que l'Agenda. */
.period-month-nav {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.period-month-nav__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 11px;
    background: var(--color-card-bg);
    color: var(--color-text-dark);
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.period-month-nav__arrow:hover,
.period-month-nav__arrow:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border-subtle));
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-card-bg));
    color: var(--color-primary);
    outline: none;
    transform: translateY(-1px);
}

.period-month-picker {
    position: relative;
    flex: 1 1 220px;
    min-width: 0;
}

.period-month-picker__trigger {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-width: 220px;
    height: 48px;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: 12px;
    background: var(--color-card-bg);
    color: var(--color-text-dark);
    text-align: left;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.period-month-picker__trigger:hover,
.period-month-picker__trigger:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border-subtle));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 10%, transparent);
    outline: none;
}

.period-month-picker__icon {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-card-bg));
    color: var(--color-primary);
}

.period-month-picker__copy {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.1;
}

.period-month-picker__copy > span {
    color: var(--color-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.period-month-picker__copy strong {
    overflow: hidden;
    margin-top: 0.18rem;
    font-size: 0.92rem;
    text-overflow: ellipsis;
    text-transform: capitalize;
    white-space: nowrap;
}

.period-month-picker__chevron {
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

.period-month-picker__native {
    position: absolute;
    z-index: -1;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.expenses-period-card {
    justify-content: center;
}

.cashflow-period-card {
    display: flex;
    justify-content: center;
    padding: 1rem 1.25rem;
}

.expenses-period-card .period-month-nav,
.cashflow-period-card .period-month-nav {
    width: min(100%, 420px);
}

@media (max-width: 767.98px) {
    .cashflow-month-nav,
    .expenses-month-nav {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        width: 100% !important;
        gap: 0.45rem !important;
    }

    .period-month-picker,
    .period-month-picker__trigger {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    /* Aligne précisément la période de Dépenses sur la navigation de l'Agenda. */
    .expenses-period-card {
        padding: 0.55rem !important;
        border-radius: 16px;
    }

    .expenses-period-card .expenses-month-nav {
        width: 100%;
        grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    }

    .expenses-period-card .period-month-nav__arrow {
        display: grid !important;
        place-items: center;
        width: 40px;
        min-width: 40px;
        height: 44px;
        padding: 0 !important;
        line-height: 0;
    }

    .expenses-period-card .period-month-nav__arrow > i {
        display: grid;
        width: 1rem;
        height: 1rem;
        margin: 0 !important;
        place-items: center;
        line-height: 1 !important;
    }

    .expenses-period-card .period-month-nav__arrow > i::before {
        display: block;
        line-height: 1;
    }

    .expenses-period-card .period-month-picker__trigger {
        height: 46px;
        min-height: 46px;
        padding: 0.3rem 0.55rem;
    }

    .expenses-period-card .period-month-picker__icon,
    .expenses-period-card .period-month-picker__chevron {
        display: none;
    }

    .expenses-period-card .period-month-picker__copy {
        display: grid;
        flex: 1;
        min-width: 0;
        line-height: 1.1;
    }

    .expenses-period-card .period-month-picker__copy > span {
        font-size: 0.66rem;
    }

    .expenses-period-card .period-month-picker__copy strong {
        font-size: 0.82rem;
    }

}

@media (max-width: 359.98px) {
    .period-month-picker__icon {
        display: none;
    }

    .period-month-picker__trigger {
        gap: 0.4rem;
        padding-inline: 0.6rem;
    }
}

/* Shared view tabs: one visual and interaction contract across every page. */
.app-tabs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    min-height: 0;
    margin-bottom: 1rem;
    padding: 0.35rem;
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ds-surface) 94%, transparent);
    box-shadow: var(--shadow-sm);
}

.app-tabs-toolbar--sticky {
    position: sticky;
    z-index: 30;
    top: calc(var(--nav-height) + 0.65rem);
    backdrop-filter: blur(18px);
}

.app-tabs-toolbar--embedded {
    margin: 0;
    padding: 0.35rem !important;
    border: 0;
    border-bottom: 1px solid var(--ds-border) !important;
    border-radius: 0;
    background: var(--ds-surface) !important;
    box-shadow: none;
}

.app-tabs {
    --app-tabs-count: 2;
    display: grid;
    grid-template-columns: repeat(var(--app-tabs-count), minmax(0, 1fr));
    gap: 0.25rem;
    width: min(100%, 430px);
    min-width: 0;
    margin: 0;
    padding: 0.25rem;
    border: 1px solid var(--ds-border) !important;
    border-radius: 12px;
    background: var(--ds-surface-muted);
}

.app-tabs--2 {
    --app-tabs-count: 2;
}

.app-tabs--3 {
    --app-tabs-count: 3;
    width: min(100%, 510px);
}

.app-tabs--fluid {
    width: 100%;
}

.transactions-modal-panel .transactions-modal-switcher.app-tabs {
    margin-bottom: 1rem;
}

.transactions-modal-switcher.app-tabs .transactions-modal-switch-btn.app-tabs__button {
    min-height: 44px !important;
}

.app-tabs .nav-item {
    min-width: 0;
}

.app-tabs .nav-link,
.app-tabs__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0.52rem 0.78rem;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--color-text-muted) !important;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.app-tabs .nav-link i,
.app-tabs__button i {
    flex: 0 0 auto;
    width: 1rem;
    margin: 0 !important;
    color: currentColor;
    text-align: center;
}

.app-tabs .nav-link span,
.app-tabs__button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-tabs .nav-link:hover,
.app-tabs__button:hover {
    border-color: color-mix(in srgb, var(--color-primary) 14%, var(--ds-border)) !important;
    background: var(--ds-surface-hover) !important;
    color: var(--color-text-dark) !important;
}

.app-tabs .nav-link.active,
.app-tabs .nav-link[aria-selected="true"],
.app-tabs__button.is-active,
.app-tabs__button[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--color-primary) 26%, var(--ds-border)) !important;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--ds-surface)) !important;
    color: var(--color-primary-strong, var(--color-primary)) !important;
    box-shadow: 0 1px 4px rgba(23, 33, 47, 0.1) !important;
}

.app-tabs .nav-link:focus-visible,
.app-tabs__button:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    outline-offset: 2px;
}

.app-tabs-content,
.app-tabs-content > .tab-pane,
.app-tab-panel {
    min-width: 0;
}

.app-tabs-content > .tab-pane:focus-visible,
.app-tab-panel:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
    outline-offset: 4px;
}

.app-tabs-toolbar__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex: 0 0 auto;
    min-width: 0;
}

@media (max-width: 991.98px) {
    .app-tabs-toolbar--sticky {
        position: static;
        top: auto;
        backdrop-filter: none;
    }
}

@media (max-width: 575.98px) {
    .app-tabs-toolbar {
        width: 100%;
        padding: 0.25rem;
        border-radius: 12px;
    }

    .app-tabs-toolbar--with-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .app-tabs {
        width: 100%;
        padding: 0.2rem;
    }

    .app-tabs .nav-link,
    .app-tabs__button {
        min-height: 44px !important;
        padding-inline: 0.48rem;
        font-size: 0.76rem;
    }

    .app-tabs--3 .nav-link,
    .app-tabs--3 .app-tabs__button {
        gap: 0.3rem;
        padding-inline: 0.3rem;
        font-size: 0.72rem;
    }

    .app-tabs--3 .nav-link i,
    .app-tabs--3 .app-tabs__button i,
    .profile-card .app-tabs .nav-link i {
        display: none;
    }

    .app-tabs-toolbar__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .app-tabs-toolbar__actions .btn {
        width: 100%;
        min-height: 44px !important;
        margin: 0;
    }

    .profile-card .card-body {
        padding: 1rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-tabs .nav-link,
    .app-tabs__button {
        transition: none;
    }
}

/* Monetary outflows stay neutral: black on light surfaces, white on dark surfaces. */
.finance-expense-amount,
.transaction-amount--expense,
.transactions-kpi-card--expense .transactions-kpi-card__value,
.expenses-page .expenses-kpi strong,
.expenses-page .expenses-analysis-card__total,
.expenses-page .expenses-category-row__amount,
.expenses-page .expenses-section-heading__aside strong,
.expenses-page .expenses-detail-summary > div:last-child strong,
.expenses-page .expenses-detail-chart__value strong,
.expenses-page .expenses-detail-item__amount strong,
.dashboard-kpi--expense .dashboard-kpi__value,
.dashboard-upcoming__amount,
.cashflow-distribution-card .cashflow-distribution-donut-center strong,
.cashflow-distribution-card .cashflow-distribution-block__value,
.cashflow-distribution-card .cashflow-distribution-ranking__amount,
.cashflow-flow-summary__tile--expense .cashflow-flow-summary__value,
.cashflow-chart-detail-movement--expense .cashflow-chart-detail-movement__amount,
.projection-kpi-card--expense .projection-kpi-card__value,
.projection-table-metric--expense .projection-table-metric__value,
.projection-chart-detail-movement--expense .projection-chart-detail-movement__amount,
.calendar-kpi--expense .calendar-kpi__value,
.calendar-event-chip.is-expense strong,
.calendar-day__net.is-expense,
.calendar-agenda-item__amount.is-expense,
.calendar-chart-detail-movement--expense .calendar-chart-detail-movement__amount {
    color: var(--color-expense-amount) !important;
}

/* Compact desktop utilities: scope, theme and account stay clear without stacked labels. */
@media (min-width: 992px) {
    .app-desktop-topbar__actions {
        gap: 0.5rem;
    }

    .app-desktop-topbar__scope-btn {
        min-width: 0 !important;
        min-height: 42px;
        gap: 0.42rem;
        padding: 0.34rem 0.62rem;
        border-radius: 10px;
    }

    .app-desktop-topbar__scope-btn .nav-utility-btn__icon {
        width: 1.75rem;
        height: 1.75rem;
        flex-basis: 1.75rem;
        font-size: 0.8rem;
    }

    .app-desktop-topbar__scope-count {
        color: var(--color-text-dark);
        font-size: 0.78rem;
        font-weight: 750;
        white-space: nowrap;
    }

    .app-desktop-topbar__account-toggle {
        height: 42px !important;
        min-height: 42px !important;
        gap: 0.5rem;
        padding: 0.32rem 0.55rem 0.32rem 0.36rem !important;
        border-radius: 10px !important;
    }

    .app-desktop-topbar__avatar {
        width: 1.85rem;
        height: 1.85rem;
        flex-basis: 1.85rem;
        font-size: 0.78rem;
    }

    .app-desktop-topbar__account-text {
        display: block;
        line-height: 1;
    }

    .app-desktop-topbar__account-name {
        max-width: 8.5rem;
        font-size: 0.86rem;
    }

    .app-desktop-topbar__account-chevron {
        font-size: 0.68rem;
    }
}

/* Mobile modal viewport hardening: dynamic browser bars, keyboards and safe areas. */
@media (max-width: 575.98px) {
    :root {
        --mobile-modal-edge: max(.25rem, env(safe-area-inset-left, 0px));
        --mobile-modal-safe-height: calc(.5rem + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
    }

    .modal {
        padding: 0 !important;
    }

    .modal .modal-dialog {
        width: auto;
        max-width: none;
        min-height: 0;
        margin: max(.25rem, env(safe-area-inset-top, 0px)) var(--mobile-modal-edge) max(.25rem, env(safe-area-inset-bottom, 0px));
    }

    .modal .modal-content {
        display: flex;
        min-width: 0;
        min-height: 0;
        max-height: calc(100vh - var(--mobile-modal-safe-height));
        max-height: calc(100dvh - var(--mobile-modal-safe-height));
        flex-direction: column;
        overflow: hidden;
    }

    .modal .modal-content > form {
        display: flex;
        min-width: 0;
        min-height: 0;
        max-height: inherit;
        flex-direction: column;
    }

    .modal .modal-header,
    .modal .modal-footer {
        flex: 0 0 auto;
    }

    .modal .modal-body {
        min-width: 0;
        min-height: 0;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .modal .modal-footer {
        padding-bottom: max(.75rem, env(safe-area-inset-bottom, 0px));
    }

    .modal .btn,
    .modal .form-control,
    .modal .form-select,
    .modal .form-check-label,
    .modal .btn-close {
        min-height: 44px;
    }

    .modal .btn-close,
    .modal button[aria-label]:not(.btn) {
        min-width: 44px;
    }

    .modal img,
    .modal canvas,
    .modal svg,
    .modal table {
        max-width: 100%;
    }
}

@media (max-width: 389.98px) {
    .modal:not(#modalTransaction):not(#modalTransfer) .modal-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .modal:not(#modalTransaction):not(#modalTransfer) .modal-footer .btn {
        width: 100%;
        min-width: 0;
        margin: 0;
    }
}

/* Touch ergonomics shared by authenticated pages. */
@media (max-width: 767.98px), (pointer: coarse) {
    button,
    .btn,
    a.nav-link,
    a.dropdown-item,
    .form-control,
    .form-select,
    .form-check-label,
    summary {
        min-height: 44px;
    }

    button[aria-label],
    .btn-icon,
    .btn-close {
        min-width: 44px;
    }

    .form-control,
    .form-select,
    textarea.form-control {
        font-size: 1rem;
    }

    .table-responsive,
    [class*="chart-scroll"] {
        max-width: 100%;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile app refinement: compact headers and action rails. */
@media (max-width: 575.98px) {
    .app-footer {
        display: none !important;
    }

    .app-page-header,
    .dashboard-overview__header.app-page-header,
    .expenses-page__header.app-page-header,
    .balance-projection-hero__top {
        gap: .55rem !important;
        padding: .75rem !important;
    }

    .app-page-header .app-page-header__eyebrow,
    .app-page-header .app-page-header__subtitle,
    .balance-projection-hero .app-page-header__subtitle,
    .dashboard-overview__header .app-page-header__subtitle,
    .expenses-page__header .app-page-header__subtitle {
        display: none !important;
    }

    .app-page-header .app-page-header__title,
    .balance-projection-hero .app-page-header__title,
    .dashboard-overview__header .app-page-header__title,
    .expenses-page__header .app-page-header__title {
        font-size: 1.12rem !important;
        line-height: 1.15 !important;
    }

    .app-page-header .app-page-header__meta {
        gap: .3rem !important;
        margin-top: .25rem !important;
    }

    .app-page-header .app-page-header__pill,
    .balance-projection-hero .app-page-header__pill {
        min-height: 26px !important;
        padding: .2rem .48rem !important;
        font-size: .7rem !important;
    }

    .app-page-header .app-page-header__actions,
    .balance-projection-hero .app-page-header__actions,
    .expenses-page__actions,
    .app-page-actions {
        display: flex !important;
        width: calc(100% + .75rem) !important;
        margin-right: -.375rem !important;
        margin-left: -.375rem !important;
        padding: 0 .375rem .2rem !important;
        gap: .45rem !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .app-page-header .app-page-header__actions::-webkit-scrollbar,
    .balance-projection-hero .app-page-header__actions::-webkit-scrollbar,
    .expenses-page__actions::-webkit-scrollbar,
    .app-page-actions::-webkit-scrollbar {
        display: none;
    }

    .app-page-header__actions > .btn,
    .balance-projection-hero__actions > .btn,
    .expenses-page__actions > .btn,
    .app-page-actions > .btn {
        width: auto !important;
        min-width: max-content !important;
        min-height: 44px !important;
        padding-right: .8rem !important;
        padding-left: .8rem !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}

/* Mobile route simplification: show the task, not the explanation. */
@media (max-width: 575.98px) {
    /* Tableau de bord : progression et chiffres, sans texte répété. */
    .dashboard-onboarding__header p,
    .dashboard-onboarding-step__content small,
    .dashboard-section-intro > div > span {
        display: none !important;
    }

    .dashboard-onboarding__header,
    .dashboard-section-intro {
        gap: .55rem !important;
    }

    /* Transactions : recherche et choix, sans légendes qui répètent les intitulés. */
    .transactions-filter-modal .modal-header > div > p,
    .transactions-filter-group__heading p,
    .transactions-filter-field__heading small {
        display: none !important;
    }

    .transactions-filter-group__heading,
    .transactions-filter-field__heading {
        margin-bottom: .35rem !important;
    }

    /* Flux : conserve les valeurs et les onglets, allège les explications. */
    .cashflow-page-hero__eyebrow,
    .cashflow-page-hero__subtitle,
    .cashflow-page-summary-card__subtitle,
    .cashflow-chart-context-note,
    .cashflow-card__header p {
        display: none !important;
    }

    .cashflow-page-summary-card,
    .cashflow-page-sidecard,
    .cashflow-breakdown-card {
        padding: .85rem !important;
    }

    /* Calendrier : les montants et l'ouverture du détail restent immédiats. */
    .calendar-kpi__copy small,
    .calendar-main-header__subtitle {
        display: none !important;
    }

    /* Soldes et projections : les chiffres restent prioritaires. */
    .balances-page .projection-kpi-card__meta,
    .balance-projection-page .projection-chart-heading p {
        display: -webkit-box !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .balance-projection-page .projection-chart-context-note,
    .balance-projection-page #projectionScenario > p {
        display: none !important;
    }

    /* Comptes, import et profil : une action claire, puis les données. */
    .accounts-mobile-supporting-copy,
    .account-empty-state,
    .professional-import-spec,
    .professional-panel__footer > span,
    .profile-card + .text-center {
        display: none !important;
    }

    .account-card .card-body,
    .profile-card .card-body {
        padding: .85rem !important;
    }

    .professional-panel__header,
    .professional-panel__footer {
        gap: .65rem !important;
        padding: .85rem !important;
    }
}

/* Mobile bottom navigation flush edge. */
@media (max-width: 991.98px) {
    .mobile-bottom-nav {
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-bottom: calc(0.42rem + env(safe-area-inset-bottom, 0px)) !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 18px 18px 0 0 !important;
    }
}