/* ═══════════════════════════════════════════════════════════
   dash2.css — داشبوردِ تازه‌ی معلم (طرحِ کارفرما، شهریور ۱۴۰۵)

   ⚠️ این فایل فقط داخلِ #sec-teacher-dash اثر دارد. هیچ قانونِ
   سراسری اینجا نوشته نمی‌شود تا بقیه‌ی سایت دست‌نخورده بماند.

   ⚠️ همه‌ی اندازه‌ها از محتوا ارتفاع می‌گیرند، نه از کسری از پهنا —
   وگرنه روی گوشی باید از نو نوشته شود.
   ═══════════════════════════════════════════════════════════ */

#sec-teacher-dash{
  --d2-r: 18px;
  --d2-card: #fff;
  --d2-line: #E8EFF7;
  --d2-ink: #1F2D3D;
  --d2-ink2: #64748B;
  --d2-green: #17B67C;
  --d2-shadow: 0 2px 10px rgba(31,45,61,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #sec-teacher-dash{
    --d2-card:#151C26; --d2-line:#25303F; --d2-ink:#E8EEF6; --d2-ink2:#93A3B8;
    --d2-shadow: 0 2px 10px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] #sec-teacher-dash{
  --d2-card:#151C26; --d2-line:#25303F; --d2-ink:#E8EEF6; --d2-ink2:#93A3B8;
  --d2-shadow: 0 2px 10px rgba(0,0,0,.35);
}

#sec-teacher-dash .d2{ display:flex; flex-direction:column; gap:1rem; }
#sec-teacher-dash .d2-card{
  background:var(--d2-card); border:1px solid var(--d2-line);
  border-radius:var(--d2-r); box-shadow:var(--d2-shadow); padding:1rem 1.1rem;
}
#sec-teacher-dash .d2-card-h{
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; margin-bottom:.85rem;
}
#sec-teacher-dash .d2-card-h b{ font-size:1rem; color:var(--d2-ink); font-weight:800; }
#sec-teacher-dash .d2-more{
  background:none; border:0; cursor:pointer; padding:.2rem .35rem;
  font:inherit; font-size:.78rem; color:#2E9BE6; font-weight:700;
}
#sec-teacher-dash .d2-more:hover{ text-decoration:underline; }

/* ── بنرِ بالا ───────────────────────────────────────────── */
/*  ── بنرِ خوش‌آمد ──────────────────────────────────────────
    کارفرما پنج بنر ساخت: «هر دفعه که معلم وارد می‌شود یکی تصادفی
    بیاید که معلم شاد شود».
    ⚠️ کدِ کلاس و دکمه در خودِ نقاشی کشیده شده بودند و پاک شدند
    (assets/banners). دکمه‌ی واقعی دقیقاً روی همان جای خالی می‌نشیند
    تا کدِ هر معلم، کدِ *خودش* باشد. */
#sec-teacher-dash .d2-hello{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem .9rem;
  padding:0 .2rem;
}
#sec-teacher-dash .d2-hello b{ font-size:1.35rem; font-weight:900; color:var(--d2-ink); }
#sec-teacher-dash .d2-hello span{ font-size:.82rem; color:var(--d2-ink2); }
#sec-teacher-dash .d2-hello .d2-hello-date{ margin-inline-start:auto; }
/*  ⚠️ روی گوشی این سه تا (سلام / لینک / تاریخ) زیرِ هم می‌افتادند و
    ارتفاعِ زیادی می‌گرفتند. حالا کنارِ هم می‌مانند و اگر جا نشد،
    تاریخ می‌رود خطِ بعد. */
