/* Giao diện đồng bộ với SSO Portal và các app Tài liệu / Công việc / Nhân sự / Vận hành: màu chính #01458e, nhấn cam #e87a1e, nền #f7f9fc, chữ Be Vietnam Pro, bo góc lớn. */
:root {
  --brand: #01458e;
  --brand-dark: #003370;
  --brand-50: #e8f0fa;
  --brand-100: #c8ddf2;
  --accent: #e87a1e;
  --accent-hover: #d06a12;
  --accent-light: #fff3e8;
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-low: #f2f4f7;
  --surface-container: #eceef1;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.1);
  --shadow-card: 0 2px 8px rgba(0,83,219,.06), 0 1px 2px rgba(0,0,0,.05);
  --outline-variant: #c3c6d7;
  --on-surface: #191c1e;
  --on-surface-variant: #434655;
  --bs-body-font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bs-primary: var(--brand);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand-dark);
  --bs-border-radius: .6rem;
  --bs-border-radius-sm: .45rem;
  --bs-border-radius-lg: .9rem;
}
html { font-size: 14px; }
body { background: var(--bg); color: var(--on-surface); font-family: var(--bs-body-font-family); }
* { scrollbar-width: thin; scrollbar-color: var(--outline-variant) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 4px; }

/* Bố cục chung của các app (Tài liệu, Công việc, Nhân sự, Vận hành, Lương): menu trái nền xám nhạt, mục đang mở nền trắng chữ xanh;
   thanh trên trắng cao 56px, giữa là logo + tên công ty; thẻ trắng bo 16px; tab gạch chân. */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 256px; background: var(--surface-low); border-right: 1px solid var(--outline-variant); position: sticky; top: 0; height: 100vh; flex-shrink: 0; overflow-y: auto; overflow-x: hidden; transition: width .2s ease; }
