/* ============================================
   atlcli Documentation Theme
   Atlassian Blue color scheme with terminal aesthetic
   ============================================ */

/* ============================================
   CSS Custom Properties
   ============================================ */

:root {
  /* Primary Colors - Atlassian Blue */
  --atlcli-blue: #0052CC;
  --atlcli-blue-light: #4C9AFF;
  --atlcli-blue-dark: #0747A6;

  /* Secondary Colors - Teal accent */
  --atlcli-teal: #00B8D9;
  --atlcli-teal-light: #79E2F2;
  --atlcli-teal-dark: #008DA6;

  /* Code Colors */
  --atlcli-code-bg: #161A1D;
  --atlcli-code-fg: #B6C2CF;
  --atlcli-code-accent: #579DFF;

  /* Spacing */
  --atlcli-radius: 10px;
  --atlcli-radius-lg: 14px;

  /* Typography */
  --atlcli-font-body: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --atlcli-font-heading: "Space Grotesk", system-ui, -apple-system, sans-serif;
}

/* ============================================
   Light Mode
   ============================================ */

[data-md-color-scheme="default"] {
  /* Primary */
  --md-primary-fg-color: var(--atlcli-blue);
  --md-primary-fg-color--light: var(--atlcli-blue-light);
  --md-primary-fg-color--dark: var(--atlcli-blue-dark);
  --md-accent-fg-color: var(--atlcli-teal);

  /* Background - Atlassian neutral */
  --md-default-bg-color: #FAFBFC;
  --md-default-bg-color--light: #FFFFFF;

  /* Typography */
  --md-typeset-color: #172B4D;
  --md-typeset-a-color: var(--atlcli-blue);

  /* Code */
  --md-code-bg-color: #F4F5F7;
  --md-code-fg-color: #172B4D;

  /* Footer */
  --md-footer-bg-color: #10221C;
  --md-footer-bg-color--dark: #0a1512;
}

/* ============================================
   Dark Mode
   ============================================ */

[data-md-color-scheme="slate"] {
  /* Primary */
  --md-primary-fg-color: var(--atlcli-blue);
  --md-primary-fg-color--light: var(--atlcli-blue-light);
  --md-primary-fg-color--dark: var(--atlcli-blue-dark);
  --md-accent-fg-color: var(--atlcli-teal-light);

  /* Background - Atlassian dark neutral */
  --md-default-bg-color: #1D2125;
  --md-default-bg-color--light: #22272B;

  /* Typography */
  --md-typeset-color: #B6C2CF;
  --md-typeset-a-color: var(--atlcli-blue-light);

  /* Code */
  --md-code-bg-color: var(--atlcli-code-bg);
  --md-code-fg-color: var(--atlcli-code-fg);

  /* Footer */
  --md-footer-bg-color: #091814;
  --md-footer-bg-color--dark: #050d0a;
}

/* ============================================
   Typography
   ============================================ */

/* Body text - monospace */
.md-typeset {
  font-family: var(--atlcli-font-body);
  font-size: 0.75rem;
  line-height: 1.7;
}

/* Headings - pixel font */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--atlcli-font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.md-typeset h1 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.md-typeset h2 {
  font-size: 1.35rem;
  margin-top: 2rem;
}

.md-typeset h3 {
  font-size: 1.1rem;
}

/* Navigation font */
.md-nav {
  font-family: var(--atlcli-font-body);
  font-size: 0.75rem;
}

/* Header/tabs font */
.md-header,
.md-tabs {
  font-family: var(--atlcli-font-heading);
}

.md-tabs__link {
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

/* ============================================
   Code Blocks - Terminal Style
   ============================================ */

/* Code block container */
.md-typeset pre {
  border-radius: var(--atlcli-radius);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(76, 154, 255, 0.15);
}

/* Dark mode code blocks - terminal aesthetic */
[data-md-color-scheme="slate"] .md-typeset pre {
  background: var(--atlcli-code-bg);
}

[data-md-color-scheme="slate"] .md-typeset pre code {
  color: var(--atlcli-code-fg);
}

/* Syntax highlighting accents for dark mode */
[data-md-color-scheme="slate"] .md-typeset .highlight .k,
[data-md-color-scheme="slate"] .md-typeset .highlight .kd,
[data-md-color-scheme="slate"] .md-typeset .highlight .kn,
[data-md-color-scheme="slate"] .md-typeset .highlight .kp,
[data-md-color-scheme="slate"] .md-typeset .highlight .kr,
[data-md-color-scheme="slate"] .md-typeset .highlight .kt {
  color: var(--atlcli-code-accent);
}

[data-md-color-scheme="slate"] .md-typeset .highlight .s,
[data-md-color-scheme="slate"] .md-typeset .highlight .s1,
[data-md-color-scheme="slate"] .md-typeset .highlight .s2,
[data-md-color-scheme="slate"] .md-typeset .highlight .sb,
[data-md-color-scheme="slate"] .md-typeset .highlight .sc,
[data-md-color-scheme="slate"] .md-typeset .highlight .sd,
[data-md-color-scheme="slate"] .md-typeset .highlight .se,
[data-md-color-scheme="slate"] .md-typeset .highlight .sh,
[data-md-color-scheme="slate"] .md-typeset .highlight .si,
[data-md-color-scheme="slate"] .md-typeset .highlight .sx,
[data-md-color-scheme="slate"] .md-typeset .highlight .sr,
[data-md-color-scheme="slate"] .md-typeset .highlight .ss {
  color: #FFB86C;
}

[data-md-color-scheme="slate"] .md-typeset .highlight .c,
[data-md-color-scheme="slate"] .md-typeset .highlight .c1,
[data-md-color-scheme="slate"] .md-typeset .highlight .cm,
[data-md-color-scheme="slate"] .md-typeset .highlight .cp,
[data-md-color-scheme="slate"] .md-typeset .highlight .cs {
  color: #6b8a7a;
}

[data-md-color-scheme="slate"] .md-typeset .highlight .nf,
[data-md-color-scheme="slate"] .md-typeset .highlight .fm {
  color: var(--atlcli-teal-light);
}

/* Inline code */
.md-typeset code {
  border-radius: 6px;
  padding: 0.15em 0.4em;
  font-size: 0.9em;
}

[data-md-color-scheme="slate"] .md-typeset code {
  background: rgba(76, 154, 255, 0.1);
  color: var(--atlcli-blue-light);
}

[data-md-color-scheme="default"] .md-typeset code {
  background: rgba(0, 82, 204, 0.08);
  color: var(--atlcli-blue-dark);
}

/* Code copy button */
.md-typeset .md-clipboard {
  color: var(--atlcli-blue-light);
}

.md-typeset .md-clipboard:hover {
  color: var(--atlcli-blue);
}

/* ============================================
   Admonitions / Callouts
   ============================================ */

.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--atlcli-radius);
  border: none;
  border-left: 4px solid;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-family: var(--atlcli-font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Custom admonition colors */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-left-color: var(--atlcli-teal);
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-left-color: var(--atlcli-teal-light);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: var(--atlcli-blue);
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-left-color: #FF4F40;
}

