/* ============================================================
   WISER FINANCEIRO — DESKTOP ADAPTIVE CSS v2
   Drop-in: só incluir DEPOIS do style.css
   ============================================================ */

/* ===================== DESKTOP (1024px+) ===================== */
@media (min-width: 1024px) {

  /* ----- Body: fundo mais claro no desktop ----- */
  body {
    background: #0b1120;
    padding-bottom: 0;
  }

  /* ----- Layout com sidebar ----- */
  body::before {
    content: '';
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 260px;
    background: linear-gradient(180deg, #070c1a 0%, #0a1020 100%);
    border-right: 1px solid rgba(255,255,255,0.04);
    z-index: 5;
  }

  /* ----- Container centralizado ----- */
  .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* ----- Status bar: esconder ----- */
  .status-bar {
    display: none;
  }

  /* ----- Header: limitado e centralizado ----- */
  .app-header {
    margin: 0 auto 8px;
    max-width: 900px;
    padding: 24px 32px 28px;
    border-radius: 0 0 20px 20px;
    position: relative;
  }

  .app-header .container {
    padding: 0;
  }

  .header-top {
    margin-bottom: 16px;
  }

  .header-avatar {
    display: none;
  }

  /* ----- Summary card ----- */
  .summary-card {
    padding: 24px 28px;
  }

  .summary-value {
    font-size: 38px;
  }

  .summary-grid {
    gap: 12px;
  }

  .summary-item {
    padding: 12px;
  }

  /* ----- KPI Grid: 4 colunas ----- */
  .kpi-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }

  .kpi-card {
    padding: 18px 16px;
  }

  .kpi-value {
    font-size: 18px;
  }

  /* ----- Section headers ----- */
  .section {
    margin-top: 28px;
  }

  .section-header {
    margin-bottom: 14px;
  }

  /* ----- Chart cards ----- */
  .chart-card {
    padding: 24px;
  }

  .chart-container {
    height: 260px;
  }

  .chart-container.pie {
    height: 200px;
  }

  /* ----- Pay list: 2 colunas ----- */
  .pay-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 12px;
  }

  .pay-item {
    border-radius: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
  }

  .pay-item:hover {
    background: rgba(255,255,255,0.05);
  }

  .pay-item:active {
    margin: 0;
    padding: 14px 16px;
  }

  /* ----- Bottom nav: ESCONDER ----- */
  .bottom-nav {
    display: none !important;
  }

  /* ----- Bottom sheet: modal central ----- */
  .bs-overlay {
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .bs-sheet {
    border-radius: 24px;
    max-width: 500px;
    transform: scale(0.9) translateY(30px);
  }

  .bs-overlay.show .bs-sheet {
    transform: scale(1) translateY(0);
  }

  .bs-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  /* ----- Date overlay: modal central ----- */
  .date-overlay {
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .date-sheet {
    border-radius: 24px;
    transform: scale(0.9) translateY(30px);
  }

  .date-overlay.show .date-sheet {
    transform: scale(1) translateY(0);
  }

  /* ----- Login page ----- */
  .login-page {
    padding: 40px;
  }

  /* ----- Scrollbar visível ----- */
  body::-webkit-scrollbar {
    display: block;
    width: 6px;
  }

  body::-webkit-scrollbar-track {
    background: transparent;
  }

  body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
  }

  body::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.15);
  }

  /* ----- Spacer ----- */
  .spacer {
    height: 40px;
  }
}

/* ===================== TABLET (768px - 1023px) ===================== */
@media (min-width: 768px) and (max-width: 1023px) {

  .container {
    max-width: 720px;
    padding: 0 28px;
  }

  .kpi-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .summary-grid {
    gap: 12px;
  }

  .pay-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .app-header {
    margin: 0 28px 8px;
    border-radius: 0 0 20px 20px;
  }

  .chart-container {
    height: 240px;
  }
}

/* ===================== WIDE DESKTOP (1440px+) ===================== */
@media (min-width: 1440px) {

  body::before {
    width: 280px;
  }

  .container {
    max-width: 1000px;
    padding: 0 40px;
  }

  .app-header {
    max-width: 1000px;
  }

  .kpi-grid {
    gap: 16px;
  }

  .kpi-value {
    font-size: 20px;
  }

  .chart-container {
    height: 280px;
  }

  .chart-container.pie {
    height: 220px;
  }

  .pay-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .summary-value {
    font-size: 42px;
  }
}


/* ============================================================
   WISER FINANCEIRO — DESKTOP LIGHT THEME OVERRIDES
   Incluir DEPOIS do desktop.css
   ============================================================ */

/* ===================== DESKTOP (1024px+) LIGHT ===================== */
@media (min-width: 1024px) {

  :root[data-theme="light"] body {
    background: #f0f2f7;
  }

  :root[data-theme="light"] body::before {
    background: linear-gradient(180deg, #e8ebf2 0%, #f0f2f7 100%);
    border-right: 1px solid rgba(0,0,0,0.04);
  }

  :root[data-theme="light"] .pay-item {
    background: rgba(0,0,0,0.015);
    border: 1px solid rgba(0,0,0,0.04);
  }

  :root[data-theme="light"] .pay-item:hover {
    background: rgba(0,0,0,0.03);
  }

  :root[data-theme="light"] body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
  }

  :root[data-theme="light"] body::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.2);
  }
}

/* ===================== TABLET (768px - 1023px) LIGHT ===================== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Nenhuma cor hardcoded precisa de override aqui */
}

/* ===================== WIDE DESKTOP (1440px+) LIGHT ===================== */
@media (min-width: 1440px) {
  /* Nenhuma cor hardcoded precisa de override aqui */
}