#sec-teacher-dash .d2-lbl-short, #sec-teacher-dash .d2-d-short{ display:none; }
#sec-teacher-dash .d2-lbl-long, #sec-teacher-dash .d2-d-long{ font-style:normal; }
@media (max-width:760px){
  /*  هر سه در یک خط: سلام — لینک — تاریخ. متن‌ها کوتاه می‌شوند تا
      جا شوند و ردیف نشکند. */
  #sec-teacher-dash .d2-hello{ flex-wrap:nowrap; align-items:center; gap:.35rem; padding:0; }
  #sec-teacher-dash .d2-hello b{
    font-size:.88rem; flex:0 1 auto; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  #sec-teacher-dash .d2-joinlink{ font-size:.66rem; padding:.26rem .5rem; flex:none; }
  #sec-teacher-dash .d2-hello .d2-hello-date{ font-size:.66rem; flex:none; margin-inline-start:auto; white-space:nowrap; }
  #sec-teacher-dash .d2-lbl-long, #sec-teacher-dash .d2-d-long{ display:none; }
  #sec-teacher-dash .d2-lbl-short, #sec-teacher-dash .d2-d-short{ display:inline; font-style:normal; }
}
@media (max-width:380px){
  #sec-teacher-dash .d2-hello .d2-hello-date{ display:none; }
}
#sec-teacher-dash .d2-joinlink{
  cursor:pointer; font:inherit; font-size:.76rem; font-weight:800;
  background:#E9F8F1; color:#0E7A57; border:1px solid #BFE8D8;
  border-radius:11px; padding:.35rem .7rem; white-space:nowrap;
}
#sec-teacher-dash .d2-joinlink:hover{ background:#D8F3E6; }

#sec-teacher-dash .d2-hero{
  position:relative; overflow:hidden; border-radius:22px; line-height:0;
  background:linear-gradient(115deg,#BFE4FF,#D8F3E4);
}
#sec-teacher-dash .d2-banner{ width:100%; height:auto; display:block; }
/*  جعبه‌ی دکمه‌ها — مختصاتش از slots.json می‌آید و inline ست می‌شود */
#sec-teacher-dash .d2-bslot{
  position:absolute; display:flex; align-items:center; gap:.55rem;
  line-height:1.4; container-type:inline-size;
  left:var(--sx); top:var(--sy); width:var(--sw); height:var(--sh);
}
#sec-teacher-dash .d2-bslot > *{ flex:1 1 0; min-width:0; }
/*  اگر عکس نیامد (اینترنتِ ضعیف)، دکمه‌ها نباید گم شوند */
#sec-teacher-dash .d2-hero.noimg{ line-height:normal; padding:.9rem; }
#sec-teacher-dash .d2-hero.noimg .d2-bslot{
  position:static; width:auto; height:auto; container-type:normal;
}
#sec-teacher-dash .d2-hero.noimg .d2-go,
#sec-teacher-dash .d2-hero.noimg .d2-code{ height:auto; font-size:.86rem; padding:.6rem .8rem; }
#sec-teacher-dash .d2-greet{ font-size:1.7rem; font-weight:900; line-height:1.3; margin:0 0 .35rem; }
#sec-teacher-dash .d2-quote{ font-size:.86rem; opacity:.8; margin:0 0 1rem; }
#sec-teacher-dash .d2-hero-btns{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
#sec-teacher-dash .d2-code{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.9);
  border-radius:14px; padding:.5rem .8rem; font:inherit; color:#12324A;
  line-height:1.35; text-align:right;
}
#sec-teacher-dash .d2-code small{ display:block; font-size:.66rem; opacity:.7; }
#sec-teacher-dash .d2-code b{ font-size:1.02rem; letter-spacing:.06em; font-weight:900; }
#sec-teacher-dash .d2-go{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  background:var(--d2-green); color:#fff; border:0; border-radius:14px;
  padding:.72rem 1.1rem; font:inherit; font-weight:800; font-size:.9rem;
  box-shadow:0 4px 12px rgba(23,182,124,.3);
}
#sec-teacher-dash .d2-go:hover{ filter:brightness(1.06); }
/*  اندازه‌ی دکمه‌ها با عرضِ خودِ جعبه بالا و پایین می‌رود (cqw) تا
    روی هر پهنایی دقیقاً همان‌جای پاک‌شده را پر کنند. */
