/* ============================================================
   TMProxy Docs — Custom CSS
   ============================================================ */

/* ----------------------------------------------------------
   [C0] Top tabs navigation bar (Bright Data style)
   ---------------------------------------------------------- */
.tm-tabs {
  position: sticky;
  top: var(--navbar-height);
  z-index: 19;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.dark .tm-tabs {
  background: #0f1520;
  border-color: rgba(255, 255, 255, 0.1);
}
.tm-tabs-inner {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 100%;
  padding: 0 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.tm-tabs-inner::-webkit-scrollbar {
  display: none;
}
/* Offset sidebar and content for sticky tabs bar */
@media (min-width: 768px) {
  .sidebar-container {
    top: calc(var(--navbar-height) + 42px) !important;
  }
  .sidebar-container .hx-overflow-y-auto {
    max-height: calc(100vh - var(--navbar-height) - 42px - var(--menu-height, 0px)) !important;
  }
}
.tm-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: #6b7280;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.tm-tab:hover {
  color: #111827;
}
.dark .tm-tab {
  color: #9ca3af;
}
.dark .tm-tab:hover {
  color: #f3f4f6;
}
.tm-tab--active {
  color: #111827;
  font-weight: 500;
  border-bottom-color: #26c6da;
}
.dark .tm-tab--active {
  color: #f3f4f6;
  border-bottom-color: #26c6da;
}

/* ----------------------------------------------------------
   [C0b] Sidebar icons
   ---------------------------------------------------------- */
.tm-sidebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
  color: #6b7280;
}
.sidebar-active-item .tm-sidebar-icon {
  color: inherit;
}
.dark .tm-sidebar-icon {
  color: #6b7280;
}
.dark .sidebar-active-item .tm-sidebar-icon {
  color: inherit;
}

/* ----------------------------------------------------------
   [C1] Search bar: expand in navbar on mobile, fixed width on desktop
   ---------------------------------------------------------- */
.navbar-search-wrapper {
  flex: 1 1 0%;
  min-width: 0;
}
@media (min-width: 768px) {
  .navbar-search-wrapper {
    flex: 0 0 auto;
  }
}

/* ----------------------------------------------------------
   [H1] Language dropdown: ensure it appears above trigger (absolute)
   The <ul> already uses position:absolute via inline style.
   Ensure the parent has overflow:visible so dropdown is not clipped.
   ---------------------------------------------------------- */
.sidebar-container .hx-sticky {
  overflow: visible;
}

/* ----------------------------------------------------------
   [H2] Touch targets: minimum 44×44px for interactive controls on mobile
   (WCAG 2.5.5)
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .theme-toggle,
  .language-switcher {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==============================================================
   [P1] Color palette — CSS custom properties
   ============================================================== */
:root {
  --tm-primary: #0f172a;
  --tm-accent: #0ea5e9;
  --tm-accent-hover: #06b6d4;
  --tm-bg: #f8fafc;
  --tm-surface: #ffffff;
  --tm-border: #e2e8f0;
  --tm-text: #334155;
  --tm-text-secondary: #64748b;
  --tm-success: #22c55e;
  --tm-code-bg: #0f172a;
}
.dark {
  --tm-primary: #e2e8f0;
  --tm-accent: #4dd0e1;
  --tm-accent-hover: #26c6da;
  --tm-bg: #0f1520;
  --tm-surface: #162030;
  --tm-border: #1e3045;
  --tm-text: #e0e7ef;
  --tm-text-secondary: #8fa3b8;
  --tm-code-bg: #162030;
}
/* Dark logo — round corners to blend */
.dark img[src*="logo-dark"] {
  border-radius: 6px;
}

/* Override hextra default dark bg to match logo navy */
html[class~="dark"] body,
html[class~="dark"] .nav-container-blur,
html[class~="dark"] .sidebar-container .hx-sticky,
.dark\:hx-bg-dark:is(html[class~="dark"] *) {
  background-color: #0f1520 !important;
}
html[class~="dark"] .tm-tabs {
  background: #0f1520 !important;
  border-color: #1e3045 !important;
}

/* ==============================================================
   [P2] Typography — Inter for text, JetBrains Mono for code
   ============================================================== */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.content h1 { font-size: 2rem; font-weight: 700; color: var(--tm-primary); }