/* ============================================
   Tables
   ============================================ */

.md-typeset table:not([class]) {
  border-radius: var(--atlcli-radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.md-typeset table:not([class]) th {
  font-family: var(--atlcli-font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: rgba(76, 154, 255, 0.1);
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) th {
  background: rgba(0, 82, 204, 0.08);
}

/* ============================================
   Navigation & Header
   ============================================ */

/* Header background */
.md-header {
  background: linear-gradient(135deg,
    var(--md-primary-fg-color) 0%,
    var(--atlcli-blue-dark) 100%
  );
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* Tabs */
.md-tabs {
  background: rgba(0, 0, 0, 0.15);
}

.md-tabs__link--active,
.md-tabs__link:hover {
  color: white;
}

/* Active nav item */
.md-nav__link--active {
  color: var(--atlcli-blue);
  font-weight: 600;
}

/* Nav hover */
.md-nav__link:hover {
  color: var(--atlcli-teal);
}

/* ============================================
   Buttons & Links
   ============================================ */

/* Links */
.md-typeset a {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  transition: all 0.2s ease;
}

.md-typeset a:hover {
  color: var(--atlcli-blue);
  border-bottom-style: solid;
}

/* Primary buttons */
.md-typeset .md-button--primary {
  background: var(--atlcli-blue);
  border-color: var(--atlcli-blue);
  border-radius: var(--atlcli-radius);
  font-family: var(--atlcli-font-heading);
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 0 var(--atlcli-blue-dark);
  transition: all 0.15s ease;
}

.md-typeset .md-button--primary:hover {
  background: var(--atlcli-blue-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--atlcli-blue-dark);
}

/* Secondary buttons */
.md-typeset .md-button {
  border-radius: var(--atlcli-radius);
  font-family: var(--atlcli-font-heading);
}

/* ============================================
   Search
   ============================================ */

.md-search__form {
  border-radius: var(--atlcli-radius);
}

[data-md-color-scheme="slate"] .md-search__form {
  background: rgba(255, 255, 255, 0.08);
}

.md-search__input::placeholder {
  font-family: var(--atlcli-font-body);
}

/* ============================================
   Footer
   ============================================ */

.md-footer {
  font-family: var(--atlcli-font-body);
}

.md-footer-meta {
  background: var(--md-footer-bg-color--dark);
}

/* ============================================
   Content Cards (for homepage/index)
   ============================================ */

.md-typeset .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.md-typeset .card {
  background: var(--md-default-bg-color--light);
  border-radius: var(--atlcli-radius-lg);
  padding: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}

.md-typeset .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--atlcli-teal);
}

.md-typeset .card h3 {
  margin-top: 0;
  color: var(--atlcli-blue);
}

[data-md-color-scheme="slate"] .md-typeset .card {
  border-color: rgba(255, 255, 255, 0.08);
}

/* ============================================
   Scrollbar (dark mode)
   ============================================ */

[data-md-color-scheme="slate"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-track {
  background: var(--md-default-bg-color);
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: rgba(76, 154, 255, 0.25);
  border-radius: 5px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(76, 154, 255, 0.4);
}

/* ============================================
   Misc Enhancements
   ============================================ */

/* Blockquotes */
.md-typeset blockquote {
  border-left: 4px solid var(--atlcli-teal);
  border-radius: 0 var(--atlcli-radius) var(--atlcli-radius) 0;
  background: rgba(0, 184, 138, 0.05);
}

/* Horizontal rules */
.md-typeset hr {
  border-color: rgba(0, 184, 138, 0.2);
}

/* Selection highlight */
::selection {
  background: rgba(0, 82, 204, 0.3);
}

[data-md-color-scheme="slate"] ::selection {
  background: rgba(76, 154, 255, 0.3);
}

/* Keyboard keys */
.md-typeset kbd {
  border-radius: 4px;
  font-family: var(--atlcli-font-body);
  box-shadow: 0 2px 0 var(--atlcli-blue-dark);
}

/* TOC active link */
.md-nav__link--passed,
.md-nav__link:focus {
  color: var(--atlcli-teal);
}