/* SIMELCI — instrument panel
 *
 * Direction: a surveillance instrument, not a Material dashboard. Cool paper instead of
 * grey mud, a navy spine with one green edge, hairline rules where DHIS2 uses drop shadows,
 * and tabular figures everywhere because this screen is four-fifths digits.
 *
 * Served at /api/files/style, injected into every app by AppHtmlTemplate.
 * Reaches: page chrome, surfaces, and the ~89 css-module styles that read var(--colors-*).
 * Does not reach: @dhis2/ui component internals (719 inlined hex values via styled-jsx).
 */

:root {
  --sim-ink: #0b1b2b;
  --sim-spine: #1f4e8c;
  --sim-spine-deep: #16385f;
  --sim-paper: #f4f7fa;
  --sim-rule: #d8e1ea;
  --sim-signal: #3fae5a;
  --sim-flag: #c77700;
}

/* --- Token layer -----------------------------------------------------------
 * @dhis2/ui declares its tokens on `html`; `:root` is one specificity class
 * higher, so these win regardless of injection order. Retargeting the tokens
 * repaints every css-module surface at once. */
:root {
  --colors-grey200: var(--sim-paper);   /* page background behind the cards */
  --colors-grey050: #fafcfe;
  --colors-grey300: var(--sim-rule);    /* borders and dividers */
  --colors-grey400: #b9c6d4;
  --colors-grey900: var(--sim-ink);
  --colors-teal500: #2a6bb5;            /* DHIS2 primary teal -> SIMELCI navy */
  --colors-teal600: var(--sim-spine);
  --colors-teal700: var(--sim-spine-deep);
  --colors-teal100: #e4edf8;
  --colors-blue600: var(--sim-spine);
  --colors-yellow050: #fdf6e8;
}

/* --- Numbers ---------------------------------------------------------------
 * The single highest-value change on a screen made of figures: digits get equal
 * width, so columns of values stop shifting between periods. */
html,
body,
input,
button,
select,
textarea {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- The spine -------------------------------------------------------------
 * @dhis2/ui HeaderBar inlines `background-color:#2c6693` through styled-jsx, which
 * injects after this file loads. Equal specificity, later in the cascade — so these
 * need !important. `.header` is a source class name, not a build hash, so it survives
 * app upgrades. The green edge is the only saturated green on the page: one accessory. */
.header {
  background-color: var(--sim-spine) !important;
  border-block-end: 3px solid var(--sim-signal) !important;
  height: 52px !important;
  box-shadow: none !important;
}

/* Give the logo room to be a logo rather than a squeezed favicon. */
.header img {
  max-height: 30px !important;
  width: auto !important;
  margin-inline: 6px 10px !important;
}

/* App name reads as a location label, not a title competing with the logo. */
.header [data-test="headerbar-title"],
.header > div > span {
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 14px;
}

/* --- Surfaces --------------------------------------------------------------
 * Flat planes on hairline rules. Drop shadows are what date the default UI. */
[class*="dashboard-item"],
[class*="_item_"],
[data-test="dashboarditem-footer"] {
  box-shadow: none !important;
  border: 1px solid var(--sim-rule) !important;
  border-radius: 2px !important;
}

/* Card headings: quieter, tighter, clearly subordinate to the data they label. */
[class*="_itemHeader_"],
[class*="_title_"] {
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  color: var(--sim-ink) !important;
}

/* Focus stays visible and on-brand — never trade this for aesthetics. */
:focus-visible {
  outline: 2px solid var(--sim-signal) !important;
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ponytail: the [class*="_itemHeader_"] selectors above key off css-module names,
 * which carry a per-build hash suffix. They degrade to no-ops (never to broken
 * layout) after a DHIS2 app upgrade. To refresh them:
 *   unzip dhis-2/dhis-web-server/bundled_apps/dhis-web-apps/dashboard-app.zip -d /tmp/d
 *   grep -oE '_[a-zA-Z]+_[a-z0-9]{5}_[0-9]+' /tmp/d/*/assets/*.css | sort -u
 * The :root token block and .header rules above have no such dependency. */