/* ==========================================================================
   TEEYA GLOBAL SCROLLBAR DESIGN SYSTEM
   Engineered for root viewport, dark console drawers, and warm paper surfaces.
   Note: `scrollbar-width` / `scrollbar-color` are scoped to `@supports not
   selector(::-webkit-scrollbar)` so Chromium/Edge/Safari keep full gradient,
   pill-radius, and glow support on `::-webkit-scrollbar`.
   ========================================================================== */

:root {
  --sb-track-dark:      #0B1118;
  --sb-track-ink:       #151F2B;
  --sb-track-paper:     #EFE8DA;
  --sb-thumb-gradient:  linear-gradient(180deg, #F0402C 0%, #FF6A1A 52%, #FF9A3D 100%);
  --sb-thumb-hover:     linear-gradient(180deg, #FF5338 0%, #FF7A2E 50%, #FFB347 100%);
  --sb-thumb-active:    linear-gradient(180deg, #D9321E 0%, #E8580C 55%, #F59E0B 100%);
  --sb-thumb-subtle:    rgba(21, 31, 43, 0.26);
  --sb-thumb-dark-idle: rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------------------------------
   1. ROOT VIEWPORT SCROLLBAR (HTML / BODY)
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--sb-track-dark);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.06);
}

::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-gradient);
  border-radius: 999px;
  border: 2.5px solid var(--sb-track-dark);
  background-clip: padding-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  min-height: 44px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-hover);
  border-width: 2px;
  border-color: var(--sb-track-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 0 12px rgba(255, 106, 26, 0.55);
}

::-webkit-scrollbar-thumb:active {
  background: var(--sb-thumb-active);
  border-width: 2px;
  border-color: var(--sb-track-dark);
}

::-webkit-scrollbar-corner {
  background: var(--sb-track-dark);
}

/* --------------------------------------------------------------------------
   2. DARK CONSOLE CONTAINERS (SIDEBAR, SEARCH DROPDOWN, MEGA-MENU)
   -------------------------------------------------------------------------- */
.ink-sidebar::-webkit-scrollbar,
.search-results-dropdown::-webkit-scrollbar,
.services-mega-menu::-webkit-scrollbar,
.dark-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.ink-sidebar::-webkit-scrollbar-track,
.search-results-dropdown::-webkit-scrollbar-track,
.services-mega-menu::-webkit-scrollbar-track,
.dark-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
  box-shadow: none;
}

.ink-sidebar::-webkit-scrollbar-thumb,
.search-results-dropdown::-webkit-scrollbar-thumb,
.services-mega-menu::-webkit-scrollbar-thumb,
.dark-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 106, 26, 0.55) 0%, rgba(255, 154, 61, 0.45) 100%);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
  min-height: 32px;
}

.ink-sidebar::-webkit-scrollbar-thumb:hover,
.search-results-dropdown::-webkit-scrollbar-thumb:hover,
.services-mega-menu::-webkit-scrollbar-thumb:hover,
.dark-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-gradient);
}

/* --------------------------------------------------------------------------
   3. LIGHT / PAPER CONTAINERS (MODALS, PIPELINE TRACK, TABLES, TEXTAREAS)
   -------------------------------------------------------------------------- */
.modal-card::-webkit-scrollbar,
.pipeline-track-wrap::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
textarea::-webkit-scrollbar,
pre::-webkit-scrollbar,
.paper-scroll::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.modal-card::-webkit-scrollbar-track,
.pipeline-track-wrap::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track,
.paper-scroll::-webkit-scrollbar-track {
  background: var(--sb-track-paper);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(21, 31, 43, 0.06);
}

.modal-card::-webkit-scrollbar-thumb,
.pipeline-track-wrap::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb,
.paper-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #F0402C 0%, #FF6A1A 55%, #FF9A3D 100%);
  border-radius: 999px;
  border: 1.5px solid var(--sb-track-paper);
  min-height: 32px;
}

.modal-card::-webkit-scrollbar-thumb:hover,
.pipeline-track-wrap::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover,
pre::-webkit-scrollbar-thumb:hover,
.paper-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-hover);
}

/* --------------------------------------------------------------------------
   4. FIREFOX FALLBACK (Scoped so Chromium keeps full WebKit gradient styling)
   -------------------------------------------------------------------------- */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: #FF6A1A #0B1118;
  }
  .ink-sidebar,
  .search-results-dropdown,
  .services-mega-menu {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 106, 26, 0.65) rgba(255, 255, 255, 0.04);
  }
  .modal-card,
  .pipeline-track-wrap,
  .table-wrap,
  textarea {
    scrollbar-width: thin;
    scrollbar-color: #FF6A1A #EFE8DA;
  }
}

/* --------------------------------------------------------------------------
   5. GLOBAL SMARTPHONE & MOBILE VIEWPORT RESPONSIVENESS
   Ensures zero horizontal overflow across all marketing, docs, auth, and console pages.
   -------------------------------------------------------------------------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 767.98px) {
  .container-teeya {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }
  .nav-edition-pill {
    display: none !important;
  }
  .nav-inner {
    gap: 8px !important;
  }
  .nav-right {
    gap: 6px !important;
  }
  .btn-nav-login {
    padding: 0 10px !important;
    height: 34px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .site-nav .btn-teeya {
    padding: 7px 11px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .telemetry-inner > div > span:not(.telemetry-badge) {
    display: none !important;
  }
  pre, .code-box, .hdw-snippet-preview {
    max-width: 100% !important;
    overflow-x: auto !important;
  }
  .table-responsive, .surface-card {
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}