/* ZakoGo — documenti.css
   Owner: M-DO (js/documenti.js). Module-only extras.
   Tokens, shell and every shared component live in styles.css (F1) — do not
   redefine them here.

   Riuso da styles.css: .section .section-title .card .list .row .row-main
   .row-title .row-sub .squircle .btn .btn-icon .empty .empty-inline
   .empty-actions .photo-grid .photo-tile .photo-add .photo-viewer*
   .prewrap .clamp-4 .tiny .muted .sr-only
   Qui sotto solo ciò che è specifico dei Documenti. */

/* --------------------------------------------------------------------------
   1. Intestazione di sezione: titolo + pulsante "aggiungi"
   (questa vista non ha FAB, l'azione vive accanto al gruppo che modifica)
   -------------------------------------------------------------------------- */

.doc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.doc-head .section-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 0 0 2px;
}

.doc-add {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  font-size: 15.5px;
  gap: 6px;
}
.doc-add .icn { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   2. Note — la card è il bersaglio, niente pulsante annidato
   -------------------------------------------------------------------------- */

.doc-note {
  display: block;
  width: 100%;
  text-align: left;
  transition: box-shadow 140ms ease, transform 90ms ease;
}
.doc-note:active { transform: scale(.99); }
.doc-note:focus-visible { outline-offset: 3px; }

.doc-note .card-title { overflow-wrap: anywhere; }

.doc-note-text {
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.doc-note-meta {
  display: block;
  margin-top: 9px;
  color: var(--ink-faint);
}

/* textarea della sheet: cresce con il testo (JS), ma parte già respirando */
.doc-note-area { min-height: 132px; }

.doc-note-when { margin-top: 14px; }

/* Elimina nella sheet: azione seria, non urlata — rosso solo sul testo */
.btn.doc-del { color: var(--berry-ink); }
.btn.doc-del .icn { color: var(--berry-ink); }

/* --------------------------------------------------------------------------
   3. Righe file (PDF)
   -------------------------------------------------------------------------- */

.doc-file-row { padding-right: 6px; }

.doc-file-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  background: none;
  text-align: left;
  border-radius: var(--radius-md);
}
/* i nomi dei file possono essere lunghissimi: due righe e poi ellissi,
   così la riga resta scansionabile e il cestino non viene spinto via */
.doc-file-row .row-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.doc-file-main:focus-visible { outline-offset: 1px; }
.doc-file-main:active .squircle { transform: scale(.94); }
.doc-file-main .squircle { transition: transform 90ms ease; }

/* Il PDF è "documento importante": mirtillo, coerente con le azioni serie. */
.doc-file-ic {
  --c-tint: var(--berry-tint);
  --c-ink: var(--berry-ink);
}

/* --------------------------------------------------------------------------
   4. Foto
   -------------------------------------------------------------------------- */

/* input nativi: aperti dai pulsanti, mai raggiungibili da tastiera */
.doc-hidden-input { display: none; }

.doc-photo-broken {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 8px;
  background: var(--pine-050);
  border: 1.5px dashed var(--line-strong);
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}
.doc-photo-broken .icn { color: var(--sunset); }

/* nome del file nella barra del visore a schermo intero */
.doc-viewer-name {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 4px;
  text-align: center;
  color: #DEE6E1;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-viewer-del { flex: 0 0 auto; }

/* blocco dello scorrimento mentre il visore è aperto — indipendente dal
   contatore di ui.js, così una conferma sovrapposta non lo sblocca */
body.doc-viewer-open { overflow: hidden; }
body.doc-viewer-open #views { overflow: hidden; }

/* --------------------------------------------------------------------------
   5. Suggerimenti dei gruppi vuoti
   -------------------------------------------------------------------------- */

.doc-hint { align-items: flex-start; }
.doc-hint .icn { color: var(--pine-500); margin-top: 1px; }
.doc-hint span { min-width: 0; }

/* --------------------------------------------------------------------------
   6. Hover — solo su dispositivi con puntatore
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .doc-note:hover { box-shadow: var(--shadow-float); }
  .doc-file-main:hover .row-title { color: var(--pine-700); }
  .btn.doc-del:hover { background: var(--berry-tint); border-color: var(--berry); }
  .doc-viewer-name { user-select: text; }
}

/* --------------------------------------------------------------------------
   7. Schermi stretti
   -------------------------------------------------------------------------- */

@media (max-width: 359.98px) {
  .doc-add { padding: 0 12px; font-size: 15px; }
  .doc-head { gap: 8px; }
  .photo-grid { gap: 6px; }
  .doc-photo-broken { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   8. Movimento ridotto
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .doc-note:active { transform: none; }
  .doc-file-main:active .squircle { transform: none; }
}