/* LMS Design System - CSS Custom Properties */

:root {
    /* プライマリカラー（アクション、リンク） */
    --lms-primary: #0d6efd;
    --lms-primary-hover: #0b5ed7;
    --lms-primary-light: #cfe2ff;

    /* セカンダリカラー（補助情報） */
    --lms-secondary: #6c757d;
    --lms-secondary-hover: #5c636a;
    --lms-secondary-light: #e2e3e5;

    /* ステータスカラー */
    --lms-success: #198754;
    --lms-success-light: #d1e7dd;
    --lms-warning: #ffc107;
    --lms-warning-light: #fff3cd;
    --lms-danger: #dc3545;
    --lms-danger-light: #f8d7da;
    --lms-info: #0dcaf0;
    --lms-info-light: #cff4fc;

    /* コンテンツタイプカラー */
    --lms-content-text: #0d6efd;
    --lms-content-document: #dc3545;
    --lms-content-link: #198754;

    /* ニュートラルカラー */
    --lms-white: #ffffff;
    --lms-gray-50: #f8f9fa;
    --lms-gray-100: #e9ecef;
    --lms-gray-200: #dee2e6;
    --lms-gray-300: #ced4da;
    --lms-gray-400: #adb5bd;
    --lms-gray-500: #6c757d;
    --lms-gray-600: #495057;
    --lms-gray-700: #343a40;
    --lms-gray-800: #212529;

    /* テキストカラー */
    --lms-text-primary: #212529;
    --lms-text-secondary: #6c757d;
    --lms-text-muted: #adb5bd;

    /* シャドウ */
    --lms-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.075);
    --lms-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --lms-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --lms-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.15);

    /* スペーシング（Bootstrap準拠） */
    --lms-spacing-1: 0.25rem;
    --lms-spacing-2: 0.5rem;
    --lms-spacing-3: 1rem;
    --lms-spacing-4: 1.5rem;
    --lms-spacing-5: 3rem;

    /* ボーダー */
    --lms-border-radius: 0.375rem;
    --lms-border-radius-lg: 0.5rem;
    --lms-border-color: #dee2e6;

    /* トランジション */
    --lms-transition-base: all 0.2s ease-in-out;
    --lms-transition-fast: all 0.15s ease-in-out;
    --lms-transition-slow: all 0.3s ease-in-out;
    --lms-transition-modal: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;

    /* グラデーション（コンテンツタイプ別） */
    --lms-gradient-text: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --lms-gradient-document: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --lms-gradient-link: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --lms-gradient-progress: linear-gradient(90deg, var(--lms-primary), var(--lms-info));

    /* モーダル */
    --lms-modal-backdrop: rgba(0, 0, 0, 0.6);

    /* フォーカス */
    --lms-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);

    /* コンテンツタイプボーダー */
    --lms-border-text: #667eea;
    --lms-border-document: #f5576c;
    --lms-border-link: #00f2fe;
}

/* タイポグラフィスケール */

.lms-h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--lms-text-primary);
}

.lms-h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--lms-text-primary);
}

.lms-h3 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--lms-text-primary);
}

.lms-h4 {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--lms-text-primary);
}

.lms-body {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--lms-text-primary);
}

.lms-body-sm {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--lms-text-secondary);
}

.lms-caption {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--lms-text-muted);
}

/* リンクのコントラスト改善 */

a {
    color: var(--lms-primary);
    transition: var(--lms-transition-fast);
}

a:hover {
    color: var(--lms-primary-hover);
}

a:focus {
    outline: 2px solid var(--lms-primary);
    outline-offset: 2px;
}

/* ボタンのコントラスト */

.btn-primary {
    background-color: var(--lms-primary);
    border-color: var(--lms-primary);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: var(--lms-primary-hover);
    border-color: var(--lms-primary-hover);
}

/* ユーティリティクラス */

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* モーダルユーティリティ */

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}

