/* ─── ALISRAEL PRIVATE FINANCE — Centre de tâches « Mes tâches » ───────────
   Portage exact de la maquette validée (toutes les classes `.tk-*` de la
   maquette renommées `.tkc-*` ici pour éviter toute collision de nom avec
   d'autres styles du CRM) :
   https://claude.ai/code/artifact/39e6f62a-c785-4dbb-9375-8176d61026c0
   Aucune organisation, colonne ni couleur n'a été modifiée par rapport à
   cette référence — seul le scope (#crm-view-taches) et les noms de classe
   changent. Réutilise les valeurs exactes des tokens --cp-* déjà définis
   par cockpit-vert.css — mais ATTENTION : dans ce fichier, ces variables
   sont scopées à #crm-view-dossiers uniquement (jamais :root), donc
   invisibles ici. On les redéclare ci-dessous, mêmes valeurs, scopées à
   #crm-view-taches — même principe que cockpit-vert.css pour sa propre
   rubrique, jamais une fuite globale sur :root. --cp-violet/--cp-violet-tint
   (étiquette Avocat) n'existent nulle part ailleurs dans le CRM : valeurs
   validées avec l'utilisateur (#5B4B8A). --crm-* (sidebar/topbar) restent
   globaux (crm-shell.css), déjà disponibles partout. ────────────────────── */

#crm-view-taches {
  --cp-white: #FFFFFF;
  --cp-grey-50: #F6F7F6;
  --cp-grey-100: #EEF0EE;
  --cp-grey-200: #E1E3E0;
  --cp-ink: #14161A;
  --cp-ink-soft: #5B5F5A;
  --cp-ink-faint: #9A9D97;
  --cp-accent: #0E6B4F;
  --cp-accent-dark: #0A5A42;
  --cp-accent-tint: #E7F3EE;
  --cp-amber: #9A6B16;
  --cp-amber-tint: #FBF2E2;
  --cp-rose: #A33B2E;
  --cp-rose-tint: #FBEAE7;
  --cp-blue-tint: #EEF1FB;
  --cp-blue: #3B4C8C;
  --cp-violet: #5B4B8A;
  --cp-violet-tint: #EFECF7;
}

#crm-view-taches .container { padding: 1.8rem 2rem 3rem; max-width: 980px; }

.tkc-head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.tkc-title { font-size: 1.3rem; margin: 0; letter-spacing: -0.01em; flex-shrink: 0; }
.tkc-counter { font-size: 0.86rem; color: var(--crm-ink-soft); flex-shrink: 0; }
.tkc-counter b { color: var(--crm-ink); font-variant-numeric: tabular-nums; }
.tkc-head-spacer { flex: 1; }
.tkc-search-wrap { position: relative; width: 220px; }
.tkc-search-wrap input { width: 100%; font-family: inherit; font-size: 0.82rem; border: 1px solid var(--cp-grey-200); border-radius: 8px; padding: 0.5rem 0.7rem; }

/* Bouton « + Nouvelle tâche » — même traitement que la maquette (accent CRM
   bleu, jamais le vert --cp-accent réservé au bouton Géré). */
#tkc-btn-new { background: var(--crm-primary); color: #fff; border: none; border-radius: var(--crm-radius-sm); padding: 0.55rem 1rem; font-size: 0.84rem; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
#tkc-btn-new:hover { background: var(--crm-primary-deep); }

/* ── Liste unique, continue, sans séparation interne ──────────────────── */
.tkc-table-wrap { border: 1px solid var(--cp-grey-100); border-radius: var(--crm-radius-sm); overflow: hidden; background: var(--cp-white); }
.tkc-head-row, .tkc-row { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1rem; }
.tkc-head-row { background: var(--cp-grey-50); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cp-ink-faint); }
.tkc-row { border-top: 1px solid var(--cp-grey-100); transition: background .12s, opacity .25s, transform .25s; }
.tkc-row:hover { background: var(--cp-grey-50); }
.tkc-row.tkc-leaving { opacity: 0; transform: translateX(12px); }

.tkc-col-client { flex: 1.3; min-width: 0; }
.tkc-col-task { flex: 3; min-width: 0; }
.tkc-col-when { flex: 0.85; min-width: 0; }
.tkc-col-report { flex: 0 0 auto; }
.tkc-col-done { flex: 0 0 auto; }

.tkc-client-link {
  background: none; border: none; font: inherit; font-size: 0.92rem; font-weight: 700;
  color: var(--cp-ink); cursor: pointer; padding: 0; text-align: left;
}
.tkc-client-link:hover { color: var(--crm-primary-deep); text-decoration: underline; }

