/* ==========================================================================
   Pages « Demandes de matériel » : request-parts, my-requests, notifications.
   Utilise uniquement les jetons du Design System (ins-tokens.css).
   ========================================================================== */

/* ---------- Onglets d'état avec compteurs (défilement horizontal sur mobile) ---------- */
.rq-tabs { display: flex; flex-wrap: nowrap; gap: .35rem; overflow-x: auto; padding-bottom: .25rem; margin-bottom: .75rem; scrollbar-width: thin; }
.rq-tabs .nav-link { white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: 999px; padding: .35rem .85rem; font-size: var(--fs-sm); }
.rq-tabs .nav-link:hover { border-color: var(--color-border-strong); }
.rq-tabs .nav-link.active { background: var(--ins-orange-700); border-color: var(--ins-orange-700); color: var(--ins-neutral-0); }
.rq-tabs .rq-count { min-width: 1.6rem; padding: 0 .4rem; border-radius: 999px; background: var(--ins-neutral-100); color: var(--ins-neutral-700); font-size: var(--fs-caption); font-weight: 700; line-height: 1.4rem; text-align: center; font-variant-numeric: tabular-nums; }
.rq-tabs .nav-link.active .rq-count { background: rgba(255, 255, 255, .22); color: var(--ins-neutral-0); }

/* ---------- Ancienneté : ligne ambre > 2 j, rouge > délai cible ---------- */
table.dataTable tr.ins-row-late > td { background-color: var(--ins-amber-50) !important; }
table.dataTable tr.ins-row-urgent > td { background-color: var(--ins-red-50) !important; }
.rq-age { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rq-age.is-late { color: var(--ins-amber-600); font-weight: 600; }
.rq-age.is-urgent { color: var(--ins-red-600); font-weight: 700; }
.rq-flag { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--fs-caption); color: var(--ins-red-600); font-weight: 600; white-space: nowrap; }

/* ---------- Panneau de traitement d'un lot ---------- */
.rq-part-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.rq-part-head .rq-ref { font-family: var(--font-mono); font-weight: 700; }
.rq-lines th, .rq-lines td { vertical-align: middle; }
.rq-lines .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rq-lines .rq-stock { font-size: var(--fs-caption); color: var(--color-text-muted); white-space: nowrap; }
.rq-lines .rq-stock strong { color: var(--color-text); }
.rq-lines .rq-stock .is-short { color: var(--ins-red-600); }
.rq-lines .ins-qty { min-width: 88px; }
.rq-lines .rq-note { min-width: 140px; }
.rq-lines tr.is-warn > td { background: var(--ins-amber-50); }
.rq-line-warn { font-size: var(--fs-caption); color: var(--ins-amber-600); }
.rq-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.rq-actions .btn { min-height: 44px; }
.rq-section-title { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: 700; margin: 1.25rem 0 .5rem; }

/* Lignes du panneau en cartes sous 768 px */
@media (max-width: 767.98px) {
  .rq-lines thead { display: none; }
  .rq-lines, .rq-lines tbody, .rq-lines tr, .rq-lines td { display: block; width: 100%; }
  .rq-lines tr { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: .5rem .75rem; margin-bottom: .6rem; }
  .rq-lines td { border: 0; padding: .2rem 0; text-align: left !important; }
  .rq-lines td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 9.5rem; color: var(--color-text-muted); font-size: var(--fs-caption); }
  .rq-lines tfoot { display: none; }
  .rq-lines .ins-qty, .rq-lines .rq-note { width: 100%; }
}

/* ---------- Catalogue (nouvelle demande) ---------- */
.rq-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.rq-product { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); display: flex; flex-direction: column; overflow: hidden; }
.rq-product__img { aspect-ratio: 16 / 9; background: var(--ins-neutral-50); display: grid; place-items: center; color: var(--ins-orange-600); font-size: 1.8rem; }
.rq-product__img img { width: 100%; height: 100%; object-fit: cover; }
.rq-product__body { padding: .6rem .7rem; flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.rq-product__name { font-weight: 600; font-size: var(--fs-sm); line-height: 1.25; }
.rq-product__meta { font-size: var(--fs-caption); color: var(--color-text-muted); }
.rq-product .btn { min-height: 44px; margin-top: auto; }
.rq-product.in-cart { border-color: var(--ins-green-500); box-shadow: 0 0 0 1px var(--ins-green-500) inset; }
.rq-catalog-list .list-group-item { display: flex; align-items: center; gap: .75rem; }
.rq-catalog-list .btn { min-height: 44px; min-width: 44px; }

.rq-cart { position: sticky; top: 0; }
.rq-cart-line { border-bottom: 1px solid var(--color-border); padding: .55rem 0; }
.rq-cart-line:last-child { border-bottom: 0; }
.rq-cart-line .ins-qty { width: 100px; }
.rq-cart-line .btn-icon { min-width: 40px; min-height: 40px; }
.rq-cart-fab { position: fixed; right: 16px; bottom: 16px; z-index: 1060; border-radius: 999px; min-height: 48px; box-shadow: var(--shadow-lg); }

/* ---------- Détail d'une demande (agent) ---------- */
.rq-stepper-wrap { overflow-x: auto; padding: .25rem 0 .5rem; }
.rq-stepper-wrap .ins-stepper li small { display: block; font-weight: 400; color: var(--color-text-muted); font-size: .7rem; margin-top: 2px; }
.ins-timeline__dot.tone-success { background: var(--ins-green-500); }
.ins-timeline__dot.tone-danger { background: var(--ins-red-600); }
.ins-timeline__dot.tone-warning { background: var(--ins-amber-500); }
.ins-timeline__dot.tone-info { background: var(--ins-blue-600); }
.ins-timeline__dot.tone-primary { background: var(--ins-orange-600); }
.ins-timeline__dot.tone-violet { background: var(--ins-violet-600); }
.ins-timeline__dot.tone-neutral { background: var(--ins-neutral-300); }
.rq-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.rq-totals > div { background: var(--ins-neutral-50); border-radius: var(--radius-md); padding: .6rem .75rem; }
.rq-totals .lbl { font-size: var(--fs-caption); color: var(--color-text-muted); }
.rq-totals .val { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* Signature */
.rq-signature { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--ins-neutral-0); width: 100%; height: 180px; touch-action: none; cursor: crosshair; display: block; }

/* ---------- Notifications ---------- */
.rq-notif { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; }
.rq-notif.is-unread { background: var(--ins-orange-50); }
.rq-notif__icon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ins-neutral-100); color: var(--ins-neutral-600); }
.rq-notif__icon.tone-success { background: var(--ins-green-50); color: var(--ins-green-600); }
.rq-notif__icon.tone-danger { background: var(--ins-red-50); color: var(--ins-red-600); }
.rq-notif__icon.tone-warning { background: var(--ins-amber-50); color: var(--ins-amber-600); }
.rq-notif__icon.tone-info { background: var(--ins-blue-50); color: var(--ins-blue-600); }
.rq-notif__icon.tone-primary { background: var(--ins-orange-50); color: var(--ins-orange-700); }
.rq-notif__title { font-weight: 600; }
.rq-notif.is-unread .rq-notif__title::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ins-orange-600); margin-left: .4rem; vertical-align: middle; }
.rq-notif__meta { font-size: var(--fs-caption); color: var(--color-text-muted); }
.rq-notif__actions { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .4rem; }
.rq-notif__actions .btn { min-height: 36px; }