/* ask-theme.css — charte graphique du back-office (relooking, lot 0).
   Chargé par le SEUL layout back-office (Views/Shared/_Layout.cshtml), jamais par le Portail.
   RÈGLE : tout ce qui est défini ici porte le préfixe « ak- » (classes) ou « --ak- » (variables).
   Aucun sélecteur ne vise une balise ni une classe Bootstrap : tant qu'une vue n'utilise pas explicitement
   une classe « ak- », ce fichier ne change RIEN à son rendu (verrouillé par AskThemeFormeTests).
   Les valeurs reprennent la palette du projet (site.css) ; seul le turquoise « Confirmer » est nouveau.
   Icônes : Bootstrap Icons (déjà chargé en local), une icône par verbe — voir README, « Charte graphique ». */

:root {
  --ak-marine: #133357;
  --ak-marine-survol: #0D2540;
  --ak-turquoise: #0D9488;
  --ak-turquoise-survol: #0b7d73;
  --ak-rouge: #B3261E;
  --ak-rouge-fond: #FDECEC;
  --ak-texte: #212529;
  --ak-texte-doux: #5F6B7A;
  --ak-fond-page: #F4F6F8;
  --ak-fond-carte: #FFFFFF;
  --ak-fond-entete-tableau: #FAFBFC;
  --ak-bordure: #DEE2E6;
  --ak-bordure-champ: #CBD3DE;
  --ak-focus: rgba(61, 155, 233, .45);
  --ak-vert: #1E7B34;
  --ak-vert-fond: #E6F4EA;
  --ak-ambre: #8A5A00;
  --ak-ambre-fond: #FFF1D6;
  --ak-gris-fond: #EEF1F5;
  --ak-rayon: 8px;
  --ak-rayon-carte: 12px;
  --ak-hauteur-bouton: 32px;
  --ak-hauteur-bouton-sm: 26px;

  /* Tailles de texte : une seule base (14 px), tout le reste en proportion. Les écrans relookés (.ak-page) peuvent changer la base. */
  --ak-base: .875rem;
  --ak-t-xs: calc(var(--ak-base) * .857);
  --ak-t-sm: calc(var(--ak-base) * .9286);
  --ak-t-titre: calc(var(--ak-base) * 1.5714);
}

/* ---------- Boutons : base + 5 types ---------- */

.ak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--ak-hauteur-bouton);
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--ak-rayon);
  font-size: var(--ak-base);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  color: var(--ak-texte);
}

.ak-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--ak-focus);
}

.ak-btn:disabled,
.ak-btn.disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Principal : UN seul par écran (créer, enregistrer) */
.ak-btn-principal {
  background: var(--ak-marine);
  border-color: var(--ak-marine);
  color: #fff;
}

.ak-btn-principal:hover {
  background: var(--ak-marine-survol);
  border-color: var(--ak-marine-survol);
  color: #fff;
}

/* Secondaire : exporter, filtrer, imprimer */
.ak-btn-secondaire {
  background: var(--ak-fond-carte);
  border-color: var(--ak-bordure-champ);
  color: var(--ak-texte);
}

.ak-btn-secondaire:hover {
  background: var(--ak-fond-entete-tableau);
  border-color: var(--ak-texte-doux);
  color: var(--ak-texte);
}

/* Confirmer : validation d'une opération financière */
.ak-btn-confirmer {
  background: var(--ak-turquoise);
  border-color: var(--ak-turquoise);
  color: #fff;
}

.ak-btn-confirmer:hover {
  background: var(--ak-turquoise-survol);
  border-color: var(--ak-turquoise-survol);
  color: #fff;
}

/* Sensible : contre-passer, archiver, révoquer — jamais le bouton principal */
.ak-btn-sensible {
  background: var(--ak-fond-carte);
  border-color: var(--ak-rouge);
  color: var(--ak-rouge);
}

