/* ═══════════════════════════════════════════════════════════════
   Manzoma Modal Styles
   Phase 2 split: extracted runtime support styles from style.css.
   Load order: tokens.css → base.css → layout.css → components.css → pages → support styles → style.css.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════════════════ */
.overlay{
  position:fixed;inset:0;background:rgba(8,22,14,.48);
  z-index:200;display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.overlay.open{display:flex}
.modal{
  background:var(--s0);border-radius:var(--r);
  width:560px;max-width:96vw;
  box-shadow:var(--sh3);overflow:hidden;
  animation:modal-in .24s var(--ease-out);
  border:1px solid var(--b0);
}
.modal-sm{width:400px}
@keyframes modal-in{from{opacity:0;transform:scale(.94) translateY(14px)}to{opacity:1;transform:none}}
/* mhd — see unified modal header section below */
.mx{
  width:32px;height:32px;border-radius:50%;
  background:var(--s2);display:flex;align-items:center;justify-content:center;
  color:var(--t3);font-size:var(--fz-base);cursor:pointer;
  transition:background .14s,color .14s,border-color .14s;border:1px solid var(--b0);
}
.mx:hover{background:var(--red-bg);color:var(--red);border-color:var(--red)}
.mbd{padding:var(--sp5);display:flex;flex-direction:column;gap:var(--sp4)}
.fr{display:flex;flex-direction:column;gap:var(--sp2)}
.fr label{font-size:var(--fz-xs);font-weight:700;color:var(--t4);letter-spacing:.5px;text-transform:uppercase}
.fr input,.fr select,.fr textarea{
  padding:11px 13px;border:1px solid var(--b1);
  border-radius:var(--r3);font-size:var(--fz-base);color:var(--t1);
  background:var(--s1);outline:none;transition:border-color .16s,background .16s,box-shadow .16s;
  font-family:var(--ff);
}
.fr input:focus,.fr select:focus,.fr textarea:focus{border-color:var(--g4);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.fr textarea{resize:vertical;min-height:80px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4)}
.mft{
  padding:var(--sp4) var(--sp5);border-top:1px solid var(--b0);
  display:flex;justify-content:flex-end;gap:var(--sp2);
  align-items:center;background:var(--s1);
}
.bc{
  padding:10px 18px;background:var(--s2);border-radius:var(--r3);
  font-size:var(--fz-base);color:var(--t2);font-weight:600;
  transition:background .14s,border-color .14s;border:1px solid var(--b1);
  min-height:40px;cursor:pointer;font-family:var(--ff);
}
.bc:hover{background:var(--s3);border-color:var(--b2)}
.mmsg{font-size:var(--fz-sm);flex:1}
.mmsg.ok{color:var(--green)}.mmsg.err{color:var(--red)}.mmsg.wait{color:var(--amber)}

/* ── Unified Modal Header Variants ────────────────────────── */
.mhd{
  padding:var(--sp4) var(--sp5);border-bottom:1px solid var(--b0);
  display:flex;align-items:center;gap:var(--sp3);
  background:var(--s1);
}
.mhd-icon{
  width:42px;height:42px;border-radius:var(--r2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fz-lg);background:var(--s2);border:1px solid var(--b1);
}
.mhd-info{flex:1;min-width:0}
.mhd-info h2{font-size:var(--fz-md);font-weight:800;color:var(--t1);line-height:1.3;letter-spacing:-.2px}
.mhd-sub{font-size:var(--fz-xs);color:var(--t4);margin-top:3px;font-weight:500}

/* Header accent strips */
.mhd-purple{border-top:3px solid var(--purple)}
.mhd-purple .mhd-icon{background:var(--purple-bg);color:var(--purple);border-color:rgba(99,48,184,.18)}
.mhd-blue{border-top:3px solid var(--blue)}
.mhd-blue .mhd-icon{background:var(--blue-bg);color:var(--blue);border-color:rgba(11,101,163,.18)}
.mhd-green{border-top:3px solid var(--g4)}
.mhd-green .mhd-icon{background:var(--g5);color:var(--g3);border-color:rgba(45,122,87,.18)}
.mhd-amber{border-top:3px solid var(--amber)}
.mhd-amber .mhd-icon{background:var(--amber-bg);color:var(--amber);border-color:rgba(168,90,4,.20)}

/* ── Unified modal task preview ─────────────────────────────── */
.modal-task-preview{
  background:var(--s1);border:1px solid var(--b1);
  border-radius:var(--r3);padding:11px 14px;
  font-size:13px;font-weight:700;color:var(--t1);
  line-height:1.5;position:relative;overflow:hidden;
}
.modal-task-preview::before{
  content:'';position:absolute;right:0;top:0;bottom:0;
  width:3px;background:var(--g4);border-radius:0 3px 3px 0;
}

/* ── Modal info row (current value display) ─────────────────── */
.modal-info-row{
  display:flex;align-items:center;gap:8px;
  font-size:12px;padding:7px 12px;
  background:var(--s2);border-radius:var(--r3);
  border:1px solid var(--b0);
}
.modal-info-label{color:var(--t4);font-weight:600;flex-shrink:0}
.modal-info-val{color:var(--t2);font-weight:700}

/* ── Modal hint box ─────────────────────────────────────────── */
.modal-hint{
  display:flex;align-items:flex-start;gap:7px;
  font-size:12px;color:var(--t3);line-height:1.6;
  background:var(--purple-bg);border-radius:var(--r3);
  padding:9px 12px;border:1px solid rgba(99,48,184,.12);
}
.modal-hint-icon{flex-shrink:0;color:var(--purple);font-weight:700;font-size:13px}

/* ── Modal select enhanced ─────────────────────────────────── */
.modal-select{
  padding:10px 12px;border:1.5px solid var(--b1);
  border-radius:var(--r3);font-size:13px;color:var(--t1);
  background:var(--s1);outline:none;transition:all .16s;
  width:100%;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238FB09F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 12px center;
  padding-left:34px;
}
.modal-select:focus{border-color:var(--g4);background-color:#fff;box-shadow:0 0 0 3px var(--accent-soft)}

/* ── Modal date input ─────────────────────────────────────── */
.modal-date-input{
  padding:10px 12px;border:1.5px solid var(--b1);
  border-radius:var(--r3);font-size:13px;color:var(--t1);
  background:var(--s1);outline:none;transition:all .16s;width:100%;
}
.modal-date-input:focus{border-color:var(--purple);background:#fff;box-shadow:0 0 0 3px rgba(99,48,184,.09)}

/* ── Modal action buttons ──────────────────────────────────── */
.btn-modal-purple{
  padding:9px 18px;border-radius:var(--r3);font-size:13px;font-weight:700;
  background:var(--purple);color:#fff;border:none;
  transition:all .16s;cursor:pointer;letter-spacing:.1px;
}
.btn-modal-purple:hover{background:#7940cc;box-shadow:0 4px 12px rgba(99,48,184,.3)}
.btn-modal-purple:disabled{opacity:.6;cursor:not-allowed}
.btn-modal-blue{
  padding:9px 18px;border-radius:var(--r3);font-size:13px;font-weight:700;
  background:var(--blue);color:#fff;border:none;
  transition:all .16s;cursor:pointer;letter-spacing:.1px;
}
.btn-modal-blue:hover{background:#0a58a0;box-shadow:0 4px 12px rgba(11,101,163,.3)}
.btn-modal-blue:disabled{opacity:.6;cursor:not-allowed}

/* Task name preview in modals — keep for backward compat */
.move-task-preview{
  background:var(--g6);border:1px solid var(--b0);
  border-right:3px solid var(--g4);
  border-radius:var(--r3);padding:10px 13px;
  font-size:13px;font-weight:700;color:var(--t1);
}
/* Approval modal */
.approval-task-preview{
  background:var(--g6);border:1px solid var(--b0);
  border-right:3px solid var(--g4);
  border-radius:var(--r3);padding:11px 13px;
  font-size:13px;font-weight:700;color:var(--t1);
}
.approval-question{font-size:15px;font-weight:800;color:var(--t1);margin-bottom:9px}
.approval-hint{
  font-size:12px;color:var(--t3);line-height:1.65;
  background:var(--amber-bg);border-radius:var(--r3);
  padding:10px 12px;border:1px solid rgba(168,90,4,.16);
}
.approval-hint strong{color:var(--amber)}
.approval-hint em{color:var(--g3);font-style:normal;font-weight:600}
.approval-no-btn{
  background:var(--amber-bg);color:var(--amber);
  border:1px solid rgba(168,90,4,.24);
  transition:background .13s,color .13s;
}
.approval-no-btn:hover{background:var(--amber);color:#fff;border-color:var(--amber)}

/* ═══════════════════════════════════════════════════════════════
   PDF IMPORT MODAL
═══════════════════════════════════════════════════════════════ */
.modal-lg{width:680px;max-width:96vw}

.pdf-tip{
  display:flex;align-items:flex-start;gap:7px;
  font-size:11.5px;color:var(--t4);
  background:var(--s2);border-radius:6px;
  padding:8px 12px;margin-top:6px;line-height:1.5;
}
.pdf-tip svg{flex-shrink:0;margin-top:2px;color:var(--blue)}

.pdf-tasks-count{
  font-size:12px;font-weight:700;color:var(--g3);
  margin-bottom:8px;padding:6px 10px;
  background:var(--g5);border-radius:6px;
  border-right:3px solid var(--g3);
}

.pdf-task-list{
  display:flex;flex-direction:column;gap:4px;
  max-height:340px;overflow-y:auto;
}
.pdf-task-row{
  display:flex;align-items:center;gap:8px;
  background:var(--s1);border:1px solid var(--b0);
  border-radius:6px;padding:7px 10px;
  transition:border-color .12s;
}
.pdf-task-row:hover{border-color:var(--g4)}

.pdf-task-num{
  font-size:10px;font-weight:800;color:var(--t4);
  min-width:18px;text-align:center;
}
.pdf-task-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.pdf-task-name{
  width:100%;border:1px solid var(--b1);border-radius:4px;
  padding:4px 8px;font-size:12.5px;font-family:var(--ff);
  background:var(--s0);color:var(--t1);outline:none;
  transition:border-color .12s;
}
.pdf-task-name:focus{border-color:var(--g4);box-shadow:0 0 0 2px var(--accent-soft)}
.pdf-task-meta{
  display:flex;gap:5px;flex-wrap:wrap;align-items:center;
}
.pdf-task-date,.pdf-task-ass{
  padding:3px 7px;font-size:11px;font-family:var(--ff);
  border:1px solid var(--b1);border-radius:4px;
  background:var(--s0);color:var(--t2);outline:none;
  transition:border-color .12s;
}
.pdf-task-date:focus,.pdf-task-ass:focus{border-color:var(--g4)}
.pdf-task-remove{
  width:24px;height:24px;border-radius:50%;border:none;
  background:transparent;color:var(--t4);font-size:12px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .12s;flex-shrink:0;
}
.pdf-task-remove:hover{background:var(--red-bg);color:var(--red)}

/* ═══════════════════════════════════════════════════════════════
   LISTS SETTINGS MODAL
═══════════════════════════════════════════════════════════════ */
.ls-container{
  display:flex;flex-direction:column;gap:4px;
  max-height:240px;overflow-y:auto;
  background:var(--s1);border:1px solid var(--b0);
  border-radius:var(--r2);padding:6px;
}
.ls-row{
  display:flex;align-items:center;gap:10px;
  background:var(--s0);border:1px solid var(--b0);
  border-radius:6px;padding:8px 12px;
  transition:border-color .12s;
}
.ls-row:hover{border-color:var(--g4)}
.ls-row-info{flex:1;min-width:0}
.ls-row-name{font-size:13px;font-weight:600;color:var(--t1)}
.ls-row-id{font-size:10px;color:var(--t4);margin-top:2px;font-family:monospace}
.ls-remove-btn{
  width:24px;height:24px;border-radius:50%;border:none;
  background:transparent;color:var(--t4);font-size:12px;
  cursor:pointer;transition:all .12s;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.ls-remove-btn:hover{background:var(--red-bg);color:var(--red)}
.ls-add-row{display:flex;gap:8px;align-items:flex-start}
.ls-add-fields{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.ls-add-fields input{
  padding:7px 10px;border:1.5px solid var(--b1);border-radius:6px;
  font-size:12.5px;font-family:var(--ff);background:var(--s0);color:var(--t1);
  outline:none;transition:border-color .13s;min-width:0;
}
.ls-add-fields input:focus{border-color:var(--g4)}
.ls-help-tip{
  display:flex;align-items:flex-start;gap:6px;
  font-size:11px;color:var(--t4);margin-top:8px;
  background:var(--s2);border-radius:6px;padding:7px 10px;
  line-height:1.5;
}
.ls-help-tip svg{flex-shrink:0;margin-top:1px}
.ls-help-tip code{
  background:var(--s3);padding:1px 5px;border-radius:3px;
  font-size:10.5px;color:var(--t2);
}

/* ── Lists Settings — folder grouping ───────────────────────── */
.ls-folder-group{margin-bottom:10px}
.ls-folder-hd{
  display:flex;align-items:center;gap:5px;
  font-size:10px;font-weight:800;color:var(--t4);
  text-transform:uppercase;letter-spacing:.5px;
  padding:4px 6px 4px 0;
  border-bottom:1px solid var(--b0);margin-bottom:4px;
}

/* ── Lists Settings — folder groups ─────────────────────────── */
.ls-folder-group{margin-bottom:8px}
.ls-folder-hd{
  display:flex;align-items:center;gap:5px;
  font-size:10px;font-weight:800;color:var(--t4);
  text-transform:uppercase;letter-spacing:.5px;
  padding:4px 6px;margin-bottom:3px;
}

/* PROJECTS PAGE — Product section headers styles moved to styles/pages/projects.css. */

/* PENDING PAGE styles moved to styles/pages/pending.css. */

/* WBS TREE — Project page inline + panel styles moved to styles/pages/project-page.css. */

/* PIPELINE GANTT (خط المنتج) — جدول زمني احترافي styles moved to styles/pages/pipeline.css. */

/* TIMELINE / خط المنتج — Task-based Gantt styles moved to styles/pages/pipeline.css. */

/* SINGLE-LINE TIMELINE  (خط المنتج) styles moved to styles/pages/pipeline.css. */

/* XTL — Professional Timeline CSS  v2 styles moved to styles/pages/pipeline.css. */

/* PRODUCT PIPELINE — خط المنتج styles moved to styles/pages/pipeline.css. */

/* FILTERS REDESIGN + SUBTASK STYLES styles moved to styles/pages/tasks.css. */

/* SUBTASK HIERARCHICAL DISPLAY styles moved to styles/pages/tasks.css. */

/* ON-HOLD PROJECT CARD — Professional Visual Treatment styles moved to styles/pages/projects.css. */