/* ==========================================================================
   Maquette d'interface Goteck — partagée par les trois versions.
   Palette de l'appli réelle (CSS du login) : indigo #4316E2, lavande #F8F6FF,
   gris Tailwind. Police Figtree. Tout est AA sur son fond, même dans la maquette.
   ========================================================================== */

.ui, .ui-carte {
  --ui-encre: #111827;
  --ui-corps: #374151;
  --ui-sec: #6B7280;
  --ui-filet: #E5E7EB;
  --ui-filet-2: #F3F4F6;
  --ui-lavande: #F8F6FF;
  --ui-lavande-2: #EEEAFE;
  --ui-indigo: #4316E2;
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ui-encre);
  background: #fff;
  text-align: left;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.ui svg, .ui-carte svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ui b, .ui-carte b { font-weight: 600; }
.ui i, .ui-carte i { font-style: normal; }

/* ---------- l'application : barre latérale + agenda de la semaine ---------- */
.ui--app {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  border: 1px solid var(--ui-filet);
  border-radius: 18px;
  overflow: hidden;
  min-height: 540px;
}
.ui__side {
  background: var(--ui-lavande);
  border-right: 1px solid var(--ui-filet);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 18px;
}
.ui__logo { display: flex; align-items: center; gap: 9px; padding: 2px 6px; font-weight: 700; letter-spacing: .04em; font-size: 14px; color: var(--ui-indigo); }
.ui__logo svg { width: 24px; height: 24px; stroke: none; }
.ui__nav { display: flex; flex-direction: column; gap: 2px; }
.ui__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ui-corps); font-weight: 500; }
.ui__item svg { width: 17px; height: 17px; color: var(--ui-sec); }
.ui__item.est-actif { background: var(--ui-indigo); color: #fff; }
.ui__item.est-actif svg { color: #fff; }
.ui__espace { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px 6px 0; border-top: 1px solid var(--ui-filet); padding-top: 14px; }
.ui__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ui-lavande-2); color: #2E1A9E; display: grid; place-items: center; font-weight: 600; flex: none; }
.ui__espace-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ui__espace-txt b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui__espace-txt small { font-size: 11.5px; color: var(--ui-sec); }

.ui__main { display: flex; flex-direction: column; min-width: 0; }
.ui__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ui-filet); }
.ui__titre { display: flex; align-items: baseline; gap: 10px; }
.ui__titre b { font-size: 15px; }
.ui__titre span { color: var(--ui-sec); }
.ui__outils { display: flex; align-items: center; gap: 8px; }
.ui__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--ui-filet); border-radius: 8px; color: var(--ui-corps); font-weight: 500; white-space: nowrap; }
.ui__chip svg { width: 14px; height: 14px; color: var(--ui-sec); }
.ui__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; background: var(--ui-indigo); color: #fff; font-weight: 600; white-space: nowrap; }
.ui__btn svg { width: 14px; height: 14px; }

