/* ==========================================================================
   Choirbase Application CSS — « Lagune claire » v3
   ==========================================================================
   Loaded by all base templates (staff, parent, admin, onboarding).

   ┌────────────────────────────────────────────────────────────────────┐
   │  THIS FILE IS THE SINGLE SOURCE OF TRUTH FOR COLOR AND SCALE.      │
   │                                                                    │
   │  Section 1 defines every palette stop once, as CSS custom          │
   │  properties holding space-separated RGB channels.                  │
   │                                                                    │
   │    templates/shared/_tailwind_config.html maps each Tailwind stop  │
   │    to rgb(var(--x) / <alpha-value>) — so utilities like            │
   │    bg-primary-600 AND bg-primary-600/50 both resolve back here.    │
   │                                                                    │
   │    The component classes below use rgb(var(--x)) directly.         │
   │                                                                    │
   │    docs/design/design-system.html links this file, so the design   │
   │    system page renders the live palette rather than a copy of it.  │
   │                                                                    │
   │  To change a color, change it HERE. Nowhere else has a hex.        │
   └────────────────────────────────────────────────────────────────────┘

   Spec: docs/design/design-system.html
   Organized by category for maintainability.
   ========================================================================== */

/* ==========================================================================
   1. PALETTE + SCALE — the single source of truth
   ==========================================================================
   Values are "R G B" (space-separated channels), NOT hex, because Tailwind's
   <alpha-value> placeholder composes them as rgb(var(--x) / <alpha>).
   Writing #hex here would break every opacity modifier in the app.

   Ramps are monotonic: each stop is strictly darker than the one before.
   ink-500 and ink-600 exist to keep the 10-stop shape; they are BANNED for
   text (de-emphasize with font size, never a lighter gray).
   ========================================================================== */

:root {
  /* primary */
  --primary-50: 238 246 247;  /* #eef6f7 */
  --primary-100: 213 234 236;  /* #d5eaec */
  --primary-200: 177 217 221;  /* #b1d9dd */
  --primary-300: 131 194 201;  /* #83c2c9 */
  --primary-400: 77 164 175;  /* #4da4af */
  --primary-500: 45 135 148;  /* #2d8794 · focus rings */
  --primary-600: 26 107 120;  /* #1a6b78 · links, icons, Pupitre chip */
  --primary-700: 21 88 99;  /* #155863 · hover, secondary-button text */
  --primary-800: 20 60 68;  /* #143c44 · THE CTA fill — nothing else wears it */
  --primary-900: 13 40 46;  /* #0d282e · CTA hover */

  /* limpet */
  --limpet-50: 230 242 241;  /* #e6f2f1 · feature/CTA grounds */
  --limpet-100: 211 235 232;  /* #d3ebe8 · Groupe badge fill */
  --limpet-200: 174 220 214;  /* #aedcd6 */
  --limpet-300: 134 201 193;  /* #86c9c1 */
  --limpet-400: 94 179 169;  /* #5eb3a9 */
  --limpet-500: 61 150 139;  /* #3d968b */
  --limpet-600: 42 129 119;  /* #2a8177 */
  --limpet-700: 28 110 100;  /* #1c6e64 · Groupe badge text */
  --limpet-800: 21 84 77;  /* #15544d */
  --limpet-900: 14 58 53;  /* #0e3a35 */

  /* ink */
  --ink-50: 250 251 251;  /* #fafbfb · page canvas */
  --ink-100: 242 246 246;  /* #f2f6f6 · zebra rows, section shading */
  --ink-200: 233 239 239;  /* #e9efef · input wells */
  --ink-300: 221 229 229;  /* #dde5e5 · the one functional line (table header rule) */
  --ink-400: 87 105 108;  /* #57696c · muted text + placeholders (AA on wells) */
  --ink-500: 74 92 96;  /* #4a5c60 · BANNED for text */
  --ink-600: 65 82 86;  /* #415256 · BANNED for text */
  --ink-700: 53 73 76;  /* #35494c · body text */
  --ink-800: 15 28 30;  /* #0f1c1e · headings */
  --ink-900: 7 14 16;  /* #070e10 · max contrast */

  /* peach */
  --peach-50: 253 243 236;  /* #fdf3ec */
  --peach-100: 248 224 208;  /* #f8e0d0 · event badge fill */
  --peach-200: 243 198 171;  /* #f3c6ab */
  --peach-300: 240 166 125;  /* #f0a67d */
  --peach-400: 240 130 74;  /* #f0824a · main pop */
  --peach-500: 224 106 48;  /* #e06a30 */
  --peach-600: 194 85 34;  /* #c25522 */
  --peach-700: 150 72 26;  /* #96481a · event badge text */
  --peach-800: 112 54 22;  /* #703616 */
  --peach-900: 74 36 16;  /* #4a2410 */

  /* success */
  --success-50: 233 246 238;  /* #e9f6ee */
  --success-100: 209 236 217;  /* #d1ecd9 */
  --success-200: 168 219 186;  /* #a8dbba */
  --success-300: 121 196 149;  /* #79c495 */
  --success-400: 77 170 113;  /* #4daa71 */
  --success-500: 47 148 85;  /* #2f9455 */
  --success-600: 35 122 70;  /* #237a46 · button fill */
  --success-700: 26 107 58;  /* #1a6b3a · badge text */
  --success-800: 20 82 45;  /* #14522d */
  --success-900: 13 56 32;  /* #0d3820 */

  /* warning */
  --warning-50: 251 243 220;  /* #fbf3dc */
  --warning-100: 247 232 192;  /* #f7e8c0 */
  --warning-200: 238 213 146;  /* #eed592 */
  --warning-300: 224 188 92;  /* #e0bc5c */
  --warning-400: 201 156 46;  /* #c99c2e */
  --warning-500: 173 128 14;  /* #ad800e */
  --warning-600: 156 111 6;  /* #9c6f06 */
  --warning-700: 138 93 0;  /* #8a5d00 · badge text (never a button) */
  --warning-800: 100 67 0;  /* #644300 */
  --warning-900: 66 44 0;  /* #422c00 */

  /* danger */
  --danger-50: 253 234 230;  /* #fdeae6 */
  --danger-100: 248 215 208;  /* #f8d7d0 */
  --danger-200: 240 178 165;  /* #f0b2a5 */
  --danger-300: 230 138 117;  /* #e68a75 */
  --danger-400: 213 95 70;  /* #d55f46 */
  --danger-500: 199 63 40;  /* #c73f28 */
  --danger-600: 181 53 34;  /* #b53522 · button fill */
  --danger-700: 168 50 30;  /* #a8321e · badge text */
  --danger-800: 126 36 21;  /* #7e2415 */
  --danger-900: 84 24 14;  /* #54180e */

  /* Elevation — the only shadow in the system (cards, raised surfaces) */
  --shadow-card: 0 1px 3px rgb(15 35 35 / 0.08);
}

