/* Tokens du design "Réglages du Rali" (Claude Design), scopés à .rs-root
   pour ne pas entrer en collision avec le DashboardLayout (Tailwind).
   Source : kiclic/colors_and_type.css (:root). La police Rubik est déjà
   chargée par le site, on ne réimporte pas les @font-face ici. */
.rs-root {
  /* Brand */
  --k-blue:   #5B8DEF;
  --k-violet: #B968C7;
  --k-pink:   #E94E8B;
  --k-yellow: #EAB308;
  --k-orange: #F59E0B;
  --k-blue-glow:   rgba(91, 141, 239, 0.45);
  --k-violet-glow: rgba(185, 104, 199, 0.45);
  --k-pink-glow:   rgba(233, 78, 139, 0.45);

  /* Gradients */
  --k-gradient: linear-gradient(135deg, var(--k-blue) 0%, var(--k-violet) 50%, var(--k-pink) 100%);
  --k-gradient-h: linear-gradient(90deg, var(--k-blue) 0%, var(--k-violet) 50%, var(--k-pink) 100%);

  /* Neutrals — DARK (le dashboard web est dark) */
  --bg:         #0A0A0A;
  --bg-elev-1:  #111111;
  --bg-elev-2:  #1A1A1A;
  --border:     #222222;
  --border-soft: rgba(255,255,255,0.08);
  --surface-tint:        rgba(255,255,255,0.08);
  --surface-tint-light:  rgba(255,255,255,0.05);
  --surface-tint-strong: rgba(255,255,255,0.12);

  --fg:         #FFFFFF;
  --fg-secondary: #9CA3AF;
  --fg-muted:     #6B7280;
  --fg-on-grad:   #FFFFFF;

  --success: #10B981;
  --warning: #F59E0B;
  --error:   #EF4444;

  /* Shadows */
  --shadow-button:      0 8px 20px rgba(233,78,139,0.30);
  --shadow-glow-violet: 0 8px 32px rgba(185,104,199,0.35);

  /* Type */
  --font-sans: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Rubik", system-ui, sans-serif;
  --font-num: "Rubik", sans-serif;

  /* Animation */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 180ms;
  --t-base: 280ms;
  --t-slow: 480ms;

  /* ===== Layout (équivalent .k-main : colonne pleine hauteur, éditeur scrollable) ===== */
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  /* En mode manager, on réserve la hauteur du bandeau vert (--ma-bar). */
  height: calc(100vh - var(--ma-bar, 0px));
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--fg);
}

/* La carte Leaflet et les composants du design utilisent box-sizing border-box. */
.rs-root *, .rs-root *::before, .rs-root *::after { box-sizing: border-box; }

/* Les overlays (drawer, sheets, modales, toast) sont rendus à l'intérieur de
   .rs-root pour hériter des tokens, mais doivent couvrir tout l'écran. On les
   laisse en position:fixed (déjà dans rali-settings.css). */

/* Responsive : sous lg, la sidebar du dashboard passe en overlay et #dash-main
   n'a plus de padding-left. On garde la hauteur pleine. */
@media (max-width: 1024px) {
  .rs-root { height: calc(100vh - 53px - var(--ma-bar, 0px)); }
}

