:root{
  --navy-900:#0c2338;
  --navy-800:#123049;
  --navy-700:#1a3a5c;
  --navy-600:#264d74;
  --ocean-500:#2b7a9e;
  --ocean-100:#e4eff3;
  --sand-50:#f7f5f0;
  --sand-100:#efece3;
  --ink-900:#152233;
  --ink-500:#5b6b7a;
  --line:#e2ddd1;
  --success-600:#2f9e6f;
  --success-100:#e2f5ec;
  --warn-600:#c96a3e;
  --warn-100:#fbe9e0;
  --danger-600:#b42318;
  --danger-100:#fde3e1;
  --radius:12px;
  --shadow:0 1px 2px rgba(12,35,56,.06), 0 4px 16px rgba(12,35,56,.08);
}

[hidden]{display:none !important;}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Be Vietnam Pro', sans-serif;
  background:var(--sand-50);
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button, input, select, textarea{font-family:inherit;}
h1,h2,h3{margin:0;}
p{margin:0;}

/* ---------- buttons ---------- */
.btn{
  appearance:none; border:1px solid var(--line); background:#fff; color:var(--navy-700);
  border-radius:10px; padding:10px 16px; font-size:14px; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--navy-700); border-color:var(--navy-700); color:#fff;}
.btn-primary:active{background:var(--navy-800);}
.btn-accent{background:var(--ocean-500); border-color:var(--ocean-500); color:#fff;}
.btn-ghost{background:#fff; color:var(--navy-700);}
.btn-block{width:100%;}
.btn-sm{padding:6px 10px; font-size:12.5px; border-radius:8px;}
.btn[disabled]{opacity:.55; pointer-events:none;}

.icon-btn{
  width:40px; height:40px; border-radius:10px; border:0; background:transparent;
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.icon-btn:active{background:rgba(255,255,255,.12);}

/* ---------- login ---------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, var(--navy-900), var(--navy-700));
  padding:24px;
}
.login-card{
  width:100%; max-width:360px; background:#fff; border-radius:16px; padding:28px 24px;
  box-shadow:var(--shadow); text-align:center;
}
.login-logo{width:64px; height:64px; border-radius:16px; margin-bottom:12px;}
.login-card h1{font-size:20px; color:var(--navy-900); margin-bottom:4px;}
.login-sub{color:var(--ink-500); font-size:13px; margin-bottom:20px;}
.login-form{display:flex; flex-direction:column; gap:14px; text-align:left;}
.field{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--ink-500);}
.field input, select{
  border:1px solid var(--line); border-radius:10px; padding:11px 12px; font-size:15px; color:var(--ink-900);
  background:var(--sand-50); font-family:inherit; width:100%;
}
.field input:focus, select:focus{outline:2px solid var(--ocean-500); outline-offset:1px;}
.login-error{
  background:var(--danger-100); color:var(--danger-600); border-radius:8px; padding:10px 12px; font-size:13px; font-weight:600;
}

/* ---------- app shell ---------- */
.app-shell{min-height:100vh; display:flex; flex-direction:column;}
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:8px;
  background:var(--navy-900); color:#fff;
  padding:10px 8px; padding-top:max(10px, env(safe-area-inset-top));
  box-shadow:var(--shadow);
}
.topbar-title{flex:1; font-size:16px; font-weight:700;}

.nav-overlay{
  position:fixed; inset:0; background:rgba(12,35,56,.45); z-index:30;
}
.nav-drawer{
  position:fixed; top:0; left:0; bottom:0; width:82%; max-width:300px; z-index:31;
  background:#fff; box-shadow:var(--shadow);
  display:flex; flex-direction:column; padding:16px 10px;
  padding-top:max(16px, env(safe-area-inset-top));
  transform:translateX(0);
}
.nav-user{
  padding:10px 12px 16px; border-bottom:1px solid var(--line); margin-bottom:8px;
}
.nav-user-name{font-weight:700; color:var(--navy-900); font-size:15px;}
.nav-user-role{color:var(--ink-500); font-size:12px; margin-top:2px;}
.nav-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  border:0; background:transparent; padding:13px 12px; border-radius:10px;
  font-size:14.5px; font-weight:600; color:var(--ink-900); cursor:pointer;
}
.nav-item:active{background:var(--ocean-100);}
.nav-item.is-active{background:var(--ocean-100); color:var(--navy-700);}
.nav-spacer{flex:1;}
.nav-item-logout{color:var(--danger-600);}

.content{flex:1; padding:12px 12px 32px; max-width:720px; margin:0 auto; width:100%;}

/* ---------- toast ---------- */
.toast-host{
  position:fixed; left:0; right:0; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none;
}
.toast{
  background:var(--navy-900); color:#fff; padding:10px 16px; border-radius:10px;
  font-size:13px; font-weight:600; box-shadow:var(--shadow); max-width:90vw;
}
.toast.is-error{background:var(--danger-600);}

/* ---------- shared: cards, tabs, lists ---------- */
.segmented{
  display:flex; background:var(--sand-100); border-radius:10px; padding:3px; gap:2px;
}
.segmented button{
  flex:1; border:0; background:transparent; padding:9px 8px; border-radius:8px;
  font-size:13px; font-weight:700; color:var(--ink-500); cursor:pointer;
}
.segmented button.is-active{background:#fff; color:var(--navy-700); box-shadow:var(--shadow);}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:10px; box-shadow:var(--shadow);
}
.card-row{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.muted{color:var(--ink-500);}
.money{font-variant-numeric:tabular-nums; font-weight:700;}
.money.positive{color:var(--danger-600);}
.money.negative{color:var(--success-600);}

.search-bar{
  display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:9px 12px; margin-bottom:10px;
}
.search-bar input{border:0; outline:0; flex:1; font-size:14px; background:transparent; color:var(--ink-900);}

.empty-state{
  text-align:center; color:var(--ink-500); padding:40px 16px; font-size:13.5px;
}
.loading-state{text-align:center; color:var(--ink-500); padding:24px; font-size:13.5px;}

.chip{
  display:inline-flex; align-items:center; border-radius:999px; padding:3px 10px;
  font-size:11.5px; font-weight:700; background:var(--ocean-100); color:var(--ocean-500);
}
.chip.ok{background:var(--success-100); color:var(--success-600);}
.chip.warn{background:var(--warn-100); color:var(--warn-600);}

/* ---------- week/month pager ---------- */
.period-pager{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin-bottom:10px;
}
.period-pager .period-label{font-weight:700; color:var(--navy-900); font-size:14px; text-align:center; flex:1;}
.period-pager button{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--line); background:#fff;
  color:var(--navy-700); font-size:16px; cursor:pointer;
}

/* ---------- modal / sheet ---------- */
.sheet-overlay{position:fixed; inset:0; background:rgba(12,35,56,.45); z-index:40;}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:41; background:#fff;
  border-radius:16px 16px 0 0; max-height:88vh; overflow-y:auto;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px rgba(12,35,56,.18);
}
.sheet-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.sheet-header h2{font-size:16px; color:var(--navy-900);}
.sheet-close{border:0; background:var(--sand-100); width:32px; height:32px; border-radius:8px; color:var(--ink-500); font-size:16px; cursor:pointer;}

