/* admin-orders — owned by one agent; see index.html */

/* ================================================================================================
   Payment donut ring card (owner redesign, Oct 2026): إجمالي الحجز / المدفوع / المتبقي used to appear
   THREE times on the order screen (payment chip, .oh-stats, big bar) — this is now the single place
   they appear, as a compact card with an SVG progress ring instead of the old horizontal bar (owner's
   own suggestion: "circle so it takes small space and looks elegant"). Markup: admin-orders.js
   bsPayRingCardHtml(). Colour states: none (red) -> partial (amber) -> full (green), same convention
   the old bar used. Sits in .bs-row2, next to the shipping-status card.
   ================================================================================================ */
.bs-pay-card .bs-pay-ring-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.bs-pay-ring-wrap { position: relative; width: 104px; height: 104px; flex: none; }
.bs-pay-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.bs-pay-ring-track { fill: none; stroke: #e2e8f0; stroke-width: 10; }
.bs-pay-ring-fill { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.22, 1, .36, 1); }
.bs-pay-none .bs-pay-ring-fill { stroke: var(--red); }
.bs-pay-partial .bs-pay-ring-fill { stroke: var(--amber); }
.bs-pay-full .bs-pay-ring-fill { stroke: var(--green); }
.bs-pay-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.bs-pay-ring-center b { font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.bs-pay-none .bs-pay-ring-center b { color: var(--red); }
.bs-pay-partial .bs-pay-ring-center b { color: var(--amber); }
.bs-pay-full .bs-pay-ring-center b { color: var(--green); }
.bs-pay-ring-center small { font-size: 10.5px; color: var(--mut); font-weight: 600; }

.bs-pay-figs { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 140px; }
.bs-pay-figs div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-top: 1px dashed var(--line); padding-top: 6px; }
.bs-pay-figs div:first-child { border-top: 0; padding-top: 0; }
.bs-pay-figs small { color: var(--mut); font-size: 12px; }
.bs-pay-figs b { font-size: 14.5px; font-weight: 700; }
.bs-pay-figs u { text-decoration: none; font-size: 11px; color: var(--mut); font-weight: 500; }

@media (max-width: 640px) {
  .bs-pay-ring-wrap { width: 76px; height: 76px; }
  .bs-pay-ring-track, .bs-pay-ring-fill { stroke-width: 9; }
  .bs-pay-ring-center b { font-size: 16px; }
  .bs-pay-ring-center small { font-size: 9.5px; }
  .bs-pay-card .bs-pay-ring-row { gap: 12px; }
  .bs-pay-figs { gap: 6px; min-width: 0; }
  .bs-pay-figs b { font-size: 13px; }
}

/* ================================================================================================
   Shipping-status card (owner redesign, Oct 2026): merges what used to be a big alert banner
   ("تم شحن هذا الحجز بالكامل" / "متوقف على تعليمات الشحن" / "مسموح بشحن هذا الحجز") AND a separate
   "حالة الشحن" chip into one card, next to the payment ring in .bs-row2. Markup: admin-orders.js
   bsShipStatusCardHtml(). Same tag colour convention as SHIP_TAG (t-s/t-a/t-g).
   ================================================================================================ */
.bs-ship-card h3 { flex-wrap: wrap; gap: 8px; }
.bs-ship-sub { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; }
.bs-ship-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.bs-ship-acts .btn { height: 36px; }

/* بيانات الشحن / البوليصة (migration 084, redesigned 2026-10-23 — owner: "primitive"-looking before) — lives
   inside the shipping card, never a separate card/table, so it never forces horizontal scroll at 390px (every
   child wraps via flex-wrap). Three states share the same .bs-wb-row anchor class (bsWaybillReplaceCard's
   querySelector/removal depends on it): empty / view (saved label card) / edit (inline form). */
