/*
 * static/css/mobile.css — طبقة الهاتف: تحويل الصفحة إلى شاشة تطبيق.
 *
 * الموقع مبنيّ على Tailwind من الـCDN، وهذا الملف يضيف ما لا تعطيه فئات
 * Tailwind وحدها: مناطق الأمان في الشاشات المنحنية، أهداف لمس بحجم الإصبع،
 * جداول تنقلب بطاقات، وسلوكاً يمنع المتصفح من التصرّف كمتصفح (سحب للتحديث،
 * تكبير عند التركيز على حقل، إبراز أزرق عند اللمس).
 *
 * قاعدة: كل ما هنا مشروط بالهاتف أو بمؤشر اللمس — شاشة سطح المكتب تبقى
 * كما كانت حرفياً، فلا يدفع مستخدم الحاسوب ثمن تحسين الهاتف.
 */

:root {
  --tabbar-height: 58px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-accent: #10b981;
}

/* ─── سلوك التطبيق ────────────────────────────────────────────────────── */

html {
  -webkit-text-size-adjust: 100%;   /* دوران الشاشة لا يكبّر الخط */
}

body {
  /* السحب داخل قائمة لا يجرّ الصفحة كلها ولا يشغّل «سحب للتحديث» */
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}

/* اللمسة تُنفَّذ فوراً بلا انتظار نقرة مزدوجة، وبلا تحديد نص عرضي */
button, [role="button"], a, summary, label, input[type="checkbox"], select {
  touch-action: manipulation;
}

button, [role="button"], .tap {
  -webkit-user-select: none;
  user-select: none;
}

/* ─── الهاتف وحده ─────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* iOS يكبّر الصفحة تلقائياً عند التركيز على حقل خطّه أصغر من 16px،
     ثم لا يعيدها — فتبقى الشاشة مزاحة. 16px تمنع ذلك من أصله. */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* مساحة أسفل المحتوى بقدر شريط التبويب حتى لا يغطي آخر سطر */
  body.has-tabbar {
    padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom) + 8px);
  }

  /* لوحات بارتفاع ثابت (شاشة الاستخراج) تخنق المحتوى على شاشة صغيرة */
  .panels-height, .panels-height-full {
    height: auto !important;
    max-height: none !important;
  }

  /* شريط إجراء ملتصق فوق شريط التبويب: زر «استخراج» و«إرسال» يبقى في اليد */
  .app-action-bar {
    position: sticky;
    bottom: calc(var(--tabbar-height) + var(--safe-bottom));
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    padding: 10px 0 calc(10px + var(--safe-bottom));
    margin: 0 -12px;
    padding-inline: 12px;
    border-top: 1px solid #f1f5f9;
  }
}

/* ─── أهداف اللمس ─────────────────────────────────────────────────────── */

@media (pointer: coarse) {
  button, [role="button"], a.btn, select, input[type="submit"] {
    min-height: 44px;             /* أصغر هدف يصيبه الإبهام بثقة */
  }

  /* استثناء: أزرار داخل صفوف الجداول والشارات الصغيرة */
  .tap-sm, td button, td a, th button {
    min-height: 32px;
  }

  input[type="checkbox"], input[type="radio"] {
    width: 20px;
    height: 20px;
  }

  /* لا يوجد hover على اللمس — الاستجابة تكون بالضغط */
  button:active, [role="button"]:active, a.tap:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
  }
}

/* ─── الجداول تصير بطاقات ─────────────────────────────────────────────── */
/*
 * جدول بعشرة أعمدة على شاشة 375px إما يُقصّ أو يتقلّص حتى يُقرأ بالعدسة.
 * الحل: كل صف يصير بطاقة، وكل خلية سطراً عنوانه اسم العمود المكتوب في
 * data-label. نفس الترميز يخدم الشاشتين: الجدول يبقى جدولاً على الحاسوب.
 */
@media (max-width: 767px) {
  .table-cards,
  .table-cards tbody,
  .table-cards tfoot,
  .table-cards tr,
  .table-cards td {
    display: block;
    width: 100%;
  }

  /* سطر المجاميع يبقى مميّزاً: بطاقة واحدة بخط أعرض أسفل القائمة */
  .table-cards tfoot td {
    font-weight: 700;
  }

  .table-cards thead {
    display: none;                /* العناوين انتقلت إلى data-label */
  }

  .table-cards tr {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  .table-cards td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0 !important;
    border: 0 !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .table-cards td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 700;
  }

  /* خلية بلا عنوان (أزرار، مربع اختيار) تأخذ السطر كاملاً بلا وسم */
  .table-cards td:not([data-label])::before,
  .table-cards td[data-label=""]::before {
    content: none;
  }

  /* خلية فارغة (زر لم يُعرض، عمود لا قيمة له) لا تترك فجوة في البطاقة */
  .table-cards td:empty {
    display: none !important;
  }

  /* خلايا الأزرار تصطف معاً على سطر واحد بلا عنوان */
  .table-cards td.cell-actions {
    justify-content: flex-start;
    gap: 8px;
    padding-top: 8px !important;
  }

  /* خلية طويلة (محتويات الطرد) تحت عنوانها لا بجانبه */
  .table-cards td.cell-block {
    display: block;
  }
  .table-cards td.cell-block::before {
    display: block;
    margin-bottom: 2px;
  }

  /* خلية لا معنى لها في البطاقة (ترقيم الصف مثلاً) — تُطوى على الهاتف وحده.
     نكتبها هنا لا بفئة hidden من Tailwind لأن قاعدة البطاقات أقوى منها. */
  .table-cards .hide-mobile {
    display: none !important;
  }

  /* صف مطوي (نص المحادثة) يبقى صفاً عرضه كامل */
  .table-cards tr.row-plain {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* ─── شريط التبويب ────────────────────────────────────────────────────── */

/* الضغطة تُعلَّم فوراً ولا تنتظر رسم الصفحة الجديدة: في التطبيق يستجيب
   التبويب لحظة اللمس، وأي تأخير يجعل المستخدم يضغط مرتين. */
[data-tab].is-loading {
  color: var(--app-accent);
}

[data-tab].is-loading > span:first-child {
  background: #ecfdf5;
}

/* ─── حين يعمل كتطبيق مثبَّت ──────────────────────────────────────────── */

@media (display-mode: standalone) {
  /* لا يوجد زر رجوع في المتصفح — رابط الرجوع داخل الصفحة يصير ضرورة */
  .only-browser { display: none !important; }
}

.only-standalone { display: none; }
@media (display-mode: standalone) {
  .only-standalone { display: initial; }
}

/* ─── تفاصيل صغيرة تُشعِر بأنه تطبيق ──────────────────────────────────── */

/* شريط تمرير رفيع بدل شريط النظام العريض داخل اللوحات */
.panel-scroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* تمرير أفقي انسيابي بمحطات (شرائح، أزرار فلترة) */
.snap-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.snap-row::-webkit-scrollbar { display: none; }
.snap-row > * { scroll-snap-align: start; flex: 0 0 auto; }