/* =========================================================================
   Civico — design system di assessorandum
   Tema istituzionale, light, document-like. Vedi claude/DESIGN.md.
   ========================================================================= */

:root {
    /* Brand (institutional blue) */
    --clr-primary: #0066cc;
    --clr-primary-hover: #0053a6;
    --clr-primary-strong: #004080;
    --clr-primary-tint: #e7f0fb;
    --clr-on-primary: #ffffff;

    /* Neutrals */
    --clr-bg: #f4f6f9;
    --clr-surface: #ffffff;
    --clr-surface-subtle: #eef1f5;
    --clr-border: #d6dce5;
    --clr-border-strong: #b9c2cf;
    --clr-text: #1d2733;
    --clr-text-muted: #56616f;
    --clr-text-faint: #8a93a1;

    /* Semantic */
    --clr-success: #1e6b2e;  --clr-success-bg: #e6f4ea;  --clr-success-border: #bfe3c8;
    --clr-warning: #9a5b00;  --clr-warning-bg: #fdf3e2;  --clr-warning-border: #f3dcab;
    --clr-danger:  #b3261e;  --clr-danger-bg:  #fbe9e8;  --clr-danger-border:  #f1c4c0;
    --clr-info:    #0053a6;  --clr-info-bg:    #e7f0fb;  --clr-info-border:    #c4dbf6;

    /* Shadows */
    --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-raised: 0 4px 12px rgba(16, 24, 40, 0.10);
    --shadow-header: 0 1px 0 #d6dce5, 0 2px 8px rgba(16, 24, 40, 0.04);
    --shadow-overlay: 0 12px 32px rgba(16, 24, 40, 0.16);

    /* Radius */
    --radius-control: 0.375rem;
    --radius-card: 0.5rem;

    /* Focus ring */
    --focus-ring: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);

    /* Layout */
    --header-h: 60px;
    --sidebar-w: 240px;

    /* Bootstrap overrides */
    --bs-body-bg: var(--clr-bg);
    --bs-body-color: var(--clr-text);
    --bs-primary: var(--clr-primary);
    --bs-link-color: var(--clr-primary);
    --bs-link-hover-color: var(--clr-primary-hover);
    --bs-border-color: var(--clr-border);
}

/* ------------------------------------------------------------------ Base */
body {
    background-color: var(--clr-bg);
    color: var(--clr-text);
    font-family: 'Titillium Web', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

.font-mono { font-family: 'Roboto Mono', ui-monospace, monospace; }
.text-muted { color: var(--clr-text-muted) !important; }
.text-faint { color: var(--clr-text-faint) !important; }

h1, .h1 { font-size: 1.75rem; font-weight: 700; color: var(--clr-text); }
h2, .h2 { font-size: 1.25rem; font-weight: 700; color: var(--clr-text); }
h5, .h5 { font-size: 1rem; font-weight: 600; color: var(--clr-text); }
@media (max-width: 767.98px) { h1, .h1 { font-size: 1.4rem; } }

.eyebrow {
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--clr-text-muted);
}

a { color: var(--clr-primary); text-decoration: none; transition: color 0.12s ease; }
a:hover { color: var(--clr-primary-hover); text-decoration: underline; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-control); }

