/* ==========================================================================
   base.css — eHaj Design System
   Design tokens, reset, typography, links, breadcrumbs.
   Load this file FIRST: every other file in this architecture (layout.css,
   navigation.css, forms.css, buttons.css, tables.css, cards.css,
   dashboard.css, alerts.css, badges.css, responsive.css) reads the
   custom properties defined here.

   Namespacing: every token/class uses the `eh-` prefix so this system can
   coexist with the public site stylesheet (static/css/site.css) without
   collisions, and so it never touches Django Admin's own CSS.
   ========================================================================== */

:root {
  color-scheme: light;

  
  /* --- Palette : vert profond / doré discret / blanc cassé / bleu nuit --- */
  --eh-transparent: transparent;
  --eh-bg: #fffdf7;
  --eh-bg-soft: #f4f1e8;
  --eh-bg-muted: #eef0e4;
  --eh-surface: #ffffff;

  --eh-border: #e4decd;
  --eh-border-strong: #d8cfb4;

  --eh-text: #17211f;
  --eh-text-soft: #445350;
  --eh-text-muted: #6b756f;
  --eh-text-on-dark: #f4f1e8;
  --eh-text-on-dark-muted: rgba(244, 241, 232, 0.72);

  --eh-green-900: #0a2c25;
  --eh-green-700: #0f3f34;
  --eh-green-600: #14604d;
  --eh-green-100: #e5efec;

  --eh-gold-700: #9c7a34;
  --eh-gold: #b9944c;
  --eh-gold-soft: #e6d7ae;
  --eh-gold-100: #f6efdd;

  --eh-navy-900: #0b1b30;
  --eh-navy: #10233b;
  --eh-navy-soft: #1c3a5e;

  /* Couleur dédiée à l'entrée « Masar Nusuk » de la nav latérale, pour la distinguer des autres liens. */
  --eh-masar: #e5c158;
  /* Lien « Versements » de la barre latérale : distinct de Masar Nusuk (or). */
  --eh-versements: #8fd0f5;

  --eh-white: #ffffff;

  /* --- Statuts (alertes / badges / paiements) --- */
  --eh-success: #1f7a4d;
  --eh-success-bg: #e6f4ec;
  --eh-success-border: #bfe0cc;

  --eh-warning: #a9762a;
  --eh-warning-bg: #faf1de;
  --eh-warning-border: #edd9ab;

  --eh-danger: #a3362b;
  --eh-danger-bg: #fbe9e7;
  --eh-danger-border: #f0c3bd;

  --eh-info: #1d5b8f;
  --eh-info-bg: #e8f1f8;
  --eh-info-border: #bdd9ec;

  --eh-neutral: #55605d;
  --eh-neutral-bg: #eef0ea;
  --eh-neutral-border: #d9dcd2;

  /* --- Forme --- */
  --eh-radius-sm: 6px;
  --eh-radius: 10px;
  --eh-radius-lg: 18px;
  --eh-radius-pill: 999px;

  /* --- Ombres --- */
  --eh-shadow-sm: 0 2px 8px rgba(15, 30, 26, 0.06);
  --eh-shadow: 0 10px 30px rgba(15, 30, 26, 0.08);
  --eh-shadow-lg: 0 22px 60px rgba(15, 30, 26, 0.14);

  /* --- Rythme / échelle --- */
  --eh-space-1: 0.25rem;
  --eh-space-2: 0.5rem;
  --eh-space-3: 0.75rem;
  --eh-space-4: 1rem;
  --eh-space-5: 1.5rem;
  --eh-space-6: 2rem;
  --eh-space-7: 3rem;

  /* --- Typo --- */
  --eh-font-sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Châssis applicatif --- */
  --eh-sidebar-width: 268px;
  --eh-sidebar-width-collapsed: 76px;
  --eh-topbar-height: 68px;

  --eh-transition: 160ms ease;
  --eh-focus-ring: 0 0 0 3px rgba(185, 148, 76, 0.28);

  font-family: var(--eh-font-sans);
}

