/* ============================================================
   منصة متابعة الأعمال — ورقة الأنماط
   تصميم هادئ احترافي · مسطح · RTL · وضع ليلي · متجاوب
   ============================================================ */

/* ---------- المتغيرات (الوضع النهاري) ---------- */
:root{
  --font: "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;

  --bg: #f2f5f6;
  --surface: #ffffff;
  --surface2: #f7f9fa;
  --surface3: #eef2f3;
  --border: #dfe6e8;
  --border-strong: #c9d3d6;

  --text: #10231f;
  --text2: #4b605c;
  --muted: #7d908c;

  --primary: #0d9488;
  --primary-strong: #0b7d72;
  --on-primary: #ffffff;
  --primary-weak: #e4f5f2;
  --ring: rgba(13,148,136,.35);

  --red: #d64545;      --red-bg: #fdeeee;      --red-text: #a33030;
  --orange: #e07a1f;   --orange-bg: #fdf1e3;   --orange-text: #a3560f;
  --yellow: #d99a12;   --yellow-bg: #fbf4dd;   --yellow-text: #8a6a0a;
  --gray: #8a9995;     --gray-bg: #eef1f1;     --gray-text: #5a6b67;
  --green: #2e9e5b;    --green-bg: #e7f6ec;    --green-text: #1f7040;
  --blue: #2f6fb0;     --blue-bg: #e8f1fa;     --blue-text: #235480;
  --violet: #7757c9;   --violet-bg: #efeafb;   --violet-text: #553d9b;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16,35,31,.05), 0 2px 8px rgba(16,35,31,.05);
  --shadow-lg: 0 8px 32px rgba(16,35,31,.16);
  --sidebar-w: 244px;
  --topbar-h: 60px;
}

/* ---------- الوضع الليلي ---------- */
[data-theme="dark"]{
  --bg: #0e1517;
  --surface: #16201f;
  --surface2: #1a2624;
  --surface3: #21302d;
  --border: #263633;
  --border-strong: #344844;

  --text: #e6efec;
  --text2: #a4b8b3;
  --muted: #71837f;

  --primary: #2bb8a9;
  --primary-strong: #3cccbc;
  --on-primary: #06211e;
  --primary-weak: #14352f;
  --ring: rgba(43,184,169,.4);

  --red: #e06c6c;      --red-bg: #3a2222;      --red-text: #f0a3a3;
  --orange: #e6934a;   --orange-bg: #3a2c1d;   --orange-text: #efb884;
  --yellow: #d9b254;   --yellow-bg: #38311c;   --yellow-text: #e5cd8d;
  --gray: #8a9995;     --gray-bg: #22302d;     --gray-text: #a8b8b4;
  --green: #4cb878;    --green-bg: #1c3527;    --green-text: #8ed3aa;
  --blue: #5f96cc;     --blue-bg: #1c2e40;     --blue-text: #9dc3e6;
  --violet: #9b82dd;   --violet-bg: #2b2440;   --violet-text: #c3b3ef;

  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.25);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.5);
}

