/* SIMELCI — instrument panel
 *
 * Direction: a surveillance instrument, not a Material dashboard. Warm paper instead of
 * grey mud, a deep red spine with one amber 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-brand: #da1212; /* CISDI logo red */
  --sim-spine: #a01414; /* gradients, links */
  --sim-spine-deep: #7a0f0f; /* hover / pressed end-stop */
  --sim-paper: #f7efee; /* warm panel tint */
  --sim-signal: #c77700; /* amber, focus only */
  --sim-ink: #241a19; /* warm near-black */
  --sim-rule: #e6dcda; /* hairlines */
}

/* --- 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: #fffdfc;
  --colors-grey300: var(--sim-rule); /* borders and dividers */
  --colors-grey400: #c9b8b5;
  --colors-grey900: var(--sim-ink);
  --colors-teal500: var(
    --sim-brand
  ); /* DHIS2 primary teal -> SIMELCI brand red */
  --colors-teal600: var(--sim-spine);
  --colors-teal700: var(--sim-spine-deep);
  --colors-teal100: #fbe6e6;
  --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.
 *
 * There is NO `header` class to hook, and the bar's colour is not on <header> at all:
 *   <header class="jsx-4230161118">
 *     <div class="jsx-4230161118 main">        <- .main carries background + height
 * so `.header` matched nothing (silently, since the file was written), and painting the
 * <header> instead only puts a band *behind* the blue .main. `main` is a source class
 * name; the sibling `jsx-<hash>` is not. Anchoring the ancestor on the children's
 * data-test ids keeps a bare `.main` elsewhere in an app from being repainted. Re-check:
 *   grep -oE '"data-test":"headerbar[a-z-]*"' dhis-web-* /assets/main-*.js | sort -u
 * The amber edge is the only warm accent on the page: one accessory. */
header:has([data-test^="headerbar-"]) > .main {
  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:has([data-test^="headerbar-"]) 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. */
[data-test="headerbar-title"] {
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 14px;
}

[data-test="headerbar-apps-menu"] > button {
  background-color: var(--sim-spine) !important;
}

[data-test="headerbar-online-status"],
[data-test="headerbar-logo"]:hover {
  background-color: #740f0f !important;
}

li[data-test="dhis2-uicore-menuitem"].active {
  background-color: #f2e8e8 !important;
}

/* --- 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;
  }
}

/* --- Legacy maintenance app: section tabs ----------------------------------
 * material-ui 0.x Tabs give each tab an inline width of 100/n % and render the
 * label in a nowrap box with no truncation, so the labels overlap below ~1500px.
 * Wrap the label inside its own tab rather than widening the tabs: the tab bar is
 * position:fixed and the content below hangs on a hardcoded 10rem top margin, so a
 * second row of tabs would slide under the page - and the % widths are what keep
 * material-ui's ink bar (the only selected-tab cue in the DOM; Tab renders no
 * aria-selected) pointing at the right tab.
 * Hooked on the inline style attribute because material-ui 0.x emits no class names
 * here. `white-space` and `width` are the discriminators because both survive
 * autoprefixing verbatim - `display:flex` may be rewritten, and `transparent`
 * serialises to rgba(0, 0, 0, 0).
 * ponytail: this only rescues laptop widths (900-1500px). Ten fixed-percentage tabs
 * cannot be made phone-friendly in CSS; below that, use the Metadata Management app,
 * which supersedes this one. */
div[style*="white-space: nowrap"][style*="width: auto"] > button > div {
  white-space: normal !important;
  line-height: 1.15 !important;
  font-size: clamp(9px, 0.85vw, 14px) !important;
  padding: 0 4px !important;
  word-break: break-word;
  overflow: hidden !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]+' -r /tmp/d | sort -u
 * The :root token block and the header rules above key off data-test ids, not
 * hashes, so they have no such dependency.
 * Keep shell globs out of these comments: a star-slash inside one closes it early and the
 * following rule is silently swallowed into a junk selector. Cost an hour on 2026-08-20. */