/* Backoffice · Contenuti: programma, ristoranti e servizi, info utili, scorciatoie, contatti. */
.pad-h { padding: 16px 18px 8px; margin: 0; }
details.card > summary { cursor: pointer; font: 800 16px var(--display); list-style: none; display: flex; gap: 8px; align-items: center; }
details.card > summary small { font: 600 13px var(--sans); color: var(--muted); }
details.card > summary::before { content: "›"; display: inline-block; transition: transform .15s; color: var(--muted); }
details.card[open] > summary::before { transform: rotate(90deg); }
details.card:not([open]) > summary { padding-bottom: 16px; }

/* Righe */
.li .t { width: 52px; flex: none; font: 800 16px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.li .t small { display: block; font: 600 12.5px var(--sans); color: var(--muted); }
.cat { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.cat-accent { background: #ffe9e3; color: #b23b1c; }
.cat-highlight { background: #fff4d0; color: #7a5600; }
.cat-fresh { background: #ddf5f2; color: #0d6f66; }
.cat-primary { background: #e3ebf2; color: #0b3c5d; }
.thumb { width: 64px; height: 46px; border-radius: 10px; object-fit: cover; flex: none; }
.thumb.none { display: grid; place-items: center; background: var(--soft); color: #a3b2be; }
.tico { width: 36px; height: 36px; border-radius: 10px; background: var(--soft); color: var(--ink-2); display: grid; place-items: center; flex: none; }
.li .tx span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-act .icon-btn:disabled { opacity: .3; cursor: default; background: none; }

/* Finestre: luoghi e voci */
.vslot { margin: 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.vslot > .row select, .vslot > .row input[data-vs-label] { width: auto; min-width: 0; padding: 7px 10px; border: 1px solid #d5dee5; border-radius: 9px; background: #fff; }
.vphotos { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 6px; }
.vphotos figure { margin: 0; position: relative; }
.vphotos img { width: 128px; height: 86px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.vphotos .cover { position: absolute; left: 6px; top: 6px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; }
.vphotos figure > span { position: absolute; right: 4px; top: 4px; display: flex; gap: 2px; }
.vphotos figure > span .icon-btn { width: 28px; height: 28px; background: rgba(255, 255, 255, .92); }
details.more { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
details.more > summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--ink-2); }
details.more[open] > summary { margin-bottom: 12px; }
details.more > :not(summary) + * { margin-top: 10px; }
.types { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.type { cursor: pointer; display: grid; gap: 3px; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 12px; }
.type input { position: absolute; opacity: 0; }
.type b { font-size: 14.5px; }
.type small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.type .ico { color: var(--muted); }
.type:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.type:has(input:checked) .ico { color: var(--accent-text); }
.type:has(input:focus-visible) { outline: 2px solid var(--brand); }

/* Orari: periodi dell'anno e giorni speciali */
details.hx { display: grid; gap: 14px; }
.hx-part { display: grid; gap: 8px; }
.hx-part > b { font-size: 14px; }
.hx-part > small.hint { margin-top: -6px; }
.hx-season { margin: 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 10px; background: #fff; }
.hx-when { font-weight: 700; font-size: 14px; }
.md { display: inline-flex; gap: 4px; }
.hx .md select, .hx .hx-exc input[type=date] { width: auto; padding: 6px 8px; border: 1px solid #d5dee5; border-radius: 8px; background: #fff; }
.hx-closed { display: none; color: var(--warn); font-weight: 700; }
.hx-slots:not(:has(.slot)) + .hx-closed { display: block; }
.hx-exc { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 10px; background: #fff; }

/* Programma: striscia dei giorni (scorre di lato sul telefono; il contenitore non deve allargare la pagina) */
#progStrip { min-width: 0; overflow: hidden; }
.daystrip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.daystrip button { all: unset; cursor: pointer; box-sizing: border-box; flex: none; min-width: 92px; display: grid; gap: 1px; padding: 9px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.daystrip button:hover { border-color: #c4cfd8; }
.daystrip button:focus-visible { outline: 2px solid var(--brand); }
.daystrip small { font-size: 12px; font-weight: 700; color: var(--muted); }
.daystrip b { font: 800 15px var(--display); white-space: nowrap; }
.daystrip span { font-size: 12px; color: var(--muted); }
.daystrip button[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.daystrip button[aria-selected="true"] small, .daystrip button[aria-selected="true"] span { color: rgba(255, 255, 255, .85); }
.page-sub { display: grid; gap: 16px; }

/* Trascinamento delle righe */
/* Maniglia ⠿: sei puntini disegnati col CSS, area di presa più grande dei puntini. */
.grip { flex: none; box-sizing: content-box; width: 12px; height: 18px; padding: 8px 6px; margin: 0 -10px 0 -12px; cursor: grab; touch-action: none; color: #a3b2be;
  background: radial-gradient(circle, currentColor 1.5px, transparent 1.8px) 0 0 / 6px 6px content-box; }
.grip:hover { color: var(--ink-2); }
.sorting { cursor: grabbing; user-select: none; }
.sorting .grip { cursor: grabbing; }
.li.dragging { position: relative; z-index: 2; background: var(--panel); box-shadow: 0 10px 26px -12px rgba(10, 30, 45, .45); border-radius: 10px; outline: 2px solid var(--accent); }
/* La regola larga dei campi (.f input…) vince per specificità: qui basta limitarne la larghezza. */
.hx .hx-exc input[type=date] { max-width: 180px; }
.vslot > .row input[data-vs-label] { max-width: 220px; }

/* Telefono: i riassunti (orari, giorni) vanno a capo invece di essere tagliati */
@media (max-width: 860px) {
  .li .tx span { white-space: normal; }
  .hx-season, .hx-exc { padding: 10px; }
}