From 74500dfab7aec18855eb17771ed99e8c1683d602 Mon Sep 17 00:00:00 2001
From: Mustofa Al Ameen Mustafa <mustofaalameen54@gmail.com>
Date: Sun, 28 Jun 2026 17:59:01 +0100
Subject: [PATCH] chore: add print stylesheet for ApiDetailPage

---
 src/App.tsx                           |   6 +-
 src/components/CodeExample.tsx        |   1 +
 src/components/Dashboard.tsx          |   2 +-
 src/components/EndpointGroupHover.tsx |   2 +-
 src/components/MANUAL_TEST_PLAN.md    |  17 ++
 src/components/RouteProgressBar.tsx   |   2 +-
 src/index.css                         | 240 ++++++++++++++++++++++++++
 src/main.tsx                          |   1 -
 src/pages/ApiDetailPage.skeleton.tsx  |   4 +-
 src/pages/ApiDetailPage.tsx           |  12 +-
 src/print.test.ts                     |  67 +++++++
 src/styles/print.css                  | 237 -------------------------
 12 files changed, 339 insertions(+), 252 deletions(-)
 create mode 100644 src/print.test.ts
 delete mode 100644 src/styles/print.css

diff --git a/src/App.tsx b/src/App.tsx
index f53678f..a1010db 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -538,7 +538,7 @@ function App() {
       <div className="ambient ambient-a" aria-hidden="true" />
       <div className="ambient ambient-b" aria-hidden="true" />
 
-      <header className="topbar" role="banner">
+      <header className="topbar no-print" role="banner">
         <div>
           <p className="eyebrow">Callora Vault</p>
           <p className="brand">Secure USDC funding for premium API usage</p>
@@ -600,7 +600,7 @@ function App() {
                       <p className="eyebrow">Deposit USDC to Vault</p>
                       <h1>Review every number before you approve.</h1>
                     </div>
-                    <button className="primary-button" onClick={openDeposit}>
+                    <button className="primary-button no-print" onClick={openDeposit}>
                       Open deposit modal
                     </button>
                   </div>
@@ -733,7 +733,7 @@ function App() {
         </Routes>
       </main>
 
-      <footer className="surface app-footer" role="contentinfo">
+      <footer className="surface app-footer no-print" role="contentinfo">
         <div>
           <p className="eyebrow">Callora</p>
           <p className="footer-copy">
diff --git a/src/components/CodeExample.tsx b/src/components/CodeExample.tsx
index ce7934d..2c926fb 100644
--- a/src/components/CodeExample.tsx
+++ b/src/components/CodeExample.tsx
@@ -132,6 +132,7 @@ export default function CodeExample({
     >
       {/* Header Section: Contains Language Tabs and Copy Button */}
       <div
+        className="no-print"
         style={{
           display: "flex",
           justifyContent: "space-between",
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 7ce4fe2..18f44a9 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -63,7 +63,7 @@ export default function Dashboard({ vaultBalance, walletBalance, openDeposit }:
 
       {/* Quick actions */}
       <div className="dashboard-actions">
-        <button className="primary-button" onClick={openDeposit}>Deposit</button>
+        <button className="primary-button no-print" onClick={openDeposit}>Deposit</button>
         <button className="secondary-button" onClick={() => navigate('/marketplace')}>Browse APIs</button>
         <button className="secondary-button" onClick={() => navigate('/api-usage')}>View Usage</button>
       </div>
diff --git a/src/components/EndpointGroupHover.tsx b/src/components/EndpointGroupHover.tsx
index 889ef33..0eced4d 100644
--- a/src/components/EndpointGroupHover.tsx
+++ b/src/components/EndpointGroupHover.tsx
@@ -75,7 +75,7 @@ export default function EndpointGroupHover({
         onBlurCapture={handleBlurCapture}
       >
         <div
-          className="endpoint-group-hover__triggers"
+          className="endpoint-group-hover__triggers no-print"
           role="list"
           aria-label="Endpoint groups"
         >
diff --git a/src/components/MANUAL_TEST_PLAN.md b/src/components/MANUAL_TEST_PLAN.md
index 2162431..cf78dda 100644
--- a/src/components/MANUAL_TEST_PLAN.md
+++ b/src/components/MANUAL_TEST_PLAN.md
@@ -61,3 +61,20 @@
 ## Accessibility checks
 - [ ] Route shell sets `aria-busy="true"` while the destination is pending
 - [ ] Reduced motion removes shimmer from skeleton surfaces
+
+# ApiDetailPage Print Preview Manual Test Plan
+
+## Setup
+- [ ] Open `/details/weather-001` in Chrome
+- [ ] Open the same page in Firefox
+
+## Print preview checks
+- [ ] Global nav, footer, deposit CTA, in-page tabs, and sidebar are hidden
+- [ ] Background is white and body text is black/dark gray
+- [ ] Provider and other inline links show the full URL in parentheses after the link text
+- [ ] Long code snippets wrap without horizontal scrollbar or clipped content
+- [ ] Endpoint cards, parameter tables, and documentation content remain visible
+
+## Regression checks
+- [ ] Screen layout is unchanged when not printing
+- [ ] Interactive controls still work normally on screen after print stylesheet changes
diff --git a/src/components/RouteProgressBar.tsx b/src/components/RouteProgressBar.tsx
index 5ee7f56..953abdc 100644
--- a/src/components/RouteProgressBar.tsx
+++ b/src/components/RouteProgressBar.tsx
@@ -22,7 +22,7 @@ export default function RouteProgressBar() {
 
   return (
     <div
-      className={`route-progress-bar${isLoading ? " route-progress-bar--active" : ""}`}
+      className={`route-progress-bar no-print${isLoading ? " route-progress-bar--active" : ""}`}
       role="progressbar"
       aria-label="Page loading"
       aria-busy={isLoading}
diff --git a/src/index.css b/src/index.css
index fa8fa54..32764e8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3968,3 +3968,243 @@ code,
 .api-marketplace-card:focus-within .api-card__compare-btn {
   opacity: 1 !important;
 }
+
+/* ─── Print stylesheet (ApiDetailPage docs printout) ─────────────────────
+   Pure CSS. Hides chrome via .no-print, forces light theme, expands code,
+   appends URLs after inline links. See src/print.test.ts for contract tests.
+   ─────────────────────────────────────────────────────────────────────── */
+
+@page {
+  margin: 1.5cm;
+  size: auto;
+}
+
+@media print {
+  /* ── Chrome hide utility ───────────────────────────────────────────────── */
+  .no-print {
+    display: none !important;
+  }
+
+  /* ── Force light theme (black on white) ──────────────────────────────── */
+  html,
+  html[data-theme="dark"],
+  html[data-theme="light"] {
+    --page-bg: #f5f7fa !important;
+    --surface: #ffffff !important;
+    --surface-strong: rgba(255, 255, 255, 0.92) !important;
+    --surface-soft: rgba(0, 0, 0, 0.06) !important;
+    --line: rgba(0, 0, 0, 0.08) !important;
+    --line-strong: rgba(0, 0, 0, 0.12) !important;
+    --text: #1a2332 !important;
+    --muted: #64748b !important;
+    --accent: #2563eb !important;
+    --accent-strong: #059669 !important;
+    --danger: #dc2626 !important;
+    --success: #10b981 !important;
+    --shadow: none !important;
+    --ambient-a: transparent !important;
+    --ambient-b: transparent !important;
+    --backdrop: transparent !important;
+    --modal-bg: #ffffff !important;
+
+    --method-get-color: #1e40af !important;
+    --method-post-color: #065f46 !important;
+    --method-put-color: #92400e !important;
+    --method-delete-color: #991b1b !important;
+    --method-patch-color: #5b21b6 !important;
+
+    color-scheme: light !important;
+  }
+
+  /* ── Remove decorative / background effects ──────────────────────────── */
+  .ambient,
+  .api-detail-hero {
+    backdrop-filter: none !important;
+  }
+
+  * {
+    backdrop-filter: none !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  body {
+    background: #ffffff !important;
+    color: #1a2332 !important;
+  }
+
+  /* ── Hide non-markup chrome (decorative / modal overlays) ────────────── */
+  .skip-link,
+  .modal-backdrop,
+  .skeleton,
+  .ambient,
+  .button-spinner,
+  input[type="range"],
+  .route-progress-bar {
+    display: none !important;
+  }
+
+  /* ── Single-column layout ────────────────────────────────────────────── */
+  .api-detail-content-grid {
+    grid-template-columns: 1fr !important;
+    gap: 0 !important;
+  }
+
+  .api-detail-hero {
+    grid-template-columns: 1fr !important;
+    padding: 0 0 12px 0 !important;
+  }
+
+  .api-detail-price-panel {
+    text-align: left !important;
+    border-top: 1px solid var(--line);
+    padding-top: 12px !important;
+    margin-top: 12px;
+  }
+
+  .api-detail-price {
+    font-size: 1.25rem !important;
+  }
+
+  .api-detail-two-column,
+  .api-detail-pricing-grid,
+  .api-detail-metrics {
+    grid-template-columns: 1fr !important;
+  }
+
+  .endpoint-section-header,
+  .endpoint-card-header,
+  .api-detail-calculator-total,
+  .api-detail-reviews-header {
+    flex-direction: column !important;
+    align-items: flex-start !important;
+  }
+
+  .api-detail-sidebar-inner {
+    position: static !important;
+  }
+
+  .content-left {
+    max-width: 100% !important;
+  }
+
+  /* ── Page-break avoidance ──────────────────────────────────────────── */
+  .preview-card,
+  .stat-card,
+  .stat-card-skeleton,
+  .preview-card-skeleton,
+  .endpoint-section-header,
+  .endpoint-card-header,
+  .endpoint-table-wrap,
+  .api-detail-pricing-grid > *,
+  .api-detail-calculator-total,
+  .api-detail-plan-price,
+  .api-detail-two-column > *,
+  .api-detail-metrics > *,
+  .tab-content section,
+  .billing-panel,
+  .prototype-panel,
+  .vault-balance-card,
+  .info-card,
+  .marketplace-sidebar,
+  .filters-sidebar,
+  .marketplace-results,
+  .lp-section,
+  .lp-card,
+  h2,
+  h3,
+  h4,
+  table {
+    break-inside: avoid !important;
+    page-break-inside: avoid !important;
+  }
+
+  /* ── Content polish ──────────────────────────────────────────────────── */
+  .tab-content {
+    animation: none !important;
+  }
+
+  .tab-content section {
+    display: block !important;
+    margin-bottom: 24px;
+  }
+
+  .preview-card {
+    border: 1px solid #ddd !important;
+    background: #ffffff !important;
+    border-radius: 8px !important;
+    overflow: visible !important;
+  }
+
+  .api-detail-logo {
+    background: rgba(0, 0, 0, 0.04) !important;
+    color: #1a2332 !important;
+  }
+
+  .endpoint-card-header {
+    background: rgba(0, 0, 0, 0.03) !important;
+  }
+
+  .endpoint-table-wrap {
+    overflow: visible !important;
+  }
+
+  .endpoint-table-wrap table {
+    min-width: auto !important;
+    width: 100% !important;
+  }
+
+  .api-detail-calculator-total {
+    background: rgba(0, 0, 0, 0.03) !important;
+    border-radius: 8px !important;
+  }
+
+  .api-detail-metrics .stat-card {
+    background: rgba(0, 0, 0, 0.03) !important;
+    border-radius: 8px !important;
+  }
+
+  .api-detail-sidebar-inner > * {
+    margin-bottom: 0 !important;
+  }
+
+  /* ── Code samples: expand and wrap (no horizontal clip) ──────────────── */
+  .code-block,
+  pre,
+  code,
+  .response-json,
+  .endpoint-url {
+    background: #f4f4f5 !important;
+    border: 1px solid #ddd !important;
+    color: #1a2332 !important;
+    white-space: pre-wrap !important;
+    word-break: break-word !important;
+    overflow: visible !important;
+    overflow-x: visible !important;
+    max-width: 100% !important;
+  }
+
+  .api-detail-page {
+    padding: 0 !important;
+  }
+
+  .api-detail-container {
+    max-width: 100% !important;
+  }
+
+  .breadcrumb {
+    margin-bottom: 8px !important;
+  }
+
+  /* ── Links: show full URL after anchor text ──────────────────────────── */
+  a {
+    color: #1a2332 !important;
+    text-decoration: underline !important;
+  }
+
+  a[href]:not([href=""]):not([href^="#"]):not([href^="javascript:"]):after {
+    content: " (" attr(href) ")";
+    font-size: 0.85em;
+    color: #444;
+  }
+}
diff --git a/src/main.tsx b/src/main.tsx
index 587067d..021eba6 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -6,7 +6,6 @@ import RouteProgressBar from "./components/RouteProgressBar";
 import { startRouteLoading, stopRouteLoading } from "./hooks/useRouteLoading";
 import { ToastProvider } from "./components/Toast";
 import "./index.css";
-import "./styles/print.css";
 import "./styles/tokens.css";
 import { ThemeProvider } from "./ThemeContext";
 import { CollectionsProvider } from "./state/collectionsStore";
diff --git a/src/pages/ApiDetailPage.skeleton.tsx b/src/pages/ApiDetailPage.skeleton.tsx
index edc4f37..0a2d5f6 100644
--- a/src/pages/ApiDetailPage.skeleton.tsx
+++ b/src/pages/ApiDetailPage.skeleton.tsx
@@ -52,7 +52,7 @@ export default function ApiDetailPageSkeleton() {
 
           <div className="api-detail-content-grid">
             <div className="content-left">
-              <nav className="api-detail-tabs" aria-hidden="true" style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
+              <nav className="api-detail-tabs no-print" aria-hidden="true" style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
                 {Array.from({ length: 5 }).map((_, index) => (
                   <Skeleton key={index} width={88} height={20} />
                 ))}
@@ -68,7 +68,7 @@ export default function ApiDetailPageSkeleton() {
               </div>
             </div>
 
-            <aside className="api-detail-sidebar" aria-hidden="true">
+            <aside className="api-detail-sidebar no-print" aria-hidden="true">
               <div className="api-detail-sidebar-inner" style={{ display: "grid", gap: 20 }}>
                 <SidebarCardSkeleton />
                 <SidebarCardSkeleton />
diff --git a/src/pages/ApiDetailPage.tsx b/src/pages/ApiDetailPage.tsx
index cd13cfc..cdd7aec 100644
--- a/src/pages/ApiDetailPage.tsx
+++ b/src/pages/ApiDetailPage.tsx
@@ -192,7 +192,7 @@ const [, setTab] = useState<TabType>("overview");
             {/* Hero Skeleton */}
             <div className="api-detail-hero">
               <div className="api-detail-heading">
-                <button className="ghost-button" onClick={onBack} type="button">
+                <button className="ghost-button no-print" onClick={onBack} type="button">
                   Back
                 </button>
                 <div className="api-detail-brand">
@@ -224,7 +224,7 @@ const [, setTab] = useState<TabType>("overview");
             <div className="api-detail-content-grid">
               <div className="content-left">
                 {/* Tabs Navigation Skeleton */}
-                <nav className="api-detail-tabs">
+                <nav className="api-detail-tabs no-print">
                   {Array.from({ length: 5 }).map((_, i) => (
                     <Skeleton
                       key={i}
@@ -255,7 +255,7 @@ const [, setTab] = useState<TabType>("overview");
               </div>
 
               {/* Sidebar Skeleton */}
-              <aside className="api-detail-sidebar">
+              <aside className="api-detail-sidebar no-print">
                 <div className="api-detail-sidebar-inner">
                   {/* API Health Card Skeleton */}
                   <div
@@ -400,7 +400,7 @@ getApiData().then(console.log).catch(console.error);
        <div className="api-detail-shell">
 
     <button
-      className="ghost-button"
+      className="ghost-button no-print"
       onClick={onBack}
       type="button"
     >
@@ -1155,7 +1155,7 @@ getApiData().then(console.log).catch(console.error);
             </div>
 
             {/* Sidebar Sticky Column */}
-            <aside className="api-detail-sidebar">
+            <aside className="api-detail-sidebar no-print">
               <div className="api-detail-sidebar-inner">
                 <div
                   className="stat-card"
@@ -1302,7 +1302,7 @@ getApiData().then(console.log).catch(console.error);
       </div>
     </div>
 
-    <div className="api-hero__cta">
+    <div className="api-hero__cta no-print">
       <button className="primary-button">
         Try API
       </button>
diff --git a/src/print.test.ts b/src/print.test.ts
new file mode 100644
index 0000000..670188e
--- /dev/null
+++ b/src/print.test.ts
@@ -0,0 +1,67 @@
+import { describe, it, expect } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const read = (p: string) => readFileSync(resolve(process.cwd(), p), "utf8");
+
+describe("print stylesheet contract", () => {
+  const css = read("src/index.css");
+
+  it("defines @media print near the end of index.css", () => {
+    const printIndex = css.lastIndexOf("@media print");
+    const fileLength = css.length;
+    expect(printIndex).toBeGreaterThan(-1);
+    expect(printIndex).toBeGreaterThan(fileLength * 0.85);
+  });
+
+  it("hides .no-print elements", () => {
+    expect(css).toMatch(
+      /@media print[\s\S]*\.no-print\s*\{[\s\S]*?display:\s*none\s*!important/,
+    );
+  });
+
+  it("forces light theme tokens for print", () => {
+    expect(css).toMatch(/--page-bg:\s*#f5f7fa\s*!important/);
+    expect(css).toMatch(/--text:\s*#1a2332\s*!important/);
+  });
+
+  it("appends href after inline links", () => {
+    expect(css).toMatch(/a\[href\][\s\S]*?:after/);
+    expect(css).toMatch(/content:\s*"\s*\("\s*attr\(href\)\s*"\)"\s*;/);
+  });
+
+  it("excludes javascript: hrefs from printed URLs", () => {
+    expect(css).toMatch(/:not\(\[href\^="javascript:"\]\)/);
+  });
+
+  it("wraps code samples without clipping", () => {
+    expect(css).toMatch(/pre[\s\S]*?white-space:\s*pre-wrap\s*!important/);
+    expect(css).toMatch(/pre[\s\S]*?overflow:\s*visible\s*!important/);
+  });
+});
+
+describe("no-print markup", () => {
+  it("marks App shell chrome as no-print", () => {
+    const app = read("src/App.tsx");
+    expect(app).toMatch(/className="topbar no-print"/);
+    expect(app).toMatch(/className="surface app-footer no-print"/);
+    expect(app).toMatch(/className="primary-button no-print" onClick=\{openDeposit\}/);
+  });
+
+  it("marks ApiDetailPage chrome as no-print", () => {
+    const page = read("src/pages/ApiDetailPage.tsx");
+    expect(page).toMatch(/className="api-detail-tabs no-print"/);
+    expect(page).toMatch(/className="api-detail-sidebar no-print"/);
+    expect(page).toMatch(/className="api-hero__cta no-print"/);
+  });
+
+  it("marks CodeExample header controls as no-print", () => {
+    const codeExample = read("src/components/CodeExample.tsx");
+    expect(codeExample).toMatch(/className="no-print"/);
+  });
+
+  it("does not import the removed print.css file", () => {
+    const main = read("src/main.tsx");
+    expect(main).not.toMatch(/print\.css/);
+  });
+});
diff --git a/src/styles/print.css b/src/styles/print.css
deleted file mode 100644
index 19ed490..0000000
--- a/src/styles/print.css
+++ /dev/null
@@ -1,237 +0,0 @@
-@page {
-  margin: 1.5cm;
-  size: auto;
-}
-
-@media print {
-  /* ── Force light theme ─────────────────────────────────────────────────── */
-  html,
-  html[data-theme="dark"],
-  html[data-theme="light"] {
-    --page-bg: #f5f7fa !important;
-    --surface: #ffffff !important;
-    --surface-strong: rgba(255, 255, 255, 0.92) !important;
-    --surface-soft: rgba(0, 0, 0, 0.06) !important;
-    --line: rgba(0, 0, 0, 0.08) !important;
-    --line-strong: rgba(0, 0, 0, 0.12) !important;
-    --text: #1a2332 !important;
-    --muted: #64748b !important;
-    --accent: #2563eb !important;
-    --accent-strong: #059669 !important;
-    --danger: #dc2626 !important;
-    --success: #10b981 !important;
-    --shadow: none !important;
-    --ambient-a: transparent !important;
-    --ambient-b: transparent !important;
-    --backdrop: transparent !important;
-    --modal-bg: #ffffff !important;
-
-    --method-get-color: #1e40af !important;
-    --method-post-color: #065f46 !important;
-    --method-put-color: #92400e !important;
-    --method-delete-color: #991b1b !important;
-    --method-patch-color: #5b21b6 !important;
-
-    color-scheme: light !important;
-  }
-
-  /* ── Remove decorative / background effects ────────────────────────────── */
-  .ambient,
-  .api-detail-hero {
-    backdrop-filter: none !important;
-  }
-
-  * {
-    backdrop-filter: none !important;
-    box-shadow: none !important;
-    text-shadow: none !important;
-  }
-
-  body {
-    background: #f5f7fa !important;
-    color: #1a2332 !important;
-  }
-
-  /* ── Hide chrome ───────────────────────────────────────────────────────── */
-  .topbar,
-  .nav,
-  .app-footer,
-  .footer-nav,
-  .theme-toggle,
-  .skip-link,
-  .modal-backdrop,
-  .skeleton,
-  .ambient,
-  .ghost-button,
-  .primary-button,
-  .secondary-button,
-  .close-button,
-  .danger-button,
-  .hash-actions button,
-  .hash-actions a,
-  .preset-row,
-  .outcome-toggle,
-  .lp-btn,
-  .lp-footer,
-  .launch-home,
-  .error-link-pill,
-  .not-found-links a,
-  .button-spinner,
-  input[type="range"],
-  .api-detail-tabs {
-    display: none !important;
-  }
-
-  .api-detail-sidebar {
-    display: none !important;
-  }
-
-  /* ── Single-column layout ──────────────────────────────────────────────── */
-  .api-detail-content-grid {
-    grid-template-columns: 1fr !important;
-    gap: 0 !important;
-  }
-
-  .api-detail-hero {
-    grid-template-columns: 1fr !important;
-    padding: 0 0 12px 0 !important;
-  }
-
-  .api-detail-price-panel {
-    text-align: left !important;
-    border-top: 1px solid var(--line);
-    padding-top: 12px !important;
-    margin-top: 12px;
-  }
-
-  .api-detail-price {
-    font-size: 1.25rem !important;
-  }
-
-  .api-detail-two-column,
-  .api-detail-pricing-grid,
-  .api-detail-metrics {
-    grid-template-columns: 1fr !important;
-  }
-
-  .endpoint-section-header,
-  .endpoint-card-header,
-  .api-detail-calculator-total,
-  .api-detail-reviews-header {
-    flex-direction: column !important;
-    align-items: flex-start !important;
-  }
-
-  .api-detail-sidebar-inner {
-    position: static !important;
-  }
-
-  .content-left {
-    max-width: 100% !important;
-  }
-
-  /* ── Page-break avoidance ──────────────────────────────────────────────── */
-  .preview-card,
-  .stat-card,
-  .stat-card-skeleton,
-  .preview-card-skeleton,
-  .endpoint-section-header,
-  .endpoint-card-header,
-  .endpoint-table-wrap,
-  .api-detail-pricing-grid > *,
-  .api-detail-calculator-total,
-  .api-detail-plan-price,
-  .api-detail-two-column > *,
-  .api-detail-metrics > *,
-  .tab-content section,
-  .api-detail-plan-price,
-  .billing-panel,
-  .prototype-panel,
-  .vault-balance-card,
-  .info-card,
-  .marketplace-sidebar,
-  .filters-sidebar,
-  .marketplace-results,
-  .lp-section,
-  .lp-card,
-  h2,
-  h3,
-  h4,
-  table {
-    break-inside: avoid !important;
-    page-break-inside: avoid !important;
-  }
-
-  /* ── Content polish ────────────────────────────────────────────────────── */
-  .tab-content {
-    animation: none !important;
-  }
-
-  .tab-content section {
-    display: block !important;
-    margin-bottom: 24px;
-  }
-
-  .preview-card {
-    border: 1px solid #ddd !important;
-    background: #ffffff !important;
-    border-radius: 8px !important;
-  }
-
-  .api-detail-logo {
-    background: rgba(0, 0, 0, 0.04) !important;
-    color: #1a2332 !important;
-  }
-
-  .endpoint-card-header {
-    background: rgba(0, 0, 0, 0.03) !important;
-  }
-
-  .endpoint-table-wrap {
-    overflow: visible !important;
-  }
-
-  .endpoint-table-wrap table {
-    min-width: auto !important;
-    width: 100% !important;
-  }
-
-  .api-detail-calculator-total {
-    background: rgba(0, 0, 0, 0.03) !important;
-    border-radius: 8px !important;
-  }
-
-  .api-detail-metrics .stat-card {
-    background: rgba(0, 0, 0, 0.03) !important;
-    border-radius: 8px !important;
-  }
-
-  .api-detail-sidebar-inner > * {
-    margin-bottom: 0 !important;
-  }
-
-  .code-block,
-  pre,
-  code {
-    background: #f4f4f5 !important;
-    border: 1px solid #ddd !important;
-    color: #1a2332 !important;
-  }
-
-  .api-detail-page {
-    padding: 0 !important;
-  }
-
-  .api-detail-container {
-    max-width: 100% !important;
-  }
-
-  .breadcrumb {
-    margin-bottom: 8px !important;
-  }
-
-  a {
-    color: #2563eb !important;
-    text-decoration: underline !important;
-  }
-}