body { background: #101418; color: #dce3e8; }
a { color: #50b5ff; }
a:hover, a:focus { color: #8dd0ff; }
.dashboard-shell { padding: 24px; max-width: 1800px; }
.dashboard-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 30px; margin-bottom: 24px; background: linear-gradient(135deg,#17212b,#263747); border: 1px solid #34495e; }
.dashboard-header h1 { margin: 0; font-size: 42px; letter-spacing: -1px; }
.eyebrow { margin: 0 0 6px; color: #50b5ff; font-size: 12px; font-weight: 700; letter-spacing: 1.8px; }
.subtitle { margin: 5px 0 0; color: #aebbc5; }
.panel { border-color: #34495e; box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.panel-primary > .panel-heading { background: #243444; border-color: #34495e; }
.panel-title { font-size: 15px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.nav-panel .panel-body { padding: 10px 8px; overflow-x: auto; }
.nav-panel table { width: 100%; }
.nav-panel td { padding: 5px 7px; }
.menulinkactive { color: #fff; font-weight: 700; }
.content-panel .panel-body { overflow-x: auto; }
.content-panel img { max-width: 100%; height: auto; }
.remark { color: #aebbc5; font-size: 16px; }
#filter_title { float: left; margin-right: 8px; font-size: 16px; font-weight: 700; }
#filter_text { margin-bottom: 16px; }
.dashboard-footer { margin: 8px 0 0; color: #aebbc5; }
.dashboard-footer .panel-body { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dashboard-footer .logos { margin-left: auto; }
.dashboard-footer .logos img { width: auto; height: 28px; margin-left: 8px; }
@media (max-width: 767px) {
  .dashboard-shell { padding: 12px; }
  .dashboard-header { align-items: flex-start; padding: 20px; }
  .dashboard-header h1 { font-size: 34px; }
  .header-actions { margin-left: 15px; }
  .dashboard-footer .logos { margin-left: 0; width: 100%; }
}

/* High-resolution SmokePing graph presentation */
.content-panel > .panel-body { overflow: visible; }
.overview {
  max-width: 100%;
  overflow-x: auto;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #d8dee6;
  border-radius: 8px;
  scrollbar-color: #607d98 #e9eef3;
  scrollbar-width: thin;
}
.overview img {
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  background: #ffffff;
}
.details .panel-no-border {
  margin: 0 0 22px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #d8dee6;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.details .panel-heading-no-border {
  padding: 13px 16px;
  color: #17212b;
  background: #f4f7fa;
  border-bottom: 1px solid #d8dee6;
}
.details .panel-heading-no-border h2 {
  margin: 0;
  color: #17212b;
  font-size: 16px;
  font-weight: 700;
}
.details .panel-body {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 16px;
  background: #ffffff;
  scrollbar-color: #607d98 #e9eef3;
  scrollbar-width: thin;
}
.details .panel-body a {
  display: block;
  width: max-content;
  min-width: 100%;
}
.details .panel-body img {
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  background: #ffffff;
  image-rendering: auto;
}
.overview::-webkit-scrollbar,
.details .panel-body::-webkit-scrollbar { height: 11px; }
.overview::-webkit-scrollbar-track,
.details .panel-body::-webkit-scrollbar-track {
  background: #e9eef3;
  border-radius: 999px;
}
.overview::-webkit-scrollbar-thumb,
.details .panel-body::-webkit-scrollbar-thumb {
  background: #607d98;
  border: 2px solid #e9eef3;
  border-radius: 999px;
}
.overview::-webkit-scrollbar-thumb:hover,
.details .panel-body::-webkit-scrollbar-thumb:hover { background: #405b73; }

/* Do not render the empty overview placeholder on detail pages. */
.overview:empty { display: none; }

/* Keep wide high-resolution graphs inside their dedicated scroller on RTL/mobile layouts. */
html, body { max-width: 100%; overflow-x: hidden; }
.details .panel-body { position: relative; contain: paint; direction: ltr; }
.details .panel-heading-no-border { direction: rtl; }