/* Titillium Web：formula1.com 的內文字型（Google Fonts，OFL 授權）。F1 導覽列本身用的 Formula1
   是專有字型不能用，這是最接近且可合法使用的選擇。只有拉丁字形，中文會落到後備字型；
   導覽列、品牌字都是英文，不受影響。@import 必須在檔案最前面。 */
@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700;900&display=swap");

/* app-nav.js 專用樣式：logo、品牌字、導覽連結與 admin 徽章。
   獨立成檔案（而非併入 shared/style.css）並由 app-nav.js 自動注入 <link>，
   這樣任何頁面只要引入 app-nav.js 就會自動取得這組樣式，不必在每個頁面各自記得加一行 <link>。

   導覽列採 formula1.com Results 頁的深色主導覽：深底白字、項目撐滿列高，
   選中項紅色底線、hover 白色底線，底線疊在導覽列下緣的分隔線上；項目後方有斜向淡出的色帶。
   顏色用本檔自己的 --nav-* 變數，不讀頁面 token：尚未導入 admin-theme.css 的頁面頁首一樣是深色。 */

:root {
  --nav-bg: #15151e;
  --nav-line: #303037;
  --nav-ink: #ffffff;
  --nav-ink-soft: #aaaaaa;
  --nav-red: #d6242a;          /* 與 shared/static/ewc-70th-mark-red.png 的線條同色 */
  --nav-stripe: rgba(255, 255, 255, .07);
  --admin-ink: #000000;
  --admin-orange: #f97316;
  --nav-font: "Titillium Web", "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

/* Higher specificity also preserves light tokens when this sheet loads late. */
html[data-app-theme="light"] {
  --nav-bg: #ffffff;
  --nav-line: rgba(22, 22, 22, .16);
  --nav-ink: #161616;
  --nav-ink-soft: rgba(22, 22, 22, .72);
  --nav-red: #da1e28;
  --nav-stripe: rgba(218, 30, 40, .06);
  --admin-ink: #161616;
  --admin-orange: var(--brand-yellow);
}

/* 版面基礎在 style.css 的 .topbar；本檔較晚注入，同特異性會蓋過去。
   上下 padding 歸零讓導覽項目撐滿列高；分隔線改用 inset 陰影畫在列內，
   子元素（項目底線）畫在陰影之上，底線才能剛好蓋住分隔線。空間不足時整區與項目皆可換行。 */
.topbar {
  flex-wrap: wrap;
  gap: 0 16px;
  min-height: 64px;
  padding-top: 0;
  padding-bottom: 0;
  align-items: stretch;
  overflow: visible;
  background: var(--nav-bg);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--nav-line);
  color: var(--nav-ink);
  font-family: var(--nav-font);
}
.topbar-left {
  align-self: stretch;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  min-height: 64px;
}

