/* ==========================================================================
   株式会社新日本エネックス 顧客管理システム — Design System v3
   業務用 Web アプリケーション向け
   - 情報密度と洗練の両立
   - ニュートラルを基盤にブランド色をアクセントとして使う
   - プロ品質のインタラクション・タイポ・スペース
   ========================================================================== */

:root {
    /* ===== ブランドカラー ===== */
    --brand-950: #071b33;
    --brand-900: #0b2545;
    --brand-800: #13315c;
    --brand-700: #1a4480;
    --brand-600: #24578d;
    --brand-500: #2e6bb8;
    --brand-400: #5b8dd0;
    --brand-300: #95b6de;
    --brand-200: #c7d7ec;
    --brand-100: #e5edf7;
    --brand-50:  #f2f6fb;

    /* ===== セマンティック ===== */
    --success-700: #15803d;
    --success:     #16a34a;
    --success-500: #22c55e;
    --success-100: #dcfce7;
    --success-50:  #f0fdf4;

    --warning-700: #a16207;
    --warning:     #b45309;
    --warning-500: #eab308;
    --warning-100: #fef3c7;
    --warning-50:  #fffbeb;

    --danger-700:  #991b1b;
    --danger:      #b91c1c;
    --danger-500:  #ef4444;
    --danger-100:  #fee2e2;
    --danger-50:   #fef2f2;

    --info-700:    #1e40af;
    --info:        #1d4ed8;
    --info-500:    #3b82f6;
    --info-100:    #dbeafe;
    --info-50:     #eff6ff;

    /* ===== ニュートラル（僅かに冷色） ===== */
    --gray-25:  #fcfcfd;
    --gray-50:  #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* ===== レイアウト ===== */
    --sidebar-w:    240px;
    --sidebar-w-sm: 208px;
    --header-h:     52px;

    /* ===== 角丸 ===== */
    --radius-xs: 4px;
    --radius:    7px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-2xl: 18px;
    --radius-pill: 999px;

    /* ===== 影（レイヤード） ===== */
    --shadow-xs: 0 1px 1px rgba(15,23,42,.04);
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.03);
    --shadow:    0 2px 4px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md: 0 6px 14px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
    --shadow-lg: 0 12px 28px rgba(15,23,42,.12), 0 4px 10px rgba(15,23,42,.05);
    --shadow-focus: 0 0 0 3px rgba(46,107,184,.18);

    /* ===== 遷移 ===== */
    --t-fast: .12s ease;
    --t:      .18s ease;
    --t-slow: .3s cubic-bezier(.22,.61,.36,1);

    /* ===== タイポ ===== */
    --ff: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
          "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
    --ff-mono: "SF Mono", "Menlo", "Consolas", ui-monospace, monospace;

    --fs-xs:   11px;
    --fs-sm:   12px;
    --fs-base: 13.5px;
    --fs-md:   14.5px;
    --fs-lg:   16.5px;
    --fs-xl:   19px;
    --fs-2xl:  23px;
    --fs-3xl:  28px;

    --lh-tight: 1.3;
    --lh-base:  1.55;
    --lh-loose: 1.7;

    /* ===== スペース（4px ベース） ===== */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
}

/* ==========================================================================
   1. ベース
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: var(--ff);
    font-feature-settings: "palt" 1;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--gray-800);
    background: var(--gray-50);
}

body {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(46,107,184,.04), transparent 60%),
        var(--gray-50);
    background-attachment: fixed;
}

::selection { background: var(--brand-200); color: var(--brand-900); }

hr {
    border: 0;
    border-top: 1px solid var(--gray-200);
    opacity: 1;
    margin: var(--sp-4) 0;
}

a {
    color: var(--brand-600);
    text-decoration: none;
    transition: color var(--t-fast);
}
a:hover {
    color: var(--brand-800);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

/* 見出し */
h1, .h1 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.015em; line-height: var(--lh-tight); color: var(--gray-900); }
h2, .h2 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; line-height: var(--lh-tight); color: var(--gray-900); }
h3, .h3 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.005em; line-height: var(--lh-tight); color: var(--gray-800); }
h4, .h4 { font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-tight); color: var(--gray-800); }
h5, .h5 { font-size: var(--fs-base); font-weight: 600; line-height: var(--lh-tight); color: var(--gray-800); }
h6, .h6 { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-tight); color: var(--gray-700); letter-spacing: .01em; }

.page-title {
    border-left: 3px solid var(--brand-500);
    padding-left: var(--sp-3);
    font-weight: 600;
    color: var(--gray-900);
    letter-spacing: -.015em;
}

