/* ============================================================================
   ARCHIVIO LAPIDARIO — backoffice design system
   A refined archival catalogue for ANPI's memory of the Resistance.
   Cool limestone surfaces · deep institutional blue ink · patinated bronze.
   Titles set in Marcellus (classical Roman inscriptional capitals); body in
   Mulish. This layer loads last and re-skins Bootstrap globally by remapping
   its custom properties, then refines the signature components. It also carries
   the structure formerly provided by the vendored admin theme (see the ported
   theme-layer section at the end of this file).
   ============================================================================ */

@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/backoffice/font/marcellus-400.d8d78c8d074b.woff2") format("woff2");
}
@font-face {
  font-family: "Marcellus SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/backoffice/font/marcellus-sc-400.0e8c6a775f19.woff2") format("woff2");
}

/* ----- tokens · light (limestone) ------------------------------------------ */
:root {
  --bo-stone: #f1efe9;
  --bo-stone-sunken: #e8e5dd;
  --bo-paper: #fbfaf6;
  --bo-paper-raised: #ffffff;

  --bo-ink: #20314e;
  --bo-ink-soft: #51607a;
  --bo-ink-faint: #8b93a4;

  --bo-line: rgba(32, 49, 78, 0.12);
  --bo-line-soft: rgba(32, 49, 78, 0.07);
  --bo-line-strong: rgba(32, 49, 78, 0.22);

  --bo-bronze: #a4521a;
  --bo-bronze-deep: #843f10;
  --bo-bronze-soft: #c98a52;
  --bo-bronze-wash: #f1e4d7;

  --bo-blue: #243a62;
  --bo-blue-wash: #e7ebf3;

  --bo-salmon: #e9935b;
  --bo-salmon-wash: #fbeee2;

  /* verdigris — the green patina of aged bronze: the "ready / published" stage */
  --bo-verdigris: #2f6b4f;
  --bo-verdigris-wash: #e4eee9;

  --bo-warn: #b7791f;
  --bo-danger: #9a3b2f;

  /* persistent deep-blue chrome bar */
  --bo-navbar: #1d2e4d;
  --bo-navbar-ink: #e9e3d7;
  --bo-navbar-accent: #f0b07a;
  --bo-navbar-line: rgba(233, 227, 215, 0.14);

  --bo-serif: "Marcellus", "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", Georgia, serif;
  --bo-serif-sc: "Marcellus SC", var(--bo-serif);
  --bo-sans: "Mulish Regular", var(--memo-font-fallbacks);
  --bo-sans-bold: "Mulish Bold", var(--memo-font-fallbacks);

  --bo-radius: 7px;
  --bo-radius-sm: 4px;
  --bo-shadow: 0 1px 2px rgba(32, 49, 78, 0.05), 0 1px 1px rgba(32, 49, 78, 0.04);
  --bo-shadow-raised: 0 14px 34px -14px rgba(32, 49, 78, 0.28);
}

/* ----- tokens · dark (limestone by moonlight) ------------------------------ */
.dark {
  --bo-stone: #14181f;
  --bo-stone-sunken: #0f131a;
  --bo-paper: #1b212c;
  --bo-paper-raised: #222b38;

  --bo-ink: #e8e4d9;
  --bo-ink-soft: #a7afbf;
  --bo-ink-faint: #6e7686;

  --bo-line: rgba(232, 228, 217, 0.12);
  --bo-line-soft: rgba(232, 228, 217, 0.06);
  --bo-line-strong: rgba(232, 228, 217, 0.24);

  --bo-bronze: #cd884e;
  --bo-bronze-deep: #b06d35;
  --bo-bronze-soft: #e0a877;
  --bo-bronze-wash: rgba(205, 136, 78, 0.16);

  --bo-blue: #8ba6d4;
  --bo-blue-wash: rgba(139, 166, 212, 0.14);

  --bo-salmon: #eca878;
  --bo-salmon-wash: rgba(236, 168, 120, 0.14);

  --bo-verdigris: #5fae84;
  --bo-verdigris-wash: rgba(95, 174, 132, 0.16);

  --bo-warn: #d6a44a;
  --bo-danger: #d07a6c;

  --bo-navbar: #11151d;
  --bo-navbar-ink: #e8e4d9;
  --bo-navbar-accent: #d98f54;
  --bo-navbar-line: rgba(232, 228, 217, 0.1);

  --bo-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --bo-shadow-raised: 0 16px 38px -16px rgba(0, 0, 0, 0.6);
}

/* ----- remap Bootstrap custom properties (resolved per-theme via --bo-*) --- */
:root {
  --bs-body-bg: var(--bo-stone);
  --bs-body-color: var(--bo-ink);
  --bs-emphasis-color: var(--bo-ink);
  --bs-secondary-color: var(--bo-ink-soft);
  --bs-tertiary-color: var(--bo-ink-faint);
  --bs-border-color: var(--bo-line);
  --bs-border-color-translucent: var(--bo-line);
  --bs-primary: var(--bo-bronze);
  --bs-primary-rgb: 164, 82, 26;
  --bs-link-color: var(--bo-bronze);
  --bs-link-color-rgb: 164, 82, 26;
  --bs-link-hover-color: var(--bo-bronze-deep);
  --bs-link-hover-color-rgb: 132, 63, 16;
  --bs-body-font-family: var(--bo-sans);
  --bs-border-radius: var(--bo-radius);
  --bs-border-radius-sm: var(--bo-radius-sm);
  --bs-border-radius-lg: var(--bo-radius);
}

/* ----- base ---------------------------------------------------------------- */
body {
  background-color: var(--bo-stone) !important;
  color: var(--bo-ink);
  font-family: var(--bo-sans);
}
.dark body {
  background-color: var(--bo-stone) !important;
}
.content {
  color: var(--bo-ink);
}
/* literal white surfaces become warm paper, so they adapt to dark mode too */
.bg-white {
  background-color: var(--bo-paper) !important;
}
a {
  color: var(--bo-bronze);
  text-underline-offset: 0.16em;
  text-decoration-color: var(--bo-bronze-soft);
}
a:hover {
  color: var(--bo-bronze-deep);
}
hr,
.border-bottom,
.border-top,
.border {
  border-color: var(--bo-line) !important;
}
.text-muted,
.text-700,
.text-600,
.text-500 {
  color: var(--bo-ink-soft) !important;
}
.text-900,
.text-1000,
.text-black {
  color: var(--bo-ink) !important;
}
::selection {
  background: var(--bo-salmon-wash);
  color: var(--bo-ink);
}

/* ----- signature · the lapidary page header -------------------------------- */
.page_title {
  font-family: var(--bo-serif);
  font-weight: 400;
  color: var(--bo-ink);
  font-size: clamp(1.85rem, 1.45rem + 1.5vw, 2.55rem);
  line-height: 1.12;
  letter-spacing: 0.004em;
  margin: 1.5rem 0 1.15rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--bo-line);
}
.page_title small {
  display: block;
  font-family: var(--bo-serif);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bo-bronze) !important;
  margin-bottom: 0.5rem;
}
/* the trailing count: quiet sans figure, not a heading */
.page_title .fs-1,
.page_title span:not(.text-muted) {
  font-family: var(--bo-sans);
  font-size: 0.95rem !important;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--bo-ink-faint) !important;
  vertical-align: middle;
}
.page_title .btn {
  vertical-align: middle;
}
.page_subtitle {
  color: var(--bo-ink-soft);
  background: var(--bo-paper);
  border: 1px solid var(--bo-line) !important;
  border-radius: var(--bo-radius);
  font-size: 0.95rem;
  line-height: 1.6;
}
.helptext {
  color: var(--bo-ink-soft);
  font-size: 0.82rem;
}

/* ----- collapsible step instructions (draft wizard help box) --------------- */
/* collapsed by default (JS expands); ~6rem tall with the lower edge fading into
   the page so the clipped text reads as "continues below" */
