@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bg:#F4F6FB;
  --bg-soft:#EEF1FA;
  --card:#FFFFFF;
  --ink:#1E2433;
  --ink-dim:#6B7280;
  --ink-faint:#9AA1B1;
  --line:#E9ECF5;

  --primary:#4F6EF7;
  --primary-dim:#EAF0FE;
  --primary-dark:#3B57D9;

  --teal:#12B8A6;
  --teal-dim:#E3FBF6;
  --gold:#F5A524;
  --gold-dim:#FEF3E0;
  --red:#F5455C;
  --red-dim:#FEE9EC;
  --purple:#8B5CF6;
  --purple-dim:#F2ECFE;
  --blue:#3B9DF6;
  --blue-dim:#E9F4FE;
  --pink:#F754A2;
  --pink-dim:#FEEBF5;

  --sidebar-bg:#FFFFFF;
  --radius:14px;
  --shadow: 0 2px 4px rgba(31,41,64,.08), 0 12px 32px rgba(31,41,64,.12);
}

/* ---------- Dark mode ---------- */
html.dark{
  --bg:#0E1320;
  --bg-soft:#171E2E;
  --card:#161C2B;
  --ink:#EAEDF5;
  --ink-dim:#A7AEC0;
  --ink-faint:#6E7791;
  --line:#262E42;
  --sidebar-bg:#12172A;
  --primary-dim:#1D2954;
  --teal-dim:#0E2C28;
  --gold-dim:#2E2510;
  --red-dim:#301621;
  --purple-dim:#241E3D;
  --blue-dim:#16233D;
  --pink-dim:#2E1830;
  --shadow: 0 2px 6px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4);
}
html.dark #login-screen{
  background:
    radial-gradient(circle at 15% 15%, rgba(139,92,246,.28), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(79,110,247,.32), transparent 45%),
    linear-gradient(160deg,#0E1320,#141A2C 60%, #101526);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
::selection{background:var(--primary-dim);}

/* ---------- Login ---------- */
#login-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 15% 15%, rgba(139,92,246,.25), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(79,110,247,.30), transparent 45%),
    linear-gradient(160deg,#EEF1FF,#E4E9FD 60%, #DCE3FC);
  padding:24px;
}
.login-card{
  width:100%;max-width:380px;
  background:var(--card);
  border-radius:20px;
  padding:40px 32px 32px;
  box-shadow:0 24px 60px rgba(79,110,247,.18);
}
.login-brand{
  display:flex;align-items:center;gap:10px;margin-bottom:28px;
}
.login-brand .mark{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:13px;letter-spacing:-.5px;
  box-shadow:0 8px 18px rgba(79,110,247,.35);
}
.login-brand .mark.logo-mark,.sidebar .brand .mark.logo-mark{
  background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.login-brand .mark.logo-mark{width:64px;height:42px;border-radius:10px;}
.sidebar .brand .mark.logo-mark{width:58px;height:36px;border-radius:8px;}
.mark.logo-mark img{width:100%;height:100%;object-fit:contain;padding:4px;}
.login-brand .name{font-weight:800;font-size:17px;letter-spacing:-.3px;color:var(--ink);}
.login-brand .sub{font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;}
.login-card h1{font-size:20px;margin:0 0 4px;font-weight:700;}
.login-card p.hint{margin:0 0 24px;color:var(--ink-dim);font-size:13.5px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-dim);margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;
  font-size:14px;color:var(--ink);background:var(--bg-soft);transition:border-color .15s,background .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);background:var(--card);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:10px;border:none;font-weight:600;font-size:14px;
  transition:transform .08s, box-shadow .15s, background .15s;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(79,110,247,.28);}
.btn-primary:hover{background:var(--primary-dark);}
.btn-block{width:100%;}
.btn-ghost{background:transparent;color:var(--ink-dim);border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--ink-faint);color:var(--ink);}
.btn-danger{background:var(--red-dim);color:var(--red);}
.btn-danger:hover{background:#fbd3d9;}
.btn-sm{padding:6px 12px;font-size:12.5px;border-radius:8px;}
.err-msg{color:var(--red);font-size:13px;margin-top:10px;min-height:16px;}

/* ---------- App Shell ---------- */
#app-screen{display:none;min-height:100vh;}
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh;}
.sidebar{
  background:var(--sidebar-bg);
  color:var(--ink-dim);padding:20px 14px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  overflow-y:auto; overflow-x:hidden;
  border-right:1px solid var(--line);
  z-index:10;
}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:6px 8px 22px;}
.sidebar .brand .mark{
  width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--purple));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;
  box-shadow:0 6px 14px rgba(79,110,247,.3);
}
.sidebar .brand .name{font-weight:800;color:var(--ink);font-size:15px;letter-spacing:-.2px;}
.nav-group{margin-bottom:6px;}
.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);padding:14px 10px 6px;font-weight:700;}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
  color:var(--ink-dim);font-size:13.5px;font-weight:600;cursor:pointer;margin-bottom:2px;
  transition:background .12s,color .12s;
}
.nav-item .ic{width:19px;text-align:center;font-size:15px;opacity:.9;}
.nav-item:hover{background:var(--bg-soft);color:var(--ink);}
.nav-item.active{background:var(--primary);color:#fff;box-shadow:0 6px 14px rgba(79,110,247,.3);}
.sidebar-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);}
.user-chip{display:flex;align-items:center;gap:9px;padding:8px 8px;border-radius:10px;}
.user-chip .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#F6C453);color:#5A3B00;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;}
.user-chip .who{flex:1;min-width:0;}
.user-chip .who .em{font-size:12px;color:var(--ink);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-chip .who .role{font-size:10.5px;color:var(--ink-faint);}
.logout-btn{background:none;border:none;color:var(--ink-faint);font-size:15px;padding:4px;}
.logout-btn:hover{color:var(--red);}

.main{padding:26px 32px 60px;max-width:1900px;min-width:0;overflow-x:hidden;margin:0 auto;width:100%;}
/* Laptop cỡ nhỏ - trung (vd 1280x800, 1366x768): bớt padding + thu gọn lưới KPI một chút
   để không bị chật, nhưng vẫn giữ sidebar đầy đủ 240px như màn hình lớn. */
@media (max-width:1366px) and (min-width:1101px){
  .main{padding:22px 24px 50px;}
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
}
/* Màn hình cực rộng (vd 2560px+): nới thêm chút padding, vẫn canh giữa, không giới hạn hẹp lại nữa. */
@media (min-width:2200px){
  .main{padding:32px 48px 70px;}
}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:12px;}
.topbar h2{font-size:22px;font-weight:800;margin:0;letter-spacing:-.3px;color:var(--ink);}
.topbar .sub{color:var(--ink-dim);font-size:13px;margin-top:3px;}
.topbar-actions{display:flex;gap:10px;align-items:center;}

.view{display:none;}
.view.active{display:block;}

