/* =========================================
   1. ベーススタイル（全画面共通）
   ========================================= */
body {
    font-family: sans-serif;
    background-color: #f4f6f9;
    color: #333;
    margin: 0;
}

.navbar {
    background-color: #343a40;
    color: #fff;
    padding: 1rem 2rem;
}

.container, .container-fluid {
    margin-top: 20px;
}

.card {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: none;
}

/* =========================================
   2. 生徒一覧画面専用スタイル (.list-table)
   ========================================= */
.list-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
}

.list-table th, .list-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}

.list-table th {
    background-color: #e9ecef;
    text-align: left;
}

.list-table tr:hover {
    background-color: #f1f8ff;
}

/* 一覧画面の進捗バー */
.progress-wrapper {
    background-color: #e9ecef;
    border-radius: 4px;
    height: 16px;
    width: 100%;
    overflow: hidden;
}
.progress-bar {
    background-color: #28a745;
    height: 100%;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

/* =========================================
   3. 進捗表（マトリックス）専用スタイル (.table)
   ========================================= */

/* スクロール領域の設定 */
.table-responsive {
    max-height: 75vh;
    overflow: auto;
    border: 1px solid #dee2e6;
    background-color: white;
}

.table {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* --- ヘッダー（1行目）のデザイン --- */
/* 全ヘッダーの共通色（ネイビー） */
.table thead th {
    background-color: #2c3e50 !important;
    color: #ffffff !important;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ffffff33 !important;
}

/* --- 1列目（生徒名）の固定設定 --- */
.sticky-start {
    position: sticky;
    left: 0;
    z-index: 10;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ヘッダーの生徒名（ネイビー） */
thead th.sticky-start {
    text-align: left !important;
    padding-left: 10px !important;
}

/* データ行の生徒名（白背景・黒文字） */
tbody td.sticky-start {
    background-color: #ffffff !important;
    color: #212529 !important;
    font-weight: bold;
    border-right: 3px solid #dee2e6 !important;
}

/* --- 2列目(ID)・3列目(日付)の列幅固定 --- */
.table th:nth-child(2), .table td:nth-child(2) { width: 65px !important; min-width: 65px !important; }
.table th:nth-child(3), .table td:nth-child(3) { width: 110px !important; min-width: 110px !important; }

/* データ行のIDと日付も白背景に固定 */
tbody td:nth-child(2), tbody td:nth-child(3) {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* --- 科目名（縦書き）の設定 --- */
.vertical-header {
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    padding: 8px 2px !important; /* 左右の余白を詰めて横幅を節約 */
    vertical-align: bottom;
    text-align: center !important;
    
    /* 横幅と高さの調整 */
    min-width: 38px;   /* 1列を少しスリムに */
    height: 250px;     /* 高さを180pxから250pxへ拡大（適宜調整してください） */
    
    /* 文字サイズの調整 */
    font-size: 0.75rem; /* 標準(0.9rem)より一回り小さくして表示量を増やす */
    line-height: 1.1;
    overflow: visible;  /* はみ出しても隠さない設定（念のため） */
}

/* 長い科目名にマウスを乗せた時だけ、背景を浮かせて全部見えるようにする（オプション） */
.vertical-header:hover {
    overflow: visible;
    z-index: 20;
    background-color: #34495e !important; /* 少し明るいネイビー */
}

/* --- ステータス別背景色 --- */
.status-cell {
    text-align: center;
    width: 45px;
    height: 45px;
    vertical-align: middle;
    border: 1px solid #dee2e6 !important;
}

.status-2 { background-color: #e8f5e9; } /* 完了：薄緑 */
.status-1 { background-color: #fffde7; } /* 着手：薄黄 */
.status--1 { background-color: #f8f9fa; } /* 免除：薄灰 (マイナス記号はCSSクラス名として有効です) */    
.text-exempt { color: #6c757d; font-weight: bold; }


/* =========================================
   4. 共通部品（ボタン・ユーティリティ）
   ========================================= */
.btn-primary {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: bold;
}
.btn-primary:hover { background-color: #0056b3; }

.btn-secondary {
    text-decoration: none;
    color: #6c757d;
    border: 1px solid #6c757d;
    padding: 8px 16px;
    border-radius: 4px;
}

.text-center { text-align: center; }
.font-bold { font-weight: bold; }

/* テーブルホバー時の微調整 */
.table-hover tbody tr:hover td:not(.sticky-start) {
    filter: brightness(0.95);
}
.table-hover tbody tr:hover td.sticky-start {
    background-color: #f1f8ff !important;
}