.step-info {
  position: relative;
  overflow: hidden;
  max-height: 6rem;
  transition: max-height 0.35s ease;
}
.step-info::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.25rem;
  background: linear-gradient(to bottom, transparent, var(--bo-stone));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.step-info.is-expanded::after {
  opacity: 0;
}
.step-info:not(.is-expanded) {
  cursor: pointer; /* the collapsed teaser is clickable to expand */
}
.step-info-toggle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.45rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--bo-line);
  border-radius: 50%;
  background: var(--bo-paper-raised);
  color: var(--bo-blue);
  cursor: pointer;
  box-shadow: var(--bo-shadow);
  transition: background-color 0.15s, color 0.15s;
}
.step-info-toggle:hover,
.step-info-toggle:focus-visible {
  background: var(--bo-blue-wash);
}
.step-info-toggle .bi {
  line-height: 1;
  transition: transform 0.25s ease;
}
.step-info.is-expanded .step-info-toggle .bi {
  transform: rotate(180deg);
}

/* the admissible-portal example URLs inside the step-info help: chips with a
   paper background, border and the portal's own logo, so they stand out from
   the surrounding text and it is clear at a glance which archives are allowed */
.resource-hint-list {
  list-style: none;
  margin: 0.75rem 0 0.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.resource-hint {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.75rem;
  background: var(--bo-paper-raised);
  border: 1px solid var(--bo-line-strong);
  border-radius: var(--bo-radius);
  box-shadow: var(--bo-shadow);
}
.resource-hint__logo {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  border-radius: var(--bo-radius-sm);
}
.resource-hint__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.resource-hint__url {
  font-family: var(--bo-sans);
  font-size: 0.82rem;
  color: var(--bo-bronze-deep);
  word-break: break-all;
}
.resource-hint__source {
  color: var(--bo-ink-soft);
  font-size: 0.74rem;
}

/* the admissible-source portals listed in the «Link a risorse esterne» textarea
   help text: inline chips with a paper background, border and the portal's own
   logo, so the allowed archives stand out from the help paragraph */
.resource-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.resource-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  background: var(--bo-paper-raised);
  border: 1px solid var(--bo-line-strong);
  border-radius: var(--bo-radius);
  box-shadow: var(--bo-shadow);
}
.resource-chip__logo {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  border-radius: var(--bo-radius-sm);
}
.resource-chip .simple_link {
  font-size: 0.82rem;
}

/* section subheadings stay in sans for scannability */
h2,
h3,
h4,
h5,
h6,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--bo-sans-bold);
  color: var(--bo-ink);
}
h3,
.h3 {
  letter-spacing: 0.005em;
}

/* ----- top navigation · the deep-blue chrome ------------------------------- */
.navbar-top {
  background: var(--bo-navbar) !important;
  border-bottom: 1px solid var(--bo-navbar-line) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
.navbar-top .navbar-nav .nav-link,
.navbar-top .dropdown > .nav-link {
  color: var(--bo-navbar-ink) !important;
}
.navbar-top .nav-link:hover,
.navbar-top .nav-link:focus {
  color: var(--bo-navbar-accent) !important;
}
.navbar-top .navbar-toggler-icon,
.navbar-top .navbar-toggle-icon .toggle-line {
  color: var(--bo-navbar-ink);
}
/* the chrome's pill buttons: primary CTA in bronze, review in blue */
.navbar-top .btn-success {
  background: var(--bo-bronze) !important;
  border-color: var(--bo-bronze) !important;
  color: #fff !important;
}
.navbar-top .btn-success:hover {
  background: var(--bo-bronze-deep) !important;
  border-color: var(--bo-bronze-deep) !important;
}
.navbar-top .btn-memo-secondary {
  background: rgba(233, 227, 215, 0.1) !important;
  border: 1px solid var(--bo-navbar-line) !important;
  color: var(--bo-navbar-ink) !important;
}
.navbar-top .btn-memo-secondary:hover {
  background: rgba(233, 227, 215, 0.18) !important;
}
.navbar-top .btn-outline-primary {
  color: var(--bo-navbar-ink) !important;
  border-color: var(--bo-navbar-line) !important;
}
.navbar-top .btn-outline-primary:hover {
  background: var(--bo-navbar-accent) !important;
  border-color: var(--bo-navbar-accent) !important;
  color: var(--bo-navbar) !important;
}
.navbar-top .navbar-nav-icons .nav-link {
  color: var(--bo-navbar-ink) !important;
}
/* dropdown panels sit on a light card, so their items use ink — not the pale
   chrome ink of the dark bar (which would be nearly invisible) */
.navbar-top .dropdown-menu {
  background: var(--bo-paper-raised);
  border: 1px solid var(--bo-line);
  box-shadow: var(--bo-shadow-raised);
}
.navbar-top .dropdown-menu .nav-link,
.navbar-top .dropdown-menu .dropdown-item,
.navbar-top .dropdown-menu .dropdown-item .h5,
.navbar-top .dropdown-menu .dropdown-item-group .dropdown-item-title {
  color: var(--bo-ink) !important;
}
.navbar-top .dropdown-menu .text-muted,
.navbar-top .dropdown-menu .fw-normal,
.navbar-top .dropdown-menu .dropdown-item i {
  color: var(--bo-ink-soft) !important;
}
.navbar-top .dropdown-menu .nav-link:hover,
.navbar-top .dropdown-menu .nav-link:focus,
.navbar-top .dropdown-menu .dropdown-item:hover,
.navbar-top .dropdown-menu .dropdown-item:focus {
  color: var(--bo-bronze-deep) !important;
  background-color: var(--bo-bronze-wash);
}

/* ----- cards · paper leaves ------------------------------------------------ */
.card {
  background: var(--bo-paper);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-radius);
  box-shadow: var(--bo-shadow);
}
.card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--bo-line);
}

/* ----- buttons ------------------------------------------------------------- */
.btn {
  --bs-btn-border-radius: var(--bo-radius-sm);
  font-family: var(--bo-sans-bold);
  font-weight: 700;
  letter-spacing: 0.005em;
}
.btn-primary,
.btn-memo-primary {
  background-color: var(--bo-bronze) !important;
  border-color: var(--bo-bronze) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-memo-primary:hover,
.btn-primary:focus-visible,
.btn-memo-primary:focus-visible {
  background-color: var(--bo-bronze-deep) !important;
  border-color: var(--bo-bronze-deep) !important;
}
.btn-memo-secondary {
  background-color: var(--bo-blue) !important;
  border-color: var(--bo-blue) !important;
  color: #fff !important;
}
.btn-outline-primary {
  color: var(--bo-bronze) !important;
  border-color: var(--bo-bronze-soft) !important;
}
.btn-outline-primary:hover {
  background: var(--bo-bronze) !important;
  border-color: var(--bo-bronze) !important;
  color: #fff !important;
}
.btn-bo-primary {
  background: var(--bo-bronze-wash) !important;
  border-color: transparent !important;
  color: var(--bo-bronze-deep) !important;
}
.btn-bo-primary:hover {
  background: var(--bo-bronze) !important;
  color: #fff !important;
}
.btn-bo-secondary,
.btn-soft-secondary {
  background: var(--bo-stone-sunken) !important;
  border-color: transparent !important;
  color: var(--bo-ink-soft) !important;
}
.btn-bo-secondary:hover,
.btn-soft-secondary:hover {
  background: var(--bo-line) !important;
  color: var(--bo-ink) !important;
}
.btn-bo-danger {
  background: var(--bo-salmon-wash) !important;
  border-color: transparent !important;
  color: var(--bo-danger) !important;
}
.btn-bo-danger:hover {
  background: var(--bo-danger) !important;
  color: #fff !important;
}

/* ----- forms --------------------------------------------------------------- */
.form-control,
.form-select,
.input-group-text {
  background: var(--bo-paper-raised);
  border-color: var(--bo-line-strong);
  color: var(--bo-ink);
  border-radius: var(--bo-radius-sm);
  font-weight: 400; /* data is set at normal weight, not bold */
}
.form-control::placeholder {
  color: var(--bo-ink-faint);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--bo-bronze);
  box-shadow: 0 0 0 0.18rem var(--bo-bronze-wash);
  background: var(--bo-paper-raised);
}
/* quiet serif small-caps labels, in the catalogue voice (not uppercase-bold) */
.form-label,
.main-form-label,
.col-form-label {
  font-family: var(--bo-serif-sc);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--bo-ink-soft);
}
/* native radios/checkboxes (e.g. the licence chooser) tint bronze */
input[type="radio"],
input[type="checkbox"],
input[type="range"] {
  accent-color: var(--bo-bronze);
}
/* Bootstrap-styled checks (e.g. the monument-type chooser) pick up the bronze accent */
.form-check-input:checked,
.form-check-input[type="radio"]:checked,
.form-check-input[type="checkbox"]:checked {
  background-color: var(--bo-bronze) !important;
  border-color: var(--bo-bronze) !important;
}
.form-check-input:focus {
  border-color: var(--bo-bronze);
  box-shadow: 0 0 0 0.18rem var(--bo-bronze-wash);
}
/* photo formsets: let each wrapped field-row breathe instead of stacking flush */
.draft_item_body.d-flex .row {
  --bs-gutter-y: 1.25rem;
}
/* progress text (e.g. a completed draft step) reads as bronze verdigris, not stock green */
.text-success {
  color: var(--bo-verdigris) !important;
}

