/* Trang Đơn hàng: thẻ số liệu, tab lọc, ô tìm, bảng đơn (dạng lưới) và dạng thẻ trên màn hẹp. */

/* ---------- thẻ số liệu ---------- */
.o-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.o-stat { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; }
.o-stat-ic { width: 40px; height: 40px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.o-stat-ic.open { background: var(--info-50); color: var(--info); }
.o-stat-ic.doneToday { background: var(--ok-50); color: var(--ok); }
.o-stat-ic.feeToday { background: var(--brand-50); color: var(--brand); }
.o-stat-ic.cod { background: var(--warn-50); color: var(--warn); }
.o-stat-body { min-width: 0; }
.o-stat-label { font-size: 13px; color: var(--text-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-stat-val { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin-top: 2px; white-space: nowrap; }
.o-stat-hint { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- khung danh sách ---------- */
.o-panel { overflow: visible; }
.o-toolbar { display: flex; align-items: center; gap: 16px; padding: 0 16px 0 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.o-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1 1 auto; }
.o-tabs::-webkit-scrollbar { display: none; }
.o-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px; border: 0;
         background: none; font: 500 14px/1 var(--font); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.o-tab:hover { color: var(--text); }
.o-tab.active { color: var(--brand); font-weight: 600; }
.o-tab.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand); }
.o-count { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--grey-50); color: var(--text-2);
           font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.o-tab.active .o-count { background: var(--brand-50); color: var(--brand); }
.o-tab.has-problem .o-count { background: var(--danger-50); color: var(--danger); }

.o-search { position: relative; display: flex; align-items: center; flex: 0 1 320px; min-width: 220px; margin: 8px 0; color: var(--muted); }
.o-search > svg { position: absolute; left: 11px; pointer-events: none; }
.o-search input { height: 36px; padding: 0 32px 0 34px; background: var(--surface-2); }
.o-search input:focus { background: var(--surface); }
.o-search input::-webkit-search-cancel-button { display: none; }
.o-clear { position: absolute; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent;
           color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.o-clear:hover { background: var(--grey-50); color: var(--text); }

/* ---------- bảng (lưới) ---------- */
.o-head, .o-row {
  display: grid; align-items: center; column-gap: 14px; padding: 0 16px 0 20px;
  grid-template-columns: 172px minmax(200px, 2.2fr) minmax(120px, 1fr) 96px 96px 132px minmax(150px, 1fr) 36px;
}
.o-head { height: 40px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600;
          color: var(--text-2); white-space: nowrap; }
.o-head .r { text-align: right; }
.o-row { position: relative; min-height: 68px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
         cursor: pointer; transition: background-color .12s; }
.o-row:hover, .o-row.menu-open { background: var(--surface-2); }
.o-row:hover .order-id { color: var(--brand); }
.o-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.o-row.menu-open { z-index: 5; }
.o-list .o-row:last-child { border-bottom: 0; }

.o-c { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.o-idc .order-id { font-size: 13px; transition: color .12s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.o-route { gap: 3px; }
.o-stop { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.o-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.o-dot.a { background: var(--pin-a); }
.o-dot.b { background: var(--pin-b); }
.o-route .o-stop:first-child { position: relative; }
.o-route .o-stop:first-child::after { content: ""; position: absolute; left: 3.5px; top: 14px; height: 9px; border-left: 1px dashed var(--line-2); }
.o-addr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-stop:first-child .o-addr { color: var(--text-2); }
.o-more { flex: none; font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--grey-50); border-radius: 6px; padding: 1px 6px; }
.o-sched { align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--info); background: var(--info-50); border-radius: 6px; padding: 1px 6px; margin-top: 1px; }

.o-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-money { align-items: flex-end; text-align: right; font-weight: 600; white-space: nowrap; }
.o-lbl { display: none; }
.o-prov { align-items: flex-start; }
.o-prov .prov { font-size: 13px; }
.o-switch { font-size: 11px; color: var(--warn); font-weight: 500; white-space: nowrap; }
.o-st { align-items: flex-start; }
.o-drv { color: var(--text-2); }
.o-err { color: var(--danger); max-width: 100%; }
.o-row.is-problem { box-shadow: inset 3px 0 0 var(--danger); }

/* ---------- menu thao tác ---------- */
.o-act { position: relative; align-items: flex-end; }
.o-menu-btn { width: 32px; height: 32px; }
.o-row.menu-open .o-menu-btn { background: var(--grey-50); color: var(--text); }
.o-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 160px; padding: 4px; display: flex; flex-direction: column;
          background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); }
.o-menu button { display: block; width: 100%; text-align: left; height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: none;
                 font: 500 14px/1 var(--font); color: var(--text); cursor: pointer; white-space: nowrap; }
.o-menu button:hover, .o-menu button:focus-visible { background: var(--grey-50); outline: 0; }
.o-menu button.danger { color: var(--danger); }
.o-menu button.danger:hover, .o-menu button.danger:focus-visible { background: var(--danger-50); }
.o-menu.up { top: auto; bottom: calc(100% + 4px); }

.o-foot { padding: 10px 20px; font-size: 12px; border-top: 1px solid var(--line); }
.orders-page.is-empty .o-head, .orders-page.is-empty .o-foot { display: none; }

/* ---------- trạng thái rỗng / đang tải ---------- */
.o-empty { text-align: center; padding: 56px 16px 60px; color: var(--text-2); }
.o-empty-ic { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--brand-50); color: var(--brand);
              display: flex; align-items: center; justify-content: center; }
.o-empty h3 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.o-empty p { margin: 0 auto 18px; max-width: 360px; font-size: 14px; }
.o-empty h3 + .btn { margin-top: 12px; }
.o-skel { display: grid; grid-template-columns: 120px 2fr 1fr; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.o-skel .skeleton { height: 14px; }

/* ---------- màn vừa: thu cột ---------- */
@media (max-width: 1320px) {
  .o-head, .o-row { grid-template-columns: 158px minmax(180px, 2fr) minmax(110px, 1fr) 88px 88px 120px minmax(140px, 1fr) 36px; column-gap: 12px; }
}
@media (max-width: 1180px) {
  .o-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- màn hẹp: mỗi đơn là một thẻ ---------- */
@media (max-width: 1100px) {
  .o-head { display: none; }
  .o-toolbar { padding: 0; gap: 0; flex-direction: column-reverse; align-items: stretch; flex-wrap: nowrap; }
  .o-search { flex: none; min-width: 0; margin: 12px 12px 4px; }
  .o-list { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--surface-2); }
  .orders-page.is-empty .o-list { background: none; padding: 0; }
  .o-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "id st act" "route route route" "rcp prov prov" "cod fee fee";
    row-gap: 10px; column-gap: 0; padding: 14px 12px 12px 16px; min-height: 0;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .o-list .o-row:last-child { border-bottom: 1px solid var(--line); }
  .o-row:hover, .o-row.menu-open { background: var(--surface); border-color: var(--line-2); }
  .o-row.is-problem { box-shadow: var(--shadow-sm), inset 3px 0 0 var(--danger); }
  .o-idc { grid-area: id; padding-right: 8px; } .o-rcp { padding-right: 8px; } .o-act { margin-left: 4px; } .o-st { grid-area: st; align-items: flex-end; text-align: right; }
  .o-act { grid-area: act; align-self: start; margin-top: -4px; margin-right: -4px; }
  .o-st .o-sub { max-width: 170px; }
  .o-route { grid-area: route; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); }
  .o-rcp { grid-area: rcp; } .o-prov { grid-area: prov; align-items: flex-end; text-align: right; }
  .o-cod, .o-fee { flex-direction: row; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px dashed var(--line); }
  .o-cod { grid-area: cod; justify-content: flex-start; gap: 8px; }
  .o-fee { grid-area: fee; justify-content: flex-end; gap: 8px; }
  .o-lbl { display: inline; font-size: 12px; font-weight: 500; color: var(--muted); }
  .o-foot { border-top: 0; background: var(--surface-2); padding-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
  .o-skel { grid-template-columns: 1fr; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
}

@media (max-width: 860px) {
  .o-stats { gap: 10px; margin-bottom: 14px; }
  .o-stat { padding: 12px; gap: 10px; flex-direction: column; }
  .o-stat-ic { width: 32px; height: 32px; border-radius: 8px; }
  .o-stat-ic svg { width: 17px; height: 17px; }
  .o-stat-val { font-size: 19px; }
  .o-stat-label { white-space: normal; font-size: 12px; line-height: 1.35; }
  .o-stat-hint { display: none; }
  .o-search input { height: 40px; }
  .o-tabs { padding: 0 4px; }
  .o-tab { height: 46px; padding: 0 10px; font-size: 13px; }
  .o-list { padding: 10px; }
  .o-menu { min-width: 180px; }
  .o-idc .order-id { font-size: 12px; }
  .o-menu button { height: 42px; }
}

@media (max-width: 600px) {
  .o-stat { flex-direction: row; align-items: center; padding: 12px; }
  .o-stat-ic { display: none; }
  .o-stat-val { font-size: 18px; }
}