/* TGM Tracking Portal styles. Layout scoped under .tgm-portal.
   .tgm-badge classes are intentionally unscoped (tgm- prefixed, no theme conflicts)
   so the generator app can reuse the exact same badges. */

.tgm-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
}
.tgm-badge--not_found      { background: #eeeeee; color: #616161; }
.tgm-badge--info_received  { background: #e0f7fa; color: #00838f; }
.tgm-badge--in_transit     { background: #e3f2fd; color: #1565c0; }
.tgm-badge--pick_up        { background: #f3e5f5; color: #6a1b9a; }
.tgm-badge--out_for_delivery { background: #fff3e0; color: #ef6c00; }
.tgm-badge--undelivered    { background: #ffebee; color: #c62828; }
.tgm-badge--delivered      { background: #e8f5e9; color: #2e7d32; }
.tgm-badge--alert          { background: #fce4ec; color: #ad1457; }
.tgm-badge--expired        { background: #efebe9; color: #5d4037; }
.tgm-badge--unknown        { background: #f5f5f5; color: #9e9e9e; }

.tgm-portal { max-width: 1100px; margin: 0 auto; padding: 8px; font-family: inherit; }
.tgm-portal-top h2 { margin: 0 0 4px; font-size: 28px; }
.tgm-portal-sub { margin: 0 0 10px; color: #666; font-size: 14px; }
.tgm-portal textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px;
  border: 1px solid #c9c9c9; border-radius: 6px; resize: vertical; font-family: monospace;
}
.tgm-portal-bar { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.tgm-portal-count { font-size: 13px; color: #666; }
.tgm-portal-carrier {
  padding: 9px 10px; font-size: 14px; border: 1px solid #c9c9c9; border-radius: 6px;
  background: #fff; cursor: pointer;
}
.tgm-portal-track {
  padding: 10px 26px; font-size: 15px; font-weight: 700; background: #ff6a00; color: #fff;
  border: none; border-radius: 6px; cursor: pointer;
}
.tgm-portal-track:hover { background: #e55f00; }
.tgm-portal-track:disabled { opacity: .6; cursor: default; }
.tgm-portal-refresh {
  padding: 10px 18px; font-size: 14px; background: #f0f0f0; color: #333;
  border: 1px solid #ccc; border-radius: 6px; cursor: pointer;
}
.tgm-portal-msg {
  padding: 10px 12px; margin: 8px 0; border-radius: 6px;
  background: #fff8e1; color: #7a5c00; border: 1px solid #ffe082; font-size: 14px;
}
.tgm-portal-empty { text-align: center; padding: 60px 20px; }
.tgm-portal-empty h2 { margin: 0 0 8px; font-size: 28px; }
.tgm-portal-empty p { color: #666; font-size: 16px; }

.tgm-portal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.tgm-pchip {
  padding: 5px 12px; font-size: 13px; border: 1px solid #ccc; border-radius: 999px;
  background: #fff; cursor: pointer;
}
.tgm-pchip.on { background: #222; color: #fff; border-color: #222; }

.tgm-portal-list { display: flex; flex-direction: column; gap: 8px; }
.tgm-prow { border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; overflow: hidden; }
.tgm-prow-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; flex-wrap: wrap;
}
.tgm-prow-head:hover { background: #fafafa; }
.tgm-pnum { font-family: monospace; font-weight: 700; font-size: 14px; }
.tgm-pcopy { border: none; background: none; cursor: pointer; font-size: 14px; color: #666; padding: 2px 4px; }
.tgm-pcopy:hover { color: #111; }
.tgm-pcarrier { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: .4px; }
.tgm-pevent { flex: 1; min-width: 200px; font-size: 13px; color: #444; }
.tgm-pevent b { color: #111; margin-right: 6px; }
.tgm-pchev { color: #999; font-size: 14px; }
.tgm-ptimeline { border-top: 1px solid #eee; padding: 8px 12px 12px; background: #fcfcfc; }
.tgm-ptimeline ul { list-style: none; margin: 0; padding: 0; }
.tgm-ptimeline li {
  display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #eee; font-size: 13px;
}
.tgm-ptimeline li:last-child { border-bottom: none; }
.tgm-pevtime { color: #111; font-weight: 600; white-space: nowrap; min-width: 130px; }
.tgm-pevloc { color: #888; min-width: 120px; }
.tgm-pevtext { color: #444; flex: 1; }
.tgm-pnoev, .tgm-pempty { color: #888; font-size: 14px; padding: 12px; }