/* ── HALO 50 %  BLEU → VIOLET ── */
:root {
  --primary: #1744b1;
  --primary-bg: #e8efff;
  --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body{
    min-height:100dvh;
    margin:0;
    font-family:var(--font-ui);
  
    /* halo ≈ 50 % du rayon ; bordures toujours blanches */
    background:radial-gradient(
       circle at 50% 50%,
       rgba(150,200,255,0.15) 0%,    /* bleu glacier – centre */
       rgba(165,190,255,0.15) 30%,   /* bleu léger */
       rgba(185,180,255,0.15) 45%,   /* indigo pastel */
       rgba(205,165,255,0.15) 60%,   /* violet pastel */
       #ffffff 70%                   /* au-delà de 70 % : blanc pur */
    );
  }
  
  
  
*{
  font-optical-sizing: auto;
  font-style: normal;
}
#app {
    display: flex;
    flex-direction: column;
    position: fixed;
    width: calc(100% - 60px);
    top: 30px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-color: #86b6cd #f1f1f1;
    scrollbar-width: thin;
    
    font-family: var(--font-ui);
    margin: 30px;
    border: 1.5px solid #e4dfff;
    border-radius: 7.5px;
    border-bottom: none;
    /*background: #f7f7f7;*/
    
}

@media (max-width: 1350px) {
  #app {
    top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 40px !important;
  }
}

#app::-webkit-scrollbar {
  width: 10px;
}

#app::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 999px;
}

#app::-webkit-scrollbar-thumb {
  background: #86b6cd;
  border-radius: 999px;
}

#app::-webkit-scrollbar-thumb:hover {
  background: #5d8a9f;
}