.ak-btn-sensible:hover {
  background: var(--ak-rouge-fond);
  border-color: var(--ak-rouge);
  color: var(--ak-rouge);
}

/* Discret : retour, annuler, actions de ligne */
.ak-btn-discret {
  background: transparent;
  border-color: transparent;
  color: var(--ak-texte-doux);
}

.ak-btn-discret:hover {
  background: var(--ak-gris-fond);
  color: var(--ak-texte);
}

/* Variantes */
.ak-btn-sm {
  min-height: var(--ak-hauteur-bouton-sm);
  padding: 0 10px;
  font-size: var(--ak-t-sm);
}

.ak-btn-icone {
  width: var(--ak-hauteur-bouton);
  min-height: var(--ak-hauteur-bouton);
  padding: 0;
}

.ak-btn-icone.ak-btn-sm {
  width: var(--ak-hauteur-bouton-sm);
  min-height: var(--ak-hauteur-bouton-sm);
}

/* ---------- Pastilles de statut (voir la table « statut → couleur » du README) ---------- */

.ak-pastille {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--ak-t-xs);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--ak-gris-fond);
  color: var(--ak-texte-doux);
}

.ak-pastille-ok {
  background: var(--ak-vert-fond);
  color: var(--ak-vert);
}

.ak-pastille-attente {
  background: var(--ak-ambre-fond);
  color: var(--ak-ambre);
}

.ak-pastille-neutre {
  background: var(--ak-gris-fond);
  color: var(--ak-texte-doux);
}

.ak-pastille-erreur {
  background: var(--ak-rouge-fond);
  color: var(--ak-rouge);
}

/* ---------- Carte ---------- */

.ak-carte {
  background: var(--ak-fond-carte);
  border: 1px solid var(--ak-bordure);
  border-radius: var(--ak-rayon-carte);
  margin-bottom: 1rem;
  overflow: hidden;
}

.ak-carte-corps {
  padding: 20px 24px;
}

.ak-carte-pied {
  padding: 12px 24px;
  border-top: 1px solid var(--ak-bordure);
  background: var(--ak-fond-entete-tableau);
  color: var(--ak-texte-doux);
  font-size: var(--ak-t-sm);
}

/* ---------- En-tête de page : titre + sous-titre à gauche, actions à droite ---------- */

.ak-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 1.25rem;
}

.ak-entete-titre {
  margin: 0;
  font-size: var(--ak-t-titre);
  font-weight: 500;
  color: var(--ak-marine);
}

.ak-entete-soustitre {
  margin: 2px 0 0;
  font-size: var(--ak-t-sm);
  color: var(--ak-texte-doux);
}

.ak-entete-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ---------- Formulaire : sections, aide, barre d'actions ---------- */

.ak-section {
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ak-bordure);
  font-size: var(--ak-t-sm);
  font-weight: 500;
  color: var(--ak-marine);
}

.ak-aide {
  margin-top: 4px;
  font-size: var(--ak-t-xs);
  color: var(--ak-texte-doux);
}

/* Annuler à gauche, Enregistrer à droite ; l'ordre du DOM reste Annuler puis Enregistrer (tabulation, touche Entrée) */
.ak-actions-formulaire {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ak-bordure);
}

/* ---------- Tableau de données (à poser sur <table>, dans une .ak-carte) ---------- */

.ak-tableau {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--ak-t-sm);
}

.ak-tableau th {
  padding: 9px 16px;
  background: var(--ak-fond-entete-tableau);
  border-bottom: 1px solid var(--ak-bordure);
  font-size: var(--ak-t-xs);
  font-weight: 500;
  text-align: left;
  color: var(--ak-texte-doux);
  white-space: nowrap;
}

.ak-tableau td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--ak-bordure);
  vertical-align: middle;
  color: var(--ak-texte);
}

.ak-tableau tbody tr:hover {
  background: var(--ak-fond-entete-tableau);
}

.ak-tableau tbody tr:last-child td {
  border-bottom: 0;
}

