/* Custom bits on top of daisyUI/Tailwind (mirrors _artifacts/_samples/simulator). */

/* Material Symbols (our icon set, loaded as a webfont in base.html). Size to sit
   with body text; flex parents (daisyUI menu/btn) handle vertical centring. The
   weight/fill/optical-size axes match the 20px UI scale. */
.material-symbols-outlined {
  font-size: 1.25rem;
  line-height: 1;
  vertical-align: -0.2em;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
/* Keep a button's icon tight to its label, so "＋Patient" reads as one unit
   (and still does if the button background is ever removed). */
.btn { gap: 0.2rem; }

/* ── The two action-button sizes ─────────────────────────────────────────
   EldeRem standardises on exactly two button sizes so control rows read
   consistently and a button lines up with the field beside it. Always add
   one (alongside `btn` + colour) and pair it with the matching field size;
   use `items-end` on the row when the fields carry a label above them.
     · er-btn-lg → pairs with the default input / select (2.5rem). The form
                   cards: Compute, Pay, Apply, Add, and any primary action
                   sitting next to a full-size field.
     · er-btn-sm → the compact list-row button — same vertical size as daisyUI
                   `btn-xs` (1.5rem), matching the People page. Secondary / ghost
                   actions and list-row buttons.
   Heights are pinned (not left to daisyUI's --size-field) so the pairing
   holds regardless of theme. */
.btn.er-btn-lg { height: 2.5rem; min-height: 2.5rem; padding-inline: 1rem; }
.btn.er-btn-sm { height: 1.5rem; min-height: 1.5rem; padding-inline: 0.5rem;
                 font-size: var(--er-btn-text-sm); }

/* ── Button TEXT size, by language — the map ─────────────────────────────
   One entry per language, nothing per button. Russian says the same thing in noticeably more
   characters than English ("Per employment conditions" → "По условиям трудоустройства"), so its
   labels crowd a control row; Hebrew is usually shorter and stays at the English size. Uzbek
   sits at the default until its buttons are actually translated and can be measured.

   **Text only — the icon keeps its size.** Icons are `.material-symbols-outlined`, sized in
   `rem` at the top of this file, so they don't ride the button's font-size down.

   `--fontsize` is daisyUI's OWN hook: its `.btn` is `font-size: var(--fontsize, .875rem)`.
   Setting it here on the root means every button *inherits* the language's size, while an
   explicit size class (`btn-sm`, `btn-xs`) still wins — those set `--fontsize` on the element
   itself, and an element's own declaration beats an inherited one. Overriding `.btn`'s
   font-size directly would out-specify them and flatten every variant instead. */
:root           { --fontsize: 0.875rem;  --er-btn-text-sm: 0.75rem; }    /* en · he · uz */
html[lang="ru"] { --fontsize: 0.8125rem; --er-btn-text-sm: 0.6875rem; }  /* ru — longer words */
/* Gap between a leading icon and its text in non-flex headings/labels. daisyUI's
   flex components (btn, menu, card-title) already space via their own `gap`. */
:where(h1:not(.card-title), p, legend) > .material-symbols-outlined {
  margin-inline-end: 0.3rem;
}

/* Pure-CSS modal (checkbox-hack) for the identity-document editor — opens with
   no JS, independent of daisyUI's modal internals. A <label for="..."> toggles
   the hidden checkbox; the backdrop label closes it. */
.id-modal { position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; padding: 1rem; }
.id-modal-toggle:checked + .id-modal { display: flex; }
.id-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); cursor: pointer; }
.id-modal-box { position: relative; z-index: 1; width: 100%; max-width: 30rem;
  max-height: 90vh; overflow: auto; background: var(--color-base-100);
  border-radius: var(--radius-box, .5rem); padding: 1.25rem; box-shadow: 0 10px 40px rgba(0,0,0,.25); }

/* er-modal — the same checkbox-hack modal, generic and reusable (the Tutorial popups use it).
   The hidden toggle sits right before `.er-modal`; a <label for="…"> anywhere opens it, the
   backdrop label closes it. `.er-modal-box-full` is the near-full-screen size for a tutorial. */
