/* =============================================
   ALL管理システム - Admin CSS
   ============================================= */

/* CSS Variables（ALL管理カラー体系・Decision 205：A+B折衷。色は :root 一元定義・各画面は変数参照） */
:root {
    /* ── 共通クローム ── */
    --color-bg: #F7F7FC;              /* ページ背景 */
    --color-content-bg: #FFFFFF;      /* コンテンツ（カード）背景 */
    --color-white: #ffffff;
    /* ヘッダー（水色帯廃止・白＋下線） */
    --color-header: #FFFFFF;          /* 旧：水色帯 → 白 */
    --color-header-dark: #F0F1F6;
    --color-header-text: #2E3347;
    --color-header-border: #E5E7F1;
    /* サイドバー（インディゴ） */
    --color-sidebar-bg: #2E315F;
    --color-sidebar-text: #D9DDF0;
    --color-sidebar-section: #9EA5C7; /* 見出し文字 */
    --color-sidebar-hover: #3A3D73;
    --color-sidebar-active: #4F46A5;  /* 選択中 背景 */
    --color-sidebar-active-text: #FFFFFF;
    --color-sidebar-accent: #AFA4FF;  /* 選択中 左3pxアクセント */
    /* アクセント・ボタン */
    --color-primary: #7667D9;         /* メインアクセント */
    --color-primary-dark: #6858CB;    /* 主ボタン hover */
    --color-primary-light: #E7E3F8;
    --color-hover: #EDEAFA;
    --color-btn-secondary-bg: #FFFFFF;
    --color-btn-secondary-border: #D9DDEA;
    --color-btn-secondary-text: #596078;
    /* テキスト・罫線 */
    --color-text: #2E3347;            /* 本文 */
    --color-text-light: #7D8499;      /* 補助文字 */
    --color-border: #E5E7F1;          /* 罫線 */
    --color-gray: #7D8499;
    /* ── 役割カラー（用途：カード見出し帯・細い左線・バッジのみ・大面積禁止） ── */
    --role-cast-bg: #FDEAF3;     --role-cast-accent: #B8467D;
    --role-staff-bg: #E8F4FB;    --role-staff-accent: #347FA4;
    --role-driver-bg: #E5F5F1;   --role-driver-accent: #2D8476;
    --role-customer-bg: #F0ECFC; --role-customer-accent: #6D56B3;
    /* ── 状態カラー ── */
    --state-success-bg: #E7F7EE; --state-success-fg: #287A4F;
    --state-warning-bg: #FFF4DF; --state-warning-fg: #A56714;
    --state-error-bg: #FDEBEC;   --state-error-fg: #B54950;
    --state-info-bg: #EAF2FD;    --state-info-fg: #3D6FA8;
    /* ── バッジ配色（受付判定=決定318 resolve_badgeを除く共通正本・docs/aop/badge-unification-design.md） ── */
    --badge-active-bg: #C6F6D5;   --badge-active-fg: #276749;
    --badge-rest-bg: #FEFCBF;     --badge-rest-fg: #744210;
    --badge-retired-bg: #E2E8F0;  --badge-retired-fg: #4A5568;
    --badge-caution-bg: #FED7D7;  --badge-caution-fg: #C53030;
    --badge-rejected-bg: #FED7D7; --badge-rejected-fg: #742A2A;
    --badge-pending-bg: #EBF8FF;  --badge-pending-fg: #2B6CB0;
    /* ── 予定表の「種類」バッジ配色（決定639追補1・入店/講習・面接の種類ごとに固定） ──
       小さな pill の背景色にだけ使う（大面積禁止）。他画面で同じ種類を出すときも
       この変数を参照する（hex 直書き禁止・ui-edit §13）。 */
    --sched-type-interview: #8B60D3;    /* 面接 */
    --sched-type-join: #38A169;         /* 入店手続き */
    --sched-type-onboarding: #347FA4;   /* 入店講習 */
    --sched-type-rankup: #B8467D;       /* ランクアップ講習 */
    --sched-type-new_skill: #2D8476;    /* 新施術講習 */
    --sched-type-retraining: #C05621;   /* 再講習 */
    --sched-type-instructor: #6D56B3;   /* 講師研修 */
    --sched-type-other: #718096;        /* 名簿外（移行前の自由入力） */
    /* 後方互換（既存参照）：danger/success/warning */
    --color-danger: #B54950;
    --color-danger-light: #FDEBEC;
    --color-success: #287A4F;
    --color-warning: #A56714;
    /* ── 寸法・角丸・影（影は極薄・境界は罫線優先） ── */
    --header-height: 40px;
    --sidebar-width: 240px;
    --border-radius: 6px;             /* 入力・ボタン */
    --card-radius: 8px;               /* カード */
    --shadow-sm: 0 1px 2px rgba(46,49,95,0.06);
    --shadow-md: 0 2px 6px rgba(46,49,95,0.08);
    --transition: 0.2s ease;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul {
    list-style: none;
}

/* =============================================
   Header
   ============================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background-color: var(--color-header);
    color: var(--color-header-text);
    z-index: 100;
    border-bottom: 1px solid var(--color-header-border);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 24px;
}

.header-logo a {
    color: var(--color-header-text);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
}

.header-logo a:hover {
    opacity: 0.9;
    text-decoration: none;
}

.header-user {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--color-header-text);
    height: 100%; /* hover ターゲットをヘッダー全高に拡張 */
}

.user-icon {
    font-size: 1.1rem;
}

/* ─── ヘッダーユーザーメニュー（hover展開） ─── */
.user-menu {
    position: relative;
    height: 100%;     /* ヘッダー全高を hover 領域にする */
    display: flex;
    align-items: center;
}
.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: default;
    padding: 4px 10px;
    border-radius: 4px;
    transition: background 0.2s;
    color: var(--color-header-text);
}
.user-menu:hover .user-menu-trigger {
    background: var(--color-header-dark);
}
.user-menu-arrow {
    font-size: 0.75rem;
    opacity: 0.8;
}
.user-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;   /* 隙間ゼロで密着。gapがあるとhoverが途切れる */
    right: 0;
    min-width: 140px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    z-index: 1000;
    overflow: hidden;
}
.user-menu:hover .user-menu-dropdown {
    display: block;
}
.user-menu-item {
    display: block;
    padding: 10px 16px;
    font-size: 0.875rem;
    color: #2d3748;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}
.user-menu-item:hover {
    background: var(--color-hover);
    color: var(--color-primary);
    text-decoration: none;
}

/* =============================================
   Layout
   ============================================= */
.layout-wrapper {
    display: flex;
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
}

/* =============================================
   Sidebar
   ============================================= */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--color-sidebar-bg);
    color: var(--color-sidebar-text);
    flex-shrink: 0;
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    height: calc(100vh - var(--header-height));
    overflow: visible;
    z-index: 90;
}

