/* =========================================================================
   Yeda LMS – מדריך למדריכים | עיצוב בשפה הגרפית של Yeda
   ========================================================================= */

:root{
  /* Yeda brand tokens (מתוך yeda-college) */
  --navy:#000F61; --navy-2:#101a6e; --blue:#0A59EB; --blue-2:#2E72F0; --blue-l:#76A4F9;
  --chip:#000F61; --chip-2:#101a6e; /* רקע מלא לצ'יפים/Hero/שלבים (טקסט לבן) */
  --blue-100:#D6E3FC; --blue-50:#E9F1FF; --bg:#F6F9FF; --white:#fff;
  --ink:#1B1B1E; --muted:#2f3552; --soft:#6b7392; --line:#e6eaf4;
  --card:#fff; --sidebar:#fff; --code:#eef3ff;
  --sh-sm:0 2px 8px rgba(0,15,97,.06);
  --sh:0 14px 40px -16px rgba(0,15,97,.18);
  --sh-lg:0 30px 70px -28px rgba(0,15,97,.28);
  --ok:#0f7a44; --ok-bg:#e7f7ee; --ok-line:#b6e6cb;
  --warn:#9a5b00; --warn-bg:#fff5e6; --warn-line:#ffe1ad;
  --tip:#0a4bc4; --tip-bg:#eaf1ff; --tip-line:#c9dbff;
  --sidebar-w:300px; --topbar-h:66px;
}
:root[data-theme="dark"], :root:not([data-theme="light"]){
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1020; --card:#121a30; --sidebar:#0e1526; --code:#0e1830;
    --ink:#eaf0ff; --muted:#b7c1e0; --soft:#8b96b8; --line:#243050;
    --navy:#dce6ff; --blue:#5b8dff; --blue-2:#79a3ff; --blue-50:#16203a; --blue-100:#1b2742;
    --chip:#243879; --chip-2:#2d3f86; /* רקע מלא כהה — טקסט לבן קריא */
    --sh-sm:0 2px 8px rgba(0,0,0,.4); --sh:0 16px 44px -18px rgba(0,0,0,.6); --sh-lg:0 30px 70px -28px rgba(0,0,0,.7);
    --ok-bg:#0f2a1c; --ok-line:#1e5638; --ok:#5fd699;
    --warn-bg:#2a2007; --warn-line:#5a4711; --warn:#f2c465;
    --tip-bg:#111f3d; --tip-line:#24396b; --tip:#8fb2ff;
    --code:#0e1830;
  }
}
:root[data-theme="dark"]{
  --bg:#0b1020; --card:#121a30; --sidebar:#0e1526; --code:#0e1830;
  --ink:#eaf0ff; --muted:#b7c1e0; --soft:#8b96b8; --line:#243050;
  --navy:#dce6ff; --blue:#5b8dff; --blue-2:#79a3ff; --blue-50:#16203a; --blue-100:#1b2742;
  --chip:#243879; --chip-2:#2d3f86;
  --sh-sm:0 2px 8px rgba(0,0,0,.4); --sh:0 16px 44px -18px rgba(0,0,0,.6); --sh-lg:0 30px 70px -28px rgba(0,0,0,.7);
  --ok-bg:#0f2a1c; --ok-line:#1e5638; --ok:#5fd699;
  --warn-bg:#2a2007; --warn-line:#5a4711; --warn:#f2c465;
  --tip-bg:#111f3d; --tip-line:#24396b; --tip:#8fb2ff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; direction:rtl; font-family:'Rubik',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{color:var(--blue); text-decoration:none}
b{font-weight:700}
::selection{background:var(--blue-100); color:var(--navy)}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; height:var(--topbar-h);
  display:flex; align-items:center; gap:16px; padding:0 20px;
  background:color-mix(in srgb,var(--card) 88%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0}
.brand img{height:34px; width:auto; display:block}
:root[data-theme="dark"] .brand img, .dark-logo{filter:brightness(0) invert(1)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .brand img{filter:brightness(0) invert(1)} }
.brand .bt{font-weight:800; font-size:15px; color:var(--navy); line-height:1.1}
.brand .bt small{display:block; font-weight:500; font-size:11.5px; color:var(--soft)}

.search{position:relative; flex:1; max-width:420px; margin-inline-start:auto}
.search input{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--ink);
  background:var(--bg); border:1.5px solid var(--line); border-radius:999px;
  padding:10px 40px 10px 16px; transition:.18s;
}
.search input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-50)}
.search .si{position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%); color:var(--soft); pointer-events:none}
.search input::placeholder{color:var(--soft)}

