/* ==================================================================
   style.css — نظام الشكاوى والاقتراحات
   الألوان كلها بمتغيرات بالأسفل — غيّر --brand للون علامتك التجارية.
   ================================================================== */

:root{
  /* ===== لون العلامة الأساسي — غيّره من هنا فقط ===== */
  --brand:        #1f6fe0;   /* اللون الأساسي (أزرق احترافي) */
  --brand-dark:   #1551b0;   /* نفس اللون أغمق (للـ hover) */
  --brand-soft:   #eaf2fe;   /* خلفية فاتحة من نفس اللون */

  /* ===== ألوان نوع الطلب ===== */
  --complaint:    #e23b4e;   /* شكوى */
  --complaint-soft:#fdecee;
  --suggestion:   #16a36a;   /* اقتراح */
  --suggestion-soft:#e7f7ef;

  /* ===== ألوان عامة (مأخوذة من ثيم الموقع الفاتح) ===== */
  --bg:        #f0f0f0;
  --surface:   #ffffff;
  --text:      #1b1b1f;
  --muted:     #6b7280;
  --border:    #e4e6eb;
  --radius:    14px;
  --radius-sm: 10px;
  --shadow:    0 10px 35px rgba(20,30,50,.08);
  --shadow-sm: 0 3px 12px rgba(20,30,50,.06);

  --success:   #16a36a;
  --success-soft:#e7f7ef;
  --danger:    #e23b4e;
  --danger-soft:#fdecee;
  --warn:      #d98a00;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Tajawal', system-ui, 'Segoe UI', Tahoma, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand); }
img{ max-width:100%; display:block; }

/* ---------- تخطيط صفحة النموذج ---------- */
.wrap{
  width:100%;
  max-width:660px;
  margin:0 auto;
  padding:26px 16px 40px;
}
.brand{ text-align:center; margin-bottom:18px; }
.brand-logo{
  height:62px; width:auto; margin:0 auto 12px; object-fit:contain;
}
.brand-title{ font-size:26px; font-weight:700; margin:0 0 4px; }
.brand-sub{ color:var(--muted); margin:0; font-size:15px; }

/* ---------- البطاقة والنموذج ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
}
.form .field{ margin-bottom:20px; }
.field-label{
  display:block; font-weight:700; margin-bottom:8px; font-size:15px;
}
.req{ color:var(--danger); font-weight:700; }
.opt{ color:var(--muted); font-weight:400; font-size:13px; }
.hint{ display:block; color:var(--muted); font-size:13px; margin-top:6px; }

.text-input{
  width:100%;
  padding:13px 14px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font:inherit;
  color:var(--text);
  background:#fbfbfc;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.text-input::placeholder{ color:#aab0bb; }
.text-input:focus{
  outline:none;
  border-color:var(--brand);
  background:#fff;
  box-shadow:0 0 0 4px var(--brand-soft);
}
textarea.text-input{ resize:vertical; min-height:120px; }

/* ---------- اختيار نوع الطلب ---------- */
.type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.type-card{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:4px; padding:18px 12px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:#fbfbfc; cursor:pointer;
  transition:border-color .15s, background .15s, transform .1s, box-shadow .15s;
}
.type-card input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.type-icon{ font-size:30px; line-height:1; }
.type-name{ font-weight:700; font-size:17px; }
.type-desc{ font-size:12.5px; color:var(--muted); }
.type-card:hover{ transform:translateY(-1px); }

.type-complaint:has(input:checked){
  border-color:var(--complaint); background:var(--complaint-soft);
  box-shadow:0 0 0 3px var(--complaint-soft);
}
.type-suggestion:has(input:checked){
  border-color:var(--suggestion); background:var(--suggestion-soft);
  box-shadow:0 0 0 3px var(--suggestion-soft);
}
/* احتياط للمتصفحات بدون :has */
.type-card input:checked ~ .type-name{ color:var(--text); }

/* ---------- منطقة رفع الملفات ---------- */
.dropzone{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:26px 16px; text-align:center; cursor:pointer;
  border:2px dashed #c7ccd6; border-radius:var(--radius-sm);
  background:#fafbfc; transition:border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.dragover{
  border-color:var(--brand); background:var(--brand-soft);
}
.dz-icon{ font-size:26px; }
.dz-text{ font-weight:700; }
.dz-hint{ font-size:12.5px; color:var(--muted); }
.dz-input{ display:none; }

.preview-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr));
  gap:10px; margin-top:12px;
}
.preview-item{
  position:relative; border:1px solid var(--border); border-radius:10px;
  overflow:hidden; background:#f4f5f7; aspect-ratio:1/1;
}
.preview-item img, .preview-item video{ width:100%; height:100%; object-fit:cover; }
.preview-file{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; gap:4px; padding:6px; font-size:11px; color:var(--muted); text-align:center;
}
.preview-file .pf-icon{ font-size:24px; }
.preview-remove{
  position:absolute; top:4px; inset-inline-start:4px;
  width:24px; height:24px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,.6); color:#fff; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.preview-remove:hover{ background:var(--danger); }
