/* ===========================================================================
   ÉCRAN — ACTIONS COMMERCIALES (.acm-*)   CLI-05

   FEUILLE D'ÉCRAN et non de module : l'agenda hebdomadaire à sept colonnes ne
   sert qu'ici. La règle du dépôt est nette dans les deux sens — une classe
   employée par deux écrans remonte dans la feuille de module ou dans le
   gabarit, une classe employée par UN écran reste dans la sienne, sous peine
   qu'un écran finisse par dépendre de la feuille d'un autre pour s'afficher.

   CE QU'ELLE REMPLACE
     Sept `md-card` posées dans un flex, chacune avec `style="min-width:13rem;
     max-width:13rem"` écrit à la main dans le balisage, et `border-primary`
     pour marquer le jour courant — c'est-à-dire le bleu de Bootstrap, qui n'est
     pas celui de la charte. La carte d'action, elle, était un `border rounded
     bg-white` : un rayon là où la charte n'en veut plus, et un blanc littéral.

   AUCUNE COULEUR LITTÉRALE. Tout vient des jetons --et-* d'easytech-theme.css.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. LA SEMAINE

   Sept colonnes de largeur ÉGALE et non `flex: 0 0 13rem` : un jour n'est pas
   plus large qu'un autre parce qu'il porte plus de rendez-vous. Sous la largeur
   utile, la bande défile horizontalement d'un bloc — un agenda hebdomadaire qui
   se replierait sur deux lignes cesserait d'être une semaine.

   Les filets viennent de la GOUTTIÈRE sur fond de filet, comme la bande de
   faits saillants du gabarit : c'est ce qui évite le filet double entre deux
   colonnes voisines.
   --------------------------------------------------------------------------- */
.acm-semaine {
    display: grid;
    grid-template-columns: repeat(7, minmax(13rem, 1fr));
    gap: 1px;
    background: var(--et-hairline);
    border: 1px solid var(--et-hairline);
    overflow-x: auto;
}

.acm-jour { display: flex; flex-direction: column; min-width: 0; background: var(--et-surface); }

.acm-jour-tete {
    padding: 7px 10px;
    background: var(--et-surface-2);
    border-bottom: 1px solid var(--et-hairline);
    font-size: 13px; font-weight: 600; color: var(--et-ink);
    text-transform: capitalize;
}

/* AUJOURD'HUI se marque par un filet, pas par un aplat : sept colonnes dont une
   colorée se lit comme « cette colonne a un problème ». Le filet, lui, dit
   seulement « vous êtes ici ». Il est en bleu de contenu — un repère, pas un
   état. */
.acm-jour.est-aujourdhui .acm-jour-tete {
    box-shadow: inset 0 3px 0 var(--et-form-blue);
    color: var(--et-form-blue-d);
}

.acm-jour-corps { padding: 8px; max-height: 65vh; overflow-y: auto; }
.acm-jour-vide { padding: 14px 0; text-align: center; color: var(--et-inerte); font-size: 13px; }

/* ---------------------------------------------------------------------------
   2. LA CARTE D'UNE ACTION

   Surface plate à filet, comme .mx-carte : « la structure tient par les
   filets ». Une action EN RETARD porte le liseré gauche ambre — la même forme
   que .mx-tbl tr.est-alerte, pour que les deux se lisent comme une seule
   convention. Le liseré emploie --et-avertissement-mark et non
   --et-avertissement : à 3:1, un ambre pur ne passe pas le seuil graphique
   (2,15:1), et c'est la marque qui porte le signal.
   --------------------------------------------------------------------------- */
.acm-action {
    padding: 7px 9px;
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
}
.acm-action + .acm-action { margin-top: 6px; }
.acm-action.est-retard { border-left: 3px solid var(--et-avertissement-mark); }

.acm-action-tete {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.acm-action-type { font-size: 13px; font-weight: 600; color: var(--et-ink); }
.acm-action-type .bi { margin-right: 5px; }
.acm-action-sous { margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--et-muted); }
.acm-action-sous .bi { margin-right: 4px; }
.acm-action-actions { margin-top: 6px; display: flex; gap: 4px; }

/* ---------------------------------------------------------------------------
   3. BARRE DE FILTRES

   Elle vit sous le titre de page, pas dans une carte : elle porte sur TOUTE la
   vue, agenda comme liste. Le pas de semaine est poussé à droite parce qu'il ne
   filtre rien — il déplace la fenêtre de lecture.
   --------------------------------------------------------------------------- */
.acm-filtres {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.acm-filtres-fin { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.acm-periode { font-size: 13px; color: var(--et-muted); font-family: var(--et-font-mono); }
.acm-filtre-select { width: auto; min-width: 11rem; }

/* ---------------------------------------------------------------------------
   4. PALIERS — geometry only (docs/conventions-responsive.md)

   La règle tactile (docs/cibles-tactiles.md) : sous 1024 px, aucune cible ne
   descend sous 44 px, et une cible ne rétrécit jamais.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .acm-filtre-select { min-height: 44px; }
    .acm-action-actions .mx-btn { min-width: 44px; min-height: 44px; }
}

/* Sous 720 px la bande de sept colonnes ne tient plus, même en défilant : chaque
   colonne y ferait moins de la moitié de l'écran. La semaine s'empile alors, un
   jour par rangée, et retrouve sa hauteur naturelle. */
@media (max-width: 720px) {
    .acm-semaine { grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
    .acm-jour-corps { max-height: none; }
    .acm-filtres-fin { margin-left: 0; width: 100%; }
    .acm-filtre-select { min-width: 0; width: 100%; }
}