/* HB Telecom — AppLayout
 * Chrome fixo (SidebarHeader + Header + divider)
 * SidebarMenu + Main rolam juntos no documento
 */

:root {
  --app-layout-topbar-height: var(--ui-topbar-height, 60px);
  --app-layout-divider-size: 1px;
  --app-canvas-bg: var(--docs-sidebar-bg, var(--app-header-bg-color, #0a1220));
  --app-sidebar-bg: var(--app-canvas-bg);
  --app-main-bg: var(--app-canvas-bg);
  --app-header-surface-bg: var(--app-canvas-bg);
  --app-elevated-bg: var(--app-card-bg-color, #1c2638);
  --app-elevated-hover-bg: #263247;
  --app-surface-border: rgba(255, 255, 255, 0.08);
  --app-background-color: var(--app-canvas-bg);
  --app-shell-bg: var(--app-canvas-bg);
  --app-layout-divider-gradient: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.1)
  );
  --app-layout-divider-glow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 8px rgba(255, 255, 255, 0.02);
}

body[data-nav-menu-style="docs"] {
  --docs-sidebar-bg: #0a1220;
  --app-canvas-bg: #0a1220;
  --app-sidebar-bg: #0a1220;
  --app-main-bg: #0a1220;
}

.app-layout .docs-sidebar,
.app-layout .app-sidebar {
  background: var(--app-canvas-bg) !important;
  border: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

.app-layout {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--app-canvas-bg);
  position: relative;
}

/* —— Chrome fixo: SidebarHeader | Header + divider —— */
.app-layout__chrome {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  background: var(--app-canvas-bg);
  position: relative;
}

/* Linha de progresso — fixa na viewport inteira (100vw), de ponta a ponta */
html:has(.app-layout)::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 2px;
  z-index: 2147483646;
  pointer-events: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: linear-gradient(
    90deg,
    #34d399 0%,
    #2dd4bf 14%,
    #22d3ee 28%,
    #60a5fa 44%,
    #818cf8 58%,
    #a855f7 72%,
    #d946ef 86%,
    #f472b6 100%
  );
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: 0 0;
  will-change: transform;
}

.sidebar-header,
.app-layout__brand {
  display: flex;
  align-items: center;
  padding: 0 18px;
  min-height: var(--app-layout-topbar-height);
  height: var(--app-layout-topbar-height);
  background: var(--app-canvas-bg);
  color: var(--app-header-text-color);
  border: none;
  box-shadow: none;
}

.app-layout__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  min-height: var(--app-layout-topbar-height);
  height: var(--app-layout-topbar-height);
  background: var(--app-canvas-bg);
  color: var(--app-header-text-color);
  border: none;
  box-shadow: none;
}

.app-layout__header.app-topbar {
  background: var(--app-canvas-bg);
  border: none;
  box-shadow: none;
}

.app-layout__divider {
  display: block;
  width: 100%;
  height: var(--app-layout-divider-size);
  min-height: var(--app-layout-divider-size);
  margin: 0;
  padding: 0;
  border: none;
  background: var(--app-layout-divider-gradient);
  box-shadow: var(--app-layout-divider-glow);
  pointer-events: none;
}

/* —— Sidebar: só o menu (rola com a página) —— */
.app-layout__sidebar {
  display: block;
  background: var(--app-canvas-bg);
  color: var(--app-header-text-color);
  overflow: visible;
  align-self: stretch;
  border: none;
  border-right: none;
  box-shadow: none;
}

.app-layout__sidebar::before,
.app-layout__sidebar::after,
.app-layout__sidebar nav::before,
.app-layout__sidebar nav::after,
.app-layout__sidebar .sidebar-menu::before,
.app-layout__sidebar .sidebar-menu::after,
.app-layout__sidebar .docs-sidebar__nav::before,
.app-layout__sidebar .docs-sidebar__nav::after {
  display: none !important;
  content: none !important;
}

.app-divider,
.app-divider--header,
.app-divider--sidebar {
  display: none !important;
}

.app-layout__sidebar.app-sidebar,
.app-layout__sidebar.docs-sidebar {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  box-shadow: none;
  overflow: visible;
  background: var(--app-canvas-bg);
  border: none;
}

