/* admin_style.css */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
:root {
    --primary-color: #58a6ff;
    --secondary-color: #0d1117;
    --bg-color: #161b22;
    --text-color: #c9d1d9;
    --text-muted: #8b949e;
    --border-color: #30363d;
    --input-bg: #0d1117;
    --success-color: #238636;
    --danger-color: #da3633;
    --warning-color: #e3b341;
    --font-family: 'Vazirmatn', sans-serif;
    --border-radius: 8px;
    --box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    --transition-speed: 0.3s;
}
{ box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-family); background-color: var(--secondary-color); color: var(--text-color); line-height: 1.7; direction: rtl; }
.dashboard-container { max-width: 1200px; margin: 40px auto; padding: 20px; }
.dashboard-header { text-align: center; margin-bottom: 40px; }
.dashboard-header h1 { color: var(--primary-color); font-size: 2.2rem; font-weight: 700; }
.dashboard-header p { color: var(--text-muted); font-size: 1.1rem; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 25px; }
.product-card { background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); display: flex; flex-direction: column; transition: transform var(--transition-speed), box-shadow var(--transition-speed); }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
.card-header { padding: 15px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.card-header h3 { font-size: 1.2rem; margin: 0; color: var(--text-color); }
.status-badge { padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; color: #fff; }
.status-pending { background-color: var(--warning-color); color: #000; }
.card-body { padding: 20px; flex-grow: 1; }
.info-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 0.95rem; }
.info-row .label { color: var(--text-muted); }
.info-row .value { font-weight: 500; }
.card-footer { padding: 15px 20px; border-top: 1px solid var(--border-color); display: flex; gap: 10px; }
.btn { padding: 10px 18px; border: none; border-radius: 6px; font-family: var(--font-family); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: background-color var(--transition-speed), opacity var(--transition-speed); }
.btn:hover:not(:disabled) { opacity: 0.9; }
.btn-primary { background-color: var(--primary-color); color: #fff; flex-grow: 1; }
.btn-success { background-color: var(--success-color); color: #fff; }
.btn-danger { background-color: var(--danger-color); color: #fff; }
.btn-secondary { background-color: #30363d; color: var(--text-color); border: 1px solid #4d545d; }
.btn:disabled { background-color: #21262d; color: #8b949e; cursor: not-allowed; opacity: 0.7; }
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); align-items: center; justify-content: center; padding: 20px; }
.modal-content { background-color: var(--bg-color); margin: auto; padding: 0; border: 1px solid var(--border-color); border-radius: var(--border-radius); width: 90%; max-width: 800px; animation: slideIn 0.4s; }
@keyframes slideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header { padding: 15px 25px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.modal-header h2 { color: var(--primary-color); }
.modal-close { background: none; border: none; color: var(--text-muted); font-size: 2rem; cursor: pointer; transition: color var(--transition-speed); }
.modal-close:hover { color: var(--text-color); }
.modal-body { padding: 25px; max-height: 60vh; overflow-y: auto; }
.tab-nav { display: flex; border-bottom: 2px solid var(--border-color); margin-bottom: 20px; }
.tab-btn { padding: 10px 20px; border: none; background-color: transparent; cursor: pointer; font-family: var(--font-family); font-size: 1rem; color: var(--text-muted); border-bottom: 3px solid transparent; transition: color var(--transition-speed), border-color var(--transition-speed); }
.tab-btn.active { color: var(--primary-color); border-color: var(--primary-color); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.data-pair { margin-bottom: 18px; }
.data-label { font-weight: 700; color: var(--text-muted); display: block; margin-bottom: 5px; }
.data-value { font-weight: 400; color: var(--text-color); }
#modal-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-item { background-color: rgba(88, 166, 255, 0.15); color: var(--primary-color); padding: 4px 12px; border-radius: 20px; font-size: 0.9rem; }
.image-gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.gallery-img { width: 100px; height: 100px; object-fit: cover; border-radius: var(--border-radius); border: 1px solid var(--border-color); }
.modal-footer { padding: 20px 25px; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.rejection-section { flex-grow: 1; }
.rejection-section input { width: 100%; padding: 10px; background-color: var(--input-bg); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-color); font-family: var(--font-family); }
.action-buttons { display: flex; gap: 10px; }
.confirmation-modal .modal-content { max-width: 450px; text-align: center; }
.confirmation-modal .modal-body { padding: 35px 25px; }
.confirmation-modal h3 { font-size: 1.5rem; color: var(--text-color); margin-bottom: 15px; }
.confirmation-modal p { font-size: 1rem; color: var(--text-muted); line-height: 1.8; }
.confirmation-modal .modal-footer { justify-content: center; gap: 15px; }
.review-status { display: inline-flex; gap: 8px; margin-right: 10px; vertical-align: middle; }
.review-icon { cursor: pointer; font-style: normal; font-weight: bold; opacity: 0.4; transition: opacity 0.2s, transform 0.2s; padding: 0 4px; }
.review-icon:hover { opacity: 0.7; transform: scale(1.2); }
.review-icon.approve { color: var(--success-color); }
.review-icon.reject { color: var(--danger-color); }
.review-icon.selected { opacity: 1; transform: scale(1.1); }