/*
 * Lapisan tema di atas app.css (Tailwind terkompilasi), terinspirasi
 * tampilan hPanel Hostinger: sidebar terang, aksen ungu, kartu lebih
 * lembut & lapang, tanpa mengubah satupun file view/fitur.
 *
 * Cara kerja: karena app.css adalah hasil build Tailwind statis (warna
 * "brand-*" sudah dibakukan jadi RGB literal saat build, bukan CSS
 * variable), file ini di-load SETELAH app.css di layout.php dan
 * mendefinisikan ulang class yang sama — di CSS, deklarasi yang datang
 * belakangan dengan spesifisitas sama akan menang, jadi tidak perlu
 * !important dan tidak ada file lain yang perlu disentuh. Import di
 * layout.php SATU baris, page/fitur mana pun otomatis ikut ganti tampilan.
 */

:root {
    --hp-50:  246 244 254;
    --hp-100: 237 231 253;
    --hp-200: 219 205 250;
    --hp-300: 191 168 245;
    --hp-400: 156 124 240;
    --hp-500: 124  86 232; /* aksen utama, dekat ungu khas hPanel */
    --hp-600: 103  61 217;
    --hp-700:  84  45 181;
    --hp-800:  67  36 146;
    --hp-900:  50  27 112;
    --hp-950:  30  16  69;
}

/* ---------- Palet "brand" -> ungu (dipakai avatar, tombol, link aktif) --- */
.bg-brand-50    { background-color: rgb(var(--hp-50)) !important; }
.bg-brand-100   { background-color: rgb(var(--hp-100)) !important; }
.bg-brand-500   { background-color: rgb(var(--hp-500)) !important; }
.bg-brand-600   { background-color: rgb(var(--hp-600)) !important; }
.bg-brand-950   { background-color: #ffffff !important; }
.border-brand-200 { border-color: rgb(var(--hp-200)) !important; }
.border-brand-700 { border-color: rgb(var(--hp-300)) !important; }
.text-brand-300 { color: rgb(var(--hp-600)) !important; }
.text-brand-400 { color: rgb(148 163 184) !important; } /* label grup sidebar terang: slate-400 */
.text-brand-400\/70 { color: rgb(148 163 184 / .8) !important; }
.text-brand-600 { color: rgb(var(--hp-600)) !important; }
.text-brand-700 { color: rgb(var(--hp-700)) !important; }
.text-brand-800 { color: rgb(var(--hp-800)) !important; }
.hover\:text-brand-400\/70:hover { color: rgb(100 116 139 / .9) !important; }
.hover\:text-brand-700:hover { color: rgb(var(--hp-700)) !important; }
.hover\:text-brand-800:hover { color: rgb(var(--hp-800)) !important; }
.focus\:ring-brand-500:focus { --tw-ring-color: rgb(var(--hp-500) / .5) !important; }

/* ---------------------------------------------------------- Kartu & radius */
.card {
    border-radius: 1rem !important;
    border-color: rgb(228 224 245) !important;
    box-shadow: 0 1px 2px rgba(50, 27, 112, .04), 0 2px 8px rgba(50, 27, 112, .06) !important;
}

/* ------------------------------------------------------------- Tombol utama */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
    border-radius: .625rem !important;
    font-weight: 600 !important;
}
.btn-primary {
    background-color: rgb(var(--hp-600)) !important;
    box-shadow: 0 1px 2px rgba(50, 27, 112, .08);
}
.btn-primary:hover { background-color: rgb(var(--hp-700)) !important; }
.btn-secondary:hover { background-color: rgb(var(--hp-50)) !important; border-color: rgb(var(--hp-200)) !important; }

/* -------------------------------------------------------- Input & fokus */
.field-input:focus {
    border-color: rgb(var(--hp-500)) !important;
    --tw-ring-color: rgb(var(--hp-500) / .55) !important;
}

