/*
 * Legacy UI fixups — runs AFTER web.css/mobile.css/common.css.
 *
 * Scope: all rules below are nested under `.legacy-ui` (a div wrapper
 * applied in non-console route-group layouts via components/layout/
 * site-shell.tsx). /console pages don't get this wrapper, so their
 * Glass UI is unaffected. Was `body.legacy-ui` until 2026-05-14 when
 * the body-level class leaked into /console pages and broke the
 * console sidebar.
 */

/* Make Bootstrap card primitives invisible inside legacy scope.
 * globals.css defines `.card` as a Glass UI card; on legacy pages we
 * want it as a no-op wrapper so the legacy banner / form chrome
 * doesn't get a double box. */
.legacy-ui .card,
.legacy-ui .card-header,
.legacy-ui .card-body,
.legacy-ui .card-footer {
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: block;
  /* No !important on padding — let inline page padding override per
   * section. Was `padding: 0 !important` which blocked Rita's 20px
   * paddingTop spacing fix on /register. */
  padding: 0;
}
.legacy-ui .card {
  position: relative;
}

/* Legacy `.LoginArea` defaults to `width: 90%; margin: 20px auto` —
 * shrinks the card to ~90% inside a 1200 main (≈ 1080). Rita asked
 * list pages (/parcels/forecast etc) to use the full 1200 container.
 * Forms with narrow content (login/register/forgot-password) still
 * center via their own inner maxWidth, so widening the outer card
 * only affects how wide the table area can be. */
.legacy-ui .LoginArea {
  width: 100% !important;
  margin: 20px auto !important;
}

/* SubmenuArea — align width with `.LoginArea` (100%) so the tab row sits
 * flush with the red title bar below; switch to flex so 2/3/4 items
 * evenly share the row regardless of label length. Legacy used
 * `inline-block` + width 49/32/24% which only looked even by accident
 * (relied on whitespace-aware sizing).
 *
 * `.is-active` — legacy HTML adds this class on the current page's tab
 * but never wrote a matching CSS rule, so it rendered identical to
 * inactive tabs. Add dark-gray-on-white styling that survives :hover. */
.legacy-ui .SubmenuArea {
  width: 100%;
  display: flex;
  gap: 4px;
  margin: 0 auto 20px;
}
.legacy-ui .SubMenu,
.legacy-ui .SubMenuThree,
.legacy-ui .SubMenuFour {
  flex: 1;
  width: auto;
  margin: 0;
  display: block;
}
.legacy-ui .SubMenu.is-active,
.legacy-ui .SubMenuThree.is-active,
.legacy-ui .SubMenuFour.is-active,
.legacy-ui .SubMenu.is-active:link,
.legacy-ui .SubMenuThree.is-active:link,
.legacy-ui .SubMenuFour.is-active:link,
.legacy-ui .SubMenu.is-active:visited,
.legacy-ui .SubMenuThree.is-active:visited,
.legacy-ui .SubMenuFour.is-active:visited,
.legacy-ui .SubMenu.is-active:hover,
.legacy-ui .SubMenuThree.is-active:hover,
.legacy-ui .SubMenuFour.is-active:hover {
  background-color: #535353;
  color: #fff;
  font-weight: bold;
}

/* Input override — modernized per Rita's reference screenshot.
 * Legacy `.Input001` had height 20px + #aaa border, looks dated. */
.legacy-ui .Input001 {
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  width: 50%;
  min-width: 200px;
  height: 38px !important;
  padding: 6px 12px !important;
  box-sizing: border-box;
  font-size: 14px !important;
}
.legacy-ui .Input001:focus {
  outline: none;
  border-color: #c7000f !important;
  box-shadow: 0 0 0 3px rgba(199, 0, 15, 0.1);
}

/* Login-page inputs — same modernized look as Input001 but legacy
 * uses different class names (LoginInputStyle01 = account,
 * LoginInputStyle02 = password). Legacy CSS sets a 300×38 fixed size
 * with a background-image icon on the left. Override here to match
 * Rita's modernized aesthetic — drop icon, gray border, rounded. */
.legacy-ui .LoginInputStyle01,
.legacy-ui .LoginInputStyle02 {
  background-image: none !important;
  /* No !important on width — inline `style={{ width: 80 }}` etc must
   * win. Default to 100% so unstyled inputs fill the form. */
  width: 100%;
  max-width: 100%;
  padding: 6px 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  box-sizing: border-box;
}
/* height 38px 只給 input/select，textarea 要靠 rows attr 撐高，避免 textarea
   被壓成一行高 (support 留言內容看不到完整 3 行就是這原因)。 */
