/* ============================================================
   Participant environment — airy layer over the same palette.
   Admin screens keep the dense look from app.css; everything
   here is scoped under .env so nothing existing changes.
   ============================================================ */

:root{
  --env-bg:#f0f4f8;          /* softer than the admin --bone */
  --env-card:#ffffff;
  --env-line:rgba(197,198,210,.45);
  --env-shadow:0 4px 20px -4px rgba(0,17,58,.10);
  --env-shadow-hi:0 12px 24px -8px rgba(0,17,58,.16);
  --env-tint:#dbe1ff;        /* primary-fixed */
  --env-tint-2:#d4e3ff;      /* secondary-fixed */
  --env-sidebar:264px;
}

/* ---------- app shell ---------- */
body.env-on{ background:var(--env-bg); }
body.env-on > #topnav{ display:none; }     /* the old top bar steps aside */

.env-shell{ min-height:100vh; }

/* RTL: inline-start is the right-hand side, where Hebrew navigation belongs */
.env-side{
  position:fixed; inset-block:0; inset-inline-start:0; width:var(--env-sidebar);
  background:var(--env-card); border-inline-end:1px solid var(--env-line);
  display:flex; flex-direction:column; padding:20px 16px; gap:4px; z-index:40;
  box-shadow:2px 0 18px rgba(0,17,58,.05);
}
.env-brand{ display:flex; align-items:center; gap:12px; padding:4px 8px 20px; }
.env-brand img{ width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:#fff; box-shadow:0 2px 8px rgba(0,17,58,.14); object-fit:cover; }
.env-brand h1{ margin:0; font-size:15px; font-weight:800; color:var(--violet-900);
  line-height:1.35; letter-spacing:-.01em; }
.env-brand small{ display:block; font-weight:500; font-size:11.5px; color:var(--text-sub); margin-top:2px; }

.env-nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.env-nav a{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
  color:var(--text-sub); text-decoration:none; font-size:14px; font-weight:600;
  transition:background .15s, color .15s, transform .15s;
}
.env-nav a:hover{ background:var(--b-bg); color:var(--violet-900); }
.env-nav a.active{ background:var(--env-tint-2); color:var(--a-fg); }
.env-nav a .ic{ font-size:19px; line-height:1; width:22px; text-align:center; }
.env-nav .grp{ font-size:11px; font-weight:700; color:var(--text-sub); opacity:.7;
  padding:16px 14px 6px; letter-spacing:.02em; }

/* unread bell on "עדכונים" */
.env-badge{
  margin-inline-start:auto; display:inline-flex; align-items:center; gap:3px;
  background:var(--bad); color:#fff; border-radius:20px; padding:2px 9px 2px 6px;
  font-size:11.5px; font-weight:800; line-height:1.5;
  box-shadow:0 2px 6px rgba(186,26,26,.35); animation:env-ring 2.4s ease-in-out 3;
}
.env-badge .material-symbols-outlined{ font-size:15px; }
@keyframes env-ring{
  0%,88%,100%{ transform:rotate(0); }
  90%{ transform:rotate(-11deg); } 94%{ transform:rotate(9deg); }
}
.env-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--bad);
  position:absolute; margin-top:-24px; margin-inline-start:12px;
  box-shadow:0 0 0 2px #fff;
}
.env-bottom a{ position:relative; }

.env-me{ border-top:1px solid var(--env-line); padding-top:14px; margin-top:8px; }
.env-me .row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.env-me .nm{ font-size:13.5px; font-weight:700; color:var(--violet-900); line-height:1.3; }
.env-me .rl{ font-size:11.5px; color:var(--text-sub); }
.env-me button{
  width:100%; padding:9px; border-radius:12px; border:1px solid var(--env-line);
  background:#fff; color:var(--text-sub); font-family:inherit; font-size:13px;
  font-weight:600; cursor:pointer;
}
.env-me button:hover{ background:var(--b-bg); color:var(--violet-900); }

