:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:#25354b;background:#f4f7fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;font-size:14px}button,input,textarea,select{font:inherit}button{border:1px solid #dde4ef;color:#344762;background:#fff;border-radius:9px;padding:10px 14px;cursor:pointer;font-weight:650;transition:.12s}button:hover{background:#f0f5fc}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:#2458c7;border-color:#2458c7;color:#fff}button.primary:hover{background:#1949ad}.danger{color:#a93b35}.muted{color:#8493a7}.fill{width:100%}[hidden]{display:none!important}input,select,textarea{color:#203651;background:#fff;border:1px solid #d7dfeb;border-radius:9px;padding:11px 12px;width:100%;min-width:0}input:focus,select:focus,textarea:focus{outline:2px solid #a2bdf5;border-color:#6692ea}label{display:block;font-size:12px;color:#526580;font-weight:700;margin:0 0 14px}label input,label select,label textarea{display:block;margin-top:7px;font-weight:450}h1,h2,h3,p{margin-top:0}h1{font-size:30px;letter-spacing:-.7px}h2{font-size:22px;letter-spacing:-.5px}h3{font-size:16px}.overline{font-size:10px;font-weight:800;letter-spacing:2px;color:#6c8dbe}.login-layout{min-height:100vh;display:grid;grid-template-columns:52% 48%;background:#fff}.login-hero{background:radial-gradient(circle at 95% 85%,#335ca1,transparent 50%),linear-gradient(145deg,#101f3a,#163765);color:#fff;padding:60px clamp(30px,6vw,100px);display:flex;flex-direction:column;justify-content:space-between}.hero-logo{font-size:38px;letter-spacing:5px;font-weight:800}.hero-logo small{display:block;font-size:10px;letter-spacing:4px;margin-top:2px;font-weight:500}.login-hero h1{font-size:clamp(34px,4.2vw,62px);line-height:1.15;margin:22px 0}.login-hero em{font-style:normal;color:#98bcff}.login-hero p{line-height:2;color:#b2c9ec}.login-hero>small{font-size:10px;letter-spacing:2px;color:#a0b8da}.light{color:#b2c9ec}.login-panel{display:grid;place-items:center;padding:35px}.login-card{width:min(100%,390px)}.login-icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:#e8efff;color:#2458c7;font-size:21px;font-weight:900;margin-bottom:24px}.login-card p,.hint{color:#8695a9;line-height:1.8}.login-card h2{margin-bottom:5px}.login-card label{margin-bottom:13px}.or{text-align:center;position:relative;margin:20px 0;color:#9da9b9}.or:before{content:'';position:absolute;inset:50% 0 auto;border-top:1px solid #e2e6ef}.or span{background:white;padding:0 14px;position:relative}.google-btn{display:flex;align-items:center;justify-content:center;gap:12px}.google-g{font-size:20px;color:#4285f4}.mini-links{display:flex;justify-content:space-between;margin:14px 0}.text-btn{border:0;padding:5px;color:#265abf;background:none;font-size:12px}.hint{display:block;margin-top:20px;font-size:11px}.login-status{color:#bb443d;font-size:12px;min-height:20px}.shell{min-height:100vh;display:flex}.sidebar{background:#122a49;color:#dce8fa;width:260px;flex:0 0 260px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:28px 14px 18px}.side-brand{display:flex;gap:10px;align-items:center;padding:0 10px 32px}.brand-symbol{width:36px;height:36px;border-radius:9px;background:#4074db;color:white;display:grid;place-items:center;font-size:25px;font-weight:900}.side-brand strong{font-size:14px;letter-spacing:1px}.side-brand small{display:block;font-size:9px;letter-spacing:2px;color:#92abc9;margin-top:4px}.side-label{color:#7894b7;letter-spacing:1.7px;font-size:9px;font-weight:800;margin:16px 10px 10px}.sidebar nav{overflow-y:auto}.sidebar nav button{width:100%;border:0;background:transparent;color:#b7cbe5;font-size:12px;text-align:left;font-weight:600;padding:12px 14px;display:flex;align-items:center;gap:10px;margin:2px 0}.sidebar nav button span{font-size:18px;color:#8eb0df;min-width:21px}.sidebar nav button.active,.sidebar nav button:hover{background:#254a7e;color:#fff}.side-user{margin-top:auto;padding:22px 12px 6px;border-top:1px solid #39506f;min-width:0}.side-user strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-user small{display:block;color:#9eb7d5;margin:5px 0 14px}.side-user button{color:#bfd3ed;background:transparent;border:1px solid #425b7b}.workarea{flex:1;min-width:0}.topbar{background:white;border-bottom:1px solid #e5eaf3;display:flex;align-items:center;justify-content:space-between;min-height:79px;padding:15px 35px}.top-eyebrow{font-size:9px;color:#96a5bb;font-weight:700;letter-spacing:1.4px;display:block}.topbar strong{display:block;font-size:15px;margin-top:6px}.top-user{display:flex;align-items:center;gap:9px;font-size:12px;color:#667992}.dot{width:8px;height:8px;border-radius:50%;background:#36ab74}.main-content{max-width:1580px;padding:36px;margin:auto}.page-title{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:26px}.page-title h1{margin:7px 0}.page-title p{color:#8b9aaf;margin:0;font-size:13px}.toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}.toolbar-actions button{white-space:nowrap}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:22px}.stat{padding:22px;background:#fff;border:1px solid #e4eaf4;border-radius:13px}.stat small{color:#8191a6;font-size:12px}.stat strong{display:block;margin-top:12px;font-size:27px;color:#172d4e}.panel{background:#fff;border:1px solid #e4eaf4;border-radius:13px;overflow:hidden;margin-bottom:20px}.panel-title{padding:19px 22px;border-bottom:1px solid #edf0f6;font-size:15px;font-weight:750}.toolbar{padding:18px 20px;display:flex;flex-wrap:wrap;gap:9px}.toolbar input{flex:1;min-width:200px}.toolbar select{width:auto;min-width:140px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left}th{white-space:nowrap;background:#fafcff;color:#8797ac;font-size:10px;letter-spacing:.4px;border-bottom:1px solid #e9eef5;padding:13px 15px}td{font-size:12px;border-bottom:1px solid #edf1f7;padding:14px 15px;vertical-align:middle;max-width:340px}td small{display:block;color:#9aaaBD;margin-top:3px}td .title{font-size:13px;font-weight:750}td.nowrap{white-space:nowrap}td.actions{min-width:210px}td.actions button{font-size:10px;padding:6px 8px;margin:2px}.badge{display:inline-block;background:#eff3f9;border-radius:6px;padding:5px 9px;font-size:10px;font-weight:700;color:#5e7293}.badge.approved,.badge.paid,.badge.active{background:#e6f5ec;color:#228255}.badge.submitted,.badge.ordered{background:#fff3dc;color:#a77514}.badge.rejected,.badge.cancelled{background:#fdeceb;color:#ad473c}.table-note{font-size:11px;color:#97a4b5;margin:12px 20px 18px}.empty{padding:50px 20px;text-align:center;color:#91a0b2}.toast{background:#e8f0fe;color:#2d559c;border:1px solid #cfe0ff;border-radius:9px;padding:13px 17px;margin-bottom:18px}.footer{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;color:#99a7bb;margin:35px 2px}.footer span{letter-spacing:0}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}.wide{grid-column:1/-1}dialog{border:0;border-radius:16px;padding:28px;width:720px;max-width:95vw;max-height:91vh;overflow-y:auto;box-shadow:0 35px 100px #0b254750}dialog::backdrop{background:#0b1e387f;backdrop-filter:blur(3px)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:22px}.modal-head small{font-weight:800;letter-spacing:2px;font-size:10px;color:#8198bb}.modal-head h2{margin:8px 0 0}.modal-head button{border:0;padding:4px 10px;font-size:18px}.section-subhead{font-weight:800;font-size:12px;color:#37649e;border-bottom:1px solid #edf0f5;padding-bottom:9px;margin:16px 0}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}.form-error{color:#b44339;font-size:12px}.help{font-size:11px;color:#8798ad;margin:0 0 16px}.radio-inline{display:flex;gap:18px;align-items:center;margin-bottom:18px}.radio-inline label{display:flex;align-items:center;gap:6px;margin:0}.radio-inline input{width:auto;margin:0}.chip-wrap{display:flex;gap:8px;flex-wrap:wrap}.chip{border-radius:99px;background:#eef4fe;color:#3c6ec3;padding:8px 12px;font-size:12px;font-weight:700}.permission-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.permission-list label{display:flex;gap:9px;align-items:center;margin:0;border:1px solid #e2eaf5;border-radius:8px;padding:9px;font-size:11px}.permission-list input{width:auto;margin:0}.sensitive-warning{background:#fff8e7;color:#896111;border-radius:9px;padding:12px;font-size:12px;margin-bottom:16px}.wide-note{white-space:pre-wrap}.config-table{margin:8px 0 20px}.grid-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.dashboard-card{border:1px solid #e4eaf4;border-radius:12px;background:white;padding:22px;cursor:pointer}.dashboard-card:hover{border-color:#a7c3f8;box-shadow:0 5px 18px #174fa713}.dashboard-card h3{margin:6px 0}.dashboard-card p{color:#8fa0b5;font-size:12px;margin-bottom:0}.detail-row{display:flex;justify-content:space-between;gap:15px;margin:9px 0;border-bottom:1px solid #f0f2f5;padding-bottom:7px}.detail-row small{color:#8494ac}.detail-row b{font-weight:600;text-align:right}.print-help{font-size:11px;color:#8a99ae;margin:0 20px 16px}
#printArea{display:none}
@media(max-width:1050px){.sidebar{width:216px;flex-basis:216px}.main-content{padding:25px}.two-cols{gap:10px}.stats{gap:9px}}@media(max-width:720px){.login-layout{grid-template-columns:1fr}.login-hero{min-height:210px;padding:25px}.login-hero h1{font-size:30px}.login-hero p,.login-hero>small{display:none}.login-panel{padding:35px 20px}.shell{display:block}.sidebar{position:static;width:100%;height:auto;padding:15px}.side-brand{padding-bottom:4px}.sidebar nav{display:flex;overflow-x:auto}.sidebar nav button{width:auto;white-space:nowrap}.side-label{display:none}.side-user{display:flex;align-items:center;gap:10px;padding:10px 4px}.side-user button{margin-left:auto}.topbar{padding:14px}.top-user{display:none}.main-content{padding:18px}.page-title{align-items:flex-start;flex-direction:column}.stats,.grid-summary{grid-template-columns:1fr}.two-cols,.permission-list{grid-template-columns:1fr}.wide{grid-column:auto}.footer{display:none}}
@media print{@page{size:A4;margin:0}body{background:#fff!important;color:#000!important}body>:not(#printArea){display:none!important}#printArea{display:block!important;width:210mm;height:297mm;padding:10mm 9mm;overflow:hidden;font-family:'Times New Roman',serif!important;font-size:11pt;line-height:1.15;color:#000}#printArea *{box-sizing:border-box}#printArea .print-sheet{height:100%;display:flex;flex-direction:column;gap:0}#printArea .print-company{font-size:9.8pt;line-height:1.18}#printArea .print-center{text-align:center}#printArea .print-main-title{font-size:13.5pt;font-weight:bold;margin:8px 0 4px}#printArea .print-date{font-style:italic;font-size:10pt;margin-bottom:5px}#printArea p{margin:4px 0;color:#000!important}#printArea .print-line{font-size:10.5pt;margin:3px 0}#printArea .print-money-words{min-height:28px}#printArea .print-block{margin-top:12px}#printArea .resolution-header{margin-top:13px;border:1px solid #000;text-align:center;font-weight:700;font-size:11pt;line-height:1.1;padding:3px}#printArea .resolution-header small{font-size:9pt}#printArea .resolution-table{border-collapse:collapse;width:100%;table-layout:fixed;margin:0}#printArea .resolution-table td,#printArea .resolution-table th{border:1px solid #000;padding:2px;font-size:9.4pt;font-weight:normal}#printArea .resolution-table th{color:#000!important;background:#fff!important}#printArea .resolution-table .desc-col{width:62%;text-align:left}#printArea .resolution-table .amt-col{text-align:center}#printArea .resolution-table .description-data{height:48px;vertical-align:top;overflow:hidden}#printArea .resolution-table .description-inner{font-size:10pt;line-height:1.1;overflow-wrap:anywhere;white-space:pre-wrap;max-height:48px;overflow:hidden}#printArea .resolution-table .blank-row{height:15px}#printArea .verification{width:100%;border-collapse:collapse;table-layout:fixed}#printArea .verification td{border:1px solid #000;text-align:center;font-size:10pt;vertical-align:top;padding:3px}#printArea .verification tr:first-child td{height:18px}#printArea .verification tr:last-child td{height:75px}#printArea .approval-grid{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid #777;margin-top:10px;height:108px}#printArea .approval-grid>div{padding:4px 2px;text-align:center;display:flex;flex-direction:column;justify-content:space-between;min-width:0}#printArea .approval-grid b{font-size:8.3pt}#printArea .approval-grid span{font-size:8.5pt}#printArea .approval-grid small{font-size:7.4pt;font-style:italic;color:#000}#printArea .print-flex-spacer{flex:1}}

/* Logo Yura chính thức: đặt trên nền trắng để phần chữ đen luôn rõ, giữ tỉ lệ 4:1. */
.yura-logo{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.yura-logo-panel{display:inline-flex;width:220px;max-width:100%;height:68px;padding:9px 16px;align-items:center;justify-content:center;background:white;border-radius:14px;box-shadow:0 8px 30px #0002}
.hero-logo .yura-logo-hero{width:100%;height:100%;object-fit:contain}
.hero-logo small{margin-top:10px}
.login-icon.yura-login-logo{background:#fff;width:154px;height:58px;padding:8px 12px;border:1px solid #e5eaf3;box-shadow:0 4px 14px #00000009}
.brand-symbol.yura-sidebar-logo{background:#fff;flex:none;width:95px;height:38px;padding:6px 8px;border-radius:9px;box-shadow:0 3px 12px #0001}
@media(max-width:720px){.yura-logo-panel{width:165px;height:50px;padding:7px 12px}.hero-logo small{margin-top:6px;font-size:8px}.brand-symbol.yura-sidebar-logo{width:80px;height:32px}}

/* ===== YURA TAY NINH BRAND 1.1 | Bố cục trắng/xanh từ giao diện người dùng ===== */
:root{font-family:'Be Vietnam Pro',Inter,ui-sans-serif,system-ui,sans-serif;color:#0f172a;background:#f1f5f9}
body{background:#f1f5f9;color:#0f172a;font-size:13px}
button{color:#334155;border:1px solid #cbd5e1;border-radius:11px;font-weight:700;transition:background-color .15s,color .15s,border-color .15s,transform .15s}
button:hover{background:#f1f5f9}
button.primary{background:#065f46;border-color:#065f46;color:#fff;box-shadow:0 4px 12px #065f4620}
button.primary:hover{background:#064e3b;border-color:#064e3b}
input,textarea,select{border:1px solid #cbd5e1;border-radius:11px;color:#0f172a;background:#fff}
input:focus,textarea:focus,select:focus{outline:2px solid #a7f3d0;border-color:#047857}
label{color:#334155}
.overline{color:#059669}
.login-layout{grid-template-columns:50% 50%;background:#f1f5f9}
.login-hero{background:radial-gradient(circle at 90% 92%,#16653477,transparent 48%),linear-gradient(130deg,#022c22 0%,#064e3b 57%,#0f172a 100%);padding:60px clamp(30px,6vw,90px)}
.login-hero .overline{color:#a7f3d0}
.login-hero h1{max-width:670px;font-weight:800;letter-spacing:-1.5px;line-height:1.15}
.login-hero em{color:#bbf7d0}
.login-hero p{max-width:580px;font-size:16px;color:#d1fae5;line-height:1.85}
.login-hero>small{color:#d1fae5;border-top:1px solid #ffffff38;padding-top:20px}
.login-panel{background:#f1f5f9;padding:40px}
.login-card{box-sizing:content-box;max-width:100%;width:min(100%,410px);padding:36px 34px;border-radius:25px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 20px 55px #0f172a17}
.login-card h2{font-size:22px;font-weight:800;color:#0f172a}
.login-card p,.hint{color:#64748b}
.login-icon.yura-login-logo{width:152px;height:64px;padding:10px 13px;background:#fff;border-color:#e2e8f0;border-radius:14px;margin-bottom:22px}
.google-btn{padding:13px;font-weight:750;background:#fff}
.google-btn:hover{background:#f8fafc}
.text-btn{color:#047857}
.text-btn:hover{color:#065f46}
.login-status{line-height:1.5}
.shell{background:#f1f5f9}
.sidebar{background:#fff;color:#334155;border-right:1px solid #e2e8f0;box-shadow:1px 0 10px #0f172a08;padding:23px 13px 16px;width:274px;flex:0 0 274px}
.side-brand{padding:3px 9px 24px;gap:12px;border-bottom:1px solid #e2e8f0}
.side-brand strong{color:#0f172a;font-weight:800;font-size:13px;letter-spacing:.3px}
.side-brand small{color:#047857;font-size:10px;font-weight:750;letter-spacing:1px;margin-top:5px}
.brand-symbol.yura-sidebar-logo{width:90px;height:45px;border:1px solid #e2e8f0;border-radius:11px;box-shadow:0 3px 10px #0f172a10}
.side-label{color:#94a3b8;font-size:10px;margin:22px 12px 10px;letter-spacing:1.1px}
.sidebar nav button{color:#334155;border-radius:11px;font-weight:700;font-size:12px;padding:13px 14px;gap:10px}
.sidebar nav button span{color:#64748b}
.sidebar nav button:hover{background:#ecfdf5;color:#065f46}
.sidebar nav button:hover span{color:#047857}
.sidebar nav button.active{background:#065f46;color:#fff;box-shadow:0 5px 12px #065f462a}
.sidebar nav button.active span{color:#fff}
.side-user{background:#f8fafc;border:1px solid #e2e8f0;border-radius:15px;padding:14px 12px;margin-top:auto}
.side-user strong{color:#0f172a}
.side-user small{color:#047857}
.side-user button{background:#fff;color:#475569;border-color:#cbd5e1;width:100%;margin-top:3px}
.side-user button:hover{background:#fff1f2;color:#be123c;border-color:#fda4af}
.workarea{background:#f1f5f9}
.topbar{background:#fff;border-bottom:1px solid #e2e8f0;min-height:70px;padding:14px 32px}
.top-eyebrow{color:#047857;font-weight:800}
.topbar strong{color:#0f172a}
.top-user{color:#334155;background:#f8fafc;border:1px solid #e2e8f0;border-radius:100px;padding:8px 12px}
.dot{background:#10b981}
.main-content{padding:32px}
.page-title h1{color:#0f172a}
.page-title p{color:#64748b}
.stat,.panel,.dashboard-card{border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 2px 10px #0f172a05}
.stat strong{color:#0f172a}
.panel-title{border-bottom:1px solid #e2e8f0}
.section-subhead{color:#047857}
.dashboard-card:hover{border-color:#a7f3d0;box-shadow:0 7px 20px #065f4610}
.table-wrap th,th{background:#f8fafc;color:#64748b;border-color:#e2e8f0}
td{border-color:#e2e8f0}
td .title{color:#0f766e}
.chip{background:#ecfdf5;color:#047857}
.toast{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.login-status{color:#b91c1c}
dialog{border:1px solid #e2e8f0;border-radius:22px}
.modal-head small{color:#047857}
.permission-list label{border-color:#e2e8f0}
@media(max-width:1050px){.sidebar{width:224px;flex-basis:224px}.main-content{padding:24px}.login-card{padding:29px 24px}}
@media(max-width:720px){.login-layout{grid-template-columns:1fr}.login-hero{min-height:205px;padding:25px}.login-hero h1{font-size:29px;margin:14px 0 0}.login-panel{padding:20px}.login-card{box-sizing:border-box;width:100%;padding:27px 22px}.sidebar{width:100%;height:auto;padding:15px}.side-brand{padding:4px 2px 10px}.sidebar nav{display:flex;overflow-x:auto}.sidebar nav button{white-space:nowrap}.side-label{display:none}.side-user{margin-top:10px;display:flex;align-items:center;gap:10px}.side-user button{width:auto;margin-left:auto}.topbar{padding:14px}.main-content{padding:17px}}
@media print{.shell,.login-layout{display:none!important}.sidebar,.login-hero,.login-panel{box-shadow:none!important}}

/* Phiếu PO nhiều mặt hàng và bộ lọc báo cáo */
.po-line{margin:12px 0;padding:16px;border:1px solid #cbd5e1;border-radius:14px;background:#f8fafc}
.po-line-head,.po-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.po-line-head strong{font-weight:750;color:#065f46}.po-line-head button{padding:5px 10px;color:#be123c}
.po-line-grid{display:grid;grid-template-columns:minmax(170px,2fr) 100px 100px 145px;gap:10px}
.po-line-grid .po-product{grid-column:span 2}.po-line-grid label{margin:0}.po-line-grid input{width:100%}
.po-line-total{font-size:11px;color:#64748b;text-align:right;align-self:end;padding:8px}.po-line-total b{font-size:14px;color:#065f46}
.po-bottom{padding:12px 4px;margin-top:10px}.po-bottom strong{font-size:16px;color:#065f46}
.editor{max-width:min(95vw,940px)!important;width:940px}.editor #editFields{max-height:67vh;overflow-y:auto;padding:2px 4px}
.secret-controls{display:flex;gap:8px;margin-top:6px}.secret-controls button{padding:5px 9px;font-size:11px}.secret-input{width:100%}
.report-filter{padding:20px}.report-controls{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.report-controls>label{min-width:135px;flex:1}
.report-controls input,.report-controls select{width:100%}.report-controls>button{height:40px}
.report-results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px}.report-results-head h2{font-size:16px}
@media(max-width:720px){.po-line-grid{grid-template-columns:1fr 1fr}.po-line-grid .po-product{grid-column:span 2}.editor{max-width:99vw!important}.report-controls>label{flex-basis:40%}}

.po-last-price{font-weight:600;font-size:11px;border:0;background:none;color:#047857;padding:4px 0;text-align:left;text-decoration:underline;cursor:pointer;box-shadow:none}

/* v1.4: search-as-you-type catalog picker for each PO line */
.po-line input[type="search"]{background:#fff;border:1px solid #94a3b8;min-height:41px}
.po-line input[type="search"]:focus{outline:2px solid #047857;outline-offset:1px}
.po-match-count{display:block;min-height:17px;font-size:11px;color:#64748b;margin-top:5px}
.po-line select[name="catalogId[]"]{min-height:43px;background:#fff}


/* v1.5: chỉnh nhanh trạng thái PO ngay tại nhãn trên danh sách */
.po-status-quick{appearance:auto;cursor:pointer;min-width:132px;width:auto;max-width:180px;padding:8px 10px;border-radius:9px;border:1px solid #cbd5e1;background:#f1f5f9;color:#334155;font-size:12px;font-weight:750;line-height:1.3;box-shadow:none}
.po-status-quick:hover{border-color:#059669;box-shadow:0 0 0 2px #a7f3d0}
.po-status-quick:focus-visible{outline:2px solid #059669;outline-offset:2px}
.po-status-quick:disabled{cursor:wait;opacity:.6}
.po-status-quick.requested{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.po-status-quick.ordered{background:#fffbeb;color:#92400e;border-color:#fde68a}
.po-status-quick.draft{background:#f1f5f9;color:#475569}
.badge.received{background:#dcfce7;color:#166534}
.badge.requested{background:#dbeafe;color:#1d4ed8}


/* v1.10 — Bố cục PO cố định: các ô Số lượng, Đơn vị và Đơn giá cùng hàng. */
.po-line-grid {
 display:grid;
 grid-template-columns:minmax(0,2fr) minmax(0,1.35fr) minmax(0,1.1fr) minmax(150px,1.55fr);
 grid-template-areas:
  "category category search search"
  "catalog catalog name name"
  "quantity quantity unit price"
  "note note total total";
 gap:14px 12px;
 align-items:start;
}
.po-line-grid > .po-field-category{grid-area:category}
.po-line-grid > .po-field-search{grid-area:search}
.po-line-grid > .po-field-catalog{grid-area:catalog}
.po-line-grid > .po-field-name{grid-area:name}
.po-line-grid > .po-field-quantity{grid-area:quantity}
.po-line-grid > .po-field-unit{grid-area:unit}
.po-line-grid > .po-field-price{grid-area:price}
.po-line-grid > .po-field-note{grid-area:note}
.po-line-grid > .po-line-total{grid-area:total}
.po-line-grid > label{min-width:0;margin:0;display:block}
.po-line-grid > label input,.po-line-grid > label select{width:100%;max-width:100%;margin-top:7px}
.po-field-quantity .po-label-title,.po-field-unit .po-label-title,.po-field-price .po-label-title{
 display:flex;align-items:flex-end;min-height:34px;line-height:1.35;
}
.po-field-price .po-last-price{display:inline-block;min-height:0;width:auto;margin-top:6px;line-height:1.35;padding:2px 0}
.po-line-total{align-self:end;margin:0;padding:8px 10px;min-height:66px}
@media(max-width:850px){
 .po-line-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:
  "category category" "search search" "catalog catalog" "name name"
  "quantity quantity" "unit price" "note note" "total total";gap:12px}
 .po-field-quantity .po-label-title,.po-field-unit .po-label-title,.po-field-price .po-label-title{min-height:34px}
 .po-line-total{text-align:right}
}
@media(max-width:430px){
 .po-line{padding:12px}
 .po-line-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
 .po-line-grid input,.po-line-grid select{padding:10px 8px}
}

/* v1.12 — Mở khóa hai màn hình: form ngắn, sau đó mở hồ sơ bảo mật độc lập. */
.vault-unlock-dialog{width:min(96vw,510px);max-width:510px;padding:26px 28px;overflow-y:auto;max-height:92vh}
.vault-unlock-dialog h2{font-size:21px}
.vault-stage{max-width:100%}
.vault-asset-pill{background:#ecfdf5;color:#065f46;border:1px solid #bbf7d0;border-radius:11px;padding:11px 13px;margin-bottom:17px;font-size:13px;font-weight:800;overflow-wrap:anywhere}
.vault-password-wrap{display:flex;align-items:center;gap:7px}.vault-password-wrap input{flex:1}.vault-icon-btn{white-space:nowrap}
.vault-unlock-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}.vault-unlock-footer .modal-actions{margin:0}
.vault-unlock-footer .link-button{padding:6px 0;background:transparent;border:0;font-size:12px;color:#047857;text-align:left;text-decoration:underline}
.vault-editor-dialog{display:flex;flex-direction:column;width:min(96vw,860px)!important;max-width:860px!important;max-height:90vh;padding:0;overflow:hidden}
.vault-editor-dialog:not([open]){display:none}
.vault-editor-dialog .modal-head{padding:22px 28px 14px;margin:0;border-bottom:1px solid #e2e8f0;flex:none}
.vault-editor-dialog .modal-head .help{margin:6px 0 0;color:#64748b}
.vault-editor-dialog #secretForm{display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden}
.vault-editor-dialog .vault-editor-body{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:20px 28px;flex:1}
.vault-editor-dialog #secretError{padding:0 28px}
.vault-editor-dialog .vault-editor-actions{margin:0;padding:15px 28px 18px;border-top:1px solid #e2e8f0;background:#fff;flex:none;flex-wrap:wrap}
.vault-editor-note{font-size:12px;line-height:1.6;color:#64748b;background:#f8fafc;border-radius:10px;border:1px solid #e2e8f0;padding:12px;margin-top:10px}
.vault-rotate-box{background:#f8fafc;border:1px solid #cbd5e1;border-radius:12px;padding:16px;margin-top:16px}
.vault-rotate-box h3{margin:0 0 8px}.vault-rotate-box .help{margin:0 0 12px}
.danger-button{background:#b91c1c;border-color:#b91c1c;color:#fff}.danger-button:hover{background:#991b1b;color:#fff}
#vaultResetForm{margin-top:14px}#vaultResetForm .two-cols{gap:10px}
#vaultResetAdvice{line-height:1.7}
@media(max-width:720px){.vault-unlock-dialog{width:min(97vw,510px);padding:18px 17px}.vault-unlock-footer{align-items:flex-start;flex-direction:column}.vault-unlock-footer .modal-actions{width:100%;justify-content:flex-end}.vault-editor-dialog{width:99vw!important;max-height:94vh}.vault-editor-dialog .modal-head{padding:17px 16px}.vault-editor-dialog .vault-editor-body{padding:16px}.vault-editor-dialog .vault-editor-actions{padding:14px;gap:7px}.vault-editor-dialog .vault-editor-actions button{font-size:12px;padding:9px 11px}}


/* v1.13 — Cuộn dọc/ngang ngay trong danh sách, áp dụng CNTT, PO, kho, báo cáo, quản trị. */
#pageContent{min-width:0}
#pageContent .panel{min-width:0}
#pageContent .table-wrap{
 position:relative;max-width:100%;max-height:min(61vh,690px);overflow:auto;
 overscroll-behavior:contain;scrollbar-width:auto;scrollbar-color:#94a3b8 #eef2f7;
}
#pageContent .table-wrap:focus-visible{outline:2px solid #059669;outline-offset:-2px}
#pageContent .table-wrap::-webkit-scrollbar{height:12px;width:12px}
#pageContent .table-wrap::-webkit-scrollbar-track{background:#eef2f7}
#pageContent .table-wrap::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:9px;border:2px solid #eef2f7}
#pageContent .table-wrap>table{min-width:760px;border-collapse:separate;border-spacing:0}
#pageContent .table-wrap>table thead th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 #e2e8f0;background:#f8fafc}
#pageContent .table-wrap>table tbody tr:hover{background:#f8fafc}
.stock-alert-panel{margin-top:24px}
.stock-alert-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:22px 22px 12px}
.stock-alert-head h2{margin:8px 0 9px;font-size:20px;color:#0f172a}
.stock-alert-head p{margin:0;max-width:850px}
.stock-alert-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 22px 20px}
.stock-alert-stats>div{border:1px solid #e2e8f0;background:#f8fafc;border-radius:12px;padding:12px 16px}
.stock-alert-stats small{display:block;color:#64748b;margin-bottom:6px}
.stock-alert-stats strong{font-size:23px;color:#065f46}
.stock-alert-stats .stock-out{color:#b91c1c}
.stock-alert-stats .stock-low{color:#b45309}
.stock-chip{border-radius:7px;font-size:11px;font-weight:750;padding:5px 8px;white-space:nowrap}
.stock-chip.out{background:#fee2e2;color:#991b1b}.stock-chip.low{background:#fef3c7;color:#92400e}
.stock-ok{margin:0 22px 22px;padding:16px;background:#ecfdf5;color:#065f46;border-radius:10px}
.stock-load-warning{margin:0 22px 14px;padding:12px;border-radius:9px;background:#fff7ed;color:#9a3412}
.stock-alert-panel .table-wrap{margin-top:2px}
@media(max-width:720px){#pageContent .table-wrap{max-height:min(58vh,480px)}.stock-alert-stats{gap:6px;padding:12px}.stock-alert-stats>div{padding:10px}.stock-alert-head{padding:17px}.stock-alert-head h2{font-size:17px}}
@media print{#pageContent .table-wrap{max-height:none!important;overflow:visible!important}#pageContent .table-wrap>table{min-width:0!important}}

/* v1.14 */
.asset-link{background:transparent!important;border:0!important;color:#047857!important;text-decoration:underline;text-underline-offset:3px;font-weight:800;cursor:pointer;padding:2px 0;text-align:left}.asset-link:hover{color:#065f46!important}.permission-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}.permission-group{border:1px solid #dfe8e5;border-radius:10px;padding:12px;background:#fbfdfc}.permission-group h3{margin:0 0 9px;font-size:13px;color:#065f46}.permission-group .permission-list{display:flex;flex-direction:column;gap:6px}.permission-group label{font-size:13px}.table-wrap{overscroll-behavior:contain}

/* v1.15: kiểm kê nhiều mặt hàng, thanh cuộn độc lập và thao tác chốt an toàn */
.audit-table{max-height:min(55vh,520px);overflow:auto;overscroll-behavior:contain;border:1px solid #e2e8f0;border-radius:10px;margin:10px 0 16px}
.audit-table table{min-width:820px}
.audit-table thead th{position:sticky;top:0;z-index:2;background:#f8fafc}
.audit-table input,.audit-table select{padding:7px 8px;font-size:12px;margin:0}
.audit-table td{padding:8px 10px;max-width:320px}
.stocktake-pagination{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:12px;border-radius:9px;background:#f1f5f9;padding:9px}
.stocktake-pagination button{padding:7px 10px}
@media(max-width:720px){.audit-table{max-height:52vh}.audit-table table{min-width:760px}}

/* v1.15: keep Save controls visible while editing long permission grids */
#editDialog .modal-actions{position:sticky;bottom:-28px;z-index:5;background:#fff;border-top:1px solid #e2e8f0;padding:13px 4px 5px;box-shadow:0 -8px 16px #fff9}
#editDialog .form-error:not(:empty){position:sticky;bottom:52px;background:#fff4f2;padding:8px;border-radius:8px;z-index:6}
.table-more{margin:10px 16px 18px;background:#f0fdf4;color:#065f46;border-color:#a7f3d0}
@media(max-width:720px){#editDialog .modal-actions{bottom:-18px}}

/* v1.15.1: chẩn đoán quyền không chứa mật khẩu/token */
.vault-check-button{margin-top:7px;border:1px solid var(--border,#cbd5e1);background:#f8fafc;padding:10px 14px;border-radius:9px;cursor:pointer;font-weight:650}
.vault-diagnostics{white-space:pre-wrap;border-left:3px solid #2563eb;background:#eff6ff;color:#1e3a8a;padding:11px 13px;border-radius:5px;font-size:13px;margin:8px 0;line-height:1.5}

/* v1.16 - Booking room + car requests */
.schedule-filter{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;padding:18px 20px;border-bottom:1px solid #e2e8f0}
.schedule-filter label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:#334155}
.schedule-filter input{width:188px;padding:9px 12px;margin:0}
.schedule-filter button{white-space:nowrap}
.schedule-filter small{font-size:12px;color:#64748b;margin-left:auto}
.schedule-table{min-width:930px}
.schedule-table td{vertical-align:middle}
.schedule-table td small{display:block;font-size:11px;color:#64748b;margin-top:5px}
.schedule-table .badge{white-space:nowrap}
.schedule-table .badge.pending{background:#fef3c7;color:#92400e}
.schedule-table .badge.approved{background:#dcfce7;color:#166534}
.schedule-table .badge.cancelled,.schedule-table .badge.rejected{background:#fee2e2;color:#991b1b}
.schedule-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.schedule-details>div{padding:12px 14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;overflow-wrap:anywhere}
.schedule-details small{display:block;color:#64748b;font-size:12px;margin-bottom:6px}
.schedule-details strong{font-size:14px;color:#0f172a}
.schedule-resource{padding:12px 20px 22px}
.schedule-resource .toolbar-actions{margin:5px 0 18px;display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:750px){.schedule-filter small{margin-left:0;width:100%}.schedule-details{grid-template-columns:1fr}.schedule-table{min-width:830px}}
/* v1.17: booking/car management forms — stable two-column layout */
.schedule-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-height:64vh;overflow-y:auto;padding:4px 6px 14px}.schedule-form-grid>label{display:flex;flex-direction:column;min-width:0;gap:7px;font-size:13px;font-weight:650;color:#3d555e}.schedule-form-grid>label input,.schedule-form-grid>label textarea,.schedule-form-grid>label select{box-sizing:border-box;display:block;width:100%;min-width:0;max-width:100%;font-size:13px}.schedule-form-grid .wide,.schedule-full{grid-column:1/-1}.schedule-service-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}.schedule-check{display:flex;align-items:center;gap:8px;background:#f4faf7;padding:9px 12px;border-radius:9px;font-weight:600;font-size:12px}.schedule-check input{width:16px!important;min-width:16px!important}.schedule-form-grid .schedule-full>b{font-size:13px;color:#315c4d}
@media(max-width:720px){.schedule-form-grid{grid-template-columns:minmax(0,1fr);max-height:66vh}}

.login-public-shortcuts{margin:15px 0;display:grid;grid-template-columns:1fr;gap:8px}.login-public-shortcuts a{display:block;border:1px solid #cce4d9;border-radius:9px;padding:11px 12px;color:#146b50;background:#f5fbf8;font-size:12px;font-weight:700;text-align:center}.login-public-shortcuts a:hover{background:#dff5e9}

/* v1.21: scheduling toolbar and history button align consistently. */
.schedule-filter{align-items:center;justify-content:space-between;row-gap:10px}
.schedule-filter-actions{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;min-width:0}
.schedule-filter-actions label{min-width:0}
.schedule-filter-actions button.schedule-reload{align-self:flex-end;min-height:41px;line-height:1.25;padding:9px 14px;white-space:nowrap;font:inherit;font-weight:700;letter-spacing:0}
.schedule-filter small{margin-left:0;flex:1 1 210px;text-align:right;align-self:center}
.inventory-history-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
#loadInventoryHistory{font-family:'Be Vietnam Pro',Inter,Arial,sans-serif!important;font-size:12px;font-weight:700;line-height:1.4;letter-spacing:0;white-space:nowrap;min-height:36px;align-self:center;padding:8px 14px;border-radius:9px}
@media(max-width:640px){.schedule-filter{align-items:stretch}.schedule-filter-actions{width:100%}.schedule-filter small{text-align:left;flex-basis:100%}}
/* v1.22 – month/week/day scheduling overview for booking and car administrators */
.schedule-view-tabs{display:flex;gap:3px;border-radius:10px;background:#eef4f1;padding:4px;align-self:center}
.schedule-view-tabs button{border:0;background:transparent;border-radius:7px;padding:9px 12px;min-width:56px;color:#48675c;font-weight:700;font-size:12px}
.schedule-view-tabs button.active{background:#fff;color:#077352;box-shadow:0 2px 7px #15392a20}
.schedule-calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:20px 0 12px}
.schedule-calendar-heading h3{font-size:16px;color:#21483d;margin:0}
.schedule-calendar-heading span{font-size:11px;color:#688078;display:flex;align-items:center;gap:6px}
.schedule-calendar-heading i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:7px}
.schedule-calendar-heading .approved-dot{background:#16a073}.schedule-calendar-heading .pending-dot{background:#d8a540}
.schedule-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:20px;min-width:0}
.schedule-calendar-weekday{text-align:center;font-size:11px;padding:7px 2px;color:#6c857c}
.schedule-calendar-cell{border:1px solid #dfebe6;border-radius:10px;background:#fff;min-height:125px;padding:9px 7px;text-align:left;display:flex;flex-direction:column;align-items:stretch;gap:5px;overflow:hidden;min-width:0;color:#183d32;cursor:pointer}
.schedule-calendar-cell:hover,.schedule-calendar-cell:focus-visible{outline:2px solid #8ad1af;outline-offset:0;background:#f5fbf8}
.schedule-calendar-cell.today{border-color:#24946c;background:#f1fbf5}
.schedule-calendar-cell>strong{font-size:13px}.schedule-calendar-cell .schedule-day-count{font-size:10px;color:#688078}
.schedule-calendar-cell .schedule-slot{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid #16a073;border-radius:4px;background:#eaf8f1;padding:4px;font-size:10px;color:#15694c}
.schedule-calendar-cell .schedule-slot.pending{border-left-color:#d8a540;background:#fffae8;color:#956414}
.schedule-calendar-cell .schedule-slot.rejected,.schedule-calendar-cell .schedule-slot.cancelled{border-left-color:#b9c0c4;background:#f0f3f3;color:#89969b}
.schedule-calendar-cell small{font-size:10px;color:#83968f}
.schedule-calendar-empty{min-height:70px}
.schedule-calendar-grid+.table-wrap{margin-top:20px}
@media(max-width:900px){.schedule-calendar-cell{min-height:96px;padding:6px 4px}.schedule-calendar-cell .schedule-slot{font-size:9px}}
@media(max-width:640px){.schedule-calendar-grid{gap:3px}.schedule-calendar-cell{min-height:82px;padding:5px 3px}.schedule-calendar-cell .schedule-day-count{font-size:8px}.schedule-calendar-cell .schedule-slot{font-size:8px;white-space:normal;line-height:1.25;max-height:28px}.schedule-view-tabs{width:100%;justify-content:space-around}.schedule-calendar-heading span{font-size:10px}}

.schedule-calendar-grid.schedule-single-day{grid-template-columns:minmax(0,1fr)}.schedule-single-day .schedule-calendar-weekday{display:none}.schedule-calendar-grid.schedule-single-day .schedule-calendar-cell{min-height:95px}

/* v1.26 — shared accessibility improvements (admin functionality unchanged) */
#navigation button:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #74cbaa;outline-offset:2px}
#pageContent{min-width:0}table{max-width:100%}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* v2.0: Không hiện tiêu đề Quản trị khi thiếu cả hai quyền quản lý. */
.admin-label[hidden], #navigation [data-page][hidden]{display:none!important}
.access-refresh{display:block;width:100%;margin:8px 0 4px;border:1px solid #d9e5e2;border-radius:8px;padding:8px;background:#f6fbf8;color:#065f46;cursor:pointer;font:inherit;font-size:12px}
.access-refresh:hover{background:#e4f5eb}

/* YURA 3.0 — IT workspace */
.it-tabs{display:flex;flex-wrap:wrap;gap:9px;padding:6px 0 19px;margin-top:-8px}
.it-tabs button{background:#fff;border:1px solid #d8e2ed;color:#445970;font-weight:750;min-height:42px}
.it-tabs button.active{background:#0f766e;border-color:#0f766e;color:#fff}
.it-tabs button:focus-visible{outline:3px solid #6dd9c7}
.it-subtitle{padding:17px 20px 0;color:#586b83;font-size:12px}
.it-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.it-kpi{background:#fff;border:1px solid #e2e8f0;border-radius:13px;padding:16px 19px}
.it-kpi small{color:#74849b;font-size:12px}.it-kpi strong{display:block;font-size:24px;margin-top:7px}
.it-note{font-size:12px;color:#64748b;padding:12px 20px}
.it-toolbar{display:flex;flex-wrap:wrap;gap:10px;padding:16px 18px;align-items:center}
.it-toolbar input{flex:1;min-width:180px}.it-toolbar select{min-width:160px;max-width:260px}
.it-toolbar .primary{margin-left:auto}
@media(max-width:720px){.it-kpis{grid-template-columns:1fr}.it-tabs{flex-wrap:nowrap;overflow:auto}.it-tabs button{white-space:nowrap}.it-toolbar input,.it-toolbar select{width:100%;max-width:100%}.it-toolbar .primary{margin:0}}
/* v3.1 — compact searchable stock issuance and seven IT sub-tabs */
.bulk-issue-list{margin:15px 0 2px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bulk-issue-line{border:1px solid #d9e4ed;background:#f8fbfd;padding:12px;border-radius:12px;display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:10px;align-items:end}
.bulk-issue-line label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:650;min-width:0}
.bulk-issue-line select,.bulk-issue-line input{min-width:0;width:100%;height:40px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;padding:8px;box-sizing:border-box}
.audit-search{display:flex;flex-direction:column;gap:8px;margin:12px 0 8px;font-size:12px;font-weight:650;max-width:450px}
.audit-search input{min-height:42px}
.it-tabs{gap:6px;padding-bottom:14px;flex-wrap:wrap}
.it-tabs button{font-size:12px;padding:10px 13px;border-radius:10px;min-height:40px}
@media(max-width:800px){.bulk-issue-list{grid-template-columns:1fr}.it-tabs{flex-wrap:nowrap;overflow:auto;scroll-snap-type:x proximity}.it-tabs button{white-space:nowrap;scroll-snap-align:start}}

/* v3.1.8 — Dynamic multi-SKU issuance for VPP, necessities and uniforms. */
.bulk-issue-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:14px 0 8px}
.bulk-issue-actions button{padding:10px 14px;background:#ecfdf5;color:#065f46;border-color:#86efac}
.bulk-issue-actions span{font-size:12px;color:#64748b}
.bulk-issue-line{grid-template-columns:minmax(0,1fr) 104px 32px}
.bulk-issue-product input[type="search"]{margin-bottom:6px}
.bulk-issue-remove{padding:6px 0;align-self:end;height:40px;color:#be123c;background:#fff1f2;border-color:#fecaca}
.bulk-issue-remove:hover{background:#ffe4e6}
@media(max-width:800px){.bulk-issue-line{grid-template-columns:minmax(0,1fr) 92px 32px}}

/* v3.2.4: search within IT asset transfer and service dialogs. */
.asset-picker{position:relative;min-width:0}
.asset-picker label{margin-bottom:6px}
.asset-picker label input{margin-bottom:0}
.asset-picker-results{border:1px solid #cddbf1;background:#fff;border-radius:10px;margin:5px 0 8px;box-shadow:0 8px 18px #12345b12;max-height:240px;overflow-y:auto;overscroll-behavior:contain}
.asset-picker-option{display:block;width:100%;border:0;border-bottom:1px solid #eef2f7;border-radius:0;text-align:left;padding:10px 12px;font-weight:500;white-space:normal;background:#fff}
.asset-picker-option strong{display:block;font-size:13px;color:#193b68;overflow-wrap:anywhere}
.asset-picker-option small{display:block;color:#72839b;font-size:11px;font-weight:450;margin-top:3px;overflow-wrap:anywhere}
.asset-picker-option:hover,.asset-picker-option.active,.asset-picker-option:focus-visible{background:#edf5ff;outline:2px solid #c6ddff;outline-offset:-2px}
.asset-picker-count,.asset-picker-empty{font-size:11px;color:#657b96;padding:10px 12px}
.asset-picker-info{font-size:11px;color:#687c98;line-height:1.65;margin-top:8px;overflow-wrap:anywhere}
.asset-picker-info.chosen{background:#eaf8f0;color:#176346;border:1px solid #c5e8d3;padding:9px 11px;border-radius:8px}
@media(max-width:720px){.asset-picker-results{max-height:210px}.asset-picker-option{padding:12px}}

/* v3.2.6 — Batch picker works consistently for VPP, necessities and uniforms. */
.bulk-picker{padding:15px;margin:8px 0 16px;border:1px solid #b9dcd3;border-radius:13px;background:#f6fcfa}
.bulk-picker[hidden]{display:none!important}
.bulk-picker-header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.bulk-picker-header strong{font-size:14px;color:#065f46}
.bulk-picker-header button{min-width:36px;height:36px}
.bulk-picker-search{display:flex;flex-direction:column;gap:7px;margin:10px 0;font-size:12px;font-weight:700}
.bulk-picker-search input{padding:11px;border:1px solid #adcec6;border-radius:8px;width:100%;box-sizing:border-box;background:white}
.bulk-picker-results{max-height:265px;overflow-y:auto;border:1px solid #d3e3df;border-radius:10px;background:#fff}
.bulk-picker-option{display:flex;align-items:flex-start;gap:12px!important;padding:11px 13px;cursor:pointer;border-bottom:1px solid #e7efed;font-size:12px}
.bulk-picker-option:last-child{border-bottom:0}
.bulk-picker-option:hover{background:#f4fbf8}
.bulk-picker-option>input{width:18px!important;height:18px!important;min-width:18px;margin:1px 0 0}
.bulk-picker-option strong{font-size:12px;color:#193b51}
.bulk-picker-option small,.bulk-issue-meta{font-size:11px;color:#64748b;line-height:1.4}
.bulk-picker-option small{display:block;margin-top:4px}
.bulk-picker-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:10px}
.bulk-picker-actions button{padding:9px 12px;white-space:normal}
.bulk-issue-product .bulk-issue-meta{display:block;margin-top:7px}
@media(max-width:720px){.bulk-picker{padding:11px}.bulk-picker-results{max-height:240px}.bulk-picker-actions button{flex:1}}


/* YURA v3.5 — Căn giữa tên đơn vị chính xác theo chiều ngang khung logo. */
.login-hero .hero-logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  align-self:flex-start;
  width:220px;
  max-width:100%;
  text-align:center;
}
.login-hero .hero-logo .yura-logo-panel{
  display:flex;
  width:100%;
}
.login-hero .hero-logo small{
  display:block;
  width:100%;
  margin-top:10px;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.12em;
  line-height:1.5;
  text-align:center;
  white-space:nowrap;
}
@media(max-width:720px){
  .login-hero .hero-logo{width:165px;}
  .login-hero .hero-logo small{font-size:8px;margin-top:6px;letter-spacing:0.08em;}
}
/* ============================================================
   YURA Tổng vụ v3.5.4 | Unified interface system
   Visual-only refinement used by all management modules.
   ============================================================ */
:root{--y-bg:#f3f7f8;--y-panel:#fff;--y-ink:#14313c;--y-muted:#6c808a;--y-line:#dbe7e8;--y-teal:#087e70;--y-deep:#0b544b;--y-soft:#e8f7f3;--y-shadow:0 7px 26px rgba(16,63,67,.06)}
body,.shell,.workarea{background:var(--y-bg);color:var(--y-ink)}
.workarea{background:radial-gradient(ellipse 850px 340px at 92% -110px,#d8f2e9 0,transparent 65%),var(--y-bg)}
.sidebar{background:linear-gradient(180deg,#ffffff 0%,#fcfefe 100%);border-right:1px solid #dce9e7;box-shadow:5px 0 32px rgba(10,72,69,.035)}
.sidebar nav button{border-radius:12px;min-height:44px;transition:background .18s,border-color .18s,transform .18s}
.sidebar nav button:hover:not(.active){background:#eaf8f2;transform:translateX(2px)}
.sidebar nav button.active{background:linear-gradient(113deg,#076958,#0b8a74);box-shadow:0 6px 16px rgba(8,105,87,.23)}
.side-brand{border-bottom-color:#e7efed}
.topbar{min-height:75px;border-bottom:1px solid #e2ebeb;background:#ffffffed;backdrop-filter:blur(12px)}
.top-eyebrow{color:#068676;letter-spacing:1.25px}
.topbar strong{font-size:15px;letter-spacing:-.25px}
.main-content{max-width:1580px;padding:clamp(17px,2.4vw,34px)}
.page-title{margin-bottom:20px}
.page-title h1{font-size:clamp(22px,2.1vw,30px);font-weight:800;letter-spacing:-.7px}
.page-title p{color:#718490;line-height:1.7}
.stat,.panel,.dashboard-card{border:1px solid var(--y-line);border-radius:19px;background:var(--y-panel);box-shadow:var(--y-shadow)}
.stat,.dashboard-card{transition:transform .18s,border-color .18s,box-shadow .18s}
.stat:hover,.dashboard-card:hover{transform:translateY(-2px);border-color:#acd7cb;box-shadow:0 13px 30px rgba(9,83,72,.105)}
.stat{position:relative;overflow:hidden;padding:23px}
.stat:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#0b7364,#8cdcc2)}
.stat small{color:#738993;font-weight:650}
.stat strong{color:#173b40;font-variant-numeric:tabular-nums}
.panel{overflow:hidden}
.panel-title{color:#183e47;font-weight:800;font-size:14px;letter-spacing:-.2px;border-bottom:1px solid #eaf0ef;background:linear-gradient(90deg,#fbfefe 0%,#fff 85%)}
.dashboard-card{min-height:145px;padding:23px;position:relative;overflow:hidden}
.dashboard-card h3{color:#173d43;font-size:16px;font-weight:800}
.dashboard-card p{color:#718490;line-height:1.8}
.toolbar{gap:10px;align-items:center;padding:18px 21px;background:#fcfefd;border-bottom:1px solid #edf3f2}
.toolbar :is(input,select){background:#fff;min-height:43px}
.toolbar input{flex:1 1 200px}
#pageContent :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-radius:11px;border-color:#cbdedd;transition:border-color .15s,box-shadow .15s}
#pageContent :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{border-color:#0c927c;outline:0;box-shadow:0 0 0 3px #0c927c20}
#pageContent :is(button,.primary){transition:transform .16s,box-shadow .16s,background .16s,border-color .16s}
#pageContent button:hover:not(:disabled){transform:translateY(-1px)}
button.primary,#pageContent button.primary{background:linear-gradient(120deg,#08745f,#0b9278);border-color:#087d69;color:white;box-shadow:0 5px 11px #087c6425}
button.primary:hover,#pageContent button.primary:hover{background:linear-gradient(120deg,#076452,#087968);box-shadow:0 8px 17px #087c6430}
button:focus-visible,.sidebar nav button:focus-visible{outline:3px solid #77d4b2;outline-offset:2px}
button:disabled{opacity:.52!important;transform:none!important;box-shadow:none!important}
#pageContent .table-wrap{border:1px solid #e4eeee;border-radius:14px;margin:0 18px 14px;max-width:calc(100% - 36px)}
#pageContent .table-wrap>table thead th{background:#eff7f5;color:#567479;font-weight:800;font-size:10px;letter-spacing:.5px}
#pageContent .table-wrap>table tbody tr:nth-child(2n){background:#fcfefd}
#pageContent .table-wrap>table tbody tr:hover{background:#edf9f5}
#pageContent .table-wrap>table td{line-height:1.55;color:#26424d}
.badge{border-radius:100px;padding:6px 9px;font-weight:750}
.chip{border:1px solid #cfe7df;background:#ecfaf5;color:#09745c}
.toast{border-color:#b4e5d4;background:#effbf5;color:#0e6956}
dialog{border:1px solid #e0ebea;border-radius:23px;box-shadow:0 30px 85px #123b3d44;padding:26px}
dialog::backdrop{background:#102f3b7d;backdrop-filter:blur(3px)}
.modal-head{padding-bottom:13px;border-bottom:1px solid #eaf1f0}
.modal-head h2{color:#133e44;font-weight:800}
.modal-head small,.section-subhead{color:#0b806d}
.detail-row{padding:8px 0;border-color:#e7f0ee}
.detail-row b{color:#19464a}
.config-table{border-radius:12px}
.footer{color:#83969a;letter-spacing:.75px}
/* Warehouse-owned physical checkpoint area */
.it-stocktake-card{margin:0 0 18px;padding:23px;border:1px solid #a8d9cd;border-radius:19px;background:linear-gradient(126deg,#f5fdfa,#fff 70%);box-shadow:0 12px 28px #09685910}
.it-stocktake-card[hidden]{display:none!important}
.it-stocktake-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}
.it-stocktake-head h3{font-size:20px;font-weight:800;color:#0e594d;margin:7px 0 8px;letter-spacing:-.45px}
.it-stocktake-head p{font-size:12px;color:#59767b;line-height:1.85;margin:0;max-width:920px}
.it-eyebrow{color:#0b8772;letter-spacing:1.3px;font-size:10px;font-weight:850}
#itStocktakeClose{min-width:39px;min-height:39px;padding:5px;flex:none}
.it-stocktake-grid{display:grid;grid-template-columns:minmax(210px,1.5fr) minmax(160px,.85fr) minmax(200px,1fr);gap:14px;align-items:end}
.it-stocktake-grid label{margin:0;display:block;font-size:12px;font-weight:750;color:#335b60}
.it-stocktake-grid input,.it-stocktake-grid select{margin-top:9px;width:100%;min-height:46px;background:#fff}
.it-stocktake-current{min-height:82px;display:flex;flex-direction:column;justify-content:center;padding:11px 15px;background:#edf9f4;border:1px solid #c9eadc;border-radius:12px}
.it-stocktake-current strong{font-size:25px;line-height:1.3;color:#087058;font-variant-numeric:tabular-nums}
.it-stocktake-current small{font-size:10px;color:#5b7d73;line-height:1.4}
.it-stocktake-status{font-size:12px;color:#47666a;border:1px solid #dfebe6;background:#fff;border-radius:10px;padding:13px 14px;margin:17px 0;line-height:1.8}
.it-stocktake-actions{display:flex;flex-wrap:wrap;gap:10px}
.it-stocktake-actions button{min-height:43px}
@media(max-width:1000px){.it-stocktake-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.it-stocktake-grid label:first-child{grid-column:1/-1}}
@media(max-width:720px){.workarea{background:#f3f7f8}.sidebar{border-bottom:1px solid #dce9e7}.sidebar nav{scrollbar-width:thin}.sidebar nav button{min-height:41px}.topbar{min-height:60px}.main-content{padding:15px}.stats,.grid-summary{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}.panel,.dashboard-card,.stat{border-radius:15px}.toolbar{padding:13px}.toolbar input,.toolbar select{min-width:0;flex:1 1 100%}#pageContent .table-wrap{margin:0 9px 11px;max-width:calc(100% - 18px)}.it-stocktake-card{padding:17px;border-radius:15px}.it-stocktake-grid{grid-template-columns:1fr}.it-stocktake-grid label:first-child{grid-column:auto}.it-stocktake-actions button{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){.sidebar nav button,.stat,.dashboard-card,#pageContent button{transition:none!important;transform:none!important}}
@media print{.it-stocktake-card{display:none!important}}

/* v3.5.5 · Clear, compact, business-facing navigation */
#navigation .nav-section{margin:18px 12px 6px;padding-top:10px;border-top:1px solid #e8eef0;font-size:9px;letter-spacing:1.05px;color:#64748b;font-weight:850}
#navigation .nav-section:first-child{margin-top:1px;padding-top:0;border:0}
#navigation button{min-height:40px;margin:1px 0;padding:11px 13px;transition:background .15s ease,color .15s ease}
#navigation button.active{font-weight:800}
#navigation .nav-section[hidden]{display:none!important}
@media(max-width:800px){#navigation .nav-section{margin-top:12px}}

/* Kiểm kê linh kiện nhiều mã — đồng nhất với form kiểm kê Văn phòng phẩm */
.it-audit-intro{padding:13px 16px;border-radius:13px;background:linear-gradient(110deg,#e7f7f2,#f7fcfa);border:1px solid #cae9dd;margin-bottom:13px;display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;color:#115e51}
.it-audit-intro b{font-weight:850}.it-audit-intro span{font-size:12px}
.it-audit-searchrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:12px 0}
.it-audit-searchrow label{flex:1 1 220px;min-width:180px;font-size:12px;font-weight:750}
.it-audit-searchrow input{width:100%;margin-top:6px}
.it-audit-searchrow button{flex:0 1 auto;min-height:41px}
.it-audit-progress{font-size:12px;color:#526b71;margin:8px 0}
.it-audit-table{max-height:47vh}.it-audit-table table{min-width:780px}
.it-audit-table td:nth-child(2){min-width:185px}.it-audit-table input[type=number]{width:118px}.it-audit-table td:last-child input{min-width:150px}
@media(max-width:720px){.it-audit-searchrow button{flex:1 1 40%}.it-audit-table{max-height:45vh}}

/* v3.5.6 — company profile, handover form */
.company-profile-head{display:flex;align-items:flex-start;gap:24px;margin-bottom:20px;flex-wrap:wrap}
.company-profile-logo{width:200px;max-width:45vw;max-height:100px;object-fit:contain;object-position:left center;padding:10px;background:white;border:1px solid #e5e7eb;border-radius:14px}
.company-profile-head h2{margin:0 0 8px}.company-profile-head p{margin:5px 0;color:var(--muted,#64748b)}
.handover-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.handover-header h2{margin:0 0 5px}.handover-header p{margin:0}
.handover-form-cols{display:grid;grid-template-columns:minmax(280px,1fr) minmax(340px,1.3fr);gap:18px;align-items:start}
.handover-block{min-width:0;background:#fff;border:1px solid #e3e8ef;border-radius:14px;padding:18px;margin-bottom:12px}
.handover-block h3{font-size:14px;margin:6px 0 13px;color:#123b49}.handover-block h3:not(:first-child){padding-top:11px;border-top:1px solid #edf2f7}
.handover-block small{font-size:11px;font-weight:400;color:#718096}
.handover-block input#handoverSearch{width:100%;margin-bottom:12px}
.handover-block .table-wrap{max-height:400px;overflow:auto}
.handover-block table{font-size:12px;min-width:450px}
.handover-block td input[type=checkbox]{width:17px;height:17px}
.handover-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;border-top:1px solid #edf2f7;padding-top:15px}
@media(max-width:900px){.handover-form-cols{grid-template-columns:1fr}}
@media(max-width:520px){.handover-block{padding:12px}.handover-actions button{flex:1}}

/* v3.5.7 — phiếu xuất cổng CNTT */
.gatepass-kpis{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.gatepass-help{font-size:12px;color:#5e7189;line-height:1.5}
.gatepass-selected{font-size:12px;font-weight:750;color:#0b766b}
.gatepass-reason{border-radius:12px;padding:12px;background:#eef7f5;border:1px solid #c6e4db;margin-bottom:14px}

/* v3.6 – cấu hình vận hành, không hiển thị chi tiết kỹ thuật */
.startup-panel{border:1px solid #d2e6dc;background:linear-gradient(165deg,#fff 0%,#f3faf6 100%)}
.startup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.startup-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px;border:1px solid #d8e7df;border-radius:14px;background:#fff;min-height:138px}
.startup-grid b{font-size:14px;color:#183a34}.startup-grid small{line-height:1.55;color:#61766e}
.startup-grid button{margin-top:auto}.startup-state{font-size:12px;border-radius:20px;font-weight:700;padding:4px 10px}
.startup-state.ready{background:#e0f6e9;color:#126c47}.startup-state.pending{background:#fff0d2;color:#926215}
.handover-form-cols .handover-block{border-radius:16px;border:1px solid #deebe5;box-shadow:0 3px 12px rgba(14,69,48,.04)}
.handover-block h3{color:#16594a}@media(max-width:850px){.startup-grid{grid-template-columns:1fr}}

/* v3.6.1 – clear document number and free-text personnel fields */
.handover-block input[readonly]{background:#f4f8f6;color:#385a50}
.handover-block select[name="drafterMode"], .handover-block select[name="issuedMode"]{min-height:42px}

/* v3.6.2 – Manual lines for handover / gate-pass documents. */
.it-doc-manual{margin-top:16px;padding-top:12px;border-top:1px solid #d8e7e1}
.it-doc-manual-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.it-doc-manual-head h4{font-size:13px;margin:0 0 3px;color:#164b40}
.it-doc-manual-head p{margin:0;font-size:12px}
.handover-block .it-doc-manual-table{min-width:680px;table-layout:auto}
.it-doc-manual-table th{font-size:11px;white-space:nowrap}
.it-doc-manual-table td{vertical-align:middle;padding:5px}
.it-doc-manual-table input{box-sizing:border-box;width:100%;min-width:0;padding:8px 7px;font-size:12px}
.it-doc-manual-table td:first-child{min-width:210px}
.it-doc-manual-table td:nth-child(3){width:62px;min-width:62px}
.it-doc-manual-table td:last-child{width:36px}
.it-doc-manual-table [data-it-remove]{background:#fff0ed;color:#96382a;border:1px solid #f0c0b6;border-radius:6px;min-width:30px;min-height:32px;cursor:pointer}
.it-doc-manual-empty{text-align:center;color:#708080;font-size:12px}

/* v3.7: print/Word handover shares issued stock movements across warehouse modules. */
.issue-handover-toggle{display:flex;align-items:center;gap:8px;margin:10px 0;font-weight:600;color:#1e4c49}.issue-handover-toggle input{width:17px;height:17px;flex:none}.issue-document-note{background:#f0f7f5;border:1px solid #c4dfd6;border-radius:10px;padding:12px 15px;margin-bottom:14px;color:#214e43}.inventory-handover-table{table-layout:fixed}.inventory-handover-table th:nth-child(1),.inventory-handover-table th:nth-child(3),.inventory-handover-table td:nth-child(1),.inventory-handover-table td:nth-child(3),.inventory-handover-table td:nth-child(4){text-align:center}.inventory-handover-table td small{display:block;color:#69777c}

/* v3.7.2 - unified IT document workspace */
.handover-form-cols{grid-template-columns:minmax(310px,0.95fr) minmax(420px,1.05fr);gap:15px}
.handover-block{border:1px solid #dce8e4;border-radius:15px;padding:18px 19px;background:linear-gradient(180deg,#fff 0%,#fdfffe 100%);box-shadow:0 3px 16px rgba(15,62,52,.04)}
.handover-block h3{font-size:13px;letter-spacing:.01em;border-bottom:1px solid #e2eeea;padding:7px 0 10px;margin:0 0 13px;color:#09695b}
.handover-block h3:not(:first-child){margin-top:17px;padding-top:15px}
.handover-block .two-cols{gap:12px}.handover-block label{min-width:0}
.handover-block input,.handover-block select,.handover-block textarea{border-radius:9px;border-color:#d2e4df}
.handover-block input:focus,.handover-block textarea:focus{border-color:#0f8a72;box-shadow:0 0 0 3px rgba(14,138,114,.09)}
.handover-block .table-wrap{border:1px solid #dce8e4;border-radius:10px;max-height:380px}
.handover-block table thead{position:sticky;top:0;background:#edf5f2;z-index:2}
.handover-block table th{white-space:nowrap;font-size:11px;color:#385b51}
.handover-actions{background:#fff;padding:13px 4px 2px;gap:9px}
.handover-actions button{min-width:146px}
@media(max-width:1000px){.handover-form-cols{grid-template-columns:1fr}}
@media(max-width:560px){.handover-block{padding:12px}.handover-block table{min-width:580px}.handover-actions button{min-width:0;flex:1}}

/* v3.7.4 - General Affairs gate pass (manual goods). */
.ga-gate-grid{display:grid;grid-template-columns:minmax(310px,.9fr) minmax(440px,1.1fr);gap:16px;margin-top:14px}
.ga-gate-page .handover-header{margin-bottom:4px}
.ga-gate-items .table-wrap{max-height:none;overflow-x:auto}
.ga-input-table{table-layout:fixed;min-width:610px}
.ga-input-table th{font-size:11px;text-align:center}
.ga-input-table td{padding:7px 5px;vertical-align:middle}
.ga-input-table td:first-child,.ga-input-table td:nth-child(4),.ga-input-table td:last-child{text-align:center}
.ga-input-table input{width:100%;box-sizing:border-box;padding:9px 6px;font-size:12px;min-width:0;border:1px solid #d6e5e0;border-radius:8px}
.ga-input-table [data-remove]{border:1px solid #eac5c1;background:#fff5f4;color:#94433d;border-radius:7px;cursor:pointer;width:30px;height:30px;font-size:19px;line-height:1}
.ga-add-item{border-radius:9px;padding:8px 11px;white-space:nowrap;border:1px solid #80ceb1;background:#effcf7;color:#08785f;font-weight:700;cursor:pointer}
.ga-gate-footnote{font-size:12px;color:#637b75;margin-top:12px}
@media(max-width:1100px){.ga-gate-grid{grid-template-columns:1fr}}
@media(max-width:600px){.ga-gate-page .handover-block{padding:12px}.ga-gate-page .handover-actions{display:flex;gap:9px;flex-wrap:wrap}.ga-gate-page .handover-actions button{min-width:0;flex:1}}

/* v3.7.5 — accessible collapse/expand sidebar */
.topbar-main{display:flex;align-items:center;gap:13px;min-width:0}
.sidebar-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:39px;min-height:39px;padding:7px;background:#f0f8f5;border:1px solid #cce8df;color:#086651;border-radius:10px;font-size:19px}
.sidebar-toggle:hover{background:#dcf4e9}
.sidebar{transition:width .2s ease,flex-basis .2s ease}
#navigation .nav-icon{width:22px;flex:none;text-align:center;font-size:17px}
#navigation .nav-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.nav-collapsed .sidebar{width:76px;flex-basis:76px;padding-left:9px;padding-right:9px;overflow:hidden}
.shell.nav-collapsed .sidebar .side-brand{justify-content:center;padding:6px 0 17px}
.shell.nav-collapsed .sidebar .side-brand>div:last-child,.shell.nav-collapsed .sidebar .nav-section,.shell.nav-collapsed .sidebar .nav-text,.shell.nav-collapsed .sidebar .side-user{display:none!important}
.shell.nav-collapsed .sidebar .brand-symbol.yura-sidebar-logo{width:54px;height:38px;padding:5px}
.shell.nav-collapsed #navigation button{justify-content:center;padding:10px 4px;min-height:43px}
@media(max-width:720px){.shell.nav-collapsed .sidebar{display:none}.sidebar-toggle{min-width:42px;min-height:42px}}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}}


/* v3.7.7 — Compact, high-contrast menu. Keep all page content and permissions unchanged. */
.sidebar{
  width:246px;flex-basis:246px;padding:16px 10px 12px;
  background:#f8fafc;color:#263a4e;border-right:1px solid #d9e2e8;box-shadow:none;
}
.side-brand{gap:9px;padding:4px 5px 15px;border-bottom-color:#e0e8ed}
.side-brand strong{font-size:11.5px;font-weight:700;letter-spacing:.01em;color:#203346}
.side-brand small{font-size:9px;letter-spacing:.055em;color:#326a5f;font-weight:600}
.brand-symbol.yura-sidebar-logo{width:76px;height:39px;padding:5px 7px;box-shadow:none}
#navigation{scrollbar-width:thin;scrollbar-color:#cbd8df transparent}
#navigation .nav-section{
  color:#4b6075;font-size:9.5px;font-weight:700;letter-spacing:.055em;
  margin:11px 10px 5px;padding-top:8px;border-top-color:#e1e9ee;
}
#navigation .nav-section:first-child{margin-top:4px;padding-top:0}
#navigation button{
  width:100%;min-height:35px;margin:1px 0;padding:7px 10px;gap:8px;
  border:1px solid transparent;border-radius:8px;box-shadow:none;
  background:transparent;color:#24384c;font-size:11.5px;font-weight:600;
  line-height:1.35;text-align:left;transform:none;
  transition:background-color .15s,color .15s,border-color .15s;
}
#navigation button .nav-icon{width:19px;flex:0 0 19px;font-size:14px;color:#506879;line-height:1.1}
#navigation button .nav-text{color:inherit;font-weight:600;letter-spacing:0}
#navigation button:hover:not(.active){background:#e8f3ef;color:#17493f;border-color:#d3e6de;transform:none}
#navigation button:hover:not(.active) .nav-icon{color:#17493f}
#navigation button.active{
  background:#11594e;color:#fff;border:1px solid #11594e;
  border-left:3px solid #54c1a0;padding-left:8px;
  box-shadow:none;font-weight:700;
}
#navigation button.active .nav-icon,#navigation button.active .nav-text{color:#fff}
#navigation button:focus-visible{outline:2px solid #167c67;outline-offset:2px}
.sidebar-toggle{min-width:36px;min-height:36px;padding:5px;font-size:16px;
  background:#eef5f3;border-color:#cbdcd6;color:#155a4e;border-radius:8px;box-shadow:none}
.sidebar-toggle:hover{background:#dfeee9}
.side-user{background:#fff;border:1px solid #dde6e9;box-shadow:none;border-radius:10px;padding:10px 9px}
.side-user strong{color:#203346;font-size:11.5px}
.side-user small{color:#425f57;font-size:10px}
.side-user button{color:#273f53;background:#f8fafc;border-color:#cddbe0;font-size:10.5px;font-weight:600;padding:8px 9px}
.side-user button:hover{background:#e8f3ef;color:#17493f;border-color:#bcd9cf}
/* A reduced rail must remain legible and retain clickable targets. */
.shell.nav-collapsed .sidebar{width:68px;flex-basis:68px;padding-left:7px;padding-right:7px}
.shell.nav-collapsed .sidebar .brand-symbol.yura-sidebar-logo{width:48px;height:36px;padding:5px}
.shell.nav-collapsed #navigation button{min-height:39px;padding:8px 3px;justify-content:center}
.shell.nav-collapsed #navigation .nav-icon{width:23px;flex-basis:23px;font-size:17px}
@media(min-width:721px) and (max-width:1050px){.sidebar{width:226px;flex-basis:226px}}
@media(max-width:720px){
  .sidebar{width:100%;height:auto;padding:11px 12px;box-shadow:none}
  .side-brand{padding:4px 0 10px}
  #navigation{display:flex;gap:3px;overflow-x:auto;overflow-y:hidden}
  #navigation button{width:auto;flex:none;min-height:36px;padding:8px 11px;margin:1px 0;white-space:nowrap}
  #navigation .nav-text{white-space:nowrap}
  .side-user{margin-top:9px}
  .shell.nav-collapsed .sidebar{display:none}
}
@media(prefers-reduced-motion:reduce){#navigation button{transition:none}}

/* v3.7.8 — Restore the EXACT v3.7.4 text sizes.
   v3.7.5 wraps nav labels in <span class="nav-text">; legacy generic
   `.sidebar nav button span { font-size:18px }` enlarged those labels.
   Set the size on the inner text span, not only on the button. */
#navigation button .nav-text{
  font-size:12px; /* v3.7.4 .sidebar nav button */
  font-weight:700; /* v3.7.4 .sidebar nav button */
  line-height:1.35;
}
#navigation button.active .nav-text{font-weight:800}
#navigation .nav-section{font-size:9px} /* v3.7.4 */
.side-brand strong{font-size:13px} /* v3.7.4 */
.side-brand small{font-size:10px} /* v3.7.4 */

/* v3.7.13: print-only signature layout selections; compact, accessible controls. */
.stocktake-print-options{display:flex;flex-wrap:wrap;align-items:center;gap:9px 18px;margin:10px 0;padding:10px 12px;border:1px solid #bacac6;border-radius:8px;background:#f7faf9}
.stocktake-print-options legend{padding:0 6px;font-size:12px;font-weight:700;color:#1e5148}
.stocktake-print-options label{display:flex;align-items:center;gap:8px;font-size:12px;color:#2a4540}
.stocktake-print-options select{width:auto;max-width:100%;min-width:230px;padding:6px 8px;font-size:12px}
.stocktake-print-options .stocktake-approver-choice{cursor:pointer;gap:7px}
.stocktake-print-options input[type=checkbox]{width:16px;height:16px;min-width:16px;margin:0;accent-color:#166451}
.stocktake-print-options small{flex:1 0 100%;font-size:11px}

/* v3.8: Small, accessible nested navigation; retain 12px font from v3.7.4. */
#navigation button[data-it-section],#navigation button[data-page^="maintenance"]{padding-left:22px!important;font-size:12px!important;font-weight:550!important;min-height:34px!important}
#navigation .nav-section{font-size:9px!important;margin-top:14px!important}
.side-brand strong{font-size:12px!important}.side-brand small{font-size:9px!important;letter-spacing:0!important;line-height:1.35}
#navigation button[hidden]{display:none!important}


/* v3.8.1 — Approved grouped sidebar layout (matching reference HTML).
   VISUAL ONLY; authorization continues to use allowedPage/itMenuPermitted/Firestore Rules. */
.sidebar{width:255px;flex-basis:255px;padding:14px 12px;background:#fff;border-right:1px solid #dbe6e4}
.side-brand{gap:10px;padding:8px 8px 16px;margin-bottom:2px;border-bottom:1px solid #e2e9e8}
.side-brand strong{font-size:12px!important;color:#203346!important}
.side-brand small{font-size:9px!important;color:#5a7275!important}
#navigation{display:block;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
#navigation .nav-group{margin:4px 0 9px}
#navigation .nav-group[hidden],#navigation .nav-submenu[hidden]{display:none!important}
#navigation button.nav-group-toggle{
  display:flex;align-items:center;gap:8px;width:100%;min-height:34px;
  padding:8px 9px!important;margin:0!important;border:0!important;border-radius:8px!important;
  background:transparent!important;color:#3f5e64!important;box-shadow:none!important;
  font-size:10px!important;font-weight:800!important;letter-spacing:.055em!important;text-align:left;
  transform:none!important;
}
#navigation button.nav-group-toggle:hover{background:#eaf3f0!important}
#navigation .nav-group-title{flex:1;min-width:0;font-size:10px!important;line-height:1.35}
#navigation .nav-group-icon{flex:0 0 17px;min-width:17px;color:#377767!important;font-size:14px!important;text-align:center}
#navigation .nav-group-arrow{margin-left:auto;color:#65807e!important;font-size:14px!important}
#navigation .nav-group-toggle.has-active .nav-group-title{color:#0e6151}
#navigation .nav-submenu{margin:0 0 7px 11px;padding-left:8px;border-left:1px solid #d9e9e4}
#navigation .nav-submenu>button,#navigation .nav-submenu>button[data-it-section],#navigation .nav-submenu>button[data-page^="maintenance"]{
  display:flex;align-items:center;gap:8px;width:100%;min-height:33px!important;
  margin:0!important;padding:7px 8px!important;border:0!important;border-radius:7px!important;
  background:transparent;color:#34495b;font-size:12px!important;font-weight:600!important;
  box-shadow:none!important;text-align:left;transform:none!important;
}
#navigation .nav-submenu>button:hover:not(.active){background:#e8f3ef!important;color:#12604e!important}
#navigation .nav-submenu>button.active{background:#12604e!important;color:#fff!important;padding:7px 8px!important;border:0!important;box-shadow:none!important}
#navigation .nav-submenu>button .nav-icon{width:16px;flex:0 0 16px;font-size:12px!important;color:#708a88}
#navigation .nav-submenu>button.active .nav-icon,#navigation .nav-submenu>button.active .nav-text{color:#fff!important}
#navigation .nav-submenu>button .nav-text{white-space:normal;line-height:1.35;font-size:12px!important;font-weight:600!important}
#navigation .nav-submenu>button[hidden]{display:none!important}
/* When the entire sidebar is collapsed, show only GROUP icons; clicking one opens it. */
.shell.nav-collapsed #navigation .nav-submenu,.shell.nav-collapsed #navigation .nav-group-title,.shell.nav-collapsed #navigation .nav-group-arrow{display:none!important}
.shell.nav-collapsed #navigation .nav-group{margin:6px 0}
.shell.nav-collapsed #navigation button.nav-group-toggle{justify-content:center;padding:7px 4px!important;min-height:39px}
.shell.nav-collapsed #navigation .nav-group-icon{font-size:17px!important}
@media(min-width:721px) and (max-width:1050px){.sidebar{width:230px;flex-basis:230px}}
@media(max-width:720px){
 .sidebar{width:100%;height:auto;max-height:55vh;padding:11px 12px}
 #navigation{display:block;max-height:38vh;overflow-y:auto;overflow-x:hidden}
 #navigation .nav-submenu{display:block}
 #navigation .nav-submenu>button{width:100%!important;white-space:normal!important}
 .shell.nav-collapsed .sidebar{display:none}
}

/* v3.8.1: there is one navigation source (sidebar); no legacy IT navigation bar. */
#pageContent nav.it-tabs{display:none!important}