.content h2 { font-size: 1.5rem; font-weight: 700; color: var(--tm-primary); margin-top: 2.5rem; }
.content h3 { font-size: 1.25rem; font-weight: 600; color: var(--tm-primary); margin-top: 2rem; }
.content p, .content li {
  color: var(--tm-text);
  line-height: 1.7;
}
code, pre, .hextra-code-block {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ==============================================================
   [P3] Global transitions
   ============================================================== */
a, button, .hextra-card, details {
  transition: all 0.15s ease;
}

/* ==============================================================
   [P4] Navbar — sticky with backdrop blur and scroll shadow
   ============================================================== */
.nav-container {
  transition: box-shadow 0.3s ease;
}
.nav-container-blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.85) !important;
}
.dark .nav-container-blur,
.nav-container-blur:is(html[class~="dark"] *) {
  background-color: #131e46 !important;
}
.nav-container.scrolled {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.dark .nav-container.scrolled {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
nav input[type="search"],
nav .search-wrapper input {
  border-radius: 8px;
  background: var(--tm-bg);
  border: 1px solid var(--tm-border);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
nav input[type="search"]:focus,
nav .search-wrapper input:focus {
  border-color: var(--tm-accent);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* ==============================================================
   [P5] Sidebar — active item highlight, hover effects
   ============================================================== */
.sidebar-container a {
  transition: background-color 0.15s ease, color 0.15s ease;
  border-radius: 6px;
  padding: 4px 8px;
  margin: 1px 0;
}
.sidebar-container a:hover {
  background-color: var(--tm-bg);
  color: var(--tm-accent);
}
.dark .sidebar-container a:hover {
  background-color: rgba(14, 165, 233, 0.08);
}
.sidebar-active-item {
  border-left: 2px solid var(--tm-accent) !important;
  background: #eff6ff !important;
  color: var(--tm-accent) !important;
  border-radius: 0 6px 6px 0 !important;
  padding-left: 10px !important;
}
.dark .sidebar-active-item {
  background: rgba(14, 165, 233, 0.1) !important;
}
.sidebar-container ul {
  transition: max-height 0.25s ease, opacity 0.2s ease;
  overflow: hidden;
}

/* ==============================================================
   [P6] Code blocks — dark theme, window dots, copy button
   ============================================================== */
.hextra-code-block pre {
  background: var(--tm-code-bg) !important;
  border-radius: 0 0 10px 10px;
  padding: 1.2rem 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  border: 1px solid var(--tm-border);
  border-top: none;
}
.hextra-code-block pre code {
  color: #e2e8f0 !important;
}
.hextra-code-block pre code .line span { color: inherit; }
.hextra-code-block .filename {
  background: #1e293b;
  color: #94a3b8;
  border-radius: 10px 10px 0 0;
  border: 1px solid var(--tm-border);
  border-bottom: none;
  padding: 6px 16px 6px 42px;
  font-size: 0.8rem;
  font-family: 'JetBrains Mono', monospace;
  position: relative;
}
.hextra-code-block .filename::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 14px 0 0 #eab308, 28px 0 0 #22c55e;
}
.hextra-code-block:not(:has(.filename)) pre {
  border-radius: 10px;
  border-top: 1px solid var(--tm-border);
}
.hextra-code-copy-btn {
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
}
.hextra-code-copy-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
}
:not(pre) > code {
  background: var(--tm-bg);
  border: 1px solid var(--tm-border);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 0.875em;
  color: var(--tm-accent);
}
.dark :not(pre) > code {
  background: var(--tm-surface);
}

/* ==============================================================
   [P7] Dark mode — slate-based refinement
   ============================================================== */
.dark body {
  background-color: var(--tm-bg);
  color: var(--tm-text);
}
.dark .nav-container-blur {
  border-bottom: 1px solid var(--tm-border);
}
.dark .sidebar-container {
  border-color: var(--tm-border);
}
.dark article, .dark main {
  color: var(--tm-text);
}
.dark .content a {
  color: var(--tm-accent);
}
.dark .content a:hover {
  color: var(--tm-accent-hover);
}
.dark .hextra-card {
  background: var(--tm-surface);
  border-color: var(--tm-border);
}
.dark .hextra-card:hover {
  border-color: var(--tm-accent);
}
/* Fix raster brand icons (adspower, hidemium) in dark mode —
   wrap the SVG containing <image> with a white circle background */
.dark .hextra-card-icon svg:has(image),
.dark .hextra-cards svg:has(image) {
  background: #fff;
  border-radius: 6px;
  padding: 2px;
}
/* Fix table overflow */
article table {
  display: table;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
article table td,
article table th {
  word-break: break-word;
  white-space: normal;
}
article table td:first-child,
article table th:first-child {
  white-space: nowrap;
}

/* Fix code block syntax highlighting — remove pink/red backgrounds in dark mode */
.dark .chroma .s, .dark .chroma .s1, .dark .chroma .s2,
.dark .chroma .si, .dark .chroma .sa, .dark .chroma .sb,
.dark .chroma .sc, .dark .chroma .dl, .dark .chroma .se,
.dark .chroma .sh, .dark .chroma .sx, .dark .chroma .sr,
.dark .chroma .ss {
  background: transparent !important;
}
.dark .highlight pre,
.dark .chroma {
  background: #1e293b !important;
}
.dark .chroma code span {
  background: transparent !important;
}


/* Fix TOC scroll spy — account for navbar + tabs bar height */
article h2[id], article h3[id], article h4[id] {
  scroll-margin-top: calc(var(--navbar-height) + 50px) !important;
}
html {
  scroll-padding-top: calc(var(--navbar-height) + 50px) !important;
}

/* Fix code block title text being hidden behind macOS dots decoration */
.filename.not-prose {
  padding-left: 4.5rem !important;
}

/* Fix inline color:teal headings in dark mode */
.dark span[style*="color:teal"],
.dark span[style*="color: teal"] {
  color: #5eead4 !important;
}
.dark details {
  background: var(--tm-surface);
  border-color: var(--tm-border);
}
.dark table th {
  background: var(--tm-surface);
  border-color: var(--tm-border);
}
.dark table td {
  border-color: var(--tm-border);
}

/* ==============================================================
   [P8] Homepage — Bright Data style
   ============================================================== */
.tm-home {
  font-size: 1rem;
  line-height: 1.5;
  color: rgb(24, 26, 30);
}
.dark .tm-home {
  color: #e2e8f0;
}
.tm-home-title {
  margin-bottom: 2rem;
}
.tm-home-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #26c6da;
  margin: 0 0 0.5rem 0;
}
.dark .tm-home-label {
  color: #4dd0e1;
}
.tm-home-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.tm-home-h1 {
  font-size: 1.875rem;
  font-weight: 700;
  color: rgb(24, 26, 30);
  margin: 0;
  line-height: 1.2;
}
.dark .tm-home-h1 {
  color: #f1f5f9;
}
.tm-copy-page {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background: #fff;
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
}
.tm-copy-page:hover {
  border-color: #9ca3af;
}
.dark .tm-copy-page {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.15);
  color: #94a3b8;
}
.dark .tm-copy-page:hover {
  border-color: rgba(255, 255, 255, 0.3);
}
.tm-home-desc {
  font-size: 1rem;
  color: #475569;
  line-height: 1.7;
  margin: 0;
}
.dark .tm-home-desc {
  color: #94a3b8;
}

/* Body text paragraphs (between callout and "Who is this for") */
.tm-home-body {
  margin-bottom: 3rem;
}
.tm-home-body p {
  font-size: 1rem;
  color: #475569;
  line-height: 1.7;
  margin: 0 0 1rem 0;
}
.tm-home-body p:last-child {
  margin-bottom: 0;
}
.tm-home-body strong {
  color: rgb(24, 26, 30);
  font-weight: 600;
}
.dark .tm-home-body p {
  color: #94a3b8;
}
.dark .tm-home-body strong {
  color: #f1f5f9;
}

/* Callout boxes */
.tm-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 3rem;
  font-size: 0.875rem;
  line-height: 1.6;
}
.tm-callout a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tm-callout--info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}
.dark .tm-callout--info {
  background: rgba(38, 198, 218, 0.08);
  border-color: rgba(38, 198, 218, 0.25);
  color: #80deea;
}
.tm-callout--gray {
  background: #f8fafc;
  border: 1px solid rgba(12, 14, 17, 0.1);
  color: #475569;
}
.dark .tm-callout--gray {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}
.tm-callout-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.tm-callout-icon--info {
  color: #26c6da;
}
.dark .tm-callout-icon--info {
  color: #4dd0e1;
}
.tm-callout-icon--gray {
  color: #64748b;
}
.dark .tm-callout-icon--gray {
  color: #94a3b8;
}

