/* ============================================================================
   BARBAROS — orders-premium.css (premium batch 2, ORDERS owner)
   ----------------------------------------------------------------------------
   Skin for the interactive orders layer: the 9-cell row, status pill + menu, quick actions,
   bulk bar, toolbar tools, reason/postpone pickers, call-centre progress, skeletons, and the
   inline fallbacks (op-toast / op-sheet) used only when window.BuldUX is absent.
   Tokens only. The few !important below fight legacy !important rules (collision list):
     c1  coss-tables grid columns (11-col) on #panel-all-orders rows
     c2  buld-theme pill/chip radius + colours on .status-pill
     c3  dark-fix `[class*="card"] strong/small` ink on cells
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Grid — 9 cells: select · n° · produit · client · prix · tél · statut · livraison · actions
   ---------------------------------------------------------------------------- */
html[data-buld-theme] #panel-all-orders .yaya-scope .table-head,
html[data-buld-theme] #panel-all-orders .yaya-scope .table-row {
    grid-template-columns: 36px 112px minmax(190px, 1.6fr) minmax(170px, 1.3fr) 118px 132px minmax(150px, 1fr) 104px 148px !important; /* c1 */
    gap: 14px !important;
    align-items: center;
    min-width: 1180px;
}
html[data-buld-theme] #panel-all-orders .yaya-scope .table-row {
    padding: 10px 16px;
    min-height: 64px;
    position: relative;
    transition: background var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] #panel-all-orders .yaya-scope .table-row:hover { background: var(--buld-hover); }
html[data-buld-theme="light"] #panel-all-orders .yaya-scope .table-row:hover { background: var(--buld-page); }
html[data-buld-theme] #panel-all-orders .yaya-scope .table-row.selected,
html[data-buld-theme] #panel-all-orders .yaya-scope .table-row.is-selected { background: var(--buld-cta-soft); }
html[data-buld-theme] #panel-all-orders .yaya-scope .table-row > div { min-width: 0; }
html[data-buld-theme] #panel-all-orders .yaya-scope .table-row[style*="--row-color"]::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px;
    background: var(--row-color, transparent);
}

/* row-enter stagger */
html[data-buld-theme] #allOrdersBody.op-anim .table-row { animation: opRowIn var(--bx-dur-layout) var(--bx-ease) both; }
html[data-buld-theme] #allOrdersBody.op-anim .table-row:nth-child(2)  { animation-delay: 30ms; }
html[data-buld-theme] #allOrdersBody.op-anim .table-row:nth-child(3)  { animation-delay: 60ms; }
html[data-buld-theme] #allOrdersBody.op-anim .table-row:nth-child(4)  { animation-delay: 90ms; }
html[data-buld-theme] #allOrdersBody.op-anim .table-row:nth-child(5)  { animation-delay: 120ms; }
html[data-buld-theme] #allOrdersBody.op-anim .table-row:nth-child(6)  { animation-delay: 150ms; }
html[data-buld-theme] #allOrdersBody.op-anim .table-row:nth-child(7)  { animation-delay: 180ms; }
html[data-buld-theme] #allOrdersBody.op-anim .table-row:nth-child(8)  { animation-delay: 210ms; }
html[data-buld-theme] #allOrdersBody.op-anim .table-row:nth-child(n+9) { animation-delay: 240ms; }
@keyframes opRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------------------
   2. Cells
   ---------------------------------------------------------------------------- */
/* select */
html[data-buld-theme] #panel-all-orders .ord-select-cell { display: flex; align-items: center; justify-content: center; }
html[data-buld-theme] #panel-all-orders .row-check {
    width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--buld-divider);
    background: var(--p-card-bg); display: inline-flex; align-items: center; justify-content: center;
    position: relative; cursor: pointer; transition: border-color var(--bx-dur-hover) var(--bx-ease), background var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] #panel-all-orders .row-check:hover { border-color: var(--buld-cta); }
html[data-buld-theme] #panel-all-orders .row-check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
html[data-buld-theme] #panel-all-orders .row-check:has(input:checked) { background: var(--buld-cta); border-color: var(--buld-cta); }
html[data-buld-theme] #panel-all-orders .row-check:has(input:checked)::after {
    content: ""; width: 5px; height: 9px; border: solid var(--bx-action-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px);
}

/* n° + date */
html[data-buld-theme] #panel-all-orders .ord-id-cell { display: flex; flex-direction: column; gap: 3px; }
html[data-buld-theme] #panel-all-orders .yaya-scope .order-id {
    display: inline-block; width: fit-content; padding: 3px 8px; border-radius: 7px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-weight: 600;
    color: var(--buld-ink-1); background: var(--buld-elevated); border: 1px solid var(--buld-hairline);
}
html[data-buld-theme="light"] #panel-all-orders .yaya-scope .order-id { background: var(--buld-page); }
html[data-buld-theme] #panel-all-orders .ord-date { font-size: 11.5px; color: var(--buld-ink-3); white-space: nowrap; }

/* product */
html[data-buld-theme] #panel-all-orders .product-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
html[data-buld-theme] #panel-all-orders .yaya-scope .product-img {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 9px; object-fit: cover;
    background: var(--buld-elevated); border: 1px solid var(--buld-hairline);
}
html[data-buld-theme] #panel-all-orders .yaya-scope .product-img--ph { display: flex; align-items: center; justify-content: center; color: var(--buld-ink-4); }
html[data-buld-theme] #panel-all-orders .yaya-scope .product-img--ph svg { width: 18px; height: 18px; }
html[data-buld-theme] #panel-all-orders .product-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-buld-theme] #panel-all-orders .product-name { font-size: 13px; font-weight: 600; color: var(--buld-ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] #panel-all-orders .product-sku { font-size: 11.5px; color: var(--buld-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* customer */
html[data-buld-theme] #panel-all-orders .customer-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
html[data-buld-theme] #panel-all-orders .yaya-scope .customer-avatar {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    color: hsl(var(--hue, 210) 55% 32%); background: hsl(var(--hue, 210) 70% 92%); border: 0; background-image: none;
}
html[data-buld-theme="dark"] #panel-all-orders .yaya-scope .customer-avatar { color: hsl(var(--hue, 210) 80% 86%); background: hsl(var(--hue, 210) 35% 30%); }
html[data-buld-theme] #panel-all-orders .customer-avatar[data-hue="0"]   { --hue: 0; }
html[data-buld-theme] #panel-all-orders .customer-avatar[data-hue="1"]   { --hue: 30; }
html[data-buld-theme] #panel-all-orders .customer-avatar[data-hue="2"]   { --hue: 60; }
html[data-buld-theme] #panel-all-orders .customer-avatar[data-hue="3"]   { --hue: 120; }
html[data-buld-theme] #panel-all-orders .customer-avatar[data-hue="4"]   { --hue: 170; }
html[data-buld-theme] #panel-all-orders .customer-avatar[data-hue="5"]   { --hue: 210; }
html[data-buld-theme] #panel-all-orders .customer-avatar[data-hue="6"]   { --hue: 250; }
html[data-buld-theme] #panel-all-orders .customer-avatar[data-hue="7"]   { --hue: 290; }
html[data-buld-theme] #panel-all-orders .customer-avatar[data-hue="8"]   { --hue: 330; }
html[data-buld-theme] #panel-all-orders .customer-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-buld-theme] #panel-all-orders .customer-name { font-size: 13px; font-weight: 600; color: var(--buld-ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] #panel-all-orders .customer-meta { font-size: 11.5px; color: var(--buld-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* price + qty */
html[data-buld-theme] #panel-all-orders .price-cell { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
html[data-buld-theme] #panel-all-orders .yaya-scope .price { font-size: 13.5px; font-weight: 700; color: var(--buld-ink-1); font-variant-numeric: tabular-nums; }
html[data-buld-theme] #panel-all-orders .yaya-scope .price small { font-size: 11px; font-weight: 500; color: var(--buld-ink-3); margin-inline-start: 3px; }
html[data-buld-theme] #panel-all-orders .yaya-scope .qty-chip {
    font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 6px;
    color: var(--buld-ink-2); background: var(--buld-elevated); border: 1px solid var(--buld-hairline);
}
html[data-buld-theme="light"] #panel-all-orders .yaya-scope .qty-chip { background: var(--buld-page); }

/* phone */
html[data-buld-theme] #panel-all-orders .yaya-scope .phone-chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    height: 28px; padding: 0 10px; border-radius: 999px;
    font-family: inherit; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums;
    color: var(--buld-ink-1); background: transparent; border: 1px solid var(--buld-hairline); cursor: pointer;
    transition: background var(--bx-dur-hover) var(--bx-ease), border-color var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] #panel-all-orders .yaya-scope .phone-chip:hover { background: var(--buld-hover); border-color: var(--buld-divider); }
