html {
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  min-height: 100vh;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: url('../images/Search_001.png') no-repeat center center fixed;
  background-size: cover;


}


/* Title Styling
#first_line {
  position: absolute;
  top: 2px;
 
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  color: #c8f6b8;
  font-weight: bold;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  padding: 0px;
  text-align: center;
  width: 100%;
  
  z-index: 1000;
} */


#first_line {

  /* Use vh instead of px */
  font-weight: bold;
  width: 100%;
  font-size: 2rem;
  color: #0B3D24;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* 标题和搜索框外面那个没有class/id的div，之前没设宽度，导致里面写的百分比宽度
   没有参照物直接失效（浏览器会退回到输入框默认的很窄的宽度）。这里给它一个
   明确的宽度，下面 #searchBox 的 90%/max-width 才能真正按这个来算。
   margin-top 是负值，让整块内容比正中间稍微往上挪一点。 */
body > div:first-of-type {
  width: 100%;
  max-width: 1000px;
  padding: 0 16px;
  box-sizing: border-box;
  margin-top: -140px;
}

#searchBox {
  width: 95%;
  max-width: 960px;
  min-width: 260px;
  padding: 12px 20px;
  font-size: 1rem;
  border: 2px solid #007bff;
  border-radius: 25px;
  outline: none;
  transition: all 0.3s ease-in-out;
  z-index: 1001;
  box-sizing: border-box;
}









/* #searchBox {
  position: absolute;
  top: 15%;
 
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  padding: 12px 20px;
  font-size: 18px;
  border: 2px solid #007bff;
  border-radius: 25px;
  outline: none;
  transition: all 0.3s ease-in-out;
} */




#searchBox:focus {
  border-color: #47ee0f;
  box-shadow: 0 0 10px rgba(164, 237, 36, 0.5);
}

/* First Popup (Loading) */
#loadingPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
  height: auto;
  text-align: center;
}

/* Second Popup (Result) — 真正的水平+垂直居中，内容太高的时候允许内部滚动，
   不然一旦居中，太长的表格会往屏幕上方超出去看不到 */
#resultPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 85vh;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
  overflow-y: auto;
}






.popup {
  position: absolute;

  left: 50%;
  width: 80%;
  height: auto;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  padding: 20px;
  border-radius: 8px;
  z-index: 1000;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none; /* 看不见的时候（没show这个class）不响应点击，不然会挡住下面的东西，比如搜索框 */
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease-in-out;
}

.popup.show {
  opacity: 1;
  display: block;
  pointer-events: auto; /* 弹窗真正显示的时候，点击要恢复正常（比如点右上角的X关闭） */
}

.popup .close {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-size: 24px;
  color: red;
  transition: transform 0.3s ease-in-out;
}

.popup .close:hover {
  transform: rotate(120deg);
}

.overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  transition: opacity 0.3s ease-in-out;
}




/* Table Container */
#dataContainer {
  /* Enables vertical scrolling */
  overflow-x: auto;
  /* Enables horizontal scrolling */
  border: 1px solid black;
  /* Full border *//
}




table {
  width: 100%;
  border-collapse: collapse;
  /* Ensures borders align perfectly */
  table-layout: auto;
  /* Allows columns to adjust dynamically */
}

th,
td {
  border: 1px solid black;
  /* Ensures consistent borders */
  padding: 6px 8px;
  /* Adds spacing for better readability */
  font-size: 13px;
  text-align: center;
  /* Aligns text properly */
  white-space: nowrap;
  /* Prevents text from wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
  /* Adds "..." if text is too long */
}

th {
  background-color: yellow;
  /* Matches your header background */
  font-weight: bold;
}

td {
  background-color: white;
}

/* "状态"这一列，双语文字比较长，单独放宽一点、允许换行，
   不然会把整张表格撑得很宽，其他列都要挤在很窄的地方。
   只在电脑端（宽屏）生效，手机端有自己单独的卡片样式，不能让这条规则跑过去 */
/* 查询结果弹窗，电脑端稍微加宽一点，给"状态"这种双语文字比较长的列留出空间 */
@media (min-width: 701px) {
  #resultPopup {
    width: 90%;
    max-width: 1600px;
  }

  table td:nth-child(1),
  table th:nth-child(1) {
    white-space: normal;
    max-width: 280px;
  }
}





















.pagination {
  display: grid;
  grid-template-columns: repeat(n, 1fr);
  gap: 30px;
  display: flex;
  justify-content: center;
  /* Center buttons horizontally */
  align-items: center;
  /* Align buttons in the same line */

}



.button-container {
  display: flex;
  justify-content: center;
  gap: 20px;
}


