.masroufi-expense-wrap {
    --masroufi-green: #C7F747;
    --masroufi-bg: #080908;
    --masroufi-card: #111310;
    --masroufi-border: #292c25;
    --masroufi-text: #f4f5ef;
    --masroufi-muted: #9a9e92;

    max-width: 620px;
    margin: 30px auto;
    color: var(--masroufi-text);
    font-family: inherit;
}

.masroufi-expense-wrap *,
.masroufi-expense-wrap *::before,
.masroufi-expense-wrap *::after {
    box-sizing: border-box;
}

.masroufi-expense-card {
    padding: 32px;
    background: var(--masroufi-card);
    border: 1px solid var(--masroufi-border);
    border-radius: 20px;
}

.masroufi-expense-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--masroufi-green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.masroufi-expense-heading h2 {
    margin: 0 0 8px;
    color: var(--masroufi-text);
    font-size: 28px;
    line-height: 1.25;
}

.masroufi-expense-heading h2 {
    margin: 0 0 25px;
    color: var(--masroufi-text);
    font-size: 18px;
    line-height: 1.25;
    text-align: center;
}

.masroufi-expense-form .masroufi-field {
    display: block;
    min-width: 0;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
}

.masroufi-expense-form .masroufi-field > label,
.masroufi-expense-form .masroufi-field legend {
    display: block;
    margin-bottom: 9px;
    color: var(--masroufi-text);
    font-size: 14px;
    font-weight: 600;
}

.masroufi-expense-form input[type="text"],
.masroufi-expense-form input[type="date"],
.masroufi-expense-form select,
.masroufi-expense-form textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--masroufi-border);
    border-radius: 10px;
    outline: none;
    background: var(--masroufi-bg);
    color: var(--masroufi-text);
    font: inherit;
    font-size: 14px;
    box-shadow: none;
}

.masroufi-expense-form textarea {
    min-height: 90px;
    resize: none;
}

.masroufi-expense-form input:focus,
.masroufi-expense-form select:focus,
.masroufi-expense-form textarea:focus {
    border-color: var(--masroufi-green);
}

.masroufi-expense-form input::placeholder,
.masroufi-expense-form textarea::placeholder {
    color: #74796c;
}

.masroufi-amount-input {
    position: relative;
}

.masroufi-amount-input input {
    padding-right: 55px !important;
}

.masroufi-amount-input > span {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: var(--masroufi-green);
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
}

label.masroufi-radio-option span {
    font-size: 14px;
}

.masroufi-expense-form .masroufi-field small {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    margin-left: 5px;
}

.masroufi-optional {
    color: var(--masroufi-muted);
    font-weight: 400;
}

.masroufi-necessity legend {
    margin-bottom: 10px;
}

.masroufi-radio-option {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 0 9px !important;
    padding: 12px 14px;
    border: 1px solid var(--masroufi-border);
    border-radius: 10px;
    background: var(--masroufi-bg);
    cursor: pointer;
    font-size: 13px !important;
    font-weight: 400 !important;
}

.masroufi-radio-option:has(input:checked) {
    border-color: var(--masroufi-green);
    background: #1a2010;
}

.masroufi-radio-option input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--masroufi-green);
}

.masroufi-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 14px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--masroufi-green);
    color: #080908;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}

.masroufi-submit:hover {
    transform: translateY(-2px);
    color: initial;
}

.masroufi-submit:disabled {
    opacity: .65;
    cursor: wait;
    transform: none;
}

.masroufi-submit-arrow {
    font-size: 21px;
}

