/* ================================================
   DESIGN POLISH — Harmonisation UI globale
   ProductiveApp v4.0 — 2026-03-19
   Fichier séparé (JAMAIS dans bundle.min.css)
   ================================================ */

/* ────────────────────────────────────────────────────
   1. COMPTABILITÉ — Onglets tronqués
   ──────────────────────────────────────────────────── */

/* Conteneur des onglets — scroll horizontal fluide */
#view-accounting .acc-tabs-wrap {
    position: relative;
    overflow: hidden;
}

#view-accounting .acc-tabs-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
#view-accounting .acc-tabs-scroll::-webkit-scrollbar {
    display: none;
}

#view-accounting .acc-tabs {
    display: flex;
    gap: 2px;
    padding: 4px;
    background: color-mix(in srgb, var(--bg-secondary, #13131e) 80%, transparent);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    flex-wrap: nowrap;
    white-space: nowrap;
    width: max-content;
    min-width: 100%;
}

#view-accounting .acc-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, #a1a1aa);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    line-height: 1.3;
}

#view-accounting .acc-tab:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary, #f4f4f5);
}

#view-accounting .acc-tab.active {
    background: color-mix(in srgb, var(--accent, #7c3aed) 18%, rgba(255,255,255,0.04));
    color: var(--accent-light, #a78bfa);
    border-color: color-mix(in srgb, var(--accent, #7c3aed) 30%, transparent);
}

#view-accounting .acc-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}
#view-accounting .acc-tab.active svg {
    opacity: 1;
}

#view-accounting .acc-tab-badge {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    color: var(--text-muted, #71717a);
    font-weight: 700;
    line-height: 1.4;
}

/* Flèches de navigation des tabs */
#view-accounting .acc-tabs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #13131e);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text-secondary, #a1a1aa);
    cursor: pointer;
    z-index: 5;
    font-size: 14px;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#view-accounting .acc-tabs-arrow:hover {
    background: color-mix(in srgb, var(--accent, #7c3aed) 15%, var(--bg-secondary, #13131e));
    color: var(--text-primary, #f4f4f5);
}
#view-accounting .acc-tabs-arrow.left { left: 0; }
#view-accounting .acc-tabs-arrow.right { right: 0; }
#view-accounting .acc-tabs-arrow.hidden { display: none; }


/* ────────────────────────────────────────────────────
   2. BOOKING — Cartes à hauteurs consistantes
   ──────────────────────────────────────────────────── */

.bk-offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    align-items: start;
}

.bk-offer-card {
    display: flex;
    flex-direction: column;
    min-height: 180px;
}

.bk-offer-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.bk-offer-desc {
    flex: 1;
    font-size: 0.82rem;
    color: var(--text-secondary, #a0a0b0);
    margin: 0 0 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bk-offer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    align-items: center;
}

/* Actions uniformes */
.bk-offer-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}
.bk-offer-actions button,
.bk-offer-actions .bk-offer-action {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.85rem;
}


/* ────────────────────────────────────────────────────
   3. CRM — Badges et tags harmonisés
   ──────────────────────────────────────────────────── */

/* Uniformiser la taille des badges de statut */
.gcrm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 65px;
    text-align: center;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

/* Tags uniformisés */
.gcrm-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

/* Alignement vertical des cellules du tableau CRM */
.gcrm-table td {
    vertical-align: middle;
}

.gcrm-tags-cell {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}

/* Colonne actions — alignement */
.gcrm-actions-cell,
.gcrm-table td:last-child {
    text-align: right;
}


/* ────────────────────────────────────────────────────
   4. TASKS — Cartes propres, scroll fluide
   ──────────────────────────────────────────────────── */

/* Cartes kanban — texte lisible, pas de troncature */
.kanban-card {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.kanban-card-title {
    word-break: break-word;
}

/* Colonnes kanban — scroll invisible, fluide */
.kanban-column {
    min-width: 260px;
    scrollbar-width: none;
}
.kanban-column::-webkit-scrollbar {
    display: none;
}

/* Board kanban — scroll horizontal invisible */
.kanban-board,
.tasks-kanban-board {
    overflow-x: auto;
    scrollbar-width: none;
}
.kanban-board::-webkit-scrollbar,
.tasks-kanban-board::-webkit-scrollbar {
    display: none;
}

/* Adoucir les bordures violettes des cartes tâches */
.task-card,
.task-card-inbox,
.task-card-kanban,
.task-card-timeline {
    border-color: rgba(255,255,255,0.06) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}
.task-card:hover,
.task-card-inbox:hover,
.task-card-kanban:hover,
.task-card-timeline:hover {
    border-color: color-mix(in srgb, var(--accent, #7c3aed) 25%, transparent) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
}

/* Journal du jour — collapsé, pas envahissant */
#view-tasks .journal-section {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 12px;
}
#view-tasks .journal-section::-webkit-scrollbar {
    display: none;
}

/* Vue tâches — scroll de la page entière */
#view-tasks {
    overflow-y: auto;
    overflow-x: hidden;
}

/* ────────────────────────────────────────────────────
   5. DRIVE — Noms de fichiers lisibles
   ──────────────────────────────────────────────────── */

.gd-card-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    min-height: calc(0.78rem * 1.3 * 2);
    word-break: break-word;
}

/* Info sous les cartes — padding uniforme */
.gd-card-info {
    padding: 8px 10px 6px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* Taille de fichier — alignement */
.gd-card-size {
    font-size: 0.68rem;
    color: var(--text-muted, #71717a);
    margin-top: 2px;
}


/* ────────────────────────────────────────────────────
   6. DASHBOARD — KPI harmonisées
   ──────────────────────────────────────────────────── */

/* Rangée de petites KPI — même hauteur */
.db-kpi-small-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.db-kpi-small {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    min-height: 72px;
}

.db-kpi-small-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.db-kpi-small-val {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.db-kpi-small-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* Brief du jour — alignement propre */
.db-brief-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: stretch;
}

.db-brief-stat {
    flex: 1;
    min-width: 80px;
    text-align: center;
    padding: 10px 8px;
}

/* Actions rapides — grille uniforme */
.db-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.db-quick-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ────────────────────────────────────────────────────
   7. MAIL — Panneau latéral et spacing
   ──────────────────────────────────────────────────── */

/* Folders sidebar — espacement propre */
.mail-folder-item,
.gm-folder-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    min-height: 38px;
}

/* Toggle switches — taille fixe */
.mail-folder-toggle,
.gm-folder-toggle {
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 10px;
}

/* Liste des mails — espacement entre items */
.mail-list-item,
.gm-list-item {
    padding: 12px 16px;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Sender info — pas tronqué */
.mail-sender,
.gm-sender {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Subject — 1 ligne avec ellipsis */
.mail-subject,
.gm-subject {
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Date — fixe à droite */
.mail-date,
.gm-date {
    font-size: 0.72rem;
    color: var(--text-muted, #71717a);
    white-space: nowrap;
    flex-shrink: 0;
}


/* ────────────────────────────────────────────────────
   9. GLOBAL — Corrections transversales
   ──────────────────────────────────────────────────── */

/* Scrollbar slim globale (hors body) */
.main-content ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.main-content ::-webkit-scrollbar-track {
    background: transparent;
}
.main-content ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
}
.main-content ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.15);
}

/* Tooltip — uniformisé */
[data-tooltip]::after {
    font-size: 0.72rem;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

/* Badges numériques — taille uniforme */
.badge-count,
.notification-count {
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0 4px;
}

/* Empty states — centrage */
.empty-state,
.acc-empty,
.gcrm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    gap: 12px;
}

/* Boutons génériques — alignement icône + texte */
.btn,
.glass-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Modaux — padding uniforme */
.modal-body,
.acc-modal-body {
    padding: 20px 24px;
}

/* Tables — alignement vertical */
.acc-table td,
.gcrm-table td {
    vertical-align: middle;
    padding: 10px 12px;
}

/* Breadcrumbs — alignement */
.breadcrumb,
.acc-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
}

/* Header de section — alignement */
.section-header,
.acc-section-title,
.view-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Cards et panneaux — bordures uniformes */
.glass-card,
.kpi-card,
.db-kpi-big,
.db-kpi-small,
.bk-offer-card,
.kanban-card,
.gd-file-card {
    border-radius: 12px;
}


/* ────────────────────────────────────────────────────
   10. ACCOUNTING — Stats grid harmonisées
   ──────────────────────────────────────────────────── */

.acc-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.acc-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    min-height: 80px;
}

/* Badge "à jour" / "Marge" dans les KPI compta */
.acc-stat-badge,
.acc-kpi-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
    font-weight: 600;
}

/* TVA et résumé — alignement des valeurs */
.acc-tva-row,
.acc-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.acc-tva-value,
.acc-summary-value {
    font-weight: 700;
    white-space: nowrap;
}


/* ────────────────────────────────────────────────────
   11. SIDEBAR RESIZE — Handle de redimensionnement
   ──────────────────────────────────────────────────── */

.sidebar-resize-handle {
    position: fixed;
    top: 0;
    width: 8px;
    height: 100vh;
    cursor: col-resize;
    z-index: 200;
    background: transparent;
    transition: background 0.15s ease;
}

.sidebar-resize-handle:hover {
    background: color-mix(in srgb, var(--accent, #7c3aed) 30%, transparent);
}

.sidebar-resize-handle.active,
.sidebar-resize-handle:active {
    background: color-mix(in srgb, var(--accent, #7c3aed) 60%, transparent);
}