/*


 */

/* ============================================================
   目次
   1.  デザイントークン（色・サイズの共通変数）
   2.  ベース（body・見出し）
   3.  共通ヘッダー
   4.  フラッシュメッセージ
   5.  シミュレーター：カテゴリタブ
   6.  シミュレーター：選択カード
   7.  シミュレーター：結果エリア（3枚比較）
   8.  シミュレーター：詳細エリア
   9.  フォーム（入力欄・ボタン）
   10. テーブル（管理画面一覧）
   11. 管理画面：ヘッダーとアクセントボタン
   12. 管理画面：ナビ（横並び・主従関係の表現）
   13. 管理画面：一覧の操作リンク・新規追加・タブ
   14. レスポンシブ
   15. 印刷用
   16. 削除確認モーダル
   ============================================================ */


/* ============================================================
   1. デザイントークン
   色やサイズをここで一括管理。var(--navy) の形で全体から呼ぶ。
   ============================================================ */
:root {
    --navy: #1B3A5C;
    /* 主役の紺：ヘッダー・ボタン・見出し */
    --navy-dark: #12293F;
    /* 押下時などの濃い紺 */
    --teal: #2A9D8F;
    /* アクセント：印刷ボタン・画面間の移動ボタン */
    --bg: #F7F8FA;
    /* ページ背景 */
    --surface: #FFFFFF;
    /* カード・テーブルの背景 */
    --text: #2D3748;
    /* 通常の文字色 */
    --text-sub: #6B7785;
    /* 補足の文字色 */
    --border: #E2E8F0;
    /* 罫線・枠線 */
    --danger: #D9534F;
    /* 削除など危険操作の赤 */
    --radius: 10px;
    /* 角丸の標準 */
    --shadow: 0 1px 3px rgba(27, 58, 92, 0.08), 0 4px 12px rgba(27, 58, 92, 0.05);
}


/* ============================================================
   2. ベース
   ============================================================ */
* {
    box-sizing: border-box;
    /* 幅計算に余白・枠線を含める */
}

body {
    margin: 0;
    font-family: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
}

/* 見出し（タグセレクタで全ページ共通） */
h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
}

h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 20px 0 12px;
}

h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    margin: 16px 0 8px;
}


/* ============================================================
   3. 共通ヘッダー
   外側(site-header)で背景、内側(header-inner)で中央寄せ。
   ============================================================ */
.site-header {
    background: var(--navy);
    color: #fff;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* ロゴとナビを両端へ */
}

.site-logo {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-name {
    font-size: 14px;
    color: #cdd9e5;
}

/* ヘッダー内リンク */
.nav-link {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.15s;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ログアウトなどのボタン（button_toはform化されるので両方指定） */
.nav-btn,
.nav-btn button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.nav-btn button {
    border: none;
    padding: 0;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* 本文エリア（共通ヘッダー下のコンテンツ） */
.site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}


/* ============================================================
   4. フラッシュメッセージ
   操作後の通知。notice=成功(緑系)、alert=警告(赤系)。
   ============================================================ */
.flash {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 14px;
}

.flash-notice {
    background: #E6F4F1;
    color: #1D6F63;
    border: 1px solid #B5E0D8;
}

.flash-alert {
    background: #FBEAEA;
    color: #A33A37;
    border: 1px solid #F0C3C1;
}


/* ============================================================
   5. シミュレーター：カテゴリタブ
   下線が動くタブ。.active が選択中（JSが付与）。
   ============================================================ */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--text-sub);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.tab-btn:hover {
    color: var(--navy);
}

.tab-btn.active {
    color: var(--navy);
    border-bottom-color: var(--navy);
}

/* タブ中身は通常隠し、.activeだけ表示 */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}


/* ============================================================
   6. シミュレーター：選択カード
   サブスク・オプション・手数料・JS生成の各選択項目。
   ============================================================ */
.plan-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.plan-card:hover {
    border-color: var(--navy);
    box-shadow: var(--shadow);
}

.plan-card label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
}

