/* ==========================================================================
   VolunHub Design System
   Based on: Cercetașii României Brand Guidelines (Anexa 2)
   Framework: Bootstrap 5.3.x with CSS custom property overrides
   Audience: Young people (scouts), information-dense UI
   ==========================================================================

   PAGE LAYOUT — HOUSE RULES (deviations need a reason)

   1. Full-width, left-aligned content.
      Page content fills the container from `templates/base.html`
      (`{% block container_class %}container{% endblock %}`). Do NOT wrap
      forms or content in narrow centered columns (e.g. `col-md-6 mx-auto`,
      `col-lg-8 offset-lg-2`). Forms span the container; lay fields out
      side-by-side with the Bootstrap grid (`row` + `col-md-6`) instead of
      stacking them in a narrow center column. If a page genuinely needs
      more width, override with `container-fluid` — never go narrower.

   2. Breadcrumbs before the title on every page.
      Use the `{% block breadcrumbs %}` slot in `base.html` (rendered
      before `{% block content %}`) with `<nav aria-label="breadcrumb">`
      → `<ol class="breadcrumb">`, then the page `<h1>` inside
      `{% block content %}`. Exceptions: top-level dashboards / landing
      pages where there is no meaningful parent.

   These rules also live in CLAUDE.md so AI agents enforce them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ONCR Color Palette (from brand identity document)
   -------------------------------------------------------------------------- */
:root {
  /* --- Primary brand colors --- */
  --oncr-bleumarin:      #141B4D;
  --oncr-white:          #FFFFFF;
  --oncr-verde:          #173F35;
  --oncr-oranj:          #E08334;
  --oncr-auriu:          #F6B452;

  /* --- Secondary brand colors --- */
  --oncr-sea-blue:       #0054A0;
  --oncr-lime:           #AABA0A;
  --oncr-portocaliu:     #DD7500;
  --oncr-rosu:           #E23D28;
  --oncr-grass-green:    #3D8E33;
  --oncr-sky-blue:       #3399FF;
  --oncr-galben:         #FCD116;
  --oncr-gri:            #999999;

  /* --- Age-branch colors (eșarfe) --- */
  --oncr-lupisori:       #FFE900;
  --oncr-temerari:       #173F35;
  --oncr-exploratori:    #1D366D;
  --oncr-seniori:        #674DA1;
  --oncr-lideri:         #3E1E20;

  /* --- National team colors --- */
  --oncr-strategie:      #0054A0;
  --oncr-programe:       #AABA0A;
  --oncr-resurse-umane:  #E23D28;
  --oncr-international:  #622599;
  --oncr-comunicare:     #3D8E33;
  --oncr-management:     #3399FF;
  --oncr-financiar:      #E23D28;

  /* --------------------------------------------------------------------------
     2. Bootstrap 5 Semantic Color Overrides
     -------------------------------------------------------------------------- */

  /* -- Primary: Bleumarin (navy) -- */
  --bs-primary:          #141B4D;
  --bs-primary-rgb:      20, 27, 77;

  /* -- Secondary: Warm gray, neutral companion -- */
  --bs-secondary:        #6B7280;
  --bs-secondary-rgb:    107, 114, 128;

  /* -- Success: Grass Green (vibrant, visible) -- */
  --bs-success:          #3D8E33;
  --bs-success-rgb:      61, 142, 51;

  /* -- Danger: Roșu -- */
  --bs-danger:           #E23D28;
  --bs-danger-rgb:       226, 61, 40;

  /* -- Warning: Auriu/Gold -- */
  --bs-warning:          #F6B452;
  --bs-warning-rgb:      246, 180, 80;

  /* -- Info: Sea Blue -- */
  --bs-info:             #0054A0;
  --bs-info-rgb:         0, 84, 160;

  /* -- Light & Dark -- */
  --bs-light:            #F3F4F6;
  --bs-light-rgb:        243, 244, 246;
  --bs-dark:             #141B4D;
  --bs-dark-rgb:         20, 27, 77;

  /* -- Body -- */
  --bs-body-color:       #1F2937;
  --bs-body-color-rgb:   31, 41, 55;
  --bs-body-bg:          #F8F9FA;
  --bs-body-bg-rgb:      248, 249, 250;

  /* -- Links -- */
  --bs-link-color:       #0054A0;
  --bs-link-color-rgb:   0, 84, 160;
  --bs-link-hover-color: #141B4D;

  /* -- Border -- */
  --bs-border-color:     #D1D5DB;

  /* --------------------------------------------------------------------------
     3. Typography
     --------------------------------------------------------------------------
     Body: Inter — compact, excellent readability at small sizes, modern UI font.
     Headings: Verdana Bold — per ONCR guidelines for emphasis.
     Monospace: system default.
     -------------------------------------------------------------------------- */

  --bs-body-font-family:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size:    0.875rem;   /* 14px — compact for info-dense screens */
  --bs-body-line-height:  1.5;

  --vh-heading-font:      "Verdana", "Geneva", "Tahoma", sans-serif;
  --vh-font-xs:           0.75rem;    /* 12px */
  --vh-font-sm:           0.8125rem;  /* 13px */
  --vh-font-base:         0.875rem;   /* 14px */
  --vh-font-md:           1rem;       /* 16px */
  --vh-font-lg:           1.125rem;   /* 18px */
  --vh-font-xl:           1.25rem;    /* 20px */

  /* --------------------------------------------------------------------------
     4. Spacing & Layout
     -------------------------------------------------------------------------- */
  --vh-spacer-1:          0.25rem;
  --vh-spacer-2:          0.5rem;
  --vh-spacer-3:          0.75rem;
  --vh-spacer-4:          1rem;
  --vh-spacer-5:          1.5rem;
  --vh-spacer-6:          2rem;

  --vh-border-radius:     0.375rem;
  --vh-border-radius-sm:  0.25rem;
  --vh-border-radius-lg:  0.5rem;

  /* Navbar height for offset calculations */
  --vh-navbar-height:     44px;

  /* --------------------------------------------------------------------------
     5. Accent & Utility Colors
     -------------------------------------------------------------------------- */
  --vh-accent:            #E08334;   /* Oranj — call-to-action accent */
  --vh-accent-hover:      #C96F24;
  --vh-accent-light:      #FEF3E7;

  --vh-surface:           #FFFFFF;
  --vh-surface-muted:     #F3F4F6;
  --vh-surface-hover:     #E5E7EB;

  --vh-text-primary:      #1F2937;
  --vh-text-secondary:    #6B7280;
  --vh-text-muted:        #9CA3AF;
  --vh-text-on-dark:      #FFFFFF;
  --vh-text-on-primary:   #FFFFFF;

  /* --------------------------------------------------------------------------
     6. Tag colour tokens (tagging app, epic #3929). Declared as fg/bg PAIRS in
     this single block so a future dark theme re-declares the pairs once, with
     no change to any stored tag. Tag.color stores the token, never a hex.
     -------------------------------------------------------------------------- */
  --vh-tag-verde-bg:        #E3F2E3;  --vh-tag-verde-fg:        #1B5E20;
  --vh-tag-verde-inchis-bg: #D7E8E0;  --vh-tag-verde-inchis-fg: #173F35;
  --vh-tag-lime-bg:         #EFF5D2;  --vh-tag-lime-fg:         #4D5E00;
  --vh-tag-galben-bg:       #FDF3C7;  --vh-tag-galben-fg:       #6B5300;
  --vh-tag-chihlimbar-bg:   #FBEBC8;  --vh-tag-chihlimbar-fg:   #7A4F00;
  --vh-tag-portocaliu-bg:   #FCE5D0;  --vh-tag-portocaliu-fg:   #8C4A00;
  --vh-tag-rosu-bg:         #FADDD7;  --vh-tag-rosu-fg:         #9C1F1F;
  --vh-tag-visiniu-bg:      #F4D9E0;  --vh-tag-visiniu-fg:      #6E1A33;
  --vh-tag-roz-bg:          #FBDCEB;  --vh-tag-roz-fg:          #9D2463;
  --vh-tag-magenta-bg:      #F7DCF7;  --vh-tag-magenta-fg:      #8E1F8E;
  --vh-tag-mov-bg:          #EBDFF7;  --vh-tag-mov-fg:          #5B2E91;
  --vh-tag-indigo-bg:       #DFE3F7;  --vh-tag-indigo-fg:       #303F9F;
  --vh-tag-albastru-bg:     #D9E6F9;  --vh-tag-albastru-fg:     #0D47A1;
  --vh-tag-azur-bg:         #D7ECFA;  --vh-tag-azur-fg:         #075985;
  --vh-tag-turcoaz-bg:      #D4EEEA;  --vh-tag-turcoaz-fg:      #00695C;
  --vh-tag-gri-bg:          #E5E7EB;  --vh-tag-gri-fg:          #4B5563;

  /* --------------------------------------------------------------------------
     7. Warning level tokens (weather, epic #4226). WarningLevel.css_token
     resolves to the suffix, so nothing stores or emits a hex — the map layer,
     the chips, the panel and the list all read these four pairs. The -line
     token is the map stroke, which needs to stay legible against a polygon
     already filled with -bg.

     These are the *official* ANM colours, deliberately: a cod portocaliu the
     public has seen on television must not be a different orange here.
     There is no green — absence of a warning is green (see WarningLevel).
     -------------------------------------------------------------------------- */
  /* An *informare meteorologică* carries no code, so it must not wear one of the
     three official colours. Blue: informational everywhere else in this system,
     and unmistakably not a warning colour at a glance on a map. */
  --vh-weather-informare-bg:  #DCEAFB;  --vh-weather-informare-fg:  #1B4B7D;
  --vh-weather-informare-line: #3B82C4;
  --vh-weather-galben-bg:     #FDF3C7;  --vh-weather-galben-fg:     #6B5300;
  --vh-weather-galben-line:   #E3B505;
  --vh-weather-portocaliu-bg: #FCE0C2;  --vh-weather-portocaliu-fg: #8C4A00;
  --vh-weather-portocaliu-line: #E8730C;
  --vh-weather-rosu-bg:       #F8D5D0;  --vh-weather-rosu-fg:       #8E1414;
  --vh-weather-rosu-line:     #C81E1E;
  /* "We do not know" — a failed or missing ingest, never rendered as "all clear". */
  --vh-weather-necunoscut-bg: #E5E7EB;  --vh-weather-necunoscut-fg: #4B5563;
  --vh-weather-necunoscut-line: #9CA3AF;

  /* --------------------------------------------------------------------------
     Membership statistics (add-membership-history-analytics) — the local-groups
     map layer and the membership timelines. Categorical slots are assigned in
     fixed order (age branches by programme order, adult roles by rank) and were
     run through the dataviz validator: every adjacent pair clears CVD ΔE 8 and
     normal-vision ΔE 15 on the light surface. The branches' brand colours
     (--oncr-temerari / --oncr-exploratori) are deliberately NOT used here: side by
     side on a chart they are ΔE 11 apart and read as the same colour. Slots 3–5
     sit under 3:1 contrast, so every chart ships a legend and a table view.
     The sequential ramp is one hue, light → dark, for "more of the metric".
     -------------------------------------------------------------------------- */
  --vh-stat-cat-1: #2a78d6;  --vh-stat-cat-2: #eb6834;  --vh-stat-cat-3: #1baf7a;
  --vh-stat-cat-4: #eda100;  --vh-stat-cat-5: #e87ba4;  --vh-stat-cat-6: #008300;
  --vh-stat-cat-7: #4a3aa7;  --vh-stat-cat-8: #e34948;
  --vh-stat-neutral: #9a9892;  /* "Nealocat" / no data — a fold bucket, not a category */
  --vh-stat-seq-1: #86b6ef;  --vh-stat-seq-2: #5598e7;  --vh-stat-seq-3: #2a78d6;
  --vh-stat-seq-4: #1c5cab;  --vh-stat-seq-5: #104281;

  /* --------------------------------------------------------------------------
     Localizare live (telemetry, epic #4299) — the freshness states of a
     participant on a session map, and of the counts on the session card.
     Colour is never the only signal: the markers also differ in shape (solid /
     hollow / ghost) and every state carries a text label. The mobile app
     mirrors these values in mobile/src/styles; change them together.
     -------------------------------------------------------------------------- */
  --vh-telemetry-current-bg: #D1F0DC;  --vh-telemetry-current-fg: #0F5132;
  --vh-telemetry-current:    #198754;
  --vh-telemetry-stale-bg:   #FDF3C7;  --vh-telemetry-stale-fg:   #6B5300;
  --vh-telemetry-stale:      #B88A00;
  --vh-telemetry-lost-bg:    #E5E7EB;  --vh-telemetry-lost-fg:    #374151;
  --vh-telemetry-lost:       #6B7280;
  --vh-telemetry-self:       #0D6EFD;
  --vh-telemetry-approx:     #6F42C1;

  /* Text an author has written that the A4 poster will NOT print (epic #4528).
     A wash plus a dimmed foreground rather than red: this is not an error, it
     is the part that stays on the web page. */
  --vh-poster-dropped-bg:    #FDF3C7;
  --vh-poster-dropped-fg:    #8A6D1F;
}