/* ---------- công nợ tuần ---------- */
.week-chip-row{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:10px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.week-chip-row::-webkit-scrollbar{display:none;}
.week-chip{
  flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--ink-500);
  border-radius:999px; padding:8px 14px; font-size:12.5px; font-weight:700; white-space:nowrap; cursor:pointer;
}
.week-chip.is-active{background:var(--navy-700); border-color:var(--navy-700); color:#fff;}

.debt-stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px;}
.debt-stat{display:flex; flex-direction:column; gap:3px;}
.debt-stat-label{font-size:11px; color:var(--ink-500); text-transform:uppercase; font-weight:700;}
.debt-stat .money{font-size:14px;}

/* ---------- công nợ tuần: tools, filter, summary, list ---------- */
.db-tools{display:flex; gap:8px; margin-bottom:10px;}
.db-sort-btn{
  flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--ink-500);
  border-radius:10px; padding:0 14px; font-size:12.5px; font-weight:700; cursor:pointer;
}
.db-sort-btn.is-active{background:var(--danger-100); border-color:#f3c6c1; color:var(--danger-600);}

.db-filter-tabs{margin-bottom:10px;}

.db-summary-bar{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;}
.db-sum-card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 12px;}
.db-sum-card span{display:block; font-size:10px; font-weight:700; color:var(--ink-500); text-transform:uppercase; letter-spacing:.03em; margin-bottom:2px;}
.db-sum-card b{font-size:16px; font-weight:800;}
.db-sum-card b.positive{color:var(--danger-600);}
.db-sum-card b.negative{color:var(--success-600);}