.nav-button {
  display: inline-block;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background: linear-gradient(135deg, #007bff, #0056b3);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
  min-width: 120px;
  text-align: center;
}

.nav-button:hover {
  background: linear-gradient(135deg, #0056b3, #003d80);
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(0, 91, 187, 0.5);
}

.nav-button:disabled {
  background: #ccc;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}/* ============================================================
   响应式补丁 —— 把这段内容追加到 main.css 文件末尾即可。
   不改动你原来的样式，只在小屏幕下覆盖部分规则。
   ============================================================ */

@media (max-width: 700px) {
  body {
    margin: 10px;
  }

  #first_line {
    font-size: 1.4rem;
  }

  #searchBox {
    width: 88%;
    font-size: 16px; /* 避免iOS Safari自动放大输入框 */
    padding: 10px 16px;
  }

  .popup {
    width: 94%;
    padding: 12px;
  }

  /* 手机上也用屏幕正中间（之前顶不住主要是因为那条冲突的旧规则，已经删掉了）；
     内容太长的话封顶高度，超出内部自己滚动，保证不会被顶到屏幕外面看不到。 */
  #loadingPopup,
  #resultPopup {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 85vh;
  }

  th, td {
    padding: 6px;
    font-size: 12px;
  }

  .nav-button {
    padding: 9px 14px;
    font-size: 13px;
    min-width: 80px;
  }

  /* ------------------------------------------------------------
     查询结果表格：15列的表格在手机上横向挤不下，这里把它从"表格"
     改成"卡片"——每一行变成一张卡片，每个字段单独一行显示，
     字段名靠 <td data-label="..."> 的属性用CSS的::before撑出来。
     （需要 script.js 里给每个 <td> 加上对应的 data-label 属性才生效）
     ------------------------------------------------------------ */
  #dataContainer {
    border: none;
    overflow-x: visible;
  }

  #dataContainer table,
  #dataContainer thead,
  #dataContainer tbody,
  #dataContainer th,
  #dataContainer td,
  #dataContainer tr {
    display: block;
    width: 100%;
  }

  #dataContainer thead {
    display: none; /* 表头不需要了，字段名改成每个格子前面自带的标签 */
  }

  #dataContainer tr {
    margin-bottom: 14px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }

  #dataContainer td {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-align: right;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: visible;
    text-overflow: unset;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 12px 10px 44%;
    font-size: 13px;
    line-height: 1.4;
    color: #222;
    min-height: 48px;
  }

  #dataContainer td:last-child {
    border-bottom: none;
  }

  #dataContainer td::before {
    content: attr(data-label);
    position: absolute;
    left: 12px;
    top: 10px;
    width: 44%;
    font-size: 11.5px;
    font-weight: bold;
    line-height: 1.5;
    color: #666;
    text-align: left;
    white-space: normal;
  }

  /* 第一个字段是"状态"，加个底色让它在一堆信息里更显眼，字号单独调小一点
     （中泰双语文字比较长），其他布局（标签左、内容右）跟别的字段保持一致，
     不再单独搞特殊——之前那些特殊处理反而引发了各种渲染问题 */
  #dataContainer td:first-child {
    background: #fffbe6;
    font-weight: bold;
    font-size: 14px;
    padding-left: 28%;
  }

  #dataContainer td:first-child::before {
    width: 24%;
  }

  /* 木架/备注这两个字段，没数据的时候这一行直接不显示，不占地方
     （用JS判断是否为空并加is-empty这个class，比CSS的:empty更可靠，
     不会被数据库里存的空格字符干扰） */
  #dataContainer td.optional-field.is-empty {
    display: none;
  }

  /* 手机卡片默认只显示"状态"和一个"摘要字段"（柜号/快递单号/入仓号，
     由JS按优先级动态决定给哪个字段打上summary-field标记），
     点击整张卡片可以展开看其余字段，再点一次收起
     （电脑端表格不受影响，这几条规则都在mobile媒体查询里，只在小屏幕生效） */
  #dataContainer tr {
    cursor: pointer;
  }

  #dataContainer tr td {
    display: none;
  }

  #dataContainer tr td:first-child,
  #dataContainer tr td.summary-field {
    display: block;
  }

  #dataContainer tr.expanded td {
    display: block;
  }

  #dataContainer tr::after {
    content: "点击查看更多详情/ดูเพิ่มเดิม ▾";
    display: block;
    text-align: center;
    font-size: 12px;
    color: #2563eb;
    padding: 6px;
    background: #f8f9fa;
  }

  #dataContainer tr.expanded::after {
    content: "收起/ซ่อน ▴";
  }
}

@media (max-width: 420px) {
  #first_line {
    font-size: 1.15rem;
  }

  #searchBox {
    width: 92%;
  }
}