/* -----------------------------------------------------------
 * KSP QR Apps – Responsive UI for Mobile (CodeHeader v3)
 * Version: 1.1.0  (patch from 1.0.0)
 * Drop-in replacement: YES (วางทับ style.css เดิมได้ทันที)
 * What changed:
 *  - ปิดการเลื่อนแนวนอน/แก้ overflow
 *  - Toolbar แบ่ง 2 บรรทัดบนจอแคบ, ปุ่ม/ช่องค้นหาเต็มแถว
 *  - ตารางแบบ “app-like”: ซ่อนคอลัมน์ Description บนจอเล็ก,
 *    ขยายช่องแตะ, ลดฟอนต์หัวตาราง, จัดระยะให้อ่านง่าย
 *  - Pagination จัดวางแนวตั้งบนจอเล็ก
 *  - Form/Preview/Modal ปรับขนาดและ spacing ให้เหมาะกับนิ้ว
 * ----------------------------------------------------------- */

:root{
  --primary:#1976d2;
  --primary-light:#e3f2fd;
  --gray:#f5f5f5;
  --border:#e0e0e0;
  --error:#b00020;
  --radius:10px;
  --shadow:0 2px 8px rgba(0,0,0,.08);
  --font:system-ui,"Kanit","TH Sarabun New",sans-serif;
}

html,body{
  font-family:var(--font);
  background:#fff;
  color:#222;
  margin:0;
  /* กันล้นแนวนอนทุกกรณี */
  overflow-x:hidden;
}

/* ---------- Topbar / Tabs ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--primary-light);
  padding:16px 20px;
  font-size:1.15rem;font-weight:500;
  border-bottom:1px solid var(--border);
}
.tabs{display:flex;gap:8px;}
.tab{
  padding:8px 18px;border-radius:var(--radius) var(--radius) 0 0;
  background:none;border:none;font-size:1rem;font-weight:500;
  color:var(--primary);cursor:pointer;transition:background .2s;
}
.tab.active{background:#fff;border:1px solid var(--border);border-bottom:none;}
.tab.inactive{background:var(--primary-light);color:#888}

/* ---------- Toolbar (ค้นหา / Refresh / meta) ---------- */
.table-toolbar{
  display:flex;align-items:center;gap:12px;margin-bottom:12px;
  flex-wrap:wrap; /* สำคัญ: ให้ตัดบรรทัดได้บนจอเล็ก */
}
#search{
  padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  font-size:1rem;width:260px;max-width:100%;
}
#btnReload{
  background:var(--primary);color:#fff;border:none;border-radius:10px;
  padding:10px 18px;font-size:1rem;cursor:pointer;box-shadow:var(--shadow);
  transition:background .2s;
}
#btnReload:hover{background:#1565c0}
#list-meta{margin-left:auto;font-size:1rem;color:#555}

/* ---------- Table ---------- */
table.items-table{
  width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  box-shadow:var(--shadow);border-radius:var(--radius);overflow:hidden;
}
table.items-table th{
  background:var(--primary-light);color:var(--primary);font-weight:600;
  padding:12px 10px;border-bottom:1px solid var(--border);user-select:none;
}
table.items-table td{
  padding:14px 10px;border-bottom:1px solid var(--border);
  font-size:1rem;vertical-align:middle;
}
table.items-table tr{transition:background .2s}
table.items-table tr:hover{background:var(--gray)}
table.items-table td a{color:var(--primary);text-decoration:none;display:inline-flex;gap:6px;align-items:center}

/* กำหนดความกว้างคร่าว ๆ บนจอกว้าง */
table.items-table th:nth-child(1), table.items-table td:nth-child(1){text-align:center;width:110px}
table.items-table th:nth-child(2), table.items-table td:nth-child(2){text-align:left;width:35%}
table.items-table th:nth-child(3), table.items-table td:nth-child(3){text-align:left}
table.items-table th:nth-child(4), table.items-table td:nth-child(4){text-align:right;width:120px}