.plan-card input[type="radio"],
.plan-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--navy);
    cursor: pointer;
}

/* ブランド・メーカー選択（タブ直下のラジオ）はピル型に */
.tab-content>label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 16px;
    margin: 0 8px 8px 0;
    cursor: pointer;
    font-size: 14px;
    transition: border-color 0.15s, background 0.15s;
}

.tab-content>label:hover {
    border-color: var(--navy);
}

.tab-content>label input {
    accent-color: var(--navy);
    cursor: pointer;
}

/* 分割回数セレクト・手数料の支払いタイミングセレクト */
.installment-select,
.fee-timing-select {
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    color: var(--text);
}

/* 機種クリアボタン（ホバーで赤くして削除系と示す） */
#clear-device {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text-sub);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    margin: 8px 0 16px;
}

#clear-device:hover {
    border-color: var(--danger);
    color: var(--danger);
}


/* ============================================================
   7. シミュレーター：結果エリア（3枚比較）
   flex:1 1 0 が「完全な3等分」のキモ。
   ============================================================ */
#results-area {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    align-items: stretch;
}

.result-card {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: border-color 0.15s, transform 0.1s;
}

.result-card:hover {
    transform: translateY(-2px);
}

/* 編集中カードを強調 */
.result-card.result-active {
    border: 2px solid var(--navy);
    background: #FBFCFE;
}

.result-card h3 {
    margin: 0 0 14px;
    font-size: 16px;
    color: var(--navy);
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

/* 内訳（項目名 …… 金額 を両端揃え） */
.result-breakdown {
    font-size: 14px;
    color: var(--text-sub);
    margin-bottom: 14px;
}

.result-breakdown div {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
}

/* 月額合計（一番目立たせる） */
.result-total {
    font-weight: 700;
    font-size: 17px;
    color: var(--navy);
    margin: 10px 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.result-today {
    font-size: 14px;
    color: var(--text-sub);
    margin-top: 10px;
}

/* カード右上の削除ボタン（親のrelativeで右上固定） */
.card-delete-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    border: none;
    background: var(--danger);
    color: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    opacity: 0.85;
}

.card-delete-btn:hover {
    opacity: 1;
}

/* 追加カード（＋枠）。点線で「追加できる」と示し、結果カードと等幅に */
.add-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

.add-toggle {
    font-size: 26px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--navy);
    background: #fff;
    color: var(--navy);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.add-toggle:hover {
    background: var(--navy);
    color: #fff;
}

.add-menu {
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.add-menu button {
    padding: 8px 14px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
}

.add-menu button:hover {
    border-color: var(--navy);
    color: var(--navy);
}


/* ============================================================
   8. シミュレーター：詳細エリア（印刷対象）
   ============================================================ */
.detail-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-top: 32px;
    box-shadow: var(--shadow);
}

.detail-box h2 {
    color: var(--navy);
    border-bottom: 2px solid var(--border);
    padding-bottom: 10px;
    margin-top: 0;
}

.detail-box h3 {
    color: var(--navy);
    margin: 16px 0 6px;
}

.detail-box ul {
    margin: 0;
    padding-left: 20px;
}

.detail-box li {
    padding: 3px 0;
    font-size: 15px;
}

.detail-total {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px solid var(--border);
}

/* 詳細エリアの注意書き */
.detail-note {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-sub);
}

/* 印刷ボタン（ティール） */
.print-btn {
    margin-top: 20px;
    background: var(--teal);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.print-btn:hover {
    background: #248277;
}


/* ============================================================
   9. フォーム（入力欄・ボタン）
   ============================================================ */
a {
    color: var(--navy);
}

main a:not(.nav-link):not(.site-logo) {
    color: var(--navy);
}

button {
    font-family: inherit;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: #fff;
}

/* 入力中は紺のリングを出す */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.1);
}

/* 送信ボタン（登録する／更新する） */
input[type="submit"] {
    background: var(--navy);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}

input[type="submit"]:hover {
    background: var(--navy-dark);
}

