:root {
    --primary-color: #0a7afe;
    --secondary-color: #0c204d;
    --background-color: #f0f2f5;
    --sidebar-bg: #ffffff;
    --text-color: #333;
    --light-text-color: #f8f9fa;
    --card-bg: #ffffff;
    --success-color: #28a745;
    --error-color: #dc3545;
    --pending-color: #ffc107;
    --border-radius: 8px;
    --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Hind Siliguri', sans-serif;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 16px;
    overflow-x: hidden; /* অনুভূমিক স্ক্রল বন্ধ করা */
}

.screen {
    width: 100%;
    min-height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
}
.screen.active {
    display: flex;
}

/* Login Page Styles */
.login-container {
    width: 90%; /* মোবাইলে যাতে স্ক্রিনের বাইরে না যায় */
    max-width: 400px;
    padding: 40px;
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    margin: 0 auto;
}
.login-logo {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 20px;
}
.login-container h2 {
    margin-bottom: 25px;
    color: var(--secondary-color);
}
.form-group {
    margin-bottom: 20px;
    text-align: left;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}
.form-control {
    width: 100%;               /* পুরো জায়গা নিবে */
    max-width: 100%;           /* কন্টেইনারের বাইরে যাবে না */
    white-space: normal;       /* টেক্সট র‍্যাপ করবে (এক লাইনে না রেখে নিচে নামাবে) */
    overflow: hidden;          /* অতিরিক্ত অংশ লুকাবে না */
    text-overflow: ellipsis;   /* যদি তবুও না ধরে তবে ... দেখাবে */
    padding-right: 30px;       /* ডান পাশে আইকনের জন্য জায়গা */
    box-sizing: border-box;    /* প্যাডিং সহ সাইজ ঠিক রাখবে */
}
.btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}
.btn-primary {
    background-color: var(--primary-color);
    color: var(--light-text-color);
}
.btn-primary:hover {
    background-color: #0868d7;
}

/* ★★★ Dashboard Styles (Fixed Layout) ★★★ */
.dashboard-container {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* --- Professional Compact Sidebar Design --- */
.sidebar {
    width: 240px; /* সাইজ একটু কমানো হলো */
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #f0f0f0; /* শ্যাডোর বদলে ক্লিন বর্ডার */
    flex-shrink: 0;
    height: 100vh;
    position: relative;
    z-index: 1000;
    transition: margin-left 0.3s ease;
}

.sidebar-header {
    padding: 20px 15px;
    text-align: center;
    /* বর্ডার সরানো হলো ক্লিন লুকের জন্য */
}
.sidebar-header h3 {
    color: var(--secondary-color);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.5px;
}

.sidebar-nav {
    flex-grow: 1;
    padding: 10px; /* সাইডে গ্যাপ দেওয়া হলো */
    overflow-y: auto;
    /* স্ক্রলবার লুকানোর জন্য */
    scrollbar-width: thin; 
}

.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    padding: 10px 15px; /* হাইট কমানো হলো (কমপ্যাক্ট) */
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px; /* ফন্ট সাইজ প্রফেশনাল */
    transition: all 0.2s ease;
    border-radius: 8px; /* বাটনগুলো গোলাকার হবে */
    margin-bottom: 4px; /* মাঝখানে সামান্য ফাঁকা */
}

.sidebar-nav .nav-item i {
    margin-right: 12px;
    width: 20px;
    text-align: center;
    font-size: 16px;
    transition: color 0.2s;
}

/* Hover Effect */
.sidebar-nav .nav-item:hover {
    background-color: #f8fafc;
    color: var(--secondary-color);
}

/* Active State (Modern Floating Style) */
.sidebar-nav .nav-item.active {
    background-color: rgba(10, 122, 254, 0.08); /* খুব হালকা নীল */
    color: var(--primary-color);
    font-weight: 600;
}

.sidebar-nav .nav-item.active i {
    color: var(--primary-color);
}

.sidebar-footer {
    padding: 15px;
    border-top: 1px solid #f0f0f0;
}

.sidebar-footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #fff1f2; /* হালকা লাল */
    color: var(--error-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    transition: background 0.2s;
}

.sidebar-footer a:hover {
    background-color: #ffe4e6;
}

.sidebar-footer a i {
    margin-right: 8px;
}

/* ★★★ Main Content (Fixed Layout) ★★★ */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: hidden;
    position: relative;
    margin-left: 0;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--card-bg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    flex-shrink: 0;
    width: 100%;
}
.main-header h1 {
    font-size: 20px;
    color: var(--secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.content-wrapper {
    padding: 15px;
    overflow-y: auto;
    flex-grow: 1;
    width: 100%;
}
.content-section {
    display: none;
}
.content-section.active {
    display: block;
}

/* Mobile Specific Fixes */
@media (max-width: 768px) {
    .dashboard-container {
        flex-direction: column;
    }
    
    .main-content {
        width: 100%;
    }
    
    /* Menu Toggle Button */
    .menu-toggle-btn {
        display: block;
        margin-right: 15px;
    }
    
    /* Overlay for Sidebar */
    #overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 900;
    }
    
    .sidebar.open ~ #overlay { 
        display: block;
    }
}

/* Table Styles */
.table-container {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow-x: auto;
    padding: 20px;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th, .data-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.data-table th {
    font-weight: 600;
    font-size: 14px;
    color: #888;
    text-transform: uppercase;
}
.data-table td {
    font-size: 15px;
}
.data-table tbody tr:last-child td {
    border-bottom: none;
}
.data-table .action-btn {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    margin-right: 5px;
    color: white;
}
.btn-approve { background-color: var(--success-color); }
.btn-reject { background-color: var(--error-color); }


/* ------------------------------------------------
   1. MODERN POPUP OVERLAY & CONTAINER
   ------------------------------------------------ */
.pro-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* গাঢ় ব্যাকগ্রাউন্ড */
    backdrop-filter: blur(8px);      /* ব্লার ইফেক্ট */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 15px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pro-popup-overlay.show {
    display: flex;
    opacity: 1;
}

.pro-popup-content {
    background: #ffffff;
    width: auto;                  /* অটোমেটিক উইথ */
    min-width: 320px;             /* খুব ছোট ডিভাইসের জন্য মিনিমাম */
    max-width: 500px;             /* ডিফল্ট ম্যাক্সিমাম সাইজ */
    height: auto;                 /* হাইট কন্টেন্ট অনুযায়ী হবে */
    max-height: 90vh;             /* স্ক্রিনের বাইরে যাবে না */
    
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    
    /* এনিমেশন */
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
}

.pro-popup-overlay.show .pro-popup-content {
    transform: scale(1);
}

/* বড় পপ-আপের জন্য (যেমন: Trade Manager) */
.pro-popup-content.large-scrollable {
    max-width: 700px;
    width: 95%;
}

/* স্ক্রলবার ডিজাইন (কনটেন্ট বেশি হলে) */
#pro-popup-message {
    overflow-y: auto;
    max-height: 70vh;
    padding: 5px;
    font-size: 15px;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 20px;
    
    /* ফায়ারফক্স স্ক্রলবার */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

/* ওয়েবকিট স্ক্রলবার (ক্রোম, সাফারি) */
#pro-popup-message::-webkit-scrollbar {
    width: 6px;
}
#pro-popup-message::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}

/* ------------------------------------------------
   2. ICONS, TITLE & INPUTS
   ------------------------------------------------ */
.pro-popup-icon-container {
    margin-bottom: 15px;
}

#pro-popup-icon {
    font-size: 45px;
    display: inline-block;
    animation: popIcon 0.5s ease;
}

@keyframes popIcon {
    0% { transform: scale(0); }
    80% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

#pro-popup-icon.success { color: #10b981; }
#pro-popup-icon.error { color: #ef4444; }
#pro-popup-icon.warning { color: #f59e0b; }
#pro-popup-icon.info { color: #3b82f6; }

#pro-popup-title {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px 0;
}

/* ইনপুট ফিল্ড ডিজাইন */
.pro-popup-content .form-group {
    text-align: left;
    margin: 15px 0;
}
.pro-popup-content .form-control {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: 0.3s;
}
.pro-popup-content .form-control:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ------------------------------------------------
   3. CLOSE BUTTON (Top Right)
   ------------------------------------------------ */
.pro-popup-close-x {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: 400;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s ease;
    z-index: 10;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.pro-popup-close-x:hover {
    color: #ef4444; /* লাল রং */
    background-color: #fef2f2;
    transform: rotate(90deg);
}

/* ------------------------------------------------
   4. BUTTONS AREA (Bottom)
   ------------------------------------------------ */
.pro-popup-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: auto; /* নিচে ঠেলে দিবে */
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

/* যদি বাটন না থাকে তবে এরিয়া হাইড হবে (JS লজিক অনুযায়ী) */
.pro-popup-buttons:empty {
    display: none;
    border-top: none;
    padding-top: 0;
}

/* ------------------------------------------------
   5. MINIMALIST TOAST (BOTTOM CENTER)
   ------------------------------------------------ */
.pro-toast {
    position: fixed;
    bottom: 30px;        /* নিচ থেকে ৩০ পিক্সেল উপরে */
    left: 50%;           /* হরিজন্টালি মাঝখানে */
    transform: translateX(-50%) translateY(50px); /* শুরুতে একটু নিচে এবং মাঝখানে */
    
    background: rgba(15, 23, 42, 0.9); /* খুব গাঢ় নীল/কালো ব্যাকগ্রাউন্ড */
    color: #fff;
    
    padding: 12px 25px;
    border-radius: 50px; /* ক্যাপসুল শেপ */
    
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
    
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    max-width: 90%;
    width: max-content;
    pointer-events: none; /* ক্লিকের সমস্যা করবে না */
}

.pro-toast.show {
    transform: translateX(-50%) translateY(0); /* ভেসে উঠবে */
    opacity: 1;
    visibility: visible;
}

/* টোস্টের আইকন */
.pro-toast .toast-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
}

