/* ═══════════════════════════════════════════════════════════════
   Manzoma Metro 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.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   METRO LINE (mtr*) — خط مترو المشروع
═══════════════════════════════════════════════════════════════ */

/* ── Header ──────────────────────────────────────────────── */
.mtr-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap}
.mtr-header-l h2{font-size:var(--fz-xl);font-weight:800;color:var(--t1);letter-spacing:-.3px;display:flex;align-items:center;gap:var(--sp2)}
.mtr-header-l p{font-size:var(--fz-sm);color:var(--t3);margin-top:4px;max-width:720px}
.mtr-header-r{display:flex;align-items:center;gap:var(--sp2);flex-shrink:0}

/* ── Toolbar (project select + pulse) ─────────────────────── */
.mtr-toolbar{
  display:flex;align-items:center;gap:var(--sp4);
  background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);
  padding:var(--sp4) var(--sp5);box-shadow:var(--sh1);
  flex-wrap:wrap;
}
.mtr-select{
  padding:11px 38px 11px 14px;border:1.5px solid var(--b1);border-radius:var(--r3);
  background:var(--s1) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2356766A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat left 14px center;
  font-family:var(--ff);font-size:var(--fz-base);font-weight:600;
  color:var(--t1);cursor:pointer;min-height:44px;outline:none;
  min-width:280px;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.mtr-select:hover{border-color:var(--g4);background-color:#fff}
.mtr-select:focus{border-color:var(--g4);background-color:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.mtr-select-label{
  display:flex;align-items:center;gap:6px;
  font-size:var(--fz-xs);font-weight:700;color:var(--t4);
  text-transform:uppercase;letter-spacing:.5px;
  margin-inline-end:var(--sp2);
}

/* Pulse summary (5 inline stats) */
.mtr-pulse{display:flex;gap:var(--sp4);flex:1;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.mtr-pulse-item{display:flex;flex-direction:column;align-items:flex-end;gap:1px;padding-inline-end:var(--sp3);border-inline-end:1px solid var(--b0)}
.mtr-pulse-item:last-child{border-inline-end:none;padding-inline-end:0}
.mtr-pulse-val{font-size:var(--fz-lg);font-weight:800;color:var(--t1);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.3px}
.mtr-pulse-lbl{font-size:var(--fz-xs);color:var(--t4);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.mtr-pulse-done .mtr-pulse-val{color:var(--green)}
.mtr-pulse-active .mtr-pulse-val{color:var(--blue)}
.mtr-pulse-blocked .mtr-pulse-val{color:var(--red)}

/* ── Canvas ──────────────────────────────────────────────── */
.mtr-canvas{display:flex;flex-direction:column;gap:var(--sp5)}

/* Project header */
.mtr-proj-hd{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp3);background:var(--s0);
  border:1px solid var(--b0);border-radius:var(--r);
  padding:var(--sp4) var(--sp5);box-shadow:var(--sh1);
}
.mtr-proj-hd-l{display:flex;align-items:center;gap:var(--sp3);min-width:0;flex:1}
.mtr-proj-hd-l h3{font-size:var(--fz-lg);font-weight:800;color:var(--t1);letter-spacing:-.2px;line-height:1.2;margin:0}
.mtr-proj-folder{
  display:inline-flex;align-items:center;
  font-size:var(--fz-xs);font-weight:700;color:var(--g3);
  background:var(--g5);padding:4px 11px;border-radius:999px;
  border:1px solid rgba(27,100,67,.15);
}

/* ── The metro line itself ───────────────────────────────── */
.mtr-line-wrap{
  background:var(--s0);
  border:1px solid var(--b0);
  border-radius:var(--r);
  padding:var(--sp6) var(--sp5);
  box-shadow:var(--sh1);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.mtr-line{
  display:flex;align-items:flex-start;
  gap:0;min-width:max-content;
  padding:var(--sp5) var(--sp3);
  position:relative;
}

/* Station — vertical card with circle on top */
.mtr-station{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--sp3);min-width:200px;
  position:relative;z-index:2;
}
.mtr-st-circle{
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
  background:var(--s0);
  border:3px solid var(--s4);
  position:relative;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.mtr-st-emoji{filter:saturate(.7);transition:filter .3s}

/* Train indicator */
.mtr-st-train{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  font-size:24px;line-height:1;
  animation:mtr-train-pulse 1.6s ease-in-out infinite;
  filter:drop-shadow(0 2px 6px rgba(10,102,166,.4));
}
@keyframes mtr-train-pulse{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-3px)}
}

/* Station states */
.mtr-st-done .mtr-st-circle{
  background:var(--green-bg);border-color:var(--green);
  box-shadow:0 4px 14px rgba(16,122,62,.18);
}
.mtr-st-done .mtr-st-emoji{filter:saturate(1.1)}
.mtr-st-done .mtr-st-circle::after{
  content:'✓';position:absolute;bottom:-6px;right:-6px;
  width:22px;height:22px;border-radius:50%;
  background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;
  box-shadow:0 2px 6px rgba(16,122,62,.35);
  border:2px solid var(--s0);
}

.mtr-st-inprogress .mtr-st-circle{
  background:var(--blue-bg);border-color:var(--blue);
  box-shadow:0 0 0 0 rgba(10,102,166,.4);
  animation:mtr-pulse-blue 2s ease-in-out infinite;
}
.mtr-st-inprogress .mtr-st-emoji{filter:saturate(1.1)}
@keyframes mtr-pulse-blue{
  0%,100%{box-shadow:0 0 0 0 rgba(10,102,166,.45),0 4px 14px rgba(10,102,166,.18)}
  50%{box-shadow:0 0 0 12px rgba(10,102,166,0),0 4px 14px rgba(10,102,166,.25)}
}

.mtr-st-blocked .mtr-st-circle{
  background:var(--red-bg);border-color:var(--red);
  box-shadow:0 4px 14px rgba(195,43,39,.20);
}
.mtr-st-blocked .mtr-st-emoji{filter:saturate(1.1)}
.mtr-st-blocked .mtr-st-circle::after{
  content:'⚠';position:absolute;bottom:-6px;right:-6px;
  width:22px;height:22px;border-radius:50%;
  background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;
  box-shadow:0 2px 6px rgba(195,43,39,.35);
  border:2px solid var(--s0);
}

.mtr-st-notstarted .mtr-st-circle{
  background:var(--s2);border-color:var(--s4);opacity:.7;
}
.mtr-st-notstarted .mtr-st-emoji{filter:grayscale(.6) opacity(.7)}

/* Current station — extra emphasis */
.mtr-st-current .mtr-st-circle{transform:scale(1.1)}

/* Station info card below circle */
.mtr-st-info{
  background:var(--s0);
  border:1px solid var(--b0);
  border-radius:var(--r2);
  padding:var(--sp3);
  width:100%;
  display:flex;flex-direction:column;gap:5px;
  text-align:center;
  transition:box-shadow .18s var(--ease),border-color .18s,transform .15s;
}
.mtr-station:hover .mtr-st-info{box-shadow:var(--sh2);border-color:var(--b1);transform:translateY(-2px)}
.mtr-st-current .mtr-st-info{border-color:var(--blue);box-shadow:0 2px 14px rgba(10,102,166,.12)}

.mtr-st-title{font-size:var(--fz-base);font-weight:800;color:var(--t1);line-height:1.2}
.mtr-st-stats{display:flex;align-items:center;justify-content:center;gap:6px;font-variant-numeric:tabular-nums}
.mtr-st-count{font-size:var(--fz-xs);font-weight:700;color:var(--t3);background:var(--s2);padding:2px 8px;border-radius:999px}
.mtr-st-pct{font-size:var(--fz-xs);font-weight:800;color:var(--g3)}
.mtr-st-done .mtr-st-pct{color:var(--green)}
.mtr-st-inprogress .mtr-st-pct{color:var(--blue)}
.mtr-st-blocked .mtr-st-pct{color:var(--red)}

.mtr-st-bar{height:4px;background:var(--s3);border-radius:3px;overflow:hidden;width:100%}
.mtr-st-bar-fill{height:100%;background:var(--g3);border-radius:3px;transition:width .6s var(--ease)}
.mtr-st-done .mtr-st-bar-fill{background:var(--green)}
.mtr-st-inprogress .mtr-st-bar-fill{background:var(--blue)}
.mtr-st-blocked .mtr-st-bar-fill{background:var(--red)}

.mtr-st-tasks{
  display:flex;flex-direction:column;gap:3px;
  margin-top:var(--sp2);padding-top:var(--sp2);
  border-top:1px solid var(--b0);
  text-align:start;
}
.mtr-st-task-prev{
  font-size:var(--fz-xs);color:var(--t3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.4;
}
.mtr-st-task-more{font-weight:700;color:var(--g3);font-size:10px}
.mtr-st-task-empty{color:var(--t4);font-style:italic;text-align:center;opacity:.7}

/* Connector between stations */
.mtr-connector{
  flex:1;height:6px;
  background:var(--s4);
  align-self:center;
  margin-top:-9px;
  min-width:40px;max-width:120px;
  border-radius:3px;
  position:relative;
  margin-inline:-2px;
}
.mtr-connector-done{background:linear-gradient(90deg,var(--green),var(--green))}
.mtr-connector-inprogress{
  background:linear-gradient(90deg,var(--green) 0%,var(--blue) 100%);
  position:relative;overflow:hidden;
}
.mtr-connector-inprogress::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:mtr-flow 1.8s linear infinite;
}
@keyframes mtr-flow{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.mtr-connector-blocked{background:repeating-linear-gradient(90deg,var(--red) 0,var(--red) 8px,var(--s0) 8px,var(--s0) 12px)}
.mtr-connector-notstarted{background:repeating-linear-gradient(90deg,var(--s4) 0,var(--s4) 6px,transparent 6px,transparent 10px)}

/* Unclassified tasks footer */
.mtr-unclassified{
  background:var(--amber-bg);
  border:1px solid rgba(168,90,4,.20);
  border-radius:var(--r);
  padding:var(--sp4) var(--sp5);
}
.mtr-unc-hd{
  display:flex;align-items:center;gap:var(--sp2);
  margin-bottom:var(--sp3);font-size:var(--fz-sm);color:var(--amber);
  font-weight:700;
}
.mtr-unc-hd > span{flex:1}
.mtr-unc-edit{
  font-size:var(--fz-xs);font-weight:700;color:var(--amber);
  background:rgba(168,90,4,.10);border:1px solid rgba(168,90,4,.25);
  padding:5px 11px;border-radius:var(--r3);cursor:pointer;
  font-family:var(--ff);transition:background .14s;
}
.mtr-unc-edit:hover{background:rgba(168,90,4,.20)}
.mtr-unc-tags{display:flex;flex-wrap:wrap;gap:6px}
.mtr-unc-tag{
  font-size:var(--fz-xs);color:var(--amber);
  background:#fff;border:1px solid rgba(168,90,4,.25);
  padding:4px 10px;border-radius:var(--r3);
  white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;
}

/* Empty state */
.mtr-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--sp7) var(--sp5);text-align:center;color:var(--t3);gap:var(--sp3);
  background:var(--s0);border:1px dashed var(--b1);border-radius:var(--r);
}
.mtr-empty svg{opacity:.3}
.mtr-empty .t{font-size:var(--fz-md);font-weight:700;color:var(--t1)}
.mtr-empty .s{font-size:var(--fz-sm);color:var(--t4);max-width:380px;line-height:1.6}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:1023px){
  .mtr-station{min-width:170px}
  .mtr-connector{min-width:30px;max-width:80px}
  .mtr-pulse{justify-content:flex-start;width:100%}
}
@media(max-width:767px){
  .mtr-header-l h2{font-size:var(--fz-lg)}
  .mtr-toolbar{padding:var(--sp3);gap:var(--sp3)}
  .mtr-select{min-width:100%;width:100%}
  .mtr-pulse{justify-content:space-between}
  .mtr-pulse-item{padding-inline-end:var(--sp2);border-inline-end:none;align-items:flex-start}
  .mtr-pulse-val{font-size:var(--fz-md)}
  .mtr-proj-hd{padding:var(--sp3);flex-direction:column;align-items:flex-start;gap:var(--sp2)}
  .mtr-proj-hd-l{flex-direction:column;align-items:flex-start;gap:6px}
  .mtr-line-wrap{padding:var(--sp4) var(--sp3)}
  .mtr-line{padding:var(--sp4) 0;gap:var(--sp2)}
  .mtr-station{min-width:140px}
  .mtr-st-circle{width:46px;height:46px;font-size:18px}
  .mtr-connector{min-width:18px}
  .mtr-st-info{padding:var(--sp2)}
  .mtr-unclassified{padding:var(--sp3)}
}