/* ComplianceOS - Obsidian Prism Theme for MkDocs */
/* ================================================
   Color palette based on Obsidian Prism:
   sapphire #3b82f6  - Primary, links, info
   amethyst #8b5cf6  - Accent, highlights
   ruby     #ef4444  - Danger, critical
   emerald  #10b981  - Success, tips
   topaz    #f59e0b  - Warning, attention
   bg       #0f0f23  - Deep background
   surface  #1a1a2e  - Card/panel surface
   ================================================ */

/* --- CSS Variables (Obsidian Prism Palette) --- */
:root {
  --cos-sapphire: #3b82f6;
  --cos-sapphire-dim: #2563eb;
  --cos-sapphire-light: #60a5fa;
  --cos-amethyst: #8b5cf6;
  --cos-amethyst-dim: #7c3aed;
  --cos-amethyst-light: #a78bfa;
  --cos-ruby: #ef4444;
  --cos-ruby-dim: #dc2626;
  --cos-ruby-light: #f87171;
  --cos-emerald: #10b981;
  --cos-emerald-dim: #059669;
  --cos-emerald-light: #34d399;
  --cos-topaz: #f59e0b;
  --cos-topaz-dim: #d97706;
  --cos-topaz-light: #fbbf24;
  --cos-bg: #0f0f23;
  --cos-surface: #1a1a2e;
  --cos-surface-hover: #232340;
  --cos-text: #e2e8f0;
  --cos-text-dim: #94a3b8;
  --cos-border: #2d2d4a;
}

/* --- Scheme Overrides (Material slate) --- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--cos-sapphire);
  --md-primary-fg-color--light: var(--cos-sapphire-light);
  --md-primary-fg-color--dark: var(--cos-sapphire-dim);
  --md-accent-fg-color: var(--cos-amethyst);
  --md-accent-fg-color--transparent: rgba(139, 92, 246, 0.12);
  --md-default-bg-color: var(--cos-bg);
  --md-default-bg-color--light: var(--cos-surface);
  --md-code-bg-color: var(--cos-surface);
  --md-code-hl-color: rgba(59, 130, 246, 0.15);
  --md-typeset-a-color: var(--cos-sapphire-light);
}

/* --- Header & Navigation --- */
.md-header {
  background-color: var(--cos-bg);
  border-bottom: 1px solid var(--cos-border);
}

.md-tabs {
  background-color: var(--cos-surface);
  border-bottom: 1px solid var(--cos-border);
}

.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--cos-sapphire-light);
}

.md-nav__link:hover,
.md-nav__link--active {
  color: var(--cos-sapphire-light);
}

.md-nav__link--active {
  font-weight: 700;
}

/* --- Admonition: Tip (emerald) --- */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--cos-emerald);
}
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: var(--cos-emerald);
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: var(--cos-emerald);
}

/* --- Admonition: Warning (topaz) --- */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--cos-topaz);
}
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: rgba(245, 158, 11, 0.1);
  border-color: var(--cos-topaz);
}
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: var(--cos-topaz);
}

/* --- Admonition: Danger (ruby) --- */
.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: var(--cos-ruby);
}
.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: var(--cos-ruby);
}
.md-typeset .danger > .admonition-title::before,
.md-typeset .danger > summary::before {
  background-color: var(--cos-ruby);
}

/* --- Admonition: Info (sapphire) --- */
.md-typeset .admonition.info,
.md-typeset details.info {
  border-color: var(--cos-sapphire);
}
.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: var(--cos-sapphire);
}
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before {
  background-color: var(--cos-sapphire);
}

/* --- Admonition: Note (amethyst) --- */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--cos-amethyst);
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(139, 92, 246, 0.1);
  border-color: var(--cos-amethyst);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--cos-amethyst);
}

/* --- Screenshot Container --- */
.screenshot {
  display: block;
  max-width: 800px;
  margin: 1.5rem auto;
  border: 1px solid var(--cos-border);
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(59, 130, 246, 0.08);
  overflow: hidden;
  background: var(--cos-surface);
}

.screenshot img {
  display: block;
  width: 100%;
  height: auto;
}

.screenshot figcaption {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: var(--cos-text-dim);
  text-align: center;
  border-top: 1px solid var(--cos-border);
}

/* --- Video Container (responsive 16:9) --- */
.video-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 1.5rem auto;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--cos-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  background: var(--cos-bg);
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Table Styling --- */
.md-typeset table:not([class]) {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
}

.md-typeset table:not([class]) thead th {
  background-color: var(--cos-sapphire-dim);
  color: #fff;
  font-weight: 600;
  padding: 0.65rem 0.9rem;
  text-align: left;
  border-bottom: 2px solid var(--cos-sapphire);
}

.md-typeset table:not([class]) tbody tr:nth-child(even) {
  background-color: rgba(26, 26, 46, 0.5);
}

.md-typeset table:not([class]) tbody tr:nth-child(odd) {
  background-color: rgba(15, 15, 35, 0.3);
}

.md-typeset table:not([class]) tbody tr:hover {
  background-color: var(--cos-surface-hover);
}

.md-typeset table:not([class]) td {
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--cos-border);
}

/* --- Code Blocks (Obsidian Prism tones) --- */
.md-typeset code {
  background-color: var(--cos-surface);
  border: 1px solid var(--cos-border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.85em;
  color: var(--cos-amethyst-light);
}

.md-typeset pre > code {
  border: none;
  padding: 0;
  color: var(--cos-text);
}

.md-typeset pre {
  background-color: var(--cos-surface);
  border: 1px solid var(--cos-border);
  border-radius: 6px;
}

.highlight .hll {
  background-color: rgba(59, 130, 246, 0.12);
}

/* --- Badge Styling --- */
.badge {
  display: inline-block;
  padding: 0.15em 0.55em;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}

.badge--compliant {
  background-color: rgba(16, 185, 129, 0.15);
  color: var(--cos-emerald-light);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge--major-nc {
  background-color: rgba(239, 68, 68, 0.15);
  color: var(--cos-ruby-light);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge--minor-nc {
  background-color: rgba(245, 158, 11, 0.15);
  color: var(--cos-topaz-light);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge--ofi {
  background-color: rgba(139, 92, 246, 0.15);
  color: var(--cos-amethyst-light);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.badge--info {
  background-color: rgba(59, 130, 246, 0.15);
  color: var(--cos-sapphire-light);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

/* --- Keyboard Shortcut Badge (.kbd) --- */
.kbd,
.keys kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.15em 0.45em;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--cos-text);
  background: linear-gradient(180deg, var(--cos-surface-hover) 0%, var(--cos-surface) 100%);
  border: 1px solid var(--cos-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  vertical-align: baseline;
  white-space: nowrap;
}

.kbd + .kbd,
.keys kbd + kbd {
  margin-left: 0.2em;
}

/* --- Feature Grid (Landing Page) --- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.feature-card {
  background: var(--cos-surface);
  border: 1px solid var(--cos-border);
  border-radius: 8px;
  padding: 1.5rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  border-color: var(--cos-sapphire);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.12);
}

.feature-card h3 {
  margin-top: 0;
  font-size: 1rem;
  color: var(--cos-sapphire-light);
}

.feature-card p {
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--cos-text-dim);
}

/* --- Footer --- */
.md-footer {
  background-color: var(--cos-bg);
  border-top: 1px solid var(--cos-border);
}

/* --- Scrollbar (Webkit) --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--cos-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--cos-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cos-sapphire-dim);
}