/* Optra Docs – Custom styles */
/* Tailwind is loaded via CDN; this file supplements it */

/* Brand and highlight palette (hex-based for both themes) */
:root {
  --brand-rgb: 40 111 38;      /* #286F26 */
  --brand-hex: #286F26;
  --highlight-bg: #e9f3e9;
  --highlight-border: #9fbe9e;
  --highlight-bg-strong: #e3f0e2;
  scroll-behavior: smooth;
}
.dark {
  --brand-rgb: 163 230 53;     /* #A3E635 */
  --brand-hex: #A3E635;
  --highlight-bg: #1f2a1b;
  --highlight-border: #4d6b3d;
  --highlight-bg-strong: #243122;
}

/* Logo chevrons adapt to brand color */
.logo-chevron {
  fill: #286F26;
}
.dark .logo-chevron {
  fill: #A3E635;
}

/* Logo stroke chevrons */
.logo-chevron-stroke {
  stroke: #286F26;
}
.dark .logo-chevron-stroke {
  stroke: #A3E635;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #d4d4d8;
  border-radius: 3px;
}
.dark ::-webkit-scrollbar-thumb {
  background: #3f3f46;
}

/* Details/summary reset */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* Prose styles for doc content */
.prose h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: inherit;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.prose h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: inherit;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.prose p {
  margin-bottom: 1rem;
  line-height: 1.75;
  color: #52525b;
}
.dark .prose p {
  color: #a1a1aa;
}
.prose ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  space-y: 0.25rem;
}
.prose ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.prose li {
  line-height: 1.75;
  color: #52525b;
  margin-bottom: 0.25rem;
}
.dark .prose li {
  color: #a1a1aa;
}
.prose strong {
  font-weight: 600;
  color: #18181b;
}
.dark .prose strong {
  color: #f4f4f5;
}
.prose code {
  font-size: 0.875em;
  background: rgba(40, 111, 38, 0.08);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: #286F26;
  border: 1px solid rgba(40, 111, 38, 0.15);
}
.dark .prose code {
  background: transparent;
  color: #A3E635;
  border: 0;
}
.prose pre {
  background: linear-gradient(135deg, rgba(40, 111, 38, 0.08) 0%, rgba(40, 111, 38, 0.04) 100%);
  border: 1px solid rgba(40, 111, 38, 0.2);
  color: #18181b;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  overflow-x: auto;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
.prose pre code {
  background: transparent;
  color: #18181b;
  border: 0;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}
.dark .prose pre {
  background: linear-gradient(135deg, rgba(163, 230, 53, 0.14) 0%, rgba(163, 230, 53, 0.08) 100%);
  border: 1px solid #A3E635;
  color: #ffffff;
}
.dark .prose pre code {
  color: #ffffff;
  border: 0;
}
.dark .prose pre code,
.dark .prose pre code *,
.dark .prose pre .highlighter-rouge,
.dark .prose pre .highlighter-rouge * {
  color: #ffffff !important;
}
.prose a {
  color: rgb(var(--brand-rgb));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover {
  color: rgb(var(--brand-rgb) / 0.75);
}

/* Table styling for doc content */
.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.25rem 0;
  overflow: hidden;
  border: 1px solid #e4e4e7;
  border-left-width: 4px;
  border-left-color: rgb(var(--brand-rgb));
  border-radius: 0.9rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.dark .prose table {
  border-color: #3f3f46;
  border-left-color: rgb(var(--brand-rgb));
  background: #09090b;
  box-shadow: none;
}
.prose thead {
  background: #f8fafc;
}
.dark .prose thead {
  background: #18181b;
}
.prose th,
.prose td {
  padding: 0.875rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e4e4e7;
  color: #52525b;
}
.dark .prose th,
.dark .prose td {
  border-bottom-color: #27272a;
  color: #a1a1aa;
}
.prose th {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #18181b;
}
.dark .prose th {
  color: #f4f4f5;
}
.prose tbody tr:last-child td {
  border-bottom: 0;
}
.prose tbody tr:nth-child(even) {
  background: #fafafa;
}
.dark .prose tbody tr:nth-child(even) {
  background: #111113;
}
.prose tbody tr:hover {
  background: #f4f4f5;
}
.dark .prose tbody tr:hover {
  background: #1f1f23;
}

.prose td strong {
  color: #18181b;
}
.dark .prose td strong {
  color: #f4f4f5;
}

/* Card image placeholder (checkerboard) */
.img-placeholder {
  background-image: repeating-conic-gradient(#e4e4e7 0% 25%, #f4f4f5 0% 50%);
  background-size: 16px 16px;
}
.dark .img-placeholder {
  background-image: repeating-conic-gradient(#27272a 0% 25%, #3f3f46 0% 50%);
  background-size: 16px 16px;
}

/* Mermaid diagrams */
.prose pre.mermaid {
  background: var(--highlight-bg);
  border: 1px solid var(--highlight-border);
  border-radius: 0.75rem;
  padding: 1rem;
}

.dark .prose pre.mermaid {
  background: var(--highlight-bg);
  border-color: var(--highlight-border);
}

.prose pre.mermaid svg {
  background: transparent !important;
}

/* Force node fill/stroke to match the mermaid.initialize() theme colors
   (mainBkg/primaryBorderColor) so an outer site stylesheet can't override
   them. --highlight-bg/--highlight-border already flip for .dark above. */
.prose pre.mermaid .node rect,
.prose pre.mermaid .node polygon,
.prose pre.mermaid .node circle {
  fill: var(--highlight-bg) !important;
  stroke: var(--highlight-border) !important;
}

/* Active nav indicator */
.nav-active {
  border-bottom: 2px solid rgb(var(--brand-rgb));
  color: rgb(var(--brand-rgb));
}

/* Tab underline animation */
.tab-bar button {
  position: relative;
}
.tab-bar button.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgb(var(--brand-rgb));
  border-radius: 1px;
}

/* Access note callouts use brand-green styling across docs */
.access-note {
  border: 1px solid var(--highlight-border);
  background: var(--highlight-bg-strong);
}
.dark .access-note {
  border-color: var(--highlight-border);
  background: var(--highlight-bg-strong);
}
.access-note-text {
  color: rgb(var(--brand-rgb));
}

/* Ensure left accent borders stay brand-colored in both themes */
.border-l-brand {
  border-left-color: rgb(var(--brand-rgb)) !important;
}

button.transformation-card,
button.selectable-card {
  appearance: none;
  cursor: pointer;
}

.transformation-card:hover,
.selectable-card:hover {
  border-color: rgb(var(--brand-rgb)) !important;
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb), 0.3);
}

.transformation-card.is-selected,
.transformation-card[aria-expanded="true"],
.selectable-card.is-selected,
.selectable-card[aria-selected="true"] {
  border-color: rgb(var(--brand-rgb)) !important;
  background: rgba(var(--brand-rgb), 0.06);
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb), 0.35);
}

.dark .transformation-card.is-selected,
.dark .transformation-card[aria-expanded="true"],
.dark .selectable-card.is-selected,
.dark .selectable-card[aria-selected="true"] {
  background: rgba(var(--brand-rgb), 0.10);
}

.transformation-card:focus-visible,
.selectable-card:focus-visible {
  outline: none;
  border-color: rgb(var(--brand-rgb)) !important;
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb), 0.45);
}
.dark .access-note-text {
  color: rgb(var(--brand-rgb));
}