/* theme: classic — shell (shell) */
/* 保留結構的視覺升級(方案 A):只美化頂欄 .ty-topbar 與側欄 .ty-sidebar 及其內部元素。
   不改任何 HTML / DOM / 位置 / 導覽排序;不觸碰內容區。
   所有 selector 以 body.ty-theme-classic 開頭;CSS 變數宣告於 body.ty-theme-classic。 */

/* ── 色彩計畫(classic:沉穩鋼藍 + 深海軍藍頂欄)─────────────────────────── */
body.ty-theme-classic {
  --ty-accent:    #1a56a0;            /* 主色:較預設更深沉的鋼藍 */
  --ty-accent-2:  #2f74c9;            /* 輔色:漸層與 hover 用 */
  --ty-accent-soft: rgba(26, 86, 160, .08);
  --ty-accent-soft-2: rgba(26, 86, 160, .14);
  --ty-navy-1:    #12243b;            /* 頂欄漸層起 */
  --ty-navy-2:    #1d3a5c;            /* 頂欄漸層止 */
  --ty-ink:       #26303c;            /* 側欄文字 */
  --ty-ink-soft:  #5b6674;
  --ty-sb-bg:     #f8fafc;            /* 側欄底色(微冷白)*/
  --ty-line:      #e4e9f0;            /* 分隔線 */
  --ty-tree:      rgba(26, 86, 160, .22); /* 樹幹導引線 */
}

/* ══════════════════════════════════════════════════════════════════════════
   頂欄 .ty-topbar
   ══════════════════════════════════════════════════════════════════════════ */
body.ty-theme-classic .ty-topbar.navbar {
  background: linear-gradient(180deg, var(--ty-navy-2) 0%, var(--ty-navy-1) 100%) !important;
  box-shadow: 0 2px 10px rgba(12, 24, 40, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* 品牌字:提升字體層級 */
body.ty-theme-classic .ty-topbar .ty-brand,
body.ty-theme-classic .ty-topbar .navbar-brand {
  color: #f2f6fb;
  font-weight: 700;
  letter-spacing: .6px;
  transition: color .15s ease, opacity .15s ease;
}
body.ty-theme-classic .ty-topbar .navbar-brand:hover {
  color: #fff;
  opacity: .95;
}

/* 用戶名薄字 */
body.ty-theme-classic .ty-topbar .navbar-text {
  color: rgba(226, 235, 246, .82) !important;
  font-size: .9rem;
  letter-spacing: .2px;
}

/* 漢堡掣:圓角 + 收斂邊框 + 互動態 */
body.ty-theme-classic .ty-topbar .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  padding: .3rem .55rem;
  transition: background .15s ease, border-color .15s ease;
}
body.ty-theme-classic .ty-topbar .navbar-toggler:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .38);
}
body.ty-theme-classic .ty-topbar .navbar-toggler:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(120, 170, 235, .55);
}

/* 登出掣:精修 outline,hover 實心 */
body.ty-theme-classic .ty-topbar .btn-outline-light {
  border-radius: 8px;
  border-color: rgba(255, 255, 255, .45);
  font-weight: 600;
  letter-spacing: .3px;
  padding: .28rem .85rem;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body.ty-theme-classic .ty-topbar .btn-outline-light:hover {
  background: #fff;
  color: var(--ty-navy-1);
  border-color: #fff;
}
body.ty-theme-classic .ty-topbar .btn-outline-light:active {
  transform: translateY(1px);
}
body.ty-theme-classic .ty-topbar .btn-outline-light:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(120, 170, 235, .55);
}

/* B1 §1.2(2026-07-16):「🏠 主目錄」掣文字純白(Bootstrap 預設 #f8f9fa 喺深藍頂欄望落偏灰)。
   不加 !important:上面 :hover 規則 specificity 較高,白底深字照舊生效。 */
body.ty-theme-classic .ty-topbar .ty-home-btn { color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   側欄 .ty-sidebar
   ══════════════════════════════════════════════════════════════════════════ */
body.ty-theme-classic .ty-sidebar {
  background: var(--ty-sb-bg);
  border-right: 1px solid var(--ty-line);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .6);
  padding: .5rem .1rem;
}
/* 手機 off-canvas 陰影精修(保留原摺疊行為,只換陰影)*/
@media (max-width: 767.98px) {
  body.ty-theme-classic .ty-sidebar {
    box-shadow: .35rem 0 1.4rem rgba(12, 24, 40, .22);
  }
}

