/* アプリ独自スタイル（CSP 対応のためインライン style を廃してここへ集約） */
/* Bootstrap 5 の上に薄く被せるデザイントークン層。既存の Blade は基本そのまま。 */

/* ============================================================
 * デザイントークン
 * ============================================================ */
:root {
    /* ブランドカラー */
    --brand-primary:       #2563eb;   /* 主要アクション・アクセント */
    --brand-primary-rgb:   37, 99, 235;
    --brand-primary-hover: #1d4ed8;
    --brand-surface:       #1e293b;   /* ナビ等の濃色サーフェス */

    /* 影・角丸（ソフトで今風の見え方） */
    --app-radius:      .75rem;
    --app-shadow-sm:   0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
    --app-shadow:      0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .06);

    /* Bootstrap のプライマリ系トークンも上書き（badge 等のランタイム参照に効く） */
    --bs-primary:      var(--brand-primary);
    --bs-primary-rgb:  var(--brand-primary-rgb);
    --bs-link-color:       var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-hover);
}

/* ============================================================
 * ベース
 * ============================================================ */
body {
    background-color: #f4f6fa;
    color: #1f2733;
}

.cursor-pointer {
    cursor: pointer;
}

/* ============================================================
 * ナビゲーション
 * ============================================================ */
.navbar.bg-dark {
    background-color: var(--brand-surface) !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: .01em;
}

.navbar .nav-link {
    border-radius: .375rem;
    transition: background-color .15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    background-color: rgba(255, 255, 255, .08);
}

/* ============================================================
 * カード
 * ============================================================ */
.card {
    border: 0;
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-sm);
}

/* .shadow-sm を付けたカードは少し立体的に */
.card.shadow-sm {
    box-shadow: var(--app-shadow-sm) !important;
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #eef1f6;
    padding-top: .9rem;
    padding-bottom: .9rem;
    border-top-left-radius: var(--app-radius);
    border-top-right-radius: var(--app-radius);
}

.card-footer {
    background-color: #fff;
    border-top: 1px solid #eef1f6;
}

/* ============================================================
 * ボタン（Bootstrap 5.3 はボタン色がコンパイル値のため個別に上書き）
 * ============================================================ */
.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
}

/* ============================================================
 * フォーム（フォーカスをブランド色に統一）
 * ============================================================ */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .22);
}

/* ============================================================
 * テーブル（区切りを軽く・行に余白）
 * ============================================================ */
.table {
    --bs-table-hover-bg: rgba(var(--brand-primary-rgb), .05);
}

.table > thead.table-light th {
    background-color: #f7f9fc;
    color: #5b6675;
    font-weight: 600;
    border-bottom: 1px solid #e6eaf1;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding-top: .7rem;
    padding-bottom: .7rem;
}

/* 選択中の行（左に強調バー） */
.table-hover > tbody > tr.table-active,
.table > tbody > tr.table-active {
    --bs-table-bg-state: rgba(var(--brand-primary-rgb), .08);
    box-shadow: inset 3px 0 0 var(--brand-primary);
}

/* 行フォーカス（キーボード操作）を可視化 */
.js-estimate-row:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

/* ============================================================
 * 入力フォームのペイン（一覧が長くても追従）
 * ============================================================ */
@media (min-width: 768px) {
    .sticky-form {
        position: sticky;
        top: 1.5rem;
    }
}