.thaihq-portal, .thaihq-clinic-order, .thaihq-invoice {
  font-family: Arial, sans-serif;
  color: #1F2937;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
/* The admin portal is a data-dense management view (11-column order
   tables, etc.), not the simple single-agent order form — it needs real
   room. Without this override it was stuck at the same 760px as the
   agent view, forcing every wide table into a cramped horizontal-scroll
   strip where the status/actions columns were effectively invisible
   unless you knew to scroll — which is what "table is cut short" was. */
.thaihq-admin-portal-frontend {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.thaihq-earnings-bar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.thaihq-earn-box { background: #F3F4F6; border-radius: 8px; padding: 12px 16px; flex: 1; min-width: 140px; }
.thaihq-earn-total { background: #D1FAE5; }
.thaihq-earn-label { display: block; font-size: 12px; color: #6B7280; }
.thaihq-earn-value { display: block; font-size: 20px; font-weight: bold; }

.thaihq-tabs { display: flex; gap: 4px; border-bottom: 2px solid #E5E7EB; margin-bottom: 16px; }
.thaihq-tab-btn { background: none; border: none; padding: 10px 16px; cursor: pointer; font-size: 15px; color: #6B7280; border-bottom: 3px solid transparent; }
.thaihq-tab-btn.active { color: #1D4ED8; border-bottom-color: #1D4ED8; font-weight: bold; }

.thaihq-admin-tab-btn { display: inline-block; padding: 10px 16px; font-size: 15px; color: #6B7280; border-bottom: 3px solid transparent; text-decoration: none; }
.thaihq-admin-tab-btn.active { color: #1D4ED8; border-bottom-color: #1D4ED8; font-weight: bold; }
.thaihq-admin-portal-frontend h3 { margin-top: 20px; }
.thaihq-admin-portal-frontend h4 { margin-top: 24px; margin-bottom: 8px; }
.thaihq-admin-portal-frontend label { display: block; margin-bottom: 10px; font-weight: bold; font-size: 14px; }
.thaihq-admin-portal-frontend input[type=text], .thaihq-admin-portal-frontend input[type=number],
.thaihq-admin-portal-frontend input[type=date], .thaihq-admin-portal-frontend select, .thaihq-admin-portal-frontend textarea {
  font-weight: normal; padding: 6px 8px; border: 1px solid #9CA3AF; border-radius: 4px; margin-top: 3px; max-width: 400px; width: 100%;
}

.thaihq-portal form label, .thaihq-clinic-order form label { display: block; margin-bottom: 12px; font-weight: bold; font-size: 14px; }
.thaihq-portal form input, .thaihq-portal form select, .thaihq-portal form textarea,
.thaihq-clinic-order form input, .thaihq-clinic-order form select {
  display: block; width: 100%; max-width: 400px; padding: 8px; margin-top: 4px;
  border: 1px solid #9CA3AF; border-radius: 4px; font-size: 14px; font-weight: normal;
}
.thaihq-btn-primary {
  background: #1D4ED8; color: #fff; border: none; padding: 10px 20px;
  border-radius: 6px; cursor: pointer; font-size: 15px; margin-top: 8px;
}
.thaihq-btn-primary:hover { background: #1e40af; }

.thaihq-th { color: #6B7280; font-weight: normal; font-size: 0.92em; }

.thaihq-btn-secondary {
  display: inline-block; background: #fff; color: #1D4ED8; border: 1.5px solid #1D4ED8;
  padding: 9px 18px; border-radius: 4px; font-size: 14px; font-weight: bold;
  text-decoration: none; margin-top: 4px;
}
.thaihq-btn-secondary:hover { background: #EFF6FF; }

.thaihq-register-cta {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid #E5E7EB; text-align: center;
}
.thaihq-register-cta p { color: #4B5563; margin-bottom: 10px; }

button.thaihq-btn-danger, input.thaihq-btn-danger, .thaihq-btn-danger {
  background-color: #DC2626 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  line-height: normal !important;
  width: auto !important;
  height: auto !important;
  cursor: pointer;
  display: inline-block;
}
button.thaihq-btn-danger:hover, .thaihq-btn-danger:hover { background-color: #B91C1C !important; }
.thaihq-edit-banner { background: #FEF3C7; border: 1px solid #F59E0B; border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.thaihq-edit-banner a { margin-left: 8px; color: #1D4ED8; }
.thaihq-msg { margin-top: 10px; font-size: 14px; }
.thaihq-msg.error { color: #B91C1C; }
.thaihq-msg.success { color: #047857; }

.thaihq-preview { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 6px; padding: 12px; margin: 16px 0; max-width: 400px; }
.thaihq-preview div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.thaihq-preview-total { border-top: 1px solid #D1D5DB; margin-top: 6px; padding-top: 8px !important; font-weight: bold; }
.thaihq-preview-commission { color: #047857; font-weight: bold; }

.thaihq-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }
.thaihq-table { width: 100%; border-collapse: collapse; margin-bottom: 0; }
.thaihq-table th, .thaihq-table td { border: 1px solid #E5E7EB; padding: 8px; text-align: left; font-size: 13px; white-space: nowrap; }
.thaihq-table th { background: #374151; color: #fff; }
.thaihq-link-field { width: 100%; font-size: 12px; border: none; background: transparent; }

.thaihq-status { padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: bold; }
.thaihq-status-pending { background: #FEF3C7; color: #92400E; }
.thaihq-status-confirmed { background: #D1FAE5; color: #065F46; }
.thaihq-status-cancelled, .thaihq-status-refunded { background: #FEE2E2; color: #991B1B; }
.thaihq-status-ok { background: #D1FAE5; color: #065F46; }
.thaihq-status-warn { background: #FEF3C7; color: #92400E; }
.thaihq-status-info { background: #DBEAFE; color: #1E40AF; }
.thaihq-status-danger { background: #FEE2E2; color: #991B1B; }

/* admin dashboard */
.thaihq-admin-cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 20px; }
.thaihq-admin-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; padding: 14px 18px; min-width: 160px; flex: 1; }
.thaihq-admin-card-highlight { background: #D1FAE5; border-color: #A7F3D0; }
.thaihq-admin-card-label { display: block; font-size: 12px; color: #6B7280; margin-bottom: 4px; }
.thaihq-admin-card-value { display: block; font-size: 22px; font-weight: bold; color: #1F2937; }
.thaihq-admin-columns { display: flex; gap: 24px; flex-wrap: wrap; }
.thaihq-admin-col { flex: 1; min-width: 320px; }

.thaihq-note { font-size: 13px; color: #6B7280; font-style: italic; }

.thaihq-reason-box { background: #FFF7ED; border: 1px solid #FDBA74; border-radius: 8px; padding: 16px; margin: 12px 0 20px; max-width: 500px; }
.thaihq-reason-box textarea { width: 100%; max-width: 100%; padding: 8px; border: 1px solid #9CA3AF; border-radius: 4px; font-family: Arial, sans-serif; margin-bottom: 8px; }
.thaihq-reason-box button { margin-right: 8px; }

.thaihq-downloads { margin-top: 24px; padding-top: 16px; border-top: 1px solid #E5E7EB; }
.thaihq-downloads h4 { margin-bottom: 8px; }
.thaihq-downloads ul { list-style: none; padding: 0; margin: 0; }
.thaihq-downloads li { margin-bottom: 6px; }
.thaihq-downloads a { color: #1D4ED8; text-decoration: none; }
.thaihq-downloads a:before { content: "\2913  "; } /* small download-ish arrow, no image asset needed */
.thaihq-downloads a:hover { text-decoration: underline; }

/* clinic order page */
.thaihq-clinic-name { font-size: 18px; font-weight: bold; margin-bottom: 20px; }
.thaihq-success-box { background: #D1FAE5; border-radius: 8px; padding: 16px; margin-top: 16px; }
.thaihq-th { font-size: 0.7em; color: #6B7280; font-weight: normal; }

/* invoice */
.thaihq-invoice h1 { font-size: 22px; }
.thaihq-invoice h3 { font-size: 15px; margin-top: 20px; border-bottom: 1px solid #E5E7EB; padding-bottom: 4px; }
.thaihq-invoice-meta, .thaihq-invoice-clinic, .thaihq-invoice-lines, .thaihq-invoice-totals { width: 100%; border-collapse: collapse; margin: 10px 0; }
.thaihq-invoice-meta td { border: 1px solid #E5E7EB; padding: 8px; }
.thaihq-invoice-clinic td { border: 1px solid #E5E7EB; padding: 6px 8px; font-size: 13px; }
.thaihq-invoice-clinic td:first-child { font-weight: bold; width: 40%; background: #F9FAFB; }
.thaihq-invoice-lines th, .thaihq-invoice-lines td { border: 1px solid #E5E7EB; padding: 6px 8px; font-size: 13px; }
.thaihq-invoice-lines th { background: #374151; color: #fff; }
.thaihq-invoice-totals td { padding: 4px 8px; font-size: 13px; }
.thaihq-invoice-totals td:last-child { text-align: right; }
.thaihq-invoice-grandtotal td { font-weight: bold; font-size: 16px; background: #D1FAE5; }
@media print {
  .thaihq-invoice-noprint { display: none; }
}

/* Mobile (phones) */
@media (max-width: 480px) {
  .thaihq-earnings-bar { gap: 8px; }
  .thaihq-earn-box { min-width: calc(50% - 8px); padding: 10px 12px; }
  .thaihq-earn-value { font-size: 17px; }
  .thaihq-tab-btn { padding: 10px 10px; font-size: 14px; }
  .thaihq-portal form input, .thaihq-portal form select, .thaihq-portal form textarea,
  .thaihq-clinic-order form input, .thaihq-clinic-order form select {
    max-width: 100%;
  }
}


/* v1.18: shared typography with the product library, status filter pills, mobile tab wrap */
.thaihq-portal { font-family: "Manrope", Arial, sans-serif; }
.thaihq-filter-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.thaihq-filter-links a { padding: 6px 14px; border: 1px solid #D1D5DB; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: #4B5563; text-decoration: none; }
.thaihq-filter-links a:hover { border-color: #111827; color: #111827; }
.thaihq-filter-links a.active { background: #111827; border-color: #111827; color: #fff; }
.thaihq-portal .thaihq-tab-btn:focus-visible, .thaihq-admin-tab-btn:focus-visible, .thaihq-filter-links a:focus-visible { outline: 3px solid #1D4ED8; outline-offset: 2px; }
@media (max-width: 600px) { .thaihq-tabs { flex-wrap: wrap; } }
.thaihq-portal .login-remember label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.thaihq-portal .login-remember input[type="checkbox"] { width: auto; margin: 0; }