/* フライアウトナビ（ホバーで右横に浮かぶ・メニュー本体の高さは動かない） */
.nav-flyout {
    position: relative;
}
.nav-flyout-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px 8px 20px;
    color: var(--color-sidebar-text);
    font-size: 15px;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
    user-select: none;
}
.nav-flyout-trigger:hover {
    background-color: var(--color-sidebar-hover);
    color: var(--color-white);
}
.nav-flyout-trigger.active {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    border-left: 3px solid rgba(255,255,255,0.8);
}
.nav-flyout-arrow {
    font-size: 0.6em;
    opacity: 0.7;
    flex-shrink: 0;
}
.nav-flyout-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
    background-color: var(--color-sidebar-bg);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 4px 4px 12px rgba(0,0,0,0.35);
    padding: 4px 0;
    z-index: 150;
    /* 縦位置(top)は JS が px で決める（行の真横・行を基準に縦中央。画面上下端にかかる時だけ
       内側へ寄せる）。旧 .flip-up（メニュー下端を行に合わせる方式）は、項目の多い「経理」だと
       行のはるか上へ開いてしまい、行からメニューへマウスを動かす途中でホバーが外れて閉じる
       原因になっていたため廃止した。
       max-height は画面より高くなる場合の保険（通常のグループはこの高さに達しない）。 */
    max-height: calc(100vh - 16px);
    overflow-y: auto;
}
.nav-flyout:focus-within .nav-flyout-menu,
.nav-flyout.is-hovering .nav-flyout-menu,
.nav-flyout.is-open .nav-flyout-menu {
    /* is-open     ＝ クリック（タップ）で開いた状態。ホバーできない端末でも開ける
       is-hovering ＝ ホバーで開いている状態（JSが付け外しする）
       **CSS の :hover で直接開かない**：隣のグループの上を一瞬通過しただけで
       そちらが即座に開き、元のメニューが閉じてしまうため。開閉は JS が
       「少し留まったら開く／離れても少し待ってから閉じる」で判定する。 */
    display: block;
}
/* クリックで開いている間は、どのグループを開いているか分かるようにする */
.nav-flyout.is-open > .nav-flyout-trigger {
    background-color: var(--color-sidebar-hover);
    color: var(--color-white);
}
.nav-flyout-menu .nav-link {
    padding-left: 20px;
    font-size: 14px;
    white-space: nowrap;
}

.sidebar-nav {
    height: 100%;
    overflow: visible;
    /* 下余白は 32px → 8px（案B）。メニューの下に無駄な空きを作らず、
       画面の低いノートPCでも全項目が収まるようにする */
    padding: 16px 0 8px;
    scrollbar-width: thin;
    scrollbar-color: #4a5568 transparent;
}
.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: #4a5568;
    border-radius: 2px;
}

.nav-section {
    margin-bottom: 8px;
}

.nav-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-sidebar-section);
    padding: 12px 16px 4px;
}

.nav-section ul {
    padding: 0;
}

.nav-link {
    display: block;
    padding: 8px 16px 8px 20px;
    color: var(--color-sidebar-text);
    font-size: 15px;
    transition: background-color var(--transition), color var(--transition);
    cursor: pointer;
    text-decoration: none;
}

a.nav-link:hover {
    background-color: var(--color-sidebar-hover);
    color: var(--color-sidebar-active-text);
    text-decoration: none;
}

a.nav-link.active {
    background-color: var(--color-sidebar-active);
    color: var(--color-sidebar-active-text);
    font-weight: 600;
    border-left: 3px solid var(--color-sidebar-accent);
}

.nav-link.disabled {
    color: #718096;
    cursor: default;
    display: block;
}

.nav-link.nav-sub {
    padding-left: 28px;
    font-size: 14px;
    /* 常時展開（受付・対応）の行だけ上下を詰める。サイドバーは overflow:visible で
       スクロールバーが出ない（フライアウトを外に出すため）ので、はみ出すと下の項目に
       触れなくなる。1366x768のノートPCでも収まる高さにするための詰め。
       フライアウトの中のリンクは浮き窓側なので従来の 8px のまま。 */
    padding-top: 6px;
    padding-bottom: 6px;
}

.badge-coming {
    font-size: 0.65rem;
    background-color: #4a5568;
    color: #a0aec0;
    padding: 2px 6px;
    border-radius: 3px;
}

/* =============================================
   Main Content
   ============================================= */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 24px;
    min-width: 0;
    background-color: var(--color-bg);
}

/* =============================================
   Page Header
   ============================================= */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
}

/* =============================================
   Card
   ============================================= */
.card {
    background-color: var(--color-content-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    border: 1px solid var(--color-border);
}

.mt-4 {
    margin-top: 16px;
}

/* =============================================
   Search Form
   ============================================= */
.search-form {
    width: 100%;
}

.search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.search-input {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}

/* =============================================
   Table
   ============================================= */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table thead tr {
    background-color: var(--color-primary-light);
}

.data-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: #553d7a;
    border-bottom: 2px solid #c9b3e8;
    white-space: nowrap;
}

.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background-color: var(--color-hover);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.caution-row {
    border-left: 3px solid var(--color-danger) !important;
}

.caution-row td:first-child {
    padding-left: 9px;
}

.cast-name-link {
    font-weight: 600;
    color: var(--color-primary);
}

.cast-name-link:hover {
    color: var(--color-primary-dark);
}

.empty-row {
    text-align: center;
    color: var(--color-text-light);
    padding: 40px !important;
}

.table-footer {
    padding: 12px 0 0;
    display: flex;
    justify-content: flex-end;
}

.total-count {
    font-size: 0.875rem;
    color: var(--color-text-light);
}

/* =============================================
   Badges
   ============================================= */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-active {
    background-color: var(--badge-active-bg);
    color: var(--badge-active-fg);
}

.badge-rest {
    background-color: var(--badge-rest-bg);
    color: var(--badge-rest-fg);
}

.badge-retired {
    background-color: var(--badge-retired-bg);
    color: var(--badge-retired-fg);
}

.badge-caution {
    background-color: var(--badge-caution-bg);
    color: var(--badge-caution-fg);
    margin-left: 6px;
}

.badge-rejected {
    background-color: var(--badge-rejected-bg);
    color: var(--badge-rejected-fg);
}

.badge-pending {
    background-color: var(--badge-pending-bg);
    color: var(--badge-pending-fg);
}

/* 回収状態バッジ（振込連絡/未納金/精算表で共用・決定417/419） */
.badge-collection-uncollected {
    background-color: var(--state-error-bg);
    color: var(--state-error-fg);
}

.badge-collection-notified {
    background-color: var(--state-warning-bg);
    color: var(--state-warning-fg);
}

.badge-collection-collected {
    background-color: var(--state-success-bg);
    color: var(--state-success-fg);
}

/* =============================================
   Buttons
   ============================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

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

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

.btn-secondary:hover {
    background-color: var(--color-header-dark);
    color: var(--color-btn-secondary-text);
}

.btn-danger {
    background-color: var(--color-danger);
    color: var(--color-white);
    border-color: var(--color-danger);
}

.btn-danger:hover {
    background-color: #c53030;
    border-color: #c53030;
    color: var(--color-white);
}

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

.btn-ghost:hover {
    background-color: var(--color-header-dark);
    color: var(--color-text);
}

.btn-sm {
    padding: 4px 10px;
    font-size: 0.8rem;
}

.btn-lg {
    padding: 10px 24px;
    font-size: 1rem;
}

/* =============================================
   Forms
   ============================================= */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

/* 連絡先セクションなど2カラム並びのフォーム行 */
.form-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
}

.form-group {
    margin-bottom: 16px;
}

.form-group.required .form-label::after {
    content: ' *';
    color: var(--color-danger);
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
}

.caution-label {
    color: var(--color-danger);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #c8d0da;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--color-text);
    background-color: var(--color-white);
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
    -webkit-appearance: none;
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23718096' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(139, 96, 211, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder,
input::placeholder,
textarea::placeholder {
    color: #c0c8d4;
    opacity: 1;
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

.caution-textarea {
    border-color: #fc8181;
    background-color: #fff5f5;
}

.caution-textarea:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15);
}

