/* =============================================================
   modern.css  —  iseya UIモダナイズ（位置・レイアウトは変更しない）
   既存CSS(bootstrap/nav/main)の後に読み込み、見た目のみ上書き。
   変更するのは 色 / 境界 / 影 / 角丸 / ホバー / フォーカス / フォント。
   padding・margin・幅・高さ・font-size は原則いじらない（要素の位置を保つ）。
   ============================================================= */

/* モダン日本語フォント（Noto Sans JP） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
  --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;

  /* 小売=ティール系（現色 #008080 を洗練） */
  --accent:      #0f7d7d;
  --accent-rgb:  15, 125, 125;
  --accent-600:  #0b6b6b;
  --accent-700:  #085757;
  --accent-050:  #e6f2f2;

  --bg:      #f4f6f9;
  --surface: #ffffff;
  --text:    #1f2933;
  --muted:   #6b7280;
  --border:  #e3e8ee;

  --radius:    10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --shadow:    0 6px 18px rgba(16,24,40,.08);
  --shadow-nav:0 2px 10px rgba(16,24,40,.12);
}

/* 質管理=ブルー系（現色 #3399ff を洗練） */
body.theme-used {
  --accent:      #2f80d8;
  --accent-rgb:  47, 128, 216;
  --accent-600:  #2468b4;
  --accent-700:  #1d5490;
  --accent-050:  #eaf3fc;
}

/* ---- ベース ---- */
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* フォームやボタン等は font-family を継承しないブラウザ差があるため明示 */
button, input, select, textarea, optgroup,
.btn, .form-control, .custom-select, .navbar, .navbar-brand,
.dropdown-menu, .modal, .table, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans);
}
/* 金額・数値の桁を揃える（テーブルや右寄せ入力） */
.table, .text-right, input.text-right, td, th {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); }
a:hover { color: var(--accent-700); }
hr { border-top-color: var(--border); }

/* ---- ナビバー（黄文字→白、洗練された面） ---- */
.navbar.navbar-dark {
  background-color: var(--accent) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.04));
  box-shadow: var(--shadow-nav);
  border: none;
}
.navbar.navbar-dark .navbar-brand { color: #fff !important; font-weight: 700; letter-spacing: .02em; }
.navbar.navbar-dark .nav-link,
.navbar.navbar-dark .navbar-nav .nav-link {
  color: rgba(255,255,255,.86) !important;
  border-radius: 7px;
  transition: background-color .15s ease, color .15s ease;
}
.navbar.navbar-dark .nav-link:hover,
.navbar.navbar-dark .nav-link:focus,
.navbar.navbar-dark .navbar-nav .active > .nav-link,
.navbar.navbar-dark .nav-item.active .nav-link {
  color: #fff !important;
  background-color: rgba(255,255,255,.14);
}
/* app.blade（ログイン/ホーム）の白ナビはブランド色を差し色に */
.navbar.navbar-light.bg-white { box-shadow: var(--shadow-sm) !important; border-bottom: 1px solid var(--border); }
.navbar.navbar-light .navbar-brand { color: var(--accent) !important; font-weight: 700; }

/* ---- ボタン（角丸・ホバー・影のみ。サイズは据え置き） ---- */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25); }
.btn:hover { box-shadow: var(--shadow-sm); }

