@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css');

/* --- 🎨 تعریف متغیرهای تم (Variables) --- */
:root {
    /* پالت رنگ اصلی */
    --color-primary: #3b82f6; /* یک آبی مدرن‌تر و شاداب‌تر */
    --color-primary-dark: #2563eb;
    --color-primary-light: #eff6ff;
    --color-primary-focus: rgba(59, 130, 246, 0.3);

    /* پالت رنگ‌های عملکردی */
    --color-success: #10b981;
    --color-success-dark: #059669;
    --color-danger: #ef4444;
    --color-danger-dark: #dc2626;
    --color-danger-light: #fee2e2;
    --color-danger-text: #b91c1c;
    --color-warning: #f59e0b;
    --color-warning-dark: #d97706;
    --color-warning-text: #422006;
    --color-info: #06b6d4;
    --color-info-dark: #0891b2;

    /* پالت رنگ‌های پایه */
    --color-text: #1f2937; /* تیره‌تر و خواناتر از #222 */
    --color-text-muted: #6b7280;
    --color-text-light: #ffffff;
    --color-bg: #f9fafb; /* پس‌زمینه بسیار روشن و تمیز */
    --color-bg-card: #ffffff;
    --color-border: #e5e7eb; /* خاکستری خنثی و ملایم */
    
    /* فونت و تایپوگرافی */
    --font-primary: 'Vazir', Tahoma, Arial;
    --line-height-base: 1.7;

    /* سیستم سایه */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* شعاع و انیمیشن */
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --transition: all 0.2s ease-in-out;
}

/* --- تنظیمات پایه --- */
body {
    font-family: var(--font-primary);
    direction: rtl;
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: var(--line-height-base);
}
* {
    box-sizing: border-box;
}

/* --- ساختار اصلی --- */
.wrapper {
    max-width: 820px;
    margin: 30px auto;
    padding: 20px; /* پدینگ یکنواخت */
    border: none; /* 🚫 حذف کادر زمخت قبلی */
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-md);
}
header, .footer-bottom {
    background: var(--color-primary);
    color: var(--color-text-light);
    text-align: center;
    padding: 24px 20px;
    border-radius: var(--border-radius);
}
header h1 { 
    margin: 0; 
    font-size: 26px;
    font-weight: 600;
}

/* --- کارت‌ها --- */
.card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border); /* مرز ملایم */
    border-radius: var(--border-radius);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
h3 { 
    margin-top: 0; 
    margin-bottom: 20px;
    color: var(--color-primary-dark);
    font-size: 20px;
    font-weight: 600;
}

/* --- ✨ فرم‌ها (بسیار مدرن) --- */
label { 
    display: block; 
    margin: 12px 0 6px; 
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}
input[type=text], input[type=number], select, textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 14px;
    font-family: var(--font-primary);
    transition: var(--transition);
    background: var(--color-bg-card);
}
/* ✨ حالت Focus حرفه‌ای (بسیار مهم) */
input[type=text]:focus, input[type=number]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-focus);
}

.row {  
    display: flex; 
    flex-wrap: wrap; 
    gap: 16px;
    margin-bottom: 20px;  
}
.col { flex: 1 1 120px; /* حداقل عرض کمی بیشتر */ }

/* --- ✨ دکمه‌ها (بسیار مدرن) --- */
button, .action-btn, .pay-btn, .confirm-otp-btn, .enter-otp-btn {
    padding: 12px 20px;
    border: none;
    border-radius: var(--border-radius);
    background: var(--color-primary);
    color: var(--color-text-light);
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: var(--transition);
    width: 100%; 
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    box-shadow: var(--shadow-sm);
}
/* ✨ افکت Hover حرفه‌ای */
button:hover:not([disabled]), .action-btn:hover:not([disabled]), .pay-btn:hover:not([disabled]), .confirm-otp-btn:hover:not([disabled]) { 
    background: var(--color-primary-dark); 
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
/* ✨ افکت Focus برای دکمه‌ها (Accessibility) */
button:focus, .action-btn:focus, .pay-btn:focus, .confirm-otp-btn:focus, .enter-otp-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-focus);
}
button[disabled] { 
    background: #94a3b8; /* خاکستری بهتر */
    cursor: not-allowed; 
    opacity: 0.7;
    box-shadow: none;
    transform: none;
}

.pay-btn { background: var(--color-success); font-size: 16px; font-weight: 600; }
.pay-btn:hover:not([disabled]) { background: var(--color-success-dark); }
.pay-btn:focus { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3); }

.confirm-otp-btn { background: var(--color-info); }
.confirm-otp-btn:hover:not([disabled]) { background: var(--color-info-dark); }
.confirm-otp-btn:focus { box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.3); }

.enter-otp-btn {
    background: var(--color-warning);
    color: var(--color-warning-text);
    margin-top: 6px;
    font-size: 12px;
    width: auto;
    padding: 6px 12px;
    box-shadow: none;
}
.enter-otp-btn:hover:not([disabled]) { 
    background: var(--color-warning-dark); 
    transform: none; /* دکمه کوچک نیازی به پرش ندارد */
    box-shadow: var(--shadow-sm);
}
.enter-otp-btn:focus { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3); }


/* --- بخش‌های خاص --- */
.phone-section, .code-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}
.phone-section input, .code-row input { flex: 1 1 auto; }
.phone-section button, .code-row button { 
    flex: 0 0 auto;
    width: auto;
}
.phone-section button { min-width: 100px; } /* عرض دکمه ارسال کد */