/* アニメーションユーティリティ */

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.slide-down {
    animation: slideDown 0.3s ease-in-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.float {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* ========================================
   生徒向け拡張デザインシステム
   Student Design System Extensions
   Version: 1.0.0
   Last Updated: 2025-11-18
   ======================================== */

/* 生徒向けカラーパレット（Student Color Palette） */

:root {
    /* 生徒向けプライマリカラー（メインアクション、強調表示） */
    --lms-student-primary: #28a745;
    --lms-student-primary-hover: #218838;
    --lms-student-primary-active: #1e7e34;
    --lms-student-primary-light: #d4edda;
    --lms-student-primary-lighter: #eef9f0;

    /* 生徒向けセカンダリカラー（補助情報、サブアクション） */
    --lms-student-secondary: #17a2b8;
    --lms-student-secondary-hover: #138496;
    --lms-student-secondary-active: #117a8b;
    --lms-student-secondary-light: #d1ecf1;
    --lms-student-secondary-lighter: #e7f5f7;

    /* 生徒向けアクセントカラー（通知、ハイライト） */
    --lms-student-accent: #fd7e14;
    --lms-student-accent-hover: #e96200;
    --lms-student-accent-light: #ffe5d0;

    /* 登録ステータスカラー（Enrollment Status） */
    --lms-enrollment-enrolled: #28a745;
    --lms-enrollment-enrolled-bg: #d4edda;
    --lms-enrollment-enrolled-border: #c3e6cb;
    --lms-enrollment-pending: #ffc107;
    --lms-enrollment-pending-bg: #fff3cd;
    --lms-enrollment-pending-border: #ffeaa7;
    --lms-enrollment-not-enrolled: #6c757d;
    --lms-enrollment-not-enrolled-bg: #e2e3e5;
    --lms-enrollment-not-enrolled-border: #d6d8db;
    --lms-enrollment-expired: #dc3545;
    --lms-enrollment-expired-bg: #f8d7da;
    --lms-enrollment-expired-border: #f5c6cb;

    /* 進捗状況カラー（Progress Status） */
    --lms-progress-not-started: #6c757d;
    --lms-progress-in-progress: #0dcaf0;
    --lms-progress-completed: #28a745;
    --lms-progress-bg: #e9ecef;
    --lms-progress-gradient: linear-gradient(90deg, var(--lms-student-primary), var(--lms-student-secondary));

    /* フォーカス・インタラクション（アクセシビリティ対応） */
    --lms-student-focus-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
    --lms-student-focus-outline: 2px solid #28a745;
    --lms-student-focus-offset: 2px;

    /* 検索・フィルターUI */
    --lms-search-border: var(--lms-gray-300);
    --lms-search-border-focus: var(--lms-student-primary);
    --lms-search-bg: var(--lms-white);
    --lms-search-bg-disabled: var(--lms-gray-100);
    --lms-search-icon-color: var(--lms-gray-500);
    --lms-search-placeholder-color: var(--lms-gray-400);

    /* ページネーション */
    --lms-pagination-border: var(--lms-border-color);
    --lms-pagination-bg: var(--lms-white);
    --lms-pagination-bg-hover: var(--lms-gray-100);
    --lms-pagination-bg-active: var(--lms-student-primary);
    --lms-pagination-color-active: var(--lms-white);
    --lms-pagination-disabled-color: var(--lms-gray-400);
}

/* ========================================
   登録ステータスバッジ（Enrollment Status Badges）
   WCAG 2.2準拠 - 色覚障害者対応
   ======================================== */

.lms-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--lms-spacing-1);
    padding: var(--lms-spacing-1) var(--lms-spacing-2);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--lms-border-radius);
    border: 1px solid transparent;
    transition: var(--lms-transition-fast);
    /* WCAG 2.5.8準拠 - 最低24x24pxのタッチターゲット */
    min-height: 24px;
    min-width: 48px;
}

/* 登録済み（Enrolled）- 緑色 + チェックマークアイコン */
.lms-badge-enrolled {
    color: #155724; /* コントラスト比 7.4:1 */
    background-color: var(--lms-enrollment-enrolled-bg);
    border-color: var(--lms-enrollment-enrolled-border);
}

.lms-badge-enrolled::before {
    content: '✓'; /* チェックマーク */
    display: inline-block;
    width: 1em;
    height: 1em;
    font-weight: bold;
    color: var(--lms-enrollment-enrolled);
    aria-hidden: true; /* スクリーンリーダーには読ませない */
}