/* ===== Indicateur de sauvegarde : 3 points sautillants pendant l'enregistrement ===== */
/* Par défaut (et en "Enregistré") : le checkmark est visible, les points cachés. */
.rs-root .rs-save .ic .dots { display: none; align-items: center; gap: 3px; }
.rs-root .rs-save .ic .dots i { width: 4px; height: 4px; border-radius: 50%; display: block; animation: rsSaveDot 0.9s ease-in-out infinite; }
/* Les 3 points reprennent les couleurs du dégradé de l'app (bleu → violet → rose). */
.rs-root .rs-save .ic .dots i:nth-child(1) { background: #5B8DEF; }
.rs-root .rs-save .ic .dots i:nth-child(2) { background: #B968C7; animation-delay: 0.15s; }
.rs-root .rs-save .ic .dots i:nth-child(3) { background: #E94E8B; animation-delay: 0.30s; }
/* Pendant l'enregistrement : on stoppe la rotation, on masque le checkmark et on
   affiche les points qui sautillent. Le texte passe en dégradé. */
.rs-root .rs-save.saving .ic { animation: none; width: auto; }
.rs-root .rs-save.saving .ic svg { display: none; }
.rs-root .rs-save.saving .ic .dots { display: inline-flex; }
.rs-root .rs-save.saving #rsSaveTxt {
  background: var(--k-gradient-h);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@keyframes rsSaveDot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* ===== Bouton "Voir plus / Réduire" des catégories ===== */
.rs-root .rs-cat.rs-cat-more { justify-content: center; gap: 7px; background: transparent; border-style: dashed; color: var(--fg-secondary); font-weight: 700; }
.rs-root .rs-cat.rs-cat-more:hover { transform: translateY(-2px); border-color: rgba(185,104,199,0.4); color: var(--fg); }
.rs-root .rs-cat.rs-cat-more .em { display: inline-flex; }
.rs-root .rs-cat.rs-cat-more .em svg { width: 16px; height: 16px; stroke-width: 2.2; display: block; }

/* ===== Mascotte sous la liste des réglages (colonne de gauche) ===== */
/* La carte des sections occupe le haut (et défile si besoin) ; la mascotte
   est ancrée en dessous, en version compacte adaptée à la largeur étroite. */
.rs-root .rs-nav .rs-nav-card { flex: 1 1 auto; min-height: 0; }
.rs-root .rs-nav .rs-greet { flex: 0 0 auto; margin: 12px 0 0; gap: 9px; }
.rs-root .rs-nav .rs-greet .avatar { width: 36px; height: 36px; border-radius: 11px; }
.rs-root .rs-nav .rs-greet .bubble { padding: 9px 11px; border-radius: 4px 14px 14px 14px; }
.rs-root .rs-nav .rs-greet .bubble .name { font-size: 10.5px; margin-bottom: 2px; }
.rs-root .rs-nav .rs-greet .bubble .msg { font-size: 12px; line-height: 1.4; }

/* ===== Mode clair ===== */
/* Le design est sombre par défaut ; ici on fournit les valeurs claires (issues de
   colors_and_type.css) quand le site est en thème clair (html[data-theme="light"]).
   La feuille du design utilisant majoritairement les tokens, ça bascule l'essentiel. */
html[data-theme="light"] .rs-root {
  --bg:         #F2F2F7;
  --bg-elev-1:  #FFFFFF;
  --bg-elev-2:  #F4F4F7;
  --border:     #E5E5EA;
  --border-soft: rgba(0,0,0,0.08);
  --surface-tint:        rgba(0,0,0,0.05);
  --surface-tint-light:  rgba(0,0,0,0.03);
  --surface-tint-strong: rgba(0,0,0,0.06);
  --fg:         #0A0A0A;
  --fg-secondary: #4B5563;
  --fg-muted:     #6B7280;
}
/* Quelques teintes blanches codées en dur dans rali-settings.css (overlays/pistes)
   deviennent invisibles sur fond clair → on les repasse en teintes sombres. */
html[data-theme="light"] .rs-root .rs-nav-head .bar,
html[data-theme="light"] .rs-root .rs-track,
html[data-theme="light"] .rs-root .rs-switch,
html[data-theme="light"] .rs-root .rs-pl-btn { background: rgba(0,0,0,0.06); }
html[data-theme="light"] .rs-root .rs-nav-item:hover,
html[data-theme="light"] .rs-root .rs-cat:hover,
html[data-theme="light"] .rs-root .rs-chip:hover { background: rgba(0,0,0,0.04); }
/* Carte de localisation : fond clair + pastilles/overlays lisibles en thème clair. */
html[data-theme="light"] .rs-root .rs-loc-body,
html[data-theme="light"] .rs-root .lm-leaflet { background: #E8E8EE; }
html[data-theme="light"] .rs-root .lm-radius-chip,
html[data-theme="light"] .rs-root .lm-hint { background: rgba(255,255,255,0.85); }
html[data-theme="light"] .rs-root .lm-tilewarn { background: linear-gradient(180deg, rgba(240,240,245,0.86), rgba(240,240,245,0.96)); }