:root {
  --bg: #0f1115;
  --text: #e6e6e6;
  --text-secondary: #c7ced8;
  --sidebar: #1b1d23;
  --main: #14161c;
  --panel: #1b1d23;
  --border: #2a2d35;
  --border-color: #2a2d35;
  --card-bg: #171a20;
  --accent: #3b82f6;
  --accent-color: #60a5fa;
  --hover: #2f3440;
  --hover-bg: rgba(96, 165, 250, 0.10);
  --code-bg: #0f1115;
  --modal-bg: #0f1115;

  /* Syntax Highlighting */
  --syn-key: #61afef;
  --syn-string: #e06c75;
  --syn-number: #d19a66;
  --syn-boolean: #98c379;
  --syn-null: #c678dd;
}

[data-theme="light"] {
  --bg: #eef2f7;
  --text: #0f172a;
  --text-secondary: #475569;
  --sidebar: #ffffff;
  --main: #f6f8fc;
  --panel: #ffffff;
  --border: #d6dbe3;
  --border-color: #dfe5ee;
  --card-bg: #ffffff;
  --accent: #2563eb;
  --accent-color: #2563eb;
  --hover: #dbeafe;
  --hover-bg: #f3f6fb;
  --code-bg: #f1f5f9;
  --modal-bg: #ffffff;

  /* Light Syntax Highlighting */
  --syn-key: #0250c5;
  --syn-string: #b31424;
  --syn-number: #9a4800;
  --syn-boolean: #1c7a26;
  --syn-null: #761ca7;
}


/* =========================================================
   GLOBAL
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
    Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);

  /*
   * The application itself stays inside the viewport.
   * Individual content areas control their own scrolling.
   */
  overflow: hidden;
}


/* =========================================================
   HEADER / TOP NAV
   ========================================================= */

.top-nav {
  background: var(--sidebar);
  border-bottom: 1px solid var(--border);
  padding: 10px 20px;
  flex-shrink: 0;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-weight: 700;
  font-size: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo-img {
  height: 40px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 4px;
}

.nav-links a.active {
  color: var(--accent);
  font-weight: 600;
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   MAIN CONTAINER LAYOUT
   ========================================================= */

.container {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

#faq-view {
  display: none !important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
  width: 320px;
  background: var(--sidebar);
  padding: 20px;

  /*
   * Sidebar is an intentional independent scroll area.
   */
  overflow-y: auto;
  overflow-x: hidden;

  border-right: 1px solid var(--border);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.sidebar h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #8b949e;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.search-input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
}

.search-input::placeholder {
  color: #94a3b8;
}

#menu,
.simple-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.simple-menu {
  margin-top: 8px;
}

.simple-menu li {
  margin-top: 10px;
}

.simple-menu a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 10px;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--text);
  text-decoration: none;
}

.simple-menu a:hover,
.simple-menu a.active {
  background: var(--hover);
  border-left-color: var(--accent);
  color: var(--accent);
}

.collection {
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  padding: 10px 12px;
  margin-top: 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--text);
}

.collection::before {
  content: "▸";
  width: 10px;
  height: 10px;
  font-size: 14px;
  line-height: 12px;
  margin-right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  top: 0;
  transition: transform 0.15s;
  box-sizing: border-box;
  transform: scale(2);
}

.collection.open::before {
  transform: rotate(90deg) scale(2);
  transform-origin: center;
}

.standalone-page::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #000000;
  border-radius: 50%;
  margin-right: 6px;
  background: #000000;
  box-sizing: border-box;
  position: relative;
  top: 0;
  flex-shrink: 0;
  transform: scale(1);
}

body[data-theme="dark"] .standalone-page::before {
  border-color: #ffffff;
  background: #ffffff;
}

body[data-theme="dark"] .standalone-page.active::before {
  background: #ffffff;
}

.standalone-page.active::before {
  background: #000000;
}

.collection:hover,
.collection.active,
.standalone-page:hover,
.standalone-page.active {
  background: var(--hover);
  border-left-color: var(--accent);
  color: var(--accent);
}

.collection.active::before,
.standalone-page.active::before {
  color: var(--accent);
}

.collection:hover::before,
.collection.active:hover::before {
  color: var(--text);
}

.collection + div {
  margin-top: 10px;
  padding-left: 10px;
}

.endpoint,
.sidebar-page-link {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 8px;
  margin-left: 6px;
  border-radius: 8px;
  transition:
    background 0.15s,
    border-color 0.15s;
  border-left: 3px solid transparent;
  background: transparent;
}