.er-modal { position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; padding: 1rem; }
.er-modal-toggle:checked + .er-modal { display: flex; }
.er-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); cursor: pointer; }
.er-modal-box { position: relative; z-index: 1; width: 100%; max-width: 32rem;
  max-height: 90vh; overflow: auto; background: var(--color-base-100);
  border-radius: var(--radius-box, .5rem); padding: 1.5rem; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.er-modal-box-full { max-width: min(56rem, 95vw); width: 100%; max-height: 92vh; }

/* Add-attachment wizard (pure CSS, no JS): step 1 lists the kinds; choosing one
   reveals only that kind's fields. Scales to new kinds — add a button + a step
   panel + the radio. The hidden radios both navigate and carry the `kind`. */
.wiz .wiz-panel { display: none; }
.wiz:has(.wiz-step[value=""]:checked) .wiz-choose { display: flex; }
.wiz:has(.wiz-step[value="identification"]:checked) .wiz-identification { display: flex; }
.wiz:has(.wiz-step[value="visa"]:checked) .wiz-visa { display: flex; }

/* `.page-name` marks each page's title (set via {% block page_title %}); it now
   feeds the breadcrumb leaf, so it carries no styling of its own — it renders
   like any other crumb. (It kept a "· " separator + bold weight back when the
   title sat next to the brand; both are obsolete now and made the root-page
   crumb inconsistent with nested ones.) The class stays as a hook / test marker. */

.hero-gradient { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); }
.result-gradient { background: linear-gradient(135deg, #1e3a8a, #2563eb); }

/* Help — the app's single help style, in two placements: `.er-help-text` inline beside a
   field, and `.er-card-help` as an er-card's help slot. Both are small accent italic text
   prefixed with a "?" badge — the shared look is defined once here; they differ only in
   spacing (inline margin vs card padding). Tagged so the translation/help-language layer
   can target them (notes.md 2026-06-10). Colour reuses --color-accent for now. */
.er-help-text,
.er-card-help {
  color: var(--color-accent);
  font-size: 0.75rem;
  line-height: 1.15rem;
  font-style: italic;
}
/* Prefix each help snippet with a question-mark-in-a-circle badge (accent circle,
   accent-content "?"), so the two colours come straight from the theme tokens. */
.er-help-text::before,
.er-card-help::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  margin-inline-end: 0.4em;
  vertical-align: middle;          /* centre the badge with the text, not subscript */
  border-radius: 9999px;
  background-color: var(--color-accent);
  color: var(--color-accent-content);
  font-style: normal;
  font-weight: 700;
  font-size: 0.9em;                /* larger "?" so it doesn't read as tiny */
  line-height: 1;
}
/* Placement-specific spacing (the only thing the two do not share). */
.er-help-text { margin-top: 0.15rem; }
.er-card-help { padding: 1.5rem; }

/* Help toggle (settings): OFF hides every kind of help — the inline form snippets
   (`.er-help-text`), the card help column (`.er-card-help`), and a card that is nothing but
   help (`.er-help-card`, e.g. "About this page"; without this it would linger as a heading over
   an empty body). The card help used to be exempt, which made the toggle look broken: a user
   who switched help off still met it on every card that had a help column.
   The card must also drop out of its two-column grid — see the `.er-card` block below. */
.help-off .er-help-text,
.help-off .er-card-help,
.help-off .er-help-card { display: none; }

/* `.form-control` — label above its input. daisyUI 4 defined this (as exactly the two lines
   below); daisyUI 5 dropped the class, but our templates still use it on ~90 labels. Without a
   rule the layout is an accident of width: a `w-full` input has to wrap onto its own line, so
   the label *appears* above it, while a narrow one (the payslip Amount field, `w-24`) fits
   beside its label and sits inline — the same markup rendering two different ways. Defining it
   makes the intent real. In `base` so a template can still override the direction with a
   utility (see the .card-title note below for why the layer matters). */
@layer base {
  .form-control { display: flex; flex-direction: column; }
}

/* Form row layout: the field (label + full-width input) on the left, its help on
   the right; on small screens the help drops below into the same column. Wrap a
   `.form-control` (or any input block) and its trailing `.er-help-text` in `.field`. */
.field { display: block; }
.field > .form-control > .input,
.field > .form-control > .select,
.field > .form-control > .textarea { width: 100%; }
@media (min-width: 768px) {
  /* Guarded like the er-card grid: with help off the help track would still be reserved and
     the field would sit at two-thirds width beside nothing. */
  html:not(.help-off) .field {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
  }
  /* Nudge the help down so it sits beside the input, not the label above it. */
  .field > .er-help-text { margin-top: 1.6rem; }
}

/* A greyed-out language name: applied to the label of the mandatory (locked)
   language checkbox, so the *word* is greyed like the disabled checkbox itself. */
.lang-label--locked { opacity: 0.4; }

/* Opt-in tab colour: in a `tabs tabs-lift tabs-primary` group, the active tab is
   primary (blue). daisyUI has style modifiers for tabs but no colour variant, so
   we add one. We set daisyUI's own `--tab-bg` (not just background-color) so the
   tabs-lift "lifted" bottom corners — drawn by pseudo-elements from `--tab-bg` —
   are blue too, not white. The tab is a <label> wrapping the radio, so the active
   one is `.tab:has(:checked)`; the bare-input form is covered too. The extra
   `.tabs-primary` class out-specifies daisyUI's default active rule. */
.tabs-primary .tab:has(:checked),
.tabs-primary .tab:checked {
  --tab-bg: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-primary-content);
}

