/* =====================================================================
 * DESIGN SYSTEM -- token-based, ala Tailwind config.
 * ---------------------------------------------------------------------
 * Semua nilai visual (warna, spacing, radius, shadow, font-size) WAJIB
 * lewat variabel di bawah -- jangan hardcode hex/px langsung di rule
 * atau di HTML (style="..."). Supaya dark mode & konsistensi tampilan
 * terjaga, cukup ubah nilainya di sini.
 *
 * Variabel bawaan Bootstrap (--bs-*) tetap dipakai sebagai basis untuk
 * komponen Bootstrap (card, table, modal, form) supaya JS bawaan
 * (modal, dropdown, dsb) tidak perlu disentuh -- kita hanya me-restyle
 * di atasnya lewat token custom.
 * ===================================================================== */
:root {
  /* ---- Brand color scale (hijau WhatsApp sebagai basis) ---- */
  --brand-50:  #eafdf3;
  --brand-100: #cdf7e0;
  --brand-200: #9aeec2;
  --brand-300: #5fdd9d;
  --brand-400: #34c97e;
  --brand-500: #25d366;
  --brand-600: #1da851;
  --brand-700: #178743;
  --brand-800: #146538;
  --brand-900: #0f4c2b;

  /* Selaraskan token Bootstrap dgn brand, supaya btn-success/bg-success/text-success dll ikut konsisten */
  --bs-success: var(--brand-500);
  --bs-success-rgb: 37, 211, 102;
  --bs-link-color: var(--brand-600);
  --bs-link-hover-color: var(--brand-700);

  /* Warna teks di atas permukaan brand (tombol hijau, chat bubble keluar).
     Satu token dipakai di semua tempat -- jangan tulis ulang hex-nya. */
  --on-brand: #06210f;

  /* QR code WAJIB kontras tinggi di atas terang, terlepas dari tema aktif,
     supaya tetap bisa di-scan kamera HP -- tokenized, bukan hex lepas. */
  --qr-surface: #ffffff;

  /* ---- Neutral / surface ---- */
  --app-body-bg: #f3f5f8;
  --app-surface: #ffffff;
  --app-surface-muted: #f7f8fa;
  --app-border: #e6e9ef;

  --app-sidebar-bg: #14181d;
  --app-sidebar-text: #e7eaee;
  --app-sidebar-text-muted: #9aa2ad;
  --app-sidebar-active-bg: var(--brand-500);
  --app-sidebar-active-text: var(--on-brand);
  --app-sidebar-hover-bg: #1e242b;
  --app-sidebar-border: #232830;

  --app-chat-bg: #eef2f0;
  --app-chat-pattern: rgba(0, 0, 0, .015);

  --app-topbar-bg: rgba(255, 255, 255, .85);
  --app-topbar-border: var(--app-border);

  /* ---- Spacing scale ---- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* ---- Radius scale ---- */
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 999px;

  /* ---- Shadow scale ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 6px 16px -4px rgba(16, 24, 40, .10);
  --shadow-lg: 0 16px 40px -12px rgba(16, 24, 40, .18);

  /* ---- Typography scale ---- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --text-xs: .75rem;
  --text-sm: .8125rem;
  --text-base: .9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* ---- Layout tokens ---- */
  --sidebar-width: 248px;
  --topbar-height: 60px;
  --mobile-topbar-height: 56px;
  --bottom-nav-height: 62px;
  --bottomnav-height: 60px;
  --icon-size: 1.1rem;
}

[data-bs-theme="dark"] {
  --app-body-bg: #0d1013;
  --app-surface: #171b20;
  --app-surface-muted: #1c2127;
  --app-border: #262c34;

  --app-sidebar-bg: #0a0d10;
  --app-sidebar-hover-bg: #171b20;
  --app-sidebar-border: #1c2127;

  --app-chat-bg: #0b141a;
  --app-chat-pattern: rgba(255, 255, 255, .02);

  --app-topbar-bg: rgba(23, 27, 32, .85);
  --app-topbar-border: var(--app-border);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, .4);
  --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------- */
html, body { height: 100%; overflow-x: hidden; }

body {
  background-color: var(--app-body-bg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -.01em;
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: var(--space-1);
}

.page-subtitle {
  color: var(--bs-secondary-color);
  font-size: var(--text-sm);
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

@media (max-width: 575.98px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .page-header > .btn,
  .page-header > .d-flex {
    width: 100%;
  }
  .page-header > .d-flex > .btn { flex: 1; }
}

main.app-main {
  padding: var(--space-5);
  max-width: 1180px;
  margin-inline: auto;
  width: 100%;
}

@media (max-width: 767.98px) {
  main.app-main {
    padding: var(--space-4);
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-4));
  }
}

/* ---------------------------------------------------------------------
 * Icons (SVG inline, lihat helper icon() di app/helpers.php)
 * ------------------------------------------------------------------- */
.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  vertical-align: -0.2em;
}

.icon-lg { width: 1.6rem; height: 1.6rem; }
.icon-xl { width: 3rem; height: 3rem; }

