/* ============================================================================
   RaceStrat — Composants (patterns CSS réutilisables)
   S'appuie sur tokens.css (variables --rs-*). Préfixe .rs- pour éviter
   toute collision avec les styles existants de l'app.
   ========================================================================== */

/* ---- Boutons -------------------------------------------------------------- */
.rs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--rs-font-ui);font-weight:600;font-size:var(--rs-text-sm);line-height:1;
  height:44px;min-width:120px;padding:0 20px;border-radius:var(--rs-radius-pill);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:transform var(--rs-dur-2) var(--rs-ease), box-shadow var(--rs-dur-2) var(--rs-ease), background var(--rs-dur-2) var(--rs-ease), border-color var(--rs-dur-2) var(--rs-ease);}
.rs-btn--stand{height:52px;font-size:var(--rs-text-base);padding:0 26px}
.rs-btn--block{width:100%}
.rs-btn--primary{background:var(--rs-accent-grad);color:var(--rs-on-accent);box-shadow:var(--rs-shadow-accent)}
.rs-btn--primary:hover{transform:translateY(-1px)}
.rs-btn--secondary{background:transparent;color:var(--rs-text-1);border-color:var(--rs-text-3)}
.rs-btn--secondary:hover{border-color:var(--rs-accent);color:var(--rs-accent)}
.rs-btn--ghost{background:transparent;color:var(--rs-text-2);min-width:0}
.rs-btn--ghost:hover{color:var(--rs-text-1);background:var(--rs-bg-2)}
.rs-btn--danger{background:transparent;color:var(--rs-danger);border-color:var(--rs-danger)}
.rs-btn--danger:hover{background:var(--rs-danger);color:var(--rs-bg-1)}
.rs-btn:disabled,.rs-btn.is-disabled{opacity:.5;pointer-events:none;box-shadow:none;transform:none}
.rs-btn.is-loading{color:transparent!important;pointer-events:none;position:relative}
.rs-btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;color:var(--rs-on-accent);animation:rs-spin .7s linear infinite}
.rs-btn--secondary.is-loading::after,.rs-btn--ghost.is-loading::after,.rs-btn--danger.is-loading::after{color:var(--rs-text-1)}
@keyframes rs-spin{to{transform:rotate(360deg)}}

/* ---- Champs --------------------------------------------------------------- */
.rs-field{display:block;margin-bottom:var(--rs-space-4)}
.rs-label{display:block;font-family:var(--rs-font-ui);font-weight:600;font-size:var(--rs-text-sm);color:var(--rs-text-1);margin-bottom:6px}
.rs-label .rs-opt{font-weight:400;color:var(--rs-text-3)}
.rs-input,.rs-select,.rs-textarea{width:100%;font-family:var(--rs-font-ui);font-size:var(--rs-text-base);color:var(--rs-text-1);
  background:var(--rs-bg-1);border:1px solid var(--rs-text-3);border-radius:var(--rs-radius-md);
  padding:0 14px;height:44px;transition:border-color var(--rs-dur-2) var(--rs-ease), box-shadow var(--rs-dur-2) var(--rs-ease)}
.rs-textarea{height:auto;padding:12px 14px;line-height:1.45;resize:vertical}
.rs-input::placeholder,.rs-textarea::placeholder{color:var(--rs-text-3)}
.rs-input:hover,.rs-select:hover,.rs-textarea:hover{border-color:var(--rs-text-2)}
.rs-input:focus,.rs-select:focus,.rs-textarea:focus{outline:none;border-color:var(--rs-accent);box-shadow:0 0 0 3px var(--rs-accent-soft)}
.rs-help{font-size:var(--rs-text-xs);color:var(--rs-text-3);margin-top:5px}
.rs-field.is-error .rs-input,.rs-field.is-error .rs-select,.rs-field.is-error .rs-textarea{border-color:var(--rs-danger)}
.rs-error{font-size:var(--rs-text-xs);color:var(--rs-danger);margin-top:5px;display:flex;align-items:center;gap:5px}
.rs-input-unit{position:relative}
.rs-input-unit .rs-u{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--rs-text-3);font-size:var(--rs-text-sm);pointer-events:none}
.rs-input-unit .rs-input{padding-right:48px}

