/*
 * Tutor LMS の画面を ANFANG Design System v2 の色にそろえる。
 * 読み込むのは Tutor LMS の画面だけ（includes/tutor.php）。
 * 色の値は anfang-site.css と同じ（bg-page #0D0D0E ほか）。
 */

/* ---- 1. ログイン後（ダッシュボード・受講画面）：Tutor 4 のダークテーマの色を差し替える ---- */
/* 元は青みのある灰色（#161b26 など）。ANFANG は青みのない黒。html を付けて Tutor の [data-tutor-theme=dark] より強くする */
html[data-tutor-theme=dark] {
	--tutor-font-family-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	--tutor-font-family-heading: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

	--tutor-surface-base: #0D0D0E;
	--tutor-surface-sidebar-l1: #0D0D0E;
	--tutor-surface-l1: #17171A;
	--tutor-surface-l1-hover: #1D1D1F;
	--tutor-surface-l2: #1D1D1F;
	--tutor-surface-l2-hover: #232326;
	--tutor-surface-l3: #1D1D1F;
	--tutor-surface-brand-tertiary: #232326;
	--tutor-surface-warning: #232326;
	--tutor-surface-dark: #5E5E60;

	--tutor-text-primary: #F5F4F1;
	--tutor-text-secondary: #C9C9CC;
	--tutor-text-subdued: #8A8A8E;
	--tutor-text-disabled: #68686C;
	--tutor-text-brand: #3AA6FF;
	--tutor-text-brand-hover: #5BB5FF;
	--tutor-text-highlighted-hover: #3A3A3C;

	--tutor-icon-idle: #C9C9CC;
	--tutor-icon-secondary: #8A8A8E;
	--tutor-icon-subdued: #68686C;
	--tutor-icon-disabled: #68686C;
	--tutor-icon-brand: #3AA6FF;
	--tutor-icon-brand-secondary: #232326;

	--tutor-button-primary: #3AA6FF;
	--tutor-button-primary-hover: #5BB5FF;
	--tutor-button-primary-focused: #3AA6FF;
	--tutor-button-primary-soft: #232326;
	--tutor-button-primary-soft-focused: #232326;
	--tutor-button-disabled: #232326;
	--tutor-button-secondary: #232326;
	--tutor-button-secondary-hover: #3A3A3C;
	--tutor-button-secondary-focused: #232326;
	--tutor-button-outline-inverse: #17171A;
	--tutor-button-outline-hover: #232326;
	--tutor-button-outline-focused-inverse: #0D0D0E;
	--tutor-button-ghost-hover: #232326;

	--tutor-border-idle: #2A2A2D;
	--tutor-border-idle2: #2A2A2D;
	--tutor-border-hover: #5E5E60;
	--tutor-border-tertiary: #5E5E60;
	--tutor-border-inverse: #2A2A2D;
	--tutor-border-brand-secondary: #2A2A2D;
	--tutor-border-dark: #3A3A3C;

	--tutor-tab-sidebar-l2-hover: #17171A;
	--tutor-tab-sidebar-l2-active: #17171A;
	--tutor-tab-sidebar-l4-hover: #17171A;
	--tutor-tab-sidebar-l4-active: #17171A;
	--tutor-tab-l3: #17171A;
	--tutor-tab-l3-hover: #232326;
	--tutor-tab-l3-active: #232326;
	--tutor-tab-l3-active-hover: #232326;

	--tutor-actions-brand-tertiary: #232326;
	--tutor-actions-gray-empty: #17171A;
	--tutor-actions-gray-secondary: #232326;
	--tutor-actions-gray-tertiary: #17171A;
	--tutor-actions-gray-quaternary: #0D0D0E;
	--tutor-actions-success-tertiary: #232326;
	--tutor-actions-warning-secondary: #232326;
	--tutor-actions-critical-secondary: #232326;
	--tutor-quiz-idle: #17171A;
	--tutor-quiz-hover: #232326;
	--tutor-visual-gray-1: #17171A;
	--tutor-visual-gray-2: #2A2A2D;
	--tutor-visual-gray-3: #5E5E60;
}

