/* ==========================================================================
   Apta Brand Guide — Button Components
   Source: brand-guide/Colors.pdf, Typography.pdf
   ========================================================================== */

/* ---------- Primary Button ---------- */
/* Brand: white background, black text, clean minimal style */

[data-md-color-scheme="slate"] .md-typeset .md-button--primary,
[data-md-color-scheme="slate"] .md-typeset .md-button--primary:hover {
  background-color: var(--apta-brand-white);
  color: var(--apta-brand-black);
  border: 2px solid var(--apta-brand-white);
  border-radius: 4px;
  padding: 0.625rem 1.5rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.01em;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  border-bottom: 2px solid var(--apta-brand-white);
}

[data-md-color-scheme="slate"] .md-typeset .md-button--primary:hover,
[data-md-color-scheme="slate"] .md-typeset .md-button--primary:focus {
  background-color: var(--apta-neutral-lightest);
  border-color: var(--apta-neutral-lightest);
  color: var(--apta-brand-black);
}

/* ---------- Default / Secondary Button ---------- */
/* Brand: outlined style, white border on dark background */

[data-md-color-scheme="slate"] .md-typeset .md-button {
  color: var(--apta-brand-white);
  border: 2px solid var(--apta-neutral-light);
  border-radius: 4px;
  padding: 0.625rem 1.5rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.01em;
  background-color: transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

[data-md-color-scheme="slate"] .md-typeset .md-button:hover,
[data-md-color-scheme="slate"] .md-typeset .md-button:focus {
  background-color: var(--apta-neutral-darker);
  border-color: var(--apta-brand-white);
  color: var(--apta-brand-white);
}

/* ---------- Copy-to-clipboard button ---------- */

[data-md-color-scheme="slate"] .md-clipboard {
  color: var(--apta-neutral-light);
  transition: color 0.2s;
}

[data-md-color-scheme="slate"] .md-clipboard:hover {
  color: var(--apta-brand-white);
}

/* ---------- Back-to-top button ---------- */

[data-md-color-scheme="slate"] .md-top {
  background-color: var(--apta-neutral-darker);
  color: var(--apta-neutral-lightest);
  border-radius: 4px;
  transition: background-color 0.2s;
}

[data-md-color-scheme="slate"] .md-top:hover {
  background-color: var(--apta-neutral-dark);
}

/* ---------- Search submit / reset buttons ---------- */

[data-md-color-scheme="slate"] .md-search__icon {
  color: var(--apta-neutral-light);
  transition: color 0.2s;
}

[data-md-color-scheme="slate"] .md-search__icon:hover {
  color: var(--apta-brand-white);
}

/* ---------- Header / Nav action buttons (source, theme toggle) ---------- */

[data-md-color-scheme="slate"] .md-header__button {
  color: var(--apta-neutral-lighter);
  transition: color 0.2s;
}

[data-md-color-scheme="slate"] .md-header__button:hover {
  color: var(--apta-brand-white);
}

/* ---------- Tag / label chips ---------- */

[data-md-color-scheme="slate"] .md-typeset .md-tag {
  background-color: var(--apta-neutral-darker);
  color: var(--apta-neutral-lightest);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
}

/* ==========================================================================
   Apta Brand Guide — Cards & Callouts (Admonitions)
   Source: brand-guide/Colors.pdf
   ========================================================================== */

/* ---------- Admonitions (base) ---------- */

[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background-color: var(--apta-neutral-darker);
  border: 1px solid var(--apta-neutral-dark);
  border-left: 4px solid var(--apta-neutral-light);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: var(--apta-neutral-lightest);
}

[data-md-color-scheme="slate"] .md-typeset .admonition .admonition-title,
[data-md-color-scheme="slate"] .md-typeset details summary {
  background-color: var(--apta-neutral-dark);
  border-bottom: 1px solid var(--apta-neutral-dark);
  color: var(--apta-brand-white);
  font-weight: 600;
}

/* ---------- Note ---------- */

[data-md-color-scheme="slate"] .md-typeset .admonition.note,
[data-md-color-scheme="slate"] .md-typeset details.note {
  border-left-color: var(--apta-neutral-lighter);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.note .admonition-title,
[data-md-color-scheme="slate"] .md-typeset details.note summary {
  background-color: rgba(204, 204, 204, 0.1);
}

/* ---------- Tip / Hint / Important ---------- */

[data-md-color-scheme="slate"] .md-typeset .admonition.tip,
[data-md-color-scheme="slate"] .md-typeset .admonition.hint,
[data-md-color-scheme="slate"] .md-typeset .admonition.important,
[data-md-color-scheme="slate"] .md-typeset details.tip,
[data-md-color-scheme="slate"] .md-typeset details.hint,
[data-md-color-scheme="slate"] .md-typeset details.important {
  border-left-color: var(--apta-success-green);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.tip .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .admonition.hint .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .admonition.important .admonition-title,
[data-md-color-scheme="slate"] .md-typeset details.tip summary,
[data-md-color-scheme="slate"] .md-typeset details.hint summary,
[data-md-color-scheme="slate"] .md-typeset details.important summary {
  background-color: rgba(2, 122, 72, 0.1);
}

/* ---------- Warning / Caution / Attention ---------- */

[data-md-color-scheme="slate"] .md-typeset .admonition.warning,
[data-md-color-scheme="slate"] .md-typeset .admonition.caution,
[data-md-color-scheme="slate"] .md-typeset .admonition.attention,
[data-md-color-scheme="slate"] .md-typeset details.warning,
[data-md-color-scheme="slate"] .md-typeset details.caution,
[data-md-color-scheme="slate"] .md-typeset details.attention {
  border-left-color: #E8A317;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.warning .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .admonition.caution .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .admonition.attention .admonition-title,
[data-md-color-scheme="slate"] .md-typeset details.warning summary,
[data-md-color-scheme="slate"] .md-typeset details.caution summary,
[data-md-color-scheme="slate"] .md-typeset details.attention summary {
  background-color: rgba(232, 163, 23, 0.1);
}

/* ---------- Danger / Error / Bug ---------- */

[data-md-color-scheme="slate"] .md-typeset .admonition.danger,
[data-md-color-scheme="slate"] .md-typeset .admonition.error,
[data-md-color-scheme="slate"] .md-typeset .admonition.bug,
[data-md-color-scheme="slate"] .md-typeset details.danger,
[data-md-color-scheme="slate"] .md-typeset details.error,
[data-md-color-scheme="slate"] .md-typeset details.bug {
  border-left-color: var(--apta-error-red);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.danger .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .admonition.error .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .admonition.bug .admonition-title,
[data-md-color-scheme="slate"] .md-typeset details.danger summary,
[data-md-color-scheme="slate"] .md-typeset details.error summary,
[data-md-color-scheme="slate"] .md-typeset details.bug summary {
  background-color: rgba(180, 35, 24, 0.1);
}

/* ---------- Admonition links — no underline ---------- */

[data-md-color-scheme="slate"] .md-typeset .admonition a,
[data-md-color-scheme="slate"] .md-typeset details a {
  border-bottom: 1px solid var(--apta-neutral-dark);
}

/* ---------- Cards ---------- */

[data-md-color-scheme="slate"] .md-typeset .md-card {
  background-color: var(--apta-neutral-darker);
  border: 1px solid var(--apta-neutral-dark);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: var(--apta-neutral-lightest);
  transition: box-shadow 0.2s, border-color 0.2s;
}

[data-md-color-scheme="slate"] .md-typeset .md-card:hover {
  border-color: var(--apta-neutral-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Mobile Responsiveness (320px–414px)
   ========================================================================== */

/* ---------- Tables: horizontal scroll on mobile ---------- */

@media screen and (max-width: 768px) {
  [data-md-color-scheme="slate"] .md-typeset table:not([class]) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ---------- Code blocks: prevent overflow ---------- */

[data-md-color-scheme="slate"] .md-typeset pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 414px) {
  [data-md-color-scheme="slate"] .md-typeset code,
  [data-md-color-scheme="slate"] .md-typeset pre {
    font-size: 0.75rem;
  }
}

/* ---------- Buttons: reduce padding on mobile ---------- */

@media screen and (max-width: 414px) {
  [data-md-color-scheme="slate"] .md-typeset .md-button,
  [data-md-color-scheme="slate"] .md-typeset .md-button--primary {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }
}

/* ---------- Admonitions: prevent content overflow on mobile ---------- */

@media screen and (max-width: 414px) {
  [data-md-color-scheme="slate"] .md-typeset .admonition,
  [data-md-color-scheme="slate"] .md-typeset details {
    overflow-x: auto;
  }
}