/* Complément aux utilitaires Tailwind + barre de navigation */

/* Empêche le scroll horizontal (overflow visible à gauche au grand A) */
html, body { overflow-x: clip; }

/* ── Header mobile : compression à grande taille de texte ── */
@media (max-width: 1023px) {
  /* Compress theme selector so it doesn't push the layout */
  html[data-fontsize="lg"] #theme-select,
  html[data-fontsize="xl"] #theme-select {
    max-width: 5rem;
    font-size: 0.72rem;
    padding-left: 0.4rem;
    padding-right: 1.4rem;
  }
  /* Tighten app-name text to keep logo in one line */
  html[data-fontsize="lg"] .header-appname { max-width: 8rem; }
  html[data-fontsize="xl"] .header-appname { max-width: 6rem; }
  /* Mobile nav items: never cause horizontal overflow */
  .nav-mobile-link { overflow-wrap: break-word; }
}

body {
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Grilles et flex : les enfants ne doivent pas forcer un débordement horizontal */
main .grid > *,
main .flex > * {
  min-width: 0;
}

/* Texte long : coupe proprement les mots sans déborder */
main p,
main li,
main td,
main th {
  overflow-wrap: break-word;
}

pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-pill {
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: hsl(var(--c-soft));
  font-weight: 500;
  transition: color 0.15s, background-color 0.15s;
}
.nav-pill:hover {
  color: hsl(var(--c-ink));
  background-color: hsl(var(--c-elevated) / 0.55);
}
.nav-pill--muted {
  opacity: 0.95;
}
.nav-pill--muted:hover {
  color: hsl(var(--c-muted));
  background-color: transparent;
}

.nav-mobile-link {
  display: block;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  color: hsl(var(--c-soft));
  font-weight: 500;
  transition: background-color 0.15s, color 0.15s;
}
.nav-mobile-link:hover {
  color: hsl(var(--c-ink));
  background-color: hsl(var(--c-elevated) / 0.5);
}

.theme-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 1rem;
  padding-right: 1.75rem;
}

html[data-theme="light"] .theme-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}

/* Champs formulaires : lisibilité selon thème */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  color: hsl(var(--c-ink));
}
input::placeholder,
textarea::placeholder {
  color: hsl(var(--c-faint));
}

::selection {
  background-color: hsl(var(--c-accent) / 0.35);
  color: hsl(var(--c-ink));
}

/* ── Status / alert — adaptés au thème ── */
.alert-warn { border: 1px solid hsl(var(--c-warn) / 0.35); background-color: hsl(var(--c-warn) / 0.1); border-radius: 0.75rem; }
.alert-ok   { border: 1px solid hsl(var(--c-ok)   / 0.35); background-color: hsl(var(--c-ok)   / 0.1); border-radius: 0.75rem; }
.alert-err  { border: 1px solid hsl(var(--c-err)  / 0.35); background-color: hsl(var(--c-err)  / 0.1); border-radius: 0.75rem; }

.status-warn { color: hsl(var(--c-warn)); }
.status-ok   { color: hsl(var(--c-ok)); }
.status-err  { color: hsl(var(--c-err)); }

.badge-warn { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.15rem 0.6rem; font-size: 0.75rem; font-weight: 500; background: hsl(var(--c-warn) / 0.15); color: hsl(var(--c-warn)); }
.badge-ok   { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.15rem 0.6rem; font-size: 0.75rem; font-weight: 500; background: hsl(var(--c-ok)   / 0.15); color: hsl(var(--c-ok)); }
.badge-err  { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.15rem 0.6rem; font-size: 0.75rem; font-weight: 500; background: hsl(var(--c-err)  / 0.15); color: hsl(var(--c-err)); }