/* ==========================================================================
   2. BASE & RESET
   ========================================================================== */

/* Root scale — THE one knob for text size across the entire app.
   Every Tailwind utility is rem-based, so type, spacing, and components all
   scale from this single declaration. Percentage (not px) so the value still
   respects the reader's own browser font-size setting. */
html {
  font-size: 106.25%; /* 17px at default browser settings */
}

body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* Headings are IBM Plex Serif, a hair tighter than the face's default and a
   point smaller than the old sans headings: enough tenue to read as a title,
   not enough to shout. Chosen 2026-09-03 with JD on the Portail des familles
   canvas. One family for text, one for titles, nothing else. */
main h1, main h2, main h3 {
  font-family: 'IBM Plex Serif', Georgia, serif;
}

/* Alpine.js x-cloak support - hide elements until Alpine loads */
[x-cloak] {
  display: none !important;
}

/* ==========================================================================
   3. FORM CONTROLS
   ========================================================================== */

/* Checkbox & Radio - design system defaults (safety net for unstyled inputs) */
input[type="checkbox"],
input[type="radio"] {
  height: 1rem;              /* h-4 */
  width: 1rem;               /* w-4 */
  border: 1px solid rgb(var(--ink-300));
  accent-color: rgb(var(--primary-600));
}

input[type="checkbox"] {
  border-radius: 0.25rem;    /* rounded - radios stay circular */
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: 2px solid rgb(var(--primary-500));
  outline-offset: 2px;
}

