/* =============================================================================
   Re:Room — ダッシュボード
   ============================================================================= */

.dashboard-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.dashboard-header__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.dashboard-header__date {
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  font-weight: 600;
}

.dashboard-header__controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.dashboard-header__controls select {
  width: auto;
  min-width: 200px;
}

/* ---- 投稿ストックパネル ------------------------------------------------------ */
.stat-grid--queue {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--space-xl);
}

.stat-grid--queue .stat-card__value {
  font-size: 32px;
}

.stat-grid--kpi {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--space-xl);
}

.stat-grid--kpi .stat-card__value {
  font-size: 36px;
  color: var(--color-accent);
  text-shadow: 0 0 16px rgba(99, 102, 241, 0.4);
}

.stat-grid--queue .stat-card--danger {
  border-color: var(--color-warning);
}

.stat-grid--queue .stat-card--danger .stat-card__value {
  color: var(--color-warning);
  text-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
}

/* ---- セクション共通 --------------------------------------------------------- */
.dashboard-section {
  margin-bottom: var(--space-2xl);
}

.dashboard-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.dashboard-section__head .section-label {
  flex: 1;
  margin-bottom: 0;
}

.empty-note {
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-ink-muted);
  font-size: var(--fs-small);
  background: var(--color-surface);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

/* ---- 1. エージェント活動パネル ----------------------------------------------- */
.agent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.agent-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.agent-card__icon {
  font-size: 32px;
  line-height: 1;
}

.agent-card__name {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--color-ink);
}

.agent-card__status-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}

.agent-card__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-ink-faint);
  flex-shrink: 0;
}

.agent-card__dot--idle { background: var(--color-ink-faint); }
.agent-card__dot--success { background: var(--color-success); }
.agent-card__dot--failed { background: var(--color-danger); }
.agent-card__dot--running {
  background: var(--color-success);
  animation: dot-blink 1s ease-in-out infinite;
}

.agent-card__summary {
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  line-height: var(--lh-body);
  min-height: 1.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.agent-card__time {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--color-ink-faint);
  margin-top: auto;
}

/* running: グロー + シアンボーダー */
.agent-card--running {
  border-color: var(--color-glow);
  animation: pulse-glow 2s ease-in-out infinite;
}

/* idle: 通常のグラス */
.agent-card--idle {
  border-left-color: var(--color-border);
}

/* success: 緑の左ボーダー */
.agent-card--success {
  border-left-color: var(--color-success);
}

/* failed: 赤の左ボーダー */
.agent-card--failed {
  border-left-color: var(--color-danger);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.15);
}

.agent-card--failed .agent-card__summary::before {
  content: "⚠ ";
}

@keyframes dot-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(16, 185, 129, 0.8); }
  50% { opacity: 0.4; box-shadow: none; }
}

/* ---- 2. パイプライン進行バー -------------------------------------------------- */
.pipeline-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-lg);
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
  overflow-x: auto;
}

.pipeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 76px;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

.pipeline-step__icon {
  font-size: 20px;
  line-height: 1;
}

.pipeline-step__label {
  font-size: var(--fs-label);
  color: var(--color-ink-muted);
  text-align: center;
  white-space: nowrap;
}

.pipeline-step--pending .pipeline-step__label {
  color: var(--color-ink-faint);
}

.pipeline-step--running {
  background: rgba(0, 212, 255, 0.1);
  animation: pulse-glow 2s ease-in-out infinite;
}
.pipeline-step--running .pipeline-step__label {
  color: var(--color-glow);
  font-weight: 700;
}

.pipeline-step--done .pipeline-step__label {
  color: var(--color-success);
}

.pipeline-step--failed .pipeline-step__label {
  color: var(--color-danger);
}

.pipeline-flow__arrow {
  color: var(--color-ink-faint);
  font-size: var(--fs-body);
  flex-shrink: 0;
}