/* Bootstrap 色の上書き */
.btn-primary, .bg-primary { background-color: var(--brand-500) !important; border-color: var(--brand-500) !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--brand-700) !important; border-color: var(--brand-700) !important; }
.text-primary { color: var(--brand-600) !important; }
.btn-outline-primary { color: var(--brand-600); border-color: var(--brand-300); background: #fff; }
.btn-outline-primary:hover { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.border-primary { border-color: var(--brand-500) !important; }

.text-danger  { color: var(--danger) !important; }
.text-success { color: var(--success-700) !important; }
.text-warning { color: var(--warning) !important; }
.text-info    { color: var(--info) !important; }
.text-muted   { color: var(--gray-500) !important; }

.bg-success { background-color: var(--success) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-danger  { background-color: var(--danger)  !important; }
.bg-info    { background-color: var(--info)    !important; }
.bg-light   { background-color: var(--gray-50) !important; }

/* ==========================================================================
   2. レイアウト
   ========================================================================== */

/* ---- ヘッダ ---- */
.navbar.bg-dark {
    background: linear-gradient(180deg, var(--brand-900) 0%, var(--brand-800) 100%) !important;
    min-height: var(--header-h);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: relative;
}
.navbar.bg-dark::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(600px 100px at 20% -50%, rgba(91,141,208,.2), transparent 70%);
    pointer-events: none;
}
.navbar-brand {
    font-weight: 600;
    letter-spacing: -.005em;
    color: #fff !important;
    position: relative;
}
.navbar-brand i { color: var(--brand-300); }

.navbar .form-control {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
    color: #fff;
    transition: background var(--t), color var(--t), border-color var(--t);
    backdrop-filter: blur(10px);
}
.navbar .form-control::placeholder { color: rgba(255,255,255,.5); }
.navbar .form-control:focus {
    background: #fff;
    color: var(--gray-800);
    border-color: var(--brand-300);
    box-shadow: 0 0 0 3px rgba(165,193,227,.25);
}

.navbar a .bi {
    transition: color var(--t-fast);
}

/* ---- サイドバー ---- */
.sidebar {
    background: #fff !important;
    border-right: 1px solid var(--gray-200);
    min-height: calc(100vh - var(--header-h));
    font-size: 13px;
}
.sidebar .nav-link {
    color: var(--gray-700) !important;
    border-radius: var(--radius);
    padding: .45rem .7rem !important;
    margin: 1px 6px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
    transition: all var(--t-fast);
}
.sidebar .nav-link i {
    color: var(--gray-500);
    width: 1.1rem;
    font-size: 15px;
    flex-shrink: 0;
    transition: color var(--t-fast);
}
.sidebar .nav-link:hover {
    background: var(--brand-50);
    color: var(--brand-800) !important;
}
.sidebar .nav-link:hover i { color: var(--brand-600); }
.sidebar .nav-link.active {
    background: linear-gradient(90deg, var(--brand-100) 0%, var(--brand-50) 100%) !important;
    color: var(--brand-800) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--brand-500);
}
.sidebar .nav-link.active i { color: var(--brand-700); }

/* セクション見出し */
.sidebar .small.text-muted.fw-semibold {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--gray-400) !important;
    padding-top: var(--sp-4) !important;
    padding-bottom: var(--sp-1) !important;
}

.sidebar .form-control-sm {
    font-size: 12.5px;
    background: var(--gray-50);
    border-color: var(--gray-200);
    border-radius: var(--radius);
}
.sidebar .form-control-sm:focus {
    background: #fff;
    border-color: var(--brand-300);
}

main {
    background: transparent;
    min-height: calc(100vh - var(--header-h));
}

/* ---- パンくず ---- */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
}
.breadcrumb-item a { color: var(--gray-500); }
.breadcrumb-item a:hover { color: var(--brand-600); text-decoration: none; }
.breadcrumb-item.active { color: var(--gray-700); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--gray-400);
    padding: 0 var(--sp-1);
}

/* ==========================================================================
   3. カード・表面
   ========================================================================== */

.card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    background: #fff;
    transition: box-shadow var(--t);
}
.card-body { padding: var(--sp-4); }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--gray-100);
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--gray-700);
    padding: .65rem .95rem;
    letter-spacing: .005em;
}
.card-header.fw-semibold { font-weight: 600 !important; }
.card-footer {
    background: var(--gray-25);
    border-top: 1px solid var(--gray-100);
    padding: .65rem .95rem;
}

/* ==========================================================================
   4. テーブル
   ========================================================================== */

.table {
    font-size: var(--fs-base);
    color: var(--gray-800);
    margin-bottom: 0;
    vertical-align: middle;
}
.table thead.table-light th {
    background: var(--gray-50);
    color: var(--gray-500);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
    padding: .6rem .85rem;
}
.table tbody td {
    border-top: 1px solid var(--gray-100);
    padding: .65rem .85rem;
    color: var(--gray-800);
}
.table tbody tr:first-child td { border-top: none; }
.table-hover tbody tr {
    transition: background var(--t-fast);
}
.table-hover tbody tr:hover {
    background: var(--brand-50);
}

.table-sm td, .table-sm th { padding: .5rem .7rem; }

/* 金額セル */
.table .text-end { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* 空状態セル */
.table tbody td.empty-cell {
    text-align: center;
    color: var(--gray-400);
    padding: var(--sp-8) !important;
    font-style: normal;
    background: var(--gray-25);
}

.table .btn-group-sm .btn {
    padding: .22rem .5rem;
    font-size: 12px;
}

.table tfoot.table-light td {
    background: var(--gray-50);
    border-top: 2px solid var(--gray-300);
    font-weight: 600;
}

.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }

/* ==========================================================================
   5. バッジ
   ========================================================================== */

.badge {
    font-weight: 500;
    letter-spacing: .005em;
    padding: .28em .6em;
    border-radius: var(--radius-xs);
    font-size: 10.5px;
}
.badge.bg-primary   { background: var(--brand-500) !important; }
.badge.bg-secondary { background: var(--gray-500) !important; }
.badge.bg-info      { background: var(--info) !important; }
.badge.bg-success   { background: var(--success) !important; }
.badge.bg-warning   { background: var(--warning) !important; color: #fff !important; }
.badge.bg-danger    { background: var(--danger) !important; }

/* ソフト（モダン業務UI定番） */
.badge-soft {
    font-weight: 500;
    letter-spacing: .005em;
    padding: .25em .6em;
    border-radius: var(--radius-xs);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: .25em;
    line-height: 1.4;
    border: 1px solid transparent;
}
.badge-soft-primary { background: var(--brand-50);    color: var(--brand-700);   border-color: var(--brand-100); }
.badge-soft-success { background: var(--success-50);  color: var(--success-700); border-color: var(--success-100); }
.badge-soft-warning { background: var(--warning-50);  color: var(--warning-700); border-color: var(--warning-100); }
.badge-soft-danger  { background: var(--danger-50);   color: var(--danger-700);  border-color: var(--danger-100); }
.badge-soft-info    { background: var(--info-50);     color: var(--info-700);    border-color: var(--info-100); }
.badge-soft-muted   { background: var(--gray-50);     color: var(--gray-600);    border-color: var(--gray-200); }

/* ==========================================================================
   6. フォーム
   ========================================================================== */

.form-control, .form-select {
    border-color: var(--gray-300);
    border-radius: var(--radius);
    color: var(--gray-800);
    background-color: #fff;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    font-size: var(--fs-base);
}
.form-control::placeholder { color: var(--gray-400); }
.form-control:hover, .form-select:hover { border-color: var(--gray-400); }
.form-control:focus, .form-select:focus {
    border-color: var(--brand-500);
    box-shadow: var(--shadow-focus);
    outline: 0;
}
.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    background: var(--gray-50);
    color: var(--gray-600);
    cursor: not-allowed;
}

