/* ------------------------------------------------------------ */
/* Reset & Base Styling                                        */
/* ------------------------------------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  height: 100vh;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
}

/* ------------------------------------------------------------ */
/* Sidebar Styling                                              */
/* ------------------------------------------------------------ */
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background-color: #0a2540;
  color: #ffffff;
  overflow-y: auto;
  padding: 1rem;
}

#sidebar h2 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  text-align: center;
  letter-spacing: 0.5px;
}

#sidebar ul {
  list-style: none;
  margin: 0;
}

#sidebar li.section-title {
  margin-top: 1rem;
  font-weight: bold;
  font-size: 0.95rem;
  opacity: 0.8;
}

#sidebar li.page-link {
  margin: 0.3rem 0;
  cursor: pointer;
}

#sidebar li.page-link a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.90rem;
  display: block;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  transition: background 0.15s ease-in-out;
}

#sidebar li.page-link a:hover,
#sidebar li.page-link a.active {
  background: #1f73b7;
}

#sidebar li.page-link a.heading-spy--active {
  border-right: 4px solid #1f73b7;
  padding-right: 0.5rem;
}

/* ------------------------------------------------------------ */
/* Main Content Pane                                            */
/* ------------------------------------------------------------ */
#content {
  margin-left: 260px; /* push content right of fixed sidebar */
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
  background: #fafafa;
}

/* ------------------------------------------------------------ */
/* Headings & Section Dividers                                  */
/* ------------------------------------------------------------ */
#content h1,
#content h2,
#content h3,
#content h4 {
  margin-top: 2rem;
  margin-bottom: 0.8rem;
  color: #0a2540;
  line-height: 1.3;
}

/* h2 gets a bold underline to separate sections */
#content h2 {
  padding-bottom: 0.3rem;
  border-bottom: 2px solid #e0e0e0;
}

/* h3 gets a slightly lighter line */
#content h3 {
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #f0f0f0;
}

/* Add extra space when something follows h2/h3 */
#content h2 + *,
#content h3 + * {
  margin-top: 1.5rem;
}

/* ------------------------------------------------------------ */
/* Paragraphs & Inline Code                                      */
/* ------------------------------------------------------------ */
#content p,
#content li {
  line-height: 1.6;
  margin-bottom: 0.9rem;
}

/* Inline <code> styling (within paragraphs) */
#content p code {
  background-color: #f2f2f2;
  color: #d6336c;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: Consolas, Menlo, Courier, monospace;
  font-size: 0.95rem;
}

/* If inline <code> appears inside a <pre>, remove its background and padding */
#content pre code {
  background: none;
  padding: 0;
}

/* ------------------------------------------------------------ */
/* List Styling (ul, ol, li)                                    */
/* ------------------------------------------------------------ */
#content ul,
#content ol {
  margin: 1rem 0;         /* space above/below lists */
  padding-left: 1.5rem;   /* indent lists */
}

#content li {
  margin-bottom: 0.5rem;  /* spacing between items */
  line-height: 1.6;
}

/* Default bullet color inherits text; override if desired */
#content ul li {
  list-style-type: disc;
  color: #333;
}

/* Custom bullet color using ::marker */
#content ul li::marker {
  color: #1f73b7;
}

/* ------------------------------------------------------------ */
/* Table Styling (Markdown‐style)                                */
/* ------------------------------------------------------------ */
#content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}

#content table th,
#content table td {
  border: 1px solid #ddd;
  padding: 0.6rem 0.8rem;
  text-align: left;
}

#content table th {
  background-color: #f2f2f2;
  font-weight: 600;
}

#content table tr:nth-child(even) {
  background-color: #f9f9f9;
}

#content table tr:hover {
  background-color: #f1f1f1;
}

#content table thead th {
  border-bottom: 2px solid #ccc;
}

#content table td {
  overflow-wrap: break-word;
  vertical-align: top;
}

/* Short field names and types stay on one line (index.html marks them
   .nowrap); the description column keeps a readable width, and the table
   scrolls sideways when the screen is narrower */
#content .table-scroll {
  overflow-x: auto;
  margin: 1rem 0;
}

#content .table-scroll table {
  margin: 0;
}

#content table td.nowrap {
  white-space: nowrap;
}

#content table td:last-child code {
  overflow-wrap: anywhere;
}

#content table td:last-child:not(:first-child) {
  min-width: 13rem;
}

