/* --- 모바일 반응형 스타일 (강제 적용) --- */

/* 화면 폭이 800px 이하일 때 (태블릿 및 모바일) */
@media screen and (max-width: 800px) {

  /* 1. 전체 페이지 컨테이너가 가로로 배치되어 있다면 세로로 변경 */
  body, .admin-container, .wrapper {
      display: flex !important;
      flex-direction: column !important; /* 세로 정렬 */
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
  }

  /* 2. 사이드바 메뉴바 설정 */
  /* 사이드바를 화면 왼쪽 고정 해제하고 너비를 100%로 확장 */
  .sidebar, aside.left-panel, #sidebar {
      width: 100% !important;
      height: auto !important;
      position: relative !important; /* 고정 위치 해제 */
      float: none !important;
      display: block !important;
      margin-bottom: 15px !important; /* 메뉴 아래 여백 */
      background-color: #f8fafc !important; /* 필요시 배경색 변경 */
      border-right: none !important;
  }

  /* 메뉴 항목들을 가로로 살짝 나열하거나 세로로 꽉 채우기 */
  .nav-links, ul.menu-list {
      display: flex !important;
      flex-wrap: wrap !important; /* 메뉴가 넘치면 줄바꿈 */
      justify-content: flex-start !important;
      padding: 10px !important;
  }

  .nav-link, li.menu-item {
      width: auto !important;
      margin: 5px !important;
      padding: 8px 12px !important;
      background-color: #edf2f7 !important;
      border-radius: 5px !important;
  }

  /* 현재 활성화된 메뉴 스타일 (대시보드) */
  .nav-link.active, li.menu-item.active {
      background-color: #2563eb !important;
      color: white !important;
  }

  /* 3. 메인 본문 영역 설정 (대시보드 카드 등) */
  /* 본문이 사이드바 아래에 위치하도록 마진 초기화 */
  .main-content, main, .content-wrapper {
      width: 100% !important;
      margin-left: 0 !important;
      padding: 10px !important;
      display: block !important;
  }

  /* 대시보드 카드들이 세로로 쌓이도록 강제 설정 */
  .dashboard-cards, .row-cards {
      display: flex !important;
      flex-direction: column !important; /* 카드 세로 정렬 */
      gap: 15px !important; /* 카드 사이 간격 */
  }

  /* 각 카드 박스 스타일 수정 */
  .card, .stat-card {
      width: 100% !important;
      margin-bottom: 0 !important;
      display: block !important;
  }
}