/* 放送情報テンプレート（index / manual / edit 共通）。部品は nanona-ui、ここは並べ方だけ */

.oa-tabs { margin-bottom: var(--nn-space-6); }
.oa-tabs .nn-tab { text-decoration: none; }
.oa-mode-tabs { margin-bottom: var(--nn-space-4); }
.oa-panel { margin-bottom: var(--nn-space-4); }
.oa-duration { max-width: 12rem; }
.oa-common { padding-top: var(--nn-space-4); border-top: var(--nn-border-width) solid var(--nn-border-muted); }
.oa-common .nn-small { margin: 0; }
.oa-preview { margin-bottom: var(--nn-space-4); }
.oa-preview td { vertical-align: top; }

.oa-section { margin-bottom: var(--nn-space-8); }
.oa-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nn-space-3); margin-bottom: var(--nn-space-3); }
.oa-heading h2 { margin: 0; }
.oa-full { width: 100%; font-family: var(--nn-font-mono); resize: vertical; }
.oa-warnings { margin-bottom: var(--nn-space-3); }
.oa-warnings ul { margin: var(--nn-space-2) 0 0; padding-left: var(--nn-space-4); }
.oa-warnings li + li { margin-top: var(--nn-space-2); }
.oa-options { display: grid; grid-template-columns: 2fr 1fr; gap: var(--nn-space-3); }

/* 手動入力：1 局を 1 行で入力する。見出しは表の上に 1 回だけ */
.oa-entries { margin-bottom: var(--nn-space-3); border-top: var(--nn-border-width) solid var(--nn-border-muted); }
.oa-entry-head, .entry-row {
  display: grid;
  grid-template-columns: minmax(9rem, 2fr) minmax(10rem, 1.4fr) minmax(7rem, 1fr) minmax(5rem, 0.7fr) 8.5rem;
  gap: var(--nn-space-2);
  align-items: center;
}
.oa-entry-head { padding: 0 0 var(--nn-space-1); color: var(--nn-text-subtle); font-size: var(--nn-font-size-xs); font-weight: 700; }
.entry-row { padding: var(--nn-space-2) 0; border-bottom: var(--nn-border-width) solid var(--nn-border-muted); }
.entry-row > * { min-width: 0; }
.entry-row .nn-input, .oa-options .nn-input { width: 100%; min-width: 0; }
.oa-cell-label { display: none; }
.oa-cell-input { display: flex; align-items: center; gap: 2px; }
.oa-cell { border-radius: var(--nn-radius); transition: var(--nn-transition); }
.oa-cell.is-drop-target { outline: 2px solid var(--nn-link); outline-offset: 2px; background: var(--nn-sky-subtle); }
.oa-grip {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--nn-radius);
  background: transparent;
  color: var(--nn-text-subtle);
  cursor: grab;
}
.oa-grip:hover { background: var(--nn-bg-subtle); color: var(--nn-text); }
.oa-grip:active { cursor: grabbing; }
.oa-grip svg { width: 0.5rem; height: 0.875rem; fill: currentColor; }
.entry-actions { flex-wrap: nowrap; gap: 0; }
.entry-actions .nn-button { padding: 0 var(--nn-space-2); white-space: nowrap; }
.oa-entry-help { margin: 0 0 var(--nn-space-2); }

.oa-bulk-add { margin-bottom: var(--nn-space-4); padding: var(--nn-space-3); border: var(--nn-border-width) solid var(--nn-border-subtle); border-radius: var(--nn-radius); }
.oa-bulk-add summary { cursor: pointer; font-size: var(--nn-font-size-s); font-weight: 700; }
.oa-bulk-add[open] summary { margin-bottom: var(--nn-space-3); }
.oa-bulk-grid { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1.4fr) minmax(7rem, 1fr) minmax(5rem, 0.7fr); gap: var(--nn-space-2); align-items: end; margin-bottom: var(--nn-space-3); }
.oa-bulk-grid .nn-input, .oa-bulk-grid .nn-textarea { width: 100%; min-width: 0; }
.station-input-wrapper { position: relative; }
.autocomplete-list {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 5;
  display: none;
  max-height: 16rem;
  overflow-y: auto;
  border: var(--nn-border-width) solid var(--nn-border);
  border-radius: var(--nn-radius);
  background: var(--nn-bg);
  box-shadow: var(--nn-shadow-popup);
}
.autocomplete-item { padding: var(--nn-space-2); font-size: var(--nn-font-size-s); cursor: pointer; }
.autocomplete-item:hover, .autocomplete-item.is-active { background: var(--nn-bg-subtle); }

