/* =============================================================================
   ASSETS / WIDGETS CRM - BACKOFFICE SYNEXTA (v6)
   ============================================================================= */

/* =============================================================================
   WIDGET (conteneur générique)
   ============================================================================= */
.widget {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow 200ms var(--ease-out);
}

.widget:hover {
    box-shadow: var(--shadow-sm);
}

.widget-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(180deg, #fcfcfd 0%, #ffffff 100%);
}

.widget-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    flex-shrink: 0;
}

.widget-icon.is-success { background: var(--color-success-bg); color: var(--color-success-text); }
.widget-icon.is-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.widget-icon.is-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.widget-icon.is-accent  { background: var(--color-accent-light); color: var(--color-accent); }

.widget-title-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.widget-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}

.widget-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.3;
}

.widget-header-spacer { flex: 1; }

.widget-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-body { padding: 0; }
.widget-body.padded { padding: 18px; }

.widget-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--color-border);
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
    font-size: 13px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.widget-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* =============================================================================
   QUICKSEARCH (interne aux widgets)
   ============================================================================= */
.widget-search {
    position: relative;
    width: 240px;
}

.widget-search input {
    width: 100%;
    height: 32px;
    padding: 0 12px 0 32px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--color-text);
    outline: none;
    transition: var(--transition);
}

.widget-search input:focus {
    background: #fff;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-primary);
}

.widget-search-icon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.widget-search input::placeholder { color: var(--color-text-light); }

/* =============================================================================
   TABLEAU GÉNÉRIQUE (data-table)
   ============================================================================= */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    background: #fafbfc;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.data-table thead th.text-right { text-align: right; }
.data-table thead th.text-center { text-align: center; }

.data-table tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}

.data-table tbody td.text-right { text-align: right; }
.data-table tbody td.text-center { text-align: center; }
.data-table tbody td.text-muted { color: var(--color-text-muted); }
.data-table tbody td.numeric {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 500;
}

.data-table tbody tr:last-child td { border-bottom: none; }

.data-table tbody tr {
    transition: background-color 120ms var(--ease-out);
}

.data-table tbody tr:hover {
    background: #fafbfc;
}

.data-table tbody tr.is-hidden { display: none; }

.data-table a.cell-link {
    color: var(--color-primary);
    font-weight: 500;
    transition: color 120ms var(--ease-out);
}

.data-table a.cell-link:hover { text-decoration: underline; }

.data-table .cell-primary {
    font-weight: 600;
    color: var(--color-text);
}

.data-table .cell-sub {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Avatar circulaire (initiales) */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* Variantes de couleurs pour différencier visuellement */
.avatar.color-1 { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }
.avatar.color-2 { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); }
.avatar.color-3 { background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%); }
.avatar.color-4 { background: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%); }
.avatar.color-5 { background: linear-gradient(135deg, #ec4899 0%, #f97316 100%); }
.avatar.color-6 { background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); }

.cell-with-avatar {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* =============================================================================
   BADGES (états)
   ============================================================================= */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-full);
    line-height: 1.4;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.badge-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge-status.is-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-status.is-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-status.is-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.badge-status.is-info    { background: var(--color-info-bg);    color: var(--color-info-text); }
.badge-status.is-neutral { background: var(--color-bg-alt);     color: var(--color-text-muted); }
.badge-status.is-purple  { background: #f3e8ff;                 color: #6b21a8; }
.badge-status.is-orange  { background: #ffedd5;                 color: #9a3412; }

.badge-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

/* =============================================================================
   PIPELINE / KANBAN RÉSUMÉ
   ============================================================================= */
.pipeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 18px;
}

.pipeline-stage {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 16px 14px;
    border-top: 3px solid var(--color-text-light);
    transition: var(--transition);
    overflow: hidden;
}

.pipeline-stage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    opacity: 0.05;
    pointer-events: none;
}

.pipeline-stage:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
}

