/* ============================================================
   WABA CRM — App base
   Reset ringan, tipografi, override Bootstrap, komponen dasar
   (tombol, input, badge, kartu). Semua warna dari tokens.css.
   ============================================================ */

/* ---- Reset & dasar ---- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-ink);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Beritahu browser skema warna aktif → scrollbar, input tanggal, autofill,
   dsb. ikut menyesuaikan terang/gelap secara native. */
:root, [data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* ---- Motion halus (ala Google/Material) ----
   Transisi lembut pada elemen interaktif (hover/fokus/aktif) DAN pada
   permukaan utama supaya pergantian tema terang↔gelap ikut beranimasi,
   bukan berkedip kasar. */
.btn, .icon-btn, .rail__item, .conv, .list-tab, .menu-item, .chip,
.avatar, .card, input, select, textarea, .form-control, .form-select {
    transition: background-color var(--t-fast), border-color var(--t-fast),
                color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
body, .rail, .workspace, .inbox__col, .thread__head, .composer,
.contact-panel, .contact-panel__head, .panel-section, .list-head,
.list-tabs, .modal, .card, .conv {
    transition: background-color var(--t-base), border-color var(--t-base), color var(--t-base);
}
@media (prefers-reduced-motion: reduce) {
    .btn, .icon-btn, .rail__item, .conv, .list-tab, .menu-item, .chip, .avatar,
    .card, input, select, textarea, .form-control, .form-select,
    body, .rail, .workspace, .inbox__col, .thread__head, .composer,
    .contact-panel, .panel-section { transition: none; }
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--c-ink); }
p { margin: 0 0 var(--sp-3); }
a { color: var(--c-signal-600); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-signal-700); }

/* Data/angka/timestamp memakai mono + tabular numerals */
.mono, time, .tabular, .countdown, .phone, .metric-value {
    font-family: var(--font-mono);
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
}

/* ---- Scrollbar hangat, tipis ---- */
* { scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--c-border-strong);
    border-radius: var(--r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--c-ink-mute); background-clip: content-box; }

/* ============================================================
   Tombol & form — MANDIRI (tidak bergantung Bootstrap)
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.3;
    padding: 0.5rem 0.9rem;
    border: 1px solid transparent;
    background: var(--c-surface);
    color: var(--c-ink);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--sh-focus); outline: none; }
.btn:disabled, .btn.disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary {
    background: var(--c-signal);
    border-color: var(--c-signal);
    color: var(--c-ink-inv);
}
.btn-primary:hover { background: var(--c-signal-600); border-color: var(--c-signal-600); color: var(--c-ink-inv); }
.btn-primary:active { background: var(--c-signal-700); border-color: var(--c-signal-700); }
.btn-primary:disabled { background: var(--c-signal); border-color: var(--c-signal); }

.btn-outline-secondary {
    background: var(--c-surface);
    border-color: var(--c-border-strong);
    color: var(--c-ink-soft);
}
.btn-outline-secondary:hover { background: var(--c-surface-2); border-color: var(--c-border-strong); color: var(--c-ink); }
.btn-outline-secondary:active { background: var(--c-surface-3); }

.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--c-ink-soft);
}
.btn-ghost:hover { background: var(--c-surface-2); color: var(--c-ink); }

.btn-danger {
    background: var(--c-danger);
    border-color: var(--c-danger);
    color: #fff;
}
.btn-danger:hover { background: #cf3f44; border-color: #cf3f44; color: #fff; }

.btn-sm { padding: 0.32rem 0.6rem; font-size: var(--fs-xs); }

/* Form controls */
.form-control, .form-select {
    display: block;
    width: 100%;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-ink);
    font-size: var(--fs-base);
    font-family: inherit;
    padding: 0.55rem 0.8rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8378' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    padding-right: 2rem;
    cursor: pointer;
}
.form-control::placeholder { color: var(--c-ink-mute); }
.form-control:focus, .form-select:focus {
    border-color: var(--c-signal);
    box-shadow: var(--sh-focus);
    background-color: var(--c-surface);
    color: var(--c-ink);
    outline: none;
}
.form-control.is-invalid { border-color: var(--c-danger); }
.form-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-ink-soft);
    margin-bottom: var(--sp-2);
}
.form-text { color: var(--c-ink-mute); font-size: var(--fs-xs); }

/* Kartu */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}

/* ============================================================
   Komponen umum
   ============================================================ */

/* Badge / chip */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.6;
    background: var(--c-surface-2);
    color: var(--c-ink-soft);
    border: 1px solid transparent;
}
.chip--signal { background: var(--c-signal-soft); color: var(--c-signal-700); }
/* Teks pakai warna "vivid" tokennya sendiri (bukan hex coklat/biru redup
   hardcode) — vivid tetap sama di light/dark, jadi kontrasnya tetap oke
   walau latarnya (soft) berubah gelap. Hex lama tak punya varian dark →
   itu sebab chip label tampak pucat/kusam di mode gelap. */
