/* تبويب «مهامي» في الصفحة الرئيسية بتنسيق مضغوط (scripts/patch-home-my-tasks-layout.mjs). */

/* شريط الأدوات: مربع واحد من سطرين — العرض والترتيب والفترة، ثم البحث وكل أدوات الفرز */
#root .bmt-toolbar {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
#root .bmt-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
#root .bmt-row + .bmt-row { border-top: 1px solid #f1f5f9; }
#root .bmt-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
#root .bmt-label { font-size: 12px; color: #94a3b8; white-space: nowrap; }
#root .bmt-icon { color: #94a3b8; flex-shrink: 0; }
#root .bmt-sep { width: 1px; height: 22px; background: #e5e7eb; }
#root .bmt-seg {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 2px;
  background: #f1f5f9;
  border-radius: 10px;
}
#root .bmt-seg-btn,
#root .bmt-chip-btn,
#root .bmt-columns > div > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
#root .bmt-seg-btn:hover { background: #fff; color: #1e293b; }
#root .bmt-seg-btn.is-active { background: #7c3aed; color: #fff; box-shadow: 0 1px 2px rgba(124, 58, 237, .35); }
#root .bmt-seg-btn.is-sort.is-active { background: #4f46e5; }
#root .bmt-seg-btn.is-dir.is-active { background: #334155; }
#root .bmt-chip-btn,
#root .bmt-columns > div > button {
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  box-shadow: none !important;
}
#root .bmt-chip-btn:hover,
#root .bmt-columns > div > button:hover { background: #f8fafc !important; }
#root .bmt-chip-btn.is-active { background: #7c3aed !important; border-color: #7c3aed !important; color: #fff; }
#root .bmt-columns svg { width: 14px !important; height: 14px !important; }

#root .bmt-filters > * { flex: 1 1 100px; min-width: 0; }
#root .bmt-search { position: relative; flex: 1.6 1 170px !important; }
#root .bmt-search svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
#root .bmt-input,
#root .bmt-select {
  width: 100%;
  height: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  color: #334155;
  padding: 0 10px;
}
#root .bmt-search .bmt-input { padding-right: 30px; }
#root .bmt-select.is-set { border-color: #a78bfa; background: #f5f3ff; color: #5b21b6; font-weight: 600; }
#root .bmt-input:focus,
#root .bmt-select:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, .15); }
#root .bmt-date-input { width: auto; height: 30px; }
#root .bmt-clear {
  flex: 0 0 auto !important;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* الأرقام: مربع واحد، كل رقم بارز بلونه */
#root .bmt-stats {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: #e5e7eb;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
#root .bmt-stat {
  --c: #1e293b;
  --t: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 6px;
  background: linear-gradient(180deg, var(--t), #fff 85%);
  border-top: 3px solid var(--c);
}
#root .bmt-stat-value {
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  color: var(--c);
  font-variant-numeric: tabular-nums;
}
#root .bmt-stat-value small { margin-right: 3px; font-size: 11px; font-weight: 700; opacity: .8; }
#root .bmt-stat-label { font-size: 12px; font-weight: 600; color: #475569; line-height: 1.2; }
#root .bmt-stat.is-total { --c: #1e293b; --t: #f1f5f9; }
#root .bmt-stat.is-done { --c: #059669; --t: #ecfdf5; }
#root .bmt-stat.is-intime { --c: #2563eb; --t: #eff6ff; }
#root .bmt-stat.is-pending { --c: #d97706; --t: #fffbeb; }
#root .bmt-stat.is-overdue { --c: #dc2626; --t: #fef2f2; }
#root .bmt-stat.is-missed { --c: #6b7280; --t: #f3f4f6; }
#root .bmt-stat.is-undated { --c: #a16207; --t: #fefce8; }
@media (max-width: 1100px) {
  #root .bmt-stat { flex-direction: column; gap: 3px; }
}
@media (max-width: 640px) {
  #root .bmt-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #root .bmt-sep { display: none; }
}

/* الجدولان: يتسعان لعرض الصفحة دون تمرير أفقي */
#root table.bmt-fit { min-width: 0 !important; }
#root table.bmt-fit th,
#root table.bmt-fit td { min-width: 0 !important; white-space: normal !important; padding-left: 6px !important; padding-right: 6px !important; }
#root table.bmt-fit td[class*="min-w-[280px]"],
#root table.bmt-fit td[class*="min-w-[240px]"] { min-width: 140px !important; }
#root table.bmt-fit td[class*="min-w-[320px]"] { min-width: 130px !important; }
#root table.bmt-fit .bmt-org-td { white-space: normal; }
#root table.bmt-fit .bmt-date { white-space: nowrap; }
#root .bmt-actions { width: 100px; margin: 0 auto; }

/* التصنيف الإداري: الإدارة والقسم والوحدة في خلية واحدة */
#root .bmt-org { display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 1.4; }
#root .bmt-org-line { position: relative; padding-right: 9px; color: #475569; white-space: normal; overflow-wrap: anywhere; }
#root .bmt-org-line::before { content: ""; position: absolute; right: 0; top: .55em; width: 5px; height: 5px; border-radius: 999px; background: var(--dot, #94a3b8); }
#root .bmt-org-line.is-admin { --dot: #4f46e5; font-weight: 700; color: #1e293b; }
#root .bmt-org-line.is-department { --dot: #0891b2; }
#root .bmt-org-line.is-unit { --dot: #16a34a; color: #64748b; }
#root .bmt-org-td { min-width: 110px !important; max-width: 170px; }

/* التاريخ: الهجري ثم الميلادي أسفل منه */
#root .bmt-date { display: inline-flex; flex-direction: column; line-height: 1.35; }
#root .bmt-date-h { font-size: 12px; font-weight: 600; color: #334155; }
#root .bmt-date-g { font-size: 10.5px; color: #94a3b8; }
#root .bmt-empty { color: #d1d5db; }