/* Admin web — ชุดเครื่อง: ตารางหลายพันแถว + แผงรายละเอียดข้างตาราง (PC ≥ 1101px)
   ≤ 1100px กลับเป็น list → detail ทีละหน้าเหมือนเดิม (ลดระดับ ไม่ต้องสวยเท่า PC) */
@media (min-width:901px){.shell--wide{max-width:1840px;grid-template-columns:220px minmax(0,1fr)}}
.systems-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(400px,1fr);gap:var(--sp-4);align-items:start}
.systems-list-col{display:grid;gap:var(--sp-3);min-width:0}

/* ตัวกรอง: แถบกะทัดรัด 1 แถวทุกขนาดจอ PC/notebook (ช่องค้นหายืดตามพื้นที่) */
.systems-filters{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);align-items:flex-end;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md)}
.systems-filters .field{margin:0;flex:0 0 auto}
.systems-filters .field>label{margin:0 0 2px;font-size:var(--fs-xs);font-weight:600;color:var(--ink-muted)}
.systems-filters input,.systems-filters select{min-height:36px;height:36px;padding-top:0;padding-bottom:0;font-size:var(--fs-sm)}
.systems-filters .systems-filter-search{flex:1 1 200px;min-width:180px}
.systems-filters #system-team{width:104px}
.systems-filters #system-qr{width:136px}
.systems-filters #system-warranty{width:124px}
.systems-filter-actions{display:flex;gap:var(--sp-2);align-items:center;margin-left:auto;white-space:nowrap}
.systems-filter-actions .btn{min-height:36px;padding-top:0;padding-bottom:0;font-size:var(--fs-sm)}
@media (max-width:1599px){
  .systems-layout{grid-template-columns:minmax(0,1.65fr) minmax(380px,1fr)}
  .systems-filters{gap:var(--sp-2)}
  .systems-filters .systems-filter-search{flex-basis:140px;min-width:130px}
  .systems-filters #system-team{width:92px}
  .systems-filters #system-qr{width:118px}
  .systems-filters #system-warranty{width:110px}
  .systems-filter-actions .btn{padding-left:var(--sp-3);padding-right:var(--sp-3)}
}
/* หัวหน้าให้เตี้ยลงบน PC เพื่อให้ตารางได้พื้นที่มากขึ้น */
@media (min-width:1101px){
  #system-workspace .page-head{margin-bottom:var(--sp-2)}
  #system-workspace .page-head h1{font-size:var(--fs-xl);margin:0}
  #system-workspace .page-head .muted{display:none}
}

/* ตาราง */
.systems-table-card{padding:0;overflow:hidden;border-radius:var(--r-md)}
.systems-table-wrap{max-height:calc(100vh - 300px);min-height:320px;overflow:auto;border:0;border-radius:0}
.systems-table-card[aria-busy="true"] .systems-table{opacity:.6}
.systems-table{line-height:1.35;font-variant-numeric:tabular-nums}
.systems-table thead th{position:sticky;top:0;z-index:1;padding:var(--sp-3);white-space:nowrap;background:var(--surface-2);border-bottom:2px solid var(--line);color:var(--ink-muted);font-size:var(--fs-sm)}
.systems-table td{padding:var(--sp-2) var(--sp-3);vertical-align:middle}
.th-sort{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:32px;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:600;cursor:pointer}
.th-sort:hover{color:var(--ink)}
.th-sort::after{content:"↕";color:var(--ink-hint);font-weight:400}
.systems-table th[aria-sort="ascending"] .th-sort,.systems-table th[aria-sort="descending"] .th-sort{color:var(--teal-800)}
.systems-table th[aria-sort="ascending"] .th-sort::after{content:"▲";color:var(--teal-800)}
.systems-table th[aria-sort="descending"] .th-sort::after{content:"▼";color:var(--teal-800)}
.system-result{cursor:pointer}
.system-result:hover td{background:var(--teal-50)}
.system-result[aria-current="true"] td{background:var(--teal-50)}
.system-result[aria-current="true"] td:first-child{box-shadow:inset 4px 0 0 var(--teal-700)}
.system-open{display:grid;gap:2px;min-width:0;max-width:100%;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.cell-stack{display:grid;gap:2px;min-width:0;justify-items:start}
.system-open strong,.cell-stack strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-weight:600}
.cell-sub{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm);color:var(--ink-muted)}
.system-empty-row{padding:var(--sp-8) var(--sp-4)!important;text-align:center;color:var(--ink-muted)}
.systems-pager{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line);background:var(--surface-2)}
.systems-pager-controls{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:nowrap}
@media (max-width:1599px){.page-size-tail{display:none}.systems-pager{flex-wrap:nowrap}}
.systems-page-size{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm)}
.systems-page-size .select{width:auto;min-width:72px}

