/*
 * Gaya tambahan di atas Bootstrap 5.3. Token warna sama dengan IoT Platform
 * (static/css/app.css di repo IoT_platform), supaya kedua aplikasi terasa satu keluarga.
 */

/* ---------- Token warna ---------- */
:root,
[data-bs-theme="light"] {
  --app-bg: #f4f6f9;
  --app-surface: #ffffff;
  --app-border: #e4e7ec;
  --app-muted: #667085;
  --app-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --app-accent: #2a78d6;
  --app-accent-soft: rgba(42, 120, 214, 0.1);
  --app-nav-bg: rgba(255, 255, 255, 0.85);
}

[data-bs-theme="dark"] {
  --app-bg: #0f1115;
  --app-surface: #171a20;
  --app-border: #2a2f38;
  --app-muted: #9aa3b2;
  --app-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --app-accent: #3987e5;
  --app-accent-soft: rgba(57, 135, 229, 0.16);
  --app-nav-bg: rgba(23, 26, 32, 0.85);
  --bs-body-bg: #171a20;
  --bs-secondary-bg: #1d2128;
  --bs-tertiary-bg: #1a1e24;
  --bs-border-color: #2a2f38;
}

/* ---------- Dasar ---------- */
body {
  background-color: var(--app-bg);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, .h1, h2, .h2, h3, .h3 { font-weight: 650; letter-spacing: -0.01em; }
.card {
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  box-shadow: var(--app-shadow);
}
.text-muted { color: var(--app-muted) !important; }

/* ---------- Bilah atas ---------- */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  padding: 0.6rem 0;
  background: var(--app-nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--app-border);
}
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 650;
  color: var(--bs-body-color);
  text-decoration: none;
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #2a78d6, #16a394);
}
.avatar {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--app-accent);
  background: var(--app-accent-soft);
}
.theme-switch .btn { color: var(--app-muted); border: 0; }
.theme-switch .btn.active { color: var(--app-accent); background: var(--app-accent-soft); }

/* ---------- Halaman depan ---------- */
.hero { max-width: 640px; margin: 3rem auto; text-align: center; }
.hero .brand-mark { width: 56px; height: 56px; border-radius: 16px; }
.hero .brand-mark svg { width: 30px; height: 30px; }

/* ---------- Profil koneksi ---------- */
.profile-card { border-left: 4px solid var(--profile-color, var(--app-accent)); }
.color-blue   { --profile-color: #2a78d6; }
.color-green  { --profile-color: #16a34a; }
.color-orange { --profile-color: #ea8a0c; }
.color-purple { --profile-color: #7c4ddb; }
.color-red    { --profile-color: #dc3545; }
.color-gray   { --profile-color: #8a94a6; }
.dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--profile-color); }
.profile-url { word-break: break-all; }
.form-section-title { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--app-muted); }

/* ---------- Halaman koneksi (tahap M3) ---------- */
.status-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500;
  background: var(--app-accent-soft); color: var(--app-muted);
}
.status-pill::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; }
.status-connected { color: #16a34a; background: rgba(22, 163, 74, 0.12); }
.status-connecting { color: #ea8a0c; background: rgba(234, 138, 12, 0.12); }
.status-error { color: #dc3545; background: rgba(220, 53, 69, 0.12); }

.subscription { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0; border-bottom: 1px solid var(--app-border); }
.subscription:last-child { border-bottom: 0; }
.subscription.is-muted code { opacity: 0.5; text-decoration: line-through; }
.sub-state { font-size: 0.75rem; min-width: 1rem; }
.sub-active { color: #16a34a; }
.sub-pending { color: var(--app-muted); }
.sub-refused { color: #dc3545; font-weight: 600; }

.message-list { max-height: 70vh; overflow-y: auto; }
.message { border-left: 3px solid var(--profile-color, var(--app-accent)); padding: 0.35rem 0.6rem; margin-bottom: 0.4rem;
  background: var(--bs-tertiary-bg); border-radius: 0 0.4rem 0.4rem 0; }
.message-out { border-left-style: dashed; }
.message-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; font-size: 0.82rem; }
.message-dir { font-weight: 700; }
.message-out .message-dir { color: var(--app-accent); }
.message-topic { font-size: 0.82rem; word-break: break-all; }
.message-meta { color: var(--app-muted); }
.message-actions { margin-left: auto; display: inline-flex; gap: 0.6rem; }
.message-actions .btn { font-size: 0.75rem; }
.message-payload { margin: 0.25rem 0 0; font-size: 0.8rem; white-space: pre-wrap; word-break: break-all; max-height: 16rem; overflow: auto; }
.saved-menu { max-width: 22rem; max-height: 22rem; overflow-y: auto; }
.saved-menu .dropdown-item { white-space: normal; }

/* Tahap M5/M6: sandbox, tab pesan, pohon topik, grafik */
.badge-sandbox { background: rgba(124, 77, 219, 0.14); color: #7c4ddb; }
.message-tabs .nav-link { padding: 0.15rem 0.6rem; font-size: 0.85rem; }
div.topic-tree { font-size: 0.85rem; }
ul.topic-tree { list-style: none; margin: 0; padding-left: 0; }
ul.topic-tree ul.topic-tree { padding-left: 1.1rem; border-left: 1px dashed var(--app-border); margin-left: 0.3rem; }
ul.topic-tree li { padding: 0.1rem 0; }
.tree-value { margin-left: 0.5rem; color: var(--app-muted); font-family: var(--bs-font-monospace); font-size: 0.78rem; word-break: break-all; }
.charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.6rem; max-height: 70vh; overflow-y: auto; }
.chart-card { border: 1px solid var(--app-border); border-radius: 0.5rem; padding: 0.5rem 0.6rem; background: var(--bs-tertiary-bg); }
.chart-title { font-size: 0.8rem; word-break: break-all; }
.chart-stats { font-size: 0.75rem; color: var(--app-muted); }
.sparkline { width: 100%; height: 60px; display: block; }
.sparkline polyline { fill: none; stroke: var(--app-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }