/* =============================================================================
   CISED Dengue — modern theme (replaces the former argonR look)
   Applies to both the login screen and the shinydashboard app.
   Typography: Inter. Charts stay on echarts4r (rendered separately).
   ============================================================================= */

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

:root {
  --c-primary:        #44607a;   /* blue-gray (slate blue) */
  --c-primary-dark:   #36495a;
  --c-primary-soft:   #e8edf2;
  --c-accent:         #b5894e;   /* muted ochre (warnings) */
  --c-danger:         #a85a52;   /* muted brick */
  --c-success:        #4a7c6a;   /* muted sage */
  --c-bg:             #eef1f5;   /* light blue-gray background */
  --c-surface:        #ffffff;
  --c-border:         #dde3ea;   /* soft blue-gray border */
  --c-text:           #2b3a4a;   /* dark slate */
  --c-muted:          #6b7a8c;   /* muted slate */
  /* Distinct, non-flashy value-box tones */
  --vb-1:             #44607a;   /* slate blue   (syndromic) */
  --vb-2:             #b5894e;   /* muted ochre  (weeks in alert) */
  --vb-3:             #6b8190;   /* steel blue-gray (serotype) */
  --radius:           10px;
  --shadow:           0 1px 2px rgba(30,41,59,.05), 0 3px 10px rgba(30,41,59,.06);
}

/* ---- Base typography ----------------------------------------------------- */
html, body, .wrapper, .content-wrapper, .main-sidebar, .main-header,
.box, .nav-tabs-custom, .small-box, .form-control, button, input, select, textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
body, .content-wrapper, .wrapper { background-color: var(--c-bg) !important; color: var(--c-text); }
h1,h2,h3,h4,h5,h6 { font-weight: 700; color: var(--c-text); letter-spacing: -0.01em; }
a { color: var(--c-primary); }
a:hover { color: var(--c-primary-dark); }

