/* File: Front-End/src/style/main/dashboard.css */
/* CSS Desktop & Large Screen cho Money Tracker */

/* =================================
   TABLET LANDSCAPE & DESKTOP STYLES
   ================================= */

@media (min-width: 769px) {
    
    /* =================================
       LAYOUT & CONTAINER
       ================================= */
    .container {
        max-width: 1280px;
        padding: 1.5rem 2rem;
        margin: 0 auto;
    }

    /* Ẩn mobile elements */
    .hamburger-btn,
    .mobile-nav,
    .mobile-menu-overlay {
        display: none !important;
    }

    /* =================================
       HEADER
       ================================= */
    .header-content {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 2rem;
    }

    .app-logo {
        justify-self: start;
    }

    .app-logo h1 {
        font-size: 1.5rem;
    }

    .header-subtitle {
        display: block !important;
        justify-self: end;
        font-size: 0.9rem;
        color: var(--color-text-muted);
        text-align: right;
    }

    /* =================================
       DESKTOP NAVIGATION
       ================================= */
    .desktop-nav {
        display: block;
        background-color: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        margin-bottom: 0.5rem;
    }

    .desktop-nav-links {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .tab-btn {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        background: none;
        border: none;
        border-bottom: 3px solid transparent;
        color: var(--color-text-secondary);
        padding: 1rem 1.5rem;
        cursor: pointer;
        font-weight: 500;
        font-size: 1rem;
        transition: all 0.2s ease;
        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
        position: relative;
    }

    .tab-btn:hover {
        color: var(--color-text-primary);
        background-color: rgba(96, 165, 250, 0.05);
    }

    .tab-btn.active {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
        background-color: rgba(96, 165, 250, 0.1);
        font-weight: 600;
    }

    .tab-btn i {
        font-size: 1.125rem;
    }

    /* =================================
       DASHBOARD GRID LAYOUT
       ================================= */
    .dashboard-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto auto;
        gap: 2rem;
        grid-template-areas:
            "summary summary summary summary jars jars jars jars chart chart chart chart"
            "transactions transactions transactions transactions transactions transactions transactions transactions chart chart chart chart";
    }

    .summary-card {
        grid-area: summary;
    }

    .jar-grid-container {
        grid-area: jars;
    }

    .chart-card {
        grid-area: chart;
        display: flex;
        flex-direction: column;
    }

    .transactions-card {
        grid-area: transactions;
    }

    /* =================================
       SUMMARY CARD DESKTOP
       ================================= */
    .summary-card-header {
        margin-bottom: 2.5rem;
    }

    #total-balance {
        font-size: 3rem;
        margin: 1rem 0;
    }

    .action-buttons {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin-top: 2rem;
    }

    .action-buttons #btn-edit-salary {
        grid-column: auto;
    }

    /* =================================
       JAR GRID DESKTOP LAYOUT
       ================================= */
    .jar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .jar-card {
        padding: 1.5rem;
    }

    .jar-card-balance {
        font-size: 1.75rem;
    }

    .jar-card-icon {
        width: 48px;
        height: 48px;
        font-size: 1.75rem;
    }

    /* =================================
       CHART CARD DESKTOP
       ================================= */
    .chart-wrapper {
        height: 300px;
        margin-bottom: 2rem;
        flex: 1;
    }

    .chart-legend {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-height: 200px;
        overflow-y: auto;
    }

    .legend-item {
        padding: 0.75rem;
        background-color: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-md);
        transition: all 0.2s ease;
    }

    .legend-item:hover {
        background-color: var(--color-surface);
        transform: translateX(4px);
    }

    /* =================================
       TRANSACTIONS DESKTOP
       ================================= */
    .transactions-list {
        gap: 0.75rem;
        max-height: 400px;
        overflow-y: auto;
        padding-right: 0.5rem;
    }

    .transaction-item {
        padding: 1.25rem;
    }

    .transaction-icon {
        width: 52px;
        height: 52px;
        font-size: 1.375rem;
    }

    .transaction-description {
        font-size: 1.125rem;
    }

    .transaction-amount {
        font-size: 1.25rem;
    }

    /* =================================
       MODAL DESKTOP
       ================================= */
    .modal-content {
        max-width: 600px;
        padding: 2rem;
    }

    .modal-header {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    .jar-ratios-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .ratio-item {
        padding: 1rem;
    }

    .modal-actions {
        margin-top: 2.5rem;
        gap: 1rem;
    }

    /* =================================
       SETTINGS DESKTOP
       ================================= */
    .settings-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .settings-card-header {
        font-size: 1.375rem;
        margin-bottom: 2rem;
    }

    .data-actions {
        flex-direction: row;
        gap: 1rem;
    }

    .support-contact {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* =================================
       TOAST DESKTOP
       ================================= */
    #toast-container {
        top: 2rem;
        right: 2rem;
    }

    .toast {
        max-width: 400px;
        padding: 1.25rem 1.5rem;
    }
}

