/**
 * Saad AI — توحيد الهوية البصرية (كريمي، أخضر ملكي، ذهبي)
 * الخط: Almarai + IBM Plex Sans Arabic (Google). خط «Somar» يُضاف عبر @font-face محلي عند التوفر.
 */
:root {
  /* متوافق مع لوحة شعار سعد */
  --saad-cream: #f8f6f0;
  --saad-cream-deep: #ebe6dc;
  --saad-royal: #142f24;
  --saad-royal-mid: #1b4332;
  --saad-gold: #c4a574;
  --saad-gold-soft: rgba(196, 165, 116, 0.42);
}

body.with-saad-identity {
  --font-body: "Almarai", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --font-display: "Almarai", "IBM Plex Sans Arabic", system-ui, sans-serif;
}

body.admin-identity {
  background: linear-gradient(165deg, var(--saad-cream) 0%, var(--saad-cream-deep) 55%, #e2dcc8 100%) !important;
  color: var(--saad-royal) !important;
}

body.admin-identity .bg-mesh,
body.admin-identity .bg-grid {
  opacity: 0.22;
  filter: saturate(0.85);
}

body.admin-identity .site-header {
  border-bottom-color: var(--saad-gold-soft);
}

body.admin-identity .brand__name,
body.admin-identity .brand__tag {
  color: var(--saad-royal);
}

body.admin-identity .btn--ghost {
  border-color: var(--saad-gold-soft);
  color: var(--saad-royal-mid);
}

body.admin-identity .btn--primary {
  background: linear-gradient(135deg, var(--saad-royal-mid), var(--saad-royal));
  color: var(--saad-cream);
  border: 1px solid var(--saad-gold-soft);
}

.admin-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--saad-gold-soft);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 12px 40px rgba(27, 67, 50, 0.1);
}

.admin-card h2 {
  font-family: var(--font-display, "Almarai", sans-serif);
  font-size: 1.05rem;
  color: var(--saad-royal);
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--saad-gold-soft);
  padding-bottom: 0.5rem;
}

.admin-mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.78rem;
  background: rgba(27, 67, 50, 0.07);
  border-radius: 10px;
  padding: 0.75rem;
  max-height: 220px;
  overflow: auto;
  direction: ltr;
  text-align: left;
}

.admin-table-wrap {
  overflow-x: auto;
  max-height: 320px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.admin-table th,
.admin-table td {
  border: 1px solid var(--saad-gold-soft);
  padding: 0.35rem 0.5rem;
  text-align: start;
}

.admin-table th {
  background: rgba(27, 67, 50, 0.09);
  color: var(--saad-royal);
}

.personal-welcome {
  max-width: 1200px;
  margin: 0 auto 1rem;
  padding: 0.65rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--saad-gold-soft);
  background: linear-gradient(90deg, rgba(27, 67, 50, 0.45), rgba(196, 165, 116, 0.14));
  color: var(--text, #f8f6f0);
  font-size: 0.95rem;
  text-align: center;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.personal-welcome:not([hidden]) {
  animation: personal-welcome-in 0.65s cubic-bezier(0.34, 1.25, 0.64, 1) both;
}

@keyframes personal-welcome-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

html[dir="ltr"] .personal-welcome {
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .personal-welcome {
    transition: none;
    animation: none;
  }

  .personal-welcome:not([hidden]) {
    animation: none;
  }
}