/* ---------- Cards / KPI ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:22px;}
.kpi-card{
  background:var(--card);border-radius:var(--radius);padding:18px 18px;box-shadow:var(--shadow);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;
}
.kpi-card .top-row{display:flex;align-items:flex-start;justify-content:space-between;}
.icon-badge{
  width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:17px;flex-shrink:0;
}
.icon-badge.c-blue{background:var(--primary-dim);color:var(--primary);}
.icon-badge.c-teal{background:var(--teal-dim);color:var(--teal);}
.icon-badge.c-gold{background:var(--gold-dim);color:var(--gold);}
.icon-badge.c-red{background:var(--red-dim);color:var(--red);}
.icon-badge.c-purple{background:var(--purple-dim);color:var(--purple);}
.icon-badge.c-pink{background:var(--pink-dim);color:var(--pink);}
.icon-badge.c-gray{background:var(--bg-soft);color:var(--ink-dim);}
.qc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.qc-item{display:flex;align-items:center;gap:12px;text-align:left;padding:14px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;transition:border-color .15s,transform .1s;}
.qc-item:hover{border-color:var(--primary);transform:translateY(-1px);}
.qc-icon{width:38px;height:38px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;}
.qc-text{display:flex;flex-direction:column;gap:2px;}
.qc-text strong{font-size:13.5px;color:var(--ink);}
.qc-text .helper-text{margin:0;font-size:11.5px;}
@media (max-width:560px){.qc-grid{grid-template-columns:1fr;}}
.kpi-card .lbl{font-size:12px;color:var(--ink-dim);font-weight:600;}
.kpi-card .val{font-size:22px;font-weight:800;letter-spacing:-.4px;color:var(--ink);}
.kpi-card .val.pos{color:var(--teal);}
.kpi-card .val.neg{color:var(--red);}
.pos{color:var(--teal);}
.neg{color:var(--red);}
.kpi-card .delta{font-size:12px;color:var(--ink-faint);}

.card{background:var(--card);border-radius:calc(var(--radius) + 2px);padding:20px;box-shadow:var(--shadow);border:1px solid var(--line);margin-bottom:18px;}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
.card-head h3{font-size:15px;font-weight:800;margin:0;color:var(--ink);}
.card-head .actions{display:flex;gap:8px;}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto;overflow-y:auto;max-height:72vh;}
table.data{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;}
table.data td:not(.num){max-width:220px;word-wrap:break-word;}
table.data thead{position:sticky;top:0;z-index:5;}
table.data th{
  text-align:center;padding:10px 12px;background:var(--bg-soft);color:var(--ink-dim);
  font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
table.data th:not(:last-child){border-right:1px solid var(--line);}
table.data td:not(:last-child){border-right:1px solid var(--line);}
.project-totals-row td{
  background:var(--primary-dim);border-bottom:2px solid var(--primary);white-space:nowrap;font-weight:800;
}
table.data th:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px;}
table.data th:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px;}
table.data td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle;}
table.data tr:hover td{background:var(--bg-soft);}
table.data td.num{text-align:right;font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;}
.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;}
.tag-in{background:var(--teal-dim);color:var(--teal);}
.tag-out{background:var(--red-dim);color:var(--red);}
.tag-blue{background:var(--blue-dim);color:var(--blue);}
.tag-gold{background:var(--gold-dim);color:var(--gold);}
.tag-red{background:var(--red-dim);color:var(--red);}
tr.row-overdue-alert{background:var(--red-dim) !important;}
tr.row-overdue-alert td{border-color:rgba(245,69,92,.25);}
.tag-gray{background:var(--bg-soft);color:var(--ink-dim);}
.tx-project-block{padding:16px 20px;}
.tx-pending-block{border:1.5px solid var(--gold);background:var(--gold-dim);}
.tx-pending-block .tx-project-head{border-bottom-color:var(--gold);}
.tx-pending-block h4{color:var(--gold);}
.tx-pending-block table.data{background:var(--card);}
.tx-project-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:10px;padding-bottom:10px;border-bottom:1.5px solid var(--line);}
.tx-project-head h4{margin:0;font-size:15px;}
.tx-project-summary{display:flex;gap:16px;font-size:12.5px;color:var(--ink-dim);flex-wrap:wrap;}
tr.tx-subhead td{background:var(--bg-soft);font-weight:700;font-size:11.5px;letter-spacing:.3px;color:var(--ink-dim);padding:6px 12px;border-bottom:1px solid var(--line);}
tr.tx-subhead-in td{color:var(--teal);}
tr.tx-subhead-out td{color:var(--red);}
tr td.tx-subhead-empty{color:var(--ink-faint);font-style:italic;font-size:12.5px;}
.chart-total-panel{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.chart-total-box{flex:1;min-width:150px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:center;box-shadow:var(--shadow);}
.chart-total-box .lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-dim);margin-bottom:6px;}
.chart-total-box .val{font-size:16px;font-weight:800;padding:6px 8px;border-radius:8px;color:#fff;}
.chart-total-box.cost .val{background:#3B57D9;}
.chart-total-box.revenue .val{background:#C0392B;}
.chart-total-box.profit .val{background:#7A9A3B;}
.exp-block{border-top:1px solid var(--line);padding-top:12px;margin-top:8px;}
#ts-grid-table{border-collapse:separate;border-spacing:3px;}
#ts-grid-table td[data-grid-cell]{
  border:1.5px solid var(--line); border-radius:8px; text-align:center;
  font-weight:700; font-size:13px; transition:all .12s; background:var(--card);
  padding:6px 4px;
}
#ts-grid-table td[data-grid-cell]:hover{
  border-color:var(--primary); background:var(--primary-dim); transform:scale(1.05); box-shadow:0 2px 8px rgba(79,110,247,.25);
}
#ts-grid-table th{white-space:nowrap;text-align:center;}
#ts-grid-table td:first-child, #ts-grid-table th:first-child{text-align:left;}
.exp-block-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px;display:block;}
.exp-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.exp-row .field label{font-size:11.5px;margin-bottom:4px;}
.exp-row .field input,.exp-row .field select{font-size:13px;padding:8px 10px;}
.exp-row .field{flex:1;min-width:120px;margin-bottom:0;}
.exp-row .field.grow2{flex:2;}
.exp-row .field.grow-sm{flex:0.6;min-width:70px;}
/* Giải chi lệnh tạm ứng: gom 5 khung Giải chi thành 1 cột dọc, cuộn lên xuống — không dùng lưới 2 cột như trước. */
#modal-order-explain .form-grid{grid-template-columns:1fr;}
.exp-attach-row{border-top:1px dashed var(--line);padding-top:10px;margin-top:4px;}
.inv-item-block{border:1.5px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;background:var(--bg-soft);}
.inv-item-block-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.inv-item-block-head strong{font-size:12.5px;color:var(--ink-dim);}
.inv-item-remove{background:none;border:none;color:var(--red);font-size:12px;cursor:pointer;padding:2px 6px;}
.inv-items-table td{padding:6px 8px;vertical-align:middle;}
.inv-items-table td input{width:100%;border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:12.5px;background:var(--card);}
.inv-items-table td input[type="number"]{padding:6px 4px;}
.inv-items-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.inv-items-total-row td{background:var(--bg-soft);padding:8px;}
.inv-items-total-row td.num{text-align:right;font-variant-numeric:tabular-nums;}
@media (max-width:720px){ .exp-row{flex-direction:column;} .exp-row .field{width:100%;} }
tr.tx-row-explained td{opacity:.5;}
tr.tx-row-explained td:not(:last-child){text-decoration:line-through;}
.approval-banner{display:flex;align-items:center;gap:12px;justify-content:space-between;background:var(--gold-dim);color:var(--gold);border-radius:12px;padding:12px 16px;margin-bottom:16px;font-weight:600;font-size:13.5px;flex-wrap:wrap;}
.approval-banner button{white-space:nowrap;}
.sidebar-backdrop{display:none;}
.fab-btn{
  position:fixed; bottom:92px; right:26px; z-index:500;
  width:56px; height:56px; border-radius:50%; border:none;
  background:var(--primary); color:#fff; font-size:28px; font-weight:400; line-height:1;
  box-shadow:0 8px 20px rgba(79,110,247,.4); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s;
}
.fab-btn:hover{transform:scale(1.06); background:var(--primary-dark);}
@media print{.fab-btn{display:none;}}
.notif-pill{user-select:none;}
.notif-pill b{color:var(--red);}
.sidebar-notif-pill{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; padding:9px; margin-bottom:6px; border-radius:10px;
  border:1.5px solid var(--line); background:var(--card); font-size:13px; font-weight:600;
  color:var(--ink-dim); user-select:none;
}
.sidebar-notif-pill:hover{border-color:var(--ink-faint); color:var(--ink);}
.sidebar-notif-pill b{color:var(--red);}
.notif-panel{
  position:fixed; width:380px; max-width:calc(100vw - 24px); max-height:460px; overflow-y:auto;
  background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:10px; z-index:600; cursor:default; text-align:left;
}
.notif-section{margin-bottom:10px;}
.notif-section-title{font-size:11px;font-weight:800;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;padding:4px 6px;}
.notif-item{display:block;padding:9px 8px;border-radius:9px;font-size:12.5px;line-height:1.4;cursor:pointer;color:var(--ink-dim);white-space:normal;overflow-wrap:break-word;}
.notif-item:hover{background:var(--bg-soft);color:var(--ink);}
.notif-item .notif-title{color:var(--ink);font-weight:600;}
/* Chưa xem: chữ đậm, có chấm xanh đánh dấu, nằm trên cùng trong từng mục. Đã xem: làm xám đi để dễ phân biệt. */
.notif-item-unread{background:var(--primary-dim);}
.notif-item-unread .notif-title{font-weight:800;color:var(--ink);}
.notif-item-unread .notif-title::before{content:'●';color:var(--primary);margin-right:6px;font-size:9px;vertical-align:middle;}
.notif-item-read{opacity:.55;}
.notif-item-read .notif-title{font-weight:500;color:var(--ink-faint);}
.notif-empty{padding:16px 8px;text-align:center;color:var(--ink-faint);font-size:12.5px;}
.row-actions{display:flex;gap:6px;}
.icon-btn{background:var(--bg-soft);border:none;color:var(--ink-dim);font-size:13px;padding:6px 8px;border-radius:8px;}
.icon-btn:hover{background:var(--primary-dim);color:var(--primary);}
.order-approve-cell{white-space:nowrap;text-align:center;}
.empty-state{text-align:center;padding:44px 20px;color:var(--ink-faint);}
.empty-state .big{font-size:30px;margin-bottom:8px;}
.thumb-img{width:36px;height:36px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:pointer;}
.thumb-img:hover{outline:2px solid var(--primary);}

