/* ============================================================================
   BARBAROS — orders-flow.css (premium batch 8, ORDERS look v2)
   ----------------------------------------------------------------------------
   The orders list stops being a table: every order is a TICKET — a rounded card with a status
   rail, a progress track under the status, a transparent column header floating on the page, and
   hover-revealed actions. Pure CSS over the existing 9-cell markup (orders.js renderOrderRow +
   orders-premium handlers); no behaviour changes. Loaded after orders-premium.css / orders-smart.css.
   New class namespace: `of-*` (none of the legacy painter substrings).
   Collision list (!important only here):
     f1  dissolve the legacy .orders-table chrome (coss-tables/orders-theme paint it as one box)
     f2  buld-theme `button[class*="-danger"]` red-pill painter on .op-menu__item.is-danger
     f3  row hover background from orders-premium (cards keep their surface, the border reacts)
   ============================================================================ */

/* ── 1. the wrapper dissolves: rows are the surface now (f1) ─────────────── */
html[data-buld-theme] #panel-all-orders .orders-table {
    background: transparent !important; background-image: none !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    padding: 0 !important;
}
html[data-buld-theme] #panel-all-orders .orders-table::before { display: none !important; }

/* column header: no box — a quiet floating label row */
html[data-buld-theme] #panel-all-orders .yaya-scope .table-head {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    border-bottom: 1px solid var(--buld-hairline) !important; border-radius: 0 !important;
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--buld-ink-4);
    padding: 6px 18px 8px !important;
}
html[data-buld-theme] #panel-all-orders .yaya-scope .table-head > div { color: var(--buld-ink-4); }
/* sticky header readability over the tinted page */
html[data-buld-theme="light"] #panel-all-orders .yaya-scope .table-head { backdrop-filter: blur(8px); background: color-mix(in srgb, var(--buld-page) 82%, transparent) !important; }
html[data-buld-theme="dark"] #panel-all-orders .yaya-scope .table-head { backdrop-filter: blur(8px); background: rgba(39, 39, 40, .82) !important; }

/* ── 2. rows become tickets ──────────────────────────────────────────────── */
html[data-buld-theme] #allOrdersBody { display: block; padding: 10px 2px 6px; }
html[data-buld-theme] #panel-all-orders .yaya-scope #allOrdersBody .table-row {
    --of-tone: var(--buld-ink-4);
    background: var(--p-card-bg);
    border: 1px solid var(--p-card-border);
    border-inline-start: 4px solid var(--of-tone);
    border-radius: 14px;
    margin: 0 0 10px;
    padding: 12px 18px;
    min-height: 72px;
    box-shadow: none;
    transition: border-color var(--bx-dur-hover) var(--bx-ease),
                box-shadow var(--bx-dur-hover) var(--bx-ease),
                transform var(--bx-dur-hover) var(--bx-ease),
                background var(--bx-dur-hover) var(--bx-ease);
}
html[data-buld-theme="light"] #panel-all-orders .yaya-scope #allOrdersBody .table-row { box-shadow: var(--bx-shadow-1); }
/* hover: the card lifts, the surface stays (f3) */
html[data-buld-theme] #panel-all-orders .yaya-scope #allOrdersBody .table-row:hover {
    background: var(--p-card-bg);
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--of-tone) 42%, var(--p-card-border));
    border-inline-start-color: var(--of-tone);
}
html[data-buld-theme="light"] #panel-all-orders .yaya-scope #allOrdersBody .table-row:hover { box-shadow: var(--bx-shadow-2); background: var(--buld-elevated-2); }
html[data-buld-theme="dark"] #panel-all-orders .yaya-scope #allOrdersBody .table-row:hover { background: var(--buld-hover); }
html[data-buld-theme] #panel-all-orders .yaya-scope #allOrdersBody .table-row.selected,
html[data-buld-theme] #panel-all-orders .yaya-scope #allOrdersBody .table-row.is-selected {
    background: var(--buld-cta-soft); border-color: var(--buld-cta); border-inline-start-color: var(--buld-cta);
}

