/* ============================================================
   Threads自動投稿 - 業務向けダークテーマ
   ============================================================ */

:root {
  --bg:           #0F1419;
  --bg-elev:     #1A1F26;
  --surface:     #1E242C;
  --surface-2:   #232830;
  --border:      #2D353F;
  --border-soft: #232a33;

  --text:        #E8ECF0;
  --text-sub:    #94A3B8;
  --text-muted:  #6B7785;

  --primary:     #5B7CFA;
  --primary-2:   #7C9BFF;
  --success:     #10B981;
  --warning:     #F59E0B;
  --danger:      #EF4444;

  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;

  --shadow-sm:   0 1px 2px rgba(0,0,0,.25);
  --shadow:      0 4px 16px rgba(0,0,0,.3);

  --sidebar-w:   240px;
  --topbar-h:    64px;

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

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   Auth (Login) Layout
   ============================================================ */

body.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at top, rgba(91,124,250,0.08), transparent 60%),
    var(--bg);
}

.auth__wrap {
  width: 100%;
  max-width: 400px;
  padding: 24px;
}

.auth__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  box-shadow: var(--shadow);
}

.auth__brand {
  text-align: center;
  margin-bottom: 28px;
}

.auth__title {
  margin: 12px 0 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.auth__sub {
  margin: 0;
  color: var(--text-sub);
  font-size: 13px;
}

.auth__copy {
  margin-top: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

/* ============================================================
   App Layout (Sidebar + Main)
   ============================================================ */

body.app { background: var(--bg); }

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* --- Sidebar --- */

.sidebar {
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.brand__mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(91,124,250,0.4);
}

.brand__mark--lg { width: 48px; height: 48px; font-size: 22px; margin: 0 auto; }

.brand__name {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  padding: 10px 8px;
  gap: 2px;
  flex: 1;
}

.navlink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text-sub);
  font-size: 13px;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.navlink:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.navlink.is-active {
  background: rgba(91,124,250,0.12);
  color: var(--primary-2);
  font-weight: 600;
}

.navlink__icon {
  width: 20px;
  text-align: center;
  font-size: 14px;
  opacity: .9;
}

.sidebar__foot {
  padding: 12px;
  border-top: 1px solid var(--border-soft);
}

.user__email {
  font-size: 12px;
  color: var(--text-sub);
  word-break: break-all;
  margin-bottom: 4px;
}

.user__logout {
  font-size: 12px;
  color: var(--text-muted);
}

/* --- Main / Topbar --- */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.topbar__meta { display: flex; gap: 8px; }

.content {
  padding: 24px 28px 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ============================================================
   Components
   ============================================================ */

/* --- Cards / Grid --- */

.grid {
  display: grid;
  gap: 16px;
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.card--wide { grid-column: 1 / -1; }

.card__label {
  font-size: 12px;
  color: var(--text-sub);
  margin-bottom: 6px;
}

.card__value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.card__value--sm { font-size: 14px; word-break: break-all; }

.card__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.card__note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-all;
}

/* --- Status / Chip --- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}
.status--ok { color: var(--success); }
.status--ng { color: var(--danger); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-sub);
}
.chip--ok { color: var(--success); border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.08); }
.chip--warn { color: var(--warning); border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); }

/* --- Form --- */

.form { display: flex; flex-direction: column; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field__label {
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 600;
}

.field__input {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.field__input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91,124,250,0.15);
}

/* --- Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}

.btn:hover { background: var(--surface-2); }

.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn--primary:hover { background: var(--primary-2); border-color: var(--primary-2); }

.btn--block { width: 100%; }

/* --- Alerts --- */

.alert {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}

.alert--error   { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.4); color: #FCA5A5; }
.alert--success { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.4); color: #6EE7B7; }
.alert--warning { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.4); color: #FCD34D; }
.alert--info    { background: rgba(91,124,250,0.10); border-color: rgba(91,124,250,0.4); color: var(--primary-2); }

/* --- Checklist --- */

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checklist__item {
  position: relative;
  padding-left: 26px;
  font-size: 13px;
  color: var(--text-sub);
}

.checklist__item::before {
  content: "○";
  position: absolute;
  left: 4px;
  color: var(--text-muted);
}

.checklist__item.is-done {
  color: var(--text);
  text-decoration: none;
}

.checklist__item.is-done::before {
  content: "✓";
  color: var(--success);
  font-weight: 800;
}

/* ============================================================
   Table
   ============================================================ */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table th, .table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}

.table thead th {
  background: var(--bg-elev);
  color: var(--text-sub);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}

.table tbody tr:hover { background: rgba(255,255,255,0.02); }

.nowrap        { white-space: nowrap; }
.muted         { color: var(--text-muted); }
.content-cell  { max-width: 480px; word-break: break-word; }
.th-actions    { white-space: nowrap; text-align: right; }

/* ============================================================
   Badge / Status pill
   ============================================================ */

.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-sub);
  border: 1px solid var(--border);
}

.badge--thread { color: var(--primary-2); border-color: rgba(91,124,250,0.4); background: rgba(91,124,250,0.10); }
.badge--ai     { color: #C084FC; border-color: rgba(192,132,252,0.4); background: rgba(192,132,252,0.10); margin-left: 4px; }

.status-pill {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-sub);
  border: 1px solid var(--border);
  letter-spacing: 0.04em;
}