/* =============================================
   Tabs
   ============================================= */
.tab-container {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    margin-bottom: 20px;
    overflow: hidden;
}

.tab-nav {
    display: flex;
    background-color: #f7fafc;
    border-bottom: 1px solid var(--color-border);
}

.tab-btn {
    padding: 12px 20px;
    background: none;
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-light);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition), border-color var(--transition), background-color var(--transition);
    font-family: inherit;
}

.tab-btn:hover {
    color: var(--color-primary);
    background-color: #edf2f7;
}

.tab-btn.active {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

.tab-panel {
    display: none;
    padding: 24px;
}

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

/* =============================================
   Form Actions
   ============================================= */
.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}

/* =============================================
   Profile Help / Note Text
   （キャスト編集 WEBプロフィールタブの補足文・注意書き）
   font-sizeは14px以上の恒久ルール（css-rules.md）を維持。
   小さく見せる調整はcolor/line-height/font-weightで行う。
   ============================================= */
.profile-help-text.profile-help-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #6b7280;
    background-color: #f8fafc;
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 2px;
    margin-bottom: 6px;
}

.profile-note-box.profile-note-box {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #92400e;
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 6px;
}

.profile-save-note.profile-save-note {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #4c1d95;
    background-color: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 4px;
}

.profile-save-note strong {
    font-weight: 700;
}

/* =============================================
   Cast Shop Status Badge
   （キャスト編集ページ上部の在籍状況バッジ。状態別配色は未対応・共通バッジのみ）
   ============================================= */
.cast-shop-status-badge.cast-shop-status-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #065f46;
    background-color: #d1fae5;
    border-radius: 4px;
    padding: 2px 10px;
}

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 768px) {
    .sidebar {
        width: 200px;
        transform: translateX(-200px);
        transition: transform 0.3s ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        padding: 16px;
    }

    .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input {
        max-width: 100%;
    }

    .tab-nav {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .data-table {
        font-size: 0.8rem;
    }

    .data-table th,
    .data-table td {
        padding: 8px 8px;
    }
}

/* =============================================
   Utility
   ============================================= */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--color-text-light); }
.font-bold { font-weight: 700; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }

/* =============================================
   Settings - Form Table
   ============================================= */
