/* ==========================================================================
   لمّة — الأساس المشترك: ألوان الهوية، الخطوط، والمكوّنات العامة
   (أزرار، حقول، بطاقات، شارات، تنبيهات) المستخدمة في كل الصفحات.
   ========================================================================== */

:root {
  /* الألوان */
  --c-bg: #FAF6EE;
  --c-surface: #FFFFFF;
  --c-surface-2: #F3EDE0;
  --c-ink: #17302B;
  --c-ink-2: #3B524C;
  --c-muted: #5F726C;
  --c-line: #E4DAC6;
  --c-line-strong: #CFC2A6;
  --c-primary: #0F4C43;
  --c-primary-strong: #0A3832;
  --c-primary-soft: #E3EFEA;
  --c-on-primary: #FBF7EE;
  --c-gold: #B58A3C;
  --c-gold-strong: #8A6520;
  --c-gold-soft: #F1E4C4;
  --c-wa: #107C41;
  --c-danger: #B3261E;
  --c-danger-soft: #FBEAE8;
  --c-success: #1A6E48;
  --c-success-soft: #E4F3EB;
  --c-warn: #8A5A00;
  --c-warn-soft: #FBF1D9;

  /* الخطوط */
  --font-ui: 'IBM Plex Sans Arabic', 'Readex Pro Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'El Messiri Variable', 'Amiri', serif;
  --font-script: 'Aref Ruqaa', 'Amiri', serif;

  /* المقاسات */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-1: 0 1px 2px rgba(23, 48, 43, .06), 0 2px 8px rgba(23, 48, 43, .05);
  --shadow-2: 0 4px 12px rgba(23, 48, 43, .08), 0 16px 40px rgba(23, 48, 43, .08);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --container: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------ أدوات ------------------------------ */

.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.muted { color: var(--c-muted); }
.ltr { direction: ltr; unicode-bidi: isolate; }
.nowrap { white-space: nowrap; }
.icon { flex: none; display: inline-block; vertical-align: middle; }

/* ------------------------------ الأزرار ------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 22px;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: inherit;
  font-weight: 600; font-size: 1rem; line-height: 1.3; text-decoration: none;
  cursor: pointer; user-select: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease),
    transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .55; cursor: not-allowed; }

.btn--primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn--primary:hover { background: var(--c-primary-strong); box-shadow: var(--shadow-1); }
.btn--gold { background: var(--c-gold-soft); color: #4A3610; border-color: #E2CC97; }
.btn--gold:hover { background: #EAD7A8; }
.btn--wa { background: var(--c-wa); color: #fff; }
.btn--wa:hover { background: #0C6836; box-shadow: var(--shadow-1); }
.btn--outline { border-color: var(--c-line-strong); background: var(--c-surface); color: var(--c-ink); }
.btn--outline:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn--ghost { color: var(--c-primary); }
.btn--ghost:hover { background: var(--c-primary-soft); }
.btn--danger { background: var(--c-danger-soft); color: var(--c-danger); border-color: #F1C9C5; }
.btn--danger:hover { background: #F6D8D5; }
.btn--sm { min-height: 38px; padding: 6px 14px; font-size: .9rem; }
.btn--lg { min-height: 54px; padding: 12px 30px; font-size: 1.06rem; }
.btn--block { display: flex; width: 100%; }
.btn--icon { min-height: 44px; width: 44px; padding: 0; }

/* ------------------------------ الحقول ------------------------------ */

.field { display: grid; gap: 6px; }
.field + .field { margin-top: 16px; }
.label { font-weight: 600; font-size: .93rem; color: var(--c-ink-2); }
.label .opt { font-weight: 400; color: var(--c-muted); }
.hint { font-size: .85rem; color: var(--c-muted); }
.error { font-size: .88rem; color: var(--c-danger); font-weight: 500; }

.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: 10px 14px;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.7; }
.input::placeholder, .textarea::placeholder { color: #8E9C97; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-muted); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(15, 76, 67, .16);
}
.input[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--c-danger); }
.select {
  appearance: none; padding-inline-end: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F726C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 18px; background-position: left 12px center;
}
[dir='ltr'] .select { background-position: right 12px center; }

.check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--c-primary); flex: none; }

.form-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.form-row > .field + .field { margin-top: 0; }

/* ------------------------------ البطاقات والشارات ------------------------------ */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.card__body { padding: 20px; }
.card__title { font-size: 1.1rem; font-weight: 700; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 999px;
  background: var(--c-surface-2); color: var(--c-ink-2);
  font-size: .8rem; font-weight: 600; line-height: 1.7; white-space: nowrap;
}
.badge--ok { background: var(--c-success-soft); color: var(--c-success); }
.badge--no { background: var(--c-danger-soft); color: var(--c-danger); }
.badge--wait { background: var(--c-warn-soft); color: var(--c-warn); }
.badge--gold { background: var(--c-gold-soft); color: #6B4E14; }
.badge--primary { background: var(--c-primary-soft); color: var(--c-primary); }

.alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--c-line); background: var(--c-surface-2);
  font-size: .95rem;
}
.alert--ok { background: var(--c-success-soft); border-color: #BFE0CE; color: #114B31; }
.alert--err { background: var(--c-danger-soft); border-color: #F1C9C5; color: #8C1D17; }
.alert--info { background: var(--c-primary-soft); border-color: #C4DDD4; color: var(--c-primary-strong); }
.alert--warn { background: var(--c-warn-soft); border-color: #EBD9A6; color: #6B4600; }

/* ------------------------------ الجداول ------------------------------ */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.table th, .table td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.table th { font-weight: 600; font-size: .84rem; color: var(--c-muted); white-space: nowrap; background: var(--c-surface-2); }
.table tr:last-child td { border-bottom: 0; }

/* ------------------------------ الزخارف ------------------------------ */

.orn-crest { width: 168px; height: auto; color: var(--accent, var(--c-gold)); }
.orn-glyph { width: 20px; height: 20px; color: var(--accent, var(--c-gold)); flex: none; }
.orn-divider { display: flex; align-items: center; justify-content: center; gap: 14px; }
.orn-divider span { width: 56px; height: 1px; background: var(--line, var(--c-line-strong)); }

/* ------------------------------ الشعار ------------------------------ */

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-primary); }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name { font-family: var(--font-script); font-size: 1.9rem; line-height: 1; padding-bottom: 4px; }

/* ------------------------------ صفحات الرسائل (404 وغيرها) ------------------------------ */

.msg-page { min-height: 100dvh; display: grid; place-items: center; padding: 32px 20px; }
.msg { max-width: 520px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.msg__code { font-family: var(--font-display); font-size: 4.5rem; line-height: 1; color: var(--c-gold); font-weight: 700; }
.msg__title { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.4; }
.msg__text { color: var(--c-muted); }
.msg__detail {
  max-width: min(92vw, 900px); max-height: 320px; overflow: auto; margin-top: 12px; padding: 14px;
  background: #1c2624; color: #e8efe9; border-radius: var(--radius-sm); font-size: .78rem; text-align: left;
}