/* ============================================================
   UI/UX 配色刷新テーマ（#page-content.ui-refresh スコープ＝全アプリ共通）
   ------------------------------------------------------------
   base.html の #page-content に ui-refresh クラスが付与されており、
   全アプリの画面本体（ナビバー・サイドバーを除く）に一括適用される。
   フォント・行高・情報密度は変えず、色とあしらいのみを刷新する。
   ============================================================ */

.ui-refresh {
    /* デザイントークン */
    /* アクセント色は白文字を載せるボタンの背景に使うため、コントラスト比を
       WCAG AA（4.5:1）以上に保つこと。以前の #b6c9f3 は 1.66:1 しかなく、
       登録・新規登録・編集ボタンが「押せないボタン」に見えていた
       （2026-08-21、UX/UI評価レポート D-03）。淡色が要る箇所は --accent-weak を使う */
    --accent:            #2563eb;   /* アクセント（ボタン・リンク・選択）白文字で 5.17:1 */
    --accent-strong:     #1d4ed8;   /* ホバー・アクティブ 6.70:1 */
    --accent-weak:       #dbe6fe;   /* アクセントの淡色（選択行背景など。文字を載せない） */
    --surface:           #f7f8fa;   /* ページ背景 */
    --card-bg:           #ffffff;   /* カード背景 */
    --line:              #cbd5e1;   /* 境界線 */
    --line-soft:         #e2e8f0;   /* やわらかい境界線 */
    --filter-bg:         #eef2f7;   /* フィルタバー背景 */
    --header-bg:         #eef2f7;   /* テーブルヘッダー背景 */
    --header-fg:         #334155;   /* テーブルヘッダー文字 */
    --zebra:             #f8fafc;   /* ゼブラ縞（偶数行） */
    --amount-fg:         #1f2937;   /* 金額列の文字色 */
    --text:              #24303d;   /* 基本テキスト */
}

/* ── ページ全体の背景・テキスト色（角丸・余白はページ端に出るため付けない） ── */
.ui-refresh {
    background: var(--surface);
    color: var(--text);
}

/* ── 見出し ── */
.ui-refresh h6,
.ui-refresh h1.h6 {
    font-weight: 700;
    color: #12283d;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.ui-refresh h6::before,
.ui-refresh h1.h6::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 1.1em;
    background: var(--accent);
    border-radius: 2px;
}

/* ── フィルタバー（緑枠 → ニュートラルなカード風） ── */
.ui-refresh .filter-row {
    --filter-border-color: var(--line);   /* 共有 .filter-row の CSS 変数を上書き */
    background: var(--filter-bg) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(20, 40, 70, 0.06) !important;
}
/* Bootstrap の bg-success-subtle を打ち消す（フィルタバーのみ） */
.ui-refresh .filter-row.bg-success-subtle {
    background: var(--filter-bg) !important;
}
.ui-refresh .filter-row .form-label {
    color: #52606d;
    font-weight: 600;
}

/* ── ボタン ── */
.ui-refresh .btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-strong);
    --bs-btn-hover-border-color: var(--accent-strong);
    --bs-btn-active-bg: var(--accent-strong);
    --bs-btn-active-border-color: var(--accent-strong);
}

/* ── テーブル ── */
.ui-refresh .access-table {
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.07);
}
.ui-refresh .access-table thead th {
    background: var(--header-bg) !important;
    color: var(--header-fg) !important;
    font-weight: 700;
    border-bottom: 2px solid var(--accent) !important;
    border-color: var(--line-soft) !important;
}
.ui-refresh .access-table thead th a.text-dark {
    color: var(--header-fg) !important;
}
.ui-refresh .access-table tbody td {
    border-color: var(--line-soft) !important;
}
/* ゼブラ縞（偶数行） */
.ui-refresh .access-table tbody tr:nth-child(even) > td {
    background: var(--zebra);
}
/* 金額列: 等幅数字＋濃色で強調 */
.ui-refresh .access-table td.col-amt,
.ui-refresh .access-table td.text-end {
    font-variant-numeric: tabular-nums;
    color: var(--amount-fg);
    font-weight: 600;
}

