/* Tokens des designs "Reprogrammer un Rali" + "Dupliquer un Rali" (Claude Design),
   scopés à .rb-root pour ne pas entrer en collision avec le DashboardLayout (Tailwind).
   Source : kiclic/colors_and_type.css + reschedule.css.
   Thème : on suit le système du site (html[data-theme="light"] = clair ; absence
   d'attribut = sombre, comme le reste du dashboard). La police Rubik est déjà
   chargée par le site, on ne réimporte pas les @font-face ici. */
.rb-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%);
  --k-gradient-error: linear-gradient(90deg, #EF4444 0%, #DC2626 100%);

  /* Neutrals — DARK (défaut, comme le dashboard) */
  --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-card:     0 4px 14px rgba(0,0,0,0.45);
  --shadow-card-dk:  0 4px 14px rgba(0,0,0,0.45);
  --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, stage 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);
  background: var(--bg);
}

.rb-root *, .rb-root *::before, .rb-root *::after { box-sizing: border-box; }

/* Pickers natifs (date/time) en sombre par défaut. */
.rb-root input[type="time"], .rb-root input[type="date"] { color-scheme: dark; }

/* Sous lg, la sidebar du dashboard passe en overlay et la topbar mobile fait 53px. */
@media (max-width: 1024px) {
  .rb-root { height: calc(100vh - 53px - var(--ma-bar, 0px)); }
}

/* =====================================================================
   THÈME CLAIR — surcharge des tokens quand html[data-theme="light"]
   ===================================================================== */
html[data-theme="light"] .rb-root {
  --bg:        #F4F4F8;
  --bg-elev-1: #FFFFFF;
  --bg-elev-2: #F3F3F8;
  --border:    #E5E5EA;
  --border-soft: rgba(15,17,28,0.08);
  --surface-tint:        rgba(15,17,28,0.05);
  --surface-tint-light:  rgba(15,17,28,0.035);
  --surface-tint-strong: rgba(15,17,28,0.07);
  --fg:           #14141A;
  --fg-secondary: #565663;
  --fg-muted:     #8A8A95;
  --shadow-card:    0 6px 20px rgba(20,18,40,0.08);
  --shadow-card-dk: 0 8px 24px rgba(20,18,40,0.10);
}
html[data-theme="light"] .rb-root input[type="time"],
html[data-theme="light"] .rb-root input[type="date"] { color-scheme: light; }

/* Quelques teintes "dark-only" du design qui doivent rester par défaut (sombre)
   et basculer en clair sous le thème clair. */
.rb-root .rb-delta span { color: #D9B6E8; }
html[data-theme="light"] .rb-root .rb-delta span { color: var(--k-violet); }
.rb-root .rb-greet .bubble .name .tag { color: #E0BFFF; }
html[data-theme="light"] .rb-root .rb-greet .bubble .name .tag { color: #B968C7; }