* { box-sizing: border-box }
body { margin: 0; font-family: 'Bai Jamjuree', Tahoma, Arial, sans-serif; background: #eaf6fd; color: #09294a }

/* Login Screen */
.login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px }
.login-box { background: white; border-radius: 16px; padding: 40px 30px; width: 100%; max-width: 380px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.08) }
.login-box h1 { margin: 0 0 10px; font-size: 26px; color: #06436e }
.login-box p { color: #666; margin: 0 0 20px; font-size: 14px }
.login-box input { width: 100%; border: 1px solid #cfd8e3; border-radius: 8px; padding: 14px 16px; font-size: 16px; text-align: center; font-family: inherit; margin-bottom: 14px }
.login-error { color: #dc3545; font-size: 14px; margin-top: 10px }
.login-error.hidden { display: none }

/* App Header */
.app-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 10px }
.app-header h1 { margin: 0; font-size: 22px; color: #06436e }
.btn-logout { border: 1px solid #ccc; background: white; border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; font-family: inherit; color: #666 }
.btn-logout:hover { background: #f5f5f5 }

.app { max-width: 540px; margin: auto; background: #eef8ff; min-height: 100vh; padding-bottom: 30px }
.app.hidden { display: none }
h1 { text-align: center; margin: 0; padding: 22px 10px 18px; font-size: 26px; color: #06436e }
h2 { font-size: 18px; color: #06436e; margin: 0 0 14px }

/* Tabs */
.tabs { display: flex; background: white; position: sticky; top: 0; z-index: 10 }
.tab { flex: 1; border: 0; background: white; padding: 16px 8px; font-weight: bold; font-size: 15px; color: #222; border-bottom: 3px solid transparent; cursor: pointer; transition: all 0.2s; font-family: inherit }
.tab.active { color: #048fe3; border-bottom-color: #38aaf0; background: #f0f9ff }

/* Page & Card */
.page { padding: 0 }
.card { padding: 20px; border-bottom: 1px solid #d5e8f5 }

/* Sub Tabs (ลงข้อมูล / ประวัติ) */
.sub-tabs { display: flex; background: #f0f9ff; border-bottom: 1px solid #d5e8f5 }
.sub-tab { flex: 1; border: 0; background: transparent; padding: 12px 8px; font-weight: 600; font-size: 14px; color: #666; cursor: pointer; font-family: inherit; transition: all 0.2s; border-bottom: 2px solid transparent }
.sub-tab.active { color: #06436e; background: white; border-bottom-color: #06436e }
.sub-page.hidden { display: none }
label { display: block; margin: 13px 0 8px; font-weight: 600; color: #10263b; font-size: 14px }
input[type="date"], input[type="number"], input[type="text"].date-input, textarea {
  width: 100%; border: 1px solid #cfd8e3; border-radius: 8px;
  padding: 13px 16px; font-size: 16px; background: white; font-family: inherit; cursor: pointer
}
textarea { height: 78px; resize: vertical }

/* Upload area */
.upload {
  border: 2px dashed #c6d0dc; border-radius: 8px; min-height: 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #8d99aa; background: #f5fbff; cursor: pointer; margin-bottom: 8px; padding: 12px
}
.upload input { display: none }
.upload span { font-size: 28px }
.upload p { margin: 4px 0 0; font-weight: normal; font-size: 13px }

/* Image Preview */
.preview { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px }
.preview-item { position: relative; display: inline-block }
.preview-item img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; border: 1px solid #dde5ee }
.preview-remove {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #ff5757; color: white; border: 0;
  font-size: 11px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3)
}

/* Submit Button */
.submit {
  width: 100%; margin-top: 18px; border: 0; border-radius: 8px;
  background: #39a8eb; color: white; padding: 14px;
  font-size: 16px; font-weight: bold; cursor: pointer; transition: background 0.2s; font-family: inherit
}
.submit:hover { background: #1997df }

/* Hidden */
.hidden { display: none }

/* Record Card */
.record { background: white; border-radius: 12px; padding: 14px; margin: 0 0 12px; box-shadow: 0 1px 5px #0001 }
.record-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 6px }
.record p { margin: 4px 0; font-size: 14px }
.record .note { color: #555; font-style: italic }

/* Expandable Record */
.expandable { cursor: pointer; transition: all 0.2s }
.expandable:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08) }
.record-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px }
.record-detail { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e8eff5 }
.expandable.expanded .record-detail { display: block }
.expand-icon { font-size: 12px; color: #999; transition: transform 0.2s; margin-left: auto }
.expandable.expanded .expand-icon { transform: rotate(180deg) }
.detail-time { color: #888; display: block; margin-top: 8px }

/* Status Badge */
.status-badge { font-size: 12px; font-weight: bold; padding: 4px 10px; border-radius: 20px; white-space: nowrap }
.status-pending { background: #fff3cd; color: #856404 }
.status-done { background: #d4edda; color: #155724 }

/* Pending card highlight */
.pending-card { border-left: 4px solid #ffc107 }

/* Fulfill button */
.btn-fulfill {
  width: 100%; margin-top: 12px; border: 0; border-radius: 8px;
  background: #28a745; color: white; padding: 12px;
  font-size: 15px; font-weight: bold; cursor: pointer; font-family: inherit
}
.btn-fulfill:hover { background: #218838 }

/* Comparison Box */
.comparison {
  border-radius: 8px; padding: 10px 14px; margin: 10px 0;
  font-size: 14px
}
.comparison.match { background: #d4edda; border: 1px solid #b8dacd }
.comparison.less { background: #fff3cd; border: 1px solid #ffe69c }
.comparison.more { background: #d1ecf1; border: 1px solid #bee5eb }
.compare-row { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 15px }
.compare-status { text-align: center; margin-top: 6px; font-weight: 600 }
.highlight { color: #d63384; font-size: 18px }

/* Image Groups */
.img-group { margin-top: 8px }
.img-group small { color: #687789; font-weight: bold; font-size: 12px }
.images { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px }
.images img { width: 68px; height: 68px; border-radius: 8px; object-fit: cover; border: 1px solid #dde5ee }

/* Delete */
.delete { border: 0; background: #ff5757; color: white; border-radius: 7px; padding: 7px 12px; margin-top: 10px; cursor: pointer; font-size: 13px; font-family: inherit }
.delete:hover { background: #e04040 }

/* Empty state */
.empty { text-align: center; color: #999; padding: 16px; font-size: 14px }

/* Toast Modal */
.toast-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.2s }
.toast-overlay.hidden { display: none }
.toast-box { background: white; border-radius: 20px; padding: 36px 30px 28px; width: 100%; max-width: 320px; text-align: center; animation: popIn 0.3s ease }
.toast-icon { font-size: 56px; margin-bottom: 12px }
.toast-message { font-size: 16px; font-weight: 500; color: #333; margin: 0 0 20px }
.toast-btn { border: 0; border-radius: 25px; background: linear-gradient(135deg, #39a8eb, #1d8fd6); color: white; padding: 12px 40px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; box-shadow: 0 4px 12px rgba(57,168,235,0.3); transition: transform 0.1s }
.toast-btn:hover { transform: scale(1.05) }
.toast-btn.error { background: linear-gradient(135deg, #ff6b6b, #dc3545) ; box-shadow: 0 4px 12px rgba(220,53,69,0.3) }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes popIn { from { transform: scale(0.8); opacity: 0 } to { transform: scale(1); opacity: 1 } }

/* Calendar */
.calendar-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px }
.calendar-nav h2 { margin: 0; font-size: 18px; min-width: 160px; text-align: center }
.btn-nav { border: 1px solid #cfd8e3; background: white; border-radius: 8px; width: 36px; height: 36px; font-size: 18px; cursor: pointer; font-weight: bold; color: #06436e }
.btn-nav:hover { background: #f0f9ff }
.calendar-legend { display: flex; justify-content: center; gap: 16px; margin-bottom: 14px; font-size: 13px }
.legend-item { display: flex; align-items: center; gap: 4px }
.legend-dot { width: 12px; height: 12px; border-radius: 3px }
.dot-request { background: #39a8eb }
.dot-deliver { background: #28a745 }
.dot-mismatch { background: #dc3545 }
.cal-header { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 600; font-size: 12px; color: #687789; margin-bottom: 4px }
.cal-body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px }
.cal-cell { min-height: 60px; border-radius: 8px; padding: 4px; background: #f8fbff; border: 1px solid #e8eff5; position: relative }
.cal-cell.empty { background: transparent; border: none }
.cal-cell.cal-match { background: #e8f8ec; border-color: #b8e6c8 }
.cal-cell.cal-mismatch { background: #fde8e8; border-color: #f5b7b7; box-shadow: inset 0 0 0 2px #dc3545 }
.cal-cell.cal-pending { background: #fff8e6; border-color: #ffe69c }
.cal-day { font-size: 12px; font-weight: 600; color: #333 }
.cal-data { margin-top: 2px; font-size: 11px; display: flex; flex-direction: column; gap: 1px }
.cal-req { color: #1a73e8; font-weight: 600 }
.cal-req::before { content: "สั่ง "; font-weight: normal; color: #666 }
.cal-del { color: #28a745; font-weight: 600 }
.cal-del::before { content: "ลง "; font-weight: normal; color: #666 }

/* Summary Page */
.summary-filters { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap }
.filter-row { flex: 1; min-width: 120px }
.filter-row label { margin: 0 0 4px; font-size: 13px }
.btn-filter {
  border: 0; border-radius: 8px; background: #39a8eb; color: white;
  padding: 13px 18px; font-weight: bold; cursor: pointer; font-family: inherit;
  font-size: 14px; white-space: nowrap; height: fit-content
}
.btn-filter:hover { background: #1997df }

/* Stats */
.stat-cards { display: flex; gap: 10px }
.stat-card {
  flex: 1; background: #f0f9ff; border-radius: 12px; padding: 14px;
  text-align: center; border: 1px solid #d5e8f5
}
.stat-card.stat-match { background: #d4edda; border-color: #b8dacd }
.stat-card.stat-less { background: #fff3cd; border-color: #ffe69c }
.stat-card.stat-more { background: #d1ecf1; border-color: #bee5eb }
.stat-number { font-size: 28px; font-weight: 700; color: #06436e }
.stat-label { font-size: 12px; color: #687789; margin-top: 4px }
.stat-status-row { display: flex; justify-content: center; gap: 20px; margin-top: 14px; font-size: 14px; color: #444 }

/* Summary Table */
.table-wrapper { overflow-x: auto }
.summary-table { width: 100%; border-collapse: collapse; font-size: 14px }
.summary-table th { background: #06436e; color: white; padding: 10px 8px; text-align: center; font-weight: 600; font-size: 13px }
.summary-table td { padding: 10px 8px; text-align: center; border-bottom: 1px solid #e8eff5 }
.summary-table tr:hover td { background: #f0f9ff }
.diff-match { color: #28a745; font-weight: bold }
.diff-less { color: #dc3545; font-weight: bold }
.diff-more { color: #007bff; font-weight: bold }
.tbl-pending { background: #fff3cd; color: #856404; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: bold }
.tbl-match { background: #d4edda; color: #155724; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: bold }
.tbl-less { background: #f8d7da; color: #721c24; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: bold }
.tbl-more { background: #d1ecf1; color: #0c5460; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: bold }

/* Modal */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px
}
.modal-overlay.hidden { display: none }
.modal {
  background: white; border-radius: 16px; padding: 24px;
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto
}
.modal h3 { margin: 0 0 14px; color: #06436e; font-size: 20px }
.modal-info { background: #f0f9ff; border-radius: 8px; padding: 12px; margin-bottom: 14px }
.modal-info p { margin: 4px 0; font-size: 15px }
.modal-actions { display: flex; gap: 10px; margin-top: 14px }
.modal-actions .submit { flex: 1; margin-top: 0 }
.btn-cancel {
  flex: 0.6; border: 1px solid #ccc; border-radius: 8px; background: white;
  color: #666; padding: 14px; font-size: 15px; cursor: pointer; font-family: inherit; font-weight: 600
}
.btn-cancel:hover { background: #f5f5f5 }

@media(max-width: 480px) {
  h1 { font-size: 22px }
  .app { max-width: 100% }
  .tab { font-size: 13px; padding: 14px 6px }
  .modal { padding: 18px }
  .summary-table { font-size: 12px }
  .stat-cards { flex-direction: column }
  .cal-cell { min-height: 50px }
  .cal-data { font-size: 10px }
}