/* ---- Header -------------------------------------------------------------- */
.main-header .logo,
.main-header .navbar {
  background-color: var(--c-primary) !important;
  color: #fff !important;
}
.main-header .logo { font-weight: 700; letter-spacing: -0.01em; }
.main-header .logo:hover { background-color: var(--c-primary-dark) !important; }
.main-header .sidebar-toggle { color: #fff !important; }
/* Logout icon in the header (authenticated view) */
.main-header .navbar-custom-menu .header-logout-li > a.header-logout,
.header-logout {
  color: #fff !important;
  padding: 15px 18px;
  font-size: 18px;
  display: block;
}
.header-logout:hover, .header-logout:focus { background-color: var(--c-primary-dark) !important; color: #fff !important; }
.main-header .navbar .sidebar-toggle:hover { background-color: var(--c-primary-dark) !important; }

/* ---- Sidebar ------------------------------------------------------------- */
.main-sidebar, .left-side {
  background-color: var(--c-surface) !important;
  border-right: 1px solid var(--c-border);
}
.main-sidebar .sidebar {
  height: auto;
  overflow: visible;
  padding-bottom: 16px;
}
/* Keep the content area at least as tall as the viewport so the sidebar's lower
   blocks (partner logos) are never clipped on short pages like the bulletin. */
.content-wrapper { min-height: calc(100vh - 50px) !important; }
.skin-green .sidebar a, .sidebar a { color: var(--c-text); }
.sidebar-menu > li > a {
  border-radius: 8px;
  margin: 2px 10px;
  padding: 10px 12px;
  font-weight: 500;
  border-left: none !important;
}
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .fas,
.sidebar-menu > li > a > i { color: var(--c-muted); width: 20px; text-align: center; }
.skin-green .sidebar-menu > li.active > a,
.sidebar-menu > li.active > a,
.skin-green .sidebar-menu > li:hover > a,
.sidebar-menu > li:hover > a {
  background-color: var(--c-primary) !important;
  color: #fff !important;
}
.sidebar-menu > li.active > a > i,
.sidebar-menu > li:hover > a > i { color: #fff !important; }

/* Google Translate: neutralise the top banner / body offset (kept minimal). */
body { top: 0 !important; }
.goog-te-banner-frame, body > .skiptranslate { display: none !important; }

/* Sidebar custom blocks */
.sidebar-extra { padding: 10px 12px; }
.sidebar-extra img { max-width: 100%; height: auto; }
.sidebar-brand { text-align: center; padding: 6px 4px 10px; }
.main-sidebar .sidebar-brand img.sidebar-logo-img,
.sidebar-logo-img {
  width: 80px !important;
  max-width: 80px !important;
  height: auto !important;
  margin: 0 auto 8px !important;
  display: block !important;
}
.sidebar-title { text-align: center; line-height: 1.25; }
.sidebar-title-main { display: block; font-size: 14px; font-weight: 700; color: var(--c-primary-dark); }
.sidebar-title-sub { font-size: 12px; color: var(--c-muted); }
.sidebar-translate { font-size: 12px; color: var(--c-text); margin-top: 8px; }
.sidebar-translate .translate-label { display: block; margin-bottom: 4px; font-weight: 600; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.sidebar-translate .translate-label i { margin-right: 4px; }
/* Our own themed language selector (native <select> -> OS dropdown, never clipped) */
.sidebar-translate .cised-lang-select {
  width: 100%; margin: 0; font-size: 13px; color: var(--c-text);
  padding: 7px 9px; border: 1px solid var(--c-border); border-radius: 8px;
  background: #fff; line-height: 1.3; cursor: pointer; appearance: auto;
}
.sidebar-translate .cised-lang-select:hover { border-color: var(--c-primary); }
/* The Google gadget stays hidden — it only provides the engine */
#google_translate_element { display: none !important; }
/* Neutralise the top banner Google injects (it otherwise shifts the page down) */
.goog-te-banner-frame, .skiptranslate iframe.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; position: static !important; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
.sidebar-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-muted); padding: 10px 2px 4px;
}
.sidebar-actions { padding: 8px 0; }

/* Login widget (public sidebar) */
.login-widget {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  margin: 4px 0 8px;
  box-shadow: var(--shadow);
}
.login-widget-title { font-weight: 600; font-size: 13px; color: var(--c-text); margin-bottom: 4px; }
.login-widget-title i { color: var(--c-success); margin-right: 4px; }
.login-widget-sub { font-size: 11px; color: var(--c-muted); margin: 0 0 10px; line-height: 1.3; }
.btn-login {
  background-color: var(--c-success) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600;
  display: inline-block !important;
  width: auto !important;
  min-width: 140px;
  margin: 0 auto !important;
  float: none !important;
}
.btn-login:hover, .btn-login:focus { background-color: #3d6657 !important; color: #fff !important; }

/* Threshold Settings button + "applied settings" badge — in the Surveillance
   controls bar, bottom-aligned with the selectors and the level badge. */
.controls-threshold { display: flex; align-items: flex-end; gap: 10px; padding-bottom: 2px; flex-wrap: wrap; }
.controls-threshold .btn-threshold { min-width: 0; padding: 6px 12px; margin: 0 !important; }
.threshold-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  white-space: nowrap;
  cursor: help;
}
.threshold-badge i { color: var(--c-primary); margin-right: 4px; }
.btn-threshold {
  background-color: var(--c-primary) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600;
  display: inline-block !important;
  width: auto !important;
  min-width: 140px;
  margin: 0 auto !important;
  float: none !important;
}
.btn-threshold:hover, .btn-threshold:focus { background-color: var(--c-primary-dark) !important; color: #fff !important; }
.sidebar-partners {
  text-align: center; padding: 10px; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: 10px; margin-bottom: 8px;
}
.sidebar-partners img { max-height: 88px; max-width: 100%; height: auto; }

/* ---- Content + banner ---------------------------------------------------- */
.content { padding: 16px; }
.app-banner {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
  color: #fff; text-align: center; font-size: 20px; font-weight: 700;
  padding: 16px 18px; border-radius: var(--radius); margin-bottom: 16px;
  box-shadow: var(--shadow); letter-spacing: -0.01em;
}

/* ---- Boxes --------------------------------------------------------------- */
.box {
  border: 1px solid var(--c-border);
  border-top: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--c-surface);
}
.box > .box-header { border-bottom: 1px solid var(--c-border); padding: 14px 16px; position: relative; }

/* Systematic chart-box header tools (PNG + Help), pinned top-right */
.box-header-tools { position: absolute; top: 8px; right: 10px; display: flex; gap: 6px; align-items: center; z-index: 20; }
.box-header-tools.inline { position: static; }
.box-header-tools .cised-tool-btn {
  padding: 2px 9px; font-size: 12px; line-height: 1.5; border-radius: 6px;
  background: #fff; border: 1px solid var(--c-border); color: var(--c-text);
}
.box-header-tools .cised-tool-btn:hover { background: #eef2f6; }
/* On coloured solid headers, make the tools legible (light on dark) */
.box.box-solid > .box-header .box-header-tools .cised-tool-btn {
  background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.55); color: #fff;
}
.box.box-solid > .box-header .box-header-tools .cised-tool-btn:hover { background: rgba(255,255,255,.28); }
#cised-help-body { font-size: 14px; line-height: 1.55; }
#cised-help-body ul { margin: 8px 0 0 18px; }

/* Coloured solid headers (used to liven up the Entomology / Bulletin tabs) */
.box.box-solid > .box-header,
.box.box-solid > .box-header .box-title,
.box.box-solid > .box-header .btn-box-tool { color: #fff !important; }
/* Default background so a solid header is never white text on white */
.box.box-solid > .box-header { background: #44607a; }
.box.box-solid.box-primary > .box-header { background: #44607a; }
.box.box-solid.box-info    > .box-header { background: #6b8190; }
.box.box-solid.box-success > .box-header { background: #4a7c6a; }
.box.box-solid.box-warning > .box-header { background: #b5894e; }
.box.box-solid.box-danger  > .box-header { background: #a85a52; }
.box.box-solid.box-primary { border-color: #44607a; }
.box.box-solid.box-info    { border-color: #6b8190; }
.box.box-solid.box-success { border-color: #4a7c6a; }
.box.box-solid.box-warning { border-color: #b5894e; }
.box.box-solid.box-danger  { border-color: #a85a52; }
.box > .box-header .box-title { font-weight: 600; font-size: 15px; color: var(--c-text); }
.box.box-success { border-top: none; }
.box.box-success > .box-header { color: var(--c-text); }
.box-body { padding: 16px; }

/* ---- tabBox (nav-tabs-custom) ------------------------------------------- */
.nav-tabs-custom {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--c-border);
  overflow: hidden;
}
.nav-tabs-custom > .nav-tabs {
  border-bottom: 1px solid var(--c-border);
  background: #fbfdfd;
}
.nav-tabs-custom > .nav-tabs > li > a { color: var(--c-muted); font-weight: 500; border: none; }
.nav-tabs-custom > .nav-tabs > li.active > a {
  color: var(--c-primary-dark); font-weight: 600;
}
.nav-tabs-custom > .nav-tabs > li.active {
  border-top: 3px solid var(--c-primary);
}
.nav-tabs-custom > .nav-tabs > li.active > a:hover { color: var(--c-primary-dark); }

/* ---- valueBox (native shinydashboard, restyled) ------------------------- */
.small-box {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.small-box h3 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
  margin: 0 0 4px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.small-box p {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400;
  line-height: 1.35;
  opacity: .95;
  margin: 0;
}
.small-box p strong { font-weight: 600; font-size: 13px; }
.small-box .icon { opacity: .22; font-size: 56px; }
/* High-contrast trend arrows on the (dark) value-box backgrounds */
.small-box p .text-danger,
.small-box p .fa-arrow-up { color: #ffce54 !important; }   /* rising -> bright amber */
.small-box p .text-success,
.small-box p .fa-arrow-down { color: #9be7c4 !important; } /* falling -> bright mint */
.small-box p .text-danger, .small-box p .text-success { font-weight: 700; }
/* Three distinct, muted value-box tones */
.small-box.bg-aqua   { background-color: var(--vb-1) !important; }
.small-box.bg-yellow { background-color: var(--vb-2) !important; }
.small-box.bg-blue   { background-color: var(--vb-3) !important; }
.small-box.bg-red    { background-color: var(--c-danger) !important; }
.small-box.bg-teal,
.small-box.bg-green  { background-color: var(--c-primary) !important; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  font-family: 'Inter', sans-serif !important;
  border-radius: 8px;
  font-weight: 600;
  border: none;
}
.btn-primary { background-color: var(--c-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--c-primary-dark); }
.btn-info { background-color: var(--c-primary); }
.btn-info:hover, .btn-info:focus { background-color: var(--c-primary-dark); }
.btn-danger { background-color: var(--c-danger); }
.btn-secondary { background-color: var(--c-muted); color: #fff; }

/* ---- Inputs -------------------------------------------------------------- */
.form-control {
  border-radius: 8px; border: 1px solid var(--c-border); color: var(--c-text);
}
.form-control:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }

/* selectInput: keep the dropdown caret from overlapping the value text */
.selectize-control { min-width: 180px; }
.selectize-input {
  border-radius: 8px !important;
  border: 1px solid var(--c-border) !important;
  padding-right: 30px !important;
}
.selectize-input.focus { border-color: var(--c-primary) !important; box-shadow: 0 0 0 3px var(--c-primary-soft) !important; }
.selectize-control.single .selectize-input:after { right: 14px; }
.selectize-input > input { width: auto !important; }
/* native <select> fallback */
select.form-control { padding-right: 28px; }

/* selectInput placed inline with a box title */
.box-header > .box-title { width: 100%; }

/* Surveillance tab: current-level badge next to the controls */
.level-indicator { display: flex; align-items: flex-end; padding-bottom: 2px; }
.level-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; font-weight: 600; font-size: 13px; }
.level-badge i { margin-right: 4px; }
.level-nat { background: #44607a; color: #fff; }
.level-prov { background: #4a7c6a; color: #fff; }

/* About-the-project tab */
.about-list { margin: 4px 0 0 2px; padding-left: 18px; }
.about-list li { margin: 6px 0; line-height: 1.5; }
.about-credit { margin-top: 12px; font-size: 13px; color: var(--c-muted); font-style: italic; }
.box-title-flex {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 12px; flex-wrap: nowrap;
}
.box-title-flex > .box-title-text { font-weight: 600; font-size: 15px; white-space: nowrap; }
.inline-week-select {
  display: flex; align-items: center; gap: 6px; font-weight: 400;
  flex-wrap: nowrap; white-space: nowrap;
}
.inline-week-select .control-label,
.inline-week-select label { margin: 0; font-size: 13px; color: var(--c-muted); white-space: nowrap; }
.inline-week-select .form-group,
.inline-week-select .shiny-input-container {
  margin: 0 !important; width: auto !important;
  display: inline-block; vertical-align: middle;
}
.inline-week-select .selectize-control { margin: 0; width: 150px; }
.inline-week-select .selectize-input { white-space: nowrap; }

/* Chart + overlaid help button (keeps box height equal to the map box) */
.chart-with-help { position: relative; }

/* Row of inline controls (selectors) inside a box — inline when there is room,
   wrap to the next line instead of overflowing when the box is narrow. */
.controls-row { display: flex !important; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.controls-row > .form-group,
.controls-row > .shiny-input-container {
  margin-bottom: 0 !important;
  width: auto !important;
  flex: 0 1 auto;
  max-width: 100%;
}
.controls-row .selectize-control { margin-bottom: 0; max-width: 100%; }

/* ---- Leaflet map: compact legends / controls ---------------------------- */
.leaflet-control .legend,
.leaflet .info.legend,
.leaflet-control.legend {
  font-size: 10px !important; line-height: 13px !important; padding: 4px 6px !important;
}
.leaflet .info.legend i,
.leaflet-control .legend i { width: 12px !important; height: 12px !important; }
.leaflet-control-layers { font-size: 11px !important; padding: 4px 8px !important; }
.leaflet-control-layers-list label { margin-bottom: 2px; }
.leaflet-control { box-shadow: 0 1px 4px rgba(30,41,59,.18) !important; }

/* ---- Footer -------------------------------------------------------------- */
.main-footer {
  background: var(--c-surface); border-top: 1px solid var(--c-border);
  color: var(--c-muted); font-size: 13px;
}

/* ---- Login panel (shinymanager auth_ui) --------------------------------- */
.panel-auth { background: var(--c-bg) !important; }
.panel-auth .panel {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}
.panel-auth .panel-body { padding: 24px !important; }
/* Stack every auth button full-width with clear spacing (fixes the overlapping
   "Request Login Credentials" / "Back To Main Page" buttons). */
#auth-auth-mod .btn,
.panel-auth .btn {
  border-radius: 8px;
  font-weight: 600;
  display: block;
  width: 100%;
  margin: 10px 0 0;
  float: none;
  position: static;
}
.panel-auth .btn-success { background-color: var(--c-primary); border-color: var(--c-primary); }
.panel-auth .btn-success:hover { background-color: var(--c-primary-dark); }
.panel-auth .form-control:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }

/* ---- Modals (Threshold Settings, etc.) ---------------------------------- */
.modal-content {
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 12px 48px rgba(15,23,42,.20);
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--c-border); padding: 16px 20px; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--c-border); padding: 12px 20px; }
.modal-title, .threshold-modal-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--c-text); font-size: 17px;
}
.threshold-modal-title i { color: var(--c-primary); }
.modal-footer .btn { background-color: var(--c-primary); color: #fff; border: none; }
.modal-footer .btn:hover { background-color: var(--c-primary-dark); color: #fff; }

.entomo-intro { color: var(--c-text); font-size: 14px; line-height: 1.55; margin: 0; }
.bulletin-dl { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.bulletin-dl .btn { min-width: 120px; }
.report-card-desc { color: var(--c-muted); font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
.report-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Landing-page bulletin toolbar (download buttons above the full-page iframe) */
.home-bulletin-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 6px 4px 10px; flex-wrap: wrap;
}
.home-bulletin-bar .home-bulletin-title { font-weight: 600; color: var(--c-text); }
.home-bulletin-bar .btn { margin-left: 6px; }

/* Sober "Export" button + format-choice popup */
.btn-export {
  background: var(--c-primary) !important; color: #fff !important; border: none !important;
  border-radius: 8px; font-weight: 600; padding: 6px 18px;
}
.btn-export:hover, .btn-export:focus { background: var(--c-primary-dark) !important; color: #fff !important; }
.export-modal-title { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.export-modal-title i { color: var(--c-primary); }
.export-choices { display: flex; gap: 14px; margin-top: 12px; }
.export-choice {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 20px 14px; border: 1px solid var(--c-border) !important; border-radius: 12px;
  background: var(--c-surface) !important; color: var(--c-text) !important;
  box-shadow: var(--shadow); transition: all .15s ease; text-align: center;
}
.export-choice:hover { border-color: var(--c-primary) !important; transform: translateY(-2px); }
.export-choice i { font-size: 26px; color: var(--c-primary); }
.export-choice span { font-weight: 600; font-size: 15px; }
.export-choice small { color: var(--c-muted); font-weight: 400; }
.threshold-intro { color: var(--c-muted); font-size: 13px; margin-bottom: 18px; }
.threshold-modal .control-label { font-weight: 600; color: var(--c-text); font-size: 13px; }
.threshold-section {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 16px 18px 4px;
  margin-top: 10px;
}
.threshold-section .form-group { margin-bottom: 16px; }

/* Segmented method selector (radioGroupButtons) */
.threshold-modal .btn-group-justified { margin-bottom: 4px; }
.threshold-modal .btn-group .btn {
  background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border); font-weight: 600; box-shadow: none;
}
.threshold-modal .btn-group .btn.active,
.threshold-modal .btn-group .btn:active {
  background: var(--c-primary) !important; color: #fff !important; border-color: var(--c-primary) !important;
}
/* Sliders in the theme colour */
.threshold-section .irs-bar,
.threshold-section .irs-handle > i:first-child { background: var(--c-primary) !important; }
.threshold-section .irs-from, .threshold-section .irs-to, .threshold-section .irs-single { background: var(--c-primary) !important; }