/* ----- tables · the index ---------------------------------------------------*/
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bo-ink);
  border-color: var(--bo-line);
}
.table > thead,
.table-light {
  --bs-table-bg: transparent;
  background: transparent !important;
}
.table > thead th {
  font-family: var(--bo-serif-sc);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--bo-ink-soft);
  border-bottom: 1.5px solid var(--bo-line-strong);
  background: transparent;
}
.table > tbody td {
  border-color: var(--bo-line-soft);
}

/* ----- badges -------------------------------------------------------------- */
.badge {
  font-family: var(--bo-sans-bold);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--bo-radius-sm);
  padding: 0.32em 0.6em;
}
.badge.text-bg-success {
  background: var(--bo-verdigris-wash) !important;
  color: var(--bo-verdigris) !important;
}
.badge.text-bg-warning {
  background: var(--bo-salmon-wash) !important;
  color: var(--bo-warn) !important;
}

/* registro azioni — status/publication badges, wash + ink from the palette so they
   stay legible in both themes (a bare .badge has no background of its own). */
.badge.bo-log-status {
  background: var(--bo-blue-wash) !important;
  color: var(--bo-blue) !important;
}
.badge.bo-log-new {
  background: var(--bo-verdigris-wash) !important;
  color: var(--bo-verdigris) !important;
}
.badge.bo-log-update {
  background: var(--bo-bronze-wash) !important;
  color: var(--bo-bronze-deep) !important;
}
.badge.bo-log-failed {
  background: var(--bo-salmon-wash) !important;
  color: var(--bo-warn) !important;
}
.badge.bo-log-auto {
  background: var(--bo-line-soft) !important;
  color: var(--bo-ink-faint) !important;
}

/* ----- alerts -------------------------------------------------------------- */
.alert {
  border-radius: var(--bo-radius);
  border: 1px solid var(--bo-line);
  background: var(--bo-paper);
  color: var(--bo-ink);
}
.alert-outline-warning,
.alert-soft-warning {
  border-color: var(--bo-salmon) !important;
  background: var(--bo-salmon-wash) !important;
  color: var(--bo-ink) !important;
}

/* ----- fascia «backoffice in manutenzione» (solo admin, vedi base.html) ----- */
.bo-maintenance-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--bo-salmon);
  border-left-width: 4px;
  border-radius: var(--bo-radius);
  background: var(--bo-salmon-wash);
  color: var(--bo-ink);
  font-size: 0.92rem;
}
.bo-maintenance-banner .bi {
  color: var(--bo-bronze);
}

/* ----- toasts -------------------------------------------------------------- */
.toast {
  background: var(--bo-paper-raised);
  border: 1px solid var(--bo-line-strong);
  border-radius: var(--bo-radius);
  box-shadow: var(--bo-shadow-raised);
  color: var(--bo-ink);
}

/* The shared draft card lives further down (.draft-card); the kanban board keeps only its
   drag-specific styles in monumentdraft_kanban.html (a page <style> after this file). */

/* ===== specialized widgets ================================================= */
/* These vendor stylesheets (select2, EasyMDE, OpenLayers) load from {% block head %}
   AFTER this file, so the overrides below use !important to win — matching the
   convention already used by theme_overwrite.css. */

/* select2 (django_select2, "default" theme) — autocomplete pickers in forms */
.select2-container--default .select2-selection {
  background: var(--bo-paper-raised) !important;
  border: 1px solid var(--bo-line-strong) !important;
  border-radius: var(--bo-radius-sm) !important;
  color: var(--bo-ink);
}
.select2-container--default .select2-selection--single {
  height: calc(1.5em + 0.75rem + 2px);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--bo-ink) !important;
  line-height: calc(1.5em + 0.75rem);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--bo-ink-faint) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + 0.75rem);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--bo-ink-soft) transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--bo-ink-soft) !important;
}
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
  border-color: var(--bo-bronze) !important;
  box-shadow: 0 0 0 0.18rem var(--bo-bronze-wash) !important;
}
.select2-dropdown {
  background: var(--bo-paper-raised) !important;
  border: 1px solid var(--bo-bronze) !important;
  border-radius: var(--bo-radius-sm) !important;
  box-shadow: var(--bo-shadow-raised);
}
.select2-search--dropdown .select2-search__field {
  background: var(--bo-paper) !important;
  border: 1px solid var(--bo-line-strong) !important;
  border-radius: var(--bo-radius-sm);
  color: var(--bo-ink);
}
/* the search field is a bare <input>: replace its blue browser focus glow with bronze */
.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--bo-bronze) !important;
  box-shadow: 0 0 0 0.18rem var(--bo-bronze-wash);
  outline: none;
}
.select2-results__option {
  color: var(--bo-ink);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background: var(--bo-bronze) !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--bo-bronze-wash) !important;
  color: var(--bo-ink) !important;
}
.select2-container--default .select2-selection--multiple {
  min-height: calc(1.5em + 0.75rem + 2px);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--bo-bronze-wash) !important;
  border: 1px solid var(--bo-bronze-soft) !important;
  border-radius: var(--bo-radius-sm) !important;
  color: var(--bo-bronze-deep) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--bo-bronze-deep) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background: transparent !important;
  color: var(--bo-danger) !important;
}

/* EasyMDE — the blog post markdown editor */
.editor-toolbar {
  background: var(--bo-paper) !important;
  border: 1px solid var(--bo-line-strong) !important;
  border-bottom: none !important;
  border-radius: var(--bo-radius-sm) var(--bo-radius-sm) 0 0 !important;
  opacity: 1;
}
.editor-toolbar button {
  color: var(--bo-ink-soft) !important;
  border-color: transparent !important;
}
.editor-toolbar button:hover,
.editor-toolbar button.active {
  background: var(--bo-bronze-wash) !important;
  border-color: var(--bo-line) !important;
  color: var(--bo-bronze-deep) !important;
}
.editor-toolbar i.separator {
  border-color: var(--bo-line) !important;
}
.EasyMDEContainer .CodeMirror {
  background: var(--bo-paper-raised) !important;
  border: 1px solid var(--bo-line-strong) !important;
  border-radius: 0 0 var(--bo-radius-sm) var(--bo-radius-sm) !important;
  color: var(--bo-ink) !important;
}
.EasyMDEContainer .CodeMirror-cursor {
  border-color: var(--bo-bronze) !important;
}
.editor-preview,
.editor-preview-side {
  background: var(--bo-stone) !important;
  color: var(--bo-ink) !important;
}
.editor-statusbar {
  color: var(--bo-ink-faint) !important;
}