/* 未登録（Not Enrolled）- グレー + 丸アイコン */
.lms-badge-not-enrolled {
    color: #383d41; /* コントラスト比 11.4:1 */
    background-color: var(--lms-enrollment-not-enrolled-bg);
    border-color: var(--lms-enrollment-not-enrolled-border);
}

.lms-badge-not-enrolled::before {
    content: '○'; /* 空の丸 */
    display: inline-block;
    width: 1em;
    height: 1em;
    font-weight: bold;
    color: var(--lms-enrollment-not-enrolled);
    aria-hidden: true;
}

/* 保留中（Pending）- 黄色 + 時計アイコン */
.lms-badge-pending {
    color: #856404; /* コントラスト比 6.5:1 */
    background-color: var(--lms-enrollment-pending-bg);
    border-color: var(--lms-enrollment-pending-border);
}

.lms-badge-pending::before {
    content: '⏱'; /* 時計アイコン */
    display: inline-block;
    width: 1em;
    height: 1em;
    font-weight: bold;
    color: var(--lms-enrollment-pending);
    aria-hidden: true;
}

/* 期限切れ（Expired）- 赤色 + 警告アイコン */
.lms-badge-expired {
    color: #721c24; /* コントラスト比 9.7:1 */
    background-color: var(--lms-enrollment-expired-bg);
    border-color: var(--lms-enrollment-expired-border);
}

.lms-badge-expired::before {
    content: '⚠'; /* 警告アイコン */
    display: inline-block;
    width: 1em;
    height: 1em;
    font-weight: bold;
    color: var(--lms-enrollment-expired);
    aria-hidden: true;
}

/* スクリーンリーダー専用テキスト */
.lms-badge .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ホバー時のアクセシビリティ対応 */
.lms-badge:hover {
    box-shadow: var(--lms-shadow-sm);
    transform: translateY(-1px);
}

/* フォーカス時のアクセシビリティ対応（WCAG 2.4.7） */
.lms-badge:focus,
.lms-badge:focus-visible {
    outline: 2px solid var(--lms-student-primary);
    outline-offset: 2px;
    box-shadow: var(--lms-student-focus-shadow);
}

/* ========================================
   検索ボックス（Search Box）
   モバイルファースト、レスポンシブ対応
   ======================================== */

.lms-search-container {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.lms-search-input {
    width: 100%;
    padding: var(--lms-spacing-2) var(--lms-spacing-3);
    padding-left: 2.5rem; /* アイコン用スペース */
    font-size: 1rem;
    line-height: 1.5;
    color: var(--lms-text-primary);
    background-color: var(--lms-search-bg);
    border: 1px solid var(--lms-search-border);
    border-radius: var(--lms-border-radius);
    transition: var(--lms-transition-base);
    /* タッチターゲット確保（モバイル） */
    min-height: 44px;
}

/* 検索アイコン */
.lms-search-icon {
    position: absolute;
    left: var(--lms-spacing-2);
    top: 50%;
    transform: translateY(-50%);
    color: var(--lms-search-icon-color);
    pointer-events: none;
    font-size: 1.125rem;
}

/* プレースホルダー */
.lms-search-input::placeholder {
    color: var(--lms-search-placeholder-color);
    opacity: 1;
}

/* フォーカス時（WCAG 2.4.7準拠） */
.lms-search-input:focus {
    border-color: var(--lms-search-border-focus);
    outline: 2px solid var(--lms-student-primary);
    outline-offset: 2px;
    box-shadow: var(--lms-student-focus-shadow);
}

/* 無効状態 */
.lms-search-input:disabled {
    background-color: var(--lms-search-bg-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

/* タブレット以上（768px以上） */
@media (min-width: 768px) {
    .lms-search-container {
        max-width: 400px;
    }

    .lms-search-input {
        font-size: 0.9375rem;
    }
}

/* デスクトップ（1024px以上） */
@media (min-width: 1024px) {
    .lms-search-container {
        max-width: 500px;
    }

    .lms-search-input:hover:not(:disabled) {
        border-color: var(--lms-student-primary);
        box-shadow: var(--lms-shadow-sm);
    }
}

/* ========================================
   フィルター（Filters）
   モバイル: 垂直積み重ね、タブレット以上: 水平配置
   ======================================== */

.lms-filter-container {
    display: flex;
    flex-direction: column;
    gap: var(--lms-spacing-3);
    width: 100%;
    margin-bottom: var(--lms-spacing-4);
}

.lms-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--lms-spacing-2);
}

.lms-filter-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lms-text-primary);
    margin-bottom: var(--lms-spacing-1);
}

