/* ==========================================
   COMPLETE BLISS ADMIN PANEL
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{

    --primary:#0D6EFD;
    --primary-dark:#0B1F3A;

    --success:#16A34A;
    --warning:#F59E0B;
    --danger:#DC2626;

    --background:#F8FAFC;

    --white:#ffffff;

    --text:#1F2937;
    --text-light:#6B7280;

    --border:#E5E7EB;

    --shadow:0 10px 30px rgba(0,0,0,.08);

    --radius:18px;

    --sidebar-width:280px;

    --transition:.3s ease;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:'Poppins',sans-serif;

    background:var(--background);

    color:var(--text);

}

/* Links */

a{

    text-decoration:none;

    color:inherit;

}

/* Lists */

ul{

    list-style:none;

}

/* Buttons */

button{

    border:none;

    cursor:pointer;

    font-family:'Poppins',sans-serif;

}

/* Images */

img{

    max-width:100%;

    display:block;

}

/* Utility */

.container{

    width:100%;

    max-width:1600px;

    margin:auto;

}

/* ==========================================
   ADMIN LAYOUT
========================================== */

.sidebar{

    position:fixed;

    top:0;

    left:0;

    width:var(--sidebar-width);

    height:100vh;

    background:var(--primary-dark);

    color:var(--white);

    overflow-y:auto;

    box-shadow:var(--shadow);

    z-index:1000;

    transition:left .35s ease;

}

.sidebar-header{

    padding:30px 25px;

    border-bottom:1px solid rgba(255,255,255,.08);

        display:flex;

    justify-content:space-between;

    align-items:center;


}

.sidebar-header h2{

    font-size:24px;

    font-weight:700;

    color:#fff;

}

.sidebar-header span{

    display:block;

    margin-top:6px;

    font-size:13px;

    color:rgba(255,255,255,.7);

}

.sidebar-menu{

    padding:20px 0;

}

.close-sidebar{

    display:none;

    width:40px;

    height:40px;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    color:#fff;

    font-size:18px;

}

/* ==========================================
   SIDEBAR MENU
========================================== */

.sidebar-menu li{

    margin:8px 15px;

}

.sidebar-menu li a{

    display:flex;

    align-items:center;

    gap:15px;

    padding:14px 18px;

    border-radius:14px;

    color:rgba(255,255,255,.85);

    transition:var(--transition);

    font-size:15px;

    font-weight:500;

}

.sidebar-menu li a i{

    width:22px;

    text-align:center;

    font-size:18px;

}

.sidebar-menu li a:hover{

    background:rgba(255,255,255,.12);

    color:#fff;

    transform:translateX(5px);

}

.sidebar-menu li.active a{

    background:var(--primary);

    color:#fff;

}

/* ==========================================
   TOPBAR
========================================== */

.topbar{

    position:fixed;

    left:var(--sidebar-width);

    right:0;

    top:0;

    height:75px;

    background:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 30px;

    box-shadow:var(--shadow);

    z-index:999;

}

.topbar-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.topbar-left h3{

    font-size:22px;

    font-weight:600;

}

.menu-toggle{

    width:45px;

    height:45px;

    border-radius:12px;

    background:#F3F4F6;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}

.topbar-right{

    display:flex;

    align-items:center;

    gap:25px;

}

.notification-btn{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#F3F4F6;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

}

.admin-profile{

    display:flex;

    align-items:center;

    gap:15px;

}

.profile-info{

    text-align:right;

}

.profile-info span{

    display:block;

    font-size:12px;

    color:var(--text-light);

}

.profile-info small{

    font-size:15px;

    font-weight:600;

}

.profile-avatar{

    width:45px;

    height:45px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

}


/* ==========================================
   MAIN CONTENT
========================================== */

.main-content{

    margin-left:var(--sidebar-width);

    margin-top:75px;

    padding:30px;

    min-height:100vh;

    transition:var(--transition);

}

/* ==========================================
MOBILE SIDEBAR
========================================== */

.sidebar-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.5);

    visibility:hidden;

    opacity:0;

    transition:.3s;

    z-index:998;

}

.sidebar-overlay.show{

    visibility:visible;

    opacity:1;

}

.sidebar.show{

    left:0 !important;

}


/* ==========================================
   PAGE TITLE
========================================== */

.page-title{

    margin-bottom:25px;

}

.page-title h1{

    font-size:28px;

    font-weight:700;

    color:var(--text);

}

.page-title p{

    color:var(--text-light);

    margin-top:6px;

}

/* ==========================================
   TABLE
========================================== */

.table-container{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow);

    overflow-x:auto;

}

.admin-table{

    width:100%;

    border-collapse:collapse;

    min-width:1000px;

}