.pipeline-stage.is-prospect  { border-top-color: #94a3b8; }
.pipeline-stage.is-qualified { border-top-color: #0ea5e9; }
.pipeline-stage.is-hot       { border-top-color: #f97316; }
.pipeline-stage.is-won       { border-top-color: #16a34a; }
.pipeline-stage.is-lost      { border-top-color: #ef4444; }

.pipeline-stage.is-prospect::before  { background: #94a3b8; }
.pipeline-stage.is-qualified::before { background: #0ea5e9; }
.pipeline-stage.is-hot::before       { background: #f97316; }
.pipeline-stage.is-won::before       { background: #16a34a; }
.pipeline-stage.is-lost::before      { background: #ef4444; }

.pipeline-stage-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 8px;
    position: relative;
}

.pipeline-stage-count {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.pipeline-stage-amount {
    margin-top: 6px;
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* =============================================================================
   STAGE TIMELINE (barre horizontale)
   ============================================================================= */
.stage-bar {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--color-border);
    margin-bottom: 16px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.stage-bar-segment {
    height: 100%;
    transition: width 400ms var(--ease-out);
}

.stage-bar-segment.is-prospect  { background: #94a3b8; }
.stage-bar-segment.is-qualified { background: #0ea5e9; }
.stage-bar-segment.is-hot       { background: #f97316; }
.stage-bar-segment.is-won       { background: #16a34a; }
.stage-bar-segment.is-lost      { background: #ef4444; }

.stage-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.stage-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.stage-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* =============================================================================
   ACTIONS / TÂCHES
   ============================================================================= */
.action-list {
    margin: 0;
    padding: 0;
}

.action-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--color-border);
    transition: background-color 120ms var(--ease-out);
}

.action-list li:hover { background: #fafbfc; }
.action-list li:last-child { border-bottom: none; }

.action-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.action-icon.is-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.action-icon.is-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.action-icon.is-info    { background: var(--color-info-bg);    color: var(--color-info-text); }

.action-content {
    flex: 1;
    min-width: 0;
}

.action-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 2px 0;
    line-height: 1.4;
}

.action-meta {
    font-size: 12px;
    color: var(--color-text-muted);
}

.action-meta strong {
    color: var(--color-danger);
    font-weight: 600;
}

.action-cta { flex-shrink: 0; }

/* =============================================================================
   PROGRESS BAR
   ============================================================================= */
.progress {
    height: 8px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin: 8px 0 4px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

.progress-bar {
    height: 100%;
    background: var(--color-primary);
    transition: width 400ms var(--ease-out);
    border-radius: var(--radius-full);
}

.progress-bar.is-success { background: var(--color-success); }
.progress-bar.is-warning { background: var(--color-warning); }
.progress-bar.is-danger  { background: var(--color-danger); }

/* =============================================================================
   GRID 2 colonnes pour widgets
   ============================================================================= */
/* =============================================================================
   GRID 2 colonnes pour widgets (responsive auto-fit)
   =============================================================================
   Comportement :
   - Sur écran large : 2 widgets côte à côte (min 480px chacun)
   - Si l'espace disponible est inférieur à 2×480px = 960px, repasse en 1 colonne
   - auto-fit reflow automatique au resize, sans media query manuelle
   - Print : forcé en 1 colonne (cf @media print plus bas)
   ============================================================================= */
.widgets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.widgets-grid .widget {
    margin-bottom: 0;
    min-width: 0;     /* permet aux widgets de rétrécir sans déborder */
}

/* Sur mobile très étroit, on force 1 colonne (au cas où minmax garde 2 cols
   sur un appareil avec 480px exactement) */
@media (max-width: 600px) {
    .widgets-grid {
        grid-template-columns: 1fr;
    }
}

/* Bouton lien discret */
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-primary);
    background: transparent;
    border: none;
    padding: 4px 8px;
    font-weight: 500;
    transition: var(--transition-color);
    border-radius: var(--radius-sm);
}

.btn-link:hover {
    color: var(--color-primary-hover);
    background: var(--color-primary-soft);
}

/* =============================================================================
   RESPONSIVE — WIDGETS
   =============================================================================
   Sur mobile :
   - Le widget-header passe sur 2 lignes (titre/sous-titre en haut, search en bas)
   - Les tables deviennent scrollables horizontalement (pas d'écrasement des
     colonnes, l'utilisateur peut swiper)
   - Le pipeline et la liste de pipeline passent en 1 colonne
   - Les actions list adaptent leur padding
   ============================================================================= */
@media (max-width: 768px) {

    /* Widget header : titre en haut, search en dessous */
    .widget-header {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .widget-search {
        width: 100%;
        order: 10;          /* La search passe sous le titre */
    }

    .widget-header-spacer {
        flex: 0 0 auto;
    }

    /* Tables scrollables horizontalement (pattern data-table responsive) */
    .widget-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 540px;   /* on évite les colonnes trop écrasées */
    }

    .data-table thead th,
    .data-table tbody td {
        padding: 10px 12px;
    }

    /* Pipeline : passage en 2 colonnes puis 1 selon la largeur */
    .pipeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 14px;
    }

    .pipeline-stage {
        padding: 12px;
    }

    .pipeline-stage-count {
        font-size: 22px;
    }

    /* Actions list : un peu plus compacte */
    .action-list li {
        padding: 12px 14px;
        gap: 10px;
    }

    .action-cta { display: none; }   /* on cache le CTA pour gagner de la place */

    /* Stage bar legend : passe en colonne pour rester lisible */
    .stage-legend {
        gap: 8px 14px;
    }

    /* Widget footer plus compact */
    .widget-footer {
        padding: 10px 14px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    /* Pipeline : 1 colonne sur très petit écran */
    .pipeline {
        grid-template-columns: 1fr;
    }

    .data-table {
        min-width: 480px;
    }
}

/* =============================================================================
   WIDGETS RICHES (TIERS / FACTURES / PRODUITS)
   ============================================================================= */

/* ----- Variante de header noir (factures, produits) ----- */
.widget.is-dark-header .widget-header {
    background: #1e293b;
    border-bottom-color: #0f172a;
    color: #fff;
}

.widget.is-dark-header .widget-title { color: #fff; }
.widget.is-dark-header .widget-subtitle { color: rgba(255, 255, 255, 0.65); }
.widget.is-dark-header .widget-icon {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Bouton primaire dans header noir */
.widget.is-dark-header .btn-header {
    background: #fff;
    color: #1e293b;
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.widget.is-dark-header .btn-header:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.widget.is-dark-header .btn-header.is-primary {
    background: #2563eb;
    color: #fff;
}
.widget.is-dark-header .btn-header.is-primary:hover {
    background: #1d4ed8;
}

.widget.is-dark-header .btn-header.is-dark {
    background: #fff;
    color: #1e293b;
}

/* Recherche dans header noir */
.widget.is-dark-header .widget-search input {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.widget.is-dark-header .widget-search input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.widget.is-dark-header .widget-search input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}
.widget.is-dark-header .widget-search-icon {
    color: rgba(255, 255, 255, 0.5);
}

/* ----- Barre de filtres / actions secondaire ----- */
.widget-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: #fafbfc;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.widget-toolbar .widget-search { width: 260px; flex: 1 1 240px; max-width: 320px; }

.toolbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    cursor: pointer;
}
.toolbar-icon-btn:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary);
    border-color: var(--color-border-strong);
}
.toolbar-icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Filtre dropdown style "select" */
.toolbar-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}
.toolbar-filter:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-border-strong);
}
.toolbar-filter strong {
    color: var(--color-text-muted);
    font-weight: 500;
    margin-right: 2px;
}

/* Toggle switch */
.toolbar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.toolbar-toggle input { display: none; }

.toolbar-toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: var(--radius-full);
    transition: background-color 200ms var(--ease-out);
    flex-shrink: 0;
}
.toolbar-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 200ms var(--ease-out);
    box-shadow: var(--shadow-xs);
}
.toolbar-toggle input:checked + .toolbar-toggle-track {
    background: var(--color-success);
}
.toolbar-toggle input:checked + .toolbar-toggle-track::after {
    transform: translateX(16px);
}
.toolbar-toggle input:checked ~ .toolbar-toggle-label {
    color: var(--color-success);
}

/* "EN COURS TTC" - encart orange */
.toolbar-stat {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 4px 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.toolbar-stat-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9a3412;
}
.toolbar-stat-value {
    font-size: 14px;
    font-weight: 700;
    color: #c2410c;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ----- Lignes "card" pour widgets riches (tiers, factures, produits) ----- */
.row-card {
    display: grid;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
    transition: background-color 120ms var(--ease-out);
    position: relative;
    background: #fff;
}

.row-card:nth-child(even) { background: #fafbfc; }
.row-card:hover { background: #f1f5f9; cursor: pointer; }
.row-card:last-child { border-bottom: none; }

/* Barre verticale colorée à gauche */
.row-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: background-color 150ms var(--ease-out);
}

.row-card.is-success::before { background: var(--color-success); }
.row-card.is-warning::before { background: var(--color-warning); }
.row-card.is-danger::before  { background: var(--color-danger); }
.row-card.is-info::before    { background: var(--color-info); }
.row-card.is-neutral::before { background: #475569; }
.row-card.is-purple::before  { background: #8b5cf6; }

.row-card.is-hidden { display: none; }

/* Cellule titre (nom entreprise / référence) */
.row-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.row-card-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.row-card-meta-line {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.row-card-meta-line .pin {
    color: #ef4444;
    flex-shrink: 0;
}

.row-card-meta-line .person-icon {
    color: #2563eb;
    flex-shrink: 0;
}

.row-card-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    text-align: right;
    white-space: nowrap;
}

.row-card-amount-unit {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-left: 2px;
}

.row-card-percent {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.row-card-percent.is-success { color: var(--color-success); }
.row-card-percent.is-warning { color: var(--color-warning); }
.row-card-percent.is-zero    { color: var(--color-text); }

/* Cellule "état" rouge (factures en attente) */
.row-card-state {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.row-card-state-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-danger);
}

.row-card-state-meta {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* Actions à droite (icônes) */
.row-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.row-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    cursor: pointer;
}
.row-action-icon:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
    transform: translateY(-1px);
}

/* Star (favori produit) */
.row-card-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #cbd5e1;
    cursor: pointer;
    transition: color 150ms var(--ease-out);
    background: transparent;
    border: none;
}
.row-card-star:hover { color: #f59e0b; }
.row-card-star.is-active { color: #f59e0b; }

/* Header de tableau type "row-card" */
.row-card-header {
    display: grid;
    gap: 14px;
    padding: 10px 18px;
    background: #fafbfc;
    border-bottom: 1px solid var(--color-border);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.row-card-header-cell.text-right { text-align: right; }
.row-card-header-cell.text-center { text-align: center; }
.row-card-header-cell.is-sortable {
    cursor: pointer;
    user-select: none;
    color: var(--color-warning);
    transition: color 150ms var(--ease-out);
}
.row-card-header-cell.is-sortable:hover { color: var(--color-text); }

/* ----- Grilles spécifiques selon le widget ----- */

/* TIERS : checkbox | titre+meta | étiquette | succès | offres | actions */
.row-card.is-tier-row {
    grid-template-columns: 24px 1fr 130px 90px 90px 60px;
}
.row-card-header.is-tier-header {
    grid-template-columns: 24px 1fr 130px 90px 90px 60px;
}

/* FACTURES : ref+date | tiers | type | état | montant | actions */
.row-card.is-invoice-row {
    grid-template-columns: 130px 1fr 90px 180px 140px 130px;
}
.row-card-header.is-invoice-header {
    grid-template-columns: 130px 1fr 90px 180px 140px 130px;
}

/* PRODUITS : star | nom | tarif | unité | stock */
.row-card.is-product-row {
    grid-template-columns: 30px 1fr 130px 100px 80px;
}
.row-card-header.is-product-header {
    grid-template-columns: 30px 1fr 130px 100px 80px;
}

/* ----- Sélecteur alphabétique (gauche en desktop, haut en mobile) ----- */
.alpha-selector-wrapper {
    display: flex;
}

.alpha-selector {
    flex-shrink: 0;
    width: 36px;
    background: #fafbfc;
    border-right: 1px solid var(--color-border);
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.alpha-selector-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
    transition: var(--transition-color);
}
.alpha-selector-btn:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
.alpha-selector-btn.is-active {
    background: var(--color-primary);
    color: #fff;
}
.alpha-selector-btn.is-disabled {
    color: var(--color-text-light);
    pointer-events: none;
    opacity: 0.5;
}

.alpha-content {
    flex: 1;
    min-width: 0;
}

/* ----- Sidebar latérale (drawer right) ----- */
.right-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms var(--ease-out);
}
.right-drawer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.right-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 750px;
    background: #fff;
    box-shadow: -10px 0 30px rgba(15, 23, 42, 0.15);
    z-index: 100;
    transform: translateX(100%);
    transition: transform 280ms var(--ease-out);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.right-drawer.is-open {
    transform: translateX(0);
}

.right-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
    flex-shrink: 0;
}

.right-drawer-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.01em;
}

.right-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}
.right-drawer-close:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.right-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 20px;
}

.right-drawer-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 60px 20px;
    font-size: 14px;
}

/* ----- Responsive widgets riches ----- */
@media (max-width: 900px) {
    /* Sur tablette/mobile, on bascule la grille en flex column */
    .row-card,
    .row-card-header {
        grid-template-columns: none !important;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .row-card-header { display: none; }

    .row-card-actions {
        flex-basis: 100%;
        justify-content: flex-end;
    }

    .alpha-selector {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 6px 8px;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        justify-content: center;
    }

    .alpha-selector-btn {
        width: 24px;
        height: 22px;
    }

    .alpha-selector-wrapper {
        flex-direction: column;
    }

    .widget-toolbar {
        gap: 8px;
        padding: 10px 12px;
    }

    .widget-toolbar .widget-search {
        width: 100%;
        flex: 1 1 100%;
        max-width: none;
        order: -1;
    }
}

@media (max-width: 480px) {
    .right-drawer { max-width: 100%; }
    .toolbar-stat { display: none; }
}

/* =============================================================================
   V8 — HARMONISATION DES WIDGETS RICHES (header noir uniforme)
   ============================================================================= */

/* Espace insécable / nombres non coupés */
.nowrap, .numeric {
    white-space: nowrap;
    word-spacing: normal;
}

/* Toolbar noire uniforme (DNA partagée par tous les widgets riches) */
.widget-toolbar.is-dark-toolbar {
    background: #1e293b;
    border-bottom: 1px solid #0f172a;
    color: #fff;
    padding: 10px 14px;
    gap: 8px;
}

/* Titre du widget directement dans la toolbar (à gauche après le drag handle) */
.widget-toolbar-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin: 0 6px 0 0;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Poignée de drag */
.widget-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 28px;
    color: rgba(255, 255, 255, 0.4);
    cursor: grab;
    transition: color 150ms var(--ease-out);
    flex-shrink: 0;
}

.widget-drag-handle:hover {
    color: rgba(255, 255, 255, 0.85);
}

.widget-drag-handle:active {
    cursor: grabbing;
}

/* État pendant le drag */
.is-draggable.is-dragging {
    opacity: 0.4;
    transform: scale(0.98);
}

.is-draggable.is-drop-target {
    box-shadow: 0 0 0 2px var(--color-primary);
}

/* ---- Variantes "is-dark" des composants toolbar ---- */
.toolbar-icon-btn.is-dark {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
    width: 30px;
    height: 30px;
}
.toolbar-icon-btn.is-dark:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}
.toolbar-icon-btn.is-dark:disabled {
    opacity: 0.4;
}

.toolbar-filter.is-dark {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    height: 30px;
    font-size: 12px;
}
.toolbar-filter.is-dark strong {
    color: rgba(255, 255, 255, 0.55);
}
.toolbar-filter.is-dark:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.3);
}

.toolbar-toggle.is-dark {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
}
.toolbar-toggle.is-dark .toolbar-toggle-track {
    background: rgba(255, 255, 255, 0.2);
}
.toolbar-toggle.is-dark input:checked + .toolbar-toggle-track {
    background: var(--color-success);
}
.toolbar-toggle.is-dark input:checked ~ .toolbar-toggle-label {
    color: #4ade80;
}

/* Recherche dans toolbar noire */
.widget-search.is-dark input {
    height: 30px;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.widget-search.is-dark input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.widget-search.is-dark input:focus {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}
.widget-search.is-dark .widget-search-icon {
    color: rgba(255, 255, 255, 0.5);
}

/* Variante secondaire du bouton header (Synchroniser etc.) */
.btn-header.is-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-header.is-secondary:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
}

.btn-header {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
}

/* Encart "EN COURS TTC" — version inline dans toolbar */
.toolbar-stat {
    display: inline-flex;
    flex-direction: column;
    gap: 0;
    padding: 3px 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.toolbar-stat-label {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9a3412;
}
.toolbar-stat-value {
    font-size: 13px;
    font-weight: 700;
    color: #c2410c;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* ---- Grilles spécifiques ---- */
.row-card.is-customer-row,
.row-card-header.is-customer-header {
    grid-template-columns: 24px 1fr 130px 90px 70px 60px;
}

.row-card.is-product-row,
.row-card-header.is-product-header {
    grid-template-columns: 30px 1fr 130px 100px 80px 90px;
}

/* =============================================================================
   RESPONSIVE INTRA-WIDGET (container queries)
   =============================================================================
   Quand un widget est étroit (par exemple en 50% côte à côte sur grand écran),
   ses rows à 6 colonnes sont trop tassées. On utilise des container queries
   pour réagir à la largeur du widget LUI-MÊME, pas à celle de l'écran.

   Compatibilité : Chrome 105+, Firefox 110+, Safari 16+ (déployé fin 2022).
   Les anciens navigateurs garderont la grid 6 colonnes (dégradation gracieuse).
   ============================================================================= */
.widget {
    container-type: inline-size;
    container-name: widget;
}

@container widget (max-width: 700px) {
    .row-card,
    .row-card-header {
        grid-template-columns: none !important;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .row-card-header { display: none; }
    .row-card-actions {
        flex-basis: 100%;
        justify-content: flex-end;
        margin-top: 4px;
    }
    /* Sélecteur alphabétique : passe en horizontal sur le haut */
    .alpha-selector-wrapper { flex-direction: column; }
    .alpha-selector {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: 4px 6px;
        justify-content: center;
    }
    /* Toolbar plus compacte */
    .widget-toolbar { gap: 6px; padding: 8px 10px; }
    .widget-search { flex: 1 1 100%; max-width: none; order: -1; }
    .toolbar-stat { padding: 2px 8px; }
    .toolbar-stat-value { font-size: 12px; }
}

/* Responsive : stack en mobile (fallback global pour les vieux navigateurs) */
@media (max-width: 900px) {
    .widget-toolbar.is-dark-toolbar {
        gap: 6px;
        padding: 8px 10px;
    }
    .widget-toolbar-title {
        flex-basis: 100%;
        margin-bottom: 4px;
    }
}

/* =============================================================================
   DRAG & DROP (état visuel pendant le drag)
   ============================================================================= */
.widget-dragging-ghost {
    opacity: 0.4;
}

/* =============================================================================
   DRAG & DROP — indicateurs visuels et paires 50/50
   ============================================================================= */

/* Widget en cours de drag */
.is-draggable.is-dragging {
    opacity: 0.4;
    cursor: grabbing;
}

/* Indicateur de drop (positionné en absolute par le JS) */
.widget-drop-indicator {
    position: absolute;
    background: var(--color-primary);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(30, 58, 138, 0.5);
    z-index: 200;
    pointer-events: none;
    display: none;
}

/* Paire 50/50 (créée dynamiquement par le drop JS) */
.widget-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
    align-items: start;
}

.widget-pair > .widget {
    margin-bottom: 0;
    min-width: 0;   /* permet aux widgets de rétrécir */
}

/* Sur écran étroit, la paire repasse en 1 colonne */
@media (max-width: 900px) {
    .widget-pair {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   PRINT-FRIENDLY
   =============================================================================
   Comportement à l'impression (Ctrl+P / Cmd+P) :
   - Header / sidebar / footer / drawer : cachés
   - Couleurs aplaties pour économiser l'encre
   - Tableaux : pas de scroll horizontal, on laisse déborder
   - Pas d'ombres, pas d'animations, pas de gradients
   - Liens : on affiche l'URL en gris à côté
   ============================================================================= */
@media print {
    /* Cacher les éléments non imprimables */
    .topbar,
    .sidebar,
    .sidebar-overlay,
    .app-footer,
    .right-drawer,
    .right-drawer-overlay,
    .widget-drag-handle,
    .alpha-selector,
    .row-card-actions,
    .widget-toolbar,
    .toolbar-icon-btn,
    .btn-header,
    .btn,
    .btn-link,
    .page-header-actions {
        display: none !important;
    }

    /* Layout : on passe en single column pleine largeur */
    .app-shell { display: block; }
    .app-main { display: block; }
    .app-content {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .widgets-grid {
        display: block !important;
    }

    .widgets-grid > * {
        margin-bottom: 16px !important;
    }

    /* Reset couleurs claires partout, fond blanc */
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
    }

    /* Widgets : bordure simple, pas d'ombre */
    .widget,
    .panel,
    .stat-card {
        background: #fff !important;
        border: 1px solid #888 !important;
        box-shadow: none !important;
        page-break-inside: avoid;
        margin-bottom: 12pt !important;
        animation: none !important;
        transform: none !important;
    }

    .widget-header {
        background: #f0f0f0 !important;
        border-bottom: 1px solid #888 !important;
    }

    .widget.is-dark-header .widget-header,
    .widget.is-dark-header .widget-toolbar {
        background: #f0f0f0 !important;
        color: #000 !important;
        border-color: #888 !important;
    }
    .widget.is-dark-header .widget-toolbar-title { color: #000 !important; }
    .widget.is-dark-header .widget-title { color: #000 !important; }

    /* Headers de tableau */
    .row-card-header,
    .data-table thead th {
        display: grid !important;
        background: #f5f5f5 !important;
        color: #000 !important;
        border-bottom: 1px solid #888 !important;
        font-weight: 700;
    }

    /* Lignes : on désactive le hover, le gradient, etc. */
    .row-card,
    .data-table tbody tr {
        background: #fff !important;
        page-break-inside: avoid;
        cursor: default !important;
    }

    .row-card:nth-child(even),
    .data-table tbody tr:nth-child(even) {
        background: #fafafa !important;
    }

    .row-card::before {
        display: none !important;
    }

    /* Étoile favoris : visible en print */
    .row-card-star.is-active svg {
        fill: #000 !important;
    }

    /* Encart EN COURS : version simple */
    .toolbar-stat {
        background: #fff !important;
        border: 1px solid #888 !important;
    }
    .toolbar-stat-label,
    .toolbar-stat-value {
        color: #000 !important;
    }

    /* Stat cards */
    .stat-card::before { display: none !important; }
    .stat-card-icon {
        background: #f0f0f0 !important;
        color: #000 !important;
    }

    /* Pipeline / stage cards */
    .pipeline-stage {
        background: #fff !important;
        border: 1px solid #888 !important;
    }
    .pipeline-stage::before { display: none !important; }

    /* Stage bar (barre de répartition) */
    .stage-bar {
        background: #ddd !important;
        box-shadow: none !important;
    }

    /* Badges sans couleur */
    .badge-status,
    .badge-tag {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #888 !important;
    }

    /* États rouges (factures en attente) : conserve le contraste */
    .row-card-state-label {
        color: #000 !important;
        font-weight: 700;
    }

    /* Liens : pas de soulignement, on garde noir */
    a, .cell-link {
        color: #000 !important;
        text-decoration: none !important;
    }

    /* Affiche l'URL après les liens significatifs */
    a[href^="http"]::after,
    a[href^="https"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    /* Avatars : grisaille */
    .avatar,
    .usermenu-avatar {
        background: #ddd !important;
        color: #000 !important;
    }

    /* Headers de section : marges resserrées */
    .page-header h1 {
        font-size: 18pt;
        margin: 0 0 4pt 0;
    }

    .page-header p {
        color: #555 !important;
        font-size: 10pt;
    }

    /* Pas de transitions / animations en print */
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }

    /* Évite la coupure des H2-H4 et des cartes */
    h1, h2, h3, h4 {
        page-break-after: avoid;
    }

    .stat-card,
    .pipeline-stage,
    .row-card,
    .activity-list li,
    .action-list li {
        page-break-inside: avoid;
    }

    /* En-tête / pied de page imprimés (optionnel) */
    @page {
        margin: 1.5cm 1.5cm;
    }
}

/* =============================================================================
   V9 — HEADER CLAIR + GRILLE 2 COL + DRAWER VARIABLE
   ============================================================================= */

:root {
    --right-drawer-max-width: 750px;
}

/* ---------- Header CLAIR uniforme (remplace le noir) ---------- */
.widget.is-dark-header .widget-header,
.widget.is-dark-header .widget-toolbar {
    background: #f8fafc !important;
    color: var(--color-text) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.widget.is-dark-header .widget-toolbar-title,
.widget.is-dark-header .widget-title {
    color: var(--color-text) !important;
    font-weight: 700;
}

.widget.is-dark-header .widget-subtitle {
    color: var(--color-text-muted) !important;
}

/* Drag handle en clair */
.widget.is-dark-header .widget-drag-handle {
    color: var(--color-text-light);
}
.widget.is-dark-header .widget-drag-handle:hover {
    color: var(--color-primary);
}

/* Boutons icônes (toolbar) en clair */
.toolbar-icon-btn.is-dark {
    background: #fff !important;
    color: var(--color-text-muted) !important;
    border: 1px solid var(--color-border) !important;
}
.toolbar-icon-btn.is-dark:hover {
    background: var(--color-bg-alt) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-border-strong) !important;
}

/* Filtres en clair */
.toolbar-filter.is-dark {
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
}
.toolbar-filter.is-dark strong {
    color: var(--color-text-muted) !important;
}
.toolbar-filter.is-dark:hover {
    background: var(--color-bg-alt) !important;
    border-color: var(--color-border-strong) !important;
}

/* Toggle en clair */
.toolbar-toggle.is-dark {
    color: var(--color-text-muted) !important;
}
.toolbar-toggle.is-dark .toolbar-toggle-track {
    background: #cbd5e1 !important;
}
.toolbar-toggle.is-dark input:checked + .toolbar-toggle-track {
    background: var(--color-success) !important;
}
.toolbar-toggle.is-dark input:checked ~ .toolbar-toggle-label {
    color: var(--color-success) !important;
}

/* Recherche en clair */
.widget-search.is-dark input {
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
}
.widget-search.is-dark input::placeholder {
    color: var(--color-text-light) !important;
}
.widget-search.is-dark input:focus {
    background: #fff !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.10) !important;
}
.widget-search.is-dark .widget-search-icon {
    color: var(--color-text-muted) !important;
}

/* Bouton secondaire (Synchroniser) en clair */
.btn-header.is-secondary {
    background: #fff !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border-strong) !important;
}
.btn-header.is-secondary:hover {
    background: var(--color-bg-alt) !important;
    border-color: var(--color-text-muted) !important;
}

/* ---------- Boutons primaires NOIRS (uniformes) avec texte adaptatif ---------- */
/* Tous les boutons primaires sont noirs (couleur "stable" du système).
   La couleur du texte s'adapte automatiquement à la luminance du fond via
   une approche JS (cf. widgets.js qui calcule et ajoute .has-light-bg).
   En CSS pur, on couvre les cas courants avec des variables. */

.btn-header.is-primary {
    background: var(--btn-primary-bg, #1e293b);   /* noir slate par défaut */
    color: var(--btn-primary-color, #ffffff);     /* texte blanc par défaut */
    border: none;
    transition: background 150ms var(--ease-out), color 150ms var(--ease-out), transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}

.btn-header.is-primary:hover {
    background: var(--btn-primary-hover-bg, #0f172a);
    color: var(--btn-primary-color, #ffffff);
}

/* Marquage automatique JS : si le fond est CLAIR, on ajoute .has-light-bg → texte foncé */
.btn-header.is-primary.has-light-bg {
    color: #0f172a !important;
}
.btn-header.is-primary.has-light-bg:hover {
    color: #0f172a !important;
}

/* ---------- Système de "couleur thématique du widget" (optionnel) ---------- */
/* Si tu veux qu'un widget précis ait sa propre couleur, override ici.
   Par défaut, TOUS les widgets ont le bouton noir uniforme.
   Pour personnaliser : .widget[data-widget-key="X"] { --btn-primary-bg: #...; } */

/* ---------- DRAG & DROP : indicateurs visuels (above/below) ---------- */

.is-draggable.is-dragging {
    opacity: 0.4;
}

/* Indicateur de drop : barre bleue au-dessus du widget cible */
.is-draggable.widget-drop-above {
    box-shadow: 0 -3px 0 0 var(--color-primary);
}

/* Indicateur de drop : barre bleue en-dessous du widget cible */
.is-draggable.widget-drop-below {
    box-shadow: 0 3px 0 0 var(--color-primary);
}

/* Curseur sur le handle */
.widget-drag-handle { cursor: grab; }
.widget-drag-handle:active { cursor: grabbing; }

/* ---------- DRAWER LATÉRAL DROIT — utilise la variable --right-drawer-max-width ---------- */
.right-drawer {
    max-width: var(--right-drawer-max-width, 750px);
    width: 100%;
}

@media (max-width: 480px) {
    .right-drawer {
        max-width: 100%;
    }
}

/* =============================================================================
   V10 — ACCORDÉON DES WIDGETS (ouvrir/fermer)
   ============================================================================= */

/* Bouton accordéon dans la toolbar */
.widget-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 150ms var(--ease-out), background 150ms var(--ease-out), transform 220ms var(--ease-out);
    flex-shrink: 0;
    border-radius: var(--radius-sm);
}

.widget-collapse-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 220ms var(--ease-out);
}

.widget-collapse-btn:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.widget-collapse-btn:active {
    transform: scale(0.95);
}

/* État REPLIÉ : chevron pointe vers le bas (cliquer pour rouvrir) */
.widget.is-collapsed .widget-collapse-btn svg {
    transform: rotate(-90deg);
}

/* Masquer tout le contenu sous la toolbar quand replié */
.widget.is-collapsed > *:not(.widget-toolbar):not(.widget-header) {
    display: none !important;
}

/* Quand replié, harmoniser la bordure inférieure de la toolbar */
.widget.is-collapsed .widget-toolbar {
    border-bottom: none;
}

/* Animation discrète d'ouverture (fade-in du contenu) */
@media (prefers-reduced-motion: no-preference) {
    .widget:not(.is-collapsed) > *:not(.widget-toolbar):not(.widget-header) {
        animation: widgetExpand 240ms var(--ease-out);
    }
}

@keyframes widgetExpand {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   BOUTON IMPRIMER (par widget)
   ============================================================================= */
.widget-print-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 150ms var(--ease-out), background 150ms var(--ease-out);
    flex-shrink: 0;
    border-radius: var(--radius-sm);
}

.widget-print-btn svg {
    width: 18px;
    height: 18px;
}

.widget-print-btn:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.widget-print-btn:active {
    transform: scale(0.95);
}

/* =============================================================================
   HEADER CLIQUABLE POUR ACCORDÉON (zones vides)
   =============================================================================
   On indique visuellement que le header complet est cliquable.
   ============================================================================= */
.widget[data-widget-key] > .widget-header,
.widget[data-widget-key] > .widget-toolbar {
    cursor: pointer;
}

/* Sauf sur les éléments interactifs internes : curseur normal */
.widget[data-widget-key] > .widget-header > button,
.widget[data-widget-key] > .widget-header > input,
.widget[data-widget-key] > .widget-header > select,
.widget[data-widget-key] > .widget-header > a,
.widget[data-widget-key] > .widget-header > label,
.widget[data-widget-key] > .widget-header .widget-search,
.widget[data-widget-key] > .widget-header .widget-search input,
.widget[data-widget-key] > .widget-toolbar > button,
.widget[data-widget-key] > .widget-toolbar > input,
.widget[data-widget-key] > .widget-toolbar > select,
.widget[data-widget-key] > .widget-toolbar > a,
.widget[data-widget-key] > .widget-toolbar > label,
.widget[data-widget-key] > .widget-toolbar .widget-search,
.widget[data-widget-key] > .widget-toolbar .widget-search input,
.widget[data-widget-key] > .widget-toolbar .toolbar-icon-btn,
.widget[data-widget-key] > .widget-toolbar .toolbar-filter,
.widget[data-widget-key] > .widget-toolbar .toolbar-toggle,
.widget[data-widget-key] > .widget-toolbar .btn-header {
    cursor: default;
}

.widget-collapse-btn,
.widget-print-btn,
.row-action-icon {
    cursor: pointer;
}

/* =============================================================================
   HARMONISATION HEADER SIMPLE (widgets pipeline, contacts, overdue, recent)
   =============================================================================
   But : que ces widgets aient le MÊME rendu visuel que les widgets riches
   (clients/factures/produits) tout en gardant un header simple (pas de toolbar
   avec recherche/filtres).
   ============================================================================= */

/* Le header simple prend les mêmes couleurs/typo que la toolbar des widgets riches */
.widget > .widget-header {
    background: #f8fafc;
    border-bottom: 1px solid var(--color-border);
    padding: 10px 14px;
    gap: 8px;
}

/* Le drag handle doit être visible sur fond clair (il était stylé pour fond noir) */
.widget > .widget-header .widget-drag-handle {
    color: var(--color-text-light);
    width: 22px;
    height: 28px;
    cursor: grab;
}

.widget > .widget-header .widget-drag-handle:hover {
    color: var(--color-primary);
}

.widget > .widget-header .widget-drag-handle:active {
    cursor: grabbing;
}

/* Titre du widget : même typo que widget-toolbar-title (700, 13px) avec ellipsis */
.widget > .widget-header .widget-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

/* Sous-titre : nowrap aussi pour éviter les sauts de ligne */
.widget > .widget-header .widget-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

/* Lien "Vue détaillée → / Détails → / Voir toutes →" en queue : nowrap */
.widget > .widget-header .btn-link {
    white-space: nowrap;
    flex-shrink: 0;
}

/* =============================================================================
   ESPACE INSÉCABLE / NOWRAP — montants et unités monétaires
   =============================================================================
   Empêche le retour à la ligne sur "26 820,80 €", "244 200,00 €", "12 €",
   "HT", "TTC", etc.
   ============================================================================= */
.nowrap,
.amount,
.money,
.currency,
.row-card-amount,
.toolbar-stat-value,
.pipeline-stage-amount {
    white-space: nowrap !important;
}

/* Empêche aussi la coupure du suffixe HT/TTC qui suit un montant */
.row-card-amount-unit {
    white-space: nowrap !important;
    margin-left: 2px;
}

/* =============================================================================
   EXPLORATEUR DE DOCUMENTS (asset-document-explorer.php)
   ============================================================================= */

/* Sous-toolbar : onglets + recherche + filtres */
.docex-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    background: #fff;
    flex-wrap: wrap;
}

/* Onglets de vue */
.docex-tabs {
    display: inline-flex;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 2px;
}

.docex-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-radius: calc(var(--radius-md) - 2px);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: var(--transition-color);
}

.docex-tab:hover {
    color: var(--color-text);
}

.docex-tab.is-active {
    background: #fff;
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.docex-tab-count {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
}

.docex-tab.is-active .docex-tab-count {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

/* Filtres extensions (pills) */
.docex-filters {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}

.docex-filter {
    padding: 4px 10px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: var(--transition-color);
}

.docex-filter:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.docex-filter.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Fil d'Ariane (indicateur de vue) */
.docex-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
}

.docex-breadcrumb-label {
    color: var(--color-text-light);
    font-weight: 500;
}

.docex-breadcrumb-value {
    color: var(--color-text);
    font-weight: 600;
}

/* Corps : 3 vues, une seule visible à la fois */
.docex-body {
    background: #fff;
}

.docex-view {
    display: none;
}

.docex-view.is-active {
    display: block;
}

/* Liste de documents (commune aux 3 vues) */
.docex-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.docex-item {
    border-bottom: 1px solid var(--color-border);
    transition: background 120ms var(--ease-out);
}

.docex-item:last-child {
    border-bottom: none;
}

.docex-item:hover {
    background: var(--color-bg-alt);
}

.docex-item-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: inherit;
    text-decoration: none;
}

/* Icône type fichier (carré coloré avec étiquette) */
.docex-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    color: #fff;
    background: #94a3b8;
}

.docex-icon.is-pdf   { background: #dc2626; }
.docex-icon.is-doc   { background: #2563eb; }
.docex-icon.is-xls   { background: #16a34a; }
.docex-icon.is-img   { background: #ea580c; }
.docex-icon.is-zip   { background: #7c3aed; }
.docex-icon.is-txt   { background: #475569; }
.docex-icon.is-mail  { background: #0891b2; }
.docex-icon.is-other { background: #94a3b8; }

/* Bloc principal : nom + meta */
.docex-item-main {
    flex: 1;
    min-width: 0;
}

.docex-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.docex-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-muted);
}

.docex-meta-sep {
    color: var(--color-border-strong);
}

/* Tags (badges des contextes : catégorie, tiers) */
.docex-item-tags {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.docex-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    white-space: nowrap;
}

.docex-tag.is-cat {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.docex-tag.is-tier {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

/* Sections accordéon (vues "Par type" et "Par tiers") */
.docex-group {
    border-bottom: 1px solid var(--color-border);
}

.docex-group:last-child {
    border-bottom: none;
}

.docex-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fafbfc;
    cursor: pointer;
    list-style: none;       /* retire la flèche native */
    user-select: none;
}

.docex-group-header::-webkit-details-marker {
    display: none;
}

.docex-group-header:hover {
    background: var(--color-bg-alt);
}

.docex-group-chevron {
    color: var(--color-text-muted);
    transition: transform 200ms var(--ease-out);
    flex-shrink: 0;
}

.docex-group[open] .docex-group-chevron {
    transform: rotate(90deg);
}

.docex-group-title {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.docex-group-count {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    background: #fff;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

/* =============================================================================
   UPLOAD DE FICHIERS (asset-document-upload.php)
   ============================================================================= */

/* Zone de drop */
.docup-dropzone {
    display: block;
    position: relative;
    padding: 24px 20px;
    background: var(--color-bg-alt);
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 14px;
}

.docup-dropzone:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.docup-dropzone.is-drag-over {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    transform: scale(1.01);
}

.docup-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.docup-dropzone-icon {
    color: var(--color-text-muted);
    transition: color 200ms var(--ease-out);
}

.docup-dropzone:hover .docup-dropzone-icon,
.docup-dropzone.is-drag-over .docup-dropzone-icon {
    color: var(--color-primary);
}

.docup-dropzone-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--color-text);
}

.docup-dropzone-text strong {
    font-weight: 700;
}

.docup-dropzone-text span {
    color: var(--color-text-muted);
    font-size: 12px;
}

.docup-browse-link {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
}

.docup-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Indications max size / extensions */
.docup-config {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Liste des fichiers */
.docup-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.docup-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.docup-item.is-uploading { border-color: var(--color-primary); }
.docup-item.is-uploaded  { border-color: var(--color-success); }
.docup-item.is-error     { border-color: var(--color-danger); background: #fef2f2; }

/* Réutilise le système d'icônes de l'explorateur */
.docup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    color: #fff;
    background: #94a3b8;
}

.docup-icon.is-pdf   { background: #dc2626; }
.docup-icon.is-doc   { background: #2563eb; }
.docup-icon.is-xls   { background: #16a34a; }
.docup-icon.is-img   { background: #ea580c; }
.docup-icon.is-zip   { background: #7c3aed; }
.docup-icon.is-other { background: #94a3b8; }

.docup-item-main {
    flex: 1;
    min-width: 0;
}

.docup-item-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.docup-item-name:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.docup-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.docup-status {
    font-weight: 600;
}

.docup-status.is-pending { color: var(--color-text-muted); }
.docup-status.is-done    { color: var(--color-success); }
.docup-status.is-error   { color: var(--color-danger); }

/* Barre de progression */
.docup-progress {
    margin-top: 4px;
    height: 3px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.docup-progress-bar {
    height: 100%;
    background: var(--color-primary);
    border-radius: inherit;
    transition: width 100ms var(--ease-out);
}

.docup-item.is-uploaded .docup-progress-bar { background: var(--color-success); }
.docup-item.is-error    .docup-progress-bar { background: var(--color-danger); }

.docup-item.is-uploaded .docup-progress,
.docup-item.is-error    .docup-progress {
    /* Cache la barre une fois terminé pour gagner de la place */
    display: none;
}

/* Bouton supprimer */
.docup-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition-color);
}

.docup-remove:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

/* État vide */
.docup-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 12px;
    padding: 8px 0;
    font-style: italic;
}

/* =============================================================================
   RESPONSIVE — explorateur + upload
   ============================================================================= */
@media (max-width: 700px) {
    .docex-toolbar {
        gap: 8px;
        padding: 8px 10px;
    }
    .docex-tabs { width: 100%; }
    .docex-tab { flex: 1; justify-content: center; }
    .widget-search { flex: 1 1 100%; max-width: none; }
    .docex-filters { width: 100%; }
    .docex-item-tags { display: none; }
}