/* ==========================================================================
   OmniPalm Documentation Styles
   Technical documentation and reference styling
   ========================================================================== */

/* --------------------------------------------------------------------------
   Documentation Layout
   -------------------------------------------------------------------------- */
.docs-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

.docs-layout--with-toc {
  grid-template-columns: 260px 1fr 220px;
}

/* --------------------------------------------------------------------------
   Documentation Sidebar
   -------------------------------------------------------------------------- */
.docs-sidebar {
  position: sticky;
  top: calc(64px + var(--space-8));
  height: fit-content;
  max-height: calc(100vh - 64px - var(--space-16));
  overflow-y: auto;
  padding-right: var(--space-4);
}

.docs-sidebar::-webkit-scrollbar {
  width: 4px;
}

.docs-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.docs-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-700);
  border-radius: 2px;
}

.docs-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.docs-nav__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.docs-nav__title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
}

.docs-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.docs-nav__link:hover {
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
}

.docs-nav__link--active {
  color: var(--color-cyan);
  background-color: rgba(0, 229, 255, 0.1);
}

.docs-nav__link svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.docs-nav__link--nested {
  padding-left: var(--space-6);
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   Documentation Content
   -------------------------------------------------------------------------- */
.docs-content {
  min-width: 0;
  max-width: 800px;
}

.docs-content > *:first-child {
  margin-top: 0;
}

/* Typography */
.docs-content h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.docs-content h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-muted);
}

