/* Module Paiements — compléments au design system (pastilles de paiement, sélecteurs de mode, modale). */

/* Navigation mois / année */
.pay-monthnav a { display: inline-flex; align-items: center; gap: 4px; }
.pay-monthnav .icon { width: 16px; height: 16px; }
.pay-emp-grid { grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 1100px) { .pay-emp-grid { grid-template-columns: 1fr; } }
.pay-yearhead { margin: 8px 0 16px; align-items: center; }

/* En-tête chiffré */
.pay-stats > .card { min-width: 0; }
.pay-stats .stat-value { font-size: 1.7rem; white-space: nowrap; }
.pay-stats .progress { margin: 6px 0 2px; }
.pay-stats > .card + .card, .grid-aside > .card + .stack { margin-top: 0; }
.pay-counts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* Tableau */
.pay-table td { vertical-align: top; }
.pay-table td.num .strong, .pay-table td.num > span:first-child { display: block; }
.pay-table .person { align-items: flex-start; }
.pay-table .person-sub { white-space: normal; }
.pay-table td:first-child { max-width: 250px; }
.pay-table td:first-child .person-name { white-space: normal; }
.pay-month .person .avatar { display: none; }
.pay-table td, .pay-table th { padding-left: 12px; padding-right: 12px; }
.pay-table td:first-child, .pay-table th:first-child { padding-left: 18px; }
.pay-row-paid { background: linear-gradient(90deg, rgba(63,125,82,.045), transparent 40%); }
.pay-row-unpaid td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.pay-row-partial td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.pay-table .actions { width: 1%; }
.pay-row-actions { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.pay-total td { background: var(--surface-2); font-weight: 600; color: var(--espresso); border-top: 1px solid var(--line-strong); border-bottom: 0; font-variant-numeric: tabular-nums; }
.pay-total td:first-child { border-bottom-left-radius: var(--r-lg); }
.pay-planned { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--ink-2); white-space: nowrap; }
.pay-planned .icon { width: 15px; height: 15px; color: var(--gold); }
.pay-sub-link { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; margin-top: 2px; }
.pay-sub-link .icon { width: 13px; height: 13px; }
.pay-legal { display: flex; gap: 8px; align-items: flex-start; }
.pay-legal .icon { width: 15px; height: 15px; margin-top: 2px; color: var(--gold); }

