/* ui-theme.css: 見やすさのための色と文字の決まり（2026-10-20 徹くん選択の案1+案3）
   決まり:
   - 背景は白と薄いグレー。押すボタンは青1色（取り消せない操作だけ赤）
   - 強い色は 注意=黄 / 危険=赤 / 完了=緑 の3つだけ。それ以外のバッジは薄い色にする
   - 文字は最小14px（表の中だけ、列幅の都合で13px）。文字と背景の濃さの差は 4.5:1 以上（WCAG 2.2 AA）
   - 状態は色だけに頼らない（ガントは記号＋文字＋不可は斜線）
   各ページの <style> と ui-motion.css の後に読み込むので、ここが勝つ。画面の仕組み（JS）には触らない */

:root {
    --ui-bg: #f4f6f9;
    --ui-surface: #ffffff;
    --ui-border: #d5dbe3;
    --ui-text: #1f2937;          /* 白地で 14.7:1 */
    --ui-text-muted: #4b5563;    /* 白地で 7.6:1 */
    --ui-primary: #1d4ed8;       /* 白地で 6.7:1 */
    --ui-primary-hover: #1e40af;
    --ui-primary-soft: #dbeafe;
    --ui-primary-softtext: #1e3a8a;
    --ui-ok: #15803d;            /* 完了・可能 白地で 5.0:1 */
    --ui-ok-soft: #dcfce7;
    --ui-warn: #f59e0b;
    --ui-warn-soft: #fef3c7;
    --ui-warn-text: #78350f;     /* 薄い黄の上で 8.4:1 */
    --ui-danger: #b91c1c;        /* 白地で 6.5:1 */
    --ui-danger-soft: #fee2e2;
    --ui-neutral-soft: #e5e7eb;
    --ui-neutral-softtext: #1f2937;
    --bs-body-bg: var(--ui-bg);
    --bs-body-color: var(--ui-text);
    --bs-secondary-color: var(--ui-text-muted);
    --bs-link-color: var(--ui-primary);
    --bs-link-color-rgb: 29, 78, 216;
}

body {
    background-color: var(--ui-bg) !important;
    color: var(--ui-text) !important;
    font-family: "Segoe UI", "Hiragino Sans", "Yu Gothic UI", Meiryo, system-ui, sans-serif !important;
    font-size: 1rem;
    line-height: 1.6;
}

/* ---- 文字の大きさ: 小さすぎる文字を14pxまで引き上げる（インラインの font-size にも効かせる） ---- */
.small, small, .form-text, .form-label, .badge,
[style*="font-size: 0.5"], [style*="font-size:0.5"],
[style*="font-size: 0.6"], [style*="font-size:0.6"],
[style*="font-size: 0.7"], [style*="font-size:0.7"],
[style*="font-size: 0.8"], [style*="font-size:0.8"] {
    font-size: 0.875rem !important;
}
/* 表の中は列が狭いので13pxまで */
table .small, table small, table .badge,
table [style*="font-size: 0.5"], table [style*="font-size:0.5"],
table [style*="font-size: 0.6"], table [style*="font-size:0.6"],
table [style*="font-size: 0.7"], table [style*="font-size:0.7"],
table [style*="font-size: 0.8"], table [style*="font-size:0.8"] {
    font-size: 0.8125rem !important;
}
.text-muted, .text-secondary { color: var(--ui-text-muted) !important; }
h1, h2, h3, h4, h5, h6, .card-header { color: var(--ui-text); }