.ui__semaine {
  --ligne: 22px;               /* une demi-heure */
  display: grid;
  grid-template-columns: 48px repeat(5, minmax(0, 1fr));
  flex: 1;
  padding: 0 12px 14px 0;
  min-width: 0;
}
.ui__heures { display: grid; grid-template-rows: repeat(10, calc(var(--ligne) * 2)); padding-top: 42px; }
.ui__heures span { font-size: 11px; color: var(--ui-sec); text-align: right; padding-right: 8px; transform: translateY(-.55em); }
.ui__jour { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--ui-filet-2); }
.ui__jour-tete { display: flex; align-items: baseline; gap: 6px; height: 42px; padding: 12px 10px 0; }
.ui__jour-tete b { font-size: 12px; color: var(--ui-sec); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.ui__jour-tete span { font-size: 15px; font-weight: 600; }
.ui__jour.est-aujourdhui { background: var(--ui-lavande); }
.ui__jour.est-aujourdhui .ui__jour-tete span { background: var(--ui-indigo); color: #fff; border-radius: 999px; min-width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0 7px; }
.ui__grille {
  display: grid;
  grid-template-rows: repeat(20, var(--ligne));
  grid-template-columns: 1fr;
  padding: 0 5px;
  background-image: repeating-linear-gradient(to bottom, var(--ui-filet-2) 0 1px, transparent 1px calc(var(--ligne) * 2));
}

/* un événement : --d = demi-heures après 07:00, --l = durée en demi-heures */
.ev {
  grid-column: 1;
  grid-row: calc(var(--d) + 1) / span var(--l);
  margin: 1px 0;
  padding: 5px 8px;
  border-radius: 7px;
  border-left: 3px solid;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  line-height: 1.25;
  min-height: 0;
}
.ev b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev i { font-size: 11.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev--indigo { background: #EEEAFE; border-color: #4316E2; color: #2E1A9E; }
.ev--vert   { background: #DCFCE7; border-color: #16A34A; color: #14532D; }
.ev--ambre  { background: #FEF3C7; border-color: #D97706; color: #78350F; }

/* ---------- les cartes détachées ---------- */
.ui-carte {
  width: 236px;
  padding: 14px 16px 15px;
  border: 1px solid var(--ui-filet);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 12px 32px rgba(67,22,226,.08);
}
.ui-carte p { margin: 0; }
.ui-carte__sur { font-size: 12px; color: var(--ui-sec); font-weight: 500; }
.ui-carte__val { font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin-top: 2px !important; line-height: 1.15; }
.ui-carte__ligne { color: var(--ui-corps); margin-top: 4px !important; }
.ui-carte__liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ui-carte__liste li { display: flex; gap: 8px; align-items: baseline; color: var(--ui-corps); font-size: 12.5px; }
.ui-carte__liste time { color: var(--ui-sec); font-variant-numeric: tabular-nums; flex: none; width: 36px; }
.ui-carte__liste span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-carte__etat { display: flex; gap: 6px; margin-top: 10px !important; flex-wrap: wrap; }
.ui-carte__barres { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-top: 12px; }
.ui-carte__barres i { flex: 1; height: calc(var(--h) * 100%); background: var(--ui-lavande-2); border-radius: 4px 4px 2px 2px; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.ui-carte__barres i:nth-child(4) { background: var(--ui-indigo); }
.ui-carte__barres i span { position: absolute; top: 100%; margin-top: 4px; font-size: 10.5px; color: var(--ui-sec); }
.ui-carte__barres { margin-bottom: 16px; }

.ui-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--ui-filet-2); color: var(--ui-corps); }
.ui-pill svg { width: 12px; height: 12px; stroke-width: 2.25; }
.ui-pill--vert { background: #DCFCE7; color: #14532D; }
.ui-pill--indigo { background: #EEEAFE; color: #2E1A9E; }

/* ---------- les fragments des cases « Fonctions » ---------- */
.ui--frag { border: 1px solid var(--ui-filet); border-radius: 14px 14px 0 0; border-bottom: 0; padding: 14px 16px 0; width: 100%; overflow: hidden; }

/* agenda compact : 3 jours */
.ui-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; --ligne: 13px; }
.ui-mini__jour { display: grid; grid-template-rows: 30px repeat(20, var(--ligne)); border-radius: 8px; padding: 0 4px; background-image: linear-gradient(to bottom, transparent 30px, var(--ui-filet-2) 30px, var(--ui-filet-2) 31px, transparent 31px); }
.ui-mini__jour.est-aujourdhui { background-color: var(--ui-lavande); }
.ui-mini__tete { grid-row: 1; display: flex; align-items: center; gap: 5px; padding: 0 4px; }
.ui-mini__tete b { font-size: 11px; color: var(--ui-sec); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.ui-mini__tete span { font-size: 13px; font-weight: 600; }
.ui-mini__jour.est-aujourdhui .ui-mini__tete span { background: var(--ui-indigo); color: #fff; border-radius: 999px; width: 24px; height: 24px; display: inline-grid; place-items: center; font-size: 11.5px; }
.ui-mini .ev { grid-row: calc(var(--d) + 2) / span var(--l); padding: 4px 6px; border-radius: 6px; }
.ui-mini .ev b { font-size: 11px; }
.ui-mini .ev i { font-size: 10.5px; }

/* dossier de chantier */
.ui-doss__tete { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--ui-filet); }
.ui-doss__tete svg { width: 18px; height: 18px; color: var(--ui-sec); }
.ui-doss__tete b { font-size: 13.5px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-doss__docs { list-style: none; margin: 0; padding: 6px 0 0; }
.ui-doss__docs li { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--ui-filet-2); color: var(--ui-corps); }
.ui-doss__docs li:last-child { border-bottom: 0; }
.ui-doss__docs svg { width: 16px; height: 16px; color: var(--ui-sec); }
.ui-doss__docs span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-doss__docs em { font-style: normal; color: var(--ui-sec); font-size: 12px; }

/* clients */
.ui-clients { list-style: none; margin: 0; padding: 0; }
.ui-clients li { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--ui-filet-2); }
.ui-clients li:last-child { border-bottom: 0; }
.ui-clients__av { width: 32px; height: 32px; border-radius: 50%; background: var(--c); color: var(--t); display: grid; place-items: center; font-weight: 600; flex: none; }
.ui-clients__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ui-clients__txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-clients__txt small { font-size: 12px; color: var(--ui-sec); }

/* heures par collaborateur */
.ui-heures__tete { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--ui-filet); }
.ui-heures__tete span { color: var(--ui-sec); font-size: 12px; }
.ui-heures__ligne { display: grid; grid-template-columns: 30px 1fr 52px; align-items: center; gap: 10px; padding: 9px 0; }
.ui-heures__av { width: 30px; height: 30px; border-radius: 50%; background: var(--ui-lavande-2); color: #2E1A9E; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.ui-heures__ligne i { display: block; height: 8px; border-radius: 999px; background: var(--ui-filet-2); position: relative; overflow: hidden; }
.ui-heures__ligne i::after { content: ""; position: absolute; inset: 0; width: calc(var(--p) * 100%); background: var(--ui-indigo); border-radius: inherit; }
.ui-heures__ligne b { text-align: right; font-variant-numeric: tabular-nums; }

/* facture */
.ui-fact__tete { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--ui-filet); }
.ui-fact__tete span { color: var(--ui-sec); font-size: 12px; }
.ui-fact__ligne { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ui-filet-2); color: var(--ui-corps); }
.ui-fact__ligne span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-fact__ligne b { font-weight: 500; color: var(--ui-encre); font-variant-numeric: tabular-nums; }
.ui-fact__total { display: flex; justify-content: space-between; padding: 10px 0 4px; font-size: 14px; }
.ui-fact__total b { font-size: 16px; }
.ui-fact__etat { display: flex; gap: 6px; margin: 8px 0 0; padding-bottom: 6px; }

/* ---------- petits écrans ---------- */
@media (max-width: 900px) {
  .ui--app { grid-template-columns: 1fr; min-height: 0; }
  .ui__side { flex-direction: row; align-items: center; padding: 10px 12px; gap: 10px; border-right: 0; border-bottom: 1px solid var(--ui-filet); overflow: hidden; }
  .ui__nav { flex-direction: row; gap: 0; overflow: hidden; }
  .ui__item { padding: 7px 9px; font-size: 12px; }
  .ui__espace { display: none; }
  .ui__semaine { grid-template-columns: 40px repeat(3, minmax(0, 1fr)); --ligne: 18px; }
  .ui__jour:nth-child(2), .ui__jour:nth-child(3) { display: none; }
  .ui__outils .ui__chip:first-child { display: none; }
}
@media (max-width: 520px) {
  .ui__nav .ui__item:nth-child(n+4) { display: none; }
  .ui__logo span { display: none; }
  .ui__side { gap: 6px; }
  .ui__top { padding: 12px; }
  .ui__titre span { display: none; }
  .ui__semaine { padding-right: 8px; }
  .ui-carte { width: 210px; }
}