.info-icon-css {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16.5px;
  height: 16.5px;
  border-radius: 50%;
  background: #c2bdff;        /* Violet clair */
  color: #fff;                /* Blanc pour le "i" */
  font-family: Arial, sans-serif;
  font-size: 10.5px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transition: box-shadow 0.14s, background 0.14s;
}
.info-icon-css:hover {
  background: #948eff;
}
/* Conteneur du diagramme */
.diagram-container {
  position: relative;
  border: 1.5px solid #eef0f3;
  border-radius: 7.5px;
  background: linear-gradient(#fff, #fbfbfd);
  overflow: hidden;
}

/* grille légère (si activée par ton JS, ça s’intègre bien) */
.diagram-container {
  background-size: 36px 36px;
  background-image:
    linear-gradient(to right, rgba(17,24,39,.06) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, rgba(17,24,39,.06) 1.5px, transparent 1.5px);
}

/* billets (statuts) */
.diagram-status {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border-radius: 7.5px;            /* ton JS peut écraser avec st.borderRadius si tu veux */
  border: 1.5px solid rgba(255,255,255,.8);

  backdrop-filter: saturate(1.1);
  user-select: none;
  cursor: grab;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

/* halo subtil pour donner du relief */
.diagram-status::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  pointer-events: none;
}

/* interaction */
.diagram-status:hover {
  transform: translateY(-3px);

}

.diagram-status:active { cursor: grabbing; }

/* état sélectionné (cliqué) */
.diagram-status.selected {
  outline: 3px solid #f6eeff;
}

/* typographie uniforme */
.diagram-status {
  color: #111827;                 /* noir doux */
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* SVG: les chemins seront jolis par défaut (sécurité si JS ne le met pas) */
#diagram-bg-svg path {
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .75;
}

/* ===== INPUT / SELECT / TEXTAREA (Design System) ===== */
input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
  --control-radius: 5px;
  --control-border: rgba(148, 142, 255, 0.28);
  --control-border-hover: rgba(148, 142, 255, 0.42);
  --control-border-focus: rgba(23, 68, 177, 0.55);
  --control-bg: rgba(255, 255, 255, 0.92);
  --control-bg-focus: #ffffff;
  --control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --control-focus-ring: rgba(148, 142, 255, 0.35);
  --control-placeholder: rgba(71, 85, 105, 0.55);

  border: 1px solid var(--control-border) !important;
  border-radius: var(--control-radius) !important;
  background: var(--control-bg) !important;
  box-shadow: var(--control-shadow);
  box-sizing: border-box;
  color: #1f2937 !important;
  font: inherit;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

input:not([type])::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
input[type="number"]::placeholder,
input[type="date"]::placeholder,
input[type="time"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="month"]::placeholder,
input[type="week"]::placeholder,
textarea::placeholder {
  color: var(--control-placeholder);
}

input:not([type]):hover:not(:disabled),
input[type="text"]:hover:not(:disabled),
input[type="email"]:hover:not(:disabled),
input[type="password"]:hover:not(:disabled),
input[type="search"]:hover:not(:disabled),
input[type="tel"]:hover:not(:disabled),
input[type="url"]:hover:not(:disabled),
input[type="number"]:hover:not(:disabled),
input[type="date"]:hover:not(:disabled),
input[type="time"]:hover:not(:disabled),
input[type="datetime-local"]:hover:not(:disabled),
input[type="month"]:hover:not(:disabled),
input[type="week"]:hover:not(:disabled),
textarea:hover:not(:disabled),
select:hover:not(:disabled) {
  border-color: var(--control-border-hover) !important;
}

input:not([type]):focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
textarea:focus,
select:focus {
  border-color: var(--control-border-focus) !important;
  background: var(--control-bg-focus) !important;
  box-shadow: var(--control-shadow), 0 0 0 3px var(--control-focus-ring);
}

input:not([type]):disabled,
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="url"]:disabled,
input[type="number"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
input[type="datetime-local"]:disabled,
input[type="month"]:disabled,
input[type="week"]:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

textarea {
  resize: vertical;
  min-height: 48px;
}

select {
  cursor: pointer;
}

body.dark-mode input:not([type]),
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="url"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode input[type="datetime-local"],
body.dark-mode input[type="month"],
body.dark-mode input[type="week"],
body.dark-mode textarea,
body.dark-mode select,
html.dark-mode body input:not([type]),
html.dark-mode body input[type="text"],
html.dark-mode body input[type="email"],
html.dark-mode body input[type="password"],
html.dark-mode body input[type="search"],
html.dark-mode body input[type="tel"],
html.dark-mode body input[type="url"],
html.dark-mode body input[type="number"],
html.dark-mode body input[type="date"],
html.dark-mode body input[type="time"],
html.dark-mode body input[type="datetime-local"],
html.dark-mode body input[type="month"],
html.dark-mode body input[type="week"],
html.dark-mode body textarea,
html.dark-mode body select,
html[data-theme="dark"] body input:not([type]),
html[data-theme="dark"] body input[type="text"],
html[data-theme="dark"] body input[type="email"],
html[data-theme="dark"] body input[type="password"],
html[data-theme="dark"] body input[type="search"],
html[data-theme="dark"] body input[type="tel"],
html[data-theme="dark"] body input[type="url"],
html[data-theme="dark"] body input[type="number"],
html[data-theme="dark"] body input[type="date"],
html[data-theme="dark"] body input[type="time"],
html[data-theme="dark"] body input[type="datetime-local"],
html[data-theme="dark"] body input[type="month"],
html[data-theme="dark"] body input[type="week"],
html[data-theme="dark"] body textarea,
html[data-theme="dark"] body select {
  --control-border: var(--border-dark, rgba(255, 255, 255, 0.08));
  --control-border-hover: var(--border-dark-strong, rgba(255, 255, 255, 0.16));
  --control-border-focus: rgba(122, 133, 255, 0.55);
  --control-bg: var(--surface-2, rgba(255, 255, 255, 0.06));
  --control-bg-focus: var(--surface-3, rgba(255, 255, 255, 0.08));
  --control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --control-focus-ring: rgba(122, 133, 255, 0.35);
  --control-placeholder: rgba(233, 235, 242, 0.5);
  color: var(--text-main, #e9ebf2) !important;
}

/* ===== CHECKBOX (Design System) ===== */
input[type="checkbox"] {
  --checkbox-size: 18px;
  --checkbox-check-size: 12px;
  --checkbox-radius: 4px;
  --checkbox-border: rgba(17, 24, 39, 0.28);
  --checkbox-bg: #ffffff;
  --checkbox-accent: #1744b1;
  --checkbox-focus: rgba(148, 142, 255, 0.35);

  -webkit-appearance: none;
  appearance: none;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  background: var(--checkbox-bg);
  box-sizing: border-box;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

input[type="checkbox"]:hover:not(:disabled) {
  border-color: rgba(17, 24, 39, 0.42);
}

input[type="checkbox"]:active:not(:disabled) {
  transform: translateY(0.5px);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--checkbox-focus);
}

input[type="checkbox"]:checked {
  background: var(--checkbox-accent);
  border-color: var(--checkbox-accent);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2016%2012%27%3E%3Cpath%20d%3D%27M1%206.5%20L5.5%2011%20L15%201%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--checkbox-check-size) var(--checkbox-check-size);
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Force le design-system si un composant redéfinit la checkbox */
body .resource-checkbox input[type="checkbox"] {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  background: var(--checkbox-bg);
}

body.dark-mode input[type="checkbox"],
html.dark-mode body input[type="checkbox"],
html[data-theme="dark"] body input[type="checkbox"] {
  --checkbox-border: var(--border-dark-strong, rgba(255, 255, 255, 0.18));
  --checkbox-bg: var(--surface-2, rgba(255, 255, 255, 0.06));
  --checkbox-focus: rgba(122, 133, 255, 0.35);
}

@media (forced-colors: active) {
  input[type="checkbox"] {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none;
  }
}