.status-pill--draft     { color: var(--text-sub); }
.status-pill--scheduled { color: var(--primary-2); border-color: rgba(91,124,250,0.4); background: rgba(91,124,250,0.10); }
.status-pill--posted    { color: var(--success);   border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.10); }
.status-pill--failed    { color: var(--danger);    border-color: rgba(239,68,68,0.4);  background: rgba(239,68,68,0.10); }
.status-pill--cancelled { color: var(--text-muted); }

/* ============================================================
   Filter / Empty
   ============================================================ */

.filter {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.filter__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-sub);
}

.filter__field select {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  min-width: 160px;
}

.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-sub);
}
.empty p { margin: 0 0 16px; }

/* ============================================================
   Compose form (投稿作成)
   ============================================================ */

.compose {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* セグメントトグル */
.seg {
  display: inline-flex;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}

.seg__btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
  transition: background .15s, color .15s;
}

.seg__btn:hover { color: var(--text); }
.seg__btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ノード（連投の各投稿） */
.nodes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.node {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

.node__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.node__num {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: 0.04em;
}

.node__textarea {
  width: 100%;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}

.node__meta {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

.node__count {
  font-size: 11px;
  color: var(--text-muted);
}
.node__count.is-over { color: var(--warning); font-weight: 700; }

.nodes__add {
  display: flex;
  justify-content: flex-start;
}

.form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border-soft);
  padding-top: 14px;
}

.field__hint { font-size: 11px; }

/* 小ボタン / 危険ボタン */
.btn--sm {
  padding: 5px 10px;
  font-size: 12px;
}
.btn--danger {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.4);
  color: #FCA5A5;
}
.btn--danger:hover {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.6);
}

/* ============================================================
   Dry-run check cards
   ============================================================ */

.check {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 4px solid var(--border);
}
.check--ok   { border-left-color: var(--success); }
.check--warn { border-left-color: var(--warning); }
.check--ng   { border-left-color: var(--danger); }

.check__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.check__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.check__icon { font-size: 18px; }

.check__label {
  font-weight: 700;
  font-size: 13px;
}
.check--ok   .check__label { color: var(--success); }
.check--warn .check__label { color: var(--warning); }
.check--ng   .check__label { color: var(--danger); }

.check__time {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.issues {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.issue {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
}

.issue--warn {
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.3);
  color: #FCD34D;
}
.issue--ng {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.3);
  color: #FCA5A5;
}

.issue__icon {
  font-weight: 700;
  flex-shrink: 0;
}

.check__detail {
  margin-top: 4px;
  font-size: 12px;
}

.check__detail summary {
  cursor: pointer;
  color: var(--text-sub);
  padding: 4px 0;
  user-select: none;
}

.check__nodes {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.node--readonly {
  background: var(--bg-elev);
}

.node__readonly {
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  padding: 8px 0;
}

/* ============================================================
   Slot rows (AI生成画面のスロット行)
   ============================================================ */

.slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slot-row {
  display: grid;
  grid-template-columns: 110px 110px 1fr auto;
  gap: 8px;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
}

.slot-row__time, .slot-row__type, .slot-row__tpl {
  margin: 0;
}

@media (max-width: 600px) {
  .slot-row { grid-template-columns: 1fr 1fr; }
  .slot-row__tpl { grid-column: 1 / -1; }
}

/* ============================================================
   Preview card (生成結果プレビュー)
   ============================================================ */

.preview-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.preview-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}

/* ============================================================
   Sub-nav (Settings tabs)
   ============================================================ */

.subnav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  overflow-x: auto;
}

.subnav__tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}

.subnav__tab:hover {
  color: var(--text);
  text-decoration: none;
}

.subnav__tab.is-active {
  color: var(--primary-2);
  border-bottom-color: var(--primary);
}

/* ============================================================
   Segmented control (radio mode toggle)
   ============================================================ */

.seg--radio {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.seg--radio .seg__btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  font-size: 13px;
  user-select: none;
}

/* ラジオは視覚的に隠すが、クリック・キーボード操作は維持 */
.seg--radio .seg__btn input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* :has() を使わない。JS で is-active を付け外しする */

/* ============================================================
   Mode summary (動作モード組み合わせ表示)
   ============================================================ */

.mode-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.mode-tag {
  padding: 6px 14px;
  background: rgba(91,124,250,0.12);
  border: 1px solid rgba(91,124,250,0.4);
  color: var(--primary-2);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
}

.mode-arrow {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 16px;
}

/* ============================================================
   Key-Value display (設定APIの状態など)
   ============================================================ */

.kv {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kv__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
}
.kv__row:last-child { border-bottom: none; }

.kv__key {
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 600;
}

.kv__val { text-align: right; }

/* ============================================================
   Field with checkbox
   ============================================================ */

.field--check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-top: 24px;
}

.field--check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.field--check span {
  font-size: 13px;
  color: var(--text);
}

.required {
  color: var(--danger);
  font-weight: 700;
  margin-left: 2px;
}

/* code 表示の共通 */
code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  font-size: 0.92em;
  background: var(--bg-elev);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--primary-2);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar__nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
  }
  .navlink__label { display: none; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .topbar { padding: 0 16px; }
  .content { padding: 16px; }
}