/* SMART SEARCH */
.smart-search-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:none;
    z-index:9999;
    justify-content:center;
    align-items:flex-start;
    padding-top:120px;
}

.smart-search-box{
    width:520px;
    background:#fff;
    border-radius:12px;
    padding:15px;
    box-shadow:0 10px 40px rgba(0,0,0,.3);
}

.smart-search-box input{
    width:100%;
    padding:14px;
    font-size:16px;
    border-radius:8px;
    border:1px solid #ddd;
    outline:none;
}

.smart-search-item{
    padding:10px 12px;
    border-radius:6px;
    cursor:pointer;
}

.smart-search-item:hover{
    background:#f1f1f1;
}

.smart-search-type{
    font-size:11px;
    color:#888;
}
.smart-search-item{
    padding:12px;
    border-radius:6px;
    cursor:pointer;
}

.smart-search-item.active{
    background:#4c5cff;
    color:#fff;
}

.smart-search-item small{
    opacity:.7;
}
.input-wrapper {
    position: relative;
}

#smartSearchInput {
    width: 100%;
    padding: 12px 110px 12px 12px; /* ruang kanan untuk badge */
    font-size: 14px;
}

.esc-inside {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none; /* agar klik fokus tetap ke input */
}

.esc-badge {
    background: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    font-family: monospace;
    color: #333;
}

.esc-text {
    font-size: 11px;
    color: #777;
}
#searchSwitcher{
    width:42px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.kbd-badge{
    background:#f1f1f1;
    border:1px solid #ccc;
    border-radius:4px;
    padding:2px 5px;
    font-size:11px;
    font-weight:600;
    font-family:monospace;
    color:#333;
    animation: fadeIn .3s ease;
}

@keyframes fadeIn{
    from{opacity:0; transform:scale(.9);}
    to{opacity:1; transform:scale(1);}
}

/* ======================================================
   SMART SEARCH - DARK MODE (ikut template)
====================================================== */

[data-theme-version="dark"] .smart-search-overlay {
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
}

/* box utama */
[data-theme-version="dark"] .smart-search-box {
    background-color: #1e1e2d;
    border: 1px solid #2b2b40;
    box-shadow: 0 10px 30px rgba(0,0,0,.6);
    border-radius: 12px;
}

/* wrapper input */
[data-theme-version="dark"] .input-wrapper {
    background-color: transparent;
}

/* input */
[data-theme-version="dark"] #smartSearchInput {
    background-color: #232338;
    border: 1px solid #2b2b40;
    color: #e6e9f0;
}

/* placeholder */
[data-theme-version="dark"] #smartSearchInput::placeholder {
    color: #8b8fa8;
}

/* focus */
[data-theme-version="dark"] #smartSearchInput:focus {
    background-color: #232338;
    border-color: #4dabff;
    box-shadow: 0 0 0 0.15rem rgba(77,171,255,.35);
    color: #ffffff;
}

/* ===== ESC BADGE DI DALAM INPUT ===== */
[data-theme-version="dark"] .esc-inside {
    color: #9aa4bf;
}

[data-theme-version="dark"] .esc-badge {
    background-color: #2b2b40;
    border: 1px solid #3a3a55;
    color: #e6e9f0;
}

[data-theme-version="dark"] .esc-text {
    color: #9aa4bf;
}

/* ===== RESULT LIST ===== */
[data-theme-version="dark"] #smartSearchResults {
    background-color: #1e1e2d;
}

/* item hasil */
[data-theme-version="dark"] .smart-item {
    color: #e6e9f0;
    border-bottom: 1px solid #2b2b40;
}

/* hover */
[data-theme-version="dark"] .smart-item:hover,
[data-theme-version="dark"] .smart-item.active {
    background-color: #232338;
}

/* judul */
[data-theme-version="dark"] .smart-item-title {
    color: #ffffff;
}

/* tipe (Menu, Guru, Siswa, dll) */
[data-theme-version="dark"] .smart-item-type {
    background-color: rgba(77,171,255,.15);
    color: #4dabff;
}

/* jika ada teks kecil */
[data-theme-version="dark"] .smart-item small {
    color: #9aa4bf;
}
/* ======================================================
   SMART SEARCH ITEM - DARK HOVER FIX
====================================================== */

[data-theme-version="dark"] .smart-search-item{
    display: block;
    padding: 12px 14px;
    border-radius: 8px;
    margin: 4px 6px;
    cursor: pointer;
    transition: background .15s ease,
                box-shadow .15s ease,
                transform .12s ease;
}

/* HOVER */
[data-theme-version="dark"] .smart-search-item:hover{
    background: linear-gradient(
        90deg,
        rgba(77,171,255,0.18),
        rgba(77,171,255,0.05)
    );
    box-shadow: inset 3px 0 0 #4dabff;
    transform: translateX(2px);
}

/* ACTIVE (arrow key) */
[data-theme-version="dark"] .smart-search-item.active{
    background: linear-gradient(
        90deg,
        rgba(77,171,255,0.28),
        rgba(77,171,255,0.08)
    );
    box-shadow: inset 3px 0 0 #4dabff,
                0 0 0 1px rgba(77,171,255,0.4);
}

/* TITLE */
[data-theme-version="dark"] .smart-search-item strong{
    color: #ffffff;
    font-weight: 600;
}

/* TYPE */
[data-theme-version="dark"] .smart-search-item small{
    color: #9aa4bf;
}
/* ======================================================
   DARK MODE - SEARCH SWITCHER (Ctrl+K Badge)
====================================================== */

[data-theme-version="dark"] #searchSwitcher{
    color:#e6e9f0;
}

/* badge Ctrl+K */
[data-theme-version="dark"] .kbd-badge{
    background:#2b2b40;
    border:1px solid #3a3a55;
    color:#e6e9f0;
}

/* icon search */
[data-theme-version="dark"] #searchSwitcher i{
    color:#9aa4bf;
}
[data-theme-version="dark"] #searchSwitcher:hover .kbd-badge{
    border-color:#4dabff;
    color:#ffffff;
}

[data-theme-version="dark"] #searchSwitcher:hover i{
    color:#4dabff;
}