* {
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin: 0;
    background: #0b0f14;
    color: #e8eef5;
}

.container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 16px;
}

.card {
    background: #121821;
    border: 1px solid #1f2a38;
    border-radius: 14px;
    padding: 16px;
    margin-top: 16px;
}

h1 {
    font-size: 24px;
    margin: 0 0 12px;
}

h2 {
    font-size: 18px;
    margin: 12px 0;
}

button {
    background: #2b8cff;
    color: white;
    border: 0;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}

button.secondary {
    background: #243142;
    color: #e8eef5;
}

button:hover {
    filter: brightness(1.05);
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

select,
input[type=date] {
    background: #0f1520;
    color: #e8eef5;
    border: 1px solid #243142;
    padding: 8px;
    border-radius: 10px;
}

#table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#table th,
#table td {
    border-bottom: 1px solid #1f2a38;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

#table th {
    position: sticky;
    top: 0;
    background: #0f1520;
}

.actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

#auth {
    display: flex;
    align-items: center;
    gap: 10px;
}

#who {
    opacity: 0.85;
}

#table {
  table-layout: fixed;         /* ✅ ให้แต่ละ column มีขนาดคงที่ */
  width: 100%;
  border-collapse: collapse;
}

#table th, #table td {
  padding: 6px 10px;
  border-bottom: 1px solid #333;
  word-wrap: break-word;       /* ✅ ตัดคำอัตโนมัติ */
  white-space: pre-wrap;
  vertical-align: top;
}

#table th {
  background-color: #1e1e1e;
  text-align: left;
  font-weight: 600;
}

#loadingBar {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: #111;
  border: 1px solid #333;
  border-radius: 8px;
  text-align: center;
  color: #ddd;
  font-size: 0.9rem;
}

#loadingBar .progress {
  height: 5px;
  width: 100%;
  background: linear-gradient(90deg, #1877f2 0%, #42a5f5 50%, #1877f2 100%);
  background-size: 200% 100%;
  animation: loadingAnim 1.5s linear infinite;
  border-radius: 3px;
  margin-bottom: 8px;
}

@keyframes loadingAnim {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}