/* แผงรายละเอียด */
.systems-detail-col{display:grid;gap:var(--sp-4);min-width:0}
.system-empty{padding:var(--sp-10) var(--sp-6);text-align:center;border:2px dashed var(--line);background:transparent;box-shadow:none}
.system-empty h2{margin:var(--sp-1) 0 var(--sp-2);font-size:var(--fs-lg)}
.system-detail{display:grid;gap:var(--sp-4)}
.back-to-list{display:none;justify-self:start}
.system-tabs{display:flex;gap:var(--sp-1);border-bottom:2px solid var(--line)}
.system-tab{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);margin-bottom:-2px;padding:var(--sp-2) var(--sp-4);border:0;border-bottom:4px solid transparent;background:none;color:var(--ink-muted);font:inherit;font-weight:600;cursor:pointer}
.system-tab:hover{color:var(--ink)}
.system-tab[aria-selected="true"]{color:var(--teal-800);border-bottom-color:var(--teal-700)}
.system-detail[data-tab="info"] #system-components,.system-detail[data-tab="info"] #qr-admin-panel,
.system-detail[data-tab="components"] #system-form,.system-detail[data-tab="components"] #qr-admin-panel,
.system-detail[data-tab="qr"] #system-form,.system-detail[data-tab="qr"] #system-components{display:none}
#system-form h2{margin:2px 0 var(--sp-1)}
.system-summary{margin-top:var(--sp-4)}
.system-fields{margin-top:var(--sp-5)}
.component-rows{display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
.component-rows li{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.component-rows small{display:block;color:var(--ink-muted)}
@media (min-width:1101px){
  .systems-detail-col{position:sticky;top:calc(60px + var(--sp-6));max-height:calc(100vh - 60px - 2*var(--sp-6));overflow:auto;padding:2px}
}
@media (max-width:1599px){.col-opt{display:none}}
@media (max-width:1100px){
  .systems-layout{grid-template-columns:1fr}
  .systems-layout.has-selection .systems-list-col{display:none}
  .systems-layout:not(.has-selection) .systems-detail-col{display:none}
  .system-detail.is-open .back-to-list{display:inline-flex}
  .systems-table-wrap{max-height:none}
}

/* แผงรายละเอียดกะทัดรัด: หัวเล็ก, สรุป 2 คอลัมน์, ฟอร์มแก้ไขพับได้ */
#system-form{padding:var(--sp-4)}
#system-form h2{font-size:var(--fs-lg);margin:0;overflow-wrap:anywhere}
#system-form .eyebrow{margin:0}
.system-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-4);margin:var(--sp-3) 0 0}
.system-summary>div{display:grid;gap:2px;padding:var(--sp-2) 0;border-top:1px solid var(--line);border-bottom:0}
.system-summary dt{font-size:var(--fs-xs);color:var(--ink-muted)}
.system-summary dd{margin:0;font-size:var(--fs-sm);font-weight:600;text-align:left;overflow-wrap:anywhere}
.system-edit{margin-top:var(--sp-3);border-top:1px solid var(--line);padding-top:var(--sp-2)}
.system-edit>summary{cursor:pointer;color:var(--teal-800);font-weight:600;font-size:var(--fs-sm);min-height:32px;display:flex;align-items:center}
.system-edit .system-fields{margin-top:var(--sp-3)}
.system-edit .actions{margin-top:var(--sp-3)}
.system-summary>div:first-child{border-top:1px solid var(--line);padding-top:var(--sp-2)}

/* โมดูลในชุด: เพิ่ม / แก้ไข / ปิด / เปิดกลับ */
.components-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3)}
.components-head h3{margin:0}
.components-tools{display:flex;align-items:center;gap:var(--sp-3)}
.inline-check{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-muted);cursor:pointer}
.inline-check input{width:18px;height:18px;margin:0}
.component-form{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-4);padding:var(--sp-4);border:1px solid var(--teal-700);border-radius:var(--r-md);background:var(--surface)}
.component-form [hidden]{display:none!important}
.component-form .eyebrow{margin:0}
.component-form-target{margin:0;font-weight:600;overflow-wrap:anywhere}
.component-form .field{margin:0}
.component-form input,.component-form select{min-height:36px;height:36px;padding-top:0;padding-bottom:0;font-size:var(--fs-sm)}
.component-field-wide{grid-column:1/-1}
.component-form .actions{display:flex;justify-content:flex-end;gap:var(--sp-2)}
.component-rows li{align-items:flex-start}
.component-rows li.is-inactive{opacity:.7;background:var(--surface);border-style:dashed}
.component-rows li.is-inactive .component-main strong{text-decoration:line-through;text-decoration-color:var(--ink-hint)}
.component-main{min-width:0;overflow-wrap:anywhere}
.component-side{display:grid;justify-items:end;gap:var(--sp-1);flex:none;text-align:right}
.component-serial{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;color:var(--ink-muted)}
.component-actions{display:flex;gap:var(--sp-1)}
.component-actions .btn{min-height:30px;padding:0 var(--sp-2);color:var(--teal-800)}
.component-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.component-reason{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--sp-3)}

.component-form .is-error{color:var(--danger,#b42318);font-weight:600}