/* status → rail + track tone */
html[data-buld-theme] #panel-all-orders .table-row[data-status="new"],
html[data-buld-theme] #panel-all-orders .table-row[data-status="pending"]    { --of-tone: var(--buld-cta); --of-fill: 18%; }
html[data-buld-theme] #panel-all-orders .table-row[data-status="pending"]    { --of-fill: 32%; }
html[data-buld-theme] #panel-all-orders .table-row[data-status="noanswer"]   { --of-tone: var(--buld-warning); --of-fill: 32%; }
html[data-buld-theme] #panel-all-orders .table-row[data-status="postponed"]  { --of-tone: var(--buld-warning); --of-fill: 40%; }
html[data-buld-theme] #panel-all-orders .table-row[data-status="confirmed"]  { --of-tone: var(--buld-success); --of-fill: 55%; }
html[data-buld-theme] #panel-all-orders .table-row[data-status="shipped"]    { --of-tone: #7A5AF8; --of-fill: 75%; }
html[data-buld-theme] #panel-all-orders .table-row[data-status="intransit"]  { --of-tone: #7A5AF8; --of-fill: 86%; }
html[data-buld-theme] #panel-all-orders .table-row[data-status="delivered"]  { --of-tone: var(--buld-success); --of-fill: 100%; }
html[data-buld-theme] #panel-all-orders .table-row[data-status="cancelled"],
html[data-buld-theme] #panel-all-orders .table-row[data-status="returned"]   { --of-tone: var(--buld-danger); --of-fill: 100%; }
/* risky client (orders-smart) always reads as risk */
html[data-buld-theme] #panel-all-orders .table-row.is-risky { --of-tone: var(--buld-danger); }

/* ── 3. the progress track under the status pill ─────────────────────────── */
html[data-buld-theme] #panel-all-orders .table-row .status-dropdown-wrap { position: relative; }
html[data-buld-theme] #panel-all-orders .table-row .status-dropdown-wrap::after {
    content: ''; display: block; margin-top: 7px;
    width: min(132px, 100%); height: 4px; border-radius: 4px;
    background: linear-gradient(90deg, var(--of-tone) 0 var(--of-fill, 15%), var(--of-trk, rgba(23, 51, 108, .14)) var(--of-fill, 15%));
}
html[data-buld-theme="dark"] #panel-all-orders .table-row .status-dropdown-wrap::after { --of-trk: rgba(255, 255, 255, .14); }
html[data-buld-theme] #panel-all-orders .table-row[data-status="cancelled"] .status-dropdown-wrap::after,
html[data-buld-theme] #panel-all-orders .table-row[data-status="returned"] .status-dropdown-wrap::after { opacity: .55; }

/* f4 — a legacy light rule paints .status-dropdown-wrap as a grey 12px box over the track */
html[data-buld-theme] body #panel-all-orders .status-dropdown-wrap { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
/* the pill itself: borderless tinted segment, chevron appears on hover */
html[data-buld-theme] #panel-all-orders .op-pill { border: 0; background: var(--tone-soft); height: 27px; border-radius: 9px; font-weight: 700; }
html[data-buld-theme] #panel-all-orders .op-pill svg { opacity: 0; transition: opacity var(--bx-dur-hover) var(--bx-ease); }
html[data-buld-theme] #panel-all-orders .table-row:hover .op-pill svg,
html[data-buld-theme] #panel-all-orders .op-pill[aria-expanded="true"] svg { opacity: 1; }

