/* ========== 胡大祥仓储端 - 绿色主题 ========== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* ---------- 移动端预览容器 ---------- */
html{background:#e8e8e8}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Roboto,sans-serif;
  background:#f0f7f0;
  color:#2d3748;
  font-size:15px;
  line-height:1.5;
  max-width:420px;
  margin:0 auto;
  min-height:100vh;
  position:relative;
  box-shadow:0 0 40px rgba(0,0,0,.12);
}
/* 桌面宽屏时显示手机框效果 */
@media(min-width:500px){
  body{margin:24px auto;border-radius:24px;overflow:hidden;min-height:calc(100vh - 48px)}
}
a{color:var(--green);text-decoration:none}
input,select,textarea,button{font-size:inherit;font-family:inherit;outline:none}
button{cursor:pointer;min-height:44px;min-width:44px}
input,select,textarea{width:100%;padding:10px 14px;border:1.5px solid #e0e8e0;border-radius:10px;background:#fff;transition:border-color .2s,box-shadow .2s;color:#2d3748}
input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(5,150,105,.12)}
textarea{resize:vertical;min-height:80px}
select{-webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%239ca3af'/%3E%3C/svg%3E") no-repeat right 12px center;padding-right:32px}

/* ---------- 主题色 ---------- */
:root{--green:#059669;--green-dark:#047857;--green-light:#d1fae5;--green-bg:#ecfdf5;--green-gradient:linear-gradient(135deg,#059669,#10b981)}

/* ---------- Header ---------- */
.header{
  background:var(--green-gradient);
  color:#fff;
  padding:16px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 12px rgba(5,150,105,.2);
}
.header .back{
  background:rgba(255,255,255,.18);
  border:none;
  color:#fff;
  width:32px;height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  cursor:pointer;
  min-width:auto;min-height:auto;
  transition:background .2s;
}
.header .back:active{background:rgba(255,255,255,.3)}
.header h1{font-size:17px;font-weight:600;flex:1}
.header .right{display:flex;align-items:center;gap:8px}
.header .right .user-badge{background:rgba(255,255,255,.2);padding:4px 10px;border-radius:20px;font-size:12px;font-weight:400}

/* ---------- Container ---------- */
.container{padding:16px 14px 80px}
.page{display:none}
.page.active{display:block}

/* ---------- Cards ---------- */
.card{
  background:#fff;
  border-radius:14px;
  padding:16px;
  margin-bottom:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.03);
  transition:transform .15s,box-shadow .15s;
}
.card:active{transform:scale(.99)}
.card-title{font-size:13px;color:#6b7280;margin-bottom:6px;font-weight:500}
.card-value{font-size:24px;font-weight:700;color:var(--green);line-height:1.2}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 22px;
  border-radius:10px;
  font-weight:600;
  font-size:15px;
  border:none;
  min-height:44px;
  gap:6px;
  transition:all .2s;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--green-gradient);color:#fff;box-shadow:0 2px 8px rgba(5,150,105,.25)}
.btn-success{background:#10b981;color:#fff}
.btn-danger{background:#ef4444;color:#fff;box-shadow:0 2px 8px rgba(239,68,68,.2)}
.btn-warning{background:#f59e0b;color:#fff}
.btn-outline{background:transparent;border:1.5px solid var(--green);color:var(--green)}
.btn-ghost{background:transparent;color:var(--green)}
.btn-sm{padding:6px 14px;font-size:13px;min-height:36px;border-radius:8px}
.btn-block{width:100%;display:flex}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}
.btn-group .btn{flex:1}

/* ---------- Bottom Nav ---------- */
.bottom-nav{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:420px;
  background:#fff;
  display:flex;
  border-top:1px solid #f0f0f0;
  z-index:100;
  padding:4px 0;
  padding-bottom:calc(4px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 12px rgba(0,0,0,.04);
  border-radius:16px 16px 0 0;
}
.bottom-nav a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:6px 0 4px;
  font-size:11px;
  color:#9ca3af;
  gap:1px;
  min-height:auto;
  text-decoration:none;
  transition:color .2s;
  border-radius:8px;
}
.bottom-nav a.active{color:var(--green);font-weight:600}
.bottom-nav a .icon{font-size:20px;line-height:1.2}

/* ---------- Stats Cards ---------- */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.stat-card{
  background:#fff;
  border-radius:12px;
  padding:12px 8px;
  text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.stat-card .num{font-size:22px;font-weight:700;line-height:1.3}
.stat-card .label{font-size:11px;color:#9ca3af;margin-top:3px}
.stat-card.green .num{color:var(--green)}
.stat-card.orange .num{color:#f59e0b}
.stat-card.blue .num{color:#3b82f6}
.stat-card.red .num{color:#ef4444}

/* ---------- Status Badge ---------- */
.badge{
  display:inline-block;
  padding:2px 10px;
  border-radius:20px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.3px;
}
.badge-pending{background:#fef3c7;color:#d97706}
.badge-approved{background:#d1fae5;color:#059669}
.badge-rejected{background:#fee2e2;color:#dc2626}
.badge-completed{background:#d1fae5;color:#059669}
.badge-progress{background:#dbeafe;color:#2563eb}
.badge-green{background:#d1fae5;color:#059669}
.badge-orange{background:#fef3c7;color:#d97706}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto;margin:0 -16px;padding:0 16px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
th,td{padding:8px 6px;text-align:center;border-bottom:1px solid #f3f4f6}
th{
  background:#f9fafb;
  color:#6b7280;
  font-weight:600;
  font-size:12px;
  position:sticky;
  top:0;
}
tr:last-child td{border-bottom:none}
tr:active td{background:#f0fdf4}

/* ---------- List Item ---------- */
.list-item{display:flex;align-items:center;padding:14px 0;border-bottom:1px solid #f3f4f6;gap:12px}
.list-item:last-child{border:none}
.list-item .info{flex:1}
.list-item .title{font-weight:600;font-size:15px}
.list-item .sub{font-size:12px;color:#9ca3af;margin-top:2px}
.list-item .right{text-align:right}

/* ---------- Modal ---------- */
.modal-overlay{
  display:none;
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:200;
  justify-content:center;
  align-items:center;
  padding:24px;
}
.modal-overlay.show{display:flex}
.modal{
  background:#fff;
  border-radius:18px;
  width:100%;
  max-width:400px;
  max-height:80vh;
  overflow-y:auto;
  animation:modalIn .3s ease;
  box-shadow:0 20px 60px rgba(0,0,0,.15);
}
@keyframes modalIn{
  from{transform:translateY(30px) scale(.96);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}
.modal-header{
  padding:16px 20px 12px;
  display:flex;
  align-items:center;
  border-bottom:1px solid #f3f4f6;
  position:sticky;
  top:0;
  background:#fff;
  z-index:1;
}
.modal-header h3{flex:1;font-size:16px;font-weight:600}
.modal-header .close{
  background:none;border:none;
  font-size:24px;color:#9ca3af;
  min-width:auto;min-height:auto;
  cursor:pointer;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  transition:background .2s;
}
.modal-header .close:active{background:#f3f4f6}
.modal-body{padding:16px 20px}
.modal-footer{
  padding:12px 20px 16px;
  display:flex;
  gap:10px;
  border-top:1px solid #f3f4f6;
}
.modal-footer .btn{flex:1}

/* ---------- Form ---------- */
.form-group{margin-bottom:14px}
.form-group label{
  display:block;
  font-size:12px;
  color:#6b7280;
  margin-bottom:5px;
  font-weight:600;
  letter-spacing:.3px;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- Tabs ---------- */
.tabs{
  display:flex;
  background:#e8f5e9;
  border-radius:10px;
  padding:3px;
  margin-bottom:14px;
}
.tabs .tab{
  flex:1;
  text-align:center;
  padding:8px 6px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  color:#6b7280;
  cursor:pointer;
  transition:all .25s;
}
.tabs .tab.active{
  background:#fff;
  color:var(--green);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}

/* ---------- Search ---------- */
.search-bar{display:flex;gap:8px;margin-bottom:12px}
.search-bar input{flex:1;border-radius:10px;padding-left:36px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center;background-size:16px}

/* ---------- Entry Grid ---------- */
.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.entry-card{
  background:#fff;
  border-radius:16px;
  padding:26px 12px;
  text-align:center;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
  cursor:pointer;
  transition:all .2s;
  border:1.5px solid transparent;
}
.entry-card:active{transform:scale(.96);border-color:var(--green);box-shadow:0 4px 16px rgba(5,150,105,.12)}
.entry-card .icon{font-size:34px;margin-bottom:8px}
.entry-card .name{font-size:14px;font-weight:600;color:#374151}

/* ---------- Filter ---------- */
.filter-bar{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.filter-bar .filter-btn{
  padding:5px 14px;
  border-radius:20px;
  border:1.5px solid #e0e8e0;
  background:#fff;
  font-size:12px;
  cursor:pointer;
  min-height:auto;
  transition:all .2s;
  color:#6b7280;
}
.filter-bar .filter-btn.active{
  border-color:var(--green);
  background:var(--green-bg);
  color:var(--green);
  font-weight:600;
}

/* ---------- Entry Buttons (home) ---------- */
.entry-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:16px;
  padding:26px 16px;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
  cursor:pointer;
  min-height:110px;
  border:1.5px solid transparent;
  transition:all .2s;
}
.entry-btn:active{transform:scale(.96);border-color:var(--green);box-shadow:0 4px 16px rgba(5,150,105,.12)}
.entry-btn .icon{font-size:34px;margin-bottom:8px}
.entry-btn .label{font-size:14px;font-weight:600;color:#374151}

/* ---------- Detail Row ---------- */
.detail-row{
  display:flex;
  padding:10px 0;
  border-bottom:1px solid #f3f4f6;
  align-items:flex-start;
}
.detail-row:last-child{border-bottom:none}
.detail-row .label{
  width:80px;
  font-size:13px;
  color:#9ca3af;
  flex-shrink:0;
}
.detail-row .value{flex:1;font-weight:500;word-break:break-all}

/* ---------- Toast ---------- */
.toast{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.78);
  color:#fff;
  padding:14px 28px;
  border-radius:12px;
  font-size:14px;
  z-index:999;
  animation:toastIn .25s ease;
  pointer-events:none;
  backdrop-filter:blur(4px);
  max-width:80%;
  text-align:center;
}
@keyframes toastIn{
  from{transform:translate(-50%,-40%);opacity:0}
  to{transform:translate(-50%,-50%);opacity:1}
}

/* ---------- Empty ---------- */
.empty{text-align:center;padding:48px 20px;color:#d1d5db}
.empty .icon{font-size:52px;margin-bottom:12px}
.empty p{font-size:14px;color:#9ca3af}

/* ---------- Progress Bar ---------- */
.progress-bar{margin-top:8px;background:#f3f4f6;border-radius:10px;height:6px;overflow:hidden}
.progress-bar .fill{height:100%;background:var(--green-gradient);border-radius:10px;transition:width .5s ease}

/* ---------- Section Divider ---------- */
.section-title{font-size:14px;font-weight:600;color:#374151;margin-bottom:10px;padding-left:4px;border-left:3px solid var(--green);padding-left:10px}

/* ---------- Helpers ---------- */
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.mb-12{margin-bottom:12px}
.text-center{text-align:center}
.text-right{text-align:right}
.text-danger{color:#ef4444}
.text-success{color:var(--green)}
.text-muted{color:#9ca3af}
.flex{display:flex}
.flex-1{flex:1}
.gap-8{gap:8px}
.gap-10{gap:10px}
.items-center{align-items:center}
.justify-between{justify-content:space-between}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:0;height:0}

/* ---------- Misc ---------- */
.tag{
  display:inline-block;
  padding:2px 8px;
  border-radius:6px;
  font-size:11px;
  font-weight:600;
  background:#f3f4f6;
  color:#6b7280;
}
.divider{height:1px;background:#f3f4f6;margin:12px 0}