/* ============================================================
   BH Orders - Mobile Responsive Stylesheet
   VERSION: 2026-06-07-mobile-v3
   ============================================================
   - v1: تحويل الجدول إلى بطاقات (cards) في الموبايل
   - v2: دعم العناصر الجديدة من v31 (زر النسخ، زر ملاحظات، حقول variants)
   - v3: قسم "أداء المؤكدين + الأجور" في صفحة المستخدمين → بطاقات
         (.up-table من users-perf-v2.js)
   ============================================================ */

@media (max-width: 768px) {

  /* === GLOBAL === */
  body {
    font-size: 13px;
  }

  #app {
    padding: 0 8px;
  }

  /* === HEADER === */
  header {
    padding: 10px 0;
    margin-bottom: 12px;
  }

  .head-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .head-brand {
    justify-content: space-between;
    gap: 8px;
  }

  .head-brand .brand-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .head-brand h1 {
    font-size: 18px;
  }

  .head-brand small {
    font-size: 10px;
  }

  .head-tools {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
  }

  .user-pill {
    padding: 4px 8px;
    font-size: 11px;
  }

  .user-pill .role {
    font-size: 9px;
    padding: 1px 6px;
  }

  /* === TABS — منيو أفقي قابل للسحب === */
  .tabs {
    margin-top: 8px;
    gap: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .tab {
    padding: 8px 10px;
    font-size: 12px;
    flex-shrink: 0;
  }

  .tab-icon {
    font-size: 13px;
  }

  /* === SECTIONS === */
  .section {
    padding: 10px;
    margin-bottom: 12px;
  }

  .section-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* === FORMS === */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    font-size: 16px; /* يمنع zoom في iOS عند focus */
  }

  /* === BUTTONS === */
  .btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .btn-sm {
    padding: 4px 8px;
    font-size: 11px;
  }

  /* === MODAL === */
  #modal .modal-box,
  .modal-box {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    margin: 5vh auto;
  }

  /* ============================================================
     ORDERS TABLE → CARDS
     ============================================================ */
  .o-table-wrap {
    overflow-x: visible;
    border: none;
    background: transparent;
    border-radius: 0;
  }

  .o-table {
    min-width: 0 !important;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    display: block;
  }

  /* إخفاء رأس الجدول */
  .o-table thead {
    display: none;
  }

  .o-table tbody {
    display: block;
  }

  /* كل صف يصبح بطاقة */
  .o-table tbody tr {
    display: block;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    position: relative;
  }

  /* كل خلية تصبح block */
  .o-table tbody td {
    display: block;
    padding: 6px 0;
    border-bottom: 1px dashed var(--soft);
    text-align: right;
    position: relative;
    min-height: auto;
    width: 100% !important;
  }

  /* LTR (French) */
  body.fr .o-table tbody td {
    text-align: left;
  }

  .o-table tbody td:last-child {
    border-bottom: none;
  }

  /* الـcheckbox فوق (RTL: يسار، LTR: يمين) */
  .o-td-check {
    position: absolute;
    top: 10px;
    left: 10px;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    background: transparent;
    z-index: 2;
  }

  body[dir="rtl"] .o-td-check,
  html[dir="rtl"] .o-td-check {
    left: auto;
    right: 10px;
  }

  /* رقم الطلبية: عنوان البطاقة */
  .o-td-num {
    font-size: 16px;
    font-weight: 700;
    color: var(--gold-dark);
    padding-bottom: 8px !important;
    border-bottom: 2px solid var(--gold-light) !important;
    margin-bottom: 4px;
  }

  /* مسافة للـcheckbox - RTL */
  html[dir="rtl"] .o-td-num,
  body[dir="rtl"] .o-td-num {
    padding-right: 32px !important;
  }
  /* LTR */
  body.fr .o-td-num {
    padding-left: 32px !important;
  }

  .o-td-num strong {
    font-size: 17px;
  }

  /* labels قبل كل خلية */
  .o-td-date::before {
    content: "📅 ";
    margin-left: 4px;
  }
  body.fr .o-td-date::before {
    margin-left: 0;
    margin-right: 4px;
  }
  .o-td-date {
    font-size: 12px;
    color: var(--muted);
  }
  .o-date-d, .o-date-t {
    display: inline;
    margin-right: 4px;
  }
  body.fr .o-date-d, body.fr .o-date-t {
    margin-right: 0;
    margin-left: 4px;
  }

  /* العميل */
  .o-td-customer::before {
    content: "👤 ";
    font-size: 14px;
  }
  .o-cust-name {
    display: inline;
    font-size: 15px;
    font-weight: 700;
  }
  .o-cust-phone, .o-cust-phone2 {
    font-size: 14px !important;
    padding: 4px 0;
    display: inline-block;
  }
  /* صف الهاتف + زر النسخ (v25+) */
  .o-cust-phone-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px 0;
  }
  .o-copy-btn {
    padding: 4px 8px;
    font-size: 13px;
    min-width: 32px;
  }

  /* المنتجات */
  .o-td-items::before {
    content: "📦 المنتجات";
    display: block;
    font-weight: 700;
    color: var(--gold-dark);
    font-size: 12px;
    margin-bottom: 6px;
  }
  body.fr .o-td-items::before {
    content: "📦 Produits";
  }
  .o-items-container {
    flex-direction: column !important;
    gap: 6px;
    display: flex;
  }
  .o-items-list {
    max-height: none !important;
    overflow: visible !important;
  }
  .o-item-line {
    font-size: 13px;
    padding: 6px 0;
  }
  .o-items-edit-btn {
    align-self: flex-end !important;
  }

  /* الولاية/البلدية */
  .o-td-addr::before {
    content: "📍 الولاية/البلدية";
    display: block;
    font-weight: 700;
    color: var(--gold-dark);
    font-size: 12px;
    margin-bottom: 6px;
  }
  body.fr .o-td-addr::before {
    content: "📍 Wilaya / Commune";
  }
  .o-td-addr .o-inline-sel {
    margin-bottom: 4px;
    font-size: 13px;
    padding: 6px 8px;
  }

  /* المبلغ */
  .o-td-money::before {
    content: "💰 المبلغ: ";
    font-weight: 700;
    color: var(--gold-dark);
    font-size: 12px;
  }
  body.fr .o-td-money::before {
    content: "💰 Montant: ";
  }
  .o-money-total {
    display: inline;
    font-size: 16px !important;
    font-weight: 700;
  }
  .o-money-detail {
    display: inline-block;
    margin-right: 6px;
  }

  /* الشحن */
  .o-td-shipping::before {
    content: "🚚 الشحن: ";
    font-weight: 700;
    color: var(--gold-dark);
    font-size: 12px;
  }
  body.fr .o-td-shipping::before {
    content: "🚚 Livraison: ";
  }

  /* الحالة */
  .o-td-status::before {
    content: "🏷️ الحالة";
    display: block;
    font-weight: 700;
    color: var(--gold-dark);
    font-size: 12px;
    margin-bottom: 6px;
  }
  body.fr .o-td-status::before {
    content: "🏷️ Statut";
  }
  .o-td-status .o-inline-sel {
    font-size: 13px;
    padding: 8px;
  }
  .o-tracking {
    font-size: 11px;
    margin-top: 4px;
    word-break: break-all;
  }
  /* زر ملاحظة الاتصال 📞 تحت dropdown الحالة (v31) */
  .o-td-status .o-note-btn {
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 13px;
    opacity: 1;
  }

  /* items editor variants (v28+) */
  .ie-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .ie-item-name {
    width: 100%;
  }
  .ie-var-input {
    width: 100% !important;
    font-size: 14px !important;
    padding: 6px 8px !important;
  }
  .ie-item-qty {
    justify-content: center;
  }

  /* المؤكّد */
  .o-td-assign::before {
    content: "👨‍💼 المؤكِّد";
    display: block;
    font-weight: 700;
    color: var(--gold-dark);
    font-size: 12px;
    margin-bottom: 6px;
  }
  body.fr .o-td-assign::before {
    content: "👨‍💼 Confirmateur";
  }
  .o-assigned {
    font-size: 13px;
  }

  /* الإجراءات: أزرار في صف واحد */
  .o-td-actions {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    padding-top: 10px !important;
    border-top: 1px solid var(--soft);
  }
  .o-td-actions button,
  .o-td-actions a {
    flex: 1;
    min-width: 60px;
    padding: 8px;
    font-size: 13px;
  }

  /* === KPI / Stats cards === */
  .stat-card, .kpi-card {
    padding: 10px !important;
  }

  /* === Toast === */
  #toast {
    width: 90vw !important;
    left: 5vw !important;
    right: auto !important;
    font-size: 13px;
  }

  /* === LOGIN === */
  .login-box {
    margin: 20px 12px;
    padding: 20px !important;
  }

  /* === Pagination === */
  .pagination {
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
  }

  .pagination button {
    padding: 6px 10px;
    font-size: 12px;
  }

  /* === Filters bar === */
  .filters-bar, .o-filters {
    flex-direction: column;
    gap: 6px;
  }

  .filters-bar > *, .o-filters > * {
    width: 100%;
  }

  /* === Counters row (12 status counters) === */
  .o-counters, .status-counters {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .o-counters > *, .status-counters > * {
    padding: 8px !important;
    font-size: 12px !important;
  }

  /* === Dashboard layout === */
  .dash-grid, .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ============================================================
     USERS PAGE: أداء المؤكدين + الأجور → بطاقات (v3)
     الجدول .up-table من users-perf-v2.js
     ============================================================ */
  .up-table-wrap {
    overflow-x: visible;
    border: none;
    background: transparent;
  }

  .up-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* إخفاء رأس الجدول */
  .up-table thead {
    display: none;
  }

  .up-table tbody {
    display: block;
  }

  /* كل مؤكد يصبح بطاقة (شبكة عمودين للإحصائيات) */
  .up-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }

  .up-table tbody tr:hover {
    background: var(--paper);
  }

  .up-table tbody td {
    display: block;
    width: 100% !important;
    padding: 5px 0;
    border-bottom: none;
    text-align: right;
    font-size: 13px;
  }

  body.fr .up-table tbody td {
    text-align: left;
  }

  /* اسم المؤكد: عنوان البطاقة */
  .up-td-name {
    grid-column: 1 / -1;
    font-size: 15px;
    padding-bottom: 8px !important;
    border-bottom: 2px solid var(--gold-light) !important;
    margin-bottom: 6px;
  }

  /* labels قبل القيم */
  .up-td-orders::before,
  .up-td-confirmed::before,
  .up-td-delivered::before,
  .up-td-rate-conf::before,
  .up-td-rate-deliv::before,
  .up-td-paid::before,
  .up-td-owed::before {
    font-size: 11px;
    font-weight: 700;
    color: var(--gold-dark);
  }

  .up-td-orders::before { content: "📦 طلبيات: "; }
  .up-td-confirmed::before { content: "✅ مؤكدة: "; }
  .up-td-delivered::before { content: "🚚 موصلة: "; }
  .up-td-rate-conf::before { content: "📈 معدل التأكيد: "; }
  .up-td-rate-deliv::before { content: "📈 معدل التوصيل: "; }
  .up-td-paid::before { content: "💰 عمولات مدفوعة: "; }
  .up-td-owed::before { content: "⏳ متبقي: "; }

  body.fr .up-td-orders::before { content: "📦 Cmds: "; }
  body.fr .up-td-confirmed::before { content: "✅ Confirmées: "; }
  body.fr .up-td-delivered::before { content: "🚚 Livrées: "; }
  body.fr .up-td-rate-conf::before { content: "📈 Taux conf.: "; }
  body.fr .up-td-rate-deliv::before { content: "📈 Taux liv.: "; }
  body.fr .up-td-paid::before { content: "💰 Payées: "; }
  body.fr .up-td-owed::before { content: "⏳ À payer: "; }

  /* العمولات: سطر كامل مفصول */
  .up-td-paid,
  .up-td-owed {
    grid-column: 1 / -1;
    border-top: 1px dashed var(--soft) !important;
    padding-top: 7px !important;
    font-size: 14px;
  }

  /* صف الإجمالي (tfoot) → بطاقة */
  .up-table tfoot {
    display: block;
  }

  .up-table tfoot tr {
    display: block;
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 10px 12px;
  }

  .up-table tfoot td {
    display: block;
    width: 100% !important;
    border-bottom: none;
    padding: 4px 0;
    text-align: right !important;
  }

  body.fr .up-table tfoot td {
    text-align: left !important;
  }

  .up-tf-label {
    font-size: 14px;
    border-bottom: 1px dashed var(--soft) !important;
    padding-bottom: 6px !important;
  }

  .up-tf-paid::before,
  .up-tf-owed::before {
    font-size: 11px;
    font-weight: 700;
    color: var(--gold-dark);
  }

  .up-tf-paid::before { content: "💰 عمولات مدفوعة: "; }
  .up-tf-owed::before { content: "⏳ متبقي: "; }
  body.fr .up-tf-paid::before { content: "💰 Payées: "; }
  body.fr .up-tf-owed::before { content: "⏳ À payer: "; }
}

/* ============================================================
   Tablets (769px–1024px) — تخفيف فقط
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .o-table {
    font-size: 13px;
    min-width: 1100px;
  }
  #app {
    padding: 0 12px;
  }
}