.pro-toast.success .toast-icon { color: #4ade80; }
.pro-toast.error .toast-icon { color: #f87171; }
.pro-toast.warning .toast-icon { color: #fbbf24; }

/* টোস্টের লেখা */
.pro-toast .toast-content {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.pro-toast .toast-title {
    display: none; /* টাইটেল হাইড, শুধু মেসেজ দেখাবো ক্লিন লুকের জন্য */
}

.pro-toast .toast-message {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap; /* এক লাইনে দেখাবে */
}

/* মোবাইলের জন্য টোস্ট এডজাস্টমেন্ট */
@media (max-width: 480px) {
    .pro-toast .toast-message {
        white-space: normal; /* মোবাইলে লাইন ব্রেক হবে */
        text-align: left;
    }
    .pro-toast {
        border-radius: 12px; /* মোবাইলে একটু স্কয়ার হবে */
        padding: 12px 20px;
        bottom: 20px;
    }
}

/* ------------------------------------------------
   6. GLOBAL FULL SCREEN LOADER
   ------------------------------------------------ */
.global-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    z-index: 999999;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.global-loader-overlay.show {
    display: flex !important;
}

.global-loader-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 15px;
}

.global-loader-text {
    font-size: 16px;
    font-weight: 600;
    color: #334155;
    letter-spacing: 0.5px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ========== MOBILE RESPONSIVE STYLES ========== */

.menu-toggle-btn {
    display: none; /* Hidden on desktop */
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--secondary-color);
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none; /* Hidden by default */
}

/* For screens smaller than 768px (tablets and mobiles) */
@media (max-width: 768px) {
    .menu-toggle-btn {
        display: block;
    }
    
    .sidebar {
        position: fixed;
        left: -260px; /* Hide sidebar off-screen */
        top: 0;
        height: 100%;
        z-index: 1000;
        transition: left 0.3s ease;
    }

    .sidebar.open {
        left: 0; /* Show sidebar */
    }

    .main-content {
        margin-left: 0;
    }
    
    .data-table th, .data-table td {
        font-size: 13px;
        padding: 10px 8px;
    }

    .data-table .action-btn {
        padding: 5px 8px;
        font-size: 12px;
        display: block;
        margin-bottom: 5px;
        width: 80px;
        text-align: center;
    }
}

/* ========== PAYMENT METHODS PAGE STYLES ========== */

.form-container {
    background: #fff;
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid #eee;
}

.form-container h3 {
    margin-bottom: 20px;
    color: var(--secondary-color);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-container small {
    display: block;
    margin-top: 5px;
    color: #888;
}

.methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.method-card {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
    border-left: 5px solid var(--primary-color);
    position: relative;
}

.method-card.withdraw {
    border-left-color: var(--error-color);
}

.method-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.method-card-header img {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    border-radius: 50%;
}

.method-card-header h4 {
    margin: 0;
    color: var(--secondary-color);
}

.method-card .info-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}
.method-card .info-item:last-of-type {
    border-bottom: none;
}
.method-card .info-item span {
    color: #777;
}
.method-card .info-item strong {
    color: #333;
}

/* সাধারণ স্ট্যাটাস ব্যাজ (টেবিলের জন্য) */
.status-badge {
    display: inline-block;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 15px;
    text-transform: capitalize;
    text-align: center;
    min-width: 80px;
}

/* কার্ডের কোণায় দেখানোর জন্য অ্যাবসোলিউট ব্যাজ */
.status-badge-absolute {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 12px;
    font-weight: 600;
    color: #fff;
}

/* বিভিন্ন স্ট্যাটাসের জন্য রঙ */
.status-badge.verified, .status-badge-absolute.active { 
    background-color: #d4edda; 
    color: #155724; 
}
.status-badge.rejected, .status-badge-absolute.inactive { 
    background-color: #f8d7da; 
    color: #721c24; 
}
.status-badge.pending { 
    background-color: #fff3cd; 
    color: #856404; 
}
.status-badge.unverified { 
    background-color: #e2e3e5; 
    color: #383d41; 
}

.status-badge.active { background-color: var(--success-color); }
.status-badge.inactive { background-color: #777; }

.method-card-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 10px;
}

.method-card-actions .btn {
    width: auto;
    padding: 8px 12px;
    font-size: 13px;
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    .methods-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== DASHBOARD STATS GRID STYLES ========== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.stat-card {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    align-items: center;
    box-shadow: var(--box-shadow);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 20px;
    flex-shrink: 0;
}

.stat-info .stat-title {
    font-size: 14px;
    color: #777;
    margin-bottom: 5px;
}

.stat-info h2 {
    margin: 0;
    font-size: 24px;
    color: var(--secondary-color);
}

/* ========== SETTINGS PAGE STYLES ========== */
.settings-container {
    max-width: 1200px;
    margin: 0 auto;
}

.settings-container h3 {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 25px;
    color: var(--primary-color);
}

.json-textarea {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    background-color: #f8f9fa;
    color: #333;
    border: 1px solid #ccc;
}

/* ========== ENHANCED SETTINGS PAGE STYLES ========== */
.settings-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.settings-container fieldset {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: var(--border-radius);
    margin-top: 20px;
}

.settings-container legend {
    padding: 0 10px;
    font-weight: 600;
    color: var(--secondary-color);
}

.feature-control-group {
    background: #f8f9fa;
    padding: 15px;
    border-radius: var(--border-radius);
    border: 1px solid #eee;
}

.feature-control-group label {
    font-weight: 600;
}

.feature-control-group .form-control {
    margin-top: 8px;
}

/* ========== PROFESSIONAL MODAL STYLES (KYC, P2P, ADMIN) ========== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px); /* ★ নতুন: ব্লার ইফেক্ট */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: none; /* শুরুতে লুকানো */
}
/* JS দিয়ে display: flex করার পর এই অ্যানিমেশন কাজ করবে */
.modal-overlay[style*="display: flex"] {
    opacity: 1;
}

.modal-content {
    background: var(--card-bg);
    border-radius: 16px; /* ★ নতুন: গোলাকার বর্ডার */
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); /* ★ নতুন: প্রফেশনাল শ্যাডো */
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.modal-overlay[style*="display: flex"] .modal-content {
    transform: scale(1);
}

.modal-content.large {
    max-width: 800px;
}
/* ছোট মডালের জন্য */
.modal-content:not(.large) {
    max-width: 550px;
}

.modal-header {
    padding: 15px 25px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.modal-header h3 {
    margin: 0;
    font-size: 18px; /* ★ নতুন: টাইটেল সাইজ */
    color: var(--secondary-color);
}
.modal-close-btn {
    background: #f0f2f5;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.modal-close-btn:hover {
    background-color: #e9ecef;
}

.modal-body {
    padding: 25px;
    overflow-y: auto;
    flex-grow: 1;
}

/* KYC Modal Specific Styles */
.kyc-details-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 25px;
}
.kyc-data-section h4, .kyc-docs-section h4 {
    margin-bottom: 15px;
    color: var(--primary-color);
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.kyc-data-section .info-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 15px;
}
.kyc-data-section .info-item span {
    color: #555;
}
.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* রেসপন্সিভ গ্রিড */
    gap: 15px;
}
.doc-item label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    text-align: center;
}
.doc-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* ★ নতুন: ছবির অনুপাত ঠিক রাখা */
    object-fit: cover;
    border-radius: var(--border-radius);
    border: 1px solid #ddd;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.doc-item img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Modal Footer / Actions */
.modal-footer, .modal-actions {
    padding: 15px 25px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    background-color: #f8f9fa; /* ★ নতুন: ফুটার ব্যাকগ্রাউন্ড */
}
.modal-footer .btn, .modal-actions .btn {
    width: auto;
    padding: 10px 20px; /* ★ নতুন: বাটন প্যাডিং */
    font-size: 15px;
}
.btn-secondary {
    background-color: #6c757d;
    color: white;
}
.btn-secondary:hover {
    background-color: #5a6268;
}


/* Image Viewer (Full Screen) */
#image-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(5px); /* ★ নতুন: ব্লার ইফেক্ট */
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#full-image {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px; /* ★ নতুন: গোলাকার বর্ডার */
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

@media(max-width: 768px) {
    .modal-content {
        width: 95%;
        max-height: 85vh;
    }
    .kyc-details-grid {
        grid-template-columns: 1fr;
    }
    .docs-grid {
        grid-template-columns: 1fr 1fr; /* মোবাইলে ২টি করে ছবি */
    }
    .modal-body {
        padding: 20px;
    }
}

/* ========== KYC SEARCH AND EXPANDABLE SECTIONS ========== */

/* সার্চ কন্টেইনার স্টাইল */
.search-container {
    background: var(--card-bg);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

/* ============== পুরনো expandable-section এর কোড ডিলিট করে এটি যোগ করুন ============== */

.expandable-section {
    margin-top: 20px;
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--card-bg);
}

.expandable-header {
    background: #f8f9fa;
    color: var(--secondary-color);
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.expandable-header:hover {
    background: #f1f3f5;
}

.expandable-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.expand-icon {
    font-size: 14px;
    transition: transform 0.3s ease-in-out;
}

.expandable-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

/* JavaScript দিয়ে যখন 'open' ক্লাস যোগ করা হবে, তখন এই স্টাইলগুলো কাজ করবে */
.expandable-section.open .expandable-content {
    max-height: 1000px; /* একটি বড় মান দিন */
}

.expandable-section.open .expand-icon {
    transform: rotate(180deg);
}

/* স্ট্যাটাস ব্যাজ ইম্প্রুভমেন্ট */
.status-badge {
    display: inline-block;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 15px;
    text-transform: capitalize;
    text-align: center;
}

.status-badge.verified { 
    background-color: #d4edda; 
    color: #155724; 
}
.status-badge.rejected { 
    background-color: #f8d7da; 
    color: #721c24; 
}
.status-badge.pending { 
    background-color: #fff3cd; 
    color: #856404; 
}
.status-badge.unverified { 
    background-color: #e2e3e5; 
    color: #383d41; 
}

/* রেসপনসিভ অ্যাডজাস্টমেন্ট */
@media (max-width: 768px) {
    .expandable-header h3 {
        font-size: 16px;
    }
    
    .data-table th, .data-table td {
        font-size: 13px;
        padding: 10px 8px;
    }
}

/* ========== ENHANCED KYC TABLE STYLES ========== */
.btn-view {
    background: linear-gradient(135deg, var(--primary-color), #3b82f6);
    color: white;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    text-align: center;
    width: auto;
    display: inline-block;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-view:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #3b82f6, var(--primary-color));
}

.btn-view:active {
    transform: translateY(0);
}

.btn-view::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-view:hover::before {
    left: 100%;
}

/* KYC Table specific styles */
.data-table .status-badge {
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: capitalize;
    text-align: center;
    min-width: 80px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.data-table .status-badge.verified { 
    background-color: #d4edda; 
    color: #155724;
    border: 1px solid #c3e6cb;
}

.data-table .status-badge.rejected { 
    background-color: #f8d7da; 
    color: #721c24;
    border: 1px solid #f1b0b7;
}

.data-table .status-badge.pending { 
    background-color: #fff3cd; 
    color: #856404;
    border: 1px solid #ffeaa7;
}

.data-table .status-badge.unverified { 
    background-color: #e2e3e5; 
    color: #383d41;
    border: 1px solid #d6d8db;
}

/* Ensure table cells have proper spacing */
.data-table td {
    vertical-align: middle;
    padding: 12px 15px;
}

.data-table th {
    font-weight: 600;
    font-size: 14px;
    color: #888;
    text-transform: uppercase;
    padding: 15px;
    background-color: #f8f9fa;
}

/* Responsive table */
@media (max-width: 768px) {
    .btn-view {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .data-table .status-badge {
        padding: 4px 8px;
        font-size: 11px;
        min-width: 70px;
    }
}

/* ========== METHOD TEMPLATES PAGE STYLES ========== */

.template-card {
    background: #fff;
    border-radius: var(--border-radius);
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border: 1px solid #eee;
}

.template-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.template-card-header h5 {
    margin: 0;
    font-size: 16px;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
}

.template-card-header img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.template-card-body p {
    font-size: 13px;
    color: #555;
    margin: 5px 0;
}

.template-card-body code {
    background: #f0f2f5;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 12px;
}

/* ========== DYNAMIC FORM FIELDS STYLES ========== */
.dynamic-fields-fieldset {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: var(--border-radius);
    margin-top: 20px;
}
.dynamic-fields-fieldset legend {
    padding: 0 10px;
    font-weight: 500;
    color: var(--secondary-color);
}
.dynamic-field-group {
    display: grid;
    /* পরিবর্তন: কলাম সংখ্যা বাড়ানো হয়েছে */
    grid-template-columns: 1fr 1fr 1fr 1fr auto; 
    gap: 10px;
    align-items: center;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
}
.btn-add-field {
    width: auto !important;
    background-color: #6c757d !important;
    padding: 8px 12px;
    font-size: 14px;
}
.btn-remove-field {
    background: var(--error-color);
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
}
@media(max-width: 768px) {
    .dynamic-field-group {
        grid-template-columns: 1fr;
    }
}

/* ========== TAG INPUT STYLES ========== */
.tag-input-container {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    padding: 5px;
}
.tags-display-area {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex-grow: 1;
}
.tag-chip {
    background-color: var(--primary-color);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.tag-chip .remove-tag {
    margin-left: 8px;
    cursor: pointer;
    font-weight: bold;
}
#account-type-input {
    border: none;
    outline: none;
    padding: 8px;
    flex-grow: 2;
}
.btn-add-tag {
    background: var(--primary-color);
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    flex-shrink: 0;
}

/* ========== ADMIN MANAGEMENT STYLES ========== */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.admin-card {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
    position: relative;
    overflow: hidden;
    border-left: 5px solid var(--primary-color);
}

.admin-card.blocked {
    background-color: #fceeee;
    border-left-color: var(--error-color);
}

.admin-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.admin-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    margin-right: 15px;
}

.admin-info h4 {
    margin: 0;
    color: var(--secondary-color);
}

.admin-info p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.admin-card-body .info-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}
.admin-card-body .info-item:last-child {
    border-bottom: none;
}
.admin-card-body .info-item strong {
    font-weight: 600;
}

.admin-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.admin-card-actions .btn {
    width: auto;
    flex-grow: 1;
    padding: 8px 10px;
    font-size: 12px;
}

.btn-warning {
    background-color: #ffc107;
    color: #212529;
}

/* Permissions Fieldset Styles */
.permissions-fieldset {
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    padding: 15px;
    margin-top: 20px;
}
.permissions-fieldset legend {
    padding: 0 10px;
    font-weight: 600;
    color: var(--secondary-color);
}
.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}
.permission-item {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 6px;
}
.permission-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    accent-color: var(--primary-color);
}
.permission-item label {
    font-size: 14px;
    margin-bottom: 0;
}


/* ========== ADMIN MANAGEMENT & PERMISSIONS STYLES ========== */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 25px;
}

.admin-card {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
    position: relative;
    overflow: hidden;
    border-left: 5px solid var(--primary-color);
    transition: all 0.3s ease;
}
.admin-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.admin-card.blocked {
    background-color: #fff5f5;
    border-left-color: var(--error-color);
}
.admin-card.blocked .admin-avatar {
    background-color: #999;
}

.admin-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.admin-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    margin-right: 15px;
    flex-shrink: 0;
}

.admin-info h4 {
    margin: 0 0 2px 0;
    color: var(--secondary-color);
    font-size: 18px;
}
.admin-info p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.admin-role-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #e9ecef;
    color: #495057;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.admin-role-badge.financial_admin { background-color: #d4edda; color: #155724; }
.admin-role-badge.sub_admin { background-color: #e0f2fe; color: #0a7afe; }

.admin-card-body .info-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.admin-card-body .info-item:last-child {
    border-bottom: none;
}
.admin-card-body .info-item strong {
    font-weight: 600;
    color: #333;
}

.admin-card-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}
.admin-card-actions .btn {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 500;
}

.btn-warning { background-color: #ffc107; color: #212529; }
.btn-warning:hover { background-color: #e0a800; }

/* Permissions Fieldset Styles */
.permissions-fieldset {
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    padding: 20px;
    margin-top: 20px;
}
.permissions-fieldset legend {
    padding: 0 10px;
    font-weight: 600;
    color: var(--secondary-color);
}
.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}
.permission-item {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #eee;
    transition: all 0.2s ease;
}
.permission-item:hover {
    border-color: var(--primary-color);
}
.permission-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 12px;
    accent-color: var(--primary-color);
}
.permission-item label {
    font-size: 14px;
    margin-bottom: 0;
    cursor: pointer;
}

/* Balance Modal Fieldset */
.balance-fieldset {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
}
.balance-fieldset legend {
    padding: 0 10px;
    font-weight: 600;
    color: var(--secondary-color);
}
.balance-fieldset p {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
}
.btn-success { background-color: var(--success-color); }
.btn-danger { background-color: var(--error-color); }

/* Submenu Styles */
.nav-item-group .submenu {
    display: none;
    padding-left: 20px;
}
.nav-item-group.open .submenu {
    display: block;
}
.nav-item-group.open .submenu-arrow {
    transform: rotate(180deg);
}
.has-submenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.submenu-arrow {
    transition: transform 0.3s;
}
.submenu .nav-item {
    padding-left: 38px;
    font-size: 14px;
}
.submenu .nav-item.active {
    background-color: #f0f5ff;
}


/* ========== ADMIN PANEL SUBMENU STYLES ========== */

.nav-item-group .submenu {
    display: none; /* ডিফল্টভাবে সাব-মেন্যু লুকানো থাকবে */
    padding-left: 20px;
    background-color: #f8f9fa;
}