.card-header {
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

td.flabel {
    background: #f0f0f0;
    width: 200px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    font-weight: bold;
    vertical-align: middle;
    white-space: nowrap;
}

td.finput {
    padding: 8px 12px;
    border: 1px solid #ddd;
    background: #fff;
}

td.finput .form-input,
td.finput .form-select {
    width: 100%;
    max-width: 480px;
}

.req { color: #e53e3e; }

/* フロートフォーム フォントサイズ統一 */
#float-form input,
#float-form select,
#float-form textarea {
    font-size: 16px;
}

/* =============================================
   Compact Form Layout (キャスト編集ページ用)
   変更前→後: form-group mb 16px→12px,
   card padding-top 20px→14px,
   card-header mb 16px→11px / pb 10px→7px,
   form-grid gap 16px→12px, minmax 200px→160px
   ============================================= */
@media (min-width: 769px) {
    .compact-form .form-group {
        margin-bottom: 12px;
    }
    .compact-form .card {
        padding: 14px 20px;
    }
    .compact-form .card-header {
        background-color: #f3edf9;
        margin: -14px -20px 11px -20px;
        padding: 9px 20px;
        border-radius: 6px 6px 0 0;
        border-bottom: none;
    }
    .compact-form .card-header .section-title {
        font-size: 18px;
        margin: 0;
    }
    .compact-form .card-body label:not(.form-label):not(.caution-label) {
        font-size: 14px;
    }
    .compact-form .form-grid {
        gap: 12px;
        margin-bottom: 12px;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

.form-input-short {
    max-width: 150px;
}

.skill-rank-select {
    width: 220px !important;
    max-width: 220px !important;
    min-width: 220px !important;
}

/* =============================================
   内部管理タブ（キャスト編集）：短いカードの横並び
   対象＝shared/templates/casts/cast_edit_new.html の #tab-internal のみ。
   既存カード2枚を .ni-row で包むだけで、カード内部のHTMLは変更していない。
   ============================================= */
.ni-row {
    display: grid;
    gap: 16px;
}

/* 本名（広い）｜本人証明写真（狭い） */
.ni-row--2 {
    grid-template-columns: 2fr 1fr;
}

/* 連絡先｜レスポンス傾向 */
.ni-row--1-1 {
    grid-template-columns: 1fr 1fr;
}

/* 横並びでカード幅が半分になると、.form-row（既定 flex-wrap:nowrap）の中の
   固定幅入力（width/min-width:300px）がカードからはみ出す。この行の中だけ
   折り返しを許可して欄が隠れない・重ならないようにする（ui-edit §24）。 */
.ni-row .form-row {
    flex-wrap: wrap;
}

@media (max-width: 959px) {
    .ni-row--2,
    .ni-row--1-1 {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   キャスト詳細「内部管理」タブ 抜本レイアウト（決定597・ni2-*）
   対象＝shared/templates/casts/cast_edit_new.html の #tab-internal のみ。
   正＝モック mockups/casts/naibu_v2_shops5.html。
   左＝縦テーブル（ラベル160px｜値）／右＝サイドバー。2カラムを保存ボタン直前まで貫通する。
   カード（.card）と position:sticky は使わない。見出しは淡いピンク帯（役割別カラー）。
   ============================================= */
/* 対応履歴タブ（#tab-history・決定615）は内部管理タブと同じ土台を使う。
   宣言は複製せず、セレクタを並べて共有する（同じ値を2箇所に書かない）。 */
#tab-internal,
#tab-history {
    --ni2-ln: #d8dde5;
    --ni2-ln2: #eef1f5;
    --ni2-sub: #5f6672;
    --ni2-thbg: #f1f3f6;
    font-size: 15px;
    line-height: 1.5;
}

/* --- 2カラム --- */
/* 顧客詳細（#cust-detail-2col）も同じ2カラムに揃える。
   ここで足すのは「このセレクタでも同じ幅・gap・1100px の1カラム化を使う」宣言だけで、
   値は1つも変えない（独自の幅・breakpoint を作らない）。
   顧客ページに id="tab-internal" を付ける方法は採らない：下の
   `#tab-internal input[type=text] / select` 等が顧客ページの既存入力欄を全部作り替えて
   しまうため（高さ32px固定・font-size 15px・5段階幅クラス前提）。 */
#tab-internal .ni2-grid,
#cust-detail-2col .ni2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px;
}
#tab-internal .ni2-left,
#cust-detail-2col .ni2-left { min-width: 0; }
#tab-internal .ni2-side,
#cust-detail-2col .ni2-side { min-width: 0; }
@media (max-width: 1100px) {
    #tab-internal .ni2-grid,
    #cust-detail-2col .ni2-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- 顧客詳細 右カラムの読み取り専用パーツ --- */
/* (d) 顧客価値サマリ：縦一列「ラベル｜値」（決定303）。380px カラムに収める。
   ラベル列は 150px 固定・値は残り全部。長い値は途中で折り返して全文を見せる
   （text-overflow による省略はしない・ui-edit §23/§34）。 */
#cust-detail-2col .cvs-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
#cust-detail-2col .cvs-tbl th,
#cust-detail-2col .cvs-tbl td {
    border-bottom: 1px solid #eef1f5;
    padding: 6px 8px;
    font-size: 14px;
    line-height: 1.5;
    vertical-align: middle;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
}
#cust-detail-2col .cvs-tbl th {
    width: 150px;
    font-weight: 700;
    color: #5f6672;
    background: #f1f3f6;
}
#cust-detail-2col .cvs-tbl td { color: #2d3748; }
#cust-detail-2col .cvs-tbl tr:last-child th,
#cust-detail-2col .cvs-tbl tr:last-child td { border-bottom: none; }
/* 休眠・来店目安超過だけ赤字（admin.css :root にある変数のみ使う・ui-edit §62） */
#cust-detail-2col .cvs-alert { color: var(--state-error-fg); font-weight: 700; }

/* --- 顧客詳細 訪問先情報カード（左752px・決定700 追補2） --- */
/* 行ごとに列を明示する grid。**固定pxの積み上げで1行を当てにいかない**（ui-edit §4）。
   旧実装は5欄を `flex-wrap:nowrap` の1行に並べており、内側708px
   （752 − padding40 − 枠線4）に対して 140+140+180+420+gap48 = 928px 必要で、
   縮まない建物欄がカード外へはみ出し、`flex:1 1 0` の町村番地だけが0まで潰れていた。
   すべての列を minmax(0, …) にし、欄側に min-width:0 を当てて、はみ出しを構造的に止める。
   **overflow / text-overflow は書かない**（値を … で切らない・ui-edit §23/§34）。 */
#cust-detail-2col .vi-grid { display: grid; gap: 12px; margin-top: 12px; }
#cust-detail-2col .vi-grid-3 { grid-template-columns: 140px 140px minmax(0, 1fr); }
#cust-detail-2col .vi-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#cust-detail-2col .vi-grid-park-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#cust-detail-2col .vi-grid > div { min-width: 0; }
#cust-detail-2col .vi-grid input,
#cust-detail-2col .vi-grid select,
#cust-detail-2col .vi-grid textarea { min-width: 0; width: 100%; box-sizing: border-box; }
/* 地図アイコン：住所・最寄駅・送迎地点・パーキングの4欄で同じ形・同じ文言にする（決定700 追補3）。
   **描画本数はデータに依らず一定**（欄の数だけ常に出す）。出す/出さないは `hidden` 属性の
   付け外しで、共通JS static/js/shared/map_link.js が入力に連動して切り替える（追補5）。
   値が空の間は**見せない**（グレーの無効表示にはしない＝押せる物だけ出す）。
   **表示は 📍 アイコンだけで文字を出さない**（タナカさん指示・決定700 追補3）。
   意味は `aria-label="地図で見る"` で伝える。 */
/* **スコープを付けない共通部品**（顧客編集・キャスト編集・ドライバー編集・スタッフ編集で共有）。
   JSの正本は static/js/shared/map_link.js。画面ごとに作らない（憲法§14）。 */
.vi-map {
    margin-left: 6px;
    text-decoration: none;
    font-size: 15px;            /* 📍 は絵文字1字。ラベル(0.8rem)より少し大きくして押しやすくする */
    line-height: 1;
    vertical-align: middle;
}
.vi-map:hover { opacity: .7; }
/* `hidden` を確実に効かせる（.vi-map 側に display を持たせないための保険） */
.vi-map[hidden] { display: none; }

/* 区分（ラジオ群）は grid ではなく従来どおり横並び＋折り返し */
#cust-detail-2col .vi-types { display: flex; flex-wrap: wrap; gap: 16px; }
/* 2カラムが1カラムに落ちる幅（.ni2-grid と同じ 1100px）で全行1列にする。
   独自の breakpoint を増やさない（旧実装の 600px は廃止）。 */
@media (max-width: 1100px) {
    #cust-detail-2col .vi-grid-3,
    #cust-detail-2col .vi-grid-2,
    #cust-detail-2col .vi-grid-park-2 { grid-template-columns: minmax(0, 1fr); }
    #cust-detail-2col .vi-types { flex-direction: column; gap: 8px; }
}

/* (a) 注意判定カードの変更履歴：1件＝日時／変更前→変更後／理由 の3行（横テーブルは380pxに載らない） */
#cust-detail-2col .cust-ratinglog {
    border-top: 1px solid #eef1f5;
    padding: 8px 0 0;
    margin-top: 10px;
}
#cust-detail-2col .cust-ratinglog-h { font-size: 14px; color: #5f6672; }
#cust-detail-2col .cust-ratinglog-v { font-size: 14px; color: #2d3748; margin-top: 2px; }
#cust-detail-2col .cust-ratinglog-old { color: #a0aec0; }
#cust-detail-2col .cust-ratinglog-r { font-size: 14px; color: #2d3748; margin-top: 2px; }

/* --- セクション見出し --- */
/* セクション間は 30px（見出し帯と最初の行の間は 10px）。
   見出しは淡いピンク帯（キャストの役割別カラー・ui-edit §13 の変数を参照。hex 直書きしない）。
   帯が区切りを担うので 1px 横線は置かない（帯で置換・左右カラムとも統一）。 */
#tab-internal .ni2-sec,
#tab-history .ni2-sec { margin: 0 0 30px; }
#tab-internal .ni2-sec > h2,
#tab-history .ni2-sec > h2 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 7px 12px;
    border-radius: 4px;
    border-bottom: none;
    background: var(--role-cast-bg);
    color: var(--role-cast-accent);
}
/* 右カラムは1セクション＝1枡（白背景＋薄枠）。見出し帯は枡の上辺いっぱいに広げる。 */
#tab-internal .ni2-side .ni2-sec {
    background: #fff;
    border: 1px solid var(--ni2-ln);
    border-radius: 6px;
    padding: 12px 14px;
}
#tab-internal .ni2-side .ni2-sec > h2 {
    margin: -12px -14px 12px;
    border-radius: 6px 6px 0 0;
}

/* --- 縦テーブル（ラベル160px｜値） --- */
#tab-internal .ni2-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
#tab-internal .ni2-tbl th,
#tab-internal .ni2-tbl td {
    border-bottom: 1px solid var(--ni2-ln2);
    padding: 4px 8px;
    vertical-align: middle;
    height: 38px;
}
#tab-internal .ni2-tbl th {
    width: 160px;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: var(--ni2-sub);
    background: var(--ni2-thbg);   /* 見出し帯より薄いグレー */
    white-space: nowrap;
}
#tab-internal .ni2-tbl td { overflow-wrap: anywhere; background: #fff; }
#tab-internal .ni2-cell { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#tab-internal .ni2-il { font-size: 14px; color: var(--ni2-sub); white-space: nowrap; margin-left: 6px; }
#tab-internal .ni2-sub2 { display: inline-flex; align-items: center; }
#tab-internal .ni2-sub,
#tab-history .ni2-sub { font-size: 14px; color: var(--ni2-sub); }
#tab-internal .ni2-note { font-size: 14px; color: var(--ni2-sub); margin-top: 6px; }

