/* =========================================================
   لوحة تحكم صفوة العزائم — أنماط إضافية فوق هوية الموقع
   (يُستخدم بجانب ../assets/style.css لإعادة استخدام الألوان والخطوط)
   ========================================================= */

:root{
  --danger-500:#B6533F;
  --danger-100:#F1DCD6;
  --success-500:#5E7C4F;
  --success-100:#E2E9DA;
  --admin-sidebar-w:260px;
}

html,body{ height:100%; }
body.admin-body{ background:var(--parchment-200); min-height:100vh; }

/* ---------- صفحة تسجيل الدخول ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--ink-900);
  background-image: radial-gradient(circle at 20% 20%, rgba(201,166,104,.08), transparent 45%),
                     radial-gradient(circle at 80% 80%, rgba(201,166,104,.06), transparent 45%);
  padding:24px;
}
.login-card{
  width:100%; max-width:400px; background:var(--parchment-50);
  border:1px solid var(--parchment-200); padding:40px 34px;
  position:relative;
}
.login-card .frame-corner{ width:24px; height:24px; }
.login-brand{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:30px; text-align:center; }
.login-brand .brand-mark{ width:52px; height:52px; }
.login-brand h1{ font-size:22px; color:var(--ink-900); }
.login-brand p{ font-size:13px; color:var(--taupe-600); font-family:var(--font-body); }
.login-form .field{ margin-bottom:18px; }
.login-form .btn{ width:100%; justify-content:center; margin-top:6px; }
.login-error{
  display:none; align-items:center; gap:10px; background:var(--danger-100); color:var(--danger-500);
  padding:12px 14px; font-size:13.5px; margin-bottom:18px; border-inline-start:3px solid var(--danger-500);
}
.login-error.is-visible{ display:flex; }
.login-error svg{ width:17px; height:17px; flex:none; }
.login-foot{ text-align:center; margin-top:24px; font-size:12.5px; color:var(--taupe-600); }
.login-foot a{ color:var(--gold-700); }

/* ---------- هيكل لوحة التحكم ---------- */
.admin-shell{ display:flex; min-height:100vh; }

.admin-sidebar{
  width:var(--admin-sidebar-w); flex:none; background:var(--ink-900); color:var(--parchment-200);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
  transition:transform .25s ease;
}
.admin-sidebar-head{ padding:22px 20px; display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(244,238,221,.12); }
.admin-sidebar-head .brand-mark{ width:36px; height:36px; }
.admin-sidebar-head .brand-text{ color:var(--parchment-50); font-size:18px; }
.admin-sidebar-head .brand-text span{ color:var(--gold-500); }

.admin-nav{ flex:1; padding:18px 12px; display:flex; flex-direction:column; gap:4px; }
.admin-nav-link{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  font-size:14.5px; font-weight:500; color:var(--parchment-200);
  border-inline-start:3px solid transparent; cursor:pointer; background:none; border-radius:2px;
  width:100%; text-align:start; font-family:var(--font-body);
}
.admin-nav-link svg{ width:18px; height:18px; flex:none; opacity:.85; }
.admin-nav-link:hover{ background:rgba(244,238,221,.06); color:var(--parchment-50); }
.admin-nav-link.is-active{ background:rgba(201,166,104,.14); border-inline-start-color:var(--gold-500); color:var(--gold-100); }