/* Colonne de montants : alignée à droite, chiffres de même largeur */
.ak-tableau th.ak-num,
.ak-tableau td.ak-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Un montant ne se coupe jamais sur deux lignes (« 2 200,00 / DT ») : visible en « Grand » (16 px). */
.ak-tableau td.ak-num {
  white-space: nowrap;
}

/* Colonne d'actions : alignée à droite */
.ak-tableau th.ak-act,
.ak-tableau td.ak-act {
  text-align: right;
  white-space: nowrap;
}

/* État vide d'une liste */
.ak-vide {
  padding: 32px 24px;
  text-align: center;
  color: var(--ak-texte-doux);
}

/* ============================================================
   Pilote Règlements (P1) — périmètre des écrans relookés
   ============================================================ */

/* Conteneur posé à la racine de chaque écran relooké : c'est lui, et lui seul, qui fixe la taille du texte (14 px).
   Les variables dérivées sont redéclarées ici pour suivre une base modifiée sur ce conteneur. */
.ak-page {
  --ak-t-xs: calc(var(--ak-base) * .857);
  --ak-t-sm: calc(var(--ak-base) * .9286);
  --ak-t-titre: calc(var(--ak-base) * 1.5714);
  font-size: var(--ak-base);
}

.ak-entete-gauche {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Champs (remplacent form-control dans les écrans relookés) */
.ak-champ {
  display: block;
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid var(--ak-bordure-champ);
  border-radius: var(--ak-rayon);
  background: var(--ak-fond-carte);
  color: var(--ak-texte);
  font-size: var(--ak-base);
  line-height: 1.4;
}

.ak-champ:focus {
  outline: 0;
  border-color: #3D9BE9;
  box-shadow: 0 0 0 3px var(--ak-focus);
}

/* Classe posée par ASP.NET sur un champ refusé par le serveur : aujourd'hui sans aucun style */
.ak-champ.input-validation-error {
  border-color: var(--ak-rouge);
}

.ak-champ-sm {
  min-height: var(--ak-hauteur-bouton-sm);
  padding: 2px 8px;
  font-size: var(--ak-t-sm);
}

/* Tableau : en-têtes triables et actions de ligne */
.ak-tableau th a {
  color: inherit;
  text-decoration: none;
}

.ak-tableau th a:hover {
  text-decoration: underline;
}

.ak-act > * + * {
  margin-left: 6px;
}

.ak-vide .bi {
  display: block;
  margin-bottom: 6px;
  font-size: calc(var(--ak-base) * 2);
}

/* Menu « ⋮ » (dropdown Bootstrap) */
.ak-menu-liste {
  min-width: 200px;
  padding: 4px;
  border: 1px solid var(--ak-bordure);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
  font-size: var(--ak-t-sm);
}

.ak-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--ak-texte);
}

.ak-menu-item:hover,
.ak-menu-item:focus {
  background: var(--ak-gris-fond);
  color: var(--ak-texte);
}

/* Pagination en pied de carte */
.ak-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.ak-pagination-droite {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   Pilote Règlements (P2) — formulaires
   ============================================================ */

/* Largeur de lecture d'un formulaire (la maquette limite à 900 px) */
.ak-largeur-formulaire {
  max-width: 900px;
}

/* Grille de formulaire : 2 colonnes, une seule sous 768 px ; .ak-grille-pleine occupe toute la largeur */
.ak-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin-bottom: 18px;
}

.ak-grille-pleine {
  grid-column: 1 / -1;
}