.legacy-ui input.LoginInputStyle01,
.legacy-ui select.LoginInputStyle01,
.legacy-ui input.LoginInputStyle02,
.legacy-ui select.LoginInputStyle02 {
  height: 38px !important;
}
.legacy-ui textarea.LoginInputStyle01,
.legacy-ui textarea.LoginInputStyle02 {
  /* web.css 內 .LoginInputStyle01 設了 height:38px (無 !important)，會
     蓋住 textarea 的自然高度，所以這裡用 height:auto !important 釋放
     讓 rows attribute 撐高。 */
  height: auto !important;
  min-height: 38px;
  line-height: 1.6;
}
.legacy-ui .LoginInputStyle01:focus,
.legacy-ui .LoginInputStyle02:focus {
  outline: none;
  border-color: #c7000f !important;
  box-shadow: 0 0 0 3px rgba(199, 0, 15, 0.1);
}

/* Legacy `.LoginInput01Space` had margin-top: 30px which is too loose
 * with modernized labels. Tighten the top margin so each label sits
 * close to the input above it. */
.legacy-ui .LoginInput01Space {
  margin-top: 10px !important;
}

/* Login-page CTA buttons. Legacy uses `btn btn-primary btn-rounded` for
 * both 「會員登入」 and 「註冊會員」. Match the .btn-ok modernized look so
 * the same red rounded pill applies. */
.legacy-ui .btn.btn-primary.btn-rounded {
  background-image: none !important;
  background-color: #c7000f !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 6px !important;
  height: 38px !important;
  min-width: 120px;
  padding: 0 24px !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}
.legacy-ui .btn.btn-primary.btn-rounded:hover {
  background-color: #a30009 !important;
  text-decoration: none;
}

/* Action buttons — replace legacy PNG-image buttons with solid red
 * rounded buttons. */
