/* css/arkadas-ekle.css */

/* Tema Değişkenleri (Açık Tema Varsayılan) */
:root {
    --frdw-bg: #ffffff;
    --frdw-border-color: #e0e6ed;
    --frdw-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    --frdw-header-bg: #f9fafb;
    --frdw-header-text-color: #374151;
    --frdw-item-bg: transparent;
    --frdw-item-hover-bg: #f3f4f6;
    --frdw-divider-color: #e5e7eb;
    --frdw-username-text-color: #1f2937;
    --frdw-meta-text-color: #6b7280;
    --frdw-empty-text-color: #6b7280;
    --frdw-avatar-border: #e5e7eb; /* Avatar kenarlık rengi güncellendi */
    --frdw-button-success-bg: #10b981;
    --frdw-button-success-text: #ffffff;
    --frdw-button-success-hover-bg: #059669;
    --frdw-button-danger-bg: #ef4444;
    --frdw-button-danger-text: #ffffff;
    --frdw-button-danger-hover-bg: #dc2626;
    --frdw-scrollbar-thumb-bg: #b8c0c9; /* Kaydırma çubuğu rengi güncellendi */
    --frdw-scrollbar-track-bg: #f1f3f6; /* Kaydırma çubuğu arka planı güncellendi */
}

/* Gece Modu Değişkenleri */
body:not(.light-theme) {
    --frdw-bg: #2a2e34;
    --frdw-border-color: #3e444c; /* Kenarlık rengi güncellendi */
    --frdw-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    --frdw-header-bg: #30353b;
    --frdw-header-text-color: #d1d5db;
    --frdw-item-hover-bg: #393e44; /* Hover rengi güncellendi */
    --frdw-divider-color: #3e444c;
    --frdw-username-text-color: #f3f4f6;
    --frdw-meta-text-color: #a0aec0;
    --frdw-empty-text-color: #9ca3af;
    --frdw-avatar-border: #505863; /* Avatar kenarlık rengi güncellendi */
    --frdw-button-success-bg: #059669;
    --frdw-button-success-hover-bg: #047857;
    --frdw-button-danger-bg: #dc2626;
    --frdw-button-danger-hover-bg: #b91c1c;
    --frdw-scrollbar-thumb-bg: #555e68; /* Kaydırma çubuğu rengi güncellendi */
    --frdw-scrollbar-track-bg: #2c3034; /* Kaydırma çubuğu arka planı güncellendi */
}

.friend-request-dropdown-wrapper {
    position: relative; /* Dropdown menüsünün doğru konumlanması için */
    display: inline-block; /* Diğer ikonlarla aynı hizada olması için */
}

.friend-request-dropdown-wrapper .dropdown-menu {
    /* Varsayılan olarak gizli ve fare üzerine gelince görünecek */
    display: none; /* Başlangıçta gizli */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* Hafif aşağıdan gelme efekti */
    transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s linear 0.25s;
    
    position: absolute;
    right: 0; 
    left: auto;
    min-width: 350px; 
    max-height: 400px; 
    background-color: var(--frdw-bg);
    border: 1px solid var(--frdw-border-color);
    border-radius: 0.45rem; 
    box-shadow: var(--frdw-shadow);
    padding: 0; 
    margin-top: 0.35rem; /* Butonla arasında boşluk */
    z-index: 1050; /* Diğer header elementlerinin üzerinde kalması için */
    display: flex; /* Bu satır gereksiz, display:none ile çakışır. Aşağıda hover'da block olacak. */
    flex-direction: column; /* Başlık ve içerik için */
}

/* Fare üzerine gelince dropdown menüsünü göster */
.friend-request-dropdown-wrapper:hover .dropdown-menu,
.friend-request-dropdown-wrapper .icon-button:focus + .dropdown-menu, /* Butona odaklanınca da aç (erişilebilirlik) */
.friend-request-dropdown-wrapper .dropdown-menu:hover { /* Menü üzerindeyken açık kalması için */
    display: flex; /* Flex olarak göster */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0s;
}


.friend-request-dropdown-wrapper .dropdown-header {
    padding: 0.8rem 1.2rem; 
    font-size: 0.9rem; 
    font-weight: 600;
    letter-spacing: 0.025em;
    color: var(--frdw-header-text-color);
    background-color: var(--frdw-header-bg);
    border-bottom: 1px solid var(--frdw-border-color);
    border-top-left-radius: calc(0.45rem - 1px); 
    border-top-right-radius: calc(0.45rem - 1px);
    flex-shrink: 0; 
}

.friend-request-dropdown-wrapper .friend-request-list-scrollable-area {
    max-height: 300px; 
    overflow-y: auto;
    padding: 0.25rem 0; 
}

