/* css_styles/global.css */

/* -------------
   Base tweaks
   ------------- */

/* Slightly unify base font + background */
body {
    background-color: #ffffff;
    color: #212529;
}

/* Make sure custom containers inherit text color by default */
.custom-container,
.custom-container-title,
.container,
.container-fluid {
    color: inherit;
}

/* Let bootstrap cards inherit by default too */
.card {
    color: inherit;
}

/* -------------
   Dark mode
   ------------- */

body.dark-mode,
body.dark-mode footer.container {
    background-color: #dfdfdf;   /* page background (outer edges) */
    color: #0f0f0f;
}

/* One unified mid-grey for all main blocks */
body.dark-mode .container,
body.dark-mode .container-fluid,
body.dark-mode .custom-container,
body.dark-mode .custom-container-title,
body.dark-mode .navbar,
body.dark-mode .navbar .dropdown-menu,
body.dark-mode .card,
body.dark-mode .card-header,
body.dark-mode .card-body,
body.dark-mode .synop-extreme-wrapper,
body.dark-mode .synop-table-scroll,
body.dark-mode .synop-nav-bar,
body.dark-mode .alert,
body.dark-mode .navbar-brand-main,
body.dark-mode .table {
    background-color: #dfdfdf;   /* single shared grey */
    color: #0f0f0f;
    border-color: #adadad;
}

/* Navbar links */
body.dark-mode .navbar a.nav-link {
    color: #0f0f0f !important;
}

/* Tables */
body.dark-mode .table thead {
    /* very subtle difference for header readability */
    background-color: #5b5b5b;
    color: #f5f5f5;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.04);
}

/* Text colors */
body.dark-mode .text-muted {
    color: #adadad !important;
}

/* Links */
body.dark-mode a {
    color: #000000;
}

body.dark-mode a:hover,
body.dark-mode a:focus {
    color: #000000;
}

/* Form controls */
body.dark-mode .form-control,
body.dark-mode .custom-select,
body.dark-mode input[type="text"],
body.dark-mode input[type="range"] {
    background-color: #4f4f4f;
    color: #0f0f0f;
    border-color: #8a8a8a;
}

body.dark-mode .form-control::placeholder,
body.dark-mode .custom-select::placeholder {
    color: #c0c0c0;
}

/* Buttons — keep Bootstrap semantics but slightly tuned */
body.dark-mode .btn-outline-secondary {
    color: #0f0f0f;
    border-color: #cccccc;
    background-color: transparent;
}

body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-secondary:focus {
    background-color: #0f0f0f;
    color: #3d3d3d;
}

/* Slider track wrapper (if you style it) */
body.dark-mode .slider {
    background-color: #4f4f4f;
}

/* Ensure images (plots, radar, NWP) are not inverted */
body.dark-mode img {
    filter: none;
}

/* survey prompt */
.survey-prompt {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 2000;
  max-width: 380px;
}

.survey-prompt-inner {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #ced4da;
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

.survey-prompt-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.survey-prompt-text {
  font-size: 0.95rem;
  line-height: 1.25rem;
}

/* dark mode styling (matching your grey trend) */
body.dark-mode .survey-prompt-inner {
  background: #535353;
  border-color: #666666;
  color: #ffffff;
}

body.dark-mode .survey-prompt-inner a,
body.dark-mode .survey-prompt-inner button {
  color: inherit;
}