.chip--warn   { background: var(--c-window-amber-soft); color: var(--c-window-warn); }
.chip--danger { background: var(--c-danger-soft); color: var(--c-danger); }
.chip--info   { background: var(--c-info-soft); color: var(--c-info); }
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Avatar */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-surface-3);
    color: var(--c-ink-soft);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    flex-shrink: 0;
    user-select: none;
}
.avatar--sm { width: 28px; height: 28px; font-size: var(--fs-xs); }
.avatar--md { width: 38px; height: 38px; }
.avatar--lg { width: 56px; height: 56px; font-size: var(--fs-md); }
.avatar--online { position: relative; }
.avatar--online::after {
    content: "";
    position: absolute; right: -1px; bottom: -1px;
    width: 11px; height: 11px;
    background: var(--c-signal);
    border: 2px solid var(--c-surface);
    border-radius: 50%;
}

/* State kosong */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: var(--sp-12) var(--sp-6);
    color: var(--c-ink-mute);
    gap: var(--sp-3);
    height: 100%;
}
.empty-state svg { color: var(--c-border-strong); }
.empty-state h3 { color: var(--c-ink-soft); font-size: var(--fs-md); font-weight: var(--fw-medium); }
.empty-state p { max-width: 34ch; font-size: var(--fs-sm); }

/* ---- Utilitas ringkas ---- */
.u-muted   { color: var(--c-ink-mute); }
.u-soft    { color: var(--c-ink-soft); }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-flex    { display: flex; }
.u-center  { display: flex; align-items: center; }
.u-between { display: flex; align-items: center; justify-content: space-between; }
.u-gap-1 { gap: var(--sp-1); } .u-gap-2 { gap: var(--sp-2); } .u-gap-3 { gap: var(--sp-3); }
.u-mt-2 { margin-top: var(--sp-2); } .u-mt-4 { margin-top: var(--sp-4); }
.u-full { width: 100%; }

/* Fokus keyboard yang selalu terlihat */
:focus-visible { outline: 2px solid var(--c-signal); outline-offset: 2px; }

/* Hormati preferensi reduce-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   Refresh "ngepop" — tombol lebih membulat & bercahaya lembut
   ============================================================ */
.btn { border-radius: 10px; font-weight: var(--fw-semibold); }
.btn-primary { box-shadow: 0 2px 8px rgba(0,168,132,.22); }
.btn-primary:hover { box-shadow: 0 4px 12px rgba(0,168,132,.30); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-sm { border-radius: 8px; }

/* Rail item aktif sedikit lebih tegas */
.rail__item.is-active { color: var(--c-signal-700); }

/* ============================================================
   Mobile: cegah auto-zoom Safari iOS saat fokus input.
   iOS men-zoom halaman otomatis kalau font-size input < 16px.
   Desktop tetap pakai --fs-base/--fs-sm yang lebih rapat (15px/13px);
   di layar sentuh, semua input dinaikkan ke 16px minimum.
   ============================================================ */
@media (max-width: 720px) {
    .form-control, .form-select,
    input[type="text"], input[type="search"], input[type="email"],
    input[type="password"], input[type="tel"], input[type="number"],
    textarea {
        font-size: 16px !important;
    }
}

/* Tombol kembali di header sub-halaman (Agen, Integrasi → Pengaturan) */
.back-link {
    display: inline-grid; place-items: center; width: 30px; height: 30px;
    margin-right: 8px; border-radius: var(--r-md); color: var(--c-ink-mute); flex-shrink: 0;
}
.back-link:hover { background: var(--c-surface-2); color: var(--c-ink); }

/* ---- Prompt "nyalakan notifikasi" (global, dari notify.js) ---- */
.notif-prompt {
    position: fixed; right: 16px; bottom: 16px; z-index: 1080;
    display: flex; align-items: flex-start; gap: 12px;
    width: min(380px, calc(100vw - 32px));
    padding: 14px 14px 12px; background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--r-lg);
    box-shadow: var(--sh-lg, 0 10px 30px rgba(0,0,0,.14));
    transform: translateY(12px); opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}
.notif-prompt.is-in { transform: translateY(0); opacity: 1; }
.notif-prompt__icon {
    display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%; background: var(--c-signal-soft); color: var(--c-signal-700);
}
.notif-prompt__body { flex: 1; min-width: 0; }
.notif-prompt__title { font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--c-ink); }
.notif-prompt__msg { font-size: 12.5px; color: var(--c-ink-soft); margin-top: 2px; }
.notif-prompt__actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.notif-prompt__x {
    position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
    display: grid; place-items: center; border: none; background: transparent;
    color: var(--c-ink-mute); border-radius: var(--r-sm); cursor: pointer;
}
.notif-prompt__x:hover { background: var(--c-surface-2); color: var(--c-ink); }

