/* ------------------------------------------------------------------
   Kaidan ā€” Sections Settings (Suivi Pro "Apple-like" style)
   Bouton flottant + popup de rƩglages des onglets
   Objectif : aligner lā€™esthĆ©tique sur sections-help.css
------------------------------------------------------------------ */

/* Classe gƩnƩrique de masquage (utilisƩe par le JS) */
.kdn-hidden {
  display: none !important;
}

/* ------------------------------------------------------------------
   Design tokens (alignƩs Help / Suivi Pro)
   - Default = DARK
   - Overrides via [data-theme="light" | "blue"]
------------------------------------------------------------------ */

:root {
  --kss-bg: #0b0c10;
  --kss-surface: rgba(255, 255, 255, 0.06);
  --kss-surface-2: rgba(255, 255, 255, 0.10);
  --kss-border: rgba(255, 255, 255, 0.10);

  --kss-text: rgba(255, 255, 255, 0.92);
  --kss-muted: rgba(255, 255, 255, 0.68);
  --kss-faint: rgba(255, 255, 255, 0.52);

  --kss-accent: #0a84ff;
  --kss-accent-2: #64d2ff;

  --kss-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  --kss-shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.18);
  --kss-outline-shadow: inset 0 0 0 1px var(--kss-border);
  --kss-outline-shadow-strong: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  --kss-divider-shadow: inset 0 -1px 0 var(--kss-border);
  --kss-button-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
  --kss-button-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
  --kss-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
  --kss-switch-track: rgba(255, 255, 255, 0.12);
  --kss-switch-track-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  --kss-switch-thumb: rgba(255, 255, 255, 0.92);
  --kss-scroll-thumb: rgba(255, 255, 255, 0.14);

  --kss-radius-xl: 22px;
  --kss-radius-lg: 18px;
  --kss-radius-md: 14px;

  --kss-overlay: rgba(0, 0, 0, 0.58);

  --kss-font: var(--kdn-font-sans-compact);
  --kss-font-rounded: ui-rounded, ui-sans-serif, system-ui, -apple-system, "SF Pro Rounded",
                      "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial;
}

/* Theme overrides */
[data-theme="light"] {
  --kss-bg: #f6f7fb;
  --kss-surface: rgba(255, 255, 255, 0.78);
  --kss-surface-2: rgba(255, 255, 255, 0.92);
  --kss-border: rgba(10, 20, 40, 0.10);

  --kss-text: #000;
  --kss-muted: rgba(10, 16, 28, 0.64);
  --kss-faint: rgba(10, 16, 28, 0.46);

  --kss-accent: #0a84ff;
  --kss-accent-2: #007aff;

  --kss-shadow: 0 18px 60px rgba(10, 20, 40, 0.12);
  --kss-shadow-soft: 0 10px 26px rgba(10, 20, 40, 0.10);
  --kss-outline-shadow-strong: inset 0 0 0 1px rgba(10, 20, 40, 0.16);
  --kss-button-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 250, 0.94));
  --kss-button-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(247, 249, 252, 0.98));
  --kss-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 250, 0.95));
  --kss-switch-track: rgba(8, 17, 31, 0.08);
  --kss-switch-track-shadow:
    inset 0 0 0 1px rgba(8, 17, 31, 0.08),
    0 8px 18px rgba(14, 25, 38, 0.08);
  --kss-switch-thumb: #ffffff;
  --kss-scroll-thumb: rgba(10, 20, 40, 0.16);

  --kss-overlay: rgba(10, 20, 40, 0.26);
}

html[data-theme="light"] .kdn-section-settings-btn:hover,
html[data-theme="light"] .kdn-section-settings-btn:hover .material-symbols-rounded,
.kaidan-insta[data-theme="light"] .kdn-section-settings-btn:hover,
.kaidan-insta[data-theme="light"] .kdn-section-settings-btn:hover .material-symbols-rounded {
  color: #08111f !important;
}

