/* Q-Putaway application styles (Bootstrap 5 base). Mobile-first; no hover-only interactions. */
:root {
  --qp-brand: #0f5132;
  --qp-brand-2: #146c43;
  --qp-sidebar-w: 248px;
  --qp-topbar-h: 56px;
  --bs-primary: #146c43;
  --bs-primary-rgb: 20, 108, 67;
  --bs-link-color: #146c43;
  --bs-link-color-rgb: 20, 108, 67;
  --bs-link-hover-color: #0f5132;
}
.btn-primary { --bs-btn-bg: #146c43; --bs-btn-border-color: #146c43; --bs-btn-hover-bg: #0f5132; --bs-btn-hover-border-color: #0f5132; --bs-btn-active-bg: #0c4128; --bs-btn-disabled-bg: #146c43; --bs-btn-disabled-border-color: #146c43; }
.btn-outline-primary { --bs-btn-color: #146c43; --bs-btn-border-color: #146c43; --bs-btn-hover-bg: #146c43; --bs-btn-hover-border-color: #146c43; --bs-btn-active-bg: #0f5132; }
.text-bg-primary { background-color: #146c43 !important; }
.page-item.active .page-link { background-color: #146c43; border-color: #146c43; }
.form-check-input:checked { background-color: #146c43; border-color: #146c43; }

html, body { overflow-x: hidden; }
body.qp-app { background: #f4f6f5; min-height: 100vh; }

/* ---------- top bar & sidebar ---------- */
.qp-topbar { background: var(--qp-brand); min-height: var(--qp-topbar-h); z-index: 1030; padding-top: env(safe-area-inset-top); }
.qp-topbar .btn-link { text-decoration: none; min-width: 40px; min-height: 40px; }
.qp-wh-select { max-width: 42vw; }
.qp-wh-select .form-select { max-width: 280px; text-overflow: ellipsis; }
.qp-shell { display: flex; min-height: calc(100vh - var(--qp-topbar-h)); }
.qp-sidebar { width: var(--qp-sidebar-w); background: #fff; border-right: 1px solid #dee2e6; }
.qp-sidebar .offcanvas-body { display: flex; flex-direction: column; }
.qp-sidebar .offcanvas-body > nav { flex: 1 0 auto; }
.qp-topbar .container-fluid { justify-content: flex-start; }
@media (min-width: 992px) {
  .qp-sidebar { position: sticky; top: var(--qp-topbar-h); height: calc(100vh - var(--qp-topbar-h)); overflow-y: auto; flex: 0 0 var(--qp-sidebar-w); }
}
.qp-sidebar .nav-link { color: #344; display: flex; align-items: center; gap: .65rem; padding: .55rem 1rem; border-left: 3px solid transparent; min-height: 42px; }
.qp-sidebar .nav-link .bi { font-size: 1.05rem; width: 1.2rem; text-align: center; color: #5c6b63; }
.qp-sidebar .nav-link:hover, .qp-sidebar .nav-link:focus-visible { background: #eef5f1; }
.qp-sidebar .nav-link.active { background: #e3f1ea; border-left-color: var(--qp-brand-2); color: var(--qp-brand); font-weight: 600; }
.qp-sidebar .nav-link.active .bi { color: var(--qp-brand-2); }
.qp-nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #7a8a82; padding: .9rem 1rem .25rem; font-weight: 600; }
.qp-main { flex: 1 1 auto; min-width: 0; padding-bottom: env(safe-area-inset-bottom); }
.qp-main:focus { outline: none; }

/* ---------- page header ---------- */
.qp-page-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.qp-page-head h1 { font-size: 1.35rem; margin: 0; }
.qp-page-head .qp-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.card { border-color: #e2e7e4; }
.card-header { background: #fbfcfb; }

/* ---------- KPI cards ---------- */
.qp-kpi { border-radius: .6rem; background: #fff; border: 1px solid #e2e7e4; padding: .9rem 1rem; height: 100%; display: block; color: inherit; text-decoration: none; }
a.qp-kpi:hover, a.qp-kpi:focus-visible { border-color: var(--qp-brand-2); }
.qp-kpi .qp-kpi-label { font-size: .78rem; color: #6c757d; text-transform: uppercase; letter-spacing: .04em; }
.qp-kpi .qp-kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.qp-kpi .qp-kpi-icon { font-size: 1.6rem; opacity: .35; }

/* ---------- grids: card mode on phones ---------- */
.qp-grid-wrap.qp-loading tbody { opacity: .55; }
.qp-grid th.qp-sortable { cursor: pointer; white-space: nowrap; }
.qp-grid th.qp-sortable::after { content: ' \2195'; opacity: .35; font-size: .8em; }
.qp-grid th[aria-sort="ascending"]::after { content: ' \2191'; opacity: .9; }
.qp-grid th[aria-sort="descending"]::after { content: ' \2193'; opacity: .9; }
.qp-grid td .btn { margin: 1px 0; }
@media (max-width: 767.98px) {
  table.qp-grid thead, table.qp-cards thead { display: none; }
  table.qp-grid, table.qp-grid tbody, table.qp-grid tr, table.qp-grid td,
  table.qp-cards, table.qp-cards tbody, table.qp-cards tr, table.qp-cards td { display: block; width: 100%; }
  table.qp-grid tr, table.qp-cards tr { background: #fff; border: 1px solid #e2e7e4; border-radius: .5rem; margin-bottom: .6rem; padding: .35rem .6rem; }
  table.qp-grid td, table.qp-cards td { border: 0; padding: .25rem 0; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  table.qp-grid td::before, table.qp-cards td::before { content: attr(data-label); font-weight: 600; color: #6c757d; text-align: left; flex: 0 0 auto; }
  table.qp-grid td[data-label=""]::before, table.qp-cards td[data-label=""]::before { content: none; }
  table.qp-grid tr.qp-empty td { justify-content: center; }
  .qp-page-head .qp-actions { width: 100%; }
  .qp-page-head .qp-actions .btn { flex: 1 1 auto; }
}

/* ---------- forms & touch ---------- */
.btn, .form-control, .form-select { min-height: 40px; }
.btn-sm, .form-control-sm, .form-select-sm { min-height: 32px; }
@media (pointer: coarse) {
  .btn, .form-control, .form-select { min-height: 46px; }
  .btn-sm { min-height: 38px; }
}
.qp-lookup-list { position: absolute; z-index: 1050; max-height: 280px; overflow-y: auto; min-width: 260px; }
.qp-rel { position: relative; }
.qp-lines-table input { min-width: 80px; }
.qp-req::after { content: ' *'; color: #dc3545; }

/* ---------- worker / task mode ---------- */
.qp-task-card { border-left: 5px solid var(--qp-brand-2); }
.qp-task-card.priority-high { border-left-color: #dc3545; }
.qp-task-big { font-size: 1.25rem; font-weight: 700; }
.qp-step { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem; border: 1px solid #e2e7e4; border-radius: .5rem; background: #fff; margin-bottom: .6rem; }
.qp-step .qp-step-no { flex: 0 0 2rem; height: 2rem; border-radius: 50%; background: #e9ecef; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.qp-step.done .qp-step-no { background: #198754; color: #fff; }
.qp-step.active { border-color: var(--qp-brand-2); box-shadow: 0 0 0 .15rem rgba(20,108,67,.15); }
.qp-step .form-control { font-size: 1.05rem; }
.qp-scan-row { display: flex; gap: .5rem; }
.qp-scan-row .form-control { flex: 1 1 auto; }
.qp-big-btn { padding: .9rem 1rem; font-size: 1.1rem; font-weight: 600; }

/* ---------- scanner ---------- */
.qp-scan-video-wrap { position: relative; background: #111; border-radius: .5rem; overflow: hidden; aspect-ratio: 4 / 3; }
.qp-scan-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qp-scan-frame { position: absolute; inset: 18% 10%; border: 3px solid rgba(255,255,255,.85); border-radius: .5rem; box-shadow: 0 0 0 999px rgba(0,0,0,.25); pointer-events: none; }
.qp-scan-flash { position: absolute; inset: 0; pointer-events: none; transition: background .2s; }
.qp-scan-flash.ok { background: rgba(25,135,84,.35); }
.qp-scan-flash.bad { background: rgba(220,53,69,.35); }
.qp-scan-result { padding: .5rem .75rem; border-radius: .4rem; background: #e9f7ef; word-break: break-all; }

/* ---------- notifications / banners ---------- */
.qp-notif-menu { width: min(360px, 92vw); }
.qp-notif-list { max-height: 60vh; overflow-y: auto; }
.qp-notif-list .dropdown-item { white-space: normal; border-bottom: 1px solid #f0f0f0; }
.qp-update-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom)); background: #212529; color: #fff; padding: .6rem 1rem; border-radius: .5rem; z-index: 1090; max-width: 94vw; box-shadow: 0 .5rem 1rem rgba(0,0,0,.25); }

/* ---------- auth ---------- */
body.qp-auth { background: linear-gradient(160deg, #0f5132 0%, #146c43 40%, #e9f2ed 40.1%); min-height: 100vh; }
.qp-auth-main { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1rem; }
.qp-auth-card { width: 100%; max-width: 420px; border-radius: .8rem; }
.qp-auth-card.qp-auth-wide { max-width: 760px; }

/* ---------- help ---------- */
.qp-help-body { max-width: 860px; line-height: 1.65; }
.qp-help-body h2 { font-size: 1.3rem; margin-top: 1.5rem; }
.qp-help-body h3 { font-size: 1.1rem; margin-top: 1.25rem; }
.qp-help-body img { max-width: 100%; height: auto; }
.qp-help-body pre { background: #f6f8fa; padding: .75rem; border-radius: .4rem; overflow-x: auto; }
.qp-help-body blockquote.help-note { border-left: 4px solid #ffc107; background: #fff8e1; padding: .6rem .9rem; border-radius: .3rem; }
.qp-help-body table { font-size: .92rem; }

/* ---------- misc ---------- */
.qp-mono { font-family: SFMono-Regular, Menlo, Consolas, monospace; }
.qp-chart { position: relative; height: 260px; }
.qp-chart-sm { position: relative; height: 180px; }
.qp-tree ul { list-style: none; padding-left: 1.1rem; border-left: 1px dashed #ccd5cf; }
.qp-tree li { padding: .15rem 0; }
.text-pre { white-space: pre-wrap; }
.min-w-0 { min-width: 0; }
@media print {
  .qp-topbar, .qp-sidebar, .qp-page-head .qp-actions, .no-print, .toast-container, .qp-update-banner { display: none !important; }
  .qp-main { padding: 0; }
  body.qp-app { background: #fff; }
}