.form-label { color: var(--gray-700); font-weight: 500; margin-bottom: .3rem; font-size: var(--fs-sm); }
.form-label.small { color: var(--gray-600); font-weight: 500; font-size: 12px; margin-bottom: .25rem; }
.form-text { color: var(--gray-500); font-size: 11.5px; }

.form-control-sm, .form-select-sm { font-size: 12.5px; padding: .32rem .6rem; }

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

.form-check-input { border-color: var(--gray-400); }
.form-check-input:checked { background-color: var(--brand-500); border-color: var(--brand-500); }
.form-check-input:focus { box-shadow: var(--shadow-focus); border-color: var(--brand-500); }
.form-check-label { color: var(--gray-700); }

.form-switch .form-check-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%2394a3b8'/%3E%3C/svg%3E"); }
.form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); }

@media (max-width: 767.98px) {
    .btn-sm { min-height: 38px; }
    .form-control-sm, .form-select-sm { min-height: 38px; }
    .form-check-input { width: 1.1em; height: 1.1em; }
}

/* ==========================================================================
   7. ボタン
   ========================================================================== */

.btn {
    font-weight: 500;
    border-radius: var(--radius);
    transition: all var(--t-fast);
    letter-spacing: .005em;
    position: relative;
}
.btn:focus-visible { box-shadow: var(--shadow-focus); }
.btn:active { transform: translateY(.5px); }

.btn-sm { font-size: 12.5px; padding: .34rem .7rem; }

