/*
 * 789 Facturation — visual layer on top of Filament 3 (no build step needed).
 * Colors come from Filament's CSS variables (--primary-500 = "r, g, b").
 */

:root {
    --brand-grad: linear-gradient(135deg, rgb(var(--primary-600)) 0%, #8b5cf6 55%, #d946ef 100%);
    --soft-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
    --radius-xl: 1rem;
}

/* ---------- Page background ---------- */
body.fi-body {
    background:
        radial-gradient(1200px 500px at 100% -10%, rgba(var(--primary-500), .10), transparent 60%),
        radial-gradient(900px 400px at -10% 110%, rgba(217, 70, 239, .07), transparent 60%),
        rgb(var(--gray-50));
    background-attachment: fixed;
}
.dark body.fi-body {
    background:
        radial-gradient(1200px 500px at 100% -10%, rgba(var(--primary-500), .16), transparent 60%),
        rgb(var(--gray-950));
}

/* ---------- Sidebar: a lavender card, categories as drawers, one colour per category ---------- */
.fi-sidebar { background: transparent !important; border: 0 !important; }
.fi-sidebar::before {
    content: ""; position: absolute; inset: .75rem 0 .75rem .75rem; z-index: -1; border-radius: 1.6rem;
    background: #eeedfe; border: 1px solid #dcd9fb; box-shadow: 0 18px 40px -26px rgba(83, 74, 183, .55);
}
.dark .fi-sidebar::before { background: #1c1a33; border-color: rgba(175, 169, 236, .14); box-shadow: none; }
@media (max-width: 1023px) { .fi-sidebar::before { inset: 0; border-radius: 0 1.6rem 1.6rem 0; } }
.fi-sidebar-header { background: transparent !important; box-shadow: none !important; padding-left: 1.6rem !important; }
.fi-sidebar-nav { padding: .6rem .7rem 1.4rem 1.45rem !important; gap: .35rem !important; }
.fi-sidebar-nav-groups { gap: .15rem !important; }
.fi-sidebar-nav-tenant-menu-ctn { margin-inline: 0 !important; }
.fi-sidebar-nav-tenant-menu-ctn .fi-tenant-menu-trigger,
.fi-sidebar-nav-tenant-menu-ctn button { border-radius: .9rem !important; background: #fff !important; border: 1px solid #dcd9fb; }
.dark .fi-sidebar-nav-tenant-menu-ctn button { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .08); }

/* Category rows ("Ventes", "Clients"…) and single rows ("Tableau de bord") share the same height and look */
.fi-sidebar-group { gap: 0 !important; }
.fi-sidebar-group { --tile: #cecbf6; --tile-ink: #3c3489; }
.fi-sidebar-group-button { padding: .3rem .45rem !important; border-radius: .85rem; gap: .65rem !important; }
.fi-sidebar-group-button:hover { background: rgba(255, 255, 255, .6); }
.dark .fi-sidebar-group-button:hover { background: rgba(255, 255, 255, .05); }
.fi-sidebar-group-label { text-transform: none !important; letter-spacing: 0 !important; font-size: .875rem !important; font-weight: 600 !important; color: #3c3489 !important; }
.dark .fi-sidebar-group-label { color: #cecbf6 !important; }
.fi-sidebar-group-icon, .fi-sidebar-group[data-group-label=""] .fi-sidebar-item-icon {
    box-sizing: content-box; width: 1.05rem !important; height: 1.05rem !important; padding: .32rem; border-radius: .6rem;
    background: var(--tile, #cecbf6); color: var(--tile-ink, #3c3489) !important;
}
.fi-sidebar-group-collapse-button { color: #7f77dd !important; }
.fi-sidebar-group-collapse-button svg { width: 1rem; height: 1rem; }
.nav-group-badge { min-width: 1.15rem; height: 1.15rem; padding: 0 .35rem; border-radius: 999px; font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #534ab7; }
.nav-group-badge.danger { background: #fcebeb; color: #a32d2d; }
.dark .nav-group-badge { background: rgba(255, 255, 255, .1); color: #cecbf6; }

/* One colour per category */
.fi-sidebar-group[data-group-label="Ventes"] { --tile: #f4c0d1; --tile-ink: #72243e; }
.fi-sidebar-group[data-group-label="Clients"] { --tile: #b5d4f4; --tile-ink: #0c447c; }
.fi-sidebar-group[data-group-label="Catalogue & stock"] { --tile: #9fe1cb; --tile-ink: #085041; }
.fi-sidebar-group[data-group-label="Dépenses"] { --tile: #fac775; --tile-ink: #633806; }
.fi-sidebar-group[data-group-label="GPS"] { --tile: #f5c4b3; --tile-ink: #712b13; }
.fi-sidebar-group[data-group-label="Administration"] { --tile: #d3d1c7; --tile-ink: #444441; }

/* Pages inside a category: no icon, smaller, along a thin line */
.fi-sidebar-group-items { gap: .05rem !important; }
.fi-sidebar-group[data-group-label]:not([data-group-label=""]) > .fi-sidebar-group-items { margin: .1rem 0 .35rem 1.35rem; padding-left: .7rem; border-left: 1.5px solid #cecbf6; }
.dark .fi-sidebar-group[data-group-label]:not([data-group-label=""]) > .fi-sidebar-group-items { border-color: rgba(175, 169, 236, .2); }
.fi-sidebar-group[data-group-label]:not([data-group-label=""]) .fi-sidebar-item-icon { display: none; }
.fi-sidebar-item-button { padding: .32rem .55rem !important; border-radius: .75rem !important; gap: .65rem !important; transition: background .15s; }
.fi-sidebar-group[data-group-label]:not([data-group-label=""]) .fi-sidebar-item-button { padding: .26rem .6rem !important; }
.fi-sidebar-item-label { font-size: .84rem !important; color: #534ab7 !important; font-weight: 500 !important; }
.dark .fi-sidebar-item-label { color: #c4c0f2 !important; }
.fi-sidebar-item-button:hover { background: rgba(255, 255, 255, .65) !important; transform: none; }
.dark .fi-sidebar-item-button:hover { background: rgba(255, 255, 255, .05) !important; }
.fi-sidebar-item-icon { color: #3c3489 !important; }

/* The page you are on: a white raised pill */
.fi-sidebar-item-active .fi-sidebar-item-button { background: #fff !important; box-shadow: 0 6px 16px -8px rgba(83, 74, 183, .55), 0 0 0 1px #dcd9fb; }
.dark .fi-sidebar-item-active .fi-sidebar-item-button { background: rgba(255, 255, 255, .1) !important; box-shadow: none; }
.fi-sidebar-item-active .fi-sidebar-item-label { color: #26215c !important; font-weight: 700 !important; }
.dark .fi-sidebar-item-active .fi-sidebar-item-label { color: #fff !important; }
.fi-sidebar-item-active .fi-sidebar-item-icon { color: #3c3489 !important; }
.fi-sidebar-group.fi-active > .fi-sidebar-group-button .fi-sidebar-group-label { color: #26215c !important; }
.dark .fi-sidebar-group.fi-active > .fi-sidebar-group-button .fi-sidebar-group-label { color: #fff !important; }

/* ---------- Top bar ---------- */
.fi-topbar > nav {
    background: rgba(255, 255, 255, .72) !important;
    backdrop-filter: blur(14px);
    box-shadow: none !important;
    border-bottom: 1px solid rgba(var(--primary-500), .08);
}
.dark .fi-topbar > nav { background: rgba(15, 23, 42, .72) !important; border-color: rgba(255, 255, 255, .06); }

/* ---------- Cards, tables, sections ---------- */
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-fo-tabs:not(.fi-contained-false) {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--soft-shadow) !important;
    border: 1px solid rgba(var(--primary-500), .07);
}
.fi-ta-header-cell { background: rgba(var(--primary-500), .045); }
.fi-ta-header-cell span { text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; color: rgb(var(--gray-500)); }
.fi-ta-row { transition: background .15s; }
.fi-ta-row:hover { background: rgba(var(--primary-500), .035) !important; }
.fi-header-heading { letter-spacing: -.02em; }

/* Stats with a coloured accent on top */
.fi-wi-stats-overview-stat { position: relative; overflow: hidden; }
.fi-wi-stats-overview-stat::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand-grad);
}
.fi-wi-stats-overview-stat-value { letter-spacing: -.02em; }

/* Primary buttons: gradient */
label.peer-x, .fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link):not(label),
.fi-ac-btn-action.fi-color-primary:not(.fi-btn-outlined) {
    background: var(--brand-grad) !important;
    border: 0 !important;
    box-shadow: 0 8px 20px -10px rgba(var(--primary-600), .8);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link):not(label):hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 12px 24px -10px rgba(var(--primary-600), .9);
}
.fi-btn { border-radius: .75rem !important; }

/* ---------- Modals: gradient header + spring animation ---------- */
.fi-modal-close-overlay {
    backdrop-filter: blur(6px);
    background: rgba(15, 23, 42, .45) !important;
}
.fi-modal-window {
    border-radius: 1.4rem !important;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(30, 27, 75, .45) !important;
    transform-origin: 50% 40%;
    transition-property: transform, opacity, filter !important;
    transition-timing-function: cubic-bezier(.2, 1.25, .35, 1) !important;
}
/* entering from / leaving to: Alpine adds "scale-95 opacity-0" */
.fi-modal-window.scale-95 {
    transform: translateY(36px) scale(.9) rotateX(8deg) !important;
    filter: blur(4px);
}
.fi-modal-window.duration-300 { transition-duration: 420ms !important; }
.fi-modal-window.scale-100.duration-300:not(.opacity-0) { transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important; }

.fi-modal-window:not(.fi-modal-slide-over-window) .fi-modal-header {
    background: var(--brand-grad);
    padding-bottom: 1.25rem !important;
    position: relative;
}
.fi-modal-window:not(.fi-modal-slide-over-window) .fi-modal-header::after {
    content: ""; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}
.fi-modal-window:not(.fi-modal-slide-over-window) .fi-modal-heading,
.fi-modal-window:not(.fi-modal-slide-over-window) .fi-modal-description { color: #fff !important; position: relative; z-index: 1; }
.fi-modal-window:not(.fi-modal-slide-over-window) .fi-modal-description { opacity: .85; }
.fi-modal-window:not(.fi-modal-slide-over-window) .fi-modal-header div.rounded-full:has(> .fi-modal-icon) {
    background: rgba(255, 255, 255, .2) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.fi-modal-window:not(.fi-modal-slide-over-window) .fi-modal-header .fi-modal-icon { color: #fff !important; }
.fi-modal-window:not(.fi-modal-slide-over-window) .fi-modal-header div.rounded-full:has(> .fi-modal-icon) {
    animation: fi-icon-pop .6s .15s both cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes fi-icon-pop { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.fi-modal-window:not(.fi-modal-slide-over-window) .fi-modal-close-btn { color: rgba(255, 255, 255, .85) !important; z-index: 2; }
.fi-modal-window:not(.fi-modal-slide-over-window) .fi-modal-close-btn:hover { color: #fff !important; transform: rotate(90deg); transition: transform .25s; }
.fi-modal-footer { background: rgb(var(--gray-50)); border-top: 1px solid rgb(var(--gray-100)); padding-top: 1rem !important; padding-bottom: 1rem !important; }
.dark .fi-modal-footer { background: rgba(255, 255, 255, .02); border-color: rgba(255, 255, 255, .06); }
.fi-modal-content { animation: fi-content-in .45s .08s both cubic-bezier(.2, .8, .2, 1); }
@keyframes fi-content-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Danger confirmations keep a red header */
.fi-modal-window:has(.fi-modal-header .fi-color-danger) .fi-modal-header {
    background: linear-gradient(135deg, rgb(var(--danger-600)), rgb(var(--danger-400)));
}

/* ---------- Catalogue form (iabako-like "+ Ajouter…" links) ---------- */
.catalog-links .fi-ac { gap: .25rem 1.25rem !important; flex-wrap: wrap; }
.catalog-links .fi-link { font-size: .82rem; }
.catalog-price-box {
    background: linear-gradient(135deg, rgba(var(--primary-500), .07), rgba(217, 70, 239, .05));
    border: 1px solid rgba(var(--primary-500), .14);
    border-radius: 1rem;
    padding: 1rem;
}
.catalog-margin { display: inline-block; padding: .3rem .7rem; border-radius: 999px; font-weight: 600; font-size: .85rem; }
.catalog-margin-success { background: rgba(var(--success-500), .12); color: rgb(var(--success-700)); }
.catalog-margin-warning { background: rgba(var(--warning-500), .15); color: rgb(var(--warning-700)); }
.catalog-margin-danger { background: rgba(var(--danger-500), .12); color: rgb(var(--danger-700)); }
.catalog-stock-row {
    display: flex; justify-content: space-between; padding: .55rem .8rem; border-radius: .7rem;
    background: rgba(var(--primary-500), .05); margin-bottom: .35rem; font-size: .875rem;
}
.catalog-stock-row b { color: rgb(var(--primary-600)); }

/* Tabs inside modals */
.fi-modal .fi-tabs { border-bottom: 1px solid rgb(var(--gray-100)); }
.fi-tabs-item-active { background: rgba(var(--primary-500), .1) !important; }

/* Badges a bit rounder */
.fi-badge { border-radius: 999px !important; }

/* Inputs */
.fi-input-wrp { border-radius: .75rem !important; transition: box-shadow .15s; }
.fi-input-wrp:focus-within { box-shadow: 0 0 0 4px rgba(var(--primary-500), .15) !important; }

/* ---------- Sales: totals (form + paper) ---------- */
.doc-totals { margin-left: auto; max-width: 22rem; display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; }
.doc-totals-row { display: flex; justify-content: space-between; gap: 2rem; padding: .2rem .25rem; }
.doc-totals-row.muted { color: rgb(var(--gray-500)); font-size: .85rem; }
.doc-totals-row.grand {
    margin-top: .35rem; padding: .7rem .9rem; border-radius: .9rem; color: #fff; font-size: 1.05rem;
    background: var(--brand-grad); box-shadow: 0 10px 24px -12px rgba(var(--primary-600), .8);
}
.doc-totals-row.due { margin-top: .25rem; padding: .55rem .9rem; border-radius: .8rem; font-weight: 600; }
.doc-totals-row.due.open { background: rgba(var(--danger-500), .1); color: rgb(var(--danger-700)); }
.doc-totals-row.due.closed { background: rgba(var(--success-500), .12); color: rgb(var(--success-700)); }

/* Line editor: compact rows */
.doc-lines .fi-fo-repeater-item { border-radius: 1rem !important; border: 1px solid rgba(var(--primary-500), .12); }
.doc-lines .fi-fo-repeater-item-header { background: rgba(var(--primary-500), .04); border-radius: 1rem 1rem 0 0; }
.doc-lines .fi-fo-repeater-item-header-label { font-weight: 600; color: rgb(var(--gray-700)); }
.dark .doc-lines .fi-fo-repeater-item-header-label { color: rgb(var(--gray-200)); }

/* ---------- Sales: document "paper" ---------- */
.doc-paper {
    position: relative; overflow: hidden; max-width: 60rem; margin: 0 auto; padding: 2.5rem 2.75rem 2rem;
    background: #fff; color: rgb(var(--gray-800)); border-radius: 1.25rem; font-size: .9rem;
    box-shadow: 0 30px 60px -30px rgba(30, 27, 75, .35), 0 0 0 1px rgba(var(--primary-500), .08);
}
.dark .doc-paper { background: rgb(var(--gray-900)); color: rgb(var(--gray-100)); }
.doc-paper::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--brand-grad); }
.doc-ribbon {
    position: absolute; top: 26px; right: -46px; transform: rotate(45deg); width: 190px; text-align: center;
    padding: .35rem 0; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
.doc-ribbon-success { background: rgb(var(--success-500)); }
.doc-ribbon-danger { background: rgb(var(--danger-500)); }
.doc-ribbon-warning { background: rgb(var(--warning-500)); }
.doc-ribbon-info, .doc-ribbon-primary { background: rgb(var(--primary-500)); }
.doc-ribbon-gray { background: rgb(var(--gray-400)); }
.doc-head { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.doc-company { display: flex; gap: 1rem; align-items: flex-start; }
.doc-logo { max-height: 56px; max-width: 140px; object-fit: contain; }
.doc-logo-fallback {
    width: 52px; height: 52px; border-radius: 1rem; display: grid; place-items: center; color: #fff;
    font-weight: 700; text-transform: uppercase; background: var(--brand-grad);
}
.doc-company-name { font-weight: 700; font-size: 1.05rem; }
.doc-muted { color: rgb(var(--gray-500)); font-size: .82rem; }
.doc-title { text-align: right; }
.doc-type { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; color: rgb(var(--primary-500)); font-weight: 700; }
.doc-number { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.doc-meta { display: grid; grid-template-columns: auto auto; gap: .2rem 1rem; justify-content: end; margin-top: .5rem; font-size: .82rem; }
.doc-meta span { color: rgb(var(--gray-500)); }
.doc-text-danger { color: rgb(var(--danger-600)); }
.doc-parties { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.doc-customer, .doc-links {
    padding: 1rem 1.25rem; border-radius: 1rem; min-width: 16rem;
    background: linear-gradient(135deg, rgba(var(--primary-500), .06), rgba(217, 70, 239, .04));
    border: 1px solid rgba(var(--primary-500), .12);
}
.doc-links a { display: block; color: rgb(var(--primary-600)); font-weight: 600; margin-bottom: .4rem; }
.doc-label { text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; color: rgb(var(--primary-500)); font-weight: 700; margin-bottom: .3rem; display: block; }
.doc-customer-name { font-weight: 700; font-size: 1rem; }
.doc-lines-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 1.5rem; }
.doc-lines-table th {
    text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--gray-500));
    padding: .6rem .75rem; background: rgba(var(--primary-500), .05);
}
.doc-lines-table th:first-child { border-radius: .7rem 0 0 .7rem; }
.doc-lines-table th:last-child { border-radius: 0 .7rem .7rem 0; }
.doc-lines-table td { padding: .7rem .75rem; border-bottom: 1px solid rgb(var(--gray-100)); }
.dark .doc-lines-table td { border-color: rgba(255, 255, 255, .06); }
.doc-lines-table .r { text-align: right; white-space: nowrap; }
.doc-bottom { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.doc-notes { flex: 1; min-width: 14rem; font-size: .85rem; }
.doc-bank { margin-top: .75rem; padding: .7rem .9rem; border-radius: .8rem; background: rgb(var(--gray-50)); font-size: .8rem; }
.dark .doc-bank { background: rgba(255, 255, 255, .04); }
.doc-signature { display: flex; gap: 1rem; margin-top: 1rem; }
.doc-signature img { max-height: 80px; max-width: 150px; object-fit: contain; }
.doc-totals-paper { min-width: 18rem; }
.doc-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed rgb(var(--gray-200)); text-align: center; font-size: .75rem; color: rgb(var(--gray-500)); }

/* ---------- Dashboard ---------- */
@media (min-width: 768px) {
    .fi-wi-stats-overview-stats-ctn:has(> :nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .fi-wi-stats-overview-stats-ctn:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.fi-wi-stats-overview-stat-value { font-size: 1.6rem !important; }
.fi-wi-chart .fi-section, .fi-wi-table .fi-ta-ctn { height: 100%; }
.fi-page-dashboard .fi-fo-toggle-buttons .fi-btn { border-radius: .7rem !important; }
.fi-header-subheading { text-transform: none; }

/* Toggle buttons: only the checked one gets the gradient */
input.peer:not(:checked) + .fi-btn {
    background: rgba(255, 255, 255, .7) !important;
    color: rgb(var(--gray-600)) !important;
    box-shadow: inset 0 0 0 1px rgb(var(--gray-200)) !important;
}
.dark input.peer:not(:checked) + .fi-btn { background: rgba(255, 255, 255, .04) !important; color: rgb(var(--gray-300)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important; }
input.peer:not(:checked) + .fi-btn:hover { color: rgb(var(--primary-600)) !important; transform: none; }
input.peer:checked + .fi-btn { background: var(--brand-grad) !important; color: #fff !important; }
.fi-btn-group { border-radius: .9rem !important; overflow: hidden; background: rgba(255, 255, 255, .7); }
.fi-btn-group .fi-btn { border-radius: 0 !important; box-shadow: none !important; }
.fi-btn-group input.peer:not(:checked) + .fi-btn { box-shadow: none !important; }

/* Modal body and footer: Filament indents them under the header icon (ps-[5.25rem]); keep them centred. */
.fi-modal-window .fi-modal-content,
.fi-modal-window .fi-modal-footer {
    padding-inline-start: 1.5rem !important;
    padding-inline-end: 1.5rem !important;
}

/* ---------- Sales list: filter chips ---------- */
.doc-chips { display: flex; flex-direction: column; gap: .6rem; padding: .9rem 1rem; border-radius: 1rem;
    background: rgba(255, 255, 255, .75); border: 1px solid rgba(var(--primary-500), .08); box-shadow: var(--soft-shadow); }
.dark .doc-chips { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .06); }
.doc-chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.doc-chips-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgb(var(--primary-500)); width: 4.5rem; }
.doc-chip {
    display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
    background: #fff; color: rgb(var(--gray-600)); box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); transition: all .15s;
}
.dark .doc-chip { background: rgba(255, 255, 255, .04); color: rgb(var(--gray-300)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.doc-chip:hover { color: rgb(var(--primary-600)); box-shadow: inset 0 0 0 1px rgb(var(--primary-300)); }
.doc-chip.on { background: var(--brand-grad); color: #fff; box-shadow: 0 6px 16px -8px rgba(var(--primary-600), .8); }
.doc-chip-success.on { background: linear-gradient(135deg, rgb(var(--success-600)), rgb(var(--success-400))); box-shadow: 0 6px 16px -8px rgba(var(--success-600), .8); }
.doc-chip-danger.on { background: linear-gradient(135deg, rgb(var(--danger-600)), rgb(var(--danger-400))); box-shadow: 0 6px 16px -8px rgba(var(--danger-600), .8); }
.doc-chip-warning.on { background: linear-gradient(135deg, rgb(var(--warning-600)), rgb(var(--warning-400))); box-shadow: 0 6px 16px -8px rgba(var(--warning-600), .8); }
.doc-chip-gray.on { background: rgb(var(--gray-700)); box-shadow: none; }
.doc-chip-count { font-size: .7rem; padding: 0 .4rem; border-radius: 999px; background: rgba(var(--gray-500), .12); }
.doc-chip.on .doc-chip-count { background: rgba(255, 255, 255, .25); }
.doc-chip-clear { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; color: rgb(var(--gray-500)); margin-left: .25rem; }
.doc-chip-clear:hover { color: rgb(var(--danger-600)); }
/* Table summary row */
.fi-ta-summary-row td, .fi-ta-summary-header-cell { background: rgba(var(--primary-500), .05); }
.fi-ta-text-summary-label { text-transform: uppercase; letter-spacing: .05em; font-size: .68rem !important; }
.fi-ta-text-summary span:last-child { font-weight: 700; }

/* Sales list: big search bar in the filter panel (replaces the small table search) */
.doc-search {
    position: relative; display: flex; align-items: center; width: 100%;
    background: #fff; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgb(var(--gray-200)); transition: box-shadow .15s;
}
.dark .doc-search { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.doc-search:focus-within { box-shadow: inset 0 0 0 2px rgb(var(--primary-500)), 0 0 0 5px rgba(var(--primary-500), .12); }
.doc-search-icon { position: absolute; left: 1.1rem; width: 1.35rem; height: 1.35rem; color: rgb(var(--primary-500)); }
.doc-search input {
    width: 100%; border: 0; background: transparent; padding: .95rem 3rem .95rem 3.1rem; font-size: 1rem; border-radius: 999px; outline: none;
}
.doc-search input:focus { box-shadow: none; }
.doc-search input::-webkit-search-cancel-button { display: none; }
.doc-search-clear, .doc-search-loading { position: absolute; right: 1rem; color: rgb(var(--gray-400)); }
.doc-search-clear:hover { color: rgb(var(--danger-500)); }
.doc-list-page .fi-ta-search-field { display: none; }
.doc-list-page .fi-ta-filter-indicators { display: none; }

/* =====================================================================
   Document editor (modal, 3 steps, iabako-like)
   ===================================================================== */
.fi-modal-window:has(.de) .fi-modal-content { padding: 0 !important; gap: 0 !important; }
.fi-modal-window:has(.de) .fi-modal-header { display: none !important; }
.de { display: flex; flex-direction: column; font-size: .9rem; }
.de input[type=text], .de input[type=email], .de input[type=number], .de input[type=date], .de select, .de textarea {
    width: 100%; border: 1px solid rgb(var(--gray-200)); border-radius: .7rem; padding: .55rem .75rem; background: #fff;
    font-size: .9rem; transition: border-color .15s, box-shadow .15s;
}
.dark .de input, .dark .de select, .dark .de textarea { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: inherit; }
.de input:focus, .de select:focus, .de textarea:focus { outline: none; border-color: rgb(var(--primary-400)); box-shadow: 0 0 0 4px rgba(var(--primary-500), .12); }
.de input.r { text-align: right; }
.de input.narrow { width: 5rem; display: inline-block; }
.de label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; font-weight: 600; color: rgb(var(--gray-600)); }
.de label.inline { flex-direction: row; align-items: center; gap: .6rem; font-size: .9rem; }
.de-muted { color: rgb(var(--gray-500)); font-weight: 400; }
.de .small { font-size: .78rem; }
.de-error { margin-top: .6rem; padding: .55rem .8rem; border-radius: .7rem; background: rgba(var(--danger-500), .1); color: rgb(var(--danger-700)); font-size: .85rem; }

.de-head { position: relative; display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.5rem; color: #fff; background: var(--brand-grad); overflow: hidden; }
.de-head::after { content: ""; position: absolute; right: -50px; top: -70px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.12); }
.de-head-icon { width: 2.6rem; height: 2.6rem; border-radius: .9rem; display: grid; place-items: center; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.de-head-title { font-size: 1.15rem; font-weight: 700; }
.de-head-sub { font-size: .8rem; opacity: .85; }
.de-head-close { margin-left: auto; z-index: 1; color: rgba(255,255,255,.85); transition: transform .25s; }
.de-head-close:hover { color: #fff; transform: rotate(90deg); }
.de-meta { display: flex; gap: 1rem; padding: .9rem 1.5rem; background: rgb(var(--gray-50)); border-bottom: 1px solid rgb(var(--gray-100)); }
.dark .de-meta { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.06); }
.de-meta label { flex-direction: row; align-items: center; gap: .5rem; white-space: nowrap; }
.de-meta label input { width: auto; }
.de-meta label:last-child { flex: 1; }
.de-meta label:last-child input { flex: 1; }

.de-step { border-bottom: 1px solid rgb(var(--gray-100)); }
.dark .de-step { border-color: rgba(255,255,255,.06); }
.de-step-head { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .9rem 1.5rem; text-align: left; transition: background .15s; }
.de-step-head:hover { background: rgba(var(--primary-500), .04); }
.de-step-num { width: 1.8rem; height: 1.8rem; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: .85rem;
    background: rgb(var(--gray-100)); color: rgb(var(--gray-500)); }
.de-step-title { font-size: 1.02rem; font-weight: 700; color: rgb(var(--gray-700)); }
.dark .de-step-title { color: rgb(var(--gray-200)); }
.de-step-summary { margin-left: .5rem; color: rgb(var(--gray-500)); font-size: .85rem; }
.de-step-edit { margin-left: auto; width: 1.2rem; height: 1.2rem; color: rgb(var(--primary-500)); }
.de-step.open .de-step-head { background: linear-gradient(90deg, rgba(var(--primary-500), .1), transparent); }
.de-step.open .de-step-num, .de-step.done .de-step-num { background: var(--brand-grad); color: #fff; }
.de-step.locked .de-step-head { opacity: .5; cursor: default; }
.de-step-body { padding: .5rem 1.5rem 1.4rem; animation: fi-content-in .35s both; }

.de-check { flex-direction: row !important; align-items: center; gap: .5rem !important; font-size: .9rem !important; font-weight: 500 !important; margin-bottom: .8rem; }
.de-check input[type=checkbox] { width: 1.1rem; height: 1.1rem; border-radius: .35rem; accent-color: rgb(var(--primary-600)); }
.de-check input.narrow, .de-check select { width: auto; }

.de-search-row { display: flex; gap: .6rem; align-items: flex-start; }
.de-search { position: relative; flex: 1; }
.de-search-icon { position: absolute; left: .9rem; top: .85rem; width: 1.2rem; height: 1.2rem; color: rgb(var(--primary-500)); }
.de-search input { padding: .75rem 1rem .75rem 2.7rem !important; font-size: .95rem !important; border-radius: 999px !important; }
.de-search.small .de-search-icon { top: .62rem; width: 1.05rem; }
.de-search.small input { padding: .5rem .8rem .5rem 2.3rem !important; font-size: .88rem !important; border-radius: .7rem !important; }
.de-search-loading { position: absolute; right: 1rem; top: .8rem; }
.de-dropdown { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .35rem); background: #fff; border-radius: 1rem; overflow: hidden;
    box-shadow: 0 20px 50px -15px rgba(30,27,75,.35), 0 0 0 1px rgba(var(--primary-500), .12); animation: fi-content-in .2s both; }
.dark .de-dropdown { background: rgb(var(--gray-900)); }
.de-dropdown-item { width: 100%; display: flex; align-items: center; gap: .8rem; padding: .65rem .9rem; text-align: left; border-bottom: 1px solid rgb(var(--gray-100)); }
.dark .de-dropdown-item { border-color: rgba(255,255,255,.06); }
.de-dropdown-item:hover { background: rgba(var(--primary-500), .07); }
.de-dropdown-item .grow { flex: 1; }
.de-dropdown-icon { width: 1.5rem; height: 1.5rem; color: rgb(var(--primary-400)); flex-shrink: 0; }
.de-dropdown-empty { padding: .8rem 1rem; color: rgb(var(--gray-500)); }
.de-dropdown-foot { display: flex; gap: 1rem; padding: .55rem .9rem; background: rgb(var(--gray-50)); }
.dark .de-dropdown-foot { background: rgba(255,255,255,.03); }
.de-dropdown-foot button { color: rgb(var(--primary-600)); font-weight: 600; font-size: .82rem; }
.de-price { font-weight: 700; color: rgb(var(--primary-600)); white-space: nowrap; }

.de-icon-btn { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .7rem; color: rgb(var(--primary-500)); transition: background .15s; flex-shrink: 0; }
.de-icon-btn:hover { background: rgba(var(--primary-500), .1); }
.de-icon-btn.big { width: 2.9rem; height: 2.9rem; border-radius: 999px; background: rgba(var(--primary-500), .08); }
.de-link { color: rgb(var(--primary-600)); font-weight: 600; font-size: .85rem; }
.de-link:hover { text-decoration: underline; }

.de-customer-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: 1rem;
    background: linear-gradient(135deg, rgba(var(--primary-500), .07), rgba(217,70,239,.05)); border: 1px solid rgba(var(--primary-500), .15); }
.de-customer-avatar { width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center; color: #fff; font-weight: 700; background: var(--brand-grad); flex-shrink: 0; }
.de-customer-info { flex: 1; line-height: 1.55; }
.de-customer-name { font-weight: 700; font-size: 1.02rem; }
.de-tariff { display: inline-block; margin: .2rem 0 .3rem; }
.de-customer-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }

.de-panel { margin-top: .8rem; padding: 1rem 1.1rem; border-radius: 1rem; background: rgb(var(--gray-50)); border: 1px solid rgb(var(--gray-100)); display: flex; flex-direction: column; gap: .8rem; animation: fi-content-in .25s both; }
.dark .de-panel { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); }
.de-panel.inline { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .6rem; }
.de-panel.inline input[type=text] { flex: 1; min-width: 12rem; }
.de-panel-title { font-weight: 700; }
.de-panel-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.de-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; }
@media (min-width: 900px) { .de-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.de-grid .span-2 { grid-column: span 2; }

.de-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: .8rem; font-weight: 600; font-size: .88rem; transition: all .15s; }
.de-btn.primary { color: #fff; background: var(--brand-grad); box-shadow: 0 8px 20px -10px rgba(var(--primary-600), .8); }
.de-btn.primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.de-btn.ghost { color: rgb(var(--gray-600)); box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); background: #fff; }
.dark .de-btn.ghost { background: transparent; color: rgb(var(--gray-300)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.de-btn.ghost:hover { color: rgb(var(--primary-600)); }
.de-btn.big { padding: .75rem 1.5rem; font-size: 1rem; border-radius: 999px; }
.de-btn[disabled] { opacity: .6; }

.de-lines-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.de-menu { position: relative; }
.de-menu-btn { width: 2.6rem; height: 2.6rem; border-radius: 999px; display: grid; place-items: center; color: rgb(var(--primary-600)); box-shadow: inset 0 0 0 1.5px rgb(var(--primary-300)); transition: all .15s; }
.de-menu-btn:hover { background: var(--brand-grad); color: #fff; box-shadow: none; }
.de-menu-list { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40; min-width: 14rem; padding: .4rem; border-radius: 1rem; background: #fff;
    box-shadow: 0 20px 50px -15px rgba(30,27,75,.35), 0 0 0 1px rgba(var(--primary-500), .12); display: flex; flex-direction: column; }
.dark .de-menu-list { background: rgb(var(--gray-900)); }
.de-menu-list button { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: .7rem; text-align: left; font-weight: 600; color: rgb(var(--gray-700)); }
.dark .de-menu-list button { color: rgb(var(--gray-200)); }
.de-menu-list button:hover { background: rgba(var(--primary-500), .1); color: rgb(var(--primary-700)); }
.de-menu-list svg { color: rgb(var(--primary-500)); }

.de-table { display: flex; flex-direction: column; gap: .35rem; }
.de-tr { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 7rem 8rem 8rem 2.2rem; gap: .5rem; align-items: start; padding: .45rem .5rem; border-radius: .9rem; }
.de-tr:not(.de-th):hover { background: rgba(var(--primary-500), .03); }
.de-th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: rgb(var(--gray-500)); background: rgba(var(--primary-500), .05); padding: .6rem .5rem; }
.de-th .r, .de-line-total { text-align: right; }
.de-cell-product { position: relative; }
.de-chosen { display: flex; align-items: center; gap: .4rem; }
.de-chosen-icon { width: 1.3rem; height: 1.3rem; color: rgb(var(--primary-400)); flex-shrink: 0; }
.de-chosen input { font-weight: 600; }
.de-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 0 1.7rem; }
.de-tag { font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: rgba(var(--gray-500), .12); color: rgb(var(--gray-600)); }
.de-tag.success { background: rgba(var(--success-500), .14); color: rgb(var(--success-700)); }
.de-tag.danger { background: rgba(var(--danger-500), .12); color: rgb(var(--danger-700)); }
.de-tag.warning { background: rgba(var(--warning-500), .16); color: rgb(var(--warning-700)); }
.de-tag.info { background: rgba(var(--info-500), .14); color: rgb(var(--info-700)); }
.de-line-total { padding-top: .55rem; font-weight: 700; white-space: nowrap; }
.de-remove { width: 2rem; height: 2.2rem; border-radius: .6rem; font-size: 1.3rem; color: rgb(var(--gray-400)); }
.de-remove:hover { color: rgb(var(--danger-600)); background: rgba(var(--danger-500), .08); }
.de-add-line { margin-top: .3rem; padding: .75rem; border-radius: .9rem; border: 1.5px dashed rgb(var(--primary-300)); color: rgb(var(--primary-600)); font-weight: 600; text-align: left; transition: background .15s; }
.de-add-line:hover { background: rgba(var(--primary-500), .05); }

.de-bottom { display: flex; gap: 1.5rem; margin-top: 1rem; flex-wrap: wrap; }
.de-notes { flex: 1; min-width: 16rem; display: flex; flex-direction: column; gap: .7rem; }
.de-notes label.internal textarea { border-style: dashed; }
.de-stock-info { display: flex; align-items: center; gap: .3rem; }
.de-totals { min-width: 19rem; display: flex; flex-direction: column; gap: .3rem; }
.de-totals .row { display: flex; justify-content: space-between; padding: .2rem .4rem; }
.de-totals .row.muted { color: rgb(var(--gray-500)); }
.de-totals .row.grand { margin-top: .3rem; padding: .7rem .9rem; border-radius: .9rem; color: #fff; font-size: 1.05rem; background: var(--brand-grad); box-shadow: 0 10px 24px -12px rgba(var(--primary-600), .8); }

.de-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; }
.de-mode { position: relative; flex-direction: row !important; align-items: center; gap: .8rem !important; padding: .9rem 1rem; border-radius: 1rem; cursor: pointer;
    border: 1.5px solid rgb(var(--gray-200)); font-size: .9rem !important; color: inherit !important; transition: all .15s; }
.de-mode input { position: absolute; opacity: 0; pointer-events: none; }
.de-mode svg { color: rgb(var(--gray-400)); }
.de-mode.on { border-color: rgb(var(--primary-400)); background: linear-gradient(135deg, rgba(var(--primary-500), .08), rgba(217,70,239,.05)); box-shadow: 0 0 0 4px rgba(var(--primary-500), .1); }
.de-mode.on svg { color: rgb(var(--primary-600)); }
.de-schedule-head { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.de-schedule-head .de-check { margin: 0; }
.de-schedule-head select { width: auto; }
.de-schedules { display: flex; flex-direction: column; gap: .45rem; }
.de-schedule { display: grid; grid-template-columns: 7rem 11rem 12rem; gap: .6rem; align-items: center; }
.de-schedule-num { font-weight: 600; color: rgb(var(--gray-600)); }
.de-amount { display: flex; align-items: center; gap: .4rem; }
.de-schedule-total { padding: .55rem .8rem; border-radius: .7rem; background: rgba(var(--success-500), .1); color: rgb(var(--success-700)); font-size: .85rem; }
.de-schedule-total.bad { background: rgba(var(--danger-500), .1); color: rgb(var(--danger-700)); }

.de-foot { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .9rem 1.5rem; background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px); border-top: 1px solid rgb(var(--gray-100)); }
.dark .de-foot { background: rgba(17,24,39,.92); border-color: rgba(255,255,255,.06); }
.de-foot-total { margin-left: auto; font-size: 1.15rem; font-weight: 800; }
@media (max-width: 760px) {
    .de-tr { grid-template-columns: minmax(0,1fr) 5rem 2rem; }
    .de-th { display: none; }
    .de-schedule { grid-template-columns: 1fr; }
    .de-meta { flex-direction: column; }
}

/* Editor: the open step (and its dropdowns) above the following steps; lighter placeholders */
.de-step.open { position: relative; z-index: 5; }
.de-dropdown, .de-menu-list { z-index: 60; }
.de input::placeholder, .de textarea::placeholder { color: rgb(var(--gray-400)); font-weight: 400; }
.de-check input.narrow { width: 4.5rem !important; }
.de-check select { width: auto !important; min-width: 7rem; }

/* Editor v2: centred "Suivant", notes side by side, side buttons (PDF, print, e-mail, delivery note) */
.de { position: relative; }
.fi-modal-window:has(.de) { overflow: visible !important; }
.de-customer-zone { max-width: 46rem; margin: 0 auto; }
.de-next { display: flex; justify-content: center; margin-top: 1.3rem; }
.de-next > button:not(.de-validate) { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem 1rem; border-radius: 999px; font-size: 1.05rem; font-weight: 700; color: rgb(var(--primary-600)); transition: background .15s, gap .15s; }
.de-next > button:not(.de-validate):hover { background: rgba(var(--primary-500), .08); gap: .55rem; }
.de-validate { display: inline-flex; align-items: center; gap: .4rem; padding: .8rem 2rem; border-radius: 999px; font-size: 1rem; font-weight: 700; color: #fff; background: var(--brand-grad); box-shadow: 0 12px 26px -12px rgba(var(--primary-600), .9); transition: transform .15s, filter .15s; }
.de-validate:hover { transform: translateY(-1px); filter: brightness(1.06); }
.de-validate[disabled] { opacity: .65; }
.de-totals-row { display: flex; justify-content: flex-end; margin-top: 1rem; }
.de .de-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.1rem; min-width: 0; flex: none; }
.de-notes textarea { resize: vertical; min-height: 5.5rem; }
.de-stock-info { justify-content: flex-end; margin-top: .6rem; }
.de-grid .span-4 { grid-column: 1 / -1; }
.de-directory { margin-bottom: .2rem; }
.de-directory input { background: rgba(var(--primary-500), .04) !important; }
.de-mail { padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: .8rem; background: linear-gradient(135deg, rgba(var(--primary-500), .07), rgba(217,70,239,.05)); border-bottom: 1px solid rgb(var(--gray-100)); animation: fi-content-in .25s both; }

.de-side { position: absolute; left: -5.2rem; top: 5.5rem; z-index: 30; display: flex; flex-direction: column; gap: .9rem; }
.de-side-btn { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 4rem; color: #fff; font-size: .68rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.de-side-btn svg { width: 3.3rem !important; height: 3.3rem !important; padding: .85rem; border-radius: 999px; background: #fff; color: rgb(var(--primary-600));
    box-shadow: 0 10px 24px -10px rgba(0,0,0,.45), inset 0 0 0 2px rgba(var(--primary-500), .35); transition: transform .2s, background .2s, color .2s; }
.dark .de-side-btn svg { background: rgb(var(--gray-900)); color: rgb(var(--primary-400)); }
.de-side-btn:hover svg { background: var(--brand-grad); color: #fff; transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 28px -10px rgba(var(--primary-600), .8); }
.de-side-btn.busy svg { animation: de-pulse .8s infinite alternate; }
@keyframes de-pulse { to { transform: scale(.9); opacity: .6; } }
@media (max-width: 1240px) {
    .de-side { left: auto; right: 4rem; top: 1.05rem; flex-direction: row; gap: .45rem; }
    .de-side-btn { width: auto; }
    .de-side-btn span { display: none; }
    .de-side-btn svg { width: 2.4rem !important; height: 2.4rem !important; padding: .55rem; box-shadow: none; }
}
@media (max-width: 760px) {
    .de .de-notes { grid-template-columns: 1fr; }
    .de-side { position: static; justify-content: center; padding: .6rem 0 0; order: -1; background: var(--brand-grad); }
}

/* Editor: grey totals band (iabako-like separation) */
.de-summary { display: flex; margin-top: 1.1rem; border-radius: 1rem; overflow: hidden; background: rgb(var(--gray-100)); border: 1px solid rgb(var(--gray-200)); }
.dark .de-summary { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.de-summary-side { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem; padding: 1rem 1.2rem; color: rgb(var(--gray-500)); font-size: .82rem; }
.de-summary-side span { display: inline-flex; align-items: center; gap: .4rem; }
.de-summary-side b { color: rgb(var(--gray-700)); }
.dark .de-summary-side b { color: rgb(var(--gray-200)); }
.de-summary-totals { min-width: 21rem; display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1.2rem; background: rgba(255,255,255,.75); border-left: 1px solid rgb(var(--gray-200)); }
.dark .de-summary-totals { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
.de-summary-totals .row { display: flex; justify-content: space-between; gap: 1.5rem; padding: .15rem 0; }
.de-summary-totals .row.muted { color: rgb(var(--gray-500)); }
.de-summary-totals .row.grand { margin-top: .4rem; padding-top: .6rem; border-top: 1px solid rgb(var(--gray-200)); font-size: 1.2rem; }
.de-summary-totals .row.grand b { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
@media (max-width: 760px) { .de-summary { flex-direction: column; } .de-summary-totals { min-width: 0; border-left: 0; border-top: 1px solid rgb(var(--gray-200)); } }

/* Side buttons follow the scroll of the modal */
.de-side { bottom: 0; display: block; }
.de-side-inner { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: .9rem; }
@media (max-width: 1240px) { .de-side { bottom: auto; } .de-side-inner { position: static; flex-direction: row; gap: .45rem; } }
@media (max-width: 760px) { .de-side-inner { justify-content: center; } }

/* Grouped payment: allocation preview */
.gp-table { width: 100%; border-collapse: separate; border-spacing: 0 .3rem; font-size: .85rem; }
.gp-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--gray-500)); padding: 0 .6rem; }
.gp-table td { padding: .55rem .6rem; background: rgb(var(--gray-50)); }
.dark .gp-table td { background: rgba(255,255,255,.04); }
.gp-table td:first-child { border-radius: .7rem 0 0 .7rem; }
.gp-table td:last-child { border-radius: 0 .7rem .7rem 0; }
.gp-table .gp-r { text-align: right; white-space: nowrap; }
.gp-muted { color: rgb(var(--gray-500)); font-size: .75rem; }
.gp-pay { font-weight: 700; color: rgb(var(--success-600)); }
.gp-full td { background: rgba(var(--success-500), .08); }
.gp-part td { background: rgba(var(--warning-500), .1); }
.gp-none td { opacity: .55; }
.gp-tag { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.gp-tag.ok { background: rgba(var(--success-500), .16); color: rgb(var(--success-700)); }
.gp-tag.part { background: rgba(var(--warning-500), .18); color: rgb(var(--warning-700)); }
.gp-warning { margin-top: .4rem; padding: .55rem .8rem; border-radius: .7rem; background: rgba(var(--warning-500), .14); color: rgb(var(--warning-700)); font-size: .85rem; }
.gp-ok { padding: .55rem .8rem; border-radius: .7rem; background: rgba(var(--success-500), .1); color: rgb(var(--success-700)); font-size: .85rem; }

/* Quick payment next to "Encaisser un paiement" */
.qp { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.qp-form { display: flex; align-items: center; gap: .4rem; }
.qp-amount { display: flex; align-items: center; gap: .3rem; padding: 0 .7rem; height: 2.4rem; border-radius: .75rem; background: #fff;
    box-shadow: inset 0 0 0 1.5px rgb(var(--success-400)), 0 6px 16px -10px rgba(var(--success-600), .8); }
.dark .qp-amount { background: rgba(255,255,255,.04); }
.qp-amount input { width: 9rem; border: 0; outline: none; background: transparent; font-weight: 700; font-size: .95rem; padding: 0; box-shadow: none; }
.qp-amount input:focus { box-shadow: none; }
.qp-amount span { color: rgb(var(--gray-500)); font-size: .85rem; }
.qp-method { height: 2.4rem; border-radius: .75rem; border: 1px solid rgb(var(--gray-200)); font-size: .85rem; padding: 0 2rem 0 .7rem; background-color: #fff; }
.dark .qp-method { background-color: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.qp-btn { height: 2.4rem; padding: 0 1rem; border-radius: .75rem; font-weight: 700; font-size: .88rem; color: #fff; background: rgb(var(--success-600)); transition: filter .15s; }
.qp-btn:hover { filter: brightness(1.08); }
.qp-btn[disabled] { opacity: .6; }
.qp-alert { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: .75rem; font-size: .85rem;
    background: rgba(var(--danger-500), .1); color: rgb(var(--danger-700)); border: 1px solid rgba(var(--danger-500), .35); animation: fi-content-in .2s both; }
.fi-ta-row.qp-error, tr.qp-error { box-shadow: inset 4px 0 0 rgb(var(--danger-500)); }
tr.qp-error > td { background: rgba(var(--danger-500), .07) !important; }
tr.qp-error > td:first-child { box-shadow: inset 0 1px 0 rgba(var(--danger-500), .4), inset 0 -1px 0 rgba(var(--danger-500), .4); }
tr.qp-error > td { border-top: 1px solid rgba(var(--danger-500), .4); border-bottom: 1px solid rgba(var(--danger-500), .4); }

/* "Accès rapide" — shortcut grid in the top bar */
.qa { position: relative; margin-right: .5rem; }
.qa-trigger { display: inline-flex; align-items: center; gap: .45rem; height: 2.5rem; padding: 0 .9rem; border-radius: .9rem; font-weight: 700; font-size: .85rem;
    color: rgb(var(--primary-700)); background: rgba(var(--primary-500), .08); box-shadow: inset 0 0 0 1px rgba(var(--primary-500), .2); transition: all .2s; }
.dark .qa-trigger { color: rgb(var(--primary-300)); }
.qa-trigger:hover, .qa-trigger.on { color: #fff; background: var(--brand-grad); box-shadow: 0 10px 22px -12px rgba(var(--primary-600), .9); }
.qa-trigger.on svg { transform: rotate(45deg); }
.qa-trigger svg { transition: transform .25s; }
.qa-panel { position: fixed; z-index: 70; width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 6rem); overflow-y: auto;
    padding: 1rem 1.1rem 1.2rem; border-radius: 1.4rem; background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
    box-shadow: 0 30px 60px -20px rgba(30, 27, 75, .35), 0 0 0 1px rgba(var(--primary-500), .1); }
.dark .qa-panel { background: rgba(17,24,39,.96); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
.qa-enter, .qa-leave { transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1.2); }
.qa-enter-start { opacity: 0; transform: translateY(-6px) scale(.97); }
.qa-enter-end { opacity: 1; transform: none; }
.qa-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 1rem; margin-bottom: .2rem; }
.qa-kbd { font-size: .7rem; font-weight: 600; color: rgb(var(--gray-500)); padding: .15rem .45rem; border-radius: .4rem; box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); }
.qa-group { margin: .9rem 0 .45rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--gray-400)); }
.qa-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.qa-card { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .8rem .4rem .7rem; border-radius: 1rem; text-align: center;
    background: rgb(var(--gray-50)); transition: transform .18s, background .18s, box-shadow .18s; }
.dark .qa-card { background: rgba(255,255,255,.04); }
.qa-card:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 12px 24px -14px rgba(30, 27, 75, .45), 0 0 0 1px rgba(var(--primary-500), .15); }
.dark .qa-card:hover { background: rgba(255,255,255,.08); }
.qa-icon { width: 2.7rem; height: 2.7rem; border-radius: .9rem; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 18px -10px currentColor; }
.qa-label { font-size: .76rem; font-weight: 600; line-height: 1.2; color: rgb(var(--gray-700)); }
.dark .qa-label { color: rgb(var(--gray-200)); }
.qa-indigo .qa-icon { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.qa-sky .qa-icon { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.qa-emerald .qa-icon { background: linear-gradient(135deg, #059669, #34d399); }
.qa-amber .qa-icon { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.qa-rose .qa-icon { background: linear-gradient(135deg, #e11d48, #fb7185); }
.qa-violet .qa-icon { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
.qa-slate .qa-icon { background: linear-gradient(135deg, #475569, #94a3b8); }
@media (max-width: 640px) {
    .qa-trigger-label { display: none; }
    .qa-trigger { padding: 0 .65rem; }
    .qa-panel { left: 1rem; right: 1rem !important; width: auto; }
    .qa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Client portal: invitation link / QR code in the customer record */
.pl { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.pl-qr { padding: .8rem; border-radius: 1rem; background: #fff; box-shadow: 0 10px 30px -18px rgba(30,27,75,.5), 0 0 0 1px rgba(var(--primary-500), .12); }
.pl-qr svg { display: block; width: 200px; height: 200px; }
.pl-url { display: flex; gap: .4rem; width: 100%; }
.pl-url input { flex: 1; min-width: 0; font-size: .8rem; padding: .55rem .7rem; border-radius: .7rem; border: 1px solid rgb(var(--gray-200)); background: rgb(var(--gray-50)); }
.dark .pl-url input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.pl-btn { padding: 0 .9rem; border-radius: .7rem; font-weight: 700; font-size: .85rem; color: #fff; background: var(--brand-grad); white-space: nowrap; }
.pl-whatsapp { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: .88rem; color: #fff; background: #25d366; }
.pl-whatsapp:hover { filter: brightness(1.05); }

/* Reports: cards page */
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.rp-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.3rem 1.3rem 1.1rem; border-radius: 1.3rem; text-align: left; background: #fff; position: relative;
    box-shadow: 0 14px 30px -24px rgba(30,27,75,.5), 0 0 0 1px rgb(var(--gray-200)); transition: transform .2s, box-shadow .2s; }
.dark .rp-card { background: rgba(255,255,255,.04); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.rp-card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(30,27,75,.6), 0 0 0 1px rgba(var(--primary-400), .5); }
.rp-card-icon { flex-shrink: 0; width: 3.2rem; height: 3.2rem; border-radius: 1rem; display: grid; place-items: center; color: #fff; }
.rp-card-text { display: flex; flex-direction: column; gap: .3rem; padding-bottom: 1.6rem; }
.rp-card-title { font-weight: 800; font-size: 1.05rem; }
.rp-card-desc { font-size: .85rem; color: rgb(var(--gray-500)); line-height: 1.45; }
.rp-card-go { position: absolute; right: 1.2rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 700; color: rgb(var(--primary-600)); }
.rp-card-go svg { transition: transform .2s; }
.rp-card:hover .rp-card-go svg { transform: translateX(3px); }
.rp-indigo .rp-card-icon { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.rp-sky .rp-card-icon { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.rp-emerald .rp-card-icon { background: linear-gradient(135deg, #059669, #34d399); }
.rp-amber .rp-card-icon { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.rp-rose .rp-card-icon { background: linear-gradient(135deg, #e11d48, #fb7185); }
.rp-violet .rp-card-icon { background: linear-gradient(135deg, #8b5cf6, #d946ef); }

/* Reports: modal */
.rp { display: flex; flex-direction: column; font-size: .9rem; }
.rp-head { position: relative; display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.5rem; color: #fff; background: var(--brand-grad); overflow: hidden; }
.rp-head::after { content: ""; position: absolute; right: -50px; top: -70px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.12); }
.rp-head-title { font-size: 1.2rem; font-weight: 800; }
.rp-head-sub { font-size: .8rem; opacity: .85; }
.rp-filters { display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; align-items: flex-end; padding: 1rem 1.5rem; background: rgb(var(--gray-50)); border-bottom: 1px solid rgb(var(--gray-100)); }
.dark .rp-filters { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.06); }
.rp-f { display: flex; flex-direction: column; gap: .3rem; font-size: .75rem; font-weight: 700; color: rgb(var(--gray-500)); }
.rp-f-wide { min-width: 16rem; flex: 1; }
.rp-search { position: relative; display: block; }
.rp-search input { width: 100%; }
.rp-matches { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .25rem); display: flex; flex-direction: column; padding: .3rem; border-radius: .8rem; background: #fff; box-shadow: 0 18px 40px -18px rgba(30,27,75,.35); border: 1px solid rgb(var(--gray-200)); }
.rp-matches button { text-align: left; font-size: .88rem; font-weight: 500; color: rgb(var(--gray-800)); padding: .45rem .6rem; border-radius: .55rem; }
.rp-matches button:hover { background: rgb(var(--primary-50)); color: rgb(var(--primary-700)); }
.rp-matches em { font-size: .82rem; font-weight: 500; color: rgb(var(--gray-500)); padding: .45rem .6rem; }
.rp-picked { display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .88rem; font-weight: 600; color: rgb(var(--primary-700)); background: rgb(var(--primary-50)); padding: .5rem .7rem; border-radius: .7rem; }
.rp-picked button { font-size: 1.1rem; line-height: 1; color: rgb(var(--gray-500)); }
.dark .rp-matches { background: rgb(var(--gray-900)); border-color: rgba(255,255,255,.1); }
.rp-f input, .rp-f select { font-size: .88rem; font-weight: 500; color: rgb(var(--gray-800)); padding: .5rem .7rem; border-radius: .7rem; border: 1px solid rgb(var(--gray-200)); background: #fff; }
.dark .rp-f input, .dark .rp-f select { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: inherit; }
.rp-seg { display: inline-flex; padding: .2rem; border-radius: .8rem; background: #fff; box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); }
.dark .rp-seg { background: rgba(255,255,255,.04); }
.rp-seg button { padding: .4rem .8rem; border-radius: .6rem; font-size: .83rem; font-weight: 600; color: rgb(var(--gray-600)); }
.rp-seg button.on { color: #fff; background: var(--brand-grad); }
.rp-body { padding: 1.1rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; transition: opacity .2s; }
.rp-loading { opacity: .45; pointer-events: none; }
.rp-summary { display: flex; flex-wrap: wrap; gap: .7rem; }
.rp-kpi { flex: 1; min-width: 9rem; padding: .7rem .9rem; border-radius: .9rem; background: rgb(var(--gray-50)); }
.dark .rp-kpi { background: rgba(255,255,255,.04); }
.rp-kpi span { display: block; font-size: .75rem; color: rgb(var(--gray-500)); }
.rp-kpi b { font-size: 1.15rem; }
.rp-kpi.danger b { color: rgb(var(--danger-600)); }
.rp-kpi.success b { color: rgb(var(--success-600)); }
.rp-kpi.warning b { color: rgb(var(--warning-600)); }
.rp-kpi.total { background: var(--brand-grad); color: #fff; }
.rp-kpi.total span { color: rgba(255,255,255,.8); }
.rp-bars { display: flex; align-items: flex-end; gap: .4rem; height: 13rem; padding: 1.4rem .3rem 1.6rem; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid rgb(var(--gray-200)); }
.rp-bar { position: relative; flex: 1 0 2.6rem; max-width: 4.5rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.rp-bar-fill { width: 70%; border-radius: .5rem .5rem 0 0; background: linear-gradient(180deg, #8b5cf6, #6366f1); transition: height .4s cubic-bezier(.2,.9,.3,1); }
.rp-bar-fill.success { background: linear-gradient(180deg, #34d399, #059669); }
.rp-bar-fill.danger { background: linear-gradient(180deg, #fb7185, #e11d48); }
.rp-bar-fill.warning { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.rp-bar-label { position: absolute; bottom: -1.35rem; font-size: .66rem; color: rgb(var(--gray-500)); white-space: nowrap; }
.rp-bar-value { font-size: .6rem; font-weight: 700; color: rgb(var(--gray-500)); white-space: nowrap; opacity: 0; transition: opacity .15s; margin-bottom: .2rem; }
.rp-bar:hover .rp-bar-value { opacity: 1; }
.rp-hbars { display: flex; flex-direction: column; gap: .45rem; }
.rp-hbar { display: grid; grid-template-columns: minmax(8rem, 15rem) 1fr 7.5rem; align-items: center; gap: .7rem; font-size: .8rem; }
.rp-hbar-label { text-align: right; color: rgb(var(--gray-600)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-hbar-track { height: .85rem; border-radius: 999px; background: rgb(var(--gray-100)); overflow: hidden; }
.dark .rp-hbar-track { background: rgba(255,255,255,.06); }
.rp-hbar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6366f1, #a78bfa); }
.rp-hbar-fill.success { background: linear-gradient(90deg, #059669, #34d399); }
.rp-hbar-fill.danger { background: linear-gradient(90deg, #e11d48, #fb7185); }
.rp-hbar-value { font-weight: 700; text-align: right; white-space: nowrap; }
.rp-table-wrap { overflow-x: auto; border-radius: 1rem; box-shadow: 0 0 0 1px rgb(var(--gray-200)); }
.dark .rp-table-wrap { box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.rp-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.rp-table th { text-align: left; padding: .7rem .9rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--gray-500)); background: rgba(var(--primary-500), .05); white-space: nowrap; }
.rp-table td { padding: .6rem .9rem; border-top: 1px solid rgb(var(--gray-100)); }
.dark .rp-table td { border-color: rgba(255,255,255,.06); }
.rp-table .r { text-align: right; white-space: nowrap; }
.rp-table td.strong { font-weight: 700; }
.rp-table tr.danger td.strong { color: rgb(var(--danger-600)); }
.rp-table tbody tr:hover td { background: rgba(var(--primary-500), .03); }
.rp-table tfoot td { font-weight: 800; background: rgb(var(--gray-50)); border-top: 2px solid rgb(var(--gray-200)); }
.dark .rp-table tfoot td { background: rgba(255,255,255,.04); }
.rp-empty { text-align: center; color: rgb(var(--gray-500)); padding: 2rem !important; }
.rp-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.5rem; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-top: 1px solid rgb(var(--gray-100)); }
.dark .rp-foot { background: rgba(17,24,39,.92); border-color: rgba(255,255,255,.06); }
.rp-excel { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: .8rem; font-weight: 700; font-size: .88rem; color: #fff; background: #107c41; }
.rp-excel[disabled] { opacity: .5; }
.rp-pager { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: rgb(var(--gray-500)); }
.rp-pager button { width: 2.2rem; height: 2.2rem; border-radius: 999px; font-size: 1.2rem; box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); }
.rp-pager button[disabled] { opacity: .35; }
.rp-count { font-size: .85rem; color: rgb(var(--gray-500)); }
@media (max-width: 640px) { .rp-hbar { grid-template-columns: 6rem 1fr 6rem; } .rp-filters { padding: .9rem 1rem; } .rp-body { padding: 1rem; } }

/* Expenses: amount breakdown under the amount */
.xp-breakdown { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding: .6rem .9rem; border-radius: .8rem; background: rgb(var(--gray-50)); font-size: .85rem; }
.dark .xp-breakdown { background: rgba(255,255,255,.04); }
.xp-breakdown small { color: rgb(var(--gray-500)); font-size: .75rem; margin-right: .2rem; }

/* BL: customer's reception in the document view, signature link modal */
.dl-received { margin-top: .9rem; padding: .7rem .9rem; border-radius: .8rem; background: rgb(var(--gray-50)); font-size: .82rem; border-left: 3px solid rgb(var(--gray-300)); }
.dl-received.is-signed { background: rgba(5,150,105,.07); border-color: #059669; }
.dl-received.is-disputed { background: rgba(225,29,72,.07); border-color: #e11d48; }
.dl-received img { max-height: 70px; max-width: 220px; display: block; margin: .3rem 0; }
.dark .dl-received { background: rgba(255,255,255,.04); }
.sl-status { width: 100%; padding: .6rem .8rem; border-radius: .8rem; font-size: .85rem; }
.sl-ok { background: rgba(5,150,105,.1); color: #047857; }
.sl-warn { background: rgba(225,29,72,.08); color: #be123c; }
.sl-info { background: rgba(2,132,199,.08); color: #0369a1; }
.sl-onsite { display: flex; gap: 1rem; align-items: center; width: 100%; padding-top: .6rem; border-top: 1px solid rgb(var(--gray-100)); font-size: .85rem; }
.sl-onsite .pl-qr svg { width: 120px; height: 120px; }
.sl-onsite p { margin: .2rem 0 .5rem; color: rgb(var(--gray-500)); }
@media (max-width: 520px) { .sl-onsite { flex-direction: column; text-align: center; } }

/* Editor: nothing found → create a product (with stock) or a service (no stock) */
.de-create-box { padding: .7rem .9rem .9rem; background: rgb(var(--gray-50)); border-top: 1px solid rgb(var(--gray-100)); }
.dark .de-create-box { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); }
.de-create-title { font-size: .8rem; font-weight: 700; color: rgb(var(--gray-500)); margin-bottom: .5rem; }
.de-create-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.de-create { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .6rem .8rem; border-radius: .9rem; color: #fff; text-align: left; transition: filter .15s, transform .15s; }
.de-create span { display: flex; flex-direction: column; line-height: 1.15; }
.de-create b { font-size: .92rem; }
.de-create small { font-size: .72rem; opacity: .85; }
.de-create.product { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.de-create.service { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.de-create:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Number fields everywhere: no up/down arrows */
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* "Modifier le stock": one line per product, saved by itself */
.sk { display: flex; flex-direction: column; gap: 1rem; }
.sk-toolbar { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; padding: 1rem; border-radius: 1.2rem; background: #fff; box-shadow: 0 0 0 1px rgb(var(--gray-200)); }
.sk-toolbar.compact { padding: 0; background: none; box-shadow: none; }
.dark .sk-toolbar:not(.compact) { background: rgba(255,255,255,.04); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.sk-search { flex: 1; min-width: 16rem; display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); color: rgb(var(--gray-400)); }
.sk-search input { flex: 1; border: 0; outline: none; background: transparent; font-size: .92rem; color: rgb(var(--gray-800)); }
.dark .sk-search input { color: inherit; }
.sk-select { border-radius: .8rem; border: 1px solid rgb(var(--gray-200)); padding: .5rem 2rem .5rem .8rem; font-size: .88rem; background-color: transparent; }
.sk-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 600; box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); color: rgb(var(--gray-600)); }
.sk-chip.on { color: #fff; background: linear-gradient(135deg, #e11d48, #fb7185); box-shadow: none; }
.sk-modes { display: inline-flex; padding: .2rem; border-radius: .9rem; box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); }
.sk-modes button { padding: .4rem .8rem; border-radius: .7rem; font-size: .82rem; font-weight: 600; color: rgb(var(--gray-600)); }
.sk-modes button.on { color: #fff; background: var(--brand-grad); }
.sk-table { border-radius: 1.2rem; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgb(var(--gray-200)); }
.dark .sk-table { background: rgba(255,255,255,.03); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.sk-head, .sk-row { display: grid; grid-template-columns: minmax(10rem, 1fr) 9rem 15rem 11rem; gap: .8rem; align-items: center; padding: .55rem 1rem; }
.sk-head { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--gray-500)); background: rgba(var(--primary-500), .05); }
.sk-row { border-top: 1px solid rgb(var(--gray-100)); }
.dark .sk-row { border-color: rgba(255,255,255,.06); }
.sk-row:hover { background: rgba(var(--primary-500), .03); }
.sk .r { text-align: right; }
.sk .c { text-align: center; }
.sk-name { font-weight: 600; }
.sk-cur b { font-size: 1rem; }
.sk-cur small, .sk-next small { color: rgb(var(--gray-500)); }
.sk-cur.low b { color: rgb(var(--warning-600)); }
.sk-cur.neg b, .sk-next b.neg { color: rgb(var(--danger-600)); }
.sk-edit { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.sk-edit input { width: 6.5rem; text-align: center; font-weight: 700; padding: .45rem .5rem; border-radius: .7rem; border: 1px solid rgb(var(--gray-200)); background: transparent; }
.sk-edit input:focus { outline: none; border-color: rgb(var(--primary-400)); box-shadow: 0 0 0 3px rgba(var(--primary-500), .15); }
.sk-step { width: 1.55rem; height: 1.55rem; padding: 0; border-radius: 999px; color: #fff; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.sk-step svg { width: .8rem; height: .8rem; display: block; }
.sk-step.minus { background: linear-gradient(135deg, #f97316, #fb923c); }
.sk-step.plus { background: linear-gradient(135deg, #059669, #34d399); }
.sk-next { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
.sk-next b { font-size: 1rem; }
.sk-next b.changed { color: rgb(var(--primary-600)); }
.sk-state { min-width: 5.5rem; font-size: .75rem; font-weight: 700; text-align: left; }
.sk-state .ok { color: rgb(var(--success-600)); }
.sk-state .err { color: rgb(var(--danger-600)); }
.sk-empty { padding: 2rem; text-align: center; color: rgb(var(--gray-500)); }
.sk-pager { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; font-size: .85rem; color: rgb(var(--gray-500)); }
.sk-pager button { width: 2.2rem; height: 2.2rem; border-radius: 999px; font-size: 1.2rem; box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); }
.sk-pager button[disabled] { opacity: .35; }
.sk-help { font-size: .8rem; color: rgb(var(--gray-500)); }
/* Inside the product record: compact */
.fi-modal .sk-head, .fi-modal .sk-row { grid-template-columns: minmax(7rem, 1fr) 6.5rem 12rem 8.5rem; padding: .45rem .7rem; }
.fi-modal .sk-state { min-width: 0; }
@media (max-width: 760px) {
    .sk-head { display: none; }
    .sk-row { grid-template-columns: 1fr auto; }
    .sk-edit { grid-column: 1 / -1; justify-content: flex-start; }
}
.sk-place { display: block; font-weight: 500; font-size: .78rem; color: rgb(var(--gray-500)); }

/* Stock history: curve of the chosen product */
.sc { display: flex; flex-direction: column; gap: 1rem; }
.sc-empty { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; border-radius: 1.2rem; color: rgb(var(--gray-600)); background: rgba(var(--primary-500), .05); }
.sc-empty svg { color: rgb(var(--primary-500)); flex-shrink: 0; }
.sc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; }
.sc-title { font-size: 1.2rem; font-weight: 800; }
.sc-sub { font-size: .82rem; color: rgb(var(--gray-500)); }
.sc-ranges { display: inline-flex; padding: .2rem; border-radius: .9rem; box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); }
.sc-ranges button { padding: .35rem .75rem; border-radius: .7rem; font-size: .82rem; font-weight: 600; color: rgb(var(--gray-600)); }
.sc-ranges button.on { color: #fff; background: var(--brand-grad); }
.sc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.sc-kpi { padding: .7rem .9rem; border-radius: .9rem; background: rgb(var(--gray-50)); }
.dark .sc-kpi { background: rgba(255,255,255,.04); }
.sc-kpi span { display: block; font-size: .75rem; color: rgb(var(--gray-500)); }
.sc-kpi b { font-size: 1.25rem; }
.sc-kpi small { font-size: .75rem; color: rgb(var(--gray-500)); font-weight: 500; }
.sc-kpi.in b { color: rgb(var(--success-600)); }
.sc-kpi.out b, .sc-kpi b.neg { color: rgb(var(--danger-600)); }
.sc-none { padding: 1rem; text-align: center; color: rgb(var(--gray-500)); }
.sc-chart { position: relative; }
.sc-chart svg { width: 100%; height: 15rem; display: block; overflow: visible; }
.sc-grid { stroke: rgb(var(--gray-200)); stroke-dasharray: 3 4; }
.dark .sc-grid { stroke: rgba(255,255,255,.08); }
.sc-zero { stroke: #e11d48; stroke-width: 1.5; stroke-dasharray: 6 4; }
.sc-axis { font-size: 11px; fill: rgb(var(--gray-500)); }
.sc-line { fill: none; stroke: #7c3aed; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sc-dot { stroke: #fff; stroke-width: 2; cursor: pointer; transition: r .15s; vector-effect: non-scaling-stroke; }
.sc-dot.up { fill: #059669; }
.sc-dot.down { fill: #e11d48; }
.sc-dot:hover { r: 8; }
.sc-tip { position: absolute; transform: translate(12px, -50%); pointer-events: none; min-width: 12rem; max-width: 18rem; padding: .6rem .8rem; border-radius: .8rem; background: #1f2937; color: #fff; font-size: .8rem; box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); z-index: 5; }
.sc-tip.left { transform: translate(calc(-100% - 12px), -50%); }
.sc-tip-date { opacity: .7; font-size: .72rem; }
.sc-tip-qty { font-weight: 800; font-size: .95rem; }
.sc-tip-qty.up span:first-child { color: #34d399; }
.sc-tip-qty.down span:first-child { color: #fb7185; }
.sc-tip-detail { opacity: .8; }
.sc-tip-stock { margin-top: .2rem; }
.sc-legend { font-size: .78rem; color: rgb(var(--gray-500)); }
.sc-legend .up { color: #059669; margin-right: .6rem; }
.sc-legend .down { color: #e11d48; margin-right: .6rem; }
@media (max-width: 760px) { .sc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sc-pick { display: flex; align-items: center; gap: .6rem; }
.sc-pick > svg { color: rgb(var(--primary-500)); flex-shrink: 0; }
select.sc-title { border: 0; padding: 0 1.6rem 0 0; background-color: transparent; font-size: 1.2rem; font-weight: 800; cursor: pointer; max-width: 32rem; }
select.sc-title:focus { outline: none; box-shadow: none; }

/* Modèles de documents: settings on the left, live A4 preview on the right */
.dt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.5rem; align-items: start; }
.dt-preview { position: sticky; top: 5rem; display: flex; flex-direction: column; gap: .8rem; }
.dt-preview-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; }
.dt-preview-title { font-weight: 800; font-size: 1.05rem; }
.dt-preview-sub { font-size: .8rem; color: rgb(var(--gray-500)); }
.dt-types { display: inline-flex; padding: .2rem; border-radius: .9rem; box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); }
.dt-types button { padding: .35rem .75rem; border-radius: .7rem; font-size: .82rem; font-weight: 600; color: rgb(var(--gray-600)); }
.dt-types button.on { color: #fff; background: var(--brand-grad); }
.dt-missing, .dt-ok { display: flex; gap: .6rem; padding: .75rem .9rem; border-radius: .9rem; font-size: .85rem; }
.dt-missing { background: rgba(var(--warning-500), .1); color: rgb(var(--warning-800)); }
.dt-missing ul { margin: .25rem 0 0 1rem; list-style: disc; }
.dt-missing svg { color: rgb(var(--warning-500)); flex-shrink: 0; }
.dt-ok { background: rgba(var(--success-500), .1); color: rgb(var(--success-700)); align-items: center; }
.dark .dt-missing { color: rgb(var(--warning-300)); }
.dark .dt-ok { color: rgb(var(--success-300)); }
.dt-sheet { border-radius: 1rem; overflow: hidden; background: #e5e7eb; }
.dt-sheet-inner { width: 830px; transform-origin: top left; }
.dt-sheet iframe { width: 830px; height: 1180px; border: 0; display: block; }
@media (max-width: 1100px) { .dt { grid-template-columns: 1fr; } .dt-preview { position: static; } }

/* ---------- Dashboard ---------- */
/* KPI cards: soft tinted card, gradient icon tile, big figure, trend pill, small curve */
.hk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hk-card { --c: 124,58,237; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: 1.4rem;
    background: linear-gradient(160deg, rgba(var(--c), .10), rgba(var(--c), .03) 60%), #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 30px -18px rgba(var(--c), .55); border: 1px solid rgba(var(--c), .12); transition: transform .15s, box-shadow .15s; }
a.hk-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 36px -18px rgba(var(--c), .7); }
.dark .hk-card { background: linear-gradient(160deg, rgba(var(--c), .18), rgba(var(--c), .04) 60%), rgb(var(--gray-900)); border-color: rgba(var(--c), .25); }
.hk-violet { --c: 124,58,237; } .hk-emerald { --c: 16,185,129; } .hk-amber { --c: 245,158,11; } .hk-rose { --c: 244,63,94; }
.hk-top { display: flex; align-items: center; gap: .75rem; }
.hk-icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: .95rem; color: #fff; flex-shrink: 0;
    background: linear-gradient(140deg, rgba(var(--c), .75), rgb(var(--c))); box-shadow: 0 8px 18px -8px rgb(var(--c)), inset 0 1px 0 rgba(255,255,255,.35); }
.hk-label { font-size: .85rem; font-weight: 600; color: rgb(var(--gray-600)); }
.dark .hk-label { color: rgb(var(--gray-300)); }
.hk-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.hk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .76rem; color: rgb(var(--gray-500)); position: relative; z-index: 1; }
.hk-trend { padding: .1rem .45rem; border-radius: 999px; font-weight: 700; }
.hk-trend.up { color: rgb(var(--success-700)); background: rgba(var(--success-500), .14); }
.hk-trend.down { color: rgb(var(--danger-700)); background: rgba(var(--danger-500), .14); }
.hk-spark { position: absolute; right: 0; bottom: 0; width: 46%; height: 2.6rem; opacity: .55; }
.hk-spark path { fill: none; stroke: rgb(var(--c)); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

/* Dashboard blocks share a header */
.hw .fi-section-content { padding: 1.1rem 1.2rem; }
.hw-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; margin-bottom: .8rem; }
.hw-title { font-weight: 800; font-size: 1.02rem; }
.hw-sub { font-size: .78rem; color: rgb(var(--gray-500)); }

/* Due-date calendar */
.dc-nav { display: flex; gap: .3rem; }
.dc-nav button { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .6rem; box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); }
.dc-nav button:hover { background: rgb(var(--gray-50)); }
.dc-month { font-weight: 700; font-size: .88rem; margin-bottom: .4rem; }
.dc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; text-align: center; }
.dc-dow { font-size: .7rem; font-weight: 600; color: rgb(var(--gray-400)); padding: .2rem 0; }
.dc-day { position: relative; aspect-ratio: 1; border-radius: .7rem; font-size: .8rem; font-weight: 600; color: rgb(var(--gray-700)); }
.dark .dc-day { color: rgb(var(--gray-200)); }
.dc-day:hover { background: rgb(var(--gray-100)); }
.dark .dc-day:hover { background: rgba(255,255,255,.06); }
.dc-day.out { color: rgb(var(--gray-300)); }
.dc-day.today { box-shadow: inset 0 0 0 2px rgb(var(--primary-500)); }
.dc-day.due { background: rgba(124,58,237,.14); color: #6d28d9; }
.dc-day.late { background: rgba(244,63,94,.14); color: #e11d48; }
.dc-day.due::after, .dc-day.late::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: .3rem; height: .3rem; margin-left: -.15rem; border-radius: 999px; background: currentColor; }
.dc-day.sel { background: var(--brand-grad); color: #fff; }
.dc-legend { display: flex; gap: .9rem; margin-top: .5rem; font-size: .72rem; }
.dc-legend .late { color: #e11d48; } .dc-legend .due { color: #7c3aed; }
.dc-list { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid rgb(var(--gray-100)); display: flex; flex-direction: column; gap: .35rem; }
.dark .dc-list { border-color: rgba(255,255,255,.08); }
.dc-list-title { font-size: .8rem; font-weight: 700; }
.dc-row { display: flex; justify-content: space-between; gap: .5rem; font-size: .82rem; padding: .35rem .5rem; border-radius: .6rem; }
.dc-row:hover { background: rgb(var(--gray-50)); }
.dc-row small { color: rgb(var(--gray-500)); margin-left: .3rem; }
.dc-empty { font-size: .8rem; color: rgb(var(--gray-500)); }

/* To do today */
.td-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.td-tabs button { padding: .35rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: rgb(var(--gray-600)); box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); }
.td-tabs button span { margin-left: .25rem; padding: 0 .4rem; border-radius: 999px; font-size: .7rem; background: rgb(var(--gray-100)); }
.td-tabs button.on { color: #fff; background: var(--brand-grad); box-shadow: none; }
.td-tabs button.on span { background: rgba(255,255,255,.25); }
.td-list { display: flex; flex-direction: column; }
.td-row { --c: 124,58,237; display: flex; align-items: center; gap: .8rem; padding: .65rem .3rem; border-bottom: 1px solid rgb(var(--gray-100)); }
.dark .td-row { border-color: rgba(255,255,255,.06); }
.td-row:last-of-type { border-bottom: 0; }
.td-danger { --c: 244,63,94; } .td-warning { --c: 245,158,11; } .td-primary { --c: 124,58,237; } .td-info { --c: 14,165,233; } .td-success { --c: 16,185,129; }
.td-icon { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: .8rem; flex-shrink: 0; color: rgb(var(--c)); background: rgba(var(--c), .12); }
.td-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.td-text b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-text small { font-size: .76rem; color: rgb(var(--gray-500)); }
.td-amount { font-weight: 700; font-size: .85rem; white-space: nowrap; }
.td-actions { display: flex; gap: .3rem; }
.td-btn { display: inline-flex; align-items: center; gap: .25rem; padding: .35rem .65rem; border-radius: .65rem; font-size: .76rem; font-weight: 600; color: rgb(var(--c)); background: rgba(var(--c), .1); white-space: nowrap; }
.td-btn:hover { background: rgba(var(--c), .18); }
.td-more { margin-top: .5rem; font-size: .8rem; font-weight: 600; color: rgb(var(--primary-600)); }
.td-empty { display: flex; align-items: center; gap: .9rem; padding: 1rem; border-radius: 1rem; color: rgb(var(--success-700)); background: rgba(var(--success-500), .08); }

/* What the customers owe */
.od { position: relative; width: 11rem; height: 11rem; margin: .2rem auto .8rem; }
.od-ring { width: 100%; height: 100%; }
.od-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.od-center small { font-size: .72rem; color: rgb(var(--gray-500)); }
.od-center b { font-size: 1.05rem; font-weight: 800; }
.od-legend { display: flex; flex-direction: column; gap: .2rem; }
.od-item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .55rem; padding: .35rem .4rem; border-radius: .6rem; font-size: .82rem; }
.od-item:hover { background: rgb(var(--gray-50)); }
.dark .od-item:hover, .dark .dc-row:hover, .dark .od-row:hover { background: rgba(255,255,255,.05); }
.od-item small { color: rgb(var(--gray-500)); min-width: 2.4rem; text-align: right; }
.od-dot { width: .65rem; height: .65rem; border-radius: 999px; }
.od-next { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid rgb(var(--gray-100)); display: flex; flex-direction: column; gap: .3rem; }
.dark .od-next { border-color: rgba(255,255,255,.08); }
.od-next-title { font-weight: 700; font-size: .85rem; margin-bottom: .1rem; }
.od-row { display: flex; justify-content: space-between; gap: .6rem; padding: .4rem; border-radius: .6rem; font-size: .82rem; }
.od-row:hover { background: rgb(var(--gray-50)); }
.od-row > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.od-row small { color: rgb(var(--gray-500)); font-size: .74rem; }
.od-right { display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; white-space: nowrap; }
.od-right em { font-style: normal; font-weight: 600; font-size: .7rem; color: #7c3aed; }

@media (max-width: 1280px) { .hk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hk { grid-template-columns: 1fr; } .td-row { flex-wrap: wrap; } .td-actions { width: 100%; padding-left: 3.1rem; } }
.fi-sidebar-item-grouped-border { display: none !important; }
.fi-sidebar-group-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Folded menu (icons only): the categories keep their coloured tile */
.fi-sidebar-group > .fi-dropdown button svg { box-sizing: content-box; width: 1.1rem; height: 1.1rem; padding: .35rem; border-radius: .6rem; background: var(--tile); color: var(--tile-ink) !important; }
/* Agenda: cheques to fetch (orange) and to deposit (blue) */
.dc-day.collect { background: rgba(245,158,11,.18); color: #b45309; }
.dc-day.deposit { background: rgba(14,165,233,.16); color: #0369a1; }
.dc-day.collect::after, .dc-day.deposit::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: .3rem; height: .3rem; margin-left: -.15rem; border-radius: 999px; background: currentColor; }
.dc-day.sel { background: var(--brand-grad) !important; color: #fff !important; }
.dc-legend { flex-wrap: wrap; gap: .25rem .8rem; }
.dc-legend .collect { color: #b45309; } .dc-legend .deposit { color: #0369a1; }
.dc-item { --c: 124,58,237; display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-radius: .7rem; font-size: .8rem; background: rgba(var(--c), .06); }
.dc-item.dc-collect { --c: 245,158,11; } .dc-item.dc-deposit { --c: 14,165,233; } .dc-item.is-late { --c: 244,63,94; }
.dc-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dc-item-text small { font-size: .68rem; font-weight: 700; color: rgb(var(--c)); text-transform: uppercase; letter-spacing: .03em; }
.dc-item-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-item-text em { font-style: normal; color: rgb(var(--gray-500)); font-size: .74rem; }
.dc-act { padding: .2rem .5rem; border-radius: .5rem; font-size: .72rem; font-weight: 700; color: rgb(var(--c)); background: rgba(var(--c), .14); white-space: nowrap; }
.dc-act:hover { background: rgba(var(--c), .24); }

/* Editor: instalments paid by cheque (in hand / to collect / promised) */
.de-pay-by { align-items: end; margin-bottom: .6rem; }
.de-cheque-state { display: flex; flex-direction: column; gap: .35rem; }
.de-chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.de-chips button { padding: .35rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: rgb(var(--gray-600)); box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); }
.de-chips button.on { color: #fff; background: var(--brand-grad); box-shadow: none; }

/* ==========================================================================
   Floating layout (Taskly-like): a lavender canvas, the menu and the content
   are two raised panels with soft shadows and a light edge on top.
   ========================================================================== */
:root {
    --canvas: #ebe9f7;
    --panel: #fbfbfe;
    --panel-edge: rgba(255, 255, 255, .95);
    --lift: 0 26px 56px -30px rgba(83, 74, 183, .42), 0 3px 8px -2px rgba(83, 74, 183, .07);
    --card-lift: 0 14px 32px -20px rgba(83, 74, 183, .34), 0 1px 3px rgba(83, 74, 183, .06);
}
.dark { --canvas: #0d0c18; --panel: #17152a; --panel-edge: rgba(255, 255, 255, .06); --lift: 0 26px 56px -30px rgba(0, 0, 0, .8); --card-lift: 0 14px 32px -22px rgba(0, 0, 0, .7); }

body.fi-body, .dark body.fi-body { background: var(--canvas) !important; }

/* Menu panel */
.fi-sidebar::before {
    inset: .9rem 0 .9rem .9rem !important; border-radius: 1.75rem !important;
    background: linear-gradient(180deg, #f9f8ff 0%, #f1effd 100%) !important;
    border: 1px solid var(--panel-edge) !important;
    box-shadow: var(--lift), inset 0 1px 0 #fff !important;
}
.dark .fi-sidebar::before { background: linear-gradient(180deg, #1c1a33 0%, #17152a 100%) !important; border-color: var(--panel-edge) !important; box-shadow: var(--lift) !important; }
@media (max-width: 1023px) { .fi-sidebar::before { inset: 0 !important; border-radius: 0 1.75rem 1.75rem 0 !important; } }

/* Content panel: everything on the right (top bar included) sits on one raised card */
.fi-main-ctn { position: relative; isolation: isolate; padding: .9rem; min-height: 100vh; }
/* A window is open: the content (window and its dark backdrop) goes above the menu, which is dimmed like the rest. */
.fi-main-ctn:has(.fi-modal-open) { z-index: 40; }
.fi-main-ctn::before {
    content: ""; position: absolute; inset: .9rem .9rem .9rem .9rem; z-index: -1; border-radius: 1.75rem;
    background: var(--panel); border: 1px solid var(--panel-edge); box-shadow: var(--lift), inset 0 1px 0 #fff;
}
.dark .fi-main-ctn::before { box-shadow: var(--lift); }
.fi-topbar { top: .9rem !important; --gap: .9rem; }
/* The gap above the sticky top bar and its rounded corners: the page color, so scrolled rows never show through. */
.fi-topbar::before {
    content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--gap)); right: calc(-1 * var(--gap));
    top: calc(-1 * var(--gap)); height: calc(var(--gap) + 1.75rem); background: var(--canvas);
}
.fi-topbar > nav {
    border-radius: 1.75rem 1.75rem 0 0 !important; background: rgba(251, 251, 254, .86) !important;
    border-bottom: 1px solid rgba(124, 58, 237, .07) !important; backdrop-filter: blur(14px);
}
.dark .fi-topbar > nav { background: rgba(23, 21, 42, .86) !important; border-color: rgba(255, 255, 255, .05) !important; }
.fi-main { padding-bottom: 1.5rem; }
@media (max-width: 767px) {
    .fi-main-ctn { padding: .5rem; }
    .fi-main-ctn::before { inset: .5rem; border-radius: 1.4rem; }
    .fi-topbar { top: .5rem !important; --gap: .5rem; }
    .fi-topbar > nav { border-radius: 1.4rem 1.4rem 0 0 !important; }
}

/* Category icons: soft pastel tiles with a light gradient and a small lift */
.fi-sidebar-group { --tile: #dcd8fb; --tile-ink: #4338ca; --tile-glow: rgba(67, 56, 202, .35); }
.fi-sidebar-group[data-group-label="Ventes"] { --tile: #f8d4e0; --tile-ink: #9d2c55; --tile-glow: rgba(157, 44, 85, .32); }
.fi-sidebar-group[data-group-label="Clients"], .fi-sidebar-item:has(> a[href$="/clients"]) { --tile: #cfe2f8; --tile-ink: #1d5c9a; --tile-glow: rgba(29, 92, 154, .32); }
.fi-sidebar-group[data-group-label="Catalogue & stock"] { --tile: #c9eedf; --tile-ink: #0d6b4f; --tile-glow: rgba(13, 107, 79, .3); }
.fi-sidebar-group[data-group-label="Dépenses"] { --tile: #fde3b5; --tile-ink: #8a5508; --tile-glow: rgba(138, 85, 8, .3); }
.fi-sidebar-group[data-group-label="GPS"] { --tile: #fbd5c8; --tile-ink: #9a3412; --tile-glow: rgba(154, 52, 18, .3); }
.fi-sidebar-group[data-group-label="Administration"] { --tile: #e4e2f0; --tile-ink: #4b4870; --tile-glow: rgba(75, 72, 112, .28); }
.fi-sidebar-group-icon, .fi-sidebar-group[data-group-label=""] .fi-sidebar-item-icon, .fi-sidebar-group > .fi-dropdown button svg {
    background: linear-gradient(150deg, #ffffff -35%, var(--tile) 65%) !important;
    color: var(--tile-ink) !important;
    box-shadow: 0 5px 12px -6px var(--tile-glow), inset 0 1px 0 rgba(255, 255, 255, .85);
}
.dark .fi-sidebar-group-icon, .dark .fi-sidebar-group[data-group-label=""] .fi-sidebar-item-icon { background: linear-gradient(150deg, rgba(255,255,255,.18) -35%, var(--tile) 65%) !important; box-shadow: none; }

/* Text: categories firm, pages lighter so the active one stands out */
.fi-sidebar-group-label { color: #2e2a6b !important; font-weight: 600 !important; }
.fi-sidebar-group[data-group-label]:not([data-group-label=""]) .fi-sidebar-item-label { color: #6b6894 !important; font-weight: 500 !important; }
.fi-sidebar-group[data-group-label=""] .fi-sidebar-item-label { color: #2e2a6b !important; font-weight: 600 !important; }
.dark .fi-sidebar-group-label, .dark .fi-sidebar-group[data-group-label=""] .fi-sidebar-item-label { color: #dcd9fb !important; }
.dark .fi-sidebar-group[data-group-label]:not([data-group-label=""]) .fi-sidebar-item-label { color: #a8a4d6 !important; }

/* The page you are on: a white raised pill */
.fi-sidebar-item-active .fi-sidebar-item-button {
    background: #fff !important;
    box-shadow: 0 10px 22px -12px rgba(83, 74, 183, .65), 0 1px 2px rgba(83, 74, 183, .1), inset 0 1px 0 #fff !important;
}
.fi-sidebar-item-active .fi-sidebar-item-label { color: #1e1b4b !important; font-weight: 700 !important; }
.dark .fi-sidebar-item-active .fi-sidebar-item-button { background: rgba(255, 255, 255, .1) !important; box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .8) !important; }
.dark .fi-sidebar-item-active .fi-sidebar-item-label { color: #fff !important; }
.fi-sidebar-group-button:hover, .fi-sidebar-item-button:hover { background: rgba(255, 255, 255, .7) !important; }

/* Every card of the content: same roundness, same soft shadow */
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-fo-tabs:not(.fi-contained-false), .rp-card {
    border-radius: 1.25rem !important;
    background-color: #fff;
    border: 1px solid rgba(124, 58, 237, .06) !important;
    box-shadow: var(--card-lift) !important;
}
.dark .fi-section, .dark .fi-ta-ctn, .dark .fi-wi-stats-overview-stat, .dark .rp-card { background-color: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .06) !important; }
.rp-card:hover { box-shadow: 0 22px 40px -22px rgba(83, 74, 183, .55), 0 0 0 1px rgba(124, 58, 237, .18) !important; }
.hk-card { box-shadow: var(--card-lift), inset 0 1px 0 rgba(255, 255, 255, .9) !important; }

/* ==========================================================================
   Lists: regular rows (one line each), figures aligned like a spreadsheet,
   header kept at the top while scrolling.
   ========================================================================== */
.fi-ta-table { font-variant-numeric: tabular-nums; }
.fi-ta-cell { white-space: nowrap; }
.fi-ta-cell .py-4 { padding-top: .62rem !important; padding-bottom: .62rem !important; }
.fi-ta-cell .fi-ta-text-item-label, .fi-ta-cell .fi-ta-text-item { font-size: .875rem; }
.fi-ta-header-cell { padding-top: .7rem !important; padding-bottom: .7rem !important; white-space: nowrap; }
.fi-ta-row { border-color: rgba(124, 58, 237, .06) !important; }
.fi-ta-row:hover { background: rgba(124, 58, 237, .035) !important; }
.dark .fi-ta-row { border-color: rgba(255, 255, 255, .05) !important; }
@media (min-width: 1280px) {
    .fi-ta-content { overflow-x: clip !important; }
    .fi-ta-table thead th { position: sticky; top: calc(4rem + .9rem); z-index: 2; background: #faf9ff; }
    .dark .fi-ta-table thead th { background: #1f1d36; }
}

/* Short document number: "0167", a tag for another type, the year when past */
.nb-tag { display: inline-block; margin-right: .35rem; padding: 0 .35rem; border-radius: .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .03em; color: #6d28d9; background: rgba(124, 58, 237, .1); vertical-align: 1px; }
.nb-year { margin-left: .35rem; font-size: .72rem; font-weight: 500; color: rgb(var(--gray-400)); }

/* The menu pushes the content (never over it), smoothly; the table then hides its secondary columns. */
@media (min-width: 1024px) { .fi-main-ctn { transition: width .25s ease, margin .25s ease; } }

/* Columns by priority: the table hides "Date" then "Échéance" when it lacks room (container queries). */
.fi-ta-ctn { container-type: inline-size; container-name: tbl; }
@container tbl (max-width: 1000px) { .col-sec-2 { display: none !important; } }
@container tbl (max-width: 880px) { .col-sec-1 { display: none !important; } }
/* Very narrow (phone): the table scrolls sideways rather than cutting a column */
@container tbl (max-width: 760px) { .fi-ta-content { overflow-x: auto !important; } }
/* Client name: one line, cut with "…" (full name on hover) */
.fi-ta-cell:has(.fi-ta-text) .fi-ta-text-item-label { max-width: 12.5rem; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }
/* Row buttons: compact */
.fi-ta-actions { gap: .15rem !important; }
.fi-ta-actions .fi-icon-btn { width: 1.9rem; height: 1.9rem; }
.fi-ta-actions-cell .px-3 { padding-left: .4rem !important; padding-right: .6rem !important; }
.col-num { width: 6rem; min-width: 6rem; }
.nb-draft { font-style: italic; font-weight: 600; color: rgb(var(--gray-400)); }

/* Quick buttons at the end of the row: shown on hover; always on touch screens */
.fi-ta-actions .qa { opacity: 0; transition: opacity .12s; }
.fi-ta-row:hover .fi-ta-actions .qa, .fi-ta-actions .qa:focus-visible { opacity: 1; }
@media (hover: none) { .fi-ta-actions .qa { opacity: 1; } }
/* Same height for every row, with or without a second line (contact name, reference) */
.fi-ta-row > td { height: 3.3rem; }
.fi-ta-cell .py-4 { padding-top: .35rem !important; padding-bottom: .35rem !important; }
.fi-ta-cell .fi-ta-text-description, .fi-ta-cell .fi-ta-text p.text-sm { font-size: .74rem !important; line-height: 1.1rem; }
.fi-ta-cell .gap-y-1 { row-gap: 0 !important; }

/* WhatsApp reminders ready to send, above the list */
.wq { margin-bottom: 1rem; padding: 1rem 1.1rem; border-radius: 1.25rem; background: #ecfdf5; border: 1px solid #a7f3d0; box-shadow: var(--card-lift); }
.dark .wq { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.25); }
.wq-head { display: flex; align-items: flex-start; gap: .7rem; color: #065f46; font-size: .88rem; }
.dark .wq-head { color: #6ee7b7; }
.wq-head > div { flex: 1; }
.wq-head span { opacity: .85; }
.wq-close { color: #047857; }
.wq-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.wq-item { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .5rem .45rem .8rem; border-radius: .9rem; background: #fff; border: 1px solid #a7f3d0; font-size: .85rem; }
.dark .wq-item { background: rgba(255,255,255,.05); }
.wq-name { font-weight: 700; }
.wq-meta { color: rgb(var(--gray-500)); font-size: .78rem; }
.wq-go { padding: .25rem .6rem; border-radius: .6rem; background: #25d366; color: #fff; font-weight: 700; font-size: .78rem; }
.wq-item.sent { opacity: .6; }
.wq-item.sent .wq-go { background: #9ca3af; }

/* WhatsApp connection page */
.wa { display: flex; flex-direction: column; gap: 1rem; max-width: 52rem; }
.wa-card { display: flex; align-items: center; gap: 1.1rem; padding: 1.2rem 1.3rem; border-radius: 1.25rem; background: #fff; border: 1px solid rgba(124,58,237,.06); box-shadow: var(--card-lift); }
.dark .wa-card { background: rgba(255,255,255,.04); }
.wa-card > svg { color: #10b981; flex-shrink: 0; }
.wa-card.ok { background: #ecfdf5; border-color: #a7f3d0; }
.wa-card.warn > svg { color: #f59e0b; }
.wa-card.scan { align-items: flex-start; }
.wa-text { flex: 1; display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; }
.wa-text b { font-size: 1rem; }
.wa-text span { color: rgb(var(--gray-600)); }
.wa-text ol { margin: .4rem 0 0 1.1rem; list-style: decimal; display: flex; flex-direction: column; gap: .3rem; }
.wa-warn { color: #b45309 !important; font-weight: 600; }
.wa-qr { width: 15rem; height: 15rem; display: grid; place-items: center; border-radius: 1rem; background: #fff; border: 1px solid #e5e7eb; flex-shrink: 0; }
.wa-qr img { width: 100%; height: 100%; object-fit: contain; border-radius: 1rem; }
.wa-input { width: 13rem; border-radius: .75rem; border: 1px solid rgb(var(--gray-300)); padding: .5rem .7rem; font-size: .9rem; }
.wa-error { color: rgb(var(--danger-600)); font-size: .85rem; }

/* Menu fold / unfold: a small round button sitting on the edge of the menu panel */
.fi-sidebar > div:first-child { overflow: visible !important; }
.fi-sidebar-header { position: relative; }
.fi-sidebar-header .fi-icon-btn {
    width: 1.9rem !important; height: 1.9rem !important; border-radius: 999px !important;
    background: #fff !important; color: #6d28d9 !important;
    border: 1px solid #dcd9fb; box-shadow: 0 6px 14px -6px rgba(83, 74, 183, .55), inset 0 1px 0 #fff;
    transition: background .15s, color .15s, transform .15s;
}
.fi-sidebar-header .fi-icon-btn svg { width: 1rem !important; height: 1rem !important; }
.fi-sidebar-header .fi-icon-btn:hover { background: #6d28d9 !important; color: #fff !important; transform: scale(1.06); }
.dark .fi-sidebar-header .fi-icon-btn { background: #26233f !important; color: #c4b5fd !important; border-color: rgba(255,255,255,.1); }
@media (min-width: 1024px) {
    /* Open: on the right edge of the panel, half outside */
    .fi-sidebar.fi-sidebar-open .fi-sidebar-header .fi-icon-btn { position: absolute; right: -.95rem; top: 50%; transform: translateY(-50%); z-index: 5; }
    .fi-sidebar.fi-sidebar-open .fi-sidebar-header .fi-icon-btn:hover { transform: translateY(-50%) scale(1.06); }
    /* Folded: centred at the top of the icon column */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header { justify-content: center; padding-left: .9rem !important; }
}
/* WhatsApp numbers */
.wa-intro { font-size: .9rem; color: rgb(var(--gray-600)); max-width: 46rem; }
.wa-line { flex-direction: column; align-items: stretch; gap: .8rem; }
.wa-line-head { display: flex; align-items: center; gap: .7rem; }
.wa-line-head > svg { color: #10b981; flex-shrink: 0; }
.wa-name { flex: 1; min-width: 0; font-weight: 800; font-size: 1.05rem; border: 1px solid transparent; border-radius: .6rem; padding: .25rem .5rem; background: transparent; }
.wa-name:hover, .wa-name:focus { border-color: rgb(var(--gray-300)); background: #fff; outline: none; }
.wa-badge { padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #065f46; background: #d1fae5; }
.wa-link { font-size: .78rem; font-weight: 600; color: rgb(var(--primary-600)); }
.wa-count { font-size: .78rem; color: rgb(var(--gray-500)); }
.wa-del { color: rgb(var(--gray-400)); padding: .3rem; border-radius: .5rem; }
.wa-del:hover { color: #e11d48; background: #fff1f2; }
.wa-line-body { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding-left: 3rem; font-size: .88rem; }
.wa-line-body.scan { align-items: flex-start; }
.wa-line-body ol { margin: 0 0 0 1.1rem; list-style: decimal; display: flex; flex-direction: column; gap: .3rem; }
.wa-ok { color: #047857; font-weight: 600; }
.wa-test { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-left: auto; }
.wa-add { gap: .7rem; }
.wa-input.wide { flex: 1; width: auto; }
/* Tighter cells, like a spreadsheet */
.fi-ta-cell .px-3, .fi-ta-cell .sm\:px-6 { padding-left: .55rem !important; padding-right: .55rem !important; }
.fi-ta-header-cell { padding-left: .55rem !important; padding-right: .55rem !important; }
.fi-ta-cell:first-of-type .px-3, .fi-ta-header-cell:first-of-type { padding-left: 1rem !important; }

/* Every list: one wide search bar across the table header (same look as the invoices search), not a small box on the right. */
.fi-ta-header-toolbar > div:has(> .fi-ta-search-field) { flex: 1; margin-left: 0; }
.fi-ta-search-field { flex: 1; }
.fi-ta-search-field .fi-input-wrp { border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgb(var(--gray-200)) !important; --tw-ring-shadow: 0 0 #0000 !important; transition: box-shadow .15s; }
.fi-ta-search-field .fi-input-wrp:focus-within { box-shadow: inset 0 0 0 2px rgb(var(--primary-500)), 0 0 0 5px rgba(var(--primary-500), .12) !important; }
.fi-ta-search-field .fi-input-wrp-prefix { padding-left: 1.1rem; }
.fi-ta-search-field .fi-input-wrp-prefix svg { width: 1.35rem; height: 1.35rem; color: rgb(var(--primary-500)); }
.fi-ta-search-field input { padding-top: .8rem !important; padding-bottom: .8rem !important; font-size: 1rem; }
.de-line-total:has(.de-ttc) { padding-top: 0; }
.de-ttc { font-weight: 700; }

/* Totals: one line "Total · 194 factures" with the figures right under their columns, no labels repeated. */
.fi-ta-summary-row td { background: #f6f4ff; border-top: 1.5px solid rgb(var(--primary-100)); }
.dark .fi-ta-summary-row td { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); }
.fi-ta-summary-row td:first-child, .fi-ta-summary-row td:first-child + td { font-weight: 700; color: rgb(var(--gray-950)); white-space: nowrap; }
.fi-ta-text-summary > span:first-child:not(:last-child) { display: none; }
.fi-ta-text-summary { padding-top: .8rem !important; padding-bottom: .8rem !important; }
.fi-ta-text-summary > span:last-child { font-size: .95rem; font-weight: 700; color: rgb(var(--gray-950)); }
.dark .fi-ta-text-summary > span:last-child { color: #fff; }

/* Colours that speak: the number says what it is (invoice blue, BL violet, draft grey),
   the state says where the money is (paid green, to pay orange, partly paid orange with its pie, late red). */
.nb-invoice { color: #2563eb; }
.nb-delivery_note { color: #7c3aed; }
.dark .nb-invoice { color: #60a5fa; }
.dark .nb-delivery_note { color: #a78bfa; }
.st-pie { display: inline-block; width: .8rem; height: .8rem; margin-right: .3rem; vertical-align: -1px; border-radius: 50%;
    background: conic-gradient(rgb(var(--success-500)) var(--p), rgb(var(--warning-500)) 0); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(var(--warning-500), .45); }
.doc-chip-violet.on { background: linear-gradient(135deg, #6d28d9, #a78bfa); box-shadow: 0 6px 16px -8px rgba(109, 40, 217, .8); }

/* Agenda: Tout / Chèques / Échéances, cheques at the bank (teal), a cheque's steps */
.dc-filters { display: flex; gap: .3rem; margin-bottom: .6rem; padding: .2rem; border-radius: .8rem; background: rgb(var(--gray-100)); }
.dark .dc-filters { background: rgba(255,255,255,.06); }
.dc-filters button { flex: 1; padding: .35rem .5rem; border-radius: .6rem; font-size: .8rem; font-weight: 700; color: rgb(var(--gray-500)); }
.dc-filters button.on { background: #fff; color: rgb(var(--primary-600)); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.dark .dc-filters button.on { background: rgba(255,255,255,.12); color: #fff; }
.dc-day.bank { background: rgba(20,184,166,.16); color: #0f766e; }
.dc-day.bank::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: .3rem; height: .3rem; margin-left: -.15rem; border-radius: 999px; background: currentColor; }
.dc-legend .bank { color: #0f766e; }
.dc-item.dc-bank { --c: 20,184,166; }
.dc-item.dc-collect.is-late, .dc-item.dc-deposit.is-late { --c: 244,63,94; }
button.dc-item-text { text-align: left; }
.dc-item.is-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.dc-chev { color: rgb(var(--c)); transition: transform .15s; flex-shrink: 0; }
.dc-chev.up { transform: rotate(180deg); }
.dc-list-title { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.dc-all { font-size: .72rem; font-weight: 700; color: rgb(var(--primary-600)); }
.dc-detail { margin-top: -.35rem; padding: .6rem .7rem .7rem; border-radius: 0 0 .7rem .7rem; background: rgb(var(--gray-50)); box-shadow: inset 0 0 0 1px rgb(var(--gray-100)); }
.dark .dc-detail { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.dc-steps { display: flex; flex-direction: column; gap: .15rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.dc-steps li { position: relative; display: flex; justify-content: space-between; gap: .5rem; padding-left: 1.3rem; font-size: .8rem; font-weight: 600; color: rgb(var(--gray-500)); }
.dc-steps li::before { content: ""; position: absolute; left: .2rem; top: .3rem; width: .6rem; height: .6rem; border-radius: 999px; box-shadow: inset 0 0 0 2px rgb(var(--gray-300)); }
.dc-steps li.done { color: rgb(var(--gray-800)); }
.dark .dc-steps li.done { color: rgb(var(--gray-100)); }
.dc-steps li.done::before { background: rgb(var(--success-500)); box-shadow: none; }
.dc-steps small { font-weight: 500; color: rgb(var(--gray-500)); }
.dc-ref { font-size: .74rem; color: rgb(var(--gray-500)); margin-bottom: .5rem; }
.dc-buttons { display: flex; flex-wrap: wrap; gap: .35rem; }
.dc-buttons .dc-act { --c: 100,116,139; padding: .35rem .65rem; font-size: .76rem; }
.dc-buttons .dc-act.green { --c: 5,150,105; } .dc-buttons .dc-act.blue { --c: 2,132,199; } .dc-buttons .dc-act.red { --c: 225,29,72; }

/* Agenda page: tasks on the left, the calendar on the right (under it on a phone) */
.ag-layout { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 1100px) { .ag-layout.with-cal { grid-template-columns: minmax(0, 1fr) 24rem; } }
.ag-tasks { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ag-who { max-width: 22rem; margin-bottom: 0; }
.ag-group h3 { display: flex; align-items: center; gap: .45rem; margin-bottom: .5rem; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--gray-500)); }
.ag-group h3 span { padding: .05rem .45rem; border-radius: 999px; font-size: .7rem; background: rgb(var(--gray-100)); color: rgb(var(--gray-600)); }
.dark .ag-group h3 span { background: rgba(255,255,255,.08); color: rgb(var(--gray-300)); }
.ag-late h3, .ag-late h3 span { color: #e11d48; } .ag-late h3 span { background: rgba(244,63,94,.12); }
.ag-today h3 { color: rgb(var(--primary-600)); }
.ag-task { display: flex; align-items: flex-start; gap: .75rem; padding: .8rem .9rem; margin-bottom: .45rem; border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.06), inset 0 0 0 1px rgb(var(--gray-100)); }
.dark .ag-task { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.ag-late .ag-task { box-shadow: inset 3px 0 0 #f43f5e, inset 0 0 0 1px rgba(244,63,94,.18); }
.ag-check { flex-shrink: 0; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-top: .05rem; border-radius: 999px; box-shadow: inset 0 0 0 2px rgb(var(--gray-300)); color: #fff; transition: box-shadow .15s, background .15s; }
.ag-check:hover { box-shadow: inset 0 0 0 2px rgb(var(--success-500)); background: rgba(16,185,129,.08); }
.ag-check.on { background: rgb(var(--success-500)); box-shadow: none; }
.ag-body { flex: 1; min-width: 0; }
.ag-title { display: flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .95rem; color: rgb(var(--gray-900)); }
.dark .ag-title { color: rgb(var(--gray-100)); }
.ag-lock { color: rgb(var(--gray-400)); }
.ag-meta { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin-top: .2rem; font-size: .78rem; color: rgb(var(--gray-500)); }
.ag-meta .ag-late { color: #e11d48; font-weight: 700; }
.ag-who-tag { padding: 0 .45rem; border-radius: 999px; font-weight: 700; color: rgb(var(--primary-700)); background: rgba(var(--primary-500), .1); }
.ag-cheque { padding: 0 .45rem; border-radius: 999px; font-weight: 700; color: #0369a1; background: rgba(14,165,233,.12); }
.ag-notes { margin-top: .3rem; font-size: .82rem; color: rgb(var(--gray-600)); white-space: pre-line; }
.dark .ag-notes { color: rgb(var(--gray-300)); }
.ag-done-note { font-style: italic; }
.ag-task.is-done .ag-title { text-decoration: line-through; color: rgb(var(--gray-400)); }
.ag-edit { flex-shrink: 0; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; color: rgb(var(--gray-400)); }
.ag-edit:hover { color: rgb(var(--primary-600)); background: rgb(var(--gray-50)); }
.ag-empty { display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 2.5rem 1.5rem; text-align: center; border-radius: 1.2rem; color: rgb(var(--gray-500)); background: #fff; box-shadow: inset 0 0 0 1px rgb(var(--gray-100)); }
.dark .ag-empty { background: rgba(255,255,255,.04); }
.ag-empty b { color: rgb(var(--gray-800)); }
.ag-cal { position: sticky; top: 5rem; }
/* Calendar: tasks (indigo) and its "+ Tâche" link */
.dc-day.task { background: rgba(99,102,241,.14); color: #4338ca; }
.dc-day.task::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: .3rem; height: .3rem; margin-left: -.15rem; border-radius: 999px; background: currentColor; }
.dc-legend .task { color: #4338ca; }
.dc-item.dc-task { --c: 99,102,241; }
.dc-item.dc-task.is-late { --c: 244,63,94; }
.dc-add { display: inline-flex; align-items: center; gap: .2rem; height: 1.9rem; padding: 0 .55rem; border-radius: .6rem; font-size: .76rem; font-weight: 700; color: rgb(var(--primary-600)); box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); }
.dc-add:hover { background: rgb(var(--gray-50)); }
.dc-filters { flex-wrap: wrap; }

/* Date picker: ‹ › to change month in one click */
.fi-dp-arrow { flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: .6rem; font-size: 1.25rem; line-height: 1; font-weight: 700; color: rgb(var(--primary-600)); background: rgb(var(--primary-50)); }
.fi-dp-arrow:hover { background: rgb(var(--primary-100)); }
.dark .fi-dp-arrow { background: rgba(255,255,255,.06); color: rgb(var(--primary-400)); }

/* Document editor: "Paiement par carte en ligne" switch */
.de .de-card { flex-direction: row; font-size: .9rem; font-weight: 500; color: rgb(var(--gray-700)); }
.de-card { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; padding: .85rem 1rem; border-radius: 1rem; cursor: pointer;
    background: #fff; box-shadow: inset 0 0 0 1px rgb(var(--gray-200)); }
.dark .de-card { background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.de-card.on { box-shadow: inset 0 0 0 1.5px rgba(var(--success-500), .55); background: rgba(var(--success-500), .04); }
.de-card input { position: absolute; opacity: 0; pointer-events: none; }
.de-card-switch { position: relative; flex-shrink: 0; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: rgb(var(--gray-300)); transition: background .15s; }
.de-card-switch::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 999px; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.de-card.on .de-card-switch { background: rgb(var(--success-500)); }
.de-card.on .de-card-switch::after { transform: translateX(1.1rem); }
.de-card-brands { margin-left: auto; font-size: .72rem; font-weight: 700; color: rgb(var(--gray-400)); white-space: nowrap; }
@media (max-width: 760px) { .de-card-brands { display: none; } }