/* Toggle dark/light: dua ikon disiapkan sekaligus, ditampilkan bergantian
   murni lewat CSS berdasarkan atribut data-bs-theme -- theme.js cukup
   mengubah atribut itu, tidak perlu lagi menyuntik ulang markup SVG. */
.theme-icon-sun { display: none; }
[data-bs-theme="dark"] .theme-icon-moon { display: none; }
[data-bs-theme="dark"] .theme-icon-sun { display: inline; }

/* ---------------------------------------------------------------------
 * Surfaces: card, table, badge -- restyle ringan di atas komponen Bootstrap
 * ------------------------------------------------------------------- */
.card {
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card .card-body { padding: var(--space-5); }

.table {
  --bs-table-bg: transparent;
  font-size: var(--text-sm);
}

.table thead th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
  font-weight: 600;
  border-bottom-width: 1px;
  padding: var(--space-3) var(--space-4);
}

.table td { padding: var(--space-3) var(--space-4); vertical-align: middle; }

.table-responsive-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------------
 * Data list -- versi kartu dari tabel untuk layar mobile (< md), supaya
 * tidak perlu scroll horizontal. Tabel aslinya disembunyikan di mobile
 * lewat d-none d-md-block, kartu ini disembunyikan di desktop lewat
 * d-md-none.
 * ------------------------------------------------------------------- */
.data-list { display: flex; flex-direction: column; }

.data-list-item {
  padding: var(--space-4);
  border-bottom: 1px solid var(--app-border);
}

.data-list-item:last-child { border-bottom: none; }

.data-list-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.data-list-item-title {
  font-weight: 700;
  word-break: break-word;
}

.data-list-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  padding-block: .2rem;
}

.data-list-row-label {
  color: var(--bs-secondary-color);
  flex-shrink: 0;
}

.data-list-row-value { text-align: right; }

.data-list-item-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.data-list-item-actions form,
.data-list-item-actions .btn { flex: 1; }

.badge { border-radius: var(--radius-full); font-weight: 600; padding: .4em .75em; }

.btn {
  border-radius: var(--radius-md);
  font-weight: 600;
  letter-spacing: -.01em;
}

.btn .icon { margin-right: .35rem; }
.btn-icon-only .icon { margin-right: 0; }

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-bg: var(--brand-600);
  --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-700);
  --bs-btn-active-border-color: var(--brand-700);
}

.form-control, .form-select {
  border-radius: var(--radius-md);
  border-color: var(--app-border);
  font-size: var(--text-base);
}

.form-control:focus, .form-select:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-success-rgb), .15);
}

.form-label { font-weight: 600; font-size: var(--text-sm); }

.status-icon-cell { width: 2.5rem; }

/* ---------------------------------------------------------------------
 * App shell: sidebar (desktop)
 * ------------------------------------------------------------------- */
.app-shell { min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background-color: var(--app-sidebar-bg) !important;
  color: var(--app-sidebar-text);
  border-right: 1px solid var(--app-sidebar-border);
  position: sticky;
  top: 0;
  padding: var(--space-5) var(--space-4);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--app-sidebar-text);
  margin-bottom: var(--space-6);
  padding-inline: var(--space-2);
}

.sidebar-brand .icon { color: var(--brand-500); width: 1.4rem; height: 1.4rem; }

.sidebar .nav-link {
  color: var(--app-sidebar-text-muted);
  border-radius: var(--radius-md);
  padding: .55rem .75rem;
  font-size: var(--text-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: background-color .15s ease, color .15s ease;
}

.sidebar .nav-link:hover { background-color: var(--app-sidebar-hover-bg); color: var(--app-sidebar-text); }

.sidebar .nav-link.active {
  background-color: var(--app-sidebar-active-bg);
  color: var(--app-sidebar-active-text);
  font-weight: 700;
}

.sidebar hr { border-color: var(--app-sidebar-border); opacity: 1; margin: var(--space-4) 0; }

.sidebar-footer .btn {
  color: var(--app-sidebar-text-muted);
  border-color: var(--app-sidebar-border);
}

.sidebar-footer .btn:hover {
  color: var(--app-sidebar-text);
  border-color: var(--app-sidebar-text-muted);
}

/* ---------------------------------------------------------------------
 * Topbar desktop
 * ------------------------------------------------------------------- */
.topbar {
  background-color: var(--app-topbar-bg);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--app-topbar-border);
  position: sticky;
  top: 0;
  z-index: 1020;
  height: var(--topbar-height);
  padding-inline: var(--space-6);
}

/* ---------------------------------------------------------------------
 * Mobile navigation (topbar + bottom tab bar)
 * Hanya tampil di layar < md; sidebar & topbar desktop disembunyikan.
 * ------------------------------------------------------------------- */
.mobile-topbar {
  background-color: var(--app-sidebar-bg);
  color: var(--app-sidebar-text);
  position: sticky;
  top: 0;
  z-index: 1030;
  padding-inline: var(--space-4);
  min-height: var(--mobile-topbar-height);
}

