/* shared-portal/portal-components.css
 * SINGLE SOURCE of the portal order-detail component styles — sliced verbatim from
 * public-customer (lines 364-558) so the owner preview matches the customer portal
 * pixel-for-pixel. Generated by c:/tmp/extract_css.py. The owner wraps the rendered
 * detail in .portal-preview-host (provides the vars + light surface + child
 * width-lock, minus the customer's full-height scroll layout). */
.portal-shell, .portal-preview-host {
  --portal-bg:       #f2f3f5;
  --portal-surface:  #ffffff;
  --portal-banner:   #599bba;
  --portal-text:     #16283c;
  --portal-muted:    #5b6b7e;
  --portal-border:   #e2e6ec;
  --portal-accent:   #599bba;
  --portal-accent-soft: #eaf2f6;
  --portal-warn:     #a4853e;
  --portal-ok:       #4a8c5e;
  --portal-critical: #b6402f;
  --portal-order-tint: #e3edf4;
}
.portal-preview-host {
  direction: rtl;
  color: var(--portal-text);
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  overflow: hidden;
  font-family: "Segoe UI", -apple-system, Arial, sans-serif;
}
.portal-main > *, .portal-preview-host > * { box-sizing: border-box; min-width: 0; max-width: 100%; width: 100%; }
.portal-item-card { box-sizing: border-box; min-width: 0; max-width: 100%; width: 100%; }

