/**
 * modules/timeline/styles.css
 *
 * หน้าจอ Central Timeline Hub
 *
 * ใช้ตัวแปรสีของธีมกลาง (--*) ทั้งหมด เพื่อให้สลับธีมสว่าง/มืดได้โดยไม่ต้อง
 * เขียนกฎซ้ำสำหรับแต่ละธีม
 */

.timeline-today,
.timeline-connections {
  display: block;
}

.timeline-loading,
.timeline-error,
.timeline-empty {
  padding: 2em 1em;
  text-align: center;
  color: var(--text-muted, #6b7280);
}

.timeline-empty .icon-ok::before {
  font-size: 2.5em;
  color: var(--success, #10b981);
}

.timeline-error {
  color: var(--danger, #dc2626);
}

/* แถบเตือนว่าข้อมูลของระบบใดเก่าหรือหลุดการเชื่อมต่อ
   ต้องเด่นพอที่จะไม่ถูกมองข้าม เพราะข้อมูลทั้งหน้ามาจากสำเนา */
/* กล่องครอบต้องไม่มีพื้นหลังหรือกรอบของตัวเอง
   มันคือตัวที่ data-for วนอยู่ ซึ่งจะยังอยู่ในหน้าเสมอแม้ไม่มีรายการ —
   ใส่สไตล์ไว้ที่นี่เมื่อไร จะเห็นเป็นแถบเปล่าค้างอยู่ตอนทุกอย่างปกติ */
.timeline-alerts {
  display: flex;
  flex-direction: column;
  gap: .5em;
}

.timeline-alerts:not(:empty) {
  margin-bottom: 1em;
}

.timeline-alert {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  align-items: center;
  padding: .75em 1em;
  border-radius: .5em;
  border-left: 4px solid var(--warning, #f59e0b);
  background: var(--warning-bg, rgba(245, 158, 11, .12));
}

.timeline-alert-error {
  color: var(--danger, #dc2626);
  font-size: .9em;
}

/* ตัวเลขสรุปหัวจอ */
.timeline-stat .stat-value {
  font-size: 2em;
  font-weight: 600;
}

.timeline-stat.is-overdue .stat-value {
  color: var(--danger, #dc2626);
}

.timeline-stat.is-today .stat-value {
  color: var(--warning, #f59e0b);
}

/* กลุ่มของแต่ละช่วงเวลา */
.timeline-group {
  margin-top: 1.5em;
}

.timeline-group > h2 {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0 0 .5em;
  font-size: 1.05em;
  font-weight: 600;
}

.timeline-group > h2 em {
  font-style: normal;
  font-size: .85em;
  padding: .1em .6em;
  border-radius: 1em;
  background: var(--bg-muted, #e5e7eb);
  color: var(--text-muted, #6b7280);
}

.timeline-group.is-overdue > h2 em {
  background: var(--danger, #dc2626);
  color: #fff;
}

.timeline-cards {
  display: flex;
  flex-direction: column;
  gap: .5em;
}

.timeline-card {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: flex-start;
  padding: .85em 1em;
  border-radius: .5em;
  border: 1px solid var(--border-color, #e5e7eb);
  border-left-width: 4px;
  background: var(--card-bg, #fff);
}

/* ความเร่งด่วนอ่านได้จากขอบซ้ายโดยไม่ต้องอ่านข้อความ */
.timeline-card.p-critical { border-left-color: var(--danger, #dc2626); }
.timeline-card.p-high     { border-left-color: var(--warning, #f59e0b); }
.timeline-card.p-normal   { border-left-color: var(--info, #3b82f6); }
.timeline-card.p-low      { border-left-color: var(--border-color, #d1d5db); }

.timeline-card-when {
  flex: 0 0 9em;
  display: flex;
  flex-direction: column;
}

.timeline-card-when b {
  font-size: .95em;
}

.timeline-card-when span {
  font-size: .8em;
  color: var(--text-muted, #6b7280);
}

.timeline-card-body {
  flex: 1 1 16em;
  min-width: 0;
}

.timeline-card-body h3 {
  margin: 0 0 .15em;
  font-size: 1em;
  font-weight: 600;
}

.timeline-card-sub {
  margin: 0;
  font-size: .9em;
  color: var(--text-muted, #6b7280);
}

.timeline-card-src {
  margin: .15em 0 0;
  font-size: .78em;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted, #9ca3af);
}

.timeline-card-actions {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: .3em;
  align-items: center;
}

.timeline-card-actions .btn {
  font-size: .85em;
  padding: .3em .7em;
}

.timeline-snooze {
  display: inline-flex;
  align-items: center;
  gap: .25em;
}

.timeline-snooze b {
  font-size: .8em;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
}

/* หน้าสถานะการเชื่อมต่อ */
.tl-badge {
  display: inline-block;
  padding: .15em .7em;
  border-radius: 1em;
  font-size: .85em;
  background: var(--bg-muted, #e5e7eb);
  color: var(--text-muted, #4b5563);
}

.tl-badge.tl-ok      { background: var(--success, #10b981); color: #fff; }
.tl-badge.tl-failed  { background: var(--danger, #dc2626); color: #fff; }
.tl-badge.tl-partial { background: var(--warning, #f59e0b); color: #fff; }
.tl-badge.tl-stale   { background: var(--warning, #f59e0b); color: #fff; }

@media (max-width: 640px) {
  .timeline-card-when {
    flex-basis: 100%;
    flex-direction: row;
    gap: .5em;
    align-items: baseline;
  }

  .timeline-card-actions {
    flex-basis: 100%;
  }
}

/* หน้าผูกบัญชีแชต */
.timeline-linkbox {
  margin-top: 1.5em;
  padding: 1em 1.2em;
  border-radius: .5em;
  border: 1px solid var(--border-color, #e5e7eb);
  background: var(--card-bg, #fff);
}

.timeline-linkbox h3 {
  margin: 0 0 .5em;
  font-size: 1em;
}

.timeline-linkbox ol {
  margin: 0 0 .75em;
  padding-left: 1.2em;
  color: var(--text-muted, #6b7280);
}

/* รหัสต้องอ่านและพิมพ์ตามได้ง่าย เพราะผู้ใช้ต้องพิมพ์มันในอีกเครื่องหนึ่ง */
.timeline-code {
  display: flex;
  flex-wrap: wrap;
  gap: .75em;
  align-items: center;
  margin-top: .75em;
  padding: .75em 1em;
  border-radius: .5em;
  background: var(--bg-muted, #f3f4f6);
}

.timeline-code b {
  font-family: ui-monospace, monospace;
  font-size: 1.6em;
  letter-spacing: .18em;
}

.timeline-code span {
  color: var(--text-muted, #6b7280);
  font-size: .9em;
}

.timeline-code code {
  padding: .2em .6em;
  border-radius: .3em;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
}

/* ผลการทดสอบต้องอ่านออกทันทีว่าผ่านหรือไม่ผ่าน ไม่ใช่ต้องอ่านข้อความก่อน */
.tl-test {
  margin-top: .8em;
  padding: .6em .9em;
  border-radius: .35em;
  border-left: 4px solid var(--success, #10b981);
  background: var(--bg-muted, #f3f4f6);
  font-size: .9em;
}

.tl-test.is-bad {
  border-left-color: var(--danger, #dc2626);
  color: var(--danger, #dc2626);
}

.tl-actions {
  white-space: nowrap;
}

.tl-actions .btn {
  margin: .1em;
}