/* ============================================================
   responsive.css - 响应式设计（媒体查询）
   ============================================================ */

@media(max-width:768px){
  .header-inner{padding:0 16px 14px}
  .header h1{font-size:20px}
  .header h1 small{display:none}
  .stats-bar{grid-template-columns:repeat(2,1fr);gap:12px}
  .main{padding:16px}
  .filter-bar{flex-direction:column;gap:8px;border-radius:var(--radius-md)}
  .filter-bar select,.filter-bar input{width:100%;min-width:auto}
  .filter-count{margin-left:0}
  .card-header{padding:16px 18px}
  .card-body.open{padding:14px 18px}
  .card-title{font-size:16px}
  .card-meta{font-size:12px}
  .form-row{grid-template-columns:1fr}
  .form-card{padding:18px;border-radius:var(--radius-md)}
  .form-card-title{font-size:15px;margin-bottom:14px}
  .modal{width:95%;max-height:90vh;border-radius:var(--radius-md)}
  .modal-body{padding:18px}
  .modal-header{padding:20px 20px 0}
  .confirm-modal{width:90%;padding:24px 20px}
  .tab-bar{width:100%}
  .tab-btn{flex:1;text-align:center;padding:8px 12px;font-size:13px}
  .task-item{flex-direction:column;gap:8px}
  .dept-header{flex-wrap:wrap;gap:6px}
  .dept-progress-bar{width:100%;margin-top:4px}
  .header-actions{flex-wrap:wrap;gap:6px}
  .header-actions .btn{padding:6px 12px;font-size:13px}
  /* 详情弹窗左右分栏在窄屏回退为上下排列 */
  .detail-split-layout{flex-direction:column;gap:16px}
  .detail-comment-panel{width:100%;max-height:none}
  .detail-comment-panel .comment-list{max-height:300px}
  .modal-xl{max-width:95%}
}