:root {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    color: #17202a;
    background: #f3f5f7;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

main {
    display: grid;
    min-height: 0;
    place-items: initial;
    padding: 1.5rem;
}

section {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 2rem;
    border: 1px solid #d9dee3;
    border-radius: 1rem;
    background: white;
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 8%);
}

.label {
    margin: 0;
    color: #59636e;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

h1 {
    margin: 0.5rem 0 1rem;
    font-size: clamp(2rem, 10vw, 3.5rem);
}

dl {
    margin-top: 2rem;
}

dl div {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid #e5e8eb;
}

dt {
    font-weight: 700;
}

dd {
    margin: 0;
}

a {
    color: inherit;
}

button,
input {
    font: inherit;
}

button {
    padding: 0.8rem 1rem;
    border: 0;
    border-radius: 0.6rem;
    color: white;
    background: #1f6feb;
    cursor: pointer;
}

input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #c8d0d8;
    border-radius: 0.5rem;
}

.page-center {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1.5rem;
}

.auth-card {
    max-width: 28rem;
}

.form-stack {
    display: grid;
    gap: 1rem;
}

.form-stack label {
    display: grid;
    gap: 0.4rem;
}

.alert {
    padding: 0.75rem;
    border-radius: 0.5rem;
}

.alert-error {
    color: #8a1c1c;
    background: #fdecec;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #d9dee3;
    background: white;
}

.topbar form {
    margin: 0;
}

.button-secondary {
    padding: 0.55rem 0.8rem;
    color: #17202a;
    background: #e8edf2;
}

.content {
    display: block;
    min-height: auto;
    padding: 1.5rem;
}

.entity-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.entity-card {
    display: grid;
    gap: 0.4rem;
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-radius: 0.75rem;
    text-decoration: none;
}

.entity-card:hover {
    border-color: #1f6feb;
}

.entity-card span {
    color: #59636e;
}

select,
textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #c8d0d8;
    border-radius: 0.5rem;
    background: white;
    font: inherit;
}

.operation-form-card {
    max-width: 42rem;
}

.operation-form {
    display: grid;
    gap: 1rem;
}

.form-row {
    display: grid;
    gap: 0.4rem;
}