/* যখন প্যারেন্ট এলিমেন্টে 'open' ক্লাস যুক্ত হবে, তখন সাব-মেন্যু দেখা যাবে */
.nav-item-group.open .submenu {
    display: block;
}

/* সাব-মেন্যু আছে এমন আইটেমের জন্য স্টাইল */
.has-submenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.submenu-arrow {
    font-size: 12px;
    transition: transform 0.3s ease-in-out;
}

/* যখন মেন্যু খোলা থাকবে, তখন তীর চিহ্নটি ঘুরে যাবে */
.nav-item-group.open .submenu-arrow {
    transform: rotate(180deg);
}

/* সাব-মেন্যুর ভেতরের আইটেমগুলোর জন্য স্টাইল */
.submenu .nav-item {
    padding-left: 45px; /* আইকন এবং টেক্সট অ্যালাইন করার জন্য */
    font-size: 14px;
}

.submenu .nav-item:hover {
    background-color: #e9ecef;
}

.submenu .nav-item.active {
    background-color: #eaf2ff;
    font-weight: 600;
}

/* ========== ROLES & PERMISSIONS STYLES ========== */
.role-card {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
    border-left: 5px solid #6f42c1; /* A new color for roles */
}

.role-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.role-card-header h4 {
    margin: 0;
    color: #6f42c1;
    font-size: 18px;
}

.role-card-actions .btn {
    width: auto;
    padding: 6px 12px;
    font-size: 12px;
}

.permissions-list {
    font-size: 13px;
    color: #555;
    max-height: 100px;
    overflow-y: auto;
    padding-right: 10px;
}

.permissions-list strong {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    color: #333;
}

.permissions-list span {
    background: #f1f3f5;
    padding: 3px 8px;
    border-radius: 12px;
    margin-right: 5px;
    margin-bottom: 5px;
    display: inline-block;
}

#history-table-title {
    color: var(--secondary-color);
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}


/* ========== PROFESSIONAL COMPACT FINANCIAL WALLET ========== */

/* 1. Wallet Stats Grid */
.financial-grid {
    display: grid;
    /* ডেক্সটপে ৪টি, ট্যাবে ২টি, মোবাইলে ১টি করে কার্ড দেখাবে */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

/* 2. Wallet Card Design */
.fin-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.fin-card:hover {
    transform: translateY(-3px);
    border-color: rgba(10, 122, 254, 0.3);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Color Accents for different wallets */
.fin-card.main { border-left: 4px solid var(--primary-color); }
.fin-card.profit { border-left: 4px solid var(--success-color); }
.fin-card.referral { border-left: 4px solid #ff9800; }
.fin-card.bonus { border-left: 4px solid #9c27b0; }

/* Icon Box */
.fin-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.fin-card.main .fin-icon-box { background: linear-gradient(135deg, var(--primary-color), #0056b3); }
.fin-card.profit .fin-icon-box { background: linear-gradient(135deg, var(--success-color), #1e7e34); }
.fin-card.referral .fin-icon-box { background: linear-gradient(135deg, #ff9800, #f57c00); }
.fin-card.bonus .fin-icon-box { background: linear-gradient(135deg, #9c27b0, #7b1fa2); }

/* Text Content */
.fin-content {
    flex: 1;
    overflow: hidden;
}

.fin-label {
    font-size: 11px;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    white-space: nowrap;
}

.fin-amount {
    font-size: 20px; /* সাইজ ছোট করা হয়েছে (আগে 36px ছিল) */
    font-weight: 700;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3. Action Panel (Manage Funds) */
.fin-action-panel {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
    padding: 20px;
    max-width: 600px; /* ফর্মটি খুব বেশি চওড়া হবে না */
    margin: 0 auto; /* মাঝখানে থাকবে */
}

.fin-action-header {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fin-action-header h4 {
    margin: 0;
    font-size: 16px;
    color: var(--secondary-color);
    font-weight: 600;
}

/* Custom Radio Tabs for Actions (Mint/Burn/Transfer) */
.fin-radio-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    background: #f8f9fa;
    padding: 5px;
    border-radius: 8px;
}

.fin-radio-label {
    flex: 1;
    text-align: center;
    padding: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.fin-radio-input {
    display: none;
}

/* Active State for Radio Tabs */
.fin-radio-input:checked + .fin-radio-label {
    background: #fff;
    color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-weight: 600;
}

/* Form Inputs */
.fin-form-group {
    margin-bottom: 15px;
}

.fin-form-group label {
    display: block;
    font-size: 12px;
    color: #555;
    margin-bottom: 5px;
    font-weight: 500;
}

.fin-form-control {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.fin-form-control:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* Action Button */
.btn-fin-submit {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, var(--primary-color), #0056b3);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-fin-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10, 122, 254, 0.3);
}

/* Responsive */
@media (max-width: 480px) {
    .financial-grid {
        grid-template-columns: 1fr; /* মোবাইলে ১ কলাম */
    }
    .fin-action-panel {
        padding: 15px;
    }
}

/* ========== SUPER ADMIN SEARCH RESULT STYLES ========== */
#send-recipient-results-container {
    margin-top: -10px;
    margin-bottom: 15px;
}

.search-result-card {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: var(--border-radius);
    padding: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
.search-result-card:hover {
    background-color: #e9ecef;
}

.result-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: white;
    font-size: 20px;
    font-weight: 600;
}
.result-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.result-info .name {
    font-weight: 600;
    color: var(--secondary-color);
}
.result-info .email {
    font-size: 14px;
    color: #6c757d;
}


/* ========== ADVANCED SEARCH & SELECTION STYLES ========== */
#selected-recipient-card-container {
    margin-top: -10px;
    margin-bottom: 20px;
}

.search-result-card {
    background-color: #eaf2ff;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 15px;
    display: flex;
    align-items: center;
    animation: fadeIn 0.3s;
}

.result-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: white;
    font-size: 20px;
    font-weight: 600;
}
.result-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.result-info .name {
    font-weight: 600;
    color: var(--secondary-color);
}
.result-info .email {
    font-size: 14px;
    color: #6c757d;
}

/* Multi-result modal styles */
#search-results-list .search-result-item {
    padding: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}
#search-results-list .search-result-item:last-child {
    border-bottom: none;
}
#search-results-list .search-result-item:hover {
    background-color: #f8f9fa;
}

/* ========== Super Admin Search & Send Styles ========== */

.search-input-group {
    position: relative;
}

.search-input-group .form-control {
    padding-right: 45px;
}

#execute-search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: none;
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#execute-search-btn:hover {
    background-color: #0868d7;
}

#selected-recipient-card-container .search-result-card.selected {
    border-color: var(--success-color);
    background-color: #e8f5e9;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.3);
}

#multi-search-result-modal .modal-content.custom-size {
    max-width: 580px; /* Same as wallet modal */
    height: 80vh; /* 80% of viewport height */
    max-height: 600px;
}

.popup-inner-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    margin: 20px 0;
    text-align: left;
}

.popup-detail-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.popup-detail-item:last-child {
    border-bottom: none;
}

.popup-detail-item span {
    color: #555;
}

.popup-detail-item strong {
    color: var(--secondary-color);
    font-weight: 600;
}

.popup-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 10px 0;
}

/* ========== AGENT & SUPER ADMIN DASHBOARD STYLES ========== */

/* Make Super Admin dashboard grid 2 columns */
#dashboard-overview .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.stat-card.system-total-card {
    grid-column: 1 / -1; /* Make this card span full width */
    background: linear-gradient(135deg, #434343, #000000);
    color: white;
}
.system-total-card .stat-icon {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.system-total-card .stat-title {
    color: #ccc;
}
.system-total-card h2 {
    color: #fff;
    font-size: 28px;
}

.agent-actions {
    margin-top: 25px;
    display: flex;
    gap: 15px;
}
.agent-actions .btn {
    width: auto;
    padding: 12px 20px;
}

/* ========== ADMIN TRANSACTION DETAILS MODAL ========== */
#admin-transaction-details-modal .modal-content {
    padding: 0;
    overflow: hidden;
}

.details-popup-header-new {
    padding: 25px;
    text-align: center;
    position: relative;
    background: #f8f9fa;
}
.details-popup-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e9ecef;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
}
.details-icon-wrapper {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}
.icon-deposit { background: var(--success-color); }
.icon-withdraw { background: var(--error-color); }
.icon-transfer, .icon-sent, .icon-received { background: var(--primary-color); }
/* Add other icon colors as needed */

.details-popup-header-new h2 {
    font-size: 28px;
    margin: 0;
}
.transaction-amount-positive { color: var(--success-color); }
.transaction-amount-negative { color: var(--error-color); }

.details-type {
    text-transform: capitalize;
    color: #555;
    font-weight: 500;
}
.details-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
    text-transform: capitalize;
}
.details-status.completed, .details-status.approved { background-color: #d4edda; color: #155724; }
.details-status.pending { background-color: #fff3cd; color: #856404; }
.details-status.rejected { background-color: #f8d7da; color: #721c24; }

.details-body-new, .details-footer-new {
    padding: 20px;
}
.details-list-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
.details-list-item:last-child {
    border-bottom: none;
}
.details-list-item .label {
    color: #666;
}
.details-list-item .value {
    font-weight: 600;
    color: #333;
    word-break: break-all;
}
.details-footer-new {
    background: #f8f9fa;
    border-top: 1px solid #eee;
}

/* Compact System Total Balance */
.system-total-compact {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    padding: 0 20px;
}

.system-total-compact-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 20px 25px;
    color: white;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    max-width: 400px;
    width: 100%;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.system-total-compact-card::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.system-total-compact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.35);
}

.compact-icon {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.compact-content {
    flex: 1;
}

.compact-label {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-bottom: 4px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.compact-amount {
    font-size: 1.6rem;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.compact-indicator {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
}

/* Updated Stats Grid - Keep the same professional design */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    padding: 0 20px;
}

.stat-card {
    background: white;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 20px;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.premium-icon {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.stat-info {
    flex: 1;
}

.stat-title {
    font-size: 0.95rem;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.stat-card h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
    color: #2c3e50;
}

.stat-trend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: #6c757d;
}

/* Responsive Design */
@media (max-width: 768px) {
    .system-total-compact-card {
        padding: 18px 20px;
        gap: 12px;
        max-width: 350px;
    }
    
    .compact-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    
    .compact-amount {
        font-size: 1.4rem;
    }
    
    .compact-label {
        font-size: 0.8rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .stat-card {
        padding: 20px;
    }
    
    .premium-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .stat-card h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .system-total-compact {
        padding: 0 15px;
    }
    
    .system-total-compact-card {
        max-width: 100%;
    }
}


/* ========== USER MANAGEMENT STYLES ========== */

.user-search-wrapper {
    position: relative;
    display: flex;
    max-width: 500px;
    margin-bottom: 20px;
}

.user-search-wrapper .form-control {
    padding-right: 45px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.user-search-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0 20px;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    cursor: pointer;
    font-size: 16px;
}

/* User Table Styles */
.data-table .user-uid {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    background: #e9ecef;
    padding: 3px 6px;
    border-radius: 4px;
    color: #495057;
}

.user-table-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #eee;
}

.user-table-avatar-fallback {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
}

/* Blocked User Row */
.data-table tbody tr.blocked-user {
    background-color: #fff5f5;
    opacity: 0.8;
}

.data-table tbody tr.blocked-user td {
    color: #721c24;
}

/* KYC Status Badges in Table */
.data-table .status-badge {
    display: inline-block;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 15px;
    text-transform: capitalize;
    text-align: center;
    min-width: 80px;
}

.data-table .status-badge.verified { 
    background-color: #d4edda; 
    color: #155724; 
}
.data-table .status-badge.rejected { 
    background-color: #f8d7da; 
    color: #721c24; 
}
.data-table .status-badge.pending { 
    background-color: #fff3cd; 
    color: #856404; 
}
.data-table .status-badge.unverified { 
    background-color: #e2e3e5; 
    color: #383d41; 
}

/* Action Buttons in Table */
.data-table .action-btn {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    margin-right: 5px;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-btn.btn-primary { background-color: var(--primary-color); }
.action-btn.btn-danger { background-color: var(--error-color); }

/* Mobile Responsive Table */
@media (max-width: 768px) {
    .data-table th, .data-table td {
        font-size: 13px;
        padding: 10px 8px;
    }
    
    .data-table .action-btn {
        padding: 5px 8px;
        font-size: 12px;
        display: block; /* Stack buttons on mobile */
        margin-bottom: 5px;
        width: 100%;
        text-align: center;
    }
    
    .user-search-wrapper {
        max-width: 100%;
    }
}


/* ========== Professional Dashboard Redesign ========== */
#dashboard-overview .stats-grid {
    grid-template-columns: 1fr 1fr; /* প্রতি লাইনে দুটি কার্ড দেখানোর জন্য */
    gap: 25px;
}

#dashboard-overview .stat-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

#dashboard-overview .stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

#dashboard-overview .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    flex-shrink: 0;
}

#dashboard-overview .stat-info h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    color: #2c3e50;
}

#dashboard-overview .stat-info .stat-title {
    font-size: 15px;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

@media (max-width: 992px) {
    #dashboard-overview .stats-grid {
        grid-template-columns: 1fr;
    }
}


#admin-role-display {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    background-color: #e9ecef;
    color: #495057;
    text-transform: uppercase;
}


/* ========== NEW HISTORY LIST DESIGN ========== */
.transaction-date-header {
    padding: 15px 20px 5px 20px;
    font-weight: 600;
    color: #6c757d;
    font-size: 14px;
    background-color: #f0f2f5;
}

.history-item-new {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.history-item-new:hover {
    background-color: #f8f9fa;
}

.history-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    margin-right: 15px;
    flex-shrink: 0;
}

.history-item-details {
    flex-grow: 1;
}

.history-item-details .title {
    font-weight: 600;
    color: #333;
    font-size: 15px;
}

.history-item-details .timestamp {
    font-size: 13px;
    color: #777;
}

.history-item-amount {
    font-weight: 600;
    font-size: 15px;
}

.transaction-amount-positive { color: var(--success-color); }
.transaction-amount-negative { color: var(--error-color); }

/* Icon Colors */
.icon-deposit, .icon-received, .icon-admin_credit, .icon-admin_transfer_in { background-color: var(--success-color); }
.icon-withdraw, .icon-sent, .icon-admin_debit, .icon-admin_transfer_out { background-color: var(--error-color); }
.icon-products, .icon-buy_product, .icon-product_sale { background-color: #ff9800; }
.icon-savings, .icon-savings_activation, .icon-savings_profit { background-color: #2196f3; }
.icon-loan, .icon-loan_application, .icon-loan_payment, .icon-loan_approved { background-color: #9c27b0; }
.icon-gift_cards, .icon-gift_card_create, .icon-gift_card_redeem { background-color: #e91e63; }
.icon-exchange { background-color: #795548; }
.icon-default { background-color: #607d8b; }

/* ========== HISTORY SEARCH STYLES ========== */
.search-input-group {
    position: relative;
    display: flex;
}
.search-input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.search-input-group .search-btn {
    border: 1px solid #ddd;
    border-left: none;
    background: #f8f9fa;
    padding: 0 15px;
    cursor: pointer;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.history-profile-card {
    background: #fff;
    padding: 15px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    align-items: center;
    gap: 15px;
    border-left: 5px solid var(--primary-color);
}
.history-profile-card.admin-card {
    border-left-color: #6f42c1;
}

.history-search-result-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.history-search-result-item:hover {
    background-color: #f0f2f5;
}

/* ========== MY HISTORY BUTTON STYLE ========== */
.btn-my-history {
    width: auto;
    padding: 10px 25px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--secondary-color), #1a3a7a);
    box-shadow: 0 4px 15px rgba(12, 32, 77, 0.3);
    border: none;
    transition: all 0.3s ease;
}

.btn-my-history:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(12, 32, 77, 0.4);
}


/* ========== AGENT DASHBOARD HISTORY ITEM STYLE ========== */
.agent-history-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.agent-history-item {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.agent-history-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.agent-history-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
}

.agent-history-item-header .history-item-icon {
    width: 35px;
    height: 35px;
    font-size: 14px;
}

.agent-history-item-header .title {
    font-size: 16px;
    font-weight: 600;
}

.agent-history-item-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    font-size: 14px;
}

.history-detail-block .label {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
    display: block;
    text-transform: uppercase;
}

.history-detail-block .value {
    font-weight: 600;
    color: #333;
}


/* ========== USER MANAGEMENT SEARCH ICON STYLE ========== */
.user-search-wrapper {
    position: relative;
}

.user-search-wrapper .form-control {
    padding-right: 45px; /* Make space for the icon */
}

.user-search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-color);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 15px;
}


/* ========== NEW PROFESSIONAL HISTORY LIST DESIGN ========== */
.transaction-date-header {
    padding: 15px 20px 5px 20px;
    font-weight: 600;
    color: #8a96a3; /* Lighter color for dark mode */
    font-size: 14px;
    background-color: #1e1e1e; /* Dark background */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.history-item-new {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: #2a2a2a; /* Dark item background */
    border-bottom: 1px solid #3a3a3a; /* Dark border */
    cursor: pointer;
    transition: background-color 0.2s;
}

.history-item-new:hover {
    background-color: #333333;
}

.history-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    margin-right: 15px;
    flex-shrink: 0;
}

.history-item-details {
    flex-grow: 1;
    overflow: hidden; /* Prevents long text from breaking layout */
}

.history-item-details .title {
    font-weight: 500;
    color: #f0f0f0; /* Light text color */
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item-details .timestamp {
    font-size: 13px;
    color: #999;
}

.history-item-amount {
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    margin-left: 10px;
}

.transaction-amount-positive { color: #28a745; } /* Green for positive */
.transaction-amount-negative { color: #dc3545; } /* Red for negative */

/* Icon Colors */
.icon-deposit, .icon-received, .icon-admin_credit { background-color: #28a745; }
.icon-withdraw, .icon-sent, .icon-admin_debit { background-color: #dc3545; }
.icon-default { background-color: #607d8b; }


/* ========== NEW DETAILED HISTORY ITEM STYLES ========== */
.history-item-new.detailed {
    align-items: flex-start;
    padding: 12px 15px;
}

.history-item-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.history-item-title-row, .history-item-user-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-item-action {
    font-weight: 600;
    color: #f0f0f0;
    font-size: 16px;
    text-transform: capitalize;
}

.history-item-username {
    font-size: 14px;
    color: #b0b0b0;
}

.history-item-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    color: #fff;
}

.history-item-status.success {
    background-color: rgba(40, 167, 69, 0.7);
}

.history-item-status.error {
    background-color: rgba(220, 53, 69, 0.7);
}


/* ADD THIS NEW BLOCK for the light theme history list */
/* ========== PROFESSIONAL ADMIN HISTORY LIST STYLES (LIGHT THEME) ========== */

.transaction-date-header {
    padding: 10px 15px;
    font-weight: 600;
    color: #6c757d;
    font-size: 14px;
    background-color: #f8f9fa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e9ecef;
}

.history-item-pro {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background-color: #ffffff;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.history-item-pro:hover {
    background-color: #f8f9fa;
}

.history-item-icon-pro {
    flex-shrink: 0;
    margin-right: 12px;
}

.history-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.history-item-avatar-fallback {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
}

.history-item-content-pro {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.history-item-user-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    overflow: hidden;
}

.user-name-pro {
    font-weight: 600;
    color: #343a40;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email-pro {
    font-size: 12px;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item-trans-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.amount-pro {
    font-weight: 700;
    font-size: 15px;
}

.status-pro {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    margin-top: 4px;
    min-width: 75px;
    text-align: center;
}

/* Status Colors for light theme */
.status-pro.approved, .status-pro.success {
    background-color: #d4edda;
    color: #155724;
}
.status-pro.rejected {
    background-color: #fff3cd;
    color: #856404;
}
.status-pro.deleted, .status-pro.error {
    background-color: #f8d7da;
    color: #721c24;
}


/* ========== TRANSACTION DETAILS MODAL (SMOOTH SCROLL FIX) ========== */

/* ১. মূল কন্টেইনারকে Flexbox কলাম বানানো হয়েছে */
#admin-transaction-details-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* পুরো পপ-আপের জন্য সর্বোচ্চ উচ্চতা */
    overflow: hidden; /* ভেতরের কন্টেন্ট বাইরে যেতে বাধা দেয় */
}

/* ২. হেডারকে নির্দিষ্ট উচ্চতায় রাখা হয়েছে, এটি স্ক্রল হবে না */
#admin-transaction-details-header {
    flex-shrink: 0;
}

/* ৩. শুধুমাত্র এই একটি কন্টেইনারেই এখন স্ক্রল হবে */
#admin-transaction-details-modal .modal-body {
    overflow-y: auto;  /* শুধুমাত্র এখানে ভার্টিকাল স্ক্রল চালু থাকবে */
    padding: 20px;
    flex-grow: 1;      /* হেডার বাদে বাকি সবটুকু জায়গা এটি নিয়ে নেবে */
    
    /* বোনাস: স্মুথ স্ক্রলিং এর জন্য */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* ৪. ভেতরের কন্টেইনার থেকে স্ক্রলিং এর সব প্রোপার্টি সরিয়ে দেওয়া হয়েছে */
.details-body-new {
    padding: 0;          /* প্যাডিং এখন প্যারেন্ট .modal-body তে দেওয়া আছে */
    overflow-y: visible; /* এখান থেকে স্ক্রল পুরোপুরি বন্ধ করা হলো */
    max-height: none;    /* উচ্চতার সীমাবদ্ধতা তুলে দেওয়া হলো */
}


/* ADD this CSS to the end of your style.css file */

.action-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Adds a small space between buttons */
}

/* Make all action buttons consistent */
.data-table .action-btn {
    margin-bottom: 0;
    display: inline-flex; /* Changed from block to inline-flex */
    align-items: center;
    justify-content: center;
    flex-grow: 1; /* Allows buttons to share space */
}

/* Style for the new 'Profile' button */
.action-btn.btn-profile {
    background-color: #6c757d; /* Slate gray color */
    color: white;
}
.action-btn.btn-profile:hover {
    background-color: #5a6268;
}

/* Style for the existing 'Delete' button to make it consistent */
.action-btn.btn-danger {
    background-color: #dc3545;
    color: white;
}
.action-btn.btn-danger:hover {
    background-color: #c82333;
}


/* ADD THIS CSS for the small button spinner */
.spinner-small {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-right: 5px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Style for disabled buttons in a row */
.action-buttons-container .action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* ADD THIS CSS to the end of your style.css file for the final modal fix */

/* This makes the modal content a flex column */
#admin-transaction-details-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Set a max height for the whole modal */
}

/* This makes the modal body scrollable if content overflows */
#admin-transaction-details-modal .modal-body {
    overflow-y: auto;
    padding: 20px;
    flex-grow: 1; /* Allows the body to take up available space */
}

/* Ensure the header does not scroll */
#admin-transaction-details-header {
    flex-shrink: 0;
}

/* Remove padding from the inner container as it's now on the parent */
.details-body-new {
    padding: 0;
}


/* Add this class for neutral (yellow) amounts */
.transaction-amount-neutral { 
    color: var(--pending-color); /* This uses the existing yellow color from your theme */
}

/* Minor update to ensure status colors are consistent */
.status-pro.rejected, .status-pro.deleted {
    background-color: #f8d7da;
    color: #721c24;
}
.status-pro.pending {
    background-color: #fff3cd;
    color: #856404;
}


/* ADD these styles to your style.css file */

/* Add a new color class for Commission icons */
.icon-commission { 
    background-color: var(--primary-color); /* Blue color for commissions */
}

/* Style for the icon in the history list to make it circular */
.history-item-icon-pro .history-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}


/* ========== PROFESSIONAL AGENT ACTIVITY LIST ========== */

.agent-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px; /* A little space between cards */
}

.pro-activity-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid #f0f0f0;
}

.pro-activity-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-color);
}

