/* ==========================================================================
   Zakir OS — Daily reports, review queue, leaderboard.
   ========================================================================== */

/* --- Tabs ----------------------------------------------------------------- */
.tabs{
  display:flex;gap:var(--s1);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--s5);
  overflow-x:auto;
}
.tab{
  padding:var(--s2) var(--s3);
  font-size:var(--t-md);font-weight:500;
  color:var(--text-3);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;white-space:nowrap;
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.tab:hover{color:var(--text-2)}
.tab[data-on="true"]{color:var(--text);border-bottom-color:var(--accent)}

/* --- Report form ---------------------------------------------------------- */
.report-meta{
  display:grid;grid-template-columns:140px 1fr 1fr;gap:var(--s4);
  padding-top:var(--s3);border-top:1px solid var(--line);
}
.scale{display:flex;gap:var(--s1)}
.scale__btn{
  width:34px;height:32px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--raised);
  font-family:var(--font-mono);font-size:var(--t-sm);
  color:var(--text-3);
  transition:all var(--fast) var(--ease);
}
.scale__btn:hover{border-color:var(--line-strong);color:var(--text-2)}
.scale__btn[data-on="true"]{
  background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:600;
}

/* --- Report list ---------------------------------------------------------- */
.report-list{display:flex;flex-direction:column}
.report{border-bottom:1px solid var(--line)}
.report:last-child{border-bottom:none}
.report__row{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) 0;cursor:pointer;list-style:none;
}
.report__row::-webkit-details-marker{display:none}
.report__row:hover{color:var(--text)}
.report__date{width:82px;flex:none;font-size:var(--t-sm);color:var(--text-2)}
.report__who{width:110px;flex:none;font-size:var(--t-md);font-weight:500}
.report__snippet{flex:1;min-width:0;font-size:var(--t-md);color:var(--text-3)}
.report__hours{flex:none;font-size:var(--t-sm);color:var(--text-3)}

.report__detail{padding:0 0 var(--s4) 82px}
.report__field{margin-bottom:var(--s3)}
.report__field p{font-size:var(--t-md);color:var(--text-2);margin-top:2px;white-space:pre-wrap}
.report__stats{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.report__review{
  display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);
}
.report__review .input{flex:1;min-width:180px}

/* --- Leaderboard ---------------------------------------------------------- */
.board{display:flex;flex-direction:column;font-size:var(--t-md)}
.board__head,.board__row{
  display:grid;
  grid-template-columns:32px minmax(120px,1.6fr) repeat(5,44px) 64px 56px 64px;
  gap:var(--s2);align-items:center;
  padding:var(--s2) 0;
}
.board__head{
  border-bottom:1px solid var(--line-strong);
  font-family:var(--font-mono);font-size:var(--t-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3);
}
.board__head span:not(:nth-child(2)){text-align:right}
.board__row{border-bottom:1px solid var(--line)}
.board__row:last-child{border-bottom:none}
.board__row span:not(:nth-child(2)){text-align:right}
.board__row[data-you="true"]{background:var(--accent-soft);border-radius:var(--r-sm)}
.board__rank{color:var(--text-3)}
.board__row:first-of-type .board__rank{color:var(--accent);font-weight:600}
.board__total{font-weight:600;font-size:var(--t-base)}

/* --- Awards --------------------------------------------------------------- */
.awards{display:flex;flex-direction:column}
.award{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2) 0;border-bottom:1px solid var(--line);
}
.award:last-child{border-bottom:none}
.award__label{flex:1;font-size:var(--t-md)}
.award__who{font-size:var(--t-md);color:var(--text-2)}

@media (max-width:900px){
  .board__head,.board__row{
    grid-template-columns:28px minmax(90px,1fr) repeat(5,34px) 52px 64px;
  }
  .board__head span:nth-child(9),.board__row span:nth-child(9){display:none}
}
@media (max-width:720px){
  .report-meta{grid-template-columns:1fr}
  .report__detail{padding-left:0}
  .report__who,.report__hours{display:none}
  .board__head,.board__row{grid-template-columns:26px 1fr 48px 56px}
  .board__head span:nth-child(n+3):nth-child(-n+7),
  .board__row span:nth-child(n+3):nth-child(-n+7){display:none}
}

/* ==========================================================================
   M5.1 — checklist, day strip, scorecard editor
   ========================================================================== */

/* --- Quota bar ------------------------------------------------------------ */
.quota-bar{height:6px;background:var(--overlay);border-radius:var(--r-full);overflow:hidden;margin-bottom:var(--s4)}
.quota-bar__fill{height:100%;background:var(--accent);border-radius:var(--r-full);
  transition:width var(--base) var(--ease)}

