/* Auto-grow textarea */
.sosve-auto-grow {
    resize: none;
    overflow: hidden;
    min-height: 32px;
    max-height: 200px;
    transition: height 0.1s ease;
}

/* SOSVE X3 Integration — admin styles
 * Extracted from inline <style> in the main plugin file.
 * Loaded via wp_enqueue_style when on a SOSVE admin page.
 */

#wpwrap { background: #f1f5f9; }

/* Hide WP auto-generated page title — SOSVE has its own topbar */
.wrap h1 { display: none; }

/* Fix filter selects on mobile */
.sosve-select-fullwidth { width: 100% !important; }

/* v3.29.90: DESKTOP WRAP — an admin's topbar carries 16 tabs; the fixed
   56px one-line bar overflowed the viewport (you had to scroll horizontally
   to reach the last tabs). The tabs nav now wraps onto as many rows as it
   needs and the bar grows with it (min-height keeps the exact one-line look
   whenever everything fits). The ≤782px hamburger layout is unchanged. */
.sosve-topbar { display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid #e2e8f0; padding:0 28px; position:sticky; top:32px; z-index:99; min-height:56px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.sosve-topbar-brand { display:flex; align-items:center; gap:10px; }
/* v1.6.5: SOSVE brand icon — PNG is transparent, so wrap it in a white rounded tile
   that reads on any background. Small variant for the admin topbar; large variant
   is defined inline in the login page styles. */
.sosve-brand-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    flex-shrink: 0;
    overflow: hidden;
}
.sosve-brand-icon-wrap--sm { width: 32px; height: 32px; padding: 2px; }
.sosve-brand-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sosve-brand-name { font-size:16px; font-weight:600; color:#1e293b; letter-spacing:-.3px; white-space:nowrap; } /* v3.26.155: nowrap — the longer "SOSVE Caisse Digitale" brand must never wrap the 56px topbar */
.sosve-brand-version { font-size:11px; background:#e0f2fe; color:#0284c7; padding:2px 7px; border-radius:20px; font-weight:600; }

/* v3.26.153: Environment badge (PRE PROD / PROD) — replaces the version number in
   the topbar. PRE PROD = amber (unmissable during a demo; the label was renamed
   from TEST in v3.28.1 — the option value stays 'test'), PROD = green (production).
   The .sosve-brand-version base class keeps size/shape; these two override the
   colors and add a subtle border so the badge reads on both light topbars. */
.sosve-env-badge { font-weight:700; letter-spacing:.5px; }
.sosve-env-badge--test { background:#fef3c7; color:#b45309; border:1px solid #f59e0b; }
.sosve-env-badge--prod { background:#dcfce7; color:#15803d; border:1px solid #10b981; }

/* v3.29.59: THE ROUTING BADGE — the topbar badge shows the REAL pool routing,
   never a manual claim. When the Import Brouillard pool differs from the
   Activités pool, the badge splits into two colored segments — « PROD ⋅ Import |
   PRÉ-PROD ⋅ Activités » — each with its own tooltip (which pool, which features).
   Same pool for both families = the classic single badge above. A custom alias
   is shown as-is in neutral gray — the badge never guesses. The .sosve-brand-version
   base keeps the pill shape (radius + overflow:hidden clips the segments). */
.sosve-env-badge--split { display:inline-flex; align-items:stretch; padding:0; background:transparent; border:1px solid #e2e8f0; overflow:hidden; }
.sosve-env-seg { font-size:11px; padding:2px 8px; font-weight:700; letter-spacing:.5px; white-space:nowrap; cursor:help; }
.sosve-env-seg--prod { background:#dcfce7; color:#15803d; }
.sosve-env-seg--test { background:#fef3c7; color:#b45309; }
.sosve-env-seg--custom { background:#f1f5f9; color:#475569; }
.sosve-env-sep { font-size:11px; padding:2px 4px; background:#e2e8f0; color:#94a3b8; display:inline-flex; align-items:center; }

/* v1.6.5: Admin sidebar icon — the SOSVE PNG is transparent, so on the dark sidebar
   background it would be invisible. Wrap it in a small white rounded tile. */
#adminmenu .wp-menu-image img {
    width: 22px; height: 22px;
    object-fit: contain;
    background: #ffffff;
    border-radius: 5px;
    padding: 1px;
    box-sizing: content-box;
    opacity: 1; /* keep visible even when menu item is not hovered */
}
/* v3.29.90: the tabs wrap internally (min-width:0 lets the nav shrink below
   its content width so the wrap actually engages) — the topbar never
   overflows the desktop viewport again. */
.sosve-tabs { display:flex; flex-wrap:wrap; gap:2px; min-width:0; }
.sosve-tab { display:inline-flex; align-items:center; gap:6px; padding:6px 16px; border-radius:6px; font-size:13px; font-weight:500; color:#64748b; text-decoration:none; transition:background .15s,color .15s; }
.sosve-tab:hover { background:#f1f5f9; color:#1e293b; text-decoration:none; }
.sosve-tab.is-active { background:#0ea5e9; color:#fff; }
.sosve-tab .dashicons { font-size:16px !important; width:16px !important; height:16px !important; }
.sosve-topbar-meta { display:flex; align-items:center; gap:4px; margin-left:8px; flex-shrink:0; }
.sosve-user-text { font-size:13px; font-weight:500; color:#475569; white-space:nowrap; }
.sosve-user-icon { color:#475569; }
/* v3.26.148: whitelabel notification bell (topbar). The v3.8.0 bell only lived on
   the WP admin bar, which is hidden/removed for every non-admin — this is the copy
   every role actually sees. Badge: red pill pinned to the bell's top-right corner,
   2px white ring so it stays readable on the sticky topbar. */
.sosve-topbar-notif { position:relative; color:#475569; }
.sosve-topbar-notif:hover { background:#f1f5f9; color:#1e293b; }
.sosve-topbar-notif-badge { position:absolute; top:1px; right:1px; background:#dc2626; color:#fff; border-radius:999px; font-size:10px; font-weight:700; line-height:1; min-width:15px; height:15px; padding:2px 4px; box-sizing:border-box; text-align:center; box-shadow:0 0 0 2px #fff; pointer-events:none; }
.sosve-content { padding:28px; max-width:1300px; margin:0 auto; width:100%; box-sizing:border-box; }

.sosve-notice { display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:8px; font-size:13px; font-weight:500; margin-bottom:20px; }
.sosve-notice--success { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
.sosve-notice .dashicons { font-size:18px !important; }

.sosve-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:28px; margin-bottom:24px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.sosve-card-header { display:flex; align-items:center; gap:16px; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid #f1f5f9; }
.sosve-card-icon { font-size:28px !important; width:28px !important; height:28px !important; margin-top:2px; }
.sosve-card-icon--blue { color:#0ea5e9; }
.sosve-card-title { font-size:17px; font-weight:600; color:#1e293b; margin:0 0 4px; }
.sosve-card-desc { font-size:13px; color:#64748b; margin:0; }

.sosve-grid { display:grid; gap:20px; }
.sosve-grid--2 { grid-template-columns:repeat(2,1fr); }
@media (max-width:900px) { .sosve-grid--2 { grid-template-columns:1fr; } }

.sosve-field { display:flex; flex-direction:column; gap:5px; }
.sosve-field--narrow { max-width:260px; }
.sosve-field--center { justify-content:center; }
.sosve-label { font-size:12px; font-weight:600; color:#475569; letter-spacing:.3px; text-transform:uppercase; }
.sosve-label--required::after { content:" *"; color:#ef4444; }

.sosve-input { padding:9px 12px; border:1px solid #cbd5e1; border-radius:7px; font-size:13px; color:#1e293b; background:#fff; transition:border-color .15s,box-shadow .15s; width:100%; box-sizing:border-box; }
.sosve-input:focus { border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.12); outline:none; }
.sosve-input--sm { padding:7px 10px; font-size:12px; border-radius:5px; }
.sosve-hint { font-size:11px; color:#94a3b8; line-height:1.4; }

.sosve-toggle { display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.sosve-toggle input { position:absolute; opacity:0; width:0; height:0; }
.sosve-toggle-track { position:relative; width:40px; height:22px; background:#cbd5e1; border-radius:20px; transition:background .2s; flex-shrink:0; }
.sosve-toggle-track::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.sosve-toggle input:checked + .sosve-toggle-track { background:#0ea5e9; }
.sosve-toggle input:checked + .sosve-toggle-track::after { transform:translateX(18px); }
.sosve-toggle-label { font-size:13px; color:#475569; }

.sosve-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid transparent; text-decoration:none; transition:background .15s,border-color .15s; line-height:1; }
.sosve-btn .dashicons { font-size:15px !important; width:15px !important; height:15px !important; }
.sosve-btn--primary { background:#0ea5e9; color:#fff; border-color:#0284c7; }
.sosve-btn--primary:hover { background:#0284c7; color:#fff; }
.sosve-btn--secondary { background:#fff; color:#475569; border-color:#cbd5e1; }
.sosve-btn--secondary:hover { background:#f8fafc; border-color:#94a3b8; }
.sosve-btn--ghost { background:transparent; color:#64748b; border-color:#e2e8f0; }
.sosve-btn--ghost:hover { background:#f1f5f9; }
.sosve-btn--danger { background:#ef4444; color:#fff; border-color:#dc2626; }
.sosve-btn--danger:hover { background:#dc2626; color:#fff; }
.sosve-btn--sm { padding:5px 12px; font-size:12px; border-radius:6px; }

.sosve-btn-icon { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:7px; border:1px solid transparent; background:transparent; cursor:pointer; transition:background .15s; padding:0; }
.sosve-btn-icon .dashicons { font-size:15px !important; width:15px !important; height:15px !important; }
.sosve-btn-icon--danger { color:#ef4444; border-color:#fecaca; }
.sosve-btn-icon--danger:hover { background:#fef2f2; }

.sosve-actions { display:flex; align-items:center; gap:16px; margin-top:24px; padding-top:20px; border-top:1px solid #f1f5f9; }
.sosve-footer-actions { display:flex; justify-content:flex-end; margin-top:8px; padding:20px 0; }
.sosve-test-result { display:inline-flex; align-items:center; font-size:13px; font-weight:500; padding:7px 14px; border-radius:7px; }
.sosve-test-result.is-ok    { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.sosve-test-result.is-error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

.sosve-forms-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.sosve-forms-count { font-size:13px; color:#64748b; font-weight:500; }
.sosve-form-block { background:#fff; border:1px solid #e2e8f0; border-radius:12px; margin-bottom:24px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.sosve-form-block-header { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; background:#f8fafc; border-bottom:1px solid #e2e8f0; }
.sosve-form-block-title { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:#1e293b; }
.sosve-form-block-title .dashicons { color:#0ea5e9; font-size:18px !important; width:18px !important; height:18px !important; }

.sosve-badge { background:#e0f2fe; color:#0284c7; font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; }
.sosve-badge--blue { background:#e0f2fe; color:#0369a1; }
.sosve-badge--orange { background:#ffedd5; color:#c2410c; }
.sosve-badge--gray { background:#f1f5f9; color:#475569; }

.sosve-form-block-body { padding:24px; }
.sosve-section-header { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#475569; border-bottom:1px solid #f1f5f9; padding-bottom:10px; margin:24px 0 16px; }
.sosve-section-header .dashicons { font-size:16px !important; width:16px !important; height:16px !important; color:#64748b; }
.sosve-section-header--blue { color:#0284c7; border-color:#bae6fd; }
.sosve-grp-tag { font-size:10px; background:#1e293b; color:#94a3b8; padding:2px 7px; border-radius:4px; font-family:monospace; margin-left:auto; }

.sosve-xml-fields-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.sosve-xml-field-card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:14px; }
.sosve-xml-field-card--required { border-left:3px solid #f97316; }
.sosve-xml-field-top { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.sosve-fld-tag { font-size:11px; font-family:monospace; background:#1e293b; color:#7dd3fc; padding:2px 8px; border-radius:4px; font-weight:600; }
.sosve-req-badge { font-size:10px; background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; border-radius:4px; padding:1px 6px; font-weight:600; }
.sosve-xml-field-label { font-size:13px; font-weight:600; color:#334155; margin-bottom:4px; }
.sosve-auto-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:#0284c7; background:#e0f2fe; padding:4px 10px; border-radius:20px; margin-top:8px; }
.sosve-auto-badge .dashicons { font-size:12px !important; width:12px !important; height:12px !important; }

.sosve-field-row { display:flex; gap:10px; margin-top:10px; }
.sosve-field-row .sosve-field { flex:1; }
.sosve-mapping-table-wrap { margin-top:14px; background:#fff; border:1px solid #e2e8f0; border-radius:7px; overflow:hidden; }
.sosve-mapping-table-header { padding:8px 12px; font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:#64748b; background:#f1f5f9; border-bottom:1px solid #e2e8f0; }
.sosve-mapping-table { width:100%; border-collapse:collapse; font-size:12px; }
.sosve-mapping-table th { padding:8px 10px; text-align:left; font-weight:600; color:#475569; background:#f8fafc; border-bottom:1px solid #e2e8f0; }
.sosve-mapping-table td { padding:6px 10px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.sosve-mapping-table tr:last-child td { border-bottom:none; }
.sosve-td-action { text-align:center; width:40px; }
.sosve-mapping-table-wrap .sosve-btn--ghost { margin:10px; }

/* v2.1.1: Stat row — auto-fit grid that adapts to 2/3/4 stats */
.sosve-stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.sosve-stat { padding:20px 24px; border-radius:10px; border:1px solid transparent; }
.sosve-stat--green { background:#f0fdf4; border-color:#bbf7d0; }
.sosve-stat--red   { background:#fef2f2; border-color:#fecaca; }
.sosve-stat--blue  { background:#f0f9ff; border-color:#bae6fd; }
.sosve-stat--amber { background:#fffbeb; border-color:#fde68a; } /* v2.1.1: was missing */
.sosve-stat--slate { background:#f8fafc; border-color:#e2e8f0; } /* v3.27.1 */
.sosve-stat-num { font-size:28px; font-weight:700; line-height:1.2; word-break:break-all; }
.sosve-stat--green .sosve-stat-num { color:#16a34a; }
.sosve-stat--red   .sosve-stat-num { color:#dc2626; }
.sosve-stat--blue  .sosve-stat-num { color:#0284c7; }
.sosve-stat--amber .sosve-stat-num { color:#d97706; } /* v2.1.1: was missing */
.sosve-stat--slate .sosve-stat-num { color:#475569; } /* v3.27.1 */
.sosve-stat-lbl { font-size:13px; font-weight:500; color:#64748b; margin-top:4px; }
/* v1.4.0: Caisse form user grid responsive */
@media (max-width:782px) {
    .sosve-content > div[style*="grid-template-columns:repeat(auto-fill"] {
        grid-template-columns: 1fr !important;
    }
}

.sosve-filter-bar { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.sosve-table { width:100%; border-collapse:collapse; font-size:13px; }
.sosve-table th { padding:10px 14px; text-align:left; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#64748b; background:#f8fafc; border-bottom:2px solid #e2e8f0; }
.sosve-table td { padding:12px 14px; border-bottom:1px solid #f1f5f9; color:#334155; vertical-align:middle; }
.sosve-table tr:hover td { background:#f8fafc; }
/* v3.27.1: table wrap — global horizontal scroll (the rule previously existed ONLY in the
   mobile media query, so wide tables overflowed their .sosve-table-wrap on desktop). */
.sosve-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.sosve-empty { text-align:center; color:#94a3b8; padding:40px !important; }
.sosve-nowrap { white-space:nowrap; }
.sosve-status { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.sosve-status--green { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.sosve-status--red   { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.sosve-status--amber { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
.sosve-status--info  { background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }

.sosve-pagination { display:flex; gap:6px; padding:16px; justify-content:flex-end; border-top:1px solid #f1f5f9; }
.sosve-page-btn { padding:5px 11px; border-radius:6px; border:1px solid #e2e8f0; background:#fff; color:#475569; font-size:13px; text-decoration:none; font-weight:500; transition:background .15s; }
.sosve-page-btn:hover { background:#f1f5f9; text-decoration:none; }
.sosve-page-btn.is-current { background:#0ea5e9; color:#fff; border-color:#0284c7; }
.sosve-page-ellipsis { padding:5px 8px; color:#94a3b8; font-size:13px; font-weight:600; user-select:none; }

@keyframes sosve-spin { to { transform:rotate(360deg); } }
.sosve-spin { animation:sosve-spin .8s linear infinite; display:inline-block; }

.select2-container--default .select2-selection--single { border:1px solid #cbd5e1; border-radius:7px; height:auto; min-height:38px; padding:8px 12px; font-size:13px; background:#fff; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height:1.4; padding:0; color:#1e293b; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height:100%; top:0; right:8px; }
.select2-container--default.select2-container--focus .select2-selection--single { border-color:#0ea5e9; box-shadow:0 0 0 3px rgba(14,165,233,.12); }
.select2-container { width:100% !important; }
.select2-container .select2-selection--single { box-sizing:border-box; }
.select2-dropdown { border-color:#cbd5e1; border-radius:7px; box-shadow:0 4px 16px rgba(0,0,0,.1); }
.select2-results__option { padding:6px 12px; font-size:13px; }
.select2-results__option--highlighted[aria-selected="true"] { background:#0284c7 !important; color:#fff !important; }
.select2-container--default .select2-results__option--highlighted { background:#0ea5e9; color:#fff; }
.select2-container--default .select2-results__option[aria-selected="true"] { background:#e0f2fe; color:#075985; }
.select2-search--dropdown .select2-search__field { border:1px solid #cbd5e1; border-radius:5px; padding:4px 8px; font-size:13px; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color:#94a3b8; }

/* v3.27.3 — Autorisation picker cards (dépense form): class-based styling so the
   card text ADAPTS to the highlighted/selected row states. v3.27.2 drew the card
   with inline dark colors that stayed dark on the blue highlight rows — the
   demandeur's name became unreadable (the "text not appear" report). */
.select2-results__option .sosve-aut-card { padding:1px 0; line-height:1.45; }
.select2-results__option .sosve-aut-name { font-weight:600; color:#1e293b; font-size:13px; }
.select2-results__option .sosve-aut-secours { font-size:11px; color:#15803d; margin-top:2px; }
.select2-results__option .sosve-aut-secours-lbl { font-weight:600; }
/* Chips — self-contained pills, readable on any row background. */
.sosve-chip { display:inline-block; font-size:10px; padding:1px 7px; border-radius:10px; font-weight:400; vertical-align:middle; }
.sosve-chip--indigo { background:#eef2ff; color:#4f46e5; }
.sosve-chip--sky { background:#f0f9ff; color:#075985; border:1px solid #bae6fd; }
.sosve-chip--amber { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
/* The highlighted rows paint the row blue — the card text must turn light there
   (same white-on-blue as the plugin's plain select2 options). */
.select2-container--default .select2-results__option--highlighted .sosve-aut-name { color:#fff; }
.select2-container--default .select2-results__option--highlighted .sosve-aut-secours { color:#fff; }

/* v3.28.0 — the « + Créer … comme autorisation » option (Autorisation dropdown,
   quick-create offer). Class-styled for the SAME white-on-highlight contract as the
   cards: purple + semibold on normal rows, WHITE on the blue highlighted/selected
   rows (an inline color would repeat the v3.27.2 unreadable-highlight bug). */
.sosve-aut-create { color:#7c3aed; font-weight:600; font-size:13px; }
.select2-container--default .select2-results__option--highlighted .sosve-aut-create,
.select2-container--default .select2-results__option--selected .sosve-aut-create,
.select2-results__option--highlighted[aria-selected="true"] .sosve-aut-create { color:#fff; }

/* v3.28.0 — quick-create popup: keep it above the wp-admin bar. */
#sosve-aut-quick-popup { z-index:100000; }

/* v1.6.4: Accessibility — keyboard focus indicators (WCAG 2.4.7 Focus Visible).
   Applies a consistent 2px sky-blue outline to every interactive SOSVE control. */
.sosve-btn:focus-visible,
.sosve-btn-icon:focus-visible,
.sosve-tab:focus-visible,
.sosve-page-btn:focus-visible,
.sosve-hamburger:focus-visible,
.sosve-input:focus-visible,
.sosve-toggle input:focus-visible + .sosve-toggle-track {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}
.sosve-toggle input:focus-visible + .sosve-toggle-track {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14,165,233,.35);
}

.sosve-field--wide { grid-column:1/-1; }

/* Conditional Rules */
.sosve-conditional-rule { background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; margin-bottom:16px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.sosve-conditional-rule-header { display:flex; align-items:center; padding:10px 14px; background:#f1f5f9; border-bottom:1px solid #e2e8f0; }
.sosve-conditional-rule-title { font-size:13px; font-weight:600; color:#334155; }
.sosve-conditional-rule-body { padding:14px; }
.sosve-grid--3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }
@media (max-width:900px) { .sosve-grid--3 { grid-template-columns:1fr; } }
.sosve-conditions-wrap { margin-top:12px; padding-top:12px; border-top:1px solid #e2e8f0; }
.sosve-conditions-wrap .sosve-label { margin-bottom:8px; display:block; }
.sosve-conditions-table { margin-bottom:8px; }
.sosve-conditions-table th { font-size:11px; }
.sosve-conditions-table td { padding:4px 8px; }
.sosve-conditional-rules-wrap > .sosve-btn--ghost { margin-top:4px; }

/* Form field flex classes for responsive layout */
.sosve-field-flex-1 { flex:1 !important; }
.sosve-field-flex-2 { flex:2 !important; }

/* Monitor stats for import progress */
.sosve-monitor-stats {
    flex-wrap: wrap !important;
    gap: 12px !important;
    font-size: 13px !important;
    color: #475569 !important;
}
.sosve-monitor-stats span {
    flex: 1 1 100% !important;
    text-align: left !important;
    margin-bottom: 4px !important;
}

/* Select2 full width for mobile */
.sosve-select-fullwidth .select2-container {
    width: 100% !important;
}
@media (min-width:782px) {
    .sosve-select-fullwidth .select2-container {
        width: auto !important;
    }
}

/* Responsive: ≤782px (WP admin mobile breakpoint) */
/* Hamburger menu - hidden on desktop */
.sosve-hamburger { display: none; }

@media (max-width:782px) {
    /* Topbar - mobile layout */
    .sosve-topbar {
        height: auto !important;
        padding: 8px 16px !important;
        top: 46px !important;
        position: relative !important;
    }
    .sosve-topbar-meta { margin-left:auto !important; }
    
    /* Hamburger button visible on mobile */
    .sosve-hamburger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
        background: #fff !important;
        cursor: pointer !important;
        padding: 0 !important;
        color: #475569 !important;
        flex-shrink: 0 !important;
    }
    .sosve-hamburger:hover { background: #f1f5f9 !important; }
    .sosve-hamburger .dashicons { font-size: 20px !important; width: 20px !important; height: 20px !important; }
    
    /* Tabs hidden by default on mobile, show when .is-open */
    .sosve-topbar .sosve-tabs {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 200 !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
        margin: 4px 0 !important;
        flex-direction: column !important;
        gap: 2px !important;
        padding: 8px !important;
    }
    .sosve-topbar .sosve-tabs.is-open {
        display: flex !important;
    }
    .sosve-topbar .sosve-tab {
        width: 100% !important;
        justify-content: flex-start !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        border-radius: 6px !important;
    }
    .sosve-topbar .sosve-tab .dashicons {
        display: inline-flex !important;
    }
    
    /* Content padding - reduce on mobile */
    .sosve-content {
        padding: 16px !important;
    }
    
    /* Stat row - stack on mobile */
    .sosve-stat-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .sosve-stat {
        flex: 1 1 calc(50% - 12px) !important;
        min-width: 120px !important;
        padding: 14px !important;
    }
    @media (max-width:480px) {
        .sosve-stat {
            flex: 1 1 100% !important;
        }
    }
    
    /* Card padding - reduce on mobile */
    .sosve-card {
        padding: 16px !important;
        border-radius: 8px !important;
    }
    @media (max-width:480px) {
        .sosve-card {
            padding: 12px !important;
        }
    }
    
    /* Form block - stack header */
    .sosve-form-block-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px 16px !important;
    }
    .sosve-form-block-title {
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    
    /* Field rows - stack on mobile */
    .sosve-field-row {
        flex-wrap: wrap !important;
    }
    .sosve-field-row .sosve-field {
        flex: 1 1 100% !important;
        margin-bottom: 8px !important;
    }
    .sosve-field--narrow {
        max-width: 100% !important;
    }
    
    /* Tables - horizontal scroll on mobile */
    .sosve-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }
    .sosve-table-wrap .sosve-table,
    .sosve-table-wrap .sosve-mapping-table {
        min-width: 600px !important;
    }
    /* Mapping table wrap - allow scroll instead of hidden */
    .sosve-mapping-table-wrap {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Filter bar - wrap on mobile */
    .sosve-filter-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .sosve-filter-bar select {
        width: 100% !important;
    }
    .sosve-filter-bar .sosve-btn {
        flex: 1 1 auto !important;
        margin-top: 4px !important;
    }
    
    /* Actions - wrap on mobile */
    .sosve-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }
    .sosve-actions .sosve-btn {
        flex: 1 1 auto !important;
        margin-bottom: 8px !important;
    }
    
    /* Pagination - wrap on mobile */
    .sosve-pagination {
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: center !important;
    }
    .sosve-page-btn {
        padding: 4px 8px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }
    
    /* Grid layouts - adjust columns */
    .sosve-grid--2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .sosve-grid--3 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .sosve-xml-fields-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Forms toolbar - wrap on mobile */
    .sosve-forms-toolbar {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .sosve-forms-toolbar .sosve-btn {
        flex: 1 1 auto !important;
        margin-bottom: 8px !important;
    }
    
    /* Modal - full screen on mobile */
    #sosve-xml-modal > div,
    .sosve-modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }

    /* Modal pre blocks - adjust on mobile */
    #sosve-xml-modal pre {
        max-height: 200px !important;
        overflow-x: auto !important;
        font-size: 11px !important;
    }

    /* Footer actions - center on mobile */
    .sosve-footer-actions {
        justify-content: center !important;
        margin-top: 16px !important;
    }
    .sosve-footer-actions .sosve-btn {
        flex: 1 1 auto !important;
        max-width: 250px !important;
        margin-bottom: 8px !important;
    }
    
    /* Import monitor stats - wrap on mobile */
    #sosve-monitor-progress .sosve-monitor-stats {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    #sosve-monitor-progress .sosve-monitor-stats span {
        flex: 1 1 100% !important;
        text-align: left !important;
        margin-bottom: 4px !important;
    }
    
    /* Conditional rules - adjust on mobile */
    .sosve-conditional-rule-body {
        padding: 10px !important;
    }
    .sosve-conditions-table th,
    .sosve-conditions-table td {
        padding: 4px 6px !important;
        font-size: 11px !important;
    }
    .sosve-conditions-table th {
        font-size: 10px !important;
    }
    /* Hardcoded inline widths on inputs should not overflow on mobile */
    .sosve-content input[style*="width"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Responsive: ≤480px (phone) */
@media (max-width:480px) {
    .sosve-topbar {
        padding: 6px 10px !important;
    }
    .sosve-content {
        padding: 10px !important;
    }
    .sosve-card {
        padding: 12px !important;
        border-radius: 8px !important;
    }
    .sosve-stat {
        padding: 10px !important;
    }
    .sosve-stat-num {
        font-size: 24px !important;
    }
    .sosve-tab {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }
    .sosve-page-btn {
        padding: 4px 6px !important;
        font-size: 11px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Dépense (Expense) Module
   ═══════════════════════════════════════════════════════════════════ */

.sosve-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.sosve-badge-all { background: #e2e8f0; color: #475569; }
.sosve-badge-draft { background: #fef3c7; color: #92400e; }
.sosve-badge-submitted { background: #dbeafe; color: #1e40af; }
.sosve-badge-error { background: #fee2e2; color: #991b1b; }
.sosve-badge-synced { background: #d1fae5; color: #065f46; }

.sosve-exp-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.sosve-exp-status-draft { background: #fef3c7; color: #92400e; }
.sosve-exp-status-submitted { background: #dbeafe; color: #1e40af; }
.sosve-exp-status-error { background: #fee2e2; color: #991b1b; }

.sosve-exp-sync {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

.sosve-exp-sync-pending { background: #fef3c7; color: #92400e; }
.sosve-exp-sync-synced { background: #d1fae5; color: #065f46; }

/* ═══ v1.6.1: Premium Article Autocomplete ═══ */
.sosve-article-search-wrap .select2-container--default .select2-selection--single {
    border: 2px solid #c7d2fe;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    background: linear-gradient(135deg, #f8fbff, #eef2ff);
    transition: border-color .2s, box-shadow .2s;
    height: auto;
}
.sosve-article-search-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1e293b;
    font-weight: 500;
    line-height: 1.4;
    padding: 0;
}
.sosve-article-search-wrap .select2-container--default.select2-container--focus .select2-selection--single,
.sosve-article-search-wrap .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
    background: #fff;
}
.sosve-article-search-wrap .select2-container--default .select2-selection__placeholder {
    color: #94a3b8;
    font-weight: 400;
}
.sosve-article-search-wrap .select2-container--default .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 12px;
}
.sosve-article-search-wrap .select2-container--default .select2-selection__clear {
    color: #94a3b8;
    font-size: 16px;
    margin-right: 8px;
}

/* Premium dropdown results */
.select2-dropdown.sosve-article-dropdown {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    overflow: hidden;
}
.select2-dropdown.sosve-article-dropdown .select2-results__option {
    padding: 8px 14px;
    border-bottom: 1px solid #f1f5f9;
    transition: background .12s;
}
.select2-dropdown.sosve-article-dropdown .select2-results__option--highlighted {
    background: #eef2ff;
}
.select2-dropdown.sosve-article-dropdown .select2-results__option:last-child {
    border-bottom: none;
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    margin: 8px;
    width: calc(100% - 16px);
    box-sizing: border-box;
}
.sosve-exp-sync-error { background: #fee2e2; color: #991b1b; }

/* v1.6.4: Modal design-system safety net — the XML-detail / types / global-mapping modals
   rely primarily on inline styles today; these rules guarantee a sensible default if the
   inline styles are ever removed during a refactor. */
.sosve-modal-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,.5);
    display: none;
    align-items: center; justify-content: center;
}
.sosve-modal-overlay[style*="display: flex"],
.sosve-modal-overlay[style*="display:flex"] { display: flex !important; }
.sosve-modal-content { background:#fff; color:#1e293b; border-radius:12px; max-height:85vh; overflow-y:auto; padding:24px; box-shadow:0 12px 40px rgba(0,0,0,.2); }
.sosve-modal-close { background:none; border:none; color:#64748b; font-size:20px; cursor:pointer; padding:4px 8px; line-height:1; }
.sosve-modal-close:hover { color:#dc2626; }
.sosve-modal-close:focus-visible { outline:2px solid #0ea5e9; outline-offset:2px; }

/* v1.6.4: Bulk-action toolbar on the expense list */
.sosve-bulk-toolbar { flex-wrap: wrap; }
.sosve-bulk-toolbar .sosve-input--sm { min-height: 32px; }

/* v1.6.4: WordPress screen-reader-text utility (used by bulk-action label, checkbox headers) */
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; overflow: hidden;
    padding: 0; position: absolute; word-wrap: normal !important;
}

/* v1.7.0: Sticky "Retour" button on expense form/detail pages — always visible at top-right
   so the agent doesn't have to scroll all the way down to leave the form. */
.sosve-sticky-back {
    position: sticky; top: 56px; z-index: 90;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 20px; text-decoration: none; color: #4f46e5;
    font-size: 12px; font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,.06);
    margin-bottom: 12px;
}
.sosve-sticky-back:hover { background: #eef2ff; color: #4338ca; }

/* v1.7.0: Receipt thumbnails on detail page */
.sosve-receipt-thumb img,
#sosve-detail-receipt-list img { transition: transform .15s; }
.sosve-receipt-thumb:hover img,
#sosve-detail-receipt-list > div:hover img { transform: scale(1.05); }

/* v1.7.0: Mobile — Caisse + Article dropdowns stack vertically on narrow screens */
@media (max-width: 600px) {
    .sosve-content > form > div[style*="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;"] > div,
    #sosve-expense-form > div[style*="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;"] > div {
        flex: 1 1 100% !important; min-width: 100% !important;
    }
    /* Recap bar wraps nicely on mobile */
    .sosve-recap-bar { gap: 12px !important; padding: 10px 14px !important; }
    .sosve-recap-bar > div { font-size: 11px !important; }
    /* Footer actions stack */
    .sosve-footer-actions { flex-wrap: wrap; gap: 8px; }
    .sosve-footer-actions .sosve-btn { flex: 1 1 auto; }
}

/* v1.7.0: Tooltip styling for field-level help */
.sosve-tooltip {
    display: inline-block; width: 14px; height: 14px;
    border-radius: 50%; background: #e2e8f0; color: #64748b;
    font-size: 10px; font-weight: 700; line-height: 14px;
    text-align: center; cursor: help; vertical-align: middle;
    margin-left: 4px;
}
.sosve-tooltip:hover { background: #0ea5e9; color: #fff; }

/* v1.7.1: Recap bar — focused on Montant Demandé (no debit/credit/ecart) */
.sosve-recap-bar { gap: 16px; padding: 12px 18px; }

/* v1.7.2: Detail-page read-only field values — consistent look across all sections */
.sosve-detail-value {
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    color: #1e293b;
    min-height: 38px;
    line-height: 1.4;
    word-break: break-word;
}
.sosve-detail-value:empty::before {
    content: '—';
    color: #94a3b8;
}

/* v3.26.139: Mobile responsiveness — audit + fixes for key pages */

/* Dashboard: quick actions grid stacks to 1 column on mobile */
@media (max-width: 600px) {
    .sosve-content { padding: 16px !important; }
    .sosve-stat-row { flex-wrap: wrap; gap: 8px; }
    .sosve-stat { flex: 1 1 calc(50% - 4px); min-width: calc(50% - 4px) !important; }
    .sosve-stat-num { font-size: 20px !important; }
    /* Quick actions: stack vertically */
    .sosve-card[style*="grid-template-columns:repeat(auto-fill,minmax(200px,1fr))"] > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    /* Dashboard balance pills wrap */
    .sosve-card-header > div[style*="margin-left:auto;display:flex;gap:6px;flex-wrap:wrap"] {
        width: 100%; margin-left: 0; margin-top: 8px;
    }
}

/* Expense form: reduce padding + stack fields on mobile */
@media (max-width: 600px) {
    #sosve-expense-form .sosve-grid--2 { grid-template-columns: 1fr !important; }
    #sosve-expense-form .sosve-grid--3 { grid-template-columns: 1fr !important; }
    #sosve-complete-facture-form .sosve-grid--2 { grid-template-columns: 1fr !important; }
    /* Montant warning full width */
    #sosve-max-facture-warn { width: 100%; }
}

/* Expense list: hide less important columns on mobile */
@media (max-width: 600px) {
    .sosve-table th:nth-child(6), .sosve-table td:nth-child(6) { display: none; } /* X3 column */
    .sosve-table th:nth-child(7), .sosve-table td:nth-child(7) { display: none; } /* Date comptable */
    .sosve-table th:nth-child(8), .sosve-table td:nth-child(8) { display: none; } /* Créé le */
    .sosve-table { font-size: 11px; }
    .sosve-bulk-toolbar { flex-wrap: wrap; gap: 4px; }
    .sosve-bulk-toolbar select { max-width: 120px; }
}

/* Alimentation detail: stack grid on mobile */
@media (max-width: 600px) {
    .sosve-card div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* PV denomination grid: stack to 2 columns */
    .sosve-card form[style*="grid-template-columns:repeat(auto-fill,minmax(200px,1fr))"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Modals: full width on mobile */
@media (max-width: 600px) {
    .sosve-modal-overlay .sosve-card { max-width: 95% !important; width: 95% !important; }
    #sosve-alim-modal .sosve-card { max-height: 95vh; }
}

/* Inline modals (complement/BEN): full width on mobile */
@media (max-width: 600px) {
    #sosve-complement-modal .sosve-card,
    #sosve-ben-modal .sosve-card,
    #sosve-detail-ben-modal .sosve-card {
        max-width: 95% !important; width: 95% !important;
    }
}

/* Topbar: brand version hidden on very small screens */
@media (max-width: 400px) {
    .sosve-brand-version { display: none; }
    .sosve-topbar-brand { gap: 4px; }
}

/* ═══ v3.29.19: « Statistiques par site » — the strip at the top of
   « Simulation X3 — Tableau complet » (Smart Brouillard). The WHOLE strip
   is styled by these CLASSES — nothing is injected inline anymore (user:
   « i want classess css and not styles injected like that !! »). The ONE
   exception is the share bar's width:N% — a percentage computed per
   render (a dynamic value cannot live in a static stylesheet). */
.sosve-ss-zone { margin-top: 12px; }
.sosve-ss-empty { font-size: 11px; color: #94a3b8; }

/* the title row */
.sosve-ss-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sosve-ss-ico { font-size: 16px; color: #6d28d9; }
.sosve-ss-title { font-size: 12px; color: #5b21b6; }
.sosve-ss-chipcount { font-size: 10px; background: #ede9fe; color: #5b21b6; border-radius: 8px; padding: 1px 8px; }
.sosve-ss-badge { font-size: 10px; background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; border-radius: 8px; padding: 1px 8px; cursor: help; }
.sosve-ss-hint { font-size: 10px; color: #94a3b8; }

/* the per-site cards */
.sosve-ss-cards { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.sosve-ss-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; min-width: 172px; max-width: 250px; flex: 1 1 172px; }
.sosve-ss-card--missing { border-color: #fdba74; }
.sosve-ss-label { font-family: monospace; font-weight: 700; font-size: 12px; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sosve-ss-label--missing { color: #c2410c; }
.sosve-ss-rows { font-size: 10px; color: #64748b; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sosve-ss-seg--ok { color: #059669; }
.sosve-ss-seg--inc { color: #b45309; }
.sosve-ss-seg--hors { color: #94a3b8; }
.sosve-ss-amt { font-size: 11px; margin-top: 5px; color: #166534; }
.sosve-ss-amt--d { color: #166534; }
.sosve-ss-amt--c { color: #991b1b; }
.sosve-ss-amt--s { color: #1f2937; margin-top: 2px; }
.sosve-ss-share { margin-top: 6px; background: #f1f5f9; border-radius: 4px; height: 5px; }
.sosve-ss-share-bar { height: 5px; background: linear-gradient(90deg, #8b5cf6, #6d28d9); border-radius: 4px; }

/* v3.29.19: the dépense period — du dd/mm/yyyy au dd/mm/yyyy (the working
   dates of the rows that count: after corrections, never the excluded
   duplicates — the same population as the amounts). */
.sosve-ss-period { margin-top: 5px; font-size: 10px; font-weight: 600; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sosve-ss-period--none { color: #cbd5e1; font-weight: 400; }

/* v3.29.19: the FULL file names, small, ONE PER LINE (replaces the old
   « ⇄ N fichiers » chip — the names are now visible, not a tooltip). */
.sosve-ss-files { margin-top: 4px; padding-top: 4px; border-top: 1px dashed #e2e8f0; }
.sosve-ss-file { font-size: 9px; line-height: 1.45; color: #075985; overflow-wrap: anywhere; }

/* the remaining status chips */
.sosve-ss-chips { margin-top: 5px; display: flex; gap: 4px; flex-wrap: wrap; }
.sosve-ss-chip { font-size: 9px; border-radius: 6px; padding: 0 6px; white-space: nowrap; cursor: help; }
.sosve-ss-chip--excl { background: #ffedd5; color: #9a3412; border: 1px solid #fdba74; }
.sosve-ss-chip--inf { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

/* the « + N autre(s) site(s) » aggregate (beyond 12 sites) */
.sosve-ss-rest { background: #fafafa; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 8px 10px; min-width: 150px; flex: 1 1 150px; display: flex; flex-direction: column; justify-content: center; }
.sosve-ss-rest-t { font-size: 11px; color: #64748b; }
.sosve-ss-rest-s { font-size: 10px; color: #94a3b8; margin-top: 2px; }

/* v3.29.19: the TOTAL — ONE line, ALONE on its own row under the cards
   (user: « make it in a single line, alone »). The thin separators
   between the segments are elements, the layout is pure flex. */
.sosve-ss-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; background: #faf5ff; border: 1px solid #ddd6fe; border-radius: 8px; padding: 8px 12px; }
.sosve-ss-total-t { font-weight: 700; font-size: 12px; color: #5b21b6; }
.sosve-ss-total-rows { font-size: 10px; color: #6b21a8; }
.sosve-ss-total-amt { font-size: 11px; color: #166534; }
.sosve-ss-total-amt--d { color: #166534; }
.sosve-ss-total-amt--c { color: #991b1b; }
.sosve-ss-total-amt--s { color: #1f2937; }
.sosve-ss-total-period { font-size: 11px; font-weight: 600; color: #6b21a8; }
.sosve-ss-total-excl { font-size: 9px; color: #9a3412; }
.sosve-ss-total-sep { align-self: center; width: 1px; height: 14px; background: #ddd6fe; }

/* the strip on small screens: the cards stack, the TOTAL bar wraps */
@media (max-width: 600px) {
    .sosve-ss-card { max-width: 100%; flex-basis: 100%; }
    .sosve-ss-total-sep { display: none; }
}

/* ==========================================================================
   v3.29.107: CLICKABLE DASHBOARD KPIs — the stat cards became <a> deep-links
   to the Dépenses list pre-filtered on their status. Same card look, plus a
   quiet affordance: cursor + a soft lift on hover (no color change — the
   numbers keep their semantic tints).
   ========================================================================== */
.sosve-stat-row a.sosve-stat { cursor: pointer; }
.sosve-stat-row a.sosve-stat:hover {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
    transform: translateY(-1px);
}
.sosve-stat-row a.sosve-stat:active { transform: translateY(0); }