/* --- 入力幅は5段階クラス＋氏名用の可変1種のみ（個別px指定を増やさない） --- */
#tab-internal input[type=text],
#tab-internal input[type=tel],
#tab-internal input[type=email],
#tab-internal input[type=number],
#tab-internal input[type=date],
#tab-internal input[type=datetime-local],
#tab-internal select,
#tab-history input[type=text],
#tab-history input[type=date],
#tab-history input[type=datetime-local],
#tab-history select {
    font-family: inherit; font-size: 15px; padding: 5px 8px;
    border: 1px solid #c8d0da; border-radius: 4px; background: #fff; color: #222;
    height: 32px; box-sizing: border-box;
}
#tab-internal select,
#tab-history select { padding-right: 24px; }
/* 日時欄をほかの欄と同じ見え方に揃える（決定618）。Safari は日付系 input に独自の外観を持ち、
   appearance を外さないと height(32px) が効かず中身が上寄りになる。line-height は
   内容高さ（32 - padding10 - border2 = 20px）に合わせて縦中央に置く。 */
#tab-history input[type=date],
#tab-history input[type=datetime-local] {
    -webkit-appearance: none;
    appearance: none;
    line-height: 20px;
    text-align: left;
}
#tab-internal .ni2-w-xs { width: 90px; }
#tab-internal .ni2-w-sm,
#tab-history .ni2-w-sm { width: 150px; }
#tab-internal .ni2-w-md,
#tab-history .ni2-w-md { width: 220px; }
#tab-internal .ni2-w-lg,
#tab-history .ni2-w-lg { width: 300px; }
#tab-internal .ni2-w-full { width: 100%; flex: 1 1 0; min-width: 0; }
#tab-internal .ni2-w-tel { width: 70px; }
/* 子供の年齢＝152px（「3歳・7歳」のような自由記入が入る幅。内側 152-8-8-2=134px ≒ 8.9全角）。
   人数を70pxに戻した分をここで吸収した。決定603/606 */
#tab-internal .ni2-w-age152 { width: 152px; }
/* 子供の人数＝70px。これより狭いと select の非テキスト領域（左padding8+右padding24+border2 に
   UA が menulist の矢印用に確保する幅を足したもの）を下回り、56px＝数字が切れる／62px＝右の枠線と
   角丸が矢印に被って欠けて見える、という実害が出た。狭めない。
   ここだけ未選択文言が入らないため「-」を使う。決定603/604/605/606 */
#tab-internal .ni2-w-num70 { width: 70px; }
/* 月収目標・達成期限＝100px（「3ヶ月」79px・4桁の数値が入る。70px下限は決定606） */
#tab-internal .ni2-w-num100 { width: 100px; }
/* 配偶者＝100px（最長の選択肢「独身未婚」94px が省略されずに入る幅。
   未選択文言は幅の都合で「選択」のみ・決定604/605） */
#tab-internal .ni2-w-sel100 { width: 100px; }
/* 子供の詳細（人数・年齢）の内側も行内の他の隙間と同じ 10px にする（決定605）。
   .ni2-sub2 は他の行（業界経験・借金・貸付）でも使うため、この行だけを id で指定する。 */
#tab-internal #children_detail { gap: 10px; }
/* 氏名4欄：残り幅を4等分（flex-basis:0 なので折り返しは構造上起きない） */
#tab-internal .ni2-w-eq { flex: 1 1 0; min-width: 0; width: auto; }

/* --- チェック／ラジオ --- */
#tab-internal .ni2-cb {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 14px; white-space: nowrap;
}
#tab-internal .ni2-cb input { margin: 0; flex: 0 0 auto; }
#tab-internal .ni2-rg { display: inline-flex; align-items: center; gap: 14px; }
#tab-internal .ni2-rg label { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; cursor: pointer; }
#tab-internal .ni2-chk { display: grid; gap: 6px 10px; padding: 4px 0; }
#tab-internal .ni2-chk-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 志望理由：3列・縦流し6行（空セルは3列目の最下段1つ） */
#tab-internal .ni2-chk-col3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
}
#tab-internal .ni2-chk-flow { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 4px 0; }
#tab-internal .ni2-warn span { color: #c53030; font-weight: 700; }

/* --- 確認データ：縦1列・1項目1行。▶で開くパネルはその行の直下に全幅で出る --- */
#tab-internal .ni2-cd-col { display: flex; flex-direction: column; }
#tab-internal .ni2-cd-col > .cd-item {
    min-height: 38px;
    border-bottom: 1px solid var(--ni2-ln2);
}
#tab-internal .cd-panel {
    margin: 8px 0 12px;
    padding: 12px;
    background: #f7fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

/* --- 右サイドバー --- */
#tab-internal .ni2-core-top { display: flex; gap: 12px; align-items: flex-start; }
#tab-internal .ni2-photo-col { flex: 0 0 auto; }
#tab-internal .ni2-photo {
    width: 120px; height: 150px; background: #dfe3e8; border: 1px solid #c8d0da; border-radius: 4px;
    display: flex; align-items: center; justify-content: center; color: #8a919c; font-size: 14px;
    text-align: center;
}
#tab-internal .ni2-core-fields { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#tab-internal .ni2-subhead { font-size: 14px; font-weight: 700; color: #222; }
#tab-internal .ni2-fld,
#tab-history .ni2-fld { display: flex; flex-direction: column; gap: 3px; }
#tab-internal .ni2-fld > label,
#tab-history .ni2-fld > label { font-size: 14px; color: var(--ni2-sub); font-weight: 700; }
#tab-internal .ni2-vstack { display: flex; flex-direction: column; gap: 8px; }
/* 報酬ランク（決定752 Step8）：権限なしの表示値と直近の変更履歴（詰めて表示・施術ランクとは別欄） */
#tab-internal .ni2-reward-rank .ni2-rr-value { font-size: 16px; font-weight: 700; color: #2d3748; }
#tab-internal .ni2-reward-rank .ni2-rr-hist { margin-top: -4px; }
#tab-internal .ni2-file { margin-top: 8px; }
#tab-internal .ni2-ngwrap { display: flex; flex-wrap: wrap; gap: 0; }
#tab-internal .ni2-badge {
    display: inline-block; font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 14px;
    background: #FDEBEC; color: #B54950; border: 1px solid #B54950; margin: 0 6px 6px 0;
}

/* --- 現在の在籍店舗：1店1枡・3行（正式名／select＋割当解除／変更日時） --- */
#tab-internal .ni2-shop {
    border: 1px solid var(--ni2-ln2); border-radius: 4px; padding: 6px 8px;
    margin-bottom: 6px; background: #fafbfc;
}
#tab-internal .ni2-shop-out { background: #edf2f7; color: #a0aec0; }
#tab-internal .ni2-shop-name {
    display: block; width: 100%; font-size: 14px; font-weight: 700;
    white-space: nowrap; margin-bottom: 5px;
}
#tab-internal .ni2-shop-ctrl { display: flex; align-items: center; gap: 8px; }
#tab-internal .ni2-shop-sub { font-size: 14px; color: #a0aec0; margin-top: 5px; }
#tab-internal .ni2-btn-danger,
#tab-history .ni2-btn-danger {
    background: #fff5f5; color: #c53030; border: 1px solid #fed7d7; border-radius: 4px;
    font-size: 14px; padding: 3px 8px; cursor: pointer; font-family: inherit;
}

/* --- 対応履歴（決定614で新設・決定615で独立タブへ移設） ---
   タブ直下に1枚だけ置く全幅の枡。見た目は内部管理タブの右カラムと同じ
   「1セクション＝1枡（白＋薄枠）」で、見出し帯は上辺いっぱいに広げる。
   .ni2-grid の子ではなくなったので grid-column は持たない。 */
