/* Task list widget (tdl-*): toolbar, drag-and-drop sidebar, record-detail modal and Jalali picker */
.tdl-tools { display: flex; align-items: center; gap: 8px; padding: 10px 14px 0; flex-wrap: wrap; min-width: 0; }
.tdl-q-w { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); width: 250px; max-width: 100%; color: var(--muted-foreground); }
.tdl-q-w:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.tdl-ad .tdl-dtin.bad { border-color: var(--destructive); }
.tdl-q { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--foreground); }
.tdl-flt { height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font: inherit; font-size: 12.5px; color: var(--foreground); max-width: 100%; }
.tdl-cnt { font-size: 12.5px; white-space: nowrap; }
.tdl-end { flex: 1; min-width: 8px; }
.tdl-fg { display: inline-flex; align-items: center; gap: 6px; }
.tdl-tools .btn { white-space: nowrap; }
.tdl-nv { cursor: grab; user-select: none; }
.tdl-nv.dragging { opacity: .45; }
.tdl-nv.over { box-shadow: inset 0 -2px 0 var(--primary); }
.tdl-nv:active { cursor: grabbing; }

/* detail modal */
.tdl-dlg.dlg { width: min(600px, calc(100% - 32px)); max-height: 88%; overflow: auto; padding: 18px 20px; }
.tdl-dd { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tdl-dh { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.tdl-dh .tdl-stag { width: auto; display: inline-flex; flex: none; margin-top: 4px; cursor: pointer; }
.tdl-dtitle { margin: 0; font-size: 18px; line-height: 1.6; min-width: 0; overflow-wrap: anywhere; }
.tdl-dtin { flex: 1; min-width: 0; font-size: 16px; }
.tdl-dtl .dtl-v { min-width: 0; overflow-wrap: anywhere; }
.tdl-dpick { width: auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; max-width: 100%; }
.tdl-ptags { display: flex; flex-wrap: wrap; gap: 6px; }
.tdl-ptag { display: inline-flex; width: auto; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 99px; background: transparent; font: inherit; font-size: 12.5px; color: var(--foreground); cursor: pointer; white-space: nowrap; }
.tdl-ptag.on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c); font-weight: 600; }
.tdl-notev { white-space: pre-wrap; overflow-wrap: anywhere; }
.tdl-dfoot { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.tdl-cancel { margin-inline-start: auto; }

/* Jalali date picker popover */
.tdl-menu.pop { max-width: calc(100% - 16px); }
.tdl-pk { display: grid; gap: 8px; direction: rtl; }
.tdl-pkh { display: flex; align-items: center; gap: 8px; }
.tdl-pkh b { flex: 1; text-align: center; font-size: 14px; white-space: nowrap; }
.tdl-pkg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tdl-pkg > span { text-align: center; font-size: 12px; padding: 4px 0; }
.tdl-pkf { display: flex; gap: 6px; flex-wrap: wrap; }
.tdl-rp { display: grid; gap: 4px; font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }