/* すずかけ利用予定登録 共通スタイル（スマホ優先。設計00・2章: ビルド工程なしの自作CSS） */

:root {
    --color-text: #1f2937;
    --color-muted: #6b7280;
    --color-border: #d7dfea; /* 入力欄・表の罫線（コントラスト確保のため濃いめ） */
    --color-border-light: #e5ebf3; /* カード枠（面を区切るだけの薄い線） */
    --color-bg: #f4f7fc;
    --color-surface: #ffffff;

    --color-primary: #1a5fd6;
    --color-primary-dark: #1547a8;
    --color-primary-bg: #e8f0fd; /* 淡い青。イベント・情報バナーの下地 */

    --color-danger: #c62828;
    --color-danger-bg: #fdeaea; /* 淡い赤。休み・未登録の下地 */
    --color-danger-border: #e9b6b6;
    --color-danger-text: #a72f2f; /* 淡い赤の下地に載せる読みやすい濃色 */

    --color-success: #2e7d32; /* 実績（来所記録・実際に来た時間）は緑のまま */
    --color-success-bg: #eaf5eb;
    --color-success-border: #b6d8b6;

    --color-notice-bg: #fff8e1; /* 期限切れ案内などのクリーム色 */
    --color-notice-border: #f0e2a8;
    --color-notice-text: #7a5c1e;

    --color-neutral-bg: #eef1f5; /* 欠席行・閉所日など中立のグレー面 */

    --color-sunday: #c62828;
    --color-saturday: #1565c0;

    --radius-sm: 0.5rem; /* ボタン・入力欄 */
    --radius-md: 0.75rem; /* カード・モーダル */

    --shadow-card: 0 1px 2px rgba(16, 32, 64, 0.04), 0 1px 3px rgba(16, 32, 64, 0.06);
    --shadow-popover: 0 8px 24px rgba(16, 32, 64, 0.12);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---- ヘッダー ---- */

.app-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
}

.app-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0; /* 親名・メールと同居するため、狭い画面ではタイトル側が縮む */
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

.app-nav-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-nav-logo {
    display: block;
    width: 2.2rem;
    height: 2.2rem;
    flex: none;
}

/* 代表の親の名前・メールアドレス(要件02-1)。狭い画面では名前・メールとも省略記号で切る
   （家庭名は自由入力の最大255字。名前側が折り返すとヘッダーの高さが崩れるため） */
.app-nav-user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
    margin-left: auto;
    line-height: 1.3;
}

.app-nav-user-name,
.app-nav-user-email {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-nav-user-name {
    font-size: 0.85rem;
    font-weight: 600;
}

.app-nav-user-email {
    font-size: 0.7rem;
    color: var(--color-muted);
}

/* 狭い画面でも「すずかけ利用予定登録」が省略されずに収まるよう、両側を詰める */
@media (max-width: 30rem) {
    .app-nav-brand {
        font-size: 0.85rem;
    }

    .app-nav-user-name,
    .app-nav-user-email {
        max-width: 8.5rem;
    }

    .app-nav-user-email {
        font-size: 0.65rem;
    }
}

.app-nav-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-link {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border: none;
    background: none;
    font-size: 0.9rem;
    color: var(--color-muted);
    text-decoration: none;
    cursor: pointer;
}

.nav-link:hover,
.nav-link.is-active {
    color: var(--color-text);
}

.page-header {
    padding: 1rem;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
}

.page-main {
    padding: 1rem;
    max-width: 60rem;
    margin: 0 auto;
}

/* ---- 認証系（ログイン・パスワード設定） ---- */

.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.auth-app-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 1.3rem;
    text-align: center;
    color: var(--color-primary);
}

.auth-logo {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    padding: 1.5rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.auth-description {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* ---- フォーム ---- */

.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.form-input {
    display: block;
    width: 100%;
    padding: 0.55rem 0.7rem;
    font-size: 1rem;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.form-input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -1px;
}

.form-input:disabled {
    background-color: var(--color-bg);
    color: var(--color-muted);
}

.form-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.form-error {
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--color-danger);
}

/* 入力欄の下に添える補足文 */
.form-hint {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.25rem;
}

/* 保存を横幅いっぱいの主ボタンにする（要件02-1）。DOM順も保存が先のため、タブ順と見た目が一致する */
.form-actions-stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

.session-status {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--color-success);
}