/* フォームの各行とラベル */
form>div {
    margin-bottom: 16px;
}

form label {
    font-weight: 600;
    font-size: 14px;
    display: block;
    margin-bottom: 6px;
}

/* 選択カード内ラベルは横並びにしたいので上書き */
form .plan-card label,
.tab-content>label,
.plan-card label {
    font-weight: normal;
    display: flex;
    margin-bottom: 0;
}

/* チェックボックスのリスト（対象ブランド等）を横並びに
   input[type=checkbox] + label =「チェックボックス直後のラベル」 */
form input[type="checkbox"]+label {
    display: inline;
    font-weight: normal;
    margin-bottom: 0;
    margin-left: 6px;
}

form input[type="checkbox"] {
    width: auto;
    vertical-align: middle;
}

/* フォーム直後の「一覧に戻る」リンクに余白 */
form+a {
    display: inline-block;
    margin-top: 16px;
}


/* ============================================================
   10. テーブル（管理画面一覧）
   ============================================================ */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 24px;
}

th {
    background: var(--navy);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
}

td {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    font-size: 14px;
}

tbody tr:hover {
    background: #F9FBFD;
}


/* ============================================================
   11. 管理画面：ヘッダーとアクセントボタン
   管理画面のヘッダーは折り返し対応。アクセントボタンは
   「シミュレーターへ」「管理画面へ」をティールで強調する。
   ============================================================ */
.admin-header-inner {
    flex-wrap: wrap;
    gap: 12px;
}

/* 画面間の移動ボタン（シミュレーターへ／管理画面へ）をティールで強調 */
.nav-link-accent {
    background: var(--teal);
}

.nav-link-accent:hover {
    background: #248277;
}


/* ============================================================
   12. 管理画面：ナビ（横並び・主従関係の表現）
   上部ナビを横並びにし、ブランド管理・メーカー管理を起点（親）、
   続くプラン・割引・機種を子として「›」を付けて従属を示す。
   「シミュレーターへ・ログアウト」は右端に寄せる。
   ============================================================ */

/* ナビ全体（折り返し可・縦中央そろえ） */
.admin-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    flex: 1
}

.admin-nav .nav-link {
    font-size: 12px;
    padding: 4px 7px;
}

/* 親メニュー（ブランド管理・メーカー管理）：太字で起点を強調 */
.admin-nav .nav-parent {
    font-weight: 700;
}

/* 子メニュー（プラン・割引・機種）：前に「›」を付けて従属を示す */
.admin-nav .nav-child::before {
    content: "›";
    margin-right: 4px;
    color: rgba(255, 255, 255, 0.5);
}

/* グループ間の区切り線（薄い縦棒） */
.nav-divider {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.25);
    margin: 0 6px;
}

/* シミュレーターへ・ログアウトを右端に寄せるグループ */
.nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}


/* ============================================================
   13. 管理画面：一覧の操作リンク・新規追加・タブ
   ============================================================ */

/* テーブル内の編集リンク・削除ボタン */
td a {
    margin-right: 8px;
    font-size: 13px;
    text-decoration: none;
}

td a:hover {
    text-decoration: underline;
}

td .button_to {
    display: inline;
}

td button {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--danger);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

td button:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