html[data-buld-theme] #panel-all-orders .yaya-scope .phone-chip svg { width: 13px; height: 13px; color: var(--buld-ink-3); flex-shrink: 0; }
html[data-buld-theme] #panel-all-orders .yaya-scope .phone-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* status */
html[data-buld-theme] #panel-all-orders .status-stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html[data-buld-theme] #panel-all-orders .status-dropdown-wrap { position: relative; }
html[data-buld-theme] #panel-all-orders .status-meta {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    font-size: 11px; color: var(--buld-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-buld-theme] #panel-all-orders .status-meta svg { width: 11px; height: 11px; flex-shrink: 0; }

/* delivery */
html[data-buld-theme] #panel-all-orders .yaya-scope .delivery-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 999px;
    font-size: 12px; font-weight: 500; color: var(--buld-ink-2); background: transparent; border: 1px solid var(--buld-hairline); white-space: nowrap;
}
html[data-buld-theme] #panel-all-orders .yaya-scope .delivery-pill .dp-dot { width: 6px; height: 6px; border-radius: 50%; }
html[data-buld-theme] #panel-all-orders .yaya-scope .delivery-pill-home .dp-dot { background: var(--buld-cta); }
html[data-buld-theme] #panel-all-orders .yaya-scope .delivery-pill-desk .dp-dot { background: var(--buld-warning); }

/* ----------------------------------------------------------------------------
   3. Status pill (.op-pill) — a real menu button, tone-driven
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .op-pill {
    --tone: var(--buld-ink-4); --tone-soft: var(--buld-elevated);
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
    height: 28px; padding: 0 9px 0 10px; border-radius: 999px !important; /* c2 */
    font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap;
    color: var(--buld-ink-1) !important; background: var(--tone-soft) !important; border: 1px solid transparent !important; /* c2 */
    cursor: pointer; transition: box-shadow var(--bx-dur-hover) var(--bx-ease), transform var(--bx-dur-hover) var(--bx-ease), background var(--bx-dur-overlay) var(--bx-ease);
}
html[data-buld-theme] .op-pill[data-tone="info"]    { --tone: var(--buld-cta);     --tone-soft: var(--buld-cta-soft); }
html[data-buld-theme] .op-pill[data-tone="success"] { --tone: var(--buld-success); --tone-soft: var(--bx-success-soft); }
html[data-buld-theme] .op-pill[data-tone="warning"] { --tone: var(--buld-warning); --tone-soft: var(--bx-warning-soft); }
html[data-buld-theme] .op-pill[data-tone="danger"]  { --tone: var(--buld-danger);  --tone-soft: var(--bx-danger-soft); }
html[data-buld-theme] .op-pill[data-tone="neutral"] { --tone: var(--buld-ink-4);   --tone-soft: var(--buld-elevated); }
html[data-buld-theme] .op-pill:hover { box-shadow: 0 0 0 1px var(--tone); }
html[data-buld-theme] .op-pill:active { transform: scale(.98); }
html[data-buld-theme] .op-pill:focus-visible { outline: 2px solid var(--buld-cta); outline-offset: 2px; }
html[data-buld-theme] .op-pill[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--tone-soft), 0 0 0 1px var(--tone); }
html[data-buld-theme] .op-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); flex-shrink: 0; }
html[data-buld-theme] .op-pill__label { overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] .op-pill__count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--bx-action-ink); background: var(--tone);
}
html[data-buld-theme] .op-pill svg { width: 13px; height: 13px; color: var(--buld-ink-3); flex-shrink: 0; margin-inline-start: -2px; }
html[data-buld-theme] .op-pill.is-morph { animation: opPillMorph 400ms var(--bx-ease); }
@keyframes opPillMorph { 0% { transform: scale(.94); filter: brightness(1.15); } 60% { transform: scale(1.03); } 100% { transform: none; filter: none; } }

/* ----------------------------------------------------------------------------
   4. Quick actions (hover reveal) + more menu
   ---------------------------------------------------------------------------- */
html[data-buld-theme] #panel-all-orders .yaya-scope .actions { display: flex; justify-content: flex-end; }
html[data-buld-theme] .op-quick { display: inline-flex; align-items: center; gap: 4px; }
html[data-buld-theme] .op-qa {
    width: 30px; height: 30px; border-radius: 9px; border: 1px solid transparent;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--buld-ink-2); cursor: pointer; text-decoration: none; position: relative;
    transition: background var(--bx-dur-hover) var(--bx-ease), color var(--bx-dur-hover) var(--bx-ease), opacity var(--bx-dur-hover) var(--bx-ease), transform var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] .op-qa svg { width: 16px; height: 16px; }
html[data-buld-theme] .op-qa:hover { background: var(--buld-hover); color: var(--buld-ink-1); }
html[data-buld-theme] .op-qa:active { transform: scale(.94); }
html[data-buld-theme] .op-qa:focus-visible { outline: 2px solid var(--buld-cta); outline-offset: 1px; }
html[data-buld-theme] .op-qa--confirm { color: var(--buld-success); }
html[data-buld-theme] .op-qa--confirm:hover { background: var(--bx-success-soft); color: var(--buld-success); }
@media (hover: hover) {
    html[data-buld-theme] #panel-all-orders .table-row .op-qa:not([data-act="more"]) { opacity: 0; transform: translateX(4px); }
    html[data-buld-theme] #panel-all-orders .table-row:hover .op-qa,
    html[data-buld-theme] #panel-all-orders .table-row:focus-within .op-qa { opacity: 1; transform: none; }
}
/* tooltip */
html[data-buld-theme] .op-qa[data-tip]::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(2px);
    padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; white-space: nowrap;
    color: var(--buld-page); background: var(--buld-ink-1); opacity: 0; pointer-events: none;
    transition: opacity var(--bx-dur-hover) var(--bx-ease), transform var(--bx-dur-hover) var(--bx-ease); z-index: 3;
}
html[data-buld-theme] .op-qa[data-tip]:hover::after { opacity: 1; transform: translateX(-50%); }

/* ----------------------------------------------------------------------------
   5. Popover menus (.op-pop / .op-menu) — status, more, sort, period
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .op-pop,
html[data-buld-theme] .op-menu {
    position: fixed; z-index: var(--p-z-menu, 120); min-width: 220px; max-width: 320px;
    padding: 6px; border-radius: 12px;
    background: var(--p-card-bg); border: 1px solid var(--p-card-border); box-shadow: var(--bx-shadow-3);
    animation: opPopIn var(--bx-dur-overlay) var(--bx-ease) both;
}
/* The popover wrapper is the positioned box (JS sets --x/--y); a menu nested in it flows inside. */
/* a popover can be opened from inside a sheet (order drawer: status menu, colour/size pickers) —
   it must sit above every sheet layer (drawer 130 + depth), below toasts */
html[data-buld-theme] .op-pop { left: var(--x, 12px); top: var(--y, 12px); z-index: calc(var(--p-z-modal, 140) + 5); }
html[data-buld-theme] .op-pop > .op-menu { position: static; left: auto; top: auto; max-width: none; }
html[data-buld-theme] .op-menu.is-closing, html[data-buld-theme] .op-pop.is-closing { animation: opPopOut var(--bx-dur-hover) var(--bx-ease) both; }
@keyframes opPopIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes opPopOut { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
html[data-buld-theme] .op-menu__title { padding: 6px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--buld-ink-3); }
html[data-buld-theme] .op-menu__sep { height: 1px; margin: 6px 4px; background: var(--buld-hairline); }
html[data-buld-theme] .op-menu__item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 36px; padding: 6px 10px; border-radius: 8px; border: 0; background: transparent;
    font-family: inherit; font-size: 13px; color: var(--buld-ink-1); text-align: start; cursor: pointer;
    transition: background var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] .op-menu__item:hover,
html[data-buld-theme] .op-menu__item.is-focused,
html[data-buld-theme] .op-menu__item:focus-visible { background: var(--buld-hover); outline: none; }
html[data-buld-theme] .op-menu__item.is-current { background: var(--buld-cta-soft); }
html[data-buld-theme] .op-menu__item.is-danger { color: var(--buld-danger); }
html[data-buld-theme] .op-menu__item.is-danger:hover { background: var(--bx-danger-soft); }
html[data-buld-theme] .op-menu__item svg { width: 16px; height: 16px; color: var(--buld-ink-3); flex-shrink: 0; }
html[data-buld-theme] .op-menu__item.is-danger svg { color: var(--buld-danger); }
html[data-buld-theme] .op-menu__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--tone, var(--buld-ink-4)); }
html[data-buld-theme] .op-menu__dot[data-tone="info"]    { background: var(--buld-cta); }
html[data-buld-theme] .op-menu__dot[data-tone="success"] { background: var(--buld-success); }
html[data-buld-theme] .op-menu__dot[data-tone="warning"] { background: var(--buld-warning); }
html[data-buld-theme] .op-menu__dot[data-tone="danger"]  { background: var(--buld-danger); }
html[data-buld-theme] .op-menu__label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
html[data-buld-theme] .op-menu__hint { font-size: 11px; color: var(--buld-ink-3); }
html[data-buld-theme] .op-menu__check { width: 14px; height: 14px; color: var(--buld-cta); opacity: 0; flex-shrink: 0; }
html[data-buld-theme] .op-menu__item.is-current .op-menu__check { opacity: 1; }
html[data-buld-theme] .op-menu__range { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; padding: 6px 8px 4px; align-items: center; }
html[data-buld-theme] .op-menu__range input {
    height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--buld-divider);
    background: var(--p-card-bg); color: var(--buld-ink-1); font-family: inherit; font-size: 12.5px;
}
html[data-buld-theme] .op-menu__range button {
    height: 30px; padding: 0 10px; border-radius: 8px; border: 0; background: var(--buld-cta); color: var(--bx-action-ink);
    font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}

