/*
 * simple_styles.css
 * トップページ（index.html） + ブラウザ対応表専用 軽量CSS
 * 統合版 2026-07-17
 * - css/simple_styles.css をベースに、
 *   simple_styles_append.css の新規ルールを追加
 * - js/browser-chkbox/simple_styles.css の内容も統合済み
 */

:root {
  --color-background:         white;
  --color-link:               dodgerblue;
  --color-link-hover:         mediumblue;
  --color-button-green:       rgb(208, 252, 208);
  --color-button-green-hover: lightcyan;
  --color-button-blue:        lightblue;
  --color-button-blue-hover:  lightsteelblue;
  --font-size-base:           16px;
  --border-color:             lightgray;
  --table-bg:                 #f9f9f9;
  --table-row-hover-bg:       #fafafa;
}

* {
  box-sizing: border-box;
}

body {
  text-align: center;
  font-family: Arial, 'Noto Color Emoji', 'Segoe UI', sans-serif;
  line-height: 1.45;
  margin: 20px;
  background-color: var(--color-background);
}

.center {
  text-align: center;
  margin: 0 auto;
}

/* ============================================================
   ツールリスト
   ============================================================ */
.tools-list {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.tools-list li {
  display: inline-block;
  margin: 0 10px;
}

.tools-list li a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.3s ease;
}

.tools-list li a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* ============================================================
   Green / Com ボタン
   ============================================================ */
.green_sw,
.com_sw {
  font-size: var(--font-size-base);
  cursor: pointer;
  border: none;
  color: black;
  padding: 9px 16px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.green_sw       { background-color: var(--color-button-green); }
.green_sw:hover { background-color: var(--color-button-green-hover); }
.com_sw         { background-color: var(--color-button-blue); }
.com_sw:hover   { background-color: var(--color-button-blue-hover); }

/* ============================================================
   テーブル全般
   ============================================================ */
.table-responsive {
  overflow-x: auto;
  margin: 20px auto;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
  background-color: var(--table-bg);
  width: 100%;
  max-width: 960px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

th,
td {
  border: 1px solid var(--border-color);
  padding: 7px 6px;
  text-align: left;
  vertical-align: middle;
  line-height: 1.3;
}

#browser-table th {
  background-color: #f0f0f0;
  font-weight: bold;
  padding: 10px 6px;
}

/* Civitai列（1列目）の縦長対策 */
#browser-table td:first-child {
  padding: 6px 8px !important;
  min-width: 175px;
}

#browser-table td.has-link {
  padding: 10px;
}

#browser-table td.has-link a {
  display: inline;
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.3s ease;
}

#browser-table td.has-link:hover {
  background-color: var(--table-row-hover-bg);
}

/* ============================================================
   リンクコンテナ（横並び）
   ============================================================ */
.link-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  line-height: 1.25;
}

/* Civitaiセル用の特別な横並び */
.civitai-cell {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 4px 8px;
  line-height: 1.25;
}

.civitai-cell strong,
.civitai-cell .acct-link {
  white-space: nowrap;
  margin-right: 6px;
  font-weight: bold;
}

/* アカウントリンク（テキスト） */
.acct-link {
  text-decoration: none;
  color: var(--color-link);
}

.acct-link:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* SVGアイコン 横並びコンテナ */
.link-icons {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* SVGアイコン個々のリンク */
.icon-link {
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.65;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.15s ease, background-color 0.2s ease;
}

.icon-link:hover {
  opacity: 1;
  transform: translateY(-1px) scale(1.05);
  background-color: #f0f8ff;
}

.icon-link img {
  display: block;
  width: 19px;
  height: 19px;
}

/* 注意ラベル（Vivaldi / Safari の「注意」表示） */
.caution-label {
  color: red;
  font-size: 0.85em;
  margin-left: 4px;
}

/* ============================================================
   その他ユーティリティ
   ============================================================ */
.new-tab-icon {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.8em;
  line-height: 1;
  vertical-align: middle;
  text-decoration: none;
  color: #999;
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.15s ease;
  user-select: none;
}

.new-tab-icon:hover {
  opacity: 1;
  color: var(--color-link-hover);
  transform: translate(1px, -1px);
}

.memo_small_font {
  font-size: 0.75rem;
  color: #555;
  display: block;
  margin-top: 2px;
  width: 100%;
}

.red_mini_memo {
  font-size: 0.75rem;
  color: #d32f2f;
  display: inline-block;
  margin-left: 4px;
  margin-top: 2px;
}

/* ============================================================
   ブラウザ別リンク色
   ============================================================ */
.chrome-link  { color: #4285f4; }
.firefox-link { color: #ff7139; }
.edge-link    { color: #00a4ef; }
.brave-link   { color: #ff4d4d; }
.vivaldi-link { color: #8a6eff; }
.safari-link  { color: #1a9f6b; }
.rakuten-link { color: #e60012; font-weight: bold; }

.vivaldi-link:hover,
.safari-link:hover,
.rakuten-link:hover {
  text-decoration: underline;
}

/* Dell different サブリンク（Vivaldi行専用） */
.dell-link {
  display: block;
  font-size: 0.8em;
  color: #888;
  text-decoration: none;
  margin-top: 2px;
}

.dell-link:hover {
  color: #555;
  text-decoration: underline;
}

/* ============================================================
   現在のブラウザ行強調（browser-detection6.js が付与）
   ============================================================ */
.current-browser-row {
  background-color: #f0f8ff !important;
  font-weight: bold;
}

/* ============================================================
   インラインコントロール（selenium_status input + ランダムボタン）
   ============================================================ */
.inline-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-wrap: nowrap;
  margin: 10px 0;
}

.inline-controls input {
  font-size: var(--font-size-base);
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.inline-controls button {
  font-size: var(--font-size-base);
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  background-color: var(--color-button-blue);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.inline-controls button:hover {
  background-color: var(--color-button-blue-hover);
}

/* ============================================================
   ブラウザ対応表セクション
   ============================================================ */
.map-section {
  margin: 35px 0 25px;
}

.map-title {
  text-align: center;
  font-size: 1.35em;
  margin: 15px 0 12px;
  color: #222;
  font-weight: bold;
}

/* ============================================================
   フッター
   ============================================================ */
.switches {
  margin: 10px 0;
}

.small {
  font-size: 0.85rem;
  color: #888;
}

.last-update {
  font-size: 0.85rem;
  color: #888;
  margin: 4px 0 12px;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media screen and (max-width: 767px) {
  table {
    width: 100%;
    font-size: 14px;
  }

  th,
  td {
    padding: 6px 4px !important;
    font-size: 13.5px;
  }

  .green_sw,
  .com_sw,
  .tools-list li a {
    width: 100%;
    margin: 5px 0;
  }

  .tools-list li {
    display: block;
    margin: 5px 0;
  }

  .inline-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
  }

  .civitai-cell {
    gap: 3px 6px;
  }

  .icon-link img {
    width: 17px;
    height: 17px;
  }
}