.endpoint:hover,
.sidebar-page-link:hover {
  background: rgba(59, 130, 246, 0.08);
  border-left-color: var(--accent);
}

.endpoint.active {
  background: rgba(59, 130, 246, 0.16);
  border-left-color: var(--accent);
}

.menu-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.menu-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  font-size: 15px;
}


/* =========================================================
   MAIN WORKSPACE
   ========================================================= */

.main {
  flex: 1;
  min-width: 0;
  min-height: 0;

  padding: 20px;

  background: var(--main);

  /*
   * THIS is the primary page scrolling area.
   */
  overflow-y: auto;
  overflow-x: hidden;
}

#home-view,
#webhooks-view,
#faq-view {
  width: 100%;
  max-width: 1600px;
  margin: 20px auto;
  line-height: 1.6;

  /*
   * Do not create another vertical scrolling area.
   */
  overflow: visible;

  height: auto;

  box-sizing: border-box;
  padding-right: 20px;
}

.faq-box {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto 20px;
}

#endpoint-view {
  width: 100%;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
}

#home-view h2 {
  font-size: 24px;
  margin-bottom: 15px;
}

#home-view h3 {
  font-size: 16px;
  margin-top: 25px;
  margin-bottom: 10px;
  color: var(--accent);
}

#home-view ul,
#home-view ol {
  padding-left: 20px;
  margin-bottom: 15px;
}

#home-view ul ul,
#home-view ol ul,
#home-view ul ol,
#home-view ol ol {
  padding-left: 36px;
}

#home-view li {
  margin-bottom: 6px;
}


/* =========================================================
   WORKFLOW DIAGRAM
   ========================================================= */

.workflow-diagram {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}

.workflow-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  padding: 18px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(59, 130, 246, 0.08);
  text-align: center;
}

.workflow-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 10px;
}

.workflow-title {
  font-size: 14px;
  line-height: 1.4;
  max-width: 150px;
}

.workflow-arrow {
  font-size: 22px;
  color: var(--accent);
}


/* =========================================================
   REQUEST FLOW
   ========================================================= */

.request-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  margin-top: 4px;
}

.request-flow .flow-step {
  width: 100%;
  max-width: 820px;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  color: var(--text);
}

.request-flow .flow-arrow {
  flex: 0 0 auto;
  text-align: center;
  font-size: 34px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}


/* =========================================================
   SPLIT COLUMN INTERFACE
   ========================================================= */

.split-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;

  /*
   * Let .main be responsible for page scrolling.
   */
  height: auto;
  min-height: 0;

  min-width: 0;
}

.layout-column {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 0;

  /*
   * IMPORTANT:
   * Do not create another vertical page scrollbar here.
   */
  overflow: visible;

  scrollbar-width: none;
}

.layout-column::-webkit-scrollbar {
  display: none;
}

.left-column {
  flex: 1.1;
  min-width: 0;
}

.right-column {
  flex: 0.9;
  padding-top: 70px;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.right-column .section-box {
  margin-bottom: 55px;
}


/* =========================================================
   COMPONENT WORKSPACE BOXES
   ========================================================= */

.section-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;

  min-width: 0;
}

.left-column .section-box {
  margin-bottom: 20px;
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  color: #8b949e;
  margin-bottom: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#description-body {
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 14px;
}

.meta-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.meta-panel-header .section-label {
  margin-bottom: 0;
}


/* =========================================================
   INLINE HEADER ENDPOINT ROW
   ========================================================= */

.endpoint-inline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.endpoint-inline-row .value.code {
  margin: 0;
  flex: 1;
}


/* =========================================================
   INTERACTIVE FIELD CONTENT
   ========================================================= */

.field {
  margin-bottom: 14px;
}

.field:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 11px;
  color: #8b949e;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 600;
}

.value {
  font-size: 14px;
  line-height: 1.5;
}

.value.code {
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 13px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  padding: 8px 10px;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-all;
}

.value.note-value {
  font-size: 13px;
  background: rgba(59, 130, 246, 0.05);
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  margin-top: 6px;
}


/* =========================================================
   RAW CODE BLOCKS
   ========================================================= */

.code-stack-box {
  display: flex;
  flex-direction: column;
}

.webhook-example-block {
  margin-top: 14px;
}

