/* 文化祭シフト管理サイト 共通スタイル */

html {
  scroll-behavior: smooth;
}

.shift-card {
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.shift-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* 印刷時はヘッダーの背景装飾やフォームを省いてすっきり表示 */
@media print {
  header#site-header .absolute { display: none; }
  section[data-panel="report"] form,
  section[data-panel="lookup"] form,
  footer button { display: none !important; }
}

/* スクロールバーを少し柔らかく */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d8b4fe; border-radius: 10px; }
::-webkit-scrollbar-track { background: #fdf6ff; }

/* ---- 一般向けサイト：ハンバーガーメニュー内のタブUI ---- */
.public-tab-btn.active {
  background: linear-gradient(135deg,#c084fc,#e9d5ff);
  color: #3b0764 !important;
}
.public-tab-btn.active i { color: #3b0764; }
.public-tab-btn:not(.active):hover {
  background: #faf5ff;
}

/* ハンバーガーメニューのドロワー本体・オーバーレイ（印刷時は非表示）
   ※以前あった `display:block` の指定はTailwindの `.hidden`(display:none)より
     詳細度が高く上書きしてしまい、オーバーレイが常時表示されて画面操作不能になる
     重大バグの原因だったため削除。表示/非表示はJS側で hidden クラスの着脱のみで制御する。 */
@media print {
  #public-menu-drawer, #menu-drawer-overlay, #menu-toggle-btn { display: none !important; }
}

/* 端末サイズごとの最適化：スマホでは1カラム、タブレット以上ではゆとりを持たせる */
@media (max-width: 480px) {
  #site-header h1 { font-size: 1.35rem; }
  .shift-card { padding: 0.9rem; }
}
@media (min-width: 768px) {
  #public-menu-drawer { width: 320px; }
}

/* タッチ操作しやすいよう、モバイルではボタン・入力欄のタップ領域を確保 */
@media (pointer: coarse) {
  button, select, input[type="text"], input[type="password"], input[type="checkbox"] {
    min-height: 2.75rem;
  }
}

/* ---- 管理画面：サイドバーのアクティブ状態など ---- */
.admin-nav-btn.active {
  background: linear-gradient(135deg,#c084fc,#e9d5ff);
  color: #3b0764;
}
.admin-nav-btn.active i { color: #3b0764; }