.bs-wb-row { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- empty state: inviting panel, not a bare link ---- */
.bs-wb-empty { background: #f8fafc; border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; }
.bs-wb-empty-ic { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--pri2), var(--teal)); color: #fff; display: grid; place-items: center; font-size: 18px; flex: none; }
.bs-wb-empty-ic-sm { width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }
.bs-wb-empty-body { flex: 1; min-width: 160px; }
.bs-wb-empty-body b { font-size: 13.5px; }
.bs-wb-empty-body p { margin: 2px 0 0; font-size: 12px; line-height: 1.5; }

/* ---- saved state: compact "shipping label" card ---- */
.bs-wb-view { align-items: stretch; }
.bs-wb-card { flex: 1; min-width: 220px; background: #f8fafc; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.bs-wb-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bs-wb-co-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.bs-wb-co-chip-empty { font-weight: 500; }
.bs-wb-avatar { width: 22px; height: 22px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.bs-wb-cod-chip { font-size: 11px; font-weight: 600; color: var(--amber); background: #fffbeb; border: 1px solid #fde68a; border-radius: 20px; padding: 2px 9px; }
.bs-wb-num-row { display: flex; align-items: center; }
.bs-wb-num-copy { border: 0; background: transparent; padding: 2px 0; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border-radius: 8px; }
.bs-wb-num-copy:hover { background: #eef2f7; }
.bs-wb-num-copy b { font-size: 17px; letter-spacing: .3px; }
.bs-wb-copy-ic { font-size: 13px; opacity: .65; }
.bs-wb-num-copy.bs-wb-copied .bs-wb-copy-ic::after { content: ' ✓ تم النسخ'; font-size: 11px; color: var(--green); opacity: 1; }
.bs-wb-meta { font-size: 11px; }
.bs-wb-edit-btn { flex: none; align-self: flex-start; }

/* ---- edit state: proper form, floating-style labels, 44px tap targets ---- */
.bs-wb-edit { align-items: stretch; flex-direction: column; background: #f8fafc; border: 1px solid var(--line); border-radius: 12px; padding: 14px; width: 100%; }
.bs-wb-edit-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bs-wb-edit-head b { font-size: 13.5px; }
.bs-wb-fields { display: flex; gap: 12px; flex-wrap: wrap; }
.bs-wb-field { display: flex; flex-direction: column; gap: 4px; min-width: 200px; flex: 1 1 220px; }
.bs-wb-field label { font-size: 11.5px; color: var(--mut); font-weight: 700; }
.bs-wb-combo { display: flex; gap: 6px; }
.bs-wb-combo select, .bs-wb-combo input { flex: 1; min-width: 0; height: 44px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 12px; background: #fff; font-size: 13.5px; transition: .15s; }
.bs-wb-combo select:focus, .bs-wb-combo input:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.bs-wb-combo input.mono { letter-spacing: .4px; }
.bs-wb-combo .btn { height: 44px; flex: none; white-space: nowrap; }
.bs-wb-input-bad { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important; }
.bs-wb-err { font-size: 12px; color: var(--red); min-height: 0; }
.bs-wb-err.on { margin-top: 4px; }
.bs-wb-acts { display: flex; gap: 8px; flex: none; margin-top: 12px; }
.bs-wb-acts .btn { height: 40px; }
.bs-wb-acts .btn[disabled] { opacity: .7; cursor: wait; }

@media (max-width: 430px) {
  .bs-wb-fields { flex-direction: column; gap: 10px; }
  .bs-wb-field { flex: 1 1 auto; min-width: 0; }
  .bs-wb-acts { width: 100%; }
  .bs-wb-acts .btn { flex: 1; }
  .bs-wb-card { min-width: 0; }
  .bs-wb-edit-btn { align-self: stretch; }
}

/* ================================================================================================
   .bs-row2: the 2-column row that holds the payment ring card + the shipping-status card side by
   side on desktop (the space freed by de-duplicating the money figures and the shipping banner/chip).
   Stacks to one column on narrower screens so neither card gets squeezed.
   ================================================================================================ */
.bs-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0 2px; }
.bs-row2 .card { margin: 0; }
.bs-row2.bs-row2-single { grid-template-columns: 1fr; }
@media (max-width: 860px) { .bs-row2 { grid-template-columns: 1fr; } }

/* -- slim bar: reservations list rows ("نسبة الدفع" column) ----------------------------------- */
.bs-pay-sm { position: relative; min-width: 72px; height: 14px; border-radius: 999px; background: #e2e8f0; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .15); }
.bs-pay-sm-fill { position: absolute; inset: 0 0 0 auto; right: 0; height: 100%; border-radius: 999px; transition: width .4s ease; background: linear-gradient(90deg, #cbd5e1, #94a3b8); }
.bs-pay-sm.bs-pay-none .bs-pay-sm-fill { background: linear-gradient(90deg, #f87171, #dc2626); }
.bs-pay-sm.bs-pay-partial .bs-pay-sm-fill { background: linear-gradient(90deg, #fbbf24, #d97706); }
.bs-pay-sm.bs-pay-full .bs-pay-sm-fill { background: linear-gradient(90deg, #4ade80, #16a34a); }
.bs-pay-sm span { position: relative; font-size: 10px; font-weight: 800; color: #0f172a; text-shadow: 0 1px 1px rgba(255, 255, 255, .7); }

/* ================================================================================================
   Activity log ("سجل النشاط") — live screen (PAGES.activity override in admin-orders.js, loaded
   after admin-more.js so it replaces the mock-data-only page in server mode). Mobile-first:
   filters stack into one column, the timeline list never needs horizontal scroll.
   ================================================================================================ */
.bs-act-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.bs-act-filters .f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mut); }
.bs-act-filters input, .bs-act-filters select { height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font-family: inherit; font-size: 13px; }
.bs-act-filters .bs-act-actions { display: flex; gap: 8px; align-items: center; grid-column: 1 / -1; justify-content: flex-start; }

.bs-act-list { display: flex; flex-direction: column; gap: 0; }
.bs-act-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bs-act-row:last-child { border-bottom: 0; }
.bs-act-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--pri); }
.bs-act-body { flex: 1; min-width: 0; }
.bs-act-desc { font-size: 13.5px; line-height: 1.6; }
.bs-act-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 11.5px; color: var(--mut); }

.bs-act-empty, .bs-act-error { text-align: center; color: var(--mut); padding: 40px 10px; }
.bs-act-error { color: var(--red); }
.bs-act-more { display: flex; justify-content: center; padding: 14px 0 4px; }

@media (max-width: 640px) {
  .bs-act-filters { grid-template-columns: 1fr 1fr; }
  .bs-act-row { gap: 8px; }
}

/* shipping-instructions banner: stack on phones so the text keeps its full width (it was squeezed to one word per line) */
@media (max-width:640px){.sbn{flex-wrap:wrap;padding:14px}.sbn-tx{flex:1 1 calc(100% - 70px)}.sbn-btns{width:100%}.sbn-btns .btn,.sbn>.btn{flex:1 1 auto;width:100%}}

/* ================================================================================================
   Order-screen redesign (owner request, Oct 2026, v1 + v2): a prominent top summary band right under
   the order number — customer contact line + a row of state chips (حالة الأوردر / طبيعة الأوردر /
   حالة الدفع — percentage only, no amounts) — so a busy exhibition clerk sees everything that matters
   at a glance. حالة الشحن moved out of this chip row into its own full card in .bs-row2 (see the
   shipping-status-card block above), next to the payment ring card, in round 2 of this redesign
   (de-duplicating the money figures and the shipping banner/chip). Markup is built in admin-orders.js
   (bsRestructureOrderLayout / bsNatureChip / bsPayChipHtml / bsCustMiniHtml) — these rules only style
   it. RTL-safe (no fixed left/right assumptions beyond the rest of the page), dark-mode: this app has
   no dark theme yet (admin.css defines a single :root palette, no prefers-color-scheme/data-theme), so
   these rules only use the existing design tokens and will automatically pick up a future theme the
   same way every other admin.css rule does.
   ================================================================================================ */
.bs-top-band{display:flex;flex-direction:column;gap:12px;margin:14px 0 2px}

.bs-cust-mini{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bs-cust-av{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--pri2),var(--teal));color:#fff;display:grid;place-items:center;font-size:17px;font-weight:700;flex:none}
.bs-cust-info{min-width:0}
.bs-cust-info b{display:block;font-size:15.5px}
.bs-cust-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:3px;font-size:12.5px;color:var(--mut)}
.bs-cust-sub a.bs-tap{color:var(--pri);text-decoration:none;font-weight:700}
.bs-cust-sub a.bs-tap:hover{text-decoration:underline}
.bs-tap{display:inline-flex;align-items:center;min-height:40px}

.bs-chip-row{display:flex;flex-wrap:wrap;gap:10px}
.bs-chip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:8px 12px;min-height:40px}
.bs-chip-lbl{font-size:11px;color:var(--mut);font-weight:700;white-space:nowrap}
.bs-chip select{height:32px;border-radius:8px;border:1px solid var(--line);padding:0 8px;font-family:inherit;font-size:12.5px}
.bs-chip .btn{height:32px;padding:0 10px;font-size:12px}
.bs-chip-nature.locked{background:#dcfce7;border-color:#86efac}

/* the action bar's own shipping-allow button (added next to ✏️ تعديل / ＋ تسجيل دفعة) reads as a primary
   action like its neighbours, not a danger-red outlier, when shipping is already allowed */
.oh-acts .btn.acc{background:var(--teal);border-color:var(--teal);color:#fff}

@media (max-width:640px){
  .bs-chip-row{gap:8px}
  .bs-chip{flex:1 1 calc(50% - 8px);min-width:150px}
  .bs-cust-sub{gap:6px 12px}
}
@media (max-width:420px){
  .bs-chip{flex:1 1 100%}
}

/* collapsible «السجل» (activity log + revisions), collapsed by default — owner request: these were two
   separate always-open cards competing for attention with the things the clerk actually needs mid-order. */
details.bs-log-collapse{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 20px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
details.bs-log-collapse summary{cursor:pointer;font-weight:700;font-size:14.5px;list-style:none;display:flex;align-items:center;gap:8px;min-height:40px}
details.bs-log-collapse summary::-webkit-details-marker{display:none}
details.bs-log-collapse summary::before{content:'▸';font-size:12px;color:var(--mut);transition:transform .15s}
details.bs-log-collapse[open] summary::before{transform:rotate(90deg)}
details.bs-log-collapse .card{border:0;box-shadow:none;padding:14px 0 0;margin-top:10px;border-radius:0}
details.bs-log-collapse .card + .card{border-top:1px solid var(--line)}

/* ---- order screen as side-by-side TABS (owner request 2026-10-25) ---- */
.ot-wrap{padding:0;overflow:hidden;margin-top:14px}
.ot-tabs{display:flex;gap:4px;padding:8px 10px 0;border-bottom:1px solid var(--line);background:#f8fafc;overflow-x:auto}
.ot-tab{border:0;background:transparent;padding:11px 18px;font-weight:700;font-size:14px;color:var(--mut);cursor:pointer;border-radius:10px 10px 0 0;border-bottom:3px solid transparent;white-space:nowrap;display:inline-flex;gap:8px;align-items:center}
.ot-tab b{background:#e8edf5;color:var(--ink);border-radius:10px;padding:1px 8px;font-size:12px}
.ot-tab:hover{color:var(--ink);background:#eef2f9}
.ot-tab.on{color:var(--pri);background:#fff;border-bottom-color:var(--pri)}
.ot-tab.on b{background:var(--pri);color:#fff}
.ot-panel{display:none;padding:14px;gap:14px}
.ot-panel.on{display:flex;flex-direction:column}
.ot-panel .card{box-shadow:none;margin:0}
.ot-panel .ot-flat{border:0;padding:0}
.ot-panel .ot-flat>h3{margin-top:0}
.ot-panel .ot-flat .tbl-wrap{border-radius:10px}
.ot-panel[data-t="pay"].on,.ot-panel[data-t="ship"].on{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));align-items:start}
.ot-extra{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.ot-panel .bs-log-collapse{border:0}
.ot-panel[data-t="cust"].on{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start;gap:14px}
.ot-panel[data-t="cust"] .card{margin:0;border:1px solid var(--line)}
.ot-panel[data-t="cust"] .ot-flat{border:1px solid var(--line);padding:16px;border-radius:14px;background:#fff}
/* one full-width column once the side cards live in tabs */
.od-grid.ot-one{grid-template-columns:minmax(0,1fr)}
.od-grid.ot-one .od-side{order:2}
.ot-hist .ship-hist{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}
.ot-hist .ship-hist>div{flex:1 1 280px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#f8fafc}
.ot-hist>.btn{margin-top:10px}
/* waybills inside the top «حالة الشحن» card + shipments tab (side by side) */
.bs-ship-wbs{margin-top:14px;border-top:1px dashed var(--line);padding-top:10px}
.bs-ship-wbs-h{font-weight:700;font-size:13px;margin-bottom:8px;color:var(--ink)}
.bs-ship-wbrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0}
.bs-ship-wbrow>b{min-width:52px}
.ot-panel[data-t="ship"].on{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;align-items:start}
.ot-panel[data-t="ship"] .ship-hist{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
.ot-panel[data-t="ship"] .ot-card{border:0;padding:0}