/* --- Checklist ------------------------------------------------------------ */
.checklist-add{display:flex;gap:var(--s2);margin-bottom:var(--s3)}
.checklist-add .input{flex:1}
.checklist{display:flex;flex-direction:column}
.check-row{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2) 0;border-bottom:1px solid var(--line);
}
.check-row:last-child{border-bottom:none}
.check-box{
  width:19px;height:19px;flex:none;
  border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  display:grid;place-items:center;color:var(--on-accent);
  transition:all var(--fast) var(--ease);
}
.check-box:hover{border-color:var(--accent)}
.check-row[data-done="true"] .check-box{background:var(--accent);border-color:var(--accent)}
.check-title{flex:1;min-width:0;font-size:var(--t-md)}
.check-row[data-done="true"] .check-title{color:var(--text-3);text-decoration:line-through}
.check-del{opacity:0;transition:opacity var(--fast) var(--ease)}
.check-row:hover .check-del{opacity:1}

/* --- Day strip ------------------------------------------------------------ */
.day-strip{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s2)}
.day-cell{
  flex:1;min-width:56px;
  display:flex;flex-direction:column;align-items:center;gap:var(--s1);
  padding:var(--s2);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--raised);
}
.day-cell[data-type="leave"]{opacity:.5;border-style:dashed}
.day-cell[data-type="off"]{opacity:.4}
.day-cell[data-type="off_worked"]{border-color:var(--accent-line);background:var(--accent-soft)}
.day-cell__name{font-family:var(--font-mono);font-size:var(--t-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3)}
.day-cell__num{font-size:var(--t-lg);font-weight:600}
.day-cell__bar{width:100%;height:34px;background:var(--overlay);border-radius:var(--r-sm);
  display:flex;align-items:flex-end;overflow:hidden}
.day-cell__bar div{width:100%;background:var(--accent);transition:height var(--base) var(--ease)}
.day-cell__date{font-size:var(--t-2xs);color:var(--text-3)}

/* --- Score hero ----------------------------------------------------------- */
.score-hero{display:grid;grid-template-columns:180px 1fr;gap:var(--s5);align-items:start}
.score-hero__num{font-size:var(--t-3xl);font-weight:600;line-height:1;letter-spacing:-.02em;margin-top:var(--s2)}
.score-hero__num .dim{font-size:var(--t-lg)}
.score-hero__pct{font-family:var(--font-mono);font-size:var(--t-md);color:var(--accent);margin-top:var(--s1)}
.score-hero__stats{display:flex;gap:var(--s5);flex-wrap:wrap;grid-column:1/-1}
.score-hero__stats > div{display:flex;flex-direction:column;gap:2px}
.score-hero__stats .num{font-size:var(--t-base)}
.score-hero__bars{grid-column:2;display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
.sbar{display:grid;grid-template-columns:96px 1fr 76px;gap:var(--s3);align-items:center}
.sbar__label{font-size:var(--t-sm);color:var(--text-2)}
.sbar__track{height:7px;background:var(--overlay);border-radius:var(--r-full);overflow:hidden}
.sbar__fill{height:100%;background:var(--accent);border-radius:var(--r-full);
  transition:width var(--base) var(--ease)}
.sbar__pts{font-size:var(--t-sm);text-align:right}

/* --- KPI rows ------------------------------------------------------------- */
.kpi-row{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s2) 0;border-bottom:1px solid var(--line);
}
.kpi-row:last-child{border-bottom:none}
.kpi-row__label{min-width:130px;font-size:var(--t-md);font-weight:500}
.kpi-row .input{width:92px}

/* --- Scorecard editor ----------------------------------------------------- */
.sc-list{display:flex;flex-direction:column;gap:var(--s2)}
.sc-head,.sc-row{
  display:grid;grid-template-columns:1.3fr 1fr 82px 1.5fr 34px;
  gap:var(--s2);align-items:center;
}
.sc-head{
  font-family:var(--font-mono);font-size:var(--t-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3);
  padding-bottom:var(--s1);border-bottom:1px solid var(--line);
}
.sc-note{font-size:var(--t-sm)}
.sc-head--targets,.sc-row--targets{grid-template-columns:1.4fr 130px repeat(auto-fit,minmax(110px,1fr)) 80px}
.sc-settings{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s4);
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);
}

@media (max-width:900px){
  .score-hero{grid-template-columns:1fr}
  .score-hero__bars{grid-column:1}
}
@media (max-width:720px){
  .sc-head{display:none}
  .sc-row,.sc-row--targets{grid-template-columns:1fr 1fr;gap:var(--s2)}
  .sc-note{display:none}
  .sbar{grid-template-columns:80px 1fr 64px}
  .day-cell{min-width:46px;padding:var(--s1)}
}