@container (min-width: 0px){
  #sec-teacher-dash .d2-bslot .d2-go,
  #sec-teacher-dash .d2-bslot .d2-code{ font-size:clamp(.62rem, 5.2cqw, .92rem); }
  #sec-teacher-dash .d2-bslot .d2-code b{ font-size:clamp(.7rem, 6.4cqw, 1.05rem); }
  #sec-teacher-dash .d2-bslot .d2-code small{ font-size:clamp(.5rem, 3.8cqw, .68rem); }
}
#sec-teacher-dash .d2-bslot .d2-go,
#sec-teacher-dash .d2-bslot .d2-code{
  height:100%; justify-content:center; padding:.3rem .6rem;
}

/* ── دسترسیِ سریع ────────────────────────────────────────── */
#sec-teacher-dash .d2-tiles{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(102px,1fr)); gap:.7rem;
}
#sec-teacher-dash .d2-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; cursor:pointer; font:inherit; text-align:center;
  background:var(--tbg,#F3F7FC); border:1px solid var(--d2-line);
  border-radius:16px; padding:.85rem .4rem; color:var(--d2-ink);
  min-height:96px; transition:transform .12s ease;
}
#sec-teacher-dash .d2-tile:hover{ transform:translateY(-2px); }
#sec-teacher-dash .d2-tile-ico{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--tc,#2E9BE6); color:#fff; flex:none;
}
#sec-teacher-dash .d2-tile-ico svg{ width:22px; height:22px; }
#sec-teacher-dash .d2-tile span{ font-size:.76rem; font-weight:700; line-height:1.5; }
#sec-teacher-dash .d2-tile.locked{ opacity:.55; }
/* ابزارِ ساخته‌نشده — نشانِ «به‌زودی» */
#sec-teacher-dash .d2-tile.soon{ position:relative; opacity:.72; }
#sec-teacher-dash .d2-soon{
  position:absolute; top:.3rem; inset-inline-end:.3rem; font-style:normal;
  font-size:.58rem; font-weight:800; line-height:1; padding:.2rem .35rem;
  border-radius:6px; background:#FFF0D6; color:#8A5B00;
}

/* ── شبکه‌ی کارت‌ها ──────────────────────────────────────── */
#sec-teacher-dash .d2-row{ display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); }
#sec-teacher-dash .d2-row.wide{ grid-template-columns:1.15fr 1fr .85fr; }

/* نمودارِ خطی */
#sec-teacher-dash .d2-chart{ width:100%; height:auto; display:block; }
#sec-teacher-dash .d2-legend{ display:flex; gap:.9rem; justify-content:center; font-size:.74rem; color:var(--d2-ink2); }
#sec-teacher-dash .d2-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-inline-end:.3rem; }

/* حلقه‌ی حضور */
#sec-teacher-dash .d2-donut-wrap{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center; }
#sec-teacher-dash .d2-donut{ width:150px; height:150px; flex:none; }
#sec-teacher-dash .d2-att-legend{ display:flex; flex-direction:column; gap:.55rem; font-size:.82rem; }
#sec-teacher-dash .d2-att-legend div{ display:flex; align-items:center; gap:.5rem; }
#sec-teacher-dash .d2-att-legend i{ width:9px; height:9px; border-radius:50%; }
#sec-teacher-dash .d2-att-legend b{ margin-inline-start:auto; font-weight:800; }

/* برنامه‌ی امروز */
#sec-teacher-dash .d2-slot{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem;
  border-radius:12px; margin-bottom:.45rem; background:#F7FAFD;
}
#sec-teacher-dash .d2-slot.now{ background:#FFF7E6; }
#sec-teacher-dash .d2-slot-ico{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:#E5EEF9; flex:none; font-size:1rem; }
#sec-teacher-dash .d2-slot b{ font-size:.85rem; font-weight:800; }
#sec-teacher-dash .d2-slot time{ font-size:.75rem; color:var(--d2-ink2); margin-inline-start:auto; }

