/*
 * M3 Admin 後台樣式 - 對應 docs/preview-web.html
 * 與 Tailwind M3 色系搭配使用
 */

/* Material Symbols */
.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-rounded.filled {
  font-variation-settings: 'FILL' 1;
}

/* 隱藏捲軸但保持可捲動 */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 頁籤切換動畫 */
.fade-enter {
  opacity: 0;
  transform: translateY(10px);
}
.fade-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms;
}

/* 登入畫面動畫 */
.login-transition {
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

/* M3 Input Label 動畫 (登入用)：浮起時上移，避免與輸入文字重疊 */
.m3-input:focus ~ .m3-label,
.m3-input:not(:placeholder-shown) ~ .m3-label {
  top: 0.5rem;
  transform: translateY(0) scale(0.75);
  color: #006874;
}

/* Bootstrap 相容：讓現有頁面在 M3 Layout 下視覺協調 */
.m3-admin .card {
  border-radius: 1.5rem;
  border: 1px solid rgba(111, 121, 122, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.m3-admin .btn-primary {
  background-color: #006874;
  border-color: #006874;
}
.m3-admin .btn-primary:hover {
  background-color: #004f56;
  border-color: #004f56;
}