/* Painted on a mirror BEHIND the textarea, so the author sees the cutoff in the
   field itself. `opportunity-poster-budget.js` owns the mirror. Only the
   BACKGROUND is painted: the text the author reads is always the textarea's own,
   drawn on top. Giving the mirror's copy a colour too put the same words on the
   page twice — invisible where the two lined up exactly, a doubled, smeared line
   wherever they did not (a phone's textarea wraps a hair differently). A
   highlight that is a few pixels off is still a highlight; a second copy of the
   text is not. */
[data-poster-dropped] {
  background: var(--vh-poster-dropped-bg);
  color: transparent;
  border-radius: 2px;
}

.telemetry-state--current { background: var(--vh-telemetry-current-bg); color: var(--vh-telemetry-current-fg); }
.telemetry-state--stale   { background: var(--vh-telemetry-stale-bg);   color: var(--vh-telemetry-stale-fg); }
.telemetry-state--lost    { background: var(--vh-telemetry-lost-bg);    color: var(--vh-telemetry-lost-fg); }
.telemetry-choice { cursor: pointer; }
.telemetry-choice:has(input:checked) { border-color: var(--bs-primary); box-shadow: 0 0 0 1px var(--bs-primary); }
.telemetry-session-card--ended { opacity: .85; }


/* ==========================================================================
   TAG CHIPS (tagging app, epic #3929)
   ========================================================================== */

.vh-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--vh-font-xs);
  font-weight: 600;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  line-height: 1.4;
}

.vh-tag-chip-scope {
  opacity: 0.7;
  font-weight: 400;
}

.vh-tag-verde        { background: var(--vh-tag-verde-bg);        color: var(--vh-tag-verde-fg); }
.vh-tag-verde-inchis  { background: var(--vh-tag-verde-inchis-bg); color: var(--vh-tag-verde-inchis-fg); }
.vh-tag-lime          { background: var(--vh-tag-lime-bg);         color: var(--vh-tag-lime-fg); }
.vh-tag-galben        { background: var(--vh-tag-galben-bg);       color: var(--vh-tag-galben-fg); }
.vh-tag-chihlimbar    { background: var(--vh-tag-chihlimbar-bg);   color: var(--vh-tag-chihlimbar-fg); }
.vh-tag-portocaliu    { background: var(--vh-tag-portocaliu-bg);   color: var(--vh-tag-portocaliu-fg); }
.vh-tag-rosu          { background: var(--vh-tag-rosu-bg);         color: var(--vh-tag-rosu-fg); }
.vh-tag-visiniu       { background: var(--vh-tag-visiniu-bg);      color: var(--vh-tag-visiniu-fg); }
.vh-tag-roz           { background: var(--vh-tag-roz-bg);          color: var(--vh-tag-roz-fg); }
.vh-tag-magenta       { background: var(--vh-tag-magenta-bg);      color: var(--vh-tag-magenta-fg); }
.vh-tag-mov           { background: var(--vh-tag-mov-bg);          color: var(--vh-tag-mov-fg); }
.vh-tag-indigo        { background: var(--vh-tag-indigo-bg);       color: var(--vh-tag-indigo-fg); }
.vh-tag-albastru      { background: var(--vh-tag-albastru-bg);     color: var(--vh-tag-albastru-fg); }
.vh-tag-azur          { background: var(--vh-tag-azur-bg);         color: var(--vh-tag-azur-fg); }
.vh-tag-turcoaz       { background: var(--vh-tag-turcoaz-bg);      color: var(--vh-tag-turcoaz-fg); }
.vh-tag-gri           { background: var(--vh-tag-gri-bg);          color: var(--vh-tag-gri-fg); }

/* The 16-swatch colour picker on the tag create/edit form (tagging/forms.py::
   TagColorSwatchWidget). Reuses the .vh-tag-<token> background/foreground
   pair above so a swatch always matches its chip exactly. */
.vh-tag-swatch-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vh-tag-swatch-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.vh-tag-swatch {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.vh-tag-swatch-input:checked + .vh-tag-swatch {
  border-color: var(--bs-body-color, #212529);
}

.vh-tag-swatch-input:focus-visible + .vh-tag-swatch {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
}

/* Task card affordances (epic #3959). Declared here rather than in the board
   page's own <style> because projects/_board_card.html is mounted in three
   places — a board column, the collection screen's card grid and the task
   modal — and a card that only looks right on one of them is a card with two
   designs. The dot's colour is the tag's own --vh-tag-<token>-fg custom
   property, passed inline by the template: a token, never a literal, so
   re-theming repaints the dots with the chips. */
.vh-task-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.vh-avatar-stack {
  display: inline-flex;
  align-items: center;
}

.vh-avatar-stack > * + * {
  margin-left: -0.4rem;
}


/* ==========================================================================
   GLOBAL RESETS & BASE
   ========================================================================== */

body {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--vh-heading-font);
  font-weight: 700;
  color: var(--oncr-bleumarin);
  margin-bottom: 0.5em;
}

h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.375rem; }
h3, .h3 { font-size: 1.125rem; }
h4, .h4 { font-size: 1rem; }
h5, .h5 { font-size: 0.875rem; }
h6, .h6 { font-size: 0.8125rem; }

.text-xs   { font-size: var(--vh-font-xs) !important; }
.text-sm   { font-size: var(--vh-font-sm) !important; }
.text-base { font-size: var(--vh-font-base) !important; }
.text-md   { font-size: var(--vh-font-md) !important; }
.text-lg   { font-size: var(--vh-font-lg) !important; }
.text-xl   { font-size: var(--vh-font-xl) !important; }

small, .small { font-size: var(--vh-font-xs); }

a {
  color: var(--bs-link-color);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--bs-link-hover-color);
  text-decoration: none;
}

/* Lead text for descriptions */
.lead {
  font-size: var(--vh-font-md);
  color: var(--vh-text-secondary);
}


/* ==========================================================================
   NAVBAR
   ========================================================================== */

.navbar {
  background-color: var(--oncr-bleumarin) !important;
  padding: 0.15rem 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar .navbar-brand {
  font-family: var(--vh-heading-font);
  color: var(--vh-text-on-dark) !important;
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.navbar .navbar-brand:hover {
  text-decoration: none;
}

.navbar-brand-volun {
  font-weight: 400;
}

.navbar-brand-hub {
  font-weight: 700;
  color: var(--oncr-oranj);
}

/* ONCR monochrome white logo in navbar */
.navbar-logo {
  height: 36px;
  width: auto;
}

.navbar .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: var(--vh-font-sm);
  font-weight: 500;
  padding: 0.5rem 0.75rem !important;
  transition: color 0.15s ease;
  text-decoration: none !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--oncr-auriu) !important;
  text-decoration: none !important;
}