/* 吉祥物原圖 480x347，高度固定、寬度依比例 */
.logo-mark {
  height: 40px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

.brand {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .01em;
  white-space: nowrap;
}

.tabs {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  align-self: stretch;
  gap: 8px;
  margin-left: 0;
}

.tab-btn {
  position: relative;
  isolation: isolate;          /* 讓 ::before 的 z-index: -1 停在按鈕自己的底下，不落到導覽列底色之後 */
  display: flex;
  flex: 0 0 auto;
  min-height: 44px;
  align-items: center;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  padding: 3px 16px 0;         /* 上方 3px 抵銷底線厚度，文字維持垂直置中 */
  font: inherit;
  font-size: 17px;
  font-weight: 400;
  color: var(--nav-ink-soft);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

/* 斜向色帶：每個項目右上方兩條平行斜帶，往下淡出 */
.tab-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 64px;
  height: 100%;
  background: linear-gradient(128deg,
    var(--nav-stripe) 0 38%, transparent 38% 56%, var(--nav-stripe) 56% 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  pointer-events: none;
}

.tab-btn:hover { color: var(--nav-ink); border-bottom-color: var(--nav-ink); }
/* 寫在 :hover 之後：選中項滑過時維持紅線 */
.tab-btn.active { color: var(--nav-ink); font-weight: 700; border-bottom-color: var(--nav-red); }

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 3px 10px;
  border: 1px solid var(--admin-orange);
  border-radius: 999px;
  background: var(--admin-ink);
  color: var(--admin-orange);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* 右側使用者區：username、變更密碼、登出 */
.nav-user {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
}
.nav-username {
  min-width: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--nav-ink-soft);
  font-size: 14px;
}
.topbar .btn.btn-text,
.nav-password-panel .btn.btn-text {
  flex: 0 0 auto;
  min-height: 44px;
  border: 0;
  background: transparent;
  padding: 6px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--nav-ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.topbar .btn.btn-text:hover,
.nav-password-panel .btn.btn-text:hover { color: var(--nav-ink); }

/* 變更密碼面板：導覽列下方的行內區塊 */
.nav-password-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 24px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-line);
  color: var(--nav-ink);
  font-family: var(--nav-font);
  font-size: 14px;
}
.nav-password-panel label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  color: var(--nav-ink-soft);
}
.nav-password-panel input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--nav-line);
  border-radius: 4px;
  background: #0d0d14;
  color: var(--nav-ink);
  font: inherit;
}
.nav-status {
  padding: 12px 24px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-line);
  color: var(--nav-ink);
  font-family: var(--nav-font);
}
.nav-password-message.error,
.nav-status.error { color: #ff6b6b; }
.nav-status.success { color: #4ade80; }
.nav-password-message { overflow-wrap: anywhere; }
.topbar button:disabled,
.nav-password-panel button:disabled { cursor: wait; opacity: .6; }

@media (max-width: 640px) {
  .topbar { padding-right: 16px; padding-left: 16px; }
  .nav-password-panel,
  .nav-status { padding: 12px 16px; }
}

/* Management user layout and theme switch shared with the login header. */
#appNavTopbar .nav-user--themed {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 44px auto;
  align-content: center;
  justify-content: end;
  gap: 0 4px;
  padding-block: 1px;
}
#appNavTopbar .nav-user--themed .nav-identity { display: contents; }
#appNavTopbar .nav-user--themed .nav-username {
  grid-row: 2;
  grid-column: 1 / -1;
  justify-self: end;
  max-width: 100%;
  width: 0;
  min-width: 100%;
  text-align: right;
  font-size: 12px;
  line-height: 18px;
}
#appNavTopbar .nav-user--themed > .btn { grid-row: 1; }
#appNavTopbar .nav-user--themed .nav-theme-toggle { grid-row: 1; grid-column: 1; }
:is(#appNavTopbar, .login-page .topbar) .nav-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: var(--nav-bg);
  color: var(--nav-ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
:is(#appNavTopbar, .login-page .topbar) .nav-theme-toggle::before {
  content: "";
  width: 36px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid var(--nav-ink-soft);
  border-radius: 999px;
  background: radial-gradient(circle at 10px 50%, var(--nav-ink) 0 6px, transparent 7px);
}
:is(#appNavTopbar, .login-page .topbar) .nav-theme-toggle[aria-checked="true"]::before {
  border-color: var(--nav-red);
  background: radial-gradient(circle at 25px 50%, #ffffff 0 6px, transparent 7px), var(--nav-red);
}
:is(#appNavTopbar, .login-page .topbar) .nav-theme-toggle:hover { background-color: var(--nav-stripe); }
#appNavTopbar button:focus-visible,
.nav-password-panel :is(button, input):focus-visible {
  outline: 2px solid var(--nav-ink);
  outline-offset: 3px;
}
html[data-app-theme="light"] #appNavTopbar .tab-btn.active { color: var(--nav-red); }
html[data-app-theme="light"] .admin-badge { background: var(--admin-orange); color: var(--admin-ink); }
html[data-app-theme="light"] .nav-password-panel input {
  background: #ffffff;
  border-color: rgba(22, 22, 22, .52);
}
html[data-app-theme="light"] :is(.nav-password-panel, #appNavTopbar) :is(button, input):focus-visible {
  outline-color: #a2191f;
}
html[data-app-theme="light"] .nav-password-panel input::placeholder { color: rgba(22, 22, 22, .72); opacity: 1; }
html[data-app-theme="light"] .nav-password-message.error,
html[data-app-theme="light"] .nav-status.error { color: #a2191f; }
html[data-app-theme="light"] .nav-status.success { color: #044317; }
html[data-app-theme="light"] :is(#appNavTopbar, .nav-password-panel) button:disabled {
  background: rgba(22, 22, 22, .04);
  color: rgba(22, 22, 22, .72);
  opacity: 1;
}