/* ═══════════════════════════════════════════════════════════════
   billing.css — préfixe bil-
   Styles partagés de la facturation & des entités (CP_Billing) :
   fenêtre modale, boutons, champs, badges, tableaux de lignes, puces.
   Même langage visuel que les modales pod- (commandes partenaires) ;
   uniquement des variables du thème → mode sombre automatique.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fenêtre modale ─────────────────────────────────────────────── */
.bil-overlay {
    --bil-safe-top: 8.75rem;
    --bil-gap: 1rem;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(0.25rem);
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(var(--bil-safe-top) + var(--bil-gap)) var(--bil-gap) var(--bil-gap);
    animation: bil-fade .15s ease;
}
.bil-overlay--top { z-index: 1300; }
.bil-overlay--top2 { z-index: 1400; }
@keyframes bil-fade { from { opacity: 0; } to { opacity: 1; } }

.bil-panel {
    width: 100%;
    max-width: 62rem;
    max-height: calc(100vh - var(--bil-safe-top) - 2 * var(--bil-gap));
    max-height: calc(100dvh - var(--bil-safe-top) - 2 * var(--bil-gap));
    background: var(--bg-card, #fff);
    border: 1.5px solid var(--border-color, #e0e0e0);
    border-radius: 1rem;
    box-shadow: 0 1.875rem 5rem rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.bil-panel--wide { max-width: 78rem; }
.bil-panel--narrow { max-width: 34rem; }
.bil-panel--medium { max-width: 46rem; }

.bil-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.375rem;
    border-bottom: 1px solid var(--border-color, #eee);
    flex-shrink: 0;
}
.bil-head h3 { margin: 0; font-size: 1.0625rem; font-weight: 800; color: var(--text-primary, #0d0d0d); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bil-head p { margin: .1875rem 0 0; font-size: .8125rem; color: var(--text-muted, #888); }

.bil-close {
    width: 2.125rem; height: 2.125rem;
    border-radius: .5625rem;
    border: 1.5px solid var(--border-color, #e0e0e0);
    background: var(--bg-card, #fff);
    color: var(--text-muted, #888);
    cursor: pointer;
    flex-shrink: 0;
}
.bil-close:hover { border-color: var(--danger-color, #dc2626); color: var(--danger-color, #dc2626); }

.bil-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.375rem; }

.bil-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: .625rem; flex-wrap: wrap;
    padding: .875rem 1.375rem;
    border-top: 1px solid var(--border-color, #eee);
    background: var(--bg-secondary, #fafafa);
    flex-shrink: 0;
}
.bil-foot-left { margin-right: auto; display: flex; align-items: center; gap: .625rem; font-size: .8125rem; color: var(--text-secondary, #555); }

/* ── Boutons ────────────────────────────────────────────────────── */
.bil-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4375rem;
    padding: .5rem .9rem;
    border-radius: .5625rem;
    border: 1.5px solid var(--border-color, #e0e0e0);
    background: var(--bg-card, #fff);
    color: var(--text-primary, #111);
    font-size: .8125rem; font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s;
}
.bil-btn:hover:not(:disabled) { border-color: var(--primary-color, #2563eb); color: var(--primary-color, #2563eb); }
.bil-btn:disabled { opacity: .5; cursor: not-allowed; }
.bil-btn--primary { background: var(--primary-color, #2563eb); border-color: var(--primary-color, #2563eb); color: #fff; }
.bil-btn--primary:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }
.bil-btn--success { background: var(--success-color, #16a34a); border-color: var(--success-color, #16a34a); color: #fff; }
.bil-btn--success:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }
.bil-btn--danger { color: var(--danger-color, #dc2626); }
.bil-btn--danger:hover:not(:disabled) { border-color: var(--danger-color, #dc2626); background: rgba(220,38,38,.06); color: var(--danger-color, #dc2626); }
.bil-btn--ghost { border-color: transparent; background: transparent; }
.bil-btn--sm { padding: .3125rem .625rem; font-size: .75rem; }
.bil-icon-btn {
    width: 1.875rem; height: 1.875rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .5rem; border: 1px solid transparent; background: transparent;
    color: var(--text-muted, #888); cursor: pointer;
}
.bil-icon-btn:hover:not(:disabled) { border-color: var(--border-color, #e0e0e0); color: var(--text-primary, #111); }
.bil-icon-btn--danger:hover:not(:disabled) { color: var(--danger-color, #dc2626); border-color: rgba(220,38,38,.3); }
.bil-icon-btn:disabled { opacity: .35; cursor: default; }

/* ── Champs ─────────────────────────────────────────────────────── */
.bil-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .75rem; }
.bil-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bil-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bil-span-2 { grid-column: span 2; }
.bil-span-all { grid-column: 1 / -1; }
@media (max-width: 40rem) {
    .bil-grid--2, .bil-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .bil-span-2 { grid-column: auto; }
}

.bil-field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.bil-field > label, .bil-label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted, #888); }
.bil-field .bil-req { color: var(--danger-color, #dc2626); }
.bil-input, .bil-select, .bil-textarea {
    width: 100%;
    padding: .5rem .625rem;
    border-radius: .5rem;
    border: 1.5px solid var(--border-color, #e0e0e0);
    background: var(--bg-card, #fff);
    color: var(--text-primary, #111);
    font-size: .8125rem;
    font-family: inherit;
    min-width: 0;
}
.bil-input:focus, .bil-select:focus, .bil-textarea:focus { outline: none; border-color: var(--primary-color, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.bil-input:disabled, .bil-select:disabled, .bil-textarea:disabled { background: var(--bg-secondary, #f5f5f5); color: var(--text-muted, #888); }
.bil-input--num { text-align: right; font-variant-numeric: tabular-nums; }
.bil-textarea { min-height: 4.5rem; resize: vertical; }
.bil-hint { font-size: .75rem; color: var(--text-muted, #888); }

.bil-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--text-primary, #111); cursor: pointer; user-select: none; }
.bil-check input { width: 1rem; height: 1rem; accent-color: var(--primary-color, #2563eb); }

/* ── Sections ───────────────────────────────────────────────────── */
.bil-section { margin-bottom: 1.25rem; }
.bil-section-title {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 .625rem;
    font-size: .8125rem; font-weight: 800; color: var(--text-primary, #111);
}
.bil-section-title i { color: var(--primary-color, #2563eb); }
.bil-section-title .bil-section-actions { margin-left: auto; display: flex; gap: .375rem; flex-wrap: wrap; }
.bil-card {
    border: 1.5px solid var(--border-color, #e0e0e0);
    border-radius: .75rem;
    padding: .875rem 1rem;
    background: var(--bg-card, #fff);
}

/* ── Segment (Vente / Achat…) ───────────────────────────────────── */
.bil-seg { display: inline-flex; border: 1.5px solid var(--border-color, #e0e0e0); border-radius: .625rem; padding: .1875rem; gap: .1875rem; background: var(--bg-secondary, #f5f5f5); }
.bil-seg button {
    border: 0; background: transparent; padding: .375rem .75rem; border-radius: .4375rem;
    font-size: .8125rem; font-weight: 700; color: var(--text-secondary, #555); cursor: pointer;
    display: inline-flex; align-items: center; gap: .375rem;
}
.bil-seg button.is-active { background: var(--bg-card, #fff); color: var(--primary-color, #2563eb); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.bil-seg button:disabled { cursor: default; }

/* ── Puces (types d'entité, filtres) ────────────────────────────── */
.bil-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.bil-chip {
    display: inline-flex; align-items: center; gap: .3125rem;
    padding: .25rem .625rem;
    border-radius: 999px;
    border: 1.5px solid var(--border-color, #e0e0e0);
    background: var(--bg-card, #fff);
    color: var(--text-secondary, #555);
    font-size: .75rem; font-weight: 700;
    cursor: pointer; user-select: none;
}
.bil-chip:hover { border-color: var(--chip-color, var(--primary-color, #2563eb)); }
.bil-chip.is-active { background: var(--chip-color, var(--primary-color, #2563eb)); border-color: var(--chip-color, var(--primary-color, #2563eb)); color: #fff; }
.bil-chip--static { cursor: default; }
.bil-chip--sm { padding: .125rem .5rem; font-size: .6875rem; }
.bil-chip .bil-chip-count { opacity: .75; font-weight: 600; }

/* ── Badges de statut ───────────────────────────────────────────── */
.bil-badge {
    display: inline-flex; align-items: center; gap: .3125rem;
    padding: .1875rem .5625rem;
    border-radius: 999px;
    font-size: .6875rem; font-weight: 800; letter-spacing: .02em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.bil-badge--draft { background: rgba(100,116,139,.12); color: #475569; border-color: rgba(100,116,139,.25); }
.bil-badge--open { background: rgba(37,99,235,.10); color: #1d4ed8; border-color: rgba(37,99,235,.25); }
.bil-badge--partial { background: rgba(245,158,11,.12); color: #b45309; border-color: rgba(245,158,11,.3); }
.bil-badge--overdue { background: rgba(220,38,38,.10); color: #b91c1c; border-color: rgba(220,38,38,.3); }
.bil-badge--paid { background: rgba(22,163,74,.10); color: #15803d; border-color: rgba(22,163,74,.3); }
.bil-badge--cancelled { background: rgba(148,163,184,.15); color: #64748b; border-color: rgba(148,163,184,.3); text-decoration: line-through; }
.bil-badge--issued { background: rgba(14,116,144,.10); color: #0e7490; border-color: rgba(14,116,144,.25); }
.bil-badge--credit { background: rgba(124,58,237,.10); color: #6d28d9; border-color: rgba(124,58,237,.25); }
.bil-badge--sale { background: rgba(22,163,74,.08); color: #15803d; }
.bil-badge--purchase { background: rgba(234,88,12,.08); color: #c2410c; }

/* ── Alertes ────────────────────────────────────────────────────── */
.bil-alert {
    display: flex; gap: .625rem; align-items: flex-start;
    padding: .625rem .875rem; border-radius: .625rem;
    font-size: .8125rem; margin-bottom: .75rem;
    border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.08); color: var(--text-primary, #111);
}
.bil-alert i { color: #d97706; margin-top: .125rem; }
.bil-alert--error { border-color: rgba(220,38,38,.35); background: rgba(220,38,38,.07); }
.bil-alert--error i { color: var(--danger-color, #dc2626); }
.bil-alert--info { border-color: rgba(37,99,235,.3); background: rgba(37,99,235,.06); }
.bil-alert--info i { color: var(--primary-color, #2563eb); }
.bil-alert--lock { border-color: rgba(100,116,139,.35); background: rgba(100,116,139,.07); }
.bil-alert--lock i { color: #475569; }

/* ── Tableaux ───────────────────────────────────────────────────── */
.bil-table-wrap { border: 1.5px solid var(--border-color, #e0e0e0); border-radius: .75rem; overflow: auto; }
.bil-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.bil-table th {
    text-align: left; padding: .5rem .625rem;
    font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    color: var(--text-muted, #888);
    background: var(--bg-secondary, #f8f8f8);
    border-bottom: 1px solid var(--border-color, #eee);
    white-space: nowrap;
}
.bil-table td { padding: .4375rem .625rem; border-bottom: 1px solid var(--border-color, #f0f0f0); color: var(--text-primary, #111); vertical-align: middle; }
.bil-table tr:last-child td { border-bottom: 0; }
.bil-table tbody tr.is-clickable { cursor: pointer; }
.bil-table tbody tr.is-clickable:hover td { background: rgba(37,99,235,.04); }
.bil-table .bil-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bil-table .bil-muted { color: var(--text-muted, #888); font-size: .75rem; }
.bil-table .bil-actions { white-space: nowrap; text-align: right; }
.bil-table input.bil-input, .bil-table select.bil-select { padding: .3125rem .4375rem; font-size: .8125rem; }

/* ── Totaux ─────────────────────────────────────────────────────── */
.bil-totals { margin-left: auto; width: min(100%, 22rem); display: flex; flex-direction: column; gap: .25rem; font-size: .8125rem; }
.bil-totals-row { display: flex; justify-content: space-between; gap: 1rem; color: var(--text-secondary, #555); font-variant-numeric: tabular-nums; }
.bil-totals-row--grand { margin-top: .25rem; padding-top: .5rem; border-top: 1.5px solid var(--border-color, #e0e0e0); font-size: 1rem; font-weight: 800; color: var(--text-primary, #111); }
.bil-totals-row--balance { font-weight: 800; color: var(--primary-color, #2563eb); }

/* ── États (chargement, vide) ───────────────────────────────────── */
.bil-state { display: flex; align-items: center; justify-content: center; gap: .625rem; padding: 2rem 1rem; color: var(--text-muted, #888); font-size: .875rem; text-align: center; flex-direction: column; }
.bil-state i { font-size: 1.5rem; opacity: .6; }
.bil-spin {
    width: 1.125rem; height: 1.125rem;
    border: 2px solid var(--border-color, #ddd); border-top-color: var(--primary-color, #2563eb);
    border-radius: 50%; animation: bil-rot .7s linear infinite; display: inline-block;
}
@keyframes bil-rot { to { transform: rotate(360deg); } }

/* ── Divers ─────────────────────────────────────────────────────── */
.bil-party { font-size: .8125rem; line-height: 1.45; color: var(--text-primary, #111); }
.bil-party strong { font-size: .875rem; }
.bil-party .bil-muted { color: var(--text-muted, #888); }
.bil-kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .875rem; font-size: .8125rem; }
.bil-kv dt { color: var(--text-muted, #888); }
.bil-kv dd { margin: 0; color: var(--text-primary, #111); font-weight: 600; }
.bil-row { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.bil-spacer { flex: 1; }
.bil-link { color: var(--primary-color, #2563eb); cursor: pointer; text-decoration: none; font-weight: 700; }
.bil-link:hover { text-decoration: underline; }
.bil-avatar {
    width: 2.25rem; height: 2.25rem; border-radius: .625rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(37,99,235,.1); color: var(--primary-color, #2563eb); font-weight: 800; font-size: .8125rem;
}
.bil-tabs { display: flex; gap: .25rem; border-bottom: 1.5px solid var(--border-color, #eee); margin-bottom: 1rem; overflow-x: auto; }
.bil-tab {
    border: 0; background: transparent; padding: .5rem .75rem; margin-bottom: -1.5px;
    border-bottom: 2.5px solid transparent;
    font-size: .8125rem; font-weight: 700; color: var(--text-secondary, #555); cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: .375rem;
}
.bil-tab.is-active { color: var(--primary-color, #2563eb); border-bottom-color: var(--primary-color, #2563eb); }
.bil-tab .bil-tab-count { font-size: .6875rem; padding: 0 .375rem; border-radius: 999px; background: var(--bg-secondary, #eee); color: var(--text-secondary, #555); }
.bil-req { color: var(--danger-color, #dc2626); }

/* ── Assistant par étapes (BillingStepper) ──────────────────────── */
.bil-steps {
    list-style: none;
    margin: 0;
    padding: .75rem 1.375rem;
    display: flex;
    gap: .375rem;
    border-bottom: 1px solid var(--border-color, #eee);
    background: var(--bg-secondary, #f8fafc);
    overflow-x: auto;
    flex-shrink: 0;
}
.bil-step { flex: 1 1 0; min-width: 8.5rem; position: relative; }
.bil-step + .bil-step::before {
    content: "";
    position: absolute;
    left: -.3125rem; top: 50%;
    width: .25rem; height: 2px;
    background: var(--border-color, #ddd);
}
.bil-step-btn {
    width: 100%;
    display: flex; align-items: center; gap: .625rem;
    padding: .5rem .625rem;
    border: 1.5px solid transparent;
    border-radius: .75rem;
    background: none;
    font: inherit; text-align: left;
    color: var(--text-muted, #888);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.bil-step-btn:disabled { cursor: default; }
.bil-step-btn:not(:disabled):hover { background: var(--bg-card, #fff); border-color: var(--border-color, #e0e0e0); }
.bil-step-dot {
    width: 2rem; height: 2rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--border-color, #d4d4d8);
    background: var(--bg-card, #fff);
    font-size: .78rem;
}
.bil-step-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.bil-step-num { font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; opacity: .8; }
.bil-step-label { font-size: .8125rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bil-step.is-current .bil-step-btn { background: var(--bg-card, #fff); border-color: var(--primary-blue, #0077b6); color: var(--text-primary, #111); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.bil-step.is-current .bil-step-dot { background: var(--primary-blue, #0077b6); border-color: var(--primary-blue, #0077b6); color: #fff; }
.bil-step.is-done .bil-step-btn { color: var(--text-secondary, #555); }
.bil-step.is-done .bil-step-dot { background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.45); color: #15803d; }
.bil-step.is-disabled { opacity: .45; }
@media (max-width: 40rem) {
    .bil-step { min-width: auto; flex: 0 0 auto; }
    .bil-step:not(.is-current) .bil-step-text { display: none; }
}

/* ── Cartes de choix (sens, type de document, personne / société…) ── */
.bil-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .625rem; }
.bil-choice {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .875rem 1rem;
    border: 1.5px solid var(--border-color, #e0e0e0);
    border-radius: .875rem;
    background: var(--bg-card, #fff);
    font: inherit; text-align: left; color: inherit;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.bil-choice:hover:not(:disabled) { border-color: var(--primary-blue, #0077b6); transform: translateY(-1px); }
.bil-choice:disabled { cursor: default; opacity: .6; }
.bil-choice.is-active { border-color: var(--primary-blue, #0077b6); box-shadow: 0 0 0 3px rgba(0,119,182,.14); }
.bil-choice-icon {
    width: 2.375rem; height: 2.375rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: .6875rem;
    background: rgba(0,119,182,.1); color: var(--primary-blue, #0077b6);
}
.bil-choice.is-active .bil-choice-icon { background: var(--primary-blue, #0077b6); color: #fff; }
.bil-choice-text { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.bil-choice-text strong { font-size: .875rem; color: var(--text-primary, #111); }
.bil-choice-text span { font-size: .75rem; color: var(--text-muted, #888); line-height: 1.35; }

/* ── Étape : titre + récapitulatif ── */
.bil-step-title { margin: 0 0 .25rem; font-size: 1rem; font-weight: 800; color: var(--text-primary, #111); }
.bil-step-desc { margin: 0 0 1rem; font-size: .8125rem; color: var(--text-muted, #888); }
.bil-step-block + .bil-step-block { margin-top: 1.25rem; }
.bil-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.bil-summary-item { padding: .625rem .75rem; border-radius: .75rem; background: var(--bg-secondary, #f5f5f5); display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.bil-summary-item span { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted, #888); }
.bil-summary-item strong { font-size: .875rem; color: var(--text-primary, #111); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bil-foot-spacer { flex: 1; }