/*
    تغییر: افزودن مارجین بالا به دکمه ایجاد معامله
*/
#create-tx-btn {
    margin-top: 15px;
}


/* --- هدر کاربر --- */
.user-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.user-header span { 
    font-weight: 600; 
    color: var(--color-text); 
    font-size: 16px;
}
.user-header a { 
    font-size: 13px; 
    color: var(--color-danger); 
    text-decoration: none; 
    font-weight: 500;
}
.user-header a:hover { text-decoration: underline; color: var(--color-danger-dark); }

/* --- کلاس‌های کمکی --- */
.hidden { display: none; }
.muted { color: var(--color-text-muted); font-size: 13px; }
.small-text { font-size: 12px; color: var(--color-text-muted); text-align: right; margin-top: 4px; }

/* --- باکس‌های هشدار (سیستماتیک) --- */
.notice-box {
    padding: 16px;
    border: 1px solid;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}
/*
    تغییر: افزودن 'text-align: center' برای وسط‌چین کردن متن هشدار
*/
.danger, .alert-high, .notice-box.error-box {
    background-color: var(--color-danger-light);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--color-danger-text);
    text-align: center; /* متن هشدارها وسط‌چین شد */
}
.alert-high {
    text-align: center;
    font-weight: 600;
    /* display:none; /* این باید توسط JS کنترل شود */
}
.notice-box.info-box { 
    background-color: var(--color-primary-light); 
    border-color: rgba(59, 130, 246, 0.3); 
    color: var(--color-primary-dark); 
}
.notice-box.success-box { 
    background-color: #d1fae5; 
    border-color: rgba(16, 185, 129, 0.3); 
    color: #065f46; 
}


/* --- سوابق و خلاصه --- */
.history-box {
    display: none;
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-top: 10px;
    font-size: 14px;
}
pre.summary-box {
    font-size: 14px; 
    line-height: var(--line-height-base);
    background: var(--color-bg);
    padding: 16px;
    border-radius: var(--border-radius);
    overflow: auto;
    white-space: pre-wrap;
    font-family: var(--font-primary);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

/* --- فوتر و اینماد --- */
.enamad {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/*
    تغییر: استایل فوتر کپی‌رایت راست‌چین شد
*/
footer {
    text-align: right;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    font-size: 14px;
    color: var(--color-text-muted);
}

/*
    تغییر: استایل فوتر تلگرام راست‌چین شد
*/
.footer-bottom {
    margin-top: 20px; 
    background: #374151; /* خاکستری تیره‌تر و مدرن‌تر از #333 */
    color: var(--color-text-light); 
    text-align: right; 
    padding: 16px; 
    border-radius: var(--border-radius);
    font-size: 14px;
}

/* --- 🚨 کدهای پنل مدیریت (بسیار مدرن) 🚨 --- */

main {
    padding: 15px;
}

#admin-login-section, #admin-panel-section {
    max-width: 800px;
    margin: 30px auto;
    padding: 30px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
}

#admin-login-section form {
    max-width: 400px;
}
#admin-login-section button {
    margin-top: 15px;
}

/* --- ✨ CSS حیاتی برای تب‌ها (طراحی مدرن) --- */
.admin-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border); /* خط اصلی */
    margin-bottom: 24px;
}
.tab-link {
    padding: 10px 16px;
    cursor: pointer;
    background: transparent; /* 🚫 حذف پس‌زمینه قبلی */
    border: none; /* 🚫 حذف کادر قبلی */
    border-bottom: 2px solid transparent; /* کادر پایین برای حالت فعال */
    border-radius: 0; /* 🚫 حذف شعاع */
    margin-left: 8px;
    margin-bottom: -2px; /* برای چسبیدن به خط اصلی */
    font-weight: 500;
    color: var(--color-text-muted);
    transition: var(--transition);
}
.tab-link:hover {
    color: var(--color-text);
}
.tab-link.active {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary); /* ✨ خط فعال نمایان می‌شود */
    font-weight: 600;
}
.tab-content { display: none; }
.tab-content.active { display: block; }
/* -------------------------------------- */


#message-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 24px;
    border-radius: var(--border-radius);
    z-index: 1000;
    font-size: 15px;
    font-weight: 500;
    display: none;
    box-shadow: var(--shadow-lg);
}
#message-container.success {
    background: var(--color-success);
    color: var(--color-text-light);
}
#message-container.error {
    background: var(--color-danger);
    color: var(--color-text-light);
}

/* --- ✨ جدول معاملات ادمین (خوانا و مدرن) --- */
.tx-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
}
.tx-table th, .tx-table td {
    border: 1px solid var(--color-border);
    padding: 14px; /* پدینگ بیشتر برای خوانایی */
    text-align: right;
    vertical-align: middle; /* تراز وسط برای دکمه‌ها */
}
.tx-table th {
    background: var(--color-bg);
    font-weight: 600;
    color: var(--color-text);
}
/* ✨ افکت Zebra-striping برای خوانایی جدول */
.tx-table tr:nth-child(even) {
    background: #fdfdfd;
}

.tx-table .action-btn {
    width: auto;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 5px;
    box-shadow: none;
}
.btn-approve {
    background: var(--color-success);
}
.btn-approve:hover:not([disabled]) { 
    background: var(--color-success-dark); 
    transform: none;
    box-shadow: var(--shadow-sm);
}
.btn-reject {
    background: var(--color-danger);
}
.btn-reject:hover:not([disabled]) { 
    background: var(--color-danger-dark);
    transform: none;
    box-shadow: var(--shadow-sm);
}
}