/* ==========================================================================
   M5.2 — groups, criteria, podium, leaderboard
   ========================================================================== */

.group-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s4);margin-top:var(--s4)}
.group-card .card__title{font-size:var(--t-base)}

.crit{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.crit:last-child{border-bottom:none}
.crit__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.crit__label{font-size:var(--t-md)}
.crit__pts{font-size:var(--t-sm);font-weight:600;white-space:nowrap}
.crit__pts.up{color:var(--up)} .crit__pts.down{color:var(--down)}
.crit__track{height:5px;background:var(--overlay);border-radius:var(--r-full);overflow:hidden;margin-top:var(--s2)}
.crit__fill{height:100%;background:var(--accent);border-radius:var(--r-full);transition:width var(--base) var(--ease)}
.crit__input{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s2);flex-wrap:wrap}
.crit__input .input{flex:1;min-width:120px}
.crit__input .num{max-width:96px;flex:none}
.crit__meta{display:block;font-size:var(--t-2xs);color:var(--text-3);margin-top:var(--s1);
  font-family:var(--font-mono);letter-spacing:var(--tracking-label)}
.crit__note{font-size:var(--t-sm);color:var(--text-2);margin-top:var(--s2);font-style:italic}

/* --- Podium --------------------------------------------------------------- */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s4)}
.podium__slot{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:var(--s4) var(--s3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.podium__slot[data-place="1"]{border-color:var(--accent-line);background:
  linear-gradient(var(--accent-soft), transparent 70%), var(--surface)}
.podium__medal{font-size:20px;line-height:1}
.podium__name{font-size:var(--t-md);font-weight:600;max-width:100%}
.podium__score{font-size:var(--t-2xl);font-weight:600;line-height:1.1}
.podium__pct{font-family:var(--font-mono);font-size:var(--t-2xs);color:var(--text-3)}

/* --- Leaderboard ---------------------------------------------------------- */
.lb{display:flex;flex-direction:column}
.lb__head,.lb__row{
  display:grid;
  grid-template-columns:30px minmax(110px,1.5fr) repeat(var(--cols),60px) 54px 64px 32px;
  gap:var(--s2);align-items:center;padding:var(--s2) 0;
}
.lb__head{
  border-bottom:1px solid var(--line-strong);
  font-family:var(--font-mono);font-size:var(--t-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3);
}
.lb__head span:not(:nth-child(2)),.lb__row > span:not(:nth-child(2)){text-align:right}
.lb__row{border-bottom:1px solid var(--line)}
.lb__row[data-you="true"]{background:var(--accent-soft);border-radius:var(--r-sm)}
.lb__rank{color:var(--text-3)}
.lb__row:first-of-type .lb__rank{color:var(--accent);font-weight:700}
.lb__cell[data-level="high"]{color:var(--up)}
.lb__cell[data-level="mid"]{color:var(--text-2)}
.lb__cell[data-level="low"]{color:var(--down)}
.lb__trend{font-family:var(--font-mono);font-size:var(--t-2xs)}
.lb__trend .up{color:var(--up)} .lb__trend .down{color:var(--down)}
.lb__total{font-weight:700;font-size:var(--t-base)}
.lb__detail{padding:var(--s3) 0 var(--s4);border-bottom:1px solid var(--line)}
.lb__detail .group-card{margin-bottom:var(--s3)}

/* --- Scorecard editor ----------------------------------------------------- */
.group-name{max-width:260px;font-weight:600}
.crit-head,.crit-edit{
  display:grid;grid-template-columns:1.4fr 1.1fr 76px 34px;
  gap:var(--s2);align-items:center;
}
.crit-head{
  font-family:var(--font-mono);font-size:var(--t-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3);
  padding-bottom:var(--s1);border-bottom:1px solid var(--line);margin-bottom:var(--s2);
}
.crit-edit{padding:var(--s1) 0}
.crit-edit__note{grid-column:1/-1;font-size:var(--t-2xs);margin-top:-4px}

.target-row{
  display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
}
.target-row:last-child{border-bottom:none}
.target-row > .truncate{min-width:120px;font-weight:500;align-self:center}
.target-row__field{display:flex;flex-direction:column;gap:var(--s1)}
.target-row__field .input{width:110px}

@media (max-width:900px){
  .podium{grid-template-columns:1fr}
  .group-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .lb__head,.lb__row{grid-template-columns:26px 1fr 52px 60px 28px}
  .lb__head span:nth-child(n+3):nth-last-child(n+4),
  .lb__row > span:nth-child(n+3):nth-last-child(n+4){display:none}
  .crit-head{display:none}
  .crit-edit{grid-template-columns:1fr 1fr;gap:var(--s2)}
}

/* ==========================================================================
   The weekly sheet — one person's week, the surface the team actually uses
   ========================================================================== */

.sheet__head{margin-bottom:var(--s4)}
.sheet__who{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4)}
.sheet__name{font-size:var(--t-lg);font-weight:600;margin:2px 0 0}
.sheet__counts{display:flex;flex-direction:column;align-items:flex-end}
.sheet__counts .num{font-size:var(--t-2xl);font-weight:600;line-height:1.1}
.sheet__kpis{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.kpi-chip{
  display:flex;flex-direction:column;gap:2px;
  padding:var(--s2) var(--s3);
  background:var(--overlay);border:1px solid var(--line);border-radius:var(--r-md);
}
.kpi-chip__target{font-size:var(--t-sm)}
.sheet__hint{font-size:var(--t-sm);margin-top:var(--s3)}

.sheet__days{display:flex;flex-direction:column;gap:var(--s3)}

.day{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);
}
.day[data-today="true"]{border-color:var(--accent-line)}
.day[data-off="true"]{opacity:.6}
.day[data-tone="ok"]{border-left:3px solid var(--up)}
.day[data-tone="pending"]{border-left:3px solid var(--warn)}
.day[data-tone="warn"]{border-left:3px solid var(--down)}
.day__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.day__when{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.day__name{font-size:var(--t-md);font-weight:600}
.day__date{font-size:var(--t-sm);color:var(--text-3)}
.day__state{display:flex;align-items:center;gap:var(--s2)}
.day__count{font-size:var(--t-sm);color:var(--text-2)}
.day__comment{
  margin-top:var(--s2);padding:var(--s2) var(--s3);
  background:var(--overlay);border-radius:var(--r-sm);
  font-size:var(--t-sm);color:var(--text-2);
  display:flex;align-items:flex-start;gap:var(--s2);
}

.pill{
  font-family:var(--font-mono);font-size:var(--t-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-full);
  border:1px solid var(--line);color:var(--text-3);white-space:nowrap;
}
.pill--ok{border-color:var(--up);color:var(--up)}
.pill--pending{border-color:var(--warn);color:var(--warn)}
.pill--warn{border-color:var(--down);color:var(--down)}

.day__tasks{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column}
.task{
  display:flex;align-items:flex-start;gap:var(--s3);
  padding:var(--s2) 0;border-bottom:1px solid var(--line);
}
.task:last-child{border-bottom:none}
.task__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.task__title{font-size:var(--t-md)}
.task[data-done="true"] .task__title{color:var(--text-3);text-decoration:line-through}
.task__note{font-size:var(--t-sm);color:var(--text-2)}
.task__from{
  font-family:var(--font-mono);font-size:var(--t-2xs);color:var(--accent);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
}
.day__add{display:flex;gap:var(--s2);margin-top:var(--s3)}
.day__add .input{flex:1}
.day__foot{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s3);flex-wrap:wrap}
.select--sm{height:30px;font-size:var(--t-sm);padding:0 var(--s2)}

/* --- team list ------------------------------------------------------------ */
.team-rows{display:flex;flex-direction:column}
.team-row{
  display:grid;grid-template-columns:28px minmax(100px,1fr) auto 56px auto;
  gap:var(--s3);align-items:center;
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
}
.team-row:last-child{border-bottom:none}
.team-row[data-you="true"]{background:var(--accent-soft);border-radius:var(--r-sm)}
.team-row__rank{color:var(--text-3)}
.team-row__name{font-weight:500}
.team-row__meta{font-size:var(--t-sm)}
.team-row__score{font-weight:700;text-align:right}

@media (max-width:720px){
  .sheet__who{flex-direction:column;gap:var(--s2)}
  .sheet__counts{align-items:flex-start}
  .team-row{grid-template-columns:24px 1fr 52px;row-gap:var(--s1)}
  .team-row__meta{grid-column:2/-1;order:5}
}

/* A criterion that is switched off: still there, visibly not counting. */
.crit-edit[data-off="true"]{opacity:.5}
.crit-edit[data-off="true"] .input,.crit-edit[data-off="true"] .select{text-decoration:line-through}

/* --- Resetting a period --------------------------------------------------- */
.reset-card{border-color:var(--line-strong)}
.reset-preview{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.reset-preview__counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--s3)}
.reset-count{display:flex;flex-direction:column;gap:2px}
.reset-count__value{font-size:var(--t-2xl);font-weight:600;line-height:1.1}