:root {
  --bg: #0f172a;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  font-family: Arial, sans-serif;
  color: #fff;
  display: flex;
  height: 100vh;
}
.sidebar {
  width: 250px;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.sidebar .logo {
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}
.sidebar nav {
  flex: 1;
}
.sidebar nav ul {
  list-style: none;
  padding: 0;
}
.sidebar nav ul li {
  margin-bottom: 10px;
}
.sidebar nav ul li a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 10px;
  border-radius: 5px;
  transition: background-color 0.3s;
}
.sidebar nav ul li a:hover,
.sidebar nav ul li a.active {
  background-color: rgba(255, 255, 255, 0.1);
}
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.header {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header .title {
  font-size: 24px;
  font-weight: bold;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
.container-fluid {
  max-width: 1100px;
  margin: 0 auto;
}

/* make endpoint cards responsive and prevent overflow */
.endpoints-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:12px; align-items:start }
.ep { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:12px; border-radius:8px; word-wrap:break-word; overflow:hidden }
.ep .meta { font-family:monospace; color:#cfeef0; white-space:normal; word-break:break-all }
.ep .desc { color: rgba(255,255,255,0.7); margin-top:8px; white-space:normal }

/* ensure preformatted examples wrap without causing horizontal scroll */
.example { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere }

/* Bash-style example block */
.bash-block { background:#07101a; border:1px solid rgba(255,255,255,0.03); border-radius:8px; overflow:hidden; margin-top:10px }
.bash-header { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-bottom:1px solid rgba(255,255,255,0.02) }
.bash-title { font-family: monospace; color:#9fe6ea; font-size:12px }
.copy-btn { background:transparent; border:1px solid rgba(255,255,255,0.06); color:#cfeef0; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:12px }
.copy-btn:hover { background: rgba(255,255,255,0.02) }
.bash-code { margin:0; padding:12px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; font-size:13px; color:#dff7f8; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; background:transparent }


/* Mobile tweaks */
@media (max-width: 600px) {
  .sidebar { display: none; }
  .main-content { height: 100vh; }
  body { display: block; }
  .header .title { font-size: 18px }
  .content { padding: 12px }
}

.card {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 10px;
  text-align: left;
}
.endpoints-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-top:12px }
.ep { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:12px; border-radius:8px }
.ep .meta { font-family:monospace; color:#cfeef0 }
.ep .desc { color: rgba(255,255,255,0.7); margin-top:8px }

@media (max-width: 768px) {
  .header { padding: 10px 15px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .header .title { font-size: 18px; }
  .sidebar { width: 200px; }
}