/* Styles propres à un écran (à encaisser, ventes, niches, activité, commissions, statistiques).
   Les composants communs sont dans components.css ; ce fichier est chargé après lui. */

/* ---- Échéances à encaisser (Due.js, page À encaisser de l'iPhone) ---- */
.head-controls { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.due-done { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: 12px; background: var(--green-soft); color: var(--text); font-size: 15px; font-weight: 500; }
.due-done-icon { color: var(--green); display: grid; place-items: center; }
.card-sub-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin: var(--s-4) 0 var(--s-1); }
.card-sub-head .caption { margin: 0; }
.demo-grid > .card { break-inside: avoid; }
@media (min-width: 1300px) { .demo-grid { columns: 2 520px; column-gap: 16px; } }
.qe-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.qe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
@media (min-width: 600px) { .qe-grid { grid-template-columns: repeat(3, 1fr); } }
.qe-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s-3) var(--s-2); border-radius: 12px; background: var(--card-2); }
.qe-cell .eyebrow { font-size: 11px; }
.qe-cell .stepper .num { font-size: 26px; min-width: 2ch; }
.qe-cell .seg { margin: -2px 0 2px; }
.stepper .num.pop { animation: numPop var(--dur-3) var(--ease-spring); }
@keyframes numPop { 0% { transform: scale(1.35); color: var(--accent); } 100% { transform: none; } }
.due-check { flex: none; }


/* ---- Écran Ventes ---- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); }
.toolbar .select { flex: none; }
.summary { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: baseline; margin: var(--s-3) 0 var(--s-4); font-size: 14px; color: var(--text-2); }
.summary strong { color: var(--text); font-weight: 600; }
.focus-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-4); border-radius: var(--r-card); background: var(--accent-soft); color: var(--text); font-size: 15px; }
.focus-bar strong { color: var(--accent); }
.month-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: var(--s-5) 0 var(--s-2); padding: 0 var(--s-1); }
.month-head .title-3 { margin: 0; }
.month-head .caption { margin: 0; }
.sale-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); width: 100%; min-height: 64px; padding: var(--s-2) var(--s-4); border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: background var(--dur-1) var(--ease); }
.sale-row:hover { background: var(--fill); } .sale-row:active { background: var(--fill-2); }
.list li + li .sale-row { border-top: 1px solid var(--line); }
.sale-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sale-title { display: flex; align-items: center; gap: var(--s-2); font-size: 15px; font-weight: 600; min-width: 0; }
.sale-title span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sale-sub { font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sale-ech { display: flex; align-items: center; gap: var(--s-2); max-width: 220px; }
.sale-ech .progress { flex: 1; height: 5px; }
.sale-ech .caption { margin: 0; white-space: nowrap; font-size: 12px; }
.sale-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sale-money { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sale-title .pill { flex: none; }
.sale-amount { font-size: 15px; font-weight: 700; }
.sale-comm { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.sale-comm .pos { color: var(--green); font-weight: 600; }
@media (min-width: 900px) {
  .sale-row { grid-template-columns: 40px minmax(0, 1.4fr) minmax(140px, 0.8fr) 120px minmax(150px, auto); }
  .sale-row .sale-end { display: contents; }
  .sale-row .sale-money { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
  .sale-row .pill { justify-self: end; }
}
@media (max-width: 899px) { .sale-row .sale-ech-wide { display: none; } }
@media (min-width: 900px) { .sale-row .sale-ech-inline { display: none; } }
.more-row { display: flex; justify-content: center; margin: var(--s-4) 0; }

/* ---- Feuille de vente ---- */
.sheet-wide { }
@media (min-width: 700px) { .sheet.sheet-wide { width: min(720px, calc(100vw - 48px)); } }
.form-section { margin: var(--s-5) 0 var(--s-2); display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.form-section .eyebrow { margin: 0; }
.plan-rows { display: flex; flex-direction: column; gap: 6px; }
.plan-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 36px 32px; gap: 6px; align-items: center; }
.plan-row .input { min-height: 40px; padding: 0 10px; }
.plan-row.is-acompte .input { border-color: var(--amber); }
.plan-row .del { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; display: grid; place-items: center; }
.plan-row .del:hover { background: var(--red-soft); color: var(--red); }
.plan-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 36px 32px; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding: 0 2px; }
.plan-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); }
.plan-total { font-size: 14px; color: var(--text-2); }
.plan-total.warn { color: var(--amber); }
.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-top: var(--s-3); }
.preview-grid div { padding: var(--s-3); border-radius: 12px; background: var(--card-2); }
.preview-grid dt { font-size: 12px; color: var(--text-3); }
.preview-grid dd { margin: 4px 0 0; font-size: 17px; font-weight: 700; }
.preview-grid dd.pos { color: var(--green); }
.link-acts { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.short-links { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.short-links .list { margin: 0; }
.sl-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.sl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sl-url { color: var(--accent); overflow-wrap: anywhere; }
.sl-acts { display: flex; gap: var(--s-2); flex: none; align-items: center; }
/* Entreprises à ouvrir une à une (10/10/2026) : même écart au-dessus et au-dessous qu'entre deux interrupteurs. */
.field.export-open { margin: var(--s-2) 0; }
.export-gaps { margin: var(--s-3) 0 0; padding: var(--s-3); border-radius: 12px; background: var(--amber-soft); font-size: 14px; line-height: 1.45; }
.sheet-foot .btn-round { flex: none; }

/* ---- Niches ---- */
.niche-preview { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); margin: 0 0 var(--s-4); border-radius: 12px; background: var(--card-2); font-size: 16px; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.emoji-btn { height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); font-size: 20px; cursor: pointer; transition: all var(--dur-1) var(--ease); }
.emoji-btn:hover { background: var(--fill-2); }
.emoji-btn.on { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.06); }
.color-row { display: flex; flex-wrap: wrap; gap: 10px; }
.color-btn { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--card); background: var(--c); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: transform var(--dur-1) var(--ease); }
.color-btn.on { box-shadow: 0 0 0 2px var(--text); transform: scale(1.08); }

