/* ═══════════════════════════════════════════════════════════
   dashboard.css — Styles page Dashboard (crystal, 3 colonnes)
   ═══════════════════════════════════════════════════════════ */

/* ── Greeting ── */
.greeting { margin-bottom: var(--space-5); }
.greeting__title { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.greeting__sub   { color: var(--color-text-2); font-size: var(--text-sm); margin-top: 2px; }

/* ── Stat cards ── */
.stat-card {
  background: var(--gradient-card);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); }

.stat-card__icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-bold); font-size: 14px;
  flex-shrink: 0;
}
.stat-card--purple .stat-card__icon { background: var(--color-purple-dim); color: var(--color-purple); }
.stat-card--teal   .stat-card__icon { background: var(--color-teal-dim);   color: var(--color-teal); }
.stat-card--orange .stat-card__icon { background: var(--color-orange-dim); color: var(--color-orange); }
.stat-card--red    .stat-card__icon { background: var(--color-red-dim);    color: var(--color-red); }

.stat-card__number {
  display: block; font-size: 24px;
  font-weight: var(--weight-black); line-height: 1;
}
.stat-card__label {
  display: block; font-size: var(--text-xs);
  color: var(--color-muted); margin-top: 2px;
}

/* ── Projets ── */
.project-list { display: flex; flex-direction: column; gap: var(--space-4); }

.project-item__top {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 6px;
}
.project-item__info { display: flex; align-items: center; gap: var(--space-2); }
.project-item__name { font-size: var(--text-sm); font-weight: var(--weight-semi); }
.project-item__sub  { font-size: var(--text-xs); color: var(--color-muted); margin-top: 1px; }
.project-item__pct  { font-size: var(--text-xs); color: var(--color-muted); text-align: right; margin-top: 3px; }

/* ── Tâches ── */
.tasks-meta {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.task-list { display: flex; flex-direction: column; gap: 2px; }

.task-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 8px var(--space-2);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.task-check-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.task-check { display: none; }
.task-check-box {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1px solid var(--color-border);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}
.task-check-box svg { opacity: 0; transition: opacity .1s; }
.task-check:checked + .task-check-box {
  background: var(--color-purple);
  border-color: var(--color-purple);
}
.task-check:checked + .task-check-box svg { opacity: 1; }

.task-item--done .task-item__label {
  color: var(--color-muted);
  text-decoration: line-through;
}
.task-item:hover { background: var(--color-bg-hover); }

.task-item__body { flex: 1; min-width: 0; }
.task-item__label {
  font-size: var(--text-sm);
  cursor: pointer;
  display: block;
  transition: color var(--transition-fast);
}
.task-check:checked ~ .task-item__body .task-item__label {
  color: var(--color-muted);
  text-decoration: line-through;
}
.task-item__project { font-size: 11px; color: var(--color-muted); margin-top: 1px; }

/* ── Agenda ── */
.week-strip {
  display: flex; justify-content: space-between;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border-2);
  /* border-bottom: 1px solid var(--color-border-2); */
  /* margin-bottom: var(--space-4); */
}
.week-strip__day {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px; flex: 1;
}
.week-strip__name { font-size: 10px; color: var(--color-muted); font-weight: var(--weight-medium); }
.week-strip__num  {
  font-size: var(--text-sm); font-weight: var(--weight-semi);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--color-text-2);
}
.week-strip__num--today { background: var(--gradient-purple); color: #fff; }

.event-list { display: flex; flex-direction: column; gap: 0; }

.event-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 6px var(--space-1);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.event-item:hover { background: var(--color-bg-hover); }
.event-item {
  border-top: 1px solid var(--color-border-2);
}

.event-item__time {
  font-size: var(--text-xs);
  color: var(--color-muted);
  width: 30px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
  line-height: 1.3;
}

.event-item__body {
  flex: 1;
  min-width: 0;
}

.event-item__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.event-item__sub {
  font-size: 11px;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* ── Documents (bas, pleine largeur) ── */
.doc-list {
  display: grid;
  
  gap: var(--space-3);
}

.doc-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-card-2);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.doc-item:hover { border-color: rgba(167,139,250,.3); background: var(--color-bg-card); }

.doc-item__info { flex: 1; min-width: 0; }
.doc-item__name { font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-item__meta { font-size: var(--text-xs); color: var(--color-muted); margin-top: 2px; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .doc-grid   { grid-template-columns: 1fr 1fr; }
  .stat-card__number { font-size: 20px; }
}
@media (max-width: 480px) {
  .doc-list { grid-template-columns: 1fr; }
  .greeting__title { font-size: var(--text-xl); }
}

/* ── Doc list (vertical, colonne droite) ── */
.doc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── Docs récents (compact, col 3) ── */
.doc-list-compact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.doc-list-compact .doc-item {
  padding: var(--space-2) var(--space-3);
}
.doc-item__date {
  font-size: 10px;
  color: var(--color-muted);
  margin-top: 2px;
}

/* ── Documents importants (bas, pleine largeur) ── */
.docs-important-card {
  margin-top: var(--space-4);
}
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

/* ── Formulaire ajout tâche ── */
.add-task-form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-2);
}