/* OpenLayers map controls (draft "Luogo" step) */
.ol-control button {
  background: var(--bo-bronze) !important;
  color: #fff !important;
  border-radius: var(--bo-radius-sm);
}
.ol-control button:hover,
.ol-control button:focus {
  background: var(--bo-bronze-deep) !important;
}
/* "Punto da coordinate" accepts long strings (DMS, Google Maps links):
   roughly three times the browser default width. */
#coordinates_to_dot {
  width: 34em;
  max-width: 100%;
}
/* The map extras (monument popup, layer menu, toponym search) inherit tiny
   percentages tuned for the public site: in the backoffice bump them by 50%.
   map.css loads after this sheet (page-level head block), so the popup needs
   the doubled class to out-rank its 60% !important. */
.ol-popup.ol-popup {
  font-size: 90% !important;
}
.ol-box {
  font-size: 90% !important;
}
.map_search_box {
  font-size: 105% !important;
}
/* The toponym search panel is a white sheet in both themes: its result entries
   are plain text rows, not bronze control buttons. */
.ol-control .map_search_box .map_search_result {
  background: none !important;
  color: var(--memo-color-dark-blue, #243a62) !important;
}
.ol-control .map_search_box .map_search_result:hover,
.ol-control .map_search_box .map_search_result:focus {
  background: rgba(36, 58, 98, 0.08) !important;
}
.ol-attribution {
  border-radius: var(--bo-radius-sm) 0 0 0;
}

/* live pin-coordinate readout, just below the map at the right (draft "Luogo") */
.bo-live-coordinates {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.4rem;
}
.bo-live-coordinates__box {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.65rem;
  font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--bo-ink);
  background: var(--bo-paper-raised);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-radius-sm);
  box-shadow: var(--bo-shadow);
}
.bo-live-coordinates__box > .bi {
  color: var(--bo-bronze);
}
.bo-live-coordinates__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.2rem;
  padding: 0.05rem 0.25rem;
  border: 0;
  border-radius: var(--bo-radius-sm);
  background: transparent;
  color: var(--bo-ink-faint);
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s, background-color 0.15s;
}
.bo-live-coordinates__copy:hover,
.bo-live-coordinates__copy:focus-visible {
  color: var(--bo-bronze);
  background: var(--bo-bronze-wash);
}
.bo-live-coordinates__copy.is-copied {
  color: var(--bo-verdigris);
}

/* Bokeh statistics — BokehJS renders the chart itself; settle only the wrapper */
.bk-root {
  color: var(--bo-ink);
  font-family: var(--bo-sans);
}

/* ===== review-pass refinements ============================================= */

/* counts & figures use tabular numerals so they line up */
.page_title .fs-1,
.page_title span,
.kanban-count,
.badge {
  font-variant-numeric: tabular-nums;
}

/* table rows respond to hover */
.table tbody tr {
  transition: background-color 0.12s;
}
.table tbody tr:hover {
  --bs-table-hover-bg: var(--bo-bronze-wash);
  --bs-table-hover-color: var(--bo-ink);
  background-color: var(--bo-bronze-wash);
}

/* completeness steplinks sit above the card's stretched target where present */
.draft-steplinks {
  position: relative;
  z-index: 2;
}

/* shared draft card · the kanban board, the review lists and the dashboard speak one card */
.draft-card {
  background: var(--bo-paper);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-radius-sm);
  /* No overflow:hidden: the diff panel (.draft-diff-panel) floats out below the card and
     must not be clipped. The photo strip rounds its own top corners instead. */
  box-shadow: var(--bo-shadow);
  transition: box-shadow 0.15s, border-color 0.4s;
}
.draft-card:hover {
  box-shadow: var(--bo-shadow-raised);
  border-color: var(--bo-line-strong);
}
.draft-card-photo {
  display: flex;
  gap: 2px;
  height: 120px;
  overflow: hidden;
  border-top-left-radius: var(--bo-radius-sm);
  border-top-right-radius: var(--bo-radius-sm);
  background-color: var(--bo-stone-sunken);
}
.draft-card-photo > span {
  flex: 1;
  background-color: var(--bo-stone-sunken);
  background-size: cover;
  background-position: center;
}
.draft-card-body {
  padding: 0.8rem 0.85rem 0.85rem;
}
/* a bronze pencil to the right of the title marks an edit to an already-published memory */
.draft-card-edit-icon {
  flex-shrink: 0;
  margin-left: 0.5rem;
  color: var(--bo-bronze);
  font-size: 0.95rem;
}
/* completeness step icons: a finished step reads deep blue (not bronze), a missing one stays red */
.draft-step-done {
  color: var(--bo-blue) !important;
}
/* the review lists arrange the cards as a grid (four per row), actions under each card */
.draft-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .draft-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .draft-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .draft-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.draft-card-cell {
  display: flex;
  flex-direction: column;
}
.draft-card-actions {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

/* elegant empty states */
.empty-note {
  color: var(--bo-ink-faint);
  font-style: italic;
}
.empty-note .bi {
  opacity: 0.65;
  margin-right: 0.4rem;
}

/* monument-type chooser: tidy selectable cards with a clear bronze state */
.radio-card-group {
  --bs-gutter-y: 0.85rem;
}
.radio-card-group .radio-card {
  position: relative;
  height: 100%;
  padding: 0.7rem 0.85rem 0.7rem 2.45rem;
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-radius-sm);
  background: var(--bo-paper);
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s;
}
.radio-card-group .radio-card:hover {
  border-color: var(--bo-bronze-soft);
}
.radio-card-group .radio-card:has(input:checked) {
  border-color: var(--bo-bronze);
  background: var(--bo-bronze-wash);
  box-shadow: inset 0 0 0 1px var(--bo-bronze);
}
.radio-card-group .radio-card input {
  position: absolute;
  left: 0.85rem;
  top: 0.95rem;
  margin: 0;
}
.radio-card-group .radio-card label {
  margin: 0 !important;
  display: block;
  cursor: pointer;
  font-family: var(--bo-sans-bold);
  color: var(--bo-ink);
}
.radio-card-group .radio-card .helptext {
  margin: 0.15rem 0 0 !important;
  font-family: var(--bo-sans);
  font-weight: 400;
}

/* horizontal stepper for the draft wizard */
.draft-steps {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.draft-step {
  position: relative;
  flex: 0 1 8.5rem;
  min-width: 4.5rem;
  text-align: center;
}
.draft-step + .draft-step::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: -50%;
  width: 100%;
  border-top: 1.5px solid var(--bo-line);
  z-index: 0;
}
.draft-step-link {
  display: block;
  position: relative;
  z-index: 1;
  text-decoration: none;
}
.draft-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  border: 1.5px solid var(--bo-line-strong);
  background: var(--bo-paper);
  color: var(--bo-ink-faint);
  font-size: 1.05rem;
  transition: all 0.15s;
}
.draft-step-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--bo-ink-faint);
  line-height: 1.2;
}
.draft-step-label small {
  color: inherit;
  opacity: 0.7;
}
.draft-step.is-done .draft-step-dot {
  border-color: var(--bo-verdigris);
  color: var(--bo-verdigris);
}
.draft-step.is-done .draft-step-label {
  color: var(--bo-ink-soft);
}
.draft-step.is-current .draft-step-dot {
  border-color: var(--bo-bronze);
  background: var(--bo-bronze);
  color: #fff;
  box-shadow: 0 0 0 0.22rem var(--bo-bronze-wash);
}
.draft-step.is-current .draft-step-label {
  color: var(--bo-bronze-deep);
  font-family: var(--bo-sans-bold);
}
.draft-step-link:hover .draft-step-dot {
  border-color: var(--bo-bronze-soft);
  color: var(--bo-bronze);
}
.draft-step.is-current .draft-step-link {
  cursor: default;
}