/* ---------- Filters bar ---------- */
.filters-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center;}
.filters-bar select, .filters-bar input{
  padding:8px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:13px;background:var(--card);color:var(--ink);
}
.filters-bar .spacer{flex:1;}

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(30,36,51,.45);backdrop-filter:blur(2px);
  display:none;align-items:flex-start;justify-content:center;z-index:100;padding:40px 16px;overflow-y:auto;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--card);border-radius:18px;width:100%;max-width:560px;box-shadow:0 30px 80px rgba(0,0,0,.35);
  animation:modalIn .16s ease-out;
}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);}
.modal-head h3{margin:0;font-size:16px;font-weight:800;color:var(--ink);}
.modal-close{background:var(--bg-soft);border:none;font-size:15px;color:var(--ink-dim);width:28px;height:28px;border-radius:8px;}
.modal-body{padding:20px 22px;max-height:70vh;overflow-y:auto;}
.modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-grid .full{grid-column:1/-1;}
.form-grid .field{margin-bottom:0;}
.seg{display:flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;}
.seg button{flex:1;padding:9px;border:none;background:var(--card);font-size:13px;font-weight:700;color:var(--ink-dim);}
.seg button.active-in{background:var(--teal-dim);color:var(--teal);}
.seg button.active-out{background:var(--red-dim);color:var(--red);}
.seg button.active-gold{background:var(--gold-dim);color:var(--gold);}
.seg button.active-gray{background:var(--bg-soft);color:var(--ink-dim);}
.seg-4 button{font-size:11.5px;padding:8px 3px;}
@media (max-width:480px){ .seg-4{flex-wrap:wrap;border-radius:10px;} .seg-4 button{flex:1 1 50%;} }