/* پیام‌ها */
#sec-teacher-dash .d2-msg{ display:flex; gap:.7rem; padding:.6rem 0; border-bottom:1px solid var(--d2-line); }
#sec-teacher-dash .d2-msg:last-child{ border-bottom:0; }
#sec-teacher-dash .d2-msg-ico{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#EEF3FA; flex:none; }
#sec-teacher-dash .d2-msg-b{ min-width:0; }
#sec-teacher-dash .d2-msg-b b{ font-size:.82rem; display:block; }
#sec-teacher-dash .d2-msg-b p{ margin:.15rem 0 0; font-size:.76rem; color:var(--d2-ink2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sec-teacher-dash .d2-msg time{ font-size:.68rem; color:var(--d2-ink2); margin-inline-start:auto; flex:none; }

/* آمارِ کلاس */
#sec-teacher-dash .d2-stats{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
#sec-teacher-dash .d2-stat{ border-radius:14px; padding:.8rem; background:var(--sbg,#F3F7FC); }
#sec-teacher-dash .d2-stat b{ display:block; font-size:1.45rem; font-weight:900; line-height:1.3; }
#sec-teacher-dash .d2-stat span{ font-size:.74rem; color:var(--d2-ink2); }

/* کارتِ تشویقی */
#sec-teacher-dash .d2-promo{
  position:relative; overflow:hidden; border-radius:16px; margin-top:.8rem;
  background:linear-gradient(115deg,#D4F3E2,#BFEFF5); color:#0E4A3C;
  padding:1rem 1.1rem; font-weight:800; font-size:.9rem; line-height:1.9;
}
#sec-teacher-dash .d2-promo img{ position:absolute; inset-inline-end:.6rem; bottom:-4px; width:78px; opacity:.95; }

