/* ============================================================
   نظام تصميم الجوال المشترك (Mobile Design System)
   يُستخدم عبر بوابة الكباتن وتطبيق الموظفين معاً - يعتمد على متغيرات
   الألوان المعرّفة في style.css (--green, --card, --border, --bg, ...)
   ولا يعيد تعريفها. أسماء الأصناف بادئتها "md-" لتفادي أي تعارض مع
   أصناف style.css الحالية الخاصة بتخطيط سطح المكتب.
   ============================================================ */

/* ---------- الشريط العلوي (عنوان + رجوع) ---------- */
.md-topbar {
  position: fixed; top: 0; left: 0; right: 0; max-width: 460px; margin: 0 auto;
  z-index: 50;
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 11px;
  background: var(--card); border-bottom: 1px solid var(--border);
}
.md-topbar-back {
  width: 30px; height: 30px; border-radius: 9px; border: none; background: transparent;
  color: var(--text); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; font-size: 21px; padding: 0; font-family: inherit;
}
.md-topbar-back:active { background: var(--bg); }
.md-topbar-title { flex: 1; font-size: 15px; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- التبويب السفلي ---------- */
.md-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; max-width: 460px; margin: 0 auto;
  z-index: 60;
  display: flex; background: var(--card); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.md-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px 7px; border: none; background: transparent; color: var(--text-dim);
  cursor: pointer; font-family: inherit;
}
.md-tab svg { width: 21px; height: 21px; }
.md-tab-label { font-size: 10.5px; font-weight: 700; }
.md-tab.active { color: var(--green); }
.md-tab:active { opacity: .7; }

/* ---------- Bottom sheet ---------- */
.md-sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.md-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.md-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; max-width: 460px; margin: 0 auto; z-index: 201;
  background: var(--card); border-radius: 20px 20px 0 0;
  max-height: 82vh; overflow-y: auto; box-shadow: 0 -8px 30px rgba(0,0,0,.25);
  transform: translateY(100%); transition: transform .25s cubic-bezier(.32,.72,0,1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.md-sheet.open { transform: translateY(0); }
.md-sheet.dragging { transition: none; }
.md-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: 10px auto 6px; }
.md-sheet-title { font-size: 14.5px; font-weight: 700; padding: 4px 18px 10px; }
.md-sheet-body { padding: 0 4px; }
.md-sheet-actions { padding: 4px 10px 10px; }
.md-sheet-action {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: right;
  padding: 13px 12px; border: none; background: transparent; border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit;
}
.md-sheet-action:active { background: var(--bg); }
.md-sheet-action.danger { color: var(--red); }
.md-sheet-cancel {
  display: block; width: calc(100% - 20px); margin: 4px 10px 8px; text-align: center; padding: 13px;
  border: none; background: var(--bg); border-radius: 12px; font-size: 14px; font-weight: 700;
  color: var(--text-dim); cursor: pointer; font-family: inherit;
}

/* ---------- بطاقة/صف قائمة قابلة لإعادة الاستخدام (مراحل لاحقة) ---------- */
.md-list-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 4px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.md-list-row:last-child { border-bottom: none; }
.md-list-row:active { background: var(--bg); }

/* ---------- تفاصيل قابلة للطي ---------- */
.md-collapse-toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  padding: 10px; margin: 2px 0 4px; border: none; background: transparent;
  color: var(--green); font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.md-collapse-body { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.md-collapse-body.open { max-height: 3000px; }