@media (min-width: 901px) {
  .app-layout .app-layout__sidebar.app-sidebar,
  .app-layout .app-layout__sidebar.docs-sidebar {
    position: static;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  .app-layout .app-layout__main.app-main {
    min-height: 100%;
    height: auto;
    overflow: visible;
  }
}

.sidebar-menu,
.app-layout__sidebar nav,
.app-layout__sidebar .docs-sidebar__nav,
.app-layout__sidebar .sidebar-menu.docs-sidebar__nav {
  display: block;
  overflow: visible;
  border: none;
  padding: 8px 0 24px;
  flex: none;
  min-height: 0;
  height: auto;
}

/* —— Main: rola junto com sidebar-menu —— */
.app-layout__main {
  display: block;
  background: var(--app-main-bg);
  min-width: 0;
  overflow: visible;
  box-shadow: none;
  align-self: stretch;
}

.app-layout__main.app-main {
  background: var(--app-main-bg);
  min-height: 100%;
}

.app-layout__main .container.app-content {
  overflow: visible;
  background: transparent;
}

.app-layout__sidebar .app-sidebar-brand,
.app-layout__sidebar .docs-sidebar__brand {
  display: none !important;
}

/* —— Desktop —— */
@media (min-width: 901px) {
  .app-layout {
    display: grid;
    grid-template-columns: var(--ui-sidebar-width, 260px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 100vh;
  }

  body[data-nav-menu-style="docs"] .app-layout {
    grid-template-columns: var(--docs-sidebar-width, 300px) minmax(0, 1fr);
  }

  .app-layout__chrome {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: var(--ui-sidebar-width, 260px) minmax(0, 1fr);
    grid-template-rows: var(--app-layout-topbar-height) var(--app-layout-divider-size);
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--app-canvas-bg);
  }

  body[data-nav-menu-style="docs"] .app-layout__chrome {
    grid-template-columns: var(--docs-sidebar-width, 300px) minmax(0, 1fr);
  }

  .sidebar-header,
  .app-layout__brand {
    grid-column: 1;
    grid-row: 1;
  }

  .app-layout__header {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    top: auto;
    z-index: 2;
  }

  .app-layout__divider {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .app-layout__sidebar {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
    min-height: 100%;
  }

  /* Linha vertical sidebar/conteúdo — altura total da página (não só do conteúdo) */
  .app-layout::after {
    content: "";
    position: absolute;
    top: calc(var(--app-layout-topbar-height) + var(--app-layout-divider-size));
    left: var(--ui-sidebar-width, 260px);
    width: 1px;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
    background: var(--app-surface-border, rgba(255, 255, 255, 0.08));
  }

  body[data-nav-menu-style="docs"] .app-layout::after {
    left: var(--docs-sidebar-width, 300px);
  }

  .app-layout__main {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    min-height: 100%;
    box-shadow: none;
  }

  .app-layout__header .app-topbar-title,
  .app-layout__header .mobile-menu-toggle {
    display: none;
  }

  .mobile-nav-overlay {
    display: none;
  }
}

/* —— Mobile —— */
@media (max-width: 900px) {
  .app-layout__chrome {
    position: sticky;
    top: 0;
    z-index: 130;
    display: block;
    background: var(--app-canvas-bg);
  }

  .sidebar-header,
  .app-layout__brand {
    display: none;
  }

  .app-layout__divider {
    display: none;
  }

  .app-layout__header {
    height: auto;
    min-height: var(--app-layout-topbar-height);
    padding: 0 16px;
  }

  .app-layout__header .mobile-menu-toggle {
    display: inline-flex;
  }

  .app-layout__header .app-topbar-title {
    display: block;
    flex: 1;
    min-width: 0;
  }

  .app-layout .app-layout__sidebar,
  .app-layout .app-layout__sidebar.app-sidebar,
  .app-layout .app-layout__sidebar.docs-sidebar {
    position: fixed;
    left: 0;
    top: var(--mobile-topbar-bottom, var(--app-layout-topbar-height));
    width: min(var(--docs-sidebar-width, var(--ui-sidebar-width, 260px)), 85vw);
    max-width: min(var(--docs-sidebar-width, var(--ui-sidebar-width, 260px)), 85vw);
    height: calc(100dvh - var(--mobile-topbar-bottom, var(--app-layout-topbar-height)));
    max-height: none;
    margin: 0;
    padding: 0;
    z-index: 120;
    transform: translateX(-100%);
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  body.mobile-menu-open .app-layout .app-layout__sidebar,
  body.mobile-menu-open .app-layout .app-layout__sidebar.app-sidebar,
  body.mobile-menu-open .app-layout .app-layout__sidebar.docs-sidebar {
    transform: translateX(0);
    pointer-events: auto;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
  }

  .app-layout__sidebar a.nav-hide-mobile,
  .app-layout__sidebar .nav-group.nav-hide-mobile,
  .app-layout__sidebar a[data-nav-key="chat"],
  .app-layout__sidebar .docs-sidebar__link.nav-hide-mobile {
    display: none !important;
  }

  .app-layout__main {
    box-shadow: none;
  }

  .mobile-nav-overlay {
    display: block;
    position: fixed;
    top: var(--mobile-topbar-bottom, var(--app-layout-topbar-height));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 110;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }

  body.mobile-menu-open .mobile-nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .app-layout__sidebar .docs-sidebar__link-inner {
    min-height: calc(var(--docs-sidebar-item-py, 12px) * 2 + 1em * var(--docs-sidebar-line, 1.35));
    display: flex;
    align-items: center;
    padding-top: var(--docs-sidebar-item-py, 12px);
    padding-bottom: var(--docs-sidebar-item-py, 12px);
  }

  .app-layout__sidebar .docs-sidebar__category-head {
    align-items: stretch;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
  }

  .app-layout__sidebar .docs-sidebar__caret {
    width: var(--docs-sidebar-caret-size, 36px) !important;
    min-width: var(--docs-sidebar-caret-size, 36px) !important;
    max-width: var(--docs-sidebar-caret-size, 36px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
  }
}

/* —— Superfícies unificadas —— */
body {
  background: var(--app-canvas-bg) !important;
}

.app-main,
.app-sidebar,
.docs-sidebar {
  background: var(--app-canvas-bg);
}

.app-layout__main .card.app-page,
.app-layout__main section.card.app-page,
.dash-completo-wrap.card.app-page {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.card:not(.app-page),
.metric-card,
.os-page-form-panel,
.dash-completo-panel,
.dash-completo-tiles,
.dash-completo-tile {
  background: var(--app-elevated-bg);
  border-color: var(--app-surface-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

.card:not(.app-page):hover,
.metric-card:hover {
  background: var(--app-elevated-hover-bg);
}

.dash-completo-wrap {
  --dash-surface: var(--app-elevated-bg);
  --dash-border: var(--app-surface-border);
}

.app-layout__main table {
  background: transparent;
  border-color: var(--app-surface-border);
}

.app-layout__main thead th {
  background: color-mix(in srgb, var(--app-elevated-bg) 82%, var(--app-canvas-bg) 18%);
}

.app-layout__main tbody tr {
  background: transparent;
}

.app-layout__main tbody tr:hover {
  background: color-mix(in srgb, var(--app-elevated-hover-bg) 60%, transparent);
}

.app-layout__main input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.app-layout__main select,
.app-layout__main textarea {
  background: var(--app-elevated-bg);
  border-color: var(--app-surface-border);
}

.dash-completo-panel--main,
.dashboard-chart-panel,
.dash-completo-ativacoes-chart {
  background: var(--app-elevated-bg);
}

/* Overrides finais — canvas único */
body[data-nav-menu-style="docs"] .docs-sidebar,
body[data-nav-menu-style="docs"] .app-layout__sidebar.docs-sidebar {
  background: var(--app-canvas-bg) !important;
}

.app-layout__sidebar,
.app-layout__main,
.app-layout__chrome,
.sidebar-header,
.app-layout__brand,
.app-layout__header,
.app-layout__header.app-topbar {
  background-color: var(--app-canvas-bg);
}

/* Sem blur / glass no header — só fundo sólido */
.app-layout__chrome,
.app-layout__header,
.app-layout__header.app-topbar,
.app-layout__header.app-topbar.header--scrolled,
[data-theme-preset="dark"] .app-layout__header.app-topbar,
[data-theme-preset="light"] .app-layout__header.app-topbar,
[data-theme-preset="dark"] .app-topbar,
[data-theme-preset="light"] .app-topbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  background: var(--app-canvas-bg) !important;
  box-shadow: none !important;
}

/* —— Scrollbar (estilo referência — track + thumb pill + setas) —— */
:root {
  --app-scrollbar-size: 14px;
  --app-scrollbar-track-bg: #171c28;
  --app-scrollbar-track-line: rgba(255, 255, 255, 0.08);
  --app-scrollbar-thumb: #5a6172;
  --app-scrollbar-thumb-hover: #707889;
  --app-scrollbar-button: #171c28;
}

html:has(.app-layout) {
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track-bg);
}

@media (min-width: 901px) {
  html:has(.app-layout)::-webkit-scrollbar {
    width: var(--app-scrollbar-size);
    height: var(--app-scrollbar-size);
  }

  html:has(.app-layout)::-webkit-scrollbar-track {
    background: var(--app-scrollbar-track-bg);
    border-left: 1px solid var(--app-scrollbar-track-line);
  }

  html:has(.app-layout)::-webkit-scrollbar-thumb {
    background-color: var(--app-scrollbar-thumb);
    border-radius: 999px;
    border: 4px solid var(--app-scrollbar-track-bg);
    background-clip: padding-box;
    min-height: 40px;
  }

  html:has(.app-layout)::-webkit-scrollbar-thumb:hover {
    background-color: var(--app-scrollbar-thumb-hover);
  }

  html:has(.app-layout)::-webkit-scrollbar-button:single-button {
    display: block;
    height: 14px;
    width: var(--app-scrollbar-size);
    background-color: var(--app-scrollbar-button);
    border-left: 1px solid var(--app-scrollbar-track-line);
  }

  html:has(.app-layout)::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%238b93a7' d='M4 0 8 5H0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }

  html:has(.app-layout)::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%238b93a7' d='M4 5 0 0h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }

  html:has(.app-layout)::-webkit-scrollbar-corner {
    background: var(--app-scrollbar-track-bg);
  }
}

/* Linha de progresso alinhada à viewport (inclui faixa da scrollbar) */
html:has(.app-layout)::before {
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Barra de progresso — scroll-driven (Chrome / Firefox / Edge) */
@supports (animation-timeline: scroll()) {
  html:has(.app-layout)::before {
    animation: app-scroll-progress-line linear;
    animation-timeline: scroll(root block);
    animation-range: 0% 100%;
  }

  @keyframes app-scroll-progress-line {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
}