.preview-name{
  position:absolute; bottom:0; inset-inline:0; padding:3px 5px;
  background:rgba(0,0,0,.55); color:#fff; font-size:10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- الكابتشا ---------- */
.captcha-field .g-recaptcha{ display:inline-block; }

/* ---------- زر الإرسال ---------- */
.btn-submit{
  width:100%; padding:15px; border:none; border-radius:var(--radius-sm);
  background:var(--brand); color:#fff; font:inherit; font-weight:700; font-size:17px;
  cursor:pointer; transition:background .15s, transform .1s, box-shadow .15s;
  box-shadow:0 6px 18px rgba(31,111,224,.28);
}
.btn-submit:hover{ background:var(--brand-dark); }
.btn-submit:active{ transform:translateY(1px); }
.btn-submit:disabled{ opacity:.6; cursor:not-allowed; }
.form-foot{ text-align:center; color:var(--muted); font-size:12.5px; margin:12px 0 0; }

/* ---------- التنبيهات ---------- */
.alert{
  border-radius:var(--radius); padding:16px 18px; margin-bottom:18px;
  display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow-sm);
}
.alert-success{ background:var(--success-soft); border:1px solid #b6e8cf; color:#0f6c46; }
.alert-error{ background:var(--danger-soft); border:1px solid #f5c2c8; color:#a3232f; }
.alert ul{ margin:4px 0 0; padding-inline-start:20px; }
.btn-link{
  align-self:flex-start; margin-top:6px; background:var(--surface);
  padding:8px 16px; border-radius:8px; text-decoration:none; font-weight:700;
  border:1px solid currentColor;
}

.page-foot{ text-align:center; color:var(--muted); font-size:13px; margin-top:22px; }

/* ==================================================================
   لوحة التحكم (admin)
   ================================================================== */
.admin-body{ background:var(--bg); }
.admin-top{
  background:var(--surface); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.admin-top .inner{
  max-width:1100px; margin:0 auto; padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.admin-top .a-brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.admin-top .a-brand img{ height:34px; }
.admin-nav{ display:flex; align-items:center; gap:14px; font-size:14px; }
.admin-nav a{ text-decoration:none; color:var(--muted); font-weight:500; }
.admin-nav a:hover{ color:var(--brand); }
.admin-main{ max-width:1100px; margin:0 auto; padding:22px 18px 50px; }

/* بطاقات الإحصائيات */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.stat{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow-sm);
}
.stat .s-num{ font-size:28px; font-weight:700; }
.stat .s-lab{ color:var(--muted); font-size:13px; }
.stat.is-new .s-num{ color:var(--brand); }
.stat.is-complaint .s-num{ color:var(--complaint); }
.stat.is-suggestion .s-num{ color:var(--suggestion); }

/* شريط الفلاتر */
.filters{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:18px; display:flex; flex-wrap:wrap; gap:10px; align-items:end;
  box-shadow:var(--shadow-sm);
}
.filters .f-group{ display:flex; flex-direction:column; gap:4px; }
.filters label{ font-size:12px; color:var(--muted); font-weight:700; }
.filters select, .filters input{
  padding:9px 12px; border:1.5px solid var(--border); border-radius:8px; font:inherit; background:#fbfbfc;
}
.filters .btn{
  padding:9px 18px; border:none; border-radius:8px; background:var(--brand); color:#fff;
  font:inherit; font-weight:700; cursor:pointer;
}
.filters .btn.ghost{ background:#eef0f3; color:var(--text); }

/* الجدول */
.table-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.table-wrap{ overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; font-size:14px; }
table.data th, table.data td{ padding:12px 14px; text-align:start; border-bottom:1px solid var(--border); }
table.data th{ background:#f7f8fa; font-weight:700; color:#3a4150; white-space:nowrap; }
table.data tr:hover td{ background:#fbfcfd; }
table.data td.cell-details{ max-width:320px; color:var(--muted); }
.truncate{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* الشارات */
.badge{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:12.5px; font-weight:700; }
.badge.t-complaint{ background:var(--complaint-soft); color:var(--complaint); }
.badge.t-suggestion{ background:var(--suggestion-soft); color:var(--suggestion); }
.badge.s-new{ background:var(--brand-soft); color:var(--brand); }
.badge.s-in_progress{ background:#fff4e0; color:var(--warn); }
.badge.s-resolved{ background:var(--success-soft); color:var(--success); }
.badge.count{ background:#eef0f3; color:var(--text); }

.row-link{ color:var(--brand); text-decoration:none; font-weight:700; }
.muted{ color:var(--muted); }
.empty{ text-align:center; padding:40px 20px; color:var(--muted); }

/* الترقيم */
.pager{ display:flex; gap:6px; justify-content:center; padding:16px; flex-wrap:wrap; }
.pager a, .pager span{
  padding:7px 13px; border-radius:8px; border:1px solid var(--border);
  text-decoration:none; color:var(--text); font-size:14px; background:#fff;
}
.pager .current{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* تسجيل الدخول */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:30px; width:100%; max-width:380px;
}
.login-card h1{ font-size:20px; margin:0 0 4px; text-align:center; }
.login-card .sub{ text-align:center; color:var(--muted); margin:0 0 20px; font-size:14px; }
.login-card .field{ margin-bottom:14px; }

/* صفحة التفاصيل */
.detail-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.detail-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:20px 22px;
}
.detail-card h2{ font-size:16px; margin:0 0 14px; }
.kv{ display:grid; grid-template-columns:130px 1fr; gap:8px 14px; font-size:15px; }
.kv dt{ color:var(--muted); font-weight:700; }
.kv dd{ margin:0; }
.detail-text{ white-space:pre-wrap; line-height:1.8; }
.attach-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.attach{
  border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#f4f5f7;
}
.attach .media{ width:100%; aspect-ratio:4/3; object-fit:cover; background:#000; }
.attach .bar{ display:flex; justify-content:space-between; align-items:center; padding:7px 9px; font-size:12px; gap:6px; }
.attach .bar a{ text-decoration:none; font-weight:700; }
.back-link{ display:inline-block; margin-bottom:16px; color:var(--muted); text-decoration:none; }
.status-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.status-form select{ padding:8px 12px; border:1.5px solid var(--border); border-radius:8px; font:inherit; }
.status-form button{ padding:8px 16px; border:none; border-radius:8px; background:var(--brand); color:#fff; font:inherit; font-weight:700; cursor:pointer; }

/* ---------- استجابة الجوال ---------- */
@media (max-width:640px){
  .stats{ grid-template-columns:1fr 1fr; }
  .kv{ grid-template-columns:100px 1fr; }
  .brand-title{ font-size:22px; }
}
@media (max-width:420px){
  .type-grid{ grid-template-columns:1fr; }
}