/* Présentation des tableaux d'objectifs et de caisse, partagée par la console du
   cabinet et l'espace client.

   Les deux écrans montrent le même tableau : ils doivent le montrer pareil. Chacun
   avait sa copie des règles, et elles avaient divergé deux fois — titres centrés
   d'un côté, alignés à droite de l'autre, en 10 px contre 12 px, colonne de dates à
   gauche ici et à droite là. Une seule feuille, servie aux deux, et la question ne
   se repose plus.

   Elle porte ses propres couleurs plutôt que d'emprunter celles des pages : leurs
   variables ne portent pas les mêmes noms (--border ici, --bord là), et ce fichier
   doit pouvoir être posé dans l'une comme dans l'autre sans rien y renommer. */

:root{
  --tb-trait:#d9dde3; --tb-trait-fort:#9aa3ad;
  --tb-texte:#1c2530; --tb-doux:#5d6875;
  --tb-cumul:#e4e9ef; --tb-pos:#0f7a3d; --tb-neg:#b3261e; --tb-accent:#1f5fa8;
  --tb-n1:#eef1f5; --tb-obj:#eaf2fb; --tb-soins:#f3f0fa; --tb-synth:#f7f9f4;
  --tb-caisse:#fdf3e7; --tb-banque:#eaf2fb; --tb-cheque:#f3f0fa; --tb-fdc:#fdf3e7;
  --tb-saisie:#fffdf3; --tb-z38:#eef5ff;
}

table.objectifs{border-collapse:collapse;width:100%;white-space:nowrap;
                font-variant-numeric:tabular-nums}
table.objectifs th, table.objectifs td{
  border:1px solid var(--tb-trait);padding:2px 4px;text-align:right;
  font-size:12px;font-variant-numeric:tabular-nums;color:var(--tb-texte)}

/* En-têtes : centrés et collants. Les titres tiennent sur deux lignes pour que la
   colonne se règle sur ses chiffres et non sur la longueur de son intitulé. */
table.objectifs thead th{
  position:sticky;z-index:3;background:var(--tb-cumul);font-size:10px;
  line-height:1.15;font-weight:600;padding:3px 4px;vertical-align:bottom;
  text-align:center}