/* ---------- Pagination ---------- */
.pagination{
  display:flex;align-items:center;gap:8px;margin-top:16px;justify-content:flex-end;
}
.pagination button{
  background:#fff;border:1px solid var(--border);border-radius:10px;
  padding:8px 14px;font-size:1rem;color:var(--primary);cursor:pointer;
}
.pagination button:disabled{color:#bbb;border-color:#eee;cursor:not-allowed}

/* ---------- Main/Form ---------- */
main{max-width:1100px;margin:0 auto;padding:20px 0 32px}
.form-grid{
  display:grid;grid-template-columns:480px 480px;gap:32px;align-items:flex-start;
  margin:0 auto;max-width:1000px;justify-content:center;
}
.form-grid>div:last-child{display:flex;align-items:center;justify-content:center}
.form-section{
  background:#fff;border-radius:10px;box-shadow:var(--shadow);
  padding:22px 24px;max-width:480px;margin:0 0 0 16px;
}
.form-section label{font-weight:600;margin-bottom:6px;display:block}
.form-section input,.form-section textarea,.form-section select{
  width:100%;max-width:440px;padding:9px 12px;border:1px solid var(--border);
  border-radius:10px;font-size:1rem;margin-bottom:14px;font-family:var(--font);
}
.form-section textarea{min-height:82px;resize:vertical}
.form-actions{display:flex;gap:12px;margin-bottom:8px}
.btn-primary,.btn-secondary{
  border:none;border-radius:12px;padding:10px 20px;font-size:1.05rem;
  font-weight:600;cursor:pointer;box-shadow:var(--shadow);transition:background .2s;
  height:48px;min-width:150px;
}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:#1565c0}
.btn-secondary{background:#f0f0f0;color:#222}
.btn-secondary:hover{background:#e0e0e0}
.status-bar{font-size:.95rem;color:#555;margin-top:4px}

/* Preview box ของหน้า Edit */
.preview-box,.card-preview-box{
  background:#fff;border:1.5px dashed var(--border);border-radius:10px;
  box-shadow:var(--shadow);padding:20px;margin-bottom:16px;
  min-height:320px;max-width:400px;margin-left:auto;margin-right:auto;
  display:flex;align-items:center;justify-content:center;
}
.preview-box .empty,.card-preview-box .empty{color:#aaa;font-size:1.05rem;text-align:center}

/* ---------- Small screen: “App-like” ---------- */
@media (max-width: 640px){

  /* ซ่อนแถบเลื่อนเบราว์เซอร์บางตัว */
  ::-webkit-scrollbar{display:none}
  html,body{-ms-overflow-style:none;scrollbar-width:none}

  .topbar{padding:12px 14px;font-size:1rem}

  /* Toolbar เป็น 2 บรรทัด: ช่องค้นหากับปุ่มเต็มแถว */
  .table-toolbar{gap:8px}
  #search{flex:1 1 100%;width:100%;font-size:1rem}
  #btnReload{flex:1 1 100%;width:100%}
  #list-meta{flex-basis:100%;text-align:center;margin-left:0;font-size:.95rem}

  /* ตารางสไตล์มือถือ: ซ่อน Description เพื่อไม่ให้ล้น */
  table.items-table th{font-size:.95rem;padding:10px 8px}
  table.items-table td{font-size:1rem;padding:14px 10px}
  table.items-table th:nth-child(3),
  table.items-table td:nth-child(3){display:none}  /* ซ่อน Description */
  table.items-table th:nth-child(1),table.items-table td:nth-child(1){width:84px}
  table.items-table th:nth-child(2),table.items-table td:nth-child(2){width:auto}
  table.items-table th:nth-child(4),table.items-table td:nth-child(4){width:90px}

  /* เพิ่มพื้นที่แตะ (tap) ให้สบายมือ */
  table.items-table td, table.items-table th{line-height:1.35}

  /* หน้า Edit/form — กองเป็นคอลัมน์เดียว, ปุ่มเต็มแถว */
  main{max-width:100vw;padding:12px 6px}
  .form-grid{grid-template-columns:1fr;gap:18px}
  .form-section{margin:0 8px}
  .form-actions{flex-direction:column;gap:10px}
  .btn-primary,.btn-secondary{width:100%;min-width:0}

  /* Pagination วางแนวตั้ง */
  .pagination{flex-direction:column;gap:10px;align-items:stretch}
  .pagination #page-info{text-align:center}
}

/* ---------- Misc scrollbar on desktop ---------- */
::-webkit-scrollbar{width:8px;background:#eee}
::-webkit-scrollbar-thumb{background:#ccc;border-radius:8px}