/* ==== apps/class/class_chipbar.php dosyasindan tasindi ==== */
/* ---------- Chip Bar temel stiller ---------- */
/* Topbar kaldırıldı — settings_btn header'a taşındı */

/* ---- chip çıtası ---- */
.cb-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f4f5f7;
    border-bottom: 1px solid #dde1ea;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* DÜZELTME (2026-09, kullanıcı isteği): filtre çubuğu aşağı kaydırıldıkça
       kayboluyordu — kartlarla AYNI kaydırılabilir kapsayıcı (#main_container/
       .page_outer) içinde normal akışta olduğu için scroll ile birlikte
       yukarı kayıp gözden kayboluyordu. position:sticky ile üstte sabitleniyor. */
    position: sticky;
    top: 0;
    z-index: 10;
}
.cb-bar::-webkit-scrollbar { display:none; }

.cb-filter-icon { color:#8892a4; font-size:15px; flex-shrink:0; margin-right:2px; }

/* aktif chip — seçili değer */
.cb-chip-active {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 4px;
    background: #fff;
    color: #00838f;
    border: 1px solid #00bcd4;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
    line-height: 1;
    overflow: hidden;
}
.cb-chip-active:hover { background: #e0f7fa; border-color:#00acc1; }
/* Aqua label badge — seçili değer adı beyaz */
.cb-chip-active .cb-active-label {
    display: inline-flex;
    align-items: center;
    background: #00bcd4;
    color: #fff;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 2px;
    line-height: 1.4;
}
.cb-chip-active .cb-active-val {
    color: #006064;
    font-weight: 500;
    font-size: 12px;
}
.cb-chip-active .cb-x {
    font-size: 10px;
    color: #00838f;
    width: 15px; height: 15px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
    opacity: .8;
}
.cb-chip-active:hover .cb-x { opacity:1; color:#006064; }
.cb-chip-active .cb-x {
    font-size: 10px;
    opacity: .7;
    width: 15px; height: 15px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
}
.cb-chip-active:hover .cb-x { opacity:1; }

/* pasif chip — always, değer seçilmemiş */
.cb-chip-passive {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 4px;
    background: #fff;
    color: #4a5568;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
    position: relative;
    overflow: hidden;
}
.cb-chip-passive:hover  { border-color:#9aa5b4; }
.cb-chip-passive.cb-open { border-color:#00bcd4; }
/* Aqua label badge */
.cb-chip-passive .cb-label {
    display: inline-flex;
    align-items: center;
    background: #00bcd4;
    color: #fff;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 4px;
    line-height: 1.4;
    letter-spacing: 0.01em;
}
.cb-chip-passive .cb-caret { font-size:10px; color:#9aa5b4; transition:transform .18s; }
.cb-chip-passive.cb-open .cb-caret { transform:rotate(180deg); color:#00bcd4; }
.cb-chip-passive:hover .cb-label { background:#00acc1; }

/* detaylı arama butonu */
.cb-btn-detay {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    background: #fff;
    color: #4a5568;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    transition: background .15s;
}
.cb-btn-detay:hover { background:#f0f2f5; }

/* toplu onay butonu (bkz. 0_sorularim.php — Soru Havuzu'na özel) */
.cb-btn-tum-onaya {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    background: #16a34a;
    color: #fff;
    border: 1px solid #16a34a;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
}
.cb-btn-tum-onaya:hover { background:#15803d; }
.cb-btn-tum-onaya:disabled { cursor: default; }

/* ---- dropdown paneli ---- */
/* position:fixed + body'e eklenir — chip bar overflow:auto onu kesmez */
.cb-dd {
    position: fixed;
    background: #fff;
    border: 1px solid #dde1ea;
    border-radius: 10px;
    padding: 6px 0;
    min-width: 200px;
    max-width: 280px;
    z-index: 9500;
    box-shadow: 0 4px 20px rgba(0,0,0,.13);
    display: none;
}

/* arama kutusu (uzun listeler için) */
.cb-dd-search {
    padding: 6px 10px 8px;
    border-bottom: 1px solid #eef0f4;
}
.cb-dd-search input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    outline: none;
    background: #f8f9fb;
    color: #1a202c;
    box-sizing: border-box;
}
.cb-dd-search input:focus { border-color:#1e2d4e; }

/* seçenek listesi — gerçek select'i yansıtır */
.cb-dd-list { max-height:220px; overflow-y:auto; scrollbar-width:thin; }
.cb-dd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    font-size: 12px;
    color: #2d3748;
    cursor: pointer;
    transition: background .1s;
    user-select: none;
}
.cb-dd-item:hover   { background:#f4f7fb; }
.cb-dd-item.cb-sel  { color:#1e2d4e; font-weight:600; }
.cb-dd-item.cb-sel::after { content:'✓'; font-size:11px; opacity:.65; }
.cb-dd-item.cb-dis  { color:#aaa; pointer-events:none; }

/* ---- charm hidden wrapper ---- */
/* Sadece charm elementlerini taşır; görünmez, etkileşimsiz */
.cb-hidden-wrap {
    display: none !important;
    visibility: hidden;
    position: absolute;
    pointer-events: none;
    width: 0;
    height: 0;
    overflow: visible;
}
/* Açıkken: wrapper pointer-events:none — tıklamaları yutmaz,
   charm paneli kendi z-index'iyle her şeyin üstünde açılır */
.cb-hidden-wrap.cb-charm-visible {
    display: block !important;
    visibility: visible;
    position: fixed;
    top: 0; left: 0;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 10500;   /* sidebar (999) + header (1000) üstünde */
    overflow: visible;
}
/* Karartma overlay — sidebar(999) üstünde, charm paneli(9500) altında */
#cb_charm_overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.55);
    z-index: 1050;
    pointer-events: auto;
    cursor: pointer;
}

.cb-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f4f5f7;
    border-bottom: 1px solid #dde1ea;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* DÜZELTME (2026-09, kullanıcı isteği): filtre çubuğu aşağı kaydırıldıkça
       kayboluyordu — kartlarla AYNI kaydırılabilir kapsayıcı (#main_container/
       .page_outer) içinde normal akışta olduğu için scroll ile birlikte
       yukarı kayıp gözden kayboluyordu. position:sticky ile üstte sabitleniyor. */
    position: sticky;
    top: 0;
    z-index: 10;
}
.cb-bar::-webkit-scrollbar { display:none; }

.cb-filter-icon { color:#8892a4; font-size:15px; flex-shrink:0; margin-right:2px; }

.cb-chip-active {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 4px;
    background: #fff;
    color: #00838f;
    border: 1px solid #00bcd4;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
    line-height: 1;
    overflow: hidden;
}
.cb-chip-active:hover { background: #e0f7fa; border-color:#00acc1; }
.cb-chip-active .cb-active-label {
    display: inline-flex;
    align-items: center;
    background: #00bcd4;
    color: #fff;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 2px;
    line-height: 1.4;
}
.cb-chip-active .cb-active-val {
    color: #006064;
    font-weight: 500;
    font-size: 12px;
}
.cb-chip-active .cb-x {
    font-size: 10px;
    color: #00838f;
    width: 15px; height: 15px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
    opacity: .8;
}
.cb-chip-active:hover .cb-x { opacity:1; color:#006064; }

.cb-chip-passive {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 4px;
    background: #fff;
    color: #4a5568;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
    position: relative;
    overflow: hidden;
}
.cb-chip-passive:hover  { border-color:#9aa5b4; }
.cb-chip-passive.cb-open { border-color:#00bcd4; }
.cb-chip-passive .cb-label {
    display: inline-flex;
    align-items: center;
    background: #00bcd4;
    color: #fff;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 4px;
    line-height: 1.4;
    letter-spacing: 0.01em;
}
.cb-chip-passive .cb-caret { font-size:10px; color:#9aa5b4; transition:transform .18s; }
.cb-chip-passive.cb-open .cb-caret { transform:rotate(180deg); color:#00bcd4; }
.cb-chip-passive:hover .cb-label { background:#00acc1; }

.cb-btn-detay {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    background: #fff;
    color: #4a5568;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    transition: background .15s;
}
.cb-btn-detay:hover { background:#f0f2f5; }

/* toplu onay butonu (bkz. 0_sorularim.php — Soru Havuzu'na özel) */
.cb-btn-tum-onaya {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    background: #16a34a;
    color: #fff;
    border: 1px solid #16a34a;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
}
.cb-btn-tum-onaya:hover { background:#15803d; }
.cb-btn-tum-onaya:disabled { cursor: default; }

.cb-dd {
    position: fixed;
    background: #fff;
    border: 1px solid #dde1ea;
    border-radius: 10px;
    padding: 6px 0;
    min-width: 200px;
    max-width: 280px;
    z-index: 9500;
    box-shadow: 0 4px 20px rgba(0,0,0,.13);
    display: none;
}
.cb-dd-search { padding: 6px 10px 8px; border-bottom: 1px solid #eef0f4; }
.cb-dd-search input {
    width: 100%; padding: 5px 8px; border: 1px solid #d1d5db;
    border-radius: 6px; font-size: 12px; outline: none;
    background: #f8f9fb; color: #1a202c; box-sizing: border-box;
}
.cb-dd-search input:focus { border-color:#1e2d4e; }
.cb-dd-list { max-height:220px; overflow-y:auto; scrollbar-width:thin; }
.cb-dd-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; font-size: 12px; color: #2d3748;
    cursor: pointer; transition: background .1s; user-select: none;
}
.cb-dd-item:hover   { background:#f4f7fb; }
.cb-dd-item.cb-sel  { color:#1e2d4e; font-weight:600; }
.cb-dd-item.cb-sel::after { content:'✓'; font-size:11px; opacity:.65; }
.cb-dd-item.cb-dis  { color:#aaa; pointer-events:none; }

.cb-hidden-wrap {
    display: none !important;
    visibility: hidden;
    position: absolute;
    pointer-events: none;
    width: 0; height: 0;
    overflow: visible;
}
.cb-hidden-wrap.cb-charm-visible {
    display: block !important;
    visibility: visible;
    position: fixed;
    top: 0; left: 0;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 10500;
    overflow: visible;
}
#cb_charm_overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.55);
    z-index: 1050;
    pointer-events: auto;
    cursor: pointer;
}