/* The manager's own look: the dark theme tokens in aim_cockpit_manager/theme.py
   (window #0B0D0E, cards #13171A, raised #1C2126, controls #262C32, brand green #05AA3D).
   The header stays dark in both schemes, like the app's window chrome. */

:root {
  --aim-bg0: #0b0d0e;
  --aim-bg1: #13171a;
  --aim-bg2: #1c2126;
  --aim-bg3: #262c32;
  --aim-stroke-weak: #2a3037;
  --aim-stroke-med: #3a424b;
  --aim-text-hi: #f4f6f8;
  --aim-text-med: #b8c0c8;
  --aim-text-low: #6b7682;
  --aim-green: #05aa3d;
  --aim-green-hover: #1bc555;
  --aim-green-press: #038831;
}

/* ---------- light scheme: white pages under the dark header ---------- */
:root,
[data-md-color-scheme="default"] {
  --md-default-bg-color: #ffffff;
  --md-default-bg-color--light: #f4f6f8;
  --md-default-fg-color: #13171a;
  --md-default-fg-color--light: #525c66;
  --md-default-fg-color--lighter: rgba(19, 23, 26, 0.32);
  --md-default-fg-color--lightest: rgba(19, 23, 26, 0.1);
  --md-primary-fg-color: var(--aim-bg1);
  --md-primary-fg-color--light: var(--aim-bg2);
  --md-primary-fg-color--dark: var(--aim-bg0);
  --md-primary-bg-color: var(--aim-text-hi);
  --md-primary-bg-color--light: var(--aim-text-med);
  --md-accent-fg-color: var(--aim-green);
  --md-typeset-a-color: var(--aim-green-press);
  --md-code-bg-color: #f0f2f4;
  --md-code-fg-color: #13171a;
  --md-footer-bg-color: var(--aim-bg1);
  --md-footer-bg-color--dark: var(--aim-bg0);
  --aim-border: #d5dae0;
  --aim-brand: var(--aim-green-press);
}

/* ---------- dark scheme: the app's own palette ---------- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--aim-bg0);
  --md-default-bg-color--light: var(--aim-bg1);
  --md-default-fg-color: var(--aim-text-hi);
  --md-default-fg-color--light: var(--aim-text-med);
  --md-default-fg-color--lighter: rgba(244, 246, 248, 0.32);
  --md-default-fg-color--lightest: rgba(244, 246, 248, 0.1);
  --md-typeset-color: var(--aim-text-hi);
  --md-primary-fg-color: var(--aim-bg1);
  --md-primary-fg-color--light: var(--aim-bg2);
  --md-primary-fg-color--dark: var(--aim-bg0);
  --md-primary-bg-color: var(--aim-text-hi);
  --md-primary-bg-color--light: var(--aim-text-med);
  --md-accent-fg-color: var(--aim-green-hover);
  --md-typeset-a-color: var(--aim-green-hover);
  --md-code-bg-color: var(--aim-bg2);
  --md-code-fg-color: #dfe4e9;
  --md-footer-bg-color: var(--aim-bg1);
  --md-footer-bg-color--dark: #070809;
  --aim-border: var(--aim-stroke-weak);
  --aim-brand: var(--aim-green-hover);
}

/* ---------- header and tabs: dark bar with the green rule ---------- */
.md-header {
  box-shadow: none;
}
.md-tabs {
  border-bottom: 3px solid var(--aim-green);
}
.md-tabs__link {
  color: var(--aim-text-med);
  font-weight: 600;
}
.md-tabs__link--active,
.md-tabs__link:hover {
  color: #ffffff;
}
/* On narrow screens the tab bar is hidden, so the header carries the rule. */
@media screen and (max-width: 76.1875em) {
  .md-header {
    border-bottom: 3px solid var(--aim-green);
  }
}
.md-header__title {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.md-header__button.md-logo img {
  height: 1.6rem;
  width: 1.6rem;
}

/* ---------- the page you are on, and what the pointer is over ---------- */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--aim-brand);
  font-weight: 700;
}
.md-nav__link:hover {
  color: var(--aim-brand);
}
.md-typeset h1 {
  color: var(--md-default-fg-color);
  font-weight: 700;
}
.md-typeset h2 {
  font-weight: 700;
}

/* ---------- tables: the app's card look ---------- */
.md-typeset table:not([class]) {
  border: 1px solid var(--aim-border);
  border-radius: 6px;
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  background-color: var(--aim-bg1);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: var(--aim-bg2);
}

/* ---------- buttons: the app's green call to action ---------- */
.md-typeset .md-button {
  border-radius: 6px;
  color: var(--aim-brand);
  border-color: var(--aim-brand);
}
.md-typeset .md-button--primary {
  background-color: var(--aim-green);
  border-color: var(--aim-green);
  color: #000000;
}
.md-typeset .md-button:focus,
.md-typeset .md-button:hover {
  background-color: var(--aim-green-hover);
  border-color: var(--aim-green-hover);
  color: #000000;
}

/* ---------- screenshots of the (dark) app: a frame so they read as pictures ---------- */
.md-typeset img {
  border: 1px solid var(--aim-border);
  border-radius: 6px;
}