/* =============================================================================
   Pure Vaadin AURA base + ONLY the `.sormas-filterbar*` layout restored.
   Requested 2026-07-23: keep Aura's native component appearance and colours;
   reintroduce the previous theme's CSS classes gradually — this pass = filter bar only.
   Full original theme backed up at scratchpad/styles.css.sormas-backup
   (and in git: `git checkout -- <this file>`).
   ============================================================================= */

/* Only custom token the filter bar needs; everything else resolves against Aura's
   own built-in tokens (padding/gap/radius/shadow/background/border/font-size), so the
   bar stays Aura-coloured and Aura-shaped. */
html {
  --sormas-font-size-xxs: 0.6875rem;
  /* 12px — Aura's scale jumps 11px (xs) -> 13px (s) with nothing between, and the grid's uppercase
     column headers want exactly that gap: clearly smaller than the 14px cell text, but not the 11px
     that made the directories read as fine print. */
  --sormas-font-size-xs: 0.75rem;
  --sormas-size-m: 2.25rem;
  /* env badge (topbar) status colours */
  --sormas-ok: #2E7D4F;
  --sormas-ok-bg: #E7F2EC;
  /* dashboard canvas + accent tint (accent mixes Aura's own accent → stays Aura-coloured) */
  --sormas-canvas: #F3F6F9;
  --sormas-accent-50: color-mix(in srgb, var(--aura-accent-color) 50%, transparent);

  /* Brand blue = SORMAS #005A9C. The core Vaadin components ship BOTH Aura and Lumo
     styles, so two independent blue systems must be overridden:
       1. Aura accent  — links, focus rings, selected states, Aura-styled surfaces.
       2. Lumo primary — the actual PRIMARY BUTTON background is painted by a Lumo
          shadow rule  :host([theme~="primary"]){ background: var(--_lumo-button-primary-background) }
          which resolves from --lumo-primary-color (NOT the Aura accent). Without this,
          buttons stayed Lumo's default #006AF5 no matter what we set on the Aura tokens. */
  --aura-blue: #005A9C;
  --aura-accent-color-light: #005A9C;
  --aura-accent-color-dark: #005A9C;

  --lumo-primary-color: #005A9C;
  --lumo-primary-color-50pct: rgba(0, 90, 156, 0.5);
  --lumo-primary-color-10pct: rgba(0, 90, 156, 0.1);
  --lumo-primary-text-color: #005A9C;

  /* Input fields: Aura's default border is nearly invisible on white cards, so fields read as
     "too faint". Give every field a defined 1px slate-grey border AND a light-grey fill so it
     clearly stands out as a fillable input against the white section cards. Neutral grey (NOT
     SORMAS blue) → stays Aura-toned. Applies app-wide via Aura's own input-field tokens. */
  --vaadin-input-field-border-width: 1px;
  --vaadin-input-field-border-color: #7c8899;
  --vaadin-input-field-background: #eef1f6;
  --vaadin-input-field-value-color: #1b2733;
}
/* Labels a touch darker so captions read clearly above the fields. */
html { --vaadin-input-field-label-color: #46525f; }

/* THE ACTUAL BORDER: Aura paints the input outline as a subtle drop-shadow on ::part(input-field)
   that the border-colour token can NOT override — so paint the border directly as an inset box-shadow
   with !important. This is what actually makes fields visibly defined. Editable = light-grey fill +
   clear slate border. Applies to every field component app-wide. */
vaadin-text-field::part(input-field),
vaadin-text-area::part(input-field),
vaadin-number-field::part(input-field),
vaadin-integer-field::part(input-field),
vaadin-big-decimal-field::part(input-field),
vaadin-email-field::part(input-field),
vaadin-password-field::part(input-field),
vaadin-date-picker::part(input-field),
vaadin-time-picker::part(input-field),
vaadin-combo-box::part(input-field),
vaadin-multi-select-combo-box::part(input-field),
vaadin-select::part(input-field) {
  background: #eef1f6 !important;
  box-shadow: inset 0 0 0 1px #566270 !important;
}
/* Active field (hover/focus): white fill + stronger, thicker border so it's unmistakable. */
vaadin-text-field:hover::part(input-field), vaadin-text-field:focus-within::part(input-field),
vaadin-text-area:hover::part(input-field), vaadin-text-area:focus-within::part(input-field),
vaadin-number-field:hover::part(input-field), vaadin-number-field:focus-within::part(input-field),
vaadin-integer-field:hover::part(input-field), vaadin-integer-field:focus-within::part(input-field),
vaadin-big-decimal-field:hover::part(input-field), vaadin-big-decimal-field:focus-within::part(input-field),
vaadin-email-field:hover::part(input-field), vaadin-email-field:focus-within::part(input-field),
vaadin-password-field:hover::part(input-field), vaadin-password-field:focus-within::part(input-field),
vaadin-date-picker:hover::part(input-field), vaadin-date-picker:focus-within::part(input-field),
vaadin-time-picker:hover::part(input-field), vaadin-time-picker:focus-within::part(input-field),
vaadin-combo-box:hover::part(input-field), vaadin-combo-box:focus-within::part(input-field),
vaadin-multi-select-combo-box:hover::part(input-field), vaadin-multi-select-combo-box:focus-within::part(input-field),
vaadin-select:hover::part(input-field), vaadin-select:focus-within::part(input-field) {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 2px #3f4b5a !important;
}

/* ===========================================================================
   Main bar (MainLayout navbar / topbar): drawer toggle, view title, env badge,
   and the user chip (avatar + name + role) whose menu holds Logout. Aura-coloured
   (light navbar), layout only — the navy side drawer is intentionally NOT restored here.
   =========================================================================== */
vaadin-app-layout::part(navbar) {
  background-color: var(--vaadin-background-color);
  border-bottom: 1px solid var(--vaadin-border-color-secondary);
  box-shadow: none;
  min-height: 56px;
  /* Keep the safe-area insets from vaadin-app-layout's own navbar rule (the navbar is
     position:fixed, so in installed-PWA mode on iPhones it extends under the status bar
     and notch; a flat `padding: 0` put the topbar buttons underneath them). The vars
     resolve to 0px outside iOS standalone mode, so this stays `padding: 0` elsewhere. */
  padding: var(--safe-area-inset-top, 0px) var(--safe-area-inset-right, 0px) 0 var(--safe-area-inset-left, 0px);
}
.sormas-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 56px;
  padding: 0 20px 0 4px;
  box-sizing: border-box;
}
.sormas-topbar-title {
  font-size: var(--aura-font-size-xl);
  font-weight: 700;
  color: var(--vaadin-text-color);
  letter-spacing: -0.2px;
}
.sormas-topbar-spacer { flex: 1 1 auto; }

.sormas-env {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--aura-font-size-xs);
  font-weight: 600;
  color: var(--sormas-ok);
  background: var(--sormas-ok-bg);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.sormas-env > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--sormas-ok); }

/* "Switch to old UI" top-bar control; mirrors the legacy UI's switch button. Only rendered when
   alternateui.url is configured. */
/* Cross-app link on the login card; only rendered when alternateui.url is configured. */
.sormas-alternate-ui-login-link {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: var(--aura-font-size-s);
  font-weight: 600;
}

.sormas-alternate-ui-button {
  font-size: var(--aura-font-size-xs);
  font-weight: 600;
  white-space: nowrap;
  margin-inline-end: 4px;
}

.sormas-user { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 8px 4px 6px; border-radius: 8px; }
.sormas-user:hover { background: var(--vaadin-background-container); }
.sormas-avatar { --vaadin-avatar-size: 32px; }
.sormas-user-who { display: flex; flex-direction: column; line-height: 1.15; }
.sormas-user-name { font-size: var(--aura-font-size-s); font-weight: 600; color: var(--vaadin-text-color); }
.sormas-user-role { font-size: var(--aura-font-size-xs); color: var(--vaadin-text-color-secondary); }
.sormas-user-chevron { color: var(--vaadin-text-color-secondary); font-size: 11px; }

@media (max-width: 800px) {
  .sormas-user-who { display: none; }
}

/* ===========================================================================
   Rules carried over from the pre-2026-07-23 theme layer that the edit-form/list
   restyle below does NOT redefine: the form info text/icon pair (merge 1.104) and
   the STEP 4 list-screen chrome (.sormas-grid-view / .sormas-page-header), which is
   still applied by AbstractGridView and AbstractAutoGridView.
   =========================================================================== */

/* Full-width informational paragraph inside a form (e.g. the Crowdin localization invitation on the user-settings
   form, merge 1.104 / #14182): wraps across the whole form width with vertical breathing room, rather than being
   clipped to one line. */
.sormas-form-info-text {
  display: block;
  width: 100%;
  margin: 12px 0;
  font-size: var(--vaadin-font-size-s, 0.875rem);
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--vaadin-text-color-secondary);
}

/* Small info icon rendered beside a field carrying a definition tooltip (e.g. PersonDto.migrant). */
.sormas-field-info-icon {
  width: 1.15em;
  height: 1.15em;
  align-self: center;
  color: var(--vaadin-text-color-secondary);
}

/* ===========================================================================
   STEP 4 — list/grid screens (AbstractGridView): page header + carded compact grid.
   =========================================================================== */
.sormas-grid-view {
  padding: var(--vaadin-padding-m) var(--vaadin-padding-l);
  gap: var(--vaadin-gap-m);
  background: var(--sormas-canvas);
  /* flex children default to min-width auto — without this a wide grid pushes the page into
     horizontal scroll instead of scrolling inside its own card. */
  min-width: 0;
}
/* Slim action toolbar at the top of every list view (no in-view page title — the topbar shows it).
   .sormas-page-header = AbstractGridView/AbstractAutoGridView; .sormas-view-toolbar = the hand-composed
   directories (Cases, Events, Samples, …). One shared look. */
.sormas-page-header,
.sormas-view-toolbar {
  width: 100%;
  padding: 0;
  margin: 0;
  align-items: center;
  gap: var(--vaadin-gap-s);
  flex-wrap: wrap;
  min-height: 0;
}
.sormas-page-header:empty,
.sormas-view-toolbar:empty { display: none; }
.sormas-page-header vaadin-button,
.sormas-view-toolbar vaadin-button { margin: 0; }
/* Float the grid on a white card so it lifts off the cool canvas. */
.sormas-grid-view vaadin-grid.sormas-grid {
  border: 1px solid var(--vaadin-border-color-secondary);
  border-radius: var(--vaadin-radius-l);
  box-shadow: var(--aura-shadow-s);
  background: var(--vaadin-background-color);
  overflow: hidden;
  /* Grid text = Aura's BASE body size (14px), not the -s step below it. The directories were on -s
     (13px) from the Aura migration through 2026-08-02 and read as too small to scan; easing the row
     padding alone did not fix it, because the glyphs were the problem, not the row height. Inherits
     into the cells. */
  font-size: var(--aura-font-size-m);
}
/* Quiet, uppercase column headers; hairline rows; brand-tinted hover/selection. */
.sormas-grid-view vaadin-grid.sormas-grid::part(header-cell) {
  background: #F7F9FB;
  text-transform: uppercase;
  font-size: var(--sormas-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--vaadin-text-color-secondary);
}
.sormas-grid-view vaadin-grid.sormas-grid::part(row):hover > [part~="cell"] {
  background: var(--sormas-brand-tint);
}
/* Wide directories scroll horizontally INSIDE the card, never widening the page. */
vaadin-grid.sormas-grid { min-width: 0; }

/* ---- filter bar: a carded, laptop-dense band over the grid ----
   Structure (AbstractFilterBar): fields row + collapsible more-fields row + one footer line
   (show-more toggle left, Apply/Reset right). Fields lay out on a responsive CSS grid — equal-width
   tracks that reflow with the viewport, so no filter field carries a fixed pixel width anymore. */
.sormas-filterbar {
  /* Full width of the list-view column: the host VerticalLayout does NOT stretch its children, so
     without this the card shrinks to a single grid track and the fields stack in one column. */
  width: 100%;
  box-sizing: border-box;
  background: var(--vaadin-background-color);
  border: 1px solid var(--vaadin-border-color-secondary);
  border-radius: var(--vaadin-radius-l);
  box-shadow: var(--aura-shadow-s);
  padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
  display: flex;
  flex-direction: column;
  gap: var(--vaadin-gap-xs);
}
/* The collapsible body holds every filter row; it carries the column layout so the mobile toggle button can
   sit above it and be shown/hidden independently. */
.sormas-filterbar-body {
  display: flex;
  flex-direction: column;
  gap: var(--vaadin-gap-xs);
  width: 100%;
}
/* Phone-only filter action icon: hidden above the phone breakpoint, where the body is always visible. Sized as
   a proper tap target; it carries no visible text (aria-label/title supply the name). */
.sormas-filterbar-toggle {
  display: none;
  align-self: flex-start;
  min-width: 44px;
  min-height: 36px;
  padding: 0 var(--vaadin-padding-xs);
  /* Reads as a control, not a stray glyph: same outlined chrome the list-view toolbar buttons use. */
  border: 1px solid color-mix(in srgb, var(--aura-accent-color) 42%, #c2ccd8);
  border-radius: var(--vaadin-radius-m, 6px);
  background: #ffffff;
  color: var(--aura-accent-text-color, var(--aura-accent-color));
}
.sormas-filterbar-toggle-icon { width: 18px; height: 18px; }
.sormas-filterbar-toggle-chevron {
  width: 14px;
  height: 14px;
  margin-left: var(--vaadin-gap-xs);
  transition: transform 0.2s ease;
}
.sormas-filterbar.expanded .sormas-filterbar-toggle-chevron {
  transform: rotate(180deg);
}
.sormas-filterbar-fields,
.sormas-filterbar-more-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--vaadin-gap-s) var(--vaadin-gap-m);
  align-items: end;
  width: 100%;
}
/* Multi-field composites (epi-week/date ranges, birthdate range) span the whole row and wrap inside it. */
.sormas-filterbar-fields > .sormas-filter-span-full,
.sormas-filterbar-more-fields > .sormas-filter-span-full {
  grid-column: 1 / -1;
  flex-wrap: wrap;
}
/* Primary search line: the search field(s) grow on the left, the bulk-edit toggle pins to the right, so the two read
   as one cluster. Wraps under the main filter grid; on narrow viewports the actions drop below the search field. */
.sormas-filterbar-search-row {
  display: flex;
  align-items: flex-end;
  gap: var(--vaadin-gap-s);
  width: 100%;
  flex-wrap: wrap;
}
.sormas-filterbar-search-fields {
  display: flex;
  align-items: flex-end;
  gap: var(--vaadin-gap-xs) var(--vaadin-gap-s);
  flex: 1 1 260px;
  flex-wrap: wrap;
}
.sormas-filterbar-search-fields > .sormas-filterbar-search {
  flex: 1 1 220px;
  min-width: 200px;
}
.sormas-filterbar-search-actions {
  display: flex;
  align-items: flex-end;
  gap: var(--vaadin-gap-xs);
  margin-left: auto;
}
/* The bulk-edit bar sits inline in the search line — drop its own margins so it aligns with the search field. */
.sormas-filterbar-search-actions > .sormas-bulkbar { margin: 0; }
.sormas-filterbar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vaadin-gap-s);
  flex-wrap: wrap;
}
/* Bars with no "more filters" toggle: keep Apply/Reset pinned right. */
.sormas-filterbar-actions { margin-left: auto; }

/* --- "Select person" search dialog (PersonSearchField) --------------------------------------------------------
   Capped on desktop, near-full-viewport on a phone, so the modal never forces horizontal page scroll. The wide
   result grid inside it scrolls in its own box. */
.person-search-dialog {
  width: min(1080px, 92vw);
  max-width: 100%;
}
.person-search-filter {
  display: flex;
  flex-direction: column;
  gap: var(--vaadin-gap-s);
  width: 100%;
}
/* Search box on its own full line, birth-date selectors on a responsive auto-fill grid below (same idiom as the
   list-view filter bar): they wrap to fewer columns as the dialog narrows and collapse to one column on a phone. */
.person-search-filter__fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--vaadin-gap-s);
  align-items: end;
  width: 100%;
}
.person-search-filter__fields > .person-search-filter__search { grid-column: 1 / -1; }
.person-search-filter__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vaadin-gap-s);
}
.person-search-filter__actions > vaadin-button { flex: 0 1 auto; }
@media (max-width: 560px) {
  .person-search-filter__fields { grid-template-columns: minmax(0, 1fr); }
  /* Full-width, easily-tappable action buttons on a phone. */
  .person-search-filter__actions > vaadin-button { flex: 1 1 100%; }
}

