/*
 * STOC 営業管理 共通テーマ（全画面共通。layouts/header.php で Bootstrap のあとに読み込む）
 * - 色はここの変数（--stoc-*）にまとめ、各画面は var(--stoc-…) で使う。Bootstrap の色クラスもこの変数で上書きする。
 * - 文字と背景の明暗差はすべて WCAG AA（4.5:1 以上）。再コールのオレンジ（#EF6C00）は白字だと 3.1:1 なので黒字（5.8:1）で使う。
 * - フォントは Windows 10 以降に標準で入っている BIZ UDPゴシック → メイリオ の順（外部からは読み込まない）。
 */
:root {
  /* 面と線 */
  --stoc-bg: #F5F7FA;            /* 画面の背景 */
  --stoc-surface: #FFFFFF;       /* 枠・カードの背景 */
  --stoc-surface-alt: #F8FAFD;   /* 枠の中の区切り（引用・プレビュー等の背景） */
  --stoc-border: #D0D7E2;        /* 枠線 */
  --stoc-border-strong: #9AA6B8; /* 押せる枠・入力欄の線 */
  /* 文字 */
  --stoc-text: #111827;          /* 本文（白に 17.7:1） */
  --stoc-text-sub: #374151;      /* 補足（白に 10.3:1。薄いグレーの文字の代わり） */
  /* 項目名のセル */
  --stoc-label-bg: #E8F0FE;
  --stoc-label-text: #0B2A5B;    /* 薄青に 12.3:1 */
  /* 操作・状態 */
  --stoc-primary: #1565C0;       /* ボタン・リンク（白字 5.75:1） */
  --stoc-primary-hover: #0D47A1;
  --stoc-danger: #D32F2F;        /* 失注・NGボタン（白字 4.98:1） */
  --stoc-danger-hover: #B71C1C;
  --stoc-success: #2E7D32;       /* アポ・契約（白字 5.13:1） */
  --stoc-success-hover: #1B5E20;
  --stoc-warning: #EF6C00;       /* 再コール（黒字 5.76:1） */
  --stoc-warning-hover: #E65100;
  --stoc-warning-text: #C2410C;  /* 白地に置くオレンジの文字（5.18:1） */
  --stoc-info: #0277BD;          /* 電話出た 等（白字 4.80:1） */
  /* 文字として使う濃い色（白・薄い色の塗りの上でも 4.5:1 以上） */
  --stoc-danger-text: #B71C1C;
  --stoc-success-text: #1B5E20;
  --stoc-info-text: #01579B;
  --stoc-info-hover: #01579B;
  --stoc-secondary: #4B5563;     /* 未対応 等（白字 7.56:1） */
  --stoc-secondary-hover: #374151;
  --stoc-neutral-bg: #E5E7EB;    /* 対象外・NG（灰色の背景に黒字 14.3:1） */
  --stoc-neutral-border: #6B7280;
  --stoc-dark: #1F2937;
  --stoc-focus: rgba(21, 101, 192, .35);

  --stoc-font: "BIZ UDPGothic", "BIZ UDPゴシック", "Meiryo", "メイリオ", "Noto Sans JP", sans-serif;

  /* Bootstrap の変数をテーマの色・フォントに合わせる */
  --bs-font-sans-serif: var(--stoc-font);
  --bs-body-font-family: var(--stoc-font);
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--stoc-text);
  --bs-body-color-rgb: 17, 24, 39;
  --bs-body-bg: var(--stoc-bg);
  --bs-emphasis-color: var(--stoc-text);
  --bs-secondary-color: var(--stoc-text-sub);
  --bs-tertiary-color: var(--stoc-text-sub);
  --bs-border-color: var(--stoc-border);
  --bs-link-color: var(--stoc-primary);
  --bs-link-color-rgb: 21, 101, 192;
  --bs-link-hover-color: var(--stoc-primary-hover);
  --bs-link-hover-color-rgb: 13, 71, 161;
  --bs-primary: #1565C0;   --bs-primary-rgb: 21, 101, 192;
  --bs-success: #2E7D32;   --bs-success-rgb: 46, 125, 50;
  --bs-danger: #D32F2F;    --bs-danger-rgb: 211, 47, 47;
  --bs-warning: #EF6C00;   --bs-warning-rgb: 239, 108, 0;
  --bs-info: #0277BD;      --bs-info-rgb: 2, 119, 189;
  --bs-secondary: #4B5563; --bs-secondary-rgb: 75, 85, 99;
  --bs-dark: #1F2937;      --bs-dark-rgb: 31, 41, 55;
  --bs-primary-text-emphasis: #0B2A5B;
  --bs-danger-text-emphasis: #8E1B1B;
  --bs-warning-text-emphasis: #7A3300;
  --bs-success-text-emphasis: #1B4D1F;
  --bs-info-text-emphasis: #01446E;
}