#tab-history .ni2-hist {
    background: #fff;
    border: 1px solid var(--ni2-ln);
    border-radius: 6px;
    padding: 12px 14px;
}
#tab-history .ni2-hist > h2 {
    margin: -12px -14px 12px;
    border-radius: 6px 6px 0 0;
}
/* 追加フォームは2段（決定617）。1段目＝種別220+日時220+担当150+手段150+復帰可否150=890
   ＋gap50＋追加ボタン80＝1020px（1152pxのコンテンツ幅＝枡の内側1122pxに102pxの余裕）。
   **2段目＝メモが全幅**。7つを1行に並べるとメモが92pxまで潰れて下限100pxを割るため。
   狭い画面（.ni2-grid が1カラムに落ちる 1100px 以下）では1段目がさらに折り返す
   ＝はみ出させない・省略もしない（§24/§34）。 */
#tab-history .ni2-hist-add {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}
/* flex-basis:100% で必ず改行し、1行まるごとを使う（DOM上もボタンの後ろに置いてある） */
#tab-history .ni2-hist-memo { flex: 0 0 100%; min-width: 0; }
#tab-history .ni2-hist-memo textarea { width: 100%; min-height: 32px; }
#tab-history .ni2-hist-addbtn { flex: 0 0 auto; height: 32px; padding: 0 18px; }

/* 一覧：メモ列だけ colgroup に width を書かない＝残り幅を全部使う（他4列は内容幅で固定）。
   th/td の寄せ方向はセットで明示する（見出しだけ中央に戻る罠・§30/§32）。 */
#tab-history .ni2-hist-tbl {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
    table-layout: fixed;
}
#tab-history .ni2-hist-tbl th,
#tab-history .ni2-hist-tbl td {
    border-bottom: 1px solid var(--ni2-ln2);
    padding: 4px 8px;
    vertical-align: middle;
    height: 38px;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
}
#tab-history .ni2-hist-tbl th {
    font-size: 14px;
    font-weight: 700;
    color: var(--ni2-sub);
    background: var(--ni2-thbg);
    white-space: nowrap;
}
/* 日付だけ nowrap（途中で折り返すと読み取れない）。他セルは折り返して縦に伸ばす（§34） */
#tab-history .ni2-hist-tbl td.ni2-hist-date { white-space: nowrap; }
#tab-history .ni2-hist-tbl td.ni2-hist-act { text-align: center; }
/* 種別セルの補足（復帰可否・講習種別）と、担当セルの下に出す手段の両方で使う。
   div で使ったときだけ改行させたいので display は指定しない（span はインラインのまま）。 */
#tab-history .ni2-hist-sub { font-size: 14px; color: var(--ni2-sub); line-height: 1.3; }
#tab-history .ni2-hist-foot { margin-top: 12px; }

/* --- 金銭セクション（決定625の3行形式・決定627で全幅へ） -------------------
   決定627で `.ni2-grid` の外（内部管理タブ最下段）へ移し、**全幅1122px**の枠にした。
   貸付金の5項目を旧PHPの文言のまま1行に入れるのに左カラム752pxでは足りなかったため
   （実測873px・決定626）。見た目は対応履歴カード（#tab-history .ni2-hist）と同型。
   3行は縦一列「ラベル｜値」の .ni2-tbl（決定303）。
   ここは枠と「有無ラジオの下に出る記入行」を面倒みる。 */

/* 全幅の枡。見出し帯は上辺いっぱいに広げる（.ni2-hist と同じ作り）。 */
#tab-internal .ni2-money {
    background: #fff;
    border: 1px solid var(--ni2-ln);
    border-radius: 6px;
    padding: 12px 14px;
}
#tab-internal .ni2-money > h2 {
    margin: -12px -14px 12px;
    border-radius: 6px 6px 0 0;
}

/* 有無ラジオと記入行の間を少し空ける。行が無い時（無）は display:none で丸ごと消える。 */
#tab-internal .ni2-money .mny-body { margin-top: 6px; }

/* 1行＝1レコード。幅は決定626で実測して締め直した（内訳はテンプレートのコメント）。
   **全幅1122px（枠の内側）に対し 借金563px・貸付金873px・入店祝い金436px** で
   3行とも1行に収まるので、決定627で `flex-wrap` を外して**1行固定**にした。
   `flex: 0 0 auto` で欄が縮まないようにする＝縮んで select の中身が切れるのを防ぐ。
   ラベルは改行させない（`white-space: nowrap`）。省略表示（text-overflow）は使わない。 */
#tab-internal .ni2-money .mny-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 4px 0;
}
#tab-internal .ni2-money .mny-row > * { flex: 0 0 auto; }
#tab-internal .ni2-money .mny-row .ni2-il { white-space: nowrap; }
#tab-internal .ni2-money .mny-row + .mny-row { border-top: 1px solid var(--ni2-ln2); }

/* 「旧スタッフ」固定表示（移行時に admin_users へ突合できなかった貸し手）。
   select と縦位置を揃えるため高さを合わせる。 */
#tab-internal .ni2-money .mny-fixed {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 8px;
    color: var(--ni2-sub);
}

/* × は行末。小さいが 24px 角のタップ領域を持たせる（誤操作は confirm で受ける）。 */
#tab-internal .ni2-money .mny-x {
    margin-left: auto;
    width: 24px;
    height: 24px;
    line-height: 1;
    padding: 0;
    border: 1px solid var(--ni2-ln);
    border-radius: 4px;
    background: #fff;
    /* 状態カラーは :root の変数を使う（hex直書き禁止・ui-edit §13）。
       admin.css が持つのは --state-error-bg / --state-error-fg の2つ。 */
    color: var(--state-error-fg);
    font-size: 14px;
    cursor: pointer;
}
#tab-internal .ni2-money .mny-x:hover { background: var(--state-error-bg); }

/* 「登録項目を増やす」は旧PHPと同じ文言のテキストリンク。ボタン見た目にしない。 */
#tab-internal .ni2-money .mny-add {
    margin-top: 6px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary);
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

/* ===========================================================================
   WEBプロフィール（公開用）タブ v2（決定656 バッチ1）
   2カラム（左72% / 右28%）＋基本プロフィールの縦一列テーブル。
   接頭辞 pp- でこのタブに閉じる（他画面の card / form-* を変えない）。
   =========================================================================== */
.pp-editing { display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  background:#f3effe; border-left:4px solid #8B60D3; border-radius:6px;
  padding:10px 14px; margin-bottom:16px; font-size:15px; color:#4a5568;
  white-space:nowrap; }