.activity-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

.activity-details {
    flex-grow: 1;
    overflow: hidden; /* Prevents long text from breaking layout */
}

.activity-title {
    font-weight: 600;
    color: var(--secondary-color);
    font-size: 16px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.activity-user {
    font-size: 14px;
    color: #6c757d;
}

.activity-info {
    text-align: right;
    flex-shrink: 0;
    margin-left: 10px;
}

.activity-amount {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 2px;
}

.activity-date {
    font-size: 12px;
    color: #888;
}


/* ========== REQUESTS PAGE BUTTONS UPDATE ========== */

/* Style for the new 'Details' button */
.action-btn.btn-details {
    background-color: #6c757d; /* A neutral grey color */
    color: white;
}
.action-btn.btn-details:hover {
    background-color: #5a6268;
}

/* This container ensures all three buttons are aligned in a row with gaps */
.action-buttons-container {
    display: flex;
    flex-wrap: nowrap; /* Tries to keep buttons in one line */
    gap: 5px; /* Adds a small space between buttons */
    justify-content: flex-start;
}

.action-buttons-container .action-btn {
    padding: 6px 10px;
    font-size: 13px;
    flex-grow: 1; /* Allows buttons to share space evenly */
}

/* Responsive adjustment for very small screens */
@media (max-width: 480px) {
    .action-buttons-container {
        flex-direction: column; /* Stacks buttons vertically on small screens */
    }
}


/* ADD this CSS block to the end of your style.css file */

/* --- Status Badge Color Update for 'Rejected' --- */

/* This styles the badge in the new professional history list */
.status-pro.rejected {
    background-color: #fff3cd; /* Yellow background from 'pending' */
    color: #856404;       /* Dark yellow text from 'pending' */
}

/* This styles the badge in the details popup header */
.details-status.rejected { 
    background-color: #fff3cd; 
    color: #856404; 
}

/* This styles the badge in general tables like KYC management */
.status-badge.rejected { 
    background-color: #fff3cd; 
    color: #856404; 
}


/* style.css ফাইলের শেষে যোগ করুন */

.user-assets-container {
    margin-top: 25px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.assets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.assets-header h4 {
    margin: 0;
    color: var(--primary-color);
}
.asset-display-area {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    padding: 5px;
    background-color: #f8f9fa;
    border-radius: var(--border-radius);
    border: 1px solid #eee;
}
.asset-display-area .data-table {
    margin-bottom: 0;
}
.asset-display-area .data-table th,
.asset-display-area .data-table td {
    font-size: 13px;
}
.asset-display-area .data-table .btn {
    padding: 4px 8px;
    font-size: 12px;
    margin-right: 5px;
}
.asset-display-area p {
    text-align: center;
    padding: 20px;
    color: #6c757d;
}


/* আপনার style.css ফাইলের শেষে এই কোডটুকু যোগ করুন */

.transaction-details-popup-header {
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.transaction-amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.transaction-user-info {
    line-height: 1.4;
}

.transaction-user-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--secondary-color);
}

.transaction-user-email {
    font-size: 14px;
    color: #6c757d;
}

#user-summary-content .details-list-item .value code {
    background-color: #e9ecef;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 13px;
    color: #333;
}

.dark-mode #user-summary-content .details-list-item .value code {
    background-color: #3a3f47;
    color: #e0e0e0;
}

.dark-mode .transaction-details-popup-header {
    border-bottom-color: var(--border-color);
}


/* আপনার style.css ফাইলের শেষে এই কোডটুকু যোগ করুন */

#user-summary-modal .details-popup-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #f0f2f5;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    z-index: 10;
}

