/* Sprint 2.1/2.2 — Stili per tab Documenti e Timeline.
   Scope-prefixati .docs-* e .tl-* per evitare collisioni con style.css. */

/* ===== Dropzone ============================================================ */
.docs-wrap { display: flex; flex-direction: column; gap: 16px; }

.docs-dropzone {
  border: 2px dashed #94a3b8;
  border-radius: 10px;
  padding: 28px 16px;
  background: #f8fafc;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.docs-dropzone:hover            { background: #f1f5f9; border-color: #64748b; }
.docs-dropzone--over            { background: #e0f2fe; border-color: #0284c7; }
.docs-dropzone--disabled        { cursor: not-allowed; opacity: .6; }
.docs-dropzone__title           { font-weight: 600; color: #1e293b; }
.docs-dropzone__hint            { margin-top: 4px; font-size: 13px; color: #64748b; }

/* ===== Lista documenti ===================================================== */
.docs-list                      { display: flex; flex-direction: column; gap: 8px; }
.docs-empty                     { text-align: center; padding: 24px; color: #64748b; font-style: italic; }
.docs-empty--err                { color: #b91c1c; font-style: normal; }

.docs-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.docs-item:hover                { border-color: #cbd5e1; box-shadow: 0 1px 4px rgba(0,0,0,.04); }

.doc-icon {
  flex: 0 0 44px; height: 44px;
  border-radius: 8px;
  background: #eef2ff;
  color: #4338ca;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
  letter-spacing: .5px;
}
.doc-meta                       { flex: 1 1 auto; min-width: 0; }
.doc-name                       { font-weight: 600; color: #0f172a; word-break: break-all; }
.doc-sub                        { margin-top: 2px; font-size: 12px; color: #64748b; }
.doc-tipo                       { color: #4338ca; font-weight: 500; }
.doc-sep                        { margin: 0 6px; opacity: .6; }
.doc-note                       { margin-top: 6px; font-size: 13px; color: #475569; white-space: pre-wrap; }

.doc-actions                    { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* ===== Bottoni ============================================================= */
.docs-btn {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1.4;
}
.docs-btn:hover                 { background: #f1f5f9; }
.docs-btn--primary              { background: #2563eb; color: #ffffff; border-color: #1d4ed8; }
.docs-btn--primary:hover        { background: #1d4ed8; }
.docs-btn--danger               { background: #ffffff; color: #b91c1c; border-color: #fca5a5; }
.docs-btn--danger:hover         { background: #fee2e2; }
.docs-btn:disabled              { opacity: .55; cursor: not-allowed; }

/* ===== Modal =============================================================== */
.docs-modal {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
}
.docs-modal__dialog {
  background: #ffffff;
  border-radius: 12px;
  width: min(520px, 92vw);
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  overflow: hidden;
}
.docs-modal__header             { padding: 16px 20px; border-bottom: 1px solid #e2e8f0; font-weight: 600; color: #0f172a; }
.docs-modal__body               { padding: 16px 20px; overflow: auto; }
.docs-modal__footer             { padding: 12px 20px; border-top: 1px solid #e2e8f0; display: flex; gap: 8px; justify-content: flex-end; }

.docs-form-row                  { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.docs-form-row label            { font-size: 13px; color: #475569; font-weight: 500; }
.docs-form-row input,
.docs-form-row select,
.docs-form-row textarea {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  background: #ffffff;
}
.docs-form-row textarea         { resize: vertical; }
.docs-file-info                 { font-size: 13px; color: #475569; }

.docs-progress                  { height: 6px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-top: 10px; }
.docs-progress__bar             { height: 100%; width: 30%; background: #2563eb; animation: docs-progress 1.2s linear infinite; }
@keyframes docs-progress        { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }

/* ===== Toast =============================================================== */
.docs-toast-host {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9500; pointer-events: none;
}
.docs-toast {
  background: #0f172a;
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  max-width: 360px;
}
.docs-toast--show               { opacity: 1; transform: translateY(0); }
.docs-toast--ok                 { background: #166534; }
.docs-toast--err                { background: #991b1b; }

/* ===========================================================================
   Timeline
   =========================================================================== */
.tl-wrap                        { display: flex; flex-direction: column; gap: 14px; }

.tl-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.tl-filters                     { display: flex; gap: 6px; flex-wrap: wrap; }
.tl-pill {
  border: 1px solid #cbd5e1; background: #ffffff; color: #475569;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
}
.tl-pill:hover                  { background: #f1f5f9; }
.tl-pill--active                { background: #2563eb; color: #ffffff; border-color: #1d4ed8; }

.tl-btn {
  border: 1px solid #cbd5e1; background: #ffffff;
  padding: 6px 12px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.tl-btn--primary                { background: #2563eb; color: #ffffff; border-color: #1d4ed8; }
.tl-btn--primary:hover          { background: #1d4ed8; }

.tl-list                        { display: flex; flex-direction: column; gap: 6px; }
.tl-empty                       { text-align: center; padding: 24px; color: #64748b; font-style: italic; }
.tl-empty--err                  { color: #b91c1c; font-style: normal; }

.tl-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  border-left: 3px solid #cbd5e1;
  background: #ffffff;
  border-radius: 0 6px 6px 0;
}
.tl-item--comunicazioni         { border-left-color: #2563eb; }
.tl-item--note                  { border-left-color: #f59e0b; }
.tl-item--documenti             { border-left-color: #16a34a; }
.tl-item--sistema               { border-left-color: #64748b; }

.tl-item__icon {
  flex: 0 0 36px; height: 36px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #0f172a;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
.tl-item__body                  { flex: 1 1 auto; min-width: 0; }
.tl-item__head                  { display: flex; gap: 4px; align-items: center; font-size: 12px; color: #475569; flex-wrap: wrap; }
.tl-item__type                  { font-weight: 600; color: #0f172a; }
.tl-item__actor                 { color: #64748b; }
.tl-item__date                  { margin-left: auto; color: #64748b; font-size: 12px; }
.tl-item__desc                  { margin-top: 3px; color: #1e293b; font-size: 14px; white-space: pre-wrap; word-break: break-word; }