/* calendar.css */

/*
======================
Block 1: غلاف النافذة والمشهد
======================
*/
.myatpl-cal-modal .myatpl-cal-box.is-sizing{ visibility:hidden; }

.myatpl-cal-modal{
  --cal-icon-size:28px;
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; padding:8px; animation:overlayIn .18s ease-out forwards;
}
.myatpl-cal-modal.is-closing{ animation:overlayOut .16s ease-in forwards; }

.myatpl-cal-modal .myatpl-cal-box{
  background:#fff; border-radius:12px; box-shadow:0 16px 38px rgba(0,0,0,.35);
  padding:10px 12px 10px; overflow:hidden; max-width:95vw; max-height:92vh;
  opacity:0; transform:translateY(6px) scale(.985);
}
.myatpl-cal-modal .myatpl-cal-box.is-opening{ animation:boxIn .24s cubic-bezier(.2,.7,.2,1) forwards; }
.myatpl-cal-modal .myatpl-cal-box.is-closing{ animation:boxOut .18s ease forwards; }

/*
======================
Block 2: شريط الأيقونات أعلى النافذة
======================
*/
.myatpl-cal-topbar{ position:sticky; top:0; display:flex; justify-content:flex-end; align-items:center; gap:6px }
.myatpl-cal-icon, .myatpl-cal-close, .myatpl-cal-backyear{
  border:0; background:transparent !important; padding:4px; line-height:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent; outline:0 !important; box-shadow:none !important; user-select:none;
}
.myatpl-cal-icon img,
.myatpl-cal-close img,
.myatpl-cal-backyear img{ display:block; width:var(--cal-icon-size) !important; height:var(--cal-icon-size) !important }

/* يظهر فقط في الأسبوع */
.myatpl-cal-backyear{ display:none }
.myatpl-cal-box.is-week .myatpl-cal-backyear{ display:inline-flex }

/* الجديد: إخفاء زر السنة تمامًا عند عرض تقويم المدرب لمستخدم آخر */
body[data-cal-viewer="1"] .myatpl-cal-backyear{ display:none !important }


/*
======================
Block 3: تأثيرات Hover ومنع الهايلايت
======================
*/
.myatpl-cal-icon img{ transition:transform .14s cubic-bezier(.2,.7,.2,1), filter .14s ease }
.myatpl-cal-icon:hover img, .myatpl-cal-icon:focus-visible img{ transform:scale(1.12); filter:drop-shadow(0 3px 8px rgba(0,0,0,.3)) }
.myatpl-cal-icon:active img{ transform:scale(.96); filter:drop-shadow(0 1px 4px rgba(0,0,0,.25)) }
.myatpl-cal-icon:hover, .myatpl-cal-icon:focus, .myatpl-cal-icon:focus-visible, .myatpl-cal-icon:active{
  background:transparent !important; outline:0 !important; box-shadow:none !important;
}

/* يظهر فقط في الأسبوع */
.myatpl-cal-backyear{ display:none }
.myatpl-cal-box.is-week .myatpl-cal-backyear{ display:inline-flex }