/* ----------------------------------------------------------------------------
   6. Toolbar tools (Période / Trier) + clickable KPI cells
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .op-tools { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; }
html[data-buld-theme] .yaya-scope .toolbar .op-tools + .p-search { margin-inline-start: 0; }
html[data-buld-theme] .op-tool {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border-radius: 999px;
    border: 1px solid var(--buld-hairline); background: var(--p-card-bg); color: var(--buld-ink-1);
    font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
    transition: border-color var(--bx-dur-hover) var(--bx-ease), background var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] .op-tool:hover { border-color: var(--buld-divider); }
html[data-buld-theme] .op-tool.is-active { border-color: var(--buld-cta); background: var(--buld-cta-soft); }
html[data-buld-theme] .op-tool svg { width: 14px; height: 14px; color: var(--buld-ink-3); }
html[data-buld-theme] .op-tool__chev { width: 12px; height: 12px; }
html[data-buld-theme] #panel-all-orders .orders-kpi-card[data-filter] { cursor: pointer; transition: background var(--bx-dur-hover) var(--bx-ease); }
html[data-buld-theme] #panel-all-orders .orders-kpi-card[data-filter]:hover { background: var(--buld-hover); }
html[data-buld-theme] #panel-all-orders .orders-kpi-card[data-filter].is-active { background: var(--buld-cta-soft); }
html[data-buld-theme] #panel-all-orders .orders-kpi-card[data-filter].is-active .orders-kpi-label { color: var(--buld-cta); }

/* ----------------------------------------------------------------------------
   7. Bulk bar — slides up from the bottom centre
   ---------------------------------------------------------------------------- */
/* #bulkActions is the bar itself (orders.js toggles its inline display; it is rebuilt by orders-premium.js) */
html[data-buld-theme] #panel-all-orders #bulkActions[data-premium="1"] {
    position: fixed; left: 50%; bottom: 24px; z-index: var(--p-z-drawer, 130);
    align-items: center; gap: 6px; padding: 8px 8px 8px 16px; border-radius: 16px; margin: 0; width: auto;
    background: var(--buld-ink-1); color: var(--buld-page); box-shadow: var(--bx-shadow-3); border: 0;
    transform: translateX(-50%);
    animation: opBulkIn var(--bx-dur-layout) var(--bx-ease) both;
}
@keyframes opBulkIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translateX(-50%); } }
html[data-buld-theme] .op-bulk__count { font-size: 13px; font-weight: 600; white-space: nowrap; }
html[data-buld-theme] .op-bulk__sep { width: 1px; height: 20px; margin: 0 6px; background: currentColor; opacity: .18; }
html[data-buld-theme] .op-bulk__btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; border: 0;
    background: transparent; color: inherit; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] .op-bulk__btn:hover { background: rgba(255, 255, 255, .12); }