/* ----- accessibility floor ------------------------------------------------- */
a:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--bo-bronze);
  outline-offset: 2px;
  border-radius: var(--bo-radius-sm);
}
.navbar-top .nav-link:focus-visible,
.navbar-top .btn:focus-visible {
  outline-color: var(--bo-navbar-accent);
}

@media (prefers-reduced-motion: reduce) {
  .kanban-card,
  .card,
  .btn {
    transition: none !important;
  }
}

/* ============================================================================
   PORTED THEME LAYER — structure & utilities formerly provided by the vendored
   theme.min.css. Ported here (1:1 geometry) so the backoffice no longer needs
   that theme. Colours use the --bo-* tokens, so light/dark follow Archivio lapidario.
   This layer still loads last, so !important is used only to beat Bootstrap.
   ============================================================================ */

/* ----- typography scale (ported scale; Bootstrap's .fs-* is inverted!) ------ */
.fs--3 { font-size: 0.512rem !important; }
.fs--2 { font-size: 0.64rem !important; }
.fs--1 { font-size: 0.8rem !important; }
.fs-0 { font-size: 1rem !important; }
.fs-1 { font-size: 1.25rem !important; }
.fs-2 { font-size: 1.5625rem !important; }
.fs-3 { font-size: 1.953125rem !important; }
.fs-4 { font-size: 2.44140625rem !important; }
.fs-5 { font-size: 3.0517578125rem !important; }
.fs-6 { font-size: 3.8146972656rem !important; }
.fs-7 { font-size: 4.768371582rem !important; }
.fw-semi-bold { font-weight: 600 !important; }

/* heading sizes (ported scale — Bootstrap's defaults are larger and threw off
   the proportions of card/dropdown titles, mostly h5/h4/h6). .page_title keeps
   its own size (higher specificity). */
h1, .h1 { font-size: 2.44140625rem; }
h2, .h2 { font-size: 1.953125rem; }
h3, .h3 { font-size: 1.5625rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.8rem; }

/* il titolo di una modale non è il titolo della pagina: è un h2 che continua
   a presentarsi come prima (.h1 per il corpo, qui il carattere e il colore) */
h2.modal-title {
  font-family: inherit;
  color: inherit;
}

/* ----- fixed top navbar: offset so .content clears the bar ------------------ */
.content {
  min-height: 100vh;
  padding: calc(1.7rem + 2rem) 2.5rem 6rem 2.5rem;
}

/* ----- top navbar structure (Bootstrap handles layout/fixed/collapse) ------ */
.navbar-top {
  padding: 0 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.navbar-top.navbar-slim {
  min-height: 1.7rem;
}
/* vertically centre the right-hand icon cluster (theme toggle, bell, user).
   Child combinator: must not leak into the nested .nav-item rows of the user
   dropdown, or it would flex them and shrink-wrap their links (breaking the
   full-row hover highlight). */
.navbar-top .navbar-nav-icons > .nav-item {
  display: flex;
  align-items: center;
}
.navbar-logo {
  display: flex;
  align-items: center;
  height: 1.7rem;
}
.navbar-nav-top .nav-link {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
}

/* the two main navbar dropdowns (Aggiungi / Revisiona) open on hover, so the
   Bootstrap dropdown caret is redundant chrome — hide it. The user menu on the
   right keeps its own explicit chevron icon (bi-chevron-down). */
.navbar-nav-top .dropdown-toggle::after {
  display: none;
}

/* hamburger toggle (markup uses the ported custom icon, not Bootstrap's SVG) */
.navbar-toggler-humburger-icon {
  height: 2.25rem;
  width: 2.25rem;
  padding: 0.3125rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 0;
  margin-right: 0.6125rem;
}
.navbar-top.navbar-slim .navbar-toggler-humburger-icon {
  height: 1rem;
}
.navbar-toggle-icon {
  position: relative;
  display: block;
  height: 0.125rem;
  width: 1.125rem;
  top: -0.3125rem;
  transition: all 0.2s ease-in-out;
}
.navbar-toggle-icon .toggle-line {
  display: block;
  height: 100%;
  border-radius: 0.375rem;
  background-color: var(--bo-navbar-ink);
  transition: all 0.2s ease-in-out;
}
.navbar-toggle-icon::before,
.navbar-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  height: 0.125rem;
  width: 100%;
  border-radius: 0.375rem;
  background-color: var(--bo-navbar-ink);
  transition: all 0.2s ease-in-out;
}
.navbar-toggle-icon::before {
  top: 0.3125rem;
}
.navbar-toggle-icon::after {
  top: 0.625rem;
}

/* mega-menu groups */
.dropdown-item-group {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.dropdown-item-group .dropdown-item-title {
  margin-bottom: 0;
  white-space: nowrap;
}

/* thin scrollbar inside dropdown panels */
.scrollbar {
  overflow: auto;
}
.scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: transparent;
}
.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: var(--bo-line-strong);
}

/* dropdown text at the ported 0.8rem (Bootstrap resets it to 1rem, which made
   the menu content taller and triggered the inner scrollbar) */
.dropdown-menu {
  --bs-dropdown-font-size: 0.8rem;
}

/* mega-menu panels: wide & centred on desktop */
@media (min-width: 992px) {
  .navbar-nav-top .dropdown .dropdown-menu.dropdown-menu-card {
    min-width: 550px;
    left: 50%;
    transform: translateX(-50%);
  }
  /* invisible bridge filling the small gap above the panel, so hovering from the
     toggle down to the menu never crosses a dead zone — while keeping the visual
     separation between button and panel */
  .navbar-nav-top .dropdown .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 0.6rem;
  }
}
.notification-dropdown-menu {
  min-width: 260px;
}
.dropdown-profile {
  min-width: 18.3125rem;
}
/* the menu grows to fit all its voices; it only scrolls when the viewport is
   too short (small screens). The cap reserves room for the navbar, the name
   header and the Esci footer so the panel never spills past the screen edge. */
.dropdown-profile .scrollbar {
  max-height: calc(100vh - 12rem);
}

/* mobile (<lg): the collapsed menu panel keeps the chrome background + padding
   so the action buttons don't overlap the page underneath */
@media (max-width: 991.98px) {
  .navbar-top-collapse.show {
    padding-bottom: 1rem;
    background-color: var(--bo-navbar);
    border-radius: 0 0 var(--bo-radius) var(--bo-radius);
  }
  /* The right-hand icon cluster (notifications, user menu) stays visible below lg,
     where the main nav collapses. Bootstrap keeps a .navbar-nav dropdown menu
     position:static until lg, so on a small screen the open panel sits in-flow and
     stretches the fixed navbar to its full height. Float it like it already does on
     desktop — right alignment is handled by Bootstrap's [data-bs-popper] rule, and an
     overlong panel scrolls inside itself (see .dropdown-profile .scrollbar). */
  .navbar-top .navbar-nav-icons .dropdown-menu {
    position: absolute;
  }
}

/* theme switch — icon swap (colours come from theme_overwrite.css) */
.theme-control-toggle {
  position: relative;
}
.theme-control-toggle .theme-control-toggle-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  margin-bottom: 0;
  border-radius: 50%;
  cursor: pointer;
}
.theme-control-toggle.theme-control-toggle-slim .theme-control-toggle-label {
  height: 1rem;
  width: auto;
  padding: 0 0.5rem;
  border-radius: 50rem;
}
.theme-control-toggle .theme-control-toggle-input {
  display: none;
}
.theme-control-toggle .theme-control-toggle-input:checked ~ .theme-control-toggle-dark {
  display: none;
}
.theme-control-toggle .theme-control-toggle-input:not(:checked) ~ .theme-control-toggle-light {
  display: none;
}

/* ----- soft button variants not already defined (incl. ones built in JS:
   .btn-bo-success in osm_map.js, .btn-bo-primary in photon.js) ----- */
