/* assets/css/style.css - সম্পূর্ণ নতুন প্রিমিয়াম ডিজাইন */
#member-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:20px;
    margin:20px 0;
}

.member-card{
    background:#ffffff;
    border-radius:20px;
    box-shadow:0 8px 30px rgba(0,0,0,0.06);
    padding:25px 20px;
    text-align:center;
    border:1px solid #eef3f8;
    transition:all 0.3s ease;
    position:relative;
    overflow:hidden;
}

.member-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg,#0d6efd,#00b4d8,#0d6efd);
    background-size:200% 100%;
    animation:gradientBorder 3s ease infinite;
}

@keyframes gradientBorder{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

.member-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 40px rgba(13,110,253,0.10);
    border-color:#cfe2ff;
}

.member-card img{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    object-position:top;
    border:4px solid #fff;
    box-shadow:0 4px 15px rgba(13,110,253,0.20);
    margin-bottom:12px;
    transition:0.3s;
}

.member-card:hover img{
    transform:scale(1.05);
}

.member-card h3{
    margin:6px 0 4px;
    font-size:20px;
    color:#0b1e3a;
    font-weight:700;
}

.member-card p{
    display:inline-block;
    background:#e7f0fe;
    color:#0d6efd;
    padding:4px 18px;
    border-radius:40px;
    font-size:13px;
    font-weight:600;
    margin:0 0 14px;
}

.info-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px;
}