html[data-theme="light"] .kdn-section-settings-btn:is(:hover, :focus, :focus-visible),
html[data-theme="light"] .kdn-section-settings-btn:is(:hover, :focus, :focus-visible) .material-symbols-rounded,
.kaidan-insta[data-theme="light"] .kdn-section-settings-btn:is(:hover, :focus, :focus-visible),
.kaidan-insta[data-theme="light"] .kdn-section-settings-btn:is(:hover, :focus, :focus-visible) .material-symbols-rounded {
  color: #08111f !important;
}

[data-theme="blue"] {
  --kss-bg: #070c16;
  --kss-surface: rgba(20, 60, 160, 0.14);
  --kss-surface-2: rgba(20, 60, 160, 0.20);
  --kss-border: rgba(120, 170, 255, 0.20);

  --kss-text: rgba(255, 255, 255, 0.92);
  --kss-muted: rgba(220, 235, 255, 0.70);
  --kss-faint: rgba(220, 235, 255, 0.54);

  --kss-accent: #64d2ff;
  --kss-accent-2: #0a84ff;

  --kss-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  --kss-shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.22);
  --kss-outline-shadow-strong: inset 0 0 0 1px rgba(120, 170, 255, 0.28);
  --kss-button-bg: linear-gradient(180deg, rgba(16, 38, 92, 0.94), rgba(8, 22, 62, 0.92));
  --kss-button-bg-hover: linear-gradient(180deg, rgba(20, 48, 112, 0.96), rgba(10, 27, 72, 0.94));
  --kss-panel-bg: linear-gradient(180deg, rgba(10, 27, 70, 0.88), rgba(8, 20, 54, 0.94));
  --kss-switch-track: rgba(128, 183, 255, 0.12);
  --kss-switch-track-shadow: inset 0 0 0 1px rgba(128, 183, 255, 0.16);
  --kss-switch-thumb: rgba(239, 246, 255, 0.96);
  --kss-scroll-thumb: rgba(204, 224, 252, 0.24);

  --kss-overlay: rgba(0, 0, 0, 0.62);
}

/* ------------------------------------------------------------------
   Bouton flottant (icĆ´ne "tune") ā€” style identique au Help
------------------------------------------------------------------ */

.kdn-section-settings-btn,
.kdn-section-settings-btn:hover {
  position: fixed;
  right: 1vw;
  top: 15px;
  z-index: 9999;

  width: 35px;
  height: 28px;
  border-radius: 999px;
  padding: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--kss-button-bg);
  color: var(--kss-text);

  box-shadow: var(--kss-outline-shadow), var(--kss-shadow-soft);

  cursor: pointer;
  outline: none;
}

/* Glow subtil (Suivi Pro style) */
.kdn-section-settings-btn::before,
.kdn-section-settings-btn::before:hover {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: radial-gradient(120px 80px at 30% 30%, rgba(255, 255, 255, 0.22), transparent 60%);
  opacity: 0.75;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .kdn-section-settings-btn::before,
  .kdn-section-settings-btn::before:hover {
    background: none;
  }
}

.kdn-section-settings-btn .material-symbols-rounded {
  font-size: 1.35rem;
  line-height: 1;
}

.kdn-section-settings-btn:hover {
  transform: translateY(-1px);
  background: var(--kss-button-bg-hover);
  box-shadow: var(--kss-outline-shadow-strong), var(--kss-shadow-soft), 0 16px 34px rgba(0, 0, 0, 0.18);
}

.kdn-section-settings-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--kss-shadow-soft);
}

.kdn-section-settings-btn:focus-visible {
  outline: 2px solid var(--kss-accent);
  outline-offset: 2px;
}

/* Mobile */
@media (max-width: 1024px) {
  .kdn-section-settings-btn,
  .kdn-section-settings-btn:hover {
    right: 5px;
    top: 7px;
    width: 30px;
    height: 25px;
    padding: 5px;
  }

  .kdn-section-settings-btn .material-symbols-rounded {
    font-size: 1.25rem;
  }
}

/* ------------------------------------------------------------------
   Overlay / modal ā€” identique Ć  Help
------------------------------------------------------------------ */

.kdn-section-settings-popup {
  z-index: 11000;
}

