/* OrderHub v2 — one look for every tab (spec §3: words + icons, rem sizing, Vietnamese sentence case).
   Loaded after layout.css/style.css on every page; page-specific bits live in orders.css etc. */

:root { --taskbar-height: 3.4rem; --info-bar-height: 2.4rem; }
body.oh-subnav { font-family: Inter, system-ui, sans-serif; color: #1f2937; background: #f4f6fa; }
body.oh-subnav .main-area { background: #f4f6fa; }

/* ---------- page header: title left, actions right ---------- */
.taskbar { min-height: var(--taskbar-height); height: auto; padding: .55rem 1.2rem; background: #fff; border-bottom: 1px solid #e5e7eb; gap: .6rem; flex-wrap: wrap; }
.taskbar-title { font-size: 1.15rem; font-weight: 700; color: #1f2937; }
.taskbar-left { gap: .6rem; font-size: .85rem; color: #6b7280; }
.taskbar-right { gap: .45rem; flex-wrap: wrap; }
.taskbar .btn-tb { padding: .45rem .85rem; font-size: .88rem; font-weight: 500; border-radius: .55rem; border: 1px solid #d1d5db; background: #fff; color: #1f2937; gap: .35rem; }
.taskbar .btn-tb:hover { border-color: #93c5fd; background: #eff6ff; filter: none; }
.taskbar .btn-tb-primary { background: var(--accent, #1d4ed8); border-color: var(--accent, #1d4ed8); color: #fff; font-weight: 600; }
.taskbar .btn-tb-primary:hover { background: var(--accent, #1d4ed8); filter: brightness(1.08); }
.taskbar .btn-tb-success { background: #ecfdf5; border-color: #6ee7b7; color: #047857; font-weight: 600; }
.taskbar .btn-tb-info { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.btn-tb .badge-count { font-size: .75rem; min-width: 1.2rem; }

/* ---------- filters ---------- */
.filter-bar { padding: .6rem 1.2rem; gap: .5rem; background: #fff; border-bottom: 1px solid #e5e7eb; }
.filter-search, .filter-bar .filter-search, .filter-bar input[type=text], .filter-bar input[type=search], .filter-bar input[type=date], .filter-bar input[type=tel] {
  font-size: .9rem; padding: .45rem .7rem; min-height: 2.3rem; border: 1px solid #d1d5db; border-radius: .55rem; background: #fff; color: #1f2937; }
.filter-bar .filter-search-wrap { min-width: 16rem; }
.filter-bar select { font-size: .9rem; padding: .45rem 2rem .45rem .7rem; min-height: 2.3rem; border: 1px solid #d1d5db; border-radius: .55rem; background-color: #fff; color: #1f2937; }
.filter-bar .btn-filter, .filter-bar button { font-size: .88rem; padding: .45rem .75rem; min-height: 2.3rem; border-radius: .55rem; }
.filter-bar .filter-checkbox, .filter-bar label { font-size: .88rem; }
.filter-search:focus, .filter-bar select:focus { border-color: var(--accent, #1d4ed8); box-shadow: 0 0 0 3px rgba(29, 78, 216, .12); }

/* ---------- content ---------- */
.content-area { padding: .8rem 1.2rem calc(var(--info-bar-height) + 1rem); }
.card-v2 { font-size: .9rem; border-radius: .7rem; border-color: #e5e7eb; }
.card-v2 .card-cell { padding: .65rem .7rem; }
.cc-code { font-size: .92rem; font-weight: 700; }
.cc-time, .cc-meta, .cc-phone, .cc-addr { font-size: .82rem; }
.cc-name { font-size: .92rem; font-weight: 600; }
.badge { font-size: .8rem; padding: .15rem .55rem; border-radius: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.content-empty, .empty-state { font-size: .95rem; color: #6b7280; }
.content-empty .empty-icon, .empty-state .empty-icon { font-size: 2.6rem; }

/* number cards (Báo cáo, Chờ hàng, Nhập Excel…): label in sentence case, big number */
.kpi-grid { gap: .8rem; margin-bottom: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.kpi-card { padding: .9rem 1.1rem; border-radius: .8rem; border: 1px solid #e5e7eb; box-shadow: none; background: #fff; }
.kpi-card .kpi-label { font-size: .85rem; text-transform: none; letter-spacing: 0; color: #6b7280; font-weight: 500; }
.kpi-card .kpi-value { font-size: 1.45rem; font-weight: 700; }
.kpi-card .kpi-icon { font-size: 1.3rem; }
.card { padding: 1.1rem 1.2rem; border-radius: .9rem; box-shadow: none; border: 1px solid #e5e7eb; backdrop-filter: none; }
.card h2, .card h3, .card-title { font-size: 1.05rem; }
canvas { max-height: 22rem; }

/* tables: sentence-case headers, readable rows */
thead th { font-size: .82rem; text-transform: none; letter-spacing: 0; color: #6b7280; padding: .6rem .8rem; background: #f9fafb; }
tbody td { font-size: .9rem; padding: .6rem .8rem; }

/* bottom bar */
.info-bar { font-size: .85rem; }
.info-bar-left .info-stat { font-size: .85rem; }
.info-bar .pg-btn { min-width: 2rem; height: 1.9rem; font-size: .85rem; }

/* ---------- shared: status chips with counts (same look as 📋 Đơn đặt hàng) ---------- */
.oh-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .8rem 1.2rem .2rem; }
.oh-chips button { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border: 1px solid #d1d5db; border-radius: 2rem; background: #fff; color: #374151; font: 500 .88rem Inter, system-ui, sans-serif; cursor: pointer; }
.oh-chips button:hover { border-color: #93c5fd; background: #eff6ff; }
.oh-chips button.on { background: var(--accent, #1d4ed8); border-color: var(--accent, #1d4ed8); color: #fff; }
.oh-chips i { font-style: normal; font-weight: 700; font-size: .78rem; }
.oh-chips i:empty { display: none; }
.oh-chips button:not(.on) i { background: #f3f4f6; border-radius: 1rem; padding: 0 .45rem; }
.oh-thead { display: grid; align-items: center; padding: .55rem 0; margin: .2rem 0 .2rem; color: #6b7280; font-size: .8rem; font-weight: 600; border-bottom: 1px solid #e5e7eb; }
.oh-thead span { padding: 0 .7rem; }

/* ---------- list rows drawn as a table (Đơn đặt hàng, Hóa đơn, …) ---------- */
.card-v2 .card-cell-actions { display: flex; flex-direction: row; flex-wrap: nowrap; gap: .35rem; align-items: flex-start; align-content: flex-start; justify-content: flex-start; padding: .65rem .7rem; }
.card-v2 .card-cell-financials { gap: .15rem; justify-content: flex-start; }
.card-v2 .card-cell-financials .cc-pay { margin-top: 0; font-size: .8rem; white-space: normal; color: #6b7280; }
.card-v2 .cc-total { font-size: 1rem; color: #1f2937; }
.card-v2 .card-cell-products, .card-v2 .card-cell-products .cc-pl-item { font-size: .88rem; }
.oh-act { padding: .32rem .6rem; border: 1px solid #d1d5db; border-radius: .45rem; background: #fff; color: #1f2937; font: 500 .82rem Inter, system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.oh-act:hover { border-color: #93c5fd; background: #eff6ff; }
.oh-act-confirm { background: #ecfdf5; border-color: #6ee7b7; color: #047857; font-weight: 600; }
.oh-act-convert { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; font-weight: 600; }

/* Hóa đơn & giao hàng */
.oh-thead-inv, .card-v2.card-v2-invoice { grid-template-columns: 2rem minmax(9rem, 12rem) minmax(11rem, 15rem) minmax(12rem, 1fr) minmax(8rem, 10rem) minmax(8rem, 11rem) minmax(13rem, 15rem); }

/* old per-cell sizes in layout.css are more specific (.card-cell-order .cc-code …) */
.filter-bar .filter-search-wrap { flex: 0 0 18rem; max-width: 22rem; }
.filter-bar .filter-search-wrap .filter-search { padding-left: 2.1rem; }
.filter-bar .filter-search-wrap::before { left: .7rem; font-size: .85rem; }
.card-v2 .card-cell .cc-code { font-size: .92rem; font-weight: 700; }
.card-v2 .card-cell .cc-time, .card-v2 .card-cell .cc-meta, .card-v2 .card-cell .cc-phone, .card-v2 .card-cell .cc-addr { font-size: .82rem; }
.card-v2 .card-cell .cc-name { font-size: .92rem; font-weight: 600; }
.card-v2 .card-cell .cc-note, .card-v2 .card-cell .cc-custnote { font-size: .78rem; }

/* Thu hộ COD: the status buttons sit in the chip row */
.oh-chips .btn-filter { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border: 1px solid #d1d5db; border-radius: 2rem; background: #fff; color: #374151; font: 500 .88rem Inter, system-ui, sans-serif; cursor: pointer; }
.oh-chips .btn-filter:hover { border-color: #93c5fd; background: #eff6ff; }
.oh-chips .btn-filter.active { background: var(--accent, #1d4ed8); border-color: var(--accent, #1d4ed8); color: #fff; }
.oh-chips .btn-filter .badge { font-size: .75rem; padding: 0 .45rem; }
.oh-chips-sep { width: 1px; align-self: stretch; background: #e5e7eb; margin: 0 .3rem; }
.oh-thead-cod, .card-v2.card-v2-cod { grid-template-columns: 2rem minmax(9rem, 12rem) minmax(11rem, 1fr) minmax(10rem, 14rem) minmax(7rem, 9rem) minmax(8rem, 10rem) minmax(7rem, 10rem) minmax(13rem, 15rem); }
.card-v2.card-v2-cod .card-cell { display: flex; flex-direction: column; gap: .15rem; justify-content: flex-start; }
.card-v2.card-v2-cod .card-cell-actions { flex-direction: row; }
.card-v2.card-v2-cod .card-cell:not(.card-cell-financials) { align-items: flex-start; }
/* Trả hàng · bảo hành */
.oh-thead-ret, .card-v2.card-v2-ret { grid-template-columns: minmax(9rem, 12rem) minmax(11rem, 15rem) minmax(12rem, 1fr) minmax(9rem, 12rem) minmax(7rem, 9rem) minmax(8rem, 11rem) minmax(7rem, 9rem); }
.card-v2.card-v2-ret .card-cell, .card-v2.card-v2-inv-generic .card-cell { display: flex; flex-direction: column; gap: .15rem; align-items: flex-start; font-size: .88rem; }
.card-v2.card-v2-ret .card-cell-financials { align-items: flex-end; }
.filter-bar .filter-label { color: #6b7280; font-size: .85rem; margin-left: .4rem; }
.filter-bar .filter-search-wrap .filter-search { width: 100%; max-width: none; }
/* row buttons with words (Cấu hình…) */
.td-actions { white-space: nowrap; }
.td-actions .btn-action { width: auto; height: auto; padding: .3rem .55rem; border: 1px solid #d1d5db; border-radius: .45rem; background: #fff; font: 500 .8rem Inter, system-ui, sans-serif; color: #1f2937; margin-right: .25rem; }
.td-actions .btn-action:hover { border-color: #93c5fd; background: #eff6ff; }
.td-actions .btn-delete { color: #b91c1c; border-color: #fecaca; }
/* Cấu hình: sub-tabs read like the chips */
.stab { padding: .4rem .8rem !important; border-radius: 2rem !important; font-size: .88rem !important; border: 1px solid #d1d5db !important; background: #fff !important; color: #374151 !important; }
.stab.active { background: var(--accent, #1d4ed8) !important; border-color: var(--accent, #1d4ed8) !important; color: #fff !important; }

/* "Xem nhanh" shortcuts under the title (js/subnav.js orderhubViews) */
.oh-views { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; padding: .55rem 1.2rem; background: #fff; border-bottom: 1px solid #e5e7eb; font-size: .85rem; }
.oh-views > span { color: #6b7280; margin-right: .2rem; }
.oh-views a { padding: .25rem .6rem; border-radius: .45rem; color: #374151; text-decoration: none; white-space: nowrap; }
.oh-views a:hover { background: #eff6ff; color: #1d4ed8; }
.oh-views a.on { background: #eff6ff; color: #1d4ed8; font-weight: 600; }

/* page tables with their own header style (Cấu hình…) */
.main-area table th { text-transform: none !important; letter-spacing: 0 !important; font-size: .82rem !important; }
.btn-add { font-size: .88rem; padding: .45rem .85rem; border-radius: .55rem; }

/* ---------- popups, forms, slide panel: same look as the pages ---------- */
:root { --accent-gradient: var(--accent, #1d4ed8); --accent-purple: var(--accent, #1d4ed8); --border-focus: var(--accent, #1d4ed8); }
.btn { font-size: .88rem; padding: .5rem .95rem; border-radius: .55rem; font-weight: 500; }
.btn-sm { font-size: .82rem; padding: .32rem .65rem; }
.btn-primary { background: var(--accent, #1d4ed8); color: #fff; border: 1px solid var(--accent, #1d4ed8); font-weight: 600; }
.btn-primary:hover { transform: none; filter: brightness(1.08); }
.btn-secondary { background: #fff; border-color: #d1d5db; color: #1f2937; }
.modal { border-radius: 1rem; }
.modal-header { padding: 1rem 1.3rem; }
.modal-header h2, .modal-header h3 { font-size: 1.15rem; font-weight: 700; }
.modal-body { padding: 1.1rem 1.3rem; font-size: .92rem; }
.modal-footer { padding: .9rem 1.3rem; gap: .5rem; }
.modal-close { width: 2.2rem; height: 2.2rem; font-size: 1.05rem; }
.form-group label { font-size: .85rem; font-weight: 600; color: #374151; text-transform: none; letter-spacing: 0; margin-bottom: .3rem; }
.form-control { font-size: .92rem; padding: .55rem .75rem; border-radius: .55rem; background: #fff; border-color: #d1d5db; }
.form-control:focus { border-color: var(--accent, #1d4ed8); box-shadow: 0 0 0 3px rgba(29, 78, 216, .12); }
.slide-panel { font-size: .9rem; }
.sp-section-title { font-size: .95rem !important; text-transform: none !important; letter-spacing: 0 !important; }
.sp-info-label { font-size: .8rem !important; text-transform: none !important; letter-spacing: 0 !important; }
.sp-info-value { font-size: .9rem !important; }
.sp-tb-btn { font-size: .85rem; padding: .4rem .75rem; border-radius: .5rem; }
.sp-tb-btn:hover { color: var(--accent, #1d4ed8); border-color: #93c5fd; background: #eff6ff; }
.sp-tb-btn.active, .sp-tb-btn.btn-edit-active { background: var(--accent, #1d4ed8); border-color: var(--accent, #1d4ed8); }
.ctx-menu button { font-size: .88rem; padding: .5rem .8rem; }