/* --------------------------------------------------------------------------
   Reset minimal
   -------------------------------------------------------------------------- */

.eh-app *,
.eh-app *::before,
.eh-app *::after {
  box-sizing: border-box;
}

/* L'attribut hidden doit toujours masquer l'élément, y compris quand une
   classe utilitaire (ex. .eh-field, .eh-btn) impose son propre display :
   sans ce !important, ces classes (origine "author") l'emportent sur la
   règle native [hidden] { display: none } (origine "user agent"). */
.eh-app [hidden] {
  display: none !important;
}

.eh-app {
  color: var(--eh-text);
  background: var(--eh-bg);
  font-family: var(--eh-font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.eh-app img {
  display: block;
  max-width: 100%;
}

.eh-app ul,
.eh-app ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.eh-app hr {
  border: 0;
  border-top: 1px solid var(--eh-border);
  margin: var(--eh-space-5) 0;
}

.eh-app ::selection {
  background: var(--eh-gold-soft);
  color: var(--eh-green-900);
}

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */

.eh-app h1,
.eh-app h2,
.eh-app h3,
.eh-app h4,
.eh-app h5,
.eh-app h6 {
  margin: 0 0 0.5em;
  color: var(--eh-green-900);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.eh-app h1 { font-size: clamp(1.7rem, 2.4vw, 2.15rem); }
.eh-app h2 { font-size: clamp(1.4rem, 2vw, 1.7rem); }
.eh-app h3 { font-size: 1.25rem; }
.eh-app h4 { font-size: 1.05rem; }
.eh-app h5 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--eh-text-muted); }
.eh-app h6 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--eh-text-muted); }

.eh-app p {
  margin: 0 0 1em;
  color: var(--eh-text-soft);
}

.eh-app small,
.eh-text-sm { font-size: 0.85rem; }
.eh-text-xs { font-size: 0.75rem; }
.eh-text-muted { color: var(--eh-text-muted) !important; }
.eh-text-success { color: var(--eh-success) !important; }
.eh-text-warning { color: var(--eh-warning) !important; }
.eh-text-danger { color: var(--eh-danger) !important; }
.eh-text-info { color: var(--eh-info) !important; }
.eh-text-gold { color: var(--eh-gold-700) !important; }
.eh-text-right { text-align: right !important; }
.eh-text-center { text-align: center !important; }

/* --------------------------------------------------------------------------
   Liens
   -------------------------------------------------------------------------- */

/* :not(.eh-btn) est nécessaire : sans lui, cette règle (classe + type)
   l'emporte en spécificité sur .eh-btn/.eh-btn-primary (simple classe) et
   écrase la couleur de texte prévue par le bouton (ex. texte vert foncé
   sur fond vert foncé pour un <a class="eh-btn eh-btn-primary">).
   :not(.eh-nav-link) de même : .eh-nav-link (navigation.css) gère déjà
   entièrement sa propre couleur (état de base, :hover, .is-active) pour le
   fond sombre de la barre latérale — la laisser décider seule évite tout
   conflit de spécificité avec la règle "surfaces sombres" ci-dessous.
   :not(.eh-filter-clear) : ce lien doit rester rouge (danger) quel que
   soit ce contexte — sans l'exclusion, sa couleur serait elle aussi
   écrasée par ce vert générique.
   :not(.eh-badge) : les badges (badges.css) pilotent leur propre couleur
   via --_fg selon leur variante (succès/attention/danger...) — un badge
   cliquable (ex. lien "Ajouter photo" de la colonne PDF visite) doit
   garder cette couleur plutôt que le vert générique des liens.
   :not(.eh-user-menu-item) : les entrées du menu utilisateur
   (templates/_user_menu.html) ont leur propre style de liste.
   :not(.eh-pay-cell) : la pastille de paiement (templates/finances/
   _payment_cell.html) garde la couleur du texte pour son montant. */
.eh-app a:not(.eh-btn):not(.eh-nav-link):not(.eh-filter-clear):not(.eh-badge):not(.eh-user-menu-item):not(.eh-pay-cell) {
  color: var(--eh-green-700);
  text-decoration: none;
}