/* Modern select dropdown - removes native appearance.
   Chevron stroke is ink-400; encoded inline because data: URIs cannot read
   CSS variables. If ink-400 changes, update %2357696c below to match. */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2357696c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ==========================================================================
   4. BADGE COMPONENT SYSTEM
   ==========================================================================
   Law: the tint IS the container. Light background (100) + dark text (700),
   never a border. Status badges are tinted pills — never solid; the only
   solid badge in the system is .badge-pupitre (see section 5).

   Sizes:
   - badge:    Default (text-xs, px-2.5 py-0.5) - tables, lists
   - badge-sm: Compact (text-xs, px-2 py-0.5)
   - badge-lg: Larger  (text-sm, px-3 py-1) - detail page headers

   Usage:
   - <span class="badge badge-success">Actif</span>
   - <span class="badge badge-lg badge-warning">En attente</span>
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem; /* py-0.5 px-2.5 */
  border-radius: 9999px;      /* rounded-full */
  font-size: 0.75rem;         /* text-xs */
  line-height: 1rem;
  font-weight: 500;           /* font-medium */
}

.badge-sm {
  padding: 0.125rem 0.5rem;   /* py-0.5 px-2 */
}

.badge-lg {
  padding: 0.25rem 0.75rem;   /* py-1 px-3 */
  font-size: 0.875rem;        /* text-sm */
  line-height: 1.25rem;
}

/* Category badges - squared corners, limpet tint (classifications, scopes) */
.badge-category {
  border-radius: 0.25rem;     /* rounded */
  background-color: rgb(var(--limpet-100));
  color: rgb(var(--limpet-700));
}

/* Status badges - semantic tints */
.badge-success {
  background-color: rgb(var(--success-100));
  color: rgb(var(--success-700));
}

.badge-warning {
  background-color: rgb(var(--warning-100));
  color: rgb(var(--warning-700));
}

.badge-danger {
  background-color: rgb(var(--danger-100));
  color: rgb(var(--danger-700));
}

/* Neutral badges - for non-status info like "Ancien", counts */
.badge-neutral {
  background-color: rgb(var(--ink-100));
  color: rgb(var(--ink-700));
}

/* Primary badges - for identifiers, IDs, roles */
.badge-primary {
  background-color: rgb(var(--primary-100));
  color: rgb(var(--primary-700));
}

/* Notification badge - for sidebar/nav counts */
.badge-notification {
  background-color: rgb(var(--warning-100));
  color: rgb(var(--warning-700));
}

/* Info badge - for neutral informational tags */
.badge-info {
  background-color: rgb(var(--primary-100));
  color: rgb(var(--primary-700));
}

/* ==========================================================================
   5. ENTITY BADGES (MANDATORY)
   ==========================================================================
   Entity identity spans THREE dimensions — family, weight, and shape —
   so it survives colour-blindness, table density, and a squint. Petrol and
   sea-glass sit ~15 degrees apart; hue alone cannot carry this distinction,
   which is why Pupitre is solid and Groupe is tinted.

   Entity → Identity:
   - Pupitre       → primary, SOLID 600, pill        (voice section: identity)
   - Groupe        → limpet, tint 100/700, rounded-rect (category)
   - TypeEvenement → peach, tint 100/700, pill       (calendar)

   NEVER give an entity ink (ink is scaffolding, it carries no meaning), and
   never give Pupitre a tint — that was the v2 collision.

   Usage:
   - <span class="badge badge-pupitre">S</span>
   - <span class="badge badge-groupe">Débutant</span>
   - <span class="badge badge-event">Répétition</span>
   ========================================================================== */

/* Pupitre - solid petrol chip, the "line marker". 6.1:1 with white. */
.badge-pupitre {
  background-color: rgb(var(--primary-600));
  color: white;
  font-weight: 600;                /* font-semibold - dense little chip */
  justify-content: center;
  min-width: 1.5rem;               /* keeps 1-char abbreviations circular */
}

/* Groupe - sea-glass tint, squared corners (category style) */
.badge-groupe {
  border-radius: 0.25rem;
  background-color: rgb(var(--limpet-100));
  color: rgb(var(--limpet-700));
}

/* Event type - peach tint, the palette's rationed warmth */
.badge-event {
  background-color: rgb(var(--peach-100));
  color: rgb(var(--peach-700));
}