.btn-bo-info,
.btn-soft-info {
  background: var(--bo-blue-wash) !important;
  border-color: transparent !important;
  color: var(--bo-blue) !important;
}
.btn-bo-info:hover,
.btn-soft-info:hover {
  background: var(--bo-blue) !important;
  color: #fff !important;
}
.btn-bo-success {
  background: var(--bo-verdigris-wash) !important;
  border-color: transparent !important;
  color: var(--bo-verdigris) !important;
}
.btn-bo-success:hover {
  background: var(--bo-verdigris) !important;
  color: #fff !important;
}
.btn-soft-warning {
  background: var(--bo-salmon-wash) !important;
  border-color: transparent !important;
  color: var(--bo-warn) !important;
}
.btn-soft-warning:hover {
  background: var(--bo-warn) !important;
  color: #fff !important;
}

/* ----- soft/outline alert variants (auth pages). The .dark .alert-soft-info
   override stays in theme_overwrite_simple.css. ------------------------------ */
.alert-soft-info {
  color: #005585;
  background-color: #f0faff;
  border-color: #f0faff;
}
.alert-soft-danger {
  color: #b81800;
  background-color: #ffedeb;
  border-color: #ffedeb;
}
.alert-outline-info {
  color: #0097eb;
  background-color: transparent;
  border-color: #0097eb;
}

/* ----- layout utilities used by the navbar, cards and auth pages ----------- */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-1 {
  flex: 1;
}
.flex-3 {
  flex: 3;
}
.flex-9 {
  flex: 9;
}
.white-space-nowrap {
  white-space: nowrap;
}
.hover-bg-transparent:hover,
.hover-bg-transparent:focus {
  background-color: transparent !important;
}
.border-300 {
  border-color: var(--bo-line) !important;
}
.bg-200 {
  background-color: var(--bo-stone-sunken) !important;
}

/* centred divider label (auth pages); background comes from theme_overwrite_simple */
.divider-content-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  background-color: var(--bo-stone);
  font-size: 0.8rem;
  color: var(--bo-ink-faint);
  white-space: nowrap;
  font-weight: 700;
}

/* ============================================================================
   LA SCRIVANIA — dashboard / homepage
   A glance at your work (counters that double as filters), adapted to the role
   (the redazione block appears only for editors), opened by a warm header and
   closed by a quiet activity timeline. Built entirely on the --bo-* tokens, so
   it follows light and dark without extra rules.
   ============================================================================ */

/* ----- header ----- */
.dash-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-bottom: 1.4rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--bo-line);
}
.dash-hero-eyebrow {
  margin: 0 0 0.15rem;
  font-family: var(--bo-serif-sc);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--bo-bronze);
}
.dash-hero-title {
  margin: 0;
  font-family: var(--bo-serif);
  font-weight: 400;
  color: var(--bo-ink);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.1;
}
.dash-hero-impact {
  margin: 0.5rem 0 0;
  color: var(--bo-ink-soft);
  max-width: 52ch;
}
.dash-hero-impact a {
  color: var(--bo-ink);
  text-underline-offset: 0.18em;
  text-decoration-color: var(--bo-line-strong);
}
.dash-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* hero "add" dropdown: a white panel as wide as its own button, with the same
   bronze hover as the navbar menus (see .navbar-top .dropdown-menu). */
.dash-hero-actions .dropdown {
  position: relative;
}
.dash-add-menu {
  width: 100%;
  min-width: 0;
  background: var(--bo-paper-raised);
  border: 1px solid var(--bo-line);
  box-shadow: var(--bo-shadow-raised);
}
.dash-add-menu .dropdown-item {
  color: var(--bo-ink);
}
.dash-add-menu .dropdown-item:hover,
.dash-add-menu .dropdown-item:focus {
  color: var(--bo-bronze-deep);
  background-color: var(--bo-bronze-wash);
}

/* ----- avvisi della redazione (HomepageAlert con visibilità backoffice) ----- */
.dash-alert {
  display: flex;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--bo-salmon);
  border-left-width: 4px;
  border-radius: var(--bo-radius);
  background: var(--bo-salmon-wash);
  color: var(--bo-ink);
}
.dash-alert-icon {
  flex: none;
  margin-top: 0.15rem;
  font-size: 1.1rem;
  color: var(--bo-bronze);
}
.dash-alert-body > :last-child {
  margin-bottom: 0;
}
.dash-alert-title {
  margin: 0 0 0.2rem;
  font-family: var(--bo-serif);
  font-size: 1.05rem;
  color: var(--bo-ink);
}

/* ----- sections ----- */
.dash-section {
  margin-top: 2.6rem;
}
.dash-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.dash-section-title {
  margin: 0 0 1rem;
  font-family: var(--bo-serif);
  font-weight: 400;
  color: var(--bo-ink);
  font-size: 1.45rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bo-line-soft);
}
.dash-section-head .dash-section-title {
  margin-bottom: 0;
  border-bottom: 0;
  flex: 1 1 auto;
}
.dash-subtitle {
  margin: 1.6rem 0 0.7rem;
  font-family: var(--bo-sans-bold);
  font-size: 1.02rem;
  color: var(--bo-ink);
}
.dash-subtitle-note {
  font-family: var(--bo-sans);
  font-weight: 400;
  color: var(--bo-ink-faint);
  font-size: 0.85rem;
}

/* ----- counter cards (the redazione strip) ----- */
.dash-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.85rem;
}
.dash-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  background: var(--bo-paper);
  border: 1px solid var(--bo-line);
  border-left: 0.3rem solid var(--bo-line-strong);
  border-radius: var(--bo-radius-sm);
  box-shadow: var(--bo-shadow);
  text-decoration: none;
  transition: box-shadow 0.15s, border-color 0.2s, transform 0.15s;
}
.dash-stat:hover {
  box-shadow: var(--bo-shadow-raised);
  border-color: var(--bo-line-strong);
  transform: translateY(-1px);
}
.dash-stat-num {
  font-family: var(--bo-serif);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--bo-ink);
}
.dash-stat-label {
  font-size: 0.82rem;
  color: var(--bo-ink-soft);
}
/* the cards that map to a kanban column carry that column's exact accent (see
   monumentdraft_kanban.html). Pathway revision and profile changes are NOT kanban
   columns (the board is monuments-only), so they take two neutral greys: the
   stronger --bo-ink-faint and, for the default card, the lighter --bo-line-strong. */
.dash-stat-under_revision {
  border-left-color: var(--bo-bronze-soft);
}
.dash-stat-approved {
  border-left-color: var(--bo-bronze);
}
.dash-stat-awaiting_publication {
  border-left-color: var(--bo-verdigris);
}
.dash-stat-grey {
  border-left-color: var(--bo-ink-faint);
}

