/* =============================================================================
   Kivo APP — LOT 4 — Devis (#/quotes, #/quotes/<id>)
   Liste data-table + document devis. Réutilise tokens/components/utilities.
   ============================================================================= */

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

/* ---- Compteurs ---- */
.quotes-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.quotes-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); }
.quotes-stat__icon { width: 38px; height: 38px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; }
.quotes-stat__icon svg { width: 19px; height: 19px; }
.quotes-stat__icon--info { background: var(--info-bg); color: var(--info); }
.quotes-stat__icon--success { background: var(--success-bg); color: var(--success); }
.quotes-stat__icon--warn { background: var(--warn-bg); color: var(--warn); }
.quotes-stat__icon--accent { background: var(--accent-soft); color: var(--accent); }
.quotes-stat__body { display: flex; flex-direction: column; min-width: 0; }
.quotes-stat__value { font-family: var(--font-title); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1; }
.quotes-stat__value--sm { font-size: var(--fs-xl); }
.quotes-stat__label { font-size: var(--fs-sm); color: var(--text-dim); }
.quotes-num { font-family: var(--font-mono); font-weight: var(--fw-medium); }

/* ============================== DÉTAIL ============================== */
.quote-detail__back { display: inline-flex; }
.quote-doc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-6); max-width: 760px; }
.quote-doc__head { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.quote-doc__from { display: flex; align-items: center; gap: var(--sp-3); }
.quote-doc__logo { width: 44px; height: 44px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; font-family: var(--font-title); font-weight: var(--fw-bold); background: var(--brand-grad); color: #fff; }
.quote-doc__org { display: block; font-family: var(--font-title); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.quote-doc__org-sub { display: block; font-size: var(--fs-xs); color: var(--text-dim); }
.quote-doc__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.quote-doc__num { font-family: var(--font-mono); font-weight: var(--fw-semibold); font-size: var(--fs-lg); }
.quote-doc__date { font-size: var(--fs-xs); color: var(--text-dim); }
.quote-doc__status { margin-top: var(--sp-1); }

.quote-doc__client { display: flex; flex-direction: column; gap: var(--sp-1); width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-3); margin-top: var(--sp-4); cursor: pointer; color: inherit; transition: border-color var(--t-fast) var(--ease); }
.quote-doc__client:hover, .quote-doc__client:focus-visible { border-color: var(--border-accent); }
.quote-doc__client-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.quote-doc__client-row { display: flex; align-items: center; gap: var(--sp-3); }
.quote-doc__client-avatar { width: 34px; height: 34px; flex: none; border-radius: var(--r-pill); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); background: var(--accent-soft); color: var(--accent); }
.quote-doc__client-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.quote-doc__client-name { font-weight: var(--fw-semibold); }
.quote-doc__client-sub { font-size: var(--fs-xs); color: var(--text-dim); }
.quote-doc__client-chev { color: var(--text-faint); }
.quote-doc__client-chev svg { width: 18px; height: 18px; }

.quote-doc__title { font-family: var(--font-title); font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: var(--sp-5) 0 var(--sp-3); }

/* Lignes */
.quote-lines { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.quote-lines th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: var(--fw-semibold); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
.quote-lines td { padding: var(--sp-3); border-bottom: 1px solid var(--border); }
.quote-lines .cell-right { text-align: right; }
.quote-lines__total-lbl { color: var(--text-dim); font-weight: var(--fw-semibold); padding-top: var(--sp-4); }
.quote-lines__total { font-family: var(--font-title); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--accent); padding-top: var(--sp-4); }

.quote-signed { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); background: var(--success-bg); border: 1px solid var(--success-border); border-radius: var(--r-sm); padding: var(--sp-3); color: var(--success); font-weight: var(--fw-medium); }
.quote-signed svg { width: 18px; height: 18px; }
.quote-sentvia { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-dim); }
.quote-sentvia svg { width: 15px; height: 15px; color: var(--success); }
.quote-sentvia .badge { vertical-align: middle; }

/* Actions */
.quote-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); max-width: 760px; }
.quote-actions__done { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--success); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.quote-actions__done svg { width: 16px; height: 16px; }

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .quote-doc { padding: var(--sp-4); }
  .quote-doc__meta { align-items: flex-start; }
  .quote-actions { flex-direction: column; align-items: stretch; }
  .quotes .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .quotes .data-table, .quotes .data-table tbody, .quotes .data-table tr, .quotes .data-table td { display: block; width: 100%; }
  .quotes .data-table tr { border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: var(--sp-2); padding: var(--sp-2); }
  .quotes .data-table td { text-align: left !important; padding: var(--sp-1) var(--sp-2); border: none; }
}