/* ==========================================================================
   Choirbase Application CSS
   ==========================================================================
   This file contains all non-Tailwind styles for the application.
   Loaded by all base templates (staff, parent, admin).

   Organized by category for maintainability.
   ========================================================================== */

/* ==========================================================================
   1. BASE & RESET
   ========================================================================== */

body {
  font-family: 'Archivo', system-ui, sans-serif;
}

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

/* ==========================================================================
   2. 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 #cdc3b8; /* warm-300 */
  accent-color: #486581;     /* primary-600 */
}

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

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: 2px solid #627d98; /* primary-500 */
  outline-offset: 2px;
}

/* Modern select dropdown - removes native appearance */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%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;
}

/* ==========================================================================
   3. BADGE COMPONENT SYSTEM
   ==========================================================================
   Two badge types per design system:
   - Status badges (rounded-full): For state indicators (approved/pending/rejected)
   - Category badges (rounded): For classifications (groups, pupitres, scopes)

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

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

/* Base badge styles */
.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 color */
.badge-category {
  border-radius: 0.25rem; /* rounded */
  background-color: #d1eded; /* limpet-100 */
  color: #3a7d7d; /* limpet-700 */
}

/* Status badges - semantic colors */
.badge-success {
  background-color: #c5e8d4; /* success-100 */
  color: #1a6b3a; /* success-700 */
}

.badge-warning {
  background-color: #faecc5; /* warning-100 */
  color: #7a5a0a; /* warning-700 */
}

.badge-danger {
  background-color: #fecaca; /* danger-100 */
  color: #991b1b; /* danger-700 */
}

/* Neutral badges - for non-status info like "Ancien", counts */
.badge-neutral {
  background-color: #f3efe9; /* warm-100 */
  color: #443d37; /* warm-700 */
}

/* Primary badges - for identifiers, IDs, roles */
.badge-primary {
  background-color: #d9e2ec; /* primary-100 */
  color: #334e68; /* primary-700 */
}

/* Notification badge - for sidebar/nav counts */
.badge-notification {
  background-color: #faecc5; /* warning-100 */
  color: #7a5a0a; /* warning-700 */
}

/* Alert notification badge - high contrast for urgency */
.badge-alert {
  background-color: #b8860b; /* warning-500 */
  color: white;
}

/* Info badge - for neutral informational tags */
.badge-info {
  background-color: #d9e2ec; /* primary-100 */
  color: #334e68; /* primary-700 */
}

/* ==========================================================================
   ENTITY-SPECIFIC BADGES
   ==========================================================================
   Each domain entity has a dedicated badge class to enforce color mapping.
   This prevents color confusion and maintains design system integrity.

   Entity → Color Mapping:
   - Pupitre → Primary (blue) - voice sections, structural
   - Groupe → Limpet (teal) - organizational groups, decorative
   - TypeEvenement → Burgundy (wine) - calendar events

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

/* Pupitre badges - Primary blue (voice sections) */
.badge-pupitre {
  background-color: #d9e2ec; /* primary-100 */
  color: #334e68; /* primary-700 */
}

/* Groupe badges - Limpet teal (organizational groups) */
.badge-groupe {
  border-radius: 0.25rem; /* rounded - category style */
  background-color: #d1eded; /* limpet-100 */
  color: #3a7d7d; /* limpet-700 */
}

/* Event type badges - Burgundy wine (calendar events) */
.badge-event {
  background-color: #ebdde1; /* burgundy-100 */
  color: #43222f; /* burgundy-700 */
}

/* ==========================================================================
   4. BUTTON COMPONENT SYSTEM
   ==========================================================================
   Button types per design system:
   - Primary: Marigold CTA buttons (main actions)
   - Secondary: Outlined primary buttons (secondary actions)
   - Ghost: Text-only buttons (tertiary/cancel)
   - Success: Green approve/confirm buttons
   - Warning: Orange soft alternative to destructive
   - Danger Outline: Outlined red for reversible negative actions
   - Danger: Filled red for destructive confirms
   - Icon: Small icon-only buttons for table rows

   Sizes:
   - btn: Default size (py-2 px-4)
   - btn-sm: Compact size (py-1.5 px-3, text-sm)
   - btn-lg: Large size (py-3 px-6)

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

/* Base button - shared styles */
.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 - ensures consistent height */
  border-radius: 0.5rem;          /* rounded-lg */
  border: 2px solid transparent;  /* consistent sizing with bordered buttons */
  transition: background-color 150ms, border-color 150ms, color 150ms, opacity 150ms;
}