.kdn-section-settings-popup.kdn-hidden {
  display: none !important;
}


/* ------------------------------------------------------------------
   Body : liste des onglets
------------------------------------------------------------------ */

.kdn-section-settings-popup .kdn-popup__body,
.kdn-section-settings-popup .kdn-ar-modal__body,
.kdn-ts-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 0.15rem;
}

/* Scrollbar subtile (optionnelle, non bloquante) */
.kdn-section-settings-popup .kdn-popup__body::-webkit-scrollbar,
.kdn-section-settings-popup .kdn-ar-modal__body::-webkit-scrollbar,
.kdn-ts-body::-webkit-scrollbar {
  width: 10px;
}

.kdn-section-settings-popup .kdn-popup__body::-webkit-scrollbar-thumb,
.kdn-section-settings-popup .kdn-ar-modal__body::-webkit-scrollbar-thumb,
.kdn-ts-body::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px var(--kss-scroll-thumb);
}

/* ------------------------------------------------------------------
   Ligne : label + switch (style Suivi Pro)
------------------------------------------------------------------ */

.kdn-ts-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;

padding: 20px 10px;
    border-bottom: 0.75px solid #ffffff10;
  cursor: pointer;
  user-select: none;
    font-family:var(--kdn-font-sans);
    letter-spacing: 0.01em;
    font-size: 1.1em;
}

[data-theme="light"] .kdn-ts-row {
    border-bottom: 0.75px solid #00000015;
}


.kdn-section-emoji.kdn-ts-icon {
  flex: 0 0 auto;
  margin-top: 0.02rem;
  margin-right: 10px;
  color: initial !important;
  -webkit-text-fill-color: initial !important;
  font-family: var(--kdn-font-emoji) !important;
}

.kdn-ts-row:last-child {
  box-shadow: none;
}

[data-theme="light"] .kdn-ts-row:hover {
  background: rgba(10, 20, 40, 0.04);
}

.kdn-ts-label {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: flex-start;
  min-width: 0;
  margin-right: 0.75rem;
  color: var(--kss-text);
  opacity: 1;
}

.kdn-ts-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.kdn-section-settings-popup .kdn-ts-description,
.kdn-section-settings-modal .kdn-ts-description {
  display: block;
  max-width: 48ch;
  font-family: var(--kss-font) !important;
  font-size: 0.82rem;
  line-height: 1.34;
  font-weight: 500;
  color: var(--kss-muted) !important;
  -webkit-text-fill-color: var(--kss-muted) !important;
}