.masroufi-notice,
.masroufi-login-message {
    margin: 0 0 22px;
    padding: 13px 15px;
    border: 1px solid var(--masroufi-border);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.masroufi-notice[hidden] {
    display: none !important;
}

.masroufi-notice-success {
    border-color: #45652a;
    background: #172112;
    color: #d7f7ae;
}

.masroufi-notice-error {
    border-color: #8c3535;
    background: #3a1717;
    color: #ffb4ab;
}

.masroufi-login-message {
    background: var(--masroufi-card);
    color: var(--masroufi-text);
}

.masroufi-login-message a {
    display: inline-block;
    margin-left: 6px;
    color: var(--masroufi-green);
    font-weight: 700;
}

@media (max-width: 600px) {
    .masroufi-expense-wrap {
        margin: 16px auto;
    }

    .masroufi-expense-card {
        padding: 22px 18px;
        border-radius: 14px;
    }

    .masroufi-expense-heading h2 {
        font-size: 24px;
    }
}


/* ========================================
   MASROUFI - HISTORIQUE DES DEPENSES
======================================== */

.masroufi-history {
    --masroufi-green: #C7F747;
    --masroufi-bg: #080908;
    --masroufi-card: #111310;
    --masroufi-border: #292c25;
    --masroufi-muted: #9a9e93;
    color: #f5f6f2;
    width: 100%;
}

.masroufi-history * {
    box-sizing: border-box;
}

.masroufi-history-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.masroufi-summary-card {
    background: var(--masroufi-card);
    border: 1px solid var(--masroufi-border);
    border-radius: 16px;
    padding: 24px;
}

.masroufi-summary-label {
    display: block;
    color: var(--masroufi-muted);
    font-size: 14px;
    margin-bottom: 12px;
}

.masroufi-summary-card strong {
    display: block;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.masroufi-summary-card strong span {
    color: var(--masroufi-green);
    font-size: 15px;
}

.masroufi-history-filters {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr auto;
    align-items: end;
    gap: 14px;
    background: var(--masroufi-card);
    border: 1px solid var(--masroufi-border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.masroufi-filter-field label {
    display: block;
    font-size: 13px;
    color: var(--masroufi-muted);
    margin-bottom: 8px;
}

.masroufi-history .masroufi-filter-field select,
.masroufi-history .masroufi-filter-field input {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    background: #080908;
    border: 1px solid var(--masroufi-border);
    border-radius: 8px;
    color: #f5f6f2;
    font-size: 14px;
}

.masroufi-history .masroufi-filter-field select:focus,
.masroufi-history .masroufi-filter-field input:focus {
    outline: none;
    border-color: var(--masroufi-green);
}

.masroufi-filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.masroufi-history .masroufi-filter-button,
.masroufi-history .masroufi-reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.masroufi-history .masroufi-filter-button {
    background: var(--masroufi-green);
    color: #080908;
    border: 1px solid var(--masroufi-green);
}

.masroufi-history .masroufi-reset-button {
    color: #f5f6f2;
    background: transparent;
    border: 1px solid var(--masroufi-border);
}

.masroufi-history-list {
    border: 1px solid var(--masroufi-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--masroufi-card);
}

.masroufi-expense-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid var(--masroufi-border);
}

.masroufi-expense-item:last-child {
    border-bottom: 0;
}

.masroufi-expense-item-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.masroufi-expense-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(199, 247, 71, 0.1);
    color: var(--masroufi-green);
    font-size: 23px;
}

.masroufi-expense-item-info {
    min-width: 0;
}

.masroufi-expense-item-info h3 {
    color: #f5f6f2;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
}

.masroufi-expense-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--masroufi-muted);
    font-size: 12px;
}

.masroufi-necessity-badge {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid var(--masroufi-border);
    border-radius: 20px;
}

.masroufi-expense-description {
    color: var(--masroufi-muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 10px 0 0;
    overflow-wrap: anywhere;
}

.masroufi-expense-item-amount {
    flex-shrink: 0;
    color: var(--masroufi-green);
    font-size: 17px;
    font-weight: 700;
    text-align: right;
}

.masroufi-expense-item-amount span {
    font-size: 12px;
}

.masroufi-history-empty {
    padding: 44px 20px;
    text-align: center;
    background: var(--masroufi-card);
    border: 1px solid var(--masroufi-border);
    border-radius: 16px;
}

.masroufi-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background: rgba(199, 247, 71, 0.1);
    color: var(--masroufi-green);
    border-radius: 50%;
    font-size: 26px;
}

