/* 磷矿台账管理系统 Web 版 —— 复刻桌面版设计系统（theme.py 色板） */
:root{
  --primary:#4F46E5; --primary-hover:#4338CA; --primary-soft:#EEF2FF;
  --accent:#0EA5E9; --success:#059669; --success-soft:#ECFDF5;
  --warning:#D97706; --warning-soft:#FFFBEB; --danger:#DC2626; --danger-soft:#FEF2F2;
  --info:#0284C7; --info-soft:#F0F9FF;
  --bg:#F1F5F9; --card:#FFFFFF; --card-border:#E2E8F0; --subtle:#F8FAFC;
  --text:#0F172A; --text-muted:#64748B; --text-faint:#94A3B8; --divider:#E2E8F0;
  --sidebar-bg:#1E293B; --sidebar-text:#CBD5E1; --sidebar-dim:#7C8AA0;
  --sidebar-active:#4F46E5; --sidebar-hover:#334155;
  --radius:12px; --radius-sm:8px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Microsoft YaHei UI","Microsoft YaHei",-apple-system,Segoe UI,sans-serif;
  font-size:13px; color:var(--text); background:var(--bg);
}
a{color:var(--primary); text-decoration:none;}

/* ---------- 布局 ---------- */
.layout{display:flex; min-height:100vh;}
.sidebar{
  width:210px; background:var(--sidebar-bg); color:var(--sidebar-text);
  display:flex; flex-direction:column; flex-shrink:0; position:sticky; top:0; height:100vh;
}
.sidebar .brand{
  padding:20px 18px 14px; font-size:16px; font-weight:700; color:#fff;
  display:flex; align-items:center; gap:10px;
}
.sidebar .brand .logo{
  width:30px;height:30px;border-radius:9px;background:var(--primary);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:16px;
}
.sidebar nav{flex:1; padding:8px 10px; overflow-y:auto;}
.sidebar nav a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; margin:2px 0;
  border-radius:var(--radius-sm); color:var(--sidebar-text); font-size:13.5px;
  transition:background .12s;
}
.sidebar nav a .ic{width:18px;text-align:center;opacity:.9;}
.sidebar nav a:hover{background:var(--sidebar-hover); color:#fff;}
.sidebar nav a.active{background:var(--sidebar-active); color:#fff;}
.sidebar .foot{padding:12px 16px; border-top:1px solid #33415577; font-size:12px; color:var(--sidebar-dim);}
.sidebar .foot a{color:var(--sidebar-text);}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  height:56px; background:var(--card); border-bottom:1px solid var(--card-border);
  display:flex; align-items:center; justify-content:space-between; padding:0 22px;
  position:sticky; top:0; z-index:20;
}
.topbar .title{font-size:18px; font-weight:600;}
.topbar .user{color:var(--text-muted); font-size:13px;}
.topbar .user b{color:var(--text);}
.content{padding:18px 22px; flex:1;}

/* 手机端汉堡按钮与抽屉遮罩（桌面端隐藏） */
.menu-btn{
  display:none; background:none; border:none; cursor:pointer;
  font-size:20px; color:var(--text); padding:6px 10px; margin-left:-6px;
  border-radius:var(--radius-sm);
}
.menu-btn:active{background:var(--subtle);}
.backdrop{display:none;}

/* ---------- 卡片 ---------- */
.card{
  background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:16px; margin-bottom:16px;
}
.card h3{margin:0 0 12px; font-size:15px; font-weight:600;}
.card-title-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.card-title-row h3{margin:0;}

/* ---------- 统计块 ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:16px;}
.stat{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:16px 18px;}
.stat .lbl{color:var(--text-muted); font-size:12px;}
.stat .val{font-size:24px; font-weight:700; margin-top:6px;}
.stat .val small{font-size:13px; font-weight:500; color:var(--text-muted);}
.stat.accent{border-left:4px solid var(--primary);}
.stat.ok{border-left:4px solid var(--success);}

/* ---------- 表单 ---------- */
.form-row{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;}
.field{display:flex; flex-direction:column; gap:4px;}
.field label{font-size:12px; color:var(--text-muted);}
input,select,textarea{
  font-family:inherit; font-size:13px; color:var(--text);
  border:1px solid var(--card-border); border-radius:var(--radius-sm);
  padding:8px 10px; background:#fff; outline:none; min-width:120px;
}
input:focus,select:focus,textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);}
input[type=number]{min-width:90px;}
textarea{min-height:38px; resize:vertical;}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:none; border-radius:var(--radius-sm); padding:9px 16px;
  font-family:inherit; font-size:13px; font-weight:600; color:#fff; background:var(--primary);
  transition:background .12s; white-space:nowrap;
}
.btn:hover{background:var(--primary-hover);}
.btn.accent{background:var(--accent);} .btn.accent:hover{background:#0369A1;}
.btn.success{background:var(--success);} .btn.success:hover{background:#047857;}
.btn.edit{background:var(--warning);} .btn.edit:hover{background:#B45309;}
.btn.delete{background:var(--danger);} .btn.delete:hover{background:#B91C1C;}
.btn.neutral{background:#64748B;} .btn.neutral:hover{background:#475569;}
.btn.ghost{background:transparent; color:var(--primary); border:1px solid var(--card-border);}
.btn.ghost:hover{background:var(--primary-soft);}
.btn.sm{padding:5px 10px; font-size:12px;}

/* ---------- 表格 ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--card-border); border-radius:var(--radius); -webkit-overflow-scrolling:touch;}
table.data{width:100%; border-collapse:collapse; font-size:13px; background:#fff;}
table.data th,table.data td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--divider); white-space:nowrap;}
table.data thead th{background:var(--subtle); color:var(--text-muted); font-weight:600; position:sticky; top:0;}
table.data tbody tr:hover{background:var(--subtle);}
table.data tfoot td{font-weight:600; background:var(--subtle); border-top:2px solid var(--divider);}
table.data td.num{text-align:right; font-variant-numeric:tabular-nums;}
table.data .actions{display:flex; gap:6px;}
.empty{padding:28px; text-align:center; color:var(--text-faint);}

/* ---------- 徽章 ---------- */
.badge{display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600;}
.badge.ok{background:var(--success-soft); color:var(--success);}
.badge.off{background:var(--danger-soft); color:var(--danger);}
.badge.warn{background:var(--warning-soft); color:var(--warning);}

/* ---------- 页签 ---------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--card-border); margin-bottom:16px; flex-wrap:wrap;}
.tabs a{padding:9px 16px; color:var(--text-muted); font-weight:600; border-bottom:2px solid transparent;}
.tabs a:hover{color:var(--text);}
.tabs a.active{color:var(--primary); border-bottom-color:var(--primary);}

/* ---------- flash ---------- */
.flashes{margin-bottom:14px;}
.flash{padding:11px 15px; border-radius:var(--radius-sm); margin-bottom:8px; font-size:13px; border:1px solid transparent; position:relative; padding-right:34px;}
.flash.success{background:var(--success-soft); color:var(--success); border-color:#a7f3d0;}
.flash.danger{background:var(--danger-soft); color:var(--danger); border-color:#fecaca;}
.flash.warning{background:var(--warning-soft); color:var(--warning); border-color:#fde68a;}
.flash.info{background:var(--info-soft); color:var(--info); border-color:#bae6fd;}
.flash-close{position:absolute; right:10px; top:50%; transform:translateY(-50%); cursor:pointer; opacity:.55; font-size:15px; line-height:1;}
.flash-close:hover{opacity:1;}
.flash.fade-out{opacity:0; transition:opacity .3s;}
a.busy{opacity:.55; pointer-events:none;}

/* ---------- 登录 ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg);}
.login-card{width:380px; background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:38px 34px;}
.login-card .logo{width:52px;height:52px;border-radius:14px;background:var(--primary);margin:0 auto 16px;}
.login-card h1{font-size:20px; text-align:center; margin:0 0 4px;}
.login-card .sub{text-align:center; color:var(--text-muted); margin-bottom:22px; font-size:12px;}
.login-card .field{margin-bottom:14px;}
.login-card .field input{width:100%;}
.login-card .btn{width:100%; justify-content:center; padding:11px; font-size:14px;}

.muted{color:var(--text-muted);}
.hint{font-size:12px; color:var(--text-faint); margin-top:4px;}
.section-gap{margin-top:16px;}
.inline-form{display:inline;}

/* ---------- 一致化检测 ---------- */
.stat .val.val-ok{color:var(--success);}
.stat .val.val-err{color:var(--danger);}
.stat .val.val-warn{color:var(--warning);}
.sec-desc{margin:-6px 0 10px;}
table.data td.wrap{white-space:normal; max-width:420px;}

/* 检查覆盖面与对照标准：无论通过与否都显示，用来区分
   “确实检过没问题”与“本期没数据可检 / 标准清单没配” */
.sec-meta{font-size:12px; color:var(--text-muted); line-height:1.9; margin:0 0 8px;}
.sec-meta + .sec-meta{margin-top:-4px;}
.meta-lbl{
  display:inline-block; margin-right:8px; padding:1px 8px;
  border-radius:var(--radius-sm); background:var(--subtle);
  color:var(--text); font-weight:600;
}
.meta-item{display:inline-block; margin-right:12px; white-space:nowrap;}
.meta-item b{font-variant-numeric:tabular-nums;}

/* 问题明细：默认折叠，点开才看具体记录，避免体检页自己变成一张大表 */
/* 明细与问题行同属一条问题，跨满整表宽度（不塞在“说明”那个窄栏里，
   否则子表要在小窗里二次横向滚动，车次/吨位/登记人被裁掉） */
table.data tr.detail-row > td{padding:0 12px 10px; background:var(--subtle); white-space:normal;}
table.data tr.detail-row details.detail{background:#fff;}
table.data tr.detail-row .table-wrap{border-top:1px solid var(--divider);}
details.detail{margin-top:6px; border:1px solid var(--card-border); border-radius:var(--radius-sm); overflow:hidden;}
details.detail summary{
  cursor:pointer; padding:5px 9px; font-size:12px; color:var(--text-muted);
  background:var(--subtle); list-style:none;
}
details.detail summary::-webkit-details-marker{display:none;}
details.detail summary::before{content:"▸"; margin-right:6px;}
details.detail[open] summary::before{content:"▾";}
details.detail[open] summary{border-bottom:1px solid var(--divider); color:var(--text);}
details.detail .table-wrap{border:none; border-radius:0;}
table.data.sub{font-size:12px;}
table.data.sub th,table.data.sub td{padding:5px 9px;}
table.data.sub thead th{position:static;}
.detail-empty{padding:8px 10px; font-size:12px; color:var(--text-faint);
  border-top:1px solid var(--divider);}

/* ---------- 手机端适配 ---------- */
@media (max-width: 820px){
  /* 侧边栏改为抽屉：默认收起，汉堡按钮弹出，遮罩点击收起 */
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; height:100dvh; z-index:40;
    transform:translateX(-100%); transition:transform .2s ease;
    box-shadow:0 0 30px rgba(15,23,42,.35);
  }
  .sidebar.open{transform:none;}
  .backdrop{position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:30;}
  body.nav-open .backdrop{display:block;}
  body.nav-open{overflow:hidden;}
  .menu-btn{display:inline-flex;}

  .topbar{padding:0 14px; gap:8px;}
  .topbar .title{font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .content{padding:12px;}
  .card{padding:12px;}

  /* 表单：字段两列排布、控件撑满；16px 字号避免 iOS 聚焦自动放大 */
  .form-row .field{flex:1 1 calc(50% - 6px); min-width:0;}
  .form-row{gap:10px 12px;}
  input,select,textarea{width:100%; min-width:0; font-size:16px; padding:10px 12px;}
  input[type=number]{min-width:0;}
  .form-row > .btn{flex:1 1 100%; justify-content:center; padding:12px;}

  /* 触控点击目标加大 */
  .btn{padding:10px 16px;}
  .btn.sm{padding:8px 12px;}
  table.data th,table.data td{padding:10px 10px;}

  .stat-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .stat{padding:12px 14px;}
  .stat .val{font-size:20px;}

  .login-card{width:100%; max-width:380px; margin:0 16px; padding:30px 24px;}
  table.data td.wrap{max-width:240px;}
  details.detail summary{padding:8px 10px;}
  table.data tr.detail-row > td{padding:0 10px 8px;}
}

@media (max-width: 480px){
  .topbar .user{display:none;}   /* 窄屏隐藏“当前用户”，侧边栏底部仍可见 */
  .stat-grid{grid-template-columns:1fr 1fr;}
  .form-row .field{flex:1 1 100%;}   /* 超窄屏表单单列 */
}

/* ---------- 报表网页预览 ---------- */
.pv-tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
.pv-tab{border:1px solid var(--card-border); background:var(--subtle); color:var(--text-muted);
  border-radius:6px; padding:6px 12px; font-size:13px; cursor:pointer;}
.pv-tab:hover{background:#E2E8F0;}
.pv-tab.active{background:var(--primary); color:#fff; border-color:var(--primary);}
.pv-panel{display:none;}
.pv-panel.active{display:block;}
table.preview-grid{border-collapse:collapse; font-size:12px; background:#fff; width:100%;
  font-variant-numeric:tabular-nums;}
table.preview-grid td{border:1px solid var(--divider); padding:5px 8px;
  text-align:center; white-space:nowrap; vertical-align:middle;}