/* Case à cocher & interrupteur */
.rs-check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:var(--rs-text-sm);color:var(--rs-text-1);min-height:var(--rs-tap)}
.rs-check input{width:20px;height:20px;accent-color:var(--rs-accent);cursor:pointer}
.rs-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;min-height:var(--rs-tap)}
.rs-switch input{position:absolute;opacity:0;pointer-events:none}
.rs-switch .rs-track{width:42px;height:24px;border-radius:999px;background:var(--rs-bg-2);border:1px solid var(--rs-text-3);position:relative;transition:var(--rs-dur-2) var(--rs-ease)}
.rs-switch .rs-track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--rs-text-2);transition:var(--rs-dur-2) var(--rs-ease)}
.rs-switch input:checked + .rs-track{background:var(--rs-accent);border-color:transparent}
.rs-switch input:checked + .rs-track::after{transform:translateX(18px);background:var(--rs-on-accent)}
.rs-switch input:focus-visible + .rs-track{outline:2px solid var(--rs-accent);outline-offset:2px}

/* ---- Carte / panneau ------------------------------------------------------ */
.rs-card{background:var(--rs-bg-1);border:1px solid var(--rs-border);border-radius:var(--rs-radius-lg);padding:var(--rs-space-6);box-shadow:var(--rs-shadow)}
.rs-card__title{font-family:var(--rs-font-title);font-weight:700;font-size:var(--rs-text-sm);text-transform:uppercase;letter-spacing:.07em;color:var(--rs-text-3);margin:0 0 var(--rs-space-4)}

/* ---- Badge de statut (couleur + icône + libellé) -------------------------- */
.rs-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--rs-font-ui);font-weight:600;font-size:var(--rs-text-xs);
  padding:5px 11px;border-radius:var(--rs-radius-pill);border:1px solid;line-height:1.1}
.rs-badge .rs-ico{font-size:10px;line-height:1}
.rs-badge--ok{color:var(--rs-success);border-color:var(--rs-success);background:color-mix(in srgb,var(--rs-success) 10%,transparent)}
.rs-badge--warn{color:var(--rs-warning);border-color:var(--rs-warning);background:color-mix(in srgb,var(--rs-warning) 12%,transparent)}
.rs-badge--bad{color:var(--rs-danger);border-color:var(--rs-danger);background:color-mix(in srgb,var(--rs-danger) 12%,transparent)}
.rs-badge--info{color:var(--rs-accent);border-color:var(--rs-accent);background:var(--rs-accent-soft)}

/* ---- Jauge de seuil (plancher / plafond) ---------------------------------- */
/* usage : temps de conduite d'un pilote entre un mini et un maxi */
.rs-gauge{display:block}
.rs-gauge__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;gap:10px}
.rs-gauge__name{font-family:var(--rs-font-ui);font-weight:600;font-size:var(--rs-text-sm);color:var(--rs-text-1)}
.rs-gauge__val{font-family:var(--rs-font-mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:var(--rs-text-sm)}
.rs-gauge__val.is-ok{color:var(--rs-success)} .rs-gauge__val.is-warn{color:var(--rs-warning)} .rs-gauge__val.is-bad{color:var(--rs-danger)}
.rs-gauge__track{position:relative;height:12px;border-radius:999px;background:var(--rs-bg-2);border:1px solid var(--rs-border);overflow:hidden}
.rs-gauge__fill{position:absolute;inset:0 auto 0 0;height:100%;border-radius:999px;transition:width var(--rs-dur-3) var(--rs-ease)}
.rs-gauge__fill.is-ok{background:var(--rs-success)} .rs-gauge__fill.is-warn{background:var(--rs-warning)} .rs-gauge__fill.is-bad{background:var(--rs-danger)}
.rs-gauge__mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--rs-text-1);opacity:.55}
.rs-gauge__scale{display:flex;justify-content:space-between;margin-top:5px;font-size:var(--rs-text-xs);color:var(--rs-text-3)}

/* ---- Compteur chrono ------------------------------------------------------ */
.rs-chrono{font-family:var(--rs-font-mono);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--rs-text-1);font-size:var(--rs-text-3xl)}
.rs-chrono--lg{font-size:clamp(2.5rem,7vw,4rem)}
.rs-chrono.is-warn{color:var(--rs-warning)} .rs-chrono.is-bad{color:var(--rs-danger)} .rs-chrono.is-ok{color:var(--rs-success)}
.rs-chrono__label{font-family:var(--rs-font-title);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:var(--rs-text-xs);color:var(--rs-text-3)}

