/* styles.css */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root{
  --bs-body-font-family: 'Poppins', sans-serif;
  --main-blue: #0057C2;
  --deep-blue: #00357A;
  --highlight-green: #42C0FF;
  --cool-gray: #53565A;
  --light-blue: #C3D7EE;
  --soft-bg: #f7f9fc;
}

.navbar {
  --bs-navbar-brand-hover-color: white;
}

body, .container-fluid {
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px;
  color: var(--cool-gray);
  background-color: var(--soft-bg);
}

/* Headings */
h1, h2, h3, h4 {
  font-weight: 600;
  color: var(--deep-blue);
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.param-meta-model {
  font-size: 1.2rem;
  color: #53565A; 
}

.param-meta-desc {
  font-size: 0.9rem;
  color: #53565A; 
}

.param-header {
  border-left: 4px solid var(--main-blue);  /* main blue */
  padding: 8px 12px;
  margin-bottom: 15px;
  background-color: #F7FAFC;
  border-radius: 4px;
}

.navbar {
  background-color: var(--main-blue); /* Blue background */
}

.navbar .navbar-default .navbar-static-top .container-fluid{
  background-color: var(--main-blue) !important;
  color: white;
  
}

.container-fluid:has(.navbar-header){
  background-color: var(--main-blue) !important;
  color: white;
}

nav.navbar .navbar-brand:hover,
nav.navbar .navbar-brand:focus {
  color: white !important;
}


.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  background-color: var(--deep-blue) !important;
  color: var(--deep-blue) !important;
}

.navbar .navbar-nav > li > a {
  color: var(--white) !important;
}

.navbar-brand{
  background-color: var(--main-blue) !important;
  color: white;
}
.navbar-brand > li > a {
  color: white !important; }


.navbar-nav li a {
  background-color: var(--main-blue) !important;
  color: white;
}
.nav-tabs > li > a {
  color: var(--deep-blue) !important;
}
.nav-tabs{
  background-color: var(--soft-bg) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li > a:hover {
  color: var(--deep-blue) !important;
  background-color:  #a5bcd6 !important;
}

.accordion .accordion-item {
  background-color: #fff;
  border: 1px solid #e6eef6;
  border-radius: 8px;
  margin-bottom: 10px;
}

.accordion-body {
  padding: 14px 20px;
  font-size: 0.95rem;
  color: var(--cool-gray);
  line-height: 1.5;
}

.accordion-body img {
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin: 10px 0;
  max-width: 100%;
}

.accordion-body em {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: #53565A;
  text-align: center;
}


.accordion-button {
  background-color: var(--light-blue) !important;
  color: var(--deep-blue) !important;
  font-weight: 600;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.accordion-button:hover {
  background-color: #a5bcd6 !important;
  color: #01184a !important;
}

.accordion-button::after {
  transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}

.accordion .accordion-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.metric-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid #e6eef6;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.plot-card {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #e6eef6;
  box-shadow: 0 2px 6px rgba(10,20,40,0.04);
  margin-bottom: 12px;
} 


.btn-primary {
  background-color: var(--deep-blue) !important;
  border: none;
}
.btn-primary:hover {
  background-color: white !important;
}


.about-panel {
  background-color: white;
  padding: 22px;
  border-radius: 10px;
  border-left: 6px solid var(--main-blue);
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  margin-bottom: 12px;
}

.sidebar, .panel-section.sidebar {
  background-color: #fff;
  padding: 18px;
  border-radius: 10px;
  border: 1px solid #e6eef6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

table { border-collapse: collapse; width: 100%; }
table th, table td { padding: 4px 6px; border: 0.4px solid #D3D3D3; }
table th { background-color: #b9bec4; color: var(--cool-gray); font-weight:600; }