/* =========================================================
   MOBILE DASHBOARD — SUMMARY FIRST
   Desktop remains unchanged
========================================================= */
@media (max-width: 768px) {

    /* -----------------------------------------------------
       MAIN DASHBOARD LAYOUT
    ----------------------------------------------------- */
    .dashboard-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem;
        padding: 0 0.5rem;
    }

    .left-summary-column,
    .right-budget-column {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* -----------------------------------------------------
       SUMMARY SECTION — PRIORITY
    ----------------------------------------------------- */
    .budget-summary-section {
        order: 1;
    }

    .budget-summary-card {
        padding: 1rem;
    }

    .budget-summary-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .summary-label {
        font-size: 0.85rem;
    }

    .summary-value {
        font-size: 1.1rem;
    }

    /* -----------------------------------------------------
       TOTAL FUNDS
    ----------------------------------------------------- */
    .total-funds-section {
        order: 2;
        text-align: center;
        padding: 0.75rem;
    }

    /* -----------------------------------------------------
       ACCOUNTS LIST
    ----------------------------------------------------- */
    .budget-accounts-list {
        order: 3;
    }

    .account-item {
        padding: 0.75rem;
        font-size: 0.95rem;
    }

    .account-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    /* -----------------------------------------------------
       BANK ACCOUNT HEADER
    ----------------------------------------------------- */
    .bank-account-header {
        position: relative;
        top: auto;
        margin-top: 0.5rem;
        padding: 1rem;
    }

    /* -----------------------------------------------------
       VIRTUAL ACCOUNTS — STACKED CARDS
    ----------------------------------------------------- */
    .virtual-account-item {
        margin: 0.75rem 0;
        width: 100%;
    }

    .virtual-account-grid {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        padding: 0.75rem;
    }

    .virtual-account-item .account-name,
    .real-account-name,
    .virtual-account-item .account-balance,
    .spent-amount,
    .extra-deposits,
    .percent-spent,
    .weekly-amount,
    .monthly-amount,
    .yearly-amount {
        text-align: center;
        font-size: 0.9rem;
    }

    .progress-bar-container {
        width: 100%;
        margin-top: 0.5rem;
    }

    /* -----------------------------------------------------
       NOTES — LAST
    ----------------------------------------------------- */
    .notes-card {
        order: 99;
    }

    .note-text {
        font-size: 0.95rem;
        max-height: none;
    }

    .note-textarea {
        font-size: 0.95rem;
    }

    .note-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .save-note-btn,
    .cancel-note-btn {
        width: 100%;
        max-width: 240px;
    }

    /* -----------------------------------------------------
       GENERAL TOUCH IMPROVEMENTS
    ----------------------------------------------------- */
    button,
    .toggle-btn,
    .edit-note-btn {
        min-height: 44px;
    }
}