.btn-primary {
    background: linear-gradient(180deg, var(--brand-500), var(--brand-600)) !important;
    border-color: var(--brand-600) !important;
    box-shadow: 0 1px 1px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:hover {
    background: linear-gradient(180deg, var(--brand-600), var(--brand-700)) !important;
    border-color: var(--brand-700) !important;
}

.btn-outline-secondary {
    color: var(--gray-700);
    border-color: var(--gray-300);
    background: #fff;
}
.btn-outline-secondary:hover {
    background: var(--gray-50);
    color: var(--gray-800);
    border-color: var(--gray-400);
}

.btn-outline-info { color: var(--info); border-color: var(--brand-300); }
.btn-outline-info:hover { background: var(--info); color: #fff; border-color: var(--info); }

.btn-outline-success { color: var(--success-700); border-color: var(--success-100); background: #fff; }
.btn-outline-success:hover { background: var(--success); color: #fff; border-color: var(--success); }

.btn-outline-warning { color: var(--warning); border-color: var(--warning-100); background: #fff; }
.btn-outline-warning:hover { background: var(--warning); color: #fff; border-color: var(--warning); }

.btn-outline-danger { color: var(--danger); border-color: var(--danger-100); background: #fff; }
.btn-outline-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.btn-link { color: var(--brand-600); text-decoration: none; }
.btn-link:hover { color: var(--brand-800); text-decoration: underline; }

/* ==========================================================================
   8. ナビタブ
   ========================================================================== */

.nav-tabs {
    border-bottom: 1px solid var(--gray-200);
    gap: 2px;
    margin-bottom: var(--sp-4);
}
.nav-tabs .nav-link {
    color: var(--gray-500);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .6rem 1rem;
    font-weight: 500;
    font-size: var(--fs-sm);
    transition: color var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: -1px;
}
.nav-tabs .nav-link:hover {
    border-bottom-color: var(--gray-300);
    color: var(--gray-800);
}
.nav-tabs .nav-link.active {
    color: var(--brand-700);
    border-bottom-color: var(--brand-500);
    background: transparent;
    font-weight: 600;
}
.nav-tabs .nav-link i { color: currentColor; opacity: .8; }

/* ==========================================================================
   9. ページネーション
   ========================================================================== */

.pagination { margin: 0; }
.page-link {
    color: var(--brand-600);
    border: 1px solid var(--gray-200);
    font-size: 12.5px;
    padding: .35rem .65rem;
}
.page-link:hover { background: var(--brand-50); border-color: var(--gray-300); }
.page-item.active .page-link {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}
.page-item.disabled .page-link { color: var(--gray-400); background: #fff; }

/* ==========================================================================
   10. アラート・モーダル・ドロップダウン
   ========================================================================== */

.alert {
    border-radius: var(--radius);
    border: 1px solid transparent;
    box-shadow: none;
    font-size: var(--fs-base);
    padding: .7rem 1rem;
}
.alert-info    { background: var(--info-50);    color: var(--info-700);    border-color: var(--info-100); }
.alert-warning { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-100); }
.alert-success { background: var(--success-50); color: var(--success-700); border-color: var(--success-100); }
.alert-danger  { background: var(--danger-50);  color: var(--danger-700);  border-color: var(--danger-100); }

.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.modal-header {
    background: transparent;
    border-bottom: 1px solid var(--gray-100);
    padding: .85rem 1.1rem;
}
.modal-title { font-size: var(--fs-md); font-weight: 600; letter-spacing: -.005em; }
.modal-body { padding: 1.1rem; }
.modal-footer {
    background: var(--gray-25);
    border-top: 1px solid var(--gray-100);
    padding: .7rem 1.1rem;
}

.btn-close { transition: opacity var(--t-fast); }

.dropdown-menu {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: .3rem;
    font-size: var(--fs-base);
}
.dropdown-item {
    border-radius: 5px;
    font-size: var(--fs-base);
    padding: .4rem .7rem;
    color: var(--gray-700);
    transition: background var(--t-fast);
}
.dropdown-item:hover { background: var(--brand-50); color: var(--brand-800); }
.dropdown-item:active { background: var(--brand-500); color: #fff; }
.dropdown-item.text-danger:hover { background: var(--danger-50); color: var(--danger); }
.dropdown-divider { margin: .3rem 0; border-color: var(--gray-200); }

/* ==========================================================================
   11. KPI カード・ボーダーアクセント
   ========================================================================== */

.card.border-primary,
.card.border-success,
.card.border-warning,
.card.border-danger,
.card.border-info {
    border-left: 1px solid var(--gray-200) !important;
    border-right: 1px solid var(--gray-200) !important;
    border-bottom: 1px solid var(--gray-200) !important;
    border-top-width: 3px !important;
}
.card.border-primary { border-top-color: var(--brand-500) !important; }
.card.border-success { border-top-color: var(--success)   !important; }
.card.border-warning { border-top-color: var(--warning)   !important; }
.card.border-danger  { border-top-color: var(--danger)    !important; }
.card.border-info    { border-top-color: var(--info)      !important; }

.kpi-value {
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--gray-900);
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.kpi-label {
    font-size: 11.5px;
    color: var(--gray-500);
    font-weight: 500;
    letter-spacing: .02em;
}

/* ==========================================================================
   12. 詳細画面コンポーネント（Detail page）
   ========================================================================== */

/* ---- Detail hero ---- */
.detail-hero {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: 1.1rem 1.25rem;
    margin-bottom: var(--sp-5);
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.detail-hero::before {
    content: "";
    position: absolute;
    top: 0; right: 0; width: 320px; height: 100%;
    background: radial-gradient(400px 120px at 100% 0%, rgba(46,107,184,.06), transparent 70%);
    pointer-events: none;
}
.detail-hero > * { position: relative; }

.detail-hero .hero-avatar {
    width: 56px; height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: -.02em;
    box-shadow: 0 4px 12px rgba(46,107,184,.3), inset 0 1px 0 rgba(255,255,255,.2);
    position: relative;
}
.detail-hero .hero-avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.15), transparent 50%);
    pointer-events: none;
}
.detail-hero .hero-avatar i { font-size: 26px; }

.detail-hero .hero-avatar.accent-success { background: linear-gradient(135deg, var(--success-500), var(--success-700)); box-shadow: 0 4px 12px rgba(21,128,61,.3), inset 0 1px 0 rgba(255,255,255,.2); }
.detail-hero .hero-avatar.accent-warning { background: linear-gradient(135deg, #f59e0b, var(--warning-700)); box-shadow: 0 4px 12px rgba(161,98,7,.3), inset 0 1px 0 rgba(255,255,255,.2); }
.detail-hero .hero-avatar.accent-danger  { background: linear-gradient(135deg, var(--danger-500), var(--danger-700)); box-shadow: 0 4px 12px rgba(153,27,27,.3), inset 0 1px 0 rgba(255,255,255,.2); }
.detail-hero .hero-avatar.accent-info    { background: linear-gradient(135deg, var(--info-500), var(--info-700)); box-shadow: 0 4px 12px rgba(30,64,175,.3), inset 0 1px 0 rgba(255,255,255,.2); }
.detail-hero .hero-avatar.accent-muted   { background: linear-gradient(135deg, var(--gray-400), var(--gray-600)); box-shadow: 0 4px 12px rgba(71,85,105,.25), inset 0 1px 0 rgba(255,255,255,.15); }

.detail-hero .hero-body { flex: 1; min-width: 220px; }
.detail-hero .hero-id {
    font-size: 10.5px;
    color: var(--gray-500);
    font-family: var(--ff-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 3px;
    font-weight: 500;
}
.detail-hero .hero-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.3;
    margin: 0 0 4px;
    letter-spacing: -.015em;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.detail-hero .hero-subtitle {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 8px;
}
.detail-hero .hero-subtitle .amount-display { color: var(--gray-800); }
.detail-hero .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--gray-200);
}
.detail-hero .hero-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.detail-hero .hero-meta i { color: var(--gray-400); font-size: 13px; }
.detail-hero .hero-meta a { color: var(--brand-600); font-weight: 500; }

.detail-hero .hero-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    align-self: flex-start;
}

/* ---- Info grid（dl.row 置換、洗練版） ---- */
.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
.info-grid .info-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: var(--fs-base);
    align-items: baseline;
    column-gap: 14px;
    transition: background var(--t-fast);
}
.info-grid .info-row:last-child { border-bottom: none; }
.info-grid .info-row:hover {
    background: var(--gray-25);
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: var(--radius-xs);
}
.info-grid .info-label {
    color: var(--gray-500);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .005em;
}
.info-grid .info-value {
    color: var(--gray-800);
    word-break: break-word;
    line-height: 1.55;
}
.info-grid .info-value.empty { color: var(--gray-400); }
.info-grid .info-value.emphasis { font-weight: 600; color: var(--gray-900); }
.info-grid .info-value.mono { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }

.info-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
}
.info-grid-2col .info-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: var(--fs-base);
    align-items: baseline;
    column-gap: 14px;
    transition: background var(--t-fast);
}
.info-grid-2col .info-row:hover {
    background: var(--gray-25);
}
@media (max-width: 767.98px) {
    .info-grid-2col { grid-template-columns: 1fr; column-gap: 0; }
}

/* ---- セクションカード ---- */
.section-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-4);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--t);
}
.section-card:hover { box-shadow: var(--shadow-sm); }

.section-card .section-header {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, #fff 0%, var(--gray-25) 100%);
    gap: 8px;
}
.section-card .section-header h2,
.section-card .section-header h3 {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--gray-700);
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: .5rem;
    text-transform: uppercase;
}
.section-card .section-header h3 i,
.section-card .section-header h2 i {
    color: var(--brand-500);
    font-size: 15px;
    text-transform: none;
}
.section-card .section-actions { display: flex; gap: 6px; align-items: center; }
.section-card .section-body { padding: 1rem 1.25rem; }
.section-card .section-body-flush { padding: 0; }
.section-card.accent-primary {
    border-top: 2px solid var(--brand-500);
}
.section-card.accent-primary .section-header {
    background: linear-gradient(180deg, var(--brand-50) 0%, #fff 100%);
}

/* ---- Entity reference ---- */
.entity-ref {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    background: var(--brand-50);
    color: var(--brand-700) !important;
    border-radius: var(--radius);
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--brand-100);
    transition: all var(--t-fast);
    line-height: 1.4;
    max-width: 100%;
}
.entity-ref:hover {
    background: var(--brand-100);
    border-color: var(--brand-200);
    color: var(--brand-800) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}