.add-task-input {
  flex: 1;
  background: var(--color-bg-card-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  padding: 7px var(--space-3);
  transition: border-color var(--transition-fast);
}
.add-task-input::placeholder { color: var(--color-muted); }
.add-task-input:focus { border-color: var(--color-purple); outline: none; }

.add-task-select {
  background: var(--color-bg-card-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-2);
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  padding: 7px var(--space-2);
  cursor: pointer;
  max-width: 130px;
}
.add-task-select:focus { border-color: var(--color-purple); outline: none; }

.add-task-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-purple);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.add-task-btn:hover   { opacity: 0.85; transform: scale(1.05); }
.add-task-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ── Bouton supprimer tâche ── */
.task-delete {
  opacity: 0;
  color: var(--color-muted);
  font-size: 18px;
  line-height: 1;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.task-item:hover .task-delete        { opacity: 1; }
.task-delete:hover                    { color: var(--color-red); background: var(--color-red-dim); }

/* ── Navigation semaine ── */
.week-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.week-nav-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.week-nav__btn {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: rgba(167,139,250,.15);
  border: 1px solid rgba(167,139,250,.35);
  color: var(--color-purple);
  font-size: 18px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
}
.week-nav__btn:hover { background: var(--color-purple); color: #fff; border-color: var(--color-purple); }

.week-nav__label {
  flex: 1;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  color: var(--color-text-2);
  text-align: center;
  letter-spacing: 0.03em;
}

/* Aligne le dot avec la première ligne du texte */
.event-item .dot { margin-top: 4px; }


/* ══════════════════════════════════════════════
   Dashboard — hauteur fixe, scroll par colonne
   ══════════════════════════════════════════════ */

html:has(.content-grid),
body:has(.content-grid) {
  overflow: hidden;
  height: 100%;
}

body:has(.content-grid) {
  display: flex;
  flex-direction: column;
}

body:has(.content-grid) .main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);

  scrollbar-width: thin;
  scrollbar-color: rgba(167,139,250,.4) transparent;
}
body:has(.content-grid) .main::-webkit-scrollbar       { width: 5px; }
body:has(.content-grid) .main::-webkit-scrollbar-track { background: transparent; }
body:has(.content-grid) .main::-webkit-scrollbar-thumb { background: rgba(167,139,250,.4); border-radius: 3px; }

/* Stats : hauteur fixe */
body:has(.content-grid) .stats-grid {
  flex-shrink: 0;
}

