body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  background-color: #e6e6e6;
  margin: 0;
  padding: 10px;
  color: #333;
  font-size: 13px;
}
.form-table td { padding: 4px; }
.x-form-text { border: 1px solid #999; padding: 3px; }
button { padding: 5px 20px; border: 1px solid #999; background: linear-gradient(to bottom,#fff,#e6e6e6); cursor: pointer; border-radius: 3px; }
button:hover { background: #f0f0f0; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 10px;
  flex-wrap: wrap;
  gap: 6px;
}
.site-header .brand { line-height: 1.25; }
.site-header .brand-name { font-size: 20px; font-weight: bold; color: #333; }
.site-header .brand-sub { font-size: 15px; font-weight: bold; color: green; }

.site-header .header-right { display: flex; align-items: center; gap: 22px; }

.site-header .account-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 44px;
}
.site-header .account-icon { width: 26px; height: 26px; }
.site-header .account-label { font-size: 11px; color: #333; white-space: nowrap; }

.site-header .clock-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  min-width: 90px;
}
.site-header .clock-time { font-size: 17px; font-weight: bold; color: #333; }
.site-header .clock-date { font-size: 11px; color: #666; white-space: nowrap; }

.top-nav { display: flex; background: #e6e6e6; border: 1px solid #b5b5b5; padding: 2px; gap: 2px; align-items: center; flex-wrap: wrap; }
.top-nav-btn { padding: 6px 14px; border: 1px solid #999; background: linear-gradient(to bottom,#fff,#e6e6e6); font-size: 13px; font-weight: bold; color: #0044bb; cursor: pointer; border-radius: 3px; }
.top-nav-btn.alert-btn { color: #cc0000; }
.top-nav-btn.active { background: linear-gradient(to bottom,#fff,#dcdcdc); border-color: #666; color: red; }

.main-container { display: grid; grid-template-columns: 260px 1fr; gap: 10px; margin-top: 10px; background: #fff; border: 1px solid #b5b5b5; padding: 10px; min-height: 600px; }
.left-col { border-right: 1px solid #ddd; padding-right: 5px; }
.col-title { font-size: 11px; color: #666; padding: 3px; background: #f0f0f0; border: 1px solid #ddd; margin-bottom: 5px; }

.rule-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rule-table th { background: #f0f0f0; border: 1px solid #ddd; padding: 4px; }
.rule-table td { border-bottom: 1px solid #eee; padding: 6px 4px; cursor: pointer; }
.rule-table tr:hover td { background: #f5f5f5; }
.rule-table tr.selected td { background: #d0d0d0; font-weight: bold; }

.rule-detail-row { display: flex; margin-bottom: 10px; }
.rule-detail-label { width: 110px; font-weight: bold; }
.rule-detail-value { flex: 1; }
.condition-box { border: 1px solid #ccc; padding: 8px; background: #fafafa; }

.btn-danger { background: #d93025; color: #fff; border: 1px solid #b0251b; }
.btn-danger:hover { background: #b0251b; }

table.contact-table { width: 100%; border-collapse: collapse; }
table.contact-table th { background: #f0f0f0; border: 1px solid #ddd; padding: 4px; text-align: left; }
table.contact-table td { border-bottom: 1px solid #eee; padding: 6px 4px; }

textarea, input[type=text], input[type=email], select {
  width: 100%; max-width: 500px; padding: 4px; border: 1px solid #ccc; box-sizing: border-box; font-size: 13px;
}
.form-row { margin-bottom: 10px; }
.form-row label { display: block; font-weight: bold; margin-bottom: 3px; }
.channel-checks label { margin-right: 12px; font-weight: normal; }
.channel-options { display: flex; flex-wrap: wrap; gap: 8px; }
.channel-options label { display: inline-flex; align-items: center; gap: 6px; margin-right: 0; border: 1px solid #ccc; border-radius: 4px; padding: 6px 12px; background: #fafafa; cursor: pointer; }
.channel-options label:hover { background: #f0f0f0; }
.char-counter { text-align: right; color: #888; font-size: 12px; margin-top: 3px; }

.action-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 15px; }
.action-bar button { padding: 8px 26px; font-size: 14px; }

.locked-icon { display: inline-block; width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='10.5' width='14' height='10.5' rx='2' fill='none' stroke='%23999999' stroke-width='2'/><path d='M8 10.5V7.5a4 4 0 0 1 8 0v3' fill='none' stroke='%23999999' stroke-width='2'/></svg>") center/contain no-repeat; }

/* 設定メニュー内の各セクションを枠で囲むカード（既存の変数パネル等と同系統のデザイン） */
.settings-card { border: 1px solid #b5b5b5; border-radius: 2px; margin: 20px 0; background: #fff; overflow: hidden; }
.settings-card-title { background: linear-gradient(to bottom,#f5f5f5,#e6e6e6); color: #333; font-weight: bold; font-size: 13px; padding: 7px 12px; border-bottom: 1px solid #ccc; }
.settings-card-body { padding: 14px; }
.settings-result { margin-top: 10px; white-space: pre-wrap; font-size: 0.9em; }
.settings-card textarea { width: 100%; font-family: monospace; font-size: 0.85em; }

/* ===================== 気象連携ルール：一覧・詳細まわり ===================== */

/* --- ルール一覧テーブル（手段アイコン列を含む） --- */
.rule-table th.col-channels, .rule-table td.col-channels { text-align: center; white-space: nowrap; }
.rule-table th.col-enabled, .rule-table td.col-enabled { text-align: center; }

.channel-icon-row { display: inline-flex; align-items: center; gap: 4px; }
.channel-icon { display: inline-block; width: 17px; height: 17px; background-repeat: no-repeat; background-position: center; background-size: contain; vertical-align: middle; }

.channel-icon.ic-email { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'><rect x='1' y='1' width='22' height='16' rx='2' fill='%23f4b400' stroke='%23c8890a' stroke-width='1.2'/><path d='M2 2.5 L12 11 L22 2.5' fill='none' stroke='%23c8890a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }

.channel-icon.ic-broadcast { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.5 21 3 13.5 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z' fill='%23178a8a'/></svg>"); }

.channel-icon.ic-line { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='2' y='3' width='20' height='14' rx='5' fill='%2306C755'/><path d='M8 17l-3.2 3 0.6-3z' fill='%2306C755'/></svg>"); }

.channel-icon.ic-fcm { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22a2.4 2.4 0 0 0 2.4-2.4h-4.8A2.4 2.4 0 0 0 12 22zM19 17v-5.5c0-3.3-2.2-6-5.5-6.7V4a1.5 1.5 0 0 0-3 0v.8C7.2 5.5 5 8.2 5 11.5V17l-2 2v1h18v-1z' fill='%23e06c1f'/></svg>"); }

.channel-icon.ic-x { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='2' y='2' width='20' height='20' rx='4' fill='%23222222'/><path d='M7 7l10 10M17 7L7 17' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>"); }

/* --- ルール詳細：ツールバー（編集／コピーを作成／削除） --- */
.rule-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.rule-toolbar .rule-title { font-weight: bold; font-size: 15px; flex: 1; min-width: 160px; }
.rule-toolbar button { padding: 5px 16px; }

.btn-outline-danger { background: #fff; color: #d93025; border: 1px solid #d93025; }
.btn-outline-danger:hover { background: #fdecea; }
.btn-outline-danger:disabled { color: #bbb; border-color: #ddd; background: #f7f7f7; cursor: not-allowed; }
button:disabled { cursor: not-allowed; opacity: 0.6; }

/* --- ルール詳細：折りたたみカード（稼働条件／配信設定など） --- */
.collapsible-card { border: 1px solid #ddd; border-radius: 2px; margin: 14px 0; background: #fff; }
.collapsible-header { display: flex; align-items: center; justify-content: space-between; background: #f0f0f0; padding: 6px 10px; cursor: pointer; user-select: none; border-bottom: 1px solid #ddd; }
.collapsible-header .collapsible-title { font-weight: bold; font-size: 12px; color: #444; }
.collapsible-toggle { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #777; transition: transform 0.15s ease; flex-shrink: 0; }
.collapsible-card.collapsed .collapsible-toggle { transform: rotate(-90deg); }
.collapsible-card.collapsed .collapsible-body { display: none; }
.collapsible-body { padding: 12px 14px; }

.condition-sentence { line-height: 1.9; }
.condition-sentence b { padding: 1px 4px; }