.env-main{ margin-inline-start:var(--env-sidebar); padding:32px 40px 80px; max-width:1280px; }

/* ---------- headings ---------- */
.env-h1{ font-size:34px; font-weight:700; color:var(--violet-900); margin:0 0 6px;
  letter-spacing:-.02em; line-height:1.2; }
.env-sub{ font-size:16px; color:var(--text-sub); margin:0 0 28px; line-height:1.6; }
.env-h2{ font-size:20px; font-weight:700; color:var(--violet-900); margin:0 0 14px; }
.env-eyebrow{ font-size:11.5px; font-weight:700; color:var(--text-sub);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }

/* ---------- cards ---------- */
.env-card{
  background:var(--env-card); border:1px solid var(--env-line); border-radius:16px;
  padding:22px 24px; box-shadow:var(--env-shadow);
}
.env-grid{ display:grid; gap:20px; }
.env-grid.c2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.env-grid.c3{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.env-grid.c4{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }

.env-tile{
  background:var(--env-card); border:1px solid var(--env-line); border-radius:16px;
  padding:18px 20px; box-shadow:var(--env-shadow); display:flex; align-items:center; gap:14px;
}
.env-tile .ic{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:22px; flex-shrink:0;
  background:var(--env-tint); color:var(--violet-900);
}
.env-tile .ic.b{ background:var(--env-tint-2); color:var(--violet); }
.env-tile .ic.c{ background:#dff5e9; color:var(--ok); }
.env-tile .ic.d{ background:var(--c-bg); color:var(--c-fg); }
.env-tile .k{ font-size:11.5px; color:var(--text-sub); text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:2px; }
.env-tile .v{ font-size:24px; font-weight:700; color:var(--violet-900); line-height:1.1; }

/* ---------- person cards ---------- */
.env-person{
  background:var(--env-card); border:1px solid var(--env-line); border-radius:16px;
  padding:20px; box-shadow:var(--env-shadow); cursor:pointer;
  border-inline-start:4px solid var(--violet); transition:transform .25s, box-shadow .25s;
  display:flex; flex-direction:column;
}
.env-person:hover{ transform:translateY(-4px); box-shadow:var(--env-shadow-hi); }
.env-person.t-mentor{ border-inline-start-color:var(--violet); }
.env-person.t-mentee{ border-inline-start-color:var(--mint); }
.env-person.t-advisor,
.env-person.t-program_manager{ border-inline-start-color:var(--b-bd); }
.env-person .top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.env-person .nm{ font-size:18px; font-weight:700; color:var(--violet-900); line-height:1.25; }
.env-person .rl{ font-size:13px; color:var(--text-sub); margin-top:3px; min-height:19px; }
.env-person .pair{
  background:var(--bone); border-radius:10px; padding:9px 11px; font-size:12.5px;
  color:var(--text-sub); margin:14px 0; display:flex; align-items:center; gap:7px;
}
.env-person .pair b{ color:var(--violet-900); }
.env-person .more{
  margin-top:auto; width:100%; padding:9px; border-radius:10px; border:none; cursor:pointer;
  background:var(--b-bg); color:var(--violet-900); font-family:inherit;
  font-size:12.5px; font-weight:700;
}
.env-person:hover .more{ background:var(--violet); color:#fff; }

.env-avatar{ width:62px; height:62px; border-radius:50%; object-fit:cover;
  border:2px solid var(--env-line); background:var(--bone); flex-shrink:0; }
.env-avatar.letter{ display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--violet), var(--violet-900)); }
.env-avatar.lg{ width:104px; height:104px; font-size:40px; }
.env-avatar.sm{ width:42px; height:42px; font-size:17px; }

/* ---------- pills ---------- */
.env-pill{ font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:20px;
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.env-pill.mentor{ background:var(--env-tint-2); color:var(--a-fg); }
.env-pill.mentee{ background:var(--a-bg); color:var(--a-fg); }
.env-pill.advisor,
.env-pill.program_manager{ background:var(--b-bg); color:var(--b-fg); }

.env-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.env-tab{
  padding:9px 20px; border-radius:20px; border:1px solid var(--env-line);
  background:#fff; color:var(--text-sub); font-size:13.5px; font-weight:600;
  cursor:pointer; user-select:none; transition:all .15s;
}
.env-tab:hover{ background:var(--b-bg); }
.env-tab.active{ background:var(--violet-900); color:#fff; border-color:var(--violet-900); }

.env-search{
  width:100%; max-width:380px; padding:13px 18px; border-radius:14px;
  border:1px solid var(--env-line); background:#fff; font-family:inherit; font-size:14.5px;
  box-shadow:var(--env-shadow);
}
.env-search:focus{ outline:2px solid var(--lilac); border-color:var(--violet); }

/* ---------- progress ---------- */
.env-bar{ height:9px; border-radius:6px; background:var(--surface, #e2e2e5); overflow:hidden; }
.env-bar i{ display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg, var(--violet), var(--mint)); transition:width .8s; }

/* ---------- slide-in detail panel ---------- */
.env-drawer{ position:fixed; inset:0; z-index:80; display:none; }
.env-drawer.open{ display:block; }
.env-drawer .scrim{ position:absolute; inset:0; background:rgba(0,17,58,.42); backdrop-filter:blur(4px); }
/* anchored to the right edge in RTL, so it slides in from the right */
.env-drawer .sheet{
  position:absolute; inset-block:0; inset-inline-start:0; width:100%; max-width:620px;
  background:#fff; box-shadow:0 0 60px rgba(0,0,0,.35); overflow-y:auto;
  animation:env-slide .35s cubic-bezier(.16,1,.3,1);
}
@keyframes env-slide{ from{ transform:translateX(100%);} to{ transform:translateX(0);} }
.env-drawer .sheet .hd{
  background:linear-gradient(135deg, var(--violet-900), var(--violet));
  padding:26px 28px; color:#fff; display:flex; gap:18px; align-items:center;
}
.env-drawer .sheet .hd .env-avatar{ border-color:rgba(255,255,255,.45); }
.env-drawer .sheet .bd{ padding:26px 28px 40px; }
.env-drawer .x{
  position:absolute; top:18px; inset-inline-end:18px; width:36px; height:36px;
  border-radius:50%; border:none; cursor:pointer; font-size:17px;
  background:rgba(255,255,255,.2); color:#fff;
}

/* ---------- forms in the participant area ---------- */
.env-field{ margin-bottom:18px; }
.env-field > label{ display:block; font-size:13px; font-weight:700;
  color:var(--violet-900); margin-bottom:7px; }
.env-field input, .env-field textarea, .env-field select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--env-line);
  background:#fff; font-family:inherit; font-size:14.5px; color:var(--text);
}
.env-field textarea{ min-height:120px; resize:vertical; line-height:1.65; }
.env-field input:focus, .env-field textarea:focus, .env-field select:focus{
  outline:none; box-shadow:0 0 0 3px rgba(104,171,255,.32); border-color:var(--violet); }
.env-field input:disabled{ background:var(--bone); color:var(--text-sub); cursor:not-allowed; }
.env-hint{ font-size:11.5px; color:var(--text-sub); margin-top:5px; line-height:1.5; }
.env-private{ display:flex; align-items:center; gap:8px; margin-top:8px;
  font-size:12.5px; color:var(--text-sub); cursor:pointer; }
.env-private input{ width:auto; accent-color:var(--violet); }

.env-btn{
  padding:12px 30px; border-radius:24px; border:none; cursor:pointer;
  background:linear-gradient(180deg, var(--violet-900), var(--violet));
  color:#fff; font-family:inherit; font-size:14px; font-weight:700;
  box-shadow:0 4px 14px rgba(0,17,58,.24);
}
.env-btn:hover{ filter:brightness(1.1); }
.env-btn:disabled{ opacity:.6; cursor:wait; }
.env-btn.ghost{ background:none; color:var(--violet-900);
  border:1px solid var(--outline, #757682); box-shadow:none; }
.env-btn.ghost:hover{ background:var(--b-bg); filter:none; }
.env-btn.sm{ padding:8px 18px; font-size:12.5px; border-radius:20px; }
.env-btn.danger{ background:var(--bad); box-shadow:none; }

.env-empty{ text-align:center; color:var(--text-sub); padding:56px 20px;
  background:var(--env-card); border:1px dashed var(--env-line); border-radius:16px; }

.env-msg{ font-size:13.5px; padding:12px 16px; border-radius:12px; margin:14px 0; display:none; }
.env-msg.ok{ background:#dff5e9; color:#0a6e4f; display:block; }
.env-msg.err{ background:var(--c-bg); color:var(--c-fg); display:block; }

/* ---------- resource cards ---------- */
.env-res{ background:var(--env-card); border:1px solid var(--env-line); border-radius:16px;
  overflow:hidden; box-shadow:var(--env-shadow); display:flex; flex-direction:column;
  transition:transform .25s, box-shadow .25s; }
.env-res:hover{ transform:translateY(-4px); box-shadow:var(--env-shadow-hi); }
.env-res .cover{ height:130px; display:flex; align-items:center; justify-content:center;
  font-size:44px; background:var(--env-tint); color:var(--violet-900); position:relative; }
.env-res .cover img{ width:100%; height:100%; object-fit:cover; }
.env-res .cover .tag{ position:absolute; top:10px; inset-inline-end:10px;
  background:rgba(255,255,255,.85); border-radius:6px; padding:3px 9px;
  font-size:10px; font-weight:800; color:var(--violet-900); }
.env-res .bd{ padding:18px 20px; display:flex; flex-direction:column; flex:1; }
.env-res .bd h3{ margin:0 0 8px; font-size:16.5px; font-weight:700; color:var(--violet-900); line-height:1.3; }
.env-res .bd p{ margin:0 0 14px; font-size:13.5px; color:var(--text-sub); line-height:1.6; flex:1; }
.env-res .ft{ border-top:1px solid var(--env-line); padding-top:12px;
  display:flex; align-items:center; justify-content:space-between; gap:8px; }
.env-res .ico-btn{ width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:none; color:var(--text-sub); font-size:16px; }
.env-res .ico-btn:hover{ background:var(--b-bg); color:var(--violet-900); }
.env-res .ico-btn.danger:hover{ background:var(--c-bg); color:var(--c-fg); }

/* ---------- mobile ---------- */
.env-bottom{ display:none; }
@media (max-width:1024px){
  .env-side{ display:none; }
  .env-main{ margin-inline-start:0; padding:20px 16px 96px; }
  .env-h1{ font-size:26px; }
  .env-topbar{
    position:sticky; top:0; z-index:30; background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--env-line);
    padding:11px 16px; display:flex; align-items:center; gap:11px;
  }
  .env-topbar img{ width:36px; height:36px; border-radius:50%; }
  .env-topbar b{ font-size:14px; color:var(--violet-900); line-height:1.25; }
  .env-bottom{
    display:flex; position:fixed; inset-inline:0; bottom:0; z-index:50;
    background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
    border-top:1px solid var(--env-line); padding:6px 4px;
    justify-content:space-around; box-shadow:0 -4px 18px rgba(0,17,58,.08);
  }
  .env-bottom a{ flex:1; text-align:center; text-decoration:none; color:var(--text-sub);
    padding:7px 2px; border-radius:12px; font-size:10.5px; font-weight:600; }
  .env-bottom a .ic{ display:block; font-size:19px; margin-bottom:2px; }
  .env-bottom a.active{ color:var(--violet); background:var(--env-tint-2); }
  .env-drawer .sheet{ max-width:100%; }
}
@media (min-width:1025px){ .env-topbar{ display:none; } }