/* Focus state for accessibility */
.btn:focus-visible {
  outline: 2px solid #627d98;     /* 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;               /* font-medium — contextual actions, not CTAs */
  border-radius: 0.375rem;        /* rounded-md */
  border-width: 1px;              /* thinner border for small buttons */
}

/* Primary - Marigold CTA */
.btn-primary {
  background-color: #f6c344;      /* marigold-400 */
  color: #1a1714;                 /* warm-900 */
  border-color: #b8941f;          /* marigold-600 */
}

.btn-primary:hover {
  background-color: #d4a72c;      /* marigold-500 */
}

/* Secondary - Outlined primary */
.btn-secondary {
  background-color: white;
  color: #486581;                 /* primary-600 */
  border-color: #486581;          /* primary-600 */
}

.btn-secondary:hover {
  background-color: #f0f4f8;      /* primary-50 */
}

/* Ghost - Text only */
.btn-ghost {
  color: #486581;                 /* primary-600 */
  font-weight: 500;               /* font-medium */
}

.btn-ghost:hover {
  background-color: #f3efe9;      /* warm-100 */
}

/* Success - Approve actions */
.btn-success {
  background-color: #2d9d5a;      /* success-500 */
  color: white;
  border-color: #1a6b3a;          /* success-700 */
}

.btn-success:hover {
  background-color: #238449;      /* success-600 */
}

/* Warning - Soft alternative to destructive */
.btn-warning {
  background-color: #b8860b;      /* warning-500 */
  color: white;
  border-color: #7a5a0a;          /* warning-700 */
}

.btn-warning:hover {
  background-color: #996f09;      /* warning-600 */
}

/* Danger Outline - Reversible negative actions */
.btn-danger-outline {
  background-color: white;
  color: #c53030;                 /* danger-500 */
  border-color: #c53030;          /* danger-500 */
}

.btn-danger-outline:hover {
  background-color: #fee2e2;      /* danger-50 */
}

/* Danger - Destructive confirm */
.btn-danger {
  background-color: #c53030;      /* danger-500 */
  color: white;
  border-color: #991b1b;          /* danger-700 */
}

.btn-danger:hover {
  background-color: #b91c1c;      /* danger-600 */
}

/* Icon button - for table row actions */
.btn-icon {
  padding: 0.375rem;              /* p-1.5 */
  border-radius: 0.25rem;         /* rounded */
  color: #443d37;                 /* warm-700 */
}

.btn-icon:hover {
  background-color: #f3efe9;      /* warm-100 */
}

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

/* ==========================================================================
   5. LINK COMPONENT
   ==========================================================================
   Inline text links. One pattern per design system.

   Pattern: primary-600, hover to primary-700, font-medium

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

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

.link:hover {
  color: theme('colors.primary.700');
}

.link:focus-visible {
  outline: 2px solid theme('colors.primary.500');
  outline-offset: 2px;
}

/* ==========================================================================
   6. TYPOGRAPHY
   ==========================================================================
   Heading styles scoped to <main> to avoid bleeding into Django admin.
   Both staff (staff/base.html) and parent (parent/base.html) templates
   render content inside <main>.

   Override individual properties with utility classes when needed:
   - <h1 class="sm:text-3xl">           → responsive size bump
   - <h2 class="mb-2">                  → tighter margin
   - <h1 class="text-xl">               → smaller h1 for modals
   - <h3 class="text-warm-800 mb-1">    → darker color override

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

main h1 {
  font-size: 1.5rem;        /* text-2xl */
  line-height: 2rem;
  font-weight: 700;         /* font-bold */
  color: #2d2824;           /* warm-800 */
}