/* ---- Activité ---- */
.card-link { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 14px; }
.period-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-4); }
.period-nav { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.period-nav .field { margin: 0; flex-direction: row; align-items: center; gap: 6px; }
.period-label { min-width: 160px; text-align: center; font-size: 15px; font-weight: 600; }
.act-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-4); }
.act-stats .stat:nth-child(-n+2) { grid-column: span 1; }
@media (min-width: 700px) { .act-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .act-stats .stat:nth-child(-n+2) { grid-column: span 2; } }
@media (min-width: 1400px) { .act-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } .act-stats .stat:nth-child(-n+2) { grid-column: span 3; } }
.bar-chart .bar { fill: var(--accent-bg); opacity: 0.85; }
.bar-chart .bar.zero { fill: var(--fill-2); opacity: 1; }
.bar-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--card); }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 4px; vertical-align: middle; }
.eod-grid { margin-top: var(--s-3); }
@media (min-width: 700px) { .sheet .eod-grid { grid-template-columns: repeat(3, 1fr); } }
/* Saisie détaillée (29/09/2026) : R1, R2, R3 alignés en trois colonnes d'une section à l'autre, avec des − + compacts
   pour tenir à trois sur un iPhone ; close et anciennes annulations sans niveau sur toute la largeur. Mac : desk.css. */
.qe-grid.lv3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lv3 > .qe-cell:not(.wide) { padding-inline: 4px; }
.lv3 .stepper { gap: 4px; }
.lv3 .stepper .btn-round { width: 32px; min-height: 32px; }
.lv3 .qe-cell .stepper .num { font-size: 22px; }
.qe-cell.wide { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; padding: 8px 12px 8px 16px; }
.qe-cell.wide .eyebrow { font-size: 12px; }
.eod-note { margin-top: var(--s-4); }

