/* ─── ALISRAEL PRIVATE FINANCE — Module Tâches ─────────────────────────────
   Tous les sélecteurs sont préfixés .tk- pour éviter tout conflit.
   Tokens CSS repris de style.css : --navy, --gold, --cream, --success, etc.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Zone principale du dashboard ──────────────────────────────────────────── */

.tk-zone {
  margin-bottom: 2.5rem;
}

.tk-dashboard {
  background: var(--navy-card, #111F38);
  border: 1px solid var(--navy-border, #1A2F50);
  border-radius: 10px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Top 3 priorités ────────────────────────────────────────────────────────── */

.tk-top3-card {
  background: rgba(10, 22, 40, 0.5);
  border: 1px solid var(--navy-border, #1A2F50);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tk-top3-card--empty {
  justify-content: flex-start;
  gap: 1rem;
}

.tk-top3-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gold, #C9A96E);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tk-top3-sep {
  width: 1px;
  height: 2rem;
  background: var(--navy-border, #1A2F50);
}

.tk-top3-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.35rem 0.6rem;
  border-radius: 5px;
  transition: background 0.15s;
  flex: 1;
  min-width: 160px;
}
.tk-top3-item:hover { background: rgba(201, 169, 110, 0.08); }

.tk-top3-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  overflow: hidden;
}

.tk-top3-client {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tk-top3-action {
  font-size: 0.75rem;
  color: var(--text-muted, #7A7570);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tk-top3-date {
  font-size: 0.7rem;
  color: var(--text-muted, #7A7570);
  white-space: nowrap;
  margin-left: auto;
}

.tk-top3-empty {
  font-size: 0.8125rem;
  color: var(--text-muted, #7A7570);
  margin: 0;
}

/* ── Ligne principale : donut + colonne droite ───────────────────────────────── */

.tk-dashboard-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.tk-dashboard-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-width: 0;
}

/* ── Donut SVG ───────────────────────────────────────────────────────────────── */

.tk-donut-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 160px;
}

.tk-donut-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #7A7570);
  margin: 0;
}

.tk-donut-wrap {
  position: relative;
  width: 130px;
  height: 130px;
}

.tk-donut-svg {
  width: 130px;
  height: 130px;
  transform: rotate(-90deg);
}

.tk-donut-track {
  fill: none;
  stroke: var(--navy-border, #1A2F50);
  stroke-width: 10;
}

.tk-donut-arc {
  fill: none;
  stroke: var(--gold, #C9A96E);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s ease-in-out, stroke 0.4s ease;
}

.tk-donut-arc--done {
  stroke: #16a34a;
  animation: tk-donut-pulse 0.5s ease-out;
}

@keyframes tk-donut-pulse {
  0%   { stroke-width: 10; }
  50%  { stroke-width: 14; }
  100% { stroke-width: 10; }
}

.tk-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}

.tk-donut-count {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1;
}

.tk-donut-sep {
  font-size: 1rem;
  color: var(--text-muted, #7A7570);
  font-weight: 400;
}

.tk-donut-pct {
  font-size: 0.8125rem;
  color: var(--gold, #C9A96E);
  font-weight: 600;
}
.tk-donut-pct--done { color: #16a34a; }

.tk-donut-goal-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tk-donut-goal-label {
  font-size: 0.75rem;
  color: var(--text-muted, #7A7570);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tk-goal-sel {
  background: var(--navy-mid, #0F2040);
  border: 1px solid var(--navy-border, #1A2F50);
  color: var(--gold, #C9A96E);
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  cursor: pointer;
}
.tk-goal-sel:focus { outline: none; border-color: var(--gold, #C9A96E); }

/* ── Compteurs ───────────────────────────────────────────────────────────────── */

.tk-counters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tk-counter {
  flex: 1;
  min-width: 70px;
  background: rgba(10, 22, 40, 0.4);
  border: 1px solid var(--navy-border, #1A2F50);
  border-radius: 7px;
  padding: 0.6rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.tk-counter:hover { border-color: var(--gold-muted, #8B7240); background: rgba(201, 169, 110, 0.06); }
.tk-counter--active { border-color: var(--gold, #C9A96E); background: rgba(201, 169, 110, 0.1); }
.tk-counter--alert  { border-color: rgba(239, 68, 68, 0.5); }

.tk-counter-icon  { font-size: 0.9rem; }
.tk-counter-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1;
}
.tk-counter--alert .tk-counter-value { color: #f87171; }
.tk-counter-label {
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #7A7570);
}

/* ── Cartes secondaires ──────────────────────────────────────────────────────── */

.tk-secondary-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tk-small-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted, #7A7570);
  margin: 0 0 0.35rem;
}

.tk-score-card,
.tk-next-card,
.tk-load-card,
.tk-week-card {
  flex: 1;
  min-width: 110px;
  background: rgba(10, 22, 40, 0.4);
  border: 1px solid var(--navy-border, #1A2F50);
  border-radius: 7px;
  padding: 0.75rem 0.875rem;
}

.tk-next-card { cursor: pointer; transition: border-color 0.15s; }
.tk-next-card:hover { border-color: var(--gold-muted, #8B7240); }

.tk-score-value {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold, #C9A96E);
  margin: 0;
}
.tk-score--good { color: #16a34a; }
.tk-score--mid  { color: var(--gold, #C9A96E); }

.tk-next-client { font-size: 0.875rem; font-weight: 600; color: #e2e8f0; margin: 0; }
.tk-next-action { font-size: 0.8125rem; color: var(--text-muted, #7A7570); margin: 0.15rem 0 0; }
.tk-next-date   { font-size: 0.75rem;   color: var(--gold-muted, #8B7240); margin: 0.15rem 0 0; }
.tk-next-empty  { font-size: 0.8125rem; color: var(--text-muted, #7A7570); margin: 0; }

.tk-load-count { font-size: 1rem; font-weight: 700; color: #e2e8f0; margin: 0; }
.tk-load-time  { font-size: 0.75rem; color: var(--gold-muted, #8B7240); margin: 0.1rem 0 0; }

.tk-week-done {
  font-size: 1.25rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0;
}
.tk-week-goal { font-size: 0.875rem; color: var(--text-muted, #7A7570); font-weight: 400; }
.tk-week-msg  { font-size: 0.75rem;  color: var(--gold-muted, #8B7240); margin: 0.15rem 0 0; }

/* ── Barre d'actions ─────────────────────────────────────────────────────────── */

.tk-actions-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tk-btn-start-day {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gold, #C9A96E);
  color: var(--navy, #0A1628);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.65rem 1.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
}
.tk-btn-start-day:hover { background: var(--gold-light, #DFC090); transform: translateY(-1px); }

.tk-btn-start-icon { font-size: 1rem; }

.tk-btn-new-task {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}
.tk-btn-new-task:hover {
  border-color: rgba(201, 169, 110, 0.5);
  color: var(--gold, #C9A96E);
}

/* ── Barre de filtres ────────────────────────────────────────────────────────── */

.tk-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.tk-filter-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tk-filter-btn {
  background: rgba(10, 22, 40, 0.4);
  border: 1px solid var(--navy-border, #1A2F50);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.tk-filter-btn:hover {
  border-color: var(--gold-muted, #8B7240);
  color: rgba(255, 255, 255, 0.85);
}
.tk-filter-btn--active {
  background: rgba(201, 169, 110, 0.12);
  border-color: var(--gold, #C9A96E);
  color: var(--gold, #C9A96E);
  font-weight: 600;
}

.tk-filter-selects {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tk-filter-sel {
  background: rgba(10, 22, 40, 0.5);
  border: 1px solid var(--navy-border, #1A2F50);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.tk-filter-sel:focus { outline: none; border-color: var(--gold-muted, #8B7240); }

/* ── Liste de tâches ─────────────────────────────────────────────────────────── */

.tk-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tk-list-empty {
  text-align: center;
  color: var(--text-muted, #7A7570);
  font-size: 0.875rem;
  padding: 1.5rem;
}

/* ── Carte tâche ─────────────────────────────────────────────────────────────── */

.tk-card {
  background: rgba(10, 22, 40, 0.45);
  border: 1px solid var(--navy-border, #1A2F50);
  border-left: 4px solid var(--gold, #C9A96E);
  border-radius: 7px;
  padding: 0.75rem 1rem;
  transition: border-color 0.15s;
}
.tk-card:hover { border-color: var(--gold-muted, #8B7240); }

/* Priorité : couleur de la bordure gauche */
.tk-card--urgent  { border-left-color: #ef4444; }
.tk-card--haute   { border-left-color: #f97316; }
.tk-card--normale { border-left-color: var(--gold, #C9A96E); }
.tk-card--faible  { border-left-color: #94a3b8; }

/* États */
.tk-card--done {
  opacity: 0.55;
  border-left-color: var(--success, #2D6A4F);
}
.tk-card--inprogress {
  border-left-color: var(--gold, #C9A96E);
  animation: tk-pulse-border 2s ease-in-out infinite;
}
.tk-card--overdue { background: rgba(239, 68, 68, 0.04); }

@keyframes tk-pulse-border {
  0%, 100% { border-left-color: var(--gold, #C9A96E); }
  50%       { border-left-color: var(--gold-light, #DFC090); }
}

.tk-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.tk-card-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
}

.tk-card-client {
  font-size: 0.875rem;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tk-card-bank {
  font-size: 0.6875rem;
  color: var(--gold-muted, #8B7240);
  background: rgba(201, 169, 110, 0.1);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
}

.tk-card-date { font-size: 0.75rem; color: var(--text-muted, #7A7570); white-space: nowrap; }
.tk-card-date--overdue { color: #f87171; font-weight: 600; }

.tk-card-action {
  font-size: 0.875rem;
  color: #cbd5e1;
  margin: 0.1rem 0 0.4rem;
}
.tk-card-action--done { text-decoration: line-through; color: var(--text-muted, #7A7570); }

.tk-card-desc {
  font-size: 0.75rem;
  color: var(--text-muted, #7A7570);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

/* Dot de priorité */
.tk-pd {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tk-pd--urgent  { background: #ef4444; }
.tk-pd--haute   { background: #f97316; }
.tk-pd--normale { background: var(--gold, #C9A96E); }
.tk-pd--faible  { background: #94a3b8; }

/* Mêmes dots pour top3 */
.tk-top3-priority-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tk-pd--urgent,  .tk-top3-item--urgent  .tk-top3-priority-dot { background: #ef4444; }
.tk-pd--haute,   .tk-top3-item--haute   .tk-top3-priority-dot { background: #f97316; }
.tk-pd--normale, .tk-top3-item--normale .tk-top3-priority-dot { background: var(--gold, #C9A96E); }
.tk-pd--faible,  .tk-top3-item--faible  .tk-top3-priority-dot { background: #94a3b8; }

/* Boutons de chaque carte */
.tk-card-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.tk-btn {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  white-space: nowrap;
}
.tk-btn:hover { transform: translateY(-1px); }

.tk-btn--start  { background: rgba(201,169,110,0.15); color: var(--gold, #C9A96E);   border-color: rgba(201,169,110,0.3); }
.tk-btn--start:hover  { background: rgba(201,169,110,0.25); }
.tk-btn--done   { background: rgba(45,106,79,0.2);  color: #4ade80; border-color: rgba(45,106,79,0.4); }
.tk-btn--done:hover   { background: rgba(45,106,79,0.35); }
.tk-btn--reopen { background: rgba(100,116,139,0.15); color: #94a3b8; border-color: rgba(100,116,139,0.3); }
.tk-btn--edit   { background: rgba(15,32,64,0.5);   color: rgba(255,255,255,0.6); border-color: var(--navy-border,#1A2F50); }
.tk-btn--edit:hover   { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.25); }
.tk-btn--report { background: rgba(15,32,64,0.5);   color: rgba(255,255,255,0.6); border-color: var(--navy-border,#1A2F50); }
.tk-btn--report:hover { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.25); }
.tk-btn--open   { background: rgba(15,32,64,0.5);   color: var(--gold-muted,#8B7240); border-color: var(--navy-border,#1A2F50); }
.tk-btn--open:hover   { color: var(--gold,#C9A96E); }

/* ── Popover Reporter ────────────────────────────────────────────────────────── */

.tk-reporter-pop {
  position: absolute;
  z-index: 1400;
  background: var(--navy-card, #111F38);
  border: 1px solid var(--navy-border, #1A2F50);
  border-radius: 8px;
  padding: 0.4rem;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.tk-reporter-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.tk-reporter-opt:hover { background: rgba(201, 169, 110, 0.1); color: #e2e8f0; }

.tk-reporter-date { font-size: 0.7rem; color: var(--text-muted, #7A7570); }

.tk-reporter-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  border-top: 1px solid var(--navy-border, #1A2F50);
  margin-top: 0.25rem;
}

.tk-reporter-input {
  background: rgba(10, 22, 40, 0.5);
  border: 1px solid var(--navy-border, #1A2F50);
  border-radius: 4px;
  color: #e2e8f0;
  font-size: 0.75rem;
  padding: 0.25rem;
  cursor: pointer;
}
.tk-reporter-input:focus { outline: none; border-color: var(--gold-muted, #8B7240); }

/* ── Chronologie client dans la fiche ────────────────────────────────────────── */

.tk-client-section {
  padding: 1rem;
}

.tk-client-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.tk-client-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold, #C9A96E);
}

.tk-client-add {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold, #C9A96E);
  background: none;
  border: 1px solid rgba(201, 169, 110, 0.3);
  border-radius: 4px;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.tk-client-add:hover { border-color: var(--gold, #C9A96E); }

.tk-timeline { display: flex; flex-direction: column; gap: 0.125rem; }

.tk-tl-group { margin-bottom: 0.5rem; }

.tk-tl-date {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted, #7A7570);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  padding-left: 0.25rem;
}

.tk-tl-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 0.8125rem;
}
.tk-tl-item:hover { background: rgba(201, 169, 110, 0.06); }

.tk-tl-check { font-size: 0.875rem; width: 1rem; flex-shrink: 0; }
.tk-tl-item--done   .tk-tl-check { color: #16a34a; }
.tk-tl-item--pending .tk-tl-check { color: var(--text-muted, #7A7570); }

.tk-tl-action { flex: 1; }
.tk-tl-item--done    .tk-tl-action { text-decoration: line-through; color: var(--text-muted, #7A7570); }
.tk-tl-item--pending .tk-tl-action { color: #cbd5e1; }

.tk-tl-badge-urgent {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
  white-space: nowrap;
}

.tk-timeline-empty {
  font-size: 0.8125rem;
  color: var(--text-muted, #7A7570);
  padding: 1rem;
  text-align: center;
}

/* ── Modale de tâche (z-index au-dessus du sheet 1100 et modales 1200) ────────── */

#ck-modal-task { z-index: 1300; }

.tk-modal-desc {
  resize: vertical;
  min-height: 3rem;
}

.tk-priority-radios {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tk-prio-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  border: 1px solid var(--navy-border, #1A2F50);
  transition: border-color 0.15s;
}
.tk-prio-label:hover { border-color: var(--gold-muted, #8B7240); }
.tk-prio-label input { display: none; }
.tk-prio-label:has(input:checked) { border-color: var(--gold, #C9A96E); color: #e2e8f0; }

.tk-prio-label--urgent:has(input:checked)  { border-color: #ef4444; }
.tk-prio-label--haute:has(input:checked)   { border-color: #f97316; }
.tk-prio-label--normale:has(input:checked) { border-color: var(--gold, #C9A96E); }
.tk-prio-label--faible:has(input:checked)  { border-color: #94a3b8; }

/* ── Focus Mode ──────────────────────────────────────────────────────────────── */

.tk-focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(10, 22, 40, 0.97);
  display: none;
  align-items: center;
  justify-content: center;
}

.tk-focus-inner {
  width: 100%;
  max-width: 560px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.tk-focus-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.tk-focus-counter {
  font-size: 0.875rem;
  color: var(--text-muted, #7A7570);
  font-weight: 600;
}

.tk-focus-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: color 0.15s;
}
.tk-focus-close:hover { color: rgba(255, 255, 255, 0.85); }

.tk-focus-card {
  background: var(--navy-card, #111F38);
  border: 1px solid var(--navy-border, #1A2F50);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.tk-focus-client {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0 0 0.25rem;
}

.tk-focus-bank {
  font-size: 0.8125rem;
  color: var(--gold-muted, #8B7240);
  margin: 0 0 0.5rem;
}

.tk-focus-action {
  font-size: 1.25rem;
  color: var(--gold, #C9A96E);
  font-weight: 600;
  margin: 0.5rem 0;
}

.tk-focus-meta {
  font-size: 0.875rem;
  color: var(--text-muted, #7A7570);
  margin: 0.5rem 0 1rem;
}

.tk-focus-prio { font-weight: 600; }
.tk-focus-prio--urgent  { color: #f87171; }
.tk-focus-prio--haute   { color: #fb923c; }
.tk-focus-prio--normale { color: var(--gold, #C9A96E); }
.tk-focus-prio--faible  { color: #94a3b8; }

.tk-focus-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tk-focus-link {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.tk-focus-link:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.9); }

.tk-focus-btns {
  display: flex;
  gap: 0.625rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.tk-focus-btn {
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.65rem 1.25rem;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.tk-focus-btn:hover { transform: translateY(-1px); }

.tk-focus-btn--start  { background: rgba(201,169,110,0.2); color: var(--gold,#C9A96E); border-color: rgba(201,169,110,0.4); }
.tk-focus-btn--done   { background: var(--gold,#C9A96E); color: var(--navy,#0A1628); }
.tk-focus-btn--done:hover { background: var(--gold-light,#DFC090); }
.tk-focus-btn--report { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.12); }
.tk-focus-btn--skip   { background: transparent; color: rgba(255,255,255,0.4); border-color: rgba(255,255,255,0.08); }
.tk-focus-btn--skip:hover { color: rgba(255,255,255,0.7); }

.tk-focus-progress-bar {
  height: 3px;
  background: var(--navy-border, #1A2F50);
  border-radius: 2px;
  overflow: hidden;
}

.tk-focus-progress-fill {
  height: 100%;
  background: var(--gold, #C9A96E);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Écran de fin */
.tk-focus-end {
  text-align: center;
  padding: 2rem;
}
.tk-focus-end-icon  { font-size: 4rem; margin-bottom: 1rem; }
.tk-focus-end-title { font-family: var(--font-serif,'Playfair Display',Georgia,serif); font-size: 1.75rem; color: var(--gold,#C9A96E); margin: 0 0 0.5rem; }
.tk-focus-end-sub   { color: rgba(255,255,255,0.6); margin: 0 0 0.75rem; }
.tk-focus-end-stats { font-size: 0.875rem; color: var(--gold-muted,#8B7240); margin: 0 0 1.5rem; }
.tk-focus-end-close { display: inline-block; margin: 0 auto; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .tk-dashboard-row { flex-direction: column; }
  .tk-secondary-row { }
}

@media (max-width: 640px) {
  .tk-dashboard { padding: 1rem; gap: 1rem; }
  .tk-top3-card { flex-direction: column; align-items: flex-start; }
  .tk-top3-sep  { width: 100%; height: 1px; }
  .tk-secondary-row { flex-direction: column; }
  .tk-counters { gap: 0.35rem; }
  .tk-counter  { min-width: 55px; }
  .tk-donut-card { flex-direction: row; align-items: center; gap: 1rem; }
  .tk-donut-wrap { width: 90px; height: 90px; }
  .tk-donut-svg  { width: 90px; height: 90px; }
  .tk-focus-inner { padding: 1rem; }
  .tk-focus-card  { padding: 1.25rem; }
  .tk-focus-client { font-size: 1.25rem; }
  .tk-focus-action { font-size: 1rem; }
}

/* ─── ÉTAPE 8 — Productivité avancée ─────────────────────────────────────────
   Drag & Drop · Multi-sélection · Recherche · Raccourcis · Animations
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Recherche instantanée ───────────────────────────────────────────────────── */

.tk-filter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.tk-filter-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tk-search-wrap {
  display: flex;
  align-items: center;
  background: rgba(10, 22, 40, 0.5);
  border: 1px solid var(--navy-border, #1A2F50);
  border-radius: 20px;
  padding: 0.25rem 0.75rem;
  gap: 0.35rem;
  transition: border-color 0.15s;
}
.tk-search-wrap:focus-within { border-color: var(--gold-muted, #8B7240); }

.tk-search-icon { font-size: 0.75rem; color: var(--text-muted, #7A7570); }

.tk-search-input {
  background: none;
  border: none;
  color: #e2e8f0;
  font-size: 0.8125rem;
  width: 160px;
  outline: none;
}
.tk-search-input::placeholder { color: var(--text-muted, #7A7570); }

/* ── Bouton mode sélection ───────────────────────────────────────────────────── */

.tk-select-mode-btn {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(10, 22, 40, 0.4);
  border: 1px solid var(--navy-border, #1A2F50);
  border-radius: 20px;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s;
  white-space: nowrap;
}
.tk-select-mode-btn:hover { border-color: var(--gold-muted, #8B7240); color: #e2e8f0; }
.tk-select-mode-btn--active {
  background: rgba(201, 169, 110, 0.12);
  border-color: var(--gold, #C9A96E);
  color: var(--gold, #C9A96E);
}

.tk-select-count {
  background: var(--gold, #C9A96E);
  color: var(--navy, #0A1628);
  border-radius: 10px;
  padding: 0 0.4rem;
  font-size: 0.6875rem;
  font-weight: 700;
  min-width: 1.25rem;
  text-align: center;
}

/* ── Carte sélectionnée ──────────────────────────────────────────────────────── */

.tk-card-checkbox {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--gold, #C9A96E);
  flex-shrink: 0;
}

.tk-card--selected {
  background: rgba(201, 169, 110, 0.08) !important;
  border-color: var(--gold-muted, #8B7240) !important;
  outline: 1px solid rgba(201, 169, 110, 0.3);
}

/* ── Barre d'actions groupées ────────────────────────────────────────────────── */

.tk-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  background: rgba(201, 169, 110, 0.1);
  border: 1px solid rgba(201, 169, 110, 0.3);
  border-radius: 7px;
  padding: 0.625rem 1rem;
  margin-bottom: 0.5rem;
  animation: tk-slide-down 0.15s ease;
}

.tk-bulk-count {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gold, #C9A96E);
  white-space: nowrap;
}

.tk-bulk-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.tk-bulk-btn {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  border: 1px solid var(--navy-border, #1A2F50);
  background: rgba(10, 22, 40, 0.5);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.tk-bulk-btn:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }
.tk-bulk-btn--done { color: #4ade80; border-color: rgba(45,106,79,0.4); }
.tk-bulk-btn--del  { color: #f87171; border-color: rgba(239,68,68,0.3); }
.tk-bulk-btn--clear { color: var(--text-muted, #7A7570); }

.tk-bulk-prio {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--navy-border, #1A2F50);
  background: rgba(10, 22, 40, 0.5);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.tk-bulk-prio:focus { outline: none; border-color: var(--gold-muted, #8B7240); }

/* ── Drag & Drop ─────────────────────────────────────────────────────────────── */

.tk-drop-zones {
  display: none; /* caché par défaut */
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  animation: tk-slide-down 0.15s ease;
}

/* S'affiche uniquement pendant un glissement actif */
.tk-dragging .tk-drop-zones { display: flex; }

.tk-drop-zone {
  flex: 1;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(10, 22, 40, 0.4);
  border: 2px dashed var(--navy-border, #1A2F50);
  border-radius: 7px;
  cursor: copy;
  transition: all 0.15s;
  user-select: none;
}

.tk-drop-zone--hover,
.tk-drop-zone:hover {
  border-color: var(--gold, #C9A96E);
  background: rgba(201, 169, 110, 0.1);
  color: var(--gold, #C9A96E);
  transform: scale(1.02);
}

/* Carte en cours de glissement */
.tk-card--dragging {
  opacity: 0.4;
  transform: scale(0.98);
}

/* ── Animations cartes ───────────────────────────────────────────────────────── */

@keyframes tk-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

.tk-card {
  animation: tk-card-appear 0.18s ease;
}

/* ── État vide amélioré ──────────────────────────────────────────────────────── */

.tk-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  color: var(--text-muted, #7A7570);
  font-size: 0.875rem;
  padding: 2rem;
}

.tk-empty-clear {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold-muted, #8B7240);
  background: none;
  border: 1px solid rgba(201, 169, 110, 0.3);
  border-radius: 4px;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.tk-empty-clear:hover { border-color: var(--gold, #C9A96E); color: var(--gold, #C9A96E); }

/* ── Optimisations hover/focus ───────────────────────────────────────────────── */

.tk-card:focus-within {
  outline: 1px solid rgba(201, 169, 110, 0.25);
  outline-offset: 1px;
}

.tk-btn:focus-visible {
  outline: 2px solid var(--gold, #C9A96E);
  outline-offset: 2px;
}

.tk-filter-btn:focus-visible,
.tk-counter:focus-visible {
  outline: 2px solid var(--gold-muted, #8B7240);
  outline-offset: 2px;
}

/* ── Responsive ajustements étape 8 ─────────────────────────────────────────── */

@media (max-width: 640px) {
  .tk-filter-top { flex-direction: column; align-items: flex-start; }
  .tk-search-input { width: 120px; }
  .tk-drop-zone { min-height: 44px; font-size: 0.75rem; }
  .tk-bulk-bar { flex-direction: column; align-items: flex-start; }
}