.masroufi-history-empty h3 {
    color: #f5f6f2;
    margin: 16px 0 8px;
}

.masroufi-history-empty p {
    color: var(--masroufi-muted);
    font-size: 14px;
    margin-bottom: 20px;
}

.masroufi-history-empty a {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 8px;
    background: var(--masroufi-green);
    color: #080908;
    font-weight: 700;
    text-decoration: none;
}

.masroufi-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
    font-size: 14px;
}

.masroufi-pagination span {
    color: var(--masroufi-muted);
}

.masroufi-pagination a {
    color: var(--masroufi-green);
    text-decoration: none;
    font-weight: 600;
}

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

    .masroufi-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .masroufi-history-summary {
        gap: 10px;
    }

    .masroufi-summary-card {
        padding: 16px;
    }

    .masroufi-summary-label {
        font-size: 12px;
    }

    .masroufi-history-filters {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .masroufi-filter-actions {
        grid-column: auto;
        flex-wrap: wrap;
    }

    .masroufi-expense-item {
        align-items: flex-start;
        gap: 10px;
        padding: 16px 12px;
    }

    .masroufi-expense-item-main {
        gap: 10px;
    }

    .masroufi-expense-item-icon {
        width: 36px;
        height: 36px;
        font-size: 19px;
    }

    .masroufi-expense-item-info h3 {
        font-size: 14px;
    }

    .masroufi-expense-item-amount {
        font-size: 14px;
        white-space: nowrap;
    }

    .masroufi-pagination {
        gap: 10px;
        font-size: 12px;
    }
}




/* ========================================
   MASROUFI - SELECTS MODERNES
======================================== */

.masroufi-expense-wrap select,
.masroufi-history select {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 12px 44px 12px 15px;
    border: 1px solid #30332b;
    border-radius: 12px;
    background-color: #111310;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23C7F747' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    color: #f5f6f2;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.masroufi-expense-wrap select:hover,
.masroufi-history select:hover {
    border-color: #555a49;
}

.masroufi-expense-wrap select:focus,
.masroufi-history select:focus,
select#masroufi-stats-period:focus {
    outline: none;
    border-color: #C7F747;
    box-shadow: 0 0 0 3px rgba(199, 247, 71, .12);
}

.masroufi-expense-wrap select option,
.masroufi-history select option, select#masroufi-stats-period option {
    background-color: #111310;
    color: #f5f6f2;
}

.masroufi-expense-wrap select option:checked,
.masroufi-history select option:checked,
select#masroufi-stats-period option:checked {
    background-color: #29311b;
    color: #C7F747;
}

/* Indicateur de chargement pendant les filtres AJAX */
.masroufi-history {
    transition: opacity .2s ease;
}

.masroufi-history.masroufi-is-loading {
    opacity: .55;
    pointer-events: none;
}

.masroufi-view-expenses-link {
    color: #C7F747;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.masroufi-view-expenses-link:hover {
    color: #dcff87;
}
.masroufi-notice.masroufi-notice-success {
    display: flex;
    justify-content: space-between;
}

/* Loading pendant le filtrage et la réinitialisation */
.masroufi-history {
    position: relative;
}

.masroufi-history.masroufi-is-loading {
    opacity: 1;
    pointer-events: none;
    min-height: 180px;
}

.masroufi-history.masroufi-is-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(8, 9, 8, 0.78);
    border-radius: 12px;
}

.masroufi-history.masroufi-is-loading::after {
    content: "⟳  Chargement des dépenses...";
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 21;
    transform: translate(-50%);
    color: #C7F747;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    animation: masroufi-loading-pulse 1s ease-in-out infinite;
}

