/* ============================================================================
   SpaceX — Workspace OS  |  طبقة تطبيق الجوال
   ---------------------------------------------------------------------------
   تُحمَّل بعد app.css. تحوّل اللوحات على الشاشات الصغيرة إلى تجربة تطبيق:
   شريط علوي ثابت، تبويب سفلي، قوائم كأوراق منزلقة، وإشعارات بمستوى التطبيقات.

   المبادئ:
     • كل هدف لمس ≥ 44px
     • لا اعتماد على :hover — الجوال لا يملكه، نستخدم :active
     • احترام الحواف الآمنة (env(safe-area-inset-*)) لشاشات النوتش
     • الحركة زنبركية cubic-bezier(.16,1,.3,1) لا خطية
     • كل حركة تتوقف عند prefers-reduced-motion
   ============================================================================ */

:root {
  --sx-ease-spring: cubic-bezier(.16, 1, .3, 1);
  --sx-tabbar-h: 62px;
  --sx-safe-b: env(safe-area-inset-bottom, 0px);
}

/* ============================================================================
   1. الإشعارات (Toasts)
   ============================================================================ */

.sx-toasts {
  position: fixed;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  /* سطح المكتب: أعلى الجهة المقابلة للقراءة (اليسار في RTL) */
  inset-block-start: 18px;
  inset-inline-end: 18px;
  width: min(390px, calc(100vw - 32px));
}

.sx-toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px 15px;
  background: var(--sx-surface);
  border: 1px solid var(--sx-border);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(20, 18, 31, .16), 0 2px 6px rgba(20, 18, 31, .07);
  overflow: hidden;
  touch-action: pan-y;
  will-change: transform, opacity;
  animation: sx-toast-in .38s var(--sx-ease-spring) both;
}

/* أيقونة داخل دائرة ملوّنة — تُقرأ الحالة قبل قراءة النص */
.sx-toast-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sx-toast-icon i, .sx-toast-icon svg { width: 18px; height: 18px; }

