/* Mobile balance row - hidden by default */
.mobile-balance-row {
    display: none;
}

/* ===== Backdrop overlay for mobile panels ===== */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 40;
}

.sidebar-backdrop.visible {
    display: block;
}

/* ===== Tablet: <= 1024px ===== */
@media (max-width: 1024px) {
    /* Detail panel slides from right as overlay */
    .detail-panel {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 50;
        box-shadow: var(--shadow-lg);
        transform: translateX(100%);
        transition: transform var(--transition-slow);
    }

    .detail-panel.open {
        transform: translateX(0);
        display: flex;
    }

    /* Reduce sidebar width */
    .sidebar {
        width: 220px;
        min-width: 180px;
    }

    /* Summary bar compact */
    .summary-bar {
        gap: var(--space-xl);
        padding: var(--space-sm) var(--space-md);
    }

    /* Reduce account cards */
    .accounts-grid {
        gap: var(--space-md);
        padding: var(--space-md);
    }
}

/* ===== Mobile: <= 768px ===== */
@media (max-width: 768px) {
    /* Sidebar slides from left as overlay */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        z-index: 50;
        box-shadow: var(--shadow-lg);
        transform: translateX(-100%);
        transition: transform var(--transition-slow);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Show hamburger menu button */
    .toolbar__btn--menu {
        display: flex;
    }

    /* Hide search bar */
    .toolbar__center {
        display: none;
    }

    /* Toolbar compact */
    .toolbar {
        padding: 0 var(--space-sm);
    }

    .toolbar__title {
        font-size: var(--font-size-base);
    }

    /* Hide "Ajouter" label, keep only + icon */
    .toolbar__btn--primary span {
        display: none;
    }

    /* Single column accounts */
    .accounts-grid {
        grid-template-columns: 1fr;
        padding: var(--space-md);
    }

    /* Budget grid single column */
    .budget-grid {
        grid-template-columns: 1fr;
    }

    /* Report summary 2 columns */
    .report-summary {
        grid-template-columns: 1fr 1fr;
    }

    /* Transaction table: hide categorie and paiement */
    .transactions-table th:nth-child(5),
    .transactions-table td:nth-child(5),
    .transactions-table th:nth-child(6),
    .transactions-table td:nth-child(6) {
        display: none;
    }

    /* Reduce column widths */
    .col-amount,
    th.col-amount {
        width: 90px;
    }

    .col-balance,
    th.col-balance {
        width: 100px;
    }

    /* Summary bar smaller */
    .summary-bar {
        gap: var(--space-lg);
        padding: var(--space-sm) var(--space-md);
    }

    .summary-bar__value {
        font-size: var(--font-size-base);
    }

    /* Auth card */
    .auth-card {
        padding: var(--space-xl);
        margin: var(--space-md);
        max-width: 100%;
    }

    /* Detail panel full width */
    .detail-panel {
        width: 100%;
        min-width: unset;
        max-width: unset;
    }

    /* Settings */
    .settings-list-item {
        padding: var(--space-sm) var(--space-xs);
    }

    /* Status selector wrap */
    .status-selector {
        flex-wrap: wrap;
    }

    /* Form groups compact */
    .form-group {
        margin-bottom: var(--space-md);
    }

    /* Batch bar wrap */
    .batch-bar {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }
}

/* ===== Small mobile: <= 480px ===== */
@media (max-width: 480px) {
    /* Report summary single column */
    .report-summary {
        grid-template-columns: 1fr;
    }

    /* Hide solde column, show mobile balance row instead */
    .transactions-table th:nth-child(9),
    .transactions-table td:nth-child(9) {
        display: none;
    }

    .transactions-table .mobile-balance-row {
        display: table-row !important;
    }

    /* Remove border from main row, balance row takes it */
    .transactions-table tbody tr:not(.mobile-balance-row) + .mobile-balance-row {
        /* already styled below */
    }

    .transactions-table tbody tr:has(+ .mobile-balance-row) td {
        border-bottom: none !important;
    }

    .mobile-balance-row td {
        padding: 0 var(--space-md) var(--space-sm) !important;
        border-bottom: 1px solid var(--color-border-light) !important;
        font-family: var(--font-mono);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        text-align: right;
    }

    /* Even smaller columns */
    .col-amount,
    th.col-amount {
        width: 80px;
        font-size: var(--font-size-sm);
    }

    /* Form rows stack */
    .form-row {
        flex-direction: column;
    }

    /* Envelope grid 2 columns */
    .envelope-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Summary bar stacked */
    .summary-bar {
        gap: var(--space-md);
    }

    .summary-bar__value {
        font-size: var(--font-size-sm);
    }

    .summary-bar__label {
        font-size: 9px;
    }

    /* Sidebar narrower */
    .sidebar {
        width: 260px;
    }

    /* Table padding tighter */
    .transactions-table th,
    .transactions-table td {
        padding: var(--space-xs) var(--space-sm);
        font-size: var(--font-size-sm);
    }

    /* Toolbar even more compact */
    .toolbar__title {
        font-size: var(--font-size-sm);
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }

    /* Account cards compact */
    .account-card {
        padding: var(--space-md);
    }

    .account-card__balance {
        font-size: var(--font-size-lg);
    }

    /* Modal full width */
    .modal {
        width: 95vw;
        max-width: 95vw;
        max-height: 90vh;
    }

    /* Pagination compact */
    .pagination {
        gap: var(--space-xs);
        padding: var(--space-sm);
    }

    .pagination__btn {
        padding: var(--space-xs);
        font-size: var(--font-size-xs);
    }
}