/* ==========================================================================
   6. BUTTON COMPONENT SYSTEM
   ==========================================================================
   Law: all buttons are borderless — filled, tinted, or text-only.
   ONE dark button per viewport: .btn-primary (primary-800) is the CTA, and
   primary-800 appears nowhere else in the system.

   Variants:
   - Primary:     Dark CTA (primary-800)
   - Secondary:   Tinted (primary-100)
   - Ghost:       Text only
   - Success:     Filled 600 - approve/confirm
   - Danger-soft: Tinted danger-50 - reversible negative
   - Danger:      Filled 600 - destructive confirm
   - Icon:        Small icon-only for table rows

   Semantic fills use 600 (not 500) so white text clears WCAG AA.
   .btn-warning was DELETED in v3 — warning is badge-only by law.

   Sizes: btn (py-2 px-4) · btn-sm · btn-lg · btn-xs

   Usage:
   - <button class="btn btn-primary">Envoyer</button>
   - <a href="..." class="btn btn-ghost">Annuler</a>
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;                    /* gap-2 for icon + text spacing */
  padding: 0.5rem 1rem;           /* py-2 px-4 */
  font-weight: 600;               /* font-semibold */
  line-height: 1.5rem;            /* leading-6 - consistent height */
  border-radius: 0.5rem;          /* rounded-lg */
  /* Transparent 2px border: never visible (shading-not-lines), kept so
     button geometry is identical to the pre-v3 bordered buttons. */
  border: 2px solid transparent;
  transition: background-color 150ms, color 150ms, opacity 150ms;
}

.btn:focus-visible {
  outline: 2px solid rgb(var(--primary-500));
  outline-offset: 2px;
}

/* Size modifiers */
.btn-lg {
  padding: 0.75rem 1.5rem;        /* py-3 px-6 */
}

.btn-sm {
  padding: 0.375rem 0.75rem;      /* py-1.5 px-3 */
  font-size: 0.875rem;            /* text-sm */
}

.btn-xs {
  padding: 0.375rem 0.75rem;      /* py-1.5 px-3 */
  font-size: 0.75rem;             /* text-xs */
  font-weight: 500;               /* contextual actions, not CTAs */
  border-radius: 0.375rem;        /* rounded-md */
  border-width: 1px;
}

/* Primary - THE dark CTA. One per viewport. */
.btn-primary {
  background-color: rgb(var(--primary-800));
  color: white;
}

.btn-primary:hover {
  background-color: rgb(var(--primary-900));
}

/* Secondary - tinted, borderless */
.btn-secondary {
  background-color: rgb(var(--primary-100));
  color: rgb(var(--primary-700));
}

.btn-secondary:hover {
  background-color: rgb(var(--primary-200));
}

/* Ghost - text only */
.btn-ghost {
  color: rgb(var(--primary-600));
  font-weight: 500;               /* font-medium */
}

.btn-ghost:hover {
  background-color: rgb(var(--ink-100));
}

/* Success - approve actions (filled 600, 5.3:1 with white) */
.btn-success {
  background-color: rgb(var(--success-600));
  color: white;
}

.btn-success:hover {
  background-color: rgb(var(--success-700));
}

/* Danger soft - reversible negative actions.
   Renamed from .btn-danger-outline in v3: the style is a tinted fill and
   there is no outline, so the old name described something that no longer
   exists. */
.btn-danger-soft {
  background-color: rgb(var(--danger-50));
  color: rgb(var(--danger-700));
}

.btn-danger-soft:hover {
  background-color: rgb(var(--danger-100));
}

/* Danger - destructive confirm (filled 600, 6.0:1 with white) */
.btn-danger {
  background-color: rgb(var(--danger-600));
  color: white;
}

.btn-danger:hover {
  background-color: rgb(var(--danger-700));
}

/* Icon button - for table row actions */
.btn-icon {
  padding: 0.375rem;              /* p-1.5 */
  border-radius: 0.25rem;         /* rounded */
  color: rgb(var(--ink-700));
}

.btn-icon:hover {
  background-color: rgb(var(--ink-100));
}

/* Disabled state */
.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   7. LINK COMPONENT
   ==========================================================================
   Pattern: primary-600, hover to primary-700, font-medium

   Usage:
   - <a href="..." class="link">Contact support</a>
   ========================================================================== */

.link {
  color: rgb(var(--primary-600));
  font-weight: 500;               /* font-medium */
  transition: color 150ms;
}

.link:hover {
  color: rgb(var(--primary-700));
}

.link:focus-visible {
  outline: 2px solid rgb(var(--primary-500));
  outline-offset: 2px;
}

/* ==========================================================================
   8. TYPOGRAPHY
   ==========================================================================
   Heading styles scoped to <main> to avoid bleeding into Django admin.
   Hierarchy comes from SIZE, not from lighter greys.

   Usage:
   - <h1>Page Title</h1>       → text-2xl font-semibold ink-800, Plex Serif
   - <h2>Section Header</h2>   → text-lg font-semibold ink-800 mb-4
   - <h3>Sub Header</h3>       → text-lg font-medium ink-700
   - <h4>Small Label</h4>      → text-sm font-medium ink-700
   ========================================================================== */