/* ── 一般葉節點連結 ─────────────────────────────────────────────────────── */
body.ty-theme-classic .ty-sidebar .nav-link {
  color: var(--ty-ink);
  border-radius: 8px;
  margin: 1px .5rem;
  padding: .55rem 1rem;
  font-size: .9rem;
  transition: background .13s ease, color .13s ease, box-shadow .13s ease;
}
body.ty-theme-classic .ty-sidebar .nav-link:hover {
  background: var(--ty-accent-soft);
  color: var(--ty-accent);
  box-shadow: inset 3px 0 0 var(--ty-accent-2);
}
body.ty-theme-classic .ty-sidebar .nav-link.active {
  background: var(--ty-accent-soft-2);
  color: var(--ty-accent);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--ty-accent);
}
body.ty-theme-classic .ty-sidebar .nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ty-accent-2) inset;
}

/* ── 主目錄根入口(#133)──────────────────────────────────────────────── */
body.ty-theme-classic .ty-sidebar .ty-nav-home .nav-link {
  font-weight: 700;
  border-bottom: 1px solid var(--ty-line);
  border-radius: 8px;
  margin: 1px .5rem .35rem;
}
body.ty-theme-classic .ty-sidebar .ty-nav-home .nav-link.active {
  background: var(--ty-accent-soft-2);
  color: var(--ty-accent);
  box-shadow: inset 3px 0 0 var(--ty-accent);
}

/* ── B2 2.1:側欄最底登出 ──────────────────────────────────────────────────
   必須有:上面 .ty-sidebar .nav-link{color:var(--ty-ink)} 係 0-3-1,壓得過 app.css
   嘅 .ty-sidebar .ty-nav-logout .nav-link(0-3-0)→ 冇呢條紅字會被打回黑字。*/
body.ty-theme-classic .ty-sidebar .ty-nav-logout .nav-link {
  color: var(--ty-color-danger);
  font-weight: 600;
}
body.ty-theme-classic .ty-sidebar .ty-nav-logout .nav-link:hover {
  background: var(--ty-accent-soft);
  color: var(--ty-color-danger);
  box-shadow: inset 3px 0 0 var(--ty-color-danger);
}

/* ── 一級群組標頭:精修深色實心帶 ─────────────────────────────────────── */
body.ty-theme-classic .ty-sidebar .nav-group-header {
  color: #fff;
  background: linear-gradient(100deg, var(--ty-accent) 0%, var(--ty-accent-2) 100%);
  border-radius: 9px;
  margin: .45rem .55rem;
  padding: .6rem .85rem;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .2px;
  box-shadow: 0 2px 6px rgba(26, 86, 160, .28);
  transition: filter .13s ease, box-shadow .13s ease, transform .05s ease;
}
body.ty-theme-classic .ty-sidebar .nav-group-header:hover {
  filter: none;
  box-shadow: 0 4px 12px rgba(26, 86, 160, .38);
}
body.ty-theme-classic .ty-sidebar .nav-group-header:active {
  transform: translateY(1px);
}
body.ty-theme-classic .ty-sidebar .nav-group-header:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(120, 170, 235, .6), 0 2px 6px rgba(26, 86, 160, .28);
}
body.ty-theme-classic .ty-sidebar .nav-group-header .bi {
  font-size: 1rem;
  opacity: .95;
}

/* 一級 caret */
body.ty-theme-classic .ty-sidebar .nav-group-header .nav-group-caret {
  border-left-color: #fff;
}

/* ── 二級群組標頭:精修淺底藍字 ───────────────────────────────────────── */
body.ty-theme-classic .ty-sidebar .nav-subgroup-header {
  color: var(--ty-accent);
  background: var(--ty-accent-soft);
  border: 1px solid rgba(26, 86, 160, .12);
  border-radius: 8px;
  margin: .28rem .55rem .28rem 1.2rem;
  padding: .42rem .7rem;
  font-weight: 600;
  font-size: .85rem;
  transition: background .13s ease, border-color .13s ease, box-shadow .13s ease;
}
body.ty-theme-classic .ty-sidebar .nav-subgroup-header:hover {
  background: var(--ty-accent-soft-2);
  border-color: rgba(26, 86, 160, .24);
}
body.ty-theme-classic .ty-sidebar .nav-subgroup-header:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ty-accent-2) inset;
}
body.ty-theme-classic .ty-sidebar .nav-subgroup-header .nav-group-caret {
  border-left-color: var(--ty-accent);
}
body.ty-theme-classic .ty-sidebar .nav-subgroup-header .bi {
  font-size: .95rem;
}

/* ── 樹幹分支導引線:改用主色調柔化 ───────────────────────────────────── */
body.ty-theme-classic .ty-sidebar .nav-item[data-nav-group]:not(.nav-group-header):not(.nav-subgroup-header) > .nav-link::before {
  border-left-color: var(--ty-tree);
}
body.ty-theme-classic .ty-sidebar .nav-item[data-nav-group]:not(.nav-group-header):not(.nav-subgroup-header) > .nav-link::after {
  border-top-color: var(--ty-tree);
}