/* 新規追加リンクを紺ボタン化（紺地に白文字を !important で確定） */
.site-main>a[href*="new"] {
    display: inline-block;
    background: var(--navy);
    color: #fff !important;
    padding: 8px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.site-main>a[href*="new"]:hover {
    background: var(--navy-dark);
}

/* 管理画面のブランド/メーカータブ（リンク型）。.tab-btnと見た目を統一 */
.tabs a {
    padding: 10px 18px;
    color: var(--text-sub);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.tabs a:hover {
    color: var(--navy);
}

.tabs a.active {
    color: var(--navy);
    border-bottom-color: var(--navy);
}


/* ============================================================
   14. レスポンシブ（768px以下）
   ============================================================ */
@media (max-width: 768px) {

    /* シミュレーター結果を縦並びに */
    #results-area {
        flex-direction: column;
    }

    /* 共通ヘッダーを縦並びに */
    .header-inner {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    h1 {
        font-size: 22px;
    }

    /* 管理画面：ナビをスマホ用に整理 */
    .admin-nav {
        gap: 2px;
    }

    .admin-nav .nav-link {
        font-size: 11px;
        padding: 4px 6px;
    }

    .nav-right {
        margin-left: 0;
        width: 100%;
        padding-top: 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* 管理画面：テーブル → カード型変換 */
    /* thead を非表示にし、各 tr をカードとして表示する。 */
    /* td::before で列名をラベルとして表示。 */
    table {
        box-shadow: none;
        background: transparent;
    }

    thead {
        display: none;
    }

    tbody tr {
        display: block;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 12px 14px;
        margin-bottom: 12px;
        box-shadow: var(--shadow);
    }

    tbody tr:hover {
        background: var(--surface);
    }

    td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 5px 0;
        border-top: none;
        font-size: 14px;
        gap: 8px;
    }

    /* 区切り線：最初のtd以外の上に引く */
    td+td {
        border-top: 1px solid var(--border);
    }

    /* 列名ラベル（::before で自動挿入） */
    td::before {
        content: attr(data-label);
        font-size: 12px;
        color: var(--text-sub);
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* 操作列（編集・削除）は横並びで下に */
    td:last-child {
        justify-content: flex-end;
        gap: 8px;
        padding-top: 10px;
        margin-top: 4px;
    }

    td:last-child::before {
        display: none;
    }

    td a,
    td button {
        padding: 6px 14px;
        border-radius: 6px;
        font-size: 13px;
        text-decoration: none;
    }

    td button {
        padding: 6px 14px;
    }
}


/* ============================================================
   15. 印刷用（@media print）
   詳細エリア以外を隠し、詳細だけを紙に出す。
   項目が多くても1枚に収まるよう、余白とフォントを詰める。
   ============================================================ */
@media print {

    .site-header,
    .tabs,
    .tab-content,
    #results-area,
    .print-btn {
        display: none !important;
    }

    .detail-box {
        box-shadow: none;
        border: none;
        padding: 0;
        margin-top: 0;
    }

    /* 印刷時はフォントと余白を詰めてコンパクトに */
    .detail-box h2 {
        font-size: 16px;
        margin-bottom: 8px;
        padding-bottom: 6px;
    }

    .detail-box h3 {
        font-size: 13px;
        margin: 8px 0 4px;
    }

    .detail-box li {
        font-size: 12px;
        padding: 1px 0;
    }

    .detail-box ul {
        margin: 0;
    }

    .result-total {
        font-size: 14px;
        margin: 4px 0;
        padding-top: 6px;
    }

    .detail-total {
        margin-top: 10px;
        padding-top: 8px;
    }

    .detail-note {
        font-size: 11px;
        margin-top: 8px;
    }

    /* ページ全体の余白も詰める */
    @page {
        margin: 10mm;
    }
}


/* ============================================================
   16. 削除確認モーダル
   普段は非表示。削除ボタンを押すと中央に表示し、背景を暗転。
   JSが is-open クラスを付けると表示される。
   ============================================================ */

/* 背景の暗いレイヤー（普段は非表示） */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    /* is-open 時に中央寄せ */
    align-items: center;
    justify-content: center;
}

/* 開いているとき（JSが is-open を付ける） */
.modal-overlay.is-open {
    display: flex;
}

/* ダイアログ本体 */
.modal {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 28px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-title {
    margin: 0 0 12px;
    font-size: 18px;
    color: var(--navy);
}

.modal-message {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--text);
    line-height: 1.7;
}

/* ボタンを右寄せで横並び */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-btn {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
}

/* キャンセル（白） */
.modal-btn-cancel {
    background: #fff;
    color: var(--text-sub);
}

.modal-btn-cancel:hover {
    background: #F1F5F9;
}

/* 削除する（赤） */
.modal-btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.modal-btn-danger:hover {
    background: #C9302C;
}