/* Slightly tighten filter-track width on smaller viewports (still comfortable). */
@media (max-width: 1280px) {
  .sormas-filterbar-fields,
  .sormas-filterbar-more-fields {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* Phone view: the filter band collapses behind ONE action icon (the funnel) so it no longer eats the screen.
   The body is hidden until the user taps it (which sets `.expanded` on the root). Filter fields drop to a
   single column when open, and Apply/Reset become full-width tap targets.

   640px, NOT 800px: a half-screen laptop window is not a phone — every fold-into-an-icon breakpoint in the app
   (this bar, .sormas-status-bar, AbstractAutoGridView.PHONE_BREAKPOINT) uses the same number, so the filters,
   the status row and the grid columns always agree about which mode is on. */
@media (max-width: 640px) {
  .sormas-filterbar {
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
  }
  .sormas-filterbar-toggle {
    display: inline-flex;
  }
  /* Collapsed, the funnel and the search line share one row (the funnel used to sit alone on an
     otherwise-empty line). Expanded reverts to the stacked column so the filter fields get the
     full card width. */
  .sormas-filterbar:not(.expanded) {
    flex-direction: row;
    align-items: flex-start;
  }
  .sormas-filterbar:not(.expanded) .sormas-filterbar-body {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  /* Collapsed = filter FIELDS hidden, but the search line stays: on a phone, search is the primary
     interaction with a directory — burying it behind the funnel costs a tap on every visit. */
  .sormas-filterbar:not(.expanded) .sormas-filterbar-fields,
  .sormas-filterbar:not(.expanded) .sormas-filterbar-more-fields,
  .sormas-filterbar:not(.expanded) .sormas-filterbar-footer {
    display: none;
  }
  .sormas-filterbar.expanded {
    padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
  }
  .sormas-filterbar.expanded .sormas-filterbar-fields,
  .sormas-filterbar.expanded .sormas-filterbar-more-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Apply/Reset side by side, each filling half the row — thumb-sized instead of two small pills. */
  .sormas-filterbar-footer { flex-direction: column; align-items: stretch; }
  .sormas-filterbar-actions { margin-left: 0; width: 100%; }
  .sormas-filterbar-actions > vaadin-button { flex: 1 1 0; }
  /* The search line's trailing actions (bulk-edit toggle) wrap under the search field rather than squeezing it. */
  .sormas-filterbar-search-actions { margin-left: 0; }
  /* The desktop 200px floor would overflow a 390px screen minus page padding — let the field shrink,
     and give it the whole line so the placeholder stays readable. */
  .sormas-filterbar-search-fields > .sormas-filterbar-search {
    min-width: 0;
    flex: 1 1 100%;
  }

  /* The list-view toolbar becomes ONE horizontally-swipeable row (the chip-row idiom) instead of
     wrapping: a directory like Cases carries 7+ actions plus the view switcher, and wrapped pills
     stack ~5 rows deep before the data starts. A partially cut-off last button is the scroll
     affordance. Applies to both the scaffolded (.sormas-page-header) and hand-composed
     (.sormas-view-toolbar) directories. */
  .sormas-page-header,
  .sormas-view-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sormas-page-header::-webkit-scrollbar,
  .sormas-view-toolbar::-webkit-scrollbar { display: none; }
  .sormas-page-header > *,
  .sormas-view-toolbar > * { flex: 0 0 auto; }
  .sormas-page-header vaadin-button,
  .sormas-view-toolbar vaadin-button { white-space: nowrap; }
  .sormas-option-group { flex-wrap: nowrap; }

  /* Reclaim canvas margin for content on a phone. */
  .sormas-grid-view {
    padding: var(--vaadin-padding-s);
    gap: var(--vaadin-gap-s);
  }
  /* Denser rows: one step down on glyphs and easing on cell padding buys ~25% more rows per screen. */
  .sormas-grid-view vaadin-grid.sormas-grid {
    font-size: var(--aura-font-size-s);
    --vaadin-grid-cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
  }
  /* Modals never wider than the phone. */
  vaadin-dialog-overlay::part(overlay) {
    max-width: calc(100vw - 16px);
  }
}

/* ==========================================================================
   Dashboards restored (2026-07-23): regular dashboard + national dashboard +
   map markers + grid links. Bespoke widget styling; keeps Aura fields/colours.
   ========================================================================== */
/* =============================================================================
   DASHBOARD THEME  — ported 1:1 from the legacy Vaadin-8 SORMAS theme
   (sormas-ui/.../VAADIN/themes/sormas: global.scss, components/{label,countelement,
   svg}.scss, views/{dashboard,disease}.scss). The Flow dashboard Java applies these
   legacy class names verbatim (addClassName), but the classes had never been ported
   into this Lumo theme — so the surveillance dashboard rendered as unstyled, run-together
   text. Colours use the legacy $s-* palette values.
   ============================================================================= */

/* ---- semantic text colours (legacy components/label.scss .primary/.critical/…) ---- */
.primary   { color: #005A9C; font-weight: 600; }
.secondary { color: #6591C4; }
.critical  { color: rgb(200, 0, 0); font-weight: 600; }
.important { color: rgb(190, 105, 0); font-weight: 600; }
.warning   { color: rgb(190, 105, 0); font-weight: 600; }
.relevant  { color: rgb(200, 170, 0); }
.neutral   { color: #00BFFF; }
.positive  { color: #32CD32; }
.minor     { color: #808080; }

/* ---- count element: a coloured underline under the count (legacy countelement.scss) ---- */
.count-element { color: var(--vaadin-text-color); text-align: center; }
.count-element > :first-child { border-bottom: 4px solid transparent; }
.count-element.important             > :first-child { border-color: rgb(190, 105, 0); }
.count-element.critical              > :first-child { border-color: rgb(200, 0, 0); }
.count-element.critical-transparent  > :first-child { border-color: rgba(200, 0, 0, 0.7); }
.count-element.critical-more-transparent > :first-child { border-color: rgba(200, 0, 0, 0.5); }
.count-element.relevant              > :first-child { border-color: rgb(200, 170, 0); }
.count-element.neutral               > :first-child { border-color: #00BFFF; }
.count-element.positive              > :first-child { border-color: #32CD32; }
.count-element.minor                 > :first-child { border-color: #808080; }
.count-element.primary               > :first-child { border-color: #005A9C; }

/* ---- label typography (legacy components/label.scss, Flow-renamed with a label- prefix) ---- */
.label-white  { color: #FFF; }
.label-bold, .bold { font-weight: bold; }
.label-primary { color: #005A9C; font-weight: 600; }
.label-uppercase, .uppercase { text-transform: uppercase; }
.label-large,  .large  { font-size: 1.25em; }
.label-xlarge, .xlarge { font-size: 1.5em; }
.label-xxlarge, .xxlarge { font-size: 2em; }
.label-xxxlarge, .xxxlarge { font-size: 2.5em; }
.label-caption-truncated, .caption-truncated {
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.bottom-line { border-bottom: 1px solid #CDD8EC; }
.rounded-corners-slim { border-radius: 4px; padding: 4px; }
.background-focus-light { background: #EDF2FD; }

/* ---- heading colour classes (legacy global.scss h1-h4/.h1-.h4) ---- */
.h1 { color: #005A9C; font-weight: 600; }
.h2, .h3, .h4 { color: #6591C4; font-weight: 600; }

/* ---- alignment ---- */
.align-center { text-align: center; }
.align-right  { text-align: right; }

/* ---- vertical / horizontal spacing utilities (legacy global.scss) ---- */
.vspace-0 { margin-bottom: 64px; }
.vspace-1 { margin-bottom: 36px; }
.vspace-2 { margin-bottom: 24px; }
.vspace-3 { margin-bottom: 16px; }
.vspace-4 { margin-bottom: 6px; }
.vspace-5 { margin-bottom: 2px; }
.vspace-none { margin-bottom: 0 !important; }
.vspace-top-0 { margin-top: 64px; }
.vspace-top-1 { margin-top: 36px; }
.vspace-top-2 { margin-top: 24px; }
.vspace-top-3 { margin-top: 16px; }
.vspace-top-4 { margin-top: 6px; }
.vspace-top-5 { margin-top: 2px; }
.vspace-top-6 { margin-top: -8px; }
.vspace-top-none { margin-top: 0 !important; }
.hspace-left-0 { margin-left: 64px; }
.hspace-left-1 { margin-left: 36px; }
.hspace-left-2 { margin-left: 20px; }
.hspace-left-3 { margin-left: 10px; }
.hspace-left-4 { margin-left: 6px; }
.hspace-left-5 { margin-left: 2px; }
.hspace-left-none { margin-left: 0 !important; }
.hspace-right-0 { margin-right: 64px; }
.hspace-right-1 { margin-right: 36px; }
.hspace-right-2 { margin-right: 20px; }
.hspace-right-3 { margin-right: 10px; }
.hspace-right-4 { margin-right: 6px; }
.hspace-right-5 { margin-right: 2px; }
.hspace-right-none { margin-right: 0 !important; }

/* ---- dashboard structural (legacy views/dashboard.scss) ---- */
.dashboard-screen { overflow-x: hidden; }
.heading-title-label { margin-top: 12px; }
.statistics-info-label { margin-top: 10px; color: #6591C4; }
.follow-up-status-info-button { margin-top: 10px; }
.background-highlight { background-color: #EDF2FD; }
.background-critical  { background-color: #DE5555; }
.highlighted-statistics-component { background-color: #EDF2FD; padding-top: 16px; }

/* ---- svg colourisation (legacy components/svg.scss) ---- */
.svg-circle { fill: none; stroke-width: 3; }
.svg-fill-primary   { fill: #005A9C; }
.svg-fill-critical  { fill: rgb(200, 0, 0); }
.svg-fill-important { fill: rgb(190, 105, 0); }
.svg-fill-positive  { fill: #32CD32; }
.svg-fill-minor     { fill: #808080; }
.svg-fill-neutral   { fill: #00BFFF; }
.svg-fill-background { fill: #E6E6E6; }
.svg-stroke-primary   { stroke: #005A9C; }
.svg-stroke-critical  { stroke: rgb(200, 0, 0); }
.svg-stroke-important { stroke: rgb(190, 105, 0); }
.svg-stroke-positive  { stroke: #32CD32; }
.svg-stroke-minor     { stroke: #808080; }
.svg-stroke-background { stroke: #E6E6E6; }

/* ---- make the disease selector wrap into rows instead of horizontal-scrolling
        (legacy rendered the disease keys as a wrapping flow of buttons) ---- */
vaadin-tabs.disease-carousel-tabs { max-width: 100%; }
vaadin-tabs.disease-carousel-tabs::part(tabs) { flex-wrap: wrap; }
vaadin-tabs.disease-carousel-tabs [part="back-button"],
vaadin-tabs.disease-carousel-tabs [part="forward-button"] { display: none; }

/* ---- per-disease tile colours (legacy views/disease.scss) ---- */
.background-disease-afp { background-color: #00E0A1; fill: #00E0A1; }
.background-disease-afp.background-darker { background-color: #00B582; fill: #00B582; }
.background-disease-cholera { background-color: #FEBA01; fill: #FEBA01; }
.background-disease-cholera.background-darker { background-color: #E5A701; fill: #E5A701; }
.background-disease-csm { background-color: #59BDEF; fill: #59BDEF; }
.background-disease-csm.background-darker { background-color: #50AAD7; fill: #50AAD7; }
.background-disease-dengue { background-color: #44BEC7; fill: #44BEC7; }
.background-disease-dengue.background-darker { background-color: #3DABB3; fill: #3DABB3; }
.background-disease-evd { background-color: #8C45AD; fill: #8C45AD; }
.background-disease-evd.background-darker { background-color: #7E3E9C; fill: #7E3E9C; }
.background-disease-guinea-worm { background-color: #3FD100; fill: #3FD100; }
.background-disease-guinea-worm.background-darker { background-color: #38BA00; fill: #38BA00; }
.background-disease-lassa { background-color: #EA579B; fill: #EA579B; }
.background-disease-lassa.background-darker { background-color: #D34E8B; fill: #D34E8B; }
.background-disease-measles { background-color: #66AD45; fill: #66AD45; }
.background-disease-measles.background-darker { background-color: #5C9C3E; fill: #5C9C3E; }
.background-disease-monkeypox { background-color: #FF9299; fill: #FF9299; }
.background-disease-monkeypox.background-darker { background-color: #E5838A; fill: #E5838A; }
.background-disease-new-flu { background-color: #4550AC; fill: #4550AC; }
.background-disease-new-flu.background-darker { background-color: #3E489B; fill: #3E489B; }
.background-disease-plague { background-color: #8270CC; fill: #8270CC; }
.background-disease-plague.background-darker { background-color: #7565B8; fill: #7565B8; }
.background-disease-polio { background-color: #A6E300; fill: #A6E300; }
.background-disease-polio.background-darker { background-color: #96CC00; fill: #96CC00; }
.background-disease-unspecified-vhf { background-color: #448282; fill: #448282; }
.background-disease-unspecified-vhf.background-darker { background-color: #2F4F4F; fill: #2F4F4F; }
.background-disease-west-nile-fever { background-color: #87CEFA; fill: #87CEFA; }
.background-disease-west-nile-fever.background-darker { background-color: #5b94b7; fill: #5b94b7; }
.background-disease-yellow-fever { background-color: #E2D320; fill: #E2D320; }
.background-disease-yellow-fever.background-darker { background-color: #CBBE1D; fill: #CBBE1D; }
.background-disease-congenital-rubella { background-color: #d4d4f7; fill: #d4d4f7; }
.background-disease-congenital-rubella.background-darker { background-color: #aaaaee; fill: #aaaaee; }
.background-disease-other { background-color: #888; fill: #888; }
.background-disease-other.background-darker { background-color: #6D6D6D; fill: #6D6D6D; }
.background-disease-undefined { background-color: #cccccc; fill: #cccccc; }
.background-disease-undefined.background-darker { background-color: #d9d9d9; fill: #d9d9d9; }
.background-disease-rabies { background-color: #ef5a6c; fill: #ef5a6c; }
.background-disease-rabies.background-darker { background-color: #e04a5b; fill: #e04a5b; }
.background-disease-anthrax { background-color: #5a95f4; fill: #5a95f4; }
.background-disease-anthrax.background-darker { background-color: #3b7fed; fill: #3b7fed; }
.background-disease-coronavirus { background-color: #bf8678; fill: #bf8678; }
.background-disease-coronavirus.background-darker { background-color: #b0796b; fill: #b0796b; }
.background-disease-pneumonia { background-color: #b0c4de; fill: #b0c4de; }
.background-disease-pneumonia.background-darker { background-color: #7b8fa3; fill: #7b8fa3; }
.background-disease-malaria { background-color: #7ed957; fill: #7ed957; }
.background-disease-malaria.background-darker { background-color: #5fa23f; fill: #5fa23f; }
.background-disease-typhoid-fever { background-color: #f7b267; fill: #f7b267; }
.background-disease-typhoid-fever.background-darker { background-color: #d9983a; fill: #d9983a; }
.background-disease-acute-viral-hepatitis { background-color: #f9e79f; fill: #f9e79f; }
.background-disease-acute-viral-hepatitis.background-darker { background-color: #f7ca18; fill: #f7ca18; }
.background-disease-non-neonatal-tetanus { background-color: #b2bec3; fill: #b2bec3; }
.background-disease-non-neonatal-tetanus.background-darker { background-color: #636e72; fill: #636e72; }
.background-disease-hiv { background-color: #e17055; fill: #e17055; }
.background-disease-hiv.background-darker { background-color: #b03a2e; fill: #b03a2e; }
.background-disease-schistosomiasis { background-color: #00b894; fill: #00b894; }
.background-disease-schistosomiasis.background-darker { background-color: #00897b; fill: #00897b; }
.background-disease-soil-transmitted-helminths { background-color: #a0522d; fill: #a0522d; }
.background-disease-soil-transmitted-helminths.background-darker { background-color: #6e2c00; fill: #6e2c00; }
.background-disease-trypanosomiasis { background-color: #6c3483; fill: #6c3483; }
.background-disease-trypanosomiasis.background-darker { background-color: #512e5f; fill: #512e5f; }
.background-disease-diarrhea-dehydration { background-color: #85c1e9; fill: #85c1e9; }
.background-disease-diarrhea-dehydration.background-darker { background-color: #2874a6; fill: #2874a6; }
.background-disease-diarrhea-blood { background-color: #c0392b; fill: #c0392b; }
.background-disease-diarrhea-blood.background-darker { background-color: #922b21; fill: #922b21; }
.background-disease-snake-bite { background-color: #a3a847; fill: #a3a847; }
.background-disease-snake-bite.background-darker { background-color: #7d8334; fill: #7d8334; }
.background-disease-rubella { background-color: #f1948a; fill: #f1948a; }
.background-disease-rubella.background-darker { background-color: #c0392b; fill: #c0392b; }
.background-disease-tuberculosis { background-color: #b9770e; fill: #b9770e; }
.background-disease-tuberculosis.background-darker { background-color: #7e5109; fill: #7e5109; }
.background-disease-leprosy { background-color: #f5cba7; fill: #f5cba7; }
.background-disease-leprosy.background-darker { background-color: #ca6f1e; fill: #ca6f1e; }
.background-disease-lymphatic-filariasis { background-color: #48c9b0; fill: #48c9b0; }
.background-disease-lymphatic-filariasis.background-darker { background-color: #148f77; fill: #148f77; }
.background-disease-buruli-ulcer { background-color: #f7cac9; fill: #f7cac9; }
.background-disease-buruli-ulcer.background-darker { background-color: #e9967a; fill: #e9967a; }
.background-disease-pertussis { background-color: #f8c471; fill: #f8c471; }
.background-disease-pertussis.background-darker { background-color: #b9770e; fill: #b9770e; }
.background-disease-neonatal-tetanus { background-color: #f9e79f; fill: #f9e79f; }
.background-disease-neonatal-tetanus.background-darker { background-color: #f7ca18; fill: #f7ca18; }
.background-disease-tetanus { background-color: #d7bde2; fill: #d7bde2; }
.background-disease-tetanus.background-darker { background-color: #8e44ad; fill: #8e44ad; }
.background-disease-onchocerciasis { background-color: #34495e; fill: #34495e; }
.background-disease-onchocerciasis.background-darker { background-color: #212f3c; fill: #212f3c; }
.background-disease-diphteria { background-color: #e67e22; fill: #e67e22; }
.background-disease-diphteria.background-darker { background-color: #ca6f1e; fill: #ca6f1e; }
.background-disease-trachoma { background-color: #aed6f1; fill: #aed6f1; }
.background-disease-trachoma.background-darker { background-color: #5499c7; fill: #5499c7; }
.background-disease-yaws-endemic-syphilis { background-color: #f5b7b1; fill: #f5b7b1; }
.background-disease-yaws-endemic-syphilis.background-darker { background-color: #c0392b; fill: #c0392b; }
.background-disease-maternal-deaths { background-color: #f1948a; fill: #f1948a; }
.background-disease-maternal-deaths.background-darker { background-color: #922b21; fill: #922b21; }
.background-disease-perinatal-deaths { background-color: #f7dc6f; fill: #f7dc6f; }
.background-disease-perinatal-deaths.background-darker { background-color: #b7950b; fill: #b7950b; }
.background-disease-influenza { background-color: #5dade2; fill: #5dade2; }
.background-disease-influenza.background-darker { background-color: #21618c; fill: #21618c; }
.background-disease-influenza-a { background-color: #2874a6; fill: #2874a6; }
.background-disease-influenza-a.background-darker { background-color: #154360; fill: #154360; }
.background-disease-influenza-b { background-color: #85c1e9; fill: #85c1e9; }
.background-disease-influenza-b.background-darker { background-color: #2874a6; fill: #2874a6; }
.background-disease-h-metapneumovirus { background-color: #a569bd; fill: #a569bd; }
.background-disease-h-metapneumovirus.background-darker { background-color: #76448a; fill: #76448a; }
.background-disease-respiratory-syncytial-virus { background-color: #48c9b0; fill: #48c9b0; }
.background-disease-respiratory-syncytial-virus.background-darker { background-color: #148f77; fill: #148f77; }
.background-disease-parainfluenza-1-4 { background-color: #f7ca18; fill: #f7ca18; }
.background-disease-parainfluenza-1-4.background-darker { background-color: #b7950b; fill: #b7950b; }
.background-disease-adenovirus { background-color: #f5b041; fill: #f5b041; }
.background-disease-adenovirus.background-darker { background-color: #b9770e; fill: #b9770e; }
.background-disease-rhinovirus { background-color: #76d7c4; fill: #76d7c4; }
.background-disease-rhinovirus.background-darker { background-color: #117864; fill: #117864; }
.background-disease-enterovirus { background-color: #f1948a; fill: #f1948a; }
.background-disease-enterovirus.background-darker { background-color: #922b21; fill: #922b21; }
.background-disease-m-pneumoniae { background-color: #f7cac9; fill: #f7cac9; }
.background-disease-m-pneumoniae.background-darker { background-color: #e9967a; fill: #e9967a; }
.background-disease-c-pneumoniae { background-color: #f9e79f; fill: #f9e79f; }
.background-disease-c-pneumoniae.background-darker { background-color: #f7ca18; fill: #f7ca18; }
.background-disease-ari { background-color: #aed6f1; fill: #aed6f1; }
.background-disease-ari.background-darker { background-color: #5499c7; fill: #5499c7; }
.background-disease-chikungunya { background-color: #e67e22; fill: #e67e22; }
.background-disease-chikungunya.background-darker { background-color: #ca6f1e; fill: #ca6f1e; }
.background-disease-post-immunization-adverse-events-mild { background-color: #f7cac9; fill: #f7cac9; }
.background-disease-post-immunization-adverse-events-mild.background-darker { background-color: #e9967a; fill: #e9967a; }
.background-disease-post-immunization-adverse-events-severe { background-color: #c0392b; fill: #c0392b; }
.background-disease-post-immunization-adverse-events-severe.background-darker { background-color: #922b21; fill: #922b21; }
.background-disease-fha { background-color: #f5b7b1; fill: #f5b7b1; }
.background-disease-fha.background-darker { background-color: #c0392b; fill: #c0392b; }
.background-disease-invasive-meningococcal-infection { background-color: #00E0A1; fill: #00E0A1; }
.background-disease-invasive-meningococcal-infection.background-darker { background-color: #00B582; fill: #00B582; }
.background-disease-invasive-pneumococcal-infection { background-color: #e67e22; fill: #e67e22; }
.background-disease-invasive-pneumococcal-infection.background-darker { background-color: #ca6f1e; fill: #ca6f1e; }

/* ---- syndrome colours: ported 1:1 from legacy sormas-ui/.../views/syndrome.scss ----
   (these were missing from the Flow theme, so syndrome-dashboard tiles rendered uncoloured). */
.background-syndrome-fever-with-rash { background-color: #44BEC7; fill: #44BEC7; }
.background-syndrome-fever-with-rash.background-darker { background-color: #3DABB3; fill: #3DABB3; }
.background-syndrome-acute-gastro-enteritis { background-color: #FEBA01; fill: #FEBA01; }
.background-syndrome-acute-gastro-enteritis.background-darker { background-color: #E5A701; fill: #E5A701; }
.background-syndrome-acute-encephalitis-syndrome { background-color: #4550AC; fill: #4550AC; }
.background-syndrome-acute-encephalitis-syndrome.background-darker { background-color: #3E489B; fill: #3E489B; }
.background-syndrome-acute-haemorrhagic-fever { background-color: #8C45AD; fill: #8C45AD; }
.background-syndrome-acute-haemorrhagic-fever.background-darker { background-color: #7E3E9C; fill: #7E3E9C; }
.background-syndrome-acute-flaccid-paralysis { background-color: #A6E300; fill: #A6E300; }
.background-syndrome-acute-flaccid-paralysis.background-darker { background-color: #96CC00; fill: #96CC00; }
.background-syndrome-severe-acute-respiratory-illness { background-color: #5a95f4; fill: #5a95f4; }
.background-syndrome-severe-acute-respiratory-illness.background-darker { background-color: #3b7fed; fill: #3b7fed; }
.background-syndrome-influenza-like-illness { background-color: #87CEFA; fill: #87CEFA; }
.background-syndrome-influenza-like-illness.background-darker { background-color: #5b94b7; fill: #5b94b7; }
.background-syndrome-ferrile-illness-with-jaundice { background-color: #E2D320; fill: #E2D320; }
.background-syndrome-ferrile-illness-with-jaundice.background-darker { background-color: #CBBE1D; fill: #CBBE1D; }
.background-syndrome-animal-bite { background-color: #ef5a6c; fill: #ef5a6c; }
.background-syndrome-animal-bite.background-darker { background-color: #e04a5b; fill: #e04a5b; }
.background-syndrome-other { background-color: #888; fill: #888; }
.background-syndrome-other.background-darker { background-color: #6D6D6D; fill: #6D6D6D; }
.background-syndrome-undefined { background-color: #cccccc; fill: #cccccc; }
.background-syndrome-undefined.background-darker { background-color: #d9d9d9; fill: #d9d9d9; }

/* ---- sample-dashboard tile colours: ported 1:1 from legacy sormas-ui/.../views/dashboard.scss ----
   (also missing from the Flow theme, so the sample count tiles rendered uncoloured). */
.background-external-lab-samples { background-color: #3E489B; fill: #3E489B; }
.background-internal-lab-samples { background-color: #7565B8; fill: #7565B8; }
.background-specimen-condition-adequate { background-color: #5a95f4; fill: #5a95f4; }
.background-specimen-condition-adequate.background-darker { background-color: #3b7fed; fill: #3b7fed; }
.background-specimen-condition-inadequate { background-color: #FEBA01; fill: #FEBA01; }
.background-specimen-condition-inadequate.background-darker { background-color: #E5A701; fill: #E5A701; }
.background-specimen-condition-not-specified { background-color: #8C45AD; fill: #8C45AD; }
.background-specimen-condition-not-specified.background-darker { background-color: #7E3E9C; fill: #7E3E9C; }
.background-shipment-status-shipped { background-color: #44BEC7; fill: #44BEC7; }
.background-shipment-status-shipped.background-darker { background-color: #3DABB3; fill: #3DABB3; }
.background-shipment-status-not-shipped { background-color: #ef5a6c; fill: #ef5a6c; }
.background-shipment-status-not-shipped.background-darker { background-color: #e04a5b; fill: #e04a5b; }
.background-shipment-status-received { background-color: #E2D320; fill: #E2D320; }
.background-shipment-status-received.background-darker { background-color: #CBBE1D; fill: #CBBE1D; }

/* sample count tiles: round the corners + even gap so they match the compact disease/syndrome tiles */
.sample-count-tiles { gap: var(--vaadin-gap-s); }
.sample-count-tile {
  border-radius: var(--vaadin-radius-m);
  overflow: hidden;
  box-shadow: var(--aura-shadow-xs);
  min-width: 0;
}

/* =============================================================================
   MODERN DASHBOARD  — redesign layer (approved: modern redesign, keep legacy data
   + semantic colours). Sits ON TOP of the 1:1-ported legacy dashboard classes
   above: it re-homes the flat statistics strip into floating white cards, gives
   the counts a clear hierarchy, cards the overview / epi-curve / map panels, turns
   the disease selector into pill tabs and gives the page consistent padding + gaps.
   Only class hooks were added in Java (addClassName) — no structure changed, so the
   legacy behaviour + colours are untouched; this file owns the new look.
   ============================================================================= */

/* ---- shell: page padding + vertical gaps between sections on the cool canvas ---- */
.dashboard-screen { background: var(--sormas-canvas); }
.sormas-dashboard-header {
  box-sizing: border-box;
  padding: var(--vaadin-padding-m) var(--vaadin-padding-l) 0;
  flex: 0 0 auto;
}
.sormas-dashboard-content {
  box-sizing: border-box;
  padding: var(--vaadin-padding-m) var(--vaadin-padding-l) var(--vaadin-padding-l);
  gap: var(--vaadin-gap-m);
}

/* ---- filter bar: wrap on narrow screens instead of overflowing the viewport ---- */
.dashboard-filter-bar {
  flex-wrap: wrap;
  row-gap: var(--vaadin-gap-s);
  max-width: 100%;
  min-width: 0;
}
.dashboard-filter-bar .dashboard-filter-bar__extra {
  flex-wrap: wrap;
  row-gap: var(--vaadin-gap-s);
  min-width: 0;
  flex: 1 1 auto;
}
/* fields keep a usable width but may shrink below their natural size rather than force overflow */
.dashboard-filter-bar vaadin-select,
.dashboard-filter-bar vaadin-date-picker,
.dashboard-filter-bar vaadin-combo-box {
  min-width: 9.5rem;
  max-width: 100%;
  flex: 0 1 auto;
}
/* Desktop: the collapsible body is transparent to layout (its children flow as direct children of the bar,
   preserving the original toolbar), and the mobile "Filters" toggle is hidden. */
.dashboard-filter-bar__body {
  display: contents;
}
.dashboard-filter-bar__toggle {
  display: none;
}
.dashboard-filter-bar__toggle-chevron {
  width: 14px;
  height: 14px;
  margin-left: var(--vaadin-gap-xs);
  transition: transform 0.2s ease;
}
.dashboard-filter-bar.expanded .dashboard-filter-bar__toggle-chevron {
  transform: rotate(180deg);
}
/* Phone view: collapse the whole toolbar behind the "Filters" button; expand to a vertical stack on tap. */
@media (max-width: 800px) {
  .dashboard-filter-bar__toggle {
    display: inline-flex;
  }
  .dashboard-filter-bar__body {
    display: none;
  }
  .dashboard-filter-bar.expanded .dashboard-filter-bar__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    row-gap: var(--vaadin-gap-s);
  }
}

/* ---- Disease / Syndrome mode toggle: render the radio group as a segmented pill control ---- */
.nd-mode-toggle {
  flex: 0 0 auto;
}
.nd-mode-toggle::part(group-field) {
  display: inline-flex;
  border: 1px solid var(--vaadin-border-color-secondary);
  border-radius: var(--vaadin-radius-m);
  overflow: hidden;
  background: var(--vaadin-background-color);
}
.nd-mode-toggle vaadin-radio-button {
  margin: 0;
  padding: 0 var(--vaadin-padding-m);
  height: var(--sormas-size-m);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-left: 1px solid var(--vaadin-border-color-secondary);
}
.nd-mode-toggle vaadin-radio-button:first-of-type {
  border-left: none;
}
/* hide the radio circle; the whole segment is the target */
.nd-mode-toggle vaadin-radio-button::part(radio) {
  display: none;
}
.nd-mode-toggle vaadin-radio-button[checked] {
  background: var(--sormas-blue, #005A9C);
  color: #fff;
}
.nd-mode-toggle vaadin-radio-button[checked] label {
  color: #fff;
}

/* ---- generic carded panel: overview blocks, epi-curve, map ---- */
.sormas-panel-card {
  box-sizing: border-box;
  background: var(--vaadin-background-color);
  border: 1px solid var(--vaadin-border-color-secondary);
  border-radius: var(--vaadin-radius-l);
  box-shadow: var(--aura-shadow-xs);
  overflow: hidden;
}

/* ---- statistics strip: drop the flat blue slab, float the columns as white cards ---- */
.sormas-dashboard-stats {
  background: transparent;      /* overrides .highlighted-statistics-component's #EDF2FD slab */
  padding-top: 0;
  align-items: flex-start;      /* content-height cards (the 3rd column stacks two) */
}
.sormas-stat-card {
  box-sizing: border-box;
  background: var(--vaadin-background-color);
  border: 1px solid var(--vaadin-border-color-secondary);
  border-radius: var(--vaadin-radius-l);
  box-shadow: var(--aura-shadow-xs);
  /* !important overrides the inline padding-top/bottom:0 the ported sub-component sets. */
  padding: var(--vaadin-padding-m) var(--vaadin-padding-m) var(--vaadin-padding-s) !important;
}
.sormas-stat-card:hover { box-shadow: var(--aura-shadow-s); }

/* ---- count element hierarchy: prominent number, quiet uppercase caption ----
   (colour stays legacy: the coloured 4px underline under the count is set by the
   ported .count-element.<style> rules above; the number text stays neutral). */
.count-element { padding: 2px 4px; }
.count-element > span:first-child {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
}
.count-element > span:last-child {
  font-size: var(--sormas-font-size-xxs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--vaadin-text-color-secondary);
}

/* ---- stat cards: cleaner header + count grid + summary rows (surveillance dashboard) ---- */

/* card heading: big brand number, title beside it, thin rule underneath for structure */
.dashboard-heading {
  width: 100%;
  gap: 8px;
  padding-bottom: var(--vaadin-padding-xs);
  margin-bottom: var(--vaadin-padding-xs);
  border-bottom: 1px solid var(--vaadin-border-color-secondary);
  flex-wrap: nowrap;
}
.dashboard-heading .heading-title-label {
  font-size: var(--aura-font-size-m);
  font-weight: 600;
  color: var(--vaadin-text-color);
  margin-left: 8px;
}
.dashboard-heading > span:first-child { line-height: 1.05; }
.statistics-info-label { color: var(--vaadin-text-color-secondary); cursor: help; }

/* count grid: even spacing so the number cells breathe and wrap cleanly */
.dashboard-count-layout {
  gap: 6px 18px;
  align-items: flex-end !important;
}
/* the per-element right margin the kit adds is redundant now the grid has a gap */
.dashboard-count-layout > .count-element.hspace-right-3 { margin-right: 0; }
.count-element > span:first-child { min-width: 1.5em; }

/* case-fatality / last-reported / quarantine summary rows: quiet label ── bold value */
.disease-summary-row {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--vaadin-gap-s);
  padding: 3px 0;
}
.disease-summary-row + .disease-summary-row { border-top: 1px solid color-mix(in srgb, var(--vaadin-text-color) 5%, transparent); }
.disease-summary-row__label {
  font-size: var(--aura-font-size-xs) !important;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--vaadin-text-color-secondary) !important;
}
.disease-summary-row__value {
  color: var(--vaadin-text-color) !important;
  white-space: nowrap;
}

/* disease-burden overview: stable header bar carrying the tile/table toggle */
.disease-overview__header {
  min-height: 0;
  margin-bottom: var(--vaadin-padding-s);
}
.disease-overview__title { font-size: var(--aura-font-size-m); font-weight: 600; color: var(--vaadin-text-color); }
.disease-overview__toggle { flex: 0 0 auto; }
.disease-overview__content { width: 100%; overflow-x: auto; }

/* ---- epi-curve + map row: equal-height carded pair ----
   The row is the flex-grow target of the carousel column; nested Flow Vertical/HorizontalLayouts
   default to content-based sizing, so without min-height:0 the row and its cards collapse to the
   chart's fallback height and a dead vertical band opens above them. Pin a floor and let the cards
   (and the ECharts <div> / leaflet map inside) stretch to fill it. */
.sormas-curve-and-map {
  gap: var(--vaadin-gap-m);
  min-height: 440px;
}
.sormas-curve-and-map > .sormas-panel-card {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* the chart/map (setSizeFull) is the panel's growing child */
.sormas-curve-and-map > .sormas-panel-card > * { min-height: 0; }

/* ---- disease selector: modern pill tabs (brand-filled when selected) ---- */
vaadin-tabs.disease-carousel-tabs::part(tabs) { gap: 6px; }
vaadin-tabs.disease-carousel-tabs vaadin-tab {
  box-sizing: border-box;
  border-radius: 999px;
  padding: 4px 14px;
  min-height: 0;
  font-size: var(--aura-font-size-s);
  font-weight: 600;
  color: var(--vaadin-text-color-secondary);
  background: var(--vaadin-background-color);
  border: 1px solid var(--vaadin-border-color-secondary);
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
vaadin-tabs.disease-carousel-tabs vaadin-tab:hover {
  color: var(--aura-accent-text-color);
  border-color: var(--sormas-accent-50);
}
vaadin-tabs.disease-carousel-tabs vaadin-tab[selected] {
  color: var(--aura-accent-contrast-color);
  background: var(--aura-accent-color);
  border-color: var(--aura-accent-color);
}
/* Kill the default sliding underline indicator — the pill fill is the selection cue. */
vaadin-tabs.disease-carousel-tabs::part(tabs)::after,
vaadin-tabs.disease-carousel-tabs vaadin-tab::part(selected) { display: none; }

/* ---- disease selector bar: a clean carded toolbar holding the slide-show toggle + pill tabs ---- */
.disease-selector-bar {
  box-sizing: border-box;
  align-items: center;
  gap: var(--vaadin-gap-m);
  padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
  background: var(--vaadin-background-color);
  border: 1px solid var(--vaadin-border-color-secondary);
  border-radius: var(--vaadin-radius-l);
  box-shadow: var(--aura-shadow-xs);
}
.disease-selector-bar__slideshow {
  flex: 0 0 auto;
  align-self: center;
  padding-right: var(--vaadin-padding-m);
  border-right: 1px solid var(--vaadin-border-color-secondary);
  white-space: nowrap;
}
.disease-selector-bar__slideshow::part(label) {
  font-size: var(--aura-font-size-s);
  color: var(--vaadin-text-color-secondary);
}

/* overview toolbar (show first/all diseases + hide overview): right-align, quiet controls */
.dashboard-overview-toolbar {
  align-items: center;
  gap: var(--vaadin-gap-s);
  padding-top: var(--vaadin-padding-xs);
}
.dashboard-overview-toolbar vaadin-checkbox { font-size: var(--aura-font-size-s); }

/* ---- disease-burden tiles: compact saturated blocks (legacy Vaadin-8 look) ----
   Each DiseaseTileComponent is a small rounded tile whose top is a disease-coloured band —
   disease name on the left, a large case count paired with a chevron + previous-period count
   on the darker right — over a light "highlight" footer of caption/value stat rows. Colour
   comes from the ported background-disease-* / .background-darker theme classes. The wrapping
   DiseaseTileViewLayout (.disease-tile-grid) is a fixed three-column CSS grid with an even gap;
   it collapses to two / one column on narrower viewports. */
.disease-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vaadin-gap-m);
  width: 100%;
}
@media (max-width: 900px) { .disease-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .disease-tile-grid { grid-template-columns: minmax(0, 1fr); } }

.disease-tile {
  box-sizing: border-box;
  width: 100%;                       /* fill the grid column */
  align-items: stretch;              /* full-width band / footer inside the column */
  border-radius: var(--vaadin-radius-m);
  box-shadow: var(--aura-shadow-xs);
  overflow: hidden;
  transition: box-shadow 0.14s ease, transform 0.14s ease;
}
.disease-tile:hover { box-shadow: var(--aura-shadow-s); transform: translateY(-1px); }

/* coloured top band: name column (grows) + count column (~40%) */
.disease-tile__top { display: flex; align-items: stretch; min-height: 72px; }

.disease-tile__namecol {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}
.disease-tile__name {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.1;
  letter-spacing: 0.3px;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.disease-tile__name.is-long { font-size: 0.95rem; }
.disease-tile__outbreak {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 2px 6px;
  color: #fff;
  font-size: var(--sormas-font-size-xxs);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.disease-tile__countcol {
  flex: 0.65 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  color: #fff;
}
.disease-tile__count {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.disease-tile__comparison {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  font-size: 1.05rem;
  font-weight: 700;
}
.disease-tile__chevron { width: 15px; height: 15px; color: #fff; }

/* light footer of caption/value StatsItem rows */
.disease-tile__stats {
  gap: 2px;
  padding: 8px 10px;
  font-size: var(--aura-font-size-s);
}
.disease-tile__stats vaadin-horizontal-layout { line-height: 1.35; }

/* =============================================================================
   MAP MARKERS — ported 1:1 from the legacy Vaadin-8 map theme
   (sormas-ui/.../webapp/VAADIN/map/MarkerCluster.css). The Flow leaflet-connector.js
   builds each marker as an L.DivIcon whose className is "marker <type> <status>"
   (e.g. "marker case confirmed"); the connector only imports leaflet.markercluster's
   DEFAULT css, so these SORMAS-specific colour/shape/icon rules were missing and every
   case/contact/event marker rendered as an invisible empty div. The PNG-backed
   facility/event markers reference themes/sormas/marker/*.png (local, CSP-safe — no
   external hosts). The sample/aefi glyph overlays use the Vaadin-Icons font; if it is
   absent the coloured square still renders, so the marker stays visible.
   ============================================================================= */
/* Fullscreen control glyph (dependency-free control added in leaflet-connector.js — legacy parity). */
.leaflet-control-fullscreen-button {
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  text-decoration: none;
}

.marker {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.marker div {
  height: 80%;
  margin: 10%;
  padding-top: 40%;
  text-align: center;
}
.marker span {
  display: inline-block;
  font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
  line-height: 14px;
  margin-top: -7px;
  vertical-align: top;
}

.marker.case { border-radius: 20px; }
.marker.case div { border-radius: 20px; }

.marker.contact { border-radius: 2px; }
.marker.contact div { border-radius: 1px; }

.marker.case.confirmed,
.marker.contact.long-overdue { background-color: rgba(216, 49, 43, 0.8); }
.marker.case.confirmed div,
.marker.contact.long-overdue div { background-color: rgba(229, 166, 160, 0.8); }

.marker.case.probable { background-color: rgba(204, 103, 20, 0.8); }
.marker.case.probable div { background-color: rgba(250, 190, 146, 0.8); }

.marker.case.suspect,
.marker.contact.overdue { background-color: rgba(204, 173, 20, 0.8); }
.marker.case.suspect div,
.marker.contact.overdue div { background-color: rgba(250, 225, 146, 0.8); }

.marker.case.unclassified { background-color: rgba(127, 127, 127, 0.8); }
.marker.case.unclassified div { background-color: rgba(203, 203, 203, 0.8); }

.marker.contact.ok { background-color: rgba(76, 165, 67, 0.8); }
.marker.contact.ok div { background-color: rgba(175, 227, 168, 0.8); }

.marker.sample:after {
  content: "\e737";
  font-family: "Vaadin-Icons";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 25px;
  margin-top: -6px;
  z-index: -1;
}
.marker.sample div { border-radius: 0; }
.marker.sample.case div { background-color: rgba(216, 49, 43, 0.6); }
.marker.sample.case:after { color: rgba(216, 49, 43, 0.8); }
.marker.sample.contact div { background-color: rgba(204, 173, 20, 0.6); }
.marker.sample.contact:after { color: rgba(204, 173, 20, 0.8); }
.marker.sample.event-participant div { background-color: rgba(0, 90, 156, 0.6); }
.marker.sample.event-participant:after { color: rgba(0, 90, 156, 0.8); }
.marker.sample.environment div { background-color: rgba(175, 227, 168, 0.8); }
.marker.sample.environment:after { color: rgba(76, 165, 67, 0.8); }

.marker.facility { background-color: transparent; }
.marker.facility.confirmed { background-image: url("marker/facility-confirmed.png"); }
.marker.facility.suspect { background-image: url("marker/facility-suspect.png"); }
.marker.facility.probable { background-image: url("marker/facility-probable.png"); }
.marker.facility.unclassified { background-image: url("marker/facility-unclassified.png"); }

.marker.event { margin: -25% 0; }
.marker.event.outbreak { background-image: url("marker/event-outbreak.png"); }
.marker.event.rumor { background-image: url("marker/event-rumor.png"); }

.marker.aefi:after {
  content: "\e615";
  font-family: "Vaadin-Icons";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 25px;
  margin-top: -6px;
  z-index: -1;
}
.marker.aefi div { border-radius: 0; }
.marker.aefi.serious div { background-color: rgba(216, 49, 43, 0.6); }
.marker.aefi.serious:after { color: rgba(216, 49, 43, 0.8); }
.marker.aefi.non-serious div { background-color: rgba(204, 173, 20, 0.6); }
.marker.aefi.non-serious:after { color: rgba(204, 173, 20, 0.8); }
.marker.aefi.unclassified div { background-color: rgba(203, 203, 203, 0.8); }
.marker.aefi.unclassified:after { color: rgba(127, 127, 127, 0.8); }

/* Cluster bubbles reuse the same "marker <type>" classes; keep the count centred. */
.marker.cluster div { display: flex; align-items: center; justify-content: center; padding-top: 0; }
.marker.cluster span { margin-top: 0; font-weight: 600; }

/* ===========================================================================
   Grid navigation links — parity with the legacy Valo grids, where every
   clickable cell (UuidRenderer / ReferenceDtoHtmlProvider) was an <a> tinted
   $v-link-font-color. Applied by UuidRenderer/CaseUuidRenderer and any column
   whose click navigates (ShowDetailsListener target columns).
   =========================================================================== */
.sormas-grid-link {
  color: var(--aura-accent-text-color);
  cursor: pointer;
}
.sormas-grid-link:hover {
  text-decoration: underline;
}

/* Dense, scannable directory grids (every list view carries .sormas-grid via the shared
   bases). Aura has no "compact" grid variant — the old LUMO_COMPACT was a no-op — so
   density is set here through the grid's own custom property, expressed in Aura's container
   tokens so it keeps scaling with the theme.
   The divisor was /2 (6px -> 3px) for one build and got reported as "the grid font shrank". It was
   not the font — that had been 13px since the Aura migration — but easing the padding to /1.35
   (6px -> 4px) did not fix the complaint either, because 2px a row is imperceptible. The actual fix
   was raising the cell text to 14px (see the .sormas-grid-view rule above); this divisor just keeps
   the directories denser than Aura stock. Rounded to whole px, as Aura rounds its own padding. */
vaadin-grid.sormas-grid {
  --vaadin-grid-cell-padding: round(var(--vaadin-padding-block-container) / 1.35, 1px) var(--vaadin-padding-inline-container);
}
/* Per-row action controls (edit-column buttons, row-menu triggers, …) live in the cells' light
   DOM. A default-height button makes ITS rows taller than the text-only rows around it, so any
   directory with an action column (Tasks, Call Center, config views, …) stops matching Cases.
   Cap every in-cell button at the text-row height instead of fixing each view separately. */
.sormas-grid vaadin-grid-cell-content vaadin-button {
  min-height: 0;
  height: 1.5rem;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}


/* =============================================================================
   NATIONAL DASHBOARD — Nepal national overview, styled to the Claude Design
   prototype ("Nepal Surveillance Dashboard"). White cards on a cool canvas,
   brand blue #005A9C, semantic series colours (confirmed #1f8a4d / probable
   #e08600 / suspected #9ba3af). Real SORMAS data drives every panel.
   ============================================================================= */
.national-dashboard { gap: 16px; width: 100%; align-items: stretch; }
/* every panel/section fills the dashboard width (the panels are plain Divs, which a
   VerticalLayout aligns to start — without this they shrink to content and hug the left) */
.national-dashboard > * { width: 100%; box-sizing: border-box; }

/* generic carded panel */
.nd-card {
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e3e5ea;
  border-radius: 12px;
  box-shadow: 0 2px 8px -2px rgba(28,37,48,.10);
  padding: 16px 18px;
}
.nd-card__head { margin-bottom: 12px; }
.nd-card__title { display: block; font-size: 14.5px; font-weight: 700; color: #1c2530; }
.nd-card__subtitle { display: block; font-size: 11.5px; color: #6a7280; margin-top: 2px; }

/* KPI row — fixed 6 columns, collapsing on narrow viewports */
.nd-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1200px) { .nd-kpi-row { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 640px)  { .nd-kpi-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.nd-kpi {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e3e5ea;
  border-radius: 12px;
  box-shadow: 0 2px 8px -2px rgba(28,37,48,.10);
  padding: 15px 17px;
}
.nd-kpi__accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--nd-kpi-accent, #005A9C); }
.nd-kpi__label { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5d6672; }
.nd-kpi__value-row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 8px; }
.nd-kpi__value { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #1c2530; }
.nd-kpi__spark { opacity: .85; }
.nd-kpi__sub-row { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.nd-kpi__sub { font-size: 11.5px; color: #6a7280; }
.nd-kpi__delta { font-size: 11.5px; font-weight: 700; }

/* cases by province & district */
.nd-province-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
@media (max-width: 1100px) { .nd-province-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .nd-province-grid { grid-template-columns: minmax(0,1fr); } }
.nd-province { border: 1px solid #eef0f3; border-radius: 10px; padding: 12px 13px; }
.nd-province__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid #f3f5f8; }
.nd-province__name { font-size: 12.5px; font-weight: 700; color: #1c2530; }
.nd-province__total { font-size: 13px; font-weight: 800; color: #005A9C; }
.nd-district { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nd-district__name { width: 84px; flex-shrink: 0; font-size: 10.5px; color: #333b47; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-district__track { flex: 1; height: 8px; background: #f3f5f8; border-radius: 4px; overflow: hidden; }
.nd-district__fill { height: 100%; border-radius: 4px; }
.nd-district__value { width: 26px; text-align: right; font-size: 10.5px; font-weight: 700; color: #1c2530; flex-shrink: 0; }

/* bottom grid: top diseases | donut | pyramid */
.nd-bottom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.nd-compare-picker { margin: 4px 0 10px; max-width: 520px; }
@media (max-width: 640px) { .nd-bottom-grid { grid-template-columns: minmax(0,1fr); } }

/* top diseases */
.nd-topdis__row { margin-bottom: 11px; }
.nd-topdis__head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.nd-topdis__name { color: #333b47; font-weight: 600; }
.nd-topdis__value { color: #1c2530; font-weight: 700; }
.nd-topdis__track { height: 9px; background: #f3f5f8; border-radius: 5px; overflow: hidden; }
.nd-topdis__fill { height: 100%; border-radius: 5px; background: #005A9C; }

/* classification donut */
.nd-donut { display: flex; align-items: center; gap: 18px; }
.nd-donut__ring { flex-shrink: 0; }
.nd-donut__legend { flex: 1; }
.nd-donut__legend-row { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; }
.nd-donut__dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.nd-donut__label { font-size: 12.5px; color: #333b47; font-weight: 600; flex: 1; }
.nd-donut__count { font-size: 12.5px; color: #1c2530; font-weight: 700; }
.nd-donut__pct { font-size: 11px; color: #9ba3af; width: 34px; text-align: right; }

/* geographic distribution: province choropleth + side list */
.nd-geo { display: flex; gap: 18px; align-items: flex-start; }
.nd-geo__map { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nd-map { background: #fbfcfe; border: 1px solid #eef0f3; border-radius: 10px; padding: 6px; position: relative; }

/* drill transition: the whole scene zooms/fades in on every re-render */
@keyframes ndMapScene { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.nd-map__scene { animation: ndMapScene .35s ease both; transform-origin: 50% 50%; }

/* per-shape staggered fade-in (delay set inline per shape) */
@keyframes ndMapShape { from { opacity: 0; } to { opacity: 1; } }
.nd-map__shape {
  animation: ndMapShape .4s ease both;
  cursor: pointer;
  transition: filter .15s ease, stroke .15s ease, stroke-width .15s ease;
}
/* hover: brighten + outline, keeping the choropleth colour readable (no fill override) */
.nd-map__shape:hover { filter: brightness(1.12) saturate(1.25) drop-shadow(0 2px 6px rgba(20,33,61,.35)); stroke: #1c2530; stroke-width: 2.2; }

/* labels fade in after the shapes */
@keyframes ndMapLabel { from { opacity: 0; } to { opacity: 1; } }
.nd-map__label { animation: ndMapLabel .4s ease .3s both; }

/* floating cursor tooltip (design tipRef) */
.nd-map__tip {
  position: fixed;
  display: none;
  z-index: 9999;
  pointer-events: none;
  background: #1c2530;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(20,33,61,.3);
  min-width: 110px;
}
.nd-map__tip b { font-size: 12px; }
.nd-geo__legend { display: flex; align-items: center; gap: 3px; margin-top: 10px; padding-left: 4px; }
.nd-geo__legend-label { font-size: 11px; color: #6a7280; font-weight: 600; margin-right: 6px; }
.nd-geo__legend-swatch { width: 42px; height: 13px; border-radius: 2px; }
.nd-geo__legend-hint { font-size: 10.5px; color: #9ba3af; margin-left: 8px; }
.nd-geo__side { width: 272px; flex-shrink: 0; border-left: 1px solid #eef0f3; padding-left: 16px; }
@media (max-width: 900px) { .nd-geo { flex-direction: column; } .nd-geo__side { width: 100%; border-left: none; padding-left: 0; } }
.nd-geo__side-title { display: block; font-size: 12px; font-weight: 700; color: #005A9C; margin-bottom: 12px; }
.nd-geo__side-list { max-height: 480px; overflow-y: auto; padding-right: 6px; }
.nd-geo__row { margin-bottom: 10px; cursor: pointer; }
.nd-geo__row:hover .nd-geo__row-name { color: #005A9C; }
.nd-geo__row-head { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 3px; }
.nd-geo__row-name { color: #333b47; font-weight: 600; }
.nd-geo__row-value { color: #1c2530; font-weight: 700; }
.nd-geo__row-track { height: 7px; background: #f3f5f8; border-radius: 4px; overflow: hidden; }
.nd-geo__row-fill { height: 100%; background: #005A9C; border-radius: 4px;
  transform-origin: left center; animation: ndFillGrow .6s ease both; }
@keyframes ndFillGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* geo drill-down: breadcrumb + map note */
.nd-geo__crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 2px 0 12px; font-size: 12.5px; }
.nd-geo__crumb { color: #1c2530; font-weight: 700; }
.nd-geo__crumb.is-link { color: #005A9C; font-weight: 600; cursor: pointer; }
.nd-geo__crumb.is-link:hover { text-decoration: underline; }
.nd-geo__crumb-sep { color: #9ba3af; }
.nd-geo__map-note { color: #6a7280; font-size: 12px; padding: 24px 6px; background: #fbfcfe; border: 1px dashed #e3e5ea; border-radius: 10px; text-align: center; }

/* ============================ NATIONAL DASHBOARD — Events / News / Call Center ============================ */
.nd-section-head { display: flex; align-items: center; gap: 11px; margin: 8px 2px 12px; }
.nd-section-head__icon { width: 30px; height: 30px; border-radius: 8px; background: #e8f1fe; flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 9h18M7 3v3M17 3v3M5 6h14a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Z' stroke='%23005A9C' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.nd-section-head__title { display: block; font-size: 15px; font-weight: 800; color: #1c2530; }
.nd-section-head__subtitle { display: block; font-size: 11.5px; color: #6a7280; margin-top: 1px; }

/* coloured pill */
.nd-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }

/* mini KPI row */
.nd-mini-kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 640px) { .nd-mini-kpi-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.nd-mini-kpi { position: relative; overflow: hidden; background: #fff; border: 1px solid #e3e5ea; border-radius: 12px;
  box-shadow: 0 2px 8px -2px rgba(28,37,48,.10); padding: 13px 15px; }
.nd-mini-kpi__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5d6672; }
.nd-mini-kpi__value { display: block; font-size: 24px; font-weight: 800; color: #1c2530; margin-top: 5px; line-height: 1; }

/* funnel */
.nd-funnel__stage { margin-bottom: 12px; }
.nd-funnel__head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.nd-funnel__label { color: #333b47; font-weight: 600; }
.nd-funnel__value { color: #1c2530; font-weight: 700; }
.nd-funnel__track { height: 14px; background: #f3f5f8; border-radius: 6px; overflow: hidden; }
.nd-funnel__fill { height: 100%; border-radius: 6px; transition: width .2s; }

/* breakdown grid (4 across) */
.nd-breakdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 1100px) { .nd-breakdown-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .nd-breakdown-grid { grid-template-columns: minmax(0,1fr); } }

/* segmented bar + legend */
.nd-seg__bar { display: flex; height: 15px; border-radius: 6px; overflow: hidden; background: #f3f5f8; }
.nd-seg__part { height: 100%; }
.nd-seg__legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.nd-seg__legend-item { display: flex; align-items: center; gap: 6px; }
.nd-seg__dot { width: 10px; height: 10px; border-radius: 3px; }
.nd-seg__legend-label { font-size: 11.5px; color: #333b47; font-weight: 600; }

/* events table */
.nd-etable { width: 100%; font-size: 11.5px; }
.nd-etable__row { display: grid; grid-template-columns: 48px 1.6fr 1fr .9fr .9fr 52px 56px 90px 84px 52px;
  gap: 8px; align-items: center; padding: 7px 4px; border-bottom: 1px solid #f3f5f8; }
/* signals table: ID, Signal, Disease, Province, District, Status, Week (no Cases/Deaths/Risk) */
.nd-etable--signal .nd-etable__row { grid-template-columns: 48px 1.7fr 1fr .9fr .9fr 96px 52px; }
.nd-etable-caption { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #5d6672; margin: 12px 0 4px; }
.nd-etable__row--head { font-weight: 700; color: #5d6672; text-transform: uppercase; font-size: 10px; letter-spacing: .03em; border-bottom: 1px solid #e3e5ea; }
.nd-etable__cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333b47; }
.nd-etable__id { color: #9ba3af; font-weight: 700; }
.nd-etable__title { color: #1c2530; font-weight: 600; }
.nd-etable__num { text-align: center; font-weight: 700; color: #1c2530; }
@media (max-width: 1100px) { .nd-etable--event .nd-etable__row { grid-template-columns: 40px 1.4fr 1fr 44px 44px 78px 74px; }
  .nd-etable--event .nd-etable__row > :nth-child(4), .nd-etable--event .nd-etable__row > :nth-child(5), .nd-etable--event .nd-etable__row > :nth-child(10) { display: none; }
  .nd-etable--signal .nd-etable__row { grid-template-columns: 40px 1.5fr 1fr 86px 48px; }
  .nd-etable--signal .nd-etable__row > :nth-child(4), .nd-etable--signal .nd-etable__row > :nth-child(5) { display: none; } }

/* news section */
.nd-news-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr; gap: 16px; }
@media (max-width: 1100px) { .nd-news-grid { grid-template-columns: minmax(0,1fr); } }
.nd-news-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.nd-news-kpi__label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #5d6672; }
.nd-news-kpi__value { display: block; font-size: 22px; font-weight: 800; color: #1c2530; margin-top: 3px; line-height: 1; }
.nd-news-kpi__sub { display: block; font-size: 10px; color: #9ba3af; margin-top: 4px; }
.nd-alert-head { display: flex; align-items: center; justify-content: space-between; }
.nd-alert-chip { background: #fdecea; color: #cf3a25; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 20px; }
.nd-alert-list { margin-top: 10px; max-height: 360px; overflow-y: auto; }
.nd-alert-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f3f5f8; }
.nd-alert-row__disease { display: block; font-size: 12.5px; font-weight: 700; color: #1c2530; }
.nd-alert-row__place { display: block; font-size: 11px; color: #6a7280; margin-top: 1px; }
.nd-alert-row__meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nd-alert-row__time { font-size: 10.5px; color: #9ba3af; white-space: nowrap; }

.nd-empty { padding: 18px 4px; text-align: center; color: #9ba3af; font-size: 12px; }

/* ===========================================================================
   National dashboard — single-page A3 print report (.ndr-sheet)
   A dedicated, purpose-built A3-landscape report rendered by nd-report.js from
   live data (see NationalDashboardPrintReport). It is a fixed-size A3 grid that
   is hidden on screen; the Print button adds body.nd-printing to reveal it (as a
   full-viewport fixed overlay so the charts can measure their cells), draws the
   charts, and prints. @media print hides the app shell so only the sheet prints.
   Everything is scoped under .ndr-sheet / body.nd-printing — the normal app is
   untouched.
   =========================================================================== */
.nd-print-btn { cursor: pointer; }

/* hidden on screen; revealed as a fixed A3 overlay while printing */
.ndr-sheet { display: none; }
body.nd-printing .ndr-sheet {
  display: grid; position: fixed; top: 0; left: 0; z-index: 99999;
  width: 420mm; height: 297mm; padding: 9mm; box-sizing: border-box;
  background: #fff; color: #16202b; overflow: hidden;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1.48fr 0.98fr 0.86fr 0.78fr 0.92fr auto;
  gap: 3.2mm;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 9px; line-height: 1.25;
}

/* --- report header --- */
.ndr-sheet .ndr-head { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 2.2px solid #005A9C; padding-bottom: 2.4mm; }
.ndr-sheet .ndr-brand { display: flex; align-items: center; gap: 3mm; }
.ndr-sheet .ndr-flag { width: 11mm; height: 11mm; border-radius: 2px; flex: 0 0 auto; background: linear-gradient(135deg, #005A9C, #3dabb3); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: -.02em; }
.ndr-sheet .ndr-flag--img { background: none; border-radius: 0; }
.ndr-sheet .ndr-flag--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ndr-sheet .ndr-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #16202b; }
.ndr-sheet .ndr-sub { font-size: 9.5px; color: #5d6672; margin-top: .5mm; }
.ndr-sheet .ndr-meta { text-align: right; font-size: 9px; color: #5d6672; }
.ndr-sheet .ndr-meta b { color: #16202b; font-weight: 700; }
.ndr-sheet .ndr-period { font-size: 11.5px; color: #0a3f8f; font-weight: 700; }

/* --- footer: active filters --- */
.ndr-sheet .ndr-foot { grid-column: 1 / -1; border-top: 1px solid #e7eaef; padding-top: 1.6mm; font-size: 8.4px; color: #5d6672; font-weight: 600; }

/* --- generic card --- */
.ndr-sheet .ndr-card { background: #fff; border: 1px solid #e7eaef; border-radius: 6px; padding: 2.4mm 2.6mm; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.ndr-sheet .ndr-card > h3 { margin: 0 0 1.4mm; font-size: 9px; font-weight: 700; color: #16202b; display: flex; justify-content: space-between; align-items: baseline; gap: 2mm; }
.ndr-sheet .ndr-card > h3 .hn { font-size: 7.6px; font-weight: 600; color: #97a0ac; letter-spacing: .02em; }
.ndr-sheet .ndr-plot { flex: 1; min-height: 0; min-width: 0; }
.ndr-sheet .ndr-plot svg { width: 100%; height: 100%; display: block; }

/* --- hero: map + KPIs --- */
.ndr-sheet .ndr-hero { grid-column: 1 / -1; display: grid; grid-template-columns: 1.32fr 1fr; gap: 3.2mm; min-height: 0; }
.ndr-sheet .ndr-heromap { display: grid; grid-template-columns: 1fr auto; gap: 2.4mm; }
.ndr-sheet .ndr-mapwrap { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ndr-sheet .ndr-map { flex: 1; min-height: 0; }
.ndr-sheet .ndr-map svg { width: 100%; height: 100%; }
.ndr-sheet .ndr-maplegend { display: flex; align-items: center; gap: 2.6mm; font-size: 7.4px; color: #5d6672; padding-top: 1mm; }
.ndr-sheet .ndr-grad { display: flex; }
.ndr-sheet .ndr-gr { width: 6mm; height: 2.4mm; }
.ndr-sheet .ndr-provrank { display: flex; flex-direction: column; min-width: 26mm; padding-left: 1mm; }
.ndr-sheet .ndr-pr { display: grid; grid-template-columns: 2mm 1fr auto; gap: 1.4mm; align-items: center; padding: .75mm 0; border-bottom: 1px solid #e7eaef; font-size: 7.8px; }
.ndr-sheet .ndr-pr:last-child { border-bottom: 0; }
.ndr-sheet .ndr-prsw { width: 2mm; height: 2mm; border-radius: 1px; }
.ndr-sheet .ndr-prn { color: #16202b; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndr-sheet .ndr-prv { font-weight: 800; color: #16202b; font-variant-numeric: tabular-nums; }

/* --- KPI cards --- */
.ndr-sheet .ndr-kpis { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 3.2mm; min-height: 0; }
.ndr-sheet .ndr-kpi { position: relative; background: #fbfcfe; border: 1px solid #e7eaef; border-radius: 6px; padding: 2.6mm 3mm 2.6mm 4mm; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.ndr-sheet .ndr-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 1.6mm; }
.ndr-sheet .ndr-klabel { font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #5d6672; }
.ndr-sheet .ndr-krow { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 1mm; gap: 2mm; }
.ndr-sheet .ndr-kval { font-size: 25px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #16202b; font-variant-numeric: tabular-nums; }
.ndr-sheet .ndr-ksub { display: flex; align-items: center; justify-content: space-between; margin-top: 1.2mm; }
.ndr-sheet .ndr-kcap { font-size: 7.8px; color: #97a0ac; }
.ndr-sheet .ndr-kdelta { font-size: 8px; font-weight: 700; }

/* --- band placement --- */
.ndr-sheet .ndr-s3 { grid-column: span 3; }
.ndr-sheet .ndr-s4 { grid-column: span 4; }
.ndr-sheet .ndr-s6 { grid-column: span 6; }

/* --- chart legends --- */
.ndr-sheet .ndr-clegend { display: flex; flex-wrap: wrap; gap: 1mm 3mm; margin-top: 1mm; font-size: 7.4px; color: #5d6672; }
.ndr-sheet .sw { display: inline-flex; align-items: center; gap: 1mm; }
.ndr-sheet .dot { width: 2mm; height: 2mm; border-radius: 1px; }

/* --- mini stat panels (events / news / calls) --- */
.ndr-sheet .ndr-minihead { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2mm; margin-bottom: 2mm; }
.ndr-sheet .ndr-minihead .m { background: #fbfcfe; border: 1px solid #e7eaef; border-radius: 4px; padding: 1.8mm 2mm; }
.ndr-sheet .ndr-minihead .mv { font-size: 15px; font-weight: 800; color: #16202b; line-height: 1; font-variant-numeric: tabular-nums; }
.ndr-sheet .ndr-minihead .ml { font-size: 7.2px; color: #5d6672; text-transform: uppercase; letter-spacing: .04em; margin-top: .8mm; font-weight: 700; }
.ndr-sheet .ndr-rowlist { flex: 1; display: flex; flex-direction: column; justify-content: space-around; min-height: 0; }
.ndr-sheet .ndr-statrow { display: flex; justify-content: space-between; align-items: center; padding: 1.3mm 0; border-bottom: 1px dashed #e7eaef; }
.ndr-sheet .ndr-statrow:last-child { border-bottom: 0; }
.ndr-sheet .ndr-sk { color: #5d6672; font-size: 8.8px; display: flex; align-items: center; gap: 1.6mm; }
.ndr-sheet .ndr-chip { width: 2.2mm; height: 2.2mm; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.ndr-sheet .ndr-sv { font-weight: 800; font-size: 9.8px; color: #16202b; font-variant-numeric: tabular-nums; }

@media print {
  @page { size: A3 landscape; margin: 0; }
  /* only the report prints: drop the app shell chrome and every non-report panel */
  body.nd-printing vaadin-app-layout::part(navbar),
  body.nd-printing vaadin-app-layout::part(drawer),
  body.nd-printing vaadin-app-layout::part(backdrop) { display: none !important; }
  body.nd-printing vaadin-app-layout { padding: 0 !important; --vaadin-app-layout-drawer-offset-left: 0px; }
  body.nd-printing .sormas-dashboard-header { display: none !important; }
  body.nd-printing .sormas-dashboard-content > *:not(.ndr-sheet) { display: none !important; }
  body.nd-printing * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* The former route-scoped ".aura-theme" overlay (a hand-rolled Lumo-token
   imitation of Aura for the Cases/Case-detail/Syndromic-dashboard routes) was
   removed: the whole app now runs the real Aura base theme. */

/* ==========================================================================
   Detail shell restored (2026-07-23): AbstractDetailLayout header — back-link +
   title block + action cluster + tab strip, carded main pane + sticky side cards.
   Layout-only; colours/shapes come from Aura tokens. ========================== */
.sormas-detail-view {
  padding: 0;
  background: var(--sormas-canvas);
  gap: 0;
  /* Detail pages are FULL-SCREEN (legacy parity): uncap the embedded edit form and the action bars, which read this
     token (forms via the .sormas-form rule). Forms in dialogs/standalone hosts keep the 900px fallback. */
  --sormas-form-max-width: none;
  /* App-shell layout: the view fills the app-layout content area and does NOT scroll itself. The top zone is a fixed
     (non-scrolling) region and only the body scrolls beneath it, so the header + tabs stay pinned for the whole page
     no matter how long the form is. (setSizeFull gives the view a definite height for the flex:1 body to resolve.) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
/* Fixed top zone: the one-row action bar + the tab strip. Sits ABOVE the scrolling body (not inside it), so it never
   scrolls away. flex:0 0 auto keeps it at its natural height; the body below takes the rest. */
.sormas-detail-sticky {
  flex: 0 0 auto;
  /* z-index: 3; */
  /* Span the full row: VerticalLayout does not stretch its children, so without this the zone shrinks to its
     content width and the action cluster stops mid-row instead of reaching the right edge. */
  width: 100%;
  box-sizing: border-box;
  background: var(--sormas-canvas);
  padding: var(--vaadin-padding-xs) var(--vaadin-padding-l) 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
/* The single action row: [back link + entity title] ......... [Send email / Delete / Archive / Discard / Save]. */
.sormas-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vaadin-gap-m);
  min-height: 32px;
}
/* Left group: back nav inline with the title block. */
.sormas-detail-title {
  display: flex;
  align-items: center;
  gap: var(--vaadin-gap-s);
  min-width: 0;
}
.sormas-detail-backnav {
  flex: 0 0 auto;
}
/* Title = name + status on ONE line (baseline-aligned), so the header stays a single compact row. */
.sormas-detail-title-block {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--vaadin-gap-s);
  line-height: 1.15;
  min-width: 0;
}
.sormas-detail-title-name {
  font-weight: 700;
  font-size: var(--aura-font-size-m); /* Aura-comfortable (legacy used the smaller -s) */
  color: var(--vaadin-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sormas-detail-title-sub {
  font-size: var(--aura-font-size-xs);
  color: var(--vaadin-text-color-secondary);
}
/* Right group: compact action-button cluster, kept on one line. */
.sormas-detail-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.sormas-detail-actionbar {
  gap: var(--vaadin-gap-xs);
  flex-wrap: nowrap;
  display: flex;
  width: 100%;
  align-items: center;
}
.sormas-detail-actionbar vaadin-button {
  margin: 0;
}

/* Desktop: show all action buttons inline */
.sormas-actionbar-desktop {
  display: flex;
  gap: var(--vaadin-gap-xs);
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
}

/* Mobile: hide desktop buttons and show menu button */
.sormas-actionbar-mobile {
  display: none;
}

.sormas-actionbar-mobile-menu-btn {
  padding: 0.5rem;
}

/* Responsive: on a phone, hide desktop buttons and show menu. 640px = the app-wide phone
   breakpoint (filter bar, status bar, AbstractAutoGridView.PHONE_BREAKPOINT) — keep them agreeing. */
@media (max-width: 640px) {
  .sormas-actionbar-desktop {
    display: none;
  }

  .sormas-actionbar-mobile {
    display: flex;
    align-items: center;
  }

  .sormas-detail-actionbar {
    justify-content: flex-end;
  }
}
.sormas-detail-tabs {
  border-bottom: 1px solid var(--vaadin-border-color-secondary);
  margin: 0;
}
/* Detail body row: main pane + side column, wrapping on narrow screens. AbstractDetailLayout sets the flex
   bases inline (main flex:1 1 0; side flex:1 1 clamp(300px,33%,460px)) reproducing the legacy ~8/12 : ~4/12
   split; the wrap + the media rule below own the stacking so a host never re-styles. */
.sormas-detail-body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vaadin-gap-m);
  width: 100%;
  box-sizing: border-box;
  padding: var(--vaadin-padding-m) var(--vaadin-padding-l);
  /* The single scrolling region of the detail view: takes all height below the fixed top zone and scrolls. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* Carded main content — the embedded edit form / child grid floats on white. The form inside is uncapped
   (--sormas-form-max-width: none on the detail view), so it fills the whole pane like the legacy detail pages. */
.sormas-detail-main {
  background: var(--vaadin-background-color);
  border: 1px solid var(--vaadin-border-color-secondary);
  border-radius: var(--vaadin-radius-l);
  box-shadow: var(--aura-shadow-s);
  padding: var(--vaadin-padding-l);
}
/* Right column: stack the related-entity side cards with breathing room, and STICK it so the cards stay in view
   while the main form scrolls inside the body. The body is the scroll container now, so the column sticks to top:0
   of the body; align-self:flex-start caps it to its own content height (not the taller main pane) so position:sticky
   has room to work, and max-height + overflow let a tall card stack scroll internally rather than run off-screen.
   The cap is 100% of the body's (definite) height — NOT a 100vh calc: a viewport guess that omits any of the chrome
   above the body (app navbar + top bar + tab strip) makes the column taller than the scrollport, so its last card
   is clipped below the fold while scrolling and the whole column slides under the tab strip at scroll-end. */
.sormas-detail-side {
  display: flex;
  flex-direction: column;
  gap: var(--vaadin-gap-m);
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100%;
  overflow-y: auto;
}
/* Narrow screens: force the main + side to full width so the side wraps BELOW the main (the row can no longer
   fit both flex bases side-by-side), and drop the sticky behaviour (a full-width stacked side should scroll with
   the page). ~900px mirrors the legacy point where the 4/12 side dropped under. */
@media (max-width: 900px) {
  .sormas-detail-main,
  .sormas-detail-side {
    flex: 1 1 100% !important;
  }
  .sormas-detail-side {
    position: static;
    max-height: none;
    overflow: visible;
  }
}
/* ---- reusable side-panel card chrome (domain agents: wrap each related-entity panel in .sormas-side-card) ----
   A white card matching the main pane, with an optional .sormas-side-card-title header row, so a domain never
   has to re-derive the detail-side look. Drop AbstractListSideComponents (samples/tasks/documents/…) inside it. */
.sormas-side-card {
  background: var(--vaadin-background-color);
  border: 1px solid var(--vaadin-border-color-secondary);
  border-radius: var(--vaadin-radius-l);
  box-shadow: var(--aura-shadow-s);
  overflow: hidden;
}
.sormas-side-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vaadin-gap-s);
  padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
  border-bottom: 1px solid var(--vaadin-border-color-secondary);
  font-size: var(--aura-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--vaadin-text-color-secondary);
}
.sormas-side-card-body {
  padding: var(--vaadin-padding-m);
}
/* The detail header (entity title block above the tabs). */
.sormas-detail-view > span:first-child {
  font-weight: 700;
  color: var(--vaadin-text-color);
}

/* ==========================================================================
   Edit-form layout restored (2026-07-23): AbstractEditForm — section CARDS,
   2-column field grid + compact rhythm, section-header eyebrow, read-only flatten.
   Aura tokens throughout; section accent uses Aura's accent (was SORMAS-blue).
   ========================================================================== */
/* ===========================================================================
   STEP 3 — edit forms (AbstractEditForm): airy 2-column layout + section headers.
   The card chrome itself is supplied by the host (detail tab / dialog), so this
   only owns spacing + the section "eyebrow" rule. Applies to all 44 forms.
   =========================================================================== */
.sormas-form {
  width: 100%;
  /* Legacy width parity: cap at the legacy 900px (Vaadin 8 AbstractEditForm fixed 900px) and centre. The cap
     is set per-form as the --sormas-form-max-width custom property by AbstractEditForm.setFormMaxWidth(...);
     the fallback keeps a naked .sormas-form capped even if a host never sets it. Because it is a max-width the
     2-column grid still reflows to 1 column and fills the width below the 520px responsive step. */
  max-width: var(--sormas-form-max-width, 900px);
  margin-inline: auto;
  --vaadin-form-layout-column-spacing: 24px;
  /* Airy vertical rhythm to match Aura's gallery spacing (was a tight legacy 8px). */
  --vaadin-form-layout-row-spacing: 16px;
}
/* Field labels WRAP instead of being cut off with an ellipsis. Vaadin keeps a field's label on one line by default,
   which silently truncates the long questions SORMAS asks — the IRA decision tree ("Is the disease/signal/event/
   cluster usual and verified?") showed as "Is the disease/signal/event/cluste…" in a 4-column slot. A question the
   user cannot read is a question they cannot answer, so labels are allowed as many lines as they need. */
.sormas-form *::part(label) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}

/* ---- Risk-level colour coding: green (low) / yellow (moderate) / red (high) ----
   Used for the IRA's computed result and the event's read-only risk-level field, so the assessed risk reads at a
   glance. Colours carry a text label too — never colour alone. */
.sormas-risk-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  font-weight: 600;
}
.sormas-risk-badge--low { background: #e3f5e8; color: #14682f; }
.sormas-risk-badge--moderate { background: #fdf1cf; color: #7a5800; }
.sormas-risk-badge--high { background: #fbe1e0; color: #a8201a; }
.sormas-risk-badge--unknown {
  background: var(--vaadin-background-container, #eceff3);
  color: var(--vaadin-text-color-secondary, #6a7686);
}
/* Same scale on the event's (read-only) risk-level combo box. */
.sormas-risk-field--low::part(input-field) { background: #e3f5e8; color: #14682f; font-weight: 600; }
.sormas-risk-field--moderate::part(input-field) { background: #fdf1cf; color: #7a5800; font-weight: 600; }
.sormas-risk-field--high::part(input-field) { background: #fbe1e0; color: #a8201a; font-weight: 600; }

/* NOTE (2026-07-23): the legacy field/label density compression that used to live here
   (padding:0 + --vaadin-padding-inline-container:0.4rem + tight label padding) was REMOVED
   so form inputs render at full native Aura height/padding — matching the Aura component
   gallery the user wants. Section grouping now comes from the cards below, not from squashing. */
/* Below the single-column breakpoint the width cap would leave dead space in a narrow dialog/pane — let the
   form fill its host so fields aren't pinched. Mirrors the responsive step that drops the form to 1 column. */
@media (max-width: 520px) {
  .sormas-form { max-width: none; }
}
/* Section heading: a clean uppercase blue title over a hairline rule with generous separation above. Light enough
   that a form with many sections (e.g. Case data) stays uncluttered, while still clearly dividing sections. The
   selector is tag-agnostic so nested sub-form headings (e.g. Health conditions, an <h3>) can share the exact look. */
.sormas-form-section {
  display: block;
  margin: 12px 0 6px;
  padding: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--aura-accent-color);
  border-bottom: 2px solid var(--vaadin-border-color-secondary);
  line-height: 1.2;
}
.sormas-form-section--subsequent { margin-top: 14px; }

/* Section cards: startSection() wraps each section (header + its fields) in a bordered card so every edit-form tab
   reads as grouped cards, matching the Symptoms group cards. The header becomes the card's top band. */
.sormas-section-card {
  border: 1px solid var(--vaadin-border-color-secondary);
  border-radius: var(--vaadin-radius-l, 10px);
  background: var(--vaadin-background-color, #fff);
  padding: 0 var(--vaadin-padding-m) var(--vaadin-padding-s);
  margin: 0 0 var(--vaadin-padding-s);
  box-sizing: border-box;
}
.sormas-section-card > .sormas-form-section {
  margin: 0 calc(-1 * var(--vaadin-padding-m)) var(--vaadin-padding-s);
  padding: 6px var(--vaadin-padding-m) 6px calc(var(--vaadin-padding-m) + 4px);
  border: 0;
  border-bottom: 1px solid var(--vaadin-border-color-secondary);
  border-left: 4px solid var(--aura-accent-color);
  background: var(--sormas-canvas, #F3F6F9);
  border-radius: var(--vaadin-radius-l, 10px) var(--vaadin-radius-l, 10px) 0 0;
}
/* a section hidden via setVisible(false) (Flow stamps [hidden] on the header) collapses its whole card */
.sormas-section-card:has(> .sormas-form-section[hidden]) { display: none; }

/* ---- hand-composed section cards (AbstractDetailLayout#sectionCard) ----
   Same card and header band as the form sections above, but the body holds GRIDS rather than labelled fields, so it
   is a plain vertical stack instead of a FormLayout. Used by the Therapy, Clinical course and Lab results case tabs,
   which previously rendered a bare <h4> over an unstyled grid right beside properly carded form sections. */
.sormas-section-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--vaadin-gap-s);
  /* flex children default to min-width:auto — without this a wide grid widens the card instead of scrolling inside it */
  min-width: 0;
}
/* The card already draws the frame, so a grid inside it must not draw a second one. Pulling the grid out to the
   card's inline padding edges lines its first column up with the header band's text above it. */
.sormas-section-card__content > vaadin-grid {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-inline: calc(-1 * var(--vaadin-padding-m));
  width: auto;
}
/* Same treatment for a grid nested one level down inside a wrapper component (EditableSubEntityGrid is a CustomField
   that wraps its grid together with the New/Delete row actions, so the grid is not a direct child). */
.sormas-section-card__content vaadin-grid.sormas-grid {
  border: 0;
  box-shadow: none;
}
/* Empty-state line ("No samples have been created for this case") reads as quiet secondary text, not body copy. */
.sormas-section-card__content .sormas-section-empty {
  color: var(--vaadin-text-color-secondary);
  font-size: var(--aura-font-size-s);
  padding: var(--vaadin-padding-xs) 0;
}

/* Read-only provenance line sitting in a form slot next to a field (e.g. the sample's "Reported on <date> by
   <user>"): plain secondary text, baseline-aligned with the input next to it rather than to the field's label. */
.sormas-form-meta {
  display: flex;
  align-items: center;
  min-height: var(--vaadin-input-field-height, 36px);
  align-self: end;
  color: var(--vaadin-text-color-secondary, #5A6672);
  font-size: var(--vaadin-font-size-s, 0.875rem);
}

/* ===========================================================================
   Read-only VIEW mode — AbstractEditForm.setFormReadOnly(true) adds .sormas-form--view.
   Only ANSWERED fields are shown (empty ones + empty section cards are hidden in Java);
   here each shown field is flattened from an input box into plain "label + value" text so
   the entity reads like a filled-in report instead of a locked, mostly-empty form.
   =========================================================================== */
.sormas-form--view vaadin-text-field::part(input-field),
.sormas-form--view vaadin-text-area::part(input-field),
.sormas-form--view vaadin-number-field::part(input-field),
.sormas-form--view vaadin-integer-field::part(input-field),
.sormas-form--view vaadin-big-decimal-field::part(input-field),
.sormas-form--view vaadin-email-field::part(input-field),
.sormas-form--view vaadin-password-field::part(input-field),
.sormas-form--view vaadin-date-picker::part(input-field),
.sormas-form--view vaadin-time-picker::part(input-field),
.sormas-form--view vaadin-combo-box::part(input-field),
.sormas-form--view vaadin-multi-select-combo-box::part(input-field),
.sormas-form--view vaadin-select::part(input-field) {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  min-height: 1.5em;
  cursor: default;
}
/* The value text reads as content (darker, medium weight); the label sits above it as a muted caption. */
.sormas-form--view vaadin-text-field,
.sormas-form--view vaadin-text-area,
.sormas-form--view vaadin-number-field,
.sormas-form--view vaadin-integer-field,
.sormas-form--view vaadin-big-decimal-field,
.sormas-form--view vaadin-email-field,
.sormas-form--view vaadin-password-field,
.sormas-form--view vaadin-date-picker,
.sormas-form--view vaadin-time-picker,
.sormas-form--view vaadin-combo-box,
.sormas-form--view vaadin-multi-select-combo-box,
.sormas-form--view vaadin-select {
  --vaadin-text-color: #1A2832; /* darken the value text a step (legacy header shade) */
  --vaadin-input-field-value-font-weight: 500;
}
.sormas-form--view vaadin-text-field::part(label),
.sormas-form--view vaadin-text-area::part(label),
.sormas-form--view vaadin-number-field::part(label),
.sormas-form--view vaadin-integer-field::part(label),
.sormas-form--view vaadin-big-decimal-field::part(label),
.sormas-form--view vaadin-email-field::part(label),
.sormas-form--view vaadin-password-field::part(label),
.sormas-form--view vaadin-date-picker::part(label),
.sormas-form--view vaadin-time-picker::part(label),
.sormas-form--view vaadin-combo-box::part(label),
.sormas-form--view vaadin-multi-select-combo-box::part(label),
.sormas-form--view vaadin-select::part(label),
.sormas-form--view vaadin-checkbox-group::part(label),
.sormas-form--view vaadin-radio-group::part(label) {
  color: var(--vaadin-text-color-secondary) !important;
  font-size: var(--aura-font-size-xs) !important;
}
/* Hide interactive affordances that make no sense in a read-only view. */
.sormas-form--view vaadin-combo-box::part(toggle-button),
.sormas-form--view vaadin-multi-select-combo-box::part(toggle-button),
.sormas-form--view vaadin-select::part(toggle-button),
.sormas-form--view vaadin-date-picker::part(toggle-button),
.sormas-form--view vaadin-time-picker::part(toggle-button),
.sormas-form--view [part="clear-button"] {
  display: none !important;
}
/* The pure Aura base leaves the UNCHECKED checkbox/radio box nearly invisible (no fill, ultra-light border), so
   "tick all that apply" groups like Water use read as bare labels with no visible boxes. Give the box a clear
   border + white fill so it's actually visible; the CHECKED state keeps Vaadin's filled/checkmark styling (this
   only targets :not([checked])). */
vaadin-checkbox:not([checked]):not([indeterminate])::part(checkbox),
vaadin-radio-button:not([checked])::part(radio) {
  border: 1px solid var(--vaadin-border-color-strong, #64748b);
  background-color: var(--vaadin-background-color, #ffffff);
}

/* Read-only checkboxes/radios keep their control but lose the input-box chrome; disabled look off. */
.sormas-form--view vaadin-checkbox,
.sormas-form--view vaadin-radio-button {
  cursor: default;
}

/* Segmented option groups (NullableOptionGroup: symptom YES/NO/UNKNOWN, case classification, outcome, …) in VIEW
   mode. Without this they still render as the full clickable button row, so a viewer can click "answers" without
   ever pressing Edit. Here the group is made non-interactive and COLLAPSED TO ITS ANSWER: the unselected option
   buttons are hidden and the selected one is flattened into plain "label + value" text, matching the other
   flattened fields. Unanswered option groups have no value and are already hidden by setFormReadOnly's Java pass. */
.sormas-form--view .sormas-option-group,
.sormas-form--view vaadin-radio-group,
.sormas-form--view vaadin-checkbox-group {
  pointer-events: none;
}
.sormas-form--view .sormas-option-group vaadin-radio-button:not([checked]) {
  display: none;
}
.sormas-form--view .sormas-option-group vaadin-radio-button[checked] {
  background: transparent !important;
  color: var(--vaadin-text-color) !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 1.5em;
  font-weight: 500;
  cursor: default;
}
/* Group left with nothing selected (defensive — Java normally hides these): show a muted em dash, not an empty row. */
.sormas-form--view .sormas-option-group::part(group-field) {
  padding: 0;
}

/* Reusable form CARD (domain agents: wrap a standalone AbstractEditForm host — a create dialog, a plain routed
   edit page not inside AbstractDetailLayout — in .sormas-form-card to get the same white/shadow/rounded chrome
   the detail-main pane gives an embedded form). The form inside keeps its own 900px cap + centring, so the card
   fills its host and the fields stay a comfortable measure. Inside AbstractDetailLayout you do NOT need this —
   .sormas-detail-main already supplies the card. */
.sormas-form-card {
  background: var(--vaadin-background-color);
  border: 1px solid var(--vaadin-border-color-secondary);
  border-radius: var(--vaadin-radius-l);
  box-shadow: var(--aura-shadow-s);
  padding: var(--vaadin-padding-l);
}

/* Large "tick all that apply" lists (user form: roles, secondary jurisdictions, limited diseases/syndromes).
   The default checkbox-group wraps dozens of checkboxes inline into an unbounded dense blob; render them as a
   bounded, scrollable multi-column panel instead. Opt in per field via addClassName("scrollable-checkbox-group"). */
/* User-role rights editor (GroupedCheckBoxGroupField): each UserRightGroup renders as a titled section with a
   bounded multi-column grid of checkboxes. Without this the checkboxes flowed inline and pushed past the right
   edge of the viewport (long right captions never wrapped). */
.sormas-grouped-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 100%;
  min-width: 0;
}
.sormas-rights-group-title {
  font-weight: 600;
  font-size: var(--aura-font-size-s);
  color: var(--vaadin-text-color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sormas-rights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.125rem 1.25rem;
}
.sormas-rights-grid vaadin-checkbox {
  min-width: 0;
}
.sormas-rights-grid vaadin-checkbox::part(label) {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* User-role notifications tab: one card per notification group (Cases, Contacts, Events, …), flowing 2-3 per
   row on a wide screen. Inside a card the SMS/EMAIL checkbox columns stay aligned via their fixed widths; the
   card itself provides the readable measure (the old full-width rows pushed the checkboxes to the far right). */
.sormas-notification-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  gap: 1rem;
  align-items: start;
}
.sormas-notification-card {
  min-width: 0;
}
.sormas-notification-card h4 {
  margin: 0;
}
.sormas-notification-card .sormas-notification-row:nth-child(even) {
  background: var(--vaadin-contrast-5pct, rgba(0, 0, 0, 0.03));
  border-radius: var(--vaadin-radius-s, 4px);
}

vaadin-checkbox-group.scrollable-checkbox-group::part(group-field) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-content: start;
  column-gap: 0.75rem;
  max-height: 15rem;
  overflow-y: auto;
  border: 1px solid var(--vaadin-border-color-secondary);
  border-radius: var(--vaadin-radius-m);
  padding: 0.375rem 0.625rem;
  background: var(--vaadin-background-color);
}

/* A tick-list whose length varies wildly (the sample's "Disease to be tested?": two diseases for a narrow syndrome,
   the whole configured list with the override on). The generic panel above stretches 1fr columns, so two options read
   as a mostly-empty input box; here the columns hug their labels and the panel hugs its content, then falls back to
   the bounded scroll only once there is enough to need it. */
vaadin-checkbox-group.sormas-disease-grid::part(group-field) {
  grid-template-columns: repeat(auto-fill, minmax(180px, max-content));
  gap: 0.125rem 1.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--sormas-canvas, #F3F6F9);
  border-style: dashed;
}
vaadin-checkbox-group.sormas-disease-grid[has-value]::part(group-field) {
  background: var(--vaadin-background-color);
  border-style: solid;
}

/* "Show all laboratories" / "Show all diseases": escape hatches that widen the field above/beside them, not questions
   in their own right — so they read as secondary helper text, and they sit on the input row rather than being
   baseline-aligned with the field label above them. */
/* A checkbox sharing a row with a field beside it ("Is the case pregnant?" next to Sex on case create): the form
   layout baseline-aligns its items, which would float the bare checkbox up against the neighbouring field's LABEL,
   so drop it onto the input row instead. Unlike .sormas-field-override below, the label keeps full field weight —
   this is a question in its own right, not helper text. */
vaadin-checkbox.sormas-inline-checkbox,
vaadin-checkbox.sormas-field-override {
  align-self: end;
  min-height: var(--vaadin-input-field-height, 36px);
  display: flex;
  align-items: center;
}
vaadin-checkbox.sormas-field-override::part(label) {
  color: var(--vaadin-text-color-secondary, #5A6672);
  font-size: var(--vaadin-font-size-s, 0.875rem);
}

/* ==========================================================================
   Segmented option groups (2026-07-23): NullableOptionGroup (auto-carries
   .sormas-option-group) rendered as an Aura-accent connected button row instead
   of radio dots — Case classification, Investigation status, Outcome, Register as,
   Dengue fever type, Type of leprosy, Yes/No/Unknown, etc. Aura tokens only.
   ========================================================================== */
/* ---- NullableOptionGroup: legacy SORMAS segmented YES / NO / UNKNOWN button group ----
   The legacy option group is not shown as radio dots but as a row of connected, bordered buttons with the selected
   one highlighted. Lay the options out in a row (their "group-field" shadow part defaults to a vertical column),
   hide each button's radio circle, and style the buttons as a connected segmented control.

   Groups with many options (e.g. case outcome, register-as) must WRAP into multiple lines instead of overflowing
   the form column: the group is capped at 100% width and the buttons flex-wrap. To stay wrap-safe, every button
   carries its own full 1px border and adjacent borders are collapsed with -1px left/top margins (a checked button
   is raised via z-index so its colored border wins over its neighbours' grey ones). */
vaadin-radio-group.sormas-option-group {
  max-width: 100%;
  min-width: 0;
}
vaadin-radio-group.sormas-option-group::part(group-field) {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  /* absorb the buttons' -1px collapse margins so the group aligns flush */
  padding-left: 1px;
  padding-top: 1px;
}
vaadin-radio-group.sormas-option-group vaadin-radio-button::part(radio) {
  display: none;
}
vaadin-radio-group.sormas-option-group vaadin-radio-button::part(label) {
  margin: 0;
  padding: 0;
}
vaadin-radio-group.sormas-option-group vaadin-radio-button {
  margin: -1px 0 0 -1px;
  padding: 4px 14px;
  border: 1px solid var(--vaadin-border-color);
  cursor: pointer;
  color: var(--aura-accent-text-color);
  font-size: var(--aura-font-size-m, .95rem);
  font-weight: 600;
  line-height: var(--aura-line-height-m);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
/* the label part carries the actual Yes/No/Unknown glyphs — make sure the weight/size land on it too */
vaadin-radio-group.sormas-option-group vaadin-radio-button::part(label) {
  font-size: var(--aura-font-size-m, .95rem);
  font-weight: 600;
}
vaadin-radio-group.sormas-option-group vaadin-radio-button[checked] { font-weight: 700; }
vaadin-radio-group.sormas-option-group vaadin-radio-button:first-of-type {
  border-top-left-radius: var(--vaadin-radius-s);
  border-bottom-left-radius: var(--vaadin-radius-s);
}
vaadin-radio-group.sormas-option-group vaadin-radio-button:last-of-type {
  border-top-right-radius: var(--vaadin-radius-s);
  border-bottom-right-radius: var(--vaadin-radius-s);
}
vaadin-radio-group.sormas-option-group vaadin-radio-button[checked] {
  background-color: var(--aura-accent-color);
  color: var(--aura-accent-contrast-color);
  border-color: var(--aura-accent-color);
  position: relative;
  z-index: 1;
}

/* ---- Symptoms matrix layout: grouped sign/symptom cards (SymptomMatrixField) ----
   Each SymptomGroup renders as a card: an uppercase heading divider + a 1–2 column
   grid of rows. A row is [ caption | segmented YES/NO/UNKNOWN ]. The option groups
   are all the same width, so pinning the caption to a flexible first column and the
   option group to a fixed right column makes every button column line up cleanly. */
.symptom-group {
  margin: 0 0 1.35rem 0;
  break-inside: avoid;
}
.symptom-group__heading {
  margin: 0 0 .5rem 0;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--vaadin-border-color-secondary, #e6e8eb);
  font-size: var(--aura-font-size-xs, .75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--vaadin-text-color-secondary, #5a6572);
}
/* Widen the gap between the two symptom columns; kill FormLayout's tall row gap. */
.symptom-group__grid {
  --vaadin-form-layout-column-spacing: 2.75rem;
  --vaadin-form-layout-row-spacing: 0;
}
/* One symptom = caption (fluid) + option group (right-aligned, fixed) on a single baseline. */
.symptom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  min-height: 2.25rem;
  padding: .1rem 0;
}
.symptom-row-caption {
  font-size: var(--aura-font-size-s, .8125rem);
  line-height: 1.25;
  color: var(--vaadin-text-color, #1f2933);
  overflow-wrap: anywhere;
}
/* All symptom option groups share the same width -> right-align so buttons stack in a column. */
.symptom-row .sormas-option-group {
  justify-self: end;
}
.symptom-row .sormas-option-group::part(group-field) {
  flex-wrap: nowrap;
}

/* ============================================================================
   Login page (LoginView): .login-view > .login-screen > [.login-column(.login-card) | .login-sidebar]
   No CSS previously targeted these, so the page rendered as bare Vaadin defaults.
   Goal: a calm, branded split screen — an elevated white login card on a soft
   blue-tinted backdrop, beside a lightly tinted brand panel. ========================= */
.login-view {
  min-height: 100vh;
  padding: 0;
  background-color: #f4f7fc;
  /* Subtle medical "plus" pattern over soft blue radial tints — gives the screen texture instead of a flat wash. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%23005A9C' stroke-width='1.4' stroke-linecap='round' opacity='0.05'%3E%3Cpath d='M23 15v16M15 23h16'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1100px 620px at 108% -6%, color-mix(in srgb, var(--aura-accent-color) 14%, transparent), transparent 58%),
    radial-gradient(900px 560px at -8% 108%, color-mix(in srgb, var(--aura-accent-color) 9%, transparent), transparent 55%),
    linear-gradient(135deg, #eaf1f9 0%, #f4f7fc 45%, #ffffff 100%);
  background-size: 46px 46px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
.login-screen { min-height: 100vh; }
.login-column { padding: 2rem; }

/* --- The login card --- */
.login-card {
  width: 384px !important;
  max-width: calc(100vw - 2.5rem);
  padding: 2.25rem 2rem 1.75rem !important;
  gap: .1rem;
  background: #ffffff;
  border-radius: var(--vaadin-radius-l, 14px);
  border-top: 3px solid var(--aura-accent-color);
  box-shadow:
    0 18px 48px -16px rgba(13, 42, 76, .30),
    0 3px 10px -4px rgba(13, 42, 76, .12);
}
/* logo + instance-name title row */
.login-card vaadin-horizontal-layout { align-items: center; gap: .6rem; }
/* Government-of-Nepal emblem, centered at the top of the card */
.login-card .login-emblem-top {
  display: block;
  margin: 0 auto .25rem;
  height: auto;
}
/* Second line: SORMAS logo | SORMAS instance name, centered with a thin pipe divider */
.login-title {
  width: 100%;
  justify-content: center;
  gap: .55rem !important;
  margin-bottom: .25rem;
}
.login-title .login-title-logo { flex: 0 0 auto; }
.login-title .login-instance-name {
  margin: 0;
  padding-left: .55rem;
  border-left: 1px solid var(--aura-border-color, #d3dce6);
  font-size: 1.4rem;
  line-height: 1.1;
}
.login-card h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--vaadin-text-color, #14324f);
}
/* the "Log in" heading, given a short accent underline */
.login-card h2 {
  margin: 1.15rem 0 1rem;
  padding-bottom: .45rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--vaadin-text-color, #14324f);
  position: relative;
}
.login-card h2::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 2.25rem; height: 3px; border-radius: 3px;
  background: var(--aura-accent-color);
}
/* the embedded Vaadin login form fills the card width and drops its own chrome */
.login-card vaadin-login-form,
.login-card vaadin-login-form-wrapper { width: 100%; }
vaadin-login-form-wrapper::part(form) { padding: 0; }
/* the form's own title is the card's single "Log in" heading, styled to match the old standalone H2 accent underline */
vaadin-login-form-wrapper::part(form-title) {
  margin: 1.15rem 0 1rem;
  padding: 0 0 .45rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--vaadin-text-color, #14324f);
  position: relative;
}
vaadin-login-form-wrapper::part(form-title)::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 2.25rem; height: 3px; border-radius: 3px;
  background: var(--aura-accent-color);
}

/* --- The brand side panel --- */
.login-sidebar {
  width: 384px !important;
  max-width: 40vw;
  padding: 2.75rem 2.25rem !important;
  gap: 1.15rem;
  text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--aura-accent-color) 8%, #ffffff), #ffffff 72%);
  border-left: 1px solid color-mix(in srgb, var(--aura-accent-color) 16%, transparent);
  color: var(--vaadin-text-color-secondary, #46525f);
}
.login-sidebar img { max-width: 100%; height: auto; }
/* tagline (first Div) then mission bullets (second Div) */
.login-sidebar > div:nth-of-type(1) {
  font-size: 1.02rem; font-weight: 600; line-height: 1.5;
  color: var(--vaadin-text-color, #14324f);
}
.login-sidebar > div:nth-of-type(2) {
  font-size: .95rem; line-height: 1.95;
  color: var(--vaadin-text-color-secondary, #46525f);
}

/* --- Responsive: stack under 900px, hide the side panel on phones --- */
@media (max-width: 900px) {
  .login-screen { flex-direction: column; }
  .login-sidebar {
    width: 100% !important; max-width: 100%;
    border-left: none;
    border-top: 1px solid color-mix(in srgb, var(--aura-accent-color) 16%, transparent);
  }
}
@media (max-width: 640px) {
  .login-sidebar { display: none; }
  .login-column { padding: 1.25rem; }
}

/* --- EDCD emblem (Coat of Arms of Nepal) + division caption in the login side panel --- */
.login-edcd-emblem {
  margin-top: .35rem;
  filter: drop-shadow(0 3px 8px rgba(13, 42, 76, .16));
}
.login-edcd-caption {
  margin-top: .15rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--vaadin-text-color-secondary, #46525f);
}
.login-edcd-caption .login-edcd-division {
  display: inline-block;
  margin-top: .15rem;
  font-weight: 700;
  color: var(--aura-accent-color);
}

/* --- Login analytics infographic (illustrative outbreak epi-curve + classification donut) --- */
.login-analytics-heading {
  margin-top: .4rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--aura-accent-color);
}
.login-infographic {
  width: 100%;
  max-width: 322px;
  padding: .9rem 1rem 1rem;
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--aura-accent-color) 14%, #e6ebf2);
  border-radius: var(--vaadin-radius-l, 12px);
  box-shadow: 0 10px 26px -16px rgba(13, 42, 76, .28);
}
.login-infographic svg { display: block; width: 100%; height: auto; }
/* The side panel now carries more content — let it scroll on short viewports instead of clipping. */
.login-sidebar { overflow-y: auto; row-gap: .9rem; }

/* ---- List-view toolbar buttons (.sormas-view-toolbar): the default Aura buttons render too faint to read as
   buttons. Give the secondary ones a clear outlined look and let the primary "New case" stay filled. ---- */
.sormas-view-toolbar vaadin-button:not([theme~="primary"]) {
  border: 1px solid color-mix(in srgb, var(--aura-accent-color) 42%, #c2ccd8);
  background: #ffffff;
  color: var(--aura-accent-text-color, var(--aura-accent-color));
  font-weight: 600;
  border-radius: var(--vaadin-radius-m, 6px);
  box-shadow: 0 1px 2px rgba(13, 42, 76, .10);
}
.sormas-view-toolbar vaadin-button:not([theme~="primary"]):hover {
  background: color-mix(in srgb, var(--aura-accent-color) 12%, #ffffff);
  border-color: var(--aura-accent-color);
  color: var(--aura-accent-color);
}
.sormas-view-toolbar vaadin-button[theme~="primary"] {
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(13, 42, 76, .22);
}
/* the Default/Detailed segmented toggle already has the shared option-group styling; just ensure it reads crisply */
.sormas-view-toolbar vaadin-radio-group.sormas-option-group vaadin-radio-button { font-weight: 600; }

/* ============================ Nepal forum feature ============================
   Reddit-style feed (ForumView) + post detail (ForumPostView) + threaded
   comments (ForumCommentPanel). The Java views carry the class hooks below;
   the look stays Aura-toned (Aura/Vaadin tokens + the SORMAS accent). Before
   this the feed rendered as an unseparated wall of text with a read-only score;
   now each post is a hoverable card with an interactive vote column. */

/* Fill the available width — no artificial centred column, so no big empty side margins. */
.forum-view { max-width: none; width: 100%; }

/* Three-column shell: category rail · feed · info rail. CSS grid so the middle column simply takes the
   remaining width — no flex-wrap games (which used to bump the info rail onto its own full-width line). */
.forum-layout {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
  width: 100%;
}
.forum-center { min-width: 0; gap: 12px; }
/* Sticky side rails: they stay in view while the feed scrolls (scroll internally only if taller than the viewport). */
.forum-left, .forum-right {
  min-width: 0;
  position: sticky;
  top: 12px;
  align-self: start;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}

/* Mobile affordances are desktop-hidden. */
.forum-edge-toggle { display: none; }
.forum-backdrop { display: none; }

/* ---- Mobile / narrow: single-column feed; the rails become slide-in drawers behind edge toggles ---- */
@media (max-width: 1024px) {
  .forum-layout { grid-template-columns: minmax(0, 1fr); }
  .forum-left, .forum-right {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 300px;
    max-width: 86vw;
    max-height: none;
    z-index: 1002;
    background: var(--sormas-canvas, #f3f6f9);
    box-shadow: 0 0 24px rgba(0, 0, 0, .28);
    padding: 12px;
    transition: transform .25s ease;
  }
  .forum-left { left: 0; transform: translateX(-104%); }
  .forum-right { right: 0; transform: translateX(104%); }
  .forum-view--left-open .forum-left { transform: translateX(0); }
  .forum-view--right-open .forum-right { transform: translateX(0); }

  .forum-edge-toggle {
    display: inline-flex;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
    min-width: 34px;
    width: 34px;
    height: 48px;
    padding: 0;
    background: var(--aura-accent-color);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  }
  .forum-edge-toggle vaadin-icon { color: #ffffff; }
  .forum-edge-toggle--left { left: 0; border-radius: 0 8px 8px 0; }
  .forum-edge-toggle--right { right: 0; border-radius: 8px 0 0 8px; }

  .forum-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 1000; }
}

/* Search row: keep the field roomy, buttons compact. */
.forum-searchbar { align-items: center; }

/* Right-rail quick-access cards (Important / Top posts / Most discussed). */
.forum-card {
  background: #ffffff;
  border: 1px solid var(--vaadin-border-color-secondary, #dae0e8);
  border-radius: var(--vaadin-radius-m, 8px);
  box-shadow: 0 1px 2px rgba(13, 42, 76, .06);
  overflow: hidden;
}
.forum-card__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--aura-font-size-s);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--vaadin-text-color-secondary, #6a7686);
  padding: 11px 14px;
  border-bottom: 1px solid var(--vaadin-border-color-secondary, #eceff3);
  background: color-mix(in srgb, var(--aura-accent-color) 5%, #ffffff);
}
.forum-card__title vaadin-icon { width: 15px; height: 15px; color: var(--aura-accent-color); }
.forum-card__empty { display: block; padding: 12px 14px; font-size: var(--aura-font-size-s); font-style: italic; color: var(--vaadin-text-color-secondary, #6a7686); }

/* Rail entry: [rank] [title …] [metric] — one uniform elegant row across every card. */
.forum-side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background .1s ease;
}
.forum-side-item + .forum-side-item { border-top: 1px solid var(--vaadin-border-color-secondary, #eceff3); }
.forum-side-item:hover { background: color-mix(in srgb, var(--aura-accent-color) 7%, #ffffff); }
.forum-side-item__rank {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: var(--sormas-font-size-xxs, .6875rem);
  font-weight: 700;
  color: var(--aura-accent-color);
  background: color-mix(in srgb, var(--aura-accent-color) 12%, #ffffff);
}
.forum-side-item__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--aura-font-size-s);
  font-weight: 600;
  line-height: 1.25;
  color: var(--vaadin-text-color, #1b2733);
  /* single-line ellipsis so every row is the same height */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forum-side-item:hover .forum-side-item__title { color: var(--aura-accent-color); }
.forum-side-item__metric {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--sormas-font-size-xxs, .6875rem);
  font-weight: 700;
  color: var(--vaadin-text-color-secondary, #6a7686);
  background: var(--vaadin-background-container, #eef1f6);
  border-radius: 999px;
  padding: 2px 8px;
}
.forum-side-item__metric vaadin-icon { width: 12px; height: 12px; }

/* Feed: card rows with clear separation + hover affordance. */
.forum-feed { gap: 12px; }
.forum-row {
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid var(--vaadin-border-color-secondary, #dae0e8);
  border-radius: var(--vaadin-radius-m, 8px);
  box-shadow: 0 1px 2px rgba(13, 42, 76, .06);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.forum-row:hover {
  border-color: color-mix(in srgb, var(--aura-accent-color) 45%, #dae0e8);
  box-shadow: 0 2px 8px rgba(13, 42, 76, .12);
}
.forum-row__body { cursor: pointer; gap: 4px; }
.forum-row__title {
  font-size: var(--aura-font-size-l);
  font-weight: 700;
  line-height: 1.3;
  color: var(--vaadin-text-color, #1b2733);
}
.forum-row:hover .forum-row__title { color: var(--aura-accent-color); }

/* Post detail card. */
.forum-post {
  padding: 18px 20px;
  background: #ffffff;
  border: 1px solid var(--vaadin-border-color-secondary, #dae0e8);
  border-radius: var(--vaadin-radius-m, 8px);
  box-shadow: 0 1px 2px rgba(13, 42, 76, .06);
}
.forum-post__title { font-size: var(--aura-font-size-xl); font-weight: 700; line-height: 1.25; }
.forum-post__body { margin-top: 12px; line-height: 1.55; color: var(--vaadin-text-color, #1b2733); }
.forum-post__body > :first-child { margin-top: 0; }

/* User-generated body HTML (post + comments): keep wide content (pasted images, code blocks, long words)
   inside the card instead of bleeding across the page — the dark full-width code block symptom. */
.forum-post__body, .forum-comment { overflow-wrap: anywhere; }
.forum-post__body img, .forum-comment img { max-width: 100%; height: auto; }
.forum-post__body pre, .forum-comment pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 10px 12px;
  border-radius: var(--vaadin-radius-m, 8px);
  background: #1e2530;
  color: #e6edf3;
  font-size: var(--aura-font-size-s);
}
.forum-post__body table, .forum-comment table { max-width: 100%; display: block; overflow-x: auto; }

/* Shared meta line (author · date · comments · edited). */
.forum-meta { color: var(--vaadin-text-color-secondary, #6a7686); font-size: var(--aura-font-size-s); }
.forum-meta vaadin-icon { width: 14px; height: 14px; vertical-align: -2px; }

/* Tag chips (feed + detail). */
.forum-tagbar { margin-top: 2px; flex-wrap: wrap; }
.forum-tag {
  background: color-mix(in srgb, var(--aura-accent-color) 10%, #eef1f6);
  color: color-mix(in srgb, var(--aura-accent-color) 70%, #1b2733);
  border-radius: 999px;
  padding: 1px 10px;
  font-size: var(--aura-font-size-s);
  font-weight: 600;
  white-space: nowrap;
}

/* Vote control: compact stack (feed/post) or inline row (comments). */
.forum-vote { color: var(--vaadin-text-color-secondary, #6a7686); }
.forum-vote vaadin-button { min-width: 0; margin: 0; }
.forum-vote vaadin-icon { width: 17px; height: 17px; }

/* Threaded comments: light separation between siblings. */
.forum-comment { padding: 8px 0; gap: 4px; }
.forum-comment + .forum-comment { border-top: 1px solid var(--vaadin-border-color-secondary, #eceff3); }

/* New/Edit-post modal: large composer that fills the dialog (see ForumController.openEditor). */
.forum-editor-form { padding: 4px 2px 2px; }
.forum-editor-form .bulletin-quill-editor { flex: 1 1 auto; min-height: 240px; }

/* ---- Rich-text (QuillEditor) toolbar: turn the raw browser <button> row into a tidy, wrapping button strip
   (shared by the forum composer + bulletin editor). Colour swatches keep their inline background. ---- */
.bulletin-quill-editor-toolbar > button {
  height: 26px;
  min-width: 26px;
  padding: 0 7px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--vaadin-text-color, #1b2733);
  background: #ffffff;
  border: 1px solid var(--vaadin-border-color-secondary, #dae0e8);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .1s ease, border-color .1s ease, color .1s ease;
}
.bulletin-quill-editor-toolbar > button:hover {
  background: color-mix(in srgb, var(--aura-accent-color) 12%, #ffffff);
  border-color: var(--aura-accent-color);
  color: var(--aura-accent-color);
}
.bulletin-quill-editor-toolbar > button:active {
  background: color-mix(in srgb, var(--aura-accent-color) 20%, #ffffff);
}
/* Foreground-colour swatches: small round colour chips (inline style supplies the fill). */
.bulletin-quill-editor-toolbar > button[data-cmd="foreColor"] {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.bulletin-quill-editor-toolbar > button[data-cmd="foreColor"]:hover {
  transform: scale(1.12);
}
/* Inline image-upload control: strip vaadin-upload's default block chrome so the picker sits in the strip. */
.bulletin-quill-editor-toolbar vaadin-upload {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}
.bulletin-quill-editor-toolbar vaadin-upload vaadin-button {
  height: 26px;
  min-width: 26px;
  margin: 0;
}

/* ============================ Forum redesign (community landing) ============================
   Health-forum landing layout: category rail, welcome hero, quick actions, stat tiles, rich
   feed cards, and an info rail (announcements / experts / tags). Aura-toned + SORMAS accent. */

/* ---- Left rail: categories ---- */
.forum-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 12px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .1s ease;
}
.forum-cat + .forum-cat { border-top: 1px solid var(--vaadin-border-color-secondary, #eceff3); }
.forum-cat:hover { background: color-mix(in srgb, var(--aura-accent-color) 7%, #ffffff); }
.forum-cat--active {
  background: color-mix(in srgb, var(--aura-accent-color) 12%, #ffffff);
  border-left-color: var(--aura-accent-color);
}
/* Fixed icon + count columns so every row lines up (label always starts / count always ends at the same x). */
.forum-cat__icon { flex: 0 0 18px; display: inline-flex; justify-content: center; color: var(--aura-accent-color); }
.forum-cat__icon vaadin-icon { width: 15px; height: 15px; }
.forum-cat__label { flex: 1 1 auto; min-width: 0; font-size: var(--aura-font-size-s); font-weight: 600; color: var(--vaadin-text-color, #1b2733); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forum-cat--active .forum-cat__label { color: var(--aura-accent-color); }
.forum-cat__count { flex: 0 0 auto; min-width: 30px; text-align: center; box-sizing: border-box; font-size: var(--sormas-font-size-xxs, .6875rem); font-weight: 700; color: var(--vaadin-text-color-secondary, #6a7686); background: var(--vaadin-background-container, #eef1f6); border-radius: 999px; padding: 2px 8px; }
.forum-cat--active .forum-cat__count { color: #ffffff; background: var(--aura-accent-color); }

/* ---- Hero banner: slim, full-width strip (was a content-width block that looked "half filled") ---- */
.forum-hero {
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--vaadin-radius-m, 8px);
  padding: 14px 20px;
  color: #ffffff;
  background: linear-gradient(120deg, var(--aura-accent-color) 0%, color-mix(in srgb, var(--aura-accent-color) 70%, #1e3a8a) 100%);
  box-shadow: 0 2px 10px rgba(0, 90, 156, .22);
}
.forum-hero__title { display: block; font-size: 1.15rem; font-weight: 800; }
.forum-hero__subtitle { display: block; margin-top: 3px; font-size: var(--aura-font-size-s); opacity: .9; line-height: 1.4; }

/* ---- Quick actions ---- */
.forum-quick { gap: 12px; flex-wrap: wrap; }
.forum-quick__tile {
  flex: 1 1 0;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--vaadin-border-color-secondary, #dae0e8);
  border-radius: var(--vaadin-radius-m, 8px);
  box-shadow: 0 1px 2px rgba(13, 42, 76, .06);
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.forum-quick__tile:hover { border-color: var(--aura-accent-color); box-shadow: 0 3px 10px rgba(13, 42, 76, .12); transform: translateY(-1px); }
.forum-quick__icon { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; flex: 0 0 auto; }
.forum-quick__icon vaadin-icon { width: 17px; height: 17px; }
.forum-quick__label { font-size: var(--aura-font-size-m); font-weight: 700; color: var(--vaadin-text-color, #1b2733); }
.forum-quick__tile--question .forum-quick__icon { background: #e8f0fe; color: #1a73e8; }
.forum-quick__tile--guideline .forum-quick__icon { background: #e6f4ea; color: #1e8e3e; }
.forum-quick__tile--issue .forum-quick__icon { background: #fce8e6; color: #d93025; }
.forum-quick__tile--discussion .forum-quick__icon { background: #f3e8fd; color: #8430ce; }

/* ---- Sort tabs ---- */
.forum-tabs { border-bottom: 1px solid var(--vaadin-border-color-secondary, #dae0e8); gap: 4px; padding-bottom: 0; }
.forum-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 6px 14px;
  font-weight: 600;
  color: var(--vaadin-text-color-secondary, #6a7686);
  cursor: pointer;
}
.forum-tab:hover { color: var(--aura-accent-color); }
.forum-tab--active { color: var(--aura-accent-color); border-bottom-color: var(--aura-accent-color); }

/* ---- Stat tiles: compact strip so they don't crowd out the feed ---- */
.forum-stats__row { gap: 10px; flex-wrap: wrap; }
.forum-stat {
  flex: 1 1 0;
  min-width: 116px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid var(--vaadin-border-color-secondary, #dae0e8);
  border-radius: var(--vaadin-radius-m, 8px);
  box-shadow: 0 1px 2px rgba(13, 42, 76, .06);
}
.forum-stat__icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 9px; flex: 0 0 auto; }
.forum-stat__icon vaadin-icon { width: 16px; height: 16px; }
.forum-stat__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.forum-stat__value { font-size: 1.2rem; font-weight: 800; line-height: 1.1; color: var(--vaadin-text-color, #1b2733); }
.forum-stat__label { font-size: var(--sormas-font-size-xxs, .6875rem); color: var(--vaadin-text-color-secondary, #6a7686); }
.forum-stat--discussions .forum-stat__icon { background: #e8f0fe; color: #1a73e8; }
.forum-stat--comments .forum-stat__icon { background: #e6f4ea; color: #1e8e3e; }
.forum-stat--contributors .forum-stat__icon { background: #fef0e6; color: #e8710a; }
.forum-stat--tags .forum-stat__icon { background: #f3e8fd; color: #8430ce; }

/* ---- Rich feed cards ---- */
.forum-card-post {
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid var(--vaadin-border-color-secondary, #dae0e8);
  border-radius: var(--vaadin-radius-m, 8px);
  box-shadow: 0 1px 2px rgba(13, 42, 76, .06);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.forum-card-post:hover { border-color: color-mix(in srgb, var(--aura-accent-color) 40%, #dae0e8); box-shadow: 0 2px 10px rgba(13, 42, 76, .12); }
.forum-card-post__icon { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.forum-card-post__icon vaadin-icon { width: 20px; height: 20px; }
.forum-card-post--announcement .forum-card-post__icon { background: #e8f0fe; color: #1a73e8; }
.forum-card-post--question .forum-card-post__icon { background: #e6f4ea; color: #1e8e3e; }
.forum-card-post--discussion .forum-card-post__icon { background: #fef0e6; color: #e8710a; }
.forum-card-post__body { gap: 6px !important; }
.forum-card-post__title { font-size: var(--aura-font-size-l); font-weight: 700; line-height: 1.3; color: var(--vaadin-text-color, #1b2733); }
.forum-card-post:hover .forum-card-post__title { color: var(--aura-accent-color); }
.forum-card-post__author { gap: 8px !important; }
.forum-card-post__meta { font-size: var(--aura-font-size-s); color: var(--vaadin-text-color-secondary, #6a7686); }
.forum-card-post__metrics { flex: 0 0 auto; align-self: center; }

/* Type badges */
.forum-badge { display: inline-block; align-self: flex-start; font-size: var(--sormas-font-size-xxs, .6875rem); font-weight: 800; letter-spacing: .04em; padding: 2px 8px; border-radius: 5px; }
.forum-badge--announcement { background: #e8f0fe; color: #1a56c4; }
.forum-badge--question { background: #e6f4ea; color: #187038; }
.forum-badge--discussion { background: #fef0e6; color: #b45605; }

/* Author avatar (initials) */
.forum-avatar { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: var(--sormas-font-size-xxs, .6875rem); font-weight: 700; color: #ffffff; background: var(--aura-accent-color); }

/* Inline metric (comments) */
.forum-metric { display: inline-flex; align-items: center; gap: 4px; font-size: var(--aura-font-size-s); font-weight: 600; color: var(--vaadin-text-color-secondary, #6a7686); }
.forum-metric vaadin-icon { width: 15px; height: 15px; }

/* ---- Info rail cards ---- */
.forum-rail-actions { gap: 8px; }
.forum-side-item__stack { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.forum-side-item__sub { font-size: var(--sormas-font-size-xxs, .6875rem); color: var(--vaadin-text-color-secondary, #6a7686); margin-top: 2px; }
.forum-tagcloud { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; }

/* Empty feed state */
.forum-empty { padding: 28px 16px; text-align: center; font-style: italic; color: var(--vaadin-text-color-secondary, #6a7686); }

/* ---- Chat-bubble FAB (lower-right): the four "start something" actions ---- */
.forum-fab { position: fixed; right: 24px; bottom: 24px; z-index: 1003; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.forum-fab__button {
  width: 58px; height: 58px; min-width: 58px; border-radius: 50%; padding: 0;
  background: var(--aura-accent-color); color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 90, 156, .40);
  cursor: pointer; transition: transform .15s ease;
}
.forum-fab__button:hover { transform: scale(1.06); }
.forum-fab__button vaadin-icon { width: 24px; height: 24px; color: #ffffff; }
.forum-fab--open .forum-fab__button { transform: rotate(90deg); }
.forum-fab__menu {
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.forum-fab--open .forum-fab__menu { opacity: 1; transform: none; pointer-events: auto; }
.forum-fab__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; min-width: 200px;
  background: #ffffff; border-radius: 10px;
  box-shadow: 0 4px 14px rgba(13, 42, 76, .18);
  cursor: pointer; transition: transform .1s ease, box-shadow .1s ease;
}
.forum-fab__item:hover { transform: translateX(-3px); box-shadow: 0 6px 18px rgba(13, 42, 76, .24); }
.forum-fab__icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; flex: 0 0 auto; }
.forum-fab__icon vaadin-icon { width: 16px; height: 16px; }
.forum-fab__label { font-weight: 700; font-size: var(--aura-font-size-m); color: var(--vaadin-text-color, #1b2733); }
.forum-fab__item--question .forum-fab__icon { background: #e8f0fe; color: #1a73e8; }
.forum-fab__item--guideline .forum-fab__icon { background: #e6f4ea; color: #1e8e3e; }
.forum-fab__item--issue .forum-fab__icon { background: #fce8e6; color: #d93025; }
.forum-fab__item--discussion .forum-fab__icon { background: #f3e8fd; color: #8430ce; }

/* ============================ Forum thread (detail) page ============================ */
.forum-breadcrumb { gap: 8px; padding: 0 2px; }
.forum-breadcrumb__back { font-weight: 700; }
.forum-breadcrumb__trail { color: var(--vaadin-text-color-secondary, #6a7686); font-size: var(--aura-font-size-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forum-breadcrumb__sep { margin: 0 5px; opacity: .5; }
.forum-breadcrumb__here { color: var(--vaadin-text-color, #1b2733); }

/* Two-column thread layout (main + rail). */
.forum-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
  width: 100%;
}
.forum-detail__main { min-width: 0; }
.forum-detail__rail { position: sticky; top: 12px; }
@media (max-width: 1024px) {
  .forum-detail { grid-template-columns: minmax(0, 1fr); }
  .forum-detail__rail { position: static; }
}

/* Post card enhancements (reuses the base .forum-post card). */
.forum-post__vote { align-self: flex-start; }
.forum-post .forum-vote vaadin-icon { width: 18px; height: 18px; }
.forum-post .forum-vote { font-size: 1.05rem; }
.forum-post__author { gap: 8px !important; margin-top: 10px; }
.forum-post__meta { font-size: var(--aura-font-size-s); color: var(--vaadin-text-color-secondary, #6a7686); }
.forum-post__actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--vaadin-border-color-secondary, #eceff3); flex-wrap: wrap; }

/* Thread-information rows. */
.forum-info-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; }
.forum-info-row + .forum-info-row { border-top: 1px solid var(--vaadin-border-color-secondary, #eceff3); }
.forum-info-row__label { display: inline-flex; align-items: center; gap: 7px; font-size: var(--aura-font-size-s); color: var(--vaadin-text-color-secondary, #6a7686); }
.forum-info-row__label vaadin-icon { width: 14px; height: 14px; color: var(--aura-accent-color); }
.forum-info-row__value { font-size: var(--aura-font-size-s); font-weight: 600; color: var(--vaadin-text-color, #1b2733); text-align: right; }

/* Related-resources rows. */
.forum-resource { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: default; }
.forum-resource + .forum-resource { border-top: 1px solid var(--vaadin-border-color-secondary, #eceff3); }
.forum-resource__icon { display: inline-flex; flex: 0 0 auto; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 7px; background: var(--vaadin-background-container, #eef1f6); color: var(--vaadin-text-color-secondary, #6a7686); }
.forum-resource__icon vaadin-icon { width: 15px; height: 15px; }
.forum-resource__icon--pdf { background: #fce8e6; color: #d93025; }
.forum-resource__text { display: flex; flex-direction: column; min-width: 0; }
.forum-resource__name { font-size: var(--aura-font-size-s); font-weight: 600; color: var(--vaadin-text-color, #1b2733); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forum-resource__size { font-size: var(--sormas-font-size-xxs, .6875rem); color: var(--vaadin-text-color-secondary, #6a7686); }

/* Top-contributors: reuse .forum-side-item; add trailing score + Author tag. */
.forum-contrib__score { flex: 0 0 auto; font-weight: 800; color: var(--aura-accent-color); }
.forum-author-tag { display: inline-block; margin-left: 6px; font-size: var(--sormas-font-size-xxs, .6875rem); font-weight: 700; color: #187038; background: #e6f4ea; border-radius: 999px; padding: 0 7px; vertical-align: middle; }

/* Comment section: heading + comment cards with avatar headers. */
.forum-comment-panel__heading { font-size: var(--aura-font-size-l); font-weight: 800; margin-top: 6px; }
.forum-comment {
  background: #ffffff;
  border: 1px solid var(--vaadin-border-color-secondary, #dae0e8);
  border-radius: var(--vaadin-radius-m, 8px);
  padding: 14px 16px !important;
  gap: 6px !important;
  box-shadow: 0 1px 2px rgba(13, 42, 76, .05);
}
.forum-comment + .forum-comment { border-top: 1px solid var(--vaadin-border-color-secondary, #dae0e8); }
.forum-comment__header { gap: 8px !important; }

/* ============================ Resources module (library) ============================
   Landing page: hero, type tabs, filter bar, disease/syndrome chips with counts, resource
   card grid, "Recently added" rail; plus the Related-resources side rows reused on Case/
   Event detail and the forum thread page. Reuses forum-card / forum-tag primitives. */

.resource-view { max-width: none; width: 100%; }
.resource-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
  width: 100%;
}
.resource-center { min-width: 0; gap: 12px; }
.resource-rail { min-width: 0; position: sticky; top: 12px; }
@media (max-width: 1024px) {
  .resource-layout { grid-template-columns: minmax(0, 1fr); }
  .resource-rail { position: static; }
}

/* Hero */
.resource-hero {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: var(--vaadin-radius-m, 8px);
  padding: 16px 20px;
  color: #ffffff;
  background: linear-gradient(120deg, var(--aura-accent-color) 0%, color-mix(in srgb, var(--aura-accent-color) 70%, #1e3a8a) 100%);
  box-shadow: 0 2px 10px rgba(0, 90, 156, .22);
}
.resource-hero__text { min-width: 0; }
.resource-hero__title { display: block; font-size: 1.25rem; font-weight: 800; }
.resource-hero__subtitle { display: block; margin-top: 3px; font-size: var(--aura-font-size-s); opacity: .9; line-height: 1.4; }

/* Type tabs (underline style, like the forum sort tabs) */
.resource-tabs { border-bottom: 1px solid var(--vaadin-border-color-secondary, #dae0e8); gap: 4px; }
.resource-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 6px 14px;
  font-weight: 600;
  color: var(--vaadin-text-color-secondary, #6a7686);
  cursor: pointer;
}
.resource-tab:hover { color: var(--aura-accent-color); }
.resource-tab--active { color: var(--aura-accent-color); border-bottom-color: var(--aura-accent-color); }

.resource-filterbar { align-items: center; flex-wrap: wrap; }
.resource-section-heading { font-size: var(--aura-font-size-m); font-weight: 800; color: var(--vaadin-text-color, #1b2733); margin-top: 4px; }

/* Disease/syndrome chips with counts */
.resource-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.resource-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 118px;
  padding: 9px 14px;
  background: #ffffff;
  border: 1px solid var(--vaadin-border-color-secondary, #dae0e8);
  border-radius: var(--vaadin-radius-m, 8px);
  box-shadow: 0 1px 2px rgba(13, 42, 76, .06);
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.resource-chip:hover { border-color: var(--aura-accent-color); box-shadow: 0 2px 8px rgba(13, 42, 76, .12); }
.resource-chip--active { border-color: var(--aura-accent-color); background: color-mix(in srgb, var(--aura-accent-color) 8%, #ffffff); }
.resource-chip__label { font-size: var(--aura-font-size-s); font-weight: 700; color: var(--vaadin-text-color, #1b2733); }
.resource-chip--active .resource-chip__label { color: var(--aura-accent-color); }
.resource-chip__count { font-size: var(--sormas-font-size-xxs, .6875rem); color: var(--vaadin-text-color-secondary, #6a7686); }
.resource-chip-row__empty { font-size: var(--aura-font-size-s); font-style: italic; color: var(--vaadin-text-color-secondary, #6a7686); }

/* Card grid */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  width: 100%;
}
.resource-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--vaadin-border-color-secondary, #dae0e8);
  border-radius: var(--vaadin-radius-m, 8px);
  box-shadow: 0 1px 2px rgba(13, 42, 76, .06);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.resource-card:hover { border-color: color-mix(in srgb, var(--aura-accent-color) 40%, #dae0e8); box-shadow: 0 2px 10px rgba(13, 42, 76, .12); }
.resource-card__header { display: flex; align-items: center; gap: 8px; }
.resource-card__icon { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 8px; flex: 0 0 auto; }
.resource-card__icon vaadin-icon { width: 17px; height: 17px; }
.resource-card__manage { margin-left: auto; display: inline-flex; gap: 2px; }
.resource-card__title { font-size: var(--aura-font-size-m); font-weight: 700; line-height: 1.3; color: var(--vaadin-text-color, #1b2733); }
.resource-card__description {
  font-size: var(--aura-font-size-s);
  color: var(--vaadin-text-color-secondary, #6a7686);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.resource-card__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.resource-card__meta { font-size: var(--sormas-font-size-xxs, .6875rem); color: var(--vaadin-text-color-secondary, #6a7686); }
.resource-card__actions { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--vaadin-border-color-secondary, #eceff3); flex-wrap: wrap; }
.resource-card__actions a { text-decoration: none; }

/* Type badges + icon tints (colour system mirrors the forum badges) */
.resource-badge { display: inline-block; font-size: var(--sormas-font-size-xxs, .6875rem); font-weight: 800; letter-spacing: .04em; padding: 2px 8px; border-radius: 5px; }
.resource-badge--guideline { background: #e8f0fe; color: #1a56c4; }
.resource-badge--iec { background: #fef0e6; color: #b45605; }
.resource-badge--image { background: #f3e8fd; color: #8430ce; }
.resource-badge--video { background: #fce8e6; color: #d93025; }
.resource-card__icon--guideline { background: #e8f0fe; color: #1a73e8; }
.resource-card__icon--iec { background: #fef0e6; color: #e8710a; }
.resource-card__icon--image { background: #f3e8fd; color: #8430ce; }
.resource-card__icon--video { background: #fce8e6; color: #d93025; }

.resource-empty { grid-column: 1 / -1; padding: 28px 16px; text-align: center; font-style: italic; color: var(--vaadin-text-color-secondary, #6a7686); }
.resource-loadmore { align-self: center; }

/* Compact side rows: "Recently added" rail + the Related-resources side card + forum rail rows */
.resource-side-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; width: 100%; box-sizing: border-box; }
.resource-side-row + .resource-side-row { border-top: 1px solid var(--vaadin-border-color-secondary, #eceff3); }
.resource-side-row__icon { display: inline-flex; flex: 0 0 auto; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 7px; }
.resource-side-row__icon vaadin-icon { width: 15px; height: 15px; }
.resource-side-row__icon--guideline { background: #e8f0fe; color: #1a73e8; }
.resource-side-row__icon--iec { background: #fef0e6; color: #e8710a; }
.resource-side-row__icon--image { background: #f3e8fd; color: #8430ce; }
.resource-side-row__icon--video { background: #fce8e6; color: #d93025; }
.resource-side-row__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.resource-side-row__title { font-size: var(--aura-font-size-s); font-weight: 600; color: var(--vaadin-text-color, #1b2733); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resource-side-row__meta { font-size: var(--sormas-font-size-xxs, .6875rem); color: var(--vaadin-text-color-secondary, #6a7686); }
.resource-side-row__action { flex: 0 0 auto; font-size: var(--aura-font-size-s); font-weight: 700; color: var(--aura-accent-color); cursor: pointer; text-decoration: none; }
.resource-side-row__action:hover { text-decoration: underline; }

/* Share-to-forum dialog rows */
.resource-share-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.resource-share-row + .resource-share-row { border-top: 1px solid var(--vaadin-border-color-secondary, #eceff3); }
.resource-share-row__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.resource-share-row__title { font-size: var(--aura-font-size-s); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resource-share-row__meta { font-size: var(--sormas-font-size-xxs, .6875rem); color: var(--vaadin-text-color-secondary, #6a7686); }

.resource-editor__current-file { font-size: var(--aura-font-size-s); color: var(--vaadin-text-color-secondary, #6a7686); font-style: italic; }

/* "Link resource" affordance in the forum thread's Related-resources card */
.forum-resource__link-button { margin: 6px 8px 4px; }
.resource-share-row .resource-side-row__icon { width: 30px; height: 30px; }

/* ---------------------------------------------------------------------------------------------------
   News review popup (NewsPopUp / NewsFlowView title click) — reading-first layout: a compact
   classification band pinned at the top, the embedded article taking all remaining dialog height.
   --------------------------------------------------------------------------------------------------- */

/* The CommitDiscardWrapperComponent fills the (94vh) dialog; the form scrolls, the button bar stays put. */
.news-review-wrapper { padding: 8px 12px 4px; gap: 6px; height: 100%; box-sizing: border-box; }
.news-review-wrapper > .news-review-form { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* Compact band: the classification set (risk / status / category / category-detail / area / source, plus
   the jurisdiction cascade when AREA=PROVINCE) rides the form-layout's own columns — each field carries
   colspan 3, so four sit per row and hidden fields drop out entirely.

   DO NOT override `display` on this element. It is a <vaadin-form-layout>, which slots its children into a
   shadow <div id="layout">; forcing the host to flex turns that div into a flex ITEM, so it shrink-wraps to
   its content instead of filling the host. With the classification band folded away the only content left is
   the article, and the pane collapsed to the iframe's intrinsic 300px (measured: 354px in a 1432px dialog).
   The component's own layout already gives the band its compact rows via each field's colspan. */
.news-review-form > * {
  --vaadin-input-field-label-font-size: var(--sormas-font-size-xxs, .6875rem);
}

/* Reading pane: toolbar over the article frame. */
.news-review__article { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.news-review__toolbar { min-height: 0; }
.news-review__frame {
  width: 100%;
  /* 94vh dialog minus header, button bar and the single-line classification band. */
  height: calc(94vh - 200px);
  min-height: 320px;
  border: 1px solid var(--vaadin-border-color-secondary, #eceff3);
  border-radius: 8px;
  background: #fff;
}

/* The dialog is 94vh tall, so the frame is sized off the viewport (a % height would resolve against the
   form's auto-height grid row and collapse). Reviewers who want more can still resize/drag the dialog. */

@media (max-width: 900px) {
  /* Narrow viewport: the band wraps to two or three lines, so the frame gives that height back. */
  .news-review__frame { height: calc(94vh - 330px); }
}

/* ---------------------------------------------------------------------------------------------------
   Directory status bar (utils/StatusFilterBar) + the News/Call Center list views. The filter bar already
   collapses behind its own "Filters" button (.sormas-filterbar); these rules do the same for the status
   button row and keep the page from scrolling sideways on a phone. Grid column visibility is server-side
   (see NewsFlowView#applyResponsiveLayout) because grid cells are not reachable from a stylesheet.
   --------------------------------------------------------------------------------------------------- */
.news-view, .call-center-view { min-width: 0; }
/* The grid must be free to shrink below its content width, otherwise the whole page scrolls sideways
   instead of the grid scrolling inside its own box. */
.news-view vaadin-grid, .call-center-view vaadin-grid { min-width: 0; max-width: 100%; }

.sormas-status-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vaadin-gap-xs) var(--vaadin-gap-s);
  width: 100%;
  flex: 0 0 auto;
}
.sormas-status-bar__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vaadin-gap-xs);
  flex: 1 1 auto;
  min-width: 0;
}
/* Optional trailing slot (e.g. the ACTIVE / ACTIVE_AND_ARCHIVED relevance combo), pinned right. Empty in views
   that add nothing to it, which is why it must not reserve width of its own. */
.sormas-status-bar__trailing {
  display: flex;
  align-items: center;
  gap: var(--vaadin-gap-xs);
  margin-left: auto;
  max-width: 100%;
}
.sormas-status-bar__trailing > vaadin-combo-box { width: 220px; max-width: 100%; }
/* AUTOMATIC_ARCHIVING info label (StatusFilterBar#setInfoLabel): reads as secondary note text beside the combo, and
   must be free to shrink so it never pushes the relevance combo off the row. */
.sormas-status-bar__info {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-size: var(--aura-font-size-s);
  color: var(--vaadin-text-color-secondary, #6a7686);
  min-width: 0;
}
/* The phone mirror of the whole bar: one action icon carrying the same status choices. */
.sormas-status-bar__mobile { display: none; }

/* Narrow laptops/tablets: let the trailing combo shrink instead of forcing the row to wrap. */
@media (max-width: 1024px) {
  .sormas-status-bar__trailing > vaadin-combo-box { width: 180px; }
}

/* 640px, NOT 800px: a narrow desktop window keeps the full risk-button row (it simply wraps) — only a real
   phone folds it away. Must match NewsFlowView.PHONE_BREAKPOINT. */
@media (max-width: 640px) {
  /* Phone: the status options fold into the action icon. The trailing control (relevance status) does NOT fold —
     it wraps onto its own full-width line, because it is the only way to reach archived/deleted records. */
  .sormas-status-bar__options { display: none; }
  .sormas-status-bar__mobile { display: inline-flex; align-items: center; order: -1; }
  .sormas-status-bar { justify-content: flex-start; flex-wrap: nowrap; }
  /* The action icon and the trailing combo(s) share ONE line — a full-width trailing block used to
     wrap under the icon, leaving a mostly-empty row of chrome above every directory. */
  .sormas-status-bar__trailing { margin-left: 0; flex: 1 1 0; min-width: 0; }
  .sormas-status-bar__trailing > vaadin-combo-box { width: auto; flex: 1 1 0; min-width: 0; }

  /* Reclaim horizontal room the list view spends on chrome. */
  .news-view, .call-center-view { padding: var(--vaadin-padding-s); gap: var(--vaadin-gap-s); }
}

/* Edge-to-edge article review popup on a phone (NewsFlowView sizes it; these rules strip the insets and
   give the article frame the height the smaller classification band leaves). */
.news-review-dialog--phone::part(overlay) {
  border-radius: 0;
  max-height: 100dvh;
}
@media (max-width: 640px) {
  .news-review-wrapper { padding: 4px 8px 4px; }
  .news-review__frame { height: calc(100dvh - 300px); min-height: 240px; }
}

/* Reading-first review popup: the classification band is folded away behind the toolbar's "Classify" action
   icon, so the popup opens straight onto the article and the embedded page gets the full dialog height. The
   description text area is exempt — its own "Show description" toggle owns its visibility. */
.news-review-form.fields-collapsed > *:not(.news-review__article):not(vaadin-text-area) { display: none !important; }
.news-review-form.fields-collapsed .news-review__frame { height: calc(94vh - 120px); }
.news-review__classify-btn { font-weight: 600; }
@media (max-width: 640px) {
  .news-review-form.fields-collapsed .news-review__frame { height: calc(100dvh - 150px); }
}

/* The wrapper is a VerticalLayout, which does NOT stretch its children: with the classification band folded
   away the form has no wide content left, so it would shrink to the article's intrinsic width (toolbar +
   an iframe's default 300px) and leave the dialog mostly empty. Pin the whole reading column to full width —
   the iframe's own width:100% then resolves against the dialog instead of against itself. */
.news-review-wrapper { width: 100%; box-sizing: border-box; }
.news-review-wrapper > .news-review-form { width: 100%; align-self: stretch; box-sizing: border-box; }

/* vaadin-form-layout sizes every child by writing an INLINE `width: calc(<colspan/columns>% - …)` on it
   (see @vaadin/form-layout responsive-steps-layout.js). An inline style beats any normal stylesheet rule, so
   the article pane kept one column's width and left the rest of the dialog empty — the wider the screen, the
   smaller it looked. !important is the only thing that outranks it. grid-column/flex cover the layout engine
   whichever way the component lays its children out. */
.news-review-form .news-review__article {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  flex: 1 0 100% !important;
  grid-column: 1 / -1 !important;
}
.news-review-form .news-review__frame { width: 100% !important; flex: 1 1 auto; }
/* Same treatment for the toggled description: full reading width, not one column. */
.news-review-form > vaadin-text-area { width: 100% !important; max-width: none !important; grid-column: 1 / -1 !important; }

/* GTPAL shorthand line under the mother's gravida/parity inputs (neonatal tetanus vaccination tab). */
.sormas-gtpal-summary {
  font-size: var(--aura-font-size-s);
  font-weight: 600;
  color: var(--vaadin-text-color-secondary, #6a7686);
  padding: 2px 0 0;
}
.sormas-gtpal-summary--warn { color: var(--sormas-warning, #b8860b); font-weight: 700; }

/* ---------------------------------------------------------------------------------------------------
   Multi-column checkbox groups — Vaadin-8 CheckboxSet.setColumnCount(n)
   ---------------------------------------------------------------------------------------------------
   The legacy CheckboxSet laid its checkboxes out in a GridLayout with a fixed column count
   (`cbsDiseases.setColumnCount(3)` in CustomizableFieldEditForm / UserEditForm). Flow's
   <vaadin-checkbox-group> has no column-count API, but its checkbox children are slotted into
   part="group-field", which an application-theme rule can turn into a CSS grid — so the legacy
   look is reproduced with CSS instead of a Java call. Applied by adding the class to the
   CheckBoxGroupField (see CustomizableFieldEditForm#cbsDiseases).
   Unlike the legacy GridLayout this also degrades on narrow viewports. */
vaadin-checkbox-group.sormas-checkbox-grid-3::part(group-field) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--vaadin-gap-m, 1rem);
  row-gap: var(--vaadin-gap-xs, 0.25rem);
  align-items: start;
}
@media (max-width: 900px) {
  vaadin-checkbox-group.sormas-checkbox-grid-3::part(group-field) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  vaadin-checkbox-group.sormas-checkbox-grid-3::part(group-field) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------------------------------
   Yes / No / Unknown segmented button row
   ---------------------------------------------------------------------------------------------------
   Flow re-expression of the Vaadin-8 SCSS rule `.v-horizontallayout.yes-no-unknown-group .v-button`
   (sormas-ui/src/main/webapp/VAADIN/themes/sormas/components/button.scss). The DOM contract is the pair
   of legacy class names the port deliberately kept: `yes-no-unknown-group` on the row and
   `yes-no-unknown-selected` on the active option
   (utils/components/customizablefield/CustomizableFieldInputYesNoUnknown).
   Legacy → Flow token mapping: $v-border → --vaadin-border-color-secondary, $v-app-background-color →
   --vaadin-background-color, $v-focus-color → the brand blue (--lumo-primary-color, set at the top of
   this file), $v-disabled-opacity → --vaadin-disabled-opacity. The legacy `.v-slot { margin-right: -2px }`
   border-overlap trick becomes a negative margin between adjacent buttons. */
.yes-no-unknown-group {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.yes-no-unknown-group > vaadin-button {
  margin: 0 -1px 0 0;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  border: 1px solid var(--vaadin-border-color-secondary, #c4ccd6);
  border-radius: 0;
  box-shadow: none;
  background: var(--vaadin-background-color, #fff);
  color: var(--vaadin-text-color, #1b2733);
  cursor: pointer;
}
.yes-no-unknown-group > vaadin-button:first-child { border-radius: 4px 0 0 4px; }
.yes-no-unknown-group > vaadin-button:last-child { border-radius: 0 4px 4px 0; margin-right: 0; }
/* Selected: the legacy `background: $v-focus-color`. Kept explicit rather than left to the LUMO_PRIMARY
   theme variant the component also sets, so the segmented row keeps its flat 28px shape. */
.yes-no-unknown-group > vaadin-button.yes-no-unknown-selected {
  background: var(--lumo-primary-color, #005a9c);
  color: #fff;
  /* sits above its neighbours so the shared border reads as the selected colour */
  position: relative;
  z-index: 1;
}
.yes-no-unknown-group > vaadin-button:hover:not([disabled]) {
  background: color-mix(in srgb, var(--lumo-primary-color, #005a9c) 12%, var(--vaadin-background-color, #fff));
}
.yes-no-unknown-group > vaadin-button.yes-no-unknown-selected:hover:not([disabled]) {
  background: color-mix(in srgb, var(--lumo-primary-color, #005a9c) 88%, #000);
}
.yes-no-unknown-group > vaadin-button[disabled] {
  opacity: var(--vaadin-disabled-opacity, 0.5);
  cursor: default;
}

/* =============================================================================
   STATISTICS MODULE — redesign (2026-07-29)

   The four statistics screens (query builder, saved filters, statistics dashboard,
   database export) were the last routes still rendering as raw stacked
   VerticalLayouts: a column of bare H3 headings over unstyled Horizontal/Vertical
   layouts, a bold-anchor sub-navigation strip and a map "legend" that printed raw
   hex codes. This layer gives them the same carded, Aura-toned chrome the rest of
   the app already uses (.sormas-panel-card / .nd-card / .forum-card lineage):

     .stats-view        page shell on the cool canvas
     .stats-nav         sub-navigation as pill tabs (replaces bold anchors)
     .stats-card        section card: icon chip + title + trailing actions + body
     .stats-section     a labelled block INSIDE a card (several per card)
     .stats-filter-row  one query-builder filter row (numbered, removable)
     .stats-fieldgrid   wrapping field row (visualization / options rows)
     .stats-actionbar   the Generate + save-filter footer row
     .stats-note        the incidence / reference-year advisory lines
     .stats-empty       "no results yet" / "no cases found" placeholders
     .stats-legend      choropleth quartile legend with real colour swatches

   Aura tokens only (no new palette): the accent resolves to SORMAS blue via the
   --aura-accent-color / --lumo-primary-color overrides at the top of this file.

   DENSITY PASS (2026-07-30). The first cut of this layer was too airy: a card per
   builder section, generous card padding, and field rows on `1fr` grid tracks that
   stretched four small controls across a 1080px-wide monitor. The rules below keep
   the same chrome but at laptop density — controls size to their content and wrap
   from the left instead of spreading, prose is capped at a readable measure, and the
   builder's three sections share one card (see .stats-section).
   ============================================================================= */

/* ---- page shell: canvas + consistent padding/gaps, shared by all four routes ---- */
.stats-view {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  background: var(--sormas-canvas);
  padding: var(--vaadin-padding-s) var(--vaadin-padding-m) var(--vaadin-padding-m);
  gap: var(--vaadin-gap-s);
}
/* the cards are plain Divs, which a VerticalLayout host does NOT stretch */
.stats-view > * { width: 100%; box-sizing: border-box; min-width: 0; }

@media (max-width: 640px) {
  .stats-view { padding: var(--vaadin-padding-s); gap: var(--vaadin-gap-s); }
}

/* ---- sub-navigation: a pill-tab strip instead of four bold anchors ---- */
.stats-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--vaadin-background-color, #fff);
  border: 1px solid var(--vaadin-border-color-secondary, #e3e5ea);
  border-radius: 999px;
  padding: 3px;
  box-shadow: var(--aura-shadow-xs);
}
.stats-nav__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: var(--aura-font-size-s);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--vaadin-text-color-secondary, #6a7686);
}
.stats-nav__tab vaadin-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.stats-nav__tab:hover {
  background: color-mix(in srgb, var(--aura-accent-color) 9%, #ffffff);
  color: var(--aura-accent-color);
}
.stats-nav__tab--active,
.stats-nav__tab--active:hover {
  background: var(--aura-accent-color);
  color: var(--aura-accent-contrast-color, #fff);
  box-shadow: 0 1px 3px rgba(13, 42, 76, .28);
}
/* external sormas-stats link: sits outside the pill group as a quiet link */
.stats-nav__external {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: var(--aura-font-size-s);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--aura-accent-color);
  border: 1px dashed color-mix(in srgb, var(--aura-accent-color) 45%, #c2ccd8);
}
.stats-nav__external:hover { background: color-mix(in srgb, var(--aura-accent-color) 9%, #ffffff); }
.stats-nav__external vaadin-icon { width: 13px; height: 13px; }

/* ---- section card ---- */
.stats-card {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  background: var(--vaadin-background-color, #fff);
  border: 1px solid var(--vaadin-border-color-secondary, #e3e5ea);
  border-radius: var(--vaadin-radius-l, 12px);
  box-shadow: var(--aura-shadow-xs);
  padding: 11px 14px 13px;
}
/* a card whose sections label themselves (.stats-section) carries no head of its own */
.stats-card--headless { padding: 12px 14px 13px; }
/* actions on a headless card have no head to sit in — they get their own right-aligned row */
.stats-card--headless > .stats-card__actions { justify-content: flex-end; margin-bottom: 8px; }
.stats-card__head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  row-gap: var(--vaadin-gap-xs);
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--vaadin-border-color-secondary, #eef0f3);
}
.stats-card__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--aura-accent-color) 11%, #ffffff);
  color: var(--aura-accent-color);
}
.stats-card__icon vaadin-icon { width: 14px; height: 14px; }
.stats-card__titles { flex: 1 1 220px; min-width: 0; }
.stats-card__title {
  display: block;
  font-size: var(--aura-font-size-m, .95rem);
  font-weight: 700;
  color: var(--vaadin-text-color, #1b2733);
  line-height: 1.25;
}
.stats-card__subtitle {
  display: block;
  margin-top: 1px;
  font-size: var(--sormas-font-size-xxs, .6875rem);
  color: var(--vaadin-text-color-secondary, #6a7686);
}
.stats-card__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--vaadin-gap-xs);
  flex-wrap: wrap;
  margin-left: auto;
}
.stats-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--vaadin-gap-s);
  min-width: 0;
}
.stats-card__footer {
  display: flex;
  align-items: center;
  gap: var(--vaadin-gap-s);
  flex-wrap: wrap;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px dashed var(--vaadin-border-color-secondary, #eef0f3);
}

/* ---- a labelled block inside a card body ----------------------------------------
   Several of these replace what used to be several cards: one border + one shadow +
   one set of page gaps for the whole query builder instead of four. Sections are
   separated by a hairline, and their label line doubles as the action slot (the
   filters' add/reset used to cost a whole footer row of their own). */
.stats-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.stats-section + .stats-section {
  padding-top: 11px;
  border-top: 1px solid var(--vaadin-border-color-secondary, #eef0f3);
}
.stats-section__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  row-gap: 4px;
  min-height: 24px;
}
.stats-section__label {
  font-size: var(--sormas-font-size-xxs, .6875rem);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--vaadin-text-color-secondary, #5d6672);
}
.stats-section__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: auto;
}
/* the query card's sections carry their own spacing, so the body only separates them */
.stats-card--query .stats-card__body { gap: 11px; }

/* Secondary buttons inside the cards read too faint in bare Aura — same outlined
   treatment the list-view toolbars get (.sormas-view-toolbar above). Icon-only
   tertiary-inline buttons (row remove, widget actions) keep their quiet look. */
.stats-card vaadin-button:not([theme~="primary"]):not([theme~="tertiary-inline"]),
.stats-actionbar vaadin-button:not([theme~="primary"]) {
  border: 1px solid color-mix(in srgb, var(--aura-accent-color) 42%, #c2ccd8);
  background: #ffffff;
  color: var(--aura-accent-text-color, var(--aura-accent-color));
  font-weight: 600;
  border-radius: var(--vaadin-radius-m, 6px);
  box-shadow: 0 1px 2px rgba(13, 42, 76, .10);
}
.stats-card vaadin-button:not([theme~="primary"]):not([theme~="tertiary-inline"]):hover,
.stats-actionbar vaadin-button:not([theme~="primary"]):hover {
  background: color-mix(in srgb, var(--aura-accent-color) 12%, #ffffff);
  border-color: var(--aura-accent-color);
  color: var(--aura-accent-color);
}
.stats-card vaadin-button[theme~="primary"],
.stats-actionbar vaadin-button[theme~="primary"] {
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(13, 42, 76, .22);
}
/* An "error" variant must stay red — the outlined accent rule above would repaint it blue. */
.stats-card vaadin-button[theme~="error"] {
  border-color: color-mix(in srgb, var(--vaadin-error-color, #c8271f) 45%, #d8c2c2);
  color: var(--vaadin-error-text-color, #b3261e);
}
.stats-card vaadin-button[theme~="error"]:hover {
  background: color-mix(in srgb, var(--vaadin-error-color, #c8271f) 10%, #ffffff);
  border-color: var(--vaadin-error-color, #c8271f);
  color: var(--vaadin-error-text-color, #b3261e);
}

/* ---- hint / info paragraph inside a card body (the i18n infoStatistics* HTML) ----
   Capped at a readable measure: full-width prose on a wide monitor is the single
   biggest reason these screens read as "spread out". */
.stats-hint {
  font-size: var(--aura-font-size-s);
  line-height: 1.45;
  color: var(--vaadin-text-color-secondary, #6a7686);
  max-width: 78ch;
}
.stats-hint b, .stats-hint strong { color: var(--vaadin-text-color, #1b2733); font-weight: 600; }

/* ---- query-builder filter rows ---- */
.stats-filter-rows { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.stats-filter-row {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  background: #fbfcfe;
  border: 1px solid var(--vaadin-border-color-secondary, #e7eaef);
  border-left: 3px solid var(--aura-accent-color);
  border-radius: 8px;
  padding: 7px 10px 9px;
}
.stats-filter-row__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.stats-filter-row__index {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--aura-accent-color);
  color: var(--aura-accent-contrast-color, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.stats-filter-row__remove { margin-left: auto; }
.stats-filter-row__body { min-width: 0; }
/* the ported filter elements are Horizontal/VerticalLayouts that must not overflow the row */
.stats-filter-row__body > * { max-width: 100%; }

/* JURISDICTION / PLACE_OF_RESIDENCE editors are two-column layouts — let them wrap
   instead of gluing their fields together (they set spacing false), but do NOT let
   two selects stretch across a 1080px row: they size to content and stay left. */
.stats-filter-cols { flex-wrap: wrap; width: 100%; column-gap: var(--vaadin-gap-m); }
.stats-filter-cols > * { flex: 0 1 280px; min-width: 0; gap: var(--vaadin-gap-xs); }

/* ---- field row: visualization pickers + options row ----------------------------
   A wrapping flex row, not `1fr` grid tracks. Grid tracks stretched four small
   controls edge to edge on a wide screen; here each control keeps its natural width
   and the row wraps from the left, so the group reads as one compact cluster. */
.stats-fieldgrid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--vaadin-gap-xs) var(--vaadin-gap-m);
  width: 100%;
}
.stats-fieldgrid > * { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.stats-fieldgrid vaadin-text-field, .stats-fieldgrid vaadin-combo-box { width: 13em; }

/* The visualization chooser is a HorizontalLayout of three segmented groups, the two
   rows/columns pickers and the exchange button — wrap it rather than overflow. */
.stats-viz {
  flex-wrap: wrap;
  align-items: flex-end;
  row-gap: var(--vaadin-gap-s);
  column-gap: var(--vaadin-gap-m);
  width: 100%;
  min-width: 0;
}
.stats-viz > * { max-width: 100%; }
.stats-viz__element { flex-wrap: wrap; align-items: flex-end; row-gap: var(--vaadin-gap-xs); }
.stats-viz__switch { margin-bottom: 4px; }
/* Segmented pill groups: the chart-type group disables STACKED_COLUMN/PIE in incidence
   mode, which bare Aura renders indistinguishably from an enabled segment. */
.stats-view vaadin-radio-group.sormas-option-group vaadin-radio-button[disabled] {
  opacity: .42;
  cursor: not-allowed;
  background: var(--vaadin-background-container, #eef1f6);
}

/* ---- Generate + save-filter row (the query card's footer) ----------------------
   This used to be a standalone bordered bar between the builder cards and the
   results card — a fifth box on the page. It is now the query card's footer, so it
   carries no chrome of its own; .stats-card__footer supplies the separator. */
.stats-actionbar {
  display: flex;
  align-items: flex-end;
  gap: var(--vaadin-gap-s);
  flex-wrap: wrap;
  box-sizing: border-box;
  flex: 1 1 100%;
  width: 100%;
}
.stats-actionbar__generate {
  min-height: 36px;
  padding: 0 20px;
  font-weight: 700;
}
.stats-actionbar__hint {
  font-size: var(--sormas-font-size-xxs, .6875rem);
  color: var(--vaadin-text-color-secondary, #9ba3af);
  padding-bottom: 10px;
}
.stats-actionbar__save {
  display: flex;
  align-items: flex-end;
  gap: var(--vaadin-gap-xs);
  flex-wrap: wrap;
  margin-left: auto;
}
.stats-actionbar__save vaadin-text-field { width: 11em; }
@media (max-width: 700px) {
  .stats-actionbar__save { margin-left: 0; width: 100%; }
  .stats-actionbar__save vaadin-text-field { width: 100%; }
  .stats-actionbar__generate { width: 100%; }
  .stats-actionbar__hint { display: none; }
}

/* ---- results ---- */
.stats-card--results .stats-card__body { gap: var(--vaadin-gap-s); }
.stats-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  box-sizing: border-box;
  padding: 7px 10px;
  border-radius: 8px;
  background: #fff8e6;
  border: 1px solid #f2dfae;
  color: #7a5b12;
  font-size: var(--aura-font-size-s);
  line-height: 1.45;
}
.stats-note vaadin-icon { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.stats-note--info { background: #eaf2fb; border-color: #c7dcf2; color: #1c4a7a; }
.stats-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  padding: 18px 14px;
  text-align: center;
  border: 1px dashed var(--vaadin-border-color-secondary, #dfe3e9);
  border-radius: 8px;
  background: #fbfcfe;
}
.stats-empty vaadin-icon { width: 22px; height: 22px; color: #c3cbd6; }
.stats-empty__title {
  font-size: var(--aura-font-size-m, .95rem);
  font-weight: 700;
  color: var(--vaadin-text-color-secondary, #5d6672);
}
.stats-empty__hint {
  font-size: var(--aura-font-size-s);
  color: var(--vaadin-text-color-secondary, #9ba3af);
  line-height: 1.5;
  max-width: 46rem;
}

/* Pivot table: wide result sets scroll INSIDE their own box, never the page. */
.stats-table-wrap { width: 100%; min-width: 0; overflow-x: auto; }
.stats-table { font-variant-numeric: tabular-nums; }
.stats-table::part(header-cell) { font-weight: 700; }
/* The pivot's row-caption column and its trailing Total row read as structure, not as data.
   NOTE: Grid exposes these as generated CELL parts (…-cell), not row parts. */
.stats-table::part(first-column-cell) { font-weight: 600; }
.stats-table::part(last-row-cell) {
  font-weight: 700;
  background: color-mix(in srgb, var(--aura-accent-color) 6%, #ffffff);
}

/* Chart / map panels get the same soft framing as the dashboard plots. */
.stats-plot {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--vaadin-border-color-secondary, #eef0f3);
  border-radius: 10px;
  overflow: hidden;
}

/* ---- choropleth quartile legend (real swatches, not printed hex codes) ---- */
.stats-legend { display: flex; flex-direction: column; gap: 7px; }
.stats-legend__title {
  font-size: var(--sormas-font-size-xxs, .6875rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vaadin-text-color-secondary, #5d6672);
}
.stats-legend__items { display: flex; flex-wrap: wrap; gap: 7px 18px; }
.stats-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--aura-font-size-s);
  color: var(--vaadin-text-color, #333b47);
}
.stats-legend__swatch {
  width: 26px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid rgba(20, 33, 61, .18);
  flex: 0 0 auto;
}

/* ---- statistics dashboard: widget cards on a responsive grid ---- */
.stats-widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--vaadin-gap-s);
  width: 100%;
}
@media (max-width: 560px) {
  .stats-widget-grid { grid-template-columns: minmax(0, 1fr); }
}
/* the "no widgets yet" placeholder spans the whole grid instead of sitting in one column */
.stats-widget-grid > .stats-empty { grid-column: 1 / -1; }
.stats-widget__chart { width: 100%; min-width: 0; }

/* ---- database export: one card per DatabaseTableType, responsive columns ---- */
/* Four content columns, capped so they cluster on the left instead of each stretching
   to ~400px of mostly-empty space on a wide monitor. */
.stats-export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 280px));
  justify-content: start;
  gap: var(--vaadin-gap-s);
  width: 100%;
  align-items: start;
}
.stats-export-col {
  box-sizing: border-box;
  min-width: 0;
  background: #fbfcfe;
  border: 1px solid var(--vaadin-border-color-secondary, #e7eaef);
  border-radius: 8px;
  padding: 9px 11px 10px;
  gap: 0;
}
.stats-export-col__title {
  font-size: var(--sormas-font-size-xxs, .6875rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--aura-accent-color);
  padding-bottom: 5px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--vaadin-border-color-secondary, #eef0f3);
}
.stats-export-col vaadin-checkbox { font-size: var(--aura-font-size-s); }

/* ---- saved filters: the grid fills its card edge to edge ---- */
.stats-card--grid .stats-card__body { gap: 0; }
.stats-card--grid vaadin-grid { border: 0; min-width: 0; max-width: 100%; }

/* ---- inline edit grid (spreadsheet-style bulk entry, InlineEditGrid) ----
   Every cell holds a live editor, so the default cell padding + field margins would double-space the whole sheet.
   Tighten both and drop the field labels/helper gutters so a line reads as one row of boxes. */
.sormas-inline-edit-grid vaadin-grid-cell-content {
	padding: 2px 4px;
}
.sormas-inline-edit-grid vaadin-text-field,
.sormas-inline-edit-grid vaadin-combo-box,
.sormas-inline-edit-grid vaadin-date-picker {
	padding-top: 0;
	padding-bottom: 0;
	width: 100%;
}
/* Compact input height so ~15 lines fit a laptop screen without scrolling. */
.sormas-inline-edit-grid vaadin-text-field::part(input-field),
.sormas-inline-edit-grid vaadin-combo-box::part(input-field),
.sormas-inline-edit-grid vaadin-date-picker::part(input-field) {
	min-height: 2rem;
	font-size: var(--aura-font-size-s);
}
/* The focused cell has to be unmistakable — it is the caret of a keyboard-only screen. */
.sormas-inline-edit-grid vaadin-text-field:focus-within::part(input-field),
.sormas-inline-edit-grid vaadin-combo-box:focus-within::part(input-field),
.sormas-inline-edit-grid vaadin-date-picker:focus-within::part(input-field) {
	box-shadow: inset 0 0 0 2px var(--aura-accent-color);
}
.sormas-inline-edit-grid-hint {
	display: block;
	padding: var(--vaadin-padding-xs) 0 0 var(--vaadin-padding-xs);
}

/* ---------------------------------------------------------------------------------------------------
   Antimicrobial-susceptibility (AST) matrix
   ---------------------------------------------------------------------------------------------------
   Flow re-expression of the legacy DrugSusceptibilityForm HTML_LAYOUT
   (sormas-ui/src/main/java/de/symeda/sormas/ui/therapy/DrugSusceptibilityForm.java): the Vaadin-8
   fluidRowLocs rows become one CSS grid with a leading drug-name label column followed by the
   AST METHOD / MIC-ZONE VALUE / INTERPRETATION columns. The grid is filled row by row, so a hidden row
   (a drug not applicable to the pathogen test's disease + test type) collapses without leaving a gap. */
.sormas-ast-grid {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) repeat(3, minmax(0, 1fr));
  column-gap: var(--vaadin-gap-m, 1rem);
  row-gap: var(--vaadin-gap-xs, 0.25rem);
  align-items: center;
}
.sormas-ast-grid__header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--vaadin-text-color-secondary, #5d6672);
}
.sormas-ast-grid__drug {
  font-weight: 700;
}
@media (max-width: 900px) {
  .sormas-ast-grid { grid-template-columns: minmax(90px, 0.9fr) repeat(3, minmax(0, 1fr)); column-gap: 0.5rem; }
}

/* --- Case-classification info dialog (CaseDataForm.openCaseClassificationInfoDialog) ------------
   The tier markup comes from ClassificationHtmlRenderer / CaseDefinitionProvider and carries the
   legacy class names (.classification-rules > .main-criteria.main-criteria-<tier>, .headline,
   .criteria, .sub-criteria). The Flow theme never ported legacy's views/classification.scss, so the
   whole popup rendered as unstyled black text. This is that stylesheet, restated with the tier
   colours turned into tinted cards + a coloured accent rail and badge headline instead of legacy's
   flat 60%-opacity blocks. Dialog content lives in the document overlay, so plain class selectors
   (no ::part) reach it. */
.sormas-classification-info {
  font-size: var(--vaadin-font-size-m, 0.875rem);
  line-height: 1.5;
  color: var(--vaadin-text-color, #1c2430);
}

.sormas-classification-info .classification-section + .classification-section,
.sormas-classification-info .classification-toggle + .classification-section {
  margin-top: 1.25rem;
}

.sormas-classification-info .classification-section-title {
  margin: 0 0 0.75rem;
  padding-bottom: 0.375rem;
  border-bottom: 2px solid var(--sormas-accent-50, rgba(0, 90, 156, 0.5));
  color: #005A9C;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Show/Hide Auto Classification toggle: a quiet pill so it reads as a control, not a heading. */
.sormas-classification-info .classification-toggle {
  margin-top: 1rem;
  color: #005A9C;
  font-weight: 600;
  border: 1px solid rgba(0, 90, 156, 0.35);
  border-radius: 999px;
  background: rgba(0, 90, 156, 0.06);
}
.sormas-classification-info .classification-toggle:hover {
  background: rgba(0, 90, 156, 0.12);
}

/* One tier = one card. --tier-* are set per tier below (suspect/probable/confirmed/not-a-case). */
.sormas-classification-info .classification-rules {
  --tier-accent: #6b7684;
  --tier-tint: rgba(107, 118, 132, 0.08);
  --tier-border: rgba(107, 118, 132, 0.3);
}
.sormas-classification-info .classification-rules + .classification-rules {
  margin-top: 0.75rem;
}
.sormas-classification-info .main-criteria {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.875rem 0.875rem;
  border: 1px solid var(--tier-border);
  border-left: 5px solid var(--tier-accent);
  border-radius: 10px;
  background: var(--tier-tint);
}

/* Tier headline as a coloured badge — the colour cue legacy carried on the whole block. */
.sormas-classification-info .main-criteria > .headline {
  /* block + fit-content, not inline-block: the info text that follows is a bare text node and would
     otherwise sit on the badge's line. */
  display: block;
  width: fit-content;
  margin-bottom: 0.5rem;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--tier-accent);
  color: #fff;
  font-size: var(--sormas-font-size-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Criteria + sub-criteria as light chips on top of the tint, so the nesting stays readable. */
.sormas-classification-info .criteria {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  background: #fff;
}
.sormas-classification-info .sub-criteria {
  margin: 0.375rem 0 0.375rem auto;
  padding-left: 0.75rem;
  width: calc(100% - 0.75rem);
  border-left: 2px solid var(--tier-border);
}
.sormas-classification-info .sub-criteria .sub-criteria-content {
  display: block;
  box-sizing: border-box;
  padding: 0.375rem 0.625rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.75);
}

/* Bullet lists inside the MoHP definition text keep their markers inside the card. */
.sormas-classification-info ul {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}
.sormas-classification-info li {
  margin: 0.125rem 0;
}

/* Tier palette — legacy's gold / orange / red / grey, desaturated into card tints with the full
   strength kept on the rail and badge so the severity ramp still reads at a glance. */
.sormas-classification-info .main-criteria-suspect {
  --tier-accent: #C08A00;
  --tier-tint: rgba(255, 199, 0, 0.12);
  --tier-border: rgba(192, 138, 0, 0.32);
}
.sormas-classification-info .main-criteria-probable {
  --tier-accent: #E06C00;
  --tier-tint: rgba(255, 140, 0, 0.12);
  --tier-border: rgba(224, 108, 0, 0.32);
}
.sormas-classification-info .main-criteria-confirmed,
.sormas-classification-info .main-criteria-confirmed_no_symptoms,
.sormas-classification-info .main-criteria-confirmed_unknown_symptoms {
  --tier-accent: #C62828;
  --tier-tint: rgba(198, 40, 40, 0.10);
  --tier-border: rgba(198, 40, 40, 0.30);
}
.sormas-classification-info .main-criteria-confirmed_no_symptoms,
.sormas-classification-info .main-criteria-confirmed_unknown_symptoms {
  --tier-tint: rgba(198, 40, 40, 0.05);
}
.sormas-classification-info .main-criteria-not_a_case {
  --tier-accent: #6b7684;
  --tier-tint: rgba(107, 118, 132, 0.10);
  --tier-border: rgba(107, 118, 132, 0.30);
}

/* ---- Event IRA (incident risk assessment) outcome colour coding ----
   The computed risk level renders as a tinted badge and the recommended response picks up the same accent:
   green LOW, amber MODERATE, red HIGH, grey when the assessment is still UNKNOWN. Accents match the risk
   pills used on the national dashboard news section. */
.sormas-ira-risk-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 2px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--aura-font-size-s, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--risk-accent);
  background: var(--risk-tint);
  border: 1px solid var(--risk-border);
}
.sormas-ira-response {
  font-weight: 600;
  color: var(--risk-accent);
}
.sormas-ira-risk-badge.risk-low,
.sormas-ira-response.risk-low {
  --risk-accent: #1f8a4d;
  --risk-tint: #e9f7ef;
  --risk-border: rgba(31, 138, 77, 0.32);
}
.sormas-ira-risk-badge.risk-moderate,
.sormas-ira-response.risk-moderate {
  --risk-accent: #b36a00;
  --risk-tint: #fdf3e7;
  --risk-border: rgba(224, 134, 0, 0.32);
}
.sormas-ira-risk-badge.risk-high,
.sormas-ira-response.risk-high {
  --risk-accent: #cf3a25;
  --risk-tint: #fdecea;
  --risk-border: rgba(207, 58, 37, 0.32);
}
.sormas-ira-risk-badge.risk-unknown,
.sormas-ira-response.risk-unknown {
  --risk-accent: #5d6672;
  --risk-tint: #eef0f3;
  --risk-border: rgba(93, 102, 114, 0.32);
}

/* ---- Dashboards on a phone ----
   The legacy-ported dashboards compose side-by-side HorizontalLayout rows (overview card +
   difference chart, epi curve + map, stat-card triples). At 640px two half-width cards are
   unreadable — stack every carded row vertically. The rows themselves are mostly unclassed,
   so target "any horizontal layout whose direct children are dashboard panel cards". */
@media (max-width: 640px) {
  .sormas-dashboard-header { padding: var(--vaadin-padding-s) var(--vaadin-padding-s) 0; }
  .sormas-dashboard-content { padding: var(--vaadin-padding-s); gap: var(--vaadin-gap-s); }
  .dashboard-screen vaadin-horizontal-layout:has(> .sormas-panel-card),
  .sormas-dashboard-stats {
    flex-direction: column;
    align-items: stretch;
    height: auto !important;
  }
  .dashboard-screen .sormas-panel-card {
    width: 100% !important;
    min-width: 0;
  }
  /* Stacked, the curve/map row's fixed 480px would split between the two panels — give each its own height. */
  .sormas-curve-and-map > .sormas-panel-card { height: 420px; }
}