/* Who is this for section */
.tm-home-section {
  margin-bottom: 3rem;
}
.tm-home-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
  margin: 0 0 1rem 0;
  line-height: 1.35;
}
.dark .tm-home-section h2 {
  color: #f1f5f9;
}
.tm-home-section > p {
  font-size: 1rem;
  color: #475569;
  margin: 0 0 0.75rem 0;
}
.dark .tm-home-section > p {
  color: #94a3b8;
}
.tm-home-list {
  margin: 0;
  padding-left: 1.5rem;
  color: #374151;
  font-size: 1rem;
  line-height: 2;
}
.tm-home-list li::marker {
  color: #1e293b;
}
.dark .tm-home-list {
  color: #cbd5e1;
}
.dark .tm-home-list li::marker {
  color: #94a3b8;
}

/* Card grid — Style D: top color bar */
.tm-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 3rem;
}
@media (max-width: 640px) {
  .tm-card-grid {
    grid-template-columns: 1fr;
  }
}
.tm-card {
  --card-accent: #26c6da;
  display: block;
  border: 1px solid rgba(12, 14, 17, 0.1);
  border-radius: 0.75rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.tm-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-color: rgba(12, 14, 17, 0.18);
}
.dark .tm-card {
  border-color: rgba(255, 255, 255, 0.1);
}
.dark .tm-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}
.tm-card-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 60%, white));
}
.dark .tm-card-bar {
  background: linear-gradient(90deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 60%, black));
}
.tm-card-body {
  padding: 1.25rem;
}
.tm-card-title {
  font-weight: 700;
  font-size: 1rem;
  color: rgb(24, 26, 30);
  margin-bottom: 0.5rem;
}
.dark .tm-card-title {
  color: #f1f5f9;
}
.tm-card-desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.6;
}
.dark .tm-card-desc {
  color: #94a3b8;
}
.tm-card-link {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--card-accent);
}

