/* Lut branding override for self-hosted SigNoz (Orlando/finresults instance).
 *
 * Same technique and file layout as the signoz-avira box - see that box's
 * custom-override.css for the full rationale writeup. 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 -> "Lut". 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: 'Lut';
  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 "Lut" -
 * 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. Lut'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://cdn.prod.website-files.com/6950e34453ea2b4398138708/6968347fb2510d13c148b0f5_LUT_logo_Primary_White.svg');
  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. */
@media (max-width: 768px) {
  .sidenav-container {
    display: none !important;
  }

  .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 has flex: 0 1 auto upstream -
   * it never expands to claim space freed up by a hidden sibling. Force it
   * to actually grow and fill (same fix as signoz-avira). */
  .log-module-right-section {
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  /* Dashboards (incl. the TV rotation - tv-rotate.js) use react-grid-layout:
   * every panel is `.react-grid-item` with `position: absolute` and an
   * inline `width`/`height`/`transform: translate(x,y)` computed in JS from
   * the 12-column desktop grid. That inline style wins over any CSS we
   * write at equal specificity, so this HAS to be !important - there's no
   * lower-impact way to override an inline style. Confirmed on TV 01 at a
   * 390px viewport: panels don't reflow, they render 628px wide, way past
   * the viewport, since react-grid-layout sizes columns off container
   * width, and the container itself doesn't shrink independently of the
   * inline style.
   *
   * Fix: force every grid item into normal document flow instead of
   * fighting react-grid-layout's absolute positioning - full width, stacked
   * vertically, one panel per screen's worth of scroll. This is the "flex
   * mount" ask: panels reflow like any other block content instead of
   * staying pinned to their desktop grid coordinates. */
  .react-grid-layout {
    position: static !important;
    height: auto !important;
  }
  .react-grid-item {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: 300px !important;
    margin-bottom: 12px;
  }
  /* react-grid-layout also renders a placeholder/drag-preview element during
   * edit mode - harmless on a read-only TV view, but if a dashboard is ever
   * opened for editing from a phone, don't let it interfere with the
   * stacked layout above. */
  .react-grid-placeholder {
    display: none !important;
  }

  /* Dashboard edit toolbar (Actions / Configure / JSON / New Panel) - real
   * estate a phone can't spare and not something anyone's doing from a
   * phone anyway; same rationale as hiding the sidenav above. Class name is
   * a CSS-module hash (`_2mwa6_2`) - same upgrade-fragility caveat as the
   * rest of this file per the MAINTENANCE NOTE at the top: re-verify this
   * selector against the new bundle after a SigNoz version upgrade. */
  ._dashboardActionsContainer_2mwa6_2 {
    display: none !important;
  }
}

/* Multi-level quick-views panel: Dashboards / Saved Views expandable groups.
 * Tighter row padding than the old flat item list (8px 14px) to address
 * "rows are quite spread out" once a group has many items expanded. */
.avira-quickviews-group + .avira-quickviews-group {
  border-top: 1px solid #2a2a3d;
}
.avira-quickviews-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px 2px 14px;
}
/* The primary, obvious click target - expands/collapses. A <button>
 * spanning almost the full row width, not a small icon, so it's the thing
 * people naturally click. */
.avira-quickviews-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #999;
}
.avira-quickviews-group-title:hover {
  color: #eee;
}
.avira-quickviews-chevron {
  font-size: 10px;
  color: #666;
  width: 10px;
  display: inline-block;
}
.avira-quickviews-group-title:hover .avira-quickviews-chevron {
  color: #aaa;
}
/* The secondary, deliberately small "go to the full page" control -
 * separate from the expand click target so the two actions can't be
 * confused for each other. */
.avira-quickviews-group-open {
  color: #666;
  text-decoration: none;
  font-size: 13px;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 4px;
}
.avira-quickviews-group-open:hover {
  color: #eee;
  background: #2a2a44;
}
.avira-quickviews-group-list {
  max-height: 240px;
  overflow-y: auto;
}
.avira-quickviews-item {
  display: block;
  padding: 5px 14px 5px 22px;
  color: #eee;
  text-decoration: none;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.avira-quickviews-item:hover {
  background: #2a2a44;
}
.avira-quickviews-item-static {
  color: #aaa;
  cursor: default;
}
.avira-quickviews-open-all {
  color: #8ab4ff;
  font-weight: 500;
  border-top: 1px solid #2a2a3d;
  margin-top: 2px;
  padding-top: 8px;
}