/* 既定（未指定時） */
:root {
    --header: #0d6efd;
    --accent: #0d6efd;
    --accent-contrast: #fff;

    /* 背景ルール */
    --body-bg: #ffffff; /* 受講者/施設者の既定: 白 */
    --card-bg: #f1f1f4; /* カード内は常にこの色 */
}

/* 管理者：ヘッダーは濃いグレー、ボタンは濃いブルー、背景は #f1f1f4 */
.theme-admin {
    --header: #272c2f;
    --accent: #0c5c9f;
    --accent-contrast: #fff;

    --body-bg: #f1f1f4; /* 管理者のときはページ背景も #f1f1f4 */
    /* --card-bg は共通 #f1f1f4 のまま */
}

/* 受講者：ヘッダーもボタンも青（ページ背景は白のまま） */
.theme-student {
    --header: #2ea7e0;
    --accent: #2ea7e0;
}

/* 施設者：ヘッダーもボタンもオレンジ（ページ背景は白のまま） */
.theme-facility {
    --header: #e0722e;
    --accent: #e0722e;
}

/* ========= 共通レイアウト ========= */
body {
    background: var(--body-bg);
    font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

.header-bar {
    background: var(--header);
}
.header-ribbon {
    background: var(--header);
    color: #fff;
    padding: 0.6rem 1rem;
    text-align: center;
    max-width: 900px;
    margin: 0 auto; /* 中央寄せ */
}

/* タイトルの装飾（ヘッダー内） */
.header-title {
    color: #fff;
    margin: 0;
    line-height: 1.35;
    text-align: center;
}

.header-ribbon h1,
.header-title {
    text-wrap: balance;
}

/* スマホ時は文字サイズと行間を少し詰める */
@media (max-width: 576px) {
    .header-ribbon h1 {
        /* 受講者・施設者 */
        font-size: 1.05rem;
        line-height: 1.35;
    }
    .header-title {
        /* 管理者 */
        font-size: 1.15rem;
        line-height: 1.35;
    }

    /* 1行目を絶対に折り返したくないとき */
    .nowrap {
        white-space: nowrap;
    }
}

/* ログインカード等 */
.card {
    background-color: var(--card-bg) !important; /* カード背景を統一 */
    border: 0;
    border-radius: 12px;
}
.card-body {
    background-color: var(--card-bg) !important; /* 念のため card-body も統一 */
}
.form-control {
    padding: 0.75rem 1rem;
}

/* 強調色（見出しやリンクの色） */
.text-accent {
    color: var(--accent);
}

/* ボタン（Bootstrapを確実に上書き） */
.btn-accent {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--accent-contrast);
}
.btn.btn-accent {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--accent-contrast) !important;
}
.btn.btn-accent:hover {
    filter: brightness(0.95);
}
.btn.btn-accent:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 40%, white);
    outline-offset: 2px;
}

/* 上部中見出し（facility の「実習受入れ施設様専用サイト」等） */
.page-tagline {
    font-size: 28px;
    color: var(--header);
    text-align: center;
    margin: 24px 0 16px;
}

/* ログインボタンだけ角丸なし */
.btn-accent.login-btn,
.btn-accent.login-btn:hover,
.btn-accent.login-btn:focus,
.btn-accent.login-btn:active {
    border-radius: 0 !important;
}

.muted-link {
    color: #a0a0a0 !important;
    text-decoration: none !important;
}
.muted-link:hover,
.muted-link:focus {
    color: #8a8a8a !important;
    text-decoration: none !important;
}

.muted-note {
    color: #a0a0a0;
    font-size: 0.875rem;
}

/* ========= マイページ用スタイル（受講生・施設者共通） ========= */

/* 通常時（PC） */
.mypage-subtitle {
    font-size: 1.5rem; /* h4相当 */
    font-weight: normal;
}

.mypage-title {
    font-size: 2rem; /* h2相当 */
}

/* スマホ時 */
@media (max-width: 576px) {
    .mypage-subtitle {
        font-size: 1rem; /* h6相当 */
    }

    .mypage-title {
        font-size: 1.5rem; /* h4相当 */
    }
}

/* テーブルヘッダーの太字を解除 */
.table th {
    font-weight: normal;
}