@media (max-width: 767.98px) {
  .ak-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ak-grille .ak-champ {
  width: 100%;
}

.ak-etiquette {
  display: block;
  margin-bottom: 4px;
  font-size: var(--ak-t-xs);
  color: var(--ak-texte-doux);
}

/* Champ monétaire : l'unité « DT » est incrustée à droite (sans masquer la saisie) */
.ak-champ-unite {
  position: relative;
}

.ak-champ-unite .ak-champ {
  padding-right: 38px;
}

.ak-unite {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: var(--ak-texte-doux);
  font-size: var(--ak-t-xs);
  pointer-events: none;
}

/* Encart d'information (solde du copropriétaire, résumé). ATTENTION : aucune propriété « display » ici — le bandeau de solde est
   masqué/affiché par l'attribut hidden que pilote reglement-create.js ; un display le rendrait toujours visible. */
.ak-info {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--ak-bordure);
  border-left: 3px solid var(--ak-marine);
  border-radius: var(--ak-rayon);
  background: var(--ak-fond-carte);
}

.ak-recap {
  margin: 0 0 14px;
  line-height: 1.7;
}

/* ============================================================
   Pilote Règlements (P3) — fiche
   ============================================================ */

/* Liste « libellé : valeur » d'une fiche (remplace dl.row / col-sm-3 / col-sm-9) */
.ak-dl {
  display: grid;
  grid-template-columns: minmax(130px, 200px) minmax(0, 1fr);
  gap: 10px 20px;
  margin: 0;
}

.ak-dl dt {
  font-weight: 400;
  color: var(--ak-texte-doux);
}

.ak-dl dd {
  margin: 0;
}

@media (max-width: 575.98px) {
  .ak-dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 0;
  }

  .ak-dl dd {
    margin-bottom: 10px;
  }
}

/* ============================================================
   Taille du texte (préférence du compte, « Mon profil »)
   ============================================================ */

/* La classe est posée sur le contenu de la page par le layout pour un compte « Grand » (16 px) ; Standard (14 px) = aucune classe.
   Elle ne touche que les écrans refondus (.ak-page) : sans .ak-page dans la page, elle n'a aucun effet. */
.ak-taille-grand .ak-page {
  --ak-base: 1rem;
}

/* ---------- Liste de cases à cocher (ex. utilisateurs autorisés sur une caisse) ---------- */

.ak-liste-cases {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ak-bordure);
  border-radius: 8px;
}

.ak-liste-cases li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
}

.ak-liste-cases li + li {
  border-top: 1px solid var(--ak-bordure);
}

/* ---------- Montant dû (Impayés) : texte rouge, jamais une pastille ---------- */

.ak-tableau td.ak-montant-du {
  color: var(--ak-rouge);
  font-weight: 500;
}

/* Case à cocher d'une ligne de tableau : contour lisible (celui de Bootstrap est très pâle) */
.ak-tableau .form-check-input {
  border-color: var(--ak-texte-doux);
}

/* ---------- Barre d'exports sous un tableau sélectionnable ---------- */

.ak-actions-export {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--ak-bordure);
}

/* ---------- Contenu posé directement dans une carte (fiches : paragraphes, titres de section, formulaires de recherche) ---------- */

.ak-carte > p,
.ak-carte > h2.ak-section,
.ak-carte > h3.ak-section,
.ak-carte > form,
.ak-carte > dl,
.ak-carte > .ak-info,
.ak-carte > .alert {
  margin-left: 20px;
  margin-right: 20px;
}

.ak-carte > :first-child:not(.ak-carte-corps):not(.table-responsive) {
  margin-top: 16px;
}

.ak-carte > h2.ak-section,
.ak-carte > h3.ak-section {
  margin-top: 20px;
}

/* ---------- Tableau de bord : tuiles d'indicateurs ---------- */

.ak-kpi {
  padding: 14px 18px;
  height: 100%;
}

.ak-kpi-etiquette {
  font-size: var(--ak-t-xs);
  color: var(--ak-texte-doux);
}

.ak-kpi-valeur {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ak-marine);
}

.ak-kpi-detail {
  font-size: var(--ak-t-xs);
  color: var(--ak-texte-doux);
  margin-top: 4px;
}

/* Menu « ⋮ » d'une ligne : entrée-bouton d'un formulaire POST (ex. Réactiver) et entrée sensible (archiver, supprimer...) */

.ak-menu-liste button.ak-menu-item {
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
}