.info-box{
    background:linear-gradient(135deg,#f8fbff,#f0f6fe);
    border-radius:12px;
    padding:12px 8px;
    border:1px solid #e9edf4;
    transition:0.3s;
}

.info-box:hover{
    background:#ffffff;
    border-color:#cfe2ff;
}

.info-title{
    font-size:12px;
    color:#6c7a8a;
    margin-bottom:4px;
    font-weight:500;
}

.info-value{
    font-size:20px;
    font-weight:700;
    color:#0d6efd;
}

.due{
    color:#dc3545;
    font-size:15px;
}

.toggle-details-btn{
    background:transparent;
    border:2px solid #0d6efd;
    color:#0d6efd;
    padding:8px 22px;
    border-radius:40px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
    margin-top:8px;
}

.toggle-details-btn:hover{
    background:#0d6efd;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(13,110,253,0.25);
}

.details-container{
    display:none;
    margin-top:18px;
    border-top:2px dashed #e9edf4;
    padding-top:18px;
    text-align:left;
}

.details-container.open{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    animation:slideDown 0.4s ease;
}

@keyframes slideDown{
    from{opacity:0;transform:translateY(-10px);}
    to{opacity:1;transform:none;}
}

.detail-item{
    background:#f8fafc;
    padding:8px 12px;
    border-radius:10px;
    border:1px solid #eef3f8;
    transition:0.2s;
}

.detail-item:hover{
    background:#ffffff;
    border-color:#dce8ff;
}

.detail-title{
    font-size:11px;
    color:#8a9aae;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.3px;
}

.detail-value{
    font-size:15px;
    font-weight:600;
    color:#1a2b44;
    margin-top:2px;
}

.detail-value.due-text{color:#dc3545;}
.detail-value.green-text{color:#198754;}
.detail-value.gold-text{color:#b8860b;}
.detail-value.blue-text{color:#0d6efd;}

@media(max-width:480px){
    #member-list{
        grid-template-columns:1fr;
        padding:0 10px;
    }
    .details-container.open{
        grid-template-columns:1fr;
    }
    .info-row{
        grid-template-columns:1fr 1fr;
    }
    .member-card{
        padding:20px 15px;
    }
    .member-card img{
        width:75px;
        height:75px;
    }
    .member-card h3{
        font-size:18px;
    }
}

@media(min-width:481px) and (max-width:768px){
    #member-list{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }
    .details-container.open{
        grid-template-columns:1fr 1fr;
    }
}

@media(min-width:769px) and (max-width:1024px){
    #member-list{
        grid-template-columns:repeat(2,1fr);
    }
}

/* ==========================================
   NEW: এ্যাডমিন ওভারভিউ (সমিতির সারসংক্ষেপ) - প্রিমিয়াম গ্রিড-বক্স ডিজাইন
   member-card এর info-box প্যাটার্নের সাথে মিলিয়ে বানানো, existing কোনো CSS বদলানো হয়নি।
   এই ব্লকই এখন .twd-overview-* ক্লাসগুলোর একমাত্র উৎস (আগে PHP-এর ইনলাইন
   <style>-এও নকল রুল ছিল যা এখানকার গ্রেডিয়েন্ট/হোভার-এফেক্ট চাপা দিয়ে দিত,
   তাই সেটা সরিয়ে সব মালিকানা এখানে আনা হয়েছে)। */
.twd-overview-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding:18px 24px;
}

.twd-overview-item{
    background:linear-gradient(135deg,#f8fbff,#f0f6fe);
    border-radius:12px;
    padding:16px 10px;
    text-align:center;
    border:1px solid #e9edf4;
    transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.twd-overview-item:hover{
    background:#ffffff;
    border-color:#cfe2ff;
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(13,110,253,0.10);
}

.twd-overview-item--full{
    grid-column:1 / -1;
}

.twd-overview-item-label{
    font-size:12px;
    color:#6c7a8a;
    margin-bottom:6px;
    font-weight:500;
    letter-spacing:0.2px;
}

.twd-overview-item-value{
    font-size:20px;
    font-weight:700;
    color:#0b2b5c;
    letter-spacing:-0.2px;
    font-variant-numeric:tabular-nums;
}

.twd-overview-item-value.twd-ov-due{
    color:#dc3545;
}

.twd-overview-item-value.twd-ov-success{
    color:#198754;
}

/* গুরুত্বপূর্ণ/বকেয়া তথ্যের জন্য একটু উষ্ণ, প্রিমিয়াম হাইলাইট — বাড়তি HTML ছাড়াই
   ::before দিয়ে বাম পাশে একটা সরু অ্যাকসেন্ট রিবন যোগ করা */
.twd-overview-item--highlight{
    position:relative;
    background:linear-gradient(135deg,#fff8f0,#fff0f0);
    border-color:#f3d9d9;
    padding-left:22px;
    box-shadow:0 6px 18px rgba(220,53,69,0.05);
}

.twd-overview-item--highlight::before{
    content:'';
    position:absolute;
    left:10px;
    top:14px;
    bottom:14px;
    width:3px;
    border-radius:3px;
    background:linear-gradient(180deg,#dc3545,#f3a5a5);
}

.twd-overview-item--highlight:hover{
    border-color:#eec2c2;
    box-shadow:0 10px 24px rgba(220,53,69,0.10);
}

.twd-overview-item--highlight .twd-overview-item-value{
    font-size:22px;
    font-weight:800;
}

/* "বড়" হিরো নাম্বার (যেমন বর্তমান ক্যাশ ব্যালেন্স) - এই সংখ্যাটাই সবচেয়ে
   গুরুত্বপূর্ণ, তাই টাইপোগ্রাফিতে সামান্য বেশি জোর দেওয়া হলো */
.twd-overview-item--big{
    padding:26px 16px;
}

.twd-overview-item--big .twd-overview-item-label{
    font-size:13px;
    margin-bottom:8px;
}

.twd-overview-item--big .twd-overview-item-value{
    font-size:30px;
    font-weight:800;
    letter-spacing:-0.5px;
}

@media(max-width:480px){
    .twd-overview-grid{
        padding:14px 16px;
        gap:10px;
    }
    .twd-overview-item-value{
        font-size:17px;
    }
    .twd-overview-item--highlight .twd-overview-item-value{
        font-size:19px;
    }
    .twd-overview-item--big .twd-overview-item-value{
        font-size:24px;
    }
}

/* ==========================================================
   MOBILE THEME-WIDTH ALIGNMENT — v1.9.1
   Member/Admin cards follow the WordPress theme content width.
   Desktop layout remains unchanged.
   ========================================================== */
@media (max-width: 768px) {
    #twd-main-content,
    #twd-admin-overview,
    #twd-main-content .twd-content-col,
    #twd-admin-overview .twd-content-col,
    #twd-member-list,
    #twd-admin-overview-content {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }

    #twd-member-list {
        margin-left:0 !important;
        margin-right:0 !important;
    }

    #twd-member-list .member-card,
    #twd-admin-overview-content .member-card,
    #twd-admin-overview-content .twd-overview-grid {
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }
}