/* Primary ボタンの文字は暗い色（デザインシステム 5章・白文字だとコントラスト不足） */
html[data-tutor-theme=dark] .tutor-btn-primary,
html[data-tutor-theme=dark] .tutor-btn-primary:hover:not(:disabled):not(.disabled),
html[data-tutor-theme=dark] .tutor-btn-primary:focus:not(:disabled):not(.disabled),
body.anfang-tutor .tutor-btn-primary {
	color: #0A1622;
}

/* ---- 2. ログイン前（講座ページのログイン画面など・テーマの中に出る画面） ---- */
body.anfang-tutor {
	background-color: #0D0D0E;
	color: #C9C9CC;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	--tutor-color-primary: #3AA6FF;
	--tutor-color-primary-hover: #5BB5FF;
	--tutor-body-color: #C9C9CC;
	--tutor-border-color: #2A2A2D;

	/* 追加CSS（外観 → カスタマイズ）の旧トークン --anf-*（v1・#1D1D1D）を、この画面の中だけ v2 の値に置き換える。
	   ログイン・アカウント登録（page-id-1565・1567）の見た目は追加CSS の 11章が作っている */
	--anf-bg: #0D0D0E;
	--anf-bg-panel: #17171A;
	--anf-bg-card: #17171A;
	--anf-bg-hover: #1D1D1F;
	--anf-bg-active: #232326;
	--anf-accent-hover: #5BB5FF;
	--anf-text: #C9C9CC;
	--anf-text-strong: #F5F4F1;
	--anf-text-dim: #8A8A8E;
	--anf-text-faint: #68686C;
	--anf-border: #2A2A2D;
	--anf-border-weak: rgba(255, 255, 255, 0.06);
}
body.anfang-tutor #page,
body.anfang-tutor .site-content,
body.anfang-tutor .ast-separate-container .ast-article-single,
body.anfang-tutor.ast-separate-container .ast-article-single:not(.ast-related-post) {
	/* スマホ幅で Astra がここを白っぽい色（global-color-5）にする */
	background-color: transparent;
}