.kdn-section-settings-popup .kdn-ts-label-text,
.kdn-section-settings-popup .kdn-ts-label-text *,
.kdn-section-settings-modal .kdn-ts-label-text,
.kdn-section-settings-modal .kdn-ts-label-text * {
  min-width: 0;
  font-family: var(--kss-font) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.kdn-section-settings-popup .kdn-ts-label-text,
.kdn-section-settings-modal .kdn-ts-label-text {
  font-weight: 750;
  line-height: 1.18;
}

html[data-theme="light"] .kdn-section-settings-popup .kdn-ts-label-text,
html[data-theme="light"] .kdn-section-settings-popup .kdn-ts-label-text *,
html[data-theme="light"] .kdn-section-settings-modal .kdn-ts-label-text,
html[data-theme="light"] .kdn-section-settings-modal .kdn-ts-label-text *,
[data-theme="light"] .kdn-section-settings-popup .kdn-ts-label-text,
[data-theme="light"] .kdn-section-settings-popup .kdn-ts-label-text *,
[data-theme="light"] .kdn-section-settings-modal .kdn-ts-label-text,
[data-theme="light"] .kdn-section-settings-modal .kdn-ts-label-text *,
.kaidan-insta[data-theme="light"] .kdn-section-settings-popup .kdn-ts-label-text,
.kaidan-insta[data-theme="light"] .kdn-section-settings-popup .kdn-ts-label-text *,
.kaidan-insta[data-theme="light"] .kdn-section-settings-modal .kdn-ts-label-text,
.kaidan-insta[data-theme="light"] .kdn-section-settings-modal .kdn-ts-label-text * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

html[data-theme="light"] .kdn-section-settings-popup .kdn-ts-description,
[data-theme="light"] .kdn-section-settings-popup .kdn-ts-description,
.kaidan-insta[data-theme="light"] .kdn-section-settings-popup .kdn-ts-description,
.kdn-section-settings-modal .kdn-ts-description {
  color: rgba(10, 16, 28, 0.62) !important;
  -webkit-text-fill-color: rgba(10, 16, 28, 0.62) !important;
}

/* ------------------------------------------------------------------
   Switch ON/OFF ā€” alignĆ© Help (glass + accent)
------------------------------------------------------------------ */

.kdn-ts-switch-wrap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* On masque le checkbox natif, mais on le garde accessible */
.kdn-ts-switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider (visuel du switch) */
.kdn-ts-switch-slider {
  position: relative;
  display: inline-block;

  width: 44px;
  height: 24px;

  border-radius: 999px;
  background: var(--kss-switch-track);
  box-shadow: var(--kss-switch-track-shadow);
}

/* Rond qui glisse */
.kdn-ts-switch-slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;

  width: 18px;
  height: 18px;
  border-radius: 999px;

  background: var(--kss-switch-thumb);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Ɖtat activƩ : accent */
.kdn-ts-switch-input:checked + .kdn-ts-switch-slider {
  background: var(--kss-accent);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 6px 16px rgba(10, 132, 255, 0.18);
}

@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .kdn-ts-switch-input:checked + .kdn-ts-switch-slider {
    background: linear-gradient(135deg, rgba(10,132,255,0.96), rgba(100,210,255,0.86));
  }
}

.kdn-ts-switch-input:checked + .kdn-ts-switch-slider::before {
  transform: translateX(20px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.40);
}

/* Focus (via clavier) */
.kdn-ts-switch-input:focus-visible + .kdn-ts-switch-slider {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--kss-accent) 86%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Hover sur la ligne : accent lƩger */
.kdn-ts-row:hover .kdn-ts-switch-slider {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

[data-theme="light"] .kdn-ts-row:hover .kdn-ts-switch-slider {
  box-shadow:
    inset 0 0 0 1px rgba(8, 17, 31, 0.14),
    0 10px 20px rgba(14, 25, 38, 0.08);
}

/* ------------------------------------------------------------------
   Responsive
------------------------------------------------------------------ */

/* Sur les Ć©crans trĆØs petits, modal quasi plein Ć©cran */
@media (max-width: 1024px) {

  .kdn-ts-row {
    padding: 15px 3px;
  }

  .kdn-section-settings-popup .kdn-popup__title,
  .kdn-section-settings-popup .kdn-ar-modal__title {
    font-size: 0.98rem;
  }
  .kdn-ts-row {
    font-size: 1.1em;
}
  .kdn-section-emoji.kdn-ts-icon {
    margin-right: 15px;
}
  .kdn-ts-copy {
    gap: 0.3rem;
}
}

/* Sur les Ć©crans plus larges : modal plus compact */
@media (min-width: 768px) {
  .kdn-section-settings-popup .kdn-popup__panel,
  .kdn-section-settings-popup .kdn-ar-modal__panel {
    max-height: 80vh;
  }
}

/* ------------------------------------------------------------------
   QualitƩ perƧue (mouvements) + compat
------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .kdn-section-settings-btn,
  .kdn-section-settings-popup .kdn-popup__close,
  .kdn-section-settings-popup .kdn-ar-modal__close,
  .kdn-ts-switch-slider,
  .kdn-ts-switch-slider::before {
  }

  .kdn-section-settings-btn:hover {
    transform: none !important;
  }

  .kdn-section-settings-popup .kdn-popup__close:active,
  .kdn-section-settings-popup .kdn-ar-modal__close:active {
    transform: none !important;
  }
}

/* Contrainte existante */
.material-symbols-rounded.kdn-ts-icon {
  vertical-align: top;
  margin-right: 0.4em;
}

.kdn-scroll-locked-y .kdn-section-settings-btn {
  z-index: 1000;
}