#user-summary-modal .details-popup-close-btn:hover {
    background-color: #e9ecef;
}

.dark-mode #user-summary-modal .details-popup-close-btn {
    background-color: #3a3f47;
    color: #e0e0e0;
}

.dark-mode .details-popup-header-new {
    border-bottom-color: var(--border-color) !important;
}

#user-summary-modal .modal-content {
    width: 90vw;
    max-width: 550px;
    height: auto;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    padding: 0;
}

#user-summary-modal .modal-body {
    overflow-y: auto;
    padding: 20px;
}

#user-summary-content {
    max-height: 75vh; /* কন্টেন্টের জন্য সর্বোচ্চ উচ্চতা */
    overflow-y: auto; /* যখন কন্টেন্ট বেশি হবে, তখন স্ক্রলবার আসবে */
    -webkit-overflow-scrolling: touch; /* মোবাইলে স্মুথ, মোমেন্টাম-ভিত্তিক স্ক্রলিং চালু করে */
    scroll-behavior: smooth; /* ডেস্কটপের জন্য স্মুথ স্ক্রলিং */
}


/* ড্যাশবোর্ডের Recent Activity তে নতুন তথ্যের জন্য স্টাইল */
.activity-extra-detail {
    font-size: 12px;
    color: #555;
    margin-top: 3px;
    font-family: monospace;
}

.dark-mode .activity-extra-detail {
    color: #ccc;
}


/* আপনার style.css ফাইলের শেষে এই কোডটুকু যোগ করুন */

.wallet-exchange-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 25px;
}

.wallet-column {
    flex: 1;
    background: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
    border: 1px solid #eee;
}

.exchange-arrow {
    font-size: 24px;
    color: var(--primary-color);
}

.wallet-display-card {
    background: #fff;
    border-radius: var(--border-radius);
    padding: 15px;
    text-align: center;
    margin-top: 15px;
    border: 1px solid #ddd;
}

.wallet-card-title {
    font-size: 14px;
    color: #6c757d;
    display: block;
    margin-bottom: 5px;
}

.wallet-display-card h2 {
    margin: 0;
    font-size: 28px;
    color: var(--secondary-color);
}

@media (max-width: 768px) {
    .wallet-exchange-container {
        flex-direction: column;
    }
    .wallet-column {
        width: 100%;
    }
    .exchange-arrow {
        transform: rotate(90deg);
        margin: 15px 0;
    }
}


/* style.css ফাইলের শেষে এই কোডটুকু যোগ করুন */

.financial-ledger-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.financial-ledger-item:hover {
    background-color: #f8f9fa;
}

.ledger-item-main {
    flex-grow: 1;
    margin-right: 15px;
}

.ledger-title {
    font-weight: 600;
    color: #333;
    font-size: 15px;
    margin-bottom: 3px;
}

.ledger-user {
    font-size: 13px;
    color: #777;
}

.ledger-item-details {
    text-align: right;
    flex-shrink: 0;
}

.ledger-amount {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 3px;
}

.ledger-wallet-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    background-color: #e9ecef;
    color: #495057;
    display: inline-block;
}


/* ADD THIS CSS to the end of your style.css file for the final modal fix */

/* This makes the modal content a flex column */
#admin-transaction-details-modal .modal-content,
#user-summary-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Set a max height for the whole modal */
    overflow: hidden; /* Prevent content from spilling */
}

/* This makes the modal body scrollable if content overflows */
#admin-transaction-details-modal .modal-body,
#user-summary-modal .modal-body {
    overflow-y: auto;
    flex-grow: 1; /* Allows the body to take up available space */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
}

/* Ensure the header does not scroll */
#admin-transaction-details-header,
#user-summary-modal .modal-header {
    flex-shrink: 0;
}

/* Remove padding from the inner container as it's now on the parent */
.details-body-new, #user-summary-content {
    padding: 0;
    overflow-y: visible; /* Disable inner scroll */
    max-height: none;
}


/* ========== AGENT GROUP STYLES FOR PAYMENT METHODS ========== */

.agent-method-group {
    background: #fff;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    box-shadow: var(--box-shadow);
    border: 1px solid #e9ecef;
    overflow: hidden;
}

.agent-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #f8f9fa;
    transition: background-color 0.2s ease;
}

.agent-header:hover {
    background: #f1f3f5;
}

.agent-info-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.agent-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
}

.agent-name-email .name {
    font-weight: 600;
    color: var(--secondary-color);
}

.agent-name-email .email {
    font-size: 13px;
    color: #6c757d;
}

.expand-icon-agent {
    font-size: 14px;
    transition: transform 0.3s ease-in-out;
}

.agent-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

/* JavaScript দিয়ে যখন 'open' ক্লাস যোগ করা হবে */
.agent-method-group.open .agent-content {
    max-height: 2000px; /* একটি বড় মান */
}

.agent-method-group.open .expand-icon-agent {
    transform: rotate(180deg);
}

.agent-limits-summary {
    padding: 15px 20px;
    background-color: #eaf2ff;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.limit-card {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #d4e3ff;
}

.limit-card .label {
    font-size: 12px;
    color: #555;
    font-weight: 500;
}

.limit-card .value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
}

.agent-cards-container {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}


/* ========== PAYMENT METHODS AGENT LIMITS UI UPDATE ========== */

.limit-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.limit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.limit-card .label {
    font-size: 12px;
    color: #555;
    font-weight: 500;
}

.limit-card .value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
}

.limit-progress-bar-container {
    background-color: #e9ecef;
    border-radius: 5px;
    height: 8px;
    width: 100%;
    overflow: hidden;
    margin-top: 5px;
}

.limit-progress-bar {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}

.limit-progress-bar.deposit {
    background-color: var(--success-color);
}

.limit-progress-bar.withdraw {
    background-color: var(--error-color);
}

/* লাইভ টাইমারের জন্য স্টাইল */
.live-timer-value {
    font-size: 18px;
    font-weight: 700;
    color: #dc3545; /* Red color to indicate time is running */
}


/* ========== PRODUCT MANAGEMENT STYLES ========== */

/* পুরনো .products-grid কোড ডিলিট করে এটি যোগ করুন */
.products-grid {
    display: grid;
    /* মোবাইল স্ক্রিনের জন্য ডিফল্টভাবে ১ কলাম */
    grid-template-columns: 1fr;
    gap: 25px; /* কার্ডগুলোর মধ্যে সুন্দর ব্যবধান */
}