/* ---------- Toast ---------- */
#toast{
  position:fixed;bottom:22px;right:22px;background:#1E2433;color:#fff;
  padding:12px 18px;border-radius:12px;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  z-index:200;opacity:0;transform:translateY(10px);transition:all .2s;pointer-events:none;
}
#toast.show{opacity:1;transform:none;}

/* ---------- Welcome card (Dashboard) ---------- */
.welcome-card{
  background:linear-gradient(120deg, var(--card), var(--primary-dim));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  margin-bottom:18px;
  box-shadow:var(--shadow);
}
.welcome-left{display:flex;align-items:center;gap:14px;}
.welcome-avatar{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  color:#fff;font-weight:800;font-size:19px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(79,110,247,.3);
  flex-shrink:0;
}
.welcome-greet{font-size:12.5px;color:var(--ink-dim);font-weight:600;}
.welcome-name{font-size:18px;font-weight:800;color:var(--ink);margin-top:1px;}
.welcome-sub{font-size:12.5px;color:var(--ink-faint);margin-top:2px;}
.welcome-pills{display:flex;gap:10px;flex-wrap:wrap;}
.welcome-pill{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:8px 14px;font-size:12.5px;color:var(--ink-dim);font-weight:600;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.welcome-pill b{color:var(--ink);font-weight:800;}

/* ---------- Theme toggle ---------- */
.theme-toggle{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:9px 10px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg-soft);color:var(--ink-dim);font-size:12.5px;font-weight:600;
  margin-bottom:10px;transition:background .12s,color .12s;
}
.theme-toggle:hover{background:var(--primary-dim);color:var(--primary);}

/* ---------- Chart wrap ---------- */
.chart-wrap{position:relative;height:340px;overflow:hidden;min-width:0;}
.two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;}
@media (max-width:980px){.two-col{grid-template-columns:1fr;}}

