/* ============================================================
   main.css — Design tokens theo VelaEC App Template Guide.
   KHÔNG tự đổi màu/kích thước tùy ý — sửa ở đây sẽ ảnh hưởng mọi app dùng chung guide.
   ============================================================ */
:root{
  --navy:#1A2B4A; --blue:#2563EB; --teal:#0D9488; --green:#16A34A; --amber:#D97706; --red:#DC2626; --orange:#F97316;
  --gray8:#1E293B; --gray7:#334155; --gray5:#64748B; --gray4:#94A3B8; --gray3:#CBD5E1; --gray2:#E2E8F0; --gray1:#F8FAFC;
  --lblue:#EFF6FF; --radius:8px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,'Segoe UI',Roboto,Inter,sans-serif;background:var(--gray1);color:var(--gray8);}
button{font-family:inherit;cursor:pointer;}

/* ===== Màn hình đăng nhập ===== */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{background:#fff;border:1px solid var(--gray2);border-radius:12px;padding:36px 32px;max-width:360px;width:100%;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.06);}
.login-card .brand-mark{width:56px;height:56px;border-radius:10px;object-fit:cover;margin:0 auto 16px;display:block;}
.login-card h1{font-size:18px;margin:0 0 8px;color:var(--navy);}
.login-card p{font-size:13.5px;color:var(--gray7);margin:0 0 20px;line-height:1.5;}

/* ===== Button ===== */
.btn{font-size:13px;font-weight:600;padding:10px 16px;border-radius:7px;border:1px solid transparent;}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:#1D4ED8;}
.btn-secondary{background:#fff;border-color:var(--gray3);color:var(--gray7);}
.btn-secondary:hover{background:var(--gray1);}

/* ===== Badge trạng thái (5 loại chuẩn) ===== */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.badge.done{background:#DCFCE7;color:#166534;}
.badge.progress{background:#FEF3C7;color:#92400E;}
.badge.danger{background:#FEE2E2;color:#991B1B;}
.badge.info{background:#EFF6FF;color:#1D4ED8;}
.badge.idle{background:#F8FAFC;color:#64748B;border:1px solid var(--gray2);}

/* ===== Toast ===== */
#toast-wrap{position:fixed;bottom:24px;right:24px;z-index:999;display:flex;flex-direction:column;gap:8px;}
.toast{padding:11px 16px;border-radius:8px;font-size:13px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.12);border-left:4px solid;animation:toastIn .18s ease;}
.toast.success{border-color:var(--green);background:#DCFCE7;color:#166534;}
.toast.error{border-color:var(--red);background:#FEE2E2;color:#991B1B;}
.toast.info{border-color:var(--blue);background:#EFF6FF;color:#1D4ED8;}
@keyframes toastIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

@media (max-width:1023px){
  #toast-wrap{right:12px;left:12px;bottom:24px;}
}

/* ============================================================
   SHELL — topbar, sidebar, bottom nav (theo VelaEC App Template Guide)
   ============================================================ */
.topbar{position:sticky;top:0;z-index:100;height:52px;background:var(--navy);display:flex;align-items:center;gap:14px;padding:0 18px;color:#fff;}
.topbar .hamburger{display:none;background:none;border:none;color:#fff;font-size:20px;cursor:pointer;}
.topbar .logo{width:32px;height:32px;border-radius:7px;object-fit:cover;flex:none;background:#fff;}
.topbar .appname{font-weight:700;font-size:14.5px;white-space:nowrap;}
.topbar .spacer{flex:1;}
.topbar .user-info{font-size:12px;color:#CBD5E1;display:flex;align-items:center;gap:8px;}
.topbar .user-info b{color:#fff;}
.topbar .role-tag{background:rgba(255,255,255,.12);padding:2px 8px;border-radius:20px;font-size:11px;}
.logout-btn{background:none;border:none;color:#CBD5E1;font-size:12px;cursor:pointer;text-decoration:underline;}

.shell{display:flex;min-height:calc(100vh - 52px);}
.sidebar{width:210px;flex:none;background:#fff;border-right:1px solid var(--gray2);padding:16px 10px;}
.sb-group{font-size:10.5px;font-weight:700;letter-spacing:.5px;color:var(--gray4);text-transform:uppercase;padding:14px 10px 6px;}
.sb-group:first-child{padding-top:2px;}
.sb-item{display:flex;align-items:center;gap:10px;padding:9px 16px;border-radius:7px;color:var(--gray7);font-size:13.5px;cursor:pointer;border:none;background:transparent;width:100%;text-align:left;}
.sb-item:hover{background:var(--gray1);color:var(--navy);}
.sb-item.active{background:var(--lblue);color:var(--blue);font-weight:600;border-left:3px solid var(--navy);padding-left:13px;}
.sb-icon{width:16px;text-align:center;flex:none;}
.sb-badge{margin-left:auto;background:var(--red);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;align-items:center;justify-content:center;padding:0 5px;flex:none;}
.bn-badge{position:absolute;top:-4px;right:-8px;margin-left:0;font-size:9.5px;min-width:15px;height:15px;padding:0 4px;}
.bn-icon{position:relative;display:inline-block;}

main{flex:1;min-width:0;padding:20px;padding-bottom:80px;}
.page-head{margin-bottom:18px;}
.page-head h1{font-size:18px;margin:0 0 3px;color:var(--gray8);}
.page-head .sub{font-size:12.5px;color:var(--gray5);}

.bottomnav{display:none;position:fixed;left:0;right:0;bottom:0;height:56px;background:#fff;border-top:1px solid var(--gray2);z-index:90;}
.bn-inner{display:flex;height:100%;}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:none;background:none;color:var(--gray5);font-size:9.5px;line-height:1.15;text-align:center;padding:4px 2px;}
.bn-item.active{color:var(--blue);}
.bn-icon{font-size:18px;}
.more-sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:14px 14px 0 0;z-index:210;display:none;padding:8px 8px 20px;box-shadow:0 -6px 24px rgba(0,0,0,.15);}
.more-sheet.show{display:block;}
.more-sheet .sheet-handle{width:36px;height:4px;background:var(--gray2);border-radius:20px;margin:6px auto 10px;}
.more-sheet .item{display:flex;align-items:center;gap:12px;padding:13px 14px;font-size:14px;color:var(--gray8);}

@media (max-width:1023px){
  .sidebar{position:fixed;top:0;bottom:0;left:0;width:230px;z-index:120;transform:translateX(-100%);transition:.2s;box-shadow:2px 0 12px rgba(0,0,0,.15);}
  .sidebar.open{transform:none;}
  .topbar .hamburger{display:block;}
  main{padding:12px;padding-bottom:76px;}
  .bottomnav{display:block;}
}

/* ============================================================
   CARD / TABLE / BADGE — dùng chung cho mọi module
   ============================================================ */
.card{background:#fff;border:1px solid var(--gray2);border-radius:var(--radius);padding:16px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.card-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:4px;}
.card-sub{font-size:12px;color:var(--gray4);margin-bottom:12px;}
.stat-row{display:grid;gap:14px;}
.stat-num{font-size:22px;font-weight:700;color:var(--gray8);margin-top:2px;}
.stat-num.teal{color:var(--teal);}
.stat-num.green{color:var(--green);}
.stat-delta{font-size:11.5px;color:var(--gray5);margin-top:4px;}

table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--gray5);font-weight:700;padding:9px 10px;border-bottom:1.5px solid var(--gray2);background:var(--gray1);}
td{padding:11px 10px;border-bottom:1px solid var(--gray2);vertical-align:middle;}
tr.click{cursor:pointer;}
tr.click:hover td{background:var(--lblue);}
.mono{font-variant-numeric:tabular-nums;}
.code-chip{font-size:11px;background:var(--gray1);border:1px solid var(--gray2);padding:2px 7px;border-radius:5px;color:var(--gray7);}

.bar-track{height:7px;background:var(--gray2);border-radius:20px;overflow:hidden;}
.bar-fill{height:100%;border-radius:20px;}

.empty-note{text-align:center;padding:40px 16px;color:var(--gray4);font-size:13px;}
.warn-box{display:flex;gap:9px;background:#FEF3C7;border:1px solid #FDE68A;color:#92400E;padding:11px 13px;border-radius:8px;font-size:12.5px;margin-bottom:18px;line-height:1.5;}

/* ============================================================
   MODAL / PANEL CHI TIẾT
   ============================================================ */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:none;align-items:center;justify-content:center;padding:24px;}
.overlay.show{display:flex;}
.panel-box{background:#fff;width:min(600px,94vw);max-height:90vh;overflow-y:auto;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.35);}
.panel-header{font-size:16px;font-weight:700;padding:16px 20px;border-bottom:1px solid var(--gray2);display:flex;justify-content:space-between;align-items:flex-start;gap:10px;border-radius:14px 14px 0 0;}
.panel-header .meta{font-size:12px;font-weight:400;color:var(--gray5);margin-top:3px;}
.panel-close{border:none;background:var(--gray1);width:28px;height:28px;border-radius:50%;cursor:pointer;color:var(--gray5);flex:none;}
.panel-body{padding:16px 20px;}
.panel-footer{padding:12px 20px;border-top:1px solid var(--gray2);display:flex;gap:8px;justify-content:flex-end;position:sticky;bottom:0;background:#fff;border-radius:0 0 14px 14px;}
.kv{display:grid;grid-template-columns:150px 1fr;gap:9px 12px;font-size:13px;margin-bottom:18px;}
.kv .k{color:var(--gray5);}
.kv .v{font-weight:600;color:var(--gray8);}
.budget-line{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;border-bottom:1px solid var(--gray1);}

.form-label{font-size:12.5px;font-weight:600;color:var(--gray7);display:block;margin-bottom:5px;}
.form-input{width:100%;padding:9px 11px;border:1px solid var(--gray3);border-radius:7px;font-size:13px;background:#fff;}

/* ============================================================
   RAIL — luồng phê duyệt 4 bước
   ============================================================ */
.rail{display:flex;margin:16px 0 4px;}
.rail-step{flex:1;text-align:center;position:relative;}
.rail-step:not(:last-child)::after{content:'';position:absolute;top:14px;left:54%;width:96%;height:2px;background:var(--gray2);z-index:0;}
.rail-step.done:not(:last-child)::after{background:var(--green);}
.rail-node{width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--gray3);display:flex;align-items:center;justify-content:center;margin:0 auto 7px;font-size:12px;font-weight:700;color:var(--gray5);position:relative;z-index:1;}
.rail-step.done .rail-node{border-color:var(--green);background:var(--green);color:#fff;}
.rail-step.active .rail-node{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 4px var(--lblue);}
.rail-label{font-size:11px;font-weight:700;color:var(--gray8);}
.rail-people{margin-top:7px;display:flex;flex-direction:column;gap:3px;align-items:center;}
.pp{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--gray5);}
.pp .tick{width:11px;height:11px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:7px;color:#fff;background:var(--gray3);}
.pp.approved .tick{background:var(--green);}
.pp.pending .tick{background:#fff;border:1.5px solid var(--gray3);}
.pp.rejected .tick{background:var(--red);}

.tl-item{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--gray1);}
.tl-item:last-child{border-bottom:none;}
.tl-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none;}
.tl-dot.done{background:var(--green);}
.tl-dot.danger{background:var(--red);}
.tl-body{font-size:13px;}
.tl-time{font-size:11px;color:var(--gray4);margin-top:1px;}
.tl-comment{margin-top:5px;font-size:12.5px;background:var(--gray1);padding:8px 10px;border-radius:7px;}

@media (max-width:1023px){
  .overlay{padding:0;align-items:flex-end;}
  .panel-box{width:100vw;max-height:100vh;height:100vh;height:100dvh;max-height:100dvh;border-radius:0;}
  .panel-header{border-radius:0;}
  .panel-footer{border-radius:0;}
  .panel-close{width:40px;height:40px;font-size:18px;}

  /* Nguyên nhân 2 — khối "Dự án/Giá trị/Trạng thái..." có cột nhãn cố định
     150px, trên màn hẹp giá trị dài (VD tên tờ trình, ghi chú) bị đẩy tràn ra
     ngoài. Xếp chồng nhãn lên trên, giá trị xuống dưới — không còn giới hạn
     bề ngang nào để tràn nữa. */
  .kv{grid-template-columns:1fr;gap:2px 0;}
  .kv .k{font-size:11.5px;color:var(--gray4);margin-top:8px;}
  .kv .k:first-child{margin-top:0;}

  /* Nguyên nhân 3 — luồng phê duyệt (rail) ép 4 bước nằm ngang, mỗi bước chỉ
     còn ~1/4 bề ngang màn hình — tên người + vai trò dài bị tràn ra khỏi ô của
     mình. Xếp dọc từng bước trên mobile (icon bên trái, chữ xếp dọc bên phải),
     mỗi bước chiếm trọn bề ngang. */
  .rail{flex-direction:column;align-items:stretch;gap:16px;}
  .rail-step{display:grid;grid-template-columns:30px 1fr;column-gap:10px;text-align:left;align-items:start;}
  .rail-step:not(:last-child)::after{display:none;}
  .rail-node{grid-row:1/3;margin:0;}
  .rail-label{grid-column:2;}
  .rail-people{grid-column:2;align-items:flex-start;margin-top:3px;}
  .pp{flex-wrap:wrap;word-break:break-word;}
}