/* ── 選択行ハイライト（新アクセントに合わせる） ── */
.ui-refresh tbody tr.list-row-active {
    outline: 2px solid var(--accent);
}
.ui-refresh tbody tr.list-row-active > td,
.ui-refresh tbody tr.list-row-active > th {
    background-color: var(--accent-weak) !important;
}

/* ── ページネーション ── */
.ui-refresh .pagination {
    --bs-pagination-color: var(--accent);
    --bs-pagination-active-bg: var(--accent);
    --bs-pagination-active-border-color: var(--accent);
    --bs-pagination-hover-color: var(--accent-strong);
}

/* ============================================================
   伝票入力・詳細フォーム（.kanri-entry-form）の配色刷新
   entry_form.css の青ラベル・黒枠を、一覧と同系のニュートラル配色へ。
   entry_form.css より高い詳細度（.ui-refresh を1つ多く含む）＋!important で上書きする。
   レイアウト・行高・操作は変更しない。
   ============================================================ */

/* ラベル: 青 → 落ち着いたスレート。項目名として読みやすくする */
.ui-refresh .kanri-entry-form .form-label,
.ui-refresh .kanri-entry-form thead th,
.ui-refresh .kanri-entry-form #summary-section .text-muted {
    color: var(--header-fg) !important;
    font-weight: 600 !important;
}

/* カード・明細テーブルの枠: 黒(#333) → やわらかい境界 */
.ui-refresh .kanri-entry-form .card {
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(20, 40, 70, 0.07) !important;
}
.ui-refresh .kanri-entry-form .table-bordered {
    border-color: var(--line) !important;
}
.ui-refresh .kanri-entry-form .table-bordered th:first-child,
.ui-refresh .kanri-entry-form .table-bordered td:first-child,
.ui-refresh .kanri-entry-form .table-bordered th:last-child,
.ui-refresh .kanri-entry-form .table-bordered td:last-child {
    border-color: var(--line) !important;
}

/* 明細テーブルのヘッダー: 一覧と同じグレー背景。
   以前は下に青い2pxのアクセント線を引いていたが、border-collapse の都合で
   両端の列（Noと右端）だけ色が乗らず、線が途中から始まって見えていた
   （2026-08-22、ユーザー指摘で削除）。見出しの下線は入力フォーム共通の
   1px（entry_form.css の .kanri-entry-form thead th）に任せる。 */
.ui-refresh .kanri-entry-form thead th {
    background: var(--header-bg) !important;
    border-color: var(--line-soft) !important;
    /* 下線だけは全列そろえる。両端の列は隣の枠線と合成されて色が変わり、
       ここを指定しないと線が途中で色が切り替わって見える */
    border-bottom-color: var(--line) !important;
}

/* 明細の行区切りをやわらかく */
.ui-refresh .kanri-entry-form .table tbody td {
    border-bottom-color: var(--line-soft) !important;
}
.ui-refresh .kanri-entry-form .table tbody tr.meisai-row-sub td,
.ui-refresh .kanri-entry-form .table tbody tr.meisai-row td[rowspan="2"] {
    border-bottom-color: var(--line) !important;
}

/* 上部アクションボタン（売上参照・日報取込・日報参照）をテーマ色へ統一 */
.ui-refresh #uriage-ref-btn,
.ui-refresh #nippo-ref-btn {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: #fff;
}
.ui-refresh #nippo-tenki-btn {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-strong);
    --bs-btn-hover-border-color: var(--accent-strong);
}

