/* ============================================================
   صفحة «تقرير الطلبات»
   ============================================================

   ‏كلُّ طلبٍ: دفع كام، استلم إمتى، استفاد قد إيه، وباقي له قد إيه.

   وكل لون هنا من `tokens.css`. وما هو في المنصة يستعمل كما هو:
   البطاقة `ostat`، والجدول `orders-table`، والتبويب `seg-btn`.
   ============================================================ */

.orp-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.orp-bar-main,
.orp-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.orp-bar-main { flex: 1 1 320px; }
.orp-shop { flex: 0 1 200px; min-width: 140px; }
.orp-search { flex: 1 1 220px; min-width: 0; max-width: 420px; }

.orp-note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  border-radius: var(--radius);
  color: var(--warning-text);
  font-size: var(--fs-sm);
}
.orp-note i,
.orp-note svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; }

/* ‏ثماني بطاقات: أربعٌ في الصفّ على المكتب واثنتان على الجوّال — `auto-fit` كان يتركها ستّا واثنتين.
   والأيقونةُ تُرفع على الجوّال: البطاقةُ مئةٌ وسبعون بكسلا، والمبلغُ «3,709 ر.س» لا يسعه ما يبقى بعدها */
.orp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .orp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .orp-stats .ostat-icon { display: none; }
}

.orp-panel {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.orp-panel > h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.orp-panel > h3 i,
.orp-panel > h3 svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; }

.orp-tabs { margin-bottom: var(--sp-3); flex-wrap: wrap; }
.orp-n {
  margin-inline-start: var(--sp-1);
  font-weight: var(--fw-semibold);
  opacity: .75;
}

/* ‏الأرقام تُقرأ عمودا: لا يلتفّ مبلغٌ ولا تاريخ */
.orp-table td,
.orp-table th { white-space: nowrap; vertical-align: top; }
.orp-table td:nth-child(3) { white-space: normal; min-width: 150px; }
.orp-sub {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-tight);
}
.orp-product {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orp-span { cursor: pointer; }
.orp-span:hover td,
.orp-span:focus-visible td { background: var(--surface-3, var(--surface-1)); }
.orp-span.is-on td { background: var(--info-soft); }
.orp-total td {
  border-top: 2px solid var(--border-subtle);
  font-weight: var(--fw-semibold);
}
.orp-bad { color: var(--danger-text); font-weight: var(--fw-semibold); }
.orp-warn { color: var(--warning-text); font-weight: var(--fw-semibold); }

.orp-tag {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  font-size: var(--fs-xs);
  color: var(--text-primary);
}
.orp-tag[data-tone="green"] { background: var(--success-soft); border-color: transparent; color: var(--success-text); }
.orp-tag[data-tone="amber"] { background: var(--warning-soft); border-color: transparent; color: var(--warning-text); }
.orp-tag[data-tone="red"]   { background: var(--danger-soft);  border-color: transparent; color: var(--danger-text); }
.orp-flag {
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--warning-text);
}

.orp-more { margin-top: var(--sp-3); }
.orp-foot { margin: var(--sp-3) 0 0; }

@media (max-width: 640px) {
  .orp-panel { padding: var(--sp-3); }
  .orp-bar-actions { width: 100%; }
  .orp-bar-actions .btn { flex: 1 1 auto; }
}