.sx-toast-body { flex: 1 1 auto; min-width: 0; }
.sx-toast-title {
  font-family: var(--sx-font-head);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--sx-text);
}
.sx-toast-msg {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sx-text-muted);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.sx-toast-close {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  margin: -3px -4px 0 0;
  border: none;
  background: none;
  border-radius: 50%;
  color: var(--sx-text-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.sx-toast-close:active { background: var(--sx-mist); color: var(--sx-text); }
.sx-toast-close i, .sx-toast-close svg { width: 15px; height: 15px; }

/* شريط تقدّم يُظهر الوقت المتبقي — المستخدم يعرف متى سيختفي */
.sx-toast-bar {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 100%;
  transform-origin: right center;   /* RTL: يتقلّص من اليمين */
  opacity: .55;
  animation: sx-toast-bar linear forwards;
}
html[dir="ltr"] .sx-toast-bar { transform-origin: left center; }

.sx-toast.paused .sx-toast-bar { animation-play-state: paused; }

/* الحالات */
.sx-toast--success .sx-toast-icon { background: var(--sx-success-bg); color: var(--sx-success); }
.sx-toast--success .sx-toast-bar  { background: var(--sx-success); }
.sx-toast--danger  .sx-toast-icon { background: var(--sx-danger-bg);  color: var(--sx-danger); }
.sx-toast--danger  .sx-toast-bar  { background: var(--sx-danger); }
.sx-toast--warning .sx-toast-icon { background: var(--sx-warning-bg); color: var(--sx-warning); }
.sx-toast--warning .sx-toast-bar  { background: var(--sx-amber); }
.sx-toast--info    .sx-toast-icon { background: var(--sx-primary-bg); color: var(--sx-primary); }
.sx-toast--info    .sx-toast-bar  { background: var(--sx-primary); }

.sx-toast.leaving {
  animation: sx-toast-out .24s ease-in forwards;
}

@keyframes sx-toast-in {
  from { opacity: 0; transform: translateY(-16px) scale(.95); }
  to   { opacity: 1; transform: none; }
}
@keyframes sx-toast-out {
  to { opacity: 0; transform: translateY(-10px) scale(.97); }
}
@keyframes sx-toast-bar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ============================================================================
   2. الشريط العلوي الثابت (تطبيق)
   ============================================================================ */
.app-bar { display: none; }

/* ============================================================================
   3. شريط التبويب السفلي
   ============================================================================ */
.app-tabs { display: none; }

/* ============================================================================
   4. الورقة المنزلقة (Bottom sheet)
   ============================================================================ */
.sheet-handle { display: none; }

/* ============================================================================
   5. الجوال واللوحي
   ============================================================================ */
@media (max-width: 992px) {

  body { padding-bottom: calc(var(--sx-tabbar-h) + var(--sx-safe-b)); }

  /* ---- الشريط العلوي ---- */
  .app-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: sticky;
    inset-block-start: 0;
    z-index: 70;
    background: var(--sx-ink);
    color: var(--sx-star);
    padding: 12px 16px calc(12px);
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
  }
  .app-bar-title {
    font-family: var(--sx-font-head);
    font-weight: 800;
    font-size: 16.5px;
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app-bar-sub {
    font-size: 11.5px;
    color: rgba(246, 245, 251, .6);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app-bar-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }

  /* ترويسة الصفحة الأصلية تختفي — الشريط العلوي يحمل العنوان */
  .page-head > div:first-child h1 { display: none; }
  .page-head > div:first-child .page-subtitle { display: none; }
  .page-head { margin-bottom: 14px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* ---- التبويب السفلي ---- */
  .app-tabs {
    display: flex;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 80;
    background: var(--sx-surface);
    border-top: 1px solid var(--sx-border);
    padding-bottom: var(--sx-safe-b);
    box-shadow: 0 -3px 18px rgba(20, 18, 31, .07);
  }
  .app-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--sx-tabbar-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--sx-text-muted);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color .16s;
    -webkit-tap-highlight-color: transparent;
  }
  .app-tab i, .app-tab svg { width: 21px; height: 21px; }
  .app-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app-tab:active { color: var(--sx-primary); }
  .app-tab.active { color: var(--sx-primary); }
  /* مؤشّر علوي رفيع للتبويب النشط */
  .app-tab.active::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 22%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--sx-primary);
  }
  .app-tab .tab-badge {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 22%;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--sx-coral);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ---- الشريط الجانبي يصير ورقة منزلقة من الأسفل ---- */
  /* الطبقات: التعتيم فوق الشريطين العلوي (70) والسفلي (80)، والورقة فوقه.
     لولا ذلك لبقي الشريط العلوي قابلاً للنقر والورقة مفتوحة، ولظهر فوق
     التعتيم بصرياً. */
  .sidebar-backdrop { z-index: 90; }

  .sidebar {
    z-index: 95;
    inset-block-start: auto;
    inset-block-end: 0;
    inset-inline: 0;
    width: auto;
    max-height: 80vh;
    border-radius: 22px 22px 0 0;
    transform: translateY(101%);
    transition: transform .34s var(--sx-ease-spring);
    padding-bottom: var(--sx-safe-b);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .35);
  }
  .sidebar.open { transform: none; }

  .sheet-handle {
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    margin: 10px auto 2px;
    flex: 0 0 auto;
  }

  .sidebar-brand { padding: 12px 20px 14px; }
  .sidebar-nav   { padding-bottom: 20px; }
  .nav-link      { min-height: 46px; }

  .main-wrapper { margin-inline-start: 0; }
  .content { padding: 16px 14px 24px; }

  /* زر القائمة العائم لم يعد له داعٍ — التبويب السفلي بديله */
  .mobile-menu-fab { display: none !important; }

  /* ---- الإشعارات أسفل الشاشة فوق التبويب ---- */
  .sx-toasts {
    inset-block-start: auto;
    inset-block-end: calc(var(--sx-tabbar-h) + var(--sx-safe-b) + 12px);
    inset-inline: 12px;
    width: auto;
    flex-direction: column-reverse;
  }
  .sx-toast { animation-name: sx-toast-in-up; }
  @keyframes sx-toast-in-up {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to   { opacity: 1; transform: none; }
  }
  .sx-toast.leaving { animation: sx-toast-out-down .24s ease-in forwards; }
  @keyframes sx-toast-out-down {
    to { opacity: 0; transform: translateY(12px) scale(.97); }
  }

  /* ورقة مفتوحة: الإشعار يجلس فوق شريط الأزرار مباشرة.
     أسفل الشاشة يغطّي أزرار التحصيل، وأعلاها يغطّي رأس الورقة وزر الإغلاق —
     فنضعه بينهما بارتفاع الشريط الفعلي الذي يقيسه pos.js. */
  body.sx-sheet-open .sx-toasts {
    inset-block-end: calc(var(--sx-sheet-foot-h, 120px) + 14px);
    inset-block-start: auto;
    flex-direction: column-reverse;
  }
}