table.objectifs thead tr.groupes th{
  top:0;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
table.objectifs thead tr.colonnes th{
  top:22px;white-space:normal;max-width:78px}

table.objectifs tfoot th, table.objectifs tfoot td{
  position:sticky;bottom:0;background:var(--tb-cumul);font-weight:600;z-index:2}
table.objectifs tfoot th{text-align:left}

/* Les libellés vont à gauche, les chiffres à droite. */
table.objectifs td.jour, table.objectifs td.date, table.objectifs td.texte,
table.objectifs th.jour{text-align:left;color:var(--tb-doux)}
table.objectifs td.date{white-space:nowrap}

table.objectifs tr.cumul td, table.objectifs tr.total td{
  background:var(--tb-cumul);font-weight:600}
/* Un dimanche se lit en gris clair sur toute sa ligne : fermé, il ne porte rien. */
table.objectifs tr.dimanche td{color:#98a1ab}
table.objectifs tbody tr:hover td{background:#eef3f8}
table.objectifs tr.echu td{color:var(--tb-doux);background:#fafbfc}
/* Journée sans feuille de caisse reçue. */
table.objectifs tr.sans-feuille td.g-z38{background:repeating-linear-gradient(45deg,
  #fafbfc,#fafbfc 6px,#f1f3f5 6px,#f1f3f5 12px)}

table.objectifs td.fort{font-weight:600}
table.objectifs td.pos, table.objectifs .pos{color:var(--tb-pos)}
table.objectifs td.neg, table.objectifs .neg{color:var(--tb-neg)}
/* Objectif calculé sur une référence de remplacement, faute d'équivalent N-1. */
table.objectifs td.subst, table.objectifs td.substitue{
  background:#f1ecfb;position:relative;font-style:italic}
table.objectifs td.subst::after{content:"≈";position:absolute;left:3px;top:1px;
                                font-size:10px;color:#6a4fb3}
/* Date reculée d'une semaine pour ne pas sortir du mois N-1. */
table.objectifs td.report{font-style:italic;color:#6a4fb3}
table.objectifs td.report::after{content:" ↩"}
table.objectifs td .attente{color:#b8860b;font-style:italic;font-size:11px}
table.objectifs td .badge{display:inline-block;font-size:9px;font-weight:700;
  letter-spacing:.04em;padding:0 4px;border-radius:3px;background:#dbe8f8;
  color:var(--tb-accent);margin-left:4px}

/* Groupes de colonnes. */
table.objectifs .g-n1{background:var(--tb-n1)}
table.objectifs .g-obj{background:var(--tb-obj)}
table.objectifs .g-soins{background:var(--tb-soins)}
table.objectifs .g-synth{background:var(--tb-synth)}
table.objectifs .g-caisse, table.objectifs .g-z38{background:var(--tb-caisse)}
table.objectifs .g-banque{background:var(--tb-banque)}
table.objectifs .g-fdc{background:var(--tb-fdc)}
table.objectifs .g-cheque{background:var(--tb-cheque)}
/* Partie chèques masquée des deux côtés : retirer cette règle pour la réafficher.
   Rien n'est effacé, les chèques restent calculés et les saisies restent en base. */
table.objectifs .g-cheque{display:none}

/* Cellules de saisie : fond crème, pour qu'on voie d'un coup d'œil ce qui se tape. */
table.objectifs input.saisie{
  width:62px;border:1px solid transparent;border-radius:3px;padding:1px 3px;
  text-align:right;font:inherit;font-size:12px;font-variant-numeric:tabular-nums;
  background:var(--tb-saisie);color:inherit}
table.objectifs input.saisie.large{width:130px;text-align:left}
table.objectifs input.saisie.date{width:96px;text-align:left}
table.objectifs input.saisie:hover{border-color:var(--tb-trait)}
table.objectifs input.saisie:focus{outline:none;border-color:var(--tb-accent);
                                   background:#fff}
/* Valeur reprise d'un Z38 : pré-remplie, corrigeable, et signalée comme telle. */
table.objectifs input.saisie.z38{background:var(--tb-z38);color:#123a6b}
table.objectifs input.saisie.enregistre{background:#e1f3e8}
table.objectifs input.saisie.refuse{background:#fbe4e2}

/* ---------------------------------------------------------------- impression

   À l'impression, on veut la feuille entière : les deux tableaux, tous leurs jours,
   sans rien de collant ni de coupé. Le paysage est indispensable — vingt-trois
   colonnes ne tiennent pas en portrait — et les en-têtes se répètent en haut de
   chaque page, sinon la deuxième page n'est qu'une grille de chiffres anonymes. */
@page{size:A4 landscape;margin:8mm}

@media print{
  /* Un mois de trente et un jours, plus ses cumuls hebdomadaires et son pied,
     fait trente-six lignes : à deux pixels de rembourrage par ligne, le tableau
     passait sur une deuxième page pour trois pixels. On serre donc la ligne, et
     on laisse de quoi voir venir un mois plus long encore. */
  table.objectifs{font-size:8px}
  table.objectifs th, table.objectifs td{padding:0 2px;font-size:8px;line-height:1.25}
  table.objectifs thead tr.colonnes th{font-size:7px;max-width:none}
  table.objectifs thead tr.groupes th{font-size:8px}
  /* Collant à l'écran, répété sur le papier : ce n'est pas le même mécanisme. */
  table.objectifs thead th, table.objectifs tfoot th, table.objectifs tfoot td,
  table.objectifs tbody td:first-child{position:static}
  table.objectifs thead{display:table-header-group}
  table.objectifs tfoot{display:table-footer-group}
  table.objectifs tr{break-inside:avoid}
  /* Une case de saisie imprimée n'est qu'un chiffre : ni cadre, ni fond. */
  table.objectifs input.saisie{border:0;background:none;width:auto;min-width:0;
                               padding:0;text-align:right}
  /* Le gris clair des dimanches disparaît à l'impression : on le fonce. */
  table.objectifs tr.dimanche td{color:#6b7280}
}

/* ---------------------------------------------------------------- périphériques

   Vingt-trois colonnes de chiffres ne se replient pas : un tableau comptable perd
   son sens dès qu'on en casse les lignes. On ne masque donc aucune colonne — un
   chiffre absent se remarque moins qu'un chiffre faux, mais se paie plus cher. On
   resserre progressivement, et on ancre la colonne de dates à gauche : sur un écran
   étroit, on fait défiler de côté sans jamais perdre le jour qu'on lit.

   Les seuils suivent les appareils réels : iPad Pro 1366 en paysage et 1024 en
   portrait, iPad 1024 / 768, téléphone 390 à 430. */

/* iPad Pro en paysage, et tout écran d'ordinateur un peu juste. */
@media (max-width:1400px){
  table.objectifs th, table.objectifs td{padding:2px 3px}
  table.objectifs input.saisie{width:54px}
  table.objectifs input.saisie.large{width:86px}
  table.objectifs input.saisie.date{width:62px}
}

/* iPad Pro en portrait, iPad en paysage. La colonne de dates s'ancre à gauche. */
@media (max-width:1024px){
  table.objectifs th, table.objectifs td{padding:2px;font-size:11px}
  table.objectifs thead tr.colonnes th{font-size:9px;max-width:62px}
  table.objectifs thead tr.groupes th{font-size:10px}
  table.objectifs input.saisie{width:46px;font-size:11px}
  table.objectifs input.saisie.large{width:72px}
  table.objectifs input.saisie.date{width:56px}
  table.objectifs td.date, table.objectifs th.date,
  table.objectifs tbody td:first-child, table.objectifs thead tr.colonnes th:first-child{
    position:sticky;left:0;z-index:2}
  /* Le fond doit être opaque : sans lui, les colonnes défilent par transparence. */
  table.objectifs tbody td:first-child{background:var(--tb-n1)}
  table.objectifs tbody tr.cumul td:first-child{background:var(--tb-cumul)}
  table.objectifs thead tr.colonnes th:first-child{z-index:4}
  table.objectifs#tabCaisse tbody td:first-child,
  table.objectifs#tableCaisse tbody td:first-child{background:var(--tb-caisse)}
}

/* iPad en portrait. */
@media (max-width:820px){
  table.objectifs th, table.objectifs td{padding:1px 2px}
  table.objectifs thead tr.colonnes th{font-size:9px;max-width:54px}
  table.objectifs input.saisie{width:42px}
  table.objectifs input.saisie.large{width:64px}
  table.objectifs input.saisie.date{width:52px}
}

/* Téléphone : le tableau défile de côté, la date reste en vue. Les en-têtes de
   groupe ne collent plus en haut — sur 700 px de haut, deux bandeaux figés
   mangeraient le tiers de l'écran. */
@media (max-width:640px){
  table.objectifs th, table.objectifs td{padding:1px 2px;font-size:10px}
  table.objectifs thead tr.colonnes th{font-size:8px;max-width:48px;line-height:1.1}
  table.objectifs thead tr.groupes th{font-size:9px;letter-spacing:.03em}
  table.objectifs thead tr.groupes th{position:static}
  table.objectifs thead tr.colonnes th{top:0}
  table.objectifs input.saisie{width:38px;font-size:10px;padding:1px 2px}
  table.objectifs input.saisie.large{width:58px}
  table.objectifs input.saisie.date{width:50px}
  /* Le doigt vise plus large que la souris : on rend les cases saisissables
     un peu plus hautes, sans elargir le tableau. */
  table.objectifs input.saisie{min-height:22px}
}

/* Valeur corrigée par le magasin : elle prime sur le chiffre d'origine, qui reste
   en base. Vider la case le fait revenir. */
table.objectifs td.corrige{box-shadow:inset 0 -2px 0 var(--tb-accent)}
table.objectifs input.saisie.corrige{font-weight:600;color:var(--tb-accent)}