/* ============================================================
   Shirtplatform API Docs — Custom CSS (Bootstrap 5 companion)
   Phase 1: Visual replacement, no content changes
   ============================================================ */

/* ---- Language toggle (JSON/XML) ----
   Visibility is driven by a body class rather than inline style.display per element.
   Default (no class): JSON visible, XML hidden.
   body.sp-lang-xml:  XML visible, JSON hidden. */
.code-xml { display: none; }
body.sp-lang-xml .code-xml { display: revert; }
body.sp-lang-xml .code-json { display: none; }

/* ---- Navbar ---- */
.sp-navbar {
  z-index: 1040;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg) !important;
}

/* ---- Search ---- */
.sp-search-wrap {
  position: relative;
  width: 200px;
}
.sp-search-input {
  border-radius: 0 0.375rem 0.375rem 0 !important;
}
.sp-search-results {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 360px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 2000;
  max-height: 420px;
  overflow-y: auto;
}
.sp-search-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: var(--bs-body-color);
  border-bottom: 1px solid var(--bs-border-color);
}
.sp-search-item:last-child { border-bottom: none; }
.sp-search-item:hover { background: rgba(var(--bs-primary-rgb), 0.06); }
.sp-search-item-icon {
  margin-top: 2px;
  color: var(--bs-secondary-color);
  flex-shrink: 0;
  font-size: 0.875rem;
}
.sp-search-item-title {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
}
.sp-search-item-meta {
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
  margin-top: 1px;
}
.sp-search-empty {
  padding: 0.75rem;
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
  text-align: center;
}

/* ---- Navbar active page indicator ---- */
.sp-navbar .nav-link.active {
  color: var(--bs-primary) !important;
  font-weight: 600;
  background: rgba(var(--bs-primary-rgb), 0.1);
  border-radius: 0.375rem;
}

/* ---- Sidebar ---- */
.sp-sidebar {
  border-right: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  min-height: calc(100vh - 56px);
}

.sp-sidebar-sticky {
  position: sticky;
  top: 56px;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 0 1rem 1rem 1rem;
}

/* Thin scrollbar in sidebar */
.sp-sidebar-sticky::-webkit-scrollbar {
  width: 4px;
}
.sp-sidebar-sticky::-webkit-scrollbar-thumb {
  background: var(--bs-border-color);
  border-radius: 2px;
}

.sp-sidebar-nav .nav-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--bs-body-color);
  border-radius: 0.25rem;
  margin-bottom: 0.1rem;
}

.sp-sidebar-nav .nav-link .sp-nav-path {
  font-size: 0.75rem;
  font-family: var(--bs-font-monospace);
  white-space: nowrap;
}

.sp-sidebar-nav .nav-link .sp-nav-label {
  font-size: 0.8125rem;
  line-height: 1.3;
}

.sp-sidebar .sp-resource-title {
  font-size: 1.35rem;
}

.sp-sidebar-nav .badge-get,
.sp-sidebar-nav .badge-post,
.sp-sidebar-nav .badge-put,
.sp-sidebar-nav .badge-delete,
.sp-sidebar-nav .badge-patch {
  min-width: 44px;
  padding: 0.35em 0.3em;
  margin-right: 0.4rem;
}

.sp-sidebar-nav .nav-link:hover,
.sp-sidebar-resource-row:hover .nav-link {
  background: var(--bs-secondary-bg);
}

.sp-sidebar-nav .nav-link.active {
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.08);
  font-weight: 600;
}

.sp-sidebar-nav-compact .nav-link {
  padding: 0.125rem 0.5rem;
  font-size: 0.8125rem;
}

