/*
 * Styles for Crypto Investment Fund Plugin
 * THEME: Golden Miners (Dark/Gold)
 * @version 1.7 (Adds Responsive Tables for Mobile)
 */

.cif-dashboard {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    background-color: #222; 
    color: #eee;
    border: 1px solid #B8860B;
    padding: 20px;
    border-radius: 8px;
    max-width: 900px;
    margin: 20px auto;
}

/* === 1. صناديق العرض العلوية === */

.cif-overview-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.cif-balance-box {
    background: linear-gradient(135deg, #DAA520, #B8860B);
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    flex: 1;
    margin-bottom: 0;
    border: 1px solid #FFD700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.cif-balance-box h4 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
    font-weight: bold;
    color: #fff;
}

.cif-balance-box p {
    margin: 0;
    font-size: 2.5em;
    font-weight: bold;
    color: #fff;
}

.cif-balance-box.cif-profit-box {
    background: #333;
    color: #eee;
    border: 1px solid #DAA520;
    text-shadow: none;
}

.cif-balance-box.cif-profit-box h4 {
    color: #eee;
    opacity: 0.8;
}

.cif-balance-box.cif-profit-box p {
    color: #FFD700;
}

.cif-balance-box.cif-hashrate-box {
    background: linear-gradient(135deg, #cd7f32, #a0522d);
    border-color: #e69138;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.cif-balance-box.cif-hashrate-box h4 {
    color: #fff;
    opacity: 0.8;
}

.cif-balance-box.cif-hashrate-box p {
    color: #fff;
}


/* === 2. الأقسام والعناوين === */

.cif-dashboard h3,
.cif-dashboard h4 {
    color: #DAA520;
    border-bottom: 1px solid #B8860B;
    padding-bottom: 10px;
}

.cif-section {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #444;
}

.cif-section:last-child {
    border-bottom: none;
}

/* === 3. بطاقات الخطط (النشطة والجديدة) === */

.cif-my-plans-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.cif-my-plan-item {
    background-color: #333;
    border: 1px solid #B8860B;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.cif-my-plan-item h5 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #DAA520;
}

.cif-my-plan-item p { margin: 5px 0; color: #ddd; }
.cif-my-plan-item small { color: #999; font-size: 0.9em; }

.cif-plan-box {
    background-color: #2a2a2a;
    border: 1px solid #B8860B;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
}
.cif-plan-box h5 { margin-top: 0; color: #DAA520; }
.cif-plan-box p { color: #ddd; }
.cif-hashrate { color: #f39c12; font-weight: bold; }


/*
 * تنسيقات صور الخطط (لإصلاح التشويه)
 */
.cif-plan-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px; /* مسافة بين النص والصورة */
}

.cif-plan-details-col {
    flex-grow: 1; /* عمود النص يأخذ المساحة المتاحة */
}

.cif-plan-image {
    max-width: 150px;  /* تحديد عرض أقصى للصورة */
    height: auto;      /* الحفاظ على النسبة */
    border-radius: 8px;
    border: 1px solid #444;
    flex-shrink: 0;    /* منع الصورة من الانكماش */
}


/* === 4. الأزرار والنماذج === */

.cif-button {
    background-color: #DAA520;
    color: #222;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.cif-button:hover {
    background-color: #B8860B;
    color: #000;
}

/* حقول الإدخال */
.cif-dashboard input[type="text"],
.cif-dashboard input[type="number"],
.cif-dashboard input[type="email"],
.cif-dashboard input[type="password"],
.cif-dashboard input[type="file"],
.cif-dashboard select,
.cif-form-container input[type="text"],
.cif-form-container input[type="email"],
.cif-form-container input[type="password"],
.cif-form-container select.cif-select-input {
    background-color: #333;
    color: #eee;
    border: 1px solid #B8860B;
    padding: 10px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

/* تخصيص قائمة select */
.cif-dashboard select,
.cif-form-container select.cif-select-input {
    padding: 10px 8px;
}

.cif-address-input {
    background-color: #111;
    color: #DAA520;
    border: 1px solid #DAA520;
    width: 100%;
    text-align: center;
    padding: 8px;
    font-family: monospace;
    font-size: 1.1em;
    margin-top: 10px;
}

/* تنسيق QR Code (مع دعم Canvas) */
#cif-qrcode-display {
    margin: 15px auto;
    display: inline-block; 
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#cif-qrcode-display img,
#cif-qrcode-display canvas { 
    display: block; 
    margin: 0 auto;
}


/* === 5. الجداول والإشعارات === */

.cif-table { width: 100%; border-collapse: collapse; }
.cif-table th, .cif-table td { padding: 12px; text-align: left; border-bottom: 1px solid #B8860B; }
.cif-table th { background-color: #333; color: #DAA520; }
.cif-profit { color: #FFD700; font-weight: bold; }
.cif-loss { color: #ff6b6b; }
.cif-notice { background-color: #444; border-left: 4px solid #DAA520; padding: 10px; font-style: italic; color: #eee; }

/* رسائل النجاح والخطأ */
.cif-success { background-color: #2a3b2a; color: #a7d7a7; border: 1px solid #5a8c5a; padding: 15px; border-radius: 4px; margin-bottom: 20px; }
.cif-error { background-color: #3b2a2a; color: #d7a7a7; border: 1px solid #8c5a5a; padding: 15px; border-radius: 4px; margin-bottom: 20px; }

/* تنسيقات حالة الـ KYC */
.cif-kyc-status {
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}
.cif-kyc-status strong {
    font-size: 1.1em;
    display: block;
    margin-bottom: 5px;
}
.cif-kyc-approved {
    background-color: #2a3b2a;
    border-left: 5px solid #5a8c5a;
    color: #a7d7a7;
}
.cif-kyc-pending {
    background-color: #4a3c2a;
    border-left: 5px solid #f39c12;
    color: #f3c98b;
}
.cif-kyc-rejected {
    background-color: #3b2a2a;
    border-left: 5px solid #8c5a5a;
    color: #d7a7a7;
}


/* === 6. نماذج تسجيل الدخول والتسجيل === */
.cif-form-container {
    background-color: #222;
    color: #eee;
    border: 1px solid #B8860B;
    padding: 25px;
    border-radius: 8px;
    max-width: 500px;
    margin: 20px auto;
}
.cif-form-container h3 { 
    color: #DAA520; 
    text-align: center; 
}

.cif-form-container h4 {
    color: #DAA520;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    margin-top: 25px;
    margin-bottom: 20px;
    font-size: 1.3em;
    font-weight: 600;
}

.cif-form-container p { 
    margin-bottom: 15px; 
}
.cif-form-container label { 
    display: block; 
    margin-bottom: 5px; 
    color: #eee;
    font-weight: bold;
}


/* === 7. الاستجابة للشاشات الصغيرة (محدث) === */
@media (min-width: 800px) {
    .cif-overview-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* استجابة لبطاقات الخطط على الشاشات الصغيرة */
@media (max-width: 500px) {
    .cif-plan-header-row {
        flex-direction: column; /* جعل الصورة تحت النص */
    }

    .cif-plan-image {
        max-width: 100%; /* جعل الصورة بعرض البطاقة */
        margin-top: 15px;
        margin-left: 0;
    }
}

/* *** إصلاح مشكلة خروج الجدول عن حدود الشاشة في الموبايل *** */
@media (max-width: 768px) {
    /* جعل الحاوية المحيطة بالجدول قابلة للتمرير أفقياً */
    .cif-table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* لتمرير سلس على iOS */
    }

    /* ضمان عدم انكماش الخلايا بشكل مفرط */
    .cif-table th,
    .cif-table td {
        white-space: nowrap; /* يمنع التفاف النص داخل الخلايا */
        padding: 10px;      /* تقليل الحشو قليلاً لتوفير مساحة */
        font-size: 14px;    /* تصغير الخط قليلاً إذا لزم الأمر */
    }
}