html[data-buld-theme="light"] .op-bulk__btn:hover { background: rgba(255, 255, 255, .16); }
html[data-buld-theme] .op-bulk__btn svg { width: 15px; height: 15px; }
html[data-buld-theme] .op-bulk__btn--primary { background: var(--buld-cta); color: var(--bx-action-ink); }
html[data-buld-theme] .op-bulk__btn--primary:hover { background: var(--buld-cta-hover); }
html[data-buld-theme] .op-bulk__btn--danger { color: var(--buld-danger); }
html[data-buld-theme] .op-bulk__close { width: 32px; height: 32px; border-radius: 10px; border: 0; background: transparent; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
html[data-buld-theme] .op-bulk__close svg { width: 15px; height: 15px; }
html[data-buld-theme] #bulkActions .op-bulk__count strong { margin-inline-end: 5px; }

/* ----------------------------------------------------------------------------
   8. Reason / postpone pickers (.op-ask) inside sheets
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .op-ask { display: flex; flex-direction: column; gap: 14px; }
html[data-buld-theme] .op-ask__label { font-size: 12px; font-weight: 600; color: var(--buld-ink-2); }
html[data-buld-theme] .op-ask__chips { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-buld-theme] .op-ask__chip {
    height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--buld-hairline);
    background: transparent; color: var(--buld-ink-1); font-family: inherit; font-size: 13px; cursor: pointer;
    transition: background var(--bx-dur-hover) var(--bx-ease), border-color var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] .op-ask__chip:hover { background: var(--buld-hover); }
html[data-buld-theme] .op-ask__chip.is-on { background: var(--buld-cta-soft); border-color: var(--buld-cta); }
html[data-buld-theme] .op-ask__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html[data-buld-theme] .op-ask__input,
html[data-buld-theme] .op-ask__text {
    width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--buld-divider);
    background: var(--p-card-bg); color: var(--buld-ink-1); font-family: inherit; font-size: 13.5px;
}
html[data-buld-theme] .op-ask__text { min-height: 84px; resize: vertical; }
html[data-buld-theme] .op-ask__input:focus, html[data-buld-theme] .op-ask__text:focus { outline: none; border-color: var(--buld-cta); box-shadow: 0 0 0 3px var(--buld-cta-soft); }
html[data-buld-theme] .op-ask__foot { display: flex; justify-content: flex-end; gap: 8px; }

/* ----------------------------------------------------------------------------
   9. Call centre — queue progress, outcome button feedback, copy phone
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .op-queue-progress { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; font-size: 12px; font-weight: 500; color: var(--buld-ink-3); }
html[data-buld-theme] .op-queue-progress__bar { width: 80px; height: 4px; border-radius: 4px; background: var(--buld-hover); overflow: hidden; }
html[data-buld-theme] .op-queue-progress__fill { display: block; height: 100%; width: calc(var(--p, 0) * 1%); border-radius: 4px; background: var(--buld-cta); transition: width var(--bx-dur-layout) var(--bx-ease); }
html[data-buld-theme] #panel-confirmation .call-queue h3 { display: flex; align-items: center; gap: 10px; }
html[data-buld-theme] #panel-confirmation .call-btn.is-firing { animation: opFire 420ms var(--bx-ease); }
@keyframes opFire { 0% { transform: scale(.96); } 50% { transform: scale(1.03); } 100% { transform: none; } }
html[data-buld-theme] .op-call-copy { margin-inline-start: 4px; vertical-align: middle; }
html[data-buld-theme] #panel-confirmation .panel-header h1 .badge-count,
html[data-buld-theme] #panel-confirmation #callCount { font-size: 12px; vertical-align: middle; }

/* ----------------------------------------------------------------------------
   10. Skeleton rows
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .op-skel-row { display: grid; grid-template-columns: 36px 112px 1.6fr 1.3fr 118px 132px 1fr 104px 148px; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--buld-hairline); }
html[data-buld-theme] .op-skel { display: block; border-radius: 6px; background: var(--buld-hover); animation: opShimmer 1.2s ease-in-out infinite; }
html[data-buld-theme] .op-skel--line { height: 12px; width: 80%; }
html[data-buld-theme] .op-skel--short { width: 50%; }
html[data-buld-theme] .op-skel--wide { width: 95%; }
html[data-buld-theme] .op-skel--box { width: 18px; height: 18px; border-radius: 5px; }
html[data-buld-theme] .op-skel--thumb { width: 38px; height: 38px; border-radius: 9px; }
html[data-buld-theme] .op-skel--avatar { width: 32px; height: 32px; border-radius: 50%; }
html[data-buld-theme] .op-skel--pill { height: 26px; width: 90px; border-radius: 999px; }
@keyframes opShimmer { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ----------------------------------------------------------------------------
   11. Drawer timeline + misc used by the order drawer content
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .op-tl { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
html[data-buld-theme] .op-tl__step { position: relative; padding: 0 0 14px 22px; font-size: 13px; color: var(--buld-ink-2); }
html[data-buld-theme] .op-tl__step::before { content: ""; position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--buld-divider); }
html[data-buld-theme] .op-tl__step::after { content: ""; position: absolute; left: 8.5px; top: 15px; bottom: -2px; width: 1px; background: var(--buld-hairline); }
html[data-buld-theme] .op-tl__step:last-child::after { display: none; }
html[data-buld-theme] .op-tl__step.is-done::before { background: var(--buld-success); }
html[data-buld-theme] .op-tl__step.is-current::before { background: var(--buld-cta); box-shadow: 0 0 0 3px var(--buld-cta-soft); }
html[data-buld-theme] .op-tl__step strong { display: block; color: var(--buld-ink-1); font-weight: 600; }
html[data-buld-theme] .op-muted { color: var(--buld-ink-3); }
html[data-buld-theme] .op-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----------------------------------------------------------------------------
   12. Fallbacks when BuldUX is absent: .op-toasts / .op-sheet / .op-scrim
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .op-toasts { position: fixed; top: 76px; inset-inline-end: 24px; z-index: var(--p-z-toast, 150); display: flex; flex-direction: column; gap: 8px; width: 360px; max-width: calc(100vw - 32px); }
html[data-buld-theme] .op-toast {
    display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; position: relative; overflow: hidden;
    padding: 12px 12px 12px 14px; border-radius: 12px; background: var(--p-card-bg); border: 1px solid var(--p-card-border);
    border-inline-start: 3px solid var(--tone, var(--buld-cta)); box-shadow: var(--bx-shadow-3);
    animation: opToastIn var(--bx-dur-overlay) var(--bx-ease) both;
}
html[data-buld-theme] .op-toast.is-leaving { animation: opToastOut var(--bx-dur-hover) var(--bx-ease) both; }
html[data-buld-theme] .op-toast[data-tone="success"] { --tone: var(--buld-success); }
html[data-buld-theme] .op-toast[data-tone="warning"] { --tone: var(--buld-warning); }
html[data-buld-theme] .op-toast[data-tone="danger"]  { --tone: var(--buld-danger); }
@keyframes opToastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes opToastOut { to { opacity: 0; transform: translateX(24px); } }
html[data-buld-theme] .op-toast__icon { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--tone, var(--buld-cta)); background: var(--buld-hover); }
html[data-buld-theme] .op-toast__icon svg { width: 15px; height: 15px; }
html[data-buld-theme] .op-toast__title { font-size: 13px; font-weight: 600; color: var(--buld-ink-1); }
html[data-buld-theme] .op-toast__msg { font-size: 12.5px; color: var(--buld-ink-3); margin-top: 2px; }
html[data-buld-theme] .op-toast__actions { display: flex; gap: 6px; margin-top: 8px; }
html[data-buld-theme] .op-toast__act { height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--buld-hairline); background: transparent; color: var(--buld-ink-1); font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
html[data-buld-theme] .op-toast__act.is-primary { background: var(--buld-cta); color: var(--bx-action-ink); border-color: transparent; }
html[data-buld-theme] .op-toast__close { width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--buld-ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
html[data-buld-theme] .op-toast__close svg { width: 14px; height: 14px; }
html[data-buld-theme] .op-toast__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--tone, var(--buld-cta)); transform-origin: left; animation: opBar var(--dur, 4500ms) linear forwards; }
@keyframes opBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
html[data-buld-theme] .op-scrim { position: fixed; inset: 0; z-index: var(--p-z-drawer, 130); background: var(--bx-scrim); animation: opFade var(--bx-dur-overlay) var(--bx-ease) both; }
@keyframes opFade { from { opacity: 0; } to { opacity: 1; } }
html[data-buld-theme] .op-sheet {
    position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(520px, 100vw); z-index: calc(var(--p-z-drawer, 130) + 1);
    display: flex; flex-direction: column; background: var(--p-card-bg); border-inline-start: 1px solid var(--p-card-border); box-shadow: var(--bx-shadow-3);
    animation: opSheetIn var(--bx-dur-layout) var(--bx-ease) both;
}
html[data-buld-theme] .op-sheet[data-side="bottom"] { top: auto; inset-inline: 0; width: auto; max-height: 86vh; border-radius: 16px 16px 0 0; border: 1px solid var(--p-card-border); animation-name: opSheetUp; }
@keyframes opSheetIn { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes opSheetUp { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
html[data-buld-theme] .op-sheet__head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--buld-hairline); }
html[data-buld-theme] .op-sheet__titles { flex: 1; min-width: 0; }
html[data-buld-theme] .op-sheet__title { font-size: 16px; font-weight: 600; color: var(--buld-ink-1); }
html[data-buld-theme] .op-sheet__sub { font-size: 12.5px; color: var(--buld-ink-3); margin-top: 2px; }
html[data-buld-theme] .op-sheet__close { width: 32px; height: 32px; border-radius: 10px; border: 0; background: transparent; color: var(--buld-ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
html[data-buld-theme] .op-sheet__close:hover { background: var(--buld-hover); color: var(--buld-ink-1); }
html[data-buld-theme] .op-sheet__body { flex: 1; overflow: auto; padding: 18px 20px; }
html[data-buld-theme] .op-sheet__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--buld-hairline); }
html.op-sheet-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    html[data-buld-theme] #allOrdersBody.op-anim .table-row, html[data-buld-theme] .op-pop, html[data-buld-theme] .op-menu,
    html[data-buld-theme] .op-toast, html[data-buld-theme] .op-sheet, html[data-buld-theme] .op-scrim { animation: none; }
}

/* ----------------------------------------------------------------------------
   13. Shared muted text (.od__muted — ship sheet, call centre). The drawer is section 17 (.odx-*).
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .od__muted { color: var(--buld-ink-3); }

/* ----------------------------------------------------------------------------
   14. Shipping sheet content (.os__*)
   ---------------------------------------------------------------------------- */
html[data-buld-theme] .os__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
html[data-buld-theme] .os__h { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--buld-ink-3); }
html[data-buld-theme] .os__accts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
html[data-buld-theme] .os__acct {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border-radius: 12px; cursor: pointer;
    background: var(--p-card-bg); border: 1px solid var(--buld-hairline); text-align: start; font-family: inherit;
    transition: border-color var(--bx-dur-hover) var(--bx-ease), transform var(--bx-dur-hover) var(--bx-ease), box-shadow var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme] .os__acct:hover { transform: translateY(-1px); box-shadow: var(--bx-shadow-2); }