/* ট্যাবলেট এবং ছোট ডেস্কটপের জন্য ২ কলাম */
@media (min-width: 600px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* মাঝারি ডেস্কটপের জন্য ৩ কলাম */
@media (min-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* বড় ডেস্কটপের জন্য ৪ কলাম */
@media (min-width: 1400px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* পুরনো product-card এবং product-card-image কোড ডিলিট করে এটি যোগ করুন */
.product-card {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #eee;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* হোভার ইফেক্টের জন্য ট্রানজিশন */
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* ছবির অনুপাত ঠিক রাখার জন্য নতুন কন্টেইনার */
.product-image-container {
    width: 100%;
    aspect-ratio: 4 / 3; /* ৪:৩ অনুপাতে ছবির উচ্চতা ও প্রস্থ ঠিক রাখা হবে */
    overflow: hidden;
    background-color: #f8f9fa; /* ছবি লোড না হলে বা ছোট হলে একটি হালকা ব্যাকগ্রাউন্ড দেখা যাবে */
}

.product-card-image {
    width: 100%;
    height: 100%; /* কন্টেইনারের পুরো জায়গা জুড়ে থাকবে */
    object-fit: cover; /* ছবির অনুপাত নষ্ট না করে পুরো জায়গা ভরাট করবে */
    transition: transform 0.4s ease; /* হোভারের সময় জুম ইফেক্টের জন্য */
}

.product-card:hover .product-card-image {
    transform: scale(1.05); /* হোভার করলে ছবিটি সামান্য জুম হবে */
}

.product-card-body {
    padding: 15px;
    flex-grow: 1;
}

.product-card-body h4 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: var(--secondary-color);
}

.product-card-body .price {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.product-card-body .category {
    font-size: 12px;
    background: #e9ecef;
    color: #495057;
    padding: 3px 8px;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 10px;
}

.product-card-body .description {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    height: 60px; /* Limit description height */
    overflow: hidden;
}

.product-card-actions {
    padding: 15px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 8px;
}

.product-card-actions .btn {
    width: auto;
    flex-grow: 1;
    padding: 8px 10px;
    font-size: 12px;
}

.product-card .status-badge-absolute {
    top: 10px;
    right: 10px;
    font-size: 11px;
}


/* =========================================
   ★★★ MODERN SAVINGS PLAN STYLES ★★★
   ========================================= */

/* 1. Top Action Bar */
.section-header-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.btn-action-modern {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn-action-modern.add {
    background: #2563eb; /* Blue */
    color: white;
}

.btn-action-modern.distribute {
    background: #059669; /* Emerald Green */
    color: white;
}

.btn-action-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 2. Grid Layout */
.savings-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* 3. Professional Plan Card */
.plan-card-pro {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.plan-card-pro:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

/* Status Badge */
.plan-status-dot {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.plan-status-dot.active { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.plan-status-dot.inactive { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }

/* Card Header */
.plan-card-header {
    padding: 20px 20px 10px;
}

.plan-card-header h4 {
    margin: 0;
    font-size: 18px;
    color: #1e293b;
    font-weight: 700;
}

.plan-card-header small {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 13px;
}

/* Card Body (Grid Info) */
.plan-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 15px 20px;
    background: #f8fafc;
    margin: 10px 20px;
    border-radius: 10px;
}

.info-point {
    display: flex;
    flex-direction: column;
}

.info-point label {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2px;
}

.info-point span {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.highlight-green { color: #059669 !important; }

/* Description */
.plan-desc {
    padding: 0 20px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

/* 4. Action Buttons (Footer) */
.plan-card-footer {
    padding: 15px 20px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    gap: 10px;
    background: #fff;
}

.btn-card-action {
    flex: 1;
    padding: 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.btn-edit {
    background: #eff6ff;
    color: #2563eb;
    border-color: #dbeafe;
}
.btn-edit:hover { background: #dbeafe; }

.btn-toggle {
    background: #fff;
    border-color: #e2e8f0;
    color: #475569;
}
.btn-toggle:hover { background: #f8fafc; border-color: #cbd5e1; }

.btn-delete-icon {
    width: 36px;
    flex: none;
    color: #ef4444;
    background: #fef2f2;
    border-color: #fee2e2;
}
.btn-delete-icon:hover { background: #fee2e2; }


/* ========== LOTTERY MANAGEMENT STYLES ========== */

.lottery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.lottery-card {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    border-left: 5px solid #e91e63;
}

.lottery-card-body {
    padding: 20px;
    flex-grow: 1;
}

.lottery-card-body h4 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: var(--secondary-color);
}

.lottery-card-progress {
    margin-bottom: 15px;
}
.lottery-card-progress .progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 5px;
    color: #555;
}

.lottery-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.lottery-detail-item {
    text-align: center;
}
.lottery-detail-item .label { font-size: 12px; color: #666; }
.lottery-detail-item .value { font-size: 16px; font-weight: 700; color: var(--secondary-color); }

.lottery-card-actions {
    padding: 15px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 8px;
    background: #f8f9fa;
}

/* Prize fields in modal */
.prize-field-group {
    display: grid;
    grid-template-columns: 60px 1fr 1fr auto;
    gap: 10px;
    align-items: center;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
}

/* Lottery Details Modal */
.lottery-details-body {
    padding: 0;
}
#lottery-details-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    height: 100%;
}
.lottery-tickets-panel {
    border-right: 1px solid #eee;
    padding: 20px;
    overflow-y: auto;
}
.lottery-draw-panel {
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.ticket-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;
}
.draw-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f0f2f5;
    border-radius: var(--border-radius);
    min-height: 200px;
}
.winner-list-container {
    margin-top: 20px;
    overflow-y: auto;
}
.winner-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.winner-position {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
}
.winner-prize-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
}

/* Spinner Animation */
.draw-spinner {
    height: 150px;
    width: 150px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    border: 3px solid #ddd;
}
.spinner-list {
    animation: spin 3s ease-in-out;
}
.spinner-item {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
@keyframes spin {
    0% { transform: translateY(0); }
    100% { transform: translateY(-1000px); }
}


/* ========== ADVANCED LOTTERY MANAGEMENT STYLES ========== */

/* Details Modal Layout */
.lottery-details-body {
    padding: 0;
    overflow: hidden; /* Prevent body scroll */
}

#lottery-details-content {
    display: grid;
    grid-template-columns: 320px 1fr; /* Left panel for tickets, right for draw */
    height: calc(90vh - 61px); /* Full height minus header */
}

.lottery-tickets-panel {
    border-right: 1px solid #eee;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#lottery-tickets-title {
    margin: 0 0 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: -15px;
    background: #fff;
    z-index: 1;
}

.ticket-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 5px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
.ticket-list-item:last-child {
    border-bottom: none;
}
.ticket-list-item .user-name { font-weight: 600; }
.ticket-list-item .ticket-id { font-family: monospace; font-size: 12px; color: #555; }

.lottery-draw-panel {
    padding: 20px;
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
}

.draw-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.winner-list-container {
    margin-top: 20px;
    overflow-y: auto;
    flex-grow: 1;
    max-height: 40%;
}

.winner-item {
    display: grid;
    grid-template-columns: 40px auto 1fr auto;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.winner-position { font-size: 24px; font-weight: 700; color: var(--primary-color); }
.winner-prize-image { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; }
.winner-details .name { font-weight: 600; font-size: 15px; }
.winner-details .prize { font-size: 13px; color: #555; }

/* Spinner Animation for Draw */
.draw-spinner-container {
    height: 180px;
    width: 250px;
    overflow: hidden;
    position: relative;
    border: 2px solid #ddd;
    border-radius: 10px;
    background: #fff;
}
.spinner-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Animation will be applied via JS */
}
.spinner-item {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    padding: 0 10px;
    border-bottom: 1px dashed #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 100%);
    z-index: 2;
}
.spinner-selector {
    position: absolute;
    top: 60px; /* Aligns with the middle item */
    left: 0;
    width: 100%;
    height: 60px;
    border-top: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    z-index: 3;
    box-sizing: border-box;
}


/* =========================================
   ★★★ MODERN NOTIFICATION SECTION STYLES ★★★
   ========================================= */

/* 1. Create Button (Compact & Professional) */
#show-create-notification-btn {
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%); /* গাঢ় কালার */
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px; /* পিল শেপ */
    font-size: 14px;
    font-weight: 600;
    border: none;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto !important; /* ফিক্সড উইথ রিমুভ */
    margin-bottom: 25px;
    cursor: pointer;
}

#show-create-notification-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(15, 23, 42, 0.3);
}

#show-create-notification-btn i {
    font-size: 12px;
}

/* 2. Notification List Container */
#sent-notifications-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 3. Notification Card Item */
.sent-notification-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #f1f5f9;
    border-left: 4px solid #3b82f6; /* বাম পাশে নীল বর্ডার */
    transition: all 0.2s ease;
    position: relative;
}

.sent-notification-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

/* 4. Card Header (Title & Delete Icon) */
.notif-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.notif-card-title h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.notif-card-meta {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
    display: block;
}

/* 5. Delete Icon (Minimalist) */
.btn-delete-minimal {
    background: transparent;
    border: none;
    color: #cbd5e1; /* ডিফল্ট হালকা রং */
    font-size: 16px;
    padding: 5px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-delete-minimal:hover {
    color: #ef4444; /* হোভার করলে লাল */
    background: #fef2f2;
}

/* 6. Card Body (Message & Image) */
.notif-card-body {
    background: #f8fafc;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.notif-card-body p {
    margin: 0;
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
}

.notif-card-image {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: 6px;
    margin-top: 10px;
    border: 1px solid #e2e8f0;
}

/* 7. Footer (Target Audience) */
.notif-card-footer {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-audience {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.badge-audience.all { background: #dcfce7; color: #166534; }
.badge-audience.specific { background: #fef9c3; color: #854d0e; }

/* ========== GLOBAL LOADER STYLES ========== */

.global-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: none; /* Initially hidden */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 5000; /* Highest z-index */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.global-loader-overlay.show {
    display: flex;
    opacity: 1;
}

.global-loader-spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--primary-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

.global-loader-text {
    color: white;
    margin-top: 20px;
    font-weight: 500;
    font-size: 16px;
}

/* Re-using the spin animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ========== NEW PROFESSIONAL ADMIN LOTTERY STYLES ========== */

/* New Lottery Card on Main Page */
.lottery-card-admin {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}
.lottery-card-admin:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.lottery-card-admin-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}
.lottery-card-admin-header h4 {
    margin: 0;
    font-size: 16px;
    color: #343a40;
}
.lottery-card-admin-body {
    padding: 20px;
}
.lottery-card-admin-body .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}
.lottery-card-admin-body .info-item span {
    font-size: 12px;
    color: #6c757d;
    display: block;
    margin-bottom: 4px;
}
.lottery-card-admin-body .info-item strong {
    font-size: 15px;
    font-weight: 600;
    color: #343a40;
}
.lottery-card-admin-body .progress-section .progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #495057;
    margin-bottom: 8px;
}
.lottery-card-admin-body .progress-bar-container {
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
}
.lottery-card-admin-body .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #6aa5ff);
    border-radius: 4px;
}
.lottery-card-admin-actions {
    padding: 15px 20px;
    background-color: #f8f9fa;
    display: flex;
    gap: 10px;
}
.lottery-card-admin-actions .btn {
    flex: 1;
    font-size: 14px;
}

/* ========== NEW PROFESSIONAL LOTTERY MODAL WITH TABS ========== */

#lottery-details-modal .modal-content {
    width: 90%;
    max-width: 800px; /* Modal width adjusted */
    padding: 0; /* Remove padding to allow full-width tabs */
}

/* Tab Button Styles */
.lottery-modal-tabs {
    display: flex;
    background-color: #f8f9fa;
    padding: 10px;
    border-bottom: 1px solid #dee2e6;
}
.lottery-modal-tabs .tab-button {
    flex: 1;
    padding: 10px 15px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.3s, color 0.3s;
}
.lottery-modal-tabs .tab-button.active {
    background-color: var(--primary-color);
    color: white;
}

/* Tab Content Styles */
.lottery-modal-tab-content {
    display: none;
    padding: 20px;
    max-height: 65vh;
    overflow-y: auto;
}
.lottery-modal-tab-content.active {
    display: block;
}
.lottery-modal-tab-content h4 {
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
    color: #495057;
}

/* Prize List Styles in Modal */
.prize-list-admin {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.prize-list-item-admin {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}
.prize-list-position {
    font-weight: 700;
    color: var(--primary-color);
    margin-right: 15px;
    font-size: 16px;
    width: 30px;
}
.prize-list-image, .prize-list-image-fallback {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    margin-right: 15px;
    object-fit: cover;
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 18px;
}
.prize-list-desc {
    font-weight: 500;
    color: #343a40;
}
.ticket-item-admin {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
}
.ticket-user-avatar, .ticket-user-avatar-fallback {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #495057;
}
.ticket-item-details {
    overflow: hidden;
}
.ticket-user-name {
    font-weight: 500;
    color: #343a40;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ticket-id-admin {
    font-size: 12px;
    color: #6c757d;
    font-family: monospace;
}

/* ========== FINAL PROFESSIONAL DRAW PANEL STYLES (V3) ========== */

/* Draw Modal Layout */
#lottery-details-modal .modal-content {
    width: 90%;
    max-width: 550px; /* ড্র প্যানেলের জন্য একটি উপযুক্ত প্রস্থ */
}

#lottery-details-modal .modal-body {
    padding: 20px;
    background-color: #f8f9fa;
    min-height: 60vh;
}

.draw-control-column {
    display: flex;
    flex-direction: column;
    width: 100%; /* নিশ্চিত করে যে এটি সম্পূর্ণ জায়গা নেবে */
    gap: 25px; /* প্রতিটি সেকশনের মধ্যে ফাঁকা জায়গা */
}

/* Next Prize Card */
.next-prize-card-v2 {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.next-prize-card-v2 .next-prize-label {
    font-size: 13px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.next-prize-card-v2 .prize-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}
.next-prize-card-v2 .prize-display img, 
.next-prize-card-v2 .prize-display .prize-fallback {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--primary-color);
}
.next-prize-card-v2 .prize-info {
    text-align: left;
}
.next-prize-card-v2 .prize-info h3 {
    margin: 0;
    font-size: 18px;
    color: var(--primary-color);
}
.next-prize-card-v2 .prize-info p {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #495057;
}
.next-prize-card-v2.ended, .next-prize-card-v2.final {
    background: #f8f9fa;
}
.next-prize-card-v2.ended i, .next-prize-card-v2.final i {
    font-size: 28px;
    color: #6c757d;
    margin-bottom: 10px;
}
.next-prize-card-v2.ended h3, .next-prize-card-v2.final h3 {
    color: #343a40;
}

/* Winner List */
.winner-list-container h4 {
    color: #495057;
    margin-bottom: 15px;
}
.winners-list-v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.winner-item-v2 {
    display: grid;
    grid-template-columns: auto 40px 1fr auto;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}
.winner-position-v2 {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 16px;
}
.winner-avatar, .winner-avatar-fallback {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
}
.winner-info .winner-name {
    font-weight: 600;
    font-size: 15px;
}
.winner-info .winner-prize {
    font-size: 13px;
    color: #555;
}

/* Action Buttons */
#lottery-draw-actions {
    margin-top: auto; /* বাটনগুলোকে নিচে রাখে */
}
#lottery-draw-actions .btn {
    width: 100%;
    font-size: 16px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.refund-sent-notice {
    text-align: center;
    padding: 10px;
    background-color: #eafaf1;
    color: #155724;
    border-radius: 8px;
    font-weight: 500;
}


/* ========== NEW ADMIN LOTTERY UI STYLES (SEPARATED MODALS) ========== */

/* Card Button Layout */
.lottery-card-admin-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 0.8fr 0.8fr; /* Details, Draw, Edit, Delete */
}
.lottery-card-admin-actions .btn-info {
    background-color: #6c757d;
    color: white;
}

/* Draw Modal (#lottery-details-modal) Styles */
#lottery-details-modal .modal-content {
    width: 90%;
    max-width: 500px; /* Draw modal can be narrower */
}
#lottery-details-modal .modal-body {
    padding: 20px;
}
.draw-control-column {
    display: flex;
    flex-direction: column;
    min-height: 60vh;
}

/* Details Modal (#lottery-info-modal) Styles */
#lottery-info-modal .modal-content {
    width: 90%;
    max-width: 600px;
}
#lottery-info-modal .lottery-modal-tab-content {
    min-height: 50vh;
    max-height: 65vh;
}
.ticket-list-admin {
    overflow-y: auto;
    height: 100%;
}

/* Draw Animation Styles */
.draw-spinner-container {
    height: 120px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    margin-bottom: 20px;
}
.spinner-list {
    text-align: center;
}
.spinner-item {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: 500;
    color: #495057;
}
.spinner-selector {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 40px;
    background: rgba(10, 122, 254, 0.1);
    border-top: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    z-index: 2;
}
.spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, #f8f9fa, rgba(248,249,250,0) 30%, rgba(248,249,250,0) 70%, #f8f9fa);
    z-index: 1;
}


/* ========== FINAL PROFESSIONAL TRANSACTION DETAILS MODAL STYLES ========== */

/* Modal Body Layout */
#admin-transaction-details-modal .modal-body {
    padding: 0; /* Remove default padding */
    background-color: #ffffff;
}

#admin-transaction-details-modal .details-body-new {
    padding: 0 25px 25px 25px; /* Add padding to the content area only */
}

/* Section Styling */
.details-section {
    margin-top: 20px;
}

.details-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

/* List Item Styling */
.details-list-item {
    font-size: 15px; /* Increase font size slightly */
}
.details-list-item .value code {
    background-color: #e9ecef;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 13px;
    color: #333;
}

/* Footer Styling for Processing Info */
.details-footer-new {
    background-color: #f8f9fa;
    padding: 0 25px; /* Match body padding */
    border-top: 1px solid #e9ecef;
}
.details-footer-new .details-section {
    margin-top: 0;
    padding: 20px 0;
}
.details-footer-new .details-section-title {
    border-bottom: none;
    margin-bottom: 5px;
}


