/* ironmansuivi/assets/app.css */
:root{
  --font: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --bg:#ffffff;
  --text:#0b1220;
  --muted:#5b6473;
  --border:#d7dde6;
  --line:#cfd6e2;

  --top-h:140px;

  --drawer-w: min(25vw, 420px);
  --drawer-min: 280px;

  --run: #fde68a;
  --bike:#bbf7d0;
  --swim:#bae6fd;
  --strength:#e9d5ff;
  --football:#fecdd3;
  --race:#ffd6a5;
  --rest:#e5e7eb;
}

*{box-sizing:border-box;}
html,body{height:100%;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
}

/* Top fixed header */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  display:grid;
  grid-template-columns: 1fr auto;
  grid-auto-rows:auto;
  align-items:start;
  gap:10px;
  border-bottom:1px solid var(--border);
  background:#fff;
  padding:12px 12px;
  z-index:50;
}
@media (max-width: 740px){
  .topbar{ grid-template-columns: 1fr; }
  .topRight{ justify-content:flex-start; }
}

.topLeft{min-width:0; flex:1;}
.title{font-weight:900; font-size:18px; letter-spacing:.1px;}
.pills{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.pill{
  border:1px solid var(--border);
  padding:8px 10px;
  font-size:12px;
  color:var(--muted);
  background:#fff;
}
.topRight{
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:flex-end;
  flex-wrap:wrap;
  padding-top:2px;
}
.btn,.linkBtn,.iconBtn{
  border:1px solid var(--border);
  background:#fff;
  padding:10px 12px;
  font-size:13px;
  cursor:pointer;
  color:var(--text);
  text-decoration:none;
  line-height:1;
}
.btnPrimary{background:#2563eb; border-color:#2563eb; color:#fff;}
.privateBadge{
  font-size:11px; font-weight:900;
  padding:8px 10px;
  border:1px solid #2563eb;
  color:#2563eb;
  background:rgba(37,99,235,.07);
}

/* Layout */
.layout{position:fixed; inset:var(--top-h) 0 0 0;}
.calendarPane{
  position:absolute; inset:0;
  overflow:auto;
  overscroll-behavior:contain;
}
body.drawerOpen .calendarPane{
  right: max(var(--drawer-min), var(--drawer-w));
}

/* Sticky grid header */
.gridHeader{
  position:sticky;
  top:0;
  z-index:10;
  display:grid;
  grid-template-columns: 240px repeat(7, 1fr) 96px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.gridHeader > div{
  border-right:1px solid var(--line);
  padding:10px 8px;
  font-size:12px;
  font-weight:900;
  color:var(--muted);
  letter-spacing:.08em;
}
.gridHeader > div:last-child{border-right:none;}

.weekRow{
  display:grid;
  grid-template-columns: 240px repeat(7, 1fr) 96px;
  border-bottom:1px solid var(--line);
}
.weekRow > *{border-right:1px solid var(--line);}
.weekRow > *:last-child{border-right:none;}

/* Merged week cell */
.weekInfo{
  padding:10px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.weekNo{font-size:22px; font-weight:900; line-height:1;}
.weekDates{font-size:12px; font-weight:800; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.weekHoursMobile{display:none; font-size:12px; font-weight:900; color:var(--muted);}

.daysGrid{display:contents;}

.dayCell{
  aspect-ratio: 1 / 1;
  padding:6px;
  overflow:hidden;
  cursor:default;
}
.dayTop{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:var(--muted);
}
.addHint{font-size:12px; opacity:0; transition:opacity .12s ease;}
body.isPrivate .dayCell{cursor:pointer;}
body.isPrivate .dayCell:hover .addHint{opacity:.85;}
.dayBody{margin-top:6px; display:flex; flex-direction:column; gap:4px;}
.empty{font-size:11px; color:rgba(91,100,115,.55);}

/* Chips + notes visible */
.chip{
  border:1px solid rgba(11,18,32,.10);
  padding:5px 6px;
  font-size:10.5px;
  line-height:1.15;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.chipTop{display:flex; justify-content:space-between; gap:6px;}
.chipT{font-weight:900;}
.chipM{color:rgba(11,18,32,.72); font-variant-numeric: tabular-nums; white-space:nowrap;}
.chipNote{
  color:rgba(11,18,32,.70);
  font-size:10px;
  line-height:1.2;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* Colors */
.t-run{background:var(--run);}
.t-bike{background:var(--bike);}
.t-swim{background:var(--swim);}
.t-strength{background:var(--strength);}
.t-football{background:var(--football);}
.t-race{background:var(--race);}
.t-rest{background:var(--rest);}

.weekHours{
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900;
}

/* Drawer */
.statsDrawer{
  position:fixed;
  top:var(--top-h);
  right:0;
  bottom:0;
  width:max(var(--drawer-min), var(--drawer-w));
  background:#fff;
  border-left:1px solid var(--border);
  transform:translateX(100%);
  transition:transform .18s ease;
  z-index:40;
  display:flex;
  flex-direction:column;
}
body.drawerOpen .statsDrawer{transform:translateX(0);}
.drawerHead{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 10px;
  border-bottom:1px solid var(--border);
}
.drawerTitle{font-weight:900; font-size:14px;}
.drawerBody{padding:10px; overflow:auto;}
.statGrid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.statCard{border:1px solid var(--border); padding:10px;}
.k{font-size:11px; color:var(--muted); font-weight:800;}
.v{font-size:16px; font-weight:900; margin-top:6px;}
.s{font-size:11px; color:var(--muted); margin-top:4px;}
.block{margin-top:10px; border:1px solid var(--border); padding:10px;}
.blockTitle{font-size:12px; font-weight:900; margin-bottom:8px;}
.list{display:flex; flex-direction:column; gap:8px;}
.row{display:grid; grid-template-columns:12px 1fr auto; gap:8px; align-items:center; font-size:12px;}
.row .val{display:flex; flex-direction:column; align-items:flex-end; gap:2px; line-height:1.1;}
.row .val .t{font-weight:900;}
.row .val .km{font-size:11px; color:var(--muted);}
.dot{width:10px;height:10px;border-radius:2px; border:1px solid rgba(11,18,32,.10);}

/* Modal */
.modalOverlay{
  position:fixed; inset:0;
  background:rgba(11,18,32,.45);
  display:none;
  align-items:center; justify-content:center;
  padding:12px;
  z-index:100;
}
.modalOverlay.open{display:flex;}
.modal{
  width:min(560px, 100%);
  background:#fff;
  border:1px solid var(--border);
}
.modalHead{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:10px;
  padding:10px 10px;
  border-bottom:1px solid var(--border);
}
.modalTitle{font-size:14px; font-weight:900;}
.modalSub{font-size:12px; color:var(--muted); margin-top:2px;}
.modalBody{padding:10px;}
.modalActions{display:flex; justify-content:flex-end; gap:8px; margin-top:10px; flex-wrap:wrap;}
.dangerBtn{border-color:rgba(185,28,28,.35); background:rgba(185,28,28,.08); color:#991b1b;}

.authErr{
  border:1px solid rgba(185,28,28,.35);
  background:rgba(185,28,28,.08);
  color:#991b1b;
  padding:8px 10px;
  font-size:12px;
  margin-bottom:10px;
}

.pinDots{display:flex; justify-content:center; gap:10px; padding:8px 0 10px;}
.dotC{
  width:10px;height:10px;border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
}
.dotC.filled{background:#0b1220; border-color:#0b1220;}
.pinPad{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  touch-action: manipulation;
}
.key{
  border:1px solid var(--border);
  background:#fff;
  padding:14px 8px;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  touch-action: manipulation;
}
.key.smallKey{font-size:12px; font-weight:900; color:var(--muted);}
.textInput{
  width:100%;
  border:1px solid var(--border);
  padding:10px 10px;
  font-size:13px;
}
.formGrid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.field label{font-size:12px; color:var(--muted); font-weight:900;}
.field input, .field select{
  width:100%;
  border:1px solid var(--border);
  padding:10px 10px;
  font-size:13px;
  background:#fff;
}
.span2{grid-column:1 / -1;}

/* Mobile improvements */
@media (max-width: 980px){
  .topbar{padding:12px 10px;}
  .title{font-size:18px;}
  .topRight{gap:8px;}
  .btn,.linkBtn{padding:10px 12px; font-size:14px;}
  .pills{margin-top:8px;}

  .gridHeader{display:none;}
  body.drawerOpen .calendarPane{right:0;}
  .statsDrawer{
    width:100%;
    height:52vh;
    top:auto; bottom:0;
    border-left:none;
    border-top:1px solid var(--border);
    transform:translateY(100%);
  }
  body.drawerOpen .statsDrawer{transform:translateY(0);}

  .weekRow{grid-template-columns: 1fr; border-bottom:1px solid var(--line);}
  .weekRow > *{border-right:none;}
  .weekInfo{
    display:grid;
    grid-template-columns: 1fr auto;
    align-items:start;
    gap:8px;
    border-bottom:1px solid var(--line);
  }
  .weekHours{display:none;}
  .weekHoursMobile{display:block; justify-self:end;}

  .daysGrid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:0;
  }
  .dayCell{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .daysGrid .dayCell:nth-child(2n){border-right:none;}
  .dayCell{aspect-ratio:1/1;}
  .chip{font-size:10px;}
  .chipNote{-webkit-line-clamp:3;}

  .formGrid{grid-template-columns:1fr;}
}


/* Race day = entire cell colored */
.dayCell.hasRace{
  background: var(--race);
}
.dayCell.hasRace .chip{
  background: rgba(255,255,255,.65);
}
.dayCell.hasRace .empty{ color: rgba(11,18,32,.45); }

/* Never overflow outside */
.dayBody{ overflow:hidden; }
.chipTop{ align-items:flex-start; }
.chipM{
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* topbar overflow hidden */

.topLeft{overflow:hidden;}
.pills{max-width:100%;}
.pill{max-width:100%;}


  .topLeft{flex-basis:100%;}
  .topRight{width:100%; justify-content:flex-end;}
  .pills{gap:6px;}
  .pill{padding:8px 10px;}
}


  .topRight .btn{
    width:auto;
    flex:0 0 auto;
  }
}


  .topRight{
    top: 14px;
    right: 10px;
    width: var(--actions-w);
  }
}



.topRight{
  position:absolute;
  top: 16px;
  right: 12px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}
.topRight .btn{ width:auto; }

/* Reserve space on desktop so left content doesn't collide with buttons */
@media (min-width: 981px){
  .topbar{ padding-right: calc(var(--actions-w) + 16px); }
}

/* Mobile: stack buttons vertically on right, keep inside header */
@media (max-width: 980px){
  .topbar{
    --actions-w: 110px;
    padding-right: calc(var(--actions-w) + 12px);
    padding-top: 14px;
    padding-bottom: 12px;
  }
  .topRight{
    top: 14px;
    right: 10px;
    width: var(--actions-w);
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .topRight .btn{
    width:100%;
    justify-content:center;
    padding: 12px 10px;
  }
}



/* v10: actions layout - desktop horizontal, mobile vertical - NO absolute (so header height is correct) */
.topRight{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:flex-end;
}
.topRight .btn{ width:auto; }

/* Desktop */
@media (min-width: 981px){
  .topRight{ flex-direction:row; }
}

/* Mobile: stack without overflowing header */
@media (max-width: 980px){
  .topbar{
    /* make sure the fixed header can grow with the buttons */
    padding-bottom: 14px;
  }
  .topRight{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .topRight .btn{
    width: 112px;
    font-size: 13px;
    padding: 10px 10px;
  }
}



/* v11: Buttons always in the top-right of header, centered text */
.topbar{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  column-gap: 14px;
  align-items:start;
}

/* Left area (title + pills) */
.topLeft{
  grid-column: 1;
  min-width: 0; /* allow shrinking */
}

/* Actions area */
.topRight{
  grid-column: 2;
  justify-self:end;
  align-self:start;
  display:flex;
  gap: 12px;
  align-items:center;
}

/* Button text centered */
.btn{
  justify-content:center;
  text-align:center;
}

/* Desktop: horizontal buttons */
@media (min-width: 981px){
  .topRight{ flex-direction:row; }
}

/* Mobile: vertical stack, still top-right, compact */
@media (max-width: 980px){
  .topRight{
    flex-direction:column;
    gap: 10px;
  }
  .topRight .btn{
    width: 112px;
    padding: 11px 10px;
  }
}



/* v12: mobile header optimized (compact, no wasted space) */
@media (max-width: 980px){
  .topbar{
    padding: 12px 10px 10px 10px;
    column-gap: 10px;
    row-gap: 8px;
  }

  .topTitle{
    font-size: 22px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 8px 0;
  }

  .pills{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
  }
  .pill{
    padding: 10px 10px;
    font-size: 14px;
    line-height: 1.15;
  }
  .pill:nth-child(3){
    grid-column: 1 / -1;
  }

  .topRight{
    gap: 8px;
  }
  .topRight .btn{
    width: 96px;
    padding: 9px 8px;
    font-size: 14px;
    line-height: 1.1;
  }
}



/* v13: equal button sizes + desktop right spacing + vertical centering */
.topRight .btn{
  min-width: 96px;
  height: 42px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Desktop refinements */
@media (min-width: 981px){
  .topbar{
    padding-right: 22px; /* space from right edge */
  }
  .topRight{
    margin-right: 10px; /* extra breathing room */
    align-self:center;  /* center on header height */
  }
}



/* v17: Par activité — afficher les km à gauche du temps */
.rowRight{
  display:flex;
  flex-direction:row;
  gap:10px;
  align-items:baseline;
  justify-content:flex-end;
}
.rowRight .km{
  font-size:13px;
  color:#667085;
  white-space:nowrap;
}
.rowRight .time{
  font-weight:700;
  white-space:nowrap;
}