/* ── انتخابِ ابزارهای دسترسیِ سریع ────────────────────────── */
.d2-pick-ov{
  position:fixed; inset:0; z-index:10003; display:flex; align-items:center;
  justify-content:center; padding:16px; background:rgba(10,14,26,.5); backdrop-filter:blur(4px);
}
.d2-pick{
  width:100%; max-width:520px; max-height:88vh; display:flex; flex-direction:column;
  background:var(--card); border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden;
}
.d2-pick-h{ padding:1.1rem 1.2rem .8rem; }
.d2-pick-h b{ display:block; font-size:1.05rem; font-weight:900; color:var(--text); }
.d2-pick-h span{ display:block; font-size:.78rem; color:var(--text3); margin-top:.25rem; line-height:1.8; }
.d2-pick-list{ overflow:auto; padding:0 1.2rem; display:grid; grid-template-columns:1fr 1fr; gap:.45rem; }
.d2-pick-it{
  display:flex; align-items:center; gap:.5rem; cursor:pointer; border-radius:12px;
  padding:.5rem .6rem; border:1.5px solid var(--border); background:var(--bg3);
}
.d2-pick-it:has(input:checked){ border-color:var(--p); background:rgba(var(--p-rgb),.10); }
.d2-pick-it.locked{ opacity:.5; cursor:not-allowed; }
.d2-pick-it input{ accent-color:var(--p); margin:0; flex:none; }
.d2-pick-ico{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:#fff; flex:none; }
.d2-pick-ico svg{ width:15px; height:15px; }
.d2-pick-t{ font-size:.79rem; font-weight:700; color:var(--text); min-width:0; }
.d2-pick-f{ display:flex; gap:.6rem; padding:1rem 1.2rem; }
.d2-pick-f button{ flex:1; cursor:pointer; font:inherit; font-weight:800; font-size:.88rem; border:0; border-radius:12px; padding:.7rem; }
.d2-pick-cancel{ background:var(--bg3); color:var(--text2); }
.d2-pick-ok{ background:var(--p); color:#fff; }
@media (max-width:560px){ .d2-pick-list{ grid-template-columns:1fr; } }

/* حالتِ خالی — عددِ ساختگی ننویس */
#sec-teacher-dash .d2-empty{
  text-align:center; color:var(--d2-ink2); font-size:.8rem; line-height:2;
  padding:1.4rem .8rem;
}
#sec-teacher-dash .d2-empty img{ width:64px; opacity:.85; display:block; margin:0 auto .5rem; }

/* ── گوشی ───────────────────────────────────────────────── */
@media (max-width:1100px){
  #sec-teacher-dash .d2-row, #sec-teacher-dash .d2-row.wide{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  #sec-teacher-dash .d2-row, #sec-teacher-dash .d2-row.wide{ grid-template-columns:1fr; }
  /*  ⚠️ روی گوشی جعبه‌ی روی بنر آن‌قدر کوچک می‌شود که دکمه خوانا
      نیست. پس از روی عکس می‌آید پایین و تمام‌عرض می‌شود. */
  #sec-teacher-dash .d2-bslot{
    position:static; width:auto; height:auto; left:auto; top:auto;
    margin:.7rem; container-type:normal; gap:.5rem;
  }
  #sec-teacher-dash .d2-hero{ line-height:normal; }
  /*  عکس **بریده** می‌شود نه کوچک — وگرنه نوشته‌های داخلِ بنر روی
      صفحه‌ی ۳۹۰ پیکسلی به‌اندازه‌ی چند پیکسل می‌شوند و خوانده نمی‌شوند.
      `--op` می‌گوید کدام قسمتِ عکس (جایی که داینوست) بماند. */
  #sec-teacher-dash .d2-banner{
    height:clamp(150px, 42vw, 210px); object-fit:cover;
    object-position:var(--op, 50%) center;
  }
  #sec-teacher-dash .d2-bslot .d2-go,
  #sec-teacher-dash .d2-bslot .d2-code{ height:auto; font-size:.84rem; padding:.6rem .7rem; }
  #sec-teacher-dash .d2-bslot .d2-code b{ font-size:.95rem; }
  #sec-teacher-dash .d2-bslot .d2-code small{ font-size:.62rem; }
  #sec-teacher-dash .d2-hello b{ font-size:1.1rem; }
  #sec-teacher-dash .d2-hello .d2-hello-date{ margin-inline-start:0; }
  #sec-teacher-dash .d2-tiles{ grid-template-columns:repeat(4,1fr); gap:.5rem; }
  #sec-teacher-dash .d2-tile{ min-height:84px; padding:.6rem .25rem; }
  #sec-teacher-dash .d2-tile-ico{ width:36px; height:36px; }
  #sec-teacher-dash .d2-tile span{ font-size:.68rem; }
  /* ⚠️ لمسی: هیچ دکمه‌ای زیرِ ۳۴ پیکسل نباشد */
  #sec-teacher-dash button{ min-height:34px; }
}
@media (max-width:420px){
  #sec-teacher-dash .d2-tiles{ grid-template-columns:repeat(3,1fr); }
}

/* ═══════════════════════════════════════════════════════════
   📊 حضور و غیاب — دو نمودارِ کنارِ هم روی داشبورد
   ═══════════════════════════════════════════════════════════ */