.tkc-task-text { font-size: 0.88rem; color: var(--cp-ink); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Étiquette de catégorie — petit fond légèrement teinté + texte coloré,
   jamais une couleur sur toute la ligne (demande explicite validée). */
.tkc-tag {
  display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 600;
  padding: 0.08rem 0.45rem; border-radius: 999px; margin-top: 0.15rem;
}
.tkc-tag--banque    { background: var(--cp-accent-tint); color: var(--cp-accent-dark); }
.tkc-tag--assurance { background: var(--cp-blue-tint);   color: var(--cp-blue); }
.tkc-tag--client    { background: var(--cp-amber-tint);  color: var(--cp-amber); }
.tkc-tag--avocat    { background: var(--cp-violet-tint); color: var(--cp-violet); }
.tkc-tag--interne   { background: var(--cp-grey-100);    color: var(--cp-ink-soft); }

.tkc-when { font-size: 0.85rem; font-weight: 600; color: var(--cp-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tkc-when--retard { color: var(--cp-rose); font-weight: 700; }

.tkc-btn {
  font-family: inherit; font-size: 0.78rem; font-weight: 600; border-radius: 7px; padding: 0.4rem 0.75rem;
  cursor: pointer; white-space: nowrap; border: 1px solid var(--cp-grey-200); background: var(--cp-white); color: var(--cp-ink-soft);
}
.tkc-btn:hover { border-color: var(--cp-ink-soft); color: var(--cp-ink); }
.tkc-btn--done { background: var(--cp-accent); border-color: var(--cp-accent); color: #fff; font-weight: 700; }
.tkc-btn--done:hover { background: var(--cp-accent-dark); border-color: var(--cp-accent-dark); color: #fff; }

.tkc-report-wrap { position: relative; }
.tkc-report-pop { position: absolute; top: calc(100% + 4px); right: 0; background: var(--cp-white); border: 1px solid var(--cp-grey-200); border-radius: 10px; box-shadow: 0 8px 24px rgba(20,22,26,0.14); padding: 0.35rem; z-index: 30; width: 190px; }
.tkc-report-pop button { display: block; width: 100%; text-align: left; background: none; border: none; font-family: inherit; font-size: 0.8rem; padding: 0.45rem 0.55rem; border-radius: 6px; cursor: pointer; color: var(--cp-ink); }
.tkc-report-pop button:hover { background: var(--cp-grey-50); }
.tkc-report-pop-date { color: var(--cp-ink-faint); font-weight: 400; }
.tkc-report-pop input[type="date"] { width: 100%; margin-top: 0.3rem; font-family: inherit; font-size: 0.78rem; border: 1px solid var(--cp-grey-200); border-radius: 6px; padding: 0.35rem; }
.tkc-report-pop hr { border: none; border-top: 1px solid var(--cp-grey-100); margin: 0.3rem 0; }

.tkc-empty { padding: 1.6rem; text-align: center; color: var(--cp-ink-faint); font-size: 0.86rem; font-style: italic; }

/* ── Lien discret vers les tâches terminées ───────────────────────────── */
.tkc-done-link-row { text-align: center; margin-top: 1rem; }
.tkc-done-link { background: none; border: none; font-family: inherit; font-size: 0.82rem; color: var(--cp-ink-faint); cursor: pointer; text-decoration: underline; }
.tkc-done-link:hover { color: var(--crm-primary-deep); }
.tkc-done-section { margin-top: 0.8rem; }
.tkc-done-row { opacity: 0.6; }
.tkc-done-row .tkc-task-text { text-decoration: line-through; }

.tkc-toast { position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%) translateY(12px); opacity: 0; background: var(--cp-ink); color: #fff; font-size: 0.82rem; font-weight: 600; padding: 0.6rem 1rem; border-radius: 999px; display: flex; align-items: center; gap: 0.8rem; transition: all .22s ease; z-index: 60; pointer-events: none; }
.tkc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.tkc-toast button#tkc-toast-undo { background: none; border: none; color: #bcd2ff; font-weight: 700; font-family: inherit; font-size: 0.8rem; cursor: pointer; padding: 0; }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  #crm-view-taches .container { padding: 1rem; }
  .tkc-head { gap: 0.7rem; }
  .tkc-search-wrap { width: 100%; order: 3; }
  .tkc-head-row { display: none; } /* en-têtes de colonnes inutiles en colonne mobile */
  .tkc-row {
    flex-wrap: wrap;
    padding: 0.7rem 0.8rem;
    gap: 0.4rem 0.7rem;
  }
  .tkc-col-client { flex: 1 1 100%; order: 1; }
  .tkc-col-task { flex: 1 1 100%; order: 2; }
  .tkc-col-when { flex: 1 1 auto; order: 3; }
  .tkc-col-report { order: 4; }
  .tkc-col-done { order: 5; margin-left: auto; }
  .tkc-task-text { white-space: normal; }
}