/* SacomWork design system — token trích THẬT từ work.calixchain.cloud (:root vars) */
:root{
  --bg:#eef3ec; --surface:#fff; --ink:#10382a; --muted:#6f857a; --line:#e1eae2;
  --navy:#0c3325; --navy-2:#0a3626; --green:#1c9a5f; --teal:#1aa06f; --indigo:#12885b; --indigo-d:#0b5c3e;
  --gold:#d4af37; --gold-l:#ffe9a8; --gold-2:#b8860b; --red:#e03131;
  --grad-brand:linear-gradient(135deg,#159a67 0%,#0b5c3e 100%);
  --grad-teal:linear-gradient(135deg,#1fae76 0%,#12855b 100%);
  --grad-gold:linear-gradient(135deg,#fff3c4 0%,#f1d270 32%,#d4af37 64%,#b8860b 100%);
  --grad-amber:linear-gradient(135deg,#f3d472 0%,#d4af37 100%);
  --grad-dark:linear-gradient(160deg,#0a3626 0%,#0c4b34 55%,#0f6a46 100%);
  --grad-side:linear-gradient(185deg,#0a3626 0%,#05231a 92%);
  --r:18px; --r-sm:12px;
  --e1:0 1px 2px rgba(8,40,28,.06),0 2px 6px rgba(8,40,28,.05);
  --e2:0 6px 16px -6px rgba(8,40,28,.16),0 12px 30px -10px rgba(8,40,28,.10);
  --e3:0 18px 34px -10px rgba(8,40,28,.22),0 34px 60px -18px rgba(8,40,28,.20);
  --glow:0 10px 24px -6px rgba(21,154,103,.45); --gold-glow:0 8px 22px -6px rgba(212,175,55,.55);
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);margin:0;font-size:14px;-webkit-font-smoothing:antialiased}
a{color:var(--indigo-d);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink)}
h2{margin:0 0 16px;font-size:22px}
h3{font-size:16px;margin:22px 0 10px}
.muted{color:var(--muted)}
.small{font-size:12px}

/* ---------- Shell ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:246px;flex-shrink:0;background:var(--grad-side);color:#cfe3d8;padding:0 14px 20px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:12px;padding:20px 6px 18px}
.brand-icon{width:44px;height:44px;border-radius:13px;background:var(--grad-gold);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:var(--gold-glow);flex-shrink:0}
.brand-name{color:#fff;font-weight:700;font-size:17px;line-height:1.1}
.brand-sub{color:rgba(255,255,255,.5);font-size:11px}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-grp{font-size:10.5px;letter-spacing:.09em;color:rgba(255,255,255,.38);font-weight:700;margin:16px 10px 6px}
.side-nav a{display:flex;align-items:center;gap:11px;color:rgba(255,255,255,.72);padding:10px 16px;border-radius:12px;font-size:14px;font-weight:500}
.side-nav a:hover{background:rgba(255,255,255,.07);text-decoration:none;color:#fff}
.side-nav a .ic{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.side-nav a.on{background:var(--grad-brand);color:#fff;box-shadow:var(--glow)}
.side-nav a.on .nav-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:16px;height:64px;padding:0 26px;background:rgba(255,255,255,.74);
  backdrop-filter:saturate(160%) blur(8px);border-bottom:.8px solid var(--line);position:sticky;top:0;z-index:20}
.crumb{font-weight:600;font-size:13.5px;white-space:nowrap;color:var(--ink)}
.crumb-sep{color:var(--muted);font-weight:400;margin:0 2px}
.topbar-search{flex:1;max-width:440px;margin:0}
.topbar-search input{width:100%;padding:9px 14px;border-radius:11px;background:#fff;border:1px solid var(--line);font-size:13px}
.topbar-right{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-left:auto}
.content{padding:26px;flex:1}

/* ---------- Cards / stats ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--e1);margin-bottom:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
/* project-card: cột flex — nút "Mở dự án" luôn dán đáy, thẳng hàng giữa các
   thẻ dù tiêu đề/mô tả dài ngắn khác nhau (grid tự giãn các thẻ cùng hàng
   bằng chiều cao thẻ cao nhất; margin-top:auto đẩy phần chân xuống đáy). */
.project-card{display:flex;flex-direction:column;margin-bottom:0}
.project-card .proj-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.project-card .proj-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px}
.project-card .proj-body{flex:1}
.project-card .proj-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:10px 0 0}
.project-card .proj-footer{margin-top:auto;padding-top:12px}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:22px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--e1);position:relative;overflow:hidden}
.stat-card .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px;color:#fff}
.ic-green{background:var(--grad-brand)} .ic-teal{background:var(--grad-teal)} .ic-gold{background:var(--grad-amber)}
.ic-red{background:linear-gradient(135deg,#f07a5e,#e03131)} .ic-purple{background:linear-gradient(135deg,#7c5cf0,#5b3fd6)}
.stat-card b{display:block;font-size:28px;line-height:1;color:var(--ink)}
.stat-card .stat-label{font-size:12.5px;color:var(--muted);margin-top:6px}

/* ---------- Welcome banner ---------- */
.welcome{background:var(--grad-dark);color:#fff;border-radius:var(--r);padding:28px 32px;margin-bottom:22px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:var(--e2);position:relative;overflow:hidden}
.welcome .eyebrow{font-size:11px;letter-spacing:.09em;font-weight:700;color:var(--gold-l);text-transform:uppercase}
.welcome h1{margin:8px 0 10px;font-size:26px;color:#fff}
.welcome h1 .name{color:var(--gold-l)}
.welcome p{margin:0 0 18px;color:rgba(255,255,255,.8);font-size:13.5px}
.welcome-actions{display:flex;gap:10px}
.welcome-illus{font-size:56px;opacity:.85;flex-shrink:0}

/* ---------- Buttons ---------- */
button,.btn{background:var(--grad-brand);color:#fff;border:none;padding:9px 16px;border-radius:11px;cursor:pointer;font-size:13.5px;font-weight:600;font-family:inherit}
button:hover,.btn:hover{filter:brightness(1.05);text-decoration:none}
.btn-gold{background:var(--grad-gold);color:#4a3a06}
.btn-outline{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-danger{background:linear-gradient(135deg,#f07a5e,#e03131)}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:8px}
.link-btn{background:none;color:var(--muted);padding:0;font-weight:500;text-decoration:underline}
.chip-btn{background:#fff;color:var(--indigo-d);border:1px solid var(--line);padding:4px 11px;font-size:12px;border-radius:14px;font-weight:600}

/* Nút "Chọn tệp" tuỳ chỉnh thay cho "Choose File" mặc định của trình duyệt
   (chữ đó do trình duyệt tự vẽ theo ngôn ngữ trình duyệt/hệ điều hành, HTML
   thường không đổi được). input file GIỮ NGUYÊN trong luồng render (không
   dùng display:none) để KHÔNG bị trình duyệt loại khỏi kiểm tra "required" —
   chỉ ẩn về mặt hình ảnh (kỹ thuật visually-hidden chuẩn, vẫn bấm Tab focus
   được). <label for=...> đứng cạnh đóng vai trò nút bấm — bấm nhãn tự mở hộp
   thoại chọn tệp nhờ liên kết for/id chuẩn HTML, không cần JS chuyển tiếp
   click. Xem sacomFileInputsInit() trong app.js. */
.file-picker{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.file-picker input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.file-picker-btn{white-space:nowrap}
.file-picker-name{word-break:break-all}

/* ---------- Badges ---------- */
.badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;background:#e6f4ec;color:var(--indigo-d)}
.badge.gold{background:var(--gold-l);color:var(--gold-2)}
.badge.danger{background:#fde4e4;color:var(--red)}
.badge.blue{background:#e7edfb;color:#3454d1}
.badge.slate{background:#eef0f2;color:#5b6572}

/* ---------- Tables ---------- */
table.tbl{border-collapse:separate;border-spacing:0;width:100%;margin:8px 0 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.tbl th,table.tbl td{padding:10px 14px;text-align:left;font-size:13px;border-bottom:1px solid var(--line)}
table.tbl th{background:#f3f8f4;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover{background:#f7fbf8}
.row-overdue td:first-child{color:var(--red)}
.tr-unread{background:#f0f8f3;font-weight:600}

/* ---------- Forms ---------- */
form{margin-bottom:12px}
form.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* Hàng soạn 1 dòng thông tin cố định của mẫu văn bản. DÙNG GRID chứ không phải
   flex: 2 ô Nhãn/Giá trị phải thẳng cột giữa các hàng dù nội dung dài ngắn
   khác nhau — với flex thì hàng có chữ dài đẩy lệch hẳn so với hàng bên dưới.
   (Không dùng lại .inline-form được: luật đó chỉ áp cho thẻ <form>.) */
.tpl-info-row{display:grid;grid-template-columns:1fr auto 1fr auto auto auto;gap:6px;align-items:center;margin-top:4px}
.tpl-info-row .ti-sep{text-align:center}
/* Hàng soạn 1 ô điền: nhãn co giãn, phần còn lại giữ nguyên bề ngang. */
.tpl-field-row{display:flex;gap:6px;align-items:center;margin-top:4px}
.tpl-field-row .tf-label{flex:1;min-width:0}
.tpl-field-row select{width:auto}
.tpl-field-row label{margin:0;display:flex;align-items:center;gap:4px;white-space:nowrap}
label{display:block;font-size:12px;color:var(--muted);margin:8px 0 3px;font-weight:500}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=color],select,textarea{
  padding:8px 11px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;width:100%;background:#fff;font-family:inherit;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(28,154,95,.12)}
textarea{min-height:70px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chk{display:flex;align-items:center;gap:7px;font-size:13px;margin:8px 0}
.chk input{width:auto}
.alert{background:#fde4e4;color:var(--red);padding:10px 12px;border-radius:10px;font-size:13px;margin-bottom:12px}

/* ---------- Login ---------- */
.login-wrap{display:flex;min-height:100vh;align-items:center;justify-content:center;background:var(--grad-dark)}
.login-card{background:#fff;padding:34px 38px;border-radius:20px;width:370px;box-shadow:var(--e3)}
.login-logo{width:56px;height:56px;border-radius:16px;background:var(--grad-gold);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 14px;box-shadow:var(--gold-glow)}
.login-card h1{text-align:center;font-size:22px;margin:0 0 4px}
.login-card .sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:20px}
.login-card button[type=submit]{width:100%;margin-top:8px;padding:11px}

/* ---------- Notifications ---------- */
.notif-wrap{position:relative}
.notif-bell{position:relative;background:none;color:var(--ink);font-size:18px;padding:6px;border-radius:10px}
.notif-bell:hover{background:#f0f5f1}
.notif-badge{position:absolute;top:0;right:0;background:var(--red);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.notif-dropdown{position:absolute;right:0;top:calc(100% + 8px);width:330px;max-height:420px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--e2);z-index:40}
.notif-dropdown[hidden]{display:none}
.notif-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.notif-head form{margin:0}
.notif-item{display:block;width:100%;text-align:left;padding:11px 14px;border:none;border-bottom:1px solid var(--line);border-radius:0;background:#fff;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.notif-item:hover{background:#f7fbf8;text-decoration:none;filter:none}
.notif-item.unread{background:#f0f8f3}
.notif-viewall{display:block;text-align:center;padding:9px;font-size:12.5px}
.notif-empty{padding:18px;text-align:center}

/* ---------- Kanban ---------- */
.kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px}
.kan-col{flex:0 0 260px;background:#f3f8f4;border-radius:14px;padding:12px}
.kan-col h4{margin:0 0 10px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.kan-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:9px;box-shadow:var(--e1)}
.kan-card .t{font-weight:600;font-size:13.5px;margin-bottom:5px}

/* ---------- Org chart (cây thẻ + đường nối) ---------- */
.dept-tree{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.dept-branch{display:flex;flex-direction:column;align-items:center}
.dept-children-row{position:relative;display:flex;gap:32px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.dept-branch.collapsed>.dept-children-row{display:none}
.dept-branch.has-children>.dept-card{position:relative}
.dept-branch.has-children>.dept-card::after{content:"";position:absolute;top:100%;left:50%;width:2px;height:20px;background:var(--line);transform:translateX(-1px)}
.dept-children-row::before{content:"";position:absolute;top:0;left:105px;right:105px;height:2px;background:var(--line)}
.dept-children-row>.dept-branch{position:relative;padding-top:20px}
.dept-children-row>.dept-branch::before{content:"";position:absolute;top:0;left:50%;width:2px;height:20px;background:var(--line);transform:translateX(-1px)}
.dept-card{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--dept-color,var(--green));border-radius:14px;padding:15px 17px;min-width:210px;box-shadow:var(--e1)}
.dept-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.dept-card-head b{font-size:15px}
.dept-card-code{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.dept-card-mgr{color:#7c5cf0;font-size:12.5px;margin-top:11px}
.dept-card-staff{color:var(--gold-2);font-size:12.5px;margin-top:5px}
.dept-card-actions{display:flex;gap:8px;margin-top:13px}
.dept-card-actions button{flex:1;padding:6px 0;font-size:13px}
.dept-card-edit{background:#fdf3e0;color:var(--gold-2)}
.dept-card-add{background:var(--grad-brand)}
.dept-toggle{width:20px;height:20px;padding:0;font-size:10px;background:#fff;color:var(--muted);border:1px solid var(--line);border-radius:6px}
.dept-branch.collapsed .dept-toggle{transform:rotate(-90deg)}
.dept-add-form{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.dept-add-form[hidden]{display:none}
.dept-add-form input{width:auto;flex:1;min-width:80px;padding:5px 8px;font-size:12px}
.dept-row-flash{animation:flash 1.4s ease}
@keyframes flash{0%{background:var(--gold-l)}100%{background:transparent}}

/* ---------- Calendar ---------- */
.cal-toolbar{display:flex;gap:14px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.cal-head{font-size:12px;color:var(--muted);text-align:center;padding:4px;font-weight:600}
.cal-cell{background:var(--surface);border:1px solid var(--line);border-radius:11px;min-height:96px;padding:7px;font-size:12px}
.cal-cell-out{opacity:.4}
.cal-cell-today{border-color:var(--green);border-width:2px}
.cal-daynum{font-weight:700;margin-bottom:5px}
.cal-task{display:block;background:#e6f4ec;color:var(--indigo-d);border-radius:5px;padding:2px 6px;margin-bottom:3px;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-task-overdue{background:#fde4e4;color:var(--red)}

/* ---------- Stage pills / progress ---------- */
.wf{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}
.wf .stage{background:#eef4f0;border-radius:16px;padding:5px 13px;font-size:12px;color:var(--muted)}
.wf .stage-current{background:var(--grad-brand);color:#fff}
.wf .stage-done{background:#d8efe2;color:var(--indigo-d)}
.progress{height:8px;background:#e6efe8;border-radius:6px;overflow:hidden}
.progress-bar{height:100%;background:var(--grad-brand);border-radius:6px}
.comment-list{list-style:none;padding:0;margin:0 0 12px}
.comment-list li{padding:10px 12px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px;font-size:13.5px}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(8,40,28,.4);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;overflow-y:auto}
.modal-overlay[hidden]{display:none}
/* Cao tối đa 90% màn hình rồi cuộn NỘI BỘ — tránh modal dài tràn khỏi màn hình. */
.modal{background:#fff;border-radius:var(--r);padding:24px 26px;width:420px;max-width:100%;max-height:90dvh;overflow-y:auto;overflow-x:hidden;box-shadow:var(--e3)}

/* ---------- Trình dựng quy trình ---------- */
.icon-btn{background:#eef3ec;color:var(--muted);border:none;width:34px;height:34px;border-radius:10px;font-size:15px;cursor:pointer;flex-shrink:0}
.icon-btn:hover{background:#e2ebe3;filter:none}
.wf-stages{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.wf-stage-row{display:flex;align-items:center;gap:10px;background:#f7faf7;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
/* flex:0 0 46px ghi đè width:100% mà rule input[type=color] toàn cục áp cho ô màu
   (flex-basis thắng width khi item nằm trong flex) → swatch giữ đúng 46px. */
.wf-stage-row .wf-color{flex:0 0 46px;width:46px;height:40px;padding:2px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer}
.wf-color::-webkit-color-swatch-wrapper{padding:0}
.wf-color::-webkit-color-swatch{border:none;border-radius:6px}
.wf-label{flex:1;min-width:0}
.wf-final{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.wf-mini{background:#fff;color:var(--ink);border:1px solid var(--line);padding:6px 9px;border-radius:8px;font-size:13px;line-height:1;flex-shrink:0}
.wf-mini:hover{background:#f0f5f1;filter:none}
.wf-del{color:var(--red);border-color:#f3c9c9}
.wf-del:hover{background:#fdecec}
.wf-transitions{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.wf-trans-row{background:#f7faf7;border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wf-trans-name{font-size:13px;padding:2px 10px;border-radius:20px;border:2px solid var(--line);background:#fff;color:var(--ink)}
.wf-pill-wrap{display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-size:13px}
.wf-pill{display:inline-block;padding:3px 11px;border-radius:20px;color:#fff;font-size:12px;font-weight:600}
/* Cấu hình phê duyệt theo giai đoạn (BR-38→41) — khối con dưới mỗi giai đoạn giữa. */
.wf-stage-block{display:flex;flex-direction:column;gap:0}
.wf-approval{margin:2px 0 0 56px;padding:10px 12px;background:#fdf9ef;border:1px dashed var(--gold);border-radius:10px}
.wf-levels{display:flex;flex-direction:column;gap:16px;margin:8px 0}
.wf-level-row{border:1px solid var(--line);border-radius:12px;padding:10px}
.wf-level-name{width:100%}
@media(max-width:640px){
  .wf-stage-row{flex-wrap:wrap}
  .wf-label{flex:1 1 100%;order:-1}
  .wf-approval{margin-left:0}
}

/* ---------- Cột mốc dự án (milestone stepper) ---------- */
.milestones{display:flex;gap:4px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.ms-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:84px;position:relative;text-align:center}
.ms-step::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.ms-step:first-child::before{display:none}
.ms-step.ms-done::before,.ms-step.ms-current::before{background:var(--green)}
.ms-dot{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#cbd5cf;color:#fff;font-weight:700;font-size:13px;box-shadow:0 0 0 3px var(--surface)}
.ms-step.ms-current .ms-dot{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--green)}
.ms-label{font-size:12px;color:var(--muted);white-space:nowrap}
.ms-step.ms-current .ms-label{color:var(--ink);font-weight:600}

/* ---------- Dual-list picker (chọn thành viên) ---------- */
.dual-list{display:flex;gap:10px;align-items:stretch;margin-top:4px}
.dual-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.dual-head{font-size:12px;font-weight:600;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.dual-head .dual-count{background:var(--surface-2,#eef3ec);color:var(--indigo-d);border-radius:20px;padding:1px 8px;font-size:11px;font-weight:700}
.dual-search{padding:7px 10px;border:1px solid var(--line);border-radius:9px;font-size:13px;font-family:inherit;background:#fff}
.dual-col select{width:100%;flex:1;border:1px solid var(--line);border-radius:10px;padding:4px}
.dual-col select option{padding:5px 8px;border-radius:6px;font-size:13px}
.dual-btns{display:flex;flex-direction:column;justify-content:center;gap:8px;flex-shrink:0}
.dual-btns button{padding:7px 11px;min-width:44px}
@media(max-width:640px){
  .dual-list{flex-direction:column}
  .dual-btns{flex-direction:row;justify-content:center}
  .dual-btns button{transform:rotate(90deg)}
}

/* ---------- Nút mở menu (chỉ hiện mobile) + nền mờ khi mở drawer ---------- */
.nav-toggle{display:none;background:none;border:none;padding:6px;font-size:22px;line-height:1;color:var(--ink);cursor:pointer;border-radius:9px}
.nav-toggle:hover{background:rgba(8,40,28,.06);filter:none}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(6,26,18,.44);z-index:55;opacity:0;transition:opacity .2s ease}

/* Cuộn ngang cho bảng/lịch rộng trên màn hẹp (bọc trong .scroll-x). */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ================= TABLET (≤980px) ================= */
@media(max-width:980px){
  /* Sidebar thành drawer trượt từ trái. */
  .sidebar{position:fixed;top:0;left:0;height:100dvh;width:min(84vw,290px);z-index:60;
    overflow-y:auto;transform:translateX(-100%);transition:transform .24s ease;box-shadow:var(--e3)}
  .sidebar.open{transform:none}
  .sidebar-backdrop.open{display:block;opacity:1}
  body.nav-open{overflow:hidden} /* khoá cuộn nền khi drawer mở */
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .topbar{padding:0 16px;gap:12px}
  .topbar-search{max-width:none}
  .content{padding:18px 16px}
  /* Bảng rộng: cuộn ngang TRONG khung bảng. Không có dòng này, bảng vượt cỡ sẽ
     phình ra (đo được: 721px → 4086px) và kéo lệch NGUYÊN TRANG theo chiều ngang
     — topbar/sidebar trôi hết. overflow:hidden ở quy tắc gốc KHÔNG chặn được,
     vì nó chỉ cắt phần con tràn ra chứ không ghìm được chính hộp <table>. */
  table.tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
  .welcome{padding:22px 20px}
  .welcome h1{font-size:22px}
  .welcome-illus{display:none}
}

/* ================= MOBILE (≤640px) ================= */
@media(max-width:640px){
  h2{font-size:19px}
  .content{padding:14px 12px}
  .stat-cards{grid-template-columns:repeat(2,1fr);gap:10px}
  .cards{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  /* Ẩn ô tìm kiếm topbar trên điện thoại — đã có trang Tìm kiếm riêng. */
  .topbar-search{display:none}
  .crumb{font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
  .topbar-right{gap:9px}
  /* Điện thoại: thêm nowrap — cột quá hẹp sẽ bóp chữ xuống từng ký tự, thà cuộn.
     (Việc cho cuộn nằm ở khối ≤980px bên trên.) */
  table.tbl{white-space:nowrap}
  /* Lịch tháng: cuộn ngang, giữ ô đủ rộng để đọc. */
  .cal-head,.cal-grid{min-width:560px}
  .welcome-actions{flex-wrap:wrap}
  .modal{padding:18px 16px;width:100%}
  .login-card{width:100%;max-width:94vw;padding:28px 22px}
}

/* ================= NHỎ (≤400px) ================= */
@media(max-width:400px){
  .stat-cards{grid-template-columns:1fr}
  .brand-sub{display:none}
}

/* Thanh phân trang dùng chung (khối "pager" trong layout.html) */
.pager{display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;margin-top:16px}
.pager-btns{display:flex;gap:6px}
/* Nút Trước/Sau là đích chạm chính của trang, phải đủ lớn cho ngón tay (>=44px
   theo WCAG 2.5.5) — mặc định .btn-sm chỉ cao 28px, quá nhỏ để bấm.
   Điều kiện là NGÓN TAY chứ không phải màn hình hẹp: pointer:coarse bắt mọi
   thiết bị cảm ứng (kể cả tablet ngang), còn max-width:980px là lưới an toàn
   cho trình duyệt không báo pointer. Đặt mốc 640px là hụt tablet. */
@media(max-width:980px),(pointer:coarse){
  .pager-btns a{min-height:44px;padding:0 18px;display:inline-flex;
    align-items:center;justify-content:center}
}
/* Điện thoại: giãn hết chiều ngang cho dễ bấm bằng ngón cái. */
@media(max-width:640px){
  .pager-btns{width:100%}
  .pager-btns a{flex:1}
}

/* 2 bộ dual-list "Người/Nhóm phê duyệt" của 1 mức duyệt cố định. KHÔNG dùng
   .grid2 (2 cột cứng): mỗi bộ đã gồm 3 cột con (còn lại · nút · đã chọn) nên
   ép 2 bộ cạnh nhau trong modal hẹp làm mỗi <select> chỉ còn ~100px, cắt cụt
   tên người. auto-fit + minmax: đủ rộng thì 2 bộ nằm ngang, hẹp thì tự xuống
   dòng thay vì bóp nhỏ. */
.wf-approver-pickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:12px}

/* Dropdown "loại step" trong 1 dòng giai đoạn của trình dựng quy trình. Rộng
   cố định, không co: các dòng phải thẳng cột với nhau và nhãn dài nhất
   ("📄 Hồ sơ", "◆ Quyết định") không bị cắt. */
.wf-stage-row .wf-type{flex:0 0 150px;width:150px;padding:8px 6px;font-size:13px}
@media(max-width:640px){
  .wf-stage-row .wf-type{flex:1 1 auto;width:auto}
}

/* Hai ô chọn nhánh Chấp nhận/Từ chối của step Quyết định trong bảng "Luật
   chuyển tiếp".

   KHÔNG chặn max-width: <select> tự rộng bằng lựa chọn dài nhất, chặn lại là
   cắt cụt tên giai đoạn ("B3. Rà soát ngân sách & phân loạ…") — người dùng
   phải bung dropdown mới biết nhánh đang trỏ đi đâu, đúng thứ cần đọc nhanh
   nhất ở bảng này. Hàng rộng ra thì cho xuống dòng, vì…

   Cũng KHÔNG đặt max-width theo phần trăm: khối bọc là inline-flex co theo nội
   dung, phần trăm tính ngược lại chính nó nên ô chọn sập còn mỗi mũi tên. */
.wf-trans-row .wf-branch{display:inline-block;width:auto;min-width:170px;padding:5px 8px;font-size:13px;margin:0}
.wf-branch-label{font-size:12px;font-weight:600;white-space:nowrap}
/* …nhãn nhánh và ô chọn của nó là MỘT khối không tách rời. Để rời thì
   "❌ Từ chối →" ở lại dòng trên còn ô chọn rớt xuống dòng dưới: mũi tên trỏ
   vào khoảng không và ô chọn trông như mồ côi. */
.wf-branch-pair{display:inline-flex;align-items:center;gap:5px;max-width:100%}
@media(max-width:640px){
  .wf-branch-pair{width:100%}
  .wf-trans-row .wf-branch{min-width:0;flex:1;margin:2px 0}
}

/* ---------- Trang Quy trình: lọc + danh sách 1 dòng/quy trình ---------- */
.wf-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.wf-filters .wf-search{flex:1 1 280px;min-width:0;width:auto}
.wf-group-title{margin:18px 0 8px;font-size:15px;display:flex;align-items:center;gap:6px}
.wf-group-title:first-of-type{margin-top:0}
.wf-rows{display:flex;flex-direction:column;gap:8px}
/* 1 quy trình = 1 dòng: phần mô tả co giãn, cụm nút neo bên phải và KHÔNG co
   (min-width:0 ở cột trái để chuỗi giai đoạn dài tự xuống dòng thay vì đẩy
   nút ra khỏi thẻ). */
.wf-row{display:flex;align-items:center;gap:12px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.wf-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.wf-row-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Sơ đồ quy trình: giữ tỉ lệ, co vừa bề ngang dòng; hẹp quá thì cuộn ngang
   thay vì thu nhỏ đến mức không đọc được chữ trong hình. */
.wf-row-flow{max-width:100%;overflow-x:auto}
/* SVG giữ NGUYÊN kích thước thật, hẹp thì thẻ cha cuộn ngang. KHÔNG đặt
   max-width:100% ở đây: quy trình dài (mua sắm 11 bước, ~2400px) sẽ bị ép co
   xuống bề ngang dòng và chữ trong hình nhỏ tới mức không đọc được. */
.wf-row-flow .wf-flow{display:block;flex:none}
.wf-row-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
@media(max-width:640px){
  .wf-row{flex-direction:column;align-items:stretch}
  .wf-row-actions{justify-content:flex-end}
}

/* ---------- Trang DOA (uỷ quyền phê duyệt theo hạn mức) ---------- */
.doa-list{display:flex;flex-direction:column;gap:12px}
.doa-table{width:100%;border-collapse:collapse;margin-top:10px}
.doa-table th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:4px 8px;border-bottom:1px solid var(--line)}
.doa-table td{padding:6px 8px;border-bottom:1px solid var(--line);font-size:13px}
.doa-table tr:last-child td{border-bottom:none}
.doa-levels{display:flex;flex-direction:column;gap:8px;margin-top:6px}
/* 1 bậc = 1 dòng: tick vai trò · "duyệt dưới" · ô số tiền. Ô số tiền rộng cố
   định để 3 dòng thẳng cột nhau. */
.doa-level-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#f7faf7;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.doa-level-row input[type=text]{flex:0 0 220px;width:220px}
.doa-level-use{display:flex;align-items:center;gap:6px;white-space:nowrap;min-width:150px}
@media(max-width:640px){
  .doa-level-row input[type=text]{flex:1 1 auto;width:auto}
}

/* ---------- Ô ký cuối tờ trình ---------- */
/* Hàng ô ký xếp ngang như trên giấy, tự xuống dòng khi nhiều cấp duyệt. */
.tt-signs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.tt-sign{flex:1 1 150px;min-width:140px;text-align:center;border:1px solid var(--line);border-radius:8px;padding:8px 6px;background:#fff}
.tt-sign-role{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
/* Chừa chiều cao cho phần "chữ ký" đúng như ô ký trên giấy, để bản in ra
   không bị dồn cục và người đọc nhận ra ngay đây là ô ký. */
.tt-sign-mark{min-height:34px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--green,#1c9a5f)}
.tt-sign-name{font-size:12px;font-weight:600}
.tt-sign-date{font-size:11px;color:var(--muted)}

/* ---------- Tờ trình (bản xem trước mẫu + tờ trình thật dùng chung) ---------- */
.tt{line-height:1.55;color:var(--ink)}
.tt-head{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px}
.tt-info{font-weight:600}
.tt-info-val{font-weight:400}
.tt-sec{margin-top:16px}
.tt-sub{margin-top:8px;margin-left:22px}
.tt-sec-title{font-weight:600}
.tt-fixed{font-size:12px;white-space:pre-wrap;margin-top:2px}
/* Dòng "Nhãn: …… giá trị": phần trống giãn ra chiếm hết chỗ còn lại, đúng như
   dòng kẻ chấm trên tờ giấy. */
.tt-line{font-size:12px;margin-top:4px;display:flex;gap:6px;align-items:baseline}
.tt-blank{flex:1;border-bottom:1px dotted #9aa5b1;min-height:1.1em}
.tt-val{flex:1;font-weight:600;border-bottom:1px solid var(--line)}
.tt-hint{color:var(--muted);font-size:11px}
.tt-req{color:var(--red)}
.tt-foot{margin-top:24px;padding-top:12px;border-top:1px solid var(--line);text-align:right;font-weight:600}
/* Ảnh chữ ký mẫu trong ô ký — cao vừa khung ô, nền trong giữ nguyên. */
.tt-sign-img{max-height:38px;max-width:100%;object-fit:contain}

/* ---------- Trang tờ trình + BẢN IN ---------- */
.doc-actions{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.doc-hint{margin:0 0 14px}
.doc-sheet{max-width:820px;padding:30px 34px}

/* Bản in chỉ gồm TỜ VĂN BẢN: bỏ sidebar, thanh trên, nút bấm và mọi khung
   nền — in cả giao diện ra giấy thì tờ trình không còn ra dáng văn bản. */
@media print{
  @page{margin:14mm}
  body{background:#fff;font-size:12pt}
  .sidebar,.topbar,.doc-actions,.doc-hint,.side-nav,.alert{display:none !important}
  .shell,.main,.content{display:block;padding:0;margin:0;min-height:0}
  .card,.doc-sheet{box-shadow:none;border:none;padding:0;margin:0;max-width:none;border-radius:0}
  /* Ô ký không được rơi tách khỏi phần cuối văn bản sang trang sau. */
  .tt-signs{break-inside:avoid;page-break-inside:avoid}
  .tt-sec{break-inside:avoid;page-break-inside:avoid}
  a[href]{color:inherit;text-decoration:none}
}