.admin-table thead{

    background:#0D6EFD;

}

.admin-table thead th{

    color:#fff;

    padding:18px;

    text-align:left;

    font-size:14px;

    font-weight:600;

}

.admin-table tbody td{

    padding:18px;

    border-bottom:1px solid #EEF2F7;

    font-size:14px;

    vertical-align:middle;

}

.admin-table tbody tr:hover{

    background:#F8FAFC;

}

/* ==========================================
   STATUS BADGES
========================================== */

.badge{

    padding:8px 15px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

    display:inline-block;

}

.badge.pending{

    background:#FEF3C7;

    color:#92400E;

}

.badge.approved{

    background:#DCFCE7;

    color:#166534;

}

.badge.rejected{

    background:#FEE2E2;

    color:#991B1B;

}

/* ==========================================
   BUTTONS
========================================== */

.btn-success,
.btn-danger,
.btn-view{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:9px 15px;

    border-radius:10px;

    color:#fff;

    font-size:13px;

    margin-right:6px;

    transition:.3s;

}

.btn-success{

    background:#16A34A;

}

.btn-danger{

    background:#DC2626;

}

.btn-view{

    background:#0D6EFD;

}

.btn-success:hover{

    background:#15803D;

}

.btn-danger:hover{

    background:#B91C1C;

}

.btn-view:hover{

    background:#0B5ED7;

}


/*=========================
MEMBERS TABLE
=========================*/

.table-card{

background:#fff;

border-radius:20px;

padding:25px;

margin-top:25px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

overflow:auto;

}

.member-table{

width:100%;

border-collapse:collapse;

min-width:900px;

}

.member-table th{

background:#f8f9fc;

padding:16px;

text-align:left;

font-size:14px;

font-weight:600;

color:#666;

}

.member-table td{

padding:18px 16px;

border-top:1px solid #eee;

vertical-align:middle;

}

.member-table tbody tr:hover{

background:#fafcff;

}

.wallet{

font-weight:700;

color:#0D6EFD;

}

.badge{

padding:6px 14px;

border-radius:30px;

font-size:12px;

font-weight:600;

display:inline-block;

}

.success{

background:#D1FAE5;

color:#065F46;

}

.warning{

background:#FEF3C7;

color:#92400E;

}

.danger{

background:#FEE2E2;

color:#991B1B;

}

.fund-btn{

display:inline-block;

padding:10px 18px;

background:#0D6EFD;

color:#fff;

border-radius:10px;

text-decoration:none;

font-size:14px;

font-weight:600;

transition:.3s;

}

.fund-btn:hover{

background:#084FC7;

color:#fff;

}

/*==============================
FUND WALLET
==============================*/

.page-heading{

font-size:28px;

font-weight:700;

margin-bottom:25px;

}

.wallet-user-card{

display:flex;

align-items:center;

gap:20px;

background:#F8FAFC;

padding:20px;

border-radius:15px;

margin-bottom:25px;

}

.wallet-avatar{

font-size:55px;

color:#0D6EFD;

}

.wallet-user-info h3{

margin:0;

font-size:22px;

}

.wallet-user-info p{

margin-top:6px;

color:#666;

}

.wallet-balance-card{

background:linear-gradient(135deg,#0D6EFD,#2563EB);

color:#fff;

padding:25px;

border-radius:18px;

margin-bottom:25px;

}

.wallet-balance-card small{

opacity:.9;

}

.wallet-balance-card h1{

margin-top:10px;

font-size:38px;

font-weight:700;

}

.quick-amounts{

display:flex;

gap:10px;

flex-wrap:wrap;

margin-top:18px;

}

.quick-btn{

padding:10px 18px;

border:none;

border-radius:10px;

background:#EEF4FF;

color:#0D6EFD;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.quick-btn:hover{

background:#0D6EFD;

color:#fff;

}

.fund-wallet-btn{

width:100%;

padding:15px;

background:#0D6EFD;

border:none;

border-radius:12px;

font-size:17px;

font-weight:600;

color:#fff;

transition:.3s;

}

.fund-wallet-btn:hover{

background:#084FC7;

}

.page-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

flex-wrap:wrap;

gap:15px;

}


.success-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:10px 12px;

background:#16A34A;

color:#fff;

border-radius:8px;

text-decoration:none;

margin-left:6px;

transition:.3s;

}

.success-btn:hover{

background:#15803D;

}


/*=========================
SIDEBAR LOGO
=========================*/

.sidebar-header{

padding:20px;

display:flex;

justify-content:space-between;

align-items:center;

border-bottom:1px solid rgba(255,255,255,.08);

}