/* ---- Commissions : relances et fiche du mois (iPhone, fenêtres) ---- */
.txt-green { color: var(--green); } .txt-amber { color: var(--amber); } .txt-red { color: var(--red); }
.rel-list { list-style: none; margin: 0; padding: 0; }
.rel-row { display: flex; align-items: center; gap: var(--s-2); }
.rel-list li + li { border-top: 1px solid var(--line); }
.rel-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rel-main .row-main { flex: 1; min-width: 0; }
.mois-comp { padding: var(--s-3) 0; }
.mois-comp + .mois-comp { border-top: 1px solid var(--line); }
.mois-comp-head { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-weight: 600; }
.mois-comp .preview-grid { margin-top: 0; }
.mois-items { list-style: none; margin: 0; padding: 0; }
.mois-items li { display: flex; align-items: center; gap: var(--s-3); padding: 10px 0; }
.mois-items li + li { border-top: 1px solid var(--line); }
.mois-items .row-main { flex: 1; min-width: 0; }

/* ---- Statistiques et objectifs ---- */
.bar-value { position: absolute; transform: translate(-50%, calc(-100% - 3px)); font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; pointer-events: none; }
@media (max-width: 599px) { .bar-value { display: none; } }
/* Tableau qui défile de côté (rapport des statistiques, .rp-table) : le conteneur n'a AUCUNE marge intérieure (sinon les
   colonnes qui défilent restent visibles à gauche de la colonne « Mois » figée : bug iPhone du 27/09) ; ce sont les cellules du bord qui la portent. */