.admin-sidebar-foot{ padding:16px; border-top:1px solid rgba(244,238,221,.12); }
.admin-user{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.admin-user-avatar{
  width:34px; height:34px; border:1px solid var(--gold-500); display:flex; align-items:center; justify-content:center;
  color:var(--gold-500); font-family:var(--font-body); font-weight:700; font-size:13px; flex:none;
}
.admin-user-email{ font-size:12.5px; color:var(--parchment-200); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-logout{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid rgba(244,238,221,.25); background:none; color:var(--parchment-200);
  padding:10px; font-size:13.5px; font-family:var(--font-body); cursor:pointer;
}
.btn-logout:hover{ border-color:var(--gold-500); color:var(--gold-500); }
.btn-logout svg{ width:15px; height:15px; }

.admin-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 28px; background:var(--parchment-50); border-bottom:1px solid var(--parchment-200);
  position:sticky; top:0; z-index:10;
}
.admin-topbar h1{ font-size:21px; color:var(--ink-900); }
.sidebar-toggle{
  display:none; width:38px; height:38px; border:1px solid var(--ink-900); background:none;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.sidebar-toggle span{ width:16px; height:2px; background:var(--ink-900); display:block; }

.admin-content{ padding:28px; flex:1; }
.admin-view{ display:none; }
.admin-view.is-active{ display:block; }

/* ---------- بطاقات وعناصر اللوحة ---------- */
.admin-card{ background:var(--parchment-50); border:1px solid var(--parchment-200); padding:26px; }
.admin-card + .admin-card{ margin-top:24px; }
.admin-card h3{ font-size:18px; font-family:var(--font-body); font-weight:700; margin-bottom:18px; color:var(--ink-900); }

.kpi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:24px; }
.kpi-card{ background:var(--parchment-50); border:1px solid var(--parchment-200); padding:22px; border-inline-start:3px solid var(--gold-500); }
.kpi-card .kpi-num{ font-family:var(--font-display); font-size:30px; color:var(--ink-900); display:block; }
.kpi-card .kpi-label{ font-size:13px; color:var(--taupe-600); margin-top:4px; display:block; }
@media (max-width:760px){ .kpi-row{ grid-template-columns:1fr; } }

/* رفع الصورة */
.upload-dropzone{
  border:1.5px dashed var(--parchment-200); background:#fff;
  padding:26px; text-align:center; cursor:pointer; transition:border-color .2s ease;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.upload-dropzone:hover, .upload-dropzone.is-drag{ border-color:var(--gold-500); }
.upload-dropzone svg{ width:30px; height:30px; color:var(--taupe-600); }
.upload-dropzone .dz-text{ font-size:13.5px; color:var(--taupe-600); }
.upload-dropzone .dz-filename{ font-size:13px; color:var(--gold-700); font-weight:700; margin-top:4px; }
.upload-dropzone input[type="file"]{ display:none; }

.upload-progress{ display:none; margin-top:14px; }
.upload-progress.is-visible{ display:block; }
.progress-track{ height:6px; background:var(--parchment-200); width:100%; overflow:hidden; }
.progress-fill{ height:100%; width:0%; background:var(--gold-500); transition:width .2s ease; }
.progress-label{ font-size:12px; color:var(--taupe-600); margin-top:6px; display:block; font-family:var(--font-body); }

/* جدول المشاريع */
.admin-table-wrap{ overflow-x:auto; }
.admin-table{ width:100%; border-collapse:collapse; min-width:560px; }
.admin-table th{
  text-align:start; font-size:12.5px; font-weight:700; color:var(--taupe-600);
  padding:10px 12px; border-bottom:1px solid var(--parchment-200); white-space:nowrap;
}
.admin-table td{ padding:12px; border-bottom:1px solid var(--parchment-200); font-size:14px; vertical-align:middle; }
.admin-table tr:hover td{ background:rgba(201,166,104,.05); }
.admin-thumb{ width:56px; height:42px; object-fit:cover; border:1px solid var(--parchment-200); }
.admin-empty{ text-align:center; color:var(--taupe-600); padding:30px 12px !important; }
.tag-pill{ font-family:var(--font-body); font-weight:700; font-size:11px; color:var(--gold-700); border:1px solid var(--gold-100); padding:3px 9px; white-space:nowrap; }

.btn-icon-danger{
  border:1px solid var(--danger-100); background:none; color:var(--danger-500);
  padding:7px 14px; font-size:12.5px; font-family:var(--font-body); font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.btn-icon-danger:hover{ background:var(--danger-500); color:#fff; border-color:var(--danger-500); }
.btn-icon-danger svg{ width:14px; height:14px; }

/* محرر نصوص الخدمات */
.service-edit-card{ position:relative; }
.service-edit-card .field{ margin-bottom:14px; }
.save-confirm{
  display:inline-flex; align-items:center; gap:6px; margin-inline-start:14px;
  font-size:13px; color:var(--success-500); opacity:0; transition:opacity .2s ease;
}
.save-confirm.is-visible{ opacity:1; }

/* تنبيه إعداد Firebase */
.setup-alert{
  background:var(--gold-100); border-inline-start:3px solid var(--gold-600);
  padding:16px 18px; font-size:13.5px; color:var(--ink-700); margin-bottom:24px; line-height:1.8;
}
.setup-alert code{ background:rgba(46,45,38,.08); padding:2px 6px; font-size:12.5px; }

@media (max-width:900px){
  .admin-sidebar{ position:fixed; right:0; top:0; z-index:50; transform:translateX(100%); }
  html[dir="rtl"] .admin-sidebar{ transform:translateX(100%); }
  .admin-sidebar.is-open{ transform:translateX(0); }
  .sidebar-toggle{ display:flex; }
  .admin-content{ padding:18px; }
  .admin-topbar{ padding:14px 18px; }
}