/* ===== 基本 ===== */
body, body.bg-light {
  background-color: var(--stoc-bg) !important;
  color: var(--stoc-text);
  font-family: var(--stoc-font);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;  /* 電話番号・件数などの桁をそろえる */
}
input, select, textarea, button, .form-control, .form-select { font-family: var(--stoc-font); font-variant-numeric: tabular-nums; }
a { color: var(--stoc-primary); }
a:hover { color: var(--stoc-primary-hover); }

/* 薄いグレーの文字は使わない（補足の文字も濃いグレーに） */
.text-muted, .text-body-secondary, .text-secondary, .text-black-50 { color: var(--stoc-text-sub) !important; }
.text-dark, .text-body { color: var(--stoc-text) !important; }
.text-primary { color: var(--stoc-primary) !important; }
.text-danger { color: var(--stoc-danger-text) !important; }
.text-success { color: var(--stoc-success-text) !important; }
.text-warning { color: var(--stoc-warning-text) !important; }
.text-info { color: var(--stoc-info-text) !important; }
.opacity-75, .opacity-50 { opacity: 1 !important; }

/* 項目名は太字・値は標準 */
th, .form-label, dt, legend, .col-form-label { font-weight: 700; }
td, dd { font-weight: 400; }

/* ===== 枠・カード・表 ===== */
.card { --bs-card-bg: var(--stoc-surface); --bs-card-border-color: var(--stoc-border); }
.card-header { background-color: var(--stoc-label-bg); color: var(--stoc-label-text); border-bottom-color: var(--stoc-border); }
.bg-white { background-color: var(--stoc-surface) !important; }
.table { --bs-table-color: var(--stoc-text); --bs-table-bg: var(--stoc-surface); --bs-table-border-color: var(--stoc-border); }
.table > thead th, .table-light, .table > :not(caption) > tr.table-light > * {
  --bs-table-bg: var(--stoc-label-bg); --bs-table-color: var(--stoc-label-text); color: var(--stoc-label-text);
}
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: #F3F6FA; }
.list-group { --bs-list-group-bg: var(--stoc-surface); --bs-list-group-border-color: var(--stoc-border); --bs-list-group-color: var(--stoc-text); }
.form-control, .form-select { border-color: var(--stoc-border-strong); color: var(--stoc-text); }
.form-control::placeholder { color: #4B5563; opacity: 1; }
.form-control:focus, .form-select:focus, .btn:focus-visible { border-color: var(--stoc-primary); box-shadow: 0 0 0 .2rem var(--stoc-focus); }
.form-check-input { border-color: var(--stoc-border-strong); }
.form-check-input:checked { background-color: var(--stoc-primary); border-color: var(--stoc-primary); }
.nav-tabs { --bs-nav-tabs-border-color: var(--stoc-border); --bs-nav-tabs-link-active-color: var(--stoc-label-text); --bs-nav-tabs-link-active-border-color: var(--stoc-border) var(--stoc-border) var(--stoc-surface); }
.nav-link { color: var(--stoc-primary); text-decoration: underline; text-underline-offset: 2px; }
.nav-link.active { text-decoration: none; font-weight: 700; }

/* ===== ボタン（押せるものは枠と色で押せると分かる形に） ===== */
.btn { font-weight: 600; }
.btn-primary   { --bs-btn-bg: var(--stoc-primary); --bs-btn-border-color: var(--stoc-primary); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--stoc-primary-hover); --bs-btn-hover-border-color: var(--stoc-primary-hover); --bs-btn-active-bg: var(--stoc-primary-hover); --bs-btn-disabled-bg: var(--stoc-primary); --bs-btn-disabled-border-color: var(--stoc-primary); }
.btn-success   { --bs-btn-bg: var(--stoc-success); --bs-btn-border-color: var(--stoc-success); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--stoc-success-hover); --bs-btn-hover-border-color: var(--stoc-success-hover); --bs-btn-active-bg: var(--stoc-success-hover); --bs-btn-disabled-bg: var(--stoc-success); --bs-btn-disabled-border-color: var(--stoc-success); }
.btn-danger    { --bs-btn-bg: var(--stoc-danger); --bs-btn-border-color: var(--stoc-danger); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--stoc-danger-hover); --bs-btn-hover-border-color: var(--stoc-danger-hover); --bs-btn-active-bg: var(--stoc-danger-hover); --bs-btn-disabled-bg: var(--stoc-danger); --bs-btn-disabled-border-color: var(--stoc-danger); }
.btn-warning   { --bs-btn-bg: var(--stoc-warning); --bs-btn-border-color: var(--stoc-warning); --bs-btn-color: var(--stoc-text); --bs-btn-hover-bg: var(--stoc-warning-hover); --bs-btn-hover-border-color: var(--stoc-warning-hover); --bs-btn-hover-color: var(--stoc-text); --bs-btn-active-bg: var(--stoc-warning-hover); --bs-btn-active-color: var(--stoc-text); --bs-btn-disabled-bg: var(--stoc-warning); --bs-btn-disabled-color: var(--stoc-text); }
.btn-info      { --bs-btn-bg: var(--stoc-info); --bs-btn-border-color: var(--stoc-info); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--stoc-info-hover); --bs-btn-hover-border-color: var(--stoc-info-hover); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--stoc-info-hover); --bs-btn-active-color: #fff; }
.btn-secondary { --bs-btn-bg: var(--stoc-secondary); --bs-btn-border-color: var(--stoc-secondary); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--stoc-secondary-hover); --bs-btn-hover-border-color: var(--stoc-secondary-hover); --bs-btn-active-bg: var(--stoc-secondary-hover); }
.btn-dark      { --bs-btn-bg: var(--stoc-dark); --bs-btn-border-color: var(--stoc-dark); }
.btn-light     { --bs-btn-bg: #fff; --bs-btn-border-color: var(--stoc-border-strong); --bs-btn-color: var(--stoc-text); --bs-btn-hover-bg: var(--stoc-label-bg); --bs-btn-hover-color: var(--stoc-label-text); }
.btn-outline-primary   { --bs-btn-color: var(--stoc-primary); --bs-btn-border-color: var(--stoc-primary); --bs-btn-hover-bg: var(--stoc-primary); --bs-btn-hover-border-color: var(--stoc-primary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--stoc-primary); --bs-btn-active-color: #fff; --bs-btn-bg: #fff; }
.btn-outline-success   { --bs-btn-color: var(--stoc-success); --bs-btn-border-color: var(--stoc-success); --bs-btn-hover-bg: var(--stoc-success); --bs-btn-hover-border-color: var(--stoc-success); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--stoc-success); --bs-btn-active-color: #fff; --bs-btn-bg: #fff; }
.btn-outline-danger    { --bs-btn-color: var(--stoc-danger); --bs-btn-border-color: var(--stoc-danger); --bs-btn-hover-bg: var(--stoc-danger); --bs-btn-hover-border-color: var(--stoc-danger); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--stoc-danger); --bs-btn-active-color: #fff; --bs-btn-bg: #fff; }
.btn-outline-warning   { --bs-btn-color: var(--stoc-warning-text); --bs-btn-border-color: var(--stoc-warning); --bs-btn-hover-bg: var(--stoc-warning); --bs-btn-hover-border-color: var(--stoc-warning); --bs-btn-hover-color: var(--stoc-text); --bs-btn-active-bg: var(--stoc-warning); --bs-btn-active-color: var(--stoc-text); --bs-btn-bg: #fff; }
.btn-outline-info      { --bs-btn-color: var(--stoc-info); --bs-btn-border-color: var(--stoc-info); --bs-btn-hover-bg: var(--stoc-info); --bs-btn-hover-border-color: var(--stoc-info); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--stoc-info); --bs-btn-active-color: #fff; --bs-btn-bg: #fff; }
.btn-outline-secondary { --bs-btn-color: var(--stoc-text-sub); --bs-btn-border-color: var(--stoc-border-strong); --bs-btn-hover-bg: var(--stoc-secondary); --bs-btn-hover-border-color: var(--stoc-secondary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--stoc-secondary); --bs-btn-active-color: #fff; --bs-btn-bg: #fff; }
.btn-outline-dark      { --bs-btn-color: var(--stoc-text); --bs-btn-border-color: var(--stoc-dark); --bs-btn-hover-bg: var(--stoc-dark); --bs-btn-hover-color: #fff; --bs-btn-bg: #fff; }
.btn-link { --bs-btn-color: var(--stoc-primary); --bs-btn-hover-color: var(--stoc-primary-hover); }
.btn-link.text-secondary, .btn-link.text-muted { color: var(--stoc-text-sub) !important; }
/* 対象外・NG: 灰色の背景に黒字 */
.btn-neutral { --bs-btn-bg: var(--stoc-neutral-bg); --bs-btn-border-color: var(--stoc-neutral-border); --bs-btn-color: var(--stoc-text); --bs-btn-hover-bg: #D1D5DB; --bs-btn-hover-border-color: var(--stoc-neutral-border); --bs-btn-hover-color: var(--stoc-text); --bs-btn-active-bg: #D1D5DB; --bs-btn-active-color: var(--stoc-text); }
.btn-outline-neutral { --bs-btn-bg: #fff; --bs-btn-color: var(--stoc-text); --bs-btn-border-color: var(--stoc-neutral-border); --bs-btn-hover-bg: var(--stoc-neutral-bg); --bs-btn-hover-color: var(--stoc-text); --bs-btn-hover-border-color: var(--stoc-neutral-border); --bs-btn-active-bg: var(--stoc-neutral-bg); --bs-btn-active-color: var(--stoc-text); }

/* ===== バッジ・塗りつぶし ===== */
.bg-warning, .badge.bg-warning, .text-bg-warning { color: var(--stoc-text) !important; }
/* 濃い塗り（青・緑・赤・水色・灰）の上は白字。text-dark が付いていても読めるように（薄い塗り bg-opacity-* は除く） */
:is(.bg-primary, .bg-success, .bg-danger, .bg-info, .bg-secondary, .bg-dark):not([class*="bg-opacity"]).text-dark, .text-bg-info { color: #fff !important; }
.bg-warning:not([class*="bg-opacity"]).text-white { color: var(--stoc-text) !important; }
.bg-neutral, .badge.bg-neutral, .text-bg-neutral { background-color: var(--stoc-neutral-bg) !important; color: var(--stoc-text) !important; border: 1px solid var(--stoc-neutral-border); }
.badge.bg-light, .badge.text-bg-light { color: var(--stoc-text) !important; border: 1px solid var(--stoc-border-strong); }
.alert { --bs-alert-color: var(--stoc-text); }

/* ===== 上のメニュー（青の帯に白い文字。帯の上のボタンは白地に色文字にして読めるように） ===== */
.navbar.bg-primary { background-color: var(--stoc-primary) !important; }
.navbar .text-white-50, .navbar .opacity-75 { color: #fff !important; opacity: 1 !important; }
.navbar .btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: #fff; --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--stoc-primary); }
.navbar .btn-outline-warning, .navbar .btn-outline-danger, .navbar .btn-outline-info,
.navbar .btn-outline-success, .navbar .btn-outline-secondary { --bs-btn-bg: #fff; --bs-btn-border-color: #fff; }
.navbar .btn-outline-secondary { --bs-btn-color: var(--stoc-text-sub); }