/* ----- "richiede la tua attenzione" list ----- */
.dash-attention {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-radius-sm);
  overflow: hidden;
  background: var(--bo-paper);
}
.dash-attention > li + li {
  border-top: 1px solid var(--bo-line-soft);
}
.dash-attention-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  text-decoration: none;
  color: var(--bo-ink);
  transition: background-color 0.15s;
}
.dash-attention-link:hover {
  background: var(--bo-bronze-wash);
}
.dash-attention-icon {
  color: var(--bo-ink-faint);
  flex-shrink: 0;
}
.dash-attention-title {
  font-family: var(--bo-sans-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-attention-meta {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.82rem;
  color: var(--bo-ink-soft);
}
.dash-attention-go {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--bo-bronze);
}
.dash-tag {
  flex-shrink: 0;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.05rem 0.45rem;
  border-radius: 1rem;
  background: var(--bo-stone-sunken);
  color: var(--bo-ink-soft);
}

/* ----- tabs + panels (le tue proposte) ----- */
.dash-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}
.dash-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--bo-line);
  border-radius: 2rem;
  background: var(--bo-paper);
  color: var(--bo-ink-soft);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.dash-tab:hover {
  border-color: var(--bo-line-strong);
  color: var(--bo-ink);
}
.dash-tab.is-active {
  background: var(--bo-ink);
  border-color: var(--bo-ink);
  color: var(--bo-paper-raised);
}
.dash-tab-count {
  font-family: var(--bo-sans-bold);
  font-size: 0.78rem;
  padding: 0 0.4rem;
  border-radius: 1rem;
  background: var(--bo-stone-sunken);
  color: var(--bo-ink-soft);
}
.dash-tab.is-active .dash-tab-count {
  background: rgba(255, 255, 255, 0.18);
  color: var(--bo-paper-raised);
}
.dash-panel + .dash-panel {
  margin-top: 2rem;
}
.dash-panel-label {
  margin: 0 0 0.9rem;
  font-family: var(--bo-serif-sc);
  font-weight: 400;
  letter-spacing: 0.03em;
  font-size: 1.05rem;
  color: var(--bo-ink-soft);
}
/* the per-stage label is a wayfinding aid only while every stage is on screen */
.dash-panels:not(.dash-all) .dash-panel-label {
  display: none;
}
.dash-more {
  display: inline-flex;
  align-items: center;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--bo-bronze);
  text-decoration: none;
}
.dash-more:hover {
  color: var(--bo-bronze-deep);
  text-decoration: underline;
}

/* ----- empty / first run ----- */
.dash-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  border: 1px dashed var(--bo-line-strong);
  border-radius: var(--bo-radius);
  color: var(--bo-ink-soft);
  background: var(--bo-paper);
}
.dash-empty-icon {
  display: block;
  font-size: 2rem;
  color: var(--bo-bronze-soft);
  margin-bottom: 0.6rem;
}

/* ----- ready flag ----- */
.dash-ready-flag {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  padding: 0.2rem 0.7rem;
  border-radius: 2rem;
  background: var(--bo-verdigris-wash);
  color: var(--bo-verdigris);
  font-family: var(--bo-sans-bold);
}

/* ----- activity timeline ----- */
.dash-activity {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-activity-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0;
}
.dash-activity-item + .dash-activity-item {
  border-top: 1px solid var(--bo-line-soft);
}
.dash-activity-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bo-ink-faint);
}
.dash-dot-in_progress {
  background: var(--bo-ink-soft);
}
.dash-dot-under_revision {
  background: var(--bo-bronze-soft);
}
.dash-dot-approved {
  background: var(--bo-bronze);
}
.dash-dot-awaiting_publication {
  background: var(--bo-verdigris);
}
.dash-activity-title {
  color: var(--bo-ink);
  text-decoration: none;
  font-family: var(--bo-sans-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-activity-title:hover {
  color: var(--bo-bronze);
}
.dash-activity-state {
  font-size: 0.8rem;
  color: var(--bo-ink-soft);
}
.dash-activity-time {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--bo-ink-faint);
}

@media (max-width: 560px) {
  .dash-attention-title {
    max-width: 45vw;
  }
  .dash-activity-state {
    display: none;
  }
}

/* ===== diff «modifiche rispetto all'originale» (kanban + liste proposte) =====
   Pannello caricato su richiesta da draft_diff.js (endpoint MonumentDraftDiffView).
   È posizionato in modo assoluto e fluttua sotto il bottone, così non cambia l'altezza
   della scheda; per questo .draft-card non usa più overflow:hidden (lo fa la striscia
   foto). Markup in widgets/draft_diff_toggle.html. */
.draft-diff {
  position: relative;
  margin-top: 0.6rem;
}
.draft-diff-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
  text-align: left;
  color: var(--bo-ink-soft);
  background: transparent;
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-radius);
  cursor: pointer;
}
.draft-diff-toggle:hover {
  color: var(--bo-bronze-deep);
  border-color: var(--bo-bronze);
}
.draft-diff-caret {
  font-size: 0.8em;
  transition: transform 0.15s ease;
}
.draft-diff-toggle[aria-expanded="true"] .draft-diff-caret {
  transform: rotate(180deg);
}
.draft-diff-panel {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 0.4rem);
  padding: 0.6rem 0.7rem;
  background: var(--bo-paper);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-radius);
  box-shadow: var(--bo-shadow-raised);
  max-height: 18rem;
  overflow-y: auto;
}
.draft-diff-panel[hidden] {
  display: none;
}

/* ============================================================================
   Messaggi — chat 1:1 del backoffice
   Master/detail in stile «Archivio lapidario»: tutto su token --bo-*, quindi
   segue automaticamente la dark mode.
   ============================================================================ */

/* Navbar: icona messaggi — pill grigio chiaro (come il toggle tema) + badge rosso */
.message-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.6rem;
  padding: 0 0.95rem;
  border-radius: 50rem;
  background: rgba(255, 255, 255, 0.14);
  transition: background-color 0.12s ease;
}
.message-nav-link:hover,
.message-nav-link:focus {
  background: rgba(255, 255, 255, 0.24);
}
.message-nav-badge {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  font-size: 0.62rem;
  padding: 0.15em 0.4em;
  line-height: 1;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--bo-navbar);
}

/* Guscio a due colonne */
.msg-shell {
  display: flex;
  gap: 0;
  height: calc(100vh - 8.5rem);
  min-height: 460px;
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-radius);
  background: var(--bo-paper);
  box-shadow: var(--bo-shadow);
  overflow: hidden;
}

/* ---- Colonna sinistra: elenco conversazioni ---- */
.msg-sidebar {
  width: 340px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--bo-line);
  background: var(--bo-paper);
}
.msg-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--bo-line);
}
.msg-title {
  font-family: var(--bo-serif);
  font-size: 1.5rem;
  margin: 0;
  color: var(--bo-ink);
}
.msg-sidebar-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.msg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.msg-list-item + .msg-list-item {
  border-top: 1px solid var(--bo-line-soft);
}
.msg-list-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.1rem;
  text-decoration: none;
  color: var(--bo-ink);
  transition: background-color 0.12s ease;
}
.msg-list-link:hover {
  background: var(--bo-bronze-wash);
}
.msg-list-item.is-active .msg-list-link {
  background: var(--bo-stone-sunken);
  box-shadow: inset 3px 0 0 var(--bo-bronze);
}
.msg-avatar {
  flex: 0 0 auto;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bo-blue-wash);
  color: var(--bo-blue);
  font-size: 1.05rem;
}
.msg-avatar-lg {
  width: 2.8rem;
  height: 2.8rem;
  font-size: 1.3rem;
}
.msg-list-body {
  flex: 1;
  min-width: 0;
}
.msg-list-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.msg-list-name {
  font-family: var(--bo-sans-bold);
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--bo-ink);
}
.msg-list-time {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--bo-ink-faint);
}
.msg-list-preview {
  display: block;
  font-size: 0.82rem;
  color: var(--bo-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-mine-icon {
  color: var(--bo-ink-faint);
  font-size: 0.72rem;
  margin-right: 0.1rem;
}
.msg-list-item.is-unread .msg-list-name,
.msg-list-item.is-unread .msg-list-preview {
  color: var(--bo-ink);
  font-family: var(--bo-sans-bold);
}
.msg-unread-badge {
  flex: 0 0 auto;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--bo-bronze);
  color: #fff;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Colonna destra: thread ---- */
.msg-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bo-stone);
}
.msg-thread-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--bo-line);
  background: var(--bo-paper);
}
.msg-back {
  display: none;
  color: var(--bo-ink-soft);
  font-size: 1.2rem;
  text-decoration: none;
}
.msg-thread-peer {
  flex: 1 1 auto;
  min-width: 0;
}
.msg-thread-name {
  font-family: var(--bo-sans-bold);
  font-size: 1rem;
  color: var(--bo-ink);
}
.msg-thread-role {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bo-bronze);
}
.msg-thread {
  flex: 1;
  overflow-y: auto;
  padding: 1.3rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.msg-row {
  display: flex;
  align-items: flex-start;
  gap: 0.15rem;
  max-width: 100%;
}
.msg-row.is-mine {
  justify-content: flex-end;
}
.msg-row.is-mine .msg-actions {
  order: -1;
}
.msg-bubble {
  max-width: 78%;
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  background: var(--bo-paper-raised);
  border: 1px solid var(--bo-line);
  box-shadow: var(--bo-shadow);
}
.msg-row.is-mine .msg-bubble {
  background: var(--bo-bronze-wash);
  border-color: transparent;
  border-bottom-right-radius: 4px;
}
.msg-row.is-theirs .msg-bubble {
  border-bottom-left-radius: 4px;
}
.msg-broadcast-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bo-blue);
  margin-bottom: 0.3rem;
}
.msg-text {
  font-size: 0.92rem;
  color: var(--bo-ink);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.msg-text a {
  color: var(--bo-bronze-deep);
}
.msg-meta {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  color: var(--bo-ink-faint);
  text-align: right;
}
.msg-read {
  color: var(--bo-verdigris);
  margin-left: 0.2rem;
}
.msg-star-flag {
  color: var(--bo-bronze);
  margin-right: 0.2rem;
}

/* Menu azioni per messaggio (⋮) accanto alla bolla */
.msg-actions {
  align-self: center;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.msg-row:hover .msg-actions,
.msg-actions:focus-within,
.msg-actions.show {
  opacity: 1;
}
/* Su touch (nessun hover) il pulsante resta sempre raggiungibile. */
@media (hover: none) {
  .msg-actions {
    opacity: 0.55;
  }
}
.msg-actions-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bo-ink-faint);
  font-size: 0.95rem;
  cursor: pointer;
  line-height: 1;
}
.msg-actions-toggle:hover,
.msg-actions-toggle:focus,
.msg-actions.show .msg-actions-toggle {
  background: var(--bo-stone-sunken);
  color: var(--bo-ink);
}
.msg-actions .dropdown-menu {
  --bs-dropdown-min-width: 12rem;
  font-size: 0.86rem;
}
.msg-actions .dropdown-item {
  display: flex;
  align-items: center;
}
.msg-important-form {
  margin: 0;
}
.msg-important-form .dropdown-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.msg-important-btn .bi-star-fill {
  color: var(--bo-bronze);
}