/* Country flags (inline <svg><use> into the inlined sprites). The circle variant
   is already clipped at the SVG level, so it needs no CSS clipping; we only round
   the square variant's corners a touch. `line-height:0` avoids inline-baseline gaps. */
.flag { display: inline-block; vertical-align: middle; line-height: 0; }
.flag--square { border-radius: 3px; }
.flag--circle { border-radius: 9999px; }

/* Breadcrumbs that wrap instead of horizontally scrolling — daisyUI defaults to
   nowrap + overflow-x:auto, but in our navbar we want long trails (esp. on small
   screens, where they sit on their own second row) to wrap onto more lines and
   grow the bar rather than scroll. */
.breadcrumbs-wrap { overflow: visible; }
.breadcrumbs-wrap > ul { flex-wrap: wrap; white-space: normal; }

/* Disabled buttons should read clearly inactive (paler). daisyUI styles
   :disabled, but a Tailwind text-* utility (text-error, text-primary) out-
   specifies it and keeps full colour — neutralize that here with daisyUI's own
   muted token so every disabled button (and its icon, via inherit) pales out. */
.btn:disabled,
.btn[disabled] {
  color: color-mix(in oklch, var(--color-base-content) 20%, transparent) !important;
}

/* A card's title is its name, and it reads in the brand colour everywhere — so primary is the
   default rather than something each template repeats.

   It lives in the `components` **cascade layer** on purpose. Specificity can't express "default,
   but let a utility win": Tailwind's utilities are themselves layered, and an unlayered rule here
   beats every layered rule no matter how weak its selector (`:where()` included) — which would
   silently flatten the titles that deliberately mean something else (text-warning on "Needs
   attention", er-text-negative on a deduction). Layers order before specificity, and the daisyUI
   stylesheet declares its layers in the order `base`, `utilities`, `daisyui` — so this joins
   **base**, the only one that sorts before `utilities`, where `text-warning` and friends live.
   Those titles keep their colour; so do the `er-text-*` ones (unlayered here, which outranks every
   layer). Nothing in the later layers colours `.card-title` itself, so plain titles land primary.

   Verified in the browser, not deduced: a `components`/`daisyui` layer — or an unlayered `:where()`
   — sorts *after* `utilities` and silently flattens the warning/error titles. Re-check with a
   computed-style probe if daisyUI's layer order ever changes. */
@layer base {
  .er-user-app .card-title { color: var(--color-primary); }
}

/* Table heading rows must not blend into the data: the column names sit on a light accent
   wash, in the accent colour, unbolded, with a firm rule under the row.

   Scoped to the user app (the `er-user-app` body class): the admin's statutory table
   deliberately colour-codes its own <th>s with bg-info/bg-success/bg-warning utilities, and
   a `.table thead th` rule here — needed to out-specify daisyUI's own header styling — would
   out-specify those utilities too and flatten the coding. The operator surface keeps the
   plain daisyUI header. */