main h1 {
  font-size: 1.5rem;        /* text-2xl */
  line-height: 2rem;
  font-weight: 600;         /* Plex Serif semibold reads like the old bold */
  letter-spacing: -0.02em;  /* a hair tighter */
  color: rgb(var(--ink-800));
}

main h2 {
  font-size: 1.125rem;      /* text-lg */
  line-height: 1.75rem;
  font-weight: 600;         /* font-semibold */
  letter-spacing: -0.015em;
  color: rgb(var(--ink-800));
  margin-bottom: 1rem;      /* mb-4 */
}

main h3 {
  font-size: 1.125rem;      /* text-lg */
  line-height: 1.75rem;
  font-weight: 500;         /* font-medium */
  letter-spacing: -0.01em;
  color: rgb(var(--ink-700));
}

main h4 {
  font-size: 0.875rem;      /* text-sm */
  line-height: 1.25rem;
  font-weight: 500;         /* font-medium */
  color: rgb(var(--ink-700));
}

/* Table headers: the 1px ink-300 rule under them is the ONLY standing
   border in the system. Rows separate by zebra shading, never by borders. */
main th {
  text-align: left;
  font-size: 0.875rem;      /* text-sm */
  font-weight: 500;         /* font-medium */
  color: rgb(var(--ink-700));
}

/* ==========================================================================
   9. CARD COMPONENT
   ==========================================================================
   Law: shading, not lines. Cards are white, BORDERLESS, and separated from
   the ink-50 canvas by --shadow-card alone.

   Variants:
   - card:         Standard section (p-6)
   - card-compact: Tighter padding (p-4)
   - card-table:   No padding, overflow-hidden — wraps tables/lists
   - card-empty:   Generous padding, centered — empty states
   ========================================================================== */

.card,
.card-compact,
.card-table,
.card-empty {
  background-color: white;
  border-radius: 0.75rem;          /* rounded-xl */
  box-shadow: var(--shadow-card);
}

.card {
  padding: 1.5rem;                 /* p-6 */
}

.card-compact {
  padding: 1rem;                   /* p-4 */
}

.card-table {
  overflow: hidden;
}

.card-empty {
  padding: 3rem;                   /* p-12 */
  text-align: center;
}

/* ==========================================================================
   10. FORM INPUTS (bare elements)
   ==========================================================================
   Law: inputs are filled WELLS — bg ink-200, borderless. A field must read
   as a well at a glance. Focus lifts the background to white and adds the
   primary-500 ring.

   WCAG note (1.4.11): a tinted well cannot reach 3:1 boundary contrast —
   no tint can. Fields are identified by their MANDATORY visible label plus
   the focus ring, and placeholders never carry required information. This
   is the one documented exception in the system.

   Scoped to <main> to avoid affecting Django admin form controls.
   ========================================================================== */

main input[type="text"],
main input[type="email"],
main input[type="password"],
main input[type="number"],
main input[type="tel"],
main input[type="url"],
main input[type="date"],
main input[type="search"],
main select {
  width: 100%;
  height: 2.5rem;                     /* h-10 */
  padding-left: 0.75rem;              /* px-3 */
  padding-right: 0.75rem;
  border: 0;
  border-radius: 0.5rem;              /* rounded-lg */
  background-color: rgb(var(--ink-200));
  color: rgb(var(--ink-800));
}

main input::placeholder,
main textarea::placeholder {
  color: rgb(var(--ink-400));
}

main input[type="text"]:focus,
main input[type="email"]:focus,
main input[type="password"]:focus,
main input[type="number"]:focus,
main input[type="tel"]:focus,
main input[type="url"]:focus,
main input[type="date"]:focus,
main input[type="search"]:focus,
main select:focus,
main textarea:focus {
  outline: none;
  background-color: white;
  box-shadow: 0 0 0 2px rgb(var(--primary-500)); /* ring-2 ring-primary-500 */
}

main input:disabled,
main select:disabled,
main textarea:disabled {
  background-color: rgb(var(--ink-100));
  color: rgb(var(--ink-400));
  cursor: not-allowed;
}

main textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;            /* py-2 px-3 */
  border: 0;
  border-radius: 0.5rem;              /* rounded-lg */
  background-color: rgb(var(--ink-200));
  color: rgb(var(--ink-800));
}

/* ==========================================================================
   11. UTILITY CLASSES
   ========================================================================== */

/* Hide scrollbar for horizontal scroll elements (e.g., tab navigation) */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}