.logo{

display:flex;

align-items:center;

gap:12px;

text-decoration:none;

color:#fff;

flex:1;

}

.logo img{

width:52px;

height:52px;

object-fit:contain;

border-radius:12px;

background:#fff;

padding:4px;

}

.logo-text h2{

font-size:18px;

margin:0;

font-weight:700;

color:#fff;

}

.logo-text span{

font-size:12px;

opacity:.75;

display:block;

margin-top:2px;

}

.sidebar-menu li.active>a{

background:#2563eb;

color:#fff;

border-radius:12px;

}

.sidebar-menu li.active i{

color:#fff;

}

/* Mobile */

@media(max-width:768px){

.logo img{

width:42px;

height:42px;

}

.logo-text h2{

font-size:16px;

}

.logo-text span{

font-size:11px;

}

}


/*=================================
ADMIN STATS
=================================*/

.stats-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin:25px 0;

}

.stat-card{

background:#fff;

padding:25px;

border-radius:18px;

box-shadow:0 8px 20px rgba(0,0,0,.06);

text-align:center;

transition:.3s;

}

.stat-card:hover{

transform:translateY(-4px);

}

.stat-card i{

font-size:34px;

color:#2563eb;

margin-bottom:15px;

}

.stat-card h3{

font-size:28px;

margin-bottom:10px;

}

.stat-card p{

color:#777;

font-weight:600;

}

/*====================================
TABLE CARD
====================================*/

.tables-card{

background:#fff;

margin-top:25px;

padding:20px;

border-radius:18px;

box-shadow:0 8px 20px rgba(0,0,0,.06);

}

.tables-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.tables-header h3{

font-size:20px;

display:flex;

align-items:center;

gap:10px;

}

.tables-responsive{

overflow-x:auto;

}

.admin-tables{

width:100%;

border-collapse:collapse;

}

.admin-tables th{

background:#f7f7f7;

padding:15px;

text-align:left;

font-weight:700;

}

.admin-tables td{

padding:15px;

border-bottom:1px solid #eee;

}

.admin-tables tr:hover{

background:#fafafa;

}


.filter-bar{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-bottom:20px;

}

.filter-bar input,
.filter-bar select{

padding:12px 15px;

border:1px solid #ddd;

border-radius:10px;

min-width:220px;

font-size:14px;

}

.filter-bar button{

background:#2563eb;

color:#fff;

border:none;

padding:12px 20px;

border-radius:10px;

cursor:pointer;

font-weight:600;

}

.filter-bar button:hover{

background:#1d4ed8;

}

@media(max-width:768px){

.filter-bar{

flex-direction:column;

}

.filter-bar input,
.filter-bar select,
.filter-bar button{

width:100%;

}

}



.dashboard-section{

margin-top:35px;

}

.section-title{

display:flex;

align-items:center;

gap:10px;

margin-bottom:20px;

}

.section-title h3{

font-size:22px;

margin:0;

}

.stat-card small{

display:block;

margin-top:10px;

color:#666;

font-size:13px;

}

.stat-card.warning{

border-left:5px solid #f59e0b;

}

.stat-card.info{

border-left:5px solid #2563eb;

}


/*=========================
Recent Activity
=========================*/

.activity-card{

background:#fff;

border-radius:16px;

padding:20px;

box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.activity-row{

display:flex;

align-items:center;

justify-content:space-between;

padding:15px 0;

border-bottom:1px solid #f1f1f1;

gap:15px;

}

.activity-row:last-child{

border-bottom:none;

}

.activity-icon{

width:45px;

height:45px;

border-radius:50%;

background:#eef4ff;

display:flex;

justify-content:center;

align-items:center;

color:#2563eb;

font-size:18px;

flex-shrink:0;

}

.activity-details{

flex:1;

}

.activity-details strong{

font-size:15px;

}

.activity-details small{

color:#777;

}

.activity-amount{

font-weight:700;

color:#16a34a;

}

.money-in{

color:#16a34a;

font-weight:700;

}

.money-out{

color:#dc2626;

font-weight:700;

}

.activity-details small{

display:block;

margin-top:4px;

line-height:1.6;

color:#777;

font-size:12px;

}


/*==============================
Top Schemes
==============================*/

.scheme-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:20px;

margin-top:20px;

}

.scheme-card{

background:#fff;

padding:22px;

border-radius:16px;

box-shadow:0 8px 20px rgba(0,0,0,.05);

display:flex;

flex-direction:column;

gap:18px;

}

.scheme-card h3{

margin:0;

font-size:20px;

}

.scheme-card p{

color:#666;

margin:0;

}

.scheme-stats{

display:flex;

justify-content:space-between;

text-align:center;

}

.scheme-stats strong{

display:block;

font-size:22px;

}

