/* pencarianpakar.css - Style dropdown Live Search / Autocomplete PAUD
   (dipakai oleh js/pencarianpakar.js, RPC 'cari_pencarian_pakar').
   Kelas dibuat otomatis oleh JS: .paud-pencarian-wrap, .paud-pencarian-input,
   .paud-pencarian-clear, .paud-pencarian-dropdown, .paud-pencarian-item. */

/* Pembungkus input dibuat position: relative agar dropdown & tombol X
   menempel tepat di bawah / di dalam kotak pencarian. */
.paud-pencarian-wrap { position: relative; }

/* Ruang untuk tombol X di dalam input (mengalahkan utility Tailwind pr-4) */
.paud-pencarian-input { padding-right: 2.25rem !important; }

/* ---------- Tombol X (clear) ---------- */
.paud-pencarian-clear {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background-color: transparent;
    color: #94a3b8;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.paud-pencarian-clear:hover { background-color: #e2e8f0; color: #334155; }
/* display:flex di atas mengalahkan aturan [hidden] bawaan browser */
.paud-pencarian-clear[hidden] { display: none; }

/* ---------- Panel dropdown ----------
   Desain disamakan dengan panel dropdown di navbar/topbar PAUD
   (notifPanel & profilePanel): bg-white, rounded-xl, border slate-100,
   shadow lembut 0 10px 40px -10px rgba(0,0,0,0.15). */
.paud-pencarian-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 45;                    /* di bawah drawer sidebar (60) */
    min-width: 100%;
    max-height: 20rem;
    overflow-y: auto;
    padding: 0.375rem;
    background-color: #ffffff;      /* bg-white (sama dgn panel navbar) */
    border: 1px solid #f1f5f9;      /* border-slate-100 (panel navbar) */
    border-radius: 0.75rem;         /* rounded-xl (panel navbar) */
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15); /* shadow panel navbar */
}
.paud-pencarian-dropdown[hidden] { display: none; }

/* ---------- Item rekomendasi (judul bold + sub kecil + badge) ---------- */
.paud-pencarian-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: none;
    border-radius: 0.5rem;
    background-color: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.paud-pencarian-item:hover,
.paud-pencarian-item.active {
    background-color: #f8fafc;      /* hover:bg-slate-50 (gaya menu navbar) */
    color: #0f172a;                 /* hover:text-slate-900 */
}

.paud-pencarian-item-main {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;                   /* agar teks panjang terpotong ellipsis */
}
.paud-pencarian-judul {
    font-size: 0.8125rem;
    font-weight: 700;               /* judul_utama: bold */
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.paud-pencarian-sub {
    font-size: 0.6875rem;           /* sub_keterangan: kecil & mutase */
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.paud-pencarian-badge {
    flex-shrink: 0;
    padding: 0.125rem 0.375rem;
    border: 1px solid #dbeafe;
    border-radius: 0.375rem;
    background-color: #eff6ff;
    color: #2563eb;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- Baris status & keterangan bawah ---------- */
.paud-pencarian-status {
    padding: 0.625rem 0.75rem;
    color: #94a3b8;
    font-size: 0.75rem;
}
.paud-pencarian-hint {
    padding: 0.375rem 0.75rem 0.25rem;
    border-top: 1px solid #f1f5f9;
    margin-top: 0.25rem;
    color: #94a3b8;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* =====================================================================
   GLOBAL SEARCH NAVBAR (js/livesearchbar.js -> window.PAUD_GLOBAL_SEARCH)
   ---------------------------------------------------------------------
   Nama kelas WAJIB memakai prefix .paud-global-search-* dan TIDAK BOLEH
   memakai .paud-pencarian-* di bawah ini: kelas .paud-pencarian-* dipakai
   oleh dropdown pencarian lokal tabel (perizinan / registersurat /
   rekomendasi). Pemisahan ini yang membuat pencarian lokal tidak
   terpengaruh slightest pun oleh global search.

   Badge kategori diberi warna berbeda agar 4 modul mudah dibedakan sekilas.
   ===================================================================== */

/* Pembungkus input topbar: anchor untuk dropdown & tombol X */
.paud-global-search-wrap { position: relative; }

/* Ruang untuk tombol X (mengalahkan utility pr-4 dari Tailwind) */
.paud-global-search-input { padding-right: 2.25rem !important; }

/* ---------- Tombol hapus (namespace global search) ---------- */
.paud-global-search-clear {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background-color: transparent;
    color: #94a3b8;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.paud-global-search-clear:hover { background-color: #e2e8f0; color: #334155; }
/* display:flex di atas mengalahkan aturan [hidden] bawaan browser */
.paud-global-search-clear[hidden] { display: none; }

/* ---------- Panel dropdown ---------- */
.paud-global-search-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 45;                    /* di bawah drawer sidebar (60) */
    min-width: 100%;
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.375rem;
    background-color: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
}
.paud-global-search-dropdown[hidden] { display: none; }

/* ---------- Item hasil (badge + judul + sub) ----------
   Susunan mengikuti dropdown pencarian tabel registersurat.html:
   judul bold, sub-keterangan kecil abu-abu, badge pill di sisi kanan. */
.paud-global-search-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: none;
    border-radius: 0.5rem;
    background-color: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.paud-global-search-item:hover,
.paud-global-search-item.active {
    background-color: #f8fafc;
}

.paud-global-search-item-main {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}
/* Judul: font-bold + slate-800 (sama seperti kolom nama pada tabel) */
.paud-global-search-judul {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1e293b;                 /* slate-800 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Sub-keterangan: text-xs + slate-500 */
.paud-global-search-sub {
    font-size: 0.75rem;             /* text-xs */
    color: #64748b;                 /* slate-500 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Badge (sisi kanan item) ----------
   Teks badge diambil dari dataset: PENGIRIM / PERIHAL (Register Surat),
   PERIZINAN, REKOMENDASI, ARSIP. Warna dasar biru soft; tiap modul punya
   warna sendiri supaya mudah dibedakan sekilas. */
.paud-global-search-badge {
    flex-shrink: 0;
    padding: 0.125rem 0.375rem;
    border: 1px solid #dbeafe;
    border-radius: 0.375rem;
    background-color: #eff6ff;
    color: #2563eb;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.paud-global-search-badge.is-perizinan {
    border-color: #fde68a;
    background-color: #fffbeb;
    color: #b45309;
}
.paud-global-search-badge.is-rekomendasi {
    border-color: #bbf7d0;
    background-color: #f0fdf4;
    color: #15803d;
}
.paud-global-search-badge.is-arsip {
    border-color: #e9d5ff;
    background-color: #faf5ff;
    color: #7e22ce;
}
/* Badge ini sudah uppercase lewat CSS; teks dataset ditulis kapital
   ("PENGIRIM") supaya sama persis bila CSS tidak termuat. */

/* ---------- Status & hint ---------- */
.paud-global-search-status {
    padding: 0.625rem 0.75rem;
    color: #94a3b8;
    font-size: 0.75rem;
}
.paud-global-search-hint {
    padding: 0.375rem 0.75rem 0.25rem;
    border-top: 1px solid #f1f5f9;
    margin-top: 0.25rem;
    color: #94a3b8;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}