.eh-app a:not(.eh-btn):not(.eh-nav-link):not(.eh-filter-clear):not(.eh-badge):not(.eh-user-menu-item):not(.eh-pay-cell):hover {
  color: var(--eh-green-300);
}

/* Surfaces sombres (fond "900") : le texte ne doit jamais descendre en
   dessous d'un ton clair (--eh-text-on-dark / --eh-green-100 / --eh-white).
   Un vert 600/700/900 en texte sur un fond 900 est illisible.

   Spécificité : ".eh-app a:not(.eh-btn)" ci-dessus vaut (0,2,1) — un
   sélecteur "classe + type" à secteur plus étroit (ex. ".eh-sidebar a",
   (0,1,1)) perd toujours contre lui, quel que soit l'ordre dans le fichier.
   Sans le préfixe ".eh-app" ici, cette règle "surfaces sombres" ne
   s'appliquait donc jamais : c'était le bug (texte vert foncé sur fond
   sombre, ex. .eh-nav-link, exclu ici pour la même raison que ci-dessus). */
.eh-app .eh-sidebar a:not(.eh-btn):not(.eh-nav-link),
.eh-app .eh-summary a:not(.eh-btn),
.eh-app .eh-on-dark a:not(.eh-btn) {
  color: rgba(244, 241, 232, 0.82);
}

.eh-app .eh-sidebar a:not(.eh-btn):not(.eh-nav-link):hover,
.eh-app .eh-summary a:not(.eh-btn):hover,
.eh-app .eh-on-dark a:not(.eh-btn):hover {
  color: var(--eh-white);
}

.eh-app a:focus-visible,
.eh-app button:focus-visible,
.eh-app input:focus-visible,
.eh-app select:focus-visible,
.eh-app textarea:focus-visible,
.eh-app [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--eh-focus-ring);
  border-radius: var(--eh-radius-sm);
}

/* --------------------------------------------------------------------------
   Fil d'Ariane (breadcrumbs)
   -------------------------------------------------------------------------- */

.eh-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--eh-space-4);
  padding: 0;
  color: var(--eh-text-muted);
  font-size: 0.85rem;
}

.eh-breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.eh-breadcrumbs li:not(:last-child)::after {
  content: "/";
  color: var(--eh-border-strong);
}

.eh-breadcrumbs a {
  color: var(--eh-text-muted);
  text-decoration: none;
}

.eh-breadcrumbs a:hover {
  color: var(--eh-green-700);
}

.eh-breadcrumbs .is-current {
  color: var(--eh-text);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Motif géométrique discret (identité islamique subtile)
   Utiliser avec parcimonie : écran de connexion, en-tête de section, footer.
   -------------------------------------------------------------------------- */

.eh-pattern {
  position: relative;
  isolation: isolate;
}

.eh-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(30deg, rgba(185, 148, 76, 0.07) 12%, transparent 12.5%, transparent 87%, rgba(185, 148, 76, 0.07) 87.5%),
    linear-gradient(150deg, rgba(185, 148, 76, 0.07) 12%, transparent 12.5%, transparent 87%, rgba(185, 148, 76, 0.07) 87.5%);
  background-size: 36px 62px;
}

/* --------------------------------------------------------------------------
   Utilitaires d'accessibilité / visibilité
   -------------------------------------------------------------------------- */

/* Tout en !important : une règle plus spécifique ne doit jamais redonner de taille à l'élément masqué. Sans cela,
   `.eh-form input[type="file"]` (width: 100%, padding) élargissait le champ fichier caché des documents (photo,
   scan, justificatif) : positionné en absolu, il dépassait le bord droit et toute la page défilait horizontalement. */
.eh-visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.eh-skip-link {
  position: absolute;
  left: var(--eh-space-4);
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--eh-green-700);
  color: var(--eh-white);
  border-radius: var(--eh-radius-sm);
}

.eh-skip-link:focus {
  top: var(--eh-space-4);
}