.d2-att2{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; align-items:start; }
.d2-att2 .d2-donut-wrap{ margin:0; }
.d2-wk-h{
  font-size:.7rem; font-weight:800; color:var(--d2-ink2,#64748B);
  margin-bottom:.45rem; text-align:center;
}
.d2-wk{ border-inline-start:1px solid var(--d2-line,#E6EEF7); padding-inline-start:.7rem; }
.d2-wk-bars{ display:grid; grid-template-columns:repeat(6,1fr); gap:.25rem; align-items:end; height:92px; }
.d2-wk-b{ display:flex; flex-direction:column; align-items:center; gap:.2rem; height:100%; }
.d2-wk-b u{
  flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center;
  text-decoration:none; background:var(--d2-soft,#F2F7FC); border-radius:6px; overflow:hidden;
}
.d2-wk-b u span{
  display:block; width:100%; border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,#F5A524,#EF4444);
}
.d2-wk-b i{ font-style:normal; font-size:.6rem; color:var(--d2-ink2,#64748B); font-weight:700; }
.d2-wk-f{ margin-top:.35rem; font-size:.62rem; color:var(--d2-ink2,#94A3B8); text-align:center; }
@media (max-width:760px){
  .d2-att2{ grid-template-columns:1fr; }
  .d2-wk{ border-inline-start:0; border-top:1px solid var(--d2-line,#E6EEF7); padding-inline-start:0; padding-top:.6rem; }
}

/* ═══════════════════════════════════════════════════════════
   📈 صفحه‌ی آمارِ کاملِ حضور و غیاب
   ═══════════════════════════════════════════════════════════ */
.ats-back{ margin-bottom:1rem; padding:8px 16px; }
.ats-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem; margin-bottom:1rem; }
.ats-tile{
  background:var(--card,#fff); border:1px solid var(--line,#E6EEF7); border-radius:16px;
  padding:1rem .8rem; text-align:center; position:relative; overflow:hidden;
}
.ats-tile::before{ content:''; position:absolute; inset-inline:0; top:0; height:4px; background:var(--c); }
.ats-tile-ico{ font-size:1.4rem; line-height:1; margin-bottom:.35rem; }
.ats-tile-b{ font-size:1.75rem; font-weight:900; color:var(--c); line-height:1.1; }
.ats-tile-t{ font-size:.78rem; font-weight:800; margin-top:.15rem; }
.ats-tile-s{ font-size:.66rem; opacity:.65; margin-top:.15rem; }

.ats-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.7rem; margin-bottom:1rem; }
.ats-hi{
  border-radius:16px; padding:.9rem 1rem; color:#fff;
  display:flex; flex-direction:column; gap:.1rem;
}
.ats-hi span{ font-size:.72rem; font-weight:700; opacity:.92; }
.ats-hi b{ font-size:1.15rem; font-weight:900; }
.ats-hi i{ font-style:normal; font-size:.72rem; opacity:.9; }
.ats-hi-r{ background:linear-gradient(135deg,#FF6B81,#EF4444); }
.ats-hi-g{ background:linear-gradient(135deg,#2ED3A0,#12A277); }
.ats-hi-o{ background:linear-gradient(135deg,#FFB65C,#F5761A); }
.ats-hi-b{ background:linear-gradient(135deg,#6EA8FE,#3B5BDB); }

.ats-chart{ margin-bottom:1rem; }
.ats-chart-h{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin-bottom:.8rem; }
.ats-chart-h b{ font-size:.95rem; font-weight:900; }
.ats-chart-h span{ font-size:.7rem; opacity:.65; }
.ats-bars{ display:grid; grid-template-columns:repeat(6,1fr); gap:.5rem; align-items:end; height:160px; }
.ats-bar{ display:flex; flex-direction:column; align-items:center; gap:.25rem; height:100%; }
.ats-bar-col{
  flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center;
  background:var(--soft,#F2F7FC); border-radius:10px; overflow:hidden;
}
.ats-bar-col span{ display:block; width:100%; border-radius:10px 10px 0 0; background:linear-gradient(180deg,#F5A524,#EF4444); }
.ats-bar b{ font-size:.8rem; font-weight:900; }
.ats-bar i{ font-style:normal; font-size:.66rem; opacity:.7; }
.ats-note{ margin:.8rem 0 0; font-size:.78rem; opacity:.8; text-align:center; }

/* ═══════════════════════════════════════════════════════════
   👤 پرونده‌ی شخصیِ معلم
   ═══════════════════════════════════════════════════════════ */
.pf{ display:flex; flex-direction:column; gap:1rem; }
.pf-top{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  background:linear-gradient(135deg,#E3F3FF,#DFF6EA); color:#0E3B4A;
  border-radius:20px; padding:1.1rem 1.2rem;
}
.pf-av{ width:74px; height:74px; border-radius:50%; object-fit:cover; background:#fff; border:3px solid #fff; flex:none; }
.pf-top-t{ flex:1; min-width:150px; }
.pf-top-t b{ display:block; font-size:1.2rem; font-weight:900; }
.pf-top-t span{ font-size:.78rem; opacity:.8; }
.pf-avbtn{
  background:#fff; color:#0E3B4A; border:0; border-radius:12px; cursor:pointer;
  padding:.55rem .9rem; font:inherit; font-weight:800; font-size:.78rem;
}
.pf-avbtn:hover{ filter:brightness(.95); }

.pf-prog{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.pf-prog-b{ flex:1; min-width:140px; height:9px; border-radius:9px; background:var(--soft,#EEF4FB); overflow:hidden; }
.pf-prog-b span{ display:block; height:100%; border-radius:9px; background:linear-gradient(90deg,#2ED3A0,#2E9BE6); transition:width .5s; }
.pf-prog i{ font-style:normal; font-size:.75rem; opacity:.75; }

.pf-card{ padding:1.1rem; }
.pf-h{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin-bottom:.9rem; }
.pf-h b{ font-size:.98rem; font-weight:900; }
.pf-h span{ font-size:.72rem; opacity:.6; }
.pf-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.7rem; }
.pf-f{ display:flex; flex-direction:column; gap:.3rem; }
.pf-f > span{ font-size:.74rem; font-weight:700; opacity:.75; }
.pf-f input, .pf-f textarea{
  border:1px solid var(--line,#E6EEF7); background:var(--soft,#F7FAFD);
  border-radius:12px; padding:.65rem .8rem; font:inherit; font-size:.85rem;
  color:inherit; resize:vertical;
}
.pf-f input:focus, .pf-f textarea:focus{ outline:2px solid #BEDCFA; border-color:#BEDCFA; }
.pf-wide{ grid-column:1/-1; }
.pf-actions{ display:flex; align-items:center; gap:.8rem; margin-top:.9rem; flex-wrap:wrap; }
.pf-msg{ font-size:.78rem; font-weight:700; }
.pf-msg.ok{ color:#17B67C; }
.pf-msg.bad{ color:#EF4444; }

.pf-locks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem; }
.pf-lock{
  background:var(--soft,#F5F9FD); border:1px dashed var(--line,#E6EEF7);
  border-radius:14px; padding:.8rem; text-align:center;
}
.pf-lock i{ font-style:normal; font-size:1.1rem; display:block; }
.pf-lock b{ display:block; font-size:.72rem; opacity:.65; font-weight:700; margin:.2rem 0; }
.pf-lock span{ font-size:.92rem; font-weight:900; }

.pf-req{
  margin-top:.9rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  background:var(--soft,#F5F9FD); border-radius:14px; padding:.8rem 1rem; font-size:.8rem;
}
.pf-req > span{ flex:1; min-width:180px; opacity:.8; }
.pf-req.pending{ background:#FFF6E5; color:#8A5A00; display:block; line-height:2; }
.pf-req.rejected{ background:#FDECEC; color:#8A1F1F; display:block; line-height:2; }
.pf-req i{ font-style:normal; opacity:.75; }
.pf-link{ background:none; border:0; cursor:pointer; font:inherit; font-weight:800; text-decoration:underline; color:inherit; }

.pf-pw-note{
  background:var(--soft,#F5F9FD); border-radius:12px; padding:.7rem .85rem;
  font-size:.76rem; line-height:2; margin-bottom:.9rem;
}