.entity-ref i { color: var(--brand-500); font-size: 12.5px; }
.entity-ref .entity-id {
    font-family: var(--ff-mono);
    color: var(--brand-600);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .01em;
}

.entity-ref.ref-neutral { background: var(--gray-50); color: var(--gray-700) !important; border-color: var(--gray-200); }
.entity-ref.ref-neutral i, .entity-ref.ref-neutral .entity-id { color: var(--gray-500); }
.entity-ref.ref-neutral:hover { background: var(--gray-100); color: var(--gray-900) !important; }

.entity-ref.ref-success { background: var(--success-50); color: var(--success-700) !important; border-color: var(--success-100); }
.entity-ref.ref-success i, .entity-ref.ref-success .entity-id { color: var(--success); }

.entity-ref.ref-warning { background: var(--warning-50); color: var(--warning-700) !important; border-color: var(--warning-100); }
.entity-ref.ref-warning i, .entity-ref.ref-warning .entity-id { color: var(--warning); }

/* ---- メタチップ ---- */
.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--gray-600);
    line-height: 1.4;
}
.meta-chip i { color: var(--gray-400); font-size: 13px; }

/* ---- Timeline ---- */
.timeline {
    position: relative;
    padding-left: 24px;
    margin: 0;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--gray-200), var(--gray-100));
}
.timeline .t-item {
    position: relative;
    padding-bottom: 16px;
}
.timeline .t-item:last-child { padding-bottom: 0; }
.timeline .t-item::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand-500);
    z-index: 1;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--gray-100);
}
.timeline .t-item.t-success::before { border-color: var(--success); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--success-100); }
.timeline .t-item.t-warning::before { border-color: var(--warning); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--warning-100); }
.timeline .t-item.t-danger::before  { border-color: var(--danger);  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--danger-100); }
.timeline .t-item.t-muted::before   { border-color: var(--gray-400); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--gray-100); }

.timeline .t-time {
    font-size: 11px;
    color: var(--gray-500);
    font-family: var(--ff-mono);
    letter-spacing: .03em;
    margin-bottom: 2px;
}
.timeline .t-title {
    font-size: var(--fs-base);
    color: var(--gray-800);
    font-weight: 500;
    margin: 0 0 3px;
}
.timeline .t-desc {
    font-size: 12px;
    color: var(--gray-600);
}

