/* ================= GLOBAL ================= */
body{ margin:0; background:#0b1d3a; font-family:Segoe UI, Arial, sans-serif; color:#e2e8f0; }

/* ================= LOADER ================= */
#loader{ position:fixed; width:100%; height:100%; background:#08152bdd; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:9999; }
.loco-animation{ font-size: 70px; animation: moveTrain 2s linear infinite; }
.loading-text{ margin-top:15px; font-size:48px; font-weight:bold; color:#60a5fa; text-align:center; }
@keyframes moveTrain{ 0%{transform:translateX(-100px);} 100%{transform:translateX(100px);} }

/* ================= HEADER ================= */
.header-bar{ display:flex; align-items:center; padding:15px 30px; background:#08152b; border-bottom:3px solid #1e40af; }
.logo-section{ width:120px; display:flex; align-items:center; }
.title-section{ flex:1; text-align:center; }
/* Font sizes doubled here */
.title-section h1{ margin:0; font-size:56px; font-weight:600; color:white; }
.title-section h2{ margin:5px 0 0 0; font-size:30px; color:#cbd5e1; }

/* ================= FILTER BAR ================= */
.top-bar{ display:flex; justify-content:center; gap:12px; padding:15px; background:#0e2447; flex-wrap:wrap; }
.control-btn{ padding:8px 14px; background:#1e3a8a; color:white; border:1px solid #3b82f6; border-radius:6px; min-width:140px; cursor:pointer; font-size:14px; transition:background 0.2s ease; }
.control-btn:hover{ background:#2563eb; }
.control-btn:disabled{ background:#475569; border-color:#334155; cursor:not-allowed; }

/* ================= LAYOUT ================= */
.dashboard-layout{ padding: 20px; }
.combined-section{ width: 100%; background: #ffffff; padding: 20px; border-radius: 12px; min-height: 500px; box-sizing: border-box; }
canvas{ width:100% !important; height:100% !important; }

/* ================= REPORT CARD ================= */
.report-wrapper { display: flex; flex-direction: column; gap: 15px; height: 100%; }
.report-card { padding: 20px; border-radius: 10px; background: linear-gradient(145deg, #0f254a, #132f5e); box-shadow: 0 4px 15px rgba(0,0,0,0.4); color: white; flex-grow: 1; }
.report-card h3 { margin-top: 0; font-size: 22px; border-bottom: 2px solid #334155; padding-bottom: 10px; margin-bottom: 15px; }
.report-card p { margin: 12px 0; font-size: 16px; line-height: 1.4; }

/* ================= FOOTER ================= */
.footer{ text-align:right; padding:12px 20px; font-size:12px; color:#94a3b8; border-top:1px solid #1e293b; }

/* ================= CUSTOM GLOW BUTTON ================= */
@keyframes glowBlink {
  0% { box-shadow: 0 0 5px #10b981; background-color: #059669; border-color: #10b981; }
  50% { box-shadow: 0 0 20px #10b981, 0 0 30px #10b981; background-color: #34d399; border-color: #34d399; }
  100% { box-shadow: 0 0 5px #10b981; background-color: #059669; border-color: #10b981; }
}
.glow-active { animation: glowBlink 1s infinite alternate !important; border-color: #ffffff !important; color: #ffffff !important; font-weight: bold; }

/* ================= MODALS ================= */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.8); z-index: 10000;
  display: flex; justify-content: center; align-items: center;
}
.modal-box {
  background: #0f254a; padding: 25px; border-radius: 10px;
  width: 350px; color: white; border: 2px solid #1e40af;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.modal-box h3 { margin-top: 0; color: #60a5fa; border-bottom: 1px solid #1e3a8a; padding-bottom: 10px; }
.modal-box input {
  width: 100%; padding: 10px; margin-top: 10px; box-sizing: border-box;
  border-radius: 5px; border: 1px solid #3b82f6; background: #08152b; color: white;
}
.suggestions-box {
  max-height: 150px; overflow-y: auto; background: #08152b;
  border: 1px solid #3b82f6; border-top: none;
}
.suggestions-box div { padding: 8px; cursor: pointer; border-bottom: 1px solid #1e3a8a; }
.suggestions-box div:hover { background: #1e3a8a; }