.ak-menu-item.ak-menu-sensible,
.ak-menu-item.ak-menu-sensible:hover,
.ak-menu-item.ak-menu-sensible:focus {
  color: var(--ak-rouge);
}

.ak-menu-liste form {
  margin: 0;
}

/* Règle du mot de passe (pages Réinitialiser / Changer le mot de passe) : texte + liste de contrôle cochée par regle-mdp.js (attributs data-actif / data-ok, aucune classe posée par le script). Même rendu back-office et Portail (les deux layouts chargent ce fichier). */
.ak-regle-mdp { background: var(--ak-gris-fond); border: 1px solid var(--ak-bordure); border-radius: var(--ak-rayon); padding: .75rem 1rem; margin-bottom: 1rem; max-width: 36rem; }
.ak-regle-mdp-texte { margin: 0 0 .5rem; color: var(--ak-texte); }
.ak-regle-mdp-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.ak-regle-mdp-liste li { color: var(--ak-texte-doux); }
.ak-regle-mdp[data-actif] .ak-regle-mdp-liste li::before { content: "\25CB"; display: inline-block; width: 1.25em; }
.ak-regle-mdp[data-actif] .ak-regle-mdp-liste li[data-ok] { color: var(--ak-vert); }
.ak-regle-mdp[data-actif] .ak-regle-mdp-liste li[data-ok]::before { content: "\2713"; font-weight: 700; }
@media (max-width: 575.98px) { .ak-regle-mdp-liste { flex-direction: column; } }

/* Bandeau « Mode test » (liste blanche d'envoi active) : bandeau ambre sous la barre du haut, back-office seulement. */
.ak-bandeau-test { background: var(--ak-ambre-fond); color: var(--ak-ambre); border-bottom: 1px solid var(--ak-ambre); padding: .4rem 1.5rem; font-weight: 600; font-size: .85rem; }
.ak-bandeau-test i { margin-right: .4rem; }

/* ============================================================
   Coque — menu latéral (sous-lot C2) : style de la maquette 1
   ============================================================ */

/* Tout est sous .ak-coque-menu (classe posée sur le conteneur du layout du back-office, jamais sur celui du Portail) : retirer cette classe de
   Views/Shared/_Layout.cshtml rend le menu à son style d'avant. Aucune dimension ne change (largeur 240 px / 64 px replié, hauteurs de ligne) :
   seules les couleurs, l'état actif et le style des titres de groupe changent, donc le contenu des pages ne bouge pas d'un pixel. */
.ak-coque-menu .sb-group-label {
  font-size: .75rem;
  letter-spacing: 0;
  text-transform: none;
  color: #8FA5C2;
}

.ak-coque-menu .sb-row {
  color: #B9C7DB;
}

.ak-coque-menu .sb-row:hover {
  background: #1B3F69;
  color: #fff;
}

.ak-coque-menu .sb-row.active {
  background: #25507F;
  color: #fff;
  border-left: 0;
  padding-left: .5rem;
  box-shadow: inset 3px 0 0 #3D9BE9;
}

/* ============================================================
   Coque — barre du haut : fil d'Ariane (sous-lot C3)
   ============================================================ */

/* Le fil remplace le titre dans la barre du haut du back-office. Aucune hauteur n'est fixée : la barre garde la hauteur que lui donne son
   contenu de droite (cloche et menu du compte), donc le contenu des pages ne bouge pas. */
.ak-coque-fil-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  color: var(--ak-texte-doux);
}

.ak-coque-fil-liste li + li::before {
  content: "/";
  margin: 0 .5rem;
  color: #8B95A5;
}

.ak-coque-fil-ecran {
  color: var(--ak-texte);
  font-weight: 500;
}

.ak-coque-fil-lien {
  color: inherit;
  text-decoration: none;
}

.ak-coque-fil-lien:hover,
.ak-coque-fil-lien:focus-visible {
  text-decoration: underline;
}