/* 放送局データ管理 */
.nn-muted.nn-small { margin: 0 0 var(--nn-space-3); }
.oa-heading .nn-muted.nn-small { margin: 0; }
.oa-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nn-space-2); margin-bottom: var(--nn-space-3); }
.oa-search { flex: 1 1 18rem; }
.oa-station-list { max-height: 32rem; overflow: auto; }
.station-editor-table { min-width: 62rem; table-layout: fixed; }
.station-editor-table th { position: sticky; top: 0; z-index: 1; }
.station-editor-table th:nth-child(1) { width: 16%; }
.station-editor-table th:nth-child(2) { width: 23%; }
.station-editor-table th:nth-child(3) { width: 16%; }
.station-editor-table th:nth-child(4) { width: 29%; }
.station-editor-table th:nth-child(5) { width: 16%; }
.station-editor-table .nn-input, .station-editor-table .nn-textarea { width: 100%; min-width: 0; }
.station-editor-table .nn-textarea { resize: vertical; }

.station-card { display: grid; gap: var(--nn-space-3); }
.station-card.is-excluded .oa-diff-table, .station-card.is-excluded .nn-field { color: var(--nn-text-placeholder); }
.oa-diff-table { width: 100%; font-size: var(--nn-font-size-s); }
.oa-diff-table th[scope="row"] { width: 5rem; white-space: nowrap; }
.oa-diff-table td:first-child { width: 3rem; }
.oa-diff-table td { overflow-wrap: anywhere; }
.oa-diff-table input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--nn-link); }
.oa-bulk { margin-bottom: var(--nn-space-2); }
.oa-apply { margin: var(--nn-space-4) 0 0; }
.oa-random { padding-top: var(--nn-space-3); border-top: var(--nn-border-width) solid var(--nn-border-muted); }
.oa-random .nn-small { margin: 0 0 var(--nn-space-2); }
.oa-random .nn-cluster { align-items: flex-end; }
.oa-year .nn-input { width: 7rem; }
.oa-random-status { margin-top: var(--nn-space-2) !important; }
.oa-json-mode { display: flex; flex-wrap: wrap; gap: var(--nn-space-2) var(--nn-space-4); margin: 0; padding: 0; border: 0; }
.oa-json-mode legend { width: 100%; margin-bottom: var(--nn-space-1); padding: 0; }
.oa-json-mode input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--nn-link); }
.station-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nn-space-2); }
.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nn-space-3); font-size: var(--nn-font-size-s); }
.diff-field__label { display: block; color: var(--nn-text-subtle); font-size: var(--nn-font-size-xs); font-weight: 700; }
.field-old { color: var(--nn-text-subtle); text-decoration: line-through; }



@media (max-width: 680px) {
  .oa-options, .diff-grid { grid-template-columns: 1fr; }
  .oa-entry-head { display: none; }
  .entry-row { grid-template-columns: 1fr 1fr; align-items: end; padding: var(--nn-space-3) 0; }
  .entry-row .station-input-wrapper, .entry-actions { grid-column: 1 / -1; }
  .oa-cell-label { display: block; margin-bottom: var(--nn-space-1); font-size: var(--nn-font-size-xs); font-weight: 700; }
  .oa-bulk-grid { grid-template-columns: 1fr 1fr; }
  .oa-bulk-stations { grid-column: 1 / -1; }
}
.oa-diff-value { width: 100%; min-width: 10rem; }
textarea.oa-diff-value { resize: vertical; }
.oa-same-target { margin: 0; color: var(--nn-text-subtle); }
.oa-row-actions { white-space: nowrap; }
.oa-row-actions .nn-button { padding: 0 var(--nn-space-2); }
.oa-alias-detail td { background: var(--nn-bg-subtle); }
.oa-alias-detail .nn-small { margin: 0 0 var(--nn-space-2); }
.oa-alias-list { margin: 0 0 var(--nn-space-2); padding: 0; list-style: none; }
.oa-alias-item { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; gap: var(--nn-space-2); align-items: center; margin-bottom: var(--nn-space-1); }
.oa-diff-target { margin-top: var(--nn-space-1); }
.oa-separate { font-size: var(--nn-font-size-s); }