.webhook-example-title {
  font-size: 11px;
  font-weight: 700;
  color: #8b949e;
  margin-bottom: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.webhook-example-code {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 8px;
}

.webhook-example-description {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
}

.section-box ul li.no-bullet {
  list-style: none;
  padding-left: 0;
}

.section-box ul li.no-bullet > ul {
  padding-left: 18px;
  margin: 6px 0 0 0;
}

.section-box ul li.no-bullet > ul > li {
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
}


/* =========================================================
   API CODE BOXES
   ========================================================= */

.api-code {
  background: var(--code-bg);
  padding: 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  height: 443px;
  max-height: 450px;
  overflow-y: auto;
  overflow-x: auto;
}

pre {
  margin: 0;
  background: var(--code-bg);
  color: var(--text);
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 13px;
  white-space: pre;
}

.api-code pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}


/* =========================================================
   SYNTAX COLORS
   ========================================================= */

.key {
  color: var(--syn-key);
}

.string {
  color: var(--syn-string);
}

.number {
  color: var(--syn-number);
}

.boolean {
  color: var(--syn-boolean);
}

.null {
  color: var(--syn-null);
}


/* =========================================================
   HTTP METHOD PILLS
   ========================================================= */

.method-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  min-width: 45px;
  text-align: center;
  display: inline-block;
}

.GET {
  color: #61afef;
  background: rgba(97, 175, 239, 0.15);
}

.POST {
  color: #f5a623;
  background: rgba(245, 166, 35, 0.15);
}

.PUT {
  color: #c678dd;
  background: rgba(198, 120, 221, 0.15);
}

.DELETE {
  color: #e06c75;
  background: rgba(224, 108, 117, 0.15);
}


/* =========================================================
   BUTTON ACTION TRIGGERS
   ========================================================= */

.code-actions {
  display: flex;
  gap: 6px;
}

.copy-btn,
.view-btn {
  font-size: 12px;
  padding: 4px 8px;
  background: #22252c;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-theme="light"] .copy-btn,
[data-theme="light"] .view-btn {
  background: #ffffff;
  color: #0f172a;
}

.copy-btn:hover,
.view-btn:hover {
  background: var(--hover);
  border-color: var(--accent);
}


/* =========================================================
   HTTP STATUS BADGES
   ========================================================= */

.response-status-row {
  margin-bottom: 12px;
}

.status-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.status {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.status.static-status {
  cursor: default;
}

.status:not(.static-status) {
  cursor: default;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}

.status:not(.static-status):hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.status.success {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.status.error {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}


/* =========================================================
   DOCUMENTATION TABLES
   =========================================================

   NORMAL REQUEST / RESPONSE TABLES

   The HTML places #field-docs-request and #field-docs-response
   on the same element that contains the generated table.

   That element is the ONLY scrolling container for the normal
   documentation tables.

   Structure:

       #field-docs-request / #field-docs-response
           └── .field-doc-section
               ├── .field-doc-title
               └── .field-table
                   ├── thead
                   └── tbody

   The title and column headings remain visible while the rows
   scroll underneath them.

   View Full Screen has a different scrolling model and is kept
   separate in the final scrolling section below.
   ========================================================= */


/* ---------------------------------------------------------
   Normal table scrolling container
   --------------------------------------------------------- */

#endpoint-view .table-scroll-container {
  width: 100%;
  margin-top: 4px;
  min-width: 0;
  min-height: 280px;
  max-height: 310px;
  position: relative;

  overflow-x: auto;
  overflow-y: auto;

  isolation: isolate;
  scrollbar-gutter: stable;
}


/* ---------------------------------------------------------
   Documentation section
   --------------------------------------------------------- */

#endpoint-view .field-doc-section {
  position: relative;
  min-width: 0;
  margin-bottom: 18px;
  overflow: visible;
}


/* ---------------------------------------------------------
   Request / Response title
   --------------------------------------------------------- */

#endpoint-view .field-doc-title {
  font-size: 13px;
  font-weight: 700;
  color: #8b949e;

  margin: 0;
  padding: 10px 0 8px;

  text-transform: uppercase;
  letter-spacing: 0.04em;

  position: sticky;
  top: 0;
  z-index: 30;

  background: var(--panel);
  background-clip: padding-box;
}


/* ---------------------------------------------------------
   Field table
   --------------------------------------------------------- */

#endpoint-view .field-table {
  width: 100%;
  min-width: 650px;

  font-size: 13px;
  text-align: left;
  table-layout: fixed;

  border-collapse: separate;
  border-spacing: 0;

  /* The outer #field-docs-* element does the scrolling. */
  overflow: visible;
}