.navbar .nav-link.active {
  color: #FFFFFF !important;
  border-bottom: 2px solid var(--oncr-oranj);
}

.navbar .dropdown-menu {
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: var(--vh-border-radius);
  font-size: var(--vh-font-sm);
}

/* Bootstrap's navbar-expand-lg sets .navbar-nav .dropdown-menu to position: static
   below the lg breakpoint, assuming dropdowns live inside a collapsed menu.
   Our notification/admin/user dropdowns sit outside any .navbar-collapse and must
   overlay as true dropdowns on mobile too. */
.navbar .navbar-nav .dropdown-menu {
  position: absolute;
}

/* Constrain the notification panel on narrow viewports so it doesn't overflow
   horizontally (the inline width:360px is preserved on wider screens). */
@media (max-width: 575.98px) {
  #notif-dropdown-menu {
    width: calc(100vw - 1rem) !important;
    max-width: 360px;
  }
}

/* Notification items must wrap rather than scroll horizontally — Bootstrap's
   .dropdown-item defaults to white-space:nowrap, which lets long titles push
   the panel wider than its fixed width. */
#notif-dropdown-menu {
  overflow-x: hidden;
}
#notif-dropdown-menu .notif-item .dropdown-item {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}

.navbar .dropdown-item,
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  text-decoration: none;
}

.navbar .dropdown-item:active {
  background-color: var(--oncr-bleumarin);
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  font-size: var(--vh-font-sm);
  font-weight: 500;
  padding: 0.375rem 0.875rem;
  border-radius: var(--vh-border-radius);
  transition: all 0.15s ease;
}

.btn-sm {
  font-size: var(--vh-font-xs);
  padding: 0.25rem 0.625rem;
}

.btn-lg {
  font-size: var(--vh-font-md);
  padding: 0.5rem 1.25rem;
}

/* Primary — Bleumarin */
.btn-primary {
  --bs-btn-bg: var(--oncr-bleumarin);
  --bs-btn-border-color: var(--oncr-bleumarin);
  --bs-btn-hover-bg: #0E1338;
  --bs-btn-hover-border-color: #0E1338;
  --bs-btn-active-bg: #090D2B;
  --bs-btn-active-border-color: #090D2B;
  --bs-btn-disabled-bg: var(--oncr-bleumarin);
  --bs-btn-disabled-border-color: var(--oncr-bleumarin);
}

.btn-outline-primary {
  --bs-btn-color: var(--oncr-bleumarin);
  --bs-btn-border-color: var(--oncr-bleumarin);
  --bs-btn-hover-bg: var(--oncr-bleumarin);
  --bs-btn-hover-border-color: var(--oncr-bleumarin);
  --bs-btn-active-bg: #0E1338;
  --bs-btn-active-border-color: #0E1338;
}

/* Accent — Oranj (CTAs, emphasis) */
.btn-accent {
  background-color: var(--vh-accent);
  border-color: var(--vh-accent);
  color: #FFFFFF;
  font-weight: 600;
}
.btn-accent:hover {
  background-color: var(--vh-accent-hover);
  border-color: var(--vh-accent-hover);
  color: #FFFFFF;
}

.btn-outline-accent {
  background-color: transparent;
  border-color: var(--vh-accent);
  color: var(--vh-accent);
}
.btn-outline-accent:hover {
  background-color: var(--vh-accent);
  color: #FFFFFF;
}

/* Success — Grass Green */
.btn-success {
  --bs-btn-bg: var(--oncr-grass-green);
  --bs-btn-border-color: var(--oncr-grass-green);
  --bs-btn-hover-bg: #347A2B;
  --bs-btn-hover-border-color: #347A2B;
  --bs-btn-active-bg: #2C6924;
  --bs-btn-active-border-color: #2C6924;
}

/* Danger — Roșu */
.btn-danger {
  --bs-btn-bg: var(--oncr-rosu);
  --bs-btn-border-color: var(--oncr-rosu);
  --bs-btn-hover-bg: #C93420;
  --bs-btn-hover-border-color: #C93420;
  --bs-btn-active-bg: #B02D1C;
  --bs-btn-active-border-color: #B02D1C;
}

/* Warning — Auriu */
.btn-warning {
  --bs-btn-bg: var(--oncr-auriu);
  --bs-btn-border-color: var(--oncr-auriu);
  --bs-btn-color: var(--oncr-bleumarin);
  --bs-btn-hover-bg: #E5A03E;
  --bs-btn-hover-border-color: #E5A03E;
  --bs-btn-hover-color: var(--oncr-bleumarin);
}

/* Info — Sea Blue */
.btn-info {
  --bs-btn-bg: var(--oncr-sea-blue);
  --bs-btn-border-color: var(--oncr-sea-blue);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-bg: #004488;
  --bs-btn-hover-border-color: #004488;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-color: #FFFFFF;
}


/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vh-border-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  background-color: var(--vh-surface);
  transition: box-shadow 0.15s ease;
}

.card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-header {
  background-color: var(--vh-surface-muted);
  border-bottom: 1px solid var(--bs-border-color);
  font-weight: 600;
  font-size: var(--vh-font-sm);
  padding: 0.625rem 1rem;
}

.card-body {
  padding: 0.875rem 1rem;
}

.card-footer {
  background-color: var(--vh-surface-muted);
  border-top: 1px solid var(--bs-border-color);
  padding: 0.5rem 1rem;
}

/* Card with ONCR brand header */
.card-oncr .card-header {
  background-color: var(--oncr-bleumarin);
  color: var(--vh-text-on-dark);
  border-bottom: 2px solid var(--oncr-oranj);
}

.card-oncr .card-header a {
  color: var(--oncr-auriu);
}

/* App launcher cards */
a.card-oncr {
  color: var(--vh-text-primary);
  border-top: 3px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.card-oncr:hover {
  border-top-color: var(--oncr-oranj);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: var(--vh-text-primary);
}


/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert {
  font-size: var(--vh-font-sm);
  padding: 0.625rem 1rem;
  border-radius: var(--vh-border-radius);
}

.alert-dismissible {
  padding-right: 2.5rem;
}

.alert-dismissible .btn-close {
  padding: 0.75rem;
}

.alert-success {
  --bs-alert-bg: #ECFDF5;
  --bs-alert-border-color: #A7F3D0;
  --bs-alert-color: #065F46;
}

.alert-danger {
  --bs-alert-bg: #FEF2F2;
  --bs-alert-border-color: #FECACA;
  --bs-alert-color: #991B1B;
}

.alert-warning {
  --bs-alert-bg: #FFFBEB;
  --bs-alert-border-color: #FDE68A;
  --bs-alert-color: #92400E;
}

.alert-info {
  --bs-alert-bg: #EFF6FF;
  --bs-alert-border-color: #BFDBFE;
  --bs-alert-color: #1E40AF;
}


/* ==========================================================================
   BADGES & PILLS
   --------------------------------------------------------------------------
   Text color is set automatically by the vhFixContrast() JS utility based
   on WCAG relative luminance of the computed background-color.
   To opt out on a specific element, add data-vh-contrast-skip="1".
   ========================================================================== */

.badge {
  font-size: var(--vh-font-xs);
  font-weight: 600;
  padding: 0.25em 0.5em;
  border-radius: var(--vh-border-radius-sm);
}

/* Age-branch badges — text color auto-computed from luminance */
.badge-lupisori   { background-color: var(--oncr-lupisori); }
.badge-temerari   { background-color: var(--oncr-temerari); }
.badge-exploratori{ background-color: var(--oncr-exploratori); }
.badge-seniori    { background-color: var(--oncr-seniori); }
.badge-lideri     { background-color: var(--oncr-lideri); }

/* National team badges — text color auto-computed from luminance */
.badge-strategie     { background-color: var(--oncr-strategie); }
.badge-programe      { background-color: var(--oncr-programe); }
.badge-resurse-umane { background-color: var(--oncr-resurse-umane); }
.badge-international { background-color: var(--oncr-international); }
.badge-comunicare    { background-color: var(--oncr-comunicare); }
.badge-management    { background-color: var(--oncr-management); }
.badge-financiar     { background-color: var(--oncr-financiar); }


/* ==========================================================================
   TABLES
   ========================================================================== */

.table {
  font-size: var(--vh-font-sm);
  --bs-table-bg: var(--vh-surface);
}

.table > thead {
  background-color: var(--oncr-bleumarin);
  color: var(--vh-text-on-dark);
  font-size: var(--vh-font-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table > thead th {
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--oncr-oranj);
}

.table > tbody > tr > td {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
}

.table-hover > tbody > tr:hover {
  --bs-table-hover-bg: var(--vh-surface-muted);
}

/* Compact table for info-dense views */
.table-compact > tbody > tr > td,
.table-compact > thead > tr > th {
  padding: 0.35rem 0.5rem;
}

/* Sortable column headers (see staticfiles/js/table-sort.js) */
.js-sortable th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.js-sortable th[data-sort]:hover {
  color: var(--oncr-oranj);
}
.js-sortable th[data-sort] .js-sort-icon {
  font-size: 0.75em;
  opacity: 0.6;
}
.js-sortable th[data-sort][aria-sort] .js-sort-icon {
  opacity: 1;
}


/* ==========================================================================
   FORMS
   ========================================================================== */

.form-control,
.form-select {
  font-size: var(--vh-font-sm);
  /* Keep Bootstrap's right padding (2.25rem) so the chevron never overlaps the
     option text; only the left/vertical padding is customized. */
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  border-color: var(--bs-border-color);
  border-radius: var(--vh-border-radius);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--oncr-sea-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 84, 160, 0.2);
}

.form-label {
  font-size: var(--vh-font-xs);
  font-weight: 600;
  color: var(--vh-text-primary);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.form-text {
  font-size: var(--vh-font-xs);
  color: var(--vh-text-muted);
}

.form-check-label {
  font-size: var(--vh-font-sm);
}

/* Compact form layout */
.form-group-compact .form-label { margin-bottom: 0.125rem; }
.form-group-compact .form-control,
.form-group-compact .form-select { padding: 0.25rem 0.5rem; }


/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.breadcrumb {
  font-size: var(--vh-font-xs);
  padding: 0.375rem 0;
  margin-bottom: 0.75rem;
  background: none;
}

.breadcrumb-item a {
  color: var(--bs-link-color);
}

.breadcrumb-item.active {
  color: var(--vh-text-muted);
}


/* ==========================================================================
   PAGINATION
   ========================================================================== */

.page-link {
  font-size: var(--vh-font-sm);
  color: var(--oncr-bleumarin);
  padding: 0.3rem 0.65rem;
}

.page-item.active .page-link {
  background-color: var(--oncr-bleumarin);
  border-color: var(--oncr-bleumarin);
}

.page-link:hover {
  color: var(--oncr-bleumarin);
  background-color: var(--vh-surface-muted);
}


/* ==========================================================================
   MODALS
   ========================================================================== */

.modal-header {
  background-color: var(--oncr-bleumarin);
  color: var(--vh-text-on-dark);
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--oncr-oranj);
}

.modal-header .btn-close {
  filter: invert(1);
}

.modal-title {
  font-family: var(--vh-heading-font);
  font-size: var(--vh-font-md);
}

/* The global heading rule paints h1-h6 bleumarin, which beats the header's
   inherited on-dark colour and makes every <h5 class="modal-title"> navy on navy. */
.modal-header .modal-title,
.modal-header :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  color: inherit;
}