/* ============================================================================
   6. النافذة المنبثقة تصير ورقة منزلقة على الجوال
   ============================================================================ */
@media (max-width: 768px) {
  .sx-modal { padding: 0; align-items: flex-end !important; }

  .sx-modal-dialog {
    max-width: none;
    width: 100%;
    max-height: 94vh;
    min-height: 0;
    border-radius: 22px 22px 0 0;
    margin: 0;
    animation: sx-sheet-up .34s var(--sx-ease-spring);
    padding-bottom: var(--sx-safe-b);
  }
  @keyframes sx-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }

  /* مقبض السحب أعلى الورقة */
  .sx-modal-head::before {
    content: '';
    position: absolute;
    inset-block-start: 7px;
    inset-inline: 0;
    margin: 0 auto;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .3);
  }
  .sx-modal-head { position: relative; padding-top: 20px; }

  .sx-modal-foot { flex-direction: column; align-items: stretch; }
  .sx-modal-foot > div { width: 100%; }
  .sx-modal-foot .btn { flex: 1 1 auto; justify-content: center; min-height: 46px; }
}

/* ============================================================================
   7. صقل اللمس
   ============================================================================ */
@media (hover: none) {
  /* لا :hover على اللمس — نستبدله بحالة ضغط واضحة */
  .btn:hover        { background: inherit; }
  .btn:active       { transform: scale(.97); }
  .session-card:hover { transform: none; box-shadow: var(--sh-xs); border-color: var(--sx-border); }
  .session-card:active {
    transform: scale(.985);
    box-shadow: var(--sh-md);
    border-color: var(--sx-primary);
  }
  .table tbody tr:hover { background: transparent; }
  .nav-link:hover   { background: transparent; color: rgba(246,245,251,.78); }
  .nav-link:active  { background: rgba(255,255,255,.1); color: #fff; }
}

@media (max-width: 992px) {
  /* أهداف لمس مريحة */
  .btn        { min-height: 44px; }
  .btn-sm     { min-height: 38px; }
  .form-control, input, select, textarea { min-height: 46px; font-size: 16px; }
  /* 16px يمنع سفاري من تكبير الصفحة تلقائياً عند التركيز على الحقل */
  .row-actions .btn { min-width: 40px; }
  .form-check input[type="checkbox"] { width: 20px; height: 20px; }
}

* { -webkit-tap-highlight-color: transparent; }

/* عناصر الواجهة لا تُحدَّد بالخطأ أثناء اللمس المطوّل */
.app-tab, .nav-link, .sx-tab, .btn, .sx-modal-head, .sidebar-brand, .sheet-handle {
  -webkit-user-select: none;
  user-select: none;
}

/* التمرير بزخم داخل الحاويات */
.table-wrap, .sx-modal-body, .sidebar { -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: reduce) {
  .sx-toast, .sx-modal-dialog, .sidebar { animation: none !important; transition: none !important; }
  .sx-toast-bar { animation: none !important; transform: scaleX(0); }
}