/* ログインのカード */
body.anfang-tutor .tutor-login-wrap {
	background-color: #17171A;
	border: 1px solid #2A2A2D;
	border-radius: 10px;
	color: #C9C9CC;
}
body.anfang-tutor .tutor-login-wrap .tutor-color-black {
	color: #F5F4F1;
	font-weight: 700;
}
body.anfang-tutor .tutor-login-wrap .tutor-color-muted,
body.anfang-tutor .tutor-login-wrap .tutor-color-secondary {
	color: #8A8A8E;
}
/* Tutor の tutor-front.min.css が #tutor-login-form と !important で白にしているので、同じ強さで上書きする */
body.anfang-tutor .tutor-form-control,
body.anfang-tutor .tutor-login-wrap input.tutor-form-control,
body.anfang-tutor .tutor-login-wrap input.tutor-form-control:placeholder-shown:not(:focus),
body.anfang-tutor #tutor-login-form input.tutor-form-control,
body.anfang-tutor #tutor-login-form input.tutor-form-control:placeholder-shown:not(:focus) {
	background-color: #0D0D0E;
	border: 1px solid #2A2A2D !important;
	border-radius: 4px;
	color: #F5F4F1;
	font-family: inherit;
}
body.anfang-tutor .tutor-form-control::placeholder {
	color: #8A8A8E;
}
body.anfang-tutor .tutor-form-control:focus,
body.anfang-tutor #tutor-login-form input.tutor-form-control:focus {
	border-color: #3AA6FF !important;
	box-shadow: none;
}
body.anfang-tutor .tutor-form-check-input {
	background-color: #0D0D0E;
	border-color: #5E5E60;
}
body.anfang-tutor .tutor-btn {
	font-family: inherit;
}
/* ボタンの大きさはログイン・登録のフォームだけ（マイページの小さいボタンは Tutor のまま） */
body.anfang-tutor .tutor-login-wrap .tutor-btn-primary,
body.anfang-tutor #tutor-registration-form .tutor-btn-primary {
	min-height: 52px;
	border-radius: 6px;
	background-color: #3AA6FF;
	border-color: #3AA6FF;
	font-weight: 600;
}
body.anfang-tutor .tutor-btn-primary:hover {
	background-color: #5BB5FF;
	border-color: #5BB5FF;
	color: #0A1622;
}
body.anfang-tutor .tutor-login-wrap .tutor-btn-ghost,
body.anfang-tutor .tutor-login-wrap .tutor-btn-link {
	color: #3AA6FF;
}
/* スマホ：「ログイン状態を保存する」と「パスワードを忘れた方」を縦に並べ、文字の途中で折り返さない */
@media (max-width: 640px) {
	body.anfang-tutor .tutor-login-wrap {
		margin-top: 40px !important;
	}
	body.anfang-tutor .tutor-login-form-wrapper {
		padding: 28px 20px;
	}
	body.anfang-tutor .tutor-login-wrap .tutor-justify-between {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	body.anfang-tutor .tutor-login-wrap .tutor-justify-between .tutor-btn-ghost {
		padding: 0;
	}
	body.anfang-tutor .tutor-login-wrap .tutor-justify-center {
		flex-wrap: wrap;
		text-align: center;
	}
	body.anfang-tutor .tutor-login-wrap .tutor-btn,
	body.anfang-tutor .tutor-login-wrap .tutor-form-check label {
		white-space: nowrap;
	}
}
/* ---- 3. ログイン後の講座ページ（テーマの中に出る・Tutor の旧い部品 tutor.min.css を使う） ---- */
body.anfang-tutor {
	--tutor-color-black: #F5F4F1;
	--tutor-color-secondary: #C9C9CC;
	--tutor-color-subdued: #8A8A8E;
	--tutor-color-hints: #8A8A8E;
	--tutor-color-muted: #8A8A8E;
	--tutor-color-gray: #2A2A2D;
	--tutor-color-gray-10: #1D1D1F;
}
body.anfang-tutor .tutor-card,
body.anfang-tutor .tutor-card-body,
body.anfang-tutor .tutor-card-footer,
body.anfang-tutor .tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-body,
body.anfang-tutor .tutor-accordion-item,
body.anfang-tutor .tutor-accordion-item-header,
body.anfang-tutor .tutor-course-content-list-item,
body.anfang-tutor .tutor-course-details-instructors {
	background-color: #17171A;
	border-color: #2A2A2D;
	color: #C9C9CC;
}
body.anfang-tutor .tutor-card,
body.anfang-tutor .tutor-accordion-item {
	border-radius: 10px;
}
body.anfang-tutor .tutor-accordion-item-header {
	color: #F5F4F1;
}
body.anfang-tutor .tutor-accordion-item-header.is-active {
	background-color: #1D1D1F;
	color: #3AA6FF;
}
body.anfang-tutor .tutor-avatar {
	background-color: #232326;
	border-color: #2A2A2D;
}
body.anfang-tutor .tutor-progress-bar {
	background-color: #2A2A2D;
}

/* ---- 4. マイページ左上のロゴ：テーマの旧ロゴ画像 → 共通ヘッダーと同じ A 記号＋ANFANG ---- */
.tutor-dashboard-sidebar-logo {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
.tutor-dashboard-sidebar-logo img,
.tutor-dashboard-sidebar-logo .site-title {
	display: none !important;
}
.tutor-dashboard-sidebar-logo::before {
	content: "";
	width: 22px;
	height: 22px;
	background: url(../logo/anfang-mark.svg) center / contain no-repeat;
}
.tutor-dashboard-sidebar-logo::after {
	content: "ANFANG";
	font-family: "Inter", sans-serif;
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	color: #F5F4F1;
}

body.anfang-tutor :focus-visible {
	outline: 2px solid #3AA6FF;
	outline-offset: 3px;
}