/* ---- Stat strip ---- */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.stat-item {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: all var(--t);
}
.stat-item:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.stat-item::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gray-200);
    transition: background var(--t);
}
.stat-item.accent-primary::before { background: linear-gradient(90deg, var(--brand-400), var(--brand-600)); }
.stat-item.accent-success::before { background: linear-gradient(90deg, var(--success-500), var(--success-700)); }
.stat-item.accent-warning::before { background: linear-gradient(90deg, #f59e0b, var(--warning-700)); }
.stat-item.accent-danger::before  { background: linear-gradient(90deg, var(--danger-500), var(--danger-700)); }
.stat-item.accent-info::before    { background: linear-gradient(90deg, var(--info-500), var(--info-700)); }

.stat-item .stat-label {
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
}
.stat-item .stat-label i { color: var(--gray-400); font-size: 12px; }
.stat-item .stat-value {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.15;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.stat-item .stat-trend { font-size: 11.5px; margin-top: 4px; }

/* ---- Avatar ---- */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-100), var(--brand-200));
    color: var(--brand-800);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
    letter-spacing: -.01em;
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.avatar-sm { width: 22px; height: 22px; font-size: 10px; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; border-radius: var(--radius-lg); }
.avatar-xl { width: 64px; height: 64px; font-size: 22px; border-radius: var(--radius-lg); }
.avatar-rect { border-radius: var(--radius); }
.avatar.avatar-muted { background: linear-gradient(135deg, var(--gray-100), var(--gray-200)); color: var(--gray-700); }
.avatar.avatar-success { background: linear-gradient(135deg, var(--success-100), #86efac); color: var(--success-700); }
.avatar.avatar-warning { background: linear-gradient(135deg, var(--warning-100), #fcd34d); color: var(--warning-700); }
.avatar.avatar-danger  { background: linear-gradient(135deg, var(--danger-100), #fca5a5); color: var(--danger-700); }

/* ---- 金額表示 ---- */
.amount-display {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.015em;
}
.amount-display.amount-lg {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--gray-900);
}
.amount-display.amount-md {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
}
.amount-display .unit {
    font-size: 11.5px;
    color: var(--gray-500);
    font-weight: 400;
    margin-left: 2px;
    letter-spacing: 0;
}

/* ---- Related list ---- */
.related-list { list-style: none; padding: 0; margin: 0; }
.related-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-100);
    font-size: var(--fs-base);
    transition: background var(--t-fast);
}
.related-list li:hover { background: var(--gray-25); }
.related-list li:last-child { border-bottom: none; }
.related-list .related-label {
    color: var(--gray-500);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.related-list .related-label i { color: var(--gray-400); }
.related-list .related-value {
    color: var(--gray-800);
    font-weight: 500;
    font-size: 12.5px;
    text-align: right;
}
.related-list .related-value a { text-decoration: none; }

/* ---- Progress steps ---- */
.progress-steps {
    display: flex;
    gap: 4px;
    align-items: stretch;
    flex-wrap: wrap;
}
.progress-steps .step {
    flex: 1 1 90px;
    min-width: 90px;
    padding: 10px 12px;
    background: var(--gray-25);
    border-radius: var(--radius);
    text-align: center;
    border: 1px solid var(--gray-100);
    font-size: 11.5px;
    color: var(--gray-500);
    position: relative;
    transition: all var(--t);
}
.progress-steps .step .step-num {
    display: inline-flex;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-600);
    align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 5px;
}
.progress-steps .step.done {
    background: var(--success-50);
    border-color: var(--success-100);
    color: var(--success-700);
}
.progress-steps .step.done .step-num {
    background: var(--success);
    color: #fff;
    box-shadow: 0 1px 3px rgba(21,128,61,.3);
}
.progress-steps .step.current {
    background: linear-gradient(180deg, var(--brand-50), #fff);
    border-color: var(--brand-200);
    color: var(--brand-800);
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(46,107,184,.08), var(--shadow-sm);
}
.progress-steps .step.current .step-num {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    box-shadow: 0 2px 6px rgba(46,107,184,.4);
}

/* ---- Tab count ---- */
.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: var(--gray-200);
    color: var(--gray-700);
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 600;
    margin-left: 5px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.nav-tabs .nav-link.active .tab-count {
    background: var(--brand-500);
    color: #fff;
}

/* ==========================================================================
   13. ツールバー
   ========================================================================== */

.toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}
.toolbar > .toolbar-filters {
    display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
}
.toolbar > .toolbar-actions {
    display: flex; gap: var(--sp-2); align-items: center;
}

/* ==========================================================================
   14. リストグループ
   ========================================================================== */

.list-group { border-radius: var(--radius); }
.list-group-item {
    border-color: var(--gray-100);
    color: var(--gray-800);
    padding: .7rem .9rem;
    font-size: var(--fs-base);
    transition: background var(--t-fast);
}
.list-group-item-action:hover { background: var(--gray-25); }
.list-group-flush .list-group-item { border-left: 0; border-right: 0; }
.list-group-flush .list-group-item:first-child { border-top: 0; }
.list-group-flush .list-group-item:last-child { border-bottom: 0; }
.list-group-item a { color: var(--brand-600); }

/* ==========================================================================
   15. プログレスバー
   ========================================================================== */

.progress {
    height: 8px;
    background-color: var(--gray-100);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress-bar {
    background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
    border-radius: var(--radius-pill);
    transition: width .4s ease;
}
.progress-bar.bg-success { background: linear-gradient(90deg, var(--success-500), var(--success-700)) !important; }
.progress-bar.bg-warning { background: linear-gradient(90deg, #f59e0b, var(--warning-700)) !important; }
.progress-bar.bg-danger  { background: linear-gradient(90deg, var(--danger-500), var(--danger-700)) !important; }
.progress-bar.bg-info    { background: linear-gradient(90deg, var(--info-500), var(--info-700)) !important; }

/* ==========================================================================
   16. ステータスドット
   ========================================================================== */

.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}
.status-dot.on   { background: var(--success); box-shadow: 0 0 0 2px var(--success-100); }
.status-dot.off  { background: var(--gray-400); box-shadow: 0 0 0 2px var(--gray-100); }
.status-dot.warn { background: var(--warning); box-shadow: 0 0 0 2px var(--warning-100); }
.status-dot.err  { background: var(--danger);  box-shadow: 0 0 0 2px var(--danger-100); }
.status-dot.info { background: var(--info);    box-shadow: 0 0 0 2px var(--info-100); }

/* ==========================================================================
   17. 空状態
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    color: var(--gray-500);
}
.empty-state i { font-size: 40px; color: var(--gray-300); margin-bottom: var(--sp-3); }
.empty-state h3 { color: var(--gray-700); font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.empty-state p { color: var(--gray-500); font-size: var(--fs-base); margin-bottom: var(--sp-3); }

/* ==========================================================================
   18. 汎用ユーティリティ
   ========================================================================== */

.text-xs { font-size: 11px; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.bg-app { background: var(--gray-50); }
.fw-medium { font-weight: 500; }
.font-mono { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }

.text-subtle { color: var(--gray-500); }
.text-strong { color: var(--gray-900); font-weight: 600; }

kbd {
    background: var(--gray-100);
    color: var(--gray-800);
    border: 1px solid var(--gray-300);
    border-bottom-width: 2px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-family: var(--ff-mono);
}

.hr-soft { border-top: 1px solid var(--gray-100); margin: var(--sp-4) 0; }

/* Bootstrap Icons 微調整 */
.bi { vertical-align: -.15em; }
.btn .bi { vertical-align: -.12em; }

/* ==========================================================================
   19. フォーカス可視化
   ========================================================================== */

*:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 2px;
}
.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible { outline: none; }

/* ==========================================================================
   20. レスポンシブ
   ========================================================================== */

@media (max-width: 767.98px) {
    .navbar .navbar-brand span,
    .navbar .d-md-inline { display: none !important; }
    .navbar-brand { font-size: 15px; }
    .navbar form[role="search"] { max-width: 100% !important; flex: 1; }
    .navbar .d-flex.align-items-center.gap-3 { gap: .6rem !important; }

    main { padding: var(--sp-3) !important; }
    .page-title { font-size: var(--fs-lg); }
    .card-body { padding: var(--sp-3); }

    .table-responsive { border-radius: var(--radius); }
    .table { font-size: 12.5px; }
    .table td, .table th { white-space: nowrap; }

    .row.g-3 > [class*="col-md-"] { margin-bottom: var(--sp-2); }
    .modal-dialog { margin: .5rem; }
    .modal-lg { max-width: calc(100% - 1rem); }

    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
    .nav-tabs .nav-link { white-space: nowrap; }

    .d-flex.justify-content-end.gap-2 { flex-wrap: wrap; }
    .d-flex.justify-content-between { flex-wrap: wrap; gap: var(--sp-2); }

    .row.g-2 > [class*="col-md-"],
    .row.g-3 > [class*="col-md-"] { margin-bottom: .35rem; }

    .offcanvas-start .sidebar { border-right: none; min-height: auto; }

    dl.row dt { font-size: 11.5px; margin-top: var(--sp-1); }
    dl.row dd { margin-bottom: .55rem; }

    .toolbar { flex-direction: column; }
    .toolbar > .toolbar-filters,
    .toolbar > .toolbar-actions { width: 100%; }

    /* Detail hero モバイル */
    .detail-hero { padding: .9rem 1rem; gap: .75rem; border-radius: var(--radius-lg); }
    .detail-hero .hero-avatar { width: 44px; height: 44px; font-size: 18px; }
    .detail-hero .hero-avatar i { font-size: 20px; }
    .detail-hero .hero-actions { width: 100%; }
    .detail-hero .hero-title { font-size: 1.05rem; }

    /* Info grid モバイル */
    .info-grid .info-row,
    .info-grid-2col .info-row { grid-template-columns: 100px 1fr; column-gap: 8px; padding: 8px 0; }
    .info-grid .info-label,
    .info-grid-2col .info-label { font-size: 11px; }

    /* Stat strip モバイル */
    .stat-strip { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
    .stat-item { padding: 10px 12px; }
    .stat-item .stat-value { font-size: 1.1rem; }

    /* Progress steps モバイル */
    .progress-steps .step { font-size: 10.5px; min-width: 60px; padding: 6px 4px; }
    .progress-steps .step .step-num { width: 20px; height: 20px; }

    /* Section card モバイル */
    .section-card .section-header { padding: .6rem .8rem; }
    .section-card .section-body { padding: .85rem 1rem; }
}

/* dl.row 既存互換（廃止予定） */
dl.row { margin-bottom: 0; }
dl.row dt, dl.row dd {
    margin-bottom: .45rem;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}
dl.row dt {
    color: var(--gray-500);
    font-weight: 500;
    font-size: 12.5px;
}
dl.row dd {
    color: var(--gray-800);
    word-break: break-word;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .sidebar { min-width: var(--sidebar-w-sm) !important; max-width: var(--sidebar-w-sm) !important; }
    .sidebar .nav-link { font-size: 12.5px; padding: .35rem .6rem !important; }
}

/* ==========================================================================
   22. 業務文脈コンポーネント（Business-meaningful）
   ========================================================================== */

/* ---- Record header (Detail Hero より洗練・情報特化型) ---- */
.record-header {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: 20px 24px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.record-header::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-500) 0%, var(--brand-400) 50%, transparent 100%);
}
.record-header .record-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--gray-500);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-family: var(--ff);
    margin-bottom: 6px;
}
.record-header .record-type i {
    color: var(--brand-500);
    font-size: 12px;
}
.record-header .record-type .record-id {
    color: var(--gray-400);
    font-family: var(--ff-mono);
    font-weight: 500;
    letter-spacing: .03em;
}
.record-header .record-title {
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--gray-900);
    letter-spacing: -.02em;
    line-height: 1.25;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.record-header .record-kicker {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 12px;
}
.record-header .record-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.record-header .record-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

/* ---- Snapshot row: 業務的に重要な主要数値を4つまで ---- */
.snapshot-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-100);
}
.snapshot-row .snap-item {
    padding: 0 16px;
    border-right: 1px solid var(--gray-100);
}
.snapshot-row .snap-item:first-child { padding-left: 0; }
.snapshot-row .snap-item:last-child { border-right: none; padding-right: 0; }
.snapshot-row .snap-label {
    font-size: 10.5px;
    color: var(--gray-500);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.snapshot-row .snap-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.015em;
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}
.snapshot-row .snap-value .snap-unit {
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 400;
}
.snapshot-row .snap-value .snap-sub {
    font-size: 11px;
    color: var(--gray-400);
    font-weight: 400;
    margin-left: 4px;
}
.snapshot-row .snap-value.snap-muted { color: var(--gray-400); font-weight: 500; font-size: 13px; }

@media (max-width: 767.98px) {
    .snapshot-row { grid-template-columns: repeat(2, 1fr); }
    .snapshot-row .snap-item { padding: 8px 12px; border-right: none; border-bottom: 1px solid var(--gray-100); }
    .snapshot-row .snap-item:nth-child(2n) { border-right: none; }
}

/* ---- Journey strip: 業務プロセスの現在位置を可視化 ---- */
.journey-strip {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-xs);
}
.journey-strip .journey-title {
    font-size: 10.5px;
    color: var(--gray-500);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.journey-strip .journey-title i { color: var(--brand-500); font-size: 12px; }

.journey-stages {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    padding: 2px 0;
}
.journey-stages::-webkit-scrollbar { height: 4px; }
.journey-stages::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }

.journey-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 90px;
    position: relative;
    text-align: center;
}
.journey-stage + .journey-stage::before {
    content: "";
    position: absolute;
    top: 16px;
    left: calc(-50% + 18px);
    width: calc(100% - 36px);
    height: 2px;
    background: var(--gray-200);
}
.journey-stage.done + .journey-stage::before,
.journey-stage.current + .journey-stage::before {
    background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
}
.journey-stage .stage-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 12px;
    font-weight: 600;
    position: relative;
    z-index: 1;
    transition: all var(--t);
}
.journey-stage .stage-dot i { font-size: 14px; }
.journey-stage .stage-label {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 5px;
    font-weight: 500;
    white-space: nowrap;
}
.journey-stage .stage-sub {
    font-size: 10px;
    color: var(--gray-400);
    margin-top: 1px;
    font-family: var(--ff-mono);
}

.journey-stage.done .stage-dot {
    background: var(--brand-50);
    border-color: var(--brand-300);
    color: var(--brand-600);
}
.journey-stage.current .stage-dot {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    border-color: var(--brand-700);
    color: #fff;
    box-shadow: 0 0 0 4px var(--brand-100), 0 2px 6px rgba(46,107,184,.35);
}
.journey-stage.current .stage-label {
    color: var(--brand-800);
    font-weight: 700;
}
.journey-stage.current .stage-sub {
    color: var(--brand-600);
}
.journey-stage.lost .stage-dot {
    background: var(--danger-50);
    border-color: var(--danger-100);
    color: var(--danger);
}
.journey-stage.lost .stage-label { color: var(--danger-700); }

/* ---- Entity card: entity-ref より情報量の多いリンクカード ---- */
.entity-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    text-decoration: none !important;
    color: var(--gray-800) !important;
    transition: all var(--t-fast);
    position: relative;
}
.entity-card:hover {
    border-color: var(--brand-300);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.entity-card .entity-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius);
    background: var(--brand-50);
    color: var(--brand-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    border: 1px solid var(--brand-100);
}
.entity-card.ec-success .entity-icon { background: var(--success-50); color: var(--success-700); border-color: var(--success-100); }
.entity-card.ec-warning .entity-icon { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-100); }
.entity-card.ec-danger .entity-icon  { background: var(--danger-50); color: var(--danger-700); border-color: var(--danger-100); }
.entity-card.ec-muted .entity-icon   { background: var(--gray-50); color: var(--gray-600); border-color: var(--gray-200); }