/* ---------- أساسيات ---------- */
*{ box-sizing: border-box; }
html{ font-size: 16px; }
body{
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button{ font-family: inherit; }
input, select, textarea{ font-family: inherit; font-size: 1rem; color: var(--text); }
::selection{ background: var(--primary); color: var(--on-primary); }

:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.visually-hidden{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hidden{ display: none !important; }
.muted{ color: var(--muted); }
.spacer{ flex: 1; }

/* ---------- التخطيط العام ---------- */
.app{ display: flex; min-height: 100vh; }

.sidebar{
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-inline-start: 0;
  border-inline-end: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
}
.brand{
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px;
  cursor: pointer;
  user-select: none;
}
.brand-logo{
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center; flex-shrink: 0;
}
.brand-logo svg{ width: 21px; height: 21px; }
.brand-name{ font-weight: 700; font-size: 1.08rem; letter-spacing: -.2px; }

.side-nav{ flex: 1; padding: 6px 10px; overflow-y: auto; }
.nav-item{
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 0; background: none;
  color: var(--text2);
  font-size: .98rem; font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
  text-align: start;
  margin-bottom: 2px;
}
.nav-item:hover{ background: var(--surface2); color: var(--text); }
.nav-item.active{ background: var(--primary-weak); color: var(--primary-strong); font-weight: 600; }
.nav-item svg{ width: 20px; height: 20px; flex-shrink: 0; }
.nav-item .nav-count{
  margin-inline-start: auto;
  font-size: .76rem; font-weight: 700;
  background: var(--surface3); color: var(--text2);
  border-radius: 99px; padding: 1px 8px; min-width: 22px; text-align: center;
}
.nav-item.active .nav-count{ background: var(--primary); color: var(--on-primary); }

.side-foot{ padding: 10px; border-top: 1px solid var(--border); }
.side-ver{ font-size: .72rem; color: var(--muted); padding: 6px 12px 4px; }

.main{ flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- الشريط العلوي ---------- */
.topbar{
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
}
.searchbox{
  flex: 1; max-width: 460px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 12px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.searchbox:focus-within{ border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.searchbox input{ border: 0; background: none; outline: none; width: 100%; font-size: .95rem; }
.searchbox input::-webkit-search-cancel-button{ -webkit-appearance: none; }
.search-ic svg, .menu-btn svg{ width: 18px; height: 18px; }
.search-ic{ color: var(--muted); display: grid; place-items: center; }

.top-actions{ display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

.icon-btn{
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; background: none; color: var(--text2);
  border-radius: 10px; cursor: pointer;
  transition: background .16s ease, color .16s ease;
  position: relative;
  flex-shrink: 0;
}
.icon-btn:hover{ background: var(--surface3); color: var(--text); }
.icon-btn svg{ width: 20px; height: 20px; }
.icon-btn.sm{ width: 30px; height: 30px; border-radius: 8px; }
.icon-btn.sm svg{ width: 16px; height: 16px; }
.icon-btn.danger:hover{ background: var(--red-bg); color: var(--red); }

.badge-count{
  position: absolute; top: 2px; inset-inline-start: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--red); color: #fff;
  border-radius: 99px;
  font-size: .68rem; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--surface);
}

/* الأزرار */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: .93rem; font-weight: 600;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .1s ease;
  white-space: nowrap;
}
.btn:hover{ background: var(--surface2); }
.btn:active{ transform: scale(.98); }
.btn svg{ width: 17px; height: 17px; }
.btn-primary{ background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover{ background: var(--primary-strong); border-color: var(--primary-strong); }
.btn-danger{ background: none; border-color: var(--border-strong); color: var(--red); }
.btn-danger:hover{ background: var(--red-bg); border-color: var(--red); }
.btn-ghost{ border-color: transparent; background: none; color: var(--primary-strong); }
.btn-ghost:hover{ background: var(--primary-weak); }
.btn-sm{ padding: 6px 12px; font-size: .85rem; border-radius: 8px; }
.link{
  background: none; border: 0; color: var(--primary-strong);
  font-weight: 600; font-size: .88rem; cursor: pointer;
  padding: 8px 4px 0; text-align: start;
}
.link:hover{ text-decoration: underline; }

/* ---------- منطقة العرض ---------- */
.view-root{ padding: 22px 24px 90px; max-width: 1280px; width: 100%; margin: 0 auto; }

.page-head{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h2{ margin: 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -.3px; }
.page-head .page-sub{ color: var(--muted); font-size: .9rem; width: 100%; margin-top: -6px; }

/* البطاقات */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card + .card{ margin-top: 14px; }
.card-head{
  display: flex; align-items: center; gap: 10px;
  margin: -4px 0 12px;
}
.card-head h3{ margin: 0; font-size: 1.02rem; font-weight: 700; }
.count{
  min-width: 24px; height: 24px; padding: 0 8px;
  background: var(--surface3); color: var(--text2);
  border-radius: 99px; font-size: .8rem; font-weight: 700;
  display: inline-grid; place-items: center;
}
.count.red{ background: var(--red-bg); color: var(--red-text); }
.count.orange{ background: var(--orange-bg); color: var(--orange-text); }
.count.green{ background: var(--green-bg); color: var(--green-text); }
.count.blue{ background: var(--blue-bg); color: var(--blue-text); }

/* ---------- الإضافة السريعة ---------- */
.quickadd{ margin-bottom: 16px; }
.quickadd .qa-row{ display: flex; gap: 8px; }
.quickadd input{
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--surface2);
  border-radius: 10px;
  padding: 11px 14px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.quickadd input:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); background: var(--surface); }
.qa-hint{ font-size: .78rem; color: var(--muted); margin-top: 8px; line-height: 1.7; }
.qa-hint b{ color: var(--text2); font-weight: 600; }

/* ---------- الملخص الذكي ---------- */
.summary-card{
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 72%, #134e4a) 100%);
  color: var(--on-primary);
  border: 0;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.summary-card h3{ margin: 0 0 10px; font-size: 1.08rem; display: flex; align-items: center; gap: 9px; }
.summary-card h3 .date{ font-weight: 400; font-size: .84rem; opacity: .85; margin-inline-start: auto; }
.summary-card ul{ margin: 0; padding: 0; list-style: none; }
.summary-card li{ padding: 3px 0; font-size: .95rem; opacity: .96; }
.summary-top{ margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.22); }
.summary-top .st-title{ font-weight: 700; font-size: .9rem; margin-bottom: 8px; }
.summary-top ol{ margin: 0; padding-inline-start: 20px; }
.summary-top li{ padding: 2px 0; }
.summary-top .reason{ opacity: .8; font-size: .84rem; }
.summary-top [data-action]{ cursor: pointer; }
.summary-top [data-action]:hover{ text-decoration: underline; }

/* شرائط الإحصاءات */
.stats-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.stat{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 11px;
  cursor: pointer;
  transition: border-color .16s ease, transform .12s ease;
}
.stat:hover{ border-color: var(--border-strong); transform: translateY(-1px); }
.stat .num{ font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.stat .lbl{ font-size: .78rem; color: var(--text2); }
.stat .s-ic{ width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; font-size: 1rem; }
.stat .s-ic svg{ width: 18px; height: 18px; }
.s-red{ background: var(--red-bg); color: var(--red); }
.s-orange{ background: var(--orange-bg); color: var(--orange); }
.s-green{ background: var(--green-bg); color: var(--green); }
.s-blue{ background: var(--blue-bg); color: var(--blue); }
.s-gray{ background: var(--gray-bg); color: var(--gray-text); }
.s-violet{ background: var(--violet-bg); color: var(--violet); }

/* شبكة أقسام اللوحة */
.dash-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}
.dash-grid .card{ margin: 0; display: flex; flex-direction: column; }
.sec-list{ display: flex; flex-direction: column; }
.card .link{ align-self: flex-start; }

.mini-item{
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .14s ease;
}
.mini-item:hover{ background: var(--surface2); }
.mini-dot{
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0; font-size: .82rem;
  border: 1px solid var(--border);
  margin-top: 1px;
}
.imp-critical .mini-dot, .mini-dot.imp-critical{ background: var(--red-bg); }
.mini-dot.imp-high{ background: var(--orange-bg); }
.mini-dot.imp-medium{ background: var(--yellow-bg); }
.mini-dot.imp-normal{ background: var(--gray-bg); }
.mini-body{ min-width: 0; flex: 1; }
.mini-title{ font-weight: 600; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-meta{ font-size: .78rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 0; align-items: center; }
.mini-meta .sep{ margin: 0 6px; opacity: .5; }

/* ---------- الشارات ---------- */
.pill{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: .78rem; font-weight: 600;
  white-space: nowrap;
}
.pill .pdot{ width: 8px; height: 8px; border-radius: 99px; display: inline-block; }
.imp-critical{ background: var(--red-bg); color: var(--red-text); }
.imp-critical .pdot{ background: var(--red); }
.imp-high{ background: var(--orange-bg); color: var(--orange-text); }
.imp-high .pdot{ background: var(--orange); }
.imp-medium{ background: var(--yellow-bg); color: var(--yellow-text); }
.imp-medium .pdot{ background: var(--yellow); }
.imp-normal{ background: var(--gray-bg); color: var(--gray-text); }
.imp-normal .pdot{ background: var(--gray); }

.st-not_started{ background: var(--gray-bg); color: var(--gray-text); }
.st-in_progress{ background: var(--blue-bg); color: var(--blue-text); }
.st-waiting{ background: var(--violet-bg); color: var(--violet-text); }
.st-completed{ background: var(--green-bg); color: var(--green-text); }
.st-cancelled{ background: var(--surface3); color: var(--muted); text-decoration: line-through; }
.st-late{ background: var(--red-bg); color: var(--red-text); }

.proj-tag{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600; color: var(--text2);
  white-space: nowrap;
}
.proj-tag::before{
  content: ""; width: 9px; height: 9px; border-radius: 3px;
  background: var(--pc, var(--primary)); flex-shrink: 0;
}

.rem-late{ color: var(--red); font-weight: 600; font-size: .84rem; }
.rem-soon{ color: var(--orange); font-weight: 600; font-size: .84rem; }
.rem-ok{ color: var(--muted); font-size: .84rem; }
.rem-done{ color: var(--green); font-size: .84rem; }

.dep-flag{ font-size: .78rem; color: var(--violet-text); background: var(--violet-bg); border-radius: 6px; padding: 0 6px; margin-inline-start: 6px; white-space: nowrap; }
.sub{ display: block; font-size: .78rem; color: var(--muted); font-weight: 400; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- الجدول ---------- */
.toolbar{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.chip-row{ display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.chip{
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  font-size: .86rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all .15s ease;
}
.chip:hover{ border-color: var(--border-strong); color: var(--text); }
.chip.active{ background: var(--text); border-color: var(--text); color: var(--surface); }
.chip .c-n{ opacity: .65; font-size: .78rem; margin-inline-start: 3px; }
.chip.chip-danger.active{ background: var(--red); border-color: var(--red); }

.select-row{ display: flex; gap: 8px; flex-wrap: wrap; }
.select-row select{
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 9px;
  padding: 7px 10px;
  font-size: .86rem;
  outline: none;
  max-width: 190px;
  cursor: pointer;
}
.select-row select:focus{ border-color: var(--primary); }
.result-line{ font-size: .82rem; color: var(--muted); }

.table-wrap{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: auto;
}
table.tbl{ width: 100%; border-collapse: collapse; min-width: 860px; }
.tbl th{
  text-align: start;
  font-size: .76rem; font-weight: 700; color: var(--muted);
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  position: sticky; top: 0; z-index: 2;
  white-space: nowrap;
}
.tbl th.sortable{ cursor: pointer; user-select: none; }
.tbl th.sortable:hover{ color: var(--text); }
.tbl th .arr{ font-size: .7rem; }
.tbl td{ padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: .9rem; vertical-align: top; }
.tbl tbody tr:last-child td{ border-bottom: 0; }
.tbl tbody tr{ transition: background .12s ease; }
.tbl tbody tr:hover{ background: var(--surface2); }
.row-click{ cursor: pointer; }
.cell-title .t{ font-weight: 600; }
.cell-actions{ white-space: nowrap; width: 1%; }
.cell-actions .icon-btn{ opacity: .55; }
tr:hover .cell-actions .icon-btn{ opacity: 1; }

/* ---------- بطاقة فارغة ---------- */
.empty{
  text-align: center; color: var(--muted);
  padding: 34px 16px; font-size: .92rem;
}
.empty .big{ font-size: 1.9rem; display: block; margin-bottom: 8px; opacity: .7; }
.empty.sm{ padding: 18px 10px; font-size: .85rem; }
.empty .btn{ margin-top: 12px; }

/* ---------- المشاريع ---------- */
.proj-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.proj-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
  position: relative;
  overflow: hidden;
}
.proj-card::before{
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px;
  background: var(--pc, var(--primary));
}
.proj-card:hover{ transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.proj-card h3{ margin: 4px 0 4px; font-size: 1.05rem; }
.proj-card .pc-meta{ display: flex; gap: 12px; font-size: .8rem; color: var(--muted); flex-wrap: wrap; margin-bottom: 12px; }
.proj-card .pc-meta b{ color: var(--text2); }
.progress{ height: 7px; background: var(--surface3); border-radius: 99px; overflow: hidden; }
.progress-bar{ height: 100%; background: var(--primary); border-radius: 99px; transition: width .3s ease; }
.pc-foot{ display: flex; align-items: center; justify-content: space-between; margin-top: 7px; font-size: .78rem; color: var(--muted); }
.pc-actions{ position: absolute; top: 12px; inset-inline-end: 10px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s ease; }
.proj-card:hover .pc-actions{ opacity: 1; }

/* صفحة المشروع */
.proj-hero{ border-inline-start: 4px solid var(--pc, var(--primary)); }
.proj-hero h2{ margin: 0; }
.proj-hero .ph-meta{ display: flex; gap: 16px; flex-wrap: wrap; color: var(--text2); font-size: .88rem; margin-top: 8px; }
.proj-hero .ph-meta b{ font-size: 1.05rem; color: var(--text); }
.progress-wrap{ margin-top: 12px; }
.progress-wrap .progress{ height: 9px; }
.pw-lbl{ display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-top: 5px; }

/* ---------- العرض الزمني ---------- */
.day-group{ margin-bottom: 20px; }
.day-head{
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 2px 8px; font-weight: 700; font-size: .95rem;
}
.day-head .d-c{ color: var(--muted); font-weight: 400; font-size: .8rem; }
.day-head.late-head{ color: var(--red); }
.time-card{ padding: 4px 14px; }

/* ---------- التقرير الأسبوعي ---------- */
.week-nav{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.week-label{ font-weight: 700; font-size: 1rem; }
.report-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.report-grid .card{ margin: 0; }
.report-grid .wide{ grid-column: 1 / -1; }
.rep-line{ display: flex; justify-content: space-between; padding: 6px 2px; border-bottom: 1px dashed var(--border); font-size: .92rem; }
.rep-line:last-child{ border-bottom: 0; }
.rep-line b{ font-weight: 700; }
.rep-proj{ padding: 10px 2px; border-bottom: 1px dashed var(--border); }
.rep-proj:last-child{ border-bottom: 0; }
.rep-proj .rp-name{ font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.rep-proj .rp-row{ display: flex; gap: 14px; font-size: .85rem; color: var(--text2); flex-wrap: wrap; }

/* ---------- سجل النشاط ---------- */
.timeline{ position: relative; padding-inline-start: 20px; }
.timeline::before{
  content: ""; position: absolute; inset-inline-start: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border); border-radius: 2px;
}
.tl-item{ position: relative; padding: 7px 0 12px; }
.tl-item::before{
  content: ""; position: absolute; inset-inline-start: -20px; top: 14px;
  width: 12px; height: 12px; border-radius: 99px;
  background: var(--surface); border: 3px solid var(--primary);
}
.tl-item.tl-red::before{ border-color: var(--red); }
.tl-item.tl-green::before{ border-color: var(--green); }
.tl-item.tl-gray::before{ border-color: var(--border-strong); }
.tl-head{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-what{ font-weight: 600; font-size: .92rem; }
.tl-detail{ color: var(--text2); font-size: .88rem; }
.tl-when{ color: var(--muted); font-size: .76rem; }
.tl-item [data-action="open-item"]{ cursor: pointer; }
.tl-item [data-action="open-item"]:hover{ color: var(--primary-strong); text-decoration: underline; }

/* ---------- النوافذ ---------- */
.overlay{
  position: fixed; inset: 0;
  background: rgba(10,20,18,.5);
  backdrop-filter: blur(3px);
  z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px 16px;
  overflow-y: auto;
  animation: fadeIn .15s ease;
}
@keyframes fadeIn{ from{ opacity: 0; } }
.modal{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 640px;
  animation: popIn .18s ease;
  margin: auto 0;
}
@keyframes popIn{ from{ opacity: 0; transform: translateY(10px) scale(.985); } }
.modal.modal-wide{ max-width: 780px; }
.modal-head{
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3{ margin: 0; font-size: 1.08rem; flex: 1; }
.modal-body{ padding: 18px 20px; max-height: 68vh; overflow-y: auto; }
.modal-foot{
  display: flex; gap: 8px; justify-content: flex-start; align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
body.modal-open{ overflow: hidden; }

/* النماذج */
.field{ margin-bottom: 14px; }
.field > label{
  display: block;
  font-size: .84rem; font-weight: 600; color: var(--text2);
  margin-bottom: 6px;
}
.req{ color: var(--red); }
.field input[type="text"], .field input[type="search"], .field input[type="number"],
.field input[type="date"], .field input[type="time"], .field input:not([type]),
.field select, .field textarea{
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface2);
  border-radius: 10px;
  padding: 9px 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea{ resize: vertical; min-height: 60px; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); background: var(--surface);
}
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.quick-dates{ display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.quick-dates button{
  border: 1px solid var(--border); background: var(--surface2);
  border-radius: 99px; padding: 3px 11px;
  font-size: .78rem; color: var(--text2); cursor: pointer;
  transition: all .13s ease;
}
.quick-dates button:hover{ border-color: var(--primary); color: var(--primary-strong); }

.radio-chips{ display: flex; gap: 7px; flex-wrap: wrap; }
.radio-chips label{
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border);
  background: var(--surface2);
  border-radius: 99px;
  padding: 7px 14px;
  font-size: .88rem; font-weight: 600; color: var(--text2);
  cursor: pointer;
  transition: all .14s ease;
}
.radio-chips input{ position: absolute; opacity: 0; pointer-events: none; }
.radio-chips label:has(input:checked){ border-color: var(--text); background: var(--text); color: var(--surface); }
.radio-chips label:has(input:checked) .pdot{ outline: 2px solid var(--surface); }
.radio-chips label:hover{ border-color: var(--border-strong); }

.dep-chips{ display: flex; gap: 7px; flex-wrap: wrap; max-height: 130px; overflow-y: auto; }
.dep-chips label{
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--surface2);
  border-radius: 99px; padding: 5px 12px;
  font-size: .8rem; cursor: pointer; transition: all .14s ease;
}
.dep-chips input{ accent-color: var(--primary); margin: 0; }
.dep-chips label:has(input:checked){ border-color: var(--primary); background: var(--primary-weak); color: var(--primary-strong); }

/* تفاصيل البند */
.d-badges{ display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.d-meta{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.d-meta .dm .k{ font-size: .72rem; color: var(--muted); font-weight: 600; }
.d-meta .dm .v{ font-size: .92rem; font-weight: 600; }
.d-section{ margin-bottom: 16px; }
.d-section .ds-title{ font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: 7px; }
.d-task, .d-notes{ background: var(--surface2); border-radius: var(--radius-sm); padding: 10px 13px; font-size: .92rem; border: 1px solid var(--border); }
.dep-line{ display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: .9rem; flex-wrap: wrap; }
.dep-line [data-action]{ cursor: pointer; }
.dep-line [data-action]:hover{ text-decoration: underline; color: var(--primary-strong); }
.dep-blocked{
  background: var(--violet-bg); color: var(--violet-text);
  border-radius: var(--radius-sm); padding: 10px 13px;
  font-size: .88rem; font-weight: 600; margin-bottom: 12px;
}
.update-form{ display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; }
.update-form textarea{ flex: 1; border: 1px solid var(--border); background: var(--surface2); border-radius: 10px; padding: 8px 12px; outline: none; resize: vertical; min-height: 44px; }
.update-form textarea:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.status-chips{ display: flex; gap: 6px; flex-wrap: wrap; }
.status-chips button{
  border: 1px solid var(--border); background: var(--surface2);
  border-radius: 99px; padding: 6px 13px;
  font-size: .82rem; font-weight: 600; color: var(--text2);
  cursor: pointer; transition: all .14s ease;
}
.status-chips button:hover{ border-color: var(--text); color: var(--text); }
.status-chips button.on{ background: var(--text); border-color: var(--text); color: var(--surface); }

/* لوحة التنبيهات (الجرس) */
.bell-wrap{ position: relative; }
.bell-panel{
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  width: min(400px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  overflow: hidden;
  animation: popIn .16s ease;
}
.bell-head{ padding: 12px 16px; font-weight: 700; font-size: .92rem; border-bottom: 1px solid var(--border); display:flex; align-items:center; gap:8px; }
.bell-list{ max-height: 380px; overflow-y: auto; }
.alert-item{
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .13s ease;
}
.alert-item:last-child{ border-bottom: 0; }
.alert-item:hover{ background: var(--surface2); }
.alert-item .a-ic{ width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; font-size: .85rem; }
.alert-item.a-late .a-ic{ background: var(--red-bg); color: var(--red); }
.alert-item.a-soon .a-ic{ background: var(--orange-bg); color: var(--orange); }
.alert-item .a-title{ font-weight: 600; font-size: .9rem; }
.alert-item .a-text{ font-size: .8rem; color: var(--text2); }
.bell-empty{ padding: 26px 16px; text-align: center; color: var(--muted); font-size: .88rem; }

/* ---------- الإعدادات ---------- */
.set-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.set-grid .card{ margin: 0; }
.set-row{ display: flex; align-items: center; gap: 10px; padding: 9px 0; flex-wrap: wrap; }
.set-row .set-info{ flex: 1; min-width: 150px; }
.set-row .set-info .t{ font-weight: 600; font-size: .93rem; }
.set-row .set-info .s{ font-size: .78rem; color: var(--muted); }
.seg{ display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.seg button{
  border: 0; background: var(--surface2); color: var(--text2);
  padding: 7px 15px; font-size: .86rem; font-weight: 600; cursor: pointer;
  transition: all .14s ease;
}
.seg button + button{ border-inline-start: 1px solid var(--border); }
.seg button.on{ background: var(--primary); color: var(--on-primary); }

/* ---------- استيراد Excel ---------- */
.imp-controls{ display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.imp-controls label{ display: flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; cursor: pointer; }
.imp-controls select, .imp-map select{
  border: 1px solid var(--border); background: var(--surface2);
  border-radius: 8px; padding: 5px 8px; font-size: .8rem; outline: none;
}
.imp-controls select{ max-width: 260px; }
.imp-map{ display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.imp-map-col{ flex-shrink: 0; width: 150px; }
.imp-map-h{
  font-size: .72rem; font-weight: 700; color: var(--muted); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.imp-map select{ width: 100%; }
.imp-preview-wrap{ max-height: 280px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.imp-preview{ min-width: 0 !important; width: 100%; display: table; }
.imp-preview thead{ display: table-header-group; }
.imp-preview th{ position: static; }
.imp-preview td, .imp-preview th{ padding: 7px 10px; font-size: .82rem; }
tr.imp-row-err{ background: var(--red-bg); }

/* ---------- بطاقات تقارير المشاريع ---------- */
.rep-proj-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.rep-proj-card::before{
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px;
  background: var(--pc, var(--primary));
}
.rpr-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rpr-head h3{ margin: 0; font-size: 1.05rem; cursor: pointer; }
.rpr-head h3:hover{ color: var(--primary-strong); text-decoration: underline; }
.rpr-head .count{ margin-inline-start: auto; background: var(--primary-weak); color: var(--primary-strong); }
.rp-actions{ display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- شريط التنقل السفلي ---------- */
.bottom-nav{
  display: none;
  position: fixed; bottom: 0; inset-inline: 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  z-index: 50;
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
}
.bn-item{
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 0; background: none; color: var(--muted);
  font-size: .66rem; font-weight: 600;
  padding: 6px 2px; border-radius: 10px; cursor: pointer;
  transition: color .15s ease;
}
.bn-item svg{ width: 22px; height: 22px; }
.bn-item.active{ color: var(--primary-strong); }
.bn-add{
  flex: 1; display: flex; align-items: center; justify-content: center;
}
.bn-add button{
  width: 46px; height: 46px; border-radius: 16px;
  background: var(--primary); color: var(--on-primary);
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px var(--ring);
  margin-top: -18px;
  transition: transform .14s ease, background .14s ease;
}
.bn-add button:hover{ transform: translateY(-2px); background: var(--primary-strong); }
.bn-add svg{ width: 22px; height: 22px; }

/* ---------- التوست ---------- */
.toast-root{
  position: fixed; bottom: 20px; inset-inline-start: 50%; transform: translateX(50%);
  z-index: 200;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: max-content; max-width: calc(100vw - 32px);
}
.toast{
  display: flex; align-items: center; gap: 12px;
  background: var(--text); color: var(--surface);
  border-radius: 12px;
  padding: 11px 16px;
  box-shadow: var(--shadow-lg);
  font-size: .9rem; font-weight: 500;
  animation: toastIn .2s ease;
  max-width: 100%;
}
@keyframes toastIn{ from{ opacity: 0; transform: translateY(8px); } }
.toast.toast-success{ background: var(--green); color: #fff; }
.toast.toast-danger{ background: var(--red); color: #fff; }
.toast.toast-warn{ background: var(--orange); color: #fff; }
.toast .toast-x{
  background: none; border: 0; color: inherit; opacity: .7;
  font-size: 1.05rem; cursor: pointer; padding: 0 2px; line-height: 1;
}
.toast .toast-x:hover{ opacity: 1; }
.toast [data-toast-action]{
  background: rgba(255,255,255,.18); border: 0; color: inherit;
  font-weight: 700; font-size: .82rem;
  padding: 4px 12px; border-radius: 8px; cursor: pointer;
}
.toast [data-toast-action]:hover{ background: rgba(255,255,255,.3); }

/* ---------- الطباعة (التقرير + تقرير البند) ---------- */
#print-area{ display: none; }
@media print{
  .sidebar, .topbar, .bottom-nav, .toast-root, .no-print, .quickadd, .drawer-overlay{ display: none !important; }
  body{ background: #fff; }
  .view-root{ padding: 0; max-width: none; }
  .card{ box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .report-grid{ grid-template-columns: 1fr 1fr; }
  .pill, .rem-late, .rem-soon{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  body.printing-item .app, body.printing-item .bottom-nav,
  body.printing-item .toast-root, body.printing-item #modal-root{ display: none !important; }
  body.printing-item #print-area{ display: block !important; }
  #print-area{ color: #000; font-size: 12pt; line-height: 1.7; }
  .ir-head{ border-bottom: 3px solid #0d9488; padding-bottom: 10px; margin-bottom: 14px; }
  .ir-title{ font-size: 10pt; font-weight: 700; color: #0d9488; letter-spacing: .5px; }
  .ir-name{ font-size: 20pt; font-weight: 700; margin: 4px 0; }
  .ir-meta{ font-size: 9.5pt; color: #555; }
  .ir-info, .ir-tl{ width: 100%; border-collapse: collapse; margin: 8px 0; }
  .ir-info th, .ir-info td, .ir-tl th, .ir-tl td{ border: 1px solid #b8b8b8; padding: 6px 10px; text-align: start; font-size: 11pt; vertical-align: top; }
  .ir-info th, .ir-tl th{ background: #eef4f3; width: 170px; font-weight: 700; }
  .ir-tl th{ white-space: nowrap; width: 150px; }
  .ir-sec{ margin-top: 14px; page-break-inside: avoid; }
  .ir-sec h4{ margin: 0 0 6px; font-size: 13pt; border-inline-start: 4px solid #0d9488; padding-inline-start: 8px; }
  .ir-sec p{ margin: 3px 0; }

  .pr{ margin-top: 20px; }
  .pr + .pr{ page-break-before: always; }
  .pr-name{ font-size: 15pt; font-weight: 700; border-inline-start: 5px solid #0d9488; padding-inline-start: 10px; margin-bottom: 4px; }
  .pr-meta{ font-size: 10pt; color: #444; margin-bottom: 8px; }
  .pr-tbl{ width: 100%; border-collapse: collapse; margin: 6px 0; }
  .pr-tbl th, .pr-tbl td{ border: 1px solid #b8b8b8; padding: 6px 10px; text-align: start; font-size: 10.5pt; vertical-align: top; }
  .pr-tbl th{ background: #eef4f3; font-weight: 700; white-space: nowrap; }
  .pr-sub{ font-size: 9pt; color: #666; }
  .pr-none{ color: #777; }
  .pr-sec{ margin-top: 12px; page-break-inside: avoid; }
  .pr-sec h4{ margin: 0 0 6px; font-size: 12pt; border-inline-start: 4px solid #0d9488; padding-inline-start: 8px; }
}

/* ---------- التجاوب ---------- */
@media (max-width: 1024px){
  .dash-grid{ grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
}
@media (max-width: 960px){
  .sidebar{
    position: fixed; inset-inline-start: 0; top: 0;
    transform: translateX(100%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  [dir="rtl"] .sidebar{ transform: translateX(100%); }
  .sidebar.open{ transform: translateX(0) !important; }
  .drawer-overlay{
    position: fixed; inset: 0; background: rgba(10,20,18,.45);
    z-index: 39; opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .drawer-overlay.show{ opacity: 1; pointer-events: auto; }
  .menu-btn{ display: grid; }
  .bottom-nav{ display: flex; }
  .view-root{ padding: 16px 14px 110px; }
  .add-btn{ display: none; }
  .searchbox{ max-width: none; }
}
@media (min-width: 961px){
  .menu-btn{ display: none; }
}

@media (max-width: 640px){
  .form-grid{ grid-template-columns: 1fr; }
  .view-root{ padding: 14px 12px 120px; }
  .topbar{ padding: 0 12px; gap: 7px; }
  .page-head h2{ font-size: 1.25rem; }
  .card{ padding: 14px; }
  .summary-card{ padding: 16px; }
  .modal-body{ max-height: 62vh; }
  .overlay{ padding: 2vh 10px 10px; }

  /* تحويل الجدول إلى بطاقات */
  .table-wrap{ background: none; border: 0; box-shadow: none; overflow: visible; }
  table.tbl{ min-width: 0; display: block; }
  .tbl thead{ display: none; }
  .tbl tbody{ display: flex; flex-direction: column; gap: 9px; }
  .tbl tbody tr{
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 6px 14px;
    position: relative;
  }
  .tbl td{
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    border-bottom: 1px dashed var(--border);
    padding: 7px 0;
    text-align: end;
  }
  .tbl td::before{
    content: attr(data-l);
    font-size: .74rem; font-weight: 700; color: var(--muted);
    text-align: start; flex-shrink: 0;
  }
  .tbl td.cell-title{ text-align: start; display: block; padding-top: 10px; }
  .tbl td.cell-title::before{ display: none; }
  .tbl td.cell-actions{
    position: absolute; top: 8px; inset-inline-end: 8px;
    border-bottom: 0; padding: 0;
  }
  .tbl td.cell-title{ padding-inline-end: 110px; }
  .tbl td:last-child{ border-bottom: 0; }

  /* جدول معاينة الاستيراد يبقى جدولاً داخل النافذة */
  table.tbl.imp-preview{ display: table; }
  .imp-preview thead{ display: table-header-group; }
  .imp-preview tbody{ display: table-row-group; gap: 0; }
  .imp-preview tr{ display: table-row; border: 0; padding: 0; box-shadow: none; background: none; }
  .imp-preview td, .imp-preview th{ display: table-cell; border-bottom: 1px solid var(--border); padding: 7px 10px; text-align: start; }
  .imp-preview td::before{ content: none !important; }
}