.modal-body {
  padding: 1rem;
  font-size: var(--vh-font-sm);
}

.modal-footer {
  padding: 0.5rem 1rem;
}


/* ==========================================================================
   LIST GROUPS
   ========================================================================== */

.list-group-item {
  font-size: var(--vh-font-sm);
  padding: 0.5rem 0.875rem;
  border-color: var(--bs-border-color);
}

.list-group-item.active {
  background-color: var(--oncr-bleumarin);
  border-color: var(--oncr-bleumarin);

  /* The muted text has to travel with the background, and only the TOKEN can move it.
     Bootstrap paints the row itself `--bs-list-group-active-color` (white), so a bare
     heading is readable — but `.text-body-secondary` / `.text-body-tertiary` set
     `color: var(--bs-secondary-color) !important` on the descendant, which outranks any
     `color` an ancestor could declare. Repainting the row without moving these left every
     secondary line near-black on navy: legible before the click, invisible after it. */
  --bs-secondary-color: rgba(var(--bs-white-rgb), 0.75);
  --bs-tertiary-color: rgba(var(--bs-white-rgb), 0.55);
  --bs-emphasis-color: rgb(var(--bs-white-rgb));
}

/* ...but a descendant that paints its OWN background is no longer on the navy, so it must
   keep the ordinary dark tokens. The reconcile queue is the live case: its row carries a
   `text-bg-light` badge whose text is `.text-muted`, and `.text-muted` outranks
   `.text-bg-light`'s own colour on source order — so without this the badge would turn
   white-on-light-grey the moment its row was selected. These values restore exactly what
   a badge resolved before the block above existed. */
.list-group-item.active .badge {
  --bs-secondary-color: rgba(var(--bs-body-color-rgb), 0.75);
  --bs-tertiary-color: rgba(var(--bs-body-color-rgb), 0.5);
  --bs-emphasis-color: var(--bs-body-color);
}


/* ==========================================================================
   NAV TABS & PILLS
   ========================================================================== */

.nav-tabs .nav-link {
  font-size: var(--vh-font-sm);
  font-weight: 500;
  color: var(--vh-text-secondary);
  padding: 0.5rem 1rem;
}

.nav-tabs .nav-link.active {
  color: var(--oncr-bleumarin);
  font-weight: 600;
  border-bottom: 2px solid var(--oncr-oranj);
}

.nav-pills .nav-link.active {
  background-color: var(--oncr-bleumarin);
}


/* ==========================================================================
   PROGRESS BARS
   ========================================================================== */

.progress {
  height: 1.25rem;
  border-radius: var(--vh-border-radius-sm);
  background-color: var(--vh-surface-muted);
  font-size: var(--vh-font-xs);
}

.progress-bar {
  background-color: var(--oncr-sea-blue);
  line-height: 1.25rem;
}

/* Thin variant without text */
.progress-sm {
  height: 0.5rem;
  font-size: 0;
}


/* ==========================================================================
   TOOLTIPS & POPOVERS
   ========================================================================== */

.tooltip {
  font-size: var(--vh-font-xs);
}


/* ==========================================================================
   PAGE LAYOUT: Standardized page header
   --------------------------------------------------------------------------
   Usage:
     <div class="page-header">
       {% include "includes/breadcrumbs.html" with current_label="..." %}
       <h1>Page Title</h1>
       <p class="page-header-description">Optional description</p>
     </div>
   ========================================================================== */

.page-header {
  margin-bottom: var(--vh-spacer-4);
}

.page-header h1 {
  font-size: 1.375rem;
  margin-bottom: 0.25rem;
}

.page-header .page-header-description {
  color: var(--vh-text-secondary);
  font-size: var(--vh-font-sm);
  margin-bottom: 0;
}

/* Page header with action buttons on the right */
.page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: var(--vh-spacer-4);
  /* Wrap rather than squeeze: a long title beside three or four buttons has no good
     single-line answer on a narrow screen, and this app is mobile-first. */
  flex-wrap: wrap;
}

.page-header-row .page-header {
  margin-bottom: 0;
  flex: 1 1 20rem;
}

/* A toolbar of page-level actions.
   `.page-actions` was used by sixteen templates and defined by NONE of them — so the
   buttons inside it were bare inline elements with no gap, which is why a header with
   five of them read as squashed. Several templates had already worked around it
   locally with `d-flex gap-2 flex-wrap`; those declarations are now redundant rather
   than wrong, and can go whenever their template is next touched. */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vh-spacer-2);
}

/* The same toolbar, on its own full-width line under the header, for a page carrying
   more actions than can share a line with its title. */
.page-toolbar {
  width: 100%;
  margin-bottom: var(--vh-spacer-4);
}


/* ==========================================================================
   UTILITY: ONCR-specific
   ========================================================================== */

/* Backgrounds */
.bg-oncr-bleumarin  { background-color: var(--oncr-bleumarin) !important; color: var(--vh-text-on-dark); }
.bg-oncr-verde      { background-color: var(--oncr-verde) !important; color: var(--vh-text-on-dark); }
.bg-oncr-oranj      { background-color: var(--oncr-oranj) !important; color: var(--vh-text-on-dark); }
.bg-oncr-auriu      { background-color: var(--oncr-auriu) !important; color: var(--oncr-bleumarin); }
.bg-oncr-sea-blue   { background-color: var(--oncr-sea-blue) !important; color: var(--vh-text-on-dark); }
.bg-oncr-grass-green{ background-color: var(--oncr-grass-green) !important; color: var(--vh-text-on-dark); }
.bg-oncr-rosu       { background-color: var(--oncr-rosu) !important; color: var(--vh-text-on-dark); }
.bg-oncr-sky-blue   { background-color: var(--oncr-sky-blue) !important; color: var(--vh-text-on-dark); }

/* Text colors */
.text-oncr-bleumarin  { color: var(--oncr-bleumarin) !important; }
.text-oncr-verde      { color: var(--oncr-verde) !important; }
.text-oncr-oranj      { color: var(--oncr-oranj) !important; }
.text-oncr-auriu      { color: var(--oncr-auriu) !important; }
.text-oncr-sea-blue   { color: var(--oncr-sea-blue) !important; }
.text-oncr-grass-green{ color: var(--oncr-grass-green) !important; }
.text-oncr-rosu       { color: var(--oncr-rosu) !important; }

/* Border accent */
.border-oncr-oranj    { border-color: var(--oncr-oranj) !important; }
.border-oncr-bleumarin{ border-color: var(--oncr-bleumarin) !important; }

/* Orange top-accent for cards/sections (from presentation chevron motif) */
.accent-top {
  border-top: 3px solid var(--oncr-oranj) !important;
}

.accent-left {
  border-left: 3px solid var(--oncr-oranj) !important;
}


/* ==========================================================================
   UTILITY: Layout helpers
   ========================================================================== */

/* Tighter container for info-dense pages */
.container-tight {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Section spacing */
.section {
  margin-bottom: var(--vh-spacer-5);
}

/* Divider */
.divider {
  border-top: 1px solid var(--bs-border-color);
  margin: var(--vh-spacer-4) 0;
}

/* Compact spacing helper */
.gap-compact { gap: 0.5rem !important; }

/* Stat / KPI display */
.stat-value {
  font-family: var(--vh-heading-font);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--oncr-bleumarin);
  line-height: 1.1;
}

.stat-label {
  font-size: var(--vh-font-xs);
  color: var(--vh-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* ==========================================================================
   UTILITY: Status indicators
   ========================================================================== */

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.375rem;
}

.status-dot-success { background-color: var(--oncr-grass-green); }
.status-dot-danger  { background-color: var(--oncr-rosu); }
.status-dot-warning { background-color: var(--oncr-auriu); }
.status-dot-info    { background-color: var(--oncr-sea-blue); }
.status-dot-muted   { background-color: var(--oncr-gri); }


/* ==========================================================================
   SCROLLBAR (subtle, modern)
   ========================================================================== */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--bs-border-color);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--oncr-gri);
}


