/* =========================================================
   誠泰集團 資產管理系統 - Enterprise UI
   主色：深灰藍 + 金色點綴
   ========================================================= */
:root{
  --bg: #f6f7fb;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #6b7280;
  --border: #e5e7eb;

  --nav: #0b1220;           /* 深灰藍 */
  --nav2:#0f1a2f;
  --accent: #0072E3;        /* 客戶指定藍 */
}

/* =========================================================
   Theme: dark
   ========================================================= */
body.theme-dark{
  --bg: #0b1220;
  --panel: #0f1a2f;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: rgba(255,255,255,.10);
}

body.theme-dark .app-topbar,
body.theme-dark .app-footer{
  background: var(--panel);
  border-color: var(--border);
}

body.theme-dark .card,
body.theme-dark .card-soft{
  background: var(--panel);
  border-color: var(--border);
}

body.theme-dark .topbar-right .btn-outline-light,
body.theme-dark .topbar-icon{
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.88);
}
body.theme-dark .topbar-right .btn-outline-light:hover,
body.theme-dark .topbar-icon:hover{
  border-color: rgba(255,255,255,.35);
  color: #fff;
}

body.theme-dark .user-pill{
  border-color: rgba(255,255,255,.12);
  background: rgba(71, 85, 105, .70);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}
body.theme-dark .user-pill:hover,
body.theme-dark .user-pill:focus{
  background: rgba(51, 65, 85, .78);
  color: #fff;
}

html, body{
  height:100%;
}

/* 全站字型（含中文） */
body{
  font-family:'Microsoft JhengHei','微軟正黑體','Noto Sans TC',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
}

.app-body{
  background: var(--bg);
  color: var(--text);
}

.app-shell{
  min-height:100vh;
  display:flex;
}

/* =========================================================
   Sidebar
   ========================================================= */
.app-sidebar{
  width: 260px;
  background: linear-gradient(180deg, var(--nav), var(--nav2));
  color:#fff;
  border-right: 1px solid rgba(255,255,255,.08);
  position: sticky;
  top:0;
  height:100vh;
}