/* ── フッター合計（#summary-section）の視認性向上 ── */
.ui-refresh #summary-section .row > div {
    white-space: nowrap;              /* 「消費税(外税)」等のラベル折返しを防止 */
}
/* 総合計を大きく・太字・アクセント色で強調し、上に区切り線 */
.ui-refresh #summary-section .sum-total {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--accent) !important;
    padding-top: 4px;
    margin-top: 2px;
    border-top: 1px solid var(--line);
}

/* ── 詳細画面（is-detail）: 青枠 → やわらかいスレート ── */
.ui-refresh .is-detail .kanri-entry-form .card,
.ui-refresh .is-detail .kanri-entry-form .table-bordered,
.ui-refresh .is-detail .kanri-entry-form thead th {
    border-color: var(--line) !important;
}
/* 詳細画面の見出し下線も、入力画面と同じ色にそろえる
   （2026-08-22、青い下線を消す指示にあわせて。ここを残すと詳細画面だけ青が残る） */
.ui-refresh .is-detail .kanri-entry-form thead th {
    border-bottom-color: var(--line) !important;
}
.ui-refresh .is-detail .kanri-entry-form .table-bordered th,
.ui-refresh .is-detail .kanri-entry-form .table-bordered td {
    border-left-color: var(--line-soft) !important;
    border-right-color: var(--line-soft) !important;
}
.ui-refresh .is-detail .kanri-entry-form .table tbody tr.meisai-row-sub td,
.ui-refresh .is-detail .kanri-entry-form .table tbody tr.meisai-row td[rowspan="2"] {
    border-bottom-color: var(--line) !important;
}
.ui-refresh .is-detail .kanri-entry-form .table tbody tr:last-child td {
    border-bottom-color: var(--line) !important;
}

/* ── 一覧の合計行（2026-08-21、UX/UI評価レポート D-08）──
   締め作業で合計を突き合わせられるよう、一覧の最下部に固定で1行出す。
   データ行と混同しないよう、背景と上罫線で区切って太字にする */
.ui-refresh .list-total-row td {
    background: var(--accent-weak);
    border-top: 2px solid var(--accent);
    font-weight: 700;
    color: var(--amount-fg);
    white-space: nowrap;
}

/* ── 本文へのスキップリンク（2026-08-21、UX/UI評価レポート D-18）──
   キーボードだけで操作する人が、毎回サイドバーの全項目をTabで通過せずに
   本文へ飛べるようにする。ふだんは画面外に隠しておき、Tabキーで
   フォーカスが当たったときだけ左上に現れる（マウス利用者には見えない）。 */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: #1d4ed8;
    color: #fff;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}
.skip-to-content:focus {
    left: 0;
    color: #fff;
}

/* 絞り込み中バッジ（2026-08-21、UX/UI評価レポート D-24） */
.filter-active-badge {
    background: #fff3cd;
    color: #7a5b00;
    border: 1px solid #ffe08a;
    font-weight: 600;
    cursor: help;
    white-space: nowrap;
}

/* クリアボタンの列（2026-08-22、ユーザー指示）。
   クリアボタンは絞り込み項目と同じ行の右端に置き、バッジはその真上に右寄せで出す。

   バッジは position:absolute で浮かせること。通常の縦並びにすると、列の幅が
   バッジの幅（約110px）になり、項目の多い一覧では右端に入り切らず
   クリアボタンごと次の行へ折り返してしまう（実機で確認済み）。
   浮かせれば列の幅はボタンぶん（約32px）で済み、同じ行に収まる。 */
.filter-clear-cell {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.filter-clear-cell .filter-active-badge {
    position: absolute;
    right: 0;
    bottom: 100%;
    margin-bottom: 2px;
}
/* 項目名（ラベル）が無い1段だけの絞り込み欄（支払一覧など）は、バッジを置く
   すき間が無く枠の外へはみ出してしまうため、バッジがあるときだけ枠の上を広げる。 */
.filter-row:has(.filter-clear-cell .filter-active-badge) {
    padding-top: 1.6rem !important;
}