.mobile-topbar-brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.mobile-topbar-brand .icon { color: var(--brand-500); width: 1.25rem; height: 1.25rem; }

.mobile-topbar .btn-outline-light {
  border-color: rgba(255, 255, 255, .18);
  border-radius: var(--radius-md);
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 1030;
  background-color: var(--app-surface);
  border-top: 1px solid var(--app-border);
  box-shadow: 0 -4px 16px rgba(16, 24, 40, .06);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav .nav-link {
  color: var(--bs-secondary-color);
  text-align: center;
  font-size: var(--text-xs);
  line-height: 1.15;
  padding: .5rem .15rem .4rem;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}

.bottom-nav .nav-link .icon { width: 1.2rem; height: 1.2rem; }

.bottom-nav .nav-link.active {
  color: var(--brand-600);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
 * Login
 * ------------------------------------------------------------------- */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background:
    radial-gradient(circle at 15% 15%, rgba(var(--bs-success-rgb), .12), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(var(--bs-success-rgb), .10), transparent 45%),
    var(--app-body-bg);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.auth-card .card-body { padding: var(--space-8) var(--space-6); }

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-xl);
  margin-bottom: var(--space-5);
}

.auth-brand .icon { color: var(--brand-500); width: 1.6rem; height: 1.6rem; }

/* ---------------------------------------------------------------------
 * Chat
 * ------------------------------------------------------------------- */
.chat-shell {
  height: calc(100vh - var(--topbar-height) - (var(--space-5) * 2));
  min-height: 420px;
  display: flex;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--app-surface);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 767.98px) {
  .chat-shell {
    /* Di mobile, header yg dipakai adalah .mobile-topbar (bukan .topbar
       desktop) -- pakai token tinggi yang sesuai supaya panel chat tidak
       terpotong/kepanjangan di bawah viewport. */
    height: calc(100vh - var(--mobile-topbar-height) - var(--bottom-nav-height) - (var(--space-4) * 2));
  }
}

.chat-list {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--app-border);
  overflow-y: auto;
  background-color: var(--app-surface);
}

@media (max-width: 767.98px) {
  /* clamp supaya tetap proporsional di HP kecil (~320px) maupun tablet
     portrait, tanpa memaksa lebar tetap yang bisa kesempitan/kelebaran. */
  .chat-list { width: clamp(120px, 40%, 220px); }
}

.chat-list-item {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--app-border);
  text-decoration: none;
  color: inherit;
  transition: background-color .12s ease;
}

.chat-list-item:hover { background-color: var(--app-surface-muted); }
.chat-list-item.active { background-color: var(--brand-50); }
[data-bs-theme="dark"] .chat-list-item.active { background-color: rgba(37, 211, 102, .12); }

.chat-list-item .chat-number {
  font-weight: 600;
  font-size: var(--text-sm);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-list-item .chat-preview {
  color: var(--bs-secondary-color);
  font-size: var(--text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }

#chat-box {
  background-color: var(--app-chat-bg);
  background-image: radial-gradient(var(--app-chat-pattern) 1px, transparent 1px);
  background-size: 16px 16px;
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.chat-bubble-row { display: flex; margin-bottom: var(--space-2); }
.chat-bubble-row.out { justify-content: flex-end; }

.chat-bubble {
  max-width: 72%;
  padding: .5rem .75rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-sm);
  word-break: break-word;
}

.chat-bubble.in {
  background-color: var(--app-surface);
  border: 1px solid var(--app-border);
  border-bottom-left-radius: var(--radius-sm);
}

.chat-bubble.out {
  background-color: var(--brand-500);
  color: var(--on-brand);
  border-bottom-right-radius: var(--radius-sm);
}

.chat-bubble .chat-time {
  font-size: .6875rem;
  opacity: .65;
  margin-top: .15rem;
}

.chat-composer {
  border-top: 1px solid var(--app-border);
  padding: var(--space-3);
  background-color: var(--app-surface);
}

.chat-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--bs-secondary-color);
  background-color: var(--app-chat-bg);
  text-align: center;
  padding: var(--space-5);
}

/* ---------------------------------------------------------------------
 * Session / QR connect
 * ------------------------------------------------------------------- */
.connect-card { max-width: 420px; margin-inline: auto; }

.qr-frame {
  width: 100%;
  max-width: 260px;
  margin-inline: auto;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background-color: var(--qr-surface);
}

.pairing-code-display {
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: .25em;
  padding-left: .25em;
}

/* ---------------------------------------------------------------------
 * Utility helpers spesifik app (melengkapi utility Bootstrap, bukan
 * duplikat) -- dipakai untuk mengganti inline style="" di view.
 * ------------------------------------------------------------------- */
.theme-toggle-floating { position: fixed; top: var(--space-3); right: var(--space-3); z-index: 1030; }
.max-w-form { max-width: 640px; }
.scroll-max-h { max-height: 260px; overflow-y: auto; }
.surface-muted { background-color: var(--app-surface-muted); border-radius: var(--radius-md); }