.er-user-app .table thead th {
  font-weight: 400;
  color: var(--color-accent);
  background-color: color-mix(in oklab, var(--color-accent) 12%, var(--color-base-100));
  border-bottom: 2px solid color-mix(in oklab, var(--color-accent) 45%, transparent);
}

/* Frame every data table in the same accent tint as the header-row underline above, so a table
   reads as an enclosed block. A table in a horizontal-scroll wrapper is framed on the WRAPPER,
   whose overflow clips the rounded corners cleanly; a bare table is framed on the element itself.
   The app already relies on :has() (foldable cards), so this is consistent. */
.er-user-app .overflow-x-auto:has(> table.table) {
  border: 1px solid color-mix(in oklab, var(--color-accent) 45%, transparent);
  border-radius: var(--radius-box, 0.5rem);
}
/* A bare (unwrapped) table gets the same border, but NO radius: it has no scroll wrapper to clip
   the corners, so a rounded border would be overrun by the last row's background. Wrap a table in
   `overflow-x-auto rounded-box` (the rule above) when the rounded frame is wanted. */
.er-user-app table.table {
  border: 1px solid color-mix(in oklab, var(--color-accent) 45%, transparent);
}
/* Never double-frame: a wrapped table drops its own border in favour of the wrapper's. It also
   drops its own corner radius — daisyUI gives `.table` a radius-box, which (with border-collapse:
   separate) insets the row backgrounds a few px from the frame, so zebra stripes stop short of the
   border. Squaring the table lets every row reach the wrapper's edges; the wrapper does the round. */
.er-user-app .overflow-x-auto:has(> table.table) > table.table {
  border: 0;
  border-radius: 0;
}
/* A content-width table (w-auto) makes its frame hug it, rather than the frame running full width
   with the zebra stripes ending well short of the right border. */
.er-user-app .overflow-x-auto:has(> table.table.w-auto) {
  width: fit-content;
  max-width: 100%;
}

/* Responsive "stacked" table (er-table-stack). Wide: a normal aligned table. Narrow: each row
   collapses into a block where the cells sit one under another, each labelled cell prefixed with
   its column name (via data-label); the first cell is the row's heading and carries no prefix.
   The trigger is a CONTAINER query on the wrapper, so a table in a narrow card stacks even on a
   wide screen — the .er-table-stack-wrap element is the query container. */
.er-table-stack-wrap { container-type: inline-size; }
/* Threshold 26rem (≈416px), chosen so the ordering matches the page chrome: the sidebar
   collapses first (below lg = 1024px), and only then — as the content narrows further — does the
   table stack. At 1024px with the sidebar still shown, the content track bottoms out near 441px,
   so a threshold under that keeps the table in columns while the sidebar is present; it is still
   above the table's ~372px min-content, so the cells wrap gracefully rather than ever scrolling. */
@container (max-width: 26rem) {
  /* Hide the header row (its labels move into each cell) without breaking table semantics. */
  .er-table-stack thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .er-table-stack, .er-table-stack tbody, .er-table-stack tr, .er-table-stack td { display: block; width: 100%; }
  .er-table-stack tr { padding: 0.4rem 0.25rem; }
  .er-table-stack td { border: 0; padding: 0.1rem 0; white-space: normal; }
  /* A labelled cell shows "Label: " before its value; the unlabelled first cell stays the heading. */
  .er-table-stack td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600; color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
    margin-inline-end: 0.35rem;
  }
}

/* Totals rows are cut off from the items they sum, never just another row: `.er-row-total`
   is the bottom line (net to wire, amount paid), `.er-row-subtotal` an interim one (gross
   salary). Both draw a top border — daisyUI's own table rules only set border-bottom, so
   these compose rather than fight. */
.er-row-subtotal > td,
.er-row-subtotal > th { border-top: 1px solid var(--color-base-300); }
.er-row-total > td,
.er-row-total > th { border-top: 2px solid var(--color-base-300); }

/* EldeRem semantic colours (er- prefix), decoupled from daisyUI's success/error.
   --er-color-positive / --er-color-negative are defined per theme (currently mapped
   to success / warning). Pay (positive) and deductions (negative) use these — text
   colour + a lightened card background via color-mix, mirroring the daisyUI look. */
.er-text-positive { color: var(--er-color-positive); }
.er-text-negative { color: var(--er-color-negative); }
.er-bg-positive { background-color: color-mix(in oklab, var(--er-color-positive) 12%, var(--color-base-100)); }
.er-bg-negative { background-color: color-mix(in oklab, var(--er-color-negative) 12%, var(--color-base-100)); }

/* Employment lifecycle status words in the heading — plain coloured words (not badges).
   Terminated is red; Settled is green and links to the frozen final settlement. */
.er-text-terminated { color: var(--color-error); }
.er-text-settled    { color: var(--color-success); }
a.er-text-settled:hover { text-decoration: underline; }

/* Role badges (er- prefix), coloured from the current theme's role colours
   (--er-color-patient/worker/employer). Text + background in one class; used with
   daisyUI's `badge` for the pill shape. */
.er-badge-patient,
.er-badge-worker,
.er-badge-employer { border-color: transparent; }
.er-badge-patient  { background-color: var(--er-color-patient);  color: var(--color-info-content); }
.er-badge-worker   { background-color: var(--er-color-worker);   color: var(--color-success-content); }
.er-badge-employer { background-color: var(--er-color-employer); color: var(--color-info-content); }

/* Payment-type badges (er- prefix), coloured from the theme's payment colours
   (--er-color-salary/tax + their ink tokens). Used with daisyUI's `badge` wherever a
   payment row says what it is — payment history, Recent payments. */
.er-badge-salary,
.er-badge-final_settlement,
.er-badge-tax { border-color: transparent; }
.er-badge-salary { background-color: var(--er-color-salary); color: var(--er-color-salary-content); }
.er-badge-tax    { background-color: var(--er-color-tax);    color: var(--er-color-tax-content); }
.er-badge-final_settlement { background-color: var(--color-warning); color: var(--color-warning-content); }

/* er-card — a card with up to three regions: an optional full-width HEADER row, the
   CONTENT column, and an optional HELP column. Built on daisyUI's `.card`, so the look is
   identical. When a `.er-card-help` child is present it becomes a grid: the header spans
   the full width on top, with content (left) + help (right) below. Without help — or on a
   small screen — the regions simply stack. The grid follows the writing direction, so
   under RTL (Hebrew) the help moves to the left automatically. `.er-card-content` is the
   main slot (usually the daisyUI `.card-body`). */
@media (min-width: 768px) {
  /* `html:not(.help-off)` — with help switched off the help column is display:none, and a grid
     would still reserve its track: the content would sit at two-thirds width beside an empty
     gap. Guarding the grid itself lets the card fall back to a plain daisyUI card, which is
     exactly what a card with no help looks like. The guard must name `html` (the element that
     carries the class): a bare `:not(.help-off)` matches any ancestor — body, a wrapper div —
     and would never switch off. */
  html:not(.help-off) .er-card:has(> .er-card-help) {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
  /* Header and the folded content-summary always span the full card width. */
  .er-card:has(> .er-card-help) > .er-card-header,
  .er-card:has(> .er-card-help) > .er-card-content-summary {
    grid-column: 1 / -1;
  }
  .er-card > .er-card-help {
    border-inline-start: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
  }
  /* Admin is desktop-only: give the content column more room relative to the help column
     (scoped to the admin theme root, so no per-card annotation is needed). */
  html[data-theme="elderem-admin"]:not(.help-off) .er-card:has(> .er-card-help) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }
}

/* er-card-header — the full-width title/controls row (title on the start side; for a
   foldable card the fold chevron is the last, end-aligned control). */
.er-card > .er-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
}
/* er-card-help's look (accent italic + "?" badge + padding) is defined together with
   `.er-help-text` near the top of this file — the two share one style definition. */

