/* ============================================================
   SEMS — สไตล์ร่วมของหน้าบันทึกข้อมูล (Material / Document / Data)
   โหลดหลัง sems-spare.css เพื่อใช้ตัวแปรสีเดิม
   ============================================================ */

.page-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:18px;
}
.page-head h2{ margin:0 0 4px; font-size:21px; font-weight:800; }
.page-head p{ margin:0; font-size:12.5px; color:var(--ink-dim); line-height:1.6; }
.page-actions{ display:flex; gap:9px; flex-wrap:wrap; }

.tab-bar{
  display:flex; gap:4px; flex-wrap:wrap; margin-bottom:16px;
  background:var(--bg-raised); border:1px solid var(--line-strong);
  border-radius:11px; padding:4px;
}
.tab-bar .tab-btn{
  background:none; border:none; color:var(--ink-dim); font-family:var(--sans);
  font-size:12.5px; font-weight:600; padding:8px 15px; border-radius:8px;
  cursor:pointer; white-space:nowrap;
}
.tab-bar .tab-btn:hover{ color:var(--ink); }
.tab-bar .tab-btn.active{ background:var(--amber); color:#141719; }
html[data-theme="light"] .tab-bar .tab-btn.active{ color:#ffffff; }

.filter-row{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px;
}
.filter-row input[type="search"], .filter-row input[type="text"]{
  flex:1; min-width:200px;
  background:var(--bg-panel); border:1px solid var(--line-strong); color:var(--ink);
  border-radius:9px; padding:9px 13px; font-family:var(--sans); font-size:13px;
}
.filter-row input:focus{ outline:none; border-color:var(--amber); }

/* ---------- ตาราง ---------- */
.table-wrap{
  background:var(--bg-panel); border:1px solid var(--line);
  border-radius:13px; overflow:auto; max-width:100%;
}
.table-wrap table{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:760px; }
.table-wrap th{
  text-align:left; padding:11px 13px; font-size:11px; font-weight:700;
  color:var(--ink-dim); background:var(--bg-raised);
  border-bottom:1px solid var(--line-strong); white-space:nowrap;
  position:sticky; top:0; z-index:1;
}
.table-wrap td{
  padding:10px 13px; border-bottom:1px solid var(--line);
  color:var(--ink); vertical-align:middle;
}
.table-wrap tbody tr:last-child td{ border-bottom:none; }
.table-wrap tbody tr:hover{ background:var(--bg-raised); }
.table-wrap td.num{ text-align:right; font-family:var(--mono); }
.table-wrap td.mono{ font-family:var(--mono); font-size:11.5px; }
.table-wrap td.empty, .table-wrap .empty{
  text-align:center; padding:34px 12px; color:var(--ink-faint); font-size:12.5px;
}

td.act{ white-space:nowrap; }
.mini{
  background:var(--bg-raised); border:1px solid var(--line-strong); color:var(--ink-dim);
  border-radius:7px; padding:4px 9px; font-family:var(--sans); font-size:11px;
  font-weight:600; cursor:pointer;
}
.mini:hover{ border-color:var(--amber); color:var(--amber); }
.mini.danger:hover{ border-color:var(--danger); color:var(--danger); }
.mini + .mini{ margin-left:5px; }

.pill{
  display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:10.5px; font-weight:700; font-family:var(--mono);
  border:1px solid var(--line-strong); color:var(--ink-dim); background:var(--bg-raised);
}

/* ---------- การ์ดสรุป ---------- */
.stat-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px; margin-bottom:18px;
}
.stat{
  background:var(--bg-panel); border:1px solid var(--line);
  border-radius:12px; padding:15px 17px;
}
.stat .k{ font-size:11px; color:var(--ink-dim); font-weight:600; margin-bottom:6px; }
.stat .v{ font-size:24px; font-weight:800; font-family:var(--mono); color:var(--ink); line-height:1.1; }
.stat.warn .v{ color:var(--amber); }
.stat.bad  .v{ color:var(--danger); }
.stat.good .v{ color:var(--ok); }

/* ---------- แถบเตือนยังไม่ตั้งค่า ---------- */
.connect-banner{
  display:none; gap:14px; align-items:flex-start;
  background:rgba(226,85,75,0.08); border:1px solid var(--danger);
  border-radius:12px; padding:15px 18px; margin-bottom:18px;
}
.connect-banner b{ display:block; margin-bottom:4px; font-size:13.5px; }
.connect-banner span{ font-size:12.5px; color:var(--ink-dim); line-height:1.6; }

/* ---------- ฟอร์ม popup ---------- */
.form-overlay{
  position:fixed; inset:0; z-index:110;
  background:rgba(8,11,14,0.72); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.form-overlay.on{ display:flex; }

.form-modal{
  background:var(--bg-panel); border:1px solid var(--line-strong); border-radius:16px;
  width:100%; max-width:680px; max-height:88vh; display:flex; flex-direction:column;
  box-shadow:0 26px 70px rgba(0,0,0,.5);
}
.form-modal .head{ padding:20px 24px 15px; border-bottom:1px solid var(--line); }
.form-modal .head h3{ margin:0; font-size:17px; font-weight:800; }

.form-body{
  padding:20px 24px; overflow-y:auto; flex:1;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 16px;
}
.fld{ display:flex; flex-direction:column; gap:6px; grid-column:span 2; }
.fld.half{ grid-column:span 1; }
.fld.full{ grid-column:span 2; }
.fld label{ font-size:11.5px; font-weight:700; color:var(--ink-dim); }
.fld .req{ color:var(--danger); }
.fld input, .fld select, .fld textarea{
  background:var(--bg-raised); border:1px solid var(--line-strong); color:var(--ink);
  border-radius:9px; padding:9px 12px; font-family:var(--sans); font-size:13px; width:100%;
}
.fld textarea{ resize:vertical; min-height:52px; }
.fld input:focus, .fld select:focus, .fld textarea:focus{ outline:none; border-color:var(--amber); }

.file-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.file-name{ font-size:11.5px; color:var(--ink-faint); font-family:var(--mono); }
.cur-file{ font-size:11.5px; color:var(--ink-dim); margin-top:7px; }
.cur-file a{ color:var(--amber); }

.form-foot{
  padding:16px 24px; border-top:1px solid var(--line);
  display:flex; justify-content:flex-end; gap:9px;
}

/* ---------- จอเล็ก ---------- */
@media (max-width:640px){
  .page-head{ flex-direction:column; align-items:stretch; }
  .page-actions .btn{ flex:1; }
  .form-body{ grid-template-columns:1fr; }
  .fld, .fld.half, .fld.full{ grid-column:span 1; }
  .form-modal{ max-height:93vh; }
  .form-foot .btn{ flex:1; }
}