/* ------------------------------------------------------ Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 1.2em;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    user-select: none;
}
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* --------------------------------------------------------------- Layout */
#app-header {
    position: sticky; top: 0; z-index: 1030;
    height: var(--header-h);
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    box-shadow: var(--shadow-header);
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0 1rem;
}
.app-brand {
    font-size: 1.25rem; font-weight: 700; color: var(--clr-primary);
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.app-brand:hover { color: var(--clr-primary); text-decoration: none; }

/* Badge dell'header: orologio scadenze (promemoria) e campanella notifiche */
.promemoria-badge, .notifiche-badge {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: var(--radius-control);
    color: var(--clr-text-muted); text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.promemoria-badge:hover, .notifiche-badge:hover { background: var(--clr-surface-subtle); color: var(--clr-text); }
.promemoria-badge.is-imminente { color: var(--clr-warning); }
.promemoria-badge.is-scaduto { color: var(--clr-danger); }
.notifiche-badge.is-nuove { color: var(--clr-primary); }
.promemoria-count, .notifiche-count {
    position: absolute; top: 0.05rem; right: 0.05rem;
    min-width: 1.05rem; height: 1.05rem; padding: 0 0.28rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Titillium Web', sans-serif; font-size: 0.7rem; font-weight: 700; line-height: 1;
    color: #fff; border-radius: 999px;
    background: var(--clr-warning); border: 1.5px solid var(--clr-surface);
}
.promemoria-badge.is-scaduto .promemoria-count { background: var(--clr-danger); }
.notifiche-count { background: var(--clr-primary); }

#app-sidebar {
    position: fixed; top: var(--header-h); left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: var(--clr-surface);
    border-right: 1px solid var(--clr-border);
    padding: 1rem 0.75rem;
    overflow-y: auto;
    z-index: 1020;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#app-main {
    padding: 2rem 2rem 3rem;
    margin-left: var(--sidebar-w);
}
.app-main-inner { max-width: 1080px; margin: 0 auto; }

@media (max-width: 991.98px) {
    #app-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-overlay); }
    #app-sidebar.open { transform: translateX(0); }
    #app-main { margin-left: 0; padding: 1.5rem 1.25rem 2.5rem; }
    .sidebar-backdrop { position: fixed; inset: var(--header-h) 0 0 0; background: rgba(16,24,40,0.45); z-index: 1019; }
}
@media (max-width: 575.98px) {
    #app-main { padding: 1rem 0.9rem 2rem; }
}

/* --------------------------------------------------------- Sidebar nav */
.nav-section-label {
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--clr-text-faint); padding: 0.75rem 0.75rem 0.35rem;
}
.nav-link-civico {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.75rem; margin-bottom: 0.15rem;
    border-radius: var(--radius-control);
    color: var(--clr-text-muted); font-size: 0.95rem; font-weight: 400;
    border-left: 3px solid transparent;
    transition: background 0.12s ease, color 0.12s ease;
}
.nav-link-civico:hover { background: var(--clr-surface-subtle); color: var(--clr-text); text-decoration: none; }
.nav-link-civico.active {
    background: var(--clr-primary-tint); color: var(--clr-primary);
    font-weight: 600; border-left-color: var(--clr-primary);
}
.nav-link-civico .material-symbols-outlined { font-size: 1.3rem; }