.sidebar .brand, .sidebar-mobile .brand { display: flex; gap: .75rem; align-items: center; height: 56px; padding: 0 1rem; color: var(--on-surface); text-decoration: none; border-bottom: 1px solid var(--outline-variant); flex-shrink: 0; }
.brand .brand-ico { width: 32px; height: 32px; border-radius: .5rem; background: linear-gradient(135deg, var(--brand), #0567b8); color: #fff; display: grid; place-items: center; font-size: 1.05rem; flex-shrink: 0; }
.brand .brand-name { font-weight: 700; line-height: 1.2; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .nav, .sidebar-mobile .nav { padding: .5rem; gap: 2px; }
.sidebar .nav-link, .sidebar-mobile .nav-link { color: var(--on-surface-variant); padding: .625rem .75rem; display: flex; gap: .75rem; align-items: center; border-radius: .75rem; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.sidebar .nav-link i, .sidebar-mobile .nav-link i { font-size: 1.15rem; width: 1.25rem; text-align: center; flex-shrink: 0; }
.sidebar .nav-link:hover, .sidebar-mobile .nav-link:hover { color: var(--on-surface); background: var(--surface-container); }
.sidebar .nav-link.active, .sidebar-mobile .nav-link.active { color: var(--brand); background: var(--surface); font-weight: 600; box-shadow: var(--shadow-1); }
.sidebar-mobile { background: var(--surface-low); max-width: 270px; }
.sidebar .sso-note { color: var(--on-surface-variant); white-space: nowrap; }
.app.sidebar-collapsed .sidebar { width: 72px; }
.app.sidebar-collapsed .sidebar .brand { justify-content: center; padding: 0; }
.app.sidebar-collapsed .sidebar .brand-name, .app.sidebar-collapsed .sidebar .nav-label, .app.sidebar-collapsed .sidebar .sso-note { display: none; }
.app.sidebar-collapsed .sidebar .nav-link { justify-content: center; padding: .625rem .5rem; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.topbar { display: flex; align-items: center; gap: .5rem; padding: 0 1rem 0 .5rem; height: 56px; background: var(--surface); border-bottom: 1px solid var(--outline-variant); box-shadow: var(--shadow-1); position: sticky; top: 0; z-index: 1020; }
.topbar .page-title { font-size: 1rem; font-weight: 600; min-width: 0; max-width: 30%; }
.topbar-company { position: absolute; left: 50%; transform: translateX(-50%); align-items: center; gap: .5rem; pointer-events: none; max-width: 34%; }
.topbar-company img { height: 24px; max-width: 80px; object-fit: contain; flex-shrink: 0; }
.topbar-company span { font-size: 1rem; font-weight: 600; letter-spacing: .01em; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--on-surface-variant); display: inline-grid; place-items: center; font-size: 1.15rem; text-decoration: none; flex-shrink: 0; transition: background .15s, color .15s; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--surface-container); color: var(--on-surface); }
.topbar .icon-btn .bi-list { font-size: 1.4rem; }
.user-chip { align-items: center; gap: .5rem; margin-left: .25rem; min-width: 0; }
.user-chip .user-name { font-weight: 500; max-width: 180px; }
.role-pill { background: #fee2e2; color: #b91c1c; border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; font-weight: 500; white-space: nowrap; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.content { padding: 1.5rem; animation: fadeIn .18s ease-out; }
@media (max-width: 575.98px) { .content { padding: 1rem; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.card { border: 0; border-radius: 1rem; box-shadow: var(--shadow-card); }
.card > .card-header:first-child { border-radius: 1rem 1rem 0 0; }
.card > .card-footer:last-child { border-radius: 0 0 1rem 1rem; }
.card-header { background: var(--surface); font-weight: 600; padding: .85rem 1.25rem; border-bottom-color: var(--surface-container); }
.card-body { padding: 1.25rem; }
.card-header.text-bg-primary { background: var(--brand) !important; }
.border-danger.card { border: 1px solid #f3b4b4 !important; }
.btn { border-radius: .5rem; font-weight: 600; }
.btn-sm { border-radius: .5rem; }
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark); --bs-btn-active-bg: var(--brand-dark); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--outline-variant); --bs-btn-hover-color: var(--brand); --bs-btn-hover-bg: var(--brand-50); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); }
.btn-outline-secondary { --bs-btn-color: var(--on-surface-variant); --bs-btn-border-color: var(--outline-variant); --bs-btn-hover-color: var(--on-surface); --bs-btn-hover-bg: var(--surface-container); --bs-btn-hover-border-color: var(--outline-variant); }
.btn-accent { --bs-btn-color: #fff; --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); border-radius: 999px; padding-left: 1.25rem; padding-right: 1.25rem; box-shadow: var(--shadow-1); }
.text-bg-primary { background-color: var(--brand) !important; }
.text-primary { color: var(--brand) !important; }
.bg-primary { background-color: var(--brand) !important; }
.form-control, .form-select { border-radius: .5rem; border-color: var(--outline-variant); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(1,69,142,.15); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-label { font-weight: 500; }
/* Tab gạch chân như trang Cài đặt của Tài liệu / Công việc */
.nav-tabs { border-bottom: 1px solid var(--outline-variant); gap: .25rem; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; color: var(--on-surface-variant); font-weight: 500; padding: .7rem 1rem; background: none; }
.nav-tabs .nav-link:hover { color: var(--on-surface); border-bottom-color: var(--outline-variant); background: none; }
.nav-tabs .nav-link.active { color: var(--brand); border-bottom-color: var(--brand); background: none; font-weight: 600; }
.nav-pills .nav-link { border-radius: 999px; color: var(--on-surface-variant); font-weight: 500; }
.nav-pills .nav-link.active { color: var(--brand); background: var(--brand-50); font-weight: 600; }
.badge.sso-badge { background: var(--brand-50); color: var(--brand); font-weight: 600; border: 1px solid var(--brand-100); }
.alert { border-radius: .75rem; }

.stat { display: flex; gap: .9rem; align-items: center; }
.stat .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; }
.stat .val { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.table thead th { background: #f2f4f7; font-weight: 600; font-size: .82rem; text-transform: none; white-space: nowrap; vertical-align: middle; color: var(--on-surface-variant); }
.table td { vertical-align: middle; }
.table-items td input, .table-items td textarea, .table-items td select { min-width: 70px; }
.table-items td.w-name { min-width: 240px; }
.table-items td.w-code { min-width: 150px; }
.code-cell { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; white-space: nowrap; }

.steps { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps li { flex: 1 1 110px; font-size: .74rem; padding: .45rem .5rem; background: var(--surface-container); color: #667; border-radius: 8px; position: relative; counter-increment: s; }
.steps li::before { content: counter(s) ". "; font-weight: 700; }
.steps li.done { background: #d7ecdf; color: #1f6b3a; }
.steps li.current { background: var(--brand); color: #fff; font-weight: 600; }
.steps li .who { display: block; font-size: .68rem; opacity: .85; font-weight: 400; }
.timeline { list-style: none; padding-left: 1rem; border-left: 2px solid #dbe2ea; margin: 0; }
.timeline li { position: relative; padding: 0 0 .9rem .75rem; }
.timeline li::before { content: ''; position: absolute; left: -1.42rem; top: .3rem; width: 11px; height: 11px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; }
.timeline li.reject::before { background: #dc3545; }
.sealed { background: repeating-linear-gradient(45deg, #fafbfc, #fafbfc 10px, #f2f4f7 10px, #f2f4f7 20px); }
.best { background: #e6f4ea !important; font-weight: 600; }

/* Gợi ý vật tư */
.ac-wrap { position: relative; }
.ac-list { position: fixed; z-index: 1080; min-width: 460px; max-width: 92vw; max-height: 340px; overflow: auto; background: #fff; border: 1px solid rgba(195,198,215,.8); border-radius: .8rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.ac-list > div { padding: .45rem .7rem; cursor: pointer; border-bottom: 1px solid #f0f0f3; font-size: .85rem; }
.ac-list > div:hover, .ac-list > div.on { background: var(--brand-50); }
.ac-list .ac-new { color: var(--accent-hover); font-weight: 600; background: var(--accent-light); }
.ac-list .ac-empty { color: #888; cursor: default; }
.stock-pill { display: inline-block; padding: 0 .4rem; border-radius: 1rem; font-size: .72rem; background: #e6f4ea; color: #1f6b3a; font-weight: 600; }
.stock-pill.zero { background: #fde8e8; color: #a12; }
.stock-elsewhere { font-size: .72rem; color: var(--accent-hover); }

/* Cây chọn (tree-select): người theo phòng ban, chủng loại vật tư */
.ts { position: relative; }
.ts-toggle { text-align: left; display: flex; align-items: center; gap: .4rem; background: #fff; cursor: pointer; min-height: calc(1.5em + .5rem + 2px); }
.ts-toggle .ts-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-toggle .ts-label.ph { color: #8a8d99; }
.ts-toggle::after { content: '\F282'; font-family: 'bootstrap-icons'; font-size: .7rem; color: #777; }
.ts-panel { position: absolute; z-index: 1070; left: 0; right: 0; min-width: 280px; margin-top: 2px; background: #fff; border: 1px solid rgba(195,198,215,.9); border-radius: .8rem; box-shadow: 0 10px 28px rgba(0,0,0,.14); display: none; }
.ts.open .ts-panel { display: block; }
.ts-search { border: 0; border-bottom: 1px solid #eee; border-radius: .8rem .8rem 0 0; width: 100%; padding: .5rem .7rem; outline: none; }
.ts-tools { display: flex; gap: .5rem; padding: .25rem .7rem; border-bottom: 1px solid #f2f2f2; font-size: .75rem; }
.ts-tools a { cursor: pointer; text-decoration: none; }
.ts-list { max-height: 320px; overflow: auto; padding: .25rem 0; }
.ts-group > .ts-head { display: flex; align-items: center; gap: .35rem; padding: .35rem .6rem; font-weight: 600; cursor: pointer; user-select: none; font-size: .85rem; }
.ts-group > .ts-head:hover { background: #f5f7fa; }
.ts-group > .ts-head .ts-caret { width: 1rem; text-align: center; transition: transform .15s; color: #666; }
.ts-group.collapsed > .ts-head .ts-caret { transform: rotate(-90deg); }
.ts-group.collapsed > .ts-children { display: none; }
.ts-group > .ts-head .ts-count { margin-left: auto; font-weight: 400; color: #888; font-size: .75rem; }
.ts-children { padding-left: .9rem; }
.ts-item { display: flex; align-items: center; gap: .45rem; padding: .3rem .7rem; cursor: pointer; font-size: .85rem; }
.ts-item:hover, .ts-item.on { background: var(--brand-50); }
.ts-item.selected { color: var(--brand); font-weight: 600; }
.ts-item .ts-sub { color: #888; font-size: .75rem; margin-left: auto; white-space: nowrap; }
.ts-head.ts-pickable .ts-pick { margin-left: .25rem; font-size: .72rem; font-weight: 500; color: var(--brand); border: 1px solid var(--brand-100); border-radius: 1rem; padding: 0 .4rem; }
.ts-head.ts-pickable.selected { color: var(--brand); }
.ts-hidden { display: none !important; }
.ts-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.ts-chip { background: var(--brand-50); color: var(--brand); border-radius: 1rem; padding: 0 .5rem; font-size: .78rem; }

/* Cây thư mục dạng <details> dùng chung */
details.tree > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .35rem; padding: .3rem .4rem; border-radius: .5rem; }
details.tree > summary::-webkit-details-marker { display: none; }
details.tree > summary::before { content: '\F285'; font-family: 'bootstrap-icons'; font-size: .7rem; transition: transform .15s; color: #666; }
details.tree[open] > summary::before { transform: rotate(90deg); }
details.tree > summary:hover { background: #f5f7fa; }
details.tree > .tree-body { padding-left: 1.1rem; }

/* Bộ dựng mã vật tư */
.code-builder .seg { border: 1px solid rgba(195,198,215,.7); border-radius: .7rem; padding: .5rem .6rem; background: #fff; }
.code-builder .seg label { font-size: .75rem; color: var(--on-surface-variant); margin-bottom: .15rem; }
.code-preview { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: .03em; color: var(--brand); background: var(--brand-50); border-radius: .7rem; padding: .4rem .8rem; display: inline-block; }
.code-preview .seq { color: var(--accent-hover); }
.similar-box { border-left: 4px solid var(--accent); background: var(--accent-light); border-radius: .5rem; padding: .5rem .75rem; }

.logo-box { width: 120px; height: 64px; border: 1px dashed var(--outline-variant); border-radius: .7rem; display: grid; place-items: center; background: #fff; overflow: hidden; }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Hướng dẫn */
.help-toc a { display: block; padding: .25rem .5rem; border-radius: .5rem; color: var(--on-surface-variant); text-decoration: none; }
.help-toc a:hover { background: var(--brand-50); color: var(--brand); }
.help h2 { font-size: 1.2rem; font-weight: 700; margin-top: 1.5rem; scroll-margin-top: 70px; }
.help h3 { font-size: 1rem; font-weight: 700; margin-top: 1rem; }
.help .tip { border-left: 4px solid var(--brand); background: var(--brand-50); padding: .5rem .75rem; border-radius: .5rem; }
.help .warn { border-left: 4px solid var(--accent); background: var(--accent-light); padding: .5rem .75rem; border-radius: .5rem; }
.help-pop { cursor: help; color: var(--brand); }

.login-bg { min-height: 100vh; background: radial-gradient(circle at 20% 10%, #e8f0fa 0, transparent 45%), radial-gradient(circle at 90% 90%, #fff3e8 0, transparent 40%), var(--bg); }
.text-pre { white-space: pre-line; }
@media print { .sidebar, .topbar, .no-print { display: none !important; } .content { padding: 0; } .card { box-shadow: none; border: 0; } }

/* Mã vạch mã vật tư (trang chi tiết) và in tem (Tồn kho › In tem): mỗi tem một trang in đúng khổ tem */
.barcode-box { max-width: 100%; }
.barcode-box svg { display: block; width: 100%; height: 56px; }
.labels { --lw: 50mm; --lh: 30mm; display: flex; flex-wrap: wrap; gap: .75rem; padding: .75rem; background: var(--surface-container); border-radius: 1rem; overflow-x: auto; }
.label { width: var(--lw); height: var(--lh); max-width: 100%; flex-shrink: 0; box-sizing: border-box; padding: calc(var(--lh) * .05) calc(var(--lw) * .04); background: #fff; color: #000; border-radius: .3rem; box-shadow: 0 1px 3px rgba(0,0,0,.15); display: flex; flex-direction: column; overflow: hidden; line-height: 1.15; }
.label-name { font-size: calc(var(--lh) * .085); font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* Mã vạch rộng đúng --bcw (số nguyên chấm in mỗi module, label-print.js tính), căn giữa tem; rộng hơn phần nội dung thì tràn sang lề tem (vùng trắng) */
.label-bc { flex: 1 1 0; min-height: 0; width: var(--bcw, 100%); max-width: none; align-self: flex-start; display: block; margin: calc(var(--lh) * .02) 0 calc(var(--lh) * .02) calc((100% - var(--bcw, 100%)) / 2); }
.label-code { font: 700 calc(var(--lh) * .1)/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-meta { display: flex; justify-content: space-between; gap: .5em; font-size: calc(var(--lh) * .075); white-space: nowrap; }
.label-meta span { overflow: hidden; text-overflow: ellipsis; }
.labels.no-shelf .label-shelf { display: none; }
.labels > .label:nth-child(n+13) { display: none; }
@media print {
  .labels { display: block; padding: 0; background: none; border-radius: 0; overflow: visible; }
  .labels > .label, .labels > .label:nth-child(n+13) { display: flex; max-width: none; height: calc(var(--lh) - .5mm); margin: 0; border-radius: 0; box-shadow: none; }
  .labels > .label:not(:last-child) { break-after: page; page-break-after: always; }
}

/* Sơ đồ quy trình (Cài đặt › Quy trình) */
.wf-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: .25rem; }
.wf-node { display: inline-flex; flex-direction: column; justify-content: center; font-size: .74rem; padding: .3rem .55rem; border-radius: 8px; background: var(--surface-container); color: #334; line-height: 1.25; max-width: 220px; }
.wf-node small { font-size: .68rem; color: #667; }
.wf-node.wf-start { background: #e8eefc; color: #2a4a8f; }
.wf-node.wf-sys { background: #fff4e0; color: #7a5200; }
.wf-node.wf-end { background: #d7ecdf; color: #1f6b3a; font-weight: 600; }
.wf-arrow { align-self: center; color: #99a; font-weight: 700; }
.wf-step { border-left: 3px solid var(--brand); }

/* Hướng dẫn trực quan: ảnh màn hình có số chú thích + các bước đánh số cùng màu */
.hd-fig { margin: .75rem 0 .5rem; }
.hd-fig img { width: 100%; height: auto; border-radius: .75rem; border: 1px solid rgba(195,198,215,.7); box-shadow: 0 2px 10px rgba(1,69,142,.08); }
.hd-fig figcaption { font-size: .8rem; color: var(--on-surface-variant); text-align: center; margin-top: .35rem; }
.hd-steps { list-style: none; counter-reset: hd; padding-left: 0; margin-bottom: 1rem; }
.hd-steps > li { counter-increment: hd; position: relative; padding-left: 2.3rem; min-height: 1.75rem; }
.hd-steps > li::before { content: counter(hd); position: absolute; left: 0; top: -.05rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: .85rem; display: grid; place-items: center; }
.hd-num { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: .75rem; }
.hd-key { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--outline-variant); border-radius: .45rem; }
.hd-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.hd-tile { display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border-radius: .75rem; background: var(--brand-50); color: var(--brand); text-decoration: none; font-weight: 600; }
.hd-tile i { font-size: 1.25rem; }
.hd-tile:hover { background: var(--brand); color: #fff; }
.hd-role { border: 1px solid rgba(195,198,215,.7); border-radius: .75rem; padding: .65rem .8rem; height: 100%; background: var(--surface); }
.hd-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .85rem; }
.hd-flow span { background: var(--brand-50); color: var(--brand); border-radius: 999px; padding: .2rem .7rem; font-weight: 600; }
.hd-flow i { color: var(--on-surface-variant); }