.btn-primary { background-color: var(--accent); border-color: var(--accent); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--accent-600) !important; border-color: var(--accent-600) !important; }
.btn-outline-primary { color: var(--accent); border-color: var(--accent); }
.btn-outline-primary:hover { background-color: var(--accent); border-color: var(--accent); color:#fff; }

.btn-secondary { background-color: #64748b; border-color: #64748b; }
.btn-secondary:hover { background-color: #51607a !important; border-color: #51607a !important; }
.btn-outline-secondary { color: #566072; border-color: #cbd3de; }
.btn-outline-secondary:hover { background-color: #64748b; border-color: #64748b; color:#fff; }

.btn-info { background-color: #0ea5e9; border-color: #0ea5e9; color:#fff; }
.btn-info:hover { background-color: #0b8fca !important; border-color: #0b8fca !important; }
.btn-outline-info { color:#0ea5e9; border-color:#0ea5e9; }

.btn-success { background-color: #16a34a; border-color: #16a34a; }
.btn-success:hover { background-color: #138a3f !important; border-color: #138a3f !important; }
.btn-outline-success { color:#16a34a; border-color:#16a34a; }

.btn-danger { background-color: #dc2626; border-color: #dc2626; }
.btn-danger:hover { background-color: #bf1f1f !important; border-color: #bf1f1f !important; }
.btn-outline-danger { color:#dc2626; border-color:#dc2626; }

.btn-warning { background-color: #f59e0b; border-color: #f59e0b; color:#fff; }
.btn-warning:hover { background-color: #d98908 !important; border-color: #d98908 !important; color:#fff; }

.btn-dark { background-color: #263241; border-color: #263241; }
.btn-dark:hover { background-color: #1a2431 !important; border-color: #1a2431 !important; }
.btn-light { background-color: #f1f5f9; border-color: #e2e8f0; color:#334155; }

/* ---- フォーム（境界・フォーカスリングのみ） ---- */
.form-control, .custom-select, textarea.form-control {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: #fff;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .custom-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
}
.form-control::placeholder { color: #9aa4b2; }
.input-group-text { background-color: #f5f7fa; border: 1px solid var(--border); color: var(--muted); border-radius: var(--radius-sm); }
label { color: #37414f; }

/* ---- カード/パネル ---- */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background-color: var(--surface);
}
.card-header {
  background-color: #fff;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.card-footer { background-color:#fff; border-top: 1px solid var(--border); }

/* ---- テーブル（ヘッダ配色・境界・ホバーのみ。行高は据え置き） ---- */
.table { color: var(--text); }
.table thead th {
  background-color: var(--accent-050);
  color: var(--accent-700);
  border-bottom: 2px solid var(--border);
  border-top: none;
  font-weight: 600;
}
.table td, .table th { border-top: 1px solid #eef2f6; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: #e9edf3; }
.table-hover tbody tr:hover { background-color: var(--accent-050); }
.table-striped tbody tr:nth-of-type(odd) { background-color: #fafbfc; }

/* ---- モーダル / ドロップダウン ---- */
.modal-content { border: none; border-radius: var(--radius); box-shadow: 0 24px 64px rgba(16,24,40,.24); }
.modal-header { border-bottom: 1px solid var(--border); }
.modal-footer { border-top: 1px solid var(--border); }
.dropdown-menu { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--accent-050); color: var(--accent-700); }

/* ---- ヘッダーのホバー式サブメニュー: 移動中に消える問題を解消 ---- */
/* Bootstrap既定の上マージン(トグルとメニューの隙間)を除去して途切れさせない */
.navbar .nav-item.dropdown > .dropdown-menu { margin-top: 0; }
/* トグルとメニューの間に透明のブリッジ帯を作り、斜め移動でもホバーを維持 */
.navbar .nav-item.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
}
/* トグル・メニューのどちらをホバーしても開いたまま（保険） */
.navbar .nav-item.dropdown:hover > .dropdown-menu { display: block; }

/* ---- ページネーション（Bootstrap4を洗練） ---- */
.pagination .page-link { color: var(--accent); border-color: var(--border); }
.pagination .page-link:hover { background-color: var(--accent-050); color: var(--accent-700); border-color: var(--border); }
.pagination .page-item.active .page-link { background-color: var(--accent); border-color: var(--accent); color:#fff; }
.pagination .page-item.disabled .page-link { color:#b6bec9; }

/* ---- バッジ / タブ / アラート ---- */
.badge { border-radius: 6px; font-weight: 600; letter-spacing: .01em; }
.badge-primary { background-color: var(--accent); }
.badge-info { background-color:#0ea5e9; }
.badge-success { background-color:#16a34a; }
.badge-danger { background-color:#dc2626; }
.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link { border: none; color: var(--muted); }
.nav-tabs .nav-link:hover { color: var(--accent); }
.nav-tabs .nav-link.active { color: var(--accent); background: transparent; border-bottom: 2px solid var(--accent); font-weight: 600; }
.alert { border: 1px solid transparent; border-radius: var(--radius-sm); }
.alert-danger  { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.alert-success { background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
.alert-info    { background:#eff8ff; border-color:#bae6fd; color:#075985; }
.alert-warning { background:#fffbeb; border-color:#fde68a; color:#92400e; }

/* ---- スクロールバー（控えめに今風） ---- */
* { scrollbar-color: #c7cfdb var(--bg); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #c7cfdb; border-radius: 8px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: #aeb8c8; }