/* Tour Room Allotment */
/* Tour Room Allotment — customer review */
.tra-page { padding: 8px 10px 16px; }
.tra-page-hint {
  margin: 0 0 8px;
  font-size: 11px;
  padding: 6px 8px;
  background: #e3f2fd;
  border: 1px solid #90caf9;
  border-radius: 2px;
}
.tra-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 10px;
  margin-bottom: 10px;
  padding: 8px;
  background: #fafafa;
  border: 1px solid #e0e0e0;
}
.tra-filter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  font-weight: 700;
  color: #555;
}
.tra-filter .control { min-width: 7.5rem; font-size: 11px; }
.tra-filter-hotel .control { min-width: 11rem; }
.tra-filter-q .control { min-width: 9rem; }
.tra-table-wrap {
  overflow-x: auto;
  border: 1px solid #bdbdbd;
  background: #fff;
}
.tra-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.tra-table th,
.tra-table td {
  padding: 4px 8px;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
  vertical-align: middle;
}
.tra-table th.num,
.tra-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tra-table thead th {
  background: #eceff1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
.tra-table tbody tr.tra-row:hover { background: #f5f5f5; }
.tra-avail-neg { color: #c62828; font-weight: 700; }
.tra-st {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}
.tra-st-available { background: #e8f5e9; color: #2e7d32; }
.tra-st-full { background: #fff3e0; color: #e65100; }
.tra-st-shortage { background: #ffebee; color: #c62828; }
.tra-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  white-space: nowrap;
}
.tra-actions .btn-sm { font-size: 10px; padding: 2px 6px; }
.tra-expand-row td {
  padding: 6px 8px 10px 24px;
  background: #fafafa;
  border-bottom: 1px solid #bdbdbd;
}
.tra-inline-detail { max-width: 36rem; }
.tra-modal-hint { font-size: 11px; margin: 0 0 10px; }
.tra-audit-list { display: flex; flex-direction: column; gap: 10px; }
.tra-audit-item {
  padding: 8px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  background: #fafafa;
}
.tra-audit-hd { font-size: 11px; margin-bottom: 4px; }
.tra-audit-block { font-size: 13px; font-weight: 700; }
.tra-audit-add { color: #2e7d32; font-weight: 800; }
.tra-audit-meta { font-size: 10px; color: #666; margin-top: 4px; }
.tra-add-modal .form-grid { gap: 8px; }

/* ——— 2026-08-29 MOBILE4 — Room Allotment ——— */
@media (max-width: 900px) {
  .tra-page {
    padding: 6px 8px 72px;
  }
  .tra-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .tra-filter,
  .tra-filter-hotel,
  .tra-filter-q {
    width: 100%;
  }
  .tra-filter .control,
  .tra-filter-hotel .control,
  .tra-filter-q .control {
    min-width: 0;
    width: 100%;
    min-height: 40px;
  }
  .tra-filter-bar .btn {
    min-height: 40px;
  }
  .tra-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tra-table {
    min-width: 36rem;
    font-size: 12px;
  }
  .tra-table th,
  .tra-table td {
    padding: 8px 8px;
  }
  .tra-actions {
    gap: 6px;
  }
  .tra-actions .btn-sm {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 11px;
  }
  .tra-st {
    font-size: 11px;
    padding: 3px 8px;
  }
}

html.force-mobile .tra-page {
  padding: 6px 8px 72px;
}
html.force-mobile .tra-filter-bar {
  flex-direction: column;
  align-items: stretch;
}
html.force-mobile .tra-filter .control,
html.force-mobile .tra-filter-hotel .control,
html.force-mobile .tra-filter-q .control {
  min-width: 0;
  width: 100%;
  min-height: 40px;
}