html[data-buld-theme] .os__acct.is-active { border-color: var(--buld-cta); box-shadow: 0 0 0 3px var(--buld-cta-soft); }
/* carrier logo: a light chip so every logo (most are drawn for white) reads in both themes; the code shows only without an image */
html[data-buld-theme] .os__logo { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 34px; max-width: 120px; padding: 4px 8px; border-radius: 8px; background: var(--buld-elevated); box-sizing: border-box; }
html[data-buld-theme] .os__logo.has-img { background: #fff; border: 1px solid var(--buld-hairline); }
html[data-buld-theme] .os__logo img { display: block; height: 100%; width: auto; max-width: 104px; object-fit: contain; }
html[data-buld-theme] .os__logo.has-img .os__code { display: none; }
html[data-buld-theme] .os__logo .os__code { font-weight: 700; letter-spacing: .04em; color: var(--buld-ink-2); }
html[data-buld-theme] .os__name { font-size: 13px; font-weight: 600; color: var(--buld-ink-1); }
html[data-buld-theme] .os__acc, html[data-buld-theme] .os__code { font-size: 11.5px; color: var(--buld-ink-3); }
html[data-buld-theme] .os__check { position: absolute; top: 10px; inset-inline-end: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--buld-cta); color: var(--bx-action-ink); display: inline-flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.6); transition: opacity var(--bx-dur-hover) var(--bx-ease), transform var(--bx-dur-hover) var(--bx-ease); }
html[data-buld-theme] .os__check svg { width: 11px; height: 11px; }
html[data-buld-theme] .os__acct.is-active .os__check { opacity: 1; transform: none; }
html[data-buld-theme] .os__seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--buld-elevated); margin-bottom: 14px; }
html[data-buld-theme] .os__seg button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; color: var(--buld-ink-2); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--bx-dur-hover) var(--bx-ease), color var(--bx-dur-hover) var(--bx-ease); }
html[data-buld-theme] .os__seg button svg { width: 14px; height: 14px; }
html[data-buld-theme] .os__seg button[aria-checked="true"] { background: var(--p-card-bg); color: var(--buld-ink-1); box-shadow: var(--bx-shadow-1); }
html[data-buld-theme] .os__note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--buld-ink-3); margin: 0 0 10px; }
html[data-buld-theme] .os__note svg { width: 14px; height: 14px; }
html[data-buld-theme] .os__orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
html[data-buld-theme] .os__orders li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--buld-hairline); font-size: 13px; color: var(--buld-ink-2); }
html[data-buld-theme] .os__orders li:first-child { border-top: 0; }
html[data-buld-theme] .os__orders .order-id { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; color: var(--buld-ink-1); }
html[data-buld-theme] .os__o-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--buld-ink-1); }
html[data-buld-theme] .os__orders strong { color: var(--buld-ink-1); font-variant-numeric: tabular-nums; }
html[data-buld-theme] .os__side { padding: 16px; position: sticky; top: 0; }
html[data-buld-theme] .os__sum { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0 0 14px; font-size: 13px; }
html[data-buld-theme] .os__sum dt { color: var(--buld-ink-3); }
html[data-buld-theme] .os__sum dd { margin: 0; font-weight: 600; color: var(--buld-ink-1); text-align: end; font-variant-numeric: tabular-nums; }
html[data-buld-theme] .os__sum dd.is-loading { opacity: .45; transition: opacity var(--bx-dur-hover) var(--bx-ease); }
html[data-buld-theme] .os__fine { margin: -6px 0 12px; font-size: 11.5px; line-height: 1.4; color: var(--buld-ink-3); }
html[data-buld-theme] .os__wait { margin: 0 0 10px; font-size: 12px; line-height: 1.4; color: var(--buld-ink-2); }
html[data-buld-theme] .os__wait[hidden] { display: none; }
html[data-buld-theme] .os__steps { list-style: none; margin: 0 0 14px; padding: 12px 0 0; border-top: 1px solid var(--buld-hairline); display: flex; justify-content: space-between; gap: 6px; }
html[data-buld-theme] .os__step { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: var(--buld-ink-3); flex: 1; }
html[data-buld-theme] .os__step-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--buld-divider); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: all var(--bx-dur-overlay) var(--bx-ease); }
html[data-buld-theme] .os__step-dot svg { width: 12px; height: 12px; }
html[data-buld-theme] .os__step.is-active .os__step-dot { border-color: var(--buld-cta); box-shadow: 0 0 0 3px var(--buld-cta-soft); animation: osPulse 1s ease-in-out infinite; }
html[data-buld-theme] .os__step.is-done .os__step-dot { background: var(--buld-success); border-color: var(--buld-success); color: var(--bx-action-ink); }
html[data-buld-theme] .os__step.is-error .os__step-dot { border-color: var(--buld-danger); background: var(--bx-danger-soft); }
html[data-buld-theme] .os__step.is-done, html[data-buld-theme] .os__step.is-active { color: var(--buld-ink-1); }
@keyframes osPulse { 0%, 100% { box-shadow: 0 0 0 3px var(--buld-cta-soft); } 50% { box-shadow: 0 0 0 6px transparent; } }
html[data-buld-theme] .os__go, html[data-buld-theme] .os__manual { width: 100%; justify-content: center; margin-top: 8px; }
html[data-buld-theme] .os__empty { padding: 20px; border-radius: 12px; border: 1px dashed var(--buld-divider); text-align: center; font-size: 13px; color: var(--buld-ink-3); }
html[data-buld-theme] .os__loading { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--buld-ink-3); padding: 12px 0; }
@media (max-width: 760px) { html[data-buld-theme] .os__grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------------
   15. Fixes after the first visual pass
   ---------------------------------------------------------------------------- */
/* coss-tables appends a "▾" to every .status-pill — the op-pill carries its own chevron */
html[data-buld-theme] .status-pill.op-pill::after, html[data-buld-theme] .status-pill.op-pill::before { content: none !important; display: none !important; }
html[data-buld-theme] .op-pill__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] .op-pill { max-width: 100%; box-sizing: border-box; }
html[data-buld-theme] #panel-all-orders .yaya-scope .table-head,
html[data-buld-theme] #panel-all-orders .yaya-scope .table-row {
    grid-template-columns: 36px 112px minmax(180px, 1.5fr) minmax(170px, 1.3fr) 118px 132px minmax(190px, 1.1fr) 104px 148px !important; /* c1 */
}
/* call centre: the card follows the theme (signature.css paints it dark in light mode) */
html[data-buld-theme] body #panel-confirmation .call-card {
    background: var(--p-card-bg) !important; border: 1px solid var(--p-card-border) !important; border-radius: 12px !important; box-shadow: none !important; color: var(--buld-ink-1) !important;
}
html[data-buld-theme="light"] body #panel-confirmation .call-card { box-shadow: var(--bx-shadow-1) !important; }
html[data-buld-theme] body #panel-confirmation .call-card::before { display: none !important; }
html[data-buld-theme] body #panel-confirmation .call-card * { color: inherit; }
html[data-buld-theme] body #panel-confirmation .call-card .call-phone, html[data-buld-theme] body #panel-confirmation .call-card #callPhone { color: var(--buld-cta) !important; font-weight: 600; }
html[data-buld-theme] body #panel-confirmation .call-card .call-trust span:last-child, html[data-buld-theme] body #panel-confirmation .call-card .od__muted { color: var(--buld-ink-3) !important; }
html[data-buld-theme] body #panel-confirmation .call-card-header { background: transparent !important; border-bottom: 1px solid var(--buld-hairline) !important; }
html[data-buld-theme] body #panel-confirmation .call-badge { background: var(--buld-cta-soft) !important; color: var(--buld-cta) !important; border: 0 !important; border-radius: 999px !important; }
html[data-buld-theme] body #panel-confirmation .call-history { background: var(--buld-elevated) !important; background-image: none !important; border: 1px solid var(--buld-hairline) !important; border-inline-start: 3px solid var(--buld-cta) !important; border-radius: 10px !important; color: var(--buld-ink-2) !important; }
html[data-buld-theme="light"] body #panel-confirmation .call-history { background: var(--buld-page) !important; }
html[data-buld-theme] body #panel-confirmation .call-avatar, html[data-buld-theme] body #panel-confirmation .call-client-avatar { background: var(--buld-cta) !important; background-image: none !important; color: var(--bx-action-ink) !important; border-radius: 12px !important; }
html[data-buld-theme] body #panel-confirmation textarea { background: var(--p-card-bg) !important; border: 1px solid var(--buld-divider) !important; border-radius: 10px !important; color: var(--buld-ink-1) !important; }
html[data-buld-theme] body #panel-confirmation .call-btn { border-radius: 12px !important; background: var(--p-card-bg) !important; border: 1px solid var(--buld-hairline) !important; color: var(--buld-ink-1) !important; background-image: none !important; box-shadow: none !important; }
html[data-buld-theme] body #panel-confirmation .call-btn:hover { background: var(--buld-hover) !important; }
html[data-buld-theme] body #panel-confirmation .call-btn.btn-confirm, html[data-buld-theme] body #panel-confirmation .call-btn.call-confirm { background: var(--buld-success) !important; color: var(--bx-action-ink) !important; border-color: transparent !important; }
html[data-buld-theme] body #panel-confirmation .call-btn.btn-cancel, html[data-buld-theme] body #panel-confirmation .call-btn.call-cancel { color: var(--buld-danger) !important; }
html[data-buld-theme] body #panel-confirmation .call-queue, html[data-buld-theme] body #panel-confirmation .queue-item { background: var(--p-card-bg) !important; border-color: var(--p-card-border) !important; color: var(--buld-ink-1) !important; }

/* ----------------------------------------------------------------------------
   16. Batch 4 — professional density, one grid per table, signals, static pills
   ---------------------------------------------------------------------------- */
