/* ================================================================
   新版入口網 — 專用樣式
   /_shared/portal.css
   版本 v3 2026-10-06（README v66）
   v3：釘選／最近使用區塊、系統列的 ☆ 釘選鈕（.pt-row 包住 .sys-row）、釘選排序模式。
       ★ 系統列的底線從 .sys-row 移到外層 .pt-row（.sys-row 在 .pt-row 裡永遠是 last-child）。
   v2：手機版系統列改成可換行（說明文字另起一行，名稱不再被擠成直排）
   共用樣式在 ui.css；這裡只放入口網首頁與 /portal-admin/ 用得到的。
   ★ z-index 沿用 README 的分層：抽屜遮罩 70／抽屜 71／小視窗 99、100。
   ================================================================ */

.pt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* ---------- 頁首的入口網切換 ---------- */

.pt-switch { flex: 0 0 auto; }
.pt-switch select {
  width: auto; min-width: 128px; padding: 4px 28px 4px 9px;
  font-size: 13px; font-weight: 500; color: var(--pine);
  background-color: var(--pine-dim); border-color: #cdd8d4;
}

/* ---------- 首頁 ---------- */

.pt-lead { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; margin-bottom: 18px; }
.pt-tabs button { padding: 7px 18px; font-size: 14px; position: relative; }
.pt-search { flex: 1 1 260px; max-width: 420px; }
.pt-badge {
  display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px;
  font-size: 11px; line-height: 18px; text-align: center;
  background: var(--rust); color: #fff; border-radius: 9px;
}

.pt-alert {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; margin-bottom: 20px;
  background: var(--brass-dim); border: 1px solid #e9dcb8; border-radius: var(--r);
  font-size: 14px; color: var(--ink);
}
.pt-alert b { color: var(--brass); }
.pt-alert .btn { margin-left: auto; }

.sys-row .tag { flex: 0 0 auto; }
.sys-code:empty::before { content: '·'; color: var(--rule); }

/* ---------- 釘選、最近使用（v3） ---------- */

/* 系統列外層：底線改由這層畫，☆ 鈕疊在右側（按鈕不能放在 <a> 裡面） */
.pt-row { position: relative; border-bottom: 1px solid var(--rule-2); }
.pt-row:last-child { border-bottom: 0; }
.pt-row > .sys-row { border-bottom: 0; padding-right: 46px; }

.pt-star {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r);
  background: none; cursor: pointer; line-height: 1; font-size: 17px;
  color: var(--ink-3); opacity: .4;
}
.pt-row:hover .pt-star, .pt-star:focus-visible { opacity: 1; }
.pt-star:hover { color: var(--brass); background: var(--brass-dim); opacity: 1; }
.pt-star.on { color: var(--brass); opacity: 1; }

.pt-quick-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); min-height: 30px; }
.pt-quick-head h2 { font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 0; padding: 0; border: 0; }
.pt-quick-head .n { font-size: 12px; color: var(--ink-3); }
.pt-quick-head .btn { margin-left: auto; }
.pt-pin-msg { font-size: 12px; color: var(--pine); }
.pt-pin-msg:empty { display: none; }
.pt-pin-empty { padding: 12px 14px; font-size: 13px; color: var(--ink-3); }

/* 排序模式：整列可拖曳（桌機），↑↓ 給手機與鍵盤 */
.pt-sort-row {
  display: flex; align-items: center; gap: 12px; padding: 7px 8px 7px 6px;
  border-bottom: 1px solid var(--rule-2); background: var(--panel); cursor: grab; user-select: none;
}
.pt-sort-row:last-child { border-bottom: 0; }
.pt-sort-row.dragging { opacity: .45; }
.pt-sort-row.over { box-shadow: inset 0 2px 0 var(--pine); }
.pt-grip { flex: 0 0 auto; color: var(--ink-3); font-size: 13px; letter-spacing: -3px; padding: 0 4px; }
.pt-mv {
  flex: 0 0 auto; width: 32px; height: 30px; padding: 0; font-size: 14px;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel); color: var(--ink-2); cursor: pointer;
}
.pt-mv:hover:not(:disabled) { border-color: var(--pine); color: var(--pine); }
.pt-mv:disabled { opacity: .35; cursor: default; }
.pt-sort-hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* ---------- 待辦 ---------- */

.pt-todo-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.pt-todo-head h2 { font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 0; }
.pt-todo-head .n { font-size: 12px; color: var(--ink-3); }
.pt-todo-head a { margin-left: auto; font-size: 13px; text-decoration: none; }

.todo-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--rule-2); text-decoration: none; color: inherit; flex-wrap: wrap; }
.todo-row:last-child { border-bottom: 0; }
.todo-row:hover { background: var(--pine-dim); }
.todo-form { flex: 0 0 112px; font-size: 12px; color: var(--ink-3); }
.todo-title { flex: 1 1 220px; min-width: 0; }
.todo-sub { font-size: 12px; color: var(--ink-3); }
.todo-meta { flex: 0 0 auto; font-size: 12px; color: var(--ink-2); display: flex; gap: 8px; align-items: baseline; }

/* ---------- 內嵌檢視 ---------- */

body.pt-embedding main { max-width: none; padding: 0; }
.pt-embed-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 20px; background: var(--panel); border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.pt-embed-bar b { font-weight: 500; }
.pt-embed-hint { font-size: 12px; color: var(--ink-3); }
.pt-embed-bar a.btn { margin-left: auto; text-decoration: none; }
.pt-embed iframe {
  display: block; width: 100%; border: 0; background: var(--panel);
  height: calc(100dvh - var(--head-h) - 50px);
}

@media (max-width: 760px) {
  /* 頁首：首頁已經有入口網下拉，標題讓位給它（品牌由 logo 代表） */
  body:has(#switch:not([hidden])) .tf-title { display: none; }

  /* 系統列：代號縮窄、名稱優先，說明文字（.tag）掉到下一行。
     ★ 說明原本 nowrap，長的會把名稱擠成一字一行，而且超出卡片。 */
  .sys-row { flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .sys-code { flex: 0 0 64px; font-size: 11px; word-break: break-all; }
  .sys-name { flex: 1 1 0; min-width: 0; }
  .sys-row .tag { white-space: normal; line-height: 1.5; }
  .sys-row .tag:not(.tag-off):not(.tag-ask) {
    flex: 1 0 100%; padding: 0 0 0 74px; background: none; color: var(--ink-3); font-weight: 400;
  }

  .pt-row > .sys-row { padding-right: 42px; }
  .pt-star { opacity: .7; }
  .pt-sort-row .sys-code { flex: 0 0 56px; }
  .pt-switch select { min-width: 0; max-width: 118px; font-size: 12px; padding: 3px 22px 3px 7px; }
  .pt-lead { gap: 10px; }
  .pt-search { flex-basis: 100%; max-width: none; order: 3; }
  .todo-form { flex-basis: 100%; }
  .pt-embed-bar { padding: 6px 12px; }
  .pt-embed-hint { display: none; }
  .pt-embed iframe { height: calc(100dvh - var(--head-h) - 46px); }
}