/* The Orders page (orders/list.html, rows.html) and the test-order form (orders/test.html), on the components of
   app.css: the status tabs, the filter bar, the table. Page-local here: the filter menus (a button with the choice
   and a list of links under it), the cells of a row (items with pictures, the phase word, the age with its SLA
   bar) and the test form's item preview. Night theme first; every colour is a token, so the light theme follows. */

/* ── the filter bar: a shorter search box, the menus, Reset ── */
.orders__search { height: 34px; flex: 1 1 240px; max-width: 340px; }
.orders__search input { font-size: 13px; }
.orders__reset { height: 34px; display: inline-flex; align-items: center; padding: 0 10px; color: var(--accent); font-weight: 500; }

/* ── a filter menu (.ddl): the button shows the choice; the list is links to this page with that filter changed ── */
.ddl { position: relative; }
.ddl__btn { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); color: var(--ink); cursor: pointer; }
.ddl__btn:hover { background: var(--panel-2); }
.ddl__btn.is-open, .ddl__btn.is-on { border-color: var(--btn); }
.ddl__btn.is-on { background: var(--accent-bg); }
.ddl__btn.is-on .ddl__value { color: var(--accent); }
.ddl__label { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.ddl__value { font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.ddl__btn .glogo, .ddl__btn .mlogo { width: 16px; height: 16px; border-radius: 4px; vertical-align: 0; display: block; }
.ddl__chev { display: inline-grid; color: var(--ink-3); transition: transform .15s; }
.ddl__btn.is-open .ddl__chev { transform: rotate(180deg); }
.ddl__menu { position: absolute; left: 0; top: 40px; z-index: 40; min-width: 200px; max-width: calc(100vw - 32px); max-height: 300px; overflow-y: auto; padding: 5px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--pop); }
.ddl__opt { display: flex; align-items: center; gap: 9px; width: 100%; height: 34px; padding: 0 10px; border-radius: 8px; color: var(--ink); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.ddl__opt:hover { background: var(--line); text-decoration: none; }
.ddl__opt.is-on { background: var(--accent-bg); color: var(--accent); }
.ddl__opt .glogo, .ddl__opt .mlogo { width: 18px; height: 18px; border-radius: 5px; vertical-align: 0; display: block; }
.ddl__text { flex: 1; }
.ddl__n { font: 11px/1 var(--mono); color: var(--ink-3); }
.ddl__check { display: inline-grid; color: var(--accent); }

/* ── the table: the mockup's density (12/14 cells), a minimum width so it scrolls inside the panel on a tablet ── */
.orders__table { min-width: 1100px; }
.orders__table th { padding: 11px 8px; }
.orders__table td { padding: 11px 8px; }
/* the shell's .is-attn is also a text-colour helper: an attention row keeps its tint but not orange text */
.orders__table tr.is-attn { color: var(--ink); }
.orders__table td.orow__items-cell { padding-top: 8px; padding-bottom: 8px; }
.orders__table td.orow__status-cell { padding-top: 10px; padding-bottom: 10px; }
/* every head in the same ink-3 weight, the sorted one too (its arrow says it is sorted) */
.orders__sort, .orders__sort:hover { color: inherit; text-decoration: none; }
.orders__sort:hover { color: var(--ink-2); }
.orders__menus { display: contents; }
.orow__ref { white-space: nowrap; }
.orow__ref .ref { color: var(--ink); }
.orow__test { display: block; margin-top: 4px; }
.orow__mk, .orow__buyer, .orow__bot, .orow__age { white-space: nowrap; }
.orow__mk .mchip { color: var(--ink-2); gap: 8px; }
.orow__mk .mlogo, .ddl .mlogo { width: 18px; height: 18px; border-radius: 5px; vertical-align: 0; }
/* GameBoost's app icon is its blue mark on a dark square: show the mark alone, as the mockup does, so no black
   tile sits on the light theme's white rows */
.orders img.mlogo[src*="marketplaces/gameboost"] { clip-path: polygon(50% 19%, 81% 50%, 50% 81%, 19% 50%); transform: scale(1.5); border-radius: 0; }
.orders img.mlogo[src*="marketplaces/gameboost"]::before { display: none; }
.orow__buyer { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; }
.orow__bpic { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; display: block; flex: none; }
.orow__items { display: flex; align-items: center; gap: 10px; min-width: 0; width: 200px; }
.orow__itext { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; gap: 2px; }
.orow__iname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow__iname .iname { max-width: 100%; }
.orow__iname .iname__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow__qty { color: var(--ink-2); }
.orow__imore, .orow__ibuyer { display: none; }
.orow__items .cell-sub .glogo { width: 12px; height: 12px; border-radius: 3px; vertical-align: 0; }
.orow__status { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
/* the mockup's status chip: 22 px, a 6 px dot in the status colour, the plain word */
.orow__chip { gap: 6px; padding: 0 8px; border-radius: 6px; }
.orow__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* the reason under it: the problem code in mono and its words, inline, in the attention colour */
.orow__reason { font-size: 11.5px; line-height: 1.3; color: var(--attn); white-space: nowrap; }
.orow__reason.is-past { color: var(--ink-3); }
.orow__code { font-family: var(--mono); }
/* the phase: a plain word in its tone */
.orow__phase { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.orow__phase--neutral { color: var(--neutral); } .orow__phase--wait { color: var(--wait); } .orow__phase--info { color: var(--info); }
.orow__phase--run { color: var(--run); } .orow__phase--ok { color: var(--ok); } .orow__phase--warn { color: var(--warn); }
.orow__phase--attn { color: var(--attn); } .orow__phase--bad { color: var(--bad); } .orow__phase--mute { color: var(--mute); }
.orow__bot { display: inline-flex; align-items: center; gap: 7px; font: 12.5px/1 var(--mono); color: var(--ink-2); }
.orow__bot:hover { color: var(--ink); text-decoration: none; }
/* a bot without its Roblox headshot: a tinted tile with a legible initial, not an empty dark box */
.orow__bot .bavatar__img, .ddl .bavatar__img { border-radius: 6px; }
.orow__bot .bavatar__img--empty, .ddl .bavatar__img--empty { background: var(--accent-bg); border-color: color-mix(in oklab, var(--accent) 35%, transparent); color: var(--accent); font: 700 10px/1 var(--sans); }
.orow__age { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.orow__age .sla { width: 44px; }
.oage { font: 500 12px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.oage--ok { color: var(--ok); } .oage--warn { color: var(--warn); } .oage--bad { color: var(--bad); }

/* ── a phone: the same rows as the mockup's stacked cards (its `cards` branch), no sideways scroll ──
   line 1: marketplace logo, reference, age · line 2: item pictures, item and buyer, value ·
   line 3: status chip, reason, phase · bot */
@media (max-width: 760px) {
  .orders__search { flex: 1 1 100%; max-width: none; }
  .orders .filterbar__sep { display: none; }
  .orders__table { min-width: 0; }
  .orders__table, .orders__table tbody { display: block; width: 100%; }
  .orders__table thead { display: none; }
  .orders__table tr.orow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 13px 14px; border-bottom: 1px dashed var(--line-2); }
  .orders__table tr.orow.is-attn { background: color-mix(in oklab, var(--attn-bg) 55%, transparent); }
  .orders__table tbody tr.orow:last-child { border-bottom: 0; }
  .orders .orders__table tr.orow > td { display: block; padding: 0; border: 0; background: none; white-space: normal; }
  .orders__table tr.orow:hover > td { background: none; }
  .orders__table tr.orow:hover, .orders__table tr.orow:focus-visible { background: var(--panel-2); }
  .orders__table tr.orow > td.is-none, .orders__table tr.orow > td.orow__buyer-cell { display: none; }
  .orow__mk { order: 1; display: flex !important; }
  .orow__mk .mchip { display: flex; }
  .orow__mk .mchip > span { display: none; }
  .orow__ref { order: 2; flex: 1 1 auto; min-width: 0; display: flex !important; align-items: center; gap: 8px; }
  .orow__ref .ref { font-size: 13px; }
  .orow__test { margin: 0; }
  .orow__age-cell { order: 3; }
  .orow__age .sla { display: none; }
  /* a basis too wide to share line 1, so the items start line 2; the value (under 80 px) sits beside them */
  .orow__items-cell { order: 4; flex: 1 1 calc(100% - 96px); min-width: 0; }
  .orow__items { width: auto; }
  .orow__items .thumbs__img { width: 34px; height: 34px; border-radius: 9px; }
  .orow__items .thumbs__img + .thumbs__img { margin-left: -10px; }
  .orow__game { display: none !important; }
  .orow__imore { display: inline; color: var(--ink-2); }
  .orow__ibuyer { display: block; font: 12px/1.3 var(--mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .orow__value { order: 5; font-size: 13px; }
  .orow__status-cell { order: 6; }
  .orow__status { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .orow__reason { font-size: 12px; white-space: normal; }
  .orow__phase-cell { order: 7; }
  .orow__bot-cell { order: 8; }
  .orow__bot-cell.is-quiet { display: none !important; }
  .orow__bot-cell::before { content: "·"; margin-right: 6px; color: var(--ink-3); }
  .orow__bot { font-size: 12px; }
  .orow__bot .bavatar { display: none; }
  .orders__table .table__empty { display: block; }
  .orders__table .table__empty td { display: block; }
}

/* ── the test-order form: the picked item's picture beside the picker ── */
.tform__item { display: flex; align-items: flex-start; gap: 14px; }
.tform__field { flex: 1; min-width: 0; }
.tform__pic { width: 64px; height: 64px; flex: none; border-radius: 14px; border: 1px solid var(--line-2); background: var(--panel-2); object-fit: cover; display: block; margin-top: 22px; }
.tform__pic--empty { background: repeating-linear-gradient(135deg, var(--stripe) 0 5px, var(--panel-2) 5px 10px); }
@media (max-width: 760px) {
  .tform__item { gap: 10px; }
  .tform__pic { width: 48px; height: 48px; border-radius: 11px; }
  /* a menu opens under its button across the filter bar, so a menu that wrapped to either edge stays on screen */
  .orders .filterbar { position: relative; }
  .orders .ddl { position: static; }
  .orders .ddl__menu { top: auto; left: 14px; right: 14px; min-width: 0; max-width: none; margin-top: 6px; }
}

/* ── test order: the picked item as a card, and the picker window with pictures ── */
.tpick-cur { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2); color: var(--ink); text-align: left; cursor: pointer; }
.tpick-cur:hover, .tpick-cur:focus-visible { border-color: var(--accent); outline: none; }
.tpick-cur__pic { width: 52px; height: 52px; flex: none; border-radius: 10px; object-fit: cover; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3); }
.tpick-cur__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tpick-cur__name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpick-cur__sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.tpick-cur__change { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-2); flex: none; }
.tpick { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; }
.tpick::backdrop { background: rgba(0, 0, 0, .6); }
.tpick[open] { display: grid; place-items: center; }
.tpick__box { width: min(860px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 48px)); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); overflow: hidden; }
.tpick__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.tpick__title { font-size: 15px; font-weight: 600; margin: 0; }
.tpick__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
.tpick__search { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; padding: 0 10px; height: 36px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-2); color: var(--ink-3); }
.tpick__search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; outline: none; }
.tpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; padding: 14px 16px 16px; overflow-y: auto; }
.tpick__card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--ink); cursor: pointer; text-align: center; }
.tpick__card:hover, .tpick__card:focus-visible { border-color: var(--line-2); background: var(--panel); outline: none; }
.tpick__card.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.tpick__pic { width: 72px; height: 72px; border-radius: 10px; object-fit: contain; display: grid; place-items: center; color: var(--ink-3); background: var(--panel); }
.tpick__name { font-size: 13px; font-weight: 500; line-height: 1.25; max-width: 100%; }
.tpick__name .iname { flex-wrap: wrap; justify-content: center; row-gap: 3px; }
.tpick__name .iname__text { overflow-wrap: anywhere; }
.tpick__sub { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 760px) { .tpick__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px; } .tpick__pic { width: 56px; height: 56px; } .tpick__box { max-height: calc(100vh - 24px); } }