/* ---- カード・面 ---- */
.card { border-color: var(--ui-border) !important; }
.card-header, .card-footer { background-color: var(--ui-surface) !important; }
.bg-light { background-color: #f8fafc !important; }

/* ---- ボタン: 押す操作は青1色。取り消せない操作（削除など）だけ赤 ---- */
.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-dark, .btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ui-primary);
    --bs-btn-border-color: var(--ui-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ui-primary-hover);
    --bs-btn-hover-border-color: var(--ui-primary-hover);
    --bs-btn-active-bg: var(--ui-primary-hover);
    --bs-btn-active-border-color: var(--ui-primary-hover);
    --bs-btn-disabled-bg: #93a3c4;
    --bs-btn-disabled-border-color: #93a3c4;
    color: #fff !important;
    background-color: var(--bs-btn-bg) !important;
    border-color: var(--bs-btn-border-color) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-warning:hover, .btn-dark:hover, .btn-secondary:hover {
    background-color: var(--ui-primary-hover) !important;
}
.btn-outline-primary, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-dark, .btn-outline-secondary {
    --bs-btn-color: var(--ui-primary);
    --bs-btn-border-color: #9db4e8;
    --bs-btn-hover-color: var(--ui-primary-hover);
    --bs-btn-hover-bg: var(--ui-primary-soft);
    --bs-btn-hover-border-color: var(--ui-primary);
    --bs-btn-active-bg: var(--ui-primary-soft);
    --bs-btn-active-color: var(--ui-primary-hover);
    color: var(--ui-primary) !important;
    background-color: #fff !important;
    border-color: #9db4e8 !important;
}
.btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-info:hover, .btn-outline-warning:hover, .btn-outline-dark:hover, .btn-outline-secondary:hover {
    background-color: var(--ui-primary-soft) !important;
}
.btn-danger { background-color: var(--ui-danger) !important; border-color: var(--ui-danger) !important; color: #fff !important; }
.btn-outline-danger { color: var(--ui-danger) !important; border-color: #f0a8a8 !important; background-color: #fff !important; }
.btn-outline-danger:hover { background-color: var(--ui-danger-soft) !important; }
.btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }

/* ---- バッジ: 薄い色＋濃い文字。強い塗りは危険（赤）だけ ---- */
.badge.bg-primary, .badge.bg-info { background-color: var(--ui-primary-soft) !important; color: var(--ui-primary-softtext) !important; }
.badge.bg-secondary, .badge.bg-dark, .badge.bg-light { background-color: var(--ui-neutral-soft) !important; color: var(--ui-neutral-softtext) !important; }
.badge.bg-success { background-color: var(--ui-ok-soft) !important; color: #14532d !important; }
.badge.bg-warning { background-color: var(--ui-warn-soft) !important; color: var(--ui-warn-text) !important; }
.badge.bg-danger { background-color: var(--ui-danger) !important; color: #fff !important; }
.badge { font-weight: 700; border: 1px solid rgba(0, 0, 0, 0.08); }
.badge .text-danger { color: var(--ui-danger) !important; }

/* ---- 文字の色（白地で 4.5:1 以上になる濃さへ） ---- */
.text-primary, .text-info { color: var(--ui-primary) !important; }
.text-success { color: var(--ui-ok) !important; }
.text-warning { color: #92400e !important; }
.text-danger { color: var(--ui-danger) !important; }

/* ---- お知らせの帯: 青緑をやめて薄い青に ---- */
.alert-info { background-color: #eff6ff !important; color: var(--ui-primary-softtext) !important; border-color: #bfdbfe !important; }

/* ---- 「AIからの提案」欄の紫の線を、決まりの青に ---- */
#ai-card { border-left-color: var(--ui-primary) !important; }

/* ---- テスト支援の浮いている箱: 触っていない時は薄くして、内容を隠しにくくする ---- */
#floating-test-controller { opacity: 0.55; transition: opacity 0.2s ease; }
#floating-test-controller:hover, #floating-test-controller:focus-within { opacity: 1; }

/* ---- 状態は色だけに頼らない（案3） ---- */
/* ガントの回答: 記号の後ろに文字（可・相談・不可）を出し、不可は斜線の模様にする。ui-gantt-* は admin.html / contractor.html が付ける */
.ui-gantt-badge { font-size: 0.875rem !important; padding: 0.3em 0.5em; min-width: 3.2em; }
/* ガントは「可」を一番目立たせる（選ぶのは可の日）。不可は数が多いので薄い赤＋斜線で目立たせない */
.badge.ui-gantt-badge.bg-success { background-color: var(--ui-ok) !important; color: #fff !important; }
.badge.ui-gantt-ng {
    background-color: var(--ui-danger-soft) !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
    background-image: repeating-linear-gradient(45deg, rgba(185, 28, 28, 0.12) 0 3px, transparent 3px 7px) !important;
}
.badge.ui-gantt-ng .text-danger, .badge.ui-gantt-ng span { color: #991b1b !important; }
.ui-gantt-tri { border: 1px dashed #b45309 !important; }
.cell-ng {
    background-image: repeating-linear-gradient(45deg, rgba(185, 28, 28, 0.08) 0 6px, transparent 6px 12px) !important;
}
.cell-triangle { border-style: dashed !important; }

/* 業者番号（No.01 …）。管理者向け画面だけ。contractor-no.js が出す */
.cno {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #1e3a8a;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    padding: 0 .35em;
    margin-right: .3em;
    font-size: .8125rem;
    white-space: nowrap;
    display: inline-block;
    line-height: 1.4;
}