/* Citazione del messaggio a cui si risponde */
.msg-quote {
  display: block;
  margin-bottom: 0.4rem;
  padding: 0.25rem 0.5rem;
  border-left: 3px solid var(--bo-bronze-soft);
  border-radius: 0 var(--bo-radius-sm) var(--bo-radius-sm) 0;
  background: var(--bo-stone-sunken);
  text-decoration: none;
  overflow: hidden;
}
.msg-quote:hover {
  background: var(--bo-bronze-wash);
}
.msg-quote-author {
  display: block;
  font-size: 0.7rem;
  font-family: var(--bo-sans-bold);
  color: var(--bo-bronze-deep);
}
.msg-quote-text {
  display: block;
  font-size: 0.78rem;
  color: var(--bo-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Evidenziazione temporanea al salto verso un messaggio */
.msg-flash .msg-bubble {
  animation: msg-flash 1.6s ease;
}
@keyframes msg-flash {
  0%,
  35% {
    box-shadow: 0 0 0 2px var(--bo-bronze-soft), var(--bo-shadow);
  }
  100% {
    box-shadow: var(--bo-shadow);
  }
}

/* Menu «messaggi importanti» nell'intestazione della conversazione */
.msg-important-menu {
  flex: 0 0 auto;
}
.msg-important-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--bo-line);
  border-radius: 999px;
  background: var(--bo-paper-raised);
  color: var(--bo-bronze);
  cursor: pointer;
}
.msg-important-toggle:hover,
.msg-important-menu.show .msg-important-toggle {
  border-color: var(--bo-bronze-soft);
  background: var(--bo-bronze-wash);
}
.msg-important-count {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--bo-bronze);
  color: #fff;
  font-size: 0.66rem;
  line-height: 1.05rem;
  text-align: center;
  font-family: var(--bo-sans-bold);
}
.msg-important-panel {
  --bs-dropdown-min-width: 17rem;
  max-width: 22rem;
  max-height: 60vh;
  overflow-y: auto;
}
.msg-important-item {
  display: block;
  white-space: normal;
}
.msg-important-item-author {
  display: block;
  font-size: 0.72rem;
  font-family: var(--bo-sans-bold);
  color: var(--bo-bronze-deep);
}
.msg-important-item-text {
  display: block;
  font-size: 0.82rem;
  color: var(--bo-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-important-empty {
  padding: 0.35rem 1rem 0.5rem;
  font-size: 0.82rem;
  color: var(--bo-ink-faint);
}

/* Banner «in risposta a…» sopra la riga di composizione */
.msg-reply-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--bo-bronze-soft);
  border-radius: 0 var(--bo-radius-sm) var(--bo-radius-sm) 0;
  background: var(--bo-stone-sunken);
}
.msg-reply-banner-body {
  flex: 1 1 auto;
  min-width: 0;
}
.msg-reply-banner-label {
  display: block;
  font-size: 0.72rem;
  color: var(--bo-bronze-deep);
}
.msg-reply-banner-text {
  display: block;
  font-size: 0.8rem;
  color: var(--bo-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-reply-cancel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bo-ink-faint);
  cursor: pointer;
}
.msg-reply-cancel:hover {
  background: var(--bo-stone);
  color: var(--bo-ink);
}

/* Allegati nelle bolle */
.msg-attachments {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.msg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  max-width: 100%;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--bo-stone-sunken);
  border: 1px solid var(--bo-line);
  color: var(--bo-ink-soft);
  font-size: 0.76rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-chip:hover {
  color: var(--bo-bronze-deep);
  border-color: var(--bo-bronze-soft);
}
.msg-chip-tag {
  margin-left: 0.35rem;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bo-salmon);
}

/* Riga di composizione (risposta) */
.msg-compose {
  border-top: 1px solid var(--bo-line);
  padding: 0.8rem 1.2rem 1rem;
  background: var(--bo-paper);
}
.msg-compose-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.message-body-input {
  flex: 1;
  resize: none;
  min-height: 2.5rem;
  max-height: 160px;
}
.msg-send {
  flex: 0 0 auto;
  height: 2.6rem;
  width: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.msg-cannot-reply {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bo-ink-faint);
  font-size: 0.86rem;
  padding: 0.5rem;
}
.msg-attach {
  margin-top: 0.6rem;
}
.msg-attach > summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--bo-ink-soft);
  list-style: none;
}
.msg-attach > summary::-webkit-details-marker {
  display: none;
}
.msg-attach > summary:hover {
  color: var(--bo-bronze-deep);
}
.msg-attach-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 0.7rem;
}
.msg-attach-field {
  min-width: 0;
}

/* Stati vuoti */
.msg-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--bo-ink-soft);
  padding: 2.5rem 1rem;
}
.msg-empty-sm {
  flex: 0 0 auto;
  padding: 1.8rem 1rem;
}
.msg-empty-icon {
  font-size: 2.2rem;
  color: var(--bo-bronze-soft);
  margin-bottom: 0.7rem;
}

/* Card pagina nuovo messaggio / annuncio */
.msg-card {
  background: var(--bo-paper-raised);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-radius);
  padding: 1.5rem;
  box-shadow: var(--bo-shadow);
}

/* Responsivo: su mobile una colonna alla volta */
@media (max-width: 800px) {
  .msg-shell {
    height: calc(100vh - 7rem);
  }
  .msg-sidebar {
    width: 100%;
  }
  .msg-shell.has-active .msg-sidebar {
    display: none;
  }
  .msg-shell:not(.has-active) .msg-main {
    display: none;
  }
  .msg-back {
    display: inline-block;
  }
  .msg-attach-grid {
    grid-template-columns: 1fr;
  }
}