.iconbtn{
  width:40px; height:40px; border-radius:11px; border:1.5px solid var(--line);
  background:var(--card); color:var(--muted); display:grid; place-items:center; cursor:pointer; transition:.18s; flex-shrink:0;
}
.iconbtn:hover{border-color:var(--blue); color:var(--blue)}
.menu-toggle{display:none}

/* ---------- Layout ---------- */
.shell{display:flex; align-items:flex-start}
.sidebar{
  position:sticky; top:var(--topbar-h); align-self:flex-start;
  width:var(--sidebar-w); flex-shrink:0; height:calc(100vh - var(--topbar-h));
  overflow-y:auto; background:var(--sidebar); border-inline-start:1px solid var(--line);
  padding:22px 14px 60px;
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:var(--line); border-radius:8px}

/* track filter */
.tracks{display:flex; gap:5px; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:4px; margin-bottom:20px}
.tracks button{
  flex:1; border:0; background:none; font-family:inherit; font-weight:700; font-size:13px; color:var(--muted);
  padding:8px 6px; border-radius:999px; cursor:pointer; transition:.18s; white-space:nowrap;
}
.tracks button.active{background:var(--chip); color:#fff}
:root[data-theme="dark"] .tracks button.active, .tracks button.active{color:#fff}

.nav-group{margin-bottom:18px}
.nav-group > .gl{
  font-size:11.5px; font-weight:800; letter-spacing:.04em; color:var(--soft);
  text-transform:uppercase; padding:0 12px 8px; display:flex; align-items:center; gap:7px;
}
.nav-link{
  display:flex; align-items:center; gap:11px; width:100%; text-align:start;
  border:0; background:none; font-family:inherit; font-size:14.5px; font-weight:500; color:var(--muted);
  padding:9px 12px; border-radius:11px; cursor:pointer; transition:.15s; line-height:1.3;
}
.nav-link:hover{background:var(--blue-50); color:var(--navy)}
.nav-link.active{background:var(--chip); color:#fff; font-weight:600; box-shadow:var(--sh-sm)}
.nav-link .ni{flex-shrink:0; opacity:.9; display:grid; place-items:center}
.nav-link.active .ni{color:#fff}
.nav-link.hidden{display:none}
.nav-group.hidden{display:none}

/* ---------- Content ---------- */
main{flex:1; min-width:0; padding:34px clamp(18px,4vw,60px) 120px; max-width:920px; margin:0 auto}
.hero{
  background:radial-gradient(1100px 500px at 90% -20%,var(--chip-2),var(--chip) 62%);
  color:#fff; border-radius:24px; padding:38px 34px; margin-bottom:34px; box-shadow:var(--sh); position:relative; overflow:hidden;
}
.hero::after{content:""; position:absolute; inset-inline-end:-60px; bottom:-80px; width:280px; height:280px;
  background:radial-gradient(circle,rgba(118,164,249,.35),transparent 70%); pointer-events:none}
.hero h1{margin:0 0 12px; font-size:clamp(26px,4vw,38px); color:#fff; font-weight:800; line-height:1.2}
.hero p{margin:0; color:#dbe6ff; font-size:16.5px; max-width:640px}
.hero .pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; position:relative}
.hero .pills span{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff;
  font-size:13px; font-weight:600; padding:6px 14px; border-radius:999px}

.crumb{font-size:13px; color:var(--soft); font-weight:600; margin-bottom:10px}
.crumb .badge{display:inline-block; margin-inline-start:8px; padding:2px 10px; border-radius:999px; font-size:11.5px}
.badge-user{background:var(--blue-50); color:var(--blue)}
.badge-admin{background:#f0eaff; color:#6b3fd4}
.badge-both{background:var(--ok-bg); color:var(--ok)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .badge-admin{background:#241a45; color:#b79bff}}
:root[data-theme="dark"] .badge-admin{background:#241a45; color:#b79bff}

.sec-title{font-size:clamp(24px,3.4vw,32px); font-weight:800; color:var(--navy); margin:0 0 14px; display:flex; align-items:center; gap:14px}
.sec-title .ic{width:50px; height:50px; border-radius:14px; background:linear-gradient(150deg,var(--blue),var(--blue-2)); color:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow:0 10px 24px -10px rgba(10,89,235,.6)}
.sec-title .ic svg{width:26px; height:26px}
.lead{font-size:17.5px; color:var(--muted); margin:0 0 26px; line-height:1.7}

.sub{font-size:19px; font-weight:800; color:var(--navy); margin:32px 0 14px}
.para{margin:0 0 16px; color:var(--ink)}

/* steps */
ol.steps{list-style:none; counter-reset:s; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:12px}
ol.steps li{
  counter-increment:s; position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:16px 20px 16px 20px; padding-inline-start:60px; box-shadow:var(--sh-sm);
}
ol.steps li::before{
  content:counter(s); position:absolute; inset-inline-start:14px; top:13px;
  width:34px; height:34px; border-radius:10px; background:var(--chip); color:#fff;
  font-weight:800; font-size:15px; display:grid; place-items:center;
}

/* bullet list */
ul.list{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px}
ul.list li{position:relative; padding-inline-start:26px; color:var(--ink)}
ul.list li::before{content:""; position:absolute; inset-inline-start:6px; top:11px; width:8px; height:8px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 0 4px var(--blue-50)}

/* notes */
.note{border:1px solid; border-radius:14px; padding:16px 18px; margin:0 0 22px; display:flex; gap:13px}
.note .nic{flex-shrink:0; margin-top:1px}
.note .nt{font-weight:800; margin-bottom:3px}
.note p{margin:0}
.note.info{background:var(--tip-bg); border-color:var(--tip-line)} .note.info .nic,.note.info .nt{color:var(--tip)}
.note.tip{background:var(--ok-bg); border-color:var(--ok-line)} .note.tip .nic,.note.tip .nt{color:var(--ok)}
.note.warn{background:var(--warn-bg); border-color:var(--warn-line)} .note.warn .nic,.note.warn .nt{color:var(--warn)}

/* video block */
.vid{margin:0 0 24px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card); box-shadow:var(--sh-sm)}
.vid video{display:block; width:100%; background:#000}
.vid .frame{position:relative; aspect-ratio:16/9; background:#000}
.vid .frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vid .vhead{display:flex; align-items:center; gap:12px; padding:14px 18px}
.vid .vhead .vi{width:42px; height:42px; border-radius:11px; background:var(--blue-50); color:var(--blue); display:grid; place-items:center; flex-shrink:0}
.vid .vhead b{display:block; font-size:15px; color:var(--navy)}
.vid .vhead small{color:var(--soft); font-size:12.5px}
.vid.placeholder .vph{
  aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center;
  background:repeating-linear-gradient(135deg,var(--bg),var(--bg) 14px,transparent 14px,transparent 28px), var(--blue-50);
  color:var(--soft); padding:20px;
}
.vid.placeholder .vph .pl{width:56px; height:56px; border-radius:50%; background:var(--card); border:2px solid var(--blue-100); color:var(--blue); display:grid; place-items:center; box-shadow:var(--sh-sm)}
.vid.placeholder .vph .fn{font-size:12px; color:var(--soft); font-family:ui-monospace,monospace; background:var(--card); padding:3px 10px; border-radius:8px; border:1px solid var(--line)}

/* prev/next */
.pager{display:flex; gap:14px; margin-top:40px; flex-wrap:wrap}
.pager a{flex:1; min-width:200px; border:1px solid var(--line); border-radius:16px; padding:16px 20px; background:var(--card);
  transition:.2s; box-shadow:var(--sh-sm)}
.pager a:hover{border-color:var(--blue); box-shadow:var(--sh); transform:translateY(-2px)}
.pager a small{display:block; color:var(--soft); font-size:12.5px; font-weight:600; margin-bottom:3px}
.pager a b{color:var(--navy); font-size:16px}
.pager a.next{text-align:start}

/* search empty state */
.noresults{text-align:center; color:var(--soft); padding:60px 20px}

/* ---------- Responsive ---------- */
.backdrop{display:none}
@media (max-width:900px){
  .menu-toggle{display:grid}
  .sidebar{
    position:fixed; inset-block:0; inset-inline-start:0; top:0; height:100vh; z-index:60;
    width:min(86vw,320px); transform:translateX(100%); transition:transform .25s; box-shadow:var(--sh-lg);
    padding-top:22px;
  }
  :root{--sidebar-w:0px}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .backdrop{display:block; position:fixed; inset:0; background:rgba(0,15,97,.4); z-index:55}
  .brand .bt{display:none}
  main{padding-top:26px}
}
@media (max-width:560px){
  .hero{padding:28px 22px}
  ol.steps li{padding-inline-start:54px} ol.steps li::before{width:30px; height:30px; inset-inline-start:12px}
}