/* ---------- Responsive ---------- */
/* Tablet (điện thoại ngang lớn / máy tính bảng đứng, vd iPad Mini/Air, Galaxy Tab): giữ sidebar
   nhưng thu hẹp lại + giảm padding để bảng dữ liệu có nhiều chỗ hơn, chưa cần chuyển sang menu ẩn. */
@media (max-width:1100px) and (min-width:841px){
  .shell{grid-template-columns:200px 1fr;}
  .sidebar{padding:16px 10px;}
  .main{padding:20px 20px 60px;}
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
}
/* Điện thoại + tablet nhỏ (đứng): chuyển sidebar thành menu trượt (drawer), bảng full width. */
@media (max-width:840px){
  .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:85;}
  .sidebar-backdrop.open{display:block;}
  .shell{grid-template-columns:1fr;}
  .sidebar{position:fixed;left:-260px;width:240px;z-index:90;transition:left .2s;box-shadow:10px 0 30px rgba(31,41,64,.15);}
  .sidebar.open{left:0;}
  .main{padding:16px 14px 60px;}
  .form-grid{grid-template-columns:1fr;}
  #menu-toggle{display:inline-flex !important;margin-bottom:14px;width:40px;height:40px;}
  .modal-backdrop{padding:0;align-items:stretch;}
  .modal{max-width:100%;width:100%;border-radius:0;min-height:100vh;}
  .modal-body{padding:16px;}
  .modal-head{padding:14px 16px;}
  .modal-foot{padding:12px 16px;}
  .exp-row{flex-direction:column;}
  .exp-row .field{width:100%;}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:10px;}
  table.data{font-size:12px;}
  table.data th,table.data td{padding:8px 8px;}
  .topbar h2{font-size:19px;}
  .card{padding:16px;}
  .tx-project-block{padding:14px 16px;}
  .tx-project-head{flex-direction:column;align-items:flex-start;}
  .tx-project-summary{gap:10px;font-size:12px;}
  .row-actions{flex-wrap:wrap;}
  .icon-btn{padding:8px 9px;font-size:14px;}
  .filters-bar{gap:8px;}
  .filters-bar select,.filters-bar input{flex:1 1 140px;min-width:0;}
  .notif-panel{width:calc(100vw - 24px);}
  .fab-btn{bottom:84px;right:18px;width:52px;height:52px;font-size:26px;}
  .two-col{gap:12px;}
  .chart-wrap{height:260px;}
}
@media (max-width:420px){
  .kpi-grid{grid-template-columns:1fr;}
  .welcome-pills{flex-direction:column;align-items:stretch;}
  .card{padding:14px;}
  .login-card{padding:28px 20px 24px;}
  table.data{font-size:11.5px;}
  table.data th,table.data td{padding:7px 6px;}
  .topbar{flex-direction:column;align-items:flex-start;}
}
#menu-toggle{display:none;background:var(--card);border:1px solid var(--line);border-radius:10px;width:36px;height:36px;align-items:center;justify-content:center;font-size:15px;color:var(--ink-dim);}

.badge-count{background:var(--gold);color:#5A3B00;font-size:10px;font-weight:800;padding:1px 6px;border-radius:999px;margin-left:auto;}
.helper-text{font-size:12px;color:var(--ink-faint);margin-top:4px;}
.tx-view-grid{display:grid;grid-template-columns:150px 1fr;gap:10px 14px;font-size:13.5px;}
.tx-view-grid dt{color:var(--ink-faint);font-weight:600;}
.tx-view-grid dd{margin:0;color:var(--ink);}
.tx-view-section{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.tx-view-section h5{margin:0 0 10px;font-size:13px;color:var(--ink-dim);}
.tx-view-note{background:var(--bg-soft);border-radius:10px;padding:12px 14px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;}
.tx-view-images{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;}
.tx-view-images img{max-width:180px;max-height:180px;border-radius:10px;border:1px solid var(--line);cursor:zoom-in;}
.print-only{display:none;}
@media print{
  .sidebar,.topbar-actions,.filters-bar,.no-print{display:none !important;}
  .main{padding:0;max-width:none;}
  .print-only{display:block;}
  body{background:#fff;}
}