/* -------------------------------------------------------------- Tabel */
.table-head {
    background-color: rgb(var(--hp-50)) !important;
    color: rgb(var(--hp-800)) !important;
    letter-spacing: .04em !important;
}

/* ----------------------------------------------------- Sidebar (hPanel) */
.app-sidebar {
    background-color: #ffffff;
    border-right: 1px solid rgb(232 227 250);
}

/* Jaring pengaman ukuran ikon: sidebar.php sudah menyetel width/height
   lewat atribut + inline style pada setiap <svg>, baris di bawah ini
   cuma lapisan cadangan kalau suatu saat ada ikon lain ditambahkan
   tanpa inline style — supaya tidak pernah lagi membesar tak terkendali
   seperti bug sebelumnya. */
.app-sidebar svg {
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
    flex-shrink: 0;
}

/* Scrollbar tipis khusus nav sidebar, senada dengan aksen ungu */
.sidebar-nav { scrollbar-width: thin; scrollbar-color: rgb(var(--hp-200)) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background-color: rgb(var(--hp-200)); border-radius: 9999px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

.nav-link {
    color: rgb(71 85 105) !important; /* slate-600 di atas sidebar terang */
    font-weight: 500 !important;
}
.nav-link svg { color: rgb(148 163 184); flex-shrink: 0; }
.nav-link:hover {
    background-color: rgb(var(--hp-50)) !important;
    color: rgb(var(--hp-700)) !important;
}
.nav-link:hover svg { color: rgb(var(--hp-600)); }
.nav-link-active {
    background-color: rgb(var(--hp-600)) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(103, 61, 217, .35);
}
.nav-link-active svg { color: #ffffff !important; }

/* Item menu "segera" (belum tersedia) tetap redup di atas sidebar terang */
.nav-link.cursor-not-allowed {
    color: rgb(148 163 184) !important;
}

/* --------------------------------------------- Grup menu (accordion) ---
 * Dibangun di atas <details>/<summary> native supaya tetap berfungsi
 * tanpa JavaScript. Kepala grup (summary) tampil seperti nav-link
 * biasa + chevron di kanan; isi grup (nav-group-panel) adalah daftar
 * sub-item yang menjorok ke dalam dengan garis pemandu tipis.
 */
.nav-group { margin: 0; }
.nav-group + .nav-group,
.nav-group + a.nav-link,
a.nav-link + .nav-group {
    margin-top: .125rem;
}

.nav-group-summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    list-style: none;
    cursor: pointer;
    border-radius: .5rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: rgb(71 85 105);
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, color .15s ease;
}
.nav-group-summary::-webkit-details-marker,
.nav-group-summary::marker { display: none; content: ""; }
.nav-group-summary svg { color: rgb(148 163 184); }
.nav-group-summary:hover {
    background-color: rgb(var(--hp-50));
    color: rgb(var(--hp-700));
}
.nav-group-summary:hover svg { color: rgb(var(--hp-600)); }
.nav-group-summary:focus-visible {
    outline: 2px solid rgb(var(--hp-400));
    outline-offset: 2px;
}

/* Grup yang berisi halaman aktif ditandai ungu lembut, walau kepalanya
   sendiri belum tentu terbuka. */
.nav-group-summary-active {
    background-color: rgb(var(--hp-50));
    color: rgb(var(--hp-700));
}
.nav-group-summary-active svg { color: rgb(var(--hp-600)); }

.nav-group-chevron {
    margin-left: auto;
    display: flex;
    color: rgb(148 163 184);
    transition: transform .18s ease;
}
.nav-group[open] > .nav-group-summary .nav-group-chevron {
    transform: rotate(90deg);
    color: rgb(var(--hp-600));
}

.nav-group-panel {
    margin: .125rem 0 .25rem 0;
    padding-left: 1.6rem;
    border-left: 1px solid rgb(232 227 250);
    margin-left: 1.125rem;
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.nav-sublink {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: .5rem;
    padding: .4rem .625rem;
    font-size: .8125rem;
    font-weight: 500;
    color: rgb(100 116 139);
    transition: background-color .15s ease, color .15s ease;
}
.nav-sublink:hover {
    background-color: rgb(var(--hp-50));
    color: rgb(var(--hp-700));
}
.nav-sublink-active {
    background-color: rgb(var(--hp-100));
    color: rgb(var(--hp-700));
    font-weight: 600;
}
.nav-sublink-disabled {
    cursor: not-allowed;
    color: rgb(180 186 199);
}
.nav-sublink-disabled:hover {
    background-color: transparent;
    color: rgb(180 186 199);
}

/* ------------------------------------------------------- Topbar & scroll */
header.sticky {
    box-shadow: 0 1px 0 rgba(50, 27, 112, .03);
}

/* Status "Tersambung"/dsb pada dot indikator WhatsApp tetap pakai warna
   semantik (emerald/amber/rose) — sengaja TIDAK diikutkan ke ungu supaya
   maknanya (baik/perlu perhatian/bermasalah) tetap jelas dan universal. */

/* -------------------------------------------------------- Responsif kecil */
@media (max-width: 640px) {
    .card { border-radius: .875rem !important; }
    main .max-w-6xl { padding-left: 0; padding-right: 0; }
}

/* --------------------------------------------------------- Halaman login */
.auth-shell {
    background-color: rgb(var(--hp-50));
    background-image:
        radial-gradient(circle at 12% 8%, rgb(var(--hp-200) / .55), transparent 40%),
        radial-gradient(circle at 88% 92%, rgb(var(--hp-300) / .35), transparent 45%);
    background-attachment: fixed;
}
.auth-logo {
    box-shadow: 0 8px 20px -6px rgb(var(--hp-600) / .55);
}

/* ============================================================
 * Dashboard — kartu ringkasan bergaya monitoring (ikon, badge
 * status, hover halus, animasi masuk). Semua CSS murni (bukan
 * class Tailwind baru) supaya aman dipakai walau app.css hasil
 * build statis tidak ikut di-compile ulang. Tidak ada warna baru
 * di luar palet ungu + semantik (emerald/amber/rose/slate) yang
 * sudah dipakai di tema ini.
 * ============================================================ */

.stat-card {
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(50, 27, 112, .10), 0 2px 6px rgba(50, 27, 112, .06) !important;
    border-color: rgb(var(--hp-200)) !important;
}

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    flex-shrink: 0;
}
.stat-icon--sm {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .5rem;
}
.stat-icon--sm svg { width: 15px !important; height: 15px !important; }

.activity-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.activity-row { transition: background-color .15s ease; }
.activity-row:hover { background-color: rgb(var(--hp-50)); }

/* Titik status WhatsApp berdenyut halus saat "Tersambung" / perlu perhatian,
   diam saat netral (muted) — meniru indikator live pada tool monitoring. */
.wa-live-dot { position: relative; display: inline-flex; }
.wa-live-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 9999px;
    animation: wa-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
.wa-live-dot[data-tone="good"]::after  { background-color: rgba(16, 185, 129, .55); }
.wa-live-dot[data-tone="warn"]::after  { background-color: rgba(245, 158, 11, .5); }
.wa-live-dot[data-tone="bad"]::after   { background-color: rgba(244, 63, 94, .5); }
.wa-live-dot[data-tone="muted"]::after { display: none; }

@keyframes wa-ping {
    0%        { transform: scale(1);   opacity: .65; }
    75%, 100% { transform: scale(2.2); opacity: 0; }
}

/* Kartu & panel muncul dengan fade + slide halus saat dashboard dimuat,
   sedikit bertahap lewat animation-delay inline per elemen. */
.dash-fade-in {
    animation: dash-fade-in-kf .35s ease both;
}
@keyframes dash-fade-in-kf {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .stat-card, .dash-fade-in, .wa-live-dot::after {
        animation: none !important;
        transition: none !important;
    }
}