.pp-editing-shop { font-size:17px; font-weight:700; color:#553d7a; }
.pp-editing-sep { color:#b9b0d4; }
.pp-editing-link { font-size:14px; color:#3182ce; text-decoration:underline; }
.pp-dot { display:inline-flex; align-items:center; gap:5px;
  font-size:15px; font-weight:700; color:#2f9e6f; }
.pp-dot::before { content:""; width:9px; height:9px; border-radius:50%; background:#2f9e6f; }
.pp-dot.is-off { color:#8a93a5; }
.pp-dot.is-off::before { background:#b0b7c3; }

.pp-grid { display:grid; grid-template-columns:72% 28%; gap:20px; align-items:start; }
@media (max-width:1100px) { .pp-grid { grid-template-columns:1fr; } }
.pp-main { min-width:0; }
.pp-rail { position:sticky; top:16px; display:flex; flex-direction:column; gap:12px;
  min-width:0; }
.pp-rail .card { margin-bottom:0; }
.pp-radios { display:flex; flex-direction:column; gap:9px; }
.pp-radios label { display:flex; align-items:center; gap:8px; cursor:pointer;
  white-space:nowrap; }
.pp-readonly { font-size:15px; color:#2d3748; }
.pp-hint { display:block; font-size:14px; color:#8a93a5; margin-top:3px;
  white-space:normal; }
.pp-btn-block { display:block; width:100%; box-sizing:border-box; text-align:center; }
.pp-dirty { display:flex; align-items:center; gap:6px; margin-bottom:10px;
  font-size:15px; font-weight:700; color:#b06a1e; white-space:nowrap; }
.pp-dirty::before { content:""; width:9px; height:9px; border-radius:50%; background:#e0a33c; }
.pp-saved { margin-bottom:10px; font-size:15px; color:#8a93a5; }

/* 公開用写真（150×200・横並び） */
/* 公開用写真（決定663）：240×320（3:4）。1366px の左カラム（約920px）に
   240×3 + gap14×2 = 748px で収まる。**クリックでの拡大は撤去した**（決定663 是正2）。 */
.pp-photos { display:flex; gap:14px; flex-wrap:wrap; }
.pp-photo { width:240px; }
.pp-photo-cap { font-size:14px; font-weight:600; color:#4a5568; margin-bottom:6px;
  white-space:nowrap; }
.pp-photo-cap.is-main { color:#6b46c1; }
.pp-photo-box { width:240px; height:320px; background:#f7fafc; border:1px solid #e2e8f0;
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; }
.pp-photo-box.is-main { border:2px solid #8B60D3; }
.pp-photo-acts { display:flex; gap:6px; margin-top:6px; }
.pp-photo-btn { flex:1 1 0; display:inline-flex; align-items:center; justify-content:center;
  gap:4px; font-size:14px; padding:5px 0; cursor:pointer; background:#fff;
  border:1px solid #c8d0da; border-radius:6px; color:#4a5568; white-space:nowrap; }
.pp-photo-btn:hover { border-color:var(--color-primary); }
.pp-photo-btn.is-del { color:#e53e3e; }
.pp-photo-name { font-size:14px; color:#4a90e2; margin-top:4px; min-height:1em;
  overflow-wrap:anywhere; }

/* 基本プロフィール：縦一列「ラベル｜値」（決定303） */
.pp-tbl { width:100%; border-collapse:collapse; table-layout:fixed; }
.pp-tbl th, .pp-tbl td { border-bottom:1px solid #eef0f5; padding:7px 8px;
  font-size:15px; vertical-align:middle; text-align:left; }
.pp-tbl th { font-weight:700; color:#4a5568; background:#fafbfd; white-space:nowrap; }
.pp-tbl tr:last-child th, .pp-tbl tr:last-child td { border-bottom:none; }
.pp-cell { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.pp-il { font-size:14px; color:#718096; white-space:nowrap; }
.pp-il-gap { margin-left:10px; }
.pp-tbl .pp-w-xs { width:90px; }  .pp-tbl .pp-w-sm { width:150px; }
.pp-tbl .pp-w-md { width:220px; } .pp-tbl .pp-w-lg { width:300px; }
.pp-tbl .form-input, .pp-tbl .form-select { font-size:15px; }
/* 公開用生年月日（date入力）と自動計算の年齢（readonly・決定656 是正）。
   §48：type を変えたら、その欄に効いている幅・スタイルを必ず作り直す。
   date入力は yyyy/mm/dd ＋カレンダーアイコンぶんの幅が要る（150pxでは切れる）。 */
.pp-tbl .pp-w-date { width:180px; }
.pp-tbl .pp-readonly-in { background:#f4f5f9; color:#4a5568; }

/* 得意な施術・サービス（決定657 バッチ2）：1行＝項目名＋◎〇△×の直接クリック。
   中身は radio。強調は CSS（:checked + span）だけで行う＝JSは絞り込みと解除のみ。 */
.pp-chips { display:flex; align-items:center; gap:8px; margin:0 0 12px; flex-wrap:wrap; }
.pp-chip { font-size:14px; padding:5px 12px; border-radius:999px; cursor:pointer;
  border:1px solid #c8d0da; background:#fff; color:#4a5568; white-space:nowrap; }
.pp-chip:hover { border-color:var(--color-primary); }
.pp-chip.is-on { background:#efeafc; border-color:var(--color-primary); color:#5b4bb5;
  font-weight:700; }
.pp-play-count { margin-left:4px; }
.pp-play-cat { margin-bottom:16px; }
.pp-play-cat:last-child { margin-bottom:0; }
.pp-play-catname { font-size:15px; font-weight:700; color:#4a5568; margin-bottom:8px; }
/* 2列。1366px の左カラム（約920px）で1列約440px＝最長「フーレセラピー（足踏み）」180px＋
   ボタン群148px でも折り返さない（§34の換算：15px の全角1文字≒15px） */
.pp-plays { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px 24px; }
.pp-play { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:4px 2px; border-bottom:1px solid #f1f3f8; }
.pp-play-name { font-size:15px; color:#2d3748; white-space:nowrap; }
.pp-rate { display:flex; gap:4px; flex:0 0 auto; }
.pp-rate label { display:inline-flex; }
.pp-rate input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.pp-rate span { display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:30px; font-size:15px; cursor:pointer; border-radius:6px;
  border:1px solid #e2e6ee; background:#fff; color:#b6bdca; }
.pp-rate span:hover { border-color:var(--color-primary); }
.pp-rate input:checked + span { border-color:#5b4bb5; background:#efeafc; color:#3f3480;
  font-weight:700; }
.pp-rate input:checked + span.is-x { border-color:#c05c5c; background:#fdeeee; color:#a33c3c; }
/* 自己紹介の簡易エディタ枠（決定658）。枠そのものは rich_editor.css が正本。 */
.pp-editor-block { margin-top:14px; }
.pp-editor-label { font-size:15px; font-weight:700; color:#4a5568; margin-bottom:2px; }

/* 対応エリア／NGエリア（決定661）：都道府県ごとの折りたたみ・閲覧のみ */
.pp-checks-row { display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:12px; }
.pp-chk { display:flex; align-items:center; gap:6px; font-size:15px; color:#2d3748;
  cursor:pointer; white-space:nowrap; }
.pp-area { border:1px solid #e2e6ee; border-radius:8px; margin-bottom:8px; background:#fff; }
.pp-area > summary { list-style:none; cursor:pointer; padding:9px 12px;
  display:flex; align-items:center; gap:10px; font-size:15px; white-space:nowrap; }
.pp-area > summary::-webkit-details-marker { display:none; }
.pp-area > summary::before { content:"▶"; color:#8a93a5; font-size:14px; }
.pp-area[open] > summary::before { content:"▼"; }
.pp-area-pref { font-weight:700; color:#2d3748; min-width:72px; }
.pp-area-count { font-size:14px; font-weight:700; color:#5b4bb5; min-width:78px; }
.pp-area-count.is-none { color:#98a0b0; font-weight:400; }
.pp-area-preview { font-size:14px; color:#8a93a5; flex:1 1 0; min-width:0;
  overflow:hidden; }
.pp-area-locked { font-size:14px; color:#98a0b0; flex:0 0 auto; }
.pp-area-cities { display:flex; flex-wrap:wrap; gap:6px 10px;
  padding:4px 12px 12px 34px; border-top:1px solid #f1f3f8; }
.pp-area-cities span { font-size:15px; color:#2d3748; background:#f4f5f9;
  border:1px solid #e6e9f0; border-radius:999px; padding:3px 12px; white-space:nowrap; }

/* ══════════════════════════════════════════════════════════════
   一覧ページの絞り込み部品（共通・憲法§14／ui-edit §54）
   正＝キャスト一覧。顧客一覧も同じ markup（shared/templates/_macros/list_filter.html）と
   同じクラスを使う。**画面ごとにコピペしない。**
   クラス名の接頭辞 `cl-` は元がキャスト一覧(cast list)だった名残。共有部品になった今も
   改名しない（改名は cast_list.html の広範囲の書き換えになり、得るものが無い）。
   元は cast_list.html のインライン <style> にあった（2026-09-18 にここへ移設・値は不変）。
   ══════════════════════════════════════════════════════════════ */

/* 絞り込みカード：フリーワードが左端・最大幅の主操作。補助（店舗select等）はその右。 */
.cl-filter { border: 1px solid #e2e8f0; margin-bottom: 12px; width: fit-content; max-width: 100%; }
.cl-filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.cl-filter-main { flex: 1 1 340px; min-width: 260px; }   /* 主操作：残り幅を吸う（§4） */
.cl-filter-main .form-input { width: 100%; }
.cl-filter-field { flex: 0 0 auto; }
.cl-filter-label { font-size: 14px; color: #4a5568; display: block; margin-bottom: 3px; }
.cl-filter-actions { display: flex; gap: 6px; }

/* 絞り込みチップ。href・選択中判定・件数は画面側が決め、ここは見た目だけ。
   未選択＝白背景＋グレー枠＋濃グレー文字（件数は細字）。選択中＝紫塗り＋白文字。
   文字サイズは憲法§10（管理画面は14px以上・12/13px禁止）を満たす（チップ15px・行ラベル14px）。 */
.cl-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:4px;
         font-size:15px;line-height:1.4;text-decoration:none;white-space:nowrap;
         background:#fff;border:1px solid #d7dce3;color:#4a5568;}
.cl-chip:hover{background:#f3effc;border-color:#c4b5ea;}
.cl-chip .n{font-size:15px;font-weight:400;color:#718096;}
.cl-chip.is-on{background:var(--color-primary);border-color:var(--color-primary);
               color:#fff;font-weight:700;}
.cl-chip.is-on .n{color:#fff;}
.cl-chip .n.alert{color:#c53030;font-weight:700;}   /* 件数があるときだけ赤 */
.cl-chip .n.warn{color:#c05621;font-weight:700;}    /* 件数があるときだけ橙 */
.cl-chip.is-on .n.alert,.cl-chip.is-on .n.warn{color:#fff;}
.cl-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.cl-row-label{font-size:14px;color:#a0aec0;white-space:nowrap;margin-right:2px;}
/* 2段目は1段目の内側（決定407）。左の縦線＋短い横線で入れ子を示す。 */
.cl-nest{position:relative;margin-left:28px;padding-left:14px;margin-top:6px;}
.cl-nest::before{content:"";position:absolute;left:0;top:-6px;bottom:50%;
                 border-left:1px solid #d7dce3;border-bottom:1px solid #d7dce3;
                 width:10px;border-bottom-left-radius:4px;}
/* 折りたたみ（キャスト一覧の採用ファネル／顧客一覧のアコーディオン）。既定で閉じる1行。 */
.cl-funnel{margin-top:10px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;}
.cl-funnel>summary{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;
                   cursor:pointer;font-size:15px;color:#4a5568;list-style:none;}
.cl-funnel>summary::-webkit-details-marker{display:none;}
.cl-funnel>summary::before{content:"\25b6";font-size:14px;color:#a0aec0;}
.cl-funnel[open]>summary::before{content:"\25bc";}
.cl-funnel>summary .period{font-size:14px;color:#718096;}
.cl-funnel-body{padding:0 12px 10px;}

/* ══════════════════════════════════════════════════════════════
   顧客一覧 KPI帯（B）：1行4枚・見出しなし。①だけ大きくする（北極星）。
   定義文はここに出さない（D5「定義と集計」へ集約）。
   ══════════════════════════════════════════════════════════════ */
.kpi-band { position: relative; display: grid; gap: 12px; margin-bottom: 16px;
            grid-template-columns: 1.6fr 1fr 1fr 1fr; align-items: stretch; }
@media (max-width: 1100px) { .kpi-band { grid-template-columns: 1fr 1fr; } }
.kpi-card { display: flex; flex-direction: column; padding: 16px; min-height: 118px;
            background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
            text-align: left; text-decoration: none; color: inherit; }
a.kpi-card { cursor: pointer; }
a.kpi-card:hover { background: #f5f3fb; }
.kpi-card .kpi-label { font-size: 14px; color: #718096; margin-bottom: 4px; }
.kpi-card .kpi-value { font-size: 1.8rem; font-weight: 700; color: #2d3748; line-height: 1.2; }
.kpi-card .kpi-sub { font-size: 14px; color: #718096; margin-top: auto; padding-top: 10px; }
/* ①北極星：他3枚より大きい数字＋進捗バー。役割色は :root の変数のみ（§62）。 */
.kpi-card.is-primary { border: 2px solid var(--role-customer-accent);
                       background: var(--role-customer-bg); min-height: 150px; }
.kpi-card.is-primary .kpi-label { color: var(--role-customer-accent); font-weight: 700; }
.kpi-card.is-primary .kpi-value { font-size: 2.6rem; color: var(--role-customer-accent); }
.kpi-card.is-primary .kpi-goal { font-size: 1.1rem; font-weight: 400; color: #718096; }
.kpi-bar { height: 6px; border-radius: 3px; background: #fff; margin-top: 8px; overflow: hidden; }
.kpi-bar > span { display: block; height: 100%; background: var(--role-customer-accent); }
/* 集計時刻：帯の右端に1箇所だけ置く（カードごとに出さない） */
.kpi-asof { position: absolute; top: -18px; right: 0; font-size: 14px; color: #a0aec0;
            white-space: nowrap; }
/* アコーディオン（D1〜D5）の中身。**顧客編集の顧客価値サマリ（`.cvs-tbl`）と同じ
   「ラベル｜値」の縦一列テーブル**に揃える（決定303・§23。迷ったら顧客詳細と同じにする）。
   `table-layout: fixed` ＋ ラベル列の固定幅で、**5本とも列位置が一致**する。
   ラベル列 230px の根拠：店舗別内訳に出る店舗名の最長が**15文字**（全角）で、
   14px フォントなら 15×14＝210px、左右padding 8px×2 を足して 226px → 230px。
   省略（ellipsis）はしない＝入らない値は折り返して全文見せる（§23/§34）。 */
.kpi-deftbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kpi-deftbl th, .kpi-deftbl td {
    border-bottom: 1px solid #eef1f5;
    padding: 6px 8px;
    font-size: 14px;
    line-height: 1.5;
    vertical-align: middle;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.kpi-deftbl th { width: 230px; font-weight: 700; color: #5f6672; background: #f1f3f6; }
.kpi-deftbl td { color: #2d3748; }
.kpi-deftbl tr:last-child th, .kpi-deftbl tr:last-child td { border-bottom: none; }