/* =========================================================================
   Retail Suite — صفحة تسجيل الدخول
   إعادة بناء نظيفة بـ CSS منفصل مع الحفاظ على نفس التصميم الأصلي.
   نظام الألوان مبني على oklch ومستخرَج حرفياً من ملف التصميم المُجمَّع.
   ========================================================================= */

/* ----------------------------- 1) التوكنز ----------------------------- */
:root {
  /* الخطوط */
  --font-sans: "Cairo", system-ui, sans-serif;

  /* الألوان الأساسية (oklch) — مطابقة للأصل */
  --background: oklch(98.5% 0.005 250);
  --foreground: oklch(18% 0.04 265);

  --card: oklch(100% 0 0);
  --card-foreground: oklch(18% 0.04 265);

  --primary: oklch(62% 0.19 256);
  --primary-foreground: oklch(99% 0.003 250);

  --secondary: oklch(96.5% 0.01 250);
  --secondary-foreground: oklch(22% 0.04 265);

  --muted: oklch(96.5% 0.01 250);
  --muted-foreground: oklch(55% 0.03 257);

  --accent: oklch(95% 0.025 256);
  --accent-foreground: oklch(40% 0.15 256);

  --destructive: oklch(60% 0.22 27);
  --destructive-foreground: oklch(99% 0 0);

  --border: oklch(92% 0.013 256);
  --input: oklch(92% 0.013 256);
  --ring: oklch(62% 0.19 256);

  /* لوحة الـ sidebar الداكنة (تُستخدم في خلفية اللوحة الترويجية) */
  --sidebar: oklch(18% 0.04 265);
  --sidebar-foreground: oklch(85% 0.02 250);

  /* نصف القطر الموحّد */
  --radius: 0.75rem;

  /* الظلال — مكافئة لـ shadow / shadow-sm في Tailwind */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* ----------------------------- 2) إعادة الضبط ----------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

/* الأيقونات */
.icon {
  width: 1.5rem;
  height: 1.5rem;
}
.icon--lg { width: 1.5rem;  height: 1.5rem; }   /* h-6 w-6 */
.icon--md { width: 1.25rem; height: 1.25rem; }  /* h-5 w-5 */
.icon--sm { width: 1rem;    height: 1rem; }     /* h-4 w-4 */

/* ----------------------------- 3) التخطيط العام ----------------------------- */
/* شبكة عمود واحد على الموبايل، عمودين على الشاشات الكبيرة (lg ≥ 1024px) */
.auth-layout {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--background);
}

@media (min-width: 1024px) {
  .auth-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ----------------------------- 4) عمود النموذج ----------------------------- */
.auth-form-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem; /* p-6 */
}

@media (min-width: 768px) {
  .auth-form-pane { padding: 3rem; } /* md:p-12 */
}

.auth-form-wrap {
  width: 100%;
  max-width: 28rem; /* max-w-md */
  display: flex;
  flex-direction: column;
  gap: 2rem; /* space-y-8 */
}

/* الشعار */
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* gap-3 */
}

.brand__icon {
  display: grid;
  place-items: center;
  height: 3rem;   /* h-12 */
  width: 3rem;    /* w-12 */
  border-radius: 0.75rem; /* rounded-xl */
  background: var(--primary);
  color: var(--primary-foreground);
}

.brand__text {
  display: flex;
  flex-direction: column;
}

.brand__title {
  font-weight: 700;
  font-size: 1.125rem; /* text-lg */
  line-height: 1.4;
}

.brand__subtitle {
  font-size: 0.75rem; /* text-xs */
  color: var(--muted-foreground);
}

/* العنوان الترحيبي */
.auth-heading__title {
  font-size: 1.875rem; /* text-3xl */
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.025em; /* tracking-tight */
}

.auth-heading__desc {
  margin-top: 0.5rem; /* mt-2 */
  color: var(--muted-foreground);
}

/* النموذج */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* space-y-4 */
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* space-y-2 */
}

.field__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* التسميات */
.label {
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  line-height: 1;
}

.label--normal {
  font-weight: 400;
  cursor: pointer;
}

/* الحقول النصية — مطابقة لمكوّن Input الأصلي */
.input {
  display: flex;
  height: 2.25rem; /* h-9 */
  width: 100%;
  border-radius: 0.375rem; /* rounded-md */
  border: 1px solid var(--input);
  background: transparent;
  padding: 0.25rem 0.75rem; /* py-1 px-3 */
  font-size: 1rem; /* text-base */
  color: var(--foreground);
  box-shadow: var(--shadow-xs);
  transition: color 0.15s, box-shadow 0.15s, border-color 0.15s;
}