/* ==========================================================================
   SELECT2 overrides (must come after main styles)
   ========================================================================== */

/* django-autocomplete-light initialises Select2 with `containerCssClass: ':all:'`,
   which copies the source <select>'s classes — including Bootstrap's `.form-select`
   — onto the `.select2-container`. `.form-select` then paints its OWN chevron
   background, fixed height and border on top of Select2's chrome, giving the
   doubled / overlapping dropdown arrow. Strip that Bootstrap chrome and let
   Select2's own selection box provide the appearance.

   The `width: 100%` (with !important to beat the inline width Select2 sets at
   init) also fixes widgets that initialise inside a hidden (`d-none`) panel —
   e.g. the "Membru" picker in the "pe numele cui" panel — where Select2's
   `width: 'resolve'` would otherwise fall back to a stunted, misaligned box. */
.select2-container.form-select {
  width: 100% !important;
  height: auto;
  padding: 0;
  border: 0;
  background-image: none;
}

/* …and it must be block-level, which the class copy above does NOT achieve.
   `.select2-container { display: inline-block }` and `.form-select { display:
   block }` have the SAME specificity (0,1,0), so source order decides — and
   Select2's stylesheet arrives through `{{ form.media }}` in `extra_head`,
   which base.html emits AFTER this file. Select2 wins, the container stays
   inline, and a `<label>` (inline by default — Bootstrap 5's `.form-label` sets
   only a margin) shares its line instead of sitting above it. Side by side in a
   grid row, a Select2 field then sits a label-height off from the plain select
   next to it: "Membru" beside "Pe numele cui", "Deținător" beside "Arhivă".

   `form .select2-container` is (0,1,1), so it wins on specificity rather than
   on order. Scoped to `form` on purpose: Select2 appends the OPEN DROPDOWN's
   container to <body> with an inline absolute position and its own computed
   width, and forcing block/100% on that would stretch it across the viewport.
   A container inside a form is always the selection box, which in this app is
   always a full-width form control. */
form .select2-container {
  display: block;
  width: 100% !important;
}

.select2-container--default .select2-selection--single {
  height: 38px !important; /* match Bootstrap's default form-control/form-select height so they line up side by side */
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vh-border-radius);
  font-size: var(--vh-font-sm);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 100% !important;
  padding-left: 0.75rem !important;
  padding-right: 2rem !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1.5 !important;
  font-size: var(--vh-font-sm) !important;
}

/* Our flex layout on `.select2-selection__rendered` cancels Select2's default
   `float: right` on the clear button, so it sits as the first flex item right
   up against the selected text. Give it breathing room from the label. */
.select2-container--default .select2-selection--single .select2-selection__clear {
  margin-right: 0.5rem;
  font-weight: bold;
  color: var(--bs-secondary-color, #6c757d);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  right: 0.5rem !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--oncr-bleumarin);
}


/* ==========================================================================
   RESPONSIVE: Small screens
   ========================================================================== */

@media (max-width: 767.98px) {
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.25rem; }
  h3, .h3 { font-size: 1.0625rem; }

  .card-body {
    padding: 0.75rem;
  }

  .table > thead th,
  .table > tbody > tr > td {
    padding: 0.375rem 0.5rem;
  }

  .stat-value {
    font-size: 1.375rem;
  }
}


/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  .navbar, .breadcrumb, .btn, .pagination {
    display: none !important;
  }

  body {
    font-size: 10pt;
    color: #000;
    background: #FFF;
  }

  .card {
    border: 1px solid #ccc;
    box-shadow: none;
  }
}


/* ==========================================================================
   ICONS (existing rule, preserved)
   ========================================================================== */

img.icon {
  width: 20px;
}

/* ==========================================================================
   USER PILL — single source of truth for rendering a person.
   The name is shown inline; the popover (hover on desktop, tap on mobile)
   reveals email, current local center, status and profile photo.
   ========================================================================== */

.vh-user-pill {
  cursor: pointer;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.25);
  outline: none;
}