/* ---- component rules (verbatim from public-customer 364-558) ---- */
  /* Light-blue banner — title BOLD + big, order number small */
  .portal-main-banner { background: var(--portal-banner); color: #fff; padding: 22px 28px; }
  .portal-banner-title { font-size: 26px; font-weight: 700; line-height: 1.15; }
  .portal-banner-numbers { color: rgba(255,255,255,0.85); font-size: 13px; margin-top: 6px; font-variant-numeric: tabular-nums; }
  .portal-banner-numbers .sep { margin: 0 8px; opacity: 0.5; }
  .portal-banner-date { color: rgba(255,255,255,0.85); font-size: 13px; margin-top: 10px; }
  .portal-banner-purchaser { color: rgba(255,255,255,0.95); font-size: 13px; margin-top: 4px; }
  .portal-banner-purchaser .label { color: rgba(255,255,255,0.7); margin-left: 4px; }

  .portal-status-row { padding: 16px 28px; background: var(--portal-bg); border-bottom: 1px solid var(--portal-border); display: flex; align-items: center; gap: 10px; color: var(--portal-text); font-size: 14px; }

  .portal-hero { text-align: center; padding: 28px 24px 32px; background: var(--portal-surface); border-bottom: 1px solid var(--portal-border); }
  .portal-hero-label { color: var(--portal-banner); font-size: 14px; font-weight: 600; }
  .portal-hero-date { font-size: 36px; font-weight: 400; color: var(--portal-muted); margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
  .portal-hero-sub { color: var(--portal-muted); font-size: 12px; margin-top: 10px; }

  /* Payments panel (Feature 1) — sits between hero and items. */
  .portal-pay { margin: 0 28px 4px; background: var(--portal-surface); border: 1px solid var(--portal-border); border-radius: 8px; padding: 16px 20px; }
  .portal-pay.is-paid { border-color: rgba(74,140,94,0.45); background: rgba(74,140,94,0.06); }
  .portal-pay-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--portal-text); margin-bottom: 10px; }
  .portal-pay-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--portal-accent-soft); color: var(--portal-banner); }
  .portal-pay.is-paid .portal-pay-badge { background: var(--portal-ok); color: #fff; }
  .portal-pay-rows { display: flex; flex-direction: column; gap: 6px; }
  .portal-pay-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--portal-text); }
  .portal-pay-line .label { color: var(--portal-muted); }
  .portal-pay-line .val { font-variant-numeric: tabular-nums; font-weight: 600; }
  .portal-pay-line.total { border-top: 1px solid var(--portal-border); margin-top: 4px; padding-top: 8px; font-size: 15px; }
  .portal-pay-line.balance .val { color: var(--portal-warn); }
  .portal-pay-next { margin-top: 10px; font-size: 13px; color: var(--portal-muted); }
  .portal-pay-note { margin-top: 8px; font-size: 12px; color: var(--portal-warn); }

  /* Portal notes (Feature 2): free-text Idan writes FOR the customer.
     Order-level = callout under the hero; item-level = small box under the ETA. */
  .portal-order-note { margin: 0 28px 4px; background: var(--portal-accent-soft); border: 1px solid var(--portal-border); border-right: 3px solid var(--portal-accent); border-radius: 8px; padding: 12px 16px; color: var(--portal-text); font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
  .portal-note-label { display: block; color: var(--portal-banner); font-weight: 700; font-size: 12px; margin-bottom: 4px; }
  .portal-item-note { margin-top: 10px; padding: 8px 10px; background: var(--portal-accent-soft); border-radius: 6px; color: var(--portal-text); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
  .portal-item-note .portal-note-label { display: inline; font-size: 12px; margin: 0 0 0 4px; }

  /* Portal documents (Feature 3): direct EZCount download links. */
  .portal-docs { margin: 0 28px 4px; background: var(--portal-surface); border: 1px solid var(--portal-border); border-radius: 8px; padding: 16px 20px; }
  .portal-docs-head { font-weight: 700; font-size: 15px; color: var(--portal-text); margin-bottom: 10px; }
  .portal-docs-list { display: flex; flex-direction: column; gap: 8px; }
  .portal-doc-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--portal-border); border-radius: 6px; color: var(--portal-banner); text-decoration: none; font-size: 14px; transition: background 0.12s, border-color 0.12s; }
  .portal-doc-link:hover { background: var(--portal-accent-soft); border-color: var(--portal-accent); }
  .portal-doc-icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--portal-accent); }
  .portal-doc-text { flex: 1; min-width: 0; }
  .portal-doc-type { font-weight: 600; color: var(--portal-text); }
  .portal-doc-number { color: var(--portal-muted); font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; }
  .portal-doc-dl { flex: 0 0 auto; color: var(--portal-muted); font-size: 12px; }

  /* Progress stepper (Feature 4): 5-step lifecycle, uniform monochrome icons in
     the page palette (NOT multicolor emoji). RTL: step 1 is on the right. */
  .portal-stepper { display: flex; flex-direction: row; align-items: flex-start; margin-top: 12px; }
  .portal-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
  /* connector to the previous lifecycle step (physically to the RIGHT in RTL):
     line starts at this step's centre and extends one step-width rightwards. */
  .portal-step::before { content: ''; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: var(--portal-border); z-index: 0; }
  .portal-step:first-child::before { display: none; }
  .portal-step.done::before, .portal-step.current::before { background: var(--portal-accent); }
  /* Direction cue: a left-pointing chevron centred on the connector line (same
     16px centre as the line + circle), so the right → left flow is unmistakable. */
  .portal-step::after { content: ''; position: absolute; top: 12px; left: 100%; transform: translateX(-50%); width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 6px solid var(--portal-border); z-index: 2; }
  .portal-step:first-child::after { display: none; }
  .portal-step.done::after, .portal-step.current::after { border-right-color: var(--portal-accent); }
  .portal-step-icon { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--portal-surface); border: 2px solid var(--portal-border); color: var(--portal-muted); }
  .portal-step-icon svg { width: 16px; height: 16px; }
  .portal-step.done .portal-step-icon { background: var(--portal-accent); border-color: var(--portal-accent); color: #fff; }
  .portal-step.current .portal-step-icon { background: var(--portal-banner); border-color: var(--portal-banner); color: #fff; box-shadow: 0 0 0 4px var(--portal-accent-soft); }
  .portal-step-label { margin-top: 6px; font-size: 10px; line-height: 1.25; color: var(--portal-muted); padding: 0 2px; }
  .portal-step.done .portal-step-label { color: var(--portal-text); }
  .portal-step.current .portal-step-label { color: var(--portal-text); font-weight: 700; }

  /* Order-level zone — a distinct tinted band so it reads as "the whole order"
     (ETA + status + payment + documents), clearly separate from the white item
     cards below it (Tal 2026-06-02). White cards inside pop against the tint. */
  .portal-order-summary { background: var(--portal-order-tint); padding: 2px 0 14px; }
  .portal-order-summary .portal-hero { background: transparent; border-bottom: 1px solid rgba(89,155,186,0.18); }
  .portal-order-summary > div:not(.portal-hero) { margin-top: 12px; }

  /* Items zone heading — clear "these are the line items" separator. */
  .portal-order-progress { margin: 0 28px; background: var(--portal-surface); border: 1px solid var(--portal-border); border-radius: 8px; padding: 16px 20px 18px; }
  .portal-order-progress-head { font-weight: 700; font-size: 15px; color: var(--portal-text); }

  /* Delivered item — light-green fill (not just a border). */
  .portal-item-card.is-delivered { background: rgba(74,140,94,0.08); border-color: rgba(74,140,94,0.45); }

  /* Cancelled item — light-red fill (Tal 2026-06-02). */
  .portal-item-card.is-cancelled { background: rgba(182,64,47,0.07); border-color: rgba(182,64,47,0.45); }

  /* Warehouse item (arrived at Lonsher, awaiting supply) — light-pink fill (Tal 2026-06-03). */
  .portal-item-card.is-warehouse { background: rgba(209,98,150,0.08); border-color: rgba(209,98,150,0.4); }

  /* "needs info" — replaces the bar entirely, clearly red */
  .portal-needs-info { margin-top: 12px; display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-radius: 6px; background: rgba(182,64,47,0.07); border: 1px solid rgba(182,64,47,0.4); color: var(--portal-critical); font-weight: 700; font-size: 13px; }
  .portal-needs-info svg { width: 18px; height: 18px; flex: 0 0 auto; }

  /* "בוטל" — replaces the bar entirely, clearly cancelled. Larger than needs-info
     so the cancellation is unmistakable. */
  .portal-cancelled { margin-top: 12px; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 6px; background: rgba(182,64,47,0.1); border: 1px solid rgba(182,64,47,0.5); color: var(--portal-critical); font-weight: 800; font-size: 15px; letter-spacing: 0.3px; }
  .portal-cancelled svg { width: 20px; height: 20px; flex: 0 0 auto; }

  /* "סופק חלקית" (Tal 2026-06-02, Proposal B) — keep the full stepper but tint it
     amber + a caption, so progress is visible AND the partial state is clear. */
  .portal-item-card.is-partial { background: rgba(164,133,62,0.08); border-color: rgba(164,133,62,0.45); }
  .portal-stepper.partial .portal-step.done::before, .portal-stepper.partial .portal-step.current::before { background: var(--portal-warn); }
  .portal-stepper.partial .portal-step.done::after, .portal-stepper.partial .portal-step.current::after { border-right-color: var(--portal-warn); }
  .portal-stepper.partial .portal-step.done .portal-step-icon { background: var(--portal-warn); border-color: var(--portal-warn); color: #fff; }
  .portal-stepper.partial .portal-step.current .portal-step-icon { background: var(--portal-warn); border-color: var(--portal-warn); color: #fff; box-shadow: 0 0 0 4px rgba(164,133,62,0.18); }
  /* Partial / awaiting-release caption — neutral (Tal 2026-06-03: סופק חלקית בלי צבע). */
  .portal-partial-cap { margin-top: 12px; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--portal-muted); }
  .portal-partial-cap svg { width: 16px; height: 16px; flex: 0 0 auto; }
  .portal-partial-cap small { display: block; font-weight: 600; font-size: 12px; color: var(--portal-muted); margin-top: 2px; }

  /* "ממתינים לאיסוף" — one consolidated notice at the BOTTOM of the items list,
     prominent but not exaggerated (Tal 2026-06-02). Accent border + soft fill. */
  .portal-pickup-notice { margin: 14px 28px 4px; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 8px; background: var(--portal-accent-soft); border: 1px solid rgba(89,155,186,0.45); border-right: 4px solid var(--portal-accent); color: var(--portal-text); }
  .portal-pickup-notice > svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--portal-banner); }
  .portal-pickup-notice-text { display: flex; flex-direction: column; gap: 2px; }
  .portal-pickup-notice-text strong { font-size: 14px; font-weight: 800; color: var(--portal-banner); }
  .portal-pickup-notice-text span { font-size: 12px; color: var(--portal-muted); }

  /* ETA + flag line under the bar */
  .portal-item-eta { margin-top: 10px; display: flex; align-items: center; gap: 8px; color: var(--portal-muted); font-size: 12px; }
  .portal-item-eta .portal-house { width: 18px; height: 18px; color: var(--portal-accent); flex: 0 0 auto; }
  .portal-item-eta .portal-house svg { width: 18px; height: 18px; }

  .portal-items-head { padding: 18px 28px 6px; color: var(--portal-text); font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  /* Sort toggle: "סדר מקורי" reverts to Monday order (default = sort by arrival). */
  .portal-sort-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--portal-muted); cursor: pointer; user-select: none; }
  .portal-sort-toggle input { accent-color: var(--portal-accent); cursor: pointer; margin: 0; }
  /* Status summary: one count chip per status present, in lifecycle order. */
  .portal-status-summary { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 28px 8px; }
  .portal-summary-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--portal-text); background: var(--portal-bg); border: 1px solid var(--portal-border); border-radius: 999px; padding: 3px 11px; }
  .portal-summary-chip b { font-variant-numeric: tabular-nums; color: var(--portal-banner); font-weight: 700; }
  .portal-items { padding: 4px 28px 32px; display: flex; flex-direction: column; gap: 14px; }

  /* Eleshop-style item card: two rows separated by a thin divider */
  .portal-item-card { background: var(--portal-surface); border: 1px solid var(--portal-border); border-radius: 6px; padding: 16px 20px; }
  .portal-item-card.is-green { border-color: rgba(74,140,94,0.4); }
  .portal-item-headline { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .portal-item-qty { font-size: 22px; color: var(--portal-muted); font-weight: 400; font-variant-numeric: tabular-nums; min-width: 48px; }
  .portal-item-qty-x { color: #c0c8d2; margin-right: 4px; font-size: 18px; }
  .portal-item-title { font-weight: 700; font-size: 18px; color: var(--portal-text); flex: 1; min-width: 0; word-break: break-word; }
  /* Country flag — small PNG image at the bottom-left of the card (end of
     the stock row in RTL flow). We serve from flagcdn.com because Windows'
     Segoe UI Emoji does NOT include country flag glyphs — regional-indicator
     pairs fall back to plain ASCII letters ("US", "IL") instead. Image avoids
     that. Size kept small per Idan's feedback so it's a subtle origin marker,
     not a focal point. */
  .portal-item-flag {
    width: 22px;
    height: 16px;
    flex-shrink: 0;
    align-self: center;
    margin-inline-start: auto;  /* push to the end of the flex line = left edge in RTL */
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    object-fit: cover;
    cursor: help;
  }
  .portal-item-mpn-line { color: var(--portal-muted); font-size: 13px; font-family: ui-monospace, SFMono-Regular, monospace; margin-top: 6px; padding-right: 62px; }
  .portal-item-mpn-line .label { font-family: "Segoe UI", -apple-system, sans-serif; color: var(--portal-muted); margin-left: 4px; }
  .portal-item-divider { border: 0; border-top: 1px solid var(--portal-border); margin: 12px 0; }
  .portal-item-stock { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .portal-item-stock-text { color: var(--portal-text); font-size: 14px; flex: 1; min-width: 200px; }
  .portal-item-stock-text strong { font-weight: 600; }
  .portal-item-stock-text small { color: var(--portal-muted); display: block; margin-top: 4px; font-size: 12px; }
  .portal-item-card.is-green .portal-status-glyph.dynamic { background: var(--portal-ok); color: #fff; }
  .portal-item-card.is-green .portal-item-stock-text strong { color: var(--portal-ok); }

  /* Warehouse icon (inline SVG colored via currentColor) */
  .portal-house { width: 44px; height: 44px; flex-shrink: 0; color: var(--portal-banner); display: inline-flex; align-items: center; justify-content: center; }
  .portal-house svg { width: 100%; height: 100%; }

  /* Status indicator (✓ / ⓘ / ⏳ / ⚠ — uses currentColor) */
  .portal-status-glyph { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; font-weight: 700; flex-shrink: 0; }
  .portal-status-glyph.ok       { background: var(--portal-ok); color: #fff; }
  .portal-status-glyph.info     { background: var(--portal-muted); color: #fff; }
  .portal-status-glyph.warn     { background: var(--portal-warn); color: #fff; }
  .portal-status-glyph.critical { background: var(--portal-critical); color: #fff; }
  .portal-status-glyph.accent   { background: var(--portal-banner); color: #fff; }

  /* Small status pill for sidebar (compact) */
  .portal-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; }
  .portal-status-in_stock   { background: rgba(74,140,94,0.12);  color: var(--portal-ok); }
  .portal-status-delivered  { background: rgba(74,140,94,0.18);  color: var(--portal-ok); }
  .portal-status-shipped    { background: rgba(89,155,186,0.14); color: var(--portal-accent); }
  .portal-status-on_order   { background: rgba(164,133,62,0.12); color: var(--portal-warn); }
  .portal-status-arriving   { background: rgba(164,133,62,0.20); color: var(--portal-warn); }
  .portal-status-delayed    { background: rgba(212,80,62,0.12);  color: var(--portal-critical); }
  .portal-status-pending    { background: rgba(91,107,126,0.12); color: var(--portal-muted); }
  .portal-status-in_progress{ background: rgba(89,155,186,0.10); color: var(--portal-accent); }

  .portal-empty, .portal-loading { padding: 40px; text-align: center; color: var(--portal-muted); font-size: 13px; }
  .portal-error { padding: 24px; background: rgba(212,80,62,0.08); color: var(--portal-critical); border: 1px solid rgba(212,80,62,0.2); border-radius: 6px; margin: 16px 24px; font-size: 13px; }