/* ---- ボタン・リンク ---- */

.btn {
    display: inline-block;
    padding: 0.55rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* フォーカスリングは部品をまたいで共通（.admin-action は管理者トップの機能ボタン） */
.btn:focus-visible,
.admin-action:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

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

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

.btn-secondary {
    color: var(--color-text);
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

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

.btn-danger {
    color: #ffffff;
    background-color: var(--color-danger);
}

.text-link {
    font-size: 0.9rem;
    color: var(--color-muted);
    text-decoration: underline;
}

.text-link:hover {
    color: var(--color-primary);
}

/* タップ領域を24px以上に確保する（WCAG 2.5.8）。0.9rem×行間1.6=23pxでわずかに足りない。
   <summary> はマーカーが消えるため display を変えず対象外にする */
a.text-link,
button.text-link {
    display: inline-block;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

/* <button class="text-link"> はボタン既定の枠・背景・行間が残るため打ち消し、aと同じ見た目・高さに揃える。
   line-height を継承しないと <button> の既定 normal が効き、隣のリンクより行が詰まってタップ領域が狭くなる */
button.text-link {
    /* padding のショートハンドを使うと、上の a.text-link,button.text-link で確保した
       上下パディング（タップ領域）まで打ち消してしまうため左右のみ指定する */
    padding-left: 0;
    padding-right: 0;
    border: none;
    background: none;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* ---- カレンダー（利用者トップ） ---- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 月ナビを常にツールバーの中央へ置く3列グリッド（左=子ども切替・中央=月ナビ・右=空き）。
   flex の space-between だと子ども切替の幅に引きずられて月ナビが中央からずれる */
.calendar-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

/* 狭い画面では横に並ばないため、子ども切替の下に月ナビを中央揃えで積む */
@media (max-width: 39.99rem) {
    .calendar-toolbar {
        grid-template-columns: 1fr;
    }
}

/* 子ども切替（要件02-1: ドロップダウン）。左に子どものアイコンを添える */
.calendar-child-select {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.calendar-child-select .form-input {
    width: auto;
    min-width: 8rem;
    font-weight: 600;
}

/* 子どもアイコンは単色PNG。マスクとして使い、文字色に追従させる。
   マスク未対応のブラウザでは currentColor の四角が出てしまうため、@supports で出し分ける */
.child-select-avatar {
    display: none;
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .child-select-avatar {
        display: block;
        width: 1.6rem;
        height: 1.6rem;
        flex: none;
        background-color: var(--color-primary);
        -webkit-mask: url("../images/child.png") center / contain no-repeat;
        mask: url("../images/child.png") center / contain no-repeat;
    }
}

.calendar-month-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* 管理者トップは月ナビ単独のため、明示的に中央列へ置く（利用者側も同じ列で揃う） */
    grid-column: 2;
    justify-self: center;
}

@media (max-width: 39.99rem) {
    .calendar-month-nav {
        grid-column: 1;
    }
}

.calendar-month-label {
    font-size: 1.05rem;
    font-weight: 700;
    min-width: 7rem;
    text-align: center;
}

/* まとめて登録ボタン（ツールバー右列） */
.calendar-bulk-open {
    grid-column: 3;
    justify-self: end;
}

@media (max-width: 39.99rem) {
    .calendar-bulk-open {
        grid-column: 1;
        justify-self: stretch;
    }
}

/* まとめて登録モーダルの曜日チェック（タップしやすいチップ型） */
.bulk-weekday-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.bulk-weekday {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.calendar-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

.calendar-nav-btn:hover {
    background-color: var(--color-primary-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.calendar-empty {
    padding: 2rem 0;
    text-align: center;
    color: var(--color-muted);
}

/* カレンダー全体を1枚のカードとして見せる。overflow:hidden でセルの外周を角丸に収める */
.calendar-grid {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* スマホではマスの幅を最大化して予定の文字数を稼ぐため、.page-main の左右パディング(1rem)を
   打ち消して画面幅いっぱいに広げる。画面端に接するので角丸と左右の枠線は外す */
@media (max-width: 39.99rem) {
    .calendar-grid {
        margin-inline: -1rem;
        border-inline: none;
        border-radius: 0;
    }
}

.is-sunday {
    color: var(--color-sunday);
}

.is-saturday {
    color: var(--color-saturday);
}

/* 週ごとに独立したgridのため、1fr（＝minmax(auto,1fr)）だと中身の長い週だけ列幅が変わり
   週をまたいで列がずれる。minmax(0,1fr) で下限を0にし、中身に依らず常に7等分する */
.calendar-weekdays,
.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekday {
    padding: 0.4rem 0;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.calendar-cell {
    display: flex;
    flex-direction: column;
    min-height: 5.5rem;
    padding: 0.2rem 0.25rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    margin: -1px 0 0 -1px; /* 罫線の重なりを詰める */
    font-size: 0.75rem;
    min-width: 0; /* grid item 既定の min-width:auto を外し、長い行を列外へはみ出させない */
    overflow: hidden;
}

.calendar-cell.is-outside {
    background-color: var(--color-bg);
    color: var(--color-muted);
}

.calendar-cell.is-outside .calendar-day-number {
    color: var(--color-muted);
}

.calendar-cell.is-closed {
    background-color: var(--color-neutral-bg);
}

/* line-height は .is-today の丸の直径（1.6em）と同値。
   今日のマスだけ日付が高くなって以降の段が下へずれるのを防ぐ */
.calendar-day-number {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.6;
}

/* 今日は日付の数字を濃い青の丸で囲み、文字色を白へ反転させる。
   flex item は inline-flex が flex に blockify されるため、align-self で数字の幅まで縮める */
.calendar-cell .calendar-day-number.is-today {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    height: 1.6em;
    border-radius: 999px;
    background-color: var(--color-primary-dark);
    color: var(--color-surface);
}

/* 段は上端から順に固定配置する。利用者は4段・管理者は3段を、内容が無くても常に描画する（要件02-1-3「位置を揃える」） */
.calendar-cell-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.25rem; /* 段間に余裕を持たせる。全段一律に効くのでマス間の整列は保たれる */
    margin-top: 0.5rem; /* 日付の数字と1段目の間にゆとりを持たせる */
    min-width: 0;
}

/* 収まらない予定は「…」ではなく右端で単純に見切る（Googleカレンダーと同じ挙動）。
   「…」だと狭いマスで2文字しか読めないため、読める文字数を優先する。
   min-height は空の段にも高さを与え、隣り合うマスで各段のY座標を一致させるために必要
   （line-height と同値にして、空段と実内容の段の高さを揃える） */
.calendar-row {
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.35;
    min-height: 1.35em;
}

.calendar-row-closed,
.calendar-row-absent {
    color: var(--color-muted);
}

/* 実績（来所記録）は緑。デザイン方針の配色に合わせる */
.calendar-row-actual {
    color: var(--color-success);
}

.calendar-row-event {
    color: var(--color-primary);
    font-weight: 600;
}

/* 「来」「帰」の見出し漢字だけを色付き太字にし、時間そのものは本文色・通常太さで読ませる */
.calendar-mark {
    font-weight: 600;
}

.calendar-mark-arrival {
    color: var(--color-success);
}

.calendar-mark-departure {
    color: var(--color-primary);
}

/* 行の色指定をやめたため、「迎」の青は個別に指定する */
.calendar-pickup {
    margin-left: 0.1rem;
    color: var(--color-primary);
}

/* マスはボタン化してクリックでモーダルを開く。既定のボタン外観は打ち消す。
   font ショートハンドは font-size も含み .calendar-cell の 0.75rem を潰すため、
   font-family だけを継承させる（font: inherit にすると本文の16pxで描画されてしまう）。
   line-height はUA既定の normal が残ると管理者の <a> セルより行間が詰まるため、本文の1.6を継承させる */
button.calendar-cell {
    width: 100%;
    text-align: left;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
    cursor: pointer;
}

button.calendar-cell:hover {
    background-color: var(--color-primary-bg);
}

button.calendar-cell.is-outside:hover {
    background-color: var(--color-bg);
}

/* ---- 管理者トップ（設定用カレンダー） ---- */

/* 機能ボタン: アイコン＋主ラベル＋サブラベルの2行構成カード。
   画面幅に応じて列数が変わるよう、固定列数ではなく auto-fill で敷き詰める */
.admin-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.admin-action {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
    font-family: inherit;
    /* 「予定を見る」だけ <button> で描画される。UA既定の line-height: normal のままだと
       隣の <a> カード3枚と行間がずれるため、本文の1.6を継承させて揃える */
    line-height: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.admin-action:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-bg);
}

.admin-action-icon {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--color-primary);
}

.admin-action-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-action-label {
    font-weight: 700;
    font-size: 0.95rem;
}

.admin-action-sub {
    font-size: 0.75rem;
    color: var(--color-muted);
}

/* 前回の催促メール送信結果（設計04-7）。失敗ありは has-failed で目立たせる */
.reminder-result {
    margin-bottom: 1rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-size: 0.9rem;
}

.reminder-result-label {
    font-weight: bold;
    margin-right: 0.5rem;
}

.reminder-result.has-failed {
    border-color: var(--color-danger);
    background: var(--color-danger-bg);
}

.reminder-result-warning {
    display: block;
    margin-top: 0.3rem;
    color: var(--color-danger);
}

/* 失敗した家庭の一覧（詳細ボタンで開閉） */
.reminder-result-details {
    margin-top: 0.3rem;
}

.reminder-result-details summary {
    cursor: pointer;
    color: var(--color-danger);
    font-weight: bold;
    width: fit-content;
}

.reminder-result-details p {
    margin: 0.3rem 0 0;
}

.reminder-result-details ul {
    margin: 0.3rem 0 0;
    padding-left: 1.4rem;
}

/* 臨時開所（既定閉所→開所へ上書き）・来る時間の登録日の目印。
   primary が青になり土曜色と見分けが付かなくなったため、開所は緑（閉所のグレーと対比）にする */
.calendar-row-open {
    color: var(--color-success);
}

.calendar-row-entry {
    color: var(--color-success); /* 利用者画面の「来」の漢字と同じ緑で揃える */
}

/* 管理者カレンダーのイベント案内は黒文字にする（利用者画面の青とは別扱い） */
.admin-calendar .calendar-row-event {
    color: var(--color-text);
}

/* ---- 日別詳細モーダル（<dialog>） ---- */

.schedule-modal {
    width: min(28rem, 92vw);
    padding: 1.25rem;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-popover);
}

.schedule-modal::backdrop {
    /* ::backdrop は古いブラウザ（iOS 16のSafari等）がCSS変数を継承しないため、
       A18の例外として意図的に直書きする（var() だと暗幕が透明になる端末が出る） */
    background-color: rgba(16, 32, 64, 0.45);
}

/* スマホではボトムシート（画面下から出る）にする。4つの <dialog> すべてが
   .schedule-modal を共有しているため、CSSだけで一括適用できる */
@media (max-width: 39.99rem) {
    .schedule-modal {
        width: 100%;
        max-width: none;
        margin: auto auto 0; /* 上autoで下寄せ */
        max-height: 85vh;
        overflow-y: auto;
        border-bottom: none;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        /* ホームバー領域を避ける（未対応ブラウザでは env() が 0 になる） */
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }

    /* シート上端のつまみ。Bladeを変えずに出すため疑似要素で描く */
    .schedule-modal::before {
        content: "";
        display: block;
        width: 2.5rem;
        height: 0.25rem;
        margin: -0.35rem auto 0.75rem;
        background-color: var(--color-border);
        border-radius: 999px;
    }
}

.schedule-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.schedule-modal-title {
    margin: 0;
    font-size: 1.1rem;
}

.schedule-modal-close {
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-muted);
    cursor: pointer;
}

.schedule-note {
    margin: 0;
    font-size: 0.95rem;
}

/* 保存失敗時のエラーサマリー（モーダル内） */
.form-errors {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    background-color: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--color-danger-text);
}

.form-errors p {
    margin: 0 0 0.4rem;
}

.form-errors p:last-child {
    margin-bottom: 0;
}

/* 期限切れ案内のクリーム色ボックス（設計04-2） */
.notice-box {
    padding: 0.9rem 1rem;
    background-color: var(--color-notice-bg);
    border: 1px solid var(--color-notice-border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.notice-box p {
    margin: 0 0 0.4rem;
}

.notice-box p:last-child {
    margin-bottom: 0;
}

/* ---- ハンバーガーメニュー（素のHTML <details>。設計00・2章） ---- */

.nav-menu {
    position: relative;
}

/* 既定の三角マーカーを消してハンバーガーアイコンだけを見せる */
.nav-menu-trigger {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    cursor: pointer;
}

.nav-menu-trigger::-webkit-details-marker {
    display: none;
}

/* 3本線アイコン（中央の線を実体・上下を疑似要素で描く） */
.nav-menu-bars,
.nav-menu-bars::before,
.nav-menu-bars::after {
    display: block;
    width: 1.4rem;
    height: 2px;
    background-color: var(--color-text);
}

.nav-menu-bars {
    position: relative;
}

.nav-menu-bars::before,
.nav-menu-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-menu-bars::before {
    top: -6px;
}

.nav-menu-bars::after {
    top: 6px;
}

.nav-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    min-width: 12rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-popover);
    z-index: 50;
    overflow: hidden;
}

.nav-menu-item {
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
    border: none;
    background: none;
    font-size: 0.95rem;
    text-align: left;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
}

.nav-menu-item:hover {
    background-color: var(--color-primary-bg);
    color: var(--color-primary);
}

/* ---- アカウント系画面（パスワード・メール変更） ---- */

.account-page {
    max-width: 28rem;
    margin: 0 auto;
}

.page-title {
    margin: 0 0 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text);
}

.account-note {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* ---- 集計表（ルート別・学年別。要件03-2） ---- */

.roster-head {
    margin-bottom: 1rem;
}

.roster-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.roster-subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.95rem;
    color: var(--color-muted);
}

.roster-empty {
    color: var(--color-muted);
}

/* タブ（タブ分け表示のみ） */
.roster-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.roster-tab {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
}

.roster-tab:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.roster-tab.is-active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.roster-group {
    margin-bottom: 1.5rem;
}

.roster-group-label {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
}

/* タブ分け表示ではグループ見出しはタブと重複するため隠す */
.roster-tabs .roster-group-label {
    display: none;
}

.roster-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.roster-table th,
.roster-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.roster-table th {
    font-weight: 600;
    color: var(--color-muted);
    background-color: var(--color-bg);
}

/* 欠席=グレーアウト、未登録=薄い赤（要件03-2の状態表示） */
.roster-row.is-absent {
    background-color: var(--color-neutral-bg);
    color: var(--color-muted);
}

.roster-row.is-unregistered {
    background-color: var(--color-danger-bg);
}

/* 背景色が印刷されない場合に備え、文字でも判別できるようにする（要件03-4） */
.roster-status-label {
    font-weight: 600;
}

/* 印刷専用キャプション（画面では出さない。印刷時に各シートへ日付＋グループ名を残す） */
.roster-print-caption {
    display: none;
}

/* 一覧表示（学年別・ルート別共通）: 画面でも印刷（A4横・4列）と同じ段組みで
   全員を一望できるようにする。幅が足りない画面では自動で段数が減る。 */
.roster-list .roster-groups {
    columns: 16rem 4;
    column-gap: 2.5rem;
    column-rule: 1px solid var(--color-border-light); /* 列の境目を明示して隣の表と混ざらないようにする */
}

/* 4列を出せる幅へ広げる（:has非対応ブラウザは60remのまま＝段数が減るだけで閲覧は可能） */
@supports selector(:has(*)) {
    .page-main:has(.roster-list) {
        max-width: 90rem;
    }
}

.roster-list .roster-group {
    break-inside: avoid;
    margin-bottom: 1rem;
}

.roster-list .roster-table {
    font-size: 0.75rem;
    line-height: 1.35;
}

.roster-list .roster-table th,
.roster-list .roster-table td {
    padding: 0.15rem 0.3rem;
}

/* 紙の一覧と同じく「1人=1行」を保つ。見出し行は出さず、セル内の折り返しを禁止する。
   迎えの情報だけは時間の下の行へ落とし、狭い列幅でもはみ出さないようにする */
.roster-list .roster-table thead {
    display: none;
}

.roster-list .roster-table td {
    white-space: nowrap;
}

.roster-list .roster-pickup {
    display: block;
}

/* ---- 集計表の印刷用整形（要件03-2・03-4／設計03-4。@media print でA4化） ---- */

/* 既定はA4縦。一覧表示のみ横向き（下の page: 指定で切り替える） */
@page {
    size: A4 portrait;
    margin: 12mm 10mm;
}

@page roster-landscape {
    size: A4 landscape;
    margin: 8mm;
}

@media print {
    /* 画面専用のナビ・タブUI・ヘッダ枠は印刷しない */
    .app-nav,
    .roster-tab-nav {
        display: none !important;
    }

    body {
        background-color: #fff;
    }

    .page-main {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* グループ見出しはキャプションに集約するため印刷では隠す */
    .roster-group-label {
        display: none !important;
    }

    /* 各表に日付＋グループ名のキャプションを出す（手渡し用に各シートで判別可能に） */
    .roster-print-caption {
        display: table-caption;
        margin-bottom: 0.3rem;
        font-size: 0.95rem;
        font-weight: 700;
        text-align: left;
    }

    /* 状態色（欠席グレー・未登録薄赤）を印刷でも再現する。
       背景が印刷されないプリンタ向けの文字併記（欠席／未登録）はマークアップ側で担保済み。 */
    .roster-row.is-absent,
    .roster-row.is-unregistered {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* 罫線をやや濃くして白黒印刷でも行が追えるようにする（画面用トークンより意図的に濃い） */
    .roster-table th,
    .roster-table td {
        border-bottom: 1px solid #999999;
    }

    /* タブ分け表示: 画面で隠している他グループも全て出し、1グループ＝1枚にする */
    .roster-tabs .roster-group[hidden] {
        display: block !important;
    }

    .roster-tabs .roster-group {
        margin-bottom: 0;
        break-after: page;
    }

    .roster-tabs .roster-group:last-child {
        break-after: auto;
    }

    /* 一覧表示（学年別・ルート別共通）: A4横向き・4列。グループの切り替わりにスペース
       （要件03-2-2。ルート別も同レイアウトにするのは2026-07-09の発注者決定） */
    .roster-list {
        page: roster-landscape;
    }

    .roster-list .roster-groups {
        column-width: auto; /* 画面用の最小幅指定を打ち消し、必ず4列にする */
        column-count: 4;
        column-gap: 8mm;
        column-rule: 0.2mm solid #cccccc; /* 白黒印刷でも列の境目が追える薄い区切り線 */
    }

    /* グループは紙見本と同じく列をまたいで続けてよい。break-inside: avoid にすると
       タイトル下の残り高さに収まらないグループが次ページへ押し出され、1ページ目が空白になる */
    .roster-list .roster-group {
        break-inside: auto;
        margin-bottom: 4mm;
    }

    /* 最大40人のグループ＋見出しが1列（A4横の紙面高）に収まる行の高さにする（要件03-2-2） */
    .roster-list .roster-table {
        font-size: 8pt;
        line-height: 1.25;
    }

    .roster-list .roster-table th,
    .roster-list .roster-table td {
        padding: 0.3mm 1mm;
    }

    .roster-list .roster-print-caption {
        font-size: 9pt;
        margin-bottom: 1mm;
    }
}

/* ---- 受付登録画面（今日の来所チェック。要件03-3） ---- */

.check-in-head {
    margin-bottom: 1rem;
}

.check-in-title {
    margin: 0;
    font-size: 1.2rem;
}

.check-in-date {
    margin: 0.25rem 0 0;
    color: var(--color-muted);
}

.check-in-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.check-in-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
}

/* 名前クリック=来所記録の送信ボタン。素早くタップできるよう大きめに */
.check-in-arrive {
    margin: 0;
}

.check-in-name {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 8.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
}

.check-in-class {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.check-in-person {
    font-weight: 600;
}

.check-in-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    font-size: 0.9rem;
}

.check-in-route {
    color: var(--color-muted);
}

.check-in-status {
    font-weight: 600;
}

/* 来所記録済み（実際に来た時間あり）の目印。実績はカレンダーの .calendar-row-actual と同じ緑で揃える */
.check-in-actual {
    font-weight: 600;
    color: var(--color-success);
}

/* 欠席の行はグレーアウト（集計表と同じ扱い） */
.check-in-row.is-absent {
    background-color: var(--color-neutral-bg);
    color: var(--color-muted);
}

/* えんぴつ（当日変更を開く） */
.check-in-edit {
    margin-left: auto;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: 1.1rem;
    cursor: pointer;
}

/* 実際に来た時間の入力＋クリアボタン */
.check-in-actual-edit {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.check-in-empty {
    color: var(--color-muted);
}

/* ============================================================
   会員管理（家庭一覧・追加・情報変更・進級処理）。T13
   ============================================================ */

/* 保存成功などの案内（緑系。エラーの form-errors と対で使う） */
.form-status {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    background-color: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--color-success);
}

.households-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.households-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.households-note {
    margin-bottom: 1rem;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.households-subhead {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.05rem;
}

.households-empty {
    color: var(--color-muted);
}

/* 家庭カード（1家庭＝1枠） */
.household-card {
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.household-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.household-identity {
    display: flex;
    flex-direction: column;
}

.household-name {
    font-weight: 600;
    font-size: 1.05rem;
}

.household-email {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.household-ops {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    align-items: center;
}

.household-children {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.household-child {
    border-top: 1px solid var(--color-border-light);
}

.household-child.is-suspended {
    color: var(--color-muted);
}

.household-child-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    padding: 0.5rem 0;
    cursor: pointer;
}

.household-child-class {
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
}

.household-child-name {
    font-weight: 500;
}

.household-child-route {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.household-child-suspended {
    padding: 0.05rem 0.4rem;
    background-color: var(--color-neutral-bg);
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

.household-child-form,
.household-add-child form {
    padding: 0.75rem 0 0.25rem;
}

.household-add-child {
    border-top: 1px solid var(--color-border-light);
    padding-top: 0.5rem;
}

/* 家庭追加の子ども入力欄 */
.child-row {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.form-row {
    display: flex;
    gap: 0.75rem;
}

.form-row .form-group {
    flex: 1;
}

.form-actions-left {
    justify-content: flex-start;
}

/* 進級処理 */
.promotion-explain ul {
    margin: 0.5rem 0 1rem;
    padding-left: 1.25rem;
}

.promotion-explain li {
    margin-bottom: 0.35rem;
}

.promotion-count {
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.promotion-blocked {
    padding: 0.9rem 1rem;
    background-color: var(--color-notice-bg);
    border: 1px solid var(--color-notice-border);
    border-radius: var(--radius-sm);
    color: var(--color-notice-text);
}

/* 設定画面・下校ルート管理（T14） */
.settings-group {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.settings-group legend {
    padding: 0 0.5rem;
    font-weight: 600;
}

.settings-note {
    margin-top: 0.25rem;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.settings-divider {
    margin: 1.5rem 0;
    border: none;
    border-top: 1px solid var(--color-border-light);
}

.settings-links {
    display: flex;
    gap: 0.75rem;
}

.section-title {
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.home-route-hint {
    margin-bottom: 0.75rem;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.home-route-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.home-route-item {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.home-route-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.home-route-move {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.home-route-usage {
    margin-top: 0.5rem;
    color: var(--color-notice-text);
    font-size: 0.85rem;
}

.home-route-empty {
    list-style: none;
    color: var(--color-muted);
}