/* 抽屜用共用 class（JS 會用） */
.sidebar{
  width: 260px;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding: 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand-logo{
  width:40px;
  height:40px;
  object-fit:contain;
  border-radius:10px;
  background: rgba(255,255,255,.06);
  padding:6px;
}

.brand-title{
  font-weight: 800;
  letter-spacing: .5px;
  font-size: 14px;
}

.brand-sub{
  font-size:12px;
  color: rgba(255,255,255,.75);
}

.app-sidebar .nav-link{
  color: rgba(255,255,255,.82);
  padding: 10px 12px;
  border-radius: 12px;
  margin: 2px 8px;
  font-weight: 900; /* Noto Sans TC Black */
  font-size: 16px;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* 左側選單：動態光條 */
.app-sidebar .nav-link::before{
  content:"";
  position:absolute;
  left: 6px;
  top: 50%;
  width: 4px;
  height: 60%;
  border-radius: 999px;
  background: var(--accent);
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  opacity: .95;
  transition: transform .18s ease;
}

.app-sidebar .nav-link:hover{
  background: rgba(255,255,255,.06);
  color:#fff;
  transform: translateX(4px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.app-sidebar .nav-link.active{
  background: rgba(214,177,94,.18);
  color:#fff;
  border: 1px solid rgba(214,177,94,.28);
  transform: translateX(4px);
  box-shadow: 0 14px 26px rgba(0,0,0,.22);
}

.app-sidebar .nav-link.active::before{
  transform: translateY(-50%) scaleY(1);
}

.nav-section{
  margin: 10px 14px 4px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* Admin 子選單（縮排） */
.nav-sub{
  padding-left: 2.2rem;
  font-size: 0.95rem;
  opacity: 0.95;
}

/* =========================================================
   Main
   ========================================================= */
.app-main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.app-topbar{
  height:64px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 18px;
}

/* Topbar tools (language / theme) */
.topbar-tools .topbar-icon{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Logged-in user pill (matches the “cool” grey capsule style) */
.user-pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.18);
  background: rgba(71, 85, 105, .92); /* slate */
  color: #fff;
  box-shadow: 0 10px 22px rgba(15,23,42,.12);
  max-width: min(520px, 70vw);
}
.user-pill:hover,
.user-pill:focus{
  color:#fff;
  background: rgba(51, 65, 85, .96);
  border-color: rgba(15,23,42,.25);
}
.user-pill:focus{ box-shadow: 0 0 0 .2rem rgba(71,85,105,.25); }

.user-pill-ic{
  width: 28px;
  height: 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.user-pill-text{
  display:inline-block;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

/* Dropdown menu styling for user menu */
.dropdown-menu.user-menu{
  border-radius: 14px;
  border-color: rgba(15,23,42,.12);
  box-shadow: 0 18px 40px rgba(15,23,42,.18);
}
.dropdown-menu.user-menu .dropdown-item{
  padding-top: .55rem;
  padding-bottom: .55rem;
}

.page-title{
  font-weight: 700;
}

.topbar-right .btn-outline-light{
  border-color: rgba(15,23,42,.25);
  color: rgba(15,23,42,.85);
}
.topbar-right .btn-outline-light:hover{
  border-color: rgba(15,23,42,.35);
  color: rgba(15,23,42,1);
}

.app-content{
  padding: 18px;
}

.app-footer{
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

/* =========================================================
   Components
   ========================================================= */
.card{
  border: 1px solid var(--border);
  border-radius: 16px;
}

.card-soft{
  border:1px solid var(--border);
  border-radius:18px;
}

.table-soft{
  border-color: var(--border) !important;
}

.table > :not(caption) > * > *{
  border-color: var(--border);
}

.thumb{
  width: 96px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: #f3f4f6;
}

/* =========================================================
   Login V7 - 誠泰集團資訊管理系統登入
   ========================================================= */
.login-body{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(0,114,227,.10), transparent 28%),
    linear-gradient(135deg, #f8fafc 0%, #eef3f8 48%, #f7f9fc 100%);
  position:relative;
  overflow:auto;
  color:#0f172a;
}
.login-body::before,
.login-body::after{ content:none; }
.login-topbar{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 30;
}
.login-topbar .topbar-icon{
  border-color: rgba(15,23,42,.10);
  color: rgba(15,23,42,.84);
  background: rgba(255,255,255,.90);
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}
.login-topbar .topbar-icon:hover{
  border-color: rgba(0,114,227,.28);
  background: rgba(255,255,255,.98);
  color:#0f172a;
}
.login-shell{
  min-height:calc(100vh - 42px);
  max-width: 1780px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: minmax(0, 1.52fr) minmax(480px, .78fr);
  align-items:stretch;
  gap: 0;
  padding: 22px 22px 20px;
  position:relative;
  z-index: 10;
}
.login-showcase,
.login-form-stage{ min-height: calc(100vh - 88px); }
.login-showcase{
  display:flex;
  align-items:stretch;
  justify-content:center;
}
.login-showcase-card{
  width:100%;
  border-radius: 28px 0 0 28px;
  background:#eef2f7;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.05), 0 26px 70px rgba(100,116,139,.16);
  overflow:hidden;
  display:flex;
  align-items:stretch;
  justify-content:center;
}
.login-photo-card{ background:#0f172a; }
.login-showcase-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  padding:0;
}
.login-form-stage{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px 34px;
  border-radius: 0 28px 28px 0;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,250,252,.96));
  box-shadow: inset 1px 0 0 rgba(226,232,240,.95), 0 26px 70px rgba(100,116,139,.12);
}
.login-form-stage::before{ content:none; }
.login-panel{
  width: min(560px, 100%);
  margin: 0;
  border-radius: 26px;
  border: 1px solid rgba(226,232,240,.92);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 74px rgba(15,23,42,.14);
  transform: none;
}
.login-panel-inner{
  padding: 30px 34px 28px;
  background: transparent;
  border-radius: 26px;
}
.login-brand-area{ margin-bottom: 22px; }
.login-logo-wide{
  max-width: 230px;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter:none;
}
.login-title-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
  margin-top: 14px;
  color:#0b2f73;
  letter-spacing:.18em;
  font-size: 1.45rem;
  font-weight: 900;
  white-space: nowrap;
}
.login-title-line span{
  width: 58px;
  height: 2px;
  border-radius:999px;
  background: linear-gradient(90deg, transparent, rgba(11,47,115,.72));
}
.login-title-line span:last-child{
  background: linear-gradient(90deg, rgba(11,47,115,.72), transparent);
}
.login-panel,
.login-panel *{ color: inherit; }
.login-alert{
  border-radius: 14px;
  font-weight: 800;
  border: 1px solid rgba(239,68,68,.20);
}
.login-form{ margin-top: 2px; }
.login-panel .form-label{
  font-weight: 900;
  color:#1e293b;
  letter-spacing:.02em;
  margin-bottom: 7px;
}
.input-group-login{
  align-items: stretch;
  border: 1px solid #d8e0ea;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15,23,42,.04);
  overflow:hidden;
  transition: box-shadow .16s ease, border-color .16s ease;
}
.input-group-login:focus-within{
  border-color: rgba(0,114,227,.62);
  box-shadow: 0 0 0 .22rem rgba(0,114,227,.12), 0 10px 24px rgba(15,23,42,.07);
}
.input-group-login .input-group-text{
  width: 54px;
  border: 0;
  background: #f8fafc;
  color:#64748b;
  justify-content:center;
  font-size: 1.08rem;
}
.login-panel .form-control{
  min-height: 48px;
  background: #fff;
  border: 0;
  color: #0f172a;
  border-radius: 0;
  box-shadow:none;
  font-weight: 700;
}
.login-panel .form-control::placeholder{ color: #94a3b8; font-weight:700; }
.login-panel .form-control:focus{
  background: #fff;
  color:#0f172a;
  box-shadow: none;
}
.btn-control-icon{
  border: 0;
  background: #fff;
  color: #64748b;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-control-icon:hover{ background:#f8fafc; color:#0b2f73; }
.btn-password-toggle{
  min-width: 52px;
  padding-inline: 14px;
}
.captcha-row{
  display:grid;
  grid-template-columns: 112px minmax(0,1fr) 118px;
  gap: 12px !important;
  align-items: stretch;
}
.captcha-box{
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 13px;
  border: 1px solid #d8e0ea;
  background: #fff;
  color:#111827;
  font-weight: 900;
  letter-spacing: .20em;
  text-align: center;
  user-select: none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 16px rgba(15,23,42,.04);
}
.login-panel .captcha-input{
  max-width: none;
  min-height: 48px;
  border: 1px solid #d8e0ea;
  border-radius: 13px !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.04);
}
.login-panel .captcha-input:focus{
  border-color: rgba(0,114,227,.62);
  box-shadow: 0 0 0 .22rem rgba(0,114,227,.12), 0 10px 24px rgba(15,23,42,.07);
}
.captcha-refresh-btn{
  min-height: 48px;
  border-radius: 13px;
  border: 1px solid #d8e0ea;
  background: #fff;
  color: #0b2f73;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(15,23,42,.04);
}
.captcha-refresh-btn:hover{
  border-color: rgba(0,114,227,.42);
  background:#f8fbff;
  color:#0756aa;
}
.btn-login{
  margin-top: 8px;
  padding: 13px 14px;
  min-height: 52px;
  font-weight: 900;
  letter-spacing: .18em;
  border-radius: 14px;
  background: linear-gradient(180deg, #1688ff, #0069d9);
  border: 1px solid rgba(0,93,201,.10);
  color:#fff;
  box-shadow: 0 14px 30px rgba(0,105,217,.26);
}
.btn-login:hover{
  color:#fff;
  filter: brightness(1.03);
  transform: translateY(-1px);
}
.login-action-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.login-action-card{
  min-height: 92px;
  border-radius: 16px;
  border: 1px solid #e3e9f1;
  background: linear-gradient(180deg, #ffffff, #f9fbfe);
  box-shadow: 0 12px 24px rgba(15,23,42,.07);
  color:#0b2f73;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
  font-weight: 900;
  text-align:center;
  line-height: 1.18;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.login-action-card i{
  font-size: 1.55rem;
  color:#0b5fc7;
}
.login-action-card:hover{
  color:#073875;
  border-color: rgba(0,114,227,.36);
  box-shadow: 0 18px 34px rgba(15,23,42,.12);
  background:#fff;
  transform: translateY(-2px);
}
.login-help-box{
  margin-top: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f2f7ff, #edf4ff);
  border: 1px solid rgba(191,211,242,.72);
  color:#1e3a78;
  padding: 16px 18px 15px;
}
.login-help-title{
  display:flex;
  justify-content:center;
  align-items:center;
  color:#0b2f73;
  font-weight: 900;
  letter-spacing: .10em;
  line-height: 1.2;
  margin-bottom: 10px;
  text-align:center;
  white-space: nowrap;
}
.login-help-box ul{
  margin:0;
  padding-left: 1.25rem;
  display:grid;
  gap: 6px;
  color:#355080;
  font-size: .94rem;
  line-height: 1.52;
  font-weight: 700;
}
.login-help-box li{ padding-left: .1rem; }
.login-footer{
  max-width: 1780px;
  margin: -14px auto 0;
  padding: 0 30px 16px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 22px;
  color:#64748b;
  font-size: .95rem;
  position: relative;
  z-index: 11;
}
.login-footer-links{
  margin-left:auto;
  display:flex;
  gap: 13px;
  align-items:center;
}
.login-footer a{
  color:#64748b;
  text-decoration:none;
}
.login-footer a:hover{ color:#0b5fc7; }
.login-left{ display:none; }
.login-left::after{ content:none; }
.login-brand,
.login-logo,
.login-title,
.login-sub,
.login-foot,
.login-right,
.login-logo-sm,
.login-title-sm{ all: unset; }

/* 帳號協助表單 */
.account-request-shell{
  min-height: calc(100vh - 60px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 62px 16px 34px;
}
.account-request-card{
  width:min(920px, 100%);
  border-radius: 26px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 30px 80px rgba(15,23,42,.14);
  overflow:hidden;
}
.account-request-head{
  padding: 26px 30px;
  background: linear-gradient(135deg, #0b2f73, #0b6ed0);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
.account-request-head h1{ font-size:1.7rem; margin:0; font-weight:900; letter-spacing:.08em; }
.account-request-head p{ margin:.35rem 0 0; color:rgba(255,255,255,.82); font-weight:700; }
.account-request-logo{ width:190px; max-width:36%; filter: drop-shadow(0 10px 18px rgba(0,0,0,.18)); }
.account-request-body{ padding: 26px 30px 30px; }
.account-request-body .form-label{ font-weight:900; color:#1e293b; }
.account-request-body .form-control,
.account-request-body .form-select{
  min-height: 46px;
  border-radius: 12px;
  border-color:#d8e0ea;
  font-weight:700;
}
.account-request-body textarea.form-control{ min-height: 112px; }
.account-request-actions{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  margin-top: 16px;
}
.account-request-note{
  border-radius: 14px;
  background:#f2f7ff;
  color:#31527f;
  border:1px solid #d8e7ff;
  padding: 12px 14px;
  font-weight:700;
}
@media (max-width: 1299.98px){
  .login-shell{ grid-template-columns: minmax(0, 1.1fr) minmax(460px, .9fr); }
  .login-form-stage{ padding: 24px; }
  .login-panel-inner{ padding: 28px 28px 26px; }
}
@media (max-width: 1099.98px){
  .login-shell{
    grid-template-columns: minmax(0,1fr);
    gap: 18px;
    max-width: 980px;
    padding-bottom: 18px;
  }
  .login-showcase,
  .login-form-stage{ min-height:auto; }
  .login-showcase-card,
  .login-form-stage{ border-radius: 28px; }
  .login-showcase-card{ min-height: 430px; }
  .login-form-stage{ padding: 26px 18px; }
  .login-footer{ margin-top:0; flex-wrap:wrap; justify-content:center; }
  .login-footer-links{ margin-left:0; }
}
@media (max-width: 575.98px){
  .login-topbar{ top:10px; right:10px; }
  .login-shell{ padding: 10px; gap:12px; }
  .login-showcase-card{ min-height: 250px; }
  .login-form-stage{ padding: 12px; }
  .login-panel{ width:100%; }
  .login-panel-inner{ padding: 22px 16px; }
  .login-logo-wide{ max-width: 210px; }
  .login-title-line{ font-size: 1.15rem; gap:10px; letter-spacing:.10em; }
  .login-title-line span{ width:32px; }
  .captcha-row{ grid-template-columns: 1fr; }
  .login-action-grid{ grid-template-columns: 1fr; }
  .login-help-title{ white-space:normal; font-size:.96rem; letter-spacing:.04em; }
  .login-help-box ul{ font-size:.9rem; }
  .login-footer{ padding-inline: 14px; font-size:.84rem; text-align:center; }
  .account-request-head{ align-items:flex-start; flex-direction:column; }
  .account-request-logo{ max-width: 230px; width:100%; }
  .account-request-body{ padding: 20px 18px 24px; }
  .account-request-actions{ flex-direction:column-reverse; }
}

/* =========================================================
   手機：Sidebar 抽屜模式（★新增）
   ========================================================= */
@media (max-width: 767.98px){
  .sidebar{
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    z-index:1050;
    transform: translateX(-105%);
    transition: transform .2s ease-in-out;
  }

  body.sidebar-open .sidebar{
    transform: translateX(0);
  }

  .sidebar-backdrop{
    display:none;
    position: fixed;
    inset:0;
    background: rgba(0,0,0,.35);
    z-index:1040;
  }

  body.sidebar-open .sidebar-backdrop{
    display:block;
  }

  /* 手機時 main 佔滿 */
  .app-main{
    margin-left:0 !important;
  }
}

/* 小螢幕：Login 改單欄 */
@media (max-width: 992px){
  .login-card{ grid-template-columns: 1fr; }
  .login-panel-inner{ padding: 28px 22px; }
}


/* =========================================================
   Sidebar hidden box / System params trigger
   ========================================================= */
.sidebar-hotspot{
  /* 讓左下角 DB 圖示更大、靠左，且不被白底影響 */
  margin: 10px 10px 14px 10px;
  height: 96px;
  border-radius: 12px;
  /* 以圖片呈現入口（由使用者連續點擊 3 下觸發） */
  background: url('../images/DB.png') left 10px center/auto 92% no-repeat;
  cursor: pointer;
  opacity: .9;
}
.sidebar-hotspot:hover{ opacity: 1; }

/* =========================================================
   Sidebar scroll (手機/觸控可拖曳上下捲動)
   ========================================================= */
.app-sidebar{
  display:flex;
  flex-direction:column;
}

.sidebar-scroll{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 8px; /* 留給底部 hotspot 一點空間 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* 避免 iOS/部分瀏覽器滾動時造成陰影或跳動 */
.sidebar-scroll::-webkit-scrollbar{ width: 8px; }
.sidebar-scroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
.sidebar-scroll::-webkit-scrollbar-track{ background: transparent; }

/* =========================================================
   Dashboard / 管理中心（彩色卡片）
   ========================================================= */

.card-head-blue{ background:#0d6efd; color:#fff; }
.card-head-cyan{ background:#0dcaf0; color:#083a46; }
.card-head-green{ background:#198754; color:#fff; }
.card-head-gray{ background:#6c757d; color:#fff; }

.dash-kpi{
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
}
.dash-sub{
  color: rgba(0,0,0,.55);
  font-size: .9rem;
}


/* =========================================================
   Sinfu footer (brand red + centered, keep build stamp line 2)
   ========================================================= */
.sinfu-footer{
  background: #c30d23;
  color: #fff;
  text-align: center;
  font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
  font-weight: 900;
  padding: 10px 12px;
}
.sinfu-footer-line1{
  line-height: 1.15;
  font-size: 12.5px;
}
.sinfu-footer-line2{
  line-height: 1.15;
  font-size: 12px;
  opacity: .9;
}


/* =========================================================
   Schedule UI: 彩色大按鈕 + Chip/Pill
   ========================================================= */

/* 全站字重統一 Black */
body, button, input, select, textarea, label, .btn, .form-control, .form-select, .navbar, .dropdown-menu, .card, .badge{
  font-family: 'Noto Sans TC', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  font-weight: 900;
}

.sag-toolbar{
  display:flex;
  /* 桌機：同一排顯示（必要時可水平捲動） */
  flex-wrap:nowrap;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.sag-group{
  display:flex;
  /* 同一群組也不要自動換行 */
  flex-wrap:nowrap;
  gap:8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
body.theme-dark .sag-group{
  background: rgba(15,26,47,.75);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.sag-bigbtn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  /* 讓一排可以塞更多顆 */
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  color: #fff;
  text-decoration:none;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  user-select:none;
}

/* 大按鈕整體略縮小（字體/高度） */
.sag-bigbtn{ font-size: 14px; }
.sag-bigbtn:hover{
  color:#fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  filter: brightness(1.03);
}
.sag-bigbtn:active{
  transform: translateY(0);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

.sag-ic{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.sag-ic-right{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
}

/* 較小尺寸的 3D 藥丸按鈕（給頁面內操作用） */
.sag-bigbtn.sag-sm{
  padding: 8px 12px;
  font-size: 13px;
}
.sag-bigbtn.sag-sm .sag-ic{
  width: 30px;
  height: 30px;
}
.sag-bigbtn.sag-sm .sag-ic-right{
  width: 26px;
  height: 26px;
}

/* 小螢幕仍允許換行，不然會太擠 */
@media (max-width: 991.98px){
  .sag-toolbar{ flex-wrap:wrap; overflow-x: visible; }
  .sag-group{ flex-wrap:wrap; }
}


/* 小螢幕：把表格改成卡片式堆疊，避免看不到欄位 */
@media (max-width: 575.98px){
  table.sag-table-stack thead{ display:none; }
  table.sag-table-stack,
  table.sag-table-stack tbody,
  table.sag-table-stack tr,
  table.sag-table-stack td{ display:block; width:100%; }
  table.sag-table-stack tr{
    border: 1px solid var(--border);
    border-radius: var(--ui-radius);
    padding: 10px 12px;
    margin-bottom: 10px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 8px 18px rgba(15,23,42,.06);
  }
  body.theme-dark table.sag-table-stack tr{
    background: rgba(15,26,47,.72);
    box-shadow: 0 10px 22px rgba(0,0,0,.28);
  }
  table.sag-table-stack td{
    border: none !important;
    padding: 6px 0 !important;
    display:flex;
    justify-content: space-between;
    gap: 12px;
  }
  table.sag-table-stack td::before{
    content: attr(data-label);
    font-weight: 900;
    opacity: .85;
  }
}

/* 一般頁面用的「藥丸按鈕」（給請假申請等頁面） */
.btn-pill{
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* 桌機：左側選單可收合成抽屜 */
@media (min-width: 768px){
  .app-sidebar.sidebar{ transition: width .2s ease, transform .2s ease; }
  body.sidebar-collapsed .app-sidebar.sidebar{
    width: 0 !important;
    overflow: hidden;
    border-right: none;
  }
  body.sidebar-collapsed .app-sidebar.sidebar .brand,
  body.sidebar-collapsed .app-sidebar.sidebar .sidebar-scroll,
  body.sidebar-collapsed .app-sidebar.sidebar .sidebar-hotspot{
    display:none;
  }
}

.sag-blue{ background: linear-gradient(135deg, #2563eb, #06b6d4); }
.sag-orange{ background: linear-gradient(135deg, #f97316, #f59e0b); }
.sag-green{ background: linear-gradient(135deg, #16a34a, #22c55e); }
.sag-purple{ background: linear-gradient(135deg, #7c3aed, #a855f7); }
.sag-gray{ background: linear-gradient(135deg, #334155, #64748b); }

.sag-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  color: var(--text);
}
body.theme-dark .sag-status{
  background: rgba(15,26,47,.75);
  border-color: rgba(255,255,255,.10);
}
.sag-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--muted);
}
.sag-dot.warn{ background:#f59e0b; }
.sag-dot.ok{ background:#22c55e; }
.sag-dot.bad{ background:#ef4444; }

/* Chip / Pill */
.sag-chip-wrap{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.sag-chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.78);
  color: var(--text);
  text-decoration:none;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
body.theme-dark .sag-chip{
  background: rgba(15,26,47,.75);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.sag-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15,23,42,.12);
}
.sag-chip.active{
  border-color: rgba(214,177,94,.55);
  box-shadow: 0 18px 34px rgba(214,177,94,.18);
}

.sag-chip-badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.sag-badge-warn{ background: #f59e0b; }
.sag-badge-ok{ background: #22c55e; }
.sag-badge-bad{ background: #ef4444; }

/* Modal 內按壓式人員 chip */
.sag-empchip{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.78);
  color: var(--text);
  display:inline-flex;
  align-items:center;
  gap: 8px;
  cursor:pointer;
  user-select:none;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
body.theme-dark .sag-empchip{
  background: rgba(15,26,47,.75);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.sag-empchip:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15,23,42,.12);
}
.sag-empchip.on{
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 18px 34px rgba(34,197,94,.18);
}
.sag-empchip.disabled{
  opacity: .45;
  cursor:not-allowed;
  filter: grayscale(.3);
  box-shadow:none;
}

/* Banner */
.sag-banner{
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.28);
  background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(34,197,94,.10));
  padding: 14px 16px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  justify-content:space-between;
}
body.theme-dark .sag-banner{
  border-color: rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(34,197,94,.10));
}
.sag-banner-left{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.sag-banner-ic{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(37,99,235,.14);
  border: 1px solid rgba(37,99,235,.22);
}

/* Schedule mode badge (可編輯 / 只讀) */
.sag-mode{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.72);
  color: var(--text);
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
}
body.theme-dark .sag-mode{
  background: rgba(15,26,47,.72);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
}
.sag-mode i{ font-size: 1.05rem; }

.sag-mode-edit{
  border-color: rgba(34,197,94,.35);
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(59,130,246,.12));
  box-shadow: 0 18px 36px rgba(34,197,94,.18);
}
.sag-mode-view{
  border-color: rgba(148,163,184,.40);
  background: linear-gradient(135deg, rgba(148,163,184,.16), rgba(59,130,246,.08));
  box-shadow: 0 18px 36px rgba(148,163,184,.14);
}


/* =========================================================
   FullCalendar：事件文字置中（預設顯示姓名更清楚）
   ========================================================= */
.sag-fc-event{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sag-fc-event-title{
  width:100%;
  text-align:center;
  font-weight:700;
  font-size:15px;
  color:#000;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================================================
   GPT Mobile-first UI Upgrade
   - 清楚可辨識的左側選單
   - 快速搜尋 / 常用捷徑
   - 全站表格、表單、按鈕在行動裝置更好操作
   ========================================================= */
:root{
  --sidebar-w: 280px;
  --sidebar-w-mobile: min(304px, 78vw);
  --touch-target: 44px;
  --radius-lg: 18px;
  --shadow-soft: 0 18px 40px rgba(15,23,42,.12);
  --sidebar-line: rgba(255,255,255,.11);
  --sidebar-text: rgba(255,255,255,.88);
  --sidebar-muted: rgba(255,255,255,.58);
  --sidebar-active: #d6b15e;
  --sidebar-focus: #38bdf8;
}

.app-sidebar,
.sidebar{
  width: var(--sidebar-w);
}

.brand{
  min-height: 70px;
  gap: 12px;
  position: relative;
}
.brand-text{ min-width: 0; }
.brand-title,
.brand-sub{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sidebar-close{
  margin-left:auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  color: #fff;
  background: rgba(255,255,255,.08);
  display:inline-grid;
  place-items:center;
}
.sidebar-close:active{ transform: scale(.98); }

.sidebar-tools{
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--sidebar-line);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
}
.sidebar-search-label{
  display:block;
  margin: 0 2px 7px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--sidebar-muted);
}
.sidebar-search-wrap{
  min-height: var(--touch-target);
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.sidebar-search-wrap:focus-within{
  border-color: rgba(56,189,248,.75);
  box-shadow: 0 0 0 .2rem rgba(56,189,248,.18);
}
.sidebar-search{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background: transparent;
  color:#fff;
  font-size: 14px;
  font-weight: 700;
}
.sidebar-search::placeholder{ color: rgba(255,255,255,.48); }
.sidebar-search::-webkit-search-cancel-button{ display:none; }
.sidebar-search-clear{
  width: 30px;
  height: 30px;
  border:0;
  border-radius: 999px;
  color: rgba(255,255,255,.72);
  background: transparent;
  display:none;
  place-items:center;
}
.sidebar-search-clear:hover,
.sidebar-search-clear:focus{
  color:#fff;
  background: rgba(255,255,255,.12);
}
.sidebar-tools.has-query .sidebar-search-clear{ display:grid; }

.sidebar-quick-list{
  display:flex;
  flex-wrap:wrap;
  gap: 7px;
  margin-top: 10px;
}
.sidebar-quick-list:empty{ display:none; }
.sidebar-quick-chip{
  min-height: 34px;
  max-width: 100%;
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  text-decoration:none;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}
.sidebar-quick-chip:hover,
.sidebar-quick-chip:focus{
  color:#fff;
  background: rgba(56,189,248,.18);
  border-color: rgba(56,189,248,.34);
}
.sidebar-quick-chip .bi{ font-size: 13px; }

.app-sidebar .nav{
  padding-top: 10px;
  padding-bottom: 18px;
}
.app-sidebar .nav-section{
  display:flex;
  align-items:center;
  gap: 8px;
  margin: 14px 12px 7px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--sidebar-muted);
}
.app-sidebar .nav-section::before{
  content:"";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(56,189,248,.78);
  box-shadow: 0 0 0 4px rgba(56,189,248,.10);
}
.app-sidebar .nav-link{
  min-height: var(--touch-target);
  display:flex;
  align-items:center;
  color: var(--sidebar-text);
  margin: 3px 8px;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 14px;
  line-height: 1.25;
}
.app-sidebar .nav-link[data-bs-toggle="collapse"]{
  background: rgba(255,255,255,.035);
}
.app-sidebar .nav-link[data-bs-toggle="collapse"] .ms-2{
  width: 24px;
  height: 24px;
  display:inline-grid;
  place-items:center;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  transition: transform .18s ease, background-color .18s ease;
}
.app-sidebar .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .ms-2{
  transform: rotate(180deg);
  background: rgba(214,177,94,.22);
}
.app-sidebar .nav-link:focus-visible,
.sidebar-quick-chip:focus-visible,
.sidebar-close:focus-visible{
  outline: 3px solid rgba(56,189,248,.42);
  outline-offset: 2px;
}
.app-sidebar .nav-link:hover{
  background: rgba(255,255,255,.095);
  border-color: rgba(255,255,255,.14);
  transform: translateX(3px);
}
.app-sidebar .nav-link.active{
  background: linear-gradient(135deg, rgba(214,177,94,.24), rgba(214,177,94,.12));
  color:#fff;
  border-color: rgba(214,177,94,.42);
  box-shadow: 0 14px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
}
.app-sidebar .nav-link.nav-sub{
  min-height: 40px;
  margin-left: 16px;
  padding-left: 18px;
  font-size: 14px;
  font-weight: 800;
  border-left: 2px solid rgba(255,255,255,.11);
  border-radius: 12px;
}
.app-sidebar .nav-link.nav-sub.active{
  border-left-color: var(--sidebar-active);
}
.app-sidebar .nav-link.is-menu-hidden,
.app-sidebar .nav-section.is-menu-hidden,
.app-sidebar .collapse.is-menu-hidden{
  display:none !important;
}
.sidebar-empty-state{
  margin: 12px 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.22);
  color: rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 700;
  display:none;
}
.sidebar-empty-state.show{ display:block; }

/* 更穩定的主要版面 */
.app-main{ min-width:0; }
.app-topbar{
  position: sticky;
  top:0;
  z-index: 1020;
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}
.page-title{
  min-width: 0;
  max-width: 48vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.app-content{
  width:100%;
  max-width: 100vw;
}

/* 全站元件：觸控友善 */
.btn,
.form-control,
.form-select,
.input-group-text{
  border-radius: 12px;
}
.btn{
  font-weight: 800;
}
.form-control:focus,
.form-select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.14);
}
.card,
.card-soft,
.modal-content,
.dropdown-menu{
  box-shadow: var(--shadow-soft);
}
.alert{
  border-radius: 16px;
}
.badge{
  letter-spacing: .02em;
}

/* JS 會自動將一般表格轉成手機卡片 */
.app-table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.app-table-scroll > table{ margin-bottom: 0; }

@media (max-width: 767.98px){
  html{ scroll-padding-top: 72px; }
  .app-shell{ min-height: 100dvh; }
  .app-sidebar,
  .sidebar{
    width: var(--sidebar-w-mobile) !important;
    max-width: 86vw;
  }
  .sidebar{
    box-shadow: 18px 0 44px rgba(0,0,0,.36);
  }
  .brand{
    min-height: 64px;
    padding: 14px 12px;
  }
  .brand-logo{
    width: 38px;
    height: 38px;
  }
  .brand-title{ font-size: 13px; }
  .brand-sub{ font-size: 11px; }
  .sidebar-tools{ padding: 9px 12px 11px; }
  .app-sidebar .nav-link{
    margin: 3px 7px;
    padding: 10px 12px;
    font-size: 15px;
  }
  .app-sidebar .nav-link.nav-sub{
    margin-left: 12px;
    font-size: 14px;
  }
  .sidebar-backdrop{
    background: rgba(2,6,23,.55);
    backdrop-filter: blur(2px);
  }

  .app-topbar{
    height:auto;
    min-height: 58px;
    padding: 8px 10px;
    gap: 8px;
  }
  .topbar-left{
    min-width:0;
    flex: 1 1 auto;
  }
  .page-title{
    max-width: 46vw;
    font-size: 15px;
  }
  .topbar-right{
    flex: 0 1 auto;
    gap: 6px;
  }
  .topbar-tools .topbar-icon,
  .topbar-right .btn,
  #btnSidebar{
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: .45rem .65rem;
  }
  .user-pill{
    max-width: 42vw;
    min-height: var(--touch-target);
    padding: 7px 10px;
  }
  .user-pill-text{ display:none; }

  .app-content{
    padding: 12px;
  }
  .card,
  .card-soft{
    border-radius: 16px;
  }
  .card-body,
  .card-header,
  .card-footer{
    padding-left: 14px;
    padding-right: 14px;
  }
  .btn,
  .form-control,
  .form-select,
  .input-group-text{
    min-height: var(--touch-target);
  }
  .btn-group,
  .btn-toolbar,
  .sag-toolbar,
  form .row{
    gap: 8px 0;
  }
  .btn-group:not(.no-wrap){
    flex-wrap: wrap;
  }
  .modal-dialog{
    margin: .75rem;
  }

  table.app-table-stack{
    border-collapse: separate;
    border-spacing: 0 10px;
  }
  table.app-table-stack thead{
    display:none;
  }
  table.app-table-stack,
  table.app-table-stack tbody,
  table.app-table-stack tr,
  table.app-table-stack td{
    display:block;
    width:100%;
  }
  table.app-table-stack tr{
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--panel);
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
    padding: 10px 12px;
    margin-bottom: 10px;
    overflow:hidden;
  }
  table.app-table-stack td{
    border:0 !important;
    padding: 8px 0 !important;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 12px;
    text-align:right;
    word-break: break-word;
  }
  table.app-table-stack td::before{
    content: attr(data-label);
    flex: 0 0 42%;
    max-width: 42%;
    color: var(--muted);
    font-weight: 900;
    text-align:left;
  }
  table.app-table-stack td[data-label=""]::before{ display:none; }
  table.app-table-stack td .btn{
    margin-top: 4px;
  }

  body.theme-dark table.app-table-stack tr{
    background: var(--panel);
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
  }
}


@media (max-width: 991.98px){
  .login-body::before,
  .login-body::after{
    width:100vw;
  }
  .login-shell{
    justify-content:center;
    padding: 28px 14px;
  }
  .login-panel{
    width: min(680px, 96vw);
    transform:none;
  }
}

@media (max-width: 575.98px){
  .page-title{ max-width: 38vw; }
  .app-content{ padding: 10px; }
  .login-shell{ padding: 18px 10px; }
  .login-panel{ width: 100%; }
  .login-panel-inner{ padding: 22px 16px; }
  .login-logo-wide{ max-width: 210px; }
  .captcha-box{ min-width: 96px; }
  .captcha-input{ max-width: 100%; }
  table.app-table-stack td{
    display:block;
    text-align:left;
  }
  table.app-table-stack td::before{
    display:block;
    max-width:none;
    margin-bottom: 3px;
  }
}


/* =========================================================
   GPT Version B - Image 1 Style Sidebar 全站選單
   目標：未選黑字紅框、選取紅底白字、手機好點選
   安全性：只覆蓋視覺與互動樣式，不變更權限 / 登入 / API / DB
   ========================================================= */
:root{
  --sinfu-menu-red: #d91e18;
  --sinfu-menu-red-dark: #b91410;
  --sinfu-menu-red-soft: #fff5f5;
  --sinfu-menu-text: #111827;
  --sinfu-menu-muted: #64748b;
  --sinfu-menu-border: #e5e7eb;
  --sinfu-menu-bg: #ffffff;
  --sinfu-menu-bg-2: #f8fafc;
  --sidebar-line: #e5e7eb;
  --sidebar-text: #111827;
  --sidebar-muted: #64748b;
  --sidebar-active: var(--sinfu-menu-red);
  --sidebar-focus: var(--sinfu-menu-red);
}

/* Sidebar 改成圖片 1 的淺色系，文字一律清楚可辨識 */
.app-sidebar,
.sidebar{
  background: var(--sinfu-menu-bg) !important;
  color: var(--sinfu-menu-text) !important;
  border-right: 1px solid var(--sinfu-menu-border) !important;
  box-shadow: 8px 0 28px rgba(15, 23, 42, .08);
}

.brand{
  background: #fff !important;
  color: var(--sinfu-menu-text) !important;
  border-bottom: 1px solid var(--sinfu-menu-border) !important;
}
.brand-logo{
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0;
}
.brand-title{ color: #111827 !important; }
.brand-sub{ color: var(--sinfu-menu-muted) !important; }

.sidebar-close{
  color: #111827 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}
.sidebar-close:hover,
.sidebar-close:focus{
  color: #fff !important;
  background: var(--sinfu-menu-red) !important;
  border-color: var(--sinfu-menu-red) !important;
}

/* 快速選取區：白底、黑字、紅色焦點 */
.sidebar-tools{
  background: linear-gradient(180deg, #ffffff, #fafafa) !important;
  border-bottom: 1px solid var(--sinfu-menu-border) !important;
}
.sidebar-search-label{
  color: #475569 !important;
}
.sidebar-search-wrap{
  background: #ffffff !important;
  color: #111827 !important;
  border: 2px solid #d1d5db !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04) !important;
}
.sidebar-search-wrap:focus-within{
  border-color: var(--sinfu-menu-red) !important;
  box-shadow: 0 0 0 .2rem rgba(217, 30, 24, .16) !important;
}
.sidebar-search{ color: #111827 !important; }
.sidebar-search::placeholder{ color: #94a3b8 !important; }
.sidebar-search-clear{
  color: #64748b !important;
}
.sidebar-search-clear:hover,
.sidebar-search-clear:focus{
  color: #fff !important;
  background: var(--sinfu-menu-red) !important;
}

/* 常用捷徑：快速點選按鈕 */
.sidebar-quick-chip{
  color: #111827 !important;
  background: #ffffff !important;
  border: 1.5px solid var(--sinfu-menu-red) !important;
  box-shadow: 0 2px 6px rgba(217, 30, 24, .08);
}
.sidebar-quick-chip:hover,
.sidebar-quick-chip:focus,
.sidebar-quick-chip:active{
  color: #ffffff !important;
  background: var(--sinfu-menu-red) !important;
  border-color: var(--sinfu-menu-red) !important;
}

/* 分類標題 */
.app-sidebar .nav-section,
.nav-section{
  color: #334155 !important;
  font-size: 12px;
  letter-spacing: .10em;
}
.app-sidebar .nav-section::before{
  background: var(--sinfu-menu-red) !important;
  box-shadow: 0 0 0 4px rgba(217, 30, 24, .10) !important;
}

/* 移除舊版左側光條，避免和紅框樣式衝突 */
.app-sidebar .nav-link::before{ display: none !important; }

/* 主選單 + 子選單：未選黑字紅框 */
.app-sidebar .nav-link{
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #111827 !important;
  background: #ffffff !important;
  border: 2px solid var(--sinfu-menu-red) !important;
  border-radius: 12px !important;
  margin: 6px 10px !important;
  padding: 12px 14px !important;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  text-decoration: none !important;
  box-shadow: 0 2px 7px rgba(15, 23, 42, .04) !important;
  transform: none !important;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

/* 滑過 / 觸控按壓：保留黑字，給淡紅底提示 */
.app-sidebar .nav-link:hover,
.app-sidebar .nav-link:focus{
  color: #111827 !important;
  background: var(--sinfu-menu-red-soft) !important;
  border-color: var(--sinfu-menu-red) !important;
  box-shadow: 0 6px 14px rgba(217, 30, 24, .12) !important;
  transform: translateX(2px) !important;
}
.app-sidebar .nav-link:active{
  transform: scale(.99) !important;
}

/* 選取後 / 目前頁面：紅底白字 */
.app-sidebar .nav-link.active,
.app-sidebar .nav-link[aria-current="page"]{
  color: #ffffff !important;
  background: var(--sinfu-menu-red) !important;
  border-color: #111111 !important;
  box-shadow: 0 8px 18px rgba(217, 30, 24, .24) !important;
}
.app-sidebar .nav-link.active *,
.app-sidebar .nav-link[aria-current="page"] *{
  color: #ffffff !important;
}

/* 展開箭頭：更大、更好辨識 */
.app-sidebar .nav-link[data-bs-toggle="collapse"]{
  justify-content: space-between;
}
.app-sidebar .nav-link[data-bs-toggle="collapse"] .ms-2{
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  display: inline-grid !important;
  place-items: center;
  color: #111827 !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 999px !important;
}
.app-sidebar .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .ms-2{
  transform: rotate(180deg);
}
.app-sidebar .nav-link[data-bs-toggle="collapse"].active .ms-2,
.app-sidebar .nav-link[data-bs-toggle="collapse"][aria-current="page"] .ms-2{
  color: #ffffff !important;
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.42) !important;
}

/* 子選單：保留縮排，但每個功能都是清楚的大按鈕 */
.app-sidebar .collapse .ps-2{
  padding-left: 0 !important;
}
.app-sidebar .nav-link.nav-sub{
  min-height: 46px;
  margin: 6px 10px 6px 26px !important;
  padding: 11px 13px !important;
  font-size: 14px;
  font-weight: 900;
  border-left: 2px solid var(--sinfu-menu-red) !important;
}
.app-sidebar .nav-link.nav-sub.active,
.app-sidebar .nav-link.nav-sub[aria-current="page"]{
  color: #ffffff !important;
  background: var(--sinfu-menu-red) !important;
  border-color: #111111 !important;
}

.app-sidebar .nav-link.is-menu-hidden,
.app-sidebar .nav-section.is-menu-hidden,
.app-sidebar .collapse.is-menu-hidden{
  display: none !important;
}
.sidebar-empty-state{
  color: #475569 !important;
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
}

/* 捲動條改淺色 */
.sidebar-scroll::-webkit-scrollbar-thumb{
  background: rgba(15, 23, 42, .22) !important;
}
.sidebar-scroll::-webkit-scrollbar-track{
  background: #f8fafc !important;
}

/* 手機版：抽屜、點擊區域、字級再優化 */
@media (max-width: 767.98px){
  .app-sidebar,
  .sidebar{
    width: min(324px, 88vw) !important;
    max-width: 88vw !important;
    box-shadow: 18px 0 44px rgba(15, 23, 42, .32) !important;
  }
  .brand{
    min-height: 66px;
    padding: 14px 12px !important;
  }
  .sidebar-tools{
    padding: 10px 12px 12px !important;
  }
  .sidebar-search-wrap{
    min-height: 48px;
  }
  .sidebar-quick-chip{
    min-height: 38px;
    font-size: 13px;
    padding: 7px 10px;
  }
  .app-sidebar .nav-link{
    min-height: 52px;
    margin: 7px 10px !important;
    padding: 13px 14px !important;
    font-size: 15.5px;
  }
  .app-sidebar .nav-link.nav-sub{
    min-height: 50px;
    margin-left: 24px !important;
    font-size: 15px;
  }
  .sidebar-backdrop{
    background: rgba(15, 23, 42, .54) !important;
    backdrop-filter: blur(2px);
  }
}

/* 鍵盤操作可見焦點：無障礙與管理後台快速操作 */
.app-sidebar .nav-link:focus-visible,
.sidebar-quick-chip:focus-visible,
.sidebar-close:focus-visible{
  outline: 3px solid rgba(217, 30, 24, .32) !important;
  outline-offset: 2px;
}



/* ===== GPT UI V-B2：選單文字置中放大（圖片2需求） ===== */
.app-sidebar .nav-link{
  position: relative !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: .01em;
  min-height: 58px !important;
  padding: 15px 18px !important;
}
.app-sidebar .nav-link[data-bs-toggle="collapse"]{
  position: relative;
  padding-left: 54px !important;
  padding-right: 54px !important;
}
.app-sidebar .nav-link[data-bs-toggle="collapse"] .ms-2{
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) !important;
}
.app-sidebar .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .ms-2{
  transform: translateY(-50%) rotate(180deg) !important;
}
.app-sidebar .nav-link .bi:first-child{
  position: absolute;
  left: 20px;
}
.app-sidebar .nav-link.nav-sub{
  justify-content: center !important;
  text-align: center !important;
  font-size: 17px !important;
  min-height: 56px !important;
  padding: 14px 18px !important;
  margin: 8px 10px 8px 26px !important;
}
.app-sidebar .nav-section,
.nav-section{
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}
@media (max-width: 767.98px){
  .app-sidebar .nav-link{
    font-size: 20px !important;
    min-height: 66px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
  .app-sidebar .nav-link.nav-sub{
    font-size: 19px !important;
    min-height: 62px !important;
    margin-left: 24px !important;
  }
  .app-sidebar .nav-link[data-bs-toggle="collapse"]{
    padding-left: 58px !important;
    padding-right: 58px !important;
  }
  .app-sidebar .nav-link[data-bs-toggle="collapse"] .ms-2{
    right: 22px;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }
}


/* ===== GPT UI V-B6：選單比例一致、文字縮小、滑過即紅底白字 ===== */
:root{
  --sinfu-menu-red: #d91e18;
  --sinfu-menu-red-dark: #b91410;
  --sinfu-menu-red-soft: #fff5f5;
  --sinfu-menu-text: #111827;
}

/* 快速功能：加入圖示感、比例一致、滑過變紅 */
.sidebar-quick-list{
  gap: 8px !important;
  margin-top: 10px !important;
}
.sidebar-quick-chip{
  min-height: 34px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  color: var(--sinfu-menu-text) !important;
  background: #ffffff !important;
  border: 1.5px solid var(--sinfu-menu-red) !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  box-shadow: 0 2px 7px rgba(15,23,42,.05) !important;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease !important;
}
.sidebar-quick-chip .bi{
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: var(--sinfu-menu-red) !important;
  background: #fff5f5 !important;
  font-size: 12px !important;
}
.sidebar-quick-chip:hover,
.sidebar-quick-chip:focus{
  color: #ffffff !important;
  background: var(--sinfu-menu-red) !important;
  border-color: #111111 !important;
  box-shadow: 0 8px 18px rgba(217,30,24,.22) !important;
  transform: translateY(-1px) !important;
}
.sidebar-quick-chip:hover .bi,
.sidebar-quick-chip:focus .bi{
  color: #ffffff !important;
  background: rgba(255,255,255,.18) !important;
}

/* 側邊選單：主選單、子選單同寬同高；文字不再過大 */
.app-sidebar .nav-link,
.sidebar .nav-link{
  position: relative !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  min-height: 50px !important;
  margin: 7px 12px !important;
  padding: 11px 46px !important;
  color: var(--sinfu-menu-text) !important;
  background: #ffffff !important;
  border: 2px solid var(--sinfu-menu-red) !important;
  border-radius: 13px !important;
  font-size: 15.5px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  box-shadow: 0 2px 7px rgba(15,23,42,.045) !important;
  transform: none !important;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease !important;
}
.app-sidebar .nav-link.nav-sub,
.sidebar .nav-link.nav-sub{
  min-height: 50px !important;
  margin: 7px 12px !important;
  padding: 11px 46px !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  border-left: 2px solid var(--sinfu-menu-red) !important;
}

/* 滑鼠移到哪裡，哪裡就變紅色 */
.app-sidebar .nav-link:hover,
.app-sidebar .nav-link:focus,
.sidebar .nav-link:hover,
.sidebar .nav-link:focus{
  color: #ffffff !important;
  background: var(--sinfu-menu-red) !important;
  border-color: #111111 !important;
  box-shadow: 0 8px 18px rgba(217,30,24,.22) !important;
  transform: translateY(-1px) !important;
}
.app-sidebar .nav-link:hover *,
.app-sidebar .nav-link:focus *,
.sidebar .nav-link:hover *,
.sidebar .nav-link:focus *{
  color: #ffffff !important;
}

/* 目前所在頁同樣紅底白字，但不再過大 */
.app-sidebar .nav-link.active,
.app-sidebar .nav-link[aria-current="page"],
.sidebar .nav-link.active,
.sidebar .nav-link[aria-current="page"]{
  color: #ffffff !important;
  background: var(--sinfu-menu-red) !important;
  border-color: #111111 !important;
  box-shadow: 0 8px 18px rgba(217,30,24,.24) !important;
}
.app-sidebar .nav-link.active *,
.app-sidebar .nav-link[aria-current="page"] *,
.sidebar .nav-link.active *,
.sidebar .nav-link[aria-current="page"] *{
  color: #ffffff !important;
}

/* 左側圖示與右側箭頭固定位置，文字置中不被擠歪 */
.app-sidebar .nav-link .bi:first-child,
.sidebar .nav-link .bi:first-child{
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 15px !important;
}
.app-sidebar .nav-link[data-bs-toggle="collapse"],
.sidebar .nav-link[data-bs-toggle="collapse"]{
  padding-left: 46px !important;
  padding-right: 54px !important;
}
.app-sidebar .nav-link[data-bs-toggle="collapse"] .ms-2,
.sidebar .nav-link[data-bs-toggle="collapse"] .ms-2{
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: #111827 !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 999px !important;
  transform: translateY(-50%) !important;
}
.app-sidebar .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .ms-2,
.sidebar .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .ms-2{
  transform: translateY(-50%) rotate(180deg) !important;
}
.app-sidebar .nav-link[data-bs-toggle="collapse"]:hover .ms-2,
.app-sidebar .nav-link[data-bs-toggle="collapse"]:focus .ms-2,
.app-sidebar .nav-link[data-bs-toggle="collapse"].active .ms-2,
.sidebar .nav-link[data-bs-toggle="collapse"]:hover .ms-2,
.sidebar .nav-link[data-bs-toggle="collapse"]:focus .ms-2,
.sidebar .nav-link[data-bs-toggle="collapse"].active .ms-2{
  color: #ffffff !important;
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.42) !important;
}

.app-sidebar .nav-section,
.nav-section{
  margin: 14px 14px 8px !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-align: left !important;
}

/* 工作日誌人員提示：不要擠、不要太大 */
.workreport-person-status .badge,
.workreport-person-status .workreport-person-hint{
  font-size: 13px !important;
  line-height: 1.3 !important;
}
.workreport-person-hint{
  display: inline-flex !important;
  align-items: center !important;
}

@media (max-width: 767.98px){
  .sidebar-quick-chip{
    min-height: 36px !important;
    padding: 6px 9px !important;
    font-size: 12px !important;
  }
  .app-sidebar .nav-link,
  .sidebar .nav-link,
  .app-sidebar .nav-link.nav-sub,
  .sidebar .nav-link.nav-sub{
    min-height: 52px !important;
    margin: 7px 12px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-size: 16px !important;
    border-radius: 13px !important;
  }
  .app-sidebar .nav-link.nav-sub,
  .sidebar .nav-link.nav-sub{
    font-size: 15.5px !important;
  }
  .app-sidebar .nav-link[data-bs-toggle="collapse"] .ms-2,
  .sidebar .nav-link[data-bs-toggle="collapse"] .ms-2{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    right: 17px !important;
  }
}

/* ===== GPT UI V-B7：重新校正選單比例、提示文字與 hover 紅色效果 ===== */
:root{
  --sinfu-b7-red: #d91e18;
  --sinfu-b7-red-dark: #b91410;
  --sinfu-b7-text: #111827;
  --sinfu-b7-border: #d91e18;
}

/* 工作日誌人員提示：所有出現位置統一文字大小與位置 */
.wr-person-select-help,
.workreport-person-hint{
  color: #4b5563 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin-top: 4px !important;
}
.workreport-person-status{
  padding-top: 2px !important;
  gap: 8px !important;
}
.workreport-person-status .badge{
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
}

/* 快速功能：圖示 + 文字比例一致，滑鼠移到哪個就哪個變紅 */
#sidebar .sidebar-quick-list,
.app-sidebar .sidebar-quick-list,
.sidebar .sidebar-quick-list{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 10px 0 0 !important;
}
#sidebar .sidebar-quick-chip,
.app-sidebar .sidebar-quick-chip,
.sidebar .sidebar-quick-chip{
  display: inline-grid !important;
  grid-template-columns: 16px auto !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 6px !important;
  min-height: 32px !important;
  padding: 6px 11px !important;
  border: 1.5px solid var(--sinfu-b7-border) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--sinfu-b7-text) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(15,23,42,.04) !important;
  transform: none !important;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease !important;
}
#sidebar .sidebar-quick-chip .bi,
.app-sidebar .sidebar-quick-chip .bi,
.sidebar .sidebar-quick-chip .bi{
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: var(--sinfu-b7-red) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}
#sidebar .sidebar-quick-chip:hover,
#sidebar .sidebar-quick-chip:focus-visible,
.app-sidebar .sidebar-quick-chip:hover,
.app-sidebar .sidebar-quick-chip:focus-visible,
.sidebar .sidebar-quick-chip:hover,
.sidebar .sidebar-quick-chip:focus-visible{
  background: var(--sinfu-b7-red) !important;
  color: #ffffff !important;
  border-color: #111111 !important;
  box-shadow: 0 7px 15px rgba(217,30,24,.22) !important;
  outline: none !important;
}
#sidebar .sidebar-quick-chip:hover .bi,
#sidebar .sidebar-quick-chip:focus-visible .bi,
.app-sidebar .sidebar-quick-chip:hover .bi,
.app-sidebar .sidebar-quick-chip:focus-visible .bi,
.sidebar .sidebar-quick-chip:hover .bi,
.sidebar .sidebar-quick-chip:focus-visible .bi{
  color: #ffffff !important;
}

/* 側邊選單：所有框框一致、字體縮小，未選白底黑字紅框 */
#sidebar nav .nav-link,
.app-sidebar nav .nav-link,
.sidebar nav .nav-link{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: auto !important;
  min-height: 48px !important;
  margin: 7px 12px !important;
  padding: 10px 46px !important;
  border: 1.6px solid var(--sinfu-b7-border) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: var(--sinfu-b7-text) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.22 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease !important;
}
#sidebar nav .nav-link.nav-sub,
.app-sidebar nav .nav-link.nav-sub,
.sidebar nav .nav-link.nav-sub{
  min-height: 48px !important;
  margin: 7px 12px !important;
  padding: 10px 46px !important;
  border: 1.6px solid var(--sinfu-b7-border) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

/* 滑鼠移入 / 鍵盤聚焦 / 目前頁：立刻紅底白字 */
#sidebar nav .nav-link:hover,
#sidebar nav .nav-link:focus-visible,
#sidebar nav .nav-link.active,
#sidebar nav .nav-link[aria-current="page"],
.app-sidebar nav .nav-link:hover,
.app-sidebar nav .nav-link:focus-visible,
.app-sidebar nav .nav-link.active,
.app-sidebar nav .nav-link[aria-current="page"],
.sidebar nav .nav-link:hover,
.sidebar nav .nav-link:focus-visible,
.sidebar nav .nav-link.active,
.sidebar nav .nav-link[aria-current="page"]{
  background: var(--sinfu-b7-red) !important;
  color: #ffffff !important;
  border-color: #111111 !important;
  box-shadow: 0 8px 16px rgba(217,30,24,.20) !important;
  transform: none !important;
  outline: none !important;
}
#sidebar nav .nav-link:hover *,
#sidebar nav .nav-link:focus-visible *,
#sidebar nav .nav-link.active *,
#sidebar nav .nav-link[aria-current="page"] *,
.app-sidebar nav .nav-link:hover *,
.app-sidebar nav .nav-link:focus-visible *,
.app-sidebar nav .nav-link.active *,
.app-sidebar nav .nav-link[aria-current="page"] *,
.sidebar nav .nav-link:hover *,
.sidebar nav .nav-link:focus-visible *,
.sidebar nav .nav-link.active *,
.sidebar nav .nav-link[aria-current="page"] *{
  color: #ffffff !important;
}

/* 左側 icon 固定，文字保持真正置中 */
#sidebar nav .nav-link > .bi:first-child,
.app-sidebar nav .nav-link > .bi:first-child,
.sidebar nav .nav-link > .bi:first-child{
  position: absolute !important;
  left: 17px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
}
#sidebar nav .nav-link[data-bs-toggle="collapse"] .ms-2,
.app-sidebar nav .nav-link[data-bs-toggle="collapse"] .ms-2,
.sidebar nav .nav-link[data-bs-toggle="collapse"] .ms-2{
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  color: #111827 !important;
  transform: translateY(-50%) !important;
}
#sidebar nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .ms-2,
.app-sidebar nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .ms-2,
.sidebar nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .ms-2{
  transform: translateY(-50%) rotate(180deg) !important;
}
#sidebar nav .nav-link:hover .ms-2,
#sidebar nav .nav-link:focus-visible .ms-2,
#sidebar nav .nav-link.active .ms-2,
.app-sidebar nav .nav-link:hover .ms-2,
.app-sidebar nav .nav-link:focus-visible .ms-2,
.app-sidebar nav .nav-link.active .ms-2,
.sidebar nav .nav-link:hover .ms-2,
.sidebar nav .nav-link:focus-visible .ms-2,
.sidebar nav .nav-link.active .ms-2{
  border-color: rgba(255,255,255,.48) !important;
  background: rgba(255,255,255,.18) !important;
  color: #ffffff !important;
}

@media (max-width: 767.98px){
  #sidebar .sidebar-quick-chip,
  .app-sidebar .sidebar-quick-chip,
  .sidebar .sidebar-quick-chip{
    min-height: 33px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  #sidebar nav .nav-link,
  #sidebar nav .nav-link.nav-sub,
  .app-sidebar nav .nav-link,
  .app-sidebar nav .nav-link.nav-sub,
  .sidebar nav .nav-link,
  .sidebar nav .nav-link.nav-sub{
    min-height: 48px !important;
    margin: 7px 12px !important;
    padding: 10px 44px !important;
    border-radius: 12px !important;
    font-size: 14.5px !important;
    line-height: 1.22 !important;
  }
}

/* ===== GPT UI V-B8：強制選單優化版，修正 B7 視覺未完全套用 ===== */
:root{
  --gpt-b8-red:#d91e18;
  --gpt-b8-red-dark:#b91410;
  --gpt-b8-text:#111827;
  --gpt-b8-muted:#64748b;
  --gpt-b8-border:#d91e18;
  --gpt-b8-soft:#fff7f7;
}
#sidebar.app-sidebar,
#sidebar.sidebar{
  background:#fff !important;
  color:var(--gpt-b8-text) !important;
  border-right:1px solid #e5e7eb !important;
  box-shadow:8px 0 28px rgba(15,23,42,.08) !important;
}
#sidebar .brand{
  min-height:66px !important;
  background:#fff !important;
  border-bottom:1px solid #e5e7eb !important;
}
#sidebar .brand-title{ color:#111827 !important; font-size:15px !important; font-weight:900 !important; }
#sidebar .brand-sub{ color:#475569 !important; font-size:12px !important; font-weight:800 !important; }
#sidebar .sidebar-tools{
  padding:10px 12px 12px !important;
  background:#fff !important;
  border-bottom:1px solid #e5e7eb !important;
}
#sidebar .sidebar-search-label{
  color:#334155 !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  margin:0 0 6px !important;
}
#sidebar .sidebar-search-wrap{
  height:40px !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:0 12px !important;
  background:#fff !important;
  color:#111827 !important;
  border:1.6px solid #cbd5e1 !important;
  border-radius:13px !important;
  box-shadow:0 2px 8px rgba(15,23,42,.04) !important;
}
#sidebar .sidebar-search-wrap:focus-within{
  border-color:var(--gpt-b8-red) !important;
  box-shadow:0 0 0 .2rem rgba(217,30,24,.14) !important;
}
#sidebar .sidebar-search-wrap .bi{ color:#475569 !important; font-size:15px !important; }
#sidebar .sidebar-search{
  min-width:0 !important;
  width:100% !important;
  height:100% !important;
  font-size:13px !important;
  font-weight:800 !important;
  color:#111827 !important;
}
#sidebar .sidebar-search::placeholder{ color:#94a3b8 !important; }
#sidebar .sidebar-quick-list{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:10px 0 0 !important;
  padding:0 !important;
}
#sidebar .sidebar-quick-chip{
  width:100% !important;
  min-width:0 !important;
  min-height:36px !important;
  height:36px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:7px !important;
  padding:0 10px !important;
  border:1.6px solid var(--gpt-b8-red) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:var(--gpt-b8-text) !important;
  font-size:12px !important;
  font-weight:850 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  box-shadow:0 2px 7px rgba(15,23,42,.04) !important;
  transform:none !important;
  transition:background-color .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease !important;
}
#sidebar .sidebar-quick-chip .bi{
  width:15px !important;
  min-width:15px !important;
  height:15px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:var(--gpt-b8-red) !important;
  font-size:13px !important;
}
#sidebar .sidebar-quick-chip span{
  display:block !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#sidebar .sidebar-quick-chip:hover,
#sidebar .sidebar-quick-chip:focus-visible,
#sidebar .sidebar-quick-chip.active,
#sidebar .sidebar-quick-chip[aria-current="page"]{
  background:var(--gpt-b8-red) !important;
  color:#fff !important;
  border-color:#111111 !important;
  box-shadow:0 7px 15px rgba(217,30,24,.22) !important;
  outline:none !important;
}
#sidebar .sidebar-quick-chip:hover .bi,
#sidebar .sidebar-quick-chip:focus-visible .bi,
#sidebar .sidebar-quick-chip.active .bi,
#sidebar .sidebar-quick-chip[aria-current="page"] .bi{ color:#fff !important; }
#sidebar .nav-section{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:15px 14px 8px !important;
  color:#334155 !important;
  font-size:12.5px !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
}
#sidebar .nav-section::before{
  content:"" !important;
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  border-radius:999px !important;
  background:var(--gpt-b8-red) !important;
  box-shadow:0 0 0 5px rgba(217,30,24,.10) !important;
}
#sidebar .sidebar-scroll nav .nav-link::before{ display:none !important; content:none !important; }
#sidebar .sidebar-scroll nav .nav-link{
  position:relative !important;
  width:auto !important;
  min-height:48px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  margin:7px 12px !important;
  padding:10px 48px !important;
  border:1.7px solid var(--gpt-b8-red) !important;
  border-radius:12px !important;
  background:#fff !important;
  color:var(--gpt-b8-text) !important;
  font-size:14px !important;
  font-weight:850 !important;
  line-height:1.22 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  text-decoration:none !important;
  box-shadow:none !important;
  transform:none !important;
  transition:background-color .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease !important;
}
#sidebar .sidebar-scroll nav .nav-link.nav-sub{
  min-height:47px !important;
  margin:7px 12px !important;
  padding:10px 48px !important;
  border-left:1.7px solid var(--gpt-b8-red) !important;
  font-size:14px !important;
}
#sidebar .sidebar-scroll nav .nav-link:hover,
#sidebar .sidebar-scroll nav .nav-link:focus-visible,
#sidebar .sidebar-scroll nav .nav-link.active,
#sidebar .sidebar-scroll nav .nav-link[aria-current="page"]{
  background:var(--gpt-b8-red) !important;
  color:#fff !important;
  border-color:#111111 !important;
  box-shadow:0 8px 16px rgba(217,30,24,.20) !important;
  outline:none !important;
  transform:none !important;
}
#sidebar .sidebar-scroll nav .nav-link:hover *,
#sidebar .sidebar-scroll nav .nav-link:focus-visible *,
#sidebar .sidebar-scroll nav .nav-link.active *,
#sidebar .sidebar-scroll nav .nav-link[aria-current="page"] *{ color:#fff !important; }
#sidebar .sidebar-scroll nav .nav-link > .gpt-menu-icon{
  position:absolute !important;
  left:17px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:var(--gpt-b8-red) !important;
  font-size:15px !important;
  line-height:1 !important;
  pointer-events:none !important;
}
#sidebar .sidebar-scroll nav .nav-link:hover > .gpt-menu-icon,
#sidebar .sidebar-scroll nav .nav-link:focus-visible > .gpt-menu-icon,
#sidebar .sidebar-scroll nav .nav-link.active > .gpt-menu-icon,
#sidebar .sidebar-scroll nav .nav-link[aria-current="page"] > .gpt-menu-icon{ color:#fff !important; }
#sidebar .sidebar-scroll nav .nav-link[data-bs-toggle="collapse"] .ms-2{
  position:absolute !important;
  right:16px !important;
  top:50% !important;
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  border:1px solid #cbd5e1 !important;
  border-radius:999px !important;
  background:#f8fafc !important;
  color:#111827 !important;
  transform:translateY(-50%) !important;
}
#sidebar .sidebar-scroll nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .ms-2{ transform:translateY(-50%) rotate(180deg) !important; }
#sidebar .sidebar-scroll nav .nav-link:hover .ms-2,
#sidebar .sidebar-scroll nav .nav-link:focus-visible .ms-2,
#sidebar .sidebar-scroll nav .nav-link.active .ms-2{
  border-color:rgba(255,255,255,.48) !important;
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
}
#sidebar .wr-person-select-help,
#sidebar .workreport-person-hint,
.wr-person-select-help,
.workreport-person-hint{
  color:#4b5563 !important;
  font-size:13px !important;
  font-weight:850 !important;
  line-height:1.35 !important;
}
@media (max-width:767.98px){
  #sidebar .sidebar-tools{ padding:10px 12px 12px !important; }
  #sidebar .sidebar-quick-list{ gap:8px !important; }
  #sidebar .sidebar-quick-chip{ height:36px !important; min-height:36px !important; font-size:12px !important; padding:0 9px !important; }
  #sidebar .sidebar-scroll nav .nav-link,
  #sidebar .sidebar-scroll nav .nav-link.nav-sub{
    min-height:49px !important;
    margin:7px 12px !important;
    padding:10px 46px !important;
    border-radius:12px !important;
    font-size:14px !important;
    line-height:1.22 !important;
  }
}
@media (max-width:360px){
  #sidebar .sidebar-quick-list{ grid-template-columns:1fr !important; }
}
/* ===== /GPT UI V-B8 ===== */



/* ===== GPT UI V-B9：工作日誌查詢區對稱與說明圖示 ===== */
.workreport-filter-card .card-body{ padding:16px 18px 12px; }
.workreport-filter-card .form-label{ min-height:22px; margin-bottom:6px; font-size:.88rem; font-weight:800; color:#111827; }
.workreport-filter-card .form-control,
.workreport-filter-card .form-select{ min-height:42px; font-weight:700; border-radius:10px; }
.workreport-filter-card .workreport-search-btn{ min-height:42px; border-radius:10px; font-weight:800; }
.workreport-filter-card .workreport-person-status{ border-top:1px dashed #e5e7eb; padding-top:8px; margin-top:6px; line-height:1.2; }
.workreport-filter-card .badge{ border-radius:8px; padding:.38rem .58rem; font-size:.78rem; font-weight:800; }
.wr-help-btn{ width:22px; height:22px; display:inline-grid; place-items:center; padding:0 !important; border-radius:999px; color:#64748b !important; text-decoration:none !important; line-height:1; }
.wr-help-btn:hover,
.wr-help-btn:focus{ background:#d91e18 !important; color:#fff !important; outline:none; }
.wr-help-btn .bi{ font-size:1rem; }
@media (max-width:768px){
  .workreport-filter-card .card-body{ padding:14px; }
  .workreport-filter-card .form-label{ font-size:.86rem; }
  .workreport-filter-card .form-control,
  .workreport-filter-card .form-select,
  .workreport-filter-card .workreport-search-btn{ min-height:46px; }
  .workreport-filter-card .workreport-person-status{ justify-content:flex-start !important; }
}
/* ===== /GPT UI V-B9 ===== */

/* ===== GPT UI V-B10：LOGO 完全透明版（移除灰底、圓角外框、陰影） ===== */
#sidebar .brand{
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
#sidebar .brand-logo,
#sidebar img.brand-logo{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: contain !important;
}
#sidebar .brand::before,
#sidebar .brand::after,
#sidebar .brand-logo::before,
#sidebar .brand-logo::after{
  content: none !important;
  display: none !important;
}
/* ===== /GPT UI V-B10 ===== */


/* ===== GPT UI V-B11：全站提示視窗統一樣式（圖片2風格） ===== */
.app-prompt-modal .modal-content{
  border:0 !important;
  border-radius:22px !important;
  overflow:hidden !important;
  box-shadow:0 24px 56px rgba(15,23,42,.26) !important;
}
.app-prompt-modal .modal-header{
  justify-content:center;
  border-bottom:0;
  padding:16px 20px;
}
.app-prompt-modal .modal-title{
  font-size:20px;
  font-weight:900;
  color:#fff;
}
.app-prompt-modal .modal-body{
  text-align:center;
  padding:24px 26px 14px;
}
.app-prompt-modal .modal-icon{
  font-size:54px;
  line-height:1;
  margin-bottom:10px;
}
.app-prompt-modal .modal-message{
  font-size:18px;
  font-weight:900;
  color:#0f172a;
  white-space:pre-line;
}
.app-prompt-modal .modal-hint{
  margin:16px auto 0;
  padding:12px 16px;
  border-radius:16px;
  font-weight:700;
  font-size:15px;
  max-width:88%;
}
.app-prompt-modal .modal-footer{
  border-top:0;
  justify-content:center;
  padding:0 24px 24px;
}
.app-prompt-modal .btn{
  min-width:120px;
  min-height:44px;
  border-radius:14px;
  font-weight:900;
}
.app-prompt-modal.app-prompt-success .modal-header{ background:#22955a; }
.app-prompt-modal.app-prompt-success .modal-icon{ color:#22955a; }
.app-prompt-modal.app-prompt-success .modal-hint{ background:#dff4e8; color:#1d6f46; border:1px solid #bde8cf; }
.app-prompt-modal.app-prompt-success .btn-primary{ background:#22955a; border-color:#22955a; }
.app-prompt-modal.app-prompt-info .modal-header{ background:#2563eb; }
.app-prompt-modal.app-prompt-info .modal-icon{ color:#2563eb; }
.app-prompt-modal.app-prompt-info .modal-hint{ background:#dbeafe; color:#1d4ed8; border:1px solid #bfdbfe; }
.app-prompt-modal.app-prompt-info .btn-primary{ background:#2563eb; border-color:#2563eb; }
.app-prompt-modal.app-prompt-warning .modal-header{ background:#d97706; }
.app-prompt-modal.app-prompt-warning .modal-icon{ color:#d97706; }
.app-prompt-modal.app-prompt-warning .modal-hint{ background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.app-prompt-modal.app-prompt-warning .btn-primary{ background:#d97706; border-color:#d97706; }
.app-prompt-modal.app-prompt-danger .modal-header,
.app-prompt-modal.app-prompt-error .modal-header{ background:#dc2626; }
.app-prompt-modal.app-prompt-danger .modal-icon,
.app-prompt-modal.app-prompt-error .modal-icon{ color:#dc2626; }
.app-prompt-modal.app-prompt-danger .modal-hint,
.app-prompt-modal.app-prompt-error .modal-hint{ background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.app-prompt-modal.app-prompt-danger .btn-primary,
.app-prompt-modal.app-prompt-error .btn-primary{ background:#dc2626; border-color:#dc2626; }
@media (max-width:576px){
  .app-prompt-modal .modal-title{ font-size:18px; }
  .app-prompt-modal .modal-message{ font-size:17px; }
  .app-prompt-modal .modal-hint{ max-width:100%; font-size:14px; }
}
/* ===== /GPT UI V-B11 ===== */