/* ============================================================
   Ticket Assistenza - stili comuni (sopra Bootstrap 5)
   Colori principali: modifica le variabili qui sotto.
   ============================================================ */
:root {
  --brand: #1f2a44;
  --brand-2: #2e3d63;
  --accent: #e8a317;
  --bg: #f3f4f7;
  --card-radius: .75rem;
}

body { background: var(--bg); }

/* ---- Barra superiore ---- */
.navbar-brand-app { background: var(--brand); }
.navbar-brand-app .navbar-brand { font-weight: 700; letter-spacing: .02em; }
.navbar-brand-app .navbar-brand .dot { color: var(--accent); }
.navbar-brand-app .nav-link { color: rgba(255,255,255,.75); }
.navbar-brand-app .nav-link:hover,
.navbar-brand-app .nav-link.active { color: #fff; }
.navbar-brand-app .nav-link.active { box-shadow: inset 0 -3px 0 var(--accent); }

.card { border: 0; border-radius: var(--card-radius); box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.card-header { background: transparent; font-weight: 600; }

/* ---- Form pubblico ---- */
.public-hero { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; padding: 2.25rem 0 5.5rem; }
.public-hero img.logo { max-height: 72px; }
.public-wrap { margin-top: -4rem; }
.form-section-title {
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--brand-2); border-bottom: 1px solid #e5e7ef; padding-bottom: .4rem; margin: 1.75rem 0 1rem;
}
.form-section-title:first-child { margin-top: 0; }
.required::after { content: " *"; color: #dc3545; }

/* scelta variante a "tessere" */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; }
.choice-grid .btn {
  text-align: left; white-space: normal; padding: .65rem .8rem;
  --bs-btn-bg: #fff; --bs-btn-color: #333; --bs-btn-border-color: #d0d5e2;
  --bs-btn-hover-bg: #eef2fb; --bs-btn-hover-color: #333; --bs-btn-hover-border-color: var(--brand-2);
  --bs-btn-active-bg: var(--brand); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--brand);
}
.choice-grid .btn-check:focus-visible + .btn { box-shadow: 0 0 0 .25rem rgba(31,42,68,.25); }

/* area di trascinamento allegati */
.dropzone {
  border: 2px dashed #c3c9d9; border-radius: .6rem; background: #fafbfd; padding: 1.25rem;
  text-align: center; cursor: pointer; transition: background .15s, border-color .15s;
}
.dropzone:hover, .dropzone.dragover { background: #eef2fb; border-color: var(--brand-2); }
.file-list .list-group-item { font-size: .9rem; }

.honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- Pannello: lista ---- */
.status-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.badge-status { font-weight: 600; color: #fff; }
.badge-company {
  font-weight: 600; color: var(--company-color); background: color-mix(in srgb, var(--company-color) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--company-color) 35%, #fff);
}
.table-tickets tbody tr { cursor: pointer; }
.table-tickets td { vertical-align: middle; }
.table-tickets .ticket-number { font-family: var(--bs-font-monospace); font-weight: 600; white-space: nowrap; }
.filter-pills .btn { border-radius: 2rem; }
.mono { font-family: var(--bs-font-monospace); }

/* ---- Pannello: dettaglio ---- */
.data-grid dt { color: #6b7280; font-weight: 500; font-size: .85rem; }
.data-grid dd { margin-bottom: .75rem; word-break: break-word; }
.pre-wrap { white-space: pre-wrap; }

.solution-card { border-left: 4px solid #0d6efd; }
.solution-card.outcome-worked { border-left-color: #198754; }
.solution-card.outcome-failed { border-left-color: #dc3545; }
.solution-card.outcome-superseded { border-left-color: #adb5bd; opacity: .85; }
.solution-num {
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}

.timeline { list-style: none; padding-left: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 4px; bottom: 4px; width: 2px; background: #e3e6ee; }
.timeline > li { position: relative; padding-left: 44px; padding-bottom: 1.1rem; }
.timeline .tl-icon {
  position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid #e3e6ee; color: #6b7280;
}
.timeline .tl-solution .tl-icon { border-color: #0d6efd; color: #0d6efd; }
.timeline .tl-status_change .tl-icon { border-color: #fd7e14; color: #fd7e14; }
.timeline .tl-created .tl-icon { border-color: #198754; color: #198754; }
.timeline .tl-note .tl-icon { border-color: #6f42c1; color: #6f42c1; }
.timeline .tl-meta { font-size: .8rem; color: #6b7280; }
.timeline .tl-body { background: #f8f9fb; border-radius: .5rem; padding: .6rem .8rem; margin-top: .35rem; }

.attach-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: .4rem; border: 1px solid #e3e6ee; }
.attach-tile { width: 112px; text-align: center; font-size: .75rem; }
.attach-tile .icon-box {
  width: 96px; height: 96px; border-radius: .4rem; border: 1px solid #e3e6ee; background: #f8f9fb;
  display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #6b7280; margin: 0 auto;
}
.attach-tile .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .25rem; }

/* ---- Login ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); }

.token-box { font-family: var(--bs-font-monospace); word-break: break-all; background: #111827; color: #a7f3d0; padding: .75rem 1rem; border-radius: .5rem; }
code.api { background: #f1f3f8; padding: .1rem .35rem; border-radius: .25rem; }

@media (max-width: 576px) {
  .public-hero { padding-bottom: 4.5rem; }
}

/* ---- Aggiornamenti in tempo reale (lista ticket) ---- */
.live-status { display: inline-flex; align-items: center; gap: .35rem; color: #6c757d; }
.live-status .dot { width: .55rem; height: .55rem; border-radius: 50%; background: #adb5bd; }
.live-status.is-live .dot { background: #198754; box-shadow: 0 0 0 0 rgba(25, 135, 84, .5); animation: live-pulse 2s infinite; }
.live-status.is-reconnecting .dot { background: #ffc107; }
.live-status.is-down .dot { background: #dc3545; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, .45); } 70% { box-shadow: 0 0 0 .4rem rgba(25, 135, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); } }

.live-banner {
  position: fixed; top: 4.25rem; left: 50%; transform: translateX(-50%); z-index: 1080;
  background: #1f2a44; color: #fff; border-radius: 2rem; padding: .55rem 1.1rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: .5rem; animation: banner-in .25s ease-out;
}
.live-banner .bi-bell-fill { color: #ffc107; }
.live-banner .hint { font-weight: 400; opacity: .8; }
@keyframes banner-in { from { opacity: 0; transform: translate(-50%, -.5rem); } to { opacity: 1; transform: translate(-50%, 0); } }

.table-tickets tr.row-new > td { background-color: #fff7d6 !important; transition: background-color 1.2s ease; }
.table-tickets tr.row-new > td:first-child { box-shadow: inset 3px 0 0 #ffc107; }
.table-tickets tr.row-new.fade-out > td { background-color: transparent !important; box-shadow: none; }