/* ==== Global Theme ==== */
body {
    background-color: #ffffff !important;
    font-family: 'Poppins', 'Lato', sans-serif !important;
    color: #6f42c1 !important;
    scroll-behavior: smooth !important;
}

/* ==== Navbar ==== */
.navbar {
    background: linear-gradient(90deg, #7B1FA2, #9C27B0, #AB47BC) !important;
    box-shadow: 0 4px 12px rgba(123, 31, 162, 0.3) !important;
    transition: all 0.3s ease !important;
}
.navbar:hover {
    box-shadow: 0 6px 16px rgba(156, 39, 176, 0.4) !important;
}
.navbar-brand {
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    letter-spacing: 0.5px !important;
}

/* ==== Headings ==== */
h1, h2, h3, h4, h5 {
    color: #7B1FA2 !important;
    font-weight: 600 !important;
}
h1 {
    font-size: 1.8rem !important;
    line-height: 1.4 !important;
}
h4 {
    margin-bottom: 0.8rem !important;
}

/* ==== Cards / Sections ==== */
.card, .dbc-row, .dbc-col, .modal-content {
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* ==== Images ==== */
img {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
img:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 4px 16px rgba(156, 39, 176, 0.3) !important;
}

/* ==== Buttons & Links ==== */
a, .nav-link {
    color: #7B1FA2 !important;
    transition: color 0.3s ease !important;
}
a:hover, .nav-link:hover {
    color: #9C27B0 !important;
    text-decoration: none !important;
}
a.btn-download {
    background-color: #9C27B0 !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    transition: all 0.3s ease !important;
}
a.btn-download:hover {
    background-color: #7B1FA2 !important;
    transform: translateY(-2px) !important;
}

/* ==== Upload Box ==== */
#upload-graph {
    transition: all 0.3s ease !important;
}
#upload-graph:hover {
    background-color: #F3E5F5 !important;
    border-color: #AB47BC !important;
    box-shadow: 0 2px 8px rgba(171, 71, 188, 0.2) !important;
}

/* ==== Section Transitions ==== */
.dash-animate {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    animation: fadeInUp 0.6s ease forwards !important;
}
@keyframes fadeInUp {
    from {opacity: 0; transform: translateY(20px) !important;}
    to {opacity: 1; transform: translateY(0) !important;}
}

/* ==== Modal ==== */
.modal-content {
    border-radius: 20px !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(123, 31, 162, 0.2) !important;
}

/* ==== Graph container ==== */
.js-plotly-plot .plotly {
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(171, 71, 188, 0.1) !important;
    transition: box-shadow 0.3s ease !important;
}
.js-plotly-plot:hover .plotly {
    box-shadow: 0 4px 16px rgba(171, 71, 188, 0.3) !important;
}

/* ==== Navbar Text Color Fix ==== */
.navbar, 
.navbar a, 
.navbar-brand, 
.nav-link {
    color: #ffffff !important;
}

.navbar a:hover, 
.nav-link:hover, 
.navbar-brand:hover {
    color: #E1BEE7 !important;  /* Light lavender hover */
    text-decoration: none !important;
}

section {
  scroll-margin-top: 90px;  /* adjust to match your navbar height */
}

.navbar .dropdown-menu {
    background-color: #9C27B0 !important;  /* same as navbar background */
    border: none !important;
    box-shadow: none !important;
}

.navbar .dropdown-item:hover, 
.navbar .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1) !important; /* subtle hover highlight */
    color: #ffffff !important;                               /* keep text white */
}

.navbar .nav-item.dropdown:hover > .dropdown-menu {
    display: block !important;      /* show menu on hover */
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease !important;
}

.navbar .dropdown-menu {
    display: none;                  /* hide by default */
    opacity: 0;
    visibility: hidden;
    margin-top: 0 !important;       /* remove extra spacing */
}

/* ==== Action Buttons (Coexpression, Export, Download, Public Data) ==== */

/* Base violet style */
.btn-theme {
  background: linear-gradient(90deg, #7B1FA2, #9C27B0);
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 3px 8px rgba(156, 39, 176, 0.25) !important;
  margin-bottom: 12px !important;
}

.btn-theme:hover {
  background: linear-gradient(90deg, #9C27B0, #AB47BC);
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 12px rgba(156, 39, 176, 0.35) !important;
}

.btn-theme:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(156, 39, 176, 0.25) !important;
}

/* Secondary variant — for export/download actions */
.btn-theme-secondary {
  background: #F3E5F5 !important;
  color: #7B1FA2 !important;
  border: 1.5px solid #9C27B0 !important;
  border-radius: 10px !important;
  padding: 9px 18px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.btn-theme-secondary:hover {
  background: #E1BEE7 !important;
  color: #6f42c1 !important;
  transform: translateY(-2px) !important;
}

/* Public data section buttons */
.btn-theme-public {
  background: linear-gradient(90deg, #8E24AA, #BA68C8);
  color: white !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
  /* text-transform: uppercase; */
  letter-spacing: 0.4px;
  transition: all 0.3s ease !important;
  box-shadow: 0 3px 8px rgba(186, 104, 200, 0.25) !important;
}

.btn-theme-public:hover {
  background: linear-gradient(90deg, #9C27B0, #CE93D8);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(186, 104, 200, 0.35) !important;
}

/* ==== Spacing for Public Data Buttons ==== */
.public-data-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* space between buttons */
  justify-content: center; /* optional: center horizontally */
  margin-top: 10px;
}

.public-data-container .btn-theme-public {
  margin: 4px; /* optional small outer margin for good measure */
}

/* ==== DataTable Export Button (Styled to Match Main Theme) ==== */
button.export{
  background: linear-gradient(90deg, #7B1FA2, #9C27B0);
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-family: 'Poppins', 'Lato', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 3px 8px rgba(156, 39, 176, 0.25) !important;
  cursor: pointer !important;
  margin-bottom: 12px !important;
}

button.first-page, button.previous-page, button.next-page, button.last-page{
  background: linear-gradient(90deg, #7B1FA2, #9C27B0);
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-family: 'Poppins', 'Lato', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 3px 8px rgba(156, 39, 176, 0.25) !important;
  cursor: pointer !important;
}

/* .export .first-page .previous-page .next-page  */

button.export:hover, button.first-page:hover, button.previous-page:hover, button.next-page:hover, button.last-page:hover{
  background: linear-gradient(90deg, #9C27B0, #AB47BC);
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(156, 39, 176, 0.35) !important;
}