.rp-table .stat-table th:first-child, .rp-table .stat-table td:first-child { padding-left: var(--s-4); }
.rp-table .stat-table th:last-child, .rp-table .stat-table td:last-child { padding-right: var(--s-4); }
.stat-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.stat-table th { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); text-align: right; padding: 0 var(--s-2) var(--s-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.stat-table td { text-align: right; padding: 10px var(--s-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.stat-table th:first-child, .stat-table td:first-child { text-align: left; padding-left: 0; position: sticky; left: 0; z-index: 1; background: var(--card); }
@media (max-width: 759px) { .stat-table th:first-child, .stat-table td:first-child { box-shadow: inset -1px 0 0 var(--line); } }
.stat-table tr.total td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--line); }
.niche-break { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.nb-line { display: flex; align-items: center; gap: var(--s-3); margin-bottom: 8px; }
.budget-big { margin: -4px 0 var(--s-2); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.budget-big .secondary { font-size: 14px; font-weight: 400; letter-spacing: 0; }
.budget-rows { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.budget-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: "nom nom x" "montant type x"; gap: 6px var(--s-2); align-items: center; padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.budget-row .b-nom { grid-area: nom; } .budget-row .b-montant { grid-area: montant; } .budget-row .b-type { grid-area: type; } .budget-row > .btn { grid-area: x; }
@media (min-width: 700px) { .budget-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto 44px; grid-template-areas: "nom montant type x"; padding-bottom: 0; border-bottom: 0; } }
.budget-result { margin: var(--s-4) 0 var(--s-2); padding: var(--s-3) var(--s-4); border-radius: 12px; background: var(--accent-soft); }
.budget-result p { margin: 0; } .budget-result strong { font-size: 20px; color: var(--accent); }
.budget-result .caption { margin-top: 4px; }
.budget-result.empty { background: var(--card-2); }

/* ---- Factures ---- */
.inv-rows { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.inv-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "lib lib" "pu x"; gap: 6px var(--s-2); align-items: center; padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
textarea.input.i-grow { min-height: var(--control-h); padding: calc((var(--control-h) - 1.3em - 2px) / 2) var(--s-3); line-height: 1.3; resize: none; overflow: hidden; }
.inv-row .i-lib { grid-area: lib; } .inv-row .i-pu { grid-area: pu; } .inv-row > .btn { grid-area: x; }
@media (min-width: 700px) { .inv-row { grid-template-columns: minmax(0, 1fr) 190px 44px; grid-template-areas: "lib pu x"; padding-bottom: 0; border-bottom: 0; } }
.inv-totals { margin: 0; align-self: end; display: flex; flex-direction: column; gap: 4px; padding: var(--s-3); border-radius: 12px; background: var(--card-2); }
.inv-totals div { display: flex; justify-content: space-between; font-size: 14px; } .inv-totals dt { color: var(--text-2); } .inv-totals dd { margin: 0; }
.mention-list { margin: var(--s-3) 0 0; padding-left: var(--s-5); color: var(--text-2); font-size: 14px; }

/* ---- En-tête des écrans sur iPhone : commandes alignées sur toute la largeur ----
   Ligne 1 : entreprise (et année) qui s'étirent + bouton d'action ; ligne 2 : le mois, flèches aux bords. */
@media (max-width: 699px) {
  .screen-head { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .head-controls { width: 100%; flex-wrap: wrap; }
  .head-controls > .select { flex: 1 1 0; min-width: 0; }
  .head-controls > .select ~ .select { flex: 0 0 auto; } /* année (Statistiques) : taille naturelle, l'entreprise prend le reste */
  .head-controls > .btn:only-child { flex: 1 1 auto; }
  .head-controls > .select .select-trigger > svg:not(.chev) { display: none; } /* la pastille de couleur suffit : plus de place pour le nom */
  .head-controls > .btn { flex: none; }
  .head-controls .select-sm .select-trigger, .head-controls > .btn { min-height: 44px; border-radius: 12px; font-size: 15px; }
  .head-controls > .month-picker { order: 2; flex: 1 1 100%; }
  .head-controls > .month-picker > .select { flex: 1 1 auto; }
  .head-controls > .month-picker .select-trigger .label { text-align: center; }
  .head-controls > .month-picker > .btn-round { width: 44px; min-height: 44px; }
}

/* ---- Feuilles et listes sur iPhone : aucune case ni aucun texte coupé ----
   Formulaires sur une colonne, comme les réglages d'iOS : seules les paires de petits champs (.pair : date, montant,
   taux, nombres) restent côte à côte. Le choix du mois prend toute la largeur, flèches aux bords, à la hauteur des
   champs. Titres et sous-titres des listes passent à la ligne au lieu de finir par « … ». */
@media (max-width: 699px) {
  .sheet .grid-2 { row-gap: 0; } /* même écart partout : celui des cases (.field) */
  .sheet .grid-2:not(.pair) { grid-template-columns: minmax(0, 1fr); }
  .sheet .month-picker { width: 100%; }
  .sheet .month-picker > .select { flex: 1 1 auto; }
  .sheet .month-picker .select-trigger { min-height: var(--control-h); border-radius: var(--r-input); font-size: 16px; }
  .sheet .month-picker .select-trigger .label { text-align: center; }
  .sheet .month-picker > .btn-round { width: var(--control-h); min-height: var(--control-h); }
  .sheet .inv-rows ~ .grid-2 { margin-top: var(--s-4); } /* TVA : un peu d'air sous « Ajouter une ligne » */
  body.phone .input[type="date"]::-webkit-date-and-time-value { text-align: left; } /* date alignée comme les autres cases */
  .row-title, .row-sub, .sale-sub, .sale-title span:first-child { white-space: normal; overflow-wrap: break-word; }
  /* Résumés en 3 cases : trop étroits pour « Septembre 2026 », « 12 345,67 € » ou « Charges perso », ils passent en lignes */
  .preview-grid { grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: 12px; background: var(--card-2); }
  .preview-grid div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: 11px var(--s-3); border-radius: 0; background: transparent; }
  .preview-grid div + div { border-top: 1px solid var(--line); }
  .preview-grid dt { font-size: 14px; color: var(--text-2); }
  .preview-grid dd { margin: 0; font-size: 16px; text-align: right; }
  .preview-grid dd.num { flex: none; white-space: nowrap; } /* un montant ne se coupe jamais : c'est le libellé qui passe à la ligne */
}

/* Réglages : une colonne sur mobile ; sur grand écran, réglages généraux à gauche, niches et offres à droite */
@media (max-width: 1199px) {
  .settings { display: flex; flex-direction: column; }
  .settings-col { display: contents; }
  .settings-end { order: 1; }
}
@media (min-width: 1200px) {
  .settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
  .settings-col { min-width: 0; }
}