/* Di layar kecil: melebar penuh di bawah, tombol jadi satu baris rapi. */
@media (max-width: 560px) {
    .notif-prompt { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

/* ---- Prompt "tur singkat" (global, dari tutorial.js) ----
   Sengaja di POJOK KIRI bawah (notif-prompt di kanan) agar tak tumpuk
   kalau kebetulan keduanya muncul di kunjungan pertama yang sama. */
.tut-prompt {
    position: fixed; left: 16px; bottom: 16px; z-index: 1080;
    display: flex; align-items: flex-start; gap: 12px;
    width: min(360px, calc(100vw - 32px));
    padding: 14px 14px 12px; background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--r-lg);
    box-shadow: var(--sh-lg, 0 10px 30px rgba(0,0,0,.14));
    transform: translateY(12px); opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}
.tut-prompt.is-in { transform: translateY(0); opacity: 1; }
.tut-prompt__icon {
    display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%; background: var(--c-signal-soft); color: var(--c-signal-700);
}
.tut-prompt__body { flex: 1; min-width: 0; }
.tut-prompt__title { font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--c-ink); }
.tut-prompt__msg { font-size: 12.5px; color: var(--c-ink-soft); margin-top: 2px; }
.tut-prompt__actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.tut-prompt__x {
    position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
    display: grid; place-items: center; border: none; background: transparent;
    color: var(--c-ink-mute); border-radius: var(--r-sm); cursor: pointer;
}
.tut-prompt__x:hover { background: var(--c-surface-2); color: var(--c-ink); }
@media (max-width: 560px) {
    .tut-prompt { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

/* ============================================================
   Tutorial interaktif — coachmark (spotlight + kartu langkah)
   ------------------------------------------------------------
   .tut-spot memakai trik box-shadow: bayangan 9999px meredupkan
   SELURUH viewport kecuali area elemen ini sendiri (jadi terlihat
   seperti sorotan). pointer-events:none supaya klik tetap tembus ke
   UI asli — tur ini tak mengunci interaksi (CRM kerja, bukan produk
   publik yang butuh onboarding paksa).
   ============================================================ */
.tut-spot {
    position: fixed;
    z-index: 2000;
    border: 2px solid var(--c-signal);
    border-radius: var(--r-md);
    box-shadow: 0 0 0 9999px rgba(15, 17, 21, .6);
    pointer-events: none;
    transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}
.tut-card {
    position: fixed;
    z-index: 2001;
    width: min(320px, calc(100vw - 24px));
    padding: 14px 16px 12px;
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: 0 14px 34px rgba(0,0,0,.28);
    transition: top .22s ease, left .22s ease;
}
.tut-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tut-card__count { font-size: 11px; font-weight: var(--fw-semibold); color: var(--c-signal-700); letter-spacing: .02em; }
.tut-card__x {
    width: 22px; height: 22px; display: grid; place-items: center;
    border: none; background: transparent; color: var(--c-ink-mute);
    border-radius: var(--r-sm); cursor: pointer;
}
.tut-card__x:hover { background: var(--c-surface-2); color: var(--c-ink); }
.tut-card__title { font-size: 14.5px; font-weight: var(--fw-semibold); color: var(--c-ink); margin-bottom: 4px; }
.tut-card__text { font-size: 13px; color: var(--c-ink-soft); line-height: 1.45; }
.tut-card__foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
/* Kartu penutup tur (tur berikutnya / kembali ke daftar) — sedikit lebih
   lebar krn memuat 2-3 tombol, dan spotlight jadi nol (redup penuh). */
.tut-card--done { width: min(400px, calc(100vw - 24px)); }
.tut-card--done .tut-card__count { color: var(--c-window-ok, var(--c-signal-700)); }
@media (max-width: 480px) {
    .tut-card { width: calc(100vw - 24px); }
}

/* ============================================================
   Skeleton loading (kerangka konten saat data belum datang)
   ------------------------------------------------------------
   Dipakai lewat WABA.skeleton (core.js). Prinsipnya: tampilkan bentuk
   yang MENYERUPAI konten asli, bukan spinner — mata sudah tahu apa yang
   akan muncul, jadi terasa lebih cepat walau waktunya sama.
   ============================================================ */
.sk {
    position: relative; overflow: hidden;
    background: var(--c-surface-2);
    border-radius: var(--r-sm);
}
.sk::after {
    content: ""; position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        transparent, color-mix(in srgb, var(--c-surface) 70%, transparent), transparent);
    animation: sk-shimmer 1.4s infinite;
}
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }

.sk--text  { height: 10px; }
.sk--title { height: 13px; }
.sk--circle{ border-radius: 50%; }
.sk--pill  { border-radius: var(--r-pill); }

/* Konten yang baru datang: muncul lembut, jangan "loncat". */
.fade-in { animation: fade-in .18s ease both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* Hormati pengguna yang sensitif gerakan: kerangka tetap ada, kilaunya diam. */
@media (prefers-reduced-motion: reduce) {
    .sk::after { animation: none; }
    .fade-in   { animation: none; }
}

/* ---- Bentuk siap pakai ---- */
/* Baris daftar percakapan/kontak: avatar + dua baris teks */
.sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.sk-row__lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }

/* Bubble pesan */
.sk-bubbles { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.sk-bubble { height: 38px; border-radius: var(--r-lg); max-width: 62%; }
.sk-bubble--in  { align-self: flex-start; }
.sk-bubble--out { align-self: flex-end; }

/* Kartu statistik */
.sk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.sk-card  { height: 84px; border-radius: var(--r-md); }