/* src/css/home/list.css */
/* কাজ: কাস্টমার লিস্ট, কার্ড ডিজাইন, সার্চ বার এবং স্টিকি লিস্ট হেডার */

/* ========================================= */
/* ========= STICKY LIST HEADER ============ */
/* ========================================= */

.sticky-list-header {
    position: sticky;
    top: var(--header-height, 180px); /* JS দিয়ে ডাইনামিক সেট হয় */
    z-index: 50; 
    background-color: #fff;
    padding: 15px 20px;
    display: flex;
    flex-direction: column; 
    border-bottom: 1px solid #f0f0f0;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    transition: top 0.1s ease, box-shadow 0.2s ease, border-radius 0.2s ease;
}

/* স্ক্রল করলে যখন হেডার উপরে আটকে যায় */
.sticky-list-header.is-stuck {
    border-radius: 0; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.sticky-list-header::before {
    content: '';
    position: absolute;
    top: -25px; 
    left: 0;
    width: 100%;
    height: 30px; 
    background-color: transparent; 
    z-index: -1; 
    display: none; 
}

.sticky-list-header.is-stuck::before {
    display: block; 
    background-color: #fff; 
}

.header-left h2 { 
    font-size: 16px; 
    font-weight: bold; 
    color: #333; 
    margin: 0; 
}

.header-right-actions { 
    display: flex; 
    gap: 12px; 
}

/* গোল বাটন (সার্চ এবং ফিল্টার) */
.circle-btn { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background-color: #f0f2f5; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    color: #555; 
    border: 1px solid #eee; 
}

.circle-btn:active { 
    background-color: #e4e6eb; 
    transform: scale(0.95); 
}

/* ========================================= */
/* ========= SEARCH BAR AREA =============== */
/* ========================================= */

.search-collapse-area {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, margin-top 0.3s ease-out;
    background-color: #fff;
    margin-top: 0;
}

.search-collapse-area.open { 
    max-height: 60px; 
    margin-top: 15px; 
}

.search-bar-wrapper { 
    width: 100%;
    padding: 10px 15px; 
    background: #f8f9fa; 
    border-radius: 25px; 
    display: flex; 
    align-items: center; 
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06); 
    border: 1px solid #e0e0e0; 
}

.search-bar-wrapper input { 
    border: none; 
    background: transparent; 
    flex-grow: 1; 
    font-size: 16px; 
    outline: none; 
    color: #333; 
    margin-left: 10px; 
}

.close-search { 
    color: #dc3545; 
    padding: 5px; 
    cursor: pointer; 
    font-size: 18px; 
}

/* ========================================= */
/* ========= CUSTOMER LIST & CARDS ========= */
/* ========================================= */

.customer-list { 
    padding: 0; 
    background-color: #fff; 
}

.customer-card { 
    display: flex; 
    align-items: center; 
    padding: 12px 15px; 
    border-bottom: 1px solid #f0f0f0; 
    cursor: pointer; 
    background: #fff; 
}

.customer-card:active { 
    background-color: #f9f9f9; 
}

.customer-avatar { 
    width: 45px; 
    height: 45px; 
    border-radius: 50%; 
    margin-right: 15px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 18px; 
    font-weight: bold; 
    background-size: cover; 
    background-position: center; 
    flex-shrink: 0; 
    color: #555; 
    background-color: #e9ecef; 
}

/* ডাইনামিক অ্যাভাটার কালার */
.customer-list .customer-card:nth-child(4n+1) .customer-avatar { background-color: #E3F2FD; color: #1565C0; }
.customer-list .customer-card:nth-child(4n+2) .customer-avatar { background-color: #F3E5F5; color: #7B1FA2; }
.customer-list .customer-card:nth-child(4n+3) .customer-avatar { background-color: #E0F2F1; color: #00695C; }
.customer-list .customer-card:nth-child(4n+4) .customer-avatar { background-color: #FFF3E0; color: #E65100; }

.customer-card .customer-info { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
}

.customer-card .name { 
    font-size: 16px; 
    font-weight: 600; 
    color: #333; 
    margin-bottom: 3px; 
}

.customer-card .customer-subtitle { 
    font-size: 12px; 
    color: #6c757d; 
}

.customer-card .amount-section { 
    text-align: right; 
    display: flex; 
    align-items: center; 
}

.customer-card .due-amount { 
    font-size: 16px; 
    font-weight: bold; 
    color: #333; 
}

.customer-card .due-amount.pabo { color: #dc3545; }
.customer-card .due-amount.debo { color: #28a745; }
.customer-card .due-amount i { margin-left: 8px; font-size: 12px; color: #ccc; }

/* Status Banner (Offline/Online) */
#sync-status-container { padding: 10px 15px 0 15px; }
.status-banner { display: flex; align-items: center; padding: 10px 15px; border-radius: 8px; font-size: 13px; margin-bottom: 5px; cursor: pointer; }
.status-banner.offline { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.status-banner.online { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.status-banner .banner-icon { margin-right: 10px; font-size: 16px; }
.status-banner .banner-text { flex-grow: 1; }

/* ========================================= */
/* ========= SKELETON LOADER (LIST) ======== */
/* ========================================= */

.skeleton-loader { padding: 0; width: 100%; background: #fff; }
.skeleton-item { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid #f0f0f0; }
.skeleton-avatar { width: 45px; height: 45px; border-radius: 50%; background: #e0e0e0; margin-right: 15px; flex-shrink: 0; animation: shimmer 1.5s infinite linear; }
.skeleton-info { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; }
.skeleton-line { height: 12px; background: #e0e0e0; border-radius: 4px; animation: shimmer 1.5s infinite linear; }
.skeleton-line.short { width: 40%; }
.skeleton-line.long { width: 70%; }

@keyframes shimmer { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }

/* ========================================= */
/* ========= DARK MODE (LIST) ============== */
/* ========================================= */

body.dark-mode .sticky-list-header { background-color: #1e1e1e; border-bottom-color: #333; }
body.dark-mode .sticky-list-header.is-stuck::before { background-color: #1e1e1e; }
body.dark-mode .header-left h2 { color: #e0e0e0; }
body.dark-mode .circle-btn { background-color: #333; border-color: #444; color: #e0e0e0; }
body.dark-mode .search-collapse-area { background-color: #1e1e1e; border-color: #333; }
body.dark-mode .search-bar-wrapper { background-color: #2a2a2a; border-color: #444; }
body.dark-mode .search-bar-wrapper input { color: #fff; }
body.dark-mode .customer-list { background-color: #1e1e1e; }
body.dark-mode .customer-card { background-color: #1e1e1e; border-bottom-color: #333; }
body.dark-mode .customer-card .name { color: #e0e0e0; }
body.dark-mode .customer-card .customer-subtitle { color: #aaa; }
body.dark-mode .customer-card .due-amount { color: #e0e0e0; }
body.dark-mode .skeleton-loader { background-color: #1e1e1e; }
body.dark-mode .skeleton-item { border-bottom-color: #333; }
body.dark-mode .skeleton-avatar, body.dark-mode .skeleton-line { background-color: #2a2a2a; }