/* =====================================================================
   LearnSpring Design System — فاز ۱ رودمپ
   منبع واحد رنگ/تایپوگرافی/فاصله‌گذاری برای همه‌ی پنل‌ها (دانشجو/مدرس/
   ادمین/برنامه‌نویس) و صفحات عمومی. هدف: خروج از ظاهر «بوت‌کمپ کدنویسی»
   و یک هویت بصری آکادمیک و خنثی نسبت به حوزه (فیزیک/شیمی/ریاضی/برنامه‌نویسی/...)
   ===================================================================== */
:root{
  --ls-primary:#4f46e5;
  --ls-primary-dark:#4338ca;
  --ls-accent:#0891b2;
  --ls-bg:#f6f7fb;
  --ls-card:#ffffff;
  --ls-ink:#1e1b2e;
  --ls-ink-soft:#6b7280;
  --ls-line:#eef0f4;
  --ls-radius:16px;
  --ls-radius-sm:10px;
  --ls-shadow:0 10px 30px rgba(30,27,46,.06);
  --ls-success:#059669;
  --ls-warning:#d97706;
  --ls-danger:#dc2626;
  --ls-font:'Vazirmatn',sans-serif;
}
.ls-reset,.ls-reset *{margin:0;padding:0;box-sizing:border-box;font-family:var(--ls-font);}
.ls-body{background:var(--ls-bg);color:var(--ls-ink);min-height:100vh;}
.ls-topbar{background:#fff;border-bottom:1px solid var(--ls-line);padding:16px 30px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;flex-wrap:wrap;gap:10px;}
.ls-topbar .ls-brand{font-weight:800;color:var(--ls-primary);font-size:16px;display:flex;align-items:center;gap:8px;}
.ls-topbar nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.ls-topbar nav a{padding:8px 14px;border-radius:10px;font-size:13px;color:var(--ls-ink-soft);text-decoration:none;}
.ls-topbar nav a.active,.ls-topbar nav a:hover{background:#eef2ff;color:var(--ls-primary);}
.ls-container{max-width:1120px;margin:0 auto;padding:28px 20px;}
.ls-card{background:var(--ls-card);border:1px solid var(--ls-line);border-radius:var(--ls-radius);padding:22px;}
.ls-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:10px;font-size:13px;font-weight:600;border:none;cursor:pointer;text-decoration:none;}
.ls-btn-primary{background:var(--ls-primary);color:#fff;}
.ls-btn-primary:hover{background:var(--ls-primary-dark);}
.ls-btn-outline{background:#fff;border:1px solid var(--ls-line);color:var(--ls-ink);}
.ls-btn-outline:hover{border-color:var(--ls-primary);color:var(--ls-primary);}
.ls-btn-danger{background:#fef2f2;color:var(--ls-danger);border:1px solid #fecaca;}
.ls-badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;}
.ls-badge-pending{background:#fef9c3;color:#854d0e;}
.ls-badge-success{background:#dcfce7;color:#166534;}
.ls-badge-danger{background:#fee2e2;color:#991b1b;}
.ls-badge-info{background:#e0e7ff;color:#3730a3;}
.ls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;}
.ls-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--ls-radius);overflow:hidden;}
.ls-table th,.ls-table td{padding:12px 14px;text-align:right;font-size:13px;border-bottom:1px solid var(--ls-line);}
.ls-table th{background:#fafafe;color:var(--ls-ink-soft);font-weight:700;}
.ls-input,.ls-select,.ls-textarea{width:100%;padding:10px 12px;border:1px solid var(--ls-line);border-radius:10px;font-size:13px;font-family:var(--ls-font);background:#fff;}
.ls-label{font-size:12.5px;color:var(--ls-ink-soft);margin-bottom:6px;display:block;font-weight:600;}
.ls-field{margin-bottom:16px;}
.ls-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:#f6f7fb;color:var(--ls-ink);text-decoration:none;}
.ls-bell .dot{position:absolute;top:4px;left:4px;background:var(--ls-danger);color:#fff;font-size:9.5px;font-weight:800;min-width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 3px;}

/* ---------- کانتینر باریک‌تر برای صفحات تک‌ستونه/فرم‌محور ---------- */
.ls-container-narrow{max-width:720px;margin:0 auto;padding:28px 20px;}

/* ---------- سربرگ صفحه: عنوان + دکمه‌ی اکشن ---------- */
.ls-page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px;}
.ls-page-head h1{font-size:19px;}

/* ---------- تب‌های فیلتر (pill tabs) ---------- */
.ls-tabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap;}
.ls-tab{padding:8px 16px;border-radius:999px;font-size:13px;text-decoration:none;background:#fff;color:var(--ls-ink-soft);border:1px solid var(--ls-line);}
.ls-tab.active{background:var(--ls-primary);color:#fff;border-color:var(--ls-primary);}
.ls-tab .ls-tab-count{display:inline-block;margin-inline-start:4px;background:rgba(0,0,0,.08);border-radius:10px;padding:1px 7px;font-size:11px;}
.ls-tab.active .ls-tab-count{background:rgba(255,255,255,.25);}

/* ---------- جعبه‌ی یادداشت/توضیح (تایید نیاز به اصلاح / علت رد و ...) ---------- */
.ls-note{background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-size:12.5px;padding:10px 12px;border-radius:10px;margin-top:10px;line-height:1.8;}
.ls-note-danger{background:#fee2e2;border:1px solid #fecaca;color:#991b1b;font-size:12.5px;padding:10px 12px;border-radius:10px;margin-top:10px;line-height:1.8;}

/* ---------- ردیف آیتم (لیست دوره/درخواست/جلسه و ...) ---------- */
.ls-row{background:#fafbfe;border:1px solid var(--ls-line);border-radius:14px;padding:18px;margin-bottom:12px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start;}
.ls-row-info{flex:1;min-width:220px;}
.ls-row-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* ---------- حالت خالی ---------- */
.ls-empty{text-align:center;color:#9ca3af;padding:40px 20px;font-size:13px;}

/* ---------- ریسپانسیو عمومی (فاز ۱ رودمپ) ---------- */
@media (max-width:768px){
  .ls-container{padding:18px 14px;}
  .ls-topbar{padding:12px 16px;}
  .ls-topbar nav{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
  .ls-topbar nav a{white-space:nowrap;}
  .ls-card{padding:16px;}
}
@media (max-width:640px){
  .ls-table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
  .ls-table thead, .ls-table tbody, .ls-table tr{display:table;width:100%;table-layout:auto;}
}

/* =====================================================================
   نوار بالای پنل‌ها (student/teacher/admin/developer) — بازبینی
   ---------------------------------------------------------------------
   هدف تسک: نوار بالای همه‌ی پنل‌ها هنگام اسکرول «ثابت و پررنگ» بماند و
   روی گوشی هم به‌جای محو شدن، همیشه پیدا باشد؛ و اسکرول افقیِ لینک‌ها
   روی موبایل روان باشد و «سرنخِ ادامه داشتن» بدهد. این بلوک عمداً در
   انتهای فایل و به‌صورت override نوشته شده تا قوانین بالاتر دست‌نخورده
   بمانند و بازبینی تغییرات ساده باشد.
   ===================================================================== */
.ls-topbar{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index:100;                     /* از هر محتوای صفحه بالاتر */
  background:#fff;                 /* مات و پررنگ — نه شفاف */
  box-shadow:0 1px 0 var(--ls-line), 0 10px 24px -20px rgba(30,27,46,.5);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;      /* جلوگیری از پرش/لرزش سطرِ sticky در وب‌ویو */
}
/* لوگوی برند به‌جای ایموجی — همه‌ی پنل‌ها یک هویت */
.ls-topbar .ls-brand{flex:none;min-width:0;}
.ls-brand-logo{
  height:20px;
  width:auto;
  max-width:26px;
  object-fit:contain;
  flex:none;
  display:inline-block;
  vertical-align:middle;
}

@media (max-width:768px){
  /* برند و منو در یک ردیف بمانند تا ارتفاع نوار ثابت و قابل‌پیش‌بینی باشد */
  .ls-topbar{
    flex-wrap:nowrap;
    align-items:center;
    gap:12px;
    padding:10px 14px;
  }
  .ls-topbar .ls-brand{font-size:14px;}
  .ls-brand-logo{height:18px;max-width:22px;}

  /* فقط همین نوار لینک‌ها به‌صورت افقی اسکرول شود — نه کل نوار */
  .ls-topbar nav{
    flex:1 1 auto;
    width:auto;
    min-width:0;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:auto;    /* حذف momentum قدیمیِ iOS که باعث لرزشِ نوارِ sticky و گیر کردن اسکرول می‌شد */
    overscroll-behavior-x:contain;      /* اسکرول افقی به صفحه سرایت نکند → روان‌تر */
    scrollbar-width:thin;               /* Firefox: یک اسکرول‌بارِ نازکِ همیشه‌پیدا به‌عنوان سرنخ */
    scrollbar-color:var(--ls-line) transparent;
    padding-bottom:3px;
    /* محوشدگیِ لبه‌ی چپ (سمت سرریز در RTL) = «این‌طرف‌تر لینک‌های بیشتری هست» */
    -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 22px),transparent);
            mask-image:linear-gradient(to left,#000 calc(100% - 22px),transparent);
  }
  .ls-topbar nav::-webkit-scrollbar{height:3px;}
  .ls-topbar nav::-webkit-scrollbar-track{background:transparent;}
  .ls-topbar nav::-webkit-scrollbar-thumb{background:var(--ls-line);border-radius:99px;}
  .ls-topbar nav a{white-space:nowrap;flex:none;}
}