/* ===== add popup ===== */
.popup-overlay{ position:absolute; inset:0; background:var(--overlay); z-index:55; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.popup-overlay.show{ opacity:1; pointer-events:auto; }
/* Full-screen on mobile (edge-to-edge sides/bottom) but with rounded
   top corners, like a native bottom sheet, instead of a centered
   floating card with margins — repo owner's request; desktop keeps
   the fully-centered rounded card below. */
.add-popup{ position:absolute; top:0; left:0; right:0; bottom:0; background:var(--card); border-radius:24px 24px 0 0; overflow:hidden; z-index:56; display:flex; flex-direction:column; box-shadow:0 25px 70px -15px var(--primary-soft), 0 10px 40px rgba(0,0,0,0.35); transform:scale(0.05); opacity:0; pointer-events:none; transition:transform .38s cubic-bezier(.2,.8,.2,1), opacity .22s ease; }
.add-popup.show{ transform:scale(1); opacity:1; pointer-events:auto; }
.popup-topbar{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px 6px 18px; flex:0 0 auto; }
.popup-close{ border:none; padding:0; font:inherit; width:34px; height:34px; border-radius:50%; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); }
.popup-close svg{width:14px; height:14px;}
.popup-body{ flex:1; padding:22px 22px 90px 22px; position:relative; overflow-y:auto; scrollbar-width:none; }
.popup-body::-webkit-scrollbar{ display:none; }
.pop-field{ width:100%; border:2px solid transparent; background:var(--bg-soft); border-radius:16px; padding:16px 16px; font-size:16px; color:var(--text); font-family:inherit; transition:border-color .22s ease, box-shadow .22s ease; }
.pop-field::placeholder{ color:var(--text-muted); }
.pop-field:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 5px var(--primary-soft); }
.pop-submit{ position:absolute; left:50%; bottom:24px; transform:translate(-50%,140%); opacity:0; transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .22s ease; pointer-events:none; background:var(--primary); color:var(--on-primary); border:none; border-radius:999px; padding:11px 27px; font-size:11px; font-weight:700; font-family:inherit; cursor:pointer; }
.pop-submit.visible{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }
/* Plain underline instead of a filled, bordered box — no color change
   on focus (the border stays the same muted color always), repo
   owner's request. */
.float-field{ position:relative; margin-bottom:14px; }
.float-field input{ width:100%; background:transparent; border:none; border-bottom:2px solid var(--border); border-radius:0; padding:20px 2px 10px 2px; font-size:16px; color:var(--text); font-family:inherit; text-align:center; transition:text-align .2s ease, padding .2s ease, border-color .2s ease, color .2s ease; }
.float-field input:focus{ outline:none; text-align:left; padding:24px 2px 6px 2px; border-bottom-color:var(--primary); color:var(--primary); }
.float-field input:not(:placeholder-shown){ text-align:left; padding:24px 2px 6px 2px; }
.float-field label{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:15px; color:var(--text-muted); pointer-events:none; transition:all .2s ease; }
.float-field input:focus + label,
.float-field input:not(:placeholder-shown) + label{ top:-2px; left:2px; transform:translate(0,0); font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--text-muted); }
.float-field input:focus + label{ color:var(--primary); }
/* Typed titles are Persian in fa mode — force-left-aligning them (the
   base rule above) scrolls RTL text oddly as you type, so mirror both
   the text and the floated label for this language, same pattern as
   the other .lang-fa overrides in this file. */
.device.lang-fa .float-field input{ text-align:right; direction:rtl; }
.device.lang-fa .float-field input:focus,
.device.lang-fa .float-field input:not(:placeholder-shown){ text-align:right; direction:rtl; }
.device.lang-fa .float-field input:focus + label,
.device.lang-fa .float-field input:not(:placeholder-shown) + label{ left:auto; right:2px; }
.weekday-picker{ display:flex; gap:5px; justify-content:space-between; }
.weekday-picker button{ width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:var(--bg-soft); color:var(--text-muted); font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; }
.weekday-picker button.active{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.subtasks-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.subtask-edit-row{ display:flex; align-items:center; gap:6px; padding-bottom:5px; padding-inline-start:20px; border-bottom:1px solid var(--border); transition:border-color .2s ease; }
.subtask-edit-row:last-child:not(:focus-within){ border-bottom:none; padding-bottom:0; }
.subtask-edit-row:focus-within{ border-bottom:1px solid var(--primary); padding-bottom:5px; }
.device.lang-fa .subtask-edit-row input{ text-align:right; direction:rtl; padding-right:20px; }
.remove-x{ order:-1; width:19px; height:19px; border-radius:0; border:none; background:transparent; color:#D98B8B; cursor:pointer; flex:0 0 auto; font-size:11px; }
.add-ghost-btn{ display:block; width:100%; text-align:center; border:none; background:transparent; color:var(--primary); padding:6px 2px; font-size:10px; font-weight:700; cursor:pointer; font-family:inherit; }
.add-ghost-btn.plus-only{ font-size:18px; }
.photo-add-row{ display:flex; gap:8px; flex-wrap:wrap; }
.photo-thumb{ position:relative; width:56px; height:56px; }
.photo-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:10px; border:1px solid var(--border); }
.photo-thumb .rm{ position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:#D98B8B; color:#1B262C; border:none; font-size:11px; cursor:pointer; line-height:1; }
.device.lang-fa .photo-thumb .rm{ right:auto; left:-6px; }
.photo-add-btn{ width:56px; height:56px; border-radius:10px; border:1.5px dashed var(--border); background:var(--bg-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); }
.photo-add-btn svg{ width:18px; height:18px; }
/* popup icon row + subviews */
.popup-icon-row{ display:flex; justify-content:center; gap:4px; margin-bottom:14px; }
.popup-icon-btn{ flex:0 0 auto; width:46px; height:46px; border-radius:14px; background:transparent; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); }
.popup-icon-btn svg{ width:18px; height:18px; }
.popup-icon-btn.set{ color:var(--primary); background:transparent; border-color:transparent; }
.popup-icon-btn.disabled{ color:var(--text-muted); opacity:.45; }
.popup-subview-header{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.popup-back{ width:32px; height:32px; border-radius:50%; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); flex:0 0 auto; }
.popup-back svg{ width:15px; height:15px; }
.popup-subview-title{ font-size:15px; font-weight:700; }
.desc-wrap{ position:relative; }
.desc-wrap textarea{ width:100%; border:2px solid transparent; background:var(--bg-soft); border-radius:14px; padding:13px 40px 30px 14px; font-size:14px; color:var(--text); font-family:inherit; resize:vertical; min-height:70px; transition:border-color .2s ease, box-shadow .2s ease; }
.desc-wrap textarea::placeholder{ color:var(--text-muted); }
.desc-wrap textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
.desc-clip-btn{ position:absolute; left:10px; bottom:10px; width:28px; height:28px; border-radius:9px; background:transparent; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); }
.device.lang-fa .desc-clip-btn{ left:auto; right:10px; }
.desc-clip-btn svg{ width:14px; height:14px; }
.desc-clip-btn.has-files{ color:var(--primary); border-color:var(--primary); }
@media (min-width: 960px){
.popup-overlay{ position:fixed; }
.add-popup{
  position:fixed; top:50%; left:50%; right:auto; bottom:auto;
  transform:translate(-50%,-50%) scale(0.05);
  width:480px; max-width:90vw; max-height:85vh;
  border-radius:24px;
}
.add-popup.show{ transform:translate(-50%,-50%) scale(1); }
}