/* responsive.css - RWD 媒體查詢 */

/* 平板 / 窄筆電 */
@media(max-width:1024px){
  .main{max-width:100%;padding:20px}
  .temple-card-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}

/* 手機 */
@media(max-width:768px){
  .sidebar{display:none}
  .bottom-nav{display:block}
  .main{padding:12px;padding-bottom:80px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat-card{padding:12px}
  .stat-label{font-size:14px}
  .stat-value{font-size:28px}
  .stat-sub{font-size:14px}
  .student-row{padding:10px 8px}
  .topbar{padding:0 12px;gap:4px}
  .topbar h1{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1}
  .topbar-right{gap:4px;flex-shrink:0}
  .topbar-right .user-badge{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .today-badge{font-size:13px;padding:4px 8px;white-space:nowrap}
  .year-select{font-size:14px;padding:4px 8px}
  .report-stats{grid-template-columns:repeat(2,1fr);gap:8px}
  .report-stat .val{font-size:28px}
  .weekly-summary{gap:8px}
  .class-tabs{gap:4px}
  .class-tab{padding:8px 14px;font-size:14px;min-height:40px}
  .checkin-toolbar{flex-wrap:wrap;gap:6px}
  .checkin-toolbar .class-dropdown{min-width:0;flex:1 1 auto}
  .checkin-search{flex:1 1 100%;order:10}
  .checkin-toolbar-actions{order:5}
  .checkin-toolbar-actions .btn-label{display:none}
  .checkin-toolbar-actions .btn-sm{padding:8px 10px;min-width:36px}
  .student-edit-row{grid-template-columns:1fr 1fr;gap:6px;padding:10px 8px}
  .student-edit-row.header{display:none}
  .schedule-row{flex-direction:column;align-items:stretch}
  .card-header{flex-direction:column;align-items:stretch}
  .card-header>div{display:flex;gap:6px;flex-wrap:wrap}
  .card-header>div .class-dropdown{width:100%;min-width:0!important}
  .weekly-summary{grid-template-columns:repeat(2,1fr)}
  .report-toggle-btn{padding:6px 10px;font-size:13px}
  .report-toolbar-row{gap:6px}
  .report-toolbar-actions .btn-label{display:none}
  .report-toolbar-actions .btn-sm{padding:8px 10px;min-width:36px}
  .report-toolbar-row .class-dropdown{min-width:0;max-width:160px}
  .report-toolbar-row #reportClassControl .class-dropdown{max-width:140px}
  .report-stat .lbl{font-size:14px}
  .tbl-filter{font-size:14px}
  .summary-toggle-btn{font-size:14px}
  .temple-card-grid{grid-template-columns:1fr}
  .temple-form .form-row{flex-direction:column;gap:14px}
  .class-button-grid{grid-template-columns:repeat(2,1fr)}
  .class-group-body{grid-template-columns:repeat(2,1fr)}
  .checkin-date-chip{padding:8px 12px;font-size:14px;min-height:40px}
  .btn{min-height:44px}
  .btn-sm{min-height:40px;padding:10px 14px}
  .check-btn{min-height:44px;padding:10px 20px}
  .class-card-btn{min-height:52px}

  /* 全域最小字體 14px */
  .student-meta{font-size:14px}
  .student-name{font-size:15px}
  .status-tag{font-size:14px}
  .class-group-name{font-size:14px}
  .class-group-meta{font-size:14px}
  .class-card-name{font-size:14px}
  .class-card-count{font-size:14px}
  .checkin-month-tab{font-size:14px}
  .month-count{font-size:14px}
  .topic-chip{font-size:14px}
  .today-topics-bar{font-size:14px}
  .empty-state p{font-size:14px}

  /* ===== 報表 header 手機版 ===== */
  .report-header{flex-direction:column!important;align-items:stretch!important;gap:8px}
  .report-header h2{font-size:16px!important}
  .report-header>div{flex-wrap:wrap;gap:6px}
  .report-header .class-dropdown{width:100%;min-width:0!important}
  .report-header .report-toggle{width:100%;justify-content:stretch}
  .report-header .report-toggle-btn{flex:1}
  #templeAttSelect{width:100%;min-width:0!important}

  /* ===== FilterBar 手機版：tabs→select ===== */
  .filter-bar-tabs{display:none}
  .filter-type-select{display:block}
  .filter-bar-row{flex-wrap:nowrap}
  .filter-search-input{max-width:100%}

  /* ===== 通知頁 card-header 手機版 ===== */
  #tab-notify .card-header{flex-direction:row;align-items:center}
  #tab-notify .card-header h2{font-size:15px}

  /* ===== Dashboard 手機版優化 ===== */

  /* 年度標籤跨全寬，不佔 grid cell */
  .dash-year-label{grid-column:1/-1;font-size:14px;color:var(--gray-400);text-align:right;margin-bottom:0}

  /* 卡片間距縮減 */
  #tab-dashboard .card{margin-top:10px}
  #tab-dashboard .card:first-of-type{margin-top:0}
  #tab-dashboard .card-header{padding:10px 14px;flex-direction:row;align-items:center}
  #tab-dashboard .card-header h2{font-size:15px}
  #tab-dashboard .card-body{padding:12px 14px}

  /* 出席率圖表：改為單欄 */
  #chartGrid{grid-template-columns:1fr!important;gap:12px!important}

  /* ===== 掃碼報到手機版優化 ===== */

  #tab-scanner .card-body{padding:14px}
  #tab-scanner .scan-log-card{margin-top:10px}
  #tab-scanner .card-header{padding:12px 16px;flex-direction:row;align-items:center}
  #tab-scanner .card-header h2{font-size:16px}
  #tab-scanner .qr-section{gap:12px;text-align:center}
  #tab-scanner .scan-desc{font-size:14px;color:var(--gray-400);display:none}
  #tab-scanner .scan-class-wrap{max-width:100%}
  #tab-scanner .class-dropdown{
    width:100%;font-size:16px;padding:14px 16px;
    border:2px solid var(--primary);border-radius:var(--radius);
    font-weight:500;background-position:right 14px center
  }
  #tab-scanner .class-dropdown:focus{box-shadow:0 0 0 3px rgba(14,165,233,.2)}
  #tab-scanner .scan-toggle-btn{
    width:100%;min-height:52px;
    font-size:17px;font-weight:600;
    border-radius:var(--radius);
    letter-spacing:.5px;
    justify-content:center;
    padding:14px 20px
  }
  #tab-scanner #qr-reader{max-width:100%;width:100%;border-radius:var(--radius)}
  #tab-scanner #qr-reader video{border-radius:var(--radius)}
  #tab-scanner .qr-result{
    font-size:16px;font-weight:600;
    padding:16px;border-radius:var(--radius);
    text-align:center;
    animation:scanResultPop .3s ease-out
  }
  #scanLog .empty-state{padding:20px 16px}
  #scanLog .empty-state p{font-size:14px}
}

@keyframes scanResultPop{
  0%{transform:scale(.95);opacity:0}
  100%{transform:scale(1);opacity:1}
}

@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr;gap:6px}
  .stat-card{padding:10px}
  .stat-value{font-size:24px}

  /* 掃碼頁超小螢幕 */
  #tab-scanner .card-body{padding:10px}
  #tab-scanner .card-header{padding:10px 12px}
  #tab-scanner .qr-section{gap:10px}
  #tab-scanner .scan-toggle-btn{min-height:48px;font-size:16px}
}