/* ---------------------------------------------------------
   Column headings
   ---------------------------------------------------------

   The heading is the second fixed layer.

   The Request/Response title occupies the first 35px, so the
   column headings stick immediately underneath it.
   --------------------------------------------------------- */

#endpoint-view .field-table thead th {
  position: sticky;
  top: 35px;
  z-index: 20;

  background: var(--panel);
  background-clip: padding-box;

  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  border-left: 0;

  padding: 10px;

  font-weight: 700;
  color: var(--text);

  text-transform: uppercase;
  letter-spacing: 0.04em;

  box-shadow:
    0 1px 0 var(--border),
    0 2px 3px rgba(0, 0, 0, 0.08);
}

#endpoint-view .field-table thead th:first-child {
  border-left: 1px solid var(--border);
}

[data-theme="light"] #endpoint-view .field-table thead th {
  background: #ffffff;
  color: #0f172a;
}

[data-theme="dark"] #endpoint-view .field-table thead th {
  background: #1e293b;
  color: #e6e6e6;
}


/* ---------------------------------------------------------
   Column widths
   --------------------------------------------------------- */

#endpoint-view .field-table th:nth-child(1),
#endpoint-view .field-table td:nth-child(1) {
  width: 28%;
}

#endpoint-view .field-table th:nth-child(2),
#endpoint-view .field-table td:nth-child(2),
#endpoint-view .field-table th:nth-child(3),
#endpoint-view .field-table td:nth-child(3) {
  width: 12%;
  white-space: nowrap;
}

#endpoint-view .field-table th:nth-child(4),
#endpoint-view .field-table td:nth-child(4) {
  width: 48%;
}


/* ---------------------------------------------------------
   Table body
   --------------------------------------------------------- */

#endpoint-view .field-table tbody td {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left: 0;

  padding: 10px;
  vertical-align: top;
  line-height: 1.4;

  background: var(--panel);
}

#endpoint-view .field-table tbody td:first-child {
  border-left: 1px solid var(--border);
}

#endpoint-view .field-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] #endpoint-view .field-table tbody tr:nth-child(even) td {
  background: rgba(15, 23, 42, 0.03);
}


/* ---------------------------------------------------------
   Prevent nested scrolling
   --------------------------------------------------------- */

#endpoint-view .field-table,
#endpoint-view .field-table tbody,
#endpoint-view .field-table tr {
  overflow: visible;
  max-height: none;
}


/* =========================================================
   TWO-COLUMN FIELD TABLES
   ========================================================= */

.two-column-field-table {
  table-layout: fixed;
}

.two-column-field-table th:nth-child(1),
.two-column-field-table td:nth-child(1),
.two-column-field-table th:nth-child(2),
.two-column-field-table td:nth-child(2) {
  width: 50%;
}


/* =========================================================
   MODAL FIELD DOCUMENTATION
   ========================================================= */

.modal #modal-code .field-doc-title {
  position: sticky;

  top: 0;

  z-index: 50;

  background: var(--modal-bg);

  padding: 8px 0;

  height: auto;

  box-sizing: border-box;
}

.modal #modal-code table {
  width: 100%;

  border-collapse: separate;
  border-spacing: 0;
}

.modal #modal-code table th {
  position: sticky;

  top: 0;

  z-index: 40;

  background: var(--modal-bg);
}


/* =========================================================


/* =========================================================
   LOGO LIGHT / DARK
   ========================================================= */

[data-theme="light"] .logo-light {
  display: inline-block;
}

[data-theme="light"] .logo-dark {
  display: none;
}

body:not([data-theme="light"]) .logo-light {
  display: none;
}

body:not([data-theme="light"]) .logo-dark {
  display: inline-block;
}


/* =========================================================
   MODAL WORKSPACE
   ========================================================= */

.modal {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background: rgba(0, 0, 0, 0.7);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 100;
}

.modal.hidden {
  display: none;
}

#modal-code {
  width: 100%;
  height: auto;
  min-height: 0;
}

.modal-content {
  width: 85%;
  height: 85%;

  background: var(--modal-bg);

  border: 1px solid var(--border);
  border-radius: 8px;

  padding: 10px;

  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.5);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  position: relative;
}


/* ---------------------------------------------------------
   Modal content layout
   ---------------------------------------------------------

   View Full Screen gets its scrolling rules in the final
   scrolling section. Keeping the base layout here avoids
   mixing the modal's layout with its scrolling behaviour.
   --------------------------------------------------------- */