/*
======================
Block 4: حركات المودال وتقليل الحركة
======================
*/
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes overlayOut{from{opacity:1}to{opacity:0}}
@keyframes boxIn{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes boxOut{to{opacity:0;transform:translateY(8px) scale(.985)}}

@media (prefers-reduced-motion:reduce){
  .myatpl-cal-modal,.myatpl-cal-modal.is-closing,
  .myatpl-cal-modal .myatpl-cal-box,
  .myatpl-cal-modal .myatpl-cal-box.is-opening,
  .myatpl-cal-modal .myatpl-cal-box.is-closing{ animation:none !important; transform:none !important; opacity:1 !important }
  .myatpl-cal-icon img{ transition:none !important; transform:none !important; filter:none !important }
}

/*
======================
Block 5: عرض السنة — العناوين والشبكات
======================
*/
.myatpl-cal-modal .myatpl-cal{ position:relative; transform-origin:top left; will-change:transform }
.myatpl-cal-modal .myatpl-year-title{ font-size:30px; margin:0 0 6px; font-weight:800 }
.myatpl-cal-modal .myatpl-year-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px }
.myatpl-cal-modal .myatpl-month{ padding:2px; background:#fff }
.myatpl-cal-modal .myatpl-month-title{ color:#e74c3c; font-weight:700; font-size:25px; margin:0 0 3px; line-height:1.05 }
.myatpl-cal-modal .myatpl-month-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px }
.myatpl-cal-modal .myatpl-dow{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(7,1fr) }
.myatpl-cal-modal .myatpl-dow span{ text-align:center; height:16px; font-size:18px; color:#555; display:flex; align-items:center; justify-content:center }
.myatpl-cal-modal .myatpl-day{ position:relative; height:16px; border-radius:3px; border:1px dashed #e0e0e0; background:#f7f7f7; cursor:pointer }
.myatpl-cal-modal .myatpl-day.is-out{ opacity:.35 }
.myatpl-cal-modal .myatpl-day-num{ position:absolute; top:1px; left:3px; font-size:18px; color:#333; line-height:1 }
.myatpl-cal-modal .myatpl-day.is-today:not(.is-out){ background:rgba(100,165,255,.90) }

/*
======================
Block 6: عرض الأسبوع — الرأس والتنقل والشبكة
======================
*/
.myatpl-week-head{ font-weight:800; font-size:40px; margin:0 2px 8px; display:flex; align-items:center; justify-content:center; gap:12px }
.myatpl-week-head-title{ white-space:nowrap }

/* أسهم التنقل */
.myatpl-week-nav{ border:0; background:transparent !important; padding:0; line-height:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent; outline:0 !important; box-shadow:none !important; user-select:none;
}
.myatpl-cal[data-view="week"] .myatpl-week-nav img{
  display:block;
  width:calc(var(--cal-icon-size) / var(--ui-scale, 1)) !important;
  height:calc(var(--cal-icon-size) / var(--ui-scale, 1)) !important;
  transition:transform .14s cubic-bezier(.2,.7,.2,1), filter .14s ease;
}
.myatpl-week-nav:hover img, .myatpl-week-nav:focus-visible img{ transform:scale(1.12); filter:drop-shadow(0 3px 8px rgba(0,0,0,.3)) }
.myatpl-week-nav:active img{ transform:scale(.96); filter:drop-shadow(0 1px 4px rgba(0,0,0,.25)) }

/*
======================
Block 7: أعمدة الأسبوع وبطاقات السلوت
======================
*/
.myatpl-week-grid{ display:grid; grid-template-columns:repeat(7, minmax(300px, 1fr)); gap:12px }
@media (max-width:980px){ .myatpl-week-grid{ grid-template-columns:repeat(4, minmax(300px,1fr)) } }
@media (max-width:720px){ .myatpl-week-grid{ grid-template-columns:repeat(2, minmax(300px,1fr)) } }

.myatpl-week-col{ border:1px solid #eee; border-radius:12px; padding:10px; background:#fcfcfc; box-sizing:border-box; min-width:300px }
.myatpl-week-col-title{ font-weight:900; margin-bottom:8px; font-size:24px }

.myatpl-slots{ display:flex; flex-direction:column; gap:12px }

.myatpl-slot{
  position:relative; width:100%; border:3px dashed #222; background:#e9e9e9; border-radius:26px;
  min-height:150px; padding:16px 16px 60px 16px; box-sizing:border-box; overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.myatpl-slot:hover{ transform:translateY(-2px); box-shadow:0 8px 26px rgba(0,0,0,.12); border-color:#111 }
.myatpl-slot:active{ transform:translateY(0); box-shadow:0 4px 14px rgba(0,0,0,.10) }

.myatpl-slot-time{ position:absolute; top:10px; left:14px; font-weight:900; font-size:26px; color:#222; line-height:1; white-space:nowrap }

.myatpl-slot-label{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; text-align:center; z-index:2; pointer-events:none }
.myatpl-slot-label img.myatpl-slot-icon{ display:inline-block; width:50% !important; height:auto; background:transparent !important; transition:transform .16s ease }
.myatpl-slot:hover .myatpl-slot-icon{ transform:scale(1.03) }

/*
======================
Block 8: أزرار الإضافة والحذف وحالات السلوت
======================
*/
.myatpl-slot-add,.myatpl-slot-del{
  position:absolute; bottom:10px; width:24px; height:24px; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box; appearance:none; -webkit-appearance:none;
  line-height:1; font-weight:900; cursor:pointer; user-select:none; transition:transform .12s ease, filter .12s ease
}
.myatpl-slot-add:hover, .myatpl-slot-del:hover{ transform:scale(1.12); filter:drop-shadow(0 3px 8px rgba(0,0,0,.25)) }
.myatpl-slot-add:active, .myatpl-slot-del:active{ transform:scale(.96); filter:drop-shadow(0 1px 4px rgba(0,0,0,.2)) }

.myatpl-slot-del{ left:10px; background:#c62828; color:#fff; border:0; font-size:14px }
.myatpl-slot-add{ right:10px; background:#fff; color:#111; border:2px solid #111; font-size:16px }

.myatpl-slot-del.is-checked{ background:#fff !important; color:#2e7d32 !important; border:2px solid #2e7d32 !important }
.myatpl-slot.is-blocked{ background:rgba(231,76,60,.22) !important }
.myatpl-slot.is-blocked .myatpl-slot-icon{ background:transparent !important }

.myatpl-slot.read-only .myatpl-slot-add,
.myatpl-slot.read-only .myatpl-slot-del{ display:none }

/*
تقليل الحركة داخل الأسبوع*/
@media (prefers-reduced-motion:reduce){
  .myatpl-slot,.myatpl-slot-add,.myatpl-slot-del,.myatpl-week-nav,.myatpl-slot-icon{ transition:none !important }
}

/* =========================================================
   BLOCK 9: Webinar UI (modal, dialogs, slot state, flag)
   ========================================================= */

/* modal */
#wb-lect-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:99999}
#wb-lect-overlay.show{display:flex}
.wb-lect-dlg{background:#fff;border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.25);min-width:min(560px,92vw);max-width:92vw;padding:16px 16px 14px;position:relative}
.wb-lect-title{margin:0 0 12px;font-weight:800;color:var(--sm-brand,#654b1d);font-size:18px}
.wb-lect-row{display:flex;gap:8px;margin:8px 0}
.wb-lect-row label{font-size:12px;color:#6b604d;margin-bottom:4px;display:block}
.wb-lect-col{flex:1;min-width:0}
.wb-lect-select,.wb-lect-input{width:100%;box-sizing:border-box;border:1px solid #ccbca2;border-radius:10px;padding:9px 10px;font-size:14px;outline:none;background:#fff}
.wb-lect-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.wb-lect-btn{background:#C5AB88;border:1px solid #C5AB88;border-radius:10px;color:#fff;padding:9px 14px;cursor:pointer;font-weight:700}
.wb-lect-btn[disabled]{opacity:.45;cursor:not-allowed}
.wb-lect-cancel{background:#eee;color:#333;border-color:#ddd}
.wb-lect-note{font-size:11px;color:#6b604d}
.wb-lect-when{font-weight:700;color:#2b1c0f;direction:ltr;unicode-bidi:embed;font-variant-numeric:tabular-nums}
.wb-lect-err{font-size:12px;color:#a5281d;margin:4px 0 0}
.wb-lect-ximg{position:absolute;right:12px;top:12px;width:34px;height:34px;object-fit:contain;cursor:pointer;user-select:none;z-index:2;filter:drop-shadow(0 4px 12px rgba(0,0,0,.18));transition:transform .12s ease, filter .12s ease}
.wb-lect-ximg:hover{transform:scale(1.05);filter:drop-shadow(0 6px 16px rgba(0,0,0,.22))}
.wb-lect-ximg:focus{outline:2px solid #C5AB88;outline-offset:3px;border-radius:10px}

/* past slots */
.myatpl-slot.is-past{filter:grayscale(1) brightness(.78) contrast(.95);opacity:.85;box-shadow:inset 0 0 0 9999px rgba(0,0,0,.08)}
.myatpl-slot.is-past *{pointer-events:none}
.myatpl-slot.is-past:hover{transform:none !important;box-shadow:inset 0 0 0 9999px rgba(0,0,0,.08) !important}

/* slot state */
.myatpl-slot{position:relative}
.myatpl-slot.wb-lecture{background:#f3f3f3 !important;border-color:#bfbfbf !important}
.myatpl-slot.wb-lecture .myatpl-slot-add{display:flex !important}

/* شعار postponed في مركز السلوت */
.myatpl-slot > img.wb-slot-flag{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(120px,68%); max-height:82%; height:auto; object-fit:contain; pointer-events:none; z-index:5;
}

/* أولوية زر X الأصلي */
.myatpl-slot.wb-lecture .slot-x,
.myatpl-slot.wb-lecture .calendar-slot-x,
.myatpl-slot.wb-lecture [data-cancel]{display:flex !important;opacity:1 !important;pointer-events:auto !important}

/* X صغيرة مطابقة لحجم ✔︎ الخضراء */
.myatpl-slot.wb-lecture .myatpl-slot-is-checked{display:none !important}
.myatpl-slot.wb-lecture .myatpl-slot-is-checked.wb-as-cancel{
  display:flex !important; align-items:center; justify-content:center;
  position:absolute; left:6px; bottom:6px;
  width:14px; height:14px; border-radius:50%;
  background:#c5332b; color:#fff; border:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
  cursor:pointer; pointer-events:auto; z-index:6;
}
.myatpl-slot.wb-lecture .myatpl-slot-is-checked.wb-as-cancel > *{display:none !important}
.myatpl-slot.wb-lecture .myatpl-slot-is-checked.wb-as-cancel::before{
  content:'✕'; font-weight:800; font-size:10px; line-height:1; color:#fff;
}

/* زر X بديل بنفس المقاس */
.myatpl-slot .wb-cancel-x{
  position:absolute; left:6px; bottom:6px;
  width:14px; height:14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#c5332b; color:#fff; border:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.08); cursor:pointer; z-index:6;
}
.myatpl-slot .wb-cancel-x::before{content:'✕'; font-weight:800; font-size:10px; color:#fff; line-height:1}

/* confirm */
#wb-confirm{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:100000}
#wb-confirm.show{display:flex}
.wb-confirm-card{background:#fff;border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.25);width:min(420px,90vw);padding:16px}
.wb-confirm-msg{font-size:15px;color:#2b1c0f;margin:2px 0 12px}
.wb-confirm-actions{display:flex;gap:8px;justify-content:flex-end}
.wb-confirm-btn{background:#C5AB88;border:1px solid #C5AB88;border-radius:10px;color:#fff;padding:8px 12px;cursor:pointer;font-weight:700}
.wb-confirm-cancel{background:#eee;color:#333;border-color:#ddd}

/* toast */
#wb-toast{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:100001}
#wb-toast.show{display:flex}
.wb-toast-box{background:#fff;border:1px solid #C5AB88;box-shadow:0 10px 28px rgba(0,0,0,.25);border-radius:12px;padding:12px 16px;color:#2b1c0f;font-weight:700}

/* helper */
.hidden{display:none !important}