/* ============================================================
   NAMA ERP — Projects / Area B (BOQ · import · schedule)
   يعتمد على متغيرات app.css؛ لا ألوان مكتوبة داخل JS.
   ============================================================ */

/* ---------- رأس الشاشة ومنتقي المشروع ---------- */
.boq-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.boq-picker { display: flex; align-items: center; gap: 8px; }
.boq-picker label { font-size: 12.5px; color: #8A6070; font-weight: 600; }
.boq-picker .select { min-width: 240px; }
.boq-head .tb-spacer { flex: 1; }

.boq-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.boq-cur { font-size: 11px; color: #93707F; font-weight: 500; }

.boq-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.boq-toolbar .search { min-width: 220px; }
.boq-toolbar .tb-spacer { flex: 1; }

.boq-dirty { background: #FFF7E6; border: 1px solid #E9D8A6; color: #8A6a20; border-radius: 10px;
  padding: 7px 12px; font-size: 12.5px; font-weight: 600; margin-bottom: 10px; }
.boq-hint { font-size: 12px; color: #93707F; margin: 10px 2px; }

/* ---------- بطاقة المرحلة ---------- */
.boq-phase { padding: 0; overflow: hidden; margin-bottom: 12px; }
.boq-phase .ph-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  background: linear-gradient(90deg, rgba(150,37,92,.06), transparent); flex-wrap: wrap; }
.boq-phase .ph-toggle { border: 0; background: transparent; cursor: pointer; color: #640F36; padding: 2px;
  display: inline-flex; }
.boq-phase .ph-toggle svg { width: 18px; height: 18px; transition: transform .18s ease; }
.boq-phase.closed .ph-toggle svg { transform: rotate(-90deg); }
[dir="rtl"] .boq-phase.closed .ph-toggle svg { transform: rotate(90deg); }
.boq-phase .ph-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 200px; }
.boq-phase .ph-title b { font-size: 14px; color: #3C2A33; }
.ph-code { font-family: ui-monospace, monospace; font-size: 11.5px; background: #FBEEF3; color: #640F36;
  border-radius: 6px; padding: 1px 7px; }
.ph-dates { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; }
.ph-dates svg { width: 13px; height: 13px; }
.boq-phase .ph-figs { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; flex-wrap: wrap; }
.ph-amount { font-family: ui-monospace, monospace; font-weight: 700; color: #640F36; font-size: 13.5px; }
.boq-phase .ph-actions { display: flex; gap: 4px; }
.boq-phase .ph-body { border-top: 1px solid #F0E6EB; }
.boq-phase.closed .ph-body { display: none; }

.boq-bar { display: inline-block; width: 74px; height: 8px; background: #F0E6EB; border-radius: 5px; overflow: hidden;
  vertical-align: middle; }
.boq-bar i { display: block; height: 100%; background: linear-gradient(90deg, #96255C, #C9A24B); }

/* ---------- شبكة البنود ---------- */
.boq-tbl td, .boq-tbl th { vertical-align: middle; }
.boq-tbl td.end, .boq-tbl th.end { text-align: end; }
.boq-tbl .boq-amt { font-weight: 600; color: #3C2A33; }
.boq-tbl .boq-exec { font-size: 11px; margin-inline-start: 6px; }
.boq-tbl tr.dirty td { background: #FFFBF0; }
.boq-tbl tr.boq-draft td { background: #F7FBF7; }
.boq-tbl tr.from-vo .boq-in { border-style: dashed; }
.boq-in { width: 100%; border: 1px solid transparent; border-radius: 7px; padding: 5px 7px; font: inherit;
  font-size: 12.5px; background: transparent; color: inherit; }
.boq-in:hover { border-color: #ECE0E6; }
.boq-in:focus { border-color: #96255C; background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(150,37,92,.10); }
.boq-in.num { text-align: end; font-family: ui-monospace, monospace; }
.boq-in.code { max-width: 90px; }
.boq-in.grow { flex: 1; min-width: 180px; }
.boq-tbl .td-actions { white-space: nowrap; }

/* ---------- الاستيراد ---------- */
.boq-imp-intro { padding: 12px 14px; font-size: 13px; color: #5A4450; line-height: 1.7; }
.boq-drop { text-align: center; padding: 34px 18px; border: 2px dashed #E2CFD9; cursor: pointer;
  transition: background .15s ease, border-color .15s ease; }
.boq-drop.over { background: #FBEEF3; border-color: #96255C; }
.boq-drop .d-ico { color: #96255C; margin-bottom: 8px; }
.boq-drop .d-ico svg { width: 40px; height: 40px; }
.boq-drop h3 { margin: 4px 0 6px; font-size: 15px; }
.boq-sample { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 12px; }
.boq-sample .muted { font-size: 12px; }
.boq-sample a { margin-inline-start: auto; }

.boq-map-card { padding: 0 0 10px; margin-bottom: 12px; }
.boq-map-card .ph-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid #F0E6EB; flex-wrap: wrap; }
.imp-maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; padding: 12px 14px; }
.imp-map { display: flex; align-items: center; gap: 8px; }
.imp-map label { font-size: 12px; color: #8A6070; font-weight: 600; min-width: 92px; }
.imp-map .select, .imp-map input.select { flex: 1; min-width: 110px; }
.imp-conf { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 7px; font-family: ui-monospace, monospace; }
.imp-conf.hi { background: #E6F5EC; color: #1E7A46; }
.imp-conf.mid { background: #FFF4DE; color: #8A6A20; }
.imp-conf.lo { background: #FDE9EC; color: #B02A3C; }
.boq-imp-actions { display: flex; align-items: center; gap: 10px; padding: 0 14px; flex-wrap: wrap; }
.boq-imp-actions .tb-spacer { flex: 1; }
.boq-imp-actions .muted { font-size: 11.5px; }

.boq-target { padding: 12px 14px; margin-bottom: 12px; display: grid; gap: 10px; }
.boq-warnbox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #FFF7E6;
  border: 1px solid #E9D8A6; color: #7A5A16; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 12px; }
.boq-warnbox svg { width: 17px; height: 17px; flex: none; }
.boq-warnbox .check { margin-inline-start: auto; }

.imp-phase .ph-head { gap: 8px; }
.imp-phase .select.sm { max-width: 190px; font-size: 12px; padding: 5px 8px; }
.imp-badge { display: inline-block; font-size: 10.5px; background: #FFF4DE; color: #8A6A20; border-radius: 6px;
  padding: 1px 6px; margin-inline-start: 5px; }
tr.imp-off td { opacity: .42; text-decoration: line-through; }
tr.imp-flag td { background: #FFFDF5; }

.boq-warn-list { padding: 0 0 10px; margin-bottom: 12px; }
.boq-warn-list .ph-head { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #F0E6EB; }
.boq-warn-list ul { margin: 8px 14px; padding-inline-start: 16px; }
.boq-warn-list li { font-size: 12.5px; margin-bottom: 5px; color: #5A4450; }
.boq-warn-list .w-row { font-family: ui-monospace, monospace; font-size: 11px; background: #FBEEF3; color: #640F36;
  border-radius: 5px; padding: 1px 6px; margin-inline-end: 5px; }
.muted-card { opacity: .82; }
.imp-file { font-size: 12.5px; word-break: break-all; }

.boq-commit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 26px; }
.boq-commit .tb-spacer { flex: 1; }
.boq-commit .btn.lg { padding: 11px 22px; font-size: 14px; }

/* ---------- الجدول الزمني (Gantt) ---------- */
.gantt-card { padding: 0; overflow: hidden; margin-bottom: 12px; }
.gantt-wrap { display: flex; align-items: stretch; }
.g-labels { flex: none; width: 232px; border-inline-end: 1px solid #F0E6EB; background: #FDFAFB; }
.g-lab-head { height: 40px; display: flex; align-items: flex-end; padding: 0 12px 8px; font-size: 12px;
  font-weight: 700; color: #8A6070; }
.g-lab { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 12.5px;
  border-top: 1px solid #F6EEF2; overflow: hidden; }
.g-lab-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.g-lab.crit { background: #FBEEF3; font-weight: 600; }
.g-lab .muted { font-size: 11px; font-family: ui-monospace, monospace; }
.g-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; }

svg.gantt { display: block; }
svg.gantt .g-row { fill: #fff; }
svg.gantt .g-row.alt { fill: #FDFAFB; }
svg.gantt .g-grid { stroke: #EFE4EA; stroke-width: 1; }
svg.gantt .g-grid.week { stroke: #F7F0F3; }
svg.gantt .g-mon { fill: #8A6070; font-size: 10.5px; font-weight: 600; }
svg.gantt .g-plan { fill: #E2CBD8; }
svg.gantt .g-prog { fill: #96255C; }
svg.gantt .g-actual { fill: #C9A24B; }
svg.gantt .g-actual.late { fill: #D9534F; }
svg.gantt .g-bar.crit .g-plan { stroke: #C9A24B; stroke-width: 1.4; }
svg.gantt .g-link { fill: none; stroke: #C9A2B4; stroke-width: 1.2; stroke-dasharray: 3 3; }
svg.gantt .g-today { stroke: #D9534F; stroke-width: 1.4; stroke-dasharray: 4 3; }
svg.gantt .g-today-l { fill: #D9534F; font-size: 10px; font-weight: 700; }

.g-legend { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: #6A5560; flex-wrap: wrap; }
.g-legend span { display: inline-flex; align-items: center; gap: 5px; }
.g-legend i { width: 14px; height: 9px; border-radius: 3px; display: inline-block; }
.g-legend .k-plan { background: #E2CBD8; }
.g-legend .k-prog { background: #96255C; }
.g-legend .k-actual { background: #C9A24B; }
.g-legend .k-crit { background: transparent; border: 1.5px solid #C9A24B; }
.crit-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #C9A24B;
  margin-inline-end: 6px; vertical-align: middle; }

@media (max-width: 780px) {
  .g-labels { width: 140px; }
  .boq-picker .select { min-width: 160px; }
  .boq-phase .ph-figs { width: 100%; margin-inline-start: 0; }
}