#modal-code {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 15px;
  position: relative;
}

#modal-code .field-table {
  min-width: 650px;
}


/* =========================================================
   MODAL WORKSPACE
   ========================================================= */

.modal {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background: rgba(0, 0, 0, 0.7);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 100;
}

.modal.hidden {
  display: none;
}

#modal-code {
  width: 100%;
  height: auto;
  min-height: 0;
}

.modal-content {
  width: 85%;
  height: 85%;

  background: var(--modal-bg);

  border: 1px solid var(--border);
  border-radius: 8px;

  padding: 10px;

  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.5);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  position: relative;
}


/* ---------------------------------------------------------
   Modal scrolling
   --------------------------------------------------------- */

#modal-code {
  flex: 1 1 auto;

  min-height: 0;

  /*
   * Modal content has ONE scrolling area.
   */
  overflow-y: auto;
  overflow-x: auto;

  margin-top: 15px;

  position: relative;
}


/*
 * Do not create nested scrolling inside modal tables.
 */
#modal-code .table-scroll-container {
  max-height: none;
  min-height: 0;

  overflow: visible;

  margin-top: 0;
}


/*
 * Keep modal tables wide enough to remain readable.
 */
#modal-code .field-table {
  min-width: 650px;
}


/*
 * Modal table header.
 */
#modal-code th {
  background: var(--sidebar);

  position: sticky;

  top: 0;

  z-index: 40;
}


/* =========================================================


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.close-btn {
  position: absolute;

  top: 10px;
  right: 12px;

  background: transparent;

  border: none;

  color: var(--text);

  font-size: 18px;

  cursor: pointer;

  padding: 4px;

  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: var(--accent);
}


/* =========================================================
   PORTAL FOOTER
   ========================================================= */

.footer {
  flex-shrink: 0;

  border-top: 1px solid var(--border);

  background: var(--sidebar);

  padding: 15px 20px;

  font-size: 13px;
}

.footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-left,
.footer-right {
  color: #8b949e;
}

.footer-center a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.footer-center a:hover {
  text-decoration: underline;
}


/* =========================================================
   ADAPTIVE VIEWPORTS
   ========================================================= */

@media (max-width: 1024px) {
  .split-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .right-column {
    padding-top: 0;

    overflow: visible;
  }

  .right-column .section-box {
    margin-bottom: 20px;
  }
}

@media (max-width: 900px) {
  .request-flow {
    gap: 10px;
    padding: 12px;
  }

  .request-flow .flow-arrow {
    font-size: 28px;
  }
}

@media (max-width: 850px) {
  .workflow-diagram {
    gap: 12px;
  }

  .workflow-card {
    min-width: 140px;
  }

  .workflow-arrow {
    display: none;
  }
}


/* =========================================================
   FAQ
   ========================================================= */

.faq-intro h2 {
  margin-top: 8px;
  margin-bottom: 12px;
}

.faq-toc-box {
  margin-top: 20px;
}