/* ------------------------------------------------------------ */
/* Dark‐Theme Code Blocks (Atom One Dark)                        */
/* ------------------------------------------------------------ */

/* Override the <pre> container */
#content pre {
  background-color: #282c34; /* Atom One Dark background */
  color: #abb2bf;            /* default light‐gray text */
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  margin: 1.5rem 0;          /* vertical spacing around code blocks */
}

/* <pre><code> (Highlight.js blocks) */
#content pre code.hljs {
  background: none;           /* remove any built‐in background */
  display: block;
  font-family: Consolas, Menlo, Courier, monospace;
  font-size: 0.95rem;
  line-height: 1.5;
  color: white;
}

/* Atom One Dark token colors */
#content pre code.hljs .hljs-comment,
#content pre code.hljs .hljs-quote {
  color: #5c6370;
  font-style: italic;
}

#content pre code.hljs .hljs-keyword,
#content pre code.hljs .hljs-selector-tag,
#content pre code.hljs .hljs-literal,
#content pre code.hljs .hljs-section,
#content pre code.hljs .hljs-doctag {
  color: #c678dd;
}

#content pre code.hljs .hljs-string,
#content pre code.hljs .hljs-title,
#content pre code.hljs .hljs-name,
#content pre code.hljs .hljs-type,
#content pre code.hljs .hljs-number,
#content pre code.hljs .hljs-symbol,
#content pre code.hljs .hljs-bullet,
#content pre code.hljs .hljs-addition,
#content pre code.hljs .hljs-attribute {
  color: #98c379;
}

#content pre code.hljs .hljs-variable,
#content pre code.hljs .hljs-template-variable,
#content pre code.hljs .hljs-link,
#content pre code.hljs .hljs-selector-id {
  color: #56b6c2;
}

#content pre code.hljs .hljs-built_in,
#content pre code.hljs .hljs-builtin-name {
  color: #56b6c2;
}

#content pre code.hljs .hljs-deletion {
  color: #be5046;
}

#content pre code.hljs .hljs-regexp,
#content pre code.hljs .hljs-linkify {
  color: #d19a66;
}

#content pre code.hljs .hljs-meta {
  color: #abb2bf;
}

#content pre code.hljs .hljs-emphasis {
  font-style: italic;
}

#content pre code.hljs .hljs-strong {
  font-weight: 700;
}

#content .hljs-attr {
  color: #56b6c2;
}

/* ------------------------------------------------------------ */
/* Links & Images                                                */
/* ------------------------------------------------------------ */
#content a {
  color: #1f73b7;
  text-decoration: none;
}

#content a:hover {
  text-decoration: underline;
}

#content img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------ */
/* “Request” Box / Example Card (Optional)                       */
/* ------------------------------------------------------------ */
.request-box {
  background-color: #1f73b7;      /* deep blue */
  color: #ffffff;
  padding: 1rem;
  border-radius: 4px;
  margin: 1.5rem 0;
  font-family: Consolas, Menlo, Courier, monospace;
  font-size: 0.95rem;
}

.request-box code {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
}

/* ------------------------------------------------------------ */
/* HTTP Method Badges (Optional)                                 */
/* ------------------------------------------------------------ */
.http-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.http-badge.get {
  background-color: #98c379;      /* green */
  color: #1e2022;
}

.http-badge.post {
  background-color: #61afef;      /* light blue */
  color: #1e2022;
}

/* ------------------------------------------------------------ */
/* Inline code in tables, lists and notes                        */
/* ------------------------------------------------------------ */
#content td code,
#content li code,
#content blockquote code {
  background-color: #f2f2f2;
  color: #d6336c;
  padding: 1px 4px;
  border-radius: 4px;
  font-family: Consolas, Menlo, Courier, monospace;
  font-size: 0.9rem;
}

#content blockquote {
  border-left: 4px solid #1f73b7;
  background: #eef5fb;
  padding: 0.6rem 1rem;
  margin: 1rem 0;
}

#content blockquote p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------ */
/* Phones: sidebar on top, content below                         */
/* ------------------------------------------------------------ */
@media (max-width: 760px) {
  body {
    display: block;
    height: auto;
    overflow: visible;
  }

  #sidebar {
    position: static;
    width: auto;
    max-height: 45vh;
  }

  #content {
    margin-left: 0;
    padding: 1rem;
    overflow: visible;
  }
}