/* Aviradigital branding override for self-hosted SigNoz.
 *
 * SigNoz has no built-in white-labeling (confirmed - not even in Enterprise
 * as of this writing, per the SigNoz team's own community chat). This file
 * is bind-mounted over the served frontend and linked from a one-line patch
 * to index.html (<link rel="stylesheet" href="custom-override.css" />,
 * added just before </head>).
 *
 * MAINTENANCE NOTE: index.html is a copy taken from a running container,
 * not the upstream source - it references version-hashed JS/CSS bundle
 * filenames (e.g. index-BshaidSY.js) that change on every SigNoz version
 * upgrade. This override file itself doesn't reference those hashes, but
 * the bind-mounted index.html WILL go stale on upgrade and needs re-syncing
 * from the new image (re-extract index.html, re-apply this same one-line
 * patch) whenever signoz/signoz:latest is pulled fresh.
 */

/* "Free" badge -> "Aviradigital". Pure CSS text swap: hide the real text
 * node, render replacement text via a positioned pseudo-element in its
 * place - can't just edit textContent from CSS, only content via ::after. */
.license-type {
  visibility: hidden;
  position: relative;
}
.license-type::after {
  visibility: visible;
  content: 'Aviradigital';
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

/* Version number ("v0.136.1") sat right next to the badge and visually
 * collided with the longer replacement text once "Free" became
 * "Aviradigital" - hidden outright per request, not just repositioned. */
.version-container {
  display: none !important;
}

/* Logo: SigNoz mark is an inline data:image/svg+xml embedded directly in
 * the React bundle (not a swappable static file) - overridden here by
 * replacing the rendered image content directly via CSS `content:`, which
 * works on <img> in all evergreen browsers. Aviradigital's white logo is
 * built for a dark background (matches SigNoz's default dark theme); if
 * the workspace is ever switched to light mode this will look wrong -
 * revisit with a light-mode variant if that happens. */
img[alt='SigNoz'] {
  content: url('https://www.aviradigital.com/assets/img/white-logo2.png');
  object-fit: contain;
}

/* Quick-views hamburger menu (hamburger-menu.js builds the DOM, this just
 * styles it). Fixed bottom-right - reachable with a thumb on mobile,
 * doesn't collide with the app's own top-right icons on desktop. */
#avira-quickviews-btn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 10000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#avira-quickviews-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
#avira-quickviews-panel {
  position: fixed;
  bottom: 68px;
  right: 16px;
  z-index: 10000;
  width: 260px;
  max-height: 60vh;
  overflow-y: auto;
  background: #1a1a2e;
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  padding: 8px 0;
}
.avira-quickviews-heading {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #999;
}
.avira-quickviews-empty {
  padding: 8px 14px;
  font-size: 13px;
  color: #777;
}
#avira-quickviews-panel a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  color: #eee;
  text-decoration: none;
  font-size: 13px;
}
#avira-quickviews-panel a:hover {
  background: #2a2a44;
}
.avira-quickviews-tag {
  font-size: 10px;
  color: #999;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* Mobile: the full desktop nav (Home/Alerts/Dashboards/Services/...) isn't
 * usable on a small screen and isn't the point of mobile access anyway -
 * hide it entirely, leaving just the Logs page content plus the quick-views
 * hamburger (hamburger-menu.js) as the only way to navigate. Layout is
 * flex-based (confirmed live: main content has 0 compensating margin), so
 * hiding the sidenav reflows the content area cleanly with no extra fixup
 * needed. */
@media (max-width: 768px) {
  .sidenav-container {
    display: none !important;
  }

  /* Same instinct extended to the Logs Explorer page's own chrome: the
   * Explorer/Pipelines/Views tab bar, the List View/Time Series/Table +
   * time-range toolbar, the live-mode frequency chart/settings panel, and
   * the bottom "select a view / save / create alert" bar all take real
   * space and aren't needed for "just show me the logs" on a phone.
   * hamburger-menu.js's auto-Live-mode click happens BEFORE these are
   * visually hidden (a hidden button can still be .click()'d
   * programmatically - display:none only blocks rendering, not JS), so
   * hiding the toolbar doesn't block that from working. */
  .ant-tabs-nav,
  .log-module-right-section > .toolbar,
  .live-logs-settings-panel,
  .explorer-options-container,
  section.filters,
  .quick-filters-container,
  section.log-quick-filter-left-section {
    display: none !important;
  }

  /* Root cause of the large blank area once the left filter panel is
   * hidden above: .log-module-right-section (the whole content column -
   * toolbar + table) has flex: 0 1 auto upstream, meaning flex-grow:0 - it
   * never expands to claim space freed up by a hidden sibling, it just
   * collapses to its own minimal content width and leaves the reclaimed
   * area as blank background. Force it to actually grow and fill. */
  .log-module-right-section {
    flex: 1 1 auto !important;
    width: 100% !important;
  }
}