/* ---------- مودال جلسه: اندازهٔ درست ---------- */
.modal-overlay{
  position:fixed !important; inset:0 !important; z-index:800 !important;
  display:none; align-items:center !important; justify-content:center !important;
  padding:20px !important; background:rgba(19,21,44,.48) !important;
  overflow-y:auto !important;
}
.modal-overlay.is-open,
.modal-overlay[style*="flex"]{ display:flex !important; }
.modal-overlay > .modal{
  width:min(560px, 100%) !important; max-width:100% !important;
  max-height:calc(100dvh - 40px) !important;
  display:flex !important; flex-direction:column !important;
  padding:0 !important; border-radius:14px !important; overflow:hidden !important;
  margin:auto !important;
}
.modal-head{
  display:flex !important; align-items:center !important; gap:12px !important;
  padding:16px 20px !important; flex:0 0 auto !important;
  border-bottom:1px solid var(--paper-line, #E7EAF1) !important;
}
.modal-head h3{ margin:0 !important; font-size:16.5px !important; }
.modal-close{
  margin-inline-start:auto !important; width:34px !important; height:34px !important;
  min-height:34px !important; padding:0 !important; border:0 !important; cursor:pointer;
  background:none !important; border-radius:9px !important; font-size:16px !important;
}
.modal-close:hover{ background:rgba(19,21,44,.06) !important; }
.modal > form,
.modal-body{
  padding:18px 20px !important; overflow-y:auto !important; flex:1 1 auto !important;
  min-height:0 !important; display:flex !important; flex-direction:column !important;
  gap:14px !important;
}

/* ---------- فیلدها ---------- */
.modal .field{ display:flex !important; flex-direction:column !important; gap:6px !important; margin:0 !important; }
.modal .field label{ font-size:12.5px !important; font-weight:700 !important; opacity:.72; }
.modal .field input,
.modal .field textarea,
.modal .field select{
  min-height:44px !important; height:44px !important; padding:0 13px !important;
  font-size:14px !important; border-radius:10px !important; width:100% !important;
  box-sizing:border-box !important;
}
.modal .field textarea{
  height:auto !important; min-height:76px !important; max-height:140px !important;
  padding:11px 13px !important; line-height:1.8 !important; resize:vertical !important;
}
.modal .field-row{
  display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important;
}

/* ---------- فهرست افراد ---------- */
.people-list{
  display:grid !important; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap:5px !important; max-height:190px !important; overflow-y:auto !important;
  padding:3px !important; margin:0 !important;
}
.people-opt{
  display:flex !important; align-items:center !important; gap:9px !important;
  min-height:44px !important; padding:7px 10px !important; width:100% !important;
  border:1px solid var(--paper-line, #E7EAF1) !important; border-radius:10px !important;
  background:transparent !important; cursor:pointer; font-family:inherit;
  font-size:13px !important; text-align:start !important; box-sizing:border-box !important;
}
.people-opt:hover{ background:rgba(60,1,175,.06) !important; border-color:rgba(60,1,175,.35) !important; }
.people-avatar{
  width:28px !important; height:28px !important; flex:0 0 28px !important;
  border-radius:50% !important; overflow:hidden; display:flex !important;
  align-items:center !important; justify-content:center !important;
  font-size:12px !important; font-weight:700; color:#fff;
}
.people-avatar img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.people-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; }
.people-add{
  margin-inline-start:auto !important; flex:0 0 auto !important;
  font-size:11px !important; font-weight:700 !important; padding:3px 9px !important;
  border-radius:999px !important; background:rgba(60,1,175,.08) !important;
  color:#3C01AF !important; white-space:nowrap;
}
.people-hint{ font-size:11.5px !important; opacity:.62; line-height:1.8; }
.people-chips{ display:flex !important; flex-wrap:wrap !important; gap:6px !important; }

/* ---------- کنش‌ها ---------- */
.modal-actions,
.modal .actions,
.modal form > div:last-child:has(> .btn){
  display:flex !important; gap:9px !important; align-items:center !important;
  padding-top:4px !important; flex:0 0 auto !important;
}
.modal .btn{ min-height:44px !important; height:44px !important; padding:0 20px !important; }

/* ---------- گوشی ---------- */
@media (max-width: 620px){
  .modal-overlay{ padding:10px !important; align-items:flex-end !important; }
  .modal-overlay > .modal{
    width:100% !important; max-height:calc(100dvh - 20px) !important;
    border-radius:14px !important;
  }
  .modal-head{ padding:13px 15px !important; }
  .modal-head h3{ font-size:15px !important; }
  .modal > form,.modal-body{ padding:14px 15px !important; gap:12px !important; }
  .modal .field-row{ grid-template-columns:1fr !important; }
  .people-list{ grid-template-columns:1fr !important; max-height:44vh !important; }
  .modal .btn{ flex:1 1 auto !important; }
}

html[data-theme="dark"] .modal-close:hover{ background:rgba(255,255,255,.08) !important; }
html[data-theme="dark"] .people-opt{ border-color:rgba(255,255,255,.12) !important; }
html[data-theme="dark"] .people-add{ background:rgba(143,109,255,.18) !important; color:#B9A2FF !important; }

/* ---------- چک‌باکس و رادیو از قاعدهٔ فیلدها مستثنا ---------- */
.modal input[type="checkbox"],
.modal input[type="radio"],
html body .modal input[type="checkbox"],
html body .modal input[type="radio"]{
  width:18px !important; height:18px !important; min-height:18px !important;
  max-height:18px !important; flex:0 0 18px !important; padding:0 !important;
  margin:0 !important; border-radius:4px !important; accent-color:#3C01AF;
  appearance:auto !important;
}
.modal label:has(> input[type="checkbox"]),
.modal .field:has(> input[type="checkbox"]){
  display:flex !important; flex-direction:row !important; align-items:center !important;
  gap:9px !important; cursor:pointer;
}
/* اگر چک‌باکس و برچسبش جدا هستند */
.modal .field-check{
  display:flex !important; flex-direction:row-reverse !important;
  align-items:center !important; justify-content:flex-end !important; gap:9px !important;
}

/* ---------- فشرده‌تر و مرتب‌تر ---------- */
.modal > form,.modal-body{ gap:12px !important; padding:16px 18px !important; }
.modal .field label{ text-align:start !important; }
.modal .field input,
.modal .field select{ min-height:42px !important; height:42px !important; }
.modal .field textarea{ min-height:70px !important; max-height:120px !important; }

/* تاریخ: راست‌چین و هم‌اندازه */
.modal input[type="datetime-local"],
.modal input[type="date"],
.modal input[type="time"]{
  direction:ltr !important; text-align:end !important;
  font-size:13px !important; font-variant-numeric:tabular-nums;
}

/* چیپ افراد انتخاب‌شده */
.people-chips{ gap:7px !important; }
.people-chips > *{
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  min-height:32px !important; height:auto !important; padding:4px 10px !important;
  border-radius:999px !important; font-size:12.5px !important;
}
.people-chips button,
.people-chips .chip-x{
  width:20px !important; height:20px !important; min-height:20px !important;
  flex:0 0 20px !important; padding:0 !important; border-radius:50% !important;
  font-size:11px !important;
}
.people-list{ max-height:170px !important; }
.people-opt{ min-height:42px !important; }
.people-add{ padding:3px 8px !important; font-size:10.5px !important; }

/* ---------- گوشی و تبلت: مودال بالای منوی پایین ---------- */
@media (max-width: 820px){
  html body .modal-overlay{
    padding:10px 10px calc(86px + env(safe-area-inset-bottom, 0px)) 10px !important;
    align-items:flex-end !important;
  }
  html body .modal-overlay > .modal{
    width:100% !important;
    max-height:calc(100dvh - 110px - env(safe-area-inset-bottom, 0px)) !important;
    border-radius:14px !important;
  }
  html body .modal-head{ padding:12px 14px !important; }
  html body .modal-head h3{ font-size:15px !important; }
  html body .modal > form,
  html body .modal-body{ padding:13px 14px !important; gap:11px !important; }
  html body .modal .field-row{ grid-template-columns:1fr !important; gap:11px !important; }
  html body .people-list{
    grid-template-columns:1fr !important; max-height:34vh !important; gap:6px !important;
  }
  html body .people-opt{ min-height:46px !important; padding:8px 11px !important; font-size:13.5px !important; }
  html body .people-avatar{ width:30px !important; height:30px !important; flex:0 0 30px !important; }
  html body .people-add{ font-size:11px !important; padding:4px 10px !important; }
  /* نوار کنش‌ها همیشه دیده شود */
  html body .modal form > div:last-child,
  html body .modal .modal-actions,
  html body .modal .actions{
    position:sticky !important; bottom:0 !important; z-index:2 !important;
    padding:11px 0 2px !important; margin-top:2px !important;
    background:var(--paper, #fff) !important;
    border-top:1px solid var(--paper-line, #E7EAF1) !important;
    display:flex !important; gap:9px !important;
  }
  html body .modal .btn{ flex:1 1 auto !important; min-height:46px !important; height:46px !important; }
}
html[data-theme="dark"] .modal form > div:last-child,
html[data-theme="dark"] .modal .modal-actions{
  background:#14162B !important; border-color:rgba(255,255,255,.12) !important;
}