.friend-request-dropdown-wrapper .friend-request-list-scrollable-area::-webkit-scrollbar {
    width: 6px; 
}
.friend-request-dropdown-wrapper .friend-request-list-scrollable-area::-webkit-scrollbar-track {
    background: var(--frdw-scrollbar-track-bg);
    border-radius: 10px;
    margin: 4px 0; 
}
.friend-request-dropdown-wrapper .friend-request-list-scrollable-area::-webkit-scrollbar-thumb {
    background: var(--frdw-scrollbar-thumb-bg);
    border-radius: 10px;
}
.friend-request-dropdown-wrapper .friend-request-list-scrollable-area::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0; 
}
body:not(.light-theme) .friend-request-dropdown-wrapper .friend-request-list-scrollable-area::-webkit-scrollbar-thumb:hover {
    background: #656d76;
}
.friend-request-dropdown-wrapper .friend-request-list-scrollable-area {
    scrollbar-width: thin;
    scrollbar-color: var(--frdw-scrollbar-thumb-bg) var(--frdw-scrollbar-track-bg);
}

.friend-request-dropdown-wrapper .dropdown-item-custom-container {
    padding: 0.85rem 1.2rem; 
    background-color: var(--frdw-item-bg);
    border-bottom: 1px solid var(--frdw-divider-color);
    transition: background-color 0.15s ease-in-out;
}
.friend-request-dropdown-wrapper .friend-request-list-scrollable-area .dropdown-item-custom-container:last-child {
    border-bottom: none; 
}
.friend-request-dropdown-wrapper .dropdown-item-custom-container:hover {
    background-color: var(--frdw-item-hover-bg);
}

.friend-request-dropdown-wrapper .media {
    display: flex;
    align-items: center; 
}

.friend-request-dropdown-wrapper .user-avatar-small {
    width: 40px; 
    height: 40px;
    border-radius: 50%;
    margin-right: 12px; /* Avatar ve metin arası boşluk */
    border: 1px solid var(--frdw-avatar-border); 
    object-fit: cover;
    flex-shrink: 0; 
}

.friend-request-dropdown-wrapper .media-body {
    flex: 1;
    min-width: 0; 
}

.friend-request-dropdown-wrapper .dropdown-item-title { 
    margin-bottom: 0.15rem;
    font-weight: 500; 
    font-size: 0.9rem; 
    color: var(--frdw-username-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.friend-request-dropdown-wrapper .text-sm.text-muted { 
    font-size: 0.78rem; 
    color: var(--frdw-meta-text-color);
    margin-bottom: 0.5rem; /* Butonlardan önce boşluk */
}

.friend-request-dropdown-wrapper .action-buttons {
    display: flex;
    gap: 0.5rem; /* Butonlar arası boşluk */
    margin-top: 0.4rem; /* Üst metinle arasında boşluk */
}

.friend-request-dropdown-wrapper .action-buttons .btn {
    padding: 0.3rem 0.7rem; 
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 0.3rem; 
    border: none; 
    transition: background-color 0.15s ease-in-out, transform 0.1s ease-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
}
.friend-request-dropdown-wrapper .action-buttons .btn:hover {
    transform: translateY(-1px); 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
body:not(.light-theme) .friend-request-dropdown-wrapper .action-buttons .btn:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.friend-request-dropdown-wrapper .action-buttons .btn:active {
    transform: translateY(0px);
    box-shadow: none;
}

.friend-request-dropdown-wrapper .btn-success {
    background-color: var(--frdw-button-success-bg);
    color: var(--frdw-button-success-text);
}
.friend-request-dropdown-wrapper .btn-success:hover {
    background-color: var(--frdw-button-success-hover-bg);
}

.friend-request-dropdown-wrapper .btn-danger {
    background-color: var(--frdw-button-danger-bg);
    color: var(--frdw-button-danger-text);
}
.friend-request-dropdown-wrapper .btn-danger:hover {
    background-color: var(--frdw-button-danger-hover-bg);
}

.friend-request-dropdown-wrapper .dropdown-item-text.text-center { 
    padding: 1.5rem 1.2rem; 
    color: var(--frdw-empty-text-color);
    text-align: center;
    font-style: italic;
    font-size: 0.85rem; 
    border-bottom: none; 
}

.friend-request-dropdown-wrapper .custom-friend-request-badge {
    position: absolute;
    top: 1px; 
    right: -4px;
    padding: 0.2em 0.45em;
    font-size: 0.68em; 
    font-weight: 600; 
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #e53e3e; 
    border-radius: 10px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    border: 1px solid var(--frdw-bg); 
}
.friend-request-dropdown-wrapper .icon-button {
    position: relative; 
}