/* the legacy "▾" after every .status-pill (coss-tables) */
html[data-buld-theme] .yaya-scope .status-pill::after { content: none !important; display: none !important; }
/* density */
html[data-buld-theme] .yaya-scope .orders-table .table-row { padding: 8px 14px; min-height: 58px; }
html[data-buld-theme] .yaya-scope .orders-table .table-head { padding: 10px 14px; }
html[data-buld-theme] .yaya-scope .product-img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--buld-elevated); border: 1px solid var(--buld-hairline); flex-shrink: 0; }
html[data-buld-theme] .yaya-scope .product-img--ph { display: flex; align-items: center; justify-content: center; color: var(--buld-ink-4); }
html[data-buld-theme] .yaya-scope .product-img--ph svg { width: 18px; height: 18px; }
html[data-buld-theme] .yaya-scope .product-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
html[data-buld-theme] .yaya-scope .product-info { min-width: 0; }
html[data-buld-theme] .yaya-scope .product-name { font-size: 13px; font-weight: 600; color: var(--buld-ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] .yaya-scope .product-sku { font-size: 11.5px; color: var(--buld-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] .yaya-scope .customer-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
html[data-buld-theme] .yaya-scope .customer-avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: hsl(var(--hue, 210) 55% 32%); background: hsl(var(--hue, 210) 70% 92%) !important; background-image: none !important; border: 0; }
html[data-buld-theme="dark"] .yaya-scope .customer-avatar { color: hsl(var(--hue, 210) 80% 86%); background: hsl(var(--hue, 210) 35% 30%) !important; }
html[data-buld-theme] .yaya-scope .customer-avatar[data-hue="0"] { --hue: 0; } html[data-buld-theme] .yaya-scope .customer-avatar[data-hue="1"] { --hue: 30; } html[data-buld-theme] .yaya-scope .customer-avatar[data-hue="2"] { --hue: 60; } html[data-buld-theme] .yaya-scope .customer-avatar[data-hue="3"] { --hue: 120; } html[data-buld-theme] .yaya-scope .customer-avatar[data-hue="4"] { --hue: 170; } html[data-buld-theme] .yaya-scope .customer-avatar[data-hue="5"] { --hue: 210; } html[data-buld-theme] .yaya-scope .customer-avatar[data-hue="6"] { --hue: 250; } html[data-buld-theme] .yaya-scope .customer-avatar[data-hue="7"] { --hue: 290; }
html[data-buld-theme] .yaya-scope .customer-info { min-width: 0; }
html[data-buld-theme] .yaya-scope .customer-name { font-size: 13px; font-weight: 600; color: var(--buld-ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] .yaya-scope .customer-meta { font-size: 11.5px; color: var(--buld-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
html[data-buld-theme] .yaya-scope .phone-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 10px; border-radius: 999px; font-family: inherit; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--buld-ink-1); background: transparent; border: 1px solid var(--buld-hairline); cursor: pointer; }
html[data-buld-theme] .yaya-scope .phone-chip:hover { background: var(--buld-hover); }
html[data-buld-theme] .yaya-scope .phone-chip svg { width: 13px; height: 13px; color: var(--buld-ink-3); }
html[data-buld-theme] .yaya-scope .price { font-size: 13.5px; font-weight: 700; color: var(--buld-ink-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-buld-theme] .yaya-scope .price small { font-size: 11px; font-weight: 500; color: var(--buld-ink-3); margin-inline-start: 3px; }
html[data-buld-theme] .yaya-scope .order-id { display: inline-block; padding: 3px 8px; border-radius: 7px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; color: var(--buld-ink-1); background: var(--buld-elevated); border: 1px solid var(--buld-hairline); white-space: nowrap; }
html[data-buld-theme="light"] .yaya-scope .order-id { background: var(--buld-page); }
html[data-buld-theme] .yaya-scope .cell-muted { font-size: 12.5px; color: var(--buld-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] .yaya-scope .cell-note { font-size: 12.5px; color: var(--buld-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] .yaya-scope .delivery-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--buld-ink-2); background: transparent; border: 1px solid var(--buld-hairline); white-space: nowrap; }
html[data-buld-theme] .yaya-scope .delivery-pill .dp-dot { width: 6px; height: 6px; border-radius: 50%; }
html[data-buld-theme] .yaya-scope .delivery-pill-home .dp-dot { background: var(--buld-cta); }
html[data-buld-theme] .yaya-scope .delivery-pill-desk .dp-dot { background: var(--buld-warning); }
html[data-buld-theme] .yaya-scope .op-quick.is-static .op-qa { opacity: 1; transform: none; }
/* static pill (no menu) */
html[data-buld-theme] .op-pill--static { cursor: default; padding-inline-end: 10px; }
html[data-buld-theme] .op-pill--static:hover { box-shadow: none; }
/* signals */
html[data-buld-theme] .op-signal { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; color: var(--buld-ink-2); background: var(--buld-elevated); white-space: nowrap; }
html[data-buld-theme] .op-signal--good { color: var(--buld-success); background: var(--bx-success-soft); }
html[data-buld-theme] .op-signal--warn { color: var(--buld-warning); background: var(--bx-warning-soft); }
html[data-buld-theme] .op-signal--danger { color: var(--buld-danger); background: var(--bx-danger-soft); }
html[data-buld-theme] .op-qa--wa { color: var(--buld-success); }
html[data-buld-theme] .op-qa--wa:hover { background: var(--bx-success-soft); color: var(--buld-success); }
/* grids — one per table (cells must match the header) */
html[data-buld-theme] #panel-shipping .yaya-scope .ship-table .table-head,
html[data-buld-theme] #panel-shipping .yaya-scope .ship-table .table-row { grid-template-columns: 36px 104px minmax(170px, 1.4fr) minmax(150px, 1.1fr) 96px 90px minmax(120px, 1fr) 128px 100px 100px 118px !important; gap: 12px !important; min-width: 1220px; }
html[data-buld-theme] #panel-scheduled .yaya-scope .scheduled-table .table-head,
html[data-buld-theme] #panel-scheduled .yaya-scope .scheduled-table .table-row { grid-template-columns: 36px 104px minmax(180px, 1.4fr) minmax(170px, 1.2fr) 132px 140px minmax(160px, 1fr) 110px 96px !important; gap: 12px !important; min-width: 1120px; }
html[data-buld-theme] #panel-returns .yaya-scope .returns-table .table-head,
html[data-buld-theme] #panel-returns .yaya-scope .returns-table .table-row { grid-template-columns: 36px 104px minmax(180px, 1.4fr) minmax(170px, 1.2fr) 132px 100px minmax(140px, 1fr) 110px 90px 96px !important; gap: 12px !important; min-width: 1160px; }
html[data-buld-theme] #panel-shipping .shipping-list { min-width: 0; overflow: auto; }
html[data-buld-theme] #panel-shipping .shipping-list .orders-table { overflow: auto; }
html[data-buld-theme] #panel-shipping .yaya-scope .ship-table .address-cell { font-size: 12px; color: var(--buld-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-buld-theme] #panel-shipping .yaya-scope .ship-table .location-wilaya { font-size: 13px; font-weight: 600; color: var(--buld-ink-1); }
html[data-buld-theme] #panel-shipping .yaya-scope .ship-table .carrier-cell { font-size: 12.5px; font-weight: 500; color: var(--buld-ink-2); }

/* ----------------------------------------------------------------------------
   17. Order drawer (.odx-*) — the approved prototype (prototypes/orders-models.html, detail()):
       view + inline edit in the same sheet. Tokens only; no class name carries a legacy-painter
       fragment (card / -chip / -tag / -box / block / badge / status).
       !important collisions: none. Specificity collisions handled without !important:
         · buld-theme.css `button[class*="-ghost"]` (paints any "-ghost" button) → the quiet variant is `--quiet`;
         · orders.css `body.dark a:not(…)×3` (0-4-2, link blue) → links use `.odx a.odx-btn.odx-btn` (0-4-3);
         · agent-chat's floating #agentFab sat on the sticky footer → hidden while the drawer is open.
   ---------------------------------------------------------------------------- */
/* host: the sheet's own title row gives way to the drawer header; its close button floats */
html[data-buld-theme] .ux-sheet.odx-host .ux-sheet__head { position: absolute; top: 0; inset-inline-end: 0; z-index: 4; padding: 12px; border: 0; background: transparent; box-shadow: none; }
html[data-buld-theme] .ux-sheet.odx-host .ux-sheet__heading,
html[data-buld-theme] .op-sheet.odx-host .op-sheet__titles { display: none; }
html[data-buld-theme] .op-sheet.odx-host .op-sheet__head { position: absolute; top: 0; inset-inline-end: 0; z-index: 4; padding: 12px; border: 0; background: transparent; }
html[data-buld-theme] .ux-sheet.odx-host .ux-sheet__body,
html[data-buld-theme] .op-sheet.odx-host .op-sheet__body { padding: 0; display: flex; flex-direction: column; }
html[data-buld-theme] .odx { flex: 1; min-height: 100%; display: flex; flex-direction: column; font-size: 13px; line-height: 1.45; color: var(--buld-ink-1); }
html[data-buld-theme] .odx-form { flex: 1; display: flex; flex-direction: column; margin: 0; }
html[data-buld-theme] .odx-body { flex: 1; padding: 18px 20px 8px; }
html[data-buld-theme] .odx svg.lucide { width: 15px; height: 15px; flex-shrink: 0; }
html[data-buld-theme] .odx-mut { color: var(--buld-ink-3); }
html[data-buld-theme] .odx-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* header */
html[data-buld-theme] .odx-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding-inline-end: 40px; }
html[data-buld-theme] .odx-h__main { min-width: 0; }
html[data-buld-theme] .odx-title { margin: 0; font-family: var(--buld-font-display); font-size: 18px; font-weight: 650; letter-spacing: -.01em; color: var(--buld-ink-1); }
html[data-buld-theme] .odx-oid { font-variant-numeric: tabular-nums; }
html[data-buld-theme] .odx-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px; font-size: 12.5px; color: var(--buld-ink-3); }
html[data-buld-theme] .odx-src { width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-inline-end: 2px; }
html[data-buld-theme] .odx-h__pill { margin-top: 8px; }
html[data-buld-theme] .odx-pill { height: 26px; }
html[data-buld-theme] .odx-total { text-align: end; }
html[data-buld-theme] .odx-total small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--buld-ink-3); }
html[data-buld-theme] .odx-total strong { font-family: var(--buld-font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* progress */
html[data-buld-theme] .odx-steps { display: flex; margin: 16px 0 6px; padding: 0; list-style: none; }
html[data-buld-theme] .odx-steps__i { flex: 1; position: relative; text-align: center; font-size: 11px; font-weight: 600; color: var(--buld-ink-4); }
html[data-buld-theme] .odx-steps__i::before { content: ""; position: relative; z-index: 1; display: block; width: 12px; height: 12px; margin: 0 auto 6px; border-radius: 50%; background: var(--buld-surface-2); border: 2px solid var(--buld-divider); box-sizing: border-box; }
html[data-buld-theme] .odx-steps__i:not(:first-child)::after { content: ""; position: absolute; top: 5px; right: 50%; width: 100%; height: 2px; background: var(--buld-divider); }
html[dir="rtl"][data-buld-theme] .odx-steps__i:not(:first-child)::after { right: auto; left: 50%; }
html[data-buld-theme] .odx-steps__i.is-done { color: var(--buld-ink-1); }
html[data-buld-theme] .odx-steps__i.is-done::before { background: var(--buld-success); border-color: var(--buld-success); }
html[data-buld-theme] .odx-steps__i.is-done:not(:first-child)::after { background: var(--buld-success); }
html[data-buld-theme] .odx-steps__i.is-x { color: var(--buld-danger); }
html[data-buld-theme] .odx-steps__i.is-x::before { background: var(--buld-danger); border-color: var(--buld-danger); }
html[data-buld-theme] .odx-note-line { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--buld-surface-2); color: var(--buld-ink-2); }

/* sections */
html[data-buld-theme] .odx-sec { padding: 14px 0; border-top: 1px solid var(--buld-hairline); }
html[data-buld-theme] .odx-steps + .odx-sec, html[data-buld-theme] .odx-note-line + .odx-sec { margin-top: 10px; }
html[data-buld-theme] .odx-h + .odx-sec { margin-top: 16px; }
html[data-buld-theme] .odx-sec__t { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--buld-ink-3); }
html[data-buld-theme] .odx-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
html[data-buld-theme] .odx-item--top { align-items: flex-end; margin-bottom: 12px; }
html[data-buld-theme] .odx-item__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
html[data-buld-theme] .odx-item__txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-buld-theme] .odx-item__txt .odx-mut { overflow-wrap: anywhere; }
html[data-buld-theme] .odx-av, html[data-buld-theme] .odx-thumb--ini { --hue: 210; display: inline-grid; place-items: center; flex: none; font-weight: 700; color: var(--bx-action-ink); background: hsl(var(--hue) 45% 42%); }
html[data-buld-theme] .odx-av { width: 34px; height: 34px; border-radius: 50%; font-size: 11.5px; }
html[data-buld-theme] .odx-thumb { width: 42px; height: 42px; border-radius: 10px; flex: none; object-fit: cover; background: var(--buld-surface-2); border: 1px solid var(--buld-hairline); box-sizing: border-box; }
html[data-buld-theme] .odx-thumb.odx-thumb--ini { font-size: 12.5px; letter-spacing: .02em; border: 0; background: hsl(var(--hue) 45% 42%); }
html[data-buld-theme] [data-hue="0"].odx-av, html[data-buld-theme] [data-hue="0"].odx-thumb--ini { --hue: 0; }
html[data-buld-theme] [data-hue="1"].odx-av, html[data-buld-theme] [data-hue="1"].odx-thumb--ini { --hue: 30; }
html[data-buld-theme] [data-hue="2"].odx-av, html[data-buld-theme] [data-hue="2"].odx-thumb--ini { --hue: 60; }
html[data-buld-theme] [data-hue="3"].odx-av, html[data-buld-theme] [data-hue="3"].odx-thumb--ini { --hue: 130; }
html[data-buld-theme] [data-hue="4"].odx-av, html[data-buld-theme] [data-hue="4"].odx-thumb--ini { --hue: 170; }
html[data-buld-theme] [data-hue="5"].odx-av, html[data-buld-theme] [data-hue="5"].odx-thumb--ini { --hue: 210; }
html[data-buld-theme] [data-hue="6"].odx-av, html[data-buld-theme] [data-hue="6"].odx-thumb--ini { --hue: 250; }
html[data-buld-theme] [data-hue="7"].odx-av, html[data-buld-theme] [data-hue="7"].odx-thumb--ini { --hue: 290; }
html[data-buld-theme] .odx-dots { display: inline-flex; gap: 4px; margin-top: 4px; }
html[data-buld-theme] .odx-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px var(--buld-hairline); }
html[data-buld-theme] .odx-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
html[data-buld-theme] .odx-kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; margin: 12px 0 0; }
html[data-buld-theme] .odx-kv dt { color: var(--buld-ink-3); }
html[data-buld-theme] .odx-kv dd { margin: 0; overflow-wrap: anywhere; }
html[data-buld-theme] .odx-pay { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
html[data-buld-theme] .odx-pay__t { padding-top: 8px; border-top: 1px dashed var(--buld-divider); font-size: 15px; font-weight: 700; }
html[data-buld-theme] .odx-pay--sum { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--buld-surface-2); }
html[data-buld-theme] .odx-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
html[data-buld-theme] .odx-hist li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; }
html[data-buld-theme] .odx-hist li > i { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--odx-c, var(--buld-ink-4)); }
html[data-buld-theme] .odx-hist li[data-tone="info"] { --odx-c: var(--buld-cta); }
html[data-buld-theme] .odx-hist li[data-tone="success"] { --odx-c: var(--buld-success); }
html[data-buld-theme] .odx-hist li[data-tone="warning"], html[data-buld-theme] .odx-hist li[data-tone="orange"] { --odx-c: var(--buld-warning); }
html[data-buld-theme] .odx-hist li[data-tone="danger"] { --odx-c: var(--buld-danger); }
html[data-buld-theme] .odx-hist li[data-tone="cyan"] { --odx-c: var(--buld-cta); }
html[data-buld-theme] .odx-hist small { display: block; color: var(--buld-ink-3); font-size: 11.5px; }
html[data-buld-theme] .odx-save { margin-inline-start: auto; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--buld-ink-3); }
html[data-buld-theme] .odx-save[data-state="saved"] { color: var(--buld-success); }
html[data-buld-theme] .odx-save[data-state="error"] { color: var(--buld-danger); }