.faq-toc-intro {
  margin-bottom: 20px;
  color: var(--text-secondary, #666);
}

.faq-toc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-toc-section {
  border: 1px solid var(--border-color, #e2e2e2);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-bg, #fff);
}

.faq-toc-heading {
  width: 100%;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: 42px 1fr 24px;
  align-items: center;
  text-align: left;
  padding: 14px 16px;
  cursor: pointer;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
}

.faq-toc-heading:hover {
  background: var(--hover-bg, #f7f8fa);
}

.faq-toc-section.open .faq-toc-heading {
  background: rgba(59, 130, 246, 0.02);
}

.faq-toc-number {
  color: var(--accent-color, #2563eb);
  font-size: 12px;
  font-weight: 700;
}

.faq-toc-chevron {
  font-size: 22px;
  color: var(--text-secondary, #777);
  transition: transform 0.2s ease;
}

.faq-toc-section.open .faq-toc-chevron {
  transform: rotate(90deg);
}

.faq-toc-questions {
  display: none;
  padding: 0 16px 14px 58px;
  border-top: 1px solid var(--border-color, #e8e8e8);
}

.faq-toc-section.open .faq-toc-questions {
  display: flex;
  flex-direction: column;
}

.faq-toc-questions button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 0;
  color: var(--text-secondary, #555);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.45;
}

.faq-toc-questions button:hover {
  color: var(--accent-color, #2563eb);
}


/* =========================================================
   FAQ CATEGORIES
   ========================================================= */

.faq-category {
  margin-top: 40px;
  scroll-margin-top: 90px;
}

.faq-category-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.faq-category-number {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 9px;

  background: var(--accent-color, #2563eb);

  color: #fff;

  font-size: 12px;
  font-weight: 700;
}

.faq-category-header h2 {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 600;
}


/* =========================================================
   FAQ ACCORDION
   ========================================================= */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--border-color, #e2e2e2);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-bg, #fff);
  scroll-margin-top: 90px;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.faq-item:hover {
  border-color: var(--accent-color, #2563eb);
  background: var(--hover-bg, #f8f9fb);
}

.faq-item.active {
  border-color: var(--accent-color, #2563eb);
  background: rgba(96, 165, 250, 0.05);
  box-shadow: 0 3px 14px rgba(37, 99, 235, 0.08);
}

.faq-question {
  width: 100%;
  border: 0;
  background: transparent;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 17px 18px;

  text-align: left;

  color: inherit;

  cursor: pointer;

  font-size: 14px;
  font-weight: 500;

  line-height: 1.45;
}

.faq-question:hover {
  background: var(--hover-bg, #f8f9fb);
}

.faq-toggle {
  width: 24px;
  height: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  background: transparent;

  border: 1px solid var(--border-color, #dfe5ee);

  color: var(--text);

  font-size: 18px;
  font-weight: 400;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

body[data-theme="dark"] .faq-toggle {
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.faq-item.active .faq-toggle {
  transform: rotate(45deg);
}

.faq-answer {
  display: none;

  padding: 0 18px 20px;

  color: var(--text-secondary, #555);

  font-size: 14px;

  line-height: 1.65;
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-answer p {
  margin: 0 0 14px;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer ul,
.faq-answer ol {
  margin: 8px 0 16px;
  padding-left: 24px;
}

.faq-answer li {
  margin-bottom: 6px;
}


/* =========================================================
   FAQ TABLES
   ========================================================= */

.faq-comparison-table,
.faq-status-table {
  margin-top: 14px;
}

.faq-comparison-table th,
.faq-status-table th {
  white-space: nowrap;
}

.faq-comparison-table td,
.faq-status-table td {
  vertical-align: top;
}


/* =========================================================
   FAQ HIGHLIGHT / CALLOUT
   ========================================================= */

.faq-highlight {
  margin: 18px 0 10px;
  color: var(--text-primary, #222);
}

.faq-callout {
  margin: 16px 0;

  padding: 14px 16px;

  border-left: 4px solid var(--accent-color, #2563eb);

  border-radius: 6px;

  background: rgba(96, 165, 250, 0.08);
}

.faq-callout strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text-primary, #222);
}

.faq-callout p {
  margin-bottom: 0;
}


/* =========================================================
   FAQ WARNING
   ========================================================= */

.faq-warning {
  margin: 16px 0;

  padding: 14px 16px;

  border-left: 4px solid #e0a800;

  border-radius: 6px;

  background: rgba(224, 168, 0, 0.08);
}

.faq-warning strong {
  display: block;
  margin-bottom: 5px;
  color: #9a7100;
}

.faq-warning p {
  margin-bottom: 0;
}


/* =========================================================
   FAQ CODE
   ========================================================= */

.faq-code {
  margin: 14px 0;

  padding: 14px 16px;

  overflow-x: auto;

  border-radius: 7px;

  background: #111827;

  color: #e5e7eb;

  font-family: monospace;

  font-size: 13px;

  line-height: 1.6;

  white-space: pre-wrap;
}

.faq-status-code {
  display: inline-block;

  margin: 8px 0 16px;

  padding: 8px 12px;

  border-radius: 6px;

  background: rgba(34, 197, 94, 0.1);

  color: #15803d;

  font-family: monospace;

  font-weight: 700;
}


/* =========================================================
   FAQ STATUS BADGES
   ========================================================= */

.status-badge {
  display: inline-block;

  padding: 3px 8px;

  border-radius: 5px;

  font-size: 12px;

  font-weight: 700;
}

.status-badge.success {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.status-badge.warning {
  background: rgba(234, 179, 8, 0.15);
  color: #a16207;
}

.status-badge.error {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}


/* =========================================================
   FAQ CHECKLISTS
   ========================================================= */

.faq-check-list {
  list-style: none;
  padding-left: 0 !important;
}

.faq-check-list li {
  position: relative;
  padding-left: 28px;
}

.faq-check-list li::before {
  content: "✓";

  position: absolute;

  left: 0;
  top: 0;

  color: #16a34a;

  font-weight: 700;
}

.faq-numbered-checklist li {
  padding-left: 4px;
}


/* =========================================================
   FAQ SUPPORT
   ========================================================= */

.faq-support-card {
  display: flex;
  align-items: center;

  gap: 12px;

  margin: 18px 0;

  padding: 15px 16px;

  border: 1px solid var(--border-color, #e2e2e2);

  border-radius: 8px;

  background: var(--hover-bg, #f8f9fb);
}

.faq-support-icon {
  font-size: 22px;
}

.faq-support-card strong {
  display: block;
  margin-bottom: 3px;
}

.faq-support-card a {
  color: var(--accent-color, #2563eb);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
  .faq-toc-heading {
    grid-template-columns: 36px 1fr 20px;
    padding: 13px;
  }

  .faq-toc-questions {
    padding-left: 49px;
  }

  .faq-category {
    margin-top: 30px;
  }

  .faq-category-header h2 {
    font-size: 19px;
  }

  .faq-question {
    padding: 15px;
    font-size: 13px;
  }

  .faq-answer {
    padding: 0 15px 18px;
    font-size: 13px;
  }

  .faq-comparison-table,
  .faq-status-table {
    display: block;
    overflow-x: auto;
  }

  /*
   * Keep documentation tables usable on smaller screens.
   */
  .table-scroll-container {
    max-width: 100%;
  }

  .field-table {
    min-width: 650px;
  }

  .field-doc-title {
    font-size: 12px;
  }
}




/* =========================================================
   SCROLLING BEHAVIOUR
   =========================================================

   There are two intentionally different scrolling systems:

   1. NORMAL REQUEST / RESPONSE TABLES
      #field-docs-request and #field-docs-response scroll.
      Their title and column headings stay visible.

  2. VIEW FULL SCREEN
    The modal keeps its heading and column headings visible while
    only the table body scrolls.

   These rules are deliberately scoped so the two systems cannot
   interfere with one another.
   ========================================================= */


/* ---------------------------------------------------------
   Main page scrolling
   --------------------------------------------------------- */

.main {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.layout-column {
  overflow: visible;
}

#home-view,
#webhooks-view,
#faq-view {
  overflow: visible;
  height: auto;
}

#endpoint-view {
  height: auto;
  min-height: 0;
}

.left-column,
.right-column {
  min-height: 0;
}

.left-column .field-doc-section,
.right-column .field-doc-section {
  min-height: 0;
}


/* =========================================================
   SAMPLE REQUEST / RESPONSE BODY
   =========================================================

   Request and response sample bodies are code blocks. Long JSON
   strings, URLs and other unbroken values must wrap within the
   available panel width instead of forcing horizontal overflow.

   Preserve line breaks while allowing long words/tokens to break.
   ========================================================= */

#endpoint-view .api-code pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

#endpoint-view .api-code {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* =========================================================
   VIEW FULL SCREEN — SAMPLE REQUEST / RESPONSE BODY
   =========================================================

   The modal is outside #endpoint-view, so the normal sample-body
   wrapping rules do not apply here. Keep line breaks but allow
   long JSON strings, URLs and other unbroken tokens to wrap
   inside the dialog without changing the table layout.
   ========================================================= */

#code-modal #modal-code .api-code {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

#code-modal #modal-code .api-code pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

/* =========================================================
   VIEW FULL SCREEN — REQUEST / RESPONSE TITLE
   =========================================================

   The normal page has its own .field-doc-title styling scoped
   to #endpoint-view. The View Full Screen modal is outside
   that scope, so the title needs its own modal-specific rule.
   ========================================================= */

#code-modal #modal-code .field-doc-title {
  display: block;
  width: 100%;
  box-sizing: border-box;

  margin: 0;
  padding: 12px 0 8px;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;

  color: var(--text);
  background: var(--panel);

  text-transform: uppercase;
  letter-spacing: 0.04em;

  position: relative;
  z-index: 20;
}

[data-theme="light"] #code-modal #modal-code .field-doc-title {
  color: #0f172a;
  background: #ffffff;
}

[data-theme="dark"] #code-modal #modal-code .field-doc-title {
  color: #e6e6e6;
  background: #1e293b;
}

/* =========================================================
   VIEW FULL SCREEN — TABLE FORMATTING
   =========================================================

   The normal Request/Response tables are scoped to
   #endpoint-view. View Full Screen therefore needs its own
   table styling.

   These rules control appearance only:
   borders, spacing, typography, column widths and row
   backgrounds.

   The scrolling behaviour remains in the View Full Screen
   section below.
   ========================================================= */

#code-modal #modal-code .field-table {
  width: 100%;
  min-width: 650px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  text-align: left;
  table-layout: fixed;
}

#code-modal #modal-code .field-table thead th {
  background: var(--modal-bg);
  border: 1px solid var(--border);
  padding: 10px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.08);
  border-bottom: 2px solid rgba(15, 23, 42, 0.12);
}

#code-modal #modal-code .field-table th:nth-child(1),
#code-modal #modal-code .field-table td:nth-child(1) {
  width: 28%;
}

#code-modal #modal-code .field-table th:nth-child(2),
#code-modal #modal-code .field-table td:nth-child(2),
#code-modal #modal-code .field-table th:nth-child(3),
#code-modal #modal-code .field-table td:nth-child(3) {
  width: 12%;
  white-space: nowrap;
}

#code-modal #modal-code .field-table th:nth-child(4),
#code-modal #modal-code .field-table td:nth-child(4) {
  width: 48%;
}

#code-modal #modal-code .field-table tbody td {
  border: 1px solid var(--border);
  padding: 10px;
  vertical-align: top;
  line-height: 1.4;
  background: var(--panel);
}

#code-modal #modal-code .field-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] #code-modal #modal-code .field-table thead th {
  background: #ffffff;
  color: #0f172a;
  border-bottom: 2px solid rgba(15, 23, 42, 0.12);
}

[data-theme="dark"] #code-modal #modal-code .field-table thead th {
  background: #1e293b;
  color: #e6e6e6;
  border-bottom: 2px solid rgba(226, 232, 240, 0.08);
}

[data-theme="light"] #code-modal #modal-code .field-table tbody tr:nth-child(even) td {
  background: rgba(15, 23, 42, 0.03);
}

#code-modal #modal-code .two-column-field-table {
  table-layout: fixed;
}

#code-modal #modal-code .two-column-field-table th:nth-child(1),
#code-modal #modal-code .two-column-field-table td:nth-child(1),
#code-modal #modal-code .two-column-field-table th:nth-child(2),
#code-modal #modal-code .two-column-field-table td:nth-child(2) {
  width: 50%;
}


/* =========================================================
   VIEW FULL SCREEN / MODAL — RESTORED ORIGINAL SCROLL MODEL
   ========================================================= */

#code-modal .modal-content {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

#code-modal .close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 100;
}

#code-modal #modal-code {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#code-modal #modal-code > pre {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-x: hidden;
}

#code-modal #modal-code .table-scroll-container {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#code-modal #modal-code table {
  border-collapse: separate;
  border-spacing: 0;
}

#code-modal #modal-code table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

#code-modal #modal-code table tbody {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(90vh - 180px);
  scrollbar-gutter: stable;
}

#code-modal #modal-code table thead,
#code-modal #modal-code table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

#code-modal #modal-code table th,
#code-modal #modal-code table td {
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   View Full Screen table bottom edge
  --------------------------------------------------------- */

#code-modal #modal-code .table-scroll-container {
  position: relative;
}

#code-modal #modal-code .table-scroll-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--border);
  pointer-events: none;
  z-index: 30;
}

/* ---------------------------------------------------------
   Prevent parent containers from stealing the scroll
   --------------------------------------------------------- */

.left-column,
.right-column {
  min-height: 0;
}

.left-column .field-doc-section,
.right-column .field-doc-section {
  min-height: 0;
}


/* ---------------------------------------------------------
   Make sure sticky elements are painted above rows
   --------------------------------------------------------- */

#field-docs-request .field-doc-section .field-doc-title,
#field-docs-request .field-doc-section .field-table thead th,
#field-docs-response .field-doc-section .field-doc-title,
#field-docs-response .field-doc-section .field-table thead th {
  isolation: isolate;
}


/* ---------------------------------------------------------
   FINAL OVERRIDES
   --------------------------------------------------------- */

#field-docs-request .field-doc-section .field-table,
#field-docs-response .field-doc-section .field-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#field-docs-request .field-doc-section .field-table thead th,
#field-docs-response .field-doc-section .field-table thead th {
  box-shadow: inset 0 -1px 0 var(--border) !important;
}

/* =========================================================
   END OF STYLES
   ========================================================= */