/*
 * Stylesheet Khusus Desktop (min-width: 600px)
 * Loaded conditionally via <link media="screen and (min-width: 600px)">
 * Monifi App Layout & Grid Overrides
 */

/* ==========================================================================
   GLOBAL CONTAINER
   ========================================================================== */
#lock-screen,
#app-content {
    max-width: 840px !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.bottom-nav {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 32px) !important;
    max-width: 480px !important;
}

.bottom-nav.compact {
    max-width: 480px !important;
}

/* ==========================================================================
   DASHBOARD VIEW
   ========================================================================== */
#dashboard-view.active {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

#dash-cols-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#dash-col-left,
#dash-col-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-width: 0 !important;
}

#dash-col-left>div,
#dash-col-right>div {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   FINANCE VIEW - Transactions Subtab
   Layout: Summary full-width, Akun (2fr) | Riwayat (3fr)
   ========================================================================== */
#finance-subtab-content-transaksi {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    align-items: start !important;
}

/* Saat hidden oleh JS tab-switch */
#finance-subtab-content-transaksi[style*="display: none"],
#finance-subtab-content-transaksi[style*="display:none"] {
    display: none !important;
}

/* Summary card → full width */
#finance-subtab-content-transaksi>.finance-summary-card {
    grid-column: 1 / -1 !important;
}

/* Kolom kiri (2fr): Accounts header + list + notice */
#finance-subtab-content-transaksi>div:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

#finance-subtab-content-transaksi>#finance-accounts-list {
    grid-column: 1 !important;
    grid-row: 3 !important;
}

#finance-subtab-content-transaksi>div:nth-child(4) {
    grid-column: 1 !important;
    grid-row: 4 !important;
}

/* Kolom kanan (3fr): Transactions header + list */
#finance-subtab-content-transaksi>div:nth-child(5) {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

#finance-subtab-content-transaksi>#finance-transactions-list {
    grid-column: 2 !important;
    grid-row: 3 / span 2 !important;
}

/* ATM Cards: 2 kolom di panel kiri */
.finance-acc-grid-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
}

/* ATM Card sizing */
.finance-atm-card {
    min-width: 0 !important;
    height: 105px !important;
}

/* ==========================================================================
   FINANCE VIEW - Debts Subtab
   Layout: Resume (2fr) | Rekomendasi (3fr), lalu list full-width
   ========================================================================== */
#finance-subtab-content-debt {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
    gap: 14px !important;
    align-items: start !important;
}

#finance-subtab-content-debt[style*="display: none"],
#finance-subtab-content-debt[style*="display:none"] {
    display: none !important;
}

/* Resume kiri (2fr) */
#finance-subtab-content-debt>.finance-summary-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

/* Rekomendasi kanan (3fr) */
#finance-subtab-content-debt>#finance-debt-recommendations {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

/* Action header → full width */
#finance-subtab-content-debt>div:nth-child(3) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
}

/* Debts list → full width, 2 kolom */
#finance-subtab-content-debt>#finance-debts-list {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
}

#finance-debts-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

#finance-goals-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}

/* ==========================================================================
   FINANCE VIEW - Budget Subtab
   Layout: Summary (2fr) | Chart Card (4fr), lalu list full-width
   ========================================================================== */
#finance-subtab-content-budget {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) !important;
    gap: 14px !important;
    align-items: start !important;
}

#finance-subtab-content-budget[style*="display: none"],
#finance-subtab-content-budget[style*="display:none"] {
    display: none !important;
}

/* Summary kiri (2fr) */
#finance-subtab-content-budget>.finance-summary-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-bottom: 0 !important;
    /* Remove bottom margin to align with chart card */
}

/* Chart Card kanan (4fr) */
#finance-subtab-content-budget>.glass-card:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin-bottom: 0 !important;
}

/* Action row → full width */
#finance-subtab-content-budget>div:nth-child(3) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
}

/* Budget list → full width, 2 kolom */
#finance-subtab-content-budget>#finance-budget-list {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
}

#finance-budget-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}

#finance-recurring-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}

/* ==========================================================================
   INVESTMENT VIEW
   Layout: Subtabs full-width, Resume full-width, Cards kiri | History kanan
   ========================================================================== */
#invest-view.active {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    align-items: start !important;
}

/* Subtabs → full width */
#invest-view.active>.invest-subtabs {
    grid-column: 1 / -1 !important;
}

/* Resume → full width */
#invest-view.active>#invest-resume-container {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
}

/* Kolom kiri baris 3: Investment cards */
#invest-view.active>#invest-cards-container {
    grid-column: 1 !important;
    grid-row: 3 / span 2 !important;
}

/* Kolom kanan baris 3: History header */
#invest-view.active>div:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 3 !important;
}

/* Kolom kanan baris 4: History list */
#invest-view.active>div:nth-child(5) {
    grid-column: 2 !important;
    grid-row: 4 !important;
}

#invest-cards-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

#gold-history-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* ==========================================================================
   CARDS & REWARDS VIEW
   ========================================================================== */
#cards-subtab-content-list {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
    gap: 14px !important;
    align-items: start !important;
}

#cards-subtab-content-list[style*="display: none"],
#cards-subtab-content-list[style*="display:none"] {
    display: none !important;
}

/* Month navigator kiri (2fr) */
#cards-subtab-content-list>div:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-bottom: 0 !important;
}

/* Resume kiri (2fr) */
#cards-subtab-content-list>#cards-resume-container {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

/* Header kanan (3fr) */
#cards-subtab-content-list>div:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin-bottom: 0 !important;
}

/* Cards list container kanan (3fr) */
#cards-subtab-content-list>#cards-list-container {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

#cards-list-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 10px !important;
}

#promos-list-container {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

#rewards-list-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}

#installments-grouped-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}

/* ==========================================================================
   CALENDAR VIEW (Split: Calendar kiri | Reminders kanan)
   ========================================================================== */
#calendar-view.active {
    display: grid !important;
    grid-template-columns: 1.3fr 1fr !important;
    grid-template-rows: auto 1fr !important;
    gap: 14px !important;
    align-items: stretch !important;
}

#calendar-view.active>.glass-card {
    margin-bottom: 0 !important;
}

#calendar-view.active>.glass-card:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
}

#calendar-view.active>.glass-card:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
}

#calendar-view.active>.glass-card:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

#calendar-view.active #reminders-list {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}

/* ==========================================================================
   SETTINGS VIEW
   ========================================================================== */
#settings-cc-list,
#settings-rewards-list,
#admin-cache-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

#merchant-list-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 8px !important;
    align-content: start !important;
}

#list-custom-acc-types,
#list-custom-expense-cats,
#list-custom-income-cats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

#settings-backup-options {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
}

#settings-categories-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 16px 14px !important;
    align-items: start !important;
}

#settings-categories-wrapper>div:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-bottom: 0 !important;
}

#settings-categories-wrapper>div:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    margin-bottom: 0 !important;
}

#settings-categories-wrapper>div:nth-child(3) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-bottom: 0 !important;
}

.profile-grid-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    align-items: stretch !important;
}

/* ==========================================================================
   FAMILY CONNECT MONITOR VIEW (DESKTOP)
   ========================================================================== */
#family-view-summary-container {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr !important;
    gap: 14px !important;
    align-items: stretch !important;
}

#family-view-cols-container {
    display: grid !important;
    grid-template-columns: 1.1fr 1fr !important;
    gap: 14px !important;
    align-items: start !important;
}

#family-col-left,
#family-col-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-width: 0 !important;
}