/* =================================
   LARGE DESKTOP (1280px+)
   ================================= */

@media (min-width: 1280px) {
    
    .container {
        padding: 2rem 3rem;
    }

    /* Cải thiện layout cho màn hình lớn */
    .dashboard-grid {
        grid-template-areas:
            "summary summary summary jars jars jars jars chart chart chart chart"
            "transactions transactions transactions transactions transactions transactions transactions chart chart chart chart";
        gap: 2.5rem;
    }

    /* Jar grid 3 cột cho màn hình lớn */
    .jar-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    #total-balance {
        font-size: 3.5rem;
    }

    .chart-wrapper {
        height: 350px;
    }

    /* Navigation spacing */
    .desktop-nav-links {
        gap: 1rem;
        padding: 0 3rem;
    }

    .tab-btn {
        padding: 1rem 2rem;
        font-size: 1.125rem;
    }
}

/* =================================
   ULTRA WIDE SCREENS (1536px+)
   ================================= */

@media (min-width: 1536px) {
    
    .container {
        max-width: 1536px;
        padding: 2.5rem 4rem;
    }

    .dashboard-grid {
        grid-template-columns: repeat(16, 1fr);
        grid-template-areas:
            "summary summary summary summary jars jars jars jars jars chart chart chart chart chart chart chart"
            "transactions transactions transactions transactions transactions transactions transactions transactions transactions chart chart chart chart chart chart chart";
        gap: 3rem;
    }

    /* Jar grid 4 cột cho màn hình cực lớn */
    .jar-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .chart-wrapper {
        height: 400px;
    }

    #total-balance {
        font-size: 4rem;
    }

    /* Enhanced spacing */
    .jar-card {
        padding: 2rem;
    }

    .transaction-item {
        padding: 1.5rem;
    }

    .modal-content {
        max-width: 700px;
        padding: 2.5rem;
    }
}

/* =================================
   HIGH DPI / RETINA ADJUSTMENTS
   ================================= */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    
    /* Cải thiện độ sắc nét cho màn hình retina */
    .jar-card {
        border-left-width: 3px;
    }

    .legend-color-box {
        width: 18px;
        height: 18px;
    }

    .toast {
        border-left-width: 3px;
    }
}

/* =================================
   REDUCED MOTION PREFERENCES
   ================================= */

@media (prefers-reduced-motion: reduce) {
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .jar-card:hover,
    .transaction-item:hover,
    .legend-item:hover {
        transform: none;
    }
}

/* =================================
   PRINT STYLES
   ================================= */

@media print {
    
    .hamburger-btn,
    .mobile-nav,
    .mobile-menu-overlay,
    .desktop-nav,
    .action-buttons,
    .modal-overlay,
    #toast-container {
        display: none !important;
    }

    .container {
        max-width: none;
        padding: 1rem;
    }

    .dashboard-grid {
        display: block;
        gap: 1rem;
    }

    .card {
        break-inside: avoid;
        margin-bottom: 1rem;
        box-shadow: none;
        border: 1px solid #333;
    }

    .jar-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .chart-wrapper {
        height: 200px;
    }

    body {
        color: #000;
        background: #fff;
    }

    .card {
        background: #fff;
        color: #000;
    }
}