/* Budgetku V8 Quick Modal + FAB — dark mode, v3.2 with !important override */

/* FAB Group */
.qm-fab-group{position:fixed!important;right:24px!important;bottom:24px!important;z-index:9999!important;display:flex!important;align-items:center!important;gap:12px!important;}
.qm-fab-label{background:rgba(26,37,64,0.95)!important;color:#e2e8f0!important;padding:10px 16px!important;border-radius:999px!important;font-family:'Plus Jakarta Sans',sans-serif!important;font-weight:700!important;font-size:13px!important;box-shadow:0 8px 20px rgba(0,0,0,0.4)!important;border:1px solid rgba(59,130,246,0.3)!important;white-space:nowrap!important;}
.qm-fab{width:64px!important;height:64px!important;border-radius:50%!important;background:linear-gradient(135deg,#3b82f6,#8b5cf6)!important;color:#fff!important;border:none!important;font-size:32px!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important;font-family:inherit!important;animation:qmPulse 2s infinite!important;box-shadow:0 0 0 0 rgba(59,130,246,0.7),0 12px 32px rgba(59,130,246,0.5)!important;}
.qm-fab:hover{transform:scale(1.08)!important;animation:none!important;}
@keyframes qmPulse{0%{box-shadow:0 0 0 0 rgba(59,130,246,0.7),0 12px 32px rgba(59,130,246,0.5);}70%{box-shadow:0 0 0 18px rgba(59,130,246,0),0 12px 32px rgba(59,130,246,0.5);}100%{box-shadow:0 0 0 0 rgba(59,130,246,0),0 12px 32px rgba(59,130,246,0.5);}}

/* Overlay */
.qm-overlay{position:fixed!important;inset:0!important;background:rgba(0,0,0,0.65)!important;z-index:9998!important;display:none!important;align-items:flex-end!important;justify-content:center!important;backdrop-filter:blur(4px)!important;}
.qm-overlay.open{display:flex!important;}

/* Modal — DARK */
.qm-modal{background:#1a2540!important;border:1px solid #1f2d47!important;border-radius:20px 20px 0 0!important;width:100%!important;max-width:520px!important;max-height:90vh!important;overflow-y:auto!important;font-family:'Plus Jakarta Sans',sans-serif!important;color:#e2e8f0!important;animation:qmSlide .3s cubic-bezier(.22,1,.36,1)!important;}
@keyframes qmSlide{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(min-width:600px){.qm-overlay{align-items:center!important;}.qm-modal{border-radius:20px!important;max-height:85vh!important;}}

.qm-header{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:20px 22px 4px!important;}
.qm-header h3{margin:0!important;font-size:18px!important;font-weight:800!important;color:#e2e8f0!important;}
.qm-close{background:transparent!important;border:1px solid #1f2d47!important;color:#94a3b8!important;width:32px!important;height:32px!important;border-radius:8px!important;font-size:18px!important;cursor:pointer!important;}

.qm-tabs{display:flex!important;gap:8px!important;padding:16px 22px 0!important;}
.qm-tab{flex:1!important;padding:12px!important;background:#0f1828!important;border:1.5px solid #1f2d47!important;border-radius:12px!important;font-family:inherit!important;font-weight:700!important;font-size:14px!important;color:#94a3b8!important;cursor:pointer!important;}
.qm-tab.active{background:linear-gradient(135deg,#3b82f6,#2563eb)!important;color:#fff!important;border-color:transparent!important;}

.qm-body{padding:18px 22px 22px!important;}
.qm-form{display:none!important;}
.qm-form.active{display:block!important;}
.qm-field{margin-bottom:14px!important;}
.qm-field label{display:block!important;font-size:11px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:0.5px!important;color:#94a3b8!important;margin-bottom:6px!important;}
.qm-field input,.qm-field select{width:100%!important;padding:12px 13px!important;border:1px solid #1f2d47!important;border-radius:10px!important;background:#0f1828!important;font-family:inherit!important;font-size:14px!important;color:#e2e8f0!important;}
.qm-field input::placeholder{color:#526070!important;}
.qm-field input:focus,.qm-field select:focus{outline:none!important;border-color:#3b82f6!important;}

.qm-actions{display:flex!important;gap:8px!important;margin-top:4px!important;}
.qm-btn{flex:1!important;padding:13px!important;border:none!important;border-radius:10px!important;font-family:inherit!important;font-weight:700!important;font-size:14px!important;cursor:pointer!important;}
.qm-submit{background:linear-gradient(135deg,#10b981,#059669)!important;color:#fff!important;}
.qm-clear{background:#1f2d47!important;color:#94a3b8!important;}
.qm-dash{display:block!important;width:100%!important;margin-top:12px!important;padding:12px!important;background:transparent!important;border:1.5px solid #3b82f6!important;color:#3b82f6!important;border-radius:10px!important;text-decoration:none!important;text-align:center!important;font-weight:700!important;font-size:14px!important;}

/* Toast */
.qm-toast{position:fixed!important;top:24px!important;left:50%!important;transform:translateX(-50%)!important;background:#10b981!important;color:#fff!important;padding:13px 22px!important;border-radius:12px!important;font-family:'Plus Jakarta Sans',sans-serif!important;font-weight:700!important;z-index:10000!important;opacity:0!important;transition:opacity .3s,top .3s!important;}
.qm-toast.show{opacity:1!important;top:32px!important;}

/* Sidebar user dropdown — use .hidden by default, show on .open */
/* Make sidebar-user clickable + relative for dropdown anchor */
.sidebar-user{position:relative!important;cursor:pointer!important;user-select:none!important;}
.sidebar-user:hover{background:rgba(255,255,255,0.03)!important;}

.qm-user-dropdown{display:none!important;position:absolute!important;top:calc(100% + 6px)!important;left:0!important;right:0!important;background:#1a2540!important;border:1px solid #1f2d47!important;border-radius:12px!important;box-shadow:0 12px 28px rgba(0,0,0,0.6)!important;padding:8px!important;z-index:9000!important;}
.qm-user-dropdown.open{display:block!important;}
.qm-user-dropdown a{display:flex!important;align-items:center!important;gap:10px!important;padding:10px 12px!important;color:#e2e8f0!important;text-decoration:none!important;font-family:'Plus Jakarta Sans',sans-serif!important;font-size:13.5px!important;font-weight:600!important;border-radius:8px!important;}
.qm-user-dropdown a:hover{background:#1f2d47!important;}
.qm-user-dropdown .divider{height:1px!important;background:#1f2d47!important;margin:4px 0!important;}
.qm-chev{float:right!important;font-size:11px!important;color:#94a3b8!important;}

@media(max-width:480px){.qm-fab-label{display:none!important;}.qm-fab{width:58px!important;height:58px!important;}}

/* === Sesi A: Dashboard layout v2 === */
.summary-grid-v2{display:flex!important;flex-direction:column!important;gap:14px!important;margin-bottom:18px!important;}
.sg-row-1{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:14px!important;}
.sg-row-2{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:12px!important;}
.summary-card.sc-big{padding:22px 24px!important;}
.summary-card.sc-big h3{font-size:12px!important;margin-bottom:10px!important;}
.summary-card.sc-big .amount{font-size:28px!important;font-weight:800!important;}
.summary-card.sc-small{padding:14px 16px!important;}
.summary-card.sc-small h3{font-size:10.5px!important;margin-bottom:6px!important;letter-spacing:0.4px!important;}
.summary-card.sc-small .amount{font-size:18px!important;font-weight:700!important;}
@media(max-width:900px){.sg-row-2{grid-template-columns:repeat(2,1fr)!important;}}
@media(max-width:560px){.sg-row-1{grid-template-columns:1fr!important;}.summary-card.sc-big .amount{font-size:24px!important;}}

/* === Banner notif belum input === */
.qa-notif-banner{display:flex!important;align-items:center!important;gap:12px!important;background:linear-gradient(135deg,rgba(245,158,11,0.15),rgba(245,158,11,0.08))!important;border:1px solid rgba(245,158,11,0.4)!important;border-radius:12px!important;padding:12px 16px!important;margin-bottom:16px!important;color:#fbbf24!important;font-family:'Plus Jakarta Sans',sans-serif!important;font-size:13.5px!important;font-weight:600!important;animation:qmFade .3s!important;}
.qa-notif-icon{font-size:18px!important;}
.qa-notif-text{flex:1!important;}
.qa-notif-action{background:#f59e0b!important;color:#1a2540!important;border:none!important;padding:7px 14px!important;border-radius:8px!important;font-family:inherit!important;font-weight:700!important;font-size:12.5px!important;cursor:pointer!important;white-space:nowrap!important;}
.qa-notif-action:hover{background:#fbbf24!important;}
.qa-notif-close{background:transparent!important;border:none!important;color:#fbbf24!important;font-size:22px!important;cursor:pointer!important;padding:0 4px!important;line-height:1!important;}
.qa-notif-close:hover{color:#fff!important;}
@media(max-width:560px){.qa-notif-banner{flex-wrap:wrap!important;font-size:12.5px!important;}.qa-notif-text{flex:1 1 100%!important;order:1!important;}.qa-notif-action{order:2!important;flex:1!important;}.qa-notif-close{order:3!important;}}

/* === Sesi Analisis === */
.btn-chart-settings{
  background:transparent !important;
  border:1px solid var(--border, #1f2d47) !important;
  border-radius:8px !important;
  padding:6px 10px !important;
  cursor:pointer !important;
  color:var(--text-muted, #94a3b8) !important;
  font-size:14px !important;
  transition:all .15s !important;
}
.btn-chart-settings:hover{
  background:var(--card, #1a2540) !important;
  color:#fff !important;
}

.chart-type-btn{
  padding:6px 12px !important;
  background:transparent !important;
  border:1px solid var(--border, #1f2d47) !important;
  border-radius:8px !important;
  color:var(--text-muted, #94a3b8) !important;
  font-family:inherit !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  transition:all .15s !important;
}
.chart-type-btn:hover{
  background:rgba(59,130,246,0.1) !important;
}
.chart-type-btn.active{
  background:linear-gradient(135deg,#3b82f6,#2563eb) !important;
  color:#fff !important;
  border-color:transparent !important;
}

.insight-card{
  padding:14px 16px !important;
  border-radius:12px !important;
  border:1px solid var(--border, #1f2d47) !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-size:14px !important;
  line-height:1.5 !important;
  color:var(--text, #e2e8f0) !important;
  background:var(--card, #1a2540) !important;
}
.insight-card.insight-warning{
  border-color:rgba(239,68,68,0.4) !important;
  background:linear-gradient(135deg,rgba(239,68,68,0.12),rgba(245,158,11,0.06)) !important;
}
.insight-card.insight-good{
  border-color:rgba(16,185,129,0.4) !important;
  background:linear-gradient(135deg,rgba(16,185,129,0.12),rgba(16,185,129,0.05)) !important;
}
.insight-card.insight-info{
  border-color:rgba(59,130,246,0.4) !important;
  background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(59,130,246,0.04)) !important;
}
.insight-msg b{ color:#fbbf24 !important; }
.insight-card.insight-good .insight-msg b{ color:#34d399 !important; }
.insight-card.insight-info .insight-msg b{ color:#60a5fa !important; }

/* Mobile responsive */
@media(max-width:600px){
  .chart-type-btn{ padding:5px 10px !important; font-size:11.5px !important; }
  .analysis-filter{ flex-direction:column !important; align-items:stretch !important; }
  .analysis-filter > *{ width:100% !important; }
}