/* ---- Tableau de données --------------------------------------------------- */
.rs-table-wrap{overflow-x:auto;border:1px solid var(--rs-border);border-radius:var(--rs-radius-lg);background:var(--rs-bg-1)}
.rs-table{width:100%;border-collapse:collapse;font-size:var(--rs-text-sm)}
.rs-table th,.rs-table td{padding:0 14px;height:44px;text-align:left;border-bottom:1px solid var(--rs-border);white-space:nowrap}
.rs-table thead th{position:sticky;top:0;background:var(--rs-bg-2);font-family:var(--rs-font-title);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;font-size:var(--rs-text-xs);color:var(--rs-text-3);z-index:1}
.rs-table tbody tr:last-child td{border-bottom:0}
.rs-table tbody tr:hover td{background:var(--rs-bg-2)}
.rs-table .rs-num{text-align:right;font-family:var(--rs-font-mono);font-variant-numeric:tabular-nums}
.rs-table .rs-me td{background:var(--rs-accent-soft)}
.rs-table--freeze th:first-child,.rs-table--freeze td:first-child{position:sticky;left:0;background:var(--rs-bg-1)}
.rs-table--freeze thead th:first-child{background:var(--rs-bg-2)}

/* ---- Bandeau / toast ------------------------------------------------------ */
.rs-banner{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--rs-radius-md);
  border:1px solid var(--rs-border);background:var(--rs-bg-1);color:var(--rs-text-1);font-size:var(--rs-text-sm)}
.rs-banner .rs-ico{flex:none;margin-top:1px}
.rs-banner--info{border-left:3px solid var(--rs-accent);background:var(--rs-accent-soft)}
.rs-banner--ok{border-left:3px solid var(--rs-success)}
.rs-banner--warn{border-left:3px solid var(--rs-warning)}
.rs-banner--bad{border-left:3px solid var(--rs-danger)}
.rs-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* ---- Boîte de dialogue ---------------------------------------------------- */
.rs-overlay{position:fixed;inset:0;background:rgba(5,6,10,.6);display:flex;align-items:center;justify-content:center;padding:var(--rs-space-4);z-index:70}
.rs-dialog{background:var(--rs-bg-1);border:1px solid var(--rs-border);border-radius:var(--rs-radius-lg);box-shadow:0 20px 60px rgba(0,0,0,.45);
  max-width:440px;width:100%;padding:var(--rs-space-6)}
.rs-dialog__title{font-family:var(--rs-font-title);font-weight:700;font-size:var(--rs-text-lg);margin:0 0 8px}
.rs-dialog__body{color:var(--rs-text-2);font-size:var(--rs-text-sm);margin:0 0 var(--rs-space-6)}
.rs-dialog__actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ---- État vide & squelette ------------------------------------------------ */
.rs-empty{text-align:center;padding:var(--rs-space-12) var(--rs-space-6);color:var(--rs-text-2)}
.rs-empty .rs-empty__ico{font-size:30px;opacity:.5}
.rs-empty .rs-empty__t{font-family:var(--rs-font-title);font-weight:700;color:var(--rs-text-1);margin:var(--rs-space-3) 0 var(--rs-space-2)}
.rs-skeleton{position:relative;overflow:hidden;background:var(--rs-bg-2);border-radius:var(--rs-radius-sm);height:14px}
.rs-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--rs-text-3) 18%,transparent),transparent);animation:rs-shimmer 1.3s infinite}
@keyframes rs-shimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.rs-skeleton::after{animation:none}.rs-btn.is-loading::after{animation:none}}

/* ---- Barre de navigation / en-tête --------------------------------------- */
.rs-nav{display:flex;align-items:center;gap:var(--rs-space-4);height:64px;padding:0 var(--rs-space-6);
  border-bottom:1px solid var(--rs-border);background:color-mix(in srgb,var(--rs-bg-0) 80%,transparent);backdrop-filter:blur(8px)}
.rs-logo{font-family:var(--rs-font-title);font-size:22px;letter-spacing:-.01em;color:var(--rs-text-1);text-decoration:none;line-height:1}
.rs-logo .r{font-weight:500}.rs-logo .s{font-weight:700}
.rs-logo__desc{display:block;font-family:var(--rs-font-ui);font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--rs-text-3);margin-top:2px}
.rs-nav__spacer{margin-left:auto}