/* ------------------------------------------------- Tabs (schede di sezione) */
.tabs-civico { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--clr-border); }
.tabs-civico a {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 0.9rem; margin-bottom: -1px;
    color: var(--clr-text-muted); font-size: 0.95rem; font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.tabs-civico a:hover { color: var(--clr-text); text-decoration: none; }
.tabs-civico a.active { color: var(--clr-primary); border-bottom-color: var(--clr-primary); }
.tabs-civico .material-symbols-outlined { font-size: 1.15rem; }

/* --------------------------------------------------------------- Buttons */
.btn { font-family: inherit; font-size: 0.9rem; font-weight: 600; border-radius: var(--radius-control);
    padding: 0.5rem 1rem; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 0.4rem; }
.btn .material-symbols-outlined { font-size: 1.1em; }
.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.82rem; }
.btn-lg { padding: 0.6rem 1.25rem; font-size: 1rem; }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn:disabled, .btn.disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary { background: var(--clr-primary); border: 1px solid var(--clr-primary); color: #fff; }
.btn-primary:hover { background: var(--clr-primary-hover); border-color: var(--clr-primary-hover); color: #fff; }
.btn-primary:active { background: var(--clr-primary-strong) !important; border-color: var(--clr-primary-strong) !important; }

.btn-secondary, .btn-outline-secondary {
    background: transparent; border: 1px solid var(--clr-border-strong); color: var(--clr-text); }
.btn-secondary:hover, .btn-outline-secondary:hover {
    background: var(--clr-surface-subtle); border-color: var(--clr-text-faint); color: var(--clr-text); }

.btn-link-civico { background: none; border: none; color: var(--clr-primary); padding: 0.25rem 0.4rem; }
.btn-link-civico:hover { text-decoration: underline; }

.btn-danger-soft { background: transparent; border: 1px solid var(--clr-danger-border); color: var(--clr-danger); }
.btn-danger-soft:hover { background: var(--clr-danger-bg); border-color: var(--clr-danger); color: var(--clr-danger); }
.btn-danger { background: var(--clr-danger); border: 1px solid var(--clr-danger); color: #fff; }
.btn-danger:hover { background: #9a1f18; border-color: #9a1f18; color: #fff; }

/* ----------------------------------------------------------------- Cards */
.card {
    background: var(--clr-surface); border: 1px solid var(--clr-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.card-header {
    background: transparent; padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--clr-surface-subtle);
    font-size: 1rem; font-weight: 600; color: var(--clr-text);
    display: flex; align-items: center; gap: 0.5rem;
}
.card-body { padding: 1.15rem; }
.card-interactive { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.card-interactive:hover { border-color: var(--clr-border-strong); box-shadow: var(--shadow-raised); }

/* ------------------------------------------------------- Activity card */
.attivita-card .attivita-meta-time { font-family: 'Roboto Mono', monospace; font-size: 0.85rem; color: var(--clr-text-muted); }
.attivita-card .attivita-titolo { font-size: 1.05rem; font-weight: 600; color: var(--clr-text); }
.attivita-descrizione { white-space: pre-wrap; line-height: 1.65; }
.attivita-descrizione.clamp-3 {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.clamp-2 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.attivita-esito {
    border-left: 2px solid var(--clr-border); padding-left: 0.75rem; color: var(--clr-text-muted);
    white-space: pre-wrap; line-height: 1.6;
}
.attivita-card.archiviata { opacity: 0.7; }

/* ------------------------------------------------------- Day group header */
.day-group-header {
    display: flex; align-items: center; gap: 0.75rem;
    background: var(--clr-bg); padding: 0.4rem 0; margin: 1.5rem 0 0.75rem;
    position: sticky; top: var(--header-h); z-index: 10;
}
.day-group-pill {
    font-family: 'Roboto Mono', monospace; font-weight: 500; color: var(--clr-text);
    white-space: nowrap;
}
.day-group-pill .weekday { color: var(--clr-text-muted); }
.day-group-pill.relative { color: var(--clr-primary); }
.day-group-rule { flex: 1; height: 1px; background: var(--clr-border); }

/* ----------------------------------------------------------- Badges/chips */
.chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.55rem; border-radius: var(--radius-control);
    font-size: 0.78rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.chip .material-symbols-outlined { font-size: 1em; }

/* Categoria soft chips (§2 mapping) */
.categoria-riunione    { color: #0053a6; background: #e7f0fb; }
.categoria-sopralluogo { color: #0a6b62; background: #e2f3f1; }
.categoria-cittadini   { color: #5b4397; background: #efeaf8; }
.categoria-delibera    { color: #8a5a00; background: #fbf0db; }
.categoria-telefonata  { color: #1e6b2e; background: #e6f4ea; }
.categoria-evento      { color: #a32f6d; background: #fbe9f2; }

/* Semantic soft chips */
.chip-success { color: var(--clr-success); background: var(--clr-success-bg); }
.chip-warning { color: var(--clr-warning); background: var(--clr-warning-bg); }
.chip-danger  { color: var(--clr-danger);  background: var(--clr-danger-bg); }
.chip-info    { color: var(--clr-info);    background: var(--clr-info-bg); }
.chip-neutral { color: var(--clr-text-muted); background: var(--clr-surface-subtle); }

/* Tag chip (neutral, full-round) */
.tag-chip {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.12rem 0.6rem; border-radius: 1rem;
    background: var(--clr-surface-subtle); color: var(--clr-text-muted);
    border: 1px solid var(--clr-border); font-size: 0.78rem; font-weight: 600;
}
.tag-chip .material-symbols-outlined { font-size: 0.95em; }
/* Tag di sistema: variante con accento per distinguerli dai tag personali */
.tag-chip.is-sistema {
    background: color-mix(in srgb, var(--clr-primary) 10%, var(--clr-surface));
    color: var(--clr-primary); border-color: color-mix(in srgb, var(--clr-primary) 30%, var(--clr-border));
}

/* Delega chip — colore dinamico via style inline */
.delega-chip { display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.55rem; border-radius: var(--radius-control); font-size: 0.78rem; font-weight: 600; }

.count-chip { font-size: 0.8rem; color: var(--clr-text-muted); }
.count-chip .scaduto { color: var(--clr-danger); font-weight: 600; }

/* ----------------------------------------------------------------- Forms */
.form-label { font-size: 0.875rem; font-weight: 600; color: var(--clr-text); margin-bottom: 0.3rem; }
.form-label .required { color: var(--clr-danger); }
/* Bootstrap form theme: i campi obbligatori ricevono la classe .required sul label */
.form-label.required::after { content: ' *'; color: var(--clr-danger); font-weight: 700; }
.form-control, .form-select {
    border: 1px solid var(--clr-border); border-radius: var(--radius-control);
    color: var(--clr-text); padding: 0.5rem 0.7rem; font-size: 1rem;
}
.form-control::placeholder { color: var(--clr-text-faint); }
.form-control:focus, .form-select:focus { border-color: var(--clr-primary); box-shadow: var(--focus-ring); }
.form-control[readonly], .form-control:disabled, .form-select:disabled {
    background: var(--clr-surface-subtle); color: var(--clr-text-faint); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--clr-danger); }
.form-text, .form-hint { font-size: 0.8rem; color: var(--clr-text-faint); }
.invalid-feedback { color: var(--clr-danger); font-size: 0.82rem; }
.form-control.font-mono, input[type="date"], input[type="time"] { font-family: 'Roboto Mono', monospace; }
.form-check-input:checked { background-color: var(--clr-primary); border-color: var(--clr-primary); }
.form-check-input:focus { box-shadow: var(--focus-ring); border-color: var(--clr-primary); }

/* ---------------------------------------------------------------- Tables */
.table-civico-wrap {
    border: 1px solid var(--clr-border); border-radius: var(--radius-card); overflow: hidden;
}
.table-civico { width: 100%; margin: 0; color: var(--clr-text); }
.table-civico thead th {
    background: var(--clr-surface-subtle); font-size: 0.8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--clr-text-muted);
    padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--clr-border);
}
.table-civico tbody td { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--clr-surface-subtle); vertical-align: middle; }
.table-civico tbody tr:last-child td { border-bottom: none; }
.table-civico tbody tr:hover { background: var(--clr-bg); }
.table-civico tr.row-inactive td { color: var(--clr-text-faint); }

/* ---------------------------------------------------------------- Alerts */
.alert {
    border-radius: var(--radius-control); padding: 0.8rem 1rem; border: 1px solid transparent;
    display: flex; align-items: center; gap: 0.5rem;
}
.alert-success { background: var(--clr-success-bg); border-color: var(--clr-success-border); color: var(--clr-success); }
.alert-warning { background: var(--clr-warning-bg); border-color: var(--clr-warning-border); color: var(--clr-warning); }
.alert-danger  { background: var(--clr-danger-bg);  border-color: var(--clr-danger-border);  color: var(--clr-danger); }
.alert-info    { background: var(--clr-info-bg);    border-color: var(--clr-info-border);    color: var(--clr-info); }

/* ---------------------------------------------------------------- Modals */
.modal-content { background: var(--clr-surface); border: 1px solid var(--clr-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); }
.modal-header, .modal-footer { border-color: var(--clr-surface-subtle); padding: 0.85rem 1.15rem; }
.modal-title { font-size: 1.1rem; font-weight: 700; color: var(--clr-text); }
.modal-backdrop.show { opacity: 1; background: rgba(16, 24, 40, 0.45); }

/* ----------------------------------------------------------- Agenda rows */
.impegno-row {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.85rem 1rem; border: 1px solid var(--clr-border); border-radius: var(--radius-card);
    background: var(--clr-surface); margin-bottom: 0.6rem; box-shadow: var(--shadow-card);
}
.impegno-row.scaduto { border-left: 3px solid var(--clr-danger); }
.impegno-row.fatto .impegno-descrizione { text-decoration: line-through; color: var(--clr-text-faint); }
.impegno-scadenza { font-family: 'Roboto Mono', monospace; font-size: 0.85rem; color: var(--clr-text-muted); }
.impegno-scadenza.scaduto { color: var(--clr-danger); font-weight: 700; }
.impegno-scadenza.in-scadenza { color: var(--clr-warning); font-weight: 600; }
.impegno-scadenza.senza { color: var(--clr-text-faint); }

/* --------------------------------------------------------- Empty states */
.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state .material-symbols-outlined { font-size: 48px; color: var(--clr-border-strong); }
.empty-state h3 { font-size: 1.1rem; font-weight: 600; color: var(--clr-text); margin-top: 0.75rem; }
.empty-state p { color: var(--clr-text-muted); margin-bottom: 1rem; }

/* ------------------------------------------------------ Storico timeline */
.storico-timeline { position: relative; padding-left: 1.75rem; }
.storico-timeline::before { content: ''; position: absolute; left: 0.45rem; top: 0.25rem; bottom: 0.25rem; width: 2px; background: var(--clr-border); }
.storico-node { position: relative; margin-bottom: 1.25rem; }
.storico-node::before {
    content: 'history'; font-family: 'Material Symbols Outlined'; font-size: 1rem;
    position: absolute; left: -1.75rem; top: 0; color: var(--clr-text-faint);
    background: var(--clr-bg); border-radius: 50%;
}
.storico-meta { font-family: 'Roboto Mono', monospace; font-size: 0.78rem; color: var(--clr-text-faint); }
.storico-campo-cambiato { background: var(--clr-warning-bg); border-radius: 0.25rem; padding: 0 0.2rem; }

/* --------------------------------------------------------- Mini calendar */
.mini-calendar td, .mini-calendar th { text-align: center; padding: 0.3rem; font-size: 0.85rem; }
.mini-calendar .day { border-radius: 50%; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.mini-calendar .day.selected { background: var(--clr-primary-tint); color: var(--clr-primary); font-weight: 600; }
.mini-calendar .day.has-entries::after { content: ''; position: absolute; bottom: 0.15rem; width: 4px; height: 4px; border-radius: 50%; background: var(--clr-primary); }
.mini-calendar .day.today { border: 1px solid var(--clr-primary); }

/* ---------------------------------------------------- Monthly calendar */
.calendar-month { width: 100%; border-collapse: separate; border-spacing: 4px; }
.calendar-month th { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--clr-text-muted); padding: 0.4rem; text-align: center; }
.calendar-month td { vertical-align: top; height: 6.5rem; width: 14.28%; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-control); padding: 0.35rem; }
.calendar-month td.is-today { border-color: var(--clr-primary); }
.calendar-month td.is-other-month { background: var(--clr-surface-subtle); }
.calendar-month .cal-daynum { font-family: 'Roboto Mono', monospace; font-size: 0.8rem; color: var(--clr-text-muted); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ============================================================ */
/* Iterazione 7b — Agenda / Archivio / Calendario              */
/* ============================================================ */

.page-head { margin-bottom: 1.25rem; }
.page-title, .page-heading { font-size: 1.6rem; font-weight: 700; color: var(--clr-text); }
.page-title { margin: 0.1rem 0 0.35rem; }

/* Card attività (Agenda/Archivio) — layout compatto */
.attivita-card {
    background: var(--clr-surface); border: 1px solid var(--clr-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 0.8rem 0.95rem; margin-bottom: 0.65rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.attivita-card:hover { border-color: var(--clr-border-strong); box-shadow: var(--shadow-raised); }
.attivita-card.is-archiviata { opacity: 0.78; }
.attivita-card.is-scaduta { border-left: 3px solid var(--clr-danger); }

.agenda-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.35rem; }
.agenda-card-actions { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; }

.agenda-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin-bottom: 0.3rem; }
.agenda-card-head .attivita-titolo { margin: 0; font-size: 1rem; }
.attivita-card .attivita-descrizione { font-size: 0.92rem; line-height: 1.5; margin: 0 0 0.35rem; }
.attivita-esito-inline { font-size: 0.9rem; line-height: 1.5; color: var(--clr-text-muted); margin: 0 0 0.35rem; }
.attivita-esito-inline .attivita-esito-label { font-weight: 600; color: var(--clr-text); white-space: nowrap; }
.attivita-esito-inline .material-symbols-outlined { font-size: 1rem; vertical-align: -0.15em; margin-right: 0.15rem; }

.attivita-tempo { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.75rem;
    font-family: 'Roboto Mono', monospace; font-size: 0.82rem; color: var(--clr-text-muted); }
.attivita-tempo .material-symbols-outlined { font-size: 1.05rem; }
.attivita-scadenza { display: inline-flex; align-items: center; gap: 0.25rem; }
.attivita-scadenza.scaduta { color: var(--clr-danger); font-weight: 600; }

.attivita-titolo { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 600; }
.attivita-titolo a { color: var(--clr-text); }
.attivita-titolo a:hover { color: var(--clr-primary); text-decoration: none; }

.attivita-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin-top: 0.4rem; }

/* Chip contatore impegni come toggle del collapse */
.count-chip-toggle { border: 1px solid var(--clr-border); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.count-chip-toggle:hover { border-color: var(--clr-border-strong); color: var(--clr-text); }
.count-chip-chevron { transition: transform 0.2s ease; }
.count-chip-toggle:not(.collapsed) .count-chip-chevron { transform: rotate(180deg); }
.attivita-luogo { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.85rem; color: var(--clr-text-muted); }
.attivita-luogo .material-symbols-outlined { font-size: 1rem; }
.attivita-modificata { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.8rem; color: var(--clr-text-faint); }

.btn-icon-civico { background: transparent; border: 1px solid transparent; color: var(--clr-text-muted);
    padding: 0.2rem; border-radius: var(--radius-control); line-height: 0; }
.btn-icon-civico:hover { background: var(--clr-surface-subtle); color: var(--clr-text); }

/* Bottone Completa */
.btn-completa { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem;
    font-size: 0.82rem; font-weight: 600; border-radius: var(--radius-control);
    border: 1px solid var(--clr-border-strong); background: var(--clr-surface); color: var(--clr-text-muted);
    cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
.btn-completa:hover { border-color: var(--clr-success); color: var(--clr-success); background: var(--clr-success-bg); }
.btn-completa .material-symbols-outlined { font-size: 1.1rem; font-variation-settings: 'FILL' 0; }
.btn-completa.is-done { border-color: var(--clr-success-border); color: var(--clr-success); background: var(--clr-success-bg); }
.btn-completa.is-done .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.completa-form { margin: 0; line-height: 0; }

/* Impegni sotto-card (compatti: descrizione e scadenza sulla stessa riga) */
.impegni-sotto { margin-top: 0.55rem; border-top: 1px dashed var(--clr-border); padding-top: 0.55rem;
    display: flex; flex-direction: column; gap: 0.35rem; }
.impegno-sub { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.55rem;
    border: 1px solid var(--clr-surface-subtle); border-radius: var(--radius-control); background: var(--clr-bg); }
.impegno-sub.scaduto { border-left: 3px solid var(--clr-danger); }
.impegno-sub.fatto .impegno-descrizione { text-decoration: line-through; color: var(--clr-text-faint); }
.impegno-sub-body { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; }
.impegno-descrizione { font-size: 0.88rem; color: var(--clr-text); }
.impegno-sub-meta { font-family: 'Roboto Mono', monospace; font-size: 0.78rem; }
.impegno-sub-stato { flex: 0 0 auto; align-self: center; }
.impegno-toggle { border: none; background: transparent; padding: 0; cursor: pointer;
    color: var(--clr-text-faint); line-height: 0; transition: color 0.12s ease; }
.impegno-toggle:hover { color: var(--clr-success); }
.impegno-toggle.is-fatto { color: var(--clr-success); }
.impegno-toggle-form { flex: 0 0 auto; margin: 0; line-height: 0; }
.impegno-toggle .material-symbols-outlined { font-size: 1.25rem; font-variation-settings: 'FILL' 0; }
.impegno-toggle.is-fatto .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.impegno-sub-meta .impegno-scadenza { display: inline-flex; align-items: center; gap: 0.25rem; }
.impegno-sub-meta .impegno-scadenza .material-symbols-outlined { font-size: 1rem; }
.impegno-sub-meta .impegno-scadenza.scaduto { color: var(--clr-danger); font-weight: 700; }
.impegno-sub-meta .impegno-scadenza.in-scadenza { color: var(--clr-warning); font-weight: 600; }
.impegno-sub-meta .impegno-scadenza.senza { color: var(--clr-text-faint); }

/* Filtri Agenda (sempre visibili): banda piatta sul fondo pagina — niente card —
   fissata sotto l'header allo scroll (stesso idioma del day-group-header) */
.filtri-agenda { background: var(--clr-bg); border-bottom: 1px solid var(--clr-border);
    padding: 0.75rem 0 0.9rem; margin: 1.25rem 0 1.5rem; }
.filtri-agenda-top { display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; }
.filtri-agenda-top .fa-cerca { flex: 1 1 240px; }
.filtri-agenda-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; padding-top: 0.9rem; }
.fa-cerca-input { position: relative; }
.fa-cerca-input .material-symbols-outlined { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
    color: var(--clr-text-faint); font-size: 1.2rem; pointer-events: none; }
.fa-cerca-input .form-control { padding-left: 2.2rem; }
@media (min-width: 768px) {
    /* Sticky solo da md in su: su mobile il form espanso è alto e mangerebbe il viewport. */
    .filtri-agenda { position: sticky; top: var(--header-h); z-index: 20; }
    .filtri-agenda-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
    .filtri-agenda-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Multiselect con ricerca */
.ms-multi { position: relative; }
.ms-toggle { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-menu { min-width: 100%; max-width: 320px; box-shadow: var(--shadow-overlay);
    border: 1px solid var(--clr-border); border-radius: var(--radius-card); }
.ms-options { max-height: 220px; overflow-y: auto; }
.ms-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem;
    border-radius: var(--radius-control); cursor: pointer; font-size: 0.9rem; }
.ms-option:hover { background: var(--clr-surface-subtle); }
.ms-option input { flex: 0 0 auto; }

/* Calendario: eventi + legenda */
.cal-nav-title { min-width: 10rem; text-align: center; }
.cal-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-bottom: 1rem;
    font-size: 0.82rem; color: var(--clr-text-muted); }
.cal-legenda-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.cal-legenda-nota { color: var(--clr-text-faint); font-size: 0.78rem; }
.cal-ev-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.cal-ev-swatch.attivita { background: var(--clr-primary); }
.cal-ev-swatch.impegno { background: #0a6b62; }
.cal-ev-swatch.scaduto { background: var(--clr-danger); }
.cal-eventi { display: flex; flex-direction: column; gap: 2px; margin-top: 0.3rem; }
.cal-ev { display: flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; line-height: 1.2;
    padding: 0.1rem 0.3rem; border-radius: 4px; text-decoration: none; overflow: hidden; }
.cal-ev:hover { text-decoration: none; filter: brightness(0.97); }
.cal-ev-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.cal-ev-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-attivita { background: var(--clr-primary-tint); color: var(--clr-primary-strong); }
.cal-ev-attivita .cal-ev-dot { background: var(--clr-primary); }
.cal-ev-impegno { background: #e2f3f1; color: #0a6b62; }
.cal-ev-impegno .cal-ev-dot { background: #0a6b62; }
.cal-ev-scaduto { background: var(--clr-danger-bg); color: var(--clr-danger); }
.cal-ev-scaduto .cal-ev-dot { background: var(--clr-danger); }