/* =============================================================================
   Kivo APP — LOT 5 — SAV / Tickets (#/sav, #/sav/<id>)
   Liste data-table + détail 2 colonnes. Responsive + AA.
   ============================================================================= */

.sav-header { margin-bottom: var(--sp-4); }
.sav-header__sub { color: var(--text-dim); font-size: var(--fs-sm); margin-top: var(--sp-1); }
.sav-header__sub .badge { vertical-align: middle; }

/* --- Compteurs --- */
.sav-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.sav-stat { display: flex; align-items: center; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.sav-stat__icon { width: 38px; height: 38px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; }
.sav-stat__icon svg { width: 19px; height: 19px; }
.sav-stat__icon--info { background: var(--info-bg); color: var(--info); }
.sav-stat__icon--warn { background: var(--warn-bg); color: var(--warn); }
.sav-stat__icon--success { background: var(--success-bg); color: var(--success); }
.sav-stat__body { display: flex; flex-direction: column; }
.sav-stat__value { font-family: var(--font-title); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1; }
.sav-stat__label { font-size: var(--fs-sm); color: var(--text-dim); }

/* --- Détail --- */
.sav-head { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); margin-bottom: var(--sp-4); }
.sav-head__top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sav-head__id { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--text-dim); }
.sav-head__subject { font-family: var(--font-title); font-size: var(--fs-xl); font-weight: var(--fw-bold); margin-top: var(--sp-2); }
.sav-head__meta { font-size: var(--fs-sm); color: var(--text-dim); margin-top: var(--sp-2); }
.sav-head__meta .badge { vertical-align: middle; }
.sav-head__client { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.sav-head__avatar { width: 36px; height: 36px; flex: none; border-radius: var(--r-pill); display: grid; place-items: center; font-size: var(--fs-sm); font-weight: var(--fw-bold); background: var(--accent-soft); color: var(--accent); }
.sav-head__client > span:nth-child(2) { flex: 1; }

.sav-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }

/* --- Journal d'audit (#/audit) : cellule action --- */
.audit-act { display: inline-flex; align-items: center; gap: var(--sp-2); }
.audit-act svg { width: 15px; height: 15px; flex: none; color: var(--text-dim); }
.audit .data-table tr[data-clickable] { cursor: pointer; }

@media (max-width: 920px) { .sav-cols { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .sav .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sav .data-table, .sav .data-table tbody, .sav .data-table tr, .sav .data-table td { display: block; width: 100%; }
  .sav .data-table tr { border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: var(--sp-2); padding: var(--sp-2); }
  .sav .data-table td { text-align: left !important; padding: var(--sp-1) var(--sp-2); border: none; }
}