/* ===========================================
   desktop.css – Desktop-specific module layouts
   Only applies at ≥992px
   =========================================== */

@media (min-width: 992px) {

    /* ========================================
       DASHBOARD MODULE
       Two-column fixed/scroll layout
       ======================================== */
    .dashboard-container {
        flex-direction: row;
        gap: 2rem;
        height: 100%;
        overflow: hidden;
        padding: 1.5rem 2rem 0;
    }

    .dashboard-balance-section {
        width: 380px;
        flex-shrink: 0;
    }

    .dashboard-movements-section {
        flex: 1;
        overflow-y: auto;
        padding: 0 1rem 1rem 0;
    }

    .dashboard-movements-section .list-group-item {
        padding: 1rem 0.5rem;
        border-radius: 12px;
        margin-bottom: 4px;
        transition: background 0.2s;
    }

    .dashboard-movements-section .list-group-item:hover {
        background: #fdf2f3;
    }

    /* ========================================
       FORMS MODULE (Pagos, Conciliación)
       Centered form with max-width
       ======================================== */
    /*.desktop-form-container {
        max-width: 640px;
    }*/

    .desktop-form-container .card-custom {
        padding: 2rem 2.5rem;
    }

    .desktop-form-container .form-select,
    .desktop-form-container .form-control {
        padding: 0.65rem 1rem;
    }

    /* ========================================
       REPORTS MODULE
       Two-column card layout for report items
       ======================================== */
    .desktop-reports-grid .list-group {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 1rem;
    }

    .desktop-reports-grid .list-group .list-group-item {
        border-radius: 16px !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
        transition: all 0.25s;
    }

    .desktop-reports-grid .list-group .list-group-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    }

    /* ========================================
       CONCILIACION LIST / PAGOS REPORT
       Wider filters, fixed header, scrollable results
       ======================================== */
    .report-container {
        height: 100%;
        overflow: hidden;
        padding: 1.5rem 2rem 0;
    }

    .report-header-section {
        padding: 0;
        flex-shrink: 0;
    }

    .report-results-section {
        flex: 1;
        overflow-y: auto;
        padding: 0 1rem 1rem 0;
    }

    .desktop-report-detail {
        max-width: 900px;
        margin: 0 auto;
    }

    .report-header-section .desktop-report-detail {
        padding: 1.5rem 0 0.5rem;
    }

    .report-results-section .desktop-report-detail {
        padding: 0.5rem 0 2rem;
    }

    /* ========================================
       MENU MODULE
       Grid layout for menu items
       ======================================== */
    .desktop-menu-grid .list-group {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
    }

    .desktop-menu-grid .list-group .list-group-item {
        border-radius: 16px !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
        transition: all 0.25s;
    }

    .desktop-menu-grid .list-group .list-group-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        background: #fdf2f3 !important;
    }

    /* ========================================
       PROFILE MODULE
       Centered with max-width, two-column 
       for personal data
       ======================================== */
    .desktop-profile-container {
        max-width: 700px;
    }

    .desktop-profile-container .card-custom {
        padding: 2rem;
    }

    /* ========================================
       BREADCRUMB / PAGE HEADER on desktop
       ======================================== */
    .desktop-page-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid rgba(194, 0, 25, 0.1);
    }

    .desktop-page-header h4 {
        margin: 0;
        font-size: 1.5rem;
    }

    .desktop-page-header .btn {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

/* ============================================
   EXTRA WIDE (≥1400px) – Larger dashboard grid
   ============================================ */
@media (min-width: 1400px) {
    .dashboard-balance-section {
        width: 420px;
    }
}