/* ============================================================
   css/style-admin.css
   管理画面専用レスポンシブスタイル
   (style.css とは別ファイルで提供。キャッシュ回避のため新規作成)
   ============================================================ */

/* ---- デスクトップ固定サイドバー (900px+) ---- */
@media (min-width: 900px) {
  .admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
}

/* ---- 大型モニター (1600px+) ---- */
@media (min-width: 1600px) {
  .admin-sidebar { width: 280px; }
  .admin-main    { padding: 40px 60px; }
}

/* ---- ノートPC・小型モニター (〜1199px): レイアウト微調整 ---- */
@media (max-width: 1199px) {
  .admin-sidebar {
    width: 200px;
    padding: 20px 0;
  }
  .admin-sidebar .logo {
    font-size: 1.1rem;
    padding: 0 16px;
    margin-bottom: 24px;
  }
  .admin-nav-item {
    padding: 12px 16px;
    gap: 10px;
    font-size: 0.88rem;
  }
  .admin-main {
    padding: 24px 28px;
  }

  /* 4列・5列グリッドの調整 */
  .report-grid,
  .audit-grid,
  .invoice-grid,
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .stat-cards,
  div[style*="grid-template-columns:repeat(5,1fr)"],
  div[style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* 3列グリッドの調整 */
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---- 中型〜小型モニター (〜992px): 2カラムレイアウトを縦積みに ---- */
@media (max-width: 992px) {
  .dashboard-grid,
  .settings-container,
  .system-grid,
  .grid-2,
  div[style*="grid-template-columns: 2fr 1fr"],
  div[style*="grid-template-columns:2fr 1fr"],
  div[style*="grid-template-columns: 1.2fr 1fr"],
  div[style*="grid-template-columns:1.2fr 1fr"],
  div[style*="grid-template-columns: 1fr 2fr"],
  div[style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---- タブレット横向き (〜899px): サイドバーを上部横ナビへ ---- */
@media (max-width: 899px) {
  .admin-wrapper {
    flex-direction: column;
  }
  .admin-sidebar {
    width: 100%;
    height: auto;
    padding: 10px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .admin-sidebar .logo {
    white-space: nowrap;
    margin-bottom: 0;
    padding: 0 16px;
    flex-shrink: 0;
    font-size: 1rem;
  }
  .admin-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav > p { display: none; } /* セクション見出し非表示 */
  .admin-nav-item {
    padding: 10px 12px;
    white-space: nowrap;
    font-size: 0.82rem;
    gap: 6px;
    border-left: none !important;
    border-bottom: 3px solid transparent;
  }
  .admin-nav-item.active,
  .admin-nav-item:hover {
    border-left: none !important;
    border-bottom: 3px solid rgba(255,255,255,0.8);
  }
  .admin-main {
    padding: 20px 16px;
  }
  
  /* タブレットでは基本2列に */
  .report-grid,
  .audit-grid,
  .invoice-grid,
  .stat-cards,
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns:repeat(5,1fr)"],
  div[style*="grid-template-columns: repeat(5, 1fr)"],
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .chart-section {
    grid-template-columns: 1fr !important;
  }
}

/* ---- スマートフォン (〜767px): 全て1列縦積みに ---- */
@media (max-width: 767px) {
  .admin-main { padding: 14px 10px; }
  
  .report-grid,
  .audit-grid,
  .invoice-grid,
  .stat-cards,
  .detail-grid,
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns:repeat(5,1fr)"],
  div[style*="grid-template-columns: repeat(5, 1fr)"],
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .chart-section {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  
  .stat-card .value,
  .stat-value {
    font-size: 1.4rem !important;
  }
  
  .admin-header h2 {
    font-size: 1.1rem;
  }
}

/* ---- 全幅共通: テーブルはみ出し対策 ---- */
.chart-card,
.admin-card {
  overflow-x: auto;
}
.performance-table,
.admin-table {
  min-width: 480px;
}

/* 「改善アドバイス」列のテキストが縦に伸びすぎないよう制限 */
.advice-box {
  max-height: 100px;
  overflow-y: auto;
  white-space: normal;
  word-break: break-all;
}

/* 超ワイドモニター: コンテンツ幅に上限 */
@media (min-width: 1800px) {
  .admin-main {
    max-width: 1600px;
  }
}

/* ============================================================
   「スクロールなし（画面に収める）」ダッシュボード・フィットレイアウト
   ============================================================ */
@media (min-width: 900px) {
  /* 1. ページ全体を画面の高さ（100vh）に固定してスクロールを禁止 */
  .admin-body,
  .admin-wrapper {
    height: 100vh !important;
    overflow: hidden !important;
  }

  /* 2. サイドバーは高さを画面一杯にし、個別にスクロール可能に */
  .admin-sidebar {
    height: 100vh !important;
    overflow-y: auto !important;
    flex-shrink: 0;
  }

  /* 3. メインコンテンツエリアをフレックスで縦に伸縮する構造にする */
  .admin-main {
    height: 100vh !important;
    overflow-y: auto !important; /* 基本は個別に縦スクロール可能 */
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  /* 4. テーブル一覧画面（school-management.html や leads.html など）での特別配置 */
  .admin-body:has(.sm-table) .admin-main,
  .admin-body:has(.admin-table) .admin-main,
  .admin-body:has(.performance-table) .admin-main {
    overflow-y: hidden !important; /* メイン全体のスクロールを無くす */
  }

  /* テーブルを含むカードを画面残り高さ一杯に広げる */
  .admin-body:has(.sm-table) .admin-card,
  .admin-body:has(.admin-table) .admin-card,
  .admin-body:has(.performance-table) .admin-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 0;
  }

  /* テーブルの直上のラッパーdivをスクロール可能にし、常に画面内に収める */
  .admin-body:has(.sm-table) div[style*="overflow-x"],
  .admin-body:has(.admin-table) div[style*="overflow-x"],
  .admin-body:has(.performance-table) div[style*="overflow-x"],
  .admin-body:has(.admin-table) .admin-card > div,
  .table-scroll-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: auto !important; /* 縦スクロールをテーブル枠内に */
    overflow-x: auto !important; /* 横スクロールもテーブル枠内に */
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md, 8px);
    background: #fff;
  }

  /* 5. 多数の列があるテーブルを画面幅にできる限り収めるためのコンパクト表示設定 */
  .admin-table,
  .sm-table,
  .performance-table {
    font-size: 0.8rem !important; /* フォントを少し小さくして1行に収める */
  }

  .admin-table th, .admin-table td,
  .sm-table th, .sm-table td,
  .performance-table th, .performance-table td {
    padding: 8px 6px !important; /* セル余白を半減させ、横幅を圧縮 */
  }

  /* 入力欄なども少しコンパクトに */
  .toolbar select,
  .toolbar input,
  .filter-bar select,
  .filter-bar input,
  .kana-index {
    padding: 6px 10px !important;
    font-size: 0.82rem !important;
  }
  
  .stat-cards {
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .stat-card {
    padding: 10px !important;
  }
  .stat-card .num {
    font-size: 1.4rem !important;
  }
}