/* ── 4. cells, retuned for the ticket ────────────────────────────────────── */
html[data-buld-theme] #panel-all-orders .yaya-scope .order-id { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
html[data-buld-theme] #panel-all-orders .yaya-scope .ord-date { font-size: 11px; color: var(--buld-ink-4); }
html[data-buld-theme] .yaya-scope .product-img { width: 44px; height: 44px; border-radius: 12px; }
html[data-buld-theme] #panel-all-orders .yaya-scope .product-name { font-weight: 650; }
html[data-buld-theme] #panel-all-orders .yaya-scope .price { font-size: 15px; letter-spacing: -.02em; }
html[data-buld-theme] #panel-all-orders .yaya-scope .price small { font-weight: 600; opacity: .8; }
/* qty: plain "× n", no box (and no `-chip` painter chrome) */
html[data-buld-theme] body #panel-all-orders .yaya-scope .qty-chip { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; font-size: 11.5px; font-weight: 600; color: var(--buld-ink-4) !important; border-radius: 0; }
/* phone: tabular ghost — chrome only on hover */
html[data-buld-theme] body #panel-all-orders .yaya-scope .phone-chip { background: transparent !important; border-color: transparent !important; font-variant-numeric: tabular-nums; font-weight: 600; }
html[data-buld-theme] body #panel-all-orders .yaya-scope .phone-chip:hover { background: var(--buld-hover) !important; border-color: var(--buld-hairline) !important; }
/* delivery: dot + word, no box */
html[data-buld-theme] body #panel-all-orders .yaya-scope .delivery-pill { background: transparent !important; border: 0 !important; padding: 0 !important; font-weight: 600; color: var(--buld-ink-2) !important; }
/* avatar slightly larger, squarer */
html[data-buld-theme] #panel-all-orders .yaya-scope .customer-avatar { width: 34px; height: 34px; border-radius: 11px; font-weight: 700; }
html[data-buld-theme] #panel-all-orders .yaya-scope .customer-name { font-weight: 650; }

/* quick actions: soft filled circles, revealed on hover (reveal rule lives in orders-premium) */
html[data-buld-theme] #panel-all-orders .op-qa { width: 30px; height: 30px; border-radius: 10px; background: var(--buld-elevated); color: var(--buld-ink-2); }
html[data-buld-theme="dark"] #panel-all-orders .op-qa { background: rgba(255, 255, 255, .07); color: var(--buld-ink-1); }
html[data-buld-theme] #panel-all-orders .op-qa:hover { background: var(--buld-cta); color: #fff; }
html[data-buld-theme] #panel-all-orders .op-qa--confirm { background: var(--bx-success-soft, var(--buld-success-soft)); color: var(--buld-success); }
html[data-buld-theme] #panel-all-orders .op-qa--confirm:hover { background: var(--buld-success); color: #fff; }
html[data-buld-theme] #panel-all-orders .op-qa[data-act="more"] { background: transparent; }

/* footer quietens */
html[data-buld-theme] #panel-all-orders .table-footer { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-inline: 4px; }

/* compact density */
html[data-buld-theme] #panel-all-orders[data-density="compact"] #allOrdersBody .table-row { border-radius: 11px; margin-bottom: 6px; padding: 7px 14px; min-height: 54px; }
html[data-buld-theme] #panel-all-orders[data-density="compact"] .yaya-scope .product-img { width: 34px; height: 34px; border-radius: 9px; }
html[data-buld-theme] #panel-all-orders[data-density="compact"] .table-row .status-dropdown-wrap::after { margin-top: 4px; height: 3px; }
html[data-buld-theme] #panel-all-orders[data-density="compact"] .yaya-scope .customer-avatar { width: 28px; height: 28px; border-radius: 9px; }

/* ── 5. the row menu (screenshot fix): quiet sheet, danger as text (f2) ──── */
html[data-buld-theme] .op-menu { min-width: 236px; padding: 6px; border-radius: 14px; }
html[data-buld-theme] .op-menu__item { border-radius: 9px; min-height: 36px; }
html[data-buld-theme] body button.op-menu__item.is-danger:not(.bx-btn):not(.ap-account-item) {
    background: transparent !important; border: 0 !important; border-radius: 9px !important;
    color: var(--buld-danger) !important;
}
html[data-buld-theme] body button.op-menu__item.is-danger:not(.bx-btn):not(.ap-account-item):hover {
    background: var(--bx-danger-soft, var(--buld-danger-soft)) !important;
}
/* a hairline before the destructive action */
html[data-buld-theme] .op-menu .op-menu__item.is-danger { margin-top: 4px; position: relative; }
html[data-buld-theme] .op-menu .op-menu__item.is-danger::before { content: ''; position: absolute; top: -3px; left: 8px; right: 8px; height: 1px; background: var(--buld-hairline); }

/* ── 6. focus strip + filter chips sit on the page, not in a box ─────────── */
html[data-buld-theme="light"] #osFocus { box-shadow: var(--bx-shadow-1); }