@keyframes masroufi-loading-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}



/* Version 1.3.0 — en-tête, comparaison mensuelle et filtres */
.masroufi-history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.masroufi-history-heading h2 {
    margin: 0 0 6px;
    color: #f5f6f2;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.2;
}

.masroufi-history-heading p {
    margin: 0;
    color: #9a9e93;
    font-size: 14px;
}

.masroufi-history .masroufi-add-expense-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 18px;
    border: 1px solid #C7F747;
    border-radius: 10px;
    background: #C7F747;
    color: #080908;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease, background .2s ease;
}

.masroufi-history .masroufi-add-expense-button:hover {
    background: #d9ff73;
    color: #080908;
    transform: translateY(-1px);
}

.masroufi-add-expense-button span {
    font-size: 21px;
    line-height: 1;
}

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

.masroufi-month-comparison small,
.masroufi-month-comparison-detail {
    display: block;
    margin-top: 8px;
    color: #9a9e93;
    font-size: 12px;
    line-height: 1.5;
}

.masroufi-month-comparison strong.is-increase { color: #ff8c8c; }
.masroufi-month-comparison strong.is-decrease { color: #C7F747; }
.masroufi-month-comparison strong.is-stable { color: #f5f6f2; }

@media (max-width: 900px) {
    .masroufi-history-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .masroufi-filter-actions { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .masroufi-history-heading {
        align-items: stretch;
        flex-direction: column;
    }
    .masroufi-history .masroufi-add-expense-button { width: 100%; }
    .masroufi-history-summary { grid-template-columns: 1fr; }
    .masroufi-history-filters { grid-template-columns: 1fr; }
    .masroufi-filter-actions { grid-column: auto; flex-wrap: wrap; }
    .masroufi-filter-actions > * { flex: 1; }
}


/* Tableau de bord des statistiques */
.masroufi-statistics {
    --masroufi-green: #C7F747;
    --masroufi-bg: #080908;
    --masroufi-card: #111310;
    --masroufi-border: #292c25;
    --masroufi-text: #f4f5ef;
    --masroufi-muted: #9a9e92;
    max-width: 1120px;
    margin: 32px auto;
    color: var(--masroufi-text);
    font-family: inherit;
}
.masroufi-statistics *, .masroufi-statistics *::before, .masroufi-statistics *::after { box-sizing: border-box; }
.masroufi-stats-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.masroufi-stats-header h1 { margin:0 0 6px; color:var(--masroufi-text); font-size:clamp(26px, 4vw, 34px); }
.masroufi-stats-header p { margin:0; color:var(--masroufi-muted); }
.masroufi-stats-add { display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:10px; background:var(--masroufi-green); color:#10120a !important; font-weight:700; text-decoration:none !important; white-space:nowrap; }
.masroufi-stats-period-form { display:flex; align-items:center; gap:12px; margin:0 0 26px; padding:16px; border:1px solid var(--masroufi-border); border-radius:14px; background:var(--masroufi-card); }
.masroufi-stats-period-form label { color:var(--masroufi-muted); font-weight:600; margin: 0; }
.masroufi-stats-period-form select { min-width:190px; padding:10px 36px 10px 12px; border:1px solid var(--masroufi-border); border-radius:9px; background:#080908; color:var(--masroufi-text); }
.masroufi-stats-section-title { margin:0 0 14px; font-size:21px; color:var(--masroufi-text); }
.masroufi-stats-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.masroufi-stats-card { min-width:0; padding:20px; border:1px solid var(--masroufi-border); border-radius:15px; background:var(--masroufi-card); }
.masroufi-stats-card > span { display:block; color:var(--masroufi-muted); font-size:13px; line-height:1.5; }
.masroufi-stats-card > strong { display:block; margin:12px 0 8px; font-size:clamp(22px,2.5vw,30px); line-height:1.2; overflow-wrap:anywhere; }
.masroufi-stats-card strong small { font-size:13px; font-weight:600; color:var(--masroufi-muted); }
.masroufi-stats-card p { margin:0; color:var(--masroufi-muted); font-size:12px; line-height:1.6; }
.masroufi-stats-card p b { color:var(--masroufi-text); }
.masroufi-stats-card-primary { border-color:rgba(199,247,71,.45); }
.masroufi-stats-card .is-increase { color:#ff9c8f; }
.masroufi-stats-card .is-decrease { color:var(--masroufi-green); }
.masroufi-stats-card .is-stable { color:var(--masroufi-muted); }
.masroufi-stats-period-note { margin:14px 0 28px; color:var(--masroufi-muted); font-size:13px; line-height:1.6; }
.masroufi-stats-period-note strong { color:var(--masroufi-text); }
.masroufi-stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.masroufi-stats-panel { min-width:0; padding:22px; border:1px solid var(--masroufi-border); border-radius:16px; background:var(--masroufi-card); }
.masroufi-stats-panel h2 { margin:0 0 20px; font-size:19px; color:var(--masroufi-text); }
.masroufi-stats-panel-full { grid-column:1/-1; }
.masroufi-stats-empty { color:var(--masroufi-muted); font-size:14px; }
.masroufi-stats-donut-layout { display:grid; grid-template-columns:minmax(145px, .8fr) minmax(0,1.2fr); gap:22px; align-items:center; }
.masroufi-stats-donut { width:min(100%,210px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; position:relative; margin:auto; }
.masroufi-stats-donut::before { content:""; position:absolute; inset:20%; border-radius:50%; background:var(--masroufi-card); }
.masroufi-stats-donut > span { z-index:1; display:flex; flex-direction:column; text-align:center; font-weight:800; font-size:16px; overflow-wrap:anywhere; max-width:65%; }
.masroufi-stats-donut > span small { color:var(--masroufi-muted); font-size:11px; }
.masroufi-stats-legend { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.masroufi-stats-legend li { display:grid; grid-template-columns:9px minmax(65px,1fr) auto; gap:8px; align-items:center; font-size:12px; }
.masroufi-stats-dot { width:9px; height:9px; border-radius:50%; }
.masroufi-stats-legend-label { color:var(--masroufi-muted); overflow-wrap:anywhere; }
.masroufi-stats-legend strong { color:var(--masroufi-text); font-size:12px; white-space:nowrap; }
.masroufi-stats-legend li > small { grid-column:2/-1; margin-top:-5px; color:var(--masroufi-muted); }
.masroufi-stats-month-chart { min-height:260px; display:flex; align-items:stretch; gap:10px; padding-top:8px; overflow-x:auto; }
.masroufi-stats-month-column { flex:1 0 45px; min-width:0; display:flex; flex-direction:column; align-items:center; gap:9px; }
.masroufi-stats-month-value { min-height:16px; color:var(--masroufi-muted); font-size:10px; white-space:nowrap; }
.masroufi-stats-month-track { flex:1; width:min(100%,38px); min-height:170px; display:flex; align-items:flex-end; justify-content:center; border-radius:8px 8px 3px 3px; background:#20231b; overflow:hidden; }
.masroufi-stats-month-track span { display:block; width:100%; min-height:3px; border-radius:7px 7px 2px 2px; background:var(--masroufi-green); }
.masroufi-stats-month-column > small { color:var(--masroufi-muted); font-size:10px; text-align:center; white-space:nowrap; }
.masroufi-stats-necessities { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 30px; }
.masroufi-stats-necessity-meta { display:flex; justify-content:space-between; gap:12px; margin-bottom:9px; font-size:13px; }
.masroufi-stats-necessity-meta > span { font-weight: bold; }
.masroufi-stats-necessity-meta strong { text-align:right; white-space:nowrap; }
.masroufi-stats-necessity-meta strong small { color:var(--masroufi-muted); font-weight:500; }
.masroufi-stats-bar { height:8px; border-radius:10px; background:#292c25; overflow:hidden; }
.masroufi-stats-bar span { display:block; height:100%; border-radius:10px; background:var(--masroufi-green); }
.masroufi-stats-necessity-row > small { display:block; margin-top:7px; font-size:12px; }
@media (max-width:900px) { .masroufi-stats-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .masroufi-stats-grid { grid-template-columns:1fr; } .masroufi-stats-panel-full { grid-column:auto; } }
@media (max-width:560px) { .masroufi-statistics { margin:22px auto; } .masroufi-stats-header { align-items:flex-start; flex-direction:column; } .masroufi-stats-add { width:100%; } .masroufi-stats-period-form { justify-content:space-between; flex-wrap:wrap; } .masroufi-stats-period-form select { flex:1; min-width:140px; } .masroufi-stats-cards { grid-template-columns:1fr 1fr; gap:9px; } .masroufi-stats-card { padding:14px; } .masroufi-stats-card > strong { font-size:22px; } .masroufi-stats-donut-layout { grid-template-columns:1fr; } .masroufi-stats-donut { width:170px; } .masroufi-stats-necessities { grid-template-columns:1fr; } .masroufi-stats-panel { padding:17px; } }


/* Statistiques : select harmonisé avec les autres formulaires Masroufi */
.masroufi-statistics .masroufi-stats-period-form select {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: auto;
    min-width: 220px;
    min-height: 50px;
    padding: 12px 44px 12px 15px;
    border: 1px solid #30332b;
    border-radius: 12px;
    background-color: #111310;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23C7F747' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    color: #f5f6f2;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
}
.masroufi-statistics .masroufi-stats-period-form select:focus { outline: none; border-color: var(--masroufi-green); }
.masroufi-stats-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.masroufi-statistics.masroufi-stats-is-loading { opacity: .55; pointer-events: none; transition: opacity .15s ease; }
.masroufi-statistics.masroufi-stats-is-loading::after {
    content: 'Actualisation des statistiques…';
    display: block;
    position: sticky;
    bottom: 18px;
    width: fit-content;
    margin: 16px auto 0;
    padding: 10px 16px;
    border: 1px solid var(--masroufi-border);
    border-radius: 999px;
    background: #111310;
    color: var(--masroufi-green);
    font-size: 13px;
}
.masroufi-expense-item h3 .desc {
    font-size: 13px;
    font-weight: 400;
    color: #a0a49a;
}
@media (max-width:560px) { .masroufi-statistics .masroufi-stats-period-form select { width:100%; min-width:0; flex:1 1 100%; } .masroufi-stats-cards { grid-template-columns:1fr 1fr; } }




/* Menu personnalisé Masroufi - Ultimate Member */
.um .masroufi-account-menu > li > a {
    display: flex;
	flex-direction: column;
    align-items: baseline;
    height: auto;
    gap: 12px;
    padding: 24px;
    color: #c7c9c1;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}



.um .masroufi-account-menu .um-account-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    color: #c7f747;
    border: 0!important;
    padding: 0!important;
}

.um .masroufi-account-menu .um-account-title {
    padding: 0;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

/* Masquer la flèche native pour ces liens externes */
.um .masroufi-account-menu .um-account-arrow {
    display: none;
}
.um-account-side .um-account-meta {
    display: flex;
    gap: 20px;
    align-items: center;
}

.um-account-side ul.masroufi-account-menu li:nth-last-child(2) {
    display:none;
}

.um-account-side ul.masroufi-account-menu li {
    width: calc(50% - 15px);
    box-sizing: border-box;
    background: #20231b;
    border-radius: 10px;
}

.um-account-side ul.masroufi-account-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 0;
    list-style: none;
}



form .um-account-side {
    width: 100%;
}

form .um-account-side .um-account-meta-img img {
    width: 80px;
    height: 80px;
}

form .um-account-side .um-account-meta .um-account-name {text-align: left;}

form .um-account-side .um-account-meta .um-account-name {
    padding: 0;
}

form .um-account-side .um-account-meta .um-account-name>a {
    color: #fff;
    font-size: 24px;
}


form .um-account-side .um-account-meta .um-account-profile-link:before {
    content: 'Bienvenue dans votre espace personnel';
    color: #9a9e92;
}

form .um-account-side .um-account-meta .um-account-profile-link a {
    display: none;
}

.um-form .um-account-main {
    width: 100%;
    background: #20231b;
    border-radius: 8px;
    margin-top: 80px;
    padding: 40px;
}

.um-form .um-account-main .um-account-heading {
    color: #fff;
    font-size: 22px;
    margin-bottom: 20px!important;
}

.um-form .um-account-main .um-account-heading i {
    color: #c7f747;
}


.um.um-password.um-um_password_id .um-center input {
    width: 100%!important;
}

.um-form .um-account-main input[type="submit"] {
    background: #c7f747!important;
    font-size: 14px!important;
    font-weight: 800!important;
    color: #000;
    border-radius: 10px!important;
}
.um-form .um-account-main input[type=text], .um-form .um-account-main input[type=password] {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-bottom: 15px!important;
    padding: 12px 14px!important;
    border: 1px solid #292c25!important;
    border-radius: 10px;
    outline: none!important;
    background: #080908!important;
    color: #FFF!important;
    font: inherit;
    font-size: 14px!important;
    box-shadow: none!important;
}

.um-form .um-account-main  label {
    color: #fff;
    font-size: 16px!important;
    margin-bottom: 0;
}

.um .masroufi-account-menu > li > a:hover {
    background: #c7f747!important;
}
.um .masroufi-account-menu > li > a:hover span, .um .masroufi-account-menu > li > a:hover i {
    color: #000;
}

span.green {
    color: #c7f747;
}

/* ========================================
   MASROUFI - NAVIGATION FLOTTANTE
======================================== */

.masroufi-floating-nav {
    position: fixed;
    z-index: 9999;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: #171914;
    border: 1px solid rgba(199, 247, 71, 0.2);
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.masroufi-floating-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 72px;
    min-height: 60px;
    padding: 8px 10px;
    color: #f4f5ef;
    text-decoration: none !important;
    border-radius: 13px;
    transition: background 0.2s ease, color 0.2s ease;
}

.masroufi-floating-nav-item:hover,
.masroufi-floating-nav-item:focus-visible,
.masroufi-floating-nav-item.masroufi-floating-nav-active {
    color: #C7F747;
    background: rgba(199, 247, 71, 0.12);
}

.masroufi-floating-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
}

.masroufi-floating-nav-icon svg {
    display: block;
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.masroufi-floating-nav-label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}


.page-id-16 div#page_content {
    color: #fff;
}

.masroufi-expense-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
}

.masroufi-delete-expense {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 100, 100, 0.3);
    border-radius: 8px;
    background: transparent;
    color: #ff7777;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.masroufi-delete-expense:hover {
    background: rgba(255, 100, 100, 0.1);
    border-color: #ff7777;
}

.masroufi-delete-expense:disabled {
    opacity: 0.5;
    cursor: wait;
}

.masroufi-delete-expense span[aria-hidden="true"] {
    font-size: 18px;
    line-height: 1;
}

@media (max-width: 480px) {
    .masroufi-expense-item-actions {
        gap: 7px;
    }

    .masroufi-delete-expense {
        padding: 6px 8px;
        font-size: 11px;
    }
}


/* ========================================
   MASROUFI - RACCOURCIS DE DEPENSES
======================================== */

.masroufi-quick-expenses {
    margin-bottom: 20px;
}

.masroufi-quick-expenses-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px 18px;
    border: 1px solid #c7f747;
    border-radius: 10px;
    background: #c7f747;
    color: #171b12;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.masroufi-quick-expenses-toggle:hover {
    background: #b6e438;
    transform: translateY(-1px);
}

.masroufi-quick-chevron {
    display: inline-block;
    transition: transform .2s ease;
}

.masroufi-quick-expenses-toggle.is-open .masroufi-quick-chevron {
    transform: rotate(180deg);
}

.masroufi-quick-expenses-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.masroufi-quick-expenses-list[hidden] {
    display: none !important;
}

.masroufi-quick-expense {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 88px;
    padding: 12px 8px;
    border: 1px solid rgba(199, 247, 71, .25);
    border-radius: 10px;
    background: #20231d;
    color: #fff;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.masroufi-quick-expense:hover,
.masroufi-quick-expense:focus-visible {
    border-color: #c7f747;
    background: #292e20;
    transform: translateY(-2px);
    outline: none;
}

.masroufi-quick-expense-icon {
    font-size: 24px;
    line-height: 1.2;
}

.masroufi-quick-expense-label {
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

@media (max-width: 600px) {
    .masroufi-quick-expenses-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .masroufi-quick-expense {
        min-height: 78px;
        padding: 10px 5px;
    }

    .masroufi-quick-expense-label {
        font-size: 12px;
    }
}

@media (max-width: 360px) {
    .masroufi-quick-expenses-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ========================================
   MASROUFI - FENÊTRES DE CONFIRMATION
======================================== */

.masroufi-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: masroufi-overlay-in 0.2s ease;
}

.masroufi-dialog {
    width: 100%;
    max-width: 420px;
    padding: 30px 26px 24px;
    background: #171a17;
    color: #f5f5f0;
    border: 1px solid rgba(199, 247, 71, 0.25);
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    text-align: center;
    animation: masroufi-dialog-in 0.25s ease;
}

.masroufi-dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(199, 247, 71, 0.12);
    border: 1px solid rgba(199, 247, 71, 0.3);
    color: #c7f747;
    font-size: 27px;
    font-weight: 700;
}

.masroufi-dialog-title {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.35;
}

.masroufi-dialog-message {
    margin: 0;
    color: #b9beb6;
    font-size: 14px;
    line-height: 1.7;
}

.masroufi-dialog-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.masroufi-dialog-btn {
    min-height: 44px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                transform 0.2s ease;
}

.masroufi-dialog-btn:hover {
    transform: translateY(-1px);
}

.masroufi-dialog-cancel {
    background: transparent;
    color: #e4e7df;
    border-color: #41463f;
}

.masroufi-dialog-cancel:hover {
    background: #252925;
    border-color: #747a70;
}

.masroufi-dialog-ok {
    background: #c7f747;
    color: #171a10;
}

.masroufi-dialog-ok:hover {
    background: #d6ff65;
}

.masroufi-dialog-ok.masroufi-dialog-error {
    background: #c7f747;
    color: #171a10;
}

.masroufi-dialog-btn:focus-visible {
    outline: 2px solid #c7f747;
    outline-offset: 3px;
}

@keyframes masroufi-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes masroufi-dialog-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 480px) {
    .masroufi-dialog {
        padding: 26px 20px 20px;
        border-radius: 16px;
    }

    .masroufi-dialog-title {
        font-size: 19px;
    }

    .masroufi-dialog-actions {
        flex-direction: column-reverse;
    }

    .masroufi-dialog-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .masroufi-dialog-overlay,
    .masroufi-dialog {
        animation: none;
    }

    .masroufi-dialog-btn {
        transition: none;
    }
}

.masroufi-page-intro {
    margin-bottom: 30px;
    text-align: center;
}

.masroufi-page-intro h1 {
    margin: 0 0 12px;
    color: #c7f747;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.2;
}

.masroufi-page-intro p {
    max-width: 650px;
    margin: 0 auto;
    color: #b8beb5;
    font-size: 16px;
    line-height: 1.7;
}