.db-group-label{padding:12px 2px 6px; font-size:11px; font-weight:700; color:var(--ink-500); text-transform:uppercase; letter-spacing:.05em;}

.db-row{
  width:100%; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:11px 12px; margin-bottom:8px;
}
.db-row-name{font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:8px;}
.db-row-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:4px;}
.db-col{display:flex; flex-direction:column; align-items:center; text-align:center;}
.db-col span{font-size:8.5px; font-weight:700; color:var(--ink-500); text-transform:uppercase; margin-bottom:3px; white-space:nowrap;}
.db-col b{font-size:12.5px; font-weight:800; white-space:nowrap;}
.db-col b.positive{color:var(--danger-600);}
.db-col b.negative{color:var(--success-600);}
.db-link{
  appearance:none; border:0; background:transparent; padding:0; font-family:inherit; cursor:pointer;
  font-size:12.5px; font-weight:800; color:var(--ocean-500); text-decoration:underline; white-space:nowrap;
}

/* ---------- công nợ tuần: sheet Doanh thu theo ngày / Thanh toán ---------- */
.db-modal-row{display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); gap:10px;}
.db-modal-row-block{display:block;}
.db-modal-row:last-of-type{border-bottom:none;}
.db-modal-total{font-weight:800; padding-top:12px; border-top:2px solid var(--line); margin-top:4px;}

/* ---------- doanh thu: cây Công ty/Ngày → Công trình → Vật tư ---------- */
.rv-tree{background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:12px;}
.rv-tree-row{display:flex; align-items:center; padding:11px 12px; cursor:pointer; border-bottom:1px solid var(--line); gap:8px;}
.rv-tree-row:last-child{border-bottom:none;}
.rv-tree-row.l1{background:var(--navy-700); color:#fff;}
.rv-tree-row.l1 .rv-tree-count{color:rgba(255,255,255,.7);}
.rv-tree-row.l2{background:var(--ocean-100); color:var(--navy-900); padding-left:30px;}
.rv-tree-leaf{display:flex; align-items:flex-start; justify-content:space-between; padding:9px 12px 9px 46px; border-bottom:1px solid var(--line); gap:8px; background:#fff;}
.rv-tree-leaf:last-child{border-bottom:none;}
.rv-tree-arrow{width:12px; flex-shrink:0; transition:transform .15s; font-size:12px;}
.rv-tree-arrow.open{transform:rotate(90deg);}
.rv-tree-label{flex:1; min-width:0; font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rv-tree-count{font-size:11px; opacity:.75; margin-right:2px; flex-shrink:0;}
.rv-tree-amt{font-weight:800; font-size:12.5px; flex-shrink:0; white-space:nowrap;}

/* ---------- doanh thu: báo cáo hằng ngày (xem-only) ---------- */
.rp-card{cursor:pointer;}
.rp-card:active{background:var(--ocean-100);}
.rp-delete{border:0; background:transparent; font-size:15px; padding:2px 6px; cursor:pointer; line-height:1;}

/* ---------- nhật ký ---------- */
.jn-list{background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.jn-row{padding:8px 12px; border-bottom:1px solid var(--line); cursor:pointer;}
.jn-row:last-child{border-bottom:none;}
.jn-row:active{background:var(--ocean-100);}
.jn-row-top{display:flex; align-items:baseline; gap:7px;}
.jn-date{font-size:11px; color:var(--ink-500); font-weight:700; flex-shrink:0; width:32px;}
.jn-title{flex:1; min-width:0; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.jn-amt{font-size:12.5px; flex-shrink:0; white-space:nowrap;}
.jn-row-sub{font-size:10.5px; color:var(--ink-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:39px; margin-top:1px;}

@media (min-width:600px){
  .login-card{max-width:400px;}
}