/* buttons (prototype "premium controls") */
html[data-buld-theme] .odx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; margin: 0; border-radius: 9px; border: 1px solid var(--buld-divider); background: var(--p-card-bg); color: var(--buld-ink-1); font: inherit; font-size: 13px; font-weight: 600; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; transition: background-color .15s, border-color .15s, transform .1s; }
html[data-buld-theme] .odx-btn:hover { background: var(--buld-hover); }
html[data-buld-theme] .odx-btn:active { transform: scale(.98); }
html[data-buld-theme] .odx-btn:focus-visible { outline: 2px solid var(--buld-cta); outline-offset: 2px; }
html[data-buld-theme] .odx-btn:disabled, html[data-buld-theme] .odx-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
html[data-buld-theme] .odx-btn--sm { height: 28px; padding: 0 10px; gap: 6px; border-radius: 7px; font-size: 12px; }
html[data-buld-theme] .odx-btn--sm svg.lucide { width: 13px; height: 13px; }
html[data-buld-theme] .odx-btn--p { background: var(--buld-cta); border-color: transparent; color: var(--bx-action-ink); }
html[data-buld-theme] .odx-btn--p:hover { background: var(--buld-cta-hover, var(--buld-cta)); filter: brightness(1.06); }
html[data-buld-theme] .odx-btn--ok { background: var(--buld-success); border-color: transparent; color: var(--bx-action-ink); }
html[data-buld-theme] .odx-btn--ok:hover { background: var(--buld-success); filter: brightness(1.06); }
html[data-buld-theme] .odx-btn--bad { color: var(--buld-danger); }
html[data-buld-theme] .odx-btn--bad:hover { background: var(--buld-danger-soft); border-color: var(--buld-danger); }
html[data-buld-theme] .odx-btn--quiet { background: transparent; border-color: transparent; box-shadow: none; }
html[data-buld-theme] body .odx a.odx-btn.odx-btn { color: var(--buld-ink-1); }
html[data-buld-theme] body .odx a.odx-btn.odx-btn--wa:hover { color: var(--buld-success); }
html:has(.ux-sheet.odx-host.is-open) #agentFab { display: none; }
html[data-buld-theme] .odx-btn.is-armed { background: var(--buld-danger); border-color: transparent; color: var(--bx-action-ink); }
html[data-buld-theme] .odx-btn.is-busy { opacity: .7; cursor: progress; }

