/* ═══════════════════════════════════════════════════════════════
   Manzoma Gantt Page Styles
   Phase 2 split: classic gantt and timeline styles.
   Load order: tokens.css → base.css → layout.css → components.css → page styles → style.css.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   GANTT
═══════════════════════════════════════════════════════════════ */
.gw{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1)}
.gt-row{display:flex;border-bottom:1px solid var(--b0)}
.gn-col{min-width:180px;width:180px;border-left:1px solid var(--b0);background:var(--s1);flex-shrink:0}
.gn-head{padding:9px 13px;font-size:10px;font-weight:700;color:var(--t4);border-bottom:1px solid var(--b1);letter-spacing:.5px;text-transform:uppercase}
.gd-head{flex:1;display:flex;border-bottom:1px solid var(--b1);background:var(--s1);overflow:hidden}
.gday{flex:1;text-align:center;padding:5px 1px;font-size:10px;color:var(--t4);border-left:1px solid var(--b0);min-width:0;line-height:1.3}
.gday.tc{background:var(--g5);color:var(--g3);font-weight:700}
.gb-row{display:flex}
.gn-rows{min-width:180px;width:180px;border-left:1px solid var(--b0);flex-shrink:0}
.gn-cell{padding:7px 13px;height:35px;border-bottom:1px solid var(--b0);display:flex;align-items:center;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t2)}
.gn-cell:last-child{border-bottom:none}
.gc-area{flex:1;position:relative;overflow:hidden}
.gg{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;pointer-events:none}
.ggc{flex:1;border-left:1px solid var(--b0)}.ggc.tc{background:var(--g6)}
.gr-wrap{position:relative;z-index:1}
.gr{height:35px;border-bottom:1px solid var(--b0);position:relative}.gr:last-child{border-bottom:none}
.gbar{position:absolute;height:19px;top:8px;border-radius:6px;display:flex;align-items:center;padding:0 7px;font-size:11px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;min-width:4px;transition:filter .14s}
.gbar:hover{filter:brightness(1.1)}
.tline{position:absolute;top:0;bottom:0;width:2px;background:var(--g4);z-index:5;opacity:.5}
.nodate-sec{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1)}
.nodate-sec h3{padding:11px 15px;font-size:10px;font-weight:700;color:var(--t4);border-bottom:1px solid var(--b0);text-transform:uppercase;letter-spacing:.5px}