/* style.css ফাইলের শেষে যোগ করতে পারেন */
.icon-lottery { background-color: #e91e63; }


/* style.css (ফাইলের শেষে যোগ করুন) */

.banner-grid {
    display: grid;
    /* মোবাইল স্ক্রিনের জন্য ১ কলাম */
    grid-template-columns: 1fr;
    gap: 20px;
}

/* ট্যাবলেট */
@media (min-width: 600px) {
    .banner-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ডেস্কটপ */
@media (min-width: 992px) {
    .banner-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.banner-card {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    position: relative;
    border: 1px solid #eee;
}

.banner-image-container {
    width: 100%;
    /* ব্যানার সাধারণত লম্বা হয়, তাই 16:9 অনুপাত ব্যবহার করা হলো */
    aspect-ratio: 16 / 9; 
    overflow: hidden;
    background-color: #f0f2f5;
}

.banner-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-card-body {
    padding: 15px;
}

.banner-card-body h5 {
    margin: 0 0 10px 0;
    font-size: 15px;
    color: var(--secondary-color);
    /* লম্বা টাইটেল হলে ... দেখাবে */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.banner-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.banner-card-actions .btn {
    flex-grow: 1;
    padding: 6px 10px;
    font-size: 12px;
}

.banner-card .status-badge-absolute {
    top: 10px;
    right: 10px;
    font-size: 11px;
    z-index: 1; /* ছবির উপরে দেখানোর জন্য */
}


/* Temporary Limit Modal Button Style */
.btn-add-temp {
    background: none;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px;
    transition: background-color 0.2s, color 0.2s;
}

.btn-add-temp:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Limit Not Set Button Style */
.limit-card .value button.btn-add-temp {
    margin-left: 5px; /* "Not Set" লেখার পাশে বাটন দেখানোর জন্য */
    vertical-align: middle;
}

/* Limit card styling for not set */
.limit-card .value:has(button.btn-add-temp) { /* Modern browsers */
    color: #6c757d; /* Grey color if not set */
}

/* Fallback for older browsers (approximate) */
.limit-card .value:not(:empty):not(:contains('$')):not(:contains('h')) {
     color: #6c757d;
}

/* Ensure spinner container aligns correctly if used */
.spinner-container {
    text-align: center;
    padding: 30px;
}


/* ========== PULL TO REFRESH STYLES (ADMIN) ========== */
#main-content-area {
    position: relative; /* Needed for absolute positioning of indicator */
    overflow-y: hidden; /* Prevent main area from scrolling, only content-wrapper scrolls */
}

/* Make content-wrapper the scrollable element */
.content-wrapper {
    height: calc(100vh - 65px); /* Adjust based on header height */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scroll-behavior: smooth;
}

/* Modern Pull to Refresh Styles */
.pull-to-refresh-indicator {
    position: absolute;
    top: -80px; /* ডিফল্টভাবে লুকানো থাকবে */
    left: 0;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 999;
    pointer-events: none; /* যাতে ক্লিকের সমস্যা না করে */
}

.ptr-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transform: scale(0); /* শুরুতে ছোট থাকবে */
    transition: transform 0.2s ease;
}

.ptr-icon {
    color: var(--primary-color);
    font-size: 18px;
    transition: transform 0.2s; /* আইকন ঘোরার জন্য */
}

/* যখন ইউজার টানবে */
.pull-to-refresh-indicator.ptr-pulling .ptr-content {
    transform: scale(1); /* দৃশ্যমান হবে */
}

/* যখন লোডিং হবে (Refreshing State) */
.pull-to-refresh-indicator.refreshing {
    top: 20px; /* নিচে ফিক্সড হয়ে থাকবে */
    transition: top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pull-to-refresh-indicator.refreshing .ptr-content {
    transform: scale(1);
}

.pull-to-refresh-indicator.refreshing .ptr-icon {
    animation: ptr-spin 1s linear infinite; /* স্পিন এনিমেশন */
}

@keyframes ptr-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* মেইন কন্টেন্ট এরিয়া রিলেটিভ হতে হবে */
.main-content {
    position: relative;
    overflow-y: auto; /* স্ক্রল করার জন্য */
    -webkit-overflow-scrolling: touch; /* স্মুথ স্ক্রলিং */
}

/* ========== GIFT CARD OCCASION STYLES (V3 - PRO LIST) ========== */

.occasions-list-container-pro {
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    border: 1px solid #eee;
}

.occasion-list-item-pro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px; /* প্যাডিং কমানো হলো */
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}
.occasion-list-item-pro:hover {
    background-color: #f8f9fa;
}
.occasion-list-item-pro:last-child {
    border-bottom: none;
}

/* বাম দিক: ইমোজি + নাম */
.occasion-list-info {
    display: flex;
    align-items: center;
    gap: 12px; /* ইমোজি এবং নামের মধ্যে গ্যাপ */
    flex-grow: 1;
    overflow: hidden;
}

.occasion-list-emoji {
    font-size: 20px; /* ★★★ ১. ইমোজির সাইজ কমানো হলো ★★★ */
    flex-shrink: 0;
}

.occasion-list-name {
    font-size: 15px; /* নামের সাইজ */
    font-weight: 600;
    color: var(--secondary-color);
    /* ★★★ ৪. লেখাটি পুরোপুরি দেখানোর জন্য এই কোড ★★★ */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ডান দিক: স্ট্যাটাস + বাটন */
.occasion-list-controls {
    display: flex;
    flex-direction: column; /* ★★★ ২. স্ট্যাটাস ও বাটন উপরে-নিচে সাজানো ★★★ */
    align-items: flex-end; /* ডান দিকে অ্যালাইন করা */
    flex-shrink: 0;
    margin-left: 10px;
}

.occasion-list-controls .status-badge {
    font-size: 10px; /* স্ট্যাটাস ব্যাজের টেক্সট ছোট করা */
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    margin-bottom: 8px; /* ★★★ ৩. স্ট্যাটাস এবং বাটনের মধ্যে গ্যাপ ★★★ */
}

.occasion-list-actions {
    display: flex;
    gap: 8px;
}

.occasion-list-actions .btn-sm {
    width: auto;
    padding: 5px 12px; /* বাটনগুলো ছোট করা হলো */
    font-size: 12px;
    font-weight: 600;
}

/* ========== P2P Method Management Styles ========== */
/* Reusing template card styles */
.admin-list-card {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border: 1px solid #eee;
}
.admin-list-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}
.admin-list-card-header h5 {
    margin: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-list-card-header h5 img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
}
.admin-list-card-header .status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    margin-right: 10px;
}
.admin-list-card-header .status-badge.active {
    background-color: #d4edda;
    color: #155724;
}
.admin-list-card-header .status-badge.inactive {
    background-color: #f8d7da;
    color: #721c24;
}
.btn-small {
    font-size: 12px;
    padding: 5px 10px;
}

/* Modal form grid */
.modal-content.large {
    max-width: 600px;
}
.form-fieldset {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}
.form-fieldset legend {
    font-size: 14px;
    font-weight: 600;
    padding: 0 10px;
    color: var(--primary-color);
}
.dynamic-fields-container .dynamic-field-group {
    display: grid;
    grid-template-columns: 1fr 1fr 100px 1fr auto;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}
.btn-small {
    font-size: 12px;
    padding: 5px 10px;
    width: auto;
}


/* ========== ADMIN: Product List View Styles ========== */

/* পুরনো কার্ড স্টাইল হাইড করা (যদি প্রয়োজন হয়) */
.product-card {
    display: none; /* নতুন লিস্ট ভিউ এটি ব্যবহার করে না */
}

/* নতুন লিস্ট আইটেম স্টাইল */
.product-list-item-admin {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.product-list-image-container {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #eee;
    background-color: #f8f9fa;
}

.product-list-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-list-details {
    flex-grow: 1;
    overflow: hidden; /* লম্বা টেক্সট ঠিক করার জন্য */
}

.product-list-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-list-price {
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
}

.product-list-category {
    font-size: 11px;
    color: #888;
    font-weight: 500;
    margin-left: 8px;
}

.product-list-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap; /* ছোট স্ক্রিনে বাটন নিচে নামতে পারে */
    justify-content: flex-end;
    flex-shrink: 0;
}

/* ছোট বাটন স্টাইল */
.product-list-actions .btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    width: auto; /* বাটন যেন 100% না হয় */
    border-radius: 6px;
}

/* স্ট্যাটাস ব্যাজ (অ্যাক্টিভ/ইনঅ্যাক্টিভ) */
.status-badge-inline {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}
.status-badge-inline.active {
    background-color: #d4edda;
    color: #155724;
}
.status-badge-inline.inactive {
    background-color: #e2e3e5;
    color: #383d41;
}

/* ছোট স্ক্রিনের জন্য রেসপন্সিভ ডিজাইন */
@media (max-width: 480px) {
    .product-list-item-admin {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .product-list-actions {
        width: 100%;
        margin-top: 10px;
        justify-content: flex-start; /* বাটনগুলো বাম দিক থেকে শুরু হবে */
    }
    .product-list-actions .btn-sm {
        flex-grow: 1; /* বাটনগুলো সমান জায়গা নেবে */
    }
    .status-badge-inline {
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
    }
}


/* admin.css - এই সম্পূর্ণ CSS ব্লকটি প্রতিস্থাপন করুন */

/* ========================================
   ADMIN PRODUCT MODAL - V2 (Full Feature)
   ======================================== */

.modal-form[data-modal-id="product-form-modal"] .modal-content.large {
    max-width: 800px;
}

/* ★★★ নতুন: ৪-কলাম গ্রিড ★★★ */
.form-grid-col-4 {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr 1fr;
    gap: 15px;
}
/* ৩-কলাম গ্রিড (আগের) */
.form-grid-col-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

/* ★★★ নতুন: readonly ইনপুট স্টাইল ★★★ */
#product-sale-price[readonly] {
    background-color: #e9ecef;
    border-color: #ced4da;
    color: #495057;
    cursor: not-allowed;
    font-weight: 600;
}

.dynamic-fieldset {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}
.dynamic-fieldset legend {
    padding: 0 10px;
    font-weight: 600;
    color: var(--primary-color);
}
.dynamic-fieldset .btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    width: auto;
    margin-top: 10px;
}

.dynamic-field-group-admin {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.dynamic-field-group-admin .form-control {
    flex-grow: 1;
    margin-bottom: 0;
}

.spec-field-group .spec-key {
    flex-grow: 1;
}
.spec-field-group .spec-value {
    flex-grow: 2;
}

.btn-remove-field-admin {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s;
}
.btn-remove-field-admin:hover {
    background-color: #f1b0b7;
}

/* ★★★ নতুন: লিস্ট ভিউতে প্রাইস স্টাইল ★★★ */
.product-list-price {
    font-size: 14px;
    font-weight: 500;
}
/* সেল প্রাইস (লাল) */
.product-list-price .sale {
    color: var(--error-color);
    font-weight: 600;
    font-size: 15px;
}
/* কাটা দাম (ধূসর) */
.product-list-price .original {
    color: #888;
    text-decoration: line-through;
    margin-right: 8px;
}


@media (max-width: 600px) {
    .form-grid-col-3, .form-grid-col-4 {
        grid-template-columns: 1fr;
    }
    .spec-field-group {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ========================================
   ADMIN MODAL FORM - DEFAULT STYLES
   ======================================== */

/* এটি মডালকে ডিফল্টভাবে লুকিয়ে রাখবে */
.modal-form {
    display: none; /* ★★★ ডিফল্টভাবে লুকানো থাকবে ★★★ */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* কন্টেন্ট বড় হলে স্ক্রল করার সুবিধা */
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* মডালের কন্টেন্ট বক্স */
.modal-content {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    width: 95%;
    max-width: 500px; /* ডিফল্ট প্রস্থ */
    animation: modal-anim 0.3s ease-out;
}

/* ★★★ নতুন 'large' ক্লাস ★★★ */
.modal-content.large {
    max-width: 800px; /* প্রডাক্ট মডালের জন্য বড় সাইজ */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
}

.modal-header h4 {
    margin: 0;
    font-size: 18px;
}

.modal-body {
    padding: 20px;
    max-height: 75vh; /* মডালের কন্টেন্ট বড় হলে স্ক্রল হবে */
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid #e9ecef;
}

/* মডাল খোলার অ্যানিমেশন */
@keyframes modal-anim {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}


/* ========== ADMIN IMAGE UPLOAD STYLES ========== */

#product-images-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
}

.admin-image-upload-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* ১:১ অনুপাত (বর্গাকার) */
    border: 2px dashed #ddd;
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: #f8f9fa;
    transition: border-color 0.3s ease;
}

.admin-image-upload-card:hover {
    border-color: var(--primary-color);
}

.admin-image-file-input {
    display: none; /* ফাইল ইনপুট লুকানো থাকবে */
}

.image-preview-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none; /* ডিফল্টভাবে লুকানো */
}

.admin-image-upload-card.has-image .image-preview {
    display: block; /* ছবি থাকলে দেখানো হবে */
}

.upload-prompt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6c757d;
    text-align: center;
    padding: 10px;
}

.upload-prompt i {
    font-size: 24px;
    margin-bottom: 8px;
}

.upload-prompt span {
    font-size: 13px;
    font-weight: 500;
}

.admin-image-upload-card.has-image .upload-prompt {
    display: none; /* ছবি আপলোড হলে প্রম্পট লুকানো হবে */
}

/* আপলোডিং স্পিনার */
.spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: none; /* ডিফল্টভাবে লুকানো */
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* রিমুভ বাটন (আগের CSS পরিবর্তন করা হয়েছে) */
.btn-remove-field-admin {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(220, 53, 69, 0.8); /* লালচে */
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    z-index: 2; /* স্পিনারের উপরে থাকবে */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}
.btn-remove-field-admin:hover {
    background-color: #dc3545;
}

/* স্পেসিফিকেশন ফিল্ডের রিমুভ বাটন অ্যাডজাস্ট করা */
.spec-field-group .btn-remove-field-admin {
    position: static; /* এটি অ্যাবসোলুট নয় */
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ========== প্রডাক্ট ক্যাটাগরি ড্রপডাউন স্টাইল ========== */

#product-category optgroup {
    font-size: 1em;
    font-weight: 600;
    color: var(--primary-color); /* হেডারটিকে প্রাইমারি কালার দেওয়া হলো */
    background-color: #f0f2f5;   /* হালকা ব্যাকগ্রাউন্ড */
    padding: 6px 10px;
    margin-top: 5px;
}

#product-category option {
    font-weight: 400;
    color: var(--text-color);
    background-color: #fff;
    padding: 6px 15px; /* সাব-আইটেমগুলোকে একটু ডানে সরানো হলো */
}


/* ========== নতুন: অ্যাডমিন ইমেজ আপলোড কার্ড V2 স্টাইল ========== */

.admin-image-upload-card {
    position: relative;
    border: 2px dashed #ddd;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.admin-image-upload-card:hover {
    border-color: var(--primary-color);
}

.image-preview-container {
    background-color: #f8f9fa;
}

.upload-prompt {
    transition: opacity 0.3s ease;
}

.admin-image-upload-card.has-image .upload-prompt {
    opacity: 0;
    pointer-events: none;
}

/* --- নতুন বাটন কন্টেইনার --- */
.image-card-actions {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    padding: 4px 6px;
    opacity: 0; /* ডিফল্টভাবে লুকানো */
    transition: opacity 0.2s ease;
    z-index: 3;
}

/* ছবি থাকলে বাটনগুলো দেখানো */
.admin-image-upload-card.has-image:hover .image-card-actions,
.admin-image-upload-card.is-cover-image .image-card-actions {
    opacity: 1;
}

/* ছবি না থাকলে শুধু ডিলিট বাটন দেখানো */
.admin-image-upload-card:not(.has-image):hover .image-card-actions {
    opacity: 1;
}

/* --- নতুন বাটন স্টাইল --- */
.btn-image-action {
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    color: #333;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}
.btn-image-action:hover {
    background-color: #fff;
    color: #000;
}

/* --- বাটন ভিজিবিলিটি --- */
/* ছবি না থাকলে 'Make Cover' এবং 'Clear' বাটন হাইড */
.admin-image-upload-card:not(.has-image) .btn-make-cover,
.admin-image-upload-card:not(.has-image) .btn-clear-image {
    display: none;
}
/* ছবি থাকলে 'Delete' বাটন হাইড (আগে ক্লিয়ার করতে হবে) */
.admin-image-upload-card.has-image .btn-delete-slot {
    display: none;
}


/* --- কভার ইমেজ স্টাইল --- */
.cover-image-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: var(--primary-color);
    color: white;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    z-index: 2;
    display: none; /* ডিফল্টভাবে লুকানো */
}

.admin-image-upload-card.is-cover-image {
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 10px rgba(10, 122, 254, 0.3);
}