/* ----------------------------------------------------------
   [P8b] FAQ accordion — ultra minimal (divider only)
   ---------------------------------------------------------- */
details.hx-group {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
  border-bottom: 1px solid #e5e7eb;
}
html.dark details.hx-group,
.dark details.hx-group,
details.hx-group.dark\:hx-bg-neutral-800 {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
details.hx-group summary {
  padding: 1rem 0 !important;
  font-weight: 500;
}
details.hx-group > .hx-p-2,
details.hx-group > div {
  padding: 0 0 1rem 0 !important;
}

/* ==============================================================
   [P9] Reading progress bar
   ============================================================== */
.tm-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tm-accent), var(--tm-accent-hover));
  z-index: 100;
  width: 0;
  transition: width 0.1s linear;
}
@media (max-width: 767px) {
  .tm-progress { display: none; }
}

/* ==============================================================
   [P10] TOC scroll highlight
   ============================================================== */
nav[aria-label="table of contents"] a {
  transition: all 0.15s ease;
  border-left: 2px solid transparent;
  padding-left: 8px;
}
nav[aria-label="table of contents"] a.tm-toc-active {
  color: var(--tm-accent) !important;
  border-left: 3px solid var(--tm-accent) !important;
  background: rgba(14, 165, 233, 0.06);
  border-radius: 0 4px 4px 0;
  font-weight: 500;
  padding-left: 8px;
}

/* ==============================================================
   [P11] Image lightbox
   ============================================================== */
.content img {
  cursor: zoom-in;
  border-radius: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.content img:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.tm-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.tm-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}
.tm-lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.tm-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.tm-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ==============================================================
   [P12] Content fade-in animation
   ============================================================== */
.tm-fade-in {
  animation: tmFadeIn 0.2s ease-out;
}
@keyframes tmFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.hextra-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
details[open] summary ~ * {
  animation: tmFadeIn 0.2s ease-out;
}

/* ==============================================================
   [P13] Mobile polish
   ============================================================== */
@media (max-width: 767px) {
  .sidebar-container {
    transition: transform 0.25s ease;
  }
  .hextra-code-block pre {
    -webkit-overflow-scrolling: touch;
  }
  .hextra-code-block pre::-webkit-scrollbar {
    height: 6px;
  }
  .hextra-code-block pre::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
  }
  .hextra-code-block pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
  }
  .hextra-cards {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .content h1 { font-size: 1.5rem; }
  .content h2 { font-size: 1.25rem; margin-top: 2rem; }
  .content h3 { font-size: 1.1rem; margin-top: 1.5rem; }
}

/* ==============================================================
   [P15] Sidebar — align all items to the left consistently
   ============================================================== */
.sidebar-container li > a.hx-justify-between {
  justify-content: flex-start !important;
  gap: 0 !important;
}
.sidebar-container li > a.hx-justify-between > span:last-child:not(:first-child) {
  margin-left: auto;
}