@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/hmis-fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/hmis-fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/hmis-fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/hmis-fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(/assets/hmis-fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(/assets/hmis-fonts/ibm-plex-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ============================================================================
   HMIS theme for ThingsBoard CE
   ----------------------------------------------------------------------------
   ThingsBoard CE has no theming API (that is a PE feature), so this is layered
   on at the proxy. Two rules govern everything below:

   1. Restyle tokens, type and surfaces - never restructure components. Angular
      Material's layout is load-bearing; moving it breaks the app on upgrade.
   2. Semantic colour (alarm severity, ok/warn/critical) is NOT the brand accent.
      An operator must read severity at a glance without decoding the palette.

   Palette is sampled from the DSWRPP logo itself:
      #001890  deep navy   - 10,235 px of the mark (dominant)
      #0024F0  bright blue -  2,181 px (the inner droplet)
   Everything else is derived from those two.
   ========================================================================== */

:root {
  /* --- brand, from the logo ------------------------------------------ */
  --hmis-navy:        #001890;
  --hmis-navy-700:    #0a2199;
  --hmis-navy-300:    #4557b8;
  --hmis-blue:        #0024F0;
  --hmis-blue-600:    #1b3df5;
  --hmis-blue-100:    #e6eaff;

  /* --- neutrals, biased very slightly toward the navy so greys read as
         chosen rather than defaulted ---------------------------------- */
  --hmis-ink:         #12162a;
  --hmis-ink-2:       #454b66;
  --hmis-muted:       #6b7291;
  --hmis-line:        #dfe3ee;
  --hmis-surface:     #ffffff;
  --hmis-ground:      #f4f6fb;

  /* --- semantic, deliberately outside the brand ramp ------------------ */
  --hmis-ok:          #1f7a45;
  --hmis-warn:        #a8620a;
  --hmis-crit:        #b3261e;
  --hmis-info:        #0b6b93;

  --hmis-radius:      8px;
  --hmis-ease:        cubic-bezier(.4, 0, .2, 1);
  --hmis-fast:        140ms;
  --hmis-slow:        260ms;

  --hmis-sans: 'IBM Plex Sans', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --hmis-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------------------------------------------------------------- typography
   Plex is set for the whole app rather than per-component, so nothing is left
   half-Roboto. Numeric contexts get tabular figures so columns of readings
   line up - the single biggest legibility win on a monitoring dashboard. */

html, body,
.mat-typography,
.mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-outlined-button,
.mat-mdc-form-field, .mat-mdc-select, .mat-mdc-menu-item,
.mat-mdc-tab, .mat-mdc-card, .mat-mdc-dialog-container,
.mat-toolbar, .mat-tree, .mat-mdc-table {
  font-family: var(--hmis-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { color: var(--hmis-ink); letter-spacing: -0.002em; }

h1, h2, h3, h4,
.mat-mdc-card-title, .tb-dashboard-title, .tb-entity-title,
.mat-toolbar h1, .mat-toolbar h2 {
  font-family: var(--hmis-sans) !important;
  font-weight: 600;
  letter-spacing: -0.012em;
}

/* Readings, ids, tokens and timestamps: monospace with aligned digits. */
.mat-mdc-table td.mat-mdc-cell,
.tb-value, .tb-telemetry-value,
code, pre, .tb-json-object-text, .mat-mdc-chip {
  font-variant-numeric: tabular-nums;
}
code, pre, .tb-json-object-text,
input[type="number"] {
  font-family: var(--hmis-mono) !important;
}

/* Uppercase micro-labels need tracking or they set too tight. */
.mat-mdc-header-cell,
.mat-mdc-form-field-label,
.tb-small-label {
  letter-spacing: .04em;
  font-weight: 600;
}

/* ------------------------------------------------------------------- chrome */

.mat-toolbar.mat-primary,
.tb-primary-toolbar,
mat-toolbar.tb-dark {
  background: linear-gradient(96deg, var(--hmis-navy) 0%, var(--hmis-navy-700) 58%,
                              #12309e 100%) !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .10), 0 2px 14px rgba(0, 24, 144, .18);
}

/* Sidebar.
   ThingsBoard 4.3 colours its nav through Angular MDC design tokens, not plain CSS
   rules -- the app stylesheet declares no background or color for .tb-site-sidenav or
   .tb-menu-link at all. Setting only `background` therefore changed one half of a colour
   pair and left the label token untouched, which made the text vanish. Both halves are
   set here, and the label colours are driven through the MDC tokens so they win wherever
   Material applies them. */

.tb-site-sidenav,
.tb-side-menu,
mat-sidenav.mat-drawer,
.mat-drawer.mat-drawer-side,
.mat-drawer-inner-container {
  background: var(--hmis-surface) !important;
  color: var(--hmis-ink) !important;
  border-right: 1px solid var(--hmis-line);

  /* MDC list tokens - these are what actually paint the labels and icons. */
  --mdc-list-list-item-label-text-color: var(--hmis-ink);
  --mdc-list-list-item-supporting-text-color: var(--hmis-muted);
  --mdc-list-list-item-leading-icon-color: var(--hmis-ink-2);
  --mdc-list-list-item-trailing-icon-color: var(--hmis-ink-2);
  --mdc-list-list-item-hover-label-text-color: var(--hmis-navy);
  --mdc-list-list-item-hover-leading-icon-color: var(--hmis-navy);
  --mdc-list-list-item-focus-label-text-color: var(--hmis-navy);
  --mat-sidenav-container-text-color: var(--hmis-ink);
  --mat-sidenav-content-text-color: var(--hmis-ink);
}

/* Belt and braces: whatever element actually carries the label, make it legible. */
.tb-site-sidenav .tb-menu-link,
.tb-site-sidenav .tb-menu-toggle,
.tb-site-sidenav .mdc-list-item__primary-text,
.tb-site-sidenav .mat-mdc-list-item-title,
.tb-side-menu .tb-menu-link,
.tb-side-menu .mdc-list-item__primary-text,
mat-sidenav .mdc-list-item__primary-text,
mat-sidenav a, mat-sidenav .mat-mdc-list-item span {
  color: var(--hmis-ink) !important;
}

.tb-site-sidenav .mat-icon,
.tb-side-menu .mat-icon,
mat-sidenav .mat-icon {
  color: var(--hmis-ink-2) !important;
}

.tb-menu-link, .tb-menu-toggle,
.tb-side-menu .mat-mdc-list-item,
mat-sidenav .mat-mdc-list-item {
  border-radius: var(--hmis-radius);
  margin: 1px 8px;
  transition: background var(--hmis-fast) var(--hmis-ease),
              color var(--hmis-fast) var(--hmis-ease),
              transform var(--hmis-fast) var(--hmis-ease);
}

.tb-menu-link:hover, .tb-menu-toggle:hover,
.tb-side-menu .mat-mdc-list-item:hover,
mat-sidenav .mat-mdc-list-item:hover {
  background: var(--hmis-blue-100) !important;
  transform: translateX(2px);
}
.tb-menu-link:hover, .tb-menu-link:hover .mat-icon,
.tb-menu-link:hover .mdc-list-item__primary-text {
  color: var(--hmis-navy) !important;
}

/* Active item: tinted ground, navy label, and a rail so it reads without relying
   on colour alone. */
.tb-menu-link.tb-active, .tb-menu-link.active,
.tb-side-menu .mat-mdc-list-item.tb-active,
.tb-side-menu .mat-mdc-list-item.active,
mat-sidenav .mat-mdc-list-item.active,
.mat-mdc-list-item.mdc-list-item--activated {
  background: var(--hmis-blue-100) !important;
  box-shadow: inset 3px 0 0 var(--hmis-blue);
}
.tb-menu-link.tb-active, .tb-menu-link.active,
.tb-menu-link.tb-active .mdc-list-item__primary-text,
.tb-menu-link.active .mdc-list-item__primary-text,
.mat-mdc-list-item.mdc-list-item--activated .mdc-list-item__primary-text,
.tb-menu-link.tb-active .mat-icon, .tb-menu-link.active .mat-icon {
  color: var(--hmis-navy) !important;
  font-weight: 600;
}

/* ------------------------------------------------------------------ surfaces
   A hairline plus a soft shadow reads as a card without the heavy borders
   ThingsBoard ships; the hover lift is what makes a dashboard feel responsive. */

.mat-mdc-card, .tb-widget, .tb-dashboard-widget,
.mat-mdc-dialog-container, .mat-mdc-menu-panel {
  border-radius: var(--hmis-radius) !important;
  border: 1px solid var(--hmis-line);
  box-shadow: 0 1px 2px rgba(18, 22, 42, .05),
              0 4px 14px rgba(18, 22, 42, .05) !important;
  transition: box-shadow var(--hmis-slow) var(--hmis-ease),
              transform var(--hmis-slow) var(--hmis-ease);
}
.tb-widget:hover, .mat-mdc-card:hover {
  box-shadow: 0 2px 6px rgba(18, 22, 42, .07),
              0 12px 28px rgba(0, 24, 144, .10) !important;
  transform: translateY(-1px);
}

/* Dialogs and menus arrive rather than appear. */
.mat-mdc-dialog-container { animation: hmis-rise var(--hmis-slow) var(--hmis-ease) both; }
.mat-mdc-menu-panel        { animation: hmis-fade var(--hmis-fast) var(--hmis-ease) both; }
@keyframes hmis-rise { from { opacity: 0; transform: translateY(10px) scale(.99); } }
@keyframes hmis-fade { from { opacity: 0; transform: translateY(-4px); } }

/* Route changes: a short fade stops the layout snapping between views. */
.tb-dashboard-page, router-outlet + * {
  animation: hmis-enter var(--hmis-slow) var(--hmis-ease) both;
}
@keyframes hmis-enter { from { opacity: 0; transform: translateY(6px); } }

/* -------------------------------------------------------------------- inputs */

.mat-mdc-raised-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-fab.mat-primary, .mat-mdc-mini-fab.mat-primary {
  background: var(--hmis-navy) !important;
  color: #fff !important;
  border-radius: var(--hmis-radius) !important;
  transition: background var(--hmis-fast) var(--hmis-ease),
              box-shadow var(--hmis-fast) var(--hmis-ease),
              transform var(--hmis-fast) var(--hmis-ease);
}
.mat-mdc-raised-button.mat-primary:hover,
.mat-mdc-unelevated-button.mat-primary:hover {
  background: var(--hmis-blue) !important;
  box-shadow: 0 4px 14px rgba(0, 36, 240, .28) !important;
  transform: translateY(-1px);
}
.mat-mdc-raised-button.mat-primary:active { transform: translateY(0); }

.mat-mdc-button, .mat-mdc-icon-button {
  border-radius: var(--hmis-radius) !important;
  transition: background var(--hmis-fast) var(--hmis-ease);
}

/* Focus must stay visible for keyboard users - Material's default is faint. */
:focus-visible {
  outline: 2px solid var(--hmis-blue) !important;
  outline-offset: 2px;
}

.mat-mdc-form-field-focus-overlay { background: var(--hmis-blue-100); }
.mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--focused .mdc-notched-outline__trailing {
  border-color: var(--hmis-blue) !important;
  border-width: 2px !important;
}

/* --------------------------------------------------------------------- data */

.mat-mdc-table { border-radius: var(--hmis-radius); overflow: hidden; }
.mat-mdc-header-row {
  background: var(--hmis-ground) !important;
  border-bottom: 1px solid var(--hmis-line);
}
.mat-mdc-header-cell {
  color: var(--hmis-ink-2) !important;
  font-size: 12px;
  text-transform: uppercase;
}
.mat-mdc-row {
  transition: background var(--hmis-fast) var(--hmis-ease);
  border-bottom: 1px solid var(--hmis-line);
}
.mat-mdc-row:hover { background: var(--hmis-blue-100) !important; }

/* Alarm severity: form as well as colour, so it survives greyscale printing
   and colour-vision differences. */
.tb-alarm-critical, .mat-mdc-chip.critical { color: var(--hmis-crit) !important; font-weight: 600; }
.tb-alarm-major,    .mat-mdc-chip.major    { color: #c2410c !important; font-weight: 600; }
.tb-alarm-minor,    .mat-mdc-chip.minor    { color: var(--hmis-warn) !important; }
.tb-alarm-warning,  .mat-mdc-chip.warning  { color: var(--hmis-warn) !important; }
.tb-alarm-indeterminate { color: var(--hmis-muted) !important; }

/* ------------------------------------------------------------------ feedback */

.mat-mdc-progress-bar .mdc-linear-progress__bar-inner { border-color: var(--hmis-blue) !important; }
.mat-mdc-progress-spinner circle, .mat-mdc-spinner circle { stroke: var(--hmis-blue) !important; }

/* Loading placeholders shimmer instead of sitting blank. */
.tb-loading-placeholder, .tb-skeleton {
  background: linear-gradient(90deg, var(--hmis-ground) 25%, #e9edf7 37%, var(--hmis-ground) 63%);
  background-size: 400% 100%;
  animation: hmis-shimmer 1.4s ease-in-out infinite;
}
@keyframes hmis-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.mat-mdc-tab .mdc-tab-indicator__content--underline { border-color: var(--hmis-blue) !important; }
.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label { color: var(--hmis-navy) !important; font-weight: 600; }

/* Scrollbars, so dense tables do not end in a default grey slab. */
* { scrollbar-width: thin; scrollbar-color: #c3cadf transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: #c3cadf; border-radius: 6px; border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--hmis-navy-300); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------- motion off
   Every animation above is decorative. Anyone who has asked their system to
   reduce motion gets the same interface without it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .tb-widget:hover, .mat-mdc-card:hover,
  .mat-mdc-raised-button.mat-primary:hover { transform: none !important; }
}