.admin-image-upload-card.is-cover-image .cover-image-badge {
    display: block; /* কভার হলে ব্যাজ দেখানো */
}

/* কভার ইমেজের 'Make Cover' বাটনটি হলুদ করা */
.admin-image-upload-card.is-cover-image .btn-make-cover {
    background-color: #ffc107;
    color: #333;
}

/* পুরনো 'btn-remove-field-admin' বাটনটি (x) হাইড করা */
.admin-image-upload-card .btn-remove-field-admin {
    display: none;
}


/* [style.css] - এই নতুন কোডটি ফাইলের শেষে যোগ করুন */


/* প্রোমো কার্ড স্টাইল (আগের ধাপ থেকে) */
.promo-card-admin {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid #eee;
}
.promo-card-header {
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eee;
}
.promo-code-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    font-family: monospace;
    margin: 0;
}
.promo-card-body {
    padding: 15px 20px;
}
.promo-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-bottom: 8px;
}
.promo-detail-item:last-child { margin-bottom: 0; }
.promo-detail-item span { color: #555; font-weight: 500; }
.promo-detail-item strong { color: #333; font-weight: 600; }
.promo-detail-item.timer .timer-value {
    color: var(--success-color);
    font-weight: 700;
}
.promo-card-admin .status-badge-absolute {
    top: 15px;
    right: 15px;
}
.status-badge-absolute.expired {
    background-color: #f8d7da;
    color: #721c24;
}
.promo-card-actions {
    padding: 10px 15px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 8px;
    background-color: #f8f9fa;
}
.promo-card-actions .btn {
    width: auto;
    flex-grow: 1;
    padding: 6px 10px;
    font-size: 12px;
}


/* Custom Modal Styles (Delivery Details এর জন্য) */
.custom-modal-overlay {
    position: fixed; /* স্ক্রিনের সাপেক্ষে ফিক্সড */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* কালো ব্যাকগ্রাউন্ড */
    backdrop-filter: blur(5px);
    display: none; /* শুরুতে লুকানো থাকবে */
    justify-content: center;
    align-items: center;
    z-index: 2000; /* সবার উপরে থাকার জন্য */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* যখন জাভাস্ক্রিপ্ট দিয়ে 'show' ক্লাস যোগ করা হবে */
.custom-modal-overlay.show {
    display: flex; /* ফ্লেক্সবক্স চালু হবে */
    opacity: 1;
}

.custom-modal-content {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.custom-modal-overlay.show .custom-modal-content {
    transform: translateY(0);
}

.custom-modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #f8f9fa;
}

.custom-modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.custom-modal-title {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.custom-modal-body {
    padding: 25px;
    max-height: 70vh;
    overflow-y: auto;
}

.custom-modal-footer {
    padding: 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ইনফো গ্রিড স্টাইল */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    font-size: 14px;
}
.info-grid div small {
    color: #777;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}


/* ========================================
   SUPPORT TICKET UI DESIGN
   ======================================== */

/* 1. Filter Tabs Design */
.support-tabs-container {
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
    padding: 5px;
    overflow-x: auto;
}

.support-filter-btn {
    padding: 10px 24px;
    border-radius: 50px; /* ক্যাপসুল শেপ */
    border: 1px solid #e0e0e0;
    background: #ffffff;
    color: #555;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.support-filter-btn:hover {
    background: #f8f9fa;
    border-color: #d0d0d0;
    transform: translateY(-1px);
}

.support-filter-btn.active {
    background: linear-gradient(135deg, var(--primary-color), #0056b3);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(10, 122, 254, 0.3);
}

.support-filter-btn i {
    font-size: 14px;
}

/* 2. Chat Interface Design */
.admin-chat-wrapper {
    display: flex;
    flex-direction: column;
    height: 500px; /* ফিক্সড হাইট */
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    overflow: hidden;
}

.admin-chat-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-image: radial-gradient(#e1e1e1 1px, transparent 1px);
    background-size: 20px 20px; /* হালকা প্যাটার্ন */
}

/* Message Bubbles */
.chat-row {
    display: flex;
    width: 100%;
}

.chat-row.user {
    justify-content: flex-start; /* ইউজারের মেসেজ বামে */
}

.chat-row.admin {
    justify-content: flex-end; /* অ্যাডমিনের মেসেজ ডানে */
}

.chat-bubble {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.chat-row.user .chat-bubble {
    background: #ffffff;
    color: #333;
    border-bottom-left-radius: 4px; /* স্পিচ বাবলের মতো ইফেক্ট */
    border: 1px solid #eee;
}

.chat-row.admin .chat-bubble {
    background: var(--primary-color); /* আপনার প্রাইমারি কালার */
    color: white;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 10px rgba(10, 122, 254, 0.2);
}

.chat-meta-top {
    font-size: 11px;
    margin-bottom: 4px;
    font-weight: 600;
    opacity: 0.8;
    display: block;
}

.chat-meta-bottom {
    font-size: 10px;
    margin-top: 5px;
    display: block;
    text-align: right;
    opacity: 0.7;
}

/* Chat Footer (Input Area) */
.admin-chat-footer {
    padding: 15px;
    background: #ffffff;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
    align-items: center;
}

.admin-chat-input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 25px;
    padding: 12px 20px;
    font-size: 14px;
    resize: none;
    height: 45px; /* ফিক্সড হাইট */
    line-height: 20px;
    outline: none;
    transition: border-color 0.3s;
}
.admin-chat-input:focus {
    border-color: var(--primary-color);
}

.btn-send-reply {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0 4px 10px rgba(10, 122, 254, 0.3);
}
.btn-send-reply:hover {
    transform: scale(1.05);
}

/* Status Header inside Modal */
.ticket-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #fff;
    border-bottom: 1px solid #eee;
    margin-bottom: 0;
}


/* --- Compact Header Design --- */
.main-header {
    padding: 10px 20px !important; /* প্যাডিং কমানো হলো */
    height: 60px !important; /* ফিক্সড ছোট হাইট */
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.main-header h1 {
    font-size: 18px !important; /* ফন্ট সাইজ ছোট করা */
    margin: 0;
    font-weight: 600;
}

.menu-toggle-btn {
    font-size: 18px !important;
}

/* ওয়ালেট বাটন এবং ইনফো ছোট করা */
#admin-info {
    gap: 8px !important;
    font-size: 13px !important;
}

#super-admin-wallet-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    height: 32px !important;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* --- Trade Manager Compact Professional Design (FIXED) --- */

/* 1. Container & Layout */
.trade-manager-container {
    padding: 15px; /* একটু বাড়িয়ে ১৫px করা হলো যাতে ঘিঞ্জি না লাগে */
    background: transparent;
    width: 100%;
    box-sizing: border-box;
}

/* 2. Top Filter Bar (Responsive & Clean) */
.trade-filter-bar {
    background: #fff;
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: 20px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px; /* গ্যাপ একটু বাড়ানো হলো */
    border: 1px solid #e0e0e0;
}

.filter-icon-only {
    color: #666;
    font-size: 16px;
    flex-shrink: 0;
}

.trade-select-wrapper {
    flex-grow: 1;
    position: relative;
    min-width: 0; /* Flexbox text overflow fix */
}

/* 3. Dropdown & Input Styling (Universal Fix) */
#trade-product-select, 
.form-control {
    width: 100%;
    height: 40px; /* হাইট একটু বাড়িয়ে স্ট্যান্ডার্ড ৪০px করা হলো */
    padding: 0 12px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 14px; /* ফন্ট ১৩ থেকে ১৪ করা হলো পড়ার সুবিধার জন্য */
    color: #333;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    
    /* Text Handling */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* Dropdown Arrow Fix */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 35px; /* আইকনের জন্য জায়গা */
}

/* ফোকাস ইফেক্ট */
#trade-product-select:focus,
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(10, 122, 254, 0.1); /* গ্লো ইফেক্ট */
    outline: none;
}

/* 4. Stats Cards Grid (Better Spacing) */
.trade-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* সমান দুই ভাগ */
    gap: 15px; /* গ্যাপ একটু বাড়ানো হলো */
    margin-bottom: 25px;
}

.trade-stat-card {
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid #f0f0f0;
    transition: transform 0.2s ease;
    overflow: hidden; /* কন্টেন্ট বাইরে যাওয়া আটকাবে */
}

.trade-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

.trade-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 4px;
}

.icon-pending { background: #e3f2fd; color: #1565c0; }
.icon-capital { background: #e8f5e9; color: #2e7d32; }

.trade-stat-content {
    width: 100%;
}

.trade-stat-content h4 {
    margin: 0;
    font-size: 11px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}

.trade-stat-content h2 {
    margin: 0;
    font-size: 20px; /* সাইজ একটু বাড়ানো হলো সুন্দর দেখানোর জন্য */
    color: #2c3e50;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 5. Action Form Design (Clean & Spacious) */
#trade-action-form {
    background: #fff;
    padding: 20px 25px; /* স্পেস বাড়ানো হলো */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    border: 1px solid #eee;
    max-width: 600px;
    margin: 0 auto; /* মাঝখানে রাখার জন্য */
}

#trade-action-form h4 {
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 12px;
    margin-bottom: 20px;
    font-weight: 600;
}

#trade-action-form .form-group {
    margin-bottom: 18px; /* ইনপুটগুলোর মাঝে ফাঁকা */
}

#trade-action-form label {
    font-size: 13px;
    font-weight: 500;
    color: #555;
    margin-bottom: 6px;
    display: block;
}

/* বাটনের ডিজাইন */
#trade-action-form button.btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
    height: 42px;
    border-radius: 8px;
    letter-spacing: 0.5px;
}

/* 6. Mobile Optimization (Small Screens) */
@media (max-width: 480px) {
    .trade-manager-container {
        padding: 10px;
    }
    
    .trade-filter-bar {
        padding: 8px 12px;
    }
    
    .trade-stats-row {
        gap: 10px;
    }
    
    .trade-stat-card {
        padding: 12px;
    }
    
    .trade-stat-content h2 {
        font-size: 18px; /* মোবাইলে একটু ছোট */
    }
    
    #trade-action-form {
        padding: 15px;
    }
}


/* --- Product Orders Section Styling --- */

/* ট্যাব কন্টেইনার */
.support-tabs-container, .tabs-container {
    display: flex;
    gap: 10px;
    background: #f1f3f5;
    padding: 5px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.tab-btn.active {
    background: #fff;
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* প্রডাক্ট সামারি কার্ড */
#purchase-summary-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}

.purchase-card-pro {
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: transform 0.2s;
}

.purchase-card-pro:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* ইমেজ এবং টাইটেল এরিয়া */
.purchase-card-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.purchase-card-img {
    width: 55px;
    height: 55px;
    border-radius: 10px;
    object-fit: cover;
    background: #f8f9fa;
    border: 1px solid #f0f0f0;
}

.purchase-card-title h4 {
    margin: 0;
    font-size: 15px;
    color: #333;
    font-weight: 700;
}

.purchase-card-title small {
    color: #888;
    font-size: 12px;
}

/* পরিসংখ্যান গ্রিড (Stats Grid) */
.purchase-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    background: #f9fafb;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 12px;
}

.stat-item-mini {
    display: flex;
    flex-direction: column;
}

.stat-item-mini span {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-item-mini strong {
    font-size: 14px;
    color: #444;
}

.total-value-row {
    grid-column: span 2;
    border-top: 1px solid #eee;
    padding-top: 8px;
    margin-top: 2px;
}

.total-value-row strong {
    font-size: 17px;
    color: var(--primary-color);
}

/* অ্যাকশন বাটন */
.purchase-actions {
    display: flex;
    gap: 10px;
}

.btn-approve-bulk {
    flex: 2;
    background: linear-gradient(135deg, #0a7afe, #0056b3);
    color: #fff;
    border: none;
    padding: 9px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-reject-bulk {
    flex: 1;
    background: #fff;
    color: #dc3545;
    border: 1px solid #ffccd1;
    padding: 9px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-reject-bulk:hover {
    background: #fff5f5;
}

/* ইনফো কার্ড */
.info-alert-pro {
    background: #eef6ff;
    padding: 12px 15px;
    border-radius: 10px;
    border-left: 4px solid #0a7afe;
    margin-bottom: 20px;
    font-size: 13px;
    color: #2c5282;
    display: flex;
    align-items: center;
    gap: 10px;
}


/* প্রফেশনাল ট্রেড ফিনালইজ ডিজাইন */
.trade-finalize-container {
    text-align: left;
    padding: 5px;
}

.trade-info-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.header-icon {
    width: 45px;
    height: 45px;
    background: #eef6ff;
    color: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.header-text h4 { margin: 0; font-size: 16px; color: #333; }
.header-text p { margin: 0; font-size: 12px; color: #888; }

.trade-summary-pro-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.summary-item { display: flex; flex-direction: column; gap: 4px; }
.summary-item span { font-size: 11px; color: #94a3b8; text-transform: uppercase; }
.summary-item strong { font-size: 15px; color: #1e293b; }

.form-group-pro { margin-bottom: 15px; }
.form-group-pro label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
}

.form-control-pro {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s;
    background: #fff;
    box-sizing: border-box;
}

.form-control-pro:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 122, 254, 0.1);
}

.loss-alert-box {
    background: #fff5f5;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #feb2b2;
    margin-bottom: 15px;
}

.loss-alert-box label { color: #c53030; }
.loss-alert-box small { color: #9b2c2c; font-size: 11px; display: block; margin-top: 5px; }

/* Market Status Toggle Button */
.btn-market-status {
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    margin-right: 5px;
}
.btn-market-status.open {
    background: #d1fae5; color: #065f46; border: 1px solid #34d399;
}
.btn-market-status.closed {
    background: #fee2e2; color: #b91c1c; border: 1px solid #f87171;
}