* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 15px; }
.container { max-width: 1000px; margin: 5px auto; background: white; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; }
.header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; }
.header h2 { font-size: 18px; }
.btn-back { background: rgba(255,255,255,0.2); color: white; border: 2px solid white; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 13px; text-decoration: none; }
.content { padding: 15px 20px; }

/* Resumo do mês */
.month-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 15px; }
.summary-card { border-radius: 10px; padding: 10px 8px; text-align: center; }
.summary-card .label { font-size: 10px; font-weight: 600; opacity: 0.8; margin-bottom: 4px; }
.summary-card .value { font-size: 16px; font-weight: 800; }
.card-emprestimo { background: #ede7f6; color: #4a0e8f; }
.card-divida { background: #fdecea; color: #c62828; }
.card-cartao { background: #e8f5e9; color: #1b5e20; }
.card-atrasado { background: #fff3e0; color: #e65100; }

/* Calendário */
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.month-year { font-size: 18px; font-weight: 700; color: #333; }
.nav-buttons { display: flex; gap: 8px; }
.nav-btn { background: #667eea; color: white; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 15px; }
.calendar-header-day { text-align: center; padding: 6px; font-weight: 700; font-size: 11px; color: #667eea; background: #f8f9fa; border-radius: 6px; }
.calendar-day { aspect-ratio: 1; border: 2px solid #e8e8e8; border-radius: 8px; padding: 3px; cursor: pointer; transition: all 0.2s; position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 48px; }
.calendar-day:hover { border-color: #667eea; box-shadow: 0 2px 8px rgba(102,126,234,0.3); transform: scale(1.03); }
.calendar-day.other-month { opacity: 0.2; pointer-events: none; }
.calendar-day.today { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border-color: #764ba2; }
.calendar-day.today .day-amount { color: #fff; }
.calendar-day.selected { border-color: #667eea; border-width: 3px; box-shadow: 0 0 0 2px rgba(102,126,234,0.3); }
.calendar-day.has-payments { background: #fafafa; border-color: #ccc; }
.calendar-day.has-late { background: #fff5f5; border-color: #e53935; }
.calendar-day.has-paid { background: #f0fff4; border-color: #81c784; }
.calendar-day.today.has-late { background: linear-gradient(135deg, #e53935, #b71c1c); border-color: #b71c1c; }
.day-number { font-size: 12px; font-weight: 700; }
.day-dots { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot-emp { background: #7c4dff; }
.dot-div { background: #e53935; }
.dot-card { background: #2e7d32; }
.dot-paid { background: #81c784; border: 1px solid #43a047; }
.day-amount { font-size: 8px; font-weight: 700; text-align: center; color: #555; }

/* Legenda */
.legend { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #555; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }

/* Detalhes do dia */
.payments-section { background: #f5f7fa; padding: 15px; border-radius: 12px; margin-top: 10px; }
.payments-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.payments-title { font-size: 15px; font-weight: 700; color: #333; }
.payments-total { font-size: 13px; font-weight: 700; }
.payments-total .receber { color: #4a0e8f; }
.payments-total .pagar { color: #c62828; }

.payment-item { background: white; padding: 12px; border-radius: 10px; margin-bottom: 8px; border-left: 5px solid #667eea; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.2s; }
.payment-item:hover { transform: translateX(3px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.payment-item.type-loan { border-left-color: #7c4dff; }
.payment-item.type-loan.paid { border-left-color: #b39ddb; background: #f3f0ff; }
.payment-item.type-loan.late { border-left-color: #e53935; background: #fff5f5; }
.payment-item.type-debt { border-left-color: #e53935; }
.payment-item.type-debt.paid { border-left-color: #ef9a9a; background: #fff0f0; }
.payment-item.type-card { border-left-color: #2e7d32; }
.payment-item.type-card.paid { border-left-color: #81c784; background: #f0fff4; }

.payment-client { font-size: 14px; font-weight: 700; color: #333; }
.payment-info { font-size: 11px; color: #888; margin-top: 2px; }
.payment-amount { font-size: 15px; font-weight: 800; }
.payment-amount.amt-loan { color: #7c4dff; }
.payment-amount.amt-debt { color: #e53935; }
.payment-amount.amt-card { color: #2e7d32; }
.payment-amount.amt-paid { color: #81c784; }

.badge { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 9px; font-weight: 700; margin-left: 5px; vertical-align: middle; }
.badge-emp { background: #ede7f6; color: #4a0e8f; }
.badge-div { background: #fdecea; color: #c62828; }
.badge-card { background: #e8f5e9; color: #1b5e20; }
.badge-paid { background: #c8e6c9; color: #2e7d32; }
.badge-late { background: #ffcdd2; color: #b71c1c; }
.badge-neg { background: #fff3e0; color: #e65100; }

.empty-day { text-align: center; padding: 20px; color: #999; font-size: 13px; }

/* Dark Mode */
body.dark-mode { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
body.dark-mode .container { background: #0f0f23; color: #e0e0e0; }
body.dark-mode .content { color: #e0e0e0; }
body.dark-mode .month-year { color: #e0e0e0; }
body.dark-mode .calendar-header-day { background: #16213e; color: #7c8dff; }
body.dark-mode .calendar-day { border-color: #2a2a4a; background: #16213e; color: #e0e0e0; }
body.dark-mode .calendar-day.has-payments { background: #1a1a3e; border-color: #444; }
body.dark-mode .calendar-day.has-late { background: #2e1515; border-color: #e53935; }
body.dark-mode .calendar-day.has-paid { background: #152e15; border-color: #43a047; }
body.dark-mode .calendar-day.other-month { opacity: 0.15; }
body.dark-mode .day-amount { color: #aaa; }
body.dark-mode .payments-section { background: #16213e; }
body.dark-mode .payments-title { color: #e0e0e0; }
body.dark-mode .payment-item { background: #1a1a3e; }
body.dark-mode .payment-client { color: #e0e0e0; }
body.dark-mode .legend-item { color: #aaa; }
body.dark-mode .summary-card.card-emprestimo { background: #2d1a4e; }
body.dark-mode .summary-card.card-divida { background: #3e1515; }
body.dark-mode .summary-card.card-cartao { background: #153e15; }
body.dark-mode .summary-card.card-atrasado { background: #3e2e15; }

@media (max-width: 600px) {
    .month-summary { grid-template-columns: repeat(2, 1fr) !important; }
    .header { flex-direction: column; text-align: center; gap: 8px; }
    .calendar-day { min-height: 42px; }
    .day-number { font-size: 11px; }
    .dot { width: 5px; height: 5px; }
}