.legacy-ui .btn-ok {
  background-image: none !important;
  background-color: #c7000f !important;
  color: #fff !important;
  border: 0;
  border-radius: 6px !important;
  height: 38px !important;
  width: auto !important;
  min-width: 120px;
  padding: 0 24px !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
/* 所有 pseudo state 都顯式設 color，避免某些瀏覽器點擊後把文字色 reset
   成系統預設 (link blue / red focus color)。
   各 state bg 也統一覆寫，行動裝置補 -webkit-tap-highlight-color。 */
.legacy-ui .btn-ok {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.legacy-ui .btn-ok:hover:not(:disabled) {
  background-color: #a30009 !important;
  color: #fff !important;
}
.legacy-ui .btn-ok:focus,
.legacy-ui .btn-ok:focus-visible,
.legacy-ui .btn-ok:active {
  background-color: #c7000f !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}
.legacy-ui .btn-ok:focus:hover:not(:disabled),
.legacy-ui .btn-ok:active:hover:not(:disabled) {
  background-color: #a30009 !important;
}
.legacy-ui .btn-ok:disabled {
  background-color: #fda4a8 !important;
  color: #fff !important;
  cursor: not-allowed;
  opacity: 1;
}

/* btn-cancel — secondary outline (white bg + gray border + dark text).
 * Visually distinct from .btn-ok so users can tell the destructive/exit
 * action from the confirm action at a glance. */
.legacy-ui .btn-cancel {
  background-image: none !important;
  background-color: #fff !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  height: 38px !important;
  width: auto !important;
  min-width: 120px;
  padding: 0 24px !important;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.legacy-ui .btn-cancel:hover:not(:disabled) {
  background-color: #f9fafb !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
}
.legacy-ui .btn-cancel:focus,
.legacy-ui .btn-cancel:focus-visible,
.legacy-ui .btn-cancel:active {
  background-color: #fff !important;
  color: #374151 !important;
  outline: none !important;
  box-shadow: none !important;
}
.legacy-ui .btn-cancel:focus:hover:not(:disabled),
.legacy-ui .btn-cancel:active:hover:not(:disabled) {
  background-color: #f9fafb !important;
}
.legacy-ui .btn-cancel:disabled {
  background-color: #f3f4f6 !important;
  color: #9ca3af !important;
  border-color: #e5e7eb !important;
  cursor: not-allowed;
  opacity: 1;
}

/* Small-size variant — use in tables / inline actions where the
 * default 38px-tall btn is too big. Add `btn-sm` next to .btn-ok or
 * .btn-cancel. */
.legacy-ui .btn-ok.btn-sm,
.legacy-ui .btn-cancel.btn-sm {
  height: 28px !important;
  min-width: 0 !important;
  padding: 4px 14px !important;
  font-size: 13px !important;
  line-height: 20px !important;
}

/* Bootstrap form-group + invalid-feedback — minimal definitions.
 * Scoped to legacy so Glass UI isn't affected. */
.legacy-ui .form-group {
  margin-bottom: 1rem;
}
.legacy-ui .invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
}
.legacy-ui .invalid-feedback.d-block {
  display: block;
}
.legacy-ui .is-invalid {
  border-color: #dc3545 !important;
}

/* col-lg mx-auto wrapper — legacy uses `col-lg mx-auto` standalone
 * (without `.row` parent). Without override Bootstrap's grid collapses
 * flex-basis:0 — width vanishes. Override only inside .legacy-ui so
 * Glass UI pages using bootstrap-grid normally aren't affected. */
.legacy-ui .col-lg {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}
.legacy-ui .mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Legacy scope baseline: white bg, 14px body font.
 * `.legacy-ui` is a div wrapper, so set on the div itself. */
.legacy-ui {
  background: #fff !important;
  background-image: none !important;
  font-size: 14px !important;
}

/* Read-only cell text — legacy CSS gives .RightCol font-weight:bold
 * which makes display values look too heavy. Rita asked for 500.
 * LeftCol (red labels) keeps bold. */
.legacy-ui .RightCol {
  font-weight: 500 !important;
  font-size: 14px !important;
}

/* Title banner — Rita asked 17px → 18px + no vertical margin (legacy
 * web.css set margin: 20px 0; Rita prefers flush against subheader). */
.legacy-ui .PageTableTitle_Mem,
.legacy-ui .PageTableTitle_Delivery,
.legacy-ui .PageTableTitle_Info,
.legacy-ui .PageTableTitle_Info2,
.legacy-ui .PageTableTitle_Info3,
.legacy-ui .PageTableTitle_QA,
.legacy-ui .FareTitle {
  font-size: 18px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Gap between the red title banner (.card-header) and the gray sub-header
 * immediately following it. The banner margin-bottom is forced to 0 above
 * (flush look); Rita 2026-06-01 wants a small breathing gap before the first
 * sub-section header (register / profile / verify / forecast / pack). Targets
 * only the banner→subheader adjacency, so sub-headers that follow form bodies
 * are unaffected. Desktop + mobile (no media query). */
.legacy-ui .card-header + .card-sub-header {
  margin-top: 8px;
}

/* 首頁集運服務流程 5-step responsive — 桌面/平板強制單列 (flex-nowrap),
   手機 ≤640px 改成直向堆疊, 隱藏中間箭頭。 */
.legacy-ui .home-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
}
@media (max-width: 640px) {
  .legacy-ui .home-steps {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .legacy-ui .home-steps .home-step-item {
    flex: none !important;
    width: 100%;
    max-width: 280px;
  }
  .legacy-ui .home-steps .home-step-arrow {
    display: none;
  }
}

/* Page content area: max-width 1200px centered. The legacy shell div
 * is flex column — `main` is the flex item that holds page content. */
.legacy-ui main {
  display: block !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 24px 0 !important;
  flex: none !important;
}

/* SubmenuArea: legacy sets width:95% which on wide viewports made it
 * narrower than main (1200px), creating a visual indent vs. main.
 * Cap to same max-width so the submenu tabs align with the content
 * card below. */
.legacy-ui .SubmenuArea {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;
}

/*
 * Header quick-button height alignment.
 *
 * Legacy uses `<a>` for 登入/註冊 and 試算; LegacyShell uses `<button>`
 * for 登出系統. Browser button defaults differ from anchor — even with
 * identical CSS the heights diverged. Force shared box-sizing /
 * line-height / vertical-align / display.
 */
.legacy-ui .QuickBtn .Memlogin,
.legacy-ui .QuickBtn .MemSignup,
.legacy-ui .QuickBtn .Fee {
  display: inline-block;
  box-sizing: border-box;
  line-height: 1.42857143;
  vertical-align: middle;
  text-decoration: none;
  margin: 0;
}
.legacy-ui .QuickBtn button.Memlogin,
.legacy-ui .QuickBtn button.MemSignup,
.legacy-ui .QuickBtn button.Fee {
  font: inherit;
  font-family: 'Microsoft JhengHei', sans-serif, monospace;
  font-size: 13px;
  font-weight: 700;
}