/* ─────────────────────────────────────────────────────
   base.css — CSS variables, reset, typography
   (متناسق مع التطبيق الرئيسي / app-shell-theme)
   ───────────────────────────────────────────────────── */

:root {
  /* Brand — indigo palette (matches main app) */
  --primary:        #4f46e5;
  --primary-dark:   #4338ca;
  --primary-light:  #eef2ff;
  --accent:         #6366f1;
  --danger:         #ef4444;
  --danger-light:   #fef2f2;
  --warning:        #d97706;
  --warning-light:  #fffbeb;
  --info:           #2563eb;
  --info-light:     #eff6ff;
  --success:        #10b981;

  /* Shell tokens */
  --shell-bg:           #ffffff;
  --shell-border:       #e8edf5;
  --shell-text:         #1e293b;
  --shell-muted:        #64748b;
  --shell-accent:       #4f46e5;
  --shell-accent-soft:  #eef2ff;
  --shell-text-dark:    #0f172a;

  /* Surfaces */
  --surface:        #ffffff;
  --surface-2:      #f8fafc;
  --bg:             #f1f5f9;
  --border:         #e8edf5;
  --border-dark:    #cbd5e1;

  /* Text */
  --text:           #1e293b;
  --text-secondary: #475569;
  --text-muted:     #64748b;
  --text-light:     #94a3b8;

  /* Sidebar */
  --sidebar-bg:     #ffffff;
  --sidebar-width:  220px;
  --sidebar-item-hover:  #f1f5f9;
  --sidebar-item-active: #eef2ff;
  --sidebar-text:   #0f172a;
  --sidebar-text-active: #4f46e5;

  /* Header */
  --header-height:  52px;
  --header-bg:      #ffffff;

  /* Tabbar (mobile) */
  --tabbar-height:  62px;
  --safe-bottom:    env(safe-area-inset-bottom, 0px);
  --tabbar-total:   calc(var(--tabbar-height) + var(--safe-bottom));

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm:  0 1px 4px rgba(15, 23, 42, 0.05);
  --shadow-md:  0 4px 18px rgba(15, 23, 42, 0.06);
  --shadow-lg:  0 8px 30px rgba(15, 23, 42, 0.10);

  /* Transition */
  --transition: .2s ease;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  animation: fadeInPage .3s ease-in forwards;
}

@keyframes fadeInPage {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  font-family: 'Tajawal', sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  background: linear-gradient(160deg, #eef2ff 0%, #f8fafc 45%, #f1f5f9 100%);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

html[lang="en"] body {
  font-family: 'Open Sans', sans-serif;
}

img { display: block; max-width: 100%; }
a  { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}
button { cursor: pointer; }

/* Scrollbars */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(79, 70, 229, 0.22); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(79, 70, 229, 0.35); }

/* Selection */
::selection { background: var(--primary-light); color: var(--primary-dark); }

/* RTL/LTR helpers */
html[lang="ar"] body { direction: rtl; }
html[lang="en"] body { direction: ltr; }

/* Skeleton animation */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}

/* Fade-in */
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.fade-in { animation: fadeIn .25s ease; }