/*
 * Afarka — Charte graphique « Terra & Ochre » · couche Bootstrap
 *
 * Les tokens vivent dans afarka-tokens.css (source de vérité unique,
 * alignée sur afarka_django). Ce fichier ne fait qu'appliquer ces tokens
 * aux composants Bootstrap 5 utilisés par la boutique et les dashboards.
 *
 * À charger sur les pages Bootstrap uniquement.
 * Les pages Tailwind (Nafari) chargent afarka-tokens.css + js/afarka-tailwind.js.
 */

@import url('afarka-tokens.css');

/* ═══════════════════════════════════════════
   1. VARIABLES BOOTSTRAP
═══════════════════════════════════════════ */
:root {
  --bs-primary:            #c1502e;
  --bs-primary-rgb:        193, 80, 46;
  --bs-secondary:          #7d5700;
  --bs-secondary-rgb:      125, 87, 0;
  --bs-success:            #51603d;
  --bs-success-rgb:        81, 96, 61;
  --bs-danger:             #ba1a1a;
  --bs-danger-rgb:         186, 26, 26;
  --bs-warning:            #ffc55f;
  --bs-warning-rgb:        255, 197, 95;
  --bs-info:               #57423c;
  --bs-info-rgb:           87, 66, 60;
  --bs-light:              #fff1ec;
  --bs-dark:               #392e2a;

  --bs-body-bg:            #faf6f0;
  --bs-body-color:         #2e2420;
  --bs-body-font-family:   'Inter', sans-serif;
  --bs-emphasis-color:     #2e2420;
  --bs-secondary-color:    #57423c;
  --bs-tertiary-bg:        #fff1ec;

  --bs-border-radius:      0.5rem;
  --bs-border-radius-lg:   0.75rem;
  --bs-border-radius-sm:   0.375rem;
  --bs-border-color:       #dec0b8;

  --bs-link-color:         #c1502e;
  --bs-link-color-rgb:     193, 80, 46;
  --bs-link-hover-color:   #a53c1b;
}

/* ═══════════════════════════════════════════
   2. BASE — Body & typographie
═══════════════════════════════════════════ */
body {
  font-family: var(--afarka-font-body) !important;
  background-color: var(--afarka-background) !important;
  color: var(--afarka-on-surface) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--afarka-font-headline) !important;
  color: var(--afarka-on-surface) !important;
}

a { color: var(--afarka-primary); }
a:hover { color: var(--afarka-primary-dark); }

/* ═══════════════════════════════════════════
   3. BOUTONS
═══════════════════════════════════════════ */
.btn {
  border-radius: var(--afarka-radius-sm) !important;
  font-family: var(--afarka-font-body) !important;
}

.btn-primary {
  --bs-btn-bg:                 #c1502e !important;
  --bs-btn-border-color:       #c1502e !important;
  --bs-btn-hover-bg:           #a53c1b !important;
  --bs-btn-hover-border-color: #a53c1b !important;
  --bs-btn-active-bg:          #842504 !important;
  --bs-btn-disabled-bg:        #c1502e !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.btn-outline-primary {
  --bs-btn-color:              #c1502e !important;
  --bs-btn-border-color:       #c1502e !important;
  --bs-btn-hover-bg:           #c1502e !important;
  --bs-btn-hover-border-color: #c1502e !important;
  font-weight: 600 !important;
}
.btn-outline-primary:hover { color: #ffffff !important; }

.btn-outline-secondary {
  --bs-btn-color:              #7d5700 !important;
  --bs-btn-border-color:       #dec0b8 !important;
  --bs-btn-hover-bg:           #7d5700 !important;
  --bs-btn-hover-border-color: #7d5700 !important;
  --bs-btn-hover-color:        #ffffff !important;
}
.btn-outline-danger {
  --bs-btn-color:              #ba1a1a !important;
  --bs-btn-border-color:       #ba1a1a !important;
  --bs-btn-hover-bg:           #ba1a1a !important;
  --bs-btn-hover-border-color: #ba1a1a !important;
}
.btn-outline-warning {
  --bs-btn-color:              #7d5700 !important;
  --bs-btn-border-color:       #ffc55f !important;
  --bs-btn-hover-bg:           #ffc55f !important;
  --bs-btn-hover-border-color: #ffc55f !important;
  --bs-btn-hover-color:        #271900 !important;
}
.btn-outline-info,
.btn-outline-dark {
  --bs-btn-color:              #57423c !important;
  --bs-btn-border-color:       #8b716a !important;
  --bs-btn-hover-bg:           #57423c !important;
  --bs-btn-hover-border-color: #57423c !important;
  --bs-btn-hover-color:        #ffffff !important;
}
.btn-outline-light {
  --bs-btn-color:              #fff1ec !important;
  --bs-btn-border-color:       #dec0b8 !important;
  --bs-btn-hover-bg:           #fff1ec !important;
  --bs-btn-hover-color:        #2e2420 !important;
}
.btn-outline-success {
  --bs-btn-color:              #3d4b2a !important;
  --bs-btn-border-color:       #51603d !important;
  --bs-btn-hover-bg:           #51603d !important;
  --bs-btn-hover-border-color: #51603d !important;
}

.btn-secondary {
  --bs-btn-bg:                 #7d5700 !important;
  --bs-btn-border-color:       #7d5700 !important;
  --bs-btn-hover-bg:           #5f4100 !important;
  --bs-btn-hover-border-color: #5f4100 !important;
  color: #ffffff !important;
}

/* btn-warning → terracotta (Bootstrap warning = jaune/olive, on remplace) */
.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
  background-color: #c1502e !important;
  border-color:     #c1502e !important;
  color: #ffffff !important;
  border-radius: 0.5rem !important;
  font-weight: 600 !important;
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: #a53c1b !important;
  border-color:     #a53c1b !important;
}