.vh-user-pill:hover,
.vh-user-pill:focus {
  color: var(--oncr-sea-blue, #0054A0);
}

.vh-user-popover {
  max-width: 260px;
}

/* Shared person link + access-scoped hovercard (#3514) */
.vh-person-link {
  color: inherit;
}

.vh-person-link:hover .vh-person-link-name,
.vh-person-link:focus .vh-person-link-name {
  color: var(--oncr-sea-blue, #0054A0);
  text-decoration: underline;
}

.vh-person-hovercard {
  min-width: 200px;
}

/* Utility, not a hovercard detail. A flex child defaults to `min-width: auto`, so it refuses to
   shrink below its content and a long unbroken string (a URL in a message) pushes the whole row
   wider than the viewport. This was scoped to `.vh-person-hovercard`, which made it silently
   inert for every other caller — `discussions/_panel.html` was using it and getting nothing. */
.min-width-0 {
  min-width: 0;
}

/* Discussion panel (`discussions/_panel.html`). Indentation is an inline custom property on the
   panel root, so the only thing needed here is making user-authored content wrap: a pasted URL is
   one unbroken token, and at 360px with two levels of indent it would otherwise scroll the page
   sideways. `word-break: break-word` is deliberately not `break-all` — ordinary Romanian prose
   must still break at spaces. */
.vh-discussion-body {
  overflow-wrap: anywhere;
}

.vh-discussion-body pre,
.vh-discussion-body code {
  white-space: pre-wrap;
  word-break: break-word;
}

.vh-user-popover .popover-body > div {
  margin-bottom: 0.15rem;
  word-break: break-word;
}

.vh-user-popover .popover-body > div:last-child {
  margin-bottom: 0;
}

/* Custom forms — SCALE field (Likert / rating) ---------------------------- */
.cf-scale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.cf-scale-option {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 0;
}

/* Hide the native radio but keep it accessible / keyboard-focusable. */
.cf-scale-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.cf-scale-buttons .cf-scale-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  background: var(--bs-body-bg, #fff);
  font-weight: 600;
}

.cf-scale-buttons .cf-scale-option input:checked + .cf-scale-mark {
  background: var(--oncr-sea-blue, #0054A0);
  border-color: var(--oncr-sea-blue, #0054A0);
  color: #fff;
}

.cf-scale-buttons .cf-scale-option input:focus-visible + .cf-scale-mark {
  outline: 2px solid var(--oncr-sea-blue, #0054A0);
  outline-offset: 2px;
}

.cf-scale-stars .cf-scale-mark {
  font-size: 1.6rem;
  color: var(--bs-border-color, #dee2e6);
  padding: 0 0.1rem;
}

.cf-scale-stars .cf-scale-option input:checked + .cf-scale-mark {
  color: var(--bs-warning, #ffc107);
}

.cf-scale-stars .cf-scale-option input:focus-visible + .cf-scale-mark {
  outline: 2px solid var(--oncr-sea-blue, #0054A0);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Reusable media picker (staticfiles/js/media_picker.js)
   ------------------------------------------------------------------------- */
.mp-card {
  transition: box-shadow 0.15s ease-in-out;
  background: var(--bs-body-bg, #fff);
}

.mp-card:hover,
.mp-card:focus-visible {
  box-shadow: 0 0 0 2px var(--bs-primary, #0d6efd);
}

.mp-thumb {
  height: 110px;
  background-size: cover;
  background-position: center;
  background-color: var(--bs-tertiary-bg, #f1f3f5);
}

/* Banner picker preview thumbnail on the form-settings page. */
.cf-banner-preview {
  height: 120px;
  background-size: cover;
  background-position: center;
  background-color: var(--bs-tertiary-bg, #f1f3f5);
}

/* Color-scheme swatches (form settings → Aspect). */
.cf-swatch {
  cursor: pointer;
}

.cf-swatch:has(input:checked) {
  border-color: var(--bs-primary, #0d6efd) !important;
  box-shadow: 0 0 0 2px var(--bs-primary, #0d6efd);
}

.cf-swatch:focus-within {
  box-shadow: 0 0 0 2px var(--bs-primary, #0d6efd);
}

/* Banner-source segmented control (native radios hidden, label is the pill). */
.cf-banner-tab {
  cursor: pointer;
  margin-bottom: 0;
}

.cf-banner-tab input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cf-banner-tab:has(input:checked) {
  background-color: var(--bs-primary, #0d6efd);
  color: #fff;
}

.cf-banner-tab:focus-within {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
}

/* --- places: marker picker + leaflet div icons -------------------- */

.vh-marker-picker {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .vh-marker-picker {
    flex-direction: row;
    gap: 1.5rem;
  }
  .vh-marker-picker__group {
    flex: 1 1 0;
  }
}

.vh-marker-swatches,
.vh-marker-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.vh-marker-swatch,
.vh-marker-icon-tile {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0.5rem;
  font-size: 1.1rem;
  line-height: 1;
}

.vh-marker-swatch__dot {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--bs-secondary-bg, #e9ecef);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.vh-marker-swatch--default .vh-marker-swatch__dot,
.vh-marker-icon-tile--default {
  background-image:
    linear-gradient(45deg, var(--bs-secondary-bg, #e9ecef) 25%, transparent 25%),
    linear-gradient(-45deg, var(--bs-secondary-bg, #e9ecef) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--bs-secondary-bg, #e9ecef) 75%),
    linear-gradient(-45deg, transparent 75%, var(--bs-secondary-bg, #e9ecef) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}

.btn-check:checked + .vh-marker-swatch,
.btn-check:checked + .vh-marker-icon-tile {
  background-color: var(--bs-primary-bg-subtle, #cfe2ff);
  border-color: var(--bs-primary, #0d6efd);
  color: var(--bs-primary, #0d6efd);
}

/* Leaflet div-icon: teardrop pin with a colored circle and a Bootstrap icon. */
.vh-marker-pin {
  --vh-marker-color: var(--bs-primary, #0d6efd);
  position: relative;
  width: 32px;
  height: 40px;
  pointer-events: auto;
}

.vh-marker-pin__circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--vh-marker-color);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  border: 2px solid #fff;
}

.vh-marker-pin::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid var(--vh-marker-color);
}

/* The highest peak of a massif carries a star icon (colour still encodes altitude); a subtle
 * neutral ring makes the summit pop without stealing the elevation colour's meaning. */
.vh-marker-pin--highest .vh-marker-pin__circle {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(73, 80, 87, 0.65), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------------ *
 * Peak map — legend, styled popup, and the list's "summit" badge      *
 * ------------------------------------------------------------------ */

.vh-map-legend {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.4rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.75rem;
  line-height: 1.5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  color: var(--oncr-bleumarin, #141b4d);
}

.vh-map-legend__title {
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.vh-map-legend__row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.vh-map-legend__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  margin-right: 0.35rem;
  font-size: 0.85rem;
  flex: 0 0 auto;
}

/* Branded Leaflet popup shell (scoped via className so other maps are untouched). */
.vh-peak-popup-shell .leaflet-popup-content-wrapper {
  border-radius: 0.5rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.vh-peak-popup-shell .leaflet-popup-content {
  margin: 0.6rem 0.75rem;
}

.vh-peak-popup {
  min-width: 180px;
  color: var(--oncr-bleumarin, #141b4d);
}

.vh-peak-popup__title {
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.vh-peak-popup__meta {
  font-size: 0.8rem;
  color: var(--bs-secondary-color, #6c757d);
}

.vh-peak-popup__tier {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bs-secondary-color, #6c757d);
  margin-top: 0.1rem;
}

.vh-peak-popup__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-secondary-color, #6c757d);
  margin-top: 0.5rem;
}

.vh-peak-popup__stats {
  display: flex;
  gap: 0.6rem;
  margin: 0.15rem 0 0.5rem;
}

.vh-peak-popup__stat {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.vh-peak-popup__stat i {
  color: var(--oncr-oranj, #e08334);
  margin-right: 0.1rem;
}

.vh-peak-popup__link {
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}

/* "Vârf de masiv" pill on the peak list — gold on dark for contrast with the row text. */
.vh-badge-summit {
  background-color: var(--oncr-auriu, #f6b452);
  color: var(--oncr-lideri, #3e1e20);
  font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * Shareable deep-links to standard dimensions / criteria             *
 * (standard_anchors.js — used by the catalog & public standard pages) *
 * ------------------------------------------------------------------ */

/* Subtle "copy link" affordance next to a dimension/criterion title. */
.vh-copy-anchor {
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.15s ease-in-out;
}
.vh-copy-anchor:hover,
.vh-copy-anchor:focus {
  opacity: 1;
}

/* Temporary flash applied to the element a shared link points at. */
.standard-anchor-highlight,
.standard-anchor-highlight > td {
  animation: vh-anchor-flash 2.4s ease-out;
}
@keyframes vh-anchor-flash {
  0%, 20%   { background-color: rgba(var(--bs-warning-rgb), 0.45); }
  100%      { background-color: transparent; }
}

/* Transient "Link copiat" confirmation toast. */
.vh-copy-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 1rem);
  z-index: 1080;
  padding: 0.5rem 1rem;
  border-radius: var(--bs-border-radius, 0.375rem);
  background-color: var(--oncr-bleumarin, #212529);
  color: #fff;
  font-size: 0.875rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  pointer-events: none;
}
.vh-copy-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* The share controls are screen-only — never print them (e.g. PDF export). */
@media print {
  .vh-copy-anchor,
  .vh-copy-toast {
    display: none !important;
  }
}

/* ── Governance: vote-result breakdown ─────────────────────────────
   Stacked proportion bar + per-voter avatar chips. Only the per-option
   segment/swatch colors are data-driven (VotingOption.color); the rest
   uses --bs-* tokens. */
.vh-vote-bar {
  display: flex;
  width: 100%;
  height: 0.75rem;
  border-radius: var(--bs-border-radius, 0.375rem);
  overflow: hidden;
  background-color: var(--bs-tertiary-bg, #e9ecef);
}
.vh-vote-bar__seg {
  height: 100%;
  min-width: 2px;
}
.vh-vote-swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 0.2rem;
  flex: 0 0 auto;
}
.vh-voter-chip {
  padding: 0.1rem 0.5rem 0.1rem 0.15rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 999px;
  background-color: var(--bs-body-bg, #fff);
}
.vh-voter-avatar {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: cover;
  flex: 0 0 auto;
}
.vh-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--bs-secondary-bg, #e2e3e5);
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.7rem;
  font-weight: 600;
  flex: 0 0 auto;
}

/* ==========================================================================
   Image loading placeholder (shimmer)
   Put on an <img> to show an animated skeleton until the pixels paint. The
   loaded (opaque) image covers the shimmer; a slow/absent image keeps it,
   reading as "loading" rather than a broken-image icon. JS-free.
   ========================================================================== */
@keyframes vh-img-shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position:  800px 0; }
}
.vh-img-loading {
  background-image: linear-gradient(
    90deg,
    var(--bs-tertiary-bg, #f1f3f5) 25%,
    var(--bs-secondary-bg, #e2e5e9) 37%,
    var(--bs-tertiary-bg, #f1f3f5) 63%
  );
  background-size: 800px 100%;
  animation: vh-img-shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .vh-img-loading { animation: none; }
}

/* =========================================================================
   Header omnisearch + app launcher dropdown (#3471)
   ========================================================================= */

/* ----- Header omnisearch: services + actions, blended into the navbar ----- */
.omnisearch {
  position: relative;
  flex: 1 1 auto;
  max-width: 32rem;
  min-width: 12rem;
}
.omnisearch-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.omnisearch-field:focus-within {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.omnisearch-icon { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; }
.omnisearch-field:focus-within .omnisearch-icon { color: var(--vh-text-secondary); }
.omnisearch-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: var(--vh-font-sm);
  outline: none;
}
.omnisearch-input::placeholder { color: rgba(255, 255, 255, 0.7); }
.omnisearch-field:focus-within .omnisearch-input { color: var(--bs-body-color); }
.omnisearch-field:focus-within .omnisearch-input::placeholder { color: var(--vh-text-muted); }
/* Hide the native "clear" cross so the field stays clean on the dark bar. */
.omnisearch-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.omnisearch-kbd {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.25rem;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
}
.omnisearch-field:focus-within .omnisearch-kbd { display: none; }

.omnisearch-results {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 1050;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.35rem;
  background: var(--vh-surface);
  color: var(--bs-body-color);
  border: 1px solid var(--vh-surface-hover);
  border-radius: var(--vh-border-radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.omnisearch-result {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--vh-border-radius);
  text-decoration: none;
  color: inherit;
  flex: 1 1 auto;
  min-width: 0;
}
.omnisearch-result:hover,
.omnisearch-result.is-active { background: var(--vh-surface-muted); }
.omnisearch-result-icon { flex: 0 0 auto; width: 1.5rem; text-align: center; font-size: 1.1rem; }
.omnisearch-action-icon { color: var(--vh-accent); }
.omnisearch-result-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.omnisearch-result-title { font-weight: 600; font-size: var(--vh-font-sm); }
.omnisearch-result-desc {
  font-size: var(--vh-font-xs);
  color: var(--vh-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.omnisearch-result-tag {
  flex: 0 0 auto;
  font-size: var(--vh-font-xs);
  color: var(--vh-text-secondary);
  border: 1px solid var(--vh-surface-hover);
  border-radius: 999px;
  padding: 0 0.5rem;
}
.omnisearch-result-row {
  display: flex;
  align-items: center;
  min-width: 0;
}
.omnisearch-quick-links {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.25rem;
  padding-right: 0.5rem;
}
.omnisearch-quick-link {
  color: var(--vh-accent);
  font-size: var(--vh-font-xs);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--vh-border-radius);
  padding: 0.2rem 0.3rem;
}
.omnisearch-quick-link:hover,
.omnisearch-quick-link:focus-visible {
  background: var(--vh-surface-muted);
  color: var(--vh-accent);
  text-decoration: underline;
  outline: none;
}
.omnisearch-empty { padding: 1rem; text-align: center; color: var(--vh-text-secondary); font-size: var(--vh-font-sm); }
/* Heading above each object kind (Membri, Structuri, …). Object results are
   rendered after the catalog and never interleaved with it, so this separator is
   what tells the reader the list has changed register. */
.omnisearch-group {
  padding: 0.4rem 0.75rem 0.2rem;
  font-size: var(--vh-font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vh-text-secondary);
  border-top: 1px solid var(--vh-surface-hover);
  margin-top: 0.25rem;
}
.omnisearch-group:first-child { border-top: 0; margin-top: 0; }
.omnisearch-object-icon { color: var(--vh-text-secondary); }

/* Mobile: the box is hidden (d-none); the header search icon opens it as an
   overlay bar under the navbar. */
@media (max-width: 991.98px) {
  .omnisearch.is-open {
    display: block !important;
    position: fixed;
    top: var(--vh-navbar-height);
    left: 0;
    right: 0;
    z-index: 1045;
    max-width: none;
    padding: 0.5rem 0.75rem;
    background: var(--oncr-bleumarin);
  }
  .omnisearch.is-open .omnisearch-results { left: 0.75rem; right: 0.75rem; }
}

/* ----- 9-dot launcher dropdown (Google-style compact grid) ----- */
.app-launcher-menu {
  width: min(92vw, 420px);
  max-height: min(80vh, 560px);
  overflow-y: auto;
  padding: 0.5rem;
}
.app-launcher-loading { font-size: var(--vh-font-sm); }
.app-launcher-section { padding: 0.25rem 0.25rem 0.5rem; }
.app-launcher-heading {
  padding: 0.35rem 0.25rem;
  font-size: var(--vh-font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vh-text-secondary);
}
.app-launcher-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.15rem; }
.app-launcher-cell { position: relative; }
.app-launcher-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  height: 100%;
  padding: 0.55rem 0.25rem;
  text-align: center;
  text-decoration: none;
  color: var(--bs-body-color);
  border-radius: var(--vh-border-radius);
}
.app-launcher-tile:hover { background: var(--vh-surface-muted); }
.app-launcher-tile-icon { font-size: 1.5rem; line-height: 1; }
.app-launcher-tile-icon img { height: 1.5rem; width: auto; }
.app-launcher-tile-label {
  font-size: var(--vh-font-xs);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.app-launcher-star {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  padding: 0.1rem;
  border: 0;
  background: transparent;
  color: var(--vh-text-muted);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s ease, color 0.1s ease;
}
.app-launcher-cell:hover .app-launcher-star,
.app-launcher-star.is-fav { opacity: 1; }
.app-launcher-star.is-fav { color: var(--vh-accent); }
.app-launcher-footer {
  margin-top: 0.25rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--vh-surface-hover);
  text-align: center;
}
.app-launcher-all { font-size: var(--vh-font-sm); text-decoration: none; }

/* Touch screens have no hover, so the star must always be tappable. */
@media (hover: none) {
  .app-launcher-star { opacity: 1; padding: 0.3rem; font-size: 0.85rem; }
}

/* Phones: the 9-dot toggle is not at the right edge of the header (bell,
   settings and avatar sit to its right), so an end-aligned dropdown overflowed
   off the left of the screen. Below `sm` the launcher becomes a bottom sheet
   spanning the viewport; the toggle uses data-bs-display="static" so Popper
   writes no inline position for this CSS to fight. The backdrop is added by
   app-launcher.js — tapping it is an outside click, which closes the menu. */
@media (max-width: 575.98px) {
  .navbar .navbar-nav .app-launcher-menu.show {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 85vh;
    max-height: 85dvh;
    margin: 0;
    padding: 1.25rem 0.5rem calc(0.75rem + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 1rem 1rem 0 0;
    overscroll-behavior: contain;
    z-index: 1056;
    animation: app-launcher-sheet-in 0.18s ease-out;
  }
  .navbar .navbar-nav .app-launcher-menu.show::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 50%;
    width: 2.5rem;
    height: 0.25rem;
    margin-left: -1.25rem;
    border-radius: 0.125rem;
    background: var(--vh-surface-hover);
  }
  .app-launcher-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app-launcher-tile { padding: 0.65rem 0.15rem; }
  .app-launcher-tile-icon { font-size: 1.75rem; }
  .app-launcher-tile-icon img { height: 1.75rem; }
  .app-launcher-footer { padding: 0.75rem 0 0.25rem; }
  .app-launcher-all { font-size: var(--vh-font-base, 1rem); }
}
.app-launcher-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1055;
  background: rgba(0, 0, 0, 0.4);
}
@keyframes app-launcher-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .navbar .navbar-nav .app-launcher-menu.show { animation: none; }
}

/* ----- Slimmer categorised /aplicatii/ grid ----- */
.app-category-heading {
  font-size: var(--vh-font-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vh-text-secondary);
  margin: 1.25rem 0 0.5rem;
}
.app-page-cell { position: relative; }
.app-page-tile .card-body { padding: 1rem 0.5rem; }
.app-page-tile .app-launcher-tile-icon { font-size: 2rem; }
.app-page-tile .app-launcher-tile-icon img { height: 2rem; }
.app-page-star {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
  padding: 0.15rem;
  border: 0;
  background: transparent;
  color: var(--vh-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s ease, color 0.1s ease;
}
.app-page-cell:hover .app-page-star,
.app-page-star.is-fav { opacity: 1; }
.app-page-star.is-fav { color: var(--vh-accent); }

/* ==========================================================================
   Person picker option (people/picker.py)
   ==========================================================================
   The shared card every `people:user-autocomplete` dropdown renders: avatar,
   visible name, "Centru Local · Unitate", and the programs age-group chip.

   Only the dropdown row is a card. A *selected* option stays a plain name
   (see `picker.render_selected_text`), so nothing here targets
   `.select2-selection__rendered` — a multi-select on the participant add form
   routinely holds seventeen chips and three-line chips would bury the form.

   The highlighted-row rule above paints `--oncr-bleumarin`, so the muted text
   inside a highlighted card has to lift to stay legible. */

.vh-picker-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.vh-picker-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--bs-secondary-bg);
}

.vh-picker-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

/* `min-width: 0` is what lets the ellipsis below actually engage — a flex item
   defaults to `min-width: auto`, which refuses to shrink below its content and
   makes a long unit name push the chip off the row instead of truncating. */
.vh-picker-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.vh-picker-name {
  font-size: var(--vh-font-sm);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vh-picker-meta {
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--vh-text-muted, var(--bs-secondary-color));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vh-picker-chip {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  color: #fff;
  background: var(--vh-picker-chip-color, var(--oncr-secondary));
  white-space: nowrap;
}

.select2-container--default .select2-results__option--highlighted .vh-picker-meta {
  color: rgba(255, 255, 255, 0.85);
}

/* Phone: the context line is the part that overflows first, so let it wrap to
   a second line rather than truncating a unit name to nothing. */
@media (max-width: 400px) {
  .vh-picker-meta { white-space: normal; }
  .vh-picker-chip { display: none; }
}

/* ------------------------------------------------------------------ *
 * Carousel slide editor (publishing: a `gallery` theme_config field)
 * ------------------------------------------------------------------ */

/* The framing box crops exactly the way the rendered band does, so what the
   editor frames here is what the site draws. Aspect comes from the widget
   (--vh-gallery-aspect), the framing itself from each slide's inline style. */
.vh-gallery__frame {
    position: relative;
    aspect-ratio: var(--vh-gallery-aspect, 16 / 7);
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    background: var(--bs-tertiary-bg);
    cursor: grab;
    touch-action: none; /* pointermove must pan the photo, not scroll the page */
    user-select: none;
}
.vh-gallery__frame.is-dragging {
    cursor: grabbing;
}
.vh-gallery__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vh-gallery__badge {
    position: absolute;
    top: .35rem;
    left: .35rem;
    min-width: 1.5rem;
    padding: .1rem .4rem;
    border-radius: var(--bs-border-radius-pill);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
}
.vh-gallery__slide {
    background: var(--bs-body-bg);
}

/* ── Editor de fundal pentru benzile temei (publishing: background field) ── */
.vh-bg-preview {
    min-height: 92px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
    display: flex;
    align-items: flex-end;
    padding: .5rem .75rem;
    /* The preview paints itself from an inline style built by
       background_editor.js; these are only the frame around it. */
    background-repeat: repeat;
}
/* The look-and-feel preview. Tall enough to judge a header, a hero and the
   start of the content in one glance; on a phone it is shorter, because the
   form below it is what the editor is actually operating. */
.vh-theme-preview__frame {
    width: 100%;
    height: 60vh;
    min-height: 320px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, .375rem);
    background: var(--vh-surface-muted, #f3f4f6);
}
@media (max-width: 767.98px) {
    .vh-theme-preview__frame {
        height: 45vh;
        min-height: 240px;
    }
}

/* A band carrying a photo is draggable: the drag chooses which part of the
   photo survives the crop. Without the cursor there is nothing telling an
   editor the preview is interactive at all. */
.vh-bg-preview.is-draggable {
    cursor: grab;
    touch-action: none;
}
.vh-bg-preview.is-dragging {
    cursor: grabbing;
    user-select: none;
}
.vh-bg-preview__label {
    font-size: .75rem;
    background: rgba(255, 255, 255, .85);
    color: #1f2421;
    border-radius: .25rem;
    padding: .1rem .4rem;
}
.vh-bg-editor .form-control-color {
    width: 3rem;
    padding: .2rem;
}

/* ── Luni de recrutare: chips în loc de checkbox-uri ── */
.vh-month-chips .btn-check:checked + .btn {
    background-color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

/* ── Ramuri de vârstă: pastila de culoare și nuanțele etapelor ──
   O etapă e colorată cu o nuanță a ramurii (programs/colors.py), așa că
   aceeași pastilă servește ramura, etapa și sugestiile din formular. */
.vh-color-swatch {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm, .25rem);
    vertical-align: middle;
}
.vh-color-swatch-sm {
    width: 1rem;
    height: 1rem;
}
.vh-shade-option {
    width: 2rem;
    height: 2rem;
    padding: 0;
    cursor: pointer;
    appearance: none;
}
.vh-shade-option:hover,
.vh-shade-option:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Workflow state badges (update-participation-state-control).
   One background/foreground pair per presentation category of
   workflow/states/presentation.py, so a state's category — declared beside
   the state in code — tints every badge of it, on every surface. Badges never
   carry a hex: workflow.state_control emits `vh-state vh-state--<category>`.
   ========================================================================== */
:root {
  --vh-state-start-bg:    #D7ECFA;  --vh-state-start-fg:    #075985;
  --vh-state-active-bg:   #D9E6F9;  --vh-state-active-fg:   #0D47A1;
  --vh-state-waiting-bg:  #FBEBC8;  --vh-state-waiting-fg:  #7A4F00;
  --vh-state-decision-bg: #EBDFF7;  --vh-state-decision-fg: #5B2E91;
  --vh-state-approved-bg: #E3F2E3;  --vh-state-approved-fg: #1B5E20;
  --vh-state-rejected-bg: #FADDD7;  --vh-state-rejected-fg: #9C1F1F;
  --vh-state-terminal-bg: #E5E7EB;  --vh-state-terminal-fg: #374151;
  --vh-state-default-bg:  #E5E7EB;  --vh-state-default-fg:  #4B5563;
}

.vh-state            { font-weight: 600; }
.vh-state--start     { background: var(--vh-state-start-bg);    color: var(--vh-state-start-fg); }
.vh-state--active    { background: var(--vh-state-active-bg);   color: var(--vh-state-active-fg); }
.vh-state--waiting   { background: var(--vh-state-waiting-bg);  color: var(--vh-state-waiting-fg); }
.vh-state--decision  { background: var(--vh-state-decision-bg); color: var(--vh-state-decision-fg); }
.vh-state--approved  { background: var(--vh-state-approved-bg); color: var(--vh-state-approved-fg); }
.vh-state--rejected  { background: var(--vh-state-rejected-bg); color: var(--vh-state-rejected-fg); }
.vh-state--terminal  { background: var(--vh-state-terminal-bg); color: var(--vh-state-terminal-fg); }
.vh-state--default   { background: var(--vh-state-default-bg);  color: var(--vh-state-default-fg); }

/* The badge doubles as the trigger of its transition menu: same look, plus a
   caret and a focus ring, so it reads as clickable without becoming a button. */
.vh-state-control__toggle { cursor: pointer; }
.vh-state-control__toggle:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}
.vh-state-control__menu { min-width: 16rem; max-width: 22rem; }
.vh-state-control__menu .dropdown-item { white-space: normal; }

/* --------------------------------------------------------------------------
   Dropdown menus match the type size of their trigger. Bootstrap's default
   --bs-dropdown-font-size is 1rem (16px) while .btn is 13px here, so a page
   menu opened in a bigger font than the button it came from. The navbar rule
   above already did this for the header only.
   -------------------------------------------------------------------------- */
.dropdown-menu {
  --bs-dropdown-font-size: var(--vh-font-sm);
}
.btn-sm + .dropdown-menu,
.btn-group-sm .dropdown-menu,
.btn-sm ~ .dropdown-menu {
  --bs-dropdown-font-size: 0.75rem;
}

/* Roster filters (update-event-participant-roster-presentation). */
.vh-roster-filters .ts-wrapper.form-select-sm .ts-control,
.vh-roster-filters .ts-wrapper .ts-control { min-height: calc(1.5em + .5rem + 2px); font-size: var(--vh-font-sm); }
.vh-roster-filters .ts-dropdown { font-size: var(--vh-font-sm); }

/* Event cover focal-point picker: the frame shares the event hero's proportions. */
.vh-cover-focal-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1140 / 360;
  max-width: 40rem;
  cursor: crosshair;
  touch-action: none;
  background: var(--bs-tertiary-bg);
}
.vh-cover-focal-frame img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; pointer-events: none; }
.vh-cover-focal-frame:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.vh-cover-focal-marker {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* Strava brand marks (https://developers.strava.com/guidelines/). The orange is Strava's and is
   reserved for the „View on Strava" link; the buttons and logos are Strava's own files. */
:root { --vh-strava-orange: #FC5200; }
.vh-view-on-strava { color: var(--vh-strava-orange); font-weight: 600; text-decoration: underline; }
.vh-view-on-strava:hover, .vh-view-on-strava:focus { color: var(--vh-strava-orange); }
.vh-powered-by-strava { height: 16px; width: auto; vertical-align: middle; }
.vh-strava-connect img { height: 48px; width: auto; }

/* ==========================================================================
   SfH CASE PAGE AND REGISTER (redesign-sfh-case-detail)
   The rules the case area needs instead of inline styles: the „Pași" strip, the tab strip that
   scrolls sideways on a phone, the read-only map, the fact grids and the register's team chips.
   ========================================================================== */

/* Tabs on one line; below md the strip scrolls sideways instead of wrapping into two rows. */
.vh-tabs-scroll { position: relative; }
@media (max-width: 767.98px) {
  .vh-tabs-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .vh-tabs-scroll > .nav-tabs { flex-wrap: nowrap; min-width: max-content; }
}

/* The primary step button spans the width on a phone, with its blockers beneath it. */
@media (max-width: 767.98px) {
  .vh-case-primary .btn { width: 100%; }
}
.vh-case-blockers li + li { margin-top: 0.125rem; }

/* „Pași": done / current / upcoming / skipped. Below md only the current step keeps its label. */
.vh-case-steps__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}
.vh-case-steps__item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 0 0 auto;
  font-size: var(--vh-font-sm, 0.875rem);
  color: var(--bs-secondary-color);
}
.vh-case-steps__item + .vh-case-steps__item::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  margin-right: 0.25rem;
  background: var(--bs-border-color);
}
.vh-case-steps__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  font-size: 0.75rem;
  line-height: 1;
}
.vh-case-steps__item--done { color: var(--bs-body-color); }
.vh-case-steps__item--done .vh-case-steps__dot { border-color: var(--bs-success); background: var(--bs-success); color: #fff; }
.vh-case-steps__item--current { color: var(--bs-body-color); font-weight: 600; }
.vh-case-steps__item--current .vh-case-steps__dot { border-color: var(--bs-primary); color: var(--bs-primary); }
.vh-case-steps__item--current .vh-case-steps__dot .bi { font-size: 0.5rem; }
.vh-case-steps__item--skipped { text-decoration: line-through; }
.vh-case-steps__item--skipped .vh-case-steps__dot { border-style: dashed; }
@media (max-width: 767.98px) {
  .vh-case-steps__item:not(.vh-case-steps__item--current) .vh-case-steps__label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .vh-case-steps__item + .vh-case-steps__item::before { width: 0.75rem; }
}

/* Fact grids (Context, Clasificare): a label above its value, never a w-50 split. */
.vh-case-facts dt { font-size: var(--vh-font-xs, 0.75rem); font-weight: 600; color: var(--bs-secondary-color); margin-bottom: 0.125rem; }
.vh-case-facts dd { margin-bottom: 0; }
.vh-case-markdown > :last-child { margin-bottom: 0; }

/* The read-only map of the incident's point. */
.vh-case-map { height: 220px; }

/* The per-person offcanvas is wider than Bootstrap's default, never wider than the screen. */
.vh-case-person-offcanvas { --bs-offcanvas-width: min(560px, 100vw); }

/* The register's „Echipa" column: initials, the full name in the title and for screen readers. */
.vh-case-team-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 600;
  background: var(--vh-tag-albastru-bg);
  color: var(--vh-tag-albastru-fg);
}
.vh-case-register td { vertical-align: middle; }
.vh-case-register .vh-case-register__summary { max-width: 32rem; }

/* Case evidence media (safefromharm/_evidence_item.html). */
.vh-evidence-thumb { max-height: 10rem; }
.vh-evidence-audio { max-width: 24rem; }
.vh-evidence-video { max-width: 32rem; max-height: 18rem; }

/* ==========================================================================
   ACTION LIST — a set of alternative next steps, each a row that opens its form
   (inventory/work_orders/_action_row.html). A <details> per row: the native
   marker is hidden and the right-hand toggle button is the affordance.
   ========================================================================== */

.vh-action-list {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--vh-border-radius-lg);
  overflow: hidden;
}
.vh-action + .vh-action { border-top: 1px solid var(--bs-border-color); }

.vh-action__summary {
  display: flex;
  align-items: center;
  gap: var(--vh-spacer-3);
  padding: var(--vh-spacer-2) var(--vh-spacer-3);
  cursor: pointer;
  list-style: none;
}
.vh-action__summary::-webkit-details-marker { display: none; }
.vh-action__summary::marker { content: ""; }
.vh-action__summary:hover { background-color: var(--vh-surface-muted); }
.vh-action__summary:focus-visible {
  outline: 2px solid var(--oncr-bleumarin);
  outline-offset: -2px;
}

.vh-action__icon {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--vh-surface-muted);
  color: var(--oncr-bleumarin);
}
.vh-action__label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}

/* A visual button inside the summary: the summary itself takes the click. */
.vh-action__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--vh-spacer-1);
  pointer-events: none;
}
.vh-action__toggle .bi { transition: transform 0.15s ease; }
.vh-action__toggle-close { display: none; }
.vh-action[open] .vh-action__toggle-open { display: none; }
.vh-action[open] .vh-action__toggle-close { display: inline; }
.vh-action[open] .vh-action__toggle .bi { transform: rotate(180deg); }

.vh-action__body {
  padding: 0 var(--vh-spacer-3) var(--vh-spacer-3) calc(2rem + 2 * var(--vh-spacer-3));
}

/* The step the work is waiting on. */
.vh-action--primary { background-color: var(--vh-surface-muted); }
.vh-action--primary .vh-action__summary:hover { background-color: var(--vh-surface-hover); }
.vh-action--primary .vh-action__icon {
  background-color: var(--oncr-bleumarin);
  color: #fff;
}

.vh-action--danger .vh-action__icon {
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger);
}
.vh-action--danger .vh-action__label { color: var(--bs-danger-text-emphasis); }

/* Operations on one resource line: no icon, tighter rows. */
.vh-action-list--compact .vh-action__summary { padding: var(--vh-spacer-1) var(--vh-spacer-3); }
.vh-action-list--compact .vh-action__label { font-weight: 500; }
.vh-action-list--compact .vh-action__body { padding-left: var(--vh-spacer-3); }

@media (max-width: 575.98px) {
  .vh-action__body { padding-left: var(--vh-spacer-3); }
}

/* Timeline filter: the event-type checklist scrolls inside its dropdown (timeline/_timeline.html). */
.vh-timeline-kinds-menu {
  max-height: 20rem;
  overflow-y: auto;
}