main h2 {
  font-size: 1.125rem;      /* text-lg */
  line-height: 1.75rem;
  font-weight: 600;         /* font-semibold */
  color: #2d2824;           /* warm-800 */
  margin-bottom: 1rem;      /* mb-4 */
}

main h3 {
  font-size: 1.125rem;      /* text-lg */
  line-height: 1.75rem;
  font-weight: 500;         /* font-medium */
  color: #443d37;           /* warm-700 */
}

main h4 {
  font-size: 0.875rem;      /* text-sm */
  line-height: 1.25rem;
  font-weight: 500;         /* font-medium */
  color: #443d37;           /* warm-700 */
}

main th {
  text-align: left;
  font-size: 0.875rem;      /* text-sm */
  font-weight: 500;         /* font-medium */
  color: #443d37;           /* warm-700 */
}

/* ==========================================================================
   7. CARD COMPONENT
   ==========================================================================
   Container patterns for content sections. All cards share the same
   visual identity: white background, rounded-xl corners, subtle shadow,
   warm border.

   Variants:
   - card:         Standard section (p-6) — detail views, form wrappers
   - card-compact: Tighter padding (p-4) — filter bars, compact sections
   - card-table:   No padding, overflow-hidden — wraps tables/lists
   - card-empty:   Generous padding, centered text — empty states

   Override padding or add extras with utility classes:
   - <div class="card mb-6">          → standard card + bottom margin
   - <div class="card max-w-xl">      → constrained width
   - <div class="card hover:shadow-md transition-shadow"> → interactive

   Usage:
   - <div class="card">...</div>
   - <div class="card-compact">...</div>
   - <div class="card-table"><table>...</table></div>
   - <div class="card-empty"><p>No results</p></div>
   ========================================================================== */

.card {
  background-color: white;
  border-radius: 0.75rem;          /* rounded-xl */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
  border: 1px solid #e4ddd4;       /* warm-200 */
  padding: 1.5rem;                 /* p-6 */
}

.card-compact {
  background-color: white;
  border-radius: 0.75rem;          /* rounded-xl */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
  border: 1px solid #e4ddd4;       /* warm-200 */
  padding: 1rem;                   /* p-4 */
}

.card-table {
  background-color: white;
  border-radius: 0.75rem;          /* rounded-xl */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
  border: 1px solid #e4ddd4;       /* warm-200 */
  overflow: hidden;
}

.card-empty {
  background-color: white;
  border-radius: 0.75rem;          /* rounded-xl */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
  border: 1px solid #e4ddd4;       /* warm-200 */
  padding: 3rem;                   /* p-12 */
  text-align: center;
}

/* ==========================================================================
   8. FORM INPUTS (bare elements)
   ==========================================================================
   Scoped to <main> to avoid affecting Django admin form controls.
   These provide default styling for all text inputs, selects, and textareas.

   Override with utility classes when needed:
   - <input class="h-auto">            → remove fixed height
   - <textarea class="focus:ring-danger-500 focus:border-danger-500">
                                        → danger-colored focus for rejection fields
   - <input class="w-20 h-10">         → fixed-width color picker

   Special inputs NOT covered (keep their explicit classes):
   - Checkboxes and radios (different sizing/styling)
   - File inputs (custom file button styling)
   - Hidden inputs (no styling needed)
   ========================================================================== */

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: 1px solid #cdc3b8;          /* warm-300 */
  border-radius: 0.5rem;              /* rounded-lg */
  background-color: white;
  color: #2d2824;                     /* warm-800 */
}

main input::placeholder,
main textarea::placeholder {
  color: #a89d91;                     /* warm-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;
  box-shadow: 0 0 0 2px #627d98;     /* ring-2 ring-primary-500 */
  border-color: #627d98;              /* primary-500 */
}

main input:disabled,
main select:disabled,
main textarea:disabled {
  background-color: #f3efe9;          /* warm-100 */
  color: #a89d91;                     /* warm-400 */
  cursor: not-allowed;
}

main textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;            /* py-2 px-3 */
  border: 1px solid #cdc3b8;          /* warm-300 */
  border-radius: 0.5rem;              /* rounded-lg */
  background-color: white;
  color: #2d2824;                     /* warm-800 */
}

/* ==========================================================================
   9. 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;
}