/*
 * EquipNet Help Centre theme.
 * Colours mirror the app's semantic tokens in the root input.css
 * (light :root and .dark). Keep them in sync if the brand changes.
 */

/* ---- Poppins (self-hosted, same files as the app) ---- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/poppins-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/poppins-700.woff2") format("woff2"); }

:root {
  --md-text-font: "Poppins";
  --md-code-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --eqn-radius: 0.625rem;
}

/* ---- Light (app :root) ---- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #224195;
  --md-primary-fg-color--light: #3d85f4;
  --md-primary-fg-color--dark: #182653;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #19a9e0;
  --md-accent-fg-color--transparent: rgba(25, 169, 224, 0.1);

  --md-default-bg-color: #ffffff;
  --md-default-fg-color: #111827;
  --md-default-fg-color--light: #6b7280;
  --md-default-fg-color--lighter: #9ca3af;
  --md-default-fg-color--lightest: #e5e7eb;
  --md-typeset-color: #111827;
  --md-typeset-a-color: #224195;
  --md-code-bg-color: #f3f4f6;
  --md-footer-bg-color: #182653;
  --md-footer-bg-color--dark: #132453;

  --eqn-header-bg: #ffffff;
  --eqn-header-fg: #224195;
  --eqn-tabs-bg: #ffffff;
  --eqn-border: #e5e7eb;
  --eqn-card: #ffffff;
  --eqn-muted: #f3f4f6;
  --eqn-active-bg: #eff6ff;
}

/* ---- Dark (app .dark — warm neutral grays, colour only on actions) ---- */
[data-md-color-scheme="slate"] {
  --md-hue: 40;
  --md-primary-fg-color: #62a7f8;
  --md-primary-fg-color--light: #94c6fc;
  --md-primary-fg-color--dark: #3d85f4;
  --md-primary-bg-color: #0b1b3a;
  --md-accent-fg-color: #41bfef;
  --md-accent-fg-color--transparent: rgba(65, 191, 239, 0.1);

  --md-default-bg-color: #232322;
  --md-default-fg-color: #e8e6e3;
  --md-default-fg-color--light: #9c9a94;
  --md-default-fg-color--lighter: #6f6d68;
  --md-default-fg-color--lightest: #3b3b38;
  --md-typeset-color: #e8e6e3;
  --md-typeset-a-color: #62a7f8;
  --md-code-bg-color: #2a2a28;
  --md-code-fg-color: #e8e6e3;
  --md-footer-bg-color: #1c1c1b;
  --md-footer-bg-color--dark: #161615;
  --md-typeset-table-color: #3b3b38;
  --md-shadow-z1: none;

  --eqn-header-bg: #1c1c1b;
  --eqn-header-fg: #e8e6e3;
  --eqn-tabs-bg: #1c1c1b;
  --eqn-border: #3b3b38;
  --eqn-card: #2a2a28;
  --eqn-muted: #343432;
  --eqn-active-bg: #343432;
}

/* ---- Header & tabs: white/warm bar like the app top bar ---- */
.md-header {
  background-color: var(--eqn-header-bg);
  color: var(--eqn-header-fg);
  border-bottom: 1px solid var(--eqn-border);
  box-shadow: none;
}
.md-header[data-md-state="shadow"],
.md-header--shadow { box-shadow: none; }
.md-tabs {
  background-color: var(--eqn-tabs-bg);
  color: var(--md-default-fg-color--light);
  border-bottom: 1px solid var(--eqn-border);
}
.md-tabs__link { font-weight: 500; opacity: 1; }
.md-tabs__item--active .md-tabs__link { color: var(--md-primary-fg-color); }
.md-tabs__link:hover { color: var(--md-accent-fg-color); }
.md-header__title { font-weight: 600; }

.md-search__form { background-color: var(--eqn-muted); border-radius: var(--eqn-radius); }
.md-search__form:hover { background-color: var(--eqn-muted); }
.md-search__input { color: var(--md-default-fg-color); }
.md-search__input::placeholder,
.md-search__icon { color: var(--md-default-fg-color--light); }

/* ---- Logo: swap light / dark emblem ---- */
.md-header__button.md-logo img,
.md-nav__button.md-logo img { height: 1.8rem; width: auto; }
.eqn-logo--dark { display: none !important; }
[data-md-color-scheme="slate"] .eqn-logo--light { display: none !important; }
[data-md-color-scheme="slate"] .eqn-logo--dark { display: inline-block !important; }

/* ---- Sidebar nav ---- */
.md-nav__link--active { font-weight: 600; }
.md-nav--primary .md-nav__title { background-color: transparent; }

/* ---- Content ---- */
.md-typeset h1 { font-weight: 700; color: var(--md-default-fg-color); }
.md-typeset h2, .md-typeset h3 { font-weight: 600; }
.md-typeset a:hover { color: var(--md-accent-fg-color); }

.md-typeset .admonition,
.md-typeset details,
.md-typeset pre > code,
.md-typeset .tabbed-set,
.md-typeset table:not([class]) {
  border-radius: var(--eqn-radius);
}
.md-typeset table:not([class]) {
  border: 1px solid var(--eqn-border);
  box-shadow: none;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background-color: var(--eqn-muted);
  font-weight: 600;
}
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background-color: var(--eqn-card);
}

/* Buttons: match the app's primary / outline buttons */
.md-typeset .md-button {
  border-radius: var(--eqn-radius);
  font-weight: 600;
  padding: 0.55em 1.4em;
}
.md-typeset .md-button--primary {
  background-color: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}
.md-typeset .md-button:focus,
.md-typeset .md-button:hover {
  background-color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  color: #ffffff;
}

/* Grid cards: app card style (bg-card, rounded-lg, border, shadow-sm) */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  background-color: var(--eqn-card);
  border: 1px solid var(--eqn-border);
  border-radius: var(--eqn-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--md-primary-fg-color--light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards .lg { color: var(--md-primary-fg-color); }

/* "Who can do this" role chips */
.md-typeset .role {
  display: inline-block;
  padding: 0.1em 0.7em;
  margin: 0 0.25em 0.25em 0;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  background-color: var(--eqn-active-bg);
  color: var(--md-primary-fg-color);
  border: 1px solid var(--eqn-border);
  white-space: nowrap;
}

/* Keyboard-like UI labels, e.g. ++"Save"++ */
.md-typeset kbd { font-family: var(--md-text-font-family); }

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