/* /public_html/assets/css/ui-controls.css */

:root{
  --ui-btn-h: 44px;
  --ui-btn-h-compact: 36px;
  --ui-pill: var(--radius-pill, 999px);

  --ui-focus-ring: color-mix(in srgb, var(--theme-primary, #0ea5e9) 45%, transparent);
}

/* =========================
   PREFAB BOUTON (BASE UNIQUE)
   ========================= */

.btn,
.btn-secondary,
.btn-danger{
  -webkit-tap-highlight-color: transparent;
  appearance: none;

  /* taille = SACRÉE */
  height: var(--ui-btn-h);
  min-height: var(--ui-btn-h);
  padding: 0 1.15rem;

  /* capsule */
  border-radius: var(--ui-pill);
  border: 1px solid var(--btn-border, transparent);
  background: var(--btn-bg, transparent);
  color: var(--btn-text, var(--color-text));
  box-shadow: var(--btn-shadow, none);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;

  /* stabilise l’aspect (évite les “boutons plus petits” visuels) */
  line-height: 1;
  white-space: nowrap;

  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.01em;

  cursor: pointer;
  user-select: none;

  transition:
    transform 110ms ease-out,
    box-shadow 150ms ease-out,
    filter 150ms ease-out,
    background-color 150ms ease-out,
    border-color 150ms ease-out,
    color 150ms ease-out,
    opacity 150ms ease-out;
}

.btn:focus,
.btn-secondary:focus,
.btn-danger:focus{ outline: none; }

.btn:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible{
  box-shadow: 0 0 0 2px var(--ui-focus-ring), var(--btn-shadow, none);
}

/* Disabled */
.btn[disabled],
.btn-secondary[disabled],
.btn-danger[disabled],
.btn.is-disabled{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Tailles */
.btn--compact{ height: var(--ui-btn-h-compact); min-height: var(--ui-btn-h-compact); padding: 0 0.95rem; font-size: 0.9rem; }
.btn--sm{ height: 32px; min-height: 32px; padding: 0 0.75rem; font-size: 0.85rem; }
.btn--block{ width: 100%; }

/* contenu */
.btn__icon{ display:inline-flex; align-items:center; justify-content:center; font-size:1.05em; line-height:1; opacity:.95; }
.btn__label{ display:inline-flex; align-items:center; line-height:1; }

/* =========================
   VARIANTES (uniquement vars)
   ========================= */

/* Secondary */
.btn--secondary,
.btn-secondary{
  --btn-bg:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.55), transparent 55%),
    color-mix(in srgb, var(--color-surface-soft) 92%, #ffffff 8%);
  --btn-border: color-mix(in srgb, var(--color-border-subtle) 80%, #94a3b8 20%);
  --btn-text: var(--color-text);
  --btn-shadow: var(--shadow-subtle);
}

html[data-theme="dark"] .btn--secondary,
html[data-theme="dark"] .btn-secondary{
  --btn-bg:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.07), transparent 55%),
    color-mix(in srgb, var(--color-surface) 80%, #020617 20%);
  --btn-border: rgba(148, 163, 184, 0.55);
}

/* Primary (bleu thème) */
.btn--primary{
  --btn-text: #f9fafb;
  --btn-border: transparent;
  --btn-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--theme-primary, #0ea5e9) 35%, #020617 65%),
    color-mix(in srgb, var(--theme-primary, #0ea5e9) 75%, #020617 25%)
  );
  --btn-shadow:
    0 0 0 1px color-mix(in srgb, var(--theme-primary, #0ea5e9) 65%, transparent),
    0 18px 45px color-mix(in srgb, var(--theme-primary, #0ea5e9) 30%, transparent);
}

html[data-theme="light"] .btn--primary{
  --btn-text: #0b1220;
  --btn-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--theme-primary, #0ea5e9) 35%, #ffffff 65%),
    color-mix(in srgb, var(--theme-primary, #0ea5e9) 85%, #ffffff 15%)
  );
  --btn-shadow: 0 14px 34px color-mix(in srgb, var(--theme-primary, #0ea5e9) 35%, transparent);
}

/* CTA (rose) */
.btn--cta{
  --btn-text: #fff;
  --btn-border: transparent;
  --btn-bg: linear-gradient(135deg, #fb7185, #f43f5e);
  --btn-shadow:
    0 0 0 1px rgba(244, 63, 94, 0.55),
    0 18px 45px rgba(244, 63, 94, 0.25);
}

html[data-theme="light"] .btn--cta{
  --btn-shadow: 0 14px 34px rgba(244, 63, 94, 0.35);
}

/* Danger */
.btn--danger,
.btn-danger{
  --btn-text: #f9fafb;
  --btn-border: transparent;
  --btn-bg: linear-gradient(135deg, #ef4444, #f97316);
  --btn-shadow: 0 12px 28px rgba(239, 68, 68, 0.55);
}

/* Hover (commun) */
.btn:hover,
.btn-secondary:hover,
.btn-danger:hover{
  transform: none;
  filter: brightness(1.03);
  
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-border-subtle) 55%, transparent),
    0 14px 34px rgba(15, 23, 42, 0.14);
}

html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-danger:hover{
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.38),
    0 18px 45px rgba(0, 0, 0, 0.35);
}

/* =========================
   PREFAB HEADER : taille verrouillée
   ========================= */
.panel-header-common .btn{
    display: inline-flex;
  align-items: center;
  height: var(--ui-btn-h);
  min-height: var(--ui-btn-h);
}

.panel-header-common .btn__icon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* 🔒 GARANTIE ABSOLUE : aucun bouton header ne peut être plus petit */
.panel-header-common button.btn {
  height: var(--ui-btn-h) !important;
  min-height: var(--ui-btn-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Legacy primary = même base que .btn + vars de .btn--primary */
.btn-primary { 
  /* base */
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  height: var(--ui-btn-h);
  min-height: var(--ui-btn-h);
  padding: 0 1.15rem;
  border-radius: var(--ui-pill);
  border: 1px solid var(--btn-border, transparent);
  background: var(--btn-bg, transparent);
  color: var(--btn-text, var(--color-text));
  box-shadow: var(--btn-shadow, none);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  line-height: 1;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  transition: transform 110ms ease-out, box-shadow 150ms ease-out, filter 150ms ease-out,
              background-color 150ms ease-out, border-color 150ms ease-out,
              color 150ms ease-out, opacity 150ms ease-out;

  /* vars primary */
  --btn-text: #f9fafb;
  --btn-border: transparent;
  --btn-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--theme-primary, #0ea5e9) 35%, #020617 65%),
    color-mix(in srgb, var(--theme-primary, #0ea5e9) 75%, #020617 25%)
  );
  --btn-shadow:
    0 0 0 1px color-mix(in srgb, var(--theme-primary, #0ea5e9) 65%, transparent),
    0 18px 45px color-mix(in srgb, var(--theme-primary, #0ea5e9) 30%, transparent);
}

html[data-theme="light"] .btn-primary{
  --btn-text: #0b1220;
  --btn-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--theme-primary, #0ea5e9) 35%, #ffffff 65%),
    color-mix(in srgb, var(--theme-primary, #0ea5e9) 85%, #ffffff 15%)
  );
  --btn-shadow: 0 14px 34px color-mix(in srgb, var(--theme-primary, #0ea5e9) 35%, transparent);
}

/* =========================
   UI CONTROL (search / combo) — même base que .btn
   ========================= */

.ui-control{
  height: var(--ui-btn-h);
  min-height: var(--ui-btn-h);
  border-radius: var(--ui-pill);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 80%, #94a3b8 20%);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.55), transparent 55%),
    color-mix(in srgb, var(--color-surface-soft) 92%, #ffffff 8%);
  box-shadow: var(--shadow-subtle);
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

html[data-theme="dark"] .ui-control{
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.07), transparent 55%),
    color-mix(in srgb, var(--color-surface) 80%, #020617 20%);
  border-color: rgba(148, 163, 184, 0.55);
}

.ui-control:focus-within,
.ui-control:focus{
  outline: none;
  box-shadow: 0 0 0 2px var(--ui-focus-ring), var(--shadow-subtle);
  border-color: color-mix(in srgb, var(--theme-primary) 55%, var(--color-border-subtle));
}

/* --- Search --- */
.ui-search{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 1.05rem;
}

.ui-search__icon{
  display: inline-flex;
  align-items: center;
  opacity: .75;
  font-size: 1.05em;
}

.ui-search__input{
  appearance: none;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  min-width: 0;
  width: 100%;
}

.ui-search__input::placeholder{
  color: var(--color-text-muted);
  opacity: 0.9;
}