/* ---- 3. タイムライン --------------------------------------------------------- */
.timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: var(--space-lg);
  border-left: var(--border-width) solid var(--color-border-strong);
}

.timeline-entry {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  position: relative;
  font-size: var(--fs-small);
}

.timeline-entry::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-lg) - 4px);
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-bg);
}

.timeline-entry__time {
  font-family: var(--font-mono);
  color: var(--color-ink-muted);
  flex-shrink: 0;
  width: 76px;
}

.timeline-entry__icon {
  flex-shrink: 0;
}

.timeline-entry__summary {
  color: var(--color-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.timeline-entry--enter {
  animation: timeline-fade-in 0.4s ease-out;
}

@keyframes timeline-fade-in {
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- 数字カード ------------------------------------------------------------ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.stat-card {
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.stat-card__label {
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  font-weight: 600;
}

.stat-card__value {
  font-family: var(--font-mono);
  font-size: 40px;
  line-height: 1;
  color: var(--color-glow);
  text-shadow: 0 0 16px rgba(0, 212, 255, 0.4);
}

.stat-card--danger .stat-card__value {
  color: var(--color-danger);
  text-shadow: 0 0 16px rgba(239, 68, 68, 0.4);
}

/* ---- 今日の投稿 ------------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
}

.post-card {
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.post-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.post-card__code {
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
  font-weight: 600;
}

.post-card__headline {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  color: var(--color-ink);
  line-height: var(--lh-heading);
}

/* ---- 承認待ちリスト -------------------------------------------------------- */
.approval-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.approval-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.approval-item:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
}

.approval-item__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.approval-item__headline {
  font-size: var(--fs-body);
  color: var(--color-ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.approval-item__sub {
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
}

.approval-item__right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ---- 問い合わせ ------------------------------------------------------------- */
.inquiry-layout {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: var(--space-lg);
}

.stage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.stage-chip {
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.stage-chip__label {
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
}

.lead-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.lead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-width) solid var(--color-border);
  font-size: var(--fs-small);
}

.lead-row:last-child {
  border-bottom: none;
}

.lead-row__name {
  color: var(--color-ink);
  font-weight: 600;
}

.lead-row__time {
  color: var(--color-ink-muted);
  flex-shrink: 0;
}

/* ---- AI改善提案 ------------------------------------------------------------- */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.insight-card {
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.insight-card__finding {
  font-size: var(--fs-body);
  color: var(--color-ink);
  line-height: var(--lh-body);
}

.insight-card__action {
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  padding-top: var(--space-sm);
  border-top: var(--border-width) solid var(--color-border);
}

/* ---- レスポンシブ ----------------------------------------------------------- */
@media (max-width: 900px) {
  .agent-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .inquiry-layout {
    grid-template-columns: 1fr;
  }

  .pipeline-flow {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .agent-grid {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 自動投稿準備状況 ------------------------------------------------------- */
.readiness-card {
  padding: var(--space-lg);
}

.readiness-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.readiness-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-md);
}

.readiness-cell__status {
  font-size: var(--fs-small);
}

.readiness-cell--ok .readiness-cell__status {
  color: var(--color-success);
}

.readiness-cell--ng .readiness-cell__status {
  color: var(--color-warning);
}

.readiness-cell__label {
  font-size: var(--fs-label);
  color: var(--color-ink-muted);
  font-weight: 600;
}

.readiness-cell__value {
  font-size: var(--fs-body);
  color: var(--color-ink);
}

.readiness-cell--ok {
  border-left-color: var(--color-success);
}

.readiness-cell--ng {
  border-left-color: var(--color-warning);
}

.readiness-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--border-width) solid var(--color-border);
}

.readiness-next__label {
  font-size: var(--fs-label);
  color: var(--color-ink-muted);
  font-weight: 600;
}

.readiness-next__value {
  font-family: var(--font-mono);
  color: var(--color-ink);
}

@media (max-width: 900px) {
  .readiness-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .readiness-grid {
    grid-template-columns: 1fr;
  }
}