.scheme-stats span{

font-size:13px;

color:#777;

}

.scheme-money{

display:flex;

justify-content:space-between;

font-size:14px;

}

.scheme-money strong{

display:block;

margin-top:4px;

}

.scheme-btn{

display:block;

text-align:center;

padding:12px;

background:#2563eb;

color:#fff;

border-radius:10px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.scheme-btn:hover{

background:#1d4ed8;

}


.table-tools{

margin:20px 0;

display:flex;

justify-content:flex-end;

}

.table-tools input{

width:320px;

max-width:100%;

padding:12px 16px;

border:1px solid #ddd;

border-radius:10px;

font-size:15px;

outline:none;

transition:.3s;

}

.table-tools input:focus{

border-color:#2563eb;

box-shadow:0 0 0 3px rgba(37,99,235,.12);

}


/* ==========================
   CREATE PLAN FORM
========================== */

.plan-form{
    margin-top:20px;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    font-weight:600;
    margin-bottom:8px;
    color:#444;
}

.form-control{
    width:100%;
    padding:12px 14px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:15px;
    transition:.3s;
    background:#fff;
}

.form-control:focus{
    outline:none;
    border-color:#0D6EFD;
    box-shadow:0 0 0 3px rgba(13,110,253,.15);
}

textarea.form-control{
    resize:vertical;
}

.form-actions{
    margin-top:30px;
    display:flex;
    justify-content:flex-end;
    gap:15px;
    align-items:center;
}

.page-heading{
    margin-bottom:25px;
    display:flex;
    align-items:center;
    gap:10px;
}


/* ==========================
   BACK BUTTON
========================== */

.back-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 22px;
    background:#F3F4F6;
    color:#374151;
    border:1px solid #D1D5DB;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    transition:.3s ease;
    cursor:pointer;
}

.back-btn:hover{
    background:#E5E7EB;
    color:#111827;
    transform:translateY(-2px);
}


/* Pending Badge */

.badge-warning{

display:inline-block;

padding:6px 12px;

background:#FEF3C7;

color:#B45309;

font-size:13px;

font-weight:600;

border-radius:20px;

text-align:center;

}


.badge-paid{

display:inline-block;

padding:6px 12px;

background:#DCFCE7;

color:#15803D;

font-size:13px;

font-weight:600;

border-radius:20px;

text-align:center;

}

.badge-overdue{

display:inline-block;

padding:6px 12px;

background:#FEE2E2;

color:#DC2626;

font-size:13px;

font-weight:600;

border-radius:20px;

text-align:center;

}

.action-buttons{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.action-buttons a{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    text-decoration:none;
    transition:.3s;
}

.action-buttons a i{
    font-size:15px;
}

.action-buttons a:hover{
    transform:translateY(-2px);
}

/* ===========================
   PRIMARY BUTTON
=========================== */

.primary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    background:#2563eb;
    color:#fff;
    border-radius:10px;
    text-decoration:none;
    transition:.3s ease;
}

.primary-btn:hover{
    background:#1d4ed8;
    transform:translateY(-2px);
}

/* ===========================
   ACTION BUTTONS
=========================== */

.action-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}

.action-buttons a{
    width:40px;
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:10px;
    text-decoration:none;
}

.action-buttons i{
    font-size:15px;
}

.action-buttons a:hover{
    transform:translateY(-2px);
}


/* =========================================
   MEMBER DETAILS PAGE
========================================= */

.member-details-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px;
}

.member-profile{
    display:flex;
    align-items:center;
    gap:15px;
}

.member-avatar{
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0D6EFD;
    color:#fff;
    font-size:24px;
}

.member-profile h2{
    margin:0 0 5px;
}

.member-profile p{
    margin:0;
    color:#6b7280;
}

.member-details-section{
    margin-top:25px;
}

.member-details-section .table-card{
    margin-bottom:25px;
}

.member-details-section h3,
.table-card > h3{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
}

.member-info-table{
    width:100%;
    border-collapse:collapse;
}

.member-info-table th,
.member-info-table td{
    padding:14px 12px;
    border-bottom:1px solid #eee;
    text-align:left;
}

.member-info-table th{
    width:220px;
    font-weight:600;
}

.member-info-table tr:last-child th,
.member-info-table tr:last-child td{
    border-bottom:none;
}

.wallet{
    font-weight:700;
}


/* Transaction History Header - Mobile */

@media (max-width: 600px) {

    .page-header h1 {
        font-size: 22px;
        line-height: 1.25;
    }

    .page-header h1 i {
        font-size: 19px;
    }

    .page-header p {
        font-size: 13px;
        line-height: 1.5;
        margin-top: 6px;
    }

}