/* Pastilles de paiement */
.pay-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.pay-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 9px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line); font-size: .82rem; color: var(--ink); line-height: 1.4; max-width: 100%; }
.pay-chip-main { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pay-chip-main .icon { width: 14px; height: 14px; color: var(--ink-2); }
.pay-chip-main .num { font-weight: 600; }
.pay-chip-date { color: var(--muted); font-size: .76rem; }
.pay-chip-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--info); background: var(--info-soft); padding: 0 6px; border-radius: 999px; }
.pay-chip-especes { background: #FFF9EE; border-color: #EAD8B4; }
.pay-chip-especes .pay-chip-main .icon { color: var(--gold-2); }
.pay-chip-virement .pay-chip-main .icon { color: var(--info); }
.pay-receipt { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.pay-receipt .icon { width: 12px; height: 12px; }
.pay-receipt.is-todo { background: var(--warning-soft); color: var(--warning); }
.pay-receipt.is-todo:hover { background: #F6E2BC; color: #7a4f12; }
.pay-receipt.is-signed { background: var(--success-soft); color: var(--success); }
.pay-attach, .pay-chip-x { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  color: var(--muted); background: transparent; border: 0; cursor: pointer; padding: 0; transition: background .12s, color .12s; }
.pay-attach:hover, .pay-attach.is-over { background: var(--gold-soft); color: var(--gold-2); }
.pay-attach.is-busy { opacity: .5; pointer-events: none; }
.pay-attach .icon, .pay-chip-x .icon { width: 13px; height: 13px; }
.pay-attach input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pay-chip-x:hover { background: var(--danger-soft); color: var(--danger); }

/* Modale et formulaire */
.pay-form [hidden] { display: none !important; }   /* data-show-when sur des blocs .callout (display: flex) */
.pay-status { display: block; margin-top: 4px; }
dialog.pay-modal { width: min(620px, calc(100vw - 32px)); }
.pay-loading { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.pay-form { display: flex; flex-direction: column; gap: 16px; }
.pay-form-card > .pay-form { padding: 22px 24px; }
.pay-form-context { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pay-mini { display: flex; gap: 18px; margin: 0; }
.pay-mini div { display: flex; flex-direction: column; align-items: flex-end; }
.pay-mini dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.pay-mini dd { margin: 0; font-family: var(--font-display); font-size: 1.1rem; color: var(--espresso); }
.pay-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pay-fieldset legend { padding: 0; margin-bottom: 6px; }
.pay-seg { align-self: flex-start; }
.pay-seg-opt { position: relative; }
.pay-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pay-seg-opt span { display: inline-block; padding: 6px 16px; border-radius: 8px; font-size: .88rem; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.pay-seg-opt input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.pay-seg-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 1px; }
.pay-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pay-method { position: relative; }
.pay-method input { position: absolute; opacity: 0; pointer-events: none; }
.pay-method-box { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 10px; border: 1px solid var(--line-strong); border-radius: var(--r);
  background: #fff; font-weight: 500; font-size: .92rem; color: var(--ink-2); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.pay-method-box .icon { color: var(--muted); }
.pay-method:hover .pay-method-box { border-color: var(--gold); }
.pay-method input:checked + .pay-method-box { border-color: var(--gold); background: var(--gold-soft); color: var(--espresso); box-shadow: 0 0 0 3px rgba(184,132,58,.15); }
.pay-method input:checked + .pay-method-box .icon { color: var(--gold-2); }
.pay-method input:focus-visible + .pay-method-box { outline: 2px solid var(--gold); outline-offset: 2px; }
.pay-method.is-flagged .pay-method-box::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warning); margin-left: 2px; }
.pay-amount { position: relative; }
.pay-amount .input { padding-right: 32px; text-align: right; font-size: 1.05rem; font-weight: 600; }
.pay-amount span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.pay-confirm { padding: 12px 14px; border-radius: var(--r); background: var(--warning-soft); border: 1px solid #EED5A8; }
.pay-actions { justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 14px; }
.pay-request { border-top: 1px dashed var(--line-strong); padding-top: 12px; }
.pay-request summary { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; color: var(--ink-2); cursor: pointer; }
.pay-request summary .icon { color: var(--gold); }
.pay-request p { margin: 8px 0; }
.pay-slip { display: inline-flex; flex-direction: column; gap: 2px; font-size: .84rem; white-space: nowrap; }
.pay-slip > a, .pay-slip > span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.pay-slip .icon { width: 14px; height: 14px; }
.pay-slip .pay-planned { font-size: .8rem; }
.pay-year .row-muted td { padding-top: 7px; padding-bottom: 7px; }
.pay-request-doc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--ink); }
.pay-request-doc:hover { border-color: var(--gold); color: var(--ink); }
.pay-request-doc strong { display: block; font-weight: 600; font-size: .9rem; }
.pay-request-doc > .icon { color: var(--muted); }
.pay-request-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--gold-soft); color: var(--gold-2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pay-totals dd { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .pay-stats .stat { padding: 14px 14px; }
  .pay-stats .stat-value { font-size: 1.25rem; }
  .pay-methods { grid-template-columns: 1fr; }
  .pay-mini { width: 100%; justify-content: space-between; }
  .pay-mini div { align-items: flex-start; }
  .pay-counts { justify-content: flex-start; }
}
@media print {
  .pay-row-actions, .pay-chip-x, .pay-attach { display: none !important; }
}