/* text-warning → terracotta */
.text-warning { color: #c1502e !important; }
.bg-warning    { background-color: #c1502e !important; color: #ffffff !important; }

.btn-success {
  --bs-btn-bg:                 #51603d !important;
  --bs-btn-border-color:       #51603d !important;
  --bs-btn-hover-bg:           #3d4b2a !important;
  --bs-btn-hover-border-color: #3d4b2a !important;
  color: #ffffff !important;
}

.btn-danger {
  --bs-btn-bg:                 #ba1a1a !important;
  --bs-btn-border-color:       #ba1a1a !important;
  --bs-btn-hover-bg:           #93000a !important;
  --bs-btn-hover-border-color: #93000a !important;
  color: #ffffff !important;
}

/* L'ocre doré porte du texte brun, jamais du blanc — contraste insuffisant */
.btn-warning {
  --bs-btn-bg:                 #ffc55f !important;
  --bs-btn-border-color:       #ffc55f !important;
  --bs-btn-hover-bg:           #f5bd58 !important;
  --bs-btn-hover-border-color: #f5bd58 !important;
  --bs-btn-color:              #271900 !important;
  color: #271900 !important;
  border-color: #ffc55f !important;
}

.btn-info {
  --bs-btn-bg:                 #57423c !important;
  --bs-btn-border-color:       #57423c !important;
  --bs-btn-hover-bg:           #392e2a !important;
  --bs-btn-hover-border-color: #392e2a !important;
  color: #ffffff !important;
}

.btn-light {
  --bs-btn-bg:                 #fff1ec !important;
  --bs-btn-border-color:       #dec0b8 !important;
  --bs-btn-hover-bg:           #f7e4de !important;
  --bs-btn-color:              #2e2420 !important;
}

.btn-dark {
  --bs-btn-bg:                 #392e2a !important;
  --bs-btn-border-color:       #392e2a !important;
  --bs-btn-hover-bg:           #2e2420 !important;
  color: #ffede7 !important;
}

/* ═══════════════════════════════════════════
   4. UTILITAIRES DE COULEUR
═══════════════════════════════════════════ */
.text-primary   { color: #c1502e !important; }
.text-secondary { color: #7d5700 !important; }
.text-success   { color: #3d4b2a !important; }
.text-danger    { color: #ba1a1a !important; }
.text-warning   { color: #7d5700 !important; }
.text-info      { color: #57423c !important; }
.text-muted     { color: #57423c !important; }
.text-dark      { color: #2e2420 !important; }
/* La charte remplace le noir pur par le brun anthracite */
.text-black     { color: #2e2420 !important; }
.bg-black       { background-color: #2e2420 !important; }

.bg-primary     { background-color: #c1502e !important; color: #ffffff !important; }
.bg-secondary   { background-color: #7d5700 !important; color: #ffffff !important; }
.bg-success     { background-color: #51603d !important; color: #ffffff !important; }
.bg-danger      { background-color: #ba1a1a !important; color: #ffffff !important; }
.bg-warning     { background-color: #ffc55f !important; color: #271900 !important; }
.bg-info        { background-color: #57423c !important; color: #ffffff !important; }
.bg-light       { background-color: #fff1ec !important; }
.bg-dark        { background-color: #392e2a !important; color: #ffede7 !important; }
.bg-body-tertiary { background-color: #fff1ec !important; }

.border-primary { border-color: #c1502e !important; }

/* ═══════════════════════════════════════════
   5. FORMULAIRES
═══════════════════════════════════════════ */
.form-control,
.form-select {
  border-color: var(--afarka-outline-variant) !important;
  border-radius: var(--afarka-radius-sm) !important;
  background-color: var(--afarka-surface-container-low) !important;
  color: var(--afarka-on-surface) !important;
  font-family: var(--afarka-font-body) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--afarka-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(193, 80, 46, 0.2) !important;
  background-color: #ffffff !important;
}
.form-control::placeholder { color: var(--afarka-outline) !important; }

/* Champs sans classe Bootstrap : ni noir pur, ni bordure grise du navigateur */
input, textarea, select {
  color: var(--afarka-on-surface);
  font-family: var(--afarka-font-body);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not(.form-control):not(.form-select),
textarea:not(.form-control),
select:not(.form-select) {
  border: 1px solid var(--afarka-outline-variant);
  border-radius: var(--afarka-radius-sm);
}
input::placeholder, textarea::placeholder { color: var(--afarka-outline); }

.form-label {
  font-family: var(--afarka-font-body) !important;
  font-weight: 500 !important;
  color: var(--afarka-on-surface-variant) !important;
  font-size: 0.875rem !important;
}

/* crispy-forms : l'astérisque « requis » sort en rouge pur par défaut */
.asteriskField,
.requiredField .asteriskField {
  color: var(--afarka-error) !important;
  border-color: var(--afarka-error) !important;
}
.errorlist,
.invalid-feedback,
.text-error { color: var(--afarka-error) !important; }
.is-invalid, .form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--afarka-error) !important;
}
.helptext, .form-text { color: var(--afarka-on-surface-variant) !important; }

.form-check-input:checked {
  background-color: var(--afarka-primary) !important;
  border-color: var(--afarka-primary) !important;
}
.form-check-input:focus {
  border-color: var(--afarka-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(193, 80, 46, 0.2) !important;
}

/* ═══════════════════════════════════════════
   6. NAVBAR — barre sombre + barre claire
═══════════════════════════════════════════ */
.section-header .navbar {
  background-color: var(--afarka-inverse-surface) !important;
  min-height: 40px !important;
  padding: 0 !important;
}

.section-header .navbar .nav-link {
  color: rgba(255, 237, 231, 0.8) !important;
  font-family: var(--afarka-font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 0.75rem !important;
  transition: color 0.2s !important;
}
.section-header .navbar .nav-link:hover,
.section-header .navbar .nav-link.active {
  color: var(--afarka-primary-fixed) !important;
}

.section-header .navbar .navbar-nav { gap: 0 !important; }

.section-header .header-main {
  background-color: var(--afarka-surface-container-lowest) !important;
  border-bottom: 1px solid var(--afarka-outline-variant) !important;
  padding: 0.75rem 0 !important;
  box-shadow: var(--afarka-shadow-ambient) !important;
}

.section-header .brand-wrap .logo,
.brand-wrap img,
.navbar-brand img,
.logo,
img.logo {
  max-height: 42px !important;
  height: 42px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  display: inline-block !important;
}

.section-header .search .form-control {
  border-color: var(--afarka-outline-variant) !important;
  border-radius: var(--afarka-radius-sm) !important;
  background-color: var(--afarka-surface-container-low) !important;
  font-family: var(--afarka-font-body) !important;
  font-size: 0.875rem !important;
  height: 2.5rem !important;
}
.section-header .search .form-control:focus {
  border-color: var(--afarka-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(193, 80, 46, 0.2) !important;
  background-color: #ffffff !important;
}

.section-header .icon {
  width: 40px !important;
  height: 40px !important;
  border-color: var(--afarka-outline-variant) !important;
  color: var(--afarka-on-surface-variant) !important;
  transition: color 0.2s, border-color 0.2s !important;
}
.section-header .icon:hover {
  color: var(--afarka-primary) !important;
  border-color: var(--afarka-primary) !important;
}
.section-header .icon i { color: inherit !important; }

.section-header .badge,
.section-header .notify {
  background-color: var(--afarka-primary) !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
}

.section-header .icontext .text {
  font-family: var(--afarka-font-body) !important;
  font-size: 0.8125rem !important;
  color: var(--afarka-on-surface) !important;
  line-height: 1.3 !important;
}
.section-header .icontext .text span {
  font-weight: 500 !important;
  color: var(--afarka-on-surface) !important;
}
.section-header .icontext .text a {
  color: var(--afarka-on-surface-variant) !important;
  text-decoration: none !important;
  font-size: 0.75rem !important;
}
.section-header .icontext .text a:hover { color: var(--afarka-primary) !important; }

/* ═══════════════════════════════════════════
   7. CARTES — élévation niveau 1
═══════════════════════════════════════════ */
.card {
  border-color: var(--afarka-outline-variant) !important;
  border-radius: var(--afarka-radius-md) !important;
  box-shadow: var(--afarka-shadow-ambient) !important;
  background-color: var(--afarka-surface-container-lowest) !important;
  transition: box-shadow 0.2s !important;
}
.card:hover { box-shadow: var(--afarka-shadow-hover) !important; }
.card-title {
  font-family: var(--afarka-font-headline) !important;
  color: var(--afarka-on-surface) !important;
}
.card-header {
  background-color: var(--afarka-surface-container-low) !important;
  border-bottom-color: var(--afarka-outline-variant) !important;
}
.card-footer {
  background-color: var(--afarka-surface-container-low) !important;
  border-top-color: var(--afarka-outline-variant) !important;
}

/* ═══════════════════════════════════════════
   8. PAGINATION
═══════════════════════════════════════════ */
.pagination {
  --bs-pagination-bg:                 var(--afarka-surface-container-lowest);
  --bs-pagination-disabled-bg:        var(--afarka-surface-container-low);
  --bs-pagination-border-color:       var(--afarka-outline-variant);
  --bs-pagination-hover-bg:           var(--afarka-surface-container);
  --bs-pagination-hover-border-color: var(--afarka-outline-variant);
  --bs-pagination-disabled-border-color: var(--afarka-outline-variant);
}
.page-link {
  color: var(--afarka-primary) !important;
  border-color: var(--afarka-outline-variant) !important;
}
.page-item.active .page-link {
  background-color: var(--afarka-primary) !important;
  border-color: var(--afarka-primary) !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════
   9. BADGES — pilule, ocre doré sur brun
═══════════════════════════════════════════ */
.badge {
  border-radius: var(--afarka-radius-full) !important;
  font-family: var(--afarka-font-body) !important;
  font-weight: 600 !important;
}
.badge.bg-primary,
.badge.text-bg-primary   { background-color: #c1502e !important; color: #ffffff !important; }
.badge.bg-secondary,
.badge.text-bg-secondary { background-color: #ffc55f !important; color: #271900 !important; }
.badge.bg-success,
.badge.text-bg-success   { background-color: #d8e9bc !important; color: #3d4b2a !important; }
.badge.bg-danger,
.badge.text-bg-danger    { background-color: #ffdad6 !important; color: #93000a !important; }
.badge.bg-warning,
.badge.text-bg-warning   { background-color: #ffdeaa !important; color: #5f4100 !important; }
.badge.bg-info,
.badge.text-bg-info      { background-color: #f1dfd8 !important; color: #57423c !important; }

/* ═══════════════════════════════════════════
   10. ALERTES
═══════════════════════════════════════════ */
.alert {
  border-radius: var(--afarka-radius-sm) !important;
  font-family: var(--afarka-font-body) !important;
}
.alert-success {
  background-color: #d8e9bc !important;
  border-color: #bccda1 !important;
  color: #3d4b2a !important;
}
.alert-danger {
  background-color: var(--afarka-error-container) !important;
  border-color: #ffb4ab !important;
  color: #93000a !important;
}
.alert-warning {
  background-color: #ffdeaa !important;
  border-color: #ffc55f !important;
  color: #5f4100 !important;
}
.alert-info {
  background-color: #f1dfd8 !important;
  border-color: #dec0b8 !important;
  color: #57423c !important;
}
.alert-primary {
  background-color: #ffdbd1 !important;
  border-color: #ffb5a0 !important;
  color: #842504 !important;
}

/* ═══════════════════════════════════════════
   11. TABLES
═══════════════════════════════════════════ */
.table {
  font-family: var(--afarka-font-body) !important;
  color: var(--afarka-on-surface) !important;
}
.table th {
  font-family: var(--afarka-font-body) !important;
  font-weight: 600 !important;
  color: var(--afarka-on-surface-variant) !important;
  background-color: var(--afarka-surface-container) !important;
  border-color: var(--afarka-outline-variant) !important;
}
.table td {
  border-color: var(--afarka-outline-variant) !important;
  vertical-align: middle !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: #fff1ec !important;
  background-color: #fff1ec !important;
}
.table-hover > tbody > tr:hover > * {
  background-color: #fdeae3 !important;
}

/* ═══════════════════════════════════════════
   12. DROPDOWN / MODALES / ONGLETS
═══════════════════════════════════════════ */
.dropdown-menu {
  border-radius: var(--afarka-radius-sm) !important;
  border-color: var(--afarka-outline-variant) !important;
  box-shadow: var(--afarka-shadow-hover) !important;
  font-family: var(--afarka-font-body) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--afarka-surface-container) !important;
  color: var(--afarka-primary) !important;
}
.dropdown-item.active {
  background-color: var(--afarka-primary) !important;
  color: #ffffff !important;
}

.modal-content {
  border-radius: var(--afarka-radius-lg) !important;
  border-color: var(--afarka-outline-variant) !important;
  background-color: var(--afarka-surface-container-lowest) !important;
}
.modal-header,
.modal-footer { border-color: var(--afarka-outline-variant) !important; }
.modal-title { font-family: var(--afarka-font-headline) !important; }

.nav-tabs .nav-link {
  color: var(--afarka-on-surface-variant) !important;
  font-family: var(--afarka-font-body) !important;
}
.nav-tabs .nav-link.active {
  color: var(--afarka-primary) !important;
  border-bottom-color: var(--afarka-primary) !important;
}

.progress { background-color: var(--afarka-surface-container-high) !important; }
.progress-bar { background-color: var(--afarka-primary) !important; }

.list-group-item {
  border-color: var(--afarka-outline-variant) !important;
  background-color: var(--afarka-surface-container-lowest) !important;
  color: var(--afarka-on-surface) !important;
}

hr { border-color: var(--afarka-outline-variant) !important; opacity: 1 !important; }

/* ═══════════════════════════════════════════
   13. FOOTER
═══════════════════════════════════════════ */
footer,
.footer,
.section-footer {
  background-color: var(--afarka-inverse-surface) !important;
  color: var(--afarka-inverse-on-surface) !important;
  font-family: var(--afarka-font-body) !important;
}
footer a,
.footer a,
.section-footer a {
  color: rgba(255, 237, 231, 0.8) !important;
  text-decoration: none !important;
}
footer a:hover,
.footer a:hover,
.section-footer a:hover { color: var(--afarka-primary-fixed) !important; }

/* ═══════════════════════════════════════════
   14. LOADER
═══════════════════════════════════════════ */
/* Le balisage vit dans base/base.html ; sans ces règles le logo s'affiche
   à sa taille naturelle et .hidden — ajoutée au load — n'a aucun effet. */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--afarka-space-lg);
  background: var(--afarka-background);
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

#page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-logo {
  height: 56px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

.loader-bar {
  position: relative;
  width: 180px;
  height: 3px;
  border-radius: var(--afarka-radius-full);
  background: var(--afarka-surface-container-high);
  overflow: hidden;
}

.loader-bar-fill {
  position: absolute;
  inset-block: 0;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--afarka-primary), var(--afarka-primary-fixed));
  animation: afarka-loader 1.1s ease-in-out infinite;
}

@keyframes afarka-loader {
  0%   { left: -40%; }
  100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .loader-bar-fill { animation: none; left: 0; width: 100%; }
  #page-loader { transition: none; }
}

/* ═══════════════════════════════════════════
   15. INPUTS TÉLÉPHONE (intl-tel-input)
═══════════════════════════════════════════ */
.iti__selected-flag {
  border-radius: var(--afarka-radius-sm) 0 0 var(--afarka-radius-sm) !important;
  background-color: var(--afarka-surface-container-low) !important;
}
.iti__country-list {
  border-color: var(--afarka-outline-variant) !important;
  box-shadow: var(--afarka-shadow-hover) !important;
}
.iti__country.iti__highlight {
  background-color: var(--afarka-surface-container) !important;
}
.iti__dial-code { color: var(--afarka-on-surface-variant) !important; }
.iti__arrow { border-top-color: var(--afarka-outline) !important; }
.iti__country-name { color: var(--afarka-on-surface) !important; }
/* .iti__flag garde son fond : c'est le sprite des drapeaux, pas une couleur de charte */

/* ═══════════════════════════════════════════
   16. SWEETALERT
═══════════════════════════════════════════ */
.swal2-popup {
  border-radius: var(--afarka-radius-lg) !important;
  font-family: var(--afarka-font-body) !important;
  background: var(--afarka-surface-container-lowest) !important;
  color: var(--afarka-on-surface) !important;
}
.swal2-title { font-family: var(--afarka-font-headline) !important; }
.swal2-styled.swal2-confirm {
  background-color: var(--afarka-primary) !important;
  border-radius: var(--afarka-radius-sm) !important;
}
.swal2-styled.swal2-cancel {
  background-color: var(--afarka-surface-container-high) !important;
  color: var(--afarka-on-surface) !important;
  border-radius: var(--afarka-radius-sm) !important;
}