/* ---- Method badges (Stripe-inspired palette) ---- */
.badge-get,
.badge-post,
.badge-put,
.badge-delete,
.badge-patch {
  min-width: 55px;
  text-align: center;
  font-family: var(--bs-font-monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.badge-get    { background-color: #6772e5; color: #fff; padding-top: 0.55em; padding-bottom: 0.55em; }
.badge-post   { background-color: #24b47e; color: #fff; padding-top: 0.55em; padding-bottom: 0.55em; }
.badge-put    { background-color: #e39b2c; color: #fff; padding-top: 0.55em; padding-bottom: 0.55em; }
.badge-delete { background-color: #e37c4f; color: #fff; padding-top: 0.55em; padding-bottom: 0.55em; }
.badge-patch  { background-color: #9c67e3; color: #fff; padding-top: 0.55em; padding-bottom: 0.55em; }

/* ---- Resource cards on index page ---- */
.sp-resource-card {
  transition: box-shadow 0.15s ease;
}
.sp-resource-card:hover {
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.08);
}

.sp-resource-card .card-title a {
  color: var(--bs-body-color);
  transition: color 0.15s ease;
}
.sp-resource-card .card-title a:hover {
  color: var(--bs-primary) !important;
  text-decoration: underline !important;
}

.sp-resource-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.sp-endpoint-list .list-group-item {
  border: none;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}
.sp-endpoint-list .list-group-item:last-child {
  border-bottom: none;
}

.sp-resource-description p {
  color: inherit;
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.sp-resource-description code,
.sp-endpoint-section p code {
  color: #4a52b8;
  background: #eaebfb;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.875em;
}
[data-bs-theme="dark"] .sp-resource-description code,
[data-bs-theme="dark"] .sp-endpoint-section p code {
  color: #a5aaf5;
  background: #1e2060;
}

.sp-endpoint-path {
  font-size: 0.875rem;
  white-space: nowrap;
}

.sp-endpoint-desc {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  font-style: italic;
}

/* ---- Lang toggle bar (sticky under navbar) ---- */
.sp-lang-toggle-bar {
  z-index: 1035;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color-translucent);
  top: 56px; /* below navbar */
}

/* ---- Example column — dark always (Stripe style) ---- */
.sp-example-col {
  background: #1a1d2e;
  border-left: none;
  border-radius: 0.5rem;
}

.sp-example-col small,
.sp-example-col .text-body-tertiary {
  color: #adb5c8 !important;
  font-weight: 500;
}

.sp-example-col .sp-copy-btn,
.sp-example-col .sp-expand-btn {
  color: #c8d0e0;
  opacity: 0.85;
}

.sp-example-col .sp-copy-btn:hover,
.sp-example-col .sp-expand-btn:hover {
  color: #ffffff;
  opacity: 1;
}

.sp-example-sticky {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-left: 1.5rem;
}

.sp-example-sticky::-webkit-scrollbar {
  width: 6px;
}
.sp-example-sticky::-webkit-scrollbar-track {
  background: transparent;
}
.sp-example-sticky::-webkit-scrollbar-thumb {
  background: #3d4460;
  border-radius: 3px;
}
.sp-example-sticky::-webkit-scrollbar-thumb:hover {
  background: #5a6080;
}

/* ---- Code blocks ---- */
.sp-pre {
  font-size: 0.8125rem;
  max-height: 400px;
  overflow: auto;
  border-radius: 0.375rem;
  margin-bottom: 0;
  scrollbar-width: thin;
  scrollbar-color: #3d4460 transparent;
}

.sp-pre::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.sp-pre::-webkit-scrollbar-track {
  background: transparent;
}
.sp-pre::-webkit-scrollbar-thumb {
  background: #3d4460;
  border-radius: 3px;
}
.sp-pre::-webkit-scrollbar-thumb:hover {
  background: #5a6080;
}

.sp-pre code {
  font-size: inherit;
}

.sp-copy-btn,
.sp-expand-btn {
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  color: var(--bs-body-color);
  opacity: 0.7;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.sp-copy-btn:hover,
.sp-expand-btn:hover {
  opacity: 1;
}
.sp-copy-btn.copied {
  color: var(--bs-success);
  opacity: 1;
}

/* ---- Sidebar A–Z letter separators ---- */
.sp-sidebar-letter {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--bs-secondary-color);
  padding: 0.4rem 0.5rem 0.1rem;
  line-height: 1;
  letter-spacing: 0.05em;
}

/* ---- Data Types page content letter dividers ---- */
.sp-letter-divider {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--bs-secondary-color);
  letter-spacing: 0.05em;
  padding: 0.75rem 0 0.5rem;
  border-top: 1px solid var(--bs-border-color);
  margin-top: 0.5rem;
}

/* ---- Sidebar resource row goto button ---- */
.sp-sidebar-resource-row {
  padding-right: 0.25rem;
}
.sp-sidebar-goto {
  flex-shrink: 0;
  color: var(--bs-secondary-color);
  opacity: 0;
  font-size: 0.8rem;
  padding: 0.15rem 0.25rem;
  border-radius: 0.25rem;
  transition: opacity 0.15s ease, color 0.15s ease;
  text-decoration: none;
}
.sp-sidebar-resource-row:hover .sp-sidebar-goto {
  opacity: 1;
}
.sp-sidebar-goto:hover {
  color: var(--bs-primary) !important;
}

/* ---- Resource chart ---- */
.sp-resource-chart {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 1rem;
}
.sp-resource-chart-img {
  max-height: 220px;
  width: auto;
  display: block;
  border-radius: 0.25rem;
  transition: opacity 0.15s ease;
}
.sp-resource-chart a:hover .sp-resource-chart-img {
  opacity: 0.8;
}

/* ---- Dark code block (used on guides page) ---- */
.sp-code-dark {
  background: #1a1d2e;
  border-radius: 0.5rem;
  padding: 0.75rem;
}
.sp-code-dark small,
.sp-code-dark .text-body-tertiary {
  color: #adb5c8 !important;
  font-weight: 500;
}
.sp-code-dark .sp-copy-btn,
.sp-code-dark .sp-expand-btn {
  color: #c8d0e0;
  opacity: 0.85;
}
.sp-code-dark .sp-copy-btn:hover,
.sp-code-dark .sp-expand-btn:hover {
  color: #ffffff;
  opacity: 1;
}

.sp-pre-expanded {
  max-height: none !important;
}

/* ---- Data Type / Enum badges ---- */
.sp-badge-datatype,
.sp-badge-enum {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2em 0.4em;
  flex-shrink: 0;
}

.sp-badge-datatype {
  background: #dbeafe;
  color: #1e40af;
}

.sp-badge-enum {
  background: #fef9c3;
  color: #854d0e;
}

[data-bs-theme="dark"] .sp-badge-datatype {
  background: #1e2060;
  color: #a5aaf5;
}

[data-bs-theme="dark"] .sp-badge-enum {
  background: #3d2e00;
  color: #fcd34d;
}

/* ---- Data Type heading ---- */
.sp-datatype-heading {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
}

/* ---- Required badge ---- */
.sp-required {
  background-color: #ffeae3;
  color: #c0392b;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2em 0.45em;
}

[data-bs-theme="dark"] .sp-required {
  background-color: #3d1a0a;
  color: #fb923c;
}

/* ---- Param "In" badges (path / query / header) ----
   Three variants — uncomment one block at a time.
   ============================================================

   VARIANT A — Stripe style
   Pastel backgrounds, dark muted text. Subtle, matches Stripe/ReadMe.
   ============================================================ */
/* .sp-in-path   { background: #fff3cd; color: #7a4f00; }
.sp-in-query  { background: #e9d8fd; color: #5b21b6; }
.sp-in-header { background: #e2e8f0; color: #334155; }
.sp-in-other  { background: #e2e8f0; color: #334155; } */

/* ============================================================
   VARIANT B — Postman style
   Saturated solid colors, white text. More colorful.
   ============================================================
.sp-in-path   { background: #f97316; color: #fff; }
.sp-in-query  { background: #3b82f6; color: #fff; }
.sp-in-header { background: #0d9488; color: #fff; }
.sp-in-other  { background: #6b7280; color: #fff; }
*/

/* ============================================================
   VARIANT C — Stripe-coordinated pastels
   Pastel tints of Stripe method badge colors.
   path=indigo-tint (GET #6772e5), query=emerald-tint (POST #24b47e), header=purple-tint (PATCH #9c67e3)
   ============================================================ */
.sp-in-path   { background: #eaebfb; color: #4a52b8; }
.sp-in-query  { background: #d4f3e8; color: #0e7a52; }
.sp-in-header { background: #f0e8fb; color: #6b3db5; }
.sp-in-other  { background: #f1f5f9; color: #475569; }

/* Dark mode adjustments */
[data-bs-theme="dark"] .sp-in-path   { background: #1e2060; color: #a5aaf5; }
[data-bs-theme="dark"] .sp-in-query  { background: #0a3325; color: #6ee7b7; }
[data-bs-theme="dark"] .sp-in-header { background: #2e1a4a; color: #c4a8f0; }
[data-bs-theme="dark"] .sp-in-other  { background: #1e293b; color: #94a3b8; }

/* ---- Params table — borderless Stripe style ---- */
.sp-params-table {
  --bs-table-border-color: transparent;
}

.sp-params-table th {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--bs-border-color) !important;
}

.sp-params-table tbody tr {
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.sp-params-table tbody tr:last-child {
  border-bottom: none;
}

.sp-params-table td {
  font-size: 0.875rem;
  vertical-align: top;
  border: none;
}

/* ---- Endpoint sections ---- */
.sp-endpoint-section {
  scroll-margin-top: 110px;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.sp-endpoint-section:first-of-type {
  padding-top: 0;
}

.sp-endpoint-section:last-child {
  border-bottom: none;
}

/* ---- Endpoint header accent ---- */
.sp-endpoint-header {
  background: var(--bs-secondary-bg);
  border-radius: 0.375rem;
  padding: 0.625rem 0.875rem;
  margin-bottom: 1rem;
}

.sp-endpoint-path-heading {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
}

/* ---- Response code badges ---- */
.sp-status-1xx { background: #e2e8f0; color: #334155; }
.sp-status-2xx { background: #d3f9d8; color: #276333; }
.sp-status-3xx { background: #fff3cd; color: #7a4f00; }
.sp-status-4xx { background: #ffe8d3; color: #9a3412; }
.sp-status-5xx { background: #ffd7d7; color: #842029; }

[data-bs-theme="dark"] .sp-status-1xx { background: #1e293b; color: #94a3b8; }
[data-bs-theme="dark"] .sp-status-2xx { background: #0a3325; color: #6ee7b7; }
[data-bs-theme="dark"] .sp-status-3xx { background: #3d2e00; color: #fcd34d; }
[data-bs-theme="dark"] .sp-status-4xx { background: #3d1a0a; color: #fb923c; }
[data-bs-theme="dark"] .sp-status-5xx { background: #3d0a0a; color: #f87171; }

/* ---- Datatype sections ---- */
.sp-datatype-section {
  scroll-margin-top: 110px;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  padding-bottom: 2rem;
}

.sp-datatype-section:last-child {
  border-bottom: none;
}

/* ---- Primitive type label in properties table ---- */
.sp-type-primitive {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  background: transparent;
  padding: 0;
}

/* ---- Data Types grouped sections ---- */
.sp-dt-group-heading {
  font-size: 1.1rem;
  border-bottom: 2px solid var(--bs-border-color);
  padding-bottom: .4rem;
  margin-bottom: .75rem;
}

/* ---- Misc ---- */
.break-word {
  word-break: break-all;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* ---- Dark mode adjustments ---- */
[data-bs-theme="dark"] .sp-example-col,
[data-bs-theme="dark"] .sp-code-dark {
  background: #0d1117;
}

[data-bs-theme="dark"] .sp-pre {
  background: #1e1e1e;
}

/* ---- Print ---- */
@media print {
  .sp-sidebar,
  .sp-lang-toggle-bar,
  .sp-example-col,
  .sp-search-box,
  #darkModeToggle {
    display: none !important;
  }
  main {
    width: 100% !important;
    max-width: 100% !important;
  }
}