/* TaiwanBuying 1.5 - shared style for detail pages (ShowDetailUCS, ShowCCDetail..., ShowAlertMessages)
   Linked from HeadBrief.inc and HeadBrief_u.inc */

/* Same font as the homepage (font #8): YaHei on Windows, PingFang on Apple, Noto on Android */
html body, html body td {
  font-family: "Microsoft YaHei", "微軟雅黑", "PingFang TC", "Heiti TC", "Noto Sans TC", sans-serif;
}

/* Inside the homepage's in-page panel: the panel bar already shows the title, so drop the big banner */
@media screen {   /* banner hidden in the panel on screen only: printouts keep it */
html.tbn-in-panel img[src*="title01"],
html.tbn-in-panel img[src*="hr.gif"] { display: none; }
/* ...and the whole banner row (link + <br>s), so the page starts right under the panel bar */
html.tbn-in-panel tr:has(> td > a > img[src*="title01"]),
html.tbn-in-panel tr:has(> td > table > tbody > tr > td > a > img[src*="title01"]) { display: none; }
html.tbn-in-panel body { padding-top: 6px; }
}

/* Icon menu (map / follow / < > / ...): one line, no fixed 180px box */
.FBSubMenu { width: auto !important; white-space: nowrap; }
/* the "..." menu opens towards the left, under the icons, so it never runs off the right edge */
.FBSubMenu .sidenav, .FBSubMenu .dropdown-content { left: auto !important; right: 0; top: 100%; white-space: normal; text-align: left;
  max-width: calc(100vw - 16px); max-height: 75vh; overflow-y: auto; }

/* Banner mode = page opened directly (e.g. from a search engine), not inside the homepage panel:
   no icon menu, no follow/collect status, no event badge - just the banner (links to homepage) and the content */
html:not(.tbn-in-panel) .FBSubMenu,
html:not(.tbn-in-panel) .tbn-member-only,
html:not(.tbn-in-panel) #img_Horse { display: none !important; }

/* Icon row buttons: same size, same grey line icons (TBNIcons.inc) */
.FBSubMenu .dropbtn, .FBSubMenu .dropbtn2 {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0 !important; margin: 0 1px; vertical-align: middle;
  border: 0 !important; border-radius: 6px; background: transparent !important; color: #555; cursor: pointer;
}
.FBSubMenu .dropbtn:hover, .FBSubMenu .dropbtn2:hover, .FBSubMenu:hover .dropbtn { background: #eee !important; color: #111; }
.tbn-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tbn-ico-filled { fill: currentColor; }
.tbn-ico-dots { fill: currentColor; stroke: none; }

/* ---------- Phones / narrow windows ---------- */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  img[src*="title01"] { max-width: 100%; height: auto; }

  /* fixed pixel widths (640 / 600 ...) -> fit the screen; percentage widths stay */
  table[width]:not([width$="%"]) { width: 100% !important; }
  td[width]:not([width$="%"]) { width: auto !important; }
  table:has(> tbody > tr > td[width]:not([width$="%"])) { width: 100% !important; }   /* wrapper of a fixed-width cell */
  body > div[align="center"] > table, body > table { width: 100% !important; }
  table { max-width: 100%; }
  td { max-width: 100vw; overflow-wrap: anywhere; word-break: break-word; }

  /* readable text */
  td, .td, body { font-size: 16px !important; line-height: 1.6 !important; }
  .small { font-size: 14px !important; }
  .big { font-size: 20px !important; }

  /* a little side margin */
  body > div[align="center"] > table { padding: 0 8px; box-sizing: border-box; }

  /* full-width spacer runs (　　　　) in front of TBN No. waste space on phones */
  hr { margin: 6px 0; }

  /* ShowDetailUCS header row: keep "TBN No. : 1234567" and "本案已追蹤" on one line each */
  table:has(> tbody > tr > td.tdTBNNo) > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  table:has(> tbody > tr > td.tdTBNNo) > tbody > tr > td { display: block; width: auto !important; }
  td.tdTBNNo { white-space: nowrap; font-size: 15px !important; padding-left: 0; }
  td.tdTBNNo + td { white-space: nowrap; }
  table:has(> tbody > tr > td.tdTBNNo) > tbody > tr > td:has(> .FBSubMenu) { margin-left: auto; text-align: right !important; white-space: nowrap; }

  /* award page bidder table is fixed at 700px */
  table.listTable { width: 100% !important; }
  table.listTable tr td { padding-left: 3px; padding-right: 3px; }
  table.listTable tr td:last-child { white-space: nowrap; overflow-wrap: normal; word-break: normal; }

  /* bigger tap targets for the icon row */
  a img[src*="ucsicon"] { min-width: 28px; min-height: 28px; }
}