.docs-content h3 {
  font-size: var(--text-xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.docs-content h4 {
  font-size: var(--text-lg);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.docs-content h2:first-child,
.docs-content h3:first-child,
.docs-content h4:first-child {
  margin-top: 0;
}

/* Anchor links */
.docs-content h2,
.docs-content h3,
.docs-content h4 {
  position: relative;
}

.docs-content .anchor-link {
  position: absolute;
  left: -1.5em;
  padding-right: 0.5em;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.docs-content h2:hover .anchor-link,
.docs-content h3:hover .anchor-link,
.docs-content h4:hover .anchor-link {
  opacity: 1;
}

.docs-content .anchor-link:hover {
  color: var(--color-cyan);
}

/* Paragraphs */
.docs-content p {
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

/* Lists */
.docs-content ul,
.docs-content ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.docs-content ul {
  list-style-type: disc;
}

.docs-content ol {
  list-style-type: decimal;
}

.docs-content li {
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.docs-content li::marker {
  color: var(--text-muted);
}

/* Nested lists */
.docs-content ul ul,
.docs-content ol ol,
.docs-content ul ol,
.docs-content ol ul {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

/* Links */
.docs-content a {
  color: var(--color-cyan);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color var(--transition-fast);
}

.docs-content a:hover {
  text-decoration-color: var(--color-cyan);
}

/* Inline code */
.docs-content code:not(pre code) {
  padding: 0.15em 0.4em;
  font-size: 0.875em;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  color: var(--color-cyan);
  font-family: var(--font-mono);
}

/* Code blocks */
.docs-content pre {
  margin-bottom: var(--space-4);
}

/* Tables */
.docs-content table {
  width: 100%;
  margin-bottom: var(--space-6);
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.docs-content th,
.docs-content td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border: 1px solid var(--border-default);
}

.docs-content th {
  background-color: var(--bg-secondary);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.docs-content td {
  color: var(--text-secondary);
}

.docs-content tr:nth-child(even) td {
  background-color: var(--bg-secondary);
}

/* Blockquotes */
.docs-content blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-5);
  background-color: var(--bg-secondary);
  border-left: 3px solid var(--color-cyan);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

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

/* Horizontal rules */
.docs-content hr {
  margin: var(--space-8) 0;
  border: none;
  height: 1px;
  background-color: var(--border-default);
}

/* Images */
.docs-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  margin: var(--space-4) 0;
}

/* --------------------------------------------------------------------------
   Table of Contents (Right Sidebar)
   -------------------------------------------------------------------------- */
.docs-toc {
  position: sticky;
  top: calc(64px + var(--space-8));
  height: fit-content;
  max-height: calc(100vh - 64px - var(--space-16));
  overflow-y: auto;
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-muted);
}

.docs-toc__title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}

.docs-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.docs-toc__link {
  display: block;
  padding: var(--space-1) 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.docs-toc__link:hover {
  color: var(--text-primary);
}

.docs-toc__link--active {
  color: var(--color-cyan);
}

.docs-toc__link--h3 {
  padding-left: var(--space-3);
}

.docs-toc__link--h4 {
  padding-left: var(--space-6);
}

/* --------------------------------------------------------------------------
   API Reference Components
   -------------------------------------------------------------------------- */
.api-endpoint {
  margin-bottom: var(--space-8);
  padding: var(--space-5);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.api-endpoint__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.api-endpoint__method {
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.api-endpoint__method--get {
  background-color: rgba(63, 185, 80, 0.15);
  color: var(--color-success);
}

.api-endpoint__method--post {
  background-color: rgba(88, 166, 255, 0.15);
  color: var(--color-info);
}

.api-endpoint__method--put {
  background-color: rgba(210, 153, 34, 0.15);
  color: var(--color-warning);
}

.api-endpoint__method--delete {
  background-color: rgba(248, 81, 73, 0.15);
  color: var(--color-error);
}

.api-endpoint__path {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.api-endpoint__description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

/* Parameters Table */
.api-params {
  margin-top: var(--space-4);
}

.api-params__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.api-params__table {
  width: 100%;
  font-size: var(--text-sm);
}

.api-params__table th,
.api-params__table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border-muted);
}

.api-params__table th {
  font-weight: var(--font-medium);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--border-default);
}

.api-params__name {
  font-family: var(--font-mono);
  color: var(--color-cyan);
}

.api-params__type {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-orange);
}

.api-params__required {
  font-size: var(--text-xs);
  color: var(--color-error);
}

.api-params__optional {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   CLI Reference
   -------------------------------------------------------------------------- */
.cli-reference {
  margin-bottom: var(--space-6);
}

.cli-reference__command {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.cli-reference__command-name {
  color: var(--color-cyan);
  font-weight: var(--font-semibold);
}

.cli-reference__command-args {
  color: var(--text-secondary);
}

.cli-reference__command-args .required {
  color: var(--color-orange);
}

.cli-reference__command-args .optional {
  color: var(--text-muted);
}

.cli-reference__description {
  padding: var(--space-4);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.cli-reference__description p {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.cli-reference__description p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Configuration Reference
   -------------------------------------------------------------------------- */
.config-option {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-muted);
}

.config-option:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.config-option__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.config-option__name {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-cyan);
}

.config-option__type {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  color: var(--color-orange);
}

.config-option__default {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.config-option__description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   Callouts / Notes
   -------------------------------------------------------------------------- */
.docs-callout {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  border-radius: var(--radius-md);
  border: 1px solid;
}

.docs-callout__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.docs-callout__content {
  flex: 1;
  font-size: var(--text-sm);
}

.docs-callout__content p {
  margin-bottom: var(--space-2);
}

.docs-callout__content p:last-child {
  margin-bottom: 0;
}

.docs-callout__content code {
  background-color: rgba(0, 0, 0, 0.2);
}

.docs-callout--note {
  background-color: rgba(88, 166, 255, 0.1);
  border-color: rgba(88, 166, 255, 0.3);
}

.docs-callout--note .docs-callout__icon {
  color: var(--color-info);
}

.docs-callout--warning {
  background-color: rgba(210, 153, 34, 0.1);
  border-color: rgba(210, 153, 34, 0.3);
}

.docs-callout--warning .docs-callout__icon {
  color: var(--color-warning);
}

.docs-callout--danger {
  background-color: rgba(248, 81, 73, 0.1);
  border-color: rgba(248, 81, 73, 0.3);
}

.docs-callout--danger .docs-callout__icon {
  color: var(--color-error);
}

.docs-callout--tip {
  background-color: rgba(63, 185, 80, 0.1);
  border-color: rgba(63, 185, 80, 0.3);
}

.docs-callout--tip .docs-callout__icon {
  color: var(--color-success);
}

/* --------------------------------------------------------------------------
   Version Badge
   -------------------------------------------------------------------------- */
.version-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.version-badge__label {
  color: var(--text-muted);
}

.version-badge__value {
  color: var(--color-cyan);
  font-weight: var(--font-semibold);
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */
.docs-search {
  margin-bottom: var(--space-6);
}

.docs-search__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  padding-left: var(--space-10);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.docs-search__input:focus {
  outline: none;
  border-color: var(--color-cyan);
}

.docs-search__input::placeholder {
  color: var(--text-muted);
}

.docs-search__wrapper {
  position: relative;
}

.docs-search__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.docs-search__icon svg {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   Prev/Next Navigation
   -------------------------------------------------------------------------- */
.docs-pagination {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-default);
}

.docs-pagination__link {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.docs-pagination__link:hover {
  border-color: var(--color-cyan);
  background-color: var(--bg-tertiary);
}

.docs-pagination__link--next {
  text-align: right;
}

.docs-pagination__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.docs-pagination__title {
  font-weight: var(--font-medium);
  color: var(--color-cyan);
}

/* --------------------------------------------------------------------------
   Feedback
   -------------------------------------------------------------------------- */
.docs-feedback {
  margin-top: var(--space-12);
  padding: var(--space-6);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  text-align: center;
}

.docs-feedback__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
}

.docs-feedback__description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.docs-feedback__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}