/* ═══════════════════════════════════════════════════════════════
   GANTT V2 (Timeline)
═══════════════════════════════════════════════════════════════ */
.tl2-outer{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1)}
.tl2-scroll{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
.tl2-wrap{min-width:660px}
.tl2-header-row{display:flex;background:var(--s1);border-bottom:2px solid var(--b1)}
.tl2-lbl-col{width:200px;min-width:200px;padding:8px 13px;border-left:1px solid var(--b1);flex-shrink:0;font-size:10px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center}
.tl2-scale-col{flex:1;position:relative;height:28px;overflow:hidden}
.tl2-month-lbl{position:absolute;top:6px;font-size:10px;color:var(--t4);transform:translateX(50%);white-space:nowrap}
.tl2-month-tick{position:absolute;top:0;bottom:0;width:1px;background:var(--b0)}
.tl2-proj-hd-row{display:flex;background:var(--g5);border-top:2px solid var(--g4);border-bottom:1px solid var(--b1)}
.tl2-proj-hd-row.danger{background:var(--red-bg);border-top-color:var(--red)}
.tl2-proj-lbl-cell{width:200px;min-width:200px;padding:7px 13px;border-left:1px solid var(--b1);flex-shrink:0;display:flex;align-items:center;gap:5px;overflow:hidden}
.tl2-proj-icon{font-size:14px;flex-shrink:0}
.tl2-proj-name{font-size:12px;font-weight:800;color:var(--g3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.tl2-proj-pct-badge{font-size:11px;font-weight:700;color:var(--g3);background:#fff;padding:1px 6px;border-radius:8px;border:1px solid var(--g4);white-space:nowrap;flex-shrink:0}
.tl2-proj-hd-row.danger .tl2-proj-pct-badge{color:var(--red);border-color:var(--red)}
.tl2-proj-bar-cell{flex:1;position:relative;overflow:hidden;min-height:32px}
.tl2-proj-span-bar{position:absolute;top:9px;height:13px;border-radius:4px}
.tl2-task-row{display:flex;border-bottom:1px solid var(--b0)}
.tl2-task-row:last-child{border-bottom:1px solid var(--b1)}
.tl2-task-row.overdue{background:var(--red-bg)}
.tl2-task-row.done{opacity:.5}
.tl2-task-lbl-cell{width:200px;min-width:200px;padding:5px 13px 5px 19px;border-left:1px solid var(--b0);flex-shrink:0;display:flex;align-items:center;gap:6px;overflow:hidden}
.tl2-task-s-icon{font-size:11px;flex-shrink:0;width:13px;text-align:center}
.tl2-task-name{font-size:12px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.tl2-task-name.dn{text-decoration:line-through;color:var(--t4)}
.tl2-task-bar-cell{flex:1;position:relative;overflow:hidden;min-height:32px}
.tl2-today-line{position:absolute;top:0;bottom:0;width:2px;background:var(--g4);opacity:.55;z-index:3;pointer-events:none}
.tl2-today-line::after{content:'اليوم';position:absolute;top:4px;font-size:10px;color:var(--g3);font-weight:700;right:4px;white-space:nowrap}
.tl2-task-pill{position:absolute;top:6px;height:19px;min-width:70px;max-width:190px;border-radius:8px;display:flex;align-items:center;padding:0 7px;overflow:hidden;z-index:2;transition:filter .14s,transform .1s;cursor:default}
.tl2-task-pill:hover{filter:brightness(1.1);transform:scaleY(1.04)}
.tl2-pill-lbl{font-size:10px;color:rgba(255,255,255,.95);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl2-nodata{padding:32px;text-align:center;color:var(--t4);font-size:13px}
/* Timeline wrapper */
.tl-wrap{padding:14px 18px 18px;-webkit-overflow-scrolling:touch}
.tl-months-row{display:flex;align-items:flex-end;margin-right:162px;margin-left:106px;height:20px;position:relative;margin-bottom:5px}
.tl-month-lbl{position:absolute;font-size:10px;color:var(--t4);font-weight:600;white-space:nowrap;transform:translateX(50%)}
.tl-months-line{margin-right:162px;margin-left:106px;height:1px;background:var(--b1);margin-bottom:7px;position:relative}
.tl-months-tick{position:absolute;width:1px;height:5px;background:var(--b1);top:-2px}
.tl-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--b0)}
.tl-row:last-child{border-bottom:none}
.tl-proj-lbl{width:154px;min-width:154px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-bar-area{flex:1;height:28px;background:var(--s2);border-radius:6px;position:relative;overflow:hidden}
.tl-today-line{position:absolute;top:0;bottom:0;width:2px;background:var(--g4);z-index:5;opacity:.65}
.tl-today-line::before{content:'اليوم';position:absolute;top:-15px;font-size:10px;color:var(--g3);font-weight:700;transform:translateX(50%);white-space:nowrap}
.tl-bar-seg{position:absolute;top:3px;bottom:3px;border-radius:4px;display:flex;align-items:center;padding:0 7px;min-width:22px;overflow:hidden;transition:opacity .14s}
.tl-bar-seg:hover{opacity:.85}
.tl-bar-pct{font-size:11px;font-weight:700;color:rgba(255,255,255,.95);white-space:nowrap}
.tl-date-col{width:102px;min-width:102px;font-size:11px;color:var(--t4);display:flex;flex-direction:column;gap:1px;line-height:1.4}
.tl-date-start{color:var(--t4)}.tl-date-end{color:var(--t2);font-weight:600}
.tl-nodata{text-align:center;padding:28px;color:var(--t4);font-size:13px}

/* ═══════════════════════════════════════════════════════════════
   TIMELINE MOBILE
═══════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  .wbs-task-row,.wbs-col-heads{grid-template-columns:17px 1fr 56px;gap:5px}
  .wbs-task-ass,.wbs-task-due{display:none}
  .tl-proj-lbl{width:94px;min-width:94px;font-size:11px}
  .tl-date-col{display:none}
  .tl-months-row,.tl-months-line{margin-right:104px;margin-left:0}
}