/**
 * ITパスポート入門 スライド教材CSS
 * カラーテーマ: Gray（資格試験）
 */

/* カラー変数設定 - Gray (資格試験向け) */
:root {
    --header-color-dark: #334155;
    --header-color-main: #64748b;
    --header-color-light: #94a3b8;
    --header-shadow-rgb: 100, 116, 139;
}

/* スクロールバーカスタマイズ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* サイドバートランジション */
.sidebar-transition {
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}

/* スムーズスクロール */
html { scroll-behavior: smooth; }

/* ヘッダー情報リッチデザイン */
.header-rich {
    background: linear-gradient(135deg,
        var(--header-color-dark) 0%,
        var(--header-color-main) 50%,
        var(--header-color-light) 100%);
    position: relative;
    overflow: hidden;
}
.header-rich::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px);
    animation: bgSlide 10s linear infinite;
}
@keyframes bgSlide {
    0% { transform: translateX(0); }
    100% { transform: translateX(50px); }
}

.header-rich-shadow {
    box-shadow:
        0 4px 6px -1px rgba(var(--header-shadow-rgb), 0.2),
        0 10px 25px -5px rgba(var(--header-shadow-rgb), 0.3),
        0 0 50px rgba(var(--header-shadow-rgb), 0.15);
}

/* PDFビューアーコンテナ */
.pdf-container {
    width: 100%;
    height: calc(100vh - 10rem);
    min-height: 600px;
}

/* 全画面時のスタイル */
.pdf-container:fullscreen {
    background: #000;
    height: 100vh;
    max-height: 100vh;
}

.pdf-container:fullscreen object,
.pdf-container:fullscreen embed {
    height: 100%;
}

.pdf-container object,
.pdf-container embed {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0.5rem;
}

/* アクティブなスライド項目 - Gray テーマ */
.slide-item.active {
    background-color: rgb(241 245 249);
    color: rgb(51 65 85);
    font-weight: 500;
}

.slide-item.active .slide-number {
    background-color: rgb(100 116 139);
    color: white;
}

/* ========================================
   ダークモード対応
   ======================================== */
html.dark body {
    background-color: #0f172a;
    color: #f1f5f9;
}

html.dark .bg-white {
    background-color: #1e293b !important;
}

html.dark .bg-slate-50 {
    background-color: #1e293b !important;
}

html.dark .bg-slate-100 {
    background-color: #334155 !important;
}

html.dark .bg-slate-200 {
    background-color: #475569 !important;
}

html.dark .text-slate-800,
html.dark .text-slate-900 {
    color: #f1f5f9 !important;
}

html.dark .text-slate-600,
html.dark .text-slate-700 {
    color: #cbd5e1 !important;
}

html.dark .text-slate-500 {
    color: #94a3b8 !important;
}

html.dark .border-slate-200,
html.dark .border-slate-300 {
    border-color: #334155 !important;
}

html.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

html.dark .slide-item.active {
    background-color: rgba(100, 116, 139, 0.2);
    color: #cbd5e1;
}

html.dark .slide-item:hover:not(.active) {
    background-color: #334155;
}

html.dark .bg-primary-50 {
    background-color: rgba(100, 116, 139, 0.1) !important;
}

html.dark .bg-primary-100 {
    background-color: rgba(100, 116, 139, 0.2) !important;
}

html.dark .text-primary-700 {
    color: #cbd5e1 !important;
}

html.dark .text-primary-600 {
    color: #94a3b8 !important;
}

/* PDFビューアー背景 */
html.dark .pdf-container {
    background-color: #0f172a;
}

/* フッター */
html.dark footer.bg-slate-800 {
    background-color: #020617 !important;
}

/* ナビゲーションボタン */
html.dark .hover\:bg-slate-200:hover {
    background-color: #475569 !important;
}