/* sticky footer */
html[data-buld-theme] .odx-foot { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; background: var(--buld-surface-2); border-top: 1px solid var(--buld-divider); }
html[data-buld-theme] .odx-foot--edit .odx-foot__sum { margin-inline-end: auto; display: flex; flex-direction: column; line-height: 1.15; }
html[data-buld-theme] .odx-foot__sum small { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--buld-ink-3); }
html[data-buld-theme] .odx-foot__sum strong { font-size: 17px; font-weight: 700; }

/* edit form */
html[data-buld-theme] .odx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html[data-buld-theme] .odx-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
html[data-buld-theme] .odx-f[hidden] { display: none; }
html[data-buld-theme] .odx-f--full { grid-column: 1 / -1; }
html[data-buld-theme] .odx-f--grow { flex: 1; }
html[data-buld-theme] .odx-f__l { font-size: 12px; font-weight: 600; color: var(--buld-ink-2); }
html[data-buld-theme] .odx .odx-in { width: 100%; min-width: 0; height: 38px; margin: 0; padding: 0 11px; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--buld-divider); background: var(--buld-surface-2); color: var(--buld-ink-1); font: inherit; font-size: 13.5px; box-shadow: none; }
html[data-buld-theme] .odx select.odx-in { padding-inline-end: 28px; }
html[data-buld-theme] .odx .odx-in:focus, html[data-buld-theme] .odx .odx-note:focus { outline: 0; border-color: var(--buld-cta); box-shadow: 0 0 0 3px var(--buld-cta-soft); }
html[data-buld-theme] .odx .odx-in[aria-invalid="true"] { border-color: var(--buld-danger); box-shadow: 0 0 0 3px var(--buld-danger-soft); }
html[data-buld-theme] .odx-err { min-height: 0; font-size: 11.5px; font-style: normal; font-weight: 500; color: var(--buld-danger); }
html[data-buld-theme] .odx-err:empty { display: none; }
html[data-buld-theme] .odx-hint { font-size: 11.5px; color: var(--buld-ink-3); }
html[data-buld-theme] .odx-hint:empty { display: none; }
html[data-buld-theme] .odx .odx-note { width: 100%; min-height: 72px; padding: 10px 12px; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--buld-divider); background: var(--buld-surface-2); color: var(--buld-ink-1); font: inherit; resize: vertical; }
html[data-buld-theme] .odx-sfx { position: relative; display: block; }
html[data-buld-theme] .odx-sfx .odx-in { padding-inline-end: 38px; }
html[data-buld-theme] .odx-sfx > span { position: absolute; inset-inline-end: 11px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; color: var(--buld-ink-3); pointer-events: none; }
html[data-buld-theme] .odx-qty { display: flex; align-items: stretch; height: 38px; border: 1px solid var(--buld-divider); border-radius: 10px; background: var(--buld-surface-2); overflow: hidden; }
html[data-buld-theme] .odx-qty button { width: 38px; flex: none; display: grid; place-items: center; margin: 0; padding: 0; border: 0; background: transparent; color: var(--buld-ink-2); cursor: pointer; }
html[data-buld-theme] .odx-qty button:hover { background: var(--buld-hover); color: var(--buld-ink-1); }
html[data-buld-theme] .odx .odx-qty .odx-in { height: 100%; border: 0; border-radius: 0; text-align: center; background: transparent; padding: 0 4px; -moz-appearance: textfield; }
html[data-buld-theme] .odx-qty .odx-in::-webkit-inner-spin-button, html[data-buld-theme] .odx-qty .odx-in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
html[data-buld-theme] .odx-qty:focus-within { border-color: var(--buld-cta); box-shadow: 0 0 0 3px var(--buld-cta-soft); }
html[data-buld-theme] .odx-seg { display: flex; gap: 3px; padding: 3px; border-radius: 10px; border: 1px solid var(--buld-divider); background: var(--buld-surface-2); }
html[data-buld-theme] .odx-seg label { flex: 1; cursor: pointer; }
html[data-buld-theme] .odx-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
html[data-buld-theme] .odx-seg label > span { display: flex; align-items: center; justify-content: center; gap: 7px; height: 32px; border-radius: 8px; font-weight: 600; color: var(--buld-ink-2); }
html[data-buld-theme] .odx-seg input:checked + span { background: var(--buld-cta); color: var(--bx-action-ink); }
html[data-buld-theme] .odx-seg input:focus-visible + span { outline: 2px solid var(--buld-cta); outline-offset: 2px; }
html[data-buld-theme] .odx-toks { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-buld-theme] .odx-tok { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 10px; border-radius: 999px; border: 1px solid var(--buld-divider); background: var(--buld-surface-2); font-size: 12.5px; font-weight: 600; color: var(--buld-ink-1); }
html[data-buld-theme] .odx-tok__sw { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px var(--buld-hairline); }
html[data-buld-theme] .odx-tok__x { display: grid; place-items: center; width: 22px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--buld-ink-3); cursor: pointer; }
html[data-buld-theme] .odx-tok__x:hover { background: var(--buld-hover); color: var(--buld-danger); }
html[data-buld-theme] .odx-tok__x svg.lucide { width: 12px; height: 12px; }
html[data-buld-theme] .odx-add { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; margin: 0; border-radius: 999px; border: 1px dashed var(--buld-divider); background: transparent; color: var(--buld-cta); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
html[data-buld-theme] .odx-add:hover { background: var(--buld-cta-soft); border-color: var(--buld-cta); }
html[data-buld-theme] .odx-add svg.lucide { width: 13px; height: 13px; }

/* colour / size pickers (op-pop) */
html[data-buld-theme] .odx-pop .odx-pick { width: 264px; padding: 8px; }
html[data-buld-theme] .odx-sw { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 6px 4px 10px; }
html[data-buld-theme] .odx-sw__b { width: 30px; height: 30px; margin: 0; padding: 0; border-radius: 50%; border: 0; background: var(--c); box-shadow: inset 0 0 0 1px var(--buld-divider); cursor: pointer; }
html[data-buld-theme] .odx-sw__b.is-on { box-shadow: inset 0 0 0 1px var(--buld-divider), 0 0 0 2px var(--p-card-bg), 0 0 0 4px var(--buld-cta); }
html[data-buld-theme] .odx-sw__b:focus-visible { outline: 2px solid var(--buld-cta); outline-offset: 3px; }
html[data-buld-theme] .odx-sw__row { display: flex; align-items: center; gap: 6px; padding: 4px; border-top: 1px solid var(--buld-hairline); padding-top: 10px; }
html[data-buld-theme] .odx-sw__row .odx-in { flex: 1; height: 30px; font-size: 12.5px; border-radius: 8px; border: 1px solid var(--buld-divider); background: var(--buld-surface-2); color: var(--buld-ink-1); padding: 0 8px; min-width: 0; }
html[data-buld-theme] .odx-sw__row .odx-btn--p { margin-inline-start: auto; }
html[data-buld-theme] .odx-sw__custom { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: inset 0 0 0 1px var(--buld-divider); cursor: pointer; }
html[data-buld-theme] .odx-sw__custom input { width: 44px; height: 44px; margin: -7px; padding: 0; border: 0; cursor: pointer; background: transparent; }
html[data-buld-theme] .odx-sz { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 6px 4px 10px; }
html[data-buld-theme] .odx-sz__b { height: 30px; margin: 0; padding: 0; border-radius: 8px; border: 1px solid var(--buld-divider); background: var(--buld-surface-2); color: var(--buld-ink-1); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
html[data-buld-theme] .odx-sz__b:hover { background: var(--buld-hover); }
html[data-buld-theme] .odx-sz__b.is-on { background: var(--buld-cta); border-color: transparent; color: var(--bx-action-ink); }

@media (max-width: 640px) {
    html[data-buld-theme] .odx-body { padding: 16px 16px 8px; }
    html[data-buld-theme] .odx-foot { padding: 10px 16px; }
    html[data-buld-theme] .odx-foot .odx-btn { flex: 1 1 auto; }
    html[data-buld-theme] .odx-foot--edit .odx-foot__sum { flex-basis: 100%; flex-direction: row; align-items: baseline; justify-content: space-between; }
    html[data-buld-theme] .odx-grid { grid-template-columns: minmax(0, 1fr); }
    html[data-buld-theme] .odx-kv { grid-template-columns: 92px minmax(0, 1fr); }
    html[data-buld-theme] .odx-total { text-align: start; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-buld-theme] .odx-btn { transition: none; }
    html[data-buld-theme] .odx-btn:active { transform: none; }
}

/* The orders list grows with the page (2026-10): 20, 50 or 100 orders are read by scrolling the page itself,
   not inside a short box with its own scrollbar. The table still scrolls sideways on narrow screens. */
html[data-buld-theme] body .yaya-scope .orders-table { max-height: none !important; overflow-y: visible !important; }
html[data-buld-theme] body #panel-all-orders .yaya-scope .orders-table { min-height: 0; }