.form-row label {
    font-weight: 700;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.checkbox-row input {
    width: auto;
}

.optional-fields {
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-radius: 0.75rem;
}

.optional-fields summary {
    cursor: pointer;
    font-weight: 700;
}

.optional-fields[open] {
    display: grid;
    gap: 1rem;
}

.optional-fields[open] summary {
    margin-bottom: 1rem;
}

.button-link {
    display: inline-block;
    border-radius: 0.6rem;
    color: white;
    background: #1f6feb;
    text-align: center;
    text-decoration: none;
}

.button-large {
    width: 100%;
    padding: 1rem;
}

.alert-success {
    color: #126b38;
    background: #e7f7ed;
}

.errorlist {
    margin: 0;
    padding-left: 1.2rem;
    color: #a51d1d;
}

@media (min-width: 40rem) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.entity-topbar {
    border-top: 0.45rem solid var(
        --entity-color,
        #1f6feb
    );
}

.entity-selector {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.entity-selector label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.entity-selector select {
    width: auto;
    max-width: 13rem;
    padding: 0.5rem;
}

.dashboard-content {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 1.5rem;
    box-sizing: border-box;
}

.dashboard-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dashboard-heading h1,
.section-heading h2 {
    margin: 0.35rem 0 0;
}

.muted {
    margin: 0.35rem 0 0;
    color: #66717c;
}

.default-badge {
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    color: white;
    background: var(
        --entity-color,
        #1f6feb
    );
    font-size: 0.8rem;
    font-weight: 700;
}

.quick-add-button {
    margin-bottom: 1.5rem;
    background: var(
        --entity-color,
        #1f6feb
    );
}

.dashboard-section {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border: 1px solid #d9dee3;
    border-radius: 1rem;
    background: white;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.account-grid {
    display: grid;
    gap: 1rem;
}

.account-card {
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-top: 0.3rem solid var(
        --entity-color,
        #1f6feb
    );
    border-radius: 0.75rem;
}

.account-card h3 {
    margin: 0 0 1rem;
}

.balance-list {
    margin: 0;
}

.balance-list div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-top: 1px solid #edf0f2;
}

.balance-list dt {
    font-weight: 500;
}

.balance-list dd {
    font-weight: 700;
}

.forecast-balance {
    color: var(
        --entity-color,
        #1f6feb
    );
}

.operation-list {
    display: grid;
}

.operation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    border-top: 1px solid #edf0f2;
}

.operation-main {
    display: grid;
    gap: 0.2rem;
}

.operation-main span {
    color: #66717c;
    font-size: 0.86rem;
}

.operation-amount {
    flex-shrink: 0;
    font-weight: 800;
    white-space: nowrap;
}

.amount-expense {
    color: #a51d1d;
}

.amount-income {
    color: #126b38;
}

.empty-state {
    padding: 1.25rem;
    border-radius: 0.75rem;
    color: #66717c;
    background: #f4f6f8;
    text-align: center;
}

@media (min-width: 48rem) {
    .account-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .quick-add-button {
        width: auto;
    }
}

@media (min-width: 70rem) {
    .account-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.button-inline {
    display: inline-block;
    width: auto;
    border-radius: 0.6rem;
    text-decoration: none;
}

.button-danger {
    background: #a51d1d;
}

.filter-card {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-radius: 0.75rem;
    background: white;
}

.list-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.list-tabs a {
    padding: 0.5rem 0;
    color: #66717c;
    text-decoration: none;
}

.list-tabs a.active {
    border-bottom: 0.2rem solid var(
        --entity-color,
        #1f6feb
    );
    color: #17202a;
    font-weight: 700;
}

.operation-actions {
    display: grid;
    justify-items: end;
    gap: 0.5rem;
}

.operation-actions form {
    margin: 0;
}

.operation-management-row {
    align-items: flex-start;
}

@media (min-width: 48rem) {
    .filter-card {
        grid-template-columns:
            minmax(12rem, 2fr)
            repeat(3, minmax(8rem, 1fr))
            auto;
    }
}

.reconciliation-filter {
    grid-template-columns: 1fr auto;
}

.transfer-grid {
    display: grid;
    gap: 1rem;
}

.transfer-arrow {
    display: none;
    align-items: end;
    justify-content: center;
    padding-bottom: 0.8rem;
    color: var(
        --entity-color,
        #1f6feb
    );
    font-size: 1.5rem;
    font-weight: 800;
}

@media (min-width: 48rem) {
    .transfer-grid {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);
    }

    .transfer-arrow {
        display: flex;
    }
}

.transfer-integrity-message {
    color: #174f7a;
    background: #e9f4fc;
}

.card-limit-grid {
    display: grid;
    gap: 1rem;
}

.card-limit-card {
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-left: 0.35rem solid #2f7d4a;
    border-radius: 0.75rem;
    background: white;
}

.card-limit-card.card-limit-warning {
    border-left-color: #d58a00;
}

.card-limit-card.card-limit-danger {
    border-left-color: #a51d1d;
}

.card-limit-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.card-limit-heading h3 {
    margin: 0;
}

.card-limit-heading p {
    margin: 0.3rem 0 0;
    color: #66717c;
    font-size: 0.9rem;
}

.card-limit-percent {
    font-weight: 800;
    font-size: 1.15rem;
}

.card-limit-progress {
    height: 0.65rem;
    margin: 1rem 0;
    overflow: hidden;
    border-radius: 999px;
    background: #edf0f2;
}

.card-limit-progress-value {
    height: 100%;
    border-radius: inherit;
    background: #2f7d4a;
}

.card-limit-warning .card-limit-progress-value {
    background: #d58a00;
}

.card-limit-danger .card-limit-progress-value {
    background: #a51d1d;
}

.card-limit-values {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.card-limit-values div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.card-limit-values dt {
    color: #66717c;
}

.card-limit-values dd {
    font-weight: 700;
}

.card-limit-period {
    margin: 1rem 0;
    color: #66717c;
    font-size: 0.85rem;
}

@media (min-width: 48rem) {
    .card-limit-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .filter-card {
        grid-template-columns:
            minmax(12rem, 2fr)
            repeat(4, minmax(8rem, 1fr))
            auto;
    }
}

.recurring-list {
    display: grid;
    gap: 1rem;
}

.recurring-card {
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-left: 0.3rem solid var(
        --entity-color,
        #1f6feb
    );
    border-radius: 0.75rem;
    background: white;
}

.recurring-disabled {
    opacity: 0.6;
}

.recurring-main {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.recurring-main > div {
    display: grid;
    gap: 0.25rem;
}

.recurring-main span {
    color: #66717c;
    font-size: 0.88rem;
}

.recurring-details {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0;
}

.recurring-details div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.recurring-details dt {
    color: #66717c;
}

.recurring-details dd {
    font-weight: 600;
    text-align: right;
}

.recurring-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.recurring-actions form {
    margin: 0;
}

.planned-filter {
    grid-template-columns: minmax(0, 1fr) auto;
}

.planned-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.planned-select-all {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.planned-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 0.75rem;
}

.planned-checkbox input,
.planned-select-all input {
    width: 1.2rem;
    height: 1.2rem;
}

.recurring-badge {
    display: inline-flex;
    width: fit-content;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: #eef3f8;
    font-size: 0.75rem;
    font-weight: 700;
}

.planned-check-info {
    margin-top: 1.5rem;
}

.budget-period-grid,
.budget-line-list {
    display: grid;
    gap: 1rem;
}

.budget-period-card,
.budget-line-card {
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-radius: 0.75rem;
    background: white;
}

.budget-period-heading,
.budget-line-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.budget-period-heading h2,
.budget-line-heading h2 {
    margin: 0;
}

.budget-period-heading p,
.budget-line-heading p {
    margin: 0.25rem 0 0;
    color: #66717c;
}

.budget-summary-values {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0;
}

.budget-summary-values div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.budget-summary-values dt {
    color: #66717c;
}

.budget-summary-values dd {
    font-weight: 700;
}

.budget-global-summary {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.budget-global-summary > div {
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-radius: 0.75rem;
    background: white;
}

.budget-global-summary span {
    display: block;
    margin-bottom: 0.25rem;
    color: #66717c;
}

.budget-global-summary strong {
    font-size: 1.35rem;
}

.budget-line-card {
    border-left: 0.35rem solid #2f7d4a;
}

.budget-line-warning {
    border-left-color: #d58a00;
}

.budget-line-danger {
    border-left-color: #a51d1d;
}

.budget-progress {
    height: 0.65rem;
    margin: 1rem 0;
    overflow: hidden;
    border-radius: 999px;
    background: #edf0f2;
}

.budget-progress-value {
    height: 100%;
    border-radius: inherit;
    background: #2f7d4a;
}

.budget-line-warning .budget-progress-value {
    background: #d58a00;
}

.budget-line-danger .budget-progress-value {
    background: #a51d1d;
}

@media (min-width: 48rem) {
    .budget-period-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

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

.expense-tracking-filter {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-radius: 0.75rem;
    background: white;
}

.expense-summary-grid {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.expense-summary-grid article {
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-radius: 0.75rem;
    background: white;
}

.expense-summary-grid span {
    display: block;
    margin-bottom: 0.25rem;
    color: #66717c;
}

.expense-summary-grid strong {
    font-size: 1.3rem;
}

.expense-tracking-list {
    display: grid;
    gap: 0.75rem;
}

.expense-tracking-row {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-radius: 0.75rem;
    background: white;
}

.expense-tracking-main {
    display: grid;
    gap: 0.2rem;
}

.expense-tracking-main span {
    color: #66717c;
    font-size: 0.88rem;
}

.expense-tracking-status {
    display: grid;
    gap: 0.5rem;
}

.expense-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.expense-badge {
    display: inline-flex;
    width: fit-content;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: #edf0f2;
    font-size: 0.75rem;
    font-weight: 700;
}

.expense-declared {
    background: #fff1c9;
}

.expense-reimbursed {
    background: #dff3e5;
}

.expense-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.expense-actions form {
    margin: 0;
}

@media (min-width: 48rem) {
    .expense-tracking-filter {
        grid-template-columns:
            repeat(3, minmax(0, 1fr))
            auto;
        align-items: end;
    }

    .expense-summary-grid {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }

    .expense-tracking-row {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            auto;
        align-items: center;
    }
}

.import-history {
    display: grid;
    gap: 0.75rem;
}

.import-history-row {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-radius: 0.75rem;
    background: white;
}

.import-history-row > div {
    display: grid;
    gap: 0.2rem;
}

.import-history-row span {
    color: #66717c;
    font-size: 0.88rem;
}

.import-summary-grid {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.import-summary-grid article {
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-radius: 0.75rem;
    background: white;
}

.import-summary-grid span {
    display: block;
    margin-bottom: 0.25rem;
    color: #66717c;
}

.import-summary-grid strong {
    font-size: 1.4rem;
}

.import-preview-table-wrapper {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.import-preview-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.import-preview-table th,
.import-preview-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #e3e7ea;
    text-align: left;
    white-space: nowrap;
}

.import-preview-table th {
    background: #f6f8fa;
}

.import-preview-table td:nth-child(3) {
    white-space: normal;
    min-width: 16rem;
}

.import-duplicate {
    opacity: 0.55;
}

.import-confirm-form {
    display: flex;
    justify-content: flex-end;
}

@media (min-width: 48rem) {
    .import-summary-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .import-history-row {
        grid-template-columns:
            minmax(0, 2fr)
            minmax(0, 1fr)
            auto;
        align-items: center;
    }
}

.import-history {
    display: grid;
    gap: 0.75rem;
}

.import-history-row {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-radius: 0.75rem;
    background: white;
}

.import-history-row > div {
    display: grid;
    gap: 0.2rem;
}

.import-history-row span {
    color: #66717c;
    font-size: 0.88rem;
}

.import-summary-grid {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.import-summary-grid article {
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-radius: 0.75rem;
    background: white;
}

.import-summary-grid span {
    display: block;
    margin-bottom: 0.25rem;
    color: #66717c;
}

.import-summary-grid strong {
    font-size: 1.4rem;
}

.import-preview-table-wrapper {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.import-preview-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.import-preview-table th,
.import-preview-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #e3e7ea;
    text-align: left;
    white-space: nowrap;
}

.import-preview-table th {
    background: #f6f8fa;
}

.import-preview-table td:nth-child(3) {
    white-space: normal;
    min-width: 16rem;
}

.import-duplicate {
    opacity: 0.55;
}

.import-confirm-form {
    display: flex;
    justify-content: flex-end;
}

@media (min-width: 48rem) {
    .import-summary-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .import-history-row {
        grid-template-columns:
            minmax(0, 2fr)
            minmax(0, 1fr)
            auto;
        align-items: center;
    }
}

.import-edit-form {
    display: grid;
    gap: 1rem;
}

.import-edit-list {
    display: grid;
    gap: 1rem;
}

.import-edit-row {
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-left: 0.35rem solid #2f7d4a;
    border-radius: 0.75rem;
    background: white;
}

.import-edit-duplicate {
    border-left-color: #d58a00;
}

.import-edit-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.import-edit-heading > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.import-force {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
}

.import-force input {
    width: 1.2rem;
    height: 1.2rem;
}

.import-edit-grid {
    display: grid;
    gap: 0.75rem;
}

.import-edit-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

@media (min-width: 48rem) {
    .import-edit-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .import-edit-label {
        grid-column: 1 / -1;
    }
}

@media (min-width: 70rem) {
    .import-edit-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .import-edit-label {
        grid-column: span 2;
    }
}

.import-match-field {
    padding: 0.75rem;
    border: 1px solid #cfd9e3;
    border-radius: 0.6rem;
    background: #f7f9fb;
}

.import-match-suggestion {
    margin-bottom: 0.5rem;
    padding: 0.55rem;
    border-radius: 0.45rem;
    background: #e8f2fb;
    font-size: 0.85rem;
}

.import-match-suggestion strong {
    display: block;
    margin-top: 0.2rem;
}

.financial-overview {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.financial-card {
    display: grid;
    gap: 0.3rem;
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-radius: 0.8rem;
    background: white;
}

.financial-card span {
    color: #66717c;
    font-size: 0.88rem;
}

.financial-card strong {
    font-size: 1.45rem;
}

.financial-card small {
    color: #66717c;
}

.financial-card-primary {
    border-top: 0.3rem solid var(--entity-color);
}

.financial-income {
    border-left: 0.3rem solid #2f7d4a;
}

.financial-expense {
    border-left: 0.3rem solid #a51d1d;
}

.financial-accounts-section {
    margin-bottom: 1.5rem;
}

.financial-account-grid {
    display: grid;
    gap: 0.75rem;
}

.financial-account-card {
    padding: 1rem;
    border: 1px solid #d9dee3;
    border-radius: 0.75rem;
    background: white;
}

.financial-account-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.financial-account-heading span {
    color: #66717c;
    font-size: 0.85rem;
}

.financial-account-card dl {
    display: grid;
    gap: 0.4rem;
    margin: 0;
}

.financial-account-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.financial-account-card dt {
    color: #66717c;
}

.financial-account-card dd {
    margin: 0;
    font-weight: 700;
}

@media (min-width: 48rem) {
    .financial-overview {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

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

@media (min-width: 75rem) {
    .financial-overview {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));
    }

    .financial-account-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

/* ==========================================================
   Dashboard 29A-3
   ========================================================== */

.dashboard-current-section {
    margin-top: 1.5rem;
}

.dashboard-account-tiles {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(260px, 1fr)
    );
    gap: 1rem;
}

.dashboard-account-tile {
    display: block;
    padding: 1.25rem;
    border: 1px solid #dfe3e8;
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.dashboard-account-tile:hover {
    transform: translateY(-2px);
    border-color: var(--entity-color);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.dashboard-account-tile:focus-visible {
    outline: 3px solid var(--entity-color);
    outline-offset: 3px;
}

.dashboard-account-tile-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.dashboard-account-tile-heading > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dashboard-account-tile-heading strong {
    font-size: 1.1rem;
}

.dashboard-account-tile-heading span {
    color: #68707c;
    font-size: 0.88rem;
}

.dashboard-account-chevron {
    font-size: 2rem !important;
    line-height: 1;
    color: var(--entity-color) !important;
}

.dashboard-account-tile dl {
    margin: 0;
}

.dashboard-account-tile dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
}

.dashboard-account-tile dt {
    color: #68707c;
    font-size: 0.9rem;
}

.dashboard-account-tile dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.dashboard-account-tile .dashboard-account-forecast {
    margin-top: 0.35rem;
    padding-top: 0.8rem;
    border-top: 1px solid #eceff2;
}

.dashboard-account-forecast dd {
    font-size: 1.08rem;
}

.dashboard-primary-actions {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-more-menu {
    position: relative;
}

.dashboard-more-menu > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.dashboard-more-menu > summary::-webkit-details-marker {
    display: none;
}

.dashboard-more-panel {
    position: absolute;
    z-index: 50;
    top: calc(100% + 0.5rem);
    right: 0;
    width: min(320px, calc(100vw - 2rem));
    padding: 0.75rem;
    border: 1px solid #dfe3e8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.dashboard-more-group {
    display: flex;
    flex-direction: column;
    padding: 0.55rem 0;
}

.dashboard-more-group + .dashboard-more-group {
    border-top: 1px solid #eceff2;
}

.dashboard-more-group strong {
    padding: 0.35rem 0.55rem;
    color: #68707c;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dashboard-more-group a,
.dashboard-menu-disabled {
    display: block;
    padding: 0.55rem;
    border-radius: 7px;
}

.dashboard-more-group a {
    color: inherit;
    text-decoration: none;
}

.dashboard-more-group a:hover {
    background: #f4f6f8;
}

.dashboard-menu-disabled {
    color: #9299a3;
    font-size: 0.9rem;
}

@media (max-width: 700px) {
    .dashboard-account-tiles {
        grid-template-columns: 1fr;
    }

    .dashboard-primary-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-primary-actions > a,
    .dashboard-primary-actions > details,
    .dashboard-more-menu > summary {
        width: 100%;
        box-sizing: border-box;
    }

    .dashboard-primary-actions > a,
    .dashboard-more-menu > summary {
        text-align: center;
    }

    .dashboard-operations-action {
        display: none;
    }

    .dashboard-more-panel {
        position: fixed;
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        top: auto;
        width: auto;
        max-height: 75vh;
        overflow-y: auto;
    }
}

/* ==========================================================
   Boutons d'action harmonisés
   ========================================================== */

.button-link,
.button-primary,
.button-secondary,
.dashboard-primary-actions a,
.dashboard-more-menu > summary {
    box-sizing: border-box;
    min-height: 44px;
    padding: 0.7rem 1.1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background 0.12s ease,
        border-color 0.12s ease;
}

.button-link:hover,
.button-primary:hover,
.button-secondary:hover,
.dashboard-primary-actions a:hover,
.dashboard-more-menu > summary:hover {
    transform: translateY(-1px);
}

.button-link:focus-visible,
.button-primary:focus-visible,
.button-secondary:focus-visible,
.dashboard-primary-actions a:focus-visible,
.dashboard-more-menu > summary:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.25);
    outline-offset: 2px;
}

/* Action principale : création */

.quick-add-button,
.dashboard-main-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.18);
}

.quick-add-button:hover,
.dashboard-main-action:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

/* Virement */

.dashboard-transfer-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #16a66a;
    border-color: #16a66a;
    color: #fff;
    box-shadow: 0 3px 8px rgba(22, 166, 106, 0.15);
}

.dashboard-transfer-action:hover {
    background: #128457;
    border-color: #128457;
    color: #fff;
}

/* Actions secondaires */

.button-secondary,
.dashboard-operations-action,
.dashboard-more-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f4f7;
    border-color: #e2e7ec;
    color: #172033;
}

.button-secondary:hover,
.dashboard-operations-action:hover,
.dashboard-more-menu > summary:hover {
    background: #e7ebef;
    border-color: #d4d9df;
    color: #172033;
}

/* Alignement des actions de l'accueil */

.dashboard-primary-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 1.2rem 0 1.5rem;
}

.dashboard-primary-actions > a,
.dashboard-primary-actions > details > summary {
    min-width: 150px;
}

/* Smartphone */

@media (max-width: 700px) {
    .dashboard-primary-actions {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .dashboard-primary-actions > a,
    .dashboard-primary-actions > details,
    .dashboard-primary-actions > details > summary {
        width: 100%;
        min-width: 0;
    }
}

/* ==========================================================
   Largeur globale et responsive application
   ========================================================== */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
}

.dashboard-content,
.content,
.page-content,
.main-content {
    width: min(100% - 2rem, 1500px);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1600px) {
    .dashboard-content,
    .content,
    .page-content,
    .main-content {
        width: min(100% - 4rem, 1600px);
    }
}

@media (max-width: 900px) {
    .dashboard-content,
    .content,
    .page-content,
    .main-content {
        width: calc(100% - 1.25rem);
    }
}

@media (max-width: 600px) {
    .dashboard-content,
    .content,
    .page-content,
    .main-content {
        width: calc(100% - 0.75rem);
    }
}

/* Grilles adaptatives */

.account-grid,
.dashboard-account-tiles,
.financial-account-grid,
.budget-period-grid,
.card-limit-grid,
.expense-summary-grid,
.import-summary-grid,
.import-edit-grid {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(280px, 100%),
                1fr
            )
        );
}

@media (max-width: 700px) {
    .account-grid,
    .dashboard-account-tiles,
    .financial-account-grid,
    .budget-period-grid,
    .card-limit-grid,
    .expense-summary-grid,
    .import-summary-grid,
    .import-edit-grid {
        grid-template-columns: 1fr;
    }
}

/* Formulaires */

form,
.form-row,
.operation-form,
.expense-tracking-filter {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
    box-sizing: border-box;
}

input,
select,
textarea {
    width: 100%;
}

button,
.button-link,
.button-primary,
.button-secondary,
.button-inline {
    white-space: normal;
}

@media (max-width: 700px) {
    .form-row {
        width: 100%;
    }

    .operation-form,
    .expense-tracking-filter {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Tableaux */

.import-preview-table-wrapper,
.table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

@media (max-width: 700px) {
    .dashboard-primary-actions,
    .expense-actions,
    .recurring-actions,
    .import-edit-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .dashboard-primary-actions a,
    .dashboard-primary-actions summary,
    .expense-actions button,
    .expense-actions a,
    .recurring-actions button,
    .recurring-actions a,
    .import-edit-actions button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .expense-actions,
    .recurring-actions,
    .import-edit-actions {
        grid-template-columns: 1fr;
    }
}

* {
    min-width: 0;
}

p,
span,
strong,
dd,
dt,
a,
button {
    overflow-wrap: anywhere;
}

@media (min-width: 1000px) {
    .dashboard-content,
    .content {
        width: calc(100% - 48px) !important;
        max-width: 1600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==========================================================
   Sections de l'application : pleine largeur
   La limite historique à 42rem reste réservée aux pages
   centrées / authentification.
   ========================================================== */

.dashboard-content > section,
.content > section,
.page-content > section,
.main-content > section {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* Desktop large */
@media (min-width: 1000px) {
    .dashboard-content,
    .content,
    .page-content,
    .main-content {
        width: calc(100% - 48px) !important;
        max-width: 1600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .dashboard-content > section,
    .content > section,
    .page-content > section,
    .main-content > section {
        width: 100%;
        max-width: none;
    }
}

/* Smartphone / tablette */
@media (max-width: 999px) {
    .dashboard-content > section,
    .content > section,
    .page-content > section,
    .main-content > section {
        width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================
   Responsive mobile global — correction finale
   ========================================================== */

/*
 * Ne jamais couper les libellés des boutons mot par mot.
 */
button,
.button-link,
.button-primary,
.button-secondary,
.button-inline,
.quick-add-button,
.dashboard-primary-actions a,
.dashboard-more-menu > summary {
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: nowrap !important;
}

/*
 * Les textes normaux peuvent continuer à se replier.
 */
p,
span,
strong,
dd,
dt,
a {
    word-break: normal;
}

/* ==========================================================
   Smartphone
   ========================================================== */

@media (max-width: 700px) {

    /*
     * Le main ne doit plus utiliser le vieux comportement
     * centré avec de gros espaces.
     */
    main.dashboard-content,
    main.content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0.75rem !important;

        box-sizing: border-box;
    }

    /*
     * Toutes les sections fonctionnelles prennent réellement
     * la largeur disponible.
     */
    .dashboard-content > section,
    .content > section {
        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1rem !important;

        padding: 1rem !important;

        border-radius: 0.8rem !important;
        box-sizing: border-box;
    }

    /*
     * En-têtes : titre puis bouton dessous.
     * Évite les boutons qui écrasent les gros titres.
     */
    .dashboard-heading,
    .section-heading {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .dashboard-heading > div,
    .section-heading > div {
        width: 100%;
        min-width: 0;
    }

    /*
     * Les boutons présents dans un heading disposent de toute
     * la largeur nécessaire et restent sur une ligne.
     */
    .dashboard-heading > a,
    .dashboard-heading > button,
    .dashboard-heading > form,
    .section-heading > a,
    .section-heading > button,
    .section-heading > form {
        width: 100% !important;
        max-width: 100% !important;
    }

    .dashboard-heading > a,
    .section-heading > a,
    .dashboard-heading > form > button,
    .section-heading > form > button {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 100% !important;
        min-height: 44px;

        padding: 0.65rem 0.85rem !important;

        font-size: 0.95rem !important;
        white-space: nowrap !important;
    }

    /*
     * Titres : suffisamment grands mais pas gigantesques.
     */
    .dashboard-heading h1 {
        max-width: 100%;
        margin: 0.25rem 0 0 !important;

        font-size: clamp(
            2rem,
            11vw,
            3rem
        ) !important;

        line-height: 1.05 !important;
        overflow-wrap: normal;
        word-break: normal;
    }

    .section-heading h2 {
        font-size: 1.4rem !important;
        line-height: 1.15 !important;
    }

    /*
     * Boutons standards.
     */
    .button-link,
    .button-primary,
    .button-secondary,
    .button-inline,
    .quick-add-button {
        min-height: 44px !important;

        padding: 0.65rem 0.8rem !important;

        font-size: 0.92rem !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;
    }

    /*
     * Boutons d'actions dans les lignes d'opérations.
     * Ils doivent avoir assez de largeur pour "Valider",
     * "Pointer", etc.
     */
    .operation-actions,
    .expense-actions,
    .recurring-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .operation-actions form,
    .expense-actions form,
    .recurring-actions form {
        width: auto !important;
        max-width: 100%;
    }

    .operation-actions button,
    .expense-actions button,
    .recurring-actions button {
        width: auto !important;
        min-width: 7rem !important;

        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;

        white-space: nowrap !important;
    }

    /*
     * Filtres : pleine largeur et empilés.
     */
    .filter-card,
    .reconciliation-filter,
    .expense-tracking-filter {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;

        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 1rem !important;

        box-sizing: border-box;
    }

    .filter-card button,
    .reconciliation-filter button,
    .expense-tracking-filter button {
        width: 100% !important;
    }

    /*
     * Cartes opération / récurrence / budget.
     */
    .operation-row,
    .recurring-row,
    .budget-card,
    .expense-tracking-row,
    .financial-account-card,
    .dashboard-account-tile {
        width: 100% !important;
        max-width: none !important;

        padding: 1rem !important;

        box-sizing: border-box;
    }

    /*
     * Les listes ne doivent jamais imposer une largeur
     * supérieure au téléphone.
     */
    .operation-list,
    .recurring-list,
    .budget-list,
    .expense-tracking-list {
        width: 100% !important;
        max-width: 100% !important;
    }

    /*
     * Montants + action dans une ligne :
     * laisser suffisamment d'espace au texte.
     */
    .operation-row {
        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        column-gap: 0.75rem !important;
    }

    /*
     * Champs de formulaire.
     */
    input,
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /*
     * Actions principales de l'accueil.
     */
    .dashboard-primary-actions {
        display: grid !important;
        grid-template-columns:
            1fr 1fr !important;

        gap: 0.6rem !important;

        width: 100%;
    }

    .dashboard-primary-actions > a,
    .dashboard-primary-actions > details,
    .dashboard-primary-actions > details > summary {
        width: 100% !important;
        min-width: 0 !important;

        white-space: nowrap !important;
    }
}

/* ==========================================================
   Très petits smartphones
   ========================================================== */

@media (max-width: 420px) {

    main.dashboard-content,
    main.content {
        padding: 0.5rem !important;
    }

    .dashboard-content > section,
    .content > section {
        padding: 0.85rem !important;
    }

    .button-link,
    .button-primary,
    .button-secondary,
    .button-inline,
    .quick-add-button {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;

        font-size: 0.88rem !important;
    }

    /*
     * Si deux actions sont vraiment trop longues,
     * elles passent l'une sous l'autre, mais le texte
     * du bouton reste toujours sur une seule ligne.
     */
    .dashboard-primary-actions {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================
   Correctifs Safari / iPhone — champs date et checkbox
   ========================================================== */

input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/*
 * Safari iOS applique parfois une taille intrinsèque au champ
 * date. On force le contrôle à rester dans son conteneur.
 */
@supports (-webkit-touch-callout: none) {
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        -webkit-appearance: none;
        appearance: none;

        font-size: 16px;
    }
}

@media (max-width: 700px) {

    /*
     * Tous les enfants d'un formulaire doivent pouvoir
     * rétrécir à l'intérieur du téléphone.
     */
    .form-row,
    .form-row > *,
    .operation-form,
    .operation-form > *,
    .transfer-grid,
    .transfer-grid > * {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"] {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;

        overflow: hidden;
    }

    /*
     * Certains navigateurs WebKit utilisent un contrôle
     * interne qui peut dépasser.
     */
    input[type="date"]::-webkit-date-and-time-value,
    input[type="datetime-local"]::-webkit-date-and-time-value {
        min-width: 0;
        text-align: left;
    }

    /*
     * Checkbox + libellé :
     * on évite la checkbox à gauche et le texte à l'autre
     * extrémité du formulaire.
     */
    .form-row:has(input[type="checkbox"]) {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start !important;
        gap: 0.75rem !important;
    }

    .form-row:has(input[type="checkbox"]) input[type="checkbox"] {
        flex: 0 0 auto;
        width: 1.4rem !important;
        height: 1.4rem;
        margin: 0;
    }

    .form-row:has(input[type="checkbox"]) label {
        flex: 0 1 auto;
        width: auto !important;
        margin: 0;
    }

    .form-row:has(input[type="checkbox"]) .helptext {
        flex-basis: 100%;
        width: 100%;
    }
}

/* ==========================================================
   Synthèse d'un compte
   ========================================================== */

.account-summary-stats {
    display: grid;
    gap: 0.75rem;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}

.account-summary-stats article {
    padding: 1rem;
    border: 1px solid #dfe3e8;
    border-radius: 0.75rem;
    background: #f8fafc;
}

.account-summary-stats span {
    display: block;
    margin-bottom: 0.35rem;
    color: #66717c;
    font-size: 0.88rem;
}

.account-summary-stats strong {
    font-size: 1.3rem;
}

.account-summary-more {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

@media (max-width: 700px) {
    .account-summary-stats {
        grid-template-columns: 1fr;
    }

    .account-summary-more {
        justify-content: stretch;
    }

    .account-summary-more a {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================
   Boutons secondaires — contraste définitif
   ========================================================== */

.button-secondary,
.dashboard-operations-action,
.dashboard-more-menu > summary {
    background: #e9eef4 !important;
    border: 1px solid #cbd5df !important;
    color: #172033 !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 2px 5px rgba(0, 0, 0, 0.04);
}

.button-secondary:hover,
.dashboard-operations-action:hover,
.dashboard-more-menu > summary:hover {
    background: #dde5ed !important;
    border-color: #b7c3cf !important;
    color: #101828 !important;
}

.button-secondary:focus-visible,
.dashboard-operations-action:focus-visible,
.dashboard-more-menu > summary:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 2px;
}

/* Les liens secondaires doivent rester de vrais boutons. */
a.button-secondary,
a.dashboard-operations-action {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

/* ==========================================================
   Liste opérations — alignement stable mobile
   ========================================================== */

@media (max-width: 700px) {

    .operation-management-row {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        align-items: start !important;
        column-gap: 0.75rem !important;
        row-gap: 0.5rem !important;
    }

    .operation-management-row .operation-main {
        grid-column: 1;
        grid-row: 1 / span 2;

        min-width: 0;
    }

    .operation-management-row .operation-amount {
        grid-column: 2;
        grid-row: 1;

        align-self: start;
        justify-self: end;

        margin: 0 !important;
        white-space: nowrap !important;
        text-align: right;
    }

    .operation-management-row .operation-actions {
        grid-column: 2;
        grid-row: 2;

        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: stretch !important;

        width: auto !important;
        min-width: 7.5rem;

        margin: 0 !important;
        gap: 0.45rem !important;
    }

    .operation-management-row .operation-actions form,
    .operation-management-row .operation-actions a {
        display: block;
        width: 100% !important;
        margin: 0 !important;
    }

    .operation-management-row .operation-actions button,
    .operation-management-row .operation-actions a {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 100% !important;
        min-width: 7.5rem !important;

        padding: 0.65rem 0.75rem !important;

        white-space: nowrap !important;
    }
}

/* Très petit téléphone : un peu plus compact. */
@media (max-width: 390px) {

    .operation-management-row {
        column-gap: 0.5rem !important;
    }

    .operation-management-row .operation-actions {
        min-width: 6.7rem;
    }

    .operation-management-row .operation-actions button,
    .operation-management-row .operation-actions a {
        min-width: 6.7rem !important;
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
        font-size: 0.86rem !important;
    }
}

/* ==========================================================
   Opérations V2
   Filtres repliables + alignement actions
   ========================================================== */

.operations-filter-panel {
    margin-bottom: 1rem;
    border: 1px solid #d9dee3;
    border-radius: 0.9rem;
    background: #fff;
    overflow: hidden;
}

.operations-filter-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;

    padding: 0.9rem 1rem;

    color: #172033;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.operations-filter-panel > summary::-webkit-details-marker {
    display: none;
}

.operations-filter-panel > summary::after {
    content: "⌄";
    margin-left: auto;
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

.operations-filter-panel[open] > summary::after {
    transform: rotate(180deg);
}

.filter-active-indicator {
    margin-left: 0.4rem;
    padding: 0.2rem 0.55rem;

    border-radius: 999px;

    background: var(--entity-color, #1f6feb);
    color: #fff;

    font-size: 0.75rem;
    font-weight: 700;
}

.filter-active-indicator[hidden] {
    display: none !important;
}

.operations-filter-panel .filter-card {
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid #e3e8ee !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* Les actions forment toujours une vraie colonne. */

.operation-management-row .operation-actions {
    display: grid !important;
    grid-template-columns: minmax(7.5rem, auto) !important;
    justify-items: stretch !important;
    align-content: start !important;
    gap: 0.5rem !important;
}

.operation-management-row .operation-actions > .operation-amount {
    justify-self: end !important;
    width: auto !important;
    margin: 0 !important;
}

.operation-management-row .operation-actions > form,
.operation-management-row .operation-actions > a {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.operation-management-row .operation-actions > form > button,
.operation-management-row .operation-actions > a.button-secondary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 7.5rem !important;
    box-sizing: border-box !important;

    white-space: nowrap !important;
}


/* Smartphone */

@media (max-width: 700px) {

    .operations-filter-panel {
        margin-bottom: 0.85rem;
    }

    .operations-filter-panel > summary {
        min-height: 3.1rem;
        padding: 0.8rem 1rem;
    }

    .operation-management-row {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(7.5rem, auto) !important;

        align-items: start !important;
        column-gap: 0.75rem !important;
        row-gap: 0 !important;
    }

    .operation-management-row > .operation-main {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    .operation-management-row > .operation-actions {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        align-self: start !important;
        justify-self: end !important;

        width: 100% !important;
        min-width: 7.5rem !important;

        margin: 0 !important;
    }

    .operation-management-row
    > .operation-actions
    > .operation-amount {
        justify-self: end !important;
        margin-bottom: 0.15rem !important;
    }
}

/* ==========================================================
   Filtres opérations :
   toujours visibles sur PC
   ========================================================== */

@media (min-width: 701px) {

    .operations-filter-panel {
        overflow: visible;
    }

    .operations-filter-panel > summary {
        cursor: default;
    }

    .operations-filter-panel > summary::after {
        display: none;
    }

    /*
     * Même si quelqu'un ferme manuellement le <details>,
     * le contenu reste visible sur ordinateur.
     */
    .operations-filter-panel:not([open])
    > .filter-card {
        display: grid;
    }
}


/* ==========================================================
   Smartphone :
   vrai panneau repliable
   ========================================================== */

@media (max-width: 700px) {

    .operations-filter-panel:not([open])
    > .filter-card {
        display: none !important;
    }

    .operations-filter-panel[open]
    > .filter-card {
        display: grid !important;
    }
}

/* ==========================================================
   Sélecteur d'entité — smartphone
   ========================================================== */

@media (max-width: 700px) {

    .entity-switcher,
    .entity-selector,
    .entity-selector-form {
        column-gap: 0.75rem !important;
    }

    .entity-switcher label,
    .entity-selector label,
    .entity-selector-form label {
        margin-right: 0.5rem !important;
    }
}

/* ==========================================================
   Sélecteur d'entité — espacement smartphone
   ========================================================== */

@media (max-width: 700px) {
    .entity-topbar .entity-selector {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .entity-topbar .entity-selector label {
        flex: 0 0 auto !important;
        margin: 0 0.85rem 0 0 !important;
    }

    .entity-topbar #entity-switcher {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }
}

/* ==========================================================
   Dashboard — correction des grands espaces sur PC uniquement
   ========================================================== */

@media (min-width: 701px) {

    /* Le contenu ne doit plus être artificiellement étalé
       sur toute la hauteur de l'écran */
    .dashboard-content {
        justify-content: flex-start !important;
        align-content: start !important;
        gap: 2rem !important;
    }

    /* Actions principales */
    .dashboard-primary-actions {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }

    /* Le bloc suivant doit arriver directement après les actions */
    .dashboard-primary-actions + * {
        margin-top: 0 !important;
    }

    /* Section Mes comptes */
    .dashboard-content > .card,
    .dashboard-content > section {
        margin-top: 0 !important;
    }
}

/* ==========================================================
   Accueil entité — largeur desktop définitive
   ========================================================== */

@media (min-width: 701px) {

    main.entity-dashboard-content {
        display: block !important;

        width: calc(100% - 48px) !important;
        max-width: 1600px !important;

        margin: 0 auto !important;
        padding: 2rem 0 !important;
    }

    /*
     * Les actions utilisent toute la zone disponible,
     * tout en gardant les boutons alignés à gauche.
     */
    .entity-dashboard-content
    > .dashboard-primary-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;

        width: 100% !important;

        margin: 0 0 1.5rem 0 !important;
        gap: 0.75rem !important;
    }

    /*
     * Situation actuelle :
     * pleine largeur de l'accueil.
     */
    .entity-dashboard-content
    > .dashboard-current-section {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }

    /*
     * Les comptes profitent de la largeur PC.
     */
    .entity-dashboard-content
    .dashboard-account-tiles {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 1rem !important;

        width: 100% !important;
    }
}


/* Portable / tablette */
@media (min-width: 701px) and (max-width: 1100px) {

    .entity-dashboard-content
    .dashboard-account-tiles {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ==========================================================
   Largeur générale des écrans fonctionnels — desktop
   Comptes / récurrences / à venir / pointage / frais /
   imports / budgets
   ========================================================== */

@media (min-width: 1100px) {

    /*
     * Conteneur principal :
     * large sur PC, avec une petite marge latérale.
     */
    main.dashboard-content {
        width: calc(100% - 48px) !important;
        max-width: 1600px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;
    }

    /*
     * Les sections principales ne doivent plus conserver
     * une ancienne largeur étroite.
     */
    main.dashboard-content > section {
        width: 100% !important;
        max-width: none !important;

        box-sizing: border-box !important;
    }

    /*
     * Idem pour les zones de filtres et résultats.
     */
    main.dashboard-content .operations-filter-panel,
    main.dashboard-content .operations-results,
    main.dashboard-content .expense-tracking-filter,
    main.dashboard-content .table-wrapper,
    main.dashboard-content .import-preview-table-wrapper {
        width: 100% !important;
        max-width: none !important;

        box-sizing: border-box !important;
    }
}


/* ==========================================================
   Écrans intermédiaires
   ========================================================== */

@media (min-width: 701px) and (max-width: 1099px) {

    main.dashboard-content {
        width: calc(100% - 32px) !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==========================================================
   Layout applicatif desktop — correction définitive
   ========================================================== */

@media (min-width: 701px) {

    main.dashboard-content {
        display: block !important;

        width: calc(100% - 48px) !important;
        max-width: 1600px !important;

        min-height: auto !important;

        margin: 0 auto !important;
        padding: 1.5rem 0 !important;

        box-sizing: border-box !important;
    }

    main.dashboard-content > section,
    main.dashboard-content > form,
    main.dashboard-content > nav,
    main.dashboard-content > div {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}


/* ==========================================================
   Fond uniforme des pages applicatives
   ========================================================== */

html,
body {
    min-height: 100%;
    background: #f3f5f7;
}

.entity-topbar {
    background: #fff;
}

main.dashboard-content {
    background: transparent !important;
}

/* Accueil : aucune hauteur forcée */
main.entity-dashboard-content {
    min-height: 0 !important;
    height: auto !important;
}

/* ==========================================================
   Respect global de l'attribut HTML hidden
   ========================================================== */

[hidden] {
    display: none !important;
}

/* ==========================================================
   Structure verticale de l'application
   ========================================================== */

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    background: #f3f5f7;
}

/*
 * Le contenu garde sa hauteur naturelle.
 * Le fond du body remplit simplement le reste de l'écran.
 */
main.dashboard-content {
    height: auto !important;
}

main.entity-dashboard-content {
    min-height: 0 !important;
}

/* ==========================================================
   Synthèse compte — sélection de période
   ========================================================== */

.account-period-selector {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.account-period-selector label {
    display: grid;
    gap: 0.3rem;
    min-width: 10rem;
}

.account-period-selector label > span {
    color: #66717c;
    font-size: 0.8rem;
    font-weight: 700;
}

.account-period-selector select {
    min-height: 44px;
}

@media (max-width: 700px) {
    .account-period-selector {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);
        width: 100%;
    }

    .account-period-selector label {
        min-width: 0;
        width: 100%;
    }
}

/* ==========================================================
   Opérations à venir
   ========================================================== */

.operation-row.operation-planned {
    position: relative;

    border-left: 4px solid #7c8fa3 !important;

    background:
        rgba(90, 115, 140, 0.08) !important;
}

/* Libellé principal */
.operation-row.operation-planned
.operation-main > strong {
    font-style: italic;
}

/* Montant */
.operation-row.operation-planned
.operation-amount {
    font-style: italic;
}

/* Badge utilisé notamment dans la synthèse d'un compte */
.operation-planned-badge {
    display: inline-flex;
    align-items: center;

    margin-left: 0.4rem;
    padding: 0.15rem 0.45rem;

    border-radius: 999px;

    background: #e4eaf0;
    color: #46596b;

    font-size: 0.72rem;
    font-weight: 700;
    font-style: normal;

    white-space: nowrap;
}

/*
 * Sur smartphone on garde le marqueur bien visible,
 * sans prendre de place supplémentaire.
 */
@media (max-width: 700px) {

    .operation-row.operation-planned {
        border-left-width: 4px !important;
    }

    .operation-planned-badge {
        margin-left: 0.3rem;
    }
}


/* ==========================================================
   Statistiques
   ========================================================== */

.statistics-filters {
    display: grid;
    grid-template-columns:
        minmax(220px, 2fr)
        minmax(150px, 1fr)
        minmax(120px, 1fr)
        auto;
    gap: 1rem;
    align-items: end;
}

.statistics-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.statistics-card {
    width: auto !important;
    padding: 1.2rem !important;
    box-shadow: none !important;
}

.statistics-card span {
    display: block;
    margin-bottom: 0.45rem;
    color: #59636e;
    font-size: 0.85rem;
    font-weight: 700;
}

.statistics-card strong {
    font-size: 1.35rem;
}

.statistics-category-list {
    display: grid;
    gap: 0;
}

.statistics-category-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 0.85rem 0;

    border-bottom: 1px solid #e4e8ec;
}

.statistics-category-row:last-child {
    border-bottom: 0;
}

.statistics-category-row > div {
    display: grid;
    gap: 0.2rem;
}

@media (max-width: 900px) {

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

@media (max-width: 700px) {

    .statistics-filters {
        grid-template-columns: 1fr;
    }

    .statistics-filters button {
        width: 100%;
    }

    .statistics-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .statistics-card {
        padding: 0.85rem !important;
    }

    .statistics-card strong {
        font-size: 1.05rem;
    }

    .statistics-category-row {
        align-items: flex-start;
    }
}

@media (max-width: 390px) {

    .statistics-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Statistiques — évolution mensuelle
   ========================================================== */

.statistics-monthly-table {
    display: grid;
    gap: 0;
}

.statistics-monthly-header,
.statistics-monthly-row {
    display: grid;
    grid-template-columns:
        minmax(120px, 1.3fr)
        repeat(3, minmax(120px, 1fr));
    gap: 1rem;
    align-items: center;
}

.statistics-monthly-header {
    padding: 0 0 0.6rem;
    color: #66717c;
    font-size: 0.8rem;
    font-weight: 700;
}

.statistics-monthly-row {
    padding: 0.75rem 0;
    border-top: 1px solid #e5e8eb;
}

.statistics-monthly-row span:not(:first-child),
.statistics-monthly-row strong {
    text-align: right;
}

@media (max-width: 700px) {

    .statistics-monthly-table {
        overflow-x: auto;
    }

    .statistics-monthly-header,
    .statistics-monthly-row {
        min-width: 560px;
    }
}

/* ==========================================================
   Statistiques — alignement tableau évolution
   ========================================================== */

/* Mois reste aligné à gauche */
.statistics-monthly-header > span:first-child,
.statistics-monthly-row > span:first-child {
    text-align: left !important;
}

/* Colonnes numériques : titres et valeurs alignés à droite */
.statistics-monthly-header > span:not(:first-child),
.statistics-monthly-row > span:not(:first-child),
.statistics-monthly-row > strong {
    text-align: right !important;
}

/* Même grille exacte pour l'en-tête et les lignes */
.statistics-monthly-header,
.statistics-monthly-row {
    grid-template-columns:
        minmax(140px, 1.3fr)
        repeat(3, minmax(140px, 1fr)) !important;
}

/* ==========================================================
   Statistiques — navigation mensuelle et résultat
   ========================================================== */

.statistics-month-link {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.statistics-month-link:hover {
    color: #303f9f;
    text-decoration: underline;
}

.statistics-net-positive {
    color: #16763b;
}

.statistics-net-negative {
    color: #b51d1d;
}

.statistics-net-zero {
    color: inherit;
}

/* ==========================================================
   Statistiques — filtres automatiques sans bouton
   ========================================================== */

@media (min-width: 701px) {
    .statistics-filters {
        grid-template-columns:
            minmax(240px, 2fr)
            minmax(180px, 1fr)
            minmax(140px, 1fr) !important;
    }
}

/* ==========================================================
   Opérations — filtres période
   ========================================================== */

@media (min-width: 901px) {

    .operations-filter-panel .filter-card {
        display: grid;
        grid-template-columns:
            minmax(240px, 2fr)
            minmax(180px, 1fr)
            minmax(160px, 1fr)
            minmax(160px, 1fr);
        gap: 0.75rem;
        align-items: end;
    }

    .operations-filter-panel .filter-card > button {
        width: auto;
        justify-self: start;
    }
}

@media (max-width: 900px) and (min-width: 701px) {

    .operations-filter-panel .filter-card {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

/* ==========================================================
   Statistiques — camembert catégories
   ========================================================== */

.statistics-category-chart-layout {
    display: grid;
    grid-template-columns:
        minmax(260px, 360px)
        minmax(260px, 1fr);

    gap: 2rem;
    align-items: center;

    margin-bottom: 1.5rem;
}

.statistics-category-chart {
    position: relative;

    width: min(100%, 340px);
    aspect-ratio: 1;

    margin: 0 auto;
}

.statistics-category-chart svg {
    display: block;
    width: 100%;
    height: 100%;
}

.statistics-category-slice {
    cursor: pointer;

    stroke: #fff;
    stroke-width: 2;

    transition:
        opacity 0.15s ease,
        transform 0.15s ease;

    transform-origin: center;
}

.statistics-category-slice:hover,
.statistics-category-slice:focus {
    opacity: 0.82;
    outline: none;
}

.statistics-category-chart-center {
    position: absolute;
    inset: 50% auto auto 50%;

    display: grid;
    gap: 0.15rem;

    width: 38%;

    transform: translate(
        -50%,
        -50%
    );

    text-align: center;
    pointer-events: none;
}

.statistics-category-chart-center strong {
    font-size: 1.15rem;
}

.statistics-category-chart-center span,
.statistics-category-chart-center small {
    color: #66717c;
    font-size: 0.78rem;
}

.statistics-category-legend {
    display: grid;
    gap: 0.35rem;
}

.statistics-category-legend-item {
    display: grid;
    grid-template-columns:
        0.8rem
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 0.65rem;

    width: 100%;
    min-height: 40px;

    padding: 0.45rem 0.6rem;

    border: 0;
    border-radius: 0.5rem;

    background: transparent;
    color: inherit;

    text-align: left;
    cursor: pointer;
}

.statistics-category-legend-item:hover {
    background: #f3f5f7;
}

.statistics-category-legend-dot {
    width: 0.75rem;
    height: 0.75rem;

    border-radius: 50%;
}

@media (max-width: 700px) {

    .statistics-category-chart-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .statistics-category-chart {
        width: min(100%, 280px);
    }
}

/* ==========================================================
   Statistiques — sélection pour l'accueil
   ========================================================== */

.statistics-dashboard-options {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(190px, 1fr)
        );
    gap: 0.75rem;
}

.statistics-dashboard-options form {
    margin: 0;
}

.statistics-dashboard-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;

    width: 100%;
    min-height: 52px;

    padding: 0.75rem 1rem;

    border: 1px solid #d9dee3;
    border-radius: 0.75rem;

    background: #fff;
    color: inherit;

    font: inherit;
    text-align: left;

    cursor: pointer;
}

.statistics-dashboard-option:hover {
    background: #f5f7f9;
}

.statistics-dashboard-option strong {
    color: #66717c;
    font-size: 0.8rem;
    white-space: nowrap;
}

.statistics-dashboard-option.is-selected {
    border-color: #667eea;
    background: #f3f4ff;
}

.statistics-dashboard-option.is-selected strong {
    color: #4c51bf;
}

@media (max-width: 700px) {

    .statistics-dashboard-options {
        grid-template-columns: 1fr;
    }

    .statistics-dashboard-option {
        min-height: 48px;
    }
}

/* ==========================================================
   Accueil — statistiques personnalisées
   ========================================================== */

.dashboard-user-statistics {
    margin-top: 1.5rem;
}

.dashboard-statistics-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );
    gap: 1rem;
}

.dashboard-statistic-card {
    width: auto !important;
    max-width: none !important;

    padding: 1.2rem !important;

    border: 1px solid #e0e5ea;
    border-radius: 0.8rem;

    box-shadow: none !important;
}

.dashboard-statistic-card > span {
    display: block;
    margin-bottom: 0.4rem;

    color: #66717c;
    font-size: 0.82rem;
    font-weight: 700;
}

.dashboard-statistic-card > strong {
    font-size: 1.4rem;
}

.dashboard-statistics-detail {
    margin-top: 1.5rem;
    padding-top: 1.25rem;

    border-top: 1px solid #e4e8ec;
}

.dashboard-statistics-detail-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 0.75rem;
}

.dashboard-statistics-detail-heading h3 {
    margin: 0.25rem 0 0;
}

.dashboard-category-summary {
    display: grid;
}

.dashboard-category-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 0.7rem 0;

    border-bottom: 1px solid #edf0f2;
}

.dashboard-category-summary-row:last-child {
    border-bottom: 0;
}

.dashboard-category-summary-row > div {
    display: grid;
    gap: 0.15rem;
}

.dashboard-category-summary-row span {
    color: #66717c;
    font-size: 0.78rem;
}

.dashboard-evolution-summary {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(110px, 1fr)
        );

    gap: 0.6rem;
}

.dashboard-evolution-month {
    display: grid;
    gap: 0.25rem;

    min-width: 0;
    padding: 0.7rem;

    border: 1px solid #e0e5ea;
    border-radius: 0.65rem;

    color: inherit;
    text-decoration: none;
}

.dashboard-evolution-month:hover {
    background: #f5f7f9;
}

.dashboard-evolution-month span {
    color: #66717c;
    font-size: 0.78rem;
    font-weight: 700;
}

.dashboard-evolution-month strong {
    white-space: nowrap;
}


/* Smartphone */

@media (max-width: 700px) {

    .dashboard-user-statistics {
        margin-top: 0.85rem;
    }

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

        gap: 0.6rem;
    }

    .dashboard-statistic-card {
        padding: 0.85rem !important;
    }

    .dashboard-statistic-card > strong {
        font-size: 1.05rem;
    }

    .dashboard-statistics-detail-heading {
        align-items: flex-start;
    }

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


/* Très petits smartphones */

@media (max-width: 390px) {

    .dashboard-statistics-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Statistiques — compte par indicateur
   ========================================================== */

.statistics-dashboard-option-row {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        minmax(190px, 0.8fr);

    gap: 0.75rem;
    align-items: center;
}

.statistics-dashboard-account-form label {
    display: grid;
    gap: 0.3rem;
}

.statistics-dashboard-account-form label > span {
    color: #66717c;
    font-size: 0.75rem;
    font-weight: 700;
}

.statistics-dashboard-account-form select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.dashboard-statistic-account {
    display: block;

    margin-top: 0.45rem;

    color: #66717c;
    font-size: 0.75rem;
}


@media (max-width: 700px) {

    .statistics-dashboard-option-row {
        grid-template-columns: 1fr;
        gap: 0.45rem;

        padding-bottom: 0.85rem;

        border-bottom: 1px solid #e5e8eb;
    }

    .statistics-dashboard-option-row:last-child {
        border-bottom: 0;
    }
}

/* ==========================================================
   Statistiques accueil — configuration par cartes
   ========================================================== */

.statistics-dashboard-options {
    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 1rem !important;

    width: 100% !important;
    max-width: none !important;
}


/* Une statistique = une carte */

.statistics-dashboard-option-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 0.85rem !important;

    min-width: 0 !important;

    padding: 1rem !important;

    border: 1px solid #dce2e8 !important;
    border-radius: 0.8rem !important;

    background: #fff !important;
}


/* Les deux formulaires remplissent la carte */

.statistics-dashboard-option-row > form {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
}


/* Bouton Afficher / Affiché */

.statistics-dashboard-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 1rem !important;

    width: 100% !important;
    min-width: 0 !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    color: #17212b !important;

    text-align: left !important;
    box-shadow: none !important;
}


.statistics-dashboard-option > span {
    min-width: 0 !important;

    font-size: 1rem !important;
    font-weight: 700 !important;

    line-height: 1.25 !important;
}


.statistics-dashboard-option > strong {
    flex: 0 0 auto !important;

    padding: 0.4rem 0.65rem !important;

    border-radius: 999px !important;

    background: #edf2f7 !important;

    color: #425466 !important;

    font-size: 0.78rem !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
}


/* Statistique activée */

.statistics-dashboard-option.is-selected > strong {
    background: #e7f6ed !important;
    color: #157347 !important;
}


/* Zone choix du compte */

.statistics-dashboard-account-form {
    padding-top: 0.8rem !important;

    border-top: 1px solid #edf0f2 !important;
}


.statistics-dashboard-account-form label {
    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 0.35rem !important;

    width: 100% !important;
}


.statistics-dashboard-account-form label > span {
    display: block !important;

    color: #66717c !important;

    font-size: 0.75rem !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
}


.statistics-dashboard-account-form select {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: 2.75rem !important;

    padding:
        0.55rem
        2.2rem
        0.55rem
        0.7rem !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}


/* Désactivé tant que la statistique n'est pas affichée */

.statistics-dashboard-account-form select:disabled {
    opacity: 0.55 !important;

    background: #f4f6f8 !important;

    cursor: not-allowed !important;
}


/* Tablettes */

@media (min-width: 701px) and (max-width: 1100px) {

    .statistics-dashboard-options {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}


/* Smartphone */

@media (max-width: 700px) {

    .statistics-dashboard-options {
        grid-template-columns: 1fr !important;

        gap: 0.7rem !important;
    }

    .statistics-dashboard-option-row {
        padding: 0.85rem !important;
        gap: 0.7rem !important;
    }

    .statistics-dashboard-option > span {
        font-size: 0.95rem !important;
    }

    .statistics-dashboard-account-form {
        padding-top: 0.65rem !important;
    }
}

/* ==========================================================
   Configuration statistiques — panneau rétractable mobile
   ========================================================== */

.statistics-dashboard-config {
    width: 100%;
}


/* Suppression du marqueur natif */

.statistics-dashboard-config-summary {
    list-style: none;
}

.statistics-dashboard-config-summary::-webkit-details-marker {
    display: none;
}


/* En-tête */

.statistics-dashboard-config-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    cursor: pointer;
}

.statistics-dashboard-config-summary h2 {
    margin: 0.2rem 0 0;
}

.statistics-dashboard-config-summary .label {
    margin: 0;
}


/* Petit indicateur à droite */

.statistics-dashboard-config-toggle {
    flex: 0 0 auto;

    padding: 0.45rem 0.75rem;

    border: 1px solid #d5dde5;
    border-radius: 0.65rem;

    background: #f3f6f9;

    color: #344054;

    font-size: 0.8rem;
    font-weight: 700;
}


/* Contenu */

.statistics-dashboard-config-content {
    margin-top: 1rem;
}

.statistics-dashboard-config-content > .muted {
    margin-top: 0;
    margin-bottom: 1rem;
}


/* ==========================================================
   Desktop : configuration toujours visible
   ========================================================== */

@media (min-width: 701px) {

    /*
     * Sur desktop le <details> se comporte comme un bloc
     * toujours ouvert, même sans attribut "open".
     */

    .statistics-dashboard-config > .statistics-dashboard-config-content {
        display: block !important;
    }

    .statistics-dashboard-config-summary {
        cursor: default;
    }

    .statistics-dashboard-config-toggle {
        display: none !important;
    }
}


/* ==========================================================
   Smartphone : petit par défaut
   ========================================================== */

@media (max-width: 700px) {

    .statistics-dashboard-selection {
        padding: 0.85rem !important;
    }

    .statistics-dashboard-config-summary {
        min-height: 2.75rem;
    }

    .statistics-dashboard-config-summary h2 {
        font-size: 1.1rem !important;
    }

    .statistics-dashboard-config-summary .label {
        font-size: 0.7rem !important;
    }

    /*
     * Fermé par défaut puisque le template ne possède
     * volontairement PAS l'attribut "open".
     */

    .statistics-dashboard-config:not([open])
    .statistics-dashboard-config-content {
        display: none;
    }

    .statistics-dashboard-config-toggle::after {
        content: " ▾";
    }

    .statistics-dashboard-config[open]
    .statistics-dashboard-config-toggle::after {
        content: " ▴";
    }

    .statistics-dashboard-config[open]
    .statistics-dashboard-config-content {
        margin-top: 0.85rem;
    }
}

/* ==========================================================
   Stats config — comportement desktop/mobile final
   ========================================================== */

@media (min-width: 701px) {

    .statistics-dashboard-config {
        display: block !important;
    }

    .statistics-dashboard-config-summary {
        pointer-events: none !important;
    }

    .statistics-dashboard-config-toggle {
        display: none !important;
    }

    .statistics-dashboard-config-content {
        display: block !important;
    }
}

@media (max-width: 700px) {

    .statistics-dashboard-config-summary {
        pointer-events: auto !important;
    }

    .statistics-dashboard-config-toggle {
        display: inline-flex !important;
    }
}

/* ==========================================================
   Bouton Accueil — rendu unique sur toute l'application
   ========================================================== */

a.topbar-home-button,
.topbar a.topbar-home-button,
.entity-topbar a.topbar-home-button {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 42px !important;

    padding:
        0.6rem
        1rem !important;

    margin: 0 !important;

    border:
        1px solid
        #d5dde5 !important;

    border-radius:
        0.7rem !important;

    background:
        #eef2f6 !important;

    color:
        #17212b !important;

    font-family:
        inherit !important;

    font-size:
        0.9rem !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    text-decoration:
        none !important;

    white-space:
        nowrap !important;

    box-shadow:
        0 1px 2px
        rgb(0 0 0 / 5%) !important;
}

a.topbar-home-button:hover,
.topbar a.topbar-home-button:hover,
.entity-topbar a.topbar-home-button:hover {
    background:
        #e5ebf1 !important;

    border-color:
        #c7d0d9 !important;

    text-decoration:
        none !important;
}


/* Smartphone */

@media (max-width: 700px) {

    a.topbar-home-button,
    .topbar a.topbar-home-button,
    .entity-topbar a.topbar-home-button {
        min-height:
            40px !important;

        padding:
            0.55rem
            0.85rem !important;

        font-size:
            0.88rem !important;
    }
}

/* ==========================================================
   Bandeau entité — couleur dynamique
   ========================================================== */

.entity-topbar[style*="--active-entity-color"] {
    border-top:
        5px solid
        var(
            --active-entity-color
        ) !important;
}

/* ==========================================================
   Statistiques — sauvegarde AJAX
   ========================================================== */

.statistics-dashboard-option:disabled {
    opacity: 0.65 !important;
    cursor: wait !important;
}

.statistics-dashboard-account-form select:disabled {
    cursor: wait;
}

.statistics-dashboard-option-row {
    transition:
        opacity 0.15s ease,
        border-color 0.15s ease;
}

/* ==========================================================
   Statistiques — période par indicateur
   ========================================================== */

.statistics-dashboard-period-form {
    padding-top: 0.8rem !important;
    border-top: 1px solid #edf0f2 !important;
}

.statistics-dashboard-period-form label {
    display: grid;
    gap: 0.35rem;
}

.statistics-dashboard-period-form label > span,
.statistics-dashboard-fixed-period > span {
    color: #66717c;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.statistics-dashboard-period-form select {
    width: 100% !important;
    max-width: none !important;
    min-height: 44px;
}

.statistics-dashboard-fixed-period {
    display: grid;
    gap: 0.35rem;

    padding-top: 0.8rem;

    border-top: 1px solid #edf0f2;
}

.statistics-dashboard-fixed-period > strong {
    min-height: 44px;

    display: flex;
    align-items: center;

    padding: 0 0.7rem;

    border: 1px solid #e0e5ea;
    border-radius: 0.5rem;

    background: #f5f7f9;

    font-size: 0.9rem;
}

/* ==========================================================
   Mes statistiques — rétractable sur tous les écrans
   ========================================================== */

.statistics-dashboard-config {
    width: 100%;
}

.statistics-dashboard-config-summary {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.statistics-dashboard-config-toggle {
    display: inline-flex !important;
}

.statistics-dashboard-config:not([open])
.statistics-dashboard-config-content {
    display: none !important;
}

.statistics-dashboard-config[open]
.statistics-dashboard-config-content {
    display: block !important;
}

.statistics-dashboard-config-toggle::after {
    content: " ▾";
}

.statistics-dashboard-config[open]
.statistics-dashboard-config-toggle::after {
    content: " ▴";
}

/* PC : on garde simplement plus d'espace */
@media (min-width: 701px) {

    .statistics-dashboard-config-summary {
        min-height: 3.2rem;
    }

    .statistics-dashboard-config[open]
    .statistics-dashboard-config-content {
        margin-top: 1rem;
    }
}

/* ==========================================================
   Statistiques — ordre personnalisé
   ========================================================== */

.statistics-dashboard-move-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

.statistics-dashboard-move-actions form {
    margin: 0 !important;
}

.statistics-dashboard-move-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.3rem;
    min-width: 2.3rem;
    height: 2.3rem;
    min-height: 2.3rem;

    padding: 0 !important;

    border: 1px solid #d5dde5;
    border-radius: 0.55rem;

    background: #f3f6f9;
    color: #344054;

    font-size: 1rem;
    font-weight: 800;

    cursor: pointer;
}

.statistics-dashboard-move-actions button:hover:not(:disabled) {
    background: #e6ebf0;
}

.statistics-dashboard-move-actions button:disabled {
    opacity: 0.3;
    cursor: default;
}


/* Accueil : les statistiques respectent désormais leur ordre */

.dashboard-statistics-ordered {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1rem;
}

.dashboard-statistic-wide {
    grid-column: 1 / -1;

    margin-top: 0 !important;
    padding-top: 1rem;
}

.dashboard-statistics-ordered
.dashboard-statistic-card {
    width: auto !important;
    max-width: none !important;
}


@media (max-width: 1000px) {

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


@media (max-width: 700px) {

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

        gap: 0.6rem;
    }

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


@media (max-width: 390px) {

    .dashboard-statistics-ordered {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Accueil — donut dépenses par catégorie
   ========================================================== */

.dashboard-category-chart-layout {
    display: grid;

    grid-template-columns:
        minmax(220px, 320px)
        minmax(220px, 1fr);

    gap: 1.5rem;
    align-items: center;

    margin:
        0.5rem
        0
        1.25rem;
}

.dashboard-category-chart-layout
.statistics-category-chart {
    width: min(100%, 300px);
}


/* Smartphone */

@media (max-width: 700px) {

    .dashboard-category-chart-layout {
        grid-template-columns: 1fr;

        gap: 0.75rem;
    }

    .dashboard-category-chart-layout
    .statistics-category-chart {
        width: min(100%, 250px);
    }
}

/* ==========================================================
   Accueil PC — layout personnalisable
   ========================================================== */

@media (min-width: 901px) {

    .dashboard-statistics-ordered {
        display: grid !important;

        grid-template-columns:
            repeat(12, minmax(0, 1fr)) !important;

        gap: 1rem !important;
    }

    .dashboard-layout-item {
        position: relative;

        min-width: 0;

        cursor: grab;
    }

    .dashboard-layout-item:active {
        cursor: grabbing;
    }

    .dashboard-layout-span-3 {
        grid-column:
            span 3;
    }

    .dashboard-layout-span-4 {
        grid-column:
            span 4;
    }

    .dashboard-layout-span-6 {
        grid-column:
            span 6;
    }

    .dashboard-layout-span-8 {
        grid-column:
            span 8;
    }

    .dashboard-layout-span-12 {
        grid-column:
            span 12;
    }

    .dashboard-layout-item.is-dragging {
        opacity: 0.5;
    }

    .dashboard-layout-controls {
        display: flex;

        align-items: center;
        justify-content: space-between;

        gap: 0.5rem;

        margin-bottom: 0.4rem;
    }

    .dashboard-layout-handle {
        color: #98a2b3;

        font-size: 1rem;
        font-weight: 700;

        user-select: none;
    }

    .dashboard-layout-size-actions {
        display: flex;
        gap: 0.3rem;
    }

    .dashboard-layout-size-actions button {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        width: 2rem;
        min-width: 2rem;

        height: 2rem;
        min-height: 2rem;

        padding: 0 !important;

        border:
            1px solid
            #d5dde5;

        border-radius:
            0.5rem;

        background:
            #f3f6f9;

        color:
            #344054;

        font-weight: 800;

        cursor: pointer;
    }
}


/* Smartphone/tablette :
   on ignore complètement les préférences de largeur */

@media (max-width: 900px) {

    .dashboard-layout-controls {
        display: none !important;
    }

    .dashboard-layout-item {
        grid-column:
            auto !important;

        draggable:
            false;
    }
}

/* ==========================================================
   Accueil statistiques — smartphone final
   ========================================================== */

@media (max-width: 900px) {

    /*
     * Les préférences PC de largeur sont totalement
     * ignorées sur tablette/smartphone.
     */
    .dashboard-statistics-ordered {
        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap: 0.75rem !important;
    }

    .dashboard-statistics-ordered
    > .dashboard-layout-item {
        display: block !important;

        grid-column:
            1 / -1 !important;

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;
    }

    /*
     * Même les anciennes règles de cartes en 2 colonnes
     * ne doivent plus pouvoir agir ici.
     */
    .dashboard-statistics-ordered
    .dashboard-statistic-card,

    .dashboard-statistics-ordered
    .dashboard-statistics-detail,

    .dashboard-statistics-ordered
    .dashboard-statistic-wide {
        width:
            100% !important;

        max-width:
            100% !important;

        grid-column:
            1 / -1 !important;
    }

    /*
     * Aucun contrôle d'organisation sur smartphone.
     */
    .dashboard-layout-controls,
    .dashboard-layout-drag-handle,
    .dashboard-layout-resize-handle {
        display:
            none !important;
    }
}


/* ==========================================================
   Accueil statistiques — contrôles PC souris
   ========================================================== */

@media (min-width: 901px) {

    .dashboard-layout-controls {
        display: flex !important;

        align-items: center;
        justify-content: space-between;

        min-height: 2rem;

        margin-bottom: 0.35rem;
    }

    .dashboard-layout-drag-handle {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        min-width: 2rem;
        height: 2rem;

        padding: 0 0.4rem;

        border-radius: 0.45rem;

        color: #98a2b3;

        font-weight: 800;

        cursor: grab;

        user-select: none;
    }

    .dashboard-layout-drag-handle:hover {
        background: #f3f6f9;
        color: #475467;
    }

    .dashboard-layout-drag-handle:active {
        cursor: grabbing;
    }

    /*
     * Poignée horizontale ↔ :
     * tirer à gauche/droite pour changer la largeur.
     */
    .dashboard-layout-resize-handle {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        min-width: 2.2rem;
        height: 2rem;

        padding: 0 0.45rem;

        border:
            1px solid
            #d5dde5;

        border-radius:
            0.45rem;

        background:
            #f3f6f9;

        color:
            #475467;

        font-weight: 800;

        cursor:
            ew-resize;

        user-select:
            none;

        touch-action:
            none;
    }

    .dashboard-layout-resize-handle:hover {
        background:
            #e8edf2;
    }

    .dashboard-layout-item.is-resizing {
        z-index: 2;

        outline:
            2px dashed
            #98a2b3;

        outline-offset:
            3px;
    }

    /*
     * Les anciens boutons +/- sont neutralisés s'ils
     * subsistent quelque part dans le HTML/CSS.
     */
    .dashboard-layout-size-actions {
        display:
            none !important;
    }
}

/* ==========================================================
   Statistiques — comparaison période
   ========================================================== */

.statistics-comparison-block {
    margin-bottom: 1.5rem;
}

.statistics-comparison-heading {
    margin-bottom: 0.8rem;
}

.statistics-comparison-heading h3 {
    margin: 0.25rem 0 0;
}

.statistics-comparison-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 0.8rem;
}

.statistics-comparison-card {
    width: auto !important;
    max-width: none !important;

    padding: 1rem !important;

    border: 1px solid #dfe4e8;
    border-radius: 0.75rem;

    background: #fff;

    box-shadow: none !important;
}

.statistics-comparison-card > span {
    display: block;

    margin-bottom: 0.35rem;

    color: #66717c;

    font-size: 0.8rem;
    font-weight: 700;
}

.statistics-comparison-card > strong {
    display: block;

    margin-bottom: 0.45rem;

    font-size: 1.25rem;
}

.statistics-comparison-change {
    display: flex;

    align-items: center;
    gap: 0.45rem;

    font-size: 0.8rem;
}

.statistics-change-positive {
    color: #257942;
    font-weight: 700;
}

.statistics-change-negative {
    color: #a52a2a;
    font-weight: 700;
}


/* ==========================================================
   Statistiques — graphique évolution
   ========================================================== */

.statistics-evolution-chart-wrapper {
    position: relative;

    margin:
        1rem
        0
        1.5rem;

    padding: 1rem;

    border:
        1px solid
        #e0e5ea;

    border-radius:
        0.75rem;

    background:
        #fff;
}

.statistics-evolution-chart {
    width: 100%;

    overflow-x: auto;
}

.statistics-evolution-chart svg {
    display: block;

    width: 100%;
    min-width: 650px;

    height: auto;
}

.statistics-chart-zero-line {
    stroke: #cfd6dd;
    stroke-width: 1;
}

.statistics-chart-line {
    stroke-width: 3;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.statistics-chart-line-income {
    stroke: #2f855a;
    fill: #2f855a;
}

.statistics-chart-line-expenses {
    stroke: #c05621;
    fill: #c05621;
}

.statistics-chart-line-net {
    stroke: #4c51bf;
    fill: #4c51bf;
}

.statistics-chart-point {
    cursor: pointer;

    stroke: white;
    stroke-width: 2;
}

.statistics-chart-month-label {
    fill: #66717c;

    font-size: 20px;
    font-weight: 600;
}

.statistics-evolution-legend {
    display: flex;

    flex-wrap: wrap;
    gap: 1rem;

    margin-top: 0.75rem;

    color: #59636e;

    font-size: 0.8rem;
}

.statistics-evolution-legend > span {
    display: inline-flex;

    align-items: center;
    gap: 0.35rem;
}

.statistics-chart-dot {
    display: inline-block;

    width: 0.65rem;
    height: 0.65rem;

    border-radius: 50%;
}

.chart-income {
    background: #2f855a;
}

.chart-expenses {
    background: #c05621;
}

.chart-net {
    background: #4c51bf;
}

.statistics-chart-tooltip {
    display: grid;

    gap: 0.2rem;

    margin-top: 0.8rem;

    padding: 0.65rem 0.8rem;

    border-radius: 0.55rem;

    background: #f4f6f8;

    font-size: 0.8rem;
}


/* Smartphone */

@media (max-width: 700px) {

    .statistics-comparison-grid {
        grid-template-columns: 1fr;
    }

    .statistics-evolution-chart-wrapper {
        padding: 0.7rem;
    }

    .statistics-evolution-chart svg {
        min-width: 600px;
    }
}

/* ==========================================================
   Statistiques — évolution mensuelle en barres
   ========================================================== */

.statistics-evolution-chart-wrapper {
    position: relative !important;

    overflow: visible !important;

    margin:
        1rem
        0
        1.5rem !important;

    padding:
        1.25rem !important;

    border:
        1px solid
        #dde3e8 !important;

    border-radius:
        0.85rem !important;

    background:
        #fff !important;
}


.statistics-evolution-chart {
    width: 100% !important;

    overflow-x: auto !important;
    overflow-y: visible !important;
}


.statistics-evolution-chart svg {
    display: block !important;

    width: 100% !important;
    min-width: 850px !important;

    height: auto !important;
}


/* Grille */

.statistics-bar-grid-line {
    stroke:
        #e3e7eb;

    stroke-width:
        1;

    stroke-dasharray:
        4 3;
}


.statistics-bar-zero-line {
    stroke:
        #bbc4cc;

    stroke-width:
        1.5;
}


/* Axe des montants */

.statistics-bar-axis-label {
    fill:
        #59636e;

    font-size:
        14px;

    font-weight:
        600;
}


/* Mois */

.statistics-bar-month {
    fill:
        #344054;

    font-size:
        14px;

    font-weight:
        600;
}


/* Bâtons */

.statistics-bar {
    transition:
        opacity 0.15s ease,
        filter 0.15s ease;

    cursor: pointer;
}


.statistics-bar:hover {
    opacity: 0.78;

    filter:
        brightness(1.05);
}


/*
 * Recettes
 */
.statistics-bar-income {
    fill:
        #39a852;
}


/*
 * Dépenses
 */
.statistics-bar-expenses {
    fill:
        #f57c00;
}


/*
 * Résultat
 */
.statistics-bar-net {
    fill:
        #367fd3;
}


/*
 * Zone interactive invisible d'un mois.
 */
.statistics-month-hitbox {
    fill:
        transparent;

    pointer-events:
        all;
}


/* ==========================================================
   Légende
   ========================================================== */

.statistics-evolution-legend {
    display: flex !important;

    align-items: center;
    flex-wrap: wrap;

    gap:
        1.25rem !important;

    margin-top:
        0.75rem !important;
}


.statistics-evolution-legend > span {
    display: inline-flex;

    align-items: center;

    gap:
        0.4rem;
}


.statistics-chart-dot {
    width:
        0.75rem !important;

    height:
        0.75rem !important;

    border-radius:
        0.18rem !important;
}


.chart-income {
    background:
        #39a852 !important;
}


.chart-expenses {
    background:
        #f57c00 !important;
}


.chart-net {
    background:
        #367fd3 !important;
}


/* ==========================================================
   Tooltip
   ========================================================== */

.statistics-chart-tooltip {
    z-index: 20;

    display: grid;

    min-width:
        205px;

    gap:
        0.35rem;

    padding:
        0.75rem
        0.85rem !important;

    border:
        1px solid
        rgb(255 255 255 / 10%);

    border-radius:
        0.6rem;

    background:
        rgb(20 24 30 / 95%) !important;

    color:
        #fff !important;

    box-shadow:
        0 0.7rem 1.8rem
        rgb(0 0 0 / 20%);

    pointer-events:
        none;
}


.statistics-chart-tooltip[hidden] {
    display:
        none !important;
}


.statistics-chart-tooltip strong {
    color:
        #fff;

    margin-bottom:
        0.15rem;
}


.statistics-chart-tooltip span {
    font-size:
        0.8rem;
}


.statistics-tooltip-income {
    color:
        #71d487;
}


.statistics-tooltip-expenses {
    color:
        #ffad5c;
}


.statistics-tooltip-net {
    color:
        #75aef1;
}


/* ==========================================================
   Smartphone
   ========================================================== */

@media (max-width: 700px) {

    .statistics-evolution-chart-wrapper {
        padding:
            0.75rem !important;
    }

    /*
     * On conserve les 12 mois lisibles.
     * Le graphique peut défiler horizontalement.
     */
    .statistics-evolution-chart svg {
        width:
            850px !important;

        min-width:
            850px !important;
    }

    .statistics-bar-month {
        font-size:
            13px;
    }

    .statistics-bar-axis-label {
        font-size:
            12px;
    }
}

/* ==========================================================
   Graphique évolution — navigation vers les opérations
   ========================================================== */

.statistics-bar,
.statistics-month-hitbox,
.statistics-bar-month {
    cursor: pointer !important;
}

.statistics-bar-month {
    transition:
        fill 0.15s ease,
        font-weight 0.15s ease;
}

.statistics-bar-month:hover {
    fill: #2563eb !important;
    font-weight: 800 !important;
}

/* ==========================================================
   Camembert catégories — navigation opérations
   ========================================================== */

.statistics-category-slice,
.statistics-category-legend-item {
    cursor: pointer !important;
}

.statistics-category-legend-item:hover {
    background: #f4f6f8;
}

/* ==========================================================
   Statistiques — lignes catégories cliquables
   ========================================================== */

.statistics-category-row-link {
    color: inherit !important;
    text-decoration: none !important;

    cursor: pointer;
}

.statistics-category-row-link:hover {
    background: #f7f9fb;
}

.statistics-category-row-link:hover strong:first-child {
    text-decoration: underline;
}


/* ==========================================================
   Statistiques — valeurs mensuelles cliquables
   ========================================================== */

.statistics-month-value-link {
    display: inline-block;

    color: inherit;
    text-decoration: none;

    font-weight: inherit;

    cursor: pointer;
}

.statistics-month-value-link:hover {
    text-decoration: underline;
}

.statistics-month-value-link.amount-income {
    color: inherit;
}

.statistics-month-value-link.amount-expense {
    color: inherit;
}

.statistics-net-link {
    color: inherit !important;
}

/* ==========================================================
   Statistiques — cartes de synthèse cliquables
   ========================================================== */

.statistics-card-link {
    color: inherit !important;
    text-decoration: none !important;

    cursor: pointer;

    transition:
        transform 0.12s ease,
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}

.statistics-card-link:hover {
    transform: translateY(-2px);

    border-color: #c8d2dc !important;

    box-shadow:
        0 0.35rem 0.9rem
        rgb(16 24 40 / 7%) !important;
}

.statistics-card-link:active {
    transform: translateY(0);
}

.statistics-card-link:focus-visible {
    outline:
        2px solid
        currentColor;

    outline-offset:
        3px;
}

/* ==========================================================
   Statistiques — prévision fin de mois
   ========================================================== */

.statistics-forecast-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 0.9rem;
}


.statistics-forecast-card {
    width: auto !important;
    max-width: none !important;

    padding: 1rem !important;

    border:
        1px solid
        #dfe5ea !important;

    border-radius:
        0.8rem !important;

    background:
        #fff !important;

    box-shadow:
        none !important;
}


.statistics-forecast-upcoming {
    border-style:
        dashed !important;
}


.statistics-forecast-total {
    border-color:
        var(
            --entity-color,
            #1f6feb
        ) !important;

    background:
        color-mix(
            in srgb,
            var(
                --entity-color,
                #1f6feb
            ) 5%,
            white
        ) !important;
}


.statistics-forecast-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 0.75rem;

    margin-bottom: 0.9rem;
}


.statistics-forecast-heading > div {
    display: grid;

    gap: 0.2rem;
}


.statistics-forecast-heading > div > strong {
    font-size: 1.35rem;

    line-height: 1.15;
}


.statistics-forecast-kicker {
    color: #667085;

    font-size: 0.75rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.035em;
}


.statistics-forecast-count,
.statistics-forecast-badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 1.65rem;

    padding:
        0.15rem
        0.5rem;

    border-radius: 999px;

    background: #f2f4f7;

    color: #667085;

    font-size: 0.72rem;
    font-weight: 700;

    text-decoration: none;
}


.statistics-forecast-badge {
    background:
        color-mix(
            in srgb,
            var(
                --entity-color,
                #1f6feb
            ) 12%,
            white
        );

    color:
        var(
            --entity-color,
            #1f6feb
        );
}


.statistics-forecast-values {
    display: grid;

    gap: 0.5rem;
}


.statistics-forecast-values > a,
.statistics-forecast-values > div {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 0.75rem;

    padding-top: 0.5rem;

    border-top:
        1px solid
        #edf0f2;

    color: inherit;

    text-decoration: none;
}


.statistics-forecast-values > a {
    cursor: pointer;
}


.statistics-forecast-values > a:hover span {
    text-decoration: underline;
}


.statistics-forecast-values span {
    color: #667085;

    font-size: 0.78rem;
}


.statistics-forecast-values strong {
    font-size: 0.85rem;
}


@media (max-width: 900px) {

    .statistics-forecast-grid {
        grid-template-columns:
            1fr;
    }
}

/* ==========================================================
   Accueil — Prévision fin de mois
   ========================================================== */

.dashboard-home-forecast {
    height: 100%;
}


.dashboard-home-forecast-heading {
    margin-bottom: 0.8rem;
}


.dashboard-home-forecast-values {
    display: grid;

    gap: 0.4rem;
}


.dashboard-home-forecast-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    min-height: 2.5rem;

    padding:
        0.45rem
        0.65rem;

    border:
        1px solid
        #edf0f2;

    border-radius:
        0.55rem;

    color: inherit;

    text-decoration: none;
}


a.dashboard-home-forecast-row {
    cursor: pointer;
}


a.dashboard-home-forecast-row:hover {
    background: #f8fafb;
}


.dashboard-home-forecast-row > span {
    color: #667085;

    font-size: 0.82rem;
}


.dashboard-home-forecast-row > strong {
    font-size: 0.95rem;
}


.dashboard-home-forecast-upcoming {
    border-style: dashed;
}


.dashboard-home-forecast-total {
    border-color:
        color-mix(
            in srgb,
            var(
                --active-entity-color,
                #1f6feb
            ) 35%,
            #dfe5ea
        );

    background:
        color-mix(
            in srgb,
            var(
                --active-entity-color,
                #1f6feb
            ) 5%,
            white
        );
}


.dashboard-home-forecast-total > span,
.dashboard-home-forecast-total > strong {
    font-weight: 800;
}


.dashboard-home-forecast-breakdown {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0.5rem;

    margin-top: 0.65rem;
}


.dashboard-home-forecast-breakdown > div {
    display: grid;

    gap: 0.15rem;

    padding:
        0.5rem
        0.65rem;

    border-radius: 0.5rem;

    background: #f8fafb;
}


.dashboard-home-forecast-breakdown span {
    color: #667085;

    font-size: 0.72rem;
}


.dashboard-home-forecast-breakdown strong {
    font-size: 0.82rem;
}


@media (max-width: 700px) {

    .dashboard-home-forecast-breakdown {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Statistiques — Budget vs réel
   ========================================================== */

.statistics-budget-period + .statistics-budget-period {
    margin-top: 1.5rem;

    padding-top: 1.5rem;

    border-top:
        1px solid
        #e5e9ed;
}


.statistics-budget-period-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.9rem;
}


.statistics-budget-period-heading h3 {
    margin: 0 0 0.15rem;

    font-size: 1rem;
}


.statistics-budget-summary {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 0.65rem;

    margin-bottom: 1rem;
}


.statistics-budget-summary > div {
    display: grid;

    gap: 0.15rem;

    padding: 0.7rem;

    border:
        1px solid
        #e4e8ec;

    border-radius: 0.65rem;

    background: #fafbfc;
}


.statistics-budget-summary span {
    color: #667085;

    font-size: 0.72rem;
}


.statistics-budget-summary strong {
    font-size: 0.95rem;
}


.statistics-budget-lines {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0.7rem;
}


.statistics-budget-line {
    min-width: 0;

    padding: 0.8rem;

    border:
        1px solid
        #e4e8ec;

    border-radius: 0.7rem;

    background: #fff;
}


.statistics-budget-line-warning {
    border-color: #e6b85c;
}


.statistics-budget-line-danger {
    border-color: #d96b6b;
}


.statistics-budget-line-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.55rem;
}


.statistics-budget-line-heading a {
    min-width: 0;

    overflow: hidden;

    color: inherit;

    font-weight: 800;

    text-decoration: none;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.statistics-budget-line-heading a:hover {
    text-decoration: underline;
}


.statistics-budget-line-heading strong {
    flex: 0 0 auto;

    font-size: 0.8rem;
}


.statistics-budget-progress {
    height: 0.48rem;

    overflow: hidden;

    margin-bottom: 0.65rem;

    border-radius: 999px;

    background: #edf0f2;
}


.statistics-budget-progress-value {
    height: 100%;

    border-radius: inherit;

    background:
        var(
            --entity-color,
            #1f6feb
        );
}


.statistics-budget-progress-warning
.statistics-budget-progress-value {
    background: #c88b17;
}


.statistics-budget-progress-danger
.statistics-budget-progress-value {
    background: #c33f3f;
}


.statistics-budget-line-values {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 0.4rem;
}


.statistics-budget-line-values > div {
    display: grid;

    gap: 0.1rem;
}


.statistics-budget-line-values span {
    color: #667085;

    font-size: 0.68rem;
}


.statistics-budget-line-values strong {
    overflow: hidden;

    font-size: 0.76rem;

    text-overflow: ellipsis;
}


.statistics-budget-negative {
    color: #b42318 !important;
}


@media (max-width: 900px) {

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


    .statistics-budget-lines {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .statistics-budget-line-values {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.6rem;
    }
}


/* ==========================================================
   NAVIGATION GLOBALE
   ========================================================== */

.global-entity-navigation {
    position: relative;

    z-index: 800;

    padding:
        0.65rem
        clamp(0.75rem, 2vw, 1.5rem);

    background:
        var(
            --entity-color,
            var(
                --active-entity-color,
                #1f6feb
            )
        );
}


/* ==========================================================
   PC
   ========================================================== */

.global-nav-desktop {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    gap: 1rem;
}


.global-nav-desktop-actions {
    display: flex;

    align-items: center;

    gap: 0.55rem;
}


.global-nav-desktop-actions > a,
.global-nav-more > summary {
    white-space: nowrap;
}


.global-nav-primary {
    font-weight: 800;
}


.global-nav-entity-name {
    overflow: hidden;

    color: inherit;

    font-weight: 800;

    text-decoration: none;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.global-nav-more {
    position: relative;
}


.global-nav-more > summary {
    cursor: pointer;

    list-style: none;
}


.global-nav-more > summary::-webkit-details-marker {
    display: none;
}


.global-nav-more-panel {
    position: absolute;

    top: calc(100% + 0.55rem);
    left: 0;

    z-index: 1000;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(180px, 1fr));

    gap: 0;

    width: min(440px, calc(100vw - 2rem));

    overflow: hidden;

    border:
        1px solid
        #dfe4e8;

    border-radius: 0.8rem;

    background: #fff;

    box-shadow:
        0 16px 40px
        rgba(16, 24, 40, 0.16);
}


.global-nav-menu-group {
    display: grid;

    align-content: start;

    gap: 0.15rem;

    padding: 0.8rem;
}


.global-nav-menu-group strong {
    margin-bottom: 0.2rem;

    color: #667085;

    font-size: 0.68rem;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.global-nav-menu-group a {
    padding:
        0.5rem
        0.55rem;

    border-radius: 0.45rem;

    color: #263238;

    font-size: 0.84rem;

    text-decoration: none;
}


.global-nav-menu-group a:hover {
    background: #f2f4f6;
}


/* ==========================================================
   MOBILE HEADER
   ========================================================== */

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


.global-nav-burger {
    display: grid;

    place-content: center;

    width: 2.65rem;
    height: 2.65rem;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.55);

    border-radius: 0.65rem;

    background:
        rgba(255, 255, 255, 0.16);

    cursor: pointer;
}


.global-nav-burger span {
    display: block;

    width: 1.15rem;
    height: 2px;

    margin: 2px 0;

    border-radius: 999px;

    background: currentColor;
}


.global-nav-mobile-title {
    overflow: hidden;

    color: inherit;

    font-weight: 800;

    text-decoration: none;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   MENU MOBILE
   ========================================================== */

.global-mobile-overlay {
    position: fixed;

    inset: 0;

    z-index: 1990;

    opacity: 0;

    background:
        rgba(16, 24, 40, 0.46);

    transition:
        opacity 0.2s ease;
}


.global-mobile-overlay-open {
    opacity: 1;
}


.global-mobile-menu {
    position: fixed;

    top: 0;
    bottom: 0;
    left: 0;

    z-index: 2000;

    display: flex;

    flex-direction: column;

    width:
        min(
            88vw,
            340px
        );

    transform:
        translateX(-105%);

    background: #fff;

    box-shadow:
        14px 0 40px
        rgba(16, 24, 40, 0.2);

    transition:
        transform 0.22s ease;
}


.global-mobile-menu-open {
    transform:
        translateX(0);
}


.global-mobile-menu-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding:
        1rem;

    border-bottom:
        1px solid
        #e5e9ed;

    background:
        var(
            --entity-color,
            var(
                --active-entity-color,
                #1f6feb
            )
        );
}


.global-mobile-menu-header > div {
    display: grid;

    gap: 0.1rem;
}


.global-mobile-menu-header span {
    opacity: 0.75;

    font-size: 0.72rem;

    text-transform: uppercase;
}


.global-mobile-menu-header strong {
    font-size: 1rem;
}


.global-mobile-close {
    display: grid;

    place-content: center;

    width: 2.5rem;
    height: 2.5rem;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.5);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.15);

    color: inherit;

    cursor: pointer;

    font-size: 1.55rem;

    line-height: 1;
}


.global-mobile-menu-content {
    flex: 1;

    overflow-y: auto;

    padding:
        0.85rem;
}


.global-mobile-actions {
    display: grid;

    gap: 0.55rem;

    margin-bottom: 1rem;
}


.global-mobile-actions a {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 2.8rem;

    text-decoration: none;
}


.global-mobile-links {
    display: grid;

    gap: 0.45rem;
}


.global-mobile-group {
    display: grid;

    gap: 0.15rem;

    padding:
        0.6rem 0;

    border-bottom:
        1px solid
        #edf0f2;
}


.global-mobile-group:last-child {
    border-bottom: 0;
}


.global-mobile-group > strong {
    padding:
        0
        0.55rem
        0.25rem;

    color: #667085;

    font-size: 0.68rem;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.global-mobile-group > a {
    padding:
        0.65rem
        0.6rem;

    border-radius: 0.5rem;

    color: #263238;

    font-weight: 600;

    text-decoration: none;
}


.global-mobile-group > a:hover,
.global-mobile-group > a:active {
    background: #f2f4f6;
}


body.global-navigation-open {
    overflow: hidden;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 760px) {

    .global-nav-desktop {
        display: none;
    }


    .global-nav-mobile {
        display: flex;

        align-items: center;

        width: 100%;

        gap: 0.8rem;
    }


    .global-entity-navigation {
        min-height: 3.8rem;
    }

}


@media (min-width: 761px) {

    .global-mobile-menu,
    .global-mobile-overlay {
        display: none !important;
    }

}


/* ==========================================================
   Navigation globale — changement d'entité
   ========================================================== */

.global-nav-entity-zone {
    display: flex;

    align-items: center;

    gap: 0.45rem;

    flex: 0 1 auto;

    min-width: 0;
}


.global-nav-entity-label {
    opacity: 0.8;

    font-size: 0.72rem;

    font-weight: 700;

    white-space: nowrap;
}


.global-nav-entity-switcher {
    width: auto;

    min-width: 9rem;
    max-width: 15rem;

    height: 2.35rem;

    padding:
        0 2rem
        0 0.65rem;

    border:
        1px solid
        rgba(255, 255, 255, 0.55);

    border-radius: 0.55rem;

    background-color:
        rgba(255, 255, 255, 0.16);

    color: inherit;

    font-weight: 700;

    cursor: pointer;
}


.global-nav-entity-switcher option {
    background: #fff;

    color: #263238;
}


/* ==========================================================
   Mobile — sélecteur dans le burger
   ========================================================== */

.global-mobile-entity-select-wrapper {
    padding:
        0.25rem
        0.55rem
        0.45rem;
}


.global-mobile-entity-switcher {
    width: 100%;

    min-height: 2.75rem;

    padding:
        0.55rem
        0.7rem;

    border:
        1px solid
        #d9dfe5;

    border-radius: 0.55rem;

    background: #fff;

    color: #263238;

    font-size: 0.9rem;

    font-weight: 700;
}


@media (max-width: 900px) {

    .global-nav-entity-zone {
        display: none;
    }
}


/* ==========================================================
   Navigation — sélecteur entité ajusté
   ========================================================== */

/* Plus de mention "Entité" sur PC */

.global-nav-entity-label {
    display: none !important;
}


/* ==========================================================
   Smartphone — sélecteur directement dans le bandeau
   ========================================================== */

.global-nav-mobile {
    justify-content: flex-start;
}


.global-nav-mobile-title {
    flex: 1 1 auto;

    min-width: 0;
}


.global-nav-mobile-header-switcher {
    display: none;

    flex: 0 1 auto;

    width: auto;
    max-width: 42vw;
    min-width: 7rem;

    height: 2.45rem;

    padding:
        0 1.8rem
        0 0.55rem;

    border:
        1px solid
        rgba(255, 255, 255, 0.55);

    border-radius: 0.55rem;

    background-color:
        rgba(255, 255, 255, 0.16);

    color: inherit;

    font-size: 0.82rem;
    font-weight: 700;

    cursor: pointer;
}


.global-nav-mobile-header-switcher option {
    background: #fff;

    color: #263238;
}


@media (max-width: 760px) {

    .global-nav-mobile-header-switcher {
        display: block;
    }

}


/*
 * Très petits écrans :
 * on garde burger + sélecteur lisibles.
 */
@media (max-width: 420px) {

    .global-nav-mobile-title {
        display: none;
    }


    .global-nav-mobile-header-switcher {
        margin-left: auto;

        max-width: calc(100vw - 5.5rem);
    }

}


/* ==========================================================
   Navigation globale — ajustements finaux
   ========================================================== */


/* ----------------------------------------------------------
   Accueil PC
   ---------------------------------------------------------- */

.global-nav-home {
    font-weight: 700;
}


/* ----------------------------------------------------------
   Virement en vert
   ---------------------------------------------------------- */

.global-nav-transfer,
.dashboard-transfer-action,
.global-mobile-actions
a[href*="/virements/nouveau/"] {
    border-color: #278a45 !important;

    background: #278a45 !important;

    color: #fff !important;

    font-weight: 700;
}


.global-nav-transfer:hover,
.dashboard-transfer-action:hover,
.global-mobile-actions
a[href*="/virements/nouveau/"]:hover {
    border-color: #20753a !important;

    background: #20753a !important;

    color: #fff !important;
}


/* ==========================================================
   Déconnexion PC
   ========================================================== */

.global-nav-logout-form {
    margin: 0;

    flex: 0 0 auto;
}


.global-nav-logout-button {
    min-height: 2.35rem;

    padding:
        0.45rem
        0.75rem;

    border:
        1px solid
        #b42318;

    border-radius: 0.55rem;

    background:
        #b42318;

    color:
        #fff;

    font-family: inherit;

    font-size: 0.8rem;
    font-weight: 800;

    cursor: pointer;

    white-space: nowrap;
}


.global-nav-logout-button:hover {
    border-color:
        #912018;

    background:
        #912018;
}


/* ==========================================================
   Maison dans le bandeau smartphone
   ========================================================== */

.global-nav-mobile-home {
    display: none;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 2.65rem;
    height: 2.65rem;

    border:
        1px solid
        rgba(255, 255, 255, 0.55);

    border-radius:
        0.65rem;

    background:
        rgba(255, 255, 255, 0.16);

    color:
        inherit;

    text-decoration:
        none;

    font-size:
        1.05rem;

    line-height:
        1;
}


.global-nav-mobile-home:hover,
.global-nav-mobile-home:active {
    background:
        rgba(255, 255, 255, 0.25);
}


/* ==========================================================
   Déconnexion burger smartphone
   ========================================================== */

.global-mobile-menu-content {
    display: flex;

    flex-direction: column;
}


.global-mobile-links {
    flex:
        1 0 auto;
}


.global-mobile-logout {
    margin-top:
        auto;

    padding-top:
        1rem;

    border-top:
        1px solid
        #e7eaee;
}


.global-mobile-logout form {
    margin:
        0;
}


.global-mobile-logout-button {
    width:
        100%;

    min-height:
        2.9rem;

    border:
        1px solid
        #b42318;

    border-radius:
        0.6rem;

    background:
        #b42318;

    color:
        #fff;

    font-family:
        inherit;

    font-weight:
        800;

    cursor:
        pointer;
}


.global-mobile-logout-button:hover,
.global-mobile-logout-button:active {
    background:
        #912018;

    border-color:
        #912018;
}


/* ==========================================================
   Smartphone
   ========================================================== */

@media (max-width: 760px) {

    .global-nav-mobile-home {
        display:
            inline-flex;
    }


    /*
     * Sur l'accueil uniquement :
     *
     * on garde :
     * - Nouvelle opération
     * - Virement
     *
     * on retire :
     * - Opérations
     * - ... Plus
     */
    .entity-dashboard-content
    .dashboard-primary-actions
    .dashboard-operations-action,

    .entity-dashboard-content
    .dashboard-primary-actions
    .dashboard-more-menu {
        display:
            none !important;
    }


    /*
     * Les deux actions restantes prennent
     * proprement la largeur disponible.
     */
    .entity-dashboard-content
    .dashboard-primary-actions {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .entity-dashboard-content
    .dashboard-main-action,

    .entity-dashboard-content
    .dashboard-transfer-action {
        width:
            100%;

        box-sizing:
            border-box;

        text-align:
            center;
    }

}


/* ==========================================================
   Très petit smartphone
   ========================================================== */

@media (max-width: 420px) {

    /*
     * Burger + maison + liste d'entité.
     *
     * On avait déjà masqué le nom central
     * sur ces écrans.
     */
    .global-nav-mobile-header-switcher {
        margin-left:
            auto;

        max-width:
            calc(
                100vw
                - 9rem
            );
    }

}


/* ==========================================================
   Navigation — maison / burger / accueil
   ========================================================== */


/* ----------------------------------------------------------
   Icône maison commune
   ---------------------------------------------------------- */

.global-nav-home-icon {
    display: block;

    width: 1.25rem;
    height: 1.25rem;

    flex: 0 0 auto;
}


/* ----------------------------------------------------------
   Bouton maison PC
   ---------------------------------------------------------- */

.global-nav-icon-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 2.65rem;

    width: 2.65rem;
    min-width: 2.65rem;
    max-width: 2.65rem;

    height: 2.65rem;
    min-height: 2.65rem;

    padding: 0 !important;

    box-sizing: border-box;

    border:
        1px solid
        rgba(255, 255, 255, 0.55);

    border-radius: 0.65rem;

    background:
        rgba(255, 255, 255, 0.16);

    color: inherit;

    text-decoration: none;
}


.global-nav-icon-button:hover {
    background:
        rgba(255, 255, 255, 0.26);
}


/* ----------------------------------------------------------
   Smartphone :
   burger et maison STRICTEMENT identiques en dimensions
   ---------------------------------------------------------- */

.global-nav-burger,
.global-nav-mobile-home {
    flex:
        0 0 2.65rem !important;

    width:
        2.65rem !important;

    min-width:
        2.65rem !important;

    max-width:
        2.65rem !important;

    height:
        2.65rem !important;

    min-height:
        2.65rem !important;

    max-height:
        2.65rem !important;

    padding:
        0 !important;

    box-sizing:
        border-box !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.55) !important;

    border-radius:
        0.65rem !important;

    background:
        rgba(255, 255, 255, 0.16) !important;
}


.global-nav-burger {
    display: grid;

    place-items: center;
}


.global-nav-mobile-home {
    align-items: center;
    justify-content: center;
}


/*
 * Les trois traits du burger restent centrés et ne peuvent
 * plus réduire la largeur du bouton.
 */
.global-nav-burger span {
    width: 1.15rem;

    flex: 0 0 auto;
}


/* ==========================================================
   Raccourcis de l'accueil
   ========================================================== */

/*
 * PC :
 * aucune seconde barre de boutons sur l'accueil.
 * Toute la navigation est maintenant dans le bandeau global.
 */

@media (min-width: 761px) {

    .dashboard-home-mobile-actions {
        display: none !important;
    }

}


/*
 * Smartphone :
 * on garde seulement les deux raccourcis demandés.
 */

@media (max-width: 760px) {

    .dashboard-home-mobile-actions {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 0.6rem;
    }


    /*
     * Opérations et Plus restent masqués sur l'accueil mobile.
     */
    .dashboard-home-mobile-actions
    .dashboard-operations-action,

    .dashboard-home-mobile-actions
    .dashboard-more-menu {
        display: none !important;
    }


    .dashboard-home-mobile-actions
    .dashboard-main-action,

    .dashboard-home-mobile-actions
    .dashboard-transfer-action {
        width: 100%;

        box-sizing: border-box;
    }

}


/* ==========================================================
   Accueil — Budget
   ========================================================== */

.dashboard-home-budget {
    height: 100%;
}


.dashboard-home-budget-main {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 0.55rem;

    margin-top: 0.8rem;
}


.dashboard-home-budget-main > div {
    display: grid;

    gap: 0.15rem;

    padding: 0.6rem;

    border:
        1px solid
        #e6eaee;

    border-radius:
        0.55rem;

    background:
        #fafbfc;
}


.dashboard-home-budget-main span {
    color: #667085;

    font-size: 0.7rem;
}


.dashboard-home-budget-main strong {
    font-size: 0.9rem;
}


.dashboard-home-budget-progress {
    height: 0.6rem;

    overflow: hidden;

    margin-top: 0.85rem;

    border-radius: 999px;

    background: #edf0f2;
}


.dashboard-home-budget-progress-value {
    height: 100%;

    border-radius: inherit;

    background:
        var(
            --entity-color,
            #1f6feb
        );
}


.dashboard-home-budget-progress-value.is-warning {
    background: #c88b17;
}


.dashboard-home-budget-progress-value.is-danger {
    background: #c33f3f;
}


.dashboard-home-budget-percent {
    display: flex;

    align-items: baseline;

    gap: 0.4rem;

    margin-top: 0.4rem;
}


.dashboard-home-budget-percent strong {
    font-size: 0.95rem;
}


.dashboard-home-budget-percent span {
    color: #667085;

    font-size: 0.72rem;
}


.dashboard-home-budget-alerts {
    display: flex;

    flex-wrap: wrap;

    gap: 0.4rem;

    margin-top: 0.75rem;
}


.dashboard-home-budget-alerts span {
    padding:
        0.25rem
        0.5rem;

    border-radius:
        999px;

    font-size: 0.7rem;

    font-weight: 800;
}


.dashboard-home-budget-alerts .is-warning {
    background: #fff4d8;

    color: #946200;
}


.dashboard-home-budget-alerts .is-danger {
    background: #fee9e7;

    color: #b42318;
}


.dashboard-home-budget-ok {
    margin-top: 0.75rem;

    color: #237a3b;

    font-size: 0.75rem;

    font-weight: 700;
}


.dashboard-home-budget-details {
    display: inline-block;

    margin-top: 0.75rem;

    color: inherit;

    font-size: 0.76rem;

    font-weight: 700;
}


/* Smartphone */

@media (max-width: 700px) {

    .dashboard-home-budget-main {
        grid-template-columns:
            1fr;
    }

}


/* ==========================================================
   Accueil — Centre d'alertes
   ========================================================== */

.dashboard-alert-center {
    border:
        1px solid
        #e5e9ed;
}


.dashboard-alert-count {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 1.8rem;
    height: 1.8rem;

    padding:
        0
        0.45rem;

    border-radius:
        999px;

    background:
        #f2f4f7;

    color:
        #475467;

    font-size:
        0.75rem;

    font-weight:
        800;
}


.dashboard-alert-list {
    display: grid;

    gap: 0.55rem;
}


.dashboard-alert {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 0.7rem;

    min-width: 0;

    padding:
        0.7rem
        0.8rem;

    border:
        1px solid
        #e4e8ec;

    border-radius:
        0.65rem;

    background:
        #fff;

    color:
        inherit;

    text-decoration:
        none;

    transition:
        background 0.12s ease,
        border-color 0.12s ease;
}


.dashboard-alert:hover {
    background:
        #fafbfc;
}


.dashboard-alert-warning {
    border-color:
        #e9c46a;
}


.dashboard-alert-danger {
    border-color:
        #e49a95;
}


.dashboard-alert-indicator {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width:
        1.7rem;

    height:
        1.7rem;

    border-radius:
        50%;

    font-size:
        0.8rem;

    font-weight:
        900;
}


.dashboard-alert-indicator-warning {
    background:
        #fff4d8;

    color:
        #946200;
}


.dashboard-alert-indicator-danger {
    background:
        #fee9e7;

    color:
        #b42318;
}


.dashboard-alert-content {
    display: grid;

    min-width: 0;

    gap:
        0.12rem;
}


.dashboard-alert-content strong {
    overflow:
        hidden;

    font-size:
        0.84rem;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.dashboard-alert-content > span {
    color:
        #667085;

    font-size:
        0.75rem;
}


.dashboard-alert-arrow {
    color:
        #98a2b3;

    font-size:
        1.35rem;

    font-weight:
        700;
}


/* ==========================================================
   Desktop
   ========================================================== */

@media (min-width: 761px) {

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

}


/* ==========================================================
   Smartphone
   ========================================================== */

@media (max-width: 760px) {

    .dashboard-alert-list {
        grid-template-columns:
            1fr;
    }


    .dashboard-alert {
        padding:
            0.75rem;
    }

}


/* ==========================================================
   Opérations à venir — UX
   ========================================================== */

.planned-operation-overdue {
    border-left:
        4px solid
        #c33f3f;
}


.planned-date-status {
    display: inline-flex;

    width: fit-content;

    margin-top:
        0.2rem;

    padding:
        0.15rem
        0.4rem;

    border-radius:
        999px;

    font-size:
        0.68rem;

    font-weight:
        800;
}


.planned-date-status.is-overdue {
    background:
        #fee9e7;

    color:
        #b42318;
}


.planned-date-status.is-today {
    background:
        #fff4d8;

    color:
        #946200;
}


.planned-row-buttons {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap:
        0.4rem;
}


#planned-bulk-submit:disabled {
    opacity:
        0.45;

    cursor:
        not-allowed;
}


/* Smartphone */

@media (max-width: 760px) {

    .planned-toolbar {
        align-items:
            stretch;
    }


    .planned-row-buttons {
        width:
            100%;

        justify-content:
            flex-end;
    }


    .planned-row-buttons
    .button-inline,

    .planned-row-buttons
    button {
        min-height:
            2.35rem;
    }

}


/* ==========================================================
   Accueil — masquer les anciens raccourcis sur PC
   ========================================================== */

@media (min-width: 761px) {

    /*
     * Sur l'accueil PC, la barre de navigation globale
     * remplace complètement les anciens boutons :
     *
     * - Nouvelle opération
     * - Virement
     * - Opérations
     * - ... Plus
     */
    .dashboard-primary-actions,
    .dashboard-home-mobile-actions {
        display: none !important;
    }

}


/* ==========================================================
   Accueil — raccourcis conservés sur smartphone
   ========================================================== */

@media (max-width: 760px) {

    .dashboard-primary-actions,
    .dashboard-home-mobile-actions {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 0.6rem;
    }


    /*
     * Sur mobile on ne conserve que :
     *
     * - Nouvelle opération
     * - Virement
     */
    .dashboard-primary-actions
    .dashboard-operations-action,

    .dashboard-primary-actions
    .dashboard-more-menu,

    .dashboard-home-mobile-actions
    .dashboard-operations-action,

    .dashboard-home-mobile-actions
    .dashboard-more-menu {
        display: none !important;
    }

}


/* ==========================================================
   Accueil — actions locales MOBILE UNIQUEMENT
   ========================================================== */

/*
 * Sécurité :
 * caché par défaut, donc également sur PC.
 */
.dashboard-home-actions-mobile-only {
    display: none !important;
}


/*
 * Smartphone uniquement.
 *
 * On conserve :
 * - Nouvelle opération
 * - Virement
 */
@media (max-width: 760px) {

    .dashboard-home-actions-mobile-only {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 0.6rem;
    }


    .dashboard-home-actions-mobile-only
    .dashboard-operations-action,

    .dashboard-home-actions-mobile-only
    .dashboard-more-menu {
        display: none !important;
    }


    .dashboard-home-actions-mobile-only
    .dashboard-main-action,

    .dashboard-home-actions-mobile-only
    .dashboard-transfer-action {
        width: 100%;

        box-sizing: border-box;

        text-align: center;
    }

}


/* ==========================================================
   AUDIT SMARTPHONE — LOT 1
   Opérations / À venir / Pointage / Frais
   ========================================================== */

@media (max-width: 700px) {

    /* ------------------------------------------------------
       Sécurité générale
       ------------------------------------------------------ */

    .entity-page-content,
    .dashboard-section,
    .card,
    .filter-card,
    .operation-form-card {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       Formulaires / filtres
       ------------------------------------------------------ */

    .filter-card,
    .expense-tracking-filter {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }


    .filter-card select,
    .filter-card input,
    .expense-tracking-filter select,
    .expense-tracking-filter input {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    /*
     * Les filtres principaux doivent être confortables
     * au doigt.
     */
    .operations-filter-panel select,
    .operations-filter-panel input,
    .planned-filter select,
    .reconciliation-filter select,
    .expense-tracking-filter select,
    .expense-tracking-filter input {
        min-height: 2.75rem;
    }


    /* ------------------------------------------------------
       Lignes d'opérations
       ------------------------------------------------------ */

    .operation-management-row {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }


    .operation-management-row > * {
        min-width: 0;
    }


    /*
     * Empêche les libellés longs, tiers et catégories
     * de provoquer un débordement horizontal.
     */
    .operation-management-row a,
    .operation-management-row span,
    .operation-management-row strong {
        overflow-wrap: anywhere;
    }


    /* ------------------------------------------------------
       Actions des opérations
       ------------------------------------------------------ */

    .operation-management-row
    .operation-actions {
        width: 100%;
        max-width: 100%;

        display: flex;
        flex-wrap: wrap;

        justify-content: flex-end;

        gap: 0.4rem;

        box-sizing: border-box;
    }


    .operation-management-row
    .operation-actions a,

    .operation-management-row
    .operation-actions button {
        min-height: 2.5rem;
    }


    /* ------------------------------------------------------
       OPÉRATIONS À VENIR
       ------------------------------------------------------ */

    .planned-filter {
        display: block;
    }


    .planned-filter select {
        width: 100%;
    }


    .planned-toolbar {
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 0.65rem;

        box-sizing: border-box;
    }


    .planned-toolbar label {
        min-height: 2.5rem;

        display: flex;
        align-items: center;

        gap: 0.5rem;
    }


    #planned-bulk-submit {
        width: 100%;
        min-height: 2.75rem;
    }


    .planned-row-buttons {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.45rem;
    }


    .planned-row-buttons a,
    .planned-row-buttons button {
        width: 100%;

        min-width: 0;

        min-height: 2.6rem;

        box-sizing: border-box;

        display: inline-flex;

        align-items: center;
        justify-content: center;
    }


    /* ------------------------------------------------------
       POINTAGE BANCAIRE
       ------------------------------------------------------ */

    .reconciliation-filter {
        display: block;

        width: 100%;
    }


    .reconciliation-filter select {
        width: 100%;
    }


    /*
     * Les actions Pointer / modifier/etc. peuvent revenir
     * à la ligne au lieu de dépasser de l'écran.
     */
    .reconciliation-filter
    + .dashboard-section
    .operation-actions {
        flex-wrap: wrap;
    }


    /* ------------------------------------------------------
       FRAIS / REMBOURSEMENTS
       ------------------------------------------------------ */

    .expense-tracking-filter {
        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap: 0.75rem;
    }


    .expense-tracking-filter
    .form-row {
        width: 100%;

        min-width: 0;

        margin: 0;
    }


    .expense-summary-grid {
        grid-template-columns:
            1fr !important;

        gap: 0.65rem;
    }


    .expense-tracking-row {
        min-width: 0;

        max-width: 100%;

        box-sizing: border-box;
    }


    .expense-tracking-row > * {
        min-width: 0;
    }


    .expense-tracking-row
    .expense-actions {
        width: 100%;

        display: flex;

        flex-wrap: wrap;

        gap: 0.45rem;

        box-sizing: border-box;
    }


    .expense-tracking-row
    .expense-actions form {
        min-width: 0;

        max-width: 100%;
    }


    .expense-tracking-row
    .expense-actions input {
        max-width: 100%;

        box-sizing: border-box;
    }


    .expense-tracking-row
    .expense-actions button {
        min-height: 2.5rem;
    }


    /* ------------------------------------------------------
       FORMULAIRES OPÉRATION
       ------------------------------------------------------ */

    .operation-form-card {
        width: 100%;

        padding:
            1rem;

        box-sizing: border-box;
    }


    .operation-form-card
    .form-grid {
        display: grid;

        grid-template-columns:
            1fr !important;

        gap: 0.8rem;
    }


    .operation-form-card
    .form-row {
        min-width: 0;

        width: 100%;
    }


    .operation-form-card
    input:not([type="checkbox"]):not([type="radio"]),

    .operation-form-card
    select,

    .operation-form-card
    textarea {
        width: 100%;

        min-width: 0;

        max-width: 100%;

        box-sizing: border-box;
    }


    .operation-form-card
    input:not([type="checkbox"]):not([type="radio"]),

    .operation-form-card
    select {
        min-height: 2.75rem;
    }


    /* ------------------------------------------------------
       Protection finale contre les débordements provoqués
       par ces quatre écrans.
       ------------------------------------------------------ */

    .operations-filter-panel,
    .planned-filter,
    .reconciliation-filter,
    .expense-tracking-filter,
    .expense-tracking-row,
    .operation-management-row {
        max-width: 100%;
    }

}


/* Très petits smartphones */

@media (max-width: 390px) {

    .planned-row-buttons {
        grid-template-columns:
            1fr;
    }


    .operation-form-card {
        padding:
            0.8rem;
    }

}


/* ==========================================================
   CORRECTIONS MOBILE — LOT 2
   ========================================================== */


/* ==========================================================
   1. Supprimer le faux espace sous toutes les pages
   ========================================================== */

/*
 * Le CSS historique contient :
 *
 *     main {
 *         min-height: 100vh;
 *     }
 *
 * Depuis l'ajout de la navigation globale,
 * cela donne :
 *
 *     bandeau + 100vh
 *
 * donc une zone vide sous la page.
 *
 * Toutes les pages applicatives contenant le menu global
 * passent maintenant en hauteur naturelle.
 */

.global-mobile-menu ~ main {
    min-height: 0 !important;
    height: auto !important;

    place-items: initial !important;
    align-content: start !important;
}


/*
 * Même sécurité sur les deux classes principales
 * utilisées dans l'application.
 */

main.dashboard-content,
main.content {
    min-height: 0 !important;
    height: auto !important;
}


/* ==========================================================
   2. Opérations récurrentes — smartphone
   ========================================================== */

@media (max-width: 700px) {

    /*
     * Carte compacte.
     */
    .recurring-card {
        width: 100% !important;
        max-width: 100% !important;

        padding: 0.8rem !important;

        box-sizing: border-box;
    }


    /*
     * Titre + montant / état.
     *
     * On évite que le deuxième bloc écrase
     * complètement le texte principal.
     */
    .recurring-main {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        align-items: start !important;

        gap: 0.6rem !important;
    }


    .recurring-main > div {
        min-width: 0 !important;
    }


    .recurring-main strong,
    .recurring-main span {
        overflow-wrap: anywhere;
    }


    /*
     * Détails :
     *
     * on supprime le gros pavé vertical
     * et on utilise une petite grille compacte.
     */
    .recurring-details {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            0.4rem
            0.7rem !important;

        margin:
            0.7rem
            0 !important;

        padding:
            0 !important;
    }


    .recurring-details > div {
        display: grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            0.1rem !important;

        min-width: 0 !important;

        padding:
            0.35rem
            0 !important;
    }


    .recurring-details dt {
        font-size: 0.72rem;

        line-height: 1.15;
    }


    .recurring-details dd {
        margin: 0 !important;

        min-width: 0 !important;

        text-align: left !important;

        font-size: 0.82rem;

        line-height: 1.2;

        overflow-wrap: anywhere;
    }


    /*
     * Ancienne règle mobile :
     *
     * .recurring-actions {
     *     display: grid;
     * }
     *
     * et tous les boutons width:100%.
     *
     * On l'annule.
     */
    .recurring-actions {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: wrap !important;

        align-items: center !important;

        gap: 0.4rem !important;

        margin-top: 0.55rem !important;
    }


    .recurring-actions form {
        display: inline-flex !important;

        width: auto !important;

        margin: 0 !important;
    }


    .recurring-actions a,
    .recurring-actions button {
        width: auto !important;
        min-width: 0 !important;

        min-height: 2.25rem !important;

        padding:
            0.45rem
            0.65rem !important;

        font-size:
            0.78rem !important;

        white-space:
            nowrap !important;

        flex:
            0 0 auto !important;
    }

}


/* Très petit smartphone */

@media (max-width: 390px) {

    .recurring-details {
        grid-template-columns:
            1fr !important;
    }


    /*
     * Même sur petit écran, les boutons ne prennent
     * pas chacun toute la largeur.
     */
    .recurring-actions {
        display: flex !important;
    }


    .recurring-actions a,
    .recurring-actions button {
        width: auto !important;
    }

}


/* ==========================================================
   CORRECTION MOBILE FINALE
   Scroll inutile + Opérations à venir
   ========================================================== */


/* ==========================================================
   1. HAUTEUR DES PAGES APPLICATIVES

   Correctif global html/body retiré :
   il empêchait le scroll normal de certaines pages.
   ========================================================== */

/* ==========================================================
   2. OPERATIONS A VENIR — SMARTPHONE
   ========================================================== */

@media (max-width: 700px) {

    /* ------------------------------------------------------
       Filtre compte
       ------------------------------------------------------ */

    .planned-filter {
        display: block !important;

        width: 100% !important;

        margin-bottom: 0.8rem !important;

        padding: 0.7rem !important;
    }


    .planned-filter select {
        width: 100% !important;
        max-width: 100% !important;

        min-height: 2.6rem !important;
    }


    /* ------------------------------------------------------
       Barre de sélection
       ------------------------------------------------------ */

    .planned-toolbar {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: wrap !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;

        gap: 0.5rem !important;

        margin-bottom: 0.7rem !important;
    }


    .planned-toolbar label,
    .planned-select-all {
        display: inline-flex !important;

        align-items: center !important;

        width: auto !important;
        min-height: 2.2rem !important;

        margin: 0 !important;

        gap: 0.4rem !important;
    }


    .planned-select-all input {
        width: 1.15rem !important;
        height: 1.15rem !important;

        flex: 0 0 auto !important;
    }


    /*
     * Le bouton de validation globale ne doit plus prendre
     * une ligne entière.
     */
    #planned-bulk-submit {
        width: auto !important;

        min-width: 0 !important;
        min-height: 2.3rem !important;

        padding:
            0.45rem
            0.65rem !important;

        font-size: 0.78rem !important;

        flex: 0 0 auto !important;
    }


    /* ------------------------------------------------------
       Chaque opération
       ------------------------------------------------------ */

    /*
     * On neutralise complètement l'ancienne grille desktop.
     */
    #planned-bulk-form
    .operation-management-row {
        display: grid !important;

        grid-template-columns:
            auto
            minmax(0, 1fr) !important;

        grid-template-rows:
            auto
            auto !important;

        align-items: start !important;

        column-gap: 0.65rem !important;
        row-gap: 0.55rem !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        padding: 0.75rem !important;

        box-sizing: border-box !important;
    }


    /*
     * Case à cocher :
     * première colonne, première ligne.
     */
    #planned-bulk-form
    .planned-checkbox {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: auto !important;

        padding: 0.1rem 0 0 !important;

        align-self: start !important;
    }


    #planned-bulk-form
    .planned-checkbox input {
        width: 1.2rem !important;
        height: 1.2rem !important;
    }


    /*
     * Le contenu principal utilise tout l'espace disponible.
     *
     * On prend volontairement les enfants hors checkbox/actions
     * afin de neutraliser l'ancienne répartition en colonnes.
     */
    #planned-bulk-form
    .operation-management-row
    > :not(.planned-checkbox):not(.operation-actions):not(.planned-row-buttons) {
        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /*
     * Pas de colonnes étroites qui cassent les mots
     * sur deux caractères.
     */
    #planned-bulk-form
    .operation-management-row strong,

    #planned-bulk-form
    .operation-management-row span,

    #planned-bulk-form
    .operation-management-row a {
        word-break: normal !important;

        overflow-wrap: break-word !important;

        white-space: normal;
    }


    /* ------------------------------------------------------
       Boutons Modifier / Valider
       ------------------------------------------------------ */

    #planned-bulk-form
    .planned-row-buttons,

    #planned-bulk-form
    .operation-actions {
        grid-column:
            1 / -1 !important;

        grid-row:
            2 !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: wrap !important;

        justify-content: flex-end !important;
        align-items: center !important;

        width: 100% !important;

        gap: 0.4rem !important;

        margin: 0 !important;
    }


    #planned-bulk-form
    .planned-row-buttons a,

    #planned-bulk-form
    .planned-row-buttons button,

    #planned-bulk-form
    .operation-actions a,

    #planned-bulk-form
    .operation-actions button {
        width: auto !important;

        min-width: 0 !important;
        min-height: 2.25rem !important;

        padding:
            0.4rem
            0.65rem !important;

        font-size: 0.78rem !important;

        line-height: 1.1 !important;

        white-space: nowrap !important;

        flex:
            0 0 auto !important;
    }


    /* ------------------------------------------------------
       Retard / Aujourd'hui
       ------------------------------------------------------ */

    .planned-date-status {
        display: inline-flex !important;

        width: fit-content !important;

        margin-top: 0.25rem !important;
    }

}


/* ==========================================================
   Très petit smartphone
   ========================================================== */

@media (max-width: 390px) {

    /*
     * Même sur petit écran, Modifier et Valider restent
     * côte à côte tant qu'ils tiennent.
     */
    #planned-bulk-form
    .planned-row-buttons {
        display: flex !important;

        grid-template-columns:
            none !important;
    }


    #planned-bulk-form
    .planned-row-buttons a,

    #planned-bulk-form
    .planned-row-buttons button {
        width: auto !important;
    }

}

/* LOT1_OPERATION_FORM_START */

/* ==========================================================
   LOT 1 — FORMULAIRES OPERATIONS
   ========================================================== */

.check-number-field[hidden] {
    display: none !important;
}

.operation-checkbox-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 0.55rem !important;

    width: 100%;
    box-sizing: border-box;
}

.operation-checkbox-row input[type="checkbox"] {
    width: 1.15rem !important;
    height: 1.15rem !important;

    min-width: 1.15rem !important;
    max-width: 1.15rem !important;

    flex: 0 0 1.15rem !important;

    margin: 0 !important;
}

.operation-checkbox-row label {
    display: inline-block !important;

    width: auto !important;

    flex: 0 1 auto !important;

    margin: 0 !important;

    text-align: left !important;

    line-height: 1.25;
}

@media (max-width: 700px) {

    .operation-checkbox-row {
        gap: 0.6rem !important;

        min-height: 2.4rem;
    }

    .operation-checkbox-row input[type="checkbox"] {
        width: 1.25rem !important;
        height: 1.25rem !important;

        min-width: 1.25rem !important;
        max-width: 1.25rem !important;

        flex: 0 0 1.25rem !important;
    }

    .operation-checkbox-row label {
        width: auto !important;

        margin: 0 !important;

        text-align: left !important;
    }
}

/* LOT1_OPERATION_FORM_END */

/* LOT2_MOBILE_ACTIONS_START */

/* ==========================================================
   LOT 2 — OPERATIONS / POINTAGE — SMARTPHONE

   IMPORTANT :
   Les règles sont volontairement exclues du formulaire
   #planned-bulk-form afin de ne pas toucher au layout
   "Opérations à venir" déjà validé.
   ========================================================== */

@media (max-width: 700px) {

    /* ------------------------------------------------------
       1. LIGNES D'OPERATIONS CLASSIQUES
       ------------------------------------------------------ */

    .operation-list
    > .operation-row.operation-management-row:not(
        #planned-bulk-form .operation-management-row
    ) {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        align-items:
            start !important;

        column-gap:
            0.65rem !important;

        row-gap:
            0.35rem !important;

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        box-sizing:
            border-box !important;
    }


    /* ------------------------------------------------------
       2. CONTENU PRINCIPAL
       ------------------------------------------------------ */

    .operation-list
    > .operation-row.operation-management-row
    > .operation-main {
        grid-column:
            1 !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        width:
            100% !important;

        overflow:
            hidden;
    }


    .operation-list
    > .operation-row.operation-management-row
    > .operation-main strong,

    .operation-list
    > .operation-row.operation-management-row
    > .operation-main span {
        display:
            block;

        min-width:
            0;

        max-width:
            100%;

        word-break:
            normal !important;

        overflow-wrap:
            break-word !important;

        white-space:
            normal;
    }


    /*
     * On interdit explicitement le comportement où un mot
     * se retrouvait découpé quasiment caractère par caractère.
     */
    .operation-list
    > .operation-row.operation-management-row
    > .operation-main * {
        word-break:
            normal !important;
    }


    /* ------------------------------------------------------
       3. COLONNE MONTANT + ACTIONS
       ------------------------------------------------------ */

    .operation-list
    > .operation-row.operation-management-row
    > .operation-actions {
        grid-column:
            2 !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            flex-end !important;

        justify-content:
            flex-start !important;

        gap:
            0.35rem !important;

        width:
            auto !important;

        min-width:
            max-content !important;

        max-width:
            9.5rem !important;

        margin:
            0 !important;
    }


    /* ------------------------------------------------------
       4. MONTANT
       ------------------------------------------------------ */

    .operation-list
    > .operation-row.operation-management-row
    > .operation-actions
    > .operation-amount {
        display:
            block !important;

        width:
            auto !important;

        min-width:
            max-content !important;

        margin:
            0 0 0.1rem 0 !important;

        text-align:
            right !important;

        white-space:
            nowrap !important;

        line-height:
            1.2 !important;
    }


    /* ------------------------------------------------------
       5. FORMULAIRES D'ACTION
       ------------------------------------------------------ */

    .operation-list
    > .operation-row.operation-management-row
    > .operation-actions form {
        display:
            flex !important;

        justify-content:
            flex-end !important;

        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        margin:
            0 !important;
    }


    /* ------------------------------------------------------
       6. BOUTONS
       Modifier / Corbeille / Restaurer /
       Chèque encaissé / Annuler encaissement /
       Pointer / Dépointer
       ------------------------------------------------------ */

    .operation-list
    > .operation-row.operation-management-row
    > .operation-actions a,

    .operation-list
    > .operation-row.operation-management-row
    > .operation-actions button {
        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        min-height:
            2rem !important;

        padding:
            0.35rem
            0.55rem !important;

        margin:
            0 !important;

        font-size:
            0.75rem !important;

        line-height:
            1.1 !important;

        text-align:
            center !important;

        white-space:
            nowrap !important;

        box-sizing:
            border-box !important;
    }


    /* ------------------------------------------------------
       7. POINTAGE BANCAIRE
       ------------------------------------------------------ */

    .reconciliation-filter
    + .dashboard-section
    .operation-management-row {
        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        align-items:
            start !important;

        column-gap:
            0.65rem !important;

        row-gap:
            0.35rem !important;
    }


    .reconciliation-filter
    + .dashboard-section
    .operation-main {
        grid-column:
            1 !important;

        min-width:
            0 !important;
    }


    .reconciliation-filter
    + .dashboard-section
    .operation-actions {
        grid-column:
            2 !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        flex-wrap:
            nowrap !important;

        align-items:
            flex-end !important;

        justify-content:
            flex-start !important;

        gap:
            0.35rem !important;

        width:
            auto !important;

        min-width:
            max-content !important;

        margin:
            0 !important;
    }


    .reconciliation-filter
    + .dashboard-section
    .operation-actions
    .operation-amount {
        order:
            0 !important;

        width:
            auto !important;

        min-width:
            max-content !important;

        margin:
            0 !important;

        white-space:
            nowrap !important;
    }


    .reconciliation-filter
    + .dashboard-section
    .operation-actions form {
        order:
            1 !important;

        width:
            auto !important;

        margin:
            0 !important;
    }


    .reconciliation-filter
    + .dashboard-section
    .operation-actions button {
        width:
            auto !important;

        min-width:
            0 !important;

        min-height:
            2rem !important;

        padding:
            0.35rem
            0.55rem !important;

        font-size:
            0.75rem !important;

        line-height:
            1.1 !important;

        white-space:
            nowrap !important;
    }


    /* ------------------------------------------------------
       8. PROTECTION SPECIFIQUE CHEQUES

       Le bouton d'encaissement ne doit plus réduire la
       colonne du libellé jusqu'à casser les mots.
       ------------------------------------------------------ */

    .operation-list
    .operation-actions
    form[action*="/cheques/"] {
        max-width:
            9.5rem !important;
    }


    .operation-list
    .operation-actions
    form[action*="/cheques/"]
    button {
        font-size:
            0.72rem !important;

        padding:
            0.35rem
            0.45rem !important;
    }

}


/* ----------------------------------------------------------
   Très petits smartphones
   ---------------------------------------------------------- */

@media (max-width: 390px) {

    .operation-list
    > .operation-row.operation-management-row
    > .operation-actions {
        max-width:
            8.5rem !important;
    }


    .operation-list
    > .operation-row.operation-management-row
    > .operation-actions a,

    .operation-list
    > .operation-row.operation-management-row
    > .operation-actions button {
        font-size:
            0.72rem !important;

        padding:
            0.32rem
            0.45rem !important;
    }


    .operation-list
    .operation-actions
    form[action*="/cheques/"] {
        max-width:
            8.5rem !important;
    }

}

/* LOT2_MOBILE_ACTIONS_END */

/* LOT2_MOBILE_BUTTON_SIZE_START */

/*
 * Boutons d'actions plus confortables au doigt sur smartphone.
 * Aucun changement de structure des cartes.
 */
@media (max-width: 700px) {

    .operation-list
    > .operation-row.operation-management-row
    > .operation-actions a,

    .operation-list
    > .operation-row.operation-management-row
    > .operation-actions button,

    .reconciliation-filter
    + .dashboard-section
    .operation-actions button {

        min-height: 2.35rem !important;

        padding:
            0.48rem
            0.72rem !important;

        font-size:
            0.82rem !important;

        line-height:
            1.1 !important;
    }


    /*
     * Le bouton des chèques reste compact,
     * mais devient lui aussi plus facile à toucher.
     */
    .operation-list
    .operation-actions
    form[action*="/cheques/"]
    button {

        min-height: 2.35rem !important;

        padding:
            0.48rem
            0.62rem !important;

        font-size:
            0.78rem !important;
    }

}


/*
 * Même sur les petits iPhone, on conserve une taille
 * confortable au lieu de réduire les boutons.
 */
@media (max-width: 390px) {

    .operation-list
    > .operation-row.operation-management-row
    > .operation-actions a,

    .operation-list
    > .operation-row.operation-management-row
    > .operation-actions button,

    .reconciliation-filter
    + .dashboard-section
    .operation-actions button {

        min-height: 2.3rem !important;

        padding:
            0.45rem
            0.62rem !important;

        font-size:
            0.8rem !important;
    }


    .operation-list
    .operation-actions
    form[action*="/cheques/"]
    button {

        min-height: 2.3rem !important;

        padding:
            0.45rem
            0.55rem !important;

        font-size:
            0.76rem !important;
    }

}

/* LOT2_MOBILE_BUTTON_SIZE_END */

/* LOT3_EXPENSE_BULK_CSS_START */

.expense-bulk-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;

    margin-bottom: 1rem;
    padding: 0.8rem;

    border: 1px solid
        var(--border-color, #d8dde5);
    border-radius: 0.75rem;
}

.expense-bulk-select-all,
.expense-row-selector {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.expense-bulk-select-all input,
.expense-row-selector input {
    width: 1.15rem;
    height: 1.15rem;

    margin: 0;

    flex: 0 0 auto;
}

.expense-selection-count {
    font-size: 0.85rem;
    opacity: 0.75;
}

.expense-tracking-row {
    position: relative;
}

.expense-row-selector {
    align-self: start;

    padding: 0.2rem;

    cursor: pointer;
}


@media (min-width: 701px) {

    .expense-tracking-row {
        display: grid;

        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto
            auto;

        gap: 0.8rem;

        align-items: start;
    }

}


@media (max-width: 700px) {

    .expense-bulk-toolbar {
        display: grid;

        grid-template-columns:
            1fr;

        width: 100%;

        box-sizing: border-box;
    }

    .expense-bulk-toolbar select,
    .expense-bulk-toolbar button {
        width: 100%;

        min-height: 2.6rem;

        box-sizing: border-box;
    }

    .expense-bulk-select-all {
        min-height: 2.4rem;
    }

    .expense-bulk-select-all input,
    .expense-row-selector input {
        width: 1.35rem;
        height: 1.35rem;
    }

    .expense-tracking-row {
        display: grid !important;

        grid-template-columns:
            auto
            minmax(0, 1fr) !important;

        column-gap: 0.65rem;
        row-gap: 0.65rem;

        align-items: start;
    }

    .expense-row-selector {
        grid-column: 1;
        grid-row: 1;

        padding-top: 0.15rem;
    }

    .expense-tracking-main {
        grid-column: 2;
        grid-row: 1;
    }

    .expense-tracking-status {
        grid-column: 2;
    }

    .expense-actions {
        grid-column: 2;

        width: 100%;
    }

    .expense-actions form,
    .expense-actions button {
        max-width: 100%;
    }

}

/* LOT3_EXPENSE_BULK_CSS_END */

/* LOT3_EXPENSE_SELECT_ALL_MOBILE_FIX_START */
@media (max-width: 700px) {

    .expense-bulk-toolbar .expense-bulk-select-all {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 0 !important;
        padding: 0.35rem 0 !important;

        box-sizing: border-box !important;
    }

    .expense-bulk-toolbar .expense-bulk-select-all input {
        width: 1.35rem !important;
        height: 1.35rem !important;

        min-width: 1.35rem !important;
        max-width: 1.35rem !important;

        flex: 0 0 1.35rem !important;

        margin: 0 !important;
    }

    .expense-bulk-toolbar .expense-bulk-select-all span {
        display: inline-block !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        flex: 1 1 auto !important;

        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;

        line-height: 1.3 !important;
    }

}
/* LOT3_EXPENSE_SELECT_ALL_MOBILE_FIX_END */

/* LOT4_NAV_HOME_MOBILE_START */

@media (max-width: 760px) {

    /* ------------------------------------------------------
       Accueil : les 2 actions doivent être strictement
       alignées sans augmenter la hauteur des boutons.
       ------------------------------------------------------ */

    #dashboard-mobile-shortcuts
    .dashboard-mobile-new-operation,
    #dashboard-mobile-shortcuts
    .dashboard-mobile-transfer {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 2.6rem !important;

        padding-top: 0.45rem !important;
        padding-bottom: 0.45rem !important;

        box-sizing: border-box !important;

        font-size: 0.95rem !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;

        text-align: center !important;
        white-space: normal !important;
    }


    /* ------------------------------------------------------
       Burger : déconnexion dans le flux de la liste,
       jamais fixée au bas de l'écran.
       ------------------------------------------------------ */

    .global-mobile-menu {
        overflow-y: auto;
    }

    .global-mobile-logout {
        position: static !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: auto !important;

        margin: 0.8rem 1rem 1rem !important;
        padding: 0 !important;
    }

    .global-mobile-logout form {
        display: block !important;

        width: 100% !important;
        margin: 0 !important;
    }

    .global-mobile-logout button,
    .global-mobile-logout
    .global-nav-logout-button {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 2.6rem !important;

        box-sizing: border-box !important;

        font-size: 0.95rem !important;
        font-weight: 700 !important;

        text-align: center !important;
    }


    /* ------------------------------------------------------
       Synthèse compte : pas de raccourcis redondants
       sur smartphone.
       ------------------------------------------------------ */

    .account-summary-mobile-hide {
        display: none !important;
    }


    /* ------------------------------------------------------
       Accueil : en-têtes compacts.
       ------------------------------------------------------ */

    .dashboard-mobile-indicators-heading,
    .dashboard-mobile-alerts-heading {
        display: flex !important;

        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 0.6rem !important;

        width: 100% !important;
        min-width: 0 !important;
    }

    .dashboard-mobile-indicators-heading > *,
    .dashboard-mobile-alerts-heading > * {
        min-width: 0 !important;
    }

    .dashboard-mobile-configure-button {
        width: auto !important;
        min-width: 0 !important;
        min-height: 2rem !important;

        padding: 0.3rem 0.55rem !important;

        flex: 0 0 auto !important;

        font-size: 0.78rem !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;
    }

}

/* LOT4_NAV_HOME_MOBILE_END */

/* LOT4B_MOBILE_CORRECTIVE_START */

@media (max-width: 760px) {

    /*
     * Déconnexion :
     * maintenant placée dans le contenu du menu,
     * donc elle suit réellement le dernier élément.
     */
    .global-mobile-menu-content
    .global-mobile-logout {
        position: static !important;

        display: block !important;

        width: 100% !important;

        margin: 1rem 0 0 !important;
        padding: 0 !important;

        inset: auto !important;

        flex: 0 0 auto !important;
    }

    .global-mobile-menu-content
    .global-mobile-logout form {
        display: block !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .global-mobile-menu-content
    .global-mobile-logout button,
    .global-mobile-menu-content
    .global-mobile-logout-button {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        min-height: 2.6rem !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        font-size: 0.95rem !important;
        font-weight: 700 !important;
    }


    /*
     * Synthèse d'un compte :
     * les deux raccourcis ne doivent jamais apparaître
     * sur smartphone.
     */
    a.account-summary-mobile-hide,
    .account-summary-mobile-hide {
        display: none !important;
    }

}

/* LOT4B_MOBILE_CORRECTIVE_END */

/* LOT_CHECKS_PLANNED_MOBILE_START */

@media (max-width: 700px) {

    /*
     * Information chèque :
     * une ligne normale, sans découpage caractère par caractère.
     */
    #planned-bulk-form .planned-check-status {
        display: block !important;

        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;

        line-height: 1.3 !important;
    }

    /*
     * Une validation impossible reste visible mais clairement
     * désactivée. Modifier reste disponible juste à côté.
     */
    #planned-bulk-form button[disabled],
    #planned-bulk-form
    .planned-operation-checkbox[disabled] {
        opacity: 0.45;
        cursor: not-allowed;
    }

}

/* LOT_CHECKS_PLANNED_MOBILE_END */

/* A_VENIR_DESKTOP_CHECK_VISUAL_START */

/* Message de réussite : même logique visuelle qu'une action réussie. */
.alert.success {
    background: #e8f7ed;
    border: 1px solid #9bd4aa;
    color: #176b32;
}

/* Le bouton reste visuellement désactivé sur PC ET smartphone. */
.planned-single-validate:disabled,
.planned-single-validate[aria-disabled="true"] {
    opacity: 0.48 !important;
    cursor: not-allowed !important;
    filter: grayscale(35%);
    pointer-events: none;
}

/* État d'alerte lorsqu'un chèque ne possède pas encore de numéro. */
.planned-check-number-missing {
    display: inline-block;
    color: #b42318 !important;
    font-weight: 800 !important;
    line-height: 1.25;
}

/* A_VENIR_DESKTOP_CHECK_VISUAL_END */

/* RECURRING_UI_SPLIT_START */

.recurring-status-section + .recurring-status-section {
    margin-top: 1.5rem;
}

.recurring-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.recurring-section-heading h2 {
    margin: 0;
}

.recurring-section-heading p {
    margin: 0.3rem 0 0;
}

.recurring-auto-validation {
    margin: 0.25rem 0 0;
}

.recurring-auto-validation-label {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin: 0;
    cursor: pointer;
}

.recurring-auto-validation-label input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
}

.recurring-auto-validation-label span {
    display: inline;
    width: auto;
    white-space: nowrap;
}

@media (max-width: 700px) {


    .recurring-auto-validation-label {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.45rem !important;
    }

    .recurring-auto-validation-label input[type="checkbox"] {
        width: 1.2rem !important;
        height: 1.2rem !important;
        min-width: 1.2rem !important;
        flex: 0 0 1.2rem !important;
    }

    .recurring-auto-validation-label span {
        white-space: nowrap !important;
    }
}

/* RECURRING_UI_SPLIT_END */

/* BUDGET_IMPORT_UI_POLISH_START */

/*
 * Les deux actions principales doivent conserver le rendu bleu
 * de button-primary, y compris lorsqu'une règle plus générale
 * cible les liens des dashboard-heading.
 */
a.budget-create-button,
a.import-create-button {
    background: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

a.budget-create-button:hover,
a.budget-create-button:focus,
a.import-create-button:hover,
a.import-create-button:focus {
    background: #0b5ed7 !important;
    border-color: #0a58ca !important;
    color: #fff !important;
}

/*
 * Empêche "Mois", "Année", "Trimestre", etc. d'être découpés
 * caractère par caractère par la règle globale overflow-wrap.
 */
.budget-period-type {
    flex: 0 0 auto;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

@media (max-width: 700px) {
    .budget-period-heading {
        align-items: flex-start;
    }

    .budget-period-heading > div {
        flex: 1 1 auto;
        min-width: 0;
    }

    .budget-period-type {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    a.budget-create-button,
    a.import-create-button {
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
}

/* BUDGET_IMPORT_UI_POLISH_END */

/* BUDGET_VALUE_HELP_START */

.budget-summary-values dt {
    min-width: 0;
}

.budget-value-help {
    display: block;
    margin-top: 0.12rem;
    color: #8a939c;
    font-size: 0.72rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.25;
    overflow-wrap: normal;
}

@media (max-width: 700px) {
    .budget-summary-values > div {
        align-items: flex-start;
    }

    .budget-summary-values dd {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .budget-value-help {
        max-width: 13rem;
    }
}

/* BUDGET_VALUE_HELP_END */

/* PROFILE_NAVIGATION_START */

/* ----------------------------------------------------------
   Accès Profil — PC
   ---------------------------------------------------------- */

.global-nav-profile-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 2.35rem;

    padding: 0 0.75rem;

    border:
        1px solid
        rgba(255, 255, 255, 0.55);

    border-radius: 0.55rem;

    color: inherit;

    font-size: 0.9rem;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}

.global-nav-profile-link:hover {
    background:
        rgba(255, 255, 255, 0.18);

    text-decoration: none;
}


/* ----------------------------------------------------------
   Profil
   ---------------------------------------------------------- */

.profile-page {
    max-width: 1100px;
}

.profile-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 1rem;
}

.profile-card {
    padding: 1.25rem;
}

.profile-card h2 {
    margin-top: 0;
    margin-bottom: 0.35rem;
}

.profile-help {
    margin:
        0 0 1.2rem;

    color: #7b858f;

    font-size: 0.82rem;
    font-style: italic;

    line-height: 1.4;
}

.profile-memberships {
    display: grid;
    gap: 0.6rem;
}

.profile-membership {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding:
        0.75rem
        0;

    border-bottom:
        1px solid
        #e5e9ed;
}

.profile-membership:last-child {
    border-bottom: 0;
}

.profile-membership > div {
    display: grid;
    gap: 0.15rem;
}

.profile-membership small {
    color: #7b858f;
}

.profile-role {
    flex: 0 0 auto;

    padding:
        0.3rem
        0.55rem;

    border-radius: 999px;

    background: #eef2f6;

    color: #3f4b57;

    font-size: 0.78rem;
    font-weight: 700;

    white-space: nowrap;
}


/* ----------------------------------------------------------
   Profil + Déconnexion — menu mobile

   Les deux restent dans le flux normal du menu.
   Rien n'est fixé en bas du viewport.
   ---------------------------------------------------------- */

.global-mobile-account-actions,
.global-mobile-logout {
    position: static !important;

    inset: auto !important;

    width: 100%;

    margin:
        0.35rem 0
        0;

    padding: 0;
}

.global-mobile-account-actions {
    margin-top: 0.8rem;

    padding-top: 0.8rem;

    border-top:
        1px solid
        #e5e9ed;
}

.global-mobile-profile-button,
.global-mobile-logout-button {
    display: flex !important;

    align-items: center;
    justify-content: center;

    width: 100% !important;
    min-height: 2.8rem;

    box-sizing: border-box;

    margin: 0 !important;

    padding:
        0.65rem
        0.8rem !important;

    border-radius: 0.55rem;

    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}

.global-mobile-profile-button {
    border:
        1px solid
        #d9dfe5;

    background: #eef2f6;

    color: #263238;
}

.global-mobile-logout form {
    width: 100%;

    margin: 0 !important;
}

.global-mobile-logout-button {
    border:
        1px solid
        #d92d20;

    background: #d92d20;

    color: #fff;
}


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

    .profile-card {
        padding: 1rem;
    }

    .profile-membership {
        align-items: flex-start;
    }
}

/* PROFILE_NAVIGATION_END */


/* PASSWORD_EYE_START */
.password-eye-wrapper {
    position: relative;
}

.password-eye-wrapper input {
    width: 100%;
    padding-right: 3rem !important;
    box-sizing: border-box;
}

.password-eye {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 2rem;
    height: 2rem;
    padding: 0;

    border: 0;
    background: transparent;
    color: #66717c;

    cursor: pointer;
}

.password-eye svg {
    width: 1.2rem;
    height: 1.2rem;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}

.password-eye:hover,
.password-eye:focus-visible {
    color: #17202a;
}

.password-eye.is-visible {
    color: #1f6feb;
}
/* PASSWORD_EYE_END */