/* Grille 3 colonnes : prend l'espace restant */
body:has(.content-grid) .content-grid {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* Chaque colonne scroll indépendamment */
body:has(.content-grid) .col {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-right: 4px;
  /* padding-bottom: var(--space-6); */

  scrollbar-width: thin;
  scrollbar-color: rgba(167,139,250,.4) transparent;
}
body:has(.content-grid) .col::-webkit-scrollbar       { width: 5px; }
body:has(.content-grid) .col::-webkit-scrollbar-track { background: transparent; }
body:has(.content-grid) .col::-webkit-scrollbar-thumb {
  background: rgba(167,139,250,.4);
  border-radius: 3px;
}
body:has(.content-grid) .col::-webkit-scrollbar-thumb:hover {
  background: rgba(167,139,250,.7);
}

/* Bottom grid (docs importants) dans la col gauche — scroll avec elle */
body:has(.content-grid) .bottom-grid,
body:has(.content-grid) .docs-important-card {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  html:has(.content-grid),
  body:has(.content-grid) { overflow: auto; height: auto; }
  body:has(.content-grid) .main { overflow: visible; flex: none; }
  body:has(.content-grid) .content-grid { flex: none; }
  body:has(.content-grid) .col { overflow: visible; }
}


/* ── Ligne du bas (docs) ── */
body:has(.content-grid) .bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  flex-shrink: 0;
  margin-top: 0;
}

/* Cards sans scroll (docs récents, docs importants) */
body:has(.content-grid) .card--no-scroll {
  overflow: visible !important;
  flex: none !important;
}
body:has(.content-grid) .card--no-scroll .card-header {
  position: static !important;
}

@media (max-width: 900px) {
  body:has(.content-grid) .bottom-row {
    grid-template-columns: 1fr;
  }
}


/* Docs importants : 4 colonnes fixes de largeur égale */
body:has(.content-grid) .card--no-scroll .doc-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}
body:has(.content-grid) .card--no-scroll .doc-item {
  padding: var(--space-2) var(--space-3);
  min-width: 0;
  overflow: hidden;
}
body:has(.content-grid) .card--no-scroll .doc-item__info {
  min-width: 0;
  overflow: hidden;
}
body:has(.content-grid) .card--no-scroll .doc-item__name {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
body:has(.content-grid) .card--no-scroll .doc-item__meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── Jour sélectionné dans la bande semaine ── */
.week-strip__day--selected .week-strip__num {
  background: rgba(167,139,250,.3);
  color: var(--color-purple);
  border-radius: 50%;
}
.week-strip__day:hover .week-strip__num {
  background: rgba(255,255,255,.08);
  border-radius: 50%;
}



/* ══ Col droite : scroll global ══ */
body:has(.content-grid) .col--right {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(167,139,250,.4) transparent;
}
body:has(.content-grid) .col--right::-webkit-scrollbar { width: 4px; }
body:has(.content-grid) .col--right::-webkit-scrollbar-thumb {
  background: rgba(167,139,250,.4); border-radius: 2px;
}
body:has(.content-grid) .col--right .card--agenda {
  flex: 0 0 auto;
  overflow: visible;
}
body:has(.content-grid) .col--right .quick-access-card {
  flex: 0 0 auto;
  overflow: visible;
}

/* ── Mini calendrier mensuel dashboard ── */
.mini-cal { overflow: hidden; }

.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: var(--space-2);
}
.mini-cal-head {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  padding: 2px 0 4px;
}
.mini-cal-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  min-width: 0;
  padding: 0;
}
.mini-cal-cell:hover { background: rgba(255,255,255,.06); }
.mini-cal-cell--empty { cursor: default; }
.mini-cal-cell--today .mini-cal-day {
  background: var(--color-purple);
  color: #fff;
  border-radius: 50%;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.mini-cal-cell--selected { background: rgba(167,139,250,.15); }
.mini-cal-cell--selected .mini-cal-day { color: var(--color-purple); font-weight: 700; }
.mini-cal-day {
  font-size: 11px;
  color: var(--color-text-2);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
}
.mini-cal-dots {
  display: flex;
  gap: 2px;
  margin-top: 2px;
  justify-content: center;
}
.mini-cal-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}