/* TV depot — projects-first layout. Fits a 75" TV without scrolling.
   Nothing is truncated except the project title (clamped to 3 lines).
   Time and travel are always shown in full on their own lines. */

:root {
  --bg: #0b0e14;
  --bg-2: #131822;
  --bg-3: #1c2230;
  --line: #2a3142;
  --text: #e6ebf5;
  --muted: #8a93a6;
  --accent: #5978ff;
  --warn: #ffb454;
  --ok: #4cd964;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ================== TOP BAR ================== */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4vh 1vw;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  height: 4.2vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7vw;
  font-weight: 700;
  font-size: 1.3vw;
  letter-spacing: 0.04em;
}

.brand-dot {
  width: 0.7vw;
  height: 0.7vw;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0.8vw var(--accent);
}

.meta {
  display: flex;
  align-items: center;
  gap: 1.2vw;
}

.clock {
  font-size: 1.6vw;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.updated {
  color: var(--muted);
  font-size: 0.85vw;
}

/* ================== GRID OF PROJECTS ================== */
.grid {
  flex: 1;
  display: grid;
  gap: 0.6vh 0.6vw;
  padding: 0.6vh 0.6vw;
  grid-template-columns: repeat(auto-fit, minmax(min(20vw, 340px), 1fr));
  grid-auto-rows: minmax(min-content, 1fr);
  overflow: hidden;
  align-content: start;
}

/* Mode bureau : scroll vertical activé, plus de contrainte de hauteur sur les lignes */
body.mode-desk { overflow: auto; }
body.mode-desk .grid {
  overflow: visible;
  grid-auto-rows: auto;
  grid-template-columns: repeat(auto-fit, minmax(min(22vw, 360px), 1fr));
}
body.mode-desk .card { min-height: 0; }
/* La barre de titre reste sticky en haut pendant le scroll */
body.mode-desk .topbar { position: sticky; top: 0; z-index: 10; }
body.mode-desk .footer { position: sticky; bottom: 0; z-index: 10; }

.loading, .empty {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 10vh;
  color: var(--muted);
  font-size: 2vw;
}

/* ================== PROJECT CARD ================== */
.card {
  background: var(--bg-2);
  border-radius: 0.5vw;
  border-left: 0.4vw solid var(--accent);
  padding: 0.6vh 0.8vw;
  display: flex;
  flex-direction: column;
  gap: 0.4vh;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

.card.is-active-today {
  background: linear-gradient(135deg, var(--bg-2) 0%, rgba(89, 120, 255, 0.18) 100%);
  box-shadow: 0 0 0 2px var(--accent);
}

/* ----- Card head: title + period + location ----- */
.card-head {
  display: flex;
  flex-direction: column;
  gap: 0.15vh;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.35vh;
}

.card-title {
  font-weight: 700;
  font-size: 0.95vw;
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: -0.5vh;        /* compact, on remonte le numéro pour alléger */
}

.card-num {
  color: var(--muted);
  font-size: 0.7vw;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.card-period {
  display: flex;
  align-items: center;
  gap: 0.35vw;
  font-size: 0.8vw;
  color: var(--accent);
  text-transform: capitalize;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.card.is-active-today .card-period {
  color: var(--warn);
}

.live-dot {
  display: none;
  width: 0.55vw;
  height: 0.55vw;
  background: var(--warn);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

.card.is-active-today .live-dot {
  display: inline-block;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.card-location {
  font-size: 0.72vw;
  color: var(--text);
  opacity: 0.85;
  display: flex;
  align-items: baseline;
  gap: 0.5vw;
  min-width: 0;
}

.card-loc-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* ----- Card: vehicles chips ----- */
.card-vehicles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35vw;
  margin-top: 0.4vh;
}
.veh-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25vw;
  padding: 0.2vh 0.45vw;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 0.35vw;
  font-size: 0.7vw;
  color: var(--text);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.veh-chip .veh-plate {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.62vw;
  margin-left: 0.15vw;
}
.grid.density-high  .veh-chip { font-size: 0.6vw; padding: 0.15vh 0.35vw; }
.grid.density-ultra .veh-chip { font-size: 0.55vw; padding: 0.1vh 0.3vw; }

/* ----- Card body: crew rows ----- */
.card-crew {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.crew-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45vw;
  line-height: 1.15;
  padding: 0.35vh 0;
  border-top: 1px solid var(--line);
}

.crew-empty {
  padding: 0.6vh 0 0.2vh;
  color: var(--muted, #8b94a6);
  font-style: italic;
  font-size: 0.85em;
  text-align: center;
  opacity: 0.75;
}

.crew-row:first-child {
  border-top: none;
  padding-top: 0.2vh;
}

.crew-row.is-leader .crew-name::before {
  content: "★ ";
  color: var(--warn);
}

.crew-avatar {
  width: 1.4vw;
  height: 1.4vw;
  min-width: 1.4vw;
  border-radius: 50%;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6vw;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--line);
  margin-top: 0.1vh;
}

.crew-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 0.15vh;
}

.crew-name {
  font-weight: 600;
  font-size: 0.78vw;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.crew-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1vh 0.5vw;
}

.crew-fn {
  color: var(--muted);
  font-size: 0.68vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}

.crew-time {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 0.72vw;
  white-space: nowrap;
  flex-shrink: 0;
}

.crew-travel {
  color: var(--muted);
  font-size: 0.68vw;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.card-travel {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.72vw;
}

/* ============== Density tiers (auto-applied by JS quand ça déborde) ============== */
.grid.density-high {
  grid-template-columns: repeat(auto-fit, minmax(min(17vw, 290px), 1fr));
}
.grid.density-high .card { padding: 0.45vh 0.65vw; gap: 0.25vh; }
.grid.density-high .card-title { font-size: 0.85vw; -webkit-line-clamp: 2; }
.grid.density-high .card-num { font-size: 0.62vw; }
.grid.density-high .card-period { font-size: 0.7vw; }
.grid.density-high .card-location { font-size: 0.62vw; }
.grid.density-high .crew-row { padding: 0.2vh 0; }
.grid.density-high .crew-name { font-size: 0.7vw; }
.grid.density-high .crew-time { font-size: 0.65vw; }
.grid.density-high .crew-fn { font-size: 0.6vw; }
.grid.density-high .card-travel { font-size: 0.65vw; }
.grid.density-high .crew-avatar { width: 1.2vw; height: 1.2vw; min-width: 1.2vw; font-size: 0.52vw; }

.grid.density-ultra {
  grid-template-columns: repeat(auto-fit, minmax(min(14vw, 240px), 1fr));
  gap: 0.4vh 0.4vw;
  padding: 0.4vh 0.4vw;
}
.grid.density-ultra .card { padding: 0.3vh 0.5vw; gap: 0.15vh; border-left-width: 0.3vw; }
.grid.density-ultra .card-title { font-size: 0.75vw; -webkit-line-clamp: 1; }
.grid.density-ultra .card-num { font-size: 0.55vw; }
.grid.density-ultra .card-period { font-size: 0.62vw; }
.grid.density-ultra .card-location { font-size: 0.55vw; }
.grid.density-ultra .crew-row { padding: 0.12vh 0; }
.grid.density-ultra .crew-name { font-size: 0.62vw; }
.grid.density-ultra .crew-time { font-size: 0.58vw; }
.grid.density-ultra .crew-fn { font-size: 0.52vw; }
.grid.density-ultra .card-travel { font-size: 0.58vw; }
.grid.density-ultra .crew-avatar { width: 1vw; height: 1vw; min-width: 1vw; font-size: 0.45vw; }

.grid.density-max {
  grid-template-columns: repeat(auto-fit, minmax(min(11vw, 195px), 1fr));
  gap: 0.3vh 0.3vw;
  padding: 0.3vh 0.3vw;
}
.grid.density-max .card { padding: 0.22vh 0.4vw; gap: 0.1vh; border-left-width: 0.25vw; border-radius: 0.35vw; }
.grid.density-max .card-title { font-size: 0.62vw; -webkit-line-clamp: 1; }
.grid.density-max .card-num { font-size: 0.5vw; }
.grid.density-max .card-period { font-size: 0.55vw; }
.grid.density-max .card-location { font-size: 0.5vw; }
.grid.density-max .crew-row { padding: 0.08vh 0; gap: 0.25vw; }
.grid.density-max .crew-name { font-size: 0.55vw; }
.grid.density-max .crew-time { font-size: 0.52vw; }
.grid.density-max .crew-fn { font-size: 0.48vw; }
.grid.density-max .card-travel { font-size: 0.52vw; }
.grid.density-max .crew-avatar { width: 0.85vw; height: 0.85vw; min-width: 0.85vw; font-size: 0.4vw; }
.grid.density-max .veh-chip { font-size: 0.48vw; padding: 0.08vh 0.25vw; }
.grid.density-max .card-vehicles { gap: 0.2vw; margin-top: 0.2vh; }

/* ================== FOOTER ================== */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4vh 1.2vw;
  background: var(--bg-2);
  color: var(--muted);
  font-size: 0.85vw;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  height: 3.5vh;
}

.status-pill {
  color: var(--ok);
}
.status-pill.error {
  color: #ff5d5d;
}

/* ================== RDV (rendez-vous agenda) ================== */
.card.card-rdv {
  background: linear-gradient(135deg, rgba(34,197,94,0.06), transparent 60%);
}
.rdv-badge {
  display: inline-block;
  background: #22c55e;
  color: #fff;
  font-size: 0.65em;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.15em 0.5em;
  border-radius: 0.3em;
  margin-right: 0.3em;
  vertical-align: middle;
}
.crew-row.rdv-crew .crew-avatar {
  background: #22c55e;
  color: #fff;
}