/* ============================================================================
   ElectroCAD admin — correctifs 01.08.2026 (retours Luiz, mobile + thème clair)
   Fichier chargé EN DERNIER : il tranche les conflits de cascade sans avoir à
   modifier les 15 feuilles existantes (dont plusieurs se surchargent déjà
   entre elles).
   ============================================================================ */

/* ───────────────────────────────────────────────────────────────────────────
   1. ACTIVITÉ RÉCENTE (fiche client)
   L'ancien .ec-audit-item était une grille `auto 1fr auto` dont la colonne du
   milieu, en monospace, ne peut pas descendre sous sa largeur min-content : la
   grille débordait et la date se superposait au libellé
   (« 22 juilchat.20.2conversation_created »). Ici : une ligne = icône + texte
   qui s'enroule + date, sans colonne rigide.
   ─────────────────────────────────────────────────────────────────────────── */
.ec-act-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ec-act-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--ecx-border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    background: var(--ecx-glass-2, rgba(255, 255, 255, 0.02));
}
.ec-act-ico {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    background: rgba(128, 128, 128, 0.14);
    color: var(--ecx-text-2, #b9bcc4);
}
.ec-act-ico.is-ok   { background: rgba(16, 185, 129, 0.14); color: #10b981; }
.ec-act-ico.is-info { background: rgba(220, 38, 38, 0.12);  color: #DC2626; }
.ec-act-ico.is-warn { background: rgba(245, 158, 11, 0.16); color: #d97706; }
.ec-act-ico.is-bad  { background: rgba(239, 68, 68, 0.16);  color: #ef4444; }
.ec-act-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ec-act-title {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ecx-text, #E8E6E3);
    overflow-wrap: anywhere;          /* jamais de débordement */
    line-height: 1.3;
}
.ec-act-detail {
    font-size: 0.74rem;
    color: var(--ecx-text-3, #8b90a0);
    overflow-wrap: anywhere;
    line-height: 1.3;
}
.ec-act-when {
    font-size: 0.7rem;
    color: var(--ecx-text-3, #8b90a0);
    white-space: nowrap;
    padding-top: 2px;
}
@media (max-width: 520px) {
    /* la date passe SOUS le texte : plus aucun risque de chevauchement */
    .ec-act-item { grid-template-columns: 28px minmax(0, 1fr); }
    .ec-act-when { grid-column: 2; padding-top: 0; }
}

/* ───────────────────────────────────────────────────────────────────────────
   2. THÈME CLAIR — valeurs de statistiques ILLISIBLES
   .ec-drawer__stat-value peint le texte avec un dégradé BLANC → gris clair
   (background-clip:text + text-fill-color:transparent). Superbe sur fond
   sombre, invisible sur fond clair : « 1 », « 0 CHF », « 20.07.2026 »
   disparaissaient. On rend la couleur pleine en thème clair.
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .ec-drawer__stat-value {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #17171A !important;
    color: #17171A !important;
}
[data-theme="light"] .ec-drawer__stat-value small {
    -webkit-text-fill-color: #5A5854 !important;
    color: #5A5854 !important;
}
[data-theme="light"] .ec-drawer__stat-label,
[data-theme="light"] .ec-act-when,
[data-theme="light"] .ec-act-detail { color: #5A5854; }
[data-theme="light"] .ec-act-title { color: #17171A; }
[data-theme="light"] .ec-act-item {
    background: rgba(20, 18, 12, 0.02);
    border-color: rgba(20, 18, 12, 0.10);
}
/* même piège de dégradé ailleurs dans la fiche */
[data-theme="light"] .ec-drawer__hero-meta h4 {
    -webkit-text-fill-color: #17171A;
    color: #17171A;
}

/* ───────────────────────────────────────────────────────────────────────────
   3. FICHE CLIENT EN MOBILE — vraie feuille plein écran
   La fiche est une MODALE CENTRÉE (top/left 50% + translate). Les règles
   « plein écran » héritées de l'ancien tiroir latéral posaient width:100vw
   SANS annuler le centrage ni les hauteurs : la fiche débordait et les
   chiffres des statistiques étaient rognés.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ec-drawer {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        transform: translateY(14px) !important;   /* animation d'entrée */
        border-radius: 0 !important;
        border: 0 !important;
    }
    .ec-drawer.is-open { transform: translateY(0) !important; }
    .ec-drawer__head { padding: 14px 14px calc(14px + env(safe-area-inset-top, 0)); }
    .ec-drawer__body { padding: 14px; }
    /* 4 stats : 2 par ligne, et surtout des chiffres NON rognés */
    .ec-drawer__stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .ec-drawer__stat { padding: 10px 12px; }
    .ec-drawer__stat-value { font-size: 1.25rem; line-height: 1.25; overflow: visible; }
    .ec-drawer__hero { gap: 12px; }
    .ec-drawer__foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0)); }
}

/* ───────────────────────────────────────────────────────────────────────────
   4. LISTE CLIENTS EN MOBILE (mode cartes)
   Badge de statut étiré sur toute la largeur, bouton « Détail » riquiqui avec
   un fond rose derrière le seul mot, et beaucoup d'espace perdu.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* le badge garde sa largeur naturelle */
    .ec-clients-table td.col-status .ec-badge,
    .ec-clients-table td .ec-badge {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        width: auto !important;
        max-width: max-content;
        align-self: flex-start;
    }
    /* bouton Détail : vraie cible tactile, pleine largeur */
    .ec-clients-table td.col-actions { margin-top: 10px; }
    .ec-clients-table td.col-actions .ec-btn-detail,
    .ec-clients-table .ec-btn-detail {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 10px;
        font-weight: 600;
    }
    /* densité : les libellés de colonne collent à leur valeur */
    .ec-clients-table td { margin-bottom: 6px; }
    .ec-clients-table td[data-label]::before { margin-bottom: 1px; }
    /* une valeur vide ne mérite pas trois lignes */
    .ec-clients-table td.col-revenue,
    .ec-clients-table td.col-company { margin-bottom: 4px; }
}
[data-theme="light"] .ec-clients-table td.col-actions .ec-btn-detail,
[data-theme="light"] .ec-clients-table .ec-btn-detail {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.35);
    color: #B91C1C;
}