.entity-card .entity-meta {
    flex: 1;
    min-width: 0;
}
.entity-card .entity-top {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--gray-500);
    letter-spacing: .03em;
    font-family: var(--ff-mono);
}
.entity-card .entity-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 1px 0 2px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.entity-card .entity-sub {
    font-size: 11.5px;
    color: var(--gray-500);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.entity-card .entity-chevron {
    color: var(--gray-300);
    flex-shrink: 0;
    transition: color var(--t-fast), transform var(--t-fast);
}
.entity-card:hover .entity-chevron {
    color: var(--brand-500);
    transform: translateX(2px);
}

/* ---- Action panel: 次にやるべきこと ---- */
.action-panel {
    background: linear-gradient(135deg, var(--brand-50) 0%, #fff 100%);
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.action-panel::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: var(--brand-500);
}
.action-panel .action-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--brand-700);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.action-panel .action-header i {
    font-size: 14px;
    color: var(--brand-500);
}
.action-panel .action-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 4px;
}
.action-panel .action-desc {
    font-size: 12.5px;
    color: var(--gray-600);
    margin-bottom: 10px;
    line-height: 1.5;
}
.action-panel .action-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ---- Money flow: 入金フロー可視化 ---- */
.money-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}
.money-flow .money-node {
    text-align: center;
}
.money-flow .money-label {
    font-size: 10.5px;
    color: var(--gray-500);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 4px;
}
.money-flow .money-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.015em;
    line-height: 1.2;
}
.money-flow .money-value.money-received { color: var(--success-700); }
.money-flow .money-value.money-remaining { color: var(--warning-700); }
.money-flow .money-value.money-paid { color: var(--success-700); }
.money-flow .money-value.money-overdue { color: var(--danger-700); }
.money-flow .money-value .money-unit { font-size: 11px; color: var(--gray-500); font-weight: 400; margin-left: 2px; }
.money-flow .money-arrow {
    color: var(--gray-300);
    font-size: 16px;
}
@media (max-width: 767.98px) {
    .money-flow { grid-template-columns: 1fr; gap: 4px; padding: 10px; }
    .money-flow .money-arrow { display: none; }
    .money-flow .money-node { padding: 6px 0; border-bottom: 1px solid var(--gray-100); }
    .money-flow .money-node:last-child { border-bottom: none; }
}

/* ---- Fact list: Key:Value 形式の横並び（1レコードに1個） ---- */
.fact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.fact-list > li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 90px;
}
.fact-list .fact-label {
    font-size: 10.5px;
    color: var(--gray-500);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 600;
}
.fact-list .fact-value {
    font-size: 13px;
    color: var(--gray-800);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.fact-list .fact-value i { color: var(--gray-400); font-size: 12px; }

/* ---- Completeness bar: 書類/情報の充足度 ---- */
.completeness {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.completeness .completeness-bar {
    flex: 1;
    height: 6px;
    background: var(--gray-100);
    border-radius: 3px;
    overflow: hidden;
    max-width: 120px;
}
.completeness .completeness-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-500), var(--success));
    transition: width .4s ease;
}
.completeness.low .completeness-fill {
    background: linear-gradient(90deg, #f59e0b, var(--warning));
}
.completeness.very-low .completeness-fill {
    background: linear-gradient(90deg, var(--danger-500), var(--danger));
}
.completeness .completeness-text {
    color: var(--gray-600);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ---- Info field groups (強化版 info-grid) ---- */
.field-group { margin-bottom: 20px; }
.field-group:last-child { margin-bottom: 0; }
.field-group .field-group-title {
    font-size: 10.5px;
    color: var(--gray-500);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: 6px;
}
.field-group .field-group-title i {
    color: var(--brand-500);
    font-size: 13px;
    text-transform: none;
}

/* ==========================================================================
   印刷
   ========================================================================== */

@media print {
    .sidebar, .navbar, .toolbar, footer, .btn, .dropdown, .hero-actions, .section-actions { display: none !important; }
    main { padding: 0 !important; }
    .card, .section-card, .detail-hero { border: 1px solid #000 !important; box-shadow: none !important; break-inside: avoid; }
    .detail-hero::before { display: none; }
    body { background: #fff; }
}

/* ============================================================
   フィールド用途別 幅ユーティリティ
   - 用途に応じたmax-widthを定義。Bootstrap grid (col-md-X) 内で有効
   ============================================================ */
.input-w-postal    { max-width: 8rem !important; }   /* 郵便番号: 8 文字 */
.input-w-tel       { max-width: 10rem !important; }  /* 電話番号: 13 文字 */
.input-w-date      { max-width: 10rem !important; }  /* 日付 */
.input-w-datetime  { max-width: 14rem !important; }  /* 日時 */
.input-w-code      { max-width: 8rem !important; }   /* コード系: 10 桁 */
.input-w-name      { max-width: 12rem !important; }  /* 氏名 (1 要素) */
.input-w-kana      { max-width: 14rem !important; }  /* カナ */
.input-w-email     { max-width: 22rem !important; }  /* メールアドレス */
.input-w-amount    { max-width: 12rem !important; text-align: right; }  /* 金額 */
.input-w-number-sm { max-width: 6rem !important; text-align: right; }   /* 数量 */
.input-w-pref      { max-width: 8rem !important; }   /* 都道府県 */
.input-w-city      { max-width: 14rem !important; }  /* 市区町村 */
.input-w-url       { max-width: 28rem !important; }  /* URL */

/* number input の矢印を右詰めの視認性向上 */
input[type="number"].input-w-amount,
input[type="number"].input-w-number-sm {
    font-variant-numeric: tabular-nums;
}

/* Flatpickr altInput は元の input と同じ class を継承するので、同幅になる */
.flatpickr-input ~ .flatpickr-input.form-control {
    max-width: inherit !important;
}