.lms-filter-select {
    width: 100%;
    padding: var(--lms-spacing-2) var(--lms-spacing-3);
    font-size: 1rem;
    color: var(--lms-text-primary);
    background-color: var(--lms-white);
    border: 1px solid var(--lms-search-border);
    border-radius: var(--lms-border-radius);
    cursor: pointer;
    transition: var(--lms-transition-base);
    /* タッチターゲット確保 */
    min-height: 44px;
}

/* フォーカス対応 */
.lms-filter-select:focus {
    border-color: var(--lms-student-primary);
    outline: 2px solid var(--lms-student-primary);
    outline-offset: 2px;
    box-shadow: var(--lms-student-focus-shadow);
}

/* タブレット以上（768px以上）- 水平配置 */
@media (min-width: 768px) {
    .lms-filter-container {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .lms-filter-group {
        flex: 1;
        min-width: 200px;
    }
}

/* デスクトップ（1024px以上） */
@media (min-width: 1024px) {
    .lms-filter-select:hover:not(:disabled) {
        border-color: var(--lms-student-primary);
        box-shadow: var(--lms-shadow-sm);
    }
}

/* ========================================
   ページネーション（Pagination）
   モバイル: コンパクト、デスクトップ: フル表示
   ======================================== */

.lms-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--lms-spacing-1);
    flex-wrap: wrap;
    margin-top: var(--lms-spacing-4);
    padding: var(--lms-spacing-3) 0;
}

.lms-pagination-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.5.8準拠 - 最低44x44pxのタッチターゲット */
    min-width: 44px;
    min-height: 44px;
    padding: var(--lms-spacing-2);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--lms-text-primary);
    background-color: var(--lms-pagination-bg);
    border: 1px solid var(--lms-pagination-border);
    border-radius: var(--lms-border-radius);
    cursor: pointer;
    transition: var(--lms-transition-fast);
    text-decoration: none;
}

/* ホバー */
.lms-pagination-item:hover:not(.lms-pagination-active):not(.lms-pagination-disabled) {
    background-color: var(--lms-pagination-bg-hover);
    border-color: var(--lms-student-primary);
    transform: translateY(-1px);
    box-shadow: var(--lms-shadow-sm);
}

/* アクティブページ */
.lms-pagination-active {
    background-color: var(--lms-pagination-bg-active);
    color: var(--lms-pagination-color-active);
    border-color: var(--lms-pagination-bg-active);
    cursor: default;
    font-weight: 700;
}

/* 無効状態 */
.lms-pagination-disabled {
    color: var(--lms-pagination-disabled-color);
    background-color: var(--lms-pagination-bg);
    border-color: var(--lms-pagination-border);
    cursor: not-allowed;
    opacity: 0.5;
}

/* フォーカス対応（WCAG 2.4.7） */
.lms-pagination-item:focus,
.lms-pagination-item:focus-visible {
    outline: 2px solid var(--lms-student-primary);
    outline-offset: 2px;
    box-shadow: var(--lms-student-focus-shadow);
}

/* 省略記号 */
.lms-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--lms-text-muted);
    cursor: default;
}

/* モバイル（767px以下）- ページ番号を一部非表示 */
@media (max-width: 767px) {
    .lms-pagination-item.lms-pagination-number {
        display: none;
    }

    .lms-pagination-item.lms-pagination-number.lms-pagination-active,
    .lms-pagination-item.lms-pagination-number:first-of-type,
    .lms-pagination-item.lms-pagination-number:last-of-type {
        display: inline-flex;
    }

    .lms-pagination-item {
        min-width: 40px;
        min-height: 40px;
        font-size: 0.875rem;
    }
}

/* タブレット以上（768px以上） */
@media (min-width: 768px) {
    .lms-pagination {
        gap: var(--lms-spacing-2);
    }

    .lms-pagination-item {
        min-width: 44px;
        min-height: 44px;
    }
}

/* デスクトップ（1024px以上） */
@media (min-width: 1024px) {
    .lms-pagination-item {
        min-width: 48px;
        min-height: 48px;
    }
}