/* er-card-foldable — an er-card whose CONTENT (and help) fold away behind the header,
   leaving just the header + a compact `.er-card-content-summary`. CSS-only: a hidden
   `.er-fold-toggle` checkbox in the header label drives the state (checked = folded). The
   fold chevron is the header's last, end-aligned control. Default folded/unfolded is set
   by whether the checkbox ships `checked`. */
/* The fold control is a real daisyUI button (markup: `btn btn-sm btn-square btn-primary
   er-fold-btn`, a <label> wrapping the hidden toggle) so it matches the adjacent action
   buttons exactly. This class only styles the chevron (bigger/bolder + rotation). */
.er-fold-btn > .er-fold-chevron {
  font-size: 1.5rem;                          /* bigger than a plain inline icon */
  font-variation-settings: "wght" 700;        /* bolder Material Symbols weight */
  transition: transform 0.2s ease;
}
/* Unfolded (toggle NOT checked): the chevron points up; the content-summary is hidden. */
.er-card-foldable:not(:has(.er-fold-toggle:checked)) .er-fold-chevron { transform: rotate(180deg); }
.er-card-foldable:not(:has(.er-fold-toggle:checked)) > .er-card-content-summary { display: none; }
/* Folded (toggle checked): hide content + help, show only the summary. */
.er-card-foldable:has(.er-fold-toggle:checked) > .er-card-content,
.er-card-foldable:has(.er-fold-toggle:checked) > .er-card-help { display: none; }
.er-card-content-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0 1.5rem 1rem;
  font-size: 0.875rem;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}
/* Trim the doubled top padding between the header and the body when unfolded. */
.er-card-foldable > .er-card-content { padding-top: 0.25rem; }

/* er-nav / er-nav-link — navigation rendered as primary-coloured **text links** (not
   filled buttons): the label takes the primary colour on a transparent background, with a
   subtle primary tint on hover. Used for the sidebar menu items (via `.er-nav` on the
   <ul>) and, via `.er-nav-link`, the navbar language switcher — so the two match. */
.er-nav li > a,
.er-nav li > form > button,
.er-nav-link,
.er-nav li > a:hover,
.er-nav li > a:focus,
.er-nav li > form > button:hover,
.er-nav li > form > button:focus,
.er-nav-link:hover,
.er-nav-link:focus {
  color: var(--color-primary);
}
.er-nav li > a,
.er-nav li > form > button,
.er-nav-link {
  gap: 0.5rem;
  font-weight: 600;
  background-color: transparent;
}
.er-nav li > a,
.er-nav li > form > button { justify-content: flex-start; }
.er-nav li > form > button { width: 100%; }
/* Subtle primary tint on hover / for the current page. */
.er-nav li > a:hover,
.er-nav li > a:focus,
.er-nav li > form > button:hover,
.er-nav li > form > button:focus,
.er-nav-link:hover,
.er-nav-link:focus {
  background-color: color-mix(in oklab, var(--color-primary) 12%, transparent);
}
.er-nav li > a.active {
  background-color: color-mix(in oklab, var(--color-primary) 16%, transparent);
}

/* Nationality applies only to a foreign national — hide it (live, via :has on the
   residency radios) whenever "Israeli citizen" is selected in the residency editor. */
.er-residency:has(input[name="residency_status"][value="citizen"]:checked) .er-nationality {
  display: none;
}

/* er-warning-badge — a compact "warning" chip with a leading warning icon, for
   "Missing: X" / "update needed" flags. Colour and icon are baked in, so callers write
   just <span class="er-warning-badge">Missing: Nationality</span>. */
.er-warning-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-selector, 0.25rem);
  background-color: var(--color-warning);
  color: var(--color-warning-content);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.er-warning-badge::before {
  content: "warning";
  font-family: "Material Symbols Outlined";
  font-size: 1.05em;
  line-height: 1;
  font-variation-settings: "wght" 600, "opsz" 20, "FILL" 0, "GRAD" 0;
}

/* er-tag — a holiday tag badge that never wraps. A multi-word label ("Public holiday")
   stays on one line; on narrow viewports it drops a notch in font size rather than
   breaking across two lines. */
.er-tag {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .er-tag {
    font-size: 0.65rem;
  }
}