/* ═══════════════════════════════════════════════════════════════
   Manzoma Periodic Reports Page Styles
   Phase 2 split: page-specific styles extracted from style.css.
   Load order: tokens.css → base.css → layout.css → components.css → page styles → style.css.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PERIODIC REPORTS
═══════════════════════════════════════════════════════════════ */
.period-report{display:flex;flex-direction:column;gap:13px}
.pr-header{background:var(--g2);border-radius:var(--r);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.pr-title{font-size:14px;font-weight:800;color:#fff}
.pr-saved{font-size:11px;color:rgba(255,255,255,.42)}
.pr-kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:11px}
.pr-kpi{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r2);padding:13px 15px;box-shadow:var(--sh1)}
.pr-kpi.pos{border-top:2px solid var(--green)}.pr-kpi.neg{border-top:2px solid var(--red)}
.pr-kpi-val{font-size:24px;font-weight:800;color:var(--t1);line-height:1.1;margin-bottom:3px;letter-spacing:-.4px}
.pr-kpi.pos .pr-kpi-val{color:var(--green)}.pr-kpi.neg .pr-kpi-val{color:var(--red)}
.pr-kpi-label{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:2px}
.pr-kpi-sub{font-size:11px;color:var(--t4)}
.pr-section{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh1)}
.pr-sec-title{padding:10px 15px;background:var(--s1);font-size:10px;font-weight:700;color:var(--t1);border-bottom:1px solid var(--b0);text-transform:uppercase;letter-spacing:.5px}
.pr-task-row{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 15px;border-bottom:1px solid var(--b0);font-size:13px}
.pr-task-row:last-child{border-bottom:none}
.pr-task-row.done .pr-task-name{color:var(--t4);text-decoration:line-through}
.pr-task-row.late{background:var(--red-bg)}.pr-task-row.late .pr-task-name{color:var(--red);font-weight:600}
.pr-task-row.today{background:var(--amber-bg)}
.pr-task-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--t1)}
.pr-task-proj{font-size:11px;color:var(--t4);white-space:nowrap;flex-shrink:0}
.pr-task-due{font-size:11px;color:var(--t4);white-space:nowrap;flex-shrink:0}
.pr-more{padding:7px 15px;font-size:11px;color:var(--t4);font-style:italic}

/* ═══════════════════════════════════════════════════════════════
   PERIODIC REPORTS — Professional layout
═══════════════════════════════════════════════════════════════ */

/* Toolbar */
.per-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:16px;flex-wrap:wrap;
}
.per-info{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--t3);
}
.per-count{
  font-size:20px;font-weight:800;color:var(--g3);
  font-variant-numeric:tabular-nums;
}
.per-info-lbl{color:var(--t4)}
.per-dot{color:var(--s4)}

/* Period tabs */
.per-tabs{
  display:flex;gap:6px;flex-wrap:wrap;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--b0);
}
.per-tab{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 14px;border-radius:var(--r2);
  border:1.5px solid var(--b1);background:var(--s1);
  cursor:pointer;transition:all .14s;font-family:var(--ff);
  min-width:80px;
}
.per-tab:hover{border-color:var(--g4);background:var(--g5)}
.per-tab.active{
  border-color:var(--g4);background:var(--g5);
  box-shadow:0 2px 8px rgba(16,185,129,.15);
}
.per-tab-type{
  font-size:10px;font-weight:700;color:var(--t4);
  text-transform:uppercase;letter-spacing:.3px;
}
.per-tab.active .per-tab-type{color:var(--g3)}
.per-tab-key{
  font-size:12.5px;font-weight:700;color:var(--t2);
}
.per-tab.active .per-tab-key{color:var(--g2)}

/* Report body */
.per-body{
  background:var(--s0);border:1px solid var(--b0);
  border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh1);
}