@media (min-width: 768px) {
  .input { font-size: 0.875rem; } /* md:text-sm */
}

.input::placeholder {
  color: var(--muted-foreground);
}

.input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--ring);
  border-color: var(--ring);
}

/* صف خانة الاختيار */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* gap-2 */
}

/* خانة الاختيار — مطابقة لمكوّن Checkbox الأصلي */
.checkbox {
  display: grid;
  place-content: center;
  height: 1rem;  /* h-4 */
  width: 1rem;   /* w-4 */
  flex-shrink: 0;
  border-radius: 0.125rem; /* rounded-sm */
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary-foreground);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.checkbox:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--ring);
}

.checkbox[data-state="checked"] {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* المؤشّر (علامة الصح) يظهر فقط عند التحديد */
.checkbox__indicator {
  display: grid;
  place-content: center;
  color: currentColor;
  opacity: 0;
  transition: opacity 0.12s;
}

.checkbox[data-state="checked"] .checkbox__indicator {
  opacity: 1;
}

/* الأزرار — مطابقة لمكوّن Button الأصلي */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border: none;
  border-radius: 0.375rem; /* rounded-md */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--ring);
}

.btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.btn--primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: color-mix(in oklab, var(--primary) 90%, transparent);
}

/* الحجم الافتراضي h-9 px-4 py-2 — والحجم lg أدناه */
.btn--lg {
  height: 2.5rem;   /* h-10 */
  padding: 0 2rem;  /* px-8 */
}

.btn--block {
  width: 100%;
}

/* تذييل النموذج */
.auth-footer {
  text-align: center;
  font-size: 0.875rem; /* text-sm */
  color: var(--muted-foreground);
}

/* الروابط */
.link--xs {
  font-size: 0.75rem;
  color: var(--primary);
}
.link--xs:hover { text-decoration: underline; }

.link--strong {
  color: var(--primary);
  font-weight: 600;
}
.link--strong:hover { text-decoration: underline; }

/* ----------------------------- 5) اللوحة الترويجية ----------------------------- */
/* مخفيّة على الموبايل، تظهر فقط على الشاشات الكبيرة */
.auth-promo-pane {
  display: none;
}

@media (min-width: 1024px) {
  .auth-promo-pane {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 3rem; /* p-12 */
    overflow: hidden;
    /* التدرّج الأساسي — مطابق للأصل */
    background: linear-gradient(
      135deg,
      var(--sidebar) 0%,
      oklch(0.28 0.05 265) 100%
    );
  }
}

/* طبقة التوهّج الإشعاعي (radial glow) فوق الخلفية المتدرّجة */
.auth-promo-pane__glow {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image:
    radial-gradient(circle at 20% 30%, var(--primary) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, var(--primary) 0%, transparent 40%);
}

.auth-promo {
  position: relative;
  z-index: 10;
  max-width: 28rem; /* max-w-md */
  color: var(--sidebar-foreground);
  display: flex;
  flex-direction: column;
  gap: 2rem; /* space-y-8 */
}

.auth-promo__title {
  font-size: 2.25rem; /* text-4xl */
  line-height: 1.1;   /* leading-tight */
  font-weight: 700;
}

.auth-promo__desc {
  margin-top: 0.75rem; /* mt-3 */
  /* sidebar-foreground/70 */
  color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
}

/* قائمة المزايا */
.feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem; /* gap-3 */
}

/* بطاقة الميزة — bg-white/5 border-white/10 backdrop-blur */
.feature-card {
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius);
  padding: 1rem; /* p-4 */
}

.feature-card__inner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem; /* gap-3 */
}

.feature-card__icon {
  display: grid;
  place-items: center;
  height: 2.5rem; /* h-10 */
  width: 2.5rem;  /* w-10 */
  flex-shrink: 0;
  border-radius: 0.5rem; /* rounded-lg */
  background: color-mix(in oklab, var(--primary) 20%, transparent); /* bg-primary/20 */
  color: var(--primary-foreground);
}

.feature-card__title {
  font-weight: 600;
  color: var(--sidebar-foreground);
}

.feature-card__desc {
  font-size: 0.875rem; /* text-sm */
  color: color-mix(in oklab, var(--sidebar-foreground) 60%, transparent);
}